/* Mode gelap (dibuat otomatis dari style-light.css: warna terang dibalik jadi gelap). */
html[data-theme="dark"] {
  --page: #0d1b1e; --page-soft: #112326; --surface: #15282c; --surface-alt: #1a3035; --line: #2b4a50;
  --ink: #e2f0f1; --muted: #9db6ba; --green-soft: #173a28; --amber-soft: #3b2f14; --red-soft: #3d1d1b;
  --green: #5cc98c; --amber: #f0b45a; --red: #f08a85; --shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
html[data-theme="dark"] body { background-color: #0d1b1e; background-image: linear-gradient(rgba(120, 200, 215, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 200, 215, 0.04) 1px, transparent 1px); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { color: #e2f0f1; background: #1a3035 !important; border-color: #2b4a50 !important; }
html[data-theme="dark"] ::placeholder { color: #7f9ba0; }
html[data-theme="dark"] .leaflet-container { background: #cfd8dc; }
html[data-theme="dark"] .leaflet-popup-content-wrapper, html[data-theme="dark"] .leaflet-popup-tip { color: #173a3e; background: #fff !important; }
html[data-theme="dark"] .leaflet-popup-content-wrapper * , html[data-theme="dark"] .leaflet-tooltip { color: #173a3e !important; }
html[data-theme="dark"] .leaflet-tooltip { background: #fff !important; }
html[data-theme="dark"] .nav-item.active, html[data-theme="dark"] .nav-item.active span { color: #8fe6ff !important; }
html[data-theme="dark"] .main-panel { background: rgba(13, 27, 30, 0.8) !important; }
html[data-theme="dark"] .sidebar { background-image: radial-gradient(rgba(24, 31, 32, 0.14) 1px, transparent 1px) !important; }
html[data-theme="dark"] .brand-logo-frame { border: 1px solid rgba(55, 66, 67, 0.9) !important; background: #181f20 !important; }
html[data-theme="dark"] .nav-item:hover, html[data-theme="dark"] .nav-item.active { border-color: #374243 !important; background: #181f20 !important; }
html[data-theme="dark"] .sidebar-account button { border-color: rgba(55, 66, 67, 0.55) !important; }
html[data-theme="dark"] .sidebar-account button:hover { border-color: #374243 !important; background: #181f20 !important; }
html[data-theme="dark"] .sidebar-card { border: 1px solid rgba(55, 66, 67, 0.28) !important; }
html[data-theme="dark"] .main-panel { background: rgba(21, 37, 43, 0.74) !important; }
html[data-theme="dark"] .topbar { background-image: linear-gradient(112deg, #087f79 0%, #079d94 56%, #12b7a5 100%),
    radial-gradient(rgba(24, 31, 32, 0.2) 1px, transparent 1px) !important; }
html[data-theme="dark"] .topbar::after { border: 1px solid rgba(55, 66, 67, 0.18) !important; }
html[data-theme="dark"] .ghost-button, html[data-theme="dark"] .primary-button, html[data-theme="dark"] .segment { border: 1px solid #405254 !important; color: #a9d5dd !important; background: #181f20 !important; }
html[data-theme="dark"] .ghost-button:hover { background: #152b2e !important; }
html[data-theme="dark"] .topbar .ghost-button { border-color: rgba(55, 66, 67, 0.62) !important; background: rgba(24, 31, 32, 0.1) !important; }
html[data-theme="dark"] .topbar .ghost-button:hover { background: rgba(24, 31, 32, 0.2) !important; }
html[data-theme="dark"] .topbar .primary-button { border-color: #374243 !important; color: #9ef4ee !important; background: #181f20 !important; }
html[data-theme="dark"] .topbar .primary-button:hover { border-color: #335149 !important; background: #18312a !important; }
html[data-theme="dark"] .stat-card.highlight { border-color: #3e5952 !important; background: #1a332b !important; }
html[data-theme="dark"] .stat-card h3 { color: #9df4ee !important; }
html[data-theme="dark"] .mini-grid { border-top: 1px solid #3d4b4b !important; }
html[data-theme="dark"] .mini-grid strong { color: #a9ddd6 !important; }
html[data-theme="dark"] .trend.positive, html[data-theme="dark"] .status.success { color: #aaddc2 !important; background: #1d3023 !important; }
html[data-theme="dark"] .trend.neutral { color: #8cd9f3 !important; background: #162d36 !important; }
html[data-theme="dark"] .trend.negative, html[data-theme="dark"] .status.pending { color: #efc788 !important; }
html[data-theme="dark"] .status.failed { color: #c97674 !important; }
html[data-theme="dark"] .sparkline { background: #1b2a2a !important; }
html[data-theme="dark"] .panel-header h3 { color: #c5e7e9 !important; }
html[data-theme="dark"] .segmented { border: 1px solid #3f4d4f !important; background: #192729 !important; }
html[data-theme="dark"] .segment { color: #91b5ba !important; }
html[data-theme="dark"] .segment.active { color: #8ee2f3 !important; background: #172e36 !important; }
html[data-theme="dark"] .chart-area { background: #172626 !important; }
html[data-theme="dark"] .goal-meta strong { color: #a1ede1 !important; }
html[data-theme="dark"] .progress-track { background: #212c2e !important; }
html[data-theme="dark"] .donut-chart { background: conic-gradient(#07948b 0 58%, #202c2e 58% 76%, #d4a144 76% 100%) !important; }
html[data-theme="dark"] .donut-chart::before { background: #181f20 !important; }
html[data-theme="dark"] .table-panel th { color: #9cc0c6 !important; }
html[data-theme="dark"] .status.success { color: #a9dec3 !important; background: #1d3022 !important; }
html[data-theme="dark"] .status.pending { color: #efc98b !important; background: #3c2b0f !important; }
html[data-theme="dark"] .status.failed { color: #c4736f !important; background: #311715 !important; }
html[data-theme="dark"] .activity-item strong { color: #c3e3e2 !important; }
html[data-theme="dark"] .database-notice { border: 1px solid #3f594f !important; color: #aaddc2 !important; background: #1c2f24 !important; }
html[data-theme="dark"] .database-notice.database-connected { color: #aaddc2 !important; background: #1c2f24 !important; border-color: #3f594f !important; }
html[data-theme="dark"] .maintenance-filters input, html[data-theme="dark"] .maintenance-filters select, html[data-theme="dark"] .form-field input { border: 1px solid #3f5053 !important; background: #0c262f !important; }
html[data-theme="dark"] .maintenance-filters option { background: #181f20 !important; }
html[data-theme="dark"] .maintenance-table-wrap { border: 1px solid #3e4d51 !important; }
html[data-theme="dark"] .maintenance-table th, html[data-theme="dark"] .maintenance-table td { border-bottom: 1px solid #3c494b !important; }
html[data-theme="dark"] .maintenance-table th { color: #a2dee8 !important; background: #192e32 !important; }
html[data-theme="dark"] .maintenance-table tbody tr:nth-child(even) { background: #142529 !important; }
html[data-theme="dark"] .maintenance-table tbody tr:hover { background: #192e30 !important; }
html[data-theme="dark"] .maintenance-table .bay-cell { color: #b1cdd0 !important; }
html[data-theme="dark"] .delete-row-button { border: 1px solid #573b38 !important; color: #c77774 !important; background: #31100c !important; }
html[data-theme="dark"] .delete-row-button:hover { background: #331714 !important; }
html[data-theme="dark"] .dialog-close { background: #181f20 !important; }
html[data-theme="dark"] .form-field { color: #a1b8bb !important; }
html[data-theme="dark"] .app-footer strong { color: #9bf3ee !important; }
html[data-theme="dark"] .sidebar { border-bottom: 1px solid #3d535a !important; }
html[data-theme="dark"] .main-panel { background: rgba(21, 37, 43, 0.8) !important; }
html[data-theme="dark"] .nav-sub-inner { border-left: 1px solid rgba(55, 66, 67, 0.32) !important; }
html[data-theme="dark"] .nav-sub-item:hover, html[data-theme="dark"] .nav-sub-item.active { background: rgba(24, 31, 32, 0.2) !important; }
html[data-theme="dark"] .lm-note { border: 1px solid #405254 !important; color: #a9d5dd !important; background: #152b2e !important; }
html[data-theme="dark"] .lm-note.is-ok { border-color: #3f594f !important; color: #aaddc2 !important; background: #1c2f24 !important; }
html[data-theme="dark"] .lm-note.is-warn { border-color: #625437 !important; color: #f1cd92 !important; background: #382a0e !important; }
html[data-theme="dark"] .lm-note.is-error { border-color: #573b38 !important; color: #c87e7a !important; background: #32100d !important; }
html[data-theme="dark"] .lm-year-chip { border: 1px solid #3e5952 !important; color: #9df4ee !important; background: #1a332b !important; }
html[data-theme="dark"] .program-card:hover { background: #181f20 !important; }
html[data-theme="dark"] .program-card.is-error { border-color: #573b38 !important; }
html[data-theme="dark"] .program-no { color: #9df4ee !important; background: #1a332b !important; }
html[data-theme="dark"] .program-card h4 { color: #c5e7e9 !important; }
html[data-theme="dark"] .program-figure strong { color: #9df4ee !important; }
html[data-theme="dark"] .program-checks b { color: #a9ddd6 !important; }
html[data-theme="dark"] .program-foot { border-top: 1px solid #3d4b4b !important; }
html[data-theme="dark"] .table-link { color: #c5e7e9 !important; }
html[data-theme="dark"] .status.na { color: #8fb3b8 !important; background: #1f2728 !important; }
html[data-theme="dark"] .sld-card { border: 1px solid var(--line, #3e4b4f) !important; background: #181f20 !important; }
html[data-theme="dark"] .sld-thumb { background: #1a2528 !important; border-bottom: 1px solid var(--line, #3e4b4f) !important; }
html[data-theme="dark"] .sld-frame { background: #1a2528 !important; }
html[data-theme="dark"] .sld-summary { color: #9df4ee !important; }
html[data-theme="dark"] .peta-toolbar input, html[data-theme="dark"] .peta-toolbar select { border: 1px solid var(--line, #3e4b4f) !important; }
html[data-theme="dark"] .peta-legend { color: #a4c2c6 !important; }
html[data-theme="dark"] .peta-map { border: 1px solid var(--line, #3e4b4f) !important; }
html[data-theme="dark"] .peta-item { border: 1px solid var(--line, #3e4b4f) !important; background: #181f20 !important; }
html[data-theme="dark"] .peta-item:hover { background: #182b29 !important; }
html[data-theme="dark"] .peta-trafo { color: #a9d5dd !important; }
html[data-theme="dark"] .sld-count { color: #9df4ee !important; }
html[data-theme="dark"] .sld-total-card { border: 1px solid var(--line, #3e4b4f) !important; background: #182b29 !important; }
html[data-theme="dark"] .sld-total-card span { color: #a4c2c6 !important; }
html[data-theme="dark"] .sld-total-card strong { color: #9df4ee !important; }
html[data-theme="dark"] .sld-total-card strong i { color: #a4c2c6 !important; }
html[data-theme="dark"] .sld-total-chips span { border: 1px solid var(--line, #3e4b4f) !important; background: #181f20 !important; color: #c5d9e0 !important; }
html[data-theme="dark"] .sld-trafo-all summary { color: #9df4ee !important; }
html[data-theme="dark"] .sld-trafo-table th, html[data-theme="dark"] .sld-trafo-table td { border-bottom: 1px solid var(--line, #3b494c) !important; }
html[data-theme="dark"] .sld-trafo-table th { background: #152b2e !important; }
html[data-theme="dark"] .home-tile { border: 1px solid var(--line, #3e4b4f) !important; background: #182b29 !important; }
html[data-theme="dark"] .home-label { color: #a4c2c6 !important; }
html[data-theme="dark"] .home-tile strong { color: #9df4ee !important; }
html[data-theme="dark"] .home-tile strong i { color: #a4c2c6 !important; }
html[data-theme="dark"] .home-sub { color: #a4c2c6 !important; }
html[data-theme="dark"] .home-lm-row { border: 1px solid var(--line, #3e4b4f) !important; background: #181f20 !important; }
html[data-theme="dark"] .home-lm-row:hover { background: #182b29 !important; }
html[data-theme="dark"] .home-lm-no { color: #9df4ee !important; }
html[data-theme="dark"] .home-lm-row small { color: #a4c2c6 !important; }
html[data-theme="dark"] .lines-table .muted { color: #82aab0 !important; }
html[data-theme="dark"] .bay-hint { color: #82aab0 !important; }
html[data-theme="dark"] .bay-card { border: 1px solid var(--line, #3e4b4f) !important; background: #181f20 !important; }
html[data-theme="dark"] .bay-card span { color: #a4c2c6 !important; }
html[data-theme="dark"] .bay-card strong { color: #9df4ee !important; }
html[data-theme="dark"] .bay-card.bay-total { background: #182b29 !important; }
html[data-theme="dark"] .bay-subtitle small { color: #82aab0 !important; }
html[data-theme="dark"] .bay-total-row td { background: #152b2e !important; }
html[data-theme="dark"] .ac-chart { border: 1px solid var(--line, #3e4b4f) !important; background: #181f20 !important; }
html[data-theme="dark"] .ac-chart h5 { color: #c5d9e0 !important; }
html[data-theme="dark"] .ac-row { color: #c5d9e0 !important; }
html[data-theme="dark"] .ac-row:hover:not(.no-click), html[data-theme="dark"] .ac-row.is-active { background: #1c2d2c !important; }
html[data-theme="dark"] .ac-track { background: #202a2c !important; }
html[data-theme="dark"] .ac-total { fill: #c5d9e0 !important; }
html[data-theme="dark"] .ac-leg { color: #c5d9e0 !important; }
html[data-theme="dark"] .ac-leg:hover, html[data-theme="dark"] .ac-leg.is-active { background: #1c2d2c !important; }
html[data-theme="dark"] .age-ok { background: #1c311c !important; color: #9cd69c !important; }
html[data-theme="dark"] .age-mid { background: #3c2d12 !important; }
html[data-theme="dark"] .age-old { background: #371714 !important; }
html[data-theme="dark"] .peta-check { color: #c5d9e0 !important; }
html[data-theme="dark"] .peta-linenote { color: #a4c2c6 !important; }
html[data-theme="dark"] .att-item { border: 1px solid var(--line, #3e4b4f) !important; background: #181f20 !important; }
html[data-theme="dark"] .att-item small { color: #a4c2c6 !important; }
html[data-theme="dark"] .att-ok { background: #1c2f24 !important; color: #9cd69c !important; }

html[data-theme="dark"] .gsearch input, html[data-theme="dark"] .gsearch-results { background: #1a3035 !important; border-color: #2b4a50 !important; color: #e2f0f1; }
html[data-theme="dark"] .gs-item:hover { background: #20404a; }
html[data-theme="dark"] .gs-group { color: #6fdad0; }
html[data-theme="dark"] .gs-item small, html[data-theme="dark"] .gs-empty, html[data-theme="dark"] .gs-group small, html[data-theme="dark"] .src-stamp { color: #9db6ba; }
html[data-theme="dark"] .gi-chip { background: #1a3035; border-color: #2b4a50; color: #d4e8ea; }
html[data-theme="dark"] .aset-btn.ghost { color: #6fdad0; border-color: #3aa89f; }
html[data-theme="dark"] .att-item small { color: #9db6ba; }

html[data-theme="dark"] .sld-trafo-table td a, html[data-theme="dark"] .lines-table td a { color: #6fdad0; }