/*
   AdminSys.Web – algemene opmaak: app-indeling en onderdelen van de webapp. De huisstijl (ontwerptokens, basis, kaarten, labels,
   knoppen, formulieren, meldingen) staat in huisstijl.css van AdminSys.Web.Gedeeld, die de testtool ook gebruikt; die laadt eerst.
   Opmaak die bij één component hoort, staat in dat component (Component.razor.css, CSS-isolatie).
   Zijbalk en kopbalk staan hier omdat ze op Syncfusion-elementen (SfSidebar) werken, die CSS-isolatie niet bereikt.
*/

/* ===== App-indeling: de kopbalk blijft staan, alleen de inhoud scrolt ===== */
/* Nooit een horizontale scroll van de pagina zelf (bv. door de dichte lade links buiten beeld) */
.app {
    min-height: 100vh;
    overflow-x: clip;
}

/* Met viewport-fit=cover (App.razor): kop en inhoud blijven buiten de notch, de thuisbalk en de adresbalk (op een gewoon scherm 0) */
.app-hoofd {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    min-width: 0;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    box-sizing: border-box;
}

/* Volle breedte (op mobiel onderaan extra ruimte voor de zwevende plusknop, zie Smalle schermen); min-width 0, zodat
   brede inhoud (een grid) binnen zijn kaart scrolt en de pagina zelf nooit horizontaal */
.app-inhoud {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 24px 32px 40px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Overzichten vullen het scherm: paginakop, filters, zoekbalk, kolomkoppen en paginering blijven staan, alleen de regels scrollen */
.app-inhoud:has(> .overzicht) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 24px;
}

    .app-inhoud:has(> .overzicht) > .pagina-kop {
        flex-shrink: 0;
    }

.kaart.overzicht {
    flex: 1 1 0;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .kaart.overzicht > .gridlijst > .e-grid {
        flex: 1 1 0;
        min-height: 0;
    }

/* Op een telefoon, zodra er regels aangevinkt zijn: "n geselecteerd" en Acties (het rechtsklikmenu) boven de lijst; ⋯ aan het eind
   van een regel opent hetzelfde menu voor die regel (zie GridLijst) */
.selectiebalk {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px 6px 12px;
    border-bottom: 1px solid var(--rand);
    border-radius: var(--straal) var(--straal) 0 0;
    background: var(--primair-zacht);
    color: var(--primair);
    font-size: .875rem;
    font-weight: 600;
}

.selectiebalk-knop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px 0 8px;
    border: 0;
    border-radius: 16px;
    background: var(--primair);
    color: var(--op-kleur);
    font: inherit;
    cursor: pointer;
}

.icoonknop.regelacties {
    width: 32px;
    height: 32px;
}

/* ===== Lijst als kaartjes (telefoon) =====
   GridLijst zet op een smal scherm "kaartweergave" om de grid: elke regel een kaartje, zoals de Portal (responsive-cards). Links het
   vinkje, rechts ⋯; regel 1 de titel (vet) met rechts de status, regel 2 het secundaire gegeven (grijs), regel 3 de datum(s) (grijs) met
   rechts het bedrag (vet). Welke kolom wat is, staat bij de kolom (Kaartveld); zonder gemarkeerde kolommen komen alle kolommen als
   "kop: waarde" op het kaartje (de labels zet kaartweergave.js). Zoeken, bladeren, selectie, tikken om te openen en totalen blijven;
   de kolomkoppen (sorteren, kolomfilters) niet. */

/* Het element om de grid (GridLijst) doet niet mee in de opmaak: de grid vult zijn plek zoals zonder */
.gridlijst {
    display: contents;
}

.kaartweergave .e-grid .e-gridheader {
    display: none;
}

.kaartweergave .e-grid .e-content table.e-table,
.kaartweergave .e-grid .e-content tbody {
    display: block;
    width: 100% !important;
}

.kaartweergave .e-grid .e-content colgroup {
    display: none;
}

.kaartweergave .e-grid .e-content tbody {
    padding: 8px;
    box-sizing: border-box;
}

