/* Eigen letter, van de eigen host (LAYOUT-001, 24-09-2026) — tot die datum via Google Fonts.
   Plus Jakarta Sans, variabel (200–800), SIL Open Font License 1.1; zie wwwroot/fonts/LICENTIE.md.
   Dezelfde bestanden als de publieke site. Inter werd hier ook van Google gehaald; zonder die
   externe bron valt de lopende tekst terug op de systeemletter, zoals in de portalen. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    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;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    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;
}

/* ============================================================================
   Curanta design tokens
   Zorg-context: betrouwbaar (teal), warm (coral accent), helder (warm-neutraal
   surface). Typografie: Plus Jakarta Sans voor headers, Inter voor body.
   ============================================================================ */

:root {
    /* Brand palette */
    --curanta-teal-50:  #F1F8F7;
    --curanta-teal-100: #C7EFE7;
    --curanta-teal-200: #93E1D2;
    --curanta-teal-300: #5AD3BD;
    --curanta-teal-400: #34C3AC;
    --curanta-teal-500: #21C7A8;
    --curanta-teal-600: #0E4F57;
    --curanta-teal-700: #0E4F57;
    --curanta-teal-800: #0A3B41;
    --curanta-teal-900: #062A2E;

    --curanta-coral-500: #0B7D6A;
    --curanta-coral-100: #D7EFE9;

    --curanta-amber-500: #E5A23B;
    --curanta-green-500: #2E9D5E;
    /* Van #D64545 naar #C93B3B op 24-09-2026: het oude rood haalde als letter 4,38:1 op wit en
       4,07:1 op de app-achtergrond, en wit erop evenmin 4,5:1. Gemeten door axe op /klachten en
       /kwaliteit/taken (verlopen termijnen). #C93B3B haalt 5,03:1 op wit, 4,68:1 op #F1F8F7 en
       5,03:1 met witte tekst erop — zonder dat het een ander rood wordt. */
    --curanta-red-500:   #C93B3B;

    /* Groen als letter. --curanta-green-500 (#2E9D5E) haalt als tekst 3,44:1; dit is de
       tekstkleur uit de tabel "Semantische kleuren" verderop (7,0:1). */
    --curanta-green-ink: #1F6638;

    /* Waarschuwingskleur als tékst. ECD-069: --mud-palette-warning-darken (#DD901D) haalt op
       wit 2,60:1 en dat is onder de 4,5:1 van WCAG 1.4.3 — ook onder de 3,0 die voor grote
       tekst geldt. Als rand of accentstreep mag dat oranje blijven; als letter niet. Deze
       waarde haalt 5,85:1 en staat al in de rij initiaalkleuren, die door een wachter op
       diezelfde norm wordt gehouden. */
    --curanta-warn-ink:  #8C5A14;

    /* Neutrals (warm cool-grey) */
    --curanta-ink-900: #0E1F2C;
    --curanta-ink-700: #1A2333;
    --curanta-ink-500: #5C6677;
    --curanta-ink-300: #98A1B0;
    --curanta-ink-100: #DDE2E9;

    --curanta-surface:     #FFFFFF;
    --curanta-surface-alt: #F7F9FB;
    --curanta-bg:          #F1F8F7;
    --curanta-border:      #E2E8EC;

    /* Layout */
    --curanta-radius-sm: 8px;
    --curanta-radius-md: 12px;
    --curanta-radius-lg: 16px;
    --curanta-radius-xl: 24px;
    --curanta-shadow-sm: 0 1px 2px rgba(14, 31, 44, 0.04), 0 1px 3px rgba(14, 31, 44, 0.06);
    --curanta-shadow-md: 0 4px 12px rgba(14, 31, 44, 0.06), 0 2px 4px rgba(14, 31, 44, 0.04);
    --curanta-shadow-lg: 0 12px 32px rgba(14, 31, 44, 0.08), 0 4px 8px rgba(14, 31, 44, 0.04);

    /* Type */
    --curanta-font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
    --curanta-font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}

/* ----------------------------------------------------------------------------
   Linkkleur terugpakken van het DevExpress-thema.

   App.razor laadt _content/DevExpress.Blazor.Themes/office-white.bs5.min.css, en dat thema zet
   `--bs-link-color: #ff6c00` — het oranje accent van Office. Elke kale <a> in de backoffice kreeg
   die kleur: op --curanta-surface-alt (#F7F9FB) haalt hij 2,69:1, waar WCAG 2.2 voor gewone tekst
   4,5:1 vraagt. Gemeten door axe op /bi, op de support-mailtolink in het helppaneel — en dat
   paneel staat in de layout, dus het gold overal.

   Twee dingen tegelijk mis: onleesbaar én niet onze kleur. Hieronder de merkkleur, die 9,2:1
   haalt. Bootstrap rekent met de -rgb-variant (`a{color:rgba(var(--bs-link-color-rgb),...)}`), dus
   die moet mee — alleen de hex zetten doet niets. De onderstreping van het thema blijft staan; die
   is het niet-kleurgebonden signaal dat WCAG 1.4.1 vraagt.
   ---------------------------------------------------------------------------- */
:root {
    --bs-link-color:           #0E4F57;
    --bs-link-color-rgb:       14, 79, 87;
    --bs-link-hover-color:     #0A3D44;
    --bs-link-hover-color-rgb: 10, 61, 68;

    /* Uit hetzelfde thema komt --bs-code-color: #d63384. Op de paginakleur (#F1F8F7) haalt dat
       4,18:1 — net onder de norm, en <code> staat op de beheerpagina's midden in lopende tekst
       (importsleutels, routes, veldnamen). Niet naar de merkkleur: die is sinds vandaag de
       linkkleur, en code dat er als een link uitziet is erger dan code dat te licht is. Dus
       Bootstraps eigen magenta een slag donkerder: 6,85:1, en de conventie blijft herkenbaar.
       De donkere variant van het thema (#e685b5 op #152832, 6,1:1) is al goed en blijft. */
    --bs-code-color: #A3195B;
}

/* ----------------------------------------------------------------------------
   Een link midden in een zin is onderstreept (WCAG 1.4.1, axe link-in-text-block).

   MudLink onderstreept standaard pas bij hover. Midden in een regel tekst is hij dan alleen aan
   zijn kleur te herkennen, en #0E4F57 naast de lopende tekst (#5C6677 of de waarschuwingsinkt
   #8C5A14) scheelt maar 1,6:1 — axe vraagt 3:1 of een tweede signaal. Gemeten op 24-09-2026 op
   /admin/compliance, /admin/security, /admin/subverwerkers en /ecd/behandelaar.
   Eerst alleen voor een link direct in een <p>, <li> of MudText. De sweep van 24-09-2026 vond
   daarna nog zes routes met een MudLink in een gewone <div> met tekst (/trust, /api/sandbox,
   /admin/security-beleid …). Een selector per ouder loopt dus altijd achter; daarom nu elke
   MudLink met de standaardinstelling (underline-hover). Wie bewust geen streep wil, zet
   Underline="Underline.None" — dat is een zichtbare keuze in de code.
   ---------------------------------------------------------------------------- */
a.mud-link.mud-link-underline-hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Een klikbare regel in een lijst (meldingen): een echte <button>, opgemaakt als lijstregel. */
.curanta-lijstknop {
    display: block;
    width: 100%;
    margin: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: inherit;
    font: inherit;
    text-align: left;
}
.curanta-lijstknop:hover { background: var(--mud-palette-action-default-hover); }
.curanta-lijstknop:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Een opsomming met een icoon ervoor, als gewone <ul> in plaats van MudList: die laatste rendert
   als role="listbox" en is voor een schermlezer een keuzelijst (bughunt 24-09-2026). */
.curanta-helpverwijzingen {
    list-style: none;
    margin: 0;
    padding: 0;
}
.curanta-helpverwijzingen > li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.875rem;
    line-height: 1.5;
}
.curanta-helpverwijzingen > li > .mud-icon-root {
    flex-shrink: 0;
    margin-top: 2px;
}
.curanta-helpverwijzingen a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Zoekresultaten van de kennisbank: een lijst met links (zie Kennisbank.razor). */
.curanta-zoekresultaten {
    list-style: none;
    margin: 0;
    padding: 0;
}
.curanta-zoekresultaten > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 8px;
    border-bottom: 1px solid var(--curanta-border);
}
.curanta-zoekresultaten > li > .mud-icon-root {
    flex-shrink: 0;
    margin-top: 3px;
}
.curanta-zoekresultaat-titel {
    font-weight: 600;
    font-size: 1rem;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* In de donkere modus haalde het oranje wél 5,4:1 op #152832 — daar was het dus alleen een
   vreemde kleur, geen leesprobleem. Toch mee, anders is een link licht teal of oranje afhankelijk
   van de stand van een schakelaar. Deze waarden komen uit PaletteDark in MainLayout: 8,1:1. */
.mud-dark-mode {
    --bs-link-color:           #2FD3B6;
    --bs-link-color-rgb:       47, 211, 182;
    --bs-link-hover-color:     #5AD3BD;
    --bs-link-hover-color-rgb: 90, 211, 189;
}

/* ----------------------------------------------------------------------------
   Globale typografische overrides (verfijnen MudBlazor's defaults richting brand)
   ---------------------------------------------------------------------------- */
html, body {
    font-family: var(--curanta-font-body);
    background: var(--curanta-bg);
    color: var(--curanta-ink-700);
    -webkit-font-smoothing: antialiased;
}

/* Bug-rapport 2026-05-28: gesloten temporaire MudDrawers (curanta-help-panel,
   command-palette, mantelzorger-PWA-drawer) staan op `right: -440px` om
   off-screen te slidden. Zonder horizontale clip op een ancestor blijft het
   element bijdragen aan de scrollbare paginabreedte → horizontale scrollbar +
   zichtbaar half help-paneel bij scrollen naar rechts.
   `overflow-x: clip` clipt zonder een scroll-container te maken (vs `hidden`
   dat ook de stacking context wijzigt). Vangt elk verdwaald off-screen
   element, ook NavCommandPalette en eventuele toekomstige drawers. */
html, body {
    overflow-x: clip;
}
.mud-layout {
    overflow-x: clip;
}
/* `overflow-x: clip` alleen verhindert in Chromium geen programmatische root-scroll
   naar de rechts geparkeerde tijdelijke lade. Een gesloten hulppaneel heeft geen
   zichtbare animatie of interactie nodig en mag daarom ook niet aan de documentbreedte
   bijdragen. Zodra Open=true verdwijnt mud-drawer--closed en rendert de lade normaal. */
.curanta-help-panel.mud-drawer--closed {
    display: none !important;
}

h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    font-family: var(--curanta-font-display);
    color: var(--curanta-ink-900);
    letter-spacing: -0.01em;
    /* Veel paginakoppen zijn één lang samengesteld woord — "Directiebeoordeling",
       "Vraagvoorspelling", "BIG-herregistratie". Zonder afbreekregel steken die op 320 px buiten
       het kader en schuift de hele pagina horizontaal mee (WCAG 1.4.10). Alleen van kracht als
       het woord anders niet past. Gevonden op /compliance/nen7510/directiebeoordeling, 20-09-2026. */
    overflow-wrap: anywhere;
}

/* Tabbladen op een smal scherm: laten aflopen in plaats van horizontaal schuiven.
   MudBlazor schuift het lint met een transform en brengt het gekozen tabblad daarna niet terug in
   beeld. Gemeten op /compliance/nen7510/fundament bij 320 px (20-09-2026): het lint stond leeg
   tussen twee pijlknoppen terwijl het actieve tabblad "Communicatie (7.4)" op x = -527 hing. Wie
   niet kan zien welk hoofdstuk open staat, kan het scherm niet gebruiken.
   De schuifpijlen en de onderstreping vervallen hier: de eerste hebben niets meer te schuiven, de
   tweede staat absoluut gepositioneerd en zou bij aflopende regels de verkeerde tab onderstrepen.
   Het actieve tabblad blijft herkenbaar aan zijn kleur (.mud-tab-active). */
