:root {
  --ui-bg: #e9eef5;
  --ui-bg-elevated: #f7f9fc;
  --ui-panel: #ffffff;
  --ui-panel-soft: #f2f6fa;
  --ui-text: #101827;
  --ui-heading: #071525;
  --ui-muted: #526277;
  --ui-line: rgba(15,23,42,.18);
  --ui-line-strong: rgba(15,23,42,.28);
  --ui-nav: rgba(248,250,252,.97);
  --ui-accent: #0369a1;
  --ui-accent-strong: #075985;
  --ui-accent-soft: #e0f2fe;
  --ui-green: #15803d;
  --ui-red: #b91c1c;
  --ui-shadow: 0 14px 34px rgba(15,23,42,.12);
}
html[data-theme="dark"] {
  --ui-bg: #07111f;
  --ui-bg-elevated: #0b1727;
  --ui-panel: #0f172a;
  --ui-panel-soft: #111d31;
  --ui-text: #e8eef7;
  --ui-heading: #f8fbff;
  --ui-muted: #9aabc0;
  --ui-line: rgba(148,163,184,.20);
  --ui-line-strong: rgba(148,163,184,.34);
  --ui-nav: rgba(7,17,31,.96);
  --ui-accent: #38bdf8;
  --ui-accent-strong: #7dd3fc;
  --ui-accent-soft: rgba(56,189,248,.12);
  --ui-green: #4ade80;
  --ui-red: #f87171;
  --ui-shadow: 0 18px 50px rgba(0,0,0,.30);
}

.traffic-nav {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px max(14px, calc((100vw - 1360px)/2 + 24px));
  background: var(--ui-nav);
  border-bottom: 1px solid var(--ui-line-strong);
  backdrop-filter: blur(16px);
  box-shadow: 0 6px 22px rgba(15,23,42,.10);
}
.traffic-nav .brand {
  font-weight: 950; letter-spacing: -.025em; margin-right: 10px;
  color: var(--ui-heading);
}
.traffic-nav a, .traffic-nav button {
  border: 1px solid var(--ui-line);
  background: var(--ui-panel);
  color: var(--ui-text);
  border-radius: 11px; padding: 8px 11px;
  text-decoration: none; font: inherit; cursor: pointer;
  font-size: 13px; font-weight: 750;
}
.traffic-nav a:hover, .traffic-nav button:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent-strong);
}
.traffic-nav a.active {
  background: var(--ui-accent-soft);
  color: var(--ui-accent-strong);
  border-color: var(--ui-accent);
}
.traffic-nav .spacer { flex: 1; }
.traffic-nav .clock {
  color: var(--ui-muted); font-size: 12px;
  min-width: 122px; text-align: right;
}

body.ui-themed {
  background: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  transition: background .25s ease, color .25s ease;
}

/* Shared surface treatment */
body.ui-themed .card,
body.ui-themed .panel,
body.ui-themed .toolbar,
body.ui-themed .status,
body.ui-themed .nav-card {
  border-color: var(--ui-line) !important;
}

html[data-theme="light"] body.ui-themed .card,
html[data-theme="light"] body.ui-themed .panel,
html[data-theme="light"] body.ui-themed .toolbar,
html[data-theme="light"] body.ui-themed .status,
html[data-theme="light"] body.ui-themed .nav-card {
  background: var(--ui-panel) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow) !important;
}

/* Strong readable headings in light mode.
   This deliberately overrides the page-local transparent gradient headings. */
html[data-theme="light"] body.ui-themed h1 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--ui-heading) !important;
  color: var(--ui-heading) !important;
  text-shadow: none !important;
}
html[data-theme="light"] body.ui-themed h2,
html[data-theme="light"] body.ui-themed h3,
html[data-theme="light"] body.ui-themed .title,
html[data-theme="light"] body.ui-themed .snapshot-title {
  color: var(--ui-heading) !important;
}

/* Secondary text: darker than before for WCAG-friendly contrast */
html[data-theme="light"] body.ui-themed .subtitle,
html[data-theme="light"] body.ui-themed .hint,
html[data-theme="light"] body.ui-themed .kpi-title,
html[data-theme="light"] body.ui-themed .kpi-note,
html[data-theme="light"] body.ui-themed .desc,
html[data-theme="light"] body.ui-themed .system-note,
html[data-theme="light"] body.ui-themed .nav-card p,
html[data-theme="light"] body.ui-themed .snapshot-meta {
  color: var(--ui-muted) !important;
}

/* Inputs and controls */
html[data-theme="light"] body.ui-themed input,
html[data-theme="light"] body.ui-themed select {
  background: #fff !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-line-strong) !important;
}
html[data-theme="light"] body.ui-themed button {
  color: var(--ui-text);
}

/* Tables */
html[data-theme="light"] body.ui-themed table,
html[data-theme="light"] body.ui-themed th,
html[data-theme="light"] body.ui-themed td {
  color: var(--ui-text) !important;
  border-color: var(--ui-line) !important;
}
html[data-theme="light"] body.ui-themed th {
  color: #405168 !important;
}

/* Status elements that were too pale in light mode */
html[data-theme="light"] body.ui-themed .status-value,
html[data-theme="light"] body.ui-themed .green {
  color: var(--ui-green) !important;
}
html[data-theme="light"] body.ui-themed .status-row {
  background: var(--ui-panel-soft) !important;
  border-color: var(--ui-line) !important;
}
html[data-theme="light"] body.ui-themed .status-label {
  color: var(--ui-heading) !important;
}
html[data-theme="light"] body.ui-themed .open {
  color: var(--ui-accent-strong) !important;
}

/* Index live badge */
html[data-theme="light"] body.ui-themed .live-badge {
  background: #dcfce7 !important;
  color: #166534 !important;
  border-color: #86efac !important;
}
html[data-theme="light"] body.ui-themed .live-dot {
  background: #16a34a !important;
  box-shadow: 0 0 12px rgba(22,163,74,.42) !important;
}

/* Snapshot overlay stays dark because it sits on a photograph */
html[data-theme="light"] body.ui-themed .snapshot-overlay {
  background: linear-gradient(180deg, transparent, rgba(2,6,23,.92)) !important;
}
html[data-theme="light"] body.ui-themed .snapshot-overlay .snapshot-title {
  color: #fff !important;
}
html[data-theme="light"] body.ui-themed .snapshot-overlay .snapshot-meta {
  color: #dbeafe !important;
}

/* Footer needs more contrast on the light background */
html[data-theme="light"] body.ui-themed .footer {
  color: #526277 !important;
}

/* Keep charts visually framed in light mode */
html[data-theme="light"] body.ui-themed canvas {
  filter: saturate(1.08) contrast(1.03);
}

@media print {
  .traffic-nav, .toolbar, button, input[type=file] { display:none !important; }
  body, body.ui-themed { background:#fff !important; color:#000 !important; }
  h1,h2,h3 { color:#000 !important; -webkit-text-fill-color:#000 !important; background:none !important; }
  .card,.panel,.nav-card {
    box-shadow:none !important; break-inside:avoid;
    border:1px solid #aaa !important; background:#fff !important; color:#000 !important;
  }
  canvas { max-width:100% !important; filter:none !important; }
  @page { margin: 12mm; }
}