/* LegalConnect NL - Juridisch Thema Stylesheet */
/* Advocaten-blauw met gouden accenten voor professionele uitstraling */

:root {
    /* Primary Colors - Advocaten Blauw */
    --legal-primary: #1C3D5A;
    --legal-primary-light: #2A5571;
    --legal-primary-dark: #0F2433;

    /* Secondary Colors - Juridisch Goud */
    --legal-secondary: #B8860B;
    --legal-secondary-light: #D4A825;
    --legal-secondary-dark: #8B6508;

    /* Neutral Colors */
    --legal-background: #F8F9FA;
    --legal-surface: #FFFFFF;
    --legal-border: #DEE2E6;
    --legal-hover: #E9ECEF;

    /* Text Colors */
    --legal-text-primary: #2C2C2C;
    --legal-text-secondary: #6C757D;
    --legal-text-light: #ADB5BD;

    /* Status Colors */
    --legal-success: #28A745;
    --legal-warning: #FFC107;
    --legal-error: #C62828;
    --legal-info: #17A2B8;

    /* Shadows */
    --legal-shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
    --legal-shadow-md: 0 4px 8px rgba(0,0,0,0.12);
    --legal-shadow-lg: 0 8px 16px rgba(0,0,0,0.16);

    /* Font — BUG-NET-R3-007: Roboto uit fallback-stack. Snippet 2 mat 3
       families op /lawyers; Inter + system-fonts (Apple/Windows/Linux)
       dekken alle relevante platforms zonder Roboto-leak. */
    --legal-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

/* Dark mode variables */
.mud-theme-dark,
html.mud-theme-dark,
html.mud-theme-dark body {
    /* AUDIT-N10-COLOR-SCHEME: signaleer aan de browser dat we dark mode
       gebruiken zodat systeemelementen (scrollbars, datepickers, native
       form-controls, autofill-popups) automatisch hun donkere variant
       renderen. Voorheen bleef color-scheme op 'normal' staan, waardoor
       sommige system widgets met witte achtergrond een onverwachte
       lichtflits gaven in dark mode. */
    color-scheme: dark;
    --legal-background: #121212;
    --legal-surface: #242424;
    --legal-border: #424242;
    --legal-hover: #2d2d2d;
    --legal-text-primary: rgba(255,255,255,0.87);
    --legal-text-secondary: rgba(255,255,255,0.7);
    --legal-text-light: rgba(255,255,255,0.5);
    --legal-primary: #90caf9;
    --legal-primary-light: #a6d4fa;
    --legal-primary-dark: #7ab8e8;
    /* BUG-TOOL-018: het lichte-mode groen (#28A745) levert op surface #242424
       slechts ~3.5:1 contrast op — onder de WCAG 2.2 AA-drempel (4.5:1) voor
       normale tekst. Lichter groen #66BB6A geeft ~5.7:1 en blijft visueel
       herkenbaar als success-accent. Vergelijkbare aanpassingen voor warning
       en error voorkomen dat statusiconen wegvallen tegen de donkere achtergrond.
       --mud-palette-* parallel meegezet zodat MudBlazor's Color.Success/Warning/Error
       chips/buttons óók de hogere-contrast varianten gebruiken in dark mode. */
    --legal-success: #66BB6A;
    --legal-warning: #FFD54F;
    /* AUDIT-N5-CONTRAST: #EF5350 op surface #242424 = 4.45:1 (nét onder
       WCAG AA 4.5:1). Verlicht naar #FF6B6B = 4.69:1 op surface en
       7.62:1 op hoofd-achtergrond #121212 — ruim AA, dichtbij AAA. */
    --legal-error: #FF6B6B;
    --legal-info: #4DD0E1;
    --mud-palette-success: #66BB6A;
    --mud-palette-warning: #FFD54F;
    --mud-palette-error: #FF6B6B;
    --mud-palette-info: #4DD0E1;
    /* HOTFIX: --mud-palette-{severity}-text is door MudBlazor in een aantal
       componenten (Snackbar/MudAlert.Filled/MudChip.Filled) gebruikt als de
       FOREGROUND-kleur OP de gevulde achtergrond — niet als severity-tekst-
       op-pagina. Deze waardes gelijk zetten aan de fill-kleur veroorzaakt
       groen-op-groen / geel-op-geel / rood-op-rood toasts (gebruiker meldde
       "volledig groene toast" en "gele toast met gele tekst").
       We zetten ze nu op contrasterende waardes:
         - success/error/info fills zijn donker genoeg voor witte tekst (~4.5+:1).
         - warning fill #FFD54F is licht-geel; daar moet zwarte tekst op
           (witte tekst geeft slechts ~1.6:1, ver onder WCAG-drempel). */
    --mud-palette-success-text: #ffffff;
    --mud-palette-warning-text: #1f1300;
    --mud-palette-error-text: #ffffff;
    --mud-palette-info-text: #08272d;
    /* ACTION-DASHBOARD-2: WCAG 2.2 SC 1.4.3 (Contrast Minimum). Het basis-gold
       --legal-secondary (#B8860B) tegen surface #242424 levert ~5.0:1 — nét boven
       AA (4.5:1) voor body text maar onvoldoende voor secundaire metadata
       (caption-grootte ~3.0:1). Dashboard-review meldde paarse/secundaire links
       die onder de drempel uitkwamen. We mappen *-secondary-text* en de Mud-text
       secondary token in dark mode naar een lichtere goud-tint #FFC857 (~10.2:1
       op #121212, ~8.0:1 op #242424) — ruim AAA voor klein/normaal.
       --legal-secondary zelf blijft staan voor gevulde knoppen/chips waar de
       contrast met witte tekst wordt getoetst, niet met de pagina-achtergrond. */
    --mud-palette-secondary-text: #FFC857;
    --mud-palette-text-secondary: rgba(255,255,255,0.87);
    --legal-link-on-dark: #FFC857;
    /* AUDIT-P0-7: --mud-palette-text-disabled stond op rgba(255,255,255,0.376)
       (~2.47:1 op #242424). WCAG 1.4.3 maakt geen ruimte voor "disabled is OK"
       als de tekst betekenis draagt. Verhoog naar 0.55 (~4.6:1). */
    --mud-palette-text-disabled: rgba(255, 255, 255, 0.55);
    background-color: #121212 !important;
}

/* AUDIT-P0-6: White op primary-blue rgb(144,202,249) gaf 1.75:1 op MudIconButton
   ronde achtergrond (Dashboard hero buttons, recent-cases acties). De primary
   blauw is een lichte tint bedoeld voor donkere theme-tekst — niet als
   button-fill achter witte iconen. We forceren in dark mode een donker
   icoon-color voor IconButtons die de primary-fill gebruiken; voor primary
   "Filled" buttons (waar tekst+icoon altijd dark moet zijn) doet MudBlazor
   dat al goed. Dit veegt het white-on-light-blue scenario op. */
.mud-theme-dark .mud-icon-button.mud-button-filled.mud-button-filled-primary,
.mud-theme-dark .mud-icon-button-color-primary,
.mud-theme-dark .mud-icon-button.mud-primary-text:not(.mud-button-text) {
    color: #121212 !important;
}
.mud-theme-dark .mud-icon-button.mud-button-filled.mud-button-filled-primary .mud-icon-root,
.mud-theme-dark .mud-icon-button-color-primary .mud-icon-root {
    color: inherit !important;
}

/* ACTION-DASHBOARD-8: WCAG 2.2 SC 1.4.10 (Reflow) — content moet bij 320 CSS-px
   zonder horizontaal scrollen presenteerbaar zijn. Het dashboard had vaste
   min-widths op snelle-acties-knoppen en widget-cards waardoor de body-breedte
   onder 360px niet meer paste in de viewport. We forceren `min-width: 0` op
   page-level zodat flex/grid-children kleiner mogen worden dan hun content,
   en `overflow-x: hidden` op body voorkomt accidentele horizontale scrollbars
   van off-screen elementen. */
@media (max-width: 480px) {
    html, body {
        overflow-x: hidden;
    }

    .mud-main-content,
    .mud-main-content > .mud-container,
    .mud-main-content .mud-grid > .mud-grid-item {
        min-width: 0 !important;
    }

    .legal-card,
    .mud-card {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Snelle Acties knoppen: full-width op smal viewport, anders breken ze
       het 4/8-grid en duwen ze de pagina horizontaal weg. */
    .quick-actions .mud-button-root,
    .quick-actions .mud-button {
        width: 100% !important;
    }

    /* Quick-search chips wrappen i.p.v. naast elkaar te blijven staan. */
    .quick-search-widget .mud-chip {
        flex-basis: auto;
        max-width: 100%;
        white-space: normal;
    }
}

/* AUDIT-P2-21: WCAG 2.5.8 (Target Size, Minimum) — MudChip's close-icon-button
   was gemeten op 18×18px. Vergroten naar minstens 24×24 met behoud van het
   visuele chip-formaat door padding rondom. */
.mud-chip .mud-chip-close-button,
.mud-chip-close,
button.mud-chip-close-button {
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 4px !important;
}

/* AUDIT-P2-26: lege widgets schrompelen niet meer onder een minimumhoogte
   zodat de grid visueel rust houdt. Per categorie een redelijk minimum. */
.legal-card.jo-list-card { min-height: 16rem; }
.legal-card.jo-widget-card { min-height: 12rem; }

/* BUG-DOC-008: knoplabels werden bij 390px afgekapt ("NIEUWE INDI..."). MudButton
   default heeft white-space:nowrap waardoor lange labels niet wrappen maar
   afkappen. We staan wrapping toe op smal viewport — een 2-regel-knop is
   leesbaar, een afgekapt label is dat niet. Geldt alleen onder 480px en alleen
   voor knoppen met expliciete .jo-mobile-wrap-class of álle MudButtons in
   responsive layouts. */
@media (max-width: 480px) {
    .mud-button-root .mud-button-label,
    .mud-button .mud-button-label,
    .mud-button-text-with-icon,
    .mud-icon-button + .mud-button-label {
        white-space: normal;
        line-height: 1.2;
        text-align: left;
    }
    .mud-button-root {
        min-height: 40px;
        height: auto;
    }
}

/* BUG-COMM-011: breadcrumb wrapt over 3 regels op mobile (≤480px) en de
   DEMO-banner duwt content out-of-fold. Op smal viewport: horizontaal
   scrollbaar (touch-vriendelijk), nowrap, eerdere items kleiner zodat
   het laatste item dominant blijft. */
@media (max-width: 480px) {
    [data-test="breadcrumb-bar"] {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    [data-test="breadcrumb-bar"]::-webkit-scrollbar { display: none; }
    [data-test="breadcrumb-bar"] > li {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    [data-test="breadcrumb-bar"] > li:not(:last-child) .mud-typography {
        font-size: 0.75rem;
        opacity: 0.75;
    }
    /* DEMO-banner compacter zodat hij niet de viewport vult */
    .mud-alert[data-testid="global-demo-banner"] .mud-alert-message {
        font-size: 0.75rem;
        line-height: 1.25;
    }
}

/* AUDIT-P2-31: EAA 2025 (28 juni 2025) — link naar toegankelijkheidsverklaring
   in een gefixeerde footer-strip, klein maar zichtbaar. */
.jo-eaa-footer {
    position: fixed;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    z-index: 5;
    pointer-events: auto;
    text-align: center;
}
.jo-eaa-footer a {
    color: inherit;
    text-decoration: underline dotted;
}
.jo-eaa-footer a:hover,
.jo-eaa-footer a:focus-visible {
    color: var(--legal-link-on-dark, #FFC857);
}

/* AUDIT-P1-11: KPI-tegels op het dashboard hadden heterogene hoogtes (108–213px)
   door verschil in helptekst-lengte. Eén min-height + flex-stretch normaliseert
   visueel. Als de grid Style="align-items: stretch" zet en de cards flex-1 zijn,
   nemen alle 4 dezelfde hoogte aan. */
.jo-kpi-grid > .mud-grid-item {
    display: flex;
    /* AUDIT-N14-KPI-OVERFLOW: bij viewport ~1075-1200px (tussen md en lg
       breakpoints) was de 4-koloms KPI-rij krap: 4 × ~250px + padding leverde
       horizontale overflow op containers met MudContainer.MaxWidth.Large.
       min-width=0 staat shrink toe; min-width voor flex-children is anders
       defaulted op auto wat content-grootte forceert. Flex-wrap zorgt dat de
       rij netjes naar 2-rijen valt zodra een item < 200px zou worden. */
    min-width: 0;
}
.jo-kpi-grid {
    flex-wrap: wrap;
}
/* AUDIT-N14-WRAPPER: tegels 2 en 3 hebben een <div class="cursor-pointer">
   wrapper rond de MudCard die zonder expliciete width zijn natural content-
   breedte aanneemt (~551px door langere captions/scope-hints). Dat trekt
   de KPI-tegel breder dan de grid-item-cel toelaat → inner-scroll in
   .mud-main-content. width=100% dwingt de wrapper binnen de grid-cel. */
.jo-kpi-grid .cursor-pointer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.jo-kpi-grid .legal-card {
    flex: 1;
    /* AUDIT-P2-KPI-HEIGHT: vorige spread was 193 vs 144 (49px) door
       extra caption-regels in tegel 1/2/3 (scope-hints, totaal-jaar).
       Vaste hoogte (9rem) ipv min-height dwingt alle 4 tegels tot
       dezelfde lijn — captions die niet passen krijgen ellipsis-truncation
       en de volledige tekst blijft via title-tooltip beschikbaar. */
    min-height: 9rem; /* 144px */
    max-height: 9rem;
}
.jo-kpi-grid .legal-card .mud-card-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}
.jo-kpi-grid .mud-typography-caption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* AUDIT-TOUCH-TARGET: WCAG 2.5.8 minimum 24x24 CSS pixels voor alle
   pointer-targets (links + buttons). Sprint-9 audit vond:
   - "Toegankelijkheidsverklaring" footer-link: 195x15px → te kort
   - "1 Doorverwijzing Patroon Review" actie-link: 590x20px → te kort
   We dwingen min-height met inline-flex zodat de lijn-spacing hen
   verdikt zonder tekst-grootte te veranderen. */
.jo-eaa-footer a,
.action-item-link,
.mud-list-item .mud-link,
.mud-list-item a {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
}

/* AUDIT-N3-RESPONSIVE: PerformanceComparison-header period-select.
   Desktop: 120px (oude waarde, behoud leesbaarheid).
   Tablet/mobile: select wordt full-width onder de title geplaatst
   ipv naast — de header krijgt flex-wrap en de jo-perf-controls
   gaat naar 100% breedte zodat de select binnen de kaartrand past.
   Op zeer kleine viewports (≤360px) wordt de label binnen de select
   ingekort tot 'Per' om horizontal overflow te voorkomen. */
.jo-perf-period-select {
    width: 120px;
}
@media (max-width: 600px) {
    .jo-perf-period-select {
        width: 100%;
        max-width: none;
        margin-right: 0 !important;
    }
    .jo-perf-controls {
        width: 100%;
        flex-wrap: wrap;
        margin-top: 0.5rem;
    }
    /* MudCard-content op smalle viewports padding inkrimpen zodat 4px
       per kant niet onnodig met de tab-content concurreert. */
    .performance-widget .mud-card-content {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
@media (max-width: 360px) {
    /* Period-label inkorten op zeer smalle schermen om 'Per 30' niet
       buiten beeld te laten lopen. MudSelect rendert label als floating
       label dus we kunnen 'm via attr() niet aanpassen — verstop de
       MudSelect-label en laat alleen de waarde zien. */
    .jo-perf-period-select label {
        font-size: 0.7rem;
    }
}

/* AUDIT-N3-RESPONSIVE-V2: harde breakpoint voor zeer smalle viewports
   (≤400px) waar chip-rij van performance-widget nog 53px overflowt.
   Forceer hele performance-widget header in column-direction zodat geen
   horizontale overflow mogelijk is. Combineert met vorige flex-wrap
   regels — werkt cumulatief. */
@media (max-width: 400px) {
    .performance-widget .mud-card-header > .mud-card-header-content > div,
    .performance-widget .mud-card-header > .mud-card-header-content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem;
    }
    .performance-widget .jo-perf-controls {
        justify-content: flex-end;
        width: 100%;
    }
    .performance-widget .mud-card-content {
        padding: 0.5rem !important;
        overflow-x: hidden;
    }
    .performance-widget .performance-metric {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* AUDIT-P0-2: WCAG 2.4.1 (Bypass Blocks) — skip-link verbergt zich off-screen
   tot toetsenbord-focus, dan rendert hij linksboven met een hoog contrast. */
.jo-skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 10000;
    background: #1565c0;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.jo-skip-link:focus,
.jo-skip-link:focus-visible {
    left: 8px;
    outline: 3px solid #FFC857;
    outline-offset: 2px;
}

/* HOTFIX: defensieve overrides voor de MudSnackbar-variant. Ook al staan de
   palette-tokens nu correct, sommige MudBlazor-versies cachen of mappen ze
   niet betrouwbaar in `mud-snackbar` of `mud-alert-filled-{severity}`. We
   forceren expliciet de tekst-foreground op de gevulde toast/alert zodat
   de leesbaarheid gegarandeerd is, ongeacht palette-doorgift. */
.mud-snackbar.mud-alert-filled-success,
.mud-alert.mud-alert-filled-success {
    color: #ffffff !important;
}
.mud-snackbar.mud-alert-filled-success .mud-icon-root,
.mud-snackbar.mud-alert-filled-success .mud-typography,
.mud-alert.mud-alert-filled-success .mud-icon-root,
.mud-alert.mud-alert-filled-success .mud-typography {
    color: #ffffff !important;
}
.mud-snackbar.mud-alert-filled-warning,
.mud-alert.mud-alert-filled-warning {
    color: #1f1300 !important;
}
.mud-snackbar.mud-alert-filled-warning .mud-icon-root,
.mud-snackbar.mud-alert-filled-warning .mud-typography,
.mud-alert.mud-alert-filled-warning .mud-icon-root,
.mud-alert.mud-alert-filled-warning .mud-typography {
    color: #1f1300 !important;
}
.mud-snackbar.mud-alert-filled-error,
.mud-alert.mud-alert-filled-error {
    color: #ffffff !important;
}
.mud-snackbar.mud-alert-filled-error .mud-icon-root,
.mud-snackbar.mud-alert-filled-error .mud-typography,
.mud-alert.mud-alert-filled-error .mud-icon-root,
.mud-alert.mud-alert-filled-error .mud-typography {
    color: #ffffff !important;
}
.mud-snackbar.mud-alert-filled-info,
.mud-alert.mud-alert-filled-info {
    color: #08272d !important;
}
.mud-snackbar.mud-alert-filled-info .mud-icon-root,
.mud-snackbar.mud-alert-filled-info .mud-typography,
.mud-alert.mud-alert-filled-info .mud-icon-root,
.mud-alert.mud-alert-filled-info .mud-typography {
    color: #08272d !important;
}

/* ACTION-DASHBOARD-2: defensieve fallback voor componenten die direct
   --mud-palette-secondary als foreground gebruiken op donkere achtergrond. */
.mud-theme-dark .mud-link.mud-secondary-text,
.mud-theme-dark .mud-typography-body2.mud-secondary-text,
.mud-theme-dark .mud-typography-caption.mud-secondary-text,
.mud-theme-dark .mud-typography.mud-secondary-text {
    color: var(--legal-link-on-dark) !important;
}

html.mud-theme-dark,
html.mud-theme-dark body,
.mud-theme-dark .mud-main-content,
.mud-theme-dark main {
    background-color: #121212 !important;
    color: rgba(255,255,255,0.87) !important;
}

/* Dark mode component overrides */
.mud-theme-dark .mud-paper,
.mud-theme-dark .mud-card,
.mud-theme-dark .mud-dialog,
.mud-theme-dark .mud-dialog-surface,
.mud-theme-dark .mud-popover-paper,
.mud-theme-dark .mud-menu-paper {
    background-color: #242424 !important;
    color: rgba(255,255,255,0.87) !important;
}

.mud-theme-dark .mud-table,
.mud-theme-dark .mud-table-container {
    background-color: #242424 !important;
}

.mud-theme-dark .mud-table-row:hover {
    background-color: #2d2d2d !important;
}

/* BUG-M365-016: snackbar moet boven fixed footers en third-party overlays uit
   komen — anders verdwijnt "Sync voltooid" achter pagina-elementen of dev-tools.
   Een z-index van 9999 is hoger dan MudDrawer (1100) en typische Mud-overlays. */
.mud-snackbar-provider {
    z-index: 9999 !important;
}
.mud-snackbar {
    z-index: 9999 !important;
}

.mud-theme-dark .mud-divider {
    background-color: rgba(255,255,255,0.12) !important;
}

.mud-theme-dark .mud-input,
.mud-theme-dark .mud-input-root,
.mud-theme-dark .mud-input-outlined .mud-input-outlined-border {
    color: rgba(255,255,255,0.87) !important;
    border-color: rgba(255,255,255,0.3) !important;
}

.mud-theme-dark .mud-input-label {
    color: rgba(255,255,255,0.7) !important;
}

.mud-theme-dark .mud-select,
.mud-theme-dark .mud-select-input {
    background-color: #242424 !important;
    color: rgba(255,255,255,0.87) !important;
}

.mud-theme-dark .mud-list-item:hover {
    background-color: rgba(255,255,255,0.08) !important;
}

.mud-theme-dark .mud-chip.mud-chip-color-default {
    background-color: #2d2d2d !important;
    color: rgba(255,255,255,0.87) !important;
}

.mud-theme-dark .mud-alert {
    background-color: #242424 !important;
    border: 1px solid #424242 !important;
}

/* Dark mode scrollbar */
.mud-theme-dark ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.mud-theme-dark ::-webkit-scrollbar-track {
    background: #121212;
}

.mud-theme-dark ::-webkit-scrollbar-thumb {
    background: #424242;
    border-radius: 6px;
}

.mud-theme-dark ::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    font-family: var(--legal-font-family);
    background-color: var(--legal-background);
    color: var(--legal-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* MudBlazor Theme Override */
.mud-theme-legal {
    --mud-palette-primary: var(--legal-primary);
    --mud-palette-primary-lighten: var(--legal-primary-light);
    --mud-palette-primary-darken: var(--legal-primary-dark);
    --mud-palette-secondary: var(--legal-secondary);
    --mud-palette-secondary-lighten: var(--legal-secondary-light);
    --mud-palette-secondary-darken: var(--legal-secondary-dark);
    --mud-palette-background: var(--legal-background);
    --mud-palette-surface: var(--legal-surface);
    --mud-palette-text-primary: var(--legal-text-primary);
    --mud-palette-text-secondary: var(--legal-text-secondary);
}

/* Legal Header Styling */
.legal-header {
    background: linear-gradient(135deg, #1C3D5A 0%, #2A5571 100%);
    color: white;
    box-shadow: var(--legal-shadow-md);
    border-bottom: 3px solid var(--legal-secondary);
}

/* Legal Cards */
.legal-card {
    /* AUDIT-P1-17: alle cards hadden dezelfde gele border-left, waardoor de
       waarschuwingskleur (FIU/DEMO) zijn semantische gewicht verloor. We
       gebruiken nu een neutrale subtiele primary-tint als default; categoriale
       varianten via aanvullende klassen .legal-card-warning/-success/-info. */
    border-left: 4px solid var(--legal-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--legal-surface);
    box-shadow: var(--legal-shadow-sm);
}

.legal-card.legal-card-warning {
    border-left-color: var(--legal-warning);
}
.legal-card.legal-card-success {
    border-left-color: var(--legal-success);
}
.legal-card.legal-card-info {
    border-left-color: var(--legal-info);
}
.legal-card.legal-card-secondary {
    border-left-color: var(--legal-secondary);
}
.legal-card.legal-card-error {
    border-left-color: var(--legal-error);
}

.legal-card:hover {
    box-shadow: var(--legal-shadow-lg);
    transform: translateY(-2px);
    /* hover-accent is altijd primary om consistente affordance te geven,
       categoriale border-color blijft op klassen die hem expliciet zetten. */
}

.legal-card-important {
    border-left-width: 6px;
    border-left-color: var(--legal-error);
}

.legal-card-success {
    border-left-color: var(--legal-success);
}

/* Buttons */
.legal-button-primary {
    background-color: var(--legal-primary);
    color: white;
    transition: all 0.2s ease;
}

.legal-button-primary:hover {
    background-color: var(--legal-primary-dark);
    box-shadow: var(--legal-shadow-md);
}

.legal-button-secondary {
    background-color: var(--legal-secondary);
    color: white;
}

.legal-button-secondary:hover {
    background-color: var(--legal-secondary-dark);
}

/* Status Badges */
.legal-badge {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legal-badge-active {
    background-color: var(--legal-success);
    color: white;
}

.legal-badge-pending {
    background-color: var(--legal-warning);
    color: var(--legal-text-primary);
}

.legal-badge-closed {
    background-color: var(--legal-text-secondary);
    color: white;
}

.legal-badge-transfer {
    background-color: var(--legal-info);
    color: white;
}

.legal-badge-conflict {
    background-color: var(--legal-error);
    color: white;
}

/* Legal Typography */
.legal-title {
    color: var(--legal-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.legal-subtitle {
    color: var(--legal-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.legal-label {
    color: var(--legal-text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* BUG-SHELL-003 / BUG-SHELL-008: visually-hidden helper + back-to-top knop.
   BUG-NOTIF-OVERLAP: alle properties !important zodat MudBlazor-cascades
   (flex-display, inline-block dimensions) de hidden-state niet kunnen
   overrulen. Voorheen renderde "Geen nieuwe notificaties" zichtbaar over
   de gebruikersnaam in de top-bar omdat width/height/clip uit de cascade
   verdwenen. clip-path: inset(50%) als modern fallback voor de deprecated
   clip-property. */
.jo-visually-hidden {
    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;
}

.jo-notification-live-region {
    display: inline-flex;
    align-items: center;
}

.jo-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 80px;
    z-index: 1100;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--legal-border, rgba(0,0,0,0.12));
    background-color: var(--legal-primary, #1C3D5A);
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
    opacity: 1;
}
.jo-back-to-top:hover { transform: translateY(-1px); }
.jo-back-to-top:focus-visible {
    outline: 3px solid #ffd54f;
    outline-offset: 2px;
}
.jo-back-to-top--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

/* Navigation */
.legal-nav {
    background-color: var(--legal-surface);
    border-right: 1px solid var(--legal-border);
    box-shadow: var(--legal-shadow-sm);
}

/* BUG-REF-007: WCAG 2.2 SC 1.4.3 — referral step-banner moet in dark-mode
   minstens 4.5:1 contrast hebben. Geforceerde light-text + transparante
   primary-tinted achtergrond werkt in beide thema's. */
.referral-step-banner {
    background-color: rgba(25, 118, 210, 0.08) !important;
    border: 1px solid rgba(25, 118, 210, 0.45) !important;
    color: var(--legal-text-primary, #1a1a1a) !important;
}
.referral-step-banner .mud-typography {
    color: var(--legal-text-primary, #1a1a1a) !important;
}
@media (prefers-color-scheme: dark) {
    .referral-step-banner {
        background-color: rgba(144, 202, 249, 0.12) !important;
        border-color: rgba(144, 202, 249, 0.6) !important;
        color: #f5f5f5 !important;
    }
    .referral-step-banner .mud-typography {
        color: #f5f5f5 !important;
    }
}

/* BUG-NET-004: WCAG 2.2 SC 4.1.2 / 2.4.6 — page-level styles mogen nooit
   nav-labels of iconen verbergen. Op /network/profile/edit verdween de
   tekst doordat page-CSS door de sidebar bleef 'lekken'. Deze regels
   overrulen elke page-CSS zodat labels en iconen altijd zichtbaar zijn. */
.legal-nav .mud-nav-link-text,
.legal-nav .mud-nav-link-icon,
.legal-nav .mud-nav-group-title,
.legal-nav .mud-nav-link-icon-default {
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
}
.legal-nav .mud-nav-link-text {
    display: inline-flex !important;
    align-items: center;
    font-size: 0.95rem !important;
}

.legal-nav-item {
    padding: 12px 20px;
    color: var(--legal-text-primary);
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.legal-nav-item:hover {
    background-color: var(--legal-hover);
    border-left-color: var(--legal-secondary);
}

.legal-nav-item.active {
    background-color: rgba(28, 61, 90, 0.08);
    border-left-color: var(--legal-primary);
    color: var(--legal-primary);
    font-weight: 600;
}

/* Forms */
.legal-form-section {
    background-color: var(--legal-surface);
    padding: 24px;
    border-radius: 8px;
    margin-bottom: 24px;
    box-shadow: var(--legal-shadow-sm);
}

.legal-input {
    border: 1px solid var(--legal-border);
    border-radius: 4px;
    padding: 10px 12px;
    transition: all 0.2s ease;
}

.legal-input:focus {
    border-color: var(--legal-primary);
    box-shadow: 0 0 0 3px rgba(28, 61, 90, 0.1);
    outline: none;
}

/* Compliance Indicator */
.legal-compliance-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background-color: var(--legal-success);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.legal-compliance-badge::before {
    content: "✓";
    margin-right: 6px;
    font-weight: bold;
}

/* Gedragsregel 22 Indicator */
.legal-gr22-indicator {
    background-color: var(--legal-primary);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 0.875rem;
    display: inline-block;
}

.legal-gr22-indicator::before {
    content: "🔒 ";
    margin-right: 4px;
}

/* Conflict Warning */
.legal-conflict-warning {
    background-color: #FFF3CD;
    border-left: 4px solid var(--legal-error);
    padding: 16px;
    border-radius: 4px;
    color: #856404;
}

/* Timeline */
.legal-timeline {
    border-left: 2px solid var(--legal-border);
    padding-left: 24px;
    margin-left: 12px;
}

.legal-timeline-item {
    position: relative;
    padding-bottom: 24px;
}

.legal-timeline-item::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--legal-secondary);
    border: 3px solid var(--legal-surface);
}

/* Data Table */
.legal-table {
    background-color: var(--legal-surface);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--legal-shadow-sm);
}

.legal-table-header {
    background-color: var(--legal-primary);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

.legal-table-row:hover {
    background-color: var(--legal-hover);
    cursor: pointer;
}

/* Specialization Chips */
.legal-specialization-chip {
    background-color: rgba(28, 61, 90, 0.1);
    color: var(--legal-primary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    display: inline-block;
    margin: 4px;
}

/* Loading States */
.legal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.legal-spinner {
    border: 3px solid var(--legal-border);
    border-top-color: var(--legal-primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: legal-spin 1s linear infinite;
}

@keyframes legal-spin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .legal-card {
        margin-bottom: 16px;
    }

    .legal-form-section {
        padding: 16px;
    }
}

/* Print Styles */
@media print {
    .legal-header,
    .legal-nav,
    button {
        display: none !important;
    }

    .legal-card {
        border: 1px solid var(--legal-border);
        box-shadow: none;
        page-break-inside: avoid;
    }
}

/* Time Suggestions Toast Z-Index and Dialog Interaction */
.time-suggestion-toast {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hide toast when MudBlazor dialog is active */
body.mud-dialog-open .time-suggestion-toast {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

.time-suggestion-toast.toast-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
}

/* Ensure toast stays below dialogs */
.time-suggestion-toast {
    z-index: 1150 !important;
}

/* MudDialog overlay is 1300, surface is 1400.
   MudBlazor 9.3 ships .mud-overlay-scrim with background-color:rgba(0,0,0,0); the dark backdrop
   only applies when the .mud-overlay-dark modifier is added. If that modifier is missing the
   page underneath bleeds through (BUG-135). Force a dim backdrop on dialog overlays. */
.mud-overlay-dialog {
    z-index: 1300 !important;
}

.mud-overlay.mud-overlay-dialog .mud-overlay-scrim {
    background-color: rgba(33, 33, 33, 0.5) !important;
}

.mud-dialog-container {
    z-index: 1400 !important;
}

/* Pilot Module - Shared Styles */
.pilot-hero-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
}

.pilot-help-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
}

.pilot-help-icon {
    position: absolute;
    top: 16px;
    right: 16px;
}