/* Shared entry/workspace settings and a complete dark surface palette. */
:root { color-scheme: light; }
.auth-submit span { font-size: inherit; }
.auth-submit .login-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: login-spin .8s linear infinite; flex-shrink: 0; }
.auth-submit:disabled { cursor: wait; }
.airspace-loading-notice { position: fixed; top: 92px; left: 50%; transform: translateX(-50%); z-index: 90; max-width: calc(100vw - 32px); padding: 12px 22px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: var(--ink); box-shadow: 0 4px 18px #26344518; font-size: 14px; pointer-events: none; }
.overview-grid .overview-alert-column { display: block; min-height: 0; }
.live-alert-panel { height: 100%; display: flex; flex-direction: column; cursor: pointer; }
.live-alert-panel:focus-visible { outline: 2px solid #1769c2; outline-offset: 3px; }
.place-search { --place-control-height: 36px; position: relative; width: 290px; max-width: 100%; margin-right: auto; z-index: 8; }
.place-search-field { display: flex; gap: 6px; align-items: center; height: var(--place-control-height); }
.place-search-field>input,.place-search-field>.button { height: 100%; }
.place-search input { min-width: 0; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); color: var(--ink); font-size: 12px; }
.place-search-results { position: absolute; top: calc(100% + 6px); left: 0; width: 100%; max-height: 300px; overflow-y: auto; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 8px 24px #172b4526; }
.place-search-results[hidden] { display: none; }
.place-search-results button { display: grid; gap: 5px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; padding: 10px 12px; text-align: left; }
.place-search-results button:hover,.place-search-results button:focus-visible { background: var(--green-soft); }
.place-search-results b { font-size: 13px; }
.place-search-results small,.place-search-results p { color: var(--muted); font-size: 11px; line-height: 1.7; }
.place-search-results p { margin: 0; padding: 12px; }
.place-airspace-status { position: absolute; top: calc(100% + 4px); left: 0; width: 100%; display: flex; align-items: center; gap: 8px; height: var(--place-control-height); margin: 0; padding: 0 8px; background: var(--white); border: 1px solid var(--line); border-radius: 4px; font-size: 12px; }
.place-airspace-status[hidden] { display: none; }
.place-airspace-labels { display: flex; flex-shrink: 0; gap: 6px; }
.place-airspace-status p { flex: 1; min-width: 0; margin: 0; color: var(--ink); line-height: 1.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.place-airspace-status small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.live-alert-panel .panel-heading { flex-shrink: 0; gap: 10px; }
.live-alert-panel .alert-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.live-alert-panel .alert-item { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; }
.live-alert-panel .alert-item time { grid-column: 2; padding: 0; }
#modal.alert-detail-modal { width: 80vw; height: 80vh; height: 80dvh; max-width: none; max-height: none; overflow: hidden; }
#modal.alert-detail-modal::backdrop { background: #172b4566; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.alert-detail-modal #modal-content { height: 100%; display: flex; flex-direction: column; }
.alert-detail-modal .modal-header { flex-shrink: 0; }
.alert-detail-modal .modal-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.alert-center-intro { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; margin-bottom: 20px; }
.alert-detail-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.alert-detail-card { padding: 20px; border: 1px solid var(--line); border-radius: 4px; min-width: 0; }
.alert-detail-heading { display: flex; align-items: center; gap: 10px; }
.alert-detail-heading h3 { flex: 1; font-size: 15px; margin: 0; }
.alert-detail-heading .button { flex-shrink: 0; }
.alert-detail-card p { overflow-wrap: anywhere; }
.alert-detail-card dl { display: grid; gap: 12px; margin: 20px 0; font-size: 13px; }
.alert-detail-card dl>div { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 12px; }
.alert-detail-card dt { color: var(--muted); }
.alert-detail-card dd { margin: 0; overflow-wrap: anywhere; }
@media(max-width:980px) { .alert-detail-grid { grid-template-columns: 1fr; } }
@media(max-width:640px) { .alert-detail-modal .modal-header,.alert-detail-modal .modal-body { padding: 16px; } .alert-detail-card { padding: 14px; } .alert-detail-card dl>div { grid-template-columns: 80px minmax(0,1fr); gap: 8px; } .alert-detail-heading { flex-wrap: wrap; } }
@keyframes login-spin { to { transform: rotate(360deg); } }
html[data-motion="reduced"] .auth-submit .login-spinner { animation: none; }
@media (prefers-reduced-motion: reduce) { .auth-submit .login-spinner { animation: none; } }
dialog { background: var(--white); }
.appearance-button { display: inline-grid; place-items: center; flex-shrink: 0; }
.appearance-button svg { width: 19px; height: 19px; }
.appearance-button[aria-expanded="true"] { background: #edf4fc; border-color: #1769c2; color: #1769c2; }
.entry-header>.appearance-button { margin-left: 0; min-width: 32px; padding: 0; }
.appearance-panel { position: fixed; right: 26px; z-index: 80; width: 310px; max-width: calc(100vw - 28px); padding: 0 18px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; box-shadow: 0 8px 28px #192d2b18; animation: surface-arrive 500ms ease-out both; }
.appearance-panel[hidden] { display: none; }
.appearance-heading { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--line); }
.appearance-heading h2 { font-size: 14px; margin: 0; }
.appearance-close { border: 0; background: none; color: var(--muted); font-size: 23px; padding: 0 4px; line-height: 1; }
.appearance-option { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 0; cursor: pointer; }
.appearance-option+.appearance-option { border-top: 1px solid var(--line); }
.appearance-option b { display: block; font-weight: 500; font-size: 13px; }
.appearance-option small { display: block; font-size: 11px; color: var(--muted); margin-top: 7px; }
.appearance-option input { position: absolute; right: 0; width: 38px; height: 22px; opacity: 0; margin: 0; cursor: pointer; }
.appearance-switch { width: 38px; height: 22px; border-radius: 12px; background: #b7c2cf; flex-shrink: 0; pointer-events: none; transition: background-color 500ms ease; }
.appearance-switch:after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; margin: 3px; transition: transform 500ms ease; }
.appearance-option input:checked+.appearance-switch { background: #1769c2; }
.appearance-option input:checked+.appearance-switch:after { transform: translateX(16px); }
.appearance-option input:focus-visible+.appearance-switch { outline: 2px solid #1769c2; outline-offset: 3px; }
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #dde5ef; --muted: #a0aec0; --line: #354152; --bg: #151d28; --white: #202b39;
  --green: #4b98ed; --green-soft: #283e58; --sidebar-bg: #17212e;
  --surface: #202b39; --surface-alt: #263343; --text: #dde5ef; --text-muted: #a0aec0; --link: #7cb7f7;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .maplibregl-ctrl-attrib-button { filter: invert(1); }
html[data-theme="dark"] .map-center-marker { filter: drop-shadow(0 1px 3px #0008); }
html[data-theme="dark"] .map-center-marker svg { fill: #202b39d9; stroke: #63d9b7; }
html[data-theme="dark"] .map-center-marker .map-center-dot { fill: #63d9b7; stroke: #202b39; }
html[data-theme="dark"] .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
html[data-theme="dark"] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
html[data-theme="dark"] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface); }
html[data-theme="dark"] .maplibregl-popup-anchor-top .maplibregl-popup-tip,
html[data-theme="dark"] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
html[data-theme="dark"] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface); }
html[data-theme="dark"] .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
html[data-theme="dark"] .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
html[data-theme="dark"] :is(.topbar,.panel,.stat,.auth-card,.entry-header,.section-toolbar,.appearance-panel,dialog,.map-tooltip,.region-menu,.icon-button,.maplibregl-popup-content) { background: var(--surface); color: var(--text); border-color: var(--line); }
html[data-theme="dark"] :is(.entry-page,.entry-footer) { background: var(--bg); color: var(--text-muted); }
html[data-theme="dark"] :is(.entry-brand,.welcome-content h1,.page-heading h1,.auth-card h2,.panel-title,.stat-value,.space-list b,.summary-foot b,.rank-item b,.fleet-card h3,.fleet-spec b,.role-overview b,.profile-card dd,.checklist b,.mission-card h3,.scenario-breakdown b,.airspace-popup,.modal-header h2,.identity-content h3,.role-overview h3) { color: var(--text); }
html[data-theme="dark"] :is(.page-heading p,.eyebrow,.breadcrumb,.breadcrumb b,time,.stat-label,.stat-value small,.stat-foot,.panel-subtitle,.empty-state,.muted,.space-list div,.summary-foot,.map-caption,.chart-key,.donut-center small,.alert-item p,.alert-item time,.rank-item,.area-card p,.mission-card p,.mission-card .row,footer,.modal-body p,.form-field,.entry-platform-name,.welcome-content p,.welcome-roles,.entry-card-label,.auth-description,.auth-field,.auth-login-hint,.demo-password,.auth-foot,.auth-copyright,.register-hint,.register-terms,.entry-switch,.identity-content p,.notice-summary p,.mini-notice small,.fleet-card code,.fleet-spec span,.role-overview p,.pending-user p,.profile-card p,.profile-card dt,.large-number small,.pilot-callout p,.pilot-callout .eyebrow,.checklist span,.checklist small,.region-column h4 small,.region-list button span,.scenario-top label,.scenario-status,.scenario-timeline,.scenario-breakdown,.live-clock,.hour-chart b,.hour-chart small,.airspace-popup small,.airspace-sources p,.airspace-sources article small,.coverage-grid span,.coverage-grid small) { color: var(--text-muted); }
html[data-theme="dark"] :is(.button,.filter-button,.demo-roles button,.register-role,.scenario-actions button) { background: var(--surface-alt); color: var(--text); border-color: #485971; }
html[data-theme="dark"] :is(.button.primary,.filter-button.active,.auth-submit,.scenario-actions .replay-start) { background: #236fbd; border-color: #4486cc; color: #fff; }
html[data-theme="dark"] :is(.text-button,.id-cell,.auth-mini-brand,.welcome-eyebrow,.welcome-content h1 span,.live-clock b,.scenario-timeline b,.scenario-breakdown a,.airspace-popup a,.airspace-sources article a,.large-number,.permission-check.allowed) { color: var(--link); }
html[data-theme="dark"] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),.form-field select,.auth-field select,.scenario-top select) { background: #18222f; color: var(--text); border-color: #485971; }
html[data-theme="dark"] input::placeholder { color: #95a5ba; }
html[data-theme="dark"] :is(th,.modal-header,.map-location,.scenario-controls,.replay-bar,.airspace-strip,.region-column h4,.coverage-grid>div) { background: var(--surface-alt); color: var(--text-muted); border-color: var(--line); }
html[data-theme="dark"] td { color: #c1cddd; border-color: var(--line); }
html[data-theme="dark"] td.id-cell { color: var(--link); }
html[data-theme="dark"] tbody tr:hover { background: #29394c; }
html[data-theme="dark"] :is(.alert-item,.mini-notice,.role-overview-item,.pending-user,.scenario-breakdown>div,.airspace-sources article) { border-color: var(--line); }
html[data-theme="dark"] .alert-item h4 { color: var(--text); }
html[data-theme="dark"] :is(.status-pill,.trend,.result-box) { background: #213f35; color: #8bd4ad; }
html[data-theme="dark"] :is(.status-pill.orange,.count-badge,.alert-symbol,.reference-notice,.result-box.orange) { background: #473923; color: #edc17b; }
html[data-theme="dark"] :is(.status-pill.red,.alert-symbol.red,.auth-error) { background: #492c33; color: #f1a1a8; }
html[data-theme="dark"] .auth-error:empty { background: none; }
html[data-theme="dark"] :is(.info-banner,.auth-notice,.identity-permissions,.admin-tip,.pilot-callout,.identity-mark,.fleet-art,.role-icon,.profile-avatar,.avatar,.top-avatar,.register-role.active,.region-list button.active,.region-list button.region-all,.appearance-button[aria-expanded="true"]) { background: #263e58; border-color: #406285; color: #b4d4f8; }
html[data-theme="dark"] .demo-divider span { background: var(--surface); color: var(--text-muted); }
html[data-theme="dark"] .demo-password code { color: #c1cddd; }
html[data-theme="dark"] .progress-track { background: #344255; }
html[data-theme="dark"] .region-list button { color: var(--text); }
html[data-theme="dark"] :is(.region-list button:hover,.demo-roles button:hover) { background: #2c425d; }
html[data-theme="dark"] .entry-brand small { color: var(--text-muted); }
html[data-theme="dark"] .entry-radar .radar-ring { border-color: #627d9d; }
html[data-theme="dark"] .entry-radar .radar-route { border-color: #627d9d; }
html[data-theme="dark"] .brand-symbol { background: #1769c2; }
html[data-theme="dark"] .test-account-option { background: var(--surface-alt); border-color: var(--line); color: var(--text); }
html[data-theme="dark"] .test-account-option:hover { background: #2c425d; border-color: #7cb7f7; }
html[data-theme="dark"] :is(.simulation-badge,.stat:last-child .trend) { background: var(--surface-alt); color: #b4d4f8; border-color: var(--line); }
html[data-theme="dark"] :is(.entry-footer,.entry-platform-name,.breadcrumb span) { border-color: var(--line); }
html[data-theme="dark"] .geo-wrap .maplibregl-ctrl-attrib { background: #202b39ed; color: #c1cddd; }
html[data-theme="dark"] .maplibregl-ctrl-attrib a { color: #b4d4f8; }
html[data-theme="dark"] .maplibregl-ctrl-scale { background: #202b39cc; color: #c1cddd; border-color: #b4c6dd; }
html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-motion="reduced"] .welcome-login:hover span, html[data-motion="reduced"] button:active { transform: none; }
@media (prefers-reduced-motion: reduce) { .appearance-panel { animation: none; } .appearance-switch, .appearance-switch:after { transition: none; } }
@media (max-width: 640px) {
  .appearance-panel { right: 14px; }
  .entry-header { gap: 8px; }
  .entry-header>.appearance-button { min-width: 30px; }
  .top-actions { gap: 5px; }
  .top-actions .appearance-button { width: 28px; height: 28px; }
}