/* Design tokens — shared palette derived from the CAO-module gold standard
   (MudBlazor default indigo). Used by the versioned-detail building blocks and
   any hand-rolled surfaces (e.g. the employment section on the employee detail). */
:root {
    --ind: #594ae2;
    --ind-dark: #4636c9;
    --ind-soft: #ece9fb;
    --ind-line: #d6cff5;
    --success: #5cb85c;
    --warn: #ff9800;
    --ink: #2c2c2c;
    --muted: #6b6b6b;
    --line: #e0e0e0;
    --bg: #f4f5f7;
    --card: #ffffff;
    --shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
    --radius: 8px;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Content canvas: light grey behind the white cards so they lift off the page
   (cao-module.html look). Appbar/drawer keep their own backgrounds.
   min-height fills the viewport so the grey runs all the way down on short pages. */
.mud-main-content {
    background-color: var(--bg);
    min-height: 100vh;
}

/* Page-header breadcrumbs (design system): small, muted, with indigo links and a
   bold ink current item. Global because MudBreadcrumbs is a child component that
   scoped/::deep CSS can't reach. */
.mud-breadcrumbs.mud-typography-body1 {
    font-size: 13px;
}

.mud-breadcrumbs .mud-breadcrumb-item a {
    color: var(--muted) !important;
}

.mud-breadcrumbs .mud-breadcrumb-item:not(.mud-disabled) a {
    color: var(--ind-dark) !important;
}

.mud-breadcrumbs .mud-breadcrumb-item:last-child a {
    color: var(--ink) !important;
    font-weight: 500;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.markup h3 {
    margin-top: 1rem;
}

/* Keep both bullets and numbers inside the content block. With list-style-position: inside the
   numbers hung outside the box and wrapped text jumped back to the left margin; giving the lists
   their own indentation fixes both and aligns continuation lines under the text. */
.markup ul,
.markup ol {
    list-style-position: outside;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.markup li {
    margin-bottom: 0.25rem;
}

/* Markdig wraps the content of a "loose" list item in a <p>; that must not add extra space below. */
.markup li > p:last-child {
    margin-bottom: 0;
}

/* Manual content leans on tables, blockquotes and inline code; these rules give those the same
   calm styling as the rest of the UI, in both light and dark mode. */
.markup h1,
.markup h2,
.markup h4 {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.markup p {
    margin-bottom: 0.75rem;
}

.markup table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0 1.25rem;
    font-size: 0.9em;
}

.markup th,
.markup td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 0.4rem 0.6rem;
    text-align: left;
    vertical-align: top;
}

.markup th {
    background-color: var(--mud-palette-background-gray);
    font-weight: 600;
}

.markup blockquote {
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    border-left: 3px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-background-gray);
}

.markup blockquote p:last-child {
    margin-bottom: 0;
}

.markup code {
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    background-color: var(--mud-palette-background-gray);
    font-size: 0.9em;
}

.markup pre code {
    display: block;
    padding: 0.75rem;
    overflow-x: auto;
}

#components-reconnect-modal {
    color: #212121 !important;
    background-color: #ffffff !important;
}

.clickable-rows .mud-table-row {
    cursor: pointer;
}

/* PP-343: a period-data row that is not yet fully processed; the text colour stays the theme's, so it reads in hover and dark mode too. */
.mud-table-root .mud-table-body .mud-table-row.period-row-open > .mud-table-cell:first-child {
    box-shadow: inset 4px 0 0 var(--mud-palette-warning);
}
.mud-table-root .mud-table-body .mud-table-row.period-row-open .mud-table-cell {
    font-weight: 500;
}

/* PP-357: the row last shown in the payslip dialog, so the grid shows where you were after closing it. */
.mud-table-root .mud-table-body .mud-table-row.period-row-viewed > .mud-table-cell {
    background-color: var(--mud-palette-primary-hover);
}

/* A row marked .mud-theme-primary (selected row) gets the primary background, but every
   .mud-table-cell declares its own colour, so the row's colour is never inherited. Re-apply
   the on-primary token on the cells themselves, with enough specificity to beat MudBlazor
   (app.css is linked before MudBlazor.min.css). */
