/* ========================================
   THEME TOKENS - kleuren centraal gedefinieerd (licht + donker)
   ======================================== */
:root {
    --bw-color-border: #e0e0e0;
    --bw-color-hover: #f5f5f5;
    /* Selectie-kleur: lichte tint van de primaire themakleur (12% over wit). */
    --bw-color-selection: color-mix(in srgb, var(--mud-palette-primary) 12%, #ffffff);
    /* Wijziging-kleur: lichte gele tint (niet-opgeslagen rijen), gelijk aan --bw-color-unsaved in het prototype. */
    --bw-color-changed: color-mix(in srgb, #ffc107 10%, #ffffff);
    --bw-color-text-primary: #023d47;
    --bw-color-text-primary-strong: #023d47;

    /* Override MudBlazor's eigen tekst-kleuren zodat alle componenten onze primary text color gebruiken */
    --mud-palette-text-primary: var(--bw-color-text-primary);
    --mud-palette-action-default: var(--bw-color-text-primary);
    --mud-palette-drawer-text: var(--bw-color-text-primary);
    --mud-palette-appbar-text: var(--bw-color-text-primary);
}

/* Body en alle native HTML tekst valt terug op de primary tekst kleur */
body,
html {
    color: var(--bw-color-text-primary);
}

.mud-theme-dark {
    --bw-color-border: #35373b;
    --bw-color-hover: rgba(255, 255, 255, 0.16);
    /* Dark mode: tint van de primaire kleur (18% over surface) i.p.v. wit-alpha. */
    --bw-color-selection: color-mix(in srgb, var(--mud-palette-primary) 18%, #222529);
    --bw-color-changed: color-mix(in srgb, #ffc107 12%, #222529);
    --bw-color-text-primary: #d1d2d3;
    --bw-color-text-primary-strong: #f0f0f1;

    /* De `--mud-palette-*` overrides in :root resolven `var(--bw-color-text-primary)`
       op het html-element, waar de licht-mode waarde geldt. Herhaal ze hier zodat ze
       de dark-mode waarde oppakken — anders blijven onder andere checkboxes en andere
       MudBlazor componenten die op `--mud-palette-action-default` leunen donker. */
    --mud-palette-text-primary: var(--bw-color-text-primary);
    --mud-palette-action-default: var(--bw-color-text-primary);
    --mud-palette-drawer-text: var(--bw-color-text-primary);
    --mud-palette-appbar-text: var(--bw-color-text-primary);
    --mud-palette-table-hover: var(--bw-color-hover);
}

/* Donkere modus: alle scrollbars dezelfde lichte tint als hover/selectie (rgba(255,255,255,0.16)).
   Firefox gebruikt scrollbar-color (thumb track), WebKit/Blink ::-webkit-scrollbar-*.
   `color-scheme: dark` is nodig om Chrome's default lichte (zilveren) overlay scrollbar uit te zetten. */
.mud-theme-dark,
.mud-theme-dark body,
body.mud-theme-dark {
    color-scheme: dark;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.mud-theme-dark ::-webkit-scrollbar,
body.mud-theme-dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.mud-theme-dark ::-webkit-scrollbar-track,
body.mud-theme-dark ::-webkit-scrollbar-track {
    background: transparent;
}

.mud-theme-dark ::-webkit-scrollbar-thumb,
body.mud-theme-dark ::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.16);
    border-radius: 6px;
}

.mud-theme-dark ::-webkit-scrollbar-thumb:hover,
body.mud-theme-dark ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.24);
}

.mud-theme-dark ::-webkit-scrollbar-corner,
body.mud-theme-dark ::-webkit-scrollbar-corner {
    background: transparent;
}