/*
 * MijnBEVA huisstijl (fase 5I) — ENE plek voor kleuren, lettertype en componentstijlen.
 * Bron: de MijnBEVA Brand & Style Guidelines v1.0 (stylebook/styleguide.md). Wordt NA AdminLTE geladen en overschrijft
 * Bootstrap 5.3 / AdminLTE 4 via hun eigen variabelen en componentklassen. Geen build nodig (statisch bestand).
 *
 * Afwijkingen van de styleguide die uit de styleguide ZELF volgen (WCAG 2.2 AA, §8) staan hieronder gemarkeerd met [AA]:
 *  - Groen #168B3C haalt op wit 4,38:1 (< 4,5:1). Waar tekst op groen staat (knoppen, labels, tekst) gebruiken we
 *    --brand-green-strong; het merkgroen blijft voor accenten, randen, pictogrammen en het logo.
 *  - Border Grey #E2E8F0 haalt op wit 1,23:1 (< 3:1 voor UI-elementen). Invoervelden en keuzevakjes gebruiken
 *    --border-input; scheidingslijnen en kaartranden blijven --border-default.
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root,
[data-bs-theme="light"] {
    /* Merk (styleguide §3.1) */
    --brand-navy: #05294B;
    --brand-green: #168B3C;
    --brand-navy-dark: #031E38;
    --brand-green-strong: #137A34;           /* [AA] 5,44:1 met wit */

    /* Vlakken en tekst (§3.2) */
    --background: #F7FAFC;
    --surface: #FFFFFF;
    --surface-success: #EAF5ED;
    --text-primary: #031E38;
    --text-secondary: #64748B;
    --border-default: #E2E8F0;
    --border-input: #8190A5;                 /* [AA] 3,25:1 met wit */

    /* Functionele statuskleuren (§3.3) */
    --status-success: #168B3C;
    --status-success-text: #137A34;          /* [AA] */
    --status-warning: #B45309;
    --status-error: #B91C1C;
    --status-info: #2563EB;
    --status-inactive: #64748B;
    --status-success-bg: #EAF5ED;
    --status-warning-bg: #FEF3E7;
    --status-error-bg: #FDECEC;
    --status-info-bg: #E8EFFD;

    /* Typografie (§4) en vorm (§3.4) */
    --font-family: "Inter", Arial, sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --focus-ring: #2563EB;
    --shadow-card: 0 1px 2px rgba(3, 30, 56, .06), 0 1px 3px rgba(3, 30, 56, .04);

    /* Bootstrap 5.3 */
    --bs-font-sans-serif: var(--font-family);
    --bs-body-font-family: var(--font-family);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--text-primary);
    --bs-body-color-rgb: 3, 30, 56;
    --bs-body-bg: var(--surface);
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-secondary-color: var(--text-secondary);
    --bs-secondary-color-rgb: 100, 116, 139;
    --bs-secondary-bg: var(--background);
    --bs-secondary-bg-rgb: 247, 250, 252;
    --bs-tertiary-bg: var(--background);
    --bs-tertiary-bg-rgb: 247, 250, 252;
    --bs-emphasis-color: var(--text-primary);
    --bs-heading-color: var(--brand-navy);
    --bs-border-color: var(--border-default);
    --bs-border-color-translucent: rgba(5, 41, 75, .12);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: var(--radius-md);
    --bs-border-radius-xl: var(--radius-lg);

    --bs-primary: var(--brand-navy);
    --bs-primary-rgb: 5, 41, 75;
    --bs-success: var(--status-success-text);
    --bs-success-rgb: 19, 122, 52;
    --bs-warning: var(--status-warning);
    --bs-warning-rgb: 180, 83, 9;
    --bs-danger: var(--status-error);
    --bs-danger-rgb: 185, 28, 28;
    --bs-info: var(--status-info);
    --bs-info-rgb: 37, 99, 235;
    --bs-secondary: var(--status-inactive);
    --bs-secondary-rgb: 100, 116, 139;
    --bs-light: var(--background);
    --bs-light-rgb: 247, 250, 252;
    --bs-dark: var(--brand-navy-dark);
    --bs-dark-rgb: 3, 30, 56;

    --bs-success-bg-subtle: var(--status-success-bg);
    --bs-success-border-subtle: #BFE0C9;
    --bs-success-text-emphasis: #0E5A26;
    --bs-warning-bg-subtle: var(--status-warning-bg);
    --bs-warning-border-subtle: #F4D2AE;
    --bs-warning-text-emphasis: #7C3A06;
    --bs-danger-bg-subtle: var(--status-error-bg);
    --bs-danger-border-subtle: #F2BCBC;
    --bs-danger-text-emphasis: #8E1616;
    --bs-info-bg-subtle: var(--status-info-bg);
    --bs-info-border-subtle: #BCCFF8;
    --bs-info-text-emphasis: #1B4DB8;
    --bs-primary-bg-subtle: #E6ECF3;
    --bs-primary-border-subtle: #B6C4D6;
    --bs-primary-text-emphasis: var(--brand-navy);
    --bs-secondary-bg-subtle: #EEF2F6;
    --bs-secondary-border-subtle: var(--border-default);
    --bs-secondary-text-emphasis: #475569;

    --bs-link-color: #1B4DB8;
    --bs-link-color-rgb: 27, 77, 184;
    --bs-link-hover-color: var(--brand-navy);
    --bs-link-hover-color-rgb: 5, 41, 75;
    --bs-focus-ring-color: rgba(37, 99, 235, .35);
    --bs-form-invalid-color: var(--status-error);
    --bs-form-invalid-border-color: var(--status-error);
    --bs-form-valid-color: var(--status-success-text);
    --bs-form-valid-border-color: var(--status-success);
}

html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-family); background: var(--background); color: var(--text-primary); }
.bg-body-tertiary, .bg-body-secondary { background-color: var(--background) !important; }
a { text-underline-offset: .15em; }

/* Koppen (§4.2): H1 32/700, H2 24/600, H3 20/600, H4 18/500; compacter op een telefoon. */
h1, .h1 { font-size: 1.625rem; font-weight: 700; color: var(--brand-navy); letter-spacing: -.01em; }
h2, .h2 { font-size: 1.375rem; font-weight: 600; color: var(--brand-navy); }
h3, .h3 { font-size: 1.125rem; font-weight: 600; color: var(--brand-navy); }
h4, .h4 { font-size: 1.0625rem; font-weight: 500; color: var(--brand-navy); }
@media (min-width: 768px) {
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    h4, .h4 { font-size: 1.125rem; }
}
.small, small { font-size: .875rem; }
label, .form-label { font-size: .875rem; font-weight: 500; color: var(--text-primary); }
.text-secondary, .text-body-secondary { color: var(--text-secondary) !important; }
.text-success { color: var(--status-success-text) !important; }
.text-danger { color: var(--status-error) !important; }
.text-warning { color: var(--status-warning) !important; }
.text-info { color: var(--status-info) !important; }

/* Toegankelijke focus (§8): overal een duidelijke ring, op donkere vlakken lichter. */
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.app-sidebar :focus-visible, .impersonation-banner :focus-visible { outline-color: #fff; }
.form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus-visible, .btn-check:focus-visible + .btn {
    box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .3);
}
.form-control:focus, .form-select:focus { border-color: var(--focus-ring); outline: 0; }