.mud-table-root .mud-table-body .mud-table-row.mud-theme-primary .mud-table-cell {
    color: var(--mud-palette-primary-text);
}

/* ===== OrgAdminSelector — gecombineerd organisatie + administratie appbar-control =====
   Globaal (niet scoped): MudPopover-content wordt naar de popover-provider geteleporteerd,
   waardoor component-scoped .razor.css het niet bereikt. ctx-prefix houdt het geïsoleerd. */
.ctx-wrap { position: relative; margin-right: 16px; }
/* MudIcon (SVG) volgt de tekstkleur van zijn context binnen dit control */
.ctx-btn .mud-icon-root, .ctx-pop .mud-icon-root { fill: currentColor; }
.ctx-btn { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .45); border-radius: 8px; padding: 6px 10px 6px 12px;
    cursor: pointer; color: #fff; font-family: inherit; max-width: 420px; text-transform: none; }
.ctx-btn:hover { background: rgba(255, 255, 255, .18); }
.ctx-btn.open { background: rgba(255, 255, 255, .20); }
.ctx-btn .ctx-lead { font-size: 22px; }
.ctx-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; text-align: left; }
.ctx-org { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-adm { font-size: 12px; font-weight: 400; opacity: .85; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.ctx-adm .ctx-warn-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #ffb3b3;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.ctx-adm .ctx-warn-ico { flex: none; font-size: 15px; color: #ffb3b3; }
.ctx-btn.invalid { border-color: rgba(255, 179, 179, .85); }
.ctx-chev { font-size: 20px; margin-left: 2px; transition: transform .15s; }
.ctx-btn.open .ctx-chev { transform: rotate(180deg); }

/* popover-paneel — twee kolommen; MudBlazor-palette-vars = dark-mode-proof */
.ctx-pop { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    border-radius: 8px; min-width: 720px; max-width: calc(100vw - 24px); overflow: hidden; }
.ctx-cols { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(360px, 1.4fr); }
.ctx-col { padding: 8px 0; }
.ctx-col + .ctx-col { border-left: 1px solid var(--mud-palette-lines-default); }
.ctx-colhead { font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--mud-palette-text-secondary); font-weight: 500; padding: 8px 16px 6px;
    display: flex; align-items: center; gap: 6px; }
.ctx-colhead .ctx-ro-tag { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400;
    font-size: 11px; color: var(--mud-palette-text-secondary); font-style: italic; }
.ctx-search { display: flex; align-items: center; gap: 6px; margin: 2px 12px 8px; padding: 6px 10px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 6px; }
.ctx-search:focus-within { border-color: var(--mud-palette-primary); }
.ctx-search .ctx-search-ico { font-size: 18px; color: var(--mud-palette-text-secondary); }
.ctx-search input { border: none; outline: none; background: transparent; font-family: inherit;
    font-size: 13px; width: 100%; color: var(--mud-palette-text-primary); }
.ctx-list { max-height: 300px; overflow-y: auto; }
.ctx-opt { display: flex; align-items: flex-start; gap: 10px; padding: 11px 16px; cursor: pointer;
    font-size: 14px; color: var(--mud-palette-text-primary); }
.ctx-opt > .ctx-opt-ico { font-size: 20px; color: var(--mud-palette-text-secondary); margin-top: 1px; }
.ctx-opt:hover { background: var(--mud-palette-action-default-hover); }
.ctx-opt.active { background: var(--mud-palette-primary-hover); color: var(--mud-palette-primary); font-weight: 500; }
.ctx-opt.active > .ctx-opt-ico { color: var(--mud-palette-primary); }
.ctx-opt .ctx-check { margin-left: auto; font-size: 18px; color: var(--mud-palette-primary);
    visibility: hidden; margin-top: 1px; }
.ctx-opt.selected .ctx-check { visibility: visible; }
.ctx-opt.readonly { cursor: default; }
.ctx-opt.readonly:hover { background: var(--mud-palette-primary-hover); }
.ctx-opt-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; padding-right: 8px; }
.ctx-opt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctx-opt-num { font-size: 11.5px; font-weight: 400; color: var(--mud-palette-text-secondary); margin-top: 2px; }
.ctx-opt.active .ctx-opt-num { color: var(--mud-palette-primary); opacity: .8; }
.ctx-opt-warn { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; font-weight: 500;
    line-height: 1.4; color: var(--mud-palette-error); margin-top: 7px; }
