/* /Components/Layout/GlobalSearch.razor.rz.scp.css */
/* Basis 180px, groeit mee tot 320px: de topbar wrapt (flex-wrap), en bij wrappen telt de basis — met
   een basis van 320px brak de topbar op 1280px al naar 2 regels voordat het veld kon krimpen. */
.global-search[b-h6p451zy6n] {
    position: relative;
    flex: 1 1 180px;
    max-width: 320px;
    min-width: 160px;
}

.global-search-icon[b-h6p451zy6n] {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    opacity: .6;
    pointer-events: none;
}

.global-search-input[b-h6p451zy6n] {
    width: 100%;
    min-height: 40px;
    padding: .4rem .75rem .4rem 2rem;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: inherit;
    font-size: .9375rem;
}

/* Outline (2px --focus-ring-solid) komt uit de globale input:focus-regel; de transparante outline
   hier maakte de focus alleen via de zachte ring (±1.4:1) zichtbaar. */
.global-search-input:focus-visible[b-h6p451zy6n] {
    border-color: var(--begra-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.global-search-panel[b-h6p451zy6n] {
    position: absolute;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    min-width: 300px;
    max-height: 420px;
    overflow-y: auto;
    background: var(--begra-surface);
    border: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    z-index: var(--z-popover);
    padding: .25rem;
}

.global-search-state[b-h6p451zy6n] {
    padding: .75rem;
    font-size: .875rem;
    color: var(--begra-gray-600);
}

.global-search-state.is-error[b-h6p451zy6n] {
    color: var(--tone-danger-fg);
}

.global-search-item[b-h6p451zy6n],
.global-search-all[b-h6p451zy6n] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: .6rem;
    padding: .5rem .65rem;
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
}

.global-search-item:hover[b-h6p451zy6n],
.global-search-item.is-active[b-h6p451zy6n],
.global-search-all:hover[b-h6p451zy6n] {
    background: var(--selected-bg);
    text-decoration: none;
}

.global-search-number[b-h6p451zy6n] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.global-search-name[b-h6p451zy6n] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-meta[b-h6p451zy6n] {
    grid-column: 2;
    font-size: .8125rem;
    color: var(--begra-gray-600);
}

.global-search-all[b-h6p451zy6n] {
    display: block;
    border-top: 1px solid var(--begra-gray-200);
    margin-top: .25rem;
    font-weight: 600;
    color: var(--begra-primary-text);
}

@media (max-width: 768px) {
    .global-search[b-h6p451zy6n] {
        order: 10;
        flex: 1 1 100%;
        max-width: none;
    }

    .global-search-panel[b-h6p451zy6n] {
        min-width: 0;
    }
}

/* Touch: zoekveld op 44px (de regel hiervoor in app.css verloor van deze scoped min-height). */
@media (pointer: coarse), (max-width: 768px) {
    .global-search-input[b-h6p451zy6n] {
        min-height: var(--control-h-touch);
    }
}

/* Paneel verschijnt met dezelfde korte fade/slide als het notificatiepaneel i.p.v. abrupt. */
.global-search-panel[b-h6p451zy6n] { animation: gsIn-b-h6p451zy6n var(--dur-enter) var(--ease); transform-origin: top; }
.global-search-item[b-h6p451zy6n], .global-search-all[b-h6p451zy6n] { transition: background-color var(--dur-fast) var(--ease); }
@keyframes gsIn-b-h6p451zy6n { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Uitloop: .is-leaving, daarna verwijdert de component het paneel (LeaveTransition). */
.global-search-panel.is-leaving[b-h6p451zy6n] { animation: gsOut-b-h6p451zy6n var(--dur-exit) var(--ease-in) forwards; pointer-events: none; }
@keyframes gsOut-b-h6p451zy6n { to { opacity: 0; transform: translateY(-4px); } }
/* /Components/Layout/LanguagePicker.razor.rz.scp.css */
/* Compacte taalkeuze in de topbar: een native <select> (toetsenbord + schermlezer werken vanzelf; het label
   is visueel verborgen, de pil heeft een title). Zelfde vorm/diepte als .btn-begra-secondary (app.css),
   zodat hij naast de icoonknoppen als één rij leest. Het wereldbolletje staat er alleen op zeer brede
   schermen bij: daaronder telt elke pixel om de topbar vanaf 1280px op één regel te houden.
   Alle maten staan hier (scoped): de oude mobiele regels in app.css verloren van deze scoped regels. */
.begra-lang-pill[b-w7cf5d09kj] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex-shrink: 0;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 0 .3rem 0 .45rem;
    min-height: 40px;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.begra-lang-pill:hover[b-w7cf5d09kj] {
    background: var(--begra-gray-100);
    border-color: var(--input-border-hover);
}

[data-theme="dark"] .begra-lang-pill[b-w7cf5d09kj] {
    background: var(--begra-surface);
}

[data-theme="dark"] .begra-lang-pill:hover[b-w7cf5d09kj] {
    background: var(--surface-hover);
}

/* Focusring op de pil i.p.v. op de (randloze) select: dezelfde 2px-ring als knoppen en velden. */
.begra-lang-pill:focus-within[b-w7cf5d09kj] {
    border-color: var(--begra-primary-text);
    outline: 2px solid var(--focus-ring-solid);
    outline-offset: 2px;
}

.begra-lang-icon[b-w7cf5d09kj] {
    display: none;
    color: var(--begra-gray-600);
}

.begra-lang-select[b-w7cf5d09kj] {
    width: 3rem;
    background-color: transparent;
    background-position: right .1rem center;
    color: inherit;
    color-scheme: light;
    border: none;
    box-shadow: none;
    min-height: 0;
    font-size: .8125rem;
    font-weight: 600;
    padding: .25rem 1.1rem .25rem 0;
    cursor: pointer;
    line-height: 1.4;
}

[data-theme="dark"] .begra-lang-select[b-w7cf5d09kj] {
    color-scheme: dark;
}

.begra-lang-select:focus[b-w7cf5d09kj],
.begra-lang-select:hover[b-w7cf5d09kj] {
    outline: none;
    box-shadow: none;
    border: none;
}

/* Zelfde breakpoint als de tekstlabels van de topbarknoppen (.btn-theme-label in app.css). */
@media (min-width: 1800px) {
    .begra-lang-icon[b-w7cf5d09kj] {
        display: inline-flex;
    }
}

/* Touch/mobiel: 44px hoog, zonder schaduw (compacte mobiele topbar). */
@media (pointer: coarse), (max-width: 768px) {
    .begra-lang-pill[b-w7cf5d09kj] {
        min-height: var(--control-h-touch);
        box-shadow: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.layout-error-banner[b-3gmb1x2jag] {
    margin: 2rem;
    padding: 1.5rem;
}

.layout-error-text[b-3gmb1x2jag] {
    margin: .5rem 0 0;
}

.layout-error-reload[b-3gmb1x2jag] {
    margin-top: .75rem;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-8ezavay3gx],
.components-reconnect-repeated-attempt-visible[b-8ezavay3gx],
.components-reconnect-failed-visible[b-8ezavay3gx],
.components-pause-visible[b-8ezavay3gx],
.components-resume-failed-visible[b-8ezavay3gx],
.components-rejoining-animation[b-8ezavay3gx] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-retrying[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-failed[b-8ezavay3gx],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-8ezavay3gx] {
    display: block;
}


/* Dialoog-afronding (--radius-lg) en -diepte (--shadow-lg) zoals de overige modals in de app. */
#components-reconnect-modal[b-8ezavay3gx] {
    background-color: var(--begra-white, white);
    color: var(--begra-dark, #1A1A1A);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--begra-gray-200, #E5E5E5);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(15, 23, 42, .16));
    opacity: 0;
    transition: display var(--dur-exit, .2s) allow-discrete, overlay var(--dur-exit, .2s) allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-8ezavay3gx var(--dur-exit, .2s) both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-8ezavay3gx var(--dur-enter, .2s) var(--ease, ease-out), components-reconnect-modal-fadeInOpacity-b-8ezavay3gx var(--dur-enter, .2s) var(--ease, ease-out);
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-8ezavay3gx]::backdrop {
    background-color: var(--overlay-bg);
    animation: components-reconnect-modal-fadeInOpacity-b-8ezavay3gx var(--dur-enter, .2s) var(--ease, ease-out);
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-8ezavay3gx {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-8ezavay3gx {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-8ezavay3gx {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-8ezavay3gx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-8ezavay3gx] {
    margin: 0;
    text-align: center;
    line-height: 1.5;
}

/* Knop volgt .btn-begra-primary (app.css): Begra-blauw i.p.v. het Blazor-standaardblauw. */
#components-reconnect-modal button[b-8ezavay3gx] {
    border: 1px solid var(--begra-primary, #005CB9);
    /* #6b9ed2 gaf met witte tekst maar 2.82:1 — te laag; --begra-primary haalt 6.6:1. */
    background-color: var(--begra-primary, #005CB9);
    color: white;
    font: inherit;
    font-size: .9375rem;
    font-weight: 600;
    min-height: 42px;
    padding: .5625rem 1.125rem;
    border-radius: var(--radius-sm, 6px);
    box-shadow: 0 1px 2px rgba(0, 92, 185, .25);
    cursor: pointer;
    transition: background-color var(--dur, .16s) var(--ease, ease), border-color var(--dur, .16s) var(--ease, ease), box-shadow var(--dur, .16s) var(--ease, ease), transform var(--dur, .16s) var(--ease, ease);
}

    #components-reconnect-modal button:hover[b-8ezavay3gx] {
        background-color: var(--begra-primary-dark, #003E80);
        border-color: var(--begra-primary-dark, #003E80);
        box-shadow: 0 3px 8px rgba(0, 92, 185, .3);
    }

    #components-reconnect-modal button:active[b-8ezavay3gx] {
        background-color: var(--begra-primary, #005CB9);
        transform: translateY(1px);
    }

    /* Zelfde 2px-focusring als de rest van de app (de zachte ring alleen haalde maar ±1.4:1). */
    #components-reconnect-modal button:focus-visible[b-8ezavay3gx] {
        outline: 2px solid var(--focus-ring-solid, #005CB9);
        outline-offset: 2px;
        box-shadow: 0 0 0 3px var(--focus-ring, rgba(0, 92, 185, .22));
    }

.components-rejoining-animation[b-8ezavay3gx] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-8ezavay3gx] {
        position: absolute;
        inset: 0;
        border: 3px solid var(--begra-primary, #005CB9);
        border-radius: 50%;
        opacity: 0;
        transform: scale(0);
        will-change: transform, opacity;
        animation: components-rejoining-animation-b-8ezavay3gx 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-8ezavay3gx] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-8ezavay3gx {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    5% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

/* Reduced motion: geen uitdijende ringen maar een trage opacity-puls, zodat zichtbaar blijft dat er verbonden wordt. */
@keyframes components-rejoining-pulse-b-8ezavay3gx {
    50% {
        opacity: .35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation div[b-8ezavay3gx] {
        transform: scale(1);
        opacity: 1;
        animation: components-rejoining-pulse-b-8ezavay3gx var(--dur-pulse, 1.6s) ease-in-out infinite !important;
    }

        .components-rejoining-animation div:nth-child(2)[b-8ezavay3gx] {
            display: none;
        }
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
[data-theme="dark"] #components-reconnect-modal[b-8ezavay3gx] {
    border-color: var(--begra-gray-300, #404040);
    box-shadow: var(--shadow-lg, 0 20px 56px rgba(0, 0, 0, .6));
}

[data-theme="dark"] #components-reconnect-modal[b-8ezavay3gx]::backdrop {
    background-color: var(--overlay-bg);
}

/* --begra-primary (#005CB9) is op de donkere kaart te vlak voor de ringen; --begra-primary-text
   is dezelfde tint als de linkkleur in dark mode (app.css). */
[data-theme="dark"] .components-rejoining-animation div[b-8ezavay3gx] {
    border-color: var(--begra-primary-text, #60A5FA);
}
/* /Components/Pages/AdminAudit.razor.rz.scp.css */
/* .audit-action / .audit-created / .audit-updated / .audit-deleted zijn verplaatst naar
   wwwroot/app.css (globaal) omdat AdminHealth.razor dezelfde classes hergebruikt en
   CSS-isolatie ze anders niet zou toepassen op dat component. */

/* Kolom- en celklassen (col-*, cell-time, cell-id) worden door DataGrid gerenderd en bereikte deze
   scoped CSS dus nooit: cell-time/cell-id staan globaal in app.css, de dode kolombreedtes zijn weg.
   Ook de mobiele filterbalk en het JSON-blok (.audit-json pre) staan nu in app.css (gedeeld met Logging). */

/* ── Uitklapbare old/new-JSON (voorheen inline summary/div/pre-stijlen) ────── */
.audit-details-toggle[b-kkgeteuojf],
.audit-details-btn[b-kkgeteuojf] {
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--begra-primary-text);
    user-select: none;
    border-radius: var(--radius-sm);
}

.audit-details-btn[b-kkgeteuojf] {
    padding: 0;
}

.audit-details-toggle:hover[b-kkgeteuojf],
.audit-details-btn:not(:disabled):hover[b-kkgeteuojf] {
    text-decoration: underline;
}

.audit-details-btn:disabled[b-kkgeteuojf] {
    cursor: wait;
    opacity: .6;
    text-decoration: none;
}

.audit-json[b-kkgeteuojf] {
    font-size: .75rem;
    margin-top: .5rem;
}

.audit-json strong[b-kkgeteuojf] {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--begra-gray-600);
    margin-bottom: .25rem;
}
/* /Components/Pages/AdminLogs.razor.rz.scp.css */
/* Kolom- en celklassen (col-*, cell-time/-source/-message/-correlation) worden door DataGrid
   gerenderd en bereikte deze scoped CSS dus nooit: de celklassen staan globaal in app.css, de dode
   kolombreedtes zijn weg. Mobiele filterbalk en het exceptieblok (.log-exception-body) staan ook in
   app.css (gedeeld met de Audit trail). */

/* Uitklapbare exceptie onder het bericht (voorheen inline summary/pre-stijlen). */
.log-exception[b-fjn2jryafb] {
    margin-top: .25rem;
}

.log-exception-toggle[b-fjn2jryafb] {
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--tone-danger-fg);
    user-select: none;
    border-radius: var(--radius-sm);
}

.log-exception-toggle:hover[b-fjn2jryafb] {
    text-decoration: underline;
}

/* ── Level-badges ──────────────────────────────────────────────────────────
   Maatvoering komt uit de gedeelde pill-basis in app.css; hier alleen de tone-kleuren. */
.log-info[b-fjn2jryafb]    { background: var(--tone-info-bg);    color: var(--tone-info-fg); }
.log-warning[b-fjn2jryafb] { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.log-error[b-fjn2jryafb]   { background: var(--tone-danger-bg);  color: var(--tone-danger-fg); }
/* Fatal: massief rood (#B71C1C = --status-8-bg, 6.6:1 met wit) zodat het zich onderscheidt van Error. */
.log-fatal[b-fjn2jryafb]   { background: var(--status-8-bg);     color: var(--status-8-fg); }
/* /Components/Pages/AdminNavManco.razor.rz.scp.css */
.nm-intro[b-kmkaxw4i8j] {
    max-width: 60rem;
    margin-bottom: 1rem;
}

.nm-switch-card[b-kmkaxw4i8j] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: 1.25rem;
}

.nm-switch-card .checkbox[b-kmkaxw4i8j] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
}

.nm-switch-card .field-hint[b-kmkaxw4i8j] {
    flex-basis: 100%;
    margin: 0;
}

.nm-grid[b-kmkaxw4i8j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
    gap: 1rem;
}

.nm-card[b-kmkaxw4i8j] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.nm-card-head[b-kmkaxw4i8j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.nm-card-head h2[b-kmkaxw4i8j] {
    margin: 0;
    font-size: 1.125rem;
}

.nm-card .field-hint[b-kmkaxw4i8j] {
    margin: 0 0 .25rem;
    /* Twee regels reserveren: velden in naastliggende kaarten staan zo op één lijn. */
    min-height: 2.9em;
}

.nm-actions[b-kmkaxw4i8j] {
    position: sticky;
    bottom: 0;
    margin-top: 1.25rem;
    padding: .75rem 1rem;
    background: var(--begra-surface);
    border-top: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    align-items: center;
    z-index: 2;
}
/* /Components/Pages/AdminSettings.razor.rz.scp.css */
/* Plakt ónder de sticky topbar (top:0 schoof hem eronder weg); --topbar-h meet interop.js live. */
.settings-toolbar[b-vj53kp3ys8] {
    position: sticky;
    top: var(--topbar-h, 64px);
    z-index: var(--z-sticky);
    display: flex;
    flex-direction: column;
    gap: .625rem;
    padding: .75rem 0;
    margin-bottom: .5rem;
    background: var(--begra-gray-100);
}

.settings-search[b-vj53kp3ys8] {
    position: relative;
    max-width: 28rem;
    color: var(--begra-gray-600);
}

.settings-search[b-vj53kp3ys8]  svg {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.settings-search input[b-vj53kp3ys8] {
    width: 100%;
    padding-left: 2.25rem;
}

/* De links zelf hebben de gedeelde chipstijl uit app.css (.settings-nav a): maat, hover, focus en touchhoogte. */
.settings-nav[b-vj53kp3ys8] {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

/* Sprongdoel valt onder topbar + plakkende zoek-/navbalk. */
.settings-card[b-vj53kp3ys8] {
    scroll-margin-top: calc(var(--topbar-h, 64px) + 9rem);
}

.settings-card > h2[b-vj53kp3ys8] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.settings-subheading[b-vj53kp3ys8] {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--begra-gray-200);
    font-size: .9375rem;
    color: var(--begra-gray-600);
}

.setting-row[b-vj53kp3ys8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem 2rem;
    align-items: start;
    padding: 1rem 0;
    border-top: 1px solid var(--begra-gray-200);
}

.setting-row:first-of-type[b-vj53kp3ys8] {
    border-top: 0;
    padding-top: 0;
}

.settings-subheading + .setting-row[b-vj53kp3ys8] {
    border-top: 0;
    padding-top: .75rem;
}

.setting-label[b-vj53kp3ys8] {
    display: block;
    font-weight: 600;
    color: var(--begra-gray-900);
}

.setting-help[b-vj53kp3ys8] {
    margin: .25rem 0 0;
    font-size: .8125rem;
    color: var(--begra-gray-600);
}

.setting-meta[b-vj53kp3ys8] {
    margin: .375rem 0 0;
    font-size: .75rem;
    color: var(--begra-gray-500);
}

.setting-meta code[b-vj53kp3ys8] {
    font-family: var(--font-mono, ui-monospace, monospace);
}

.setting-field[b-vj53kp3ys8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.setting-field input[b-vj53kp3ys8],
.setting-field select[b-vj53kp3ys8] {
    flex: 1 1 12rem;
    min-width: 0;
}

.setting-unit[b-vj53kp3ys8] {
    font-size: .8125rem;
    color: var(--begra-gray-600);
}

.setting-readonly[b-vj53kp3ys8] {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .8125rem;
    color: var(--begra-gray-600);
    word-break: break-all;
}

.setting-toggle[b-vj53kp3ys8] {
    display: inline-flex;
    width: auto;
}

.setting-badge[b-vj53kp3ys8] {
    padding: .125rem .5rem;
    border-radius: var(--radius-pill);
    font-size: .75rem;
    font-weight: 600;
}

.setting-badge.is-set[b-vj53kp3ys8] {
    background: var(--begra-primary-light);
    color: var(--begra-primary-text);
}

.setting-badge.is-unset[b-vj53kp3ys8] {
    background: var(--begra-gray-200);
    color: var(--begra-gray-600);
}

@media (max-width: 768px) {
    .setting-row[b-vj53kp3ys8] {
        grid-template-columns: minmax(0, 1fr);
    }

    .settings-card[b-vj53kp3ys8] {
        scroll-margin-top: calc(var(--topbar-h, 52px) + 11rem);
    }
}
/* /Components/Pages/ExternalProjects.razor.rz.scp.css */
/* .detail-list staat globaal in app.css (gedeeld met Leverancierdetail). */

.auto-import-row[b-cuvfmw28q2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}
/* /Components/Pages/Handleiding.razor.rz.scp.css */
.manual-tabs[b-khi8r1khi9] {
    margin-bottom: 1rem;
}

/* Inhoudsopgave links (desktop, meescrollend onder de topbar) en de tekst rechts; op smalle schermen onder elkaar. */
.manual-layout[b-khi8r1khi9] {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.manual-toc[b-khi8r1khi9] {
    position: sticky;
    top: calc(var(--topbar-h, 64px) + 1rem);
    max-height: calc(100dvh - var(--topbar-h, 64px) - 2rem);
    overflow-y: auto;
    padding: 1rem;
    font-size: .875rem;
}

.manual-toc-title[b-khi8r1khi9] {
    display: block;
    margin-bottom: .5rem;
}

.manual-toc ul[b-khi8r1khi9] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.manual-toc li[b-khi8r1khi9] {
    margin: 0;
}

.manual-toc a[b-khi8r1khi9] {
    display: block;
    padding: .3rem .25rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.manual-toc a:hover[b-khi8r1khi9] {
    background: var(--hover-bg, var(--begra-gray-100));
}

.manual-toc-l3 a[b-khi8r1khi9] {
    padding-left: 1rem;
    color: var(--begra-gray-600);
}

/* De handleidingtekst komt als HTML binnen (geen scope-attributen): opmaak via ::deep. */
.manual-content[b-khi8r1khi9] {
    padding: 1.5rem 1.75rem;
    line-height: 1.6;
    min-width: 0;
}

.manual-content[b-khi8r1khi9]  h2 {
    margin: 2rem 0 .75rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--begra-gray-200);
    font-size: 1.25rem;
}

.manual-content[b-khi8r1khi9]  h2:first-child {
    margin-top: 0;
}

.manual-content[b-khi8r1khi9]  h3 {
    margin: 1.5rem 0 .5rem;
    font-size: 1.0625rem;
}

.manual-content[b-khi8r1khi9]  h4 {
    margin: 1.25rem 0 .5rem;
    font-size: .9375rem;
}

/* Kopankers landen onder de vaste topbar. */
.manual-content[b-khi8r1khi9]  :is(h2, h3, h4) {
    scroll-margin-top: calc(var(--topbar-h, 64px) + 1rem);
}

.manual-content[b-khi8r1khi9]  p,
.manual-content[b-khi8r1khi9]  ul,
.manual-content[b-khi8r1khi9]  ol {
    margin: 0 0 .85rem;
}

.manual-content[b-khi8r1khi9]  li + li {
    margin-top: .25rem;
}

.manual-content[b-khi8r1khi9]  blockquote {
    margin: 0 0 1rem;
    padding: .6rem .9rem;
    border-left: 3px solid var(--begra-primary-text);
    background: var(--begra-primary-light);
    border-radius: var(--radius-sm);
}

.manual-content[b-khi8r1khi9]  blockquote p:last-child {
    margin-bottom: 0;
}

.manual-content[b-khi8r1khi9]  code {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: .875em;
    padding: .05rem .3rem;
    border-radius: var(--radius-xs, 4px);
    background: var(--begra-gray-100);
}

/* Tabellen kunnen breed zijn: horizontaal scrollen binnen de tekst i.p.v. de pagina. */
.manual-content[b-khi8r1khi9]  table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 1rem;
    border-collapse: collapse;
    font-size: .875rem;
}

.manual-content[b-khi8r1khi9]  th,
.manual-content[b-khi8r1khi9]  td {
    padding: .45rem .6rem;
    border: 1px solid var(--begra-gray-200);
    text-align: left;
    vertical-align: top;
}

.manual-content[b-khi8r1khi9]  th {
    background: var(--table-head-bg, var(--begra-gray-100));
    font-weight: 600;
}

.manual-content[b-khi8r1khi9]  hr {
    margin: 1.5rem 0;
    border: 0;
    border-top: 1px solid var(--begra-gray-200);
}

@media (max-width: 1024px) {
    .manual-layout[b-khi8r1khi9] {
        grid-template-columns: minmax(0, 1fr);
    }

    .manual-toc[b-khi8r1khi9] {
        position: static;
        max-height: none;
    }
}

@media (max-width: 640px) {
    .manual-content[b-khi8r1khi9] {
        padding: 1rem;
    }
}

@media print {
    .manual-tabs[b-khi8r1khi9],
    .manual-toc[b-khi8r1khi9] {
        display: none;
    }

    .manual-layout[b-khi8r1khi9] {
        display: block;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ---- Dashboard-kaarten (aantallen per fase / totaal) ---- */
.dashboard-card[b-8ijdjotnco] {
    display: flex;
    flex-direction: column;
}

/* Kaartkop als ingetogen sectielabel; de tabel zelf zit edge-to-edge in de kaart. */
.dashboard-card > h2[b-8ijdjotnco] {
    font-size: .8125rem;
    font-weight: 700;
    margin: 0 0 .75rem 0;
    color: var(--begra-gray-600);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* Aantal-kolom (voorheen inline text-align:right): rechts uitgelijnd, tabelcijfers,
   groot en vet als KPI-getal. */
.dashboard-table .col-num[b-8ijdjotnco] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dashboard-table td.col-num[b-8ijdjotnco] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--begra-gray-900);
    letter-spacing: -.01em;
    width: 1%;
}

.dashboard-table tbody tr.clickable td:first-child[b-8ijdjotnco] {
    font-weight: 500;
}

/* Statusnummer als compacte cirkel-chip vóór de fase-naam. */
.dashboard-table .status-badge[b-8ijdjotnco] {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 .5rem;
    margin-right: .5rem;
    justify-content: center;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

/* Klikbare rij: het getal kleurt mee in de accentkleur bij hover. */
.dashboard-table tbody tr.clickable:hover td.col-num[b-8ijdjotnco] {
    color: var(--begra-primary-text);
}

/* ---- Charts row (doorlooptijd per status / aanvragen per week) ---- */
.charts-row[b-8ijdjotnco] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .charts-row[b-8ijdjotnco] { grid-template-columns: 1fr; }
}

.charts-row > .chart-card + .chart-card[b-8ijdjotnco] {
    margin-top: 0;
}

.chart-card[b-8ijdjotnco] {
    display: flex;
    flex-direction: column;
}

.chart-card h2[b-8ijdjotnco] {
    font-size: .8125rem;
    font-weight: 700;
    margin: 0 0 .75rem 0;
    color: var(--begra-gray-600);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ApexCharts-kleuren volgen het actieve thema via CSS-variabelen (werkt ook bij thema-wissel zonder re-render). */
.chart-card[b-8ijdjotnco]  .apexcharts-text { fill: var(--begra-gray-600); }
.chart-card[b-8ijdjotnco]  .apexcharts-gridline { stroke: var(--begra-gray-200); }
.chart-card[b-8ijdjotnco]  .apexcharts-xaxis-tick,
.chart-card[b-8ijdjotnco]  .apexcharts-xaxis line,
.chart-card[b-8ijdjotnco]  .apexcharts-yaxis line { stroke: var(--begra-gray-300); }

.chart-card[b-8ijdjotnco]  .apexcharts-tooltip {
    background: var(--begra-surface);
    color: var(--begra-dark);
    border: 1px solid var(--begra-gray-200);
    box-shadow: var(--shadow-sm);
}

.chart-card[b-8ijdjotnco]  .apexcharts-tooltip-title {
    background: var(--begra-gray-100);
    border-bottom: 1px solid var(--begra-gray-200);
    color: var(--begra-dark);
}

.chart-card[b-8ijdjotnco]  .apexcharts-xaxistooltip {
    background: var(--begra-surface);
    color: var(--begra-dark);
    border: 1px solid var(--begra-gray-200);
}

.chart-card[b-8ijdjotnco]  .apexcharts-xaxistooltip-bottom::before,
.chart-card[b-8ijdjotnco]  .apexcharts-xaxistooltip-bottom::after { border-bottom-color: var(--begra-gray-200); }

/* .empty-hint is verplaatst naar wwwroot/app.css (globaal, ook gebruikt door Reports.razor). */

/* On hold split (klant / intern): sub-rows under the On hold row, indented so they read as a breakdown and not as extra phases. */
.dashboard-subrow td:first-child[b-8ijdjotnco] { padding-left: 2.25rem; font-size: .875rem; }
.dashboard-subrow td.col-num[b-8ijdjotnco] { font-size: .875rem; }

/* "Nazorg verlopen" above zero: the count in the danger tone (>=4.5:1 in both themes). */
.dashboard-row--alert td.col-num[b-8ijdjotnco] { color: var(--tone-danger-fg); font-weight: 700; }
/* /Components/Pages/Info.razor.rz.scp.css */
/* ---- page header ---- */
/* .page-subtitle staat globaal in app.css (samen met .sf-subtitle). */

/* ====================================================
   INTRO HERO
   ==================================================== */
.intro-hero[b-vdlizidz25] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    padding: 1.75rem;
    margin-bottom: 1.75rem;
}

.intro-logo-col[b-vdlizidz25] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-logo[b-vdlizidz25] {
    width: 110px;
    height: auto;
}

.intro-content-col[b-vdlizidz25] {
    flex: 1;
}

.intro-title[b-vdlizidz25] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--begra-dark);
    margin-bottom: .75rem;
    border: none;
    padding: 0;
}

.intro-content-col p[b-vdlizidz25] {
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--begra-dark);
    margin-bottom: .75rem;
}

.intro-content-col p:last-child[b-vdlizidz25] {
    margin-bottom: 0;
}

.what-can-you-do-title[b-vdlizidz25] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--begra-dark);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--begra-primary-light);
}

/* ---- capability cards ---- */
.capability-grid[b-vdlizidz25] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: .5rem;
}

.capability-card[b-vdlizidz25] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.1rem;
}

.cap-icon[b-vdlizidz25] {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--begra-primary-light);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    /* --begra-primary-light/-text zijn in dark mode al gedempt resp. lichtblauw (app.css). */
    color: var(--begra-primary-text);
}

.cap-icon svg[b-vdlizidz25] {
    width: 1.2rem;
    height: 1.2rem;
}

.cap-body[b-vdlizidz25] {
    flex: 1;
}

.cap-title[b-vdlizidz25] {
    font-weight: 700;
    font-size: .9375rem;
    color: var(--begra-dark);
    margin-bottom: .3rem;
}

.cap-desc[b-vdlizidz25] {
    font-size: .8125rem;
    color: var(--begra-gray-600);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 640px) {
    .intro-hero[b-vdlizidz25] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .capability-grid[b-vdlizidz25] { grid-template-columns: 1fr; }
}

/* ---- sections ---- */
.info-section[b-vdlizidz25] {
    margin-bottom: 2.5rem;
}

.info-section h2[b-vdlizidz25] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--begra-dark);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--begra-primary-light);
}

