/* Appearance changes interface surfaces; map tiles and geographic layers stay intact. */
:root {
  color-scheme: dark;
  --control: #0d1424;
  --panel: #131b2d;
  --subtle: #1a263b;
  --success-ink: #86efac;
  --warning-ink: #fcd34d;
  --danger-ink: #fda4af;
  --info-ink: #93c5fd;
  --stale-ink: #fbbf77;
  --warning-surface: #30271b;
  --success-surface: #142b25;
  --danger-surface: #33202c;
  --info-surface: #18283f;
  --focus: #fbbf77;
  --mono: var(--M);
  --red: #f04358;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #edf1f6;
  --surface: #ffffff;
  --raised: #f5f7fb;
  --border: #d8dfeb;
  --border2: #b8c4d5;
  --muted: #596a82;
  --dim: #40536f;
  --text: #243650;
  --bright: #13223a;
  --fire: #bc1233;
  --go: #117544;
  --hold: #906500;
  --dead: #647086;
  --control: #ffffff;
  --panel: #f6f8fc;
  --subtle: #eaf0f7;
  --success-ink: #17653d;
  --warning-ink: #805400;
  --danger-ink: #ad1639;
  --info-ink: #24589b;
  --stale-ink: #935100;
  --warning-surface: #fff4df;
  --success-surface: #eaf6ef;
  --danger-surface: #fff0f3;
  --info-surface: #edf4ff;
  --focus: #a71131;
  --red: #ba1734;
}
html[data-theme] input, html[data-theme] select, html[data-theme] textarea { color-scheme: inherit; }
html[data-theme] input::placeholder, html[data-theme] textarea::placeholder { color: var(--muted); opacity: 1; }
html[data-theme] :is(button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
html[data-theme] .theme-picker { display:flex; align-items:center; gap:10px; color:var(--dim); font:12px var(--B); }
.theme-picker select { min-height:44px; max-width:100%; padding:8px 28px 8px 10px; border:1px solid var(--border2); border-radius:6px; background:var(--control); color:var(--bright); font:12px var(--B); cursor:pointer; }
.theme-picker-auth { padding:14px 24px 0; position:relative; z-index:1; justify-content:space-between; }
.theme-picker-auth select { min-width:128px; }
.theme-picker-nav select { width:104px; min-height:36px; }
.theme-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html[data-theme] .theme-picker-mobile { display:grid; gap:6px; margin-top:6px; padding-top:10px; border-top:1px solid var(--border); }
.theme-picker-mobile small { color:var(--muted); font-size:11px; line-height:1.4; }
html[data-theme] .mobile-layer-dropdown { min-width:208px; max-width:calc(100vw - 24px); max-height:calc(100dvh - var(--nav-h) - var(--mobile-nav-h) - 20px); overflow:auto; background:var(--surface); }
.mobile-layer-dropdown button { min-height:44px; }
html[data-theme] #auth-gate { background:var(--bg); overflow-y:auto; }
html[data-theme] .auth-card { background:var(--surface); border-color:var(--border); border-top-color:var(--fire); box-shadow:0 20px 70px #07112426; flex-shrink:0; }
html[data-theme] .auth-card::before { display:none; }
html[data-theme] .auth-field input { background:var(--control); border-color:var(--border2); color:var(--bright); }
html[data-theme] .auth-btn { min-height:44px; background:var(--fire); color:#ffffff; }
html[data-theme] :is(.auth-ribbon-item, .auth-badge) { background:var(--raised); border-color:var(--border); }
html[data-theme] :is(#nav, #sidebar-head, #mobile-bottom-nav, #hist-sheet-handle, #services-panel .zonas-header, #dashboard-panel .zonas-header, #dashboard-panel .dashboard-toolbar) { background:var(--surface); border-color:var(--border); }
html[data-theme] :is(#services-panel, #dashboard-panel, #zonas-panel, #hist-list) { background:var(--panel); }
html[data-theme] :is(.zona-item, .service-item, .provider-health-item, .unit-catalog-item, .maintenance-unit-card, .dashboard-fleet-kpi, .services-card) { background:var(--surface); border-color:var(--border); }
html[data-theme] :is(.zonas-add-form, .services-chip, .service-plan-preview, .service-plan-index, .service-route-step, .service-step, .service-pill.stage, .service-event-status, .dashboard-operational-summary, .dashboard-tabs, .unit-filters, .maintenance-metrics div) { background:var(--raised); border-color:var(--border); }
html[data-theme] :is(.zonas-add-form input, .services-form input, .services-form select, .services-form textarea, .dashboard-toolbar input, .unit-catalog-form input, .unit-catalog-form select, .maintenance-service-form input, .maintenance-service-form select, .maintenance-config-grid input) { background:var(--control); color:var(--text); border-color:var(--border2); }
html[data-theme] :is(.btn-zone-action, .btn-zona-secondary, .dashboard-pager button, .hist-player-speeds button) { background:var(--raised); color:var(--dim); border-color:var(--border2); }
html[data-theme] :is(.dashboard-tabs button.on, .hist-player-speeds button.on, #hist-player-toggle, #mobile-bottom-nav button.on) { background:var(--fire2); color:var(--bright); }
html[data-theme] :is(.services-note, .service-step.done, .dashboard-attention.clear) { background:var(--success-surface); }
html[data-theme] :is(.service-form-note, .service-pill.info, .service-pill.done) { background:var(--info-surface); }
html[data-theme] :is(.dashboard-attention, .service-step.active, .service-pill.alert) { background:var(--danger-surface); }
html[data-theme] .services-divider { background:var(--border); }
html[data-theme] :is(.service-pill.live, .service-event-status.sent, .maintenance-status.ok) { background:var(--success-surface); color:var(--success-ink); }
html[data-theme] :is(.service-pill.pause, .service-pill.warn, .service-event-status.quiet_hours, .service-event-status.disabled, .service-event-status.service_disabled, .maintenance-status.soon) { background:var(--warning-surface); color:var(--warning-ink); }
html[data-theme] :is(.service-pill.alert, .service-event-status.error, .service-event-status.config_missing, .maintenance-status.due) { background:var(--danger-surface); color:var(--danger-ink); }
html[data-theme] :is(.service-pill.done, .service-pill.info) { color:var(--info-ink); }
html[data-theme] :is(.provider-health-summary.healthy, .provider-health-item.healthy .provider-health-status, .dashboard-attention.clear .dashboard-attention-kicker) { color:var(--success-ink); }
html[data-theme] :is(.provider-health-summary.degraded, .provider-health-item.degraded .provider-health-status, .maintenance-event.maintenance_soon strong) { color:var(--warning-ink); }
html[data-theme] :is(.auth-status.error, .provider-health-summary.down, .provider-health-item.down .provider-health-status, .maintenance-event.maintenance_due strong, .dashboard-upcoming-item.due > b, .dashboard-attention-kicker, .btn-zona-secondary.danger) { color:var(--danger-ink); }
html[data-theme] .dashboard-fleet-kpi.dead strong { color:var(--dim); }
html[data-theme] :is(.dp-signal.stale, .unit-speed.stale, .unit-signal.stale, .pill-live.degraded #live-status-label) { color:var(--stale-ink); }
html[data-theme] .pill-live.degraded { background:var(--warning-surface); border-color:var(--stale-ink); }
html[data-theme] :is(#gps-data-banner, #connection-banner) { color:var(--warning-ink); background:var(--warning-surface); border-color:var(--stale-ink); }
html[data-theme] :is(#map-unit-search, #map-fit-fleet, #map-clock, #map-legend, #traffic-legend, #hist-player) { background:var(--surface); color:var(--text); border-color:var(--border2); }
html[data-theme] :is(#map-unit-search input, #map-unit-search-clear, #map-legend .leg, #hist-player-time, .traffic-legend-title, .traffic-legend-scale span) { color:var(--text); }
html[data-theme] #map-legend .leg { border-color:var(--border); }
html[data-theme] #map-legend .leg b { color:var(--bright); }
html[data-theme] #map-legend .leg.stale { color:var(--stale-ink); }
html[data-theme] .maintenance-progress { background:var(--border2); }
html[data-theme] .leaflet-control-zoom a { background:var(--surface) !important; color:var(--bright) !important; border-color:var(--border2) !important; }
html[data-theme] .leaflet-tooltip { background:var(--surface); color:var(--text); border-color:var(--border2); }
html[data-theme] .leaflet-control-attribution { background:var(--surface) !important; color:var(--muted) !important; }
html[data-theme] .leaflet-control-attribution a { color:var(--dim) !important; }
html[data-theme] body.ios-standalone-app { background:var(--bg); }
@media (max-width:1450px) { #badge-interval { display:none !important; } }
@media (max-width:980px) { html[data-theme] .theme-picker-nav { display:none; } }
@media (max-height:760px) { html[data-theme] #auth-gate { align-items:flex-start; } }