.kaartweergave .e-grid .e-content tr.e-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 8px;
    height: auto !important;
    margin-bottom: 8px;
    padding: 10px 8px 10px 4px;
    border: 1px solid var(--rand);
    border-radius: 12px;
    background: var(--oppervlak);
}

    /* Met RowHeight zet Syncfusion line-height: 0 op de cellen (e-grid-min-height; de rij bepaalt dan de hoogte): op een kaartje
       weer een gewone regelhoogte, anders worden de regels platgedrukt */
    .kaartweergave .e-grid .e-content tr.e-row > td {
        height: auto !important;
        line-height: 1.4 !important;
        margin: 0;
        padding: 2px 0 !important;
        border: 0 !important;
        background: transparent !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

        /* Titel, subregel en datum elk op één regel; te lang loopt af met … */
        .kaartweergave .e-grid .e-content tr.e-row > td:is(.kaartveld-titel, .kaartveld-sub, .kaartveld-datum) {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 0;
        }

        /* Verborgen kolommen blijven verborgen; met gemarkeerde kolommen alleen die (en het vinkje en ⋯) */
        .kaartweergave .e-grid .e-content tr.e-row > td.e-hide,
        .kaartweergave .e-grid .e-content tr.e-row:has(.kaartveld) > td:not(.kaartveld, .kaartveld-vast) {
            display: none !important;
        }

        .kaartweergave .e-grid .e-content tr.e-row > td.kaartveld-vink {
            grid-column: 1;
            grid-row: 1 / -1;
        }

        .kaartweergave .e-grid .e-content tr.e-row > td.kaartveld-acties {
            grid-column: 4;
            grid-row: 1 / -1;
        }

        .kaartweergave .e-grid .e-content tr.e-row > td.kaartveld-titel {
            grid-column: 2;
            grid-row: 1;
            font-size: 1rem;
            font-weight: 700;
            text-align: left !important;
        }

        .kaartweergave .e-grid .e-content tr.e-row > td.kaartveld-status {
            grid-column: 3;
            grid-row: 1;
            text-align: right !important;
        }

        /* Regel 2 en 3 vullen zich vanzelf onder de titel: het secundaire gegeven over de breedte, dan datum links en bedrag rechts */
        .kaartweergave .e-grid .e-content tr.e-row > td:is(.kaartveld-sub, .kaartveld-datum) {
            color: var(--tekst-zacht);
            font-size: .85rem;
            text-align: left !important;
        }

        .kaartweergave .e-grid .e-content tr.e-row > td.kaartveld-sub {
            grid-column: 2 / 4;
            order: 1;
        }

            /* Direct onder de titel, vóór de andere secundaire gegevens (Kaartveld.Ondertitel) */
            .kaartweergave .e-grid .e-content tr.e-row > td.kaartveld-sub.kaartveld-ondertitel {
                order: 0;
            }

        /* Een leeg gemarkeerd veld geeft geen lege regel */
        .kaartweergave .e-grid .e-content tr.e-row > td.kaartveld:empty {
            display: none !important;
        }

        .kaartweergave .e-grid .e-content tr.e-row > td.kaartveld-datum {
            grid-column: 2;
            order: 2;
        }

        .kaartweergave .e-grid .e-content tr.e-row > td.kaartveld-bedrag {
            grid-column: 3;
            order: 3;
            font-weight: 700;
            text-align: right !important;
            white-space: nowrap;
        }

        /* Zonder gemarkeerde kolommen: alles als "kop: waarde" onder elkaar */
        .kaartweergave .e-grid .e-content tr.e-row:not(:has(.kaartveld)) > td:not(.kaartveld-vast) {
            display: flex;
            grid-column: 2 / 4;
            justify-content: space-between;
            gap: 12px;
            text-align: right !important;
        }

            .kaartweergave .e-grid .e-content tr.e-row:not(:has(.kaartveld)) > td:not(.kaartveld-vast)::before {
                content: attr(data-label);
                flex: 0 0 40%;
                text-align: left;
                font-size: .75rem;
                font-weight: 600;
                color: var(--tekst-zacht);
            }

/* ⋯ op een kaartje (KaartLijst) rechtsboven, en in de kop van een tijdlijnbericht achter de datum */
.kaartlijst-item {
    position: relative;
}

.kaartlijst-meer {
    position: absolute;
    top: 8px;
    right: 8px;
}

    .kaartlijst-meer:empty {
        display: none;
    }

.tijdlijn-kop:has(.regelacties) {
    align-items: center;
}

    .tijdlijn-kop:has(.regelacties) time {
        margin-left: auto;
    }

    .tijdlijn-kop .regelacties {
        margin: -6px -8px -6px -8px;
    }

/* Het rechtsklikmenu op een telefoon (Actieblad): een blad van onderen over de volle breedte, met grote regels en een donkere
   achtergrond; boven de pagina, de kop en de lade, net als een dialoog */
.actieblad-achtergrond {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgb(0 0 0 / .45);
}

.actieblad {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1091;
    display: flex;
    flex-direction: column;
    max-height: 85dvh;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 16px 16px 0 0;
    background: var(--oppervlak);
    box-shadow: var(--schaduw-zwevend);
    animation: actieblad-in .18s ease-out;
}

@keyframes actieblad-in {
    from {
        transform: translateY(100%);
    }
}

.actieblad-kop {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 8px 8px 8px 16px;
    border-bottom: 1px solid var(--rand);
}

.actieblad-titel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.actieblad-lijst {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 0 8px;
}

.actieblad-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--tekst);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .actieblad-item:active:not(:disabled) {
        background: var(--oppervlak-2);
    }

    .actieblad-item:disabled {
        opacity: .4;
        cursor: default;
    }

