/* Black mode uses the existing dashboard. Map geometry, colors and media stay intact. */
.theme-toggle{display:flex;gap:2px;padding:3px;flex-shrink:0;white-space:nowrap;font-size:12px;min-height:36px}
.theme-choice{padding:5px 7px;border-radius:4px;display:flex;align-items:center;gap:4px}
.theme-black{background:#087f9f;color:#fff}.theme-light{color:#9ec6df}
html[data-theme="light"]{color-scheme:light;--bg:#eaf7fb;--panel:#ffffff;--panel-deep:#effafd;--border:#acd9e4;--cyan:#007f9a;--blue:#087db7;--text:#123f53;--muted:#4a7083;--green:#087b50;--yellow:#936100;--orange:#a6530c;--red:#bd263e}
html[data-theme="light"] .theme-light{background:#087f9f;color:#fff}
html[data-theme="light"] .theme-black{background:transparent;color:#476978}
html[data-theme="light"] :is(.header,.sidebar){background:linear-gradient(115deg,#d4f2f8,#effbfe);color:var(--text)}
html[data-theme="light"] main{background:#eaf7fb}
html[data-theme="light"] .brand{color:#08617e}
html[data-theme="light"] :is(.brand-description small,.brand-motto small,.mock-label){color:#426d80}
html[data-theme="light"] .panel{background:linear-gradient(115deg,#fff,#f4fbfd);box-shadow:0 2px 6px #087f9f09}
html[data-theme="light"] :is(button,input,select,option){background:#f5fcfe;color:var(--text);border-color:var(--border)}
html[data-theme="light"] input::placeholder{color:#577b8d}
html[data-theme="light"] :is(button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible){outline-color:#007f9a}
html[data-theme="light"] :is(button:hover,.nav-link:hover){background:#d7f1f8;border-color:#238fa9}
html[data-theme="light"] .nav-link{color:#245367}
html[data-theme="light"] :is(.nav-link.active,button.active,.tab.active,.primary-button){background:linear-gradient(110deg,#087f9f,#006788);border-color:#087f9f;color:white}
html[data-theme="light"] .avatar{color:white}
html[data-theme="light"] :is(.kpi,.weather-item,.alert-card,.forecast-day,.station-card,.small-tile,.flow-box,.score-box,.confidence,.recommendation,.scenario-control,.scenario-control output,.camera-thumb,.progress-list p,.scenario-results td,.scenario-results th){background:#f0fafd;border-color:#b7dfe8;color:var(--text)}
html[data-theme="light"] :is(.panel-head,.metric-row,.stat-line,.dialog-heading,.stream-config,.reading,.layer-row){border-color:#c6e5ec}
html[data-theme="light"] :is(.kpi-label,.kpi-note,.chart-legend,.station-readings span,.timeline-item time,.range-labels,.scenario-state,.stream-config label,.dialog-footer,.empty-state,.camera-empty,.forecast-day .rain-chance){color:var(--muted)}
html[data-theme="light"] :is(.station-readings b,.scenario-results th){color:var(--text)}
html[data-theme="light"] :is(th,thead){background:#d8f1f7;color:#145169;border-color:#b7dfe8}
html[data-theme="light"] td{border-color:#d1e9ef}
html[data-theme="light"] tbody tr:nth-child(even){background:#f1fafd}
html[data-theme="light"] tbody tr:hover{background:#ddf3f8}
html[data-theme="light"] .status-pill{background:#e1f5ec;color:#087347}
html[data-theme="light"] .status-pill.warning{background:#fff0c6;color:#835200}
html[data-theme="light"] .status-pill.critical{background:#ffe3e7;color:#aa2035}
html[data-theme="light"] :is(.status-pill.offline,.status-pill.maintenance){background:#e7edf1;color:#4b6270}
html[data-theme="light"] .scenario-card{background:#e6f6ef;border-color:#94cdb5}
html[data-theme="light"] :is(.scenario-card.expected,.scenario-results .result-a){background:#e7f5fb}
html[data-theme="light"] .scenario-card.worst{background:#fff4da}
html[data-theme="light"] .scenario-results .result-b{background:#e6f6ef}
html[data-theme="light"] .scenario-card small{color:#17617c}
html[data-theme="light"] .scenario-card.worst small{color:#875400}
html[data-theme="light"] .score-ring:before{background:#f0fafd}
html[data-theme="light"] :is(.horizontal-bar>div,.mini-track,.risk-track){background:#d6eaf0}
html[data-theme="light"] :is(dialog,#toast){background:#f7fcfe;color:var(--text);border-color:#7ebfce}
html[data-theme="light"] dialog::backdrop{background:#0b334f80}
html[data-theme="light"] :is(.map-layer-panel,.map-legend,.history-station,.search-results){background:#f5fcfef5;color:var(--text);border-color:#9acbd8}
html[data-theme="light"] .map-search input{background:#f5fcfef5;color:var(--text)}
html[data-theme="light"] .search-results button{color:var(--text);background:transparent}
html[data-theme="light"] .search-results button:hover{background:#dbf2f7}
html[data-theme="light"] .map-note{background:#f5fcfeeb;color:#315c70}
html[data-theme="light"] .map-state{background:#edf9fcf2;color:var(--text)}
html[data-theme="light"] .maplibregl-popup-content{background:#f5fcfe;color:var(--text);border-color:#2699b0}
html[data-theme="light"] .maplibregl-popup-tip{border-top-color:#f5fcfe!important}
/* Keep pictorial markers, camera overlays and their status palette readable. */
html[data-theme="light"] :is(.marker-button,.marker-button:hover){background:transparent;border:0;color:#eef7ff}
html[data-theme="light"] .cluster-marker{background:#075c7a;color:#fff}
html[data-theme="light"] .cluster-marker.warning{background:#957200;border-color:#ffdb44}
html[data-theme="light"] .cluster-marker.critical{background:#a42034;border-color:#ff647a}
html[data-theme="light"] :is(.camera-overlay,.camera-level,.video-controls button){color:white}
html[data-theme="light"] .video-controls button{background:#001b2dcc}
/* Tint only UI glyphs on pale surfaces, never map markers, logos or camera media. */
html[data-theme="light"] :is(.nav-link:not(.active),.panel-head,.metric-row,.layer-row,.small-tile,.selected-station-head,.flow-box,.scenario-control,.recommendation,.stat-line,.camera-title,.station-card-header>button,.map-legend)>.icon{filter:brightness(0) saturate(100%) invert(34%) sepia(50%) saturate(950%) hue-rotate(149deg)}
html[data-theme="light"] .user-button{background:transparent}
html[data-theme="light"] :is(.weather-item span,.search-symbol){color:var(--muted)}
html[data-theme="light"] .weather-item em{color:var(--green)}
html[data-theme="light"] .station-card{border-left-color:var(--green)}
html[data-theme="light"] .station-card.warning{border-left-color:var(--yellow)}
html[data-theme="light"] .station-card.critical{border-left-color:var(--red)}
html[data-theme="light"] :is(.alert-card>.icon,.scenario-results td .icon:not([src$="/alert.svg"]),.scenario-summary .icon:not([src$="/alert.svg"])){filter:brightness(0) saturate(100%) invert(34%) sepia(50%) saturate(950%) hue-rotate(149deg)}
@media(max-width:760px){.theme-toggle{font-size:11px;min-height:34px}.theme-choice{padding:5px}.header{gap:6px}.header .reference-button{padding:5px}.brand{gap:5px}.brand strong{font-size:20px}}
@media(max-width:380px){.header{padding:0 6px}.brand img{width:30px}.theme-choice{padding:5px 3px}.theme-choice>span{display:none}}