/**
 * Donkere modus voor de meegeleverde bibliotheken, zonder de bestanden in assets/vendor/ aan te passen.
 *
 * Laden: globaal in layouts/tabler.blade.php, in de <head> na app-overrides.css.
 *
 * - Elke regel begint met html[data-bs-theme="dark"]. Licht blijft daardoor precies zoals het was, en de altijd-donkere
 *   zijbalk (<aside data-bs-theme="dark">) haalt deze regels niet binnen. Geen [data-bs-theme="light"] als haak.
 * - Kleuren alleen via Tabler-tokens (--tblr-bg-surface, --tblr-bg-forms, --tblr-border-color, ...). Die zijn
 *   light-dark() en lossen hier altijd de donkere waarde op.
 * - De prefix (0,1,1) wint van de :root-standaarden van de bibliotheken (0,1,0), ook als die later laden:
 *   FullCalendar 6 en SweetAlert2 zetten hun CSS pas tijdens het draaien in de <head>.
 * - Alleen op het scherm: een afdruk houdt de lichte opmaak van de bibliotheken.
 * - Betekeniskleuren blijven staan: zorgtypekleuren van afspraken (inline per afspraak), bezette periodes,
 *   overlap-rand en de gemarkeerde keuze (merkkleur met witte tekst).
 * - DataTables (bs5) heeft dit bestand niet nodig: dat leest zelf :root[data-bs-theme=dark] en krijgt de Tabler-klassen
 *   (form-control-sm, form-select-sm, pagination).
 * - Chart.js tekent op een canvas: zie assets/js/tempes-chart-theme.js.
 * - Tabler zelf: alleen waar Tablers donkere kleuren als tekst onder 3:1 uitkomen (onderaan). De rest blijft zoals Tabler
 *   het levert; merkblauw als tekst staat in app-overrides.css (--tempes-brand-text).
 */