.actieblad-icoon {
    width: 20px;
    color: var(--primair);
    font-size: 18px;
    text-align: center;
}

.actieblad-tekst {
    flex: 1;
}

.actieblad-scheiding {
    margin: 4px 16px;
    border: 0;
    border-top: 1px solid var(--rand);
}


/* Detailpagina (DetailPagina): de kopkaart blijft staan, de kolommen scrollen apart; op een smal scherm scrolt de pagina */
.app-inhoud:has(> .detail) {
    overflow: hidden;
    padding-bottom: 16px;
}

@media (max-width: 1000px) {
    .app-inhoud:has(> .detail) {
        overflow-y: auto;
        padding-bottom: 16px;
    }
}

/* ===== Zijbalk (SfSidebar) ===== */
.zijbalk.e-sidebar {
    background: var(--zijbalk);
    color: var(--zijbalk-tekst);
    border-right: none;
    overflow: hidden !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, .12);
}

/* Menu zonder animatie: in- en uitklappen en vastzetten gebeuren direct */
.zijbalk.e-sidebar,
.e-main-content {
    transition: none !important;
}

.zijbalk-inhoud {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--zijbalk);
}

.zijbalk-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 64px;
    padding: 0 10px 0 14px;
    flex-shrink: 0;
}

.merk {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--op-kleur);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    min-width: 0;
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.menu-kop {
    height: 32px;
    display: flex;
    align-items: flex-end;
    padding: 0 10px 6px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zijbalk-tekst-zacht);
    white-space: nowrap;
}

.menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--zijbalk-tekst);
    font: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, color .12s;
}

    .menu-item .icoon {
        width: 20px;
        height: 20px;
    }

    .menu-item:hover {
        background: var(--zijbalk-hover);
        color: var(--op-kleur);
    }

    .menu-item.active {
        background: var(--zijbalk-actief);
        color: var(--op-kleur);
        font-weight: 600;
    }

        .menu-item.active::before {
            content: "";
            position: absolute;
            left: -12px;
            top: 8px;
            bottom: 8px;
            width: 3px;
            border-radius: 0 3px 3px 0;
            background: var(--pk-blauw);
        }

.zijbalk-pin {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--zijbalk-tekst-zacht);
    cursor: pointer;
    flex-shrink: 0;
}

    .zijbalk-pin:hover {
        background: var(--zijbalk-hover);
        color: var(--op-kleur);
    }

    .zijbalk-pin .icoon {
        transform: rotate(45deg);
        transition: transform .15s;
    }

    .zijbalk-pin.actief {
        color: var(--pk-groen);
    }

        .zijbalk-pin.actief .icoon {
            transform: none;
        }

.zijbalk-footer {
    flex-shrink: 0;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .12);
    font-size: .7rem;
    color: var(--zijbalk-tekst-zacht);
    text-align: center;
    white-space: nowrap;
}

.zijbalk-footer-kort {
    display: none;
}

/* Losgemaakt en dicht: iconenbalk van 64px, alles gecentreerd, zonder tekst */
.zijbalk-inhoud.dicht .zijbalk-footer-kort {
    display: inline;
}

.zijbalk-inhoud.dicht .menu-tekst {
    display: none;
}

.zijbalk-inhoud.dicht .zijbalk-kop {
    justify-content: center;
    padding: 0;
}

.zijbalk-inhoud.dicht .merk {
    gap: 0;
}

.zijbalk-inhoud.dicht .menu {
    align-items: center;
    padding-left: 0;
    padding-right: 0;
    gap: 4px;
}

