/* =====================================================================
   KlasKlik — bespoke stijl. Laadt NA /styles/main.css en /styles/admin.css.
   Basis: CSS-blok uit het goedgekeurde Trekken-ontwerp (design-trekken.html,
   29/9/2026 — niet bewaard; het Trekken-scherm zelf is nu de referentie).
   ===================================================================== */

/* sticky binnen .lk-main mogelijk maken (zie valkuilen in CLAUDE.md) */
.lk-main{overflow-x:visible}

/* het hidden-attribuut moet winnen van display:flex op sidebar-links e.d. */
[hidden]{display:none!important}

/* ---------- "Nu in les"-pil ---------- */
.kk-now{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--lk-r-full);background:var(--lk-surface);border:1px solid var(--lk-border);font-size:var(--lk-t-sm);color:var(--lk-ink-2);box-shadow:var(--lk-sh-1)}
.kk-now i{color:var(--lk-accent)}
.kk-now b{color:var(--lk-ink)}
button.kk-now{font-family:inherit;cursor:pointer;transition:box-shadow var(--lk-t-fast),border-color var(--lk-t-fast)}
button.kk-now:hover{border-color:var(--lk-accent);box-shadow:var(--lk-sh-2)}

/* ---------- klaschips (gedeelde component, bovenaan elke view) ---------- */
.kk-classes{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--lk-s-5)}
.kk-classrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kk-classchip{text-transform:none;font-size:var(--lk-t-sm);padding:8px 14px;min-width:66px;justify-content:center;font-weight:700}
.kk-classchip .n{font-family:var(--lk-font-mono);font-size:11px;font-weight:500;opacity:.7}
.kk-classchip.is-active.y1{background:var(--lk-year1);border-color:var(--lk-year1)}
.kk-classchip.is-active.y2{background:var(--lk-year2);border-color:var(--lk-year2)}
.kk-classchip.is-active .n{opacity:.85}

/* ---------- bedieningsbalk ---------- */
.kk-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;background:var(--lk-surface);border:1px solid var(--lk-border);border-radius:var(--lk-r-lg);box-shadow:var(--lk-sh-1);margin-bottom:var(--lk-s-4)}
.kk-seg{display:inline-flex;background:var(--lk-surface-2);border:1px solid var(--lk-border);border-radius:var(--lk-r-md);padding:3px;gap:2px}
.kk-seg button{border:0;background:transparent;font-family:inherit;font-size:var(--lk-t-sm);font-weight:700;padding:9px 16px;min-width:48px;border-radius:8px;color:var(--lk-ink-2);cursor:pointer;transition:all var(--lk-t-fast)}
.kk-seg button:hover{color:var(--lk-ink)}
/* gekozen aantal: omgekeerde kleuren (ink als achtergrond) → sterk contrast in licht én donker */
.kk-seg button.is-active{background:var(--lk-ink);color:var(--lk-bg);box-shadow:var(--lk-sh-2)}
.kk-spacer{flex:1}
kbd{font-family:var(--lk-font-mono);font-size:11px;font-weight:500;padding:2px 6px;border-radius:5px;border:1px solid var(--lk-border);border-bottom-width:2px;background:var(--lk-surface);color:var(--lk-ink-2)}
.lk-btn--primary kbd{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);color:#fff}
.lk-btn.is-on{background:var(--lk-accent-soft);border-color:var(--lk-accent);color:var(--lk-accent-deep)}

/* ---------- beurtrol ---------- */
.kk-turns{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:var(--lk-t-sm);color:var(--lk-ink-2);margin:0 4px var(--lk-s-5)}
.kk-turns b{color:var(--lk-ink)}
.kk-bar{flex:1;min-width:120px;max-width:340px;height:8px;background:var(--lk-surface-2);border-radius:var(--lk-r-full);overflow:hidden}
.kk-bar i{display:block;height:100%;width:0;background:var(--lk-accent);border-radius:inherit;transition:width var(--lk-t-slow)}
.kk-turns .lk-btn{margin-left:auto}