@media screen {

    /* ------------------------------------------------------------------ Select2 4.1 (standaardthema) */
    /* De lijst hangt aan <body> of aan een modal; de keuzevakken op de facturatiepagina's en in de takenmodal hebben
       eigen regels met Tabler-tokens die deze (gelijke of hogere specificiteit, later geladen) overschrijven. */

    html[data-bs-theme="dark"] .select2-dropdown {
        background-color: var(--tblr-bg-surface);
        color: var(--tblr-body-color);
        border-color: var(--tblr-border-color);
    }

    html[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
    html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
        background-color: var(--tblr-bg-forms);
        border-color: var(--tblr-border-color);
    }

    html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: var(--tblr-body-color);
    }

    html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__placeholder,
    html[data-bs-theme="dark"] .select2-container--default .select2-results__option--disabled {
        color: var(--tblr-secondary);
    }

    /* Pijltje: het driehoekje is een rand (#888 in licht). */
    html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-top-color: var(--tblr-secondary);
    }

    html[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-bottom-color: var(--tblr-secondary);
    }

    html[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
        background-color: var(--tblr-bg-forms);
        color: var(--tblr-body-color);
        border-color: var(--tblr-border-color);
    }

    /* Al gekozen optie (licht: #ddd). De optie onder de muis/het toetsenbord blijft merkkleur of Select2-blauw met wit:
       zonder :not() zou deze regel (hogere specificiteit) dat vlak doorzichtig maken onder witte tekst. */
    html[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected:not(.select2-results__option--highlighted) {
        background-color: var(--tblr-active-bg);
    }

    html[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
    html[data-bs-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple {
        background-color: var(--tblr-bg-forms-disabled);
    }

    /* ------------------------------------------------------------------ FullCalendar 6 (cliënt- en zorgverlenerplanner) */
    /* FullCalendar 6 heeft geen donkere modus en leest alleen zijn eigen --fc-*-variabelen. Afspraakkleuren staan inline
       per zorgtype (planner-caregiver.js / planner-client.js) en blijven staan. */

    html[data-bs-theme="dark"] {
        --fc-page-bg-color: var(--tblr-bg-surface);
        --fc-neutral-bg-color: var(--tblr-bg-surface-secondary);
        --fc-neutral-text-color: var(--tblr-secondary);
        --fc-border-color: var(--tblr-border-color);
        --fc-list-event-hover-bg-color: var(--tblr-bg-surface-secondary);
        --fc-today-bg-color: color-mix(in oklab, var(--tblr-yellow) 12%, transparent);
        --fc-highlight-color: color-mix(in oklab, var(--tblr-primary) 25%, transparent);
        --fc-non-business-color: color-mix(in oklab, var(--tblr-body-color) 8%, transparent);
    }

    /* Werkbalkknoppen (licht: vaste grijzen in planner-caregiver.css / planner-client.css). De gekozen weergave staat
       daar in de merkkleur voor licht en donker; hier alleen ingedrukt voor de andere knoppen. */
    html[data-bs-theme="dark"] #fullcalendarChart button.fc-button {
        background: var(--tblr-bg-surface-secondary);
        border-color: var(--tblr-border-color);
        color: var(--tblr-body-color);
        box-shadow: none;
    }

    html[data-bs-theme="dark"] #fullcalendarChart button.fc-button:not(.fc-button-active):not(:disabled):active {
        background: var(--tblr-active-bg);
        border-color: var(--tblr-primary);
        color: var(--tblr-primary-text-emphasis);
        box-shadow: none;
    }

    html[data-bs-theme="dark"] #fullcalendarChart button.fc-button > span.fc-icon {
        color: var(--tblr-body-color);
    }

    /* ------------------------------------------------------------------ FullCalendar 4 scheduler (beheerplanner, #calendar) */
    /* FullCalendar 4 kent geen variabelen; core/main.min.css zet vaste lichte kleuren op .fc-unthemed. Alleen de
       beheerplanner laadt FullCalendar 4. "Vandaag" en de afspraak-, bezet- en overlapkleuren staan in
       planner-admin.css en planner-admin.js en werken in beide modi. */

    html[data-bs-theme="dark"] .fc-unthemed th,
    html[data-bs-theme="dark"] .fc-unthemed td,
    html[data-bs-theme="dark"] .fc-unthemed thead,
    html[data-bs-theme="dark"] .fc-unthemed tbody,
    html[data-bs-theme="dark"] .fc-unthemed .fc-row,
    html[data-bs-theme="dark"] .fc-unthemed .fc-divider,
    html[data-bs-theme="dark"] .fc-unthemed .fc-content,
    html[data-bs-theme="dark"] .fc-unthemed .fc-popover,
    html[data-bs-theme="dark"] .fc-unthemed .fc-list-view,
    html[data-bs-theme="dark"] .fc-unthemed .fc-list-heading td {
        border-color: var(--tblr-border-color);
    }

    /* Scheiding tussen de resourcekolom en de tijdlijn, koppen in een popover en lijstkoppen (licht: #eee). */
    html[data-bs-theme="dark"] .fc-unthemed .fc-divider,
    html[data-bs-theme="dark"] .fc-unthemed .fc-popover .fc-header,
    html[data-bs-theme="dark"] .fc-unthemed .fc-list-heading td {
        background: var(--tblr-bg-surface-secondary);
    }

    html[data-bs-theme="dark"] .fc-unthemed .fc-popover {
        background-color: var(--tblr-bg-surface);
        color: var(--tblr-body-color);
    }

    /* Dagen buiten bereik en buiten werktijd (licht: #d7d7d7, de bibliotheek zet daar zelf opacity .3 op). */
    html[data-bs-theme="dark"] .fc-unthemed .fc-disabled-day,
    html[data-bs-theme="dark"] .fc-nonbusiness {
        background: var(--tblr-bg-surface-secondary);
    }

    html[data-bs-theme="dark"] .fc-unthemed .fc-list-item:hover td {
        background-color: var(--tblr-bg-surface-secondary);
    }

    /* Werkbalkknoppen (licht: vaste grijzen in planner-admin.css). De gekozen weergave staat daar in de merkkleur voor
       licht en donker; hier alleen ingedrukt voor de andere knoppen. */
    html[data-bs-theme="dark"] #calendar button.fc-button {
        background: var(--tblr-bg-surface-secondary);
        border-color: var(--tblr-border-color);
        color: var(--tblr-body-color);
        box-shadow: none;
    }

    html[data-bs-theme="dark"] #calendar button.fc-button:not(.fc-button-active):not(:disabled):active {
        background: var(--tblr-active-bg);
        border-color: var(--tblr-primary);
        color: var(--tblr-primary-text-emphasis);
        box-shadow: none;
    }

    html[data-bs-theme="dark"] #calendar button.fc-button > span.fc-icon {
        color: var(--tblr-body-color);
    }

    /* ------------------------------------------------------------------ SweetAlert2 11 (factuuroverzicht) */
    /* invoice-overview-page.js geeft ook theme: 'dark' mee; deze brug zet het venster op de Tabler-kleuren in plaats van
       het eigen #19191a van SweetAlert2. De variabelen staan op de container (vendor: :root en [data-swal2-theme=dark]).
       De bevestigknop houdt dezelfde kleur als in licht. */

    html[data-bs-theme="dark"] .swal2-container {
        --swal2-background: var(--tblr-bg-surface);
        --swal2-color: var(--tblr-body-color);
        --swal2-footer-border-color: var(--tblr-border-color);
        --swal2-input-background: var(--tblr-bg-forms);
        --swal2-input-border: 1px solid var(--tblr-border-color);
        --swal2-validation-message-background: var(--tblr-bg-surface-secondary);
        --swal2-validation-message-color: var(--tblr-body-color);
        --swal2-close-button-color: var(--tblr-secondary);
        --swal2-backdrop: rgba(0, 0, 0, 0.6);
    }

    /* ------------------------------------------------------------------ Tabler 1.6.1: tekst onder 3:1 in donker */
    /* De -lt-badges kleuren de tekst in de volle kleur op 10% van diezelfde kleur. In donker komen deze kleuren daarmee onder
       3:1 (blauw 2.7, indigo 2.7, paars 2.8, rood 2.9, roze 3.0, dark 1.0). Tekst = 40% wit erdoor, zoals Tablers eigen
       *-text-emphasis in donker; het vlak blijft. Groen, oranje, geel, cyaan enz. halen 4:1 of meer en blijven. */
    html[data-bs-theme="dark"] .bg-blue-lt {
        color: color-mix(in oklab, var(--tblr-white) 40%, var(--tblr-blue)) !important;
    }

    html[data-bs-theme="dark"] .bg-indigo-lt {
        color: color-mix(in oklab, var(--tblr-white) 40%, var(--tblr-indigo)) !important;
    }

    html[data-bs-theme="dark"] .bg-purple-lt {
        color: color-mix(in oklab, var(--tblr-white) 40%, var(--tblr-purple)) !important;
    }

    html[data-bs-theme="dark"] .bg-red-lt {
        color: color-mix(in oklab, var(--tblr-white) 40%, var(--tblr-red)) !important;
    }

    html[data-bs-theme="dark"] .bg-danger-lt {
        color: color-mix(in oklab, var(--tblr-white) 40%, var(--tblr-danger)) !important;
    }

    html[data-bs-theme="dark"] .bg-pink-lt {
        color: color-mix(in oklab, var(--tblr-white) 40%, var(--tblr-pink)) !important;
    }

    /* Tabler-status (ja/nee in de zorgtypetabellen): zelfde kleuren als de -lt-badges. Alleen de tekst; de stip
       (.status-dot, eigen achtergrond) houdt de volle kleur. */
    html[data-bs-theme="dark"] :is(.status-red, .status-danger, .status-blue, .status-indigo, .status-purple, .status-pink) {
        color: color-mix(in oklab, var(--tblr-white) 40%, var(--tblr-status-color));
    }

    /* .bg-dark-lt is in licht een lichtgrijs vlak met donkere tekst; in donker spiegelen: licht vlak van 10%, lichte tekst. */
    html[data-bs-theme="dark"] .bg-dark-lt {
        color: var(--tblr-body-color) !important;
        background-color: color-mix(in oklab, var(--tblr-white) 10%, transparent) !important;
    }

    /* Meldingen (alert-danger): kop en tekst in rood op het rode vlak = 2.9:1. Tekst op Tablers danger-text-emphasis, het
       vlak en de rand blijven. De knop "Naar dossiercontrole" (btn-outline-danger) staat in zo'n melding: ook de rode
       outline- en ghost-knop (3.1:1 op de kaart). Hover blijft rood vlak met witte tekst. */
    html[data-bs-theme="dark"] .alert-danger {
        --tblr-alert-color: var(--tblr-danger-text-emphasis);
    }

    html[data-bs-theme="dark"] .btn-outline-danger,
    html[data-bs-theme="dark"] .btn-ghost-danger {
        --tblr-btn-color: var(--tblr-danger-text-emphasis);
    }

    /* Rode tekst (.text-danger/.text-red: verplicht-sterretjes, foutmeldingen in de planners, "Verwijderen" in een menu):
       3.1:1 op de kaart. Zelfde tint als de rode melding hierboven (6.3:1); de text-opacity-hulpklassen blijven werken. */
    html[data-bs-theme="dark"] .text-danger {
        color: color-mix(in oklab, var(--tblr-danger-text-emphasis) calc(var(--tblr-text-opacity, 1) * 100%), transparent) !important;
    }

    html[data-bs-theme="dark"] .text-red {
        color: color-mix(in oklab, color-mix(in oklab, var(--tblr-white) 40%, var(--tblr-red)) calc(var(--tblr-text-opacity, 1) * 100%), transparent) !important;
    }

    /* Grijs als vlak onder witte tekst: Tablers donkere --tblr-secondary/--tblr-muted is een licht grijs (gray-400), dus
       wit erop = 2.5:1. Hover/ingedrukt/open van de grijze outline- en ghost-knoppen (o.a. "Verberg alle zorgverleners",
       de menuknoppen in de bestandsbrowser) en van de topbalkknoppen (meldingen, taal, weergave) krijgen gray-600 (7:1).
       De tekstkleur in rust blijft. */
    html[data-bs-theme="dark"] .btn-outline-secondary,
    html[data-bs-theme="dark"] .btn-ghost-secondary,
    html[data-bs-theme="dark"] .btn-ghost-muted {
        --tblr-btn-hover-bg: var(--tblr-gray-600);
        --tblr-btn-hover-border-color: var(--tblr-gray-600);
        --tblr-btn-active-bg: var(--tblr-gray-600);
        --tblr-btn-active-border-color: var(--tblr-gray-600);
    }

    /* Zelfde voor de grijze badge met witte tekst (taaktype "rooster") en de effen badges zonder eigen tekstkleur
       (Tabler kleurt badgetekst grijs: 1.1:1 op groen of grijs). Die laatste krijgen donkere tekst op het vlak (6.5:1+);
       een tekstklasse (.text-white e.d.) gaat met !important voor. */
    html[data-bs-theme="dark"] .bg-secondary.text-white {
        background-color: var(--tblr-gray-600) !important;
    }

    html[data-bs-theme="dark"] .badge.bg-success,
    html[data-bs-theme="dark"] .badge.bg-secondary {
        --tblr-badge-color: var(--tblr-gray-900);
    }

    /* .btn-link (o.a. BSN "Tonen", "Ga naar tabblad Details"): Tabler zet hier een vaste kleur (primary iets lichter,
       4.0:1 op de kaart). In donker de lichte merktint zoals .btn-ghost-primary (6.4:1). Licht blijft Tablers kleur. */
    html[data-bs-theme="dark"] .btn-link {
        color: var(--tempes-brand-text);
    }

    html[data-bs-theme="dark"] .btn-link:hover,
    html[data-bs-theme="dark"] .btn-link:focus-visible {
        color: var(--tblr-link-hover-color);
    }

    /* .bg-light (scheidingsregel in het zorgverlenerformulier, creditregels in het factuuroverzicht) is een vast licht vlak
       (#fafafa) onder lichte tekst; in donker het tweede oppervlak. */
    html[data-bs-theme="dark"] .bg-light {
        background-color: var(--tblr-bg-surface-secondary) !important;
    }

    /* .table-light (somregel kilometerrapportage) zet vaste lichte kleuren: in donker het tweede oppervlak. */
    html[data-bs-theme="dark"] .table-light {
        --tblr-table-color: var(--tblr-body-color);
        --tblr-table-bg: var(--tblr-bg-surface-secondary);
        --tblr-table-border-color: var(--tblr-border-color);
        --tblr-table-striped-bg: var(--tblr-bg-surface-secondary);
        --tblr-table-striped-color: var(--tblr-body-color);
        --tblr-table-active-bg: var(--tblr-active-bg);
        --tblr-table-active-color: var(--tblr-body-color);
        --tblr-table-hover-bg: var(--tblr-hover-bg);
        --tblr-table-hover-color: var(--tblr-body-color);
        color: var(--tblr-table-color);
        border-color: var(--tblr-table-border-color);
    }
}