/* ============================================================
   DocentenPlan — styles.css  (OPGESCHOONDE BASIS)
   ------------------------------------------------------------
   Eén design-systeem. Bricolage Grotesque (display) + Hanken
   Grotesk (UI), warm papier, één indigo, warme schaduwen,
   één radius-schaal.

   MIGRATIE-TRUC: de oude token-namen (--accent, --bg, --radius,
   --font, --shadow…) blijven bestaan, maar wijzen nu naar de
   NIEUWE waardes. Zo nemen al je bestaande view-componenten
   (jp-*, lp-*, lm-*, aiw-*) meteen de nieuwe look over, zonder
   dat je elke regel hoeft te herschrijven.

   Verwijderd t.o.v. de oude styles.css:
   · Geist + Geist Mono  (→ Bricolage/Hanken)
   · dubbele indigo #6366f1  (→ één indigo #5B5FE9)
   · koele achtergrond #F8F7F4  (→ warm papier #F3EFE6)
   · koele/blauwe schaduwen rgba(15,23,42)  (→ warm rgba(34,30,24))
   · groene focus-gloed rgba(22,163,74)  (→ indigo)
   · dubbele radius-schaal  (→ één schaal met aliassen)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================================
   DESIGN TOKENS — één bron van waarheid
   ============================================================ */
:root {
  /* ---- Lettertypes ---- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-ui:      'Hanken Grotesk', system-ui, sans-serif;
  /* alias voor oude code die var(--font) gebruikt */
  --font:         var(--font-ui);
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Oppervlakken (warm papier) ---- */
  --paper:        #F3EFE6;
  --paper-edge:   #ECE6D9;
  --surface:      #FFFFFF;
  --surface-warm: #FBF9F3;
  /* aliassen voor oude namen */
  --bg:           var(--paper);
  --surface-2:    var(--surface-warm);
  --surface-3:    var(--paper-edge);
  --surface-alt:  var(--surface-warm);

  /* ---- Inkt ---- */
  --ink:          #221E18;
  --ink-2:        #4C463B;
  --ink-3:        #847B6B;
  --ink-4:        #ABA192;
  /* aliassen */
  --muted:        var(--ink-3);
  --faint:        var(--ink-4);
  --ink-muted:    var(--ink-3);
  --text-muted:   var(--ink-3);

  /* ---- Lijnen ---- */
  --line:         #E6E0D2;
  --line-strong:  #D6CFBD;
  /* aliassen */
  --border:       #E6E0D2;
  --border-2:     #D6CFBD;

  /* ---- Merk: één indigo ---- */
  --green:        #5B5FE9;   /* historische naam, = primair indigo */
  --green-700:    #4A4ED9;
  --green-800:    #1E2748;
  --green-tint:   #E7E7FB;
  --green-tint-2: #D6D7F8;
  /* aliassen — ALLES wat --accent gebruikte wordt nu deze indigo */
  --accent:       var(--green);
  --accent-dim:   var(--green-tint);
  --accent-text:  var(--green-700);
  --accent-soft:  var(--green-tint);

  /* ---- Zijbalk (navy) ---- */
  --navy:         #1B2342;
  --navy-soft:    #232C50;
  --sidebar-bg:     #0D1F3C;
  --sidebar-text:   rgba(255,255,255,0.52);
  --sidebar-active: rgba(255,255,255,0.95);
  --sidebar-hover:  rgba(255,255,255,0.07);
  --sidebar-accent: #818CF8;

  /* ---- Vak-accenten ---- */
  --coral:        #E26B45;  --coral-tint:    #FAE5DC;
  --marigold:     #E3A52E;  --marigold-tint: #F8EDD2;
  --sky:          #3E8AAE;  --sky-tint:      #DDEBF1;
  --berry:        #BD4F7C;  --berry-tint:    #F4E0EA;
  --plum:         #7C63C4;  --plum-tint:     #E8E2F5;

  /* ---- Status ---- */
  --amber:        #B45309;  --amber-dim: #F8EDD2;  --amber-text: #92400E;
  --red:          #C4452F;  --red-dim:   #F6E0DB;  --red-text:   #A6361F;
  --blue:         #3E8AAE;  --blue-dim:  #DDEBF1;  --blue-text:  #2C6A88;
  --danger:       var(--red);  --danger-tint: var(--red-dim);
  --red-light:    var(--red-dim);

  /* ---- Radius: één schaal ---- */
  --r-xs:   8px;   --r-sm:  11px;  --r-md:  16px;  --r-lg:  22px;  --r-xl: 28px;  --r-pill: 999px;
  /* aliassen voor oude namen */
  --radius-sm: var(--r-xs);
  --radius:    var(--r-sm);
  --radius-lg: var(--r-md);
  --radius-xl: var(--r-xl);

  /* ---- Schaduw: warm, één schaal ---- */
  --sh-1: 0 1px 2px rgba(34,30,24,.05);
  --sh-2: 0 2px 4px rgba(34,30,24,.04), 0 10px 28px -16px rgba(34,30,24,.18);
  --sh-3: 0 4px 8px rgba(34,30,24,.05), 0 20px 48px -20px rgba(34,30,24,.24);
  /* aliassen */
  --shadow-sm: var(--sh-1);
  --shadow:    var(--sh-2);
  --shadow-lg: var(--sh-3);

  /* ---- Focus-ring (indigo, niet meer groen) ---- */
  --focus-ring: 0 0 0 3px var(--green-tint);

  /* layout */
  --sidebar-w: 264px;
  --nav-h:     64px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5 { font-family: var(--font-display); letter-spacing: -.015em; line-height: 1.1; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-ui); cursor: pointer; }
input, select, textarea { font-family: var(--font-ui); }
::selection { background: var(--green-tint-2); }

/* ============================================================
   KNOPPEN
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 10px 17px; border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap; min-height: 42px;
  box-shadow: var(--sh-1);
  transition: background .15s, color .15s, box-shadow .15s, border-color .15s, transform .08s;
}
.btn:hover { background: var(--surface-warm); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 8px 18px -10px rgba(91,95,233,.8); }
.btn-primary:hover { background: var(--green-700); border-color: var(--green-700); color: #fff; box-shadow: 0 10px 22px -10px rgba(91,95,233,.9); }

.btn-soft { background: var(--green-tint); color: var(--green-800); border-color: transparent; }
.btn-soft:hover { background: var(--green-tint-2); color: var(--green-800); }

.btn-danger { background: var(--surface); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 26%, var(--line)); }
.btn-danger:hover { background: var(--danger-tint); }

.btn-sm { padding: 7px 13px; font-size: 13px; min-height: 36px; border-radius: var(--r-xs); }
.btn-lg { padding: 13px 22px; font-size: 15px; min-height: 48px; border-radius: var(--r-md); }

.icon-btn {
  width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); flex: none; box-shadow: var(--sh-1);
  transition: background .15s, color .15s, box-shadow .15s, border-color .15s, transform .08s;
}
.icon-btn:hover { background: var(--surface-warm); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--sh-2); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { width: 18px; height: 18px; }

/* ============================================================
   FORMULIERVELDEN
   ============================================================ */
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 7px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 11px 14px; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-warm); color: var(--ink);
  font-size: 14.5px; outline: none; -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--green); background: #fff; box-shadow: var(--focus-ring);
}
.form-field input[type="checkbox"], .form-field input[type="radio"] {
  width: auto; min-height: 0; padding: 0; border: none; background: transparent;
  -webkit-appearance: auto; appearance: auto; cursor: pointer;
}
.form-field textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.form-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-full   { grid-column: 1 / -1; }

/* ============================================================
   KAARTEN
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); margin-bottom: 16px; overflow: hidden;
  box-shadow: var(--sh-2);
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.card:hover { box-shadow: var(--sh-3); border-color: var(--line-strong); }
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--line); gap: 12px; flex-wrap: wrap;
}
.card-header h2 { font-size: 17px; font-weight: 700; }
.card-header .card-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.card-body { padding: 18px 22px; }

/* ============================================================
   PAGINA-KOP
   ============================================================ */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; }
.page-header-left .breadcrumb { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; display: flex; align-items: center; gap: 5px; }
.page-header-left h1 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.section-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -.025em; }

/* ============================================================
   STAT-KAARTEN
   ============================================================ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; box-shadow: var(--sh-2); transition: box-shadow .18s, border-color .18s, transform .18s; }
.stat-card:hover { box-shadow: var(--sh-3); border-color: var(--line-strong); transform: translateY(-2px); }
.stat-card .stat-label { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; }
.stat-card .stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-bottom: 4px; }
.stat-card .stat-sub { font-size: 12px; color: var(--ink-4); }

/* ============================================================
   TABEL
   ============================================================ */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; padding: 13px 18px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); border-bottom: 1px solid var(--line); white-space: nowrap; }
.data-table td { padding: 14px 18px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background .12s; }
.data-table tbody tr:hover td { background: var(--surface-warm); }

/* ============================================================
   BADGES
   ============================================================ */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.badge-green { background: var(--green-tint);    color: var(--green-800); }
.badge-amber { background: var(--marigold-tint); color: var(--amber-text); }
.badge-red   { background: var(--red-dim);       color: var(--red-text); }
.badge-blue  { background: var(--sky-tint);      color: var(--blue-text); }
.badge-gray  { background: var(--paper-edge);    color: var(--ink-3); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-pill); background: var(--paper-edge); color: var(--ink-2); }
.tag-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.role-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.role-admin      { background: var(--plum-tint);  color: var(--plum); }
.role-docent     { background: var(--green-tint); color: var(--green-800); }
.role-management { background: var(--sky-tint);   color: var(--blue-text); }
.week-pill { display: inline-block; padding: 2px 9px; border-radius: 6px; border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--surface-warm); font-family: var(--font-display); }
.week-pill.current { background: var(--green-tint); border-color: var(--green-tint-2); color: var(--green-800); }

/* ============================================================
   TABS
   ============================================================ */
.tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 20px; gap: 4px; }
.tab-btn { padding: 10px 14px; font-size: 14px; cursor: pointer; color: var(--ink-3); border: none; border-bottom: 2.5px solid transparent; background: transparent; font-weight: 700; transition: color .12s; margin-bottom: -1px; }
.tab-btn:hover { color: var(--ink-2); }
.tab-btn.active { color: var(--green-800); border-bottom-color: var(--green); }

/* ============================================================
   ALERTS / NOTICES
   ============================================================ */
.alert { padding: 11px 15px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 14px; line-height: 1.5; }
.alert-info    { background: var(--sky-tint);   color: var(--blue-text);  border: 1px solid color-mix(in srgb, var(--sky) 20%, transparent); }
.alert-success { background: var(--green-tint); color: var(--green-800);  border: 1px solid var(--green-tint-2); }
.readonly-notice { background: var(--sky-tint); color: var(--blue-text); border: 1px solid color-mix(in srgb, var(--sky) 20%, transparent); border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }

/* ============================================================
   UPLOAD-ZONE
   ============================================================ */
