/* =================
   DESIGN TOKENS
   ================= */

/* Shared design tokens: single source for accent blue, surfaces, input backgrounds, focus rings, and radii — keep values here, never in feature files. */
:root {
  /* Accent blue — the one interactive hue per theme */
  --accent: #3b8bba;
  --accent-hover: #2d6f9a;
  --accent-soft: rgba(59, 139, 186, 0.35);
  --accent-tint: #e8f4fd;
  --accent-bright: #16bdff;
  --accent-bright-hover: #0ea8e6;
  --focus-ring: rgba(59, 139, 186, 0.35);
  /* Text links: darker than the accent to clear WCAG AA on white; dark mode brightens to accent-hover for AA on dark surfaces. */
  --link: #1a6fb5;
  --link-hover: #0d4f86;
  /* Charts (Highcharts): plot areas use their own text/grid palette, kept separate from page surfaces; read from JS via getChartColors(). */
  --chart-text: #000000;
  --chart-text-secondary: #6b6b6b;
  --chart-grid: #666666;
  /* Chart series palette: theme-invariant data colors (1:1 line, scatter, raw/corrected, TS line); read from JS via readCssToken(). */
  --chart-series-1to1: #6b6b6b;
  --chart-series-raw: #f4a261;
  --chart-series-corrected: #2a9d8f;
  --chart-series-valid: #783a92;
  --chart-series-invalid: #ff2c55;
  --chart-series-ts: #381926;
  --chart-caption: #999;
  /* Surfaces */
  --surface-page: #ffffff;
  --surface-panel: #ffffff;
  --surface-panel-floating: rgba(255, 255, 255, 0.95);
  --surface-control: #ffffff;
  --surface-control-floating: rgba(255, 255, 255, 0.95);
  --surface-btn: #f7f7f7;
  --surface-btn-hover: #e0e0e0;
  --surface-bar: #ffffff;
  /* Opaque shared chrome border keeps controls consistent over both map tile colors. */
  --surface-bar-border: #6f90b3;
  /* Theme-independent chrome border: layers-control uses it in both themes (no dark override); lives only on :root like --accent-bright. */
  --border-control: #6f90b3;
  /* Elevation shadows: xs (toggle knob, playhead), sm (small controls), panel, modal, control — theme-independent; dark mode deepens --shadow-panel. */
  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-control: 0 1px 4px rgba(0, 0, 0, 0.22);
  /* noUi slider handle and toggle-track fills (theme-paired; dark overrides below) */
  --slider-handle: #dbdbdb5c;
  --slider-track: #b5b5b5;
  /* Time-slider playhead — always-dark chrome in both themes. */
  --playhead-bg: #2f2f2f;
  --playhead-border: #1a1a1a;
  /* Forecast-zone missing fills (light; dark overrides below) */
  --fill-missing: #a2a7b19a;
  --fill-missing-hover: #bbbbbb;
  /* Inputs and borders */
  --input-bg: #ffffff;
  --input-text: #333;
  --border: #ccc;
  /* Text */
  --text-primary: #333;
  --text-secondary: #555;
  --text-muted: #666;
  --text-faint: #888;
  /* Theme-independent white for text on accent buttons, bevel highlights, danger badges, and dark highcharts hover — works on both accent values, lives only on :root. */
  --text-on-accent: #ffffff;
  /* Error / danger */
  --danger-text: #b94a48;
  --danger-bg: #f2dede;
  --danger-border: #eed3d7;
  --danger-solid: rgba(243, 14, 14, 0.8);
  /* Warning / notice (amber) */
  --warning-text: #664d03;
  --warning-bg: #fff8e1;
  --warning-border: #ffe69c;
  /* Row tints (dropdown hover/selected scrims; dark overrides below) */
  --tint-hover: rgba(0, 0, 0, 0.06);
  --tint-selected: rgba(0, 100, 200, 0.1);
  /* Modal backdrop scrim — theme-independent dimming overlay. */
  --scrim: rgba(0, 0, 0, 0.5);
  /* Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
}

/* =================
   DARK MODE STYLES 
   ================= */

/* Shared dark-mode scaffold (split from styles.css) */

body.dark-mode {
  /* Token overrides for the dark theme */
  --accent: #5a9fd4;
  --accent-hover: #7db4dd;
  --accent-soft: rgba(90, 159, 212, 0.35);
  --accent-tint: #1a3a5c;
  --focus-ring: rgba(90, 159, 212, 0.35);
  /* --accent-hover (#7db4dd) is the lightest accent value clearing 4.5:1 on dark panels; hover goes vivid. */
  --link: var(--accent-hover);
  --link-hover: var(--accent-bright);
  --chart-text: #e0e0e0;
  --chart-text-secondary: #b0b0b0;
  --chart-grid: #444444;
  --surface-page: #1a1a1a;
  --surface-panel: #2a2a2a;
  --surface-panel-floating: rgba(42, 42, 42, 0.95);
  --surface-control: #2c3e50;
  --surface-control-floating: rgba(44, 62, 80, 0.95);
  --surface-btn: #34495e;
  --surface-btn-hover: #3d566e;
  --surface-bar: #46627f;
  --surface-bar-border: var(--border-control);
  --shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.5);
  --slider-handle: #7777775c;
  --slider-track: #6b6b6b;
  --fill-missing: #646d72af;
  --fill-missing-hover: #778288;
  --input-bg: #404040;
  --input-text: #e0e0e0;
  --border: #555;
  --text-primary: #e0e0e0;
  --text-secondary: #bbb;
  --text-muted: #aaa;
  --text-faint: #aaa;
  /* Error / danger */
  --danger-text: #f2b8b0;
  --danger-bg: #4a2a2a;
  --danger-border: #7a4646;
  --danger-solid: rgba(243, 14, 14, 0.7);
  --warning-text: #ffd970;
  --warning-bg: #3d3220;
  --warning-border: #6b5516;
  --tint-hover: rgba(255, 255, 255, 0.08);
  --tint-selected: rgba(90, 159, 212, 0.2);
  /* Scaffold */
  background-color: var(--surface-page);
  color: var(--text-primary);
}

