feat: "School" herbouwd als drill-down navigator (v0.4.14-beta)

Volledige herbouw van het "School"-tabblad naar het goedgekeurde concept
(tegel-overzicht -> gefocust detailscherm), i.p.v. drie secties op één lange
pagina. Zelfde patroon op elk niveau:
- "alle scholen" (systeemmanager): tegel per school + Systeemmanagers/Ouders/
  Zonder school + "+ School"
- een school: tegel per klas + Schoolbeheerder/Niet ingedeeld/Ouders/
  Aanmeldingen + "+ Klas"; "⋯" toont schoolbeheer (naam/verwijderen, alleen
  systeemmanager)
- een klas: Groepsleiding en Leerlingen als twee eigen sublijstjes, elk met
  een eigen "+"; "⋯" toont klasbeheer (verplaatsen/resetten/verwijderen)
- een platte groep: één lijst, evt. met "+"

Personen en aanmeldingen openen nu in een sheet (bestaande userTools()/
requestTools() vrijwel ongewijzigd hergebruikt) i.p.v. een los detailpaneel.
Zoeken vult, op tegel-niveau, het scherm met een systeembrede resultatenlijst.
Een leerkracht (groepsleiding) blijft de eenvoudige platte leerlingenlijst
zien, ongewijzigd.

Vervallen (overbodig dankzij drill-down, elke lijst is al kort en gefocust):
het hele inklap-/inspring-mechanisme (group(), openGroups/closedGroups,
editToggle, classHeadRow, applyUserFilter, .am-classhead, .am-indent), het
oude master-detail-paneel (selectedUserKey/syncSelection/renderDetail), en de
generieke "Nieuwe gebruiker"-knop (elke tegel se eigen "+" dekt dit al,
rol+context-correct).

Geen serverwijziging - pure client-herbouw van navigatie/weergave.
Geverifieerd in een echte headless Chromium voor systeemmanager (root +
school + klas + sheet + "+Groepsleiding" koppelt nog echt), schoolbeheerder
(eigen school, geen schoolkiezer/kebab-op-schoolniveau) en groepsleiding
(platte lijst, ongewijzigd).

VERSION

@@ -1 +1 @@
-0.4.13-beta
+0.4.14-beta

public/css/teach.css

@@ -1271,13 +1271,66 @@
    sectie, dus niet boven de allereerste kop van de pagina) */
 .am-section{margin-bottom:14px;}
 .am-section + .am-h3{margin-top:22px; padding-top:16px; border-top:1px solid var(--line);}