.ctx-opt-warn .ctx-opt-warn-ico { flex: none; font-size: 15px; color: var(--mud-palette-error); margin-top: 1px; }
.ctx-opt-warn .ctx-opt-warn-txt { min-width: 0; }
.ctx-opt.invalid { cursor: not-allowed; opacity: .85; }
.ctx-opt.invalid .ctx-opt-name { color: var(--mud-palette-text-secondary); }
.ctx-opt.invalid .ctx-opt-num { color: var(--mud-palette-error); }
.ctx-opt.invalid > .ctx-opt-ico { color: var(--mud-palette-action-disabled); }
.ctx-opt.invalid:hover { background: transparent; }
.ctx-opt.invalid .ctx-check { display: none; }
.ctx-opt-fix { font-size: 11px; font-weight: 400; color: var(--mud-palette-text-secondary);
    margin-top: 4px; font-style: italic; }
/* The row itself is not-allowed/non-hoverable; the recovery action inside it must still read as clickable. */
.ctx-opt.invalid .ctx-opt-fix-act { align-self: flex-start; margin-top: 6px; padding: 3px 8px; cursor: pointer;
    border: 1px solid var(--mud-palette-primary); border-radius: 4px; background: transparent;
    color: var(--mud-palette-primary); font: inherit; font-size: 11.5px; font-weight: 500; }
.ctx-opt.invalid .ctx-opt-fix-act:hover { background: var(--mud-palette-primary-hover); }
.ctx-empty { padding: 22px 16px; color: var(--mud-palette-text-secondary); font-size: 13px; text-align: center; }
.ctx-empty .ctx-empty-act { margin-top: 12px; padding: 6px 12px; cursor: pointer; border-radius: 4px;
    border: 1px solid var(--mud-palette-primary); background: transparent; color: var(--mud-palette-primary);
    font: inherit; font-size: 12.5px; font-weight: 500; }
.ctx-empty .ctx-empty-act:hover { background: var(--mud-palette-primary-hover); }
.ctx-foot { border-top: 1px solid var(--mud-palette-lines-default); padding: 9px 16px; font-size: 12px;
    color: var(--mud-palette-text-secondary); background: var(--mud-palette-background-grey);
    display: flex; align-items: center; gap: 6px; }
.ctx-foot .ctx-foot-ico { font-size: 16px; }
.ctx-foot .ctx-foot-act { flex: none; margin-left: auto; padding: 5px 10px; cursor: pointer; border-radius: 4px;
    border: 1px solid var(--mud-palette-primary); background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text); font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; }
.ctx-foot .ctx-foot-act:hover { filter: brightness(.94); }
.ctx-foot.warn .ctx-foot-txt { color: var(--mud-palette-warning-darken); }
.ctx-foot.warn .ctx-foot-ico { color: var(--mud-palette-warning); }
.ctx-foot.err { background: var(--mud-palette-error-hover); }
.ctx-foot.err .ctx-foot-ico, .ctx-foot.err .ctx-foot-txt { color: var(--mud-palette-error); }
.ctx-overlay.mud-overlay .mud-overlay-scrim { background: transparent; }

@media (max-width: 900px) {
    .ctx-text { display: none; }
    .ctx-btn { max-width: none; padding: 8px 8px 8px 10px; gap: 4px; }
    .ctx-pop { min-width: 0; width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
    .ctx-cols { grid-template-columns: 1fr; }
    .ctx-col + .ctx-col { border-left: none; border-top: 1px solid var(--mud-palette-lines-default); }
    .ctx-list { max-height: 220px; }
}

/* App-wide overview-grid styling (cao-module table look). Scoped to .mud-data-grid so
   inline MudTable editors (e.g. CAO parameters, pension age table) keep their own look. */
.mud-data-grid .mud-table-head .mud-table-cell {
    border-bottom: 2px solid var(--line);
}

.mud-data-grid .mud-table-head .column-header {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted);
    font-weight: 500;
}

.mud-data-grid .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--line);
}

