:root.dark {
  --background: 216 60% 10% !important;
  --foreground: 0 0% 100% !important;
  --card: 218 52% 12% !important;
  --card-foreground: 0 0% 100% !important;
  --popover: 218 52% 12% !important;
  --popover-foreground: 0 0% 100% !important;
  --primary: 191 100% 50% !important;
  --primary-foreground: 216 60% 10% !important;
  --secondary: 218 52% 16% !important;
  --secondary-foreground: 0 0% 100% !important;
  --muted: 218 52% 16% !important;
  --muted-foreground: 0 0% 100% 0.6 !important;
  --accent: 218 52% 16% !important;
  --accent-foreground: 0 0% 100% !important;
  --destructive: 0 84% 60% !important;
  --destructive-foreground: 0 0% 100% !important;
  --border: 0 0% 100% 0.06 !important;
  --input: 218 52% 16% !important;
  --ring: 191 100% 50% !important;
  color-scheme: dark !important;
}
html.dark { color-scheme: dark !important; }

/* ── Hide body heading on HOMEPAGE ONLY (duplicate of header bar) ──── */
/* Homepage container has .mb-6; detail pages use .items-start — do NOT hide those */
.flex.items-center.justify-between.mb-6 > div > h1.text-4xl.font-bold.tracking-tight {
  display: none !important;
}
.flex.items-center.justify-between.mb-6 > div > p.text-muted-foreground.mt-2 {
  display: none !important;
}

/* ── Hide "System Monitoring Dashboard" subtitle in header bar ── */
/* DOM: header nav > div > h1.text-2xl + p.text-sm.text-muted-foreground */
h1.text-2xl.font-bold.tracking-tight + p.text-sm.text-muted-foreground {
  display: none !important;
}

/* ── Hide ALL Gatus branding ─────────────────────── */
#social { display: none !important; }
#social * { display: none !important; }
a[href*="github.com"] { display: none !important; }
a[href*="github.com"] svg { display: none !important; }
footer.border-t.mt-auto,
.border-t.mt-auto:last-child { display: none !important; }
.text-sm.text-muted-foreground.text-center { display: none !important; }
a[href*="gatus.io"],
a[href*="github.com/TwiN"],
a[title*="Gatus"] { display: none !important; }
img[alt="Gatus"], img[alt="Gatus logo"] {
  color: transparent !important;
  font-size: 0 !important;
}

/* ── Nav buttons (Console / Site) ─────────────── */
/* DOM: nav.hidden.md\:flex > a.rounded-md.font-medium */
nav a.rounded-md {
  padding: 6px 18px !important;
  border: 1px solid rgba(0, 212, 255, 0.3) !important;
  border-radius: 6px !important;
  color: #00D4FF !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  letter-spacing: 0.3px !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}
nav a.rounded-md:hover {
  background: rgba(0, 212, 255, 0.12) !important;
  border-color: #00D4FF !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* ── Status banner — HOMEPAGE ONLY ────────────── */
/* Repurpose dashboard-heading h1 as green status banner */
/* Homepage parent: .flex.items-center.justify-between.mb-6 (unique) */
/* Detail pages use .flex.items-start.justify-between (no match) */
.flex.items-center.justify-between.mb-6 {
  justify-content: center !important;
}
.flex.items-center.justify-between.mb-6 > div > h1.text-4xl.font-bold.tracking-tight {
  display: block !important;
  color: #22C55E !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  padding: 12px 24px !important;
  background: rgba(34, 197, 94, 0.06) !important;
  border: 1px solid rgba(34, 197, 94, 0.2) !important;
  border-radius: 10px !important;
  letter-spacing: 0.2px !important;
}
/* Hide sort/filter controls next to banner */
.flex.items-center.justify-between.mb-6 > div:last-child:not(:first-child) {
  display: none !important;
}

/* ── Group headers — cyan accent ─────────────────── */
.endpoint-group {
  border-color: rgba(255, 255, 255, 0.06) !important;
  background-color: hsl(218 52% 12%) !important;
  border-radius: 8px !important;
  overflow: hidden;
}

/* ── Uptime bars ─────────────────────────────────── */
.bg-green-400 { background-color: #22C55E !important; }
.bg-yellow-500 { background-color: #F59E0B !important; }

/* ── Endpoint cards ──────────────────────────────── */
.endpoint, .suite {
  border-color: rgba(255, 255, 255, 0.06) !important;
}
.endpoint:hover, .suite:hover {
  border-color: rgba(0, 212, 255, 0.2) !important;
}

/* ── Header bar ──────────────────────────────────── */
.border-b.bg-card\/50 {
  background-color: hsl(216 60% 10% / 0.95) !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── Emerald text (Gatus links) → cyan ───────────── */
.text-emerald-800, .hover\:text-emerald-600:hover {
  color: #00D4FF !important;
}

/* ── Scrollbars ──────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0A1628; }
::-webkit-scrollbar-thumb { background: #0F4C75; border-radius: 4px; }
::selection { background-color: rgba(0, 212, 255, 0.3); }