.zijbalk-inhoud.dicht .menu-item {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    border-radius: 10px;
}

    .zijbalk-inhoud.dicht .menu-item.active::before {
        left: -10px;
    }

/* Menugroepen (modules): breed in- en uitklappen; in de smalle iconenbalk één icoon met een uitklaplijst (zie Menugroep.razor) */
.menu-groep {
    position: relative;
}

.menu-groep-icoon {
    display: none;
}

.menu-groep-kop {
    width: 100%;
    justify-content: space-between;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

    .menu-groep-kop:hover {
        color: var(--zijbalk-tekst);
    }

.menu-groep-pijl {
    font-size: .75rem;
    transition: transform .15s ease;
}

.menu-groep.ingeklapt .menu-groep-pijl {
    transform: rotate(-90deg);
}

.zijbalk-inhoud.open .menu-groep.ingeklapt .menu-groep-items {
    display: none;
}

/* Smalle iconenbalk: één icoon per module; de schermen staan in de uitklaplijst (.menu-uitklaplijst) */
.zijbalk-inhoud.dicht .menu-groep-kop {
    position: relative;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    color: var(--zijbalk-tekst);
    transition: background .12s, color .12s;
}

.zijbalk-inhoud.dicht .menu-groep-icoon {
    display: block;
    width: 20px;
    height: 20px;
}

.zijbalk-inhoud.dicht .menu-groep-kop:hover {
    background: var(--zijbalk-hover);
    color: var(--op-kleur);
}

/* De module van de huidige pagina: gemarkeerd zoals een actief scherm */
.zijbalk-inhoud.dicht .menu-groep:has(.menu-item.active) > .menu-groep-kop {
    background: var(--zijbalk-actief);
    color: var(--op-kleur);
}

    .zijbalk-inhoud.dicht .menu-groep:has(.menu-item.active) > .menu-groep-kop::before {
        content: "";
        position: absolute;
        left: -10px;
        top: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: var(--pk-blauw);
    }

.zijbalk-inhoud.dicht .menu-groep-items {
    display: none;
}

/* De uitklaplijst van een module in de iconenbalk (MainLayout): naast het aangeklikte icoon, buiten de zijbalk, boven de pagina
   maar onder de assistent, de lade en dialogen */
.menu-uitklaplijst {
    position: fixed;
    left: 74px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding: 6px;
    border-radius: var(--straal);
    background: var(--zijbalk);
    box-shadow: var(--schaduw-zwevend);
}

.menu-uitklaplijst-kop {
    padding: 6px 10px 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--zijbalk-tekst-zacht);
    white-space: nowrap;
}

.menu-uitklaplijst .menu-item {
    height: 38px;
    padding: 0 10px;
    gap: 12px;
    border-radius: 8px;
    white-space: nowrap;
}

    .menu-uitklaplijst .menu-item.active::before {
        display: none;
    }
/* ===== Kopbalk ===== */
.kop {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 60px;
    padding: 0 24px 0 16px;
    background: color-mix(in srgb, var(--oppervlak) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rand);
}

.kop-knop {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--tekst-zacht);
    cursor: pointer;
}

    .kop-knop:hover {
        background: var(--oppervlak-2);
        color: var(--tekst);
    }

.kop-assistent {
    color: var(--primair);
}

.kop-omgeving {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--pk-signaal);
    color: var(--op-kleur);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .08em;
}

.kop-rechts {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

/* Lopende urentimers in de kop (op elke pagina zichtbaar); het paneel is een kopmenu */
.urentimer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: var(--primair-zacht);
    color: var(--primair);
    font: inherit;
    font-size: .875rem;
    white-space: nowrap;
    cursor: pointer;
}

.kopmenu-paneel.urentimers {
    width: 360px;
}

/* Mobiel: in de kop alleen het klokje en de uren (van–tot staat in het paneel); het paneel over de volle breedte onder de kop,
   anders valt het naast de knop buiten beeld. De kop heeft een backdrop-filter: fixed is dan ten opzichte van de kop. */
@media (max-width: 760px) {
    .urentimer {
        gap: 6px;
        padding: 6px 10px;
    }

    .urentimer .urentimer-van-tot {
        display: none;
    }

    .kopmenu-paneel.urentimers {
        position: fixed;
        top: 64px;
        left: 8px;
        right: 8px;
        width: auto;
        max-height: calc(100dvh - 80px);
        overflow-y: auto;
    }
}

