/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-at5kz7fuae],
.components-reconnect-repeated-attempt-visible[b-at5kz7fuae],
.components-reconnect-failed-visible[b-at5kz7fuae],
.components-pause-visible[b-at5kz7fuae],
.components-resume-failed-visible[b-at5kz7fuae],
.components-rejoining-animation[b-at5kz7fuae] {
    display: none;
}

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


#components-reconnect-modal[b-at5kz7fuae] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-at5kz7fuae 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-at5kz7fuae 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-at5kz7fuae 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-at5kz7fuae]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-at5kz7fuae 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

#components-reconnect-modal p[b-at5kz7fuae] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-at5kz7fuae] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-at5kz7fuae] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-at5kz7fuae] {
        background-color: #6b9ed2;
    }

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

    .components-rejoining-animation div[b-at5kz7fuae] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-at5kz7fuae 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-at5kz7fuae {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SearchBox.razor.rz.scp.css */
/* The scope note under "geen resultaten". Quieter than the line it qualifies — it's a correction to
   how you read that answer, not a second answer. */
.palette-empty-scope[b-0my89z10qq] {
    margin-top: 6px;
    font-size: 0.83rem;
    line-height: 1.45;
    max-width: 34em;
    margin-left: auto;
    margin-right: auto;
    color: var(--ov-faint);
}
/* /Components/Pages/Alerts.razor.rz.scp.css */
/* ---- Overzicht (dashboard) rhythm ----
   The hub stacks several blocks (backup nudge, checklist, deadline status, this/next week,
   the lens tabs, then the reminder sections). Give them a touch more air than the global
   section spacing so the page reads calm rather than stacked. */

/* The lens tabs sit directly under the "Deze week en volgende week" card with no section
   margin of their own; lift them off it. */
.dash-tabs[b-fr85mmwf2t] {
    margin-top: var(--sp-6);
}

/* ---- Topzone: statuskaart boven de Ontdek-strip ----
   Twee volle-breedte kaarten. Er heeft hier kort een tweekolommen-variant gestaan; die viel af zodra
   de strip alleen nog toonde wat openstaat — twee kaarten naast een statuskaart lieten een gat van
   ~290px in de linkerkolom achter, en dat leest als iets dat niet geladen is. Gestapeld heeft geen
   van beide een buurman nodig. */
.topzone[b-fr85mmwf2t] {
    display: grid;
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
}

/* De strip draagt zijn eigen ondermarge voor losstaand gebruik; hier doet de gap dat. */
.topzone[b-fr85mmwf2t]  .ds-strip,
.topzone[b-fr85mmwf2t]  .ob-done {
    margin-bottom: 0;
}

.status-card[b-fr85mmwf2t] {
    padding: var(--sp-5);
    background: var(--ov-surface-2, #FBF7EF);
}

/* Kaarttitel, niet de paginabrede .section-head: die draagt een eigen ritme en icoon en zou hier
   twee kopregels naast elkaar zetten met verschillend gewicht. */
.tz-title[b-fr85mmwf2t] {
    margin: 0 0 var(--sp-4);
    font-size: 1.02rem;
}

/* Vier tegels in één rij, altijd — bij drie-plus-één op de tweede rij gaat het oog het vierde getal
   als voetnoot lezen, en "zonder datum" is juist het getal dat niemand vanzelf opzoekt. */
.stat-tiles[b-fr85mmwf2t] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Icoon links, getal en label erachter — dezelfde anatomie als .list-card. Over de volle breedte
   leest een gecentreerde kolom als een eiland met lucht eromheen; liggend vult de tegel zijn ruimte
   en blijft de leesvolgorde één regel: waar het over gaat, hoeveel, waarvan.

   Gescheiden door haarlijnen en niet door vier eigen randen: vier omrande vakjes binnen een omrande
   kaart is een doos in een doos, en het huisvoorschrift voor groeperen bínnen een kaart is precies
   dit — 1px --line ertussen, niks eromheen (DESIGN.md §5, Cards). */
.stat-tile[b-fr85mmwf2t] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--sp-2) var(--sp-4);
}

.stat-tile + .stat-tile[b-fr85mmwf2t] {
    border-left: 1px solid var(--ov-line);
}

/* Eerste tegel van een rij lijnt uit met de kaarttitel erboven; die heeft geen streep vóór zich. */
.stat-tile:first-child[b-fr85mmwf2t] {
    padding-left: 0;
}

/* Geen hover-lift en geen pointer: dit is een samenvatting, geen knop (DESIGN.md §6). De tegel
   "zonder datum" wordt in fase 4 het enige lid dat wél klikbaar wordt. */
.st-icon[b-fr85mmwf2t] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
}

.st-icon :global(svg)[b-fr85mmwf2t] {
    width: 18px;
    height: 18px;
}

.st-text[b-fr85mmwf2t] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.st-num[b-fr85mmwf2t] {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--ov-ink);
}

.st-label[b-fr85mmwf2t] {
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ov-muted);
}

.stat-tile.overdue .st-icon[b-fr85mmwf2t] {
    background: var(--ov-rose-soft);
    color: var(--ov-rose-ink);
}

.stat-tile.soon .st-icon[b-fr85mmwf2t] {
    background: var(--ov-amber-soft);
    color: var(--ov-amber-ink);
}

.stat-tile.healthy .st-icon[b-fr85mmwf2t] {
    background: var(--ov-lime-soft);
    color: var(--ov-lime-deep);
}

/* An absence, drawn as one — dezelfde afspraak als de streepjesstip op de lijstpagina. Geen vierde
   kleur: dit is geen ergere urgentie, het is het ontbreken van een antwoord. */
.stat-tile.undated .st-icon[b-fr85mmwf2t] {
    background: none;
    border: 1.5px dashed var(--ov-line-strong);
    color: var(--ov-muted);
}

/* De één die klikbaar werd (fase 4, besluit 4): het is het enige getal hier met een listing erachter.
   Een link, dus tekstkleur en decoratie terugzetten; de chevron rechts is de affordance zoals op
   .list-card. Geen lift — het blijft een tegel in een kaart, geen losstaande knop (DESIGN.md §6). */
a.stat-tile.undated[b-fr85mmwf2t] {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.st-go[b-fr85mmwf2t] {
    margin-left: auto;
    display: grid;
    place-items: center;
    color: var(--ov-muted);
    transition: transform 120ms ease, color 120ms ease;
}

.st-go :global(svg)[b-fr85mmwf2t] {
    width: 16px;
    height: 16px;
}

a.stat-tile.undated:hover .st-go[b-fr85mmwf2t] {
    color: var(--ov-ink);
    transform: translateX(2px);
}

a.stat-tile.undated:hover .st-label[b-fr85mmwf2t] {
    color: var(--ov-ink);
}

/* Tip onderin de kaart, gescheiden door een haarlijn zoals rijen binnen een kaart. */
.status-tip[b-fr85mmwf2t] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: var(--sp-4) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--ov-line);
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--ov-muted);
}

.tip-icon[b-fr85mmwf2t] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--ov-lime-deep);
}

.tip-icon :global(svg)[b-fr85mmwf2t] {
    width: 15px;
    height: 15px;
}

.status-tip a[b-fr85mmwf2t] {
    color: var(--ov-lime-deep);
    font-weight: 600;
    text-decoration: none;
}

.status-tip a:hover[b-fr85mmwf2t] {
    text-decoration: underline;
}

/* Vier liggende tegels naast elkaar vragen meer breedte dan vier gecentreerde: onder ~760px botst
   het icoon tegen het label. Twee bij twee houdt "zonder datum" op één regel. */
@media (max-width: 760px) {
    .stat-tiles[b-fr85mmwf2t] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: var(--sp-3);
    }

    /* Bij twee kolommen is "eerste van de rij" niet meer "eerste kind": zonder dit draagt de derde
       tegel een streep die nergens tegenaan staat, en mist hij de uitlijning met de titel. */
    .stat-tile:nth-child(odd)[b-fr85mmwf2t] {
        border-left: 0;
        padding-left: 0;
    }
}

/* Widen the gap between the major stacked sections on this page specifically. */
.section[b-fr85mmwf2t] {
    margin-top: var(--sp-8);
}

/* "Deze week en volgende week" card: a little vertical padding so the first/last rows
   aren't flush against the card edge. */
.upcoming-card[b-fr85mmwf2t] {
    padding-block: var(--sp-1);
}

/* Divider label before the "Volgende week" group. Aligned to the row text (rows are
   padded var(--sp-5) on the left), not the card edge, so it reads as a group header. */
