/* =====================================================================
   LABKLAS DESIGN SYSTEM — v3.0
   Bron: design/labklas.css (gedeelde stylesheet — enige bron van waarheid)
   ===================================================================== */

:root{
  /* --- Core palette (light theme defaults) --- */
  --lk-bg:          #F8F5F0;  /* page background - warm off-white */
  --lk-surface:     #FFFFFF;  /* cards, modals */
  --lk-surface-2:   #EDEAE3;  /* sunken panels, chips, sidebars */
  --lk-border:      #E0DCD2;  /* hairlines */
  --lk-hover:       #E4E0D7;  /* hover states */
  --lk-ink:         #1C160C;  /* primary text - dark brown */
  --lk-ink-2:       #4B4234;  /* secondary text */
  --lk-muted:       #8A7D68;  /* meta, captions */
  --lk-accent:      #A18249;  /* Labklas gold - brand */
  --lk-accent-deep: #7A5E2E;  /* hover / pressed gold */
  --lk-accent-soft: #EFE3CB;  /* accent tint backgrounds */

  /* Functional accents (used sparingly for status + pedagogy tags) */
  --lk-ok:          #4F8A5B;  /* success / correct */
  --lk-ok-soft:     #DCEADF;
  --lk-warn:        #C68A2E;  /* attention */
  --lk-warn-soft:   #F5E7CE;
  --lk-error:       #B6412A;  /* error / wrong */
  --lk-error-soft:  #F5DAD2;
  --lk-info:        #2E6E8E;  /* info */
  --lk-info-soft:   #D5E5ED;
  --lk-support:     #00B9FE;  /* Ko-fi blue (preserved) */

  /* Subject/year tags — calm, consistent chroma */
  --lk-year1:       #2E6E8E;  /* 1ste jaar - blue */
  --lk-year1-soft:  #D5E5ED;
  --lk-year2:       #4F8A5B;  /* 2de jaar - green */
  --lk-year2-soft:  #DCEADF;
  --lk-physics:     #8E4A2E;
  --lk-bio:         #4F8A5B;
  --lk-chem:        #6E4B8A;
  --lk-tech:        #2E6E8E;

  /* --- Type --- */
  --lk-font:        "Plus Jakarta Sans","Noto Sans",system-ui,-apple-system,sans-serif;
  --lk-font-mono:   "JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --lk-font-serif:  "Lora",Georgia,"Times New Roman",serif;  /* uitsluitend voor quotes */

  /* Type scale (rem) */
  --lk-t-xs:   0.75rem;  /* 12 */
  --lk-t-sm:   0.875rem; /* 14 */
  --lk-t-base: 1rem;     /* 16 */
  --lk-t-md:   1.125rem; /* 18 */
  --lk-t-lg:   1.25rem;  /* 20 */
  --lk-t-xl:   1.5rem;   /* 24 */
  --lk-t-2xl:  2rem;     /* 32 */
  --lk-t-3xl:  2.5rem;   /* 40 */
  --lk-t-4xl:  3rem;     /* 48 */
  --lk-t-5xl:  4rem;     /* 64 */

  /* Spacing */
  --lk-s-1: 0.25rem;
  --lk-s-2: 0.5rem;
  --lk-s-3: 0.75rem;
  --lk-s-4: 1rem;
  --lk-s-5: 1.5rem;
  --lk-s-6: 2rem;
  --lk-s-7: 3rem;
  --lk-s-8: 4rem;
  --lk-s-9: 6rem;

  /* Radii */
  --lk-r-sm: 6px;
  --lk-r-md: 10px;
  --lk-r-lg: 14px;
  --lk-r-xl: 20px;
  --lk-r-2xl: 28px;
  --lk-r-full: 999px;

  /* Shadows - soft, warm */
  --lk-sh-1: 0 1px 2px rgba(28,22,12,.06);
  --lk-sh-2: 0 2px 8px rgba(28,22,12,.06), 0 1px 2px rgba(28,22,12,.04);
  --lk-sh-3: 0 8px 24px rgba(28,22,12,.08), 0 2px 6px rgba(28,22,12,.05);
  --lk-sh-4: 0 20px 48px rgba(28,22,12,.12), 0 4px 12px rgba(28,22,12,.06);
  --lk-sh-ring: 0 0 0 3px rgba(161,130,73,.18);

  /* Motion */
  --lk-t-fast: .12s ease;
  --lk-t: .22s cubic-bezier(.2,.7,.2,1);
  --lk-t-slow: .4s cubic-bezier(.2,.7,.2,1);
}

