/* ============================================================
   Hoofdstuk Administratie (02-10): de hoofdstukbalk onder de
   contextbalk en het overzichtsscherm. Alleen bestaande tokens,
   licht en donker via de tokens. Op telefoonbreedte vouwt de
   balk en staan de blokken onder elkaar, nooit horizontaal
   scrollen. De tegels komen uit fi-rapport.css (fr-tegel).
   ============================================================ */

/* ---- hoofdstukbalk ---- */
.ad-balk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex-shrink: 0; min-height: 42px; padding: 4px clamp(20px, 3vw, 40px); background: var(--surface); border-bottom: 1px solid var(--line); }
.ad-balk__kop { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.ad-balk__items { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.ad-balk__item { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid transparent; font-size: 12.5px; color: var(--text-2); text-decoration: none; white-space: nowrap; }
.ad-balk__item:hover { color: var(--text); background: var(--bg-2); }
.ad-balk__item.is-on { color: var(--text); font-weight: 500; border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.ad-balk__item:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
html.is-ingeklapt .ad-balk { min-height: 32px; padding-top: 2px; padding-bottom: 2px; }
html.is-ingeklapt .ad-balk__item { height: 26px; font-size: 12px; }

/* ---- overzicht ---- */
/* 17-10 (meldpunt Max): alle blokken even breed (een kolom van het raster) en per rij even hoog.
   Elk blok beslaat vier rijen van het raster via subgrid (kop, tegels, toelichting, knoppen),
   zodat de kop, de getallen en de knoppen in alle blokken van een rij op dezelfde hoogte staan.
   Zonder subgrid (oude browser) blijft het een gewone kaart met de vier delen onder elkaar.
   Op telefoonbreedte komt het raster op een kolom; nooit horizontaal scrollen (min-width 0). */
.ad-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: var(--gap); }
.ad-blok { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 12px; align-content: start; padding: 16px 18px 18px; min-width: 0; }
.ad-blok__kop { grid-row: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ad-blok__kop h3 { margin: 0; display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.ad-blok__stap { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ad-blok__kop p { margin: 0; font-size: 12.5px; color: var(--text-2); max-width: 78ch; }
/* Twee tegels naast elkaar in elk blok, dus overal dezelfde kolombreedte; de tegels staan bovenin hun rij. */
.ad-blok__tegels { grid-row: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.ad-blok__meer { grid-row: 3; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ad-blok__acties { grid-row: 4; align-self: end; display: flex; gap: 8px; flex-wrap: wrap; }
.ad-blok__acties .btn { text-decoration: none; }
/* Naslag: geen blok van de keten, een brede kaart over alle kolommen met de verwijzingen naast elkaar. */
.ad-blok--naslag { grid-column: 1 / -1; grid-row: auto; display: flex; flex-direction: column; gap: 12px; }
.ad-scherm .dash-head__actions .btn { text-decoration: none; }
.ad-regel { margin: 0; display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); min-width: 0; }
.ad-regel > span { min-width: 0; overflow-wrap: anywhere; }
.ad-regel b { font-weight: 500; color: var(--text); }
.ad-regel svg { flex-shrink: 0; margin-top: 2px; }
/* De merkkleur is op de donkere kaart te flets voor een link in lopende tekst. */
[data-theme="dark"] .ad-regel .fz-link { color: var(--text); }
.ad-tegel__tekst { font-size: 17px; }
.ad-naslag { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.ad-naslag li { min-width: 0; display: flex; }
.ad-naslag a { flex: 1; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); color: inherit; text-decoration: none; }
.ad-naslag a:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line-strong)); }
.ad-naslag a svg { flex-shrink: 0; margin-top: 2px; color: var(--brand); }
.ad-naslag span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ad-naslag b { font-weight: 500; font-size: 13px; }
.ad-naslag i { font-style: normal; font-size: 12px; color: var(--text-2); }

@media (max-width: 760px) {
  .ad-balk { padding-left: 16px; padding-right: 16px; gap: 8px; }
  .ad-balk__kop { display: none; }
  .ad-balk__item { height: 28px; padding: 0 9px; font-size: 12px; }
  .ad-blok { padding: 14px 14px 16px; }
}