.urentimer-beschrijving {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tekst-zacht);
    font-size: .8rem;
}

.urentimer-leeg {
    margin: 0;
    padding: 8px;
}

.urentimer-regel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid var(--rand);
}

.urentimer-gegevens {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.urentimer-tijd {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.urentimer-actie {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--tekst);
}

.urentimer-stop {
    border: none;
    border-radius: 999px;
    padding: 4px 12px;
    background: var(--primair);
    color: var(--op-kleur);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.urentimer-stop:hover {
    background: var(--primair-hover);
}


.kop-gebruiker {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--tekst);
    font: inherit;
    cursor: pointer;
}

    .kop-gebruiker:hover {
        background: var(--oppervlak-2);
        border-color: var(--rand);
    }

.kop-gebruiker-tekst {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: left;
}

.kop-gebruiker-naam {
    font-weight: 600;
}

.kop-gebruiker-administratie {
    font-size: .78rem;
    color: var(--tekst-zacht);
}

.avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pk-donkerblauw), var(--pk-blauw));
    color: var(--op-kleur);
    font-weight: 700;
    font-size: .8rem;
}

.kopmenu {
    position: relative;
}

.kopmenu-paneel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 21;
    width: 280px;
    padding: 8px;
    border: 1px solid var(--rand);
    border-radius: var(--straal);
    background: var(--oppervlak);
    box-shadow: var(--schaduw-zwevend);
}

    .kopmenu-paneel form {
        margin: 0;
    }

.kopmenu-kop {
    padding: 6px 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tekst-zacht);
}

.administratie-keuze {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--rand);
}

.keuze-vink {
    display: inline-block;
    width: 16px;
    color: var(--pk-groen);
    font-weight: 700;
}

/* Rechten per onderdeel (module, Beheer, Delen): Lezen, Schrijven, Verwijderen; op de gebruikerskaart en in Mijn account */
.machtigingen {
    width: 100%;
    max-width: 640px;
    border-collapse: collapse;
}

    .machtigingen th,
    .machtigingen td {
        padding: 8px 12px;
        border-bottom: 1px solid var(--rand);
        text-align: center;
    }

    .machtigingen thead th {
        font-size: .8rem;
        font-weight: 600;
        color: var(--tekst-zacht);
    }

    .machtigingen th[scope=row],
    .machtigingen thead th:first-child {
        text-align: left;
    }

    .machtigingen th[scope=row] {
        font-weight: 600;
    }

/* Themakeuze (de knoppen staan in huisstijl.css): in het gebruikersmenu met een lijn eronder */
.kopmenu .thema-keuze {
    padding: 2px 4px 8px;
    border-bottom: 1px solid var(--rand);
    margin-bottom: 6px;
}

.kopmenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--tekst);
    font: inherit;
    cursor: pointer;
}

    .kopmenu-item:hover {
        background: var(--oppervlak-2);
    }

    .kopmenu-item.actief {
        font-weight: 600;
        color: var(--primair);
    }

/* Vanaf een liggende tablet klapt het logo het menu in en uit; de menuknop in de kopbalk is dan overbodig */
@media (min-width: 1024px) {
    .kop-menuknop {
        display: none;
    }
}

/* ===== Menu als lade (telefoon, tablet staand; zelfde grens als LadeQuery in MainLayout) =====
   Geen iconenbalk en geen vastzetten: de hamburger opent het menu over de pagina, met een donkere achtergrond erachter. */
.zijbalk-achtergrond {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: rgb(0 0 0 / .45);
}

@media (max-width: 1023.98px) {
    /* De inhoud nooit opzij geschoven; het menu van vóór de lade (eerste weergave, nog zonder schermbreedte) niet tonen */
    .e-main-content {
        margin-left: 0 !important;
    }

    .zijbalk.e-sidebar:not(.lade) {
        visibility: hidden;
    }

    .zijbalk.e-sidebar.lade {
        z-index: 1000;
        max-width: 85vw;
        padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left);
        box-sizing: border-box;
    }

    .zijbalk-pin {
        display: none;
    }
}

/* ===== Pagina's ===== */
.pagina-kop {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.pagina-titelregel {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

    .pagina-titelregel h1 {
        margin: 0;
        font-size: 1.6rem;
        font-weight: 700;
    }

.pagina-icoon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--primair-zacht);
    color: var(--primair);
}

