/* Import Google Fonts for Roboto and Lora */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Lora:wght@600;700&display=swap');

/* Muli — self-hosted app font. This @font-face block and
   master.chart_theme.APP_FONT_FAMILY are the pair that must stay in sync (the
   string lives only in that Python constant — everything else, including the
   --app-font-family custom property below, derives from it). The same TTFs
   must also be installed under ~/.fonts on any host that renders batch-export
   PNGs (kaleido's bundled fontconfig scans ~/.fonts, not ~/.local/share/fonts). */
@font-face {
    font-family: 'Muli';
    src: url('/assets/fonts/muli-2/Muli-1GDlj.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: url('/assets/fonts/muli-2/MuliSemibold-BW0dG.ttf') format('truetype');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Muli';
    src: url('/assets/fonts/muli-2/MuliBold-YzEVy.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

/* All app modals (issue #100 chart/modal overhaul). CustomModal renders every
   dialog inside a <div class="mm-modal-root">, portalled to document.body —
   outside this app's own DOM subtree — so this must be a real CSS rule, not an
   inline style on some wrapper element the portal wouldn't inherit from. */
.mm-modal-root, .mm-modal-root * {
    font-family: var(--app-font-family);
}

:root {
    /* Primary brand color (Orange) */
    --bs-primary: #d46611;
    --bs-primary-rgb: 212, 102, 17;

    /* Buttons */
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: #b35900;
    --bs-btn-hover-border-color: #b35900;
    --bs-btn-active-bg: #8a4200;
    --bs-btn-active-border-color: #8a4200;

    /* Light theme tokens */
    --page-bg: #ffffff;
    --surface-bg: #ffffff;
    --surface2-bg: #f8f9fa;
    --border-color: #dee2e6;
    --text-primary: #102361;
    --text-body: #000000;
    --text-secondary: #666666;
    --grid-th-bg: #f9fafb;
    --grid-th-color: #374151;
    --grid-row-hover: #f3f4f6;
    --grid-row-odd: #fcfcfd;
    --modal-bg: #ffffff;
    --modal-header-bg: #fafafa;
    --modal-title: #111827;
    --chart-bg: #ffffff;

    /* mm-bh-dash-modal tokens (bridge portal theme → CustomModal) */
    --mm-background: var(--modal-bg);
    --mm-foreground: var(--text-body);
    --mm-card: var(--modal-bg);
    --mm-card-foreground: var(--text-body);
    --mm-muted: var(--surface2-bg);
    --mm-muted-foreground: var(--text-secondary);
    --mm-border: var(--border-color);
    --mm-ring: #f97316;
    --mm-primary: #f97316;
    --mm-primary-foreground: #ffffff;
    --mm-accent: var(--surface2-bg);
    --mm-accent-foreground: var(--text-body);
    --mm-glass-bg: rgba(255, 255, 255, 0.72);
    --mm-glass-border: rgba(255, 255, 255, 0.5);
}

[data-mantine-color-scheme="dark"] {
    --page-bg: #0f172a;
    --surface-bg: #1e293b;
    --surface2-bg: #263248;
    --border-color: #334155;
    --text-primary: #e2e8f0;
    --text-body: #f1f5f9;
    --text-secondary: #94a3b8;
    --grid-th-bg: #263248;
    --grid-th-color: #94a3b8;
    --grid-row-hover: #263248;
    --grid-row-odd: #1e293b;
    --modal-bg: #1e293b;
    --modal-header-bg: #263248;
    --modal-title: #f1f5f9;
    --chart-bg: #1e293b;

    --mm-background: var(--modal-bg);
    --mm-foreground: var(--text-body);
    --mm-card: var(--modal-bg);
    --mm-card-foreground: var(--text-body);
    --mm-muted: var(--surface2-bg);
    --mm-muted-foreground: var(--text-secondary);
    --mm-border: var(--border-color);
    --mm-ring: #fb923c;
    --mm-primary: #f97316;
    --mm-primary-foreground: #ffffff;
    --mm-accent: var(--surface2-bg);
    --mm-accent-foreground: var(--text-body);
    --mm-glass-bg: rgba(30, 41, 59, 0.72);
    --mm-glass-border: rgba(255, 255, 255, 0.12);
}

[data-bs-theme="dark"] {
    --bs-body-bg: #0f172a;
    --bs-body-color: #f1f5f9;
    --bs-border-color: #334155;
}

/* Ensure .btn-primary adopts your color in all states */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    font-family: system-ui, Roboto, Arial, sans-serif;
    font-weight: 500;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color) !important;
}

.btn-primary:active {
    background-color: var(--bs-btn-active-bg) !important;
    border-color: var(--bs-btn-active-border-color) !important;
}

/* Light theme base */
body {
    background-color: var(--page-bg);
    color: var(--text-body);
    font-family: system-ui, Roboto, Arial, sans-serif;
    font-weight: 400;
    font-size: 1rem;
}

/* Inputs and selects */
.form-control,
.form-select,
.Select,
.slider {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
    border-color: var(--border-color) !important;
    font-family: system-ui, Roboto, Arial, sans-serif;
    font-weight: 400;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
    outline: none;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* Toast modal (bottom-right) */
.custom-toast-modal .modal-dialog {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    margin: 0;
    width: 30vw;
    max-height: 70vh;
    pointer-events: auto;
    z-index: 1055;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.custom-toast-modal .modal-content {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.custom-toast-modal .modal-body {
    overflow-y: auto;
    flex: 1 1 0%;
    min-height: 0;
}

/* CustomModal (mm-bh-dash-modal) — scroll + surface alignment */

/* Must outrank the component's own [data-theme] token blocks — its
   runtime-injected stylesheet wins order ties, so plain :root loses. */
html:root[data-theme] {
    --mm-background: var(--modal-bg);
    --mm-card: var(--modal-bg);
    --mm-foreground: var(--text-body);
    --mm-card-foreground: var(--text-body);
    --mm-border: var(--border-color);
}

.mm-modal-body {
    overflow-y: auto;
}

.mm-modal-panel {
    background-color: var(--modal-bg, var(--mm-background));
    color: var(--text-body, var(--mm-foreground));
}

.mm-modal-header {
    border-bottom: 1px solid var(--border-color, var(--mm-border));
}

.mm-modal-title {
    color: var(--modal-title, var(--mm-foreground));
}

.mm-modal-footer {
    border-top: 1px solid var(--border-color, var(--mm-border));
}

/* Table modal — tall scroll body */
#table-modal .mm-modal-body {
    max-height: calc(90vh - 5rem);
    overflow-y: auto;
}

/* Dash DataTable styling */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner {
    border: none !important;
    box-shadow: inset 0 0 0 1px var(--border-color);
    border-radius: 0.5rem;
    overflow: hidden;
}

.dash-table-container .dash-spreadsheet-container th {
    background-color: var(--grid-th-bg) !important;
    color: var(--grid-th-color) !important;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 0.5rem 0.75rem !important;
    font-family: Lora, Georgia, serif;
}

.dash-table-container .dash-spreadsheet-container td {
    font-size: 0.875rem;
    color: var(--text-body);
    padding: 0.5rem 0.75rem !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-family: system-ui, Roboto, Arial, sans-serif;
}

/* Row states */
.dash-table-container .dash-spreadsheet-container tr:hover td {
    background-color: var(--grid-row-hover) !important;
}

.dash-table-container .dash-spreadsheet-container tr:nth-child(odd) td {
    background-color: var(--grid-row-odd) !important;
}

/* Utility color override for your orange accent */
.text-warning {
    color: var(--bs-primary) !important;
}

.orange-stripes .ag-row:hover {
    background-color: #ffc300 !important;
}

/* Suppress loading animation on time slider (fast play ticking) */
#time_slider._dash-loading-callback::after {
    display: none !important;
}

#time_slider._dash-loading-callback {
    opacity: 1 !important;
}

/* Custom map loading overlay spinner */
.map-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: none;
    transition: opacity 0.15s ease-out;
}

