/**
 * Dark shell for Dexign/Yash-style template (nav, header, sidebar, content frame).
 * Scoped to html.gems-theme-dark so default (light) is unchanged.
 * Roll out: extend selectors as pages are audited; listen for gems-theme-changed in JS widgets.
 */

/*
 * Modals nested under #main-wrapper: style.css sets .modal-backdrop { z-index: 10 !important },
 * which stacks the dimmer *above* the whole wrapper while Bootstrap leaves the modal in place.
 * Clicks and Escape then never reach the dialog — backdrops appear “stuck”. Restore BS5 order.
 */
.modal-backdrop {
    z-index: 1050 !important;
}

.modal {
    z-index: 1055 !important;
}

html.gems-theme-dark {
    color-scheme: dark;
}

html.gems-theme-dark body {
    background-color: #0f1419;
    color: #e6e9ee;
}

html.gems-theme-dark #main-wrapper {
    background-color: #0f1419;
}

html.gems-theme-dark .nav-header {
    background: #151b22;
    border-color: #2a3441;
}

html.gems-theme-dark .header {
    background: #151b22;
    border-color: #2a3441;
}

html.gems-theme-dark .header .dashboard_bar,
html.gems-theme-dark .header .nav-link,
html.gems-theme-dark .header .btn {
    color: #e6e9ee;
}

html.gems-theme-dark .header .form-control,
html.gems-theme-dark .header .input-group-text {
    background-color: #1c2430;
    border-color: #2a3441;
    color: #e6e9ee;
}

html.gems-theme-dark .deznav {
    background: #121820;
}

html.gems-theme-dark .deznav .metismenu > li > a {
    color: #cfd6df;
}

html.gems-theme-dark .deznav .metismenu > li:hover > a,
html.gems-theme-dark .deznav .metismenu > li.mm-active > a {
    background: #1c2430;
    color: #fff;
}

html.gems-theme-dark .content-body {
    background-color: #0f1419;
    color: #e6e9ee;
}

html.gems-theme-dark .content-body .card {
    background-color: #151b22;
    border-color: #2a3441;
    color: #e6e9ee;
}

/**
 * Card chrome in dark mode.
 * custom.css sets .card-header { background: linear-gradient(...) } — that shorthand beats
 * background-color alone, so we reset the full background and force readable text.
 * Never set color to the same hex as the panel background (#1a222c).
 */
html.gems-theme-dark .content-body .card-header,
html.gems-theme-dark .content-body .card-footer {
    background: #1a222c !important;
    background-color: #1a222c !important;
    background-image: none !important;
    border-color: #2a3441 !important;
    color: #e6e9ee !important;
}

html.gems-theme-dark .content-body .card-header .form-check-label,
html.gems-theme-dark .content-body .card-header label {
    color: #e6e9ee !important;
}

html.gems-theme-dark .content-body .card-header .text-muted,
html.gems-theme-dark .content-body .card-footer .text-muted {
    color: #9aa5b5 !important;
}

html.gems-theme-dark .content-body .table {
    color: #e6e9ee;
    --bs-table-bg: transparent;
    --bs-table-color: #e6e9ee;
    --bs-table-border-color: #2a3441;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.05);
    --bs-table-striped-color: #e6e9ee;
    --bs-table-hover-bg: #252d3a;
    --bs-table-hover-color: #e6e9ee;
}

/* thead.table-light — Bootstrap forces a light header; override in dark mode (many pages). */
html.gems-theme-dark .content-body .table thead.table-light th,
html.gems-theme-dark .content-body .table thead.table-light td,
html.gems-theme-dark .content-body .table thead.table-light tr {
    background-color: #1a222c !important;
    background-image: none !important;
    color: #e6e9ee !important;
    border-color: #2a3441 !important;
}

/* thead without .table-light (e.g. spatial tables) — still use a distinct band */
html.gems-theme-dark .content-body .table thead:not(.table-light) th,
html.gems-theme-dark .content-body .table thead:not(.table-light) td {
    background-color: #1a222c !important;
    color: #e6e9ee !important;
    border-color: #2a3441 !important;
}

html.gems-theme-dark .content-body .table tbody td,
html.gems-theme-dark .content-body .table tbody th {
    color: #e6e9ee;
    border-color: #2a3441;
    background-color: transparent;
}

html.gems-theme-dark .content-body .table-hover > tbody > tr:hover > * {
    --bs-table-color-state: #e6e9ee;
    --bs-table-bg-state: #252d3a;
    color: #e6e9ee;
}