.pagina-ondertitel {
    margin: 6px 0 0;
    color: var(--tekst-zacht);
}

/* Knoppen en filters rechts in de paginakop: bij weinig ruimte naar een volgende regel (rechts uitgelijnd),
   nooit over elkaar heen of ingedrukt */
.pagina-acties {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

    .pagina-acties > * {
        flex-shrink: 0;
    }

/* De knop om de filters in te klappen is er alleen op mobiel (zie Smalle schermen) */
.lijstknop.filterknop {
    display: none;
}

/* Filters van een overzicht: een eigen regel onder titel en knoppen */
.pagina-filters {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sectie-titel {
    margin: 28px 0 12px;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ===== Grids (Syncfusion) in een kaart ===== */
.kaart .e-grid {
    border: none;
    border-radius: var(--straal);
}

    .kaart .e-grid .e-toolbar {
        border-radius: var(--straal) var(--straal) 0 0;
        border-bottom: 1px solid var(--rand);
        padding: 6px 8px;
    }

    /* Kolomkoppen semibold, de regels normaal (ook geselecteerd: een selectie verandert alleen de achtergrond). Het thema zet het
       gewicht op de tekst in de kop (.e-headercelldiv, 400), dus daar */
    .kaart .e-grid .e-headercell .e-headercelldiv {
        font-weight: 600;
    }

    .kaart .e-grid .e-rowcell {
        font-weight: 400;
    }

    .kaart .e-grid .e-row,
    /* Een lijst die iets opent: de hele regel is klikbaar (zie GridLijst en js/rijklik.js) */
    .gridlijst.klikbaar .e-grid .e-row {
        cursor: pointer;
    }

    .kaart .e-grid .e-gridpager {
        border-radius: 0 0 var(--straal) var(--straal);
    }

    /* Even en oneven regels om en om een andere kleur; hover en selectie (op de cellen) gaan voor */
    .kaart .e-grid .e-altrow,
    .kaart .e-grid .e-altrow > .e-rowcell:not(.e-active) {
        background-color: var(--rij-om-en-om);
    }

/* ===== Kaartjes (adressen, contactpersonen) ===== */
.kaartlijst {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.kaartlijst-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    min-height: 120px;
    transition: border-color .12s, box-shadow .12s;
}

    .kaartlijst-item.klikbaar {
        cursor: pointer;
    }

        .kaartlijst-item.klikbaar:hover,
        .kaartlijst-item.klikbaar:focus-visible {
            border-color: var(--primair);
            box-shadow: var(--schaduw-hover);
            outline: none;
        }

.kaartje-kop {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .kaartje-kop .lijst-sub {
        display: block;
    }

.kaartje-icoon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--primair-zacht);
    color: var(--primair);
    flex-shrink: 0;
}

.kaartje-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.kaartje-titel {
    display: block;
    font-weight: 600;
}

.kaartje-regels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-wrap: anywhere;
}

.kaartje-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.kaartje-voet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    gap: 8px;
}

/* ===== Tijdlijn (notities, actieconversatie): verticale lijn met bolletjes, per maand gegroepeerd ===== */
.tijdlijn-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.tijdlijn {
    position: relative;
    padding-left: 28px;
}

    /* De verticale lijn */
    .tijdlijn::before {
        content: "";
        position: absolute;
        left: 7px;
        top: 8px;
        bottom: 8px;
        width: 2px;
        background: var(--rand);
    }

.tijdlijn-maand {
    position: relative;
    margin: 20px 0 10px -28px;
    padding-left: 28px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tekst-zacht);
}

    .tijdlijn-maand:first-child {
        margin-top: 0;
    }

.tijdlijn-item {
    position: relative;
    margin-bottom: 12px;
}

.tijdlijn-punt {
    position: absolute;
    left: -26px;
    top: 18px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--oppervlak);
    border: 2px solid var(--primair);
    box-sizing: border-box;
}

.tijdlijn-kaart {
    padding: 14px 18px;
}

    .tijdlijn-kaart.klikbaar {
        cursor: pointer;
    }

        .tijdlijn-kaart.klikbaar:hover {
            border-color: var(--primair);
        }

    .tijdlijn-kaart .kaartje-labels {
        margin-top: 10px;
    }

.tijdlijn-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

    .tijdlijn-kop time {
        flex-shrink: 0;
    }