/* ---------- Knoppen (§6.3) ---------- */
.btn {
    --bs-btn-border-radius: var(--radius-md);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: .9375rem;
    min-height: 2.5rem;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    text-align: center;
}
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .875rem; --bs-btn-border-radius: var(--radius-md); min-height: 2.25rem; }
.btn-lg { --bs-btn-padding-y: .65rem; --bs-btn-font-size: 1.0625rem; min-height: 3rem; }
.btn-link { min-height: 0; font-weight: 500; }
/* Primair: Navy */
.btn-primary {
    --bs-btn-bg: var(--brand-navy); --bs-btn-border-color: var(--brand-navy); --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--brand-navy-dark); --bs-btn-hover-border-color: var(--brand-navy-dark); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--brand-navy-dark); --bs-btn-active-border-color: var(--brand-navy-dark); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--brand-navy); --bs-btn-disabled-border-color: var(--brand-navy); --bs-btn-disabled-color: #fff;
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
/* Secundair: wit met Navy rand en tekst */
.btn-outline-secondary, .btn-outline-primary {
    --bs-btn-color: var(--brand-navy); --bs-btn-bg: #fff; --bs-btn-border-color: var(--brand-navy);
    --bs-btn-hover-bg: #E6ECF3; --bs-btn-hover-border-color: var(--brand-navy); --bs-btn-hover-color: var(--brand-navy);
    --bs-btn-active-bg: #D5DFEA; --bs-btn-active-border-color: var(--brand-navy); --bs-btn-active-color: var(--brand-navy);
    --bs-btn-disabled-color: var(--text-secondary); --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: var(--border-input);
    --bs-btn-focus-shadow-rgb: 37, 99, 235;
}
.btn-secondary {
    --bs-btn-bg: var(--status-inactive); --bs-btn-border-color: var(--status-inactive); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #475569; --bs-btn-hover-border-color: #475569; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #475569; --bs-btn-active-border-color: #475569; --bs-btn-active-color: #fff;
}
/* Positief: Green, alleen voor bevestigende acties */
.btn-success {
    --bs-btn-bg: var(--brand-green-strong); --bs-btn-border-color: var(--brand-green-strong); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #0E5A26; --bs-btn-hover-border-color: #0E5A26; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0E5A26; --bs-btn-active-border-color: #0E5A26; --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--brand-green-strong); --bs-btn-disabled-border-color: var(--brand-green-strong);
}
.btn-outline-success {
    --bs-btn-color: var(--brand-green-strong); --bs-btn-border-color: var(--brand-green-strong); --bs-btn-bg: #fff;
    --bs-btn-hover-bg: var(--brand-green-strong); --bs-btn-hover-border-color: var(--brand-green-strong); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #0E5A26; --bs-btn-active-border-color: #0E5A26; --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: var(--text-secondary); --bs-btn-disabled-border-color: var(--border-input);
}
/* Destructief: fout-accent */
.btn-danger {
    --bs-btn-bg: var(--status-error); --bs-btn-border-color: var(--status-error); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #8E1616; --bs-btn-hover-border-color: #8E1616; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #8E1616; --bs-btn-active-border-color: #8E1616; --bs-btn-active-color: #fff;
}
.btn-outline-danger {
    --bs-btn-color: var(--status-error); --bs-btn-border-color: var(--status-error); --bs-btn-bg: #fff;
    --bs-btn-hover-bg: var(--status-error); --bs-btn-hover-border-color: var(--status-error); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #8E1616; --bs-btn-active-border-color: #8E1616; --bs-btn-active-color: #fff;
}
.btn-warning {
    --bs-btn-bg: var(--status-warning); --bs-btn-border-color: var(--status-warning); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #7C3A06; --bs-btn-hover-border-color: #7C3A06; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #7C3A06; --bs-btn-active-border-color: #7C3A06; --bs-btn-active-color: #fff;
}
.btn-outline-warning {
    --bs-btn-color: var(--status-warning); --bs-btn-border-color: var(--status-warning); --bs-btn-bg: #fff;
    --bs-btn-hover-bg: var(--status-warning); --bs-btn-hover-border-color: var(--status-warning); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #7C3A06; --bs-btn-active-border-color: #7C3A06; --bs-btn-active-color: #fff;
}
.btn-dark {
    --bs-btn-bg: var(--brand-navy-dark); --bs-btn-border-color: var(--brand-navy-dark); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; --bs-btn-hover-color: #fff;
}

