From 4459f60019ecc7133948a7b88a7fa3c04f50f460 Mon Sep 17 00:00:00 2001
From: bes-r <27369668+bes-r@users.noreply.github.com>
Date: Mon, 6 Jul 2026 20:55:18 +0200
Subject: [PATCH] Improve schedule duplicate blocks and conflict styling

---
 frontend/src/pages.jsx  | 10 +++++-----
 frontend/src/styles.css | 23 +++++++++++++++++++----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages.jsx b/frontend/src/pages.jsx
index 81a1528..99450dd 100644
--- a/frontend/src/pages.jsx
+++ b/frontend/src/pages.jsx
@@ -2464,7 +2464,7 @@ export function RoosterScherm({ mode }) {
       out.push(
         <div className="blok-splitsing enkel" key={`los-${k}`}>
           {klasKop(eerste.doel_naam, eerste.doel_type, blks.length > 1 ? blks.length : null, doelIcoon(eerste.doel_type))}
-          <div className="split-vakken">{blks.map((b) => renderVakKaart(b, iso, kal))}</div>
+          <div className={blks.length > 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{blks.map((b) => renderVakKaart(b, iso, kal))}</div>
         </div>
       );
     });
@@ -2481,7 +2481,7 @@ export function RoosterScherm({ mode }) {
               return (
                 <div className="split-kolom" key={gid}>
                   <div className="split-kop split-node-kop">{groep ? groep.naam : "Groep"}</div>
-                  <div className="split-vakken">{groepBlokken.map((b) => renderVakKaart(b, iso, kal))}</div>
+                  <div className={groepBlokken.length > 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{groepBlokken.map((b) => renderVakKaart(b, iso, kal))}</div>
                 </div>
               );
             })}
@@ -2499,7 +2499,7 @@ export function RoosterScherm({ mode }) {
         out.push(
           <div className="blok-splitsing enkel" key={`groep-${gid}`}>
             {klasKop(groepNaam, "groep", groepBlokken.length > 1 ? groepBlokken.length : null, "👥")}
-            <div className="split-vakken">{groepBlokken.map((b) => renderVakKaart(b, iso, kal))}</div>
+            <div className={groepBlokken.length > 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{groepBlokken.map((b) => renderVakKaart(b, iso, kal))}</div>
           </div>
         );
         return;
@@ -2514,7 +2514,7 @@ export function RoosterScherm({ mode }) {
             {heleGroep.length > 0 && (
               <div className="split-kolom">
                 <div className="split-kop split-node-kop">Hele groep</div>
-                <div className="split-vakken">{heleGroep.map((b) => renderVakKaart(b, iso, kal))}</div>
+                <div className={heleGroep.length > 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{heleGroep.map((b) => renderVakKaart(b, iso, kal))}</div>
               </div>
             )}
             {subIds.map((sid) => {
@@ -2523,7 +2523,7 @@ export function RoosterScherm({ mode }) {
               return (
                 <div className="split-kolom" key={sid}>
                   <div className="split-kop split-node-kop">{sub ? sub.naam : "Subgroep"}</div>
-                  <div className="split-vakken">{blocks.map((b) => renderVakKaart(b, iso, kal))}</div>
+                  <div className={blocks.length > 1 ? "split-vakken meerdere-vakken" : "split-vakken"}>{blocks.map((b) => renderVakKaart(b, iso, kal))}</div>
                 </div>
               );
             })}
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index cc1e166..8b67b1f 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -235,6 +235,14 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .split-kop { font-size: 11px; font-weight: 700; color: var(--muted); margin: 0 0 4px; }
 .split-node-kop { display: inline-flex; max-width: 100%; align-items: center; border: 1px solid #bfdbfe; border-radius: 6px; background: #fff; color: var(--brand); padding: 4px 7px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .split-vakken { display: grid; gap: 6px; }
+.split-vakken.meerdere-vakken {
+  gap: 5px;
+  padding-left: 7px;
+  border-left: 2px solid var(--line);
+}
+.split-vakken.meerdere-vakken .vak-kaart {
+  border-radius: 6px;
+}
 .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; }
@@ -572,7 +580,10 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .wm-vak-kop { display: flex; align-items: center; gap: 4px; }
 .wm-vak-naam { flex: 1; min-width: 0; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
 .wm-vak-meta { color: var(--muted); font-size: 11px; margin-top: 2px; }
-.wm-vak.in-conflict { outline: 2px solid #ef4444; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
+.wm-vak.in-conflict {
+  outline: 0;
+  box-shadow: inset 0 0 0 2px #ef4444, 0 1px 0 rgba(31,41,55,.03);
+}
 .wm-add { width: 100%; border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 7px; padding: 4px; cursor: pointer; font: inherit; font-size: 13px; opacity: .6; }
 .wm-cel:hover .wm-add { opacity: 1; }
 .wm-add:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
@@ -608,8 +619,7 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .details-compact .split-kolommen { gap: 6px; }
 .details-compact .split-vakken { gap: 5px; }
 .details-compact .rb-picto { height: 18px; width: 18px; }
-.details-compact .split-title span,
-.details-compact .split-count { display: none; }
+.details-compact .split-title span { display: none; }
 .rooster-edit .vak-kaart { background: #fff; }
 .rooster-edit .slot-add { opacity: .35; padding: 4px; }
 .rooster-edit .slot-cel:hover .slot-add { opacity: 1; }
@@ -679,4 +689,9 @@ input[type="color"] { padding: 2px; width: 44px; min-width: 44px; height: 38px;
 .conflict-lijst li { padding: 4px 0 4px 16px; position: relative; color: #7f1d1d; font-size: 14px; }
 .conflict-lijst li::before { content: "•"; position: absolute; left: 2px; }
 .conflict-lijst li.waarschuwing { color: #92400e; }
-.rooster-blok.in-conflict, .split-vak.in-conflict, .vak-kaart.in-conflict { outline: 2px solid #ef4444; outline-offset: 1px; box-shadow: 0 0 0 4px rgba(239,68,68,.15); }
+.rooster-blok.in-conflict,
+.split-vak.in-conflict,
+.vak-kaart.in-conflict {
+  outline: 0;
+  box-shadow: inset 0 0 0 2px #ef4444, 0 1px 0 rgba(31,41,55,.03);
+}