.upload-zone { border: 2px dashed var(--line-strong); border-radius: var(--r-md); padding: 28px; text-align: center; cursor: pointer; color: var(--ink-3); font-size: 13px; transition: border-color .15s, background .15s, color .15s; }
.upload-zone:hover { border-color: var(--green); background: var(--green-tint); color: var(--green-800); }
.upload-zone .upload-icon { font-size: 24px; margin-bottom: 8px; opacity: .5; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state { text-align: center; padding: 52px 20px; color: var(--ink-3); }
.empty-state h3 { font-size: 18px; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.empty-state p { font-size: 13px; margin-bottom: 18px; }

/* ============================================================
   PROGRESS
   ============================================================ */
.prog-bar { height: 5px; background: var(--paper-edge); border-radius: 3px; }
.prog-fill { height: 100%; border-radius: 3px; background: var(--green); }
.text-link { color: var(--blue-text); font-size: 12px; }
.text-link:hover { text-decoration: underline; }

/* ============================================================
   APP SHELL + ZIJBALK (navy)
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); background: var(--sidebar-bg);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; height: 100vh; z-index: 200; overflow-y: auto;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.sidebar-logo { display: flex; align-items: center; gap: 11px; padding: 22px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.logo-mark-sm { width: 34px; height: 34px; background: var(--green); color: #fff; border-radius: 11px; display: grid; place-items: center; font-family: var(--font-display); font-size: 14px; font-weight: 800; flex: none; box-shadow: 0 6px 16px -6px rgba(91,95,233,.85); }
.logo-text { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #fff; }
.nav-group { padding: 12px 0 4px; }
.nav-group + .nav-group { border-top: 1px solid rgba(255,255,255,.05); margin-top: 4px; }
.nav-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.32); padding: 4px 18px 6px; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 16px; margin: 1px 10px; border-radius: var(--r-sm); color: var(--sidebar-text); font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: color .12s, background .12s; }
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .7; }
.nav-item:hover { color: var(--sidebar-active); background: var(--sidebar-hover); }
.nav-item:hover svg { opacity: 1; }
.nav-item.active { color: #fff; background: var(--green); box-shadow: 0 6px 16px -8px rgba(91,95,233,.9); }
.nav-item.active svg { opacity: 1; }
.sidebar-footer { margin-top: auto; padding: 14px; border-top: 1px solid rgba(255,255,255,.06); }
.user-info { font-size: 12px; color: rgba(255,255,255,.4); padding: 0 4px 10px; line-height: 1.5; }
.user-info strong { display: block; color: rgba(255,255,255,.78); font-size: 13px; font-weight: 700; }
.btn-logout { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-sm); background: transparent; color: rgba(255,255,255,.5); font-size: 13px; transition: all .15s; }
.btn-logout svg { width: 15px; height: 15px; }
.btn-logout:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.85); }

.main-content { margin-left: var(--sidebar-w); flex: 1; min-height: 100vh; background: var(--paper); }
.view { padding: 34px clamp(28px, 3.2vw, 64px) 80px; width: 100%; animation: viewIn .2s ease; }
@keyframes viewIn { from { transform: translateY(4px); } to { transform: none; } }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay-inner { position: fixed; inset: 0; background: rgba(20,17,13,.46); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 32px; width: 100%; max-width: 900px; max-height: 90vh; overflow-y: auto; box-shadow: var(--sh-3); animation: modalIn .25s cubic-bezier(.16,1,.3,1); }
.modal-box-wide { max-width: min(1400px, 96vw); }
@keyframes modalIn { from { transform: scale(.97) translateY(8px); } to { transform: scale(1) translateY(0); } }
.modal-box h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.modal-box .modal-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; line-height: 1.55; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--paper); padding: 20px; position: relative; }
.login-screen::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 60% at 15% 10%, rgba(91,95,233,.10) 0%, transparent 60%), radial-gradient(ellipse 60% 80% at 85% 90%, rgba(13,31,60,.08) 0%, transparent 60%); pointer-events: none; }
.login-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 40px; width: 100%; max-width: 420px; box-shadow: var(--sh-3); animation: fadeUp .4s cubic-bezier(.16,1,.3,1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
.logo-mark { width: 40px; height: 40px; background: var(--green); color: #fff; border-radius: var(--r-sm); display: grid; place-items: center; font-family: var(--font-display); font-size: 15px; font-weight: 800; flex: none; box-shadow: 0 6px 16px -6px rgba(91,95,233,.85); }
.logo-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.logo-sub { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.login-heading { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 6px; }
.login-desc { color: var(--ink-3); font-size: 14px; margin-bottom: 28px; }
.btn-login { width: 100%; padding: 13px; background: var(--green); color: #fff; border: none; border-radius: var(--r-sm); font-size: 15px; font-weight: 700; min-height: 48px; margin-top: 4px; box-shadow: 0 8px 18px -10px rgba(91,95,233,.8); transition: background .15s, box-shadow .15s, transform .08s; }
.btn-login:hover { background: var(--green-700); box-shadow: 0 10px 22px -10px rgba(91,95,233,.9); }
.btn-login:active { transform: translateY(1px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid, .form-grid-3 { grid-template-columns: 1fr; }
  .form-full { grid-column: 1; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: none; }
  .main-content { margin-left: 0; padding-top: 56px; padding-bottom: 64px; }
  .view { padding: 0px 0px 0px; }
  .page-header-left h1 { font-size: 24px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .modal-box { padding: 20px; border-radius: var(--r-lg); max-height: 88vh; }
  .modal-actions .btn { flex: 1; justify-content: center; }
}

/* ============================================================
   MOBILE — header, overlay & bottom nav
   ============================================================ */
.mobile-header {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  z-index: 300; align-items: center; justify-content: space-between;
  padding: 0 16px; box-shadow: var(--sh-1);
}
.mobile-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.hamburger { display: none; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(13,31,60,.4); z-index: 199; backdrop-filter: blur(2px); }

.bottom-nav { display: none; }

@media (max-width: 768px) {
  .mobile-header { display: flex; }
  .sidebar-overlay.open { display: block; }
  .bottom-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 64px;
    background: var(--sidebar-bg); border-top: 1px solid rgba(255,255,255,.08);
    z-index: 300; align-items: stretch;
  }
  .bottom-nav-item {
    position: relative;
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; border: none; background: none; color: #9B9386;
    font-size: 10px; font-weight: 600; cursor: pointer; padding: 8px 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav-item svg { width: 22px; height: 22px; }
  .bottom-nav-item.active { color: #5B5FEF; }
  .bottom-nav-item.active svg, .bottom-nav-item.active span { color: #5B5FEF; }
  .nav-badge { position: absolute; top: 2px; right: calc(50% - 16px); background: var(--red); color: #fff; font-size: 9px; font-weight: 700; border-radius: 8px; min-width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
}

/* ============================================================
   VIEW-STYLING FIX — ontbrekende pagina-styling
   ------------------------------------------------------------
   Deze laag geeft de overige app-pagina's dezelfde warme kaart-
   en dashboardstijl als homepage/dashboard, zonder bestaande
   dashboardregels te overschrijven.
   ============================================================ */

.page-sub { color: var(--ink-3); font-size: 14px; margin-top: 6px; max-width: 760px; }
.btn-ghost, .btn-secondary { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); }
.form-label { display:block; font-size:12px; font-weight:800; color:var(--ink-2); margin-bottom:7px; }
.form-input, .lb-input, .lb-textarea, .tw-mini-input, .tw-mini-select, .tw-mini-textarea,
.wb-5wh-input, .wb-stap-naam, .wb-stap-tekst, .wb-stap-veiligheidstip,
.wb-mat-naam, .wb-mat-aantal, .wb-mat-afmeting, .wb-mat-type,
.wb-gereedschap-naam, .wb-reflectie-vraag {
  width: 100%; min-height: 42px; padding: 10px 13px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-warm); color: var(--ink);
  font: 500 14px/1.45 var(--font-ui); outline: none;
}
textarea.lb-textarea, .tw-mini-textarea, .wb-stap-tekst, .wb-stap-veiligheidstip { min-height: 96px; resize: vertical; }
.form-input:focus, .lb-input:focus, .lb-textarea:focus, .tw-mini-input:focus, .tw-mini-select:focus, .tw-mini-textarea:focus,
.wb-5wh-input:focus, .wb-stap-naam:focus, .wb-stap-tekst:focus, .wb-stap-veiligheidstip:focus,
.wb-mat-naam:focus, .wb-mat-aantal:focus, .wb-mat-afmeting:focus, .wb-mat-type:focus,
.wb-gereedschap-naam:focus, .wb-reflectie-vraag:focus { border-color: var(--green); background:#fff; box-shadow: var(--focus-ring); }

/* Jaarplanning */
.jp-stats-row, .gu-stats, .tl-stats, .vv-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:20px; }
.jp-stat, .gu-stat, .tl-stat, .vv-stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:17px 19px; box-shadow:var(--sh-2); }
.jp-stat-val, .gu-stat-num, .tl-stat-waarde, .vv-stat-n { display:block; font-family:var(--font-display); font-size:27px; font-weight:800; letter-spacing:-.02em; line-height:1; color:var(--ink); }
.jp-stat-lbl, .gu-stat-label, .tl-stat-label, .vv-stat-l { display:block; margin-top:7px; font-size:12px; font-weight:700; color:var(--ink-3); }
#jp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.jp-week { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-2); overflow:hidden; min-height:168px; }
.jp-week-huidig { border-color:var(--green-tint-2); box-shadow:0 0 0 3px var(--green-tint), var(--sh-2); }
.jp-week-vakantie { background:var(--surface-warm); }
.jp-week-header { display:flex; justify-content:space-between; gap:10px; align-items:center; padding:13px 15px; border-bottom:1px solid var(--line); }
.jp-week-nr { font-weight:800; color:var(--ink); }
.jp-week-datum { font-size:12px; color:var(--ink-3); }
.jp-opdrachten { padding:12px; display:flex; flex-direction:column; gap:9px; }
.jp-opdracht { background:var(--surface-warm); border:1px solid var(--line); border-radius:var(--r-sm); padding:11px; transition:background .15s,border-color .15s,transform .12s; }
.jp-opdracht:hover { background:#fff; border-color:var(--line-strong); transform:translateY(-1px); }
.jp-opdracht-top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.jp-opdracht-naam { font-weight:800; color:var(--ink); }
.jp-opdracht-desc { margin-top:4px; font-size:13px; color:var(--ink-3); }
.jp-opdracht-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; font-size:12px; color:var(--ink-3); }
.jp-opdracht-acties { display:flex; gap:6px; margin-top:10px; }
.jp-leeg { padding:18px 10px; text-align:center; color:var(--ink-4); font-size:13px; }

/* Gebruikers */
.gu-wrapper, .tl-wrapper, .rr-wrapper { display:block; }
.gu-info-banner { background:var(--sky-tint); color:var(--blue-text); border:1px solid color-mix(in srgb,var(--sky) 20%,transparent); border-radius:var(--r-md); padding:13px 16px; margin-bottom:16px; font-size:13px; }
.gu-filter { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; }
.gu-zoek-wrap input, .vak-select-search { min-height:42px; min-width:260px; padding:10px 13px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); }
.gu-tabs, .tl-tabs, .lm-tab-bar { display:flex; gap:4px; background:var(--surface-warm); border:1px solid var(--line); border-radius:var(--r-sm); padding:4px; flex-wrap:wrap; }
.gu-tab, .tl-tab, .lm-tab-btn { border:0; background:transparent; padding:8px 13px; border-radius:var(--r-xs); font-weight:800; font-size:13px; color:var(--ink-3); }
.gu-tab.active, .tl-tab.active, .lm-tab-btn--active { background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }
.gu-list { display:grid; gap:12px; }
.gu-kaart { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:15px 17px; box-shadow:var(--sh-2); }
.gu-avatar, .vv-avatar, .docenten-avatar, .klas-docent-avatar, .tl-init { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:var(--green); flex:none; }
.gu-avatar--admin { background:var(--plum); } .gu-avatar--management { background:var(--sky); }
.gu-naam-rij { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.gu-naam { font-weight:800; color:var(--ink); }
.gu-email { color:var(--ink-3); font-size:13px; margin-top:2px; }
.gu-vakken, .klas-docent-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.gu-vak, .klas-docent-chip { font-size:11.5px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); background:var(--paper-edge); color:var(--ink-2); }
.gu-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--r-pill); font-size:11px; font-weight:800; background:var(--paper-edge); color:var(--ink-2); }
.gu-badge--admin { background:var(--plum-tint); color:var(--plum); } .gu-badge--docent { background:var(--green-tint); color:var(--green-800); }
.gu-badge--management, .gu-badge--tl { background:var(--sky-tint); color:var(--blue-text); } .gu-badge--tijdelijk { background:var(--marigold-tint); color:var(--amber-text); }
.gu-acties { display:flex; gap:7px; }
.gu-btn { width:36px; height:36px; border-radius:var(--r-xs); border:1px solid var(--line); background:var(--surface); color:var(--ink-2); display:grid; place-items:center; }
.gu-btn:hover { background:var(--surface-warm); } .gu-btn--danger { color:var(--danger); }
.vak-select-grid { display:grid; gap:8px; max-height:240px; overflow:auto; padding:4px; }
.vak-option { display:flex; gap:10px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-warm); }
.vak-option.is-selected { border-color:var(--green); background:var(--green-tint); }

/* Klassen / kaarten */
.klas-grid, .lm-grid, .lp-profielen-grid, .vv-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; }
.klas-card, .lm-kaart, .lp-kaart, .vv-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:17px; box-shadow:var(--sh-2); }
.klas-card-top, .lm-kaart-acties, .lp-kaart-acties, .vv-card-top, .lm-les-rij, .lm-praktijk-rij, .lm-gedeelde-rij { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.klas-naam, .lm-kaart-naam, .lp-kaart-naam, .vv-name { font-weight:800; color:var(--ink); font-size:16px; }
.klas-meta-row, .lm-kaart-meta, .lp-kaart-meta, .vv-sub { color:var(--ink-3); font-size:13px; margin-top:4px; }
.klas-progress, .vv-bar, .tl-mini-balk, .tl-voortgang-balk { height:7px; background:var(--paper-edge); border-radius:var(--r-pill); overflow:hidden; margin-top:12px; }
.klas-progress-fill, .vv-fill, .tl-mini-gevuld, .tl-voortgang-gevuld { height:100%; background:var(--green); border-radius:var(--r-pill); }

/* Lesmodules / lesprofielen */
.lm-tabs { margin-bottom:18px; }
.lm-tab-paneel { margin-top:14px; }
.lm-lessen, .lm-praktijk-lijst, .lp-week-body { display:grid; gap:10px; }
.lm-les-rij, .lm-praktijk-rij, .lm-gedeelde-rij, .lp-item-rij, .lp-koppeling-rij, .lp-week-rij, .lb-bron-blok, .tw-bron-blok, .tw-vraag-blok, .wb-stap-ctrl, .tw-mat-rij { background:var(--surface-warm); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px; }
.lm-hoofdstap, .lp-stap, .lb-blok, .tw-sectie, .tw-ovz-blok, .tw-ai-advies-blok { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:16px; margin-bottom:14px; box-shadow:var(--sh-1); }
.lm-stap-codes, .lm-gd-codes, .lm-po-codes { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.lm-type-pill, .lb-type-pill, .rr-pill, .tw-type-badge, .tl-type-badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:var(--r-pill); background:var(--green-tint); color:var(--green-800); font-size:11.5px; font-weight:800; }
.lm-niveau-checkboxes { display:flex; gap:8px; flex-wrap:wrap; }
.lm-niveau-checkbox { display:inline-flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-warm); font-weight:700; }
.lp-detail-header, .lp-stap-header, .lb-wizard-header, .tw-sectie-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.lp-detail-title, .lb-wizard-title, .tw-keuze-titel, .tw-ovz-titel, .tw-ai-advies-titel { font-family:var(--font-display); font-weight:800; color:var(--ink); }
.lp-drop-zone { border:2px dashed var(--line-strong); border-radius:var(--r-md); padding:18px; background:var(--surface-warm); color:var(--ink-3); text-align:center; }
.lp-toets-balk, .lb-progress-wrap, .tw-progress-wrap { margin:12px 0; }