.map-loading-overlay[data-visible="false"] {
    opacity: 0;
}

.map-loading-overlay[data-visible="true"] {
    opacity: 1;
}

/* Card holding spinner + "Updating…" + Cancel. Debounced via `visibility`
   so quick updates never flash it; only genuinely slow ones become visible. */
.map-loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    pointer-events: auto;
    /* hidden until the overlay has been visible for a beat (see below) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.map-loading-overlay[data-visible="true"] .map-loading-card {
    opacity: 1;
    visibility: visible;
    /* ~250ms grace period before the card shows — suppresses flicker on
       fast (cached) slider/view-mode updates */
    transition: opacity 0.15s ease 0.25s, visibility 0s linear 0.25s;
}

.map-loading-text {
    font-size: 13px;
    font-weight: 600;
    color: #333;
    letter-spacing: 0.02em;
}

.map-loading-cancel {
    border: 1px solid #f08c00;
    background-color: #fff;
    color: #f08c00;
    font-weight: 600;
    font-size: 13px;
    padding: 5px 16px;
    border-radius: 6px;
    cursor: pointer;
    /* only revealed for genuinely slow updates (~0.8s in) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s,
                background-color 0.12s ease, color 0.12s ease;
}

.map-loading-overlay[data-visible="true"] .map-loading-cancel {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease 0.8s, visibility 0s linear 0.8s,
                background-color 0.12s ease, color 0.12s ease;
}

.map-loading-cancel:hover {
    background-color: #f08c00;
    color: #fff;
}

/* Dark-mode card */
[data-mantine-color-scheme="dark"] .map-loading-card {
    background-color: rgba(36, 36, 40, 0.96);
}

[data-mantine-color-scheme="dark"] .map-loading-text {
    color: #e6e6e6;
}

.map-spinner {
    width: 36px;
    height: 36px;
    border: 4px solid rgba(240, 140, 0, 0.25);
    border-top-color: #f08c00;
    border-radius: 50%;
    animation: map-spin 0.8s linear infinite;
}

@keyframes map-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Cascade-loading shimmer on dropdown inputs */
.cascade-loading .mantine-Input-input,
.cascade-loading .mantine-MultiSelect-input {
    border-width: 2px !important;
    border-color: #f08c00 !important;
    animation: dropdown-shimmer 1.8s ease-in-out infinite;
    pointer-events: none;
    background-color: #e8e8e8 !important;
    background-image: linear-gradient(90deg, #e8e8e8 0%, #fdd9a0 35%, #fec56a 50%, #fdd9a0 65%, #e8e8e8 100%) !important;
    background-size: 200% 100% !important;
    color: #999 !important;
}

@keyframes dropdown-shimmer {
    0% {
        background-position: 100% 0;
        border-color: #ccc;
    }

    50% {
        border-color: #f08c00;
    }

    100% {
        background-position: -100% 0;
        border-color: #ccc;
    }
}

/* ============================================================
   MODAL LOADING PULSE — .modal-loading (modal body) shimmers every
   .modal-chart-shell, .modal-pulse a single zone. Set clientside on
   click; cleared by the data callbacks.
   ============================================================ */
.modal-loading .modal-chart-shell,
.modal-pulse {
    border: 2px solid #f08c00;
    border-radius: 8px;
    animation: dropdown-shimmer 1.8s ease-in-out infinite;
    background-color: #e8e8e8;
    background-image: linear-gradient(90deg, #e8e8e8 0%, #fdd9a0 35%, #fec56a 50%, #fdd9a0 65%, #e8e8e8 100%);
    background-size: 200% 100%;
    pointer-events: none;
}

.modal-loading .modal-chart-shell {
    min-height: 280px;
}

.modal-loading .modal-chart-shell > *,
.modal-pulse > * {
    visibility: hidden;
}

[data-mantine-color-scheme="dark"] .modal-loading .modal-chart-shell,
[data-mantine-color-scheme="dark"] .modal-pulse {
    background-color: #263248;
    background-image: linear-gradient(90deg, #263248 0%, #7c4a18 35%, #d46611 50%, #7c4a18 65%, #263248 100%);
}

/* ============================================================
   MODAL POSITIONING — CustomModal portals to document.body, and a
   viewport-centred panel can slide under the fixed sidebar (z-index
   1200). --app-content-offset tracks the live sidebar width
   (clientside sync in callbacks_master); 0 below "sm".
   ============================================================ */
@media (min-width: 48em) {
    .mm-modal-root .mm-modal-positioner {
        padding-left: calc(var(--app-content-offset, 0px) + 1rem);
    }

    .mm-modal-root .mm-modal-panel {
        max-width: min(var(--mm-max-width, calc(100vw - 2rem)),
                calc(100vw - var(--app-content-offset, 0px) - 2rem));
    }
}
/* ============================================================
   DARK MODE / CUSTOM COMPONENTS
   ============================================================ */
.app-header {
    background-color: var(--surface-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.app-sidebar {
    background-color: var(--surface-bg) !important;
    border-right: 1px solid var(--border-color) !important;
}
.app-main {
    min-height: 100vh;
    background-color: var(--page-bg) !important;
}
.app-drawer {
    background-color: var(--page-bg) !important;
}
[data-mantine-color-scheme="dark"] img[src$="logo_wide_colour.png"] {
    content: url('/assets/logo_wide_white.png');
}

.mantine-Paper-root,
.mantine-Card-root,
.mantine-Drawer-content,
.mantine-Drawer-header,
.mantine-Drawer-body,
.mantine-Popover-dropdown,
.mantine-Combobox-dropdown,
.mantine-Menu-dropdown,
.mantine-DatePicker-calendarHeader,
.mantine-DatePicker-monthCell {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
    border-color: var(--border-color) !important;
}

.mantine-Drawer-header {
    border-bottom: 1px solid var(--border-color) !important;
}
.mantine-Drawer-content,
.mantine-Drawer-body {
    border-right: 1px solid var(--border-color) !important;
}

.mantine-Text-root,
.mantine-Title-root,
.mantine-Drawer-title,
.mantine-Input-label,
.mantine-Select-label,
.mantine-MultiSelect-label,
.mantine-NumberInput-label,
.mantine-DateInput-label,
.mantine-Textarea-label,
.mantine-NavLink-label {
    color: inherit;
}

.mantine-Input-input,
.mantine-Select-input,
.mantine-MultiSelect-input,
.mantine-NumberInput-input,
.mantine-DateInput-input,
.mantine-Textarea-input,
.mantine-PillsInput-input {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
    border-color: var(--border-color) !important;
}
.mantine-Input-input::placeholder,
.mantine-Select-input::placeholder,
.mantine-MultiSelect-input::placeholder,
.mantine-NumberInput-input::placeholder,
.mantine-DateInput-input::placeholder,
.mantine-Textarea-input::placeholder,
.mantine-PillsInput-input::placeholder {
    color: var(--text-secondary) !important;
    opacity: 1;
}

.ag-theme-alpine,
.ag-theme-alpine-dark {
    --ag-background-color: var(--surface-bg);
    --ag-header-background-color: var(--surface2-bg);
    --ag-odd-row-background-color: var(--grid-row-odd);
    --ag-row-hover-color: var(--grid-row-hover);
    --ag-border-color: var(--border-color);
    --ag-foreground-color: var(--text-body);
    --ag-header-foreground-color: var(--grid-th-color);
    --ag-secondary-foreground-color: var(--text-secondary);
    --ag-modal-overlay-background-color: rgba(0,0,0,0.4);
}

.dash-table-container .dash-spreadsheet-container td {
    background-color: var(--surface-bg) !important;
}

.custom-toast-modal .modal-content {
    background-color: var(--modal-bg) !important;
    color: var(--text-body) !important;
}

/* Module chart/drawer wrappers with inline fallback colours */
#compare-int-main-container,
#region-summary-main-container,
#summary-main-container,
#dynamic-charts-container,
#dynamic-charts-container-region-summary,
#dynamic-charts-container-summary {
    background-color: var(--page-bg) !important;
    color: var(--text-body) !important;
}

[data-mantine-color-scheme="dark"] .cascade-loading .mantine-Input-input,
[data-mantine-color-scheme="dark"] .cascade-loading .mantine-MultiSelect-input {
    background-color: #263248 !important;
    background-image: linear-gradient(90deg, #263248 0%, #7c4a18 35%, #d46611 50%, #7c4a18 65%, #263248 100%) !important;
    color: var(--text-secondary) !important;
}

[data-mantine-color-scheme="dark"] .mantine-Text-root,
[data-mantine-color-scheme="dark"] .mantine-Title-root,
[data-mantine-color-scheme="dark"] .mantine-Input-label,
[data-mantine-color-scheme="dark"] .mantine-Select-label,
[data-mantine-color-scheme="dark"] .mantine-MultiSelect-label,
[data-mantine-color-scheme="dark"] .mantine-NumberInput-label,
[data-mantine-color-scheme="dark"] .mantine-DateInput-label,
[data-mantine-color-scheme="dark"] .mantine-Textarea-label,
[data-mantine-color-scheme="dark"] .mantine-NavLink-label,
[data-mantine-color-scheme="dark"] .mantine-Menu-itemLabel {
    color: var(--text-body) !important;
}

[data-mantine-color-scheme="dark"] .mantine-Text-root[data-dimmed="true"],
[data-mantine-color-scheme="dark"] .mantine-Input-description,
[data-mantine-color-scheme="dark"] .mantine-Input-error {
    color: var(--text-secondary) !important;
}

/* Primary navigation must always supersede secondary/page control drawers. */
.app-header,
.app-sidebar,
.mantine-AppShell-navbar,
.mantine-AppShell-header {
    z-index: 1200 !important;
}
.app-sidebar .mantine-Menu-dropdown,
.app-sidebar .mantine-Tooltip-tooltip,
.app-header .mantine-Menu-dropdown,
.app-header .mantine-Tooltip-tooltip {
    z-index: 1300 !important;
}

/* Dark-mode support for custom map components (DeckGL/EpecDeckMap/Leaflet overlays). */
[data-mantine-color-scheme="dark"] .leaflet-container {
    background: #0f172a !important;
    color: var(--text-body) !important;
}
[data-mantine-color-scheme="dark"] .leaflet-control,
[data-mantine-color-scheme="dark"] .leaflet-bar a,
[data-mantine-color-scheme="dark"] .leaflet-bar a:hover,
[data-mantine-color-scheme="dark"] .leaflet-control-layers,
[data-mantine-color-scheme="dark"] .leaflet-popup-content-wrapper,
[data-mantine-color-scheme="dark"] .leaflet-popup-tip {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
    border-color: var(--border-color) !important;
}
[data-mantine-color-scheme="dark"] .leaflet-control-attribution {
    background-color: rgba(30, 41, 59, 0.85) !important;
    color: var(--text-secondary) !important;
}
[data-mantine-color-scheme="dark"] .leaflet-control-attribution a {
    color: #93c5fd !important;
}

/* Floating cards/overlays used by headroom, congestion, VRE and historical maps. */
[data-mantine-color-scheme="dark"] [id*="floating-card"],
[data-mantine-color-scheme="dark"] [id*="legend-card"],
[data-mantine-color-scheme="dark"] [id*="hist-"].mantine-Paper-root,
[data-mantine-color-scheme="dark"] .mapboxgl-popup-content,
[data-mantine-color-scheme="dark"] .deck-tooltip,
[data-mantine-color-scheme="dark"] .epec-deck-tooltip {
    background-color: rgba(30, 41, 59, 0.88) !important;
    color: var(--text-body) !important;
    border-color: var(--border-color) !important;
}
[data-mantine-color-scheme="dark"] .mapboxgl-ctrl,
[data-mantine-color-scheme="dark"] .mapboxgl-ctrl-group,
[data-mantine-color-scheme="dark"] .maplibregl-ctrl,
[data-mantine-color-scheme="dark"] .maplibregl-ctrl-group {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
    border-color: var(--border-color) !important;
}
[data-mantine-color-scheme="dark"] .mapboxgl-ctrl button,
[data-mantine-color-scheme="dark"] .maplibregl-ctrl button {
    filter: invert(1) hue-rotate(180deg);
}

/* Dash dcc.Dropdown / react-select v1 dark mode (used by headroom contingent line controls). */
[data-mantine-color-scheme="dark"] .Select-control,
[data-mantine-color-scheme="dark"] .Select-multi-value-wrapper,
[data-mantine-color-scheme="dark"] .Select-input,
[data-mantine-color-scheme="dark"] .Select-input > input {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
    border-color: var(--border-color) !important;
}
[data-mantine-color-scheme="dark"] .Select-control {
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}
[data-mantine-color-scheme="dark"] .is-focused:not(.is-open) > .Select-control {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.20rem rgba(var(--bs-primary-rgb), 0.25) !important;
}
[data-mantine-color-scheme="dark"] .Select-placeholder,
[data-mantine-color-scheme="dark"] .Select--single > .Select-control .Select-value,
[data-mantine-color-scheme="dark"] .Select-value-label,
[data-mantine-color-scheme="dark"] .Select-input > input,
[data-mantine-color-scheme="dark"] .Select-arrow-zone,
[data-mantine-color-scheme="dark"] .Select-clear-zone {
    color: var(--text-body) !important;
}
[data-mantine-color-scheme="dark"] .Select-placeholder {
    color: var(--text-secondary) !important;
}
[data-mantine-color-scheme="dark"] .Select-arrow {
    border-color: var(--text-secondary) transparent transparent !important;
}
[data-mantine-color-scheme="dark"] .is-open > .Select-control .Select-arrow {
    border-color: transparent transparent var(--text-secondary) !important;
}
[data-mantine-color-scheme="dark"] .Select-menu-outer,
[data-mantine-color-scheme="dark"] .VirtualizedSelectFocusedOption,
[data-mantine-color-scheme="dark"] .VirtualizedSelectOption {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
    border-color: var(--border-color) !important;
}
[data-mantine-color-scheme="dark"] .Select-option {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
}
[data-mantine-color-scheme="dark"] .Select-option.is-focused,
[data-mantine-color-scheme="dark"] .Select-option.is-selected,
[data-mantine-color-scheme="dark"] .VirtualizedSelectFocusedOption {
    background-color: var(--surface2-bg) !important;
    color: var(--text-body) !important;
}
[data-mantine-color-scheme="dark"] .Select-noresults {
    background-color: var(--surface-bg) !important;
    color: var(--text-secondary) !important;
}

/* Strong override for Headroom contingent dcc.Dropdown instances (Dash/react-select). */
html[data-mantine-color-scheme="dark"] #contingent_line,
html[data-mantine-color-scheme="dark"] #contingent_line_modal,
html[data-bs-theme="dark"] #contingent_line,
html[data-bs-theme="dark"] #contingent_line_modal,
html[data-mantine-color-scheme="dark"] #contingent_line .Select,
html[data-mantine-color-scheme="dark"] #contingent_line_modal .Select,
html[data-bs-theme="dark"] #contingent_line .Select,
html[data-bs-theme="dark"] #contingent_line_modal .Select {
    background: transparent !important;
    color: var(--text-body) !important;
}

html[data-mantine-color-scheme="dark"] #contingent_line .Select-control,
html[data-mantine-color-scheme="dark"] #contingent_line_modal .Select-control,
html[data-bs-theme="dark"] #contingent_line .Select-control,
html[data-bs-theme="dark"] #contingent_line_modal .Select-control {
    background: var(--surface-bg) !important;
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
    border-color: var(--border-color) !important;
}

html[data-mantine-color-scheme="dark"] #contingent_line .Select-control *,
html[data-mantine-color-scheme="dark"] #contingent_line_modal .Select-control *,
html[data-bs-theme="dark"] #contingent_line .Select-control *,
html[data-bs-theme="dark"] #contingent_line_modal .Select-control * {
    background-color: transparent !important;
    color: var(--text-body) !important;
}

html[data-mantine-color-scheme="dark"] #contingent_line .Select-placeholder,
html[data-mantine-color-scheme="dark"] #contingent_line_modal .Select-placeholder,
html[data-bs-theme="dark"] #contingent_line .Select-placeholder,
html[data-bs-theme="dark"] #contingent_line_modal .Select-placeholder {
    color: var(--text-secondary) !important;
}

html[data-mantine-color-scheme="dark"] #contingent_line .Select-menu-outer,
html[data-mantine-color-scheme="dark"] #contingent_line_modal .Select-menu-outer,
html[data-bs-theme="dark"] #contingent_line .Select-menu-outer,
html[data-bs-theme="dark"] #contingent_line_modal .Select-menu-outer {
    background: var(--surface-bg) !important;
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
}

html[data-mantine-color-scheme="dark"] #contingent_line .Select-menu,
html[data-mantine-color-scheme="dark"] #contingent_line_modal .Select-menu,
html[data-mantine-color-scheme="dark"] #contingent_line .Select-option,
html[data-mantine-color-scheme="dark"] #contingent_line_modal .Select-option,
html[data-mantine-color-scheme="dark"] #contingent_line .VirtualizedSelectOption,
html[data-mantine-color-scheme="dark"] #contingent_line_modal .VirtualizedSelectOption,
html[data-bs-theme="dark"] #contingent_line .Select-menu,
html[data-bs-theme="dark"] #contingent_line_modal .Select-menu,
html[data-bs-theme="dark"] #contingent_line .Select-option,
html[data-bs-theme="dark"] #contingent_line_modal .Select-option,
html[data-bs-theme="dark"] #contingent_line .VirtualizedSelectOption,
html[data-bs-theme="dark"] #contingent_line_modal .VirtualizedSelectOption {
    background: var(--surface-bg) !important;
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
}