html.gems-theme-dark .content-body .badge.bg-light.text-dark {
    background-color: #2a3441 !important;
    color: #e6e9ee !important;
    border-color: #3d4d60 !important;
}

/* style.css sets .table.table-striped tbody tr:nth-of-type(odd) { background: #F3F0EC } for Yash dark
 * via [data-theme-version="dark"] only — under gems-theme-dark that <tr> paint stays and covers cells. */
html.gems-theme-dark .content-body .table.table-striped tbody tr,
/* Yash style.css: .table.table-hover tr:hover { background #F3F0EC } — paints <tr> under transparent <td>s */
html.gems-theme-dark .content-body .table tbody tr:hover {
    background-color: transparent !important;
}

html.gems-theme-dark .content-body .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-color-type: #e6e9ee;
    --bs-table-bg-type: rgba(255, 255, 255, 0.05);
    --bs-table-accent-bg: rgba(255, 255, 255, 0.05);
}

html.gems-theme-dark .content-body .table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-color-type: #e6e9ee;
    --bs-table-bg-type: transparent;
    --bs-table-accent-bg: transparent;
}

html.gems-theme-dark .content-body .text-muted {
    color: #9aa5b5 !important;
}

html.gems-theme-dark #footer,
html.gems-theme-dark .footer {
    background: #151b22;
    border-color: #2a3441;
    color: #9aa5b5;
}

html.gems-theme-dark #preloader {
    background: #0f1419;
}

html.gems-theme-dark .dropdown-menu {
    background-color: #1c2430;
    border-color: #2a3441;
}

html.gems-theme-dark .dropdown-item {
    color: #e6e9ee;
}

html.gems-theme-dark .dropdown-item:hover,
html.gems-theme-dark .dropdown-item:focus {
    background-color: #2a3441;
    color: #fff;
}

/* Theme control sits with other header icons */
html.gems-theme-dark #gems-theme-dropdown .nav-link {
    color: #e6e9ee;
}

/* Manual theme menu (same as Bootstrap .show) */
#gems-theme-dropdown {
    position: relative;
}
#gems-theme-dropdown .gems-theme-menu {
    display: none;
}
#gems-theme-dropdown .gems-theme-menu.show {
    display: block;
}

/* ─── Broader page surfaces (dark) ─────────────────────────────────────── */
html.gems-theme-dark .modal-content {
    background-color: #151b22;
    border-color: #2a3441;
    color: #e6e9ee;
}

html.gems-theme-dark .modal-header,
html.gems-theme-dark .modal-footer {
    border-color: #2a3441;
    background-color: #1a222c;
}

/* Modals are often portaled to body — outside .content-body, so page table rules do not apply. */
html.gems-theme-dark .modal .table {
    color: #e6e9ee;
    /* Base cell fill so “even” stripes are not body/white; odd band uses --bs-table-bg-type on cells. */
    --bs-table-bg: #151b22;
    --bs-table-color: #e6e9ee;
    --bs-table-border-color: #2a3441;
    --bs-table-striped-bg: rgba(255, 255, 255, 0.055);
    --bs-table-striped-color: #e6e9ee;
    --bs-table-hover-bg: #252d3a;
    --bs-table-hover-color: #e6e9ee;
}

html.gems-theme-dark .modal .table thead.table-light th,
html.gems-theme-dark .modal .table thead.table-light td,
html.gems-theme-dark .modal .table thead.table-light tr {
    background-color: #1a222c !important;
    background-image: none !important;
    color: #e6e9ee !important;
    border-color: #2a3441 !important;
}

html.gems-theme-dark .modal .table thead:not(.table-light) th,
html.gems-theme-dark .modal .table thead:not(.table-light) td {
    background-color: #1a222c !important;
    color: #e6e9ee !important;
    border-color: #2a3441 !important;
}

html.gems-theme-dark .modal .table tbody td,
html.gems-theme-dark .modal .table tbody th {
    color: #e6e9ee;
    border-color: #2a3441;
    background-color: transparent;
}

html.gems-theme-dark .modal .table-hover > tbody > tr:hover > * {
    --bs-table-color-state: #e6e9ee;
    --bs-table-bg-state: #252d3a;
    color: #e6e9ee;
}

html.gems-theme-dark .modal .table.table-striped tbody tr,
html.gems-theme-dark .modal .table tbody tr:hover {
    background-color: transparent !important;
}

