/* ==========================================================================
   /schoolleiding/ in v3-vorm (2 nov 2026). Alleen wat deze pagina extra nodig heeft bovenop style.css: de
   schermen van Erik Mulder (directeur) en Thijs Kramer (teamleider). Alles in em, net als de andere schermen,
   zodat de letters met het toestel meeschalen. Kleuren alleen via de --s-tokens: licht en donker gaan vanzelf.
   ========================================================================== */

/* 10:20 · De school: vier tegels en de tabel per afdeling */
.s-tegels--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75em; }
.s-tegels--vier .s-tegel { background: var(--s-paneel); box-shadow: var(--s-schaduw); padding: .9em 1.1em; }
.s-afdelingen { flex: 1; }
.s-tabel--school td, .s-tabel--verzuim td, .s-tabel--rechten td { padding: .5em .5em; }
.s-tabel--school td small { display: block; margin: .1em 0 0; }
.s-tabel--school td:nth-child(n+2), .s-tabel--school th:nth-child(n+2) { text-align: right; }
.s-tabel--school tr { position: relative; }
.s-kop .s-klein { font-weight: 400; }
/* Per cohort: de balk is het saldo tegen de norm; de norm is het streepje in het midden */
.s-cohortrij { display: flex; flex-direction: column; gap: .35em; padding: .6em 0; border-top: 1px solid var(--s-lijn); }
.s-cohortrij > span:first-child { display: flex; align-items: baseline; gap: .6em; }
.s-cohortrij > span:first-child b { font-size: .9375em; }
.s-cohortrij > span:first-child small { color: var(--s-grijs); font-size: .8125em; }
.s-cohortrij .s-meter > span { position: relative; overflow: visible; }
.s-cohortrij .s-meter > span::after { content: ""; position: absolute; left: 50%; top: -.25em; bottom: -.25em; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--s-tekst); opacity: .55; }
.s-cohortrij .s-meter i { margin-left: 50%; }
.s-cohortrij .s-meter i.c-min68 { margin-left: calc(50% - 6%); }
.c-62 { width: 5.4%; } .c-91 { width: 8%; } .c-min68 { width: 6%; }
.s-meter--warm i { background: var(--s-oranje); }
.s-meter--rood i { background: var(--s-rood); }
.s-cohort { gap: .7em; }

/* 14:30 · Verlof: het blad is een lijst van boven naar beneden (niet gestapeld zoals bij de ziekmelding) */
.s-blad--lijst { display: flex; flex-direction: column; gap: .8em; }
.s-blad--lijst > * { grid-area: auto; }
.s-blad--lijst .s-bladrij { gap: .35em; }
.s-blad--lijst .s-bladrij > b { font-size: .9375em; }
.s-blad--lijst .s-motivering { margin-top: .1em; }
/* Thijs: twee bladen op dezelfde plek, het tweede vervangt het eerste */
.s-blad--lijst:has(.s-bladdeel) { display: grid; }
.s-blad--lijst > .s-bladdeel { grid-area: 1 / 1; display: flex; flex-direction: column; gap: .7em; align-self: start; }
.s-blad--lijst .s-tegels { gap: .45em; }
.s-blad--lijst .s-tegel { padding: .6em .7em; }
.s-blad--lijst .s-tegel b { font-size: 1.5em; }
.s-blad--lijst .s-tegel span { font-size: .8125em; }
.s-blad--lijst .s-afwijk:first-of-type { border-top: 0; padding-top: .2em; }
.toneel--sl-team .blad-klaar { --van: translateX(1.2em); --d: 380ms; }
.toneel--sl-team .blad-vraag { --weg: translateX(-1em); --d: 260ms; }

