/* TriceTel "Second Brain" theme for Gatus v5.34.0 */

/* --- Tokens: light (default) ----------------------------------------- */
html:root {
  --background: 0 0% 100%;          /* #ffffff */
  --foreground: 0 0% 3.9%;          /* #0a0a0a */
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;               /* #171717 */
  --primary-foreground: 0 0% 98%;   /* #fafafa */
  --secondary: 0 0% 96.1%;          /* #f5f5f5 */
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;   /* #737373 */
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 72.2% 50.6%;     /* #dc2626 */
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 89.8%;             /* #e5e5e5 */
  --input: 0 0% 89.8%;
  --ring: 0 0% 63.1%;               /* #a1a1a1 */
  --radius: 0.625rem;               /* 10px cards, 8px md, 6px sm */
  --brand: 217.2 91.2% 59.8%;       /* #3b82f6, links only */
  --scroll-thumb: rgba(155, 155, 155, 0.3);
  --scroll-thumb-hover: rgba(155, 155, 155, 0.55);
}

/* --- Tokens: dark (html.dark) ----------------------------------------- */
html:root.dark {
  --background: 0 0% 3.9%;          /* #0a0a0a */
  --foreground: 0 0% 98%;           /* #fafafa */
  --card: 0 0% 7.1%;                /* #121212 */
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 7.1%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 83.1%;            /* #d4d4d4 */
  --primary-foreground: 0 0% 7.1%;
  --secondary: 0 0% 14.9%;          /* #262626 */
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.1%;   /* #a1a1a1 */
  --accent: 0 0% 25.1%;             /* #404040 */
  --accent-foreground: 0 0% 98%;
  --destructive: 0 90.6% 70.8%;     /* #f87171 */
  --destructive-foreground: 0 0% 7.1%;
  /* Opaque stand-ins for rgba(255,255,255,.10/.15) composited on #0a0a0a.
     Kept solid so alpha modifiers (bg-border/50) stay valid CSS. */
  --border: 0 0% 14.5%;
  --input: 0 0% 18.3%;
  --ring: 0 0% 63.1%;
}

/* --- Typography -------------------------------------------------------- */
html:root {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: 'rlig' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  background-color: hsl(var(--background));
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

.font-mono,
#tooltip .font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
}

h1, h2, h3 {
  letter-spacing: -0.015em;
}

/* --- Flat: no shadows, no lift ---------------------------------------- */
.shadow-sm, .shadow-md, .shadow-lg,
.hover\:shadow-lg:hover, .hover\:shadow-sm:hover,
#settings > div, #settings > div:hover, #tooltip {
  box-shadow: none !important;
}

.endpoint:hover, .suite:hover,
.hover\:scale-\[1\.01\]:hover, .hover\:scale-110:hover,
#settings > div:hover {
  transform: none !important;
}

/* --- Surfaces and hairlines -------------------------------------------- */
header, footer {
  background-color: hsl(var(--background)) !important;
  backdrop-filter: none !important;
}

.endpoint, .suite, .endpoint-group,
.announcement-container > div,
#login-container .rounded-lg {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 10px !important;
  background-color: hsl(var(--card)) !important;
}

.endpoint:hover, .suite:hover {
  border-color: hsl(var(--ring)) !important;
  transition: border-color 0.15s ease;
}

.endpoint-group-header {
  background-color: hsl(var(--card)) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
}

.endpoint-group-header:hover {
  background-color: hsl(var(--muted)) !important;
}

/* --- Neutral ramp: remap Tailwind gray-* onto neutral-* (light) ------- */
.bg-gray-50, .bg-gray-100,
.bg-blue-50, .bg-green-50, .bg-red-50, .bg-yellow-50 {
  background-color: hsl(var(--muted)) !important;
}
.hover\:bg-gray-50:hover { background-color: hsl(var(--muted)) !important; }
.bg-gray-200 { background-color: #e5e5e5 !important; }
.bg-gray-300 { background-color: #d4d4d4 !important; }
.bg-gray-400 { background-color: #a1a1a1 !important; }

.border-gray-200 { border-color: #e5e5e5 !important; }
.border-gray-300 { border-color: #d4d4d4 !important; }
.border-gray-400 { border-color: #a1a1a1 !important; }
.border-gray-500 { border-color: #737373 !important; }

.text-gray-400 { color: #a1a1a1 !important; }
.text-gray-500, .text-gray-600 { color: #737373 !important; }
.text-gray-700 { color: #404040 !important; }
.text-gray-900 { color: #0a0a0a !important; }

/* --- Neutral ramp (dark) ----------------------------------------------- */
.dark .dark\:bg-gray-800,
.dark .dark\:bg-blue-900, .dark .dark\:bg-green-900,
.dark .dark\:bg-red-900, .dark .dark\:bg-yellow-900,
.dark .dark\:bg-red-950 {
  background-color: hsl(var(--muted)) !important;
}
.dark .dark\:bg-gray-700,
.dark .dark\:hover\:bg-gray-700:hover { background-color: #262626 !important; }
.dark .dark\:bg-gray-600 { background-color: #404040 !important; }

.dark .dark\:border-gray-600 { border-color: #262626 !important; }
.dark .dark\:border-gray-400 { border-color: #404040 !important; }
.dark .dark\:hover\:border-gray-700:hover { border-color: #404040 !important; }

.dark .dark\:text-gray-100 { color: #fafafa !important; }
.dark .dark\:text-gray-300 { color: #d4d4d4 !important; }
.dark .dark\:text-gray-400 { color: #a1a1a1 !important; }

/* --- Status colors: intentionally preserved ----------------------------
   Tailwind's green-500 (#22c55e) / red-500 (#ef4444) already match the
   target palette, so the result bars and badges are left alone. Only the
   one hardcoded legacy hex is nudged into line. */
.bg-success { background-color: #22c55e !important; }

/* --- Links ------------------------------------------------------------- */
.text-emerald-800 { color: hsl(var(--muted-foreground)) !important; }
.hover\:text-emerald-600:hover,
footer a:hover { color: hsl(var(--brand)) !important; }

/* --- Settings pill and tooltip ----------------------------------------- */
#settings > div {
  background-color: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  backdrop-filter: none !important;
}

#tooltip {
  background-color: hsl(var(--popover)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 8px !important;
}

/* --- Focus and selection ------------------------------------------------ */
:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

::selection {
  background-color: hsl(var(--foreground) / 0.12);
}

/* --- Scrollbars --------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }

/* --- Hide the "Powered by Gatus" + GitHub footer ---------------------- */
footer { display: none !important; }