/*!
 * Design gebaseerd op "FLOW V.4.0 — Flexible Library for Optimised Wireframes" door Little Miss Robot
 * (Figma Community), gelicentieerd onder CC BY 4.0: https://creativecommons.org/licenses/by/4.0/
 * Gewijzigd: vertaald naar eigen CSS met aangepaste elevation, vormen, layouts en thema's.
 * Little Miss Robot is niet betrokken bij en onderschrijft dit werk niet. Zie CREDITS.md.
 */
/* =========================================================
   Sprout — BEHEER (admin), "FLOW refined" licht, accent Sprout-groen
   ---------------------------------------------------------
   Eén statisch bestand (geen build, geen CDN). CSP style-src 'self': geen inline stijl in de views, alles hier.
   Geen externe fonts: Inter als hij lokaal staat, anders de systeemletter.
   Enkel tokens uit :root; nooit een harde offset-schaduw, enkel --e-0 … --e-4.

   1. Tokens          5. Kaarten, KPI's, secties   9. Formulieren
   2. Basis           6. Grafieken                 10. Gebruiker, acties, gevarenzone
   3. Shell           7. Tabellen                  11. Audit, paginering
   4. Knoppen, tags   8. Meldingen, lege staten    12. Inloggen en 2FA
   ====================================================== */

/* 1. Tokens ------------------------------------------------ */
:root {
    --n-1000: #030217;
    --n-900: #100f2a;
    --n-800: #1e1f3b;
    --n-700: #333455;
    --n-600: #474b69;
    --n-500: #64698b;
    --n-400: #9498b8;
    --n-300: #cbcee1;
    --n-200: #ebebf5;
    --n-150: #f1f1f8;
    --n-100: #f8f8fc;
    --n-0: #ffffff;

    --bg: var(--n-100);
    --surface: var(--n-0);
    --text: var(--n-1000);
    --text-2: var(--n-600);
    --text-3: var(--n-500);
    --border: var(--n-200);
    --border-strong: var(--n-300);

    /* Sprout-groen (design/goedgekeurd/sprout.md) */
    --accent: #2f7d46;
    --accent-ink: #ffffff;
    --accent-hover: #256639;
    --accent-press: color-mix(in srgb, var(--accent) 78%, #000);
    --accent-soft: #eef7f0;
    --accent-soft-2: #dcefe1;
    --accent-text: #256639;

    --success-600: #5f9605;
    --success-800: #3d5f06;
    --success-100: #f7fded;
    --success-200: #d6f3a7;
    --warning-600: #ea580c;
    --warning-800: #9a3412;
    --warning-100: #fff4e5;
    --warning-200: #fed7aa;
    --danger-600: #e81745;
    --danger-800: #9f1239;
    --danger-100: #fff0f1;
    --danger-200: #fecdd3;
    --info-600: #0284c7;
    --info-800: #075985;
    --info-100: #f0f9ff;
    --info-200: #bae6fd;

    --r-tiny: 4px;
    --r-small: 8px;
    --r-control: 12px;
    --r-default: 16px;
    --r-card: 20px;
    --r-pill: 999px;
    --r-mark: 10px;

    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;

    --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
    --fs-h1: clamp(28px, 3.2vw, 40px);
    --fs-h2: 20px;
    --fs-h3: 16px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-tiny: 12px;
    --track-display: -0.04em;
    --track-heading: -0.025em;

    --e-0: 0 0 0 1px var(--border);
    --e-1: 0 1px 2px rgba(3, 2, 23, .05);
    --e-2: 0 1px 2px rgba(3, 2, 23, .04), 0 4px 12px -2px rgba(3, 2, 23, .06);
    --e-3: 0 2px 4px rgba(3, 2, 23, .04), 0 12px 32px -6px rgba(3, 2, 23, .12);
    --e-4: 0 4px 8px rgba(3, 2, 23, .04), 0 24px 64px -12px rgba(3, 2, 23, .22);
    --glow: 0 4px 14px -4px color-mix(in srgb, var(--accent) 55%, transparent);
    --ring: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
    --ring-danger: 0 0 0 4px color-mix(in srgb, var(--danger-600) 22%, transparent);

    --ease: cubic-bezier(.2, .8, .2, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;

    --sidebar-w: 248px;
    --content-max: 1200px;
    --gutter: clamp(16px, 4vw, 40px);
    --ctl-h: 44px;

    color-scheme: light;
}

/* 2. Basis ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: 1.5;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: var(--track-heading); text-wrap: balance; color: var(--text); }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
p { text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
svg { display: block; }
code { font-family: var(--font-mono); font-size: .92em; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-small); }

::selection { background: var(--accent-soft-2); color: var(--text); }

.num { font-variant-numeric: tabular-nums; }
.strong { font-weight: 600; }

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip {
    position: absolute;
    top: var(--s-2);
    left: -9999px;
    z-index: 100;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-pill);
    background: var(--n-1000);
    color: var(--n-0);
    font-weight: 600;
    text-decoration: none;
}
.skip:focus { left: var(--s-4); }

.ic { width: 18px; height: 18px; flex-shrink: 0; }

.eyebrow {
    font-size: var(--fs-tiny);
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
}

.lead { font-size: 17px; line-height: 1.55; color: var(--text-2); }

/* 3. Shell ------------------------------------------------- */
.shell {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
    padding: var(--s-5) var(--s-3);
    background: var(--n-100);
    border-right: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 44px;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-control);
    color: inherit;
    text-decoration: none;
    transition: background-color var(--dur-1) var(--ease);
}
a.brand:hover { background: var(--n-150); }
.brand__mark {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--r-mark);
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--glow);
}
.brand__mark .ic { width: 20px; height: 20px; }
.brand__text { display: grid; line-height: 1.2; }
.brand__name { font-size: 15px; font-weight: 700; letter-spacing: var(--track-heading); }
.brand__sub { font-size: var(--fs-tiny); color: var(--text-3); }