.upcoming-group-label[b-fr85mmwf2t] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ov-faint);
    padding: var(--sp-4) var(--sp-5) var(--sp-2);
}

/* ---- Action-list buckets (same urgency vocabulary as the Taken page; repeated here because
   CSS isolation keeps that page's rules from reaching this one) ---- */
.bucket[b-fr85mmwf2t] {
    margin-top: var(--sp-6);
}

.bucket-head[b-fr85mmwf2t] {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0 0 var(--sp-3);
    width: 100%;
}

.bucket-head :global(svg)[b-fr85mmwf2t] {
    width: 15px;
    height: 15px;
    color: var(--ov-muted);
}

.bucket-name[b-fr85mmwf2t] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ov-faint);
}

.bucket.overdue .bucket-name[b-fr85mmwf2t] {
    color: var(--ov-rose-ink);
}

.bucket.today .bucket-name[b-fr85mmwf2t] {
    color: var(--ov-ink);
}

.bucket-count[b-fr85mmwf2t] {
    background: var(--ov-bg-tint);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    color: var(--ov-ink-soft);
}

.bucket.overdue .bucket-count[b-fr85mmwf2t] {
    background: var(--ov-rose-soft);
    color: var(--ov-rose-ink);
}

/* Overdue/today accent on an action row, echoing the bucket colour without shouting. */
.alert-row.overdue .a-sub b[b-fr85mmwf2t] {
    color: var(--ov-rose-ink);
}

/* ---- "Toon alle N" ----
   A bucket draws a page of rows and folds the rest behind this. The label carries both numbers, so the
   button says what it is hiding rather than only that something is hidden. */
.bucket-more[b-fr85mmwf2t] {
    margin-top: var(--sp-3);
    width: 100%;
    justify-content: center;
}

/* ---- Ownerless tasks on lists you own ----
   One link per list, wrapping. Each carries its own count, because "3 taken" spread over two lists is
   two different sized jobs and the reader picks which one to open first. */
.ownerless-link[b-fr85mmwf2t] {
    display: inline-block;
    margin: 0 14px 2px 0;
    color: var(--ov-lime-deep);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
}

.ownerless-link:hover[b-fr85mmwf2t] { text-decoration: underline; }


/* ---- Lijsten-pointer: de rustige slotregel onderaan de hub ----
   Geen kaart en geen kaartgrid — één regel die naar het lijstenoverzicht wijst, met de chevron als
   affordance zoals op .list-card. Gecentreerd en gedempt, zodat hij het einde van de pagina markeert
   zonder te concurreren met de tabs erboven. */
.lists-pointer[b-fr85mmwf2t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-top: var(--sp-6);
    padding: var(--sp-3);
    color: var(--ov-ink-soft, #6b6459);
    font-size: 0.9rem;
    text-decoration: none;
}

.lists-pointer:hover[b-fr85mmwf2t] {
    color: var(--ov-ink, #2b2721);
}

/* De chevron staat rechts en is de klik-affordance; de layers-icoon links duidt "lijsten" aan. */
.lists-pointer[b-fr85mmwf2t]  svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}
/* /Components/Pages/GuidesHub.razor.rz.scp.css */
.page-head-row[b-5dc01d3xqf] {
    margin-bottom: var(--sp-5, 24px);
}

.guide-grid[b-5dc01d3xqf] {
    display: grid;
    /* min() so the 320px track floor can't outgrow a narrow phone and push the cards off-screen. */
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: 16px;
}

.guide-card[b-5dc01d3xqf] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--ov-line, #E7E1D4);
    border-radius: var(--ov-r, 12px);
    box-shadow: var(--ov-shadow-sm);
}

.gc-icon[b-5dc01d3xqf] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ov-r-sm, 8px);
    background: var(--ov-lime-soft, #EEF6D6);
    color: var(--ov-lime-deep, #97C21C);
}

.gc-body[b-5dc01d3xqf] {
    flex: 1 1 auto;
    min-width: 0;
}

.gc-title-row[b-5dc01d3xqf] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.gc-body p[b-5dc01d3xqf] {
    margin: 0;
    color: var(--ov-muted, #6B6860);
    font-size: 0.9rem;
}

/* Why a list-scoped tour can't run yet (no list to run it in). */
.gc-body p.gc-blocked[b-5dc01d3xqf] {
    margin-top: 6px;
    font-size: 0.84rem;
    color: var(--ov-warn-mid, #9A7B1F);
}

.gc-badge[b-5dc01d3xqf] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--ov-r-pill, 999px);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.gc-badge.gc-new[b-5dc01d3xqf] {
    background: var(--ov-lime-soft, #EEF6D6);
    color: var(--ov-lime-ink, #2C3A05);
    border: 1px solid var(--ov-lime-soft-line, #DDEBB2);
}

.gc-badge.gc-done[b-5dc01d3xqf] {
    background: var(--ov-bg-tint);
    color: var(--ov-muted);
}

.gc-badge.gc-done svg[b-5dc01d3xqf] {
    width: 12px;
    height: 12px;
}

.guide-card .btn[b-5dc01d3xqf] {
    flex: 0 0 auto;
    align-self: center;
}
/* /Components/Pages/Meldingen.razor.rz.scp.css */
/* Full-page notification feed. One card, rows separated by hairlines, unread rows tinted. */
.notif-feed[b-kqbtrd1i8p] {
    padding: 0;
    overflow: hidden;
}

.notif-line[b-kqbtrd1i8p] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--ov-line);
    cursor: pointer;
    transition: background 0.12s var(--ease);
}

.notif-line:last-child[b-kqbtrd1i8p] {
    border-bottom: none;
}

.notif-line:hover[b-kqbtrd1i8p] {
    background: var(--ov-bg-tint);
}

.notif-line:focus-visible[b-kqbtrd1i8p] {
    outline: none;
    box-shadow: var(--ov-ring);
    border-radius: 8px;
}

.notif-line.is-unread[b-kqbtrd1i8p] {
    background: color-mix(in srgb, var(--ov-lime-soft) 45%, transparent);
}

.notif-line.is-unread:hover[b-kqbtrd1i8p] {
    background: color-mix(in srgb, var(--ov-lime-soft) 65%, transparent);
}

.nf-icon[b-kqbtrd1i8p] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--ov-bg-tint);
    color: var(--ov-muted);
}

.nf-icon :global(svg)[b-kqbtrd1i8p] {
    width: 18px;
    height: 18px;
}

.nf-icon.ok[b-kqbtrd1i8p] {
    background: var(--ov-lime-soft);
    color: var(--ov-lime-ink);
}

.nf-icon.amber[b-kqbtrd1i8p] {
    background: var(--ov-amber-soft);
    color: var(--ov-amber-ink);
}

.nf-icon.warn[b-kqbtrd1i8p] {
    background: var(--ov-rose-soft);
    color: var(--ov-rose-ink);
}

.nf-body[b-kqbtrd1i8p] {
    flex: 1 1 auto;
    min-width: 0;
}

.nf-title[b-kqbtrd1i8p] {
    color: var(--ov-ink);
    font-weight: 600;
    font-size: 0.96rem;
}

.notif-line.is-unread .nf-title[b-kqbtrd1i8p] {
    font-weight: 750;
}

/* How often we warned about this one row, folded into the line it belongs to. Quiet on purpose: the
   count is context for the title, not a second headline competing with it. */
.nf-count[b-kqbtrd1i8p] {
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    vertical-align: middle;
}

.nf-sub[b-kqbtrd1i8p] {
    color: var(--ov-muted);
    font-size: 0.85rem;
    margin-top: 1px;
}

.nf-side[b-kqbtrd1i8p] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    color: var(--ov-faint);
}

.nf-dot[b-kqbtrd1i8p] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--ov-lime-deep);
    flex: none;
}

.nf-time[b-kqbtrd1i8p] {
    font-size: 0.8rem;
    white-space: nowrap;
}

.nf-go :global(svg)[b-kqbtrd1i8p] {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}
/* /Components/Pages/Team.razor.rz.scp.css */
/* The plan line: a statement, not a card. It sits above the first section and has to read as page
   copy — turning it into another panel would make it compete for attention it doesn't need. */
.team-plan-line[b-5oufi24wcd] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

.team-plan-line .hint[b-5oufi24wcd] {
    display: block;
    margin-top: 2px;
}
/* /Components/Shared/CalendarFeedPanel.razor.rz.scp.css */
/* Subscribe-to-a-URL walkthrough under the calendar link. Folded by default: it's four clients deep
   and only one of them is yours, so an open accordion of all four would bury the link it explains. */