/* ---------- kaartenraster ---------- */
.kk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--lk-s-4)}
.kk-grid.is-single{grid-template-columns:minmax(220px,300px);justify-content:center}
.kk-grid.is-single .kk-name__text{font-size:var(--lk-t-xl)}
.kk-card{position:relative;background:var(--lk-surface);border:1px solid var(--lk-border);border-radius:var(--lk-r-lg);box-shadow:var(--lk-sh-2);overflow:hidden;cursor:pointer;transition:box-shadow var(--lk-t),border-color var(--lk-t),opacity var(--lk-t);animation:kk-in .4s var(--lk-t-slow) both;-webkit-user-select:none;user-select:none}
.kk-card:hover{box-shadow:var(--lk-sh-3)}
.kk-card:focus-visible{outline:none;box-shadow:var(--lk-sh-ring),var(--lk-sh-2)}
@keyframes kk-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
.kk-photo{aspect-ratio:4/5;background:var(--lk-surface-2);overflow:hidden;display:grid;place-items:center;color:var(--lk-muted)}
.kk-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--lk-t);-webkit-user-drag:none}
.kk-photo > i{font-size:3rem;opacity:.5}
.kk-card:hover .kk-photo img{transform:scale(1.04)}
.kk-num{position:absolute;top:8px;left:8px;min-width:26px;height:26px;padding:0 7px;border-radius:var(--lk-r-full);background:color-mix(in oklab,var(--lk-surface) 88%,transparent);backdrop-filter:blur(6px);border:1px solid var(--lk-border);font-family:var(--lk-font-mono);font-size:12px;display:grid;place-items:center;color:var(--lk-ink-2)}
.kk-absent{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;border:1px solid var(--lk-border);background:color-mix(in oklab,var(--lk-surface) 88%,transparent);backdrop-filter:blur(6px);color:var(--lk-ink-2);cursor:pointer;display:grid;place-items:center;opacity:0;transition:opacity var(--lk-t-fast),background var(--lk-t-fast)}
.kk-absent:hover{background:var(--lk-error-soft);color:var(--lk-error)}
.kk-card:hover .kk-absent,.kk-card.is-absent .kk-absent{opacity:1}
@media (hover:none){.kk-absent{opacity:1}}
.kk-name{padding:12px 14px 14px;min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.kk-name__mask{width:72%;height:14px;border-radius:var(--lk-r-full);background:var(--lk-surface-2)}
.kk-name__text{display:none;font-weight:800;font-size:var(--lk-t-md);line-height:1.2;letter-spacing:-.01em}
.kk-name__meta{font-family:var(--lk-font-mono);font-size:11px;color:var(--lk-muted)}
.kk-card.is-revealed{border-color:var(--lk-accent);box-shadow:0 0 0 2px var(--lk-accent-soft),var(--lk-sh-2)}
.kk-card.is-revealed .kk-name__mask{display:none}
.kk-card.is-revealed .kk-name__text{display:block;animation:kk-in .25s both}
.kk-card.is-absent{opacity:.55;cursor:default}
.kk-card.is-absent .kk-photo{filter:grayscale(1)}
.kk-card.is-absent .kk-absent{background:var(--lk-error-soft);color:var(--lk-error);border-color:transparent}
.kk-card.is-absent .kk-name__mask{display:none}
.kk-card.is-absent .kk-name__meta::before{content:"afwezig · "}
.kk-empty{grid-column:1/-1}

/* ---------- sneltoetsen + toast ---------- */
.kk-hints{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:var(--lk-s-6);font-size:var(--lk-t-xs);color:var(--lk-muted)}
.kk-hints span{display:inline-flex;align-items:center;gap:6px}
.kk-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--lk-ink);color:var(--lk-bg);padding:10px 16px;border-radius:var(--lk-r-full);font-size:var(--lk-t-sm);font-weight:600;box-shadow:var(--lk-sh-4);display:flex;gap:12px;align-items:center;transition:all var(--lk-t);z-index:100;max-width:calc(100vw - 32px)}
.kk-toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.kk-toast button{background:none;border:0;color:var(--lk-accent);font:inherit;font-weight:800;cursor:pointer;padding:0;white-space:nowrap}

/* ---------- algemeen ---------- */
.kk-placeholder{max-width:720px}
.kk-placeholder .kk-meta{margin-top:var(--lk-s-2)}
.kk-meta{font-family:var(--lk-font-mono);font-size:var(--lk-t-xs);color:var(--lk-muted)}
.kk-help{font-size:var(--lk-t-sm);color:var(--lk-ink-2);max-width:720px;margin:0 0 var(--lk-s-4)}
.kk-mb{margin-bottom:var(--lk-s-5)}
.kk-h2{font-size:var(--lk-t-md);font-weight:800;margin:var(--lk-s-5) 0 var(--lk-s-3)}
.kk-up{color:var(--lk-ok)}
.kk-down{color:var(--lk-error)}
.kk-warn{color:var(--lk-warn);font-weight:700}
.kk-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--lk-r-full);font-size:12px;font-weight:700;white-space:nowrap;background:var(--lk-surface-2);color:var(--lk-ink-2);max-width:260px;overflow:hidden;text-overflow:ellipsis}
.kk-pill--error{background:var(--lk-error-soft);color:var(--lk-error)}