/* 14:40 · Het rapport: vakken links, de norm rechts, en hoe het verder gaat eronder */
.s-grid--rapport { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "vakken norm" "vakken verder"; align-items: start; flex: 1; }
.s-grid--rapport .s-vakken { grid-area: vakken; }
.s-grid--rapport .s-norm { grid-area: norm; }
.s-grid--rapport .s-verder { grid-area: verder; }
.s-vaklijst { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4em; margin-top: .3em; }
.s-vaklijst li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .5em .7em; border-radius: .75em; background: var(--s-grond); font-size: .875em; font-weight: 600; }
.s-vaklijst li em { font-style: normal; font-weight: 400; color: var(--s-grijs); font-size: .9286em; }
.s-vaklijst li:not(.is-wacht) span::before { content: ""; display: inline-block; width: .35em; height: .65em; margin: 0 .55em .1em .1em; border: solid var(--s-accent-tekst); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.s-vaklijst li.is-wacht { background: color-mix(in srgb, var(--s-oranje) 12%, var(--s-paneel)); }
.s-vaklijst li.is-wacht em { color: var(--s-oranje); font-weight: 600; }
.s-voortgang--vol i { transform-origin: left center; }
.s-stappenrij { list-style: none; display: flex; flex-direction: column; gap: .45em; }
.s-stappenrij li { display: flex; gap: .7em; align-items: flex-start; }
.s-stappenrij li > b { width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: var(--s-accent-zacht); color: var(--s-accent-tekst); font-size: .8125em; flex: none; }
.s-stappenrij li > span { display: flex; flex-direction: column; font-size: .875em; }
.s-stappenrij strong { font-weight: 600; }
.s-stappenrij small { color: var(--s-grijs); font-size: .9286em; }

/* 15:00 · Verzuim: de tabel links, rond de grens rechts */
.s-grid--verzuim { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; flex: 1; }
.s-tabel--verzuim td:nth-child(n+2), .s-tabel--verzuim th:nth-child(n+2) { text-align: right; }
.s-grensrij { position: relative; display: flex; flex-direction: column; gap: .4em; padding: .65em 0; border-top: 1px solid var(--s-lijn); }
.s-grensrij > span:first-child { display: flex; flex-direction: column; gap: .05em; }
.s-grensrij b { font-size: .9375em; }
.s-grensrij > span:first-child small { color: var(--s-grijs); font-size: .8125em; }
.g-17 { width: 100%; } .g-13 { width: 81%; } .g-12 { width: 75%; }
.s-meekijk { gap: .5em; }
.s-meekijk .s-meta b { color: var(--s-tekst); margin-left: .4em; }

/* 15:10 · Rechten: de tabel vult het scherm */
.s-rechtentabel { flex: 1; }
.s-tabel--rechten th:nth-child(n+2), .s-tabel--rechten td:nth-child(n+2) { text-align: center; }
.s-tabel--rechten td:nth-child(n+2) { font-weight: 600; color: var(--s-accent-tekst); }
.s-tabel--rechten th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
.r-niet { font-style: normal; font-weight: 400; color: var(--s-grijs); }
.s-tabel--rechten tr { position: relative; }
.r-aan { font-weight: 700; }
.s-account { gap: .6em; }
.s-account .s-knop { align-self: flex-start; margin-top: .2em; }

/* Smal (< 640 px): een laptopscherm wordt een leesbare kaart (style.css). Hier alleen wat deze schermen extra
   nodig hebben: geen vier tegels naast elkaar, en het rapport onder elkaar. */
@media (max-width: 639px) {
  .s-tegels--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .s-tegels--vier .s-tegel { padding: 10px 12px; }
  .s-tegels--vier .s-tegel small { display: none; }
  /* Twee tegels naast elkaar: het getal boven het woord, anders schuift "1.184" over "Leerlingen" heen */
  .s-tegels--vier .s-tegel { flex-direction: column; align-items: flex-start; gap: 2px; }
  .s-tegels--vier .s-tegel span { line-height: 1.25; }
  .s-grid--rapport { grid-template-areas: none; }
  .s-grid--rapport > * { grid-area: auto !important; }
  .s-vaklijst { grid-template-columns: minmax(0, 1fr); }
  .s-tabel--school td small { display: none; }
  .s-cohort, .s-meekijk, .s-account { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; }
  .s-tabel--rechten { font-size: 13px; }
  .s-tabel--rechten td, .s-tabel--rechten th { padding: 6px 4px; }
  .s-rechtentabel > .s-kop .s-klein { display: none; }
}

/* Telefoon: de bladen van Erik en Thijs schuiven van onderen in, zo hoog als hun inhoud. Wat erachter staat, blijft
   gedimd zichtbaar: geen leeg wit vlak onderin. */
.s-blad--lijst { padding-bottom: 1.5em; }
.s-blad--lijst > .blad-klaar { align-items: stretch; justify-content: flex-start; text-align: left; margin-top: 0; align-self: start; }
.s-blad--lijst .s-bladkop { margin-bottom: -.2em; }
/* Rapport: alles past in het scherm, ook de knop Vaststellen */
.s-norm .s-tegel { padding: .65em .8em; }
.s-norm .s-tegel b { font-size: 1.6em; }
.s-grid--rapport > .s-paneel { padding: 1.1em 1.25em; }
.s-verder { gap: .45em; }
.s-stappenrij { gap: .35em; }
/* Smal: alleen de kolommen die het verhaal dragen, en panelen over de volle breedte */
@media (max-width: 639px) {
  .scherm--laptop :is(.s-grid--rapport, .s-grid--verzuim) > * { align-self: stretch; }
  .s-tabel--school :is(th, td):nth-child(2) { display: none; }
  .s-tabel--rechten :is(th, td):nth-child(5) { display: none; }
  .s-norm .s-tegel span { overflow-wrap: normal; font-size: 12px; line-height: 1.25; }
  .s-norm .s-tegel b { font-size: 22px; }
  .s-grens .s-grensrij small { font-size: 12px; }
}
@media (max-width: 639px) {
  .s-tabel--rechten td:first-child { white-space: normal; overflow-wrap: normal; }
  .s-tabel--rechten th { font-size: 12px; overflow-wrap: normal; hyphens: manual; }
}
.s-vouwblok > .s-bladrij { padding-top: .1em; }

/* Rapport (14:40): het scherm is zo hoog als zijn inhoud, zodat er geen half leeg laptopscherm staat */
.toneel--sl-rapport .scherm--laptop { aspect-ratio: auto; }

/* Heel smal (< 400 px, bijvoorbeeld 360): de drie tabellen passen nog net niet. Koppen mogen op twee regels
   ("Boven de / grens"), en de rechtentabel krijgt iets kleinere letters en minder ruimte tussen de kolommen, zodat
   "leerlingkaart" niet meer rechts buiten het scherm valt. De inhoud blijft gelijk met de grote schermen. */
@media (max-width: 399px) {
  :is(.s-tabel--school, .s-tabel--verzuim) th { white-space: normal; vertical-align: bottom; line-height: 1.2; }
  :is(.s-tabel--school, .s-tabel--verzuim) :is(th, td) { padding-inline: 4px; }
  .s-tabel--rechten, .s-tabel--school { font-size: 12px; }
  .s-tabel--rechten td, .s-tabel--rechten th { padding-inline: 3px; }
  .s-tabel--verzuim td:nth-child(3) { white-space: nowrap; }
}
/* "Nog 8 dingen" blijft bij elkaar, ook als het naar een tweede regel moet */
.s-meekijk .s-meta b { white-space: nowrap; }
/* "leerlingkaart" mag pas op de smalste telefoons (< 375 px) afbreken; daarboven past het op één regel */
@media (min-width: 375px) { .s-tabel--rechten td:nth-child(6) { white-space: nowrap; } }

/* Rapport (14:40) op smal (< 640 px): stap 3 belooft "vaststellen, dan vrijgeven". Dus komt daar het paneel "Zo gaat
   het verder" met de knop Vaststellen in de kaart (style.css verbergt panelen zonder .kern op smal), en klappen de
   vakken die al klaar zijn in: alleen scheikunde, waar het om gaat, blijft staan. Zo schuiven de norm en de knop
   omhoog en ziet de lezer wat de stap zegt. Alleen bij het afspelen (html.beweeg); stilstaand blijft alles staan.
   De balk staat op smal op een eigen regel over de volle breedte, anders is hij een streepje van een paar pixels. */
@media (max-width: 639px) {
  .toneel--sl-rapport .scherm--laptop .s-grid > .s-verder { display: flex; }
  html.beweeg .toneel--sl-rapport[data-stap="3"] .s-vaklijst li:not(.is-wacht) { display: none; }
  .toneel--sl-rapport .s-klaarregel { flex-wrap: wrap; gap: 8px; }
  .toneel--sl-rapport .s-klaarregel .s-voortgang { flex: 1 0 100%; max-width: none; height: 6px; }
}