.section-ico[b-vdlizidz25] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--begra-primary-text);
    flex-shrink: 0;
}

/* ---- info cards grid ---- */
.info-grid[b-vdlizidz25] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.info-card[b-vdlizidz25] {
    padding: 1rem;
}

.info-card-label[b-vdlizidz25] {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--begra-gray-600);
    margin-bottom: .25rem;
}

.info-card-value[b-vdlizidz25] {
    font-size: .9375rem;
    color: var(--begra-dark);
    font-weight: 500;
}

/* ---- roles table: gebruikt de globale .begra-table (app.css) ---- */
.info-roles-table td[b-vdlizidz25] {
    vertical-align: top;
}

/* .role-badge en .role-admin/.role-montageplanner/.role-inkoop/.role-projectleider/.role-lezer
   zijn verplaatst naar wwwroot/app.css (globaal, ook gebruikt door StatusFlow.razor). */

/* ---- modules grid ---- */
.module-grid[b-vdlizidz25] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.module-card[b-vdlizidz25] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.module-status[b-vdlizidz25] {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Alleen nog "klaar"-modules (de deels/gepland-varianten zijn uit de pagina verdwenen). */
.module-done .module-status[b-vdlizidz25] { color: var(--begra-success); }

.module-name[b-vdlizidz25] {
    font-weight: 600;
    font-size: .9375rem;
    color: var(--begra-dark);
}

.module-desc[b-vdlizidz25] {
    font-size: .8125rem;
    color: var(--begra-gray-600);
    line-height: 1.45;
}

/* ---- todo ---- */
.todo-group[b-vdlizidz25] {
    margin-bottom: 1.5rem;
}

.todo-group-title[b-vdlizidz25] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 700;
    margin-bottom: .6rem;
}

.priority-dot[b-vdlizidz25] {
    display: inline-block;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Stip = levendige signaalkleur (decoratief, de koptekst draagt de betekenis); koptekst via de
   tone-fg-tokens: rood/oranje/blauw als tekst haalden 3.9 / 2.4 (licht) resp. 3.05:1 (dark). */
.priority-high   .priority-dot[b-vdlizidz25] { background: var(--begra-red); }
.priority-medium .priority-dot[b-vdlizidz25] { background: var(--begra-orange); }
.priority-low    .priority-dot[b-vdlizidz25] { background: var(--primary-fill); }

.priority-high[b-vdlizidz25]   { color: var(--tone-danger-fg); }
.priority-medium[b-vdlizidz25] { color: var(--tone-warning-fg); }
.priority-low[b-vdlizidz25]    { color: var(--tone-info-fg); }

.todo-list-card[b-vdlizidz25] {
    padding: .5rem 1rem;
}

.todo-list[b-vdlizidz25] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.todo-item[b-vdlizidz25] {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--begra-gray-200);
    font-size: .875rem;
}

.todo-item:last-child[b-vdlizidz25] {
    border-bottom: none;
}

.todo-tag[b-vdlizidz25] {
    /* Maat uit de gedeelde pill-basis (app.css); kleur via .tag-* hieronder. */
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Tag-kleuren via de semantische tone-tokens (app.css) — dark mode volgt automatisch. */
.tag-backend[b-vdlizidz25]  { background: var(--tone-info-bg);    color: var(--tone-info-fg); }
.tag-frontend[b-vdlizidz25] { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.tag-test[b-vdlizidz25]     { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.tag-beheer[b-vdlizidz25]   { background: var(--tone-accent-bg);  color: var(--tone-accent-fg); }
.tag-infra[b-vdlizidz25]    { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }

.todo-text[b-vdlizidz25] {
    line-height: 1.5;
    color: var(--begra-dark);
}

.todo-text code[b-vdlizidz25] {
    background: var(--begra-gray-100);
    border: 1px solid var(--begra-gray-200);
    padding: .1em .35em;
    border-radius: var(--radius-xs);
    font-size: .8125rem;
    font-family: var(--font-mono);
}

/* ---- architecture grid ---- */
.arch-grid[b-vdlizidz25] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.arch-card[b-vdlizidz25] {
    padding: 1rem;
}

.arch-project[b-vdlizidz25] {
    font-weight: 700;
    font-size: .9375rem;
    color: var(--begra-primary-text);
    margin-bottom: .2rem;
    font-family: var(--font-mono);
}

.arch-role[b-vdlizidz25] {
    font-size: .75rem;
    font-weight: 600;
    color: var(--begra-gray-600);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: .4rem;
}

.arch-desc[b-vdlizidz25] {
    font-size: .8125rem;
    color: var(--begra-dark);
    line-height: 1.5;
}

/* ---- responsive ---- */
@media (max-width: 768px) {
    .info-grid[b-vdlizidz25] { grid-template-columns: repeat(2, 1fr); }
    .arch-grid[b-vdlizidz25] { grid-template-columns: repeat(2, 1fr); }
    .module-grid[b-vdlizidz25] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .info-grid[b-vdlizidz25] { grid-template-columns: 1fr; }
    .arch-grid[b-vdlizidz25] { grid-template-columns: 1fr; }
    .module-grid[b-vdlizidz25] { grid-template-columns: 1fr; }
}

/* Verwijzing naar de handleiding direct onder de introductie. */
.info-manual-card[b-vdlizidz25] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem;
}

.info-manual-title[b-vdlizidz25] {
    flex-basis: 100%;
    margin: 0;
    font-size: 1.0625rem;
}

.info-manual-card p[b-vdlizidz25] {
    flex: 1 1 20rem;
    margin: 0;
}
/* /Components/Pages/MancoOverview.razor.rz.scp.css */
/* Tellers boven het manco-overzicht: klikbare chips die het bijbehorende filter zetten. */
.manco-summary[b-z1a1boacbh] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .25rem 0 1rem;
}

.manco-summary-chip[b-z1a1boacbh] {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    min-height: 44px;
    padding: .5rem .9rem;
    border: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-sm);
    background: var(--begra-white);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.manco-summary-chip strong[b-z1a1boacbh] {
    font-size: 1.15rem;
}

.manco-summary-chip:hover[b-z1a1boacbh] {
    border-color: var(--begra-gray-400);
}

.manco-summary-chip.active[b-z1a1boacbh] {
    border-color: var(--begra-primary);
    box-shadow: 0 0 0 1px var(--begra-primary);
}

.manco-summary-chip:focus-visible[b-z1a1boacbh] {
    outline: 2px solid var(--focus-ring-solid);
    outline-offset: 2px;
}

:global([data-theme="dark"]) .manco-summary-chip[b-z1a1boacbh] {
    background: var(--input-bg);
}

.manco-filter-checks[b-z1a1boacbh] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
}

.manco-summary-chip.is-danger strong[b-z1a1boacbh] {
    color: var(--tone-danger-fg);
}

