:root {
    --sig-ink: #24313d;
    --sig-ink-deep: #16202a;
    --sig-ink-soft: #50606d;
    /* Wax-zegel rode accenten - afgestemd op het Sigillum logo */
    --sig-accent: #a01e1e;
    --sig-accent-soft: #c0392b;
    --sig-accent-deep: #6b0f1a;
    /* Focusring - bewust de donkerste accenttint: haalt op lichte vlakken ~12:1,
       ruim boven de 3:1 die WCAG 2.2 (2.4.11 Focus Appearance) vraagt. */
    --sig-focus-ring: #6b0f1a;
    --sig-surface: #f4f7f8;
    --sig-surface-strong: #e7ecef;
    --sig-line: rgba(22, 32, 42, 0.12);
    --sig-line-strong: rgba(22, 32, 42, 0.18);
    --sig-glow: rgba(192, 57, 43, 0.22);
    --sig-shadow: 0 28px 70px rgba(22, 32, 42, 0.08);
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(192, 57, 43, 0.14), transparent 32%),
        linear-gradient(180deg, #f9fbfb 0%, #edf2f3 100%);
    color: var(--sig-ink-deep);
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

body.mud-theme-dark {
    --sig-ink: #d6e2e7;
    --sig-ink-deep: #f7fafb;
    --sig-ink-soft: #a8b8c2;
    --sig-accent: #e95d52;
    --sig-accent-soft: #f08a7b;
    --sig-accent-deep: #c0392b;
    /* Op de donkere ondergrond blijft accent-deep op ~3:1 steken, precies op de
       grens; de zachte tint haalt daar ~6,7:1. */
    --sig-focus-ring: #f08a7b;
    --sig-surface: #14212b;
    --sig-surface-strong: #101a22;
    --sig-line: rgba(185, 198, 205, 0.14);
    --sig-line-strong: rgba(185, 198, 205, 0.24);
    --sig-glow: rgba(233, 93, 82, 0.18);
    --sig-shadow: 0 28px 70px rgba(0, 0, 0, 0.34);
    background:
        radial-gradient(circle at top left, rgba(233, 93, 82, 0.16), transparent 30%),
        linear-gradient(180deg, #0b1319 0%, #111c24 100%);
    color: var(--sig-ink);
}

a {
    color: inherit;
}

.sig-shell,
.sig-public-shell {
    min-height: 100vh;
}

.sig-public-shell {
    background:
        radial-gradient(circle at 12% 12%, rgba(192, 57, 43, 0.1), transparent 28%),
        linear-gradient(180deg, #f9fbfb 0%, #edf2f3 100%);
}

.sig-brandlink {
    text-decoration: none;
}

.sig-brandlockup {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.sig-mark {
    width: 2.45rem;
    height: 2.45rem;
    display: block;
}

.sig-wordmark {
    height: 1.75rem;
    display: block;
}

.sig-relatie-detail .mud-input-control,
.sig-relatie-detail .mud-input,
.sig-relatie-detail .mud-input-slot {
    min-width: 0;
}

/* Tab-klikken werkten niet: de MudGrid in het actieve tabblad heeft een negatieve
   bovenmarge (-24px, uit de grid-spacing) waardoor de eerste grid-item ~24px omhoog
   over de onderrand van de tabbalk valt. Omdat de panelen ná de tabbalk in de DOM
   staan (beide z-index:auto), schilderden zij eroverheen en vingen de klik op de
   tabkoppen op. Til de tabbalk qua stacking boven de panelen zodat de tabkoppen
   klikbaar blijven. */
.sig-relatie-detail .mud-tabs-tabbar {
    position: relative;
    z-index: 1;
}

/* Bedrag-cellen en KPI-tegels mogen niet mid-cijfer afbreken — anders rendert
   "€ 125.000,00" als "€" + nieuwe regel "125.000,00" of een ellipsis-cut.
   Markup-conventie: gebruik class="sig-bedrag" of data-bedrag op span/td. */
.sig-bedrag,
[data-bedrag],
.mud-table td.sig-bedrag,
.mud-paper .sig-kpi-value,
.sig-kpi-value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Wissel-vestiging-knop in dark-mode kreeg geen rand → leek op een tekstlink.
   Geef hem altijd een zichtbare outline, ook als de inline color="error" is. */
.sig-office-trigger {
    border: 1px solid currentColor !important;
    border-radius: 9999px;
}

/* Dark-mode hardening: veel MudCard/MudPaper-blokken kregen onvoldoende contrast
   tegen de donkere body-achtergrond. Geef ze een subtiele rand zodat panelen
   visueel afgegrensd blijven. */
.mud-theme-dark .mud-paper,
.mud-theme-dark .mud-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* MudAlert in dark-mode: tekst kreeg matig contrast met info/warning achtergrond. */
.mud-theme-dark .mud-alert-text-info,
.mud-theme-dark .mud-alert-text-warning,
.mud-theme-dark .mud-alert-text-success {
    color: rgba(255, 255, 255, 0.92);
}

/* Tabel-rij-hover in dark-mode was vrijwel onzichtbaar. */
.mud-theme-dark .mud-table-row:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

/* Syncfusion DataGrid gebruikt hier het lichte bootstrap5-thema; zonder expliciete
   dark-overrides blijven gridvlakken, headers, pagers en filter-popups wit.
   Trek de kernoppervlakken mee in het Sigillum dark palette zodat alle grids
   consistent donker renderen zonder elke SfGrid apart te patchen. */
body.mud-theme-dark .e-grid,
body.mud-theme-dark .e-grid .e-gridheader,
body.mud-theme-dark .e-grid .e-gridcontent,
body.mud-theme-dark .e-grid .e-table,
body.mud-theme-dark .e-grid .e-headercontent,
body.mud-theme-dark .e-grid .e-content,
body.mud-theme-dark .e-grid .e-pager,
body.mud-theme-dark .e-gridpager,
body.mud-theme-dark .e-grid .e-toolbar,
body.mud-theme-dark .e-grid .e-toolbar-items,
body.mud-theme-dark .e-dialog.e-gridpopup,
body.mud-theme-dark .e-filter-popup,
body.mud-theme-dark .e-excelfilter,
body.mud-theme-dark .e-contextmenu-wrapper,
body.mud-theme-dark .e-grid-menu {
    background: var(--sig-surface-strong) !important;
    color: var(--sig-ink) !important;
}

body.mud-theme-dark .e-grid,
body.mud-theme-dark .e-grid .e-gridheader,
body.mud-theme-dark .e-grid .e-headercontent,
body.mud-theme-dark .e-grid .e-content,
body.mud-theme-dark .e-grid .e-pager,
body.mud-theme-dark .e-gridpager,
body.mud-theme-dark .e-grid .e-toolbar,
body.mud-theme-dark .e-dialog.e-gridpopup,
body.mud-theme-dark .e-filter-popup,
body.mud-theme-dark .e-excelfilter,
body.mud-theme-dark .e-contextmenu-wrapper,
body.mud-theme-dark .e-grid-menu,
body.mud-theme-dark .e-grid .e-rowcell,
body.mud-theme-dark .e-grid .e-headercell,
body.mud-theme-dark .e-grid .e-detailrowcollapse,
body.mud-theme-dark .e-grid .e-detailrowexpand {
    border-color: var(--sig-line) !important;
}

body.mud-theme-dark .e-grid .e-headercell,
body.mud-theme-dark .e-grid .e-rowcell,
body.mud-theme-dark .e-grid .e-detailrowcollapse,
body.mud-theme-dark .e-grid .e-detailrowexpand,
body.mud-theme-dark .e-grid .e-pager,
body.mud-theme-dark .e-grid .e-toolbar,
body.mud-theme-dark .e-grid .e-toolbar-items,
body.mud-theme-dark .e-grid .e-input-group,
body.mud-theme-dark .e-grid .e-input-group input,
body.mud-theme-dark .e-dialog.e-gridpopup .e-input,
body.mud-theme-dark .e-filter-popup .e-input,
body.mud-theme-dark .e-excelfilter .e-input,
body.mud-theme-dark .e-contextmenu-wrapper .e-menu-item,
body.mud-theme-dark .e-grid-menu .e-menu-item {
    color: var(--sig-ink) !important;
}

body.mud-theme-dark .e-grid .e-headercell {
    background: rgba(255, 255, 255, 0.03) !important;
}

body.mud-theme-dark .e-grid .e-row,
body.mud-theme-dark .e-grid .e-altrow {
    background: transparent !important;
}

body.mud-theme-dark .e-grid .e-row:hover,
body.mud-theme-dark .e-grid .e-row.e-hover,
body.mud-theme-dark .e-grid .e-altrow:hover,
body.mud-theme-dark .e-grid .e-altrow.e-hover,
body.mud-theme-dark .e-grid .e-gridheader .e-headercell:hover,
body.mud-theme-dark .e-contextmenu-wrapper .e-menu-item:hover,
body.mud-theme-dark .e-grid-menu .e-menu-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.mud-theme-dark .e-grid .e-selectionbackground,
body.mud-theme-dark .e-grid .e-active,
body.mud-theme-dark .e-grid .e-rowcell.e-selectionbackground,
body.mud-theme-dark .e-grid .e-row[aria-selected="true"] .e-rowcell {
    background: rgba(233, 93, 82, 0.16) !important;
}

body.mud-theme-dark .e-grid .e-pager .e-currentitem,
body.mud-theme-dark .e-gridpager .e-currentitem {
    background: var(--sig-accent) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

body.mud-theme-dark .e-grid .e-pager .e-numericitem,
body.mud-theme-dark .e-grid .e-pager .e-nextprevitem,
body.mud-theme-dark .e-gridpager .e-numericitem,
body.mud-theme-dark .e-gridpager .e-nextprevitem {
    color: var(--sig-ink) !important;
}

body.mud-theme-dark .e-grid .e-toolbar .e-search-wrapper,
body.mud-theme-dark .e-grid .e-input-group,
body.mud-theme-dark .e-dialog.e-gridpopup .e-input-group,
body.mud-theme-dark .e-filter-popup .e-input-group,
body.mud-theme-dark .e-excelfilter .e-input-group {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--sig-line-strong) !important;
}

body.mud-theme-dark .e-grid .e-toolbar .e-search-wrapper input,
body.mud-theme-dark .e-grid .e-input-group input,
body.mud-theme-dark .e-dialog.e-gridpopup .e-input-group input,
body.mud-theme-dark .e-filter-popup .e-input-group input,
body.mud-theme-dark .e-excelfilter .e-input-group input {
    background: transparent !important;
    color: var(--sig-ink) !important;
}

body.mud-theme-dark .e-dialog.e-gridpopup .e-btn,
body.mud-theme-dark .e-filter-popup .e-btn,
body.mud-theme-dark .e-excelfilter .e-btn {
    border-color: var(--sig-line-strong) !important;
}

/* Workflow-board: visuele linker-rand in plaats van enkel een chip-kleur,
   zodat achterstallige en bijna-deadline-dossiers in één oogopslag opvallen. */
.sig-workflow-card.sig-workflow-card-achterstand {
    border-left: 4px solid var(--mud-palette-error, #b00020);
}

.sig-workflow-card.sig-workflow-card-nadert {
    border-left: 4px solid var(--mud-palette-warning, #f59e0b);
}

/* BEV-601: de link op het dossiernummer bedekt de hele kaart, zodat de kaart met de muis én met Tab en Enter
   opent. De focusring staat op de kaart, want de link zelf is maar zo groot als het nummer. */
.sig-workflow-card {
    position: relative;
    cursor: pointer;
}

.sig-workflow-card-link {
    color: inherit;
    text-decoration: none;
}

.sig-workflow-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.sig-workflow-card:has(.sig-workflow-card-link:focus-visible) {
    outline: 3px solid var(--sig-ink, #14213d);
    outline-offset: 2px;
}

/* BEV-627: de actieve weergave in de werkbalk van SfSchedule (bootstrap5: #0d6efd op #f8f9fa) haalde 4,27:1. */
.e-schedule .e-toolbar .e-toolbar-item.e-active-view .e-tbar-btn-text,
.e-schedule .e-toolbar .e-toolbar-item.e-active-view .e-icons {
    color: #0a58ca;
}

/* FIX bug rapport 2026-05-06 #38: op mobiel (≤480px) verdween de account-menu uit
   de header omdat .sig-header-actions oversized was. Force compact zodat alle items
   zichtbaar blijven.

   ⚠ 06-09-2026: hier stond `flex-wrap: wrap`. Dat verplaatste het probleem in plaats van
   het op te lossen: de MudAppBar is `Dense` en dus vast 48 px hoog, zodat een tweede regel
   niet onder de eerste komt maar half óver en onder de balk hangt. Gemeten op 390×844 —
   de navigatiemodus-knop en de accountknop lagen over de titelbalk heen. De echte oplossing
   is ruimte máken (zie de regel hieronder, die nu ook op 390-480 px grijpt), niet wrappen. */
@media (max-width: 480px) {
    .sig-header-actions {
        flex-wrap: nowrap;
        gap: 0.25rem;
        max-width: 60vw;
    }
    .sig-office-trigger,
    .sig-header-action-link {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* FIX bug rapport 2026-05-06 #38 (vervolg): account-knop + kantoor-switcher vielen weg
   omdat de search-widget en Spoed/Timer-topbars de beschikbare breedte vraten. Op deze
   breedte:
   - verbergen we de globale search en de twee topbar-widgets (blijven via
     menu/drawer bereikbaar);
   - verkorten we de office-trigger naar alleen het gebouw-icoon;
   - voorkomen we horizontale page-scroll door overflow-x:hidden op .sig-shell.

   ⚠ 06-09-2026: deze grens stond op **380px** en dekte daarmee vrijwel geen enkele telefoon.
   De iPhone SE is 375 px, maar iPhone 14/15/16 zijn 390, Pixel 393 en veel Android-toestellen
   412 — allemaal nét erbóven. Daar gold alleen de wrap-regel hierboven, en de header liep dus
   over de titelbalk heen. Opgetrokken naar 480px, gelijk aan de regel hierboven; tablets
   (≥481px) blijven ongemoeid. De globale zoekbalk is hier sowieso al verborgen vanaf ≤768px,
   dus dáár verandert dit niets. */
@media (max-width: 480px) {
    html, body {
        overflow-x: hidden;
    }
    .sig-shell {
        overflow-x: hidden;
    }
    .sig-appbar {
        padding: 0 0.4rem;
    }
    .sig-appbar .sig-global-search,
    .sig-appbar .sig-spoed-banner,
    .sig-appbar .sig-timer-chip,
    .sig-appbar .sig-timer-open-teller {
        display: none !important;
    }
    .sig-wordmark {
        max-width: 110px;
        height: 22px;
    }
    .sig-header-actions {
        max-width: none;
        gap: 0.2rem;
    }
    .sig-office-trigger {
        font-size: 0;
        padding: 0.25rem 0.4rem !important;
        min-width: 0;
    }
    .sig-office-trigger .mud-button-icon-start {
        margin: 0 !important;
    }
    .sig-account-menu > .mud-menu-button-activator {
        padding: 0.25rem 0.35rem;
    }
}

/* FIX bug rapport 2026-05-06 #15: Sigillum-primary is rood (wax-seal); MudBlazor-default
   gebruikt diezelfde rode kleur ook voor focus-state op MudTextField. Daardoor lijkt een
   geselecteerd veld op een fout-veld. We zetten de focus-state om naar een neutralere
   accent-blauw, zodat alleen daadwerkelijk gevalideerde error-states rood zijn. */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    transition: border-color 120ms ease;
}

.mud-input.mud-input-outlined:focus-within:not(.mud-input-error) .mud-input-outlined-border {
    border-color: #2563eb !important;
    border-width: 2px;
}

.mud-input.mud-input-outlined:focus-within:not(.mud-input-error) ~ label,
.mud-input-control:focus-within:not(.mud-input-error) > .mud-input-label {
    color: #2563eb !important;
}

/* Voorkom dat de theme-toggle-tooltip rechtsboven het breadcrumb afdekt op
   krappere viewports — meer offset zodat tooltip onder de appbar uitkomt. */
.sig-theme-toggle .mud-tooltip {
    margin-top: 0.5rem;
}

/* Vangnet voor pagina-titels: voorkom dat een lange h1 op smalle viewports
   (≤ 480 px) buiten beeld valt; gebruik tekst-balanceren waar ondersteund.
   Op de klasse en niet op de tag: sinds BEV-727 is elke paginatitel een h2, ook een Typo.h3, en die viel
   hier eerder niet onder. De selector raakt precies wat hij vóór de kopvolgorde-sweep raakte. */
@media (max-width: 600px) {
    .mud-typography-h1,
    .mud-typography-h2,
    .mud-typography-h4,
    .mud-typography-h5,
    .mud-typography-h6,
    h1:not(.mud-typography-h3), h2:not(.mud-typography-h3) {
        text-wrap: balance;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

.sig-relatie-detail .mud-field-label,
.sig-relatie-detail .mud-input-slot input,
.sig-relatie-detail .mud-input-slot .mud-input-text-control,
.sig-relatie-detail .mud-input-slot .mud-input-control-input-container > * {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.sig-appbar {
    padding: 0 1rem 0 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(90deg, rgba(22, 32, 42, 0.98), rgba(36, 49, 61, 0.92)) !important;
    backdrop-filter: blur(14px);
}

.sig-menu-toggle,
.sig-theme-toggle,
.sig-feedback-toggle {
    /* De feedback-knop ontbrak hier en viel terug op --mud-palette-action-default
       (= Sigillum-accentrood), wat op de donkere appbar als een kapot rood blok oogde
       (UX-audit 2026-07-25). Zelfde witte behandeling als de andere appbar-iconen. */
    color: #ffffff !important;
}

.sig-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.sig-office-trigger,
.sig-navmode-menu > .mud-menu-button-activator {
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    background: rgba(255, 255, 255, 0.04);
    text-transform: none;
}

/* Werkmodus-switcher: zelfde pill-look als de vestiging-switcher. */
.sig-navmode-menu > .mud-menu-button-activator {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 9999px;
    display: inline-flex;
    padding: 0.45rem 0.8rem;
    font-weight: 500;
    cursor: pointer;
}

.sig-navmode-check {
    margin-left: auto;
    padding-left: 0.5rem;
}

/* FIX: bij precies één toegankelijk kantoor wordt de office-knop Disabled. MudBlazor's
   disabled-kleur is donker en werd op de donkere appbar onleesbaar (zwart op zwart).
   Forceer met hogere specificiteit een leesbare lichte tekst + volle opacity. */
.sig-office-trigger.mud-button-root.mud-disabled,
.sig-office-trigger.mud-button-root:disabled,
.sig-office-trigger.mud-disabled,
.sig-office-trigger:disabled {
    color: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    opacity: 1 !important;
}

.sig-office-trigger.mud-disabled .mud-button-label,
.sig-office-trigger:disabled .mud-button-label,
.sig-office-trigger.mud-disabled .mud-icon-root,
.sig-office-trigger:disabled .mud-icon-root {
    color: rgba(255, 255, 255, 0.82) !important;
}

.sig-account-menu > .mud-menu-button-activator {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font: inherit;
    text-transform: none;
    cursor: pointer;
}

.sig-account-menu > .mud-menu-button-activator:hover,
.sig-header-action-link:hover {
    opacity: 1;
}

.sig-header-action-link {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.92;
}

.sig-domain {
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sig-drawer {
    border-right: 1px solid var(--sig-line);
}

.sig-drawer .mud-drawer-content {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px);
}

body.mud-theme-dark .sig-drawer .mud-drawer-content {
    background: rgba(16, 26, 34, 0.94);
}

.sig-drawer-scroll {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    padding: 0.85rem 0.75rem 1.25rem;
    overflow: auto;
}

.sig-drawer-brand,
.sig-card,
.sig-page-hero,
.sig-section-card,
.sig-module-card,
.sig-hero-copy,
.sig-hero-visual,
.sig-auth-card {
    border: 1px solid var(--sig-line);
    border-radius: 28px;
    box-shadow: var(--sig-shadow);
}

.sig-drawer-brand {
    padding: 0.9rem 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 250, 0.9)),
        var(--sig-surface);
}

body.mud-theme-dark .sig-drawer-brand,
body.mud-theme-dark .sig-card,
body.mud-theme-dark .sig-section-card,
body.mud-theme-dark .sig-module-card,
body.mud-theme-dark .sig-hero-copy,
body.mud-theme-dark .sig-auth-card {
    background: linear-gradient(180deg, rgba(20, 33, 43, 0.98), rgba(15, 24, 31, 0.94)) !important;
    border-color: var(--sig-line) !important;
    box-shadow: var(--sig-shadow);
}

body.mud-theme-dark .sig-page-hero {
    background:
        radial-gradient(circle at top right, rgba(233, 93, 82, 0.12), transparent 30%),
        linear-gradient(180deg, rgba(20, 33, 43, 0.98), rgba(15, 24, 31, 0.94)) !important;
    border-color: var(--sig-line) !important;
    box-shadow: var(--sig-shadow);
}

.sig-nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sig-nav-home,
.sig-nav-link {
    margin: 0;
    border-radius: 14px;
}

.sig-nav-home.active,
.sig-nav-link.active {
    background: rgba(160, 30, 30, 0.12);
    color: var(--sig-accent-deep);
}

body.mud-theme-dark .sig-nav-home.active,
body.mud-theme-dark .sig-nav-link.active {
    background: rgba(233, 93, 82, 0.16);
    color: var(--sig-ink-deep);
}

.sig-nav-section {
    padding: 0.25rem;
    border: 1px solid transparent;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.56);
}

body.mud-theme-dark .sig-nav-section {
    background: rgba(20, 33, 43, 0.72);
    border-color: rgba(185, 198, 205, 0.04);
}

.sig-nav-section.is-active {
    border-color: rgba(160, 30, 30, 0.18);
    background: rgba(160, 30, 30, 0.07);
}

body.mud-theme-dark .sig-nav-section.is-active {
    border-color: rgba(233, 93, 82, 0.24);
    background: rgba(192, 57, 43, 0.14);
}

.sig-nav-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--sig-ink-deep);
    font-weight: 600;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.sig-nav-section-header {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
}

.sig-nav-section-header .sig-nav-section-toggle {
    flex: 1;
    min-width: 0;
}

.sig-nav-section-link,
a.sig-nav-section-toggle {
    text-decoration: none;
}

.sig-nav-section-link:focus-visible {
    outline: 2px solid rgba(160, 30, 30, 0.35);
    outline-offset: 2px;
}

.sig-nav-section-chevron-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--sig-ink-soft);
    cursor: pointer;
}

.sig-nav-section-chevron-button:hover {
    background: rgba(160, 30, 30, 0.07);
}

body.mud-theme-dark .sig-nav-section-chevron-button:hover {
    background: rgba(233, 93, 82, 0.08);
}

.sig-nav-section-chevron-button:focus-visible {
    outline: 2px solid rgba(160, 30, 30, 0.35);
    outline-offset: 2px;
}

body.mud-theme-dark .sig-nav-section-toggle {
    color: var(--sig-ink-deep);
}

.sig-nav-section-toggle:hover {
    background: rgba(160, 30, 30, 0.07);
}

body.mud-theme-dark .sig-nav-section-toggle:hover {
    background: rgba(233, 93, 82, 0.08);
}

.sig-nav-section-toggle-main {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    text-align: left;
}

.sig-nav-section-chevron {
    color: var(--sig-ink-soft);
}

.sig-nav-section-body {
    padding: 0 0.35rem 0.35rem;
}

.sig-nav-section-copy {
    padding: 0 0.75rem;
    color: var(--sig-ink-soft);
}

.sig-nav-section-items {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.45rem 0 0.1rem;
}

/* Sub-kop binnen een module (zie SigillumNavGroup). Klein, gedempt label dat een groep items inleidt. */
.sig-nav-group-header {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sig-ink-soft);
    opacity: 0.75;
    margin: 0.55rem 0 0.05rem;
    padding: 0 0.75rem;
}

/* De groepskop is een knop geworden (in-/uitklappen van de subgroep): knop-eigen styling
   neutraliseren zodat hij oogt als het kopje dat er stond, plus een teller en chevron. */
.sig-nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: inherit;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
}

.sig-nav-group-toggle:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.04);
}

.sig-nav-group-toggle:focus-visible {
    outline: 2px solid var(--sig-accent-deep);
    outline-offset: -2px;
}

body.mud-theme-dark .sig-nav-group-toggle:hover {
    background: rgba(255, 255, 255, 0.07);
}

.sig-nav-group-title {
    flex: 1 1 auto;
}

/* Aantal onderliggende items: maakt zichtbaar wat een ingeklapte groep verbergt. */
.sig-nav-group-count {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0;
    opacity: 0.7;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
}

body.mud-theme-dark .sig-nav-group-count {
    background: rgba(255, 255, 255, 0.1);
}

.sig-nav-group-chevron {
    flex: 0 0 auto;
    opacity: 0.6;
}

.sig-nav-link-overview {
    border-bottom: 1px solid var(--sig-line);
    margin-bottom: 0.15rem;
    padding-bottom: 0.35rem;
}

/* Pakket-slotje in de zijbalk (alleen zichtbaar onder entitlement-Enforce): kleiner en rustiger
   dan de standaard chip, met een waarschuwende rand — visueel onderscheiden van "Binnenkort". */
.sig-nav-chip-pakket {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.05rem 0.45rem;
    font-size: 0.66rem;
    font-weight: 600;
    border: 1px solid rgba(180, 120, 20, 0.45);
    border-radius: 999px;
    color: inherit;
    opacity: 0.85;
}

/* Alle-onderdelen-galerij (/nis/onderdelen): compacte item-rijen per sectie. */
.sig-onderdeel-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.35rem 0.25rem;
}