.sidebar__nav { flex: 1; min-height: 0; overflow-y: auto; }
.nav-list { display: grid; gap: 2px; list-style: none; }
.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 0 var(--s-3);
    border-radius: var(--r-control);
    color: var(--text-2);
    font-size: var(--fs-small);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.nav-link .ic { color: var(--text-3); }
.nav-link:hover { background: var(--n-150); color: var(--text); }
.nav-link:focus-visible { box-shadow: var(--ring); border-radius: var(--r-control); }
.nav-link[aria-current="page"] {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: var(--e-0), var(--e-1);
}
.nav-link[aria-current="page"] .ic { color: var(--accent); }

.sidebar__foot {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-2) 0;
    border-top: 1px solid var(--border);
}
.sidebar__who { font-size: var(--fs-tiny); color: var(--text-3); overflow-wrap: anywhere; }
.sidebar__foot .btn { justify-self: start; }

.main { min-width: 0; outline: none; }
.main__inner {
    width: 100%;
    max-width: calc(var(--content-max) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--s-10) var(--gutter) var(--s-16);
    display: grid;
    gap: var(--s-8);
}

/* Tablet en gsm: zijbalk wordt een kopbalk; de navigatie breekt af over meerdere regels, zodat elk item (ook het
   actieve) zonder JavaScript of horizontaal scrollen zichtbaar is. Niet sticky: de kop is dan te hoog. */
@media (max-width: 1023px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
        position: static;
        height: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "brand foot" "nav nav";
        gap: var(--s-2) var(--s-3);
        padding: var(--s-3) var(--gutter) var(--s-2);
        border-right: 0;
        border-bottom: 1px solid var(--border);
        background: var(--n-100);
    }
    .sidebar .brand { grid-area: brand; justify-self: start; }
    .sidebar__nav { grid-area: nav; overflow: visible; }
    .nav-list { display: flex; flex-wrap: wrap; gap: var(--s-1); padding: 2px 0 var(--s-1); }
    .nav-link { min-height: 40px; padding: 0 10px; }
    .sidebar__foot {
        grid-area: foot;
        display: flex;
        align-items: center;
        gap: var(--s-3);
        padding: 0;
        border-top: 0;
    }
    .main__inner { padding-top: var(--s-8); gap: var(--s-6); }
}