.manco-summary-chip.is-warning strong[b-z1a1boacbh] {
    color: var(--tone-warning-fg);
}
/* /Components/Pages/Planning.razor.rz.scp.css */
.planning-controls[b-dbeovctb55] {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* Zoomknoppen: knopstijl, aan-staat en dark mode uit de gedeelde segmented-stijl in app.css
   (.segmented>button / .planning-zoom button); focusring uit de globale :focus-visible-regel. */
.planning-zoom[b-dbeovctb55] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.planning-nav[b-dbeovctb55] {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
}

.planning-period[b-dbeovctb55] {
    margin-left: .5rem;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

/* Samenvatting als KPI-tegels: ingetogen label bovenaan, groot tabelcijfer eronder. */
.planning-summary[b-dbeovctb55] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

/* Naast elkaar liggende kaarten: de globale ".begra-card + .begra-card"-marge (verticale stapeling) hoort hier niet. */
.planning-summary .begra-card + .begra-card[b-dbeovctb55] {
    margin-top: 0;
}

.planning-summary .begra-card[b-dbeovctb55] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .875rem 1.125rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--begra-gray-600);
}

.planning-summary .begra-card strong[b-dbeovctb55] {
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--begra-gray-900);
    font-variant-numeric: tabular-nums;
    text-transform: none;
}

.planning-empty[b-dbeovctb55] {
    margin: .25rem 0 .5rem;
    font-size: .875rem;
}

.planning-list[b-dbeovctb55] {
    list-style: none;
    margin: .5rem 0 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.planning-item[b-dbeovctb55] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-sm);
    padding: .5rem .75rem;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.planning-item:hover[b-dbeovctb55] {
    background: var(--begra-gray-100);
    border-color: var(--begra-gray-300);
}

.planning-title[b-dbeovctb55] {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.planning-dates[b-dbeovctb55] {
    color: var(--begra-gray-600);
    font-size: .875rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.planning-calendar-scroll[b-dbeovctb55] {
    margin-bottom: 1rem;
    overflow-x: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    /* Schaduw-indicatoren die aangeven dat er gescrold kan worden */
    background:
        linear-gradient(to right, var(--begra-white) 30%, transparent) left center,
        linear-gradient(to left,  var(--begra-white) 30%, transparent) right center,
        radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) right center;
    background-repeat: no-repeat;
    background-size: 80px 100%, 80px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}

.planning-calendar-table[b-dbeovctb55] {
    width: 100%;
    border-collapse: collapse;
    background: var(--begra-white);
    border: 1px solid var(--begra-gray-200);
    min-width: max-content;
}

.planning-calendar-table th[b-dbeovctb55],
.planning-calendar-table td[b-dbeovctb55] {
    border-bottom: 1px solid var(--begra-gray-200);
    padding: .4rem .5rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Sticky project-info kolommen (1=ID, 2=Naam, 3=Start) ───────────────── */
.planning-calendar-table thead th:nth-child(1)[b-dbeovctb55],
.planning-calendar-table thead th:nth-child(2)[b-dbeovctb55],
.planning-calendar-table thead th:nth-child(3)[b-dbeovctb55],
.planning-calendar-table tbody td:nth-child(1)[b-dbeovctb55],
.planning-calendar-table tbody td:nth-child(2)[b-dbeovctb55],
.planning-calendar-table tbody td:nth-child(3)[b-dbeovctb55] {
    position: sticky;
    z-index: 2;
    background: var(--begra-white);
}

.planning-calendar-table thead th:nth-child(1)[b-dbeovctb55],
.planning-calendar-table tbody td:nth-child(1)[b-dbeovctb55] {
    left: 0;
    min-width: 96px;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .8125rem;
    color: var(--begra-gray-600);
}

.planning-calendar-table thead th:nth-child(2)[b-dbeovctb55],
.planning-calendar-table tbody td:nth-child(2)[b-dbeovctb55] {
    left: 96px;
    min-width: 140px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.planning-calendar-table thead th:nth-child(3)[b-dbeovctb55],
.planning-calendar-table tbody td:nth-child(3)[b-dbeovctb55] {
    left: 276px;
    min-width: 90px;
    border-right: 2px solid var(--begra-gray-200);
}

/* Thead sticky cellen hebben hogere z-index dan tbody sticky cellen.
   Kopstijl gelijk aan .begra-table th (app.css): kapitalen, klein, gespatieerd. */
.planning-calendar-table thead th:nth-child(1)[b-dbeovctb55],
.planning-calendar-table thead th:nth-child(2)[b-dbeovctb55],
.planning-calendar-table thead th:nth-child(3)[b-dbeovctb55] {
    z-index: 3;
    background: var(--begra-gray-100);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--begra-gray-600);
}

.planning-calendar-head[b-dbeovctb55] {
    text-align: center;
    min-width: 28px;
    padding: .35rem .2rem;
}

.planning-calendar-head span[b-dbeovctb55] {
    display: block;
    font-size: .75rem;
    font-weight: 600;
}

.planning-calendar-head small[b-dbeovctb55] {
    color: var(--begra-gray-600);
    font-size: .6875rem;
}

.planning-calendar-name[b-dbeovctb55] {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-row[b-dbeovctb55] {
    cursor: pointer;
    transition: background-color var(--dur) var(--ease);
}

.calendar-row:hover[b-dbeovctb55] {
    background: var(--begra-gray-100);
}

.planning-track[b-dbeovctb55] {
    display: grid;
    gap: 0;
    align-items: center;
    min-height: 28px;
    position: relative;
}

.planning-track-cell[b-dbeovctb55] {
    display: block;
    height: 22px;
    border-right: 1px solid var(--begra-gray-200);
    background: color-mix(in srgb, var(--begra-gray-100) 55%, var(--begra-white));
    grid-row: 1;
}

.planning-track-cell:last-of-type[b-dbeovctb55] {
    border-right: none;
}

/* Basiskleur via --primary-fill (dark: >=3:1 op de track); per status de levendige -dot-tokens. */
.planning-bar[b-dbeovctb55] {
    grid-row: 1;
    display: block;
    height: 16px;
    border-radius: var(--radius-pill);
    background: var(--primary-fill);
    border: 1px solid var(--primary-fill);
    z-index: 1;
}

.planning-bar.s1[b-dbeovctb55] { background: var(--status-1-dot); border-color: var(--status-1-dot); }
.planning-bar.s4[b-dbeovctb55] { background: var(--status-4-dot); border-color: var(--status-4-dot); }
.planning-bar.s5[b-dbeovctb55] { background: var(--status-5-dot); border-color: var(--status-5-dot); }
.planning-bar.s6[b-dbeovctb55] { background: var(--status-6-dot); border-color: var(--status-6-dot); }
.planning-bar.s7[b-dbeovctb55] { background: var(--status-7-dot); border-color: var(--status-7-dot); }
.planning-bar.s8[b-dbeovctb55] { background: var(--status-8-dot); border-color: var(--status-8-dot); }
.planning-bar.s9[b-dbeovctb55] { background: var(--status-9-dot); border-color: var(--status-9-dot); }
.planning-bar.s10[b-dbeovctb55] { background: var(--status-10-dot); border-color: var(--status-10-dot); }
.planning-bar.s11[b-dbeovctb55] { background: var(--status-11-dot); border-color: var(--status-11-dot); }

.planning-section[b-dbeovctb55] {
    margin-bottom: 1rem;
}

.planning-slot[b-dbeovctb55] {
    margin-top: .75rem;
}

.planning-collapse-toggle[b-dbeovctb55] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--begra-dark);
    text-align: left;
    cursor: pointer;
    padding: .25rem 0 .5rem 0;
    font: inherit;
    border-radius: var(--radius-sm);
}

.planning-collapse-toggle:hover[b-dbeovctb55] {
    color: var(--begra-primary-text);
}

.planning-collapse-toggle > span[b-dbeovctb55] {
    color: var(--begra-primary-text);
    font-weight: 700;
    min-width: 1.25rem;
    text-align: right;
}

.planning-item .status-badge[b-dbeovctb55] {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .planning-item[b-dbeovctb55] {
        grid-template-columns: 1fr;
    }

    .planning-item .status-badge[b-dbeovctb55] {
        max-width: 100%;
        justify-self: start;
    }

    /* Alleen de projectnaam blijft staan bij horizontaal scrollen: drie sticky kolommen namen
       276 van de 343px in, waardoor er maar ±3 dagkolommen zichtbaar waren. ID en start scrollen mee. */
    .planning-calendar-table thead th:nth-child(1)[b-dbeovctb55],
    .planning-calendar-table tbody td:nth-child(1)[b-dbeovctb55],
    .planning-calendar-table thead th:nth-child(3)[b-dbeovctb55],
    .planning-calendar-table tbody td:nth-child(3)[b-dbeovctb55] {
        position: static;
    }

    .planning-calendar-table thead th:nth-child(2)[b-dbeovctb55],
    .planning-calendar-table tbody td:nth-child(2)[b-dbeovctb55] {
        left: 0;
        min-width: 110px;
        max-width: 130px;
        border-right: 2px solid var(--begra-gray-200);
    }

    .planning-calendar-table thead th:nth-child(3)[b-dbeovctb55],
    .planning-calendar-table tbody td:nth-child(3)[b-dbeovctb55] {
        min-width: 80px;
        border-right: none;
    }

    .planning-calendar-head[b-dbeovctb55] {
        min-width: 22px;
        padding: .25rem .15rem;
    }

    .planning-calendar-head span[b-dbeovctb55] { font-size: .6875rem; }
    .planning-calendar-head small[b-dbeovctb55] { font-size: .6875rem; }

    .planning-calendar-table th[b-dbeovctb55],
    .planning-calendar-table td[b-dbeovctb55] {
        padding: .3rem .35rem;
    }
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .planning-item[b-dbeovctb55] {
    border-color: var(--begra-gray-300);
}

[data-theme="dark"] .planning-item:hover[b-dbeovctb55] {
    background: var(--begra-surface);
}

[data-theme="dark"] .planning-calendar-table[b-dbeovctb55] {
    background: var(--begra-white);
    border-color: var(--begra-gray-300);
}

[data-theme="dark"] .planning-calendar-table th[b-dbeovctb55],
[data-theme="dark"] .planning-calendar-table td[b-dbeovctb55] {
    border-bottom-color: var(--begra-gray-200);
}

/* Zelfde kopachtergrond als .begra-table th in dark mode (app.css). */
[data-theme="dark"] .planning-calendar-table thead th:nth-child(1)[b-dbeovctb55],
[data-theme="dark"] .planning-calendar-table thead th:nth-child(2)[b-dbeovctb55],
[data-theme="dark"] .planning-calendar-table thead th:nth-child(3)[b-dbeovctb55] {
    background: var(--table-head-bg);
}

[data-theme="dark"] .planning-calendar-table tbody td:nth-child(1)[b-dbeovctb55],
[data-theme="dark"] .planning-calendar-table tbody td:nth-child(2)[b-dbeovctb55],
[data-theme="dark"] .planning-calendar-table tbody td:nth-child(3)[b-dbeovctb55] {
    background: var(--begra-white);
}

[data-theme="dark"] .calendar-row:hover[b-dbeovctb55] {
    background: var(--begra-surface);
}

[data-theme="dark"] .calendar-row:hover td:nth-child(1)[b-dbeovctb55],
[data-theme="dark"] .calendar-row:hover td:nth-child(2)[b-dbeovctb55],
[data-theme="dark"] .calendar-row:hover td:nth-child(3)[b-dbeovctb55] {
    background: var(--begra-surface);
}

[data-theme="dark"] .planning-track-cell[b-dbeovctb55] {
    background: var(--input-bg);
    border-right-color: var(--begra-gray-300);
}

[data-theme="dark"] .planning-calendar-scroll[b-dbeovctb55] {
    background:
        linear-gradient(to right, var(--begra-white) 30%, transparent) left center,
        linear-gradient(to left,  var(--begra-white) 30%, transparent) right center,
        radial-gradient(farthest-side at 0 50%, rgba(255,255,255,.08), transparent) left center,
        radial-gradient(farthest-side at 100% 50%, rgba(255,255,255,.08), transparent) right center;
    background-repeat: no-repeat;
    background-size: 80px 100%, 80px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ── Filters, legenda, groepering per montagebedrijf ───────────────────── */
.planning-filters[b-dbeovctb55] {
    margin-bottom: 1rem;
}

.planning-legend[b-dbeovctb55] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin: 0 0 .75rem;
    font-size: .8125rem;
    color: var(--begra-gray-600);
}

.planning-legend-item[b-dbeovctb55] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* Legenda legt de vorm uit (dicht = gepland, gestippeld = gewenst), niet een kleur: de echte balken
   hebben de statuskleur, dus een blauw voorbeeld suggereerde een betekenis die er niet is. */
.planning-bar-sample[b-dbeovctb55] {
    display: inline-block;
    width: 28px;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--begra-gray-600);
    border: 1px solid var(--begra-gray-600);
}

.planning-bar-sample.is-desired[b-dbeovctb55],
.planning-bar.is-desired[b-dbeovctb55] {
    background: var(--begra-white); /* gewenste periode: holle, gestippelde balk in de statuskleur */
    border-style: dashed;
    border-width: 2px;
}

.planning-bar.is-desired[b-dbeovctb55] {
    opacity: .85;
}

.planning-company[b-dbeovctb55] {
    display: block;
    font-weight: 400;
    font-size: .8125rem;
    color: var(--begra-gray-600);
}

/* Maat uit de gedeelde pill-basis (app.css); omlijnde look zoals .pill-outline (gestippeld = "gewenst"). */
.planning-desired-tag[b-dbeovctb55] {
    margin-left: .4rem;
    background: transparent;
    color: var(--begra-gray-600);
    border: 1px dashed currentColor;
    padding: calc(.125rem - 1px) calc(.55rem - 1px);
}

.planning-group-row th[b-dbeovctb55] {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--begra-gray-100);
    text-align: left;
    font-weight: 700;
    font-size: .875rem;
}

/* De lege cel naast de groepskop mag niet de sticky regels van gewone kalenderrijen (2e kolom) erven. */
.planning-calendar-table tbody tr.planning-group-row td:nth-child(n)[b-dbeovctb55] {
    position: static;
    max-width: none;
    background: var(--begra-gray-100);
}

.planning-busy[b-dbeovctb55] {
    margin: 0 0 .5rem;
    font-size: .8125rem;
    color: var(--begra-gray-600);
}

.planning-group-count[b-dbeovctb55] {
    font-weight: 500;
    color: var(--begra-gray-600);
}

.planning-overlap[b-dbeovctb55] {
    margin-left: .5rem;
    font-weight: 600;
    font-size: .75rem;
    color: var(--tone-danger-fg);
}
/* /Components/Pages/ProjectDetail.razor.rz.scp.css */
.text-muted[b-avpa8fhfzv] {
    color: var(--begra-gray-600);
    font-size: .875rem;
}

/* De "Volgende stap"-hint (.next-step-hint, -ico, -label en de variant --warning) staat globaal in
   wwwroot/app.css: NavProjectChangesPanel en NavProcurementSendPanel gebruiken hem ook, en scoped CSS
   bereikt die kindcomponenten niet. */

/* "Naar …"-link in de volgende-stap-hint: zet de focus op de kop van het hoofdstuk waar de stap over gaat. */
.hint-goto-link[b-avpa8fhfzv] {
    margin-left: .35rem;
    font-weight: 600;
}

/* Statusbanner (On hold): titel, partij, reden en wie/wanneer naast elkaar (met tussenruimte, ook bij afbreken);
   de vervolgstap voor de schrijfrollen staat op een eigen regel daaronder. */
.hint-parts[b-avpa8fhfzv] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .6rem;
}

.hint-extra-line[b-avpa8fhfzv] {
    flex-basis: 100%;
}
/* /Components/Pages/ProjectDetail/ActionErrorMessage.razor.rz.scp.css */
/* Kleiner dan gewone linktekst; scoped zodat hij .btn-link overtroeft (zoals de andere .btn-link-sm in projectdetail). */
.btn-link-sm[b-48ir4vvh0c] {
    font-size: .8rem;
}

.action-error-reload[b-48ir4vvh0c] {
    margin-left: .25rem;
}
/* /Components/Pages/ProjectDetail/MontageRequestAcceptDialog.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this component (scoped CSS does not reach into child components). */

.mail-notice[b-9v3lsfx3qw] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .9rem;
    padding: .55rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--tone-info-bg);
    font-size: .875rem;
    flex-wrap: wrap;
}

.mail-notice svg[b-9v3lsfx3qw] {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--begra-primary-text);
    flex-shrink: 0;
}

.mail-preview-panel[b-9v3lsfx3qw] {
    margin-top: .9rem;
    border: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.mail-preview-panel summary[b-9v3lsfx3qw] {
    cursor: pointer;
    padding: .55rem .75rem;
    font-weight: 600;
    font-size: .875rem;
    background: var(--begra-gray-100);
    user-select: none;
    transition: background-color var(--dur) var(--ease);
}

/* Ring binnen de rand (het paneel knipt met overflow:hidden); 2px --focus-ring-solid zoals overal. */
.mail-preview-panel summary:focus-visible[b-9v3lsfx3qw] {
    outline: 2px solid var(--focus-ring-solid);
    outline-offset: -2px;
}

.mail-preview-body[b-9v3lsfx3qw] {
    padding: .75rem 1rem;
    font-size: .875rem;
    max-height: 260px;
    overflow-y: auto;
    background: var(--begra-white);
    color: var(--begra-dark);
}

[data-theme="dark"] .mail-preview-panel summary[b-9v3lsfx3qw] {
    background: var(--begra-gray-200);
}

[data-theme="dark"] .mail-preview-body[b-9v3lsfx3qw] {
    background: var(--begra-gray-100);
    color: var(--begra-dark);
}
/* /Components/Pages/ProjectDetail/MontageRequestSendDialog.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this component (scoped CSS does not reach into child components). */

/* Kleur uit de globale .text-muted (app.css); hier alleen de kleinere maat voor de toelichtingen in de dialoog. */
.text-muted[b-2h3ew03y66] {
    font-size: .875rem;
}

.mail-notice[b-2h3ew03y66] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: .9rem;
    padding: .55rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--tone-info-bg);
    font-size: .875rem;
    flex-wrap: wrap;
}

.mail-notice svg[b-2h3ew03y66] {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--begra-primary-text);
    flex-shrink: 0;
}