html[data-mantine-color-scheme="dark"] #contingent_line .Select-option.is-focused,
html[data-mantine-color-scheme="dark"] #contingent_line_modal .Select-option.is-focused,
html[data-mantine-color-scheme="dark"] #contingent_line .Select-option.is-selected,
html[data-mantine-color-scheme="dark"] #contingent_line_modal .Select-option.is-selected,
html[data-mantine-color-scheme="dark"] #contingent_line .VirtualizedSelectFocusedOption,
html[data-mantine-color-scheme="dark"] #contingent_line_modal .VirtualizedSelectFocusedOption,
html[data-bs-theme="dark"] #contingent_line .Select-option.is-focused,
html[data-bs-theme="dark"] #contingent_line_modal .Select-option.is-focused,
html[data-bs-theme="dark"] #contingent_line .Select-option.is-selected,
html[data-bs-theme="dark"] #contingent_line_modal .Select-option.is-selected,
html[data-bs-theme="dark"] #contingent_line .VirtualizedSelectFocusedOption,
html[data-bs-theme="dark"] #contingent_line_modal .VirtualizedSelectFocusedOption {
    background: var(--surface2-bg) !important;
    background-color: var(--surface2-bg) !important;
    color: var(--text-body) !important;
}

/* Final hard override for legacy Dash Dropdown menus that render outside the component tree. */
html[data-mantine-color-scheme="dark"] .dash-dropdown .Select-placeholder,
html[data-bs-theme="dark"] .dash-dropdown .Select-placeholder,
html[data-mantine-color-scheme="dark"] .dash-dropdown .Select-value,
html[data-bs-theme="dark"] .dash-dropdown .Select-value,
html[data-mantine-color-scheme="dark"] .dash-dropdown .Select-value-label,
html[data-bs-theme="dark"] .dash-dropdown .Select-value-label,
html[data-mantine-color-scheme="dark"] .dash-dropdown .Select-input > input,
html[data-bs-theme="dark"] .dash-dropdown .Select-input > input {
    color: var(--text-body) !important;
    -webkit-text-fill-color: var(--text-body) !important;
}
html[data-mantine-color-scheme="dark"] .dash-dropdown .Select-placeholder,
html[data-bs-theme="dark"] .dash-dropdown .Select-placeholder {
    color: var(--text-secondary) !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
}