/* Dark theme override */
html:not(.light-theme){
  --lk-bg:          #1C160C;
  --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;
  /* status: helderder tekst/rand + donkere tint als achtergrond (anders lichte -soft achter lichte tekst) */
  --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;
  --lk-sh-2: 0 2px 8px rgba(0,0,0,.3);
  --lk-sh-3: 0 8px 24px rgba(0,0,0,.4);
  --lk-sh-4: 0 20px 48px rgba(0,0,0,.5);
}

/* =====================================================================
   BASE
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--lk-font);
  background:var(--lk-bg);
  color:var(--lk-ink);
  font-size:var(--lk-t-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color var(--lk-t), color var(--lk-t);
}
img{max-width:100%;display:block}
a{color:var(--lk-accent-deep);text-decoration:none;transition:color var(--lk-t-fast)}
a:hover{color:var(--lk-ink)}
hr{border:0;border-top:1px solid var(--lk-border);margin:var(--lk-s-6) 0}

/* Typography utilities */
.lk-h1,h1{font-size:var(--lk-t-4xl);font-weight:900;letter-spacing:-.025em;line-height:1.05;margin:0 0 var(--lk-s-4)}
.lk-h2,h2{font-size:var(--lk-t-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:0 0 var(--lk-s-3)}
.lk-h3,h3{font-size:var(--lk-t-xl);font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:0 0 var(--lk-s-3)}
.lk-h4,h4{font-size:var(--lk-t-lg);font-weight:700;line-height:1.3;margin:0 0 var(--lk-s-2)}
.lk-eyebrow{font-size:var(--lk-t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--lk-accent-deep)}
.lk-lead{font-size:var(--lk-t-md);color:var(--lk-ink-2);max-width:62ch;line-height:1.55}
.lk-mono{font-family:var(--lk-font-mono);font-size:var(--lk-t-sm)}
.lk-muted{color:var(--lk-muted)}

/* Quote — warme serif (Lora), enkel voor citaten */
.lk-quote{
  font-family:var(--lk-font-serif);font-style:italic;font-weight:500;
  font-size:var(--lk-t-md);line-height:1.5;letter-spacing:-.005em;
  color:var(--lk-ink);max-width:60ch;margin:0;
}
.lk-quote::before{
  content:"\201C";font-family:var(--lk-font-serif);font-style:normal;font-weight:600;
  font-size:3.4em;line-height:.85;color:var(--lk-accent);display:block;margin-bottom:-.28em;
}
.lk-quote__cite{
  display:block;margin-top:var(--lk-s-4);
  font-family:var(--lk-font);font-style:normal;font-weight:600;
  font-size:var(--lk-t-sm);color:var(--lk-muted);letter-spacing:0;
}

/* =====================================================================
   LAYOUT
   ===================================================================== */
.lk-shell{max-width:1240px;margin:0 auto;padding:0 var(--lk-s-5)}
.lk-section{padding:var(--lk-s-8) 0}
.lk-section--tight{padding:var(--lk-s-6) 0}
.lk-grid{display:grid;gap:var(--lk-s-5)}
.lk-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.lk-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.lk-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.lk-grid.cols-6{grid-template-columns:repeat(6,1fr)}
@media (max-width:900px){
  .lk-grid.cols-3,.lk-grid.cols-4,.lk-grid.cols-6{grid-template-columns:repeat(2,1fr)}
  .lk-grid.cols-2{grid-template-columns:1fr}
}
@media (max-width:560px){
  .lk-grid.cols-3,.lk-grid.cols-4,.lk-grid.cols-6{grid-template-columns:1fr}
}

/* =====================================================================
   NAVBAR (canonical pattern)
   ===================================================================== */
.lk-nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in oklab,var(--lk-bg) 86%, transparent);
  backdrop-filter:saturate(1.3) blur(10px);
  border-bottom:1px solid var(--lk-border);
}
.lk-nav__inner{
  max-width:1240px;margin:0 auto;padding:var(--lk-s-3) var(--lk-s-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--lk-s-4);
  height:72px;
}
.lk-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--lk-ink)}
.lk-brand__logo{height:46px;width:auto;display:block}
.lk-brand__name{font-weight:800;letter-spacing:-.015em;font-size:var(--lk-t-lg)}
.lk-brand__name b{font-weight:900}
/* Theme-bewuste logo-varianten (slate op licht, wit op donker) */
.logo-light,.logo-dark{display:block}
.logo-dark{display:none}
html:not(.light-theme) .logo-light{display:none}
html:not(.light-theme) .logo-dark{display:block}
.lk-nav__actions{display:flex;align-items:center;gap:var(--lk-s-2)}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.lk-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--lk-s-2);
  padding:10px 16px;border-radius:var(--lk-r-full);
  font:inherit;font-weight:600;font-size:var(--lk-t-sm);
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--lk-t-fast), box-shadow var(--lk-t-fast), background var(--lk-t-fast), color var(--lk-t-fast), border-color var(--lk-t-fast);
  white-space:nowrap;text-decoration:none;line-height:1;
}
.lk-btn:focus-visible{outline:none;box-shadow:var(--lk-sh-ring)}
.lk-btn:active{transform:translateY(1px)}