.mail-preview-panel[b-2h3ew03y66] {
    margin-top: .9rem;
    border: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.mail-preview-panel summary[b-2h3ew03y66] {
    cursor: pointer;
    padding: .55rem .75rem;
    font-weight: 600;
    font-size: .875rem;
    background: var(--begra-gray-100);
    user-select: none;
    transition: background-color var(--dur) var(--ease);
}

/* Ring binnen de rand (het paneel knipt met overflow:hidden); 2px --focus-ring-solid zoals overal. */
.mail-preview-panel summary:focus-visible[b-2h3ew03y66] {
    outline: 2px solid var(--focus-ring-solid);
    outline-offset: -2px;
}

.mail-preview-body[b-2h3ew03y66] {
    padding: .75rem 1rem;
    font-size: .875rem;
    max-height: 260px;
    overflow-y: auto;
    background: var(--begra-white);
    color: var(--begra-dark);
}

[data-theme="dark"] .mail-preview-panel summary[b-2h3ew03y66] {
    background: var(--begra-gray-200);
}

[data-theme="dark"] .mail-preview-body[b-2h3ew03y66] {
    background: var(--begra-gray-100);
    color: var(--begra-dark);
}
/* /Components/Pages/ProjectDetail/ProcurementDraftForm.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this component (scoped CSS does not reach into child components). */

/* .card-subdued, .card-inset en .btn-follow komen uit app.css (globaal). */

/* ── Inkoopformulier ────────────────────────────────────────────────────── */
.procurement-form[b-522dhx943u] {
    /* Linkerpadding .25rem: zo gold het voor de opsplitsing door `.chapter-inner > *:not(summary)` (hogere specificiteit, ook op mobiel). */
    padding: 1.75rem 2rem 1.75rem .25rem;
}

.procurement-form .card-subtitle[b-522dhx943u] {
    margin-bottom: 1.5rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--begra-gray-200);
    font-size: 1.0625rem;
}

.procurement-line[b-522dhx943u] {
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.25rem;
    box-shadow: none;
}

.procurement-line .action-row[b-522dhx943u] {
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.procurement-notes > summary[b-522dhx943u] {
    cursor: pointer;
    font-size: .875rem;
    font-weight: 600;
    color: var(--begra-gray-600);
    padding: .25rem 0;
    margin-bottom: .5rem;
}

.procurement-notes > summary:hover[b-522dhx943u] {
    color: var(--begra-dark);
}

.procurement-add[b-522dhx943u] {
    margin-top: 1.5rem;
}

.procurement-actions[b-522dhx943u] {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--begra-gray-200);
    gap: 1rem;
}

/* Tariefkeuze: kaartjes met omschrijving links en prijzen rechts. */
.rate-pick[b-522dhx943u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
}

.rate-pick-item[b-522dhx943u] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .375rem;
    padding: .875rem 1rem;
    text-align: left;
    font: inherit;
    color: var(--begra-dark);
    background: var(--begra-white);
    border: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.rate-pick-item:hover[b-522dhx943u] {
    border-color: var(--begra-primary);
}

/* Focus: de globale 2px :focus-visible-ring (app.css); hier geen eigen zachte ring meer. */

.rate-pick-item.selected[b-522dhx943u] {
    border-color: var(--begra-primary);
    background: var(--tone-info-bg);
    box-shadow: 0 0 0 1px var(--begra-primary);
}

.rate-pick-title[b-522dhx943u] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.rate-pick-country[b-522dhx943u] {
    padding: .0625rem .5rem;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 999px;
    background: var(--tone-neutral-bg);
    color: var(--tone-neutral-fg);
}

.rate-pick-prices[b-522dhx943u] {
    font-size: .8125rem;
    color: var(--begra-gray-600);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .procurement-form[b-522dhx943u] { padding: 1.25rem 1rem 1.25rem .25rem; }
    .procurement-line[b-522dhx943u] { padding: 1rem; }
}
/* /Components/Pages/ProjectDetail/ProcurementNavCell.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this component (scoped CSS does not reach into child components). */

/* Kleur uit de globale .text-muted (app.css); hier alleen de kleinere maat in de drukke NAV-cel. */
.text-muted[b-6hoir1vs2b] {
    font-size: .875rem;
}

/* NAV-inkooporder per inkoopregel: omlijnde pill, kleur volgt de ontvangststatus. */
.nav-po-badge[b-6hoir1vs2b] {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: calc(.125rem - 1px) calc(.55rem - 1px);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--begra-gray-600);
}

.nav-po-badge--done[b-6hoir1vs2b] {
    color: var(--tone-success-fg);
}

.nav-po-badge--open[b-6hoir1vs2b] {
    color: var(--tone-info-fg);
}

.nav-po-badge--warning[b-6hoir1vs2b] {
    color: var(--tone-danger-fg);
}

.nav-po-select[b-6hoir1vs2b] {
    max-width: 14rem;
}

/* Kleiner dan gewone linktekst; scoped zodat hij .btn-link overtroeft (zoals voor de opsplitsing in ProjectDetail). */
.btn-link-sm[b-6hoir1vs2b] {
    font-size: .8rem;
}
/* /Components/Pages/ProjectDetail/ProjectAftercareChapter.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this chapter (scoped CSS does not reach into child components).
   .text-muted and .card-subdued come from app.css (global). */

/* Counter pill in chapter headings and category label in the aftercare list. */
.chapter-badge[b-o6j98j9vat] {
    /* Sizing comes from the shared pill base in app.css; only placement + info tone here. */
    margin-left: .4rem;
    font-variant-numeric: tabular-nums;
    background: var(--tone-info-bg);
    color: var(--tone-info-fg);
    vertical-align: .05em;
}

/* In the aftercare list the pill precedes the description instead of following a title. */
.chapter-badge.aftercare-item-badge[b-o6j98j9vat] {
    margin-left: 0;
    margin-right: .4rem;
}

.aftercare-list[b-o6j98j9vat] {
    list-style: none;
    padding: 0;
    margin: .5rem 0;
    border-top: 1px solid var(--begra-gray-200);
}

.aftercare-item[b-o6j98j9vat] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .5rem;
    border-bottom: 1px solid var(--begra-gray-200);
    transition: background-color var(--dur) var(--ease);
}

.aftercare-item:hover[b-o6j98j9vat] {
    background: var(--begra-gray-100);
}

[data-theme="dark"] .aftercare-item:hover[b-o6j98j9vat] {
    background: var(--hover-bg);
}

.aftercare-item-icon[b-o6j98j9vat] {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
    color: var(--begra-gray-400);
}

.aftercare-item-icon.is-done[b-o6j98j9vat] {
    color: var(--begra-success);
}

.aftercare-item-text[b-o6j98j9vat] {
    flex: 1;
    min-width: 0;
}

.aftercare-item-text.is-done[b-o6j98j9vat] {
    text-decoration: line-through;
    color: var(--begra-gray-500);
}

.aftercare-add-row[b-o6j98j9vat] {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.aftercare-category-select[b-o6j98j9vat] {
    min-width: 140px;
}

/* Category of an open item, changeable in place: compact, in front of the description like the badge it replaces. */
.aftercare-category-inline[b-o6j98j9vat] {
    width: auto;
    max-width: 11rem;
    margin-right: .4rem;
    padding-block: .2rem;
    vertical-align: middle;
}

/* The warning for a deadline in the past takes its own line under the item. */
.aftercare-item.has-warning[b-o6j98j9vat] {
    flex-wrap: wrap;
}

.aftercare-item[b-o6j98j9vat]  .past-date-warning {
    flex-basis: 100%;
}

.aftercare-description-input[b-o6j98j9vat] {
    flex: 1;
    min-width: 200px;
}

/* Aftercare: deadline */
.aftercare-due[b-o6j98j9vat] {
    white-space: nowrap;
}

.aftercare-due-input[b-o6j98j9vat] {
    max-width: 10.5rem;
}

/* Kleiner dan gewone linktekst; scoped zodat hij .btn-link overtroeft (zoals voor de opsplitsing in ProjectDetail). */
.btn-link-sm[b-o6j98j9vat] {
    font-size: .8rem;
}

/* Telefoon: de omschrijving krijgt de volle breedte; deadline, datumveld en knop lopen eronder door
   (anders wordt de omschrijving een smalle kolom van een paar woorden). */
@media (max-width: 640px) {
    .aftercare-item[b-o6j98j9vat] {
        flex-wrap: wrap;
        row-gap: .35rem;
    }

    .aftercare-item-text[b-o6j98j9vat] {
        flex: 1 1 calc(100% - 2rem);
    }
}
/* /Components/Pages/ProjectDetail/ProjectClosingChapter.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this chapter (scoped CSS does not reach into child components). */
/* Kleur uit de globale .text-muted (app.css); hier alleen de kleinere maat voor de toelichting achter "nog te boeken". */
.text-muted[b-fa7ormc1i8] {
    font-size: .875rem;
}

.chapter-check[b-fa7ormc1i8] {
    margin-left: .5rem;
    color: var(--tone-success-fg);
    font-weight: 700;
}

/* Outlined pill (size from the pill base in app.css): the border follows the text colour. */
.nav-cost-badge[b-fa7ormc1i8] {
    background: transparent;
    border: 1px solid currentColor;
    padding: calc(.125rem - 1px) calc(.55rem - 1px);
    color: var(--begra-gray-600);
}

.nav-cost-badge--booked[b-fa7ormc1i8] {
    color: var(--tone-success-fg);
}

/* "Close project" is irreversible: global .btn-begra-danger-outline (app.css); a confirmation dialog comes first. */
.closing-complete-note[b-fa7ormc1i8] {
    color: var(--tone-success-fg);
    font-size: .875rem;
    font-weight: 600;
}
/* /Components/Pages/ProjectDetail/ProjectDocumentsChapter.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this chapter (scoped CSS does not reach into child components).
   .text-muted comes from app.css (global). */

/* Count suffix in the chapter title, e.g. "Drawings (3)". */
.summary-count[b-lekdrg4f43] {
    color: var(--begra-gray-600);
    font-weight: 500;
}

/* Drawings: upload row and actions per tile */
.doc-upload-row[b-lekdrg4f43] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0.5rem 0;
}

.doc-item[b-lekdrg4f43] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.doc-actions[b-lekdrg4f43] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
}

.doc-type-select[b-lekdrg4f43] {
    max-width: 100%;
}

/* Bevestigingsvraag bij verwijderen: over de volle breedte boven de knoppen. */
.doc-delete-question[b-lekdrg4f43] {
    flex-basis: 100%;
    font-size: .8125rem;
    font-weight: 600;
}

/* Kleiner dan gewone linktekst; scoped zodat hij .btn-link overtroeft (zoals voor de opsplitsing in ProjectDetail). */
.btn-link-sm[b-lekdrg4f43] {
    font-size: .8rem;
}
/* /Components/Pages/ProjectDetail/ProjectGeneralChapter.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this chapter (scoped CSS does not reach into child components). */
/* Kleur uit de globale .text-muted (app.css); hier alleen de kleinere maat voor de toelichtingen onder een veld. */
.text-muted[b-4wl5bappgz] {
    font-size: .875rem;
}

.map-link-icon[b-4wl5bappgz] {
    display: inline-flex;
    margin-left: .4rem;
    color: var(--begra-primary-text);
    vertical-align: -.15em;
}

.map-link-icon svg[b-4wl5bappgz] {
    width: 1.1rem;
    height: 1.1rem;
}

.map-link-icon:hover[b-4wl5bappgz] {
    color: var(--begra-primary);
}

.project-map-frame[b-4wl5bappgz] {
    width: 100%;
    height: 260px;
    margin-top: .5rem;
    border: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* NavSyncBadge rendert zijn eigen element (kindcomponent): zonder ::deep bereikte deze regel het nooit. */
.chapter[b-4wl5bappgz]  .summary-nav-badge {
    margin-left: .5rem;
}

.map-no-location[b-4wl5bappgz] {
    margin: .25rem 0 0;
}

.nav-diff-hint[b-4wl5bappgz] {
    margin-left: .375rem;
    color: var(--begra-gray-500);
    font-size: .8125rem;
}

/* Outlined pill (size from the pill base in app.css): the border follows the text colour. */
.nav-cost-badge[b-4wl5bappgz] {
    background: transparent;
    border: 1px solid currentColor;
    padding: calc(.125rem - 1px) calc(.55rem - 1px);
    color: var(--begra-gray-600);
}

.nav-cost-badge--booked[b-4wl5bappgz] {
    color: var(--tone-success-fg);
}
/* /Components/Pages/ProjectDetail/ProjectHeaderBar.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this component (scoped CSS does not reach into child components). */

/* Iconen in de knoppenbalk (page-header-actions) — geen margin-right nodig, de knoppen
   zelf hebben al gap:.5rem tussen icoon en tekst (app.css). */
.header-action-ico[b-wf8o3vsflq] {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

/* ── Paginakop ──────────────────────────────────────────────────────────── */
/* Statusregel onder de titel: badge(s) + plaats, verticaal gecentreerd i.p.v. losse inline-tekst. */
.header-status-line[b-wf8o3vsflq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .375rem 0 0;
    font-size: .9375rem;
    color: var(--begra-gray-600);
}

/* Annuleren: compact en rechts uitgelijnd i.p.v. een volle regel onder de andere knoppen. */
.page-header-actions > .header-action-cancel[b-wf8o3vsflq] {
    flex: 0 0 auto;
    margin-left: auto;
}

/* "Meer" bestaat alleen op een telefoon (zie hieronder). */
.page-header-actions > .header-action-more[b-wf8o3vsflq] {
    display: none;
}

/* Telefoon: alleen de primaire actie (status, hervatten, heractiveren, terugzetten) blijft als knop staan;
   de overige acties staan in het menu achter "Meer", anders vult de kop vijf regels. */
@media (max-width: 640px) {
    .page-header-actions > .header-action-secondary[b-wf8o3vsflq] {
        display: none;
    }

    .page-header-actions > .header-action-more[b-wf8o3vsflq] {
        display: inline-flex;
    }
}
/* /Components/Pages/ProjectDetail/ProjectLifecycleDialogs.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this component (scoped CSS does not reach into child components). */

/* Validatiemelding onder een formulier(grid) — iets meer lucht dan de standaard .375rem. */
.msg-below[b-c8qddf1l22] {
    margin-top: .5rem;
}

/* Waarschuwing bij een stap terug in de statusflow (6→5, 8→7) of het heropenen van een gesloten project. */
.status-back-warning[b-c8qddf1l22] {
    margin: 1rem 0 0;
    padding: .55rem .75rem;
    border-left: 3px solid currentColor;
    border-radius: var(--radius-sm);
    background: var(--tone-warning-bg);
    color: var(--tone-warning-fg);
    font-size: .875rem;
    line-height: 1.45;
}
/* /Components/Pages/ProjectDetail/ProjectMontageRequestsSection.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this component (scoped CSS does not reach into child components). */

.chapter-inner[b-ovkfbv3jf5] {
    border-top: 1px solid var(--begra-gray-200);
    margin-top: .5rem;
    padding-top: .5rem;
}

.chapter-inner:first-child[b-ovkfbv3jf5] {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.chapter-inner > summary[b-ovkfbv3jf5] {
    cursor: pointer;
    padding: .45rem .25rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .35rem;
    user-select: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur) var(--ease);
}

/* Focus: de globale 2px :focus-visible-ring (app.css). */

.chapter-inner > summary[b-ovkfbv3jf5]::-webkit-details-marker { display: none; }

/* Chevron komt uit app.css (details.chapter-inner deelt de draaiende chevron met details.chapter);
   hier alleen iets kleiner omdat het een subkop is. */
.chapter-inner > summary[b-ovkfbv3jf5]::before {
    width: 16px;
    height: 16px;
}

.chapter-inner > summary:hover[b-ovkfbv3jf5] {
    background: var(--begra-gray-100);
}

.chapter-inner > *:not(summary)[b-ovkfbv3jf5] {
    padding-left: .25rem;
}

.montage-send-summary[b-ovkfbv3jf5] {
    margin-left: .35rem;
    color: var(--begra-gray-600);
    font-weight: 600;
}

/* Groene tekst via --tone-success-fg: --begra-success haalt als tekst maar 3.2:1. */
.montage-send-summary.all-sent[b-ovkfbv3jf5] {
    color: var(--tone-success-fg);
}

.montage-request-title-accepted[b-ovkfbv3jf5] {
    color: var(--tone-success-fg);
}

.chapter-check[b-ovkfbv3jf5] {
    margin-left: .5rem;
    color: var(--tone-success-fg);
    font-weight: 700;
}

/* Rijkleur per aanvraagstatus. De rijen en cellen rendert DataGrid (een kindcomponent): zonder ::deep
   bereikt deze scoped CSS ze niet (de regels deden daarom nooit iets). */
.chapter-inner[b-ovkfbv3jf5]  .montage-request-row-sent td {
    background: color-mix(in srgb, var(--begra-success) 12%, var(--begra-white));
}

.chapter-inner[b-ovkfbv3jf5]  .montage-request-row-cancelled td {
    background: color-mix(in srgb, var(--begra-gray-200) 45%, var(--begra-white));
}

.chapter-inner[b-ovkfbv3jf5]  .montage-request-row-accepted td {
    background: color-mix(in srgb, var(--begra-success) 20%, var(--begra-white));
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .chapter-inner[b-ovkfbv3jf5]  .montage-request-row-sent td {
    background: rgba(0, 166, 81, .12);
}

[data-theme="dark"] .chapter-inner[b-ovkfbv3jf5]  .montage-request-row-cancelled td {
    background: var(--hover-bg);
}

[data-theme="dark"] .chapter-inner[b-ovkfbv3jf5]  .montage-request-row-accepted td {
    background: rgba(0, 166, 81, .18);
}

/* .btn-follow (tweede/derde knop in een actiecel) komt uit app.css (globaal). */

/* Het ✉-icoon staat in een DataGrid-cel (template van deze component, dus wel gescoped). */
.reply-received-icon[b-ovkfbv3jf5] {
    margin-left: .35rem;
    color: var(--begra-success);
}

.card-inline[b-ovkfbv3jf5] {
    margin: .75rem 0;
}

.form-grid-options[b-ovkfbv3jf5] {
    margin-top: .5rem;
}
/* /Components/Pages/ProjectDetail/ProjectProcurementCategorySection.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this component (scoped CSS does not reach into child components). */

.chapter-inner[b-fzjckd6kzp] {
    border-top: 1px solid var(--begra-gray-200);
    margin-top: .5rem;
    padding-top: .5rem;
}

.chapter-inner:first-child[b-fzjckd6kzp] {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.chapter-inner > summary[b-fzjckd6kzp] {
    cursor: pointer;
    padding: .45rem .25rem;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .35rem;
    user-select: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur) var(--ease);
}

/* Focus: de globale 2px :focus-visible-ring (app.css). */

/* The marker rule of the summary is written on one line in the original. */
.chapter-inner > summary[b-fzjckd6kzp]::-webkit-details-marker { display: none; }

/* Chevron komt uit app.css (details.chapter-inner deelt de draaiende chevron met details.chapter);
   hier alleen iets kleiner omdat het een subkop is. */
.chapter-inner > summary[b-fzjckd6kzp]::before {
    width: 16px;
    height: 16px;
}

.chapter-inner > summary:hover[b-fzjckd6kzp] {
    background: var(--begra-gray-100);
}

.chapter-inner > *:not(summary)[b-fzjckd6kzp] {
    padding-left: .25rem;
}

/* Teller-pill in hoofdstukkoppen (aantal inkoopregels). */
.chapter-badge[b-fzjckd6kzp] {
    /* Maatvoering uit de gedeelde pill-basis in app.css; hier alleen plaatsing + info-tone. */
    margin-left: .4rem;
    font-variant-numeric: tabular-nums;
    background: var(--tone-info-bg);
    color: var(--tone-info-fg);
    vertical-align: .05em;
}

.procurement-title-present[b-fzjckd6kzp] {
    color: var(--tone-success-fg);
}

/* Groene rij voor een ingekochte regel. Rij en cellen rendert DataGrid (een kindcomponent): zonder ::deep
   bereikt deze scoped CSS ze niet (de regel deed daarom nooit iets). */
.chapter-inner[b-fzjckd6kzp]  .procurement-row-purchased td {
    background: color-mix(in srgb, var(--begra-success) 18%, var(--begra-white));
}

[data-theme="dark"] .chapter-inner[b-fzjckd6kzp]  .procurement-row-purchased td {
    background: rgba(0, 166, 81, .18);
}

/* .card-subdued, .card-inset en .btn-follow komen uit app.css (globaal). */

/* Undo-melding na verwijderen van een inkoopregel: tekst + knop op één regel. */
.undo-notice[b-fzjckd6kzp] {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ── Tabellen ───────────────────────────────────────────────────────────── */
/* Bedragkolommen rechts uitgelijnd met gelijke cijferbreedte. DataGrid zet CellClass/HeaderClass "cell-num" op zijn eigen
   th/td (kindcomponent), dus via ::deep. */
.chapter-inner[b-fzjckd6kzp]  .cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* /Components/Pages/ProjectDetail/ProjectProcurementChapter.razor.rz.scp.css */
/* Rules copied from ProjectDetail.razor.css for the classes used in this component (scoped CSS does not reach into child components). */

/* Kop en openklappen komen uit de gedeelde details.chapter-regels (app.css); hier alleen de extra's. */
.chapter-procurement-tools[b-koz274j4im] {
    display: flex;
    justify-content: flex-end;
    margin: -.25rem 0 .25rem;
}

.montage-request-title-accepted[b-koz274j4im] {
    color: var(--tone-success-fg);
}

.montage-send-summary[b-koz274j4im] {
    margin-left: .35rem;
    color: var(--begra-gray-600);
    font-weight: 600;
}

/* Groene tekst via --tone-success-fg: --begra-success haalt als tekst maar 3.2:1. */
.montage-send-summary.all-sent[b-koz274j4im] {
    color: var(--tone-success-fg);
}

.chapter-check[b-koz274j4im] {
    margin-left: .5rem;
    color: var(--tone-success-fg);
    font-weight: 700;
}

/* Teller-pill in hoofdstukkoppen (aantal inkoopregels) en categorie-label in de nazorglijst. */
.chapter-badge[b-koz274j4im] {
    /* Maatvoering uit de gedeelde pill-basis in app.css; hier alleen plaatsing + info-tone. */
    margin-left: .4rem;
    font-variant-numeric: tabular-nums;
    background: var(--tone-info-bg);
    color: var(--tone-info-fg);
    vertical-align: .05em;
}

/* Montage aangevraagd (vinkje + "x dagen geleden") */
.montage-requested-row[b-koz274j4im] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm, 0.5rem) var(--space-md, 1rem);
    margin: 0.5rem 0;
}

.msg-tight[b-koz274j4im] {
    margin: .35rem 0 0;
}

/* .card-subdued en .card-inset (prullenbak) komen uit app.css (globaal). */

/* ── Tabellen ───────────────────────────────────────────────────────────── */
/* Bedragkolommen rechts uitgelijnd met gelijke cijferbreedte (prullenbak). DataGrid rendert de th/td zelf (kindcomponent), dus via ::deep. */
.chapter-procurement[b-koz274j4im]  .cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Kleiner dan gewone linktekst; scoped zodat hij .btn-link overtroeft (zoals voor de opsplitsing in ProjectDetail). */
.btn-link-sm[b-koz274j4im] {
    font-size: .8rem;
}
/* /Components/Pages/ProjectDetail/ProjectStatusStepper.razor.rz.scp.css */
/* Statusstepper: genummerde stippen verbonden door een lijn; afgerond = groen vinkje, huidig = primair, nog niet = grijze rand.
   Kleuren uit de tokens, dus licht en donker volgen vanzelf (--primary-fill haalt in donker 3:1). */
.status-stepper[b-v28txf7ne4] {
    margin: .25rem 0 1rem;
    overflow-x: auto;
}

.status-stepper ol[b-v28txf7ne4] {
    display: flex;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    min-width: max-content;
}

.step[b-v28txf7ne4] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    flex: 1 1 0;
    min-width: 5.5rem;
    padding: 0 .25rem;
    text-align: center;
    font-size: .8125rem;
    color: var(--begra-gray-600);
}

/* Verbindingslijn naar de vorige stap (van midden tot midden, achter de stippen). */
.step + .step[b-v28txf7ne4]::before {
    content: "";
    position: absolute;
    top: .8125rem;
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--begra-gray-300);
    z-index: 0;
}