@media (max-width: 600px) {
    /* -content is het venster met overflow:hidden, -wrapper het lint met width:max-content dat
       MudBlazor met een transform verschuift. Allebei omzetten, anders blijft het schuiven. */
    .mud-tabs-tabbar-content {
        overflow: visible !important;
        white-space: normal !important;
    }

    .mud-tabs-tabbar-wrapper {
        width: 100% !important;
        flex-wrap: wrap !important;
        transform: none !important;
    }

    /* Zonder border-box telt de eigen padding bij die 100% op en steekt het lint een paar pixels
       buiten zijn ouder — die knipt dat af (overflow:hidden), dus je ziet het niet maar het is er. */
    .mud-tabs-tabbar,
    .mud-tabs-tabbar-content,
    .mud-tabs-tabbar-wrapper {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mud-tabs-scroll-button,
    .mud-tab-slider {
        display: none !important;
    }

    .mud-tab {
        max-width: 100%;
    }
}

/* Witte CTA-knop op een teal-gradient (.curanta-welcome).
   Blijft in beide modes wit-op-teal — de welcome-banner houdt zijn
   teal-gradient ook in dark mode aan. */
.curanta-cta-on-teal,
.curanta-cta-on-teal.mud-button-filled-default {
    background-color: #FFFFFF !important;
    color: var(--curanta-teal-700) !important;
    font-weight: 600 !important;
}
.curanta-cta-on-teal:hover {
    background-color: var(--curanta-teal-50) !important;
}

/* MudBlazor primary-color overrides.
 * BUG-fix 2026-05-13: eerdere regel zette color:teal-600 ook op
 * mud-button-filled-primary, terwijl die teal-600 als achtergrond heeft —
 * resultaat: groene tekst op groene achtergrond = onzichtbare button-label
 * (audit-rapport 2026-05-13). Filled-primary moet wit blijven. */
.mud-button-text.mud-button-text-primary,
.mud-button-outlined.mud-button-outlined-primary,
.mud-icon-button.mud-icon-button-color-primary,
.mud-progress-circular.mud-primary-text {
    color: var(--curanta-teal-600);
}
.mud-button-filled-primary {
    /* MudBlazor's componentregel wordt na dit bestand geïnjecteerd en won zonder
       !important alsnog met palette-primary (#2FD3B6): wit daarop is slechts 1,88:1. */
    background-color: var(--curanta-teal-600) !important;
    color: #fff !important;
}
.mud-button-filled-primary:hover {
    background-color: var(--curanta-teal-700) !important;
}
.mud-button-filled-primary .mud-button-label,
.mud-button-filled-primary span {
    color: #fff !important;
}

/* MudDatePicker / kalenderpopup: gebruik een bredere popover/dialog zodat
   maandnavigatie en weeklabels niet te krap renderen. Geldt host-breed; de
   optionele curanta-date-picker class maakt inputvelden zelf ook iets ruimer. */
.curanta-date-picker {
    min-width: 180px;
}
.curanta-date-picker .mud-input-control,
.curanta-date-picker .mud-input,
.curanta-date-picker .mud-picker {
    width: 100%;
    min-width: 0;
}

/* Laat formuliercontrols binnen MudGrid-items krimpen naar de kolombreedte;
   anders drukken MudBlazor-pickers en inputwrappers over buurvelden heen. */
.mud-grid-item {
    min-width: 0;
}

.mud-grid-item .mud-input-control,
.mud-grid-item .mud-input,
.mud-grid-item .mud-picker,
.mud-grid-item .mud-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.mud-picker-popover,
.mud-picker-inline-container,
.mud-picker-calendar-container,
.mud-picker-calendar {
    min-width: 320px !important;
}
.mud-popover .mud-picker-calendar-container,
.mud-popover .mud-picker-calendar,
.mud-dialog .mud-picker-calendar-container,
.mud-dialog .mud-picker-calendar {
    min-width: 320px !important;
}
.mud-picker-calendar-container .mud-day,
.mud-picker-calendar .mud-day,
.mud-picker-calendar-container .mud-calendar-week,
.mud-picker-calendar .mud-calendar-week {
    min-width: 36px;
}

/* ----------------------------------------------------------------------------
   AppBar
   ---------------------------------------------------------------------------- */
.curanta-appbar {
    background: var(--curanta-surface) !important;
    color: var(--curanta-ink-700) !important;
    border-bottom: 1px solid var(--curanta-border);
    box-shadow: none !important;
}

.curanta-appbar-logo {
    height: 36px;
    display: block;
}

.curanta-appbar-divider {
    width: 1px;
    height: 24px;
    background: var(--curanta-border);
    margin: 0 12px;
}

.curanta-appbar-search {
    background: var(--curanta-bg);
    border: 1px solid var(--curanta-border);
    border-radius: 999px;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 320px;
    color: var(--curanta-ink-500);
    transition: border-color 120ms ease, background 120ms ease;
}
.curanta-appbar-search:focus-within {
    border-color: var(--curanta-teal-500);
    background: var(--curanta-surface);
}
.curanta-appbar-search input {
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    color: var(--curanta-ink-700);
    flex: 1;
}

.curanta-appbar-accountmenu > button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    text-transform: none;
}
.curanta-appbar-accountmenu > button:hover { background: var(--curanta-surface-alt); }
.curanta-appbar-accountmenu > button .mud-button-label {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--curanta-ink-700);
}

/* ----------------------------------------------------------------------------
   Drawer
   ---------------------------------------------------------------------------- */
.curanta-drawer {
    background: var(--curanta-surface) !important;
    border-right: 1px solid var(--curanta-border) !important;
}

.curanta-drawer-header {
    padding: 24px 20px 12px;
}
.curanta-drawer-header .tagline {
    color: var(--curanta-ink-500);
    font-size: 12px;
    margin-top: 4px;
    letter-spacing: 0.02em;
}

.curanta-drawer-section-label {
    font-family: var(--curanta-font-display);
    font-size: 11px;
    font-weight: 700;
    color: var(--curanta-ink-500);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 16px 20px 6px;
}

.curanta-drawer .mud-nav-link {
    border-radius: 10px;
    margin: 2px 12px;
    color: var(--curanta-ink-700);
    font-weight: 500;
    transition: background 120ms ease, color 120ms ease;
}

/* MudNavGroup-header krijgt dezelfde behandeling als top-level navlinks, plus
   een chevron-icoon dat de open/dicht-toestand markeert. */
.curanta-drawer .mud-nav-group > .mud-nav-link {
    font-weight: 600;
    color: var(--curanta-ink-900);
}
.curanta-drawer .mud-nav-group > .mud-nav-link .mud-icon-root {
    color: var(--curanta-teal-600);
}
.curanta-drawer .mud-nav-group > .mud-nav-link:hover {
    background: var(--curanta-teal-50);
}

/* Nested navlinks binnen een open MudNavGroup: visueel als sub-items met
   subtiele inspringing en kleinere line-height; geen aparte hover-tint
   want het ouder-rust al op de teal-50 highlight. */
.curanta-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    margin-left: 24px;
    margin-right: 12px;
    font-size: 13.5px;
    padding-top: 6px;
    padding-bottom: 6px;
    color: var(--curanta-ink-700);
}
.curanta-drawer .mud-nav-group .mud-collapse-container .mud-nav-link .mud-icon-root {
    font-size: 18px;
}

/* Wanneer een sub-item active is, kleuren we ook de groep-header zacht in
   zodat duidelijk is welk pad open staat. */
.curanta-drawer .mud-nav-group.mud-nav-group-active > .mud-nav-link {
    color: var(--curanta-teal-700);
}
.curanta-drawer .mud-nav-group.mud-nav-group-active > .mud-nav-link .mud-icon-root {
    color: var(--curanta-teal-600);
}

/* Chevron / expand-indicator */
.curanta-drawer .mud-nav-group .mud-nav-link-expand-icon {
    color: var(--curanta-ink-500);
    transition: transform 160ms ease, color 160ms ease;
}
.curanta-drawer .mud-nav-group.mud-nav-group-expanded > .mud-nav-link .mud-nav-link-expand-icon {
    color: var(--curanta-ink-500);
}
.curanta-drawer .mud-nav-link:hover {
    background: var(--curanta-teal-50);
    color: var(--curanta-teal-700);
}
.curanta-drawer .mud-nav-link.active,
.curanta-drawer .mud-nav-link.mud-nav-link-active {
    background: var(--curanta-teal-50) !important;
    color: var(--curanta-teal-700) !important;
    font-weight: 600;
}
.curanta-drawer .mud-nav-link .mud-icon-root {
    color: var(--curanta-ink-500);
}
.curanta-drawer .mud-nav-link.mud-nav-link-active .mud-icon-root {
    color: var(--curanta-teal-600);
}

.curanta-drawer-footer {
    margin-top: auto;
    padding: 16px 20px;
    border-top: 1px solid var(--curanta-border);
    font-size: 12px;
    color: var(--curanta-ink-500);
}

/* ----------------------------------------------------------------------------
   Main content & cards
   ---------------------------------------------------------------------------- */
