/*
 * Thema-engine — beheeromgeving (AdminLTE 3 / Bootstrap 4).
 *
 * Vertaalt de ontwerptokens (--vf-*) van een thema naar AdminLTE. Laadt na
 * adminlte.min.css, het standaardthema en de tokens van het gekozen thema;
 * het standaardthema zelf gebruikt dit bestand niet.
 *
 * Specificiteit: regels krijgen het voorvoegsel [data-vf-theme] (op <html>).
 * Zo winnen ze van dezelfde regel in AdminLTE, ook van de variant met
 * .dark-mode ervoor, zonder !important. Alleen waar AdminLTE of Bootstrap zelf
 * !important gebruiken (bg-*, text-muted, elevation-*) doen wij dat ook.
 * Hoeken van knoppen en velden staan bewust in een lagere regel dan de
 * kleuren, zodat input-groups en btn-groups hun aansluitende hoeken houden.
 */

/* ── Standaardwaarden (specificiteit 0: elk thema overschrijft ze) ─────── */

:where(:root) {
    --vf-font-size: 1rem;
    --vf-control-font-size: 1rem;
    --vf-line-height: 1.5;
    --vf-display-settings: normal;
    --vf-heading-weight: 600;
    --vf-heading-tracking: normal;
    --vf-page-title-size: 1.8rem;
    --vf-label-weight: 600;

    --vf-surface-sunken: var(--vf-surface);
    --vf-input-bg: var(--vf-surface);
    --vf-input-border: var(--vf-border-strong);
    --vf-input-disabled-bg: var(--vf-surface-alt);

    --vf-primary-active: var(--vf-primary-hover);
    --vf-link-hover: var(--vf-primary-hover);

    --vf-card-border: 1px;
    --vf-card-header-bg: transparent;
    --vf-card-title-font: var(--vf-font-display);
    --vf-card-title-size: 1.1rem;
    --vf-card-title-weight: var(--vf-heading-weight);
    --vf-card-title-tracking: var(--vf-heading-tracking);
    --vf-card-title-transform: none;

    --vf-btn-weight: 600;
    --vf-btn-tracking: normal;
    --vf-btn-transform: none;
    --vf-radius-pop: var(--vf-radius-control);
    --vf-radius-alert: var(--vf-radius-control);

    --vf-table-head-bg: transparent;
    --vf-table-head-color: var(--vf-muted);
    --vf-table-head-size: .75rem;
    --vf-table-head-transform: uppercase;
    --vf-table-head-tracking: .04em;
    --vf-table-border: var(--vf-border);
    --vf-table-stripe: var(--vf-surface-alt);
    --vf-table-hover: var(--vf-primary-soft);

    --vf-navbar-text-hover: var(--vf-heading);
    --vf-sidebar-text-hover: var(--vf-sidebar-active-text);
    --vf-sidebar-shadow: none;
    --vf-brand-weight: 600;
    --vf-footer-bg: var(--vf-surface);
    --vf-login-bg: var(--vf-page);

    --vf-success: #1f8a5b;  --vf-success-bg: #e6f4ec; --vf-success-ink: #145c3c; --vf-success-border: #bfe3cf;
    --vf-info: #1f6f9f;     --vf-info-bg: #e5f1f8;    --vf-info-ink: #164f72;    --vf-info-border: #bcdbec;
    --vf-warning: #b7791f;  --vf-warning-bg: #fdf3dc; --vf-warning-ink: #6b4a0f; --vf-warning-border: #f3dca2;
    --vf-danger: #c53030;   --vf-danger-bg: #fbe9e9;  --vf-danger-ink: #8a1f1f;  --vf-danger-border: #f2c4c4;

    --vf-kpi-1-bg: var(--vf-primary); --vf-kpi-1-ink: var(--vf-primary-contrast);
    --vf-kpi-2-bg: var(--vf-warning-bg); --vf-kpi-2-ink: var(--vf-warning-ink);
    --vf-kpi-3-bg: var(--vf-success-bg); --vf-kpi-3-ink: var(--vf-success-ink);
    --vf-kpi-4-bg: var(--vf-surface-alt); --vf-kpi-4-ink: var(--vf-text);
    --vf-kpi-icon: rgba(0, 0, 0, .12);
    --vf-kpi-footer-bg: rgba(0, 0, 0, .06);
}

/* ── Basis en typografie ──────────────────────────────────────────────── */

