*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
user-select: none;
-webkit-user-select: none;
}

button { user-select: none; -webkit-user-select: none; }

:root {
color-scheme: dark;
--z: #191919;
--w: #fff;
--g3: #a0a0a0;
--g4: #505050;
--nav-h: 44px;
--grid-h: 80px;
--tb-w: 44px;
/* School-kleur variabelen worden dynamisch via JS geüpdatet */
--school-kleur: #2563eb;
--school-kleur-tekst: #fff;
--school-kleur-tekst-dim: rgba(255,255,255,0.4);
--school-kleur-glow1: rgba(37,99,235,.18);
--school-kleur-glow2: rgba(37,99,235,.08);
--school-kleur-35a: rgba(37,99,235,.35);
/* Viewport hoogte: JS overschrijft dit met window.innerHeight voor mobile toolbars */
--vch: 100dvh;
}

html, body {
height: 100%;
overflow: hidden;
background: var(--z);
font-family: 'Helvetica Neue', Arial, sans-serif;
}

input, textarea, [contenteditable] { user-select: text; }

/* ── LOGIN SCHERM ── */
#loginScherm {
position: fixed;
inset: 0;
background: var(--z);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 32px;
z-index: 1000;
}

#loginScherm h1 {
font-size: 48px;
font-weight: 900;
color: var(--w);
letter-spacing: -2px;
}

#loginScherm h1 span {
color: var(--g3);
}

.lcard {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 32px;
width: 360px;
box-shadow: 0 8px 32px rgba(0,0,0,.28);
}

.lcard label {
display: block;
font-size: 10px;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 8px;
}

.lcard input:not([type="checkbox"]) {
width: 100%;
background: #f8fafc;
border: 1px solid #cbd5e1;
color: #1e293b;
font-size: 20px;
font-weight: 900;
letter-spacing: 3px;
text-align: center;
text-transform: uppercase;
padding: 14px;
border-radius: 8px;
outline: none;
}

.lcard input:not([type="checkbox"]):focus {
border-color: var(--school-kleur, #2563eb);
background: #fff;
}

#pilotWachtwoord, #ncWachtwoord {
font-size: 16px;
font-weight: 700;
letter-spacing: 2px;
}

.lbtn {
width: 100%;
margin-top: 16px;
padding: 14px;
background: #1e293b;
color: #ffffff;
font-size: 13px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: opacity .15s;
}

.lbtn:hover { opacity: .85; }
.lbtn:disabled { opacity: .5; cursor: wait; }

#onthoudLabel { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #64748b; cursor: pointer; user-select: none; margin-top: 10px; line-height: 1; white-space: nowrap; }
#onthoudLabel input { cursor: pointer; accent-color: var(--school-kleur, #2563eb); flex-shrink: 0; width: 14px; height: 14px; margin: 0; padding: 0; }

.lfout {
color: #dc2626;
font-size: 11px;
font-weight: 700;
text-align: center;
margin-top: 8px;
display: none;
}

.lhint {
font-size: 10px;
color: #94a3b8;
text-align: center;
margin-top: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}

#loginScherm p { color: var(--g3) !important; }

/* ── LAUNCHER SCHERM ── */
#launcherScherm {
position: fixed;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.05), transparent 45%), #181a1f;
display: none;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
z-index: 999;
}

#lnTopbar {
position: sticky;
top: 0;
z-index: 10;
height: 64px;
flex: none;
background: rgba(15,17,22,.88);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
display: flex;
align-items: center;
padding: 0 36px;
gap: 16px;
}

#lnLogo { font-size: 20px; font-weight: 900; color: #fff; letter-spacing: -.5px; }
#lnLogo span { color: #333; }

.ln-topbtn {
height: 26px;
padding: 0 12px;
border-radius: 6px;
border: 1px solid rgba(255,255,255,.07);
background: rgba(255,255,255,.03);
color: #8888a8;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
cursor: pointer;
font-family: inherit;
display: flex;
align-items: center;
gap: 6px;
transition: border-color .15s, color .15s, background .15s;
}

