Verfijn rooster naar minimalistische opmaak (v0.2.01 beta)

Roostermaker en roosterweergave hebben een rustiger, moderne opmaak
gekregen zonder informatie te verliezen.

- Minder geneste kaders: kolom, tijdvak, splitsing en vakkaart stapelden
  vier randen; nu dragen alleen de dagkolom en de vakkaart een rand en
  scheiden de rest met witruimte en haarlijnen.
- Vakkaart groeit mee met de inhoud in plaats van een vaste hoogte, zodat
  lokaal, begeleiding en opmerkingen niet meer afgekapt worden.
- Meta-regel (locatie, lokaal, begeleiders) zonder pil-achtergronden;
  lange vaknamen lopen door over twee regels met tooltip.
- Bewerkknoppen (vervallen, bewerken, verwijderen) staan gebundeld
  rechtsboven op de kaart en verschijnen bij hover, zodat de vaknaam de
  volle breedte houdt; op aanraakschermen blijven ze zichtbaar.
- Tijdvak toont nu begin- en eindtijd; lege tijdvakken in de weergave
  krijgen een subtiele markering.
- Dagkop is compacter en markeert "vandaag"; dagacties verschijnen bij
  hover. Diagonale arcering bij vrije dagen vervangen door een getinte
  kolom met dagtype-label.
- Subgroep-vertakking en doelgroepkop in neutrale haarlijnen in plaats
  van blauwe kaders.
- Conflicten met een rode rand in plaats van een harde binnenschaduw;
  bij volledig gekleurde vakken blijft de vakkleur staan met rode ring.
- Toolbar, weeknavigatie, detailkeuze en scopebalk strakker uitgelijnd.
- Afdrukken meegenomen: geen sticky dagkop, neutrale randen, en bij
  "vakken in kleur" kleuren lokaal en begeleiding mee.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FAQ4Np13v8fwbTtKHKnwDz

frontend/STYLE-BACKUP.md

@@ -4,4 +4,10 @@ De oorspronkelijke vormgeving staat ongewijzigd in `src/styles.css` en is vastge
 
 De moderne vormgeving wordt afzonderlijk geladen uit `src/modern.css`. Verwijder de import van `./modern.css` uit `src/main.jsx` om tijdelijk terug te keren.
 
