@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Fluent 2 app shell.
   The shell is a fixed-height flex column: header on top, then a body row with
   the navigation rail and the scrollable content region. Scrolling happens
   inside .content only, which keeps the header and nav permanently in view and
   prevents the whole page from scrolling sideways on wide tables. */

.fluent-shell[b-0730wfy39j] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--fluent-neutral-background-3, #f5f5f5);
}

/* ---------- Suite header ---------- */

.app-header[b-0730wfy39j] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: var(--fluent-header-height, 48px);
    flex: 0 0 auto;
    padding: 0 1rem;
    background-color: var(--fluent-brand, #0f6cbd);
    color: #ffffff;
    border-bottom: none;
    z-index: 3;
}

.app-brand[b-0730wfy39j] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: calc(var(--fluent-nav-width, 260px) - 1rem);
    flex: 0 0 auto;
}

.app-brand-mark[b-0730wfy39j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--fluent-radius-medium, 4px);
    background-color: rgba(255, 255, 255, .18);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.app-brand-name[b-0730wfy39j] {
    font-size: 0.9375rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-header-context[b-0730wfy39j] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.app-header-actions[b-0730wfy39j] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.app-header-action[b-0730wfy39j] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 32px;
    padding: 0 0.625rem;
    border-radius: var(--fluent-radius-medium, 4px);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.app-header-action:hover[b-0730wfy39j] {
    background-color: rgba(255, 255, 255, .16);
    color: #ffffff;
    text-decoration: none;
}

/* The selection dropdowns sit on the brand-coloured band, Microsoft 365 style. */
.app-header-context[b-0730wfy39j]  .form-control,
.app-header-context[b-0730wfy39j]  .form-select {
    height: 32px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.8125rem;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: var(--fluent-radius-medium, 4px);
    background-color: var(--fluent-neutral-background-1);
}

.app-header-context[b-0730wfy39j]  .text-muted {
    color: rgba(255, 255, 255, .85) !important;
}

/* ---------- Body: nav rail + content ---------- */

.app-body[b-0730wfy39j] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.app-nav[b-0730wfy39j] {
    flex: 0 0 auto;
    width: var(--fluent-nav-width, 260px);
    background-color: var(--fluent-neutral-background-2, #fafafa);
    border-right: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    overflow-y: auto;
    overflow-x: hidden;
}

.app-main[b-0730wfy39j] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.content[b-0730wfy39j] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.25rem 1.5rem 1.5rem;
    background-color: var(--fluent-neutral-background-3, #f5f5f5);
    overflow: auto;
}

/* ---------- Menu button (narrow screens only) ---------- */

/* The checkbox stays in the tab order so the menu can be opened with the keyboard; it is
   visually replaced by the label in the header. */
.app-nav-toggle[b-0730wfy39j] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.app-nav-toggle-button[b-0730wfy39j] {
    display: none;
    align-items: center;
    gap: 0.375rem;
    height: 32px;
    margin: 0;
    padding: 0 0.625rem;
    border-radius: var(--fluent-radius-medium, 4px);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    flex: 0 0 auto;
}

.app-nav-toggle-button:hover[b-0730wfy39j],
.app-nav-toggle:checked ~ .app-header .app-nav-toggle-button[b-0730wfy39j] {
    background-color: rgba(255, 255, 255, .16);
}

.app-nav-toggle:focus-visible ~ .app-header .app-nav-toggle-button[b-0730wfy39j] {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
}

.app-nav-toggle-button .bi[b-0730wfy39j] {
    font-size: 1.25rem;
    line-height: 1;
}

/* Desktop: lock the shell to the viewport so only .content scrolls. */
@media (min-width: 641px) {
    .fluent-shell[b-0730wfy39j] {
        height: 100vh;
        min-height: 100vh;
        overflow: hidden;
    }

    .app-nav[b-0730wfy39j] {
        height: calc(100vh - var(--fluent-header-height, 48px));
    }
}

/* Narrow screens: the nav hides behind the menu button and opens above the content; the
   selection lists move to their own row under the header; the page scrolls normally. */
@media (max-width: 640.98px) {
    .app-header[b-0730wfy39j] {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        height: auto;
        min-height: var(--fluent-header-height, 48px);
        padding: 0.5rem 0.75rem;
    }

    .app-nav-toggle-button[b-0730wfy39j] {
        display: inline-flex;
    }

    .app-header-actions[b-0730wfy39j] {
        margin-left: auto;
    }

    .app-header-context[b-0730wfy39j] {
        order: 1;
        flex: 1 1 100%;
        overflow: visible;
    }

    .app-header-context[b-0730wfy39j]  select {
        width: 100% !important;
        margin: 0 0 0.375rem !important;
    }

    .app-nav[b-0730wfy39j] {
        display: none;
    }

    .app-nav-toggle:checked ~ .app-body .app-nav[b-0730wfy39j] {
        display: block;
    }

    .app-brand[b-0730wfy39j] {
        min-width: 0;
    }

    .app-brand-name[b-0730wfy39j] {
        display: none;
    }

    .app-header-action-label[b-0730wfy39j] {
        display: none;
    }

    .app-body[b-0730wfy39j] {
        flex-direction: column;
    }

    .app-nav[b-0730wfy39j] {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    }

    .content[b-0730wfy39j] {
        padding: 1rem;
    }
}

#blazor-error-ui[b-0730wfy39j] {
    color-scheme: light only;
    background: var(--fluent-warning-tint, #fff4ce);
    color: var(--fluent-neutral-foreground-1, #242424);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-0730wfy39j] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Fluent 2 navigation rail styling.
   Neutral surface, 32px rows, 4px corners and a brand indicator bar on the
   selected item - the same anatomy the Fluent UI nav components use. */

.nav-shell[b-f9khtgacqe] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.5rem 0.5rem 1rem;
}

/* ---------- Role identity block ---------- */

.nav-identity[b-f9khtgacqe] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

.nav-identity-avatar[b-f9khtgacqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--fluent-brand, #0f6cbd);
    color: #ffffff;
    font-size: 0.8125rem;
    font-weight: 600;
    flex: 0 0 auto;
}

.role-admin .nav-identity-avatar[b-f9khtgacqe] { background-color: var(--fluent-purple); }
.role-manager .nav-identity-avatar[b-f9khtgacqe] { background-color: var(--fluent-teal); }
.role-accountant .nav-identity-avatar[b-f9khtgacqe] { background-color: var(--fluent-brand); }
.role-client .nav-identity-avatar[b-f9khtgacqe] { background-color: var(--fluent-danger); }
.role-appadmin .nav-identity-avatar[b-f9khtgacqe] { background-color: var(--fluent-purple); }
.role-default .nav-identity-avatar[b-f9khtgacqe] { background-color: #616161; }

.nav-identity-text[b-f9khtgacqe] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nav-identity-role[b-f9khtgacqe] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1, #242424);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-identity-hint[b-f9khtgacqe] {
    font-size: 0.6875rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Nav items ---------- */

.nav-scrollable[b-f9khtgacqe] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}

.nav-caption[b-f9khtgacqe] {
    padding: 0.75rem 0.625rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.nav-item[b-f9khtgacqe] {
    padding: 0 0;
    margin-bottom: 2px;
}

.nav-item-footer[b-f9khtgacqe] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

.nav-item[b-f9khtgacqe]  .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 32px;
    padding: 0 0.625rem;
    border-radius: var(--fluent-radius-medium, 4px);
    color: var(--fluent-neutral-foreground-1, #242424);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 32px;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
}

.nav-item[b-f9khtgacqe]  .nav-link:hover {
    background-color: var(--fluent-neutral-background-hover, #f5f5f5);
    color: var(--fluent-neutral-foreground-1, #242424);
    text-decoration: none;
}

.nav-item[b-f9khtgacqe]  .nav-link:active {
    background-color: var(--fluent-neutral-background-selected, #ebebeb);
}

.nav-item[b-f9khtgacqe]  a.active {
    background-color: var(--fluent-neutral-background-selected, #ebebeb);
    color: var(--fluent-neutral-foreground-1, #242424);
    font-weight: 600;
}

/* Fluent's selected-state indicator bar */
.nav-item[b-f9khtgacqe]  a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 2px;
    background-color: var(--fluent-brand, #0f6cbd);
}

.nav-item[b-f9khtgacqe]  a.active svg {
    fill: var(--fluent-brand, #0f6cbd);
    color: var(--fluent-brand-foreground-link, #0f6cbd);
}

.nav-item[b-f9khtgacqe]  svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.nav-item[b-f9khtgacqe]  .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Counts something that needs the user's attention behind this menu item. Pushed to the far right
   so it reads as a tally of the destination rather than as part of the label. */
.nav-item[b-f9khtgacqe]  .nav-badge-alert {
    margin-left: auto;
    min-width: 18px;
    padding: 0 0.3125rem;
    border-radius: 9px;
    background: var(--fluent-palette-red-background-3, #c50f1f);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
.public-page[b-k5ymu2hbld] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    color: #1a2540;
}

.public-header[b-k5ymu2hbld] {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #eef0f5;
}

.public-brand[b-k5ymu2hbld] {
    display: flex;
    align-items: center;
    color: #1a2540;
    font-weight: 700;
    font-size: 1.25rem;
}

.brand-mark[b-k5ymu2hbld] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--fluent-radius-large, 6px);
    background: var(--fluent-brand, #0f6cbd);
    color: #fff;
    margin-right: 0.6rem;
    font-size: 1.1rem;
}

.public-nav a[b-k5ymu2hbld] {
    margin: 0 0.9rem;
    color: #475068;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.public-nav a:hover[b-k5ymu2hbld] {
    color: var(--fluent-brand-foreground-link, #0f6cbd);
}

/* Rounded like the call-to-action buttons on the public pages. */
.btn-login[b-k5ymu2hbld] {
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    background: var(--fluent-brand, #0f6cbd);
    border: none;
}

.btn-login:hover[b-k5ymu2hbld] {
    background: var(--fluent-brand-hover, #115ea3);
}

.public-main[b-k5ymu2hbld] {
    flex: 1;
}

.public-footer[b-k5ymu2hbld] {
    background: #0e1730;
    color: #cbd2e2;
    margin-top: 4rem;
}

    .public-footer[b-k5ymu2hbld]  a {
        color: #cbd2e2;
        text-decoration: none;
    }

    .public-footer[b-k5ymu2hbld]  a:hover {
        color: #ffffff;
    }

.footer-title[b-k5ymu2hbld] {
    color: #ffffff;
    margin-bottom: 0.75rem;
}

.public-footer hr[b-k5ymu2hbld] {
    border-color: #1f2a48;
}

.public-legal-bar[b-k5ymu2hbld] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

/* Blazor's error bar: hidden until the framework shows it on an actual error. Without this rule
   the bar's text stood under the footer of every public page. Same styling as MainLayout. */
#blazor-error-ui[b-k5ymu2hbld] {
    color-scheme: light only;
    background: var(--fluent-warning-tint, #fff4ce);
    color: var(--fluent-neutral-foreground-1, #242424);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-k5ymu2hbld] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/ClientDashboard.razor.rz.scp.css */
/* ==========================================================================
   Client dashboard - the first screen a client sees.
   Built on the Fluent 2 tokens from wwwroot/css/fluent-theme.css so the page
   inherits the same colours, radii and elevation as the rest of the app.
   ========================================================================== */

.client-dash[b-6ziba6137g] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 1180px;
}

/* ---- Hero ---------------------------------------------------------------- */

.client-hero[b-6ziba6137g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    border-radius: var(--fluent-radius-xlarge);
    border: 1px solid var(--fluent-neutral-stroke-2);
    background: linear-gradient(135deg, var(--fluent-brand) 0%, var(--fluent-brand-selected) 100%);
    color: #fff;
    box-shadow: var(--fluent-shadow-8);
}

.client-hero-main[b-6ziba6137g] {
    min-width: 16rem;
    flex: 1 1 24rem;
}

.client-hero-eyebrow[b-6ziba6137g] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    margin-bottom: 0.375rem;
}

.client-hero-title[b-6ziba6137g] {
    color: #fff;
    font-size: 1.75rem;
    line-height: 2.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}

.client-hero-lead[b-6ziba6137g] {
    margin: 0;
    max-width: 44rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

/* Progress ring: a single conic gradient, no extra markup or script. */
.progress-ring[b-6ziba6137g] {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: conic-gradient(var(--fluent-neutral-background-1) calc(var(--ring-value) * 1%), rgba(255, 255, 255, .28) 0);
}

.progress-ring-inner[b-6ziba6137g] {
    width: 5.75rem;
    height: 5.75rem;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--fluent-brand-selected);
    line-height: 1.1;
}

.progress-ring-value[b-6ziba6137g] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
}

.progress-ring-unit[b-6ziba6137g] {
    font-size: 0.875rem;
    font-weight: 600;
}

.progress-ring-caption[b-6ziba6137g] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, .8);
    margin-top: 0.125rem;
}

/* ---- Card grid ----------------------------------------------------------- */

.client-dash-grid[b-6ziba6137g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.25rem;
    align-items: stretch;
}

.client-card[b-6ziba6137g] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--fluent-neutral-background-1);
    border: 1px solid var(--fluent-neutral-stroke-2);
    border-radius: var(--fluent-radius-xlarge);
    box-shadow: var(--fluent-shadow-2);
    height: 100%;
}

.client-card-header[b-6ziba6137g] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
}

.client-card-icon[b-6ziba6137g] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--fluent-radius-large);
    background: var(--fluent-brand-tint-60);
    color: var(--fluent-brand-foreground-link);
    font-size: 1.125rem;
}

.client-card-title[b-6ziba6137g] {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.4;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
}

.client-card-subtitle[b-6ziba6137g] {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--fluent-neutral-foreground-3);
}

.client-card-actions[b-6ziba6137g] {
    margin-top: auto;
}

.client-empty[b-6ziba6137g] {
    font-size: 0.8125rem;
    color: var(--fluent-neutral-foreground-3);
}

/* ---- Attention card ------------------------------------------------------
   Sits between the hero and the grid, so the klant-administrator meets it before
   his own taken. Warm rather than red: nothing is broken, something is waiting. */

.client-card-attention[b-6ziba6137g] {
    height: auto;
    margin-bottom: 1.5rem;
    border-color: var(--fluent-palette-yellow-border-1, #dcb000);
    background: var(--fluent-palette-yellow-background-1, #fff9e5);
}

.client-card-icon-attention[b-6ziba6137g] {
    background: var(--fluent-palette-yellow-background-2, #fff3cd);
    color: var(--fluent-palette-yellow-foreground-1, #815900);
}

.client-attention-list[b-6ziba6137g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
}

.client-attention-list li[b-6ziba6137g] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--fluent-radius-medium, 4px);
    background: var(--fluent-neutral-background-1);
    border: 1px solid var(--fluent-neutral-stroke-2);
}

.client-attention-tag[b-6ziba6137g] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--fluent-neutral-foreground-3);
}

/* ---- Progress ------------------------------------------------------------ */

.client-progress-track[b-6ziba6137g] {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--fluent-neutral-background-4);
    overflow: hidden;
}

.client-progress-fill[b-6ziba6137g] {
    height: 100%;
    border-radius: 999px;
    background: var(--fluent-brand);
    transition: width .3s cubic-bezier(.33, 0, .67, 1);
}

.client-progress-legend[b-6ziba6137g] {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--fluent-neutral-foreground-3);
}

.client-stats[b-6ziba6137g] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.client-stat[b-6ziba6137g] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem;
    border-radius: var(--fluent-radius-large);
    background: var(--fluent-neutral-background-2);
    border: 1px solid var(--fluent-neutral-stroke-3);
}

.client-stat-value[b-6ziba6137g] {
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fluent-neutral-foreground-1);
}

.client-stat-label[b-6ziba6137g] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fluent-neutral-foreground-3);
}

/* ---- Deadlines ----------------------------------------------------------- */

.client-deadlines[b-6ziba6137g],
.client-contacts[b-6ziba6137g] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.client-deadline[b-6ziba6137g] {
    display: block;
    padding: 0.875rem 1rem;
    border-radius: var(--fluent-radius-large);
    border: 1px solid var(--fluent-neutral-stroke-2);
    background: var(--fluent-neutral-background-2);
    color: inherit;
    text-decoration: none;
    transition: background-color .1s ease, border-color .1s ease, box-shadow .1s ease;
}

a.client-deadline:hover[b-6ziba6137g] {
    text-decoration: none;
    border-color: var(--fluent-brand-tint-40);
    box-shadow: var(--fluent-shadow-4);
}

a.client-deadline:hover .client-deadline-cta[b-6ziba6137g] {
    color: var(--fluent-brand-hover);
}

.client-deadline-cta[b-6ziba6137g] {
    font-weight: 600;
    color: var(--fluent-brand-foreground-link);
    white-space: nowrap;
}

.client-deadline.is-current[b-6ziba6137g] {
    border-color: var(--fluent-brand-tint-40);
    background: var(--fluent-brand-tint-60);
}

.client-deadline-head[b-6ziba6137g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.client-deadline-phase[b-6ziba6137g] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--fluent-neutral-foreground-3);
}

.client-deadline-chip[b-6ziba6137g] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.client-deadline-chip.is-calm[b-6ziba6137g] {
    background: var(--fluent-success-tint);
    color: var(--fluent-success);
}

.client-deadline-chip.is-soon[b-6ziba6137g] {
    background: var(--fluent-warning-tint);
    color: var(--fluent-warning-foreground);
}

.client-deadline-chip.is-late[b-6ziba6137g] {
    background: var(--fluent-danger-tint);
    color: var(--fluent-danger);
}

.client-deadline-date[b-6ziba6137g] {
    margin-top: 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
}

.client-deadline-note[b-6ziba6137g] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--fluent-neutral-foreground-3);
}

/* The phase switch sits on the left, not stretched across the card. */
.client-card .segmented[b-6ziba6137g] {
    align-self: flex-start;
    margin-top: -0.25rem;
}

/* ---- Contacts ------------------------------------------------------------ */

.client-contact[b-6ziba6137g] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.client-contact-avatar[b-6ziba6137g] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--fluent-brand);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
}

.client-contact-body[b-6ziba6137g] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.client-contact-name[b-6ziba6137g] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1);
}

.client-contact-role[b-6ziba6137g] {
    font-size: 0.75rem;
    color: var(--fluent-neutral-foreground-3);
}

