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

.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(--bs-border-color);
    background: var(--bs-body-bg);
}
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--bs-body-color); }

/* Het merkicoon linksboven (30/09/2026). De AppKit-MainLayout tekent daar een vast rasterpictogram en heeft geen
   logo-optie, dus verbergen we dat en tonen we favicon.svg — hetzelfde patroon als CreditSoft, Nimble, CleanOps,
   DAMC, Huis Jacobs en Cares. Zes kopieën van dezelfde regels: gemeld als kandidaat in
   adm-appkit/docs/promotiekandidaten.md ("een logo-slot in de AppKit-schil"). */
.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;
}

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

.sidebar {
    flex: 0 0 220px; overflow-y: auto; padding: 12px 8px;
    border-right: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.nav-menu { display: flex; flex-direction: column; gap: 2px; }
.nav-menu .nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; border-radius: 8px;
    color: var(--bs-body-color); text-decoration: none; font-size: .92rem;
}
.nav-menu .nav-link:hover { background: var(--bs-secondary-bg); }
/* ⚠️ `--adm-accent-text`, niet `--bs-primary` (AppKit 0.461.0): de accentkleur is voor VLAKKEN; als tekst op haar eigen
   tint haalt ze de contrastnorm bij tien van de elf accenten niet. Zie de kop van adm-shell.css in het pakket. */
.nav-menu .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--adm-accent-text); font-weight: 600; }

/* ⚠️ min-height: 0 is niet optioneel. Zonder die regel krimpt dit flex-item niet onder zijn inhoudshoogte:
   het contentgebied groeit voorbij de viewport en de HELE pagina scrollt in plaats van enkel dit vak.
   Zet ze op .content ZELF — enkel op .content-inner (zoals de :has-regels verderop) repareert de binnenkant
   en laat de buitenkant stuk. */
.content { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; }

/* De max-width is een bewuste LEESCAP voor formulieren en tekstpagina's: regels van 2000px lezen niet.
   Pagina's die de ruimte moeten vullen (grid, tweekoloms-werkscherm) ontsnappen eraan via de
   :has(.adm-grid-fill)-regels verderop en de :has(.adm-page-fill)-regel in adm-shell.css. Schrap deze cap dus niet — voeg een
   uitzondering toe als je een nieuw vol-formaat patroon bouwt. */
.content-inner { padding: 20px 24px; max-width: 1100px; }

/* ⚠️ VLAK EN TEKST UIT DEZELFDE FAMILIE (12/10/2026). Tot dan had de balk een VAST licht vlak (#fee) zonder eigen
   tekstkleur: in donker erfde de zin de lichte tekstkleur van het thema en de twee links de lichte accentkleur — wit op
   bijna-wit (gemeten: 1,16 en 1,87–2,40 over de elf accenten; norm 4,5). De balk verschijnt enkel wanneer het circuit
   sterft, precies wanneer iemand moet kunnen lezen wat er aan de hand is. Gemeld door de CEOS-sessie.
   Het thema levert vlak en tekst als paar, in licht en in donker; de terugval is hetzelfde paar in vaste kleuren. De
   links nemen de tekstkleur van de balk over (de accentkleur is niet voor dit vlak gekozen) en zijn onderlijnd.
   Bewaakt door ContrastBrowserTests in de AppKit, die de balk eerst zichtbaar maakt: op display:none meet niemand iets.
   Overgenomen uit het sjabloon bij 0.1.89 (AppKit 0.463.0) — drift-check zwijgt hierover, want app.css staat in
   .driftignore. */
