/* Drie vlakken: een smalle zijbalk met de hoofdnavigatie, een balk bovenin met
   de cliënt waar je in werkt plus het zoeken, en de inhoud.
   Onder 800px stapelt het; de beheerder werkt deels vanaf een tablet. */

/* Het venster scrolt niet; het werkvlak wel. Zoals in een editor: de zijbalk,
   de balk en de tabs staan vast, en alleen wat eronder staat beweegt.

   Eerst was dit opgelost door de balk en de tabs met position: sticky vast te
   zetten terwijl de pagina scrolde. Dat werkte, maar de schuifbalk van de
   pagina liep dan rechts naast de balk helemaal naar boven — alsof de kop mee
   kon scrollen — en de balk hield 15 pixels voor de rechterrand op, omdat die
   ruimte voor de schuifbalk werd vrijgehouden. Nu begint de schuifbalk pas
   onder de tabs, en loopt de kop door tot de rand. */
.schil {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "zijbalk kop"
    "zijbalk werkvlak";
  height: 100vh;
}

/* Boven het werkvlak, zodat het zoekpaneel dat uit de balk openklapt over de
   inhoud heen valt en niet eronder. */
.kop {
  grid-area: kop;
  position: relative; z-index: 20;
}

/* Het enige vak dat scrolt. min-height: 0 is nodig: een griditem krijgt
   standaard de hoogte van zijn inhoud als ondergrens, en dan groeit het vak
   gewoon mee in plaats van te scrollen.

   scrollbar-gutter staat hier en niet meer op html. De pagina zelf scrolt niet
   meer, en op html hield hij rechts een lege strook van 15px vrij naast de
   balk. Hier doet hij waar hij voor is: een lang scherm duwt de gecentreerde
   inhoud niet opzij als de schuifbalk verschijnt. */
.werkvlak {
  grid-area: werkvlak;
  overflow-y: auto;
  min-height: 0;
  scrollbar-gutter: stable;
}

/* De zijbalk staat tegen de linkerrand van het scherm en schuift niet mee.
   Alleen de inhoud wordt gecentreerd binnen wat overblijft, met een plafond;
   de achtergronden en onderranden lopen wél door tot de rand.

   De tabstrip en de balk doen niet mee aan dat centreren. De tabstrip begint
   links, direct naast de zijbalk, zoals de tabs in een editor; de balk duwt
   zijn inhoud helemaal naar rechts. Gecentreerd houden ze op halverwege het
   scherm op, en dan is niet te zien waar de rij begint of eindigt. */
.inhoud {
  max-width: var(--breedte-werkvlak);
  margin-inline: auto;
  width: 100%;
}

.zijbalk { grid-area: zijbalk; }

.zijbalk {
  background: var(--vlak);
  border-right: 1px solid var(--rand);
  padding: 1.25rem 0;
  display: flex; flex-direction: column; gap: .25rem;

  /* Precies schermhoogte, doordat de schil dat is. "Mijn account" en
     "Afmelden" staan onderaan en zakken dus nooit onder de vouw. Eigen
     schuifbalk voor als de navigatie zelf ooit langer wordt dan het venster;
     min-height: 0 om dezelfde reden als bij het werkvlak. */
  overflow-y: auto; min-height: 0;
}

.zijbalk .merk {
  padding: 0 1.25rem 1rem;
  border-bottom: 1px solid var(--rand);
  margin-bottom: .75rem;
}
.zijbalk .merk strong { display: block; font-size: 1.05rem; }
.zijbalk .merk span { color: var(--inkt-licht); font-size: .85rem; }

.zijbalk a {
  /* Grote klikdoelen: minimaal 44px hoog (briefing §4.8). */
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem 1.25rem;
  min-height: 44px;
  color: var(--inkt);
  text-decoration: none;
  border-left: 3px solid transparent;
}
/* Het icoon is een hulpmiddel naast het woord, niet in plaats daarvan: het
   staat daarom gedempt en neemt bij het actieve punt de accentkleur over. */
.zijbalk a .icoon { color: var(--inkt-licht); flex: none; }
.zijbalk a[aria-current="page"] .icoon { color: var(--accent); }
.zijbalk a:hover { background: var(--vlak-zacht); }
.zijbalk a[aria-current="page"] {
  background: var(--accent-zacht);
  border-left-color: var(--accent);
  font-weight: 600;
}
/* "algemeen" onder Aanwezigheid en Incidenten voor iedereen, zoals in hun tab:
   die staan er met een dossier open ook voor één deelnemer. Minder vulling,
   zodat het punt met twee regels niet veel hoger wordt dan de rest. */