.sig-onderdeel-icon {
    margin-top: 0.2rem;
    opacity: 0.75;
}

.sig-onderdeel-body {
    min-width: 0;
}

.sig-onderdeel-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.sig-onderdeel-chip {
    opacity: 0.85;
}

/* "Toon alles (+N)"/"Toon minder" in de Compacte weergave: gestileerd als rustige nav-regel. */
.sig-nav-showall {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    font-size: 0.85rem;
    color: var(--sig-ink-soft);
    padding: 0.45rem 0.75rem;
    border-radius: 6px;
    margin-top: 0.15rem;
}

.sig-nav-showall:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--sig-ink);
}

.sig-nav-showall:focus-visible {
    outline: 2px solid var(--sig-accent-deep);
    outline-offset: -2px;
}

body.mud-theme-dark .sig-nav-showall:hover {
    background: rgba(255, 255, 255, 0.07);
}

.sig-nav-disabled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px dashed var(--sig-line-strong);
    border-radius: 14px;
    color: var(--sig-ink-soft);
}

body.mud-theme-dark .sig-nav-disabled {
    background: rgba(16, 26, 34, 0.72);
    border-color: var(--sig-line-strong);
}

.sig-nav-disabled-label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
}

.sig-nav-chip,
.sig-mini-pill,
.sig-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.8rem;
    border: 1px solid rgba(160, 30, 30, 0.16);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--sig-ink);
    font-size: 0.9rem;
}

