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