/* Curanta Medewerker — basis CSS overlay op MudBlazor defaults */

:root {
    --mw-primary: #0E4F57;
    --mw-surface: #FFFFFF;
    --mw-background: #F7F7F4;
    --mw-border: #E5E5E2;
    --mw-ink-500: #737373;

    /* Waarschuwingskleur als tékst (ECD-069). Dezelfde waarde en dezelfde reden als in de
       backoffice-stylesheet: --mud-palette-warning is #E5A23B en haalt op wit 2,20:1, waar WCAG
       1.4.3 om 4,5:1 vraagt. Deze haalt 5,85:1. Staat hier apart omdat dit portaal de
       backoffice-stylesheet niet inlaadt — precies de fout die de tokenwachter ving toen de vier
       verwijzingen hieronder wél waren omgezet en de definitie niet mee verhuisde. */
    --curanta-warn-ink: #8C5A14;
}

body {
    background: var(--mw-background);
    /* Expliciete text-color zodat dark-mode MudThemeProvider's
       text-primary (#E6EDF1) doorslaat op gewone MudText/h-elementen.
       Zonder dit blijft de browser-default zwart en wordt H4 "Goedemorgen, ..."
       onleesbaar op dark surface (2026-05-25 visueel geverifieerd). */
    color: var(--mud-palette-text-primary, #1F1F1F);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.mud-drawer {
    background: var(--mw-surface);
    border-right: 1px solid var(--mw-border);
}

.mud-appbar {
    color: #FFFFFF;
}

.mud-appbar .mud-typography,
.mud-appbar .mud-icon-root,
.mud-appbar .mud-icon-button {
    color: #FFFFFF;
}

/* De topbalk op een telefoon. Dit portaal wordt op een telefoon gebruikt, en daar was de
   balkinhoud breder dan het venster (gemeten 21-09-2026: 427 px bij 412 px). De balk scrolt
   niet en knipt niet zichtbaar af, dus wat er rechts afviel wás er gewoon niet meer: de avatar
   (de enige link naar /profiel) op elke telefoonbreedte, en onder 400 px ook de taalkeuze —
   terwijl dat de enige plek is waar een medewerker van taal kan wisselen.

   De titel is het enige element dat mag wijken, in twee stappen: op een telefoon valt het woord
   "Medewerker" weg en blijft de merknaam staan (op 412 px past dat), en onder 400 px maakt ook
   die plaats. Welk scherm je voor je hebt staat in de H1 eronder, en op welke app je kijkt staat
   op het startscherm van de telefoon. De knoppen krimpen niet mee. */
.mud-appbar .mw-topbalk-titel {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mud-appbar .mud-icon-button,
.mud-appbar .pln-switcher,
.mud-appbar .mud-link,
.mud-appbar .mud-avatar {
    flex-shrink: 0;
}

@media (max-width: 599px) {
    .mud-appbar .mw-topbalk-titel__rol {
        display: none;
    }
}

@media (max-width: 399px) {
    .mud-appbar .mw-topbalk-titel {
        display: none;
    }
}

.mud-drawer .mud-navmenu {
    padding-top: 8px;
}

.mud-drawer .mud-nav-link {
    color: #1F2E3A;
    font-weight: 600;
    border-radius: 10px;
    margin: 2px 8px;
    min-height: 44px;
    opacity: 1;
}

.mud-drawer .mud-nav-link .mud-icon-root {
    color: #5B7280;
}

.mud-drawer .mud-nav-link:hover {
    background: rgba(11, 110, 110, 0.08);
    color: #0E4F57;
}

.mud-drawer .mud-nav-link:hover .mud-icon-root {
    color: #0E4F57;
}

.mud-drawer .mud-nav-link.mud-nav-link-active {
    background: rgba(11, 110, 110, 0.12);
    color: #0E4F57;
    font-weight: 700;
}

.mud-drawer .mud-nav-link.mud-nav-link-active .mud-icon-root {
    color: #0E4F57;
}

.mud-dark-mode .mud-drawer {
    background: #0E1B22;
    border-right-color: #1F3441;
}

.mud-dark-mode .mud-drawer .mud-nav-link {
    color: #E6EDF1;
}

.mud-dark-mode .mud-drawer .mud-nav-link .mud-icon-root {
    color: #9CB0BC;
}

.mud-dark-mode .mud-drawer .mud-nav-link:hover {
    background: rgba(63, 191, 184, 0.10);
    color: #FFFFFF;
}

.mud-dark-mode .mud-drawer .mud-nav-link:hover .mud-icon-root,
.mud-dark-mode .mud-drawer .mud-nav-link.mud-nav-link-active,
.mud-dark-mode .mud-drawer .mud-nav-link.mud-nav-link-active .mud-icon-root {
    color: #2FD3B6;
}

.mud-paper-outlined {
    border-color: var(--mw-border);
}

/* ----------------------------------------------------------------------------
   Dark mode — toggle in MedewerkerLayout zet `mud-dark-mode` op <body>.
   Onze --mw-* tokens worden ge-overridden zodat body/drawer/paper auto-volgen.
   MudBlazor's eigen palette (PaletteDark in Routes.razor) levert het meeste —
   deze regels patchen alleen onze custom CSS-variabelen + html-background.
   ---------------------------------------------------------------------------- */
body.mud-dark-mode,
.mud-dark-mode {
    --mw-surface:    #152832;
    --mw-background: #0E1B22;
    --mw-border:     #1F3441;
    --mw-ink-500:    #9CB0BC;
}

html:has(body.mud-dark-mode),
html.mud-dark-mode {
    background: #0E1B22;
}

/* MudLayout / MudMainContent transparent zodat body-bg doorslaat onderaan
   korte pagina's (anders ontstaat een licht-cream strook in dark mode). */
.mud-dark-mode .mud-layout,
.mud-dark-mode .mud-main-content {
    background-color: transparent !important;
}
.mud-dark-mode [data-testid="medewerker-shell"] {
    background: var(--mw-background);
    min-height: 100vh;
}

/* Safety-net voor MudPaper-wrappers die direct kleur uit het Mud-palette
   nemen werkt al via PaletteDark; alleen outlined-papers met hardcoded
   border krijgen hier het dark-equivalent. */
.mud-dark-mode .mud-paper.mud-paper-outlined {
    background-color: var(--mud-palette-surface, #152832) !important;
    border-color: var(--mud-palette-lines-default, #1F3441);
    color: var(--mud-palette-text-primary, #E6EDF1);
}

/* MudAlert filled-varianten zijn in dark mode te bright — 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; }

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

/* Login-shell — full-height-centered wrapper rond de inlog-kaart. Class
   ipv inline `background:#F7F7F4` zodat dark mode automatisch volgt. */
.curanta-login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F7F7F4;
}
.mud-dark-mode .curanta-login-shell {
    background: #0E1B22;
}

/* Login-titel: teal-600 (#0E4F57) op dark surface = contrast ~3.0 (WCAG-AA fail).
   In dark mode switchen we naar lichtere teal (#2FD3B6) voor >4.5:1 contrast. */
.curanta-login-title { color: #0E4F57; }
.mud-dark-mode .curanta-login-title { color: #2FD3B6 !important; }

/* In-app werkinstructies */
.help-content h1 { font-size: 1.4rem; font-weight: 700; margin: 1rem 0 0.5rem; }
.help-content h2 { font-size: 1.15rem; font-weight: 700; margin: 1.2rem 0 0.4rem;
                   border-bottom: 1px solid var(--mud-palette-lines-default); padding-bottom: 4px; }
.help-content h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.3rem; }
.help-content p  { margin: 0.5rem 0; line-height: 1.6; }
.help-content table { border-collapse: collapse; width: 100%; margin: 0.75rem 0; }
.help-content th, .help-content td { border: 1px solid var(--mud-palette-lines-default);
                                     padding: 6px 10px; font-size: 0.875rem; }
.help-content th { background: var(--mud-palette-background-grey); font-weight: 600; }
.help-content code { background: var(--mud-palette-background-grey); padding: 1px 4px;
                     border-radius: 3px; font-size: 0.85em; }
.help-content blockquote { border-left: 3px solid var(--mud-palette-primary); margin: 0.5rem 0;
                           padding: 4px 12px; background: var(--mud-palette-background-grey);
                           border-radius: 0 4px 4px 0; }
.help-content ul, .help-content ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.help-content li { margin: 0.25rem 0; }
.help-content a { color: var(--mud-palette-primary); }

/* ── Offline registreren boven de Blazor-herverbind-overlay ──────────────────
   Blazor Server legt bij verbindingsverlies een schermvullende herverbind-overlay
   over de pagina. Die overlay vangt elke klik af, terwijl juist dán de
   offline-wachtrij (offline-db.js) het werk moet opvangen. De klasse
   .curanta-offline wordt door offline-db.js op <body> gezet zodra de browser
   offline is; alleen dán tillen we de rijen die wij zelf afvangen boven de
   overlay uit. Online verandert er niets. */
body.curanta-offline [data-offline-interventie-row],
body.curanta-offline [data-offline-tijdregistratie-row],
body.curanta-offline [data-offline-overdracht-punt],
body.curanta-offline [data-offline-overdracht-toelichting],
body.curanta-offline [data-offline-overdracht-samenvatting],
body.curanta-offline [data-offline-overdracht-submit],
body.curanta-offline [data-offline-overdracht-status],
body.curanta-offline [data-offline-soep-probleem],
body.curanta-offline [data-offline-soep-subjectief],
body.curanta-offline [data-offline-soep-objectief],
body.curanta-offline [data-offline-soep-evaluatie],
body.curanta-offline [data-offline-soep-plan],
body.curanta-offline [data-offline-soep-lekentaal],
body.curanta-offline [data-offline-soep-submit],
body.curanta-offline [data-offline-soep-status],
body.curanta-offline [data-offline-presentie],
body.curanta-offline [data-offline-presentie-status],
body.curanta-offline [data-offline-paneel] .mud-expand-panel-header {
    position: relative;
    z-index: 2147483000;
}

/* Het vinkje "zichtbaar in het cliëntportaal" staat er bewust niet bij. Dat is een
   @bind-Value naar de server, en offline verandert er niets als je erop drukt. Het
   boven de overlay tillen zou een vinkje opleveren dat wel klikbaar oogt en niets
   doet — misleidender dan een vinkje dat niet reageert. De tekst onder de knop
   zegt dat die keuze offline vaststaat. */

/* ── 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, precies degenen voor wie
   hij bedoeld is. WCAG 2.2 succescriterium 2.4.1 (Blokken omzeilen), niveau A.
   Identiek aan Curanta.Host/wwwroot/css/curanta.css en
   Curanta.Portaal/wwwroot/css/portaal.css; dit portaal was als enige host nog
   zonder skiplink (code review 2026-08-02, bevinding 78). */
.curanta-skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 12px 20px;
    background: var(--mw-primary, #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, zelfde correctie als in Curanta.Host. Het lichte palet van deze host
   zet geen eigen Info-kleur, dus geldt de MudBlazor-standaard — en die haalt
   als tekst op wit de 4,5:1 niet. Alleen de tekst en het icoon schuiven mee;
   vlakken, randen en het merk blijven ongemoeid.

   De var-fallback is hier de werkende waarde: deze stylesheet kent
   --curanta-teal-700 niet, die staat alleen in de backoffice-stylesheet. */

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

.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 het omgekeerd: daar staat de lichte teal juist goed op
   een donkere achtergrond, dus laten we die staan. */
.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: #2FD3B6;
}

code {
    color: #B02A6B;
}

.mud-dark-mode code {
    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; }

/* Chips zonder kleur waren grijs op grijs: #8F8F8F op #F0F0F0 is 2,83:1, waar WCAG 2 AA 4,5:1
   vraagt (axe `color-contrast`, ernst serious, gemeten 21-09-2026 op het overdrachtsformulier —
   vijftien keer op één scherm). Juist deze chips dragen betekenis: "Ter info", "Aandacht",
   "zelf toegevoegd". De tekstkleur van het thema haalt de drempel in beide standen. */
.mud-chip-filled.mud-chip-color-default,
.mud-chip-filled.mud-chip-color-default .mud-chip-content,
.mud-chip-outlined.mud-chip-color-default,
.mud-chip-text.mud-chip-color-default {
    /* !important omdat de buurregels hierboven dat ook doen: MudBlazor zet de kleur via een
       eigen regel op dezelfde elementen. Zonder dit wint de themakleur en blijft het grijs. */
    color: var(--mud-palette-text-primary) !important;
}

/* Eén lang woord in een kop duwde de hele pagina breder dan het scherm: "Kilometerregistratie"
   vroeg 326 px in een kolom van 280 px, waardoor het document op een telefoon van 320 px 347 px
   breed werd en álles — ook de topbalk — horizontaal ging schuiven (gemeten 22-09-2026).
   `anywhere` breekt zo'n woord af; `break-word` doet dat niet, want dat verlaagt de min-content
   breedte niet. Dezelfde reparatie staat in de backoffice (curanta.css). */
h1, h2, h3, h4, h5, h6,
.mud-typography-h1, .mud-typography-h2, .mud-typography-h3,
.mud-typography-h4, .mud-typography-h5, .mud-typography-h6 {
    overflow-wrap: anywhere;
}

/* Statuspillen (MEDEWE-CF6B64, sweep 24-09-2026). /verlof gebruikte "curanta-pill red", maar deze
   stylesheet kende .curanta-pill niet: de klasse "red" viel toen op MudBlazors eigen kleurklasse
   (#f44336) met donkere tekst, 4,47:1. Dezelfde gemeten waarden als in Curanta.Host. */
.curanta-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background: #F1F8F7;
    color: #0E4F57;
}
.curanta-pill.amber { background: #FDF1DC; color: #8C5A14; }
.curanta-pill.red   { background: #FBE4E4; color: #8C1F1F; }
.curanta-pill.green { background: #E0F4E8; color: #1F6638; }
.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; }