body.mud-theme-dark .sig-nav-chip,
body.mud-theme-dark .sig-mini-pill,
body.mud-theme-dark .sig-pill {
    background: rgba(16, 26, 34, 0.9);
    border-color: rgba(233, 93, 82, 0.2);
    color: var(--sig-ink);
}

.sig-nav-chip,
.sig-mini-pill.is-muted {
    border-color: rgba(22, 32, 42, 0.12);
    color: var(--sig-ink-soft);
}

/* 12-A: tellerchip in de zijbalk. Erft de vorm van .sig-nav-chip en zet alleen wat een aantal nodig
   heeft: compacter, cijfers uitgelijnd en een accentkleur, zodat "er ligt werk" opvalt tussen de
   gedempte chips "Pakket" en "Binnenkort". */
.sig-nav-chip.sig-nav-chip-teller {
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    min-width: 1.5rem;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-color: rgba(160, 30, 30, 0.35);
    background: rgba(160, 30, 30, 0.1);
    color: #a01e1e;
}

body.mud-theme-dark .sig-nav-chip.sig-nav-chip-teller {
    border-color: rgba(233, 93, 82, 0.45);
    background: rgba(233, 93, 82, 0.16);
    color: #e95d52;
}

body.mud-theme-dark .sig-mini-pill.is-muted {
    border-color: var(--sig-line);
    color: var(--sig-ink-soft);
}