.zijbalk a:has(.zijbalk-twee) { padding-block: .4rem; }
.zijbalk-twee { display: flex; flex-direction: column; line-height: 1.25; }
.zijbalk-bij { color: var(--inkt-licht); font-size: .8rem; font-weight: 400; }
.zijbalk .onderaan { margin-top: auto; border-top: 1px solid var(--rand); padding-top: .75rem; }

/* Kopjes boven een groep. Klein en gedempt: ze ordenen, ze roepen niet. */
.zijbalk-kop {
  padding: 1rem 1.25rem .35rem;
  color: var(--inkt-licht);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.zijbalk-kop:first-child { padding-top: 0; }


/* Kolom, zodat een scherm dat één lange lijst toont die lijst kan laten
   meegroeien met het venster: .tabelomhulsel.scrollt pakt met flex de ruimte
   die overblijft. Voor de andere schermen verandert er niets — een flexitem
   groeit alleen als het daarom vraagt.

   De ondervulling is meteen de marge onder zo'n lijst. */
/* min-height: 100% — minstens even hoog als het werkvlak. Zonder dat is .inhoud
   zo hoog als zijn inhoud, en kan een lijst die de rest van de hoogte moet
   vullen (audit-inzicht) nergens in groeien. Is de inhoud langer, dan wordt
   .inhoud dat ook en scrolt het werkvlak eromheen. */
.inhoud {
  padding: 1.75rem 2rem 4rem; min-width: 0; min-height: 100%;
  display: flex; flex-direction: column;
}

/* Het blok dat de hoogte mag opeten die in .inhoud overblijft. Eén blok per
   scherm, en het moet zelf ook een kolom zijn, anders houdt de keten op bij de
   kaart eromheen en groeit de lijst erin gewoon door tot tweehonderd regels.

   min-height: 0 hoort erbij: een flexitem krijgt standaard de hoogte van zijn
   inhoud als ondergrens, en dan werkt begrenzen helemaal niet. */
.inhoud > .vult {
  flex: 1 1 12rem;
  min-height: 0;
  display: flex; flex-direction: column;
}

/* ── Balk bovenin ──────────────────────────────────────────────────────────
   Wat Mextra bovenin het scherm doet: laten zien in wiens dossier je zit, en
   één ingang om naar een andere cliënt te springen zonder eerst terug te gaan
   naar de lijst. */
.balk {
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
  padding: .5rem 2rem;
}
.balk-binnen {
  position: relative;
  display: flex; align-items: center; gap: .5rem;
  min-height: 52px;
}
/* Alles rechtsboven bij elkaar, zoals in Mextra: eerst in wiens dossier je
   zit, dan de ingang om naar een andere cliënt te springen. Ze horen bij
   elkaar, dus ze staan bij elkaar — de balk uit elkaar trekken over de volle
   breedte maakt van twee samenhangende dingen twee losse dingen. */
.balk-rechts {
  margin-left: auto;
  display: flex; align-items: center; gap: .4rem;
  min-width: 0;
}
.balk-context { display: flex; align-items: center; gap: .25rem; min-width: 0; }
.balk-leeg { color: var(--inkt-licht); font-size: .9rem; white-space: nowrap; }

.clientchip {
  display: flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .35rem .75rem;
  border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--vlak-zacht);
  color: var(--inkt); text-decoration: none;
  min-width: 0;
}
.clientchip:hover { border-color: var(--rand-sterk); }
.clientchip .icoon { color: var(--accent); flex: none; }
/* Afkappen in plaats van laten doorlopen: de nepdata bevat een achternaam van
   84 tekens en die maakte de chip 1080px breed. Dit is de enige plek in de
   applicatie waar tekst wordt afgekapt — het mag hier omdat de volledige naam
   twee regels lager als kop op het scherm staat, en in de tooltip. */