/* De inhoud is opgemaakte HTML (uit markdown), dus voor de elementen daarin */
.tijdlijn-inhoud {
    margin-top: 6px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

    .tijdlijn-inhoud > :first-child {
        margin-top: 0;
    }

    .tijdlijn-inhoud > :last-child {
        margin-bottom: 0;
    }

    .tijdlijn-inhoud.ingeklapt {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

/* Bijlagen als knopjes; klikken downloadt */
.tijdlijn-bijlagen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.bijlage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--rand);
    border-radius: 999px;
    background: var(--oppervlak-2);
    color: var(--tekst);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

    .bijlage:hover {
        border-color: var(--primair);
        color: var(--primair);
    }

/* Een kleine tabel met bedragen in een formulier (bv. op welke facturen een betaling is afgeletterd) */
.bedragtabel {
    width: 100%;
    border-collapse: collapse;
}

    .bedragtabel td {
        padding: 6px 8px 6px 0;
        border-bottom: 1px solid var(--rand);
    }

    .bedragtabel .bedrag {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

/* Factureren: links de instellingen, rechts het voorbeeld (pdf); op een smal scherm onder elkaar */
.factureren-indeling {
    display: grid;
    grid-template-columns: minmax(320px, 420px) 1fr;
    gap: 20px;
    height: 100%;
    min-height: 0;
}

.factureren-instellingen {
    overflow-y: auto;
    min-height: 0;
    padding-right: 4px;
}

.factureren-voorbeeld {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

    .factureren-voorbeeld > :last-child {
        flex: 1;
        min-height: 480px;
    }

@media (max-width: 1023.98px) {
    .factureren-indeling {
        grid-template-columns: 1fr;
        height: auto;
    }
}

/* Fout van de API (Apifoutmelding): onderaan in beeld, ook boven een open dialoog */
.apifout {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 2000;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: min(560px, calc(100vw - 32px));
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--fout-achtergrond);
    border: 1px solid var(--fout-rand);
    color: var(--fout-tekst);
    box-shadow: var(--schaduw-zwevend);
}

.apifout-tekst {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-wrap: anywhere;
}

.apifout .icoonknop {
    color: inherit;
}

/* ===== Dialogen (BewerkDialoog, SfDialog) ===== */
/* De maat zet BewerkDialoog zelf (Width/Height met --dialoog-marge): Syncfusion past een gewijzigde CssClass niet toe */
/* Meldingen per regel (DialogServiceExtensions.MeldingenAsync): elke melding op een eigen regel */
.e-dialog.meldingen .e-dlg-content {
    white-space: pre-line;
}

/* Elke dialoog binnen de schermbreedte: de dialogen hebben een vaste breedte (bv. Width="720px" in BewerkDialoog), die op een
   telefoon breder is dan het scherm */
.e-dialog {
    max-width: calc(100vw - 2 * var(--dialoog-marge)) !important;
}

.e-dialog.bewerkdialoog {
    max-height: calc(100dvh - 2 * var(--dialoog-marge)) !important;
}

.bewerkdialoog .formulier {
    padding-top: 4px;
}

/* Kop met titel links en (optioneel) de knop voor volledig scherm rechts, vóór het sluitkruisje */
.bewerkdialoog .e-dlg-header-content {
    display: flex;
    align-items: center;
}

    .bewerkdialoog .e-dlg-header-content .e-dlg-header {
        flex: 1;
        width: auto;
    }

    .bewerkdialoog .e-dlg-header-content .e-dlg-closeicon-btn {
        order: 2;
        float: none;
    }

.dialoog-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 8px;
}

/* Pdf-venster (PdfVenster): de viewer vult de hele inhoud; staat hier omdat SfDialog buiten de CSS-isolatie valt */
.pdfvenster .e-dlg-content {
    padding: 0;
    overflow: hidden;
}

.pdfvenster .dialoog-kop span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dialoog-voet {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dialoog-ruimte {
    flex: 1;
}

/* Kiesveld: de gekozen waarde (alleen-lezen) met "Zoek..." ernaast, zoals de desktop; veld-rij: een invoer met een knop ernaast */
.kiesveld, .veld-rij {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .kiesveld .e-input-group, .veld-rij .e-input-group {
        flex: 1;
        min-width: 0;
    }

    .kiesveld > .e-btn, .veld-rij > .e-btn {
        flex-shrink: 0;
    }

/* Kiesvenster: statusfilter en afbakening boven de lijst */
.kiesvenster-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
}

/* Kop van een veld met een knop rechts (bv. Beschrijving met Inforegel) */
.veld-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.veld-vinkje {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 16px;
    color: var(--tekst-zacht);
    font-size: .9rem;
    cursor: pointer;
}

/* ===== Smalle schermen ===== */
@media (max-width: 760px) {
    :root {
        --dialoog-marge: 8px;
    }

    .app-inhoud {
        padding: 16px;
    }

    .formulier .veldpaar,
    .formulier .veldpaar.gelijk,
    .formulier .veldpaar.adres {
        grid-template-columns: 1fr;
    }

    /* Een knop met icoon naast een veld (Zoek… bij een kiesveld, Verbinding testen): alleen het icoon; de volledige tekst staat
       in title en aria-label (Actieknop Titel) */
    .kiesveld .e-btn:has(.e-btn-icon) .actieknop-tekst,
    .veld-rij .e-btn:has(.e-btn-icon) .actieknop-tekst {
        display: none;
    }

        .kiesveld .e-btn:has(.e-btn-icon) .e-btn-icon,
        .veld-rij .e-btn:has(.e-btn-icon) .e-btn-icon {
            margin: 0;
        }

    /* Safari op iOS zoomt in op elk invoerveld met tekst kleiner dan 16px (de Syncfusion-velden zijn 14px): op een telefoon alle
       invoer 16px, dan blijft de pagina staan en werkt knijpen om te zoomen gewoon. Important, omdat de Syncfusion-thema's de
       lettergrootte met specifiekere selectors per soort veld zetten. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    textarea,
    select,
    .e-input,
    [contenteditable="true"] {
        font-size: 16px !important;
    }

    /* Voet van een dialoog: de knoppen lopen door naar een volgende regel en vullen de breedte, nooit buiten beeld */
    .dialoog-voet {
        flex-wrap: wrap;
    }

        .dialoog-voet .dialoog-ruimte {
            display: none;
        }

        .dialoog-voet .e-btn {
            flex: 1 1 auto;
            margin: 0;
        }

    .kop-gebruiker-tekst {
        display: none;
    }

    /* Paginakop compact onder elkaar: titel en aantal, de knoppen op één regel (Filters met het aantal actieve, ⋯ met de lijstknoppen
       en Toevoegen), en de filters ingeklapt; de filterknop klapt ze uit over de volle breedte (twee naast elkaar als ze passen) */
    .pagina-kop {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-bottom: 12px;
    }

        .pagina-titelregel h1 {
            font-size: 1.25rem;
        }

    .pagina-titelregel {
        gap: 8px;
    }

    .pagina-icoon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .pagina-ondertitel {
        margin-top: 2px;
        font-size: .85rem;
    }

    .lijstknop.filterknop {
        display: inline-flex;
    }

    .pagina-kop.filters-open .lijstknop.filterknop {
        background: var(--primair-zacht);
    }

    .pagina-filters {
        order: 2;
        flex-basis: auto;
        display: none;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        align-items: start;
        gap: 8px;
    }

    .pagina-kop.filters-open .pagina-filters {
        display: grid;
    }

        .pagina-filters > * {
            margin: 0;
        }

        /* Syncfusion zet de breedte (Breedte van de keuze) als style op het element */
        .pagina-filters .e-input-group {
            width: 100% !important;
        }

    .pagina-acties {
        order: 1;
        justify-content: flex-start;
        gap: 4px;
    }

    /* Op mobiel staan de velden onder elkaar: meer ruimte eraf */
    .formulier.schermvullend .markdown-editor {
        height: calc(100dvh - 2 * var(--dialoog-marge) - 420px) !important;
    }

    /* Tijdlijn: geen lijn en bolletjes, alleen de kaartjes */
    .tijdlijn {
        padding-left: 0;
    }

        .tijdlijn::before,
        .tijdlijn-punt {
            display: none;
        }

    .tijdlijn-maand {
        margin-left: 0;
        padding-left: 0;
    }
}

/* Alleen-lezen waarde met een klein kopieerknopje erin (Kopieerveld), zoals in de Portal */
.kopieerveld {
    position: relative;
    max-width: 360px;
}

    .kopieerveld input {
        width: 100%;
        padding-right: 40px;
        font-family: ui-monospace, Consolas, monospace;
        letter-spacing: .04em;
    }

.kopieerveld-knop {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tekst-zacht);
    cursor: pointer;
}

    .kopieerveld-knop:hover {
        background: var(--primair-zacht);
        color: var(--primair);
    }