/* =====================================================================
   HEYLIM Status — bespoke theme over Gatus (shadcn/Tailwind DOM).
   HEYLIM = exactly two colors, a flipping pair:
     --lim-blue:  #10069C  (hsl 244 93% 32%)
     --lim-green: #6EF442  (hsl 105 89% 61%)
   Light = heylim.com (blue ink on white; green as a FILLED accent —
           green fill + blue ink for healthy pills/bars, blueprint grid).
   Dark  = the brand inversion (deep #08061f field at the blue hue +
           green #6EF442 ink/accents/wordmark; green-on-deep-blue).
   No teal. No off-brand lime. The HEYLIM wordmark is the display
   element: CSS-masked, painted blue on light / green on dark.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* the wordmark, as a mask (alpha = letterforms) so we paint it per theme */
:root {
  --wordmark-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22856%22%20height%3D%22289%22%20viewBox%3D%220%200%20856%20289%22%3E%3Cpath%20d%3D%22M728.744%200L762.103%20204.68L792.99%200H856V288.281H813.17V81.5424L781.87%20288.281H739.04L705.27%2084.4252V288.281H665.734V0H728.744Z%22%2F%3E%3Cpath%20d%3D%22M600.076%20288.281V0H645.378V288.281H600.076Z%22%2F%3E%3Cpath%20d%3D%22M468.757%20288.281V0H514.059V247.098H588.6V288.281H468.757Z%22%2F%3E%3Cpath%20d%3D%22M353.318%20288.281V192.737L296.074%200H343.434L378.028%20131.374L412.622%200H455.864L398.619%20192.737V288.281H353.318Z%22%2F%3E%3Cpath%20d%3D%22M208.698%2041.183V121.49H270.885V162.673H208.698V247.098H286.946V288.281H163.397V0H286.946V41.183H208.698Z%22%2F%3E%3Cpath%20d%3D%22M45.3013%20164.732V288.281H0V0H45.3013V123.549H96.7801V0H142.905V288.281H96.7801V164.732H45.3013Z%22%2F%3E%3C%2Fsvg%3E");
}

/* -------------------------------- LIGHT ---------------------------- */
/* heylim.com: blue ink on white, green as a FILLED accent. */
:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 7%;                 /* #111 */
  --card: 0 0% 100%;
  --card-foreground: 0 0% 7%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 7%;
  --primary: 244 93% 32%;                /* #10069C lim-blue */
  --primary-foreground: 0 0% 100%;
  --secondary: 244 50% 97%;
  --secondary-foreground: 244 93% 32%;
  --muted: 244 30% 97%;
  --muted-foreground: 0 0% 40%;          /* ~#555 brand gray */
  --accent: 244 60% 97%;
  --accent-foreground: 244 93% 32%;
  --destructive: 0 72% 51%;              /* one clean red, DOWN only */
  --destructive-foreground: 0 0% 100%;
  --border: 244 24% 91%;
  --input: 244 24% 91%;
  --ring: 244 93% 32%;
  --radius: 0.7rem;

  --lim-blue: #10069C;
  --lim-green: #6EF442;
  --grid: rgba(16, 6, 156, 0.022);       /* heylim.com blueprint grid */
  /* healthy = brand green FILL with blue ink (the brand's blue-on-green).
     On white we never render green as thin text — only as a saturated
     fill or a crisp bar. */
  --good: #6EF442;                       /* lim-green, crisp + saturated */
  --good-ink: #10069C;                   /* blue ink on the green fill */
  --wordmark: #10069C;
  --wordmark-h: 30px;
  --halo: transparent;
}

/* --------------------------------- DARK ---------------------------- */
/* The brand INVERSION: a deep field at the lim-blue HUE (#08061f, same
   244 hue as #10069C, very low lightness — NOT a neutral navy) with
   lim-green #6EF442 as the ink/accents/wordmark. Green-on-deep-blue.
   NOTE: Gatus's app.css also defines `:root.dark { --background: ... }`
   and loads AFTER custom.css, so an equal-specificity `:root.dark` here
   loses on source order. We use `html:root.dark` (one extra type
   selector) so our brand palette reliably wins. */