html.gems-theme-dark .modal .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-color-type: #e6e9ee;
    --bs-table-bg-type: rgba(255, 255, 255, 0.055);
    --bs-table-accent-bg: rgba(255, 255, 255, 0.055);
}

html.gems-theme-dark .modal .table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-color-type: #e6e9ee;
    --bs-table-bg-type: transparent;
    --bs-table-accent-bg: transparent;
}

html.gems-theme-dark .modal .modal-body .text-muted {
    color: #9aa5b5 !important;
}

html.gems-theme-dark .modal .modal-body code {
    color: #d4dbe6;
    background-color: #252d3a;
    padding: 0.1em 0.35em;
    border-radius: 0.25rem;
}

html.gems-theme-dark .modal .modal-body a {
    color: #9db7ff;
}

html.gems-theme-dark .modal .modal-body a:hover {
    color: #c5d4ff;
}

html.gems-theme-dark .breadcrumb,
html.gems-theme-dark .page-titles,
html.gems-theme-dark .welcome-content,
html.gems-theme-dark .widget-stat {
    color: #e6e9ee;
}

html.gems-theme-dark .content-body .form-control,
html.gems-theme-dark .content-body .form-select,
html.gems-theme-dark .content-body textarea {
    background-color: #1c2430;
    border-color: #2a3441;
    color: #e6e9ee;
}

html.gems-theme-dark .content-body .form-control:focus,
html.gems-theme-dark .content-body .form-select:focus {
    background-color: #1c2430;
    border-color: #5c7cfa;
    color: #fff;
}

html.gems-theme-dark .content-body .input-group-text {
    background-color: #1a222c;
    border-color: #2a3441;
    color: #cfd6df;
}

html.gems-theme-dark .content-body .list-group-item {
    background-color: #151b22;
    border-color: #2a3441;
    color: #e6e9ee;
}

html.gems-theme-dark .content-body .nav-tabs .nav-link {
    color: #cfd6df;
}

html.gems-theme-dark .content-body .nav-tabs .nav-link.active {
    background-color: #1c2430;
    border-color: #2a3441 #2a3441 #1c2430;
    color: #fff;
}

html.gems-theme-dark .content-body .alert {
    background-color: #1c2430;
    border-color: #2a3441;
    color: #e6e9ee;
}

html.gems-theme-dark .content-body .btn-light {
    background-color: #2a3441;
    border-color: #3d4d60;
    color: #e6e9ee;
}

html.gems-theme-dark .content-body .border,
html.gems-theme-dark .content-body .border-bottom,
html.gems-theme-dark .content-body .border-top {
    border-color: #2a3441 !important;
}

html.gems-theme-dark .content-body .bg-white {
    background-color: #151b22 !important;
}

html.gems-theme-dark .content-body .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.45) !important;
}

/* Offcanvas / gems-sidebar (shared submodule chrome) — see gems-sidebars.css */
html.gems-theme-dark .offcanvas,
html.gems-theme-dark .gems-sidebar.offcanvas {
    background-color: #151b22;
    color: #e6e9ee;
}

html.gems-theme-dark .gems-sidebar .offcanvas-header {
    background-color: inherit;
    color: inherit;
    border-bottom-color: #2a3441;
}

html.gems-theme-dark .gems-sidebar.offcanvas-end {
    border-left-color: #2a3441;
}

html.gems-theme-dark .gems-sidebar.offcanvas-start {
    border-right-color: #2a3441;
}

html.gems-theme-dark .gems-sidebar .offcanvas-body {
    color: #e6e9ee;
}

/* Tabulator hosts in main content — baseline only; tune per-page if headers look off */
html.gems-theme-dark .content-body .tabulator {
    background-color: #151b22;
    color: #e6e9ee;
    border-color: #2a3441;
}

/**
 * Spatial intelligence (Auckland / Wellington map card) — toolbar + loading strip + legend.
 * Uses Bootstrap CSS variables so light + dark follow data-bs-theme on <html>.
 */
.spatial-intelligence-map-toolbar {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
    border-bottom-color: var(--bs-border-color) !important;
}

/* When gems dark class is on <html>, ensure map toolbar matches card-header (custom.css gradient otherwise wins) */
html.gems-theme-dark .spatial-intelligence-map-toolbar {
    background: #1a222c !important;
    background-color: #1a222c !important;
    background-image: none !important;
    color: #e6e9ee !important;
    border-bottom-color: #2a3441 !important;
}

html.gems-theme-dark .spatial-intelligence-map-toolbar .form-check-label,
html.gems-theme-dark .spatial-intelligence-map-toolbar label {
    color: #e6e9ee !important;
}