/* ---------- Labels, statussen en meldingen (§3.3, §6.5) ---------- */
.badge { line-height: 1.25; white-space: normal; max-width: 100%; text-align: left; font-weight: 600; font-size: .8125rem; padding: .35em .65em; border-radius: var(--radius-sm); letter-spacing: .01em; }
.badge + .badge { margin-left: .25rem; }
.text-bg-primary { color: #fff !important; background-color: var(--brand-navy) !important; }
.text-bg-success { color: #fff !important; background-color: var(--brand-green-strong) !important; }
.text-bg-warning { color: #fff !important; background-color: var(--status-warning) !important; }
.text-bg-danger { color: #fff !important; background-color: var(--status-error) !important; }
.text-bg-info { color: #fff !important; background-color: var(--status-info) !important; }
.text-bg-secondary { color: #fff !important; background-color: var(--status-inactive) !important; }
.text-bg-dark { color: #fff !important; background-color: var(--brand-navy-dark) !important; }
.text-bg-light { color: var(--text-primary) !important; background-color: var(--background) !important; box-shadow: inset 0 0 0 1px var(--border-default); }

.alert {
    --bs-alert-border-radius: var(--radius-md);
    --bs-alert-padding-y: .875rem; --bs-alert-padding-x: 1.125rem;
    border-left-width: 4px;
}
.alert-success { --bs-alert-color: #0E5A26; --bs-alert-bg: var(--status-success-bg); --bs-alert-border-color: #BFE0C9; border-left-color: var(--status-success); }
.alert-warning { --bs-alert-color: #7C3A06; --bs-alert-bg: var(--status-warning-bg); --bs-alert-border-color: #F4D2AE; border-left-color: var(--status-warning); }
.alert-danger { --bs-alert-color: #8E1616; --bs-alert-bg: var(--status-error-bg); --bs-alert-border-color: #F2BCBC; border-left-color: var(--status-error); }
.alert-info { --bs-alert-color: #1B4DB8; --bs-alert-bg: var(--status-info-bg); --bs-alert-border-color: #BCCFF8; border-left-color: var(--status-info); }
.alert-secondary, .alert-light, .alert-dark { --bs-alert-color: var(--text-primary); --bs-alert-bg: #EEF2F6; --bs-alert-border-color: var(--border-default); border-left-color: var(--status-inactive); }
.alert-link { font-weight: 600; }

/* ---------- Kaarten (§6.4) ---------- */
.card {
    --bs-card-border-color: var(--border-default);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-cap-bg: var(--surface);
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-bg: var(--surface);
    box-shadow: var(--shadow-card);
}
.card-header { border-bottom-color: var(--border-default); font-weight: 600; }
.card-header .card-title, .card-title { font-size: 1.125rem; font-weight: 600; color: var(--brand-navy); }
.card-title { float: none; margin: 0; }
/* AdminLTE's clearfix pseudo-elements become flex items in a flex card header and push the right-hand content to the middle. */
.card-header::before, .card-header::after, .card-footer::before, .card-footer::after { content: none; display: none; }
.list-group-item.d-flex { column-gap: .75rem; }
.card-footer { background: var(--background); border-top-color: var(--border-default); }
.card-outline.card-primary { border-top: 3px solid var(--brand-green); }
.card.border-danger { border-color: var(--status-error) !important; }
.list-group-item { border-color: var(--border-default); }

/* ---------- Formulieren (§8: zichtbare labels, contrast) ---------- */
.form-control, .form-select {
    min-height: 2.5rem; border-color: var(--border-input); border-radius: var(--radius-md); color: var(--text-primary); background-color: #fff;
}
.form-control::placeholder { color: var(--text-secondary); opacity: 1; }
.form-control:disabled, .form-select:disabled { background-color: var(--background); color: var(--text-secondary); }
.form-control-sm, .form-select-sm { min-height: 2.25rem; border-radius: var(--radius-md); }
textarea.form-control { min-height: 5rem; }
.form-check-input { border-color: var(--border-input); width: 1.15em; height: 1.15em; }
.form-check-input:checked { background-color: var(--brand-navy); border-color: var(--brand-navy); }
.form-check-input[type="radio"]:checked { background-color: var(--brand-navy); border-color: var(--brand-navy); }
.form-check-input:focus { border-color: var(--focus-ring); }
.form-text { color: var(--text-secondary); }
.invalid-feedback, .form-control.is-invalid ~ .invalid-feedback { color: var(--status-error); font-weight: 500; }
.invalid-feedback::before { content: "\26A0\FE0E\00a0"; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--status-error); border-width: 2px; }
.input-group-text { background: var(--background); border-color: var(--border-input); }

/* ---------- Tabellen ---------- */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--border-default); --bs-table-hover-bg: #EEF3F8; --bs-table-striped-bg: var(--background); }
.table > thead > tr > th, .table > :not(caption) > * > th { font-weight: 600; color: var(--brand-navy-dark); }
.table > thead { background: var(--background); }
.table > thead > tr > th { border-bottom: 2px solid var(--border-default); font-size: .875rem; vertical-align: bottom; }
.table-light { --bs-table-bg: var(--background); --bs-table-color: var(--brand-navy-dark); --bs-table-border-color: var(--border-default); }
.table-responsive { -webkit-overflow-scrolling: touch; }
.table td, .table th { padding: .65rem .75rem; }
.table-hover > tbody > tr:hover > * { color: var(--text-primary); }
.table-danger, .table-warning, .table-success { --bs-table-color: var(--text-primary); }
.table-danger { --bs-table-bg: var(--status-error-bg); --bs-table-border-color: #F2BCBC; }
.table-warning { --bs-table-bg: var(--status-warning-bg); --bs-table-border-color: #F4D2AE; }
.table-success { --bs-table-bg: var(--status-success-bg); --bs-table-border-color: #BFE0C9; }

/* Navigatiegedeelten, dropdowns, paginering, broodkruimels */
.dropdown-menu { border-color: var(--border-default); border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(3, 30, 56, .12); padding: .35rem; }
.dropdown-item { border-radius: var(--radius-sm); padding: .5rem .75rem; color: var(--text-primary); }
.dropdown-item:hover, .dropdown-item:focus { background: #E6ECF3; color: var(--brand-navy); }
.dropdown-item.active, .dropdown-item:active { background: var(--brand-navy); color: #fff; }
.dropdown-header { color: var(--text-secondary); font-weight: 600; }
.pagination { --bs-pagination-color: var(--brand-navy); --bs-pagination-active-bg: var(--brand-navy); --bs-pagination-active-border-color: var(--brand-navy);
    --bs-pagination-border-color: var(--border-default); --bs-pagination-hover-bg: #E6ECF3; --bs-pagination-hover-color: var(--brand-navy);
    --bs-pagination-focus-color: var(--brand-navy); --bs-pagination-border-radius: var(--radius-sm); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--text-secondary); --bs-breadcrumb-item-active-color: var(--text-secondary); font-size: .875rem; }
.modal-content { border-radius: var(--radius-lg); border-color: var(--border-default); }
.modal-header, .modal-footer { border-color: var(--border-default); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--brand-navy); --bs-nav-tabs-border-color: var(--border-default); --bs-nav-link-color: var(--text-secondary); --bs-nav-link-hover-color: var(--brand-navy); }
.nav-tabs .nav-link.active { font-weight: 600; border-bottom: 3px solid var(--brand-green); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--brand-navy); }
.progress { --bs-progress-bar-bg: var(--brand-green-strong); --bs-progress-border-radius: var(--radius-sm); }

/* ---------- Applicatieskelet (§6.2): Navy zijbalk, wit hoofdvlak, groene accenten ---------- */
.app-header { background: var(--surface) !important; border-bottom: 1px solid var(--border-default); box-shadow: none; }
.app-header .nav-link { color: var(--brand-navy); font-weight: 500; }
.app-header .nav-link:hover { color: var(--brand-navy-dark); }
.app-header .header-brand { display: inline-flex; align-items: center; padding: 0; margin-left: .25rem; }
.app-header .header-brand img { height: 2rem; width: auto; display: block; }
.app-main { background: var(--background); }
.app-content-header { padding: 1.25rem .5rem .5rem; }
.app-content-header h1 { margin: 0; }
.app-content-header .help-link { font-size: .875rem; font-weight: 500; white-space: nowrap; }
.app-footer { background: var(--surface); color: var(--text-secondary); font-size: .875rem; border-top: 1px solid var(--border-default); }
.app-footer strong { color: var(--brand-navy); }

.app-sidebar {
    --lte-sidebar-color: #D3DCE8;
    --lte-sidebar-hover-color: #fff;
    --lte-sidebar-hover-bg: rgba(255, 255, 255, .08);
    --lte-sidebar-menu-active-bg: rgba(255, 255, 255, .14);
    --lte-sidebar-menu-active-color: #fff;
    --lte-sidebar-header-color: #A9B9CD;
    background: var(--brand-navy) !important;
    border-right: 0;
    box-shadow: 2px 0 8px rgba(3, 30, 56, .12) !important;
}
.app-sidebar .sidebar-brand { height: auto; padding: 0; border-bottom: 0; background: #fff; display: block; }
.app-sidebar .brand-link {
    display: flex; align-items: center; justify-content: center; padding: .85rem 1rem; background: #fff; border-bottom: 3px solid var(--brand-green);
}
.app-sidebar .brand-logo { display: block; width: 100%; max-width: 13.5rem; min-width: 11.25rem; height: auto; }
.app-sidebar .sidebar-menu .nav-link { color: var(--lte-sidebar-color); border-radius: var(--radius-md); border-left: 3px solid transparent; font-weight: 500; }
.app-sidebar .sidebar-menu .nav-link p { white-space: normal; }
.app-sidebar .sidebar-menu .nav-link:hover { color: #fff; background: var(--lte-sidebar-hover-bg); }
.app-sidebar .sidebar-menu .nav-link.active {
    color: #fff; background: var(--lte-sidebar-menu-active-bg); border-left-color: #4ADE80; font-weight: 600; box-shadow: none;
}
.app-sidebar .sidebar-menu .nav-link.active .nav-icon { color: #4ADE80; }
.app-sidebar .sidebar-menu .nav-header { white-space: normal; overflow: visible; text-overflow: clip; color: var(--lte-sidebar-header-color); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

/* Impersonatie (fase 5E): duidelijke waarschuwingsbalk; een tekstlabel, niet alleen kleur. */
.impersonation-banner {
    position: fixed; top: 0; left: 0; right: 0; height: 2.75rem; z-index: 2000; display: flex; align-items: center; gap: .5rem; padding: 0 1rem;
    background: var(--status-warning); color: #fff; border-bottom: 2px solid #7C3A06;
}
.impersonation-banner .btn { --bs-btn-bg: #fff; --bs-btn-color: #7C3A06; --bs-btn-border-color: #fff; --bs-btn-hover-bg: #FEF3E7; --bs-btn-hover-color: #7C3A06; --bs-btn-hover-border-color: #FEF3E7; min-height: 2rem; }
body.has-impersonation { padding-top: 2.75rem; }
body.has-impersonation .app-sidebar { top: 2.75rem !important; height: calc(100vh - 2.75rem) !important; }

/* Verlopen/inactief-weergaven blijven functioneel: een lopende status heeft altijd een tekstlabel. */
.context-label { max-width: 9.5rem; }
@media (min-width: 768px) { .context-label { max-width: 24rem; } }

/* ---------- Inlogpagina's en foutpagina's ---------- */
.login-page { background: var(--background); min-height: 100vh; }
.login-box { width: min(26rem, 92vw); }
.login-brand { text-align: center; margin-bottom: 1.5rem; }
.login-brand img { width: min(18rem, 80%); min-width: 11.25rem; height: auto; }
.login-box .card { border-top: 4px solid var(--brand-green); }
.login-box-msg { font-size: 1.125rem; font-weight: 600; color: var(--brand-navy); padding: 0 0 1rem; }
.error-page { text-align: center; }
.error-page .error-logo { width: min(16rem, 70%); height: auto; margin-bottom: 1.5rem; }
.error-page .error-code { font-size: 4rem; font-weight: 700; color: var(--brand-navy); line-height: 1; }

/* ---------- Helpcentrum (fase 5H-1) ---------- */
.help-content { max-width: 60rem; line-height: 1.6; }
.help-content h2 { font-size: 1.375rem; margin-top: 2rem; padding-top: .5rem; border-top: 1px solid var(--border-default); }
.help-content h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.help-content h3 { font-size: 1.125rem; margin-top: 1.5rem; }
.help-content img { max-width: 100%; height: auto; border: 1px solid var(--border-default); border-radius: var(--radius-md); margin: .5rem 0 1rem; box-shadow: var(--shadow-card); }
.help-content table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.help-content th, .help-content td { border: 1px solid var(--border-default); padding: .5rem .75rem; vertical-align: top; }
.help-content th { background: var(--background); color: var(--brand-navy-dark); }
.help-content blockquote { border-left: 4px solid var(--brand-green); background: var(--surface-success); padding: .75rem 1rem; border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.help-content :target { scroll-margin-top: 4rem; }

/* Lege toestanden */
.empty-state { color: var(--text-secondary); text-align: center; padding: 1.5rem 1rem; }

/* Mobiel: tabellen scrollen binnen hun kaart, nooit de hele pagina; aanraakvlakken blijven groot genoeg. */
@media (max-width: 767.98px) {
    .app-content-header { padding-top: 1rem; }
    .card > .table, .card-body > .table { display: block; overflow-x: auto; max-width: 100%; }
    .btn { min-height: 2.75rem; }
    .btn-sm { min-height: 2.5rem; }
}

/* Weinig beweging (§11.11) */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }