/* ============================================================
   PsychoBerlin – Dark Mode
   Automatic via prefers-color-scheme + manual via data-theme
   Material Design 3 dark surface system
   ============================================================ */

/* ── Dark mode token overrides ────────────────────────────── */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Colors (M3 Dark) */
        --md-sys-color-primary: #B8BBCF;
        --md-sys-color-on-primary: #1A1C2E;
        --md-sys-color-primary-container: #33354A;
        --md-sys-color-on-primary-container: #D8D9E8;

        --md-sys-color-accent: #E85A9E;
        --md-sys-color-on-accent: #FFFFFF;
        --md-sys-color-accent-container: #4A1A32;
        --md-sys-color-on-accent-container: #FFD6E8;

        --md-sys-color-secondary: #9DA1BB;
        --md-sys-color-on-secondary: #1A1C2E;
        --md-sys-color-secondary-container: #3A3C50;
        --md-sys-color-on-secondary-container: #D8D9E8;

        --md-sys-color-tertiary: #FFD06B;
        --md-sys-color-on-tertiary: #271900;
        --md-sys-color-tertiary-container: #3D2E00;
        --md-sys-color-on-tertiary-container: #FFDEA6;

        --md-sys-color-error: #F28B82;
        --md-sys-color-on-error: #601410;
        --md-sys-color-error-container: #8C1D18;
        --md-sys-color-on-error-container: #FFDAD6;

        --md-sys-color-warning: #FFBF70;
        --md-sys-color-on-warning: #3E2800;

        --md-sys-color-success: #6DD58C;
        --md-sys-color-on-success: #0D3A1A;
        --md-sys-color-success-container: #1A5C2E;

        --md-sys-color-surface: #121212;
        --md-sys-color-on-surface: #E6E6E6;
        --md-sys-color-on-surface-variant: #B0B0B0;

        --md-sys-color-surface-container-lowest: #0D0D0D;
        --md-sys-color-surface-container-low: #1E1E1E;
        --md-sys-color-surface-container: #1E1E1E;
        --md-sys-color-surface-container-high: #2C2C2C;
        --md-sys-color-surface-container-highest: #383838;

        --md-sys-color-outline: #444444;
        --md-sys-color-outline-variant: #555555;
        --md-sys-color-inverse-surface: #E6E6E6;
        --md-sys-color-inverse-on-surface: #1A1A1A;

        --md-sys-color-scrim: rgba(0, 0, 0, 0.60);

        /* Elevation – lighter overlays on dark surfaces */
        --md-sys-elevation-0: none;
        --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.24);
        --md-sys-elevation-2: 0 4px 6px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.22);
        --md-sys-elevation-3: 0 10px 15px rgba(0,0,0,0.26), 0 4px 6px rgba(0,0,0,0.20);
        --md-sys-elevation-4: 0 20px 25px rgba(0,0,0,0.24), 0 8px 10px rgba(0,0,0,0.18);
        --md-sys-elevation-5: 0 25px 50px rgba(0,0,0,0.32);
    }
}

