/*
   AdminSys.Web – algemene opmaak: ontwerptokens, basis, app-indeling en gedeelde onderdelen.
   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.
*/

/* ===== Ontwerptokens (AdminSys Icon Style Guide v2.0: blauw #2E5D90, groen #62B63C, oranje #FF9637) =====
   Kleuren met light-dark(licht, donker): het thema bepaalt alleen color-scheme, de waarden staan maar op één plek. */
:root {
    color-scheme: light;

    /* Huisstijl */
    --pk-nachtblauw: #0F2236;
    --pk-donkerblauw: #17324F;
    --pk-blauw: #2E5D90;
    --pk-groen: #62B63C;
    --pk-groen-hover: #55A031;
    --pk-oranje: #FF9637;
    --pk-signaal: #f7630c;
    --pk-licht: #f3f5f7;
    --op-kleur: #fff;

    /* Vlakken en tekst */
    --primair: light-dark(#2E5D90, #8FB3DE);
    --primair-hover: light-dark(#244A73, #B1CBEA);
    --primair-zacht: light-dark(#E7EEF6, #1C2F45);
    --achtergrond: light-dark(var(--pk-licht), #0e1419);
    --oppervlak: light-dark(#ffffff, #151d24);
    --oppervlak-2: light-dark(#f8fafb, #1b252d);
    --rij-om-en-om: light-dark(#f4f7fa, #19232b);
    --rand: light-dark(#e2e8ed, #26323b);
    --tekst: light-dark(#13202b, #e5edf3);
    --tekst-zacht: light-dark(#5b6b78, #93a4b2);
    --schaduw-kleur: light-dark(rgba(16, 24, 40, .06), rgba(0, 0, 0, .35));
    --schaduw: 0 1px 2px var(--schaduw-kleur), 0 2px 8px var(--schaduw-kleur);
    /* Klein (icoontegel), hover (klikbare kaart of tegel), zwevend (menu's, meldingen, dialoog) en hoog (accountkaart) */
    --schaduw-klein: 0 1px 3px rgb(0 0 0 / .2);
    --schaduw-hover: 0 4px 14px color-mix(in srgb, var(--pk-blauw) 16%, transparent);
    --schaduw-zwevend: 0 8px 24px rgb(16 24 40 / .16);
    --schaduw-hoog: 0 24px 60px rgb(0 0 0 / .35);
    /* De zwevende plusknop (ToevoegKnop) */
    --schaduw-knop: 0 6px 18px rgb(0 0 0 / .22), 0 2px 6px rgb(0 0 0 / .14);
    --schaduw-knop-hover: 0 10px 24px rgb(0 0 0 / .26), 0 3px 8px rgb(0 0 0 / .16);

    /* Zijbalk */
    --zijbalk: light-dark(var(--pk-donkerblauw), var(--pk-nachtblauw));
    --zijbalk-tekst: #D5E0EC;
    --zijbalk-tekst-zacht: #8EA6C0;
    --zijbalk-hover: rgba(255, 255, 255, .07);
    --zijbalk-actief: rgba(255, 255, 255, .12);

    /* Meldingen en labels */
    --fout-achtergrond: light-dark(#fdf3f4, #3a1418);
    --fout-rand: light-dark(#f0b9bf, #6e2a31);
    --fout-tekst: light-dark(#a4161a, #ffb3b8);
    --info-achtergrond: light-dark(#eaf5fc, #0f2b3d);
    --info-rand: light-dark(#b5dcf3, #1e4d6b);
    --info-tekst: light-dark(#0b4f78, #a9d8f5);
    --waarschuwing-achtergrond: light-dark(#fff4e5, #3a2a12);
    --waarschuwing-tekst: light-dark(#9a5b00, #ffc98a);
    --succes-achtergrond: color-mix(in srgb, var(--pk-groen) 16%, transparent);
    --succes-tekst: color-mix(in srgb, var(--pk-groen) 70%, var(--tekst));

    /* Maten */
    --straal: 10px;
    --dialoog-marge: 32px;
}

:root[data-thema="donker"] {
    color-scheme: dark;
}

:root[data-thema="systeem"] {
    color-scheme: light dark;
}

/* Syncfusion-componenten in de huisstijlkleur */
:root {
    --color-sf-primary: var(--primair);
    --color-sf-primary-bg-color: var(--primair);
    --color-sf-primary-bg-color-hover: var(--primair-hover);
    --color-sf-primary-bg-color-pressed: var(--primair-hover);
    --color-sf-primary-bg-color-focus: var(--primair-hover);
    --color-sf-primary-border-color: var(--primair);
    --color-sf-primary-border-color-hover: var(--primair-hover);
    --color-sf-primary-border-color-pressed: var(--primair-hover);
    --color-sf-primary-border-color-focus: var(--primair-hover);
    --color-sf-primary-lighter: var(--primair-zacht);
    --color-sf-primary-light: var(--primair-zacht);
}

/* ===== Basis ===== */
html, body {
    margin: 0;
    height: 100%;
    background: var(--achtergrond);
    color: var(--tekst);
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    color: var(--tekst);
    letter-spacing: -.01em;
}

h1:focus {
    outline: none;
}

a {
    color: var(--primair);
}

.icoon {
    flex-shrink: 0;
}

.validation-message {
    color: var(--fout-tekst);
    font-size: .85rem;
}

.blazor-error-boundary {
    padding: 1rem;
    color: var(--op-kleur);
    background: var(--fout-tekst);
}

    .blazor-error-boundary::after {
        content: "Er is een fout opgetreden.";
    }

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

.app-hoofd {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    min-width: 0;
}

/* 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 > .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" op 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. */
.e-grid.kaartweergave .e-gridheader {
    display: none;
}

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

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

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

.e-grid.kaartweergave .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);
}

    .e-grid.kaartweergave .e-content tr.e-row > td {
        height: auto !important;
        padding: 1px 0 !important;
        border: 0 !important;
        background: transparent !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }

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

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

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

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

        .e-grid.kaartweergave .e-content tr.e-row > td.kaart-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 */
        .e-grid.kaartweergave .e-content tr.e-row > td:is(.kaart-sub, .kaart-datum) {
            color: var(--tekst-zacht);
            font-size: .85rem;
            text-align: left !important;
        }

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

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

        .e-grid.kaartweergave .e-content tr.e-row > td.kaart-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 */
        .e-grid.kaartweergave .e-content tr.e-row:not(:has(.kaart-veld)) > td:not(.kaart-vast) {
            display: flex;
            grid-column: 2 / 4;
            justify-content: space-between;
            gap: 12px;
            text-align: right !important;
        }

            .e-grid.kaartweergave .e-content tr.e-row:not(:has(.kaart-veld)) > td:not(.kaart-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;
}

.merk-tegel {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--op-kleur);
    box-shadow: var(--schaduw-klein);
    flex-shrink: 0;
}

    .merk-tegel img {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

.merk-naam-accent {
    color: var(--pk-groen);
}

.merk-naam {
    font-weight: 700;
    font-size: 1.45rem;
    letter-spacing: -.01em;
    white-space: nowrap;
}

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

.thema-keuze {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 2px 4px 8px;
    border-bottom: 1px solid var(--rand);
    margin-bottom: 6px;
}

.thema-optie {
    padding: 6px 0;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--oppervlak-2);
    color: var(--tekst);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
}

    .thema-optie.actief {
        border-color: var(--primair);
        background: var(--primair-zacht);
        color: var(--primair);
        font-weight: 600;
    }

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

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

/* ===== Kaarten en labels ===== */
.kaart {
    background: var(--oppervlak);
    border: 1px solid var(--rand);
    border-radius: var(--straal);
    box-shadow: var(--schaduw);
}

.kaart-inhoud {
    padding: 20px 24px;
}

.kaart-kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.kaart-titel {
    margin: 0 0 16px;
    font-size: 1rem;
    font-weight: 600;
}

/* Een groep binnen een kaart (bv. Lopende acties / Totaal bij de uren) */
.kaart-subtitel {
    margin: 16px 0 8px;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tekst-zacht);
}

.kaart-link {
    display: inline-block;
    margin-top: 12px;
    font-size: .875rem;
}

    .kaart-kop .kaart-titel {
        margin: 0;
    }

    /* De knoppen rechts in de kop (bv. Nu synchroniseren en Bewerken) */
    .kaart-kop .kaart-acties {
        display: flex;
        gap: 8px;
    }

.kaarten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

    /* Kaarten die samen de volle breedte vullen (bv. facturatie): naast elkaar zolang ze minstens 420px breed
       kunnen zijn, anders onder elkaar; de hoogte volgt de inhoud */
    .kaarten.kaarten-op-inhoud {
        grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
        align-items: start;
    }

        .kaarten.kaarten-op-inhoud .kaart-kop {
            gap: 24px;
        }

.leeg {
    padding: 48px 24px;
    text-align: center;
    color: var(--tekst-zacht);
}

.label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--oppervlak-2);
    border: 1px solid var(--rand);
    color: var(--tekst-zacht);
    font-size: .78rem;
    font-weight: 600;
}

.label-primair {
    background: var(--primair-zacht);
    border-color: transparent;
    color: var(--primair);
}

.label-succes {
    background: var(--succes-achtergrond);
    border-color: transparent;
    color: var(--succes-tekst);
}

.label-waarschuwing {
    background: var(--waarschuwing-achtergrond);
    border-color: transparent;
    color: var(--waarschuwing-tekst);
}

/* Een label in een gridcel (bv. "Standaard" achter de naam): inline en compact, anders botst het met de celopmaak van Syncfusion */
.e-grid .e-rowcell .label {
    display: inline-block;
    margin-left: 8px;
    padding: 0 8px;
    font-size: .72rem;
    line-height: 18px;
    vertical-align: middle;
    white-space: nowrap;
}
/* Status met icoon in de kleur van de status (zie Statusweergave en de …weergave per entiteit). De naam blijft gewone
   tekst (groen en oranje zijn als tekst slecht leesbaar), behalve grijs: dan is hij afgerond en mag alles vervagen. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .status svg {
        flex-shrink: 0;
    }

.status-groen svg {
    color: var(--pk-groen);
}

.status-blauw svg {
    color: var(--primair);
}

.status-oranje svg {
    color: var(--pk-oranje);
}

.status-rood svg {
    color: var(--fout-tekst);
}

.status-grijs {
    color: var(--tekst-zacht);
}

/* Deadline: rood als verlopen, oranje binnen een week (zolang het item loopt) */
.deadline-verlopen {
    color: var(--fout-tekst);
    font-weight: 600;
}

.deadline-bijna {
    color: var(--pk-oranje);
    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;
    }

    .kaart .e-grid .e-headercell {
        font-weight: 600;
    }

    .kaart .e-grid .e-row,
    .e-grid.klikbaar .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);
    }

/* ===== Knoppen ===== */
/* Ronde knop met alleen een icoon (bv. "Openen in kaart", vCard, export) */
.icoonknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--primair);
    cursor: pointer;
}

    .icoonknop:hover {
        background: var(--primair-zacht);
    }

    .icoonknop:focus-visible {
        outline: 2px solid var(--primair);
        outline-offset: 2px;
    }

    .icoonknop:disabled {
        opacity: .4;
        cursor: default;
    }

/* Vernieuwen: het icoon draait zolang de lijst wordt opgehaald */
.icoon.draait,
.e-btn .actieknop-spinner {
    animation: draaien .8s linear infinite;
}

@keyframes draaien {
    to {
        transform: rotate(360deg);
    }
}

/* Knop die eruitziet als een link (bv. "Meer tonen", een bestandsnaam) */
.tekstknop {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primair);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Eigen iconen in Syncfusion-contextmenu's (IconCss), als masker zodat ze de tekstkleur volgen */
.e-menu-icon.icoon-telefoon,
.e-menu-icon.icoon-mail {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: var(--icoon) center / contain no-repeat;
    mask: var(--icoon) center / contain no-repeat;
}

.e-menu-icon.icoon-telefoon {
    --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

.e-menu-icon.icoon-mail {
    --icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

/* Raster van schakelaars (bv. administraties of modules aan/uit) */
.schakelaars {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px 24px;
}

/* ===== Formulieren, gegevens en meldingen ===== */
/* Kolommen van minstens 260px, maar nooit breder dan het formulier zelf (smal scherm); de velden mogen krimpen
   (min-width: 0), anders duwt een invoer of een veld met knop (Zoek…) het formulier buiten beeld */
.formulier {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 16px 20px;
}

    .formulier > * {
        min-width: 0;
    }

    /* Het formulier in de bewerkdialoog is een fieldset, zodat het in één keer uit kan (alleen te bekijken) */
    fieldset.formulier {
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }

        /* Syncfusion-keuzelijsten en -knoppen reageren niet op een uitgeschakelde fieldset */
        fieldset.formulier:disabled .e-input-group,
        fieldset.formulier:disabled .e-control-wrapper,
        fieldset.formulier:disabled .e-btn {
            pointer-events: none;
            opacity: .7;
        }

    /* .veld: zelfde opmaak als een label, voor velden die geen label-element kunnen hebben (keuzelijsten, editor) */
    .formulier label,
    .formulier .veld {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-weight: 600;
        font-size: .85rem;
        color: var(--tekst-zacht);
    }

    .formulier .breed {
        grid-column: 1 / -1;
    }

.formulier-kop {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--rand);
    font-weight: 700;
    color: var(--tekst);
}

.keuze-type {
    display: flex;
    gap: 24px;
}

.gegevens {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 24px;
    margin: 0;
}

    .gegevens dt {
        color: var(--tekst-zacht);
    }

    .gegevens dd {
        margin: 0;
        min-width: 0;
        font-weight: 500;
        /* Lange waarden (e-mailadres, IBAN) afbreken in plaats van buiten de kaart te vallen */
        overflow-wrap: anywhere;
    }

.lijst {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .lijst li {
        padding: 10px 0;
        border-bottom: 1px solid var(--rand);
    }

        .lijst li:last-child {
            border-bottom: none;
        }

.lijst-sub {
    display: block;
    color: var(--tekst-zacht);
    font-size: .85rem;
}

.melding {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
}

.melding-fout {
    background: var(--fout-achtergrond);
    border: 1px solid var(--fout-rand);
    color: var(--fout-tekst);
}

.melding-info {
    background: var(--info-achtergrond);
    border: 1px solid var(--info-rand);
    color: var(--info-tekst);
}

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

/* Editor (MarkdownEditor, SfRichTextEditor): in de hoogte groter en kleiner te maken, gewone letter in een formulier */
.markdown-editor.e-richtexteditor {
    display: flex;
    flex-direction: column;
    resize: vertical;
    overflow: hidden;
    min-height: 200px;
}

    .markdown-editor.e-richtexteditor .e-rte-container {
        flex: 1 1 auto;
        min-height: 0;
    }

.formulier .veld .markdown-editor {
    font-weight: 400;
    font-size: 1rem;
    color: var(--tekst);
}

/* Schermvullend: de editor groeit mee met de schermhoogte (ruimte voor kop, velden, schakelaar en knoppen eraf) */
.formulier.schermvullend .markdown-editor {
    height: calc(100dvh - 2 * var(--dialoog-marge) - 330px) !important;
    min-height: 220px;
    resize: none;
}

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

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

/* Sleepgebied van een Dropvak (zie sleepvak.js): tijdens het slepen van een bestand is het hele gebied (dialoog, assistent of
   overzicht) het sleepvak, met bovenin "Laat los om toe te voegen"; een verkeerd soort bestand geeft daar kort een melding.
   In het overzicht (dat scrollt) blijft de balk bovenin staan zonder de inhoud te verschuiven. */
.sleepgebied-actief {
    outline: 2px dashed var(--primair);
    outline-offset: -4px;
}

    .sleepgebied-actief .dropvak {
        border-color: var(--primair);
        background: var(--primair-zacht);
        color: var(--primair);
    }

.sleepgebied-actief::before,
.sleepgebied-melding::before {
    content: "Laat los om toe te voegen";
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 50;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--primair);
    color: #fff;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

.sleepgebied-melding::before {
    content: attr(data-sleepmelding);
    background: var(--fout-achtergrond);
    border: 1px solid var(--fout-rand);
    color: var(--fout-tekst);
}

main.sleepgebied-actief::before,
main.sleepgebied-melding::before {
    position: sticky;
    display: block;
    top: 0;
    height: 20px;
    margin-bottom: -40px;
}