/* Lesbrief / toets / werkboek wizard */
.lb-wizard-header { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--sh-2); }
.lb-wizard-title { font-size:24px; }
.lb-wizard-sub, .lb-hint, .tw-keuze-sub { color:var(--ink-3); font-size:13px; }
.lb-scroll { overflow:auto; }
.lb-fase-tabel, .tw-ovz-grid table, .vv-tbl { width:100%; border-collapse:collapse; }
.lb-fase-tabel th, .lb-fase-tabel td, .vv-tbl th, .vv-tbl td { border-bottom:1px solid var(--line); padding:10px; text-align:left; }
.lb-progress-bar { height:8px; background:var(--paper-edge); border-radius:var(--r-pill); overflow:hidden; display:flex; }
.lb-progress-seg, .lb-progress-seg0, .lb-progress-seg1, .lb-progress-seg2, .lb-progress-seg3 { height:100%; background:var(--green); }
.lb-wizard-actions, .tw-vraag-acties { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; margin-top:16px; }
.tw-keuze-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; }
.tw-keuze-kaart { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--sh-2); cursor:pointer; }
.tw-keuze-kaart:hover { border-color:var(--green-tint-2); transform:translateY(-1px); }
.tw-mk-grid { display:grid; gap:8px; }
.tw-mk-opt { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center; }
.tw-mk-letter { width:28px; height:28px; border-radius:50%; background:var(--green-tint); color:var(--green-800); display:grid; place-items:center; font-weight:800; }
.wb-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* Rooster / teamleider */
.rr-klassen-grid, .rr-snelknoppen, .tl-leerling-counts { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin-bottom:18px; }
.rr-klas-card, .rr-klas-kaart, .tl-klas-card, .rr-preview-sectie, .rr-legenda, .rr-dag-summary, .rr-snelknop { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-2); }
.rr-klas-header, .tl-klas-header, .rr-dag-rij, .tl-leerling-item { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.rr-klas-naam, .tl-klas-naam, .rr-preview-titel, .rr-legenda-titel, .tl-sectie-titel { font-weight:800; color:var(--ink); }
.rr-klas-sub, .tl-klas-meta, .rr-preview-meta, .rr-dag-info { color:var(--ink-3); font-size:13px; }
.rr-dag-lijst, .rr-preview-lijst { display:grid; gap:8px; margin-top:10px; }
.rr-dag-chip, .rr-preview-chip { display:inline-flex; align-items:center; padding:3px 8px; border-radius:var(--r-pill); background:var(--paper-edge); color:var(--ink-2); font-size:11.5px; font-weight:800; }
.tl-klas-body { padding-top:12px; display:grid; gap:12px; }
.tl-les-tabel, .tl-taken-tabel { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-1); }
.tl-les-tabel th, .tl-les-tabel td, .tl-taken-tabel th, .tl-taken-tabel td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; }
.tl-status { display:inline-flex; padding:3px 9px; border-radius:var(--r-pill); font-size:11.5px; font-weight:800; }
.tl-status--ok { background:var(--green-tint); color:var(--green-800); } .tl-status--open { background:var(--sky-tint); color:var(--blue-text); } .tl-status--waarschuwing { background:var(--marigold-tint); color:var(--amber-text); }

/* Schooljaren / taken */
.sj-grid, .taak-lijst { display:grid; gap:14px; }
.sj-kaart-hdr, .sj-periode-hdr, .taak-rij { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.sj-kaart-inhoud, .taak-rij { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px; box-shadow:var(--sh-2); }
.sj-kaart-naam, .taak-naam { font-weight:800; color:var(--ink); }
.sj-thema-input { width:100%; min-height:38px; border:1px solid var(--line); border-radius:var(--r-xs); padding:8px 10px; background:var(--surface-warm); }
.taak-badge { display:inline-flex; padding:3px 9px; border-radius:var(--r-pill); font-size:11.5px; font-weight:800; background:var(--paper-edge); color:var(--ink-2); }
.taak-badge.telaat, .telaat { background:var(--red-dim); color:var(--red-text); } .taak-badge.binnenkort, .binnenkort { background:var(--marigold-tint); color:var(--amber-text); } .afgerond { opacity:.58; }
.taak-cirkel { width:42px; height:42px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-weight:800; }
.taak-inhoud { flex:1; min-width:0; } .taak-beschrijving { color:var(--ink-3); font-size:13px; margin-top:3px; }
.taak-knoppen, .taak-acties { display:flex; gap:8px; flex-wrap:wrap; }

/* Voortgang leerlingmateriaal */
.vv-wrap { display:grid; gap:18px; }
.vv-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--line); }
.vv-pill { padding:3px 8px; border-radius:var(--r-pill); font-size:11.5px; font-weight:800; background:var(--paper-edge); color:var(--ink-2); }
.vv-pill-done { background:var(--green-tint); color:var(--green-800); } .vv-pill-bezig { background:var(--marigold-tint); color:var(--amber-text); }
.vv-progress { height:6px; background:var(--paper-edge); border-radius:var(--r-pill); overflow:hidden; }
.vv-empty, .vv-empty-title { color:var(--ink-3); text-align:center; }

@media (max-width: 900px) {
  .jp-stats-row, .gu-stats, .tl-stats, .vv-stats { grid-template-columns:repeat(2,1fr); }
  .gu-kaart { grid-template-columns:auto 1fr; }
  .gu-acties { grid-column:1 / -1; justify-content:flex-end; }
  .wb-grid-2 { grid-template-columns:1fr; }
}
@media (max-width: 620px) {
  .jp-stats-row, .gu-stats, .tl-stats, .vv-stats { grid-template-columns:1fr; }
  #jp-grid, .klas-grid, .lm-grid, .lp-profielen-grid, .rr-klassen-grid, .rr-snelknoppen { grid-template-columns:1fr; }
  .gu-filter { align-items:stretch; }
  .gu-zoek-wrap input, .vak-select-search { min-width:0; width:100%; }
  .gu-tabs, .tl-tabs, .lm-tab-bar { overflow-x:auto; flex-wrap:nowrap; }
}

/* ============================================================
   STYLING-POLISH — aanvullende dekking voor view-specifieke classes
   ------------------------------------------------------------
   Doel: ontbrekende componenten netjes laten aansluiten op dezelfde
   warme card/dashboard-stijl. Deze regels zijn bewust laag-specifiek
   en overschrijven dashboard/homepage niet agressief.
   ============================================================ */