/* ── Manual toggle via data-theme ─────────────────────────── */
[data-theme="dark"] {
    /* Colors (M3 Dark) */
    --md-sys-color-primary: #B8BBCF;
    --md-sys-color-on-primary: #1A1C2E;
    --md-sys-color-primary-container: #33354A;
    --md-sys-color-on-primary-container: #D8D9E8;

    --md-sys-color-accent: #E85A9E;
    --md-sys-color-on-accent: #FFFFFF;
    --md-sys-color-accent-container: #4A1A32;
    --md-sys-color-on-accent-container: #FFD6E8;

    --md-sys-color-secondary: #9DA1BB;
    --md-sys-color-on-secondary: #1A1C2E;
    --md-sys-color-secondary-container: #3A3C50;
    --md-sys-color-on-secondary-container: #D8D9E8;

    --md-sys-color-tertiary: #FFD06B;
    --md-sys-color-on-tertiary: #271900;
    --md-sys-color-tertiary-container: #3D2E00;
    --md-sys-color-on-tertiary-container: #FFDEA6;

    --md-sys-color-error: #F28B82;
    --md-sys-color-on-error: #601410;
    --md-sys-color-error-container: #8C1D18;
    --md-sys-color-on-error-container: #FFDAD6;

    --md-sys-color-warning: #FFBF70;
    --md-sys-color-on-warning: #3E2800;

    --md-sys-color-success: #6DD58C;
    --md-sys-color-on-success: #0D3A1A;
    --md-sys-color-success-container: #1A5C2E;

    --md-sys-color-surface: #121212;
    --md-sys-color-on-surface: #E6E6E6;
    --md-sys-color-on-surface-variant: #B0B0B0;

    --md-sys-color-surface-container-lowest: #0D0D0D;
    --md-sys-color-surface-container-low: #1E1E1E;
    --md-sys-color-surface-container: #1E1E1E;
    --md-sys-color-surface-container-high: #2C2C2C;
    --md-sys-color-surface-container-highest: #383838;

    --md-sys-color-outline: #444444;
    --md-sys-color-outline-variant: #555555;
    --md-sys-color-inverse-surface: #E6E6E6;
    --md-sys-color-inverse-on-surface: #1A1A1A;

    --md-sys-color-scrim: rgba(0, 0, 0, 0.60);

    /* Elevation – lighter overlays on dark surfaces */
    --md-sys-elevation-0: none;
    --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.24);
    --md-sys-elevation-2: 0 4px 6px rgba(0,0,0,0.28), 0 2px 4px rgba(0,0,0,0.22);
    --md-sys-elevation-3: 0 10px 15px rgba(0,0,0,0.26), 0 4px 6px rgba(0,0,0,0.20);
    --md-sys-elevation-4: 0 20px 25px rgba(0,0,0,0.24), 0 8px 10px rgba(0,0,0,0.18);
    --md-sys-elevation-5: 0 25px 50px rgba(0,0,0,0.32);
}

/* ── Smooth theme transition ──────────────────────────────── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ── Element-level dark overrides ─────────────────────────── */

/* Images and maps get slightly reduced brightness */
[data-theme="dark"] img:not([src*="logo"]) {
    filter: brightness(0.9);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) img:not([src*="logo"]) {
        filter: brightness(0.9);
    }
}

/* Leaflet map tile inversion for dark backgrounds */
[data-theme="dark"] .leaflet-tile {
    filter: brightness(0.8) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .leaflet-tile {
        filter: brightness(0.8) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7);
    }
}

/* Leaflet controls */
[data-theme="dark"] .leaflet-control-zoom a,
[data-theme="dark"] .leaflet-control-layers,
[data-theme="dark"] .leaflet-bar a {
    background-color: #2C2C2C;
    color: #E6E6E6;
    border-color: #444444;
}

[data-theme="dark"] .leaflet-control-zoom a:hover,
[data-theme="dark"] .leaflet-bar a:hover {
    background-color: #383838;
}

[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
    background-color: #2C2C2C;
    color: #E6E6E6;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .leaflet-control-zoom a,
    :root:not([data-theme="light"]) .leaflet-control-layers,
    :root:not([data-theme="light"]) .leaflet-bar a {
        background-color: #2C2C2C;
        color: #E6E6E6;
        border-color: #444444;
    }

    :root:not([data-theme="light"]) .leaflet-control-zoom a:hover,
    :root:not([data-theme="light"]) .leaflet-bar a:hover {
        background-color: #383838;
    }

    :root:not([data-theme="light"]) .leaflet-popup-content-wrapper,
    :root:not([data-theme="light"]) .leaflet-popup-tip {
        background-color: #2C2C2C;
        color: #E6E6E6;
    }
}

/* Better link colors for dark mode */
[data-theme="dark"] a {
    color: #8AB4F8;
}

[data-theme="dark"] a:hover {
    color: #AECBFA;
}

[data-theme="dark"] a:visited {
    color: #C58AF9;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) a {
        color: #8AB4F8;
    }

    :root:not([data-theme="light"]) a:hover {
        color: #AECBFA;
    }

    :root:not([data-theme="light"]) a:visited {
        color: #C58AF9;
    }
}