.lk-btn--primary{background:var(--lk-accent);color:#fff}
.lk-btn--primary:hover{background:var(--lk-accent-deep);box-shadow:var(--lk-sh-2);color:#fff}

.lk-btn--secondary{background:var(--lk-surface-2);color:var(--lk-ink);border-color:var(--lk-border)}
.lk-btn--secondary:hover{background:var(--lk-hover)}

.lk-btn--ghost{background:transparent;color:var(--lk-ink)}
.lk-btn--ghost:hover{background:var(--lk-hover)}

.lk-btn--outline{background:transparent;color:var(--lk-accent-deep);border-color:var(--lk-accent)}
.lk-btn--outline:hover{background:var(--lk-accent-soft)}

.lk-btn--support{background:var(--lk-support);color:#fff}
.lk-btn--support:hover{background:#0095d1;color:#fff}

.lk-btn--icon{width:40px;height:40px;padding:0;background:var(--lk-surface-2);color:var(--lk-ink);border:1px solid var(--lk-border)}
.lk-btn--icon:hover{background:var(--lk-hover)}

.lk-btn--lg{padding:14px 22px;font-size:var(--lk-t-base)}
.lk-btn--sm{padding:6px 12px;font-size:var(--lk-t-xs)}

/* =====================================================================
   TAGS / CHIPS / BADGES
   ===================================================================== */
.lk-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:var(--lk-r-full);
  font-size:var(--lk-t-xs);font-weight:600;
  background:transparent;color:var(--lk-ink-2);
  border:1px solid var(--lk-border);
  text-transform:lowercase;letter-spacing:.01em;
  transition:all var(--lk-t-fast);
}
.lk-tag.is-active.lk-tag--year1{background:var(--lk-year1-soft);color:var(--lk-year1);border-color:transparent}
.lk-tag.is-active.lk-tag--year2{background:var(--lk-year2-soft);color:var(--lk-year2);border-color:transparent}
.lk-tag.is-active.lk-tag--course{background:var(--lk-accent-soft);color:var(--lk-accent-deep);border-color:transparent}
.lk-tag.is-active.lk-tag--task{background:var(--lk-info-soft);color:var(--lk-info);border-color:transparent}
.lk-tag--system{background:var(--lk-surface-2);color:var(--lk-ink-2)}
.lk-tag.is-active.lk-tag--tool{background:var(--lk-warn-soft);color:var(--lk-warn);border-color:transparent}
.lk-tag.is-active.lk-tag--stof{background:var(--lk-ok-soft);color:var(--lk-ok);border-color:transparent}

/* Filter chip (like existing "alles tonen" with active state) */
.lk-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--lk-r-full);
  background:transparent;color:var(--lk-ink-2);
  border:1px solid var(--lk-border);
  font-size:var(--lk-t-xs);font-weight:600;
  text-transform:lowercase;cursor:pointer;
  transition:all var(--lk-t-fast);
  font-family:inherit;
}
.lk-chip:hover{background:var(--lk-surface-2);color:var(--lk-ink)}
.lk-chip[aria-pressed="true"],.lk-chip.is-active{
  background:var(--lk-accent);color:#fff;border-color:var(--lk-accent);
  box-shadow:var(--lk-sh-1);
}

/* Status badge — for access level dots / state */
.lk-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 8px;border-radius:var(--lk-r-sm);
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.lk-badge--public{background:var(--lk-ok-soft);color:var(--lk-ok)}
.lk-badge--teacher{background:var(--lk-info-soft);color:var(--lk-info)}
.lk-badge--admin{background:var(--lk-error-soft);color:var(--lk-error)}
.lk-badge--closed{background:var(--lk-surface-2);color:var(--lk-muted)}
.lk-badge--new{background:var(--lk-accent);color:#fff}
/* Icon-only variant — zelfde betekenis, enkel het icoon, geen tekst */
.lk-badge--icon{width:26px;height:26px;padding:0;border-radius:50%;justify-content:center}
.lk-badge--icon i{font-size:13px}

/* =====================================================================
   CARDS
   ===================================================================== */
.lk-card{
  background:var(--lk-surface);border:1px solid var(--lk-border);
  border-radius:var(--lk-r-lg);overflow:hidden;
  box-shadow:var(--lk-sh-2);
  transition:box-shadow var(--lk-t);
  display:flex;flex-direction:column;height:100%;
  color:inherit;text-decoration:none;
}
/* Canonical hover (Option 02) — media zoom + dim, arrow reveals in title. Card itself stays put. */
a.lk-card:hover,.lk-card.is-interactive:hover{
  box-shadow:var(--lk-sh-3);
}
a.lk-card:hover .lk-card__title .arrow,.lk-card.is-interactive:hover .lk-card__title .arrow{opacity:1;transform:translateX(0)}
.lk-card__media{
  aspect-ratio:16/10;background:var(--lk-surface-2);overflow:hidden;
  position:relative;
}
.lk-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--lk-t-slow)}
a.lk-card:hover .lk-card__media img,.lk-card.is-interactive:hover .lk-card__media img{transform:scale(1.06)}
.lk-card__body{padding:var(--lk-s-5);display:flex;flex-direction:column;gap:var(--lk-s-3);flex:1}
.lk-card__title{font-size:var(--lk-t-lg);font-weight:800;letter-spacing:-.01em;margin:0;display:flex;align-items:center;gap:8px;transition:color var(--lk-t)}
.lk-card__title .arrow{opacity:0;transform:translateX(-6px);transition:opacity var(--lk-t),transform var(--lk-t);color:var(--lk-accent-deep);font-size:.9em}
.lk-card__desc{color:var(--lk-ink-2);font-size:var(--lk-t-sm);margin:0;flex:1;transition:color var(--lk-t)}
.lk-card__tags{display:flex;flex-wrap:wrap;gap:6px}
.lk-card__media-placeholder{
  width:100%;height:100%;
  background:
    repeating-linear-gradient(135deg, var(--lk-surface-2) 0 12px, var(--lk-hover) 12px 24px);
  display:grid;place-items:center;
}
.lk-card__media-placeholder span{
  font-family:var(--lk-font-mono);font-size:var(--lk-t-xs);
  color:var(--lk-muted);
  background:var(--lk-surface);padding:4px 10px;border-radius:var(--lk-r-sm);border:1px solid var(--lk-border);
}