-/* hiërarchie via inspringing, niet via een andere kleur per niveau: alles
-   wat bij een klas hoort (Groepsleiding/Leerlingen, hun rijen en +-knoppen)
-   krijgt dezelfde lichte inspringing i.p.v. een eigen kadertje - dat hield
-   eerder te veel verschillende "boxstijlen" tegelijk in beeld. Specificiteit
-   moet #settingsModal .am-row's eigen margin:0 kunnen verslaan, ongeacht
-   bestandsvolgorde. */
-#settingsModal .am-list .am-indent{margin-left:18px;}
+
+/* ---- "School" drill-down navigator: tegel-overzicht -> gefocust detail ---- */
+.am-nav-header{display:flex; gap:8px; margin-bottom:12px;}
+.am-nav-header .am-filter{flex:1;}
+.am-crumb-back{
+  background:none; border:none; color:var(--accent-ink); font-weight:700;
+  font-size:14px; cursor:pointer; padding:8px 6px; font:inherit; border-radius:8px;
+}
+.am-crumb-back:hover{background:var(--surface-2);}
+.am-stat-strip{display:flex; gap:10px; margin-bottom:14px;}
+.am-stat{flex:1; background:var(--surface-2); border-radius:var(--radius-s); padding:8px 10px; text-align:center;}
+.am-stat b{display:block; font-size:18px; font-variant-numeric:tabular-nums;}
+.am-stat span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.3px;}
+.am-tilegrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:6px;}
+.am-tilegrid > .am-add-wrap{grid-column:1 / -1;}
+.am-tile{
+  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
+  padding:12px 14px; text-align:left; cursor:pointer; font:inherit; color:var(--ink);
+  display:flex; flex-direction:column; gap:8px;
+}
+.am-tile:hover{background:var(--surface-2);}
+.am-tile-name{font-weight:700; font-size:14.5px;}
+.am-tile-chips{display:flex; flex-wrap:wrap; gap:5px;}
+.am-tile.wide{grid-column:1 / -1; flex-direction:row; align-items:center; justify-content:space-between;}
+.am-tile.warn{border-color:color-mix(in srgb, var(--orange) 45%, var(--line));}
+.am-tile .am-chip.flag{background:var(--orange); color:#1d1200; border-color:transparent;}
+.am-tile.add{
+  border-style:dashed; border-color:var(--accent); color:var(--accent-ink); background:var(--accent-soft);
+  align-items:center; justify-content:center; flex-direction:row; font-weight:700;
+}
+.am-kebab-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px;}
+.am-nav-title{font-family:"Quicksand","Segoe UI Rounded",ui-rounded,sans-serif; font-size:17px; margin:0;}
+.am-kebab{
+  border:1px solid var(--line); background:var(--surface); border-radius:999px;
+  width:32px; height:32px; cursor:pointer; color:var(--muted); font-size:16px; flex:none;
+}
+.am-kebab:hover{background:var(--surface-2);}
+.am-kebab-panel{
+  background:var(--surface-2); border-radius:var(--radius-s); padding:10px;
+  margin-bottom:14px; display:flex; flex-direction:column; gap:8px;
+}
+.am-section-label{
+  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px;
+  color:var(--muted); margin:14px 0 6px;
+}
+.am-person{cursor:pointer;}
+.am-person-info{flex:1; display:flex; flex-direction:column; min-width:0; gap:1px;}
+.am-person-info .am-name{font-size:14px;}
+.am-person-info .am-role{font-size:11.5px; color:var(--muted); font-weight:600;}
+.am-sheet-backdrop{position:fixed; inset:0; background:rgba(15,22,38,.4); z-index:60; display:none;}
+.am-sheet-backdrop.open{display:block;}
+.am-sheet{
+  position:absolute; left:0; right:0; bottom:0; max-width:520px; margin:0 auto;
+  background:var(--surface); border-radius:18px 18px 0 0; padding:16px 18px 24px;
+  max-height:82vh; overflow-y:auto; box-shadow:var(--shadow-2);
+}
+@media (min-width:560px){
+  .am-sheet{border-radius:var(--radius-l); bottom:auto; top:50%; transform:translateY(-50%); max-height:76vh;}
+}
+
 .am-msg{
   min-height:20px; font-size:13.5px; font-weight:700; color:var(--green); margin:4px 0;
   display:flex; align-items:center; gap:8px; flex-wrap:wrap;
@@ -1330,10 +1383,6 @@
 /* Systeem-tab: schoolrij duidelijk zwaarder dan de beheerder-subrijen */
 .am-row-school{background:var(--accent-soft);}
 .am-row-school > .am-name{font-size:15px;}
-/* klasrij (naam + klasbeheer): bewust géén eigen kleur/kader - alleen de
-   naam iets zwaarder, zodat klas/school/gebruiker-rijen overal dezelfde
-   visuele taal spreken en de hiërarchie via .am-indent hieronder loopt */
-.am-classhead > .am-name{font-size:15px; font-weight:700;}
 .am-row-sub{
   margin-left:22px; background:var(--surface);
   border-left:3px solid var(--line); border-radius:var(--radius-s);

public/js/core.js

@@ -2,7 +2,7 @@
 "use strict";
 /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline).
    Kept in sync by hand with the VERSION file at the repo root on every release. */
-const VERSION = "0.4.13-beta";
+const VERSION = "0.4.14-beta";
 (function(){
   const tag = document.getElementById("verTag");
   tag.textContent = "v"+VERSION;
@@ -304,6 +304,8 @@ const I18N = {
     amCode:"koppelcode", amNewCode:"nieuwe code", amPw:"wachtwoord",
     amNoClass:"— geen klas —", amPending:"nog niet geactiveerd",
     amCouple:"koppel leerkracht", amAllSchools:"— alle scholen —", amSuperGroup:"Systeem",
+    amBack:"Terug", amStaff:"Staf", amSupers:"Systeemmanagers",
+    amUnassigned:"Niet ingedeeld", amNoResults:"Geen resultaten",
     amCreated:"Aangemaakt! Geef deze koppelcode door:",
     amPupilMade:"Leerling aangemaakt. Wachtwoord:",
     amPwHidden:"al gebruikt", amGenerate:"genereer wachtwoord",
@@ -604,6 +606,8 @@ const I18N = {
     amCode:"link code", amNewCode:"new code", amPw:"password",
     amNoClass:"— no class —", amPending:"not yet activated",
     amCouple:"link teacher", amAllSchools:"— all schools —", amSuperGroup:"System",
+    amBack:"Back", amStaff:"Staff", amSupers:"System managers",
+    amUnassigned:"Unassigned", amNoResults:"No results",
     amCreated:"Created! Pass on this link code:",
     amPupilMade:"Pupil created. Password:",
     amPwHidden:"already used", amGenerate:"generate password",