.mud-data-grid .mud-table-body .mud-table-row:hover > .mud-table-cell {
    background-color: #f6f5fd;
}

/* Screen: the "print all annual statements" area is hidden, the print rules below reveal it. */
.annual-statement-print-only,
.sepa-print-only {
    display: none;
}

/* PDF export — print only the rendered payslip and honour page breaks.
   Triggered by the PDF button on /administration/payslips (window.print → "Save as PDF"). */
@media print {
    /* margin:0 leaves no room for the browser's auto date/URL header & footer, so they disappear; the
       readable page margin is applied as padding on the payslip below. */
    @page {
        margin: 0;
    }

    /* Hide the application chrome; show only the isolated payslip area. */
    .mud-appbar,
    .mud-drawer,
    .mud-drawer-mini,
    .mud-overlay {
        display: none !important;
    }

    .mud-main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    body * {
        visibility: hidden;
    }

    #payslip-print-area,
    #payslip-print-area *,
    #tax-return-print-area,
    #tax-return-print-area *,
    #payroll-journal-print-area,
    #payroll-journal-print-area *,
    #wage-statement-print-area,
    #wage-statement-print-area *,
    #annual-statement-print-area,
    #annual-statement-print-area *,
    #report-print-area,
    #report-print-area *,
    #sepa-print-area,
    #sepa-print-area * {
        visibility: visible;
    }

    #payslip-print-area,
    #tax-return-print-area,
    #payroll-journal-print-area,
    #wage-statement-print-area,
    #annual-statement-print-area,
    #report-print-area,
    #sepa-print-area {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    /* PP-357: the payslip dialog prints the payslip alone. payslipKeys.js puts payslip-dialog-open on the body while it is open. The app behind it is
       dropped, not hidden, or its height adds blank pages, and the fixed, scrolling dialog is unrolled into the page flow. */
    body.payslip-dialog-open > :not(.mud-dialog-container),
    body.payslip-dialog-open :is(.mud-dialog-title, .mud-dialog-actions, .mud-overlay),
    body.payslip-dialog-open [data-testid="payslip-dialog"] > :not(#payslip-print-area) {
        display: none !important;
    }

    body.payslip-dialog-open,
    body.payslip-dialog-open :is(.mud-dialog-container, .mud-dialog, .mud-focus-trap, .mud-dialog-content) {
        position: static !important;
        display: block !important;
        overflow: visible !important;
        height: auto !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        animation: none !important;
        filter: none !important;
        contain: none !important;
        will-change: auto !important;
    }

    /* A transform, filter or contain on an ancestor makes the fixed banner and watermark of the payslip fill that box instead of the page. */
    body.payslip-dialog-open #payslip-print-area {
        position: static;
    }

    /* PP-357: the round line above the payslip sits in the print area but outside the paper, so it gets the margin of the paper (14mm) itself. */
    #payslip-print-area > .payslip-version-label {
        margin: 0 !important;
        padding: 14mm 14mm 0;
        color: #000 !important;
    }

    /* One annual statement per page; the "print all" area only exists for the print dialog. */
    .annual-statement-print-only,
    .sepa-print-only {
        display: block;
    }

    /* PP-242: the payment file printout, A4 portrait; the column headings repeat on every page. The rest of the page is dropped, not hidden,
       or its height still adds blank pages. */
    .mud-container:has(> #sepa-print-area) > :not(#sepa-print-area) {
        display: none !important;
    }

    /* clone repeats the padding on every printed page; a named @page would add a blank first page. */
    #sepa-print-area {
        position: static;
        padding: 12mm;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        font-size: 9pt;
        color: #000;
    }

    #sepa-print-area h1 {
        font-size: 14pt;
        margin: 0 0 4mm;
    }

    .sepa-document table {
        width: 100%;
        border-collapse: collapse;
    }

    .sepa-document-head {
        margin-bottom: 6mm;
    }

    .sepa-document-head th {
        text-align: left;
        font-weight: 600;
        width: 18%;
        padding: 1mm 2mm 1mm 0;
    }

    .sepa-document-head td {
        width: 32%;
        padding: 1mm 2mm 1mm 0;
    }

    .sepa-document-lines th,
    .sepa-document-lines td {
        font-size: 8pt;
        text-align: left;
        padding: 1mm 1.5mm;
        border-bottom: 0.2mm solid #999;
        vertical-align: top;
    }

    /* DV number, IBAN and round stay on one line; the remittance and names may wrap. */
    .sepa-document-lines th:nth-child(2),
    .sepa-document-lines td:nth-child(2),
    .sepa-document-lines th:nth-child(3),
    .sepa-document-lines td:nth-child(3),
    .sepa-document-lines th:nth-child(5),
    .sepa-document-lines td:nth-child(5) {
        white-space: nowrap;
    }

    .sepa-document-lines thead {
        display: table-header-group;
    }

    .sepa-document-lines tr {
        break-inside: avoid;
    }

    /* A footer group repeats on every page by default; the total belongs at the end only. */
    .sepa-document-lines tfoot {
        display: table-row-group;
    }

    .sepa-document-lines tfoot td {
        font-weight: 600;
        border-top: 0.4mm solid #000;
    }

    .sepa-document-lines .sepa-document-amount {
        text-align: right;
        white-space: nowrap;
    }

    .sepa-document-voided {
        border: 0.4mm solid #b00020;
        color: #b00020;
        padding: 2mm 3mm;
        margin-bottom: 4mm;
    }

    /* Fixed, so it repeats on every printed page. */
    .sepa-document-watermark {
        position: fixed;
        top: 45%;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 72pt;
        font-weight: 700;
        color: rgba(176, 0, 32, 0.15);
        transform: rotate(-30deg);
        pointer-events: none;
    }

    .annual-statement-sheet {
        break-after: page;
    }

    .annual-statement-sheet:last-child {
        break-after: auto;
    }
}