@media (max-width: 640px) {
    .sidebar__who { display: none; }
}

/* 4. Knoppen, tags ----------------------------------------- */
.btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--text);
    --btn-bd: var(--border-strong);
    --btn-sh: var(--e-1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: var(--btn-sh);
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover { --btn-bd: var(--n-400); --btn-sh: var(--e-2); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { box-shadow: var(--btn-sh), var(--ring); border-radius: var(--r-pill); }

.btn--primary {
    --btn-bg: var(--accent);
    --btn-fg: var(--accent-ink);
    --btn-bd: transparent;
    --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(3, 2, 23, .12), var(--glow);
}
.btn--primary:hover { --btn-bg: var(--accent-hover); --btn-bd: transparent; }
.btn--primary:active { --btn-bg: var(--accent-press); }

.btn--secondary { --btn-bg: var(--surface); }

.btn--ghost { --btn-bg: var(--n-150); --btn-bd: transparent; --btn-sh: none; }
.btn--ghost:hover { --btn-bg: var(--n-200); --btn-bd: transparent; --btn-sh: none; }

.btn--danger {
    --btn-bg: var(--danger-600);
    --btn-fg: var(--n-0);
    --btn-bd: transparent;
    --btn-sh: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(3, 2, 23, .12);
}
.btn--danger:hover { --btn-bg: var(--danger-800); --btn-bd: transparent; }
.btn--danger:focus-visible { box-shadow: var(--btn-sh), var(--ring-danger); }

.btn--small { min-height: 40px; padding: 0 16px; font-size: var(--fs-small); }
.btn--full { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    --btn-sh: none;
}

.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--n-150);
    color: var(--n-700);
    font-size: var(--fs-tiny);
    line-height: 16px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px var(--border);
}
.tag--accent { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-soft-2); }
.tag--success { background: var(--success-100); color: var(--success-800); box-shadow: inset 0 0 0 1px var(--success-200); }
.tag--warning { background: var(--warning-100); color: var(--warning-800); box-shadow: inset 0 0 0 1px var(--warning-200); }
.tag--danger { background: var(--danger-100); color: var(--danger-800); box-shadow: inset 0 0 0 1px var(--danger-200); }
.tag--info { background: var(--info-100); color: var(--info-800); box-shadow: inset 0 0 0 1px var(--info-200); }
.dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: currentColor; }

/* 5. Kaarten, KPI's, secties -------------------------------- */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-5) var(--s-8);
}
.page-head__text { display: grid; gap: var(--s-2); max-width: 640px; min-width: 0; }
.page-head h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: var(--track-display); }
.page-head h1 span { color: var(--text-3); }
.page-head__mail { overflow-wrap: anywhere; }
.page-head--user .tags { margin-top: var(--s-1); }

