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); }
/* ⚠️ `--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)-regels in adm-shell.css. Een FICHE heeft haar eigen cap
   (zie de :has(.adm-fiche)-regel 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; }

/* ⚠️ 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. */
#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-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;
}

/* Op een pagina met een FICHE bepaalt de fiche haar eigen breedte (.adm-fiche: max-width var(--adm-fiche-breedte, 1100px)
   in de AppKit), niet de leescap van de pagina.
   ⚠️ Waarom (15/10/2026, gezien door Dominique, gemeten en voorgesteld door CleanOps, beslist door Dominique): de leescap
   hierboven maakte een fiche bij het openen 1052 px breed (1100 min 2×24 rand), en de vulrasterregel hierboven hief ze op
   zodra er ERGENS een FullHeight-raster in de pagina stond. Een raster in een fichetabblad (het vlootadvies van Huis
   Jacobs, 13/09) komt pas in de pagina bij de eerste klik op dat tabblad: de fiche sprong dan van 1052 naar 1100 px en
   bleef zo. Nu is een fiche van bij het openen 1100 px — de breedte die ze na de klik al kreeg. Lijstpagina's, brede
   fiches (.adm-fiche-breed) en fiches zonder raster in een tab veranderen verder niet (gemeten bij CleanOps op 1440 px). */
.content:has(.adm-fiche) > .content-inner {
    max-width: none;
}
.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 (`adm-page-fill`, `adm-fill-row`, `adm-fill-panel`): sinds AppKit 0.435.0 in adm-shell.css.
   ⚠️ Zet de regels hier NIET terug. De vlootversie die hier stond, droeg de `overflow: hidden` op .content BUITEN de
   media query: onder 992px scrolde de pagina dan niet (Auto's Bart, 30/09/2026 — 62.387px bord, alles onder de vouw
   onbereikbaar). Een app-regel wint van de fundering, en zo erfde elke nieuwe app de fout opnieuw. */
.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: de stijl staat in het AppKit-pakket (Adm.AppKit.Web, AdmLoginTweeluik.razor.css), niet hier. */

/* 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; }
/* Regelbank (plak 2): de tekst van een regelboek in een vaste letterbreedte, en de proefdraai met kleur per rij. */
.cm-yaml textarea { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; }
.cm-proef-afwijkend { background-color: var(--bs-danger-bg-subtle); }
.cm-proef-verschuift { background-color: var(--bs-warning-bg-subtle); }
/* Dossierscherm (plak 5): DevExpress zet formulierlabels op nowrap + overflow hidden, waardoor een lang label (bv. "prime
   d'assurance solde restant dû dans le crédit") over het label ernaast loopt. Zelfde omweg als Nimble (.fiche-grid,
   adm-nimble/wwwroot/app.css, gemeten: 84px overlap); gemeten hier 31/10/2026: label 318px breed in een kolom van ~250px. */
.cm-dossier-stap .dxbl-fl-cpt {
    white-space: normal !important;
    overflow: visible !important;
}