/* ---------- beheer: toolbar, lijsten, drawer ---------- */
.kk-toolbar-actions{display:flex;align-items:center;gap:var(--lk-s-3);flex-wrap:wrap}
.kk-inline-label{font-size:var(--lk-t-sm);font-weight:600;color:var(--lk-ink-2)}
.kk-select-sm{width:auto;min-width:150px;padding-top:8px;padding-bottom:8px}
.kk-inline-check{display:inline-flex;align-items:center;gap:6px;font-size:var(--lk-t-xs);font-weight:600;text-transform:none;letter-spacing:0;cursor:pointer}
.kk-inline-check input{accent-color:var(--lk-accent)}
.kk-split{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:var(--lk-s-5);align-items:start}
.kk-split--even{grid-template-columns:1fr 1fr}
.kk-split .lk-listframe__head .lk-btn{text-transform:none;letter-spacing:0}
.kk-selrow.is-selected{background:var(--lk-accent-soft);box-shadow:inset 3px 0 0 var(--lk-accent)}
.lk-listframe .kk-selrow.is-selected:hover{background:var(--lk-accent-soft)}
.lk-row.is-inactive .lk-row__title,.lk-row.is-inactive .kk-sthumb{opacity:.5}
.kk-statusbtn{width:100px;justify-content:center}
/* gender-knop in de leerlingenlijst: één klik wisselt – → ♂ → ♀ */
.kk-gbtn{width:38px;height:32px;border-radius:var(--lk-r-md);border:1px solid var(--lk-border);background:var(--lk-surface);color:var(--lk-muted);font-size:1.05rem;display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:background var(--lk-t-fast),border-color var(--lk-t-fast)}
.kk-gbtn:hover{border-color:var(--lk-accent)}
.kk-gbtn--m{background:var(--lk-info-soft);color:var(--lk-info);border-color:color-mix(in oklab,var(--lk-info) 40%,transparent)}
.kk-gbtn--v{background:var(--lk-error-soft);color:var(--lk-error);border-color:color-mix(in oklab,var(--lk-error) 40%,transparent)}
.kk-studentname .lk-row__title{overflow-wrap:break-word}
/* klassen + leerlingen onder elkaar zodra de leerlingenkolom te smal zou worden */
@media (max-width:1100px){.kk-split:not(.kk-split--even){grid-template-columns:1fr}}
.kk-lockpill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--lk-r-full);background:var(--lk-accent-soft);color:var(--lk-accent-deep)}
.kk-lockicon{color:var(--lk-accent-deep)}
.kk-emptyrow{padding:var(--lk-s-5);color:var(--lk-muted);font-size:var(--lk-t-sm)}
/* pasfoto-miniatuur in de leerlingenlijst (beheer) — niet verwarren met .kk-thumb (duimknoppen) */
.kk-sthumb{width:40px;height:50px;border-radius:var(--lk-r-sm);overflow:hidden;background:var(--lk-surface-2);display:grid;place-items:center;color:var(--lk-muted);flex-shrink:0}
.kk-sthumb img{width:100%;height:100%;object-fit:cover;display:block}
.kk-photoedit{display:flex;align-items:center;gap:var(--lk-s-4)}
.kk-photoedit__img{width:96px;aspect-ratio:4/5;border-radius:var(--lk-r-md);overflow:hidden;background:var(--lk-surface-2);display:grid;place-items:center;color:var(--lk-muted);font-size:2rem}
.kk-photoedit__img img{width:100%;height:100%;object-fit:cover;display:block}
.kk-inline-input{flex:1;min-width:0;padding:7px 10px}
.kk-ruleform{display:flex;align-items:center;gap:var(--lk-s-3);flex-wrap:wrap;margin-bottom:var(--lk-s-4)}
.kk-ruleform .lk-select{width:auto;min-width:200px;flex:1}
.kk-settings{max-width:560px}
.kk-lessonrow{gap:var(--lk-s-3);padding:8px var(--lk-s-4);cursor:default}
.kk-lessonrow .lk-input{width:130px;padding:7px 10px}
.kk-lessonnr{width:48px;font-family:var(--lk-font-mono);font-weight:700}

/* ---------- jaarwissel ---------- */
.kk-yearwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--lk-s-5);align-items:start;max-width:1000px}
.kk-yearcard{background:var(--lk-surface);border:1px solid var(--lk-border);border-radius:var(--lk-r-lg);box-shadow:var(--lk-sh-1);padding:var(--lk-s-5)}
.kk-yearcard h2{display:flex;align-items:center;gap:10px;font-size:var(--lk-t-lg);margin:0 0 var(--lk-s-3)}
.kk-yearcard__nr{width:28px;height:28px;border-radius:50%;background:var(--lk-accent-soft);color:var(--lk-accent-deep);display:grid;place-items:center;font-size:var(--lk-t-sm);font-weight:800}
.kk-yearcard__foot{display:flex;gap:var(--lk-s-3);flex-wrap:wrap;margin-top:var(--lk-s-4)}
.kk-yearsum{display:flex;gap:8px;flex-wrap:wrap;min-height:30px}
.kk-yearsum span:not(.kk-meta){padding:4px 10px;border-radius:var(--lk-r-full);background:var(--lk-surface-2);font-size:var(--lk-t-sm)}

/* ---------- foto-import ---------- */
.kk-drop{display:flex;gap:var(--lk-s-4);align-items:flex-start;padding:var(--lk-s-5);border:2px dashed var(--lk-border);border-radius:var(--lk-r-lg);background:var(--lk-surface);transition:border-color var(--lk-t-fast),background var(--lk-t-fast)}
.kk-drop > i{font-size:2rem;color:var(--lk-accent)}
.kk-drop p{margin:4px 0 var(--lk-s-3);font-size:var(--lk-t-sm);color:var(--lk-ink-2)}
.kk-drop.is-over{border-color:var(--lk-accent);background:var(--lk-accent-soft)}
.kk-drop__btns{display:flex;gap:var(--lk-s-3);flex-wrap:wrap}
.kk-drop__btns label{cursor:pointer}
.kk-mapcol{width:340px;display:flex;gap:8px}
.kk-mapcol .lk-select,.kk-mapcol .lk-input{flex:1;min-width:0;padding-top:7px;padding-bottom:7px}
.kk-maprow{cursor:default}
.kk-importbar{display:flex;align-items:center;gap:var(--lk-s-3);flex-wrap:wrap;margin-bottom:var(--lk-s-3);font-size:var(--lk-t-sm)}
.kk-progress{display:flex;align-items:center;gap:var(--lk-s-3);margin-bottom:var(--lk-s-3);font-family:var(--lk-font-mono);font-size:var(--lk-t-xs)}
.kk-progress .kk-bar{max-width:none}
.kk-tablewrap{overflow-x:auto;border:1px solid var(--lk-border);border-radius:var(--lk-r-lg);background:var(--lk-surface)}
.kk-table{width:100%;border-collapse:collapse;font-size:var(--lk-t-sm)}
.kk-table th{position:sticky;top:0;background:var(--lk-surface-2);text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lk-muted);padding:10px 12px;border-bottom:1px solid var(--lk-border);z-index:1}
.kk-table td{padding:6px 12px;border-bottom:1px solid var(--lk-border);vertical-align:middle}
.kk-table tr:last-child td{border-bottom:0}
.kk-table td .lk-input{padding:6px 10px;min-width:130px}
.kk-table input[type=checkbox]{accent-color:var(--lk-accent);width:16px;height:16px}
.kk-table tr.is-doubt td{background:color-mix(in oklab,var(--lk-warn-soft) 70%,transparent)}
.kk-table tr.is-doubt td .lk-input{border-color:var(--lk-warn)}
.kk-table tr.is-dup td,.kk-table tr.is-done td{opacity:.6}
.kk-table tr.is-error td{background:color-mix(in oklab,var(--lk-error-soft) 70%,transparent)}
.kk-importthumb{width:44px;height:55px;object-fit:cover;border-radius:var(--lk-r-sm);display:block;background:var(--lk-surface-2)}

@media (max-width:900px){
  .kk-split,.kk-split--even{grid-template-columns:1fr}
  .kk-mapcol{width:auto;flex:1 1 220px}
  .kk-maprow{flex-wrap:wrap}
}

/* ---------- groepen ---------- */
.kk-state{align-self:center}
.kk-stepper{display:inline-flex;align-items:center;gap:4px;background:var(--lk-surface-2);border:1px solid var(--lk-border);border-radius:var(--lk-r-md);padding:3px}
.kk-stepper button{width:38px;height:38px;border:0;border-radius:8px;background:var(--lk-surface);color:var(--lk-ink);cursor:pointer;display:grid;place-items:center;box-shadow:var(--lk-sh-1)}
.kk-stepper button:disabled{opacity:.35;cursor:default}
.kk-stepper output{min-width:34px;text-align:center;font-weight:800;font-size:var(--lk-t-md)}
.kk-stepper__label{font-size:var(--lk-t-sm);color:var(--lk-ink-2);padding:0 8px 0 2px}
.kk-saved{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 4px var(--lk-s-4)}
.kk-saved__label{font-size:var(--lk-t-sm);font-weight:700;color:var(--lk-ink-2)}
.kk-saved__item{display:inline-flex;align-items:center;gap:4px}
.kk-saved .lk-chip{text-transform:none}
.kk-rulenote{margin-bottom:var(--lk-s-4)}
.kk-groups{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--lk-s-4);align-items:start}
.kk-group{background:var(--lk-surface);border:1px solid var(--lk-border);border-top:4px solid var(--kk-gc);border-radius:var(--lk-r-lg);box-shadow:var(--lk-sh-2);overflow:hidden;animation:kk-in .35s both;transition:box-shadow var(--lk-t-fast),outline-color var(--lk-t-fast);outline:2px dashed transparent;outline-offset:2px}
.kk-group.is-drop{outline-color:var(--kk-gc)}
.kk-group__head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--lk-border)}
.kk-group__head h3{margin:0;font-size:var(--lk-t-md);font-weight:800;flex:1}
.kk-group__dot{width:12px;height:12px;border-radius:50%;background:var(--kk-gc);flex-shrink:0}
.kk-group__list{list-style:none;margin:0;padding:6px;display:flex;flex-direction:column;gap:2px;min-height:52px}
.kk-member{display:flex;align-items:center;gap:10px;padding:5px 6px;border-radius:var(--lk-r-md);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;transition:background var(--lk-t-fast)}
.kk-member:hover{background:var(--lk-hover)}
.kk-member.is-drop{background:var(--lk-accent-soft);box-shadow:inset 0 0 0 2px var(--lk-accent)}
.kk-member.is-dragging{opacity:.35}
.kk-member.is-absent{opacity:.55}
.kk-member.is-absent .kk-member__photo{filter:grayscale(1)}
.kk-member__photo{width:34px;height:42px;border-radius:6px;overflow:hidden;background:var(--lk-surface-2);display:grid;place-items:center;color:var(--lk-muted);flex-shrink:0}
.kk-member__photo img{width:100%;height:100%;object-fit:cover;display:block}
.kk-member__name{font-weight:700;font-size:var(--lk-t-sm);line-height:1.25}
/* gender: knoppen in de groepenbalk + symbool naast de naam (nooit in projectie of op papier) */
.kk-genderseg button{display:inline-flex;align-items:center;gap:1px;font-size:1rem}
.kk-genderseg__lock{font-size:.7rem;margin-left:3px}
.kk-gsym{margin-left:5px;font-size:.85em;vertical-align:-1px}
.kk-gsym--m{color:var(--lk-info)}
.kk-gsym--v{color:var(--lk-error)}
body.kk-projecting .kk-gsym,body.kk-projecting .kk-genderseg{display:none}
.kk-ghost{position:fixed;top:0;left:0;z-index:200;pointer-events:none;background:var(--lk-surface);box-shadow:var(--lk-sh-4);opacity:.95;list-style:none}
body.kk-dragging,body.kk-dragging *{cursor:grabbing!important}

/* ---------- klasdashboard ---------- */
.kk-sync{display:inline-flex;align-items:center;gap:6px;font-size:var(--lk-t-xs);font-weight:700;padding:5px 10px;border-radius:var(--lk-r-full);background:var(--lk-ok-soft);color:var(--lk-ok)}
.kk-sync.is-pending{background:var(--lk-warn-soft);color:var(--lk-warn)}
.kk-sync.is-offline{background:var(--lk-error-soft);color:var(--lk-error)}
.kk-obs-les-actions{display:flex;gap:var(--lk-s-3);align-items:center}
.kk-selectbar{position:sticky;top:84px;z-index:20;display:flex;align-items:center;gap:var(--lk-s-3);flex-wrap:wrap;padding:10px 14px;margin-bottom:var(--lk-s-4);background:var(--lk-accent-soft);border:1px solid var(--lk-accent);border-radius:var(--lk-r-lg);font-weight:700;box-shadow:var(--lk-sh-2)}
.kk-selectbar .kk-thumb{flex:0 0 72px}
.kk-obsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--lk-s-4);padding-bottom:180px}
.kk-obs{position:relative;background:var(--lk-surface);border:2px solid var(--lk-border);border-radius:var(--lk-r-lg);box-shadow:var(--lk-sh-1);overflow:hidden;display:flex;flex-direction:column;transition:border-color var(--lk-t-fast),box-shadow var(--lk-t-fast)}
.kk-obs.is-open{border-style:dashed;border-color:var(--lk-accent)}
.kk-obs.is-selected{border-style:solid;border-color:var(--lk-accent);box-shadow:0 0 0 3px var(--lk-accent-soft),var(--lk-sh-2)}
.kk-obs.is-absent{opacity:.5}
.kk-obs.is-absent .kk-obs__photo{filter:grayscale(1)}
.kk-obs__photo{position:relative;aspect-ratio:4/5;background:var(--lk-surface-2);display:grid;place-items:center;color:var(--lk-muted);font-size:2rem;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.kk-obs__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
.kk-obs__counts{position:absolute;top:6px;right:6px;display:flex;gap:4px}
.kk-obs__counts span{min-width:24px;height:24px;padding:0 6px;border-radius:var(--lk-r-full);display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;box-shadow:var(--lk-sh-1)}
.kk-obs__counts .is-up{background:var(--lk-ok)}
.kk-obs__counts .is-down{background:var(--lk-error)}
/* opvallend uitroepteken linksboven = er zijn opmerkingen */
.kk-obs__notes{position:absolute;top:6px;left:6px;z-index:2;width:32px;height:32px;border-radius:50%;border:2px solid #fff;background:var(--lk-warn);color:#fff;font-size:1.2rem;font-weight:900;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35);animation:kk-pop .35s ease-out;transition:transform var(--lk-t-fast)}
.kk-obs__notes:hover{transform:scale(1.12)}
.kk-obs__notes i{-webkit-text-stroke:.6px currentColor}
@keyframes kk-pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.kk-obs__check{position:absolute;bottom:6px;left:6px;font-size:1.4rem;color:var(--lk-accent);background:var(--lk-surface);border-radius:50%;line-height:1;display:grid}
.kk-obs__name{border:0;background:none;font:inherit;font-weight:800;font-size:var(--lk-t-sm);color:var(--lk-ink);padding:8px 8px 4px;cursor:pointer;text-align:center;line-height:1.2}
.kk-obs__name:hover{color:var(--lk-accent-deep);text-decoration:underline}
.kk-obs__btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px 8px 8px}
.kk-thumb{width:100%;min-height:48px;border:1px solid transparent;border-radius:var(--lk-r-md);font-size:1.25rem;cursor:pointer;display:grid;place-items:center;transition:transform .08s,background var(--lk-t-fast),color var(--lk-t-fast)}
.kk-thumb:active{transform:scale(.94)}
.kk-thumb:disabled{opacity:.35;cursor:default}
.kk-thumb--up{background:var(--lk-ok-soft);color:var(--lk-ok);border-color:color-mix(in oklab,var(--lk-ok) 35%,transparent)}
.kk-thumb--down{background:var(--lk-error-soft);color:var(--lk-error);border-color:color-mix(in oklab,var(--lk-error) 35%,transparent)}
.kk-thumb--up:hover:not(:disabled){background:var(--lk-ok);color:#fff}
.kk-thumb--down:hover:not(:disabled){background:var(--lk-error);color:#fff}
@keyframes kk-flash-up{0%{background:var(--lk-ok);color:#fff}100%{background:var(--lk-ok-soft);color:var(--lk-ok)}}
@keyframes kk-flash-down{0%{background:var(--lk-error);color:#fff}100%{background:var(--lk-error-soft);color:var(--lk-error)}}
.kk-thumb--up.is-flash{animation:kk-flash-up .9s ease-out}
.kk-thumb--down.is-flash{animation:kk-flash-down .9s ease-out}

/* redenbalk — onderaan, niet modaal */
.kk-sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,110%);width:min(920px,calc(100vw - 24px));z-index:90;background:var(--lk-surface);border:1px solid var(--lk-border);border-bottom:0;border-radius:var(--lk-r-xl) var(--lk-r-xl) 0 0;box-shadow:var(--lk-sh-4);padding:14px 16px 18px;transition:transform var(--lk-t)}
.kk-sheet.is-open{transform:translate(-50%,0)}
.kk-sheet__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.kk-sheet__close{margin-left:auto}
.kk-sheet__pol{font-weight:900}
.kk-sheet__pol--up{color:var(--lk-ok)}
.kk-sheet__pol--down{color:var(--lk-error)}
.kk-sheet__body{display:flex;gap:var(--lk-s-4);align-items:stretch;flex-wrap:wrap}
.kk-sheet__reasons{flex:1 1 420px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kk-sheet__side{display:flex;flex-direction:column;gap:8px;justify-content:center}
.kk-reason{min-height:48px;border:1px solid var(--lk-border);border-radius:var(--lk-r-md);background:var(--lk-surface-2);color:var(--lk-ink);font:inherit;font-weight:700;font-size:var(--lk-t-sm);cursor:pointer;padding:6px 10px}
.kk-reason:hover{border-color:var(--lk-accent)}
.kk-reason.is-active{background:var(--lk-ink);color:var(--lk-bg);border-color:var(--lk-ink)}
.kk-sheet__note{display:flex;gap:8px;margin-top:10px}
.kk-sheet__note .lk-input{flex:1}
.kk-toast{z-index:95}

/* overzicht + tijdlijn */
.kk-ovbar{display:flex;align-items:center;gap:var(--lk-s-3);flex-wrap:wrap;margin-bottom:var(--lk-s-4)}
.kk-ovbar__custom{display:inline-flex;align-items:center;gap:6px}
.kk-ovbar__custom .lk-input{width:auto;padding:7px 10px}
.kk-ovtable td,.kk-ovtable th{white-space:nowrap}
.kk-ovtable td:nth-child(4){white-space:normal}
.kk-ovtable .is-up,.kk-tl-total .is-up,.kk-tl-week .is-up{color:var(--lk-ok);font-weight:800}
.kk-ovtable .is-down,.kk-tl-total .is-down,.kk-tl-week .is-down{color:var(--lk-error);font-weight:800}
/* ±1 bij hover op een getal (op touch altijd zichtbaar) */
.kk-count{display:inline-flex;align-items:center;gap:4px}
.kk-count b{min-width:1.4em;text-align:center}
.kk-count.is-zero b{opacity:.3;font-weight:600}
.kk-count__btn{width:24px;height:24px;border-radius:50%;border:1px solid currentColor;background:var(--lk-surface);color:inherit;font:inherit;font-weight:800;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0;opacity:0;transition:opacity var(--lk-t-fast),background var(--lk-t-fast)}
.kk-count__btn:hover:not(:disabled){background:var(--lk-hover)}
.kk-count__btn:disabled{visibility:hidden}
.kk-ovtable tr:hover .kk-count__btn,.kk-count__btn:focus-visible{opacity:1}
/* reden weghalen bij hover */
.kk-reasonpill{position:relative;overflow:visible;gap:4px}
.kk-reasonpill__x{border:0;background:none;color:inherit;font:inherit;font-weight:900;cursor:pointer;padding:0 0 0 2px;line-height:1;width:0;overflow:hidden;opacity:0;transition:opacity var(--lk-t-fast),width var(--lk-t-fast)}
.kk-reasonpill:hover .kk-reasonpill__x,.kk-reasonpill__x:focus-visible{width:14px;opacity:1}
@media (hover:none){.kk-count__btn{opacity:1}.kk-reasonpill__x{width:14px;opacity:1}}
.kk-btn-danger{color:var(--lk-error)}
.kk-btn-danger:hover{background:var(--lk-error-soft);color:var(--lk-error)}
.kk-pill--up{background:var(--lk-ok-soft);color:var(--lk-ok)}
.kk-pill--down{background:var(--lk-error-soft);color:var(--lk-error)}
.kk-linkbtn{border:0;background:none;font:inherit;font-weight:700;color:var(--lk-ink);cursor:pointer;padding:0}
.kk-linkbtn:hover{color:var(--lk-accent-deep);text-decoration:underline}
.kk-tl-filters{display:flex;gap:6px;flex-wrap:wrap}
.kk-tl-filters .lk-chip{text-transform:none}
.kk-tl-total{display:flex;gap:14px;align-items:baseline;font-size:var(--lk-t-md)}
.kk-tl-week header{display:flex;gap:10px;align-items:baseline;padding-bottom:6px;border-bottom:1px solid var(--lk-border);margin-bottom:6px}
.kk-tl-week header b{flex:1}
.kk-tl-week ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.kk-tl-item{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:start;font-size:var(--lk-t-sm)}
.kk-tl-icon{font-weight:900}
.kk-tl-item--up .kk-tl-icon{color:var(--lk-ok)}
.kk-tl-item--down .kk-tl-icon{color:var(--lk-error)}
.kk-tl-text em{display:block;font-style:normal;color:var(--lk-ink-2);font-size:var(--lk-t-xs);margin-top:2px}

@media (max-width:560px){
  .kk-obsgrid{grid-template-columns:repeat(2,1fr);gap:var(--lk-s-3)}
  .kk-sheet__reasons{grid-template-columns:repeat(2,1fr);flex-basis:100%}
  .kk-sheet__side{flex-direction:row}
}

/* ---------- namen leren ---------- */
.kk-learn-progress{display:flex;align-items:center;gap:12px;font-size:var(--lk-t-sm);color:var(--lk-ink-2);min-width:240px}
.kk-learn-progress b{color:var(--lk-ink)}
.kk-learn-progress .kk-bar{min-width:120px}
.kk-learn-progress .kk-bar i{background:var(--lk-ok)}
.kk-learn{display:flex;flex-direction:column;align-items:center;gap:var(--lk-s-4);padding:var(--lk-s-2) 0 var(--lk-s-5)}
.kk-learn-meta{text-align:center}
.kk-learn-known{color:var(--lk-ok);font-weight:700}
/* breedte schaalt mee met de schermhoogte, zodat kaart + knoppen altijd samen in beeld passen */
.kk-learn-card{width:min(100%,clamp(200px,calc((100vh - 400px) * .8),340px));background:var(--lk-surface);border:1px solid var(--lk-border);border-radius:var(--lk-r-xl);box-shadow:var(--lk-sh-3);overflow:hidden;cursor:pointer;animation:kk-in .3s both;transition:border-color var(--lk-t),box-shadow var(--lk-t)}
.kk-learn-card.is-revealed{cursor:default;border-color:var(--lk-accent);box-shadow:0 0 0 3px var(--lk-accent-soft),var(--lk-sh-3)}
.kk-learn-card__photo{aspect-ratio:4/5;background:var(--lk-surface-2)}
.kk-learn-card__photo img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.kk-learn-card__name{min-height:84px;display:grid;place-items:center;padding:14px 16px;text-align:center}
.kk-learn-card__name .kk-name__mask{width:70%;height:18px}
.kk-learn-card__text{font-size:var(--lk-t-2xl);font-weight:800;line-height:1.15;letter-spacing:-.01em;animation:kk-in .25s both}
.kk-learn-card__text span{display:block;font-size:var(--lk-t-lg);font-weight:600;color:var(--lk-ink-2)}
.kk-learn-actions{display:flex;gap:var(--lk-s-3);flex-wrap:wrap;justify-content:center}
.kk-learn-no{background:var(--lk-error-soft);color:var(--lk-error);border-color:color-mix(in oklab,var(--lk-error) 40%,transparent)}
.kk-learn-no:hover{background:var(--lk-error);color:#fff}
.kk-learn-yes{background:var(--lk-ok-soft);color:var(--lk-ok);border-color:color-mix(in oklab,var(--lk-ok) 40%,transparent)}
.kk-learn-yes:hover{background:var(--lk-ok);color:#fff}
.kk-learn-actions .lk-btn:hover kbd{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.4)}
.kk-learn-done{text-align:center;padding:var(--lk-s-6) var(--lk-s-4);max-width:460px}
.kk-learn-done > i{font-size:3rem;color:var(--lk-accent)}
.kk-learn-done h2{margin:var(--lk-s-3) 0 var(--lk-s-2)}
.kk-learn-done p{color:var(--lk-ink-2);margin:0 0 var(--lk-s-5)}

/* ---------- afdrukken: opties + A4-voorbeeld ---------- */
.kk-printopts{display:flex;flex-direction:column;gap:var(--lk-s-3);padding:12px 14px;margin-bottom:var(--lk-s-4);background:var(--lk-surface);border:1px solid var(--lk-border);border-radius:var(--lk-r-lg)}
.kk-printopts__row{display:flex;align-items:center;gap:var(--lk-s-3);flex-wrap:wrap}
.kk-printopts__title{width:220px;padding:7px 10px}
.kk-printopts__headers{display:flex;gap:6px;flex-wrap:wrap;flex-basis:100%}
.kk-printopts__headers .lk-input{width:110px;padding:6px 9px;font-size:var(--lk-t-sm)}
.kk-preview{overflow:auto;padding:var(--lk-s-4);background:var(--lk-surface-2);border:1px solid var(--lk-border);border-radius:var(--lk-r-lg)}
.kk-preview .kk-empty{margin:0}
/* A4 op ware grootte, verkleind weergegeven */
.kk-preview-scale{zoom:.72;width:max-content;margin:0 auto}
@media (max-width:900px){.kk-preview-scale{zoom:.45}}

/* het papier zelf (voorbeeld én afdruk): altijd zwart op wit */
.kk-paper{width:210mm;min-height:297mm;padding:10mm;background:#fff;color:#111;box-shadow:0 4px 18px rgba(0,0,0,.18);font-family:var(--lk-font);box-sizing:border-box}
.kk-paper__head{display:flex;justify-content:space-between;align-items:baseline;gap:6mm;border-bottom:.6mm solid #111;padding-bottom:2.5mm;margin-bottom:5mm}
.kk-paper__head h1{font-size:18pt;margin:0;font-weight:800}
.kk-paper__head span{font-size:9.5pt;color:#444}
.kk-smoel{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:4mm 3mm}
.kk-smoel figure{margin:0;text-align:center;break-inside:avoid}
.kk-smoel__photo{width:82%;margin:0 auto;aspect-ratio:4/5;background:#eee;border-radius:1.5mm;overflow:hidden}
.kk-smoel__photo img{width:100%;height:100%;object-fit:cover;display:block}
.kk-smoel figcaption{font-size:9pt;line-height:1.2;margin-top:1.2mm}
.kk-smoel figcaption b{display:block;font-size:10pt}
.kk-classlist{width:100%;border-collapse:collapse;font-size:10.5pt}
.kk-classlist th,.kk-classlist td{border:.25mm solid #333;padding:1.6mm 2mm;height:7.5mm;text-align:left;vertical-align:middle}
.kk-classlist th{background:#eee;font-size:8.5pt;font-weight:700}
.kk-classlist .nr{width:9mm;text-align:right;color:#444}
.kk-classlist .klas{width:16mm}
.kk-classlist .box{width:12mm;text-align:center;padding:1mm}
.kk-classlist th.box{height:auto;vertical-align:bottom}
.kk-classlist th.box span{display:block;font-size:7.5pt;line-height:1.1;word-break:break-word}
/* opmerkingen: neemt alle resterende breedte (naam krimpt tot zijn inhoud) */
.kk-classlist th.opm,.kk-classlist td.opm{width:auto;min-width:45mm}
.kk-classlist:has(.opm) .naam{width:1%;white-space:nowrap}
.kk-classlist tr{break-inside:avoid}

@media print{
  .kk-paper{width:auto;min-height:0;padding:0;box-shadow:none;break-after:page;page-break-after:always}
  .kk-paper:last-child{break-after:auto;page-break-after:auto}
  .kk-paper *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- dialoogvenster (native <dialog>) ---------- */
.kk-dialog{border:1px solid var(--lk-border);border-radius:var(--lk-r-lg);background:var(--lk-surface);color:var(--lk-ink);box-shadow:var(--lk-sh-4);padding:var(--lk-s-5);width:min(440px,calc(100vw - 32px))}
.kk-dialog::backdrop{background:rgba(28,22,12,.45);backdrop-filter:blur(2px)}
.kk-dialog h3{margin:0 0 var(--lk-s-4)}
.kk-dialog__check{font-size:var(--lk-t-sm)}
.kk-notes{width:min(520px,calc(100vw - 32px))}
.kk-notes__head{display:flex;align-items:center;justify-content:space-between;gap:var(--lk-s-3);margin-bottom:var(--lk-s-3)}
.kk-notes__head h3{margin:0}
.kk-notes__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto}
.kk-note{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--lk-border);border-radius:var(--lk-r-md);background:var(--lk-surface-2)}
.kk-note p{margin:0 0 4px;font-size:var(--lk-t-sm);white-space:pre-wrap}
.kk-note--up .kk-tl-icon{color:var(--lk-ok)}
.kk-note--down .kk-tl-icon{color:var(--lk-error)}
.kk-dialog__foot{display:flex;justify-content:flex-end;gap:var(--lk-s-2);flex-wrap:wrap;margin-top:var(--lk-s-5)}

/* ---------- afdrukken: enkel #printArea (zwart-wit) ---------- */
.kk-print{display:none}
@media print{
  body > *:not(#printArea){display:none!important}
  body{background:#fff!important;color:#000!important}
  .kk-print{display:block!important;font-family:var(--lk-font);color:#000}
  .kk-print-groups header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #000;padding-bottom:4mm;margin-bottom:6mm}
  .kk-print-groups h1{font-size:18pt;margin:0}
  .kk-print-groups header span{font-size:11pt}
  .kk-print-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6mm}
  .kk-print-grid section{border:1px solid #000;border-radius:3mm;padding:3mm 4mm;break-inside:avoid}
  .kk-print-grid h2{font-size:13pt;margin:0 0 2mm}
  .kk-print-grid ol{margin:0;padding-left:6mm;font-size:12pt;line-height:1.5}
  .kk-print-overview header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #000;padding-bottom:3mm;margin-bottom:5mm}
  .kk-print-overview h1{font-size:16pt;margin:0}
  .kk-print-overview table{width:100%;border-collapse:collapse;font-size:10pt}
  .kk-print-overview th,.kk-print-overview td{border:1px solid #000;padding:1.5mm 2mm;text-align:left;vertical-align:top}
  .kk-print-overview tr{break-inside:avoid}
}

/* ---------- scheiding in de bedieningsbalk ("Kies afwezigen" | aantal + Trek) ---------- */
.kk-divider{width:1px;align-self:stretch;background:var(--lk-border);margin:4px 2px}

/* ---------- projectiemodus ----------
   Menu's, titel en klaschips weg; bedieningsbalk, beurtrol en sneltoetsen blijven.
   Altijd donker, ongeacht het gekozen thema: de donkere tokens uit main.css hier herhaald. */
body.kk-projecting{
  --lk-bg:#14100A;--lk-surface:#2A2520;--lk-surface-2:#332C25;--lk-border:#3A332B;--lk-hover:#332C25;
  --lk-ink:#F4EFE6;--lk-ink-2:#D6CDB8;--lk-muted:#9E8F77;
  --lk-accent:#C9A263;--lk-accent-deep:#E0BE7E;--lk-accent-soft:#3A2E1A;
  --lk-ok:#7CC08F;--lk-ok-soft:#22342A;--lk-warn:#E2AE62;--lk-warn-soft:#3D2F18;
  --lk-error:#EC8A74;--lk-error-soft:#42251F;--lk-info:#74B4D4;--lk-info-soft:#1D323D;
  background:var(--lk-bg);color:var(--lk-ink)
}
body.kk-projecting .lk-nav,body.kk-projecting .lk-sidebar,body.kk-projecting .lk-toolbar,body.kk-projecting .kk-classes{display:none}
body.kk-projecting .lk-admin{grid-template-columns:1fr;min-height:100vh}
body.kk-projecting .lk-main{padding:var(--lk-s-5) var(--lk-s-6) var(--lk-s-6)}
body.kk-projecting .kk-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--lk-s-5)}
body.kk-projecting .kk-grid.is-single{grid-template-columns:minmax(300px,420px)}
body.kk-projecting .kk-name__text{font-size:var(--lk-t-2xl)}
/* groepen op het bord: groter, en paarregel-melding en bewaarde lijst nooit projecteren */
body.kk-projecting .kk-saved,body.kk-projecting #grpNotice{display:none}
body.kk-projecting .kk-groups{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--lk-s-5)}
body.kk-projecting .kk-group__head h3{font-size:var(--lk-t-xl)}
body.kk-projecting .kk-member__photo{width:48px;height:60px}
body.kk-projecting .kk-member__name{font-size:var(--lk-t-lg)}

@media (max-width:560px){
  .lk-main{padding:var(--lk-s-4)}
  .kk-grid{grid-template-columns:repeat(2,1fr);gap:var(--lk-s-3)}
  .kk-controls .kk-spacer{display:none}
}