/* ==========================================================================
   /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; }
  .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; }