/* Neuroon Status — custom theme on top of Upptime */

:root {
  --nrn-bg: #0a0a0f;
  --nrn-surface: #12121a;
  --nrn-surface-elevated: #1a1a26;
  --nrn-border: #20202e;
  --nrn-border-strong: #2a2a3d;
  --nrn-text: #f0f0f5;
  --nrn-text-secondary: #c8c8d3;
  --nrn-text-muted: #7c7c92;
  --nrn-accent: #06b6d4;
  --nrn-accent-strong: #0891b2;
  --nrn-up: #10b981;
  --nrn-up-glow: rgba(16, 185, 129, 0.18);
  --nrn-down: #ef4444;
  --nrn-degraded: #f59e0b;
  --nrn-radius: 12px;
  --nrn-radius-lg: 14px;
}

html,
body {
  background: var(--nrn-bg) !important;
  color: var(--nrn-text) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
}

code,
kbd,
pre,
samp {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.875em !important;
}

/* ----- Navbar ----- */
nav {
  background: rgba(10, 10, 15, 0.72) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--nrn-border) !important;
  padding: 14px 0 !important;
}
nav .container {
  padding: 0 24px !important;
  max-width: 980px !important;
  margin: 0 auto !important;
}
nav .logo {
  gap: 12px !important;
  font-weight: 600 !important;
  color: var(--nrn-text) !important;
  text-decoration: none !important;
}
nav .logo img {
  width: 26px !important;
  height: 26px !important;
}
nav ul {
  gap: 26px !important;
}
nav ul a {
  color: var(--nrn-text-muted) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 150ms ease !important;
}
nav ul a:hover {
  color: var(--nrn-text) !important;
}
nav ul a[aria-current="page"] {
  color: var(--nrn-accent) !important;
}

/* ----- Main container ----- */
main.container {
  max-width: 980px !important;
  padding: 56px 24px !important;
  margin: 0 auto !important;
}

/* ----- Hero header ----- */
header h1 {
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
  margin: 0 0 12px 0 !important;
  color: var(--nrn-text) !important;
}
header .lead,
header p {
  color: var(--nrn-text-muted) !important;
  font-size: 1.0625rem !important;
  line-height: 1.55 !important;
  max-width: 640px !important;
  margin: 0 0 32px 0 !important;
}

/* ----- All-systems-operational banner ----- */
main > section:first-of-type {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.04) 100%) !important;
  border: 1px solid rgba(16, 185, 129, 0.25) !important;
  border-radius: var(--nrn-radius-lg) !important;
  padding: 20px 24px !important;
  margin: 0 0 16px 0 !important;
  font-weight: 600 !important;
  font-size: 1.0625rem !important;
}

/* Hide empty "Active Incidents" / "Active scheduled" placeholders when they have no content */
main > section:nth-of-type(2):empty,
main > section:nth-of-type(2):not(:has(*)),
main > section.svelte-8lnl4f:empty {
  display: none !important;
}
/* Backup: hide section if it only contains empty divs (no h2, no list items) */
main > section.svelte-8lnl4f {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  min-height: 0 !important;
}
main > section.svelte-8lnl4f:has(h2),
main > section.svelte-8lnl4f:has(ul),
main > section.svelte-8lnl4f:has(article),
main > section.svelte-8lnl4f:has(.live-status) {
  margin: 32px 0 0 0 !important;
}

/* ----- Live Status header ----- */
h2 {
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: var(--nrn-text) !important;
  margin: 0 !important;
}

/* ----- Time-range selector (24h / 7d / 30d / 1y / all) ----- */
form.f.r {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: var(--nrn-surface) !important;
  border: 1px solid var(--nrn-border) !important;
  border-radius: 999px !important;
  margin-left: auto !important;
}
form.f.r input[type='radio'] {
  display: none !important;
}
form.f.r label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: var(--nrn-text-muted) !important;
  cursor: pointer !important;
  transition: color 150ms ease, background 150ms ease !important;
}
form.f.r label:hover {
  color: var(--nrn-text) !important;
}
form.f.r input:checked + label {
  background: var(--nrn-accent) !important;
  color: #001014 !important;
  font-weight: 600 !important;
}

/* ----- Component cards ----- */
.live-status > div,
.live-status > article {
  background: var(--nrn-surface) !important;
  border: 1px solid var(--nrn-border) !important;
  border-radius: var(--nrn-radius-lg) !important;
  padding: 20px 24px !important;
  margin: 0 0 12px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 200ms ease !important;
}
.live-status > div:hover,
.live-status > article:hover {
  border-color: var(--nrn-border-strong) !important;
}

/* Left status bar — green by default, red if data-status="down" */
.live-status > div::before,
.live-status > article::before {
  content: '';
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 3px !important;
  background: var(--nrn-up) !important;
  box-shadow: 0 0 24px var(--nrn-up-glow) !important;
}

/* Card headlines */
.live-status h3,
.live-status > div > div:first-child > strong {
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: var(--nrn-text) !important;
}

.live-status p,
.live-status span {
  color: var(--nrn-text-muted) !important;
  font-size: 0.9rem !important;
}
.live-status strong,
.live-status b {
  color: var(--nrn-text) !important;
  font-weight: 600 !important;
}

/* ----- Loading skeletons ----- */
svg circle,
svg path {
  stroke: var(--nrn-text-muted) !important;
  opacity: 0.45;
}

/* ----- Footer ----- */
footer {
  margin-top: 64px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--nrn-border) !important;
  text-align: center !important;
  font-size: 0.82rem !important;
  color: var(--nrn-text-muted) !important;
}
footer a {
  color: var(--nrn-text-muted) !important;
  text-decoration: none !important;
  border-bottom: 1px dotted var(--nrn-border-strong) !important;
}
footer a:hover {
  color: var(--nrn-accent) !important;
  border-color: var(--nrn-accent) !important;
}

/* ----- Selection ----- */
::selection {
  background: var(--nrn-accent);
  color: #001014;
}

/* ----- Smooth transitions ----- */
a,
button,
label {
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease !important;
}