html[data-mantine-color-scheme="dark"] .dash-dropdown .Select-menu-outer,
html[data-bs-theme="dark"] .dash-dropdown .Select-menu-outer,
html[data-mantine-color-scheme="dark"] .Select-menu-outer,
html[data-bs-theme="dark"] .Select-menu-outer {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
}

html[data-mantine-color-scheme="dark"] .dash-dropdown .Select-menu,
html[data-bs-theme="dark"] .dash-dropdown .Select-menu,
html[data-mantine-color-scheme="dark"] .dash-dropdown .Select-option,
html[data-bs-theme="dark"] .dash-dropdown .Select-option,
html[data-mantine-color-scheme="dark"] .dash-dropdown .VirtualizedSelectOption,
html[data-bs-theme="dark"] .dash-dropdown .VirtualizedSelectOption,
html[data-mantine-color-scheme="dark"] .Select-menu,
html[data-bs-theme="dark"] .Select-menu,
html[data-mantine-color-scheme="dark"] .Select-option,
html[data-bs-theme="dark"] .Select-option,
html[data-mantine-color-scheme="dark"] .VirtualizedSelectOption,
html[data-bs-theme="dark"] .VirtualizedSelectOption {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

html[data-mantine-color-scheme="dark"] .dash-dropdown .Select-option.is-focused,
html[data-bs-theme="dark"] .dash-dropdown .Select-option.is-focused,
html[data-mantine-color-scheme="dark"] .dash-dropdown .Select-option.is-selected,
html[data-bs-theme="dark"] .dash-dropdown .Select-option.is-selected,
html[data-mantine-color-scheme="dark"] .dash-dropdown .VirtualizedSelectFocusedOption,
html[data-bs-theme="dark"] .dash-dropdown .VirtualizedSelectFocusedOption,
html[data-mantine-color-scheme="dark"] .Select-option.is-focused,
html[data-bs-theme="dark"] .Select-option.is-focused,
html[data-mantine-color-scheme="dark"] .Select-option.is-selected,
html[data-bs-theme="dark"] .Select-option.is-selected,
html[data-mantine-color-scheme="dark"] .VirtualizedSelectFocusedOption,
html[data-bs-theme="dark"] .VirtualizedSelectFocusedOption {
    background: #263248 !important;
    background-color: #263248 !important;
    color: #f1f5f9 !important;
}

/* React Virtualized rows inside dcc.Dropdown can carry inline white backgrounds. */
html[data-mantine-color-scheme="dark"] .ReactVirtualized__Grid,
html[data-bs-theme="dark"] .ReactVirtualized__Grid,
html[data-mantine-color-scheme="dark"] .ReactVirtualized__Grid__innerScrollContainer,
html[data-bs-theme="dark"] .ReactVirtualized__Grid__innerScrollContainer {
    background: #1e293b !important;
    background-color: #1e293b !important;
}
html[data-mantine-color-scheme="dark"] .ReactVirtualized__Grid__innerScrollContainer > div,
html[data-bs-theme="dark"] .ReactVirtualized__Grid__innerScrollContainer > div {
    background: #1e293b !important;
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}
html[data-mantine-color-scheme="dark"] .ReactVirtualized__Grid__innerScrollContainer > div:hover,
html[data-bs-theme="dark"] .ReactVirtualized__Grid__innerScrollContainer > div:hover {
    background: #263248 !important;
    background-color: #263248 !important;
}

/* Historical map dark-mode fixes. */
[data-mantine-color-scheme="dark"] #hist-kv-filter,
[data-mantine-color-scheme="dark"] #hist-kv-filter label,
[data-mantine-color-scheme="dark"] #hist-kv-filter span,
[data-bs-theme="dark"] #hist-kv-filter,
[data-bs-theme="dark"] #hist-kv-filter label,
[data-bs-theme="dark"] #hist-kv-filter span {
    color: var(--text-body) !important;
}
[data-mantine-color-scheme="dark"] #hist-kv-filter input[type="checkbox"],
[data-bs-theme="dark"] #hist-kv-filter input[type="checkbox"] {
    accent-color: var(--bs-primary);
}