#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    padding: 10px 16px; z-index: 1100;
    background: var(--bs-danger-bg-subtle, #fee);
    color: var(--bs-danger-text-emphasis, #58151c);
    border-top: 1px solid var(--bs-danger-border-subtle, #f5c2c7);
}
#blazor-error-ui .reload, #blazor-error-ui .dismiss { margin-left: 12px; cursor: pointer; color: inherit; text-decoration: underline; }

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

.adm-grid-search {
    width: 300px;
    max-width: 100%;
}

.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-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).

   ⚠️⚠️ HIER STONDEN VIER REGELS MEER, en ze zijn op 18/09/2026 geschrapt: `.adm-grid-fill`,
   `.adm-grid-fill .adm-grid-body`, `.adm-grid-fill .adm-grid-bar` en `.adm-grid-fill .dxbl-grid`.
   Die levert de FUNDERING zelf, in adm-shell.css — woordelijk dezelfde declaraties, gemeten met een
   selector-voor-selector-vergelijking. En adm-shell.css laadt als [11], onze app.css als [12], dus ONZE
   kopie won. Dat is niet zichtbaar zolang de waarden gelijk zijn; het wordt zichtbaar op de dag dat de
   AppKit die declaraties repareert en die reparatie hier nooit aankomt. De AppKit waarschuwt er zelf
   voor in het commentaar erboven: "wie het element rendert, stylt het".

   De Cares-sessie vond diezelfde kopie bij zich op 18/09 en meldde het; wij bleken de derde app.
   Er blijven hieronder DRIE regels staan, en die zijn wél van ons: de fundering kent geen
   `.content:has(...)` — die grijpt haar schil van buitenaf aan en dat kan enkel de 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-pagina's vullen de volle breedte, niet de 1100px-leescap */
    display: flex;
    flex-direction: column;
}
.content:has(.adm-grid-fill) > .dxbl-btn {
    align-self: flex-start;
}

/* Vol-hoogte WERKSCHERM (`adm-page-fill`, `adm-fill-row`, `adm-fill-panel`): stond hier tot de bump naar AppKit 0.449.2
   (08/10/2026) en zit sinds 0.435.0 in adm-shell.css — met ons herstel van 30/09 erin (de `overflow: hidden` binnen de
   lg-query; daarvoor was op 900px alles onder de vouw onbereikbaar). Zelfde reden als bij de grid-regels hierboven: een
   kopie hier wint van de fundering en houdt haar volgende reparatie tegen. Declaratie voor declaratie vergeleken vóór het
   schrappen. */

/* 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 Autosbart.AppKit.Web. */

/* Nav: gebruiker + afmelden onderaan. */
.nav-spacer { flex: 1 1 auto; min-height: 12px; }
.nav-user { padding: 8px 12px; font-size: .82rem; color: var(--bs-secondary-color); font-weight: 600; }
.nav-section { padding: 12px 12px 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--bs-secondary-color); }

/* === Release notes ("Wat is nieuw") ============================================================ */
.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; }
/* === Sleepborden (planning per regio / per vrachtwagen) ========================================= */
/* Kolommen van vaste breedte die naast elkaar aflopen. Bewust géén horizontale scroll op de pagina:
   met 18 vrachtwagens wil je kunnen scrollen binnen het bord, niet de hele schil zien schuiven. */
/* Het bord: de voorraad VAST links, de kolommen (regio's of wagens) in hun eigen vak dat opzij scrolt — zoals de
   legacy (grdUnassigned in 'west', de rest in de scrollbox scrollRight). Tot 30/09/2026 scrolde de voorraad mee,
   en dan kon je niets slepen naar een kolom buiten beeld. */
.ab-board { display: flex; gap: 12px; align-items: flex-start; }
.ab-board-kolommen { display: flex; gap: 12px; align-items: flex-start; flex: 1; min-width: 0;
    overflow-x: auto; padding-bottom: 8px; }
/* 300px: de kaart draagt sinds 30/09/2026 de adressen (de legacy: C_COL_WIDTH = 320). */
.ab-board-col { flex: 0 0 300px; max-width: 300px; }
.ab-board-head { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px 6px 0 0;
    background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); border-bottom: none; }
.ab-board-head .ab-board-tel { color: var(--bs-secondary-color); font-size: .8rem; }
.ab-board-sub { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--bs-secondary-color); padding: 6px 8px 2px; border-inline: 1px solid var(--bs-border-color); }

.ab-board-zoek { padding: 6px; border-inline: 1px solid var(--bs-border-color); background: var(--bs-secondary-bg); }
.ab-keuze-hint { min-height: 1.5rem; margin-bottom: .5rem; font-size: .85rem; color: var(--adm-accent-text); }

/* Het bord vult het scherm (adm-page-fill, 30/09/2026): de volle breedte in plaats van de leescap van 1100px — daar
   pasten 3½ kolommen — en de schermhoogte, met een eigen scrollbalk per kolom en de kop vast bovenaan, zoals de
   legacy (elke grid scrolde apart). Daarvoor was de voorraad 9.667px hoog en scrolde de HELE pagina: een kaart van
   onderaan naar een wagen bovenaan slepen vroeg om scrollen tijdens het slepen. Enkel vanaf lg, zoals adm-page-fill
   zelf: daaronder stapelt en scrolt de pagina gewoon. */