html:root.dark {
  --background: 245 68% 7%;              /* #08061f deep lim-blue field */
  --foreground: 105 60% 88%;            /* green-tinted ink */
  --card: 244 58% 11%;                  /* lifted blue panel */
  --card-foreground: 105 55% 90%;
  --popover: 244 58% 11%;
  --popover-foreground: 105 55% 90%;
  --primary: 105 89% 61%;                /* #6EF442 lim-green */
  --primary-foreground: 245 68% 7%;     /* deep-blue ink on green */
  --secondary: 105 89% 61%;              /* green accents (was teal) */
  --secondary-foreground: 245 68% 7%;
  --muted: 244 45% 14%;
  --muted-foreground: 105 22% 62%;       /* muted green-gray */
  --accent: 244 50% 16%;
  --accent-foreground: 105 70% 70%;
  --destructive: 0 70% 60%;              /* one clean red, DOWN only */
  --destructive-foreground: 0 0% 100%;
  --border: 244 42% 18%;
  --input: 244 42% 18%;
  --ring: 105 89% 61%;
  --radius: 0.7rem;

  --lim-blue: #6EF442;                   /* "ink" color on dark = green */
  --lim-green: #6EF442;
  --grid: rgba(110, 244, 66, 0.035);     /* green-tinted blueprint grid */
  --good: #6EF442;                       /* lim-green */
  --good-ink: #08061f;                   /* deep-blue ink on green fill */
  --wordmark: #6EF442;                   /* green wordmark */
  --halo: rgba(110, 244, 66, 0.06);
}

/* ------------------------------ Typography ------------------------- */
body, #app, button, input {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.006em;
}