-Versie vóór modernisering: `v0.1.0`. Moderne dev-versie: `v0.2.00 beta`.
+Versie vóór modernisering: `v0.1.0`. Moderne dev-versie: `v0.2.01 beta`.
+
+## v0.2.01 beta — rooster
+
+De roostermaker en de roosterweergave hebben een rustiger, minimalistische
+opmaak gekregen (onderaan in `src/modern.css`, sectie "Roostermaker &
+roosterweergave"). De legacy-opmaak in `src/styles.css` is ongewijzigd.

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "roosterwijs-frontend",
-  "version": "0.2.0-beta",
+  "version": "0.2.1-beta",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "roosterwijs-frontend",
-      "version": "0.2.0-beta",
+      "version": "0.2.1-beta",
       "dependencies": {
         "react": "^18.3.1",
         "react-dom": "^18.3.1"

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "roosterwijs-frontend",
   "private": true,
-  "version": "0.2.0-beta",
+  "version": "0.2.1-beta",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/modern.css

@@ -35,7 +35,7 @@ button,a,input,select{transition:border-color .15s,background-color .15s,color .
 .cog-btn{width:100%;min-height:38px;justify-content:flex-start;font-size:15px;padding:0}
 .cog-btn::after{content:"Beheer en instellingen";margin-left:8px;font-size:13px}
 .cog-dropdown{position:static;min-width:0;margin:4px 0 0;box-shadow:none}
-.topbar::after{content:"v0.2.00 beta";order:4;margin:10px 8px 0;color:#98a2b3;font-size:10px}
+.topbar::after{content:"v0.2.01 beta";order:4;margin:10px 8px 0;color:#98a2b3;font-size:10px}
 .content{margin-left:var(--sidebar);width:calc(100% - var(--sidebar));max-width:1680px;padding:32px 38px 48px}
 .content-wide{padding:24px 28px 42px}
 h1{font-size:clamp(24px,2.4vw,30px);line-height:1.2;letter-spacing:-.025em;font-weight:750}
@@ -73,3 +73,188 @@ input:focus,select:focus,textarea:focus{outline:3px solid rgba(36,87,214,.13);bo
 }
 @media print{.content,.content-wide{margin:0;width:100%;padding:0}}
 @media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
+
+/* ===================================================================
+   Roostermaker & roosterweergave — rustig, minimalistisch, met detail.
+   Uitgangspunt: minder geneste kaders. Vroeger stapelden kolom → tijdvak
+   → splitsing → vakkaart vier randen op elkaar; nu dragen alleen de
+   dagkolom en de vakkaart een rand, de rest scheidt met witruimte en
+   haarlijnen. Vakkleur en conflictsignalen blijven leidend.
+   =================================================================== */
+:root{--rw-hair:#eef1f7;--rw-rand:#e6eaf2}
+
+/* --- Kop, weeknavigatie en weergaveopties ------------------------- */
+.rooster-kop{align-items:flex-start;margin-bottom:16px}
+.rooster-scherm .page-subtitle{font-size:13px;color:var(--muted)}
+.rooster-toolbar{gap:12px 16px;padding:10px 12px;border-radius:var(--radius)}
+.rooster-scherm .veld{font-size:12px;font-weight:650;color:#98a2b3;letter-spacing:.01em}
+.week-nav{gap:2px;padding:3px;background:#f4f6fb;border:1px solid var(--rw-rand);border-radius:10px}
+.week-nav .btn.icon{width:32px;min-height:32px;padding:0;border:0;background:transparent;color:var(--muted);font-size:17px;border-radius:7px}
+.week-nav .btn.icon:hover{background:#fff;border:0;color:var(--brand);box-shadow:0 1px 2px rgba(23,32,51,.1)}
+.week-label{min-width:152px;font-size:13px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}
+.week-nav .link.small{margin-left:4px;padding:0 8px;font-size:12px;font-weight:600}
+.weergave-opties{gap:5px}
+.icon-toggle{width:36px;height:36px;border-radius:9px;font-size:15px}
+.icon-toggle:hover{background:#f5f7fb}
+.icon-toggle.on{background:var(--brand-soft);color:var(--brand);border-color:#c8d5f8}
+.segmented{padding:2px;gap:2px;background:#f4f6fb;border-color:var(--rw-rand);border-radius:10px;overflow:visible}
+.detail-keuze .seg{padding:6px 11px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-size:12px;font-weight:650}
+.detail-keuze .seg:hover{color:var(--ink)}
+.detail-keuze .seg.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(23,32,51,.1)}
+.sneltoets-hint{margin:-2px 0 10px;color:#a4adbd;font-size:11px}
+
+/* --- Scopebalk: filteren op klas, leerplein of persoon -------------
+   Geen eigen paneel: de chips dragen zelf al hun vorm, dus alleen lucht. */
+.rooster-scherm .scope-balk{gap:4px 20px;margin:10px 0 0;padding:0 2px;background:transparent;border:0;box-shadow:none}
+.scope-label{font-size:10px;letter-spacing:.1em;color:#a4adbd}
+.scope-balk .chip{min-height:30px;padding:5px 11px;border-radius:8px;font-size:12px;color:#475467}
+.scope-balk .chip:hover{background:#f5f7fb;border-color:#ced6e2}
+.scope-balk .chip.on{background:var(--brand-soft);border-color:#b9c9f5;color:var(--brand);font-weight:700}
+.scope-persoon{min-height:36px;padding:6px 10px;font-size:13px}
+.scope-aantal{font-size:12px}
+
+/* --- Tabbalk (alleen roostermaker) -------------------------------- */
+.tabbar{gap:2px;margin:16px 0;border-bottom-color:var(--rw-rand)}
+.tab{padding:9px 13px;border-bottom-width:2px;border-radius:8px 8px 0 0;font-size:13.5px;font-weight:600}
+.tab:hover{background:#f5f7fb}
+.tab.on{background:transparent;border-bottom-color:var(--brand)}
+
+/* --- Weekraster: dagkolommen -------------------------------------- */
+.rooster-grid{gap:12px;margin-top:16px}
+.rooster-kolom{padding:0 0 6px;background:#fff;border:1px solid var(--rw-rand);border-radius:var(--radius);min-height:120px}
+.rooster-kolom.vrij{background:#fcfcfd}
+.rooster-dag{position:sticky;top:0;z-index:3;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 7px;min-height:0;margin:0;padding:11px 74px 10px 13px;background:#fff;border-bottom:1px solid var(--rw-hair);border-radius:calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;font-size:13px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
+.dag-datum{font-size:12px;font-weight:600;color:#98a2b3;font-variant-numeric:tabular-nums}
+.rooster-dag .tag{flex:0 0 100%;margin-top:5px;font-size:11px}
+/* Vandaag: rustig gemarkeerd, niet schreeuwerig. */
+.rooster-kolom.vandaag{border-color:#c4d3f8}
+.rooster-kolom.vandaag .rooster-dag{background:var(--brand-soft);border-bottom-color:#d3dffb;color:var(--brand)}
+.rooster-kolom.vandaag .dag-datum{color:var(--brand);opacity:.72}
+/* Dagacties (vervallen/leegmaken/eenmalig) blijven uit beeld tot je erbij bent. */
+.dag-acties{top:8px;right:8px;gap:1px;background:transparent;opacity:0;transition:opacity .15s}
+.rooster-kolom:hover .dag-acties,.dag-acties:focus-within{opacity:1}
+.dag-acties .icon-btn{width:24px;height:24px;border-radius:7px;font-size:12px}
+
+/* --- Tijdvakken: scheiden met een haarlijn, geen doos-in-doos ------ */
+.slot-cel{margin:0;padding:10px 12px 12px;background:transparent;border:0;border-top:1px solid var(--rw-hair);border-radius:0}
+.rooster-dag+.slot-cel{border-top:0}
+.slot-cel.hover{background:var(--brand-soft);box-shadow:inset 0 0 0 1px #c8d5f8}
+.slot-tijd{display:flex;align-items:baseline;gap:7px;max-width:100%;margin-bottom:7px;padding:0;background:transparent;border:0;border-radius:0;font-size:11px;font-weight:700;overflow:visible}
+.st-tijd{color:#475467;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
+.st-naam{min-width:0;color:#a4adbd;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.slot-leeg{color:#d3d9e4;font-size:12px;line-height:1}
+.slot-add{margin-top:8px;padding:6px;border:1px dashed #dfe4ee;border-radius:9px;color:#a4adbd;font-size:12px;font-weight:600;opacity:0}
+.rooster-edit .slot-add{padding:6px;opacity:0}
+.slot-cel:hover .slot-add,.rooster-edit .slot-cel:hover .slot-add,.slot-add:focus-visible{opacity:1}
+.slot-add:hover{border-color:#b9c9f5;background:var(--brand-soft);color:var(--brand)}
+/* Vrije dag: de getinte kolom en het dagtype-label zijn het signaal —
+   de oude diagonale arcering was alleen maar onrustig. */
+.rooster-kolom.vrij .slot-cel{opacity:.5}
+.slot-cel[data-vrij]{background:transparent}
+
+/* --- Doelgroep-kop boven de vakken (klas / leerling / leerplein) --- */
+.blok-splitsing,.blok-splitsing.enkel{margin:0 0 12px;padding:0;background:transparent;border:0;border-radius:0}
+.slot-cel .blok-splitsing:last-of-type{margin-bottom:0}
+.split-header{gap:6px;margin-bottom:7px;padding:0 0 5px;background:transparent;border:0;border-bottom:1px solid var(--rw-hair);border-radius:0}
+.split-icon{width:16px;height:16px;background:transparent;color:inherit;font-size:12px;filter:grayscale(1);opacity:.7}
+.split-title strong{font-size:12px;font-weight:700;color:var(--ink)}
+.split-title span{font-size:10px;color:#a4adbd;letter-spacing:.02em}
+.split-count{min-width:19px;height:19px;background:#f1f4fa;color:#667085;border-radius:6px;font-size:11px;font-weight:700}
+/* Vertakking naar subgroepen: neutrale haarlijnen in plaats van blauwe balken. */
+.split-kolommen{gap:10px;margin-left:5px;padding:8px 0 0 13px;border-left:1px solid var(--rw-rand)}
+.split-kolommen::before{left:-1px;height:8px;border-left:1px solid var(--rw-rand)}
+.split-kolom::before{top:11px;left:-13px;width:13px;border-top:1px solid var(--rw-rand)}
+.split-node-kop{margin-bottom:5px;padding:0 0 3px;background:transparent;border:0;color:#667085;font-size:11px;font-weight:700}
+.split-vakken{gap:7px;min-width:0}
+.split-vakken.meerdere-vakken{gap:7px;padding-left:0;border-left:0}
+.split-vakken.meerdere-vakken .vak-kaart{border-radius:10px}
+
+/* --- De vakkaart: het enige echte kaartje in het rooster ---------- */
+/* min-width:0 is nodig: als grid-item zou de kaart anders niet onder zijn
+   min-content-breedte krimpen en over de kolomrand heen lopen. */
+.vak-kaart{height:auto;min-height:0;min-width:0;gap:5px;padding:9px 11px;border:1px solid var(--rw-rand);border-left:3px solid var(--brand);border-radius:10px;box-shadow:none;overflow:visible}
+.vak-kaart.klikbaar:hover{border-color:#ced6e2;border-left-color:var(--vk-kleur);box-shadow:0 4px 14px rgba(23,32,51,.09)}
+.vak-kaart.open{border-color:var(--brand);border-left-color:var(--brand);box-shadow:0 0 0 3px rgba(36,87,214,.13)}
+.vak-kaart.vervallen{opacity:1;background:#fbfbfc;border-color:var(--rw-hair);border-left-color:#d3d9e4}
+.vak-kaart.vervallen .vk-naam,.vak-kaart.vervallen .vk-meta{color:#98a2b3}
+.vk-kop{gap:6px;align-items:flex-start}
+/* Lange vaknamen mogen over twee regels: in smalle subgroepkolommen is
+   afkappen op één regel te veel informatieverlies. */
+.vk-naam{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13px;font-weight:650;letter-spacing:-.01em;line-height:1.32;color:var(--ink);white-space:normal;overflow-wrap:break-word;overflow:hidden}
+.detail-compact .vk-naam{-webkit-line-clamp:1}
+/* Meta zonder pil-achtergronden: het icoon groepeert al, witruimte scheidt. */
+.vk-meta{align-items:center;gap:3px 10px;margin-top:1px;overflow:visible}
+.vk-tag{gap:4px;padding:0;background:transparent;border-radius:0;color:#667085;font-size:11px;font-weight:550;line-height:1.45}
+.vk-opmerking{margin-top:3px;padding-top:0;color:#98a2b3;font-size:11px}
+.rb-stage{color:var(--warn);font-size:11px}
+.rb-status,.rb-verv{font-size:11px}
+.rb-status{color:var(--danger)}
+.rb-verv{color:var(--on)}
+/* Bewerkacties zweven rechtsboven en verschijnen bij hover: zo blijft de
+   volle kaartbreedte voor de vaknaam, ook in smalle subgroepkolommen. */
+.vk-acties{position:absolute;top:6px;right:6px;z-index:2;display:inline-flex;gap:1px;padding:2px;background:#fff;border:1px solid var(--rw-rand);border-radius:8px;box-shadow:0 2px 8px rgba(23,32,51,.13);opacity:0;pointer-events:none;transition:opacity .12s}
+.vak-kaart:hover .vk-acties,.vak-kaart:focus-within .vk-acties,.vak-kaart.open .vk-acties{opacity:1;pointer-events:auto}
+.vk-acties .icon-btn{width:24px;height:24px;border-radius:6px;font-size:13px}
+.rb-greep{padding:0 1px;font-size:14px;opacity:0;transition:opacity .12s}
+.vak-kaart:hover .rb-greep,.vak-kaart.open .rb-greep{opacity:.6}
+.rb-status .icon-btn{opacity:1}
+/* Volledig gekleurde variant blijft leesbaar zonder extra randen. */
+.vak-kaart.kleur-vlak{border-color:transparent;border-left-color:rgba(0,0,0,.16);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
+.vak-kaart.kleur-vlak .vk-tag,.vak-kaart.kleur-vlak .vk-opmerking,.vak-kaart.kleur-vlak .rb-stage{color:inherit;opacity:.85}
+.vak-kaart.kleur-vlak.vervallen{opacity:.45}
+.vak-kaart.kleur-vlak.vervallen .vk-naam,.vak-kaart.kleur-vlak.vervallen .vk-meta{color:inherit}
+
+/* --- Detailniveaus ------------------------------------------------ */
+.rooster-view.details-compact .vak-kaart,.detail-uitgebreid .vak-kaart{height:auto;min-height:0}
+.rooster-view.details-compact .vak-kaart{padding:7px 11px}
+.rooster-view.details-compact .blok-splitsing{background:transparent;border:0}
+.rooster-view.details-compact .split-header{background:transparent;margin-bottom:6px}
+.details-compact .split-vakken,.details-compact .split-kolommen{gap:6px}
+.detail-uitgebreid .vak-kaart{padding:10px 12px}
+
+/* --- Conflicten: duidelijk, maar zonder rode schreeuw -------------- */
+.conflict-banner{margin-bottom:16px;border-color:#f3c2c7;border-radius:var(--radius)}
+.conflict-kop{padding:11px 14px;color:#a4303f;font-weight:600}
+.conflict-lijst li{font-size:13px;color:#8f3540}
+.rooster-blok.in-conflict,.split-vak.in-conflict,.vak-kaart.in-conflict{box-shadow:none;background:#fffafa;border-color:#eda9b0;border-left-color:var(--danger)}
+.rooster-view .vak-kaart.in-conflict::after{content:"⚠";position:absolute;top:8px;right:9px;color:var(--danger);font-size:11px;line-height:1}
+.rooster-view .vak-kaart.in-conflict .vk-naam{padding-right:14px}
+/* Bij een volledig gekleurd vak blijft de vakkleur staan; het conflict
+   wordt dan met een rode ring gemarkeerd in plaats van met een vlak. */
+.vak-kaart.kleur-vlak.in-conflict{background:var(--vk-kleur);border-color:var(--danger);border-left-color:var(--danger);box-shadow:0 0 0 2px rgba(200,62,77,.4)}
+.rooster-view .vak-kaart.kleur-vlak.in-conflict::after{color:inherit}
+
+/* --- Sleep-etiket + modaal ---------------------------------------- */
+.drag-ghost{padding:7px 13px;border-radius:9px;font-size:12.5px;box-shadow:0 10px 26px rgba(23,32,51,.28)}
+.modal{border-top-width:1px;border-color:var(--line);border-radius:16px;box-shadow:0 26px 70px rgba(23,32,51,.22)}
+.modal-kop h2{font-size:17px;letter-spacing:-.02em}
+.modal-editor{background:#fbfcfe;border-color:var(--rw-rand);border-radius:12px}
+.editor-detail summary{font-size:12px;letter-spacing:.01em}
+
+/* --- "Dagen onder elkaar": tijdvakken krijgen daar wél een kader --- */
+.rooster-grid.lijst{gap:14px}
+.rooster-grid.lijst .rooster-kolom{padding:0 12px 12px;gap:10px}
+.rooster-grid.lijst .rooster-dag{margin:0 -12px 2px}
+.rooster-grid.lijst .slot-cel{padding:9px 11px 11px;border:1px solid var(--rw-hair);border-radius:11px}
+
+/* --- Aanraakschermen: verborgen acties altijd tonen ----------------
+   Zonder hover moet alles bereikbaar zijn; de actieknoppen gaan dan
+   terug in de regel in plaats van over de vaknaam heen te zweven. */
+@media(hover:none){
+ .rb-greep,.dag-acties,.slot-add,.rooster-edit .slot-add{opacity:1}
+ .vk-acties{position:static;margin-left:auto;padding:0;background:transparent;border:0;box-shadow:none;opacity:1;pointer-events:auto}
+}
+@media(max-width:900px){
+ .rooster-toolbar{gap:10px}.week-label{min-width:0;flex:1}
+ .rooster-kolom{min-height:0}
+}
+@media print{
+ .rooster-kolom,.rooster-grid.lijst .slot-cel{border-color:#bbb}
+ .rooster-dag{position:static;border-bottom-color:#bbb;padding-right:13px}
+ .rooster-kolom.vandaag,.rooster-kolom.vandaag .rooster-dag{border-color:#bbb;background:#fff;color:#000}
+ .slot-cel{border-top-color:#ddd}
+ .vak-kaart{break-inside:avoid;box-shadow:none}
+ .slot-leeg,.slot-add{display:none!important}
+ /* Bij "vakken in kleur" moeten ook lokaal/begeleiding meekleuren. */
+ body.print-kleur .vak-kaart .vk-tag,body.print-kleur .vak-kaart .vk-opmerking,body.print-kleur .vak-kaart .rb-stage{color:inherit!important}
+}

frontend/src/pages.jsx

@@ -2151,6 +2151,7 @@ export function RoosterScherm({ mode }) {
   const weekDatums = [0, 1, 2, 3, 4].map((i) => plusDagen(maandag, i));
   const vanISO = fmtISO(maandag);
   const totISO = fmtISO(plusDagen(maandag, 6));
+  const vandaagISO = fmtISO(new Date());
 
   async function laadBlokken() {
     if (!schooljaar) { setBlokken([]); return; }
@@ -2417,9 +2418,14 @@ export function RoosterScherm({ mode }) {
         <div className="vk-kop">
           {edit && <span className="rb-greep" onPointerDown={(e) => startDrag(e, b)} onClick={(e) => e.stopPropagation()} title="Sleep naar ander tijdslot">⠿</span>}
           {b.activiteit_pictogram && <img src={b.activiteit_pictogram} alt="" className="rb-picto" />}
-          <strong className="vk-naam">{b.activiteit_icoon || vakIcoon(b.activiteit_naam)} {b.activiteit_naam}</strong>
+          <strong className="vk-naam" title={b.activiteit_naam}>{b.activiteit_icoon || vakIcoon(b.activiteit_naam)} {b.activiteit_naam}</strong>
-          {edit && <button type="button" className="icon-btn" onClick={(e) => { e.stopPropagation(); toggleOpenBlok(b); }} title="Bewerken">✎</button>}
+          {edit && (
-          {edit && <button type="button" className="icon-btn danger rb-x" onClick={(e) => { e.stopPropagation(); verwijder(b.id); }} title="Blok verwijderen">×</button>}
+            <span className="vk-acties no-print">
+              {!kal && !uit && <button type="button" className="icon-btn rb-verval" onClick={(e) => { e.stopPropagation(); laatVervallen(b, iso); }} title="Dit vak laten vervallen">⊘</button>}
+              <button type="button" className="icon-btn" onClick={(e) => { e.stopPropagation(); toggleOpenBlok(b); }} title="Bewerken">✎</button>
+              <button type="button" className="icon-btn danger rb-x" onClick={(e) => { e.stopPropagation(); verwijder(b.id); }} title="Blok verwijderen">×</button>
+            </span>
+          )}
         </div>
         {(b.locatie_naam || b.lokaal_naam || b.begeleiders_namen.length > 0) && (
           <div className="vk-meta">
@@ -2437,9 +2443,6 @@ export function RoosterScherm({ mode }) {
         {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 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 type="button" className="icon-btn danger rb-verval no-print" title="Dit vak laten vervallen" onClick={(e) => { e.stopPropagation(); laatVervallen(b, iso); }}>⊘</button>
-        )}
       </div>
     );
   }
@@ -2783,9 +2786,10 @@ export function RoosterScherm({ mode }) {
             const kal = kalenderOp(iso);
             const slots = tijdsloten.filter((t) => t.dag === d.value).sort((a, b) => a.volgorde - b.volgorde);
             return (
-              <div className={kal ? "rooster-kolom vrij" : "rooster-kolom"} key={d.value}>
+              <div className={"rooster-kolom" + (kal ? " vrij" : "") + (iso === vandaagISO ? " vandaag" : "")} key={d.value}>
                 <div className="rooster-dag">
-                  {d.label} <span className="muted">{fmtDM(datum)}</span>
+                  <span className="dag-naam">{d.label}</span>
+                  <span className="dag-datum">{fmtDM(datum)}</span>
                   {kal && <div className={`tag dag-${kal.type}`}>{kal.type_label}{kal.omschrijving ? `: ${kal.omschrijving}` : ""}</div>}
                   {edit && (
                     <span className="dag-acties no-print">
@@ -2811,8 +2815,12 @@ export function RoosterScherm({ mode }) {
                       data-vrij={kal ? "1" : undefined}
                       key={t.id}
                     >
-                      <div className="slot-tijd">{t.start_tijd?.slice(0, 5)} {t.naam}</div>
+                      <div className="slot-tijd">
+                        <span className="st-tijd">{t.start_tijd?.slice(0, 5)}{t.eind_tijd ? `–${t.eind_tijd.slice(0, 5)}` : ""}</span>
+                        {t.naam && <span className="st-naam">{t.naam}</span>}
+                      </div>
                       {renderSlotBlokken(slotBlokken, iso, kal)}
+                      {!edit && slotBlokken.length === 0 && <div className="slot-leeg">—</div>}
                       {edit && !kal && (
                         <button type="button" className="slot-add no-print" title="Vak toevoegen in dit tijdvak" onClick={() => openNieuwBlokVoorSlot(t.id)}>＋ vak</button>
                       )}