.sig-shell-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem 3rem;
}

.sig-shell-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Volgt dezelfde cap/centrering als .sig-main-shell zodat de breadcrumb boven de
       content uitlijnt i.p.v. links te blijven hangen. */
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

.sig-shell-topline--wide {
    max-width: none;
}

.sig-context-help {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
}

/* Leersuggestie bij het werkgebied. Staat onder de broodkruimel, boven de pagina-inhoud:
   zichtbaar zonder het werk te onderbreken, en nooit als overlay. */
.sig-leer-trigger {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 auto 1rem;
    max-width: var(--sig-content-max, 1280px);
}

.sig-leer-trigger-inhoud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    width: 100%;
}

.sig-leer-trigger-acties {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.sig-public-context-help {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.sig-context-help .mud-icon-button,
.sig-public-context-help .mud-icon-button {
    border: 1px solid var(--sig-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 32px rgba(22, 32, 42, 0.12);
}

body.mud-theme-dark .sig-context-help .mud-icon-button,
body.mud-theme-dark .sig-public-context-help .mud-icon-button {
    background: rgba(16, 26, 34, 0.94);
    border-color: var(--sig-line-strong);
}

.sig-breadcrumbs {
    display: flex;
    align-items: center;
}

.sig-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sig-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sig-breadcrumb-item + .sig-breadcrumb-item::before {
    content: "/";
    color: var(--sig-ink-soft);
}

.sig-breadcrumb-link {
    color: var(--sig-accent-deep);
    text-decoration: none;
}

body.mud-theme-dark .sig-breadcrumb-link {
    color: var(--sig-accent-soft);
}

.sig-breadcrumb-current {
    color: var(--sig-ink-soft);
}

/* Centreren i.p.v. links uitlijnen: full-width-pagina's kregen hun centrering al van
   MudContainer's eigen auto-marges, smalle pagina's niet. Zonder deze regel springt de
   content zichtbaar van links naar midden bij navigatie tussen beide soorten pagina's. */
.sig-main-shell,
.sig-workspace-page {
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
}

/* Full-width-pagina's (zie SigillumLayout.FullWidthRoutePrefixes): benut de volledige
   breedte i.p.v. de 1280px-cap — nuttig voor de tekstverwerker en brede tabellen. */
.sig-main-shell--wide {
    max-width: none;
}

.sig-page-hero {
    padding: 2rem;
    background:
        radial-gradient(circle at top right, rgba(192, 57, 43, 0.14), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 251, 0.92));
}

.sig-card,
.sig-section-card,
.sig-module-card,
.sig-hero-copy,
.sig-auth-card {
    padding: 1.35rem;
    background: rgba(255, 255, 255, 0.9);
}

.sig-section-card,
.sig-module-card {
    height: 100%;
}

/* Instellingen-strip op de sectie-landings: rustige, secundaire container i.p.v.
   een zwaar rood-gevulde alert (rood suggereert onterecht een foutmelding). */
.sig-section-settings {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--sig-line);
    border-radius: 16px;
    background: var(--sig-surface);
}

.sig-section-settings-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--sig-ink-soft);
}

