:root {
  --ink-soft: #5b6072;
  --border: #e6e8f0;
  --primary: #066ac9;
  --primary-dark: #054f97;
  --accent: #22c55e;
  --danger: #ef4444;
}

/* Aanvullingen bovenop het thema van de site (assets/css/style.css) — enkel
   voor onderdelen die geen Bootstrap-equivalent hebben (quiz, opzoekwerk,
   voortgangstabel, ...). Bewust GEEN eigen .btn/.card/.badge/.alert: die
   botsen met Bootstrap se eigen klassen van dezelfde naam. */

.research-box { background: #f8f9ff; border: 1px dashed #c7cbf5; border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.research-box label { display: block; font-weight: 700; margin-bottom: 6px; }
.research-tip { color: var(--ink-soft); font-size: .85rem; margin: 2px 0 10px; }
textarea, input[type=text], input[type=number], input[type=email], input[type=url] {
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; font: inherit;
}
textarea:focus, input:focus { outline: none; border-color: var(--primary); }

.flits { animation: flitsAnim 1.2s ease; }
@keyframes flitsAnim { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 1; } }
.savehint { font-size: .8rem; color: var(--accent); font-weight: 700; opacity: 0; margin-left: 8px; }
.savehint.flits { opacity: 1; }

.vak-toast {
  position: fixed; bottom: 28px; right: 28px; background: #1a1d29; color: #fff;
  padding: 12px 20px; border-radius: 10px; font-size: .85rem; z-index: 999999;
  opacity: 0; transform: translateY(10px); transition: all .3s; pointer-events: none;
}
.vak-toast.show { opacity: 1; transform: translateY(0); }

