/* /administratie/ (v3): alleen wat deze pagina anders heeft dan het sjabloon van /leerling/.
   De opmaak van kop, dagbalk, momenten, toestellen en schermen staat in /style.css; dit bestand voegt de schermdelen
   van de administratie toe (register, meters voor de leerplicht, een bestand inlezen) en zet de laptop in de opening.
   Alles in em, zodat de letters in het toestel meeschalen; alleen de kleuren van de schermen (--s-…), dus licht en
   donker vanzelf goed. */

/* ---------- Opening: een laptop in plaats van een telefoon ---------- */
@media (min-width: 960px) {
  .rol-held--laptop .rol-held-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* De laptop in de opening is smaller dan in een moment: minder kolommen en een iets grotere letter, nooit onder 12 px.
   De hoogte volgt de inhoud (geen leeg vlak onderin). */
@media (min-width: 640px) {
  .rol-held--laptop .scherm--laptop { aspect-ratio: auto; font-size: clamp(12px, 100cqi / 44, 14.5px); }
}
.rol-held--laptop .toestel--laptop { max-width: 760px; }
.adm-held-regel { padding: 0 .25em; }

/* ---------- Twee kolommen in een laptop: de kern links, een smal paneel rechts ---------- */
.adm-grid { grid-template-columns: minmax(0, 1fr) 17em; align-items: start; flex: 1; }
.adm-grid > .s-paneel:not(.kern) { gap: .6em; }
.adm-door { flex: none; font-size: .8125em; font-weight: 600; color: var(--s-grijs); white-space: nowrap; }
.adm-register .draad { flex: none; }
.adm-rij-stapel { flex-direction: column; align-items: flex-start; gap: .55em; border-top: 0; padding-top: 0; }
.adm-papier { border-top: 0; margin: .25em 0 .1em; padding: .7em .85em; border-radius: .875em; background: var(--s-grond); }
.adm-kop-klein { font-size: .9375em; margin-top: .15em; }
.adm-velden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6em; }
.adm-velden .s-persoon small { color: var(--s-grijs); font-size: .8125em; }
.adm-venster { gap: .65em; }
.adm-venster .s-knoppen { margin-top: .3em; }

/* ---------- Leerplicht: uren tegenover de grens van 16 (de streep), op een schaal tot 20 uur ---------- */
/* Eén raster voor alle rijen (subgrid): de balken staan onder elkaar, ook als een rij geen knop heeft */
.adm-meters { display: grid; grid-template-columns: minmax(0, 1fr) 6.5em 3.6em auto; column-gap: .9em; }
.adm-meter {
  position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  align-items: center; row-gap: .4em; padding: .75em 0; border-top: 1px solid var(--s-lijn);
}
.adm-meter > div { display: flex; flex-direction: column; gap: .1em; min-width: 0; }
.adm-meter > div b { font-size: .9375em; font-weight: 600; }
.adm-meter > div small { color: var(--s-grijs); font-size: .8125em; }
.adm-balk { position: relative; display: block; height: .5em; border-radius: 999px; background: var(--s-label); }
.adm-balk i { display: block; height: 100%; border-radius: inherit; background: var(--s-accent); }
.adm-balk::after { content: ""; position: absolute; left: 80%; top: -.35em; bottom: -.35em; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--s-tekst); }
.adm-meter--over .adm-balk i { background: var(--s-oranje); }
.adm-w17 { width: 85%; } .adm-w10 { width: 50%; } .adm-w6 { width: 30%; }
.adm-uren { font-size: .9375em; white-space: nowrap; text-align: right; }
.adm-meter--over .adm-uren { color: var(--s-oranje); }
.adm-meter-knop { justify-items: end; }
/* Een knop en het label dat ervoor in de plaats komt: midden in de rij, op hun eigen breedte */
.s-rij .s-wisselplek, .adm-bestand .s-wisselplek, .adm-meter .s-wisselplek { flex: none; align-items: center; justify-items: end; }
.adm-feiten { display: flex; flex-direction: column; }
.adm-feiten p { display: flex; justify-content: space-between; gap: 1em; padding: .5em 0; border-top: 1px solid var(--s-lijn); font-size: .875em; }
.adm-feiten p:first-child { border-top: 0; }
.adm-feiten span { color: var(--s-grijs); }
.adm-feiten b { font-weight: 600; text-align: right; }

/* ---------- Een lijst inlezen ---------- */
.adm-bestand { display: flex; align-items: center; gap: .8em; padding: .8em .9em; border-radius: .875em; border: 1px dashed var(--s-lijn); background: var(--s-grond); }
.adm-bestand > div { display: flex; flex-direction: column; gap: .1em; flex: 1; min-width: 0; }
.adm-bestand b { font-size: .9375em; font-weight: 600; }
.adm-bestand small { color: var(--s-grijs); font-size: .8125em; }
.adm-bestand-teken { position: relative; flex: none; width: 1.7em; height: 2.1em; border-radius: .3em; background: var(--s-accent-zacht); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-accent-tekst) 35%, transparent); }
.adm-bestand-teken::after { content: ""; position: absolute; left: .4em; right: .4em; top: .6em; height: .8em; border-top: 2px solid var(--s-accent-tekst); border-bottom: 2px solid var(--s-accent-tekst); opacity: .7; }
.adm-uitslag { display: flex; flex-direction: column; gap: .6em; margin-top: .3em; }
.adm-tegels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-label-fout .lv-oud { color: var(--s-rood); }
/* Eén fout in oranje zolang hij er is (stap 2); na het verbeteren staat er 0, in gewone inkt */
html.beweeg .toneel--inlezen[data-stap="2"] .adm-tegel-fout b { color: var(--s-oranje); }
.adm-wissel-zin { display: grid; }
.adm-wissel-zin > span { grid-area: 1 / 1; }

/* ---------- Smal (< 640 px): de laptop is een kaart met alleen de kern, op 14 px ---------- */
@media (max-width: 639px) {
  .adm-velden { grid-template-columns: minmax(0, 1fr); }
  .adm-door { white-space: normal; text-align: right; }
  .adm-meters { grid-template-columns: minmax(0, 1fr) auto; }
  .adm-bestand { flex-wrap: wrap; }
  .adm-bestand-teken { display: none; }
  .adm-bestand .s-wisselplek { flex-basis: 100%; justify-items: start; }
  .adm-meter > div { grid-column: 1; grid-row: 1; }
  .adm-uren { grid-column: 2; grid-row: 1; }
  .adm-balk { grid-column: 1 / -1; }
  .adm-meter-knop { grid-column: 1 / -1; justify-self: start; justify-items: start; }
  /* Een venster ligt onderin de kaart: de kaart is dan minstens zo hoog, zodat het venster er helemaal in past */
  html.beweeg :is(.toneel--verlof, .toneel--aanmelden, .toneel--leerplicht) .scherm--laptop { min-height: 30em; }
}

/* Zonder beweging (of zonder JS) staat het eindbeeld stil: dan zegt de melding onderin niets nieuws en zou ze over de
   lijst vallen */
html:not(.beweeg) .toneel .s-toast { display: none; }