.cal-howto[b-6g3lqg9ts9] {
    margin-top: var(--sp-5, 20px);
    padding-top: var(--sp-4, 16px);
    border-top: 1px solid var(--ov-line);
}

.cal-howto-head[b-6g3lqg9ts9] {
    margin: 0 0 8px;
    font-size: 0.9rem;
    font-weight: 600;
}

.cal-guide + .cal-guide[b-6g3lqg9ts9] {
    border-top: 1px solid var(--ov-line-2, var(--ov-line));
}

.cal-guide > summary[b-6g3lqg9ts9] {
    cursor: pointer;
    padding: 8px 0;
    font-size: 0.92rem;
    list-style: revert;
}

.cal-guide > summary:hover[b-6g3lqg9ts9] {
    color: var(--ov-ink);
}

.cal-guide > ol[b-6g3lqg9ts9] {
    margin: 0 0 10px;
    padding-left: 1.35em;
    display: grid;
    gap: 5px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--ov-muted);
}

.cal-howto-refresh[b-6g3lqg9ts9] {
    margin-top: 12px;
}
/* /Components/Shared/CalendarMonth.razor.rz.scp.css */
.cal[b-vvhjoe7jlw] {
    margin-top: 4px;
}

.cal-head[b-vvhjoe7jlw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
}

.cal-nav[b-vvhjoe7jlw] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cal-nav h3[b-vvhjoe7jlw] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ov-ink);
    min-width: 160px;
    text-align: center;
}

.cal-arrow[b-vvhjoe7jlw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ov-line);
    background: var(--ov-surface);
    border-radius: 8px;
    cursor: pointer;
    color: var(--ov-ink-soft);
}

.cal-arrow:hover[b-vvhjoe7jlw] {
    background: var(--ov-bg-tint);
}

.cal-arrow :global(svg)[b-vvhjoe7jlw] {
    width: 16px;
    height: 16px;
}

/* ---- Grid ---- */
.cal-grid[b-vvhjoe7jlw] {
    border: 1px solid var(--ov-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ov-surface);
}

.cal-weekdays[b-vvhjoe7jlw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--ov-bg-tint);
    border-bottom: 1px solid var(--ov-line);
}

.cal-weekdays span[b-vvhjoe7jlw] {
    padding: 8px 10px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ov-muted);
}

.cal-week[b-vvhjoe7jlw] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.cal-week:not(:last-child)[b-vvhjoe7jlw] {
    border-bottom: 1px solid var(--ov-line);
}

.cal-day[b-vvhjoe7jlw] {
    min-height: 108px;
    padding: 6px;
    border-right: 1px solid var(--ov-line);
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cal-day:last-child[b-vvhjoe7jlw] {
    border-right: 0;
}

.cal-day.out[b-vvhjoe7jlw] {
    background: var(--ov-bg);
}

.cal-day.out .dn[b-vvhjoe7jlw] {
    color: var(--ov-line-strong);
}

.dn[b-vvhjoe7jlw] {
    font-size: 12.5px;
    color: var(--ov-muted);
    padding: 2px;
    align-self: flex-start;
}

.cal-day.is-today .dn[b-vvhjoe7jlw] {
    background: var(--ov-ink);
    color: var(--ov-surface);
    border-radius: 999px;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* ---- Chips ---- */
.cchip[b-vvhjoe7jlw] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 11.5px;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.cc-ico[b-vvhjoe7jlw] {
    display: inline-flex;
    flex: 0 0 auto;
}

.cc-ico :global(svg)[b-vvhjoe7jlw] {
    width: 11px;
    height: 11px;
    stroke-width: 3;
}

.cc-label[b-vvhjoe7jlw] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cchip.over[b-vvhjoe7jlw] {
    background: var(--ov-rose-soft);
    border-color: var(--ov-rose-soft-line);
    color: var(--ov-rose-ink);
}

.cchip.soon[b-vvhjoe7jlw] {
    background: var(--ov-amber-soft);
    border-color: var(--ov-amber-soft-line);
    color: var(--ov-amber-ink);
}

.cchip.ok[b-vvhjoe7jlw] {
    background: var(--ov-lime-soft);
    border-color: var(--ov-lime-soft-line);
    color: var(--ov-lime-ink);
}

.cchip.proj[b-vvhjoe7jlw] {
    background: transparent;
    border: 1px dashed var(--ov-line-strong);
    color: var(--ov-muted);
}

.cmore[b-vvhjoe7jlw] {
    font-size: 11px;
    color: var(--ov-muted);
    padding: 0 6px;
}

/* ---- Agenda (mobile) ---- */
.cal-agenda[b-vvhjoe7jlw] {
    display: none;
}

.agenda-day[b-vvhjoe7jlw] {
    display: flex;
    gap: 12px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--ov-line);
}

.agenda-day.is-today[b-vvhjoe7jlw] {
    background: var(--ov-bg-tint);
    border-radius: 8px;
}

.ad-date[b-vvhjoe7jlw] {
    flex: 0 0 96px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ov-ink-soft);
    padding-top: 3px;
}

.ad-items[b-vvhjoe7jlw] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ---- Mini-detail modal ---- */
.cal-modal-backdrop[b-vvhjoe7jlw] {
    position: fixed;
    inset: 0;
    background: rgba(14, 15, 17, .28);
    z-index: 60;
}

.cal-modal[b-vvhjoe7jlw] {
    position: fixed;
    z-index: 61;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100vw - 32px));
    background: var(--ov-surface);
    border: 1px solid var(--ov-line);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 20px 50px rgba(14, 15, 17, .22);
}

.cm-eyebrow[b-vvhjoe7jlw] {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ov-muted);
}

.cal-modal h3[b-vvhjoe7jlw] {
    margin: 6px 0 2px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ov-ink);
}

.cm-meta[b-vvhjoe7jlw] {
    margin: 0;
    font-size: 13.5px;
    color: var(--ov-muted);
}

.cm-note[b-vvhjoe7jlw] {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ov-ink-soft);
    background: var(--ov-bg-tint);
    border-radius: 10px;
    padding: 10px 12px;
}

.cm-actions[b-vvhjoe7jlw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

@media (max-width: 760px) {
    .cal-grid[b-vvhjoe7jlw] {
        display: none;
    }

    .cal-agenda[b-vvhjoe7jlw] {
        display: block;
    }

    .cal-nav h3[b-vvhjoe7jlw] {
        min-width: 120px;
        font-size: 16px;
    }
}
/* /Components/Shared/DiscoverStrip.razor.rz.scp.css */
/* Completed state: one calm success line, not the full panel, so a finished strip stops owning the
   top of the dashboard. Shared shape with the old checklist so the dashboard fold doesn't shift. */
.ob-done[b-9n7ucf4swj] {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ov-lime-soft);
    border: 1px solid var(--ov-lime-soft-line);
    border-radius: var(--ov-r-lg);
    padding: 12px 14px;
    margin-bottom: 20px;
}

.ob-done-tick[b-9n7ucf4swj] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--ov-lime-deep);
}

.ob-done-tick svg[b-9n7ucf4swj] { width: 22px; height: 22px; }

.ob-done-text[b-9n7ucf4swj] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ob-done-text strong[b-9n7ucf4swj] { font-size: 0.95rem; color: var(--ov-lime-ink); }
.ob-done-text span[b-9n7ucf4swj] { font-size: 0.85rem; color: var(--ov-muted); }

.ob-done-x[b-9n7ucf4swj] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--ov-r-pill);
    background: transparent;
    color: var(--ov-muted);
    cursor: pointer;
}

.ob-done-x:hover[b-9n7ucf4swj] { background: rgba(43, 38, 28, 0.06); color: var(--ov-ink); }
.ob-done-x svg[b-9n7ucf4swj] { width: 16px; height: 16px; }

/* Deliberately quiet: a warm neutral panel with a thin lime hairline, not a saturated gradient. The
   action list is the hero of the dashboard; this first-run helper should recede. */