/* ── Quiz ─────────────────────────────────────────────── */
.quiz-vraag { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.quiz-vraag .vraagtekst { font-weight: 700; margin-bottom: 12px; }
.opties { display: grid; gap: 8px; }
.optie {
  display: block; text-align: left; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: 10px;
  background: #fafbff; cursor: pointer; font: inherit; width: 100%;
}
.optie:hover { border-color: var(--primary); }
.optie.gekozen { border-color: var(--primary); background: #eef0ff; font-weight: 600; }
.optie.correct { border-color: var(--accent); background: #dcfce7; }
.optie.fout { border-color: var(--danger); background: #fee2e2; }
.optie:disabled { cursor: default; }
.uitlegbox { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: #f4f6fb; font-size: .9rem; color: var(--ink-soft); }

.scorebox { text-align: center; padding: 22px; border-radius: 18px; background: linear-gradient(120deg,#eaf3fc,#dceefc); margin-bottom: 20px; }
.scorebox .cijfer { font-size: 2.4rem; font-weight: 800; color: var(--primary-dark); }

/* ── Beheer (leerkracht-voortgangstabel) ─────────────────── */
.datatable { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; }
.datatable th, .datatable td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; font-size: .9rem; }
.datatable th { background: #f1f2fb; }
.beheer-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.beheer-toolbar label { font-size: .85rem; color: var(--ink-soft); }
.beheer-toolbar-n { font-size: .82rem; color: var(--ink-soft); }
.badge-klas { display: inline-block; background: #eef0ff; color: var(--primary-dark); font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.tabs { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.tab-btn { background: #fff; border: 1.5px solid var(--border); padding: 9px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; }
.tab-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.badge-done { background: #dcfce7; color: #166534; }
.badge-todo { background: #fef3c7; color: #92400e; }

/* ── Code-blokken, "probeer zelf" en oefeningen ───────────────────────── */
pre.vak-code { background:#1e2330; color:#e6e9f0; border-radius:10px; padding:14px 16px; overflow-x:auto; font-size:.86rem; line-height:1.5; margin:.6rem 0 1rem; }
pre.vak-code code { color:inherit; background:none; }
pre.vak-code .vak-bestand { display:block; color:#8ea0c8; font-size:.75rem; margin-bottom:6px; font-style:italic; }
code.vak-inline { background:#eef2fb; color:#1d3a8a; padding:1px 6px; border-radius:5px; font-size:.86em; }
.vak-box { border-left:4px solid var(--brand, #0d6efd); background:#f3f7ff; border-radius:0 8px 8px 0; padding:10px 14px; margin:.8rem 0; }
.vak-box.tip { border-color:#22c55e; background:#f0fdf4; }
.vak-box.let-op { border-color:#f59e0b; background:#fffbeb; }
.vak-box.gevaar { border-color:#ef4444; background:#fef2f2; }
.vak-box strong.vak-box-kop { display:block; margin-bottom:2px; }
figure.vak-afb { margin:1rem 0; text-align:center; }
figure.vak-afb img { max-width:100%; max-height:280px; }
figure.vak-afb figcaption { font-size:.78rem; color:#6b7280; margin-top:4px; }
.vak-try, .vak-oefening { border:1px solid #d7deea; border-radius:12px; padding:14px; margin:1rem 0; background:#fbfcfe; }
.vak-try-kop, .vak-oef-kop { font-weight:700; margin-bottom:8px; }
.vak-oef-opdracht { margin-bottom:10px; }
textarea.vak-editor { width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.86rem; line-height:1.5; background:#1e2330; color:#e6e9f0; border:none; border-radius:8px; padding:12px; resize:vertical; tab-size:2; }
iframe.vak-uitvoer { display:none; width:100%; height:220px; margin-top:10px; border:1px solid #d7deea; border-radius:8px; background:#fff; }
ul.vak-checks { list-style:none; padding:0; margin:10px 0 0; }
ul.vak-checks li { padding:3px 0; font-size:.9rem; }
ul.vak-checks li.nok { color:#b91c1c; }
.vak-hint { background:#fffbeb; border:1px solid #fde68a; border-radius:8px; padding:8px 12px; margin-top:10px; font-size:.9rem; }
pre.vak-oplossing { background:#0f172a; color:#a7f3d0; border-radius:8px; padding:12px; margin-top:10px; font-size:.85rem; white-space:pre-wrap; }

/* Python: invoervak voor input() en de console-uitvoer */
label.vak-invoer-label { display:block; font-size:.8rem; color:#64748b; margin:10px 0 4px; }
textarea.vak-invoer { width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem; background:#fff; border:1px solid #d7deea; border-radius:8px; padding:6px 10px; resize:vertical; }

/* Kaartjes, schema's met pijlen en ingebedde demo's (o.a. statistiek-cursus) */
.vak-kaarten { display:grid; grid-template-columns:repeat(auto-fit, minmax(var(--vak-kaart-min, 200px), 1fr)); gap:12px; margin:1rem 0; }
.vak-kaart { border:1px solid var(--border); border-radius:12px; padding:14px 16px; background:#fbfcfe; }
.vak-kaart-num { font-size:1.6rem; font-weight:800; color:#e0ab3c; line-height:1.1; }
.vak-kaart-kop { font-size:1rem; font-weight:700; margin:.35rem 0 .3rem; }
.vak-kaart-tekst { font-size:.9rem; color:#3b4053; }
.vak-kaart-tekst p:last-child { margin-bottom:0; }
.vak-pijlen { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:.8rem 0 1.1rem; }
.vak-node { display:inline-block; padding:5px 14px; border:1.5px solid #2b3873; border-radius:8px; background:#fff; color:#2b3873; font-weight:600; }
.vak-node.accent { border-color:#d63d44; color:#d63d44; }
.vak-pijl { color:#d63d44; font-size:1.25rem; font-weight:700; }
.vak-demo { margin:1rem 0 1.2rem; }
.vak-demo iframe { display:block; width:100%; border:1px solid var(--border); border-radius:14px; background:#fff; }

/* ── Tabellen in cursusinhoud (bv. omvormingstabel) ───────────────────── */
table.vak-tabel { width:100%; border-collapse:collapse; margin:.8rem 0 1rem; font-size:.9rem; }
table.vak-tabel th, table.vak-tabel td { padding:6px 12px; border:1px solid var(--border, #e2e6f3); text-align:center; }
table.vak-tabel th { background:#eef2fb; color:#1d3a8a; }
table.vak-tabel td.mono { font-family:ui-monospace, Menlo, Consolas, monospace; }

/* ── Bootstrap-voorbeelden: schermbreedte kiezen ──────────────────────── */
.vak-breedte { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:10px 0 4px; font-size:.8rem; color:#64748b; }
.vak-breedte button { border:1px solid #cbd5e1; background:#fff; border-radius:999px; padding:2px 10px; font-size:.78rem; color:#334155; }
.vak-breedte button.actief { background:#0d6efd; color:#fff; border-color:#0d6efd; }
.vak-uitvoer-wrap { overflow-x:auto; }