.step--done + .step[b-v28txf7ne4]::before,
.step--done + .step--current[b-v28txf7ne4]::before {
    background: var(--begra-success);
}

.step-dot[b-v28txf7ne4] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-pill, 999px);
    border: 2px solid var(--begra-gray-300);
    background: var(--begra-white);
    color: var(--begra-gray-600);
    font-weight: 700;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.step--done .step-dot[b-v28txf7ne4] {
    border-color: var(--begra-success);
    background: var(--begra-success);
    color: var(--on-primary, #fff);
}

.step--current[b-v28txf7ne4] {
    color: var(--begra-dark);
    font-weight: 600;
}

.step--current .step-dot[b-v28txf7ne4] {
    border-color: var(--primary-fill, var(--begra-primary));
    background: var(--primary-fill, var(--begra-primary));
    color: var(--on-primary, #fff);
    box-shadow: 0 0 0 4px var(--primary-soft, var(--begra-primary-light));
}

/* Donker: het lichtere --primary-fill (#2680D8) haalt met wit maar 4,07:1 en het lichtere groen nog minder; donkere tekst en
   vinkjes geven daar ruim voldoende contrast. */
[data-theme="dark"] .step--current .step-dot[b-v28txf7ne4],
[data-theme="dark"] .step--done .step-dot[b-v28txf7ne4] {
    color: var(--begra-gray-100);
}

/* Gesloten is de eindstatus: als huidige stap toont hij een vinkje in het groen. */
.step--current[data-status="ProjectGesloten"] .step-dot[b-v28txf7ne4] {
    border-color: var(--begra-success);
    background: var(--begra-success);
    box-shadow: none;
}

/* On hold: de stap waar het project stilligt, in de waarschuwingstoon. */
.step--held .step-dot[b-v28txf7ne4] {
    border-color: var(--tone-warning-fg);
    background: var(--tone-warning-bg);
    color: var(--tone-warning-fg);
    box-shadow: none;
}

/* Diensten openstaand is alleen nodig bij open nazorg- of inspectiepunten: gestippeld zolang hij nog niet bereikt is. */
.step--optional .step-dot[b-v28txf7ne4] {
    border-style: dashed;
}

.step-flag[b-v28txf7ne4] {
    font-size: .75rem;
}

/* Geannuleerd: gedempt, de stap zelf houdt zijn label. */
.status-stepper.is-muted .step:not(.step--current)[b-v28txf7ne4] {
    opacity: .55;
}

/* Telefoon: alleen het label van de huidige stap; de rest blijft als genummerde stip zichtbaar. */
@media (max-width: 640px) {
    .step[b-v28txf7ne4] {
        min-width: 2.75rem;
    }

    .step:not(.step--current) .step-label[b-v28txf7ne4] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .status-stepper ol[b-v28txf7ne4] {
        min-width: 0;
    }
}
/* /Components/Pages/ProjectEdit.razor.rz.scp.css */
/* ── Formulier-layout (voorheen inline style-attributen) ─────────────────── */

/* NAV-gekoppeld: velden zijn read-only — hint als ingetogen infostrook onder de sectiekop.
   Selector bewust specifiek (h2:first-child:not(.no-divider) + …): anders wint de globale
   ".begra-card>h2:first-child:not(.no-divider)+p"-regel uit app.css op kleur en marge. */
.begra-card > h2:first-child:not(.no-divider) + .nav-linked-hint[b-e0c7959hgk] {
    margin: -.25rem 0 1.125rem;
    padding: .625rem .875rem;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--begra-primary-text);
    background: var(--begra-primary-light);
    border: 1px solid color-mix(in srgb, var(--begra-primary) 18%, transparent);
    border-left: 3px solid var(--begra-primary);
    border-radius: var(--radius-sm);
}

[data-theme="dark"] .begra-card > h2:first-child:not(.no-divider) + .nav-linked-hint[b-e0c7959hgk] {
    color: var(--begra-dark);
    background: var(--primary-soft);
    border-color: color-mix(in srgb, var(--begra-primary-text) 30%, transparent);
    border-left-color: var(--begra-primary-text);
}

/* Twee kolommen op brede schermen: minder scrollen; op smal scherm gestapeld. */
.form-columns[b-e0c7959hgk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.form-column[b-e0c7959hgk] {
    min-width: 0;
}

@media (max-width: 1024px) {
    .form-columns[b-e0c7959hgk] {
        grid-template-columns: 1fr;
    }

    .form-column + .form-column[b-e0c7959hgk] {
        margin-top: 1.25rem;
    }
}

/* Veld over de volle breedte van het .form-grid (werkomschrijving). */
.form-grid-full[b-e0c7959hgk] {
    grid-column: 1 / -1;
}

/* Tweede grid direct onder de radio-keuze (datum/weeknummer): kleinere tussenruimte. */
.form-grid-follow[b-e0c7959hgk] {
    margin-top: .5rem;
}

/* ── Documententabel ─────────────────────────────────────────────────────── */
.doc-table-scroll[b-e0c7959hgk] {
    margin-top: 1rem;
}

.doc-type-cell[b-e0c7959hgk] {
    white-space: nowrap;
    color: var(--begra-gray-900);
}

.doc-filename[b-e0c7959hgk] {
    word-break: break-word;
}

.doc-meta-cell[b-e0c7959hgk] {
    white-space: nowrap;
    color: var(--begra-gray-600);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
}

/* Downloaden/Verwijderen naast elkaar, rechts uitgelijnd en niet-wrappend. */
.doc-actions[b-e0c7959hgk] {
    white-space: nowrap;
    text-align: right;
}

.doc-actions a[b-e0c7959hgk] {
    font-weight: 600;
}

.doc-actions .link-button[b-e0c7959hgk] {
    color: var(--tone-danger-fg);
    font-size: .9375rem;
    padding-left: 1rem;
    border-radius: var(--radius-sm);
}

.doc-actions .link-button:not(:disabled):hover[b-e0c7959hgk] {
    text-decoration-thickness: 2px;
}

.doc-actions .link-button:disabled[b-e0c7959hgk] {
    cursor: wait;
    opacity: .6;
}

/* ── Mobiel ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .form-grid-follow[b-e0c7959hgk] {
        grid-template-columns: 1fr;
    }

    /* Tabel blijft horizontaal scrollbaar binnen de kaart; compactere cellen. */
    .doc-table-scroll[b-e0c7959hgk] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .doc-table-scroll table[b-e0c7959hgk] {
        min-width: 32rem;
    }

    .doc-actions .link-button[b-e0c7959hgk] {
        padding-left: .5rem;
    }
}

/* ── Compacte velden in halve kolommen ───────────────────────────────────── */
.form-grid-compact[b-e0c7959hgk] {
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 1rem;
}

/* Brede velden (straat, werkomschrijving) over de volle breedte van het compacte grid. */
.form-grid-compact .form-grid-full[b-e0c7959hgk] {
    grid-column: 1 / -1;
}

.scope-chips[b-e0c7959hgk] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.scope-chips label.checkbox[b-e0c7959hgk] {
    padding: .375rem .75rem;
    min-height: 38px;
}

/* Touch: terug naar de 44px van de globale chip-regel (deze compacte variant won daar anders van). */
@media (pointer: coarse), (max-width: 768px) {
    .scope-chips label.checkbox[b-e0c7959hgk] {
        min-height: var(--control-h-touch);
    }
}

/* Inklapbare documentenkaart bij nieuw project. */
.card-collapse-summary[b-e0c7959hgk] {
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 600;
    list-style-position: inside;
    border-radius: var(--radius-sm);
}

.card-collapse[open] > .card-collapse-summary[b-e0c7959hgk] {
    margin-bottom: .75rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--begra-gray-200);
}

.card-collapse-hint[b-e0c7959hgk] {
    margin: 0 0 1rem;
    font-size: .875rem;
    color: var(--begra-gray-600);
}

/* Ongeldige velden (aria-invalid): één globale stijl in app.css. */
/* /Components/Pages/Projects.razor.rz.scp.css */
/* ── Filter bar ──────────────────────────────────────────────────────────── */
.projects-filter-bar[b-kmiyvqt387] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

/* ── Status tabs met kleuren ─────────────────────────────────────────────── */
/* Vorm, hover, aan-staat (Alles/Lopend), focusring en touchmaat komen uit de gedeelde chipstijl in
   app.css (.status-tabs button); hier alleen de statuskleur per tab en de gekleurde dot. */
.status-tab[b-kmiyvqt387] {
    white-space: nowrap;
}

.running-tab .tab-dot[b-kmiyvqt387] { background: var(--begra-primary); }
/* Geannuleerd: geen statusstip; actief in de danger-toon zodat duidelijk is dat de lijst nu alleen geannuleerde projecten toont. */
.cancelled-tab.active[b-kmiyvqt387] { background: var(--tone-danger-bg); border-color: var(--tone-danger-fg); color: var(--tone-danger-fg); }

/* Gekleurde dot per status */
.tab-dot[b-kmiyvqt387] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Status-specifieke dot + actief — kleuren (incl. contrastcorrecties) komen uit de
   --status-N-bg/-fg/-dot-tokens in app.css; hier alleen de koppeling per status.
   Status 2 en 3 bestaan niet meer; 11 = Verwijderd (uit NAV). */
.status-tab-s1[b-kmiyvqt387]  { --tab-bg: var(--status-1-bg);  --tab-fg: var(--status-1-fg);  --tab-dot: var(--status-1-dot); }
.status-tab-s4[b-kmiyvqt387]  { --tab-bg: var(--status-4-bg);  --tab-fg: var(--status-4-fg);  --tab-dot: var(--status-4-dot); }
.status-tab-s5[b-kmiyvqt387]  { --tab-bg: var(--status-5-bg);  --tab-fg: var(--status-5-fg);  --tab-dot: var(--status-5-dot); }
.status-tab-s6[b-kmiyvqt387]  { --tab-bg: var(--status-6-bg);  --tab-fg: var(--status-6-fg);  --tab-dot: var(--status-6-dot); }
.status-tab-s7[b-kmiyvqt387]  { --tab-bg: var(--status-7-bg);  --tab-fg: var(--status-7-fg);  --tab-dot: var(--status-7-dot); }
.status-tab-s8[b-kmiyvqt387]  { --tab-bg: var(--status-8-bg);  --tab-fg: var(--status-8-fg);  --tab-dot: var(--status-8-dot); }
.status-tab-s9[b-kmiyvqt387]  { --tab-bg: var(--status-9-bg);  --tab-fg: var(--status-9-fg);  --tab-dot: var(--status-9-dot); }
.status-tab-s10[b-kmiyvqt387] { --tab-bg: var(--status-10-bg); --tab-fg: var(--status-10-fg); --tab-dot: var(--status-10-dot); }
.status-tab-s11[b-kmiyvqt387] { --tab-bg: var(--status-11-bg); --tab-fg: var(--status-11-fg); --tab-dot: var(--status-11-dot); }

.status-tab[class*="status-tab-s"] .tab-dot[b-kmiyvqt387] { background: var(--tab-dot); }
.status-tab[class*="status-tab-s"].active[b-kmiyvqt387] { background: var(--tab-bg); border-color: var(--tab-bg); color: var(--tab-fg); }
/* Actieve dot volgt de tekstkleur (wit of donker) zodat hij op elke statusachtergrond zichtbaar blijft. */
.status-tab.active .tab-dot[b-kmiyvqt387] { background: currentColor; opacity: .75; }

/* ── Zoekbalk ────────────────────────────────────────────────────────────── */
.projects-search[b-kmiyvqt387] {
    position: relative;
    max-width: 480px;
}

.projects-search .search-icon[b-kmiyvqt387] {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    pointer-events: none;
    color: var(--begra-gray-600);
}

.projects-search input[b-kmiyvqt387] {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--input-bg);
}

.projects-search input:focus[b-kmiyvqt387] {
    border-color: var(--begra-primary);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.search-clear[b-kmiyvqt387] {
    position: absolute;
    right: .625rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--begra-gray-600);
    font-size: 1rem;
    padding: .25rem;
    line-height: 1;
    min-height: 0;
    border-radius: var(--radius-sm);
    transition: color var(--dur) var(--ease);
}

.search-clear:hover[b-kmiyvqt387] { color: var(--begra-dark); }

/* Touch: klikvlak van het wis-kruisje naar 44px zonder het veld te verbreden. */
@media (pointer: coarse), (max-width: 768px) {
    .search-clear[b-kmiyvqt387]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
}

/* ── Laadfout-banner (voorheen inline margin/margin-left) ─────────────────── */
.projects-load-error[b-kmiyvqt387] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.projects-load-error-retry[b-kmiyvqt387] {
    margin-left: auto;
}

