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

.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); }
.nav-menu .nav-link.active { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); 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)- en :has(.adm-page-fill)-regels verderop. 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; }

#blazor-error-ui {
    display: none; position: fixed; bottom: 0; left: 0; right: 0;
    padding: 10px 16px; background: #fee; border-top: 1px solid #f5c2c7; z-index: 1100;
}
#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;
}

.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-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-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;
}
.adm-grid-fill {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.adm-grid-fill .adm-grid-bar { flex: 0 0 auto; }

/* Vol-hoogte WERKSCHERM (bv. boom links + grid rechts). `.adm-grid-fill` regelt enkel de grid zelf; dit
   regelt de pagina eromheen, zodat de rij op de VIEWPORT eindigt in plaats van op zijn inhoud.
   Gebruik: `adm-page-fill` op de buitenste div, `adm-fill-row` op de rij, `adm-fill-panel` op een paneel
   dat zijn kolom moet vullen. Ontsnapt automatisch aan de 1100px-leescap.
   (Vorm overgenomen uit de Damc-sessie, 21/07 — zie de opmerkingen hieronder voor de valkuilen.) */
.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;
}

/* Enkel vanaf lg. Daaronder stapelen de kolommen en hoort de pagina gewoon te scrollen: twee panelen van
   elk een halve schermhoogte is op een telefoon onbruikbaar. */
@media (min-width: 992px) {
    .adm-page-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; }

    /* Zet `adm-fill-row` op de rij die moet meerekken — bewust een eigen klasse en niet elke `.row`,
       zodat een gewone rij ergens op de pagina niet ongewild flex wordt.
       `nowrap` in plaats van een hoogte op de kolommen: met wrap rekken die op tot hun INHOUD (een grid
       van 296 rijen wordt dan 1345px hoog in een vak van 669px), en een expliciete hoogte zet de
       verticale gutter er 16px naast. */
    .adm-page-fill .adm-fill-row { flex: 1; min-height: 0; flex-wrap: nowrap; }
    .adm-page-fill .adm-fill-row > [class*="col-"] { display: flex; flex-direction: column; min-height: 0; }

    /* Paneel dat zijn kolom vult; de inhoud scrollt intern. */
    .adm-page-fill .adm-fill-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .adm-page-fill .adm-fill-panel > .card-body { flex: 1; min-height: 0; overflow: auto; }
}

/* Onder lg grijpt `adm-page-fill` niet: de kolommen stapelen en de pagina scrollt, en dat hoort zo.
   Maar een lang EERSTE paneel eet dan het halve scherm op vóór je het tweede ziet — een categorieboom met
   honderd takken duwt de lijst volledig onder de vouw. Vandaar een cap: het paneel scrollt intern, de
   pagina blijft bruikbaar. Is het paneel kort, dan doet deze regel niets (het is een maximum, geen hoogte).
   (Gemeten door de Damc-sessie op een boom met 117 takken.) */
@media (max-width: 991.98px) {
    .adm-page-fill .adm-fill-panel > .card-body { max-height: 40vh; overflow: auto; }
}
.adm-grid-fill .dxbl-grid { flex: 1; min-height: 0; }

/* 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. */
.ab-board { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 8px; }
.ab-board-col { flex: 0 0 260px; max-width: 260px; }
.ab-board-head { display: flex; align-items: baseline; 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-grid { border: 1px solid var(--bs-border-color); border-radius: 0 0 6px 6px; }
/* Een lege kolom moet een zichtbaar doelvlak blijven — anders is er niets om naartoe te slepen. */
.ab-board-grid .dxbl-grid-empty-data-row td,
.ab-board-grid .dxbl-grid { min-height: 90px; }
.ab-board-sub { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    color: var(--bs-secondary-color); padding: 6px 8px 2px; }
/* Kolomkoppen verbergen op de borden. ⚠️ DxGrid.ShowColumnHeaders bestaat als parameter maar verbergt de
   koprij NIET (getest, AppKit 0.27.0 / DevExpress Fluent) — vandaar via CSS. Op een bord zijn vier keer
   "Wagen | Nummerplaat" boven elkaar alleen maar ruis; de kolomtitel staat al in de kop erboven. */
.ab-board-grid .dxbl-grid-header-row { display: none; }

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

/* === Bijlagen bij een opdracht ================================================================= */
.ab-attachments { list-style: none; padding: 0; margin: 0; }
.ab-attachments li {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid var(--bs-border-color);
}
.ab-attachments li:last-child { border-bottom: none; }
.ab-attachment-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Het jaar/week-pad uit de legacy. Klein en grijs: het is herkomst, geen inhoud. */
.ab-attachment-src { font-size: .78rem; color: var(--bs-secondary-color); flex: 0 0 auto; }

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

/* === Intake-logboek ============================================================================ */
.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); }

/* Eigen kleuren en geen text-bg-*: het DevExpress-thema herdefinieert de Bootstrap-variabelen, waardoor
   die combinaties in het donkere thema onleesbaar worden. color-mix houdt ze in beide thema's leesbaar. */
.ab-intake-mislukt { border-left: 4px solid var(--bs-danger);
    background: color-mix(in srgb, var(--bs-danger) 8%, var(--bs-body-bg)); }
.ab-intake-wacht { border-left: 4px solid var(--bs-warning);
    background: color-mix(in srgb, var(--bs-warning) 10%, var(--bs-body-bg)); }
.ab-intake-ok { border-left: 4px solid var(--bs-success);
    background: color-mix(in srgb, var(--bs-success) 8%, var(--bs-body-bg)); }
.ab-intake-genegeerd { border-left: 4px solid 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; }
.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-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);
}

/* === Notities per vrachtwagen ================================================================== */
.ab-notities { display: grid; gap: 12px; max-width: 900px; }
.ab-notitie {
    display: grid; grid-template-columns: 160px 1fr auto; gap: 12px; align-items: start;
    padding: 12px; border: 1px solid var(--bs-border-color); border-radius: 8px;
}
.ab-notitie-truck { font-weight: 600; padding-top: 6px; }
@media (max-width: 767.98px) {
    /* Onder tablet stapelen: drie kolommen van 160px naast elkaar is op een telefoon onleesbaar. */
    .ab-notitie { grid-template-columns: 1fr; }
    .ab-notitie-truck { padding-top: 0; }
}

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