.client-contact-link[b-6ziba6137g] {
    font-size: 0.75rem;
    word-break: break-all;
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* ============================================================
   Audit Copilot - Public landing page styles
   ============================================================ */

[b-jz8s5p9yqe] .section {
    padding: 13rem 0 6rem;
    scroll-margin-top: 80px; /* offset for sticky header so anchors land below it */
}
[b-jz8s5p9yqe] .section-alt { background: #f6f8fc; }
/* The hero is a top-level element of this component, so it is matched without ::deep
   (::deep only reaches elements nested inside a scoped element). */
.hero[b-jz8s5p9yqe] { scroll-margin-top: 80px; }
[b-jz8s5p9yqe] #voordelen, [b-jz8s5p9yqe] #hoe-het-werkt, [b-jz8s5p9yqe] #beveiliging, [b-jz8s5p9yqe] #contact { scroll-margin-top: 80px; }

[b-jz8s5p9yqe] .section-head { max-width: 720px; margin: 0 auto 1.75rem; }
[b-jz8s5p9yqe] .section-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.78rem;
    font-weight: 700;
    color: #4f7cff;
    margin-bottom: 0.75rem;
}
[b-jz8s5p9yqe] .section-head h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: #0e1730;
    margin-bottom: 0.75rem;
}
[b-jz8s5p9yqe] .section-sub { color: #5b6680; font-size: 1.05rem; }
[b-jz8s5p9yqe] .lead-muted { color: #5b6680; font-size: 1.05rem; }
[b-jz8s5p9yqe] .gradient-text {
    background: linear-gradient(135deg, #4f7cff 0%, #6a4fff 60%, #b14fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* -------- HERO -------- */
.hero[b-jz8s5p9yqe] {
    background: radial-gradient(1200px 600px at 20% -10%, rgba(79,124,255,0.12), transparent 60%),
                radial-gradient(900px 500px at 100% 0%, rgba(106,79,255,0.10), transparent 60%),
                #ffffff;
    padding: 5rem 0 6rem;
    overflow: hidden;
}
[b-jz8s5p9yqe] .hero-badge {
    display: inline-block;
    background: rgba(79,124,255,0.10);
    color: #4f7cff;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}
[b-jz8s5p9yqe] .hero-title {
    font-size: clamp(2.2rem, 4.5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: #0e1730;
    margin-bottom: 1.25rem;
}
[b-jz8s5p9yqe] .hero-lead {
    font-size: 1.15rem;
    color: #475068;
    margin-bottom: 2rem;
    max-width: 580px;
}
[b-jz8s5p9yqe] .hero-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
[b-jz8s5p9yqe] .hero-cta .btn-primary {
    background: linear-gradient(135deg, #4f7cff 0%, #6a4fff 100%);
    border: none;
    border-radius: 999px;
    padding: 0.85rem 2rem;
    box-shadow: 0 12px 30px -10px rgba(79,124,255,0.55);
}
[b-jz8s5p9yqe] .hero-cta .btn-outline-primary {
    border-radius: 999px;
    padding: 0.85rem 2rem;
    border-width: 2px;
}

[b-jz8s5p9yqe] .hero-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }
[b-jz8s5p9yqe] .hero-stats > div { display: flex; flex-direction: column; }
[b-jz8s5p9yqe] .hero-stats strong {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0e1730;
    line-height: 1;
}
[b-jz8s5p9yqe] .hero-stats span { font-size: 0.85rem; color: #6b7794; margin-top: 0.25rem; }

[b-jz8s5p9yqe] .hero-illustration {
    position: relative;
    height: 440px;
}
[b-jz8s5p9yqe] .hero-orb {
    position: absolute;
    inset: 10% 10% 10% 10%;
    background: linear-gradient(135deg, #4f7cff 0%, #6a4fff 60%, #b14fff 100%);
    border-radius: 32% 68% 53% 47% / 38% 56% 44% 62%;
    filter: blur(2px);
    opacity: 0.85;
    animation: morph-b-jz8s5p9yqe 12s ease-in-out infinite;
    box-shadow: 0 30px 80px -20px rgba(106,79,255,0.55);
}
@keyframes morph-b-jz8s5p9yqe {
    0%,100% { border-radius: 32% 68% 53% 47% / 38% 56% 44% 62%; }
    50%     { border-radius: 58% 42% 40% 60% / 60% 40% 60% 40%; }
}

[b-jz8s5p9yqe] .float-card {
    position: absolute;
    background: #fff;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    box-shadow: 0 20px 40px -15px rgba(14,23,48,0.18);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 220px;
    z-index: 2;
    animation: floaty-b-jz8s5p9yqe 6s ease-in-out infinite;
}
[b-jz8s5p9yqe] .float-card i { font-size: 1.5rem; }
[b-jz8s5p9yqe] .float-card strong { display: block; font-size: 0.92rem; color: #0e1730; }
[b-jz8s5p9yqe] .float-card small { color: #6b7794; font-size: 0.78rem; }
[b-jz8s5p9yqe] .card-1 { top: 5%; left: -5%; }
[b-jz8s5p9yqe] .card-2 { top: 42%; right: -5%; animation-delay: -2s; }
[b-jz8s5p9yqe] .card-3 { bottom: 5%; left: 8%; animation-delay: -4s; }

@keyframes floaty-b-jz8s5p9yqe {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-10px); }
}

/* -------- BENEFITS -------- */
[b-jz8s5p9yqe] .benefit-card {
    background: #fff;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    padding: 2rem;
    height: 100%;
    transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
[b-jz8s5p9yqe] .benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px -20px rgba(14,23,48,0.18);
    border-color: transparent;
}
[b-jz8s5p9yqe] .benefit-card h5 { font-weight: 700; color: #0e1730; margin-bottom: 0.6rem; }
[b-jz8s5p9yqe] .benefit-card p { color: #5b6680; margin: 0; }
[b-jz8s5p9yqe] .benefit-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.1rem;
}
[b-jz8s5p9yqe] .bg-primary-soft { background: rgba(79,124,255,0.12); color: #4f7cff; }
[b-jz8s5p9yqe] .bg-purple-soft  { background: rgba(106,79,255,0.12); color: #6a4fff; }
[b-jz8s5p9yqe] .bg-success-soft { background: rgba(34,197,94,0.12); color: #22c55e; }
[b-jz8s5p9yqe] .bg-warning-soft { background: rgba(245,158,11,0.14); color: #d97706; }
[b-jz8s5p9yqe] .bg-info-soft    { background: rgba(14,165,233,0.12); color: #0ea5e9; }
[b-jz8s5p9yqe] .bg-danger-soft  { background: rgba(239,68,68,0.12); color: #ef4444; }

/* -------- STEPS -------- */
[b-jz8s5p9yqe] .step-card {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    height: 100%;
    border: 1px solid #eef0f5;
    text-align: center;
}
[b-jz8s5p9yqe] .step-num {
    width: 48px; height: 48px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #4f7cff 0%, #6a4fff 100%);
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
    display: flex; align-items: center; justify-content: center;
}
[b-jz8s5p9yqe] .step-card h5 { font-weight: 700; color: #0e1730; }
[b-jz8s5p9yqe] .step-card p { color: #5b6680; margin: 0; }

/* -------- SECURITY -------- */
[b-jz8s5p9yqe] .security-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
[b-jz8s5p9yqe] .security-list li {
    display: flex;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px dashed #e3e7ef;
}
[b-jz8s5p9yqe] .security-list li:last-child { border-bottom: none; }
[b-jz8s5p9yqe] .security-list i {
    font-size: 1.4rem;
    color: #4f7cff;
    flex-shrink: 0;
    margin-top: 0.15rem;
}
[b-jz8s5p9yqe] .security-list strong { display: block; color: #0e1730; }
[b-jz8s5p9yqe] .security-list span { color: #5b6680; font-size: 0.95rem; }

[b-jz8s5p9yqe] .security-card {
    background: linear-gradient(135deg, #0e1730 0%, #1a2961 100%);
    color: #fff;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 30px 60px -20px rgba(14,23,48,0.4);
}
[b-jz8s5p9yqe] .security-card-head {
    display: flex; align-items: center; gap: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 1rem; margin-bottom: 1.25rem;
}
[b-jz8s5p9yqe] .security-card-head i { font-size: 2rem; color: #6a4fff; }
[b-jz8s5p9yqe] .security-card-head strong { display: block; font-size: 1.1rem; }
[b-jz8s5p9yqe] .security-card-head small { opacity: 0.7; }
[b-jz8s5p9yqe] .security-card-body {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 1.25rem;
}
[b-jz8s5p9yqe] .sec-pill {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff;
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.85rem;
    font-weight: 500;
}
[b-jz8s5p9yqe] .security-note { font-size: 0.9rem; opacity: 0.8; margin: 0; }

/* -------- CONTACT -------- */
[b-jz8s5p9yqe] .contact-list { list-style: none; padding: 0; margin: 1.25rem 0 0; }
[b-jz8s5p9yqe] .contact-list li { padding: 0.4rem 0; color: #475068; }
[b-jz8s5p9yqe] .contact-list i { color: #4f7cff; margin-right: 0.5rem; }
[b-jz8s5p9yqe] .contact-list a { color: #4f7cff; text-decoration: none; }

[b-jz8s5p9yqe] .contact-card {
    background: #fff;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 25px 60px -25px rgba(14,23,48,0.25);
    border: 1px solid #eef0f5;
}
[b-jz8s5p9yqe] .contact-card .form-label { font-weight: 600; color: #0e1730; }
[b-jz8s5p9yqe] .contact-card .form-control {
    border-radius: 10px;
    border: 1px solid #e3e7ef;
    padding: 0.7rem 0.9rem;
}
[b-jz8s5p9yqe] .contact-card .form-control:focus {
    border-color: #4f7cff;
    box-shadow: 0 0 0 3px rgba(79,124,255,0.15);
}
[b-jz8s5p9yqe] .contact-card .btn-primary {
    background: linear-gradient(135deg, #4f7cff 0%, #6a4fff 100%);
    border: none;
    border-radius: 999px;
    padding: 0.8rem 2rem;
}

/* -------- CTA -------- */
[b-jz8s5p9yqe] .cta-section {
    background: linear-gradient(135deg, #4f7cff 0%, #6a4fff 60%, #b14fff 100%);
    color: #fff;
    padding: 9rem 0 6rem;
}
[b-jz8s5p9yqe] .cta-section h2 { font-weight: 800; font-size: 2rem; margin-bottom: 0.5rem; }
[b-jz8s5p9yqe] .cta-section p { opacity: 0.92; margin-bottom: 1.5rem; }
[b-jz8s5p9yqe] .cta-section .btn-light {
    border-radius: 999px;
    padding: 0.85rem 2.25rem;
    font-weight: 600;
    color: #4f7cff;
}

@media (max-width: 991px) {
    [b-jz8s5p9yqe] .hero-illustration { height: 360px; margin-top: 2rem; }
}
/* /Components/Pages/WerkprogrammaMaterialiteit.razor.rz.scp.css */
.materialiteit-bedrag[b-pcqfs204ts]::-webkit-inner-spin-button,
.materialiteit-bedrag[b-pcqfs204ts]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.materialiteit-bedrag[type="number"][b-pcqfs204ts] {
    appearance: textfield;
}
/* /Components/Pages/Werkprogrammas.razor.rz.scp.css */
/* Same width for Openen, Starten and Download, so the buttons line up down the table. */
.wp-primary-action[b-lcfittt9rt] {
    min-width: 6.5rem;
}
/* /Components/Pages/WerkprogrammaUitvoeren.razor.rz.scp.css */
/* Werkprogramma workspace.
   A three-column shell (checks · work area · side panel) that fills the viewport, so the auditor
   scrolls the table or the document rather than the page. Colours come from the Fluent token
   layer, so the workspace follows the rest of the hub. */

.wp-shell[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--fluent-header-height, 48px) - 2.75rem);
    min-height: 0;
    background: var(--fluent-neutral-background-2, #fafafa);
    color: var(--fluent-neutral-foreground-1, #242424);
    overflow: hidden;

    /* Hoe breed het werk zelf mag worden. Een leesregel heeft een bovengrens nodig, maar
       die grens is hier ook een belofte over de ruimte ernaast: staat het zijpaneel open,
       dan is het werkvlak smal en is deze maat niet eens haalbaar. */
    --wp-content-max: 1080px;
    --wp-card-max: 940px;
}

@media (min-width: 641px) {
    .wp-shell[b-7ls2b5zvav] {
        margin-top: -.75rem;
        margin-bottom: -1rem;
        height: calc(100dvh - var(--fluent-header-height, 48px) - 1rem);
    }
}

/* No text in the workspace is smaller than 11.5px (rem is 14px here): small buttons, badges and
   compact tables stay readable next to the 13px work tables. */
.wp-shell[b-7ls2b5zvav]  :where(.btn-sm, .badge, .table-sm, .table-sm th, .form-select-sm, .form-control-sm) {
    font-size: .8214rem;
}

/* Fullscreen removes the surrounding chrome, so the shell takes the whole screen. */
.wp-shell:fullscreen[b-7ls2b5zvav] {
    height: 100dvh;
    margin: 0;
    padding: 0;

    /* Wie het scherm vrijmaakt, doet dat om ruimte te winnen. Diezelfde maten aanhouden
       levert links en rechts van de boekingentabel een marge op die niets draagt, terwijl
       de tabel zelf al kolommen moet knijpen. */
    --wp-content-max: 1520px;
    --wp-card-max: 1280px;
}

/* In fullscreen the hub's own blue header is gone, and a white bar on a white page leaves the
   workspace without a top edge. Taking the brand colour puts that edge back. */
.wp-shell:fullscreen .wp-topbar[b-7ls2b5zvav] {
    background: var(--fluent-brand, #0f6cbd);
    border-bottom-color: rgba(255, 255, 255, .25);
    color: #fff;
}

.wp-shell:fullscreen .wp-title[b-7ls2b5zvav],
.wp-shell:fullscreen .wp-subtitle[b-7ls2b5zvav],
.wp-shell:fullscreen .wp-progress-label[b-7ls2b5zvav],
.wp-shell:fullscreen .wp-save-indicator[b-7ls2b5zvav],
.wp-shell:fullscreen .wp-ai-progress[b-7ls2b5zvav],
.wp-shell:fullscreen .wp-back[b-7ls2b5zvav] {
    color: #fff;
}

.wp-shell:fullscreen .wp-subtitle[b-7ls2b5zvav],
.wp-shell:fullscreen .wp-progress-label[b-7ls2b5zvav] {
    color: rgba(255, 255, 255, .8);
}

.wp-shell:fullscreen .wp-back:hover[b-7ls2b5zvav] {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.wp-shell:fullscreen .wp-progress-bar[b-7ls2b5zvav] {
    background: rgba(255, 255, 255, .3);
}

.wp-shell:fullscreen .wp-progress-fill[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-1);
}

.wp-shell:fullscreen .wp-topbar .btn-outline-secondary[b-7ls2b5zvav] {
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}

.wp-shell:fullscreen .wp-topbar .btn-outline-secondary:hover[b-7ls2b5zvav] {
    background: rgba(255, 255, 255, .18);
    border-color: var(--fluent-neutral-background-1);
    color: #fff;
}

.wp-center-message[b-7ls2b5zvav] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
}

/* De voortgang van de voorbereiding staat midden op het wachtscherm, niet in de smalle topbalk,
   dus de balk mag hier breder zijn. */
.wp-wait-progress[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.wp-wait-progress .wp-progress-bar[b-7ls2b5zvav] {
    width: 260px;
    height: 8px;
    border-radius: 4px;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */

/* Wraps instead of overflowing: on a laptop the title, the progress and the export buttons do
   not always fit on one line. */
.wp-topbar[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem 1rem;
    padding: .3125rem .75rem;
    background: var(--fluent-neutral-background-1, #fff);
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    flex: 0 0 auto;
}

.wp-topbar-title[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
}

.wp-back[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-3, #616161);
    font-size: 1.1rem;
    text-decoration: none;
    padding: .25rem .375rem;
    border-radius: 4px;
}

.wp-back:hover[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-hover, #f5f5f5);
    color: var(--fluent-neutral-foreground-1, #242424);
}

.wp-title[b-7ls2b5zvav] {
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Title and entity on one line, so the bar is one line high on a laptop. */
.wp-topbar-title > div[b-7ls2b5zvav] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    min-width: 0;
}

.wp-subtitle[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-topbar-progress[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.wp-progress-bar[b-7ls2b5zvav] {
    width: 160px;
    height: 6px;
    border-radius: 3px;
    background: var(--fluent-neutral-background-4, #f0f0f0);
    overflow: hidden;
}

.wp-progress-fill[b-7ls2b5zvav] {
    height: 100%;
    background: var(--fluent-brand, #0f6cbd);
    transition: width .25s ease;
}

.wp-progress-label[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    white-space: nowrap;
}

/* Shows that the assistant is still preparing proposals for rows further down. */
.wp-ai-progress[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    font-size: .8214rem;
    white-space: nowrap;
    color: var(--fluent-brand-foreground-1, #0f6cbd);
}

.wp-ai-progress .spinner-border[b-7ls2b5zvav] {
    width: .75rem;
    height: .75rem;
    border-width: .12rem;
}

.wp-ai-pending[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    margin-top: .75rem;
    padding: .5rem .75rem;
    border: 1px dashed var(--fluent-neutral-stroke-2, #d1d1d1);
    border-radius: 6px;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-ai-pending .spinner-border[b-7ls2b5zvav] {
    width: .875rem;
    height: .875rem;
    border-width: .14rem;
}

.wp-topbar-actions[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .375rem;
}

.wp-topbar-actions > .btn[b-7ls2b5zvav] {
    white-space: nowrap;
}

.wp-save-indicator[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    min-width: 84px;
    justify-content: flex-end;
}

.wp-save-indicator.is-saving .bi-arrow-repeat[b-7ls2b5zvav] {
    animation: wp-spin-b-7ls2b5zvav 1s linear infinite;
}

@keyframes wp-spin-b-7ls2b5zvav {
    to { transform: rotate(360deg); }
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.wp-body[b-7ls2b5zvav] {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

/* --wp-side-w is the width the auditor dragged the panel to (werkprogrammaWorkspace.js). The
   clamp keeps a width saved on a wide screen from squeezing the work area on a narrower one. */
.wp-side-open .wp-body[b-7ls2b5zvav] {
    grid-template-columns: minmax(0, 1fr) clamp(320px, var(--wp-side-w, max(380px, 40vw)), calc(100% - 420px));
}

/* One screen: the side panel becomes an overlay so the work area keeps its width. */
@media (max-width: 1400px) {
    .wp-side-open .wp-body[b-7ls2b5zvav] {
        grid-template-columns: minmax(0, 1fr) clamp(320px, var(--wp-side-w, 460px), calc(100% - 420px));
    }
}

@media (max-width: 1100px) {
    .wp-body[b-7ls2b5zvav],
    .wp-side-open .wp-body[b-7ls2b5zvav] {
        grid-template-columns: minmax(0, 1fr);
    }

    .wp-tab-name[b-7ls2b5zvav] {
        display: none;
    }

    .wp-side[b-7ls2b5zvav] {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(460px, 100%);
        z-index: 20;
        box-shadow: var(--fluent-shadow-16, 0 8px 16px rgba(0,0,0,.14));
    }

    .wp-side-resizer[b-7ls2b5zvav] {
        display: none;
    }
}

/* ── Sheet tabs ─────────────────────────────────────────────────────────── */

/* When the sheets do not fit, a soft shadow on the left or right edge shows that more tabs are
   there. The covers (first two layers) scroll with the content and hide the shadow at an end
   that is reached; the shadows (last two layers) stay put. Pure CSS, no scroll listener. */
.wp-tabs[b-7ls2b5zvav] {
    display: flex;
    align-items: stretch;
    gap: .125rem;
    padding: 0 .75rem;
    background:
        linear-gradient(to right, var(--fluent-neutral-background-1, #fff) 30%, transparent) left center / 2.5rem 100% no-repeat local,
        linear-gradient(to left, var(--fluent-neutral-background-1, #fff) 30%, transparent) right center / 2.5rem 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, var(--wp-scroll-shadow, rgba(0, 0, 0, .2)), transparent) left center / 1.25rem 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, var(--wp-scroll-shadow, rgba(0, 0, 0, .2)), transparent) right center / 1.25rem 100% no-repeat scroll,
        var(--fluent-neutral-background-1, #fff);
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    overflow-x: auto;
    scrollbar-width: thin;
}

.wp-tab[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex: 0 0 auto;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: .375rem .75rem;
    cursor: pointer;
    white-space: nowrap;
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-tab:hover[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-hover, #f5f5f5);
}

.wp-tab.active[b-7ls2b5zvav] {
    border-bottom-color: var(--fluent-brand-stroke, #0f6cbd);
    color: var(--fluent-brand-foreground-link, #0f6cbd);
}

.wp-tab-code[b-7ls2b5zvav] {
    font-weight: 600;
    font-size: .8214rem;
}

.wp-tab-name[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-tab.active .wp-tab-name[b-7ls2b5zvav] {
    color: inherit;
}

.wp-chip[b-7ls2b5zvav] {
    display: inline-block;
    font-size: .8214rem;
    padding: 0 .375rem;
    border-radius: 10px;
    background: var(--fluent-neutral-background-4, #f0f0f0);
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-chip-done[b-7ls2b5zvav] {
    background: var(--fluent-success-tint, #dff6dd);
    color: var(--fluent-success, #107c10);
}

.wp-chip-finding[b-7ls2b5zvav] {
    background: var(--fluent-danger-tint, #fdf3f4);
    color: var(--fluent-danger, #c50f1f);
}

.wp-chip-muted[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-disabled, #bdbdbd);
}

/* Een stipje op de afrondingsknop zolang de conclusie van de accountant nog ontbreekt: dat is de
   enige stap die niet uit de regels zelf blijkt. */
.wp-tab-todo[b-7ls2b5zvav] {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: .25rem;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--fluent-warning, #f7630c);
}

/* ── Main work area ─────────────────────────────────────────────────────── */

.wp-main[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.wp-worktop[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .3125rem .875rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    background: var(--fluent-neutral-background-1, #fff);
    flex: 0 0 auto;
}

.wp-sheet-code[b-7ls2b5zvav] {
    font-weight: 600;
    margin-right: .5rem;
}

.wp-sheet-name[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-empty[b-7ls2b5zvav] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ── Introduction screen ────────────────────────────────────────────────── */

.wp-intro[b-7ls2b5zvav] {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 1.5rem;
    outline: none;
}

.wp-intro-card[b-7ls2b5zvav] {
    max-width: var(--wp-card-max, 940px);
    margin: 0 auto;
    background: var(--fluent-neutral-background-1, #fff);
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(16, 24, 40, .08);
}

.wp-intro-hero[b-7ls2b5zvav] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.75rem 2rem 1.5rem;
    background: linear-gradient(135deg, var(--fluent-brand) 0%, var(--fluent-brand) 100%);
    color: #fff;
}

.wp-intro-hero-text[b-7ls2b5zvav] {
    flex: 1;
    min-width: 0;
}

.wp-intro-badge[b-7ls2b5zvav] {
    flex: none;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.wp-intro-facts[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--fluent-neutral-stroke-2, #e0e0e0);
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

.wp-intro-fact[b-7ls2b5zvav] {
    flex: 1 1 8rem;
    background: var(--fluent-neutral-background-1);
    padding: .8rem 1.25rem;
}

.wp-intro-fact.done[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-2);
}

.wp-intro-fact-figure[b-7ls2b5zvav] {
    display: block;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--fluent-neutral-foreground-1);
}

.wp-intro-fact-caption[b-7ls2b5zvav] {
    display: block;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-intro-panel[b-7ls2b5zvav] {
    border: 1px solid var(--fluent-neutral-stroke-2, #e8e8e8);
    border-radius: 10px;
    padding: 1rem 1.15rem;
    background: var(--fluent-neutral-background-1);
}

.wp-intro-panel-muted[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-2);
}

.wp-intro-panel h6[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .75rem;
}

.wp-intro-steps[b-7ls2b5zvav] {
    list-style: none;
    counter-reset: wpstep;
    margin: 0;
    padding: 0;
}

.wp-intro-steps li[b-7ls2b5zvav] {
    counter-increment: wpstep;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .3rem 0;
    line-height: 1.5;
}

.wp-intro-steps li[b-7ls2b5zvav]::before {
    content: counter(wpstep);
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .1rem;
    border-radius: 50%;
    background: var(--fluent-brand-tint-60);
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    font-size: .8214rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-intro-eyebrow[b-7ls2b5zvav] {
    font-size: .8214rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .82);
    font-weight: 600;
}

.wp-intro-title[b-7ls2b5zvav] {
    margin: .3rem 0 .6rem;
    font-size: 1.55rem;
    font-weight: 600;
    color: #fff;
}

.wp-intro-lead[b-7ls2b5zvav] {
    font-size: .95rem;
    line-height: 1.6;
    margin: 0;
    color: rgba(255, 255, 255, .9);
}

.wp-intro-grid[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    padding: 1.25rem 2rem 0;
}

.wp-intro-grid h6[b-7ls2b5zvav] {
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-intro-list[b-7ls2b5zvav] {
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.6;
}

.wp-intro-list li[b-7ls2b5zvav] {
    margin-bottom: .25rem;
}

.wp-intro-trail[b-7ls2b5zvav] {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    font-size: .84rem;
    line-height: 1.6;
}

.wp-intro-params[b-7ls2b5zvav] {
    margin: 1.25rem 2rem 0;
    font-size: .875rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e8e8e8);
    border-radius: 8px;
    padding: .6rem .9rem;
    background: var(--fluent-neutral-background-2);
}

.wp-intro-params summary[b-7ls2b5zvav] {
    cursor: pointer;
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    font-weight: 600;
}

.wp-intro-actions[b-7ls2b5zvav] {
    margin: 1.5rem 0 0;
    padding: 1.25rem 2rem 1.75rem;
    display: flex;
    align-items: center;
    gap: .9rem;
    border-top: 1px solid var(--fluent-neutral-stroke-2, #eee);
    background: var(--fluent-neutral-background-1);
}

.wp-kbd-hint[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-kbd-hint kbd[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-4, #f0f0f0);
    border: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    border-radius: 3px;
    padding: 0 .25rem;
    color: inherit;
    font-size: .8214rem;
}

/* ── Table view ─────────────────────────────────────────────────────────── */

/* Command strip above the grid: what is shown, and the actions for the selected row. */
.wp-gridbar[b-7ls2b5zvav] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .375rem .875rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    background: var(--fluent-neutral-background-1, #fff);
}

.wp-gridbar-left[b-7ls2b5zvav],
.wp-gridbar-right[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .5rem;
}

/* On a narrow work area the bar wraps as a whole; labels never break inside a button. */
.wp-gridbar[b-7ls2b5zvav] {
    flex-wrap: wrap;
    row-gap: .375rem;
}

.wp-gridbar-count[b-7ls2b5zvav],
.wp-gridbar .btn[b-7ls2b5zvav] {
    white-space: nowrap;
}

/* Rows per status; each count is also a filter. Same dot shapes as the Status column. */
.wp-statusbar[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.wp-statusbar-chip[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .125rem .5rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 999px;
    background: var(--fluent-neutral-background-1, #fff);
    color: var(--fluent-neutral-foreground-2, #424242);
    font-size: .8214rem;
    line-height: 1.4;
}

.wp-statusbar-chip:hover:not(:disabled)[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-hover, #f5f5f5);
}

.wp-statusbar-chip:disabled[b-7ls2b5zvav] {
    opacity: .5;
}

.wp-statusbar-chip.is-active[b-7ls2b5zvav] {
    border-color: var(--fluent-brand-stroke, #0f6cbd);
    background: var(--fluent-brand-tint-60, #ebf3fc);
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    font-weight: 600;
}

.wp-statusbar-n[b-7ls2b5zvav] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.wp-gridbar-count[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-gridbar-badge[b-7ls2b5zvav] {
    display: inline-block;
    margin-left: .25rem;
    padding: 0 .3rem;
    border-radius: 8px;
    background: var(--fluent-neutral-background-4, #f0f0f0);
    font-size: .8214rem;
}

.wp-gridfoot[b-7ls2b5zvav] {
    flex: 0 0 auto;
    padding: .25rem .875rem;
    border-top: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
    background: var(--fluent-neutral-background-2, #fafafa);
}

.wp-table-wrap[b-7ls2b5zvav] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.wp-table[b-7ls2b5zvav] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9286rem;
}

.wp-table thead th[b-7ls2b5zvav] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    border-bottom: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    padding: .5rem .5rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.wp-table thead th.is-sorted[b-7ls2b5zvav] {
    background: var(--fluent-brand-tint-60, #ebf3fc);
}

.wp-th[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .25rem;
    justify-content: space-between;
}

.wp-th-label[b-7ls2b5zvav] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-th-sort[b-7ls2b5zvav] {
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    font-size: .8214rem;
}

/* Excel puts the whole menu behind one caret in the header; so do we. */
.wp-filter-btn[b-7ls2b5zvav] {
    border: none;
    background: transparent;
    padding: 0 .125rem;
    line-height: 1;
    color: var(--fluent-neutral-foreground-3, #616161);
    cursor: pointer;
    opacity: .45;
    font-size: .8214rem;
}

.wp-table thead th:hover .wp-filter-btn[b-7ls2b5zvav],
.wp-filter-btn.is-active[b-7ls2b5zvav] {
    opacity: 1;
}

.wp-filter-btn.is-active[b-7ls2b5zvav] {
    color: var(--fluent-brand-foreground-link, #0f6cbd);
}

.wp-filter-menu[b-7ls2b5zvav] {
    position: absolute;
    z-index: 5;
    top: 100%;
    left: .25rem;
    min-width: 250px;
    max-width: 340px;
    padding: .25rem;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    background: var(--fluent-neutral-background-1, #fff);
    border: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
    font-weight: 400;
    white-space: normal;
}

.wp-filter-cmd[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .3125rem .5rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    text-align: left;
    font-size: .8214rem;
    cursor: pointer;
}

.wp-filter-cmd:hover:not(:disabled)[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-hover, #f5f5f5);
}

.wp-filter-cmd:disabled[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-disabled, #bdbdbd);
    cursor: default;
}

.wp-filter-sep[b-7ls2b5zvav] {
    height: 1px;
    margin: .1875rem .25rem;
    background: var(--fluent-neutral-stroke-2, #e0e0e0);
}

.wp-filter-search[b-7ls2b5zvav] {
    margin: .1875rem .25rem;
    width: calc(100% - .5rem);
}

.wp-filter-list[b-7ls2b5zvav] {
    max-height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    margin: 0 .25rem;
    padding: .25rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 4px;
}

.wp-filter-item[b-7ls2b5zvav] {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
    padding: .125rem .1875rem;
    border-radius: 3px;
    font-size: .8214rem;
    cursor: pointer;
}

.wp-filter-item:hover[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-hover, #f5f5f5);
}

.wp-filter-all[b-7ls2b5zvav] {
    font-weight: 600;
}

.wp-filter-foot[b-7ls2b5zvav] {
    display: flex;
    justify-content: flex-end;
    padding: .375rem .25rem .125rem;
}

.wp-table tbody td[b-7ls2b5zvav] {
    border-bottom: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
    padding: .375rem .5rem;
    vertical-align: top;
}

.wp-table tbody tr[b-7ls2b5zvav] {
    cursor: default;
}

.wp-table tbody tr:hover[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-hover, #f5f5f5);
}

/* The selected row has to be unmistakable: it is what the side panel, the AI and Enter act on. */
.wp-table tbody tr.is-current[b-7ls2b5zvav] {
    background: var(--fluent-brand-tint-60, #ebf3fc);
    box-shadow: inset 3px 0 0 var(--fluent-brand, #0f6cbd);
}

.wp-table tbody tr.is-current:hover[b-7ls2b5zvav] {
    background: var(--fluent-brand-tint-60, #ebf3fc);
}

/* A group heading, such as the creditor above its payments. Not a row to select. */
.wp-table tbody tr.wp-groep-kop th[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-2, #fafafa);
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    font-weight: 600;
    padding: .5rem .5rem .25rem;
    text-align: left;
}

.wp-table tbody tr.wp-groep-kop:hover[b-7ls2b5zvav] {
    background: none;
}

.wp-groep-telling[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-3, #616161);
    font-weight: 400;
    margin-left: .75rem;
}

.wp-col-num[b-7ls2b5zvav] {
    width: 36px;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-col-status[b-7ls2b5zvav] {
    width: 32px;
}

/* The row number, status and first analysis column stay in place while the auditor scrolls a
   wide sheet sideways, so every cell can still be traced to its row. The first two get a fixed
   width because the third is offset by them. A long-text first column is left scrolling: pinned,
   it would take most of the screen. */
.wp-table :is(th, td).wp-col-num[b-7ls2b5zvav] {
    position: sticky;
    left: 0;
    width: 44px;
    min-width: 44px;
    max-width: 44px;
}

.wp-table :is(th, td).wp-col-status[b-7ls2b5zvav] {
    position: sticky;
    left: 44px;
    width: 64px;
    min-width: 64px;
    max-width: 64px;
}

.wp-table :is(th, td):nth-child(3)[class*="wp-cell-"]:not(.wp-cell-longtext)[b-7ls2b5zvav] {
    position: sticky;
    left: 108px;
    max-width: 16rem;
    box-shadow: inset -1px 0 0 var(--fluent-neutral-stroke-2, #e0e0e0);
}

.wp-table tbody td:is(.wp-col-num, .wp-col-status)[b-7ls2b5zvav],
.wp-table tbody td:nth-child(3)[class*="wp-cell-"]:not(.wp-cell-longtext)[b-7ls2b5zvav] {
    z-index: 1;
    background: var(--fluent-neutral-background-1, #fff);
}

.wp-table thead th:is(.wp-col-num, .wp-col-status)[b-7ls2b5zvav],
.wp-table thead th:nth-child(3)[class*="wp-cell-"]:not(.wp-cell-longtext)[b-7ls2b5zvav] {
    z-index: 3;
}

.wp-table tbody tr:hover > td:is(.wp-col-num, .wp-col-status)[b-7ls2b5zvav],
.wp-table tbody tr:hover > td:nth-child(3)[class*="wp-cell-"]:not(.wp-cell-longtext)[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-hover, #f5f5f5);
}

.wp-table tbody tr.is-current > td:is(.wp-col-num, .wp-col-status)[b-7ls2b5zvav],
.wp-table tbody tr.is-current > td:nth-child(3)[class*="wp-cell-"]:not(.wp-cell-longtext)[b-7ls2b5zvav] {
    background: var(--fluent-brand-tint-60, #ebf3fc);
}

/* The pinned number cell covers the row's own left bar, so it carries the bar itself. */
.wp-table tbody tr.is-current > td.wp-col-num[b-7ls2b5zvav] {
    box-shadow: inset 3px 0 0 var(--fluent-brand, #0f6cbd);
}

/* Column chooser in the grid bar. The backdrop closes it on a click anywhere else. */
.wp-colpick[b-7ls2b5zvav] {
    position: relative;
}

.wp-colpick .btn.is-active[b-7ls2b5zvav] {
    border-color: var(--fluent-brand-stroke, #0f6cbd);
    color: var(--fluent-brand-foreground-link, #0f6cbd);
}

.wp-colpick-backdrop[b-7ls2b5zvav] {
    position: fixed;
    inset: 0;
    z-index: 9;
}

.wp-colpick-menu[b-7ls2b5zvav] {
    position: absolute;
    z-index: 10;
    top: calc(100% + .25rem);
    right: 0;
    min-width: 240px;
    max-width: 340px;
    max-height: min(60vh, 28rem);
    overflow-y: auto;
    padding: .25rem;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    background: var(--fluent-neutral-background-1, #fff);
    border: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
}

.wp-colpick-item[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .5rem;
    border-radius: 4px;
    font-size: .8571rem;
    cursor: pointer;
}

.wp-colpick-item:hover[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-hover, #f5f5f5);
}

.wp-colpick-item .form-check-input[b-7ls2b5zvav] {
    margin: 0;
    flex: 0 0 auto;
}

.wp-colpick-item.is-locked[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-col-toelichting[b-7ls2b5zvav] {
    min-width: 240px;
    position: relative;
}

.wp-inline-proposal[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .1875rem;
    padding: .0625rem .375rem;
    border: 1px solid var(--fluent-brand-stroke, #0f6cbd);
    border-radius: 10px;
    background: var(--fluent-brand-tint-60, #ebf3fc);
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    font-size: .8214rem;
    cursor: pointer;
}

.wp-inline-proposal:hover[b-7ls2b5zvav] {
    background: var(--fluent-brand-tint-40, #cfe4fa);
}

.wp-col-docref[b-7ls2b5zvav] {
    width: 70px;
}

.wp-status-dot[b-7ls2b5zvav] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fluent-neutral-stroke-1, #d1d1d1);
}

.wp-status-akkoord .wp-status-dot[b-7ls2b5zvav] { background: var(--fluent-success, #107c10); }
.wp-status-bevinding .wp-status-dot[b-7ls2b5zvav] { background: var(--fluent-danger, #c50f1f); }
.wp-status-nvt .wp-status-dot[b-7ls2b5zvav] { background: var(--fluent-neutral-foreground-3, #616161); }

/* Shape as well as colour, so the status reads without telling green from red: akkoord stays
   a dot, a bevinding is a diamond, n.v.t. an open ring. */
.wp-status-bevinding .wp-status-dot[b-7ls2b5zvav] {
    border-radius: 1px;
    transform: rotate(45deg) scale(.9);
}

.wp-status-nvt .wp-status-dot[b-7ls2b5zvav] {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--fluent-neutral-foreground-3, #616161);
}

/* The grip is deliberately gone: the field is sized from its content by the workspace script. */
.wp-inline-input[b-7ls2b5zvav] {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: .1875rem .375rem;
    font-size: .9286rem;
    resize: none;
    overflow: hidden;
    background: transparent;
}

.wp-inline-input:hover[b-7ls2b5zvav] {
    border-color: var(--fluent-neutral-stroke-2, #e0e0e0);
}

.wp-inline-input:focus[b-7ls2b5zvav] {
    border-color: var(--fluent-brand-stroke, #0f6cbd);
    background: var(--fluent-neutral-background-1, #fff);
    outline: none;
}

/* In the table a long explanation grew its row to the full text, so a few rows filled the screen.
   The field now stops at about two lines and scrolls inside itself; the row view still shows it
   in full. werkprogrammaWorkspace.js keeps the reviewer's colour layer on the field's scroll
   position, so the layer follows. */
.wp-table .wp-inline-input[data-wp-autosize][b-7ls2b5zvav] {
    max-height: 2.75rem;
    overflow-y: auto;
}

.wp-cell-longtext[b-7ls2b5zvav] {
    max-width: 340px;
}

/* Amounts and counts align right so they compare down the column. VP2 delivers its amounts as
   text columns, so those are recognised by their key. */
.wp-table :is(th, td):is(.wp-cell-number, .wp-key-bedrag, .wp-key-boekingen, .wp-key-signalen)[b-7ls2b5zvav] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wp-table th:is(.wp-cell-number, .wp-key-bedrag, .wp-key-boekingen, .wp-key-signalen) .wp-th[b-7ls2b5zvav] {
    justify-content: flex-end;
}

/* .wp-priority and its -hoog/-middel/-laag variants are defined once, further down. */
.wp-priority-geen[b-7ls2b5zvav] { background: var(--fluent-neutral-background-4, #f0f0f0); }

/* The conclusion is written once per sheet but stood as a three-line field under every table.
   The label now sits beside a field that starts at one line and grows with its text (the
   workspace script sizes it, and lays the reviewer's colour layer over it again after every
   render); a long conclusion scrolls inside the field. Proposals and notes stay full width. */
.wp-conclusie[b-7ls2b5zvav] {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: .75rem;
    border-top: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    background: var(--fluent-neutral-background-1, #fff);
    padding: .5rem .875rem;
}

.wp-conclusie > *[b-7ls2b5zvav] {
    grid-column: 1 / -1;
}

.wp-conclusie > .form-label[b-7ls2b5zvav] {
    grid-column: 1;
    margin: .375rem 0 0;
    white-space: nowrap;
}

.wp-conclusie[b-7ls2b5zvav]  .wp-authored {
    grid-column: 2;
}

.wp-conclusie[b-7ls2b5zvav]  textarea {
    max-height: 7.5rem;
    overflow-y: auto;
    resize: none;
}

/* ── Row view ───────────────────────────────────────────────────────────── */

.wp-rowview[b-7ls2b5zvav] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.wp-rowview-nav[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    padding: .5rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
}

.wp-rowview-counter[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-rowview-body[b-7ls2b5zvav] {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    max-width: var(--wp-content-max, 1080px);
    width: 100%;
    margin: 0 auto;
}

/* Facts sit side by side as soon as two fit: in the narrow work area next to the document panel
   a 240px minimum left a single column of label/value pairs. */
.wp-rowfacts[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .625rem 1.25rem;
    background: var(--fluent-neutral-background-1, #fff);
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.wp-fact-label[b-7ls2b5zvav] {
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-fact-value[b-7ls2b5zvav] {
    font-size: .875rem;
    line-height: 1.45;
    word-break: break-word;
}

/* The engine's own assessment is the one fact the auditor is reacting to, so it spans the row. */
.wp-fact-ai[b-7ls2b5zvav] {
    grid-column: 1 / -1;
    background: var(--fluent-brand-tint-60, #ebf3fc);
    border-radius: 6px;
    padding: .625rem .75rem;
}

.wp-rowanswer[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-1, #fff);
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.wp-rowanswer-status[b-7ls2b5zvav] {
    display: flex;
    gap: .5rem;
    margin-bottom: .875rem;
    align-items: center;
}

.wp-rowanswer-status-label[b-7ls2b5zvav] {
    font-size: .8214rem;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-3, #616161);
    margin-right: .25rem;
}

.wp-status-btn[b-7ls2b5zvav] {
    border: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    background: var(--fluent-neutral-background-1, #fff);
    border-radius: 16px;
    padding: .25rem .75rem;
    font-size: .8214rem;
    cursor: pointer;
}

.wp-status-btn:hover[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-hover, #f5f5f5);
}

.wp-status-btn-akkoord.active[b-7ls2b5zvav] {
    background: var(--fluent-success-tint, #dff6dd);
    border-color: var(--fluent-success, #107c10);
    color: var(--fluent-success, #107c10);
}

.wp-status-btn-bevinding.active[b-7ls2b5zvav] {
    background: var(--fluent-danger-tint, #fdf3f4);
    border-color: var(--fluent-danger, #c50f1f);
    color: var(--fluent-danger-foreground, #960b18);
}

.wp-status-btn-nvt.active[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-selected, #ebebeb);
    border-color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-toelichting[b-7ls2b5zvav] {
    font-size: .9375rem;
}

.wp-ai-proposal[b-7ls2b5zvav] {
    margin-top: .75rem;
    border: 1px solid var(--fluent-brand-tint-40, #cfe4fa);
    background: var(--fluent-brand-tint-60, #ebf3fc);
    border-radius: 6px;
    padding: .625rem .75rem;
}

.wp-ai-proposal-head[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .8214rem;
    font-weight: 600;
    color: var(--fluent-brand-foreground-link, #0f6cbd);
}

/* The verdict the assistant proposes, so accepting is never a blind "Akkoord". */
.wp-status-chip[b-7ls2b5zvav] {
    padding: .0625rem .4375rem;
    border-radius: 10px;
    font-size: .8214rem;
    font-weight: 600;
    background: var(--fluent-neutral-background-4, #f0f0f0);
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-status-chip-akkoord[b-7ls2b5zvav] { background: var(--fluent-success-tint); color: var(--fluent-success-foreground); }
.wp-status-chip-bevinding[b-7ls2b5zvav] { background: var(--fluent-danger-tint); color: var(--fluent-danger-foreground); }
.wp-status-chip-nvt[b-7ls2b5zvav] { background: var(--fluent-neutral-background-4, #f0f0f0); }

.wp-ai-proposal-body[b-7ls2b5zvav] {
    font-size: .875rem;
    line-height: 1.5;
    margin: .375rem 0 .625rem;
}

.wp-ai-proposal-actions[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.wp-rowanswer-tools[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .875rem;
}

/* On a source screen the toelichting still belongs to the whole row, which is worth saying once:
   the auditor is looking at one source but writing in a field that seven of them fill. */
.wp-rowanswer-note[b-7ls2b5zvav] {
    font-size: .8214rem;
    line-height: 1.45;
    color: var(--fluent-neutral-foreground-3, #616161);
    margin-bottom: .375rem;
}

.wp-docref-list[b-7ls2b5zvav] {
    margin-top: .875rem;
    border-top: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
    padding-top: .625rem;
}

.wp-docref-title[b-7ls2b5zvav] {
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fluent-neutral-foreground-3, #616161);
    margin-bottom: .25rem;
}

.wp-docref-item[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .8214rem;
    padding: .1875rem 0;
}

.wp-docref-open[b-7ls2b5zvav] {
    border: none;
    background: none;
    padding: 0;
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: .375rem;
    min-width: 0;
    text-align: left;
}

.wp-docref-no[b-7ls2b5zvav] {
    font-weight: 600;
    white-space: nowrap;
}

.wp-docref-name[b-7ls2b5zvav] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-docref-item.current[b-7ls2b5zvav] {
    background: var(--fluent-brand-background-2, #ebf3fc);
    border-radius: 4px;
}

.wp-docref-clips[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-3, #616161);
    font-size: .8214rem;
}

/* The button is rendered by the ConfirmButton component, so it does not carry this page's scope
   attribute; ::deep reaches it through the scoped .wp-docref-item around it. */
.wp-docref-item[b-7ls2b5zvav]  .wp-docref-remove {
    border: none;
    background: none;
    color: var(--fluent-neutral-foreground-3, #616161);
    cursor: pointer;
    margin-left: auto;
}

/* ── Side panel ─────────────────────────────────────────────────────────── */

.wp-side[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--fluent-neutral-background-1, #fff);
    border-left: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

/* The handle is placed against the panel. Only above 1100px: below it the panel is an absolute
   overlay (see the media query near the top), which positions the handle just as well. */
@media (min-width: 1101px) {
    .wp-side[b-7ls2b5zvav] {
        position: relative;
    }
}

/* The panel's left edge is a drag handle; it only shows itself on hover or keyboard focus. */
.wp-side-resizer[b-7ls2b5zvav] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    width: 8px;
    z-index: 6;
    cursor: col-resize;
    touch-action: none;
}

.wp-side-resizer[b-7ls2b5zvav]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3px;
    width: 2px;
    background: transparent;
    transition: background-color .12s;
}

.wp-side-resizer:hover[b-7ls2b5zvav]::after,
.wp-side-resizer:focus-visible[b-7ls2b5zvav]::after,
.wp-side-resizer.is-dragging[b-7ls2b5zvav]::after {
    background: var(--fluent-brand, #0f6cbd);
}

.wp-side-resizer:focus-visible[b-7ls2b5zvav] {
    outline: none;
}

.wp-side-tabs[b-7ls2b5zvav] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    flex: 0 0 auto;
}

.wp-side-tabs button[b-7ls2b5zvav] {
    flex: 1;
    border: none;
    background: none;
    padding: .5rem .25rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.wp-side-tabs button.active[b-7ls2b5zvav] {
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    border-bottom-color: var(--fluent-brand-stroke, #0f6cbd);
    font-weight: 600;
}

.wp-side-tabs .wp-side-popout[b-7ls2b5zvav],
.wp-side-tabs .wp-side-close[b-7ls2b5zvav] {
    flex: 0 0 36px;
}

.wp-side-body[b-7ls2b5zvav] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.wp-side-searchbar[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .375rem .5rem 0;
}

.wp-side-searchinput[b-7ls2b5zvav] {
    display: flex;
    gap: .25rem;
    padding: .375rem .5rem;
}

.wp-side-hint[b-7ls2b5zvav] {
    margin: .5rem;
    padding: .5rem .625rem;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    border-radius: 6px;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-side-hint-active[b-7ls2b5zvav] {
    background: var(--fluent-brand-tint-60, #ebf3fc);
    color: var(--fluent-brand-foreground-link, #0f6cbd);
}

.wp-side-pdf[b-7ls2b5zvav] {
    flex: 1;
    overflow: auto;
    padding: .5rem;
    background: var(--fluent-neutral-background-3, #f5f5f5);
}

/* Het clip-zijpaneel. Dit is dezelfde pagina-inhoud als de Excel-add-in, in een iframe zodat
   de gedeelde modules ongewijzigd kunnen draaien. Het vult de rest van het paneel. */
.wp-clip-frame[b-7ls2b5zvav] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    border: 0;
    display: block;
    background: var(--fluent-neutral-background-3, #f5f5f5);
}

/* Google-controle: opname starten en het resultaat bij de regel vastleggen. */
.wp-side-capturebar[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
    padding: .375rem .5rem;
    border-top: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
}

/* Live mirror of the shared search tab. It takes the remaining height of the panel so the
   results stay readable next to the werkprogramma. */
/* The results are shown zoomed out, so a screenshot captures more of the result list than fits
   at full size. The frame is made proportionally larger and then scaled back down, which gives
   the embedded page a larger viewport to lay out in - unlike a plain transform, which would only
   shrink the same amount of content. */
.wp-google-frame[b-7ls2b5zvav] {
    --wp-google-zoom: .8;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 320px;
    /* Edge to edge: every pixel spent on margin is a search result the auditor cannot read. */
    margin: 0;
    border-top: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    overflow: hidden;
    background: var(--fluent-neutral-background-1);
    /* Paint containment and its own stacking context make the frame eligible for Element
       Capture, which lets the browser hand us exactly this box and nothing around it. */
    contain: paint;
    isolation: isolate;
}

/* The iframe is deliberately taken out of the flex flow. As a flex item its height would be
   resolved by the flex algorithm, overriding the enlarged height below, and scale() would then
   shrink it to 80% of the box - leaving a fifth of the panel empty. Positioned absolutely, the
   percentages resolve against the frame and the scaled result covers it exactly. */
.wp-google-frame-embed[b-7ls2b5zvav] {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% / var(--wp-google-zoom));
    height: calc(100% / var(--wp-google-zoom));
    transform: scale(var(--wp-google-zoom));
    transform-origin: top left;
    border: 0;
    display: block;
}

/* Overlaid rather than swapped in, so the frame element itself is never removed: keeping the
   browsing context alive preserves Google's cookies, and with them the answer to its consent
   dialog, from one row to the next. */
.wp-google-frame-empty[b-7ls2b5zvav] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--fluent-neutral-background-1, #fff);
    color: var(--fluent-neutral-foreground-3, #757575);
    font-size: .8214rem;
}

.wp-google-frame-empty i[b-7ls2b5zvav] {
    font-size: 1.5rem;
}

/* The search tab is the one panel whose content should take all the height it can get. */
.wp-side-body-search[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Reading view: what the panel shows when the publisher forbids being framed. It carries the same
   paint containment as the frame, because it is then the surface the evidence screenshot crops to. */
.wp-side-reader[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 320px;
    border-top: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    background: var(--fluent-neutral-background-1);
    overflow: hidden;
    contain: paint;
    isolation: isolate;
}

.wp-side-reader-head[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    background: var(--fluent-neutral-background-2, #fafafa);
}

.wp-side-reader-title[b-7ls2b5zvav] {
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fluent-neutral-foreground-1, #242424);
}

.wp-side-reader-note[b-7ls2b5zvav] {
    font-size: .8214rem;
    line-height: 1.45;
    color: var(--fluent-neutral-foreground-3, #757575);
}

.wp-side-reader-status[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    padding: 1rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #757575);
}

/* Pre-wrap keeps the paragraph breaks the extractor preserved; a measure of about 70 characters
   keeps a court ruling readable in a narrow panel. */
.wp-side-reader-text[b-7ls2b5zvav] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .8214rem;
    line-height: 1.6;
    color: var(--fluent-neutral-foreground-1, #242424);
}

.wp-capture-live[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    font-size: .8214rem;
    font-weight: 600;
    color: var(--fluent-danger-foreground);
}

.wp-side-cliptools[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
}

.wp-zoom-group[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
}

.wp-zoom-level[b-7ls2b5zvav] {
    min-width: 3.25rem;
    font-variant-numeric: tabular-nums;
}

.wp-cliptools-label[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Chat ───────────────────────────────────────────────────────────────── */

.wp-chat-log[b-7ls2b5zvav] {
    flex: 1;
    overflow-y: auto;
    padding: .5rem;
}

.wp-chat-msg[b-7ls2b5zvav] {
    display: flex;
    margin-bottom: .5rem;
}

.wp-chat-user[b-7ls2b5zvav] {
    justify-content: flex-end;
}

.wp-chat-bubble[b-7ls2b5zvav] {
    max-width: 88%;
    padding: .5rem .625rem;
    border-radius: 10px;
    font-size: .8214rem;
    line-height: 1.5;
    white-space: pre-wrap;
    background: var(--fluent-neutral-background-3, #f5f5f5);
}

.wp-chat-user .wp-chat-bubble[b-7ls2b5zvav] {
    background: var(--fluent-brand, #0f6cbd);
    color: #fff;
}

.wp-chat-typing span[b-7ls2b5zvav] {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 3px;
    border-radius: 50%;
    background: var(--fluent-neutral-foreground-3, #616161);
    animation: wp-typing-b-7ls2b5zvav 1.2s infinite ease-in-out;
}

.wp-chat-typing span:nth-child(2)[b-7ls2b5zvav] { animation-delay: .15s; }
.wp-chat-typing span:nth-child(3)[b-7ls2b5zvav] { animation-delay: .3s; }

@keyframes wp-typing-b-7ls2b5zvav {
    0%, 60%, 100% { opacity: .25; }
    30% { opacity: 1; }
}

.wp-chat-proposal[b-7ls2b5zvav] {
    border-top: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
    padding: .5rem;
    background: var(--fluent-brand-tint-60, #ebf3fc);
}

.wp-chat-proposal-body[b-7ls2b5zvav] {
    font-size: .8214rem;
    line-height: 1.5;
    margin-bottom: .5rem;
}

.wp-chat-input[b-7ls2b5zvav] {
    display: flex;
    gap: .25rem;
    padding: .5rem;
    border-top: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

/* ── Toast ──────────────────────────────────────────────────────────────── */

.wp-toast[b-7ls2b5zvav] {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    background: var(--fluent-danger, #c50f1f);
    color: #fff;
    padding: .5rem .875rem;
    border-radius: 6px;
    font-size: .875rem;
    box-shadow: var(--fluent-shadow-8, 0 4px 8px rgba(0,0,0,.14));
}

/* Same toast, but for something that went well. */
.wp-toast-ok[b-7ls2b5zvav] {
    background: var(--fluent-success, #0f7b0f);
}

/* Bar shown while a source page from the search sits in the frame. */
.wp-side-source[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .5rem;
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
    background: var(--wp-surface-2, #f6f8fa);
    border-bottom: 1px solid var(--wp-border, #d0d7de);
}

.wp-side-source-url[b-7ls2b5zvav] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-side-source .btn[b-7ls2b5zvav] {
    margin-left: auto;
    white-space: nowrap;
}

.wp-fact-note[b-7ls2b5zvav] {
    margin-top: .2rem;
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}
/* Source link in the row view: the button is the affordance, the URL only context. */
.wp-fact-source[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.wp-fact-source-url[b-7ls2b5zvav] {
    font-size: .8214rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ── Mede-bestuurders (AV1) ────────────────────────────────────────────────
   Bestuurt de cliënt een entiteit samen met andere organisaties, dan zijn die
   mede-bestuurders derden. De accountant kiest hier zelf of hun bestuurders
   alsnog in AV4 worden beoordeeld. */

.wp-boardexpansion[b-7ls2b5zvav] {
    margin-top: .875rem;
    background: var(--fluent-neutral-background-2, #fafafa);
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 8px;
    padding: .75rem .875rem;
}

.wp-boardexpansion-title[b-7ls2b5zvav] {
    font-weight: 600;
    font-size: .85rem;
}

.wp-boardexpansion-intro[b-7ls2b5zvav] {
    margin-top: .25rem;
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}

.wp-boardexpansion-option[b-7ls2b5zvav] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .375rem 0;
    border-bottom: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
}

.wp-boardexpansion-option:last-of-type[b-7ls2b5zvav] {
    border-bottom: none;
}

.wp-boardexpansion-option label[b-7ls2b5zvav] {
    cursor: pointer;
}

.wp-boardexpansion-name[b-7ls2b5zvav] {
    font-size: .8214rem;
    font-weight: 500;
}

.wp-boardexpansion-meta[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}

.wp-boardexpansion-done[b-7ls2b5zvav] {
    color: var(--fluent-status-success, #107c10);
    margin-top: .15rem;
}

.wp-boardexpansion-busy[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    margin-top: .5rem;
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}

/* Draait mee met de regel waar de opgehaalde organisatie op staat, zodat de lijst
   tijdens het ophalen even breed uitlijnt als met een vinkje ervoor. */
.wp-boardexpansion-spinner[b-7ls2b5zvav] {
    width: .8rem;
    height: .8rem;
    border-width: .12rem;
    margin-top: .3rem;
    flex: 0 0 auto;
    color: var(--fluent-brand-foreground-1, #0f6cbd);
}

/* Terug naar de regel waar het ophalen bij hoort; een knop, want het is een actie,
   maar hij hoort in de lopende zin te lezen als tekst. */
.wp-boardexpansion-link[b-7ls2b5zvav] {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--fluent-brand-foreground-1, #0f6cbd);
    text-decoration: underline;
}

.wp-boardexpansion-topbar[b-7ls2b5zvav] {
    max-width: 22rem;
    overflow: hidden;
    border: none;
    background: none;
    padding: 0;
}

.wp-boardexpansion-topbar span:last-child[b-7ls2b5zvav] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-boardexpansion-error[b-7ls2b5zvav] {
    margin-top: .5rem;
    font-size: .8214rem;
    color: var(--fluent-status-danger, #a4262c);
}

/* ── Bronwizard (AV4 integriteit) ──────────────────────────────────────────
   Eén bron per scherm. De auditor loopt ze met Enter langs; het scherm laat
   telkens zien wat die ene bron vaststelt, wat er is gevonden en waar het
   vandaan komt. */

.wp-wizard[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    gap: .875rem;
}

.wp-wizard-subject[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--fluent-neutral-background-1, #fff);
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 8px;
    padding: .625rem .875rem;
}

.wp-wizard-subject-main[b-7ls2b5zvav] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem .75rem;
    min-width: 0;
    flex: 1 1 auto;
}

/* Row navigation lives in the subject header: the party you are on and the way to the
   next one belong together, and it saves a bar of vertical space above the wizard. */
.wp-subject-nav[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
}

.wp-subject-nav .btn[b-7ls2b5zvav] {
    padding: .125rem .4rem;
    line-height: 1.2;
}

.wp-subject-counter[b-7ls2b5zvav] {
    font-size: .8214rem;
    font-variant-numeric: tabular-nums;
    color: var(--fluent-neutral-foreground-3, #616161);
    white-space: nowrap;
    min-width: 3.25rem;
    text-align: center;
}

.wp-wizard-kind[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    white-space: nowrap;
}

.wp-wizard-name[b-7ls2b5zvav] {
    font-size: 1.0625rem;
    font-weight: 600;
}

.wp-wizard-role[b-7ls2b5zvav],
.wp-wizard-kvk[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    background: var(--fluent-neutral-background-3, #f5f5f5);
    border-radius: 4px;
    padding: .0625rem .375rem;
}

.wp-severity[b-7ls2b5zvav] {
    display: inline-block;
    padding: .0625rem .4375rem;
    border-radius: 999px;
    font-size: .8214rem;
    font-weight: 600;
    white-space: nowrap;
}

.wp-severity-alert[b-7ls2b5zvav] { background: var(--fluent-danger-tint); color: var(--fluent-danger-foreground); }
.wp-severity-attention[b-7ls2b5zvav] { background: var(--fluent-warning-tint); color: var(--fluent-warning-foreground); }
.wp-severity-info[b-7ls2b5zvav] { background: var(--fluent-neutral-background-2); color: var(--fluent-brand-foreground-2); }
.wp-severity-none[b-7ls2b5zvav] { background: var(--fluent-success-tint); color: var(--fluent-success-foreground); }

/* Stapbalk: klikbaar, met een stip die de zwaarte van de bron toont. */
.wp-stepper[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.wp-stepper-track[b-7ls2b5zvav] {
    height: 3px;
    border-radius: 999px;
    background: var(--fluent-neutral-background-4, #f0f0f0);
    overflow: hidden;
}

.wp-stepper-fill[b-7ls2b5zvav] {
    height: 100%;
    background: var(--fluent-brand-primary, #0f6cbd);
    transition: width .18s ease;
}

.wp-stepper-chips[b-7ls2b5zvav] {
    display: flex;
    gap: .375rem;
    flex-wrap: wrap;
}

/* How far the folded Werkzaamheden chip has got, without unfolding it. */
.wp-step-telling[b-7ls2b5zvav] {
    font-size: .8214rem;
    font-variant-numeric: tabular-nums;
    color: var(--fluent-neutral-foreground-3, #616161);
    border-left: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    padding-left: .375rem;
    margin-left: .125rem;
}

/* The posts behind the Werkzaamheden chip, shown only while the walk is on them.
   Indented under the strip so they read as steps within a step. */
.wp-substepper[b-7ls2b5zvav] {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    padding: .4rem 0 .1rem 1.6rem;
}

.wp-substep[b-7ls2b5zvav] {
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    background: var(--fluent-neutral-background-1, #fff);
    border-radius: 6px;
    padding: .15rem .5rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2, #424242);
    cursor: pointer;
}

.wp-substep:hover:not(:disabled)[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-1hover, #f5f5f5);
}

.wp-substep.active[b-7ls2b5zvav] {
    border-color: var(--fluent-brand-stroke-1, #0f6cbd);
    color: var(--fluent-brand-foreground-1, #0f6cbd);
    font-weight: 600;
}

/* A post this creditor has no bookings on is stated, not hidden: the file has to
   show it was considered and found empty. */
.wp-substep:disabled[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-disabled, #bdbdbd);
    background: var(--fluent-neutral-background-3, #f5f5f5);
    cursor: default;
}

.wp-step[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .375rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    background: var(--fluent-neutral-background-1, #fff);
    border-radius: 999px;
    padding: .25rem .625rem .25rem .3125rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2, #424242);
    cursor: pointer;
    transition: background .1s, border-color .1s;
}

.wp-step:hover[b-7ls2b5zvav] { background: var(--fluent-neutral-background-3, #f5f5f5); }

.wp-step.active[b-7ls2b5zvav] {
    border-color: var(--fluent-brand-stroke, #0f6cbd);
    background: var(--fluent-brand-background-2, #eff6fc);
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    font-weight: 600;
}

.wp-step.passed[b-7ls2b5zvav] { opacity: .75; }

.wp-step-no[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    font-size: .8214rem;
    font-weight: 600;
    background: var(--fluent-neutral-background-4, #f0f0f0);
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-step-alert .wp-step-no[b-7ls2b5zvav] { background: var(--fluent-danger); color: #fff; }
.wp-step-attention .wp-step-no[b-7ls2b5zvav] { background: var(--fluent-warning); color: var(--fluent-neutral-foreground-1); }
.wp-step-info .wp-step-no[b-7ls2b5zvav] { background: var(--fluent-brand); color: #fff; }
.wp-step-none .wp-step-no[b-7ls2b5zvav] { background: var(--fluent-success-tint); color: var(--fluent-success-foreground); }
.wp-step-failed .wp-step-no[b-7ls2b5zvav] { background: #605e5c; color: #fff; }

/* A post this creditor does not book on: present, reachable, but plainly not work.
   Muted through colour and italics rather than opacity: fading the whole step also fades
   its label and the already-muted number, which drops both below a readable contrast. */
.wp-step-overslaan .wp-step-no[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-4, #f0f0f0);
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-step-overslaan .wp-step-label[b-7ls2b5zvav] {
    font-style: italic;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-recap-overslaan[b-7ls2b5zvav] {
    font-style: italic;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-step-panel[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-1, #fff);
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 8px;
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.wp-step-head[b-7ls2b5zvav] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.wp-step-head h3[b-7ls2b5zvav] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.wp-step-count[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    white-space: nowrap;
}

.wp-step-purpose[b-7ls2b5zvav] {
    margin: 0;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-step-banner[b-7ls2b5zvav] {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    border-radius: 6px;
    padding: .625rem .75rem;
    font-size: .8214rem;
}

.wp-step-banner-clean[b-7ls2b5zvav] { background: var(--fluent-success-tint); color: var(--fluent-success-foreground); }
.wp-step-banner-failed[b-7ls2b5zvav] { background: var(--fluent-warning-tint); color: var(--fluent-warning-foreground); }

.wp-step-error[b-7ls2b5zvav],
.wp-step-note[b-7ls2b5zvav] {
    margin-top: .25rem;
    font-size: .8214rem;
    opacity: .85;
}

.wp-step-facts[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem 1.25rem;
    margin: 0;
}

.wp-step-facts dt[b-7ls2b5zvav] {
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fluent-neutral-foreground-3, #616161);
    font-weight: 600;
}

.wp-step-facts dd[b-7ls2b5zvav] {
    margin: 0;
    font-size: .8214rem;
    word-break: break-word;
}

.wp-findings[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.wp-finding[b-7ls2b5zvav] {
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-left-width: 3px;
    border-radius: 6px;
    padding: .625rem .75rem;
}

.wp-finding-alert[b-7ls2b5zvav] { border-left-color: var(--fluent-danger); }
.wp-finding-attention[b-7ls2b5zvav] { border-left-color: var(--fluent-warning-stroke); }
.wp-finding-info[b-7ls2b5zvav] { border-left-color: var(--fluent-brand-stroke); }
.wp-finding-none[b-7ls2b5zvav] { border-left-color: var(--fluent-neutral-stroke-1); }

.wp-finding-head[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .25rem;
}

.wp-finding-label[b-7ls2b5zvav] { font-weight: 600; font-size: .875rem; }

.wp-finding-score[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    cursor: help;
}

.wp-finding-detail[b-7ls2b5zvav] {
    font-size: .8214rem;
    white-space: pre-wrap;
}

/*
 * A screening hit is a stack of separate statements — the datasets, the sanction regime, the
 * political function, the related parties. Run together they read as noise, so each one gets its
 * own row with the label in front of it.
 */
.wp-finding-rows[b-7ls2b5zvav] {
    margin: 0;
    display: grid;
    grid-template-columns: minmax(7.5rem, 11rem) 1fr;
    gap: .125rem .75rem;
    font-size: .8214rem;
}

.wp-finding-rows > div[b-7ls2b5zvav] {
    display: contents;
}

.wp-finding-rows dt[b-7ls2b5zvav] {
    font-weight: 600;
    color: var(--wp-muted, #605e5c);
    font-size: .8214rem;
    padding-top: .0625rem;
}

.wp-finding-rows dd[b-7ls2b5zvav] {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.wp-finding-number[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 .25rem;
    border-radius: .625rem;
    background: rgba(0, 0, 0, .07);
    font-size: .8214rem;
    font-weight: 600;
}

.wp-finding-category[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--wp-muted, #605e5c);
}

.wp-finding-why[b-7ls2b5zvav] {
    margin-top: .375rem;
    padding-left: .5rem;
    border-left: 2px solid rgba(0, 0, 0, .12);
    font-size: .8214rem;
    white-space: pre-wrap;
    color: var(--wp-muted, #605e5c);
}

.wp-finding-sources[b-7ls2b5zvav] {
    margin-top: .375rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.wp-finding-open[b-7ls2b5zvav] {
    border: 0;
    background: none;
    padding: 0;
    font-size: .8214rem;
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    text-align: left;
    cursor: pointer;
}

.wp-finding-open:disabled[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-3, #616161); cursor: default; }
.wp-finding-open:not(:disabled):hover[b-7ls2b5zvav] { text-decoration: underline; }

.wp-verified[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-success-foreground);
    margin-left: .375rem;
}

.wp-finding-snippet[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    border-left: 2px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    padding-left: .5rem;
    margin-top: .125rem;
}

.wp-step-tools[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.wp-step-proposal[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: var(--fluent-brand-background-2, #eff6fc);
    border: 1px solid var(--fluent-brand-tint-40);
    border-radius: 6px;
    padding: .625rem .75rem;
}

.wp-step-proposal-body[b-7ls2b5zvav] {
    font-size: .8214rem;
    min-width: 0;
}

.wp-step-nav[b-7ls2b5zvav] {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

/* ── Slotstap: de conclusie is een scherm, geen blok onder elke bron ──────── */
.wp-wizard:focus[b-7ls2b5zvav] { outline: none; }

.wp-wizard:focus-visible[b-7ls2b5zvav] {
    outline: 2px solid var(--fluent-brand-stroke, #0f6cbd);
    outline-offset: 4px;
    border-radius: 10px;
}

.wp-step-conclusion .wp-step-no[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-4, #f0f0f0);
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-step-conclusion.active .wp-step-no[b-7ls2b5zvav] {
    background: var(--fluent-brand-primary, #0f6cbd);
    color: #fff;
}

.wp-step-panel-conclusion[b-7ls2b5zvav] { border-color: var(--fluent-brand-tint-40); }

.wp-recap[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.wp-recap-row[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    text-align: left;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-left-width: 3px;
    background: var(--fluent-neutral-background-1, #fff);
    border-radius: 6px;
    padding: .4375rem .625rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-1, #242424);
    cursor: pointer;
}

.wp-recap-row:hover[b-7ls2b5zvav] { background: var(--fluent-neutral-background-3, #f5f5f5); }

.wp-recap-no[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    font-size: .8214rem;
    font-weight: 600;
    background: var(--fluent-neutral-background-4, #f0f0f0);
    flex: none;
}

.wp-recap-name[b-7ls2b5zvav] { font-weight: 600; }

.wp-recap-summary[b-7ls2b5zvav] {
    margin-left: auto;
    color: var(--fluent-neutral-foreground-3, #616161);
    display: flex;
    align-items: baseline;
    gap: .5rem;
    min-width: 0;
}

/* The line the auditor noted on that source, so the closing screen shows what was written and not
   only how many hits there were. */
.wp-recap-noted[b-7ls2b5zvav] {
    max-width: 32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-recap-open[b-7ls2b5zvav] {
    color: var(--fluent-danger-foreground);
    font-size: .8214rem;
}

.wp-recap-alert[b-7ls2b5zvav] { border-left-color: var(--fluent-danger); }
.wp-recap-attention[b-7ls2b5zvav] { border-left-color: var(--fluent-warning-stroke); }
.wp-recap-info[b-7ls2b5zvav] { border-left-color: var(--fluent-brand-stroke); }
.wp-recap-none[b-7ls2b5zvav] { border-left-color: var(--fluent-success); }
.wp-recap-failed[b-7ls2b5zvav] { border-left-color: var(--fluent-neutral-foreground-3); }

.wp-step-proposal-busy[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2, #424242);
    background: var(--fluent-neutral-background-3, #f5f5f5);
    border-color: var(--fluent-neutral-stroke-2, #e0e0e0);
}

.wp-step-nav[b-7ls2b5zvav] { align-items: center; }

.wp-step-hint[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-step-hint kbd[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-4, #f0f0f0);
    border-radius: 3px;
    padding: .0625rem .25rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2, #424242);
}
/* ── Documentgroepen in het zijpaneel ────────────────────────────────────
   Same presentation as the "Gelinkte clips" popover of the Excel add-in: the row's
   documents grouped, the open one badged, and every clip a jump target. A row often
   carries more than one document — the register page, the source file and a capture —
   and the auditor must be able to see and reach all of them, not only the first. */

.wp-docgroups[b-7ls2b5zvav] {
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    padding: .375rem .625rem;
    max-height: min(40vh, 25%);
    overflow-y: auto;
    flex: 0 0 auto;
}

.wp-docgroups-head[b-7ls2b5zvav] {
    font-size: .8214rem;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-3, #616161);
    margin-bottom: .375rem;
}

.wp-docgroup[b-7ls2b5zvav] {
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 6px;
    margin-bottom: .375rem;
    overflow: hidden;
}

.wp-docgroup.current[b-7ls2b5zvav] {
    border-color: var(--fluent-brand-stroke-1, #0f6cbd);
}

.wp-docgroup-head[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .375rem;
    width: 100%;
    border: none;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    padding: .375rem .5rem;
    font-size: .8214rem;
    cursor: pointer;
    text-align: left;
    min-width: 0;
}

.wp-docgroup.current .wp-docgroup-head[b-7ls2b5zvav] {
    background: var(--fluent-brand-background-2, #ebf3fc);
}

.wp-docgroup-head:hover[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-3-hover, #ebebeb);
}

.wp-docgroup-no[b-7ls2b5zvav] {
    font-weight: 600;
    white-space: nowrap;
}

.wp-docgroup-title[b-7ls2b5zvav] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fluent-neutral-foreground-2, #424242);
    flex: 1 1 auto;
}

.wp-docgroup-badge[b-7ls2b5zvav] {
    font-size: .8214rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #fff;
    background: var(--fluent-brand-background-1, #0f6cbd);
    border-radius: 3px;
    padding: .0625rem .25rem;
    flex: 0 0 auto;
}

.wp-clip-item[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .375rem;
    width: 100%;
    border: none;
    border-top: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
    background: none;
    padding: .3125rem .5rem;
    font-size: .8214rem;
    cursor: pointer;
    text-align: left;
    min-width: 0;
}

.wp-clip-item:hover[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-1-hover, #f5f5f5);
}

.wp-clip-dot[b-7ls2b5zvav] {
    width: .625rem;
    height: .625rem;
    border-radius: 2px;
    flex: 0 0 auto;
    background: var(--fluent-warning);
}

.wp-clip-text[b-7ls2b5zvav] { background: var(--fluent-warning); }
.wp-clip-number[b-7ls2b5zvav] { background: var(--fluent-success); }
.wp-clip-date[b-7ls2b5zvav] { background: var(--fluent-purple); }
.wp-clip-check[b-7ls2b5zvav] { background: var(--fluent-brand); }

.wp-clip-value[b-7ls2b5zvav] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fluent-neutral-foreground-1, #242424);
}

.wp-clip-page[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-3, #616161);
    white-space: nowrap;
    flex: 0 0 auto;
}

.wp-clip-empty[b-7ls2b5zvav] {
    padding: .3125rem .5rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    border-top: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
}

/* Documentstrip: compacte chips boven het clip-paneel. De clips zelf worden op het
   document getekend en via de popup Gelinkte clips getoond, precies zoals in de
   Excel-add-in, dus die horen hier niet nog een keer als lijst te staan. */

.wp-docstrip[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.wp-docchip[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    max-width: 14rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 999px;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    padding: .1875rem .5rem;
    font-size: .8214rem;
    cursor: pointer;
    min-width: 0;
}

.wp-docchip:hover[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-3-hover, #ebebeb);
}

.wp-docchip.current[b-7ls2b5zvav] {
    border-color: var(--fluent-brand-stroke-1, #0f6cbd);
    background: var(--fluent-brand-background-2, #ebf3fc);
}

.wp-docchip-no[b-7ls2b5zvav] {
    font-weight: 600;
    flex: 0 0 auto;
}

.wp-docchip-title[b-7ls2b5zvav] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fluent-neutral-foreground-2, #424242);
    min-width: 0;
}

.wp-docchip-badge[b-7ls2b5zvav] {
    font-size: .8214rem;
    font-weight: 600;
    color: #fff;
    background: var(--fluent-brand-background-1, #0f6cbd);
    border-radius: 999px;
    padding: 0 .3125rem;
    flex: 0 0 auto;
}

/* Kiezer voor documenten uit de todolist. De cliënt levert bewijsstukken aan op deze site;
   dan hoort het vastleggen in een regel ook vanaf hier te kunnen, in plaats van via een
   omweg over de schijf. */

.wp-modal-backdrop[b-7ls2b5zvav] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1080;
}

.wp-modal[b-7ls2b5zvav] {
    width: min(38rem, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    background: var(--fluent-neutral-background-1);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,.24);
    overflow: hidden;
}

.wp-modal-head[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

.wp-modal-tools[b-7ls2b5zvav] {
    padding: .625rem 1rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
}

.wp-modal-body[b-7ls2b5zvav] {
    overflow-y: auto;
    padding: .5rem;
}

.wp-todo-doc[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: none;
    background: none;
    border-radius: 6px;
    padding: .5rem .625rem;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}

.wp-todo-doc:hover:not(:disabled)[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-1-hover, #f5f5f5);
}

.wp-todo-doc-main[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.wp-todo-doc-name[b-7ls2b5zvav] {
    font-size: .875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-todo-doc-meta[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-todo-doc-date[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    flex: 0 0 auto;
}

.wp-todo-section[b-7ls2b5zvav] {
    font-size: .8214rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--fluent-neutral-foreground-3, #616161);
    padding: .625rem .625rem .25rem;
}

.wp-todo-item[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2, #424242);
    padding: .25rem .625rem .125rem 1.25rem;
}

.wp-todo-doc[b-7ls2b5zvav] {
    padding-left: 1.75rem;
}

/* Kandidaten onder de drempelwaarde: het bewijs achter "geen treffers". */
.wp-candidates[b-7ls2b5zvav] {
    width: 100%;
    border: 1px solid var(--wp-border, #e1e1e1);
    border-radius: 6px;
    padding: 10px 12px;
    background: var(--fluent-neutral-background-2);
}

.wp-candidates-head[b-7ls2b5zvav] {
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: 2px;
}

.wp-candidates-intro[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2);
    margin: 0 0 8px;
}

.wp-candidates-table[b-7ls2b5zvav] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8214rem;
}

.wp-candidates-table th[b-7ls2b5zvav],
.wp-candidates-table td[b-7ls2b5zvav] {
    border-bottom: 1px solid var(--fluent-neutral-stroke-2);
    padding: 4px 8px 4px 0;
    text-align: left;
    vertical-align: top;
}

.wp-candidates-table th[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-2);
    font-weight: 600;
    white-space: nowrap;
}

.wp-candidates-table td:nth-child(2)[b-7ls2b5zvav] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wp-docgroups-toggle[b-7ls2b5zvav] {
    border: none;
    background: none;
    padding: 0 0 0 8px;
    font-size: .8214rem;
    color: var(--wp-accent, #0f6cbd);
    cursor: pointer;
    text-decoration: underline;
}

.wp-docgroups-toggle:hover[b-7ls2b5zvav] {
    color: var(--fluent-brand-foreground-2);
}

/* Web sweep: one block per keyword, plus the full list of pages behind a toggle. */
.wp-sweep[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

.wp-sweep-leg[b-7ls2b5zvav] {
    border: 1px solid var(--fluent-neutral-stroke-2);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--fluent-neutral-background-1);
}

.wp-sweep-head[b-7ls2b5zvav] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.wp-sweep-keyword[b-7ls2b5zvav] {
    font-weight: 600;
    font-size: .9rem;
}

.wp-sweep-count[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2);
}

.wp-sweep-count.hit[b-7ls2b5zvav] {
    color: var(--fluent-danger-foreground);
    font-weight: 600;
}

.wp-sweep-scanned[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3);
    margin-left: auto;
}

.wp-sweep-page[b-7ls2b5zvav] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--fluent-neutral-stroke-2);
}

.wp-sweep-assessment[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2);
    margin-top: 4px;
    white-space: pre-wrap;
}

.wp-sweep-toggle[b-7ls2b5zvav] {
    align-self: flex-start;
    border: none;
    background: none;
    padding: 0;
    font-size: .8214rem;
    color: var(--wp-accent, #0f6cbd);
    cursor: pointer;
}

.wp-sweep-table[b-7ls2b5zvav] {
    width: 100%;
    border-collapse: collapse;
    font-size: .8214rem;
}

.wp-sweep-table th[b-7ls2b5zvav],
.wp-sweep-table td[b-7ls2b5zvav] {
    border-bottom: 1px solid var(--fluent-neutral-stroke-2);
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.wp-sweep-table th[b-7ls2b5zvav] {
    font-weight: 600;
    color: var(--fluent-neutral-foreground-2);
    white-space: nowrap;
}

.wp-sweep-table tr.relevant[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-2);
}

.wp-priority[b-7ls2b5zvav] {
    display: inline-block;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: .8214rem;
    font-weight: 600;
    background: var(--fluent-neutral-background-3);
    color: var(--fluent-neutral-foreground-2);
}

.wp-priority-hoog[b-7ls2b5zvav] {
    background: var(--fluent-danger-tint);
    color: var(--fluent-danger-foreground);
}

.wp-priority-middel[b-7ls2b5zvav] {
    background: var(--fluent-warning-tint);
    color: var(--fluent-warning-foreground);
}

.wp-priority-laag[b-7ls2b5zvav] {
    background: var(--fluent-success-tint);
    color: var(--fluent-success-foreground);
}

/* ---- Sub-steps: the datasets that make up one source ---------------------- */

.wp-substepper[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .5rem .75rem .65rem;
    border-bottom: 1px solid var(--wp-border, #e5e7eb);
    background: var(--fluent-neutral-background-2);
}

.wp-substep[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid var(--wp-border, #e5e7eb);
    background: var(--fluent-neutral-background-1);
    border-radius: 999px;
    padding: .2rem .65rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2);
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}

.wp-substep:hover[b-7ls2b5zvav] { background: var(--fluent-neutral-background-2); }

.wp-substep.active[b-7ls2b5zvav] {
    background: var(--fluent-brand);
    border-color: var(--fluent-brand-stroke);
    color: #fff;
}

.wp-substep-no[b-7ls2b5zvav] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: .75;
}

.wp-substep-alert:not(.active)[b-7ls2b5zvav] { border-color: var(--fluent-danger-stroke); color: var(--fluent-danger-foreground); }
.wp-substep-warn:not(.active)[b-7ls2b5zvav] { border-color: var(--fluent-warning-stroke); color: var(--fluent-warning-foreground); }
.wp-substep-failed:not(.active)[b-7ls2b5zvav] { border-color: var(--fluent-neutral-stroke-1); color: var(--fluent-neutral-foreground-2); font-style: italic; }

/* ---- Overview of a source that was walked dataset by dataset -------------- */

.wp-overview-summary[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin: .25rem 0 1rem;
}

.wp-overview-stat[b-7ls2b5zvav] {
    flex: 1 1 9rem;
    border: 1px solid var(--wp-border, #e5e7eb);
    border-radius: 8px;
    padding: .6rem .8rem;
    background: var(--fluent-neutral-background-1);
}

.wp-overview-stat.clean[b-7ls2b5zvav] { border-color: var(--fluent-success-stroke); background: var(--fluent-neutral-background-2); }
.wp-overview-stat.alert[b-7ls2b5zvav] { border-color: var(--fluent-danger-stroke); background: var(--fluent-neutral-background-2); }
.wp-overview-stat.failed[b-7ls2b5zvav] { border-color: var(--fluent-neutral-stroke-2); background: var(--fluent-neutral-background-2); }

.wp-overview-figure[b-7ls2b5zvav] {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--fluent-neutral-foreground-1);
}

.wp-overview-caption[b-7ls2b5zvav] {
    display: block;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2);
}

.wp-overview-table[b-7ls2b5zvav] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8214rem;
}

.wp-overview-table thead th[b-7ls2b5zvav] {
    text-align: left;
    font-weight: 600;
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fluent-neutral-foreground-2);
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--wp-border, #e5e7eb);
}

.wp-overview-table td[b-7ls2b5zvav] {
    padding: .55rem .5rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2);
    vertical-align: top;
}

.wp-ov-row.wp-ov-alert[b-7ls2b5zvav] { background: var(--fluent-neutral-background-2); }
.wp-ov-row.wp-ov-warn[b-7ls2b5zvav] { background: var(--fluent-neutral-background-2); }

.wp-ov-row[b-7ls2b5zvav] {
    cursor: pointer;
}

.wp-ov-row.focused td[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-2);
    box-shadow: inset 0 0 0 1px rgba(15, 108, 189, .18);
}

.wp-ov-row.focused td:first-child[b-7ls2b5zvav] {
    box-shadow: inset 3px 0 0 0 var(--fluent-brand), inset 0 0 0 1px rgba(15, 108, 189, .18);
}

.wp-step-proposal-for[b-7ls2b5zvav] {
    display: block;
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
    color: var(--fluent-brand-foreground-link);
    margin-bottom: .15rem;
}

.wp-ov-no[b-7ls2b5zvav] {
    width: 2.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--fluent-neutral-foreground-2);
    font-weight: 600;
}

.wp-ov-dataset[b-7ls2b5zvav] { font-weight: 600; color: var(--fluent-neutral-foreground-1); }

.wp-ov-purpose[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2);
    max-width: 22rem;
}

.wp-ov-score[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2);
    margin-top: .2rem;
}

.wp-ov-note[b-7ls2b5zvav] { width: 34%; }

.wp-ov-textarea[b-7ls2b5zvav] {
    width: 100%;
    border: 1px solid var(--wp-border, #e5e7eb);
    border-radius: 6px;
    padding: .35rem .5rem;
    font-size: .8214rem;
    resize: vertical;
}

.wp-ov-textarea:focus[b-7ls2b5zvav] {
    outline: none;
    border-color: var(--fluent-brand-stroke);
    box-shadow: 0 0 0 2px rgba(15, 108, 189, .12);
}

.wp-ov-suggestion[b-7ls2b5zvav] {
    margin-top: .3rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2);
    background: var(--fluent-neutral-background-2);
    border-left: 2px solid var(--fluent-brand-stroke);
    padding: .25rem .45rem;
    border-radius: 0 4px 4px 0;
}

.wp-ov-go[b-7ls2b5zvav] { width: 6.5rem; text-align: right; }

.wp-overview-hint[b-7ls2b5zvav] {
    display: flex;
    align-items: flex-start;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2);
    background: var(--fluent-neutral-background-2);
    border: 1px solid var(--fluent-brand-tint-40);
    border-radius: 6px;
    padding: .5rem .7rem;
}

/* -- Afronding: de conclusie per controle -------------------------------- */

.wp-afronding[b-7ls2b5zvav] {
    flex: 1;
    overflow: auto;
    padding: 1.5rem;
    outline: none;
}

.wp-afronding-card[b-7ls2b5zvav] {
    max-width: var(--wp-card-max, 940px);
    margin: 0 auto;
    background: var(--fluent-neutral-background-1, #fff);
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(16, 24, 40, .08);
}

.wp-afronding-head[b-7ls2b5zvav] {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem 1.75rem 1.25rem;
    background: linear-gradient(135deg, var(--fluent-brand) 0%, var(--fluent-brand) 100%);
    color: #fff;
}

.wp-afronding-head .wp-intro-eyebrow[b-7ls2b5zvav] { color: rgba(255, 255, 255, .75); }

.wp-afronding-title[b-7ls2b5zvav] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: .15rem 0 .4rem;
    color: #fff;
}

.wp-afronding-lead[b-7ls2b5zvav] {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .9);
    max-width: 62ch;
}

.wp-afronding-badge[b-7ls2b5zvav] {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .15);
    font-size: 1.25rem;
}

.wp-afronding-recap[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

.wp-afronding-row[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: minmax(140px, 22%) 90px 1fr 16px;
    gap: .75rem;
    align-items: baseline;
    text-align: left;
    padding: .6rem 1.75rem;
    background: none;
    border: 0;
    border-top: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-1, #242424);
}

.wp-afronding-row:hover[b-7ls2b5zvav] { background: var(--fluent-neutral-background-2, #fafafa); }

.wp-afronding-row-name[b-7ls2b5zvav] { font-weight: 600; }

.wp-afronding-row-status[b-7ls2b5zvav] {
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-afronding-row.wp-status-akkoord .wp-afronding-row-status[b-7ls2b5zvav] { color: var(--fluent-success-foreground); }
.wp-afronding-row.wp-status-bevinding .wp-afronding-row-status[b-7ls2b5zvav] { color: var(--fluent-danger-foreground); }

.wp-afronding-row-note[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-2, #424242);
    line-height: 1.45;
}

.wp-afronding-answer[b-7ls2b5zvav] { padding: 1.25rem 1.75rem; }

.wp-afronding-actions[b-7ls2b5zvav] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.75rem 1.25rem;
    border-top: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    background: var(--fluent-neutral-background-2, #fafafa);
}

.wp-afronding-ask[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .75rem;
    font-size: .8214rem;
}

/* The conclusion of a screening, once every dataset above it has been answered. */
.wp-toelichting-focused[b-7ls2b5zvav] {
    border-color: var(--fluent-brand-stroke, #0f6cbd);
    box-shadow: 0 0 0 3px rgba(15, 108, 189, .12);
}

/* ── The generic step walk ────────────────────────────────────────────────
   A row that walks its own steps borrows the wizard shell above; only the
   contents of a step screen are its own. */

.wp-stap-feiten[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .5rem .75rem;
}

/* What this step asks the auditor to establish, one aspect at a time. */
.wp-stap-werkzaamheden[b-7ls2b5zvav] {
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 6px;
    background: var(--fluent-neutral-background-2, #fafafa);
    padding: .6rem .75rem;
}

.wp-stap-werkzaamheden h6[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .35rem;
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-stap-werkzaamheden ol[b-7ls2b5zvav] {
    margin: 0;
    padding-left: 1.15rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-stap-werkzaamheden li + li[b-7ls2b5zvav] {
    margin-top: .2rem;
}

.wp-stap-feit[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .45rem .6rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 6px;
    background: var(--fluent-neutral-background-2, #fafafa);
}

.wp-stap-feit-label[b-7ls2b5zvav] {
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-stap-feit-waarde[b-7ls2b5zvav] { font-size: .85rem; }

.wp-stap-feit-noot[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-stap-bevindingen[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.wp-stap-bevinding[b-7ls2b5zvav] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem .65rem;
    border-radius: 6px;
    border-left: 3px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    background: var(--fluent-neutral-background-2, #fafafa);
    font-size: .84rem;
}

.wp-stap-bevinding-goed[b-7ls2b5zvav] { border-left-color: var(--fluent-success); background: var(--fluent-neutral-background-2); }
.wp-stap-bevinding-aandacht[b-7ls2b5zvav] { border-left-color: var(--fluent-warning-stroke); background: var(--fluent-neutral-background-2); }
.wp-stap-bevinding-bevinding[b-7ls2b5zvav] { border-left-color: var(--fluent-danger); background: var(--fluent-neutral-background-2); }
.wp-stap-bevinding-neutraal[b-7ls2b5zvav] { border-left-color: var(--fluent-brand-stroke); background: var(--fluent-neutral-background-2); }

.wp-stap-bevinding-noot[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-stap-tabel-samenvatting[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

/* The summary and the fold button share one line above the table. */
.wp-stap-tabel-balk[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .3rem;
}

.wp-stap-tabel-vouw[b-7ls2b5zvav] {
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    background: var(--fluent-neutral-background-1, #fff);
    border-radius: 999px;
    padding: .12rem .6rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2, #424242);
    white-space: nowrap;
}

.wp-stap-tabel-vouw:hover[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-1hover, #f5f5f5);
    color: var(--fluent-neutral-foreground-1, #242424);
}

.wp-stap-tabel[b-7ls2b5zvav] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8214rem;
}

.wp-stap-tabel thead th[b-7ls2b5zvav] {
    text-align: left;
    font-weight: 600;
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--fluent-neutral-foreground-3, #616161);
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

.wp-stap-tabel td[b-7ls2b5zvav] {
    padding: .4rem .5rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2);
    vertical-align: top;
    /* A long account description or entry number may break; it may not push the table past the
       screen and take the whole werkprogramma into a horizontal scroll with it. */
    overflow-wrap: anywhere;
}

/* Every booking stays readable; the selection only marks what has to be assessed. */
.wp-stap-rij-geselecteerd td[b-7ls2b5zvav] { background: var(--fluent-neutral-background-2); }
.wp-stap-rij-geselecteerd td:first-child[b-7ls2b5zvav] { box-shadow: inset 3px 0 0 0 var(--fluent-brand); }
.wp-stap-rij-buiten td[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-3, #616161); }

/* The three columns after the data cells each say one thing: what the line is part of, where its
   assessment stands, and why it is in the selection. They were one cell holding all of it, which on
   a selected row grew wider than the table and put the whole screen into a sideways scroll. */
.wp-stap-tabel-kenmerk[b-7ls2b5zvav] { width: 11rem; }
.wp-stap-tabel-status[b-7ls2b5zvav] { width: 7rem; }
.wp-stap-tabel-reden[b-7ls2b5zvav] { width: 11.5rem; }

/* The facts of the invoice read down, one per line, the way they are on the document. */
.wp-stap-kenmerk[b-7ls2b5zvav] {
    display: block;
    font-size: .8214rem;
    line-height: 1.5;
    color: var(--fluent-neutral-foreground-2, #424242);
    white-space: nowrap;
}

.wp-stap-kenmerk-mist[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-3, #616161);
    font-style: italic;
}

.wp-stap-tabel-kenmerk .wp-stap-factuur[b-7ls2b5zvav] { margin: .2rem 0 0; }
.wp-stap-tabel-status .wp-stap-boekingstatus[b-7ls2b5zvav] { margin-left: 0; }
.wp-stap-tabel-reden .wp-stap-label[b-7ls2b5zvav] { margin: .15rem .25rem 0 0; }
.wp-stap-tabel-reden .wp-stap-selectie-actie[b-7ls2b5zvav] { margin: .2rem .25rem 0 0; }

.wp-stap-selectie[b-7ls2b5zvav] { color: var(--fluent-brand-foreground-link); font-weight: 600; }
.wp-stap-buiten[b-7ls2b5zvav] { font-style: italic; }

/* The selection is walked one booking at a time, so the row in hand is marked as plainly as the
   selection itself, and a click on its data cells takes it up. */
.wp-stap-rij-geselecteerd td:not(.wp-stap-tabel-reden):not(.wp-stap-tabel-status)[b-7ls2b5zvav] { cursor: pointer; }
.wp-stap-rij-inbeeld td[b-7ls2b5zvav] { background: var(--fluent-brand-tint-60); }
.wp-stap-rij-inbeeld td:first-child[b-7ls2b5zvav] { box-shadow: inset 3px 0 0 0 var(--fluent-brand); }

.wp-stap-boekingstatus[b-7ls2b5zvav] {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .4rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .8214rem;
    font-weight: 600;
    text-transform: lowercase;
}

.wp-stap-boekingstatus:hover[b-7ls2b5zvav] { border-color: var(--fluent-brand-stroke); }

.wp-stap-boekingstatus-open[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-4, #f0f0f0);
    color: var(--fluent-neutral-foreground-3, #616161);
    font-weight: 400;
}

.wp-stap-boekingstatus-bezig[b-7ls2b5zvav] { background: var(--fluent-brand-tint-60); color: var(--fluent-brand-foreground-link); }

/* The booking in hand: what had to be checked, what the invoice says, and the clip that proves it. */
.wp-boeking-kaart[b-7ls2b5zvav] {
    margin-top: .85rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 8px;
    background: var(--fluent-neutral-background-1);
    overflow: hidden;
}

.wp-boeking-kaart-head[b-7ls2b5zvav] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background: var(--fluent-neutral-background-2);
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    font-size: .8214rem;
    font-weight: 600;
    color: var(--fluent-brand-foreground-link);
}

.wp-boeking-kaart-teller[b-7ls2b5zvav] {
    font-weight: 400;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-boeking-punten[b-7ls2b5zvav] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wp-boeking-punt[b-7ls2b5zvav] {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2);
    cursor: pointer;
}

.wp-boeking-punt:hover[b-7ls2b5zvav] { background: var(--fluent-neutral-background-2); }

/* The procedure Enter is on, whose clip is open on the invoice. Pink, because that is the
   colour the panel gives the clip itself: the line on the left and the box on the document
   are the same thing, and the auditor walking with Enter should not have to work that out. */
.wp-boeking-punt-inbeeld[b-7ls2b5zvav] {
    background: rgba(255, 0, 255, .08);
    box-shadow: inset 3px 0 0 #ff00ff;
}

.wp-boeking-punt-inbeeld:hover[b-7ls2b5zvav] { background: rgba(255, 0, 255, .12); }

.wp-boeking-punt-inbeeld .wp-boeking-punt-clip[b-7ls2b5zvav] {
    border-color: #ff00ff;
    color: #b800b8;
    background: rgba(255, 0, 255, .06);
}

.wp-boeking-punt:last-child[b-7ls2b5zvav] { border-bottom: 0; }
.wp-boeking-punt-vink[b-7ls2b5zvav] { margin: .15rem 0 0; }
.wp-boeking-punt-tekst[b-7ls2b5zvav] { flex: 1 1 auto; min-width: 0; }

.wp-boeking-punt-naam[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-boeking-punt-waarde[b-7ls2b5zvav] {
    font-size: .8214rem;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-1, #242424);
    word-break: break-word;
}

/* A point the invoice does not answer is stated as such; an empty line would read as a blank. */
.wp-boeking-punt-leeg[b-7ls2b5zvav] {
    font-weight: 400;
    font-style: italic;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-boeking-punt-af .wp-boeking-punt-waarde[b-7ls2b5zvav] { color: var(--fluent-success-foreground); }

.wp-boeking-punt-clip[b-7ls2b5zvav] {
    flex: 0 0 auto;
    padding: .1rem .45rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 4px;
    background: transparent;
    color: var(--fluent-brand-foreground-link);
    font-size: .8214rem;
}

.wp-boeking-punt-clip:hover[b-7ls2b5zvav] { border-color: var(--fluent-brand-stroke); background: var(--fluent-neutral-background-2); }

.wp-boeking-kaart-bezig[b-7ls2b5zvav],
.wp-boeking-kaart-leeg[b-7ls2b5zvav],
.wp-boeking-kaart-voet[b-7ls2b5zvav],
.wp-boeking-kaart-fout[b-7ls2b5zvav] {
    padding: .6rem .75rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-boeking-kaart-voet[b-7ls2b5zvav],
.wp-boeking-kaart-fout[b-7ls2b5zvav] {
    border-top: 1px solid var(--fluent-neutral-stroke-2);
    color: var(--fluent-warning-foreground);
    background: var(--fluent-neutral-background-2);
}

.wp-step-proposal-bezig[b-7ls2b5zvav] {
    margin-top: .5rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-stap-label[b-7ls2b5zvav] {
    display: inline-block;
    margin-left: .3rem;
    padding: .05rem .35rem;
    border-radius: 999px;
    background: var(--fluent-neutral-background-4, #f0f0f0);
    font-size: .8214rem;
}

/* Pulling a booking into the selection, or withdrawing it with a reason. Quiet until hovered:
   the table is read far more often than it is changed. */
.wp-stap-selectie-actie[b-7ls2b5zvav] {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .4rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 4px;
    background: transparent;
    color: var(--fluent-neutral-foreground-2, #424242);
    font-size: .8214rem;
    line-height: 1.5;
}

.wp-stap-selectie-actie:hover:not(:disabled)[b-7ls2b5zvav] {
    border-color: var(--fluent-brand-stroke-1, #0f6cbd);
    color: var(--fluent-brand-foreground-1, #0f6cbd);
}

.wp-stap-selectie-actie:disabled[b-7ls2b5zvav] { opacity: .45; }

.wp-stap-afvoer[b-7ls2b5zvav] {
    display: flex;
    gap: .3rem;
    align-items: center;
    margin-top: .3rem;
}

.wp-stap-afvoer input[b-7ls2b5zvav] { max-width: 14rem; font-size: .8214rem; }

/* Wat een stap zelf uitvraagt: vinkjes, bedragen, data. */
.wp-stap-velden[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding: 14px 16px;
    border: 1px solid var(--wp-border, #e1dfdd);
    border-radius: 6px;
    background: var(--wp-surface-subtle, #faf9f8);
}

.wp-stap-veld[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Een vinkje leest als een zin, dus staat het label ernaast en niet erboven. */
.wp-stap-veld-vinkje[b-7ls2b5zvav] {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

.wp-stap-veld-vinkje input[type="checkbox"][b-7ls2b5zvav] {
    margin-top: 3px;
    flex: 0 0 auto;
}

.wp-stap-veld-label[b-7ls2b5zvav] {
    font-size: 13px;
    font-weight: 600;
    color: var(--wp-text, #201f1e);
}

.wp-stap-veld-vinkje .wp-stap-veld-label[b-7ls2b5zvav] {
    font-weight: 500;
}

.wp-stap-veld-noot[b-7ls2b5zvav] {
    font-size: 12px;
    color: var(--wp-text-secondary, #605e5c);
    line-height: 1.4;
}

.wp-stap-veld input[type="text"][b-7ls2b5zvav],
.wp-stap-veld input[type="number"][b-7ls2b5zvav],
.wp-stap-veld input[type="date"][b-7ls2b5zvav] {
    max-width: 320px;
    padding: 6px 8px;
    border: 1px solid var(--wp-border, #e1dfdd);
    border-radius: 4px;
    font-size: 13px;
    font-family: inherit;
}

.wp-stap-veld input:focus-visible[b-7ls2b5zvav] {
    outline: 2px solid var(--wp-accent, #0f6cbd);
    outline-offset: 1px;
}

/* Fetching the invoice behind a booking, in the selection column of a step table. */
.wp-stap-factuur[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    margin-left: .4rem;
    padding: .1rem .45rem;
    border: 1px solid var(--wp-border, #d6d9de);
    border-radius: 4px;
    background: var(--fluent-neutral-background-1);
    font-size: .8214rem;
    line-height: 1.5;
    color: var(--wp-accent, #0f6cbd);
    white-space: nowrap;
}

.wp-stap-factuur:hover:not(:disabled)[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-2);
    border-color: var(--wp-accent, #0f6cbd);
}

.wp-stap-factuur:disabled[b-7ls2b5zvav] {
    opacity: .6;
}

.wp-stap-factuur-fout[b-7ls2b5zvav] {
    display: block;
    margin-top: .25rem;
    font-size: .8214rem;
    color: var(--fluent-danger-foreground);
}
/* -- The parts of a step, walked one at a time ------------------------- */

.wp-onderdelen[b-7ls2b5zvav] { display: flex; flex-direction: column; gap: .5rem; margin: .75rem 0 0; }

.wp-onderdelen-kop[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-onderdeel-bezig[b-7ls2b5zvav] { display: inline-flex; align-items: center; gap: .3rem; text-transform: none; }

.wp-onderdeel[b-7ls2b5zvav] {
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 6px;
    padding: .6rem .75rem;
    background: var(--fluent-neutral-background-1);
    cursor: pointer;
}

.wp-onderdeel:hover[b-7ls2b5zvav] { border-color: var(--fluent-neutral-stroke-1, #d1d1d1); }

/* The account Enter is on. The same accent as the booking walk, because it is the same promise:
   this is the one being established right now. */
.wp-onderdeel-inbeeld[b-7ls2b5zvav] {
    border-color: var(--fluent-brand-stroke-1, #0f6cbd);
    box-shadow: inset 3px 0 0 var(--fluent-brand-stroke-1, #0f6cbd);
    background: var(--fluent-brand-background-2, #ebf3fc);
}

.wp-onderdeel-kop[b-7ls2b5zvav] { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.wp-onderdeel-titel[b-7ls2b5zvav] { font-weight: 600; font-size: .84rem; }

.wp-onderdeel-waarde[b-7ls2b5zvav] {
    font-size: .84rem;
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-onderdeel-merk[b-7ls2b5zvav] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-onderdeel-noot[b-7ls2b5zvav] {
    margin-top: .25rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-onderdeel .wp-stap-feiten[b-7ls2b5zvav] { margin-top: .5rem; }

.wp-onderdeel-goed .wp-onderdeel-kop > .bi[b-7ls2b5zvav] { color: var(--fluent-success-foreground); }
.wp-onderdeel-aandacht .wp-onderdeel-kop > .bi[b-7ls2b5zvav] { color: var(--fluent-warning-foreground); }
.wp-onderdeel-bevinding .wp-onderdeel-kop > .bi[b-7ls2b5zvav] { color: var(--fluent-danger-foreground); }
.wp-onderdeel-neutraal .wp-onderdeel-kop > .bi[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-3, #616161); }

.wp-onderdeel:focus-visible[b-7ls2b5zvav] {
    outline: 2px solid var(--fluent-brand-stroke-1, #0f6cbd);
    outline-offset: 2px;
}

/* ── CZ3: van land naar crediteur naar boeking ─────────────────────────── */

.wp-land-telling[b-7ls2b5zvav] {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--fluent-brand-foreground-1, #115ea3);
    text-decoration: underline;
    cursor: pointer;
}

.wp-land-telling i[b-7ls2b5zvav] { font-size: .8214rem; margin-left: .15rem; }

.wp-land[b-7ls2b5zvav] {
    margin-top: 1rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 6px;
    background: var(--fluent-neutral-background-1, #fff);
}

.wp-land-kop[b-7ls2b5zvav] {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    font-weight: 600;
    font-size: .85rem;
}

.wp-land-kop-noot[b-7ls2b5zvav] {
    font-weight: 400;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-land-leeg[b-7ls2b5zvav] {
    padding: .6rem .75rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-land-crediteur[b-7ls2b5zvav] { border-bottom: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0); }
.wp-land-crediteur:last-child[b-7ls2b5zvav] { border-bottom: 0; }

.wp-land-crediteur-kop[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    cursor: pointer;
}

.wp-land-crediteur-kop:hover[b-7ls2b5zvav] { background: var(--fluent-neutral-background-1hover, #f5f5f5); }
.wp-land-crediteur.is-open .wp-land-crediteur-kop[b-7ls2b5zvav] { background: var(--fluent-neutral-background-1hover, #f5f5f5); }

.wp-land-crediteur-naam[b-7ls2b5zvav] { font-weight: 600; font-size: .85rem; }

.wp-land-crediteur-meta[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-land-crediteur-oordeel[b-7ls2b5zvav] {
    margin-left: auto;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    white-space: nowrap;
}

.wp-land-detail[b-7ls2b5zvav] { padding: .25rem .75rem .75rem 1.9rem; }

.wp-land-vaststelling[b-7ls2b5zvav] {
    font-size: .8214rem;
    margin-bottom: .5rem;
    white-space: pre-wrap;
}

.wp-land-bezig[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    padding: .4rem 0;
}

.wp-land-tabel[b-7ls2b5zvav] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: .8214rem;
}

.wp-land-tabel th[b-7ls2b5zvav],
.wp-land-tabel td[b-7ls2b5zvav] {
    padding: .3rem .4rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.wp-land-tabel th[b-7ls2b5zvav] {
    font-weight: 600;
    color: var(--fluent-neutral-foreground-2, #424242);
    white-space: nowrap;
}

.wp-land-tabel .wp-land-bedrag[b-7ls2b5zvav] { text-align: right; white-space: nowrap; }

.wp-land-documenten[b-7ls2b5zvav] { margin-top: .6rem; }

.wp-land-documenten-kop[b-7ls2b5zvav] {
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fluent-neutral-foreground-3, #616161);
    margin-bottom: .25rem;
}

.wp-land-document[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .8214rem;
    padding: .15rem 0;
}

.wp-land-document-naam[b-7ls2b5zvav] { overflow-wrap: anywhere; }

.wp-land-document-clips[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-land-open[b-7ls2b5zvav] { margin-top: .7rem; }

/* -- De naamcontrole: een regel per rekening --------------------------- */

/* De rekeningen zaten in losse kaarten die elk hun eigen hoogte kozen. Als lijst
   met vaste kolommen leest de auditor ze als een tabel: wat er is opgehaald,
   en rechts waar de rekening staat. */
.wp-onderdeel-lijst[b-7ls2b5zvav] { display: flex; flex-direction: column; gap: .4rem; }

.wp-onderdelen-telling[b-7ls2b5zvav] { text-transform: none; letter-spacing: 0; margin-left: auto; }

.wp-onderdeel-feiten[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    margin-top: .4rem;
}

.wp-onderdeel-feit[b-7ls2b5zvav] { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; font-size: .8214rem; max-width: 100%; }

.wp-onderdeel-feit-label[b-7ls2b5zvav] {
    color: var(--fluent-neutral-foreground-3, #616161);
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.wp-onderdeel-feit-waarde[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-1, #242424); }

/* De toelichting staat onder het feit in plaats van in een tooltip: zij draagt de reden
   waarom een naam niet kon worden opgehaald, en die hoort niet achter een muis te zitten. */
.wp-onderdeel-feit-noot[b-7ls2b5zvav] {
    flex-basis: 100%;
    color: var(--fluent-neutral-foreground-3, #616161);
    font-size: .8214rem;
    line-height: 1.35;
}

.wp-onderdeel-merk-vast[b-7ls2b5zvav] { color: var(--fluent-success-foreground); }
.wp-onderdeel-merk-open[b-7ls2b5zvav] { color: var(--fluent-brand-foreground-1, #115ea3); }

/* De zin die in de conclusie komt of er al in staat. Blijft staan nadat zij is
   overgenomen: anders is op de rekening niets meer te zien van wat er in het
   dossier is vastgelegd, en dat leest als een verdwenen conclusie. */
.wp-onderdeel-zin[b-7ls2b5zvav] {
    margin-top: .5rem;
    padding: .45rem .6rem;
    border-radius: 5px;
    background: var(--fluent-neutral-background-1);
}

.wp-onderdeel-zin-open[b-7ls2b5zvav] { border: 1px dashed var(--fluent-brand-stroke-1, #0f6cbd); }

.wp-onderdeel-zin-vast[b-7ls2b5zvav] {
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    background: var(--fluent-neutral-background-2, #fafafa);
}

.wp-onderdeel-zin-kop[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-onderdeel-zin-open .wp-onderdeel-zin-kop[b-7ls2b5zvav] { color: var(--fluent-brand-foreground-1, #115ea3); }
.wp-onderdeel-zin-vast .wp-onderdeel-zin-kop > .bi[b-7ls2b5zvav] { color: var(--fluent-success-foreground); }

.wp-onderdeel-zin-tekst[b-7ls2b5zvav] { font-size: .8214rem; margin-top: .25rem; white-space: pre-wrap; }

.wp-onderdeel-zin-noot[b-7ls2b5zvav] {
    margin-top: .3rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-3, #616161);
}

/* -- De kolom Selectie: reden links, actie rechts ---------------------- */

.wp-stap-selectiecel[b-7ls2b5zvav] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .35rem;
    flex-wrap: wrap;
}

.wp-stap-selectiecel-tekst[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    min-width: 0;
}

.wp-stap-selectiecel-tekst .wp-stap-label[b-7ls2b5zvav] { margin: 0; }

.wp-stap-selectiecel-actie[b-7ls2b5zvav] { flex: 0 0 auto; margin-left: auto; }

.wp-stap-selectiecel-actie .wp-stap-selectie-actie[b-7ls2b5zvav] {
    margin: 0;
    padding: .1rem .3rem;
    line-height: 1;
}

/* -- Een eigen stuk in het zijpaneel ---------------------------------- */

.wp-stap-feit-link[b-7ls2b5zvav] {
    border: 0;
    background: none;
    padding: 0;
    color: var(--fluent-brand-foreground-1, #115ea3);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.wp-stap-feit-link:hover[b-7ls2b5zvav] { text-decoration: underline; }
.wp-kosten-chart[b-7ls2b5zvav] {
    margin: 0;
    padding: 1.25rem 1.5rem;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 42vh;
    overflow-y: auto;
    background: var(--fluent-neutral-background-1, #fff);
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    font-variant-numeric: tabular-nums;
}

.wp-kosten-chart-header[b-7ls2b5zvav] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}

.wp-kosten-chart h3[b-7ls2b5zvav] { font-size: 1.05rem; font-weight: 650; margin: 0 0 .25rem; }
.wp-kosten-chart p[b-7ls2b5zvav], .wp-kosten-chart figcaption[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-2, #616161); margin: 0; font-size: .8214rem; }
.wp-kosten-chart figcaption[b-7ls2b5zvav] { margin-top: .85rem; }
.wp-kosten-chart-legend[b-7ls2b5zvav] { display: flex; gap: 1rem; font-size: .85rem; }
.wp-kosten-chart-actions[b-7ls2b5zvav] { display: grid; justify-items: end; gap: .5rem; }
.wp-kosten-chart-legend span[b-7ls2b5zvav] { display: inline-flex; align-items: center; gap: .35rem; }
.wp-kosten-dot[b-7ls2b5zvav] { width: .65rem; height: .65rem; border-radius: .2rem; }
.wp-kosten-dot.is-current[b-7ls2b5zvav], .wp-kosten-chart-line .is-current[b-7ls2b5zvav] { background: var(--fluent-brand, #0f6cbd); }
.wp-kosten-dot.is-previous[b-7ls2b5zvav], .wp-kosten-chart-line .is-previous[b-7ls2b5zvav] { background: var(--fluent-neutral-foreground-2, #616161); }
.wp-kosten-chart-rows[b-7ls2b5zvav] { display: grid; gap: .6rem; }
.wp-kosten-chart-row[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}
.wp-kosten-chart-label[b-7ls2b5zvav] { font-weight: 550; overflow-wrap: anywhere; font-size: .85rem; }
.wp-kosten-chart-pair[b-7ls2b5zvav] { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .8rem; row-gap: .18rem; align-items: center; }
.wp-kosten-chart-line[b-7ls2b5zvav] { display: flex; height: .7rem; width: 100%; }
.wp-kosten-chart-negative[b-7ls2b5zvav], .wp-kosten-chart-positive[b-7ls2b5zvav] { min-width: 0; display: flex; align-items: center; border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0); }
.wp-kosten-chart-negative[b-7ls2b5zvav] { justify-content: flex-end; border-right: 1px solid var(--fluent-neutral-foreground-2, #616161); }
.wp-kosten-chart-line span:not(.wp-kosten-zero)[b-7ls2b5zvav] { display: block; height: .55rem; min-width: 2px; border-radius: 2px; }
.wp-kosten-zero[b-7ls2b5zvav] { width: 3px; height: .55rem; background: var(--fluent-neutral-foreground-2, #616161); }
.wp-kosten-chart-value[b-7ls2b5zvav] { min-width: 7.5rem; text-align: right; white-space: nowrap; font-size: .8214rem; }
.wp-kosten-chart-scale[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr);
    gap: 1rem;
    margin-top: .5rem;
    font-size: .8214rem;
    color: var(--fluent-neutral-foreground-2, #616161);
}
.wp-kosten-chart-ticks[b-7ls2b5zvav] {
    display: flex;
    margin-right: 8.3rem;
}
.wp-kosten-negative-ticks[b-7ls2b5zvav], .wp-kosten-positive-ticks[b-7ls2b5zvav] {
    min-width: 0;
    display: flex;
    justify-content: space-between;
}
@media (max-width: 700px) {
    .wp-kosten-chart[b-7ls2b5zvav] { padding: 1rem; }
    .wp-kosten-chart-row[b-7ls2b5zvav] { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
    .wp-kosten-chart-value[b-7ls2b5zvav] { min-width: 6.5rem; }
    .wp-kosten-chart-scale[b-7ls2b5zvav] { grid-template-columns: 1fr; }
    .wp-kosten-chart-scale > span:first-child[b-7ls2b5zvav] { display: none; }
    .wp-kosten-chart-ticks[b-7ls2b5zvav] { margin-right: 7.3rem; }
}

/* Eigen vermogen: the matrix of the manual analysis — group and entities as columns, blocks underneath. */
.wp-ev-wrap[b-7ls2b5zvav] {
    flex: 1;
    overflow: auto;
    min-height: 0;
    padding: 0 0 1rem;
}

.wp-ev-table[b-7ls2b5zvav] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9286rem;
    font-variant-numeric: tabular-nums;
}

.wp-ev-table thead th[b-7ls2b5zvav] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    border-bottom: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    padding: .5rem;
    font-weight: 600;
    max-width: 10rem;
    line-height: 1.25;
    vertical-align: bottom;
}

.wp-ev-table td[b-7ls2b5zvav] {
    padding: .3rem .5rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0);
    vertical-align: top;
}

.wp-ev-oms[b-7ls2b5zvav] {
    text-align: left;
    min-width: 22rem;
    max-width: 34rem;
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
}

.wp-ev-table thead .wp-ev-oms[b-7ls2b5zvav] { z-index: 3; }
.wp-ev-table thead th.wp-ev-num[b-7ls2b5zvav] { white-space: normal; }
.wp-ev-table tbody .wp-ev-oms[b-7ls2b5zvav] { background: var(--fluent-neutral-background-1, #fff); }

.wp-ev-num[b-7ls2b5zvav] {
    text-align: right;
    white-space: nowrap;
    min-width: 7.5rem;
}

.wp-ev-groep[b-7ls2b5zvav] {
    background: var(--fluent-brand-tint-60, #ebf3fc);
    font-weight: 600;
}

.wp-ev-table thead .wp-ev-groep[b-7ls2b5zvav] { background: var(--fluent-brand-tint-50, #dcebfa); }

.wp-ev-check[b-7ls2b5zvav],
.wp-ev-jr[b-7ls2b5zvav] {
    border-left: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1);
}

.wp-ev-jr input[b-7ls2b5zvav] {
    min-width: 8rem;
}

/* EV1: one line per post; behind every reconciled amount how it stands against the annual accounts. */
.wp-ev-mk[b-7ls2b5zvav] {
    display: inline-flex;
    justify-content: center;
    width: 1.1rem;
    margin-left: .2rem;
    font-size: .8rem;
}

.wp-ev-cel[b-7ls2b5zvav] { cursor: pointer; }
.wp-ev-cel:hover[b-7ls2b5zvav] { background: var(--fluent-neutral-background-3, #f5f5f5); }
.wp-ev-cel.wp-ev-groep:hover[b-7ls2b5zvav] { background: var(--fluent-brand-tint-50, #dcebfa); }
.wp-ev-cel.is-aangesloten .wp-ev-mk[b-7ls2b5zvav],
.wp-ev-cel.is-verklaard .wp-ev-mk[b-7ls2b5zvav] { color: var(--fluent-success, #107c10); }
.wp-ev-cel.is-verschil .wp-ev-mk[b-7ls2b5zvav] { color: var(--fluent-danger, #c50f1f); }
.wp-ev-cel.is-verdacht .wp-ev-mk[b-7ls2b5zvav] { color: var(--fluent-warning, #da7b00); }
.wp-ev-cel.is-leeg .wp-ev-mk[b-7ls2b5zvav] { color: var(--fluent-neutral-stroke-1, #d1d1d1); font-size: .6rem; }
.wp-ev-cel.is-verschil[b-7ls2b5zvav],
.wp-ev-cel.is-verschil.wp-ev-groep[b-7ls2b5zvav] { background: var(--fluent-danger-tint-60, #fdf3f4); }
.wp-ev-cel.is-verdacht[b-7ls2b5zvav],
.wp-ev-cel.is-verdacht.wp-ev-groep[b-7ls2b5zvav] { background: var(--fluent-warning-tint-60, #fff9f0); }

.wp-ev-cel.is-evactief[b-7ls2b5zvav] {
    box-shadow: inset 0 0 0 2px var(--fluent-brand-stroke, #0f6cbd);
    background: var(--fluent-brand-tint-50, #dcebfa);
}

.wp-ev-dif[b-7ls2b5zvav],
.wp-ev-jrbedrag[b-7ls2b5zvav] {
    display: block;
    margin-right: 1.3rem;
    font-size: .7857rem;
    font-weight: 400;
    line-height: 1.3;
}

.wp-ev-dif[b-7ls2b5zvav] { color: var(--fluent-danger-foreground, #b10e1c); }
.wp-ev-dif.is-verdacht[b-7ls2b5zvav] { color: var(--fluent-warning-foreground, #8a5300); }
.wp-ev-jrbedrag[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-3, #616161); }

.wp-ev-pill[b-7ls2b5zvav] {
    display: inline-block;
    border-radius: 999px;
    padding: 0 .5rem;
    font-size: .7857rem;
    font-weight: 600;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    color: var(--fluent-neutral-foreground-3, #616161);
}

.wp-ev-pill.is-ok[b-7ls2b5zvav] { background: var(--fluent-success-tint-60, #f1faf1); color: var(--fluent-success-foreground, #0e700e); }
.wp-ev-pill.is-afwijking[b-7ls2b5zvav] { background: var(--fluent-danger-tint-60, #fdf3f4); color: var(--fluent-danger-foreground, #b10e1c); }

.wp-ev-hint td[b-7ls2b5zvav] {
    background: var(--fluent-warning-tint-60, #fff9f0);
    border-bottom: 1px solid var(--fluent-warning-stroke, #fdcf87);
    color: var(--fluent-warning-foreground, #8a5300);
    font-size: .8571rem;
    padding: .35rem .75rem;
}

.wp-ev-hintinhoud[b-7ls2b5zvav] {
    position: sticky;
    left: .75rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    width: max-content;
    max-width: min(100%, 52rem);
    white-space: normal;
}

.wp-ev-hintinhoud > .btn[b-7ls2b5zvav] { flex: none; }

/* Above the EV1 table: how far the reconciliation is, each count a jump to its next amount. */
.wp-ev-bar .wp-gridbar-left[b-7ls2b5zvav] { flex-wrap: wrap; gap: .4rem; }

.wp-ev-chip[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    border-radius: 999px;
    background: var(--fluent-neutral-background-1, #fff);
    color: inherit;
    padding: 0 .6rem;
    font-size: .8214rem;
    line-height: 1.5rem;
}

.wp-ev-chip:hover[b-7ls2b5zvav] { border-color: var(--fluent-brand-stroke, #0f6cbd); }
.wp-ev-chipdot[b-7ls2b5zvav] { width: .45rem; height: .45rem; border-radius: 50%; background: var(--fluent-neutral-stroke-1, #d1d1d1); }
.wp-ev-chip.is-ok .wp-ev-chipdot[b-7ls2b5zvav] { background: var(--fluent-success, #107c10); }
.wp-ev-chip.is-afwijking .wp-ev-chipdot[b-7ls2b5zvav] { background: var(--fluent-danger, #c50f1f); }
.wp-ev-chip.is-verdacht .wp-ev-chipdot[b-7ls2b5zvav] { background: var(--fluent-warning, #da7b00); }

.wp-ev-toon[b-7ls2b5zvav] { display: inline-flex; align-items: center; gap: .35rem; font-size: .8214rem; margin-right: .5rem; }

/* Under the EV1 table: the chosen amount against the annual accounts. */
.wp-ev-paneel .wp-rb-kop[b-7ls2b5zvav] { flex-wrap: wrap; gap: .25rem .75rem; }
.wp-ev-paneel.is-gewapend[b-7ls2b5zvav] { border-top-color: var(--fluent-brand-stroke, #0f6cbd); }

.wp-ev-trio[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 12rem));
    gap: .5rem;
    margin: .5rem 0;
    font-variant-numeric: tabular-nums;
}

.wp-ev-trio > div[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-2, #fafafa);
    border-radius: 6px;
    padding: .35rem .6rem;
}

.wp-ev-trio small[b-7ls2b5zvav] { display: block; color: var(--fluent-neutral-foreground-3, #616161); font-size: .7857rem; }
.wp-ev-trio b[b-7ls2b5zvav] { font-size: 1.0714rem; font-weight: 600; line-height: 1.75rem; }
.wp-ev-trio .wp-ev-veld[b-7ls2b5zvav] { background: var(--fluent-neutral-background-1, #fff); border-color: var(--fluent-neutral-stroke-1, #d1d1d1); font-weight: 600; }

.wp-ev-melding[b-7ls2b5zvav] {
    margin: 0 0 .5rem;
    padding: .35rem .6rem;
    border-radius: 6px;
    border: 1px solid;
    font-size: .8571rem;
}

.wp-ev-melding.is-hint[b-7ls2b5zvav] { background: var(--fluent-warning-tint-60, #fff9f0); border-color: var(--fluent-warning-stroke, #fdcf87); color: var(--fluent-warning-foreground, #8a5300); }
.wp-ev-melding.is-ok[b-7ls2b5zvav] { background: var(--fluent-success-tint-60, #f1faf1); border-color: var(--fluent-success-stroke, #9fd89f); color: var(--fluent-success-foreground, #0e700e); }
.wp-ev-melding.is-info[b-7ls2b5zvav] { background: var(--fluent-neutral-background-2, #fafafa); border-color: var(--fluent-neutral-stroke-2, #e0e0e0); color: var(--fluent-neutral-foreground-2, #424242); }

.wp-ev-acties[b-7ls2b5zvav] { display: flex; flex-wrap: wrap; gap: .4rem; }

/* The row and column Enter stands on. */
.wp-ev-rij.is-evactief .wp-ev-label[b-7ls2b5zvav] { color: var(--fluent-brand-foreground-link, #0f6cbd); font-weight: 600; }

.wp-ev-table thead th.is-evactief[b-7ls2b5zvav] {
    background: var(--fluent-brand-tint-50, #dcebfa);
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    box-shadow: inset 0 -3px 0 var(--fluent-brand, #0f6cbd);
}

/* An annual figure: reads as an amount, shows itself a field on hover and focus. */
.wp-ev-veld[b-7ls2b5zvav] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 7.5rem;
    height: 1.75rem;
    border: 1px solid transparent;
    border-radius: 4px;
    box-sizing: border-box;
}

.wp-ev-veld:hover[b-7ls2b5zvav] { border-color: var(--fluent-neutral-stroke-1, #d1d1d1); background: var(--fluent-neutral-background-1, #fff); }

.wp-ev-veld:focus-within[b-7ls2b5zvav] {
    border-color: var(--fluent-brand-stroke, #0f6cbd);
    background: var(--fluent-neutral-background-1, #fff);
}

.wp-ev-veldinvoer[b-7ls2b5zvav] {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
    padding: 0 .3rem;
    outline: none;
}

.wp-ev-veldinvoer[b-7ls2b5zvav]::placeholder { color: var(--fluent-neutral-foreground-3, #616161); font-style: italic; }

.wp-ev-veldicoon[b-7ls2b5zvav] { flex: none; margin-left: .35rem; font-size: .85rem; }

.wp-ev-veld.is-ok[b-7ls2b5zvav] { color: var(--fluent-success-foreground, #0e700e); }
.wp-ev-veld.is-ok .wp-ev-veldicoon[b-7ls2b5zvav] { color: var(--fluent-success, #107c10); }

.wp-ev-veld.is-afwijking[b-7ls2b5zvav] {
    color: var(--fluent-danger-foreground, #b10e1c);
    background: var(--fluent-danger-tint-60, #fdf3f4);
    border-color: var(--fluent-danger-stroke, #f1bbbc);
}

.wp-ev-veld.is-afwijking .wp-ev-veldicoon[b-7ls2b5zvav] { color: var(--fluent-danger, #c50f1f); }

.wp-ev-veld.is-actief[b-7ls2b5zvav],
.wp-ev-veld.is-gewapend[b-7ls2b5zvav] {
    border: 2px solid var(--fluent-brand-stroke, #0f6cbd);
    background: var(--fluent-brand-tint-50, #dcebfa);
    box-shadow: 0 0 0 3px var(--fluent-brand-tint-40, #b4d6fa);
}

.wp-ev-veld.is-gewapend[b-7ls2b5zvav] { border-style: dashed; }

.wp-ev-veldknoppen[b-7ls2b5zvav] { display: flex; gap: .1rem; padding-right: .15rem; }

.wp-ev-veld .wp-veld-knop[b-7ls2b5zvav] { opacity: 0; }

.wp-ev-veld:hover .wp-veld-knop[b-7ls2b5zvav],
.wp-ev-veld:focus-within .wp-veld-knop[b-7ls2b5zvav],
.wp-ev-veld.is-actief .wp-veld-knop[b-7ls2b5zvav],
.wp-ev-veld.is-gewapend .wp-veld-knop[b-7ls2b5zvav],
.wp-ev-veld .wp-veld-knop.is-clip[b-7ls2b5zvav] { opacity: 1; }

/* Under the table while Enter walks the annual figures. */
.wp-ev-celstand[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .75rem;
    padding: .45rem .75rem;
    border-top: 2px solid var(--fluent-brand-stroke, #0f6cbd);
    background: var(--fluent-brand-tint-60, #ebf3fc);
    font-size: .8214rem;
}

.wp-ev-celstand > .bi[b-7ls2b5zvav] { color: var(--fluent-brand-foreground-link, #0f6cbd); }
.wp-ev-celstand strong[b-7ls2b5zvav] { color: var(--fluent-brand-foreground-link, #0f6cbd); }
.wp-ev-celstand-sub[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-3, #616161); }
.wp-ev-celstand.is-gewapend .wp-ev-celstand-melding[b-7ls2b5zvav] { color: var(--fluent-brand-foreground-link, #0f6cbd); font-weight: 600; }
.wp-ev-celstand-melding.is-afwijking[b-7ls2b5zvav] { color: var(--fluent-danger-foreground, #b10e1c); }
.wp-ev-celstand-keys[b-7ls2b5zvav] { margin-left: auto; color: var(--fluent-neutral-foreground-3, #616161); font-size: .8214rem; }

.wp-ev-rij td.wp-ev-jr.is-afwijking[b-7ls2b5zvav] { color: var(--fluent-danger, #c50f1f); }

.wp-ev-status select[b-7ls2b5zvav] {
    min-width: 7.5rem;
}

.wp-ev-blok-kop th[b-7ls2b5zvav] {
    padding: 1rem .5rem .35rem;
    font-size: .8214rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    border-bottom: 2px solid var(--fluent-brand-stroke, #0f6cbd);
    background: var(--fluent-neutral-background-1, #fff);
}

.wp-ev-toggle[b-7ls2b5zvav] {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-decoration: none;
}

.wp-ev-rij[b-7ls2b5zvav] { cursor: pointer; }
.wp-ev-rij:hover td[b-7ls2b5zvav] { background: var(--fluent-neutral-background-hover, #f5f5f5); }

.wp-ev-rij.is-current td[b-7ls2b5zvav] {
    background: var(--fluent-brand-tint-60, #ebf3fc);
}

.wp-ev-rij.is-current .wp-ev-oms[b-7ls2b5zvav] {
    box-shadow: inset 3px 0 0 var(--fluent-brand, #0f6cbd);
}

.wp-ev-rij.is-totaal td[b-7ls2b5zvav],
.wp-ev-rij.is-verschil td[b-7ls2b5zvav] {
    font-weight: 700;
    border-top: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1);
}

.wp-ev-rij.is-verschil td[b-7ls2b5zvav] { border-bottom: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1); }

.wp-ev-label[b-7ls2b5zvav] { margin-left: .4rem; }

.wp-ev-signaal[b-7ls2b5zvav] {
    margin-left: .35rem;
    color: var(--fluent-warning, #bc4b09);
}

.wp-ev-sub[b-7ls2b5zvav] {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: .25rem 0 0 1.1rem;
    font-size: .8214rem;
}

.wp-ev-aard[b-7ls2b5zvav] { width: auto; min-width: 12rem; font-size: .8214rem; }

.wp-ev-waarom[b-7ls2b5zvav] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--wp-muted, #57606a);
}

.wp-ev-rij td.is-ok[b-7ls2b5zvav] { color: var(--fluent-success, #107c10); }

.wp-ev-rij td.is-nul[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-4, #a0a0a0); }

.wp-ev-rij td.is-afwijking[b-7ls2b5zvav] {
    color: var(--fluent-danger, #c50f1f);
    background: var(--fluent-danger-tint-60, #fdf3f4);
}

.wp-ev-voet[b-7ls2b5zvav] {
    margin: .75rem .5rem 0;
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}

/* A field that can be clipped into: the clip button sits inside the input, the paperclip shows the clip it came from. */
.wp-veld[b-7ls2b5zvav] {
    position: relative;
    min-width: 7.5rem;
}

.wp-veld.can-clip input[b-7ls2b5zvav] { padding-right: 1.9rem; }
.wp-veld.can-clip.has-clip input[b-7ls2b5zvav] { padding-right: 3.3rem; }

.wp-veld-knoppen[b-7ls2b5zvav] {
    position: absolute;
    top: 50%;
    right: .2rem;
    transform: translateY(-50%);
    display: flex;
    gap: .1rem;
}

.wp-veld-knop[b-7ls2b5zvav] {
    border: 0;
    background: transparent;
    padding: 0 .25rem;
    line-height: 1.4;
    border-radius: 3px;
    color: var(--wp-muted, #57606a);
    opacity: 0;
    transition: opacity .12s ease-in-out;
}

.wp-veld:hover .wp-veld-knop[b-7ls2b5zvav],
.wp-veld:focus-within .wp-veld-knop[b-7ls2b5zvav],
.wp-veld-knop.is-clip[b-7ls2b5zvav],
.wp-veld-knop.is-gewapend[b-7ls2b5zvav] { opacity: 1; }

.wp-veld-knop:hover[b-7ls2b5zvav] { background: var(--fluent-neutral-background-hover, #f0f0f0); color: var(--fluent-brand-foreground-link, #0f6cbd); }
.wp-veld-knop.is-clip[b-7ls2b5zvav] { color: var(--fluent-brand-foreground-link, #0f6cbd); }

.wp-veld-knop.is-gewapend[b-7ls2b5zvav] {
    color: #fff;
    background: var(--fluent-brand, #0f6cbd);
    animation: wp-veld-puls-b-7ls2b5zvav 1.2s ease-in-out infinite;
}

.wp-veld.is-gewapend input[b-7ls2b5zvav] {
    border-color: var(--fluent-brand-stroke, #0f6cbd);
    box-shadow: 0 0 0 2px var(--fluent-brand-tint-50, #dcebfa);
}

@keyframes wp-veld-puls-b-7ls2b5zvav {
    50% { box-shadow: 0 0 0 3px var(--fluent-brand-tint-50, #dcebfa); }
}

/* Liquide middelen LM2, LM3 and LM7: tables in the manner of the Eigen vermogen matrix. */
.wp-lm-table thead th[b-7ls2b5zvav] { position: static; }
.wp-lm3-table thead th[b-7ls2b5zvav] { position: sticky; }

.wp-lm-table thead .wp-lm-groep[b-7ls2b5zvav] {
    text-align: center;
    border-bottom: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    border-left: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1);
}

.wp-lm-table thead .is-invoer[b-7ls2b5zvav] { background: var(--fluent-brand-tint-50, #dcebfa); }
.wp-lm-table .wp-lm-start[b-7ls2b5zvav] { border-left: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1); }
.wp-lm-table td.wp-lm-invoer[b-7ls2b5zvav] { background: var(--fluent-brand-tint-60, #f5f9fe); }
.wp-lm-table td.wp-lm-invoer .wp-veld[b-7ls2b5zvav] { min-width: 9rem; }
.wp-lm-table td.wp-lm-invoer input[b-7ls2b5zvav] { text-align: right; }
.wp-lm-table td.wp-lm7-details input[b-7ls2b5zvav] { text-align: left; }

.wp-lm-iban[b-7ls2b5zvav] {
    font-family: var(--bs-font-monospace, monospace);
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}

.wp-lm-meta[b-7ls2b5zvav] {
    margin-left: .5rem;
    font-size: .8214rem;
    font-weight: 400;
    color: var(--wp-muted, #57606a);
}

.wp-lm-chip[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    margin-left: .4rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    font-size: .8214rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    color: var(--wp-muted, #57606a);
}

.wp-ev-sub .wp-lm-chip[b-7ls2b5zvav] { margin-left: 0; }
.wp-lm-chip.is-ok[b-7ls2b5zvav] { background: var(--fluent-success-tint); color: var(--fluent-success, #107c10); }
.wp-lm-chip.is-afwijking[b-7ls2b5zvav] { background: var(--fluent-danger-tint-60, #fdf3f4); color: var(--fluent-danger, #c50f1f); }
.wp-lm-chip.is-let-op[b-7ls2b5zvav] { background: var(--fluent-warning-tint); color: var(--fluent-warning, #bc4b09); }

.wp-lm-leeg[b-7ls2b5zvav] {
    font-style: italic;
    color: var(--wp-muted, #57606a);
}

.wp-lm3-kop .wp-lm3-samenvatting[b-7ls2b5zvav] {
    margin-left: 1rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wp-muted, #57606a);
}

.wp-lm3-samenvatting .is-ok[b-7ls2b5zvav] { color: var(--fluent-success, #107c10); }
.wp-lm3-samenvatting .is-afwijking[b-7ls2b5zvav] { color: var(--fluent-danger, #c50f1f); font-weight: 600; }

.wp-lm7-bank[b-7ls2b5zvav] {
    margin: 0 0 1.5rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
}

.wp-lm7-naam[b-7ls2b5zvav] {
    margin: 0;
    padding: .6rem .75rem;
    font-size: .95rem;
    font-weight: 700;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

.wp-lm7-sbv td[b-7ls2b5zvav] { background: var(--fluent-brand-tint-60, #f5f9fe); font-weight: 600; }

.wp-lm7-tussenkop th[b-7ls2b5zvav] {
    padding: .75rem .5rem .3rem;
    font-size: .8214rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--wp-muted, #57606a);
    border-bottom: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1);
}

/* PK2: the cijferanalyse as one analysis — threshold and expectation, the posts, then the conclusion. */
.wp-pk2[b-7ls2b5zvav] { padding: 0 .5rem 1.5rem; }

.wp-pk2-grid[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1rem;
    margin-bottom: .5rem;
}

.wp-pk2-kaart[b-7ls2b5zvav] {
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 6px;
    padding: .25rem .75rem .75rem;
    cursor: pointer;
}

.wp-pk2-kaart.is-current[b-7ls2b5zvav] { box-shadow: inset 3px 0 0 var(--fluent-brand, #0f6cbd); }
.wp-pk2-kaart .wp-ev-table thead th[b-7ls2b5zvav] { position: static; }
.wp-pk2-kaart textarea[b-7ls2b5zvav] { cursor: text; }

.wp-pk2-kop[b-7ls2b5zvav] {
    margin: 1.25rem 0 .5rem;
    padding-bottom: .3rem;
    font-size: .8214rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    border-bottom: 2px solid var(--fluent-brand-stroke, #0f6cbd);
}

.wp-pk2-kaart .wp-pk2-kop[b-7ls2b5zvav] { margin-top: .5rem; }
.wp-pk2-ref[b-7ls2b5zvav] { color: var(--fluent-brand-foreground-link, #0f6cbd); font-weight: 600; }
.wp-pk2-smal[b-7ls2b5zvav] { min-width: 0; width: 1%; white-space: nowrap; }
.wp-pk2-getal[b-7ls2b5zvav] { min-width: 6rem; max-width: 8rem; margin-left: auto; }
.wp-veld:has(.wp-pk2-getal)[b-7ls2b5zvav] { min-width: 7.5rem; max-width: 10rem; margin-left: auto; }
.wp-veld input.wp-pk2-getal[b-7ls2b5zvav] { max-width: none; }
.wp-pk2-map[b-7ls2b5zvav] { margin-left: .4rem; font-size: .8214rem; color: var(--wp-muted, #57606a); }
.wp-pk2 .wp-ev-oms[b-7ls2b5zvav] { min-width: 16rem; }
.wp-pk2 .wp-ev-rij.is-nvt td[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-4, #a0a0a0); }
.wp-pk2 .wp-ev-rij.is-totaal[b-7ls2b5zvav] { cursor: default; }
.wp-pk2-analyse .wp-ev-rij.is-totaal td[b-7ls2b5zvav] { border-bottom: 3px double var(--fluent-neutral-stroke-1, #d1d1d1); }

.wp-pk2-label[b-7ls2b5zvav] {
    display: block;
    margin: .75rem 0 .25rem;
    font-size: .8214rem;
    font-weight: 600;
}

.wp-pk2-leeg[b-7ls2b5zvav] { color: var(--wp-muted, #57606a); font-size: .8214rem; margin: .25rem .5rem .75rem; }
.wp-pk2-toelichting[b-7ls2b5zvav] { min-width: 18rem; max-width: 36rem; }

.wp-pk2-oordeel[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .9rem;
}

.wp-pk2-oordeel select[b-7ls2b5zvav] { width: auto; min-width: 9rem; }
.wp-pk2-hint[b-7ls2b5zvav] { font-size: .8214rem; color: var(--wp-muted, #57606a); }

/* MVA1/IMVA1: the ledger per mapping and the annual report's lines, in the Eigen vermogen matrix. */
.wp-mva-table .wp-ev-rij.is-totaal td[b-7ls2b5zvav],
.wp-mva-table .wp-ev-rij.is-rubriek td[b-7ls2b5zvav] {
    font-weight: 700;
    border-top: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1);
}

.wp-mva-table .wp-ev-rij.is-rubriek td[b-7ls2b5zvav] { font-weight: 600; background: var(--fluent-neutral-background-2, #fafafa); }
.wp-mva-table .wp-ev-rij.is-rubriek .wp-ev-oms[b-7ls2b5zvav] { background: var(--fluent-neutral-background-2, #fafafa); }
.wp-mva-table .wp-ev-rij.is-rekening .wp-ev-label[b-7ls2b5zvav] { margin-left: 1.6rem; }
.wp-mva-table .wp-ev-rij.is-rekening .wp-mva-sub[b-7ls2b5zvav] { margin-left: 2.3rem; }

.wp-mva-toggle[b-7ls2b5zvav] {
    margin-left: .25rem;
    line-height: 1;
    text-decoration: none;
}

.wp-mva-sub[b-7ls2b5zvav] {
    margin: .2rem 0 0 1.1rem;
    font-size: .8214rem;
    font-weight: 400;
    color: var(--wp-muted, #57606a);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}

.wp-mva-signaal[b-7ls2b5zvav] { color: var(--fluent-warning, #bc4b09); }

.wp-mva-chip[b-7ls2b5zvav] {
    display: inline-block;
    margin-left: .4rem;
    padding: 0 .35rem;
    border-radius: .25rem;
    font-size: .8214rem;
    font-weight: 500;
    color: var(--wp-muted, #57606a);
    background: var(--fluent-neutral-background-3, #f0f0f0);
}

.wp-mva-sub .wp-mva-chip[b-7ls2b5zvav] { margin-left: 0; }

.wp-mva-blok-uitleg[b-7ls2b5zvav] {
    margin-left: .5rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--wp-muted, #57606a);
}

.wp-mva-leeg[b-7ls2b5zvav] {
    padding: .75rem .5rem;
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}

.wp-mva-kort[b-7ls2b5zvav] {
    min-width: 0;
    max-width: 24rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wp-mva-table .wp-ev-rij.is-bron[b-7ls2b5zvav] { cursor: default; }
.wp-mva-table .wp-ev-rij.is-bron .wp-status-dot[b-7ls2b5zvav] { opacity: .35; }

.wp-mva-bron[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}

/* The activastaat (MVA4/IMVA4): an asset's purchase date and percentage next to its roll-forward. */
.wp-va-table .wp-va-datum[b-7ls2b5zvav] { white-space: nowrap; }
.wp-va-table .wp-va-pct[b-7ls2b5zvav] { white-space: nowrap; width: 4.5rem; }
.wp-va-table .wp-ev-rij.is-rubriek .wp-status-dot[b-7ls2b5zvav] { visibility: hidden; }

.wp-va-bron[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}

/* The selected row of a matrix-only sheet: its facts and the team's explanation under the matrix. */
.wp-va-detail[b-7ls2b5zvav] {
    margin: 1rem .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: .5rem;
    background: var(--fluent-neutral-background-1, #fff);
}

.wp-va-detail-kop[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}

/* ── BTW: the return form, aangifte next to the ledger ─────────────────── */

.wp-btw-kwartalen[b-7ls2b5zvav] {
    display: flex;
    gap: .25rem;
    padding: .5rem .5rem 0;
    border-bottom: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1);
}

.wp-btw-kwartaal[b-7ls2b5zvav] {
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: transparent;
    padding: .35rem .9rem;
    font-size: .8214rem;
    font-weight: 600;
    color: var(--wp-muted, #57606a);
    margin-bottom: -1px;
}

.wp-btw-kwartaal:hover[b-7ls2b5zvav] { background: var(--fluent-neutral-background-hover, #f5f5f5); }

.wp-btw-kwartaal.is-actief[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-1, #fff);
    border-color: var(--fluent-neutral-stroke-1, #d1d1d1);
    color: var(--fluent-brand-foreground-link, #0f6cbd);
}

.wp-btw-kwartaal .is-ok[b-7ls2b5zvav] { color: var(--fluent-success, #107c10); }
.wp-btw-kwartaal .is-open[b-7ls2b5zvav] { color: var(--fluent-warning, #bc4b09); }

/* Two header rows: the second sticks just under the first. */
.wp-btw-table thead tr:first-child th[b-7ls2b5zvav] { height: 2.25rem; }
.wp-btw-table thead tr:nth-child(2) th[b-7ls2b5zvav] { top: 2.25rem; font-weight: 500; }

.wp-btw-table thead th.wp-btw-groep[b-7ls2b5zvav] {
    text-align: center;
    border-left: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    max-width: none;
}

.wp-btw-table thead th.is-aangifte[b-7ls2b5zvav],
.wp-btw-table td.is-aangifte[b-7ls2b5zvav] {
    background: var(--fluent-warning-tint-60, #fff8e6);
}

.wp-btw-table thead tr:nth-child(2) th:nth-child(odd)[b-7ls2b5zvav] {
    border-left: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1);
}

.wp-btw-table td:nth-child(2)[b-7ls2b5zvav],
.wp-btw-table td:nth-child(4)[b-7ls2b5zvav],
.wp-btw-table td:nth-child(6)[b-7ls2b5zvav] {
    border-left: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1);
}

.wp-btw-table td.is-nvt[b-7ls2b5zvav] {
    background: repeating-linear-gradient(135deg, transparent 0 6px,
        var(--fluent-neutral-background-3, #f5f5f5) 6px 7px);
}

.wp-btw-code[b-7ls2b5zvav] {
    display: inline-block;
    min-width: 2rem;
    margin-left: .35rem;
    font-weight: 700;
    color: var(--fluent-brand-foreground-link, #0f6cbd);
}

.wp-btw-table .wp-ev-label[b-7ls2b5zvav] { margin-left: .15rem; }

.wp-btw-info[b-7ls2b5zvav] {
    margin-left: .35rem;
    color: var(--wp-muted, #57606a);
}

.wp-btw-table input.is-gelezen[b-7ls2b5zvav] {
    color: var(--wp-muted, #57606a);
    font-style: italic;
}

.wp-ev-rij.is-subtotaal td[b-7ls2b5zvav] { border-top: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1); }

.wp-ev-rij.is-aangifte td[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-2, #fafafa);
    border-bottom: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    vertical-align: middle;
}

.wp-ev-rij.is-aangifte .wp-ev-label[b-7ls2b5zvav] { font-weight: 600; }

.wp-btw-acties[b-7ls2b5zvav] {
    display: table-cell;
    white-space: nowrap;
}

.wp-btw-acties > * + *[b-7ls2b5zvav] { margin-left: .5rem; }

.wp-btw-chip[b-7ls2b5zvav] {
    margin-left: .5rem;
    padding: .05rem .45rem;
    border-radius: 999px;
    font-size: .8214rem;
    font-weight: 600;
}

.wp-btw-chip.is-ok[b-7ls2b5zvav] {
    color: var(--fluent-success, #107c10);
    background: var(--fluent-success-tint-60, #f1faf1);
}

.wp-btw-chip.is-open[b-7ls2b5zvav] {
    color: var(--fluent-warning, #bc4b09);
    background: var(--fluent-warning-tint-60, #fff8e6);
}

.wp-btw-indicatie[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}

.wp-btw-hint[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}

.wp-btw-table td.is-aangifte input[b-7ls2b5zvav] { min-width: 8rem; }

/* Classic Crediteuren: every part of a CR sheet its own card, side by side where they fit. */
.wp-cr-grid[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap: 1rem;
    padding-top: .75rem;
}

.wp-cr-kaart[b-7ls2b5zvav] { cursor: default; min-width: 0; overflow-x: auto; }
.wp-cr-kaart.is-breed[b-7ls2b5zvav] { grid-column: 1 / -1; }
.wp-cr .wp-ev-oms[b-7ls2b5zvav] { min-width: 0; }
.wp-cr-table td[b-7ls2b5zvav], .wp-cr-table th[b-7ls2b5zvav] { white-space: nowrap; }
.wp-cr-table td .wp-ev-sub[b-7ls2b5zvav] { white-space: normal; max-width: 28rem; }

.wp-cr-aantal[b-7ls2b5zvav] {
    margin-left: .4rem;
    padding: 0 .4rem;
    border-radius: 999px;
    font-size: .8214rem;
    background: var(--fluent-brand-tint-60, #ebf3fc);
}

.wp-cr-uitleg[b-7ls2b5zvav] {
    margin: 0 0 .6rem;
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}

.wp-cr-kpis[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 2rem;
    align-items: flex-end;
    padding: .6rem .75rem;
    border-radius: 6px;
    background: var(--fluent-neutral-background-2, #fafafa);
    cursor: pointer;
}

.wp-cr-kpis.is-current[b-7ls2b5zvav] { box-shadow: inset 3px 0 0 var(--fluent-brand, #0f6cbd); }
.wp-cr-kpi[b-7ls2b5zvav] { display: flex; flex-direction: column; min-width: 8rem; }
.wp-cr-kpi-label[b-7ls2b5zvav] { font-size: .8214rem; color: var(--wp-muted, #57606a); }
.wp-cr-kpi-waarde[b-7ls2b5zvav] { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.wp-cr-kpi-waarde.is-ok[b-7ls2b5zvav] { color: var(--fluent-success, #107c10); }
.wp-cr-kpi-waarde.is-afwijking[b-7ls2b5zvav] { color: var(--fluent-danger, #c50f1f); }
.wp-cr-kpi-oordeel[b-7ls2b5zvav] { margin-left: auto; }
.wp-cr-kpi-oordeel select[b-7ls2b5zvav] { width: auto; min-width: 9rem; }
.wp-cr-kpi-toelichting[b-7ls2b5zvav] { flex-basis: 100%; font-size: .8214rem; white-space: pre-wrap; }

.wp-cr-filter[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    margin-bottom: .5rem;
}

.wp-cr-filter input[type=search][b-7ls2b5zvav] { max-width: 18rem; }

/* The bookings behind the selected CR1/CR2 or DB1/DB2 row: a pane of its own between the table and the
   conclusion, its list scrolling inside it so the conclusion never leaves the screen. */
.wp-rb[b-7ls2b5zvav] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    max-height: 40vh;
    min-height: 0;
    padding: .5rem .875rem .625rem;
    border-top: 2px solid var(--fluent-brand-stroke, #0f6cbd);
    background: var(--fluent-neutral-background-1, #fff);
}

.wp-rb-kop[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem 1rem;
    margin-bottom: .375rem;
}

.wp-rb-uitleg[b-7ls2b5zvav] { font-size: .8214rem; color: var(--wp-muted, #57606a); }
.wp-rb-totaal[b-7ls2b5zvav] { display: flex; flex-wrap: wrap; gap: 1rem; margin-left: auto; font-size: .8214rem; font-variant-numeric: tabular-nums; }
.wp-rb-lijst[b-7ls2b5zvav] { flex: 1 1 auto; min-height: 4rem; overflow: auto; }
.wp-rb-melding[b-7ls2b5zvav] { margin: .375rem 0; font-size: .8214rem; color: var(--wp-muted, #57606a); }
.wp-rb-table td[b-7ls2b5zvav], .wp-rb-table th[b-7ls2b5zvav] { white-space: nowrap; }
.wp-rb-table thead th[b-7ls2b5zvav] { position: sticky; top: 0; z-index: 1; background: var(--fluent-neutral-background-1, #fff); }
.wp-rb-table td.wp-rb-oms[b-7ls2b5zvav] { white-space: normal; min-width: 14rem; max-width: 32rem; }
.wp-cr-select[b-7ls2b5zvav] { min-width: 11rem; }
.wp-ev-rij td.is-aandacht[b-7ls2b5zvav] { color: var(--fluent-warning, #bc4b09); }

/* Journaalposten: JP1 as a matrix of accounts against kinds of journal, JP2 to JP5 as boekstukken. */
.wp-jp-zoek[b-7ls2b5zvav] { max-width: 16rem; margin-left: .5rem; }
.wp-jp-table .wp-ev-oms[b-7ls2b5zvav] { min-width: 20rem; }
.wp-jp-table .wp-ev-num[b-7ls2b5zvav] { min-width: 5.5rem; }
.wp-jp-table .wp-jp-aantal[b-7ls2b5zvav] { min-width: 3.5rem; color: var(--wp-muted, #57606a); }
/* Two header rows on the matrix: the second sticks just under the first. */
.wp-jp-matrix thead tr:first-child th[b-7ls2b5zvav] { height: 2.25rem; }
.wp-jp-matrix thead tr:nth-child(2) th[b-7ls2b5zvav] { top: 2.25rem; font-weight: 500; }
.wp-jp-table thead th.wp-jp-groep[b-7ls2b5zvav] {
    text-align: center;
    max-width: none;
    border-left: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1);
}
.wp-jp-table thead th.wp-jp-groep.is-memoriaal[b-7ls2b5zvav],
.wp-jp-table thead th.wp-jp-saldo[b-7ls2b5zvav] { background: var(--fluent-warning-tint-60, #fff8e6); }
.wp-jp-table .wp-jp-start[b-7ls2b5zvav] { border-left: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1); }
.wp-jp-table .wp-jp-saldo[b-7ls2b5zvav] { border-left: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1); font-weight: 600; }
.wp-jp-table td.wp-jp-cel.is-gevuld:hover[b-7ls2b5zvav] { text-decoration: underline; }
.wp-jp-table td.wp-jp-cel.is-focus[b-7ls2b5zvav] { background: var(--fluent-brand-tint-50, #dcebfa) !important; font-weight: 600; }
.wp-jp-table tfoot td[b-7ls2b5zvav] {
    position: sticky;
    bottom: 0;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    border-top: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    font-weight: 700;
}
.wp-jp-table tfoot .wp-ev-oms[b-7ls2b5zvav] { z-index: 2; }
.wp-jp-code[b-7ls2b5zvav] { font-variant-numeric: tabular-nums; font-weight: 600; margin-left: .35rem; }
.wp-jp-datum[b-7ls2b5zvav] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wp-jp-per[b-7ls2b5zvav] { margin-left: .35rem; font-size: .8214rem; color: var(--wp-muted, #57606a); }
.wp-jp-rf[b-7ls2b5zvav] { text-align: center; }
.wp-jp-rfchip[b-7ls2b5zvav] {
    display: inline-block;
    min-width: 1.4rem;
    padding: 0 .3rem;
    border-radius: .7rem;
    text-align: center;
    font-size: .8214rem;
    font-weight: 700;
    color: #fff;
    background: var(--fluent-danger, #c50f1f);
}
.wp-jp-normen[b-7ls2b5zvav] { margin-bottom: 1.25rem; }
/* The norm text explains a red flag; it is shown for the selected row, and stays available as the
   tooltip of every other row. That keeps the ten norms short enough for the list of booking
   documents below them to be in view. */
.wp-jp-normen .wp-ev-rij:not(.is-current) .wp-ev-oms > div.wp-ev-sub:first-of-type[b-7ls2b5zvav] { display: none; }
.wp-jp-normen .wp-ev-rij.is-nvt td[b-7ls2b5zvav],
.wp-jp-selectie .wp-ev-rij.is-nvt td[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-4, #a0a0a0); }
.wp-jp-relevant[b-7ls2b5zvav] { white-space: nowrap; }
.wp-jp-relevant select[b-7ls2b5zvav] { width: auto; display: inline-block; min-width: 5rem; }
.wp-jp-letter[b-7ls2b5zvav] {
    display: inline-block;
    width: 1.35rem;
    text-align: center;
    border-radius: .25rem;
    font-size: .8214rem;
    font-weight: 700;
    color: var(--fluent-danger, #c50f1f);
    background: var(--fluent-danger-tint-60, #fdf3f4);
}
.wp-jp-letter.is-klein[b-7ls2b5zvav] { width: 1.1rem; margin-right: .1rem; font-size: .8214rem; }
.wp-jp-flag[b-7ls2b5zvav] { width: 1.6rem; min-width: 1.6rem; text-align: center; padding-left: .1rem !important; padding-right: .1rem !important; }
.wp-jp-table thead th.wp-jp-flag[b-7ls2b5zvav] { text-align: center; }
.wp-jp-flag.is-uit[b-7ls2b5zvav] { opacity: .3; }
.wp-jp-dot[b-7ls2b5zvav] {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--fluent-danger, #c50f1f);
}

/* OZ3: the geld-goederenbeweging as cards, money on top and each side of it below. */
.wp-oz[b-7ls2b5zvav] {
    padding: 0 .5rem 1rem;
    /* The layout follows the width of the werkprogramma pane, not the window: the document panel squeezes it. */
    container-type: inline-size;
}

.wp-oz-regel[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

/* A lone card is half the width, but never so narrow that its amounts no longer fit. */
.wp-oz-regel.is-enkel[b-7ls2b5zvav] {
    grid-template-columns: minmax(0, 1fr);
    max-width: max(calc(50% - .5rem), min(100%, 30rem));
    margin-left: auto;
    margin-right: auto;
}

@container (max-width: 760px) {
    .wp-oz-regel[b-7ls2b5zvav], .wp-oz-regel.is-enkel[b-7ls2b5zvav] { grid-template-columns: minmax(0, 1fr); max-width: none; }
}

.wp-oz-blok[b-7ls2b5zvav] {
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 6px;
    background: var(--fluent-neutral-background-1, #fff);
    overflow: hidden;
}

.wp-oz-kop[b-7ls2b5zvav] {
    margin: 0;
    padding: .5rem .75rem;
    font-size: .875rem;
    font-weight: 600;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

/* OZ3 as the De Beer tab: bank and cash on top, receivables and sales on the left, payables and purchases on the
   right, stock at the bottom, and where two blocks meet the link between them - the amount of the upper block, the
   difference, the amount of the lower block. */
.wp-oz-titel[b-7ls2b5zvav] {
    margin: 0 0 .75rem;
    padding: .4rem .75rem;
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    background: #05365f;
    border-radius: 4px;
}

.wp-oz-diamant[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(10rem, .7fr) minmax(0, 1.25fr) minmax(10rem, .7fr) minmax(0, 1.25fr);
    grid-template-areas:
        ".    .   geld .   .   "
        ".    gd  geld gc  .   "
        "deb  gd  .    gc  cred"
        "dv   dv  .    ci  ci  "
        "verk .   .    .   ink "
        "verk vv  .    iv  ink "
        ".    vv  vrd  iv  .   ";
    gap: .75rem;
    align-items: start;
    margin-bottom: 1rem;
}

@container (max-width: 1100px) {
    .wp-oz-diamant[b-7ls2b5zvav] { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
    .wp-oz-diamant > *[b-7ls2b5zvav] { grid-area: auto !important; }
}

.wp-oz-blok.is-blauw .wp-oz-kop[b-7ls2b5zvav] { background: #009de0; color: #000; text-align: center; }
.wp-oz-blok.is-groen .wp-oz-kop[b-7ls2b5zvav] { background: #96c00d; color: #000; text-align: center; }
.wp-oz-blok.is-magenta .wp-oz-kop[b-7ls2b5zvav] { background: #e3017a; color: #fff; text-align: center; }
.wp-oz-diamant .wp-oz-blok[b-7ls2b5zvav] { border-width: 2px; border-color: var(--fluent-neutral-stroke-1, #d1d1d1); }

.wp-oz-verbinding[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    border-radius: 4px;
    background: var(--fluent-neutral-background-1, #fff);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.wp-oz-vb-bedrag[b-7ls2b5zvav] { padding: .3rem .6rem; text-align: right; white-space: nowrap; }
.wp-oz-vb-bedrag:first-child[b-7ls2b5zvav] { border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0); }

.wp-oz-vb-verschil[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .25rem .4rem;
    align-items: center;
    padding: .35rem .6rem;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

.wp-oz-vb-label[b-7ls2b5zvav] { font-size: .8rem; line-height: 1.2; }
.wp-oz-vb-getal[b-7ls2b5zvav] { font-weight: 600; text-align: right; white-space: nowrap; }
.wp-oz-vb-verschil select[b-7ls2b5zvav] { grid-column: 1 / -1; }
.wp-oz-vb-noot[b-7ls2b5zvav] {
    padding: .25rem .6rem;
    font-size: .8rem;
    color: var(--wp-muted, #57606a);
    border-top: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

.wp-oz-verbinding.is-current[b-7ls2b5zvav] { outline: 2px solid var(--fluent-brand-stroke-1, #0f6cbd); }
.wp-oz-verbinding.is-current .wp-oz-vb-verschil[b-7ls2b5zvav] { background: var(--fluent-brand-background-2, #ebf3fc); }
.wp-oz .is-gedimd[b-7ls2b5zvav] { opacity: .4; }

.wp-oz-table td[b-7ls2b5zvav] { cursor: pointer; }
/* The label gives way, never the amounts: an explanation wraps instead of widening the column past the card. */
.wp-oz-table td.wp-ev-oms[b-7ls2b5zvav] { min-width: 0; max-width: none; position: static; }
.wp-oz-table .wp-ev-sub[b-7ls2b5zvav] { min-width: 0; }
.wp-oz-table .wp-ev-waarom[b-7ls2b5zvav] { white-space: normal; overflow-wrap: anywhere; }
.wp-oz-table td.wp-ev-num[b-7ls2b5zvav] { white-space: nowrap; width: 1%; min-width: 6.5rem; }
.wp-oz-oordeel[b-7ls2b5zvav] { margin: .35rem 0 0 1.1rem; max-width: 11rem; }
.wp-oz-totaal td[b-7ls2b5zvav] { font-weight: 600; border-top: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1); }
.wp-oz-info td[b-7ls2b5zvav] { font-style: italic; color: var(--wp-muted, #57606a); }
.wp-oz-aansluiting td[b-7ls2b5zvav] { background: var(--fluent-neutral-background-2, #fafafa); }
.wp-oz-table tr.is-current td[b-7ls2b5zvav] { background: var(--fluent-brand-background-2, #ebf3fc); }

/* OD1: revenue per object and month with each entity's annual accounts, then the objects against their
   contracts. Each analysis is a card of its own on a tinted background, so the tables never run together; the
   cards grow with their table, so the horizontal scroll is the page's and the headers stay sticky. The space
   around the cards is margin, not padding: a sticky header or column sticks inside the padding, and the rows
   scrolling past would show through it. */
.wp-od[b-7ls2b5zvav] {
    padding: 0 0 1.5rem;
    background: var(--fluent-neutral-background-2, #fafafa);
}
.wp-od-sectie[b-7ls2b5zvav] {
    width: max-content;
    min-width: calc(100% - 2rem);
    margin: 1rem 1rem 1.25rem;
    background: var(--fluent-neutral-background-1, #fff);
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.wp-od-sectie-kop[b-7ls2b5zvav] {
    position: sticky;
    left: 0;
    z-index: 4;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    max-width: min(56rem, calc(100vw - 4rem));
    padding: .875rem 1rem .75rem;
}
.wp-od-sectie-kop h3[b-7ls2b5zvav] { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.wp-od-sectie-kop p[b-7ls2b5zvav] { margin: .125rem 0 0; font-size: .8214rem; color: var(--wp-muted, #57606a); }
.wp-od-stap[b-7ls2b5zvav] {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--fluent-brand, #0f6cbd);
    color: #fff;
    font-size: .8214rem;
    font-weight: 700;
}
.wp-od-sectie > .wp-ev-voet[b-7ls2b5zvav] { margin: 0; padding: .75rem 1rem; }

/* The table inside a card: no outer lines of its own, a calmer header and a little more air per row. */
.wp-od-table[b-7ls2b5zvav] { width: 100%; }
.wp-od-table thead th[b-7ls2b5zvav] { background: var(--fluent-neutral-background-3, #f5f5f5); font-size: .8214rem; }
.wp-od-table td[b-7ls2b5zvav] { padding: .45rem .5rem; vertical-align: middle; }
.wp-od-table .wp-ev-oms[b-7ls2b5zvav] { min-width: 19rem; max-width: 24rem; padding-left: 1rem; }
.wp-od-table .wp-ev-num[b-7ls2b5zvav] { min-width: 4.75rem; }
.wp-od-table td.wp-od-maand[b-7ls2b5zvav], .wp-od-table th.wp-od-maand[b-7ls2b5zvav] { min-width: 4.25rem; }
.wp-od-pivot td.wp-jp-cel.is-leeg[b-7ls2b5zvav] { background: var(--fluent-warning-tint-60, #fff9f5); }
.wp-od-pivot td.wp-jp-cel.is-leeg.wp-ev-groep[b-7ls2b5zvav] { background: var(--fluent-brand-tint-60, #ebf3fc); }

/* An entity opens its block: its name, kept in view while the months scroll, with clear space above. */
.wp-od-entiteit th[b-7ls2b5zvav] {
    padding: 1.5rem 1rem .5rem;
    background: var(--fluent-neutral-background-1, #fff);
    border-bottom: 2px solid var(--fluent-brand-stroke, #0f6cbd);
    text-align: left;
}
.wp-od-blok:first-of-type .wp-od-entiteit th[b-7ls2b5zvav] { padding-top: .875rem; }
.wp-od-entiteit-naam[b-7ls2b5zvav] {
    position: sticky;
    left: 1rem;
    display: inline-flex;
    align-items: baseline;
    gap: .625rem;
    font-size: .8214rem;
    font-weight: 700;
    color: var(--fluent-brand-foreground-link, #0f6cbd);
}
.wp-od-entiteit-naam small[b-7ls2b5zvav] { font-size: .8214rem; font-weight: 400; color: var(--wp-muted, #57606a); }
.wp-od-groep .wp-od-entiteit th[b-7ls2b5zvav] { border-bottom-color: var(--fluent-neutral-foreground-2, #424242); }
.wp-od-groep .wp-od-entiteit-naam[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-1, #242424); }

/* An object: account and name on the first line, kind and customer on the second, its signal last. */
.wp-od-object-kop[b-7ls2b5zvav] { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.wp-od-object-kop .wp-jp-code[b-7ls2b5zvav] { margin-left: .15rem; }
.wp-od-naam[b-7ls2b5zvav] { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
.wp-od-jr .wp-od-naam[b-7ls2b5zvav] { white-space: normal; }
.wp-od-object-meta[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .3rem 0 0 1.05rem;
    min-width: 0;
    font-size: .8214rem;
}
.wp-od-soort[b-7ls2b5zvav] { flex: 0 0 auto; width: auto; min-width: 10.5rem; padding-top: .1rem; padding-bottom: .1rem; font-size: .8214rem; }
.wp-od-afnemer[b-7ls2b5zvav], .wp-od-badge[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.wp-od-afnemer[b-7ls2b5zvav] { color: var(--wp-muted, #57606a); }
.wp-od-badge[b-7ls2b5zvav] {
    padding: .05rem .5rem;
    border-radius: 999px;
    font-weight: 600;
}
.wp-od-badge.is-ic[b-7ls2b5zvav] { background: var(--fluent-neutral-background-3); color: var(--fluent-purple); }
.wp-od-signaal[b-7ls2b5zvav] {
    display: flex;
    gap: .35rem;
    margin: .3rem 0 0 1.05rem;
    font-size: .8214rem;
    line-height: 1.35;
    color: var(--fluent-warning, #bc4b09);
}
.wp-od-signaal span[b-7ls2b5zvav] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The amounts are buttons, so Tab and Enter/Space open the bookings as a click does. */
.wp-od-knop[b-7ls2b5zvav] {
    border: 0;
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: right;
    cursor: pointer;
}
.wp-od-knop:hover[b-7ls2b5zvav] { text-decoration: underline; }
.wp-od-knop:focus-visible[b-7ls2b5zvav] { outline: 2px solid var(--fluent-brand-stroke, #0f6cbd); outline-offset: 1px; }
.wp-jp-cel.is-leeg .wp-od-knop[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-4, #a0a0a0); }
.wp-od-overig[b-7ls2b5zvav] { margin-left: .15rem; color: var(--fluent-warning, #bc4b09); }

/* Totals and the reconciliation with the annual accounts close a block. */
.wp-od-som[b-7ls2b5zvav] { cursor: default; }
.wp-od-som:hover td[b-7ls2b5zvav] { background: inherit; }
.wp-od-table .wp-od-som td[b-7ls2b5zvav] { background: var(--fluent-neutral-background-2, #fafafa); }
.wp-od-table .wp-od-som td.wp-ev-groep[b-7ls2b5zvav] { background: var(--fluent-brand-tint-60, #ebf3fc); }
.wp-od-info td[b-7ls2b5zvav] { font-weight: 400; color: var(--wp-muted, #57606a); border-top: 0; }
.wp-od-table .wp-od-info .wp-ev-oms[b-7ls2b5zvav] { font-style: italic; }

.wp-od-jr td[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-1, #fff);
    border-top: 1px dashed var(--fluent-neutral-stroke-1, #d1d1d1);
    border-bottom: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1);
}
.wp-od-table .wp-od-jr .wp-ev-oms[b-7ls2b5zvav] { font-weight: 600; }
.wp-od-jr-icoon[b-7ls2b5zvav] { color: var(--fluent-brand-foreground-link, #0f6cbd); }
.wp-od-jr-bron[b-7ls2b5zvav] {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}
.wp-od-jr-bedrag input[b-7ls2b5zvav] { min-width: 7.5rem; font-weight: 600; }
.wp-od-jr-uitkomst[b-7ls2b5zvav] { white-space: nowrap; }
.wp-od-jr-uitkomst > * + *[b-7ls2b5zvav] { margin-left: .6rem; }
.wp-od-bewijs[b-7ls2b5zvav] { display: inline-flex; align-items: center; gap: .2rem; text-decoration: none; }
.wp-od-chip[b-7ls2b5zvav] {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .8214rem;
    font-weight: 600;
}
.wp-od-chip.is-ok[b-7ls2b5zvav] { background: var(--fluent-success-tint-60, #f1faf1); color: var(--fluent-success, #107c10); }
.wp-od-chip.is-afwijking[b-7ls2b5zvav] { background: var(--fluent-danger-tint-60, #fdf3f4); color: var(--fluent-danger, #c50f1f); }
.wp-ev-rij.is-current.wp-od-jr td[b-7ls2b5zvav] { background: var(--fluent-brand-tint-60, #ebf3fc); }

/* Contracts: inputs sized to their content, derived figures quieter than what was typed. */
.wp-od-contract input[b-7ls2b5zvav] { width: 8.5rem; margin-left: auto; }
.wp-od-contract input.wp-od-klein[b-7ls2b5zvav] { width: 4.5rem; }
.wp-od-contract .wp-veld:has(.wp-od-klein)[b-7ls2b5zvav] { min-width: 0; width: 6.5rem; margin-left: auto; }
.wp-od-contract .wp-veld input.wp-od-klein[b-7ls2b5zvav] { width: 100%; }
.wp-od-afgeleid[b-7ls2b5zvav] { color: var(--wp-muted, #57606a); }
.wp-od-geen[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-4, #a0a0a0); }

/* Revenue out of scope: folded into the header of its card. */
.wp-od-sectie.is-ingeklapt .wp-od-sectie-kop[b-7ls2b5zvav] { padding: 0; }
.wp-od-uitklap[b-7ls2b5zvav] {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    width: 100%;
    padding: .75rem 1rem;
    border: 0;
    background: none;
    text-align: left;
    color: inherit;
    font: inherit;
}
.wp-od-uitklap strong[b-7ls2b5zvav] { display: block; font-size: .875rem; }
.wp-od-uitklap small[b-7ls2b5zvav] { display: block; margin-top: .1rem; font-size: .8214rem; color: var(--wp-muted, #57606a); }
.wp-od-uitklap:hover strong[b-7ls2b5zvav] { text-decoration: underline; }
.wp-od-uitklap:focus-visible[b-7ls2b5zvav] { outline: 2px solid var(--fluent-brand-stroke, #0f6cbd); outline-offset: -2px; border-radius: 8px; }
.wp-od > .wp-ev-voet[b-7ls2b5zvav] { margin: 0 1.25rem; }

/* Under the tables for a reconciliation row: how the ledger figure is made up. */
.wp-od-jr-opbouw[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: max-content 9rem;
    gap: .2rem 1.5rem;
    margin: .25rem 0 0;
    font-size: .8214rem;
    font-variant-numeric: tabular-nums;
}
.wp-od-jr-opbouw dt[b-7ls2b5zvav] { font-weight: 400; color: var(--wp-muted, #57606a); }
.wp-od-jr-opbouw dd[b-7ls2b5zvav] { margin: 0; text-align: right; }
.wp-od-jr-opbouw .is-som[b-7ls2b5zvav] { padding-top: .2rem; border-top: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0); font-weight: 600; color: inherit; }
.wp-od-jr-opbouw dd.is-ok[b-7ls2b5zvav] { color: var(--fluent-success, #107c10); }
.wp-od-jr-opbouw dd.is-afwijking[b-7ls2b5zvav] { color: var(--fluent-danger, #c50f1f); }

/* Integrale bankmatching: tiles per status above the rows, closed groups folded away. */
.wp-ibm-kop[b-7ls2b5zvav] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    margin: .25rem 0 .5rem;
}

.wp-ibm-dekking[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .9rem;
    border: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    border-radius: 6px;
    background: var(--fluent-neutral-background-1, #fff);
    white-space: nowrap;
}

.wp-ibm-pct[b-7ls2b5zvav] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--fluent-brand-foreground-link, #0f6cbd);
    font-variant-numeric: tabular-nums;
}

.wp-ibm-pct-label[b-7ls2b5zvav] {
    font-size: .8214rem;
    line-height: 1.2;
    color: var(--wp-muted, #57606a);
}

.wp-ibm-tegels[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    flex: 1;
}

.wp-ibm-tegel[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    min-width: 9.5rem;
    max-width: 15rem;
    padding: .4rem .65rem;
    border-radius: 6px;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-left-width: 4px;
    background: var(--fluent-neutral-background-1, #fff);
    font-variant-numeric: tabular-nums;
}

.wp-ibm-tegel-status[b-7ls2b5zvav] {
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-ibm-tegel-bedrag[b-7ls2b5zvav] { font-size: 1rem; font-weight: 700; }
.wp-ibm-tegel-aantal[b-7ls2b5zvav] { font-size: .8214rem; color: var(--wp-muted, #57606a); }

.wp-ibm-tegel.is-ok[b-7ls2b5zvav] { border-left-color: var(--fluent-success, #107c10); }
.wp-ibm-tegel.is-aandacht[b-7ls2b5zvav] { border-left-color: var(--fluent-warning, #bc4b09); }
.wp-ibm-tegel.is-afwijking[b-7ls2b5zvav] { border-left-color: var(--fluent-danger, #c50f1f); }

.wp-ibm-samenvatting[b-7ls2b5zvav] {
    margin: 0 0 .25rem;
    font-size: .8214rem;
    color: var(--wp-muted, #57606a);
}

.wp-ibm-bulk[b-7ls2b5zvav] {
    display: flex;
    gap: .5rem;
    align-items: center;
    margin: .5rem 0;
    font-size: .8214rem;
}

.wp-ibm-chip[b-7ls2b5zvav] {
    display: inline-block;
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: .8214rem;
    letter-spacing: normal;
    text-transform: none;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    color: var(--fluent-neutral-foreground-1, #242424);
}

.wp-ibm-chip.is-ok[b-7ls2b5zvav] { background: var(--fluent-success-tint); color: var(--fluent-success-foreground); }
.wp-ibm-chip.is-aandacht[b-7ls2b5zvav] { background: var(--fluent-warning-tint); color: var(--fluent-warning-foreground); }
.wp-ibm-chip.is-afwijking[b-7ls2b5zvav] { background: var(--fluent-danger-tint); color: var(--fluent-danger-foreground); }

.wp-ibm-dot[b-7ls2b5zvav] { width: 1.5rem; }

.wp-ibm-tekst[b-7ls2b5zvav] {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Crediteuren and Debiteuren: the three sources of a payment chain side by side, each in its own tint, with the checks
   between them. Rows stay on one line; only the checks wrap. */
.wp-ibm-keten th[b-7ls2b5zvav], .wp-ibm-keten td[b-7ls2b5zvav] { white-space: nowrap; vertical-align: top; }
.wp-ibm-keten thead tr.wp-ibm-groep th[b-7ls2b5zvav] { border-bottom: none; padding-top: .45rem; padding-bottom: .2rem; font-size: .75rem; }
.wp-ibm-keten .wp-ibm-h-f[b-7ls2b5zvav] { background: #ecebfb; color: #3c3489; }
.wp-ibm-keten .wp-ibm-h-b[b-7ls2b5zvav] { background: #e1f3ec; color: #085041; }
.wp-ibm-keten .wp-ibm-h-a[b-7ls2b5zvav] { background: #fbebe4; color: #712b13; }
.wp-ibm-keten td.wp-ibm-g-f[b-7ls2b5zvav] { background: #f8f7fe; }
.wp-ibm-keten td.wp-ibm-g-b[b-7ls2b5zvav] { background: #f3faf7; }
.wp-ibm-keten td.wp-ibm-g-a[b-7ls2b5zvav] { background: #fdf7f4; }
.wp-ibm-keten .wp-ibm-g-eerste[b-7ls2b5zvav] { border-left: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1); }
.wp-ibm-keten td.wp-ibm-oms[b-7ls2b5zvav] { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; color: var(--wp-muted, #57606a); }
.wp-ibm-keten td.wp-ibm-rel[b-7ls2b5zvav] { min-width: 9rem; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.wp-ibm-keten .wp-ibm-score[b-7ls2b5zvav] { display: block; font-weight: 400; font-size: .72rem; color: var(--fluent-warning, #bc4b09); }
.wp-ibm-keten .wp-ibm-iban[b-7ls2b5zvav] { display: block; font-size: .72rem; color: var(--wp-muted, #57606a); }
.wp-ibm-keten .wp-ibm-naam[b-7ls2b5zvav] { display: block; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.wp-ibm-keten .wp-ibm-meer[b-7ls2b5zvav] { font-size: .72rem; color: var(--wp-muted, #57606a); margin-left: .25rem; }
.wp-ibm-keten td.wp-ibm-mis[b-7ls2b5zvav] { background: var(--fluent-danger-tint, #fde7e9); color: var(--fluent-danger, #c50f1f); font-weight: 600; }
.wp-ibm-keten td.wp-ibm-leeg[b-7ls2b5zvav] { background: repeating-linear-gradient(45deg, #fff, #fff 6px, #faf9f8 6px, #faf9f8 12px); }
.wp-ibm-keten td.wp-ibm-kc[b-7ls2b5zvav] { width: 10.5rem; min-width: 10.5rem; max-width: 10.5rem; white-space: normal; background: #fff; }
.wp-ibm-kp[b-7ls2b5zvav] { display: inline-block; border-radius: 3px; padding: 0 .3rem; margin: 0 .2rem .2rem 0; font-size: .7rem; line-height: 1.5; white-space: nowrap; }
.wp-ibm-kp.is-ok[b-7ls2b5zvav] { background: var(--fluent-success-tint, #dff6dd); color: var(--fluent-success-foreground, #0e700e); }
.wp-ibm-kp.is-warn[b-7ls2b5zvav] { background: var(--fluent-warning-tint, #fff4ce); color: var(--fluent-warning-foreground, #8a3707); }
.wp-ibm-kp.is-bad[b-7ls2b5zvav] { background: var(--fluent-danger-tint, #fde7e9); color: var(--fluent-danger-foreground, #b10e1c); font-weight: 600; }
.wp-ibm-keten .wp-ev-num[b-7ls2b5zvav] { min-width: 0; width: auto; }
.wp-ibm-keten td.wp-ev-status .form-select[b-7ls2b5zvav] { width: 6.5rem; }
.wp-ibm-legenda[b-7ls2b5zvav] { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .78rem; color: var(--wp-muted, #57606a); margin: .25rem 0 .5rem; }
.wp-ibm-legenda span[b-7ls2b5zvav] { display: inline-flex; align-items: center; gap: .35rem; }
.wp-ibm-legenda b[b-7ls2b5zvav] { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; }

.wp-ibm-actie[b-7ls2b5zvav] {
    white-space: nowrap;
}

.wp-ibm-actie .btn + .btn[b-7ls2b5zvav] { margin-left: .25rem; }

@media (max-width: 900px) {
    .wp-ibm-kop[b-7ls2b5zvav] { flex-direction: column; }
}

.wp-ibm-uitklap > td[b-7ls2b5zvav] {
    background: var(--fluent-neutral-background-2, #fafafa);
    padding: .5rem .75rem .75rem 2rem;
}

.wp-ibm-subtabel[b-7ls2b5zvav] {
    width: 100%;
    font-size: .8214rem;
    border-collapse: collapse;
}

.wp-ibm-subtabel th[b-7ls2b5zvav] {
    font-weight: 600;
    text-align: left;
    padding: .2rem .4rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
}

.wp-ibm-subtabel td[b-7ls2b5zvav] { padding: .2rem .4rem; border-bottom: 1px solid var(--fluent-neutral-stroke-3, #f0f0f0); }
.wp-ibm-subtabel tr.is-afwijkend td[b-7ls2b5zvav] { color: var(--wp-muted, #57606a); font-style: italic; }

/* ── Density: ruim ───────────────────────────────────────────────────────
   Chosen per user on Mijn instellingen (AAUsers.Density, rendered onto <html> by App.razor).
   Compact is the default above; ruim gives the work tables 14px text, taller rows and fields
   that show more before they scroll. Only sizes and spacing change here. */
html[data-density="comfortable"] .wp-table[b-7ls2b5zvav],
html[data-density="comfortable"] .wp-ev-table[b-7ls2b5zvav],
html[data-density="comfortable"] .wp-inline-input[b-7ls2b5zvav] {
    font-size: 1rem;
}

html[data-density="comfortable"] .wp-table tbody td[b-7ls2b5zvav] {
    padding: .5625rem .625rem;
}

html[data-density="comfortable"] .wp-table thead th[b-7ls2b5zvav],
html[data-density="comfortable"] .wp-ev-table thead th[b-7ls2b5zvav] {
    padding: .625rem;
}

html[data-density="comfortable"] .wp-ev-table td[b-7ls2b5zvav] {
    padding: .5rem .625rem;
}

html[data-density="comfortable"] .wp-table .wp-inline-input[data-wp-autosize][b-7ls2b5zvav] {
    max-height: 5.25rem;
}

html[data-density="comfortable"] .wp-conclusie[b-7ls2b5zvav]  textarea {
    max-height: 10rem;
}

html[data-density="comfortable"] .wp-shell[b-7ls2b5zvav]  :where(.btn-sm, .badge, .table-sm, .table-sm th, .form-select-sm, .form-control-sm),
html[data-density="comfortable"] .wp-gridbar-count[b-7ls2b5zvav],
html[data-density="comfortable"] .wp-statusbar-chip[b-7ls2b5zvav] {
    font-size: .8571rem;
}

/* BD1: accounts against the KOBA. Two balances side by side under their own heading, a difference
   that says where it stands at a glance, and per row the sum and the reason in plain words. */
.wp-table.is-bd1 thead tr.wp-bd-groepen th[b-7ls2b5zvav] {
    top: 0;
    height: 1.75rem;
    padding: .15rem .5rem;
    box-sizing: border-box;
    border-bottom: none;
    font-size: .8214rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--wp-muted, #57606a);
}

.wp-table.is-bd1 thead tr:not(.wp-bd-groepen) th[b-7ls2b5zvav] { top: 1.75rem; }

.wp-table.is-bd1 thead tr.wp-bd-groepen th.wp-bd-groep[b-7ls2b5zvav] {
    text-align: center;
    border-left: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1);
    border-bottom: 2px solid var(--fluent-brand-stroke-1, #0f6cbd);
    color: var(--fluent-neutral-foreground-1, #242424);
}

.wp-table.is-bd1 :is(th, td).wp-bd-start[b-7ls2b5zvav] { border-left: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1); }
.wp-table.is-bd1 thead th:is(.wp-bd-beginsaldo, .wp-bd-eindsaldo)[b-7ls2b5zvav] { background: var(--fluent-brand-tint-60, #ebf3fc); }
.wp-table.is-bd1 tbody td:is(.wp-bd-beginsaldo, .wp-bd-eindsaldo)[b-7ls2b5zvav] { background: var(--fluent-neutral-background-2, #fafafa); }
.wp-table.is-bd1 tbody tr.is-current td:is(.wp-bd-beginsaldo, .wp-bd-eindsaldo)[b-7ls2b5zvav] { background: transparent; }
.wp-table.is-bd1 td.wp-key-classificatie[b-7ls2b5zvav] { text-align: center; }

.wp-bd-sluitend[b-7ls2b5zvav] { color: var(--fluent-success, #107c10); }
.wp-bd-afronding[b-7ls2b5zvav],
.wp-bd-geen[b-7ls2b5zvav] { color: var(--fluent-neutral-foreground-4, #a0a0a0); }

.wp-bd-verschil[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .05rem .4rem;
    border: none;
    border-radius: 4px;
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.wp-bd-verschil.is-verklaard[b-7ls2b5zvav] { background: var(--fluent-brand-tint-60, #ebf3fc); color: var(--fluent-brand-foreground-link, #0f6cbd); }
.wp-bd-verschil.is-afwijking[b-7ls2b5zvav] { background: var(--fluent-danger-tint-60, #fdf3f4); color: var(--fluent-danger, #c50f1f); }
.wp-bd-verschil:hover[b-7ls2b5zvav] { text-decoration: underline; }

.wp-bd-status[b-7ls2b5zvav] {
    display: inline-block;
    padding: .05rem .45rem;
    border-radius: 999px;
    font-size: .8214rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--fluent-neutral-background-3, #f5f5f5);
    color: var(--wp-muted, #57606a);
}

.wp-bd-status.is-ok[b-7ls2b5zvav] { background: var(--fluent-success-tint, #dff6dd); color: var(--fluent-success, #107c10); }
.wp-bd-status.is-verklaard[b-7ls2b5zvav] { background: var(--fluent-brand-tint-60, #ebf3fc); color: var(--fluent-brand-foreground-link, #0f6cbd); }
.wp-bd-status.is-afwijking[b-7ls2b5zvav] { background: var(--fluent-danger-tint-60, #fdf3f4); color: var(--fluent-danger, #c50f1f); }

.wp-bd-overzicht[b-7ls2b5zvav] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.25rem;
    padding: .4rem 1rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    background: var(--fluent-neutral-background-2, #fafafa);
    font-size: .8929rem;
}

.wp-bd-uitkomsten[b-7ls2b5zvav] { display: flex; flex-wrap: wrap; gap: .35rem; }

.wp-bd-uitkomst[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.wp-bd-uitkomst.is-ok[b-7ls2b5zvav] { background: var(--fluent-success-tint, #dff6dd); color: var(--fluent-success, #107c10); }
.wp-bd-uitkomst.is-verklaard[b-7ls2b5zvav] { background: var(--fluent-brand-tint-60, #ebf3fc); color: var(--fluent-brand-foreground-link, #0f6cbd); }
.wp-bd-uitkomst.is-afwijking[b-7ls2b5zvav] { background: var(--fluent-danger-tint-60, #fdf3f4); color: var(--fluent-danger, #c50f1f); }
.wp-bd-uitkomst.is-active[b-7ls2b5zvav] { border-color: currentColor; }
.wp-bd-uitkomst:disabled[b-7ls2b5zvav] { opacity: .5; cursor: default; }

.wp-bd-onverklaard[b-7ls2b5zvav] { display: inline-flex; gap: .3rem; flex-wrap: wrap; color: var(--fluent-danger, #c50f1f); }
.wp-bd-onverklaard.is-ok[b-7ls2b5zvav] { color: var(--wp-muted, #57606a); }
.wp-bd-onverklaard strong[b-7ls2b5zvav] { font-variant-numeric: tabular-nums; }

.wp-bd-methode-knop[b-7ls2b5zvav] { margin-left: auto; font-size: inherit; }
.wp-bd-methode[b-7ls2b5zvav] { flex-basis: 100%; max-width: 60rem; margin: .25rem 0 .25rem; padding-left: 1.25rem; font-size: .8571rem; }
.wp-bd-methode li + li[b-7ls2b5zvav] { margin-top: .2rem; }

.wp-bd-uitleg-kop[b-7ls2b5zvav] { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; }

.wp-bd-balansen[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .75rem;
}

.wp-bd-balans[b-7ls2b5zvav] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    border: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    border-top-width: 3px;
    border-radius: 6px;
}

.wp-bd-balans.is-ok[b-7ls2b5zvav] { border-top-color: var(--fluent-success, #107c10); }
.wp-bd-balans.is-verklaard[b-7ls2b5zvav] { border-top-color: var(--fluent-brand-stroke-1, #0f6cbd); }
.wp-bd-balans.is-afwijking[b-7ls2b5zvav] { border-top-color: var(--fluent-danger, #c50f1f); }
.wp-bd-balans.is-active[b-7ls2b5zvav] { box-shadow: 0 0 0 2px var(--fluent-brand-tint-50, #dcebfa); }
.wp-bd-balans > .btn[b-7ls2b5zvav] { align-self: flex-start; }

.wp-bd-balans-kop[b-7ls2b5zvav] { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }

.wp-bd-som[b-7ls2b5zvav] { width: 100%; font-size: .8929rem; border-collapse: collapse; }
.wp-bd-som th[b-7ls2b5zvav] { font-weight: 400; color: var(--wp-muted, #57606a); padding: .1rem 0; }
.wp-bd-som th small[b-7ls2b5zvav] { font-size: .75rem; }
.wp-bd-som td[b-7ls2b5zvav] { text-align: right; font-variant-numeric: tabular-nums; padding: .1rem 0; }
.wp-bd-som tr.is-verschil :is(th, td)[b-7ls2b5zvav] { font-weight: 600; color: var(--fluent-neutral-foreground-1, #242424); border-top: 1px solid var(--fluent-neutral-stroke-1, #d1d1d1); }
.wp-bd-som tr.is-extra :is(th, td)[b-7ls2b5zvav] { font-size: .8214rem; }

.wp-bd-oorzaak[b-7ls2b5zvav] { font-size: .8929rem; }
.wp-bd-oorzaak p[b-7ls2b5zvav] { margin: .15rem 0 0; }
.wp-bd-oorzaak .wp-bd-detail[b-7ls2b5zvav] { font-size: .8214rem; color: var(--wp-muted, #57606a); }

.wp-bd-tegenregels tr.is-zelf td[b-7ls2b5zvav] { font-weight: 600; background: var(--fluent-brand-tint-60, #ebf3fc); }
.wp-bd-tegenregels tfoot th[b-7ls2b5zvav] { border-top: 2px solid var(--fluent-neutral-stroke-1, #d1d1d1); }
.wp-bd-uitkomst.is-telling[b-7ls2b5zvav] { cursor: default; }
/* /Components/Shared/SectionPicker.razor.rz.scp.css */
/* Two aligned columns: the sectie on the left, its status on the right. Every row repeats the same
   track sizes, so the badges line up in a column instead of trailing each label at a different
   position. */

.section-table[b-y40c7o34s9] {
    margin-bottom: 0.5rem;
}

.section-row[b-y40c7o34s9] {
    display: grid;
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.1875rem 0.25rem;
    border-radius: var(--fluent-radius-medium, 4px);
}

.section-row:hover[b-y40c7o34s9] {
    background: var(--fluent-neutral-background-1hover, #f5f5f5);
}

.section-row-head[b-y40c7o34s9] {
    margin-bottom: 0.25rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.section-row-head:hover[b-y40c7o34s9] {
    background: transparent;
}

.section-group[b-y40c7o34s9] {
    margin-bottom: 0.75rem;
}

.section-group-title[b-y40c7o34s9] {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fluent-neutral-foreground-3, #616161);
}

.section-row-status[b-y40c7o34s9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* The status column costs more than it is worth on a narrow screen: stack it under the label. */
@media (max-width: 640px) {
    .section-row[b-y40c7o34s9] {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.125rem;
    }

    .section-row-head[b-y40c7o34s9] {
        display: none;
    }

    .section-row-status:empty[b-y40c7o34s9] {
        display: none;
    }
}
/* /Components/Shared/WerkprogrammaVastlegging.razor.rz.scp.css */
/* The layer that carries the colours, sitting exactly over the field it belongs to.

   Everything about how the text is laid out — font, padding, borders, size — is copied from the
   real control by werkprogrammaWorkspace.js rather than repeated here, because the fields this
   wraps are styled by three different classes and the two layers only line up while they are laid
   out identically.

   The layer is painted on top rather than behind, so the field keeps its own background, border and
   focus ring; only its glyphs are made transparent. It ignores the pointer, so clicking, dragging
   and the caret all land in the real field underneath. */

.wp-authored[b-0dffm8o6ea] {
    position: relative;
}

.wp-authored-ink[b-0dffm8o6ea] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    overflow: hidden;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    color: var(--fluent-neutral-foreground-1, #242424);
    border-style: solid;
    border-color: transparent;
    background: transparent;
    pointer-events: none;
}

/* Colour only. The layer is drawn over a textarea whose own glyphs are transparent, so anything
   that changes how wide a character is — weight, style, spacing — makes the layer drift away from
   the caret underneath it, a little further with every reviewed character. The red carries the
   meaning on its own. */
.wp-run-reviewer[b-0dffm8o6ea] {
    color: var(--fluent-danger-foreground);
}

/* The field is the parent's markup, so it carries the page's scope rather than this component's. */
.wp-authored-on[b-0dffm8o6ea]  textarea,
.wp-authored-on[b-0dffm8o6ea]  input {
    color: transparent;
    caret-color: var(--fluent-neutral-foreground-1, #242424);
}