/*
  Themalaag: semantische tokens voor licht en donker.

  Werking
  -------
  - `html[data-theme="light"|"dark"]` wordt vóór het schilderen gezet door de
    inline snippet in base.html (zie ook static/theme.js). Naast onze eigen
    tokens zetten we `data-bs-theme`, zodat Bootstrap 5.3 zijn eigen componenten
    (modals, dropdowns, tabellen, formulieren) meeneemt.
  - Paginastijlen verwijzen naar de semantische tokens hieronder in plaats van
    naar vaste kleuren. Alleen dit bestand kent de daadwerkelijke kleurwaarden.
  - Dit bestand wordt als laatste stylesheet geladen, zodat de dark-overrides
    winnen van eerder gedefinieerde `:root`-waarden.
*/

:root {
    /* Oppervlakken */
    --surface: #fff;            /* kaarten, panelen, header */
    --surface-2: #f8f9fa;       /* subtiele rijen, tabelkoppen */
    --surface-3: #eef2f7;       /* hover, verzonken vlakken */
    --surface-inset: #f5f8fb;   /* invoervelden, code, lijstjes */
    --app-bg: #f4f6f8;          /* paginaachtergrond */

    /* Tekst */
    --text: #093855;
    --text-soft: #4a5a6a;
    --text-muted: #6c757d;
    --text-inverse: #fff;

    /* Randen en schaduw */
    --border: #dce4eb;
    --border-soft: rgba(9, 56, 85, 0.08);
    --border-strong: rgba(9, 56, 85, 0.2);
    --overlay: rgba(9, 56, 85, 0.5);
    --shadow-sm: 0 2px 6px rgba(9, 56, 85, 0.08);
    --shadow-md: 0 8px 20px rgba(9, 56, 85, 0.12);
    --shadow-lg: 0 20px 45px rgba(9, 56, 85, 0.18);

    /* Statusvlakken (zachte achtergrond + leesbare tekst) */
    --state-success: #16653e;
    --state-success-bg: #e9f5ee;
    --state-warning: #8e4b0c;
    --state-warning-bg: #fff1dd;
    --state-danger: #ac2734;
    --state-danger-bg: #fdecef;
    --state-info: #195a99;
    --state-info-bg: #eaf2fc;
    --state-neutral: #56616c;
    --state-neutral-bg: #edf0f3;

    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --surface: #1a222b;
    --surface-2: #212b35;
    --surface-3: #2a3641;
    --surface-inset: #151d25;
    --app-bg: #10161c;

    --text: #e3ebf2;
    --text-soft: #b7c5d1;
    --text-muted: #93a3b1;
    --text-inverse: #fff;

    --border: #33414e;
    --border-soft: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.2);
    --overlay: rgba(4, 9, 14, 0.72);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.55);

    --state-success: #6ddb9c;
    --state-success-bg: #16311f;
    --state-warning: #f0b45f;
    --state-warning-bg: #362512;
    --state-danger: #f58a95;
    --state-danger-bg: #3a1a1f;
    --state-info: #7cb8f0;
    --state-info-bg: #142a3f;
    --state-neutral: #a7b3bf;
    --state-neutral-bg: #232d37;

    /* Merkkleuren: iets minder verzadigd zodat ze niet gloeien op donker. */
    --brand-green: #5cc047;
    --brand-green-dark: #47a138;
    --brand-blue: #4aa3e0;
    --brand-blue-dark: #3a86bd;
    --brand-yellow: #e8d24a;
    --brand-light-yellow: #37331a;
    --brand-orange: #ff9f68;
    --brand-soft-orange: #3a2519;
    --brand-light-green: #1b3324;
    --brand-light-blue: #16293a;
    --brand-stone: var(--surface-2);
    --brand-bg: var(--app-bg);

    /* `--brand-navy` blijft een dónkere kleur: hij wordt op veel plekken als
       achtergrond gebruikt (topnav, primaire knoppen, chips). Tekst gebruikt
       `--text`. */
    --brand-navy: #0c1a26;

    --color-brand-danger: #e2645c;
    --color-success: #4cae7a;

    --gray-50: var(--app-bg);
    --gray-100: var(--surface-2);
    --gray-200: var(--surface-3);
    --gray-300: #3d4b58;
    --gray-400: #566572;
    --gray-500: #7c8a97;
    --gray-600: var(--text-muted);
    --gray-700: var(--text-soft);
    --gray-800: #cfd9e2;
    --gray-900: var(--text);

    --shadow-card: var(--shadow-md);
    --shadow-card-hover: var(--shadow-lg);
    --shadow-panel: var(--shadow-lg);
    --elevation-sm: var(--shadow-sm);
    --elevation-md: var(--shadow-md);
    --elevation-lg: var(--shadow-lg);
    --focus-ring: 0 0 0 3px rgba(122, 184, 240, 0.45);

    /* Fleet-shell tokens */
    --fleet-surface: var(--surface);
    --fleet-border: var(--border);
    --fleet-muted: var(--text-muted);
    --fleet-ready: var(--state-success);
    --fleet-ready-bg: var(--state-success-bg);
    --fleet-attention: var(--state-warning);
    --fleet-attention-bg: var(--state-warning-bg);
    --fleet-blocked: var(--state-danger);
    --fleet-blocked-bg: var(--state-danger-bg);
    --fleet-active: var(--state-info);
    --fleet-active-bg: var(--state-info-bg);
    --fleet-idle: var(--state-neutral);
    --fleet-idle-bg: var(--state-neutral-bg);
}