/* ── Tabel verbeteringen ─────────────────────────────────────────────────── */
.projects-table .col-number[b-kmiyvqt387] { font-weight: 600; color: var(--begra-primary-dark); font-size: .875rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* --begra-primary-dark (#003E80) is amper te onderscheiden op de donkere tabelachtergrond (1.76:1).
   Blazor-CSS-isolatie kent geen :global(); een gewone voorouderselector werkt wel, want het scope-attribuut komt alleen op het laatste deel. */
[data-theme="dark"] .projects-table .col-number[b-kmiyvqt387] { color: var(--begra-primary-text); }
.projects-table .col-date[b-kmiyvqt387]  { white-space: nowrap; color: var(--begra-gray-600); font-size: .875rem; font-variant-numeric: tabular-nums; }
.projects-table .col-city[b-kmiyvqt387]  { color: var(--begra-gray-900); }
.projects-table .col-status[b-kmiyvqt387] { white-space: nowrap; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.projects-footer[b-kmiyvqt387] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .75rem;
    font-size: .875rem;
    color: var(--begra-gray-600);
    flex-wrap: wrap;
    gap: .5rem;
    font-variant-numeric: tabular-nums;
}

/* Paginering rechts uitgelijnd in de footer (voorheen inline flex + margin-left:auto). */
.projects-pager[b-kmiyvqt387] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.projects-pager .pager-info[b-kmiyvqt387] {
    margin: 0;
}

/* Tabelrij hover in dark mode: zorg voor leesbare tekst */
[data-theme="dark"] .projects-table tbody tr.clickable:hover td[b-kmiyvqt387] {
    color: var(--begra-dark);
}

/* ── Inklapbare filters (alleen zichtbaar/actief op mobiel) ─────────────────── */
.status-tabs-toggle[b-kmiyvqt387] {
    display: none;
}

/* ── Compacter op mobiel ──────────────────────────────────────────────────── */
/* Alleen smallere padding: de hoogte blijft 44px uit het touch-blok in app.css (was hier 30px). */
@media (max-width: 480px) {
    .status-tabs[b-kmiyvqt387] { gap: .3rem; }

    .status-tab[b-kmiyvqt387] {
        padding: .25rem .625rem;
        gap: .3rem;
    }

    .tab-dot[b-kmiyvqt387] { width: 6px; height: 6px; }

    .status-tabs-toggle[b-kmiyvqt387] {
        display: flex;
        align-items: center;
        gap: .5rem;
        width: 100%;
        min-height: var(--control-h-touch);
        background: var(--begra-white);
        border: 1px solid var(--begra-gray-300);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-sm);
        padding: .5rem .75rem;
        font-weight: 600;
        font-size: .8125rem;
        color: var(--begra-dark);
        cursor: pointer;
        transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }

    .status-tabs-toggle:hover[b-kmiyvqt387] {
        background: var(--begra-gray-100);
        border-color: var(--begra-gray-400);
    }

    .status-tabs-toggle-caret[b-kmiyvqt387] {
        margin-left: auto;
        font-size: .6875rem;
        color: var(--begra-gray-600);
    }

    /* .filter-count-badge: maat + kleur uit de gedeelde tellerbadge-spec in app.css. */

    .status-tabs-collapsed[b-kmiyvqt387] {
        display: none;
    }
}

[data-theme="dark"] .status-tabs-toggle[b-kmiyvqt387] {
    background: var(--begra-surface);
    border-color: var(--begra-gray-300);
    color: var(--begra-dark);
}

[data-theme="dark"] .status-tabs-toggle:hover[b-kmiyvqt387] {
    background: var(--surface-hover);
    border-color: var(--border-hover);
}
/* /Components/Pages/Reports.razor.rz.scp.css */
/* ---- KPI cards ---- */
.kpi-grid[b-dad0wi9i1b] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
    .kpi-grid[b-dad0wi9i1b] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .kpi-grid[b-dad0wi9i1b] { grid-template-columns: 1fr; }
}

/* KPI-tegel: groot tabelcijfer bovenaan, ingetogen label eronder; subtiele accentstreep links
   die bij een alert rood kleurt. */
.kpi-card[b-dad0wi9i1b] {
    position: relative;
    text-align: left;
    padding: 1.125rem 1.25rem 1.125rem 1.375rem;
    overflow: hidden;
}

.kpi-card[b-dad0wi9i1b]::before {
    content: "";
    position: absolute;
    left: 0;
    top: .875rem;
    bottom: .875rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary-fill);
    opacity: .85;
}

.kpi-card--alert[b-dad0wi9i1b] {
    border-color: rgba(229, 57, 53, .45);
    background: linear-gradient(180deg, rgba(229, 57, 53, .05), transparent 60%), var(--begra-white);
}

.kpi-card--alert[b-dad0wi9i1b]::before {
    background: var(--begra-red);
}

.kpi-value[b-dad0wi9i1b] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--begra-gray-900);
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.kpi-card--alert .kpi-value[b-dad0wi9i1b] {
    color: var(--tone-danger-fg);
}

.kpi-label[b-dad0wi9i1b] {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--begra-gray-600);
    margin-top: .375rem;
}

/* ---- Charts row ---- */
.charts-row[b-dad0wi9i1b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 1024px) {
    .charts-row[b-dad0wi9i1b] { grid-template-columns: 1fr; }
}

.chart-card[b-dad0wi9i1b] {
    display: flex;
    flex-direction: column;
}

.chart-card h2[b-dad0wi9i1b] {
    margin-bottom: 1rem;
}

/* ---- Donut chart ---- */
.donut-wrapper[b-dad0wi9i1b] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.donut-svg[b-dad0wi9i1b] {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
}

/* Cijfer + label in het midden van de donut (voorheen inline font-family): gewoon het
   paginalettertype; ::deep omdat SVG-<text> geen CSS-isolatie-attribuut krijgt. */
.donut-svg[b-dad0wi9i1b]  .donut-text {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

.donut-legend[b-dad0wi9i1b] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .8125rem;
}

.donut-legend li[b-dad0wi9i1b] {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.donut-legend .legend-empty[b-dad0wi9i1b] {
    opacity: .45;
}

.legend-dot[b-dad0wi9i1b] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-label[b-dad0wi9i1b] {
    flex: 1;
    color: var(--begra-gray-900);
}

.legend-count[b-dad0wi9i1b] {
    font-weight: 600;
    min-width: 1.5rem;
    text-align: right;
    color: var(--begra-dark);
    font-variant-numeric: tabular-nums;
}

/* ---- Horizontal bar chart ---- */
.bar-chart[b-dad0wi9i1b] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bar-group[b-dad0wi9i1b] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.bar-cat-label[b-dad0wi9i1b] {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--begra-gray-900);
}

.bar-count[b-dad0wi9i1b] {
    font-weight: 400;
    color: var(--begra-gray-600);
}

.bar-item[b-dad0wi9i1b] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.bar-dot[b-dad0wi9i1b] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* --primary-fill: in dark haalde --begra-primary op de track maar 2.3:1; legenda (dot) = balk (fill). */
.bar-dot--price[b-dad0wi9i1b]    { background: var(--primary-fill); }
.bar-dot--purchase[b-dad0wi9i1b] { background: var(--begra-orange); }

.bar-track[b-dad0wi9i1b] {
    flex: 1;
    height: 10px;
    background: var(--begra-gray-200);
    border-radius: 999px;
    overflow: hidden;
}

.bar-fill[b-dad0wi9i1b] {
    height: 100%;
    border-radius: 999px;
    min-width: 2px;
    transition: width var(--dur-slow) var(--ease);
}

.bar-fill--price[b-dad0wi9i1b]    { background: var(--primary-fill); }
.bar-fill--purchase[b-dad0wi9i1b] { background: var(--begra-orange); }

.bar-amount[b-dad0wi9i1b] {
    font-size: .75rem;
    min-width: 5rem;
    text-align: right;
    color: var(--begra-gray-900);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bar-legend-row[b-dad0wi9i1b] {
    display: flex;
    gap: 1.25rem;
    font-size: .75rem;
    color: var(--begra-gray-600);
    margin-top: .25rem;
}

.bar-legend-row span[b-dad0wi9i1b] {
    display: flex;
    align-items: center;
    gap: .35rem;
}

/* ---- Tables ---- */
/* .section-card(-header/-title/-actions) en .section-sub staan globaal in app.css: ook de losse
   rapportcomponenten (ChatResponseReport, NavInvoicingReport, NavMancoReport) gebruiken ze. */

.export-error[b-dad0wi9i1b] {
    margin: .5rem 0 0;
}

/* ---- Throughput badge ---- */
/* Maatvoering uit de gedeelde pill-basis in app.css; kleuren via tone-tokens (ook dark mode). */
.days-badge--ok[b-dad0wi9i1b]   { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.days-badge--mid[b-dad0wi9i1b]  { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.days-badge--high[b-dad0wi9i1b] { background: var(--tone-danger-bg);  color: var(--tone-danger-fg); }

/* ---- Count badge ---- */
/* .count-badge: maat + kleur uit de gedeelde tellerbadge-spec in app.css. */

/* .empty-hint is verplaatst naar wwwroot/app.css (globaal, ook gebruikt door Home.razor). */

/* ---- Section headings ---- */
.section-heading[b-dad0wi9i1b] {
    margin: 1.75rem 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--begra-gray-900);
    border-bottom: 2px solid var(--begra-gray-200);
    padding-bottom: .5rem;
}

/* ---- Financial KPI grid ---- */
.kpi-grid--financial[b-dad0wi9i1b] {
    margin-bottom: 1rem;
}

.kpi-value--sm[b-dad0wi9i1b] {
    font-size: 1.375rem;
}

.kpi-value--positive[b-dad0wi9i1b] {
    color: var(--tone-success-fg);
}

.kpi-sub[b-dad0wi9i1b] {
    font-size: .75rem;
    color: var(--begra-gray-500);
    margin-top: .25rem;
    line-height: 1.4;
}

/* ---- Budget bar dot ---- */
.bar-dot--budget[b-dad0wi9i1b] { background: var(--tone-accent-fg); }
.bar-fill--budget[b-dad0wi9i1b] { background: var(--tone-accent-fg); }

.bar-other[b-dad0wi9i1b] {
    font-size: .8125rem;
    margin-top: .15rem;
}

.bar-note[b-dad0wi9i1b] {
    font-size: .8125rem;
    margin: .5rem 0 0;
}

.bar-project-name[b-dad0wi9i1b] {
    font-weight: 400;
    color: var(--begra-gray-600);
    font-size: .8125rem;
    margin-left: .35rem;
}

/* ---- Vertical month bar chart ---- */
.month-bar-svg[b-dad0wi9i1b] {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Montage-aanvraag stats ---- */
.montage-stats-total[b-dad0wi9i1b] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.montage-stats-number[b-dad0wi9i1b] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--begra-primary-text);
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.montage-stats-label[b-dad0wi9i1b] {
    font-size: .875rem;
    color: var(--begra-gray-600);
}

.montage-stats-bars[b-dad0wi9i1b] {
    display: flex;
    flex-direction: column;
    gap: .625rem;
}

.montage-stat-row[b-dad0wi9i1b] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
}

.montage-stat-name[b-dad0wi9i1b] {
    min-width: 7rem;
    color: var(--begra-gray-900);
    font-size: .8125rem;
}

.montage-stat-count[b-dad0wi9i1b] {
    min-width: 2rem;
    text-align: right;
    font-weight: 600;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
}

.montage-fill--draft[b-dad0wi9i1b]    { background: var(--begra-gray-400); }
.montage-fill--sent[b-dad0wi9i1b]     { background: var(--primary-fill); }
.montage-fill--accepted[b-dad0wi9i1b] { background: var(--status-6-dot); }
.montage-fill--rejected[b-dad0wi9i1b] { background: var(--begra-orange); }
.montage-fill--cancelled[b-dad0wi9i1b]{ background: var(--begra-red); }

/* ---- Count badge alert ---- */
.count-badge--alert[b-dad0wi9i1b] {
    background: var(--status-8-bg);
    color: var(--status-8-fg);
}

/* ---- Upcoming deadlines ---- */
.urgency--overdue td[b-dad0wi9i1b] { background: var(--tone-danger-bg); }
.urgency--critical td[b-dad0wi9i1b] { background: var(--tone-warning-bg); }

/* Maatvoering uit de gedeelde pill-basis in app.css; kleuren via tone-tokens (ook dark mode).
   Te laat = massief rood zodat het zich onderscheidt van "kritiek" (danger-tint). */
.urgency-badge--overdue[b-dad0wi9i1b]  { background: var(--status-8-bg);     color: var(--status-8-fg); }
.urgency-badge--critical[b-dad0wi9i1b] { background: var(--tone-danger-bg);  color: var(--tone-danger-fg); }
.urgency-badge--warning[b-dad0wi9i1b]  { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.urgency-badge--ok[b-dad0wi9i1b]       { background: var(--tone-success-bg); color: var(--tone-success-fg); }

.deadline-days[b-dad0wi9i1b] {
    font-size: .75rem;
    color: var(--begra-gray-600);
    margin-left: .3rem;
}

[data-theme="dark"] .kpi-card--alert[b-dad0wi9i1b] {
    border-color: rgba(248, 113, 113, .45);
    background: linear-gradient(180deg, rgba(248, 113, 113, .08), transparent 60%), var(--begra-white);
}
/* /Components/Pages/StatusFlow.razor.rz.scp.css */
/* .sf-subtitle staat globaal in app.css (ook gebruikt door Berichten en Monteuraccounts). */

/* ── Sections ─────────────────────────────────────────────── */
.sf-section[b-do7qm5cb3a] {
    margin-bottom: 2.5rem;
}

.sf-section-title[b-do7qm5cb3a] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--begra-dark);
    margin-bottom: 1rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--begra-primary-light);
}

.section-ico[b-do7qm5cb3a] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--begra-primary-text);
    flex-shrink: 0;
}

/* ── Intro card ────────────────────────────────────────────── */
.sf-intro-card[b-do7qm5cb3a] {
    padding: 1.5rem;
}

.sf-intro-grid[b-do7qm5cb3a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.sf-intro-item[b-do7qm5cb3a] {
    display: flex;
    gap: .875rem;
    align-items: flex-start;
}

.sf-intro-icon[b-do7qm5cb3a] {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-intro-icon svg[b-do7qm5cb3a] { width: 1.2rem; height: 1.2rem; }

.sf-ico-manual[b-do7qm5cb3a] { background: var(--tone-info-bg);    color: var(--tone-info-fg); }
.sf-ico-auto[b-do7qm5cb3a]   { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.sf-ico-job[b-do7qm5cb3a]    { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }

.sf-intro-label[b-do7qm5cb3a] {
    font-weight: 700;
    font-size: .9375rem;
    color: var(--begra-dark);
    margin-bottom: .25rem;
}

.sf-intro-desc[b-do7qm5cb3a] {
    font-size: .8125rem;
    color: var(--begra-gray-600);
    line-height: 1.55;
    margin: 0;
}

/* ── Pipeline ─────────────────────────────────────────────── */
.sf-pipeline[b-do7qm5cb3a] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

/* ── Status node ──────────────────────────────────────────── */
.sf-node[b-do7qm5cb3a] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--begra-white);
    border: 1px solid var(--begra-gray-200);
    border-left: 4px solid var(--s-color, var(--begra-primary));
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}

/* Geen hover-lift: statusnodes zijn niet klikbaar (zie ook .begra-card in app.css). */

/* Statuskleur per node: --s-color (rand) = levendige dot-kleur; --s-badge-color/--s-text (cijferbadge)
   = de contrastgecorrigeerde --status-N-bg/-fg-tokens uit app.css (één bron, ook voor .status-badge). */
.sf-s1[b-do7qm5cb3a] { --s-color: var(--status-1-dot); --s-badge-color: var(--status-1-bg); --s-text: var(--status-1-fg); }
.sf-s4[b-do7qm5cb3a] { --s-color: var(--status-4-dot); --s-badge-color: var(--status-4-bg); --s-text: var(--status-4-fg); }
.sf-s5[b-do7qm5cb3a] { --s-color: var(--status-5-dot); --s-badge-color: var(--status-5-bg); --s-text: var(--status-5-fg); }
.sf-s6[b-do7qm5cb3a] { --s-color: var(--status-6-dot); --s-badge-color: var(--status-6-bg); --s-text: var(--status-6-fg); }
.sf-s7[b-do7qm5cb3a] { --s-color: var(--status-7-dot); --s-badge-color: var(--status-7-bg); --s-text: var(--status-7-fg); }
.sf-s8[b-do7qm5cb3a] { --s-color: var(--status-8-dot); --s-badge-color: var(--status-8-bg); --s-text: var(--status-8-fg); }
.sf-s9[b-do7qm5cb3a] { --s-color: var(--status-9-dot); --s-badge-color: var(--status-9-bg); --s-text: var(--status-9-fg); }
.sf-s10[b-do7qm5cb3a] { --s-color: var(--status-10-dot); --s-badge-color: var(--status-10-bg); --s-text: var(--status-10-fg); }

.sf-badge[b-do7qm5cb3a] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--s-badge-color, var(--s-color, var(--begra-primary)));
    color: var(--s-text, var(--on-primary));
    font-weight: 700;
    font-size: .9375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .1rem;
}

.sf-badge-sm[b-do7qm5cb3a] {
    width: 1.625rem;
    height: 1.625rem;
    font-size: .8125rem;
}

.sf-content[b-do7qm5cb3a] { flex: 1; min-width: 0; }

.sf-name[b-do7qm5cb3a] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--begra-dark);
    margin-bottom: .3rem;
}

.sf-desc[b-do7qm5cb3a] {
    font-size: .875rem;
    color: var(--begra-gray-600);
    line-height: 1.55;
    margin: 0 0 .75rem;
}

/* ── Trigger badges ───────────────────────────────────────── */
.sf-triggers[b-do7qm5cb3a] {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .75rem;
}

.sf-trigger-row[b-do7qm5cb3a] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .8125rem;
    color: var(--begra-dark);
}

/* Maat uit de gedeelde pill-basis (app.css). */
.sf-trigger-badge[b-do7qm5cb3a] {
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sf-trigger-manual[b-do7qm5cb3a] { background: var(--tone-info-bg);    color: var(--tone-info-fg); }
.sf-trigger-auto[b-do7qm5cb3a]   { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.sf-trigger-job[b-do7qm5cb3a]    { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }

/* ── Roles row ────────────────────────────────────────────── */
.sf-roles[b-do7qm5cb3a] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
    font-size: .8125rem;
}

.sf-role-label[b-do7qm5cb3a] {
    color: var(--begra-gray-600);
    font-weight: 600;
    margin-right: .125rem;
}

/* ── Connector arrow ──────────────────────────────────────── */
.sf-arrow[b-do7qm5cb3a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    position: relative;
    min-height: 3rem;
}

.sf-arrow-line[b-do7qm5cb3a] {
    width: 2px;
    flex: 1;
    min-height: 1.25rem;
    background: var(--begra-gray-200);
}

.sf-arrow-head[b-do7qm5cb3a] {
    width: 10px;
    height: 14px;
    flex-shrink: 0;
    transform: rotate(90deg);
    margin-top: -2px;
}

.sf-arrow-label[b-do7qm5cb3a] {
    font-size: .75rem;
    color: var(--begra-gray-600);
    font-weight: 500;
    text-align: center;
    margin-top: .25rem;
    padding: 0 1rem;
}

/* Tone-fg-token: >=4.5:1 op de kaartachtergrond in beide thema's. */
.sf-arrow-job[b-do7qm5cb3a]    { color: var(--tone-warning-fg); font-weight: 600; }

/* ── Terminal node ────────────────────────────────────────── */
.sf-node-terminal[b-do7qm5cb3a] {
    border-style: dashed;
}

/* Maat uit de gedeelde pill-basis (app.css); de pill-basis is nowrap, maar dit label is een zin
   en moet op een telefoon kunnen afbreken (anders duwt hij de pagina breder dan het scherm). */
.sf-terminal-label[b-do7qm5cb3a] {
    margin-top: .5rem;
    color: var(--begra-gray-600);
    background: var(--begra-gray-100);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: normal;
    max-width: 100%;
}

/* ── Fork section ─────────────────────────────────────────── */
.sf-fork-section[b-do7qm5cb3a] {
    border: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-md);
    background: var(--begra-gray-100);
    padding: 1rem 1.25rem 1.25rem;
    margin: 0;
}