.ds-strip[b-9n7ucf4swj] {
    position: relative;
    background: var(--ov-surface-2, #FBF7EF);
    border: 1px solid var(--ov-lime-soft-line, #DDEBB2);
    border-radius: var(--ov-r-lg, 16px);
    padding: 16px 18px;
    margin-bottom: 20px;
    box-shadow: var(--ov-shadow-sm);
}

.ds-dismiss[b-9n7ucf4swj] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: var(--ov-r-pill, 999px);
    background: transparent;
    color: var(--ov-muted, #6B6860);
    cursor: pointer;
}

.ds-dismiss:hover[b-9n7ucf4swj] { background: rgba(43, 38, 28, 0.06); }

.ds-head[b-9n7ucf4swj] {
    margin-bottom: 14px;
    padding-right: 28px;
}

.ds-head h2[b-9n7ucf4swj] {
    margin: 0 0 2px;
    font-size: 1.02rem;
}

.ds-head p[b-9n7ucf4swj] {
    margin: 0;
    color: var(--ov-muted, #6B6860);
    font-size: 0.9rem;
}

/* Voortgang onderaan: het getal voorop, de balk vult de rest. Zo staat er nooit een kale grijze pil
   zonder onderschrift — bij 0% was dat het enige wat je zag. */
.ds-meter[b-9n7ucf4swj] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

.ds-meter-label[b-9n7ucf4swj] {
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ov-muted, #6B6860);
}

.ds-progress[b-9n7ucf4swj] {
    flex: 1 1 auto;
    height: 8px;
    background: rgba(43, 38, 28, 0.10);
    border-radius: var(--ov-r-pill, 999px);
    overflow: hidden;
}

.ds-progress-fill[b-9n7ucf4swj] {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ov-lime, #B7E42F), var(--ov-lime-deep, #97C21C));
    border-radius: inherit;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Twee kolommen. De getelde kaarten zijn er twee (lid), drie (beheerder) of vier — dat valt hier als
   één of twee volle rijen, nooit als een wees. De rail die hier stond loste een ander probleem op:
   vier kaarten over de volle paginabreedte. In de halve kolom van de topzone kostte hij juist breedte,
   waardoor de kopij tot zeven regels uitwaaierde. */
/* align-items blijft op stretch (de standaard): elke kaart in een rij is even hoog, ongeacht of de
   kopij drie of vijf regels beslaat. Dat is Bootstrap's h-100, maar dan zonder de class — in een
   grid is gelijke hoogte het gedrag dat je krijgt als je het niet uitzet. */
.ds-cards[b-9n7ucf4swj] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

/* De hele kaart is het klikdoel, dus hij is een <a> of <button> en niet langer een <div> met een link
   erin. Rust/hover volgen .list-card: kalm liggen, één stap liften op intentie. */
.ds-card[b-9n7ucf4swj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 13px;
    background: #fff;
    border: 1px solid var(--ov-line, #E7E1D4);
    border-radius: var(--ov-r, 12px);
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.ds-card:hover:not(:disabled)[b-9n7ucf4swj] {
    transform: translateY(-1px);
    box-shadow: var(--ov-shadow);
    border-color: var(--ov-lime-soft-line, #DDEBB2);
}

.ds-card:active:not(:disabled)[b-9n7ucf4swj] { transform: translateY(0); }
.ds-card:disabled[b-9n7ucf4swj] { opacity: 0.5; cursor: default; }

/* De pijl staat waar de chevron van .list-card staat en doet hetzelfde: vaag in rust, lime en een
   duwtje naar rechts zodra de kaart onder de muis ligt. */
.dc-arrow[b-9n7ucf4swj] {
    flex: 0 0 auto;
    align-self: center;
    display: grid;
    place-items: center;
    color: var(--ov-line-strong, #D8CFBB);
    transition: color 0.12s ease, transform 0.12s ease;
}

.dc-arrow svg[b-9n7ucf4swj] { width: 15px; height: 15px; }

.ds-card:hover:not(:disabled) .dc-arrow[b-9n7ucf4swj] {
    color: var(--ov-lime-deep, #97C21C);
    transform: translateX(2px);
}

.dc-icon[b-9n7ucf4swj] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--ov-r-sm, 8px);
    background: var(--ov-lime-soft, #EEF6D6);
    color: var(--ov-lime-deep, #97C21C);
}

.dc-icon svg[b-9n7ucf4swj] { width: 15px; height: 15px; }

.dc-body[b-9n7ucf4swj] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dc-body strong[b-9n7ucf4swj] {
    font-size: 0.9rem;
    line-height: 1.3;
}

.dc-body span[b-9n7ucf4swj] {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--ov-muted, #6B6860);
}

/* Footer line: the tour hub, plus — while onboarding's example data is still around — an honest
   label for it and one click to be rid of it. */
.ds-foot[b-9n7ucf4swj] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ov-line, #E7E1D4);
    font-size: 0.84rem;
    color: var(--ov-muted, #6B6860);
}

.ds-guides[b-9n7ucf4swj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ov-ink);
    font-weight: 600;
    text-decoration: none;
}

.ds-guides:hover[b-9n7ucf4swj] { text-decoration: underline; }
.ds-guides svg[b-9n7ucf4swj] { width: 14px; height: 14px; color: var(--ov-lime-deep, #97C21C); }

.ds-foot-sep[b-9n7ucf4swj] {
    width: 1px;
    height: 14px;
    background: var(--ov-line, #E7E1D4);
}

.ds-foot button[b-9n7ucf4swj] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--ov-ink);
    text-decoration: underline;
    cursor: pointer;
}

.ds-foot button:disabled[b-9n7ucf4swj] { opacity: 0.5; cursor: default; }
.ds-foot button svg[b-9n7ucf4swj] { width: 13px; height: 13px; }

/* ---- Phone ---- */
@media (max-width: 560px) {
    .ds-strip[b-9n7ucf4swj] {
        padding: 16px 14px;
    }

    /* Twee kolommen persen icoon + kopij tot onleesbaar op een telefoon; hier één kolom. */
    .ds-cards[b-9n7ucf4swj] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Shared/DocumentImportDialog.razor.rz.scp.css */
.doc-steps[b-1jstruzv6g] {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.doc-steps li[b-1jstruzv6g] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
}

.doc-step-n[b-1jstruzv6g] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-muted, #eef0f2);
    color: var(--text, #1a1a1a);
    font-size: .78rem;
    font-weight: 700;
    align-self: center;
}

.doc-steps .muted[b-1jstruzv6g] {
    font-weight: 400;
}

/* ---- Source file ----
   The read PDF restated as a quiet nested block on the dialog's white surface: the icon-tile + name +
   meta language of .list-card, minus the interactivity (nothing here is clickable). The tile stays warm
   neutral on purpose — rose/red is reserved for expired and destructive in this system, and a red badge
   sitting where the error alert appears would read as a failure. */
.doc-source[b-1jstruzv6g] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--ov-surface-2);
    border: 1px solid var(--ov-line);
    border-radius: var(--ov-r);
}

.doc-source-tile[b-1jstruzv6g] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--ov-bg-tint);
    border: 1px solid var(--ov-line);
    color: var(--ov-muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.doc-source-main[b-1jstruzv6g] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.doc-source-name[b-1jstruzv6g] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ov-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-source-note[b-1jstruzv6g] {
    font-size: 0.78rem;
    color: var(--ov-faint);
}

/* ---- Field group ----
   Same vocabulary as the dashboard action list: uppercase micro-label + count pill above a card of
   hairline-separated rows. Repeated here because CSS isolation keeps that page's rules out of reach. */
.doc-group-head[b-1jstruzv6g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 var(--sp-3);
}

.doc-group-name[b-1jstruzv6g] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ov-faint);
}

.doc-group-count[b-1jstruzv6g] {
    background: var(--ov-bg-tint);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    color: var(--ov-ink-soft);
}

.doc-fields[b-1jstruzv6g] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ov-line);
    border-radius: var(--ov-r-lg);
    overflow: hidden;
}

/* One field per row. .field supplies the label/control stack; this only adds the row rhythm. */
.doc-field[b-1jstruzv6g] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ov-line);
}

.doc-field:last-child[b-1jstruzv6g] {
    border-bottom: 0;
}

/* DateField defaults to the compact, inline size meant for toolbars and composer rows. In this stacked
   form it sits beside full-width .input controls, so match those instead of shipping two control sizes
   inside one card. ::deep because the field is rendered by the child component. */
.doc-field[b-1jstruzv6g]  .datefield {
    display: flex;
    width: 100%;
    padding: 10px 12px;
    font-size: 0.94rem;
}

.doc-badge[b-1jstruzv6g] {
    margin-left: 8px;
    font-weight: 500;
    vertical-align: middle;
}
/* /Components/Shared/ListHistoryDialog.razor.rz.scp.css */
/* List-history popup: a filter row above a compact, hairline-separated event table. Dispatch rows
   collapse per firing and open into indented sub-rows, one per recipient. */

.th-filters[b-j7ptwb0civ] {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.th-filters .field[b-j7ptwb0civ] {
    margin: 0;
}

.th-filters .field label[b-j7ptwb0civ] {
    display: block;
    font-size: 0.78rem;
    color: var(--ov-muted);
    margin-bottom: 4px;
}

.th-clear[b-j7ptwb0civ] {
    margin-bottom: 1px;
}

.th-msg[b-j7ptwb0civ] {
    padding: 20px 4px;
}

/* The paging footer. The history is read newest-first in pages, so this line is what tells the reader
   they are looking at a window rather than the whole trail. */
.th-more[b-j7ptwb0civ] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 4px 4px;
}

/* ---- Table ---- */
.th-table[b-j7ptwb0civ] {
    border: 1px solid var(--ov-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--ov-surface);
}

.th-tr[b-j7ptwb0civ] {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(160px, 1.6fr) minmax(120px, 1fr) minmax(140px, 1.2fr);
    gap: 12px;
    align-items: baseline;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ov-line);
    font-size: 0.9rem;
}

/* Row scope drops the item column, so header + rows are both 3-up (driven by the table class so the
   header, which has no .th-task cell, can't fall out of step with the data rows). */
.th-narrow .th-tr[b-j7ptwb0civ] {
    grid-template-columns: minmax(150px, 1fr) minmax(120px, 1fr) minmax(140px, 1.2fr);
}

.th-tr:last-child[b-j7ptwb0civ] {
    border-bottom: 0;
}

.th-tr.th-head[b-j7ptwb0civ] {
    background: var(--ov-bg-tint);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ov-muted);
}