@media (min-width: 992px) {
    .adm-page-fill > .ab-board { flex: 1; min-height: 0; align-items: stretch; }
    .adm-page-fill .ab-board-kolommen { align-items: stretch; min-height: 0; }
    .adm-page-fill .ab-board-col { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
    /* ⚠️ De onderdelen van een kolom KRIMPEN NIET: de kolom scrolt. Zonder deze regel kromp een vak tot zijn
       min-height (90px) en liepen de kaartjes eruit, over het volgende vak — gemeld door Dominique met een afdruk
       (30/09/2026: de Fiat Doblo half onder het kaartje eronder); gemeten: 3 vakken, o.a. 728px hoog met 1165px inhoud. */
    .adm-page-fill .ab-board-col > * { flex-shrink: 0; }
    .adm-page-fill .ab-board-kop { position: sticky; top: 0; z-index: 2; background: var(--bs-body-bg); }
}

/* === Planborden: vakken en kaartjes (30/09/2026) ===============================================
   Eigen HTML en gewoon slepen uit de browser, geen DxGrid — zie Components/BordVak.razor. */
.ab-vak { border: 1px solid var(--bs-border-color); min-height: 90px; padding: 6px;
    display: flex; flex-direction: column; gap: 6px; background: var(--bs-body-bg); }
.ab-board-col > .ab-vak:last-child { border-radius: 0 0 6px 6px; }
/* Een leeg vak blijft een zichtbaar doelvlak — anders is er niets om naartoe te slepen. */
.ab-vak-leeg { color: var(--bs-secondary-color); font-size: .8rem; font-style: italic; padding: 4px 2px; }
/* Tijdens een sleep: waar kan het naartoe (gestreept), en waar hangt het nu boven (blauw). */
.ab-vak-kandidaat { border-style: dashed; }
.ab-vak-doel { outline: 2px solid var(--bs-primary); outline-offset: -2px;
    background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg)); }
/* Het klik-alternatief: er is iets gekozen in een ander vak, een klik hier zet het neer. */
.ab-vak-klikdoel { cursor: copy; }
.ab-vak-klikdoel:hover { background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg)); }

.ab-kaart { position: relative; padding: 5px 8px; font-size: .78rem; line-height: 1.35;
    border: 1px solid var(--bs-border-color); border-radius: 6px; background: var(--bs-body-bg);
    /* De klantkleur als streep links, en niet als tekstkleur zoals de legacy: 5 van de 19 kleuren (CCFFCC,
       FFCC99, 00FFFF, 00FF00, FFCC00) zijn als tekst onleesbaar op een licht vlak. */
    border-left: 5px solid var(--ab-klantkleur, var(--bs-border-color));
    cursor: grab; user-select: none; overflow-wrap: anywhere; }
