Maak splitsingen visueel in roostermaker

frontend/src/pages.jsx

@@ -1333,23 +1333,29 @@ function BlokBewerker({ blok, ctx, onSluit, onKlaar }) {
     try { await deleteResource("roosterblokken", blok.id); await onKlaar(); } catch (e) { setError(e.message); }
   }
   return (
-    <div className="modal-overlay" onClick={onSluit}>
+    <div className="blok-editor no-print" onClick={(e) => e.stopPropagation()}>
-      <div className="modal" onClick={(e) => e.stopPropagation()}>
+      <div className="blok-editor-kop">
-        <div className="modal-kop"><h2>Blok bewerken</h2><button className="link" onClick={onSluit}>sluiten ✕</button></div>
+        <strong>Bewerken</strong>
+        <button type="button" className="icon-btn" title="Sluiten" onClick={onSluit}>×</button>
+      </div>
       <Foutmelding msg={error} />
-        <div className="form-row">
+      <div className="editor-grid">
-          <select value={f.tijdslot} onChange={(e) => setF({ ...f, tijdslot: e.target.value })}>
+        <select value={f.tijdslot} title="Tijdslot" onChange={(e) => setF({ ...f, tijdslot: e.target.value })}>
           {tijdsloten.map((t) => <option key={t.id} value={t.id}>{t.dag_label} {t.start_tijd?.slice(0, 5)} {t.naam}</option>)}
         </select>
-          <select value={f.activiteit} onChange={(e) => setF({ ...f, activiteit: e.target.value })}>
+        <select value={f.activiteit} title="Activiteit" onChange={(e) => setF({ ...f, activiteit: e.target.value })}>
           {activiteiten.map((a) => <option key={a.id} value={a.id}>{a.naam}</option>)}
         </select>
-          <select value={f.locatie} onChange={(e) => setF({ ...f, locatie: e.target.value })}>
+        <select value={f.locatie} title="Locatie" onChange={(e) => setF({ ...f, locatie: e.target.value })}>
           <option value="">— locatie —</option>
           {locaties.map((l) => <option key={l.id} value={l.id}>{l.naam}</option>)}
         </select>
+        <input placeholder="Opmerking" value={f.opmerkingen} onChange={(e) => setF({ ...f, opmerkingen: e.target.value })} />
       </div>
-        <div className="form-row">
+
+      <details className="editor-detail">
+        <summary>Doelgroep en begeleiding</summary>
+        <div className="editor-grid">
           <select value={f.doel_type} onChange={(e) => {
             setF({ ...f, doel_type: e.target.value, doel: "" });
             if (e.target.value !== "subgroep") setSubgroepGroepFilter("");
@@ -1362,52 +1368,59 @@ function BlokBewerker({ blok, ctx, onSluit, onKlaar }) {
             <option value="">— kies {f.doel_type} —</option>
             {doelOpties.map((o) => <option key={o.id} value={o.id}>{o.naam || o.volledige_naam}</option>)}
           </select>
-        </div>
           {f.doel_type === "subgroep" && (
-          <div className="form-row">
+            <>
               <select value={subgroepGroepFilter || ""} onChange={(e) => { setSubgroepGroepFilter(e.target.value ? Number(e.target.value) : ""); setF({ ...f, doel: "", doel_type: "subgroep" }); }}>
                 <option value="">— alle groepen —</option>
                 {groepen.map((g) => <option key={g.id} value={g.id}>{g.naam}</option>)}
               </select>
               <input placeholder="Nieuwe subgroep" value={nieuweSub} onChange={(e) => setNieuweSub(e.target.value)} />
-            <button type="button" className="btn" onClick={maakSubgroep}>+ Subgroep aanmaken</button>
+              <button type="button" className="btn icon-label" onClick={maakSubgroep} title="Subgroep aanmaken">＋ <span>Subgroep</span></button>
-          </div>
+            </>
           )}
-        <div className="leden-keuze">
-          <div className="muted small">Begeleiders:</div>
-          <div className="chips">
-            {medewerkers.map((m) => <button type="button" key={m.id} className={f.begeleiders.includes(m.id) ? "chip on" : "chip"} onClick={() => toggleBeg(m.id)}>{m.volledige_naam}{m.rol_label ? ` · ${m.rol_label}` : ""}</button>)}
         </div>
+        <div className="chips compact">
+          {medewerkers.map((m) => <button type="button" key={m.id} className={f.begeleiders.includes(m.id) ? "chip on" : "chip"} onClick={() => toggleBeg(m.id)} title={m.rol_label || "Begeleider"}>{m.volledige_naam}{m.rol_label ? ` · ${m.rol_label}` : ""}</button>)}
         </div>
-        <div className="form-row"><input placeholder="Opmerking" value={f.opmerkingen} onChange={(e) => setF({ ...f, opmerkingen: e.target.value })} /></div>
+      </details>
-        <div className="form-row">
+
-          <button className="btn primary" onClick={opslaan}>Opslaan</button>
+      <div className="editor-actions">
-          <button className="btn" onClick={verwijderen}>Verwijderen</button>
+        <button type="button" className="btn primary icon-label" onClick={opslaan} title="Opslaan">✓ <span>Opslaan</span></button>
+        <button type="button" className="btn icon-label" onClick={verwijderen} title="Verwijderen">🗑 <span>Verwijderen</span></button>
       </div>
-        <hr className="modal-hr" />
+
-        <div className="muted small">Groep → subgroep: deel dit vak op onder {splitGroepNaam} (zelfde tijd):</div>
+      <details className="editor-detail split-editor" open>
-        <div className="chips">
+        <summary>Splitsen onder {splitGroepNaam}</summary>
+        <div className="chips compact">
           {splitOpties.map((s) => <button type="button" key={s.id} className={splitSubs.includes(s.id) ? "chip on" : "chip"} onClick={() => toggleSplit(s.id)}>{s.naam}</button>)}
           {splitOpties.length === 0 && <span className="muted small">Nog geen subgroepen onder deze groep.</span>}
         </div>
-        <div className="form-row">
+        {splitSubs.length > 0 && (
+          <div className="split-preview">
+            <div className="split-preview-root">{splitGroepNaam}</div>
+            <div className="split-preview-children">
+              {splitSubs.map((sid) => {
+                const sub = splitOpties.find((s) => s.id === sid) || subs.find((s) => s.id === sid);
+                return <span key={sid}>{sub ? sub.naam : "Subgroep"}</span>;
+              })}
+            </div>
+          </div>
+        )}
+        <div className="editor-grid">
           <input placeholder="Nieuwe subgroep" value={splitNieuw} onChange={(e) => setSplitNieuw(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); maakSplitSub(); } }} />
-          <button type="button" className="btn" onClick={maakSplitSub}>+ Subgroep</button>
+          <button type="button" className="btn icon-label" onClick={maakSplitSub} title="Subgroep toevoegen">＋ <span>Subgroep</span></button>
-        </div>
-        <label className="veld"><input type="checkbox" checked={verwijderOrig} onChange={(e) => setVerwijderOrig(e.target.checked)} /> oorspronkelijke blok verwijderen na opdelen</label>
-        <div className="form-row">
-          <button className="btn primary" disabled={splitSubs.length === 0} onClick={opdelen}>Opdelen in {splitSubs.length} subgroep(en)</button>
         </div>
+        <label className="veld editor-check"><input type="checkbox" checked={verwijderOrig} onChange={(e) => setVerwijderOrig(e.target.checked)} /> oorspronkelijke blok verwijderen</label>
+        <button type="button" className="btn primary icon-label" disabled={splitSubs.length === 0} onClick={opdelen} title="Opdelen">✂ <span>{splitSubs.length}</span></button>
+      </details>
 
-        <hr className="modal-hr" />
+      <details className="editor-detail">
-        <div className="muted small">Kopiëren naar andere tijden/dagen:</div>
+        <summary>Kopiëren</summary>
-        <div className="chips">
+        <div className="chips compact">
           {tijdsloten.map((t) => <button type="button" key={t.id} className={kopieDoelen.includes(t.id) ? "chip on" : "chip"} onClick={() => toggleKopie(t.id)}>{t.dag_label} {t.start_tijd?.slice(0, 5)} {t.naam}</button>)}
         </div>
-        <div className="form-row">
+        <button type="button" className="btn icon-label" disabled={kopieDoelen.length === 0} onClick={kopieer} title="Kopiëren">⧉ <span>{kopieDoelen.length}</span></button>
-          <button className="btn" disabled={kopieDoelen.length === 0} onClick={kopieer}>Kopieer naar {kopieDoelen.length} tijdslot(en)</button>
+      </details>
-        </div>
-      </div>
     </div>
   );
 }
