/* ASPAK Connect v4.4.0 — global light/dark theme system */
:root,
html[data-theme="dark"] {
    --bg: #07111f;
    --s1: #0e1b2d;
    --s2: #13233a;
    --s3: #182a44;
    --line: #29425f;
    --text: #edf6ff;
    --muted: #9bb0c8;
    --muted-strong: #c3d2e1;
    --pri: #22d3c5;
    --pri2: #55adff;
    --warn: #f6c453;
    --danger: #ff7480;
    --ok: #47d493;
    --on-primary: #04131c;
    --field-bg: #0a1728;
    --panel-start: rgba(19, 35, 58, .97);
    --panel-end: rgba(12, 26, 44, .98);
    --card-end: #0b192a;
    --sidebar-start: #0b1728;
    --sidebar-end: #08131f;
    --topbar-bg: rgba(7, 17, 31, .88);
    --subtle-bg: rgba(255, 255, 255, .035);
    --hover-bg: rgba(27, 215, 201, .09);
    --code-bg: #06101d;
    --body-glow: #102b45;
    --shadow: 0 18px 50px rgba(0, 0, 0, .3);
    --map-bg: #0c1827;
    --map-surface: #101f31;
    --map-line: #3a5069;
    --map-text: #e9f2fb;
    --map-muted: #adbed0;
    --map-label-stroke: #07111f;
    --map-overlay: rgba(9, 19, 31, .94);
    --map-no-data: #53657a;
    --danger-surface: #34151b;
    --danger-border: #7d3340;
    --danger-text: #ffd0d5;
    --focus-ring: rgba(34, 211, 197, .22);
    --scroll-thumb: #3b526b;
    --scroll-track: #0a1422;
}

html[data-theme="light"] {
    --bg: #f4f7fb;
    --s1: #ffffff;
    --s2: #f7faff;
    --s3: #e8eff7;
    --line: #c9d6e5;
    --text: #162438;
    --muted: #5d7087;
    --muted-strong: #3d526a;
    --pri: #087e77;
    --pri2: #236fae;
    --warn: #9a6200;
    --danger: #bd3445;
    --ok: #14784f;
    --on-primary: #ffffff;
    --field-bg: #ffffff;
    --panel-start: rgba(255, 255, 255, .99);
    --panel-end: rgba(246, 250, 255, .99);
    --card-end: #eef4fa;
    --sidebar-start: #ffffff;
    --sidebar-end: #f2f6fb;
    --topbar-bg: rgba(255, 255, 255, .9);
    --subtle-bg: rgba(22, 36, 56, .045);
    --hover-bg: rgba(8, 126, 119, .08);
    --code-bg: #eef4fa;
    --body-glow: #dcecf8;
    --shadow: 0 14px 38px rgba(31, 55, 82, .12);
    --map-bg: #f8fafc;
    --map-surface: #ffffff;
    --map-line: #cbd5e1;
    --map-text: #172235;
    --map-muted: #52667d;
    --map-label-stroke: #ffffff;
    --map-overlay: rgba(255, 255, 255, .96);
    --map-no-data: #cbd5df;
    --danger-surface: #fff1f3;
    --danger-border: #f3a7b0;
    --danger-text: #8e2331;
    --focus-ring: rgba(8, 126, 119, .18);
    --scroll-thumb: #9cadbf;
    --scroll-track: #edf2f7;
}

html { color-scheme: dark; background: var(--bg); }
html[data-theme="light"] { color-scheme: light; }
body {
    background: radial-gradient(circle at 75% 0, var(--body-glow) 0, transparent 28%), var(--bg);
    color: var(--text);
    transition: background-color .18s ease, color .18s ease;
}
::selection { background: color-mix(in srgb, var(--pri) 32%, transparent); color: var(--text); }
* { scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: var(--scroll-track); }
*::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid var(--scroll-track); border-radius: 999px; }

.sidebar { background: linear-gradient(180deg, var(--sidebar-start), var(--sidebar-end)); border-color: var(--line); }
.topbar { background: var(--topbar-bg); border-color: var(--line); }
.panel { background: linear-gradient(160deg, var(--panel-start), var(--panel-end)); border-color: var(--line); box-shadow: var(--shadow); }
.metric-card,
.map-kpi { background: linear-gradient(145deg, var(--s2), var(--card-end)); border-color: var(--line); }
.sidebar-foot,
.organization-readonly,
.organization-selection.is-empty,
.detail-item,
.region-list-button,
.hospital-list button,
.province-ranking button,
.mini-stats > div { background: var(--subtle-bg); }
.nav-link span { color: var(--muted-strong); }
.nav-link:hover,
.nav-link.active { background: linear-gradient(90deg, color-mix(in srgb, var(--pri) 16%, transparent), color-mix(in srgb, var(--pri2) 8%, transparent)); }