.period { display: grid; gap: var(--s-2); justify-items: end; }
.period__range { font-size: var(--fs-small); color: var(--text-3); }
.segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--r-pill);
    background: var(--n-150);
    box-shadow: inset 0 0 0 1px var(--border);
}
.segmented__item {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: var(--r-pill);
    color: var(--text-2);
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.segmented__item:hover { color: var(--text); }
.segmented__item:focus-visible { border-radius: var(--r-pill); }
.segmented__item[aria-current="true"] { background: var(--surface); color: var(--text); box-shadow: var(--e-0), var(--e-1); }

@media (max-width: 640px) {
    .page-head { align-items: stretch; }
    .period { justify-items: stretch; width: 100%; }
    .segmented { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .segmented__item { justify-content: center; padding: 0 var(--s-2); }
}

.section { display: grid; gap: var(--s-4); min-width: 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.section__title { font-size: var(--fs-h2); line-height: 1.3; }
.section__meta { font-size: var(--fs-small); color: var(--text-3); }
.section__link { font-size: var(--fs-small); font-weight: 600; color: var(--accent-text); border-radius: var(--r-tiny); }

.card {
    min-width: 0;
    padding: var(--s-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    display: grid;
    gap: var(--s-4);
    align-content: start;
}
.card--raised { border-color: transparent; box-shadow: var(--e-0), var(--e-2); }
.card--flush { padding: 0; gap: 0; overflow: hidden; }
.card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3) var(--s-6); }
.card__head > div { display: grid; gap: var(--s-1); min-width: 0; }
.card__title { font-size: 17px; line-height: 1.35; letter-spacing: var(--track-heading); }
.card__subtitle { font-size: var(--fs-small); font-weight: 600; color: var(--text-2); margin-top: var(--s-2); }
.card__sub { font-size: var(--fs-small); line-height: 20px; color: var(--text-3); }
.card__note { font-size: var(--fs-tiny); line-height: 16px; color: var(--text-3); }
.card__figure { font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: var(--track-display); }
.card__figure span { display: block; margin-top: 2px; font-size: var(--fs-tiny); font-weight: 500; letter-spacing: 0; color: var(--text-3); }
@media (max-width: 640px) { .card { padding: var(--s-5) var(--s-4); } .card--flush { padding: 0; } }

.kpis { display: grid; gap: var(--s-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .kpis--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .kpis { grid-template-columns: minmax(0, 1fr); } }

.kpi {
    min-width: 0;
    padding: var(--s-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    display: grid;
    gap: var(--s-1);
    align-content: start;
}
.kpi--lifted { border-color: transparent; box-shadow: var(--e-0), var(--e-2); }
.kpi__label { font-size: var(--fs-small); font-weight: 500; color: var(--text-2); overflow-wrap: anywhere; hyphens: auto; }
.kpi__value { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; font-weight: 600; letter-spacing: var(--track-display); overflow-wrap: anywhere; }
.kpi__hint { font-size: var(--fs-tiny); line-height: 16px; color: var(--text-3); }
@media (max-width: 640px) { .kpi { padding: var(--s-4); } }

.budget__figure { font-size: clamp(28px, 3vw, 36px); line-height: 1.1; font-weight: 600; letter-spacing: var(--track-display); margin-top: var(--s-1); }
.budget__figure span { font-size: var(--fs-body); font-weight: 500; letter-spacing: 0; color: var(--text-3); }

.detail-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .detail-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .detail-grid, .detail-grid--3 { grid-template-columns: minmax(0, 1fr); } }

.facts { display: grid; }
.facts > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-1) var(--s-4);
    padding: 10px 0;
    border-top: 1px solid var(--border);
    font-size: var(--fs-small);
}
.facts > div:first-child { border-top: 0; padding-top: 0; }
.facts dt { color: var(--text-3); }
.facts dd { font-weight: 500; text-align: right; overflow-wrap: anywhere; }

/* 6. Grafieken --------------------------------------------- */
.chart { display: grid; gap: var(--s-2); min-width: 0; }
.chart__svg { width: 100%; overflow: visible; }
.chart__base { stroke: var(--border-strong); stroke-width: 1; }
.chart__area { fill: var(--accent-soft); }
.chart__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__dot { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; }
.chart__bar { fill: var(--accent); }
.chart__bar:hover { fill: var(--accent-hover); }
.chart__missing { fill: var(--n-300); }
.chart__hit { fill: transparent; }
.chart__hit:hover { fill: color-mix(in srgb, var(--accent) 8%, transparent); }
.chart__axis { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-tiny); color: var(--text-3); font-variant-numeric: tabular-nums; }
.chart__axis span { white-space: nowrap; }
.chart__empty {
    padding: var(--s-6) var(--s-4);
    border-radius: var(--r-default);
    background: var(--n-100);
    color: var(--text-3);
    font-size: var(--fs-small);
    text-align: center;
}
.chart__data summary {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--accent-text);
    font-size: var(--fs-small);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--r-small);
}
.chart__data summary:hover { text-decoration: underline; }
.chart__data[open] .table-wrap { max-height: 320px; overflow-y: auto; margin-top: var(--s-2); border: 1px solid var(--border); border-radius: var(--r-control); }