/* ── Bootstrap-afstemming ────────────────────────────────────────────────── */
html[data-theme="dark"] body {
    background: var(--app-bg);
    color: var(--text);
}

html[data-theme="dark"] {
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-secondary-color: var(--text-muted);
    --bs-emphasis-color: var(--text);
}

html[data-theme="dark"] :is(.card, .modal-content, .dropdown-menu, .list-group-item, .offcanvas, .accordion-item) {
    --bs-card-bg: var(--surface);
    --bs-modal-bg: var(--surface);
    --bs-dropdown-bg: var(--surface);
    --bs-list-group-bg: var(--surface);
    --bs-accordion-bg: var(--surface);
    --bs-border-color: var(--border);
}

html[data-theme="dark"] :is(.card-header, .card-footer, .modal-header, .modal-footer, .table > thead) {
    --bs-card-cap-bg: var(--surface-2);
    background-color: var(--surface-2);
}

html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-striped-bg: var(--surface-2);
    --bs-table-hover-bg: var(--surface-3);
    --bs-table-border-color: var(--border);
}

html[data-theme="dark"] :is(.form-control, .form-select, input, select, textarea):not(.form-check-input) {
    background-color: var(--surface-inset);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] :is(.form-control, .form-select):focus {
    background-color: var(--surface-inset);
    color: var(--text);
}

html[data-theme="dark"] :is(input, textarea)::placeholder {
    color: var(--text-muted);
}

