html, body { height: 100%; margin: 0; }

/* Omgevingsgrootte (voorkeuren-paneel): schaalt de rem-gebaseerde UI. App.razor zet de klasse uit een cookie. */
html.adm-size-compact { font-size: 14px; }
html.adm-size-normal { font-size: 16px; }
html.adm-size-comfortable { font-size: 18px; }

/* Schil-structuur blijft app-CSS (adm-shell.css §regel 31). Visuele taal v2: één canvas-toon —
   topbar + zijbalk = --adm-canvas (zijbalk NIET meer getint, blend met de inhoud). */
.shell { display: flex; flex-direction: column; height: 100vh; }

.topbar {
    display: flex; align-items: center; gap: 12px;
    height: 52px; padding: 0 16px; flex: 0 0 auto;
    border-bottom: 1px solid var(--adm-card-border);
    background: var(--adm-canvas);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--bs-body-color); }

.shell-body { display: flex; flex: 1; min-height: 0; }

.sidebar {
    flex: 0 0 220px; overflow-y: auto; padding: 12px 8px;
    /* Achtergrond + rechterlijn + strak actief item komen sinds AppKit 0.99.1 uit de fundering
       (thema-adaptief via color-mix → paneel in licht, blend in dark). Geen eigen .sidebar-background meer. */
    display: flex; flex-direction: column;
}

.nav-menu { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; }
.nav-menu .nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    color: var(--bs-body-color); text-decoration: none; font-size: .92rem;
}
.nav-menu .nav-link:hover { background: var(--bs-secondary-bg); }
.nav-menu .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); font-weight: 600; }

.content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }
.content-inner { padding: 20px 24px; max-width: 1100px; }

/* De hoogte-doorgifte naar een vullende fiche-tab (.content-inner:has(.adm-fiche-tabstrip-vullend))
   stond hier van 16/08 tot 21/08/2026 en is verhuisd naar de schil — AppKit 0.252.0, identiek.
   Wij hadden ze als enige van de vijf apps met journaal-tabs; de andere vier misten ze zonder het te
   weten, want een `Vullend` die niets doet geeft geen fout. Vandaar dat de schil ze nu meebrengt. */