.th-when[b-j7ptwb0civ] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.th-date[b-j7ptwb0civ] {
    color: var(--ov-ink);
    font-variant-numeric: tabular-nums;
}

.th-src[b-j7ptwb0civ] {
    align-self: flex-start;
    font-size: 0.72rem;
}

.th-src .icon[b-j7ptwb0civ] {
    width: 11px;
    height: 11px;
}

.th-task[b-j7ptwb0civ] {
    color: var(--ov-ink);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.th-list[b-j7ptwb0civ] {
    font-size: 0.76rem;
    color: var(--ov-muted);
}

.th-who[b-j7ptwb0civ] {
    color: var(--ov-ink);
}

.th-what[b-j7ptwb0civ] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.th-badge[b-j7ptwb0civ] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid transparent;
}

/* De enige knop in een lijst die verder alleen te lezen is. Bewust stil: hij hoort bij de regel waarop
   hij staat en mag de tijdlijn niet gaan aanvoeren. */
.th-undo[b-j7ptwb0civ] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    border: 0;
    background: transparent;
    padding: 2px 4px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ov-lime-deep);
    text-decoration: underline;
    cursor: pointer;
}

.th-undo:hover:not(:disabled)[b-j7ptwb0civ] { color: var(--ov-lime-ink); }
.th-undo:disabled[b-j7ptwb0civ] { opacity: 0.5; cursor: default; }

.th-undo :global(svg)[b-j7ptwb0civ] {
    width: 13px;
    height: 13px;
}

.th-badge.is-done[b-j7ptwb0civ] {
    background: color-mix(in srgb, var(--ov-lime) 22%, var(--ov-surface));
    border-color: color-mix(in srgb, var(--ov-lime) 55%, transparent);
    color: #38530b;
}

.th-badge.is-skip[b-j7ptwb0civ] {
    background: var(--ov-amber-soft);
    border-color: var(--ov-amber-soft-line);
    color: var(--ov-amber-ink);
}

.th-badge.is-reopen[b-j7ptwb0civ] {
    background: var(--ov-bg-tint);
    border-color: var(--ov-line-strong);
    color: var(--ov-muted);
}

/* A dispatch is neutral information, not a status: it reads sky, the "queued/informational" hue, so a
   row of sent reminders never competes with an overdue deadline for attention. */
.th-badge.is-sent[b-j7ptwb0civ] {
    background: var(--ov-sky-soft);
    border-color: var(--ov-sky-soft-line);
    color: var(--ov-sky-ink);
}

.th-badge.is-escalated[b-j7ptwb0civ] {
    background: var(--ov-amber-soft);
    border-color: var(--ov-amber-soft-line);
    color: var(--ov-amber-ink);
}

.th-badge.is-renewed[b-j7ptwb0civ] {
    background: var(--ov-bg-tint);
    border-color: var(--ov-line-strong);
    color: var(--ov-ink);
}

/* The one thing here that is a problem the reader must act on. */
.th-badge.is-failed[b-j7ptwb0civ] {
    background: var(--ov-rose-soft);
    border-color: var(--ov-rose-soft-line);
    color: var(--ov-rose-ink);
}

/* ---- Collapsed dispatch groups ---- */
.th-recip[b-j7ptwb0civ] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--ov-ink);
    cursor: pointer;
    text-align: left;
}

.th-recip:hover[b-j7ptwb0civ] {
    text-decoration: underline;
}

.th-recip .icon[b-j7ptwb0civ] {
    width: 13px;
    height: 13px;
    color: var(--ov-muted);
}

.th-tr.th-sub[b-j7ptwb0civ] {
    background: var(--ov-bg-tint);
    font-size: 0.85rem;
    padding-top: 6px;
    padding-bottom: 6px;
}

.th-for[b-j7ptwb0civ] {
    font-size: 0.76rem;
    color: var(--ov-muted);
}

/* Ownership names two people; the arrow between them is decoration, so it stays quiet. */
.th-arrow[b-j7ptwb0civ] {
    color: var(--ov-muted);
    padding: 0 2px;
}

@media (max-width: 720px) {
    .th-tr[b-j7ptwb0civ], .th-narrow .th-tr[b-j7ptwb0civ] {
        grid-template-columns: 1fr 1fr;
        row-gap: 6px;
    }
    .th-tr.th-head[b-j7ptwb0civ] {
        display: none;
    }
    .th-when[b-j7ptwb0civ] { grid-column: 1 / -1; }
}
/* /Components/Shared/RowMenu.razor.rz.scp.css */
/* Het paneel hangt aan de knop, rechts uitgelijnd: het staat aan de rechterrand van een rij, dus naar
   links openen is de enige richting waarin het binnen het scherm blijft. */
.row-menu[b-pa9897wbzx] {
    position: relative;
    flex: 0 0 auto;
}

/* De variant met een woord ernaast (paginakop). De caret is de belofte dat er iets openklapt en draait
   mee als het menu open staat; de puntjes ervoor houden de band met de kale rij-menu's. */
.rm-trigger-labeled[b-pa9897wbzx] {
    gap: 6px;
}

.rm-trigger-labeled[b-pa9897wbzx]  svg:last-child {
    width: 14px;
    height: 14px;
    margin-left: -2px;
    color: var(--ov-muted);
    transition: transform .15s ease;
}

.rm-trigger-labeled[aria-expanded="true"][b-pa9897wbzx]  svg:last-child {
    transform: rotate(180deg);
}

.rm-pop[b-pa9897wbzx] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 10041;
    min-width: 190px;
    padding: 6px;
    background: var(--ov-surface);
    border: 1px solid var(--ov-line);
    border-radius: var(--ov-r);
    box-shadow: var(--ov-shadow-lg);
}

/* Eén itemvorm voor het hele menu, ongeacht of het een link of een knop is — anders leest de ene regel
   als navigatie en de andere als bediening terwijl ze in dezelfde lijst staan. */
.rm-pop[b-pa9897wbzx]  .rm-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--ov-r-sm, 8px);
    background: transparent;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--ov-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.rm-pop[b-pa9897wbzx]  .rm-item:hover {
    background: var(--ov-bg-tint);
}

.rm-pop[b-pa9897wbzx]  .rm-item:focus-visible {
    outline: none;
    box-shadow: var(--ov-ring);
}

.rm-pop[b-pa9897wbzx]  .rm-item svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--ov-muted);
}

/* Weggooien staat onderaan en draagt de enige kleur in het menu, zodat het niet per ongeluk de buurman
   van "open lijst" wordt. */
.rm-pop[b-pa9897wbzx]  .rm-item.danger {
    color: var(--ov-rose-ink);
}

.rm-pop[b-pa9897wbzx]  .rm-item.danger svg {
    color: var(--ov-rose);
}

.rm-pop[b-pa9897wbzx]  .rm-item.danger:hover {
    background: var(--ov-rose-soft);
}
/* /Components/Shared/RowSheet.razor.rz.scp.css */
/* Full-screen on a phone rather than a centred dialog: the content is a form of unknown length and
   the keyboard eats half the viewport, so borrowing the whole screen is the honest thing to do. */