/* Algemene hulplayouts */
.clearfix::after { content:""; display:block; clear:both; }
.row { display:flex; flex-wrap:wrap; gap:14px; margin:0; }
.col, .col-xs-12, .col-sm-4, .col-sm-8, .col-sm-10, .s4, .s8 { flex:1 1 0; min-width:0; }
.col-xs-12 { flex-basis:100%; }
.col-sm-4, .s4 { flex-basis:260px; }
.col-sm-8, .s8 { flex-basis:520px; }
.col-sm-10 { flex-basis:720px; }
.text-center { text-align:center; }
.img-fluid { max-width:100%; height:auto; display:block; }
.table, .table-layout { width:100%; border-collapse:collapse; }
.table th, .table td, .table-layout th, .table-layout td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.spinner { width:22px; height:22px; border:3px solid var(--paper-edge); border-top-color:var(--green); border-radius:50%; animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.full { grid-column:1 / -1; width:100%; }
.form-hint, .login-error { font-size:12.5px; color:var(--ink-3); margin-top:6px; }
.login-error { color:var(--red-text); background:var(--red-dim); border:1px solid color-mix(in srgb,var(--red) 20%,transparent); border-radius:var(--r-sm); padding:9px 11px; }

/* Extra formulier- en deleteknoppen */
.lb-td-input, .lb-overzicht-title, .lb-fase-naam, .lb-fase-tijd,
.sl-woord-input, .sl-beteken-input, .lm-hoofdstap-input, .lm-les-input,
.lm-taak-input, .lm-module-select, .lm-liveles-select, .lm-sles-select,
.lm-tm-uren, .lm-tm-uren-theorie, .lm-tm-uren-praktijk, .lm-tm-uren-type,
.lm-po-naam, .lm-po-omschrijving, .lm-po-uren, .lm-po-theorie, .lm-po-link,
.lm-po-bestandsnaam, .lm-po-wbid, .lm-gd-naam, .lm-gd-omschrijving,
.lm-gd-theorie, .lm-gd-link, .lm-gd-bestandsnaam, .lm-gd-wbid,
.lm-toets-url, .lm-toets-id, .lm-toets-bestandsnaam, .opd-filter-select {
  width:100%; min-height:40px; padding:9px 12px; border:1px solid var(--line);
  border-radius:var(--r-sm); background:var(--surface-warm); color:var(--ink);
  font:500 14px/1.45 var(--font-ui); outline:none;
}
.lb-td-input:focus, .lb-overzicht-title:focus, .lb-fase-naam:focus, .lb-fase-tijd:focus,
.sl-woord-input:focus, .sl-beteken-input:focus, .lm-hoofdstap-input:focus, .lm-les-input:focus,
.lm-taak-input:focus, .lm-module-select:focus, .lm-liveles-select:focus, .lm-sles-select:focus,
.opd-filter-select:focus { border-color:var(--green); background:#fff; box-shadow:var(--focus-ring); }
.lb-del-btn, .tw-del-btn, .tw-bron-del, .tw-vraag-del, .lm-blok-delete {
  width:34px; height:34px; border-radius:var(--r-xs); border:1px solid var(--line);
  background:var(--surface); color:var(--danger); display:inline-grid; place-items:center; flex:none;
}
.lb-del-btn:hover, .tw-del-btn:hover, .tw-bron-del:hover, .tw-vraag-del:hover, .lm-blok-delete:hover { background:var(--danger-tint); border-color:color-mix(in srgb,var(--danger) 28%,var(--line)); }

/* Gebruikers extra */
.gu-body { display:grid; gap:4px; min-width:0; }
.gu-stat--groen { border-top:4px solid var(--green); }
.gu-stat--amber { border-top:4px solid var(--marigold); }
.gu-stat--blauw { border-top:4px solid var(--sky); }
.gu-stat--paars { border-top:4px solid var(--plum); }
.gu-badge--self { background:var(--marigold-tint); color:var(--amber-text); }
.geb-ww-blok { background:var(--surface-warm); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; margin-top:12px; }
.geb-ww-rij, .tl-toggle-rij { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.geb-ww-rij:last-child, .tl-toggle-rij:last-child { border-bottom:0; }
.geb-ww-label, .tl-toggle-label { font-size:13px; font-weight:800; color:var(--ink-2); }
.geb-ww-waarde, .geb-ww-code { font-family:var(--font-mono); font-size:12px; color:var(--ink-3); background:var(--paper-edge); border-radius:var(--r-xs); padding:4px 7px; }
.g-vak, .g-tl-vak, .vak-option-text { font-size:13px; color:var(--ink-2); }
.vak-select-header { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.vak-select-count { font-size:12px; font-weight:800; color:var(--ink-3); }

/* Klassen extra */
.docenten-picker-rij { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-warm); margin-bottom:8px; }
.klas-progress-label { display:flex; justify-content:space-between; gap:10px; margin-top:10px; font-size:12px; font-weight:800; color:var(--ink-3); }
.klas-roulatie-blok, .klas-roulatie-preview { margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-warm); color:var(--ink-3); font-size:13px; }

/* Lesbrieven / toetsen extra */
.lb-id-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.lb-id-label, .lb-blok-label { display:block; font-size:12px; font-weight:800; color:var(--ink-3); margin-bottom:5px; }
.lb-blok-tekst { color:var(--ink-2); font-size:14px; line-height:1.55; }
.lb-overzicht-header, .tw-bron-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.lb-progress-label { display:flex; justify-content:space-between; color:var(--ink-3); font-size:12px; font-weight:800; margin-bottom:6px; }
.lb-ovz-tabel { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.lb-ovz-tabel th, .lb-ovz-tabel td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; }
.tw-keuze-icoon { width:38px; height:38px; border-radius:var(--r-sm); display:grid; place-items:center; background:var(--green-tint); color:var(--green-800); margin-bottom:10px; }
.tw-bron-nr { font-family:var(--font-display); font-weight:800; color:var(--green-800); }
.tw-ai-verbeterd { background:var(--green-tint); border:1px solid var(--green-tint-2); color:var(--green-800); border-radius:var(--r-md); padding:12px; margin-top:10px; }
.tw-mat-naam { font-weight:800; color:var(--ink); }

/* Lesmateriaal / leerlingmateriaal extra */
.ll-stap-cb, .lo-stap-check, .lm-gd-stap-cb { width:18px; height:18px; accent-color:var(--green); }
.dn-grid-table { width:100%; border-collapse:collapse; }
.dn-grid-table th, .dn-grid-table td { padding:10px 12px; border-bottom:1px solid var(--line); }
.sl-woord-rij, .lm-bekijk-stap, .lm-praktijk-sectie, .lm-gedeelde-wrap { background:var(--surface-warm); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px; margin-bottom:10px; }
.vv-sec-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.vv-sec-item { background:var(--surface-warm); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px; }
.vv-sec-label, .vv-code-hint, .vv-verify-sub { color:var(--ink-3); font-size:12.5px; }
.vv-sh { box-shadow:var(--sh-2); }
.vv-avatar-lg { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; font-weight:800; color:#fff; background:var(--green); }
.vv-badge, .vv-badge-red { display:inline-flex; padding:3px 9px; border-radius:var(--r-pill); font-size:11.5px; font-weight:800; background:var(--green-tint); color:var(--green-800); }
.vv-badge-red { background:var(--red-dim); color:var(--red-text); }
.vv-card-locked, .vv-locked { opacity:.62; }
.vv-cell, .vv-name-cell { min-width:0; }
.vv-pill-empty { background:var(--paper-edge); color:var(--ink-4); }
.vv-reset, .vv-reset-touch { border:1px solid var(--line); background:var(--surface); border-radius:var(--r-xs); padding:7px 10px; color:var(--ink-2); font-weight:800; }
.vv-score { font-family:var(--font-display); font-size:22px; font-weight:800; }
.vv-code-input { min-height:44px; padding:10px 13px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-warm); font-family:var(--font-mono); }
.vv-verify-wrap { display:grid; place-items:center; text-align:center; gap:10px; padding:34px 20px; }
.vv-verify-icon { width:56px; height:56px; border-radius:50%; background:var(--green-tint); color:var(--green-800); display:grid; place-items:center; }
.vv-verify-title { font-family:var(--font-display); font-size:22px; font-weight:800; }
.vv-empty-icon { font-size:30px; opacity:.45; margin-bottom:8px; }

/* Lesmodules extra */
.lm-kaart-type, .lm-praktijk-count, .lm-toets-bestand, .lm-po-bestand, .lm-gd-bestand { font-size:12px; font-weight:800; color:var(--ink-3); }
.lm-les-knoppen { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.lm-les-uren, .lm-po-uren { font-family:var(--font-display); font-weight:800; color:var(--ink); }
.lm-voeg-les-btn, .lm-voeg-tm-btn, .lm-bekijk-les { border:1px dashed var(--line-strong); background:var(--surface-warm); color:var(--green-800); border-radius:var(--r-sm); padding:9px 12px; font-weight:800; }
.lm-voeg-les-btn:hover, .lm-voeg-tm-btn:hover, .lm-bekijk-les:hover { background:var(--green-tint); border-color:var(--green-tint-2); }
.lm-bekijk-praktijk-blok { border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:14px; margin-bottom:12px; }
.lm-bekijk-stap-header { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.lm-bekijk-stap-nr { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--green-tint); color:var(--green-800); font-weight:800; }
.lm-bekijk-stap-body { color:var(--ink-2); font-size:13.5px; margin-top:8px; }
.lm-tm-stap { display:grid; gap:10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-warm); padding:12px; margin-bottom:10px; }
.lm-toets-bestand, .lm-po-bestand, .lm-gd-bestand { display:block; margin-top:5px; color:var(--blue-text); }

/* Lesprofielen extra */
.lp-kaart-module, .lp-les-chip, .lp-niveau-pill { display:inline-flex; align-items:center; padding:3px 9px; border-radius:var(--r-pill); background:var(--green-tint); color:var(--green-800); font-size:11.5px; font-weight:800; }
.lp-niveau-header, .lp-verdeling-titel { display:flex; justify-content:space-between; align-items:center; gap:10px; font-weight:800; color:var(--ink); }
.lp-niveau-count, .lp-verdeling-sub { color:var(--ink-3); font-size:12.5px; }
.lp-verdeling-wrap { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; margin-bottom:14px; box-shadow:var(--sh-1); }
.lp-verdeling-scroll { overflow:auto; padding-bottom:4px; }
.lp-stap-body { display:grid; gap:10px; margin-top:10px; }
.lp-stap-nr { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--green-tint); color:var(--green-800); font-weight:800; }
.lp-stap-naam, .lp-item-tekst { font-weight:800; color:var(--ink); }
.lp-item-handle { color:var(--ink-4); cursor:grab; }
.lp-week-label { font-size:12px; font-weight:800; color:var(--ink-3); }
.lp-week-pijlen { display:flex; gap:6px; }
.lp-week-pijl { width:30px; height:30px; border:1px solid var(--line); border-radius:var(--r-xs); background:var(--surface); }
.lp-koppel-ai-rij { display:flex; justify-content:space-between; gap:12px; }
.lp-koppel-ai-sub { color:var(--ink-3); font-size:12.5px; }

/* Opdrachten / rooster / schooljaren */
.opd-filter-balk { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.opd-filter-label { font-size:12px; font-weight:800; color:var(--ink-3); }
.rr-klas-info, .rr-klas-acties { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rr-klas-chevron, .tl-chevron { color:var(--ink-4); }
.rr-klas-totaal, .rr-uren { font-family:var(--font-display); font-weight:800; color:var(--ink); }
.rr-klas-leeg-btn, .rr-snelknop--leeg { border-style:dashed; color:var(--ink-3); background:var(--surface-warm); }
.rr-snelknoppen-label, .rr-dag-label, .rr-legenda-blok { font-size:12px; font-weight:800; color:var(--ink-3); }
.rr-dag-leeg, .rr-preview-leeg { color:var(--ink-4); font-size:13px; padding:10px 0; }
.rr-dag-naam, .rr-preview-naam { font-weight:800; color:var(--ink); }
.rr-dag-tijd, .rr-dag-uren { color:var(--ink-3); font-size:12.5px; }
.rr-dag-summary--leeg { opacity:.65; }
.rr-legenda-item { display:flex; gap:8px; align-items:center; margin-top:8px; color:var(--ink-2); font-size:13px; }
.rr-vandaag-dot { width:8px; height:8px; border-radius:50%; background:var(--green); display:inline-block; }
.sj-kaart-acties { display:flex; gap:8px; flex-wrap:wrap; }
.sj-thema-cel, .week-thema-cel { min-width:180px; }

/* Taken / teamleider extra */
.taak-initiaal { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--green-tint); color:var(--green-800); font-weight:800; flex:none; }
.taak-naam-rij { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.taak-niemand { color:var(--ink-4); font-size:13px; font-style:italic; }
.normaal { background:var(--green-tint); color:var(--green-800); }
.tl-stat--kleur { border-top:4px solid var(--green); }
.tl-klas-pct { font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--ink); }
.tl-empty-rij { text-align:center; color:var(--ink-4); padding:22px !important; }
.tl-col-naam { min-width:180px; }
.tl-col-week, .tl-col-datum, .tl-col-status, .tl-col-type, .tl-col-door { white-space:nowrap; }
.tl-col-noot { min-width:220px; color:var(--ink-3); }

@media (max-width: 760px) {
  .row { display:grid; grid-template-columns:1fr; }
  .gu-kaart, .vv-row { grid-template-columns:1fr; }
  .rr-klas-header, .tl-klas-header, .sj-kaart-hdr, .sj-periode-hdr, .taak-rij { align-items:flex-start; flex-direction:column; }
  .table, .table-layout, .lb-ovz-tabel, .tl-les-tabel, .tl-taken-tabel { display:block; overflow-x:auto; white-space:nowrap; }
}

/* ============================================================
   ROOSTER PAGINA — nette app-styling
   ------------------------------------------------------------
   Gericht op public/js/views/rooster.js classes rr-*
   ============================================================ */

.rr-wrapper {
  display: grid;
  gap: 18px;
  max-width: 1240px;
  margin: 0 auto;
}

.rr-wrapper .page-header {
  margin-bottom: 0;
}

.rr-legenda {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
  background: linear-gradient(135deg, var(--surface), var(--surface-warm));
}

.rr-legenda-blok {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--sh-1);
}

.rr-legenda-titel {
  font-family: var(--font-display);
  font-size: 14px;
  margin-bottom: 10px;
}

.rr-legenda-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 7px 7px 0;
  padding: 6px 9px;
  border-radius: var(--r-pill);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 12.5px;
  line-height: 1;
}

.rr-legenda-item strong {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-800);
  font-size: 12px;
}

.rr-snelknoppen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 0;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}

.rr-snelknoppen-label {
  margin-right: 4px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.rr-snelknop {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-warm);
  color: var(--ink-2);
  border-radius: var(--r-pill);
  padding: 8px 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.rr-snelknop:hover {
  background: var(--green-tint);
  border-color: var(--green-tint-2);
  color: var(--green-800);
  transform: translateY(-1px);
}

.rr-snelknop--leeg {
  margin-left: auto;
  border-style: dashed;
  background: var(--surface);
  color: var(--red-text);
}

.rr-klassen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  margin-bottom: 0;
}

.rr-klas-kaart {
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.rr-klas-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--surface), var(--surface-warm));
  border-bottom: 1px solid var(--line);
}

.rr-klas-info {
  display: block;
  min-width: 0;
}

.rr-klas-naam {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.rr-klas-sub {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 13px;
}

.rr-klas-acties {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.rr-klas-totaal {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--green-tint);
  color: var(--green-800);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.rr-klas-leeg-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.rr-klas-leeg-btn:hover {
  background: var(--red-dim);
  border-color: color-mix(in srgb, var(--red) 25%, var(--line));
  color: var(--red-text);
}

.rr-klas-chevron {
  color: var(--ink-4);
  transition: transform .18s ease;
}

.rr-klas-kaart.is-open .rr-klas-chevron {
  transform: rotate(180deg);
}

.rr-dag-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.rr-dag-summary--leeg {
  color: var(--ink-4);
  font-size: 13px;
}

.rr-dag-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--paper-edge);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 800;
}

.rr-dag-chip--vandaag {
  background: var(--green-tint);
  color: var(--green-800);
}

.rr-dag-lijst {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 8px 16px 16px;
}

.rr-dag-rij {
  display: grid;
  grid-template-columns: 46px 1fr minmax(92px, auto);
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.rr-dag-rij:last-child {
  border-bottom: 0;
}

.rr-dag-rij--vandaag {
  margin-inline: -8px;
  padding-inline: 8px;
  border-radius: var(--r-md);
  background: var(--surface-warm);
}

.rr-dag-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.rr-dag-naam {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--paper-edge);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.rr-dag-rij--vandaag .rr-dag-naam {
  background: var(--green-tint);
  color: var(--green-800);
}

.rr-vandaag-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}

.rr-uren {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.rr-pill {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.rr-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.rr-pill:hover {
  border-color: var(--green-tint-2);
  color: var(--green-800);
  transform: translateY(-1px);
}

.rr-pill--actief {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 8px 20px -12px rgba(91,95,233,.65);
}

.rr-dag-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  color: var(--ink-3);
  font-size: 12px;
  text-align: right;
}

.rr-dag-tijd {
  white-space: nowrap;
  color: var(--ink-2);
  font-weight: 700;
}

.rr-dag-uren {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--paper-edge);
  color: var(--ink-3);
  font-weight: 800;
}

.rr-dag-leeg {
  color: var(--ink-4);
}

.rr-preview-sectie {
  padding: 16px;
  background: linear-gradient(135deg, var(--surface), var(--surface-warm));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}

.rr-preview-titel {
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
}

.rr-preview-lijst {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.rr-preview-chip {
  display: grid;
  gap: 3px;
  min-width: 160px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
}

.rr-preview-naam {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.rr-preview-meta {
  color: var(--ink-3);
  font-size: 12.5px;
}

.rr-preview-leeg {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-3);
  font-size: 13px;
  padding: 2px 0;
}

@media (max-width: 900px) {
  .rr-legenda {
    grid-template-columns: 1fr;
  }

  .rr-klassen-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rr-wrapper {
    gap: 14px;
  }

  .rr-snelknoppen {
    align-items: stretch;
  }

  .rr-snelknoppen-label {
    width: 100%;
  }

  .rr-snelknop--leeg {
    margin-left: 0;
  }

  .rr-klas-header {
    grid-template-columns: 1fr;
  }

  .rr-klas-acties {
    justify-content: flex-start;
  }

  .rr-dag-rij {
    grid-template-columns: 42px 1fr;
  }

  .rr-dag-info {
    grid-column: 2;
    justify-content: flex-start;
    text-align: left;
  }

  .rr-pill {
    width: 32px;
    height: 32px;
  }
}

/* ============================================================
   Lesprofielen pagina — nette app-styling
   Gericht toegevoegd bovenop de rooster-fix.
   ============================================================ */

#view-lesprofielen .page-header {
  margin-bottom: 18px;
}


.lp-niveau-sectie {
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px 2px;
  margin-bottom: 10px;
}

.lp-niveau-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 0 10px;
}

.lp-niveau-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.lp-niveau-count {
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 700;
}

.lp-profielen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 0 0 20px;
}

.lp-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 178px;
  padding: 16px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
  border-radius: var(--r-md);
  background: var(--surface-warm);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.lp-kaart:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  border-top-color: var(--green);
  background: #fff;
  box-shadow: var(--sh-2);
}