/* Bootstrap tekent pijltjes en vinkjes als donkere SVG's; op donker onzichtbaar. */
html[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2393a3b1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

html[data-theme="dark"] :is(.alert-success, .alert-info, .alert-warning, .alert-danger, .alert-secondary, .alert-primary, .alert-light) {
    background-color: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] .alert-success { border-left: 3px solid var(--state-success); }
html[data-theme="dark"] .alert-danger { border-left: 3px solid var(--state-danger); }
html[data-theme="dark"] .alert-warning { border-left: 3px solid var(--state-warning); }
html[data-theme="dark"] .alert-info { border-left: 3px solid var(--state-info); }

html[data-theme="dark"] :is(.text-muted, .text-secondary, .form-text, small.text-muted) {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] :is(.bg-white, .bg-light) {
    background-color: var(--surface) !important;
    color: var(--text);
}

html[data-theme="dark"] .text-dark { color: var(--text) !important; }

html[data-theme="dark"] :is(.btn-outline-secondary, .btn-outline-dark) {
    --bs-btn-color: var(--text-soft);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-bg: var(--surface-3);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-border-color: var(--border-strong);
}

html[data-theme="dark"] .btn-light {
    --bs-btn-bg: var(--surface-2);
    --bs-btn-border-color: var(--border);
    --bs-btn-color: var(--text);
    --bs-btn-hover-bg: var(--surface-3);
    --bs-btn-hover-color: var(--text);
}

html[data-theme="dark"] .btn-secondary {
    --bs-btn-bg: var(--surface-3);
    --bs-btn-border-color: var(--border);
    --bs-btn-color: var(--text);
    --bs-btn-hover-bg: #35434f;
    --bs-btn-hover-color: var(--text);
}

/* ── Eigen componenten die zwaar op wit leunen ───────────────────────────── */
html[data-theme="dark"] .fleet-header,
html[data-theme="dark"] .fleet-app .app-topnav {
    background: var(--surface);
    border-bottom-color: var(--border);
}

html[data-theme="dark"] .fleet-wordmark__logo,
html[data-theme="dark"] .fleet-app .app-topnav__logo {
    filter: brightness(0) invert(1);
}

html[data-theme="dark"] .app-topnav:not(.fleet-app .app-topnav) {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

html[data-theme="dark"] .app-topnav__title { color: var(--text-muted); }
html[data-theme="dark"] .app-topnav__tab { color: var(--text-muted); }
html[data-theme="dark"] .app-topnav__tab:hover,
html[data-theme="dark"] .app-topnav__tab--active { color: var(--text); background: var(--surface-3); }

html[data-theme="dark"] .brand-surface,
html[data-theme="dark"] .brand-card { background: var(--surface); }
html[data-theme="dark"] .brand-text-muted { color: var(--text-muted); }
html[data-theme="dark"] .brand-bg-text-navy { background: var(--surface-3); color: var(--text); }

/* Kaartweergaves (Google Maps) houden hun eigen lichte tegels; de omringende
   panelen zijn wel donker, dus geven we de kaart een subtiele demping. */
html[data-theme="dark"] :is(#map, .map-canvas, .gm-style) {
    filter: brightness(0.86) contrast(1.04);
}

/* ── Afdrukken blijft altijd licht ───────────────────────────────────────── */
@media print {
    html[data-theme="dark"] {
        color-scheme: light;
        --surface: #fff;
        --surface-2: #f8f9fa;
        --surface-3: #eef2f7;
        --surface-inset: #f5f8fb;
        --app-bg: #fff;
        --text: #093855;
        --text-soft: #4a5a6a;
        --text-muted: #6c757d;
        --border: #dce4eb;
        --border-soft: rgba(9, 56, 85, 0.08);
        --border-strong: rgba(9, 56, 85, 0.2);
    }
    html[data-theme="dark"] body { background: #fff; color: #093855; }
    html[data-theme="dark"] :is(#map, .map-canvas, .gm-style) { filter: none; }
}

/* ── Themakiezer ─────────────────────────────────────────────────────────── */
.theme-switch {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
}

.theme-switch__option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
}

.theme-switch__option:hover { color: var(--text); }

.theme-switch__option[aria-pressed="true"] {
    background: var(--state-info-bg);
    color: var(--state-info);
}

.theme-switch__option i { font-size: .85rem; }
.theme-switch--compact .theme-switch__option { padding: 6px 10px; }

/* Compacte variant in het accountmenu. */
.dropdown-menu .theme-switch { width: 100%; justify-content: space-between; }
.dropdown-menu .theme-switch__option { flex: 1; justify-content: center; }

/* Op de navy topnav (schermen zonder Fleet-shell) staat de kiezer op donker. */
.app-topnav .theme-switch { background: transparent; border-color: rgba(255, 255, 255, .25); }
.app-topnav .theme-switch__option { color: rgba(255, 255, 255, .7); }
.app-topnav .theme-switch__option:hover { color: #fff; }
.app-topnav .theme-switch__option[aria-pressed="true"] { background: rgba(255, 255, 255, .18); color: #fff; }

/* In de Fleet-shell is die balk juist licht; daar geldt de standaardstijl. */
.fleet-app .app-topnav .theme-switch { background: var(--surface-2); border-color: var(--border); }
.fleet-app .app-topnav .theme-switch__option { color: var(--text-muted); }
.fleet-app .app-topnav .theme-switch__option:hover { color: var(--text); }
.fleet-app .app-topnav .theme-switch__option[aria-pressed="true"] { background: var(--state-info-bg); color: var(--state-info); }

.theme-switch-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

.theme-switch-row > span {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

/* Links in tabellen: de blauwe onderstreepte standaardlink maakt een lijst met veel
   verwijzingen onrustig. Een cel-link leest als gewone tekst en laat pas bij hover
   zien dat er iets achter zit. */
.cel-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.cel-link:hover,
.cel-link:focus-visible {
    color: var(--state-info, #0b5ed7);
    border-bottom-color: currentColor;
}