@@ -1706,21 +1719,33 @@ export function RoosterScherm({ mode }) {
   // Op id vergelijken, niet op naam: twee personen kunnen dezelfde naam hebben.
   const persoonAfwezig = (id, iso) => afwezig.some((a) => a.persoon === id && a.start_datum <= iso && a.eind_datum >= iso);
   const rolAfk = (id) => { const m = medewerkers.find((x) => x.id === id); return m ? (ROL_AFK[m.rol] || "") : ""; };
+  const editorCtx = { activiteiten, locaties, groepen, subgroepen, leerlingen, medewerkers, tijdsloten };
+  const isOpenBlok = (b) => edit && bewerkBlok && bewerkBlok.id === b.id;
+  const toggleOpenBlok = (b) => setBewerkBlok((huidig) => (huidig && huidig.id === b.id ? null : b));
+  const inlineBewerker = (b) => isOpenBlok(b) && (
+    <BlokBewerker
+      blok={b}
+      ctx={editorCtx}
+      onSluit={() => setBewerkBlok(null)}
+      onKlaar={async () => { setBewerkBlok(null); await laadBlokken(); }}
+    />
+  );
   function renderRoosterBlok(b, iso, kal) {
     const uit = uitzOp(b.id, iso);
     const vervallen = !!kal || (uit && uit.vervalt);
     return (
       <div
-        className={(vervallen ? "rooster-blok vervallen" : "rooster-blok") + (edit ? " klikbaar" : "")}
+        className={(vervallen ? "rooster-blok vervallen" : "rooster-blok") + (edit ? " klikbaar" : "") + (isOpenBlok(b) ? " open" : "")}
         key={b.id}
         style={{ borderLeftColor: b.activiteit_kleur }}
-        onClick={edit ? () => setBewerkBlok(b) : undefined}
+        onClick={edit ? () => toggleOpenBlok(b) : undefined}
         title={edit ? "Klik om te bewerken" : undefined}
       >
         <div className="rb-top">
           {edit && <span className="rb-greep" onPointerDown={(e) => startDrag(e, b)} onClick={(e) => e.stopPropagation()} title="Sleep naar ander tijdslot">⠿</span>}
           <strong>{b.activiteit_naam}</strong>
-          {edit && <button className="link danger rb-x" onClick={(e) => { e.stopPropagation(); verwijder(b.id); }} title="Blok verwijderen">×</button>}
+          {edit && <button type="button" className="icon-btn" onClick={(e) => { e.stopPropagation(); toggleOpenBlok(b); }} title="Bewerken">✎</button>}
+          {edit && <button type="button" className="icon-btn danger rb-x" onClick={(e) => { e.stopPropagation(); verwijder(b.id); }} title="Blok verwijderen">×</button>}
         </div>
         <div className="small">Doel: {b.doel_naam} <span className="muted">({b.doel_type})</span></div>
         {b.locatie_naam && <div className="small">Locatie: {b.locatie_naam}</div>}
@@ -1730,11 +1755,38 @@ export function RoosterScherm({ mode }) {
           ))}</div>
         )}
         {kal && <div className="small rb-status">Vervalt - {kal.type_label}</div>}