.map-tile-layer {
  transition: filter 0.2s ease;
}

body.dark-mode .map-tile-layer {
  filter: invert(1) hue-rotate(180deg);
}

/* Popup styles */
body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .leaflet-popup-tip {
  background-color: var(--surface-panel);
  color: var(--text-primary);
}

/* monitor's hover styles */
body.dark-mode .leaflet-tooltip {
  background-color: var(--surface-panel) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}

body.dark-mode .leaflet-tooltip-right:before {
  border-right-color: var(--text-muted) !important;
}


/* All leaflet controls*/
body.dark-mode .leaflet-control {
  background-color: var(--surface-control-floating) !important;
  color: var(--text-primary) !important;
}

/* Info and legend */
body.dark-mode .info.legend,
body.dark-mode #monitor-type-legend {
  background-color: var(--surface-control-floating) !important;
  border: 1px solid var(--surface-bar-border) !important;
  box-shadow: var(--shadow-control);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  /* Legend text: the former #ecf0f15e (8-digit hex, ~37% opacity) was dead CSS — both legend rules force --text-primary with !important. */
  color: var(--text-primary) !important;
}

body.dark-mode .info.legend #monitor-type-legend {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none;
}

body.dark-mode #map_subtitle,
body.dark-mode .leaflet-control-layers {
  background-color: var(--surface-control-floating) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.dark-mode .leaflet-control-layers label {
  color: var(--text-primary);
}

body.dark-mode .leaflet-bar a:hover {
  background-color: var(--surface-btn-hover) !important;
}

/* Easy buttons */
body.dark-mode .easy-button-button {
  background-color: var(--surface-control-floating) !important;
  color: var(--text-primary) !important;
  border-bottom: 1px solid var(--surface-control) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.dark-mode .easy-button-button:hover {
  background-color: var(--surface-btn-hover) !important;
}

/* Custom buttons */
body.dark-mode .button {
  background-color: var(--surface-btn);
  color: var(--text-primary);
  /* Solid instead of the default outset, which rendered bottom/right edges as a black shadow in dark mode. */
  border-style: solid;
  border-color: var(--surface-control);
  /* Raised-bevel highlight — the theme-independent white. */
  border-bottom-color: var(--text-on-accent);
  border-right-color: var(--text-on-accent);
}

body.dark-mode .button:hover {
  background-color: var(--surface-btn-hover);
  transition: 0.3s;
}

/* Inputs - use opacity instead of invert to prevent layout shift */
body.dark-mode input[type="radio"],
body.dark-mode input[type="checkbox"] {
  filter: invert(1) hue-rotate(180deg);
  opacity: 1;
}

/* Map container background */
body.dark-mode .leaflet-container {
  background-color: var(--surface-control);
}

body.dark-mode .leaflet-control-attribution {
  background-color: var(--surface-control-floating) !important;
  color: var(--text-primary) !important;
  border: none !important;
  padding: 0 5px !important;
  margin: 0 !important;
  box-sizing: content-box !important;
}

body.dark-mode .leaflet-control-attribution a {
  color: var(--link);
}

body.dark-mode .leaflet-control-attribution a:hover {
  color: var(--link-hover);
}

/* Layers toggle */
body.dark-mode .leaflet-control-layers-toggle {
  background-color: var(--surface-control-floating) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.dark-mode a {
  color: var(--link) !important;
}

/* Wind layer inversion for dark mode */
body.dark-mode .wind-layer {
  filter: invert(1);
}

/* Shared leaflet-bar/easy-button rule kept after the rules it refines above */
body.dark-mode .leaflet-bar:not(#map_subtitle) {
  /* Leaflet uses this element as a layout wrapper; the visible control owns the chrome. */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.dark-mode .leaflet-bar a,
body.dark-mode .leaflet-bar button,
body.dark-mode .easy-button-button {
  background-color: var(--surface-control-floating) !important;
  border: 1px solid var(--surface-bar-border) !important;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-control) !important;
  color: var(--text-primary) !important;
}

body.dark-mode .leaflet-control-zoom-in,
body.dark-mode .leaflet-control-zoom-out {
  box-sizing: border-box !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 28px !important;
}

body.dark-mode .leaflet-control-zoom-in {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

body.dark-mode .leaflet-control-zoom-out {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

body.dark-mode .leaflet-bar.leaflet-control-zoom:not(#map_subtitle) {
  box-shadow: var(--shadow-control) !important;
}

body.dark-mode .leaflet-bar.leaflet-control-zoom:not(#map_subtitle) > .leaflet-control-zoom-in,
body.dark-mode .leaflet-bar.leaflet-control-zoom:not(#map_subtitle) > .leaflet-control-zoom-out {
  box-shadow: none !important;
}