h1, h2, h3, h4, h5, h6, strong, td, dd { color: var(--text); }
p, small, .empty, .muted, .map-note, .map-method-note, .auth-help { color: var(--muted); }
label { color: var(--muted-strong); }
input, select, textarea {
    background: var(--field-bg);
    color: var(--text);
    border-color: var(--line);
    caret-color: var(--pri);
}
input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--muted) 82%, transparent); opacity: 1; }
input:focus, select:focus, textarea:focus { border-color: var(--pri); box-shadow: 0 0 0 3px var(--focus-ring); }
select option { color: var(--text); background: var(--field-bg); }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset;
    transition: background-color 9999s ease-out 0s;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--pri); }
input[readonly], input:disabled, select:disabled, textarea:disabled { color: var(--muted); background: var(--s3); opacity: .84; }
fieldset, table th, table td, .device-row, .category-bar, .timeline > div, .inline-form { border-color: var(--line); }
tbody tr:hover { background: color-mix(in srgb, var(--pri) 4%, transparent); }

.btn.primary { color: var(--on-primary); box-shadow: 0 8px 22px color-mix(in srgb, var(--pri2) 20%, transparent); }
.btn.secondary, .icon-button { background: var(--s3); border-color: var(--line); color: var(--text); }
.btn.ghost { color: var(--text); border-color: var(--line); }
.btn:hover, .icon-button:hover { filter: brightness(1.04); }
.link-button, .public-link, .forgot-link, .map-back, .map-breadcrumb button { color: var(--pri); }
.avatar { background: var(--s3); border-color: var(--line); color: var(--text); }
.brand-mark { color: #04131c; }

.alert { color: var(--text); }
.alert.success { color: color-mix(in srgb, var(--ok) 76%, var(--text)); }
.alert.warning { color: color-mix(in srgb, var(--warn) 78%, var(--text)); }
.alert.danger { color: color-mix(in srgb, var(--danger) 75%, var(--text)); }
.badge, .status-label { color: color-mix(in srgb, var(--pri2) 68%, var(--text)); }
.status-label.online, .status-label.active, .status-label.good { color: color-mix(in srgb, var(--ok) 70%, var(--text)); }
.status-label.offline, .status-label.not_functional, .status-label.major_damage { color: color-mix(in srgb, var(--danger) 68%, var(--text)); }
.status-label.unknown, .status-label.not_connected, .status-label.minor_damage { color: color-mix(in srgb, var(--warn) 70%, var(--text)); }

pre { background: var(--code-bg); color: color-mix(in srgb, var(--pri2) 55%, var(--text)); border-color: var(--line); }
code { color: color-mix(in srgb, var(--pri2) 65%, var(--text)); }
.page-link { color: var(--text); border-color: var(--line); background: var(--s1); }
.page-item.active .page-link { background: var(--pri); color: var(--on-primary); border-color: var(--pri); }

.login-page { background: var(--bg); }
.login-ambient {
    background: radial-gradient(circle at 25% 15%, color-mix(in srgb, var(--pri) 22%, transparent), transparent 30%),
                radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--pri2) 20%, transparent), transparent 30%);
}
.login-card { background: color-mix(in srgb, var(--s1) 91%, transparent); border-color: var(--line); box-shadow: var(--shadow); }
.public-header { background: color-mix(in srgb, var(--s1) 88%, transparent); border-color: var(--line); backdrop-filter: blur(12px); }
.organization-suggestions { background: var(--field-bg); border-color: var(--line); box-shadow: var(--shadow); }
.organization-suggestion { color: var(--text); border-color: var(--line); }
.organization-suggestion:hover, .organization-suggestion.active { background: var(--hover-bg); }
.password-rules { color: color-mix(in srgb, var(--pri2) 62%, var(--text)); background: color-mix(in srgb, var(--pri2) 8%, transparent); border-color: color-mix(in srgb, var(--pri2) 28%, var(--line)); }

/* Theme switch */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--s3) 82%, transparent);
    color: var(--text);
    font-size: .74rem;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 5px 16px color-mix(in srgb, #000 10%, transparent);
}
.theme-toggle:hover { border-color: var(--pri); background: color-mix(in srgb, var(--pri) 9%, var(--s3)); }
.theme-toggle:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.theme-toggle-icon { display: grid; place-items: center; width: 20px; height: 20px; font-size: 1rem; line-height: 1; }
.public-header-actions { display: flex; align-items: center; gap: 10px; }
.auth-theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 20; }