/* Accent-colored links keep their accent color */
[data-theme="dark"] .btn-accent,
[data-theme="dark"] .header-logo,
[data-theme="dark"] .nav-desktop a,
[data-theme="dark"] .nav-mobile a {
    color: inherit;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .btn-accent,
    :root:not([data-theme="light"]) .header-logo,
    :root:not([data-theme="light"]) .nav-desktop a,
    :root:not([data-theme="light"]) .nav-mobile a {
        color: inherit;
    }
}

/* Adjusted badge colors */
[data-theme="dark"] .badge-success {
    background-color: var(--md-sys-color-success-container);
    color: #6DD58C;
}

[data-theme="dark"] .badge-warning {
    background-color: #3E2800;
    color: var(--md-sys-color-warning);
}

[data-theme="dark"] .badge-error {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-error);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .badge-success {
        background-color: var(--md-sys-color-success-container);
        color: #6DD58C;
    }

    :root:not([data-theme="light"]) .badge-warning {
        background-color: #3E2800;
        color: var(--md-sys-color-warning);
    }

    :root:not([data-theme="light"]) .badge-error {
        background-color: var(--md-sys-color-error-container);
        color: var(--md-sys-color-error);
    }
}

/* Card shadows use lighter opacity for dark surfaces */
[data-theme="dark"] .card,
[data-theme="dark"] .provider-card,
[data-theme="dark"] .result-card {
    background-color: var(--md-sys-color-surface-container-high);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
    border-color: var(--md-sys-color-outline);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .card,
    :root:not([data-theme="light"]) .provider-card,
    :root:not([data-theme="light"]) .result-card {
        background-color: var(--md-sys-color-surface-container-high);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.40);
        border-color: var(--md-sys-color-outline);
    }
}

/* Form inputs */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--md-sys-color-surface-container-high);
    color: var(--md-sys-color-on-surface);
    border-color: var(--md-sys-color-outline);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--md-sys-color-accent);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) input,
    :root:not([data-theme="light"]) select,
    :root:not([data-theme="light"]) textarea {
        background-color: var(--md-sys-color-surface-container-high);
        color: var(--md-sys-color-on-surface);
        border-color: var(--md-sys-color-outline);
    }

    :root:not([data-theme="light"]) input:focus,
    :root:not([data-theme="light"]) select:focus,
    :root:not([data-theme="light"]) textarea:focus {
        border-color: var(--md-sys-color-accent);
    }
}

/* Header and footer */
[data-theme="dark"] .site-header {
    background-color: var(--md-sys-color-surface-container-low);
    border-bottom-color: var(--md-sys-color-outline);
}

[data-theme="dark"] .site-footer {
    background-color: var(--md-sys-color-surface-container-lowest);
    border-top-color: var(--md-sys-color-outline);
}

[data-theme="dark"] .nav-mobile {
    background-color: var(--md-sys-color-surface-container-low);
    border-top-color: var(--md-sys-color-outline);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .site-header {
        background-color: var(--md-sys-color-surface-container-low);
        border-bottom-color: var(--md-sys-color-outline);
    }

    :root:not([data-theme="light"]) .site-footer {
        background-color: var(--md-sys-color-surface-container-lowest);
        border-top-color: var(--md-sys-color-outline);
    }

    :root:not([data-theme="light"]) .nav-mobile {
        background-color: var(--md-sys-color-surface-container-low);
        border-top-color: var(--md-sys-color-outline);
    }
}

/* Crisis banner and alert */
[data-theme="dark"] .crisis-banner {
    background-color: #3D1A1A;
    border-color: var(--md-sys-color-error);
}

[data-theme="dark"] .crisis-alert {
    background-color: var(--md-sys-color-surface-container-high);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.50);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .crisis-banner {
        background-color: #3D1A1A;
        border-color: var(--md-sys-color-error);
    }

    :root:not([data-theme="light"]) .crisis-alert {
        background-color: var(--md-sys-color-surface-container-high);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.50);
    }
}