.bar-list .table-wrap { overflow-x: visible; }
.table--bars { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table--bars th, .table--bars td { padding: 8px 0; border-top: 1px solid var(--border); vertical-align: middle; }
.table--bars tbody tr:first-child th, .table--bars tbody tr:first-child td { border-top: 0; }
.bar-list__label { text-align: left; font-weight: 500; width: 38%; padding-right: var(--s-3) !important; overflow-wrap: anywhere; }
.bar-list__hint { display: block; font-family: var(--font-mono); font-size: var(--fs-tiny); font-weight: 400; color: var(--text-3); }
.bar-list--species .bar-list__label > span:first-child { font-style: italic; }
.bar-list__bar { width: auto; }
.bar-list__bar svg { width: 100%; height: 8px; border-radius: var(--r-pill); overflow: hidden; }
.bar-list__track { fill: var(--n-150); }
.bar-list__fill { fill: var(--accent); }
.bar-list__value { width: 1%; padding-left: var(--s-3) !important; text-align: right; white-space: nowrap; font-weight: 600; }
.bar-list__share { width: 1%; padding-left: var(--s-3) !important; text-align: right; white-space: nowrap; color: var(--text-3); }

.meter { display: grid; gap: var(--s-2); }
.meter__svg { width: 100%; height: 10px; border-radius: var(--r-pill); overflow: hidden; }
.meter__track { fill: var(--n-150); }
.meter__fill { fill: var(--accent); }
.meter--warning .meter__fill { fill: var(--warning-600); }
.meter--danger .meter__fill { fill: var(--danger-600); }
.meter__text { font-size: var(--fs-small); color: var(--text-2); }
.meter__text .num { font-weight: 600; color: var(--text); }
.meter--warning .meter__text { color: var(--warning-800); }
.meter--danger .meter__text { color: var(--danger-800); }

/* 7. Tabellen ---------------------------------------------- */
.table-wrap { min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table--rows th, .table--rows td, .table--compact th, .table--compact td {
    padding: 12px var(--s-4);
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--border);
}
.table--rows thead th, .table--compact thead th {
    position: sticky;
    top: 0;
    border-top: 0;
    background: var(--n-100);
    color: var(--text-3);
    font-size: var(--fs-tiny);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.table--rows tbody th { font-weight: 500; }
.table--rows tbody tr:hover { background: var(--n-100); }
.table--rows tfoot th, .table--rows tfoot td { border-top: 1px solid var(--border-strong); font-weight: 600; background: var(--n-100); }
.table--compact th, .table--compact td { padding: 8px var(--s-3); }
.table--compact tbody th { font-weight: 400; color: var(--text-2); }
.table .num, .table th.num { text-align: right; white-space: nowrap; }
/* Datums: links uitgelijnd (ze lezen als tekst), maar met vaste cijferbreedte. */
.table .date { text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table--wide { min-width: 720px; }
.table--wide tbody th, .table--wide tfoot th { white-space: nowrap; }
.card > .table-wrap { margin-inline: calc(-1 * var(--s-6)); padding-inline: var(--s-2); }
@media (max-width: 640px) { .card > .table-wrap { margin-inline: calc(-1 * var(--s-4)); padding-inline: 0; } }
.cell-sub { display: block; margin-top: 2px; font-size: var(--fs-tiny); color: var(--text-3); font-weight: 400; }
.cell-wrap { min-width: 200px; max-width: 360px; overflow-wrap: anywhere; }
.row-link { font-weight: 600; text-decoration: none; border-radius: var(--r-tiny); overflow-wrap: anywhere; }
.row-link:hover { color: var(--accent-text); text-decoration: underline; }

/* 8. Meldingen, lege staten -------------------------------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-default);
    font-size: var(--fs-small);
    line-height: 20px;
}
.alert .ic { margin-top: 1px; }
.alert > div { display: grid; gap: var(--s-1); }
.alert__title { font-weight: 600; }
.alert__list { padding-left: 18px; }
.alert--success { background: var(--success-100); color: var(--success-800); box-shadow: inset 0 0 0 1px var(--success-200); }
.alert--danger { background: var(--danger-100); color: var(--danger-800); box-shadow: inset 0 0 0 1px var(--danger-200); }
.alert--warning { background: var(--warning-100); color: var(--warning-800); box-shadow: inset 0 0 0 1px var(--warning-200); }

.empty {
    display: grid;
    gap: var(--s-1);
    justify-items: center;
    padding: var(--s-10) var(--s-6);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-card);
    background: var(--surface);
    text-align: center;
}
.empty--inline { padding: var(--s-5) var(--s-4); border-radius: var(--r-default); background: var(--n-100); border-color: var(--border); }
.empty__title { font-weight: 600; }
.empty__text { font-size: var(--fs-small); color: var(--text-3); }

/* 9. Formulieren ------------------------------------------- */
.form { display: grid; gap: var(--s-4); align-content: start; }
.form .btn { justify-self: start; }
.form .btn--full { justify-self: stretch; }
.form__row { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 520px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.form--inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.form--inline .btn { justify-self: stretch; }
@media (max-width: 640px) { .form--inline { grid-template-columns: minmax(0, 1fr); } }

.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field__label { font-size: var(--fs-small); font-weight: 600; color: var(--text); }
.field__hint { font-size: var(--fs-tiny); line-height: 16px; color: var(--text-3); overflow-wrap: anywhere; }
.field__error { font-size: var(--fs-tiny); line-height: 16px; font-weight: 600; color: var(--danger-800); }

.input {
    width: 100%;
    min-height: var(--ctl-h);
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-control);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 16px;
    line-height: 22px;
    box-shadow: var(--e-1);
    transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.input::placeholder { color: var(--text-3); }
.input:hover { border-color: var(--n-400); }
.input:focus, .input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); border-radius: var(--r-control); }
.input--error, .input[aria-invalid="true"] { border-color: var(--danger-600); }
.input--error:focus { border-color: var(--danger-600); box-shadow: var(--ring-danger); }
.input--code { font-family: var(--font-mono); font-size: 20px; letter-spacing: .2em; text-align: center; }
/* Native pijl (geen data:-afbeelding: de CSP van het beheer laat enkel 'self' toe). */
select.input { padding-right: 10px; cursor: pointer; }

.search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3) var(--s-4); align-items: start; }
.search__button { margin-top: 26px; }
@media (max-width: 640px) {
    .search { grid-template-columns: minmax(0, 1fr); }
    .search__button { margin-top: 0; width: 100%; }
}
.search__result { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--border); }