/* NB: de ingeklapte-zijbalk-regels (html.adm-sidebar-collapsed …) en .topbar-spacer stonden hier dubbel —
   ze zitten sinds AppKit 0.17.x in adm-shell.css. Zie de opmerking verderop; niet terugzetten. */

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    padding: 10px 16px; z-index: 1100;
    /* Dark-mode-pilot: Bootstrap danger-variabelen volgen licht/donker (fallback = de oude vaste kleuren). */
    background: var(--bs-danger-bg-subtle, #fee);
    border-top: 1px solid var(--bs-danger-border-subtle, #f5c2c7);
    color: var(--bs-danger-text-emphasis, #58151c);
}
#blazor-error-ui .reload, #blazor-error-ui .dismiss { margin-left: 12px; cursor: pointer; }

/* === AdmGrid (overgezet uit ADM One — playbook §6) ============================================ */
/* Accentkleur voor o.a. de selectie-balk; overschrijfbaar per thema/tenant. */
:root { --adm-accent: #2563eb; }

/* AdmGrid: uniforme toolbar (zoek + kolomselector + export) boven elke grid. */
.adm-grid-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.adm-grid-bar-spacer {
    flex: 1 1 auto;
}

/* NB: de grid-werkbalk (.adm-grid-title/-info/-searchbox) en het "⋯"-menu (.adm-grid-menu/.adm-menu-*)
   stonden hier dubbel — ze zitten sinds AppKit 0.17.x in het pakket (adm-shell.css). Regel: rendert een
   fundering-component een klasse, dan hoort de CSS in de fundering (playbook §6). Niet terugzetten. */

.adm-grid-empty {
    padding: 18px;
    color: var(--bs-secondary-color);
    font-style: italic;
}

/* Laadfase: grid verbergen (layout wordt nog toegepast) en een spinner tonen, zodat de gebruiker
   geen herformattering ("flikker") ziet. */
.adm-grid-body { position: relative; }
.adm-grid-veil { visibility: hidden; }
.adm-grid-fill .adm-grid-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.adm-grid-loading {
    position: absolute;
    inset: 0;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.adm-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--dx-color-border, #e0e0e0);
    border-top-color: var(--dx-color-primary, #2563eb);
    border-radius: 50%;
    animation: adm-spin .7s linear infinite;
}
@keyframes adm-spin { to { transform: rotate(360deg); } }

/* FullHeight: de grid vult de beschikbare hoogte (toolbar vast, grid scrollt intern). De :has-regels
   koppelen aan de layout-wrapper (.content/.content-inner — aanwezig in deze app). */
.content:has(.adm-grid-fill) {
    display: flex;
    flex-direction: column;
}
.content:has(.adm-grid-fill) > .content-inner {
    flex: 1;
    min-height: 0;
    max-width: none;   /* grid-only pagina's vullen de volle breedte (zoals ADM One), niet de 1100px-leescap */
    display: flex;
    flex-direction: column;
}
.content:has(.adm-grid-fill) > .dxbl-btn {
    align-self: flex-start;
}
/* Volle-breedte-pagina zonder de grid-fill-flex: heft enkel de 1100px-leescap op (bv. de mailsjabloon-editor
   met het voorbeeld rechts, die de volle breedte wil gebruiken). */
.content:has(.adm-page-wide) > .content-inner { max-width: none; }

/* Master-detail-lijsten (rail-drawer) vullen de volle breedte, ook zonder FullHeight. Breedte en hoogte waren
   gekoppeld via .adm-grid-fill; de paging-stopgap haalde FullHeight weg (clip-fix) maar daarmee viel ook de volle
   breedte weg → lijst + detailpaneel geperst in de 1100px-leescap met witruimte rechts. Deze regel heft ENKEL de
   cap op voor elke pagina met een rail-drawer (geen hoogte-flex, dus geen clip). */
.content:has(.adm-detail-drawer) > .content-inner { max-width: none; }

.adm-grid-fill {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.adm-grid-fill .adm-grid-bar { flex: 0 0 auto; }
.adm-grid-fill .dxbl-grid { flex: 1; min-height: 0; }

/* Commissie-termijnen (Aanbrenger-fiche): compact rooster van 24 betalingen. */
.adm-plan-grid { display: flex; flex-direction: column; gap: .25rem; }
.adm-plan-head, .adm-plan-row { display: grid; grid-template-columns: 5rem 1fr 1fr; gap: .5rem; align-items: center; }
.adm-plan-head { font-weight: 600; font-size: .8rem; color: var(--bs-secondary-color); }
.adm-plan-seq { color: var(--bs-secondary-color); }

/* Rijmarkering (selectie + focus) staat sinds AppKit 0.19.0 in adm-shell.css — AdmGrid komt uit het
   pakket, dus hoort zijn stijl daar ook. Zet ze hier NIET opnieuw: een app-regel wint van de fundering
   en je krijgt stil afwijkend gedrag per app. */

/* Login-scherm: stijl verhuisd naar de scoped LoginPanel.razor.css in CreditSoft.AppKit.Web. */

/* Footer-pinning (.nav-spacer flex) + .nav-section/.nav-link-styling = fundering-eigendom: sinds AppKit 0.99.2/0.100.0
   zit `.nav-menu .nav-spacer { flex: 1 1 auto }` in adm-shell.css, dus onze eigen workaround is overbodig (verwijderd). */

/* === Release notes ("Wat is nieuw") ============================================================ */
.rn-page-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rn-beta { font-size: .55em; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 3px 10px; border-radius: 12px; background: #ffb020; color: #241800; line-height: 1.4; }
.release-notes { max-width: 760px; }
.rn-item { padding: 16px 0; border-bottom: 1px solid var(--bs-border-color); }
.rn-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rn-version { font-weight: 700; }
.rn-date { color: var(--bs-secondary-color); font-size: .85rem; }
.rn-cat { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    padding: 2px 8px; border-radius: 10px; background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }
.rn-title { font-size: 1.05rem; margin: 2px 0 6px; }
.rn-body { color: var(--bs-body-color); }
.rn-body :last-child { margin-bottom: 0; }
.rn-body img { max-width: 100%; height: auto; border-radius: 6px; }

/* === Beta-welkompagina (tijdelijk startscherm) ================================================ */
/* Info-banner i.p.v. Bootstrap `alert-warning`: die leunt op `--bs-warning-bg-subtle`/`-border-subtle`/
   `-text-emphasis`, dezelfde "-subtle"-variabelen die (zoals hierboven bij `--bs-primary-bg-subtle`)
   NIET meeflippen in het Fluent dark-thema — vandaar een felle lichte kleur die niet bij donkere modus
   past. Platform-accent (blauw) i.p.v. oranje/rood, dark-mode-veilig via color-mix. */
.adm-info-banner {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: 1rem 1.1rem; border-radius: 8px;
    background: color-mix(in srgb, var(--bs-primary) 8%, var(--bs-body-bg));
    border-left: 4px solid var(--bs-primary);
    color: var(--bs-body-color);
}
.adm-info-banner-icon { font-size: 1.9rem; line-height: 1; flex: 0 0 auto; }

.welcome { max-width: 880px; }
.welcome-intro { max-width: 720px; margin-bottom: 1.75rem; }
.welcome-cards { margin-bottom: 1.75rem; }
.welcome .card-title { margin-bottom: .75rem; }
.welcome-list { padding-left: 1.1rem; }
.welcome-list li { margin-bottom: .5rem; }
.welcome-list li:last-child { margin-bottom: 0; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* === Verplicht-veld markering (app-breed, één manier) ========================================== */
/* Rood sterretje na het label/caption. Werkt op een gewoon <label class="adm-req"> én op een
   DxFormLayoutItem via CaptionCssClass="adm-req" (DevExpress zet de klasse op het caption-element). */
.adm-req::after { content: " *"; color: var(--bs-danger); font-weight: 600; }

/* Help-lade: de "Volledige handleiding"-knop volle breedte + zelfde stijl als de Afmelden-knop
   (.prefs-logout). Enkel binnen het help-paneel, zodat de thema/taal-chips een pil blijven. */
.help-panel .prefs-footer .prefs-chip {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    padding: 8px; border-radius: 8px;
}
.help-panel .prefs-footer .prefs-chip:hover { background: var(--bs-secondary-bg); }

/* ── Merk-tegel in de topbar i.p.v. het AppKit-placeholder-icoon (grid_3x3_dots). ──
   De AppKit-MainLayout heeft geen brand-logo-optie (AppKitOptions kent er geen), dus we vervangen het icoon
   hier: het DevExpress-SVG verbergen en de CreditSoft-euro-tegel (favicon.svg) als achtergrond tonen — in
   kleur, zoals ADM One zijn eigen icoon toont. ⚠️ App-eigen branding-override (zelfde patroon als DAMC).
   Kandidaat voor een echte brand-slot in de AppKit — bij ADM One gemeld. */
.topbar .brand > svg.adm-icon { display: none; }
.topbar .brand::before {
    content: "";
    width: 24px; height: 24px; flex: 0 0 auto;
    background: url("/favicon.svg") center / contain no-repeat;
}

/* ── Tweeluik-login (eigen layout, ADR-0004-override; spiegelt DAMC maar in CreditSoft-huisstijl). ──
   Merkpaneel links (blauw verloop uit het logo) + het fundering-LoginPanel (.login-page) rechts. */
.cs-login { display: flex; min-height: 100vh; }
.cs-login-brand {
    flex: 1 1 46%;
    background: linear-gradient(150deg, #2f6bef 0%, #1d4ed8 55%, #17369b 100%);
    color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 1.5rem; padding: 2rem; text-align: center;
}
.cs-login-logo { width: 104px; height: 104px; }
.cs-login-title { font-size: 2.4rem; font-weight: 600; letter-spacing: .01em; margin: 0; }
.cs-login-tagline {
    font-size: .8rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255, 255, 255, .72); margin: 0; max-width: 24rem; line-height: 1.7;
}
/* .login-page (fundering) = de rechter helft; behoudt zijn eigen centrering van de kaart. */
.cs-login .login-page { flex: 1 1 54%; background: var(--bs-body-bg); }

@media (max-width: 767.98px) {
    .cs-login { flex-direction: column; }
    .cs-login-brand { flex: 0 0 34vh; }
    .cs-login .login-page { min-height: auto; }
}

/* === Overleg (collab) — vol-hoogte/breedte, zelfde opzet als ADM One =========================== */
/* Vol-hoogte-pagina: de shell-content wordt een flexkolom die de fill-pagina laat groeien i.p.v. het
   standaard max-width:1100px-blok. Zelfde mechaniek als ADM One (.content/.content-inner-klassen delen we). */
.content:has(.adm-page-fill) { display: flex; flex-direction: column; overflow: hidden; }
.content:has(.adm-page-fill) > .content-inner { flex: 1; min-height: 0; max-width: none; display: flex; flex-direction: column; overflow: hidden; }
.adm-page-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* Sleep-of-klik bijlage-zone (opmaak zoals ADM One). De InputFile ligt transparant bovenop de zone →
   klikken opent de bestandskiezer, en gesleepte bestanden vallen op diezelfde input. */
.adm-dropzone {
    position: relative; border: 1px dashed var(--bs-border-color); border-radius: 8px;
    padding: 18px; text-align: center; color: var(--bs-secondary-color);
    background: var(--bs-body-bg); transition: border-color .12s, background .12s;
}
.adm-dropzone:hover, .adm-dropzone-over { border-color: var(--adm-accent); }
.adm-dropzone-over { background: color-mix(in srgb, var(--adm-accent) 8%, transparent); }
.adm-dropzone-title { font-size: .9rem; font-weight: 500; }
.adm-dropzone-hint { font-size: .8rem; color: var(--bs-secondary-color); }
.adm-dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.adm-dropzone-files { list-style: none; padding-left: 0; }

.collab-layout { display: flex; gap: 16px; flex: 1; min-height: 260px; }
.collab-topics {
    flex: 0 0 300px; overflow-y: auto;
    border: 1px solid var(--bs-border-color); border-radius: 10px;
    padding: 6px; display: flex; flex-direction: column; gap: 4px;
}
.collab-topic-item {
    text-align: left; background: transparent; border: 1px solid transparent;
    border-radius: 8px; padding: 8px 10px; cursor: pointer; font: inherit; width: 100%;
}
.collab-topic-item:hover { background: var(--bs-tertiary-bg, rgba(0,0,0,0.04)); }
.collab-topic-item.active {
    background: color-mix(in srgb, var(--adm-accent, #2563eb) 12%, transparent);
    border-color: color-mix(in srgb, var(--adm-accent, #2563eb) 40%, transparent);
}
.collab-topic-title { font-weight: 600; font-size: 0.92rem; }
.collab-topic-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.78rem; margin-top: 2px; color: var(--bs-secondary-color); }
.collab-thread {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
    border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden;
}
.collab-thread-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--bs-border-color); }
.collab-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.collab-msg { border: 1px solid var(--bs-border-color); border-radius: 8px; padding: 8px 10px; max-width: 82%; }
.collab-msg-adm { align-self: flex-end; background: color-mix(in srgb, var(--adm-accent, #2563eb) 8%, transparent); }
.collab-msg-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.collab-msg-body { font-size: 0.92rem; white-space: pre-wrap; }
.collab-msg-body img { max-width: 100%; height: auto; }
.collab-reply { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--bs-border-color); }
@media (max-width: 800px) {
    .collab-layout { flex-direction: column; }
    .collab-topics { flex: none; max-height: 240px; }
}

/* === Journaal (master-detail, ADR-0006) — leeft nu in de rechter slide-out (AdmDetailDrawer, rail).
   Het oude inklapbare onderpaneel (JournaalPanel + sleepgreep) is door de rail vervangen en verwijderd. === */
.journaal-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* In de rechter slide-out (AdmDetailDrawer) is er geen onderpaneel-flex; vul gewoon de drawer-hoogte. */
.journaal-drawer-body { height: 100%; }
/* Lege-toestand: gecentreerde, lichtgrijze illustratie + tekst (geen record gekozen / geen tabs). */
.journaal-empty {
    flex: 1; min-height: 160px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; padding: 24px; text-align: center;
}
.journaal-empty-icon { color: var(--bs-border-color); opacity: .85; }
.journaal-empty-text { color: var(--bs-secondary-color); font-size: .9rem; max-width: 320px; }
/* Sectie-schakelaar (AdmSectionSwitch) bovenaan het journaal — vervangt de oude tab-balk. Consistente horizontale
   inset (8px) met de toolbar + inhoud eronder, zodat zoek links + ⋯ rechts netjes uitlijnen en we marge terugwinnen. */
.journaal-switch { flex: 0 0 auto; padding: 10px 0; border-bottom: 1px solid var(--bs-border-color); }
.journaal-tab-content { flex: 1; min-height: 0; overflow: auto; padding: 8px 0; }

/* De zwevende werkbalk moet vlak tegen de bovenrand ankeren, anders schemert er een strook inhoud boven door
   bij het scrollen; de balk levert zelf zijn boven-padding.
   ⚠️ Stond tot 16/08/2026 op `.mail-toolbar` en gold dus enkel voor het mailverkeer — een restant van toen die
   tab een eigen werkbalk had. Die klasse bestaat niet meer, dus deze regel deed niets; nu geldt ze voor alle
   vijf de tabs, wat sowieso de bedoeling was. */

/* Onderwerp als klikbare link (opent de mail) — knop zonder chrome, vet, onderstreept bij hover. */
.journaal-mailverkeer .mail-subject-link {
    border: 0; background: none; padding: 0; font-weight: 600; text-align: left;
    color: var(--bs-body-color); cursor: pointer;
}
.journaal-mailverkeer .mail-subject-link:hover { color: var(--adm-accent); text-decoration: underline; }

/* Export-dropdown (Excel / CSV) — bootst de native DevExpress-grid-export na: "…"-knop → menu met iconen. */
.journaal-mailverkeer .mail-export { position: relative; }
.journaal-mailverkeer .mail-export-btn { display: inline-flex; align-items: center; padding: 3px 8px; }
.journaal-mailverkeer .mail-export-menu { position: absolute; right: 0; top: 100%; margin-top: 2px; z-index: 5; min-width: 210px; }
.journaal-mailverkeer .mail-export-menu .dropdown-item { display: flex; align-items: center; gap: 10px; }
.journaal-mailverkeer .mail-export-menu .dropdown-item .adm-icon { color: var(--bs-secondary-color); flex: none; }
.journaal-mailverkeer .mail-export-backdrop { position: fixed; inset: 0; z-index: 4; }

/* DevExpress PDF-viewer in het afdrukvoorbeeld: hoogte via CssClass (DxPdfViewer heeft geen style-parameter). */
.mail-pdf-viewer { width: 100%; height: 70vh; }
.attach-pdf-viewer { width: 100%; height: 75vh; }

/* Routes.razor focust bij elke navigatie de paginatitel-<h1> (FocusOnNavigate — de schermlezer leest de titel voor).
   De AppKit onderdrukt de muis-focusrand, maar bij een VOLLEDIGE paginalaad (bv. het startscherm net na login) telt
   die focus als :focus-visible en toont de browser een zwart kader rond de titel. Een titel is niet-interactief →
   nooit een zichtbare focusrand (ook niet bij :focus-visible). */
h1:focus,
h1:focus-visible { outline: none; }

/* Gedeelde journaal-tab-werkbalk (knop links + zoekveld + export rechts) — zelfde look als Mailverkeer,
   herbruikt op Taken/Notities/Bijlagen. */
/* Het zoekvak en de toevoegknop dragen `adm-jkaart-zoek` / `adm-jkaart-add` uit AdmJournaalKaart.

   ⚠️ Tot 0.275.0 deden die twee klassen NIETS bij een consument: ze stonden in geïsoleerde CSS
   (`.adm-jkaart-zoek[b-03fov8pghk]`) en markup die wij via een RenderFragment meegeven draagt dat
   scope-attribuut niet. Wij hielden hier één dag een eigen `journaal-search-box`-regel als tussenoplossing.
   In 0.276.0 zijn de regels op de balk verankerd (`.adm-jkaart-balk[b-…] .adm-jkaart-zoek`), dus die
   tussenoplossing is weg en de klasse is om. Niets meer te doen hier. */

/* .journaal-toolbar is op 24/08/2026 vervangen door adm-jkaart-balk uit AdmJournaalKaart —
   adm-jkaart-zoek uit AdmJournaalKaart. De afweging die hier stond — de balk moet in TWEE breedtes
   kloppen, een lade van 440 px en een fiche-tab van 1547 — is daar een container-query geworden, wat
   beter is dan onze media-loze vaste waarden: de kaart weet nu zelf hoe breed ZIJ is. */
.journaal-export { position: relative; }
.journaal-export-btn { display: inline-flex; align-items: center; padding: 3px 8px; }
.journaal-export-menu { position: absolute; right: 0; top: 100%; margin-top: 2px; z-index: 5; min-width: 210px; }
.journaal-export-menu .dropdown-item { display: flex; align-items: center; gap: 10px; }
.journaal-export-menu .dropdown-item .adm-icon { color: var(--bs-secondary-color); flex: none; }
.journaal-export-backdrop { position: fixed; inset: 0; z-index: 4; }

/* Kleine icoonknop in tabellen/lijsten (journaal, dashboard-fases). Niet .icon-btn — dat is AppKit topbar. */
.row-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; padding: 2px;
    border: 0; background: transparent; color: var(--bs-secondary-color); cursor: pointer; border-radius: 4px;
}
.row-icon-btn:hover { color: var(--bs-body-color); background: var(--bs-secondary-bg); }

/* Bedrijfsfiche: kaart-raster (2 kolommen, responsief) + logo-sleepvak. */
.fiche-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem;
    align-items: start; max-width: 1000px;
}
.logo-preview { max-height: 64px; max-width: 200px; object-fit: contain; }

/* Logo-sleepvak (DxUpload ExternalDropZone): grote streepjesrand, slepen of klikken. */
.logo-drop {
    border: 2px dashed var(--bs-border-color); border-radius: 8px; padding: 1.5rem 1rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    text-align: center; cursor: pointer; color: var(--bs-secondary-color); min-height: 130px;
    transition: border-color .12s ease, background .12s ease;
}
.logo-drop:hover, .logo-drop.logo-drop-hover {
    border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle);
}
.logo-drop .logo-drop-title { font-weight: 600; color: var(--bs-body-color); }

/* .adm-tabfiche is weg: nul gebruikers in .razor/.cs (nagemeten 16/08/2026). AdmFichePagina zet de
   minimumhoogte voortaan zelf via HeeftTabbladen/TabHoogte. ⚠️ Tot RelationDetail op die schil staat,
   springt die fiche nog bij het wisselen van tabblad. */

/* === Dossieropvolging: statuspil + afgekapte tekstcel ========================================= */
/* De legacy kleurde de statuscel met de kleur uit de keuzelijst en zette de tekst wit. Wij doen dat
   op een pil i.p.v. de hele cel: leesbaarder in een dichte lijst, en het blijft werken in dark mode
   (de kleur komt uit de data, niet uit het thema). */
.adm-status-pill {
    display: inline-block; max-width: 100%;
    padding: 1px 8px; border-radius: 10px;
    color: #fff; font-size: .8rem; line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Eén regel met "…" en de volledige tekst als tooltip (legacy kapte hard af op 98 tekens + ".."). */
.adm-ellipsis {
    display: block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* De actiebalk onder een fiche (.adm-fiche-acties) is naar de fundering verhuisd — AppKit 0.164.0,
   adm-shell.css. Onze kopie stond hier met dezelfde uitleg en won omdat app.css later laadt; daardoor
   bleef de oude margin-top van .25rem staan (4 px tot de dichtstbijzijnde kaart) en was de
   rechts-uitlijning per scherm nog instelbaar. Weggehaald op 16/08/2026 zodat de fundering hem bezit. */



/* Zijmarge voor een journaal-tab OP EEN FICHE — niet in de lade.
   ⚠️ Twee gastheren, twee behoeftes. In de lade naast een lijst is de lade zelf de marge: daar mag de inhoud
   tot tegen de rand lopen en dat wil Dominique zo houden. In een tabblad op een fiche is er geen lade; het
   inhoudsvlak van de schil heeft padding 0, dus werkbalk én items plakten tegen beide randen — terwijl een
   record-tab er via zijn kaart wél marge omheen heeft. Dat verschil was zichtbaar aan de exportknop die exact
   op de rand eindigde (gemeten 16/08/2026: werkbalk 244–1296, inhoudsvlak 244–1296).
   Daarom scoped op de fiche-context in plaats van op de component: dezelfde vijf tabs, ander gedrag per plek. */
/* ⚠️ HIER STOND EEN HANDONDERHOUDEN LIJST VAN ZES KLASSENAMEN, weg op 24/08/2026.

   Ze gaf elke journaal-tab de kaartvorm op een fiche-tab, plus de kaartkleur voor de zwevende werkbalk. Bij
   élke nieuwe tab hoorde er een regel bij — en vergat je dat, dan stond de inhoud kaal op de pagina.

   Sinds AppKit 0.275.0 levert `AdmJournaalKaart` dat zelf: achtergrond, rand, radius, 16 px inzet, een
   plakkende balk in de kaartkleur en een scrollende romp. Een zevende tab kost hier dus niets meer.

   De les die hier stond hoort bewaard, want ze zit nu in de fundering: de eerste poging was
   `padding: 0 12px`. Dat MAT correct — kinderen netjes 12 px binnen de rand — maar Dominique zag geen marge,
   en terecht: lege ruimte zonder rand leest niet als marge. Meten zei "goed", kijken zei "niet goed", en
   kijken had gelijk. */


/* De journaal-tab moet het SCHERM vullen en binnenin scrollen — de flex-keten doortrekken tot in onze eigen
   component.
   ⚠️ Dit is de schakel die ontbrak, en ze kostte bijna een verkeerde conclusie. De schil levert de keten
   correct af: .adm-fiche-tabinhoud-vullend staat op flex:1 met min-height:0, en élke voorouder daarboven ook.
   Onze wortel stond echter op `display:block; flex:0 1 auto; min-height:auto` en groeide gewoon mee met haar
   inhoud — 3114 px bij 33 mails, in een venster van 1324. Gevolg: de PAGINA scrolde in plaats van de lijst, en
   de tabstrook schoof mee uit beeld. Precies de valkuil waar 0.170.0 op strandde: geen bouwfout, geen falende
   test, wel een verkeerd scherm.
   Met twee mails viel het niet op, want dan paste alles toch — vandaar dat mijn eerste meting "pagina scrolt
   niet" zei. Gevonden op 16/08/2026 doordat Dominique vroeg om eens lange lijsten te bekijken.

   ⚠️⚠️ ACHTERHAALD SINDS 22/08/2026 — hieronder stond dat deze regel het probleem NIET oplost omdat de keten
   hógerop breekt in `.dxbl-tabs-content`. Dat klopte toen en klopt niet meer: de AppKit zet dat element sinds
   0.254.0 zelf op `display:flex; flex-direction:column; min-height:0`, en wij consumeren die versie (nagemeten
   in het pakket, de selector staat er 2×). De blokkade bleek trouwens `display: block` te zijn en niet
   `min-height` — DevExpress zette die zelf al op 0.

   Wat hieronder staat is dus GEEN omweg meer maar het app-deel van een gedeelde taak: de schil kan niet raden
   wélk kind van een tab de vaste kop is en welk de scrollende romp. Dat blijft app-kennis. Wat wél weg kan is
   de opsomming van klassenamen — ADM One stelde twee opt-in-klassen voor (`adm-vullend` / `adm-vast`) zodat een
   nieuwe tab een klasse op het element kost in plaats van een regel in twee lijsten in vijf apps. Ligt bij
   Dominique.

   Het oorspronkelijke bewijsmateriaal, bewaard omdat het uitlegt waaróm deze regels bestaan:

       .dxbl-tabs-content   display: block · flex-shrink: 0 · min-height: auto   hoogte 3114

   Dat element weigert te krimpen en zet de flex-eigenschappen van zijn kind buitenspel. Gevolg: bij 33 mails
   scrolt de PAGINA (1968 px overschot) in plaats van de lijst, en schuift de tabstrook mee uit beeld.

   Waarom ADM One dit niet zag: hun demo vult de tab met een FullHeight-GRID, en die begrenst zichzelf. Onze
   journaal-tabs zijn gewone lijsten die enkel groeien, en dan moet de keten het werk doen.

   Geprobeerd en niet volstaan: `.dxbl-tabs-content` overschrijven, en `.content-inner` als flex-kolom
   dwingen. Verder stapelen op DevExpress-interne elementen is precies de brosheid waar we vanmorgen bij de
   lade van weggelopen zijn. Dit hoort in AdmFichePagina thuis en is gemeld.

   ⚠️ Enkel in de fiche-context. In de lade scrollt het paneel zelf; daar mag onze wortel gewoon meegroeien. */
/* De hoogteketen van een journaal-tab stond hier tot 22/08/2026 als TWEE lijsten met vijf klassenamen: één
   die de tab liet vullen en één die alles onder de werkbalk liet scrollen. Elke nieuwe tab kostte twee regels,
   in vijf apps.

   Sinds AppKit 0.255.0 doen `adm-vullend` / `adm-vast` / `adm-scrollt` dat werk, en dragen alle zes de tabs ze.
   ⚠️ De schil kan dit niet blind: ze kan niet raden welk kind van een tab de vaste kop is en welk de scrollende
   romp. Dat blijft app-kennis — maar het is nu een klasse op het element in plaats van een naam in een lijst.

   Waarom het gat er was: `.dxbl-tabs-content` van DevExpress stond op `display: block` en zette de
   flex-eigenschappen van zijn kind buiten spel. Dat is in de AppKit rechtgezet; onze eigen nota daarover was
   zes dagen achterhaald voor iemand het opmerkte. */

/* Datumveld in een grid-werkbalk. Zonder breedte rekt een AdmDateEdit zich uit tot de volle rij en duwt
   het de grid omlaag; de filterkeuzelijsten ernaast brengen hun eigen breedte wel mee. */
.adm-filter-datum { display: inline-block; width: 150px; }

/* Bereikfilter (van/tot) in een filterrij-cel van de grid. Twee editors naast elkaar die samen de
   kolombreedte vullen; zonder min-width:0 duwt de flexbox ze breder dan de cel. */
.adm-bereik { display: flex; gap: .25rem; }
.adm-bereik > * { flex: 1 1 0; min-width: 0; }

/* ── Klantenportaal ──────────────────────────────────────────────────────────────────────────────────
   De huisstijl van de tenant, gestuurd door één variabele (--kp-kleur) die de schil server-side zet.
   Alles hier is bewust onafhankelijk van de backoffice-stijlen: dit scherm hoort bij het kantoor van de
   klant, niet bij ons. Mobiel-eerst, want een klant opent zo'n link vaak op zijn telefoon. */
.kp { min-height: 100vh; display: flex; flex-direction: column; background: #f6f7f9; }
.kp-breed { width: 100%; max-width: 62rem; margin-inline: auto; padding-inline: 1.25rem; }

.kp-kop { padding-block: 1.1rem; color: #fff; }
.kp-kop-effen { background: var(--kp-kleur); }
.kp-kop-verloop { background: linear-gradient(135deg, var(--kp-kleur), var(--kp-kleur-donker)); }
.kp-kop-licht { background: #fff; color: #1b1f24; border-bottom: 3px solid var(--kp-kleur); }
.kp-logo { max-height: 2.6rem; max-width: 14rem; object-fit: contain; }
.kp-naam { font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; }
.kp-taal a { color: inherit; text-decoration: none; opacity: .85; }
.kp-taal a:hover { opacity: 1; text-decoration: underline; }

.kp-inhoud { flex: 1 1 auto; padding-block: 2rem 3rem; }
.kp-voet { border-top: 1px solid #e4e7ea; background: #fff; padding-block: 1rem; color: #58606a; }
.kp-voet-link { color: var(--kp-kleur); text-decoration: none; }
.kp-voet-link:hover { text-decoration: underline; }

/* Welkomstblok */
.kp-welkom { background: #fff; border: 1px solid #e4e7ea; border-radius: 1rem; padding: 1.5rem 1.6rem;
             margin-bottom: 1.5rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.kp-welkom h1 { font-size: 1.4rem; font-weight: 650; margin: 0 0 .4rem; letter-spacing: -.015em; }
.kp-welkom p { margin: 0; color: #58606a; line-height: 1.55; }
.kp-dossier { display: inline-flex; align-items: center; gap: .45rem; margin-top: .9rem;
              background: var(--kp-kleur-licht); color: var(--kp-kleur-donker); border-radius: 2rem;
              padding: .3rem .85rem; font-size: .85rem; font-weight: 600; }

/* Voortgang */
.kp-voortgang { margin-top: 1.1rem; }
.kp-balk { height: .5rem; border-radius: 1rem; background: #e9edf1; overflow: hidden; }
.kp-balk > span { display: block; height: 100%; background: var(--kp-kleur); border-radius: 1rem;
                  transition: width .4s ease; }
.kp-voortgang-tekst { font-size: .85rem; color: #58606a; margin-top: .45rem; }

/* Documentkaarten */
.kp-lijst { display: grid; gap: .85rem; }
.kp-doc { background: #fff; border: 1px solid #e4e7ea; border-radius: .9rem; padding: 1rem 1.15rem;
          display: flex; align-items: flex-start; gap: 1rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.kp-doc.is-gevraagd { border-left: 4px solid var(--kp-kleur-rand); }
.kp-doc.is-geleverd { border-left: 4px solid #d99a2b; }
.kp-doc.is-ok      { border-left: 4px solid #2e9e5b; }
.kp-doc.is-nok     { border-left: 4px solid #d1495b; }
.kp-doc-tekst { flex: 1 1 auto; min-width: 0; }
.kp-doc-naam { font-weight: 600; }
.kp-doc-hint { color: #58606a; font-size: .875rem; margin-top: .15rem; }
.kp-doc-reden { color: #a83244; font-size: .875rem; margin-top: .35rem; }
.kp-bestanden { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.kp-bestand { background: #f2f4f7; border-radius: .5rem; padding: .2rem .55rem; font-size: .8rem; color: #48505a; }

.kp-status { flex: 0 0 auto; font-size: .78rem; font-weight: 650; border-radius: 2rem; padding: .25rem .7rem;
             white-space: nowrap; }
.kp-status.is-gevraagd { background: var(--kp-kleur-licht); color: var(--kp-kleur-donker); }
.kp-status.is-geleverd { background: #fdf3e2; color: #8a5d10; }
.kp-status.is-ok       { background: #e8f6ed; color: #1f6d3f; }
.kp-status.is-nok      { background: #fdecee; color: #a83244; }

/* Uploadzone */
.kp-drop { margin-top: .8rem; border: 1.5px dashed var(--kp-kleur-rand); border-radius: .75rem;
           padding: .9rem 1rem; text-align: center; color: #58606a; font-size: .875rem;
           background: #fcfdfe; transition: background .15s ease, border-color .15s ease; }
.kp-drop:hover, .kp-drop.is-over { background: var(--kp-kleur-licht); border-color: var(--kp-kleur); }
.kp-knop { background: var(--kp-kleur); color: #fff; border: 0; border-radius: .6rem; padding: .5rem 1.1rem;
           font-weight: 600; cursor: pointer; }
.kp-knop:hover { background: var(--kp-kleur-donker); }
.kp-knop[disabled] { opacity: .55; cursor: default; }

@media (max-width: 576px) {
  .kp-doc { flex-direction: column; gap: .6rem; }
  .kp-status { align-self: flex-start; }
}

/* Het voorbeeld in het beheerscherm: dezelfde schil, maar ingeperkt tot een kaartje. min-height van .kp op
   100vh zou hier een leeg scherm van een beeldschermhoogte geven. */
.kp-preview { border: 1px solid #e4e7ea; border-radius: .75rem; overflow: hidden; }
.kp-preview .kp { min-height: 0; }
.kp-preview .kp-breed { max-width: none; padding-inline: 1rem; }
.kp-preview .kp-inhoud { padding-block: 1.1rem 1.3rem; }
.kp-afmelden { background: transparent; border: 1px solid currentColor; color: inherit; opacity: .8;
               border-radius: .5rem; padding: .2rem .7rem; font-size: .82rem; cursor: pointer; }
.kp-afmelden:hover { opacity: 1; }
.kp-voorbeeldbalk { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: 1.1rem;
                    background: #fff8e6; border: 1px solid #f0dca8; color: #7a5b12; border-radius: .7rem;
                    padding: .6rem .9rem; font-size: .875rem; }

/* ── Online afspraken ─────────────────────────────────────────────────────────────────────────────────────
   De agenda krijgt een vaste werkhoogte: zonder hoogte groeit DxScheduler mee met zijn inhoud, en dan
   verspringt de pagina zodra er blokken bij komen. De legende-bolletjes dragen dezelfde twee kleuren als de
   etiketten in het scherm zelf (Vrij / Geboekt). */
.boeking-agenda { height: calc(100vh - 22rem); min-height: 26rem; }

.boeking-legende {
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    vertical-align: -1px;
    margin-right: .15rem;
}
.boeking-vrij    { background: #2E7D32; }
.boeking-geboekt { background: #606C76; }
.boeking-uit { background: transparent; border: 1px solid var(--bs-border-color); }

/* ── Binnengekomen via de boekingspagina ──────────────────────────────────────────────────────────────────
   Eén etiket verft één soort afspraak; de standaardweergave van DevExpress blijft voor al de rest staan.
   (Een sjabloon zou de weergave van ÉLKE afspraak vervangen — geprobeerd, en het oogde minder net.)

   Amber, en niet het grijs van "zonder verantwoordelijke": zo'n boeking was het bleekste blok op het scherm
   terwijl het het enige is dat om een beslissing vraagt. De streepjes zeggen "nog niet vast" ook wanneer de
   kleur wegvalt — op een afdruk, in hoog contrast, of voor wie kleuren niet uit elkaar houdt. */
/* ── Afwezigheid in de agenda (MAK10) ────────────────────────────────────────────────────────────────
   Gearceerde CELLEN, geen afspraken. Een verlof als afspraak in de agenda zetten zou betekenen dat je
   het kan verslepen, bewerken en per ongeluk als vergadering behandelen — en het zou meetellen in elke
   telling die over afspraken gaat. Dit verft de achtergrond via HtmlCellDecoration en laat de agenda
   verder met rust.

   Bewust GEEN volvlak maar diagonale strepen: op een gearceerde dag mag je nog altijd een afspraak
   zetten (we blokkeren niet, we tonen), dus de arcering moet onder een afspraak leesbaar blijven en er
   niet mee concurreren. De strepen zeggen bovendien "afwezig" ook wanneer de kleur wegvalt — op een
   afdruk, in hoog contrast, of voor wie kleuren niet uit elkaar houdt.

   ⚠️ De kleur komt uit `currentColor` en niet uit een vaste waarde. Dit scherm draait in licht én donker
   thema, en een vast grijs is in het ene te hard en in het andere onzichtbaar. Ik had hier eerst
   `--adm-tekst-zacht` staan; dat token BESTAAT NIET — de schil kent enkel --adm-canvas, --adm-card,
   --adm-card-border, --adm-accent, --adm-pos en --adm-neg. Een onbestaand token valt stil terug op zijn
   standaardwaarde, dus het zou er in beide thema's identiek uitzien en niemand had het gemerkt. */
.adm-afwezig {
    background-image: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, currentColor 14%, transparent) 0 6px,
        transparent 6px 12px) !important;
}

/* Kantoor dicht weegt zwaarder dan één iemand met verlof: dichtere strepen, zodat het onderscheid ook
   zichtbaar is wanneer beide op dezelfde dag vallen. */
.adm-afwezig-kantoor {
    background-image: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, currentColor 22%, transparent) 0 4px,
        transparent 4px 8px) !important;
}

.adm-boeking-bg {
    background-color: #B26A00 !important;
    background-image: repeating-linear-gradient(
        135deg, rgba(255, 255, 255, .14) 0 10px, rgba(255, 255, 255, 0) 10px 20px) !important;
    border-color: #8A5200 !important;
}

.adm-boeking-tekst { color: #fff !important; }

/* Geannuleerd door de bezoeker — enkel zichtbaar bij een afspraak die al toegewezen wás; stond er nog niemand
   op, dan is ze gewoon weg. Doorstreept en gedempt: ze mag niet meer meetellen als werk, maar ze moet wél
   opvallen bij wie ze in zijn agenda had staan. */
.adm-geannuleerd-bg {
    background-color: #8E2F2F !important;
    background-image: repeating-linear-gradient(
        135deg, rgba(0, 0, 0, .18) 0 6px, rgba(0, 0, 0, 0) 6px 12px) !important;
    border-color: #6B2323 !important;
    opacity: .85;
}

.adm-geannuleerd-tekst { color: #fff !important; text-decoration: line-through; }

/* "Geen klant gekozen" in de bovenbalk. Erft de ghost-vorm van .adm-topbar-action (AppKit 0.148.0) en zet er
   enkel een waarschuwingskleur op — niet rood: er is niets stuk, er ontbreekt een keuze. Zie de nota in
   AppTopBarActions.razor voor waarom deze melding in de bovenbalk staat en niet per scherm. */
.adm-geen-klant {
    color: var(--bs-warning-text-emphasis, #997404);
    background: var(--bs-warning-bg-subtle, #fff3cd);
    border: 1px solid var(--bs-warning-border-subtle, #ffe69c);
    text-decoration: none;
}
.adm-geen-klant:hover { filter: brightness(.97); text-decoration: none; }


/* Een BEREKENDE waarde die onder een kolom editors staat. Losse tekst lijnt niet vanzelf uit op de
   tekst ín een DevExpress-editor: die heeft 9 px binnenmarge en is 30 px hoog, losse tekst heeft geen
   marge en is 20 px hoog. Gemeten op de commissieschema-fiche (26/08/2026): het totaal begon 10 px te
   ver links en stond 5 px te hoog. Bootstrap heeft hier geen hulpklasse voor — `h-100` doet niets
   zolang de ouder geen expliciete hoogte heeft, en `ps-2` is 8 px in plaats van 9. */
.adm-berekende-waarde { display: flex; align-items: center; min-height: 30px; padding-left: 9px; }

/* Een DxTabs die de VOLLE HOOGTE doorgeeft aan zijn tabblad-inhoud.
   ⚠️ Zonder dit stopt de hoogte-keten bij `dxbl-tabs` zelf: dat element staat op `display: block` en
   `flex: 0 1 auto`, dus het krimpt naar zijn inhoud in plaats van mee te rekken. Gemeten op 26/08/2026 op
   /commissie/borderel: de houder was 1272 px, de tabs 1014, en er bleef 238 px onder de lijst ongebruikt —
   terwijl de grid zelf al netjes op FullHeight stond. `FullHeight` op een AdmGrid werkt dus niet vanzelf zodra
   er een tabblad tussen zit; de keten moet er doorheen.
   Vier schakels, en alle vier zijn nodig: de tabs zelf, het paneel, het actieve blad, en onze eigen wikkel. */
.adm-tabs-vol { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.adm-tabs-vol .dxbl-tabs-content-panel { flex: 1 1 auto; min-height: 0; }
.adm-tabs-vol .dxbl-tabs-content { display: flex; flex-direction: column; min-height: 0; }
.adm-tabblad-vol { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding-top: 1rem; }

/* Voorbeeldlijst in de pop-up "Nieuwe ronde": een ronde kan tientallen aanbrengers tellen (op WAVE tot 28),
   en dan groeit de pop-up buiten het scherm. Scrollen binnen de lijst houdt de knoppen eronder bereikbaar. */
.adm-borderel-voorbeeld { max-height: 260px; overflow-y: auto; }

/* Een blok binnen een AdmFichePagina dat de RESTHOOGTE neemt, zodat de lijst erin scrollt in plaats van de
   pagina. De AppKit levert de keten tot .adm-fiche (die is sinds 0.262.0 onvoorwaardelijk een hoogte-kolom);
   dit is de laatste schakel voor een fiche ZONDER tabs — .adm-fiche-tabinhoud doet hetzelfde werk voor een
   fiche mét tabs. Gebruikt op de borderel-fiche: 933 lijnen lieten anders de kop uit beeld schuiven. */
.adm-fiche-vulblok { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* De maandlijst onder de vooruitzicht-grafiek in de journaal-lade. Een aanbrenger met een lange staart heeft
   er tot 24; zonder eigen schuifbalk duwt die lijst de grafiek uit beeld. */
.adm-vooruitzicht-lijst { max-height: 260px; overflow-y: auto; }