@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lcdo7z9xd2.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: rgba(255, 255, 255, .96);
}

.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;
}

/* 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 folds above the content and the page scrolls normally. */
@media (max-width: 640.98px) {
    .app-header[b-0730wfy39j] {
        gap: 0.75rem;
        padding: 0 0.75rem;
    }

    .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: #5c2e91; }
.role-manager .nav-identity-avatar[b-f9khtgacqe] { background-color: #038387; }
.role-accountant .nav-identity-avatar[b-f9khtgacqe] { background-color: #0f6cbd; }
.role-client .nav-identity-avatar[b-f9khtgacqe] { background-color: #c50f1f; }
.role-appadmin .nav-identity-avatar[b-f9khtgacqe] { background-color: #8764b8; }
.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, #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;
}
/* /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, #0f6cbd);
}

.btn-login[b-k5ymu2hbld] {
    border-radius: var(--fluent-radius-medium, 4px);
    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;
}
/* /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; }
[b-jz8s5p9yqe] .hero { 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 -------- */
[b-jz8s5p9yqe] .hero {
    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/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(100vh - 1rem);
    min-height: 520px;
    background: var(--fluent-neutral-background-2, #fafafa);
    color: var(--fluent-neutral-foreground-1, #242424);
    overflow: hidden;
}

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

/* 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: #fff;
}

.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: #fff;
    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 ─────────────────────────────────────────────────────────────── */

.wp-topbar[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .5rem .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;
}

.wp-subtitle[b-7ls2b5zvav] {
    font-size: .75rem;
    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: .75rem;
    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: .75rem;
    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: .8125rem;
    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;
    align-items: center;
    gap: .375rem;
}

.wp-save-indicator[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    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] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
}

.wp-side-open .wp-body[b-7ls2b5zvav] {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 40vw);
}

/* 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) minmax(340px, 460px);
    }
}

@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, 94vw);
        z-index: 20;
        box-shadow: var(--fluent-shadow-16, 0 8px 16px rgba(0,0,0,.14));
    }
}

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

.wp-tabs[b-7ls2b5zvav] {
    display: flex;
    align-items: stretch;
    gap: .125rem;
    padding: 0 .75rem;
    background: 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: .5rem .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, #0f6cbd);
    color: var(--fluent-brand, #0f6cbd);
}

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

.wp-tab-name[b-7ls2b5zvav] {
    font-size: .75rem;
    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: .6875rem;
    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: .5rem .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: 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, #0f6cbd 0%, #1d4e89 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: #fbfcfe;
    padding: .8rem 1.25rem;
}

.wp-intro-fact.done[b-7ls2b5zvav] {
    background: #f4fbf5;
}

.wp-intro-fact-figure[b-7ls2b5zvav] {
    display: block;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.15;
    color: #1f2937;
}

.wp-intro-fact-caption[b-7ls2b5zvav] {
    display: block;
    font-size: .76rem;
    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: #fff;
}

.wp-intro-panel-muted[b-7ls2b5zvav] {
    background: #fafbfc;
}

.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: #eaf2fb;
    color: var(--fluent-brand, #0f6cbd);
    font-size: .72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wp-intro-eyebrow[b-7ls2b5zvav] {
    font-size: .75rem;
    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: .8125rem;
    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: #fafbfc;
}

.wp-intro-params summary[b-7ls2b5zvav] {
    cursor: pointer;
    color: var(--fluent-brand, #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: #fbfcfe;
}

.wp-kbd-hint[b-7ls2b5zvav] {
    font-size: .75rem;
    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: .6875rem;
}

/* ── 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;
    align-items: center;
    gap: .5rem;
}

.wp-gridbar-count[b-7ls2b5zvav] {
    font-size: .8125rem;
    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: .6875rem;
}

.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: .8125rem;
}

.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, #0f6cbd);
    font-size: .75rem;
}

/* 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: .6875rem;
}

.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, #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: .8125rem;
    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: .8125rem;
    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);
}

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

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

.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, #0f6cbd);
    border-radius: 10px;
    background: var(--fluent-brand-tint-60, #ebf3fc);
    color: var(--fluent-brand, #0f6cbd);
    font-size: .6875rem;
    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); }

/* 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: .8125rem;
    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, #0f6cbd);
    background: var(--fluent-neutral-background-1, #fff);
    outline: none;
}

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

.wp-priority[b-7ls2b5zvav] {
    display: inline-block;
    padding: 0 .375rem;
    border-radius: 3px;
    font-size: .75rem;
    font-weight: 600;
}

.wp-priority-hoog[b-7ls2b5zvav] { background: #ffc7ce; color: #9c0006; }
.wp-priority-middel[b-7ls2b5zvav] { background: #ffeb9c; color: #9c6500; }
.wp-priority-laag[b-7ls2b5zvav] { background: #c6efce; color: #006100; }
.wp-priority-geen[b-7ls2b5zvav] { background: var(--fluent-neutral-background-4, #f0f0f0); }

.wp-conclusie[b-7ls2b5zvav] {
    flex: 0 0 auto;
    border-top: 1px solid var(--fluent-neutral-stroke-2, #e0e0e0);
    background: var(--fluent-neutral-background-1, #fff);
    padding: .75rem .875rem;
}

/* ── 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: .8125rem;
    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: 1080px;
    width: 100%;
    margin: 0 auto;
}

.wp-rowfacts[b-7ls2b5zvav] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .75rem 1.5rem;
    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: .6875rem;
    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: .78rem;
    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: .8125rem;
    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, #c50f1f);
}

.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: .75rem;
    font-weight: 600;
    color: var(--fluent-brand, #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: .6875rem;
    font-weight: 600;
    background: var(--fluent-neutral-background-4, #f0f0f0);
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-status-chip-akkoord[b-7ls2b5zvav] { background: #dff6dd; color: #0e700e; }
.wp-status-chip-bevinding[b-7ls2b5zvav] { background: #fde7e9; color: #a4262c; }
.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: .75rem;
    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: .6875rem;
    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: .8125rem;
    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: .75rem;
}

.wp-docref-remove[b-7ls2b5zvav] {
    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);
}

.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: .8125rem;
    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, #0f6cbd);
    border-bottom-color: var(--fluent-brand, #0f6cbd);
    font-weight: 600;
}

.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: .8125rem;
    color: var(--fluent-neutral-foreground-2, #424242);
}

.wp-side-hint-active[b-7ls2b5zvav] {
    background: var(--fluent-brand-tint-60, #ebf3fc);
    color: var(--fluent-brand, #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: 320px;
    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: #fff;
    /* 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: .8125rem;
}

.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: #fff;
    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: .75rem;
    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: .8125rem;
    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: .8125rem;
    line-height: 1.6;
    color: var(--fluent-neutral-foreground-1, #242424);
}

.wp-capture-live[b-7ls2b5zvav] {
    display: inline-flex;
    align-items: center;
    font-size: .8125rem;
    font-weight: 600;
    color: #c62828;
}

.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: .75rem;
    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: .8125rem;
    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: .8125rem;
    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: .75rem;
    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: .72rem;
    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: .78rem;
    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: .78rem;
    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: .82rem;
    font-weight: 500;
}

.wp-boardexpansion-meta[b-7ls2b5zvav] {
    font-size: .74rem;
    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: .78rem;
    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: .78rem;
    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: .75rem;
    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: .75rem;
    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: .75rem;
    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: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.wp-severity-alert[b-7ls2b5zvav] { background: #fde7e9; color: #a4262c; }
.wp-severity-attention[b-7ls2b5zvav] { background: #fff4ce; color: #8a6100; }
.wp-severity-info[b-7ls2b5zvav] { background: #eff6fc; color: #1f5aa6; }
.wp-severity-none[b-7ls2b5zvav] { background: #dff6dd; color: #0e700e; }

/* 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;
}

.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: .8125rem;
    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-primary, #0f6cbd);
    background: var(--fluent-brand-background-2, #eff6fc);
    color: var(--fluent-brand-primary, #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: .6875rem;
    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: #a4262c; color: #fff; }
.wp-step-attention .wp-step-no[b-7ls2b5zvav] { background: #f7b32b; color: #3b2f00; }
.wp-step-info .wp-step-no[b-7ls2b5zvav] { background: #0f6cbd; color: #fff; }
.wp-step-none .wp-step-no[b-7ls2b5zvav] { background: #dff6dd; color: #0e700e; }
.wp-step-failed .wp-step-no[b-7ls2b5zvav] { background: #605e5c; color: #fff; }

.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: .75rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    white-space: nowrap;
}

.wp-step-purpose[b-7ls2b5zvav] {
    margin: 0;
    font-size: .8125rem;
    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: .8125rem;
}

.wp-step-banner-clean[b-7ls2b5zvav] { background: #dff6dd; color: #0e700e; }
.wp-step-banner-failed[b-7ls2b5zvav] { background: #fff4ce; color: #8a6100; }

.wp-step-error[b-7ls2b5zvav],
.wp-step-note[b-7ls2b5zvav] {
    margin-top: .25rem;
    font-size: .75rem;
    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: .6875rem;
    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: .8125rem;
    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: #a4262c; }
.wp-finding-attention[b-7ls2b5zvav] { border-left-color: #f7b32b; }
.wp-finding-info[b-7ls2b5zvav] { border-left-color: #0f6cbd; }
.wp-finding-none[b-7ls2b5zvav] { border-left-color: #d1d1d1; }

.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: .75rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    cursor: help;
}

.wp-finding-detail[b-7ls2b5zvav] {
    font-size: .8125rem;
    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: .8125rem;
}

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

.wp-finding-rows dt[b-7ls2b5zvav] {
    font-weight: 600;
    color: var(--wp-muted, #605e5c);
    font-size: .75rem;
    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: .6875rem;
    font-weight: 600;
}

.wp-finding-category[b-7ls2b5zvav] {
    font-size: .6875rem;
    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: .75rem;
    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: .8125rem;
    color: var(--fluent-brand-primary, #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: .6875rem;
    color: #0e700e;
    margin-left: .375rem;
}

.wp-finding-snippet[b-7ls2b5zvav] {
    font-size: .75rem;
    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 #bdd7f0;
    border-radius: 6px;
    padding: .625rem .75rem;
}

.wp-step-proposal-body[b-7ls2b5zvav] {
    font-size: .8125rem;
    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-primary, #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: #bdd7f0; }

.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: .8125rem;
    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: .6875rem;
    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: #a4262c;
    font-size: .75rem;
}

.wp-recap-alert[b-7ls2b5zvav] { border-left-color: #a4262c; }
.wp-recap-attention[b-7ls2b5zvav] { border-left-color: #f7b32b; }
.wp-recap-info[b-7ls2b5zvav] { border-left-color: #0f6cbd; }
.wp-recap-none[b-7ls2b5zvav] { border-left-color: #6bb700; }
.wp-recap-failed[b-7ls2b5zvav] { border-left-color: #605e5c; }

.wp-step-proposal-busy[b-7ls2b5zvav] {
    display: flex;
    align-items: center;
    font-size: .8125rem;
    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: .75rem;
    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: .6875rem;
    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: .5rem .625rem;
    max-height: 40vh;
    overflow-y: auto;
    flex: 0 0 auto;
}

.wp-docgroups-head[b-7ls2b5zvav] {
    font-size: .75rem;
    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: .8125rem;
    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: .6875rem;
    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: .75rem;
    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: #f2b100;
}

.wp-clip-text[b-7ls2b5zvav] { background: #f2b100; }
.wp-clip-number[b-7ls2b5zvav] { background: #22a06b; }
.wp-clip-date[b-7ls2b5zvav] { background: #7a5af8; }
.wp-clip-check[b-7ls2b5zvav] { background: #0f6cbd; }

.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: .75rem;
    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: .75rem;
    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: .6875rem;
    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: #fff;
    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: .75rem;
    color: var(--fluent-neutral-foreground-3, #616161);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.wp-todo-section[b-7ls2b5zvav] {
    font-size: .75rem;
    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: .8125rem;
    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: #fbfbfb;
}

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

.wp-candidates-intro[b-7ls2b5zvav] {
    font-size: .78rem;
    color: #605e5c;
    margin: 0 0 8px;
}

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

.wp-candidates-table th[b-7ls2b5zvav],
.wp-candidates-table td[b-7ls2b5zvav] {
    border-bottom: 1px solid #ececec;
    padding: 4px 8px 4px 0;
    text-align: left;
    vertical-align: top;
}

.wp-candidates-table th[b-7ls2b5zvav] {
    color: #605e5c;
    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: .72rem;
    color: var(--wp-accent, #0f6cbd);
    cursor: pointer;
    text-decoration: underline;
}

.wp-docgroups-toggle:hover[b-7ls2b5zvav] {
    color: #0a4d8c;
}

/* 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 #e3e6ea;
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}

.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: .78rem;
    color: #5c6470;
}

.wp-sweep-count.hit[b-7ls2b5zvav] {
    color: #a4262c;
    font-weight: 600;
}

.wp-sweep-scanned[b-7ls2b5zvav] {
    font-size: .72rem;
    color: #8a9099;
    margin-left: auto;
}

.wp-sweep-page[b-7ls2b5zvav] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e3e6ea;
}

.wp-sweep-assessment[b-7ls2b5zvav] {
    font-size: .8rem;
    color: #3b4149;
    margin-top: 4px;
    white-space: pre-wrap;
}

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

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

.wp-sweep-table th[b-7ls2b5zvav],
.wp-sweep-table td[b-7ls2b5zvav] {
    border-bottom: 1px solid #eceff2;
    padding: 6px 8px;
    text-align: left;
    vertical-align: top;
}

.wp-sweep-table th[b-7ls2b5zvav] {
    font-weight: 600;
    color: #5c6470;
    white-space: nowrap;
}

.wp-sweep-table tr.relevant[b-7ls2b5zvav] {
    background: #fff8f8;
}

.wp-priority[b-7ls2b5zvav] {
    display: inline-block;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: .7rem;
    font-weight: 600;
    background: #eef1f4;
    color: #5c6470;
}

.wp-priority-hoog[b-7ls2b5zvav] {
    background: #fde7e9;
    color: #a4262c;
}

.wp-priority-middel[b-7ls2b5zvav] {
    background: #fff4ce;
    color: #8a6d00;
}

/* ---- 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: #fafbfc;
}

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

.wp-substep:hover[b-7ls2b5zvav] { background: #f3f4f6; }

.wp-substep.active[b-7ls2b5zvav] {
    background: #0f6cbd;
    border-color: #0f6cbd;
    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: #f0b4b4; color: #a4262c; }
.wp-substep-warn:not(.active)[b-7ls2b5zvav] { border-color: #f3d9a5; color: #8a6100; }
.wp-substep-failed:not(.active)[b-7ls2b5zvav] { border-color: #d1d5db; color: #6b7280; 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: #fff;
}

.wp-overview-stat.clean[b-7ls2b5zvav] { border-color: #bfe3c6; background: #f4fbf5; }
.wp-overview-stat.alert[b-7ls2b5zvav] { border-color: #f0b4b4; background: #fdf5f5; }
.wp-overview-stat.failed[b-7ls2b5zvav] { border-color: #e5e7eb; background: #f9fafb; }

.wp-overview-figure[b-7ls2b5zvav] {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: #1f2937;
}

.wp-overview-caption[b-7ls2b5zvav] {
    display: block;
    font-size: .76rem;
    color: #6b7280;
}

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

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

.wp-overview-table td[b-7ls2b5zvav] {
    padding: .55rem .5rem;
    border-bottom: 1px solid #f1f2f4;
    vertical-align: top;
}

.wp-ov-row.wp-ov-alert[b-7ls2b5zvav] { background: #fdf7f7; }
.wp-ov-row.wp-ov-warn[b-7ls2b5zvav] { background: #fffaf0; }

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

.wp-ov-row.focused td[b-7ls2b5zvav] {
    background: #f2f7fd;
    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 #0f6cbd, inset 0 0 0 1px rgba(15, 108, 189, .18);
}

.wp-step-proposal-for[b-7ls2b5zvav] {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
    color: #0f6cbd;
    margin-bottom: .15rem;
}

.wp-ov-no[b-7ls2b5zvav] {
    width: 2.75rem;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
    font-weight: 600;
}

.wp-ov-dataset[b-7ls2b5zvav] { font-weight: 600; color: #1f2937; }

.wp-ov-purpose[b-7ls2b5zvav] {
    font-size: .74rem;
    color: #6b7280;
    max-width: 22rem;
}

.wp-ov-score[b-7ls2b5zvav] {
    font-size: .72rem;
    color: #6b7280;
    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: .8rem;
    resize: vertical;
}

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

.wp-ov-suggestion[b-7ls2b5zvav] {
    margin-top: .3rem;
    font-size: .74rem;
    color: #4b5563;
    background: #f5f8fd;
    border-left: 2px solid #0f6cbd;
    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: .8rem;
    color: #4b5563;
    background: #f5f8fd;
    border: 1px solid #d6e4f5;
    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: 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, #0f6cbd 0%, #1d4e89 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: .82rem;
    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: .72rem;
    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: #0f7b3f; }
.wp-afronding-row.wp-status-bevinding .wp-afronding-row-status[b-7ls2b5zvav] { color: #b3261e; }

.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: .82rem;
}

/* The conclusion of a screening, once every dataset above it has been answered. */
.wp-toelichting-focused[b-7ls2b5zvav] {
    border-color: var(--fluent-brand, #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;
}

.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: .68rem;
    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: .72rem;
    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: #0e700e; background: #f2fbf2; }
.wp-stap-bevinding-aandacht[b-7ls2b5zvav] { border-left-color: #f7b32b; background: #fffaf0; }
.wp-stap-bevinding-bevinding[b-7ls2b5zvav] { border-left-color: #a4262c; background: #fdf5f5; }
.wp-stap-bevinding-neutraal[b-7ls2b5zvav] { border-left-color: #0f6cbd; background: #f5f9fd; }

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

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

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

.wp-stap-tabel thead th[b-7ls2b5zvav] {
    text-align: left;
    font-weight: 600;
    font-size: .68rem;
    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 #f1f2f4;
    vertical-align: top;
}

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

.wp-stap-tabel-reden[b-7ls2b5zvav] { white-space: nowrap; }
.wp-stap-selectie[b-7ls2b5zvav] { color: #0f6cbd; font-weight: 600; }
.wp-stap-buiten[b-7ls2b5zvav] { font-style: italic; }

.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: .68rem;
}

/* 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: .68rem;
    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: .72rem; }

/* A proposal already taken over stays visible as the source of the sentence. */
.wp-step-proposal-taken[b-7ls2b5zvav] { opacity: .6; }

/* 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;
}
/* /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: #c00000;
}

/* 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);
}