-        {!kal && uit && uit.vervalt && <div className="small rb-status">Vervalt {uit.opmerking ? `(${uit.opmerking})` : ""}{edit && <> · <button className="link" onClick={(e) => { e.stopPropagation(); herstel(uit.id); }}>herstel</button></>}</div>}
+        {!kal && uit && uit.vervalt && <div className="small rb-status">Vervalt {uit.opmerking ? `(${uit.opmerking})` : ""}{edit && <button type="button" className="icon-btn" title="Herstellen" onClick={(e) => { e.stopPropagation(); herstel(uit.id); }}>↺</button>}</div>}
         {!kal && uit && !uit.vervalt && uit.vervanger_naam && <div className="small rb-verv">Vervanger: {uit.vervanger_naam}</div>}
         {edit && !kal && !uit && (
-          <button className="link danger small rb-verval no-print" onClick={(e) => { e.stopPropagation(); laatVervallen(b, iso); }}>dit vak laten vervallen</button>
+          <button type="button" className="icon-btn danger rb-verval no-print" title="Dit vak laten vervallen" onClick={(e) => { e.stopPropagation(); laatVervallen(b, iso); }}>⊘</button>
         )}
+        {inlineBewerker(b)}
+      </div>
+    );
+  }
+  function renderCompactBlok(b, iso, kal) {
+    const uit = uitzOp(b.id, iso);
+    const vervallen = !!kal || (uit && uit.vervalt);
+    return (
+      <div
+        className={(vervallen ? "split-vak vervallen" : "split-vak") + (edit ? " klikbaar" : "") + (isOpenBlok(b) ? " open" : "")}
+        key={b.id}
+        style={{ borderLeftColor: b.activiteit_kleur }}
+        onClick={edit ? () => toggleOpenBlok(b) : undefined}
+        title={edit ? "Klik om te bewerken" : undefined}
+      >
+        <div className="split-vak-kop">
+          {edit && <span className="rb-greep" onPointerDown={(e) => startDrag(e, b)} onClick={(e) => e.stopPropagation()} title="Sleep naar ander tijdslot">⠿</span>}
+          <strong>{b.activiteit_naam}</strong>
+          {edit && <button type="button" className="icon-btn" onClick={(e) => { e.stopPropagation(); toggleOpenBlok(b); }} title="Bewerken">✎</button>}
+          {edit && <button type="button" className="icon-btn danger" onClick={(e) => { e.stopPropagation(); verwijder(b.id); }} title="Blok verwijderen">×</button>}
+        </div>
+        <div className="split-vak-meta">
+          {b.locatie_naam && <span>{b.locatie_naam}</span>}
+          {b.begeleiders_namen.length > 0 && <span>{b.begeleiders_namen.map((x) => x.naam).join(", ")}</span>}
+          {vervallen && <span className="rb-status">Vervalt</span>}
+        </div>
+        {inlineBewerker(b)}
       </div>
     );
   }