.clientchip-naam {
  font-weight: 600;
  max-width: 24ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.clientchip-nummer { color: var(--inkt-licht); font-size: .85rem; }

/* ── Tabstrip ──────────────────────────────────────────────────────────────
   De openstaande schermen, zoals de tabs in een editor. Hij schuift horizontaal
   in plaats van om te breken: een strip die op twee regels springt verschuift
   de hele pagina onder je handen, en dat is bij deze doelgroep het soort
   onrust dat §4.8 juist wil vermijden. */
.tabstrip { background: var(--vlak-zacht); }
/* De onderrand is een schaduw binnenin en geen border eronder. De actieve tab
   moest over die border heen hangen om aan de inhoud vast te zitten, en deed
   dat met margin-bottom: -1px. Die ene pixel stak onder de strip uit, en omdat
   de strip horizontaal mag scrollen (overflow-x maakt van overflow-y ook auto)
   verscheen er een verticale schuifbalk van één pixel — een schuifbalk op iets
   dat niet scrolt.

   Nu tekent elke tab zijn eigen onderlijn en de strip de lijn achter de laatste
   tab; de actieve tab tekent er gewoon geen. Niets steekt meer uit. En
   overflow-y staat expliciet op hidden: een rij tabs scrolt hooguit opzij. */
.tabstrip-binnen {
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  box-shadow: inset 0 -1px 0 var(--rand);
  /* Een tablabel is geen tekst om te selecteren, en bij het verslepen zou de
     browser anders halverwege een selectie gaan maken. */
  user-select: none;
}
.tabstrip-tab {
  position: relative;
  display: flex; align-items: stretch;
  border-right: 1px solid var(--rand);
  background: var(--vlak-zacht);
  box-shadow: inset 0 -1px 0 var(--rand);
  flex: none;
  /* Een ondergrens erbij: zonder die grens is "Beheer" half zo breed als
     "Algemene rapportage" en wordt de rij een rommelige kartelrand. Met een
     vaste minimumbreedte lezen ze als één rij, en blijft het klikdoel ruim. */
  min-width: 12rem;
  max-width: 22rem;
}
.tabstrip-tab a {
  display: flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: 0 .35rem 0 .9rem;
  color: var(--inkt-zacht); text-decoration: none;
  /* Meegroeien met de tab, zodat het kruisje tegen de rechterrand komt te
     staan in plaats van vlak achter het label te blijven hangen. min-width: 0
     hoort erbij, anders weigert een flexitem te krimpen en loopt een lang
     label over de rand heen in plaats van afgekapt te worden. */
  flex: 1 1 auto;
  min-width: 0;
}
.tabstrip-tab:hover { background: var(--vlak); }
/* De actieve tab hangt aan de inhoud eronder vast: geen onderrand, wel een
   streep bovenaan. Zonder dat verschil moet je op kleurtoon gaan zoeken welke
   tab open staat, en dat is precies wat hoog contrast moet voorkomen. */
.tabstrip-tab.actief {
  background: var(--papier);
  box-shadow: inset 0 3px 0 var(--accent);
}
.tabstrip-tab.actief a { color: var(--inkt); font-weight: 600; }
.tabstrip-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabstrip-bij {
  color: var(--inkt-licht); font-size: .8rem; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 9rem;
}
.tabstrip-sluiten {
  display: flex; align-items: center; justify-content: center;
  width: 36px; border: 0; background: none;
  color: var(--inkt-licht); cursor: pointer;
}
.tabstrip-sluiten:hover { color: var(--stop); background: var(--stop-zacht); }

/* Verplaatsen. Geen beweging van de andere tabs en geen zwevende kopie (§4.8):
   de tab die je vasthoudt wordt stiller, en een streep in de kleur van het
   accent laat zien waar hij terechtkomt. Binnen de tab en niet over de rand,
   want de strip knipt af wat eruit steekt. */
.tabstrip-tab a { -webkit-user-drag: none; }
.tabstrip.bezig-met-slepen,
.tabstrip.bezig-met-slepen a { cursor: grabbing; }
.tabstrip-tab.slepen { opacity: .5; }
.tabstrip-tab.invoegen-voor::before,
.tabstrip-tab.invoegen-na::after {
  content: ""; position: absolute; top: 6px; bottom: 6px; width: 3px;
  background: var(--accent); border-radius: 2px; pointer-events: none;
}
.tabstrip-tab.invoegen-voor::before { left: 0; }
.tabstrip-tab.invoegen-na::after { right: 0; }

/* ── Zoekpaneel ────────────────────────────────────────────────────────────
   Hangt onder de knop rechtsboven en overlapt de inhoud; het is een uitstapje
   en geen scherm, dus de pagina eronder blijft staan waar hij stond. */
.zoekpaneel {
  position: absolute; z-index: 20;
  top: calc(100% + .35rem); right: 0;
  width: min(30rem, calc(100vw - 2rem));
  background: var(--vlak);
  border: 1px solid var(--rand-sterk);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(28, 31, 35, .12);
  padding: .5rem;
}
:root[data-theme="dark"] .zoekpaneel { box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }

.zoekpaneel-veld { position: relative; display: flex; align-items: center; }
.zoekpaneel-veld .icoon {
  position: absolute; left: .7rem; color: var(--inkt-licht); pointer-events: none;
}
/* Met de losse selector `.zoekpaneel-veld input` verliest deze regel het van
   `input[type="search"]` in components.css — gelijke specificiteit, en dat
   bestand laadt later. Dan staat de tekst onder het vergrootglas. */
.zoekpaneel-veld input[type="search"] { padding-left: 2.6rem; }

/* Acht treffers waarvan één met een achternaam van 84 tekens is al ruim 500px
   hoog; op een laptop in liggend formaat valt de onderste dan buiten beeld. */
.zoekresultaten {
  margin-top: .4rem; display: flex; flex-direction: column;
  max-height: min(60vh, 26rem); overflow-y: auto;
}
.zoektreffer {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  min-height: 44px; padding: .5rem .7rem;
  border-radius: var(--radius-klein);
  color: var(--inkt); text-decoration: none;
  /* Niet krimpen. De lijst is een flexkolom met een maximumhoogte, en dan
     perst hij zijn regels standaard samen tot onder hun eigen inhoud — een
     achternaam van 84 tekens liep zo over de regels erboven en eronder heen.
     Gevonden met ops/nepdata.py. */
  flex: none;
}
.zoektreffer:hover, .zoektreffer:focus-visible { background: var(--accent-zacht); }
.zoektreffer-naam { font-weight: 600; overflow-wrap: anywhere; }
.zoektreffer-nummer { color: var(--inkt-licht); font-size: .85rem; flex: none; }
.zoekhint { color: var(--inkt-licht); font-size: .9rem; padding: .5rem .7rem; }
/* De volledige lijst staat onderaan het paneel, zoals in Mextra. Daar zit ook
   'Nieuwe cliënt', dus hij moet vindbaar blijven nu hij uit de zijbalk is. */
.zoekvoet {
  display: flex; align-items: center; gap: .55rem;
  min-height: 44px; margin-top: .35rem; padding: .5rem .7rem;
  border-top: 1px solid var(--rand);
  color: var(--inkt-zacht); text-decoration: none; font-size: .9rem;
}
.zoekvoet:hover { background: var(--vlak-zacht); color: var(--inkt); }
.zoekkop {
  color: var(--inkt-licht); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; padding: .5rem .7rem .25rem;
}

.paginakop {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.paginakop p { color: var(--inkt-zacht); }

.publiek {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.publiek .kaart { width: 100%; max-width: 26rem; }
/* Een tekstknop op het inlogscherm staat onder het formulier, links uitgelijnd. */
.publiek .tekstknop { padding-left: 0; }

/* De tweede stap kiezen: twee blokken onder elkaar, elk het hele klikdoel. */
.keuzeblokken { display: grid; gap: .75rem; }
.keuzeblok {
  display: grid; gap: .25rem; text-align: left;
  padding: .9rem 1rem; min-height: 44px;
  border: 1px solid var(--rand-sterk); border-radius: var(--radius);
  background: var(--vlak); color: var(--inkt); font: inherit; cursor: pointer;
}
.keuzeblok:hover { background: var(--vlak-zacht); border-color: var(--accent); }
.keuzeblok span { color: var(--inkt-zacht); font-size: .9rem; }

.tabbladen {
  display: flex; gap: .25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--rand); margin-bottom: 1.25rem;
}
.tabbladen a {
  padding: .65rem 1rem; min-height: 44px;
  color: var(--inkt-zacht); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tabbladen a[aria-current="page"] {
  color: var(--inkt); border-bottom-color: var(--accent); font-weight: 600;
}

.rij { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; }
/* Een merkje met knoppen ernaast: op één lijn, niet op de onderkant van het
   hoogste klikdoel. */
.rij.midden { align-items: center; gap: .25rem .75rem; }
.kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }

@media (max-width: 800px) {
  .schil {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "zijbalk" "kop" "werkvlak";
    border-inline: 0;
  }
  /* Op een telefoon scrolt de pagina gewoon weer zelf. Zijbalk, balk en tabs
     vast bovenaan is daar samen meer dan 200px — een derde van wat je te
     lezen hebt. */
  .schil { height: auto; }
  .werkvlak { overflow: visible; }
  .zijbalk {
    flex-direction: row; flex-wrap: wrap; border-right: 0;
    border-bottom: 1px solid var(--rand); padding: .5rem;
    /* Op een telefoon is de zijbalk een strook bovenaan; vastzetten op
       schermhoogte zou de halve pagina opeten. */
    position: static; height: auto; overflow: visible;
  }
  .zijbalk .merk { border-bottom: 0; margin: 0; padding: .5rem 1rem; width: 100%; }
  /* Op een telefoon is de zijbalk een strook die omloopt. Zonder deze regel
     blijft 'onderaan' een blok en stapelen de laatste twee punten onder
     elkaar, wat eruitziet alsof er iets kapot is. */
  .zijbalk .onderaan { margin: 0; border-top: 0; padding: 0; display: flex; flex-wrap: wrap; }
  .inhoud { padding: 1.25rem 1rem 3rem; }
  .balk { padding: .5rem 1rem; }
  .clientchip-naam { max-width: 12ch; }
  .zoekpaneel { width: calc(100vw - 2rem); }
}