/* ============================================================================
   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;

    /* 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;
}

/* ----------------------------------------------------------------------------
   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;
}

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;
}

/* 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
 * op /afspraken, /metingen, /profiel. 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 {
    background-color: var(--curanta-teal-600);
    color: #fff !important;
}
.mud-button-filled-primary:hover {
    background-color: var(--curanta-teal-700);
}
/* Borg dat tekst-spans binnen filled-primary buttons ook wit zijn.
 * Bevat alle bekende MudBlazor 9-class-varianten zodat StartIcon-buttons
 * (zoals "Mijn dossier downloaden", "Voorkeuren bewaren") óók een witte
 * label krijgen. Bovendien forceren we expliciete inline visibility om
 * te voorkomen dat een global "display:none" op span de tekst verbergt. */
.mud-button-filled-primary,
.mud-button-filled-primary *,
.mud-button-filled-primary .mud-button-label,
.mud-button-filled-primary .mud-button-root,
.mud-button-filled-primary .mud-button-icon-start + *,
.mud-button-filled-primary span {
    color: #fff !important;
    visibility: visible !important;
}

/* ----------------------------------------------------------------------------
   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-userchip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease;
}
.curanta-appbar-userchip:hover { background: var(--curanta-surface-alt); }
.curanta-appbar-userchip .mud-avatar {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, var(--curanta-teal-600), var(--curanta-teal-500));
    color: #fff;
    font-weight: 600;
}
.curanta-appbar-userchip .meta-name {
    font-weight: 600; font-size: 13.5px; line-height: 1.1; color: var(--curanta-ink-700);
}
.curanta-appbar-userchip .meta-role {
    font-size: 11.5px; color: var(--curanta-ink-500);
}

/* ----------------------------------------------------------------------------
   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;
}

.curanta-welcome {
    background: linear-gradient(135deg, var(--curanta-teal-700) 0%, var(--curanta-teal-500) 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. */
.curanta-kpi-delta.up   { color: #1F6638; }
.curanta-kpi-delta.down { color: #8C1F1F; }

/* 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; }

/* ----------------------------------------------------------------------------
   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: 960px) {
    .curanta-page { padding: 20px; }
    .curanta-appbar-search { display: none; }
    .curanta-welcome { padding: 24px; }
    .curanta-welcome h1 { font-size: 22px; }
}

/* ----------------------------------------------------------------------------
   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;
}

.mud-dark-mode .curanta-appbar {
    background: #0E1B22 !important;
    color: #E6EDF1 !important;
    border-bottom-color: #1F3441;
}
.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-userchip:hover { background: #1B313D; }
.mud-dark-mode .curanta-appbar-userchip .meta-name { color: #E6EDF1; }
.mud-dark-mode .curanta-appbar-userchip .meta-role { color: #9CB0BC; }

.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-pill.red    { background: #3A1F1F; color: #EF6A6A; }
.mud-dark-mode .curanta-pill.green  { background: #1A3326; color: #3FB87A; }

/* 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; }

/* MudTooltip leesbaar in dark mode. */
.mud-dark-mode .mud-tooltip {
    background-color: #1F3441 !important;
    color: #E6EDF1 !important;
}

/* PWA-install banner op Home (cliëntportaal). Lichte teal-gradient als
   subtiele install-uitnodiging. Donker equivalent gebruikt dezelfde tonen
   maar omgedraaid zodat tekst (curanta-ink-900 = wit in dark) leesbaar blijft. */
.curanta-pwa-install {
    background: linear-gradient(135deg, #E6F4F2, #F7FBFA);
}
.mud-dark-mode .curanta-pwa-install {
    background: linear-gradient(135deg, #0E3A40, #152832) !important;
    border-color: #14535B !important;
}

/* Ook MudExpansionPanel "Aan de slag in uw portaal" gebruikt
   hardcoded var(--curanta-surface) (bestaat niet — fallback wit).
   Switch naar dark surface. */
.mud-dark-mode .mud-expand-panel,
.mud-dark-mode .mud-expansion-panel {
    background-color: var(--mud-palette-surface, #152832) !important;
}
}

/* ── 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;
}

/* ----------------------------------------------------------------------------
   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. */
.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; }
.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; }
.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-alert-text-warning .mud-alert-message { color: #F0B85F; }
.mud-dark-mode .mud-button-text.mud-button-text-error,
.mud-dark-mode .mud-alert-text-error .mud-alert-message { color: #EF6A6A; }
.mud-dark-mode .mud-button-text.mud-button-text-success,
.mud-dark-mode .mud-alert-text-success .mud-alert-message { color: #3FB87A; }
.mud-dark-mode .mud-button-text.mud-button-text-info,
.mud-dark-mode .mud-alert-text-info .mud-alert-message { color: #2FD3B6; }