/*
 * Centrale oppervlaktestijl voor Lightning Front.
 *
 * Nieuwe panelen en velden krijgen automatisch dezelfde uitstraling met:
 *   .ui-surface  – hoofdvenster of zwevend paneel
 *   .ui-card     – kaart of gegroepeerd blok
 *   .ui-field    – invoerveld of compact informatieveld
 *
 * Bestaande onderdelen hieronder gebruiken dezelfde tokens, zodat er geen
 * losse donkerblauwe vlakken meer ontstaan binnen de lichte kaartweergave.
 */

:root {
  --ui-surface: rgba(8, 23, 29, .9);
  --ui-surface-solid: rgba(7, 20, 25, .97);
  --ui-card: rgba(255, 255, 255, .035);
  --ui-field: rgba(255, 255, 255, .045);
  --ui-accent-soft: rgba(242, 107, 33, .085);
  --ui-control: #13272e;
  --ui-border: rgba(181, 221, 225, .16);
  --ui-ink: #ecf9f7;
  --ui-muted: #93aaad;
  --ui-accent: #ff8b3d;
  --ui-meter: #26383d;
  --ui-chart: #111;
  --ui-shadow: 0 22px 64px rgba(0, 0, 0, .38);
}

body[data-map-style="light"] {
  --ui-surface: rgba(255, 248, 239, .96);
  --ui-surface-solid: rgba(255, 248, 239, .985);
  --ui-card: #faeadb;
  --ui-field: #fcefe3;
  --ui-accent-soft: #f9e1ce;
  --ui-control: #fffaf4;
  --ui-border: rgba(137, 78, 39, .22);
  --ui-ink: #3b2c24;
  --ui-muted: #77675e;
  --ui-accent: #e85e18;
  --ui-meter: #ead4c2;
  --ui-chart: #fffaf4;
  --ui-shadow: 0 18px 52px rgba(105, 58, 27, .18);

  /* Laat bestaande componenten dezelfde centrale tokens erven. */
  --panel: var(--ui-surface);
  --line: var(--ui-border);
  --text: var(--ui-ink);
  --muted: var(--ui-muted);
  --orange: var(--ui-accent);
}

.ui-surface,
.glass,
.station-panel,
.settings-dialog,
.location-search-dialog {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
}

.station-panel,
.settings-dialog,
.location-search-dialog {
  background: var(--ui-surface-solid);
}

body[data-map-style="light"] .ui-surface,
body[data-map-style="light"] .glass,
body[data-map-style="light"] .topbar,
body[data-map-style="light"] .station-panel,
body[data-map-style="light"] .settings-dialog,
body[data-map-style="light"] .location-search-dialog {
  border-color: var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
}

body[data-map-style="light"] .station-panel,
body[data-map-style="light"] .settings-dialog,
body[data-map-style="light"] .location-search-dialog {
  background: var(--ui-surface-solid);
}

.ui-card,
.station-meta div,
.detector-grid div,
.weather-grid article,
.local-health-grid article,
.range-cards article,
.history-chart-wrap,
.legacy-periods article,
.legacy-event,
.detail-station-list,
.choice-card,
.playback-control {
  border: 1px solid var(--ui-border);
  background: var(--ui-card);
}

.active-region-button,
.activity-totals span,
.station-summary-grid article,
.location-search-results button,
#extreme-list article {
  border-color: var(--ui-border);
  background: var(--ui-card);
}

body[data-map-style="light"] .ui-card,
body[data-map-style="light"] .station-meta div,
body[data-map-style="light"] .detector-grid div,
body[data-map-style="light"] .weather-grid article,
body[data-map-style="light"] .local-health-grid article,
body[data-map-style="light"] .range-cards article,
body[data-map-style="light"] .history-chart-wrap,
body[data-map-style="light"] .legacy-periods article,
body[data-map-style="light"] .legacy-event,
body[data-map-style="light"] .detail-station-list,
body[data-map-style="light"] .choice-card,
body[data-map-style="light"] .playback-control {
  border-color: var(--ui-border);
  background: var(--ui-card);
}

.ui-field,
.setting-row select,
.station-history-section select,
.header-button,
.station-button,
.round-button,
.collapse-button {
  border-color: var(--ui-border);
  background: var(--ui-control);
  color: var(--ui-ink);
}

.station-hero,
.local-health,
.legacy-archive,
.detail-network-toggle,
.projection-distance {
  border-color: var(--ui-border);
  background: var(--ui-accent-soft);
}