/* Betaalbestanden-overzicht: every period card shares one fixed column layout (the <colgroup> in Index.razor), so
   amounts, dates and the action column line up across periods. Only the note column takes the remaining width and wraps. */
.sepa-overview table {
    table-layout: fixed;
    width: 100%;
    min-width: 1300px;
}

/* PP-406: the message id stays inside the first column: it fits on one line at 290 px and breaks inside the column if it ever does not; click copies it. */
.sepa-overview .sepa-msgid {
    display: block;
    max-width: 100%;
    word-break: break-all;
    cursor: pointer;
}

.sepa-overview .sepa-nowrap {
    white-space: nowrap;
}

.sepa-overview td {
    overflow-wrap: anywhere;
}

.sepa-overview th,
.sepa-overview td {
    padding-left: 8px;
    padding-right: 8px;
}

.sepa-overview .text-right {
    text-align: right;
}

/* PP-355: a concept row of a split period opens that concept. */
.sepa-overview .sepa-row-link {
    cursor: pointer;
}

.sepa-overview .sepa-row-link:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}

/* PP-406: a heading row (a round or a period) with the primary accent bar of period-row-open; the rows under it are indented. */
.sepa-overview .sepa-heading > td {
    background: var(--mud-palette-background-gray);
    border-top: 2px solid var(--mud-palette-lines-default);
}

.sepa-overview .sepa-heading > td:first-child {
    box-shadow: inset 4px 0 0 var(--mud-palette-primary);
}

.sepa-overview .sepa-indent > td:first-child {
    padding-left: 48px;
}

/* PP-356: globale zoeker in de appbar; zelfde behandeling als .ctx-btn, resultaten als kaart eronder */
.pp-search { position: relative; flex: 1 1 320px; width: auto; min-width: 160px; max-width: 520px; margin: 0 24px; }
.pp-search.open { z-index: 1301; }
.pp-scrim { position: fixed; inset: 0; z-index: -1; }
.pp-searchfield { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .45); border-radius: 8px; padding: 0 8px 0 12px; height: 40px; color: #fff; }
.pp-searchfield:hover { background: rgba(255, 255, 255, .18); }
.pp-searchfield.focus { background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.pp-searchfield .mud-icon-root { fill: currentColor; flex: none; }
.pp-searchfield input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: inherit; font: inherit; font-size: .875rem; height: 100%; }
.pp-searchfield input::placeholder { color: rgba(255, 255, 255, .75); }
.pp-searchfield.focus input::placeholder { color: var(--mud-palette-text-secondary); }
.pp-searchfield.disabled { opacity: .6; cursor: not-allowed; }
.pp-clear { background: transparent; border: 0; color: inherit; cursor: pointer; display: inline-flex; padding: 4px; border-radius: 50%; }
.pp-clear:hover { background: rgba(127, 127, 127, .2); }
.pp-kbd { font: 12px/1 Roboto, Arial; border: 1px solid rgba(255, 255, 255, .5); border-radius: 4px; padding: 3px 6px; opacity: .85; }
.pp-results { position: absolute; top: 46px; left: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow: auto; background: var(--mud-palette-surface); color: var(--mud-palette-text-primary);
    border-radius: 8px; box-shadow: var(--mud-elevation-8); z-index: 1300; }