/* Map surfaces and labels */
.map-stage,
.province-map-stage,
.drilldown-map-stage,
.drilldown-svg,
.leaflet-map-stage,
.aspak-leaflet-map,
.leaflet-container { background: var(--map-bg) !important; border-color: var(--map-line) !important; color: var(--map-text) !important; }
.drilldown-background { fill: var(--map-bg) !important; }
.province-map-svg path.land { fill: var(--map-no-data) !important; stroke: var(--map-surface) !important; }
.province-map-svg path.map-neighbour { fill: color-mix(in srgb, var(--map-no-data) 55%, var(--map-bg)) !important; }
.province-map-svg path.map-no-data,
.drill-region.map-no-data { fill: var(--map-no-data) !important; }
.province-map-svg path.land:hover,
.province-map-svg path.land:focus,
.drill-region:hover,
.drill-region:focus { stroke: var(--map-text) !important; }
.province-map-svg path.map-selected,
.drill-region.is-selected { stroke: var(--map-text) !important; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--map-text) 35%, transparent)); }
.province-map-legend,
.map-stage-back,
.map-source-status,
.aspak-region-tooltip.leaflet-tooltip,
.aspak-hospital-tooltip.leaflet-tooltip,
.leaflet-control-zoom a,
.leaflet-control-attribution {
    background: var(--map-overlay) !important;
    color: var(--map-text) !important;
    border-color: var(--map-line) !important;
}
.province-map-legend { box-shadow: 0 8px 24px color-mix(in srgb, #000 18%, transparent); }
.map-stage-back:hover { background: var(--map-surface) !important; border-color: var(--pri) !important; }
.map-level-badge, .map-tooltip { background: color-mix(in srgb, var(--map-surface) 92%, transparent) !important; color: var(--map-text) !important; border: 1px solid var(--map-line); }
.map-tooltip small,
.aspak-region-tooltip small,
.map-source-status,
.leaflet-control-attribution { color: var(--map-muted) !important; }
.map-loading { background: color-mix(in srgb, var(--map-bg) 84%, transparent) !important; color: var(--map-text) !important; }
.map-loading span { border-color: var(--map-line) !important; border-top-color: var(--pri2) !important; }
.map-source-status.warning { color: color-mix(in srgb, var(--warn) 75%, var(--map-text)) !important; border-color: var(--warn) !important; }
.drill-label,
.drill-score-label,
.hospital-marker .hospital-label,
.hospital-marker .hospital-score { fill: var(--map-text) !important; stroke: var(--map-label-stroke) !important; }
.aspak-regency-label.leaflet-tooltip {
    color: var(--map-text) !important;
    text-shadow: -1px -1px 0 var(--map-label-stroke), 1px -1px 0 var(--map-label-stroke), -1px 1px 0 var(--map-label-stroke), 1px 1px 0 var(--map-label-stroke) !important;
}
.leaflet-control-zoom a:hover { background: var(--map-surface) !important; color: var(--pri) !important; }
.leaflet-control-attribution a { color: var(--pri2) !important; }
.map-renderer-error { background: var(--danger-surface) !important; color: var(--danger-text) !important; border-color: var(--danger-border) !important; }

/* Hospital profile styles that were previously light-only */
.location-map, .proposal-card { border-color: var(--line) !important; }
.profile-kv dt, .muted { color: var(--muted) !important; }
.proposal-card { background: var(--subtle-bg); }
.proposal-card.submitted { border-color: color-mix(in srgb, var(--warn) 55%, var(--line)) !important; background: color-mix(in srgb, var(--warn) 8%, var(--s1)) !important; }
.history-row { background: color-mix(in srgb, var(--pri2) 7%, var(--s1)) !important; border-left-color: var(--pri2) !important; }

html[data-theme="light"] .tone-score-0-20,
html[data-theme="light"] .tone-red,
html[data-theme="light"] .device-state.major_damage,
html[data-theme="light"] .device-state.not_functional,
html[data-theme="light"] .device-state.offline { color: #a32132 !important; }
html[data-theme="light"] .tone-score-21-40,
html[data-theme="light"] .tone-orange { color: #8a4d00 !important; }
html[data-theme="light"] .tone-score-41-60,
html[data-theme="light"] .tone-yellow,
html[data-theme="light"] .device-state.minor_damage,
html[data-theme="light"] .device-state.not_connected { color: #745a00 !important; }
html[data-theme="light"] .tone-score-61-80,
html[data-theme="light"] .tone-green,
html[data-theme="light"] .device-state.good,
html[data-theme="light"] .device-state.online { color: #11643f !important; }
html[data-theme="light"] .tone-score-81-100,
html[data-theme="light"] .tone-blue { color: #155f91 !important; }

@media (max-width: 920px) {
    .theme-toggle-label { display: none; }
    .theme-toggle { width: 38px; min-width: 38px; padding: 7px; }
}
@media (max-width: 780px) {
    .auth-theme-toggle { top: 12px; right: 12px; }
    .public-header { height: auto; min-height: 74px; gap: 12px; }
    .public-header-actions .theme-toggle { flex: 0 0 auto; }
    .user-menu { gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}