/* Access ribbon on card */
.lk-card--teacher{border-left:3px solid var(--lk-info)}
.lk-card--admin{border-left:3px solid var(--lk-error)}

/* "Uitgelicht" badge — overlay bovenop de kaartafbeelding */
.lk-card__media .lk-badge{position:absolute;top:10px;right:10px;z-index:1}

/* Compacte rij (tool-lijst) — zelfde hover-taal als de kaart */
.lk-row{
  display:flex;align-items:center;gap:var(--lk-s-4);
  padding:var(--lk-s-4) var(--lk-s-5);
  border-bottom:1px solid var(--lk-border);
  text-decoration:none;color:inherit;cursor:pointer;
  transition:background var(--lk-t);
}
.lk-row:last-child{border-bottom:0}
.lk-row:hover{background:var(--lk-accent-soft)}
.lk-row__title{font-weight:700;transition:color var(--lk-t)}
.lk-row:hover .lk-row__title{color:var(--lk-accent-deep)}
.lk-row__arrow{
  font-size:var(--lk-t-lg);color:var(--lk-accent-deep);
  opacity:0;transition:opacity var(--lk-t);
}
.lk-row:hover .lk-row__arrow{opacity:1}

/* Rij met documentpreview (bv. opdracht/werkstuk op de themapagina) — staande A4-miniatuur, tekst bovenaan */
.lk-row--doc{padding:var(--lk-s-4);align-items:flex-start}
.lk-row__thumb{
  width:112px;aspect-ratio:1 / 1.414;object-fit:cover;flex:none;
  border:1px solid var(--lk-border);border-radius:var(--lk-r-sm);box-shadow:var(--lk-sh-1);
  background:var(--lk-surface-2);transition:transform var(--lk-t);
}
.lk-row--doc:hover .lk-row__thumb{transform:scale(1.04)}
.lk-row--doc .lk-row__arrow{align-self:center}
@media (max-width:480px){.lk-row__thumb{width:80px}}