.sheet-overlay[b-p4mtptru71] {
    position: fixed;
    inset: 0;
    /* Above the sticky topbar (40) but below dialogs (60): the sheet is a page-level surface, and
       the reminder/delete dialogs it opens are transient and must land on top of it. */
    z-index: 50;
    display: flex;
    justify-content: center;
    background: rgba(27, 26, 23, 0.42);
    backdrop-filter: blur(3px);
    animation: sheet-fade-b-p4mtptru71 0.18s ease;
}

.sheet[b-p4mtptru71] {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 620px;
    max-height: 100dvh;
    background: var(--ov-surface);
    animation: sheet-rise-b-p4mtptru71 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Head and foot stay put; only the field stack scrolls. */
.sheet-head[b-p4mtptru71] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ov-line);
    background: var(--ov-surface);
}

.sheet-back[b-p4mtptru71] {
    flex: none;
}

.sheet-title[b-p4mtptru71] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.sheet-title strong[b-p4mtptru71] {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--ov-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sheet-title span[b-p4mtptru71] {
    font-size: 0.8rem;
    color: var(--ov-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sheet-tools[b-p4mtptru71] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

.sheet-tools .btn-icon[b-p4mtptru71] {
    position: relative;
}

.sheet-bell-count[b-p4mtptru71] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    border-radius: var(--ov-r-pill, 999px);
    background: var(--ov-lime-deep);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.sheet-body[b-p4mtptru71] {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px 16px 20px;
    /* Keep the last field clear of the on-screen keyboard on iOS/Android. */
    padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* One field per line, label above — the whole point of the sheet. */
.sheet-field[b-p4mtptru71] {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--ov-line);
}

.sheet-field:last-child[b-p4mtptru71] {
    border-bottom: none;
}

.sf-label[b-p4mtptru71] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ov-muted);
}

.sf-label .type-glyph[b-p4mtptru71] {
    display: inline-flex;
    color: var(--ov-faint);
}

.sf-label .type-glyph svg[b-p4mtptru71] {
    width: 13px;
    height: 13px;
}

.sf-name[b-p4mtptru71] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A watched date column is the one that can raise an alarm — worth marking in the form too. */
.sf-watched[b-p4mtptru71] {
    display: inline-flex;
    flex: none;
    color: var(--ov-lime-deep);
}

.sf-watched svg[b-p4mtptru71] {
    width: 12px;
    height: 12px;
}

/* The cell editors are the grid's, which are sized for a table cell. In the sheet they get the
   full width and a touch-sized target. */
.sheet-field[b-p4mtptru71]  .cell-input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--ov-line);
    border-radius: var(--ov-r, 12px);
    background: var(--ov-paper, #fff);
    font-size: 1rem;
}

.sheet-field[b-p4mtptru71]  .cell-input:focus {
    outline: none;
    border-color: var(--ov-lime-deep);
    box-shadow: var(--ov-ring);
}

.sheet-field[b-p4mtptru71]  .cell-amount {
    width: 100%;
}

/* Sits above the prev/next bar: a way out of the row, not a way through it. */
.sheet-proof[b-p4mtptru71] {
    flex: none;
    padding: 8px 12px 0;
}

.sheet-foot[b-p4mtptru71] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex: none;
    padding: 10px 12px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--ov-line);
    background: var(--ov-bg-tint, var(--ov-surface));
}

.sheet-pos[b-p4mtptru71] {
    margin: 0 auto;
    font-size: 0.82rem;
    color: var(--ov-muted);
}

@keyframes sheet-fade-b-p4mtptru71 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes sheet-rise-b-p4mtptru71 {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
/* /Components/Shared/TaskChecklist.razor.rz.scp.css */
/* The 4px was tuned against a header row that used to sit here (the Geschiedenis button, since moved
   to the page head). Without it the quick-add crowded the status band above, so the block carries its
   own breathing room now. */
.tasks[b-gjrz4rja5s] {
    margin-top: var(--sp-3);
}

/* ---- Task toolbar ----
   Houses the status band, the "Toegewezen aan" filter and the title search above the list. The inner
   .status-bar / .member-filter / .member-search styling is shared with the list grid (app.css); this
   only lays out the row. */
.task-toolbar[b-gjrz4rja5s] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: var(--sp-3);
}

/* The status band carries its own bottom margin when it stands alone; inside the toolbar the toolbar owns
   the spacing (same reset the grid's .list-toolbar applies). */
.task-toolbar .status-bar[b-gjrz4rja5s] {
    margin: 0;
}

/* The search's right-alignment (margin-left:auto) and its full-width phone drop both come from the shared
   .list-search rules in app.css — nothing to add here. */

/* ---- Ownerless tasks ----
   Text left, action right, on one line where there is room. The button sits on the note itself rather
   than in the row list: it acts on the whole pile, not on whichever task you happen to be looking at. */
.unassigned-note[b-gjrz4rja5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
    border-color: var(--ov-line-strong);
    background: var(--ov-surface);
}

.unassigned-note p[b-gjrz4rja5s] {
    margin: 4px 0 0;
    color: var(--ov-muted);
}

/* ---- Quick-add ----
   Controls use the shared .input / .select + .input-sm / .select-sm primitives (see app.css);
   only the composer shell and the seamless title field live here. */
.quick-add[b-gjrz4rja5s] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--ov-surface);
    border: 1px solid var(--ov-line-strong);
    border-radius: var(--ov-r);
    box-shadow: var(--ov-shadow-sm);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
    transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}

.quick-add:focus-within[b-gjrz4rja5s] {
    border-color: var(--ov-lime-deep);
    box-shadow: var(--ov-ring);
}

.qa-title[b-gjrz4rja5s] {
    flex: 1 1 200px;
    min-width: 140px;
    border: 0;
    background: transparent;
    font-size: 0.98rem;
    color: var(--ov-ink);
    padding: 8px 2px;
    outline: none;
}

.qa-assignee[b-gjrz4rja5s] {
    flex: 0 0 auto;
}

.qa-hint[b-gjrz4rja5s] {
    margin: -8px 0 14px;
    font-size: 12.5px;
    color: var(--ov-amber-ink);
    padding-left: 12px;
}

/* ---- Task list ----
   A card surface with hairline-separated rows, matching /app/taken and the dashboard. */
.task-list[b-gjrz4rja5s] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    background: var(--ov-surface);
    border: 1px solid var(--ov-line);
    border-radius: var(--ov-r-lg);
    box-shadow: var(--ov-shadow-sm);
    overflow: hidden;
}

/* The row itself lives in the shared TaskRow component (Components/Shared/TaskRow.razor).
   This component only styles the composer, the .task-list card wrapper, and the Done toggle. */

/* Done section */
.done-toggle[b-gjrz4rja5s] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 4px;
    border: 0;
    background: transparent;
    color: var(--ov-muted);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 4px;
}

.done-toggle :global(svg)[b-gjrz4rja5s] {
    width: 15px;
    height: 15px;
}

.done-count[b-gjrz4rja5s] {
    background: var(--ov-bg-tint);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 12px;
    color: var(--ov-ink-soft);
}

/* ---- Phones ----
   The composer's controls (date, repeat, assignee, Add) crowd onto a phone width. Let the title take a
   full line, then the controls wrap beneath it as comfortable rows instead of a squeezed single line. */
@media (max-width: 640px) {
    .quick-add[b-gjrz4rja5s] {
        gap: var(--sp-2) 8px;
    }

    .qa-title[b-gjrz4rja5s] {
        flex: 1 1 100%;
        min-width: 0;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--ov-line);
    }

    .qa-title:focus[b-gjrz4rja5s] {
        border-bottom-color: var(--ov-lime-deep);
    }

    /* The date drives whether a task can be added, so give it room; the repeat select follows. */
    .quick-add :global(.datefield)[b-gjrz4rja5s],
    .quick-add .qa-assignee[b-gjrz4rja5s] {
        flex: 1 1 44%;
        min-width: 130px;
    }

    .quick-add .select-sm[b-gjrz4rja5s] {
        flex: 1 1 44%;
    }

    /* Add is the commit — full width and unmistakable at the bottom of the composer. */
    .quick-add .btn-primary[b-gjrz4rja5s] {
        flex: 1 1 100%;
        justify-content: center;
    }

    /* The filter fills the width so its picker is a proper tap target, not a stub. */
    .task-toolbar .member-filter[b-gjrz4rja5s] {
        width: 100%;
    }

    .task-toolbar .member-filter-pick[b-gjrz4rja5s] {
        flex: 1 1 auto;
    }
}

/* /Components/Shared/TaskRow.razor.rz.scp.css */
/* The one task-row stylesheet, shared by the Taken page and the TaskChecklist. Hairline-separated
   rows inside the parent's .task-list card. */