body.mud-theme-dark .sig-section-settings {
    background: var(--sig-surface-strong);
    border-color: var(--sig-line-strong);
}

.sig-tag-list,
.sig-pill-row,
.sig-action-row,
.sig-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sig-home {
    display: grid;
    gap: 2rem;
}

.sig-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 1.5rem;
    align-items: stretch;
}

.sig-hero-copy {
    padding: 2.5rem;
}

.sig-hero-visual {
    min-height: 360px;
    background:
        linear-gradient(180deg, rgba(22, 32, 42, 0.08), rgba(22, 32, 42, 0.16)),
        radial-gradient(circle at 18% 20%, var(--sig-glow), transparent 36%),
        url('/branding/login/sigillum-login-hero.svg') center/cover no-repeat,
        var(--sig-surface);
}

.sig-foundation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.sig-card .mud-typography-h6 {
    margin-bottom: 0.35rem;
}

.sig-eyebrow {
    display: inline-flex;
    margin-bottom: 0.5rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(160, 30, 30, 0.08);
    color: var(--sig-accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.mud-theme-dark .sig-eyebrow {
    background: rgba(233, 93, 82, 0.12);
    color: var(--sig-accent-soft);
}

.sig-lead {
    max-width: 54rem;
    margin-top: 0.35rem;
    color: var(--sig-ink-soft);
    font-size: 1.05rem;
}

body.mud-theme-dark .sig-hero-visual {
    background:
        linear-gradient(180deg, rgba(12, 20, 27, 0.72), rgba(12, 20, 27, 0.9)),
        radial-gradient(circle at 18% 20%, var(--sig-glow), transparent 36%),
        url('/branding/login/sigillum-login-hero.svg') center/cover no-repeat,
        var(--sig-surface-strong);
}

body.mud-theme-dark .sig-drawer-brand .mud-typography,
body.mud-theme-dark .sig-page-hero .mud-typography,
body.mud-theme-dark .sig-card .mud-typography,
body.mud-theme-dark .sig-section-card .mud-typography,
body.mud-theme-dark .sig-module-card .mud-typography,
body.mud-theme-dark .sig-auth-card .mud-typography {
    color: var(--sig-ink-deep);
}

body.mud-theme-dark .sig-drawer-brand .mud-typography-body2,
body.mud-theme-dark .sig-page-hero .sig-lead,
body.mud-theme-dark .sig-card .mud-typography-body1,
body.mud-theme-dark .sig-card .mud-typography-body2,
body.mud-theme-dark .sig-section-card .mud-typography-body1,
body.mud-theme-dark .sig-section-card .mud-typography-body2,
body.mud-theme-dark .sig-module-card .mud-typography-body1,
body.mud-theme-dark .sig-module-card .mud-typography-body2,
body.mud-theme-dark .sig-auth-support,
body.mud-theme-dark .sig-nav-section-copy,
body.mud-theme-dark .sig-breadcrumb-current,
body.mud-theme-dark .sig-breadcrumb-item + .sig-breadcrumb-item::before {
    color: var(--sig-ink-soft) !important;
}

.sig-auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 520px);
    align-items: center;
    align-content: center;
    gap: clamp(1rem, 2vw, 1.75rem);
    width: min(1320px, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(1rem, 2.2vw, 1.75rem) 0;
}

.sig-auth-panel {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: clamp(520px, 72vh, 640px);
    padding: clamp(2rem, 3vw, 2.75rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(1.4rem, 5vh, 3.25rem);
    border-radius: 32px;
    background:
        radial-gradient(circle at top left, rgba(104, 176, 159, 0.18), transparent 32%),
        radial-gradient(circle at 72% 30%, rgba(201, 138, 66, 0.16), transparent 22%),
        linear-gradient(155deg, rgba(24, 38, 50, 0.92), rgba(43, 59, 72, 0.84)),
        url('/branding/login/sigillum-login-hero.svg') center/cover no-repeat;
    color: #ffffff;
    box-shadow: 0 32px 80px rgba(13, 21, 29, 0.28);
}

.sig-auth-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 22%),
        radial-gradient(circle at 78% 24%, rgba(244, 228, 188, 0.12), transparent 18%),
        radial-gradient(circle at 82% 76%, rgba(233, 93, 82, 0.2), transparent 14%);
    pointer-events: none;
}