.ln-topbtn:hover { border-color: rgba(255,255,255,.14); color: #999; background: rgba(255,255,255,.05); }
.ln-topbtn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* ── LAUNCHER WEERGAVE-TOGGLE ── */
#lnViewToggle { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; height: 100%; background: transparent; padding: 0; gap: 2px; }
.ln-view-btn { padding: 0 20px; border: none; border-radius: 0; background: transparent; color: #8888a8; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; font-family: inherit; transition: color .2s; white-space: nowrap; display: flex; align-items: center; position: relative; }
.ln-view-btn::after { content: ''; position: absolute; bottom: 8px; left: 20px; right: 20px; height: 2px; background: transparent; transition: background .2s; }
.ln-view-btn.actief { color: #d8d8e0; background: transparent; }
.ln-view-btn.actief::after { background: rgba(255,255,255,.35); }
.ln-view-btn:not(.actief):hover { color: #b0b0cc; }

/* ── LAUNCHER ROOSTERVIEW ── */
#lnRooster { display: none; flex-direction: column; padding: 16px 32px; box-sizing: border-box; height: calc(var(--vch) - 64px); overflow: hidden; background: #f3f2ef; }
.ln-rooster-grid { display: grid; flex: 1; grid-template-columns: 64px repeat(5, 1fr); column-gap: 10px; row-gap: 4px; min-width: 560px; min-height: 0; overflow: visible; }
.ln-rr-head { font-size: clamp(10px, 1.3vh, 14px); font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #4a5568; padding: 0 6px 28px; display: flex; align-items: flex-end; justify-content: center; gap: 6px; border-bottom: 1px solid #cdd6e0; }
.ln-rr-print-btn { background: none; border: none; cursor: pointer; opacity: .35; color: inherit; padding: 0; display: flex; align-items: center; line-height: 0; flex-shrink: 0; transition: opacity .15s; }
.ln-rr-print-btn:hover { opacity: .8; }
.ln-rr-head.vandaag { border-bottom: 1px solid #cdd6e0; }
.ln-rr-head.vandaag .ln-rr-naam { text-decoration: underline; text-decoration-color: var(--school-kleur, #2563eb); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ln-rr-head-info { display: flex; flex-direction: column; align-items: center; }
.ln-rr-datum { font-size: 10px; color: #94a3b8; font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 5px; }
.ln-rr-time { font-size: 13px; font-weight: 700; color: #2d3748; padding: 2px 14px 0 0; display: flex; align-items: flex-start; justify-content: flex-end; border-right: 1px solid #cdd6e0; }
.ln-rr-leeg { background: rgba(0,0,0,.03); border-radius: 5px; min-height: 0; border: 1px dashed rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; }
.ln-rr-leeg::after { content: '+'; font-size: 16px; font-weight: 300; color: rgba(0,0,0,.1); }
.ln-rr-les { background: #faf9f7; border-radius: 5px; overflow: hidden; cursor: pointer; position: relative; min-height: 0; border: 1px solid rgba(0,0,0,.07); box-shadow: 0 2px 8px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.9); transition: background .15s, border-color .15s, transform .12s, box-shadow .15s; }
.ln-rr-les:hover { background: #f8faff; border-color: rgba(0,0,0,.15); transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.05); }
.ln-rr-les.placeholder { background: rgba(0,0,0,.018); border: 1px dashed rgba(0,0,0,.06); cursor: default; box-shadow: none; }
.ln-rr-les.placeholder:hover { transform: none; box-shadow: none; }
.ln-rr-body { padding: 10px; display: flex; flex-direction: column; justify-content: center; min-height: 0; box-sizing: border-box; }
.ln-rr-vak { font-size: clamp(9px, 1.3vh, 14px); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: rgba(0,0,0,.32); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-rr-les.rr-actief .ln-rr-vak { font-style: italic; }
.ln-rr-les.heeft-doel { border: none; box-shadow: 0 2px 16px rgba(0,0,0,.45); }
.ln-rr-les.rr-leeg     { background: #f7f7f5; border-color: rgba(20,30,45,.10); box-shadow: 0 1px 2px rgba(0,0,0,.035); }
.ln-rr-les.rr-bezig    { background: #fefae8; border-color: rgba(175,135,40,.22); }
.ln-rr-les.rr-volledig { background: #f0f7f0; border-color: rgba(55,130,55,.2); }
.ln-rr-les.rr-leeg:hover     { background: #f0f0ed; }
.ln-rr-les.rr-bezig:hover    { background: #fdf5d0; }
.ln-rr-les.rr-volledig:hover { background: #e6f2e6; }
.ln-rr-les.rr-leeg .ln-rr-vak  { color: rgba(0,0,0,.42); }
.ln-rr-les.rr-leeg .ln-rr-tijd { color: #8a9ab0; }
.ln-rr-status-lbl { font-size: clamp(7px, 0.85vh, 9px); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: rgba(0,0,0,.28); margin-top: 5px; }
.ln-rr-les.heeft-doel .ln-rr-body { max-width: 100%; }
.ln-rr-les.heeft-doel .ln-rr-vak { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-rr-doel { position: static; font-size: 10px; font-weight: 600; color: rgba(0,0,0,.45); line-height: 1.25; margin-top: 3px; overflow: hidden; }
.ln-rr-doel-txt { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }
.ln-rr-tijd { font-size: clamp(8px, 1vh, 11px); font-weight: 600; color: #9aa5b4; margin-top: 6px; }
.ln-rr-pauze-span { grid-column: 2 / -1; background: rgba(0,0,0,.045); border-radius: 5px; border: 1px solid rgba(0,0,0,.08); display: flex; align-items: center; justify-content: center; font-size: clamp(8px, 0.9vh, 11px); font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #a0aab8; min-height: 0; }

/* ── ROOSTER CONTROLS ROW ── */
.ln-rr-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(8px, 1.5vh, 20px); gap: 12px; }
/* ── WEEK SELECTOR ── */
.ln-wk-toggle { display: flex; align-items: center; gap: 4px; background: transparent; padding: 0; }
.ln-wk-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 6px 18px; border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: pointer; font-family: inherit; transition: background .15s, border-color .15s, box-shadow .15s; white-space: nowrap; }
.ln-wk-btn .wk-btn-hoofd { font-size: 11px; font-weight: 600; color: rgba(0,0,0,.38); line-height: 1.2; letter-spacing: 0; text-transform: none; }
.ln-wk-btn .wk-btn-datum { font-size: 9px; font-weight: 400; color: rgba(0,0,0,.28); line-height: 1.2; }
.ln-wk-btn.actief { background: #fff; border-color: rgba(0,0,0,.09); box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.ln-wk-btn.actief .wk-btn-hoofd { color: #1e293b; }
.ln-wk-btn.actief .wk-btn-datum { color: rgba(0,0,0,.42); }
.ln-wk-btn:hover:not(.actief):not(:disabled) { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.07); }
.ln-wk-btn:hover:not(.actief):not(:disabled) .wk-btn-hoofd { color: rgba(0,0,0,.55); }
.ln-wk-btn:disabled, .ln-wk-btn.uitgeschakeld { opacity: .3; cursor: not-allowed; pointer-events: none; }
.ln-weekend-tip { font-size: 11px; color: rgba(255,255,255,.4); text-align: center; margin-top: 4px; }
/* ── STEL IN ALS DEZE LESWEEK POPUP ── */
.ln-bevestig-ov { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.ln-bevestig-ov.open { opacity: 1; }
.ln-bevestig { background: #fff; border-radius: 10px; padding: 24px 24px 20px; width: 340px; box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.ln-bevestig-titel { font-size: 15px; font-weight: 700; color: #1a202c; margin-bottom: 8px; }
.ln-bevestig-tekst { font-size: 12px; color: #64748b; line-height: 1.55; margin-bottom: 20px; }
.ln-bevestig-weekkey { font-weight: 700; color: #1a202c; }
.ln-bevestig-btns { display: flex; gap: 8px; justify-content: flex-end; }
.ln-bevestig-btns--spread { justify-content: space-between; align-items: center; }
.ln-bevestig-btns-rechts { display: flex; gap: 8px; }
.ln-bevestig-annuleer { padding: 7px 14px; background: none; border: 1px solid #d1d9e6; border-radius: 6px; font-size: 12px; font-weight: 600; color: #6b7a92; cursor: pointer; font-family: inherit; transition: border-color .12s; }
.ln-bevestig-annuleer:hover { border-color: #a0aab8; }
.ln-bevestig-ok { padding: 7px 16px; background: var(--school-kleur, #2563eb); color: var(--school-kleur-tekst, #fff); border: none; border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: opacity .12s; }
.ln-bevestig-ok:hover { opacity: .86; }
.ln-bevestig-herstel { padding: 7px 14px; background: none; border: 1px solid #d1d9e6; border-radius: 6px; font-size: 11px; font-weight: 600; color: #6b7a92; cursor: pointer; font-family: inherit; transition: border-color .12s; }
.ln-bevestig-herstel:hover { border-color: #a0aab8; }
.ln-rr-rechts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ln-wk-group { display: flex; align-items: center; gap: 16px; }
.ln-wk-note-btn { height: 24px; padding: 0 10px; border-radius: 6px; border: none; background: transparent; color: rgba(0,0,0,.35); font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; white-space: nowrap; }
.ln-wk-note-btn:hover { background: rgba(0,0,0,.06); color: #374151; }
.ln-wk-note-popup { position: fixed; z-index: 999; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.ln-wk-note-editor { font-size: 11px; font-family: inherit; border: 1px solid #e2e8f0; border-radius: 6px; padding: 6px 8px; resize: none; outline: none; width: 240px; color: #1e293b; background: #fff; line-height: 1.4; }
.ln-wk-note-cb-row { display: flex; align-items: center; gap: 5px; font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: rgba(0,0,0,.45); cursor: pointer; user-select: none; }
.ln-wk-note-cb-row input { appearance: none; width: 13px; height: 13px; border: 1.5px solid rgba(0,0,0,.25); border-radius: 3px; background: #fff; cursor: pointer; flex-shrink: 0; position: relative; transition: background .12s, border-color .12s; }
.ln-wk-note-cb-row input:checked { background: #2563eb; border-color: #2563eb; }
.ln-wk-note-cb-row input:checked::after { content: ''; position: absolute; left: 3px; top: 1px; width: 5px; height: 8px; border: 1.5px solid #fff; border-top: none; border-left: none; transform: rotate(45deg); }
.ln-stel-in-week-btn { height: 28px; padding: 0 16px; border-radius: 7px; border: 1px solid rgba(0,0,0,.12); background: #fff; color: #4a5568; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; font-family: inherit; transition: background .15s, box-shadow .15s; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
.ln-stel-in-week-btn:hover { background: #f8faff; box-shadow: 0 2px 8px rgba(0,0,0,.12); }



/* ── ROOSTER DRAG AFFORDANCE ── */
.ln-rr-cel-wrap { position: relative; display: flex; flex-direction: column; min-height: 0; }
.ln-rr-cel-wrap > .ln-rr-les { flex: 1; min-height: 0; }
.ln-rr-les:not(.placeholder)::before { content: ''; position: absolute; right: 6px; left: auto; top: 50%; transform: translateY(-50%); width: 6px; height: 14px; background-image: radial-gradient(circle, rgba(37,99,235,.7) 1.2px, transparent 1.2px); background-size: 3px 4.5px; z-index: 2; pointer-events: none; transition: opacity .15s; opacity: 0; }
.ln-rr-les:not(.placeholder):hover::before { opacity: 1; }
.ln-rr-les:not(.placeholder):hover { border-color: rgba(37,99,235,.45) !important; }
.ln-rr-les.rr-dragging::before { opacity: 0; }

/* ── ROOSTER HOVER INFO ── */
.rr-lesinfo-popover { position: fixed; z-index: 9999; pointer-events: none; background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.13); padding: 10px 13px; max-width: 280px; font-size: 12px; line-height: 1.45; color: #2d3748; }
.rr-tip-vak { font-weight: 700; font-size: 12px; color: #1a202c; margin-bottom: 6px; }
.rr-tip-klas { font-weight: 400; color: #718096; }
.rr-tip-rij { display: flex; flex-direction: column; margin-bottom: 5px; }
.rr-tip-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #a0aec0; margin-bottom: 1px; }
.rr-tip-val { color: #2d3748; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rr-tip-act { display: block; white-space: pre-line; max-height: 5.4em; overflow: hidden; }
.rr-tip-badge { margin-top: 4px; font-size: 10px; color: #2563eb; font-weight: 600; }

/* ── ROOSTER SWAP DRAG ── */
.ln-rr-les:not(.placeholder) { cursor: grab; -webkit-user-select: none; user-select: none; }
.ln-rr-les.rr-dragging { opacity: .88; transform: scale(1.03); box-shadow: 0 12px 32px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.25) !important; cursor: grabbing; z-index: 10; }
.ln-rr-les.rr-drag-over { outline: 2px solid rgba(37,99,235,.82); outline-offset: -2px; background: rgba(37,99,235,.07); box-shadow: 0 0 0 4px rgba(37,99,235,.1), 0 8px 28px rgba(0,0,0,.1); transform: scale(1.01); }
@keyframes rrSwapIn { 0% { transform: scale(1.015); box-shadow: 0 0 0 3px rgba(37,99,235,.6), 0 8px 28px rgba(0,0,0,.15); } 100% { transform: scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.9); } }
.ln-rr-les.rr-swap-in { animation: rrSwapIn .5s ease-out; }


/* ── ROOSTER LES OVERLAY ── */
.rr-ov { position: fixed; z-index: 9999; background: #fff; border-radius: 9px; border: 1px solid rgba(0,0,0,.11); box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08); padding: 14px 14px 14px 10px; box-sizing: border-box; opacity: 0; pointer-events: none; transform: translateY(5px); transition: opacity .1s ease, transform .1s ease; max-height: calc(100vh - 24px); overflow-y: auto; }
.rr-ov.zichtbaar { opacity: 1; pointer-events: auto; transform: translateY(0); }
.rr-ov-vak-wrap { display: flex; align-items: center; gap: 5px; margin-bottom: 11px; }
.rr-ov-vak { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: none; background: none; outline: none; flex: 1; padding: 0; cursor: text; font-family: inherit; }
.rr-ov-vak-pen { flex-shrink: 0; color: #c0cad8; opacity: 0; transition: opacity .15s; cursor: default; position: relative; }
.rr-ov-vak-wrap:hover .rr-ov-vak-pen { opacity: 1; }
.rr-ov-vak-pen[title]:hover::after { content: attr(title); position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%); background: #1a202c; color: #fff; font-size: 10px; font-weight: 500; white-space: nowrap; padding: 3px 7px; border-radius: 4px; pointer-events: none; letter-spacing: .3px; text-transform: none; }
.rr-ov-veld { margin-bottom: 9px; }
.rr-ov-label { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: #b0bac8; margin-bottom: 4px; }
.rr-ov-ta { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 5px; padding: 6px 8px; font-size: 12px; font-family: inherit; color: #1a202c; line-height: 1.5; resize: none; background: #f8fafc; outline: none; transition: border-color .12s; overflow-y: auto; }
.rr-ov-ta:focus { border-color: var(--school-kleur, #3b82f6); background: #fff; }
#rrOvDoel { max-height: 48px; }
#rrOvAct  { max-height: 72px; }
.rr-ov-voet { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 8px; }
.rr-ov-opslaan-btn { padding: 6px 12px; background: none; border: 1px solid #d1d9e6; border-radius: 5px; font-size: 11px; font-weight: 600; color: #6b7a92; cursor: pointer; transition: border-color .12s, color .12s; }
.rr-ov-opslaan-btn:hover { border-color: #a0aab8; color: #3d4a5c; }
.rr-ov-start-btn { display: flex; align-items: center; gap: 5px; padding: 6px 12px; background: var(--school-kleur, #3b82f6); color: var(--school-kleur-tekst, #fff); border: none; border-radius: 5px; font-size: 11px; font-weight: 700; cursor: pointer; transition: opacity .12s; }
.rr-ov-start-btn:hover { opacity: .86; }
#ldDmPanel:empty { display: none; }
.ld-dm-kop { font-size: 10px; font-weight: 600; color: #a0aab8; margin: 14px 0 8px; letter-spacing: .3px; }
.ld-dm-lijst { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.ld-dm-kaart { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 8px; border: 1px solid #e8eef6; background: #f6f8fc; cursor: default; transition: background .12s, border-color .12s; }
.ld-dm-kaart.andere-ctx { opacity: .78; }
.ld-dm-thumb { width: 56px; height: 38px; border-radius: 5px; overflow: hidden; flex-shrink: 0; }
.ld-dm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-dm-thumb-ph { width: 100%; height: 100%; background: #dce5ef; border-radius: 5px; }
.ld-dm-info { flex: 1; min-width: 0; }
.ld-dm-doel { font-size: 12px; font-weight: 500; color: #1a202c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.ld-dm-meta { font-size: 10px; color: #94a3b8; margin-top: 2px; }
.ld-dm-gebruik-btn { flex-shrink: 0; padding: 5px 10px; background: none; border: 1px solid #d1d9e6; border-radius: 6px; font-size: 10px; font-weight: 600; color: #4a5568; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.ld-dm-gebruik-btn:hover { background: #fff; border-color: #93adc8; color: #1a202c; }
.rr-ov-dm { margin-top: 7px; margin-bottom: 2px; }
.rr-ov-dm:empty { display: none; }
.rr-ov-dm-kop { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .55px; color: #a8b4c4; margin-bottom: 5px; }
.rr-ov-dm-lijst { display: flex; flex-direction: column; gap: 3px; }
.rr-ov-dm-kaart { display: flex; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 5px; border: 1px solid #e4ecf4; background: #f5f8fc; cursor: pointer; transition: background .12s, border-color .12s; }
.rr-ov-dm-kaart:hover { background: #eaf1fb; border-color: #c0d4ec; }
.rr-ov-dm-kaart.andere-ctx { opacity: .72; }
.rr-ov-dm-thumb { width: 44px; height: 30px; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.rr-ov-dm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rr-ov-dm-thumb-ph { width: 100%; height: 100%; background: #dce5ef; }
.rr-ov-dm-info { flex: 1; min-width: 0; }
.rr-ov-dm-doel { font-size: 10px; font-weight: 500; color: #2d3748; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.rr-ov-dm-meta { font-size: 9px; color: #94a3b8; margin-top: 1px; }

/* ── LAUNCHER HERO ── */
#lnHero {
position: relative;
height: 416px;
flex: none;
overflow: hidden;
display: none;
}

#lnHeroBgImg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .22;
filter: blur(4px);
transform: scale(1.06);
display: none;
}

.ln-hero-grad {
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(25,25,25,.98) 28%, rgba(25,25,25,.5) 55%, transparent 100%),
linear-gradient(to top, rgba(25,25,25,1) 0%, transparent 55%);
}

.ln-hero-inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: stretch; }

.ln-hero-content {
padding: 48px 32px 32px;
display: flex;
flex-direction: column;
gap: 10px;
width: 42%;
flex: none;
}

.ln-hero-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; color: #444; }
.ln-hero-vak { font-size: clamp(28px, 3.8vw, 52px); font-weight: 900; color: #fff; line-height: 1; letter-spacing: -1px; text-transform: uppercase; }
.ln-hero-doel { font-size: 12px; font-weight: 400; color: #666; font-style: italic; line-height: 1.5; }
.ln-hero-meta { display: flex; gap: 14px; align-items: center; margin-top: 2px; }
.ln-hero-meta span { font-size: 9px; font-weight: 700; color: #3a3a3a; text-transform: uppercase; letter-spacing: 1.5px; }

.ln-hero-btn {
display: flex;
align-items: center;
gap: 8px;
width: fit-content;
margin-top: 10px;
padding: 11px 26px;
background: var(--school-kleur, #fff);
color: var(--school-kleur-tekst, #000);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
border: none;
border-radius: 7px;
cursor: pointer;
font-family: inherit;
transition: opacity .15s;
}

.ln-hero-btn svg { fill: var(--school-kleur-tekst,#000); width: 11px; height: 11px; }

/* ── LAUNCHER INFO PANEEL ── */
#lnHeroInfo { flex: 1; display: flex; align-items: center; padding: 32px 40px 32px 24px; gap: 28px; transition: opacity .2s ease, transform .2s ease; opacity: 1; transform: translateY(0); }
#lnHeroInfo.wisselen { opacity: 0; transform: translateY(4px); }

#lnHeroInfoThumb { width: 429px; height: 254px; flex: none; border-radius: 8px; overflow: hidden; background: #2c2c2c; border: 1px solid #2d2d2d; position: relative; }
#lnHeroInfoThumb img { width: 100%; height: 100%; object-fit: cover; display: none; }
#lnHeroInfoThumbPh { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#lnHeroInfoThumbPh svg { stroke: #2c2c2c; fill: none; stroke-width: 1.5; width: 32px; height: 32px; }

#lnHeroInfoText { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#lnHeroInfoVak { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 2.5px; color: #fff; }
#lnHeroInfoTijd { font-size: 8px; font-weight: 700; color: #4ade80; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 2px; }
.ln-hero-info-label { font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #333; margin-top: 4px; }
#lnHeroInfoDoel { font-size: 12px; font-weight: 400; color: #aaa; font-style: italic; line-height: 1.4; }
#lnHeroInfoAct { font-size: 10px; font-weight: 400; color: #555; line-height: 1.5; }

/* ── LAUNCHER CONTENT & CARDS ── */
#lnContent { padding: 8px 32px 80px; display: flex; flex-direction: column; gap: 40px; }
.ln-dag-naam { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 3px; color: #fff; padding-left: 2px; }

.ln-rij {
display: flex;
flex-wrap: nowrap;
gap: 14px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
user-select: none;
scrollbar-width: none;
}
.ln-rij::-webkit-scrollbar { display: none; }

.ln-card {
width: 260px;
flex: none;
cursor: pointer;
position: relative;
border-radius: 8px;
overflow: hidden;
background: #232323;
border: 1px solid #2c2c2c;
box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s, border-color .2s;
}

.ln-card:hover { transform: scale(1.05) translateY(-3px); box-shadow: 0 24px 60px rgba(0,0,0,.7); border-color: #363636; z-index: 5; }
.ln-card:hover .ln-card-overlay { opacity: 1; }
.ln-card:hover .ln-card-play { opacity: 1; transform: translate(-50%,-50%) scale(1); }

.ln-card-thumb { width: 100%; height: 146px; position: relative; overflow: hidden; background: #191919; border-radius: 8px 8px 0 0; }
.ln-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.ln-card:hover .ln-card-thumb img { transform: scale(1.06); }

.ln-thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; }
.ln-thumb-ph svg { stroke: #2d2d2d; fill: none; stroke-width: 1.5; width: 32px; height: 32px; }
.ln-thumb-ph span { font-size: 8px; font-weight: 700; color: #2d2d2d; text-transform: uppercase; letter-spacing: 2px; }

.ln-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 60%); opacity: 0; transition: opacity .2s; }
.ln-card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.85); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s, transform .2s; }
.ln-card-play svg { fill: #fff; stroke: none; width: 13px; height: 13px; margin-left: 2px; }

.ln-card-badge { position: absolute; top: 7px; right: 7px; font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; padding: 3px 6px; border-radius: 3px; background: rgba(0,0,0,.65); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.07); color: #4ade80; }
.ln-card-tijd { position: absolute; bottom: 7px; left: 7px; font-size: 7px; font-weight: 700; color: rgba(255,255,255,.45); background: rgba(0,0,0,.55); backdrop-filter: blur(4px); padding: 2px 6px; border-radius: 3px; letter-spacing: .5px; }

.ln-card-info { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.ln-card-vak { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ln-card-doel { font-size: 9px; font-weight: 400; color: #444; font-style: italic; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── BASISROOSTER TIJDINPUT ── */
#instRijen input[type="time"]::-webkit-calendar-picker-indicator { display: none; width: 0; }

/* ── EDITOR LAYOUT ── */
#app { height: var(--vch); display: none; flex-direction: column; }
#topbalk { height: var(--nav-h); flex: none; background: var(--z); border-bottom: 1px solid #2d2d2d; display: flex; align-items: center; position: relative; z-index: 700; }
#logo { flex: 0 0 auto; padding: 0 16px; white-space: nowrap; display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: hidden; }
#logoVakRij { display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
#logoVak { font-size: 20px; font-weight: 800; color: var(--w); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#logoKlas { font-size: 13px; font-weight: 700; color: var(--w); opacity: 0.5; letter-spacing: .5px; white-space: nowrap; display: none; }
#logoTijd { font-size: 10px; font-weight: 600; color: var(--w); opacity: 0.55; letter-spacing: .5px; white-space: nowrap; }

#ediNav { display: flex; flex: 1; height: 100%; justify-content: center; }
.nf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; border-right: 1px solid #2d2d2d; transition: background .15s; padding: 0 6px; user-select: none; -webkit-user-select: none; -webkit-context-menu: none; }
.nf:hover { background: #2c2c2c; }
.nf.actief { background: var(--school-kleur, #fff); }
.nf .fn { font-size: 7px; font-weight: 900; color: var(--g4); text-transform: uppercase; letter-spacing: 1px; opacity: .45; }
.nf .fl { font-size: 14px; font-weight: 900; color: var(--g3); text-transform: uppercase; letter-spacing: .5px; opacity: .45; }

.nf.actief .fn { color: var(--school-kleur-tekst-dim, rgba(0,0,0,0.4)); opacity: 1; }
.nf.actief .fl { color: var(--school-kleur-tekst, #000); opacity: 1; font-size: 16px; }

#tbSaveKnop { flex: none; width: 32px; height: 32px; padding: 0; border-radius: 6px; border: none; background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 0 4px; transition: background .15s, color .15s; }
#tbSaveKnop:hover { background: rgba(255,255,255,.18); color: #fff; }
#tbSaveKnop:active { transform: scale(.93); background: rgba(255,255,255,.15); color: #fff; transition: transform .07s ease, background .07s; }
@keyframes tbSavePop { 0% { transform: scale(.93); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
#tbSaveKnop.saved { animation: tbSavePop .28s ease-out forwards; }

#editorFullscreenBtn {
margin: 0 4px 0 8px; width: 32px; height: 32px; border-radius: 6px; border: none;
background: rgba(255,255,255,.08); cursor: pointer; display: flex; align-items: center;
justify-content: center; flex: none; transition: background .15s;
}
#editorFullscreenBtn:hover { background: rgba(255,255,255,.18); }

#terugNaarLauncher {
margin: 0 8px; padding: 0 8px; height: 28px; border-radius: 6px; border: none;
background: rgba(255,255,255,.08); color: var(--g3); cursor: pointer; display: flex;
align-items: center; flex: none; transition: background .15s;
}
#terugNaarLauncher:hover { background: rgba(255,255,255,.18); color: var(--w); }
#terugNaarLauncher svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ── WHITEBOARD VRIJ VLAK ── */
#split { flex: 1; display: flex; min-height: 0; }
#vrijevlak { flex: 1; position: relative; display: flex; flex-direction: column; background: #fff; min-height: 0; }

#vvScroll {
flex: 1; position: relative; overflow-y: auto; overflow-x: hidden; min-height: 0;
cursor: default; touch-action: pan-y;
background-color: #f0f0ec;
}

#vvCanvas { position: absolute; top: 0; left: 0; transform-origin: 0 0; background: transparent; }
#vvBg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
#vvWbCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 25; touch-action: none; pointer-events: none; will-change: transform; }
#vvInteractieCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 26; pointer-events: none; will-change: transform; }
body.pen-mode #vvScroll { touch-action: none; }

/* ── CANVAS ITEMS & HANDLES ── */
.vv-item {
position: absolute; cursor: grab; user-select: none; transform-origin: 50% 50%;
filter: drop-shadow(0 4px 18px rgba(0,0,0,.22)); transition: filter .15s; z-index: 2;
}
.vv-item:hover { filter: drop-shadow(0 8px 28px rgba(0,0,0,.38)); z-index: 5; }
.vv-item.actief { z-index: 20; filter: drop-shadow(0 8px 32px rgba(37,99,235,.25)); }
.vv-item--back,  .vv-item--back:hover,  .vv-item--back.actief  { z-index: 1  !important; }
.vv-item--front, .vv-item--front:hover, .vv-item--front.actief { z-index: 25 !important; }
.vv-item img, .vv-item video { display: block; pointer-events: none; border-radius: 3px; -webkit-user-drag: none; user-drag: none; }

/* ── GROEPSSELECTIEBOX ───────────────────────────────────────────────── */
#vvGroupBox {
    position: absolute; z-index: 30; pointer-events: none;
    border: 2px solid var(--sel, #2563eb);
    background: color-mix(in srgb, var(--sel, #2563eb) 10%, transparent);
    border-radius: 4px;
    display: none;
}

.vv-gb-rot, .vv-gb-resize, .vv-gb-del {
    position: absolute;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--sel, #2563eb); border: 2.5px solid #fff;
    cursor: pointer; pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    /* --gb-hr = counter-rotatie zodat handles altijd rechtop staan */
    transform: rotate(var(--gb-hr, 0deg));
    transition: transform .15s;
}
.vv-gb-rot    { top: -14px; left: -14px; cursor: grab; }
.vv-gb-resize { bottom: -14px; right: -14px; cursor: se-resize; }
.vv-gb-del    { background: #ef4444; top: -14px; right: -14px; }
.vv-gb-rot:hover, .vv-gb-resize:hover, .vv-gb-del:hover {
    transform: rotate(var(--gb-hr, 0deg)) scale(1.15);
}
.vv-gb-rot svg, .vv-gb-resize svg, .vv-gb-del svg {
    width: 12px; height: 12px; stroke: var(--sel-tekst, #fff); fill: none; stroke-width: 2.5;
}

/* ── SELECTIEBOX ── */
.sel-box {
position: fixed; pointer-events: none; z-index: 9999;
border: 1.5px solid #2563eb;
background: rgba(37, 99, 235, 0.08);
}
.multi-sel { outline: 2px solid var(--sel, #2563eb); outline-offset: 4px; }

/* ── TOOLBARS ── */
#tbZijbalk {
width: var(--tb-w); flex: none; background: var(--z); border-right: 1px solid #2d2d2d;
display: flex; flex-direction: column; align-items: center;
padding: clamp(2px, 0.5vh, 8px) 0; gap: clamp(1px, 0.4vh, 4px);
overflow: hidden; z-index: 600; justify-content: space-evenly;
}

.tbh { width: 28px; height: 1px; background: #363636; margin: clamp(1px, 0.3vh, 3px) 0; flex: none; }
.tb { width: clamp(24px, 3.5vh, 32px); height: clamp(24px, 3.5vh, 32px); border-radius: 6px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; transition: background .15s; flex: none; }
.tb:hover { background: #2d2d2d; }
.tb.actief { background: #363636; outline: 1.5px solid #444; }
.tb svg { width: clamp(11px, 1.6vh, 14px); height: clamp(11px, 1.6vh, 14px); stroke: var(--g3); fill: none; stroke-width: 2; }
.tb.actief svg { stroke: var(--w); }

.kdot { width: clamp(13px, 2vh, 18px); height: clamp(13px, 2vh, 18px); border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: transform .1s; flex: none; }
.kdot.actief { border-color: var(--w); }
body.pen-mode .wbshape,
body.pen-mode .wbtv,
body.pen-mode .vv-item { pointer-events: none; }
#uiBackdrop { display: none; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 399; pointer-events: none; touch-action: none; overscroll-behavior: none; cursor: default; }
#uiBackdrop.active { display: block; pointer-events: auto; }
#tbKleurDot { width: 16px; height: 16px; border-radius: 50%; background: #191919; box-shadow: 0 0 0 2px rgba(255,255,255,0.25); pointer-events: none; flex: none; }
#kleurPaneel { position: fixed; z-index: 400; background: #2c2c2c; border: 1px solid #363636; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.85); min-width: 152px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.97); transition: opacity 140ms ease, transform 140ms ease, visibility 0s 140ms; }
#kleurPaneel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity 140ms ease, transform 140ms ease; }
.kp-sectie { display: flex; flex-direction: column; gap: 5px; }
.kp-head { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: #555; }
.kp-grid { display: grid; grid-template-columns: repeat(5, 20px); gap: 5px; }
.kp-rij { display: flex; gap: 6px; min-height: 20px; align-items: center; flex-wrap: wrap; }
.kp-dot { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: none; box-shadow: 0 0 0 2px transparent; transition: transform .1s, box-shadow .1s; flex: none; touch-action: none; }
.kp-dot:hover { transform: scale(1.15); box-shadow: 0 0 0 2px rgba(255,255,255,0.5); }
.kp-sep { height: 1px; background: #363636; }
.kp-leeg { font-size: 9px; color: #444; font-style: italic; }
.kp-acties { display: flex; gap: 6px; }
.kp-acties button { flex: 1; height: 32px; border-radius: 8px; background: #2d2d2d; border: 1px solid #363636; cursor: pointer; color: var(--g3); display: flex; align-items: center; justify-content: center; transition: background .15s; }
.kp-acties button:hover { background: #363636; color: var(--w); }
.kp-acties button svg { width: 15px; height: 15px; }

#dikteSliderWrap { width: 28px; height: clamp(36px, 6vh, 64px); display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer; touch-action: none; }
#dikteSliderTrack { width: 4px; height: calc(clamp(36px, 6vh, 64px) - 8px); background: #444; border-radius: 2px; position: relative; display: flex; align-items: flex-end; }
#dikteSliderFill { width: 4px; border-radius: 2px; background: #888; position: absolute; bottom: 0; left: 0; }
#dikteSliderThumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #888; box-shadow: 0 1px 4px rgba(0,0,0,.6); position: absolute; left: 50%; transform: translateX(-50%); cursor: grab; }

/* ── GRID OVERLAY PANEL ── */
#gridBalk {
    position: fixed; left: var(--tb-w); top: var(--nav-h); bottom: 0; width: 220px;
    background: var(--z); border-right: 1px solid #2c2c2c;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-10px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s 160ms;
    z-index: 200;
}
#gridBalk.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition: opacity 160ms ease, transform 160ms ease; box-shadow: 4px 0 24px rgba(0,0,0,.7); }
#gridBalk.drag-over::after { content: ''; position: absolute; inset: 0; border: 2px dashed #555; background: rgba(255,255,255,.03); pointer-events: none; z-index: 10; }

#gridLabel {
    flex: none; height: 40px; border-bottom: 1px solid #2d2d2d;
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    padding: 0 10px 0 14px;
}
#gridLabel span { font-size: 9px; font-weight: 900; color: var(--w); text-transform: uppercase; letter-spacing: 2px; }
#gridDocTeller { color: var(--g4); letter-spacing: 0; margin-left: auto; margin-right: 8px; }
#gridDocTeller.vol { color: #c47a3a; }
#gridSluit { background: none; border: none; cursor: pointer; color: var(--g4); font-size: 14px; line-height: 1; padding: 5px; border-radius: 4px; }
#gridSluit:hover { color: var(--w); background: #2d2d2d; }

#gridScroll {
    flex: 1; display: flex; flex-direction: column; gap: 4px;
    padding: 8px; overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: #333 transparent;
}
#gridScroll::-webkit-scrollbar { width: 4px; }
#gridScroll::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }

.gthumb {
    flex: none; width: 100%; height: 44px; border-radius: 6px; border: 1px solid #2c2c2c;
    cursor: pointer; transition: border-color .15s;
    background: #2c2c2c; display: flex; flex-direction: row; align-items: center;
    gap: 8px; padding: 0 8px; box-sizing: border-box; overflow: hidden;
}
.gthumb:hover { border-color: var(--g3); }
.gthumb.actief { border-color: var(--w); }
.gthumb img { width: 32px; height: 32px; object-fit: cover; border-radius: 3px; flex: none; pointer-events: none; }

#gridDropzone {
    flex: none; width: 100%; height: 40px; border-radius: 6px; border: 1.5px dashed #333;
    cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 8px; transition: border-color .15s, background .15s; color: var(--g4);
    padding: 0 10px; box-sizing: border-box;
}
#gridDropzone:hover, #gridDropzone.drag-over { border-color: var(--g3); background: #2c2c2c; color: var(--g3); }
#gridDropzone svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; flex: none; }
#gridDropzone span { font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }

.gthumb .badge { background: #363636; border-radius: 3px; padding: 2px 5px; font-size: 7px; font-weight: 900; color: var(--g4); text-transform: uppercase; letter-spacing: 1px; pointer-events: none; flex: none; }
.gthumb-naam { flex: 1; font-size: 10px; color: var(--g3); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; min-width: 0; }
.gthumb .tdel { width: 20px; height: 20px; border-radius: 50%; background: transparent; color: var(--g4); font-size: 11px; font-weight: 900; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; flex: none; }
.gthumb:hover .tdel { display: flex; }
.gthumb:hover .tdel:hover { color: var(--w); }
.grid-icon { font-size: 18px; width: 32px; text-align: center; flex: none; line-height: 32px; }
.gthumb-phase { font-size: 7px; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: .5px; flex: none; }

/* ── LESAFBEELDING BLOK ── */
#lesAfbBlok { flex: none; padding: 8px 8px 4px; border-bottom: 1px solid #2c2c2c; }
.lesafb-header { font-size: 8px; font-weight: 900; color: var(--g4); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
#lesAfbZone {
    position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px;
    border: 1.5px dashed #333; overflow: hidden; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s;
}
#lesAfbZone:hover { border-color: var(--g3); }
#lesAfbZone.drag-over { border-color: var(--g3); background: #2c2c2c; }
#lesAfbPreview { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
#lesAfbLeeg { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--g4); pointer-events: none; }
#lesAfbLeeg svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
#lesAfbLeeg span { font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
#lesAfbKiesBtn { position: absolute; bottom: 4px; right: 4px; background: #363636; border: none; border-radius: 4px; color: var(--g3); font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; padding: 3px 7px; cursor: pointer; pointer-events: auto; }
#lesAfbKiesBtn:hover { color: var(--w); background: #444; }
#lesAfbVerwijderBtn { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.55); border: none; border-radius: 50%; color: var(--g3); font-size: 10px; width: 18px; height: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; pointer-events: auto; }
#lesAfbVerwijderBtn:hover { color: var(--w); }

/* ── PLUS POPUP ── */
#plusPopup { position: fixed; z-index: 300; background: #2c2c2c; border: 1px solid #363636; border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px; min-width: 160px; box-shadow: 0 8px 32px rgba(0,0,0,.8); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) scale(.97); transition: opacity 130ms ease, transform 130ms ease, visibility 0s 130ms; }
#plusPopup.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition: opacity 130ms ease, transform 130ms ease; }
.pp-btn { padding: 9px 14px; border-radius: 6px; background: transparent; border: none; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--g3); text-transform: uppercase; letter-spacing: 1px; text-align: left; display: flex; align-items: center; gap: 10px; transition: background .15s; white-space: nowrap; }
.pp-btn:hover { background: #2d2d2d; color: var(--w); }
.pp-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; flex: none; }

/* ── LESDOEL / AFSLUITING FASE ── */
#lesdoelFase, #afsluitingFase {
flex: 1; display: none; flex-direction: column; align-items: center; justify-content: center;
background: var(--w); padding: 60px; text-align: center; min-height: 0;
}
#afsluitingFase { position: relative; }
#cvTrigger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; cursor: pointer; padding: 40px; border-radius: 20px; transition: background .15s; }
#cvTrigger:hover { background: rgba(0,0,0,.04); }
.cv-trigger-icon { width: 80px; height: 80px; border-radius: 50%; background: #eff6ff; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.cv-trigger-icon svg { width: 40px; height: 40px; stroke: #2563eb; transition: stroke .2s; }
#cvTrigger.heeft-vraag .cv-trigger-icon { background: #ecfdf5; }
#cvTrigger.heeft-vraag .cv-trigger-icon svg { stroke: #16a34a; }
.cv-trigger-label { font-size: 22px; font-weight: 800; color: var(--z); }
.cv-trigger-sub { font-size: 13px; color: var(--g3); }
/* ── VERWERKING FASE ── */
#verwerkingFase { flex: 1; display: none; align-items: stretch; justify-content: center; background: var(--w); }
#vwLinks { flex: 1; max-width: 52%; display: flex; flex-direction: column; justify-content: flex-start; gap: 48px; padding: clamp(52px, 8vh, 100px) clamp(40px, 5vw, 72px) 40px; }
#vwDivider { width: 1px; background: #e5e7eb; flex: none; align-self: stretch; }
#vwRechts { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px; }

#vwFaseLabel { font-size: 9px; font-weight: 900; color: var(--g4); text-transform: uppercase; letter-spacing: 3px; margin: 0 0 4px; }
.vw-sectie { display: flex; flex-direction: column; gap: 10px; }
.vw-sectie + .vw-sectie { margin-top: 28px; }
.vw-kop { display: flex; align-items: center; gap: 6px; }
.vw-kop-svg { width: 12px; height: 12px; stroke: var(--g4); fill: none; stroke-width: 1.5; flex: none; }
.vw-kop-naam { font-size: 9px; font-weight: 900; color: var(--g4); text-transform: uppercase; letter-spacing: 2px; }
.vw-kop-sep { font-size: 9px; color: var(--g4); }
#vwActEditBtn { background: none; border: 1px solid #e5e7eb; border-radius: 5px; cursor: pointer; padding: 2px 5px; display: flex; align-items: center; }
#vwActEditBtn svg { width: 10px; height: 10px; stroke: var(--g4); fill: none; stroke-width: 2; }
#vwActEditBtn:hover { border-color: var(--g3); }
#vwActEditBtn:hover svg { stroke: var(--z); }

.vw-lesdoel-tekst { font-size: clamp(20px, 2.4vw, 36px); font-weight: 900; color: var(--z); line-height: 1.3; font-style: italic; }
.vw-activiteit-tekst { font-size: clamp(20px, 2.4vw, 34px); font-weight: 700; color: #0f2744; line-height: 1.5; cursor: pointer; min-height: 40px; white-space: pre-wrap; }
.vw-activiteit-tekst:empty::before { content: 'Voer een activiteit in…'; color: #aaa; font-weight: 400; font-size: clamp(16px, 1.8vw, 26px); }
#vwActiviteit { width: 100%; font-size: 15px; line-height: 1.6; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; font-family: inherit; color: var(--z); background: #fafafa; resize: none; outline: none; box-sizing: border-box; }
#vwActiviteit:focus { border-color: #0f2744; background: #fff; }

/* Timer */
#vwTimerLabel { font-size: 9px; font-weight: 900; color: var(--g4); text-transform: uppercase; letter-spacing: 3px; margin: 0; }
#vwTimerWrap { position: relative; width: clamp(228px, 27.6vw, 329px); height: clamp(228px, 27.6vw, 329px); }
#vwTimerCenter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
#vwTimerTxt { font-size: clamp(46px, 5.75vw, 74px); font-weight: 900; color: #0a0a0a; line-height: 1; letter-spacing: -1px; }
#vwTimerMinSec { font-size: 8px; font-weight: 700; color: #bbb; letter-spacing: 3px; text-transform: uppercase; }

#vwTimerAdjust { display: flex; gap: 8px; }
.vwadj { padding: 6px 14px; border-radius: 20px; border: 1.5px solid #e5e7eb; font-size: 11px; font-weight: 700; cursor: pointer; background: transparent; color: var(--g3); transition: all .15s; }
.vwadj:hover { border-color: #0a0a0a; color: #0a0a0a; }

#vwTimerRing { width: 100%; height: 100%; color: #0a0a0a; }
#vwTimerToggle { display: flex; align-items: center; justify-content: center; gap: 10px; width: clamp(228px, 27.6vw, 329px); padding: 14px 0; border-radius: 12px; background: #0a0a0a; color: #fff; border: none; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: filter .15s; }
#vwTimerToggle:hover { filter: brightness(.75); }
#vwTimerToggle svg { width: 10px; height: 12px; }
#vwTimerToggle.loopt svg { display: none; }

#vwTimerReset { background: none; border: none; cursor: pointer; font-size: 10px; font-weight: 700; color: var(--g4); text-transform: uppercase; letter-spacing: 1px; }
#vwTimerReset:hover { color: var(--z); }
.vw-timer-voet { display: flex; align-items: center; gap: 12px; }
#vwTimerBel { background: none; border: none; cursor: pointer; color: #ccc; padding: 3px; border-radius: 5px; display: flex; align-items: center; transition: color .15s; }
#vwTimerBel:hover { color: #888; }
#vwTimerBel.bel-uit { color: #e0e0e0; opacity: .35; }

#vwOverlay { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.97); align-items: center; justify-content: center; cursor: pointer; }
#vwOverlayTekst { font-size: clamp(36px, 5vw, 72px); font-weight: 900; color: #fff; max-width: 80%; text-align: center; line-height: 1.3; pointer-events: none; font-style: italic; white-space: pre-wrap; }
#vwOverlayNaarIns { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.3); color: rgba(255,255,255,.75); font-size: 15px; font-weight: 600; padding: 12px 32px; border-radius: 40px; cursor: pointer; letter-spacing: .03em; white-space: nowrap; transition: background .15s, color .15s; }
#vwOverlayNaarIns:hover { background: rgba(255,255,255,.22); color: #fff; }

.ld-label { font-size: 10px; font-weight: 900; color: var(--g3); text-transform: uppercase; letter-spacing: 3px; margin-bottom: 24px; }
.ld-tekst { font-size: clamp(36px, 5vw, 72px); font-weight: 900; color: var(--z); line-height: 1.2; font-style: italic; max-width: 900px; cursor: pointer; }
.ld-klas { margin-top: 20px; font-size: 14px; font-weight: 700; color: var(--g3); text-transform: uppercase; letter-spacing: 2px; }

#ldEditBtn {
position: absolute; top: -8px; right: -36px; width: 26px; height: 26px; border-radius: 50%;
background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.1); cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: background .15s;
}
#ldEditBtn:hover { background: rgba(0,0,0,.14); }
#ldEditBtn svg { width: 12px; height: 12px; stroke: #888; fill: none; stroke-width: 2.5; stroke-linecap: round; }


/* ── FOCUS OVERLAY (afbeelding / YouTube fullscreen) ── */
#focusOverlay { position: fixed; inset: 0; background: rgba(0,0,0,.93); z-index: 2000; display: none; flex-direction: row; }
#focusOverlay.open { display: flex; }

#focusTb {
    width: 52px; flex: none; background: #242424; border-right: 1px solid #2c2c2c;
    display: flex; flex-direction: column; align-items: center;
    padding: 56px 0 16px; gap: 4px;
}
#focusOverlay.yt #focusTb { display: none; }
.ftb {
    width: 36px; height: 36px; border-radius: 8px;
    border: none; background: transparent; color: #666;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.ftb svg { width: 17px; height: 17px; }
.ftb.actief { background: #303030; color: #fff; }
.ftb:hover { color: #ccc; }
.ftb-sep { width: 28px; height: 1px; background: #2c2c2c; margin: 4px 0; }
.ftb-kleur-wrap { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
#ftbKleurDot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); background: #e11d48; }
#ftbKleurPicker { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
#ftbDikteWrap { width: 36px; height: 110px; display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer; touch-action: none; user-select: none; }
#ftbDikteTrack { width: 4px; height: 90px; background: #444; border-radius: 2px; position: relative; }
#ftbDikteFill { width: 4px; border-radius: 2px; background: #666; position: absolute; bottom: 0; left: 0; }
#ftbDikteThumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid #888; box-shadow: 0 1px 4px rgba(0,0,0,.6); position: absolute; left: 50%; transform: translateX(-50%); cursor: grab; }
.ftb-wis:hover { color: #ef4444 !important; }

#focusVp { flex: 1; overflow: hidden; position: relative; cursor: grab; }
#focusVp.pen-active { cursor: none; }
#focusVp.erasing  { cursor: cell; }
#focusContent { position: absolute; top: 0; left: 0; transform-origin: 0 0; user-select: none; }
#focusImg { display: block; pointer-events: none; user-select: none; }
#focusCanvas { position: absolute; top: 0; left: 0; pointer-events: none; }
#focusCanvas.active { pointer-events: auto; }
#ytFocusIframe { display: none; position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); border: none; border-radius: 12px; background: #000; }
#focusOverlay.yt #ytFocusIframe { display: block; }
#focusOverlay.yt #focusContent { display: none; }

/* ── OVERLAY SLUIT ── */
.overlay-sluit { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.13); border: 1.5px solid rgba(255,255,255,.28); color: rgba(255,255,255,.75); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; z-index: 10; }
.overlay-sluit:hover { background: rgba(255,255,255,.22); color: #fff; }

/* ── CHECKVRAAG OVERLAY ── */
#cvOverlay { display: none; position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.96); align-items: center; justify-content: center; pointer-events: none; }
#cvInvul, #cvPresentatie, #cvOverlay .overlay-sluit { pointer-events: auto; }
#cvInvul { background: #2c2c2c; border-radius: 16px; padding: 40px; max-width: 520px; width: 100%; max-height: 80vh; overflow-y: auto; }
.cv-panel-header { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: var(--g3); margin-bottom: 28px; }
.cv-veld { margin-bottom: 20px; }
.cv-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--g3); margin-bottom: 8px; }
.cv-opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--g4); }
.cv-textarea { width: 100%; padding: 12px 14px; background: #292929; border: 1.5px solid #363636; border-radius: 8px; color: var(--w); font-size: 15px; font-family: inherit; resize: vertical; outline: none; box-sizing: border-box; }
.cv-textarea:focus { border-color: #3b82f6; }
.cv-afb-zone { background: #292929; border: 1.5px dashed #393939; border-radius: 8px; padding: 16px; text-align: center; transition: border-color .15s, background .15s; }
.cv-afb-zone.drag-over { border-color: #6366f1; background: #2a2a3a; }
.cv-afb-zone img { max-width: 100%; max-height: 140px; object-fit: contain; border-radius: 6px; display: block; margin: 0 auto 8px; }
.cv-afb-hint { font-size: 10px; color: #555; margin-top: 7px; }
#cvAfbKies { background: none; border: 1px solid #393939; color: var(--g3); font-size: 11px; padding: 6px 14px; border-radius: 6px; cursor: pointer; }
#cvAfbKies:hover { color: var(--w); border-color: #555; }
#cvAfbVerwijder { background: none; border: 1px solid #7f1d1d; color: #f87171; font-size: 11px; padding: 6px 14px; border-radius: 6px; cursor: pointer; margin-left: 8px; }
#cvAfbVerwijder:hover { background: #1e0505; }
.cv-opslaan-btn { width: 100%; padding: 14px; background: #2563eb; color: #fff; border: none; border-radius: 10px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; margin-top: 8px; }
.cv-opslaan-btn:hover { background: #1d4ed8; }
#cvPresentatie { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 60px 100px; box-sizing: border-box; overflow: hidden; }
#cvPresInner { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 32px; flex: 1; min-height: 0; overflow: visible; font-size: 16px; }
#cvPresLinks { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; min-width: 0; }
#cvPresVraag { font-size: clamp(18px, 3.25em, 52px); font-weight: 900; color: #fff; line-height: 1.2; font-style: italic; overflow-wrap: break-word; word-break: break-word; max-width: 100%; white-space: pre-line; }
#cvPresAntwoord { font-size: clamp(14px, 2.5em, 40px); font-weight: 700; color: #4ade80; line-height: 1.3; overflow-wrap: break-word; word-break: break-word; max-width: 100%; white-space: pre-line; }
#cvPresRechts { width: 100%; display: flex; align-items: center; justify-content: center; min-height: 0; flex-shrink: 1; }
#cvPresAfb { max-width: 100%; max-height: 55vh; object-fit: contain; border-radius: 12px; cursor: zoom-in; display: block; }
.cv-controleer-btn { background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.25); color: rgba(255,255,255,.85); font-size: 14px; font-weight: 700; padding: 12px 32px; border-radius: 40px; cursor: pointer; transition: background .15s, color .15s; }
.cv-controleer-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
#cvPresVraagWrap { position: relative; display: inline-block; }
#cvBewerkBtn { position: absolute; top: 0; right: -36px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
#cvBewerkBtn:hover { background: rgba(255,255,255,.18); }
#cvBewerkBtn svg { width: 12px; height: 12px; stroke: rgba(255,255,255,.4); }

/* ── MODALS & TOAST ── */
#toast {
position: fixed; bottom: 130px; left: 50%; transform: translateX(-50%) translateY(20px);
background: var(--z); border: 1px solid #333; color: var(--w); font-size: 11px;
font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 10px 20px;
border-radius: 8px; opacity: 0; transition: all .3s; pointer-events: none; z-index: 10000;
}
#toast.aan { opacity: 1; transform: translateX(-50%) translateY(0); }

#fmtBar {
    display: none; height: 34px; background: #242424; border-bottom: 1px solid #2c2c2c;
    padding: 0 8px; gap: 2px; align-items: center; white-space: nowrap; overflow-x: auto;
    position: absolute; top: 0; left: 0; right: 0; z-index: 40;
}
#fmtBar.open { display: flex; }

#fmFont {
    height: 22px; background: #2d2d2d; color: #ccc;
    border: 1px solid #363636; border-radius: 4px;
    font-size: 11px; padding: 0 4px; cursor: pointer; max-width: 130px; font-family: inherit;
}
#fmFont:focus { outline: none; border-color: #555; }

.fm-size-wrap { display: flex; align-items: center; gap: 1px; }
#fmFontSize {
    width: 62px; height: 22px;
    background: #2d2d2d; color: #ccc;
    border: 1px solid #363636; border-radius: 4px;
    font-size: 12px; font-weight: 700; padding: 0 2px;
    font-family: inherit; cursor: pointer;
}
#fmFontSize:focus { outline: none; border-color: #555; }

.fm-sz-btn {
    width: 26px; height: 22px; background: transparent;
    border: 1px solid transparent; border-radius: 4px;
    color: #888; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit;
}
.fm-sz-btn svg { width: 20px; height: 20px; }
.fm-sz-btn:hover { background: #363636; border-color: #3a3a3a; color: #ccc; }

.fmb {
    min-width: 26px; height: 24px; padding: 0 5px;
    background: transparent; border: 1px solid transparent; border-radius: 4px;
    cursor: pointer; color: #aaa; font-size: 13px; font-family: inherit;
    display: flex; align-items: center; justify-content: center;
    transition: background .1s, color .1s;
    flex: none;
}
.fmb:hover { background: #363636; border-color: #3a3a3a; color: #ddd; }
.fmb.actief { background: rgba(37,99,235,.18); border-color: rgba(37,99,235,.5); color: #60a5fa; }

.fms { width: 1px; height: 16px; background: #363636; margin: 0 3px; flex: none; }

.fm-align-wrap { position: relative; display: flex; }
#fmbAlignIcon { width: 16px; height: 16px; }
#fmbAlignMenu { position: absolute; top: calc(100% + 4px); left: 0; background: #2c2c2c; border: 1px solid #363636; border-radius: 8px; padding: 4px; display: none; flex-direction: column; gap: 2px; z-index: 500; min-width: 110px; box-shadow: 0 6px 20px rgba(0,0,0,.8); }
#fmbAlignMenu.open { display: flex; }
#fmbAlignMenu button { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: none; background: transparent; color: #bbb; cursor: pointer; border-radius: 5px; font-size: 11px; text-align: left; }
#fmbAlignMenu button:hover { background: #363636; color: #fff; }
#fmbAlignMenu button.actief { color: #60a5fa; }
#fmbAlignMenu button svg { width: 16px; height: 10px; flex: none; }

.fm-kleur-wrap { position: relative; display: flex; }
.fm-kleur-wrap input[type="color"] { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; left: 0; top: 100%; }
.fm-kleur-btn { flex-direction: column; padding: 2px 5px; height: 28px; gap: 0; }
.fm-kleur-inner { display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; }
.fm-kleur-lbl { font-size: 13px; font-weight: 900; line-height: 1; }
.fm-kleur-inner svg { width: 13px; height: 13px; }
.fm-kleur-bar { width: 14px; height: 3px; border-radius: 1px; background: #0a0a0a; }

/* ── INSTELLINGEN ── */
.inst-dag-btn {
width: 100%; text-align: left; padding: 10px 16px; border-left: 4px solid transparent;
font-weight: 800; text-transform: uppercase; font-size: 11px; background: transparent;
border: none; cursor: pointer; transition: all .15s; color: #94a3b8;
}
.inst-dag-btn.actief { background: white; border-left-color: #2563eb; color: #2563eb; }

@media print {
@page { size: A4 portrait; margin: 0; }
:root { color-scheme: light !important; }
html, body { height: auto !important; margin: 0 !important; padding: 0 !important; }
body > *:not(#instPrintArea) { display: none !important; }
#instPrintArea { display: block !important; zoom: var(--ipr-scale,1); width: calc(100% / var(--ipr-scale,1)) !important; background: white; font-family: 'Helvetica Neue', Arial, sans-serif; color: black; font-size: 10pt; break-after: avoid; overflow: hidden; padding: 10mm; box-sizing: border-box; }
.ipr-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 3pt solid #000; margin-bottom: 20px; padding-bottom: 12px; }
.ipr-header h1 { font-size: 24pt; font-weight: 900; color: black; margin: 0; }
.ipr-header p  { font-size: 14pt; font-weight: 700; color: #334155; margin: 0; white-space: nowrap; flex-shrink: 0; text-align: right; }
.ipr-table { width: 100%; border-collapse: collapse; table-layout: fixed; border: 2pt solid #000; }
.ipr-table th, .ipr-table td { border: 1pt solid #000; padding: 7px 9px; text-align: left; word-wrap: break-word; vertical-align: top; color: black; background-color: white; }
.ipr-table th { background-color: #000 !important; color: white !important; font-weight: 900; text-transform: uppercase; font-size: 8pt; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ipr-num  { font-weight: 900; text-align: center !important; font-size: 9pt; }
.ipr-time { white-space: nowrap; font-weight: 700; text-align: center !important; font-variant-numeric: tabular-nums; font-size: 8pt; }
.ipr-subj { font-weight: 900; text-transform: uppercase; font-size: 7.5pt; line-height: 1.2; white-space: nowrap; }
.ipr-cont { white-space: pre-wrap; line-height: 1.3; font-size: 9pt; font-weight: 600; }
.ipr-goal { font-style: italic; font-size: 9pt; font-weight: 500; }
.ipr-break td { background-color: #e2e8f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#iprGoalBox { margin-top: 28px; padding: 14px 18px; border: 3pt solid black; border-radius: 10px; page-break-inside: avoid; }
.ipr-goal-label { font-weight: 900; text-transform: uppercase; font-size: 8pt; display: block; margin-bottom: 4px; }
.ipr-goal-text  { font-size: 14pt; font-weight: 800; font-style: italic; line-height: 1.4; color: black; white-space: pre-line; }
}


/* ── ACHTERGROND POPUP ───────────────────────────────────────────────── */
#bgPopup { position: fixed; z-index: 401; background: #2c2c2c; border: 1px solid #363636; border-radius: 10px; padding: 8px; display: none; flex-direction: column; gap: 4px; min-width: 140px; box-shadow: 0 8px 32px rgba(0,0,0,.8); }
#bgPopup.open { display: flex; }
.bg-opt { padding: 8px 12px; border-radius: 6px; background: transparent; border: 1px solid transparent; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--g3); text-align: left; transition: background .12s; }
.bg-opt:hover { background: #393939; color: var(--w); }
.bg-opt.actief { background: #363636; color: var(--w); border-color: #555; }

/* ── TEKSTVAKKEN ─────────────────────────────────────────────────────── */

.wbtv { position: absolute; z-index: 20; cursor: default; }
.wbtv-ce {
    padding: 2px 4px;
    font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 60px; line-height: 1.2;
    outline: none; word-break: break-word; white-space: pre-wrap;
    border: 2px dashed transparent; border-radius: 3px;
    background: transparent;
    min-width: 30px; min-height: 20px;
    width: max-content;
    caret-color: #2563eb;
    cursor: default;
    transition: border-color .12s, background .12s;
    overflow: hidden;
}
.wbtv.sel .wbtv-ce { border-color: color-mix(in srgb, var(--sel, #2563eb) 55%, transparent); background: rgba(255,255,255,.92); cursor: move; }
.wbtv.edit .wbtv-ce { border: 2px solid var(--sel, #2563eb); background: transparent; box-shadow: 0 2px 12px color-mix(in srgb, var(--sel, #2563eb) 18%, transparent); cursor: text; }
.wbtv:not(.sel):not(.edit):hover .wbtv-ce { border-color: rgba(0,0,0,.1); background: rgba(255,255,255,.5); }
#app[data-mode="present"] .wbtv:hover .wbtv-ce { border-color: transparent !important; background: transparent !important; }
.wbtv-ce::selection { background: #2563eb; color: #fff; }

.edi-bullet-line { display: grid; grid-template-columns: auto 1fr; column-gap: 0.35em; align-items: start; }
.edi-bullet-dot { line-height: inherit; pointer-events: none; user-select: none; -webkit-user-select: none; }
.edi-bullet-text { min-width: 0; white-space: normal; }

.tv-rot {
    position: absolute; top: -10px; left: -10px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--sel, #2563eb); border: 2px solid white;
    cursor: grab; display: none;
    align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 5;
}
.tv-rot svg { width: 10px; height: 10px; stroke: white; fill: none; stroke-width: 2.5; stroke-linecap: round; }
.tv-rot:active { cursor: grabbing; }

.tv-resize {
    position: absolute; bottom: -10px; right: -10px;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--sel, #2563eb); border: 2px solid white;
    cursor: se-resize; display: none;
    align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 5;
}
.tv-resize svg { width: 10px; height: 10px; stroke: var(--sel-tekst, #fff); fill: none; stroke-width: 2.5; stroke-linecap: round; }

.tv-del {
    position: absolute; top: -10px; right: -10px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #ef4444; border: 2px solid white;
    cursor: pointer; display: none;
    align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 5;
    font-size: 10px; font-weight: 900; color: white; line-height: 1;
}
/* Handles alleen zichtbaar in selectie-modus, niet in edit-modus */
.wbtv.sel .tv-rot,
.wbtv.sel .tv-resize,
.wbtv.sel .tv-del { display: flex; }

.tv-w-resize {
    position: absolute; top: 50%; right: -10px;
    transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--sel, #2563eb); border: 2px solid white;
    cursor: ew-resize; display: none; z-index: 10; pointer-events: auto;
    align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.tv-w-resize svg { width: 12px; height: 12px; stroke: white; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.wbtv.edit .tv-w-resize { display: flex; }

/* ── Gum cursor ──────────────────────────────────────────────────────── */

#gumCursor {
    position: fixed; display: none; pointer-events: none; z-index: 9999;
    border-radius: 50%; box-sizing: border-box;
    border: 2px solid rgba(0,0,0,0.35);
    background: rgba(255,255,255,0.12);
}

/* ── Shape Objects ───────────────────────────────────────────────────── */

body.bucket-mode .wbshape { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='m19 11-8-8-8.5 8.5a5.5 5.5 0 0 0 7.78 7.78L19 11Z' fill='none' stroke='white' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='m5 2 5 5' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M2 13h15' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z' fill='white' stroke='white'/%3E%3Cpath d='m19 11-8-8-8.5 8.5a5.5 5.5 0 0 0 7.78 7.78L19 11Z' fill='none' stroke='%23111' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='m5 2 5 5' stroke='%23111' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M2 13h15' stroke='%23111' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z' fill='%23111'/%3E%3C/svg%3E") 20 22, crosshair; }

.wbshape {
    position: absolute; z-index: 20; cursor: default;
    user-select: none; pointer-events: auto;
}
.wbshape-svg { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: all; }
.wbshape.sel { outline: 2px solid var(--sel, #2563eb); outline-offset: 4px; }

.wbs-rot, .wbs-resize, .wbs-del {
    position: absolute; display: none;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--sel, #2563eb); border: 2px solid white;
    align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 5;
}
.wbs-rot    { top: -10px; left: -10px; cursor: grab; }
.wbs-resize { bottom: -10px; right: -10px; cursor: se-resize; }
.wbs-del    { top: -10px; right: -10px; background: #ef4444;
              font-size: 10px; font-weight: 900; color: white; cursor: pointer; }
.wbs-rot svg, .wbs-resize svg { width: 10px; height: 10px; stroke: var(--sel-tekst, #fff); fill: none; stroke-width: 2.5; stroke-linecap: round; }
.wbs-rot:active { cursor: grabbing; }
.wbshape.sel .wbs-rot,
.wbshape.sel .wbs-resize,
.wbshape.sel .wbs-del { display: flex; }

/* ── VERTICAAL CANVAS ────────────────────────────────────────────────── */

#vcanvasScherm {
position: fixed;
inset: 0;
z-index: 800;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
background: #f0f0ec;
cursor: grab;
}
#vcanvasScherm::-webkit-scrollbar { display: none; }
#vcanvasScherm.vc-dragging { cursor: grabbing; }

/* ── ANIMATIES ── */

/* Overlays */
#instModal    { transition: opacity 160ms ease; color-scheme: light; }
#instModal.inst-open { opacity: 1 !important; }
#ldEditOverlay { transition: opacity 150ms ease, transform 150ms ease; }
#ldEditOverlay.ld-open { opacity: 1 !important; transform: translateY(0) !important; }

#vcanvasContainer {
width: 100%;
/* Hoogte wordt via JS gezet op window.innerHeight × 3 */
}

.vzone {
width: 100%;
/* Hoogte wordt via JS gezet op window.innerHeight */
position: relative;
overflow: hidden;
box-sizing: border-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Placeholder-labels per zone (verdwijnen als er content in zit) */
.vzone::before {
content: attr(data-zone);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 3px;
color: rgba(0, 0, 0, 0.12);
pointer-events: none;
user-select: none;
}

/* ── AFBEELDING OVERLAY (verticaal canvas) ──────────────────────────── */

#vcImgOverlay {
position: fixed;
inset: 0;
z-index: 3000;
background: rgba(0, 0, 0, 0.88);
display: none;
touch-action: none;
}

#vcImgOverlay.open { display: block; }

#vcImgSluit {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.55);
border: 1px solid rgba(255, 255, 255, 0.25);
color: #fff;
font-size: 18px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(6px);
}

#vcImgSluit:hover { background: rgba(0, 0, 0, 0.75); }

#vcImgVp {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: grab;
touch-action: none;
}

#vcImgWrap {
flex: none;
transform-origin: center center;
}

#vcImgEl {
max-width: 90vw;
max-height: 90vh;
object-fit: contain;
display: block;
border-radius: 4px;
user-select: none;
pointer-events: none; /* klikken landen op #vcImgWrap, niet via de overlay-sluitlogica */
}

/* ══════════════════════════════════════════════════
   VANDAAG VIEW
══════════════════════════════════════════════════ */
#lnVandaag {
height: calc(var(--vch) - 64px);
overflow: hidden;
flex-direction: row;
}

/* ── SIDEBAR ── */
#lvdSidebar {
width: 340px;
flex: none;
display: flex;
flex-direction: column;
border-right: 1px solid rgba(255,255,255,.055);
background: rgba(10,12,18,.55);
overflow: hidden;
}

#lvdHeader {
padding: 22px 20px 16px;
flex: none;
border-bottom: 1px solid rgba(255,255,255,.045);
}


.lvd-dag-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}

#lvdDagTitel {
font-size: 36px;
font-weight: 700;
color: #ddd;
letter-spacing: -.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.lvd-nav-groep {
display: flex;
align-items: center;
gap: 4px;
flex: none;
}

.lvd-nav-btn {
width: 28px;
height: 28px;
border: 1px solid rgba(255,255,255,.07);
background: rgba(255,255,255,.04);
border-radius: 7px;
cursor: pointer;
color: #555;
display: flex;
align-items: center;
justify-content: center;
flex: none;
transition: background .12s, color .12s, border-color .12s;
}
.lvd-nav-btn svg { width: 14px; height: 14px; }
.lvd-nav-btn:hover { background: rgba(255,255,255,.09); color: #aaa; border-color: rgba(255,255,255,.12); }
.lvd-nav-btn:disabled { opacity: .25; cursor: default; pointer-events: none; }
.lvd-nav-today svg { width: 13px; height: 13px; }

/* ── TIJDLIJN LIJST ── */
#lvdLijst {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 4px 0 8px;
min-height: 0;
}
#lvdLijstWrap {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
#lvdLijst::-webkit-scrollbar { width: 3px; }
#lvdLijst::-webkit-scrollbar-track { background: transparent; }
#lvdLijst::-webkit-scrollbar-thumb { background: rgba(255,255,255,.07); border-radius: 2px; }

.lvd-item {
display: flex;
align-items: stretch;
flex: none;
height: 66px;
margin: 1px 10px;
border-radius: 10px;
cursor: pointer;
background: rgba(255,255,255,.17);
position: relative;
overflow: hidden;
transition: background .14s;
}
.lvd-item:hover { background: rgba(255,255,255,.04); }
.lvd-item.actief {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.lvd-item.geselecteerd { background: #fff; box-shadow: inset 7px 0 0 var(--school-kleur, #2563eb), 0 6px 24px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.14); }
.lvd-item.actief.geselecteerd {
background: #fff;
box-shadow: inset 3px 0 0 var(--school-kleur, #2563eb), 0 4px 20px rgba(0,0,0,.18);
}

/* Geanimeerde accentbalk actieve les */
.lvd-item.actief::before {
content: '';
position: absolute;
left: 0; top: 8px; bottom: 8px;
width: 2.5px;
background: var(--school-kleur, #2563eb);
border-radius: 0 2px 2px 0;
}

/* Tijdlijn-kolom */
.lvd-tl {
width: 26px;
flex: none;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 14px;
}
.lvd-tl-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255,255,255,.1);
flex: none;
transition: background .2s;
}
.lvd-item.actief .lvd-tl-dot {
background: var(--school-kleur, #2563eb);
box-shadow: 0 0 0 3px var(--school-kleur-glow1, rgba(37,99,235,.18));
}
.lvd-tl-line {
flex: 1;
width: 1px;
margin-top: 3px;
background: rgba(255,255,255,.05);
}
.lvd-item.actief .lvd-tl-line {
background: linear-gradient(to bottom, var(--school-kleur-35a, rgba(37,99,235,.35)), transparent);
}

/* Tijdkolom */
.lvd-tijd {
width: 52px;
flex: none;
padding: 12px 8px 10px 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.lvd-tijd-start {
font-size: 14px;
font-weight: 700;
color: #808080;
line-height: 1;
transition: color .2s;
}
.lvd-item.actief .lvd-tijd-start { color: #333; }
.lvd-item.geselecteerd .lvd-tijd-start { color: #333; }
.lvd-tijd-sep { font-size: 8px; color: rgba(255,255,255,.2); line-height: 1; }
.lvd-tijd-end { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.35); line-height: 1; }
.lvd-item.geselecteerd .lvd-tijd-sep,
.lvd-item.actief .lvd-tijd-sep { color: #aaa; }
.lvd-item.geselecteerd .lvd-tijd-end,
.lvd-item.actief .lvd-tijd-end { color: #555; }

/* Kaartinhoud */
.lvd-card {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px 10px 0;
min-width: 0;
}
.lvd-thumb {
width: 50px;
height: 36px;
border-radius: 6px;
overflow: hidden;
flex: none;
background: rgba(255,255,255,.05);
display: flex;
align-items: center;
justify-content: center;
}
.lvd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lvd-thumb svg { width: 14px; height: 14px; stroke: rgba(255,255,255,.1); fill: none; stroke-width: 1.5; }
.lvd-info { flex: 1; min-width: 0; }
.lvd-vak {
font-size: 15px;
font-weight: 700;
color: #c8c8c8;
letter-spacing: .3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color .2s;
}
.lvd-item.actief .lvd-vak { color: #111; font-size: 16px; }
.lvd-item.geselecteerd .lvd-vak { color: #111; }
.lvd-doel-txt {
font-size: 10px;
color: rgba(255,255,255,.45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
.lvd-item.actief .lvd-doel-txt { color: #444; }
.lvd-item.geselecteerd .lvd-doel-txt { color: #444; }
.lvd-nu {
display: inline-block;
font-size: 7px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--school-kleur, #2563eb);
margin-top: 4px;
}

/* Pauze-rij */
.lvd-pauze {
display: flex;
align-items: center;
padding: 6px 20px 6px 12px;
gap: 10px;
opacity: .45;
min-height: 0;
flex: none;
}
.lvd-pauze-tijd { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.75); width: 42px; text-align: right; flex: none; }
.lvd-pauze-lijn { flex: 1; height: 1px; background: rgba(255,255,255,.25); }
.lvd-pauze-txt { font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,.7); }

/* Lege dag */
.lvd-dag-leeg {
padding: 48px 24px;
text-align: center;
color: #333;
font-size: 12px;
}

/* ── CONTEXT MENU (gedeeld) ── */
#vvCtxMenu {
position: fixed;
z-index: 9000;
background: #1e2028;
border: 1px solid rgba(255,255,255,.1);
border-radius: 8px;
box-shadow: 0 8px 28px rgba(0,0,0,.55);
}
/* Verticaal item-contextmenu */
.vv-ctx-menu-v {
padding: 4px;
min-width: 170px;
}
.ctx-item-btn {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
color: #d0d4dd;
font-size: 13px;
padding: 7px 12px;
border-radius: 5px;
cursor: pointer;
transition: background .1s;
}
.ctx-item-btn:hover { background: rgba(255,255,255,.1); }
.ctx-item-btn.ctx-item-danger { color: #f87171; }
.ctx-item-btn.ctx-item-danger:hover { background: rgba(239,68,68,.15); }
/* Fase-contextmenu (tools.js tekstvakken) */
.vv-ctx-menu:not(.vv-ctx-menu-v) {
padding: 10px 12px;
min-width: 220px;
border-radius: 10px;
}
.ctx-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255,255,255,.35);
margin-bottom: 6px;
}
.ctx-fasen {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 4px;
}
.ctx-fase-btn {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.09);
border-radius: 6px;
color: #d0d4dd;
font-size: 11px;
padding: 4px 9px;
cursor: pointer;
transition: background .12s;
}
.ctx-fase-btn:hover:not(:disabled) { background: rgba(255,255,255,.13); }
.ctx-fase-btn.ctx-huidige { opacity: .25; cursor: default; }
.ctx-sep {
height: 1px;
background: rgba(255,255,255,.08);
margin: 6px 0;
}
.ctx-layer-rij { display: flex; gap: 6px; padding: 2px 0 4px; }
.ctx-layer-btn { flex: 1; padding: 5px 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 5px; color: #e2e8f0; font-size: 12px; cursor: pointer; }
.ctx-layer-btn:hover { background: rgba(255,255,255,.14); }

/* ── START RAILS ── */
.lvd-start-rails {
background: var(--school-kleur-glow2, rgba(37,99,235,.08));
border-radius: 10px;
margin: 16px 16px 12px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
}
.lvd-rails-kop {
font-size: 11px;
color: rgba(255,255,255,.3);
margin-bottom: 4px;
}
.lvd-rails-stap {
display: flex;
flex-direction: column;
gap: 2px;
padding: 9px 12px;
border-radius: 7px;
cursor: pointer;
transition: background .15s;
}
.lvd-rails-stap:hover { background: var(--school-kleur-glow1, rgba(37,99,235,.18)); }
.lvd-rails-stap-hoofd {
font-size: 13px;
color: #d8d8d8;
}
.lvd-rails-stap-hoofd .lvd-rails-pijl {
color: var(--school-kleur, #2563eb);
}
.lvd-rails-stap-sub {
font-size: 11px;
color: rgba(255,255,255,.3);
}
.lvd-rails-skip {
background: none;
border: none;
color: rgba(255,255,255,.4);
font-size: 11px;
padding: 6px 12px;
text-align: left;
cursor: pointer;
margin-top: 2px;
}
.lvd-rails-skip:hover { color: rgba(255,255,255,.6); }

/* ── MAIN RECHTS ── */
#lvdMain {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
background: #181a1f;
min-width: 0;
}
#lvdMain::-webkit-scrollbar { width: 4px; }
#lvdMain::-webkit-scrollbar-track { background: transparent; }
#lvdMain::-webkit-scrollbar-thumb { background: rgba(255,255,255,.07); border-radius: 2px; }

/* ── VANDAAG HERO ── */
#lvdHero {
position: relative;
height: clamp(160px, 28vh, 270px);
flex: none;
overflow: hidden;
background: #0c0e14;
}
.lvd-hero-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.lvd-hero-bg img {
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(14px) brightness(.3) saturate(.85);
transform: scale(1.14);
transition: opacity .35s;
}
.lvd-hero-grad {
position: absolute;
inset: 0;
background:
    linear-gradient(to right, rgba(8,10,16,.97) 0%, rgba(8,10,16,.55) 55%, rgba(8,10,16,.18) 100%),
    linear-gradient(to top, rgba(8,10,16,.88) 0%, transparent 50%);
}
.lvd-hero-inner {
position: absolute;
inset: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: center;
padding: 24px 0 20px 32px;
}
.lvd-hero-left { min-width: 0; }
.lvd-hero-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 8px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,.35);
margin-bottom: 10px;
}
.lvd-hero-chip svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lvd-hero-vak {
font-size: 38px;
font-weight: 900;
color: #fff;
letter-spacing: -.8px;
line-height: 1;
margin-bottom: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lvd-hero-doel {
font-size: 13px;
color: rgba(255,255,255,.56);
max-width: 460px;
line-height: 1.45;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lvd-hero-meta {
display: flex;
align-items: center;
gap: 16px;
font-size: 10px;
color: rgba(255,255,255,.38);
margin-bottom: 20px;
}
.lvd-hero-meta-item { display: flex; align-items: center; gap: 5px; }
.lvd-hero-meta-item svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lvd-hero-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.lvd-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 8px;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1.5px;
cursor: pointer;
border: none;
font-family: inherit;
transition: filter .14s, background .14s;
flex: none;
}
.lvd-btn.primair { background: var(--school-kleur, #2563eb); color: var(--school-kleur-tekst, #fff); }
.lvd-btn.primair:hover { filter: brightness(1.12); }
.lvd-btn.primair svg { fill: currentColor; width: 13px; height: 13px; }
.lvd-btn.sec { background: rgba(255,255,255,.08); color: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.1); }
.lvd-btn.sec:hover { background: rgba(255,255,255,.13); }
.lvd-btn.sec svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.lvd-hero-thumb {
width: 100%;
height: 100%;
border-radius: 0;
overflow: hidden;
background: rgba(255,255,255,.06);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.lvd-hero-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lvd-hero-thumb svg { width: 36px; height: 36px; stroke: rgba(255,255,255,.1); fill: none; }
.lvd-hero-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to left, #0c0e14 0%, rgba(12,14,20,.6) 30%, transparent 70%);
pointer-events: none;
}

/* ── DETAIL SECTIE ── */
#lvdDetail { padding: 28px 32px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow: hidden; }
.lvd-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lvd-detail-card {
background: rgba(255,255,255,.026);
border: 1px solid rgba(255,255,255,.058);
border-radius: 14px;
padding: 14px 20px;
overflow: hidden;
min-height: 0;
}
.lvd-detail-card.full { grid-column: 1 / -1; }
.lvd-detail-kop {
display: flex;
align-items: center;
gap: 7px;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
color: rgba(255,255,255,.26);
margin-bottom: 6px;
}
.lvd-detail-kop svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lvd-kop-doel { color: #4ade80; }
.lvd-kop-cv   { color: #a78bfa; }
.lvd-kop-bronnen { color: #fbbf24; }
.lvd-kop-act  { color: rgba(255,255,255,.58); }
.lvd-detail-tekst { font-size: 20px; color: #b0b0b0; line-height: 1.55; white-space: pre-line; overflow: hidden; }
.lvd-detail-leeg { font-size: 14px; color: #2c2c2c; font-style: italic; }

/* Pencil edit button in detail kop */
.lvd-edit-btn { margin-left: auto; background: none; border: none; cursor: pointer; color: rgba(255,255,255,.18); padding: 2px; display: flex; align-items: center; flex-shrink: 0; transition: color .15s; }
.lvd-edit-btn:hover { color: rgba(255,255,255,.65); }
.lvd-edit-btn svg { width: 11px; height: 11px; }

/* Detail edit modal */
#lvdEditModal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); align-items: center; justify-content: center; z-index: 500; }
#lvdEditModal.open { display: flex; }
#lvdEditBox { background: #1d1f27; border: 1px solid rgba(255,255,255,.09); border-radius: 16px; padding: 24px; width: 420px; max-width: 92vw; display: flex; flex-direction: column; gap: 14px; }
#lvdEditTitel { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: rgba(255,255,255,.32); }
.lvd-edit-field { display: flex; flex-direction: column; gap: 6px; }
.lvd-edit-label { font-size: 10px; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: 1px; }
.lvd-edit-input { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 10px 12px; color: #ddd; font-size: 14px; font-family: inherit; resize: none; outline: none; width: 100%; box-sizing: border-box; line-height: 1.5; }
.lvd-edit-input:focus { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.07); }
.lvd-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.lvd-edit-annuleer { background: none; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 8px 16px; color: rgba(255,255,255,.4); cursor: pointer; font-size: 13px; font-family: inherit; }
.lvd-edit-annuleer:hover { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.7); }
.lvd-edit-opslaan { background: var(--school-kleur, #2563eb); border: none; border-radius: 8px; padding: 8px 20px; color: var(--school-kleur-tekst, #fff); cursor: pointer; font-size: 13px; font-weight: 700; font-family: inherit; }
.lvd-edit-opslaan:hover { filter: brightness(1.1); }
.lvd-cv-vraag { font-size: 20px; color: #b0b0b0; line-height: 1.45; margin-bottom: 10px; white-space: pre-line; }
.lvd-cv-ant { font-size: 13px; color: #555; line-height: 1.4; font-style: italic; white-space: pre-line; }
.lvd-bronnen-lijst { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.lvd-bron {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.06);
border-radius: 9px;
padding: 7px 14px 7px 8px;
transition: background .15s, border-color .15s;
}
.lvd-bron[data-url] { cursor: pointer; }
.lvd-bron[data-url]:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.14); }
.lvd-bron-icon {
width: 26px;
height: 26px;
border-radius: 5px;
background: rgba(255,255,255,.07);
display: flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 900;
flex: none;
}
.lvd-bron-naam { font-size: 11px; font-weight: 600; color: #a8a8a8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
.lvd-bron-type { font-size: 8px; color: #444; text-transform: uppercase; letter-spacing: .5px; margin-top: 1px; }

/* ── LESBIBLIOTHEEK ── */
#lnBibliotheek {
height: calc(var(--vch) - 64px);
display: flex;
flex-direction: column;
overflow: hidden;
background: #f3f2ef;
}
.lb-header { padding: 28px 32px 18px; flex-shrink: 0; }
.lb-header-titel { font-size: 26px; font-weight: 800; color: #1e293b; line-height: 1.15; }
.lb-header-sub { font-size: 11px; color: #b0bec5; margin-top: 6px; }
.lb-kop {
padding: 0 32px 0;
flex: none;
}
.lb-zoek {
width: 100%;
background: rgba(0,0,0,.04);
border: 1px solid rgba(0,0,0,.08);
border-radius: 8px;
padding: 8px 14px;
color: #1a202c;
font-size: 13px;
font-family: inherit;
outline: none;
box-sizing: border-box;
transition: border-color .15s, background .15s;
}
.lb-zoek::placeholder { color: rgba(0,0,0,.25); }
.lb-zoek:focus { border-color: rgba(0,0,0,.18); background: #fff; }
.lb-scroll {
flex: 1;
overflow-y: auto;
padding: 16px 32px 40px;
min-height: 0;
}
.lb-scroll::-webkit-scrollbar { width: 4px; }
.lb-scroll::-webkit-scrollbar-track { background: transparent; }
.lb-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 2px; }
.lb-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 14px;
}
.lb-leeg {
padding: 60px 0;
text-align: center;
color: rgba(0,0,0,.22);
font-size: 13px;
}
.lb-card {
background: #faf9f7;
border: 1px solid rgba(0,0,0,.07);
border-radius: 14px;
overflow: hidden;
cursor: pointer;
transition: background .14s, border-color .14s, box-shadow .14s;
position: relative;
display: flex;
flex-direction: column;
box-shadow: 0 2px 8px rgba(0,0,0,.07), 0 4px 16px rgba(0,0,0,.05), inset 0 1px 0 rgba(255,255,255,.9);
}
.lb-card:hover { background: #f8faff; border-color: rgba(0,0,0,.15); box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.05); }
.lb-thumb {
width: 100%;
aspect-ratio: 16 / 9;
background: rgba(0,0,0,.03);
overflow: hidden;
flex: none;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lb-thumb-ph svg { width: 26px; height: 26px; stroke: rgba(0,0,0,.10); fill: none; stroke-width: 1; }
.lb-thumb-ov { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.60) 40%, rgba(0,0,0,.12) 68%, transparent 100%); padding: 56px 12px 10px; }
.lb-thumb-vak { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.65); margin-bottom: 3px; }
.lb-thumb-doel { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.38; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.lb-doel-hover { position: absolute; inset: 0; background: rgba(0,0,0,.84); padding: 14px 12px 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; opacity: 0; transition: opacity .18s; pointer-events: none; }
.lb-card:hover .lb-doel-hover { opacity: 1; }
.lb-doel-hover-vak { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.5); }
.lb-doel-hover-tekst { font-size: 12px; font-weight: 600; color: #fff; line-height: 1.45; }
.lb-body {
padding: 14px 14px 12px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.lb-vak {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .9px;
color: rgba(0,0,0,.32);
}
.lb-doel {
font-size: 14px;
font-weight: 600;
color: #1a202c;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lb-doel-leeg { color: rgba(0,0,0,.22); font-style: italic; font-weight: 400; }
.lb-meta {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 1px;
}
.lb-meta-item {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .7px;
color: #9aa5b4;
}
.lb-meta-sep { color: rgba(0,0,0,.15); font-size: 9px; }
.lb-datum {
margin-top: auto;
padding-top: 6px;
font-size: 10px;
color: rgba(0,0,0,.32);
display: flex;
align-items: center;
gap: 5px;
}
.lb-gedeeld-icoon { display: inline-flex; align-items: center; }
.lb-gedeeld-icoon svg { width: 11px; height: 11px; flex-shrink: 0; }
.lb-hart {
position: absolute;
top: 8px;
right: 8px;
width: 21px;
height: 21px;
border-radius: 50%;
background: rgba(0,0,0,.28);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .14s, transform .12s;
z-index: 1;
flex-shrink: 0;
}
.lb-hart:hover { background: rgba(0,0,0,.38); transform: scale(1.1); }
.lb-hart svg { width: 10px; height: 10px; stroke: rgba(255,255,255,.8); stroke-width: 2.2; fill: none; transition: stroke .15s, fill .15s; stroke-linecap: round; stroke-linejoin: round; }
.lb-hart.actief { background: #1a56db; }
.lb-hart.actief svg { stroke: #fff; fill: #fff; }
.lb-koppel-btn { position: absolute; bottom: 8px; right: 8px; width: 26px; height: 26px; border-radius: 7px; background: rgba(37,99,235,.1); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s, background .12s; }
.lb-card:hover .lb-koppel-btn { opacity: 1; }
.lb-koppel-btn:hover { background: rgba(37,99,235,.2); }
.lb-koppel-btn svg { width: 12px; height: 12px; stroke: #2563eb; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.lb-ctx-menu { position: fixed; z-index: 99999; background: #fff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,.16), 0 1px 4px rgba(0,0,0,.08); padding: 4px; min-width: 148px; }
.lb-ctx-verwijder { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: none; background: none; font-size: 12px; font-weight: 500; color: #374151; cursor: pointer; border-radius: 5px; font-family: inherit; text-align: left; transition: background .1s, color .1s; }
.lb-ctx-verwijder:hover { background: #fef2f2; color: #dc2626; }
.lb-ctx-verwijder svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; }
.rr-ctx-volgwk { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: none; background: none; font-size: 12px; font-weight: 500; color: #374151; cursor: pointer; border-radius: 5px; font-family: inherit; text-align: left; transition: background .1s, color .1s; }
.rr-ctx-volgwk:hover { background: #eff6ff; color: #1d4ed8; }
.rr-ctx-volgwk svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; }
.rr-volgwk-slot-vak { font-size: 10px; color: #475569; font-weight: 600; flex-shrink: 0; }
.lb-koppel-slot-btn.actief .rr-volgwk-slot-vak { color: rgba(255,255,255,.8); }
.ln-bevestig-permanent { font-size: 10px; color: #b0bac7; text-align: center; margin-top: 12px; }
.ln-bevestig-ok--rood { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.ln-bevestig-ok--rood:hover { opacity: 1; background: #fee2e2; }
.lb-koppel-ov { position: fixed; inset: 0; background: rgba(0,0,0,.38); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; pointer-events: none; }
.lb-koppel-ov.open { opacity: 1; pointer-events: auto; }
.lb-koppel-panel { background: #fff; border-radius: 13px; padding: 20px; width: 300px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 11px; }
.lb-koppel-titel { font-size: 13px; font-weight: 700; color: #1a202c; }
.lb-koppel-les-info { padding: 9px 11px; background: #f8fafc; border-radius: 8px; }
.lb-koppel-les-vak { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: #2563eb; margin-bottom: 3px; }
.lb-koppel-les-doel { font-size: 11px; color: #334155; line-height: 1.4; }
.lb-koppel-sectie { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: #94a3b8; margin-top: 2px; }
.lb-koppel-wk-rij, .lb-koppel-dag-rij { display: flex; gap: 5px; flex-wrap: wrap; }
.lb-koppel-wk-btn, .lb-koppel-dag-btn { padding: 5px 11px; border-radius: 6px; border: 1px solid #e2e8f0; font-size: 11px; font-weight: 600; cursor: pointer; background: #f8fafc; color: #475569; transition: background .1s, border-color .1s, color .1s; }
.lb-koppel-wk-btn.actief, .lb-koppel-dag-btn.actief { background: #1a56db; color: #fff; border-color: #1a56db; }
.lb-koppel-wk-btn:hover:not(.actief):not(:disabled), .lb-koppel-dag-btn:hover:not(.actief) { background: #e8f0fe; border-color: #93c5fd; }
.lb-koppel-wk-btn.uitgeschakeld { opacity: .4; cursor: not-allowed; }
.lb-koppel-slots { display: flex; flex-direction: column; gap: 4px; min-height: 36px; }
.lb-koppel-leeg { font-size: 11px; color: #94a3b8; text-align: center; padding: 10px 0; }
.lb-koppel-slot-btn { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; border: 1px solid #e2e8f0; font-size: 11px; cursor: pointer; background: #f8fafc; color: #334155; text-align: left; transition: background .1s, border-color .1s; }
.lb-koppel-slot-btn.actief { background: #1a56db; color: #fff; border-color: #1a56db; }
.lb-koppel-slot-btn.bezet { background: #fffbeb; border-color: #fcd34d; }
.lb-koppel-slot-btn.bezet.actief { background: #d97706; color: #fff; border-color: #d97706; }
.lb-koppel-slot-btn:hover:not(.actief) { background: #e8f0fe; border-color: #93c5fd; }
.lb-koppel-slot-klas { font-weight: 700; flex: 1; }
.lb-koppel-slot-tijd { font-size: 10px; color: #94a3b8; flex-shrink: 0; }
.lb-koppel-slot-btn.actief .lb-koppel-slot-tijd { color: rgba(255,255,255,.7); }
.lb-koppel-slot-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #92400e; background: #fef3c7; border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }
.lb-koppel-slot-btn.actief .lb-koppel-slot-tag { background: rgba(255,255,255,.25); color: #fff; }
.lb-koppel-voet { display: flex; gap: 8px; padding-top: 2px; }
.lb-koppel-annuleer-btn { flex: 1; padding: 8px; border-radius: 7px; border: 1px solid #e2e8f0; font-size: 12px; font-weight: 600; cursor: pointer; background: #f8fafc; color: #64748b; }
.lb-koppel-plaatsen-btn { flex: 2; padding: 8px; border-radius: 7px; border: none; font-size: 12px; font-weight: 700; cursor: pointer; background: #1a56db; color: #fff; transition: background .12s; }
.lb-koppel-plaatsen-btn:hover:not(:disabled) { background: #1648c0; }
.lb-koppel-plaatsen-btn:disabled { background: #93c5fd; cursor: not-allowed; }
.lb-tags-btn { position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; border-radius: 6px; background: rgba(0,0,0,.28); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 2px; opacity: 1; transition: background .12s; padding: 0 4px; }
.lb-tags-btn.heeft-tags { background: #1a56db; width: auto; min-width: 22px; }
.lb-card:hover .lb-tags-btn.heeft-tags { background: #1648c0; }
.lb-tags-btn:hover { background: rgba(37,99,235,.9) !important; opacity: 1 !important; }
.lb-tags-btn svg { width: 11px; height: 11px; stroke: #fff; stroke-width: 2; flex-shrink: 0; }
.lb-tags-btn-ct { font-size: 8.5px; font-weight: 800; color: #fff; line-height: 1; }
.lb-tags-ov { position: fixed; inset: 0; background: rgba(0,0,0,.36); z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .16s; pointer-events: none; }
.lb-tags-ov.open { opacity: 1; pointer-events: auto; }
.lb-tags-panel { background: #fff; border-radius: 13px; padding: 20px; width: 288px; box-shadow: 0 20px 60px rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 12px; }
.lb-tags-titel { font-size: 13px; font-weight: 700; color: #1a202c; }
.lb-tags-chips { display: flex; flex-wrap: wrap; gap: 5px; min-height: 24px; }
.lb-tags-leeg { font-size: 11px; color: #94a3b8; font-style: italic; }
.lb-tags-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 9px; border-radius: 20px; background: #eff6ff; border: 1px solid #bfdbfe; font-size: 11px; font-weight: 600; color: #1d4ed8; }
.lb-tags-chip-rm { background: none; border: none; cursor: pointer; color: #93c5fd; font-size: 13px; line-height: 1; padding: 0; display: flex; align-items: center; transition: color .1s; }
.lb-tags-chip-rm:hover { color: #e53e3e; }
.lb-tags-invoer-wrap { position: relative; }
.lb-tags-input { width: 100%; box-sizing: border-box; padding: 8px 11px; border-radius: 8px; border: 1px solid rgba(0,0,0,.1); background: rgba(0,0,0,.05); font-size: 12px; font-family: inherit; color: #1a202c; outline: none; transition: border-color .15s, background .15s; }
.lb-tags-input::placeholder { color: rgba(0,0,0,.3); }
.lb-tags-input:focus { border-color: rgba(0,0,0,.2); background: #fff; }
.lb-tags-sugg { position: absolute; top: calc(100% + 3px); left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.1); overflow: hidden; z-index: 1; }
.lb-tags-sugg:empty { display: none; }
.lb-tags-sugg-item { display: block; width: 100%; text-align: left; padding: 7px 12px; font-size: 11.5px; color: #334155; background: none; border: none; cursor: pointer; transition: background .1s; }
.lb-tags-sugg-item:hover { background: #eff6ff; color: #1d4ed8; }
.lb-tags-hint { font-size: 10px; color: #94a3b8; }
.lb-tags-voet { display: flex; gap: 8px; padding-top: 2px; }
.lb-tags-annuleer { flex: 1; padding: 8px; border-radius: 7px; border: 1px solid #e2e8f0; font-size: 12px; font-weight: 600; cursor: pointer; background: #f8fafc; color: #64748b; }
.lb-tags-opslaan { flex: 2; padding: 8px; border-radius: 7px; border: none; font-size: 12px; font-weight: 700; cursor: pointer; background: #1a56db; color: #fff; transition: background .12s; }
.lb-tags-opslaan:hover { background: #1648c0; }
.sv-keuze-ov { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 10001; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.sv-keuze-ov.open { opacity: 1; }
.sv-keuze-panel { background: #fff; border-radius: 13px; padding: 22px 24px; width: 320px; box-shadow: 0 20px 60px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 10px; }
.sv-keuze-titel { font-size: 14px; font-weight: 700; color: #1a202c; }
.sv-keuze-info { font-size: 12px; color: #64748b; line-height: 1.5; }
.sv-keuze-btn { width: 100%; padding: 9px; border-radius: 7px; border: 1px solid #e2e8f0; font-size: 12px; font-weight: 600; cursor: pointer; background: #f8fafc; color: #1a202c; transition: background .12s; text-align: left; }
.sv-keuze-btn:hover { background: #e8f0fe; }
.sv-keuze-btn.primair { background: #1a56db; color: #fff; border-color: #1a56db; }
.sv-keuze-btn.primair:hover { background: #1648c0; }
.sv-keuze-annuleer { background: none; border: none; color: #94a3b8; font-size: 11px; cursor: pointer; padding: 4px; align-self: center; }
.sv-keuze-annuleer:hover { color: #64748b; }
.lb-loader-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }
.lb-filters {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
padding: 10px 0 0;
}
.lb-chip {
height: 24px;
padding: 0 10px;
border-radius: 5px;
border: 1px solid rgba(0,0,0,.08);
background: rgba(0,0,0,.03);
color: #64748b;
font-size: 10px;
font-weight: 600;
letter-spacing: .2px;
cursor: pointer;
font-family: inherit;
transition: background .12s, border-color .12s, color .12s;
white-space: nowrap;
}
.lb-chip:hover { background: rgba(0,0,0,.07); border-color: rgba(0,0,0,.13); color: #334155; }
.lb-chip.actief { background: #334155; border-color: #334155; color: #fff; }
.lb-chip-sep { width: 1px; height: 14px; background: rgba(0,0,0,.1); flex-shrink: 0; margin: 0 2px; }
#lbActiefTag { padding: 0 0 6px; display: flex; align-items: center; }
#lbActiefTag:empty { display: none; }
.lb-actief-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 6px 3px 10px; border-radius: 20px; background: #eff6ff; border: 1px solid #bfdbfe; font-size: 11px; font-weight: 600; color: #1d4ed8; }
.lb-actief-tag-lbl::before { content: 'Tag: '; opacity: .55; }
.lb-actief-tag-rm { background: none; border: none; cursor: pointer; color: #93c5fd; font-size: 14px; line-height: 1; padding: 0 2px; display: flex; align-items: center; transition: color .1s; }
.lb-actief-tag-rm:hover { color: #e53e3e; }
.lb-card-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 0; }
.lb-card-tag { font-size: 9.5px; font-weight: 600; color: #64748b; background: rgba(0,0,0,.045); border-radius: 4px; padding: 2px 6px; cursor: pointer; transition: background .1s, color .1s; white-space: nowrap; }
.lb-card-tag:hover { background: #eff6ff; color: #1d4ed8; }

/* ── BIBLIOTHEEK TABS ── */
.lb-tabs { display: flex; gap: 2px; padding: 20px 32px 0; flex-shrink: 0; border-bottom: 1px solid rgba(0,0,0,.07); margin-bottom: 0; }
.lb-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 14px 10px; font-size: 13px; font-weight: 600; color: rgba(0,0,0,.4); cursor: pointer; font-family: inherit; transition: color .15s, border-color .15s; margin-bottom: -1px; }
.lb-tab:hover { color: rgba(0,0,0,.65); }
.lb-tab.actief { color: #1e293b; border-bottom-color: #1e293b; }
.lb-school-badge { font-size: 9.5px; font-weight: 600; color: #2563eb; opacity: .65; padding-top: 3px; }
.lb-ctx-bewerk { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; background: none; border: none; cursor: pointer; font-size: 13px; color: #334155; font-family: inherit; transition: background .1s; }
.lb-ctx-bewerk svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .6; }
.lb-ctx-bewerk:hover { background: rgba(0,0,0,.05); }
.lb-ctx-deel { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; background: none; border: none; cursor: pointer; font-size: 13px; color: #334155; font-family: inherit; transition: background .1s; }
.lb-ctx-deel svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .6; }
.lb-ctx-deel:hover { background: rgba(0,0,0,.05); }
.lb-ctx-stop-delen { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 14px; background: none; border: none; cursor: pointer; font-size: 13px; color: #334155; font-family: inherit; transition: background .1s; }
.lb-ctx-stop-delen svg { width: 15px; height: 15px; flex-shrink: 0; opacity: .6; }
.lb-ctx-stop-delen:hover { background: rgba(0,0,0,.05); }

/* ── RECENTE LESSEN ── */
#lnRecenteLessen { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f3f2ef; }
.rl-header { padding: 28px 24px 20px; flex-shrink: 0; }
.rl-header-titel { font-size: 26px; font-weight: 800; color: #1e293b; line-height: 1.15; }
.rl-header-sub { font-size: 11px; color: #b0bec5; margin-top: 6px; }
.rl-scroll { flex: 1; overflow-y: auto; padding: 0 24px; }
.rl-scroll::-webkit-scrollbar { width: 4px; }
.rl-scroll::-webkit-scrollbar-track { background: transparent; }
.rl-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 2px; }
.rl-lijst { display: flex; flex-direction: column; border-top: 1px solid rgba(0,0,0,.08); }
.rl-card { display: flex; gap: 12px; background: transparent; border-bottom: 1px solid rgba(0,0,0,.08); padding: 14px 0; cursor: pointer; transition: background .12s; align-items: flex-start; }
.rl-card:hover { background: rgba(255,255,255,.5); }
.rl-thumb { width: 52px; height: 44px; border-radius: 5px; overflow: hidden; flex-shrink: 0; background: rgba(0,0,0,.07); margin-top: 2px; }
.rl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rl-vak { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: #64748b; }
.rl-doel { font-size: 13px; font-weight: 500; color: #1e293b; line-height: 1.4; }
.rl-doel-leeg { color: #94a3b8; font-style: italic; }
.rl-meta { font-size: 10px; font-weight: 600; color: #94a3b8; }
.rl-info { font-size: 10.5px; color: #94a3b8; margin-top: 3px; line-height: 1.4; }
.rl-waarschuwing { font-size: 10px; color: #b45309; margin-top: 2px; }
.rl-leeg { padding: 48px; text-align: center; color: #94a3b8; font-size: 13px; }
.rl-loader-wrap { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    #lvdSidebar { width: 240px; }
    #lvdDagTitel { font-size: 14px; }
    .lvd-hero-vak { font-size: 26px; }
    .lvd-hero-thumb { width: 180px; height: 116px; }
    #lvdDetail { padding: 16px 20px 40px; }
}
@media (max-width: 700px) {
    .lvd-hero-thumb { display: none; }
}
@media (max-width: 620px) {
    #lnVandaag { flex-direction: column; }
    #lvdSidebar { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); }
    #lvdLijst { flex-direction: row; overflow-x: auto; overflow-y: hidden; display: flex; padding: 8px; }
    .lvd-item { min-width: 160px; min-height: 0; border-radius: 8px; flex-direction: column; align-items: flex-start; padding: 10px; }
    .lvd-tl { display: none; }
}

/* ── HOOGTE-BREAKPOINTS — operationele schermen ── */
@media (max-height: 900px) {
    #lvdHeader { padding: 14px 20px 10px; }
    .ln-rr-controls { margin-bottom: clamp(6px, 1vh, 14px); }
    #lnRooster { padding: 12px 32px; }
}
@media (max-height: 768px) {
    #lvdHeader { padding: 10px 20px 8px; }
    #lvdDagTitel { font-size: clamp(18px, 2.5vh, 36px); }
    #lvdDetail { padding: 12px 24px 12px; gap: 8px; }
    .lvd-detail-card { padding: 10px 14px; }
    #lnRooster { padding: 8px 24px; }
    .ln-rr-controls { margin-bottom: 8px; }
}
@media (max-height: 650px) {
    #lvdHeader { padding: 6px 16px 6px; }
    #lvdDetail { padding: 8px 16px 8px; gap: 6px; }
    .lvd-detail-card { padding: 8px 10px; }
    #lnRooster { padding: 6px 20px; }
    .ln-rr-controls { margin-bottom: 6px; }
}

/* ── LESMODI ── */
#modeToggle { display: flex; align-items: center; background: #d8d8d8; border-radius: 6px; padding: 2px; gap: 1px; margin: 0 8px; }
#modeToggle .mode-btn { font-size: 11px; padding: 2px 0; width: 52px; text-align: center; border: none; border-radius: 3px; background: transparent; color: #888; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; font-weight: 600; letter-spacing: .2px; }
#modeToggle .mode-btn.actief { background: #fff; color: #222; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
#modeToggle .mode-btn:hover:not(.actief) { color: #555; }
#app[data-mode="view"] #modeToggle { display: none !important; }
#app[data-mode="present"] .wbtv { cursor: default !important; }
#app[data-mode="present"] .vv-item { cursor: default !important; }
#modeBadge { display: none; align-items: center; font-size: 11px; color: var(--g3); padding: 0 10px; white-space: nowrap; }
#app[data-mode="view"] #modeBadge { display: flex; color: #6b8fc9; letter-spacing: .3px; }
#app[data-mode="view"] #logoKlas,
#app[data-mode="view"] #logoTijd { display: none !important; }
#app[data-mode="view"] .wbtv { pointer-events: none !important; cursor: default !important; }
#app[data-mode="view"] .vv-item { cursor: default !important; user-select: none; }
#app[data-mode="view"] #vvGroupBox { display: none !important; }
#app[data-mode="view"] #tbZijbalk,
#app[data-mode="view"] #tbSaveKnop,
#app[data-mode="view"] #ldEditBtn,
#app[data-mode="view"] #cvBewerkBtn,
#app[data-mode="view"] #vwActEditBtn { display: none !important; }
#app[data-mode="present"] #tbSaveKnop { opacity: .25; pointer-events: none; }
#app[data-mode="present"] #ldEditBtn,
#app[data-mode="present"] #cvBewerkBtn { display: none !important; }

/* ── PRESENT MODE ── */
#app[data-mode="present"] #vvGroupBox { display: none !important; }
#app[data-mode="present"] .vv-item    { user-select: none; cursor: default; }

#app[data-mode="present"] #tbPresentBtn,
#app[data-mode="view"]    #tbPresentBtn { display: none; }

#tbPresentBtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
}

/* ── LVD TIMER OVERLAY ── */
#lvdTimerOverlay { position: fixed; inset: 0; background: rgba(0,0,0,.985); z-index: 300; display: flex; align-items: center; justify-content: center; }
#lvdTimerContent { display: flex; flex-direction: column; align-items: center; gap: 24px; }
#lvdTimerRingWrap { position: relative; width: 420px; height: 420px; }
#lvdTimerRing { width: 100%; height: 100%; color: #fff; }
#lvdTimerCenter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
#lvdtTxt { font-size: 100px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -3px; }
#lvdtMinSec { font-size: 8px; font-weight: 700; color: rgba(255,255,255,.3); letter-spacing: 3px; text-transform: uppercase; }
#lvdtPresets { display: flex; gap: 10px; }
.lvdt-preset { padding: 7px 20px; border-radius: 20px; border: 1.5px solid rgba(255,255,255,.2); font-size: 11px; font-weight: 700; cursor: pointer; background: transparent; color: rgba(255,255,255,.5); transition: all .15s; }
.lvdt-preset:hover { border-color: rgba(255,255,255,.6); color: #fff; }
#lvdtToggle { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 32px; border-radius: 40px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); border: 1.5px solid rgba(255,255,255,.2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: background .15s, color .15s; }
#lvdtToggle:hover { background: rgba(255,255,255,.2); color: #fff; }
#lvdtToggle svg { width: 9px; height: 10px; }
#lvdtReset { background: none; border: none; cursor: pointer; font-size: 10px; font-weight: 700; color: rgba(255,255,255,.28); text-transform: uppercase; letter-spacing: 1px; }
#lvdtReset:hover { color: rgba(255,255,255,.65); }
.lvdt-voet { display: flex; align-items: center; gap: 14px; }
#lvdtBel { background: none; border: none; cursor: pointer; color: rgba(255,255,255,.3); padding: 3px; border-radius: 5px; display: flex; align-items: center; transition: color .15s; }
#lvdtBel:hover { color: rgba(255,255,255,.7); }
#lvdtBel.bel-uit { color: rgba(255,255,255,.12); }
#lnTimerBtn.actief { color: var(--school-kleur, #2563eb); }
#tbPresentBtn:hover { background: #1d4ed8; }
#updatesLijst { scrollbar-width: thin; scrollbar-color: #334155 transparent; }
#updatesLijst::-webkit-scrollbar { width: 4px; }
#updatesLijst::-webkit-scrollbar-track { background: transparent; }
#updatesLijst::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }