/* Original dashboard layout, with the login's Midnight palette in dark mode.
   No table columns, padding, ordering or metric calculations are changed. */
#themeToggle {
  align-self: center; width: auto; flex: 0 0 auto; margin: 0 10px;
  padding: 6px 10px; border: 1px solid rgba(255,255,255,.55); border-radius: 6px;
  background: transparent; color: #FFFFFF; cursor: pointer;
  font: 600 12px/1.4 "Open Sans", "Segoe UI", sans-serif;
}
#themeToggle:hover { background: rgba(255,255,255,.12); }
#themeToggle:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
html[data-theme="dark"] { color-scheme: dark; background: #101C2B; }
html[data-theme="dark"] body {
  --bg: #101C2B; --panel: #17263A; --line: #2C3B50;
  --ink: #F2F5F7; --muted: #A9B4C2;
  --vnd-bg: #101C2B; --vnd-ink: #F2F5F7; --vnd-muted: #A9B4C2;
  --vnd-line: #2C3B50; --vnd-graphite: #A9B4C2; --vnd-mist: #1E3049;
  --vnd-th: #1E3049; --vnd-green: #34D399; --vnd-red: #FF7A73;
  --green: #34D399; --red: #FF7A73;
  background: #101C2B; color: #F2F5F7;
}
html[data-theme="dark"] body > header {
  background: #0B1420;
  border-top: 3px solid #ED1B24;
  box-shadow: none;
}
html[data-theme="dark"] .tabs a.on { background: #1E3049; }
html[data-theme="dark"] #filters { background: #17263A; }
html[data-theme="dark"] :is(.card,.kpi,#liveKpis .lk) {
  background: #17263A; border-color: #2C3B50; box-shadow: none;
}
html[data-theme="dark"] :is(.card,.kpi):hover { box-shadow: none; }
html[data-theme="dark"] :is(.kpi .v,#liveKpis .lk b) { color: #F2F5F7; }
html[data-theme="dark"] :is(.seg,#filters input[type=date],#siteSel) {
  background: #1E3049; border-color: #3B4D66; color: #F2F5F7;
}
html[data-theme="dark"] .seg button { color: #A9B4C2; }
html[data-theme="dark"] .seg button.on { color: #FFFFFF; }
html[data-theme="dark"] th { background: #1E3049; color: #A9B4C2; border-color: #2C3B50; }
html[data-theme="dark"] td { color: #F2F5F7; border-color: #2C3B50; }
html[data-theme="dark"] tbody tr:nth-child(even) td { background: #1B2C43; }
html[data-theme="dark"] tr:hover td { background: #1E3049; }
html[data-theme="dark"] .band { background: #304158; }
html[data-theme="dark"] .band i { background: #5A769C; }
html[data-theme="dark"] :is(.hint,.donut-h,.sub,#footSince) { color: #A9B4C2; }
html[data-theme="dark"] :is(input,select,textarea) { color: #F2F5F7; background: #1E3049; border-color: #53657C; }
html[data-theme="dark"] :is(button,a,input,select):focus-visible { outline-color: #F2F5F7 !important; }

/* Export dialogs share the selected mode; generated PDF/CSV data stay unchanged. */
html[data-theme="dark"] dialog.export-dialog {
  --export-ink: #F2F5F7; --export-graphite: #A9B4C2; --export-stone: #A9B4C2;
  --export-line: #3B4D66; --export-pebble: #2C3B50; --export-mist: #1E3049;
  --export-surface: #17263A; --export-blush: #302638;
}
html[data-theme="dark"] dialog.export-dialog :is(.export-dialog__sites,.export-dialog__site-option,.export-dialog__table-wrap) {
  background: #17263A; color: #F2F5F7;
}
html[data-theme="dark"] dialog.export-dialog :is(label,legend,h4) { color: #A9B4C2; }
html[data-theme="dark"] dialog.export-dialog .export-dialog__site-option.is-selected { color: #FF7A73; }

/* Login follows the very same saved preference and defaults to Midnight. */
html[data-theme="dark"] body.login-page :is(.card,input) { border-color: #3B4D66; }
html[data-theme="dark"] body.login-page label { color: #A9B4C2; }
html[data-theme="dark"] body.login-page .err { background: #302638; color: #FF7A73; border-color: #6E3543; }
html[data-theme="dark"] body.login-page footer { color: #8E9AAA; }
body.login-page #themeToggle { margin-left: auto; }

/* The shipped demo inverts primary actions in dark mode (Snow on Midnight). */
html[data-theme="dark"] :is(#go,#pdfBtn,#expBtn),
html[data-theme="dark"] dialog.export-dialog :is([data-export],.report-dialog__primary),
html[data-theme="dark"] body.login-page form button {
  background: #F2F5F7 !important; color: #101C2B !important; border-color: #F2F5F7 !important;
}
html[data-theme="dark"] :is(#go,#pdfBtn,#expBtn):hover,
html[data-theme="dark"] dialog.export-dialog :is([data-export],.report-dialog__primary):hover,
html[data-theme="dark"] body.login-page form button:hover { background: #DCE3EA !important; }
html[data-theme="dark"] .seg button.on {
  color: #F2F5F7; background: #1E3049; box-shadow: inset 0 -2px #ED1B24;
}

/* Login header follows the same theme as the dashboards. */
html[data-theme="dark"] body.login-page > header {
  background: #0B1420; box-shadow: none;
}