.sig-auth-panel > * {
    position: relative;
    z-index: 1;
}

.sig-auth-panel > .mud-stack {
    max-width: 37rem;
    margin-block: auto;
    padding: clamp(1.15rem, 2vw, 1.5rem);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(12, 20, 28, 0.16), rgba(12, 20, 28, 0.34));
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sig-auth-panel .sig-eyebrow {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.sig-auth-panel .sig-lead {
    color: rgba(255, 255, 255, 0.78);
}

.sig-auth-stage {
    position: relative;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    min-height: clamp(520px, 68vh, 620px);
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    background:
        radial-gradient(circle at top left, rgba(104, 176, 159, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(243, 247, 247, 0.94));
    box-shadow: 0 24px 60px rgba(15, 26, 34, 0.12);
}

.sig-auth-card {
    width: min(100%, 430px);
    padding: 1.6rem;
    border: 1px solid rgba(13, 31, 42, 0.1);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 60px rgba(15, 26, 34, 0.12);
}

.sig-auth-card .mud-alert {
    border-radius: 18px;
}

.sig-auth-intro {
    display: grid;
    gap: 0.35rem;
}

.sig-auth-links,
.sig-auth-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sig-auth-links {
    justify-content: space-between;
}

.sig-auth-actions {
    align-items: stretch;
}

.sig-auth-actions .mud-button-root {
    flex: 1 1 12rem;
}

.sig-auth-processing {
    min-height: 12rem;
    justify-content: center;
    text-align: center;
}

.sig-auth-support {
    color: var(--sig-ink-soft);
}

.sig-remember-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.sig-login-button {
    width: 100%;
}

.sig-auth-footer-link {
    color: var(--sig-accent);
    text-decoration: none;
}

.sig-status-chip {
    align-self: flex-start;
}

@media (max-width: 1200px) {
    .sig-shell-main {
        padding: 1.1rem 1rem 2.5rem;
    }

    .sig-header-actions {
        gap: 0.55rem;
    }

    .sig-domain {
        display: none;
    }
}

@media (max-width: 960px) {
    .sig-hero,
    .sig-foundation-grid,
    .sig-auth-shell {
        grid-template-columns: 1fr;
    }

    .sig-hero-copy,
    .sig-page-hero,
    .sig-card,
    .sig-section-card,
    .sig-module-card,
    .sig-auth-card {
        padding: 1.35rem;
    }

    .sig-shell-topline {
        align-items: flex-start;
    }

    .sig-office-trigger {
        display: none;
    }

    .sig-auth-panel {
        min-height: 320px;
        padding: 2rem 1.25rem;
        gap: 1.75rem;
    }

    .sig-auth-panel > .mud-stack {
        max-width: none;
        padding: 1rem;
    }

    .sig-auth-links,
    .sig-auth-actions {
        flex-direction: column;
    }

    .sig-auth-links > *,
    .sig-auth-actions .mud-button-root {
        width: 100%;
    }

    .sig-auth-stage {
        padding: 1rem;
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .sig-appbar {
        padding-right: 0.5rem;
    }

    .sig-shell-main {
        padding: 1rem 0.75rem 2rem;
    }

    .sig-wordmark {
        height: 1.45rem;
    }

    .sig-account-menu > .mud-menu-button-activator {
        min-width: 0;
        font-size: 0;
    }
    .sig-account-menu .mud-button-icon-start { margin: 0; }

    .sig-public-context-help {
        top: 0.75rem;
        right: 0.75rem;
    }
}

/* De telefoonheader moet binnen beeld passen; overflow verbergen maakt knoppen niet bereikbaar. */
@media (max-width: 480px) {
    .sig-header-actions { gap: 0.25rem; }
    .sig-workspace-page .sig-page-hero .mud-typography-h2 { font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.25; }
    .sig-navmode-menu > .mud-menu-button-activator { min-width: 0; font-size: 0; }
    .sig-navmode-menu .mud-button-icon-start { margin: 0; }
    .sig-navmode-menu .mud-button-icon-end { display: none; }
    .sig-navmode-menu > .mud-menu-button-activator,
    .sig-account-menu > .mud-menu-button-activator { padding: 0.375rem; }
    .sig-appbar .mud-icon-button { padding: 0.375rem; }
}

@media (max-width: 360px) {
    .sig-wordmark { height: 1.2rem; }
}

/* KPI cards - prevent label truncation on narrow screens */
.sig-kpi-card { min-height: 96px; display: flex; flex-direction: column; justify-content: center; }
.sig-kpi-label { white-space: normal !important; overflow: visible !important; word-break: break-word; line-height: 1.25; }


/* Globale zoekbalk in topbar */
.sig-global-search { flex: 0 1 420px; margin-left: 16px; margin-right: 16px; min-width: 0; }
.sig-global-search-input .mud-input-outlined { background: var(--mud-palette-surface, #fff); }
.sig-search-result { display: flex; align-items: center; gap: 12px; width: 100%; }
.sig-search-result-icon { flex: 0 0 auto; opacity: 0.75; }
.sig-search-result-body { flex: 1 1 auto; min-width: 0; }
.sig-search-result-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig-search-result-subtitle { font-size: 0.8rem; color: var(--mud-palette-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig-search-result-badge { flex: 0 0 auto; }
@media (max-width: 768px) { .sig-global-search { display: none; } }


/* === Blazor reconnect UI (BUG-36) === */
.components-reconnect-banner {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2933;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    z-index: 2147483647;
}
.components-reconnect-action {
    background: #fff;
    color: #1f2933;
    border: 0;
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 600;
}
.components-reconnect-action:hover { background: #e0e0e0; }

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

/* Accessibility: visueel verborgen, wel leesbaar voor screen readers */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Prompt 12 — Spoed-banner in topbar */
.sig-spoed-banner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #c1272d;
    color: #fff;
    padding: 0.35rem 0.85rem;
    border-radius: 4px;
    margin-left: 1rem;
    font-weight: 600;
    font-size: 0.85rem;
    animation: sig-spoed-pulse 2s ease-in-out infinite;
}

@keyframes sig-spoed-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(193, 39, 45, 0.6); }
    50% { box-shadow: 0 0 0 6px rgba(193, 39, 45, 0); }
}

/* Upload-dropzones: MudBlazor 9 kent de utilityclass opacity-0 niet meer; deze class houdt de
   overlay-input van MudFileUpload onzichtbaar maar klik- en drop-baar over de hele zone. */
.np-upload-overlay-input {
    opacity: 0;
}

/* De overlay-input is onzichtbaar, dus zijn eigen focusring ook: toon hem op de dropzone eromheen. De directe
   ouder is een display:contents-container zonder afmetingen; daarom de .mud-file-upload zelf. */
.mud-file-upload:has(.np-upload-overlay-input:focus-visible) {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: var(--mud-default-borderradius);
}

/* Twee Syncfusion-onderdelen die met het toetsenbord bereikbaar waren zonder zichtbare focus (browserjacht
   akteproductie, 23-09-2026): het tekenvlak van een diagram en de knop voor het eigenschappenvenster van de
   tekstverwerker. Daarbij de Gantt-tijdlijn van een dossier, die sinds de browserjacht workflow één tabstop is. */
.e-diagram-blazor-diagramcontent:focus-visible,
.e-de-showhide-btn:focus-visible,
.e-gantt:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* ==========================================================================
   Dossier-werkbalk (DossierWerkbalk.razor): open tabbladen, vastgepinde
   dossiers en een Recent-menu, boven de pagina-inhoud.
   ========================================================================== */

/* Zelfde cap/centrering als .sig-shell-topline en .sig-main-shell, anders staat de balk
   uit lijn met de content eronder. */
.sig-dossierbalk {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto 0.75rem;
}

/* Full-width-pagina's: de layout markeert dat op de broodkruimelregel. De balk staat als zusje
   in dezelfde shell, dus die markering is hier af te leiden — zo blijft de routelijst op één
   plek staan (SigillumLayout.FullWidthRoutePrefixes) i.p.v. gedupliceerd te worden. */
.sig-shell-main:has(> .sig-shell-topline--wide) > .sig-dossierbalk,
.sig-dossierbalk--wide {
    max-width: none;
}

.sig-dossierbalk-fout {
    margin-bottom: 0.5rem;
}

.sig-dossierbalk-rij {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    /* Smal scherm: de balk schuift horizontaal i.p.v. de layout op te rekken. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
    min-width: 0;
}

.sig-dossierbalk-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    flex: 0 0 auto;
    max-width: 20rem;
    padding: 0.125rem 0.25rem 0.125rem 0.5rem;
    border: 1px solid var(--mud-palette-lines-default, rgba(0, 0, 0, 0.12));
    border-radius: 6px;
    background: var(--mud-palette-surface, #fff);
}

.sig-dossierbalk-tab--actief {
    border-color: var(--mud-palette-primary, #c0392b);
    box-shadow: inset 0 -2px 0 0 var(--mud-palette-primary, #c0392b);
}

.sig-dossierbalk-tab--vastgepind {
    background: var(--mud-palette-background-gray, rgba(0, 0, 0, 0.04));
}

.sig-dossierbalk-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    font-size: 0.8125rem;
}

.sig-dossierbalk-link:hover {
    text-decoration: underline;
}

.sig-dossierbalk-nummer {
    font-weight: 600;
    white-space: nowrap;
}

.sig-dossierbalk-omschrijving {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.75;
}

.sig-dossierbalk-actie {
    flex: 0 0 auto;
}

.sig-dossierbalk-recent {
    flex: 0 0 auto;
}

.sig-dossierbalk-recent-regel {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-right: 0.375rem;
}

.sig-dossierbalk-recent-item {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    /* Op een telefoon telt het dossiernummer; de omschrijving kost te veel breedte. */
    .sig-dossierbalk-omschrijving {
        display: none;
    }

    .sig-dossierbalk-tab {
        max-width: 12rem;
    }
}

/* ── Toegankelijkheid: overslaan naar de inhoud ───────────────────────────────────────────────
   Sigillum had geen skip-link en geen landmark; de WebApp wél (accessibility.css). Voor wie met
   het toetsenbord werkt betekende dat: door de hele navigatielade heen tabben vóór de eerste
   knop op de pagina. De link staat buiten beeld tot hij focus krijgt, dus visueel verandert er
   niets. Eigen tokens (--sig-*), niet die van de WebApp — die stylesheet wordt hier niet geladen. */
.sig-skip-to-content {
    position: absolute;
    top: -48px;
    left: 0;
    z-index: 10000;
    padding: 0.75rem 1.25rem;
    background: var(--sig-accent, #0d6efd);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 6px 0;
    transition: top 0.2s ease;
}

.sig-skip-to-content:focus {
    top: 0;
    outline: 3px solid var(--sig-ink, #14213d);
    outline-offset: 2px;
}
/* === Zichtbare focus voor toetsenbordgebruik (BEV-001) ===================

   MudBlazor zet de focusring van de browser globaal uit
   (MudBlazor.min.css: `a:focus-visible { outline: none }` en
   `button:focus { outline: none }`) en vervangt hem door een achtergrondtint
   van 6% dekking. Gemeten in de browser op /nis: het contrast tussen de
   gefocuste en de ongefocuste toestand is 1,00 voor zijbalklinks, app-bar-
   icoonknoppen en gevulde knoppen, en 1,11 voor de outlined kaartknoppen.
   WCAG 2.2 (2.4.11 Focus Appearance, AA) eist minimaal 3:1. Gevolg: een
   toetsenbordgebruiker ziet nergens waar de focus staat.

   De .sig-nav-* regels eerder in dit bestand dekten al vier eigen componenten,
   maar met rgba(160, 30, 30, 0.35) - dat is over wit ~1,9:1 en haalt de norm
   dus evenmin. Ze staan hieronder bewust opnieuw, zodat ze via de cascade de
   sterkere ring krijgen.

   :focus-visible (niet :focus) - bij een muisklik hoort geen ring te
   verschijnen; dat gedrag van MudBlazor blijft ongemoeid.
   ======================================================================== */
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-list-item:focus-visible,
.mud-tab:focus-visible,
.mud-chip:focus-visible,
.sig-nav-link:focus-visible,
.sig-nav-home:focus-visible,
.sig-nav-section-link:focus-visible,
.sig-nav-section-chevron-button:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--sig-focus-ring);
    outline-offset: 2px;
}

/* De app-bar heeft ook in lichte modus een donkere gradient als ondergrond
   (rgba(22, 32, 42, .98) -> rgba(36, 49, 61, .92)). De donkerrode ring komt daar
   op ~1,3:1 uit en is dus onzichtbaar. Binnen de balk daarom de lichte tint, die
   er ~6,8:1 haalt. Omdat --sig-focus-ring overerft, geldt dit meteen voor alle
   knoppen in de balk - in beide thema's, want de balk is altijd donker. */
header.mud-appbar {
    --sig-focus-ring: #f08a7b;
}

/* Deze twee zitten in een strak omsloten container; een ring buiten de rand
   wordt daar afgekapt, vandaar de inzet naar binnen (zoals eerder al gekozen). */
.sig-nav-group-toggle:focus-visible,
.sig-nav-showall:focus-visible {
    outline: 2px solid var(--sig-focus-ring);
    outline-offset: -2px;
}

/* BEV-271: keuzekaarten met role="radio" zijn geen knop of link en vielen buiten de ring hierboven.
   BEV-280: idem de paginering van SfGrid en de rijenkeuze van MudTable; die laatste moet zwaarder zijn dan
   MudBlazors `div.mud-input-slot.mud-input-root:focus { outline: 0 }`. */
.sig-keuzekaart:focus-visible,
.e-pager:focus-visible,
.mud-table-pagination-select div.mud-input-slot[role="combobox"]:focus-visible {
    outline: 2px solid var(--sig-focus-ring);
    outline-offset: 2px;
}

/* BEV-270: de open-link in een registergrid. Vult de cel, zodat een klik náást de naam nog steeds opent. */
.sig-grid-rijlink {
    display: block;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sig-grid-rijlink:hover,
.sig-grid-rijlink:focus-visible {
    text-decoration: underline;
}

/* Gridpatroon (GridToetsenbord): Syncfusion markeert de cel met de focus met een inzet van 1px; hier dezelfde
   ring als de rest van de werkbench, naar binnen, want de tabel kapt een ring buiten de cel af. Ook voor de
   filterbalkknoppen, die Syncfusion zelf op outline: none zet. */
.e-grid[data-np-gridpatroon] :is(td.e-rowcell, th.e-headercell):focus-visible,
.e-grid[data-np-gridpatroon] :is(td.e-rowcell, th.e-headercell, td.e-filterbarcell) :is(a, button, input, [role="button"]):focus-visible {
    outline: 2px solid var(--sig-focus-ring);
    outline-offset: -2px;
}

/* ══ WCAG 1.4.3 — contrast in donkere modus ══════════════════════════════════════════════════════
   Geoogst op 27-08-2026 van de tak proces/fase4 (01-07-2026), die nooit is gemergd. De
   Syncfusion-grid-overrides uit datzelfde werk zitten hier al wél in; dit contrastblok is toen
   achtergebleven. De getallen zijn contrastverhoudingen, gemeten op de dark-paper.

   ⚠ Alles staat op !important omdat het MudBlazor-thema deze kleuren inline op de component zet.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* De correcties op het primary-rood stonden hier als vier !important-regels over knoppen, chips,
   het actieve nav-item en de gevulde varianten. Ze zijn vervallen: het donkere palet draagt sinds
   19-09-2026 zélf een rood dat op élk donker oppervlak AA haalt, inclusief de gestreepte tabelrij
   en de eigen hovertint, met de donkere navy als contrasttekst. Een tweede correctie erbovenop zou
   de kleur onnodig verder oplichten en losse tekst - de plek waar het misging - bereikte ze niet. */

/* Gevulde success-chip (de "Bij"-badge): licht groen met witte tekst haalt ±2,2:1; donkere tekst op
   datzelfde groen wél AA. */
body.mud-theme-dark .mud-chip-filled.mud-chip-color-success {
    color: #10281b !important;
}

/* ── Knoppen naast omrande velden (UX-ronde 11-10-2026) ───────────────────────────────────────────────────────────
   Een omrand veld met label heeft 8px marge boven en 4px onder (ruimte voor het label in de rand). Een knop die met
   align-end op de onderkant van zijn kolom stond — goed bij de oude onderstreepte velden — kwam daardoor 14px onder
   het midden van het veld en stak 4px onder de rand uit. Gemeten op tientallen werkbenchroutes; de regels hieronder
   zetten de knop op het midden (2-4px verschil blijft door de asymmetrische marge). Een rij met een tekstvak van
   meerdere regels blijft zoals hij is. */
.mud-grid-item.d-flex.align-end:has(> .mud-button-root, > .d-flex > .mud-button-root):not(:has(textarea)) {
    align-items: center !important;
}

/* Een MudStack Row rendert als .d-flex.flex-row (er bestaat géén klasse mud-stack-row). MudSelect en MudNumericField
   verpakken hun veld in een extra div, dus het veld staat één of twee niveaus diep. */
.d-flex.flex-row:has(> .mud-input-control.mud-input-outlined-with-label, > * > .mud-input-control.mud-input-outlined-with-label):not(:has(textarea)) > .mud-button-root {
    align-self: center;
}

/* Een kolom met alleen knoppen in een raster met omrande velden: over de rijhoogte, knoppen op het midden. Zonder dit
   stonden ze bovenaan (geen uitlijning) of onderaan (raster met align-end), 9 tot 18px naast het midden van het veld. */
.mud-grid:has(> .mud-grid-item .mud-input-outlined-with-label)
    > .mud-grid-item:has(> .mud-button-root, > .d-flex > .mud-button-root):not(:has(.mud-input-control, .mud-paper, .mud-card, table, textarea, .mud-alert)) {
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* Een vinkje of schakelaar in een eigen kolom naast omrande velden staat op het midden van die rij, niet bovenaan. */
.mud-grid-item:has(> .mud-input-control-boolean-input:only-child) {
    display: flex;
    align-items: center;
}

.d-flex.flex-row:has(> .mud-input-control.mud-input-outlined-with-label, > * > .mud-input-control.mud-input-outlined-with-label) > .mud-input-control-boolean-input {
    align-self: center;
}