:root {
    color-scheme: light dark;
    --page-background: #f3f7f2;
    --page-accent: #dcebdd;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --text: #173224;
    --text-muted: #587060;
    --border: #cbd8cc;
    --primary: #176b43;
    --primary-hover: #105637;
    --primary-text: #ffffff;
    --oppervlak: var(--surface);
    --oppervlak-subtiel: var(--surface-raised);
    --text-color: var(--text);
    --balkenplanning-dagmarkering: #0e7490;
    --danger-surface: #fff1f0;
    --danger-border: #e6aaa5;
    --danger-text: #8c2d26;
    --danger-action: #a7352d;
    --danger-action-hover: #862a24;
    --danger-action-text: #ffffff;
    --focus-ring: #e69f32;
    --shadow: 0 1.25rem 3.5rem rgb(22 58 37 / 14%);
    --radius-card: 1.25rem;
    --radius-control: 0.625rem;
}

.offertegegevens {
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 1rem rgb(30 37 45 / 4%);
}

.offertegegevens-kop {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.offertegegevens-icoon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border-radius: 0.5rem;
}

.offertegegevens-titel {
    margin: 0;
    font-size: 1.125rem;
    letter-spacing: -0.015em;
}

.offertegegevens-inhoud {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 1.5rem 1rem 1.25rem;
}

.offertegegevens-kolom {
    display: grid;
    align-content: start;
    gap: 1.5rem;
}

.offertegegeven {
    display: grid;
    justify-items: start;
    gap: 0.375rem;
    min-width: 0;
}

.offertegegeven-label {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.documentgegevens .offertegegevens-kop {
    padding-right: 2rem;
    padding-left: 2rem;
}

.documentgegevens .offertegegevens-inhoud {
    gap: 0;
    padding-right: 2rem;
    padding-left: 2rem;
}

.documentgegevens .offertegegevens-kolom {
    gap: 0;
    padding-right: 2.25rem;
}

.documentgegevens .offertegegevens-kolom + .offertegegevens-kolom {
    padding-right: 0;
    padding-left: 2.25rem;
    border-left: 1px solid var(--border);
}

.documentgegevens .offertegegeven {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.documentgegevens .offertegegeven:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.offertegegevens-link {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.offerte-samenvatting-details.documentgegevens
    .offerte-samenvatting-sectie-inhoud--offerte
    > .offertegegeven:nth-child(-n + 2)
    > .offertegegevens-link {
    font-weight: 400;
}

.offertegegevens-link span {
    overflow-wrap: anywhere;
}

.offertegegevens-link:hover {
    color: var(--primary-hover);
}

.offertegegevens-link .web-icon {
    flex: 0 0 auto;
}

.offertegegevens-link .web-icon--externe-link path:last-child {
    display: none;
}

.offertegegevens-status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.625rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 11%, var(--surface));
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
}

.offertegegevens-status-punt {
    width: 0.5rem;
    height: 0.5rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
}

.offertegegevens-status--concept {
    color: #c89827;
}

.offertegegevens-status--uitgebracht {
    color: #4e86b7;
}

.offertegegevens-status--geaccepteerd {
    color: var(--primary);
}

.offertegegevens-status--definitief {
    color: var(--primary);
}

.offertegegevens-status--afgewezen,
.offertegegevens-status--ingetrokken {
    color: var(--danger-action);
}

.offertegegevens-status--verlopen {
    color: var(--text-muted);
}

.offertegegevens-id {
    display: flex;
    max-width: 100%;
    align-items: center;
    gap: 0.5rem;
}

.offertegegevens-id-waarde {
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 0.8125rem;
}

.offertegegevens-id-kopieren {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    border-radius: 0.375rem;
    cursor: pointer;
}

.offertegegevens-id-kopieren:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.offertegegevens-id-kopieren:disabled {
    cursor: wait;
    opacity: 0.65;
}

.waarde-kopieren-bron {
    position: fixed;
    inset: auto auto 0 -9999px;
}

@media (max-width: 46rem) {
    .offertegegevens-inhoud {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.25rem 1rem;
    }

    .documentgegevens .offertegegevens-kop {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .documentgegevens .offertegegevens-inhoud {
        gap: 1rem;
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .documentgegevens .offertegegevens-kolom,
    .documentgegevens .offertegegevens-kolom + .offertegegevens-kolom {
        padding-right: 0;
        padding-left: 0;
    }

    .documentgegevens .offertegegevens-kolom + .offertegegevens-kolom {
        padding-top: 1rem;
        border-top: 1px solid var(--border);
        border-left: 0;
    }
}

.offerte-financieel-overzicht {
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 1rem rgb(30 37 45 / 4%);
}

.offerte-financieel-kop {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border);
}

.offerte-financieel-overzicht--zonder-inhoud > .offerte-financieel-kop {
    border-bottom: 0;
}

.offerte-financieel-icoon,
.offerte-financieel-totaal-icoon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.offerte-financieel-icoon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
}

.offerte-financieel-koptekst {
    display: grid;
    gap: 0.25rem;
}

.offerte-financieel-titel,
.offerte-financieel-beschrijving,
.offerte-financieel-totaal-label {
    margin: 0;
}

.offerte-financieel-titel {
    font-size: 1.25rem;
    letter-spacing: -0.015em;
}

.offerte-financieel-beschrijving {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.offerte-financieel-inhoud {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 1fr);
    align-items: stretch;
    gap: 3rem;
    padding: 2rem;
}

.offerte-financieel-specificatie {
    display: grid;
    align-content: center;
}

.offerte-financieel-mutaties {
    display: grid;
    gap: 0;
    padding-bottom: 0.5rem;
}

.offerte-financieel-regel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
}

.offerte-financieel-regel-label,
.offerte-financieel-regel-waarde {
    overflow-wrap: anywhere;
}

.offerte-financieel-regel-waarde {
    text-align: right;
}

.offerte-financieel-regel--subtotaal {
    min-height: 3.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.offerte-financieel-regel--mutatie {
    min-height: 1.75rem;
    color: var(--text-muted);
}

.offerte-financieel-mutaties + .offerte-financieel-regel--subtotaal {
    min-height: 2.75rem;
    padding-bottom: 0.75rem;
}

.offerte-financieel-regel--mutatie .offerte-financieel-regel-waarde {
    color: var(--text);
    font-weight: 500;
}

.offerte-financieel-regel--subtotaal .offerte-financieel-regel-waarde,
.offerte-financieel-regel--btw-totaal .offerte-financieel-regel-label,
.offerte-financieel-regel--btw-totaal .offerte-financieel-regel-waarde {
    font-weight: 700;
}

.offerte-financieel-btw-specificatie {
    display: grid;
    gap: 0.25rem;
    padding: 1rem 0;
}

.offerte-financieel-specificatie--zonder-btw .offerte-financieel-regel--subtotaal {
    padding-bottom: 0;
    border-bottom: 0;
}

.offerte-financieel-specificatie--zonder-btw .offerte-financieel-btw-specificatie {
    display: none;
}

.offerte-financieel-regel--btw {
    min-height: 2rem;
    color: var(--text-muted);
}

.offerte-financieel-regel--btw .offerte-financieel-regel-waarde {
    color: var(--text);
    font-weight: 500;
}

.offerte-financieel-regel--btw-totaal {
    min-height: 3.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.offerte-financieel-totaalkaart {
    display: grid;
    align-content: center;
    justify-items: start;
    min-height: 12rem;
    padding: 1.75rem;
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: 0.75rem;
}

.offerte-financieel-totaal-icoon {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.875rem;
    border-radius: 0.75rem;
}

.offerte-financieel-totaal-label {
    font-size: 1rem;
}

.offerte-financieel-totaal-waarde {
    margin-top: 0.35rem;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.1;
}

@media (max-width: 52rem) {
    .offerte-financieel-inhoud {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .offerte-financieel-totaalkaart {
        min-height: 10rem;
    }
}

@media (max-width: 36rem) {
    .offerte-financieel-kop,
    .offerte-financieel-inhoud {
        padding: 1.25rem;
    }

    .offerte-financieel-regel {
        gap: 0.75rem;
    }
}

.offerte-correcties {
    display: grid;
    gap: 1rem;
}

.melding {
    --melding-kleur: var(--primary);

    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    color: var(--text);
    background: color-mix(in srgb, var(--melding-kleur) 10%, var(--surface-raised));
    border: 1px solid color-mix(in srgb, var(--melding-kleur) 56%, var(--border));
    border-radius: 0.75rem;
}

.melding--succes {
    --melding-kleur: #218c48;
}

.melding--waarschuwing {
    --melding-kleur: #b7791f;
}

.melding--fout {
    --melding-kleur: #b9352e;
}

.melding-icoon {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    color: var(--melding-kleur);
    background: color-mix(in srgb, var(--melding-kleur) 14%, var(--surface));
    border-radius: 0.625rem;
    place-items: center;
}

.melding-kopie {
    min-width: 0;
}

.melding-titel,
.melding-bericht {
    margin: 0;
}

.melding-titel {
    font-size: 0.9375rem;
    font-weight: 700;
}

.melding-bericht {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

@media (max-width: 36rem) {
    .melding {
        align-items: flex-start;
    }
}

.sectie-paneel {
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 1rem rgb(30 37 45 / 4%);
}

.sectie-paneel-kop {
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.sectie-paneel--zonder-inhoud > .sectie-paneel-kop {
    border-bottom: 0;
}

.sectie-paneel-identiteit {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sectie-paneel-icoon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border-radius: 999px;
}

.sectie-paneel-koptekst {
    display: grid;
    gap: 0.25rem;
}

.sectie-paneel-titel,
.sectie-paneel-beschrijving {
    margin: 0;
}

.sectie-paneel-titel {
    font-size: 1.125rem;
    letter-spacing: -0.015em;
}

.sectie-paneel-beschrijving {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.sectie-paneel-kop > .paneel-acties {
    flex: 0 0 auto;
    padding: 0;
}

.sectie-paneel-kop > .paneel-acties::after {
    display: none;
}

.sectie-paneel-inhoud {
    overflow: hidden;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 0.75rem 0.75rem;
}

.sectie-paneel-inhoud > p {
    max-width: 100%;
    margin: 0;
    line-height: 1.6;
    overflow-wrap: break-word;
    white-space: normal;
}

.sectie-paneel-inhoud > p + p {
    margin-top: 1rem;
}

@media (max-width: 56rem) {
    .sectie-paneel-kop {
        align-items: flex-start;
        flex-direction: column;
    }

    .sectie-paneel-kop > .paneel-acties {
        width: 100%;
    }
}

@media (max-width: 36rem) {
    .sectie-paneel-kop {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

.offerte-correctieoverzicht-regel-kopie {
    display: grid;
    gap: 0.2rem;
}

.offerte-correctieoverzicht-regel-titel,
.offerte-correctieoverzicht-regel-specificatie {
    margin: 0;
}

.offerte-correctieoverzicht-regel-specificatie {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.offerte-correctieoverzicht-regels {
    display: grid;
    padding: 0 1.5rem;
}

.offerte-correctieoverzicht-regel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    min-height: 5.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.offerte-correctieoverzicht-regel:last-child {
    border-bottom: 0;
}

.offerte-correctieoverzicht-regel-titel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 500;
}

.offerte-correctieoverzicht-omschrijving {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
}

.offerte-correctieoverzicht-regel-specificatie {
    color: var(--primary);
}

.offerte-correctieoverzicht-regel-bedrag,
.offerte-correctieoverzicht-netto-bedrag {
    text-align: right;
    white-space: nowrap;
}

.offerte-correctieoverzicht-regel-bedrag {
    font-size: 0.9375rem;
}

.offerte-correctieoverzicht-netto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.5rem;
    min-height: 4.25rem;
    padding: 1rem 1.5rem;
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
    border-top: 1px solid var(--border);
}

.offerte-correctieoverzicht-netto-label {
    color: var(--text-muted);
}

.offerte-correctieoverzicht-netto-bedrag {
    font-size: 1rem;
}

@media (max-width: 36rem) {
    .offerte-correctieoverzicht-regels,
    .offerte-correctieoverzicht-netto {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .offerte-correctieoverzicht-regel {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .offerte-correctieoverzicht-regel-bedrag {
        text-align: left;
    }

}

.offerte-betalingsoverzicht-termijn-kopie {
    display: grid;
    gap: 0.2rem;
}

.offerte-betalingsoverzicht-termijn-titel,
.offerte-betalingsoverzicht-termijn-toelichting {
    margin: 0;
}

.offerte-betalingsoverzicht-termijn-toelichting {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.offerte-betalingsoverzicht-termijnen {
    display: grid;
    padding: 0 1.5rem;
}

.offerte-betalingsoverzicht-termijn {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 5.75rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.offerte-betalingsoverzicht-termijn:last-child {
    border-bottom: 0;
}

.offerte-betalingsoverzicht-badge {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 3rem;
    padding: 0.35rem 0.25rem;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 11%, var(--surface));
    border-radius: 0.625rem;
    line-height: 1.1;
}

.offerte-betalingsoverzicht-positie {
    font-size: 0.75rem;
}

.offerte-betalingsoverzicht-percentage {
    margin-top: 0.25rem;
    color: var(--text);
    font-size: 0.875rem;
}

.offerte-betalingsoverzicht-termijn-titel {
    font-size: 0.9375rem;
    font-weight: 600;
}

.offerte-betalingsoverzicht-bedrag {
    padding-left: 1rem;
    font-size: 0.9375rem;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 36rem) {
    .offerte-betalingsoverzicht-termijnen {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .offerte-betalingsoverzicht-termijn {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .offerte-betalingsoverzicht-bedrag {
        grid-column: 2;
        padding-left: 0;
        text-align: left;
    }
}

.offerte-betalingsafspraken {
    display: grid;
    gap: 1rem;
}

.offerte-betalingsafspraken-voorinstelling + .offerte-betalingsafspraken-kop {
    margin-top: 0.5rem;
}

.offerte-betalingsafspraken-kop {
    display: grid;
    gap: 0.25rem;
}

.offerte-betalingsafspraken-titel,
.offerte-betalingsafspraak-titel {
    margin: 0;
}

.offerte-betalingsafspraken-titel {
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3125rem;
}

.offerte-betalingsafspraken-beschrijving {
    margin: 0;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3125rem;
}

.offerte-betalingsafspraken-lijst {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.offerte-betalingsafspraak {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--page-background);
}

.offerte-betalingsafspraak-kop,
.offerte-betalingsafspraken-voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.offerte-betalingsafspraken-voet {
    margin-top: 0.5rem;
}

.offerte-betalingsafspraak-titel {
    font-size: 0.95rem;
}

.offerte-betalingsafspraak-velden {
    display: grid;
    grid-template-columns: minmax(8rem, 0.35fr) minmax(16rem, 1.65fr);
    gap: 0.75rem;
}

.offerte-betalingsafspraak-verwijderen,
.offerte-betalingsafspraken-toevoegen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    border-radius: 0.55rem;
    font: inherit;
    font-weight: 400;
    cursor: pointer;
}

.offerte-betalingsafspraak-verwijderen {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--surface);
}

.offerte-betalingsafspraken-toevoegen {
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.offerte-betalingsafspraken-totaal {
    margin: 0;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--surface);
}

.offerte-betalingsafspraken-totaal--geldig {
    color: var(--primary);
    background: var(--page-accent);
}

.offerte-betalingsafspraken-totaal--ongeldig {
    color: var(--danger-text);
    background: var(--danger-surface);
}

.offerte-betalingsafspraak-verwijderen:focus-visible,
.offerte-betalingsafspraken-toevoegen:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 40rem) {
    .offerte-betalingsafspraak-velden {
        grid-template-columns: 1fr;
    }

    .offerte-betalingsafspraken-voet {
        align-items: flex-start;
        flex-direction: column;
    }
}

.offerte-correcties-kop {
    display: grid;
    gap: 0.25rem;
}

.offerte-correcties-titel,
.offerte-correctie-titel {
    margin: 0;
}

.offerte-correcties-titel {
    font-size: 1rem;
}

.offerte-correcties-beschrijving {
    margin: 0;
    color: var(--text-muted);
}

.offerte-correcties-lijst {
    display: grid;
    gap: 0.75rem;
}

.offerte-correctie {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--page-background);
}

.offerte-correctie-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.offerte-correctie-titel {
    font-size: 0.95rem;
}

.offerte-correctie-velden {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(12rem, 1.5fr) minmax(9rem, 0.8fr) minmax(8rem, 0.8fr);
    gap: 0.75rem;
}

.offerte-correctie-verwijderen,
.offerte-correcties-toevoegen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    border-radius: 0.55rem;
    font: inherit;
    font-weight: 400;
    cursor: pointer;
}

.offerte-correctie-verwijderen {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--surface);
}

.offerte-correcties-toevoegen {
    justify-self: start;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.offerte-correctie-verwijderen:hover,
.offerte-correcties-toevoegen:hover {
    filter: brightness(0.96);
}

.offerte-correctie-verwijderen:focus-visible,
.offerte-correcties-toevoegen:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 54rem) {
    .offerte-correctie-velden {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 36rem) {
    .offerte-correctie-velden {
        grid-template-columns: 1fr;
    }
}

.offerte-inhoud-leeg,
.offerte-regeloverzicht,
.offerte-calculaties {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}

.offerte-groep {
    display: grid;
    gap: 1.5rem;
    overflow: visible;
}

.offerte-regeloverzicht,
.offerte-calculaties {
    overflow: visible;
}

.offerte-inhoud-leeg {
    overflow: hidden;
}

.offerte-groep-kop {
    padding: 1rem 1.25rem;
}

.offerte-groep-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border);
}

.offerte-inhoud-leeg-kop {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
}

.offerte-inhoud-leeg-icoon {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    place-items: center;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border-radius: 0.75rem;
}

.offerte-inhoud-leeg-koptekst {
    display: grid;
    gap: 0.25rem;
}

.offerte-groep-identiteit,
.offerte-calculaties-kop {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
}

.offerte-groep-icoon,
.offerte-calculaties-icoon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border-radius: 0.625rem;
}

.offerte-groep-koptekst {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: baseline;
    gap: 0.75rem;
}

.offerte-groep-kop > .paneel-acties {
    flex: 0 0 auto;
    padding: 0;
}

.offerte-groep-kop > .paneel-acties::after {
    display: none;
}

.offerte-groep-kop > .paneel-acties .paneel-acties-primair-menu-knop {
    width: 2rem;
    min-height: 2rem;
    padding: 0.375rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.offerte-groep-kop > .paneel-acties .paneel-acties-primair-menu-knop:hover,
.offerte-groep-kop > .paneel-acties .paneel-acties-primair-menu[open] .paneel-acties-primair-menu-knop {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border-color: var(--primary);
    color: var(--primary);
}

.offerte-groep-kop > .paneel-acties .paneel-acties-primair-menu-knop > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.offerte-groep-kop > .paneel-acties .paneel-acties-primair-menu-knop > .web-icon:last-child {
    display: none;
}

.offerte-groep-kop h2,
.offerte-groep-kop p,
.offerte-calculaties-kop h2,
.offerte-inhoud-leeg-titel,
.offerte-inhoud-leeg-beschrijving {
    margin: 0;
}

.offerte-groep-kop h2,
.offerte-calculaties-kop h2,
.offerte-inhoud-leeg-titel {
    font-size: 0.875rem;
    letter-spacing: -0.015em;
}

.offerte-groep-kop p,
.offerte-inhoud-leeg-beschrijving {
    color: var(--text-muted);
}

.offerte-groep-kop p {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
}

.offerte-groep-meta-aantal {
    margin-left: auto;
    min-width: 4.5rem;
    text-align: right;
}

.offerte-groep-meta-scheider {
    display: inline;
    margin: 0;
}

.offerte-groep-meta-toelichting {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offerte-groep-subtotaal-badge {
    margin-left: 0;
}

.offerte-calculaties-kop {
    min-height: 4.5rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.offerte-calculaties-aantal {
    display: inline-grid;
    min-width: 2rem;
    height: 1.75rem;
    padding: 0 0.55rem;
    place-items: center;
    color: var(--text);
    background: color-mix(in srgb, var(--text-muted) 20%, transparent);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
}

.offerte-calculaties-lijst {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem 1.25rem;
}

.offerte-calculatie {
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    overflow: hidden;
}

.offerte-calculatie-samenvatting {
    display: flex;
    min-height: 3.75rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    list-style: none;
}

.offerte-calculatie-samenvatting::-webkit-details-marker {
    display: none;
}

.offerte-calculatie-samenvatting-titel,
.offerte-calculatie-samenvatting-meta {
    display: inline-flex;
    align-items: center;
}

.offerte-calculatie-samenvatting-titel {
    min-width: 0;
    gap: 0.75rem;
}

.offerte-calculatie-samenvatting-titel svg {
    flex: 0 0 auto;
    transition: transform 160ms ease;
    transform: rotate(-90deg);
}

.offerte-calculatie[open] .offerte-calculatie-samenvatting-titel svg {
    transform: rotate(0);
}

.offerte-calculatie-samenvatting-meta {
    flex: 0 0 auto;
    gap: 0.75rem;
    color: var(--text-muted);
}

.offerte-calculatie-samenvatting-meta strong {
    color: var(--text);
}

.offerte-calculatie-inhoud {
    border-top: 1px solid var(--border);
}

/* ==========================================================================
   Offerte Calculatiegroepen Inklappen & Toolbar
   ========================================================================== */

.offerte-groepen-toolbar-sectie {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

.offerte-groepen-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0.25rem;
}

.offerte-groepen-toolbar-links {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.offerte-groepen-toolbar-titel {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

.offerte-groepen-toolbar-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    background: var(--surface-raised);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.offerte-groepen-toolbar-acties {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.offerte-groep-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--surface, #ffffff);
    color: var(--text-muted, #64748b);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.offerte-groep-kop:hover .offerte-groep-toggle {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.offerte-groep-toggle svg {
    transition: transform 0.2s ease;
    transform: rotate(-90deg);
}

.offerte-groep--open .offerte-groep-toggle svg,
.offerte-groep-toggle[aria-expanded="true"] svg {
    transform: rotate(0deg);
}

.offerte-groep-kop {
    cursor: pointer;
    user-select: none;
}

.offerte-groep--collapsed .offerte-groep-kop {
    border-bottom: none;
    min-height: 3.5rem;
}

.offerte-groep-kop .offerte-groep-meta-tekst {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4.5rem auto max-content;
    align-items: center;
    gap: 0.35rem;
}

.offerte-groep-meta-aantal {
    grid-column: 2;
    margin-left: 0;
    color: var(--text-muted);
    text-align: right;
    justify-self: end;
}

.offerte-groep-meta-toelichting {
    grid-column: 1;
}

.offerte-groep-meta-scheider {
    color: var(--border, #e2e8f0);
    margin: 0 0.15rem;
}

.offerte-groep-subtotaal-badge {
    grid-column: 4;
    justify-self: end;
    font-weight: 600;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    padding: 0.1rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

.offerte-groep-meta-scheider--subtotaal {
    grid-column: 3;
}

.offerte-groep-inhoud {
    display: block;
}

.offerte-groep--collapsed .offerte-groep-inhoud {
    display: none !important;
}

@media (max-width: 56rem) {
    .offerte-groep-kop {
        align-items: flex-start;
        flex-direction: column;
    }

    .offerte-groep-kop > .paneel-acties {
        width: 100%;
    }
}

@media (max-width: 36rem) {
    .offerte-groep-kop,
    .offerte-calculaties-kop {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .offerte-calculaties-lijst {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .offerte-calculatie-samenvatting {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.5rem;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-background: #102319;
        --page-accent: #193b28;
        --surface: #173224;
        --surface-raised: #1c3a29;
        --text: #edf7ef;
        --text-muted: #b7cab9;
        --border: #3d5e49;
        --primary: #5bc987;
        --primary-hover: #7bdb9f;
        --primary-text: #102319;
    --oppervlak: var(--surface);
    --oppervlak-subtiel: var(--surface-raised);
    --text-color: var(--text);
        --balkenplanning-dagmarkering: #67e8f9;
        --danger-surface: #472322;
        --danger-border: #98514c;
        --danger-text: #ffd1cd;
        --danger-action: #c94b43;
        --danger-action-hover: #df625a;
        --danger-action-text: #ffffff;
        --focus-ring: #ffca6b;
        --shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 30%);
    }
}

.kleurmodus--licht {
    color-scheme: light;
    --page-background: #f3f7f2;
    --page-accent: #dcebdd;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --text: #173224;
    --text-muted: #587060;
    --border: #cbd8cc;
    --primary: #176b43;
    --primary-hover: #105637;
    --primary-text: #ffffff;
    --oppervlak: var(--surface);
    --oppervlak-subtiel: var(--surface-raised);
    --text-color: var(--text);
    --balkenplanning-dagmarkering: #0e7490;
    --danger-surface: #fff1f0;
    --danger-border: #e6aaa5;
    --danger-text: #8c2d26;
    --danger-action: #a7352d;
    --danger-action-hover: #862a24;
    --danger-action-text: #ffffff;
    --focus-ring: #e69f32;
    --shadow: 0 1.25rem 3.5rem rgb(22 58 37 / 14%);
}

.kleurmodus--donker {
    color-scheme: dark;
    --page-background: #102319;
    --page-accent: #193b28;
    --surface: #173224;
    --surface-raised: #1c3a29;
    --text: #edf7ef;
    --text-muted: #b7cab9;
    --border: #3d5e49;
    --primary: #5bc987;
    --primary-hover: #7bdb9f;
    --primary-text: #102319;
    --oppervlak: var(--surface);
    --oppervlak-subtiel: var(--surface-raised);
    --text-color: var(--text);
    --balkenplanning-dagmarkering: #67e8f9;
    --danger-surface: #472322;
    --danger-border: #98514c;
    --danger-text: #ffd1cd;
    --danger-action: #c94b43;
    --danger-action-hover: #df625a;
    --danger-action-text: #ffffff;
    --focus-ring: #ffca6b;
    --shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 30%);
}

* {
    box-sizing: border-box;
}

.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.web-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: middle;
}

.web-icon--small {
    width: 1rem;
    height: 1rem;
}

.web-icon--large {
    width: 1.5rem;
    height: 1.5rem;
}

.web-icon--extra-large {
    width: 2rem;
    height: 2rem;
}

body {
    min-width: 20rem;
    min-height: 100vh;
    margin: 0;
    background:
        radial-gradient(circle at 5% 5%, var(--page-accent), transparent 32rem),
        var(--page-background);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    line-height: 1.5;
}

.login-body {
    --login-backdrop: rgb(3 16 11 / 78%);
    --login-card-surface: rgb(9 34 24 / 91%);
    --login-card-divider: rgb(174 201 184 / 18%);
    --login-input-border: rgb(174 201 184 / 24%);
    --login-input-surface: rgb(255 255 255 / 4%);
    --login-input-autofill-surface: #102d20;
    --login-presentation-overlay: rgb(6 28 19 / 92%);
    --login-presentation-overlay-end: rgb(6 28 19 / 42%);
    --login-presentation-text: #f0f7f2;
    --login-text: #f0f7f2;
    --login-text-muted: #a9beb2;
    --login-field-icon: #b7c9bf;
    --login-accent: #35c98d;
    --login-accent-hover: #42d79b;
    --login-accent-text: #06261a;
    color-scheme: dark;
    background:
        linear-gradient(var(--login-backdrop), var(--login-backdrop)),
        url('/assets/images/beheer-dashboard-hero.png') center / cover fixed;
}

.login-body.kleurmodus--licht {
    --login-backdrop: rgb(234 241 235 / 72%);
    --login-card-surface: rgb(255 255 255 / 94%);
    --login-card-divider: rgb(35 74 53 / 14%);
    --login-input-border: #cbd8ce;
    --login-input-surface: #f8fbf8;
    --login-input-autofill-surface: #f8fbf8;
    --login-presentation-overlay: rgb(238 246 239 / 90%);
    --login-presentation-overlay-end: rgb(238 246 239 / 28%);
    --login-presentation-text: #123f2c;
    --login-text: #173527;
    --login-text-muted: #64776b;
    --login-field-icon: #64776b;
    --login-accent: #2abd81;
    --login-accent-hover: #1fa76f;
    --login-accent-text: #08271b;
    color-scheme: light;
}

.login-page {
    display: grid;
    min-height: 100svh;
    place-items: center;
    padding: clamp(1.25rem, 4vw, 3.5rem);
}

.login-shell {
    width: min(100%, 60rem);
}

.login-card {
    display: grid;
    min-height: 38rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--login-card-surface);
    border: 1px solid var(--login-card-divider);
    border-radius: 1.25rem;
    box-shadow: 0 2rem 5rem rgb(0 0 0 / 35%);
    overflow: hidden;
    backdrop-filter: blur(1rem);
}

.login-presentation {
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 1rem;
    padding: clamp(2.5rem, 5vw, 3.75rem);
    background-image:
        linear-gradient(
            180deg,
            var(--login-presentation-overlay) 0%,
            var(--login-presentation-overlay) 44%,
            var(--login-presentation-overlay-end) 100%
        ),
        url('/assets/images/beheer-dashboard-hero.png');
    background-position: center, 72% center;
    background-size: cover;
    border-right: 1px solid var(--login-card-divider);
    color: var(--login-presentation-text);
}

.login-presentation .login-brand {
    margin: 0 0 1.25rem;
}

.login-presentation-title {
    max-width: 14ch;
    margin: 0;
    font-size: clamp(2.1rem, 3.5vw, 2.75rem);
    letter-spacing: -0.045em;
    line-height: 1.08;
}

.login-presentation-introduction {
    max-width: 24rem;
    margin: 0;
    color: color-mix(in srgb, var(--login-presentation-text) 72%, transparent);
    font-size: 1.0625rem;
}

.login-authentication {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2.25rem, 5vw, 3.75rem);
}

.login-card-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    margin: 0 0 clamp(2rem, 6vh, 3.75rem);
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    color: var(--login-accent);
    font-size: 0.875rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-brand .web-icon {
    width: 1rem;
    height: 1rem;
}

.login-title {
    margin: 0;
    color: var(--login-text);
    font-size: clamp(1.75rem, 3vw, 2.125rem);
    letter-spacing: -0.04em;
    line-height: 1.1;
}

.login-introduction {
    margin: 0.625rem 0 2rem;
    color: var(--login-text-muted);
}

.login-error {
    margin: 0 0 1.5rem;
    padding: 0.875rem 1rem;
    background: var(--danger-surface);
    border: 1px solid var(--danger-border);
    border-radius: var(--radius-control);
    color: var(--danger-text);
}

.login-form {
    display: grid;
    gap: 1.375rem;
}

.login-field {
    display: grid;
    gap: 0.5rem;
}

.login-label {
    color: var(--login-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.login-input-wrap {
    position: relative;
}

.login-input-icon {
    display: inline-flex;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 0.875rem;
    color: var(--login-field-icon);
    pointer-events: none;
    transform: translateY(-50%);
}

.login-input {
    width: 100%;
    min-height: 3.125rem;
    padding: 0.7rem 0.875rem 0.7rem 2.75rem;
    background: var(--login-input-surface);
    border: 1px solid var(--login-input-border);
    border-radius: 0.7rem;
    color: var(--login-text);
    font: inherit;
}

.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus,
.login-input:-webkit-autofill:active {
    border: 1px solid var(--login-input-border);
    caret-color: var(--login-text);
    -webkit-box-shadow: 0 0 0 1000px var(--login-input-autofill-surface) inset;
    -webkit-text-fill-color: var(--login-text);
}

.login-input:focus-visible,
.login-submit:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.login-input::placeholder {
    color: var(--login-text-muted);
    opacity: 1;
}

.login-submit {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.125rem;
    padding: 0.625rem 1rem;
    background: var(--login-accent);
    border: 1px solid var(--login-accent);
    border-radius: 0.7rem;
    color: var(--login-accent-text);
    cursor: pointer;
    font: inherit;
    font-weight: 400;
    box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 16%);
}

.login-submit:hover {
    background: var(--login-accent-hover);
    border-color: var(--login-accent-hover);
}

.login-forgot-password {
    margin: 0.25rem 0 0;
    color: var(--login-text-muted);
    font-size: 0.875rem;
    text-align: center;
}

@media (max-width: 52rem) {
    .login-shell {
        width: min(100%, 34rem);
    }

    .login-card {
        min-height: auto;
        grid-template-columns: 1fr;
    }

    .login-presentation {
        min-height: 13rem;
        padding: 1.75rem 2rem;
        background-position: center, 70% 55%;
    }

    .login-presentation .login-brand {
        margin-bottom: 0.5rem;
    }

    .login-presentation-title {
        max-width: 18ch;
        font-size: 2rem;
    }

    .login-presentation-introduction {
        font-size: 0.9375rem;
    }

    .login-authentication {
        padding: 1.75rem 2rem 2rem;
    }

    .login-card-header {
        margin-bottom: 1.75rem;
    }
}

@media (max-width: 23rem) {
    .login-page {
        padding: 0.75rem;
    }

    .login-card {
        border-radius: 1rem;
    }
}

.beheer-body {
    display: grid;
    grid-template-rows: auto auto;
    min-height: 100dvh;
    min-width: 20rem;
    overflow: visible;
    color-scheme: light;
    --page-background: #f7f8f8;
    --page-accent: #f1f3f4;
    --surface: #ffffff;
    --surface-raised: #fbfcfc;
    --text: #111b32;
    --text-muted: #48556b;
    --border: #e9dfcd;
    --primary: #176b43;
    --primary-hover: #105637;
    --primary-text: #ffffff;
    --oppervlak: var(--surface);
    --oppervlak-subtiel: var(--surface-raised);
    --text-color: var(--text);
    --shadow: 0 1.25rem 3.5rem rgb(30 37 45 / 12%);
    --beheer-icon: #cf9c39;
    --beheer-navigation-active-surface: #e4f3eb;
    --beheer-navigation-active-border: #a7dfc4;
    --beheer-navigation-hover-surface: #f2f8f4;
    --beheer-navigation-hover-border: #c9e8d7;
    --beheer-navigation-active-hover-surface: #dcefe4;
    --beheer-paneel-header-background:
        radial-gradient(ellipse 42% 190% at 18% -104%, #ffffff 0 62%, transparent 63%),
        linear-gradient(105deg, #dcefe4 0%, #edf7f0 42%, #ffffff 72%);
    --beheer-paneel-icon-surface: #ffffff;
    --beheer-paneel-icon-border: #c9dfd0;
    --beheer-dashboard-hero-image-opacity: 0.95;
    background: var(--page-background);
}

@media (prefers-color-scheme: dark) {
    .beheer-body:not(.kleurmodus--licht):not(.kleurmodus--donker) {
        color-scheme: dark;
        --page-background: #071b16;
        --page-accent: #0b2b21;
        --surface: #0c211a;
        --surface-raised: #112a22;
        --text: #effaf3;
        --text-muted: #a9c0b4;
        --border: #29483b;
        --primary: #21b96d;
        --primary-hover: #37d686;
        --primary-text: #ffffff;
    --oppervlak: var(--surface);
    --oppervlak-subtiel: var(--surface-raised);
    --text-color: var(--text);
        --focus-ring: #f0bf48;
        --shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 32%);
        --beheer-icon: #e5b337;
        --beheer-navigation-active-surface: #0d3728;
        --beheer-navigation-active-border: #218455;
        --beheer-navigation-hover-surface: #112d23;
        --beheer-navigation-hover-border: #35634d;
        --beheer-navigation-active-hover-surface: #10412f;
        --beheer-paneel-header-background:
            radial-gradient(ellipse 42% 190% at 18% -104%, #1d5740 0 62%, transparent 63%),
            linear-gradient(105deg, #102f24 0%, #0e281f 58%, #0c211a 100%);
        --beheer-paneel-icon-surface: #1a3c2e;
        --beheer-paneel-icon-border: #315f49;
        --beheer-dashboard-hero-image-opacity: 0.28;
    }
}

.beheer-body.kleurmodus--donker {
    color-scheme: dark;
    --page-background: #071b16;
    --page-accent: #0b2b21;
    --surface: #0c211a;
    --surface-raised: #112a22;
    --text: #effaf3;
    --text-muted: #a9c0b4;
    --border: #29483b;
    --primary: #21b96d;
    --primary-hover: #37d686;
    --primary-text: #ffffff;
    --oppervlak: var(--surface);
    --oppervlak-subtiel: var(--surface-raised);
    --text-color: var(--text);
    --focus-ring: #f0bf48;
    --shadow: 0 1.25rem 3.5rem rgb(0 0 0 / 32%);
    --beheer-icon: #e5b337;
    --beheer-navigation-active-surface: #0d3728;
    --beheer-navigation-active-border: #218455;
    --beheer-navigation-hover-surface: #112d23;
    --beheer-navigation-hover-border: #35634d;
    --beheer-navigation-active-hover-surface: #10412f;
    --beheer-paneel-header-background:
        radial-gradient(ellipse 42% 190% at 18% -104%, #1d5740 0 62%, transparent 63%),
        linear-gradient(105deg, #102f24 0%, #0e281f 58%, #0c211a 100%);
    --beheer-paneel-icon-surface: #1a3c2e;
    --beheer-paneel-icon-border: #315f49;
    --beheer-dashboard-hero-image-opacity: 0.28;
}

.beheer-header {
    grid-row: 1;
    display: flex;
    position: sticky;
    z-index: 20;
    top: 0;
    align-items: center;
    justify-content: space-between;
    min-height: 4.75rem;
    padding: 0.75rem clamp(1rem, 4vw, 3rem);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.beheer-brand-kicker,
.beheer-kicker {
    margin: 0;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.beheer-brand-title {
    margin: 0.125rem 0 0;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
}

.beheer-header-actions,
.beheer-profiel {
    display: flex;
    align-items: center;
}

.beheer-header-actions {
    gap: 1rem;
}

.beheer-mobile-navigation-toggle,
.beheer-mobile-logout {
    display: none;
}

.kleurmodus-toggle {
    display: grid;
    position: relative;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0;
    place-items: center;
}

.kleurmodus-toggle .web-icon {
    grid-area: 1 / 1;
}

.kleurmodus-toggle .web-icon--lichte-modus {
    display: none;
}

.kleurmodus-toggle:hover {
    background: var(--surface-raised);
    border-color: var(--primary);
    color: var(--primary);
}

.kleurmodus-toggle:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.kleurmodus--donker .kleurmodus-toggle .web-icon--donkere-modus {
    display: none;
}

.kleurmodus--donker .kleurmodus-toggle .web-icon--lichte-modus {
    display: inline-block;
}

@media (prefers-color-scheme: dark) {
    body:not(.kleurmodus--licht):not(.kleurmodus--donker) .kleurmodus-toggle .web-icon--donkere-modus {
        display: none;
    }

    body:not(.kleurmodus--licht):not(.kleurmodus--donker) .kleurmodus-toggle .web-icon--lichte-modus {
        display: inline-block;
    }
}

.beheer-profiel {
    position: relative;
}

.beheer-profiel-avatar {
    display: grid;
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    background: var(--primary);
    border-radius: 999px;
    color: var(--primary-text);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1;
    place-items: center;
}

.beheer-profiel-avatar::after {
    position: absolute;
    z-index: 1;
    top: calc(100% + 0.5rem);
    right: 0;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.5rem 0.625rem;
    background: var(--text);
    border-radius: var(--radius-control);
    color: var(--primary-text);
    content: attr(data-tooltip);
    font-size: 0.875rem;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
}

.beheer-profiel-avatar:hover::after {
    opacity: 1;
}

.beheer-logout {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    justify-content: center;
    min-height: 2rem;
    padding: 0.375rem 0.625rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
}

.beheer-logout .web-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.beheer-logout:hover {
    background: var(--surface-raised);
    border-color: var(--primary);
}

.beheer-logout:focus-visible,
.beheer-navigation-link:focus-visible,
.beheer-navigation-submenu-link:focus-visible,
.beheer-primary-action:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-layout {
    grid-row: 2;
    display: flex;
    min-height: calc(100dvh - 4.75rem);
    overflow: visible;
}

.beheer-toast {
    --beheer-toast-status: #21a744;
    display: flex;
    position: fixed;
    z-index: 30;
    top: 1.5rem;
    right: 1.5rem;
    width: min(26rem, calc(100vw - 3rem));
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 0.3125rem solid var(--beheer-toast-status);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow);
}

.beheer-toast-icon {
    display: grid;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    place-items: center;
    background: var(--beheer-toast-status);
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
}

.beheer-toast-icon .web-icon {
    width: 1.125rem;
    height: 1.125rem;
}

.beheer-toast--info {
    --beheer-toast-status: #2c6ecb;
}

.beheer-toast--warning {
    --beheer-toast-status: #d88719;
}

.beheer-toast--error {
    --beheer-toast-status: #b9352e;
}

.beheer-toast-title,
.beheer-toast-message {
    margin: 0;
}

.beheer-toast-close {
    width: 2rem;
    height: 2rem;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0;
}

.beheer-toast-close .web-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.beheer-toast-close:hover {
    color: var(--text);
}

.beheer-toast-close:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-toast-title {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 700;
}

.beheer-toast-message {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.beheer-navigation {
    box-sizing: border-box;
    display: grid;
    position: sticky;
    top: 4.75rem;
    align-self: flex-start;
    align-content: start;
    gap: 0.25rem;
    min-width: 4rem;
    padding: 1rem 0.375rem;
    background: var(--surface);
    border-right: 1px solid var(--border);
    flex: 0 0 auto;
    width: 17.5rem;
    height: calc(100dvh - 4.75rem);
    overflow: visible;
    transition: width 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.beheer-navigation-toggle {
    box-sizing: border-box;
    display: flex;
    position: absolute;
    z-index: 1;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0.75rem;
    width: auto;
    height: 4.125rem;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0 0.875rem;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-size: 0.875rem;
    text-align: left;
}

.beheer-navigation-toggle .web-icon {
    transform: rotate(0deg);
    transition: transform 180ms ease;
}

.beheer-navigation-toggle-label {
    font-weight: 400;
}

.beheer-layout--collapsed .beheer-navigation {
    width: 5.3125rem;
}

.beheer-layout--collapsed .beheer-navigation-link {
    box-sizing: border-box;
    display: grid;
    justify-self: center;
    place-items: center;
    width: 3.25rem;
    min-height: 3.25rem;
    height: 3.25rem;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    font-size: 0;
}

.beheer-layout--collapsed .beheer-navigation-link .web-icon {
    margin-left: 0;
    margin-right: 0;
}

.beheer-layout--collapsed .beheer-navigation-submenu {
    display: none;
}

.beheer-layout--collapsed .beheer-navigation-toggle .web-icon {
    transform: rotate(180deg);
}

.beheer-navigation-link {
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    margin-right: 1rem;
    overflow: hidden;
    padding: 0.625rem 0.8125rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    color: var(--text);
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 180ms ease;
}

.application-content {
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
    .beheer-layout,
    .beheer-navigation,
    .beheer-navigation-link,
    .beheer-navigation-link .web-icon {
        transition: none;
    }

    .beheer-navigation-toggle .web-icon {
        transition: none;
    }
}

.beheer-navigation-link .web-icon {
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    margin-left: 0.625rem;
    margin-right: 0.84375rem;
    color: var(--beheer-icon);
}

.beheer-navigation-link--active {
    background: var(--beheer-navigation-active-surface);
    border-color: var(--beheer-navigation-active-border);
    color: var(--primary);
}

.beheer-navigation-link:hover {
    background: var(--beheer-navigation-hover-surface);
    border-color: var(--beheer-navigation-hover-border);
}

.beheer-navigation-link--active:hover {
    background: var(--beheer-navigation-active-hover-surface);
}

.beheer-navigation-item--with-submenu {
    display: grid;
    gap: 0;
}

.beheer-navigation-submenu {
    display: grid;
    gap: 0.125rem;
    margin: 0.375rem 1rem 0.25rem 1.625rem;
    padding: 0.25rem 0;
    list-style: none;
}

.beheer-navigation-submenu[hidden] {
    display: none;
}

.beheer-navigation-submenu-link {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-decoration: none;
}

.beheer-navigation-submenu-link:hover {
    background: var(--beheer-navigation-hover-surface);
    color: var(--primary);
}

.beheer-navigation-submenu-link:hover .beheer-navigation-submenu-indicator {
    background: var(--primary);
}

.beheer-navigation-flyout {
    box-sizing: border-box;
    align-content: start;
    position: fixed;
    inset: auto;
    width: 16rem;
    max-width: calc(100vw - 7rem);
    height: max-content;
    max-height: calc(100dvh - 1rem);
    margin: 0;
    padding: 0;
    overflow: visible;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow);
    color: var(--text);
}

.beheer-navigation-flyout:popover-open {
    display: grid;
}

.beheer-navigation-flyout::before {
    content: '';
    position: absolute;
    top: var(--beheer-navigation-flyout-arrow-top);
    left: -0.4375rem;
    width: 0.75rem;
    height: 0.75rem;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
}

.beheer-navigation-flyout-content {
    box-sizing: border-box;
    display: grid;
    align-content: start;
    max-height: calc(100dvh - 1rem - 2px);
    padding: 0.5rem;
    overflow-y: auto;
    border-radius: inherit;
}

.beheer-navigation-flyout-title {
    display: block;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
}

.beheer-navigation-flyout-title:hover {
    background: var(--beheer-navigation-hover-surface);
    color: var(--primary);
}

.beheer-navigation-flyout-title:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
}

.beheer-layout--collapsed .beheer-navigation-flyout .beheer-navigation-submenu {
    display: grid;
    align-content: start;
    margin: 0;
    padding: 0.375rem 0 0;
    border-top: 1px solid var(--border);
}

.beheer-navigation-submenu-indicator {
    width: 0.5rem;
    height: 0.5rem;
    flex: 0 0 0.5rem;
    background: var(--border);
    border-radius: 999px;
}

.beheer-navigation > .beheer-navigation-item--with-submenu .beheer-navigation-submenu-indicator {
    transform: translateX(-0.25rem);
}

.beheer-navigation-submenu-link--active {
    color: var(--primary);
    font-weight: 650;
}

.beheer-navigation-submenu-link--active .beheer-navigation-submenu-indicator {
    background: var(--primary);
}

.application-content {
    box-sizing: border-box;
    display: grid;
    align-content: start;
    width: min(100%, 96rem);
    padding: clamp(1.5rem, 2.5vw, 2rem);
}

.beheer-title {
    max-width: 40rem;
    margin: 0.25rem 0 0;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.beheer-introduction {
    max-width: 40rem;
    margin: 1rem 0 2rem;
    color: var(--text-muted);
    font-size: 1.0625rem;
}

.beheer-card {
    display: grid;
    gap: 1rem;
    max-width: 32rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow);
}

.beheer-card-title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.beheer-card-text {
    margin: 0;
    color: var(--text-muted);
}

.beheer-overzicht-card {
    max-width: 100%;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

.datatable-empty-state,
.planningsbord-lege-toestand {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.5rem;
    min-height: 14rem;
    padding: 1.5rem 2.5rem 2rem;
    text-align: center;
}

.datatable-empty-state-icon,
.planningsbord-lege-toestand-icoon {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: 0.5rem;
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    border-radius: 999px;
    color: var(--text-muted);
    place-items: center;
}

.datatable-empty-state-title,
.planningsbord-lege-toestand-titel {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.015em;
}

.datatable-empty-state-description,
.planningsbord-lege-toestand-beschrijving {
    margin: 0;
    color: var(--text-muted);
}

.datatable {
    display: grid;
}

.datatable-werkbalk {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.datatable-zoek-control,
.datatable-filter-control {
    position: relative;
}

.datatable-zoek-control {
    flex: 1 1 20rem;
}

.datatable-zoek-input,
.datatable-filter-input {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem 0.375rem 2.5rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    font: 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}

.datatable-zoek-control > .web-icon,
.datatable-filter-control > .web-icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
    opacity: 0.8;
    pointer-events: none;
    transform: translateY(-50%);
}

.datatable-zoek-input:focus-visible,
.datatable-filter-input:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.datatable-filters,
.datatable-kolommen {
    position: relative;
}

.datatable-filters-knop,
.datatable-kolommen-knop,
.datatable-exporteren-knop {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 650;
    list-style: none;
}

.datatable-filters-knop::-webkit-details-marker,
.datatable-kolommen-knop::-webkit-details-marker {
    display: none;
}

.datatable-filter-aantal {
    display: grid;
    min-width: 1.25rem;
    min-height: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--page-accent);
    color: var(--primary);
    font-size: 0.75rem;
    place-items: center;
}

.datatable-filters-knop > .web-icon:last-child,
.datatable-kolommen-knop > .web-icon:last-child {
    transition: transform 120ms ease-in-out;
}

.datatable-filters[open] .datatable-filters-knop > .web-icon:last-child,
.datatable-kolommen[open] .datatable-kolommen-knop > .web-icon:last-child {
    transform: rotate(180deg);
}

.datatable-filters-paneel {
    position: absolute;
    z-index: 10;
    top: calc(100% + 0.5rem);
    right: 0;
    display: grid;
    width: min(20rem, calc(100vw - 3rem));
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: 0 0.75rem 1.5rem rgb(20 31 48 / 16%);
}

.datatable-kolommen-paneel {
    position: absolute;
    z-index: 10;
    top: calc(100% + 0.5rem);
    right: 0;
    display: grid;
    width: min(18rem, calc(100vw - 3rem));
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: 0 0.75rem 1.5rem rgb(20 31 48 / 16%);
}

.datatable-filters-titel {
    font-size: 0.875rem;
    font-weight: 750;
}

.datatable-filters-lijst {
    display: grid;
    gap: 0.75rem;
}

.datatable-kolommen-titel {
    font-size: 0.875rem;
    font-weight: 750;
}

.datatable-kolommen-lijst {
    display: grid;
    gap: 0.625rem;
}

.datatable-kolom-keuze {
    display: flex;
    min-height: 1.5rem;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.datatable-kolom-keuze input {
    accent-color: var(--primary);
}

.datatable-kolom-keuze input:disabled {
    cursor: not-allowed;
}

.datatable-kolom-verplicht {
    margin-left: auto;
    padding: 0.125rem 0.375rem;
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    color: var(--text-muted);
    font-size: 0.6875rem;
}

.datatable-filters-herstellen {
    justify-self: start;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
}

.datatable-kolommen-herstellen {
    justify-self: start;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
}

.datatable-filter-cell {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    background: var(--surface);
    vertical-align: top;
}

.datatable-filter {
    display: grid;
    flex: 1 1 16rem;
    gap: 0.375rem;
}

.datatable-filter-label {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 650;
}

.datatable-filter-label-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.datatable-filter-toelichting {
    position: relative;
    display: inline-grid;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--text-muted);
    cursor: help;
    place-items: center;
}

.datatable-filter-toelichting::after {
    position: absolute;
    z-index: 2;
    top: calc(100% + 0.5rem);
    left: 50%;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.5rem 0.625rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    content: attr(data-tooltip);
    font: 0.875rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    transform: translateX(-50%);
    transition: opacity 120ms ease-in-out;
}

.datatable-filter-toelichting:hover::after,
.datatable-filter-toelichting:focus-visible::after {
    opacity: 1;
}

.datatable-filter-toelichting:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.datatable-filter-control {
    position: relative;
}

.datatable-filter-input {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem 0.375rem 2.5rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    font: 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}

.datatable-filter-control > .web-icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
    opacity: 0.8;
    pointer-events: none;
    transform: translateY(-50%);
}

.datatable-filter-input:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.datatable-table-scroll {
    padding: 1rem 1.5rem 2rem;
    overflow-x: auto;
}

.datatable-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    table-layout: fixed;
    text-align: left;
}

.datatable-table th,
.datatable-table td {
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.datatable-table th {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 750;
}

.datatable-table td {
    font-size: 0.9375rem;
    vertical-align: middle;
}

.datatable-table tbody tr {
    height: 3rem;
}

.datatable-table tbody td {
    box-sizing: border-box;
    height: 3rem;
}

.datatable-table td a:not(.datatable-row-action) {
    color: var(--primary);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.datatable-table td a:not(.datatable-row-action):hover {
    color: var(--primary-hover);
}

.offerte-regels-table-scroll {
    overflow-x: auto;
}

.offerte-regels-table {
    width: 100%;
    min-width: 68rem;
    border-collapse: collapse;
    table-layout: fixed;
    text-align: left;
}

.offerte-regels-table th,
.offerte-regels-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.offerte-regels-table th {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--surface) 42%, transparent);
    font-size: 0.8125rem;
    font-weight: 400;
}

.offerte-regels-table td {
    height: 4.25rem;
    box-sizing: border-box;
    font-size: 0.875rem;
    vertical-align: middle;
}

.offerte-regels-table tbody tr:last-child td {
    border-bottom: 0;
}

.offerte-regels-table th:first-child,
.offerte-regels-table td:first-child {
    padding-left: 1.5rem;
}

.offerte-regels-table th:last-child,
.offerte-regels-table td:last-child {
    padding-right: 1.5rem;
}

.offerte-regels-table th:nth-child(1) {
    width: 22%;
}

.offerte-regels-table th:nth-child(2) {
    width: 12%;
}

.offerte-regels-table th:nth-child(3),
.offerte-regels-table th:nth-child(4),
.offerte-regels-table th:nth-child(6) {
    width: 8%;
}

.offerte-regels-table th:nth-child(5) {
    width: 11%;
}

.offerte-regels-table th:nth-child(5),
.offerte-regels-table td:nth-child(5),
.offerte-regels-table th:nth-child(6),
.offerte-regels-table td:nth-child(6),
.offerte-regels-table th:nth-child(7),
.offerte-regels-table td:nth-child(7) {
    text-align: right;
}

.offerte-regels-table th:nth-child(7) {
    width: 14%;
}

.offerte-regels-table th:nth-child(8) {
    width: 15%;
}

.offerte-regel-rij {
    transition: background-color 120ms ease;
}

.offerte-regel-rij:hover {
    background: color-mix(in srgb, var(--primary) 5%, transparent);
}

.offerte-regel-lege-rij {
    padding: 0.75rem 1.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
}

.offerte-regel-omschrijving {
    min-width: 0;
    font-weight: 400;
    white-space: normal;
    overflow-wrap: anywhere;
}

.offerte-regel-omschrijving-tekst {
    min-width: 0;
    overflow-wrap: anywhere;
}

.offerte-regel-herkomst {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.offerte-regel-herkomst--calculatie {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 15%, transparent);
}

.offerte-regel-herkomst--product {
    color: var(--text);
    background: color-mix(in srgb, var(--text-muted) 17%, transparent);
}

.offerte-regel-herkomst--vrij {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
}

.offerte-regel-acties-cel {
    position: relative;
}

.offerte-regel-acties {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
}

.offerte-regel-acties > .paneel-acties {
    flex: 0 0 auto;
    padding: 0;
}

.offerte-regel-acties > .paneel-acties::after {
    display: none;
}

.offerte-regel-acties .paneel-acties-primair-menu-knop {
    width: 2rem;
    min-height: 2rem;
    padding: 0.375rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.offerte-regel-acties .paneel-acties-primair-menu-knop:hover,
.offerte-regel-acties .paneel-acties-menu[open] .paneel-acties-primair-menu-knop {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border-color: var(--primary);
    color: var(--primary);
}

.offerte-regel-acties .paneel-acties-primair-menu-knop > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.offerte-regel-acties .paneel-acties-primair-menu-knop > .web-icon:last-child {
    display: none;
}
.offerte-regel-actie-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.offerte-regel-actie:disabled,
.offerte-regel-actie--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-muted);
}

.offerte-regel-actie {
    display: inline-grid;
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: var(--radius-control);
    cursor: pointer;
    place-items: center;
}

.offerte-regel-actie--secundair {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--primary);
}

.offerte-regel-actie--secundair:hover {
    background: var(--page-accent);
    border-color: var(--primary);
}

.offerte-regel-actie--primair-destructief {
    background: var(--danger-action);
    border: 1px solid var(--danger-action);
    color: var(--danger-action-text);
}

.offerte-regel-actie--primair-destructief:hover {
    background: var(--danger-action-hover);
    border-color: var(--danger-action-hover);
}

.offerte-regel-actie:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.datatable-row-action,
.icoon-actie {
    display: inline-flex;
    width: auto;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border: 0;
    border-radius: var(--radius-control);
    color: var(--primary);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

.datatable-action-cell {
    width: 12rem;
    text-align: right;
}

.datatable-row-actions,
.icoon-acties {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.datatable-action-cell--portaal {
    width: 12rem;
}

.datatable-action-cell--beheeractie {
    width: 10rem;
}

.datatable-action-cell--offerte {
    width: 12rem;
}

.datatable-action-cell--bekijken {
    width: 12rem;
}

.datatable-action-cell--multiple {
    width: 19rem;
}

.verkoop-lead-paneel .datatable-action-cell--multiple {
    width: 8.5rem;
}

.datatable-row-action:hover,
.icoon-actie:hover {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    color: var(--primary);
}

.datatable-row-action:focus-visible,
.icoon-actie:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.datatable-row-action--bewerken,
.icoon-actie--bewerken,
.datatable-row-action--downloaden,
.icoon-actie--downloaden,
.datatable-row-action--verwijderen,
.icoon-actie--verwijderen,
.datatable-row-action--omhoog,
.datatable-row-action--omlaag {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
}

.datatable-row-action--bewerken,
.icoon-actie--bewerken,
.datatable-row-action--downloaden,
.icoon-actie--downloaden {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--primary);
}

.datatable-row-action--bewerken:hover,
.icoon-actie--bewerken:hover,
.datatable-row-action--downloaden:hover,
.icoon-actie--downloaden:hover {
    background: var(--page-accent);
    border-color: var(--primary);
    color: var(--primary);
}

.datatable-row-action--omhoog,
.datatable-row-action--omlaag {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--primary);
}

.datatable-row-action--omhoog:hover,
.datatable-row-action--omlaag:hover {
    background: var(--page-accent);
    border-color: var(--primary);
    color: var(--primary);
}

.datatable-row-action--verwijderen,
.icoon-actie--verwijderen {
    background: var(--danger-action);
    border: 1px solid var(--danger-action);
    color: var(--danger-action-text);
}

.datatable-row-action--verwijderen:hover,
.icoon-actie--verwijderen:hover {
    background: var(--danger-action-hover);
    border-color: var(--danger-action-hover);
    color: var(--danger-action-text);
}

.iframe-modal {
    --iframe-modal-width: 40rem;
    --iframe-modal-height: 33rem;

    width: min(calc(100dvw - 2rem), var(--iframe-modal-width));
    max-height: calc(100dvh - 4rem);
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 4rem rgb(20 31 48 / 24%);
    color: var(--text);
    overflow: hidden;
}

.iframe-modal--compact {
    --iframe-modal-width: 32rem;
    --iframe-modal-height: 24rem;
}

.iframe-modal--standaard {
    --iframe-modal-width: 40rem;
    --iframe-modal-height: 33rem;
}

.iframe-modal--groot {
    --iframe-modal-width: 52rem;
    --iframe-modal-height: 44rem;
}

.iframe-modal--extra-groot {
    --iframe-modal-width: 64rem;
    --iframe-modal-height: 52rem;
}

.iframe-modal--zijpaneel {
    --iframe-modal-width: 32rem;
    --iframe-modal-height: 100dvh;

    width: min(100dvw, var(--iframe-modal-width));
    max-height: 100dvh;
    height: 100dvh;
    margin: 0 0 0 auto;
    border-width: 0 0 0 1px;
    border-radius: 0;
}

.iframe-modal--zijpaneel .iframe-modal-frame {
    height: 100dvh;
}

.iframe-modal::backdrop {
    background: rgb(26 39 58 / 48%);
    backdrop-filter: blur(0.25rem);
}

.iframe-modal-header {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: 0.5rem 1rem 0.5rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.iframe-modal-download {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: auto;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.planning-zijpaneel-keuze {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.planning-zijpaneel-keuze p {
    margin: 0;
    padding-left: 2.8rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.balkenplanning-herplannen-acties {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.balkenplanning-herplannen-acties button {
    font-weight: 400;
}

.iframe-modal-close {
    display: grid;
    position: static;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    padding: 0;
    margin-left: 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
    place-items: center;
}

.iframe-modal > .iframe-modal-close {
    position: absolute;
    z-index: 1;
    top: 0.5rem;
    right: 0.75rem;
    background: var(--surface);
}

.iframe-modal-close:hover {
    background: var(--surface-raised);
}

.iframe-modal-close:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.iframe-modal-frame {
    display: block;
    width: 100%;
    height: min(var(--iframe-modal-height), calc(100dvh - 7.5rem));
    border: 0;
}

.iframe-modal-form-body {
    height: 100vh;
    min-height: 0;
    background: var(--surface);
    overflow: hidden;
}

.iframe-modal-form {
    display: grid;
    height: 100vh;
    min-height: 0;
    grid-template-rows: auto 1fr auto;
}

.iframe-modal-form-header {
    padding: 1.5rem 5rem 1.5rem 2rem;
    border-bottom: 1px solid var(--border);
}

.iframe-modal-form-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.iframe-modal-form-header-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.iframe-modal-form-title {
    margin: 0;
    font-size: 1.25rem;
}

.iframe-modal-form-description {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.iframe-modal-form-content {
    display: grid;
    align-content: start;
    min-height: 0;
    padding: 1.75rem 2rem;
    gap: 1.5rem;
    overflow-y: auto;
}

.iframe-modal-form-content input[type='checkbox'] {
    accent-color: var(--primary);
    cursor: pointer;
}

.werkpatroon-werkvensters {
    display: grid;
    gap: 0;
}

.werkpatroon-werkdag {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) 2.75rem;
    grid-template-areas: "kop vensters toevoegen";
    align-items: start;
    column-gap: 1.25rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--border);
}

.werkpatroon-werkdag:first-child {
    padding-top: 0;
}

.werkpatroon-werkdag:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.werkpatroon-werkdag-kop {
    display: grid;
    grid-area: kop;
    gap: 0.25rem;
    padding-top: 0.375rem;
}

.werkpatroon-werkdag-titel,
.werkpatroon-werkdag-capaciteit {
    margin: 0;
}

.werkpatroon-werkdag-titel {
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
}

.werkpatroon-werkdag-capaciteit {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.werkpatroon-werkdag [data-werkvensters-lijst] {
    display: grid;
    grid-area: vensters;
    gap: 0.5rem;
}

.werkpatroon-werkvenster {
    display: grid;
    grid-template-columns: minmax(7.5rem, 1fr) 1rem minmax(7.5rem, 1fr) 2.5rem;
    align-items: center;
    gap: 0.75rem;
}

.werkpatroon-werkvenster .beheer-form-input {
    min-width: 0;
}

.werkpatroon-werkvenster-scheiding {
    color: var(--text-muted);
    text-align: center;
}

.werkpatroon-werkdag-toevoegen,
.werkpatroon-werkvenster-verwijderen {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    place-items: center;
}

.werkpatroon-werkdag-toevoegen {
    grid-area: toevoegen;
}

.werkpatroon-werkdag-toevoegen:hover,
.werkpatroon-werkvenster-verwijderen:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.werkpatroon-werkdag-toevoegen:focus-visible,
.werkpatroon-werkvenster-verwijderen:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 40rem) {
    .werkpatroon-werkdag {
        grid-template-columns: minmax(0, 1fr) 2.5rem;
        grid-template-areas:
            "kop toevoegen"
            "vensters vensters";
        row-gap: 0.75rem;
    }
}

@media (max-width: 30rem) {
    .werkpatroon-werkvenster {
        grid-template-columns: minmax(0, 1fr) 0.75rem minmax(0, 1fr) 2.25rem;
        gap: 0.375rem;
    }
}

.iframe-modal-form-information {
    display: grid;
    gap: 0.75rem;
}

.iframe-modal-form-information-title {
    margin: 0;
    font-size: 1rem;
}

.iframe-modal-form-information-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.125rem;
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 12%, var(--border));
    border-radius: 0.75rem;
}

.iframe-modal-form-information-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.iframe-modal-form-information-copy {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.iframe-modal-form-information-summary,
.iframe-modal-form-information-detail {
    margin: 0;
    line-height: 1.5;
}

.iframe-modal-form-information-summary {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.iframe-modal-form-information-detail {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.iframe-modal-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.iframe-modal-form-footer .iframe-modal-form-action {
    min-height: 2.5rem;
    padding: 0.5rem 1rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.datatable-table tbody tr:nth-child(even) {
    background: var(--surface-raised);
}

.datatable-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.datatable-table tbody tr.datatable-row--actionable {
    cursor: pointer;
}

.datatable-table tbody tr[hidden] {
    display: none;
}

.datatable-paginering {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
}

.datatable-pagina-lijst {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.datatable-paginering-knop,
.datatable-pagina-knop {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: 400 0.875rem/1 Inter, ui-sans-serif, system-ui, sans-serif;
    place-items: center;
}

.datatable-paginering-knop:hover:not(:disabled),
.datatable-pagina-knop:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.datatable-paginering-knop:disabled,
.datatable-pagina-knop:disabled {
    cursor: default;
    opacity: 0.45;
}

.datatable-paginering-knop:focus-visible,
.datatable-pagina-knop:focus-visible,
.datatable-pagina-grootte:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.datatable-pagina-weglating {
    display: grid;
    width: 1.5rem;
    height: 2.25rem;
    color: var(--text-muted);
    place-items: center;
}

.datatable-pagina-informatie {
    margin: 0 auto 0 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.datatable-pagina-grootte-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.datatable-pagina-grootte {
    min-height: 2.25rem;
    padding: 0.375rem 2rem 0.375rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    color: var(--text);
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}

.beheer-form {
    display: grid;
    grid-template-rows: auto auto auto;
    overflow: visible;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 1rem rgb(30 37 45 / 4%);
}

.formulier-kop {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0.75rem 0.75rem 0 0;
}

.formulier-kop-icoon {
    width: 2.25rem;
    height: 2.25rem;
}

.formulier-kop-titel {
    margin: 0;
    font-size: 1.125rem;
    letter-spacing: -0.015em;
}

.verkoop-overzicht-panelen {
    display: grid;
    gap: 2rem;
}

.balkenplanning-pagina {
    display: grid;
    gap: 2rem;
}

.balkenplanning-werkbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.balkenplanning-weergaven {
    display: inline-flex;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.balkenplanning-weergaven span {
    padding: 0.625rem 1rem;
    border-right: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.balkenplanning-weergaven span:last-child {
    border-right: 0;
}

.balkenplanning-weergaven span:first-child {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary);
    font-weight: 650;
}

.balkenplanning-periode {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.balkenplanning-periode span {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
}

.balkenplanning-periode p {
    margin: 0;
    font-weight: 650;
}

.toggle-switch {
    display: inline-flex;
    min-height: 2.5rem;
    align-items: center;
    gap: 0.55rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: pointer;
}

.toggle-switch--prominent {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.toggle-switch input {
    position: relative;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 1.25rem;
    margin: 0;
    appearance: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 32%, var(--surface));
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.planning-kalender-markering {
    display: inline-flex;
    max-width: 100%;
    overflow: hidden;
    align-items: center;
    padding: 0.1rem 0.35rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.planning-kalender-markering--feestdag {
    background: color-mix(in srgb, var(--primary) 15%, var(--surface));
    color: var(--primary);
}

.planning-kalender-markering--bedrijfssluiting {
    background: color-mix(in srgb, var(--warning, #d97706) 15%, var(--surface));
    color: var(--warning, #b45309);
}

.planning-kalender-markering {
    position: relative;
    cursor: help;
}

.planning-kalender-markering::after {
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 0.35rem);
    left: 50%;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
    color: var(--text);
    content: attr(data-tooltip);
    font: 400 0.75rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 120ms ease-in-out;
}

.planning-kalender-markering:hover::after,
.planning-kalender-markering:focus-visible::after {
    opacity: 1;
}

.planning-kalender-dag--feestdag {
    background: color-mix(in srgb, #d97706 18%, var(--surface-raised));
}

.planning-kalender-dag--bedrijfssluiting {
    background: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, #2563eb 16%, var(--surface-raised)),
        color-mix(in srgb, #2563eb 16%, var(--surface-raised)) 0.35rem,
        color-mix(in srgb, #2563eb 24%, var(--surface-raised)) 0.35rem,
        color-mix(in srgb, #2563eb 24%, var(--surface-raised)) 0.7rem
    );
}

.planning-pagina--feestdagen-verborgen [data-planning-kalender-type="feestdag"] {
    display: none;
}

.toggle-switch input::before {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
    content: '';
    transition: transform 140ms ease;
}

.toggle-switch input:checked {
    border-color: var(--primary);
    background: var(--primary);
}

.toggle-switch input:checked::before {
    transform: translateX(1rem);
}

.toggle-switch input:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.balkenplanning-tijdlijn {
    --balkenplanning-dagbreedte: 1.25rem;
    --balkenplanning-aantal-dagen: 56;
    --balkenplanning-aantal-weken: 8;
    --balkenplanning-dagen-per-week: 7;
    --balkenplanning-kalenderbreedte: calc(var(--balkenplanning-aantal-weken) * var(--balkenplanning-dagen-per-week) * var(--balkenplanning-dagbreedte));

    display: grid;
    gap: 0;
    padding: 0;
}

.balkenplanning-tijdlijn > .balkenplanning-footer {
    box-sizing: border-box;
    min-height: 3.5rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.balkenplanning-scrollgebied {
    min-width: 0;
    overflow-x: auto;
    cursor: grab;
    touch-action: pan-y;
}

.balkenplanning-scrollgebied--wordt-versleept {
    cursor: grabbing;
    user-select: none;
}

.balkenplanning-bord {
    width: 90rem;
    min-width: 90rem;
    overflow: visible;
}

.balkenplanning-weekkop,
.balkenplanning-blok-kop,
.balkenplanning-regel {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
}

.balkenplanning-weekkop {
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
}

.balkenplanning-weekkop > span {
    display: flex;
    align-items: end;
    padding: 1rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 650;
}

.balkenplanning-weekkop > span,
.balkenplanning-blok-informatie,
.balkenplanning-regel-informatie,
.balkenplanning-nieuwe-regel-knop,
.balkenplanning-nieuw-blok-knop {
    position: sticky;
    left: 0;
    z-index: 11;
}

.balkenplanning-weekkop > span,
.balkenplanning-blok-informatie {
    background: var(--surface-raised);
}

.balkenplanning-regel-informatie,
.balkenplanning-nieuwe-regel-knop,
.balkenplanning-nieuw-blok-knop {
    background: var(--surface);
}

.balkenplanning-kalenderkop {
    min-width: var(--balkenplanning-kalenderbreedte);
}

.balkenplanning-weken {
    display: grid;
    grid-template-columns: repeat(var(--balkenplanning-aantal-weken), calc(var(--balkenplanning-dagen-per-week) * var(--balkenplanning-dagbreedte)));
    width: var(--balkenplanning-kalenderbreedte);
    border-bottom: 1px solid var(--border);
}

.balkenplanning-week {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.5rem 0.625rem;
    border-left: 1px solid var(--border);
    text-align: center;
}

.balkenplanning-week span:first-child {
    font-size: 0.75rem;
    font-weight: 650;
}

.balkenplanning-week span:last-child {
    color: var(--text-muted);
    font-size: 0.6875rem;
}

.balkenplanning-week--zebra,
.balkenplanning-dagkop--zebra,
.balkenplanning-blok-dag--zebra,
.balkenplanning-rasterdag--zebra {
    background: color-mix(in srgb, var(--primary) 4%, transparent);
}

.balkenplanning-dagkoppen,
.balkenplanning-regel-balken {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
}

.balkenplanning-dagkop {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 1.75rem;
    border-left: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
    color: var(--text-muted);
    font-size: 0.625rem;
    place-items: center;
}

.balkenplanning-dagkop.planning-kalender-dag--feestdag {
    background: color-mix(in srgb, #d97706 18%, var(--surface-raised));
}

.balkenplanning-dagkop.planning-kalender-dag--bedrijfssluiting {
    background: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, #2563eb 16%, var(--surface-raised)),
        color-mix(in srgb, #2563eb 16%, var(--surface-raised)) 0.35rem,
        color-mix(in srgb, #2563eb 24%, var(--surface-raised)) 0.35rem,
        color-mix(in srgb, #2563eb 24%, var(--surface-raised)) 0.7rem
    );
}

.balkenplanning-dagkop .planning-kalender-markering {
    max-width: 100%;
    align-self: end;
    margin-bottom: -0.1rem;
    padding: 0.05rem 0.15rem;
    font-size: 0.45rem;
}

.balkenplanning-dagkop--vandaag {
    z-index: 13;
}

.balkenplanning-dagkop--met-tooltip:hover,
.balkenplanning-dagkop--met-tooltip:focus-visible {
    z-index: 15;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}

.balkenplanning-dagkop--met-tooltip::after {
    position: absolute;
    z-index: 15;
    bottom: calc(100% + 0.35rem);
    left: 50%;
    width: max-content;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
    color: var(--text);
    content: attr(data-tooltip);
    font: 400 0.75rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity 120ms ease-in-out;
}

.balkenplanning-dagkop--met-tooltip:first-child::after {
    left: 0;
    transform: none;
}

.balkenplanning-dagkop--met-tooltip:last-child::after {
    right: 0;
    left: auto;
    transform: none;
}

.balkenplanning-dagkop--met-tooltip:hover::after,
.balkenplanning-dagkop--met-tooltip:focus-visible::after {
    opacity: 1;
}

.balkenplanning-vandaag-label {
    position: absolute;
    z-index: 12;
    top: calc(100% - 3px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.2rem 0.45rem;
    border-radius: 0.25rem;
    background: var(--primary);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 650;
    white-space: nowrap;
}

.balkenplanning-vandaag-label::after {
    position: absolute;
    top: 100%;
    left: 50%;
    border-top: 0.35rem solid var(--primary);
    border-right: 0.3rem solid transparent;
    border-left: 0.3rem solid transparent;
    content: '';
    transform: translateX(-50%);
}

.balkenplanning-blokken {
    position: relative;
}

.balkenplanning-vandaag-lijn {
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 20rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
    min-width: var(--balkenplanning-kalenderbreedte);
    pointer-events: none;
}

.balkenplanning-vandaag-markering {
    position: relative;
}

.balkenplanning-vandaag-markering::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px dashed var(--primary);
    content: '';
    transform: translateX(-0.5px);
}

.balkenplanning-blok + .balkenplanning-blok {
    border-top: 1px solid var(--border);
}

.balkenplanning-blok-kop {
    height: 3.5rem;
    background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
    overflow: visible;
}

.balkenplanning-blok-informatie {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 0.1rem 0.75rem;
    padding: 0.4rem 1.25rem 0.4rem 2.75rem;
}

.balkenplanning-blok-inklapknop {
    position: absolute;
    top: calc(50% - 0.5rem);
    left: 1.25rem;
    display: grid;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    place-items: center;
}

.balkenplanning-blok-inklapknop svg {
    width: 1rem;
    height: 1rem;
}

.balkenplanning-blok--interactief .balkenplanning-blok-inklapknop svg {
    transition: transform 150ms ease;
}

.balkenplanning-blok-inklapknop:hover {
    color: var(--text);
}

.balkenplanning-blok-inklapknop:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.balkenplanning-blok--ingeklapt .balkenplanning-blok-inklapknop svg {
    transform: rotate(-90deg);
}

.balkenplanning-blok-informatie h2 {
    width: 100%;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.2;
}

.balkenplanning-blok-informatie p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.2;
}

.balkenplanning-blok-kalender {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
    min-width: var(--balkenplanning-kalenderbreedte);
}

.balkenplanning-blok-dag {
    border-left: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.balkenplanning-regel {
    height: 3.5rem;
    min-height: 3.5rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.balkenplanning-regel-informatie {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.05rem 0;
    padding: 0.35rem 1.25rem 0.35rem 2.75rem;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.balkenplanning-regel-informatie:hover {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.balkenplanning-regel-informatie:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
}

.balkenplanning-regel-titel {
    display: -webkit-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.2;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    white-space: normal;
}

.balkenplanning-regel-toegewezen-aan {
    width: calc(100% - 3.5rem);
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.6875rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.balkenplanning-regel-toegewezen-aan + .balkenplanning-regel-uren {
    margin-top: 0;
    align-self: center;
    transform: translateY(-0.9rem);
}

.balkenplanning-regel-titel + .balkenplanning-regel-uren {
    margin-top: 0;
    margin-left: auto;
    align-self: center;
    transform: translateY(-0.9rem);
}

.balkenplanning-regel-meta {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.6875rem;
    white-space: nowrap;
}

.balkenplanning-regel-meta + .balkenplanning-regel-meta::before {
    margin: 0 0.4rem;
    color: var(--text-muted);
    content: '•';
}

.balkenplanning-regel-uren {
    position: relative;
    display: inline-flex;
    width: 3.5rem;
    margin-top: 3px;
    flex: 0 0 3.5rem;
}

.balkenplanning-regel-uren-balk {
    position: relative;
    display: block;
    width: 100%;
    height: 0.3125rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--balkenplanning-regel-uren-kleur) 22%, transparent);
}

.balkenplanning-regel-uren-balk::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: max(0.625rem, var(--balkenplanning-regel-uren-percentage, 0%));
    border-radius: inherit;
    background: var(--balkenplanning-regel-uren-kleur);
    content: '';
}

.balkenplanning-regel-uren::before {
    position: absolute;
    inset: -0.5rem;
    content: '';
}

.balkenplanning-regel-uren::after {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 0.5rem);
    left: 0;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    color: var(--text);
    content: attr(data-tooltip);
    font: 400 0.75rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
}

.balkenplanning-regel-uren:hover::after,
.balkenplanning-vaste-regel:focus-visible .balkenplanning-regel-uren::after {
    opacity: 1;
}

.balkenplanning-regel-uren--leeg {
    --balkenplanning-regel-uren-kleur: var(--danger-action);
}

.balkenplanning-regel-uren--deels-ingepland {
    --balkenplanning-regel-uren-kleur: #d78b2c;
}

.balkenplanning-regel-uren--volledig-ingepland {
    --balkenplanning-regel-uren-kleur: var(--primary);
}

.weekplanning-pagina {
    display: grid;
    gap: 1.5rem;
}

.weekplanning-melding[hidden] {
    display: none;
}

.balkenplanning-melding[hidden] {
    display: none;
}

.balkenplanning-melding {
    grid-column: 1 / -1;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 30;
}

.weekplanning-werkbalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
}

.weekplanning-weeknavigatie {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 0.75rem;
    height: 2.5rem;
}

.weekplanning-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.weekplanning-vandaag-knop,
.weekplanning-week-knop,
.weekplanning-koppel-filter,
.weekplanning-medewerker-zoekveld {
    min-height: 2.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text);
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}

.weekplanning-vandaag-knop,
.weekplanning-week-knop {
    display: inline-flex;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem;
    text-decoration: none;
}

.weekplanning-vandaag-knop {
    border-color: var(--primary);
    color: var(--primary);
}

.weekplanning-weekbediening {
    display: flex;
    height: 2.5rem;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
}

.weekplanning-week-knop {
    width: 2.5rem;
    height: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.weekplanning-week-knop:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.weekplanning-week-knop:focus-visible {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--focus-ring);
    outline-offset: -3px;
}

.weekplanning-week-label {
    display: flex;
    min-width: 0;
    max-width: clamp(8rem, 28vw, 18rem);
    height: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    overflow: hidden;
    padding: 0 0.75rem;
    border-right: 1px solid var(--border);
    border-left: 1px solid var(--border);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.weekplanning-week-label > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.weekplanning-koppel-filter {
    min-width: 11rem;
    padding: 0.5rem 0.75rem;
}

.weekplanning-medewerker-zoekveld-wrapper {
    position: relative;
    flex: 0 0 13rem;
}

.weekplanning-medewerker-zoekveld-wrapper > .web-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.weekplanning-medewerker-zoekveld {
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 2.25rem;
}

.weekplanning-medewerker-zoekfilter-wissen {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transform: translateY(-50%);
}

.weekplanning-medewerker-zoekfilter-wissen[hidden] {
    display: none;
}

.weekplanning-medewerker-zoekfilter-wissen:hover {
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text);
}

.weekplanning-medewerker-zoekfilter-wissen:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.weekplanning-rooster {
    display: grid;
    grid-template-columns: 18rem minmax(0, 1fr);
    overflow-x: auto;
}

.weekplanning-uitvoerder-kop,
.weekplanning-dag-kop {
    display: flex;
    min-height: calc(3rem + 10px);
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-raised);
    font-size: 0.8125rem;
    font-weight: 650;
}

.weekplanning-dagcel.weekplanning-dagcel--feestdag {
    background: color-mix(in srgb, #d97706 10%, var(--surface));
}

.weekplanning-dagcel.weekplanning-dagcel--bedrijfssluiting {
    background: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, #2563eb 8%, var(--surface)),
        color-mix(in srgb, #2563eb 8%, var(--surface)) 0.35rem,
        color-mix(in srgb, #2563eb 14%, var(--surface)) 0.35rem,
        color-mix(in srgb, #2563eb 14%, var(--surface)) 0.7rem
    );
}

.weekplanning-dagkoppen,
.weekplanning-dagcellen {
    display: grid;
    grid-template-columns: repeat(7, minmax(8.5rem, 1fr));
    min-width: 59.5rem;
}

.weekplanning-dag-kop[hidden],
.weekplanning-dagcel[hidden] {
    display: none;
}

.weekplanning-uitvoerder-kop,
.weekplanning-uitvoerder {
    position: sticky;
    left: 0;
    z-index: 2;
}

.weekplanning-uitvoerder-kop {
    z-index: 3;
}

.weekplanning-dag-kop {
    justify-content: center;
    border-left: 1px solid var(--border);
}

.weekplanning-rij {
    display: contents;
}

.weekplanning-rij[hidden] {
    display: none;
}

.weekplanning-uitvoerder {
    display: flex;
    min-height: 4.5rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.weekplanning-uitvoerder-avatar {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 22%, var(--surface));
    color: var(--primary);
    font-size: 0.8125rem;
    font-weight: 650;
}

.weekplanning-uitvoerder-avatar--demo-1,
.weekplanning-uitvoerder-avatar--demo-2,
.weekplanning-uitvoerder-avatar--demo-3,
.weekplanning-uitvoerder-avatar--demo-4,
.weekplanning-uitvoerder-avatar--demo-5,
.weekplanning-uitvoerder-avatar--demo-6,
.weekplanning-uitvoerder-avatar--demo-7,
.weekplanning-uitvoerder-avatar--demo-8 {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: transparent;
}

.weekplanning-uitvoerder-avatar--demo-1 { background-image: url('/assets/images/demo-medewerkers/01.png'); }
.weekplanning-uitvoerder-avatar--demo-2 { background-image: url('/assets/images/demo-medewerkers/02.png'); }
.weekplanning-uitvoerder-avatar--demo-3 { background-image: url('/assets/images/demo-medewerkers/03.png'); }
.weekplanning-uitvoerder-avatar--demo-4 { background-image: url('/assets/images/demo-medewerkers/04.png'); }
.weekplanning-uitvoerder-avatar--demo-5 { background-image: url('/assets/images/demo-medewerkers/05.png'); }
.weekplanning-uitvoerder-avatar--demo-6 { background-image: url('/assets/images/demo-medewerkers/06.png'); }
.weekplanning-uitvoerder-avatar--demo-7 { background-image: url('/assets/images/demo-medewerkers/07.png'); }
.weekplanning-uitvoerder-avatar--demo-8 { background-image: url('/assets/images/demo-medewerkers/08.png'); }

.weekplanning-uitvoerder-informatie {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.weekplanning-uitvoerder-informatie > span:first-child {
    font-size: 0.875rem;
    font-weight: 600;
}

.weekplanning-uitvoerder-koppelleden {
    position: relative;
    display: flex;
    max-width: 9rem;
    align-items: baseline;
    gap: 0.25rem;
    margin-top: -0.125rem;
    color: var(--text-muted);
}

.weekplanning-uitvoerder-koppel-label {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 400;
}

.weekplanning-uitvoerder-koppel-namen {
    min-width: 0;
    flex: 1 1 auto;
    font-size: 0.6875rem;
}

.weekplanning-uitvoerder-koppelleden > span:last-child {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weekplanning-uitvoerder-koppelleden::after {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 0.5rem);
    left: 0;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    color: var(--text);
    content: attr(data-tooltip);
    font: 400 0.75rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
}

.weekplanning-uitvoerder-koppelleden:hover::after {
    opacity: 1;
}

.weekplanning-uitvoerder-uren {
    position: relative;
    display: inline-flex;
    width: 3.5rem;
    margin-top: 3px;
    flex: 0 0 3.5rem;
}

.weekplanning-uitvoerder-uren-balk {
    position: relative;
    display: block;
    width: 100%;
    height: 0.3125rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--weekplanning-uitvoerder-uren-kleur) 22%, transparent);
}

.weekplanning-uitvoerder-uren-balk::after {
    position: absolute;
    inset: 0 auto 0 0;
    width: max(0.625rem, var(--weekplanning-uitvoerder-uren-percentage, 0%));
    border-radius: inherit;
    background: var(--weekplanning-uitvoerder-uren-kleur);
    content: '';
}

.weekplanning-uitvoerder-uren::before {
    position: absolute;
    inset: -0.5rem;
    content: '';
}

.weekplanning-uitvoerder-uren::after {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 0.5rem);
    left: 0;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    color: var(--text);
    content: attr(data-tooltip);
    font: 400 0.75rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
}

.weekplanning-uitvoerder-uren:hover::after {
    opacity: 1;
}

.weekplanning-uitvoerder-uren--leeg {
    --weekplanning-uitvoerder-uren-kleur: var(--danger-action);
}

.weekplanning-uitvoerder-uren--deels-ingepland {
    --weekplanning-uitvoerder-uren-kleur: #d78b2c;
}

.weekplanning-uitvoerder-uren--volledig-ingepland {
    --weekplanning-uitvoerder-uren-kleur: var(--primary);
}

.weekplanning-dagcel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 4.5rem;
    border-bottom: 1px solid var(--border);
    border-left: 1px solid var(--border);
    background: var(--surface);
}

.weekplanning-dagcel--geen-dienstverband {
    background: repeating-linear-gradient(-45deg, var(--surface), var(--surface) 0.35rem, color-mix(in srgb, var(--text-muted) 7%, var(--surface)) 0.35rem, color-mix(in srgb, var(--text-muted) 7%, var(--surface)) 0.7rem);
}

.weekplanning-dagcel--geen-dienstverband::after {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 0.375rem);
    left: 0.5rem;
    width: max-content;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    color: var(--text);
    content: attr(data-tooltip);
    font: 400 0.75rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
}

.weekplanning-dagcel--geen-dienstverband:hover::after {
    opacity: 1;
}

.weekplanning-dagcel--drop-doel,
.weekplanning-dagcel--kopie-drop-doel,
.weekplanning-dagcel--ongeldig-drop-doel {
    z-index: 2;
}

.weekplanning-dagcel--drop-doel::before,
.weekplanning-dagcel--kopie-drop-doel::before,
.weekplanning-dagcel--ongeldig-drop-doel::before {
    position: absolute;
    z-index: 4;
    inset: 0;
    border-radius: inherit;
    content: '';
    pointer-events: none;
}

.weekplanning-dagcel--bevat-sleepblok {
    z-index: 3;
}

.weekplanning-dagcel--drop-doel::before {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 78%, var(--surface));
}

.weekplanning-dagcel--kopie-drop-doel::before {
    inset: 0.125rem;
    border: 2px dashed color-mix(in srgb, var(--primary) 78%, var(--surface));
}

.weekplanning-dagcel--ongeldig-drop-doel::before {
    box-shadow: inset 0 0 0 2px var(--danger-action);
}

.weekplanning-afwezigheid {
    --weekplanning-afwezigheid-basis: color-mix(in srgb, var(--danger-surface) 72%, var(--surface));
    --weekplanning-afwezigheid-streep: color-mix(in srgb, var(--danger-border) 16%, var(--surface));
    display: grid;
    z-index: 1;
    gap: 0.1rem;
    min-height: 1.75rem;
    margin: 0.5rem 0.5rem 0;
    padding: 0.125rem 0.4rem;
    border: 1px solid color-mix(in srgb, var(--danger-border) 60%, var(--surface));
    border-radius: 0.3rem;
    background: repeating-linear-gradient(-45deg, var(--weekplanning-afwezigheid-basis), var(--weekplanning-afwezigheid-basis) 0.35rem, var(--weekplanning-afwezigheid-streep) 0.35rem, var(--weekplanning-afwezigheid-streep) 0.7rem);
    color: var(--danger-text);
    font: 400 0.6875rem/1.1 Inter, ui-sans-serif, system-ui, sans-serif;
}

.weekplanning-afwezigheid-type {
    overflow: hidden;
    color: var(--danger-text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weekplanning-afwezigheid-tijdvak {
    color: color-mix(in srgb, var(--danger-text) 82%, var(--surface));
    white-space: nowrap;
}

.weekplanning-afwezigheid--hele-dag {
    flex: 1;
    align-content: center;
    justify-items: center;
    justify-content: center;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 0.75rem;
    text-align: center;
}

.weekplanning-dagcel-inplannen-knop {
    z-index: 2;
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px dashed color-mix(in srgb, var(--primary) 60%, var(--border));
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--primary);
    cursor: pointer;
    font: 400 0.75rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
}

.weekplanning-dagcel:hover .weekplanning-dagcel-inplannen-knop,
.weekplanning-dagcel:focus-within .weekplanning-dagcel-inplannen-knop {
    opacity: 1;
    pointer-events: auto;
}

.weekplanning-dagcel-inplannen-knop:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.weekplanning-dagcel-inplannen-knop:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.weekplanning-dagcel-inplannen-knop svg {
    width: 0.875rem;
    height: 0.875rem;
}

.weekplanning-blokken {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    gap: 0.1875rem;
    padding: 0.375rem 0.5rem 0;
    pointer-events: none;
}

.weekplanning-blokken:has(.weekplanning-blok:hover),
.weekplanning-blokken:has(.weekplanning-blok:focus-visible) {
    z-index: 3;
}

.weekplanning-blokken:empty {
    display: none;
}

.weekplanning-blok {
    display: grid;
    grid-template-columns: calc(1rem + 1px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem;
    min-height: calc(1.25rem + 2px);
    padding: 0.125rem 0.4rem;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.6875rem;
    line-height: 1.1;
    pointer-events: auto;
    user-select: none;
}

.weekplanning-blok-klantnaam {
    overflow: hidden;
    min-width: 0;
    margin-left: -0.5rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.weekplanning-blok-tijdvak {
    white-space: nowrap;
}

.weekplanning-blok--met-tooltip {
    position: relative;
}

.weekplanning-blok--met-tooltip::after {
    position: absolute;
    z-index: 5;
    bottom: calc(100% + 0.4rem);
    left: 50%;
    width: max-content;
    max-width: 13rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
    color: var(--text);
    content: attr(data-tooltip);
    font: 400 0.75rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.2rem);
    transition: opacity 120ms ease-in-out, transform 120ms ease-in-out;
}

.weekplanning-blok--met-tooltip:hover::after,
.weekplanning-blok--met-tooltip:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.weekplanning-blok-handgreep svg {
    width: 0.75rem;
    height: 0.75rem;
}

.weekplanning-blok-handgreep {
    display: grid;
    align-self: stretch;
    width: calc(1rem + 1px);
    place-items: center;
    margin: -0.125rem 0 -0.125rem -0.4rem;
    border-right: 1px solid rgb(255 255 255 / 28%);
    background: rgb(0 0 0 / 10%);
    cursor: grab;
    transition: background 120ms ease-in-out;
}

.weekplanning-blok:hover {
    border-color: rgb(255 255 255 / 72%);
    box-shadow: 0 0 0 1px rgb(0 0 0 / 12%);
}

.weekplanning-blok:hover .weekplanning-blok-handgreep {
    background: rgb(0 0 0 / 18%);
}

.weekplanning-blok-handgreep:hover {
    background: rgb(0 0 0 / 32%);
}

.weekplanning-blok--projectwerk { background: #16895c; border-color: #2ebd82; }
.weekplanning-blok--ander-project { background: #236cc5; border-color: #438ee5; }
.weekplanning-blok--overleg { background: #a26e15; border-color: #d39424; }

.weekplanning-blok--conflict {
    outline: 3px double #7f1d1d;
    outline-offset: 2px;
    box-shadow: inset 0 0 0 3px #7f1d1d;
}

.weekplanning-blok--wordt-versleept {
    position: relative;
    z-index: 4;
    opacity: 0.55;
    cursor: grabbing;
    pointer-events: none;
}

.weekplanning-blok--wordt-gekopieerd {
    opacity: 0.8;
    cursor: copy;
}

.weekplanning-blok--kopie-preview {
    position: fixed;
    z-index: 1000;
    margin: 0;
    pointer-events: none;
}

.weekplanning-blok-kopie-indicator {
    position: absolute;
    z-index: 6;
    right: 0;
    bottom: calc(100% + 0.2rem);
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--primary);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    color: var(--text);
    font-size: 0.6875rem;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}

.weekplanning--kopieren,
.weekplanning--kopieren * {
    cursor: copy !important;
}

@media (max-width: 62rem) {
    .weekplanning-werkbalk { align-items: flex-start; flex-direction: column; }
}

.balkenplanning-zijpaneel-inhoud {
    display: grid;
    gap: 0.75rem;
}

.balkenplanning-zijpaneel-formulier {
    display: grid;
    gap: 0.75rem;
}

.balkenplanning-zijpaneel-inhoud h2 {
    margin: 0.5rem 0 0;
    color: var(--text);
    font-size: 0.875rem;
}

.balkenplanning-zijpaneel-periode,
.balkenplanning-zijpaneel-werkduur {
    display: grid;
    gap: 0.5rem;
}

.balkenplanning-zijpaneel-periode {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.balkenplanning-zijpaneel-werkduur {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.balkenplanning-zijpaneel-gegeven {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface-raised);
}

.balkenplanning-zijpaneel-gegeven > span,
.balkenplanning-zijpaneel-uitvoerder p {
    color: var(--text-muted);
    font-size: 0.6875rem;
}

.balkenplanning-zijpaneel-gegeven p,
.balkenplanning-zijpaneel-uitvoerder p {
    margin: 0;
}

.balkenplanning-zijpaneel-gegeven p,
.balkenplanning-zijpaneel-uitvoerder > div > span {
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 700;
}

.balkenplanning-zijpaneel-uitvoerders {
    display: grid;
    gap: 0.4rem;
}

.balkenplanning-zijpaneel-uitvoerder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.balkenplanning-zijpaneel-verwijderen {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
}

.balkenplanning-zijpaneel-keuzes {
    display: flex;
    width: fit-content;
    padding: 0.2rem;
    border-radius: 0.45rem;
    background: var(--surface-raised);
}

.balkenplanning-zijpaneel-keuze {
    padding: 0.4rem 0.65rem;
    border: 0;
    border-radius: 0.3rem;
    color: var(--text-muted);
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.balkenplanning-zijpaneel-keuze--actief {
    color: var(--text);
    background: var(--surface);
    box-shadow: 0 1px 2px rgb(20 31 48 / 18%);
}

.balkenplanning-zijpaneel-selectie {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.balkenplanning-zijpaneel-selectie span:first-child {
    color: var(--text);
    font-weight: 700;
}

.balkenplanning-zijpaneel-selectie span:last-child {
    color: var(--text-muted);
    font-size: 0.6875rem;
}

.balkenplanning-regel-balken {
    position: relative;
    min-width: var(--balkenplanning-kalenderbreedte);
    align-items: center;
    padding: 0.25rem 0;
}

.balkenplanning-nieuwe-regel {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    min-height: 3rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.balkenplanning-nieuwe-regel-knop {
    display: inline-flex;
    width: calc(100% - 4rem);
    min-height: 2rem;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 1.25rem 0.4rem 2.75rem;
    padding: 0.375rem 0.5rem;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--primary) 60%, var(--border));
    border-radius: 0.375rem;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 650;
}

.balkenplanning-nieuwe-regel-knop svg {
    width: 0.875rem;
    height: 0.875rem;
}

.balkenplanning-nieuwe-regel-knop:hover,
.balkenplanning-nieuw-blok-knop:hover {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border-color: var(--primary);
}

.balkenplanning-nieuwe-regel-knop:focus-visible,
.balkenplanning-nieuw-blok-knop:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.balkenplanning-nieuwe-regel-kalender {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
    min-width: var(--balkenplanning-kalenderbreedte);
}

.balkenplanning-nieuw-blok {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    min-height: 3.25rem;
    border-top: 1px solid var(--border);
}

.balkenplanning-nieuw-blok-knop {
    display: inline-flex;
    width: calc(100% - 2.5rem);
    min-height: 2.25rem;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 1.25rem;
    padding: 0.5rem 0.625rem;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--primary) 65%, var(--border));
    border-radius: 0.375rem;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 650;
}

.balkenplanning-nieuw-blok-knop svg {
    width: 0.875rem;
    height: 0.875rem;
}

.balkenplanning-nieuw-blok-kalender {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
    min-width: var(--balkenplanning-kalenderbreedte);
}

.balkenplanning-dagraster {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
    pointer-events: none;
}

.balkenplanning-rasterdag {
    border-left: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.balkenplanning-dag {
    display: flex;
    min-width: 0;
    min-height: 2rem;
    align-items: center;
    overflow: hidden;
}

.balkenplanning-balk {
    position: relative;
    z-index: 1;
    background: var(--balkenplanning-blok-kleur);
    color: var(--balkenplanning-blok-tekstkleur, #fff);
}

.kleurmodus--licht .balkenplanning-kalender-blok {
    --balkenplanning-blok-markering-kleur: #475569;
}

.kleurmodus--licht .balkenplanning-kalender-regel:not([data-balkenplanning-kleur]) .balkenplanning-balk {
    --balkenplanning-blok-kleur: #dbe5f0;
    --balkenplanning-blok-tekstkleur: #1e293b;
    box-shadow: inset 0 1px #94a3b8, inset 0 -1px #94a3b8;
}

.kleurmodus--licht .balkenplanning-kalender-regel:not([data-balkenplanning-kleur]) .balkenplanning-balk--begin,
.kleurmodus--licht .balkenplanning-kalender-regel:not([data-balkenplanning-kleur]) .balkenplanning-balk--begin-na-weekend {
    border-left: 1px solid #94a3b8;
}

.kleurmodus--licht .balkenplanning-kalender-regel:not([data-balkenplanning-kleur]) .balkenplanning-balk--einde,
.kleurmodus--licht .balkenplanning-kalender-regel:not([data-balkenplanning-kleur]) .balkenplanning-balk--einde-voor-weekend {
    border-right: 1px solid #94a3b8;
}

.kleurmodus--licht .balkenplanning-kalender-regel:not([data-balkenplanning-kleur]) .balkenplanning-balk-handgreep {
    background: color-mix(in srgb, #64748b 16%, #dbe5f0);
    box-shadow: inset 0 0 0 1px #94a3b8;
    color: #475569;
}

.balkenplanning-vaste-regel[data-balkenplanning-kleur] {
    border-left: 0.35rem solid var(--balkenplanning-blok-kleur);
    padding-left: 3.9rem;
}

.balkenplanning-vaste-regel[data-balkenplanning-kleur] .balkenplanning-sleephandgreep--regel {
    left: 2.15rem;
}

.balkenplanning-overzicht {
    position: relative;
}

.balkenplanning-legenda {
    position: fixed;
    z-index: 25;
    top: calc(4.75rem + 1rem);
    right: 1rem;
    display: block;
    width: max-content;
    max-width: calc(100% - 2rem);
    padding: 0.5rem 0.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.75rem 2rem rgb(15 23 42 / 18%);
}

.balkenplanning-legenda[open] {
    left: max(23rem, calc(100vw - 23rem));
    right: auto;
    width: min(22rem, calc(100vw - 24rem));
    max-width: none;
    padding: 0.8rem 1.25rem 1rem 1rem;
    background: color-mix(in srgb, var(--surface-raised) 94%, var(--primary));
}

.balkenplanning-legenda-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.75rem;
    padding-right: 0.5rem;
    cursor: pointer;
    list-style: none;
}

.balkenplanning-legenda-toggle::-webkit-details-marker {
    display: none;
}

.balkenplanning-legenda-toggle-icon {
    display: grid;
    flex: 0 0 auto;
    color: var(--text-muted);
}

.balkenplanning-legenda-toggle-icon .web-icon:last-child {
    display: none;
}

.balkenplanning-legenda[open] .balkenplanning-legenda-toggle-icon .web-icon:first-child {
    display: none;
}

.balkenplanning-legenda[open] .balkenplanning-legenda-toggle-icon .web-icon:last-child {
    display: block;
}

.balkenplanning-legenda-inhoud {
    display: grid;
    width: 100%;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.balkenplanning-legenda-titel {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    font-size: 0.875rem;
}

.balkenplanning-legenda-titel .web-icon {
    color: var(--primary);
}

.balkenplanning-legenda-groep {
    display: grid;
    gap: 0.45rem;
}

.balkenplanning-legenda-groep--leeg {
    display: none;
}

.balkenplanning-legenda-groep-titel {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.balkenplanning-legenda-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.balkenplanning-legenda-groep--twee-kolommen .balkenplanning-legenda-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.5rem;
}

.balkenplanning-legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
}

.balkenplanning-legenda-kleur {
    width: 0.8rem;
    height: 0.8rem;
    flex: 0 0 auto;
    background: var(--balkenplanning-blok-kleur);
    border: 1px solid color-mix(in srgb, var(--text) 25%, transparent);
    border-radius: 999px;
}

.balkenplanning-legenda-kleur--patroon {
    background-image: repeating-linear-gradient(135deg, transparent 0, transparent 2px, rgb(255 255 255 / 70%) 2px, rgb(255 255 255 / 70%) 4px);
}

.balkenplanning-balk--klikbaar {
    padding: 0;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.balkenplanning-balk--wordt-verplaatst {
    z-index: 6;
    cursor: grabbing;
    opacity: 0.82;
}

.balkenplanning-balk--klikbaar:focus-visible {
    z-index: 3;
    outline: 3px solid var(--focus-ring);
    outline-offset: 1px;
}

.balkenplanning-balk-titel {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 2rem;
    flex: 0 0 auto;
    align-items: center;
    overflow: hidden;
    margin: 0;
    padding: 0 0.25rem;
    color: inherit;
    font-size: 0.6875rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.balkenplanning-balk-handgreep {
    display: grid;
    width: 100%;
    min-width: 0;
    height: 2rem;
    border-radius: inherit;
    background-color: rgb(255 255 255 / 14%);
    color: rgb(255 255 255 / 80%);
    place-items: center;
}

[data-balkenplanning-balk-vervroegen-handgreep],
[data-balkenplanning-balk-verlengen-handgreep] {
    cursor: ew-resize;
}

.balkenplanning-balk--formaatvoorbeeld {
    opacity: 0.22;
}

.balkenplanning-balk--ingekort {
    visibility: hidden;
    pointer-events: none;
}

.balkenplanning-balk-formaatvoorbeeld,
.balkenplanning-balk-formaatvastgelegd {
    position: absolute;
    z-index: 7;
    top: 50%;
    display: flex;
    align-items: center;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    color: #fff;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transform: translateY(-50%);
    opacity: 0.82;
}

.balkenplanning-balk-formaatvoorbeeld .balkenplanning-balk-handgreep,
.balkenplanning-balk-formaatvastgelegd .balkenplanning-balk-handgreep {
    position: absolute;
    top: 0;
    width: var(--balkenplanning-dagbreedte);
}

.balkenplanning-balk-formaatvoorbeeld .balkenplanning-balk-handgreep--voorbeeld-begin,
.balkenplanning-balk-formaatvastgelegd .balkenplanning-balk-handgreep--voorbeeld-begin {
    left: 0;
}

.balkenplanning-balk-formaatvoorbeeld .balkenplanning-balk-handgreep--voorbeeld-einde,
.balkenplanning-balk-formaatvastgelegd .balkenplanning-balk-handgreep--voorbeeld-einde {
    right: 0;
}

.balkenplanning-balk-formaatvoorbeeld .balkenplanning-balk-titel,
.balkenplanning-balk-formaatvastgelegd .balkenplanning-balk-titel {
    min-width: 0;
    max-width: calc(100% - (2 * var(--balkenplanning-dagbreedte)));
    margin-left: var(--balkenplanning-dagbreedte);
    margin-right: var(--balkenplanning-dagbreedte);
}

.balkenplanning-balk-formaatvoorbeeld {
    pointer-events: none;
}

.balkenplanning-balk-formaatvastgelegd {
    opacity: 1;
}

.balkenplanning-balk-formaatvastgelegd .balkenplanning-balk-handgreep--voorbeeld-begin {
    cursor: ew-resize;
}

.balkenplanning-balk-formaatvastgelegd .balkenplanning-balk-handgreep--voorbeeld-einde {
    cursor: grab;
}

.balkenplanning-balk-handgreep svg {
    width: 0.75rem;
    height: 0.75rem;
}

.balkenplanning-balk--begin .balkenplanning-balk-handgreep {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--balkenplanning-dagbreedte);
}

.balkenplanning-balk--begin .balkenplanning-balk-titel {
    margin-left: var(--balkenplanning-dagbreedte);
}

.balkenplanning-balk--begin.balkenplanning-balk--compacte-ellipsis .balkenplanning-balk-titel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    width: calc(var(--balkenplanning-dagbreedte) * 2);
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.balkenplanning-balk--begin.balkenplanning-balk--compacte-ellipsis-eendag .balkenplanning-balk-titel {
    width: var(--balkenplanning-dagbreedte);
}

.balkenplanning-balk--begin.balkenplanning-balk--compacte-ellipsis-eendag .balkenplanning-balk-handgreep svg {
    visibility: hidden;
}

.balkenplanning-balk--begin {
    z-index: 2;
    overflow: visible;
    border-radius: 0.375rem 0 0 0.375rem;
}

.balkenplanning-balk--met-tooltip {
    overflow: visible;
}

.balkenplanning-balk--met-tooltip:hover,
.balkenplanning-balk--met-tooltip:focus-visible {
    z-index: 10;
}

.balkenplanning-balk--einde {
    border-radius: 0 0.375rem 0.375rem 0;
}

.balkenplanning-balk--met-regel-label {
    z-index: 4;
    overflow: visible;
}

.balkenplanning-regel-label {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: calc(100% + 0.35rem);
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(-50%);
}

.balkenplanning-balk--formaatvoorbeeld .balkenplanning-regel-label {
    visibility: hidden;
}

.balkenplanning-balk--begin-na-weekend .balkenplanning-balk-handgreep,
.balkenplanning-balk--begin-na-weekend .balkenplanning-balk-titel,
.balkenplanning-balk--einde-voor-weekend .balkenplanning-balk-handgreep {
    display: none;
}

.balkenplanning-balk--begin,
.balkenplanning-balk--begin-na-weekend,
.balkenplanning-balk--titelgebied,
.balkenplanning-balk--einde,
.balkenplanning-balk--einde-voor-weekend {
    box-shadow: inset 0 1px rgb(0 0 0 / 30%), inset 0 -1px rgb(0 0 0 / 30%);
}

.balkenplanning-balk--titelgebied {
    box-shadow:
        inset 0 1px rgb(0 0 0 / 30%),
        inset 0 -1px rgb(0 0 0 / 30%),
        inset 0 0 0 100vmax rgb(0 0 0 / 14%);
}

.balkenplanning-vaste-blok,
.balkenplanning-kalender-blok {
    --balkenplanning-blok-achtergrond: color-mix(in srgb, #3b82f6 8%, var(--surface));
    --balkenplanning-regel-achtergrond: color-mix(in srgb, var(--surface) 94%, var(--text));
    --balkenplanning-blok-kleur: var(--balkenplanning-blok-achtergrond);
    --balkenplanning-blok-tekstkleur: var(--text);
    --balkenplanning-blok-markering-kleur: color-mix(in srgb, var(--text) 45%, transparent);
    background: var(--balkenplanning-blok-achtergrond);
}

.balkenplanning-vaste-blok.balkenplanning-blok--zebra,
.balkenplanning-kalender-blok.balkenplanning-blok--zebra {
    --balkenplanning-blok-achtergrond: color-mix(in srgb, #1d4ed8 18%, var(--surface));
    --balkenplanning-blok-kleur: color-mix(in srgb, #3b82f6 8%, var(--surface));
}

/* De labels vormen een eigen, vaste kolom. Alleen de kalender ernaast scrolt. */
.balkenplanning-bord {
    --balkenplanning-dagen-per-week: 7;
    --balkenplanning-kalenderbreedte: calc(var(--balkenplanning-aantal-weken) * var(--balkenplanning-dagen-per-week) * var(--balkenplanning-dagbreedte));
    --balkenplanning-vaste-kolombreedte: 22rem;
    --balkenplanning-kalenderkophoogte: 7.0625rem;

    display: grid;
    grid-template-rows: var(--balkenplanning-kalenderkophoogte) auto;
    grid-template-columns: var(--balkenplanning-vaste-kolombreedte) minmax(0, 1fr);
    width: 90rem;
    min-width: 90rem;
    position: relative;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.balkenplanning-bord--kolom-ingeklapt {
    --balkenplanning-vaste-kolombreedte: 4.5rem;
}

@supports (width: attr(data-balkenplanning-aantal-dagen type(<integer>), 56px)) {
    .balkenplanning-bord {
        --balkenplanning-aantal-dagen: attr(data-balkenplanning-aantal-dagen type(<integer>), 56);
        --balkenplanning-aantal-weken: attr(data-balkenplanning-aantal-weken type(<integer>), 8);
    }
}

.balkenplanning-logisch-blok-inhoud,
.balkenplanning-logische-regel,
.balkenplanning-logische-nieuwe-regel,
.balkenplanning-logisch-nieuw-blok {
    display: contents;
}

.balkenplanning-logisch-blok {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: var(--balkenplanning-vaste-kolombreedte) minmax(0, 1fr);
    min-width: 0;
}

.balkenplanning-blok--wordt-versleept {
    position: relative;
    z-index: 20;
    opacity: 0.55;
    pointer-events: none;
}

.balkenplanning-blok--wordt-versleept .balkenplanning-sleephandgreep--blok {
    cursor: grabbing;
}

.balkenplanning-regel--wordt-versleept {
    position: relative;
    z-index: 20;
    opacity: 0.55;
    pointer-events: none;
}

.balkenplanning-blok--sleepdoel {
    box-shadow: inset 0 0.1875rem var(--focus-ring);
}

.balkenplanning-blok--sleepdoel-na {
    box-shadow: inset 0 -0.1875rem var(--focus-ring);
}

.balkenplanning-sleephandgreep--blok {
    touch-action: none;
}

.balkenplanning-logisch-blok-inhoud[hidden] {
    display: none;
}

.balkenplanning-bord > .balkenplanning-kalender-vandaag-lijn {
    position: absolute;
    top: var(--balkenplanning-kalenderkophoogte);
    right: 0;
    bottom: 0;
    left: var(--balkenplanning-vaste-kolombreedte);
}

.balkenplanning-vaste-weekkop,
.balkenplanning-vaste-blok-kop,
.balkenplanning-vaste-regel,
.balkenplanning-vaste-nieuwe-regel-cel,
.balkenplanning-vaste-nieuw-blok-knop {
    position: sticky;
    left: 0;
    z-index: 11;
}

.balkenplanning-vaste-kolom {
    position: relative;
    z-index: 1;
    background: var(--surface);
    border-right: 1px solid var(--border);
}

.balkenplanning-scrollgebied {
    min-width: 0;
    overflow-x: auto;
    overflow-y: clip;
}

.balkenplanning-kalenderbord {
    width: var(--balkenplanning-kalenderbreedte);
    min-width: var(--balkenplanning-kalenderbreedte);
}

.balkenplanning-vaste-weekkop {
    top: 0;
    z-index: 12;
    height: var(--balkenplanning-kalenderkophoogte);
    display: flex;
    box-sizing: border-box;
    align-items: end;
    padding: 1rem 1.25rem;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
    border-top-left-radius: var(--radius-card);
    box-shadow: inset 1px 0 var(--border), inset 0 1px var(--border);
    font-size: 0.8125rem;
    font-weight: 650;
}

.balkenplanning-kolom-toggle {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    place-items: center;
}

.balkenplanning-kolom-toggle:hover {
    color: var(--text);
    border-color: var(--primary);
}

.balkenplanning-kolom-toggle:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.balkenplanning-kolom-toggle-icon {
    display: grid;
}

.balkenplanning-bord--kolom-ingeklapt .balkenplanning-kolom-toggle-icon {
    transform: rotate(-90deg);
}

.balkenplanning-kalenderkop {
    position: sticky;
    top: 0;
    z-index: 11;
    height: var(--balkenplanning-kalenderkophoogte);
    box-sizing: border-box;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    width: 100%;
    min-width: 0;
    overflow-x: clip;
    overflow-y: visible;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    border-top-right-radius: var(--radius-card);
    box-shadow: inset -1px 0 var(--border), inset 0 1px var(--border);
    cursor: grab;
    touch-action: pan-y;
}

.balkenplanning-bord--kolom-ingeklapt .balkenplanning-vaste-blok-kop {
    padding: 0.4rem;
}

.balkenplanning-bord--kolom-ingeklapt .balkenplanning-vaste-blok-kop h2,
.balkenplanning-bord--kolom-ingeklapt .balkenplanning-vaste-blok-kop p,
.balkenplanning-bord--kolom-ingeklapt .balkenplanning-blok-acties-menu,
.balkenplanning-bord--kolom-ingeklapt .balkenplanning-regel-titel,
.balkenplanning-bord--kolom-ingeklapt .balkenplanning-regel-toegewezen-aan,
.balkenplanning-bord--kolom-ingeklapt .balkenplanning-regel-status,
.balkenplanning-bord--kolom-ingeklapt .balkenplanning-regel-uren {
    display: none;
}

.balkenplanning-bord--kolom-ingeklapt .balkenplanning-vaste-regel {
    padding-right: 0.25rem;
    padding-left: 0;
}

.balkenplanning-kalenderkop-inhoud {
    display: grid;
    grid-template-rows: 1.5rem 3.75rem 1.75rem;
    width: var(--balkenplanning-kalenderbreedte);
}

.balkenplanning-jaren {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
    width: var(--balkenplanning-kalenderbreedte);
    min-height: 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-raised);
}

.balkenplanning-jaar-dag--label {
    position: sticky;
    z-index: 12;
    left: 0;
    display: flex;
    width: 3.5rem;
    min-height: 1.5rem;
    align-items: center;
    padding: 0 0.5rem;
    background: var(--surface-raised);
    box-shadow: inset 0 -1px var(--border);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 650;
}

.balkenplanning-vaste-blok + .balkenplanning-vaste-blok,
.balkenplanning-kalender-blok + .balkenplanning-kalender-blok {
    border-top: 0;
}

.balkenplanning-vaste-blok-kop,
.balkenplanning-kalender-blok-kop {
    height: 3.5rem;
    min-height: 3.5rem;
    background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
    border-bottom: 1px solid var(--border);
}

.balkenplanning-vaste-blok-kop {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    gap: 0.1rem 0.75rem;
    padding: 0.4rem 4.25rem 0.4rem 4.25rem;
    cursor: pointer;
}

.balkenplanning-sleephandgreep {
    position: absolute;
    display: grid;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: grab;
    place-items: center;
}

.balkenplanning-sleephandgreep:active {
    cursor: grabbing;
}

.balkenplanning-sleephandgreep svg {
    width: 0.875rem;
    height: 0.875rem;
}

.balkenplanning-sleephandgreep--blok {
    top: calc(50% - 0.5rem);
    left: 2.5rem;
}

.balkenplanning-vaste-blok-kop h2 {
    width: 100%;
    overflow: hidden;
    margin: 0;
    font-size: 0.840rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.balkenplanning-blok-titel {
    position: relative;
}

.balkenplanning-blok-titel::after {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.375rem);
    left: 0;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    color: var(--text);
    content: attr(data-tooltip);
    font: 400 0.75rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
}

.balkenplanning-blok-titel:hover::after {
    opacity: 1;
}

.balkenplanning-vaste-blok-kop p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.2;
}

.balkenplanning-vaste-blok-kop .balkenplanning-blok-acties-menu {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
}

.balkenplanning-blok-acties-menu-knop {
    display: grid;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--primary) 60%, var(--border));
    border-radius: 0.375rem;
    background: transparent;
    color: var(--primary);
    cursor: pointer;
    list-style: none;
    place-items: center;
}

.balkenplanning-blok-acties-menu-knop::-webkit-details-marker {
    display: none;
}

.balkenplanning-blok-acties-menu-knop:hover,
.balkenplanning-blok-acties-menu[open] .balkenplanning-blok-acties-menu-knop {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
}

.balkenplanning-blok-acties-menu-knop:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.balkenplanning-blok-acties-menu-knop svg {
    width: 0.875rem;
    height: 0.875rem;
}

.balkenplanning-vaste-regel,
.balkenplanning-kalender-regel {
    height: 3.5rem;
    min-height: 3.5rem;
    border-top: 0;
    border-bottom: 1px solid var(--border);
}

.balkenplanning-vaste-regel {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 1.25rem 0.35rem 4.25rem;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    border-left: 0;
    background: var(--balkenplanning-regel-achtergrond);
    box-shadow: inset 0 -1px 0 var(--border);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.balkenplanning-kalender-regel {
    background: var(--balkenplanning-regel-achtergrond);
}

.balkenplanning-vaste-regel--met-tooltip {
    position: relative;
}

.balkenplanning-vaste-regel--met-tooltip::after {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.35rem);
    left: 4.25rem;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
    color: var(--text);
    content: attr(data-tooltip);
    font: 400 0.75rem/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: opacity 120ms ease-in-out;
}

.balkenplanning-vaste-regel--met-tooltip:hover,
.balkenplanning-vaste-regel--met-tooltip:focus-visible {
    z-index: 20;
}

.balkenplanning-vaste-regel--met-tooltip:hover::after,
.balkenplanning-vaste-regel--met-tooltip:focus-visible::after {
    opacity: 1;
}

.balkenplanning-sleephandgreep--regel {
    top: calc(50% - 0.5rem);
    left: 2.5rem;
    flex: 0 0 1rem;
}

.balkenplanning-vaste-regel-inhoud {
    display: flex;
    width: 0;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-content: center;
    gap: 0.05rem 0;
}

.balkenplanning-vaste-regel:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
}

.balkenplanning-vaste-nieuwe-regel-knop,
.balkenplanning-kalender-nieuwe-regel {
    height: 3rem;
    min-height: 3rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.balkenplanning-vaste-nieuwe-regel-cel {
    display: flex;
    height: 3rem;
    align-items: center;
    border-top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    background: var(--surface);
}

.balkenplanning-vaste-nieuwe-regel-knop {
    display: inline-flex;
    width: calc(100% - 5.5rem);
    height: 2.2rem;
    min-height: 2.2rem;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 1.25rem 0.4rem 4.25rem;
    padding: 0.375rem 0.5rem;
    background: transparent;
    border: 1px dashed color-mix(in srgb, var(--primary) 60%, var(--border));
    border-radius: 0.375rem;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 400;
}

.balkenplanning-vaste-nieuwe-regel-knop svg,
.balkenplanning-vaste-nieuw-blok-knop svg {
    width: 0.875rem;
    height: 0.875rem;
}

.balkenplanning-vaste-nieuwe-regel-knop:hover,
.balkenplanning-vaste-nieuw-blok-knop:hover {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border-color: var(--primary);
}

.balkenplanning-vaste-nieuwe-regel-knop:focus-visible,
.balkenplanning-vaste-nieuw-blok-knop:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.balkenplanning-vaste-nieuw-blok-knop,
.balkenplanning-kalender-nieuw-blok {
    height: 3.25rem;
    min-height: 3.25rem;
    border-top: 1px solid var(--border);
}

.balkenplanning-kalender-nieuwe-regel {
    border-top: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.balkenplanning-vaste-nieuw-blok-knop,
.balkenplanning-kalender-nieuw-blok {
    border-top: 0;
}

.balkenplanning-vaste-nieuw-blok-knop {
    display: inline-flex;
    width: calc(100% - 2.5rem);
    height: 2.25rem;
    min-height: 2.25rem;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 1.25rem;
    padding: 0.5rem 0.625rem;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--primary) 65%, var(--border));
    border-radius: 0.375rem;
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
}

.balkenplanning-kalender-blokken {
    position: relative;
    min-width: var(--balkenplanning-kalenderbreedte);
}

.balkenplanning-kalender-dagmarkeringen {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
    min-width: var(--balkenplanning-kalenderbreedte);
    pointer-events: none;
}

.balkenplanning-kalender-dagmarkering {
    position: relative;
    border-left: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.balkenplanning-kalender-dagmarkering[data-tooltip] {
    pointer-events: auto;
}

.planning-pointer-tooltip {
    position: fixed;
    z-index: 1000;
    max-width: min(18rem, calc(100vw - 2rem));
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
    color: var(--text);
    font: 400 0.75rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    pointer-events: none;
    white-space: pre-line;
}

.planning-pointer-tooltip[hidden] {
    display: none;
}

.balkenplanning-kalender-dagmarkering.planning-kalender-dag--feestdag {
    background: color-mix(in srgb, #d97706 16%, transparent);
    box-shadow: inset 1px 0 color-mix(in srgb, #d97706 42%, transparent), inset -1px 0 color-mix(in srgb, #d97706 42%, transparent);
}

.balkenplanning-kalender-dagmarkering.planning-kalender-dag--bedrijfssluiting {
    background: repeating-linear-gradient(
        -45deg,
        color-mix(in srgb, #2563eb 14%, transparent),
        color-mix(in srgb, #2563eb 14%, transparent) 0.35rem,
        color-mix(in srgb, #2563eb 26%, transparent) 0.35rem,
        color-mix(in srgb, #2563eb 26%, transparent) 0.7rem
    );
    box-shadow: inset 1px 0 color-mix(in srgb, #2563eb 45%, transparent), inset -1px 0 color-mix(in srgb, #2563eb 45%, transparent);
}

.balkenplanning-kalender-vandaag-lijn {
    position: absolute;
    z-index: 10;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
    pointer-events: none;
}

.balkenplanning-kalender-blok-kop,
.balkenplanning-kalender-nieuwe-regel,
.balkenplanning-kalender-nieuw-blok {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
    width: var(--balkenplanning-kalenderbreedte);
}

.balkenplanning-kalender-blok-kop {
    position: relative;
    overflow: hidden;
}

.balkenplanning-blok-minmax {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
    align-items: center;
    padding: 0.8rem 0;
    border: 0;
    color: var(--balkenplanning-blok-markering-kleur);
    background: transparent;
    cursor: pointer;
    font: inherit;
    pointer-events: none;
    text-align: left;
}

.balkenplanning-blok-minmax-dag--binnen {
    position: relative;
    height: 1.5rem;
    border-top: 1px solid currentcolor;
    border-bottom: 1px solid currentcolor;
    background: color-mix(in srgb, currentcolor 8%, transparent);
    pointer-events: auto;
}

.balkenplanning-blok-minmax-dag--binnen::after {
    position: absolute;
    inset: 50% 0 auto;
    height: 1px;
    background: color-mix(in srgb, currentcolor 55%, transparent);
    content: '';
    transform: translateY(-50%);
}

.balkenplanning-blok-minmax-dag--regel::after {
    height: 3px;
    background: color-mix(in srgb, currentcolor 76%, transparent);
}

.balkenplanning-blok-minmax-dag--regel-begin::after {
    border-radius: 999px 0 0 999px;
}

.balkenplanning-blok-minmax-dag--regel-einde::after {
    border-radius: 0 999px 999px 0;
}

.balkenplanning-blok-minmax-dag--begin {
    border-left: 1px solid currentcolor;
    border-radius: 0.3rem 0 0 0.3rem;
}

.balkenplanning-blok-minmax-dag--einde {
    border-right: 1px solid currentcolor;
    border-radius: 0 0.3rem 0.3rem 0;
}

.balkenplanning-blok-minmax-dag--met-label {
    position: relative;
}

.balkenplanning-blok-minmax-label {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: calc(100% + 0.35rem);
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transform: translateY(-50%);
}

.balkenplanning-kalender-regel {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
    width: var(--balkenplanning-kalenderbreedte);
    align-items: stretch;
    padding: 0;
}

.balkenplanning-kalender-regel-dagen,
.balkenplanning-regel-dagmarkeringen {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, var(--balkenplanning-dagbreedte));
    width: var(--balkenplanning-kalenderbreedte);
}

.balkenplanning-kalender-regel-dagen {
    position: relative;
    min-height: 3.5rem;
    align-items: center;
    background: inherit;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}

.balkenplanning-regel-dagmarkeringen {
    position: absolute;
    z-index: 0;
    inset: 0;
    grid-template-rows: 1fr;
    pointer-events: none;
}

.balkenplanning-regel-dagmarkering--ingepland {
    height: 0.75rem;
    align-self: end;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--balkenplanning-dagmarkering) 68%, transparent) 0,
        color-mix(in srgb, var(--balkenplanning-dagmarkering) 68%, transparent) 1px,
        color-mix(in srgb, var(--balkenplanning-dagmarkering) 20%, transparent) 2px,
        transparent 0.75rem
    );
}

/* Alleen de kalenderkolom heeft horizontale overflow; de naamkolom blijft buiten de scrollbar. */
.balkenplanning-bord {
    width: 100%;
    min-width: 0;
}

.balkenplanning-vaste-kolom {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: var(--balkenplanning-vaste-kolombreedte);
}

.balkenplanning-bord > .balkenplanning-scrollgebied {
    grid-column: 2;
    grid-row: 2;
    width: 100%;
}

.balkenplanning-week:first-child,
.balkenplanning-dagkop:first-child,
.balkenplanning-blok-dag:first-child,
.balkenplanning-rasterdag:first-child {
    border-left: 0;
}

@media (max-width: 48rem) {
    .balkenplanning-legenda {
        top: calc(4.25rem + 0.75rem);
        right: 0.75rem;
    }

    .balkenplanning-legenda[open] {
        left: calc(22rem + 0.75rem);
        right: 0.75rem;
        width: auto;
    }

    .balkenplanning-werkbalk,
    .balkenplanning-periode {
        align-items: flex-start;
        flex-direction: column;
    }

    .balkenplanning-werkbalk {
        padding: 1rem;
    }
}

.verkoop-dashboard-toggles-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: -1rem;
    padding: 0.5rem 1.25rem 0 0;
}

.verkoop-toggles-groep {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 2rem;
    row-gap: 1rem;
    padding-left: 1rem;
}

.verkoop-toggles-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.verkoop-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.verkoop-toggle-pill:has(input:checked) {
    font-weight: 500;
}

.verkoop-toggles-show-all-btn {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    border-radius: var(--radius-control);
    color: var(--primary);
    font-weight: 400;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.verkoop-toggles-show-all-btn:hover {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    border-color: var(--primary);
}

.verkoop-toggles-show-all-btn:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.verkoop-toggles-show-all-btn .web-icon {
    width: 1rem;
    height: 1rem;
}

.offerte-aanmaken-placeholder {
    padding: 2rem 2.5rem;
}

.tab-inhoud-kop {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 5rem;
    padding: 1.25rem 2.5rem;
    border-bottom: 1px solid var(--border);
}

.tab-inhoud-kop-icoon {
    display: grid;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    background: var(--page-accent);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--primary);
}

.tab-inhoud-kop-tekst {
    display: grid;
    gap: 0.125rem;
}

.tab-inhoud-kop-titel {
    margin: 0;
    font-size: 1.125rem;
    letter-spacing: -0.015em;
}

.tab-inhoud-kop-beschrijving {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.beheer-form-card {
    gap: 0;
    max-width: 100%;
    padding: 0;
    box-shadow: 0 0.75rem 2rem rgb(30 37 45 / 8%);
    overflow: visible;
}

.beheer-medewerker-overzicht-content {
    padding: 0;
}

.paneel-acties {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
    padding: 1rem 1.5rem;
}

.paneel-acties::after {
    position: absolute;
    right: 1.5rem;
    bottom: 0;
    left: 1.5rem;
    height: 1px;
    background: var(--border);
    content: '';
}

.paneel-acties-primair,
.paneel-acties-menu-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-control);
    cursor: pointer;
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    text-decoration: none;
}

.paneel-acties-primair {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--primary-text);
}

.paneel-acties-primair--alleen-icoon {
    width: 2.5rem;
    padding: 0.5rem;
}

.paneel-acties-primair:not(:disabled):hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.paneel-acties-primair-menu-knop {
    list-style: none;
    user-select: none;
}

.paneel-acties-primair-menu-knop::-webkit-details-marker {
    display: none;
}

.paneel-acties-primair-menu[open] .paneel-acties-primair-menu-knop {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.paneel-acties-primair:disabled {
    background: color-mix(in srgb, var(--text-muted) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--text-muted) 42%, var(--border));
    color: color-mix(in srgb, var(--text-muted) 72%, var(--surface));
    box-shadow: none;
    cursor: not-allowed;
    filter: grayscale(1);
    opacity: 0.72;
}

.paneel-acties-primair:focus-visible,
.paneel-acties-menu-knop:focus-visible,
.paneel-acties-secundair:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.paneel-acties-menu {
    position: relative;
}

.paneel-acties-menu-knop {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--text);
    list-style: none;
    user-select: none;
}

.paneel-acties-menu-knop::-webkit-details-marker {
    display: none;
}

.paneel-acties-menu-knop:hover,
.paneel-acties-menu[open] .paneel-acties-menu-knop {
    border-color: var(--primary);
    color: var(--primary);
}

.paneel-acties-menu-knop .web-icon--uitklappen,
.paneel-acties-primair-menu-knop .web-icon--uitklappen,
.beheer-paneel-header-acties-knop .web-icon--uitklappen {
    transition: transform 160ms ease;
}

.paneel-acties-menu[open] .web-icon--uitklappen,
.beheer-paneel-header-acties[open] .web-icon--uitklappen {
    transform: rotate(180deg);
}

.paneel-acties-menu-lijst {
    position: absolute;
    z-index: 10;
    top: calc(100% + 0.5rem);
    right: 0;
    left: auto;
    display: grid;
    gap: 0.125rem;
    width: max-content;
    min-width: 15rem;
    max-width: calc(100vw - 1rem);
    margin: 0;
    padding: 0.375rem;
    overflow-x: auto;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow);
    list-style: none;
}

[data-paneel-acties-menu-lijst].paneel-acties-menu-lijst--zwevend {
    position: fixed;
    z-index: 1000;
    right: auto;
    bottom: auto;
    overflow-y: auto;
}

.paneel-acties-form {
    margin: 0;
}

.paneel-acties-secundair {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: max-content;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.paneel-acties-menu-lijst .paneel-acties-secundair {
    width: 100%;
    justify-content: flex-start;
    border: 0;
    border-radius: var(--radius-control);
    min-height: 2.25rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.paneel-acties-secundair:hover {
    background: var(--page-accent);
    color: var(--primary);
}

.paneel-inhoud--secties {
    display: grid;
    gap: 0.5rem;
    padding: 1rem 1.5rem 2.5rem;
    background: color-mix(in srgb, var(--page-background) 38%, var(--surface));
}

.paneel-inhoud--secties:has(> .offerte-groep) {
    row-gap: 1rem;
}

.offerte-samenvatting-en-acties + .paneel-inhoud--secties {
    padding-top: 1rem;
}

.offerte-samenvatting-en-acties--met-melding + .paneel-inhoud--secties {
    padding-top: 0.25rem;
}

.product-detail-prijzen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.product-detail-prijskaart {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 7.5rem;
    padding: 1.5rem 2rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 1rem rgb(30 37 45 / 4%);
}

.product-detail-prijs-icoon,
.datatable-kop-icoon,
.eigenschappen-icoon,
.formulier-kop-icoon {
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border-radius: 999px;
    color: var(--primary);
}

.product-detail-prijs-icoon {
    width: 3rem;
    height: 3rem;
}

.product-detail-prijs-kopie {
    display: grid;
    gap: 0.125rem;
}

.product-detail-prijs-label,
.product-detail-prijs-waarde {
    margin: 0;
}

.product-detail-prijs-label {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.product-detail-prijs-waarde {
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.eigenschappen {
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 1rem rgb(30 37 45 / 4%);
}

.eigenschappen-kop {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.eigenschappen-icoon {
    width: 2.25rem;
    height: 2.25rem;
}

.eigenschappen-titel {
    margin: 0;
    font-size: 1.125rem;
    letter-spacing: -0.015em;
}

.eigenschappen-kolommen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 4rem;
    padding: 0.75rem 1.5rem 1.5rem;
}

.eigenschappen-kolom {
    display: grid;
    align-content: start;
}

.eigenschap {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.eigenschap:last-child {
    border-bottom: 0;
}

.eigenschap-label {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.eigenschap-waarde {
    overflow-wrap: anywhere;
    font-size: 0.9375rem;
    font-weight: 600;
}

.eigenschap-kleur {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.eigenschap-kleur-input {
    width: 2.25rem;
    height: 1.75rem;
    padding: 0.125rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    cursor: default;
}

.eigenschap-kleur-hex {
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.eigenschap-link {
    width: fit-content;
    justify-self: start;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.eigenschap-link:hover {
    color: var(--primary-hover);
}

.eigenschappen-status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.eigenschappen-status--actief {
    background: color-mix(in srgb, var(--primary) 11%, var(--surface));
    color: var(--primary);
}

.eigenschappen-status--inactief {
    background: color-mix(in srgb, var(--text-muted) 12%, var(--surface));
    color: var(--text-muted);
}

.eigenschappen-status-punt {
    width: 0.5rem;
    height: 0.5rem;
    background: currentColor;
    border-radius: 999px;
}

.medewerker-koppels {
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 1rem rgb(30 37 45 / 4%);
}

.medewerker-koppels-kop {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.medewerker-koppels-kop-icoon,
.medewerker-koppel-icoon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border-radius: 0.5rem;
    color: var(--primary);
}

.medewerker-koppels-kop-icoon {
    width: 2.25rem;
    height: 2.25rem;
}

.medewerker-koppels-titel {
    margin: 0;
    font-size: 1.125rem;
    letter-spacing: -0.015em;
}

.medewerker-koppels-aantal {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
}

.medewerker-koppels-lijst {
    padding: 0 1.5rem;
}

.medewerker-koppel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    min-height: 5.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.medewerker-koppel:last-child {
    border-bottom: 0;
}

.medewerker-koppel-icoon {
    width: 2.25rem;
    height: 2.25rem;
}

.medewerker-koppel-kopie {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.medewerker-koppel-naam {
    overflow-wrap: anywhere;
    color: var(--primary);
    font-size: 1rem;
    font-weight: 600;
}

.medewerker-koppel-leden {
    overflow-wrap: anywhere;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.medewerker-koppels-leeg {
    padding: 1.5rem;
    color: var(--text-muted);
}

.medewerker-koppels-leeg p {
    margin: 0;
}

@media (max-width: 46rem) {
    .paneel-inhoud--secties {
        gap: 1rem;
        padding: 1rem;
    }

    .product-detail-prijzen,
    .eigenschappen-kolommen {
        grid-template-columns: 1fr;
    }

    .product-detail-prijzen {
        gap: 1rem;
    }

    .product-detail-prijskaart {
        min-height: 6.5rem;
        padding: 1.25rem;
    }

    .eigenschappen-kolommen {
        gap: 0;
        padding: 0.5rem 1rem 1rem;
    }

    .medewerker-koppels-kop {
        padding: 1rem;
    }

    .medewerker-koppels-lijst {
        padding: 0 1rem;
    }

    .eigenschappen-kolom:first-child .eigenschap:last-child {
        border-bottom: 1px solid var(--border);
    }

    .eigenschap {
        grid-template-columns: minmax(6rem, 8rem) minmax(0, 1fr);
    }
}

.datatable-kop {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.datatable-kop-icoon {
    width: 2.25rem;
    height: 2.25rem;
}

.datatable-kop-titel {
    margin: 0;
    font-size: 1.125rem;
    letter-spacing: -0.015em;
}

.datatable-overzicht {
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.25rem 1rem rgb(30 37 45 / 4%);
}

.datatable-overzicht .datatable-filter-cell {
    background: transparent;
}

.datatable-overzicht .datatable-filter-input {
    background: var(--surface);
}

.beheer-paneel-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 6rem;
    padding: 1.25rem 1.5rem;
    background: var(--beheer-paneel-header-background);
    border-bottom: 1px solid var(--border);
}

.beheer-card > .beheer-paneel-header {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.beheer-form-card > .paneel-inhoud--secties {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
}

.beheer-paneel-icon {
    display: grid;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    place-items: center;
    position: relative;
    background: var(--beheer-paneel-icon-surface);
    border: 1px solid var(--beheer-paneel-icon-border);
    border-radius: 999px;
    color: var(--beheer-icon);
}

.beheer-paneel-header-copy {
    display: grid;
    gap: 0.25rem;
}

.beheer-paneel-terug-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    line-height: 1;
    width: fit-content;
    transition: color 0.15s ease-in-out;
}

.beheer-paneel-terug-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.beheer-paneel-terug-link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-control);
}

.beheer-paneel-terug-link .web-icon--terug {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.beheer-paneel-header-extra {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.beheer-paneel-header-extra--met-status {
    margin-right: 1rem;
}

.beheer-paneel-header-status {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 11%, var(--surface));
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.beheer-paneel-header-status-punt {
    width: 0.625rem;
    height: 0.625rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
}

.beheer-paneel-header-status--neutraal {
    color: var(--text-muted);
}

.beheer-paneel-header-status--informatie {
    color: #4e86b7;
}

.beheer-paneel-header-status--succes {
    color: var(--primary);
}

.beheer-paneel-header-status--waarschuwing {
    color: #c89827;
}

.beheer-paneel-header-status--fout {
    color: var(--danger-action);
}

.beheer-paneel-title {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: -0.025em;
}

.beheer-paneel-subtitle {
    margin: 0;
    color: var(--text-muted);
}

.beheer-paneel-header-acties {
    position: relative;
}

.beheer-paneel-header-acties-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    list-style: none;
    user-select: none;
    white-space: nowrap;
}

.beheer-paneel-header-acties-knop::-webkit-details-marker {
    display: none;
}

.beheer-paneel-header-acties-knop:hover,
.beheer-paneel-header-acties[open] .beheer-paneel-header-acties-knop {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-raised));
    border-color: var(--primary);
}

.beheer-paneel-header-acties-knop:focus-visible,
.beheer-paneel-header-acties-item:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-paneel-header-acties-lijst {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.5rem);
    right: 0;
    display: grid;
    min-width: 15rem;
    margin: 0;
    padding: 0.375rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow);
    list-style: none;
}

.beheer-paneel-header-acties-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 0.375rem;
    color: var(--text);
    cursor: pointer;
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    text-align: left;
    text-decoration: none;
}

.beheer-paneel-header-acties-item:hover {
    background: var(--page-accent);
    color: var(--primary);
}

.beheer-paneel-header-primaire-actie {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-control);
    color: var(--primary-text);
    cursor: pointer;
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    text-decoration: none;
    white-space: nowrap;
}

.beheer-paneel-header-secundaire-actie {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    text-decoration: none;
    white-space: nowrap;
}

.beheer-paneel-header-secundaire-actie:hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-raised));
    border-color: var(--primary);
}

.beheer-paneel-header-secundaire-actie:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-paneel-header-primaire-actie:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.beheer-paneel-header-primaire-actie:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-form-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 0.875rem 1.25rem;
    align-content: start;
    justify-content: center;
    padding: 1.5rem;
}

.beheer-form-instruction,
.beheer-form-error {
    grid-column: 1 / -1;
}

.beheer-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--border);
}

.beheer-tabs-list {
    display: flex;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 0 1.5rem;
    list-style: none;
}

.beheer-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.125rem;
    padding: 0.75rem 0.875rem 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
}

.beheer-tab:hover {
    color: var(--primary);
}

.beheer-tab:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.beheer-tab--active {
    color: var(--primary);
}

.beheer-tab--disabled {
    color: var(--text-muted);
    cursor: default;
}

.klant-overzicht {
    display: grid;
    gap: 1.25rem;
    padding: 1.5rem;
}

.klant-overzicht-statistieken {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.klant-overzicht-statistiek {
    display: grid;
    grid-template-columns: 3.75rem minmax(0, 1fr);
    min-width: 0;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.35rem 1.25rem rgb(30 37 45 / 4%);
}

.klant-overzicht-icoon,
.klant-overzicht-activiteit-icoon {
    display: grid;
    flex: 0 0 auto;
    border-radius: 999px;
    place-items: center;
}

.klant-overzicht-icoon {
    width: 3.75rem;
    height: 3.75rem;
}

.klant-overzicht-icoon .web-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.klant-overzicht-icoon--green {
    background: color-mix(in srgb, var(--primary) 13%, var(--surface));
    color: var(--primary);
}

.klant-overzicht-icoon--amber {
    background: color-mix(in srgb, #dda52f 17%, var(--surface));
    color: #b87900;
}

.klant-overzicht-icoon--blue {
    background: color-mix(in srgb, #3278df 13%, var(--surface));
    color: #2468ca;
}

.klant-overzicht-icoon--purple {
    background: color-mix(in srgb, #9251d8 14%, var(--surface));
    color: #7a36c5;
}

.klant-overzicht-statistiek-kopie {
    display: grid;
    min-width: 0;
}

.klant-overzicht-statistiek-titel,
.klant-overzicht-statistiek-waarde {
    margin: 0;
}

.klant-overzicht-statistiek-titel {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.klant-overzicht-statistiek-waarde {
    margin-top: 0.125rem;
    font-size: 1.5rem;
    letter-spacing: -0.03em;
}

.klant-overzicht-verwijzing {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    color: var(--primary);
    font-size: 0.8125rem;
}

.klant-overzicht-verwijzing .web-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.klant-overzicht-sectie {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 0.35rem 1.25rem rgb(30 37 45 / 4%);
}

.klant-overzicht-sectie-kop {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.klant-overzicht-sectie-icoon {
    display: grid;
    width: 2rem;
    height: 2rem;
    color: var(--beheer-icon);
    place-items: center;
}

.klant-overzicht-sectie-titel,
.klant-overzicht-sectie-beschrijving {
    margin: 0;
}

.klant-overzicht-sectie-titel {
    font-size: 1.05rem;
}

.klant-overzicht-sectie-beschrijving {
    margin-top: 0.125rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.klant-overzicht-kolommen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
}

.klant-overzicht-gegevens {
    display: grid;
}

.klant-overzicht-klantgegevens {
    padding: 0;
    overflow: hidden;
}

.klant-overzicht-klantgegevens-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.klant-overzicht-klantgegevens-identiteit {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
}

.klant-overzicht-klantgegevens-kop-icoon {
    display: grid;
    flex: 0 0 auto;
    width: 3.25rem;
    height: 3.25rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border-radius: 999px;
    color: var(--primary);
    place-items: center;
}

.klant-overzicht-klantgegevens-kop-icoon .web-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.klant-overzicht-klantgegevens-bewerken {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 2.5rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    font-size: 0.875rem;
}

.klant-overzicht-klantgegevens-bewerken > .web-icon {
    color: var(--primary);
}

.klant-overzicht-gegeven {
    display: grid;
    grid-template-columns: 2.5rem minmax(8rem, 11rem) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.klant-overzicht-gegeven:nth-child(even) {
    background: color-mix(in srgb, var(--surface-raised) 72%, var(--page-background));
}

.klant-overzicht-gegeven:last-child {
    border-bottom: 0;
}

.klant-overzicht-gegeven-icoon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    border-radius: 0.875rem;
    color: var(--primary);
    place-items: center;
}

.klant-overzicht-gegeven-icoon .web-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.klant-overzicht-gegeven-label {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.klant-overzicht-gegeven-waarde {
    overflow-wrap: anywhere;
    font-size: 1rem;
}

.klant-overzicht-activiteiten {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.klant-overzicht-activiteit {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) minmax(8rem, auto);
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.klant-overzicht-activiteit-icoon {
    width: 2rem;
    height: 2rem;
}

.klant-overzicht-activiteit-icoon .web-icon {
    width: 1rem;
    height: 1rem;
}

.klant-overzicht-activiteit-titel,
.klant-overzicht-activiteit-beschrijving {
    margin: 0;
}

.klant-overzicht-activiteit-titel {
    font-size: 0.8125rem;
}

.klant-overzicht-activiteit-beschrijving,
.klant-overzicht-activiteit-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.klant-overzicht-activiteit-beschrijving {
    margin-top: 0.0625rem;
}

.klant-overzicht-activiteit-meta {
    text-align: right;
}

@media (max-width: 80rem) {
    .klant-overzicht-statistieken {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 62rem) {
    .klant-overzicht-kolommen {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 46rem) {
    .klant-overzicht {
        padding: 1rem;
    }

    .klant-overzicht-statistieken {
        grid-template-columns: 1fr;
    }

    .klant-overzicht-gegeven {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .klant-overzicht-gegeven-waarde {
        grid-column: 2;
    }

    .klant-overzicht-klantgegevens-kop {
        align-items: flex-start;
        padding: 1rem;
    }

    .klant-overzicht-klantgegevens-kop-icoon {
        width: 3rem;
        height: 3rem;
    }

    .klant-overzicht-klantgegevens-bewerken {
        padding: 0.5rem;
    }

    .klant-overzicht-klantgegevens-bewerken span {
        display: none;
    }

    .klant-overzicht-activiteit {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .klant-overzicht-activiteit-meta {
        grid-column: 2;
        text-align: left;
    }
}

.beheer-tab-label {
    display: flex;
    align-self: stretch;
    align-items: center;
    margin-bottom: -1px;
    padding-bottom: 0.625rem;
    border-bottom: 0.1875rem solid transparent;
}

.beheer-tab--active .beheer-tab-label {
    border-bottom-color: var(--primary);
}

.beheer-tab-count {
    display: grid;
    min-width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.5rem;
    padding: 0 0.375rem;
    background: var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    place-items: center;
}

.beheer-form-field {
    display: grid;
    align-content: start;
    gap: 0.375rem;
}

.bedrijfssluiting-periode-veld {
    position: relative;
}

.bedrijfssluiting-periode-ongeldig {
    border: 2px solid #b9352e;
    background: color-mix(in srgb, #b9352e 8%, var(--surface-raised));
    box-shadow: 0 0 0 3px color-mix(in srgb, #b9352e 28%, transparent);
}

.bedrijfssluiting-periode-melding {
    position: absolute;
    z-index: 10;
    top: calc(100% - 0.125rem);
    left: 0;
    max-width: min(28rem, calc(100vw - 2rem));
    padding: 0.5rem 0.75rem;
    background: #b9352e;
    border-radius: var(--radius-control);
    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 18%);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
}

.bedrijfssluiting-periode-melding::before {
    position: absolute;
    top: -0.25rem;
    left: 0.875rem;
    width: 0.5rem;
    height: 0.5rem;
    background: #b9352e;
    content: '';
    transform: rotate(45deg);
}

.beheer-form-instruction {
    margin: 0 0 0.25rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.beheer-form-label {
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3125rem;
}

.beheer-form-input {
    width: 100%;
    height: 2.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    font: 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
}

.beheer-form-color-input {
    width: 4rem;
    padding: 0.25rem;
    cursor: pointer;
}

.balkenplanning-kleurkeuzes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.balkenplanning-standaardkleur-veld {
    display: grid;
    align-content: start;
    gap: 0.375rem;
}

.balkenplanning-standaardkleur-label {
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3125rem;
}

.balkenplanning-kleurkiezer {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 2px solid var(--border);
    border-radius: 999px;
    background: var(--balkenplanning-blok-kleur);
    cursor: pointer;
}

.balkenplanning-kleurkiezer:hover,
.balkenplanning-kleurkiezer:focus-visible {
    border-color: var(--primary);
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-form-textarea {
    height: auto;
    min-height: 6rem;
    resize: vertical;
}

.beheer-form-input--unavailable {
    display: flex;
    align-items: center;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--surface-raised) 70%, var(--border));
    cursor: default;
}

.beheer-form-help {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.beheer-form-input::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.beheer-form-input:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.beheer-form-search-control {
    position: relative;
    display: flex;
    align-items: center;
}

.beheer-form-search-control > .web-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.beheer-form-search-control > .beheer-form-input {
    padding-left: 2.25rem;
}

.calculatiesjabloon-regels {
    display: grid;
    gap: 1rem;
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.calculatiesjabloon-regels--zonder-scheiding {
    margin-top: 0;
    border-top: 0;
}

.calculatiesjabloon-regels-kop {
    display: grid;
    gap: 0.25rem;
}

.calculatiesjabloon-regels-titel,
.calculatiesjabloon-regel-titel {
    margin: 0;
    color: var(--text);
}

.calculatiesjabloon-regels-titel {
    font-size: 1.125rem;
    line-height: 1.5;
}

.calculatiesjabloon-regels-beschrijving {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.calculatiesjabloon-tabel-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
}

.calculatiesjabloon-tabel {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    table-layout: auto;
    text-align: left;
}

.calculatiesjabloon-tabel th,
.calculatiesjabloon-tabel td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.calculatiesjabloon-tabel th {
    background: var(--surface-raised);
    color: var(--text-muted);
    font: 600 0.8125rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    white-space: nowrap;
}

.calculatiesjabloon-tabel tbody tr {
    transition: background-color 120ms ease;
}

.calculatiesjabloon-tabel tbody tr:last-child td {
    border-bottom: 0;
}

.calculatiesjabloon-tabel tbody tr:hover {
    background: var(--page-accent);
}

.calculatiesjabloon-tabel tbody tr.calculatiesjabloon-regel--slepen {
    background: var(--page-accent);
    opacity: 0.65;
}

.calculatiesjabloon-tabel tbody tr.calculatiesjabloon-regel--open {
    position: relative;
    z-index: 40;
}

.calculatiesjabloon-th--volgorde,
.calculatiesjabloon-cel--volgorde {
    width: 2rem;
    text-align: center;
}

.calculatiesjabloon-regel-sleephandvat {
    display: inline-grid;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-muted);
    cursor: grab;
    place-items: center;
}

.calculatiesjabloon-regel-sleephandvat:active {
    cursor: grabbing;
}

.calculatiesjabloon-th--product,
.calculatiesjabloon-cel--product {
    min-width: 14rem;
}

.calculatiesjabloon-input-product,
.calculatiesjabloon-input-hoeveelheid {
    width: 100%;
}

.calculatiesjabloon-cel--product .single-select-control .single-select-input {
    height: 2.375rem;
    font-size: 0.875rem;
}

.calculatiesjabloon-th--soort,
.calculatiesjabloon-cel--soort {
    width: 5.5rem;
    text-align: left;
}

.calculatiesjabloon-badge-soort {
    display: inline-flex;
    align-items: center;
    min-height: 1.625rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

.calculatiesjabloon-th--hoeveelheid,
.calculatiesjabloon-cel--hoeveelheid {
    width: 5.5rem;
    text-align: right;
}

.calculatiesjabloon-cel--hoeveelheid input {
    width: 100%;
    min-width: 4.5rem;
    height: 2.375rem;
    padding: 0.375rem 0.5rem;
    text-align: right;
    font-size: 0.875rem;
}

.calculatiesjabloon-th--eenheid,
.calculatiesjabloon-cel--eenheid {
    width: 3.5rem;
    text-align: left;
}

.calculatiesjabloon-cel-eenheid {
    font-size: 0.875rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.calculatiesjabloon-th--kostprijs,
.calculatiesjabloon-cel--kostprijs {
    width: 5.25rem;
    text-align: right;
    white-space: nowrap;
}

.calculatiesjabloon-th--totaal-inkoop,
.calculatiesjabloon-cel--totaal-inkoop {
    width: 5.75rem;
    text-align: right;
    white-space: nowrap;
}

.calculatiesjabloon-th--marge,
.calculatiesjabloon-cel--marge {
    width: 4.5rem;
    text-align: right;
    white-space: nowrap;
}

.calculatiesjabloon-th--verkoopprijs,
.calculatiesjabloon-cel--verkoopprijs {
    width: 5.25rem;
    text-align: right;
    white-space: nowrap;
}

.calculatiesjabloon-th--totaal-verkoop,
.calculatiesjabloon-cel--totaal-verkoop {
    width: 5.75rem;
    text-align: right;
    white-space: nowrap;
}

.calculatiesjabloon-cel-prijs,
.calculatiesjabloon-cel-marge {
    display: block;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--text);
}

.calculatiesjabloon-cel-marge {
    color: var(--text-muted);
}

.calculatiesjabloon-th--actie,
.calculatiesjabloon-cel--actie {
    width: 2.25rem;
    text-align: center;
}

.calculatiesjabloon-regel-verwijderen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0.375rem;
    color: var(--danger-action, #ef4444);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.calculatiesjabloon-regel-verwijderen:hover {
    background: color-mix(in srgb, var(--danger-action, #ef4444) 14%, transparent);
    color: var(--danger-action-hover, #dc2626);
}

.calculatiesjabloon-regel-verwijderen:focus-visible,
.calculatiesjabloon-regels-toevoegen:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.calculatiesjabloon-regel-verwijderen:disabled {
    visibility: hidden;
}

.calculatiesjabloon-regels-voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.calculatiesjabloon-regels-toevoegen {
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
}

.calculatiesjabloon-totalen-grid {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.calculatiesjabloon-totaal-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
}

.calculatiesjabloon-totaal-item--primair {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}

.calculatiesjabloon-totaal-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.calculatiesjabloon-totaal-bedrag {
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.calculatiesjabloon-totaal-item--primair .calculatiesjabloon-totaal-bedrag {
    color: var(--primary);
    font-size: 1rem;
    font-weight: 700;
}

@media (max-width: 48rem) {
    .calculatiesjabloon-totalen-grid {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .calculatiesjabloon-totaal-item {
        justify-content: space-between;
    }
}

.multiple-select-autocomplete {
    position: relative;
}

.paneel-acties-tooltip {
    position: relative;
    display: inline-flex;
}

.paneel-acties-tooltip::after {
    position: absolute;
    z-index: 2;
    top: calc(100% + 0.5rem);
    right: 0;
    width: max-content;
    max-width: min(22rem, calc(100vw - 2rem));
    padding: 0.5rem 0.625rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    content: attr(data-tooltip);
    font: 400 0.875rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-in-out;
}

.paneel-acties-tooltip:hover::after {
    opacity: 1;
}

.multiple-select-control,
.multiple-select-options {
    display: none;
}

.multiple-select-autocomplete--enhanced .multiple-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    white-space: nowrap;
}

.multiple-select-autocomplete--enhanced .multiple-select-control {
    display: flex;
    box-sizing: border-box;
    height: 2.5rem;
    align-items: center;
    gap: 0.375rem;
    padding: 0 0.375rem 0 0.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    cursor: text;
}

.multiple-select-autocomplete--enhanced .multiple-select-control:focus-within {
    border-color: var(--focus-ring);
    box-shadow: inset 0 0 0 1px var(--focus-ring);
}

.multiple-select-selections {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
    gap: 0.375rem;
}

.multiple-select-search {
    min-width: 8rem;
    min-height: 1.75rem;
    flex: 1 1 10rem;
    padding: 0.25rem 0.375rem;
    background: transparent;
    border: 0;
    color: var(--text);
    font: 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    outline: 0;
}

.multiple-select-search::placeholder {
    color: var(--text-muted);
    opacity: 1;
}

.multiple-select-search::-webkit-search-cancel-button {
    display: none;
}

.multiple-select-chip {
    display: none;
    min-height: 1.75rem;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    background: color-mix(in srgb, var(--primary) 13%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    border-radius: 999px;
    color: var(--text);
    font-size: 0.8125rem;
}

.multiple-select-chip-remove,
.multiple-select-clear,
.multiple-select-toggle {
    display: inline-grid;
    flex: 0 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: currentColor;
    cursor: pointer;
    place-items: center;
}

.multiple-select-chip-remove {
    width: 1.25rem;
    height: 1.25rem;
}

.multiple-select-clear,
.multiple-select-toggle {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--text-muted);
}

.multiple-select-chip-remove:hover,
.multiple-select-clear:hover,
.multiple-select-toggle:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

.multiple-select-chip-remove:focus-visible,
.multiple-select-clear:focus-visible,
.multiple-select-toggle:focus-visible,
.multiple-select-option:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.multiple-select-toggle .web-icon {
    transition: transform 160ms ease;
}

.multiple-select-autocomplete--open .multiple-select-toggle .web-icon {
    transform: rotate(180deg);
}

.multiple-select-autocomplete--enhanced .multiple-select-options {
    display: grid;
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.375rem);
    right: 0;
    left: 0;
    max-height: min(22rem, 60vh);
    padding: 0.375rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow);
    overflow-y: auto;
}

.multiple-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 0.375rem;
    color: var(--text);
    cursor: pointer;
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    text-align: left;
}

.multiple-select-option:hover {
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    color: var(--primary);
}

.multiple-select-option--selected {
    background: color-mix(in srgb, var(--primary) 24%, var(--surface));
    color: var(--primary);
}

.multiple-select-option--selected:hover {
    background: color-mix(in srgb, var(--primary) 32%, var(--surface));
    color: var(--primary);
}

.multiple-select-option-check {
    display: none;
    flex: 0 0 auto;
}

.multiple-select-option--selected .multiple-select-option-check {
    display: inline-flex;
}

.multiple-select-empty {
    margin: 0;
    padding: 0.75rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.multiple-select-autocomplete [hidden] {
    display: none;
}

.single-select-autocomplete {
    position: relative;
    width: 100%;
}

.single-select-autocomplete--open {
    z-index: 50;
}

.single-select-autocomplete .single-select-native,
.single-select-autocomplete--enhanced .single-select-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    white-space: nowrap;
}

.single-select-control {
    position: relative;
    display: flex;
    align-items: center;
}

.single-select-control .single-select-input {
    width: 100%;
    padding-right: 2.5rem;
    cursor: text;
}

.single-select-toggle {
    position: absolute;
    right: 0.375rem;
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 999px;
    color: var(--text-muted);
    cursor: pointer;
    place-items: center;
}

.single-select-toggle:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
}

.single-select-toggle:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 1px;
}

.single-select-toggle-indicator {
    width: 0;
    height: 0;
    border-top: 0.375rem solid currentColor;
    border-right: 0.3125rem solid transparent;
    border-left: 0.3125rem solid transparent;
    transition: transform 160ms ease;
}

.single-select-autocomplete--open .single-select-toggle-indicator {
    transform: rotate(180deg);
}

.single-select-options {
    display: grid;
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.375rem);
    right: 0;
    left: 0;
    max-height: 15rem;
    padding: 0.375rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow);
    overflow-y: auto;
}

.single-select-options--zwevend {
    position: fixed;
    z-index: 1000;
    right: auto;
    bottom: auto;
}

.single-select-option {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 0;
    border-radius: 0.375rem;
    color: var(--text);
    cursor: pointer;
    font: 400 0.875rem/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
    text-align: left;
}

.single-select-option:hover,
.single-select-option:focus-visible {
    background: color-mix(in srgb, var(--primary) 9%, var(--surface));
    color: var(--primary);
    outline: 0;
}

.single-select-option--selected {
    font-weight: 600;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary);
}

.single-select-empty {
    margin: 0;
    padding: 0.75rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    text-align: center;
}

.single-select-autocomplete [hidden] {
    display: none;
}

@media (max-width: 46rem) {
    .multiple-select-search {
        min-width: 8rem;
    }
}

.beheer-form-error {
    margin: 0;
    padding: 0.75rem 1rem;
    background: #fff7f6;
    border: 1px solid #e8b5b0;
    border-left: 0.25rem solid #b9352e;
    border-radius: 0.5rem;
    color: #7b2420;
    font-size: 0.875rem;
}

.beheer-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--surface-raised);
    border-top: 1px solid var(--border);
    border-radius: 0 0 0.75rem 0.75rem;
}

.beheer-form-footer-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.beheer-form-footer-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: auto;
}

.beheer-form-footer .beheer-primary-action,
.beheer-form-footer .beheer-secondary-action {
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
}

.beheer-primary-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    width: fit-content;
    min-height: 3rem;
    padding: 0.625rem 1rem;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: var(--radius-control);
    color: var(--primary-text);
    cursor: pointer;
    font-weight: 400;
    text-decoration: none;
}

.beheer-primary-action:hover:not(:disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.beheer-primary-action:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.beheer-primary-action.beheer-destructive-action {
    background: var(--danger-action);
    border-color: var(--danger-action);
    color: var(--danger-action-text);
}

.beheer-primary-action.beheer-destructive-action:hover {
    background: var(--danger-action-hover);
    border-color: var(--danger-action-hover);
}

.beheer-secondary-action {
    display: inline-flex;
    width: fit-content;
    min-height: 3rem;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.625rem 1rem;
    background: var(--surface);
    border: 1px solid var(--primary);
    border-radius: var(--radius-control);
    color: var(--primary);
    cursor: pointer;
    font-weight: 400;
    text-decoration: none;
}

.beheer-secondary-action:hover {
    background: var(--page-accent);
}

.beheer-secondary-action:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 46rem) {
    .beheer-body {
        display: block;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .beheer-layout {
        display: grid;
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .beheer-header {
        z-index: 40;
        min-height: 4.25rem;
        padding: 0.625rem 1rem;
    }

    .beheer-mobile-navigation-toggle {
        display: grid;
        width: 2.75rem;
        height: 2.75rem;
        padding: 0;
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius-control);
        color: var(--text);
        cursor: pointer;
        place-items: center;
    }

    .beheer-mobile-navigation-toggle .web-icon--sluiten {
        display: none;
    }

    .beheer-body--mobile-navigation-open .beheer-mobile-navigation-toggle .web-icon--menu {
        display: none;
    }

    .beheer-body--mobile-navigation-open .beheer-mobile-navigation-toggle .web-icon--sluiten {
        display: block;
    }

    .beheer-mobile-navigation-toggle:focus-visible,
    .beheer-mobile-logout:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 2px;
    }

    .beheer-header-actions {
        gap: 0.5rem;
    }

    .beheer-header-actions .beheer-logout {
        display: none;
    }

    .beheer-header .kleurmodus-toggle {
        width: 2.75rem;
        height: 2.75rem;
        background: var(--surface-raised);
    }

    .hovenierportaal-navigation {
        position: fixed;
        z-index: 30;
        inset: 4.25rem 0 0;
        display: grid;
        align-content: start;
        min-height: calc(100dvh - 4.25rem);
        overflow-y: auto;
        background: var(--surface);
        opacity: 0;
        pointer-events: none;
        transform: translateX(-100%);
        transition: opacity 180ms ease, transform 220ms ease, visibility 220ms ease;
        visibility: hidden;
    }

    .beheer-layout--mobile-navigation-open .hovenierportaal-navigation {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(0);
        visibility: visible;
    }

    .beheer-navigation {
        position: relative;
        top: auto;
        align-self: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 1rem;
        border: 0;
        overflow: visible;
    }

    .beheer-layout--collapsed .beheer-navigation {
        width: 100%;
        padding: 1rem;
    }

    .beheer-layout--collapsed .beheer-navigation-link {
        justify-self: stretch;
        justify-content: flex-start;
        width: 100%;
        min-height: 3.25rem;
        height: auto;
        margin: 0;
        padding: 0.75rem 0.875rem;
        font-size: inherit;
    }

    .beheer-layout--collapsed .beheer-navigation-link .web-icon {
        margin-right: 0.75rem;
    }

    .beheer-layout--collapsed .beheer-navigation-submenu {
        display: grid;
    }

    .beheer-navigation-toggle {
        display: none;
    }

    .application-content {
        overflow-y: visible;
    }

    .beheer-navigation-link {
        width: 100%;
        margin-right: 0;
        padding: 0.75rem 0.875rem;
    }

    .beheer-navigation-submenu {
        margin-right: 0;
    }

    .beheer-mobile-logout {
        display: inline-flex;
        width: calc(100% - 2rem);
        min-height: 3.25rem;
        align-items: center;
        gap: 0.75rem;
        margin: 0 1rem 1.5rem;
        padding: 0.75rem 0.875rem;
        background: transparent;
        border: 0;
        border-top: 1px solid var(--border);
        color: var(--text);
        cursor: pointer;
        font: inherit;
        font-weight: 400;
        text-align: left;
    }

    .beheer-paneel-header,
    .beheer-form-content,
    .beheer-form-footer {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .beheer-paneel-header {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 1.25rem;
    }

    .beheer-paneel-header-extra--met-status {
        margin-right: 0;
    }

    .datatable-werkbalk {
        padding-right: 2.5rem;
        padding-left: 2.5rem;
    }

    .datatable-table th,
    .datatable-table td {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .datatable-table-scroll {
        padding-top: 0.75rem;
        padding-right: 1.25rem;
        padding-left: 1.25rem;
        overflow-x: visible;
    }

    .datatable-table {
        display: block;
        min-width: 0;
    }

    .datatable-table thead {
        display: none;
    }

    .datatable-table tbody {
        display: grid;
        gap: 0.75rem;
    }

    .datatable-table tbody tr {
        display: grid;
        height: auto;
        padding: 0.5rem 1rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-control);
    }

    .datatable-table tbody td {
        display: grid;
        grid-template-columns: minmax(6.5rem, 40%) minmax(0, 1fr);
        width: 100%;
        height: auto;
        min-height: 2.25rem;
        align-items: center;
        gap: 0.75rem;
        padding: 0.375rem 0;
        border-bottom: 0;
        overflow-wrap: anywhere;
    }

    .datatable-table tbody td[data-datatable-kolom-label]::before {
        color: var(--text-muted);
        content: attr(data-datatable-kolom-label);
        font-size: 0.8125rem;
        font-weight: 650;
    }

    .datatable-table tbody .datatable-action-cell {
        display: flex;
        grid-column: 1 / -1;
        width: auto;
        min-height: 2.75rem;
        justify-content: flex-end;
        margin-top: 0.25rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
        text-align: right;
    }

    .datatable-table tbody .datatable-action-cell:empty {
        display: none;
    }

    .datatable-action-cell > form {
        margin: 0;
    }

    .datatable-row-actions {
        flex-wrap: wrap;
    }

    .paneel-acties {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

.beheer-dashboard {
    display: grid;
    width: 100%;
    gap: 1.25rem;
}

.beheer-dashboard-hero,
.beheer-dashboard-statistic,
.beheer-dashboard-section,
.beheer-dashboard-about {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: 0 0.75rem 2rem rgb(30 37 45 / 7%);
}

.beheer-dashboard-hero {
    display: grid;
    position: relative;
    min-height: 12.75rem;
    align-items: center;
    overflow: hidden;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    background:
        radial-gradient(circle at 82% 140%, color-mix(in srgb, var(--primary) 18%, transparent) 0 18rem, transparent 18.1rem),
        linear-gradient(105deg, var(--surface) 0 62%, color-mix(in srgb, var(--primary) 9%, var(--surface)) 100%);
}

.beheer-dashboard-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 47rem;
}

.beheer-dashboard-kicker {
    margin: 0 0 0.875rem;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.beheer-dashboard-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.beheer-dashboard-introduction {
    max-width: 43rem;
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
}

.beheer-dashboard-hero-art {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            var(--surface) 0%,
            color-mix(in srgb, var(--surface) 96%, transparent) 32%,
            transparent 68%
        ),
        url('/assets/images/beheer-dashboard-hero.png') center / cover no-repeat;
    opacity: var(--beheer-dashboard-hero-image-opacity);
    pointer-events: none;
}

.beheer-dashboard-statistics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.beheer-dashboard-statistic {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 1rem;
    min-height: 8rem;
    padding: 1.25rem 1.5rem;
    color: var(--text);
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

a.beheer-dashboard-statistic:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow);
    transform: translateY(-0.125rem);
}

.beheer-dashboard-statistic:focus-visible,
.beheer-dashboard-quick-action:focus-visible,
.beheer-dashboard-activity-link:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.beheer-dashboard-statistic > .web-icon--volgende,
.beheer-dashboard-quick-action > .web-icon--volgende {
    color: var(--text-muted);
}

.beheer-dashboard-statistic-icon,
.beheer-dashboard-activity-icon,
.beheer-dashboard-about-icon {
    display: grid;
    flex: 0 0 auto;
    border-radius: 999px;
    place-items: center;
}

.beheer-dashboard-statistic-icon {
    width: 4.5rem;
    height: 4.5rem;
}

.beheer-dashboard-statistic-icon .web-icon {
    width: 2rem;
    height: 2rem;
}

.beheer-dashboard-statistic-icon--green,
.beheer-dashboard-activity-icon--green {
    background: color-mix(in srgb, var(--primary) 13%, var(--surface));
    color: var(--primary);
}

.beheer-dashboard-statistic-icon--amber,
.beheer-dashboard-activity-icon--amber {
    background: color-mix(in srgb, #dda52f 18%, var(--surface));
    color: color-mix(in srgb, #b87b00 82%, var(--text));
}

.beheer-dashboard-statistic-icon--red,
.beheer-dashboard-activity-icon--red {
    background: color-mix(in srgb, #d6534d 15%, var(--surface));
    color: color-mix(in srgb, #c33934 82%, var(--text));
}

.beheer-dashboard-statistic-title,
.beheer-dashboard-statistic-value,
.beheer-dashboard-statistic-description {
    display: block;
    margin: 0;
}

.beheer-dashboard-statistic-copy,
.beheer-dashboard-quick-action-copy {
    display: grid;
    min-width: 0;
}

.beheer-dashboard-statistic-title {
    font-size: 0.9375rem;
}

.beheer-dashboard-statistic-value {
    margin-top: 0.125rem;
    font-size: 1.75rem;
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.beheer-dashboard-statistic-description {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.beheer-dashboard-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 1.25rem;
}

.beheer-dashboard-section {
    min-width: 0;
    padding: 1.5rem;
}

.beheer-dashboard-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    justify-content: space-between;
}

.beheer-dashboard-section-title,
.beheer-dashboard-section-introduction {
    margin: 0;
}

.beheer-dashboard-section-title {
    font-size: 1.25rem;
    letter-spacing: -0.025em;
}

.beheer-dashboard-section-introduction {
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.beheer-dashboard-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.beheer-dashboard-quick-action {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    min-width: 0;
    align-items: center;
    gap: 0.75rem;
    min-height: 5.25rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    text-decoration: none;
}

.beheer-dashboard-quick-action:hover {
    background: var(--beheer-navigation-hover-surface);
    border-color: var(--primary);
}

.beheer-dashboard-quick-action-icon {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--primary);
    place-items: center;
}

.beheer-dashboard-quick-action-icon .web-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.beheer-dashboard-quick-action-title,
.beheer-dashboard-quick-action-description {
    display: block;
    margin: 0;
}

.beheer-dashboard-quick-action-title {
    font-size: 0.875rem;
    font-weight: 700;
}

.beheer-dashboard-quick-action-description {
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.beheer-dashboard-activity-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.375rem;
    color: var(--primary);
    font-size: 0.8125rem;
    text-decoration: none;
}

.beheer-dashboard-activity-link:hover {
    text-decoration: underline;
}

.beheer-dashboard-activity-list {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.beheer-dashboard-activity-item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
}

.beheer-dashboard-activity-item:last-child {
    border-bottom: 0;
}

.beheer-dashboard-activity-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.beheer-dashboard-activity-title,
.beheer-dashboard-activity-description {
    margin: 0;
}

.beheer-dashboard-activity-title {
    font-size: 0.875rem;
}

.beheer-dashboard-activity-description,
.beheer-dashboard-activity-time {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.beheer-dashboard-activity-description {
    margin-top: 0.125rem;
}

.beheer-dashboard-activity-time {
    white-space: nowrap;
}

.beheer-dashboard-about {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.beheer-dashboard-about-icon {
    width: 3rem;
    height: 3rem;
    background: color-mix(in srgb, var(--primary) 13%, var(--surface));
    color: var(--primary);
}

.beheer-dashboard-about-title,
.beheer-dashboard-about-text {
    margin: 0;
}

.beheer-dashboard-about-title {
    font-size: 1rem;
}

.beheer-dashboard-about-text {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.hovenierportaal-welcome {
    max-width: 46rem;
}

.exception-shell-body {
    background: var(--page-background);
}

.exception-shell-main {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    align-content: start;
    width: min(100%, 96rem);
    padding: clamp(1.5rem, 5vw, 4rem);
}

.not-found-main {
    display: grid;
    width: min(100%, 96rem);
    min-height: calc(100vh - 4.75rem);
    align-content: start;
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 4rem);
}

.exception-generic-content {
    display: grid;
    width: min(100%, 42rem);
    align-self: center;
    justify-self: center;
    justify-items: center;
    text-align: center;
}

.not-found-card {
    width: 100%;
    align-self: start;
    justify-self: stretch;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: 0 1rem 2.75rem rgb(30 37 45 / 8%);
}

.not-found-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: var(--beheer-paneel-header-background);
    border-bottom: 1px solid var(--border);
}

.not-found-banner-icon {
    display: grid;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    background: var(--surface);
    border-radius: 999px;
    color: #d99a22;
    place-items: center;
}

.not-found-banner-icon .web-icon {
    width: 1.4rem;
    height: 1.4rem;
}

.not-found-banner-title {
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.not-found-banner-message {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.not-found-content {
    display: grid;
    min-height: 35rem;
    justify-items: center;
    align-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.not-found-illustration {
    display: grid;
    position: relative;
    width: 9rem;
    height: 8rem;
    margin-bottom: 1.25rem;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border-radius: 50% 45% 48% 42%;
    color: #3a8a67;
    place-items: center;
}

.not-found-document-icon .web-icon {
    width: 5rem;
    height: 5rem;
}

.not-found-error-icon {
    display: grid;
    position: absolute;
    right: 0;
    bottom: 0.5rem;
    width: 3.25rem;
    height: 3.25rem;
    background: var(--surface);
    border: 0.25rem solid var(--surface);
    border-radius: 999px;
    color: #d6534d;
    filter: drop-shadow(0 0.3rem 0.4rem rgb(30 37 45 / 15%));
    place-items: center;
}

.not-found-error-icon .web-icon {
    width: 2.75rem;
    height: 2.75rem;
}

.not-found-title {
    margin: 0;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    letter-spacing: -0.04em;
}

.not-found-message {
    max-width: 35rem;
    margin: 0.75rem 0 0;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.65;
}

.not-found-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.75rem;
}

.not-found-actions .beheer-primary-action,
.not-found-actions .beheer-secondary-action {
    min-width: 9.5rem;
}

.not-found-content .exception-id {
    min-width: min(100%, 25rem);
    margin-top: 2rem;
}

.exception-alert-icon {
    display: grid;
    width: 5.5rem;
    height: 5.5rem;
    margin-bottom: 1.25rem;
    background: color-mix(in srgb, #d6534d 16%, var(--surface));
    border-radius: 999px;
    color: #ad201d;
    place-items: center;
}

.exception-alert-icon .web-icon {
    width: 2.25rem;
    height: 2.25rem;
}

.exception-alert-icon--small {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0;
}

.exception-alert-icon--small .web-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.exception-generic-title,
.bootstrap-exception-title {
    margin: 0 0 0.75rem;
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.045em;
    line-height: 1.1;
}

.exception-generic-message,
.bootstrap-exception-message {
    margin: 0.125rem 0;
    color: var(--text-muted);
    font-size: 1.0625rem;
}

.exception-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.exception-action {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.625rem;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    font-weight: 400;
    text-decoration: none;
}

.exception-action--primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-text);
}

.exception-action--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.exception-action--secondary {
    background: var(--surface);
    color: var(--text);
}

.exception-action--secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.exception-action:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.exception-id {
    min-width: min(100%, 20rem);
    margin: 2.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8125rem;
    text-align: center;
}

.exception-detail-content {
    display: grid;
    position: relative;
    width: min(100%, 76rem);
    gap: 1rem;
    justify-self: center;
}

.exception-environment-badge {
    position: absolute;
    z-index: 1;
    top: -3.5rem;
    right: 0;
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, #e48356 16%, var(--surface));
    border-radius: 0 0 0.5rem 0.5rem;
    color: #a53a2d;
    font-size: 0.75rem;
    font-weight: 750;
    letter-spacing: 0.03em;
}

.exception-summary-card,
.exception-panel,
.exception-collapsed-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    box-shadow: 0 0.5rem 1.5rem rgb(30 37 45 / 5%);
}

.exception-summary-card {
    overflow: hidden;
    background: color-mix(in srgb, #d6534d 7%, var(--surface));
    border-color: color-mix(in srgb, #d6534d 38%, var(--border));
}

.exception-detail-heading {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
}

.exception-detail-title {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: clamp(1.5rem, 4vw, 2rem);
    letter-spacing: -0.03em;
}

.exception-detail-message {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
}

.exception-location {
    margin: 0.5rem 0 0;
    overflow-wrap: anywhere;
    color: color-mix(in srgb, #d6534d 72%, var(--text));
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8125rem;
}

.exception-summary-card .exception-actions {
    justify-content: flex-start;
    margin: 0;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border-top: 1px solid color-mix(in srgb, #d6534d 38%, var(--border));
}

.exception-panel {
    padding: 1.5rem;
}

.exception-panel-heading {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.exception-panel-title {
    margin: 0 0 1rem;
    font-size: 1rem;
}

.exception-panel-heading .exception-panel-title {
    margin: 0;
}

.exception-trace-copy-button {
    display: inline-flex;
    min-height: 2.5rem;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    padding: 0.5rem 0.875rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
}

.exception-trace-copy-button:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.exception-trace-copy-button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.exception-trace-copy-source {
    position: fixed;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.exception-trace {
    max-height: 28rem;
    margin: 0;
    padding: 1rem;
    overflow: auto;
    background: var(--page-background);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--text);
    font: 0.8125rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace;
    white-space: pre-wrap;
}

.exception-request-grid {
    display: grid;
    gap: 0.5rem;
}

.exception-request-value {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
    gap: 1rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.8125rem;
}

.exception-request-value strong {
    color: var(--text-muted);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-weight: 400;
}

.exception-request-value span {
    overflow-wrap: anywhere;
}

.exception-collapsed-panel {
    overflow: hidden;
}

.exception-collapsed-panel summary {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 650;
}

.exception-collapsed-panel summary .web-icon--uitklappen {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 160ms ease;
}

.exception-collapsed-panel[open] > summary .web-icon--uitklappen {
    transform: rotate(180deg);
}

.exception-panel-count {
    min-width: 1.5rem;
    padding: 0.125rem 0.375rem;
    background: var(--page-accent);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-align: center;
}

.exception-collapsed-panel .exception-request-grid,
.exception-collapsed-copy {
    margin: 0;
    padding: 0 1.5rem 1.25rem;
}

.exception-collapsed-copy {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.bootstrap-exception-body {
    background: var(--page-background);
}

.bootstrap-exception-page {
    display: grid;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 2rem;
    place-items: center;
}

.bootstrap-exception-page::before,
.bootstrap-exception-page::after {
    position: absolute;
    width: min(42vw, 34rem);
    height: min(35vw, 25rem);
    background: #e7f4eb;
    content: '';
    opacity: 0.9;
    transform: rotate(-18deg);
}

.bootstrap-exception-page::before {
    top: -13rem;
    left: -9rem;
    border-radius: 42% 58% 64% 36%;
}

.bootstrap-exception-page::after {
    right: -10rem;
    bottom: -12rem;
    border-radius: 58% 42% 35% 65%;
}

.bootstrap-exception-content {
    display: grid;
    position: relative;
    z-index: 1;
    width: min(100%, 36rem);
    justify-items: center;
    text-align: center;
}

.bootstrap-exception-brand {
    margin: 0 0 2.25rem;
    color: var(--primary);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.bootstrap-exception-content .exception-action {
    margin-top: 2rem;
}

@media (max-width: 46rem) {
    .exception-shell-main {
        min-height: calc(100vh - 5rem);
        padding: 1.25rem;
    }

    .not-found-main {
        padding: 1.25rem;
    }

    .exception-detail-heading,
    .exception-summary-card .exception-actions,
    .exception-panel {
        padding: 1.25rem;
    }

    .exception-request-value {
        grid-template-columns: 1fr;
        gap: 0.125rem;
    }

    .exception-environment-badge {
        top: -1.25rem;
        right: -1.25rem;
    }

    .not-found-banner {
        align-items: flex-start;
        padding: 1.25rem;
    }

    .not-found-content {
        min-height: 30rem;
        padding: 2rem 1.25rem;
    }

    .not-found-actions,
    .not-found-actions .beheer-primary-action,
    .not-found-actions .beheer-secondary-action {
        width: 100%;
    }

    .beheer-dashboard-statistics,
    .beheer-dashboard-columns,
    .beheer-dashboard-quick-actions {
        grid-template-columns: 1fr;
    }

    .beheer-dashboard-hero-art {
        background-position: 68% center;
        opacity: 0.2;
    }

    .beheer-dashboard-statistic {
        grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    }

    .beheer-dashboard-statistic-icon {
        width: 3.5rem;
        height: 3.5rem;
    }

    .beheer-dashboard-section-heading {
        display: grid;
    }

    .beheer-dashboard-activity-item {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .beheer-dashboard-activity-time {
        grid-column: 2;
    }
}

.order-correcties {
    display: grid;
    gap: 1rem;
}

.order-betalingsafspraken {
    display: grid;
    gap: 1rem;
}

.order-betalingsafspraken-kop {
    display: grid;
    gap: 0.25rem;
}

.order-betalingsafspraken-titel,
.order-betalingsafspraak-titel {
    margin: 0;
}

.order-betalingsafspraken-titel {
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3125rem;
}

.order-betalingsafspraken-beschrijving {
    margin: 0;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3125rem;
}

.order-betalingsafspraken-lijst {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.order-betalingsafspraak {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--page-background);
}

.order-betalingsafspraak-kop,
.order-betalingsafspraken-voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.order-betalingsafspraken-voet {
    margin-top: 0.5rem;
}

.order-betalingsafspraak-titel {
    font-size: 0.95rem;
}

.order-betalingsafspraak-velden {
    display: grid;
    grid-template-columns: minmax(8rem, 0.35fr) minmax(16rem, 1.65fr);
    gap: 0.75rem;
}

.order-betalingsafspraak-verwijderen,
.order-betalingsafspraken-toevoegen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    border-radius: 0.55rem;
    font: inherit;
    font-weight: 400;
    cursor: pointer;
}

.order-betalingsafspraak-verwijderen {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--surface);
}

.order-betalingsafspraken-toevoegen {
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.order-betalingsafspraken-totaal {
    margin: 0;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--surface);
}

.order-betalingsafspraken-totaal--geldig {
    color: var(--primary);
    background: var(--page-accent);
}

.order-betalingsafspraken-totaal--ongeldig {
    color: var(--danger-text);
    background: var(--danger-surface);
}

.order-betalingsafspraak-verwijderen:focus-visible,
.order-betalingsafspraken-toevoegen:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 40rem) {
    .order-betalingsafspraak-velden {
        grid-template-columns: 1fr;
    }

    .order-betalingsafspraken-voet {
        align-items: flex-start;
        flex-direction: column;
    }
}

.order-correcties-kop {
    display: grid;
    gap: 0.25rem;
}

.order-correcties-titel,
.order-correctie-titel {
    margin: 0;
}

.order-correcties-titel {
    font-size: 1rem;
}

.order-correcties-beschrijving {
    margin: 0;
    color: var(--text-muted);
}

.order-correcties-lijst {
    display: grid;
    gap: 0.75rem;
}

.order-correctie {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--page-background);
}

.order-correctie-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.order-correctie-titel {
    font-size: 0.95rem;
}

.order-correctie-velden {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(12rem, 1.5fr) minmax(9rem, 0.8fr) minmax(8rem, 0.8fr);
    gap: 0.75rem;
}

.order-correctie-verwijderen,
.order-correcties-toevoegen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    border-radius: 0.55rem;
    font: inherit;
    font-weight: 400;
    cursor: pointer;
}

.order-correctie-verwijderen {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--surface);
}

.order-correcties-toevoegen {
    justify-self: start;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.order-correctie-verwijderen:hover,
.order-correcties-toevoegen:hover {
    filter: brightness(0.96);
}

.order-correctie-verwijderen:focus-visible,
.order-correcties-toevoegen:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 54rem) {
    .order-correctie-velden {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 36rem) {
    .order-correctie-velden {
        grid-template-columns: 1fr;
    }
}

.orderwijziging-regels {
    display: grid;
    gap: 1rem;
}

.orderwijziging-regels-kop {
    display: grid;
    gap: 0.25rem;
}

.orderwijziging-regels-titel,
.orderwijziging-regel-titel {
    margin: 0;
}

.orderwijziging-regels-titel {
    font-size: 1rem;
}

.orderwijziging-regels-beschrijving {
    margin: 0;
    color: var(--text-muted);
}

.orderwijziging-regels-lijst {
    display: grid;
    gap: 0.75rem;
}

.orderwijziging-regel {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--page-background);
}

.orderwijziging-regel-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.orderwijziging-regel-titel {
    font-size: 0.95rem;
}

.orderwijziging-regel-velden {
    display: grid;
    grid-template-columns: repeat(3, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.orderwijziging-regel-velden > [hidden] {
    display: none;
}

.orderwijziging-regel-verwijderen,
.orderwijziging-regels-toevoegen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    border-radius: 0.55rem;
    font: inherit;
    font-weight: 400;
    cursor: pointer;
}

.orderwijziging-regel-verwijderen {
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    color: var(--text);
    background: var(--surface);
}

.orderwijziging-regel-verwijderen[hidden] {
    display: none;
}

.orderwijziging-regels-toevoegen {
    justify-self: start;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--primary);
    color: var(--primary);
    background: transparent;
}

.orderwijziging-regel-verwijderen:focus-visible,
.orderwijziging-regels-toevoegen:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

@media (max-width: 54rem) {
    .orderwijziging-regel-velden {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 36rem) {
    .orderwijziging-regel-velden {
        grid-template-columns: 1fr;
    }
}

.orderwijzigingen-samenvatting,
.orderwijzigingen-overzicht {
    display: grid;
    gap: 1rem;
}

.orderwijzigingen-sectietitel,
.orderwijziging-titel {
    margin: 0;
}

.orderwijzigingen-totalen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.orderwijzigingen-totaal {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface);
}

.orderwijzigingen-totaal span,
.orderwijziging-meta,
.orderwijziging-effect-detail {
    color: var(--text-muted);
}

.orderwijzigingen-totaal--actueel {
    border-color: var(--primary);
    background: var(--page-accent);
}

.orderwijzigingen-leeg {
    margin: 0;
    padding: 1.25rem;
    border: 1px dashed var(--border);
    border-radius: 0.75rem;
    color: var(--text-muted);
}

.orderwijziging-kaart {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface);
}

.orderwijziging-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.orderwijziging-meta {
    margin: 0.25rem 0 0;
}

.orderwijziging-financieel {
    display: grid;
    justify-items: end;
    gap: 0.25rem;
    text-align: right;
}

.orderwijziging-soort {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    color: var(--primary);
    background: var(--page-accent);
}

.orderwijziging-effect {
    font-size: 1.1rem;
}

.orderwijziging-tabel-scroll {
    overflow-x: auto;
}

.orderwijziging-tabel {
    width: 100%;
    border-collapse: collapse;
}

.orderwijziging-tabel th,
.orderwijziging-tabel td {
    padding: 0.7rem;
    border-top: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.orderwijziging-regelomschrijving {
    display: grid;
    gap: 0.2rem;
    min-width: 14rem;
}

.orderwijziging-regelomschrijving span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 48rem) {
    .orderwijzigingen-totalen {
        grid-template-columns: 1fr;
    }

    .orderwijziging-kop {
        flex-direction: column;
    }

    .orderwijziging-financieel {
        justify-items: start;
        text-align: left;
    }
}

.planning-overzicht {
    display: grid;
    gap: 1rem;
    padding: 1.5rem;
}

.planning-overzicht-deelproject {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface-raised);
    overflow: hidden;
}

.planning-overzicht-deelproject-kop {
    display: grid;
    grid-template-columns: minmax(20rem, 1fr) minmax(20rem, 2fr) auto auto;
    gap: 2rem;
    align-items: center;
    padding: 1rem;
}

.planning-overzicht-blok {
    display: grid;
    grid-template-columns: 22rem 12rem max-content minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    padding: 1rem;
}

.planning-overzicht-deelproject-kop {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.planning-overzicht-status {
    grid-column: 3;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    padding: .35rem .65rem;
}

.planning-overzicht-planningblokken-aantal {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .625rem;
    min-height: 2.5rem;
    margin-left: auto;
    padding: .5rem 1rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--primary);
    background: color-mix(in srgb, currentColor 11%, var(--surface));
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.planning-overzicht-planningblokken-indicator {
    width: .625rem;
    height: .625rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
}

.planning-overzicht-blok + .planning-overzicht-blok {
    border-top: 1px solid var(--border);
}

.planning-overzicht-blok {
    position: relative;
    min-height: 8rem;
    padding-right: 1.5rem;
    padding-left: 3.75rem;
}

.planning-overzicht-periode {
    position: relative;
    align-self: stretch;
    display: grid;
    align-content: center;
    gap: .45rem;
    font-weight: 600;
}

.planning-overzicht-periode::before {
    position: absolute;
    top: .75rem;
    bottom: .75rem;
    left: -1.75rem;
    width: .35rem;
    border-radius: 999px;
    background: var(--primary);
    content: '';
}

.planning-overzicht-periode p:last-child {
    color: var(--text-muted);
    font-size: .875rem;
    font-weight: 400;
}

.planning-overzicht-details {
    border-left: 1px solid var(--border);
    padding-left: 1rem;
}

.planning-overzicht-uitvoerders,
.planning-overzicht-uitvoerder-avatars {
    display: inline-flex;
    align-items: center;
}

.planning-overzicht-uitvoerders {
    gap: .625rem;
}

.planning-overzicht-uitvoerder-avatars {
    padding-left: 0;
}

.planning-overzicht-uitvoerder-avatar {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 2px solid var(--surface-raised);
    border-radius: 999px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 15%, var(--surface));
    font-size: .8125rem;
    font-weight: 700;
}

.planning-overzicht-uitvoerder-avatar + .planning-overzicht-uitvoerder-avatar {
    margin-left: -.5rem;
}

.planning-overzicht-periode p,
.planning-overzicht-details p,
.planning-overzicht-deelproject > p {
    margin: 0;
}

.planning-overzicht-deelproject > p {
    border-top: 1px solid var(--border);
    padding: 1rem;
    color: var(--text-muted);
    font-size: .875rem;
}

.planning-overzicht-details p:nth-child(odd) {
    color: var(--text-muted);
    font-size: .85rem;
}

.planning-overzicht-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .75rem;
    color: var(--primary);
    font-weight: 600;
}

.planning-overzicht-status--zonder-acties {
    grid-column: 3;
}

.planning-overzicht-status--geannuleerd {
    color: var(--danger-text);
    background: var(--danger-surface);
}

.planning-overzicht-status--geannuleerd .planning-overzicht-status-indicator {
    background: var(--danger-action);
}

.planning-overzicht-blok > .icoon-acties {
    grid-column: 4;
    justify-self: end;
}

.planning-overzicht-status-indicator {
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background: var(--primary);
}

.planning-overzicht-werkbalk { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: .9rem; border: 1px solid var(--border); border-radius: .65rem; background: color-mix(in srgb, var(--primary) 6%, var(--surface-raised)); }
.planning-overzicht-navigatie { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; }
.planning-overzicht-weergaven { display: inline-flex; gap: .35rem; }
.planning-overzicht-pijlen { display: inline-flex; gap: 0; }
.planning-overzicht-weergaven > *, .planning-overzicht-pijlen a { display: grid; min-height: 2.5rem; place-items: center; border: 1px solid var(--border); border-radius: .5rem; padding: 0 .8rem; color: var(--text); background: var(--surface-raised); font: inherit; text-decoration: none; }
.planning-overzicht-weergave--niet-beschikbaar { opacity: .55; cursor: not-allowed; }
.planning-overzicht-weergave--actief { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 16%, var(--surface)); }
.planning-overzicht-weergaven a:hover { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.planning-overzicht-pijlen a { width: 2.5rem; padding: 0; overflow: hidden; border-radius: 0; font-size: 0; }
.planning-overzicht-pijlen a:first-child { border-radius: .5rem 0 0 .5rem; }
.planning-overzicht-pijlen a:last-child { margin-left: -1px; border-radius: 0 .5rem .5rem 0; }
.planning-overzicht-pijlen a:hover { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.planning-overzicht-pijlen a:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.planning-overzicht-pijlen a:first-child::before { content: '‹'; font-size: 1.5rem; }
.planning-overzicht-pijlen a:last-child::before { content: '›'; font-size: 1.5rem; }
.planning-overzicht-pijlen a::before { display: block; line-height: 1; transform: translateY(-.0625rem); }
.planning-overzicht-week-label { display: inline-flex; align-items: center; gap: .6rem; }
.planning-overzicht-week-label p { margin: 0; font-size: 1.05rem; font-weight: 700; }
.planning-overzicht-week-label span { padding: .3rem .55rem; border: 1px solid color-mix(in srgb, var(--text-muted) 28%, var(--border)); border-radius: 999px; color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 14%, var(--surface)); font-size: .78rem; }
.planning-overzicht-filters { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) auto; gap: .5rem; align-items: end; padding: 0; }
.planning-overzicht-filters .beheer-form-field { min-width: 0; }
.planning-overzicht-filters .beheer-form-label, .planning-overzicht-filters .beheer-form-help { display: none; }
.planning-overzicht-filters button { min-height: 2.75rem; }
.planning-overzicht-filters > button { display: none; }
.planning-overzicht-filters .multiple-select-autocomplete--enhanced .multiple-select-control { align-items: stretch; }
.planning-overzicht-filters .multiple-select-selections { align-content: flex-start; }
.planning-overzicht-filters .multiple-select-search { flex: 1 0 100%; order: -1; min-width: 0; }
.planning-overzicht-filters .multiple-select-chip { min-height: 1.75rem; }
.planningsbord-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.planningsbord { overflow-x: auto; }
.planningsbord-kop, .planningsbord-rij { display: grid; grid-template-columns: 13rem repeat(7, minmax(10rem, 1fr)); min-width: 83rem; }
.planningsbord-rij { --planningsbord-rijhoogte: 10rem; }
.planningsbord-kop { background: color-mix(in srgb, var(--primary) 8%, var(--surface-raised)); font-weight: 700; }
.planningsbord-kop > span, .planningsbord-uitvoerder, .planningsbord-vak { padding: .9rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.planningsbord-uitvoerder { display: flex; height: var(--planningsbord-rijhoogte); align-items: center; gap: .7rem; font-weight: 700; }
.planningsbord-uitvoerder > span { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, var(--surface)); font-size: .9rem; }
.planningsbord-uitvoerder p { margin: 0; }
.planningsbord-uitvoerder p:nth-child(2) { margin-top: .2rem; color: var(--text-muted); font-size: .8rem; font-weight: 400; }
.planningsbord-uitvoerder-capaciteit { display: block; width: 100%; height: .35rem; margin-top: .45rem; border-radius: 999px; background: linear-gradient(90deg, var(--primary) 0 var(--planningsbord-capaciteit, 0%), color-mix(in srgb, var(--text-muted) 20%, transparent) var(--planningsbord-capaciteit, 0%)); }
.planningsbord-vak { display: grid; height: var(--planningsbord-rijhoogte); align-content: start; gap: .5rem; overflow-x: hidden; overflow-y: auto; background: color-mix(in srgb, var(--surface-raised) 45%, var(--surface)); }
.planningsbord-vak > span { color: var(--text-muted); font-size: .8rem; }
.planningsbord-kaart { display: grid; gap: .2rem; padding: .7rem; border: 1px solid var(--primary); border-radius: .5rem; color: var(--text); background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 26%, var(--surface)), color-mix(in srgb, var(--primary) 10%, var(--surface))); box-shadow: inset .25rem 0 var(--primary); cursor: pointer; font: inherit; text-align: left; text-decoration: none; }
.planningsbord-kaart:hover { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 35%, var(--surface)), color-mix(in srgb, var(--primary) 16%, var(--surface))); }
.planningsbord-kaart:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.planningsbord-kaart--geselecteerd { border-width: 2px; box-shadow: inset .25rem 0 var(--primary), 0 0 0 .15rem color-mix(in srgb, var(--primary) 35%, transparent); }
.planningsbord-kaart span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planningsbord-kaart span:first-child { font-weight: 700; }
.planningsbord-kaart span:nth-child(n+2) { color: var(--text-muted); font-size: .8rem; }
.planningsbord-detail { display: grid; align-content: start; gap: 0; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface-raised); overflow: hidden; }
.planningsbord-detail-kop { display: flex; align-items: start; justify-content: space-between; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--border); }
.planningsbord-detail-kop > div { display: grid; gap: .4rem; }
.planningsbord-detail-kop p { margin: 0; font-size: 1.05rem; font-weight: 700; }
.planningsbord-detail-kop span { width: fit-content; padding: .25rem .5rem; border-radius: 999px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); font-size: .78rem; }
.planningsbord-detail-kop a { color: var(--text-muted); font-size: .85rem; }
.planningsbord-detail-veld { display: grid; gap: .2rem; padding: .8rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent); }
.planningsbord-detail-veld:last-child { border-bottom: 0; }
.planningsbord-detail-veld > span { color: var(--text-muted); font-size: .78rem; }
.planningsbord-detail-veld p { margin: 0; }
.planning-inzet-detail-kaart { display: grid; gap: .25rem; padding: 1rem; border: 1px solid var(--border); border-radius: .65rem; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.planning-inzet-detail-twee-kolommen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.planning-inzet-detail-kaart p { margin: 0; }
.planning-inzet-detail-kaart p:first-child { color: var(--text-muted); font-size: .85rem; }
.planning-inzet-detail-kaart p:nth-child(2) { font-weight: 700; }
@media (max-width: 34rem) { .planning-inzet-detail-twee-kolommen { grid-template-columns: 1fr; } }
.planning-inzet-detail-status { width: fit-content; margin: 0; padding: .35rem .7rem; border-radius: 999px; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); font-weight: 700; }
.iframe-modal-form-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.iframe-modal-form-header-copy { display: grid; gap: 0; }
.iframe-modal-form-heading-copy { display: grid; min-width: 0; gap: .1rem; }
.iframe-modal-form-header-pill { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border-radius: 999px; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface)); font-weight: 700; }
.iframe-modal-form-header-pill::before { width: .65rem; height: .65rem; border-radius: 50%; background: var(--primary); content: ''; }

.beheer-body.iframe-modal-form-body {
    --side-panel-font-size: 0.875rem;
    font-size: var(--side-panel-font-size);
}

.iframe-modal-form-body .beheer-form-label,
.iframe-modal-form-body .beheer-form-input,
.iframe-modal-form-body .beheer-form-help,
.iframe-modal-form-body .beheer-form-instruction,
.iframe-modal-form-body .multiple-select-search,
.iframe-modal-form-body .multiple-select-option,
.iframe-modal-form-body .beheer-primary-action,
.iframe-modal-form-body .beheer-secondary-action {
    font-size: var(--side-panel-font-size);
}

.iframe-modal-form-body .beheer-form-help,
.iframe-modal-form-body .beheer-form-instruction {
    font-size: 0.9em;
}


@media (max-width: 64rem) { .planning-overzicht-werkbalk { align-items: stretch; flex-direction: column; } .planning-overzicht-filters { grid-template-columns: 1fr 1fr; } }
@media (min-width: 92rem) { .planningsbord-layout { grid-template-columns: minmax(0, 1fr) 20rem; } }

.beheer-form-date-time {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, .6fr);
    gap: .75rem;
}

.beheer-form-sublabel {
    display: block;
    margin-bottom: .35rem;
    color: var(--muted);
    font-size: .8125rem;
}

@media (max-width: 48rem) {
    .beheer-form-date-time {
        grid-template-columns: 1fr;
    }

    .planning-overzicht-blok {
        grid-template-columns: 1fr;
    }

    .planning-overzicht-status,
    .planning-overzicht-status--zonder-acties {
        grid-column: auto;
    }
}

/* Feature-stijlen die niet in main voorkomen. */


.offertegegevens-kop-titel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.offertegegevens-kop-acties {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.offertegegevens-opslaan-knop {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    border-radius: var(--radius-control, 0.5rem);
    cursor: pointer;
}

.offertegegevens-inhoud--drie-kolommen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.offertegegevens-wijzigen {
    display: grid;
    min-height: 0;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 2.5rem;
}

.offertegegevens-navigatie {
    display: flex;
    align-self: start;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: 0.125rem;
}

.offertegegevens-navigatie-item {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 0;
    border-radius: var(--radius-control, 0.5rem);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
}

.offertegegevens-navigatie-item:hover,
.offertegegevens-navigatie-item--actief {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--text);
}

.offertegegevens-navigatie-item--actief {
    font-weight: 600;
}

.offertegegevens-navigatie-item:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.offertegegevens-paneel {
    display: none;
    min-width: 0;
}

.offertegegevens-paneel--zichtbaar {
    display: block;
}

.offertegegevens-paneel .beheer-form-field {
    margin-bottom: 1.25rem;
}

.offertegegevens-paneel .beheer-form-field:last-child {
    margin-bottom: 0;
}

.offertegegevens-kolom-kop {
    margin: 0 0 1rem 0;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.documentgegevens .offertegegevens-kolom--drie {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.documentgegevens .offertegegevens-kolom--drie:first-child {
    padding-left: 0;
    border-left: none;
}

.documentgegevens .offertegegevens-kolom--drie:last-child {
    padding-right: 0;
}

.documentgegevens .offertegegevens-kolom--drie + .offertegegevens-kolom--drie {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--border);
}

.offertegegevens-kolom--drie .beheer-form-field {
    margin-bottom: 1rem;
}

.offertegegevens-kolom--drie .beheer-form-field:last-child {
    margin-bottom: 0;
}

.offertegegeven--inline-meta {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 64rem) {
    .offertegegevens-inhoud--drie-kolommen {
        grid-template-columns: 1fr;
    }

    .documentgegevens .offertegegevens-kolom--drie,
    .documentgegevens .offertegegevens-kolom--drie + .offertegegevens-kolom--drie {
        padding-right: 0;
        padding-left: 0;
    }

    .documentgegevens .offertegegevens-kolom--drie + .offertegegevens-kolom--drie {
        padding-top: 1.25rem;
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .offerte-samenvatting-details .offertegegevens-inhoud {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 1rem;
    }

    .offerte-samenvatting-kolom:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .offerte-samenvatting-kolom:nth-child(even) {
        padding-right: 0;
    }

    .offerte-samenvatting-kolom:nth-child(n + 3) {
        padding-top: 1rem;
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 42rem) {
    .offertegegevens-wijzigen {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .offertegegevens-navigatie {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .offertegegevens-navigatie-item {
        padding: 0.625rem 0.5rem;
        font-size: 0.8125rem;
        text-align: center;
    }
}

.offertegegevens--collapsed .offertegegevens-inhoud {
    display: none;
}

.offerte-keuzekaarten-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    padding: 0 2rem 1.75rem 2rem;
}

.offerte-keuzekaart {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.5rem;
    background: color-mix(in srgb, var(--surface) 50%, var(--surface-raised));
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.offerte-keuzekaart:hover {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 4%, var(--surface-raised));
}

.offerte-keuzekaart-info {
    display: grid;
    gap: 0.375rem;
}

.offerte-keuzekaart-titel {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text);
}

.offerte-keuzekaart-beschrijving {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.45;
}

@media (max-width: 48rem) {
    .offerte-keuzekaarten-grid {
        grid-template-columns: 1fr;
        padding: 0 1rem 1.25rem 1rem;
    }
}

.offerte-financieel-deeltitel {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
}

.offerte-tekst-blok {
    margin: 0;
    padding: 0.25rem 0;
    line-height: 1.6;
    white-space: pre-line;
    color: var(--text);
}

.offerte-voorwaarden-lijst {
    display: grid;
}

.offerte-voorwaarde-item {
    display: grid;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.offerte-voorwaarde-item:last-child {
    border-bottom: 0;
}

.offerte-voorwaarde-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.offerte-voorwaarde-koptekst {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.offerte-voorwaarde-nummer {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border-radius: 999px;
    flex: 0 0 auto;
}

.offerte-voorwaarde-titel {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.offerte-voorwaarde-tekst {
    margin: 0;
    padding-left: 2.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    white-space: pre-line;
}

@media (max-width: 40rem) {
    .offerte-voorwaarde-kop {
        flex-direction: column;
        align-items: flex-start;
    }

    .offerte-voorwaarde-tekst {
        padding-left: 0;
    }}

.voorwaarde-keuze-rij {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
}

.voorwaarde-keuze-checkbox {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.voorwaarde-keuze-tekst {
    margin: 0.25rem 0 0 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.voorwaarde-sectie-help {
    margin: 0.25rem 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.offerte-calculatie-offertetekst {
    margin: 0;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    background-color: var(--surface-subtle);
    border-bottom: 1px solid var(--border);
    white-space: pre-wrap;
}

.offerte-calculatie-geen-regels {
    margin: 0;
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.calculatie-offertetekst-container {
    display: none;
}

.calculatie-offertetekst-container--actief {
    display: block;
}

.calculatie-offertetekst-preview {
    margin: 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
    background: var(--surface-raised);
    border: 1px dashed var(--border);
    border-radius: var(--radius-control);
    white-space: pre-wrap;
}

@media (max-width: 36rem) {

    .offerte-calculatie-detail-paneel {
        padding: 1rem;
    }}

.offerte-regel-rij--calculatie {
    cursor: pointer;
}

.offerte-regel-rij--calculatie:hover .offerte-calculatie-toggle {
    border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
}

.offerte-regel-rij--calculatie.offerte-regel-rij--open,
.offerte-regel-rij--calculatie.offerte-regel-rij--open:hover {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-raised));
}

.offerte-regel-rij--calculatie.offerte-regel-rij--open td {
    border-bottom-color: transparent;
}

.offerte-regel-omschrijving--calculatie {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.offerte-regel-omschrijving--product {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.offerte-regel-omschrijving-ruimte {
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
}

.offerte-calculatie-toggle {
    display: inline-grid;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.offerte-calculatie-toggle:hover {
    background: var(--page-accent);
    border-color: var(--primary);
    color: var(--primary);
}

.offerte-calculatie-toggle:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.offerte-calculatie-toggle svg {
    flex: 0 0 auto;
    transition: transform 160ms ease;
    transform: rotate(-90deg);
}

.offerte-calculatie-toggle--open svg,
.offerte-calculatie-toggle[aria-expanded="true"] svg {
    transform: rotate(0);
}

tr.offerte-calculatie-detail-rij[hidden] {
    display: none;
}

.offerte-calculatie-detail-rij {
    background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}

.offerte-calculatie-detail-cel {
    padding: 0 !important;
    border-bottom: 1px solid var(--border);
}

.offerte-calculatie-detail-paneel {
    display: grid;
    gap: 0.875rem;
    padding: 1rem 1.5rem 1.25rem;
}

.offerte-calculatie-detail-paneel .offerte-calculatie-offertetekst {
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
}

.offerte-calculatie-offertetekst-sectie {
    overflow: hidden;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}

.offerte-calculatie-offertetekst-samenvatting {
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

.offerte-calculatie-offertetekst-samenvatting::-webkit-details-marker {
    display: none;
}

.offerte-calculatie-offertetekst-samenvatting > .web-icon:first-child {
    transform: rotate(-90deg);
    transition: transform 160ms ease;
}

.offerte-calculatie-offertetekst-sectie[open]
    .offerte-calculatie-offertetekst-samenvatting > .web-icon:first-child {
    transform: rotate(0deg);
}

.offerte-calculatie-offertetekst-inhoud {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--border);
}

.offerte-calculatie-detail-paneel textarea.offerte-calculatie-offertetekst {
    width: 100%;
    min-height: 80px;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--surface-subtle);
    resize: vertical;
    box-sizing: border-box;
}

.offerte-calculatie-detail-paneel textarea.offerte-calculatie-offertetekst:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: -1px;
    border-color: var(--primary);
    background-color: var(--surface-card);
}

.offerte-calculatie-offertetekst-help {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

.offerte-calculatie-detail-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.offerte-calculatie-detail-titel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    font-size: 0.9375rem;
}

.offerte-calculatie-detail-icoon {
    display: inline-grid;
    place-items: center;
    color: var(--primary);
}

.offerte-calculatie-detail-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.offerte-calculatie-productregels-table {
    min-width: 100%;
    table-layout: auto;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.offerte-calculatie-productregels-table th,
.offerte-calculatie-productregels-table td {
    height: auto;
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
}

.offerte-calculatie-productregels-table th {
    background: color-mix(in srgb, var(--text-muted) 8%, var(--surface-raised));
    font-weight: 400;
}

.offerte-calculatie-productregels-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 3%, transparent);
}

.offerte-calculatie-th-rechts {
    text-align: right;
}

.offerte-calculatie-th-midden {
    text-align: center;
}

.offerte-calculatie-th-product {
    text-align: left;
}

.offerte-calculatie-norm-cel,
.offerte-calculatie-prijs-cel,
.offerte-calculatie-percentage-cel,
.offerte-calculatie-bedrag-cel {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.offerte-calculatie-eenheid-cel,
.offerte-calculatie-btw-cel {
    text-align: center;
}

.offerte-calculatie-productregel-cel {
    text-align: left;
}

.offerte-calculatie-input-cel {
    padding: 0.35rem 0.5rem !important;
    vertical-align: middle;
}

.offerte-calculatie-input {
    width: 100%;
    min-height: 2rem;
    height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-sizing: border-box;
}

.offerte-calculatie-input:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: -1px;
    border-color: var(--primary);
}

.offerte-calculatie-input--norm {
    min-width: 5.5rem;
    max-width: 6.5rem;
    margin-left: auto;
}

.offerte-calculatie-input--prijs {
    min-width: 6.5rem;
    max-width: 7.5rem;
    margin-left: auto;
}

.offerte-calculatie-input--percentage {
    min-width: 5.5rem;
    max-width: 6.5rem;
    margin-left: auto;
}

.offerte-calculatie-form {
    display: grid;
    gap: 0.75rem;
}

.offerte-calculatie-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

.offerte-calculatie-footer--readonly {
    justify-content: flex-start;
}

.offerte-calculatie-footer-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.offerte-calculatie-footer-info strong {
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.offerte-calculatie-meta-scheider {
    color: var(--border);
    user-select: none;
}

.offerte-regel-herkomst--abonnement {
    color: #7a36c5;
    background: color-mix(in srgb, #9251d8 15%, transparent);
}

.offerte-regel-aantal-cel {
    vertical-align: middle;
}

.offerte-regels-table td.offerte-regel-aantal-cel {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.offerte-regel-aantal-form {
    margin: 0;
}

.offerte-regel-aantal-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.offerte-regel-aantal-input {
    width: 5.25rem;
    min-height: 2.125rem;
    height: 2.125rem;
    padding: 0.25rem 1.375rem 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    box-sizing: border-box;
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease, opacity 150ms ease;
}

.offerte-regel-aantal-input:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: -1px;
    border-color: var(--primary);
    background: var(--surface-raised);
}

.offerte-regel-aantal-input.is-saving {
    opacity: 0.65;
}

.offerte-regel-aantal-input.is-saved {
    border-color: #10b981;
}

.offerte-regel-aantal-input.is-error {
    border-color: var(--danger-action);
    background-color: color-mix(in srgb, var(--danger-action) 6%, var(--surface));
}

.offerte-regel-aantal-status {
    position: absolute;
    right: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #10b981;
}

.offerte-regel-subtotaal-cel {
    font-variant-numeric: tabular-nums;
}

.offerte-regel-subtotaal-bedrag {
    color: var(--text);
    font-weight: 700;
}

.datatable-action-cell--bekijken,
.datatable-action-cell--bewerken {
    width: 3.75rem;
}

.datatable-row-action--notities {
    min-width: 2.25rem;
    padding: 0.25rem 0.5rem;
    gap: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.datatable-row-action--notities:hover {
    background: color-mix(in srgb, var(--primary) 20%, var(--surface));
    color: var(--primary);
}

.datatable-row-action--notities-leeg {
    color: var(--text-tertiary);
    background: var(--surface-raised);
    border: 1px dashed var(--border);
    font-weight: 500;
}

.datatable-row-action--notities-leeg:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.datatable-row-action-badge {
    font-variant-numeric: tabular-nums;
}

.datatable-row-action--bekijken,
.datatable-row-action--downloaden,
.datatable-row-action--bewerken,
.icoon-actie--bewerken,
.datatable-row-action--downloaden,
.icoon-actie--downloaden,
.datatable-row-action--verwijderen,
.icoon-actie--verwijderen,
.datatable-row-action--omhoog,
.datatable-row-action--omlaag {
    width: 1.875rem;
    min-width: 1.875rem;
    height: 1.875rem;
    min-height: 1.875rem;
    padding: 0;
}

.verkoop-toggle-count-badge {
    display: inline-grid;
    min-width: 1.25rem;
    height: 1.25rem;
    place-items: center;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 22%, var(--surface));
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    text-align: center;
}

.offerte-boven-tabs {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem 2rem;
    background: color-mix(in srgb, var(--page-background) 38%, var(--surface));
    border-bottom: 1px solid var(--border);
}

.offerte-samenvatting {
    display: block;
    margin: 1.5rem 2.5rem 0.75rem;
    background: var(--page-accent);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: 0 0.25rem 1rem rgb(30 37 45 / 4%);
    overflow: hidden;
}

.offerte-samenvatting-kop {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 1rem 0.5rem;
    list-style: none;
}

.offerte-samenvatting-kop::-webkit-details-marker {
    display: none;
}

.offerte-samenvatting-item {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.5rem 1rem;
    border-right: 1px solid var(--border);
}

.offerte-samenvatting-item:first-child {
    padding-left: 0.75rem;
}

.offerte-samenvatting-kop > .offerte-samenvatting-item:last-child {
    border-right: 0;
}

.offerte-samenvatting-item > .web-icon {
    align-self: flex-start;
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-muted);
}

.offerte-samenvatting-copy {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
}

.offerte-samenvatting-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.25;
}

.offerte-samenvatting-copy > :not(.offerte-samenvatting-label) {
    overflow: hidden;
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offerte-samenvatting-copy a {
    color: var(--primary);
    text-decoration: none;
}

.offerte-samenvatting-copy .offerte-samenvatting-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
    max-width: 100%;
    color: var(--primary);
}

.offerte-samenvatting-copy .offerte-samenvatting-link--compact {
    color: var(--text);
}

.offerte-samenvatting-link .web-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.offerte-samenvatting-copy .offerte-samenvatting-bedrag {
    font-size: 1.0625rem;
    font-weight: 700;
}

.offerte-samenvatting-copy a:hover {
    text-decoration: underline;
}

.offerte-samenvatting-details {
    padding: 0 1.5rem 1rem;
}

.offerte-algemeen {
    margin-right: -1.5rem;
    margin-left: -1.5rem;
}

.offerte-samenvatting-details-kop {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.offerte-samenvatting-details-titel {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.offerte-samenvatting-details-kop .beheer-button {
    margin-left: auto;
}

.offerte-samenvatting-details .offertegegevens-inhoud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
}

.offerte-samenvatting-details .offerte-algemeen-details-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 0;
}

.offerte-algemeen-details-grid > .offerte-samenvatting-sectie,
.offerte-algemeen-details-grid > .offerte-samenvatting-rechterkolom {
    min-width: 0;
    padding: 1rem 1.25rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}

.offerte-algemeen-details-grid > .offerte-samenvatting-sectie:first-child {
    padding-left: 1.25rem;
}

.offerte-algemeen-details-grid > .offerte-samenvatting-sectie {
    grid-column: 1;
    grid-row: 1;
}

.offerte-algemeen-details-grid > .offerte-samenvatting-rechterkolom {
    display: contents;
}

.offerte-algemeen-details-grid .offerte-samenvatting-rechterkolom > .offerte-samenvatting-sectie {
    grid-column: 2;
    min-width: 0;
    padding: 1rem 1.25rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}

.offerte-algemeen-details-grid .offerte-samenvatting-rechterkolom > .offerte-samenvatting-sectie:first-child {
    grid-column: 2;
    grid-row: 1;
}

.offerte-algemeen-details-grid .offerte-samenvatting-rechterkolom > .offerte-samenvatting-sectie:last-child {
    grid-column: 3;
    grid-row: 1;
}

.offerte-algemeen-details-grid .offerte-samenvatting-sectie + .offerte-samenvatting-sectie {
    border-left: 1px solid var(--border);
}

.offerte-samenvatting-sectie {
    min-width: 0;
    padding: 0 1.25rem;
}

.offerte-samenvatting-sectie-kop {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.4375rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.offerte-samenvatting-sectie-kop > .web-icon {
    flex: 0 0 auto;
    color: var(--text);
}

.offerte-samenvatting-sectie:first-child {
    padding-left: 0;
}

.offerte-samenvatting-sectie + .offerte-samenvatting-sectie {
    border-left: 1px solid var(--border);
}

.offerte-samenvatting-sectie:last-child {
    padding-right: 0;
}

.offerte-samenvatting-sectie-titel {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.offerte-samenvatting-sectie-inhoud {
    display: grid;
    gap: 0;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie-inhoud--offerte > .offertegegeven {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.75rem;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie-inhoud--offerte > .offertegegeven > .offertegegeven-label,
.offerte-samenvatting-details.documentgegevens
    .offerte-samenvatting-rechterkolom
    > .offerte-samenvatting-sectie:first-child
    > .offerte-samenvatting-kolom
    > .offertegegeven
    > .offertegegeven-label {
    font-size: 0.875rem;
    line-height: 1.35;
}

.offerte-samenvatting-details.documentgegevens
    .offerte-samenvatting-rechterkolom
    > .offerte-samenvatting-sectie:first-child
    > .offerte-samenvatting-kolom
    > .offertegegeven
    > :not(.offertegegeven-label) {
    font-size: 0.875rem;
}

.offerte-samenvatting-sectie-inhoud--offerte > .offertegegeven > :not(.offertegegeven-label) {
    font-size: 0.875rem;
}

.offerte-samenvatting-sectie-inhoud--offerte .offertegegevens-id-waarde {
    overflow-wrap: normal;
    font-family: inherit;
    font-size: 0.875rem;
}

.offerte-samenvatting-sectie > .offerte-samenvatting-kolom {
    padding: 0;
}

.offerte-samenvatting-sectie:last-child > .offerte-samenvatting-kolom > .offertegegeven {
    display: grid;
    grid-template-columns: 11.25rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.75rem;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie:last-child > .offerte-samenvatting-kolom > .offertegegeven > .offertegegeven-label {
    font-size: 0.9375rem;
    line-height: 1.35;
}

.offerte-samenvatting-kolom {
    min-width: 0;
    padding: 0 1rem;
}

.offerte-samenvatting-kolom:first-child {
    padding-left: 0;
    border-left: 0;
}

.offerte-samenvatting-kolom + .offerte-samenvatting-kolom {
    border-left: 1px solid var(--border);
}

.offerte-samenvatting-kolom:last-child {
    padding-right: 0;
}

.offerte-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.offerte-status-punt {
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--text-muted);
}

.offerte-status--informatie .offerte-status-punt { background: #38bdf8; }
.offerte-status--succes .offerte-status-punt { background: #22c55e; }
.offerte-status--waarschuwing .offerte-status-punt { background: #facc15; }
.offerte-status--fout .offerte-status-punt { background: #f87171; }

.offerte-statusmelding {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    color: var(--text-muted);
    background: color-mix(in srgb, #38bdf8 10%, var(--page-accent));
    border: 1px solid color-mix(in srgb, #2563eb 38%, var(--border));
    border-radius: var(--radius-control);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.offerte-samenvatting-en-acties > .offerte-statusmelding,
.offerte-samenvatting-en-acties > .offerte-akkoord-melding {
    margin: 1rem 1.5rem 0;
}

.offerte-statusmelding > .web-icon {
    flex: 0 0 auto;
    box-sizing: content-box;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.25rem;
    color: #1e3a5f;
    background: color-mix(in srgb, var(--text) 10%, var(--surface));
    border-radius: 50%;
}

.offerte-statusmelding-inhoud {
    display: grid;
    gap: 0.125rem;
}

.offerte-statusmelding-titel {
    color: #1e3a5f;
    font-weight: 700;
}

.kleurmodus--donker .offerte-statusmelding > .web-icon,
.kleurmodus--donker .offerte-statusmelding-titel {
    color: var(--text);
}

@media (prefers-color-scheme: dark) {
    .offerte-statusmelding > .web-icon,
    .offerte-statusmelding-titel {
        color: var(--text);
    }
}

.offerte-akkoord-melding {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: color-mix(in srgb, var(--primary) 9%, var(--page-accent));
    border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--border));
    border-radius: var(--radius-card);
    font-size: 0.875rem;
    line-height: 1.4;
}

.offerte-akkoord-icoon {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    place-items: center;
    color: #ffffff;
    background: #22c55e;
    border-radius: 50%;
}

.offerte-akkoord-icoon .web-icon {
    width: 1rem;
    height: 1rem;
}

.offerte-akkoord-inhoud {
    display: grid;
    min-width: 0;
    gap: 0.125rem;
}

.offerte-akkoord-titel {
    color: inherit;
    font-size: 0.875rem;
    font-weight: 700;
}

.offerte-akkoord-tekst {
    color: var(--text-muted);
}

.offerte-samenvatting-details.documentgegevens .offertegegeven {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0;
    border-bottom: 0;
}

.offerte-samenvatting-details.documentgegevens .offertegegeven:last-child {
    margin-bottom: 0;
}

.offerte-samenvatting-details.documentgegevens .offertegegeven--rij {
    margin-bottom: 0;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
}

.offerte-samenvatting-details.documentgegevens .offertegegeven--rij:last-child {
    border-bottom: 0;
}

.offerte-samenvatting-details.documentgegevens
    .offerte-samenvatting-rechterkolom
    > .offerte-samenvatting-sectie:first-child
    > .offerte-samenvatting-kolom
    > .offertegegeven {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.75rem;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-kolom--financieel .offertegegeven {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.75rem;
}

.offerte-samenvatting-details.documentgegevens
    .offerte-samenvatting-kolom--financieel
    .offertegegeven
    > :not(.offertegegeven-label) {
    text-align: right;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-kolom--financieel .offertegegeven-label {
    font-size: 0.9375rem;
    line-height: 1.35;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-kolom--financieel {
    padding: 0;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-kolom--financieel .offertegegeven:nth-last-child(2) {
    margin-top: 0;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-kolom--financieel .offertegegeven:last-child {
    margin: 0.25rem -0.75rem 0;
    padding: 0.5rem 0.75rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--page-accent));
    border-radius: 0.5rem;
    font-weight: 700;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie--financieel {
    padding: 1rem 1.25rem;
    background: var(--surface-raised);
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie--financieel .offerte-samenvatting-sectie-kop {
    gap: 0.625rem;
    margin-bottom: 0.4375rem;
    padding-bottom: 0.75rem;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie--financieel .offerte-samenvatting-sectie-kop > .web-icon {
    color: var(--text);
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie--financieel .offerte-samenvatting-sectie-titel {
    font-size: 1rem;
    letter-spacing: normal;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie--financieel > .offerte-samenvatting-kolom--financieel {
    display: grid;
    gap: 0;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie--financieel .offerte-financieel-samenvatting-totaal {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.offerte-financieel-samenvatting-totaal-label {
    margin-bottom: 0.375rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.offerte-financieel-samenvatting-totaal-waarde {
    min-width: 0;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    letter-spacing: -0.035em;
    line-height: 1.1;
    white-space: nowrap;
}

.offerte-financieel-samenvatting-periodiek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
}

.offerte-financieel-samenvatting-periodiek-label {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.offerte-financieel-samenvatting-periodiek-waarde {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
}

.offerte-financieel-samenvatting-exclusief {
    color: var(--text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie--financieel
    > .offerte-samenvatting-kolom--financieel
    > .offertegegeven {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 3.25rem;
    margin: 0;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie--financieel
    > .offerte-samenvatting-kolom--financieel
    > .offertegegeven
    > .offertegegeven-label {
    color: var(--text-muted);
    font-size: 0.9375rem;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie--financieel
    > .offerte-samenvatting-kolom--financieel
    > .offertegegeven
    > :not(.offertegegeven-label) {
    font-size: 0.9375rem;
    font-weight: 700;
}

.offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie--financieel
    > .offerte-samenvatting-kolom--financieel
    > .offertegegeven:last-child {
    margin: 0;
    padding: 0.875rem 0 0;
    background: transparent;
    border-bottom: 0;
    border-radius: 0;
    font-weight: 400;
}

@media (max-width: 36rem) {
    .offerte-samenvatting-details.documentgegevens .offerte-samenvatting-sectie--financieel {
        padding: 0.75rem 0;
    }

    .offerte-financieel-samenvatting-totaal-waarde {
        font-size: 2rem;
    }

    .offerte-financieel-samenvatting-exclusief {
        font-size: 0.8125rem;
    }
}

.offerte-samenvatting-details .offertegegeven-label {
    font-size: 0.75rem;
    line-height: 1.25;
}

.offerte-samenvatting-details .offertegegeven > :not(.offertegegeven-label) {
    min-width: 0;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.offerte-samenvatting-details.documentgegevens
    .offerte-samenvatting-sectie-inhoud--offerte
    > .offertegegeven
    > .offertegegevens-link {
    font-size: 0.875rem;
}

.offerte-samenvatting-details.documentgegevens
    .offerte-samenvatting-rechterkolom
    .offertegegeven-label,
.offerte-samenvatting-details.documentgegevens
    .offerte-samenvatting-rechterkolom
    .offertegegeven
    > :not(.offertegegeven-label) {
    font-size: 0.875rem;
}

.offerte-samenvatting-details.documentgegevens
    .offerte-samenvatting-sectie:first-child
    .offertegegeven
    > :not(.offertegegeven-label) {
    font-size: 0.875rem;
}

.offerte-actiesbalk {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    position: relative;
    z-index: 1;
    overflow-x: auto;
    padding: 1rem 1.5rem 0;
}

.offerte-actiesgroep {
    flex: 0 0 auto;
}

.offerte-actiesgroep--algemeen {
    margin-left: 0;
}

.offerte-actiesbalk .paneel-acties {
    flex-wrap: nowrap;
    gap: 1rem;
    width: max-content;
    padding: 0;
}

.offerte-actiesbalk .paneel-acties::after {
    display: none;
}

.offerte-actiesgroep--tab .paneel-acties {
    justify-content: flex-start;
}

.offerte-actiesgroep--algemeen .paneel-acties {
    justify-content: flex-end;
}

.offerte-versies-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.offerte-versie-rij {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
}


.beheer-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-control);
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.beheer-button--primary {
    background: var(--primary);
    color: var(--surface);
    border-color: var(--primary);
}

.beheer-button--primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--surface);
}

.beheer-button--secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

.beheer-button--secondary:hover {
    background: var(--page-background);
    border-color: var(--border-hover, var(--border));
    color: var(--text);
}

.beheer-button--small {
    padding: 0.3125rem 0.75rem;
    font-size: 0.8125rem;
}

@media (max-width: 46rem) {

    .offerte-samenvatting {
        margin: 1rem 1rem 0.75rem;
    }

    .offerte-samenvatting-kop {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0.375rem;
    }

    .offerte-actiesbalk {
        gap: 0.75rem;
        padding: 0.75rem 1rem 1.5rem;
    }

    .offerte-actiesbalk::after {
        right: 1rem;
        left: 1rem;
    }

    .offerte-samenvatting-item {
        padding: 0.625rem 0.5rem;
        border-right: 0;
    }

    .offerte-samenvatting-item:first-child {
        padding-left: 0.5rem;
    }

    .offerte-samenvatting-toggle {
        grid-column: 1 / -1;
        width: auto;
        justify-content: flex-start;
        margin-left: 0;
        padding: 0.25rem 0.5rem;
    }

    .offerte-samenvatting-details {
        padding: 1rem;
    }

    .offerte-samenvatting-details .offertegegevens-inhoud {
        grid-template-columns: 1fr;
        row-gap: 0;
    }

    .offerte-samenvatting-details .offerte-algemeen-details-grid {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .offerte-algemeen-details-grid > .offerte-samenvatting-sectie,
    .offerte-algemeen-details-grid .offerte-samenvatting-rechterkolom > .offerte-samenvatting-sectie {
        grid-column: 1;
        grid-row: auto;
    }

    .offerte-algemeen-details-grid .offerte-samenvatting-rechterkolom > .offerte-samenvatting-sectie:first-child,
    .offerte-algemeen-details-grid .offerte-samenvatting-rechterkolom > .offerte-samenvatting-sectie:last-child {
        grid-column: 1;
        grid-row: auto;
    }

    .offerte-samenvatting-sectie,
    .offerte-samenvatting-sectie:first-child,
    .offerte-samenvatting-sectie:last-child {
        padding: 0.75rem 0;
        border-left: 0;
    }

    .offerte-samenvatting-sectie + .offerte-samenvatting-sectie {
        border-top: 1px solid var(--border);
    }

    .offerte-samenvatting-kolom,
    .offerte-samenvatting-kolom:nth-child(odd),
    .offerte-samenvatting-kolom:nth-child(even) {
        padding: 0.75rem 0;
        border-top: 0;
        border-left: 0;
    }

    .offerte-samenvatting-kolom + .offerte-samenvatting-kolom {
        border-top: 1px solid var(--border);
    }

    .offerte-samenvatting-details-kop {
        align-items: flex-start;
        flex-direction: column;
    }

    .offerte-samenvatting-details-kop .beheer-button {
        margin-left: 0;
    }

    .offerte-boven-tabs {
        gap: 0.5rem;
        padding: 0.75rem 1rem;
    }

    .offerte-meta-balk {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .offerte-meta-acties {
        width: 100%;
        justify-content: flex-start;
    }}

.beheer-form-section-header {
    grid-column: 1 / -1;
    margin-top: 1rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--border);
}

.beheer-form-section-header:first-of-type {
    margin-top: 0;
}

.beheer-form-section-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.beheer-tabs-item {
    display: flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
}

.klant-overzicht-kolom {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.klant-overzicht-lijst {
    display: grid;
}

.klant-overzicht-lijst-rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.klant-overzicht-lijst-rij:last-child {
    border-bottom: 0;
}

.klant-overzicht-lijst-leeg {
    padding: 1.5rem 1.25rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
    margin: 0;
}

.klant-overzicht-lijst-info {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.klant-overzicht-lijst-kop {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.klant-overzicht-lijst-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.klant-overzicht-lijst-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.klant-overzicht-lijst-meta-item .web-icon {
    width: 0.875rem;
    height: 0.875rem;
}

.klant-overzicht-lijst-sub {
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.klant-badge-standaard {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border-radius: 999px;
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 600;
}

.klant-badge-type {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

/* Hoofdgroepen selectie modal */
.hoofdgroepen-selectie-container {
    display: grid;
    gap: 1rem;
}

.hoofdgroepen-selectie-instructie {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.hoofdgroepen-selectie-lijst {
    display: grid;
    gap: 0.5rem;
}

.hoofdgroep-keuze-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hoofdgroep-keuze-item:hover:not(.hoofdgroep-keuze-item--toegevoegd) {
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
}

.hoofdgroep-keuze-item--toegevoegd {
    opacity: 0.65;
    background: var(--surface-raised);
    cursor: not-allowed;
}

.hoofdgroep-keuze-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--primary);
    cursor: pointer;
}

.hoofdgroep-keuze-item--toegevoegd .hoofdgroep-keuze-checkbox {
    cursor: not-allowed;
}

.hoofdgroep-keuze-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.hoofdgroep-keuze-nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--primary);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
}

.hoofdgroep-keuze-naam {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--text);
}

.hoofdgroep-keuze-badge {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.hoofdgroepen-leeg-melding {
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-raised);
    border-radius: 0.5rem;
}

/* Calculatiegroepen toevoegen per projectfase modal */
.calculatiegroepen-selectie-secties {
    display: grid;
    gap: 0.5rem;
}

.hoofdgroep-fase-accordion {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hoofdgroep-fase-accordion[open] {
    border-color: var(--primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.hoofdgroep-fase-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    cursor: pointer;
    user-select: none;
    background: var(--surface);
    list-style: none;
    transition: background-color 0.15s ease;
}

.hoofdgroep-fase-summary::-webkit-details-marker {
    display: none;
}

.hoofdgroep-fase-summary:hover {
    background: var(--surface-raised);
}

.hoofdgroep-fase-links {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.hoofdgroep-fase-naam {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text);
}

.hoofdgroep-fase-rechts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.hoofdgroep-fase-chevron {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    display: inline-block;
}

.hoofdgroep-fase-accordion[open] .hoofdgroep-fase-chevron {
    transform: rotate(180deg);
}

.hoofdgroep-fase-inhoud {
    padding: 0.75rem;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-raised) 40%, var(--surface));
    display: grid;
    gap: 0.5rem;
}

.hoofdgroep-fase-geen-groepen {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.25rem 0;
}

.hoofdgroep-keuze-item:has(.calculatiegroep-keuze-koprij) {
    align-items: flex-start;
}

.hoofdgroep-keuze-content:has(.calculatiegroep-keuze-koprij) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.calculatiegroep-keuze-koprij {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
}

.calculatiegroep-aantal-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.calculatiegroep-keuze-toelichting {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Calculatie selectie modal filterbalk & zoeken */
.calculatie-filter-balk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

@media (max-width: 640px) {
    .calculatie-filter-balk {
        grid-template-columns: 1fr;
    }
}

.calculatie-snelfilters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    margin-top: 0.5rem;
}

.calculatie-snelfilters-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-right: 0.25rem;
}

.calculatie-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 400;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.calculatie-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.calculatie-chip--actief {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-contrast, #fff);
}

.bestanden-filter-balk {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.bestanden-filter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.25;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.bestanden-filter-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 4%, var(--surface));
}

.bestanden-filter-chip:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.bestanden-filter-chip--actief {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-contrast, #fff);
}

.bestanden-filter-chip--actief:hover {
    background: var(--primary);
    color: var(--primary-contrast, #fff);
}

/* Calculatie selectie modal tabel */
.calculatie-selectie-container {
    display: grid;
    gap: 0.75rem;
}

.calculatie-selectie-instructie {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.calculatie-selectie-tabel-wrapper {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface);
}

.calculatie-selectie-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.calculatie-selectie-tabel th {
    padding: 0.625rem 0.75rem;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-muted);
    text-align: left;
}

.calculatie-selectie-tabel th.calculatie-th-prijs,
.calculatie-selectie-tabel th.calculatie-th-hoeveelheid {
    text-align: right;
}

.calculatie-selectie-rij {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s ease;
}

.calculatie-selectie-rij:last-child {
    border-bottom: none;
}

.calculatie-selectie-rij:hover {
    background: color-mix(in srgb, var(--primary) 3%, var(--surface));
}

.calculatie-selectie-rij--actief {
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.calculatie-cel-checkbox {
    width: 2.5rem;
    padding: 0.625rem 0.5rem 0.625rem 0.75rem;
    text-align: center;
    vertical-align: middle;
}

.calculatie-keuze-checkbox {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--primary);
    cursor: pointer;
}

.calculatie-cel-info {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
}

.calculatie-info-groep {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.calculatie-naam-label {
    cursor: pointer;
    font-weight: 550;
    color: var(--text);
}

.calculatie-code-badge {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
}

.calculatie-details-container {
    margin-top: 0.25rem;
    font-size: 0.75rem;
}

.calculatie-details-summary {
    cursor: pointer;
    color: var(--primary);
    font-weight: 500;
}

.calculatie-details-tekst {
    margin: 0.25rem 0 0 0;
    padding: 0.375rem 0.5rem;
    background: var(--surface-raised);
    border-radius: 0.25rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.calculatie-cel-prijs {
    padding: 0.625rem 0.75rem;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    color: var(--text);
    font-weight: 500;
}

.calculatie-cel-hoeveelheid {
    padding: 0.625rem 0.75rem;
    text-align: right;
    vertical-align: middle;
    white-space: nowrap;
    width: 9rem;
}

.calculatie-hoeveelheid-groep {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    justify-content: flex-end;
}

.calculatie-hoeveelheid-input {
    width: 5rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    text-align: right;
    background: var(--surface);
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.calculatie-hoeveelheid-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
}

.calculatie-eenheid-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    min-width: 1.75rem;
    text-align: left;
}

.calculatie-selectie-leeg {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.calculatie-selectie-leeg-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1.5rem;
    text-align: center;
}

.calculatie-selectie-leeg-container .calculatie-selectie-leeg {
    padding: 0;
}

.entiteit-logo-preview-box {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--surface);
    border-radius: 0.5rem;
}

.entiteit-logo-afbeelding {
    max-height: 80px;
    max-width: 260px;
    object-fit: contain;
}

/* Entiteit-kiezer binnen instellingen en overzichten */
.entiteit-kiezer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.entiteit-kiezer-kop {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-muted);
}

.entiteit-kiezer-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
}

.entiteit-kiezer-opties {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.entiteit-kiezer-optie {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: var(--radius-control);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.entiteit-kiezer-optie:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface));
}

.entiteit-kiezer-optie:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.entiteit-kiezer-optie--actief {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary);
    font-weight: 600;
}

/* ==========================================================================
   Offerte PDF & Afdrukweergave (A4 Document)
   ========================================================================== */

.offerte-pdf-body {
    margin: 0;
    padding: 0;
    background-color: #f1f5f9;
    color: #1e293b;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.offerte-pdf-screen-toolbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #0f172a;
    color: #f8fafc;
    border-bottom: 1px solid #1e293b;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.offerte-pdf-toolbar-inhoud {
    max-width: 210mm;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.offerte-pdf-toolbar-terug {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

.offerte-pdf-toolbar-terug:hover {
    color: #ffffff;
}

.offerte-pdf-toolbar-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.offerte-pdf-toolbar-titel {
    font-weight: 600;
    font-size: 0.875rem;
    color: #ffffff;
}

.offerte-pdf-toolbar-modus {
    font-size: 0.75rem;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    margin-top: 0.2rem;
}

.offerte-pdf-toolbar-acties {
    display: flex;
    align-items: center;
}

.offerte-pdf-toolbar-print-knop {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #059669 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 0.375rem !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.offerte-pdf-toolbar-print-knop:hover {
    background: #047857 !important;
}

/* Document Container */
.offerte-pdf-document {
    max-width: 210mm;
    margin: 2rem auto;
    padding: 22mm 20mm;
    background: #ffffff;
    color: #1e293b;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    box-sizing: border-box;
}

/* Header */
.offerte-pdf-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.offerte-pdf-logo {
    max-height: 85px;
    max-width: 300px;
    object-fit: contain;
    display: inline-block;
}

.offerte-pdf-bedrijfsnaam-fallback {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #0f172a;
}

/* Klant en Metadata Grid */
.offerte-pdf-klant-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid #e2e8f0;
}

.offerte-pdf-klant-blok {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.offerte-pdf-sectie-label {
    margin: 0 0 0.35rem 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
}

.offerte-pdf-klant-naam {
    margin: 0 0 0.25rem 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.offerte-pdf-klant-contact,
.offerte-pdf-klant-adres,
.offerte-pdf-klant-contactgegevens {
    margin: 0;
    color: #334155;
    font-size: 13px;
}

.offerte-pdf-meta-blok {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.offerte-pdf-meta-rij {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.25rem 0;
    border-bottom: 1px dotted #e2e8f0;
}

.offerte-pdf-meta-label {
    font-size: 12px;
    color: #64748b;
}

.offerte-pdf-meta-waarde {
    font-size: 12px;
    font-weight: 600;
    color: #0f172a;
    text-align: right;
}

/* Inleiding & Brief (Pagina 2) */
.offerte-pdf-brief-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 1rem;
}

.offerte-pdf-brief-adres {
    font-size: 12px;
    line-height: 1.45;
    color: #334155;
}

.offerte-pdf-brief-adres-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 0.2rem;
}

.offerte-pdf-brief-adres-klant {
    font-size: 14px;
    font-weight: 750;
    color: #0f172a;
    margin-bottom: 0.15rem;
}

.offerte-pdf-brief-adres-regel {
    font-size: 12px;
    color: #334155;
}

.offerte-pdf-brief-adres-contact {
    color: #64748b;
    font-size: 11.5px;
    margin-top: 0.2rem;
}

.offerte-pdf-brief-meta {
    text-align: right;
    font-size: 11.5px;
    line-height: 1.5;
    color: #64748b;
}

.offerte-pdf-brief-meta-regel {
    margin: 0;
}

.offerte-pdf-brief-meta-regel strong {
    color: #0f172a;
    font-weight: 700;
}

.offerte-pdf-brief-betreft {
    margin-bottom: 0.85rem;
}

.offerte-pdf-brief-betreft-titel {
    font-size: 13.5px;
    font-weight: 750;
    color: #0f172a;
    padding-bottom: 0.25rem;
    border-bottom: 1.5px solid #0f172a;
    display: inline-block;
}

.offerte-pdf-brief-inhoud {
    font-size: 12px;
    line-height: 1.55;
    color: #334155;
}

.offerte-pdf-brief-paragraaf {
    margin: 0 0 0.55rem 0;
    color: #334155;
    font-size: 12px;
    line-height: 1.55;
}

.offerte-pdf-brief-tussenkop {
    margin: 0.9rem 0 0.25rem 0;
    font-size: 12.5px;
    font-weight: 750;
    color: #0f172a;
    break-after: avoid;
    page-break-after: avoid;
}

.offerte-pdf-inleiding-sectie {
    margin-bottom: 2.5rem;
}

.offerte-pdf-onderwerp-titel {
    margin: 0 0 1rem 0;
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.015em;
}

.offerte-pdf-inleiding-paragraaf {
    margin: 0 0 0.75rem 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.6;
}

.offerte-pdf-inleiding-tussenkop {
    margin: 1.25rem 0 0.4rem 0;
    font-size: 13.5px;
    font-weight: 750;
    color: #0f172a;
    break-after: avoid;
    page-break-after: avoid;
}

.offerte-pdf-brief-afsluiting {
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
    break-inside: avoid;
    page-break-inside: avoid;
}

.offerte-pdf-brief-groet {
    margin: 0 0 0.25rem 0;
    color: #334155;
    font-size: 12px;
}

.offerte-pdf-brief-bedrijf {
    margin: 0 0 0.15rem 0;
    font-size: 13px;
    font-weight: 750;
    color: #0f172a;
}

.offerte-pdf-brief-afzender {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

/* Groepen & Posten */
.offerte-pdf-groepen-container {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.offerte-pdf-groep {
    break-inside: avoid;
    page-break-inside: avoid;
}

.offerte-pdf-groep-header {
    border-bottom: 2px solid #0f172a;
    padding-bottom: 0.35rem;
    margin-bottom: 0.75rem;
}

.offerte-pdf-groep-titel {
    margin: 0;
    font-size: 14.5px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0f172a;
}

.offerte-pdf-groep-toelichting {
    margin: 0 0 0.75rem 0;
    font-size: 12px;
    font-style: italic;
    color: #475569;
    line-height: 1.5;
    white-space: pre-line;
}

/* Regels Tabel */
.offerte-pdf-regels-tabel {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.5rem;
}

.offerte-pdf-regels-tabel th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    padding: 0.5rem 0.35rem;
    border-bottom: 1px solid #cbd5e1;
}

.offerte-pdf-th-hoeveelheid,
.offerte-pdf-th-prijs,
.offerte-pdf-th-totaal,
.offerte-pdf-td-hoeveelheid,
.offerte-pdf-td-prijs,
.offerte-pdf-td-totaal {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.offerte-pdf-regels-tabel td {
    padding: 0.65rem 0.35rem;
    vertical-align: top;
    border-bottom: 1px solid #f1f5f9;
}

.offerte-pdf-rij-hoofd td {
    background-color: #ffffff;
}

.offerte-pdf-regel-omschrijving {
    margin: 0;
    font-weight: 650;
    color: #0f172a;
}

.offerte-pdf-abonnement-badge {
    display: inline-block;
    margin-top: 0.25rem;
    padding: 0.15rem 0.5rem;
    font-size: 10.5px;
    font-weight: 700;
    color: #4338ca;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.offerte-pdf-rij-details td {
    padding-top: 0 !important;
    padding-bottom: 0.85rem !important;
    border-bottom: 1px solid #e2e8f0;
}

.offerte-pdf-regel-details {
    padding-left: 0.5rem;
}

.offerte-pdf-calculatie-tekst {
    margin: 0.25rem 0 0.5rem 0;
    font-size: 12px;
    color: #475569;
    line-height: 1.5;
}

.offerte-pdf-materialen-blok {
    background: #f8fafc;
    border-left: 3px solid #94a3b8;
    padding: 0.5rem 0.75rem;
    border-radius: 0 4px 4px 0;
    margin-top: 0.35rem;
}

.offerte-pdf-materiaal-kop {
    margin: 0 0 0.25rem 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
}

.offerte-pdf-materialen-lijst {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 11.5px;
    color: #334155;
}

.offerte-pdf-materiaal-item {
    margin-bottom: 0.15rem;
}

.offerte-pdf-groep-subtotaal-balk {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0.35rem;
    font-weight: 700;
    font-size: 13px;
    color: #0f172a;
    border-top: 1px solid #cbd5e1;
}

.offerte-pdf-subtotaal-label {
    font-size: 12px;
    color: #64748b;
}

.offerte-pdf-subtotaal-bedrag {
    font-size: 13.5px;
    font-weight: 750;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

/* Investeringsoverzicht (Totalen) */
.offerte-pdf-totalen-sectie,
.offerte-pdf-betalingen-sectie,
.offerte-pdf-voorwaarden-sectie,
.offerte-pdf-afsluiting-sectie,
.offerte-pdf-ondertekening-sectie {
    margin-bottom: 2.5rem;
    break-inside: avoid;
    page-break-inside: avoid;
}

.offerte-pdf-sectie-kop {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 0.75rem 0;
    padding-bottom: 0.45rem;
    border-bottom: 1.5px solid #cbd5e1;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

h2.offerte-pdf-sectie-kop,
h3.offerte-pdf-sectie-kop,
.offerte-pdf-sectie-titel {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.offerte-pdf-sectie-badge {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.offerte-pdf-totalen-tabel,
.offerte-pdf-betalingen-tabel {
    width: 100%;
    border-collapse: collapse;
}

.offerte-pdf-totalen-tabel td {
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13.5px;
    color: #1e293b;
}

.offerte-pdf-td-rechts,
.offerte-pdf-th-rechts {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
}

.offerte-pdf-rij-groep-subtotaal td {
    color: #1e293b;
}

.offerte-pdf-rij-totaal-basis td {
    border-top: 1px solid #cbd5e1;
    font-weight: 700;
    color: #0f172a;
    padding-top: 0.65rem;
}

.offerte-pdf-rij-correctie td {
    color: #047857;
}

.offerte-pdf-rij-netto td {
    font-weight: 700;
    color: #0f172a;
    border-top: 1px solid #cbd5e1;
}

.offerte-pdf-rij-btw td {
    font-size: 12px;
    color: #64748b;
    padding-top: 0.25rem;
    padding-bottom: 0.35rem;
}

.offerte-pdf-rij-eindtotaal td {
    padding: 0.75rem 0.5rem;
    background: #f8fafc;
    border-top: 2px solid #0f172a;
    border-bottom: 2px solid #0f172a;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
}

/* Eindtotaal Highlight Card */
.offerte-pdf-eindtotaal-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.65rem;
    break-inside: avoid;
    page-break-inside: avoid;
}

.offerte-pdf-eindtotaal-label {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
}

.offerte-pdf-eindtotaal-bedrag {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}

/* Opties Banner */
.offerte-pdf-opties-banner {
    background: #f8fafc;
    border-left: 3px solid #2563eb;
    border-radius: 4px;
    padding: 0.65rem 0.85rem;
    margin-bottom: 0.85rem;
}

.offerte-pdf-opties-instructie {
    margin: 0;
    font-size: 12px;
    color: #334155;
    font-weight: 500;
    line-height: 1.5;
}

/* Abonnement Card */
.offerte-pdf-abonnement-card {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 0.5rem;
    break-inside: avoid;
    page-break-inside: avoid;
}

.offerte-pdf-abonnement-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.offerte-pdf-abonnement-card-titel {
    font-size: 13.5px;
    font-weight: 700;
    color: #166534;
}

.offerte-pdf-abonnement-pill {
    background: #dcfce7;
    color: #166534;
    font-size: 11px;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.offerte-pdf-abonnement-specificatie {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: #475569;
    margin-bottom: 0.35rem;
}

.offerte-pdf-abonnement-bedrag {
    font-variant-numeric: tabular-nums;
}

.offerte-pdf-abonnement-prijsbalk {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 0.65rem;
    margin-top: 0.5rem;
    border-top: 1px dashed #86efac;
}

.offerte-pdf-abonnement-prijs-label {
    font-size: 13px;
    font-weight: 700;
    color: #166534;
}

.offerte-pdf-abonnement-prijs-bedrag {
    font-size: 17px;
    font-weight: 800;
    color: #166534;
    font-variant-numeric: tabular-nums;
}

/* Betalingsafspraken */
.offerte-pdf-betalingsconditie-kaart {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #16a34a;
    border-radius: 6px;
    padding: 1rem 1.25rem;
}

.offerte-pdf-betalingsconditie-tekst {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.55;
}

.offerte-pdf-betalingen-tabel {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.offerte-pdf-betalingen-tabel th {
    background: #f8fafc;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #e2e8f0;
}

.offerte-pdf-betalingen-tabel td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    font-size: 13px;
}

.offerte-pdf-betalingen-tabel tr:last-child td {
    border-bottom: none;
}

.offerte-pdf-th-termijn,
.offerte-pdf-td-termijn {
    width: 15%;
}

.offerte-pdf-th-omschrijving,
.offerte-pdf-td-omschrijving {
    width: 50%;
}

.offerte-pdf-th-aandeel,
.offerte-pdf-td-aandeel {
    width: 15%;
}

.offerte-pdf-th-bedrag,
.offerte-pdf-td-bedrag {
    width: 20%;
}

.offerte-pdf-termijn-badge {
    display: inline-block;
    background: #f1f5f9;
    color: #334155;
    font-weight: 700;
    font-size: 11px;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    white-space: nowrap;
}

.offerte-pdf-termijn-titel {
    display: block;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.15rem;
}

.offerte-pdf-termijn-voorwaarde {
    display: block;
    font-size: 12px;
    color: #64748b;
}

.offerte-pdf-percentage-chip {
    font-weight: 600;
    color: #475569;
}

.offerte-pdf-bedrag-vet {
    font-weight: 800;
    color: #0f172a;
}

/* Voorwaarden */
.offerte-pdf-voorwaarden-lijst {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 1.25rem;
}

.offerte-pdf-voorwaarde-titel {
    margin: 0 0 0.2rem 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #0f172a;
}

.offerte-pdf-voorwaarde-tekst {
    margin: 0;
    font-size: 12px;
    color: #334155;
    line-height: 1.55;
}

/* Afsluiting */
.offerte-pdf-afsluiting-paragraaf {
    margin: 0 0 0.75rem 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.6;
}

/* Ondertekening */
.offerte-pdf-akkoord-toelichting {
    margin: 0 0 1rem 0;
    font-size: 12px;
    color: #64748b;
}

.offerte-pdf-handtekening-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 0.75rem;
}

.offerte-pdf-handtekening-box {
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    padding: 1.25rem;
    font-size: 12px;
    color: #1e293b;
    background: #ffffff;
}

.offerte-pdf-handtekening-box p {
    margin: 0 0 0.35rem 0;
}

.offerte-pdf-handtekening-kop {
    margin: 0 0 0.75rem 0;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.offerte-pdf-optie-keuze-rij {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    font-size: 11.5px;
    color: #0f172a;
}

.offerte-pdf-checkbox-vierkant {
    width: 14px;
    height: 14px;
    border: 1.5px solid #64748b;
    border-radius: 3px;
    background: #ffffff;
    flex-shrink: 0;
    display: inline-block;
    box-sizing: border-box;
}

.offerte-pdf-optie-keuze-titel {
    font-weight: 700;
    color: #0f172a;
}

.offerte-pdf-optie-keuze-prijs {
    color: #475569;
    font-weight: 500;
    margin-left: 0.15rem;
}

.offerte-pdf-handtekening-rij {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.4rem;
    font-size: 11.5px;
}

.offerte-pdf-handtekening-label {
    color: #64748b;
    min-width: 50px;
    font-weight: 500;
}

.offerte-pdf-handtekening-waarde {
    color: #0f172a;
    font-weight: 600;
}

.offerte-pdf-handtekening-invullijn {
    flex: 1;
    border-bottom: 1px dotted #94a3b8;
    height: 14px;
    display: inline-block;
}

.offerte-pdf-handtekening-vak {
    margin-top: 0.5rem;
    height: 48px;
    border-bottom: 1px solid #0f172a;
    position: relative;
}

.offerte-pdf-handtekening-watermerk {
    position: absolute;
    bottom: 4px;
    right: 0;
    font-size: 9px;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* Document Footer */
.offerte-pdf-document-footer {
    margin-top: 3.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    font-size: 10.5px;
    color: #64748b;
    line-height: 1.6;
    break-inside: avoid;
    page-break-inside: avoid;
}

.offerte-pdf-footer-regel {
    margin: 0 0 0.15rem 0;
}

/* Offerte PDF Groepsafbeeldingen */
.offerte-pdf-groep-afbeeldingen {
    margin: 1.25rem 0 1rem 0;
    break-inside: avoid;
    page-break-inside: avoid;
}

.offerte-pdf-afbeeldingen-kop {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    margin: 0 0 0.5rem 0;
}

.offerte-pdf-afbeeldingen-grid {
    display: grid;
    gap: 0.75rem;
}

.offerte-pdf-afbeeldingen-grid--1 {
    grid-template-columns: 1fr;
    max-width: 480px;
}

.offerte-pdf-afbeeldingen-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.offerte-pdf-afbeeldingen-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.offerte-pdf-afbeeldingen-grid--4 {
    grid-template-columns: repeat(2, 1fr);
}

.offerte-pdf-afbeelding-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    break-inside: avoid;
    page-break-inside: avoid;
}

.offerte-pdf-afbeelding-wrapper {
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
}

.offerte-pdf-afbeelding-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.offerte-pdf-afbeeldingen-grid--1 .offerte-pdf-afbeelding-img {
    height: 220px;
}

.offerte-pdf-afbeelding-onderschrift {
    font-size: 10px;
    color: #64748b;
    font-style: italic;
    margin: 0;
    line-height: 1.35;
}

/* Voorblad Magazine Layout */
.offerte-pdf-voorblad {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 245mm;
}

.offerte-pdf-voorblad-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 0.75rem;
    min-height: 110px;
}

.offerte-pdf-voorblad-logo {
    max-height: 110px;
    max-width: 360px;
    object-fit: contain;
}

.offerte-pdf-voorblad-bedrijfsnaam {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #0f172a;
    margin: 0;
}

.offerte-pdf-voorblad-boven {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.offerte-pdf-voorblad-onder {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 2rem;
}

.offerte-pdf-voorblad-divider {
    border-bottom: 1px solid #e2e8f0;
    margin: 0.875rem 0;
}

.offerte-pdf-voorblad-afbeelding-container {
    width: 100%;
    height: 380px;
    max-height: 380px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    background-color: #f1f5f9;
}

.offerte-pdf-voorblad-afbeelding {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.offerte-pdf-voorblad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    border: 1px dashed #cbd5e1;
}

.offerte-pdf-voorblad-placeholder-inhoud {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    padding: 1.5rem;
}

.offerte-pdf-voorblad-placeholder-monogram {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #0f172a;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
}

.offerte-pdf-voorblad-placeholder-tekst {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #475569;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.offerte-pdf-voorblad-teksten {
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.offerte-pdf-voorblad-discipline {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin: 0 0 0.5rem 0;
}

.offerte-pdf-voorblad-hoofdkop {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
    margin: 0 0 0.375rem 0;
    letter-spacing: -0.02em;
}

.offerte-pdf-voorblad-subkop {
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0;
}

.offerte-pdf-voorblad-projectblok {
    margin: 0.5rem 0;
}

.offerte-pdf-voorblad-project-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #475569;
    margin: 0 0 0.25rem 0;
}

.offerte-pdf-voorblad-project-titel {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.offerte-pdf-voorblad-project-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.offerte-pdf-voorblad-project-rij {
    display: flex;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.offerte-pdf-voorblad-project-veld {
    color: #64748b;
    min-width: 120px;
    font-weight: 500;
}

.offerte-pdf-voorblad-project-waarde {
    color: #0f172a;
    font-weight: 500;
}

.offerte-pdf-voorblad-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.25rem;
    margin-top: 0.25rem;
}

.offerte-pdf-voorblad-footer-tagline {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.offerte-pdf-voorblad-footer-pagina {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.05em;
}

.offerte-pdf-paginascheiding {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 3.5rem 0 2.5rem 0;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.offerte-pdf-paginascheiding::before,
.offerte-pdf-paginascheiding::after {
    content: "";
    flex: 1;
    border-bottom: 1px dashed #cbd5e1;
}

/* Running Header (Pagina 3+) */
.offerte-pdf-running-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    font-weight: 600;
    color: #64748b;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.offerte-pdf-running-header-titel {
    font-weight: 700;
    color: #0f172a;
}

.offerte-pdf-running-header-klant {
    color: #64748b;
}

/* Specificatie header */
.offerte-pdf-specificatie-kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.75rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #0f172a;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
}

.offerte-pdf-specificatie-kop-titel {
    letter-spacing: -0.01em;
}

.offerte-pdf-specificatie-kop-bedrijf {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
}

/* Toolbar tip */
.offerte-pdf-toolbar-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-right: 1rem;
}

/* Afronding sectie */
.offerte-pdf-afronding {
    margin-top: 2rem;
}

/* ==========================================================================
   Offerte A4 Print & PDF Stijlen
   ========================================================================== */

@page {
    size: A4 portrait;
    margin: 15mm 15mm 20mm 15mm;
}

@media print {
    html,
    body,
    .offerte-pdf-body {
        background: #ffffff !important;
        color: #0f172a !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .offerte-pdf-screen-toolbar {
        display: none !important;
    }

    .offerte-pdf-document {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 0 !important;
    }

    .offerte-pdf-voorblad {
        display: flex !important;
        flex-direction: column !important;
        min-height: 236mm !important;
        page-break-after: always !important;
        break-after: page !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    .offerte-pdf-voorblad-header {
        min-height: 100px !important;
        padding-bottom: 0.35rem !important;
    }

    .offerte-pdf-voorblad-logo {
        max-height: 100px !important;
        max-width: 340px !important;
    }

    .offerte-pdf-voorblad-boven {
        display: flex !important;
        flex-direction: column !important;
        flex-shrink: 0 !important;
    }

    .offerte-pdf-voorblad-onder {
        display: flex !important;
        flex-direction: column !important;
        flex-shrink: 0 !important;
        margin-top: auto !important;
        padding-top: 1rem !important;
    }

    .offerte-pdf-voorblad-afbeelding-container {
        height: 295px !important;
        max-height: 295px !important;
    }

    .offerte-pdf-paginascheiding {
        display: none !important;
    }

    .offerte-pdf-brief {
        page-break-after: always !important;
        break-after: page !important;
        margin-bottom: 0 !important;
    }

    .offerte-pdf-brief-top {
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
    }

    .offerte-pdf-brief-adres {
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .offerte-pdf-brief-adres-label {
        font-size: 8.5px !important;
    }

    .offerte-pdf-brief-adres-klant {
        font-size: 12.5px !important;
    }

    .offerte-pdf-brief-adres-regel {
        font-size: 11px !important;
    }

    .offerte-pdf-brief-adres-contact {
        font-size: 10.5px !important;
    }

    .offerte-pdf-brief-meta {
        font-size: 10.5px !important;
        line-height: 1.4 !important;
    }

    .offerte-pdf-brief-betreft {
        margin-bottom: 8px !important;
    }

    .offerte-pdf-brief-betreft-titel {
        font-size: 12.5px !important;
        padding-bottom: 2px !important;
    }

    .offerte-pdf-brief-paragraaf {
        margin-bottom: 4px !important;
        font-size: 11px !important;
        line-height: 1.45 !important;
    }

    .offerte-pdf-brief-tussenkop {
        break-after: avoid !important;
        page-break-after: avoid !important;
        margin-top: 7px !important;
        margin-bottom: 2px !important;
        font-size: 11.5px !important;
    }

    .offerte-pdf-brief-afsluiting {
        margin-top: 10px !important;
        padding-top: 6px !important;
    }

    .offerte-pdf-brief-groet {
        margin-bottom: 2px !important;
        font-size: 11px !important;
    }

    .offerte-pdf-brief-bedrijf {
        font-size: 12px !important;
    }

    .offerte-pdf-brief-afzender {
        font-size: 11px !important;
    }

    .offerte-pdf-running-header {
        margin-bottom: 1rem !important;
        padding-bottom: 0.35rem !important;
    }

    .offerte-pdf-specificatie {
        page-break-before: always !important;
        break-before: page !important;
        page-break-after: always !important;
        break-after: page !important;
    }

    .offerte-pdf-groepen-container {
        gap: 1.15rem !important;
        margin-bottom: 0.85rem !important;
    }

    .offerte-pdf-groep {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        margin-bottom: 0 !important;
    }

    .offerte-pdf-groep-header {
        padding-bottom: 0.2rem !important;
        margin-bottom: 0.35rem !important;
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    .offerte-pdf-groep-titel {
        font-size: 13px !important;
    }

    .offerte-pdf-groep-toelichting {
        font-size: 11px !important;
        line-height: 1.35 !important;
        margin-bottom: 0.35rem !important;
    }

    .offerte-pdf-regels-tabel {
        page-break-inside: auto !important;
    }

    .offerte-pdf-regels-tabel thead {
        display: table-header-group !important;
    }

    .offerte-pdf-regels-tabel th {
        padding: 3px 6px !important;
        font-size: 10px !important;
    }

    .offerte-pdf-regels-tabel td {
        padding: 3px 6px !important;
        font-size: 11px !important;
    }

    .offerte-pdf-materialen-blok {
        margin: 0.3rem 0 0.15rem 0 !important;
        padding: 0.35rem 0.6rem !important;
    }

    .offerte-pdf-materiaal-kop {
        font-size: 9.5px !important;
        margin-bottom: 0.15rem !important;
    }

    .offerte-pdf-materialen-lijst {
        gap: 0.1rem !important;
        margin-bottom: 0 !important;
    }

    .offerte-pdf-materiaal-item {
        font-size: 9.5px !important;
        margin-bottom: 0.05rem !important;
    }

    .offerte-pdf-groep-subtotaal-balk {
        padding: 0.25rem 0.2rem !important;
        margin-top: 0.2rem !important;
        margin-bottom: 0.2rem !important;
        font-size: 11px !important;
    }

    .offerte-pdf-rij-hoofd,
    .offerte-pdf-rij-details {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .offerte-pdf-groep-afbeeldingen {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .offerte-pdf-afbeelding-item {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .offerte-pdf-afbeelding-img {
        height: 110px !important;
    }

    .offerte-pdf-afbeeldingen-grid--1 .offerte-pdf-afbeelding-img {
        height: 150px !important;
    }

    .offerte-pdf-afronding {
        page-break-before: always !important;
        break-before: page !important;
        min-height: 236mm !important;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important;
    }

    .offerte-pdf-afronding .offerte-pdf-totalen-sectie,
    .offerte-pdf-afronding .offerte-pdf-betalingen-sectie,
    .offerte-pdf-afronding .offerte-pdf-voorwaarden-sectie,
    .offerte-pdf-afronding .offerte-pdf-afsluiting-sectie,
    .offerte-pdf-afronding .offerte-pdf-ondertekening-sectie {
        margin-bottom: 0.35rem !important;
    }

    .offerte-pdf-afronding .offerte-pdf-sectie-kop {
        margin-bottom: 0.2rem !important;
        padding-bottom: 0.15rem !important;
        font-size: 12px !important;
    }

    .offerte-pdf-afronding .offerte-pdf-sectie-titel {
        font-size: 12px !important;
    }

    .offerte-pdf-afronding .offerte-pdf-sectie-badge {
        font-size: 9px !important;
    }

    .offerte-pdf-afronding .offerte-pdf-opties-banner {
        padding: 4px 8px !important;
        margin-bottom: 4px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .offerte-pdf-afronding .offerte-pdf-opties-instructie {
        font-size: 11px !important;
    }

    .offerte-pdf-afronding .offerte-pdf-totalen-tabel td {
        padding: 2.5px 6px !important;
        font-size: 11px !important;
    }

    .offerte-pdf-afronding .offerte-pdf-betalingsconditie-kaart {
        padding: 4px 8px !important;
        border-radius: 4px !important;
    }

    .offerte-pdf-afronding .offerte-pdf-betalingsconditie-tekst {
        font-size: 10.5px !important;
        line-height: 1.3 !important;
    }

    .offerte-pdf-afronding .offerte-pdf-voorwaarden-lijst {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.25rem 0.75rem !important;
    }

    .offerte-pdf-afronding .offerte-pdf-voorwaarde-item {
        font-size: 9px !important;
        line-height: 1.25 !important;
        margin-bottom: 0.1rem !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .offerte-pdf-afronding .offerte-pdf-voorwaarde-titel {
        font-size: 9.5px !important;
        font-weight: 700 !important;
        margin-bottom: 0.05rem !important;
    }

    .offerte-pdf-afronding .offerte-pdf-voorwaarde-tekst {
        font-size: 9px !important;
        line-height: 1.25 !important;
        margin: 0 !important;
    }

    .offerte-pdf-afronding .offerte-pdf-betalingen-tabel td {
        padding: 2.5px 6px !important;
        font-size: 10.5px !important;
    }

    .offerte-pdf-afronding .offerte-pdf-betalingen-tabel th {
        padding: 3px 6px !important;
        font-size: 9.5px !important;
    }

    .offerte-pdf-afronding .offerte-pdf-termijn-voorwaarde {
        font-size: 9.5px !important;
        line-height: 1.25 !important;
    }

    .offerte-pdf-afronding .offerte-pdf-afsluiting-paragraaf {
        font-size: 9.5px !important;
        line-height: 1.3 !important;
        margin-bottom: 0.2rem !important;
    }

    .offerte-pdf-afronding .offerte-pdf-akkoord-toelichting {
        font-size: 9.5px !important;
        margin-bottom: 0.25rem !important;
    }

    .offerte-pdf-afronding .offerte-pdf-handtekening-box {
        padding: 0.45rem 0.6rem !important;
    }

    .offerte-pdf-afronding .offerte-pdf-handtekening-kop {
        font-size: 10.5px !important;
        margin-bottom: 0.25rem !important;
        padding-bottom: 0.1rem !important;
    }

    .offerte-pdf-afronding .offerte-pdf-optie-keuze-rij {
        gap: 0.35rem !important;
        margin-bottom: 0.2rem !important;
        font-size: 10.5px !important;
    }

    .offerte-pdf-afronding .offerte-pdf-checkbox-vierkant {
        width: 12px !important;
        height: 12px !important;
    }

    .offerte-pdf-afronding .offerte-pdf-handtekening-veld-rij {
        gap: 0.25rem !important;
        margin-top: 0.2rem !important;
        font-size: 10px !important;
    }

    .offerte-pdf-afronding .offerte-pdf-handtekening-vak {
        height: 28px !important;
        margin-top: 0.2rem !important;
    }

    .offerte-pdf-afronding .offerte-pdf-handtekening-watermerk {
        font-size: 8px !important;
    }

    .offerte-pdf-afronding .offerte-pdf-document-footer {
        margin-top: auto !important;
        padding-top: 0.35rem !important;
        font-size: 9.5px !important;
    }

    .offerte-pdf-totalen-sectie,
    .offerte-pdf-totalen-blok,
    .offerte-pdf-eindtotaal-card,
    .offerte-pdf-abonnement-card,
    .offerte-pdf-betalingen-sectie,
    .offerte-pdf-betalingen-tabel,
    .offerte-pdf-voorwaarden-sectie,
    .offerte-pdf-ondertekening-sectie {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .offerte-pdf-handtekening-grid {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    .offerte-pdf-document-footer {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}

/* Offerte Portal Groepsafbeeldingen Thumbnails */
.offerte-groep-thumbnails-container {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface-subtle, #fafafa);
}

.offerte-groep-thumbnails-kop {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.75rem 0;
}

.offerte-groep-thumbnails-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.offerte-groep-thumbnail-item {
    display: flex;
    flex-direction: column;
    width: 130px;
    gap: 0.375rem;
}

.offerte-groep-thumbnail-img {
    width: 130px;
    height: 85px;
    object-fit: cover;
    border-radius: 0.375rem;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.offerte-groep-thumbnail-onderschrift {
    font-size: 0.75rem;
    color: var(--muted, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Offerte Groep Afbeeldingen Beheer Modal */
.offerte-afbeeldingen-sectie-titel {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.offerte-afbeeldingen-leeg {
    color: var(--muted, #64748b);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.offerte-afbeeldingen-lijst {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.offerte-afbeelding-kaart {
    display: flex;
    flex-direction: column;
    background: var(--surface-subtle, #f8fafc);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    overflow: hidden;
    padding: 0.75rem;
    gap: 0.5rem;
}

.offerte-afbeelding-preview {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 0.375rem;
    border: 1px solid var(--border);
}

.offerte-afbeelding-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-grow: 1;
}

.offerte-afbeelding-positie-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary, #0f766e);
    background: rgba(15, 118, 110, 0.1);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    align-self: flex-start;
}

.offerte-afbeelding-onderschrift-tekst {
    font-size: 0.8125rem;
    color: var(--foreground, #0f172a);
    margin: 0;
    word-break: break-word;
}

.offerte-afbeelding-verwijder-form {
    margin-top: auto;
    display: flex;
}

.offerte-afbeelding-verwijder-form button {
    width: 100%;
}

.offerte-afbeeldingen-toevoegen-titel {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.offerte-afbeelding-upload-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.offerte-afbeelding-dropzone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-control, 0.5rem);
    padding: 1.5rem 1rem;
    text-align: center;
    background: var(--surface-raised, #f8fafc);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.offerte-afbeelding-dropzone:hover {
    border-color: var(--primary, #0f766e);
    background: var(--page-accent, #f0fdf4);
}

.offerte-afbeelding-dropzone--dragover {
    border-color: var(--primary, #0f766e);
    border-style: solid;
    background: var(--page-accent, #f0fdf4);
}

.offerte-afbeelding-dropzone-icoon {
    color: var(--primary, #0f766e);
    margin-bottom: 0.25rem;
}

.offerte-afbeelding-dropzone-tekst {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text, #0f172a);
    margin: 0;
}

.offerte-afbeelding-dropzone-hint {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
    margin: 0 0 0.5rem 0;
}

.offerte-afbeelding-dropzone .beheer-form-field {
    margin-bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.offerte-afbeelding-dropzone .beheer-form-label {
    display: none;
}

.offerte-afbeelding-dropzone-preview {
    display: none;
    width: 100%;
}

.offerte-afbeelding-dropzone-preview--visible {
    display: block;
    margin-top: 0.75rem;
}

.offerte-afbeelding-preview-kaart {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border);
    border-radius: var(--radius-control, 0.375rem);
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.offerte-afbeelding-preview-kaart--error {
    border-color: #fca5a5;
    background: #fef2f2;
}

.offerte-afbeelding-preview-miniatuur {
    width: 72px;
    height: 52px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.offerte-afbeelding-preview-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-grow: 1;
    min-width: 0;
}

.offerte-afbeelding-status-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.125rem 0.375rem;
    border-radius: 3px;
    background: #dcfce7;
    color: #166534;
}

.offerte-afbeelding-status-badge--error {
    background: #fee2e2;
    color: #991b1b;
}

.offerte-afbeelding-preview-bestandsnaam {
    font-size: 0.8125rem;
    color: var(--text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.offerte-afbeelding-preview-wissen-knop {
    background: transparent;
    border: 0;
    color: var(--danger, #dc2626);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    flex-shrink: 0;
}

.offerte-afbeelding-preview-wissen-knop:hover {
    text-decoration: underline;
}

.offerte-afbeelding-upload-actie {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.offerte-afbeeldingen-vol-melding {
    padding: 0.75rem 1rem;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 0.5rem;
    color: #92400e;
    font-size: 0.875rem;
}

/* ==========================================================================
   Taken & Notities Context Modal Styling
   ========================================================================== */

.taak-context-card {
    display: grid;
    gap: 1.25rem;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.taak-context-card--collapsible.taak-context-card--collapsed {
    display: none;
}

.taak-context-card--afgerond.taak-context-card--collapsed .taak-context-afgerond-inhoud {
    display: none;
}

.taak-context-card-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.taak-context-card-titel {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--text);
}

.taak-context-quick-add-form {
    display: grid;
    gap: 1rem;
}

.taak-context-quick-add-form .beheer-form-textarea {
    min-height: 4.25rem;
}

.taak-context-form-grid-boven {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1rem;
}

.taak-context-form-grid-onder {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 48rem) {
    .taak-context-form-grid-boven,
    .taak-context-form-grid-onder {
        grid-template-columns: 1fr;
    }}

.taak-context-form-acties {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

.taak-context-submit-btn {
    min-height: 2.375rem;
    padding: 0.45rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.taak-context-tijdlijn {
    display: grid;
    gap: 0.875rem;
}

.taak-context-item {
    display: grid;
    gap: 0.625rem;
    padding: 1.125rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.taak-context-item:hover {
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.taak-context-item--voltooid {
    background: color-mix(in srgb, var(--surface) 95%, var(--border));
    opacity: 0.85;
}

.taak-context-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.taak-context-item-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.taak-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.taak-badge--type {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.taak-badge--status-open,
.taak-badge--status-in_behandeling {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
}

.taak-badge--status-voltooid {
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.taak-badge--status-geannuleerd {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #64748b;
}

.taak-badge--prioriteit-urgent {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.taak-badge--prioriteit-hoog {
    background: #ffedd5;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

.taak-badge--prioriteit-laag {
    background: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.taak-badge--te-laat {
    background: #dc2626;
    color: #ffffff;
    font-weight: 700;
}

.taak-context-item-titel {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

.taak-context-item-titel--voltooid {
    text-decoration: line-through;
    color: var(--text-muted);
}

.taak-context-item-toelichting {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
}

.taak-context-item-meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.taak-context-toggle-btn {
    min-height: 2.125rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: var(--radius-control);
}

.taak-context-leeg {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-control);
}

.taak-context-leeg-icoon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.taak-context-leeg-titel {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.taak-context-leeg-tekst {
    margin: 0;
    max-width: 28rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.taak-context-leeg-icoon--succes {
    background: #dcfce7;
    color: #166534;
}

.taak-context-toggle-add-btn,
.taak-context-afgerond-toggle-btn,
.taak-context-add-cancel-btn {
    font-size: 0.8125rem;
    font-weight: 400;
    padding: 0.3rem 0.85rem;
    min-height: 2rem;
    border-radius: var(--radius-control);
}

.taak-context-intro-hint {
    padding: 0.85rem 1.15rem;
    background: color-mix(in srgb, var(--primary) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border));
    border-radius: var(--radius-card);
    color: var(--text);
    font-size: 0.875rem;
    line-height: 1.45;
}

.taak-context-intro-hint p {
    margin: 0;
}

.offerte-verzend-blok {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.offerte-verzendingen-lijst {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
}

.offerte-verzending-kaart {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 0.5rem);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.offerte-verzending-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle, var(--border));
}

.offerte-verzending-identiteit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.offerte-verzending-titel {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-main);
}

.offerte-verzending-scheider {
    color: var(--border);
}

.offerte-verzending-datum {
    font-weight: 500;
    color: var(--text-main);
}

.offerte-verzending-auteur {
    color: var(--text-muted);
}

.offerte-verzending-acties {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.offerte-verzending-meta {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    background: color-mix(in srgb, var(--surface-muted, #f8fafc) 60%, var(--surface));
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm, 0.375rem);
    border: 1px solid var(--border-subtle, var(--border));
}

.offerte-verzending-meta-rij {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.offerte-verzending-meta-label {
    min-width: 5.5rem;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}

.offerte-verzending-meta-waarde {
    color: var(--text-main);
    word-break: break-word;
}

.offerte-verzending-bericht-container {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.offerte-verzending-bericht-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.offerte-verzending-bericht-tekst {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-main);
    white-space: pre-wrap;
    background: var(--surface);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm, 0.375rem);
    border: 1px solid var(--border-subtle, var(--border));
}

.offerte-verzending-bericht-tekst--leeg {
    color: var(--text-muted);
    font-style: italic;
}

/* ==========================================================================
   Offerte Online Bekijken & Akkoord
   ========================================================================== */
body.offerte-online-body {
    background: #f1f5f9;
    color: var(--text-main, #1e293b);
    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.offerte-online-container {
    max-width: 58rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

.offerte-online-card {
    background: #ffffff;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
    border-radius: 0.75rem;
    padding: 3rem 3.5rem;
    border: 1px solid #e2e8f0;
}

.offerte-online-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 2rem;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 2rem;
    gap: 1.5rem;
}

.offerte-online-header-rechts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
    text-align: right;
}

.offerte-online-bedrijfsgegevens p {
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.4;
}

.offerte-online-pdf-knop {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #334155;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.15s ease;
}

.offerte-online-pdf-knop:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
}

.offerte-online-status-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    font-size: 0.9375rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
}

.offerte-online-status-banner h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.offerte-online-status-banner p {
    margin: 0;
    line-height: 1.4;
}

.offerte-online-status-banner--succes {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.offerte-online-status-banner--waarschuwing {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.offerte-online-status-banner--info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.offerte-online-aantekening-tekst {
    margin-top: 0.5rem !important;
    font-style: italic;
    color: #047857;
}

.offerte-online-akkoord-sectie {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e2e8f0;
}

.offerte-online-akkoord-kaart {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    padding: 2rem;
}

.offerte-online-akkoord-titel {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
}

.offerte-online-akkoord-inleiding {
    margin: 0 0 1.5rem 0;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
}

.offerte-online-akkoord-formulier {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.offerte-online-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.offerte-online-form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
}

.offerte-online-input,
.offerte-online-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-family: inherit;
    font-size: 0.9375rem;
    color: #1e293b;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 0.375rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.offerte-online-input:focus,
.offerte-online-textarea:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.offerte-online-textarea {
    resize: vertical;
    min-height: 5rem;
}

.offerte-online-checkbox-container {
    display: flex;
    align-items: flex-start;
    margin: 0.5rem 0;
}

.offerte-online-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    font-size: 0.9375rem;
    color: #1e293b;
    font-weight: 500;
}

.offerte-online-checkbox {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--primary, #10b981);
    cursor: pointer;
}

.offerte-online-submit-knop {
    align-self: flex-start;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    font-weight: 400;
    color: #ffffff;
    background: #10b981;
    border: 1px solid #059669;
    border-radius: 0.375rem;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.15s ease;
}

.offerte-online-submit-knop:hover {
    background: #059669;
}

@media (max-width: 48rem) {
    .offerte-online-card {
        padding: 1.5rem 1.25rem;
    }

    .offerte-online-header {
        flex-direction: column;
        align-items: stretch;
    }

    .offerte-online-header-rechts {
        align-items: flex-start;
        text-align: left;
    }
}

/* Offerte Bedrag Weergave in Overzichten */
.offerte-bedrag-stacked {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
    vertical-align: middle;
}

.offerte-bedrag-hoofd {
    font-weight: 600;
    color: var(--text, #0f172a);
    font-size: 0.875rem;
    white-space: nowrap;
}

.offerte-bedrag-abo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.4375rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.offerte-bedrag-abo-badge--doorlopend {
    background: #f1f5f9;
    color: #334155;
    border-color: #cbd5e1;
}

@media (max-width: 48rem) {
    .datatable-werkbalk {
        align-items: stretch;
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
    }

    .datatable-zoek-control {
        flex-basis: 100%;
    }

    .datatable-filters,
    .datatable-kolommen,
    .datatable-exporteren-knop {
        flex: 1 1 calc(50% - 0.375rem);
    }

    .datatable-filters-knop,
    .datatable-kolommen-knop,
    .datatable-exporteren-knop {
        width: 100%;
        justify-content: center;
    }

    .datatable-filters-paneel,
    .datatable-kolommen-paneel {
        width: min(20rem, calc(100vw - 2rem));
    }

    .datatable-table-scroll {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .datatable-paginering {
        flex-wrap: wrap;
        padding: 0.875rem 1rem;
    }

    .datatable-pagina-informatie {
        order: 3;
        width: 100%;
        margin: 0.25rem 0 0;
    }

    .datatable-pagina-grootte-label {
        margin-left: auto;
    }
}

/* Compactere dichtheid voor de beheerinterface. */
.beheer-body {
    --beheer-compact-font-size: 0.9375rem;
    --beheer-compact-font-size-small: 0.8125rem;
    --beheer-compact-font-size-dense: 0.875rem;
    --beheer-compact-control-height: 2.25rem;
    --beheer-compact-row-height: 2.5rem;
    --beheer-compact-content-padding: clamp(1rem, 2vw, 1.5rem);
    font-size: var(--beheer-compact-font-size);
}

.weekplanning-werkbalk {
    gap: 0.75rem;
    padding: 0.5rem 1.25rem;
}

.weekplanning-weeknavigatie,
.weekplanning-weekbediening {
    height: 2.25rem;
}

.weekplanning-vandaag-knop,
.weekplanning-week-knop,
.weekplanning-koppel-filter,
.weekplanning-medewerker-zoekveld {
    min-height: 2.25rem;
}

.weekplanning-vandaag-knop,
.weekplanning-week-knop {
    height: 2.25rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.weekplanning-koppel-filter {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.weekplanning-medewerker-zoekveld {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

.beheer-header {
    min-height: 4.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.beheer-header-actions {
    gap: 0.75rem;
}

.beheer-brand-title {
    font-size: 1rem;
}

.beheer-brand-kicker,
.beheer-kicker {
    font-size: 0.6875rem;
}

@media (min-width: 46.0625rem) {
    .hovenierportaal-body .beheer-header {
        padding-left: 2rem;
    }
}

.beheer-layout {
    min-height: calc(100dvh - 4.25rem);
}

.beheer-navigation {
    top: 4.25rem;
    width: 14rem;
    height: calc(100dvh - 4.25rem);
    padding: 0.75rem;
}

.beheer-navigation-link {
    min-height: 2.75rem;
    margin-right: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--beheer-compact-font-size-dense);
}

.beheer-navigation-link .web-icon {
    flex: 0 0 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.4375rem;
    margin-right: 0.71875rem;
}

.beheer-layout--collapsed .beheer-navigation-link {
    padding: 0;
}

.beheer-layout--collapsed .beheer-navigation-link > span {
    position: absolute;
}

.beheer-layout--collapsed .beheer-navigation-link .web-icon {
    margin-left: 0;
}

.beheer-navigation-submenu {
    margin-left: 1.4375rem;
}

.beheer-navigation-submenu-link {
    min-height: 2.25rem;
    gap: 1rem;
    font-size: var(--beheer-compact-font-size-small);
}

.beheer-navigation > .beheer-navigation-item--with-submenu .beheer-navigation-submenu-indicator {
    transform: translateX(-0.25rem);
}

.beheer-navigation .beheer-navigation-submenu-link .beheer-navigation-submenu-indicator {
    transform: translateX(3px);
}

.beheer-layout--collapsed .beheer-navigation {
    padding: 0.75rem;
}

.beheer-layout--collapsed .beheer-navigation-item--with-submenu {
    display: contents;
}

.beheer-layout--collapsed .beheer-navigation-link {
        min-height: 2.75rem;
        height: 2.75rem;
        width: 2.75rem;
        margin-left: 0;
        margin-right: 0;
    }

@media (min-width: 46.0625rem) {
    .beheer-layout--collapsed .beheer-navigation-link--active {
        justify-self: center;
        width: 2.75rem;
        min-height: 2.75rem;
        height: 2.75rem;
        margin: 0;
        padding: 0;
        background: var(--beheer-navigation-hover-surface);
        border-color: var(--beheer-navigation-hover-border);
        transition: width 360ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color 180ms ease;
    }

    html:not(.beheer-layout--collapsed) .beheer-navigation-link {
        width: calc(100% - 1rem);
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }

    html:not(.beheer-layout--collapsed) .beheer-navigation-link--active {
        background: var(--beheer-navigation-active-surface);
        border-color: var(--beheer-navigation-active-border);
        transition: width 360ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color 180ms ease;
    }

    .beheer-layout--collapsed .beheer-navigation-link--active:hover {
        background: var(--beheer-navigation-hover-surface);
    }
}

.beheer-layout--collapsed .beheer-navigation-toggle {
    left: 0.375rem;
    justify-content: center;
    padding: 0;
    font-size: 0;
}

.beheer-layout--collapsed .beheer-navigation-toggle-label {
    display: none;
}

.application-content {
    padding: var(--beheer-compact-content-padding);
}

.beheer-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.beheer-introduction {
    margin: 0.75rem 0 1.5rem;
    font-size: 1rem;
}

.beheer-dashboard {
    gap: 1rem;
}

.beheer-dashboard-hero {
    min-height: 10.5rem;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.beheer-dashboard-kicker {
    margin-bottom: 0.625rem;
    font-size: 0.6875rem;
}

.beheer-dashboard-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.beheer-dashboard-introduction {
    margin-top: 0.75rem;
    font-size: 1rem;
}

.beheer-dashboard-statistics,
.beheer-dashboard-columns {
    gap: 0.75rem;
}

.beheer-dashboard-statistic {
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    min-height: 6.5rem;
    padding: 1rem 1.25rem;
}

.beheer-dashboard-statistic-icon {
    width: 3.5rem;
    height: 3.5rem;
}

.beheer-dashboard-statistic-icon .web-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.beheer-dashboard-statistic-value {
    font-size: 1.5rem;
}

.beheer-dashboard-section {
    padding: 1.25rem;
}

.beheer-dashboard-section-title {
    font-size: 1.125rem;
}

.beheer-dashboard-quick-actions {
    gap: 0.5rem;
    margin-top: 1rem;
}

.beheer-dashboard-quick-action {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: 0.5rem;
    min-height: 4.5rem;
    padding: 0.75rem;
}

.beheer-dashboard-quick-action-icon {
    width: 2rem;
    height: 2rem;
}

.beheer-dashboard-quick-action-icon .web-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.beheer-paneel-header {
    min-height: 5rem;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
}

.beheer-paneel-header-copy {
    gap: 0;
}

.beheer-paneel-icon {
    width: 2.5rem;
    height: 2.5rem;
}

.beheer-paneel-icon .web-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.beheer-paneel-title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1.25rem;
}

.beheer-paneel-aantal {
    display: inline-grid;
    min-width: 1.375rem;
    height: 1.375rem;
    place-items: center;
    align-self: center;
    padding: 0 0.375rem;
    background: color-mix(in srgb, var(--primary) 25%, var(--surface));
    border-radius: 999px;
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1;
    text-align: center;
}

.beheer-paneel-subtitle {
    font-size: var(--beheer-compact-font-size-small);
}

.beheer-paneel-header-status {
    min-height: 2.125rem;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: var(--beheer-compact-font-size-small);
}

.beheer-paneel-header-acties-knop,
.beheer-paneel-header-primaire-actie {
    min-height: var(--beheer-compact-control-height);
    padding: 0.375rem 0.625rem;
    font-size: var(--beheer-compact-font-size-small);
}

.beheer-paneel-header-acties-item {
    min-height: 2.25rem;
    padding: 0.375rem 0.625rem;
    font-size: var(--beheer-compact-font-size-small);
}

.beheer-form-content {
    gap: 0.75rem 1rem;
    padding: 1.25rem;
}

.beheer-tabs-list {
    padding-right: 1.25rem;
    padding-left: 0.75rem;
}

.beheer-tab {
    min-height: 2.75rem;
    gap: 0.375rem;
    padding: 0.625rem 0.5rem 0 0.75rem;
    font-size: 0.875rem;
}

.beheer-tab-label {
    padding-bottom: 0.25rem;
}

.beheer-tab-count {
    min-width: 1.25rem;
    height: 1.25rem;
    margin-bottom: 0.375rem;
}

.sectie-paneel-kop {
    min-height: 3.5rem;
    padding: 0.75rem 1.25rem;
}

.sectie-paneel-icoon {
    width: 2rem;
    height: 2rem;
}

.sectie-paneel-titel {
    font-size: 1rem;
}

.sectie-paneel-beschrijving {
    font-size: var(--beheer-compact-font-size-small);
}

.sectie-paneel-inhoud {
    padding: 1rem 1.25rem;
}

.paneel-acties {
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
}

.paneel-acties::after {
    right: 1.25rem;
    left: 1.25rem;
}

.paneel-acties-primair,
.paneel-acties-menu-knop {
    min-height: 2.5rem;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.datatable-werkbalk {
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
}

.datatable-zoek-input,
.datatable-filter-input {
    min-height: 2rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: var(--beheer-compact-font-size-small);
}

.datatable-filters-knop,
.datatable-kolommen-knop,
.datatable-exporteren-knop {
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
    font-size: var(--beheer-compact-font-size-small);
}

.datatable-filters-paneel,
.datatable-kolommen-paneel {
    gap: 0.5rem;
    padding: 0.75rem;
}

.datatable-filters-titel,
.datatable-kolommen-titel,
.datatable-filter-label {
    font-size: var(--beheer-compact-font-size-small);
}

.datatable-filters-lijst {
    gap: 0.5rem;
}

.datatable-kolommen-lijst {
    gap: 0.375rem;
}

.datatable-kolom-keuze {
    gap: 0.5rem;
    font-size: var(--beheer-compact-font-size-small);
}

.datatable-table-scroll {
    padding: 0.75rem 1.25rem 1.25rem;
}

.datatable-table th,
.datatable-table td {
    padding: 0.375rem 1rem;
}

.datatable-table th {
    font-size: 0.75rem;
}

.datatable-table td {
    font-size: var(--beheer-compact-font-size-dense);
}

.datatable-table tbody tr,
.datatable-table tbody td {
    height: var(--beheer-compact-row-height);
}

.projecten-overzicht-tabel .datatable-table th[data-datatable-kolom="onderwerp"] {
    width: 30%;
}

.datatable-row-action,
.icoon-actie {
    min-height: 1.875rem;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: var(--beheer-compact-font-size-small);
}

.datatable-row-action--bewerken,
.icoon-actie--bewerken,
.datatable-row-action--downloaden,
.icoon-actie--downloaden,
.datatable-row-action--verwijderen,
.icoon-actie--verwijderen,
.datatable-row-action--omhoog,
.datatable-row-action--omlaag {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
}

.datatable-row-action .web-icon,
.icoon-actie .web-icon {
    width: 1rem;
    height: 1rem;
}

.datatable-paginering {
    gap: 0.375rem;
    padding: 0.75rem 1.25rem;
}

.datatable-paginering-knop,
.datatable-pagina-knop {
    width: 2rem;
    height: 2rem;
    font-size: var(--beheer-compact-font-size-small);
}

.datatable-pagina-weglating {
    height: 2rem;
}

.datatable-pagina-informatie,
.datatable-pagina-grootte-label {
    font-size: var(--beheer-compact-font-size-small);
}

.datatable-pagina-grootte {
    min-height: 2rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: var(--beheer-compact-font-size-small);
}

.beheer-form-label,
.beheer-form-help,
.beheer-form-instruction {
    font-size: var(--beheer-compact-font-size-small);
}

.beheer-form-input {
    height: var(--beheer-compact-control-height);
    padding: 0.375rem 0.625rem;
    font-size: var(--beheer-compact-font-size-small);
}

.beheer-primary-action,
.beheer-secondary-action {
    min-height: var(--beheer-compact-control-height);
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
    font-size: var(--beheer-compact-font-size-small);
}

.beheer-form-footer .beheer-primary-action,
.beheer-form-footer .beheer-secondary-action {
    min-height: var(--beheer-compact-control-height);
    padding: 0.375rem 0.75rem;
    font-size: var(--beheer-compact-font-size-small);
}

.paneel-acties-primair--alleen-icoon {
    width: var(--beheer-compact-control-height);
    padding: 0.375rem;
}

.beheer-toast {
    gap: 0.75rem;
    padding: 1rem;
}

.beheer-toast-title {
    font-size: var(--beheer-compact-font-size);
}

.beheer-toast-message {
    font-size: var(--beheer-compact-font-size-small);
}

@media (max-width: 46rem) {
    .beheer-form-input,
    .datatable-zoek-input,
    .datatable-filter-input {
        font-size: 1rem;
    }

    .beheer-layout {
        min-height: calc(100dvh - 4.25rem);
    }

    .verkoop-dashboard-toggles-bar {
        padding-right: 1rem;
    }

    .beheer-navigation {
        top: auto;
        width: 100%;
        height: auto;
        padding: 0.75rem;
    }

    .beheer-layout--collapsed .beheer-navigation {
        width: 100%;
        padding: 0.75rem;
    }

    .beheer-layout--collapsed .beheer-navigation-link,
    .beheer-navigation-link {
        width: 100%;
        min-height: 2.75rem;
        height: auto;
        margin: 0;
        padding: 0.5rem 0.75rem;
        font-size: var(--beheer-compact-font-size-dense);
    }

    .beheer-layout--collapsed .beheer-navigation-link .web-icon,
    .beheer-navigation-link .web-icon {
        margin-left: 0;
        margin-right: 0.625rem;
    }

    .beheer-navigation-submenu {
        margin-left: 1.4375rem;
    }

    .beheer-paneel-header,
    .beheer-form-content,
    .beheer-form-footer {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .beheer-paneel-header {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
    }

    .beheer-tabs-list {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .sectie-paneel-kop,
    .sectie-paneel-inhoud {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .datatable-werkbalk {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .datatable-table-scroll {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .datatable-table th,
    .datatable-table td {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

    .datatable-paginering {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

.project-financien-tabel-scroll {
    overflow-x: auto;
}

.project-financien-tabel {
    width: 100%;
    border-collapse: collapse;
}

.project-financien-tabel th,
.project-financien-tabel td {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.project-financien-tabel th {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.project-financien-tabel th.tabel-cel-numeriek,
.project-financien-tabel td.tabel-cel-numeriek {
    text-align: right;
    white-space: nowrap;
}

.project-financien-tabel tbody tr:hover {
    background-color: var(--oppervlak-subtiel);
}

.project-financien-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.project-financien-status-badge--definitief {
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.project-financien-status-badge--concept {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
}

.bestand-cel-inhoud {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.bestand-cel-toelichting {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* ==========================================================================
   Werkbonnen & Buitendienst Interface
   ========================================================================== */

.werkbon-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.werkbon-status-badge--concept {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
}

.werkbon-status-badge--ingepland {
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    color: #0369a1;
}

.werkbon-status-badge--in_uitvoering,
.werkbon-status-badge--in-behandeling {
    background: #fef9c3;
    border: 1px solid #fef08a;
    color: #854d0e;
}

.werkbon-status-badge--gereedgemeld,
.werkbon-status-badge--voltooid {
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.werkbon-status-badge--goedgekeurd {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.werkbon-status-badge--geannuleerd {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* Dagscherm */
.buitendienst-dagscherm,
.buitendienst-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.buitendienst-datum-balk {
    background: var(--oppervlak);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: var(--shadow-sm);
}

.buitendienst-datum-balk-inhoud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.buitendienst-datum-nav-knop {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--oppervlak);
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
}

.buitendienst-datum-nav-knop:hover {
    background: var(--oppervlak-subtiel);
}

.buitendienst-datum-midden {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

.buitendienst-datum-titel {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
}

.buitendienst-vandaag-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #dcfce7;
    color: #166534;
    font-size: 0.75rem;
    font-weight: 600;
}

.buitendienst-vandaag-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.35rem 0.85rem;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

/* Beheerder Filter */
.buitendienst-filter-balk {
    background: var(--oppervlak);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem 1rem;
}

.buitendienst-filter-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.buitendienst-filter-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.buitendienst-filter-pillen-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.buitendienst-filter-pil {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
}

.buitendienst-filter-pil--actief {
    background: var(--primary);
    color: #ffffff;
}

.buitendienst-filter-pil--inactief {
    background: var(--oppervlak-subtiel);
    border: 1px solid var(--border);
    color: var(--text-color);
}

.buitendienst-filter-pil--inactief:hover {
    background: var(--border);
}

/* Werkbonlijst & Kaarten */
.buitendienst-werkbon-lijst {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.buitendienst-werkbon-kaart,
.buitendienst-kaart {
    background: var(--oppervlak);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.buitendienst-kaart-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.buitendienst-kaart-nummer {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--primary);
    letter-spacing: 0.02em;
}

.buitendienst-kaart-klant {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
}

.buitendienst-kaart-omschrijving {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.buitendienst-kaart-adres {
    margin: 0;
    color: var(--text-color);
    font-size: 0.95rem;
}

/* Snelle acties */
.buitendienst-snelle-acties-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.buitendienst-snelle-actie {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.55rem 0.9rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.buitendienst-snelle-actie--tel {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.buitendienst-snelle-actie--tel:hover {
    background: #dcfce7;
}

.buitendienst-snelle-actie--maps {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
}

.buitendienst-snelle-actie--maps:hover {
    background: #dbeafe;
}

/* Instructie hint */
.buitendienst-kaart-instructie-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    color: #854d0e;
}

/* Voortgang */
.buitendienst-kaart-voortgang {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.buitendienst-voortgang-kop {
    display: flex;
    justify-content: space-between;
}

.buitendienst-voortgang-label,
.buitendienst-voortgang-tekst {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.buitendienst-voortgang-spoor {
    width: 100%;
    height: 8px;
    background: var(--oppervlak-subtiel);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}

.buitendienst-voortgang-vulling {
    height: 100%;
    background: #16a34a;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.buitendienst-kaart-team {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.buitendienst-kaart-acties {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.buitendienst-knop--start,
.buitendienst-knop--start-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 8px;
    background: #15803d;
    border: 1px solid #166534;
    color: #ffffff;
    font-weight: 500;
    cursor: pointer;
}

.buitendienst-knop--start {
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.buitendienst-knop--start-compact {
    min-height: 44px;
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
}

.buitendienst-knop--start:hover,
.buitendienst-knop--start-compact:hover {
    background: #166534;
}

.buitendienst-knop--openen {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.buitendienst-knop--openen:hover {
    background: var(--primary-hover);
}

.buitendienst-kaart-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.buitendienst-kaart-link:hover {
    text-decoration: underline;
}

.buitendienst-filter-pil:focus-visible,
.buitendienst-vandaag-knop:focus-visible,
.buitendienst-datum-nav-knop:focus-visible,
.buitendienst-taak-checkbox:focus-visible,
.buitendienst-knop--start:focus-visible,
.buitendienst-knop--start-compact:focus-visible,
.buitendienst-knop--openen:focus-visible,
.buitendienst-kaart-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Lege toestand */
.buitendienst-lege-toestand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--oppervlak);
    border: 1px dashed var(--border);
    border-radius: 12px;
}

.buitendienst-lege-toestand-icoon {
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.buitendienst-lege-toestand-titel {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--text-color);
}

.buitendienst-lege-toestand-tekst {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 400px;
}

/* Detail / Uitvoeringsscherm */
.buitendienst-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.buitendienst-terug-knop {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--primary);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    min-height: 44px;
}

.buitendienst-terug-knop:hover {
    text-decoration: underline;
}

.buitendienst-kop-regel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.buitendienst-titel {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-color);
}

.buitendienst-subtitel {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin: 0;
}

.buitendienst-datum-info {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    margin: 0;
}

/* Start banner */
.buitendienst-start-banner {
    background: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: 12px;
    padding: 1.25rem;
}

.buitendienst-start-banner-inhoud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.buitendienst-start-banner-titel {
    font-size: 1.15rem;
    font-weight: 600;
    color: #166534;
    margin: 0 0 0.25rem;
}

.buitendienst-start-banner-beschrijving {
    font-size: 0.9rem;
    color: #15803d;
    margin: 0;
}

/* Instructie kaart */
.buitendienst-instructie-kaart {
    display: flex;
    gap: 0.85rem;
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

.buitendienst-instructie-icoon {
    color: #ca8a04;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.buitendienst-instructie-titel {
    font-size: 0.95rem;
    font-weight: 600;
    color: #854d0e;
    margin: 0 0 0.35rem;
}

.buitendienst-instructie-tekst {
    font-size: 0.95rem;
    color: #713f12;
    margin: 0;
    line-height: 1.4;
}

/* Klant info op detail */
.buitendienst-klant-info {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.buitendienst-klant-naam {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
}

.buitendienst-klant-adres {
    font-size: 1rem;
    margin: 0;
    color: var(--text-color);
}

.buitendienst-team-info {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
}

/* Takenlijst */
.buitendienst-taken-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.buitendienst-taken-kop-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.buitendienst-sectie-titel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color);
}

.buitendienst-taken-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.buitendienst-taak-rij {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem;
    background: var(--oppervlak);
    transition: background 0.15s ease;
}

.buitendienst-taak-rij--voltooid {
    background: var(--oppervlak-subtiel);
    border-color: var(--border);
}

.buitendienst-taak-form {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.buitendienst-taak-checkbox {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: var(--oppervlak);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.buitendienst-taak-checkbox--voltooid {
    background: #16a34a;
    border-color: #16a34a;
    color: #ffffff;
}

.buitendienst-taak-checkbox--open:hover {
    border-color: var(--primary);
}

.buitendienst-taak-inhoud {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-grow: 1;
    padding-top: 0.35rem;
}

.buitendienst-taak-omschrijving {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-color);
}

.buitendienst-taak-omschrijving--voltooid {
    text-decoration: line-through;
    color: var(--text-muted);
}

.buitendienst-taak-toelichting {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.buitendienst-taak-meta-tekst {
    font-size: 0.8rem;
    color: #16a34a;
    font-weight: 500;
}

/* Taak toevoegen */
.buitendienst-taak-toevoegen-blok {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.buitendienst-taak-toevoegen-rij {
    display: flex;
    gap: 0.5rem;
}

.buitendienst-taak-invoer {
    flex-grow: 1;
    min-height: 44px;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--oppervlak);
    color: var(--text-color);
}

.buitendienst-taak-invoer:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 107, 67, 0.15);
}

.buitendienst-knop--toevoegen {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.buitendienst-knop--toevoegen:hover {
    background: var(--primary-hover);
}

/* Urenregistratie sectie */
.buitendienst-uren-kop-rij,
.buitendienst-sectie-kop-rij {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.buitendienst-lege-status {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
    margin: 0;
    padding: 0.25rem 0;
}

.buitendienst-uren-totaal-badge,
.buitendienst-aantal-badge,
.buitendienst-totaal-badge {
    background: var(--surface-raised);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.buitendienst-uren-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.buitendienst-uur-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    gap: 0.75rem;
}

.buitendienst-uur-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.buitendienst-uur-titel-rij {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.buitendienst-uur-naam {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}

.buitendienst-uur-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.buitendienst-uur-badge--werk {
    background: #dcfce7;
    color: #15803d;
}

.kleurmodus--donker .buitendienst-uur-badge--werk {
    background: #14532d;
    color: #86efac;
}

.buitendienst-uur-badge--reistijd {
    background: #dbeafe;
    color: #1d4ed8;
}

.kleurmodus--donker .buitendienst-uur-badge--reistijd {
    background: #1e3a8a;
    color: #93c5fd;
}

.buitendienst-uur-tijdvak {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.buitendienst-uur-toelichting {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

.buitendienst-uur-acties {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.buitendienst-uur-netto {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.buitendienst-uur-verwijder-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.buitendienst-uur-verwijder-knop:hover {
    color: var(--danger-action);
    background: var(--danger-surface);
}

.buitendienst-uren-invoer-details,
.buitendienst-verbruik-invoer-details,
.buitendienst-invoer-details {
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-top: 0.25rem;
    background: var(--surface);
    overflow: hidden;
}

.buitendienst-uren-invoer-details summary,
.buitendienst-verbruik-invoer-details summary,
.buitendienst-invoer-details summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    min-height: 44px;
    background: var(--surface-raised);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.buitendienst-uren-invoer-details summary:hover,
.buitendienst-verbruik-invoer-details summary:hover,
.buitendienst-invoer-details summary:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--surface-raised));
}

.buitendienst-uren-invoer-details form,
.buitendienst-verbruik-invoer-details form,
.buitendienst-invoer-details form {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    border-top: 1px solid var(--border);
}

.buitendienst-ploeg-medewerkers-selectie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.buitendienst-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.65rem;
    min-height: 44px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
}

.buitendienst-form-rij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
}

.buitendienst-form-groep {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.buitendienst-form-groep label,
.buitendienst-invoer-veld label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}

.buitendienst-invoer-veld {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.buitendienst-invoer-veld input,
.buitendienst-invoer-veld select,
.buitendienst-invoer-veld textarea,
.buitendienst-form-groep input,
.buitendienst-form-groep select,
.buitendienst-form-groep textarea {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    background: var(--surface);
    color: var(--text);
}

.buitendienst-invoer-veld textarea,
.buitendienst-form-groep textarea {
    min-height: 80px;
    resize: vertical;
}

.buitendienst-invoer-veld input:focus,
.buitendienst-invoer-veld select:focus,
.buitendienst-invoer-veld textarea:focus,
.buitendienst-form-groep input:focus,
.buitendienst-form-groep select:focus,
.buitendienst-form-groep textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Autocomplete suggesties voor materialen en machines */
.buitendienst-autocomplete-wrapper {
    position: relative;
    width: 100%;
}

.buitendienst-autocomplete-invoer {
    width: 100%;
}

.buitendienst-suggesties-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.buitendienst-suggesties-dropdown[hidden] {
    display: none;
}

.buitendienst-suggestie-optie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.65rem 0.85rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    width: 100%;
    color: var(--text);
    transition: background 0.15s ease;
}

.buitendienst-suggestie-optie:last-child {
    border-bottom: none;
}

.buitendienst-suggestie-optie:hover,
.buitendienst-suggestie-optie:focus {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface-raised));
    outline: none;
}

.buitendienst-suggestie-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.5rem;
}

.buitendienst-suggestie-naam {
    font-weight: 500;
    font-size: 0.92rem;
    color: var(--text);
}

.buitendienst-suggestie-eenheid {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-raised);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.buitendienst-suggestie-geen-match {
    padding: 0.75rem 0.85rem;
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-muted);
}

.buitendienst-knop--uren-opslaan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.65rem 1rem;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    color: var(--primary-text);
    font-size: 0.95rem;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.buitendienst-knop--uren-opslaan:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.buitendienst-uur-verwijder-knop:focus-visible,
.buitendienst-uren-invoer-details summary:focus-visible,
.buitendienst-knop--uren-opslaan:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Werkbonnen Buitendienst: Materialen, Machines & Foto's (Fase 5)
   ========================================================================== */

/* Lijsten met geregistreerde verbruiksartikelen */
.buitendienst-materialen-lijst,
.buitendienst-machines-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.buitendienst-materiaal-item,
.buitendienst-machine-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.buitendienst-materiaal-info,
.buitendienst-machine-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.buitendienst-materiaal-info strong,
.buitendienst-machine-info strong {
    color: var(--text);
    font-size: 0.95rem;
}

.buitendienst-materiaal-badge--retour {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    background: #fef3c7;
    color: #92400e;
}

.kleurmodus--donker .buitendienst-materiaal-badge--retour {
    background: #422006;
    color: #fde047;
    border: 1px solid #854d0e;
}

.buitendienst-materiaal-toelichting {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.buitendienst-materiaal-rechts,
.buitendienst-machine-rechts {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.buitendienst-materiaal-aantal,
.buitendienst-machine-uren {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    white-space: nowrap;
}

/* Verwijderknop */
.buitendienst-knop--verwijder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 400;
    transition: all 0.15s ease;
}

.buitendienst-knop--verwijder:hover {
    color: var(--danger-action);
    background: var(--danger-surface);
}

/* Slimme chips voor materiaalkeuze (Laag 1 & Laag 2) */
.buitendienst-keuze-chips-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.buitendienst-chips-groep {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.buitendienst-chips-kop {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.buitendienst-chips-rij {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.buitendienst-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.45rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 400;
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--surface-raised);
    color: var(--text);
    cursor: pointer;
    touch-action: manipulation;
    transition: all 0.15s ease;
}

.buitendienst-chip:hover {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-raised));
    border-color: var(--primary);
}

.buitendienst-chip--favoriet {
    background: color-mix(in srgb, var(--primary) 15%, var(--surface-raised));
    border-color: var(--primary);
    color: var(--text);
}

.buitendienst-chip--favoriet:hover {
    background: color-mix(in srgb, var(--primary) 25%, var(--surface-raised));
    border-color: var(--primary-hover);
}

.buitendienst-chip--geregistreerd {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-muted);
}

/* Stepper knoppen & velden (>= 44x44px touch target) */
.buitendienst-stepper-groep {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.buitendienst-stepper-knop {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--text);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.buitendienst-stepper-knop:hover {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface-raised));
    border-color: var(--primary);
}

.buitendienst-stepper-knop:active {
    background: color-mix(in srgb, var(--primary) 20%, var(--surface-raised));
}

.buitendienst-stepper-invoer {
    width: 80px;
    min-height: 44px;
    text-align: center;
    font-weight: 600;
    font-size: 1.05rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.buitendienst-eenheid-invoer {
    flex: 1;
    min-height: 44px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.buitendienst-stepper-groep--uren .buitendienst-stepper-knop {
    width: auto;
    padding: 0 0.75rem;
    font-size: 0.95rem;
}

/* Opslaan knop */
.buitendienst-knop--verbruik-opslaan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--primary-text);
    font-size: 0.95rem;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    align-self: flex-start;
}

.buitendienst-knop--verbruik-opslaan:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Foto's & Situatie */
.buitendienst-fotos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.buitendienst-foto-kaart {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

.buitendienst-foto-link {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--surface-raised);
}

.buitendienst-foto-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.buitendienst-foto-link:hover .buitendienst-foto-img {
    transform: scale(1.04);
}

.buitendienst-foto-details {
    padding: 0.5rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.buitendienst-foto-naam {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buitendienst-foto-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.buitendienst-foto-toelichting {
    font-size: 0.8rem;
    color: var(--text);
    padding: 0 0.65rem 0.5rem;
    margin: 0;
}

.buitendienst-knop--foto-verwijder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    width: 100%;
    border: none;
    border-top: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.15s ease;
}

.buitendienst-knop--foto-verwijder:hover {
    color: var(--danger-action);
    background: var(--danger-surface);
}

.buitendienst-file-input {
    min-height: 44px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.35rem;
}

.buitendienst-knop--verbruik-opslaan:focus-visible,
.buitendienst-stepper-knop:focus-visible,
.buitendienst-chip:focus-visible,
.buitendienst-verbruik-invoer-details summary:focus-visible,
.buitendienst-knop--verwijder:focus-visible,
.buitendienst-knop--foto-verwijder:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Donkere modus verfijningen voor buitendienst */
.kleurmodus--donker .buitendienst-vandaag-badge {
    background: #14532d;
    color: #86efac;
}

.kleurmodus--donker .buitendienst-snelle-actie--tel {
    background: #064e3b;
    border-color: #047857;
    color: #6ee7b7;
}

.kleurmodus--donker .buitendienst-snelle-actie--tel:hover {
    background: #047857;
}

.kleurmodus--donker .buitendienst-snelle-actie--maps {
    background: #1e3a8a;
    border-color: #2563eb;
    color: #93c5fd;
}

.kleurmodus--donker .buitendienst-snelle-actie--maps:hover {
    background: #2563eb;
}

.kleurmodus--donker .buitendienst-kaart-instructie-hint {
    background: #3b2d07;
    border-color: #854d0e;
    color: #fef08a;
}

.kleurmodus--donker .buitendienst-start-banner {
    background: color-mix(in srgb, var(--primary) 15%, var(--surface));
    border-color: var(--primary);
}

.kleurmodus--donker .buitendienst-start-banner-titel {
    color: var(--text);
}

.kleurmodus--donker .buitendienst-start-banner-beschrijving {
    color: var(--text-muted);
}

.kleurmodus--donker .buitendienst-instructie-kaart {
    background: #3b2d07;
    border-color: #854d0e;
}

.kleurmodus--donker .buitendienst-instructie-icoon {
    color: #fde047;
}

.kleurmodus--donker .buitendienst-instructie-titel {
    color: #fef08a;
}

.kleurmodus--donker .buitendienst-instructie-tekst {
    color: #fef9c3;
}

/* ==========================================================================
   Werkbonnen Buitendienst: Meerwerksignalering & Afronding (Stap 6)
   ========================================================================== */

.buitendienst-kaart--meerwerk,
.buitendienst-kaart--afronding {
    margin-top: 0.5rem;
}

.buitendienst-meerwerk-tip {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0.25rem 0 0.5rem 0;
    line-height: 1.4;
}

.buitendienst-samenvatting-rij {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.buitendienst-samenvatting-blok {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
}

.buitendienst-samenvatting-blok strong {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.buitendienst-samenvatting-blok span {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.buitendienst-waarschuwing-tekst {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: #92400e;
    background: #fef3c7;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    margin: 0.25rem 0 0.5rem 0;
}

.buitendienst-fout-tekst {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 500;
    color: #b91c1c;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    margin: 0.25rem 0 0.5rem 0;
}

.buitendienst-knop--gereedmelden {
    background: #15803d;
    border-color: #15803d;
    color: #ffffff;
    font-weight: 400;
    font-size: 1rem;
    min-height: 48px;
    margin-top: 0.5rem;
}

.buitendienst-knop--gereedmelden:hover {
    background: #166534;
    border-color: #166534;
}

.buitendienst-knop--gereedmelden.buitendienst-knop--disabled,
.buitendienst-knop--gereedmelden:disabled {
    background: var(--border);
    border-color: var(--border);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.65;
}

.buitendienst-gereed-banner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: color-mix(in srgb, #16a34a 12%, var(--surface));
    border: 1px solid #16a34a;
    border-radius: 10px;
}

.buitendienst-gereed-inhoud {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.buitendienst-gereed-titel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.buitendienst-gereed-tekst {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.buitendienst-knop--secundair {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.65rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.buitendienst-knop--secundair:hover {
    background: var(--surface-raised);
    border-color: var(--border-hover, var(--border));
}

.buitendienst-knop--secundair:focus-visible,
.buitendienst-invoer-details summary:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (max-width: 360px) {
    .buitendienst-samenvatting-rij {
        grid-template-columns: 1fr;
    }
}

.kleurmodus--donker .buitendienst-waarschuwing-tekst {
    background: #3b2d07;
    border-color: #854d0e;
    color: #fef08a;
}

.kleurmodus--donker .buitendienst-fout-tekst {
    background: #450a0a;
    border-color: #991b1b;
    color: #fca5a5;
}

.kleurmodus--donker .buitendienst-gereed-banner {
    background: color-mix(in srgb, #22c55e 15%, var(--surface));
    border-color: #22c55e;
}

/* ==========================================================================
   Werkbon Cockpit & Kantooraccordering
   ========================================================================== */

.beheer-primary-action.beheer-action--small,
.beheer-secondary-action.beheer-action--small,
.beheer-action--small {
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.werkbon-cockpit-kpi-container {
    padding: 1.25rem 1.5rem 0 1.5rem;
}

.werkbon-cockpit-kpi-balk {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.werkbon-cockpit-kpi-blok {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
}

.werkbon-cockpit-kpi-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-weight: 500;
}

.werkbon-cockpit-kpi-waarde {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

.werkbon-cockpit-kpi-sublabel {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.werkbon-cockpit-notitie-kaart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    margin-top: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-control);
}

.werkbon-cockpit-notitie-kaart--instructie {
    border-left-color: var(--focus-ring);
}

.werkbon-cockpit-notitie-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text);
}

.werkbon-cockpit-notitie-body {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
}

.werkbon-cockpit-subkop {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--text);
}

.werkbon-cockpit-tabel-afstand {
    margin-bottom: 1.5rem;
}

.werkbon-cockpit-tabel-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.werkbon-cockpit-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    text-align: left;
}

.werkbon-cockpit-tabel th,
.werkbon-cockpit-tabel td {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--border);
}

.werkbon-cockpit-tabel th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--surface);
}

.werkbon-cockpit-tabel tr:hover td {
    background: var(--page-accent);
}

.werkbon-cockpit-leeg-bericht {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
    font-style: italic;
}

.werkbon-cockpit-foto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.werkbon-cockpit-foto-kaart {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
}

.werkbon-cockpit-foto-kop {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.werkbon-cockpit-foto-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.werkbon-cockpit-foto-info strong {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.werkbon-cockpit-foto-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.werkbon-cockpit-foto-toelichting {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text);
}

.werkbon-cockpit-foto-actie {
    margin-top: auto;
    align-self: flex-start;
}

.werkbon-cockpit-mw-kaart {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
    margin-bottom: 0.875rem;
}

.werkbon-cockpit-mw-kaart:last-child {
    margin-bottom: 0;
}

.werkbon-cockpit-mw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.werkbon-cockpit-mw-titel {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.werkbon-cockpit-mw-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.werkbon-cockpit-mw-beoordeling {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
}

.werkbon-cockpit-mw-acties {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Status badges dark mode */
.kleurmodus--donker .werkbon-status-badge--concept {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}

.kleurmodus--donker .werkbon-status-badge--ingepland {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.35);
    color: #7dd3fc;
}

.kleurmodus--donker .werkbon-status-badge--in_uitvoering,
.kleurmodus--donker .werkbon-status-badge--in-behandeling {
    background: rgba(234, 179, 8, 0.15);
    border-color: rgba(234, 179, 8, 0.35);
    color: #fde047;
}

.kleurmodus--donker .werkbon-status-badge--gereedgemeld,
.kleurmodus--donker .werkbon-status-badge--voltooid {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.35);
    color: #86efac;
}

.kleurmodus--donker .werkbon-status-badge--goedgekeurd {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}

.kleurmodus--donker .werkbon-status-badge--geannuleerd {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

/* ==========================================================================
   Order Financiën & Nacalculatie
   ========================================================================== */

.werkbon-facturatie-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-control);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.2;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.tekst-overschrijding {
    color: var(--danger-action);
    font-weight: 600;
}

.kleurmodus--donker .tekst-overschrijding {
    color: #fca5a5;
}

.order-nacalculatie-details {
    margin-top: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-control);
}

.order-nacalculatie-details-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.order-nacalculatie-details-header:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}

.order-nacalculatie-details-body {
    padding: 0 1rem 1rem 1rem;
}

.order-nacalculatie-lege-toestand-actie {
    margin-top: 1rem;
}

/* ==========================================================================
   Projectstatussen & Voortgang
   ========================================================================== */

.project-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
}

.project-status-badge--subtiel {
    padding: 0.15rem 0.5rem;
    font-size: 0.6875rem;
}

.project-status-badge--concept {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #475569;
}

.project-status-badge--voorbereiding {
    background: #ede9fe;
    border: 1px solid #ddd6fe;
    color: #6b21a8;
}

.project-status-badge--gepland {
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    color: #0369a1;
}

.project-status-badge--in_uitvoering {
    background: #dcfce7;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.project-status-badge--gepauzeerd {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
}

.project-status-badge--opgeleverd {
    background: #ccfbf1;
    border: 1px solid #99f6e4;
    color: #115e59;
}

.project-status-badge--afgesloten {
    background: #e2e8f0;
    border: 1px solid #cbd5e1;
    color: #334155;
}

.project-status-badge--geannuleerd {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

/* Dark mode badges */
.kleurmodus--donker .project-status-badge--concept {
    background: rgba(148, 163, 184, 0.15);
    border-color: rgba(148, 163, 184, 0.35);
    color: #cbd5e1;
}

.kleurmodus--donker .project-status-badge--voorbereiding {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.35);
    color: #d8b4fe;
}

.kleurmodus--donker .project-status-badge--gepland {
    background: rgba(14, 165, 233, 0.15);
    border-color: rgba(14, 165, 233, 0.35);
    color: #7dd3fc;
}

.kleurmodus--donker .project-status-badge--in_uitvoering {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.35);
    color: #86efac;
}

.kleurmodus--donker .project-status-badge--gepauzeerd {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}

.kleurmodus--donker .project-status-badge--opgeleverd {
    background: rgba(20, 184, 166, 0.15);
    border-color: rgba(20, 184, 166, 0.35);
    color: #5eead4;
}

.kleurmodus--donker .project-status-badge--afgesloten {
    background: rgba(100, 116, 139, 0.2);
    border-color: rgba(100, 116, 139, 0.4);
    color: #94a3b8;
}

.kleurmodus--donker .project-status-badge--geannuleerd {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

/* Filter bar & pills */
.project-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.25rem 0;
}

.project-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--surface, #ffffff);
    color: var(--text-muted, #64748b);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.project-filter-pill:hover {
    border-color: var(--border-hover, #cbd5e1);
    color: var(--text, #1e293b);
}

.project-filter-pill--actief {
    background: var(--primary, #059669);
    border-color: var(--primary, #059669);
    color: #ffffff !important;
    font-weight: 600;
}

.project-filter-pill__teller {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.07);
    color: inherit;
}

.project-filter-pill--actief .project-filter-pill__teller {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

.kleurmodus--donker .project-filter-pill {
    background: var(--surface, #1e293b);
    border-color: var(--border, #334155);
    color: var(--text-muted, #94a3b8);
}

.kleurmodus--donker .project-filter-pill:hover {
    border-color: var(--border-hover, #475569);
    color: var(--text, #f8fafc);
}

.kleurmodus--donker .project-filter-pill__teller {
    background: rgba(255, 255, 255, 0.1);
}

/* Stepper */
.project-stepper {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1.25rem;
}

.project-stepper__stap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    background: var(--surface-subtle, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    color: var(--text-muted, #64748b);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.project-stepper__stap--actief {
    background: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
    font-weight: 600;
}

.project-stepper__stap--voltooid {
    background: var(--surface, #ffffff);
    border-color: var(--border, #cbd5e1);
    color: var(--text, #334155);
}

.project-stepper__indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.06);
}

.project-stepper__stap--actief .project-stepper__indicator {
    background: #059669;
    color: #ffffff;
}

.project-stepper__stap--voltooid .project-stepper__indicator {
    background: #e2e8f0;
    color: #0f172a;
}

.kleurmodus--donker .project-stepper__stap {
    background: rgba(255, 255, 255, 0.03);
    border-color: #334155;
    color: #94a3b8;
}

.kleurmodus--donker .project-stepper__stap--actief {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

.kleurmodus--donker .project-stepper__stap--voltooid {
    background: rgba(255, 255, 255, 0.06);
    border-color: #475569;
    color: #cbd5e1;
}

.kleurmodus--donker .project-stepper__indicator {
    background: rgba(255, 255, 255, 0.1);
}

/* Statistics tiles */
.project-statistieken-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}

.project-stat-tegel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    background: var(--surface-subtle, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
}

.project-stat-tegel__label {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #64748b);
}

.project-stat-tegel__waarde {
    display: block;
    font-size: 0.9375rem;
    color: var(--text, #1e293b);
}

.project-stat-tegel__waarde--attentie {
    color: #d97706;
    font-weight: 600;
}

.kleurmodus--donker .project-stat-tegel {
    background: rgba(255, 255, 255, 0.03);
    border-color: #334155;
}

.kleurmodus--donker .project-stat-tegel__label {
    color: #94a3b8;
}

.kleurmodus--donker .project-stat-tegel__waarde {
    color: #f1f5f9;
}

.kleurmodus--donker .project-stat-tegel__waarde--attentie {
    color: #fbbf24;
}

/* Opleversuggestie banner */
.project-oplever-suggestie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    margin-bottom: 1.25rem;
}

.project-oplever-suggestie__content {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.project-oplever-suggestie__icoon {
    color: #059669;
}

.project-oplever-suggestie__tekst strong {
    display: block;
    color: #065f46;
}

.project-oplever-suggestie__tekst p {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    color: #047857;
}

.kleurmodus--donker .project-oplever-suggestie {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
}

.kleurmodus--donker .project-oplever-suggestie__tekst strong {
    color: #6ee7b7;
}

.kleurmodus--donker .project-oplever-suggestie__tekst p {
    color: #a7f3d0;
}

/* Attentieboxen */
.project-status-attentie-box {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin: 1rem 0;
    font-size: 0.875rem;
}

.project-status-attentie-box--gepauzeerd {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
}

.project-status-attentie-box--geannuleerd {
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.kleurmodus--donker .project-status-attentie-box--gepauzeerd {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}

.kleurmodus--donker .project-status-attentie-box--geannuleerd {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.35);
    color: #fca5a5;
}

/* Order project cel */
.order-project-cel {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Modal statuswijziging waarschuwing */
.project-status-waarschuwing-box {
    padding: 0.875rem 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    font-size: 0.875rem;
    margin-bottom: 1.25rem;
}

.project-status-waarschuwing-box ul {
    margin: 0.5rem 0 0.5rem 1.25rem;
    padding: 0;
}

.project-status-bevestiging-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-weight: 600;
    color: #78350f;
    cursor: pointer;
}

.kleurmodus--donker .project-status-waarschuwing-box {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #fcd34d;
}

.kleurmodus--donker .project-status-bevestiging-label {
    color: #fde047;
}

.project-geschiedenis-tabel-container {
    overflow-x: auto;
    margin-top: 0.75rem;
}







/* ==========================================================================
   Mobiele Buitendienstomgeving (Field Service)
   ========================================================================== */

.buitendienst-body {
    min-height: 100vh;
    background-color: var(--page-background);
    color: var(--text);
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.buitendienst-top-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.buitendienst-header-brand {
    display: flex;
    flex-direction: column;
}

.buitendienst-brand-kicker {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin: 0;
}

.buitendienst-brand-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.buitendienst-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.buitendienst-main-content {
    max-width: 640px;
    margin: 0 auto;
    padding: 1rem 1rem 5.5rem 1rem;
}

/* Bottom Navigation */
.buitendienst-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    z-index: 100;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.buitendienst-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0.5rem 0.25rem;
    color: var(--text-muted);
    text-decoration: none;
    position: relative;
    transition: color 0.15s ease;
}

.buitendienst-bottom-nav-item:hover {
    color: var(--text);
}

.buitendienst-bottom-nav-item--actief {
    color: var(--primary);
}

.buitendienst-nav-icoon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.buitendienst-nav-label {
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.1;
}

.buitendienst-bottom-nav-item--actief .buitendienst-nav-label {
    font-weight: 600;
}

.buitendienst-nav-badge {
    position: absolute;
    top: -5px;
    right: -9px;
    background: var(--danger-action, #a7352d);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9999px;
    min-width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* ==========================================================================
   Buitendienst Home & Dashboard
   ========================================================================== */

.buitendienst-dashboard {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Welkom sectie */
.buitendienst-welkom-sectie {
    padding: 0.25rem 0;
}

.buitendienst-welkom-titel {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0 0 0.35rem 0;
    line-height: 1.25;
}

.buitendienst-welkom-subtitel {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.buitendienst-welkom-scheider {
    opacity: 0.45;
}

.buitendienst-welkom-rol {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: var(--primary);
}

/* Algemene schermkoppen */
.buitendienst-scherm-kop {
    margin-bottom: 1.25rem;
}

.buitendienst-scherm-titel {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.015em;
}

.buitendienst-scherm-subtitel {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

/* Sectie blok & kop */
.buitendienst-sectie-blok {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.buitendienst-sectie-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.buitendienst-sectie-kop-titel {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    letter-spacing: -0.01em;
}

.buitendienst-sectie-kop-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

.buitendienst-sectie-kop-link:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    color: var(--primary);
    text-decoration: none;
}

.buitendienst-sectie-toelichting {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: -0.35rem 0 0.75rem 0;
}

/* Lege toestand / Afgerond Hero */
.buitendienst-hero-kaart--leeg,
.buitendienst-kaart--leeg {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.buitendienst-hero-geen-icoon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, #16a34a 15%, var(--surface));
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.kleurmodus--donker .buitendienst-hero-geen-icoon-wrapper {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.buitendienst-hero-geen-titel {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.buitendienst-hero-geen-tekst {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 320px;
}

/* Lege staat binnen lijsten */
.buitendienst-lege-staat-kaart {
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 0.875rem;
    padding: 1.25rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.buitendienst-lege-staat-tekst {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0;
}

/* Hero Kaart Actief (Home) */
.buitendienst-hero-kaart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.buitendienst-hero-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.buitendienst-hero-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
}

.kleurmodus--donker .buitendienst-hero-label {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.buitendienst-hero-nummer {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.buitendienst-hero-klant {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
}

.buitendienst-hero-adres {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 0.625rem 0;
}

.buitendienst-hero-omschrijving {
    font-size: 0.925rem;
    color: var(--text);
    line-height: 1.4;
    margin: 0 0 0.75rem 0;
}

.buitendienst-hero-instructie {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border-left: 3px solid var(--primary);
    border-radius: 0.375rem;
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.875rem;
}

.buitendienst-hero-instructie-tekst {
    font-size: 0.825rem;
    color: var(--text);
    margin: 0;
    line-height: 1.4;
}

.buitendienst-hero-acties {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.buitendienst-knop--start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(23, 107, 67, 0.25);
    transition: background-color 0.15s ease;
}

.buitendienst-knop--start:hover {
    background: var(--primary-hover);
    color: #ffffff;
    text-decoration: none;
}

.buitendienst-hero-secundaire-acties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.buitendienst-knop--navigatie,
.buitendienst-knop--telefoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 42px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.625rem;
    transition: background-color 0.15s ease;
}

.buitendienst-knop--navigatie:hover,
.buitendienst-knop--telefoon:hover {
    background: var(--page-accent);
    color: var(--text);
    text-decoration: none;
}

/* Dagoverzicht / Planning op Home */
.buitendienst-daglijst,
.buitendienst-dag-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.buitendienst-dagitem-kaart,
.buitendienst-dag-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    text-decoration: none;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.buitendienst-dagitem-kaart:hover,
.buitendienst-dag-rij:hover {
    border-color: var(--primary);
    background: var(--surface-raised);
    text-decoration: none;
    color: var(--text);
}

.buitendienst-dagitem-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}

.buitendienst-dagitem-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.buitendienst-dagitem-titel {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buitendienst-dagitem-sub {
    font-size: 0.825rem;
    color: var(--text-muted);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buitendienst-dagitem-pijl {
    color: var(--text-muted);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, color 0.15s ease;
}

.buitendienst-dagitem-kaart:hover .buitendienst-dagitem-pijl {
    color: var(--primary);
    transform: translateX(2px);
}

/* Takenlijst op Home */
.buitendienst-takenlijst {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.buitendienst-taakitem-kaart {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    text-decoration: none;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.buitendienst-taakitem-kaart:hover {
    border-color: var(--primary);
    background: var(--surface-raised);
    text-decoration: none;
    color: var(--text);
}

.buitendienst-taakitem-icoon {
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kleurmodus--donker .buitendienst-taakitem-icoon {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

.buitendienst-taakitem-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.buitendienst-taakitem-titel {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buitendienst-taakitem-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.buitendienst-taakitem-deadline {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Planning Scherm */
.buitendienst-datum-balk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.buitendienst-datum-nav-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    color: var(--text);
    text-decoration: none;
    border: 1px solid var(--border);
    background: var(--surface-raised);
}

.buitendienst-datum-nav-knop:hover {
    background: var(--page-accent);
}

.buitendienst-datum-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}

.buitendienst-weergave-toggle {
    display: flex;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    padding: 3px;
    gap: 3px;
    margin-bottom: 1.25rem;
}

.buitendienst-toggle-knop {
    flex: 1;
    text-align: center;
    padding: 0.45rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.15s ease;
}

.buitendienst-toggle-knop--actief {
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.buitendienst-planning-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.buitendienst-planning-kaart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: border-color 0.15s ease;
}

.buitendienst-planning-kaart:hover {
    border-color: var(--primary);
}

.buitendienst-planning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.buitendienst-planning-tijd-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
}

.buitendienst-planning-titel {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.35rem 0;
}

.buitendienst-planning-locatie,
.buitendienst-planning-collegas {
    font-size: 0.825rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.2rem 0 0 0;
}

.buitendienst-planning-acties {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.buitendienst-knop--mini {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
    padding: 0.35rem 0.65rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

/* Projecten Scherm */
.buitendienst-projecten-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.buitendienst-project-kaart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    padding: 1rem;
    text-decoration: none;
    color: inherit;
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: border-color 0.15s ease;
}

.buitendienst-project-kaart:hover {
    border-color: var(--primary);
}

.buitendienst-project-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.buitendienst-project-titel {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.buitendienst-project-klant {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0 0 0.35rem 0;
}

.buitendienst-project-adres {
    font-size: 0.825rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.buitendienst-project-meta {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--border);
}

/* Project Detail Scherm */
.buitendienst-terug-nav {
    margin-bottom: 0.75rem;
}

.buitendienst-terug-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
}

.buitendienst-project-detail-header-kaart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.buitendienst-project-detail-kop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.buitendienst-project-detail-titel {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.buitendienst-project-detail-klant {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-muted);
    margin: 0 0 0.5rem 0;
}

.buitendienst-project-detail-omschrijving {
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.4;
    margin: 0.75rem 0 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.buitendienst-project-detail-acties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 1rem;
}

.buitendienst-deelproject-kaart {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
}

.buitendienst-deelproject-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.buitendienst-deelproject-titel {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.buitendienst-deelproject-omschrijving {
    font-size: 0.825rem;
    color: var(--text-muted);
    margin: 0;
}

.buitendienst-document-lijst,
.buitendienst-werkbonnen-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.buitendienst-document-rij,
.buitendienst-werkbon-rij {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.625rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease;
}

.buitendienst-document-rij:hover,
.buitendienst-werkbon-rij:hover {
    border-color: var(--primary);
}

.buitendienst-document-info,
.buitendienst-werkbon-info {
    display: flex;
    flex-direction: column;
}

.buitendienst-document-naam,
.buitendienst-werkbon-code {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.buitendienst-document-meta,
.buitendienst-werkbon-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Taken Scherm */
.buitendienst-taken-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.buitendienst-taak-kaart {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    padding: 0.875rem 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.buitendienst-taak-kaart--afgerond {
    opacity: 0.65;
    background: var(--surface-raised);
}

.buitendienst-taak-checkbox-form {
    flex-shrink: 0;
    margin-top: 2px;
}

.buitendienst-taak-toggle-knop {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    border: 1.5px solid var(--border);
    background: var(--surface-raised);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    padding: 0;
    transition: all 0.15s ease;
}

.buitendienst-taak-toggle--voltooid {
    background: color-mix(in srgb, var(--primary) 15%, var(--surface));
    border-color: var(--primary);
    color: var(--primary);
}

.buitendienst-taak-inhoud {
    flex: 1;
    min-width: 0;
}

.buitendienst-taak-titel {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.25rem 0;
    word-break: break-word;
}

.buitendienst-taak-titel--doorgestreept {
    text-decoration: line-through;
    color: var(--text-muted);
}

.buitendienst-taak-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.buitendienst-taak-toelichting {
    font-size: 0.825rem;
    color: var(--text-muted);
    margin: 0.35rem 0 0 0;
}

.buitendienst-prioriteit-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.buitendienst-prioriteit--hoog {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

.buitendienst-prioriteit--normaal {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.buitendienst-prioriteit--laag {
    background: rgba(107, 114, 128, 0.1);
    color: #4b5563;
}

.buitendienst-afgerond-details {
    margin-top: 1.5rem;
}

.buitendienst-afgerond-summary {
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

/* Profiel Scherm */
.buitendienst-profiel-kaart {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.25rem;
}

.buitendienst-profiel-avatar {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    flex-shrink: 0;
}

.buitendienst-profiel-info {
    display: flex;
    flex-direction: column;
}

.buitendienst-profiel-naam {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.15rem 0;
}

.buitendienst-profiel-bedrijf {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 0.35rem 0;
}

.buitendienst-rol-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    width: fit-content;
}

.buitendienst-rol-opties {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.buitendienst-rol-keuze-knop {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--border);
    background: var(--surface);
    border-radius: 0.75rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s ease;
}

.buitendienst-rol-keuze-knop--actief {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}

.buitendienst-rol-keuze-tekst {
    display: flex;
    flex-direction: column;
}

.buitendienst-rol-keuze-titel {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.15rem;
}

.buitendienst-rol-keuze-beschrijving {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.buitendienst-acties-lijst {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.buitendienst-actie-link,
.buitendienst-actie-knop-rij {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    text-decoration: none;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.buitendienst-actie-link:hover,
.buitendienst-actie-knop-rij:hover {
    background: var(--page-accent);
}

.buitendienst-actie-knop-rij--gevaar {
    color: var(--danger-action, #a7352d);
}

.buitendienst-actie-link-tekst {
    display: flex;
    flex-direction: column;
}

.buitendienst-actie-link-titel {
    font-size: 0.9rem;
    font-weight: 600;
}

.buitendienst-actie-link-subtitel {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.buitendienst-app-info-tekst {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 1.5rem 0 0 0;
}