.extreme-summary {
  border-color: var(--ui-border);
}

body[data-map-style="light"] .station-hero,
body[data-map-style="light"] .local-health,
body[data-map-style="light"] .legacy-archive,
body[data-map-style="light"] .detail-network-toggle,
body[data-map-style="light"] .projection-distance {
  border-color: var(--ui-border);
  background: var(--ui-accent-soft);
}

.timeline-mode {
  background: var(--ui-field);
}

body[data-map-style="light"] .timeline-mode {
  background: var(--ui-field);
}

.timeline-mode button.active,
.save-button {
  background: var(--ui-accent);
  color: #fff;
}

.choice-card:has(input:checked) {
  border-color: var(--ui-accent);
  background: var(--ui-accent-soft);
}

.secondary-button {
  border-color: var(--ui-border);
  background: var(--ui-control);
  color: var(--ui-ink);
}

.potential-meter,
.meter {
  background: var(--ui-meter);
}

.station-panel,
.settings-dialog,
.layers-panel {
  scrollbar-color: var(--ui-accent) transparent;
}

body[data-map-style="light"] .kicker,
body[data-map-style="light"] .source-row strong,
body[data-map-style="light"] .panel-heading > span,
body[data-map-style="light"] .legacy-archive summary span,
body[data-map-style="light"] .legacy-periods span,
body[data-map-style="light"] .legacy-event span {
  color: var(--ui-accent);
}

body[data-map-style="light"] .signal-count strong,
body[data-map-style="light"] .detail-primary strong {
  color: var(--ui-accent);
}

body[data-map-style="light"] input[type="range"],
body[data-map-style="light"] input[type="checkbox"],
body[data-map-style="light"] input[type="radio"],
body[data-map-style="light"] .switch-row input,
body[data-map-style="light"] .layers-panel input,
body[data-map-style="light"] .detail-network-toggle input {
  accent-color: var(--ui-accent);
}

body[data-map-style="light"] .meter i {
  background: var(--ui-accent);
  box-shadow: 0 0 7px rgba(232, 94, 24, .32);
}

body[data-map-style="light"] .station-meta span,
body[data-map-style="light"] .station-hero small,
body[data-map-style="light"] .local-health-grid span,
body[data-map-style="light"] .local-health-grid small,
body[data-map-style="light"] .range-cards article > span,
body[data-map-style="light"] .range-cards article > small,
body[data-map-style="light"] .detector-grid span,
body[data-map-style="light"] .detector-activity span,
body[data-map-style="light"] .detector-ranges span,
body[data-map-style="light"] .detector-ranges small,
body[data-map-style="light"] .weather-grid article > span,
body[data-map-style="light"] .weather-grid small,
body[data-map-style="light"] .projection-distance span,
body[data-map-style="light"] .projection-distance small,
body[data-map-style="light"] .detail-station-list strong,
body[data-map-style="light"] .detail-station-list span,
body[data-map-style="light"] .detail-network-legend,
body[data-map-style="light"] .detail-note,
body[data-map-style="light"] .gateway-privacy,
body[data-map-style="light"] .privacy-note,
body[data-map-style="light"] .legacy-intro,
body[data-map-style="light"] .legacy-periods small,
body[data-map-style="light"] .legacy-event small,
body[data-map-style="light"] .legacy-periods dt,
body[data-map-style="light"] .legacy-periods dd,
body[data-map-style="light"] .legacy-note,
body[data-map-style="light"] .weather-disclaimer {
  color: var(--ui-muted);
}

body[data-map-style="light"] .local-health-grid strong,
body[data-map-style="light"] .legacy-periods strong,
body[data-map-style="light"] .legacy-event strong {
  color: var(--ui-ink);
}

body[data-map-style="light"] .detail-own-station {
  background: var(--ui-accent-soft);
  color: #b9470e;
}

body[data-map-style="light"] .leaflet-tooltip {
  border-color: var(--ui-border);
  background: var(--ui-surface-solid);
  color: var(--ui-ink);
  box-shadow: var(--ui-shadow);
}

body[data-map-style="light"] .leaflet-tooltip-top::before {
  border-top-color: var(--ui-surface-solid);
}

body[data-map-style="light"] .leaflet-control-attribution {
  background: rgba(255, 248, 239, .86) !important;
  color: var(--ui-muted) !important;
}

body[data-map-style="light"] .leaflet-control-attribution a {
  color: #a94b1c !important;
}

body[data-map-style="light"] .settings-dialog::backdrop {
  background: rgba(74, 42, 24, .28);
}