.sf-fork-header[b-do7qm5cb3a] {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1rem;
    font-size: .9375rem;
    flex-wrap: wrap;
}

.sf-fork-header svg[b-do7qm5cb3a] {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--begra-primary-text);
    flex-shrink: 0;
}

.sf-fork-header strong[b-do7qm5cb3a] {
    color: var(--begra-dark);
}

.sf-fork-header span[b-do7qm5cb3a] {
    color: var(--begra-gray-600);
    font-size: .8125rem;
    flex: 1;
}

.sf-fork-grid[b-do7qm5cb3a] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.sf-fork-path[b-do7qm5cb3a] {
    background: var(--begra-white);
    border: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.sf-fork-rule p[b-do7qm5cb3a] {
    font-size: .8125rem;
    color: var(--begra-dark);
    margin: .4rem 0 .4rem;
    line-height: 1.4;
}

.sf-fork-rule ul[b-do7qm5cb3a] {
    margin: 0;
    padding-left: 1.25rem;
    font-size: .8125rem;
    color: var(--begra-gray-600);
    line-height: 1.6;
}

/* Maat uit de gedeelde pill-basis (app.css). */
.sf-fork-badge[b-do7qm5cb3a] {
    margin-bottom: .5rem;
}

.sf-fork-block-badge[b-do7qm5cb3a]  { background: var(--tone-danger-bg);  color: var(--tone-danger-fg); }
.sf-fork-nazorg-badge[b-do7qm5cb3a] { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.sf-fork-direct-badge[b-do7qm5cb3a] { background: var(--tone-success-bg); color: var(--tone-success-fg); }

.sf-fork-block[b-do7qm5cb3a]  { border-left: 3px solid var(--begra-red); }
.sf-fork-nazorg[b-do7qm5cb3a] { border-left: 3px solid var(--status-8); }
.sf-fork-direct[b-do7qm5cb3a] { border-left: 3px solid var(--status-9); }

.sf-node-inline[b-do7qm5cb3a] {
    margin: 0;
    padding: .875rem 1rem;
    font-size: .875rem;
}

.sf-node-inline .sf-desc[b-do7qm5cb3a] { font-size: .8rem; }

.sf-fork-arrow-down[b-do7qm5cb3a] {
    font-size: .75rem;
    color: var(--begra-gray-600);
    text-align: center;
    font-weight: 500;
    padding: .25rem 0;
}

/* ── Checklist section ────────────────────────────────────── */
.sf-checklist-card[b-do7qm5cb3a] { padding: 1.5rem; }

.sf-checklist-intro[b-do7qm5cb3a] {
    font-size: .9375rem;
    color: var(--begra-dark);
    line-height: 1.55;
    margin: 0 0 1.25rem;
}

.sf-checklist-grid[b-do7qm5cb3a] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
}

.sf-cl-item[b-do7qm5cb3a] {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--begra-gray-100);
    border-radius: var(--radius-sm);
    padding: .875rem 1rem;
    border-left: 3px solid var(--begra-gray-200);
}

.sf-cl-block[b-do7qm5cb3a] { border-left-color: var(--begra-red); }
.sf-cl-route[b-do7qm5cb3a] { border-left-color: var(--status-8); }

.sf-cl-num[b-do7qm5cb3a] {
    flex-shrink: 0;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: var(--begra-primary);
    color: var(--on-primary);
    font-weight: 700;
    font-size: .8125rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-cl-body[b-do7qm5cb3a] { flex: 1; }

.sf-cl-q[b-do7qm5cb3a] {
    font-weight: 600;
    font-size: .875rem;
    color: var(--begra-dark);
    margin-bottom: .25rem;
}

.sf-cl-rule[b-do7qm5cb3a] {
    font-size: .8rem;
    color: var(--begra-gray-600);
    line-height: 1.45;
}

/* .sf-cl-nee staat in vertaalteksten (MarkupString) en krijgt daardoor geen scope-attribuut:
   de stijl (pill + tone-danger) staat daarom globaal in wwwroot/app.css. */

/* .role-badge en .role-admin/.role-montageplanner/.role-inkoop/.role-projectleider/.role-lezer
   zijn verplaatst naar wwwroot/app.css (globaal, ook gebruikt door Info.razor). */

/* ── Reference table ──────────────────────────────────────── */
.sf-ref-table td:first-child[b-do7qm5cb3a],
.sf-ref-table th:first-child[b-do7qm5cb3a] { width: 3rem; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sf-fork-grid[b-do7qm5cb3a] { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .sf-intro-grid[b-do7qm5cb3a] { grid-template-columns: 1fr; }
    .sf-checklist-grid[b-do7qm5cb3a] { grid-template-columns: 1fr; }
    .sf-node[b-do7qm5cb3a] { flex-direction: column; gap: .5rem; }
    .sf-badge[b-do7qm5cb3a] { width: 1.75rem; height: 1.75rem; font-size: .875rem; }
}
/* /Components/Pages/SupplierDetail.razor.rz.scp.css */
.detail-section[b-3aliwa7zxq] {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
}

.detail-section h2[b-3aliwa7zxq] {
    margin: 0 0 .75rem;
    font-size: 1.0625rem;
}

.detail-section-head[b-3aliwa7zxq] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

/* .detail-list (label → waarde, op ≤640px gestapeld) staat globaal in app.css (gedeeld met Importeren). */
/* /Components/Shared/ApiReadinessBanner.razor.rz.scp.css */
.api-readiness-overlay[b-xte5svqltj] {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: api-readiness-fade-in-b-xte5svqltj var(--dur-enter, .2s) var(--ease, ease);
}

/* De kaart zelf is een .begra-card (app.css); hier alleen de overlay-specifieke afronding/diepte
   zodat hij als dialoog leest en niet als gewone pagina-kaart. */
.api-readiness-card[b-xte5svqltj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem 2.5rem;
    text-align: center;
    max-width: 420px;
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-lg);
}

.api-readiness-card p[b-xte5svqltj] {
    margin: 0;
    color: var(--begra-gray-500, #64748b);
    font-size: .875rem;
}

.api-readiness-spinner[b-xte5svqltj] {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid var(--begra-gray-200, #e2e8f0);
    border-top-color: var(--begra-primary, #005CB9);
    border-radius: 50%;
    animation: api-readiness-spin-b-xte5svqltj var(--dur-spin, .9s) linear infinite;
}

/* --begra-primary is op de donkere kaart te vlak tegen de grijze ring; --begra-primary-text
   (zelfde blauw als linkkleur) houdt de draaiende boog duidelijk zichtbaar. */
[data-theme="dark"] .api-readiness-spinner[b-xte5svqltj] {
    border-top-color: var(--begra-primary-text, #60A5FA);
}

/* Reduced motion: niet draaien maar traag pulseren, zodat zichtbaar blijft dat er gewacht wordt
   (de globale reduce-regel in app.css zou de spinner anders bevriezen). */
@media (prefers-reduced-motion: reduce) {
    .api-readiness-spinner[b-xte5svqltj] {
        animation-name: api-readiness-pulse-b-xte5svqltj !important;
        animation-duration: var(--dur-pulse, 1.6s) !important;
        animation-timing-function: ease-in-out !important;
        animation-iteration-count: infinite !important;
    }
}

@keyframes api-readiness-pulse-b-xte5svqltj {
    50% {
        opacity: .35;
    }
}

@keyframes api-readiness-spin-b-xte5svqltj {
    to {
        transform: rotate(360deg);
    }
}

@keyframes api-readiness-fade-in-b-xte5svqltj {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Components/Shared/ConnectionStatusIndicator.razor.rz.scp.css */
/* Maat uit de gedeelde pill-basis in app.css; kleuren via tone-tokens (dark mode volgt automatisch).
   Subtiele rand in dezelfde tint zodat hij ook op de lichte topbar niet wegvalt. */
.conn-indicator[b-zv0cwh9rdw] {
    border: 1px solid transparent;
    padding: calc(.125rem - 1px) calc(.55rem - 1px);
    transition: background-color var(--dur, .16s) var(--ease, ease), color var(--dur, .16s) var(--ease, ease), border-color var(--dur, .16s) var(--ease, ease);
}

.conn-reconnecting[b-zv0cwh9rdw] {
    background: var(--tone-warning-bg);
    color: var(--tone-warning-fg);
    border-color: color-mix(in srgb, currentColor 35%, transparent);
}

.conn-disconnected[b-zv0cwh9rdw] {
    background: var(--tone-danger-bg);
    color: var(--tone-danger-fg);
    border-color: color-mix(in srgb, currentColor 35%, transparent);
}

.conn-dot[b-zv0cwh9rdw] {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
    animation: conn-pulse-b-zv0cwh9rdw var(--dur-pulse, 1.6s) ease-in-out infinite;
}

/* Bij prefers-reduced-motion blijft de stip bewust pulseren (opacity, geen beweging): zie de
   reduced-motion-uitzonderingen in app.css — de globale reduce-regel bevroor hem anders. */

@keyframes conn-pulse-b-zv0cwh9rdw {
    50% {
        opacity: .35;
    }
}
/* /Components/Shared/ContextMenu.razor.rz.scp.css */
.ctx-backdrop[b-10eh4yv2iu] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-context-menu) - 1);
}

/* outline:none alleen op de menucontainer (krijgt programmatische focus); de items hebben een eigen focusring. */
.ctx-menu[b-10eh4yv2iu] {
    position: fixed;
    z-index: var(--z-context-menu); /* boven dialogen (rijmenu in een dialoog), onder toasts */
    min-width: 12rem;
    max-width: min(20rem, calc(100vw - 16px));
    max-height: 72vh;
    overflow-y: auto;
    padding: .35rem;
    background: var(--begra-surface);
    box-shadow: var(--shadow-lg);
    outline: none;
    transform-origin: top left;
    animation: ctxMenuIn-b-10eh4yv2iu var(--dur-enter) var(--ease);
}

.ctx-title[b-10eh4yv2iu] {
    padding: .35rem .6rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--begra-gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ctx-item[b-10eh4yv2iu] {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: .45rem .6rem;
    min-height: 0;
    font: inherit;
    color: var(--begra-dark);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.ctx-label[b-10eh4yv2iu] {
    flex: 1;
    min-width: 0;
}

.ctx-kbd[b-10eh4yv2iu] {
    margin-left: 1rem;
    padding: .05rem .4rem;
    border: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-xs);
    background: var(--begra-gray-100, transparent);
    color: var(--begra-gray-600);
    font: inherit;
    font-size: .75rem;
    line-height: 1.4;
}

.ctx-subtitle[b-10eh4yv2iu] {
    padding-top: .15rem;
}

.ctx-icon-gap[b-10eh4yv2iu] {
    display: inline-block;
    width: 16px;
    flex-shrink: 0;
}

.ctx-item:hover:not(:disabled)[b-10eh4yv2iu],
.ctx-item:focus-visible[b-10eh4yv2iu] {
    background: var(--selected-bg);
}

/* Touch: menu-items op 44px tikhoogte. */
@media (pointer: coarse) {
    .ctx-item[b-10eh4yv2iu] {
        min-height: var(--control-h-touch);
    }
}

.ctx-item:focus-visible[b-10eh4yv2iu] {
    outline: 2px solid var(--focus-ring-solid, var(--begra-primary-text));
    outline-offset: -2px;
}

.ctx-item:disabled[b-10eh4yv2iu] {
    opacity: .4;
    cursor: not-allowed;
}

.ctx-danger[b-10eh4yv2iu] {
    color: var(--tone-danger-fg, #b91c1c);
}

.ctx-danger:hover:not(:disabled)[b-10eh4yv2iu],
.ctx-danger:focus-visible[b-10eh4yv2iu] {
    background: var(--tone-danger-bg, #fee2e2);
}

.ctx-sep[b-10eh4yv2iu] {
    border: none;
    border-top: 1px solid var(--begra-gray-200);
    margin: .3rem 0;
}

@keyframes ctxMenuIn-b-10eh4yv2iu {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: none; }
}

/* Uitloop: .is-leaving, daarna haalt de component het menu weg (LeaveTransition). Tijdens de uitloop geen klikken. */
.ctx-menu.is-leaving[b-10eh4yv2iu] {
    animation: ctxMenuOut-b-10eh4yv2iu var(--dur-exit) var(--ease-in) forwards;
    pointer-events: none;
}

.ctx-backdrop.is-leaving[b-10eh4yv2iu] {
    pointer-events: none;
}

@keyframes ctxMenuOut-b-10eh4yv2iu {
    to { opacity: 0; transform: scale(.96); }
}
/* /Components/Shared/DataGrid.razor.rz.scp.css */
.dg-toolbar[b-a4n1gmliw9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .5rem;
}

.dg-chip[b-a4n1gmliw9] {
    /* Maat uit de gedeelde pill-basis (app.css); rechts minder ruimte voor de wis-knop. */
    padding-right: .3rem;
    background: var(--tone-info-bg);
    color: var(--tone-info-fg);
}

.dg-chip-x[b-a4n1gmliw9] {
    position: relative;
    background: none;
    border: none;
    border-radius: var(--radius-pill);
    color: inherit;
    cursor: pointer;
    padding: .1rem .3rem;
    line-height: 1;
}

/* Touch: het wis-kruisje in de filterchip krijgt een 40px-klikvlak zonder de chip zelf te vergroten. */
@media (pointer: coarse), (max-width: 768px) {
    .dg-chip-x[b-a4n1gmliw9]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);
    }
}

.dg-th-inner[b-a4n1gmliw9] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.dg-th[b-a4n1gmliw9] {
    cursor: grab;
}

.dg-th.dg-dragging[b-a4n1gmliw9] {
    opacity: .5;
}

.dg-sort[b-a4n1gmliw9] {
    text-transform: inherit;
    letter-spacing: inherit;
}

.dg-filter-dot[b-a4n1gmliw9] {
    color: var(--begra-primary-text);
    font-size: .6rem;
}

.dg-menu-btn[b-a4n1gmliw9],
.begra-table th .dg-menu-btn[b-a4n1gmliw9] {
    opacity: .6;
    padding: 0 .2rem;
    min-width: 24px;
    min-height: 24px;
    justify-content: center;
    transition: opacity var(--dur-fast) var(--ease);
}

.dg-th:hover .dg-menu-btn[b-a4n1gmliw9],
.dg-th:focus-within .dg-menu-btn[b-a4n1gmliw9],
.dg-menu-btn:focus-visible[b-a4n1gmliw9] {
    opacity: 1;
}

.dg-empty[b-a4n1gmliw9] {
    text-align: center !important;
    color: var(--begra-gray-600);
    padding: 1.5rem 1rem !important;
}

.dg-backdrop[b-a4n1gmliw9] {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-popover) - 1);
}

.dg-menu[b-a4n1gmliw9] {
    position: fixed;
    z-index: var(--z-popover);
    width: 264px;
    max-height: 72vh;
    overflow-y: auto;
    padding: .35rem;
    background: var(--begra-surface);
    box-shadow: var(--shadow-lg);
    outline: none;
}

.dg-menu-title[b-a4n1gmliw9] {
    padding: .35rem .6rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--begra-gray-600);
}

.dg-item[b-a4n1gmliw9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: .45rem .6rem;
    font: inherit;
    color: var(--begra-dark);
    cursor: pointer;
}

.dg-item:hover:not(:disabled)[b-a4n1gmliw9],
.dg-item:focus-visible[b-a4n1gmliw9] {
    background: var(--selected-bg);
}

.dg-item:focus-visible[b-a4n1gmliw9] {
    outline: 2px solid var(--focus-ring-solid, var(--begra-primary-text));
    outline-offset: -2px;
}

.dg-item:disabled[b-a4n1gmliw9] {
    opacity: .4;
    cursor: not-allowed;
}

.dg-sep[b-a4n1gmliw9] {
    border: none;
    border-top: 1px solid var(--begra-gray-200);
    margin: .3rem 0;
}

.dg-filter[b-a4n1gmliw9] {
    padding: .25rem .4rem;
}

.dg-input[b-a4n1gmliw9] {
    width: 100%;
    padding: .4rem .5rem;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--begra-white);
    color: var(--begra-dark);
    font: inherit;
}

.dg-values[b-a4n1gmliw9] {
    max-height: 160px;
    overflow-y: auto;
    margin: .4rem 0;
    border: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-sm);
    padding: .25rem .4rem;
}

.dg-value[b-a4n1gmliw9] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .15rem 0;
    cursor: pointer;
}

.dg-filter-actions[b-a4n1gmliw9] {
    display: flex;
    gap: .4rem;
    margin-top: .4rem;
}

.dg-col-list[b-a4n1gmliw9] {
    list-style: none;
    margin: .75rem 0;
    padding: 0;
}

.dg-col-row[b-a4n1gmliw9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .3rem 0;
    border-bottom: 1px solid var(--begra-gray-200);
}