/* faint blueprint grid (heylim.com 40px) + soft lime halo in dark */
body {
  background-color: hsl(var(--background));
  background-image:
    radial-gradient(1100px 520px at 50% -10%, var(--halo), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 40px 40px, 40px 40px;
  background-attachment: fixed;
}

/* ------------------- Header: wordmark replaces logo + title -------- */
/* Live DOM: <header><a href=heylim.com class="flex items-center gap-3">
     <div class="w-12 h-12 ..."><img alt="Gatus"></div>
     <div><h1 class="text-2xl ...">HEYLIM</h1>
          <p class="text-sm text-muted-foreground">System Monitoring Dashboard</p>
     </div></a> ... <nav> buttons </nav> ... </header>
   We keep ONLY a crisp, theme-painted wordmark; drop the raster logo and
   the "HEYLIM / System Monitoring Dashboard" text (off-brand + redundant). */
header.border-b {
  background: hsl(var(--background) / 0.72) !important;
  backdrop-filter: blur(8px);
  border-color: hsl(var(--border)) !important;
}
/* hide the raster logo image */
header a[href] img { display: none !important; }
/* paint the wordmark into the logo's w-12 h-12 box */
header a[href] > div:first-child {
  width: auto !important; height: 32px !important;
  display: inline-flex !important; align-items: center;
}
header a[href] > div:first-child::before {
  content: "";
  display: inline-block;
  height: 30px;
  width: calc(30px * 2.96);              /* 856/289 wordmark aspect */
  background-color: var(--wordmark);
  -webkit-mask: var(--wordmark-mask) no-repeat center / contain;
          mask: var(--wordmark-mask) no-repeat center / contain;
}
/* drop the textual "HEYLIM / System Monitoring Dashboard" block */
header a[href] > div:nth-child(2) { display: none !important; }

/* The hero (dashboard-heading + subheading) — calm + confident, not a
   heavy default-Gatus bold slab. This is h1.text-4xl in <main>, distinct
   from the header h1.text-2xl we just hid. */
h1.text-4xl.font-bold.tracking-tight {
  font-weight: 600 !important;
  letter-spacing: -0.022em !important;
  color: hsl(var(--foreground)) !important;
  font-size: 1.75rem !important;
  line-height: 1.25 !important;
}
h1.text-4xl.font-bold.tracking-tight + p.text-muted-foreground {
  color: hsl(var(--muted-foreground)) !important;
  font-weight: 400 !important;
  font-size: 1rem !important;
}

/* ============ Hide the skinned-Gatus chrome that cheapens it ======= */
/* The controls card holds the search box + Filter by / Sort by. We have 9
   clearly-named cards; these controls add only noise. Hide the whole card
   and any stray search input. */
div.bg-card.rounded-lg.border:has(#search-input) { display: none !important; }
#search-input { display: none !important; }
/* the "Gatus on GitHub" octocat + "Powered by Gatus" footer line */
#social { display: none !important; }
footer .text-center:has(a[href*="gatus"]),
.text-sm.text-muted-foreground.text-center:has(a[href*="gatus"]) {
  display: none !important;
}

/* ----------------------------- Endpoint cards ----------------------- */
/* Always-expanded card grid (sort=health: anything failing floats up).
   Card: .endpoint > header(h3 name + group•host) + status pill +
   uptime bars + latency. */
.endpoint {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius) !important;
  background: hsl(var(--card)) !important;
  box-shadow: 0 1px 2px rgba(16, 6, 156, 0.03) !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.endpoint:hover {
  box-shadow: 0 10px 34px rgba(16, 6, 156, 0.08) !important;
  transform: translateY(-2px) !important;
}
:root.dark .endpoint { box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important; }
:root.dark .endpoint:hover {
  border-color: hsl(var(--secondary) / 0.40) !important;
  box-shadow: 0 0 0 1px hsl(var(--secondary) / 0.16), 0 16px 44px rgba(0,0,0,0.5) !important;
}
/* endpoint name */
.endpoint h3 span[role="link"] { font-weight: 600 !important; letter-spacing: -0.01em; }
.endpoint h3 span[role="link"]:hover { color: hsl(var(--primary)) !important; }
:root.dark .endpoint h3 span[role="link"]:hover { color: hsl(var(--secondary)) !important; }

/* the group•host sub-line: small, quiet; lowercase mono in dark = ops feel.
   The group label (first .truncate[title]) carries the two-group IA. */
.endpoint .text-muted-foreground .truncate[title] { letter-spacing: 0.005em; }
:root.dark .endpoint .text-muted-foreground {
  font-family: 'JetBrains Mono', monospace !important;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  font-size: 0.72rem !important;
}

/* --------------- Status pill + uptime bars (healthy = HEYLIM) ------ */
/* "Healthy" pill -> the brand's FILLED green accent: green #6EF442 fill
   with brand-blue ink on light (blue-on-green) / deep-blue ink on dark
   (the inversion). Never thin green text on white. */
.endpoint .rounded-full.bg-green-500,
.endpoint [class*="bg-green-500"]:not([class*="w-2"]) {
  background-color: var(--good) !important;
  color: var(--good-ink) !important;
  border-color: transparent !important;
}
.endpoint .rounded-full .bg-green-400 { background-color: var(--good-ink) !important; opacity: .7; }
/* uptime history bars — crisp + saturated lim-green, not pale */
.bg-green-500, .bg-green-400, .bg-green-600, .bg-green-700, .bg-success {
  background-color: var(--good) !important;
}
/* Healthy is shown as FILL, not text — but if Gatus ever prints a green
   numeral, keep it blue-ink on light (green-on-white is the mismatch we
   avoid) and green on the deep-blue dark field. */
.text-green-500, .text-green-600, .text-green-700,
.text-green-400, .text-green-300 { color: hsl(var(--primary)) !important; }
:root.dark .text-green-500, :root.dark .text-green-600, :root.dark .text-green-700,
:root.dark .text-green-400, :root.dark .text-green-300 { color: var(--good) !important; }
:root.dark .bg-green-500, :root.dark .bg-green-600 {
  box-shadow: 0 0 6px hsl(var(--good) / 0.35);
}
[class*="rounded"][class*="bg-green"]:not(.rounded-full) { border-radius: 2.5px !important; }

/* latency / response time -> tabular mono (teal in dark) */
.font-mono { font-family: 'JetBrains Mono', monospace !important; }
.text-muted-foreground, [class*="font-mono"] { font-variant-numeric: tabular-nums; }
:root.dark [class*="font-mono"] { color: hsl(var(--secondary)); }

/* ------------------------------- Buttons --------------------------- */
a[class*="bg-primary"], button[class*="bg-primary"], .bg-primary {
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}
.text-blue-600, .text-blue-700 { color: hsl(var(--primary)) !important; }
:root.dark .text-blue-400, :root.dark .text-blue-300 {
  color: hsl(var(--secondary)) !important;
}

/* ------------------------------- Footer ---------------------------- */
footer { color: hsl(var(--muted-foreground)); border-top: 1px solid hsl(var(--border)); }
footer a { color: hsl(var(--primary)); text-decoration: none; }
:root.dark footer a { color: hsl(var(--secondary)); }
footer a:hover { text-decoration: underline; }

/* selection + scrollbar polish */
::selection { background: hsl(var(--primary) / 0.18); }
:root.dark ::selection { background: hsl(var(--secondary) / 0.28); }
:root.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
:root.dark ::-webkit-scrollbar-thumb { background: hsl(244 40% 20%); border-radius: 6px; }
:root.dark ::-webkit-scrollbar-thumb:hover { background: hsl(105 50% 32%); }