/* Themacover-preview — staand A4 (1 : 1,414): enkel de illustratie + download-knop */
.lk-cover{
  position:relative;width:100%;max-width:300px;margin:0 auto;
  aspect-ratio:1 / 1.414;
  border:1px solid var(--lk-border);border-radius:var(--lk-r-md);
  box-shadow:var(--lk-sh-2);overflow:hidden;
  background:repeating-linear-gradient(135deg,var(--lk-surface-2) 0 12px,var(--lk-hover) 12px 24px);
  display:grid;place-items:center;
}
.lk-cover__note{
  position:absolute;top:10px;left:10px;
  font-family:var(--lk-font-mono);font-size:10px;color:var(--lk-muted);
  background:var(--lk-surface);padding:2px 7px;border-radius:4px;border:1px solid var(--lk-border);
}
.lk-cover__btn{
  position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);
  box-shadow:var(--lk-sh-3);z-index:1;
}

/* =====================================================================
   HERO BANNER
   ===================================================================== */
.lk-hero{
  position:relative;overflow:hidden;
  border-radius:var(--lk-r-2xl);
  padding:var(--lk-s-6) var(--lk-s-7);
  min-height:220px;display:flex;align-items:flex-end;
  color:#fff;
  background:#231d14;          /* fallback achter de eigen afbeelding */
  isolation:isolate;
}
/* Stel de achtergrondafbeelding in via --hero-bg op het element:
   <div class="lk-hero" style="--hero-bg:url('/img/hero/labklas_hero.png')">
   Zonder --hero-bg toont het gestreepte plaatshouder-patroon hieronder. */