/* Layer toggles: unchecked switches were white-on-white (body-bg + faint knob). Dark track + clear thumb. */
html.gems-theme-dark .spatial-intelligence-map-toolbar .form-switch .form-check-input {
    --bs-form-check-bg: transparent;
    background-color: #2f3a48 !important;
    border-color: #5c6b7d !important;
}

html.gems-theme-dark .spatial-intelligence-map-toolbar .form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23e8edf4'/%3e%3c/svg%3e");
}

html.gems-theme-dark .spatial-intelligence-map-toolbar .form-switch .form-check-input:checked {
    background-color: #5c3cad !important;
    border-color: #7b5fd4 !important;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

html.gems-theme-dark .spatial-intelligence-map-toolbar .form-switch .form-check-input:focus {
    border-color: #8fa9c9;
    box-shadow: 0 0 0 0.2rem rgba(124, 148, 255, 0.3);
}

html.gems-theme-dark .spatial-intelligence-map-toolbar .form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23cfd8e6'/%3e%3c/svg%3e");
}

html.gems-theme-dark .spatial-intelligence-map-toolbar .form-switch .form-check-input:checked:focus {
    border-color: #a090e0;
    box-shadow: 0 0 0 0.2rem rgba(124, 92, 250, 0.35);
}

html.gems-theme-dark .spatial-intelligence-section-header {
    background: #1a222c !important;
    background-color: #1a222c !important;
    background-image: none !important;
    color: #e6e9ee !important;
    border-bottom-color: #2a3441 !important;
}

html.gems-theme-dark .spatial-intelligence-section-header h6.text-body {
    color: #e6e9ee !important;
}

.spatial-intelligence-map-toolbar .form-select {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}

.spatial-intelligence-map-toolbar .border-light-subtle {
    border-color: var(--bs-border-color) !important;
}

.spatial-intelligence-map-loading {
    background-color: var(--bs-body-bg) !important;
    border-color: var(--bs-border-color) !important;
}

.spatial-intelligence-map-legend {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
}

.spatial-intelligence-legend-toggle {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

.spatial-intelligence-map-legend #legendBody {
    border-top-color: var(--bs-border-color) !important;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
}

/* ICP address labels — Leaflet divIcon: avoid default marker chrome hiding text */
.leaflet-div-icon.gems-icp-label-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Debug: Leaflet scale control (spatial intelligence maps) */
.leaflet-control.gems-debug-scale {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    border-radius: 4px;
    padding: 2px 6px 4px;
    font-size: 10px;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.leaflet-control.gems-debug-scale::before {
    content: 'DEBUG scale · ';
    font-weight: 600;
    color: #6c757d;
    font-size: 9px;
}
html.gems-theme-dark .leaflet-control.gems-debug-scale {
    background: rgba(30, 36, 44, 0.95);
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #e6e9ee;
}
html.gems-theme-dark .leaflet-control.gems-debug-scale::before {
    color: #adb5bd;
}

/* ICP address dots — pane gemsIcpPoints (z above district); inner circle is 12px (= radius 6) */
.leaflet-div-icon.gems-icp-dot-wrap {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Map detail column — stat cards (EJS), Linked Projects + weather (JS) use .bg-light */
html.gems-theme-dark .content-body #detailPanel.border-start {
    border-color: #2a3441 !important;
}

html.gems-theme-dark .content-body #detailPanel .card.bg-light {
    background-color: #1c2430 !important;
    color: #e6e9ee;
    border: 1px solid #2a3441 !important;
}

html.gems-theme-dark .content-body #detailPanel .card.bg-light .fw-semibold,
html.gems-theme-dark .content-body #detailPanel .card.bg-light .fw-bold {
    color: #e6e9ee;
}

html.gems-theme-dark .content-body #detailPanel .card.bg-light .text-muted {
    color: #9aa5b5 !important;
}

html.gems-theme-dark .content-body #detailPanel .border-bottom {
    border-color: #2a3441 !important;
}

html.gems-theme-dark .content-body #detailPanel .progress {
    background-color: #2a3441;
}

html.gems-theme-dark .content-body #detailPanel .btn-outline-primary {
    color: #b4c8ff;
    border-color: #5c7cfa;
    background-color: rgba(92, 124, 250, 0.12);
}

html.gems-theme-dark .content-body #detailPanel .btn-outline-primary:hover {
    color: #fff;
    background-color: #4d63c9;
    border-color: #7b93ff;
}