.ab-kaart:hover { box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
.ab-kaart:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.ab-kaart-gekozen { box-shadow: 0 0 0 2px var(--bs-primary); }
.ab-kaart-gekozen:hover { box-shadow: 0 0 0 2px var(--bs-primary), 0 1px 6px rgba(0, 0, 0, .12); }
.ab-kaart-sleept { opacity: .45; }
/* Een kaartje dat je niet sleept — Wagen zoeken toont het in een gridcel (01/10/2026). */
.ab-kaart-los { cursor: default; }
.ab-kaart-titel { font-weight: 600; font-size: .8rem; margin-bottom: 1px; }
.ab-kaart-regel { color: var(--bs-secondary-color); }
.ab-kaart-klant { color: var(--bs-body-color); }
.ab-kaart-vlag { display: inline-block; margin-right: 4px; padding: 0 5px; border-radius: 3px;
    font-size: .68rem; font-weight: 600; color: #fff; background: var(--adm-danger-fill, var(--bs-danger)); vertical-align: 1px; }
/* De invoeglijn: hier landt het gesleepte (vóór deze kaart, of achter de laatste). */
.ab-invoeg-voor::before, .ab-invoeg-na::after { content: ""; position: absolute; left: -1px; right: -1px;
    height: 3px; border-radius: 2px; background: var(--bs-primary); pointer-events: none; }
.ab-invoeg-voor::before { top: -5px; }
.ab-invoeg-na::after { bottom: -5px; }

/* De stand van een kaart in een wagenvak — de kleuren van de legacy (UniDbGridDrawColumnCell). */
:root {
    --ab-stand-gepland: #CFD8DC; --ab-stand-uitgenodigd: #FFE0B2;
    --ab-stand-bevestigd: #C8E6C9; --ab-stand-geweigerd: #FFCDD2;
}
[data-bs-theme="dark"] {
    --ab-stand-gepland: #37474F; --ab-stand-uitgenodigd: #5D4225;
    --ab-stand-bevestigd: #2E4D30; --ab-stand-geweigerd: #5C2B2F;
}
.ab-stand-gepland { background: var(--ab-stand-gepland); }
.ab-stand-uitgenodigd { background: var(--ab-stand-uitgenodigd); }
.ab-stand-bevestigd { background: var(--ab-stand-bevestigd); }
.ab-stand-geweigerd { background: var(--ab-stand-geweigerd); }
.ab-stand-staal { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px;
    border: 1px solid var(--bs-border-color); margin-right: 4px; }

/* De notitie van een wagen op die dag, onder zijn kop — de gele briefjes van de legacy. */
.ab-wagennotitie { display: flex; align-items: flex-start; gap: 4px; padding: 4px 6px 4px 8px; font-size: .78rem;
    border-inline: 1px solid var(--bs-border-color); background: color-mix(in srgb, #FFE082 35%, var(--bs-body-bg)); }
.ab-wagennotitie-tekst { flex: 1; white-space: pre-wrap; overflow-wrap: anywhere; }
.ab-wagennotitie-leeg { flex: 1; color: var(--bs-secondary-color); font-style: italic; }

/* === Dashboard (01/10/2026) ==================================================================== */
/* Kerncijfers in VASTE kolommen — overgenomen van Cares (.tegelrij, 30/09/2026): de tegelgroep van de fundering laat tegels
   doorlopen zolang ze passen, en dan staat er bij een andere schermbreedte een losse tegel op een eigen rij. Vier kolommen,
   twee op een smal scherm, één op een telefoon. */
.adm-metric-group.ab-tegelrij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
@media (max-width: 991.98px) { .adm-metric-group.ab-tegelrij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .adm-metric-group.ab-tegelrij { grid-template-columns: minmax(0, 1fr); } }
.ab-dash-kop { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--bs-secondary-color); margin: 1.5rem 0 .6rem; }
.ab-dash-uitleg { font-size: .8rem; color: var(--bs-secondary-color); margin: .4rem .1rem 0; }
.ab-dash-bij { font-size: .8rem; font-weight: 500; color: var(--bs-secondary-color); margin-left: .25rem; }
/* Kaarten "wat aandacht vraagt": een raster met gap, geen Bootstrap-.row (Cares: de negatieve marge gaf een schuifbalk). */
.ab-dash-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 12px; }
.ab-dash-kaartkop { display: flex; align-items: center; gap: 8px; margin-bottom: .5rem; }
.ab-dash-kaartkop h3 { font-size: .95rem; font-weight: 600; margin: 0; }
.ab-dash-leeg { color: var(--bs-secondary-color); font-style: italic; margin: .25rem 0 0; }
.ab-dash-tabel { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ab-dash-tabel th { font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); padding: 4px 6px; text-align: left; }
.ab-dash-tabel td { padding: 6px; border-top: 1px solid var(--bs-border-color); vertical-align: top; }
.ab-dash-tabel tbody tr { cursor: pointer; }
.ab-dash-tabel tbody tr:hover td { background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-body-bg)); }
.ab-dash-tabel .ab-dash-getal { text-align: right; white-space: nowrap; }
.ab-dash-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: .6rem; }
.ab-dash-filter .ab-dash-uitleg { margin: 0; }
/* Grafieken in een raster met gap (Cares .productie-raster); de doorlooptijd over de volle breedte. */
.ab-dash-grafieken { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 12px; margin-top: 12px; }
.ab-dash-grafieken > .ab-dash-breed { grid-column: 1 / -1; }