.lp-kaart-naam {
  padding-left: 2px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
}

.lp-kaart-module {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin-top: 12px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--green-700);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.lp-kaart-meta {
  margin-top: 10px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
}

.lp-kaart-acties {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lp-kaart-acties .btn {
  min-height: 34px;
  border-radius: var(--r-xs);
}

.lp-detail-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-2);
}

.lp-detail-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(23px, 3vw, 34px);
  font-weight: 800;
  line-height: 1.05;
}

.lp-koppeling-rij {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-warm);
}

.lp-stap {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.lp-stap-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-warm);
}

.lp-stap-nr {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-800);
  font-size: 13px;
  font-weight: 900;
}

.lp-stap-naam {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.lp-stap-body {
  display: grid;
  gap: 10px;
  padding: 14px 15px 15px;
}

.lp-les-chip {
  display: inline-flex;
  align-items: center;
  margin: 0 6px 6px 0;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--green-tint);
  color: var(--green-800);
  font-size: 12px;
  font-weight: 800;
}

.lp-toets-balk {
  margin: 0;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(196,69,47,.18);
  background: var(--red-dim);
  color: var(--red-text);
  font-size: 12.5px;
  font-weight: 700;
}

.lp-koppel-ai-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-warm);
}

.lp-koppel-ai-sub {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
}

.lp-verdeling-wrap {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--sh-2);
}

.lp-verdeling-titel {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
}

.lp-verdeling-sub {
  margin: 4px 0 14px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
}

.lp-verdeling-scroll {
  overflow-x: auto;
  padding-bottom: 2px;
}

.lp-week-rij {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-warm);
}

.lp-week-pijlen {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-week-pijl {
  width: 32px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.lp-week-pijl:hover:not(:disabled) {
  border-color: var(--green);
  color: var(--green-700);
}

.lp-week-pijl:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.lp-week-body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.lp-week-label {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}

.lp-drop-zone {
  min-height: 48px;
  padding: 10px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: left;
}

.lp-drop-zone.praktijk {
  background: color-mix(in srgb, var(--green-tint) 45%, #fff);
}

.lp-drop-zone.drag-over,
.lp-drop-zone:hover {
  border-color: var(--green);
  background: var(--green-tint);
}

.lp-item-rij {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 7px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.lp-item-rij:last-child {
  margin-bottom: 0;
}

.lp-item-rij:hover {
  border-color: var(--line-strong);
}

.lp-item-handle {
  flex: 0 0 auto;
  color: var(--ink-4);
  cursor: grab;
  font-size: 16px;
  line-height: 1;
}

.lp-item-tekst {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

@media (max-width: 768px) {
  .lp-profielen-grid {
    grid-template-columns: 1fr;
    padding: 0 0 12px;
  }

  .lp-niveau-header {
    padding: 0 0 10px;
  }

  #view-lesprofielen .lm-sectie,
  #view-lesmodules .lm-sectie {
    padding: 14px 14px 10px;
  }

  #view-lesprofielen .lp-niveau-sectie {
    padding: 10px 10px 2px;
  }

  .lp-detail-header {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .lp-detail-header > div {
    flex-wrap: wrap;
  }

  .lp-koppeling-rij,
  .lp-koppel-ai-rij {
    flex-direction: column;
    align-items: stretch;
  }

  .lp-week-rij {
    grid-template-columns: 1fr;
  }

  .lp-week-pijlen {
    flex-direction: row;
  }
}

/* ============================================================
   LESMATERIALEN - nette bibliotheek styling
   ============================================================ */
#view-lesmaterialen {
  display: grid;
  gap: 18px;
}

#view-lesmaterialen .lm-sectie-header .btn,
#view-lesmaterialen .page-header .btn {
  white-space: nowrap;
}

#view-lesmaterialen .lm-tabs {
  margin: 0;
  padding: 4px 0 18px;
}

#view-lesmaterialen .lm-tab-bar {
  margin-top: 4px;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-warm);
  overflow-x: auto;
  scrollbar-width: thin;
}

#view-lesmaterialen .lm-tab-btn {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}

#view-lesmaterialen .lm-tab-btn:hover {
  background: color-mix(in srgb, var(--surface) 72%, var(--green-tint));
  color: var(--ink);
}

#view-lesmaterialen .lm-tab-btn--active {
  background: var(--surface);
  color: var(--green-800);
  box-shadow: var(--sh-1);
}

#view-lesmaterialen .lm-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  margin-left: 6px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 900;
}

#view-lesmaterialen .lm-tab-btn--active .lm-tab-count {
  background: var(--green-tint);
  border-color: color-mix(in srgb, var(--green) 22%, var(--line));
  color: var(--green-800);
}

#view-lesmaterialen .lm-module-select {
  display: none;
  width: 100%;
  margin: 8px 0 10px;
  min-height: 40px;
}

#view-lesmaterialen .lm-tab-paneel {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

#view-lesmaterialen .lm-tab-paneel > div[style*="padding:4px 0"],
#view-lesmaterialen .lm-tab-paneel > div[style*="padding: 4px 0"] {
  padding: 8px !important;
}

#view-lesmaterialen .lm-tab-paneel > div[style*="padding:10px 20px"] {
  padding: 12px 12px 4px !important;
}

#view-lesmaterialen .tw-mat-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-warm);
  box-shadow: none;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}

#view-lesmaterialen .tw-mat-rij:hover {
  border-color: color-mix(in srgb, var(--green) 22%, var(--line));
  background: color-mix(in srgb, var(--surface) 70%, var(--green-tint));
  transform: translateY(-1px);
}

#view-lesmaterialen .tw-mat-naam {
  display: grid;
  gap: 3px;
  min-width: 220px;
  flex: 1 1 auto;
  color: var(--ink);
  font-weight: 800;
}

#view-lesmaterialen .tw-mat-naam strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

#view-lesmaterialen .tw-mat-naam span {
  display: block;
  color: var(--ink-3) !important;
  font-size: 12px !important;
  font-weight: 650;
}

#view-lesmaterialen .tw-mat-rij > div:not(.tw-mat-naam) {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#view-lesmaterialen .tw-del-btn {
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--line));
  border-radius: var(--r-sm);
  background: var(--danger-tint);
  color: var(--danger);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

#view-lesmaterialen .tw-del-btn:hover {
  background: color-mix(in srgb, var(--danger-tint) 72%, white);
  border-color: var(--danger);
}

#view-lesmaterialen .upload-zone {
  border-radius: var(--r-lg);
  border: 2px dashed var(--line-strong);
  background: var(--surface-warm);
}

#view-lesmaterialen .upload-zone:hover {
  border-color: var(--green);
  background: var(--green-tint);
}

#view-lesmaterialen .vv-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 900;
}

#view-lesmaterialen .vv-badge-red {
  background: var(--danger-tint);
  color: var(--danger);
}

@media (max-width: 780px) {
  #view-lesmaterialen .lm-sectie {
    padding: 14px 14px 10px;
  }

  #view-lesmaterialen .lm-sectie-header {
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  #view-lesmaterialen .lm-tabs {
    padding: 4px 0 14px;
  }

  #view-lesmaterialen .lm-module-select {
    display: block;
  }

  #view-lesmaterialen .lm-tab-bar:not(.lm-subtab-bar) {
    display: none;
  }
  #view-lesmaterialen .lm-subtab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #view-lesmaterialen .tw-mat-rij {
    align-items: flex-start;
    flex-direction: column;
    margin: 7px;
  }

  #view-lesmaterialen .tw-mat-naam {
    min-width: 0;
    width: 100%;
  }

  #view-lesmaterialen .tw-mat-rij > div:not(.tw-mat-naam) {
    justify-content: flex-start;
    width: 100%;
  }
}


/* ============================================================
   LESMATERIALEN — verwijderknop netjes
   ------------------------------------------------------------
   Gericht op de verwijderknoppen binnen lesmaterialen, zonder
   de algemene dashboard/homepage-knoppen aan te passen.
   ============================================================ */
#view-lesmaterialen .tw-del-btn,
#view-lesmaterialen .tw-bron-del,
#view-lesmaterialen .tw-vraag-del,
#view-lesmaterialen .lm-blok-delete,
#view-lesmaterialen .lb-del-btn,
#view-lesmaterialen .btn-danger,
#view-lesmaterialen button[title*="Verwijder"],
#view-lesmaterialen button[aria-label*="Verwijder"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--danger) 26%, var(--line));
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--danger);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
}

#view-lesmaterialen .tw-del-btn:hover,
#view-lesmaterialen .tw-bron-del:hover,
#view-lesmaterialen .tw-vraag-del:hover,
#view-lesmaterialen .lm-blok-delete:hover,
#view-lesmaterialen .lb-del-btn:hover,
#view-lesmaterialen .btn-danger:hover,
#view-lesmaterialen button[title*="Verwijder"]:hover,
#view-lesmaterialen button[aria-label*="Verwijder"]:hover {
  background: var(--danger-tint);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  color: var(--red-text);
  box-shadow: var(--sh-2);
}

#view-lesmaterialen .tw-del-btn:active,
#view-lesmaterialen .tw-bron-del:active,
#view-lesmaterialen .tw-vraag-del:active,
#view-lesmaterialen .lm-blok-delete:active,
#view-lesmaterialen .lb-del-btn:active,
#view-lesmaterialen .btn-danger:active,
#view-lesmaterialen button[title*="Verwijder"]:active,
#view-lesmaterialen button[aria-label*="Verwijder"]:active {
  transform: translateY(1px);
  box-shadow: var(--sh-1);
}

#view-lesmaterialen .tw-del-btn svg,
#view-lesmaterialen .tw-bron-del svg,
#view-lesmaterialen .tw-vraag-del svg,
#view-lesmaterialen .lm-blok-delete svg,
#view-lesmaterialen .lb-del-btn svg,
#view-lesmaterialen .btn-danger svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Icon-only delete buttons blijven compact en rond genoeg */
#view-lesmaterialen .tw-bron-del,
#view-lesmaterialen .tw-vraag-del,
#view-lesmaterialen .lm-blok-delete,
#view-lesmaterialen .lb-del-btn {
  padding: 0;
  width: 34px;
}

/* Knoppenrij in materiaalregels netjes uitlijnen */
#view-lesmaterialen .tw-mat-rij > div:not(.tw-mat-naam),
#view-lesmaterialen .lm-les-knoppen,
#view-lesmaterialen .tw-vraag-acties,
#view-lesmaterialen .lb-wizard-actions {
  align-items: center;
  gap: 8px;
}

@media (max-width: 780px) {
  #view-lesmaterialen .tw-del-btn,
  #view-lesmaterialen .btn-danger {
    min-height: 36px;
    padding: 8px 12px;
  }
}

/* ============================================================
   LESMODULES — pagina polish
   ------------------------------------------------------------
   Gericht op #view-lesmodules. Maakt kaarten, moduleblokken,
   bewerkmodal, stappen, sublessen, praktijkopdrachten en
   verwijderknoppen rustiger en consistenter met dashboardstijl.
   ============================================================ */
#view-lesmodules .page-header {
  align-items: center;
  margin-bottom: 22px;
}


#view-lesmodules .lm-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  padding: 0 22px 6px;
}

#view-lesmodules .lm-kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 178px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--surface-warm);
  border: 1px solid var(--line);
  box-shadow: var(--sh-1);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

#view-lesmodules .lm-kaart:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: #fff;
  box-shadow: var(--sh-2);
}

#view-lesmodules .lm-kaart--profieldeel { border-top: 4px solid var(--sky); }
#view-lesmodules .lm-kaart--keuzedeel { border-top: 4px solid var(--green); }
#view-lesmodules .lm-kaart--theorie_module { border-top: 4px solid var(--plum); }
#view-lesmodules .lm-kaart--overig { border-top: 4px solid var(--marigold); }

#view-lesmodules .lm-kaart-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

#view-lesmodules .lm-type-pill {
  min-height: 22px;
  padding: 3px 9px;
  font-size: 11.5px;
  border: 0;
}
#view-lesmodules .lm-type-pill--profieldeel { background: var(--sky-tint); color: var(--blue-text); }
#view-lesmodules .lm-type-pill--keuzedeel { background: var(--green-tint); color: #059669; }
#view-lesmodules .lm-type-pill--theorie_module { background: #ede9fe; color: #7c3aed; }
#view-lesmodules .lm-type-pill--overig { background: var(--surface-warm); color: var(--ink-3); }

#view-lesmodules .lm-kaart-naam {
  padding-left: 2px;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

#view-lesmodules .lm-kaart-meta {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-3);
}

#view-lesmodules .lm-kaart .btn {
  min-height: 34px;
}

#view-lesmodules .lm-kaart-acties {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto !important;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lm-sectie {
  margin-bottom: 28px;
}

.lm-sectie-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.lm-sectie-h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
}

.lm-sectie-meta {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 600;
  margin-right: auto;
}

#view-lesprofielen .lm-sectie {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding: 18px 20px 14px;
}

#view-lesprofielen .lp-kaart {
  background: var(--surface);
}

#view-lesprofielen .lp-kaart:hover {
  background: #fff;
}

#view-lesmaterialen .lm-sectie {
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding: 18px 20px 14px;
}

#view-lesprofielen .lm-sectie-header,
#view-lesmaterialen .lm-sectie-header,
#view-lesmodules .lm-sectie-header {
  margin-bottom: 14px;
  padding-bottom: 12px;
}

