/* Shared semantic colours; no filters on maps, photos, thumbnails or video. */
html[data-portal-theme],html[data-portal-theme] body{background:var(--bg);color:var(--ink)}
html[data-portal-theme] :is(#dialog,header,.sidebar,.detail,.data-overlay,.map-toolbar,.terrain-toolbar,.map-layers-panel,.map3d-controls,.legend,.camera-hover,.sensor-hover,.history-explorer,.camera-window,.camera-window-head,.camera-window-dock,.player,.results,.metrics,.ai-queue-card,.ai-queue-job,.camera-card,.camera-editor,.park-card,.mqtt-endpoint,.access-table,.sensor-history,.history-hover,.system-card,.emergency-contacts li,.emergency-contact-edit,.theme-content,.dialog-head,.vms-management .actions,.filter-extra,.alarm-review,.decision-buttons,.person-crop-preview,.leaflet-control-zoom,.leaflet-popup-content-wrapper,.leaflet-popup-tip){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-portal-theme] :is(#mobile-nav,main>aside,.sidebar-footer,.aside-footer,.mode-banner,.search,.reading,.kv,.geometry-info,.recording-controls,.ptz-panel,.vms-ptz,.history-stats,.history-periods,.history-config,.access-summary>div,.access-roles,.access-checks,.mqtt-setup-box,.mqtt-intro,.mqtt-counts,.contact-mapping,.ml-note,.ml-footer,.map3d-controls,.photo-map-tools,.recording-browser,.tl-presets,.tl-lane,.tl-source,.tl-export-panel,.sensor-evidence,.axis-debug,.system-controls){background:var(--raised);color:var(--ink);border-color:var(--line)}
html[data-portal-theme] :is(#portal-theme-open,button,input,select,textarea,fieldset,dialog,.secondary,.square,.account-button,.map-layers-toggle,.terrain-tool,.terrain-layers summary,.vms-management>summary,.search-more>summary,.leaflet-bar a){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-portal-theme] :is(#portal-theme-open,button,.secondary,.square,.leaflet-bar a):hover{background:var(--raised);color:var(--ink)}
html[data-portal-theme] :is(#subtitle,p,small,label,legend,h1,h2,h3,h4,.brand,.map-title,.device-name,.camera-hover-head strong,.access-summary b,.system-card strong,.camera-metrics b,.sensor-event-heading){color:var(--ink)}
html[data-portal-theme] :is(#account,.hint,.eyebrow,.brand-sub,.connection,.device-model,.device-age,.device-right,.filter-row,.filter-row span,.map-title span,.map-note,.marker-label small,.field small,.activity-item time,.activity-item small,.sidebar-footer,.reading small,.kv span:first-child,.camera-hover-foot,.camera-hover-head span,.camera-metrics span,.ptz-brand,.ptz-status,.ptz-instruction,.ptz-note,.ptz-footer,.history-axis,.history-footer,.history-stats small,.history-stats span,.sensor-hover-note,.access-summary span,.access-table td small,.park-numbers,.mqtt-address,.mqtt-counts,.mqtt-settings .field small,.ml-layer small,.ml-note,.ml-footer,.map3d-heading span,.map3d-controls p,.tl-help,.tl-caption,.tl-period,.tl-clock,.tl-axis-label,.tl-tick>span,.tl-camera>span,.tl-source,.tl-source b,.recorder small,.results-summary,.system-card small,.system-axis,.alarm-context,.axis-profile-row small,.clip-source){color:var(--muted)}
html[data-portal-theme] :is(#mobile-nav,a,.text-button,.sidebar-footer button){color:var(--green)}
html[data-portal-theme] :is(#mobile-nav>*,.portal-topnav a,.tabs button,.access-tabs button,.recorder){background:transparent;color:var(--ink);border-color:transparent}
html[data-portal-theme] :is(#all-recorders.active,#mobile-nav>[aria-current],.portal-topnav a[aria-current],.tabs button.active,.access-tabs button.active,.recorder.active,.device.selected,.stat.selected,.result.selected,.tl-camera.selected,button[aria-pressed=true],.history-periods button[aria-pressed=true],.camera-recording-actions button[aria-pressed=true],.vms-management[open]>summary,.search-more[open]>summary){background:var(--raised);color:var(--green);border-color:var(--green)}
html[data-portal-theme] :is(.brandmark,.brand b,.ptz-stick){background:var(--green);color:var(--on-accent);border-color:var(--green)}
html[data-portal-theme] .brandmark span{color:inherit}
html[data-portal-theme] :is(#notice,.map-notice,.key-warning,.inventory-note,.mqtt-notice,.contact-warning,.photo-instruction,.badge.warn,.decision-badge.open,.detector-badge.uncertain,.clip-source.sd){background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
html[data-portal-theme] #portal-messages>.map-notice{background:var(--warn-bg);color:var(--warn)}
html[data-portal-theme] :is(#toast,#pick-notice,.draw-bar,.position-picked,.chip,.badge,.access-status.enabled,.mqtt-status.connected,.camera-live[data-state=live],.camera-live[data-state=recording],.sensor-restored,.sensor-event-state.restored,.decision-badge.ok,.detector-badge.unlikely,.clip-source.upload){background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
html[data-portal-theme] :is(#portal-messages>.toast,#portal-messages>.pick-notice){background:var(--ok-bg);color:var(--ok)}
html[data-portal-theme] :is(#review-ok,.decision-ok){background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
html[data-portal-theme] :is(#review-suspicious,.decision-suspicious,.badge.bad,.decision-badge.suspicious,.detector-badge.likely,.detector-alarm,.sensor-event-state,.system-critical,.mqtt-status.error,.mqtt-status.disconnected,.camera-live[data-state=error],.ai-queue-error){background:var(--alarm-bg);color:var(--alarm);border-color:var(--alarm)}
html[data-portal-theme] :is(#modal-error,.error,.form-error,.danger,.mqtt-remove,.camera-hover-error,.recording-failed,.axis-profile-row small.error,.warn-text,.ptz-panel[data-state=error] .ptz-status){color:var(--alarm)}
html[data-portal-theme] #portal-messages>.toast.error{background:var(--alarm-bg);color:var(--alarm)}
html[data-portal-theme] :is(#ptz-stop,.ptz-stop,.vms-ptz-pad .vms-ptz-stop){background:var(--alarm-bg);color:var(--alarm);border-color:var(--alarm)}
html[data-portal-theme] :is(#review-message,.alarm-number,.sensor-badge,.access-status,.mqtt-status){color:var(--info);background:var(--info-bg)}
html[data-portal-theme] .detector-badge.likely{color:var(--alarm);background:var(--alarm-bg)}
html[data-portal-theme] .detector-badge.unlikely{color:var(--ok);background:var(--ok-bg)}
html[data-portal-theme] .detector-badge.uncertain{color:var(--warn);background:var(--warn-bg)}
html[data-portal-theme] .result.review-ok{border-left-color:var(--ok)}html[data-portal-theme] .result.review-suspicious{border-left-color:var(--alarm)}
html[data-portal-theme] :is(#dialog-content pre,.payload,.mqtt-topics code,.axis-debug pre){background:var(--raised);color:var(--ink);border-color:var(--line)}
html[data-portal-theme] :is(#dialog-content th,.data-overlay th,.access-table th,.history-interval-table th){background:var(--raised);color:var(--ink);border-color:var(--line)}
html[data-portal-theme] :is(#dialog-content td,.data-overlay td,.access-table td,.history-interval-table td){color:var(--ink);border-color:var(--line)}
html[data-portal-theme] :is(.device:hover,.data-overlay tbody tr:hover,.vms-management .actions button:hover){background:var(--raised)}
/* Every interface icon uses the surrounding semantic foreground. */
html[data-portal-theme] :is(.ui-icon,.portal-topnav svg,#mobile-nav svg,.portal-theme-open svg){color:inherit}
html[data-portal-theme] .type-icon{background:var(--ok-bg);color:var(--ok)}
html[data-portal-theme] .type-icon.alarm{background:var(--alarm-bg);color:var(--alarm)}
html[data-portal-theme] .type-icon.warn{background:var(--warn-bg);color:var(--warn)}
html[data-portal-theme] :is(.type-icon.stale,.type-icon.unknown,.terrain-row-icon){background:var(--raised);color:var(--muted)}
html[data-portal-theme] .terrain-row-icon svg{color:inherit}
html[data-portal-theme] :is(.marker-label,.terrain-label,.photo-pin-label){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-portal-theme] .map-marker .marker-icon{background:var(--surface);color:var(--ok);border-color:currentColor}
html[data-portal-theme] .map-marker.alarm .marker-icon{color:var(--alarm)}html[data-portal-theme] .map-marker.warn .marker-icon{color:var(--warn)}html[data-portal-theme] :is(.map-marker.stale,.map-marker.unknown) .marker-icon{color:var(--muted)}
html[data-portal-theme] :is(.dot,.dot.ok,.live-dot,.status-dot.closed,.connection.live:before){background:var(--ok)}
html[data-portal-theme] :is(.dot.bad,.dot.alarm,.status-dot.open){background:var(--alarm)}html[data-portal-theme] .dot.warn{background:var(--warn)}html[data-portal-theme] :is(.dot.stale,.status-dot){background:var(--muted)}
html[data-portal-theme] .system-card svg path{stroke:var(--green)}html[data-portal-theme] .system-card svg line{stroke:var(--line)}html[data-portal-theme] .system-card svg text{fill:var(--muted)}
html[data-portal-theme] :is(.tl-tick,.tl-axis,.tl-lane,.tl-camera,.tl-source,.tl-presets){border-color:var(--line)}
html[data-portal-theme] :is(.tl-coverage,.tl-source-nvr .tl-coverage,.legend-recording){background:var(--ok)}html[data-portal-theme] :is(.tl-source-camera .tl-coverage,.legend-camera){background:var(--warn)}
html[data-portal-theme] :is(.tl-hover,.tl-handle span){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-portal-theme] :is(.tl-selection,.tl-handle){border-color:var(--info)}
html[data-portal-theme] :is(.ptz-pad,.ptz-zoom,.ptz-ring,.ptz-preset-picker,.recording-timeline,.history-bar){background:var(--raised);border-color:var(--line)}
html[data-portal-theme] input::placeholder,html[data-portal-theme] textarea::placeholder{color:var(--muted);opacity:1}
html[data-portal-theme] input[type=checkbox],html[data-portal-theme] input[type=radio],html[data-portal-theme] input[type=range]{accent-color:var(--green)}
html[data-portal-theme] :focus-visible{outline:3px solid var(--info);outline-offset:3px}
/* Keep labels and controls compact; the picker is always outside mobile menus. */
.portal-theme-open{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;min-width:40px;min-height:40px;padding:7px 10px;font-size:12px;border:1px solid var(--line);border-radius:7px}
.portal-theme-open svg,.theme-sample svg{width:20px;height:20px;flex:none}
#portal-theme-dialog{width:min(460px,94vw);padding:0;max-height:90dvh;overflow:auto;border:1px solid var(--line);border-radius:12px}
#portal-theme-dialog .dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)}
#portal-theme-dialog h2{margin:0;font-size:19px}#portal-theme-dialog .theme-content{padding:12px 18px 18px}
#portal-theme-dialog fieldset{margin:14px 0 0;padding:12px;border:1px solid var(--line);border-radius:8px}#portal-theme-dialog legend{font-weight:650;padding:0 6px}
#portal-theme-dialog .theme-options{display:grid;grid-template-columns:1fr;gap:10px}
#portal-theme-dialog .theme-option{display:grid;grid-template-columns:20px 1fr;align-items:center;gap:8px;padding:9px;min-width:0;border:2px solid var(--line);border-radius:8px;cursor:pointer;color:var(--ink);font-size:12px}
#portal-theme-dialog .theme-option:has(:checked){border-color:var(--green);background:var(--raised)}#portal-theme-dialog .theme-option input{width:17px;height:17px;margin:0}
#portal-theme-dialog .theme-option>span:last-child{grid-column:1/-1;text-align:center}
#portal-theme-dialog .theme-sample{display:block;padding:8px;background:var(--sample-bg);color:var(--sample-ink);border:1px solid var(--sample-line);border-radius:5px;min-width:0}
#portal-theme-dialog .theme-sample>span:first-child{display:flex;gap:7px;align-items:center;background:var(--sample-surface);padding:4px}
#portal-theme-dialog .theme-sample i{display:block;background:var(--sample-accent);height:8px;width:8px;border-radius:50%;margin-left:auto}
#portal-theme-dialog .theme-sample-line{display:block;background:var(--sample-accent);height:3px;width:70%;margin-top:8px}
#portal-theme-dialog #portal-theme-status{min-height:20px;font-size:12px}
@media(max-width:800px){.portal-theme-open>span{display:none}.portal-theme-open{padding:7px;min-width:38px}#portal-theme-dialog .theme-options{gap:6px}#portal-theme-dialog .theme-option{padding:6px;gap:4px;font-size:11px}#portal-theme-dialog .theme-sample{padding:4px}#portal-theme-dialog .theme-sample b{font-size:12px}#portal-theme-dialog .theme-sample svg{width:15px;height:15px}#portal-theme-dialog .theme-content{padding:10px}#portal-theme-dialog .theme-sample i{display:none}}
/* Semantic variants take precedence over generic badges and panels. */
html[data-portal-theme] :is(#review-ok,.badge:not(.warn):not(.bad),.access-status.enabled,.mqtt-status.connected,.sensor-event-state.restored,.sensor-restored){background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
html[data-portal-theme] :is(#notice,.badge.warn,.mqtt-status.connecting,.mqtt-status.subscribing){background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
html[data-portal-theme] :is(#review-suspicious,.badge.bad,.mqtt-status.error,.mqtt-status.disconnected){background:var(--alarm-bg);color:var(--alarm);border-color:var(--alarm)}
html[data-portal-theme] :is(.pole-marker,.photo-pin){background:var(--surface);color:var(--green);border-color:var(--green)}
/* Media surfaces stay dark in every theme, including their empty/loading captions. */
html[data-portal-theme] :is(#video-empty,#video-loading){color:var(--media-ink)}
html[data-portal-theme] #video-empty :is(p,span,b){color:var(--media-ink)}
html[data-portal-theme] :is(.camera-frame>div,.camera-hover-frame>div){color:var(--media-ink)}
html[data-portal-theme] :is(.history-segment.closed,.history-state-legend .closed:before,.tl-coverage,.tl-source-nvr .tl-coverage,.legend-recording){background:var(--ok);border-color:var(--ok)}
html[data-portal-theme] :is(.history-segment.open,.history-state-legend .open:before){background:var(--alarm);border-color:var(--alarm)}
html[data-portal-theme] :is(.tl-source-camera .tl-coverage,.legend-camera){background:var(--warn);border-color:var(--warn)}
html[data-portal-theme] :is(.history-segment.unknown,.history-state-legend .unknown:before){background:var(--raised)}html[data-portal-theme] #system-message{background:transparent}
html[data-portal-theme] .sensor-chart text{fill:var(--muted)}html[data-portal-theme] .sensor-chart .history-grid{stroke:var(--line)}html[data-portal-theme] .sensor-chart .history-line{stroke:var(--green)}html[data-portal-theme] .sensor-chart .history-point{fill:var(--green)}html[data-portal-theme] .sensor-chart .history-area{fill:var(--green);opacity:.12}html[data-portal-theme] .sensor-chart .trigger-lower{stroke:var(--info)}html[data-portal-theme] .sensor-chart .trigger-upper{stroke:var(--alarm)}html[data-portal-theme] .sensor-chart .history-cursor>*{stroke:var(--info)}
html[data-portal-theme] :is(#portal-theme-open,.ptz-pad button,.ptz-zoom button).is-active{background:var(--green);color:var(--on-accent)}
html[data-portal-theme] #review-message.error{color:var(--alarm);background:var(--alarm-bg)}
@media(max-width:1150px){.portal-theme-open>span{display:none}.portal-theme-open{padding:7px;min-width:38px}}

/* Alarm severity stays visible through its label, red hue and border, without glare. */
html[data-portal-theme] :is(#results,#alarm-ai) .detector-badge.likely,
html[data-portal-theme] #detector-alerts .detector-alarm{background:var(--alarm-bg);color:var(--alarm);border:1px solid var(--alarm);font-weight:750}
html[data-portal-theme] #detector-alerts .detector-alarm :is(strong,span){color:inherit}

/* Safai website palette and quiet night surfaces. No global media filters. */
html[data-portal-theme] {scrollbar-color:var(--line) var(--bg)}
html[data-portal-theme] ::selection{background:var(--green);color:var(--on-accent)}
html[data-portal-theme] :is(.card,.work-card,.network-detail,.lv-inspector,.dispatch-preview,.docs-version,.chat-main){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-portal-theme] :is(header,.sidebar,.lv-directory,.lv-dispatch,.detail,.data-overlay){box-shadow:none}
html[data-portal-theme] :is(.muted,.hint,.empty-state){color:var(--muted)}
html[data-portal-theme] :is(.portal-topnav a[aria-current],#mobile-nav>[aria-current]){box-shadow:inset 0 -2px 0 var(--green)}
#portal-theme-dialog .theme-content>fieldset{display:inline-block;vertical-align:top;width:calc(50% - 5px);margin-right:5px}
html[data-portal-theme="dark-soft"] :is(.camera-frame,.camera-hover-frame,.lv-tile,.tile,.player-head){color:var(--media-ink)}
html[data-portal-theme="dark-soft"] :is(.camera-frame,.camera-hover-frame,.lv-tile,.tile) :is(p,span,b,small){color:var(--media-ink)}
html[data-portal-theme="dark-soft"] .detector-alarm{animation:none}
/* Native mobile shell uses the same preference without adding header rows. */
html[data-portal-theme] body.safai-mobile{--mint:var(--green)}
html[data-portal-theme] body.safai-mobile :is(#tabs,#tree,#tree-items,#mobile-ptz,.card,.result,.enrollment-card){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-portal-theme] body.safai-mobile #tabs button[aria-current]{background:var(--raised);color:var(--green)}
html[data-portal-theme] body.safai-mobile .brand b{background:transparent;color:var(--ink)}
body.safai-mobile>header .brand{margin-right:auto}
body.safai-mobile #portal-theme-open{min-height:32px;min-width:32px;padding:5px;margin-left:6px}
body.safai-mobile #portal-theme-open>span{display:none}
html[data-portal-theme] body.safai-mobile .empty-state b{color:var(--ink)}
html[data-portal-theme] body.safai-mobile .tile{background:#12150f;color:var(--media-ink)}
html[data-portal-theme] body.safai-mobile .tile .caption{color:var(--media-ink);background:linear-gradient(transparent,#191c17f2)}
html[data-portal-theme] body.safai-mobile .tile .state{color:var(--ok)}
html[data-portal-theme] body.safai-mobile .tile.stale .state{color:var(--warn)}
html[data-portal-theme] body.safai-mobile .alarm-ai.likely{background:var(--alarm-bg);color:var(--alarm);border-color:var(--alarm)}
html[data-portal-theme] body.safai-mobile :is(.mobile-ai.likely,.danger){color:var(--alarm);background:var(--alarm-bg);border-color:var(--alarm)}
html[data-portal-theme] body.safai-mobile .mobile-ai.unlikely{color:var(--ok);background:var(--ok-bg);border-color:var(--ok)}
html[data-portal-theme] body.safai-mobile .mobile-ai.uncertain{color:var(--warn);background:var(--warn-bg);border-color:var(--warn)}


html[data-portal-theme] .login-brand{color:var(--ink)}
html[data-portal-theme] .login-brand span{color:var(--green)}
html[data-portal-theme] .login-shell :is(.intro,footer,small){color:var(--muted);border-color:var(--line)}
html[data-portal-theme] #login-message{color:var(--alarm)}
html[data-portal-theme] .login-art{background:linear-gradient(155deg,#22261f,#434c35)}
html[data-portal-theme] .login-art i{border-color:#626852;background:transparent;box-shadow:none}

/* Device list and table surfaces share the active palette. */
html[data-portal-theme] :is(.device,.device-list,.device-group,.device-group>summary,.device-group-heading,.sidebar-heading,.detail-head,.activity-item,.data-overlay table,.data-overlay tbody,.data-overlay tr){background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-portal-theme] :is(.device:hover,.device.selected,.data-overlay tbody tr:hover){background:var(--raised)}
html[data-portal-theme] :is(.device-name,.device-value,.device-reading,.data-overlay td){color:var(--ink)}
html[data-portal-theme] :is(.device-model,.device-age,.device-right,.data-overlay td small){color:var(--muted)}
html[data-portal-theme] :is(.primary,#draw-finish,.login-shell button[type=submit]){background:var(--signal);color:var(--on-signal);border-color:var(--signal)}
html[data-portal-theme] :is(.primary,#draw-finish,.login-shell button[type=submit]):hover{background:var(--signal-hover);color:var(--on-signal);filter:none}

/* Preserve semantic status inside themed device rows. */
html[data-portal-theme] :is(.device,#overlay) .tone-alarm{color:var(--alarm)}
html[data-portal-theme] :is(.device,#overlay) .tone-warn{color:var(--warn)}
html[data-portal-theme] :is(.device,#overlay) :is(.tone-stale,.tone-unknown){color:var(--muted)}
@media(min-width:901px){
 html[data-portal-theme] body.portal-page :is(.primary,.secondary){padding:7px 11px;min-height:32px;font-size:12px}
}