.lk-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:
    var(--hero-bg, none),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, transparent 14px 28px),
    linear-gradient(180deg,#3a332b,#231d14);
  background-size: cover, auto, auto;
  background-position: center, center, center;
}
/* leesbaarheids-scrim zodat witte tekst leesbaar blijft op de foto */
.lk-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 50%, transparent 90%);
}
/* modifier: geen leesbaarheids-scrim, voor foto's die al voldoende contrast hebben */
.lk-hero--no-scrim::after{background:none}
.lk-hero__imgnote{
  position:absolute;top:var(--lk-s-4);right:var(--lk-s-4);z-index:1;
  font-family:var(--lk-font-mono);font-size:11px;color:#fff;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);
  padding:4px 10px;border-radius:var(--lk-r-full);backdrop-filter:blur(4px);
}
.lk-hero__inner{position:relative;max-width:680px}
.lk-hero__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 12px;border-radius:var(--lk-r-full);
  background:rgba(255,255,255,.15);backdrop-filter:blur(6px);
  font-size:var(--lk-t-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.lk-hero__title{
  font-size:clamp(var(--lk-t-2xl), 4.5vw, var(--lk-t-3xl));
  font-weight:900;letter-spacing:-.03em;line-height:1.02;
  margin:var(--lk-s-3) 0 var(--lk-s-2);text-wrap:balance;
}
.lk-hero__sub{font-size:var(--lk-t-base);opacity:.92;max-width:52ch;line-height:1.5;margin:0 0 var(--lk-s-4)}
.lk-hero__icons{
  position:absolute;right:var(--lk-s-7);top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:var(--lk-s-4);opacity:.85;
}
.lk-hero__icons svg{width:64px;height:64px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:780px){.lk-hero__icons{display:none}}

/* =====================================================================
   FORMS
   ===================================================================== */
.lk-field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--lk-s-4)}
.lk-label{font-size:var(--lk-t-sm);font-weight:600;color:var(--lk-ink)}
.lk-input, .lk-select, .lk-textarea{
  width:100%;padding:10px 14px;
  background:var(--lk-surface);color:var(--lk-ink);
  border:1px solid var(--lk-border);border-radius:var(--lk-r-md);
  font:inherit;font-size:var(--lk-t-sm);
  transition:border-color var(--lk-t-fast), box-shadow var(--lk-t-fast);
}
.lk-input:focus, .lk-select:focus, .lk-textarea:focus{
  outline:none;border-color:var(--lk-accent);box-shadow:var(--lk-sh-ring);
}
.lk-input::placeholder{color:var(--lk-muted)}
.lk-help{font-size:var(--lk-t-xs);color:var(--lk-muted)}

/* Search */
.lk-search{position:relative}
.lk-search .bi-search{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--lk-muted)}
.lk-search .lk-input{padding-left:38px}

/* Checkbox / radio */
.lk-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--lk-t-sm)}
.lk-check input{accent-color:var(--lk-accent);width:16px;height:16px}

/* =====================================================================
   ALERTS / CALLOUTS
   ===================================================================== */
.lk-callout{
  display:flex;gap:var(--lk-s-3);align-items:flex-start;
  padding:var(--lk-s-4) var(--lk-s-5);border-radius:var(--lk-r-lg);
  background:var(--lk-accent-soft);color:var(--lk-ink);
  border-left:4px solid var(--lk-accent);
}
.lk-callout i{font-size:var(--lk-t-lg);color:var(--lk-accent-deep);margin-top:2px}
.lk-callout--info{background:var(--lk-info-soft);border-color:var(--lk-info)}
.lk-callout--info i{color:var(--lk-info)}
.lk-callout--ok{background:var(--lk-ok-soft);border-color:var(--lk-ok)}
.lk-callout--ok i{color:var(--lk-ok)}
.lk-callout--warn{background:var(--lk-warn-soft);border-color:var(--lk-warn)}
.lk-callout--warn i{color:var(--lk-warn)}
.lk-callout--error{background:var(--lk-error-soft);border-color:var(--lk-error)}
.lk-callout--error i{color:var(--lk-error)}
.lk-callout strong{display:block;margin-bottom:2px}