.pp-grp { font-size: 12px; font-weight: 500; letter-spacing: .5px; text-transform: uppercase; color: var(--mud-palette-primary); padding: 10px 16px 4px; display: flex; justify-content: space-between; align-items: center; }
.pp-count { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--mud-palette-text-secondary); }
.pp-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; cursor: pointer; color: inherit; text-decoration: none; }
.pp-item:hover, .pp-item.sel { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.pp-item.sel { box-shadow: inset 3px 0 0 var(--mud-palette-primary); }
.pp-item .mud-icon-root { fill: var(--mud-palette-text-secondary); flex: none; }
.pp-text { flex: 1; min-width: 0; }
.pp-item .t1 { font-size: .875rem; }
.pp-item .t2 { font-size: 12px; color: var(--mud-palette-text-secondary); }
.pp-item mark { background: transparent; color: var(--mud-palette-primary); font-weight: 700; }
.pp-item .go { flex: none; opacity: 0; }
.pp-item.sel .go { opacity: .8; }
.pp-all { display: block; padding: 6px 16px 8px 52px; font-size: 12px; }
.pp-foot { border-top: 1px solid var(--mud-palette-lines-default); padding: 8px 16px; font-size: 12px; color: var(--mud-palette-text-secondary); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-empty { padding: 28px 24px; text-align: center; color: var(--mud-palette-text-secondary); }
.pp-empty > .mud-icon-root { width: 48px; height: 48px; fill: var(--mud-palette-text-secondary); }
.pp-state { padding: 14px 16px; }
@media (max-width: 1000px) {
    .pp-lsp { display: none; }
    .pp-search { flex: 0 0 40px; min-width: 40px; max-width: 40px; margin: 0 12px; }
    .pp-searchfield:not(.focus) { padding: 0; justify-content: center; width: 40px; }
    .pp-searchfield:not(.focus) input { width: 0; flex: 0 0 0; padding: 0; opacity: 0; }
    .pp-searchfield:not(.focus) .pp-kbd, .pp-searchfield:not(.focus) .pp-clear { display: none; }
    .pp-searchfield.focus { position: fixed; top: 12px; left: 12px; right: 12px; z-index: 1302; height: 40px; }
    .pp-results { position: fixed; top: 58px; left: 12px; right: 12px; width: auto; }
}

/* PP-398: the action chips of the audit rows (class audit-chip + audit-<action>) in the colours of the approved PP-398 mockup: a light tint with dark text, every pair
   at 4.5:1 or more on its own background, so the same in light and dark mode. */
.mud-chip.mud-chip-filled.audit-chip { font-weight: 700; }
.mud-chip.mud-chip-filled.audit-chip:hover, .mud-chip.mud-chip-filled.audit-chip:focus-visible, .mud-chip.mud-chip-filled.audit-chip:active { filter: brightness(0.95); }
.mud-chip.mud-chip-filled.audit-chip.audit-add { background-color: #e4f3e4; color: #1d5a1d; }
.mud-chip.mud-chip-filled.audit-chip.audit-update { background-color: #f7ecd9; color: #6a4510; }
.mud-chip.mud-chip-filled.audit-chip.audit-delete { background-color: #fbe4e4; color: #8b1d1d; }
.mud-chip.mud-chip-filled.audit-chip.audit-view { background-color: #e8eaed; color: #3c4043; }
.mud-chip.mud-chip-filled.audit-chip.audit-login { background-color: #e3ecf8; color: #1f4a85; }
.mud-chip.mud-chip-filled.audit-chip.audit-process { background-color: #ece9fb; color: #3a2fa6; }

/* PP-398: the right chips of the permission group form (class perm-chip) as in the PP-395 mockup: on = #594AE2 with white (6.0:1), dangerous on = #C62828 with white (5.6:1),
   dangerous off = its own light red with dark red text (fixed pair, so it also reads on the dark surface). Off chips keep the theme's outlined default. */
.mud-chip.perm-chip.mud-chip-filled { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55); }
.mud-chip.perm-chip.mud-chip-filled.mud-chip-color-primary { background-color: #594ae2; }
.mud-chip.perm-chip.mud-chip-filled.mud-chip-color-primary:hover, .mud-chip.perm-chip.mud-chip-filled.mud-chip-color-primary:focus-visible, .mud-chip.perm-chip.mud-chip-filled.mud-chip-color-primary:active { background-color: #4636c9; }
.mud-chip.perm-chip.mud-chip-filled.mud-chip-color-error { background-color: #c62828; }
.mud-chip.perm-chip.mud-chip-filled.mud-chip-color-error:hover, .mud-chip.perm-chip.mud-chip-filled.mud-chip-color-error:focus-visible, .mud-chip.perm-chip.mud-chip-filled.mud-chip-color-error:active { background-color: #a81f1f; }
.mud-chip.perm-chip.mud-chip-outlined.mud-chip-color-error { background-color: #fdecec; color: #8f1d1d; border-color: #c62828; }
.mud-chip.perm-chip.mud-chip-outlined.mud-chip-color-error:hover, .mud-chip.perm-chip.mud-chip-outlined.mud-chip-color-error:focus-visible, .mud-chip.perm-chip.mud-chip-outlined.mud-chip-color-error:active { background-color: #f8d4d4; color: #8f1d1d; }

/* PP-398: readable audit rows, the colours of the approved mockup. The pieces that sit on the page (old and new value, the arrow, the link) are coloured text on the
   light surface; on the dark surface they do not reach 4.5:1 (#8b1d1d 1.9, #1d5a1d 2.2, #5a5a5a 2.2, #7a5214 2.3), so there they get the light tint behind them, or the
   theme's text colour for the arrow and the link. The badges and the module block carry their own background and are the same in both modes. */
.audit-line { display: flex; gap: 6px; align-items: baseline; font-size: 0.8125rem; }
.audit-line .mud-icon-root { align-self: center; flex: none; }
.audit-old { color: #8b1d1d; text-decoration: line-through; }
.audit-old-text { color: #8b1d1d; font-weight: 700; }
.audit-new { color: #1d5a1d; font-weight: 700; }
.audit-arrow { color: #5a5a5a; }
.mud-link.audit-link { color: #7a5214; }
.pp-dark .audit-old, .pp-dark .audit-old-text { background: #fbe4e4; border-radius: 3px; padding: 0 4px; }
.pp-dark .audit-new { background: #e4f3e4; border-radius: 3px; padding: 0 4px; }
.pp-dark .audit-arrow { color: inherit; }
.pp-dark .mud-link.audit-link { color: inherit; }
.audit-badge { display: inline-block; border-radius: 4px; padding: 0 6px; font-size: 0.6875rem; font-weight: 700; margin-left: 6px; background: #ece9fb; color: #3a2fa6; }
.audit-badge.audit-unknown { background: #fff4cc; color: #5b4a00; }
.audit-summary { cursor: pointer; display: flex; gap: 6px; align-items: center; font-size: 0.8125rem; }
.audit-module { background: #faf3e8; color: #2c2c2c; border-radius: 4px; padding: 3px 8px; margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.8125rem; }
.pp-dark .audit-module .audit-new, .pp-dark .audit-module .audit-old-text { background: transparent; padding: 0; }
.audit-module-name { min-width: 140px; }
.audit-module-count { font-weight: 400; }

/* PP-395: the compare matrix scrolls inside its card with a sticky header. The height limit sits on the scroll container: on the table root a percentage max-height of
   the container did not resolve, so the rows rendered below the card. */
.mud-simple-table.pp-compare-table .mud-table-container { max-height: calc(100vh - 320px); overflow: auto; }

/* PP-427: tax return detail page (Te herstellen, list, side panel). Global because the classes are shared by Detail, TaxReturnRepairBlock and
   TaxReturnLinePanel and the row class lands on a MudDataGrid <tr>. Severity sits on the icon, the border and the tint; text stays the text colour. */
.tr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.tr-kpi { padding: 16px; }
.tr-kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 500; color: var(--muted); }
.tr-kpi-value { font-size: 24px; font-weight: 400; color: var(--mud-palette-text-primary); margin-top: 4px; line-height: 1.25; }
.tr-kpi-of { font-size: 15px; color: var(--muted); }
.tr-kpi-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.tr-count { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px; border-radius: 12px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--mud-palette-lines-inputs); background: var(--mud-palette-surface); color: var(--mud-palette-text-primary); white-space: nowrap; }
.tr-count.error { border-color: var(--mud-palette-error); background: var(--mud-palette-error-hover); }
.tr-count.warning { border-color: var(--mud-palette-warning); background: var(--mud-palette-warning-hover); }
.tr-count.success { border-color: var(--mud-palette-success); background: var(--mud-palette-success-hover); }
.tr-count.info { border-color: var(--mud-palette-info); background: var(--mud-palette-info-hover); }
.tr-count .mud-icon-root { font-size: 16px; }
.tr-sev-error { color: var(--mud-palette-error); }
.tr-sev-success { color: var(--mud-palette-success); }
.tr-tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--mud-palette-lines-inputs); color: var(--muted);
    background: var(--mud-palette-surface); white-space: nowrap; }
.tr-card-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--mud-palette-lines-default); flex-wrap: wrap; }
.tr-group { border-bottom: 1px solid var(--mud-palette-lines-default); }
.tr-group:last-child { border-bottom: 0; }
.tr-group > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 8px 16px; cursor: pointer; }
.tr-group > summary::-webkit-details-marker { display: none; }
.tr-group > summary:hover { background: var(--mud-palette-action-default-hover); }
.tr-group > summary .tr-chev { color: var(--mud-palette-action-default); transition: transform .15s; }
.tr-group[open] > summary .tr-chev { transform: rotate(90deg); }
.tr-group-title { font-weight: 500; color: var(--mud-palette-text-primary); }
.tr-group-body { padding: 0 16px 12px 52px; }
.tr-group-body .tr-fix { white-space: nowrap; width: 1%; text-align: right; }
.tr-toolbar { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-wrap: wrap; }
.tr-toolbar .tr-search { flex: 0 1 320px; margin: 0; }
.tr-filterchip { margin: 0; }
.mud-table-root .mud-table-body .mud-table-row.tr-row-issue > .mud-table-cell:first-child { box-shadow: inset 4px 0 0 var(--mud-palette-error); }
.mud-table-root .mud-table-body .mud-table-row.mud-theme-primary .tr-count { color: var(--mud-palette-text-primary); background: var(--mud-palette-surface); }
.tr-panel { position: fixed; top: var(--mud-appbar-height); right: 0; bottom: 0; width: 600px; max-width: 100vw; z-index: 1250; display: flex; flex-direction: column;
    background: var(--mud-palette-surface); outline: none; }
.tr-panel-head { padding: 12px 16px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.tr-panel-body { overflow: auto; padding: 16px; flex: 1; }
.tr-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-sec { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--ind); }
.tr-sec:first-child { margin-top: 0; }
.tr-sec .tr-sec-switch .mud-typography { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--mud-palette-text-primary); }
.tr-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
.tr-fact-label { font-size: 12px; color: var(--muted); }
.tr-fact-value { font-size: 14px; color: var(--mud-palette-text-primary); }
.tr-issue { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 8px; border-radius: 4px;
    border: 1px solid var(--mud-palette-lines-default); border-left: 4px solid var(--mud-palette-error); }
.tr-issue-msg { flex: 1; font-size: 14px; color: var(--mud-palette-text-primary); }
.tr-issue-msg small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.tr-rubrics td { padding: 4px 8px !important; }
.tr-rubrics .tr-rubric-group td { padding-top: 12px !important; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }