/**
 * TEMPES-huisstijl bovenop Tabler 1.6.1 (@tabler/core): de enige plek voor merk- en themakleuren.
 *
 * Laden direct NA tabler.min.css en VOOR app-overrides.css / sidebar-overrides.css /
 * mobile-overrides.css (layouts/tabler.blade.php).
 *
 * Hoe Tabler 1.6.1 kleurt:
 * - Knoppen, links, focusring, vinkjes, .bg-primary/.text-primary, de -lt/-subtle-varianten en
 *   actieve navigatie lezen var(--tblr-primary) in de browser (color-mix, oklch(from ...)).
 * - Afgeleide tokens (-darken, -lt, linkkleur, focusring) staan bij Tabler op :root. Zet merkwaarden
 *   daarom ook op :root en niet op een dieper element, anders lopen ze uit de pas.
 * - Donker = color-scheme: dark op [data-bs-theme="dark"]; kleurtokens zijn light-dark(licht, donker).
 *   Waarden die per modus verschillen staan hier daarom als light-dark(). Dat werkt meteen voor de
 *   altijd-donkere zijbalk (<aside data-bs-theme="dark">) en voor de donkere modus (Licht/Donker/Systeem in de
 *   topbalk; donker = data-bs-theme="dark" op <html>). Eigen CSS kiest per modus met light-dark(licht, donker),
 *   waarbij de lichte waarde exact de oude waarde is.
 *
 * Browsergrens: Tabler 1.6.1 heeft light-dark(), color-mix() en oklch() nodig
 * (Safari/iOS 17.5+, Chrome/Edge 123+, Firefox 128+). Oudere browsers krijgen de melding onderaan.
 */

:root {
    /* ---- 1. Merk ----
       UI-kleur #167cc4 (AGENTS.md). Logo, favicon en e-mails gebruiken #137dc5; dat verschil is
       niet te zien (oklch-lichtheid 56.9% tegen 57.2%). */
    --tempes-brand-500: #167cc4; /* hoofdkleur: knoppen, kaart- en modalkoppen (.bg-brand) */
    --tempes-brand-600: #1367a3; /* hover en ingedrukt */
    --tempes-brand-800: #0c4574; /* diepste tint, merkpaneel naast het inlogscherm */
    --tempes-brand-rgb: 22, 124, 196; /* = #167cc4, voor rgba() */
    /* Merk als TEKSTKLEUR op een vlak (.text-brand, actieve tab, links en iconen op kaarten). Licht = 500
       (4.45:1 op wit). Donker: 500 haalt op de donkere kaart (gray-800 #1e293b) maar 3.3:1; 40% wit erdoor
       (#7fb1de, gelijk aan Tablers donkere linkkleur) geeft 6.4:1 op de kaart en 7.9:1 op de pagina (gray-900).
       Vlakken met witte tekst (knoppen, .bg-brand, randen, focusring) blijven op --tempes-brand-500. */
    --tempes-brand-text: light-dark(var(--tempes-brand-500), color-mix(in oklab, var(--tblr-white) 40%, var(--tempes-brand-500)));

    /* ---- 2. Tabler-primary = merk (licht en donker gelijk, zoals Tablers eigen blauw) ---- */
    --tblr-brand: var(--tempes-brand-500);
    --tblr-primary: var(--tempes-brand-500);
    /* Tekst op primary. Tabler neemt --tblr-light (#fafafa); wit is de huidige knoptekst (4.45:1). */
    --tblr-primary-fg: var(--tblr-white);
    /* Hover en ingedrukt van .btn-primary/-outline/-ghost. Tabler rekent oklch(from primary l-0.06) = #006aac. */
    --tblr-primary-darken: var(--tempes-brand-600);
    /* Tabler 1.6 leest deze niet meer, maar eigen CSS gebruikt nog rgba(var(--tblr-primary-rgb), ...).
       Zonder deze regel geldt Tablers vaste 6, 111, 209 (oud Tabler-blauw). */
    --tblr-primary-rgb: var(--tempes-brand-rgb);
    /* De linkkleur leidt Tabler zelf af van --tblr-primary (licht = primary, donker = 40% wit erdoor).
       Alleen de hover in licht houden we op 600; donker blijft Tablers eigen menging. */
    --tblr-link-hover-color: light-dark(var(--tempes-brand-600), color-mix(in oklab, var(--tblr-white) 20%, var(--tblr-link-color)));
    /* Let op bij light-dark(): de keuze valt per element op zijn eigen color-scheme. Binnen de altijd-donkere
       zijbalk geeft light-dark() dus ook in de lichte modus de donkere waarde; daar vaste waarden houden.
       Voordeel: bij afdrukken zet Tabler color-scheme: light, zodat light-dark() vanzelf licht afdrukt (een regel
       met html[data-bs-theme=dark] doet dat niet). */

    /* ---- 3. Grijstinten: Tablers basis "slate" ----
       Zelfde waarden als tabler-themes.css [data-bs-theme-base="slate"] (= Tailwind slate), zonder dat
       bestand te laden. Houdt de blauwgrijze toon van beta24 (donkere zijbalk = gray-800 #1e293b) en
       past bij de #f8fafc-voorverf in de layout. */
    --tblr-gray-50: oklch(98.42% 0.0034 247.86deg); /* #f8fafc: pagina-achtergrond licht */
    --tblr-gray-100: oklch(96.83% 0.0069 247.9deg); /* #f1f5f9 */
    --tblr-gray-200: oklch(92.88% 0.0126 255.51deg); /* #e2e8f0: randen licht */
    --tblr-gray-300: oklch(86.9% 0.0198 252.89deg); /* #cbd5e1 */
    --tblr-gray-400: oklch(71.07% 0.0351 256.79deg); /* #94a3b8 */
    --tblr-gray-500: oklch(55.44% 0.0407 257.42deg); /* #64748b: secundaire tekst licht */
    --tblr-gray-600: oklch(44.55% 0.0374 257.28deg); /* #475569 */
    --tblr-gray-700: oklch(37.17% 0.0392 257.29deg); /* #334155: bodytekst licht */
    --tblr-gray-800: oklch(27.95% 0.0368 260.03deg); /* #1e293b: zijbalk */
    --tblr-gray-900: oklch(20.77% 0.0398 265.75deg); /* #0f172a */
    --tblr-gray-950: oklch(12.88% 0.0406 264.7deg); /* #020617 */
    /* .text-muted en de grijze breadcrumb/voettekst: Tabler zet --tblr-muted vast op een neutraal grijs (#737373), ook
       in donker (3.1:1 op de kaart). Licht blijft exact Tablers waarde; donker = gray-400 (#94a3b8, 5.7:1 op de kaart). */
    --tblr-muted: light-dark(oklch(55.55% 0 0deg), var(--tblr-gray-400));

    /* ---- 4. Layout ---- */
    --tempes-sidebar-width: 17.25rem; /* breed genoeg voor Nederlandse menulabels (geen "Zorgverle...") */
    /* Tabler 1.6.1 leest dit voor de zijbalkbreedte en de marge van .page-wrapper (vanaf lg). */
    --tblr-sidebar-width: var(--tempes-sidebar-width);

    /* ---- 5. Overige TEMPES-tokens ---- */
    /* Spacing: extra stappen naast --tblr-spacer; voor secties en compacte toolbars. */
    --tempes-space-2xs: 0.25rem;
    --tempes-space-xs: 0.5rem;
    --tempes-space-sm: 0.75rem;
    --tempes-space-md: 1rem;
    --tempes-space-lg: 1.5rem;
    --tempes-space-xl: 2rem;
    /* Schaduwen: sidebar/mobiel. Op een donkere pagina is een zwarte schaduw van 8% niet te zien; daar dieper.
       De zijbalkschaduw blijft vast: de zijbalk is altijd donker (data-bs-theme="dark" op <aside>), dus light-dark()
       zou daar ook in de lichte modus de donkere waarde kiezen. */
    --tempes-shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.14);
    --tempes-shadow-raised: 0 0.125rem 0.25rem light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3));
    /* Scrim: mobiele overlays (op donker iets dichter, anders valt de lade niet op tegen de pagina). */
    --tempes-scrim: light-dark(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.6));
    /* Dunne scrollbars (planner zijlijst): op donker een lichte duim. */
    --tempes-scrollbar-thumb: light-dark(rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.28));
    --tempes-scrollbar-thumb-emphasis: light-dark(rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.4));
    /* Afronding: Tabler 1.6.1 = 6px en 4px. */
    --tempes-radius-ui: var(--tblr-border-radius, 0.375rem);
    --tempes-radius-tight: var(--tblr-border-radius-sm, 0.25rem);
    /* Knoppen: gedeelde tokens voor .btn-primary en .btn-outline-primary. */
    --tempes-btn-brand-bg: var(--tempes-brand-500);
    --tempes-btn-brand-bg-hover: var(--tempes-brand-600);
    /* Outline-knop: tekst in licht 600; op donker de lichte merktint (600 haalt daar maar 2.4:1). */
    --tempes-btn-brand-outline-color: light-dark(var(--tempes-brand-600), color-mix(in oklab, var(--tblr-white) 40%, var(--tempes-brand-500)));
    --tempes-btn-brand-outline-border: light-dark(rgba(var(--tempes-brand-rgb), 0.35), rgba(var(--tempes-brand-rgb), 0.6));
}

/*
 * Hover/ingedrukt van .btn-secondary/-success/-info/-warning/-danger/-light/-dark: Tabler rekent
 * --tblr-*-darken uit met oklch(from var(--tblr-x) calc(l - 0.06) c h). Die "relative color syntax"
 * is pas in Safari 18 volledig; Safari/iOS 16.4 t/m 17.x kennen een eerdere, gedeeltelijke versie.
 * Begrijpt een browser de uitdrukking niet, dan wordt de hoverachtergrond transparant achter witte
 * tekst. Daarom test @supports precies Tablers uitdrukking (met calc(l - 0.06), niet alleen
 * "oklch(from …)"): wie die niet kan uitrekenen krijgt de vaste uitkomst (nagerekend: oklch -> sRGB,
 * per kanaal afgekapt; gelijk aan wat Chrome uitrekent). Moderne browsers houden Tablers eigen
 * berekening. Secondary volgt de slate-grijzen hierboven: licht gray-500, donker gray-400.
 */
@supports not (color: oklch(from red calc(l - 0.06) c h)) {
    :root {
        --tblr-secondary-darken: light-dark(#536379, #8291a5);
        --tblr-success-darken: #08a030;
        --tblr-info-darken: #2d86cd;
        --tblr-warning-darken: #e18c00;
        --tblr-danger-darken: #c12027;
        --tblr-light-darken: #e6e6e6;
        --tblr-dark-darken: #181818;
    }
}

/*
 * Grijze tekst die Tabler vast op gray-500 zet (#64748b, 3.8:1 op de donkere pagina): niet-actieve tabs en navigatielinks
 * (.nav) en de vakjes naast een invoerveld (.input-group-text). Licht blijft gray-500; donker gray-400, net als
 * --tblr-secondary. De altijd-donkere zijbalk heeft eigen vaste linkkleuren (sidebar-overrides.css).
 */
.nav {
    --tblr-nav-link-color: light-dark(var(--tblr-gray-500), var(--tblr-gray-400));
}

.input-group-text {
    color: light-dark(var(--tblr-gray-500), var(--tblr-gray-400));
}

/*
 * Melding "browser te oud" (layouts/tabler.blade.php, bovenaan <body>). Standaard verborgen; alleen
 * zichtbaar waar light-dark() niet bestaat. Daar zijn Tablers kleurvariabelen ongeldig, dus
 * uitsluitend vaste hexkleuren.
 */
.tempes-browser-notice {
    display: none;
}

@supports not (color: light-dark(#000, #fff)) {
    .tempes-browser-notice {
        display: block;
        position: relative;
        z-index: 2000;
        margin: 0;
        padding: 0.75rem 1rem;
        background-color: #fff4e5;
        border-bottom: 2px solid #f59f00;
        color: #3d2600;
        font-size: 0.9375rem;
        line-height: 1.4;
        text-align: center;
    }
}