/* Curanta Portaal — mobile-first overlay op de gedeelde curanta.css. */
html, body { background: var(--curanta-bg); }

/* MudLayout / MudMainContent default backgrounds vallen terug op
   `--mud-palette-background-grey` (lichtgrijs) wanneer MudBlazor's
   eigen CSS resolveert vóór onze curanta.css. Dat veroorzaakt een
   strook lichte bg onder lange-content-pagina's in dark mode. Force
   transparant zodat de body-bg (var(--curanta-bg) = #0E1B22 in dark)
   doorslaat tot de bodem. */
.mud-dark-mode .mud-layout,
.mud-dark-mode .mud-main-content {
    background-color: transparent !important;
}
.mud-dark-mode .portaal-shell,
.mud-dark-mode [data-testid="portaal-shell"] {
    background: var(--curanta-bg);
    min-height: 100vh;
}

.portaal-hero {
    background: linear-gradient(135deg, var(--curanta-teal-700) 0%, var(--curanta-teal-500) 100%);
    color: #fff;
    padding: 24px 28px;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(11, 110, 110, 0.18);
}

.portaal-hero .label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
}

.portaal-hero h1 {
    margin: 4px 0 2px;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.portaal-hero .sub {
    color: rgba(255,255,255,0.88);
    font-size: 15px;
    line-height: 1.5;
    max-width: 60ch;
}

.portaal-tile {
    background: var(--curanta-surface);
    border: 1px solid var(--curanta-border);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: box-shadow .15s ease, transform .15s ease;
}

.portaal-tile:hover { box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08); transform: translateY(-1px); }

.portaal-multi-client-alert .mud-alert-message {
    color: var(--curanta-ink-700) !important;
}

.portaal-multi-client-alert .mud-alert-icon,
.portaal-multi-client-alert .mud-alert-close-icon {
    color: var(--curanta-teal-700) !important;
}

.portaal-tile h3 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--curanta-ink-900);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.portaal-tile .value {
    font-size: 26px;
    font-weight: 700;
    color: var(--curanta-teal-700);
}

.portaal-tile .meta {
    font-size: 12.5px;
    color: var(--curanta-ink-500);
    margin-top: 2px;
}

.portaal-visit {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--curanta-border);
    background: var(--curanta-surface);
    margin-bottom: 10px;
}

.portaal-visit .when {
    min-width: 86px;
    text-align: center;
    padding: 8px 0;
    border-radius: 10px;
    background: var(--curanta-teal-50);
    color: var(--curanta-teal-700);
    font-weight: 700;
}

.portaal-visit .when .h { font-size: 18px; line-height: 1; }
.portaal-visit .when .d { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 4px; }

.portaal-visit .body { flex: 1; }
.portaal-visit .body strong { display:block; color: var(--curanta-ink-900); font-size: 15px; }
.portaal-visit .body span { font-size: 13px; color: var(--curanta-ink-500); }

.login-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 18px;
    background: linear-gradient(160deg, var(--curanta-teal-700) 0%, var(--curanta-teal-500) 35%, var(--curanta-bg) 100%);
}

.login-card {
    width: 100%;
    max-width: 440px;
    background: var(--curanta-surface);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(11, 110, 110, 0.28);
    padding: 30px 28px;
}

/* Login-shell achtergrond in dark mode iets minder bright (teal-gradient
   te helder als entry-screen). */