#view-lesmodules .lm-sectie {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding: 18px 20px 14px;
}

#view-lesmodules .lm-grid {
  padding-left: 0;
  padding-right: 0;
}

#view-lesmodules .lm-blok-delete,
#view-lesmodules button[title*="Verwijder"],
#view-lesmodules button[aria-label*="Verwijder"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--danger) 24%, var(--line)) !important;
  border-radius: var(--r-pill) !important;
  background: var(--surface) !important;
  color: var(--danger) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: var(--sh-1) !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease !important;
}

#view-lesmodules .lm-blok-delete:hover,
#view-lesmodules button[title*="Verwijder"]:hover,
#view-lesmodules button[aria-label*="Verwijder"]:hover {
  background: var(--danger-tint) !important;
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line)) !important;
  color: var(--red-text) !important;
  box-shadow: var(--sh-2) !important;
}

#view-lesmodules .lm-blok-delete:active,
#view-lesmodules button[title*="Verwijder"]:active,
#view-lesmodules button[aria-label*="Verwijder"]:active {
  transform: translateY(1px) !important;
}

/* Lesmodule bewerken modal */
.modal-box #lm-upload-sectie {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-warm);
}

.modal-box #lm-upload-sectie > div[style*="grid-template-columns"] {
  gap: 14px !important;
}

.modal-box #lm-stappen-lijst {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface-warm) !important;
  padding: 12px !important;
  max-height: 62vh !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.modal-box .lm-hoofdstap {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface) !important;
  padding: 14px !important;
  margin-bottom: 13px !important;
  box-shadow: var(--sh-1);
}

.modal-box .lm-hoofdstap > div:first-child {
  margin-bottom: 12px !important;
}

.modal-box .lm-hoofdstap > div:first-child > span:first-child,
.modal-box .lm-bekijk-stap-nr {
  width: 30px !important;
  height: 30px !important;
  background: var(--green) !important;
  color: #fff !important;
  font-family: var(--font-display);
  font-size: 12px !important;
  font-weight: 850 !important;
  box-shadow: 0 8px 18px -12px rgba(91,95,233,.85);
}

.modal-box .lm-hoofdstap-input {
  min-height: 38px !important;
  padding: 8px 11px !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface-warm) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.modal-box .lm-hoofdstap > div[style*="grid-template-columns:1fr 1fr 1fr"] {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding-left: 38px !important;
  margin-bottom: 10px !important;
}

.modal-box .lm-hoofdstap > div[style*="background:var(--red-dim)"] {
  margin-left: 38px !important;
  padding: 12px !important;
  border: 1px solid color-mix(in srgb, var(--danger) 18%, var(--line)) !important;
  border-left: 4px solid var(--danger) !important;
  border-radius: var(--r-md) !important;
  background: color-mix(in srgb, var(--red-dim) 78%, white) !important;
}

.modal-box .lm-hoofdstap > div[style*="Leerlingomgeving"] {
  padding-left: 38px !important;
}

.modal-box .lm-lessen,
.modal-box .lm-praktijk-sectie {
  padding-left: 38px !important;
}

.modal-box .lm-les-rij {
  padding: 9px 10px !important;
  gap: 8px !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface-warm) !important;
  border: 1px solid var(--line) !important;
}

.modal-box .lm-les-input,
.modal-box .lm-les-url,
.modal-box .lm-les-uren,
.modal-box .lm-taak-input,
.modal-box .lm-stap-codes,
.modal-box .lm-liveles-select,
.modal-box .lm-sles-select,
.modal-box .lm-toets-id,
.modal-box .lm-toets-url,
.modal-box .lm-po-naam,
.modal-box .lm-po-omschrijving,
.modal-box .lm-po-uren,
.modal-box .lm-po-theorie,
.modal-box .lm-po-link,
.modal-box .lm-po-wbid,
.modal-box .lm-po-codes,
.modal-box .lm-tm-uren,
.modal-box .lm-tm-uren-type,
.modal-box .lm-tm-uren-theorie,
.modal-box .lm-tm-uren-praktijk {
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface-warm) !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
  box-shadow: none !important;
}

.modal-box .lm-les-input:focus,
.modal-box .lm-les-url:focus,
.modal-box .lm-les-uren:focus,
.modal-box .lm-taak-input:focus,
.modal-box .lm-stap-codes:focus,
.modal-box .lm-liveles-select:focus,
.modal-box .lm-sles-select:focus,
.modal-box .lm-toets-id:focus,
.modal-box .lm-toets-url:focus,
.modal-box .lm-po-naam:focus,
.modal-box .lm-po-omschrijving:focus,
.modal-box .lm-po-uren:focus,
.modal-box .lm-po-theorie:focus,
.modal-box .lm-po-link:focus,
.modal-box .lm-po-wbid:focus,
.modal-box .lm-po-codes:focus,
.modal-box .lm-tm-uren:focus,
.modal-box .lm-tm-uren-type:focus,
.modal-box .lm-tm-uren-theorie:focus,
.modal-box .lm-tm-uren-praktijk:focus {
  border-color: var(--green) !important;
  background: #fff !important;
  box-shadow: var(--focus-ring) !important;
}

.modal-box .lm-les-uren,
.modal-box .lm-po-uren,
.modal-box .lm-tm-uren,
.modal-box .lm-tm-uren-theorie,
.modal-box .lm-tm-uren-praktijk {
  min-width: 58px;
}

.modal-box .lm-praktijk-sectie {
  margin-top: 12px;
  padding-top: 12px !important;
  border-top: 1px dashed var(--line-strong);
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.modal-box .lm-praktijk-lijst {
  gap: 9px;
}

.modal-box .lm-praktijk-rij {
  align-items: flex-start !important;
  padding: 12px !important;
  border: 1px solid color-mix(in srgb, var(--amber) 20%, var(--line)) !important;
  border-radius: var(--r-md) !important;
  background: color-mix(in srgb, var(--amber-dim) 42%, white) !important;
}

.modal-box .lm-praktijk-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  border-radius: var(--r-pill);
}

.modal-box .lm-gedeelde-wrap {
  border-radius: var(--r-lg) !important;
  background: var(--surface-warm) !important;
  border: 1px solid var(--line) !important;
  padding: 14px !important;
}

.modal-box .lm-gedeelde-rij {
  border-radius: var(--r-md) !important;
  background: var(--surface) !important;
}

.modal-box .lm-tm-stap {
  grid-template-columns: auto minmax(180px, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border: 1px solid color-mix(in srgb, var(--plum) 26%, var(--line)) !important;
  border-radius: var(--r-md) !important;
  background: var(--plum-tint) !important;
}

.modal-box .lm-voeg-les-btn,
.modal-box .lm-voeg-tm-btn,
.modal-box .lm-bekijk-les {
  border-style: solid;
}

/* Bekijkmodal */
.modal-box .lm-bekijk-stap {
  padding: 14px !important;
  border-radius: var(--r-lg) !important;
  background: var(--surface) !important;
  box-shadow: var(--sh-1);
}

.modal-box .lm-bekijk-stap-header {
  flex-wrap: wrap;
  align-items: center;
}

.modal-box .lm-bekijk-stap-body {
  display: grid;
  gap: 8px;
  padding-left: 38px;
}

.modal-box .lm-bekijk-les {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border-style: solid;
}

.modal-box .lp-toets-balk {
  margin: 10px 0 10px 38px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--danger) 18%, var(--line));
  border-radius: var(--r-sm);
  background: var(--red-dim);
  color: var(--red-text);
  font-size: 12.5px;
  font-weight: 750;
}

@media (max-width: 900px) {
  #view-lesmodules .lm-grid {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .modal-box .lm-hoofdstap > div[style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .modal-box .lm-hoofdstap > div[style*="background:var(--red-dim)"] > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  .modal-box .lm-hoofdstap > div[style*="grid-template-columns:1fr 1fr 1fr"],
  .modal-box .lm-hoofdstap > div[style*="background:var(--red-dim)"],
  .modal-box .lm-hoofdstap > div[style*="Leerlingomgeving"],
  .modal-box .lm-lessen,
  .modal-box .lm-praktijk-sectie,
  .modal-box .lm-bekijk-stap-body,
  .modal-box .lp-toets-balk {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 620px) {
  #view-lesmodules .page-header {
    align-items: stretch;
  }

  #view-lesmodules .page-header .btn {
    width: 100%;
  }

  #view-lesmodules .lm-kaart-acties {
    flex-direction: column;
  }

  #view-lesmodules .lm-kaart-acties .btn {
    width: 100%;
  }

  .modal-box #lm-stappen-lijst {
    padding: 8px !important;
  }

  .modal-box .lm-hoofdstap {
    padding: 11px !important;
  }

  .modal-box .lm-les-rij,
  .modal-box .lm-praktijk-rij,
  .modal-box .lm-tm-stap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .modal-box .lm-les-uren,
  .modal-box .lm-po-uren,
  .modal-box .lm-tm-uren,
  .modal-box .lm-tm-uren-theorie,
  .modal-box .lm-tm-uren-praktijk {
    width: 100% !important;
  }
}

/* ============================================================
   KLASSEN — gerichte styling-polish
   ------------------------------------------------------------
   Sluit aan op de warme dashboardstijl. Gericht op classes uit
   public/js/views/klassen.js.
   ============================================================ */

/* hoofdgrid */
.klas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(315px, 1fr));
  gap: 18px;
  align-items: stretch;
}

/* kaart */
.klas-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 230px;
  background: linear-gradient(180deg, var(--surface) 0%, #fff 62%, var(--surface-warm) 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--sh-2);
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.klas-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--green);
  opacity: .9;
}

.klas-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-3);
}

.klas-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-left: 2px;
}

.klas-naam {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--ink);
}

.klas-meta-row {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.klas-docent-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.klas-docent-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 30px;
  padding: 4px 10px 4px 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  box-shadow: var(--sh-1);
}

.klas-docent-avatar,
.docenten-avatar {
  width: 23px;
  height: 23px;
  min-width: 23px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.klas-card .badge {
  margin-right: 5px;
}

.klas-progress {
  height: 8px;
  background: var(--paper-edge);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin-top: auto;
  box-shadow: inset 0 1px 2px rgba(34,30,24,.05);
}

.klas-progress-fill {
  height: 100%;
  min-width: 0;
  background: linear-gradient(90deg, var(--green), var(--green-700));
  border-radius: inherit;
}

.klas-progress-label {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: -6px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 800;
}

.klas-card .btn[onclick*="jaarplanning"] {
  margin-top: 2px !important;
  width: 100%;
  justify-content: center;
  background: var(--surface);
  border-color: var(--line);
}

.klas-card .btn[onclick*="jaarplanning"]:hover {
  background: var(--green-tint);
  border-color: var(--green-tint-2);
  color: var(--green-800);
}

/* actieknoppen rechtsboven */
.klas-card-top > div:last-child .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--r-xs);
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(4px);
}

.klas-card-top > div:last-child .icon-btn:hover {
  background: var(--surface-warm);
}

.klas-card-top > div:last-child .icon-btn[style*="--red"],
.klas-card-top > div:last-child .icon-btn[style*="red"] {
  color: var(--danger) !important;
}

.klas-card-top > div:last-child .icon-btn[style*="--red"]:hover,
.klas-card-top > div:last-child .icon-btn[style*="red"]:hover {
  background: var(--danger-tint);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
}

/* modalvelden specifiek Klassen */
#klas-naam,
#klas-schooljaar,
#klas-leerjaar,
#klas-niveau,
#klas-vak,
#klas-uren,
#klas-aantal-leerlingen {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-warm);
  color: var(--ink);
  font: 600 14px/1.45 var(--font-ui);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#klas-naam:focus,
#klas-schooljaar:focus,
#klas-leerjaar:focus,
#klas-niveau:focus,
#klas-vak:focus,
#klas-uren:focus,
#klas-aantal-leerlingen:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: var(--focus-ring);
}

/* docenten picker */
#docenten-picker {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  max-height: 240px !important;
  overflow-y: auto;
  padding: 8px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  background: var(--surface-warm);
}

.docenten-picker-rij {
  display: grid !important;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 11px !important;
  margin: 0 !important;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.docenten-picker-rij:hover {
  background: #fff !important;
  border-color: var(--line-strong);
  box-shadow: var(--sh-1);
}

.docenten-picker-rij:has(input:checked) {
  background: var(--green-tint) !important;
  border-color: var(--green-tint-2);
}

#docenten-selected-count {
  margin-top: 8px !important;
  color: var(--ink-3) !important;
  font-size: 12px !important;
  font-weight: 800;
}

/* roulatieblok */
.klas-roulatie-blok {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-warm);
  box-shadow: var(--sh-1);
}

.klas-roulatie-blok label {
  align-items: flex-start !important;
}

#roulatie-opties {
  border-top: 1px solid var(--line) !important;
}

#roulatie-blokken-lijst > div {
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
}

#roulatie-blokken-lijst select {
  min-height: 36px;
  padding: 7px 10px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xs) !important;
  background: var(--surface-warm) !important;
  color: var(--ink);
  font: 700 13px/1.3 var(--font-ui);
}

#roulatie-blokken-lijst button {
  width: 30px;
  height: 30px;
  border-radius: var(--r-xs) !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  color: var(--danger) !important;
  display: inline-grid;
  place-items: center;
}