@@ -1750,16 +1802,24 @@ export function RoosterScherm({ mode }) {
     const out = losse.map((b) => renderRoosterBlok(b, iso, kal));
     if (scopeType === "leerplein" && scopeId && perGroep.size > 0) {
       const leerplein = leerpleinen.find((l) => l.id === Number(scopeId));
+      const kolommen = [...perGroep.entries()];
       out.push(
         <div className="blok-splitsing leerplein-splitsing" key={`leerplein-${scopeId}`}>
-          <div className="split-groep">{leerplein ? leerplein.naam : "Leerplein"}</div>
+          <div className="split-header">
+            <span className="split-icon">⤴</span>
+            <div className="split-title">
+              <strong>{leerplein ? leerplein.naam : "Leerplein"}</strong>
+              <span>Leerplein → groepen</span>
+            </div>
+            <span className="split-count">{kolommen.length}</span>
+          </div>
           <div className="split-kolommen">
-            {[...perGroep.entries()].map(([gid, groepBlokken]) => {
+            {kolommen.map(([gid, groepBlokken]) => {
               const groep = groepen.find((g) => g.id === gid);
               return (
                 <div className="split-kolom" key={gid}>
                   <div className="split-kop">{groep ? groep.naam : "Groep"}</div>
-                  {groepBlokken.map((b) => renderRoosterBlok(b, iso, kal))}
+                  {groepBlokken.map((b) => renderCompactBlok(b, iso, kal))}
                 </div>
               );
             })}
@@ -1777,14 +1837,22 @@ export function RoosterScherm({ mode }) {
       const groep = groepen.find((g) => g.id === gid);
       const heleGroep = groepBlokken.filter((b) => b.groep === gid);
       const subIds = [...new Set(groepBlokken.filter((b) => b.subgroep).map((b) => b.subgroep))];
+      const kolomAantal = subIds.length + (heleGroep.length > 0 ? 1 : 0);
       out.push(
         <div className="blok-splitsing" key={`split-${gid}`}>
-          <div className="split-groep">{groep ? groep.naam : "Groep"}</div>
+          <div className="split-header">
+            <span className="split-icon">⤴</span>
+            <div className="split-title">
+              <strong>{groep ? groep.naam : "Groep"}</strong>
+              <span>Groep → subgroepen</span>
+            </div>
+            <span className="split-count">{kolomAantal}</span>
+          </div>
           <div className="split-kolommen">
             {heleGroep.length > 0 && (
               <div className="split-kolom">
                 <div className="split-kop">Hele groep</div>
-                {heleGroep.map((b) => renderRoosterBlok(b, iso, kal))}
+                {heleGroep.map((b) => renderCompactBlok(b, iso, kal))}
               </div>
             )}
             {subIds.map((sid) => {
@@ -1793,7 +1861,7 @@ export function RoosterScherm({ mode }) {
               return (
                 <div className="split-kolom" key={sid}>
                   <div className="split-kop">{sub ? sub.naam : "Subgroep"}</div>
-                  {blocks.map((b) => renderRoosterBlok(b, iso, kal))}
+                  {blocks.map((b) => renderCompactBlok(b, iso, kal))}
                 </div>
               );
             })}
@@ -1829,9 +1897,9 @@ export function RoosterScherm({ mode }) {
             <span className="week-label">week van {fmtDM(maandag)}</span>
           </div>
         )}
-        {edit && schooljaar && tab === "week" && <button className="btn primary" onClick={() => setToonForm((v) => !v)}>{toonForm ? "Sluiten" : "+ Blok"}</button>}
+        {edit && schooljaar && tab === "week" && <button className="btn primary icon-label" title="Blok toevoegen" onClick={() => setToonForm((v) => !v)}>{toonForm ? "×" : "＋"} <span>{toonForm ? "Sluiten" : "Blok"}</span></button>}
         {printAan && schooljaar && (edit ? tab === "week" : true) && (
-          <button className="btn print-knop" title="Rooster afdrukken" onClick={() => window.print()}>🖨 Afdrukken</button>
+          <button className="btn print-knop icon-label" title="Rooster afdrukken" onClick={() => window.print()}>🖨 <span>Print</span></button>
         )}
       </div>
 
@@ -1853,16 +1921,31 @@ export function RoosterScherm({ mode }) {
             </select>
           )}
           {scopeType !== "alles" && scopeId && <span className="muted small">{zichtbareBlokken.length} blok(ken)</span>}
+          {edit && groepen.length > 0 && (
+            <div className="klas-strip">
+              <button type="button" className={scopeType === "alles" ? "chip on" : "chip"} onClick={() => { setScopeType("alles"); setScopeId(""); }}>Alle</button>
+              {groepen.map((g) => (
+                <button
+                  type="button"
+                  key={g.id}
+                  className={scopeType === "klas" && Number(scopeId) === g.id ? "chip on" : "chip"}
+                  onClick={() => { setScopeType("klas"); setScopeId(String(g.id)); }}
+                >
+                  {g.naam}
+                </button>
+              ))}
+            </div>
+          )}
         </div>
       )}
 
       {edit && (
         <div className="tabbar no-print">
-          <button className={tab === "week" ? "tab on" : "tab"} onClick={() => setTab("week")}>Weekrooster</button>
+          <button className={tab === "week" ? "tab on" : "tab"} title="Weekrooster" onClick={() => setTab("week")}>▦ Week</button>
-          <button className={tab === "indeling" ? "tab on" : "tab"} onClick={() => setTab("indeling")}>Indeling</button>
+          <button className={tab === "indeling" ? "tab on" : "tab"} title="Indeling" onClick={() => setTab("indeling")}>▥ Indeling</button>
-          <button className={tab === "conflicten" ? "tab on" : "tab"} onClick={() => setTab("conflicten")}>Conflicten</button>
+          <button className={tab === "conflicten" ? "tab on" : "tab"} title="Conflicten" onClick={() => setTab("conflicten")}>⚠ Conflicten</button>
-          <button className={tab === "schooljaar" ? "tab on" : "tab"} onClick={() => setTab("schooljaar")}>Schooljaar</button>
+          <button className={tab === "schooljaar" ? "tab on" : "tab"} title="Schooljaar" onClick={() => setTab("schooljaar")}>◷ Jaar</button>
-          <button className={tab === "instellingen" ? "tab on" : "tab"} onClick={() => setTab("instellingen")}>Instellingen</button>
+          <button className={tab === "instellingen" ? "tab on" : "tab"} title="Instellingen" onClick={() => setTab("instellingen")}>⚙ Instellingen</button>
         </div>
       )}
       {edit && tab === "week" && (
@@ -1923,8 +2006,8 @@ export function RoosterScherm({ mode }) {
                   {d.label} <span className="muted">{fmtDM(datum)}</span>
                   {kal && <div className={`tag dag-${kal.type}`}>{kal.type_label}{kal.omschrijving ? `: ${kal.omschrijving}` : ""}</div>}
                   {edit && (kal
-                    ? <button className="link small no-print dag-actie" onClick={() => dagHerstel(kal.id)}>weer lesdag</button>
+                    ? <button type="button" className="icon-btn no-print dag-actie" title="Weer lesdag maken" onClick={() => dagHerstel(kal.id)}>↺</button>
-                    : <button className="link danger small no-print dag-actie" onClick={() => dagVervallen(iso)}>dag laten vervallen</button>
+                    : <button type="button" className="icon-btn danger no-print dag-actie" title="Dag laten vervallen" onClick={() => dagVervallen(iso)}>⊘</button>
                   )}
                 </div>
                 {slots.length === 0 && <div className="muted small">—</div>}
@@ -1979,15 +2062,6 @@ export function RoosterScherm({ mode }) {
         </div>
       )}
 
-      {edit && bewerkBlok && (
-        <BlokBewerker
-          blok={bewerkBlok}
-          ctx={{ activiteiten, locaties, groepen, subgroepen, leerlingen, medewerkers, tijdsloten }}
-          onSluit={() => setBewerkBlok(null)}
-          onKlaar={async () => { setBewerkBlok(null); await laadBlokken(); }}
-        />
-      )}
-
       {edit && ghost && <div className="drag-ghost" style={{ left: ghost.x + 10, top: ghost.y + 10 }}>{ghost.label}</div>}
     </section>
   );

frontend/src/styles.css

@@ -114,11 +114,13 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .tag.dag-vrije_dag { background: #fee2e2; color: #b91c1c; }
 .tag.dag-vakantie { background: #dcfce7; color: #166534; }
 
-.rooster-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 20px; }
+.rooster-grid { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 12px; margin-top: 20px; }
 .rooster-kolom { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; min-height: 80px; }
-.rooster-dag { font-weight: 600; font-size: 13px; text-align: center; padding: 6px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
+.rooster-dag { position: relative; font-weight: 600; font-size: 13px; text-align: center; padding: 6px 32px 6px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; min-height: 36px; }
 .rooster-blok { border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 8px; padding: 8px; margin-bottom: 8px; background: #fff; }
+.rooster-blok.open { box-shadow: 0 0 0 2px var(--brand-soft); }
 .rb-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
+.rb-top strong { min-width: 0; flex: 1; }
 .link.small { font-size: 16px; line-height: 1; padding: 0 4px; }
 @media (max-width: 900px) { .rooster-grid { grid-template-columns: 1fr; } }
 
@@ -140,6 +142,10 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .rb-greep { cursor: grab; color: var(--muted); font-size: 16px; padding: 0 4px; touch-action: none; user-select: none; }
 .rb-greep:active { cursor: grabbing; }
 .rb-x { margin-left: auto; }
+.icon-btn { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; line-height: 1; flex: none; }
+.icon-btn:hover { background: var(--bg); color: var(--ink); border-color: var(--line); }
+.icon-btn.danger { color: #b91c1c; }
+.icon-label { display: inline-flex; align-items: center; gap: 6px; }
 .rb-status { color: #b91c1c; font-weight: 600; }
 .rb-verv { color: #166534; font-weight: 600; }
 .rb-verval { display: inline-block; margin-top: 4px; }
@@ -147,7 +153,7 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 
 .drag-ghost { position: fixed; z-index: 1000; pointer-events: none; background: var(--brand); color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
 
-.dag-actie { display: block; margin-top: 4px; font-size: 11px; }
+.dag-actie { position: absolute; right: 0; top: 3px; margin: 0; }
 .sneltoets-hint { margin: -4px 0 12px; }
 
 /* --- Groepsindeling --- */
@@ -161,14 +167,46 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .indeling-kop { font-weight: 600; margin-bottom: 2px; }
 @media (max-width: 700px) { .indeling-kolommen { grid-template-columns: 1fr; } }
 
-.blok-splitsing { border: 1px solid var(--line); border-radius: 8px; background: #fafbff; padding: 6px; margin-bottom: 8px; }
+.blok-splitsing { position: relative; border: 1px solid #bfdbfe; border-radius: 8px; background: linear-gradient(180deg, #eff6ff 0, #f8fbff 42px, #fff 100%); padding: 8px; margin-bottom: 8px; }
-.split-groep { font-size: 12px; font-weight: 700; color: var(--brand); margin: 0 2px 6px; }
+.split-header { display: flex; align-items: center; gap: 8px; border: 1px solid #bfdbfe; border-radius: 7px; background: #fff; padding: 6px 8px; margin-bottom: 12px; }
-.split-kolommen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 6px; align-items: stretch; }
+.split-icon { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 6px; background: var(--brand); color: #fff; font-weight: 800; flex: none; }
-.split-kolom { min-width: 0; }
+.split-title { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.15; flex: 1; }
+.split-title strong { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.split-title span { font-size: 11px; color: var(--muted); }
+.split-count { min-width: 22px; height: 22px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 800; }
+.split-groep { font-size: 12px; font-weight: 800; color: var(--brand); margin: 0 2px 7px; }
+.split-kolommen { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 7px; align-items: start; padding-top: 12px; }
+.split-kolommen::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; border-top: 2px solid #bfdbfe; }
+.split-kolom { position: relative; min-width: 0; border-left: 1px solid var(--line); padding-left: 7px; }
+.split-kolom::before { content: ""; position: absolute; top: -12px; left: 50%; width: 2px; height: 12px; background: #bfdbfe; }
+.split-kolom:first-child { border-left: 0; padding-left: 0; }
 .split-kop { font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
-.split-kolom .rooster-blok { margin-bottom: 0; }
+.split-vak { position: relative; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 6px; background: #fff; padding: 6px 6px 5px; margin-bottom: 6px; cursor: pointer; box-shadow: 0 1px 0 rgba(31,41,55,.03); }
+.split-vak.open { box-shadow: 0 0 0 2px var(--brand-soft); }
+.split-vak.vervallen { opacity: .55; }
+.split-vak-kop { display: flex; align-items: center; gap: 5px; }
+.split-vak-kop strong { min-width: 0; flex: 1; font-size: 12px; }
+.split-vak-meta { display: flex; flex-direction: column; gap: 1px; color: var(--muted); font-size: 11px; margin-top: 2px; }
+.klas-strip { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
 
-/* --- Blok-bewerker (modal) --- */
+/* --- Blok-bewerker --- */
+.blok-editor { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #f9fafb; cursor: default; }
+.blok-editor-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
+.editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 7px; margin: 7px 0; }
+.editor-grid input, .editor-grid select { width: 100%; min-width: 0; font-size: 12px; padding: 7px 8px; }
+.editor-detail { border-top: 1px dashed var(--line); padding-top: 7px; margin-top: 7px; }
+.editor-detail summary { cursor: pointer; color: var(--brand); font-size: 12px; font-weight: 700; }
+.editor-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
+.editor-check { margin: 6px 0; }
+.chips.compact { gap: 5px; margin-top: 6px; }
+.chips.compact .chip { font-size: 12px; padding: 5px 8px; }
+.split-editor { background: #f8fbff; border: 1px solid #dbeafe; border-radius: 7px; padding: 7px; }
+.split-preview { margin: 8px 0; padding: 8px; border-radius: 7px; background: #fff; border: 1px solid #dbeafe; }
+.split-preview-root { display: inline-block; padding: 5px 9px; border-radius: 6px; background: var(--brand); color: #fff; font-size: 12px; font-weight: 800; }
+.split-preview-children { position: relative; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; padding-top: 13px; }
+.split-preview-children::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; border-top: 2px solid #bfdbfe; }
+.split-preview-children span { position: relative; padding: 5px 8px; border-radius: 6px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700; }
+.split-preview-children span::before { content: ""; position: absolute; top: -13px; left: 50%; width: 2px; height: 13px; background: #bfdbfe; }
 .modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 900; overflow: auto; }
 .modal { background: var(--panel); border-radius: 12px; padding: 18px 20px; width: min(560px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,.3); }
 .modal-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
@@ -182,7 +220,7 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .print-knop { margin-left: auto; background: #fff; }
 @media print {
   .sidebar, .no-print, .tabbar, .rooster-balk, .banner,
-  .rb-greep, .rb-x, .rb-verval, .print-knop, .drag-ghost { display: none !important; }
+  .rb-greep, .rb-x, .rb-verval, .icon-btn, .print-knop, .drag-ghost { display: none !important; }
   body { background: #fff; }
   .app { display: block; }
   .content { padding: 0; }