/* === Welkompagina ============================================================================== */
/* ⚠️ Deze klassen stonden hier NIET toen Home.razor ze begon te gebruiken (27/08/2026). De markup is
   overgenomen uit CreditSoft/Nimble, de opmaak eronder niet — met als gevolg een pagina die bouwt,
   rendert, en er als een prototype uitziet. `dotnet build` zegt daar niets over en de guardrail-tests
   ook niet: een klasse zonder regels is geen fout, gewoon niets.
   Gevonden doordat de ADM One-sessie hetzelfde bij zichzelf tegenkwam en het meldde. */
.rn-page-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.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; }

/* Kleurstaal in de klantenlijst: toont meteen wat er op het planbord verschijnt. */
.ab-kleurstaal {
    display: inline-block; width: 18px; height: 18px; border-radius: 4px;
    border: 1px solid var(--bs-border-color); vertical-align: middle;
}

/* Fichepagina: leescap, zodat velden niet over de volle breedte uitrekken. */
.ab-fiche { max-width: 760px; }

/* === Cijfertegels van Vraagprognose =============================================================
   Tot 30/09/2026 ook de tegels van het Intake-logboek, met een kleurklasse per uitkomst (.ab-intake-mislukt …).
   Dat scherm gebruikt sindsdien AdmMetricGroup uit de fundering, en de kleurklassen zijn weg. Vraagprognose
   gebruikt de basistegel nog — om te zetten in zijn eigen ronde. (De klassenaam draagt nog "intake".) */
.ab-intake-telling { display: flex; flex-wrap: wrap; gap: 12px; }
.ab-intake-tegel {
    min-width: 110px; padding: 10px 14px; border-radius: 8px;
    border: 1px solid var(--bs-border-color); background: var(--bs-body-bg);
}
.ab-intake-aantal { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.ab-intake-label { font-size: .8rem; color: var(--bs-secondary-color); }

/* === Externe bevestigingspagina ================================================================= */
/* Staat buiten de shell (EmptyLayout): geen menu, geen zijbalk. Wie hier komt, klikte op één link in
   één mail en heeft één ding te doen. */
.ab-bevestiging { max-width: 640px; margin: 48px auto; padding: 0 20px; }
.ab-bevestiging h1 { font-size: 1.5rem; margin-bottom: 1.25rem; }
/* Het logo bovenaan (01/10/2026), zoals de legacy. */
.ab-bevestiging-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 1.75rem; font-size: 1.15rem; font-weight: 600; }
.ab-bevestiging-kop img { width: 40px; height: 40px; }
/* Het voorbeeld in Beheer → Bevestigingspagina: dezelfde pagina, zonder de ruimte rondom. */
.ab-bevestiging-voorbeeld { margin: 0 auto; }
.ab-bevestiging-gegevens {
    display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 18px;
    margin: 1.5rem 0; padding: 16px; border-radius: 8px; background: var(--bs-tertiary-bg);
}
.ab-bevestiging-gegevens dt { font-weight: 600; }
.ab-bevestiging-gegevens dd { margin: 0; }
.ab-bevestiging-opmerking { margin-top: 1.5rem; }
.ab-bevestiging-opmerking label { display: block; font-weight: 600; margin-bottom: .35rem; }
.ab-bevestiging-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }
.ab-bevestiging-dank { font-size: 1.1rem; font-weight: 600; }
.ab-bevestiging-gesloten {
    margin-top: 1.5rem; padding: 12px 14px; border-radius: 8px;
    border-left: 4px solid var(--bs-secondary-color); background: var(--bs-tertiary-bg);
}

/* ── Conversiescherm ─────────────────────────────────────────────────────────
   Het verslag komt als platte tekst uit dezelfde Schrijf() die de commandolijn
   gebruikt — kolommen uitgelijnd met spaties. Vandaar een vaste-breedte-blok:
   een proportioneel lettertype zou de tabel doen scheefzakken. */
.ab-conversie-verslag {
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    padding: 1rem;
    font-size: .8125rem;
    line-height: 1.45;
    overflow-x: auto;
    white-space: pre;
}