/* Cookie banner */
[data-theme="dark"] .cookie-banner {
    background-color: var(--md-sys-color-surface-container-high);
    border-top-color: var(--md-sys-color-outline);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cookie-banner {
        background-color: var(--md-sys-color-surface-container-high);
        border-top-color: var(--md-sys-color-outline);
    }
}

/* Self-test wizard options */
[data-theme="dark"] .wizard-option {
    background-color: var(--md-sys-color-surface-container-high);
    border-color: var(--md-sys-color-outline);
}

[data-theme="dark"] .wizard-option:hover {
    background-color: var(--md-sys-color-surface-container-highest);
}

[data-theme="dark"] .wizard-option.selected {
    border-color: var(--md-sys-color-accent);
    background-color: var(--md-sys-color-accent-container);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wizard-option {
        background-color: var(--md-sys-color-surface-container-high);
        border-color: var(--md-sys-color-outline);
    }

    :root:not([data-theme="light"]) .wizard-option:hover {
        background-color: var(--md-sys-color-surface-container-highest);
    }

    :root:not([data-theme="light"]) .wizard-option.selected {
        border-color: var(--md-sys-color-accent);
        background-color: var(--md-sys-color-accent-container);
    }
}

/* Flash messages */
[data-theme="dark"] .flash {
    border-color: var(--md-sys-color-outline);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .flash {
        border-color: var(--md-sys-color-outline);
    }
}

/* Theme toggle button */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: var(--md-sys-shape-corner-full);
    background: transparent;
    color: var(--md-sys-color-on-surface);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.theme-toggle:hover {
    background-color: var(--md-sys-color-surface-container-high);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--md-sys-color-accent);
    outline-offset: 2px;
}

.theme-toggle .material-symbols-outlined {
    font-size: 22px;
}

/* Map custom controls */
.map-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: var(--md-sys-color-surface-container, #fff);
    color: var(--md-sys-color-on-surface, #333);
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
}

.map-control-btn:hover {
    background: var(--md-sys-color-surface-container-high, #f4f4f4);
}

.map-control-btn.active {
    background: var(--md-sys-color-accent);
    color: var(--md-sys-color-on-accent);
}

/* District boundary legend */
.district-legend {
    background: var(--md-sys-color-surface-container, #fff);
    padding: 8px 12px;
    border-radius: 4px;
    box-shadow: var(--md-sys-elevation-2);
    font-size: var(--md-sys-typescale-body-small-size);
    max-height: 200px;
    overflow-y: auto;
}

.district-legend h4 {
    margin: 0 0 6px;
    font-size: var(--md-sys-typescale-label-large-size);
}

.district-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
}

.district-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Toggle switch dark mode */
[data-theme="dark"] .toggle input {
    background: var(--md-sys-color-surface-container-highest);
}

[data-theme="dark"] .toggle input::after {
    background: #ccc;
}

[data-theme="dark"] .toggle input:checked::after {
    background: #fff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .toggle input {
        background: var(--md-sys-color-surface-container-highest);
    }
    :root:not([data-theme="light"]) .toggle input::after {
        background: #ccc;
    }
    :root:not([data-theme="light"]) .toggle input:checked::after {
        background: #fff;
    }
}

/* Tabs dark mode */
[data-theme="dark"] .tabs {
    border-bottom-color: var(--md-sys-color-outline);
}

[data-theme="dark"] .tab {
    color: var(--md-sys-color-on-surface-variant);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tabs {
        border-bottom-color: var(--md-sys-color-outline);
    }
    :root:not([data-theme="light"]) .tab {
        color: var(--md-sys-color-on-surface-variant);
    }
}

/* Danger zone dark mode */
[data-theme="dark"] .danger-zone {
    border-color: var(--md-sys-color-error);
    background-color: rgba(244, 67, 54, 0.08);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .danger-zone {
        border-color: var(--md-sys-color-error);
        background-color: rgba(244, 67, 54, 0.08);
    }
}

/* Nav drawer dark mode */
[data-theme="dark"] .nav-drawer {
    background: var(--md-sys-color-surface-container-low);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .nav-drawer {
        background: var(--md-sys-color-surface-container-low);
    }
}