#roulatie-blokken-lijst button:hover {
  background: var(--danger-tint) !important;
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line)) !important;
}

.klas-roulatie-preview {
  margin-top: 12px !important;
  padding: 11px 13px;
  border: 1px solid var(--green-tint-2);
  border-radius: var(--r-sm);
  background: var(--green-tint);
  color: var(--green-800);
  font-size: 13px;
  font-weight: 800;
}

/* responsief */
@media (max-width: 700px) {
  .klas-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .klas-card {
    padding: 16px;
    min-height: 0;
  }

  .klas-card-top {
    gap: 10px;
  }

  .klas-naam {
    font-size: 18px;
  }

  .docenten-picker-rij {
    grid-template-columns: auto auto 1fr;
  }

  #roulatie-blokken-lijst > div {
    grid-template-columns: 20px 1fr !important;
  }

  #roulatie-blokken-lijst > div > span:last-of-type,
  #roulatie-blokken-lijst > div > button {
    grid-column: 2;
  }
}

/* ============================================================
   GEBRUIKERS + SCHOOLJAREN — polish
   ------------------------------------------------------------
   Gerichte afwerking voor de pagina's Gebruikers en Schooljaren.
   Sluit aan op dezelfde warme card/dashboard-stijl.
   ============================================================ */

/* Gebruikers — zoek/filterbalk */
.gu-filter {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 12px;
  box-shadow: var(--sh-2);
  align-items: center;
}

.gu-zoek-wrap {
  position: relative;
  flex: 1 1 320px;
  max-width: 520px;
}

.gu-zoek-wrap svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-4);
  pointer-events: none;
}

.gu-zoek-wrap input {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px 10px 38px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  background: var(--surface-warm) !important;
  color: var(--ink);
  font: 600 14px/1.4 var(--font-ui);
  outline: none;
  box-shadow: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.gu-zoek-wrap input:focus {
  background: #fff !important;
  border-color: var(--green) !important;
  box-shadow: var(--focus-ring);
}

.gu-tabs {
  margin-left: auto;
  flex: 0 1 auto;
}

.gu-tab {
  min-height: 36px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.gu-tab:hover {
  color: var(--ink);
  background: rgba(255,255,255,.55);
}

.gu-tab.active {
  background: var(--green) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -10px rgba(91,95,233,.85) !important;
}

/* Gebruikers — statistieken */
.gu-stats {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.gu-stat {
  position: relative;
  overflow: hidden;
  min-height: 112px;
}

.gu-stat::after {
  content: '';
  position: absolute;
  right: -24px;
  top: -24px;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--green-tint);
  opacity: .42;
}

.gu-stat--groen::after { background: var(--green-tint); }
.gu-stat--amber::after { background: var(--marigold-tint); }
.gu-stat--blauw::after { background: var(--sky-tint); }
.gu-stat--paars::after { background: var(--plum-tint); }

.gu-stat-num,
.gu-stat-label {
  position: relative;
  z-index: 1;
}

/* Gebruikers — kaarten */
.gu-list {
  gap: 14px;
}

.gu-kaart {
  min-height: 92px;
  border-radius: var(--r-lg);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.gu-kaart:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-3);
  background: #fff;
}

.gu-avatar {
  width: 48px;
  height: 48px;
  font-family: var(--font-display);
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 18px -14px rgba(34,30,24,.6);
}

.gu-body {
  overflow: hidden;
}

.gu-naam-rij {
  row-gap: 6px;
}

.gu-naam {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -.015em;
}

.gu-email {
  word-break: break-word;
}

.gu-badge--actief {
  background: var(--green-tint);
  color: var(--green-800);
}

.gu-vak {
  border: 1px solid var(--line);
  background: var(--surface-warm);
}

.gu-acties {
  align-self: center;
}

.gu-btn {
  width: 38px;
  height: 38px;
  box-shadow: var(--sh-1);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease, box-shadow .15s ease;
}

.gu-btn:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-2);
}

.gu-btn svg {
  width: 17px;
  height: 17px;
}

.gu-btn--danger:hover {
  background: var(--danger-tint) !important;
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line)) !important;
  color: var(--danger) !important;
}

/* Gebruikers — modal vakkenselectie */
.vak-select-search {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.vak-select-search input {
  width: 100%;
  min-height: 42px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-warm);
  color: var(--ink);
  font: 600 14px/1.4 var(--font-ui);
  outline: none;
}

.vak-select-search input:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: var(--focus-ring);
}

.vak-select-grid {
  background: var(--surface-warm);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px;
  max-height: 280px;
}

.vak-option {
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.vak-option:hover {
  background: #fff;
  border-color: var(--line-strong);
}

.vak-option.is-selected {
  background: var(--green-tint) !important;
  border-color: var(--green-tint-2) !important;
  box-shadow: inset 0 0 0 1px rgba(91,95,233,.08);
}

.vak-option input {
  width: 17px;
  height: 17px;
  accent-color: var(--green);
}

.vak-option-text {
  display: grid;
  gap: 1px;
}

.vak-option-text strong {
  color: var(--ink);
  font-size: 13.5px;
}

.vak-option-text span {
  color: var(--ink-3);
  font-size: 12px;
}

/* Schooljaren — kaartoverzicht */
.sj-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.sj-grid > .card {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.sj-grid > .card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-3);
}

.sj-kaart-inhoud {
  padding: 18px;
  min-height: 134px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
}

.sj-kaart-hdr {
  align-items: flex-start;
}

.sj-kaart-naam {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -.02em;
}

.sj-kaart-acties {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.sj-kaart-acties .btn {
  min-height: 38px;
}

.sj-kaart-acties .icon-btn {
  width: 38px;
  height: 38px;
  color: var(--danger) !important;
}

.sj-kaart-acties .icon-btn:hover {
  background: var(--danger-tint);
  border-color: color-mix(in srgb, var(--danger) 28%, var(--line));
}

/* Schooljaren — weekoverzicht */
#weken-overzicht {
  margin-top: 20px;
}

#weken-overzicht .card {
  overflow: hidden;
}

.sj-periode-hdr {
  padding: 15px 18px;
  background: var(--surface-warm);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.015em;
}

#weken-overzicht .data-table th {
  background: #fff;
}

#weken-overzicht .data-table td {
  height: 52px;
}

.week-thema-cel,
.sj-thema-cel {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.25;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.sj-thema-cel.gevuld {
  background: var(--green-tint);
  border-color: var(--green-tint-2);
  color: var(--green-800);
}

.sj-thema-cel.leeg {
  background: var(--surface-warm);
  color: var(--ink-4);
  border-style: dashed;
}

.week-thema-cel:hover,
.sj-thema-cel:hover {
  background: #fff;
  border-color: var(--green);
  color: var(--green-800);
  box-shadow: var(--sh-1);
}

.sj-thema-input {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--green) !important;
  border-radius: var(--r-sm) !important;
  background: #fff !important;
  color: var(--ink);
  font: 700 13px/1.3 var(--font-ui);
  box-shadow: var(--focus-ring);
}

#weken-overzicht .week-pill {
  min-width: 40px;
  text-align: center;
}

/* Mobiel */
@media (max-width: 760px) {
  .gu-filter {
    align-items: stretch;
  }

  .gu-zoek-wrap {
    max-width: none;
    flex-basis: 100%;
  }

  .gu-tabs {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .gu-kaart {
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .gu-acties {
    grid-column: 1 / -1;
    justify-content: flex-end;
    width: 100%;
    padding-top: 4px;
  }

  .sj-kaart-acties {
    grid-template-columns: 1fr 38px;
  }

  #weken-overzicht .card {
    overflow-x: auto;
  }

  #weken-overzicht .data-table {
    min-width: 620px;
  }
}

/* ============================================================
   LESMATERIALEN — mobiele verfijning
   ------------------------------------------------------------
   Deze regels horen bewust in styles.css en niet in
   mobile-dashboard.css. Ze verbeteren alleen de mobiele weergave
   van lesmaterialen/leerlingmateriaal en laten desktop intact.
   ============================================================ */
@media (max-width: 768px) {
  .vv-wrap,
  .vv-cards,
  .vv-sec-grid,
  .lm-grid,
  .lm-lessen,
  .lm-praktijk-lijst {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .vv-card,
  .lm-kaart,
  .lm-praktijk-sectie,
  .lm-gedeelde-wrap,
  .lm-bekijk-praktijk-blok,
  .sl-woord-rij,
  .lm-bekijk-stap {
    border-radius: var(--r-md);
    padding: 14px;
  }

  .vv-card-top,
  .lm-kaart-acties,
  .lm-les-rij,
  .lm-praktijk-rij,
  .lm-gedeelde-rij,
  .lm-bekijk-stap-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .vv-row {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    padding: 12px 0;
  }

  .vv-row:first-child {
    padding-top: 0;
  }

  .vv-name-cell,
  .vv-cell {
    width: 100%;
    min-width: 0;
  }

  .vv-score {
    font-size: 20px;
  }

  .vv-pill,
  .vv-pill-done,
  .vv-pill-bezig,
  .vv-pill-empty,
  .vv-badge,
  .vv-badge-red {
    width: fit-content;
    max-width: 100%;
  }

  .vv-progress,
  .vv-bar {
    width: 100%;
  }

  .vv-reset,
  .vv-reset-touch,
  .lm-bekijk-les,
  .lm-voeg-les-btn,
  .lm-voeg-tm-btn {
    width: 100%;
    justify-content: center;
    min-height: 40px;
  }

  .lm-les-knoppen {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    justify-content: stretch;
  }

  .lm-les-knoppen .btn,
  .lm-les-knoppen button {
    width: 100%;
    justify-content: center;
  }

  .lm-les-uren,
  .lm-po-uren,
  .lm-praktijk-count,
  .lm-kaart-type,
  .lm-toets-bestand,
  .lm-po-bestand,
  .lm-gd-bestand {
    display: block;
    margin-top: 4px;
    word-break: break-word;
  }

  .lm-stap-codes,
  .lm-gd-codes,
  .lm-po-codes {
    gap: 6px;
  }

  .lm-type-pill,
  .vv-pill,
  .vv-badge,
  .vv-badge-red {
    line-height: 1.25;
  }

  .vv-avatar-lg {
    width: 50px;
    height: 50px;
  }

  .vv-verify-wrap {
    padding: 26px 14px;
  }

  .vv-code-input {
    width: 100%;
  }

  .dn-grid-table,
  .vv-tbl {
    min-width: 560px;
  }

  .dn-grid-table-wrap,
  .vv-table-wrap,
  .vv-scroll,
  .lm-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .vv-card,
  .lm-kaart,
  .lm-praktijk-sectie,
  .lm-gedeelde-wrap,
  .lm-bekijk-praktijk-blok,
  .sl-woord-rij,
  .lm-bekijk-stap {
    padding: 12px;
  }

  .vv-name,
  .lm-kaart-naam {
    font-size: 15px;
  }

  .vv-sub,
  .lm-kaart-meta,
  .lm-bekijk-stap-body {
    font-size: 12.5px;
  }

  .vv-sec-grid {
    gap: 10px;
  }

  .vv-sec-item {
    padding: 11px;
  }
}



/* ============================================================
   Dashboard basisstijl schoon
   Desktop styling in dit bestand. Mobiele overrides staan in
   mobile-dashboard.css. Oude V4 t/m V12 overrides zijn verwijderd.
   ============================================================ */
.teacher-dashboard{
  max-width:1600px;
  margin:0 auto;
  padding:28px 0 56px;
  color:var(--ink);
}

.td-hero{
  position:relative;
  overflow:hidden;
  background:#111A3A;
  border-radius:22px;
  padding:26px 36px 48px;
  box-shadow:0 22px 48px -34px rgba(13,31,60,.65);
  margin-bottom:0;
}
.td-hero-dots{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);background-size:22px 22px;}
.td-hero-blob{position:absolute;border-radius:50%;filter:blur(18px);pointer-events:none;}
.td-hero-blob.a{width:200px;height:200px;background:rgba(227,165,46,.24);right:-50px;top:-80px;}
.td-hero-blob.b{width:160px;height:160px;background:rgba(226,107,69,.22);right:130px;bottom:-80px;}

.td-topbar{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin:0;}
.td-topbar h1{margin:0 0 6px;color:#fff;font-size:26px;line-height:1.08;font-weight:850;letter-spacing:-.04em;}
.td-topbar p{margin:0;color:rgba(255,255,255,.78);font-size:14px;line-height:1.45;}
.td-top-actions{display:flex;gap:10px;align-items:center;flex-shrink:0;}
.td-btn{height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;padding:0 15px;font-weight:750;font-size:13px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-shadow:0 1px 2px rgba(34,30,24,.05);font-family:inherit;white-space:nowrap;}
.td-btn svg{width:16px;height:16px;}
.td-btn-primary{background:#5B5FEF!important;color:#fff!important;border-color:#5B5FEF!important;box-shadow:0 4px 14px rgba(91,95,239,.28)!important;}
.td-btn-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.22);}
.td-btn-light:hover{background:rgba(255,255,255,.2);}

.td-layout{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:20px;align-items:start;}
.td-main{min-width:0;}
.td-side{display:flex;flex-direction:column;gap:12px;margin-top:46px;}