.ab-conversie-voortgang {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .375rem;
    color: var(--bs-secondary-color, #6c757d);
}

/* ── Historiekpaneel op een fiche ─────────────────────────────────────────────────────────────────────
   Eén regel per wijziging: wanneer, wat er gebeurde, door wie — en daaronder de velden met hun oude en
   nieuwe waarde. Bewust smal gehouden: dit staat ONDER het formulier en mag de fiche niet domineren. */
.ab-historiek { list-style: none; padding: 0; margin: 0; max-width: 900px; }
.ab-historiek > li {
    padding: .5rem 0;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    font-size: .875rem;
}
.ab-historiek > li:last-child { border-bottom: 0; }
.ab-historiek-wanneer { color: var(--bs-secondary-color, #6c757d); margin-right: .5rem; }
.ab-historiek-wie { color: var(--bs-secondary-color, #6c757d); margin-left: .5rem; }

/* De actie krijgt kleur zodat "verwijderd" opvalt tussen twintig wijzigingen. */
.ab-historiek-actie { font-weight: 600; }
.ab-historiek-actie.is-nieuw { color: var(--adm-success-text); }
.ab-historiek-actie.is-weg { color: var(--adm-danger-text); }
.ab-historiek-actie.is-wijziging { color: var(--adm-accent-text); }

.ab-historiek-velden { list-style: none; padding: 0 0 0 1rem; margin: .25rem 0 0; }
.ab-historiek-velden > li { color: var(--bs-body-color); padding: .1rem 0; }

/* Het vinkje in de smalle ja/nee-kolommen van de opdrachtenlijst (Depa, n.Verr., Gemaild, Bevest.).
   Bewust geen kruisje bij "nee": twintig kruisjes onder elkaar lezen als een probleem, terwijl dat
   meestal de normale toestand is. De legacy laat het vakje ook leeg. */
.ab-vink {
    color: var(--adm-success-text);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}


/* === De kleuren van de legacy-opdrachtenlijst (PlanningMain.pas:790-804, volledigheidsronde 01/10/2026 R2) ==============
   Delphi schrijft kleuren als $00BBGGRR: $009AF8F3 = #F3F89A (target delivery, de hele rij), $00F3F7DF = #DFF7F3 (de
   locatie van de partij die verwittigd wordt), $00B4C8DC = #DCC8B4 (de aanvraagdatum van een OpenLane-opdracht).
   De cel kleurt via een merkteken IN de cel en td:has(): DxGrid geeft een <td> geen eigen klasse zonder CustomizeElement,
   en dat zet AdmGrid al voor de rij (RijKlasse). De celregels staan NA de rijregel, zodat ze erboven winnen — zoals in
   de legacy, waar de celkleur na de rijkleur gezet wordt. */
:root { --ab-doellevering: #F3F89A; --ab-melden: #DFF7F3; --ab-openlane: #DCC8B4; }
[data-bs-theme="dark"] { --ab-doellevering: #4A4A1C; --ab-melden: #1F4440; --ab-openlane: #4E3F2E; }
.ab-rij-doellevering > td { background-color: var(--ab-doellevering); }
td:has(> .ab-cel-melden) { background-color: var(--ab-melden); }
td:has(> .ab-cel-openlane) { background-color: var(--ab-openlane); }

/* De klikbare cellen van de opdrachtenlijst (R3, 01/10/2026 — gridPlanningBrowseCellClick van de legacy): een lege cel
   "Gepland" of "Bevest." toont bij het aanwijzen een vaag vinkje; "Taal" en "Gepland op" openen het snelle venster. */
.ab-vinkknop { display: block; width: 100%; min-height: 1.4em; cursor: pointer; border-radius: 3px; }
.ab-vinkknop:hover { background: var(--bs-tertiary-bg); }
.ab-vinkknop:hover::after { content: "\2713"; opacity: .35; }
.ab-snelcel { display: block; width: 100%; cursor: pointer; }
.ab-snelcel:hover { text-decoration: underline dotted; }

/* Een veld met knoppen ernaast (opdrachtfiche: klant, contactpersoon, link naar de wagen — R5/R6). Het veld neemt de
   ruimte, de knoppen hun eigen breedte. Een eigen klasse en geen flex-grow-1: dat is in de actiebalk van een fiche een
   bekende valkuil (DeployChecklist), en hier is het een veldrij. */
.ab-veld-met-knoppen { display: flex; gap: .5rem; align-items: flex-start; }
.ab-veld-met-knoppen > :first-child { flex: 1 1 auto; min-width: 0; }
/* …en de knoppen KRIMPEN NIET: zonder dit brak "Testmail versturen" over twee regels (01/10/2026, Mailsjablonen). */
.ab-veld-met-knoppen > :not(:first-child) { flex: 0 0 auto; }