.dg-col-row label[b-a4n1gmliw9] {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.dg-col-move[b-a4n1gmliw9] {
    display: inline-flex;
    gap: .25rem;
}

/* Kolommenu: korte inloop (de kolommendialoog gebruikt de gedeelde <Dialog> uit app.css). */
.dg-menu[b-a4n1gmliw9] { animation: dgMenuIn-b-a4n1gmliw9 var(--dur-enter) var(--ease); transform-origin: top; }
.dg-item[b-a4n1gmliw9] { transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
@keyframes dgMenuIn-b-a4n1gmliw9 { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Uitloop: .is-leaving, daarna verwijdert de component het menu (LeaveTransition). Tijdens de uitloop geen klikken. */
.dg-menu.is-leaving[b-a4n1gmliw9] { animation: dgMenuOut-b-a4n1gmliw9 var(--dur-exit) var(--ease-in) forwards; pointer-events: none; }
.dg-backdrop.is-leaving[b-a4n1gmliw9] { pointer-events: none; }
@keyframes dgMenuOut-b-a4n1gmliw9 { to { opacity: 0; transform: translateY(-4px); } }

.dg-views[b-a4n1gmliw9] {
    width: auto;
    min-width: 10rem;
    max-width: 16rem;
    padding: .25rem .5rem;
    font-size: .875rem;
}

.dg-selection[b-a4n1gmliw9] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .875rem;
}

.dg-select[b-a4n1gmliw9] {
    width: 2.25rem;
    text-align: center;
}

/* Eén "geselecteerd"-vlak voor beide thema's (--selected-bg in app.css). */
.begra-table tbody tr.selected[b-a4n1gmliw9] {
    background: var(--selected-bg);
}

/* Rij-uitloop (verwijderde rij blijft kort als spookrij staan) en flits van gewijzigde rijen. */
.begra-table tbody tr.is-leaving[b-a4n1gmliw9] {
    animation: dgRowOut-b-a4n1gmliw9 var(--dur-exit) var(--ease-in) forwards;
    pointer-events: none;
}

.begra-table tbody tr.dg-flash > td[b-a4n1gmliw9] {
    animation: dgRowFlash-b-a4n1gmliw9 1.1s var(--ease);
}

@keyframes dgRowOut-b-a4n1gmliw9 {
    to { opacity: 0; transform: translateX(-8px); }
}

@keyframes dgRowFlash-b-a4n1gmliw9 {
    from { background-color: var(--begra-primary-light); }
    to { background-color: transparent; }
}

/* Rijen zijn met het toetsenbord bereikbaar (pijltjes, Enter, Shift+F10 voor het menu). */
.begra-table tbody tr[data-dg-row]:focus-visible[b-a4n1gmliw9] {
    outline: 2px solid var(--focus-ring-solid, var(--begra-primary-text));
    outline-offset: -2px;
}

.dg-hint[b-a4n1gmliw9] {
    margin: .35rem 0 .75rem;
    font-size: .8125rem;
    color: var(--begra-gray-500, inherit);
}

/* Tikdoelen: sorteerknop minimaal 24 px hoog (desktop), 44 px op touch/mobiel. */
.dg-sort[b-a4n1gmliw9] {
    min-height: 24px;
}

@media (pointer: coarse), (max-width: 768px) {
    .dg-sort[b-a4n1gmliw9],
    .dg-menu-btn[b-a4n1gmliw9],
    .begra-table th .dg-menu-btn[b-a4n1gmliw9] {
        min-height: 44px;
        min-width: 44px;
    }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty-state[b-uudqumj2tu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: var(--begra-gray-600, #4b5563);
}

/* Icoon in een zacht rond vlak, in lijn met de badge-/chipstijl van app.css. */
.empty-state__icon[b-uudqumj2tu] {
    color: var(--begra-gray-500, #6b7280);
    padding: .75rem;
    box-sizing: content-box;
    border-radius: 999px;
    background: var(--begra-gray-100, #F5F5F5);
    margin-bottom: .25rem;
}

[data-theme="dark"] .empty-state__icon[b-uudqumj2tu] {
    /* --begra-gray-100 is in dark mode de paginakleur — verhoogd paneel geeft daar wél reliëf. */
    background: var(--begra-surface, #1F1F1F);
    color: var(--begra-gray-500, #9CA3AF);
}

.empty-state__title[b-uudqumj2tu] {
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -.005em;
    color: var(--begra-gray-900, #333);
    margin: 0;
}

.empty-state__description[b-uudqumj2tu] {
    margin: 0;
    max-width: 32rem;
    font-size: .9375rem;
    line-height: 1.5;
}

.empty-state__action[b-uudqumj2tu] {
    margin-top: 0.5rem;
}
/* /Components/Shared/GlsAddressLabelPanel.razor.rz.scp.css */
/* Address label (no GLS shipment): actions below the form, aligned right. */
.gls-panel-actions[b-homl61gx8a] {
    justify-content: flex-end;
    margin-top: 1rem;
}
/* /Components/Shared/GlsLabelDialog.razor.rz.scp.css */
/* Choice between a GLS shipment and the address label (no GLS shipment). */
.gls-tabs[b-4006g983tb] {
    margin: 0 0 1rem;
}
/* /Components/Shared/GlsShipmentList.razor.rz.scp.css */
/* Earlier GLS shipments below the form. */
.gls-history[b-a01t25gdiw] {
    margin-top: 1.5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--begra-gray-200);
}

.gls-subtitle[b-a01t25gdiw] {
    margin: 1rem 0 .5rem;
    font-size: 1rem;
}

.gls-history-card[b-a01t25gdiw] {
    padding: 0;
    overflow: hidden;
}

.gls-created-by[b-a01t25gdiw] {
    display: block;
    margin: 0;
}

.gls-row-actions[b-a01t25gdiw] {
    gap: .5rem;
}
/* /Components/Shared/GlsShipmentPanel.razor.rz.scp.css */
/* GLS shipment form: house number + addition side by side, one row per parcel with its weight. */
.gls-house-number[b-n98ii9v194] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: .75rem;
}

.gls-parcels[b-n98ii9v194] {
    margin: 1rem 0 0;
    padding: .75rem 1rem;
    border: 1px solid var(--begra-gray-200);
    border-radius: var(--radius-sm);
}

.gls-parcels legend[b-n98ii9v194] {
    padding: 0 .25rem;
    font-weight: 600;
}

.gls-parcel-row[b-n98ii9v194] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8rem auto;
    gap: .5rem;
    align-items: center;
    margin-bottom: .5rem;
}

.gls-panel-actions[b-n98ii9v194] {
    justify-content: flex-end;
    margin-top: 1rem;
}

.gls-subtitle[b-n98ii9v194] {
    margin: 1rem 0 .5rem;
    font-size: 1rem;
}

@media (max-width: 640px) {
    .gls-parcel-row[b-n98ii9v194] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .gls-parcel-row label[b-n98ii9v194] {
        grid-column: 1 / -1;
    }
}
/* /Components/Shared/GlsTrackingCodes.razor.rz.scp.css */
/* Track codes with their GLS tracking link, one parcel per line. */
.gls-tracking-list[b-c2deoj9far] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gls-tracking-list li[b-c2deoj9far] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
/* /Components/Shared/NavDigiDocCell.razor.rz.scp.css */
/* Muted text via --begra-gray-600: the token itself switches in dark mode (app.css), so no separate dark rule is needed. */
.nav-digidoc[b-24l2rcml0d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    min-width: 0;
}

.nav-digidoc-result[b-24l2rcml0d],
.nav-digidoc-hint[b-24l2rcml0d] {
    font-size: 0.85rem;
    color: var(--begra-gray-600);
    overflow-wrap: anywhere;
}
/* /Components/Shared/NavProjectChangesPanel.razor.rz.scp.css */
.nav-changes-panel[b-pop9saxtxp] {
    grid-column: 1 / -1;
    margin-top: 1rem;
    padding-top: .75rem;
    border-top: 1px solid var(--begra-gray-200);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.nav-sync-meta[b-pop9saxtxp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    color: var(--begra-gray-600);
    font-size: .875rem;
}

.nav-details[b-pop9saxtxp] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .25rem 1rem;
    margin: 0;
}

.nav-details dt[b-pop9saxtxp] {
    color: var(--begra-gray-600);
    font-size: .875rem;
}

.nav-details dd[b-pop9saxtxp] {
    margin: 0;
}

.nav-proposals h4[b-pop9saxtxp],
.nav-changes h4[b-pop9saxtxp] {
    margin: 0 0 .375rem;
    font-size: .9375rem;
}

.nav-proposals ul[b-pop9saxtxp] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .375rem;
}

.nav-proposals li[b-pop9saxtxp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.nav-changes-head[b-pop9saxtxp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.nav-changes-table[b-pop9saxtxp] {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.nav-changes-table th[b-pop9saxtxp],
.nav-changes-table td[b-pop9saxtxp] {
    padding: .375rem .5rem;
    text-align: left;
    border-bottom: 1px solid var(--begra-gray-200);
    vertical-align: top;
}

/* Wijzigingenlijst als kaarten op smalle schermen (zelfde patroon als de manco-tabel in app.css). */
@media (max-width: 640px) {
    .nav-changes-table thead[b-pop9saxtxp] { display: none; }
    .nav-changes-table[b-pop9saxtxp], .nav-changes-table tbody[b-pop9saxtxp], .nav-changes-table tr[b-pop9saxtxp], .nav-changes-table td[b-pop9saxtxp] { display: block; width: 100%; }
    .nav-changes-table tr[b-pop9saxtxp] { padding: .5rem 0; border-bottom: 1px solid var(--begra-gray-200); }
    .nav-changes-table td[b-pop9saxtxp] { border-bottom: 0; padding: .15rem 0; }
    .nav-changes-table td[data-label][b-pop9saxtxp]::before {
        content: attr(data-label);
        display: block;
        font-size: .75rem;
        color: var(--begra-gray-600);
        text-transform: uppercase;
        letter-spacing: .03em;
    }
}
/* /Components/Shared/PastDateWarning.razor.rz.scp.css */
/* Same look as the status-back warning of the project dialogs: warning tone, readable in both themes (>=4.5:1). */
.past-date-warning[b-sv5pdq9wq6] {
    margin: .5rem 0 0;
    padding: .4rem .65rem;
    border-left: 3px solid currentColor;
    border-radius: var(--radius-sm);
    background: var(--tone-warning-bg);
    color: var(--tone-warning-fg);
    font-size: .875rem;
    line-height: 1.45;
}
/* /Components/Shared/ProjectChapterIcon.razor.rz.scp.css */
.chapter-ico[b-uoj395p84t] {
    width: 1.15rem;
    height: 1.15rem;
    vertical-align: -.2rem;
    margin-right: .5rem;
    color: var(--begra-primary-text);
    flex-shrink: 0;
}
/* /Components/Shared/ProjectChatPanel.razor.rz.scp.css */
.chat-load-earlier[b-4w3yyjenk0] {
    text-align: center;
}

.chat-load-earlier-btn[b-4w3yyjenk0] {
    font-size: .75rem;
}

.chat-input-field[b-4w3yyjenk0] {
    flex: 1;
}
/* /Components/Shared/ProjectDocBoxChapter.razor.rz.scp.css */
/* ── Documentatiedoos: grote afvink-tegels i.p.v. kale checkboxen ─────────── */
.docbox-check-group[b-cygtusro6n] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    grid-column: 1 / -1;
}

.docbox-check[b-cygtusro6n] {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem 1.1rem;
    border: 2px solid var(--begra-gray-200);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    cursor: pointer;
    font-weight: 600;
    font-size: .9375rem;
    user-select: none;
    min-height: 44px;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.docbox-check:hover[b-cygtusro6n] {
    border-color: var(--begra-primary);
}

/* Focusring op de hele tegel (de native checkbox zelf is visueel verborgen, zie hieronder): dezelfde
   2px-ring als overal; de zachte --focus-ring alleen haalde maar ±1.4:1. */
.docbox-check:has(input:focus-visible)[b-cygtusro6n] {
    outline: 2px solid var(--focus-ring-solid);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.docbox-check:has(input:checked)[b-cygtusro6n] {
    border-color: var(--begra-primary);
    background: color-mix(in srgb, var(--begra-primary) 8%, var(--begra-white));
}

/* Native checkbox blijft aanwezig voor toetsenbord/screenreader, maar visueel verborgen —
   .docbox-check-box hieronder is de echte, grote afvink-indicator. */
.docbox-check input[b-cygtusro6n] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}

.docbox-check-box[b-cygtusro6n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    border: 2px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--begra-white);
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.docbox-check input:checked ~ .docbox-check-box[b-cygtusro6n] {
    background: var(--primary-fill);
    border-color: var(--primary-fill);
}

.docbox-check-icon[b-cygtusro6n] {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--on-primary);
    opacity: 0;
    transform: scale(.5);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.docbox-check input:checked ~ .docbox-check-box .docbox-check-icon[b-cygtusro6n] {
    opacity: 1;
    transform: scale(1);
}

.docbox-check input:checked ~ .docbox-check-label[b-cygtusro6n] {
    color: var(--begra-primary-text);
}

[data-theme="dark"] .docbox-check:has(input:checked)[b-cygtusro6n] {
    background: var(--selected-bg);
}

/* /Components/Shared/SearchableSelect.razor.rz.scp.css */
.ss-wrap[b-qih31srwfu] {
    position: relative;
    display: block;
}

.ss-input[b-qih31srwfu] {
    width: 100%;
    padding-right: 2rem;
}

.ss-arrow[b-qih31srwfu] {
    position: absolute;
    right: .6rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--begra-gray-600);
    font-size: .75rem;
    transition: transform var(--dur, .16s) var(--ease, ease), color var(--dur, .16s) var(--ease, ease);
}

.ss-open .ss-arrow[b-qih31srwfu] {
    transform: translateY(-50%) rotate(180deg);
    color: var(--begra-primary-text, var(--begra-primary));
}

/* Verhoogd paneel (--begra-surface) met de kaart-afronding en -schaduw uit app.css. */
.ss-list[b-qih31srwfu] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: .25rem;
    list-style: none;
    background: var(--begra-surface, var(--begra-white));
    border: 1px solid var(--begra-gray-200, #ccc);
    border-radius: var(--radius-md, 10px);
    box-shadow: var(--shadow-md);
    max-height: 220px;
    overflow-y: auto;
    z-index: var(--z-popover);
    animation: ss-list-in-b-qih31srwfu var(--dur-enter, .2s) var(--ease, ease);
}

.ss-list li[b-qih31srwfu] {
    padding: .45rem .75rem;
    cursor: pointer;
    font-size: .925rem;
    color: var(--begra-dark);
    border-radius: var(--radius-sm, 6px);
    transition: background-color var(--dur, .16s) var(--ease, ease);
}

.ss-list li:hover[b-qih31srwfu],
.ss-list li:focus[b-qih31srwfu] {
    background: color-mix(in srgb, var(--begra-primary) 12%, var(--begra-white));
}

.ss-list li.ss-active[b-qih31srwfu] {
    background: color-mix(in srgb, var(--begra-primary) 12%, var(--begra-white));
    outline: 2px solid var(--focus-ring-solid, var(--begra-primary-text));
    outline-offset: -2px;
}

.ss-list li:focus-visible[b-qih31srwfu] {
    outline: 2px solid var(--focus-ring-solid, var(--begra-primary-text));
    outline-offset: -2px;
}

.ss-list li.ss-selected[b-qih31srwfu] {
    background: color-mix(in srgb, var(--begra-primary) 20%, var(--begra-white));
    font-weight: 600;
}

.ss-list li.ss-empty[b-qih31srwfu] {
    color: var(--begra-gray-600);
    cursor: default;
    font-style: italic;
}

.ss-list li.ss-empty:hover[b-qih31srwfu] {
    background: transparent;
}

@keyframes ss-list-in-b-qih31srwfu {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Uitloop: .is-leaving, daarna verwijdert de component de lijst (LeaveTransition). Tijdens de uitloop geen klikken. */
.ss-list.is-leaving[b-qih31srwfu] {
    animation: ss-list-out-b-qih31srwfu var(--dur-exit, .15s) var(--ease-in, ease-in) forwards;
    pointer-events: none;
}

@keyframes ss-list-out-b-qih31srwfu {
    to {
        opacity: 0;
        transform: translateY(-4px);
    }
}

[data-theme="dark"] .ss-list[b-qih31srwfu] {
    background: var(--begra-surface, #1F1F1F);
    border-color: var(--begra-gray-300, #404040);
}

[data-theme="dark"] .ss-list li[b-qih31srwfu] {
    color: var(--begra-dark);
}

[data-theme="dark"] .ss-list li:hover[b-qih31srwfu],
[data-theme="dark"] .ss-list li:focus[b-qih31srwfu] {
    background: color-mix(in srgb, var(--begra-primary-text) 14%, transparent);
}

[data-theme="dark"] .ss-list li.ss-selected[b-qih31srwfu] {
    background: var(--selected-bg);
}
/* /Components/Shared/SkeletonLoader.razor.rz.scp.css */
.skeleton-loader[b-yd0m6qi1v2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skeleton-loader__row[b-yd0m6qi1v2] {
    height: 1.25rem;
    border-radius: var(--radius-sm, 6px);
    background: linear-gradient(90deg, var(--begra-gray-200, #e5e7eb) 25%, var(--begra-gray-100, #f3f4f6) 37%, var(--begra-gray-200, #e5e7eb) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer-b-yd0m6qi1v2 1.4s linear infinite;
}

/* Kaart-variant volgt de afronding van .begra-card (--radius-md) zodat de placeholder
   dezelfde vorm heeft als de kaart die hem straks vervangt. */
.skeleton-loader--card .skeleton-loader__row[b-yd0m6qi1v2] {
    height: 6rem;
    border-radius: var(--radius-md, 10px);
}

/* Dark mode: --begra-gray-100 is daar de paginakleur (near-black) en valt weg tegen de kaart;
   de shimmer loopt daarom tussen de border-tint en de verhoogde-paneelkleur. */
[data-theme="dark"] .skeleton-loader__row[b-yd0m6qi1v2] {
    background: linear-gradient(90deg, var(--begra-gray-200, #262626) 25%, var(--begra-surface, #1F1F1F) 37%, var(--begra-gray-200, #262626) 63%);
    background-size: 400% 100%;
}

@keyframes skeleton-shimmer-b-yd0m6qi1v2 {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Reduced motion: geen schuivende glans maar een effen vlak dat traag pulseert. De puls zelf
   (busyPulse) staat in app.css bij de reduced-motion-uitzonderingen: de globale reduce-regel
   (animation-duration .01ms !important) bevroor een animatie die hier zonder !important stond. */
@media (prefers-reduced-motion: reduce) {
    .skeleton-loader__row[b-yd0m6qi1v2],
    [data-theme="dark"] .skeleton-loader__row[b-yd0m6qi1v2] {
        background: var(--begra-gray-200, #e5e7eb);
    }
}

/* .visually-hidden staat globaal in app.css. */
/* /Components/Shared/UpdateAvailableBanner.razor.rz.scp.css */
/* Zwevende banner onderaan: is een .begra-card (app.css), maar met de diepte van een dialoog
   (--shadow-lg) zodat hij duidelijk bóven de pagina hangt. Zolang hij zichtbaar is, schuiven sticky
   opslaanbalken en dialogen omhoog (html:has(.update-banner) in app.css), zodat hij die niet bedekt. */
.update-banner[b-419iquvm2c] {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: var(--z-banner);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    width: max-content;
    padding: .85rem 1.25rem;
    max-width: min(560px, calc(100vw - 2rem));
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-lg);
    animation: update-banner-slide-up-b-419iquvm2c var(--dur-slow, .24s) var(--ease, ease);
}

.update-banner-countdown[b-419iquvm2c] {
    color: var(--begra-gray-500, #64748b);
    font-size: .8125rem;
    white-space: nowrap;
}

@keyframes update-banner-slide-up-b-419iquvm2c {
    from {
        opacity: 0;
        transform: translate(-50%, 12px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}