.task[b-wujqjc3jm8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ov-line);
    transition: background .14s var(--ease);
}

.task:last-child[b-wujqjc3jm8] {
    border-bottom: 0;
}

.task:hover[b-wujqjc3jm8] {
    background: var(--ov-bg-tint);
}

/* A completed task reads faded, with a struck-through title. */
.task.is-done[b-wujqjc3jm8] {
    opacity: .72;
}

.is-done .task-title[b-wujqjc3jm8] {
    text-decoration: line-through;
    color: var(--ov-muted);
}

/* ---- Afronden ----
   De knop draagt het woord en staat rechts, vóór de icoonknoppen: dezelfde vorm, hetzelfde woord en
   dezelfde plek als op het dashboard (.a-actions daar). Hij krimpt niet mee als de rij smal wordt —
   het is de enige knop op de rij die iets afmaakt. */
.task-do[b-wujqjc3jm8] {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---- Body: title line (+ meta / notes) ---- */
.task-body[b-wujqjc3jm8] {
    flex: 1 1 auto;
    min-width: 0;
}

.task-line[b-wujqjc3jm8] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.task-title[b-wujqjc3jm8] {
    font-size: 15px;
    font-weight: 600;
    color: var(--ov-ink);
    text-decoration: none;
    min-width: 0;
}

/* Read title = link/span, ellipsized. */
a.task-title[b-wujqjc3jm8],
span.task-title[b-wujqjc3jm8] {
    flex: 0 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.task-title:hover[b-wujqjc3jm8] {
    text-decoration: underline;
}

/* Editable title = seamless input that grows and underlines on focus. */
input.task-title[b-wujqjc3jm8] {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    padding: 0;
    outline: none;
    border-bottom: 1px solid transparent;
    font-family: inherit;
}

input.task-title:focus[b-wujqjc3jm8] {
    border-bottom-color: var(--ov-line-strong);
}

/* The list a task belongs to: quiet faint text (Taken cross-list view), still click-to-filter. */
.task-listname[b-wujqjc3jm8] {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ov-faint);
    cursor: pointer;
}

.task-listname:hover[b-wujqjc3jm8] {
    color: var(--ov-ink-soft);
    text-decoration: underline;
}

.task-meta[b-wujqjc3jm8] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.meta-date[b-wujqjc3jm8] {
    font-size: 12.5px;
    color: var(--ov-muted);
}

.task.overdue .meta-date[b-wujqjc3jm8] {
    color: var(--ov-rose-ink);
    font-weight: 600;
}

.task.soon .meta-date[b-wujqjc3jm8] {
    color: var(--ov-amber-ink);
}

.task-repeat[b-wujqjc3jm8] {
    display: inline-flex;
    color: var(--ov-muted);
}

.task-repeat :global(svg)[b-wujqjc3jm8] {
    width: 14px;
    height: 14px;
}

/* Recurrence as a scannable chip in the read-mode meta line ("Jaarlijks"), not a bare glyph. */
.repeat-chip[b-wujqjc3jm8] {
    font-size: 0.72rem;
    padding: 1px 8px;
    color: var(--ov-muted);
}

/* Note toggle + textarea (editable mode). */
.task-noteflag[b-wujqjc3jm8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ov-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: 6px;
}

.task-noteflag.ghost[b-wujqjc3jm8] {
    opacity: 0;
}

.task:hover .task-noteflag.ghost[b-wujqjc3jm8] {
    opacity: .5;
}

.task-noteflag.on[b-wujqjc3jm8] {
    color: var(--ov-ink);
    background: var(--ov-bg-tint);
    opacity: 1;
}

.task-noteflag :global(svg)[b-wujqjc3jm8] {
    width: 15px;
    height: 15px;
}

.task-notes[b-wujqjc3jm8] {
    margin-top: 6px;
    font-size: 0.86rem;
    resize: vertical;
}

/* ---- Right-hand controls ---- */
.task-controls[b-wujqjc3jm8] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Read view (Taken): keep the right cluster on one line so the reserved skip column can hold the
   assignee in a single column instead of letting it wrap. */
.task-controls.is-read[b-wujqjc3jm8] {
    flex-wrap: nowrap;
}

/* Reserved "Overslaan" column: rendered on every team read row (empty when the task doesn't recur)
   so the assignee to its left keeps the same position on recurring and one-off rows alike. */
.task-skip-slot[b-wujqjc3jm8] {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    width: 76px;
}

.task-repeat-sel[b-wujqjc3jm8] {
    max-width: 130px;
}

.task-assignee[b-wujqjc3jm8] {
    min-width: 0;
}

.task-skip[b-wujqjc3jm8] {
    border: 0;
    background: transparent;
    color: var(--ov-muted);
    font-size: 12.5px;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    flex: 0 0 auto;
}

.task-skip:hover[b-wujqjc3jm8] {
    background: var(--ov-bg-tint);
    color: var(--ov-ink);
}

.task-hist[b-wujqjc3jm8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ov-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 7px;
    opacity: 0;
    flex: 0 0 auto;
}

.task:hover .task-hist[b-wujqjc3jm8] {
    opacity: .6;
}

.task-hist:hover[b-wujqjc3jm8] {
    opacity: 1;
    background: var(--ov-bg-tint);
    color: var(--ov-ink);
}

.task-hist :global(svg)[b-wujqjc3jm8] {
    width: 15px;
    height: 15px;
}

.task-del[b-wujqjc3jm8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ov-muted);
    cursor: pointer;
    padding: 5px;
    border-radius: 7px;
    opacity: 0;
    flex: 0 0 auto;
}

.task:hover .task-del[b-wujqjc3jm8] {
    opacity: .6;
}

.task-del:hover[b-wujqjc3jm8] {
    opacity: 1;
    background: var(--ov-rose-soft);
    color: var(--ov-rose-ink);
}

.task-del :global(svg)[b-wujqjc3jm8] {
    width: 15px;
    height: 15px;
}

/* Phones: the right-hand cluster drops under the title and fills the row width. */
@media (max-width: 720px) {
    .task[b-wujqjc3jm8] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .task-controls[b-wujqjc3jm8] {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
    }

    /* Read rows (Taken) have a leading dot/checkbox; keep the controls lined up under the title. */
    .task-controls.is-read[b-wujqjc3jm8] {
        padding-left: 34px;
    }

    /* Editable rows (checklist) have no leading control, so start flush. Date + repeat share a line, the
       assignee sits beside them, and Afhandelen stretches to a full-width primary action — a comfortable
       thumb target instead of the desktop's right-edge sliver. The overflow menu tucks to the end. */
    .task-controls.is-editable[b-wujqjc3jm8] {
        padding-left: 0;
    }

    .task-controls.is-editable :global(.datefield)[b-wujqjc3jm8] {
        flex: 1 1 46%;
        min-width: 130px;
    }

    .task-controls.is-editable .task-repeat-sel[b-wujqjc3jm8] {
        flex: 1 1 40%;
        max-width: none;
    }

    .task-controls.is-editable .task-assignee[b-wujqjc3jm8] {
        flex: 1 1 auto;
    }

    .task-controls.is-editable .task-do[b-wujqjc3jm8] {
        flex: 1 1 100%;
        justify-content: center;
        order: 5;
    }

    /* Overslaan (recurring, editable) sits on the actions line before Afhandelen. */
    .task-controls.is-editable .task-skip[b-wujqjc3jm8] {
        order: 4;
    }
}
/* /Components/Shared/WelcomeWizard.razor.rz.scp.css */
.wiz-overlay[b-d12uwra1pe] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(27, 26, 23, 0.55);
    backdrop-filter: blur(3px);
    animation: wiz-fade-b-d12uwra1pe 0.25s ease;
}

.wiz-card[b-d12uwra1pe] {
    --wiz-pad: 34px;
    --wiz-pad-top: 34px;
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: var(--ov-r-lg, 16px);
    box-shadow: var(--ov-shadow-lg);
    animation: wiz-rise-b-d12uwra1pe 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    /* Never grow past the viewport — the overlay is fixed, so anything that spills is unreachable.
       Same contract as .dialog: the shell caps on the dynamic viewport and the body scrolls inside
       it, which also keeps the close button pinned instead of scrolling away with the content. */
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 48px);
    overflow: hidden;
}

.wiz-body[b-d12uwra1pe] {
    padding: var(--wiz-pad-top) var(--wiz-pad) 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wiz-close[b-d12uwra1pe] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ov-r-pill, 999px);
    z-index: 1;
    /* Pinned to the shell while the body scrolls under it, so it has to read as a button floating
       over the content rather than a transparent hole punched in the text it passes over. */
    background: #fff;
    border: 1px solid var(--ov-line, #E7E1D4);
    box-shadow: 0 1px 6px rgba(27, 26, 23, 0.10);
    color: var(--ov-muted);
    cursor: pointer;
}