/* 10. Gebruiker, acties, gevarenzone ------------------------ */
.back { margin-bottom: calc(-1 * var(--s-4)); }
.back__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    color: var(--text-2);
    font-size: var(--fs-small);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--r-small);
}
.back__link:hover { color: var(--text); }

.actions-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .actions-grid { grid-template-columns: minmax(0, 1fr); } }

.danger-zone {
    padding: var(--s-6);
    border-radius: var(--r-card);
    background: var(--danger-100);
    box-shadow: inset 0 0 0 1px var(--danger-200);
}
.danger-zone__head { display: flex; align-items: flex-start; gap: var(--s-3); color: var(--danger-800); }
.danger-zone__head .ic { width: 22px; height: 22px; margin-top: 1px; }
.danger-zone__head > div { display: grid; gap: var(--s-1); }
.danger-zone__title { font-size: 17px; color: var(--danger-800); }
.danger-zone__text { font-size: var(--fs-small); line-height: 20px; color: var(--danger-800); }
.danger-zone .input { border-color: var(--danger-200); }
.danger-zone .input:focus { border-color: var(--danger-600); box-shadow: var(--ring-danger); }
.danger-zone .field__hint { color: var(--danger-800); }
@media (max-width: 640px) { .danger-zone { padding: var(--s-5) var(--s-4); } .danger-zone .btn { width: 100%; white-space: normal; text-align: center; } }