body {
    font-family: var(--vf-font-text);
    font-size: var(--vf-font-size);
    line-height: var(--vf-line-height);
    color: var(--vf-text);
    background-color: var(--vf-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
[data-vf-theme] body.dark-mode { background-color: var(--vf-page) !important; color: var(--vf-text); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--vf-font-display);
    font-variation-settings: var(--vf-display-settings);
    font-weight: var(--vf-heading-weight);
    letter-spacing: var(--vf-heading-tracking);
    color: var(--vf-heading);
}
/* Alleen de standaardmaat; btn-sm/-xs/-lg en form-control-sm houden hun eigen maat. */
.btn:not(.btn-sm):not(.btn-xs):not(.btn-lg),
.form-control:not(.form-control-sm):not(.form-control-lg),
.custom-select:not(.custom-select-sm):not(.custom-select-lg),
.input-group-text, .dropdown-menu, .custom-file-label {
    font-size: var(--vf-control-font-size);
}
a { color: var(--vf-link); }
a:hover { color: var(--vf-link-hover); }
hr { border-top-color: var(--vf-border); }
code { color: var(--vf-primary-ink); }
/* Koppen op een gekleurde ondergrond nemen de tekstkleur van die ondergrond over. */
[data-vf-theme] .alert :is(h1, h2, h3, h4, h5, h6),
[data-vf-theme] .bg-primary :is(h1, h2, h3, h4, h5, h6),
[data-vf-theme] .small-box :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
::selection { background: var(--vf-primary-soft); color: var(--vf-heading); }

/* Kleine kapitalen-kopjes (h6.text-uppercase) lezen beter in het tekstlettertype. */
[data-vf-theme] :is(h1, h2, h3, h4, h5, h6).text-uppercase { font-family: var(--vf-font-text); font-variation-settings: normal; letter-spacing: .04em; }
[data-vf-theme] label:not(.form-check-label):not(.custom-file-label) { font-weight: var(--vf-label-weight); }
[data-vf-theme] .text-muted { color: var(--vf-muted) !important; }
[data-vf-theme] .text-primary { color: var(--vf-link) !important; }
[data-vf-theme] .bg-primary { background-color: var(--vf-primary) !important; color: var(--vf-primary-contrast) !important; }
[data-vf-theme] .border-primary { border-color: var(--vf-primary) !important; }
[data-vf-theme] .bg-white { background-color: var(--vf-surface) !important; }
[data-vf-theme] .bg-light { background-color: var(--vf-surface-alt) !important; color: var(--vf-text) !important; }
[data-vf-theme] .text-success { color: var(--vf-success) !important; }
[data-vf-theme] .text-danger { color: var(--vf-danger) !important; }
[data-vf-theme] .text-warning { color: var(--vf-warning) !important; }
[data-vf-theme] .text-info { color: var(--vf-info) !important; }

/* ── Paginakop, inhoud en voet ────────────────────────────────────────── */

[data-vf-theme] .content-wrapper { background-color: var(--vf-page); color: var(--vf-text); }
[data-vf-theme] .content-header h1 {
    font-size: var(--vf-page-title-size);
    font-weight: var(--vf-heading-weight);
    letter-spacing: var(--vf-heading-tracking);
    color: var(--vf-heading);
}
[data-vf-theme] .main-footer {
    background-color: var(--vf-footer-bg);
    border-top-color: var(--vf-border);
    color: var(--vf-muted);
}

/* ── Navigatiebalk ────────────────────────────────────────────────────── */

[data-vf-theme] .main-header.navbar {
    background-color: var(--vf-navbar-bg);
    border-bottom-color: var(--vf-navbar-border);
}
[data-vf-theme] .main-header .navbar-nav .nav-link { color: var(--vf-navbar-text); }
[data-vf-theme] .main-header .navbar-nav .nav-link:hover,
[data-vf-theme] .main-header .navbar-nav .nav-link:focus { color: var(--vf-navbar-text-hover); }

/* ── Zijbalk ──────────────────────────────────────────────────────────── */

[data-vf-theme] .main-sidebar { background-color: var(--vf-sidebar-bg); }
[data-vf-theme] .main-sidebar.elevation-4 { box-shadow: var(--vf-sidebar-shadow) !important; }
[data-vf-theme] .main-sidebar .brand-link {
    color: var(--vf-sidebar-brand);
    background-color: var(--vf-brand-bg, transparent);
    border-bottom-color: var(--vf-brand-border, var(--vf-sidebar-divider));
}
/* Een geüpload logo is gemaakt voor een lichte ondergrond; op een donkere
   zijbalk krijgt het desgewenst een licht vlak (--vf-brand-logo-bg). */
[data-vf-theme] .main-sidebar .brand-link .brand-image,
[data-vf-theme] .login-logo img {
    background-color: var(--vf-brand-logo-bg, transparent);
    padding: var(--vf-brand-logo-pad, 0);
    border-radius: var(--vf-brand-logo-radius, 0);
}
[data-vf-theme] .main-sidebar .brand-link:hover { color: var(--vf-sidebar-brand); }
[data-vf-theme] .main-sidebar .brand-link .brand-text {
    font-family: var(--vf-font-display);
    font-variation-settings: var(--vf-display-settings);
    font-weight: var(--vf-brand-weight) !important;
    letter-spacing: var(--vf-heading-tracking);
}
[data-vf-theme] .main-sidebar .nav-sidebar > .nav-item > .nav-link {
    color: var(--vf-sidebar-text);
    border-radius: var(--vf-radius-control);
    /* Bredere lettertypen: lange labels op één regel, desnoods met een beletselteken. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-vf-theme] .main-sidebar .nav-sidebar .nav-link > p { white-space: nowrap; }
[data-vf-theme] .main-sidebar .nav-sidebar > .nav-item > .nav-link:hover,
[data-vf-theme] .main-sidebar .nav-sidebar > .nav-item > .nav-link:focus {
    background-color: var(--vf-sidebar-hover-bg);
    color: var(--vf-sidebar-text-hover);
}
[data-vf-theme] .main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--vf-sidebar-active-bg);
    color: var(--vf-sidebar-active-text);
    box-shadow: none;
}

/* ── Kaarten ──────────────────────────────────────────────────────────── */

[data-vf-theme] .card {
    background-color: var(--vf-surface);
    color: var(--vf-text);
    border: var(--vf-card-border) solid var(--vf-border);
    border-radius: var(--vf-radius-card);
    box-shadow: var(--vf-shadow-card);
}
[data-vf-theme] .card-header {
    background-color: var(--vf-card-header-bg);
    border-bottom-color: var(--vf-border);
    color: var(--vf-heading);
}
[data-vf-theme] .card > .card-header:first-child,
[data-vf-theme] .card > .list-group:first-child .list-group-item:first-child {
    border-top-left-radius: calc(var(--vf-radius-card) - var(--vf-card-border));
    border-top-right-radius: calc(var(--vf-radius-card) - var(--vf-card-border));
}
[data-vf-theme] .card-footer {
    background-color: var(--vf-card-header-bg);
    border-top-color: var(--vf-border);
}
[data-vf-theme] .card > .card-footer:last-child {
    border-bottom-left-radius: calc(var(--vf-radius-card) - var(--vf-card-border));
    border-bottom-right-radius: calc(var(--vf-radius-card) - var(--vf-card-border));
}
[data-vf-theme] .card-title {
    font-family: var(--vf-card-title-font);
    font-variation-settings: var(--vf-display-settings);
    font-size: var(--vf-card-title-size);
    font-weight: var(--vf-card-title-weight);
    letter-spacing: var(--vf-card-title-tracking);
    text-transform: var(--vf-card-title-transform);
    color: inherit;
}
[data-vf-theme] .card.card-outline { border-top-width: 3px; }
[data-vf-theme] .card-primary.card-outline { border-top-color: var(--vf-primary); }
[data-vf-theme] .card-success.card-outline { border-top-color: var(--vf-success); }
[data-vf-theme] .card-info.card-outline { border-top-color: var(--vf-info); }
[data-vf-theme] .card-warning.card-outline { border-top-color: var(--vf-warning); }
[data-vf-theme] .card-danger.card-outline { border-top-color: var(--vf-danger); }
[data-vf-theme] .card-secondary.card-outline { border-top-color: var(--vf-border-strong); }
[data-vf-theme] .card-primary:not(.card-outline) > .card-header { background-color: var(--vf-primary); color: var(--vf-primary-contrast); border-bottom-color: transparent; }
[data-vf-theme] .card-primary:not(.card-outline) > .card-header a { color: var(--vf-primary-contrast); }
[data-vf-theme] .card-tools .btn-tool { color: var(--vf-muted); }

/* ── Knoppen ──────────────────────────────────────────────────────────── */

[data-vf-theme] .btn {
    border-radius: var(--vf-radius-btn);
    font-weight: var(--vf-btn-weight);
    letter-spacing: var(--vf-btn-tracking);
    text-transform: var(--vf-btn-transform);
}
[data-vf-theme] .btn:not(.btn-sm):not(.btn-xs):not(.btn-lg):not(.btn-tool):not(.btn-link) { padding-left: var(--vf-btn-padding-x, .75rem); padding-right: var(--vf-btn-padding-x, .75rem); }
[data-vf-theme] .btn:focus, [data-vf-theme] .btn.focus { box-shadow: var(--vf-focus-ring); }

[data-vf-theme] .btn-primary { color: var(--vf-primary-contrast); background-color: var(--vf-primary); border-color: var(--vf-primary); }
[data-vf-theme] .btn-primary:hover { color: var(--vf-primary-contrast); background-color: var(--vf-primary-hover); border-color: var(--vf-primary-hover); }
[data-vf-theme] .btn-primary:focus, [data-vf-theme] .btn-primary.focus { color: var(--vf-primary-contrast); background-color: var(--vf-primary-hover); border-color: var(--vf-primary-hover); box-shadow: var(--vf-focus-ring); }
[data-vf-theme] .btn-primary:not(:disabled):not(.disabled):active,
[data-vf-theme] .btn-primary:not(:disabled):not(.disabled).active { color: var(--vf-primary-contrast); background-color: var(--vf-primary-active); border-color: var(--vf-primary-active); }
[data-vf-theme] .btn-primary.disabled, [data-vf-theme] .btn-primary:disabled { color: var(--vf-primary-contrast); background-color: var(--vf-primary); border-color: var(--vf-primary); }

[data-vf-theme] .btn-outline-primary { color: var(--vf-link); border-color: var(--vf-primary); background-color: transparent; }
[data-vf-theme] .btn-outline-primary:hover,
[data-vf-theme] .btn-outline-primary:not(:disabled):not(.disabled):active,
[data-vf-theme] .btn-outline-primary:not(:disabled):not(.disabled).active { color: var(--vf-primary-contrast); background-color: var(--vf-primary); border-color: var(--vf-primary); }

/* Neutrale knoppen (annuleren, terug, filters): rustig, in de kleuren van het thema. */
[data-vf-theme] .btn-secondary,
[data-vf-theme] .btn-default,
[data-vf-theme] .btn-light { color: var(--vf-text); background-color: var(--vf-surface-alt); border-color: var(--vf-border-strong); }
[data-vf-theme] .btn-secondary:hover,
[data-vf-theme] .btn-default:hover,
[data-vf-theme] .btn-light:hover,
[data-vf-theme] .btn-secondary:not(:disabled):not(.disabled):active,
[data-vf-theme] .btn-default:not(:disabled):not(.disabled):active { color: var(--vf-heading); background-color: var(--vf-border); border-color: var(--vf-border-strong); }
[data-vf-theme] .btn-outline-secondary { color: var(--vf-text); border-color: var(--vf-border-strong); background-color: transparent; }
[data-vf-theme] .btn-outline-secondary:hover,
[data-vf-theme] .btn-outline-secondary:not(:disabled):not(.disabled):active,
[data-vf-theme] .btn-outline-secondary:not(:disabled):not(.disabled).active { color: var(--vf-heading); background-color: var(--vf-surface-alt); border-color: var(--vf-border-strong); }

[data-vf-theme] .btn-success { color: #fff; background-color: var(--vf-success); border-color: var(--vf-success); }
[data-vf-theme] .btn-success:hover { color: #fff; background-color: var(--vf-success-ink); border-color: var(--vf-success-ink); }
[data-vf-theme] .btn-danger { color: #fff; background-color: var(--vf-danger); border-color: var(--vf-danger); }
[data-vf-theme] .btn-danger:hover { color: #fff; background-color: var(--vf-danger-ink); border-color: var(--vf-danger-ink); }
[data-vf-theme] .btn-outline-danger { color: var(--vf-danger); border-color: var(--vf-danger-border); background-color: transparent; }
[data-vf-theme] .btn-outline-danger:hover,
[data-vf-theme] .btn-outline-danger:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--vf-danger); border-color: var(--vf-danger); }
[data-vf-theme] .btn-outline-success { color: var(--vf-success); border-color: var(--vf-success-border); }
[data-vf-theme] .btn-outline-success:hover { color: #fff; background-color: var(--vf-success); border-color: var(--vf-success); }
[data-vf-theme] .btn-info { color: #fff; background-color: var(--vf-info); border-color: var(--vf-info); }
[data-vf-theme] .btn-info:hover { color: #fff; background-color: var(--vf-info-ink); border-color: var(--vf-info-ink); }
[data-vf-theme] .btn-outline-info { color: var(--vf-info); border-color: var(--vf-info-border); background-color: transparent; }
[data-vf-theme] .btn-outline-info:hover,
[data-vf-theme] .btn-outline-info:not(:disabled):not(.disabled):active { color: #fff; background-color: var(--vf-info); border-color: var(--vf-info); }
[data-vf-theme] .btn-warning { color: var(--vf-warning-ink); background-color: var(--vf-warning-bg); border-color: var(--vf-warning-border); }
[data-vf-theme] .btn-warning:hover { color: var(--vf-warning-ink); background-color: var(--vf-warning-border); border-color: var(--vf-warning-border); }
[data-vf-theme] .btn-outline-warning { color: var(--vf-warning); border-color: var(--vf-warning-border); background-color: transparent; }
[data-vf-theme] .btn-outline-warning:hover,
[data-vf-theme] .btn-outline-warning:not(:disabled):not(.disabled):active { color: var(--vf-warning-ink); background-color: var(--vf-warning-bg); border-color: var(--vf-warning); }
[data-vf-theme] .btn-link { color: var(--vf-link); }
[data-vf-theme] .btn-link:hover { color: var(--vf-link-hover); }

/* ── Formulieren ──────────────────────────────────────────────────────── */

/* Hoeken apart en laag, zodat .input-group > .form-control:not(:last-child) blijft winnen. */
[data-vf-theme] .form-control,
[data-vf-theme] .custom-select,
[data-vf-theme] .custom-file-label,
[data-vf-theme] .input-group-text { border-radius: var(--vf-radius-control); }

[data-vf-theme] .form-control:not(.form-control-navbar):not(.form-control-sidebar),
[data-vf-theme] .custom-select,
[data-vf-theme] .custom-file-label {
    background-color: var(--vf-input-bg);
    color: var(--vf-text);
}
[data-vf-theme] .form-control:not(.form-control-navbar):not(.form-control-sidebar):not(.is-invalid):not(:focus),
[data-vf-theme] .custom-select:not(.is-invalid):not(:focus),
[data-vf-theme] .custom-file-label { border-color: var(--vf-input-border); }
[data-vf-theme] .form-control:focus,
[data-vf-theme] .custom-select:focus,
[data-vf-theme] .custom-file-input:focus ~ .custom-file-label {
    border-color: var(--vf-primary);
    box-shadow: var(--vf-focus-ring);
    outline: 0;
}
[data-vf-theme] .form-control:disabled,
[data-vf-theme] .form-control[readonly] { background-color: var(--vf-input-disabled-bg); }
[data-vf-theme] .form-control::placeholder { color: var(--vf-muted); opacity: .75; }
[data-vf-theme] .input-group-text {
    background-color: var(--vf-surface-alt);
    border-color: var(--vf-input-border);
    color: var(--vf-muted);
}
[data-vf-theme] .form-text { color: var(--vf-muted); }

[data-vf-theme] .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--vf-primary);
    border-color: var(--vf-primary);
}
[data-vf-theme] .custom-control-input:focus ~ .custom-control-label::before { box-shadow: var(--vf-focus-ring); }
[data-vf-theme] .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: var(--vf-primary); }
[data-vf-theme] .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: var(--vf-primary-contrast); }

/* ── Navigatie-pillen (o.a. instellingen) en tabbladen ────────────────── */

[data-vf-theme] .content-wrapper .nav-pills .nav-link {
    color: var(--vf-muted);
    border-radius: var(--vf-radius-btn);
    font-weight: 500;
}
[data-vf-theme] .content-wrapper .nav-pills .nav-link:not(.active):hover { color: var(--vf-heading); background-color: var(--vf-surface-alt); }
[data-vf-theme] .content-wrapper .nav-pills .nav-link.active,
[data-vf-theme] .content-wrapper .nav-pills .show > .nav-link {
    color: var(--vf-primary-contrast);
    background-color: var(--vf-primary);
}
[data-vf-theme] .nav-tabs { border-bottom-color: var(--vf-border); }
[data-vf-theme] .nav-tabs .nav-link { color: var(--vf-muted); }
[data-vf-theme] .nav-tabs .nav-link:hover { border-color: transparent; color: var(--vf-heading); }
[data-vf-theme] .nav-tabs .nav-link.active,
[data-vf-theme] .nav-tabs .nav-item.show .nav-link {
    color: var(--vf-heading);
    background-color: var(--vf-surface);
    border-color: var(--vf-border) var(--vf-border) var(--vf-surface);
}

/* ── Tabellen ─────────────────────────────────────────────────────────── */

[data-vf-theme] .table { color: var(--vf-text); }
[data-vf-theme] .table td,
[data-vf-theme] .table th { border-top-color: var(--vf-table-border); }
[data-vf-theme] .table thead th {
    border-bottom: 1px solid var(--vf-table-border);
    background-color: var(--vf-table-head-bg);
    color: var(--vf-table-head-color);
    font-family: var(--vf-font-text);
    font-size: var(--vf-table-head-size);
    font-weight: 600;
    text-transform: var(--vf-table-head-transform);
    letter-spacing: var(--vf-table-head-tracking);
}
[data-vf-theme] .table-striped tbody tr:nth-of-type(odd) { background-color: var(--vf-table-stripe); }
[data-vf-theme] .table-hover tbody tr:hover { background-color: var(--vf-table-hover); color: var(--vf-text); }
[data-vf-theme] .table-light,
[data-vf-theme] .table-light > td,
[data-vf-theme] .table-light > th,
[data-vf-theme] .thead-light th { background-color: var(--vf-surface-alt); color: var(--vf-text); border-color: var(--vf-table-border); }
[data-vf-theme] .table-bordered,
[data-vf-theme] .table-bordered td,
[data-vf-theme] .table-bordered th { border-color: var(--vf-table-border); }

/* ── Badges en meldingen ──────────────────────────────────────────────── */

[data-vf-theme] .badge { border-radius: var(--vf-radius-badge); font-weight: 600; padding: .3em .6em; }
[data-vf-theme] .badge-primary { background-color: var(--vf-primary); color: var(--vf-primary-contrast); }
[data-vf-theme] .badge-secondary { background-color: var(--vf-surface-alt); color: var(--vf-muted); box-shadow: inset 0 0 0 1px var(--vf-border); }
[data-vf-theme] .badge-light { background-color: var(--vf-surface-alt); color: var(--vf-text); }
[data-vf-theme] .badge-success { background-color: var(--vf-success-bg); color: var(--vf-success-ink); }
[data-vf-theme] .badge-info { background-color: var(--vf-info-bg); color: var(--vf-info-ink); }
[data-vf-theme] .badge-warning { background-color: var(--vf-warning-bg); color: var(--vf-warning-ink); }
[data-vf-theme] .badge-danger { background-color: var(--vf-danger-bg); color: var(--vf-danger-ink); }

[data-vf-theme] .alert { border-radius: var(--vf-radius-alert); border-width: 1px; }
[data-vf-theme] .alert a:not(.btn) { color: inherit; text-decoration: underline; }
[data-vf-theme] .alert .close { color: inherit; opacity: .5; text-shadow: none; }
[data-vf-theme] .alert-success { background-color: var(--vf-success-bg); border-color: var(--vf-success-border); color: var(--vf-success-ink); }
[data-vf-theme] .alert-info { background-color: var(--vf-info-bg); border-color: var(--vf-info-border); color: var(--vf-info-ink); }
[data-vf-theme] .alert-warning { background-color: var(--vf-warning-bg); border-color: var(--vf-warning-border); color: var(--vf-warning-ink); }
[data-vf-theme] .alert-danger { background-color: var(--vf-danger-bg); border-color: var(--vf-danger-border); color: var(--vf-danger-ink); }
[data-vf-theme] .alert-primary { background-color: var(--vf-primary-soft); border-color: var(--vf-primary-soft); color: var(--vf-primary-ink); }
[data-vf-theme] .alert-secondary,
[data-vf-theme] .alert-light { background-color: var(--vf-surface-alt); border-color: var(--vf-border); color: var(--vf-text); }

/* ── Dashboard-tegels (small-box) ─────────────────────────────────────── */

[data-vf-theme] .small-box { border-radius: var(--vf-radius-card); box-shadow: var(--vf-shadow-card); overflow: hidden; }
[data-vf-theme] .small-box h3 {
    font-family: var(--vf-font-display);
    font-variation-settings: var(--vf-display-settings);
    font-weight: var(--vf-heading-weight);
    letter-spacing: var(--vf-heading-tracking);
    color: inherit;
}
[data-vf-theme] .small-box .icon { color: var(--vf-kpi-icon); }
[data-vf-theme] .small-box > .small-box-footer { background-color: var(--vf-kpi-footer-bg); }
[data-vf-theme] .small-box > .small-box-footer:hover { background-color: var(--vf-kpi-footer-hover, rgba(0, 0, 0, .1)); }
/* Achtergrond op de tegel, tekstkleur ook op de link-voet (Bootstrap zet .bg-*>a op !important). */
[data-vf-theme] .small-box.bg-info      { background-color: var(--vf-kpi-1-bg) !important; color: var(--vf-kpi-1-ink) !important; }
[data-vf-theme] .small-box.bg-warning   { background-color: var(--vf-kpi-2-bg) !important; color: var(--vf-kpi-2-ink) !important; }
[data-vf-theme] .small-box.bg-success   { background-color: var(--vf-kpi-3-bg) !important; color: var(--vf-kpi-3-ink) !important; }
[data-vf-theme] .small-box.bg-secondary { background-color: var(--vf-kpi-4-bg) !important; color: var(--vf-kpi-4-ink) !important; }
[data-vf-theme] .small-box.bg-danger    { background-color: var(--vf-danger-bg) !important; color: var(--vf-danger-ink) !important; }
[data-vf-theme] .small-box.bg-primary   { background-color: var(--vf-primary) !important; color: var(--vf-primary-contrast) !important; }
[data-vf-theme] .small-box.bg-info > a      { color: var(--vf-kpi-1-ink) !important; }
[data-vf-theme] .small-box.bg-warning > a   { color: var(--vf-kpi-2-ink) !important; }
[data-vf-theme] .small-box.bg-success > a   { color: var(--vf-kpi-3-ink) !important; }
[data-vf-theme] .small-box.bg-secondary > a { color: var(--vf-kpi-4-ink) !important; }
[data-vf-theme] .small-box.bg-danger > a    { color: var(--vf-danger-ink) !important; }
[data-vf-theme] .small-box.bg-primary > a   { color: var(--vf-primary-contrast) !important; }

/* ── Paginering, uitklapmenu's, dialogen, lijsten ─────────────────────── */

[data-vf-theme] .page-item .page-link { color: var(--vf-link); background-color: var(--vf-surface); border-color: var(--vf-border); }
[data-vf-theme] .page-item .page-link:hover { color: var(--vf-heading); background-color: var(--vf-surface-alt); }
[data-vf-theme] .page-item.active .page-link { color: var(--vf-primary-contrast); background-color: var(--vf-primary); border-color: var(--vf-primary); }
[data-vf-theme] .page-item.disabled .page-link { color: var(--vf-muted); background-color: var(--vf-surface); border-color: var(--vf-border); }
[data-vf-theme] .page-item:first-child .page-link { border-top-left-radius: var(--vf-radius-control); border-bottom-left-radius: var(--vf-radius-control); }
[data-vf-theme] .page-item:last-child .page-link { border-top-right-radius: var(--vf-radius-control); border-bottom-right-radius: var(--vf-radius-control); }

[data-vf-theme] .dropdown-menu {
    background-color: var(--vf-surface);
    color: var(--vf-text);
    border-color: var(--vf-border);
    border-radius: var(--vf-radius-pop);
    box-shadow: var(--vf-shadow-pop);
}
[data-vf-theme] .dropdown-item { color: var(--vf-text); }
[data-vf-theme] .dropdown-item:hover,
[data-vf-theme] .dropdown-item:focus { color: var(--vf-heading); background-color: var(--vf-surface-alt); }
[data-vf-theme] .dropdown-item.active,
[data-vf-theme] .dropdown-item:active { color: var(--vf-primary-contrast); background-color: var(--vf-primary); }
[data-vf-theme] .dropdown-item-text { color: var(--vf-muted); }
[data-vf-theme] .dropdown-divider { border-top-color: var(--vf-border); }

[data-vf-theme] .modal-content {
    background-color: var(--vf-surface);
    color: var(--vf-text);
    border: var(--vf-card-border) solid var(--vf-border);
    border-radius: var(--vf-radius-card);
    box-shadow: var(--vf-shadow-pop);
}
[data-vf-theme] .modal-header,
[data-vf-theme] .modal-footer { border-color: var(--vf-border); }
[data-vf-theme] .modal-title { font-family: var(--vf-font-display); font-variation-settings: var(--vf-display-settings); font-weight: var(--vf-heading-weight); }
[data-vf-theme] .close { color: var(--vf-text); text-shadow: none; }

[data-vf-theme] .list-group-item { background-color: var(--vf-surface); border-color: var(--vf-border); color: var(--vf-text); }
[data-vf-theme] .list-group-item.active { background-color: var(--vf-primary); border-color: var(--vf-primary); color: var(--vf-primary-contrast); }
[data-vf-theme] .list-group-item-action:hover { background-color: var(--vf-surface-alt); color: var(--vf-heading); }

[data-vf-theme] .progress { background-color: var(--vf-surface-alt); border-radius: var(--vf-radius-badge); }
[data-vf-theme] .progress-bar { background-color: var(--vf-primary); }

/* ── Inlog-, 2FA- en blokkadeschermen ─────────────────────────────────── */

[data-vf-theme] .login-page,
[data-vf-theme] body.dark-mode.login-page { background-color: var(--vf-login-bg) !important; }
[data-vf-theme] .login-logo,
[data-vf-theme] .login-logo a {
    color: var(--vf-heading);
    font-family: var(--vf-font-display);
    font-variation-settings: var(--vf-display-settings);
    letter-spacing: var(--vf-heading-tracking);
}
[data-vf-theme] .login-logo b,
[data-vf-theme] .login-logo strong { font-weight: var(--vf-heading-weight); }
[data-vf-theme] .login-card-body { background-color: var(--vf-surface); color: var(--vf-text); }
[data-vf-theme] .login-box .card { box-shadow: var(--vf-shadow-pop); overflow: hidden; }
[data-vf-theme] .login-box-msg { color: var(--vf-muted); }

/* ── Verlofkalender (assets/leave-calendar) ───────────────────────────── */

html[data-vf-theme] {
    --lc-border-color: var(--vf-table-border);
    --lc-border-strong: var(--vf-border-strong);
    --lc-color-weekend: var(--vf-surface-alt);
}
[data-vf-theme] .lc-col-name { background: var(--vf-surface); }
[data-vf-theme] .lc-emp-row:nth-child(even) .lc-col-name { background: var(--vf-surface-alt); }
[data-vf-theme] .lc-col-corner,
[data-vf-theme] .lc-col-days-header { background: var(--vf-surface-alt) !important; }
[data-vf-theme] .lc-months-row th,
[data-vf-theme] .lc-days-row th { background: var(--vf-surface-alt); color: var(--vf-text); font-family: var(--vf-font-text); }
[data-vf-theme] .lc-emp-link { color: var(--vf-text); }
[data-vf-theme] .lc-emp-link:hover,
[data-vf-theme] .lc-summary-btn:hover,
[data-vf-theme] .lc-summary-btn:focus { color: var(--vf-link); }

/* ── Changelog (github-markdown-css) ──────────────────────────────────── */

[data-vf-theme] .markdown-body {
    color-scheme: inherit;
    --fontStack-sansSerif: var(--vf-font-text);
    --fgColor-default: var(--vf-text);
    --fgColor-muted: var(--vf-muted);
    --fgColor-accent: var(--vf-link);
    --bgColor-default: transparent;
    --bgColor-muted: var(--vf-surface-alt);
    --bgColor-neutral-muted: var(--vf-surface-alt);
    --borderColor-default: var(--vf-border);
    --borderColor-muted: var(--vf-border);
    --borderColor-neutral-muted: var(--vf-border);
    --focus-outlineColor: var(--vf-primary);
    color: var(--vf-text);
    background-color: transparent;
}
[data-vf-theme] .markdown-body :is(h1, h2, h3, h4) {
    font-family: var(--vf-font-display);
    font-variation-settings: var(--vf-display-settings);
    font-weight: var(--vf-heading-weight);
    letter-spacing: var(--vf-heading-tracking);
    color: var(--vf-heading);
}