.curanta-page {
    padding: 28px 32px 48px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

/* Volle-breedte modus voor data-zware pagina's (audit, declaratie, planning).
   Een pagina opt-in via een onzichtbare marker: <div data-page-wide></div>
   ergens binnen de page-template. De 1440px cap wordt dan opgeheven zodat
   brede grids alle kolommen tonen op ultrawide-schermen. Mobile-overrides
   (max-width:768px) blijven gewoon werken. */
.curanta-page:has([data-page-wide]) {
    max-width: none;
}

.curanta-welcome {
    /* WCAG 2.1 AA (1.4.3): het lichte gradient-eindpunt (teal-500 #21C7A8) gaf met
       witte tekst slechts ~2.1:1. Eindstop naar teal-600 (#0E4F57) zodat wit overal
       9.2:1 haalt — ruim boven de 4.5:1-eis. De ::after-highlight houdt visuele diepte. */
    background: linear-gradient(135deg, var(--curanta-teal-700) 0%, var(--curanta-teal-600) 100%);
    color: #fff;
    border-radius: var(--curanta-radius-lg);
    padding: 32px 36px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--curanta-shadow-md);
    margin-bottom: 24px;
}
.curanta-welcome::after {
    /* Subtiele puls-illustratie rechtsonder */
    content: "";
    position: absolute;
    right: -40px; bottom: -60px;
    width: 280px; height: 280px;
    background: radial-gradient(closest-side, rgba(255,255,255,0.10), transparent 70%);
    pointer-events: none;
}
.curanta-welcome h1 {
    color: #fff;
    font-size: 28px;
    margin: 0 0 6px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.curanta-welcome p {
    color: rgba(255,255,255,0.88);
    max-width: 56ch;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

.curanta-section-title {
    font-family: var(--curanta-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--curanta-ink-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 28px 0 12px;
}

/* KPI tegels */
.curanta-kpi {
    background: var(--curanta-surface);
    border: 1px solid var(--curanta-border);
    border-radius: var(--curanta-radius-md);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: var(--curanta-shadow-sm);
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.curanta-kpi:hover { transform: translateY(-2px); box-shadow: var(--curanta-shadow-md); }

.curanta-kpi-label {
    font-size: 12.5px;
    color: var(--curanta-ink-500);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex; align-items: center; gap: 6px;
}
.curanta-kpi-value {
    font-family: var(--curanta-font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--curanta-ink-900);
    line-height: 1.1;
}
.curanta-kpi-delta {
    font-size: 12.5px;
    color: var(--curanta-ink-500);
    display: flex; align-items: center; gap: 4px;
}
/* Niet var(--curanta-green-500)/(--curanta-red-500). Dat zijn de vlakkleuren — prima als
   achtergrond, maar als tekst op wit halen ze 3,4:1 en 4,4:1, allebei onder de 4,5:1 die WCAG 2.2
   voor gewone tekst vraagt. Dit is 12,5px, dus het valt niet onder de soepeler eis voor grote
   tekst. axe meldde het op /bi ("-89,7% t.o.v. vorige periode"), en het stond ook in het
   cliëntportaal. De waarden hieronder komen van .curanta-pill.green en .curanta-pill.red — 7,0:1
   en 9,0:1 — net zoals .amber hierboven al uit .curanta-pill.amber komt, zodat een kleur overal
   hetzelfde betekent. Gevonden 23-08-2026. */
/* Voorraadtegels zeggen dat ze een voorraad zijn. Negen van de vijfentwintig KPI's tellen wat er
   nú openstaat en bewegen niet mee met het periodefilter; met Van en Tot en met op een dag twee jaar
   geleden stonden ze onveranderd naast zestien tegels die op nul vielen. Kleiner en grijzer dan de
   trendregel: het is een voetnoot bij het getal, geen tweede getal. Bevinding BI-1009F. */
.curanta-kpi-peilnoot {
    font-size: 11px;
    color: var(--curanta-ink-500);
    margin-top: 2px;
    font-style: italic;
}

/* De kolom Verschil op /bi/benchmarks. Dezelfde twee inktkleuren als .curanta-kpi-delta, en om
   dezelfde reden: de vlakkleuren #2E9D5E en #D64545 halen als tekst 3,44:1 en 4,19:1 en dat is
   onder de 4,5:1 van WCAG 1.4.3. Als klasse en niet inline, anders kan de donkere modus er niet bij. */
.curanta-verschil { font-weight: 600; }
/* ----------------------------------------------------------------------------
   Semantische inkt, met een donkere tegenhanger.

   De correctietabel verderop in dit bestand ("Semantische kleuren die als tekst of achter
   tekst staan") gaf per betekenis één kleur, en die is licht-alleen. Op een donkere
   achtergrond keert de rekensom om: #0E4F57 haalt op #152832 nog 1,64:1 en #1F6638 2,18:1 —
   gemeten met axe op /admin/roi en /admin/subverwerkers, 11-09-2026, bevinding DECL-1009E.

   Een vaste hexwaarde in de markup kan daar niets aan doen; een variabele wel. De donkere
   waarden zijn dezelfde die .curanta-verschil hieronder al gebruikte, plus de teal die de
   donkere modus elders voor links hanteert.

   Gebruik deze tokens in plaats van een hexwaarde zodra tekst een betekenis draagt.
   ---------------------------------------------------------------------------- */
:root {
    --curanta-inkt-succes:       #1F6638;
    --curanta-inkt-fout:         #8C1F1F;
    --curanta-inkt-waarschuwing: #8C5A14;
    --curanta-inkt-info:         #0E4F57;
}

.mud-dark-mode {
    --curanta-inkt-succes:       #A8E6C0;
    --curanta-inkt-fout:         #FFB3B3;
    --curanta-inkt-waarschuwing: #F5C97A;
    --curanta-inkt-info:         #2FD3B6;
}

.curanta-verschil.beter    { color: #1F6638; }
.curanta-verschil.slechter { color: #8C1F1F; }

.curanta-kpi-delta.up   { color: #1F6638; }
.curanta-kpi-delta.down { color: #8C1F1F; }

/* De derde kleur naast .up en .down. Zonder deze regel viel `.amber` terug op een generieke
   achtergrondkleur van elders in de stijlstapel (#FFC107), waardoor "verbeterpunten benoemd" op de
   NEN 7510-tegels als een fluorescerende balk in beeld stond terwijl zijn buren gewoon gekleurde
   tekst waren. Erger dan lelijk: de tekstkleur bleef #5C6677, en grijs op fel amber haalt ongeveer
   3,5:1 — onder de 4,5:1 die WCAG 2.2 voor gewone tekst vraagt. Gevonden op 21-08-2026 door naar een
   frame van bo-25 te kijken; de tegel stond de halve video in beeld. De kleuren komen van
   .curanta-pill.amber, zodat amber overal hetzelfde betekent. */
.curanta-kpi-delta.amber { color: #8C5A14; background: none; }

/* Module-cards */
.curanta-module-card {
    background: var(--curanta-surface);
    border: 1px solid var(--curanta-border);
    border-radius: var(--curanta-radius-md);
    padding: 20px;
    box-shadow: var(--curanta-shadow-sm);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.curanta-module-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--curanta-shadow-md);
    border-color: var(--curanta-teal-200);
}
.curanta-module-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.curanta-module-card-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--curanta-teal-50);
    color: var(--curanta-teal-600);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.curanta-module-card-title {
    font-family: var(--curanta-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--curanta-ink-900);
    line-height: 1.2;
}
.curanta-module-card-subtitle {
    font-size: 12.5px;
    color: var(--curanta-ink-500);
}
.curanta-module-card-links {
    display: flex; flex-direction: column;
    gap: 4px;
    margin-top: auto;
    padding-top: 8px;
}
.curanta-module-card-links a {
    color: var(--curanta-ink-700);
    font-size: 13.5px;
    text-decoration: none;
    padding: 4px 0;
    border-radius: 6px;
    display: flex; align-items: center; gap: 8px;
    transition: color 120ms ease;
}
.curanta-module-card-links a:hover {
    color: var(--curanta-teal-700);
}
.curanta-module-card-links a .mud-icon-root {
    font-size: 16px; color: var(--curanta-ink-500);
}
.curanta-module-card-links a:hover .mud-icon-root {
    color: var(--curanta-teal-500);
}

/* Badges */
.curanta-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--curanta-teal-50);
    color: var(--curanta-teal-700);
}
.curanta-pill.amber { background: #FDF1DC; color: #8C5A14; }
.curanta-pill.red   { background: #FBE4E4; color: #8C1F1F; }
.curanta-pill.green { background: #E0F4E8; color: #1F6638; }

/* .status-pill werd op vier schermen gebruikt (jeugdzorg, kraamzorg, CAK-productcodes) maar
   stond in geen enkele stylesheet: de "pil" was kale tekst. Zelfde vorm en kleuren als
   .curanta-pill; oranje is amber, blauw is de standaard (teal), grijs is neutraal
   (routeafronding CAK, 23-09-2026). */
.status-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: var(--curanta-teal-50);
    color: var(--curanta-teal-700);
}
.status-pill.status-green  { background: #E0F4E8; color: #1F6638; }
.status-pill.status-red    { background: #FBE4E4; color: #8C1F1F; }
.status-pill.status-orange { background: #FDF1DC; color: #8C5A14; }
.status-pill.status-grey   { background: #EEF1F3; color: #4A5A66; }

/* MDO + andere deadline-indicatoren. Rood = overschreden, neutraal = toekomst. */
.curanta-deadline-overdue { color: #B43E3E; font-weight: 600; }
.curanta-deadline-future  { color: var(--curanta-ink-500); }
.mud-dark-mode .curanta-deadline-overdue { color: #EF6A6A; }

/* ----------------------------------------------------------------------------
   Help-panel (right drawer met markdown-content)
   ---------------------------------------------------------------------------- */
.curanta-help-panel { background: var(--curanta-surface); }

.curanta-help-body {
    padding: 18px 22px 32px;
    overflow-y: auto;
    height: calc(100% - 72px);
}

.curanta-help-markdown {
    font-size: 14px;
    line-height: 1.65;
    color: var(--curanta-ink-700);
}
.curanta-help-markdown h1,
.curanta-help-markdown h2,
.curanta-help-markdown h3 {
    font-family: var(--curanta-font-display);
    color: var(--curanta-ink-900);
    margin-top: 24px;
    margin-bottom: 8px;
    line-height: 1.25;
}
.curanta-help-markdown h1 { font-size: 22px; margin-top: 0; }
.curanta-help-markdown h2 { font-size: 17px; }
.curanta-help-markdown h3 { font-size: 14.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--curanta-ink-500); }
.curanta-help-markdown p { margin: 8px 0 12px; }
.curanta-help-markdown ul,
.curanta-help-markdown ol { padding-left: 22px; margin: 8px 0 14px; }
.curanta-help-markdown li { margin: 4px 0; }
.curanta-help-markdown a { color: var(--curanta-teal-600); text-decoration: none; border-bottom: 1px dotted var(--curanta-teal-300); }
.curanta-help-markdown a:hover { color: var(--curanta-teal-700); border-bottom-style: solid; }
.curanta-help-markdown code {
    background: var(--curanta-bg);
    color: var(--curanta-ink-900);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12.5px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}
.curanta-help-markdown pre {
    background: var(--curanta-bg);
    border: 1px solid var(--curanta-border);
    border-radius: var(--curanta-radius-sm);
    padding: 12px 14px;
    overflow-x: auto;
}
.curanta-help-markdown pre code { background: transparent; padding: 0; }
.curanta-help-markdown blockquote {
    border-left: 3px solid var(--curanta-teal-500);
    background: var(--curanta-teal-50);
    margin: 12px 0;
    padding: 10px 14px;
    color: var(--curanta-ink-700);
    border-radius: 0 var(--curanta-radius-sm) var(--curanta-radius-sm) 0;
}
.curanta-help-markdown table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}
.curanta-help-markdown th,
.curanta-help-markdown td {
    border: 1px solid var(--curanta-border);
    padding: 6px 10px;
    text-align: left;
}
.curanta-help-markdown th { background: var(--curanta-surface-alt); font-weight: 600; }
.curanta-help-markdown hr {
    border: 0; border-top: 1px solid var(--curanta-border);
    margin: 18px 0;
}

.mud-dark-mode .curanta-help-panel { background: var(--curanta-surface); }
.mud-dark-mode .curanta-help-markdown code,
.mud-dark-mode .curanta-help-markdown pre { background: #0B1A22; border-color: #1F3441; color: #E6EDF1; }
.mud-dark-mode .curanta-help-markdown blockquote { background: #0E3A40; }

/* Footer-strook */
.curanta-footer {
    margin-top: 40px;
    padding: 16px 0;
    border-top: 1px solid var(--curanta-border);
    font-size: 12px;
    color: var(--curanta-ink-500);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
}

/* MudBlazor responsive tweaks */
@media (max-width: 1280px) {
    /* ZRG-027: compactere padding op tablets/kleine laptops; mini-drawer
       collapsed by default via MudDrawer Breakpoint.Md in MainLayout.razor */
    .curanta-page { padding: 22px 24px 40px; }
}

@media (max-width: 960px) {
    .curanta-page { padding: 20px; }
    .curanta-appbar-search { display: none; }
    .curanta-welcome { padding: 24px; }
    .curanta-welcome h1 { font-size: 22px; }
}

/* ZRG-014: mobile (≤768px en ≤390px). Sidebar wordt via de viewportwaarnemer een
   gesloten tijdelijke overlay; AppBar respecteert de kleinere ruimte en page-padding
   gaat omlaag zodat tekst niet wordt afgekapt. */
@media (max-width: 768px) {
    /* MudLayout bewaart na de runtimewissel Mini -> Temporary zijn eerder berekende
       mini-marge. De compacte layout is expliciet de bron van waarheid: de tijdelijke
       lade zweeft boven de inhoud en reserveert dus geen 72 px. */
    .curanta-layout-compact .mud-main-content { margin-left: 0 !important; }
    .curanta-page {
        padding: 12px 14px 24px;
        max-width: 100%;
    }
    .curanta-appbar-logo { height: 28px; }
    .curanta-appbar-divider { margin: 0 6px; }
    .curanta-appbar .mud-chip { display: none; }
    /* AppBar-userchip alleen avatar tonen */
    .curanta-appbar-accountmenu > button .mud-button-label { display: none; }
    /* MudGrid-items maken altijd 100% breed onder 768px ongeacht xs/sm-attributen
       om overflow van complexe KPI-cards te voorkomen. */
    .mud-grid > .mud-grid-item { flex-basis: 100% !important; max-width: 100% !important; }
    /* Welcome-banner compacter */
    .curanta-welcome { padding: 16px; }
    .curanta-welcome h1, .curanta-welcome .mud-typography-h4 { font-size: 18px; }
    /* Section titles kleiner */
    .curanta-section-title { font-size: 12px; margin-top: 18px; }
    /* Kpi-cards iets kleiner */
    .curanta-kpi-value { font-size: 22px !important; }
}

@media (max-width: 390px) {
    .curanta-page { padding: 10px 10px 20px; }
    .curanta-appbar-logo { height: 24px; }
    /* Menu, merk, hulp, meldingen en account passen samen binnen 320 px. Feedback en
       thema blijven via hun eigen routes/voorkeuren beschikbaar, maar duwen het
       accountmenu niet meer buiten beeld. */
    .curanta-appbar-mobile-secondary { display: none !important; }
    /* Knoppen mogen niet meer overlappen — verticaal stacken.
       ⚠ Niet `word-break: break-word`: dat breekt ook middenin een woord terwijl er een spatie
       vlakbij staat. "REGISTER EXPORTEREN" werd zo "REGISTERE / N" (gemeten op /compliance/nis2,
       320 px, 20-09-2026). `overflow-wrap: break-word` breekt eerst op de spatie en pas binnen
       een woord als dat woord alléén niet past. */
    .curanta-page .mud-button { white-space: normal; overflow-wrap: break-word; word-break: normal; }
}

@media (max-width: 600px) {
    /* MudTable klapt hier in tot een lijst per rij, maar houdt de breedte van zijn inhoud: gemeten
       276 px in een venster van 234 px op /compliance/nis2 (20-09-2026). De rechterkant van elke
       waarde viel daardoor buiten beeld tot je zijwaarts schoof — precies wat het inklappen had
       moeten voorkomen. */
    .mud-table-container > .mud-table-root {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* De ingeklapte cel is een flexregel met de kolomnaam als ::before ernaast. Die regel mocht
       niet afbreken, dus de smalste breedte van de tabel was kolomnaam + 16 px + waarde — breder
       dan het scherm. Mag hij wél afbreken, dan valt de waarde onder zijn kolomnaam en past alles. */
    .mud-table-container > .mud-table-root td.mud-table-cell {
        flex-wrap: wrap;
        /* `anywhere` en niet `break-word`: alleen de eerste verlaagt ook de minimumbreedte die de
           tabel van deze cel erft. Met break-word bleef een waarde als
           "kennisassistent.vraagbeantwoording/1.0" de tabel 46 px breder maken dan haar venster,
           gemeten op /compliance/ai-act/logboek (20-09-2026). */
        overflow-wrap: anywhere;
    }
}

/* ZRG-015: WCAG 2.1 §1.4.11 — focus-indicator met minimaal 3:1 contrast.
   Alleen op elementen die GEEN eigen focusring krijgen van MudBlazor/DevExpress
   — anders ontstaat de dubbele ring (zie feedback Cliënt-selector). MudInput
   en MudSelect hebben hun eigen focus-styling via .mud-input-outlined-border;
   die laten we ongemoeid. */
.mud-button:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-chip:focus-visible,
.mud-link:focus-visible {
    outline: 2px solid var(--curanta-teal-600) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* INT-1229: footerlinks staan in secundaire lopende tekst. Maak ze ook zonder
   kleurverschil herkenbaar en geef voldoende contrast met die tekst. */
.curanta-domotica-footer .mud-link {
    color: #062A2E !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
/* Naked <a> / <button> die niet door MudBlazor worden gegenereerd. */
.curanta-page a:focus-visible,
.curanta-page button:not(.mud-button):not(.mud-icon-button):focus-visible {
    outline: 2px solid var(--curanta-teal-600) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}
.dxbl-grid-data-row:focus-within,
.dxbl-grid-data-row.dxbl-focused {
    outline: 2px solid var(--curanta-teal-600);
    outline-offset: -2px;
}

/* ZRG-045: subtiele Blazor reconnection-banner i.p.v. fullscreen-modal.
   Blazor toggelt class "show" tijdens reconnect, "failed" als reconnect
   uiteindelijk mislukt, en "rejected" wanneer de server de sessie heeft
   afgewezen. Default verborgen via display:none op #components-reconnect-modal.
   Alle drie de berichten zijn vooraf in de DOM aanwezig; we tonen alleen
   degene die past bij de huidige staat. */
.curanta-rejoin {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 12000;
    background: var(--curanta-amber-500, #E5A23B);
    color: #fff;
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 2px 8px rgba(14,31,44,0.12);
}
.curanta-rejoin.show,
.curanta-rejoin.failed,
.curanta-rejoin.rejected {
    display: block;
}
.curanta-rejoin.failed {
    background: var(--curanta-red-500, #D64545);
}
.curanta-rejoin.rejected {
    background: var(--curanta-red-500, #D64545);
}
.curanta-rejoin-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.curanta-rejoin-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: curanta-rejoin-spin 0.9s linear infinite;
}
.curanta-rejoin .curanta-rejoin-show,
.curanta-rejoin .curanta-rejoin-failed,
.curanta-rejoin .curanta-rejoin-rejected { display: none; }
.curanta-rejoin.show .curanta-rejoin-show,
.curanta-rejoin.failed .curanta-rejoin-failed,
.curanta-rejoin.rejected .curanta-rejoin-rejected { display: inline; }
.curanta-rejoin.failed .curanta-rejoin-spinner,
.curanta-rejoin.rejected .curanta-rejoin-spinner { display: none; }
.curanta-rejoin a { color: #fff; text-decoration: underline; font-weight: 600; }
@keyframes curanta-rejoin-spin {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------------
   Dark mode — geactiveerd zodra MudThemeProvider's IsDarkMode=true is, dan
   krijgt de root body de `.mud-dark-mode` class. Onze custom .curanta-* tokens
   worden via deze selector overschreven.
   ---------------------------------------------------------------------------- */

body.mud-dark-mode,
.mud-dark-mode {
    --curanta-surface:     #152832;
    --curanta-surface-alt: #1B313D;
    --curanta-bg:          #0E1B22;
    --curanta-border:      #1F3441;

    --curanta-ink-900: #E6EDF1;
    --curanta-ink-700: #C7D2DA;
    --curanta-ink-500: #9CB0BC;
    --curanta-ink-300: #6B8290;
    --curanta-ink-100: #2C4452;

    --curanta-teal-50:  #0E3A40;
}

/* PaletteDark.Primary is bewust donker genoeg voor witte tekst op gevulde oppervlakken. Losse
   primaire tekst, omlijnde knoppen en iconen hebben juist het lichte accent nodig tegen de
   donkere pagina. Zo hoeft één kleur niet twee tegengestelde contrastrollen te vervullen. */
.mud-dark-mode .mud-primary-text,
.mud-dark-mode .mud-button-text-primary,
.mud-dark-mode .mud-button-outlined-primary,
.mud-dark-mode .mud-button-text-primary .mud-button-label,
.mud-dark-mode .mud-button-outlined-primary .mud-button-label,
.mud-dark-mode .mud-button-text-primary .mud-icon-root,
.mud-dark-mode .mud-button-outlined-primary .mud-icon-root,
.mud-dark-mode .mud-icon-button-color-primary {
    color: #2FD3B6 !important;
}
.mud-dark-mode .mud-button-outlined-primary {
    border-color: #2FD3B6 !important;
}
/* MudButtonGroup zet Color op de groep, terwijl de kindknoppen de class `text-default`
   behouden. Daardoor missen de primary-selectors hierboven precies deze samengestelde knop. */
.mud-dark-mode .mud-button-group-root .mud-button-text-default {
    color: #2FD3B6 !important;
}
/* Een actieve MudTab gebruikt rechtstreeks PaletteDark.Primary. Die donkere vulkleur is
   geschikt onder witte knoptekst, maar leverde als losse tabtekst slechts 1,64:1 contrast op
   de surface. Gebruik voor deze tekstrol hetzelfde lichte accent als de overige controls. */
.mud-dark-mode .mud-tab.mud-tab-active {
    color: #2FD3B6 !important;
}
/* Outlined MudTabs mist de basisklasse .mud-paper en valt daardoor buiten het generieke
   MudPaper safety-net. Tijdens de asynchrone thema-initialisatie kon de tabbar wit blijven
   terwijl de actieve tab al de lichte dark-mode-accentkleur gebruikte (1,88:1). */
.mud-dark-mode .mud-tabs-tabbar.mud-paper-outlined {
    background-color: #152832 !important;
    border-color: #1F3441 !important;
}

/* `html` zelf valt buiten de `.mud-dark-mode`-selector (we zetten de class
   op <body>), maar bij scroll-overflow / overscroll-area is `html`'s
   default-bg (var(--curanta-bg)) wél zichtbaar. Synchroniseer expliciet. */
html:has(body.mud-dark-mode),
html.mud-dark-mode {
    background: #0E1B22;
}

/* MudLayout / MudMainContent zetten een eigen background-color uit de
   Mud-palette. Op pagina's korter dan viewport-hoogte zou onderaan een
   lichte strip ontstaan in dark mode (de Mud-bg overrulet onze --curanta-bg).
   Maak ze transparant zodat de body-bg doorslaat. */
.mud-dark-mode .mud-layout,
.mud-dark-mode .mud-main-content {
    background-color: transparent !important;
}
.mud-dark-mode [data-testid="backoffice-shell"] {
    background: var(--curanta-bg);
    min-height: 100vh;
}

.mud-dark-mode .curanta-appbar {
    background: #0E1B22 !important;
    color: #E6EDF1 !important;
    border-bottom-color: #1F3441;
}
/* WebKit erft bij een outlined default-chip de lichte Palette.TextPrimary (#1A2333)
   rechtstreeks op .mud-chip-content, ook al heeft de appbar zelf lichte tekst. Dat gaf in de
   donkere shell 1,11:1 contrast. Zet de tekstrol en rand daarom expliciet voor dit chiptype. */
.mud-dark-mode .mud-chip-outlined.mud-chip-color-default,
.mud-dark-mode .mud-chip-outlined.mud-chip-color-default .mud-chip-content {
    color: #C7D2DA !important;
    border-color: #6B8290 !important;
}
.mud-dark-mode .curanta-appbar-search {
    background: #1B313D;
    border-color: #1F3441;
}
.mud-dark-mode .curanta-appbar-search input { color: #E6EDF1; }
.mud-dark-mode .curanta-appbar-search:focus-within {
    background: #152832;
    border-color: var(--curanta-teal-500);
}
.mud-dark-mode .curanta-appbar-accountmenu > button:hover { background: #1B313D; }
.mud-dark-mode .curanta-appbar-accountmenu > button .mud-button-label { color: #E6EDF1; }

.mud-dark-mode .curanta-drawer {
    background: #0E1B22 !important;
    border-right-color: #1F3441 !important;
}
.mud-dark-mode .curanta-drawer .mud-nav-link {
    color: #C7D2DA;
}
.mud-dark-mode .curanta-drawer .mud-nav-link:hover {
    background: #0E3A40;
    color: #2FD3B6;
}
.mud-dark-mode .curanta-drawer .mud-nav-link.active,
.mud-dark-mode .curanta-drawer .mud-nav-link.mud-nav-link-active {
    background: #0E3A40 !important;
    color: #2FD3B6 !important;
}
.mud-dark-mode .curanta-drawer .mud-nav-link.mud-nav-link-active .mud-icon-root {
    color: #2FD3B6;
}
.mud-dark-mode .curanta-drawer .mud-nav-group > .mud-nav-link {
    color: #E6EDF1;
}
.mud-dark-mode .curanta-drawer .mud-nav-group > .mud-nav-link .mud-icon-root {
    color: #2FD3B6;
}
.mud-dark-mode .curanta-drawer .mud-nav-group > .mud-nav-link:hover {
    background: #0E3A40;
}
.mud-dark-mode .curanta-drawer .mud-nav-group .mud-collapse-container .mud-nav-link {
    color: #C7D2DA;
}
.mud-dark-mode .curanta-drawer .mud-nav-group.mud-nav-group-active > .mud-nav-link,
.mud-dark-mode .curanta-drawer .mud-nav-group.mud-nav-group-active > .mud-nav-link .mud-icon-root {
    color: #2FD3B6;
}
.mud-dark-mode .curanta-drawer .mud-nav-group .mud-nav-link-expand-icon { color: #6B8290; }
.mud-dark-mode .curanta-drawer-footer { border-top-color: #1F3441; color: #9CB0BC; }

.mud-dark-mode .curanta-kpi,
.mud-dark-mode .curanta-module-card {
    background: #152832;
    border-color: #1F3441;
    box-shadow: none;
}
.mud-dark-mode .curanta-kpi:hover,
.mud-dark-mode .curanta-module-card:hover {
    background: #1B313D;
    border-color: #2D4D5E;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.mud-dark-mode .curanta-kpi-value,
.mud-dark-mode .curanta-module-card-title { color: #E6EDF1; }
.mud-dark-mode .curanta-module-card-icon {
    background: #0E3A40;
    color: #2FD3B6;
}
.mud-dark-mode .curanta-module-card-links a { color: #C7D2DA; }
.mud-dark-mode .curanta-module-card-links a:hover { color: #2FD3B6; }

.mud-dark-mode .curanta-pill        { background: #0E3A40; color: #2FD3B6; }
.mud-dark-mode .curanta-pill.amber  { background: #3A2C16; color: #F0B85F; }
.mud-dark-mode .curanta-kpi-delta.amber { color: #F0B85F; }
.mud-dark-mode .curanta-pill.red    { background: #3A1F1F; color: #EF6A6A; }
.mud-dark-mode .curanta-pill.green  { background: #1A3326; color: #3FB87A; }
.mud-dark-mode .status-pill               { background: #0E3A40; color: #2FD3B6; }
.mud-dark-mode .status-pill.status-orange { background: #3A2C16; color: #F0B85F; }
.mud-dark-mode .status-pill.status-red    { background: #3A1F1F; color: #EF6A6A; }
.mud-dark-mode .status-pill.status-green  { background: #1A3326; color: #3FB87A; }
.mud-dark-mode .status-pill.status-grey   { background: #243642; color: #C7D2DA; }

/* Op de donkere kaart (#152832) haalt het lichte #D64545 maar 3,5:1 en #2E9D5E 4,4:1. Deze twee
   regels staan er niet omdat axe ze meldde — de browsersuite draait in de lichte modus en komt
   hier dus nooit — maar omdat dezelfde rekensom er geldt. Waarden van de donkere pillen
   hierboven: 6,0:1 en 5,0:1. */
.mud-dark-mode .curanta-kpi-delta.up   { color: #3FB87A; }
.mud-dark-mode .curanta-kpi-delta.down { color: #EF6A6A; }
/* Lichter dan de deltakleuren van de KPI-tegels, en dat moet ook: de benchmarktabel staat in de
   donkere modus op #44535b en niet op het diepere #152832 van een tegel. #3FB87A haalt daar 3,2:1
   en #EF6A6A 2,6:1; deze twee halen 5,6:1 en 4,7:1. Gemeten met axe op 10-09-2026. */
.mud-dark-mode .curanta-verschil.beter    { color: #A8E6C0; }
.mud-dark-mode .curanta-verschil.slechter { color: #FFB3B3; }

/* De grafiek onderaan /bi volgt het thema niet: DxChart houdt zijn witte vlak, en de aslabels
   blijven daarom donker. De legenda-tekst erfde wél de lichte tekstkleur van de donkere modus en
   stond zo op 1,18:1 — onleesbaar. Zelfde inkt als de aslabels ernaast. */
.mud-dark-mode .dxbl-chart-legend-text { color: #212529 !important; }

/* ----------------------------------------------------------------------------
   Generieke dark-mode safety-net voor MudPaper-wrappers.
   MudBlazor's eigen `--mud-palette-surface` switcht netjes met dark/light,
   maar veel pagina's gebruiken `MudPaper Outlined` met expliciete background
   uit het office-white-bs5-theme of DevExpress-overrides — die blijven licht.
   Deze regel dwingt MudBlazor's dark surface af op alle outlined-papers en
   filled-papers in dark mode tenzij ze een eigen Curanta-classname dragen
   (curanta-kpi / curanta-module-card / curanta-help-panel hebben hun eigen
   dark-overrides hierboven).
   ---------------------------------------------------------------------------- */
.mud-dark-mode .mud-paper.mud-paper-outlined:not(.curanta-kpi):not(.curanta-module-card):not(.curanta-help-panel),
.mud-dark-mode .mud-paper.mud-paper-elevation-0:not(.curanta-kpi):not(.curanta-module-card):not(.curanta-help-panel) {
    background-color: var(--mud-palette-surface, #152832) !important;
    border-color: var(--mud-palette-lines-default, #1F3441);
    color: var(--mud-palette-text-primary, #E6EDF1);
}

/* Tabel-rij hover/striping in dark — voorkomt licht-op-licht bij MudTable */
.mud-dark-mode .mud-table-row:hover {
    background-color: rgba(63, 191, 184, 0.06) !important;
}

/* MudAlert: outlined- en text-varianten halen hun border/text uit Mud-vars
   (al dark-aware), maar de "filled"-varianten gebruiken solid kleuren die
   in dark mode te bright zijn. Subtiel temperen. */
.mud-dark-mode .mud-alert-filled-info     { background-color: #0E3A40 !important; color: #E6EDF1; }
.mud-dark-mode .mud-alert-filled-success  { background-color: #1A3326 !important; color: #E6EDF1; }
.mud-dark-mode .mud-alert-filled-warning  { background-color: #3A2C16 !important; color: #F0E0BC; }
.mud-dark-mode .mud-alert-filled-error    { background-color: #3A1F1F !important; color: #F4C9C9; }
/* MudBlazor's outlined Normal-alert behoudt in WebKit de lichte Palette.TextPrimary direct op
   het bericht. Daarmee werd onder meer een groepsrapportage #1A2333 op #0E1B22 (1,11:1). */
.mud-dark-mode .mud-alert-outlined-normal,
.mud-dark-mode .mud-alert-outlined-normal .mud-alert-message {
    color: #C7D2DA !important;
}

/* ECD-240: WebKit hield op een gewone MudSelect de lichte-thema-inktkleur rechtstreeks op het
   label: #1A2333 op #0E1B22, door Axe gemeten op 1,11:1. De donkere themavariabele was op het
   moment van de meting al actief; alleen MudBlazors directe labelkleur liep achter. Dit safety-net
   geldt daarom voor elk veldlabel, niet alleen voor de ene indicatiefilter die het zichtbaar maakte. */
.mud-dark-mode .mud-input-label {
    color: #9CB0BC !important;
}

/* ===========================================================
 * DevExpress DxGrid + DxScheduler — Curanta-tuning overlay.
 * De office-white-bs5 theme levert de base-CSS; deze regels
 * trekken kleuren en spacing naar de Curanta-look (teal headers,
 * geen Bootstrap-blauwe focus-rings, MudPaper-radius).
 * =========================================================== */
.curanta-grid {
    border: none !important;
    border-radius: 12px;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px;
}
.curanta-grid.dxbl-grid,
.curanta-grid .dxbl-grid-table,
.curanta-grid .dxbl-grid-table-container,
.curanta-grid .dxbl-grid-header-panel,
.curanta-grid .dxbl-grid-group-panel,
.curanta-grid .dxbl-grid-pager {
    width: 100% !important;
    max-width: 100% !important;
}
.curanta-grid .dxbl-grid-header-row,
.curanta-grid .dxbl-grid-header,
.curanta-grid .dxbl-grid-header-content {
    background: var(--curanta-teal-50) !important;
    color: var(--curanta-teal-700) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--curanta-border) !important;
    letter-spacing: 0.01em;
}
.curanta-grid .dxbl-grid-header-row th,
.curanta-grid .dxbl-grid-table th { padding: 10px 14px !important; }
.curanta-grid .dxbl-grid-table td { padding: 8px 14px !important; }
.curanta-grid .dxbl-grid-data-row:hover { background: var(--curanta-bg) !important; }
.curanta-grid .dxbl-grid-data-row.dxbl-grid-data-row-selected { background: var(--curanta-teal-50) !important; }
.curanta-grid .dxbl-grid-filter-row { background: #fff; }
.curanta-grid .dxbl-grid-pager { background: #fff; border-top: 1px solid var(--curanta-border); }
.curanta-grid .dxbl-grid-group-panel {
    background: var(--curanta-bg);
    border: 1px dashed var(--curanta-border);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 8px;
    font-size: 12px;
    color: var(--curanta-ink-500);
}
.curanta-grid .dxbl-grid-no-data {
    padding: 32px 16px;
    text-align: center;
    color: var(--curanta-ink-500);
}
.curanta-grid .dxbl-grid-no-data::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
}
.curanta-grid input.dxbl-text-edit,
.curanta-grid input[type="text"] {
    border: 1px solid var(--curanta-border) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
}
.curanta-grid input.dxbl-text-edit:focus,
.curanta-grid input[type="text"]:focus {
    border-color: var(--curanta-teal-600) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(11, 110, 110, 0.12) !important;
}

/* Voorkom dat Bootstrap-utility-classes uit DevExpress.Themes onze
 * Mud-knoppen / KPI-tegels overschrijven. */
.curanta-grid .btn-primary { background: var(--curanta-teal-600) !important; border-color: var(--curanta-teal-600) !important; }
.curanta-grid .btn-link    { color: var(--curanta-teal-600) !important; }

.mud-dark-mode .curanta-grid .dxbl-grid-header-row,
.mud-dark-mode .curanta-grid .dxbl-grid-header,
.mud-dark-mode .curanta-grid .dxbl-grid-header-content {
    background: #0E3A40 !important;
    color: #2FD3B6 !important;
    border-bottom-color: #14535B !important;
}

/* DevExpress-base reageert niet op MudThemeProvider — eigen overlay nodig
   voor body, data-rijen, filter-row, pager en no-data-state zodat het grid
   visueel niet als witte rechthoek in het dark layout blijft hangen. */
.mud-dark-mode .curanta-grid,
.mud-dark-mode .curanta-grid .dxbl-grid-table,
.mud-dark-mode .curanta-grid .dxbl-grid-table-container,
.mud-dark-mode .curanta-grid .dxbl-grid-data-row,
.mud-dark-mode .curanta-grid .dxbl-grid-filter-row,
.mud-dark-mode .curanta-grid .dxbl-grid-pager,
.mud-dark-mode .curanta-grid .dxbl-grid-group-panel,
.mud-dark-mode .curanta-grid .dxbl-grid-no-data {
    background: #152832 !important;
    color: var(--mud-palette-text-primary, #E6EDF1) !important;
    border-color: #1F3441 !important;
}
.mud-dark-mode .curanta-grid .dxbl-grid-data-row:hover {
    background: #1B313D !important;
}
.mud-dark-mode .curanta-grid .dxbl-grid-data-row.dxbl-grid-data-row-selected {
    background: #0E3A40 !important;
}
.mud-dark-mode .curanta-grid .dxbl-grid-table td {
    border-color: #1F3441 !important;
    /* WebKit past DevExpress' lichte-thema-kleur rechtstreeks op de cel toe. Alleen color op
       de rij erft daar niet doorheen: #1A2333 op #152832 was vrijwel onzichtbaar (1,03:1). */
    color: #C7D2DA !important;
}
.mud-dark-mode .curanta-grid input.dxbl-text-edit,
.mud-dark-mode .curanta-grid input[type="text"] {
    background: #0E1B22 !important;
    color: #E6EDF1 !important;
    border-color: #1F3441 !important;
}

/* DevExpress Scheduler / Planbord — eveneens geen ingebouwde dark variant.
   Voorkomt witte achtergrond temidden van dark page. */
.mud-dark-mode .curanta-scheduler,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-view,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-day-view,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-week-view,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-month-view,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-time-cell,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-date-header,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-date-header-cell,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-resource-header,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-resource-cell,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-toolbar {
    background: #152832 !important;
    color: var(--mud-palette-text-primary, #E6EDF1) !important;
    border-color: #1F3441 !important;
}
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-time-cell,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-date-header-cell {
    border-color: #1F3441 !important;
}
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-apt,
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-appointment {
    background: #0E3A40 !important;
    color: #2FD3B6 !important;
    border: 1px solid #14535B !important;
}
.mud-dark-mode .curanta-scheduler .dxbl-scheduler-today-cell {
    background: #1B313D !important;
}

/* DevExpress Scheduler v25 gebruikt `dxbl-sc-*` short-prefix in plaats van
   `dxbl-scheduler-*` op de tijdkolom/headers/uur-cellen. Selectors hieronder
   matchen de echte DOM van de planbord-pagina (geverifieerd via DOM-audit
   2026-05-25). Zonder deze regels blijven de tijdcellen wit. */
.mud-dark-mode .dxbl-sc,
.mud-dark-mode .dxbl-sc-viewport,
.mud-dark-mode .dxbl-sc-time-rulers,
.mud-dark-mode .dxbl-sc-time-rulers-caption,
.mud-dark-mode .dxbl-sc-time-rulers-cell,
.mud-dark-mode .dxbl-sc-time-scale,
.mud-dark-mode .dxbl-sc-time-scale-cell,
.mud-dark-mode .dxbl-sc-hour-cell,
.mud-dark-mode .dxbl-sc-day-cell,
.mud-dark-mode .dxbl-sc-day-header,
.mud-dark-mode .dxbl-sc-date-header,
.mud-dark-mode .dxbl-sc-resource-header,
.mud-dark-mode .dxbl-sc-resource-cell,
.mud-dark-mode .dxbl-sc-toolbar,
.mud-dark-mode .dxbl-sc-grid,
.mud-dark-mode .dxbl-sc-grid-row,
.mud-dark-mode .dxbl-sc-grid-cell {
    background: #152832 !important;
    color: var(--mud-palette-text-primary, #E6EDF1) !important;
    border-color: #1F3441 !important;
}
.mud-dark-mode .dxbl-sc-appointment,
.mud-dark-mode .dxbl-sc-apt {
    background: #0E3A40 !important;
    color: #2FD3B6 !important;
    border: 1px solid #14535B !important;
}

/* DevExpress scroll-viewer wrapper (componenten als wizards, large content
   containers) krijgt hardcoded `background:#fff` van de base-theme. */
.mud-dark-mode .dxbl-scroll-viewer,
.mud-dark-mode .dxbl-scroll-viewer-content,
.mud-dark-mode .dxbl-sv,
.mud-dark-mode .dxbl-sv-content {
    background-color: #152832 !important;
    color: var(--mud-palette-text-primary, #E6EDF1) !important;
}

/* DevExpress Grid v25 — kolommen aan de rand (selectievak-leeg-cel, rij-id-leeg-cel)
   renderen als `dxbl-grid-empty-cell` op `<col>` / `<th>` / `<td>`. Die hebben
   geen curanta-grid-prefix nodig (vallen overal binnen DX-grids). Zonder dit
   blijven er smalle witte verticale strepen aan de gridrand staan in dark. */
.mud-dark-mode .dxbl-grid-empty-cell,
.mud-dark-mode col.dxbl-grid-empty-cell,
.mud-dark-mode th.dxbl-grid-empty-cell,
.mud-dark-mode td.dxbl-grid-empty-cell {
    background-color: #152832 !important;
    border-color: #1F3441 !important;
}

/* DX checkbox-inner-fill (`dxbl-checkbox-check-element`) heeft default-white
   binnenkant ook in unchecked state — opvallend op donkere achtergrond. */
.mud-dark-mode .dxbl-checkbox-check-element {
    background-color: #0E1B22 !important;
    border-color: #14535B !important;
}
.mud-dark-mode .dxbl-checkbox-checked .dxbl-checkbox-check-element,
.mud-dark-mode .dxbl-checkbox-input:checked + .dxbl-checkbox-check-element {
    background-color: var(--curanta-teal-600, #0E4F57) !important;
    border-color: var(--curanta-teal-500, #21C7A8) !important;
}

/* DX Pager (paginering onder grids) — `dxbl-btn-outline-secondary` + verwante
   knoppen renderen wit met grijze border. Maakt de pager prominent licht aan
   de onderkant van élk grid in dark mode. */
.mud-dark-mode .dxbl-pager,
.mud-dark-mode .dxbl-pager .dxbl-pager-content,
.mud-dark-mode .dxbl-pager .dxbl-pager-page-size-selector {
    background: #152832 !important;
    color: var(--mud-palette-text-primary, #E6EDF1) !important;
    border-color: #1F3441 !important;
}
.mud-dark-mode .dxbl-pager .dxbl-btn,
.mud-dark-mode .dxbl-pager .dxbl-btn-outline-secondary,
.mud-dark-mode .dxbl-btn.dxbl-btn-outline-secondary,
.mud-dark-mode .curanta-grid .dxbl-btn,
.mud-dark-mode .curanta-grid .dxbl-btn-outline-secondary {
    background: #1B313D !important;
    color: #E6EDF1 !important;
    border-color: #14535B !important;
}
.mud-dark-mode .dxbl-pager .dxbl-btn:hover,
.mud-dark-mode .dxbl-pager .dxbl-btn-outline-secondary:hover,
.mud-dark-mode .dxbl-btn.dxbl-btn-outline-secondary:hover {
    background: #0E3A40 !important;
    color: #2FD3B6 !important;
    border-color: #2FD3B6 !important;
}
.mud-dark-mode .dxbl-pager .dxbl-btn.dxbl-active,
.mud-dark-mode .dxbl-pager .dxbl-btn-outline-secondary.dxbl-active {
    background: var(--curanta-teal-700, #0E4F57) !important;
    color: #fff !important;
    border-color: var(--curanta-teal-600, #0E4F57) !important;
}

/* MudTooltip — default light variant in donker layout is grijs-op-donker.
   Force een dark surface met heldere tekst voor leesbare tooltips. */
.mud-dark-mode .mud-tooltip {
    background-color: #1F3441 !important;
    color: #E6EDF1 !important;
}
.mud-dark-mode .mud-tooltip-arrow {
    border-color: #1F3441 !important;
}

/* Spraak-input puls-animatie (gebruikt door <SpraakInputButton>). Visualiseert
   een "opnemen"-state zodat de gebruiker weet dat de microfoon actief is. */
@keyframes curanta-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ===========================================================
 * ZRG-049 + ZRG-062/063/064: grid-container shrink-wrap.
 *
 * Voorheen alleen `:has(> .curanta-grid)` (direct child). In de praktijk
 * rendert DxGrid de class niet altijd op de directe DOM-child van MudPaper —
 * soms hangt er een wrapping <div> tussen. We pakken daarom élke MudPaper
 * met een curanta-grid érgens binnenin, mits het verder géén formulier-
 * elementen of headers bevat (filters/buttons hebben hun eigen card).
 *
 * Voor MudPaper met header+grid in dezelfde wrapper: voeg `Class="..."` met
 * een eigen klasse toe en sluit hieronder uit (geen voorbeeld nodig — geen
 * van de huidige 91 grid-pagina's mengt header+grid in één paper).
 *
 * :has() is ondersteund vanaf Chrome 105 / Safari 15.4. Pre-:has-browsers
 * krijgen geen shrink — de grids blijven dan zoals voorheen (volle breedte
 * met witte ruimte naast de kolommen). Geen regressie.
 * =========================================================== */
/* ZRG-069 (bug #45): voorheen `width: fit-content` waardoor MudPaper-met-grid
   shrink-wrapped tot ~60% van de page-breedte op brede schermen — alerts en
   KPI's eromheen toonden zich op 1440px maar het grid-card was 800-900px.
   Volledige breedte met horizontale overflow als kolommen écht niet passen. */
.curanta-page .mud-paper:has(.curanta-grid) {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
}
.curanta-page .mud-paper:has(.curanta-grid) .curanta-grid,
.curanta-page .mud-paper:has(.curanta-grid) .curanta-grid.dxbl-grid,
.curanta-page .mud-paper:has(.curanta-grid) .curanta-grid .dxbl-grid-table,
.curanta-page .mud-paper:has(.curanta-grid) .curanta-grid .dxbl-grid-table-container,
.curanta-page .mud-paper:has(.curanta-grid) .curanta-grid .dxbl-grid-header-panel,
.curanta-page .mud-paper:has(.curanta-grid) .curanta-grid .dxbl-grid-pager {
    width: auto !important;
    max-width: 100% !important;
}

/* ===========================================================
 * S3-01: Touch-optimalisatie voor DxScheduler (Planbord).
 * WCAG 2.1 SC 2.5.5 eist minimaal 44×44 CSS-pixels voor
 * aanraakdoelen. touch-action: pan-y behoudt verticaal scrollen;
 * horizontale swipes worden afgehandeld door Blazor-handlers.
 * =========================================================== */
.curanta-scheduler .dxbl-scheduler-apt,
.curanta-scheduler .dxbl-scheduler-appointment {
    min-height: 44px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}
.curanta-scheduler .dxbl-scheduler-time-cell,
.curanta-scheduler .dxbl-scheduler-date-header-cell {
    min-height: 44px !important;
}
.curanta-planbord-swipe-zone {
    touch-action: pan-y;
    user-select: none;
}

/* ===========================================================
 * S3-08: Admin-sidebar zoekbalk + sectie-labels.
 * Categorie-labels zijn visueel scheidingstekens binnen de
 * Admin-navgroup — geen klikbaar element, enkel oriëntatie.
 * De zoekbalk filterrt items inline via Blazor-binding.
 * =========================================================== */
.curanta-admin-nav-section {
    font-size: 10px;
    font-weight: 700;
    color: var(--curanta-ink-500);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 10px 20px 3px;
    pointer-events: none;
}

/* ⚠ In de ingeklapte mini-drawer past een groepskop niet. Gemeten 25-08-2026: de drawer is dan
   72 px breed en de kop "Overzicht" heeft een scrollWidth van 87 tegen een clientWidth van 71.
   Met white-space: normal brak hij af tot onleesbare fragmenten — "CLIËNTB.", "LOGISTIE.",
   "ZORGPRO." — op élk backoffice-scherm, en daarmee ook in de 31 instructievideo's van die reeks,
   die allemaal met ingeklapt menu worden opgenomen.

   Verbergen kost hier niets: de drawer heeft OpenMiniOnHover="true", dus zodra de muis erop komt
   staat hij weer op 288 px en zijn de kopjes er gewoon. Een mini-drawer hoort iconen te tonen en
   geen half woord. Zelfde reden voor de voettekst: "Curanta · v0.4" brak over drie regels. */
.mud-drawer--closed .curanta-admin-nav-section,
.mud-drawer--closed .curanta-drawer-footer {
    display: none;
}
/* MudBlazor zet ook .mud-nav-link-text op display:none. Daarmee verliezen de
   zichtbare mini-drawericonen hun toegankelijke naam. Houd de bestaande tekst
   voor hulptechnologie in de boom; bij hover neemt MudBlazor de zichtbare tekst
   weer over wanneer de lade naar 288 px uitklapt. */
.mud-drawer--closed:not(:hover) .curanta-nav .mud-nav-link-text {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}
.curanta-admin-search .mud-input-outlined .mud-input {
    font-size: 12px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

/* ─────────────────────── Command palette (Ctrl-K) ─────────────────────── */
/* Top-aligned overlay i.p.v. MudDialog: gebruiker verwacht een cmd-bar
   bovenaan het scherm, geen midden-modaal. */
.curanta-palette-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 27, 34, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1500;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 100px;
}

.curanta-palette {
    width: min(640px, calc(100% - 32px));
    background: var(--curanta-surface, #fff);
    border-radius: 14px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.curanta-palette-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--curanta-line, #e2e8ec);
}

.curanta-palette-input input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    color: var(--curanta-ink-900, #1a2333);
}

.curanta-palette-kbd,
.curanta-palette-footer kbd {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    background: var(--curanta-bg, #F1F8F7);
    border: 1px solid var(--curanta-line, #e2e8ec);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--curanta-ink-500, #5c6677);
}

.curanta-palette-results {
    overflow-y: auto;
    flex: 1;
    padding: 6px 0;
}

.curanta-palette-empty {
    padding: 24px 16px;
    color: var(--curanta-ink-500);
    font-size: 13px;
    text-align: center;
}

.curanta-palette-item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.curanta-palette-item.active {
    background: var(--curanta-teal-50, #e6f4f3);
}

.curanta-palette-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--curanta-ink-900, #1a2333);
}

.curanta-palette-item-crumb {
    font-size: 11px;
    color: var(--curanta-ink-500);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.curanta-palette-footer {
    display: flex;
    gap: 16px;
    padding: 8px 16px;
    border-top: 1px solid var(--curanta-line, #e2e8ec);
    background: var(--curanta-bg, #F1F8F7);
    font-size: 11px;
    color: var(--curanta-ink-500, #5c6677);
}

/* Dark-mode varianten */
body.mud-dark-mode .curanta-palette {
    background: var(--mud-palette-surface);
}
body.mud-dark-mode .curanta-palette-input,
body.mud-dark-mode .curanta-palette-footer {
    border-color: var(--mud-palette-lines-default);
}
body.mud-dark-mode .curanta-palette-input input,
body.mud-dark-mode .curanta-palette-item-title {
    color: var(--mud-palette-text-primary);
}
body.mud-dark-mode .curanta-palette-item.active {
    background: rgba(63, 191, 184, 0.12);
}

/* ─────────────────────── Nav badge ─────────────────────── */
.curanta-nav-badge {
    margin-left: auto;
}
.curanta-nav-badge .mud-badge {
    position: static !important;
    transform: none !important;
}

/* ─────────────────────── Grid: row-clickability ─────────────────────── */
/* Cell-templates die navigeren krijgen deze class. Cursor:pointer maakt
   visueel duidelijk dat de cel klikbaar is, hover-feedback gebeurt op rij-
   niveau via DxGrid's eigen hover-state. */
.curanta-grid-clickable {
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.curanta-grid-clickable:hover {
    color: var(--curanta-teal-700, #0E4F57);
}
.mud-dark-mode .curanta-grid-clickable:hover {
    color: var(--curanta-teal-500, #21C7A8);
}

/* ── Skiplink ─────────────────────────────────────────────────────────────
   Visueel verborgen tot hij focus krijgt; dan springt hij zichtbaar in beeld.
   Bewust géén display:none of visibility:hidden — dan zou hij ook voor
   toetsenbord- en schermlezergebruikers verdwijnen, wat het doel tenietdoet.
   WCAG 2.2 succescriterium 2.4.1 (Blokken omzeilen). */
.curanta-skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--curanta-teal-700, #0E4F57);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}

.curanta-skiplink:focus,
.curanta-skiplink:focus-visible {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: -6px;
}

/* ── Tekstcontrast (WCAG 2.2 AA, 1.4.3) ───────────────────────────────────
   B-09. De accentkleur teal-500 (#21C7A8) haalt als tekst op wit 3,0:1 en
   blijft daarmee onder de 4,5:1 die de norm voor gewone tekst vraagt.

   Bewuste afbakening: de norm stelt alleen eisen aan tekst en aan bedienbare
   onderdelen, niet aan decoratieve vlakken. De heldere teal blijft dus gewoon
   staan als achtergrond, rand en icoonkleur — het merk verandert niet. Alleen
   dáár waar die kleur als leesbare tekst dient, schuift hij naar teal-700
   (#0E4F57, 9,2:1 op wit). Die kleur zit al in het palet en wordt elders al
   voor tekst gebruikt, dus dit introduceert geen nieuwe merkkleur.

   Zelfde redenering als bij .curanta-welcome hierboven, waar het lichte
   gradient-eindpunt om die reden al naar teal-600 is gezet. */

.mud-alert-outlined-info .mud-alert-message,
.mud-alert-text-info .mud-alert-message,
.mud-alert-outlined-info .mud-alert-icon,
.mud-alert-text-info .mud-alert-icon {
    color: var(--curanta-teal-700, #0E4F57);
}

/* Een gevulde info-melding heeft de omgekeerde correctie nodig: witte tekst op
   teal-500 haalt 2,1:1. Donkere inkt op datzelfde vlak haalt 7,8:1, en dat
   houdt de herkenbare teal-achtergrond intact. */
.mud-alert-filled-info,
.mud-alert-filled-info .mud-alert-message,
.mud-alert-filled-info .mud-alert-icon {
    color: var(--curanta-ink-900, #0E1F2C);
}

/* In donkere modus is de verhouding omgekeerd: daar staat de lichte teal juist
   goed op een donkere achtergrond, en zou teal-700 donkere tekst op donker
   opleveren. Deze regel houdt dark mode dus op de heldere kleur. */
.mud-dark-mode .mud-alert-outlined-info .mud-alert-message,
.mud-dark-mode .mud-alert-text-info .mud-alert-message,
.mud-dark-mode .mud-alert-outlined-info .mud-alert-icon,
.mud-dark-mode .mud-alert-text-info .mud-alert-icon {
    color: var(--curanta-teal-400, #34C3AC);
}

/* Inline code. De Bootstrap-standaard #d63384 haalt op onze teal-50-achtergrond
   4,18:1 — net te weinig. #B02A6B haalt 5,8:1 en houdt hetzelfde karakter. */
code {
    color: #B02A6B;
}

.mud-dark-mode code {
    /* Op een donkere achtergrond werkt de omgekeerde kant: licht roze op donker. */
    color: #F0A8C8;
}

/* In een gevulde melding is de vlakkleur de achtergrond, en daar haalt dezelfde roze tint het
   niet: op de amberen waarschuwing van /integratie/lsp bleef 2,8:1 over (gemeten 20-09-2026).
   Binnen zo'n melding neemt code de tekstkleur van de melding over; het lichte vlakje houdt het
   herkenbaar als code. */
.mud-alert-filled-warning code,
.mud-alert-filled-error code,
.mud-alert-filled-success code,
.mud-alert-filled-info code,
.mud-alert-filled-dark code,
.mud-alert-filled-primary code,
.mud-alert-filled-secondary code,
.mud-dark-mode .mud-alert-filled-warning code,
.mud-dark-mode .mud-alert-filled-error code,
.mud-dark-mode .mud-alert-filled-success code,
.mud-dark-mode .mud-alert-filled-info code {
    color: inherit;
    background: rgba(255, 255, 255, 0.22);
}

/* ── Gerenderde markdown in kennisbankartikelen en e-learninglessen ─────────────
   Aanleiding (21-08-2026): .curanta-lesson-content had geen enkele stijl, dus een
   tabel in een artikel kreeg de browserstandaard: geen randen, geen padding. Zodra
   de eerste kolom iets breder werd plakte hij aan de tweede vast — in het artikel
   over BI stond "Declaratie & productieProductie gereed, iWmo323-berichten".
   Dezelfde opmaak als .curanta-help-markdown, zodat een artikel er hetzelfde
   uitziet waar je het ook opent. */
.curanta-lesson-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}
.curanta-lesson-content th,
.curanta-lesson-content td {
    border: 1px solid var(--curanta-border);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}
.curanta-lesson-content th { background: var(--curanta-surface-alt); font-weight: 600; }
.curanta-lesson-content blockquote {
    border-left: 3px solid var(--curanta-teal-500);
    background: var(--curanta-teal-50);
    margin: 12px 0;
    padding: 10px 14px;
    color: var(--curanta-ink-700);
    border-radius: 0 var(--curanta-radius-sm) var(--curanta-radius-sm) 0;
}
.curanta-lesson-content hr {
    border: 0; border-top: 1px solid var(--curanta-border);
    margin: 18px 0;
}
.mud-dark-mode .curanta-lesson-content blockquote { background: #0E3A40; }

/* ----------------------------------------------------------------------------
   Semantische kleuren die als tekst of achter tekst staan.

   De vier accentkleuren zijn gekozen als vlakkleur en werken zo prima. Als tekst
   halen ze de norm niet, en achter witte tekst evenmin. Gemeten op 24-08-2026:

     kleur              als tekst op wit   wit erop      gekozen
     Warning #E5A23B    2,20:1             2,20:1        tekst #8C5A14 (5,9:1) · vlak blijft, inkt erop (7,2:1)
     Error   #D64545    4,38:1             4,38:1        tekst #8C1F1F (9,0:1) · vlak #B03434, wit erop (6,2:1)
     Success #2E9D5E    3,44:1             3,44:1        tekst #1F6638 (7,0:1) · vlak #1F6638, wit erop (7,0:1)
     Info    #21C7A8    2,14:1             2,14:1        tekst #0E4F57 (9,2:1) · vlak blijft, inkt erop (7,4:1)

   Twee verschillende oplossingen, en dat is geen willekeur: op amber en teal
   haalt dónkere inkt ruim de norm, dus daar blijft het herkenbare vlak staan. Op
   rood en groen haalt donkere inkt het niet (3,6:1 en 4,6:1), dus daar gaat het
   vlak een tint dieper en blijft de tekst wit. De tekstkleuren komen uit
   .curanta-pill, zodat een kleur overal hetzelfde betekent.

   Aanleiding: axe meldde 2,15:1 op de waarschuwingsknop van de portaal-inlogpagina
   en 3,68:1 op "Ziek melden" in het medewerkerportaal. Die twee zijn de gemeten
   gevallen; de regel geldt voor alle 481 plekken waar een semantische kleur wordt
   gebruikt, want daar geldt dezelfde rekensom.
   ---------------------------------------------------------------------------- */

/* Als tekst: op wit, dus donker. */
.mud-button-text.mud-button-text-warning,
.mud-button-outlined.mud-button-outlined-warning,
.mud-icon-button.mud-icon-button-color-warning,
.mud-alert-text-warning .mud-alert-message,
.mud-alert-outlined-warning .mud-alert-message { color: #8C5A14; }

.mud-button-text.mud-button-text-error,
.mud-button-outlined.mud-button-outlined-error,
.mud-icon-button.mud-icon-button-color-error,
.mud-alert-text-error .mud-alert-message,
.mud-alert-outlined-error .mud-alert-message { color: #8C1F1F; }

.mud-button-text.mud-button-text-success,
.mud-button-outlined.mud-button-outlined-success,
.mud-icon-button.mud-icon-button-color-success,
.mud-alert-text-success .mud-alert-message,
.mud-alert-outlined-success .mud-alert-message { color: #1F6638; }

.mud-button-text.mud-button-text-info,
.mud-button-outlined.mud-button-outlined-info,
.mud-icon-button.mud-icon-button-color-info,
.mud-alert-text-info .mud-alert-message,
.mud-alert-outlined-info .mud-alert-message { color: #0E4F57; }

/* Als vlak: amber en teal houden hun kleur en krijgen donkere inkt. */
.mud-button-filled-warning,
.mud-button-filled-warning .mud-button-label,
.mud-alert-filled-warning,
.mud-alert-filled-warning .mud-alert-message { color: #1A2333 !important; }

.mud-button-filled-info,
.mud-button-filled-info .mud-button-label,
.mud-alert-filled-info,
.mud-alert-filled-info .mud-alert-message { color: #1A2333 !important; }

/* MudChip gebruikt andere klassennamen dan knoppen en alerts. Zonder deze regels bleef
   een rode statuschip op #D64545 steken: wit daarop is 4,38:1 en mist WCAG AA. */
.mud-chip-filled.mud-chip-color-warning,
.mud-chip-filled.mud-chip-color-info { color: #1A2333 !important; }

/* Tertiary is in dit thema teal-500 (#21C7A8) — hetzelfde vlak als info, en dus dezelfde rekensom:
   wit erop is 2,14:1, donkere inkt 7,4:1. Gemeten op de kaderchip "Wmo" in de contracttabel van
   /declaratie/zorginkoop, 11-09-2026. Bewust een eigen regel; zie de toelichting bij de foutbadge
   verderop. */
.mud-chip-filled.mud-chip-color-tertiary { color: #1A2333 !important; }


/* Tot hier ging het over gevulde chips. Een chip in de tekst- of omlijnde variant heeft géén vlak:
   daar staat de semantische kleur zelf als tekst op wit, en dan gelden de waarden uit de tabel
   hierboven — #2E9D5E haalt 3,44:1, #21C7A8 zelfs 2,14:1. Gemeten op de synchronisatiechips van
   /declaratie/agb en /declaratie/agb-codes ("Geslaagd", vijf knopen per scherm).

   De semantische inkt-tokens dragen per betekenis al de leesbare tint én een donkere tegenhanger,
   dus deze regels hoeven niet apart voor donkere modus te worden herhaald. */
.mud-chip-outlined.mud-chip-color-success,
.mud-chip-text.mud-chip-color-success { color: var(--curanta-inkt-succes, #1F6638) !important; }
.mud-chip-outlined.mud-chip-color-error,
.mud-chip-text.mud-chip-color-error { color: var(--curanta-inkt-fout, #8C1F1F) !important; }
.mud-chip-outlined.mud-chip-color-warning,
.mud-chip-text.mud-chip-color-warning { color: var(--curanta-inkt-waarschuwing, #8C5A14) !important; }
/* MudChip zet het etiket in een eigen span; zonder deze regel wint de standaardkleur van die span
   van de kleur op de chip zelf. Dezelfde tokens, zodat de donkere stand meekomt. */
.mud-chip-outlined.mud-chip-color-warning .mud-chip-content,
.mud-chip-text.mud-chip-color-warning .mud-chip-content { color: var(--curanta-inkt-waarschuwing, #8C5A14) !important; }
/* De gevúlde waarschuwings- en infochip houdt zijn donkere inkt op het amberen respectievelijk
   teal vlak: daar is de kleur geen tekst maar achtergrond, en het token zou in donkere stand
   lichte inkt op een licht vlak zetten. */
.mud-chip-filled.mud-chip-color-warning > .mud-chip-content,
.mud-chip-filled.mud-chip-color-info > .mud-chip-content { color: #1A2333 !important; }
.mud-chip-outlined.mud-chip-color-info,
.mud-chip-text.mud-chip-color-info,
.mud-chip-outlined.mud-chip-color-primary,
.mud-chip-text.mud-chip-color-primary { color: var(--curanta-inkt-info, #0E4F57) !important; }

/* Rood en groen gaan een tint dieper; de tekst blijft wit. */
.mud-button-filled-error,
.mud-alert-filled-error,
.mud-chip-filled.mud-chip-color-error { background-color: #B03434 !important; color: #FFFFFF !important; }

/* De meldingenteller in de topbalk viel bij deze afspraak buiten de boot: MudBadge zet
   .mud-theme-error en niet .mud-chip-color-error, dus stond wit op #D64545 — 4,37:1, gemeten met
   axe op 10-09-2026 en zichtbaar op élke pagina van de backoffice. Twaalf pixels, dus de soepeler
   eis voor grote tekst geldt niet. Zelfde tint dieper als de rest, zelfde witte tekst.

   Als eigen regel en niet als extra selector op de regel hierboven: ZvwCorrectieToegankelijkheids-
   Tests toetst die regel met een reguliere expressie die de selector en de declaratie aan elkaar
   verwacht. Een komma ertussen maakte die wacht rood — terecht, want zij bewaakt dat de drie
   hoststylesheets dezelfde chipkleuren dragen. */
.mud-badge.mud-theme-error { background-color: #B03434 !important; color: #FFFFFF !important; }

/* Dezelfde vondst, andere variant: MudBadge met Color.Info zet wit op teal-500 (#21C7A8) en dat
   is 2,14:1 — de slechtste meting van deze ronde, gemeten met axe op /berichten, 10-09-2026
   (bevinding OVER-1009G). De info-chips en -alerts hierboven lossen datzelfde op door de kleur
   te houden en de inkt donker te maken; de badge viel er alleen buiten omdat MudBlazor hem een
   eigen klasse geeft. Zelfde afspraak, zelfde inkt: #1A2333 op teal haalt 7,5:1.

   Ook dit is bewust een eigen regel en geen extra selector op de regel erboven; zie de
   toelichting daar. */
.mud-badge.mud-theme-info { color: #1A2333 !important; }

.mud-button-filled-error:hover { background-color: #8C1F1F !important; }

.mud-button-filled-success,
.mud-alert-filled-success,
.mud-chip-filled.mud-chip-color-success { background-color: #1F6638 !important; color: #FFFFFF !important; }
.mud-button-filled-success:hover { background-color: #17502C !important; }

/* In de donkere modus is de verhouding omgekeerd: daar staat de lichte tint juist
   goed op een donkere achtergrond en zou donkere tekst onleesbaar worden. */
.mud-dark-mode .mud-button-text.mud-button-text-warning,
.mud-dark-mode .mud-button-outlined.mud-button-outlined-warning,
.mud-dark-mode .mud-icon-button.mud-icon-button-color-warning,
.mud-dark-mode .mud-alert-text-warning .mud-alert-message,
.mud-dark-mode .mud-alert-outlined-warning .mud-alert-message { color: #F0B85F !important; }
.mud-dark-mode .mud-button-text.mud-button-text-error,
.mud-dark-mode .mud-button-outlined.mud-button-outlined-error,
.mud-dark-mode .mud-icon-button.mud-icon-button-color-error,
.mud-dark-mode .mud-alert-text-error .mud-alert-message,
.mud-dark-mode .mud-alert-outlined-error .mud-alert-message { color: #EF6A6A !important; }
.mud-dark-mode .mud-button-text.mud-button-text-success,
.mud-dark-mode .mud-button-outlined.mud-button-outlined-success,
.mud-dark-mode .mud-icon-button.mud-icon-button-color-success,
.mud-dark-mode .mud-alert-text-success .mud-alert-message,
.mud-dark-mode .mud-alert-outlined-success .mud-alert-message { color: #3FB87A !important; }
.mud-dark-mode .mud-button-text.mud-button-text-info,
.mud-dark-mode .mud-button-outlined.mud-button-outlined-info,
.mud-dark-mode .mud-icon-button.mud-icon-button-color-info,
.mud-dark-mode .mud-alert-text-info .mud-alert-message,
.mud-dark-mode .mud-alert-outlined-info .mud-alert-message { color: #2FD3B6 !important; }

/* ECD-221: MudBlazor kleurt het label van een veld met focus in Primary. Onze donkere Primary
   is bewust geschikt als gevuld vlak met witte tekst, maar haalt als letters op Surface slechts
   2,13:1. In dialogen houdt de lichte teal de focusaccentuering én haalt het label WCAG AA. */
.mud-dark-mode .mud-dialog .mud-input-control:focus-within .mud-input-label {
    color: #5AD3BD !important;
}

/* ECD-304: ook veldfouten zijn tekst. De rode accentkleur haalde in de
   MDO-planning 4,37:1 op wit; gebruik dezelfde foutinkt als de alerts.
   MudBlazor zet het foutlabel met vier klassen en !important vast. */
.mud-input-control .mud-input-label.mud-input-label-inputcontrol.mud-input-error,
.mud-input-helper-text.mud-input-error {
    color: #8C1F1F !important;
}
.mud-dark-mode .mud-input-control .mud-input-label.mud-input-label-inputcontrol.mud-input-error,
.mud-dark-mode .mud-dialog .mud-input-helper-text.mud-input-error {
    color: #EF6A6A !important;
}

/* DevExpress geeft de tekst van een lege grid standaard #A1A1A1 op wit (2,58:1).
   Gebruik dezelfde contrastrijke secundaire inkt als de rest van Curanta. De
   !important is nodig om de later geladen DevExpress-themaregel te overschrijven. */
.curanta-grid .dxbl-grid-empty-data-not-found {
    color: var(--curanta-ink-500, #5C6677) !important;
}

/* OVER-1009D: de verwijderknop bij een eigen bericht verscheen alleen op @onmouseenter
   en bestond zonder muis dus niet in de DOM — niet aan te tabben, en daarmee een
   overtreding van WCAG 2.2 SC 2.1.1 (Toetsenbord, niveau A). De knop staat er nu altijd
   en dit regelt de zichtbaarheid. :focus-within telt de knop zelf mee, dus tabben laat
   hem verschijnen op het moment dat hij focus krijgt. Geen visibility/display: die halen
   hem uit de tabvolgorde en brengen het probleem terug. */
.curanta-berichtrij .curanta-berichtactie {
    opacity: 0;
    transition: opacity 120ms ease-in-out;
}

.curanta-berichtrij:hover .curanta-berichtactie,
.curanta-berichtrij:focus-within .curanta-berichtactie {
    opacity: 1;
}

/* Wie beweging heeft uitgezet, krijgt hem zonder overgang — en wie niets van
   opacity-overgangen moet hebben, ziet hem gewoon staan. */
@media (prefers-reduced-motion: reduce) {
    .curanta-berichtrij .curanta-berichtactie {
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   PLAT-1009H: focusindicator in de topbalk.

   ZRG-015 hierboven regelt de focusring voor MudBlazor-knoppen en voor kale <a>
   en <button> binnen .curanta-page. Twee elementen in de topbalk vallen buiten
   beide: het logo (een <a href="/"> zonder klasse, buiten .curanta-page) en het
   globale zoekveld. Dat laatste hád een regel — .curanta-appbar-search:focus-within
   zet een teal rand en een lichtere achtergrond — maar die kwam er niet doorheen:
   gemeten op 10-09-2026 was de berekende randkleur mét focus exact gelijk aan die
   zonder (rgb(226,232,236)), en de achtergrond ook. De regel bestond dus wel en
   deed niets.

   Gevolg: op élk backoffice-scherm kon een toetsenbordgebruiker twee van de eerste
   drie tabstops niet zien staan. WCAG 2.2 SC 2.4.7 (Focus zichtbaar), niveau AA.

   Dezelfde ring als ZRG-015 gebruikt, zodat focus overal hetzelfde oogt.
   ---------------------------------------------------------------------------- */
.curanta-appbar-search:focus-within {
    outline: 2px solid var(--curanta-teal-600) !important;
    outline-offset: 2px !important;
    border-radius: 8px;
}

/* De vangnetregel. ZRG-015 hierboven noemt elementen bij naam en dekt daarmee wat er tóen
   was; elke nieuwe link of knop erbuiten begint weer zonder ring. Het logo in de topbalk, het
   logo in de zijbalk en twee links op de publieke pagina's vielen er alle vier buiten.

   Bewust zónder !important: de regels van ZRG-015 en de componentstyling van MudBlazor en
   DevExpress zijn specifieker of dragen !important, en die winnen dus nog steeds. Dit is de
   ondergrens voor alles wat niemand apart heeft geregeld.

   De uitzondering is het binnenwerk van een MudBlazor-invoerveld: dat krijgt zijn focusstyling
   van de omhullende .mud-input-outlined-border, en een eigen ring op het <input> erbinnen levert
   een dubbele op. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--curanta-teal-600);
    outline-offset: 2px;
    border-radius: 4px;
}

.mud-input-slot:focus-visible,
.mud-input input:focus-visible,
.mud-input textarea:focus-visible {
    outline: none;
}

/* MudAutocomplete routes keyboard focus to its inner input, while the visible
   control is the outlined wrapper.  Keep the inner outline suppressed (to
   avoid a double ring) but make the wrapper visibly change on focus. */
.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--curanta-teal-600) !important;
    border-width: 2px !important;
}

/* Plain MudTextField controls have no outlined border to carry the focus cue;
   keep their visible keyboard focus explicit after suppressing the inner ring. */
.mud-input-control:focus-within:not(:has(.mud-input-outlined-border)) {
    outline: 2px solid var(--curanta-teal-600) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* MudDatePicker keeps its focused textbox outside the outlined-border
   element; retain a visible keyboard indicator for that control as well. */
.mud-picker .mud-input-control:focus-within {
    outline: 2px solid var(--curanta-teal-600) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* MudSelect maakt van het input-slot een focusbaar div.  Geef dat slot zelf
   een ring; de wrapper alleen is niet altijd :focus-within tijdens Tab-navigatie.
   Niet bij Variant.Outlined: daar draagt de omlijning (regel hierboven) al de focus, en een
   tweede ring om het slot — zonder de pijl-adornment — gaf een dubbele lijn. */
.mud-input:not(.mud-input-outlined) .mud-select-input:focus-visible {
    outline: 2px solid var(--curanta-teal-600) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

.mud-input-outlined .mud-select-input:focus-visible {
    outline: none !important;
}

/* ECD-071: letterkleur van planbordtegels per labelkleur (Planbord.razor.cs, LetterKlasse).
   Vaste waarden en geen tokens: de achtergrond is een vaste DevExpress-labelkleur die in de
   donkere modus niet wisselt, dus de letter mag dat ook niet. */
.curanta-tegel-letter-licht { color: #fff; }
.curanta-tegel-letter-donker { color: #0E1F2C; }

/* VRAAG-H-03 vervolg: een planbordtegel van een bezoek bij iemand zonder de vereiste bevoegdheid. De rand
   neemt de letterkleur van de tegel over (wit of #0E1F2C), die op elke labelkleur al is nagemeten; zo is het
   signaal ook zonder kleurwaarneming te zien, naast de ⚠ (WCAG 1.4.1). */
.curanta-tegel-bevoegdheid { outline: 2px dashed currentColor; outline-offset: -3px; }

/* Tekst die alleen een schermlezer voorleest, bijvoorbeeld de uitleg bij "Geen bevoegdheid". */
.curanta-sr-tekst {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}