.td-stats{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:-28px 0 24px;}
.td-stat{height:96px;min-height:96px;background:#fff;border:1px solid #E3DDCF;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px;box-shadow:0 2px 7px rgba(34,30,24,.07),0 16px 32px -24px rgba(34,30,24,.40);}
.td-stat-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.td-stat-icon svg{width:14px;height:14px;}
.td-stat-groen .td-stat-icon{background:var(--green-tint);color:var(--green-700);}
.td-stat-sky .td-stat-icon{background:var(--sky-tint);color:var(--sky);}
.td-stat-coral .td-stat-icon{background:var(--coral-tint);color:var(--coral);}
.td-stat-marigold .td-stat-icon{background:var(--marigold-tint);color:var(--marigold);}
.td-stat-label{font-size:11px;line-height:1.16;margin:0 0 3px;color:#7E766A;font-weight:700;}
.td-stat-value{font-size:22px;line-height:1;font-weight:900;color:#211F1B;letter-spacing:-.04em;white-space:nowrap;}

.td-section-head{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid #E3DDCF;border-radius:22px 22px 0 0;padding:18px 24px 14px;margin:0;box-shadow:none;}
.td-section-head h2{font-size:22px;line-height:1.1;margin:0;font-weight:850;color:#211F1B;letter-spacing:-.03em;}
.td-dag-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.td-dag-nav-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;border:1px solid #E3DDCF;background:#fff;font-size:18px;cursor:pointer;color:#211F1B;flex-shrink:0;}
.td-dag-nav-btn:hover{background:var(--surface-warm);}
.td-dag-nav-vandaag{height:36px;padding:0 12px;border-radius:9px;border:1.5px solid var(--sky);background:var(--sky-tint);color:var(--sky);font-size:12px;font-weight:750;cursor:pointer;}
.td-view-select{display:flex;align-items:center;gap:8px;font-size:13px;color:#7D7568;}
.td-view-select select{height:40px;border-radius:10px;border:1px solid #E3DDCF;background:#fff;padding:0 14px;font-weight:700;color:#211F1B;}

.td-timeline{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid #E3DDCF;border-top:0;border-radius:0 0 22px 22px;padding:20px 22px 24px;box-shadow:var(--sh-2);}
.td-lesson{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr) auto;column-gap:12px;row-gap:9px;align-items:start;text-align:left;background:#fff;border:1px solid #E3DDCF;border-radius:18px;padding:18px 22px;box-shadow:none;overflow:hidden;}
.td-lesson.is-done{opacity:.65;border-left:3px solid var(--sidebar-accent);}
.td-lesson-toprow{display:contents;}
.td-time{grid-column:1;grid-row:1 / span 7;display:block;width:62px;min-width:62px;padding:0;text-align:left;color:#211F1B;}
.td-time strong{display:block;font-size:17px;line-height:1.05;font-weight:850;color:#211F1B;}
.td-time span{display:block;margin-top:7px;font-size:13px;line-height:1.1;color:#8A8276;}
.td-time em,.td-time small{display:block;width:fit-content;margin-top:7px;padding:3px 7px;border-radius:999px;background:#F6F1E7;color:#5F584D;font-size:11px;line-height:1;font-weight:800;font-style:normal;}
.td-class{grid-column:2;grid-row:1;width:34px;height:34px;border-radius:999px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:850;align-self:center;justify-self:start;flex-shrink:0;box-shadow:0 2px 6px rgba(34,30,24,.18);}
.td-status{grid-column:3;grid-row:1;align-self:center;justify-self:end;display:inline-flex;align-items:center;white-space:nowrap;border-radius:10px;font-weight:800;font-size:12px;line-height:1;padding:8px 12px;background:#F6F1E7;color:#5F584D;}
.td-status--nu{background:#FBE2D8;color:#D9643F;}
.td-status--niet-afgerond{background:#F6F1E7;color:#5F584D;}
.td-status--afgerond{background:#ECEAF8;color:#817FD0;}
.td-status--deels{background:var(--marigold-tint);color:var(--amber-text);}
.td-status--vervallen{background:var(--red-dim);color:var(--red-text);}
.td-lesson-titel,.td-lesson h3{grid-column:2 / 4;grid-row:2;margin:0;text-align:left;max-width:none;font-size:18px;line-height:1.22;font-weight:850;color:#211F1B;letter-spacing:-.02em;}
.td-colorbar,.td-combined-colorbar{grid-column:2 / 4;grid-row:3;width:100%;height:3px;border-radius:999px;margin:0 0 5px;display:block;}
.td-acties-hoofd{grid-column:1 / 4;grid-row:4;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin:0;}
.td-lesson-detail{grid-column:1 / 4;grid-row:5;display:block!important;margin:0;padding-top:10px;border-top:1px solid #ECE6DA;}
.td-lesson-body,.td-meta,.td-acties-extra,.td-module-praktijk,.td-note{min-width:0;text-align:left;max-width:none;}
.td-meta{font-size:13px;line-height:1.35;color:#5F584D;margin:2px 0 8px;display:flex;gap:7px;flex-wrap:wrap;align-items:center;}
.td-lesson p{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:#FCFAF5;border:1px solid #E3DDCF;color:#3F3A32;font-size:13px;line-height:1.4;}
.td-lesson button,.td-lesson a[onclick],.td-acties-hoofd button,.td-acties-hoofd a,.td-acties-extra button,.td-acties-extra a{height:36px;min-height:36px;border:1px solid #E3DDCF;background:#fff;border-radius:8px;color:#211F1B;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:750;cursor:pointer;font-family:inherit;padding:0 13px;box-shadow:0 1px 2px rgba(34,30,24,.04);white-space:nowrap;}
.td-lesson button:hover,.td-lesson a[onclick]:hover{background:#FCFAF5;border-color:#D8D0C2;}
.td-acties-extra{display:flex;flex-wrap:wrap;gap:8px;margin-top:0;}
.td-detail-toggle{display:none!important;}
.td-finish--todo{background:#5B5FEF!important;color:#fff!important;border-color:#5B5FEF!important;box-shadow:0 1px 4px rgba(91,95,239,.25)!important;}
.td-finish--todo:hover{background:#4F46E5!important;border-color:#4F46E5!important;}
.td-finish--heropenen{border-color:#D8D0C2!important;color:#7D7568!important;background:#FCFAF5!important;}
.td-finish--deels{background:var(--amber)!important;color:#fff!important;border-color:var(--amber)!important;}
.td-lesbrief-ready{border-color:var(--sky-tint)!important;color:var(--blue-text)!important;background:var(--sky-tint)!important;}
.td-opmerking--heeft{border-color:var(--marigold-tint)!important;color:var(--amber-text)!important;background:var(--marigold-tint)!important;}
.td-uren--behandeld{border-color:var(--green-tint-2)!important;color:var(--green-800)!important;background:var(--green-tint)!important;}
.td-uren--deels{border-color:var(--marigold)!important;color:var(--amber-text)!important;background:var(--marigold-tint)!important;}
.td-uren--vervallen{border-color:var(--red-dim)!important;color:var(--red-text)!important;background:var(--red-dim)!important;}
.td-note{margin-top:10px;border-radius:8px;background:#FCFAF5;border:1px solid #E3DDCF;padding:10px;font-size:13px;color:#5F584D;}
.td-focus{margin-top:6px;margin-bottom:8px;border-radius:8px;background:var(--paper);border:1px solid var(--line);padding:8px 12px;font-size:13px;color:var(--ink-2);}
.td-focus strong{color:var(--ink);}

.td-module-praktijk{margin-top:12px;border-top:1px solid #ECE6DA;padding-top:10px;font-size:13px;}
.td-module-stap-naam{font-size:12px;color:#5F584D;margin-bottom:6px;}
.td-module-rij{font-size:12.5px;color:#5F584D;line-height:1.6;margin-bottom:4px;}
.td-module-link{color:var(--blue-text);font-weight:650;text-decoration:none;}
.td-module-link:hover{text-decoration:underline;}
.td-module-downloads{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.td-module-dl{font-size:12px;font-weight:650;border-radius:8px;padding:6px 10px;text-decoration:none;}
.td-module-dl--wb{color:var(--green-700);background:var(--green-tint);border:1px solid var(--green-tint-2);}
.td-module-dl--toets{color:var(--red-text);background:var(--red-dim);border:1px solid var(--red-dim);}

.td-lesson--combined{border-color:var(--green-tint-2);}
.td-class--sm{width:26px;height:26px;font-size:9px;}
.td-combined-klas-row{grid-column:2 / 4;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 0;border-top:1px solid #F3EEE5;}
.td-combined-klas-row:first-of-type{border-top:none;padding-top:4px;}
.td-acties-hoofd--inline{display:flex;gap:6px;flex-wrap:nowrap;}
.td-combined-detail{display:flex!important;flex-wrap:wrap;gap:6px;margin-top:6px;}

.td-pause{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:center;padding:0 22px;}
.td-pause-card{height:48px;border:1px solid #E3DDCF;background:#fff;border-radius:10px;padding:0 14px;display:flex;align-items:center;gap:8px;color:#5F584D;box-shadow:0 1px 3px rgba(34,30,24,.04);}
.td-pause-card span{color:#7D7568;font-size:13px;}

.td-widget{background:#fff;border:1px solid #E3DDCF;border-radius:18px;padding:16px 18px;box-shadow:0 2px 8px rgba(34,30,24,.06),0 16px 32px -24px rgba(34,30,24,.30);}
.td-widget-title{font-size:15px;line-height:1.2;font-weight:800;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;color:#211F1B;}
.td-widget-title span{min-width:20px;height:20px;border-radius:999px;background:#F6F1E7;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#2B2721;}
.td-widget-title .td-ok{background:var(--green-tint);color:var(--green-800);}
.td-task-list,.td-need-list{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;}
.td-task{display:grid;grid-template-columns:16px 1fr auto;gap:8px;align-items:center;font-size:12px;color:#211F1B;}
.td-task-check{width:14px;height:14px;border-radius:999px;border:1px solid #D8D0C2;background:#fff;cursor:pointer;padding:0;}
.td-task em{font-style:normal;color:var(--red);font-size:11px;}
.td-empty-small{color:#7D7568;font-size:13px;text-align:center;padding:14px 0;}
.td-link{border:0;background:transparent;color:#5B5FEF;font-weight:750;padding:0;cursor:pointer;font-size:13px;font-family:inherit;}

.td-need-group{border:1px solid #E3DDCF;border-radius:8px;overflow:hidden;}
.td-need-klas{width:100%;display:flex;align-items:center;gap:7px;padding:8px 10px;background:#FCFAF5;border:0;cursor:pointer;font-family:inherit;text-align:left;}
.td-need-klas:hover{background:#F6F1E7;}
.td-need-klas-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.td-need-klas strong{flex:1;font-size:12px;font-weight:750;color:#211F1B;}
.td-need-klas em{font-style:normal;font-size:11px;font-weight:650;color:#7D7568;background:#EFE9DD;border-radius:999px;padding:2px 6px;}
.td-need-chevron{width:12px;height:12px;color:#9B9386;flex-shrink:0;transition:transform .2s;}
.td-need-items{display:none;border-top:1px solid #E3DDCF;padding:6px 0;}
.td-need-group.open .td-need-items{display:block;}
.td-need-group.open .td-need-chevron{transform:rotate(180deg);}
.td-need{display:flex;justify-content:space-between;gap:8px;align-items:flex-start;font-size:12px;color:#211F1B;padding:6px 10px;}
.td-need:hover{background:#FCFAF5;}
.td-need span{flex:1;min-width:0;overflow-wrap:anywhere;}
.td-need em{font-style:normal;border-radius:999px;background:#F6F1E7;padding:2px 7px;font-size:10px;font-weight:650;color:#5F584D;white-space:nowrap;flex-shrink:0;}
.td-actions{background:var(--green-tint);border-color:var(--green-tint-2);}
.td-actions button{width:100%;height:34px;margin-top:8px;text-align:left;border:1px solid var(--green-tint-2);background:#fff;border-radius:7px;padding:0 10px;font-weight:750;color:#211F1B;cursor:pointer;font-family:inherit;}
.td-actions span{float:right;background:var(--plum);color:#fff;border-radius:999px;padding:2px 6px;font-size:10px;}
.td-tip{border-radius:14px;background:var(--green-tint);padding:16px;border:1px solid var(--green-tint-2);color:var(--green-800);}
.td-tip p{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--green-800);}

/* Rooster inklappen */
.rr-klas-kaart .rr-dag-lijst{display:none!important;}
.rr-klas-kaart.is-open .rr-dag-lijst{display:grid!important;}
.rr-klas-header{user-select:none;}
.rr-klas-kaart:not(.is-open) .rr-klas-header{border-bottom-color:transparent!important;}
.rr-klas-kaart:not(.is-open) .rr-klas-chevron{transform:rotate(0deg)!important;}
.rr-klas-kaart.is-open .rr-klas-chevron{transform:rotate(180deg)!important;}

@media (max-width:1100px){
  .td-layout{grid-template-columns:1fr;}
  .td-side{display:grid;grid-template-columns:repeat(2,1fr);margin-top:0;}
  .td-stats{grid-template-columns:repeat(2,1fr);}
}

/* Gebruikersrechten */
.gu-permission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.gu-permission-option {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 10px 12px;
  align-items: center;
}