.mud-dark-mode .login-shell {
    background: linear-gradient(160deg, var(--curanta-teal-800, #0A3B41) 0%, var(--curanta-teal-700, #0E4F57) 35%, var(--curanta-bg) 100%);
}
.mud-dark-mode .login-card {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    border: 1px solid var(--curanta-border);
    /* ZRG-085 (bug #69): forceer expliciet de surface+text in dark mode.
       De login-pagina is server-rendered (geen MudThemeProvider) en in
       sommige load-volgordes pakt de card-achtergrond de light-default
       terwijl de tekst al de dark ink-tokens heeft → onleesbaar contrast
       (~1.3:1, WCAG eist 4.5:1). Direct binden aan tokens fixt het. */
    background: var(--curanta-surface) !important;
    color: var(--curanta-ink-900) !important;
}
.login-card { color: var(--curanta-ink-900); }
.login-card h1,
.login-card h2,
.login-card .mud-typography { color: var(--curanta-ink-900); }

/* DigiD-knop: eigen styling i.p.v. MudButton zodat de disabled-state in
   dark mode leesbaar blijft. MudBlazor's disabled-overlay maakt een
   custom-oranje knop bijna onzichtbaar op een donkere achtergrond. */
.portaal-digid-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    padding: 0 18px;
    background: #E17000;
    color: #fff;
    border: 0;
    border-radius: 4px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.portaal-digid-button:hover:not(:disabled) {
    background: #C56000;
}
.portaal-digid-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.portaal-digid-button .mud-svg-icon {
    width: 22px;
    height: 22px;
}
.portaal-digid-button.is-disabled,
.portaal-digid-button:disabled {
    /* Houd herkenbare DigiD-oranje, maar dempen zonder onleesbaar te worden.
       Werkt zowel in light als dark mode (zelfde rgba-overlay-aanpak). */
    background: #B95C00;
    color: rgba(255, 255, 255, 0.72);
    cursor: not-allowed;
    opacity: 0.85;
}
.mud-dark-mode .portaal-digid-button.is-disabled,
.mud-dark-mode .portaal-digid-button:disabled {
    background: #8A4500;
    color: rgba(255, 255, 255, 0.78);
}

/* Stub-login knop ("Of: snel-inloggen als standaard demo-cliënt"):
   MudButton's Color.Default werd in dark mode onzichtbaar op de donkere
   login-card. Color.Inherit + ink-tokens (die zelf al per mode flippen)
   levert contrast in light én dark. */
.portaal-stub-login {
    color: var(--curanta-ink-500) !important;
}
.portaal-stub-login:hover {
    color: var(--curanta-ink-700) !important;
    background: rgba(11, 110, 110, 0.08) !important;
}
.mud-dark-mode .portaal-stub-login:hover {
    background: rgba(63, 191, 184, 0.10) !important;
}

/* ============================================================
 * RTL-ondersteuning — Arabisch (fase 1a, ADR 2026-05-29).
 *
 * `<html dir="rtl">` wordt door App.razor gezet wanneer
 * PonscuraLocalizationOptions.IsRightToLeft(culture) true is.
 * MudBlazor's MudThemeProvider RightToLeft="true" verzorgt het
 * leeuwendeel van layout-flips (drawer-kant, scroll, form-uitlijning).
 * Hieronder vullen we aan: directional Tabler-icons spiegelen,
 * eigen drawer-uitlijning corrigeren waar MudBlazor niet bij komt,
 * en de language-switcher-popup naar de juiste kant verplaatsen.
 * ============================================================ */

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* Tabler-icons die richting indiceren — alleen visueel spiegelen,
   niet de DOM-flow aanpassen. Beperk tot de chevron/arrow set zodat
   icons zonder richting (Home, Person, Heart) onveranderd blijven. */
html[dir="rtl"] .ti-arrow-right,
html[dir="rtl"] .ti-arrow-narrow-right,
html[dir="rtl"] .ti-chevron-right,
html[dir="rtl"] .ti-chevrons-right,
html[dir="rtl"] .ti-arrow-back-up,
html[dir="rtl"] .ti-arrow-forward-up,
html[dir="rtl"] .ti-corner-down-right,
html[dir="rtl"] .ti-corner-up-right {
    transform: scaleX(-1);
}

/* Curanta-specifieke header-elementen die hard-coded "margin-left/right"
   gebruiken — corrigeer waar nodig zodat user-chip + actie-iconen aan de
   correcte kant van de header zitten. */
html[dir="rtl"] .curanta-drawer { direction: rtl; }

/* Language-switcher popup-uitlijning gespiegeld door eigen [dir="rtl"]
   selector in PonscuraLanguageSwitcher.razor — hier alleen z-index bewaken
   wanneer de switcher onder MudPopover-elementen valt. */
html[dir="rtl"] .pln-switcher__menu { z-index: 1500; }

/* Datepicker/Timepicker: MudBlazor handelt grid-flow zelf af, maar de
   pijltjesnav in eigen wijzig-dialoog gebruikt position:absolute — die
   moet ook spiegelen. */
html[dir="rtl"] .portaal-wijzig-dialoog .nav-prev { right: auto; left: 12px; }
html[dir="rtl"] .portaal-wijzig-dialoog .nav-next { left: auto; right: 12px; }

/* ── Brontekst uit het dossier ────────────────────────────────────────────
   Hoort bij <BronTekst> (Components/Shared/BronTekst.razor), dat `lang="nl"
   dir="ltr"` zet op inhoud die altijd Nederlands is — vragenlijstvragen,
   rapportagetekst, zorgplandoelen, cliëntnamen (code review 2026-08-02,
   bevinding 115).

   Het dir-attribuut regelt de bidi-isolatie al via de UA-stylesheet, maar niet
   de uitlijning: `html[dir="rtl"] body` hierboven zet een letterlijke
   `text-align: right` die gewoon doorerft en niet met de richting meedraait.
   `text-align: start` lost dat richtingsonafhankelijk op — links onder ltr,
   rechts onder rtl. `unicode-bidi: isolate` staat er expliciet bij zodat de
   isolatie niet afhangt van de UA-stylesheet van een specifieke browser. */
.curanta-bron-tekst {
    unicode-bidi: isolate;
    text-align: start;
}

/* Twee vormen uit de cliëntwisselaar in de header; de inline styles zijn hierheen
   verplaatst toen die regels <BronTekst>-elementen werden. */
.curanta-switcher-naam {
    font-weight: 600;
    color: var(--curanta-ink-900);
}

.curanta-switcher-relatie {
    font-size: 12px;
    color: var(--curanta-ink-500);
}

/* Een naaste kan meerdere dossiers openen. Houd ook de onderste keuze bereikbaar
   zonder dat de lijst buiten het scherm verdwijnt. */
.curanta-clientkeuze-menu {
    max-height: min(400px, calc(100dvh - 80px));
    /* MudPopover schrijft inline max-width:none; begrens deze clientkeuze expliciet. */
    max-width: min(400px, calc(100vw - 16px)) !important;
    overflow-y: auto;
}

/* ── Taalkiezer op de inlog-layout ────────────────────────────────────────
   EmptyLayout (login, DigiD-uitleg, 2FA) heeft geen MudAppBar, dus de switcher
   krijgt hier zijn eigen plek bovenaan (code review 2026-08-02, bevinding 108).
   `justify-content: flex-end` in plaats van een vaste `right`: flex-end volgt de
   inline-richting, dus onder dir="rtl" schuift de kiezer vanzelf naar de andere
   kant mee.
   De donkere kleur is nodig omdat de component `color: inherit` gebruikt en
   gebouwd is voor de teal appbar; op de lichte inlog-achtergrond zou wit
   onleesbaar zijn. */
.portaal-empty-taalkiezer {
    display: flex;
    justify-content: flex-end;
    padding: 10px 16px 0;
    color: var(--curanta-ink-700, #1a1a2e);
}

.mud-dark-mode .portaal-empty-taalkiezer {
    color: var(--curanta-ink-100, #e8eef0);
}

.portaal-empty-taalkiezer .pln-switcher__toggle:hover {
    background: rgba(11, 110, 110, 0.10);
}

/* ── Skiplink ─────────────────────────────────────────────────────────────
   Visueel verborgen tot hij focus krijgt. Bewust géén display:none of
   visibility:hidden — dan zou hij ook voor toetsenbord- en schermlezer-
   gebruikers verdwijnen, precies degenen voor wie hij bedoeld is.
   WCAG 2.2 succescriterium 2.4.1 (Blokken omzeilen), niveau A.

   Verborgen via het clip-patroon in plaats van `left: -9999px`
   (code review 2026-08-02, bevinding 136). Die offset is richtingsafhankelijk en
   het portaal rendert onder `dir="rtl"` voor Arabischtalige cliënten: links
   buiten beeld parkeren levert daar overflow aan de scrollbare kant op, en
   `left: 0` bij focus zet de link aan het eind van de leesregel in plaats van
   aan het begin. Het clip-patroon neemt geen ruimte in — geen richting, dus geen
   RTL-variant nodig — en `inset-inline-start` brengt hem bij focus in beide
   richtingen aan de leesstart terug. */
.curanta-skiplink {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    /* Geen padding zolang hij verborgen is: zo neemt het element aantoonbaar nul
       ruimte in, ongeacht hoe een browser met clip-path omgaat. */
    padding: 0;
    z-index: 2000;
    background: var(--curanta-teal-700, #0E4F57);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    /* Afgeronde hoek aan de kant waar de link vandaan komt: rechtsonder in LTR,
       linksonder in RTL. De logische variant draait dat vanzelf mee. */
    border-radius: 0;
    border-end-end-radius: 8px;
}

.curanta-skiplink:focus,
.curanta-skiplink:focus-visible {
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    padding: 12px 20px;
    outline: 3px solid #fff;
    outline-offset: -6px;
}

/* ------------------------------------------------------------------------
   Smalle schermen: het portaal paste niet.

   ⚠ Gemeten op 08-09-2026 (browserhunt cliëntportaal, CP-018): op 375 × 812 —
   een gewone telefoon — schoof élke portaalroute horizontaal mee, elf van de
   elf. Dit bestand had tot dat moment geen enkele media query: het portaal is
   nooit voor een telefoon ingericht, terwijl de doelgroep — cliënten en
   naasten — er juist vaak op kijkt.

   ⚠ En een waarschuwing voor wie hier ooit gaat meten: de MudAppBar léék de
   oorzaak, want die mat 504 tot 582 pixels. Dat is een gevolg en geen oorzaak.
   Hij staat op `position: fixed` met `width: 100%`, en neemt dus de breedte van
   het hele document over zodra iets ánders de pagina oprekt. Zoek de oorzaak
   binnen de inhoud, en sla elementen met `position: fixed` over.

   De balk was daarnáást ook op zichzelf te breed: zijn kinderen telden op tot
   ruim boven de 375 pixels. Onderstaande regels brengen dat terug.
   Op 29-09-2026 bleek daarnaast een statusfout in de zijbalk: de drawer klapte
   in, terwijl de layout een marge van 240px behield. PortaalMainLayout bindt
   daarom nu de openstatus terug, zodat MudBlazor de juiste minimarge kiest.

   Wat hier wél en niet weggaat. De merkregel "voor u & uw naasten" en het
   woord bij de uitlogknop verdwijnen; het pictogram en de aria-label blijven,
   dus de knop houdt zijn naam voor een schermlezer. De naam van de cliënt
   blíjft staan — die zegt in wélk dossier je zit, en dat is precies de vraag
   waar A-cp-18 over gaat — maar hij mag afkappen.
   ------------------------------------------------------------------------ */
@media (max-width: 599.98px) {
    .mud-appbar .mud-toolbar {
        padding-left: 8px;
        padding-right: 8px;
    }

    .mud-appbar img[alt="Curanta Naast"] {
        height: 28px;
    }

    .curanta-merk-tagline {
        display: none;
    }

    .curanta-merk-naam {
        font-size: 14px;
    }

    /* ⚠ Hier stonden even regels voor de tegels op het startscherm en voor brede
       tabellen. Die zijn er weer uit: ik had ze geschreven op een halve diagnose,
       en ze losten de horizontale schuif aantoonbaar níet op. Wat er nog wél aan
       mankeert staat per route gemeten in bevinding CP-018, en dat is geen
       bugfix maar een ontwerpklus — het portaal heeft geen enkele responsieve
       laag en is gebouwd voor 1280 × 800. */

    .curanta-uitlogtekst {
        display: none;
    }

    .curanta-clientchip {
        max-width: 32vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Tikdoelen in de inhoud minstens 44 × 44 (WCAG 2.2 AA 2.5.8 eist 24 × 24; het
       masterplan §9 houdt 44 × 44 aan). Gemeten op 08-09-2026: de prullenbak bij een
       meting en het potlood bij een afspraak waren 26 × 26 — juist de onomkeerbare
       acties, en juist op het apparaat waarop je ze het makkelijkst per ongeluk raakt
       (bevinding CP-019).

       ⚠ Het anker is #hoofdinhoud en niet main: er ís geen <main> op deze pagina's —
       nagemeten, de knoppen zitten in div>td>tr>tbody>table>div zonder main erboven,
       en een regel op main deed dus letterlijk niets. #hoofdinhoud is het doel van de
       skiplink en omsluit precies de inhoud. Dat sluit de bovenbalk uit, en dat is de
       bedoeling: die pictogramknoppen zijn hierboven juist smál gemaakt om de balk
       binnen 375px te houden. Bewust min-width/min-height en geen vaste maat: het
       pictogram blijft even groot, alleen het raakvlak eromheen groeit. */
    #hoofdinhoud .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

.portaal-vragenlijstkaart {
    display: flex;
    align-items: center;
    gap: 14px;
}

.portaal-vragenlijsttekst {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ONL-046: houd de start-/hervatknop binnen een smalle kaart. */
@media (max-width: 600px) {
    .portaal-vragenlijstkaart {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .portaal-vragenlijstkaart > .mud-button-root {
        grid-column: 1 / -1;
        justify-self: end;
        max-width: 100%;
    }
}

/* ── Zichtbare focus voor wie geen muis gebruikt ────────────────────────────
   WCAG 2.2 AA, 2.4.7 (Focus Visible). Gemeten op 08-09-2026: op zes routes had
   vrijwel élk element dat toetsenbordfocus kreeg géén enkele zichtbare
   aanduiding — geen outline, geen box-shadow, geen achtergrondverschil, ook
   niet op ::before of ::after. Het element matchte wél :focus-visible, dus de
   browser wist het; het was alleen niet te zien (bevinding CP-035).

   ⚠ :focus-visible en niet :focus. Met :focus krijgt ook een muisklik een ring,
   en dat is precies waarom die ringen ooit zijn weggehaald. De browser bepaalt
   zelf wanneer een focus "visible" is; daar hoort toetsenbordnavigatie bij en
   een gewone klik niet.

   ⚠ Twee lagen: een donkere buitenring en een lichte binnenring. Zo blijft de
   focus zichtbaar op zowel de lichte kaarten als de donkere bovenbalk en de
   teal knoppen — één kleur is op één van die drie altijd onzichtbaar. */
#hoofdinhoud :focus-visible,
.mud-appbar :focus-visible,
.mud-drawer :focus-visible,
.mud-dialog :focus-visible {
    outline: 3px solid var(--curanta-teal-700, #0B5563);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9);
    border-radius: 4px;
}

/* Op de donkere bovenbalk draait het contrast om. */
.mud-appbar :focus-visible,
.mud-dark-mode #hoofdinhoud :focus-visible,
.mud-dark-mode .mud-drawer :focus-visible,
.mud-dark-mode .mud-dialog :focus-visible {
    outline-color: #fff;
    box-shadow: 0 0 0 5px rgba(11, 85, 99, 0.9);
}


.portaal-clientmenu > .mud-button-root {
    background: rgba(255,255,255,0.16);
    color: #fff;
    font-weight: 600;
    border-radius: 18px;
    padding: 6px 12px;
    text-transform: none;
}

/* ONL-049: twee vaste rijen houden cliëntkeuze én alle accountacties bereikbaar.
   Een document zonder horizontale scroll bewijst dit niet: de appbar is fixed. */
@media (max-width: 599.98px) {
    .portaal-topbar .mud-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) repeat(3, 44px);
        grid-template-rows: 48px 48px;
        height: 96px;
        min-height: 96px;
        gap: 0;
    }

    .portaal-topbar .mud-spacer { display: none; }
    .portaal-topbar-merk { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
    .portaal-topbar-taal { grid-column: 3 / 5; grid-row: 1; justify-self: end; }
    .portaal-topbar-client { grid-column: 1; grid-row: 2; min-width: 0; }
    .portaal-topbar-help { grid-column: 2; grid-row: 2; }
    .portaal-topbar-thema { grid-column: 3; grid-row: 2; }
    .portaal-topbar-uitloggen { grid-column: 4; grid-row: 2; margin-left: 0 !important; }

    .portaal-topbar-merk img[alt="Curanta Naast"] { height: 28px !important; }
    .portaal-topbar .curanta-merk-naam { font-size: 14px !important; }
    .portaal-topbar-client .mud-menu,
    .portaal-topbar-client .mud-chip,
    .portaal-topbar-client [data-testid="portaal-actieve-client"] {
        min-width: 0;
        max-width: 100%;
    }
    .portaal-topbar-client [data-testid="portaal-actieve-client"] { width: 100%; }
    .portaal-topbar-client .mud-button-root { max-width: 100%; }
    .portaal-topbar-client .mud-button-label {
        position: relative;
        padding-inline-end: 20px;
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .portaal-topbar-client .mud-button-icon-end {
        position: absolute;
        inset-inline-end: 0;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }
    .portaal-topbar-client .curanta-bron-tekst {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .portaal-topbar-help .mud-icon-button,
    .portaal-topbar-thema .mud-icon-button,
    .portaal-topbar-uitloggen .mud-button-root {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 10px;
    }
    .portaal-topbar-uitloggen .mud-button-icon-start { margin: 0; }
    [data-testid="portaal-shell"] .mud-main-content { padding-top: 96px; }
    .portaal-levensboek-acties { flex-wrap: wrap; }
    .portaal-levensboek-acties .mud-button-root { max-width: 100%; }
}


/* ONL-051: de gewone navmarge sneed in de ingeklapte drawer 8px van elk icoon af. */
.curanta-drawer.mud-drawer--closed .mud-nav-link {
    margin-inline: 4px;
    width: calc(100% - 8px);
    padding-inline: 12px;
}
.curanta-drawer.mud-drawer--closed .mud-nav-link > .mud-icon-root {
    margin-inline-end: 0;
}

/* ONL-052: volledige namen blijven leesbaar, ook in de mobiele clientkeuze. */
.portaal-clientkeuze-rij {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.portaal-clientkeuze-knop {
    display: block;
    width: 100%;
    border: 0;
    padding: 10px 16px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    text-align: start;
    font: inherit;
    cursor: pointer;
}

.portaal-clientkeuze-knop:hover,
.portaal-clientkeuze-knop:focus-visible {
    background: var(--mud-palette-action-default-hover);
}

.portaal-clientkeuze-knop:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}
.portaal-clientkeuze-tekst { flex: 1; min-width: 0; }
.portaal-clientkeuze-rij .curanta-switcher-naam,
.portaal-clientkeuze-rij .curanta-switcher-relatie {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 599.98px) {
    /* Bij een brede lijst past geen van beide ankerzijden. Gebruik de schermmarge. */
    .curanta-clientkeuze-menu {
        left: 8px !important;
        right: auto !important;
        width: calc(100vw - 16px);
    }
}

/* ONL-053: MudDrawer verbergt tekst met display:none. Houd de gewone linktekst
   beschikbaar voor hulpsoftware zonder de ingeklapte iconenbalk te verbreden. */
.curanta-drawer.mud-drawer--closed .mud-nav-link-text {
    display: block !important;
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}