[data-mantine-color-scheme="dark"] #hist-binding-card,
[data-bs-theme="dark"] #hist-binding-card {
    background: rgba(30, 41, 59, 0.94) !important;
    color: var(--text-body) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
}
[data-mantine-color-scheme="dark"] #hist-binding-card .dash-table-container,
[data-mantine-color-scheme="dark"] #hist-binding-card .dash-spreadsheet-container,
[data-mantine-color-scheme="dark"] #hist-binding-card .dash-spreadsheet-inner,
[data-bs-theme="dark"] #hist-binding-card .dash-table-container,
[data-bs-theme="dark"] #hist-binding-card .dash-spreadsheet-container,
[data-bs-theme="dark"] #hist-binding-card .dash-spreadsheet-inner {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
}
[data-mantine-color-scheme="dark"] #hist-binding-card th,
[data-bs-theme="dark"] #hist-binding-card th {
    background-color: var(--surface2-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-mantine-color-scheme="dark"] #hist-binding-card td,
[data-bs-theme="dark"] #hist-binding-card td {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
    border-color: var(--border-color) !important;
}
[data-mantine-color-scheme="dark"] #hist-binding-card tr:hover td,
[data-bs-theme="dark"] #hist-binding-card tr:hover td {
    background-color: var(--surface2-bg) !important;
}