/* 11. Audit, paginering ------------------------------------ */
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.filter .field { width: min(100%, 320px); }
@media (max-width: 640px) { .filter .field { width: 100%; } .filter .btn { flex: 1; } }

.meta { display: grid; gap: 2px; font-size: var(--fs-tiny); line-height: 16px; }
.meta > div { display: flex; gap: var(--s-2); }
.meta dt { color: var(--text-3); font-family: var(--font-mono); }
.meta dd { font-family: var(--font-mono); overflow-wrap: anywhere; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.pager__status { font-size: var(--fs-small); color: var(--text-3); }

/* 12. Inloggen en 2FA -------------------------------------- */
.admin--auth { display: grid; }
.auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 440px);
    justify-content: center;
    align-content: center;
    gap: var(--s-4);
    padding: var(--s-10) var(--s-4);
}
.auth__card {
    width: 100%;
    min-width: 0;
    display: grid;
    gap: var(--s-5);
    padding: var(--s-8);
    background: var(--surface);
    border-radius: var(--r-card);
    box-shadow: var(--e-0), var(--e-3);
}
@media (max-width: 480px) { .auth__card { padding: var(--s-6) var(--s-5); } }
.brand--auth { padding: 0; }
.auth__title { font-size: 26px; line-height: 1.2; letter-spacing: var(--track-display); }
.auth__lead { color: var(--text-2); font-size: 15px; margin-top: calc(-1 * var(--s-3)); }
.auth__foot { text-align: center; font-size: var(--fs-tiny); color: var(--text-3); }
.auth__alt { display: flex; justify-content: center; }

.steps { display: grid; gap: var(--s-5); list-style: none; counter-reset: stap; }
.steps__item { counter-increment: stap; display: grid; gap: var(--s-2); padding-left: 40px; position: relative; }
.steps__item::before {
    content: counter(stap);
    position: absolute;
    left: 0;
    top: -2px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-text);
    font-size: var(--fs-small);
    font-weight: 700;
    box-shadow: inset 0 0 0 1px var(--accent-soft-2);
}
.steps__title { font-size: var(--fs-h3); line-height: 1.4; }
.steps__text { font-size: var(--fs-small); color: var(--text-3); }
.qr {
    justify-self: start;
    width: min(100%, 200px);
    padding: var(--s-3);
    background: var(--n-0);
    border: 1px solid var(--border);
    border-radius: var(--r-default);
}
.qr svg { width: 100%; height: auto; }
.secret code {
    display: inline-block;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-small);
    background: var(--n-150);
    font-size: 15px;
    letter-spacing: .06em;
    overflow-wrap: anywhere;
    user-select: all;
}
.codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-2);
    list-style: none;
    padding: var(--s-4);
    border-radius: var(--r-default);
    background: var(--n-100);
    border: 1px solid var(--border);
}
.codes code { font-size: 15px; letter-spacing: .04em; user-select: all; }
@media (max-width: 360px) { .codes { grid-template-columns: minmax(0, 1fr); } }

/* Naamsvermelding FLOW en foutpagina's -------------------- */
.credit {
    padding-top: var(--s-6);
    border-top: 1px solid var(--border);
    font-size: var(--fs-tiny);
    line-height: 16px;
    color: var(--text-3);
}
.auth .credit { max-width: 440px; padding-top: 0; border-top: 0; text-align: center; }
.credit a { color: var(--text-2); border-radius: var(--r-tiny); }

.error-page { display: grid; gap: var(--s-3); }
.error-page__code { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: var(--track-display); color: var(--accent); }
.error-page__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

@media (forced-colors: active) {
    .chart__line, .chart__dot { stroke: CanvasText; }
    .chart__bar, .bar-list__fill, .meter__fill { fill: CanvasText; }
}