/* =====================================================================
   FOOTER (canonical pattern)
   ===================================================================== */
.lk-footer{
  border-top:1px solid var(--lk-border);
  background:var(--lk-surface);
  padding:var(--lk-s-7) 0 var(--lk-s-5);
  color:var(--lk-ink-2);
}
/* labklas.be gebruikt 4 footer-kolommen (Kit / Sites / Versie naast het logoblok) —
   de design-mockups tonen een enkelvoudige footer, maar de grid blijft hier behouden
   zodat de bestaande navigatielinks op de live site correct blijven layouten. */
.lk-footer__inner{
  max-width:1240px;margin:0 auto;padding:0 var(--lk-s-5);
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--lk-s-6);
}
@media (max-width:780px){.lk-footer__inner{grid-template-columns:1fr 1fr}}
.lk-footer h5{font-size:var(--lk-t-sm);color:var(--lk-accent-deep);margin:0 0 var(--lk-s-3);text-transform:uppercase;letter-spacing:.08em}
.lk-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px;font-size:var(--lk-t-sm)}
.lk-footer__bottom{
  max-width:1240px;margin:var(--lk-s-6) auto 0;padding:var(--lk-s-4) var(--lk-s-5) 0;
  border-top:1px solid var(--lk-border);
  display:flex;justify-content:space-between;align-items:center;gap:var(--lk-s-4);
  font-size:var(--lk-t-xs);color:var(--lk-muted);flex-wrap:wrap;
}
.lk-footer__version{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--lk-font-mono);color:var(--lk-muted);font-size:var(--lk-t-xs);
}
.lk-footer__meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* =====================================================================
   MODAL
   (niet in de design-mockups — behouden voor de live login-flow)
   ===================================================================== */
.lk-modal{
  display:none;position:fixed;inset:0;z-index:1000;
  align-items:center;justify-content:center;padding:var(--lk-s-5);
}
.lk-modal.is-open{display:flex}
.lk-modal__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
}
.lk-modal__box{
  position:relative;z-index:1;
  background:var(--lk-surface);border:1px solid var(--lk-border);
  border-radius:var(--lk-r-xl);box-shadow:var(--lk-sh-4);
  padding:var(--lk-s-6);width:100%;max-width:400px;
}
.lk-modal__title{font-size:var(--lk-t-xl);font-weight:800;margin:0 0 var(--lk-s-5)}
.lk-modal__close{
  position:absolute;top:var(--lk-s-4);right:var(--lk-s-4);
  background:none;border:none;font-size:var(--lk-t-lg);
  color:var(--lk-muted);cursor:pointer;padding:4px;line-height:1;
}
.lk-modal__close:hover{color:var(--lk-ink)}

/* =====================================================================
   LISTFRAME
   Gedeeld tussen admin-rijlijsten (styles/admin.css) en de extra's-rijlijst
   op pages/thema.html — vervangt de niet-bestaande .sg-frame uit de mockups.
   ===================================================================== */
.lk-listframe{
  background:var(--lk-surface);border:1px solid var(--lk-border);
  border-radius:var(--lk-r-lg);overflow:hidden;
}
.lk-listframe__head{
  display:flex;align-items:center;gap:var(--lk-s-4);
  padding:10px var(--lk-s-5);border-bottom:1px solid var(--lk-border);
  background:var(--lk-surface-2);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--lk-muted);
}