/* Historical bottom timeline card + Mantine slider colours. */
#hist-bottom-card {
    color: var(--text-body) !important;
}
#hist-bottom-card .mantine-Slider-markLabel,
#hist-bottom-card .mantine-Slider-label {
    color: var(--text-secondary) !important;
}
#hist-bottom-card .mantine-Slider-track::before {
    background-color: var(--border-color) !important;
}
#hist-bottom-card .mantine-Slider-bar,
#hist-bottom-card .mantine-Slider-thumb {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}
#hist-bottom-card input,
#hist-manual-timestep {
    background-color: var(--surface-bg) !important;
    color: var(--text-body) !important;
    border-color: var(--border-color) !important;
}
#hist-manual-timestep::placeholder {
    color: var(--text-secondary) !important;
    opacity: 1;
}

/* Constraint Summary AG Grid: readable theme-aware heatmap. */
.constraint-summary-ag-grid {
    --ag-font-family: Inter, system-ui, sans-serif;
    --ag-font-size: 13px;
    --ag-background-color: var(--surface-bg);
    --ag-header-background-color: var(--surface2-bg);
    --ag-foreground-color: var(--text-body);
    --ag-header-foreground-color: var(--text-primary);
    --ag-border-color: var(--border-color);
    --ag-row-hover-color: color-mix(in srgb, var(--bs-primary) 12%, transparent);
    --ag-selected-row-background-color: color-mix(in srgb, var(--bs-primary) 18%, transparent);
    --ag-odd-row-background-color: var(--grid-row-odd);
}
.constraint-summary-ag-grid .ag-header-cell-label {
    font-weight: 700;
}
.constraint-summary-ag-grid .cs-constraint-cell {
    color: var(--text-primary) !important;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.constraint-summary-ag-grid .cs-even-row .ag-cell:not(.cs-heat-0):not(.cs-heat-1):not(.cs-heat-2):not(.cs-heat-3):not(.cs-heat-4) {
    background-color: var(--surface-bg);
}
.constraint-summary-ag-grid .cs-odd-row .ag-cell:not(.cs-heat-0):not(.cs-heat-1):not(.cs-heat-2):not(.cs-heat-3):not(.cs-heat-4) {
    background-color: var(--grid-row-odd);
}
.constraint-summary-ag-grid .cs-heat-0 { background-color: rgba(240, 140, 0, 0.12) !important; color: var(--text-body) !important; }
.constraint-summary-ag-grid .cs-heat-1 { background-color: rgba(240, 140, 0, 0.24) !important; color: var(--text-body) !important; }
.constraint-summary-ag-grid .cs-heat-2 { background-color: rgba(240, 140, 0, 0.38) !important; color: var(--text-body) !important; }
.constraint-summary-ag-grid .cs-heat-3 { background-color: rgba(240, 140, 0, 0.56) !important; color: #111827 !important; font-weight: 600; }
.constraint-summary-ag-grid .cs-heat-4 { background-color: rgba(214, 80, 18, 0.82) !important; color: #ffffff !important; font-weight: 700; }

[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-heat-0 { background-color: rgba(240, 140, 0, 0.16) !important; color: #f1f5f9 !important; }
[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-heat-1 { background-color: rgba(240, 140, 0, 0.28) !important; color: #f1f5f9 !important; }
[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-heat-2 { background-color: rgba(240, 140, 0, 0.42) !important; color: #f8fafc !important; }
[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-heat-3 { background-color: rgba(240, 140, 0, 0.62) !important; color: #111827 !important; font-weight: 700; }
[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-heat-4 { background-color: rgba(214, 80, 18, 0.90) !important; color: #ffffff !important; font-weight: 800; }

/* Diverging diff heatmap: red = increase (more binding hours), blue = decrease */
.constraint-summary-ag-grid .cs-diff-up-0 { background-color: rgba(220, 38, 38, 0.14) !important; color: var(--text-body) !important; }
.constraint-summary-ag-grid .cs-diff-up-1 { background-color: rgba(220, 38, 38, 0.34) !important; color: var(--text-body) !important; }
.constraint-summary-ag-grid .cs-diff-up-2 { background-color: rgba(185, 28, 28, 0.78) !important; color: #ffffff !important; font-weight: 700; }
.constraint-summary-ag-grid .cs-diff-dn-0 { background-color: rgba(37, 99, 235, 0.14) !important; color: var(--text-body) !important; }
.constraint-summary-ag-grid .cs-diff-dn-1 { background-color: rgba(37, 99, 235, 0.34) !important; color: var(--text-body) !important; }
.constraint-summary-ag-grid .cs-diff-dn-2 { background-color: rgba(29, 78, 216, 0.78) !important; color: #ffffff !important; font-weight: 700; }

[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-diff-up-0 { background-color: rgba(248, 113, 113, 0.18) !important; color: #f1f5f9 !important; }
[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-diff-up-1 { background-color: rgba(248, 113, 113, 0.40) !important; color: #f8fafc !important; }
[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-diff-up-2 { background-color: rgba(220, 38, 38, 0.85) !important; color: #ffffff !important; font-weight: 700; }
[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-diff-dn-0 { background-color: rgba(96, 165, 250, 0.18) !important; color: #f1f5f9 !important; }
[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-diff-dn-1 { background-color: rgba(96, 165, 250, 0.40) !important; color: #f8fafc !important; }
[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-diff-dn-2 { background-color: rgba(37, 99, 235, 0.85) !important; color: #ffffff !important; font-weight: 700; }

/* Combined coefficient view: one row per element+constraint+property, tinted by
   which side of the constraint it loads, so generation and load rows for the same
   element are told apart without reading the Coefficient column. Pump load shares
   the load tint (same side, different PLEXOS property) and stays identifiable by
   its Coefficient label. Deliberately lighter than the heatmap shades above —
   these mark a category, not a magnitude. */
.constraint-summary-ag-grid .cs-coeff-gen { background-color: rgba(240, 140, 0, 0.14) !important; color: var(--text-body) !important; }
.constraint-summary-ag-grid .cs-coeff-load { background-color: rgba(37, 99, 235, 0.14) !important; color: var(--text-body) !important; }

[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-coeff-gen { background-color: rgba(240, 140, 0, 0.20) !important; color: #f1f5f9 !important; }
[data-mantine-color-scheme="dark"] .constraint-summary-ag-grid .cs-coeff-load { background-color: rgba(96, 165, 250, 0.22) !important; color: #f1f5f9 !important; }

/* Coefficient highlight: remembered "units of interest" that aren't present in
   the current constraint stay in the box as disabled pills, struck through and
   muted, so the selection survives constraint switches without re-setup.
   Mantine renders a disabled value's pill without a remove button rather than
   tagging it data-disabled, so we target pills that have no remove button. */
.coeff-highlight-select .mantine-Pill-root:not(:has(.mantine-Pill-remove)) {
    text-decoration: line-through;
    color: var(--mantine-color-red-7, #c92a2a) !important;
    background-color: rgba(201, 42, 42, 0.10) !important;
    opacity: 1;
}
[data-mantine-color-scheme="dark"] .coeff-highlight-select .mantine-Pill-root:not(:has(.mantine-Pill-remove)) {
    color: var(--mantine-color-red-4, #ff8787) !important;
    background-color: rgba(255, 135, 135, 0.16) !important;
}

/* Right-side drawer (fault-level workspace): border on the map-facing edge, not the viewport edge. */
#fault-drawer .mantine-Drawer-content,
#fault-drawer .mantine-Drawer-body {
    border-right: 0 !important;
}
#fault-drawer .mantine-Drawer-content {
    border-left: 1px solid var(--border-color) !important;
}