/* Gatus in the Fleetless design system. Every colour is a token from
   docs/design-system/styles.css, except the hover and selected shades of
   the bars, which step along the same ramps. Gatus links this file BEFORE
   its own stylesheet, so every rule carries one extra `html` to outrank
   the utility class it replaces at equal specificity — remove it and
   app.css wins. Selectors are Gatus's Tailwind classes as of v5.36.0; a
   bump that renames one turns that rule off, quietly. */

/* The two faces the console ships, served by Central with CORS for
   this origin. If the fonts do not arrive, the platform UI and mono faces
   stand in and the page still reads. */
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(https://fleetless.dev/assets/fonts/public-sans-latin-wght-normal.woff2) format('woff2-variations'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(https://fleetless.dev/assets/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations'); }

/* ---- 1. Tokens. Gatus paints from shadcn's hsl(var(--x)) triplets, so the
   Fleetless surfaces are given as such. Light first, dark below. ---- */
html:root {
  --fl-font-sans: 'Public Sans', ui-sans-serif, system-ui, sans-serif;
  --fl-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --fl-radius: 0.375rem;
  --fl-radius-lg: 0.5rem;

  --fl-canvas: #ffffff; --fl-surface: #fafafa; --fl-raised: #ffffff;
  --fl-well: #f4f4f5; --fl-border: #e4e4e7; --fl-ink: #0e0e10; --fl-muted: #71717a;
  --fl-accent: #007F45;
  --fl-ok: #007F45; --fl-warn: #b45309; --fl-err: #b91c1c;
  --fl-bar-ok: #00C16A; --fl-bar-ok-hover: #00A155; --fl-bar-ok-selected: #016538;
  --fl-bar-err: #b91c1c; --fl-bar-err-hover: #991b1b; --fl-bar-err-selected: #7f1d1d;
  --fl-glow-ok: none; --fl-glow-err: none; --fl-glow-warn: none;

  --background: 0 0% 100%;          --foreground: 240 6.7% 5.9%;
  --card: 0 0% 100%;                --card-foreground: 240 6.7% 5.9%;
  --popover: 0 0% 100%;             --popover-foreground: 240 6.7% 5.9%;
  --primary: 240 6.7% 5.9%;         --primary-foreground: 0 0% 100%;
  --secondary: 240 4.8% 95.9%;      --secondary-foreground: 240 6.7% 5.9%;
  --muted: 240 4.8% 95.9%;          --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;         --accent-foreground: 240 6.7% 5.9%;
  --destructive: 0 73.7% 41.8%;     --destructive-foreground: 0 0% 100%;
  --border: 240 5.9% 90%;           --input: 240 5.9% 90%;
  --ring: 152.6 100% 24.9%;
  --radius: 0.5rem;
}
html:root.dark {
  --fl-canvas: #0e0e10; --fl-surface: #131316; --fl-raised: #1c1c1f;
  --fl-well: #0a0a0b; --fl-border: #212124; --fl-ink: #ffffff; --fl-muted: #a1a1aa;
  --fl-accent: #00DC82;
  --fl-ok: #00DC82; --fl-warn: #fbbf24; --fl-err: #f87171;
  --fl-bar-ok: #00DC82; --fl-bar-ok-hover: #75EDAE; --fl-bar-ok-selected: #B3F5D1;
  --fl-bar-err: #f87171; --fl-bar-err-hover: #fca5a5; --fl-bar-err-selected: #fecaca;
  /* Glow exists only here: a text-shadow on a light ground smears. */
  --fl-glow-ok: 0 0 6px color-mix(in oklab, #00DC82 55%, transparent);
  --fl-glow-err: 0 0 6px color-mix(in oklab, #f87171 55%, transparent);
  --fl-glow-warn: 0 0 6px color-mix(in oklab, #fbbf24 50%, transparent);

  --background: 240 6.7% 5.9%;      --foreground: 0 0% 100%;
  --card: 240 7.3% 8%;              --card-foreground: 0 0% 100%;
  --popover: 240 5.1% 11.6%;        --popover-foreground: 0 0% 100%;
  --primary: 0 0% 100%;             --primary-foreground: 240 6.7% 5.9%;
  --secondary: 240 5.1% 11.6%;      --secondary-foreground: 0 0% 100%;
  --muted: 240 5.1% 11.6%;          --muted-foreground: 240 5% 64.9%;
  --accent: 240 4.8% 4.1%;          --accent-foreground: 0 0% 100%;
  --destructive: 0 90.6% 70.8%;     --destructive-foreground: 240 6.7% 5.9%;
  --border: 240 4.3% 13.5%;         --input: 240 4.3% 13.5%;
  --ring: 155.5 100% 43.1%;
}

/* ---- 2. Base ---- */
html body { font-family: var(--fl-font-sans); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
html ::selection { background: color-mix(in oklab, var(--fl-accent) 30%, transparent); }
html :focus-visible { outline: 2px solid var(--fl-accent); outline-offset: 2px; }
html .shadow-sm, html .shadow-md, html .shadow-lg, html .hover\:shadow-lg:hover { box-shadow: none; }
html .hover\:scale-\[1\.01\]:hover { transform: none; }
html .backdrop-blur { backdrop-filter: none; }

/* ---- 3. Header: the console's 56px shell row. ---- */
html header.border-b { background: var(--fl-canvas); }
html header .container { padding-top: 0; padding-bottom: 0; }
html header .container > .flex { height: 3.5rem; }
/* The mark: 22px, the product icon, per mode. Gatus puts its own 48px
   logo box here; the box becomes the mark and the <img> in it is hidden
   so the light-mode icon can be a different file. */
html header .w-12.h-12 { width: 22px; height: 22px; border-radius: var(--fl-radius);
  background: url(https://fleetless.dev/assets/icon-color-light.svg) center / 22px 22px no-repeat; }
html:root.dark header .w-12.h-12 { background-image: url(https://fleetless.dev/assets/icon-color-dark.svg); }
html header .w-12.h-12 img { display: none; }
html header .gap-3 { gap: 0.5rem; }
html header h1.text-2xl { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
/* "System Monitoring Dashboard" is hard-coded next to the title whenever
   buttons exist. It is not a sentence Fleetless would say. */
html header h1 + p { display: none; }
html header nav a.text-sm { font-size: 13.5px; font-weight: 400; color: var(--fl-muted); padding: 7px 9px; border-radius: var(--fl-radius); }
html header nav a.text-sm:hover { background: var(--fl-well); color: var(--fl-ink); }

/* ---- 4. Page head ---- */
html .dashboard-container .container { padding-top: 1.75rem; }
html .dashboard-container h1.text-4xl { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
html .dashboard-container h1.text-4xl + p { font-size: 13px; margin-top: 0.25rem; color: var(--fl-muted); }
html .dashboard-container .mb-6 > .flex.items-center.justify-between { margin-bottom: 1.25rem; }

/* Search, filter, sort: one panel, fields like the console's. */
html .dashboard-container .bg-card.rounded-lg.border { background: var(--fl-surface); border-radius: var(--fl-radius-lg); }
html input.h-10, html .relative > button.h-9, html .relative > button.h-10 { font-size: 13px; background: var(--fl-raised); height: 2.25rem; border-color: var(--fl-border); }
html input.h-10:focus-visible, html .relative > button:focus-visible { outline: none; border-color: var(--fl-accent); box-shadow: none; }
html .dashboard-container label.font-medium { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 400; color: var(--fl-muted); }
html [role="listbox"] { background: var(--fl-raised); border-color: var(--fl-border); }
html [role="option"] { font-size: 13px; }

/* ---- 5. Groups: the head of a terminal, endpoints on the surface. ---- */
html .endpoint-group { background: var(--fl-surface); border-radius: var(--fl-radius-lg); }
html .endpoint-group-header { padding: 0.5rem 0.75rem; background: var(--fl-surface); }
html .endpoint-group-header:hover { background: var(--fl-well); }
html .endpoint-group-header h2 { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fl-muted); }
html .endpoint-group-header svg.h-5 { width: 14px; height: 14px; }
html .endpoint-group-header svg.text-green-600 { color: var(--fl-ok); width: 16px; height: 16px; }
html .endpoint-group-header span.bg-red-600 { background: transparent; color: var(--fl-err); border: 1px solid color-mix(in oklab, var(--fl-err) 35%, transparent);
  font-family: var(--fl-font-mono); font-size: 11px; line-height: 1; padding: 0.25rem 0.4rem; border-radius: var(--fl-radius); }
html .endpoint-group-content { padding: 0.75rem; }
html .endpoint-group-content h3.uppercase { font-size: 11px; font-weight: 400; letter-spacing: 0.1em; }

/* ---- 6. The endpoint card ---- */
html .endpoint { background: var(--fl-raised); border-color: var(--fl-border); border-radius: var(--fl-radius-lg); }
html .endpoint:hover { border-color: var(--fl-muted); }
html .endpoint-header { padding: 0.75rem 1rem 0.25rem; }
html .endpoint-header h3 { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
html .endpoint-header h3 span { font-size: 14px; }
html .endpoint-header h3 span:hover { color: var(--fl-ink); text-decoration: none; }
/* Group and host: a machine wrote them. */
html .endpoint-header .text-muted-foreground { font-family: var(--fl-font-mono); font-size: 11px; margin-top: 2px; }
html .endpoint-content { padding: 0.25rem 1rem 0.75rem; }
html .endpoint-content p.text-xs { font-family: var(--fl-font-mono); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--fl-ink); }
html .endpoint-content .mt-1.text-xs { font-family: var(--fl-font-mono); font-size: 11px; }

/* The bars: the last fifty answers. Fleetless green when it answered,
   Fleetless red when it did not, the well when nothing was asked yet. */
html .endpoint-content .flex.gap-0\.5 { gap: 2px; }
html .endpoint-content .rounded-sm { border-radius: 2px; }
html .endpoint-content .h-6, html .endpoint-content .sm\:h-8 { height: 1.5rem; }
html .endpoint-content .bg-green-500 { background: var(--fl-bar-ok); }
html .endpoint-content .hover\:bg-green-700:hover { background: var(--fl-bar-ok-hover); }
html .endpoint-content .bg-green-700 { background: var(--fl-bar-ok-selected); }
html .endpoint-content .bg-red-500 { background: var(--fl-bar-err); }
html .endpoint-content .hover\:bg-red-700:hover { background: var(--fl-bar-err-hover); }
html .endpoint-content .bg-red-700 { background: var(--fl-bar-err-selected); }
html .endpoint-content .bg-gray-200, html:root.dark .endpoint-content .dark\:bg-gray-700 { background: var(--fl-well); box-shadow: inset 0 0 0 1px var(--fl-border); }

/* ---- 7. Status: a tag, a dot and a word. Never the colour alone. ---- */
html .rounded-full.border.text-xs { border-radius: var(--fl-radius); font-family: var(--fl-font-mono); font-size: 11px; font-weight: 400; line-height: 1;
  padding: 0.25rem 0.4rem; gap: 0.3rem; background: var(--fl-well); color: var(--fl-muted); border-color: var(--fl-border); }
html .rounded-full.border.bg-green-500 { color: var(--fl-ok); border-color: color-mix(in oklab, var(--fl-ok) 35%, transparent); }
html .rounded-full.border.bg-destructive { color: var(--fl-err); border-color: color-mix(in oklab, var(--fl-err) 35%, transparent); }
html .rounded-full.border.bg-yellow-500 { color: var(--fl-warn); border-color: color-mix(in oklab, var(--fl-warn) 35%, transparent); }
html .rounded-full.border .w-2.h-2 { width: 6px; height: 6px; }
html .rounded-full.border .bg-green-400 { background: var(--fl-ok); box-shadow: var(--fl-glow-ok); }
html .rounded-full.border .bg-red-400 { background: var(--fl-err); box-shadow: var(--fl-glow-err); }
html .rounded-full.border .bg-yellow-400 { background: var(--fl-warn); box-shadow: var(--fl-glow-warn); }
html .rounded-full.border .bg-gray-400 { background: var(--fl-muted); }

/* ---- 8. Tooltip, settings pill, footer ---- */
html #tooltip { background: var(--fl-raised); border-color: var(--fl-border); font-family: var(--fl-font-mono); font-size: 12px; box-shadow: none; }
html #settings > div { background: var(--fl-raised); border-color: var(--fl-border); border-radius: var(--fl-radius); box-shadow: none; }
html #settings button { border-radius: var(--fl-radius); }
html #settings button:hover { background: var(--fl-well); }
html #settings span.text-xs { font-family: var(--fl-font-mono); font-weight: 400; }
html footer.border-t { border-color: var(--fl-border); }
html footer .text-sm { font-size: 12px; }
html footer a.text-emerald-800 { color: var(--fl-muted); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
html footer a.text-emerald-800:hover { color: var(--fl-ink); }

/* ---- 9. The endpoint page: the same stat, the same headings. ---- */
html main h1.text-4xl { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; }
html main .text-2xl.font-bold { font-family: var(--fl-font-mono); font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
html main h3.text-2xl.font-semibold { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
html main h3.text-sm.text-muted-foreground { font-size: 13px; font-weight: 400; }
html main svg.text-green-500 { color: var(--fl-ok); }
html main svg.text-red-500 { color: var(--fl-err); }