.wiz-close:hover[b-d12uwra1pe] {
    background: rgba(43, 38, 28, 0.06);
}

/* The card scrolls on short screens; the escape hatch shouldn't scroll out of reach with it. */

.wiz-eyebrow[b-d12uwra1pe] {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ov-lime-deep, #97C21C);
    margin-bottom: 8px;
}

.wiz-card h1[b-d12uwra1pe] {
    margin: 0 0 10px;
    font-size: 1.6rem;
    line-height: 1.2;
}

.wiz-lede[b-d12uwra1pe] {
    margin: 0 0 22px;
    color: var(--ov-ink-soft);
    font-size: 1rem;
    line-height: 1.5;
}

/* The picker steps need room for a 3-up grid; the narrative steps stay narrow and readable. */
.wiz-card-wide[b-d12uwra1pe] {
    max-width: 760px;
}

/* ---- Welcome: what the app will do for you, before asking anything ---- */
.wiz-promise[b-d12uwra1pe] {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    gap: 12px;
}

.wiz-promise li[b-d12uwra1pe] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--ov-ink-soft);
}

.wiz-promise strong[b-d12uwra1pe] {
    color: var(--ov-ink);
}

.wp-icon[b-d12uwra1pe] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--ov-r-sm, 8px);
    background: var(--ov-lime-soft, #EEF6D6);
    color: var(--ov-lime-deep, #97C21C);
}

.wp-icon svg[b-d12uwra1pe] {
    width: 16px;
    height: 16px;
}

.wiz-cta[b-d12uwra1pe] {
    font-size: 1rem;
    padding: 12px 22px;
}

.wiz-actions-center[b-d12uwra1pe] {
    justify-content: center;
    margin-top: 0;
}

/* Secondary escape hatches, deliberately quiet next to the one primary route. */
.wiz-alts[b-d12uwra1pe] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 0.88rem;
}

.wiz-alts button[b-d12uwra1pe] {
    border: none;
    background: transparent;
    color: var(--ov-muted);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.wiz-alts button:hover:not(:disabled)[b-d12uwra1pe] {
    color: var(--ov-ink);
}

.wiz-alt-sep[b-d12uwra1pe] {
    color: var(--ov-line, #E7E1D4);
}

/* ---- Pickers ---- */
.wiz-tiles[b-d12uwra1pe] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 4px;
    max-height: 46vh;
    overflow-y: auto;
}

.wiz-tiles-3[b-d12uwra1pe] {
    grid-template-columns: repeat(3, 1fr);
    max-height: none;
}

@media (max-width: 700px) {
    .wiz-tiles[b-d12uwra1pe], .wiz-tiles-3[b-d12uwra1pe] { grid-template-columns: 1fr; }
}

.wiz-tile[b-d12uwra1pe] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    padding: 14px;
    border: 1.5px solid var(--ov-line, #E7E1D4);
    border-radius: var(--ov-r, 12px);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

/* Hover mimics "picked" closely enough that a touch device's sticky :hover reads as a selection —
   a tile the user only brushed while scrolling comes back green. Pointer devices only. */
@media (hover: hover) {
    .wiz-tile:hover:not(:disabled)[b-d12uwra1pe] {
        border-color: var(--ov-lime, #B7E42F);
        box-shadow: var(--ov-shadow-sm);
    }
}

.wiz-tile.picked[b-d12uwra1pe] {
    border-color: var(--ov-lime-deep, #97C21C);
    background: var(--ov-lime-soft, #EEF6D6);
}

.wiz-tile:disabled[b-d12uwra1pe] {
    opacity: 0.45;
    cursor: default;
}

.wt-body[b-d12uwra1pe] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.wt-body strong[b-d12uwra1pe] {
    font-size: 0.95rem;
    line-height: 1.25;
}

.wt-body span[b-d12uwra1pe] {
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--ov-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wt-emoji[b-d12uwra1pe] {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font-size: 18px;
    border-radius: var(--ov-r-sm, 8px);
    background: rgba(43, 38, 28, 0.05);
}

.wiz-tile.picked .wt-emoji[b-d12uwra1pe] {
    background: #fff;
}

.wt-check[b-d12uwra1pe] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: var(--ov-r-pill, 999px);
    color: #fff;
}

.wiz-tile.picked .wt-check[b-d12uwra1pe] {
    background: var(--ov-lime-deep, #97C21C);
}

.wt-check svg[b-d12uwra1pe] {
    width: 12px;
    height: 12px;
}

.wiz-count[b-d12uwra1pe] {
    margin-right: auto;
    font-size: 0.85rem;
    color: var(--ov-muted);
}

/* ---- Building ---- */
.wiz-building[b-d12uwra1pe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 22px 0 8px;
}

.wiz-building h1[b-d12uwra1pe] {
    margin-bottom: 8px;
}

.wb-spinner[b-d12uwra1pe] {
    width: 34px;
    height: 34px;
    margin-bottom: 18px;
    border-radius: 50%;
    border: 3px solid var(--ov-lime-soft, #EEF6D6);
    border-top-color: var(--ov-lime-deep, #97C21C);
    animation: wiz-spin-b-d12uwra1pe 0.7s linear infinite;
}

@keyframes wiz-spin-b-d12uwra1pe {
    to { transform: rotate(360deg); }
}

/* ---- Joined: the line the inviter wrote ----
   A quote, not a callout: it has to read as a person talking, so it gets a rule and the sender's
   name rather than the lime panels the app's own messages use. pre-line keeps their line breaks. */
.wiz-note[b-d12uwra1pe] {
    margin: 0 0 18px;
    padding: 12px 0 12px 16px;
    border-left: 3px solid var(--ov-lime-deep, #97C21C);
    display: grid;
    gap: 4px;
    text-align: left;
}

.wiz-note-from[b-d12uwra1pe] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ov-muted, #6B6860);
}

.wiz-note-body[b-d12uwra1pe] {
    font-size: 1rem;
    line-height: 1.55;
    white-space: pre-line;
}

/* ---- Done: a receipt of what was actually built ---- */
.wiz-receipt[b-d12uwra1pe] {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 8px;
}

.wiz-receipt li[b-d12uwra1pe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--ov-r, 12px);
    background: var(--ov-lime-soft, #EEF6D6);
    font-size: 0.95rem;
}

.wr-num[b-d12uwra1pe] {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    border-radius: var(--ov-r-pill, 999px);
    background: var(--ov-lime-deep, #97C21C);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

.wr-num svg[b-d12uwra1pe] {
    width: 15px;
    height: 15px;
}

.wiz-hint-muted[b-d12uwra1pe] {
    color: var(--ov-muted);
}

.wiz-hint[b-d12uwra1pe] {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--ov-lime-deep, #97C21C);
}

.wiz-error[b-d12uwra1pe] {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--ov-danger);
}

.wiz-actions[b-d12uwra1pe] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* ---- Phone ---- */
@media (max-width: 560px) {
    .wiz-overlay[b-d12uwra1pe] {
        padding: 12px;
    }

    .wiz-card[b-d12uwra1pe] {
        --wiz-pad: 20px;
        --wiz-pad-top: 26px;
        max-height: calc(100dvh - 24px);
    }

    .wiz-body[b-d12uwra1pe] {
        padding: var(--wiz-pad-top) var(--wiz-pad) 22px;
    }

    .wiz-card h1[b-d12uwra1pe] {
        font-size: 1.35rem;
    }

    .wiz-lede[b-d12uwra1pe] {
        font-size: 0.95rem;
        margin-bottom: 18px;
    }

    .wiz-promise[b-d12uwra1pe] {
        gap: 10px;
        margin-bottom: 20px;
    }

    .wiz-promise li[b-d12uwra1pe] {
        font-size: 0.9rem;
    }

    /* Leave headroom for the footer so "Verder" stays visible above the tile scroller. */
    .wiz-tiles[b-d12uwra1pe] {
        max-height: 40vh;
    }

    .wiz-cta[b-d12uwra1pe] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 400px) {
    /* Side by side these two wrap to two lines each and read as one mangled sentence. */
    .wiz-alts[b-d12uwra1pe] {
        flex-direction: column;
        gap: 6px;
    }

    .wiz-alt-sep[b-d12uwra1pe] {
        display: none;
    }
}

@keyframes wiz-fade-b-d12uwra1pe {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes wiz-rise-b-d12uwra1pe {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}