/* ================================================================
   School Trainer — gedeelde stijlen
   Huisstijl: SPICTS (spicts.nl) — blauw #1f8ee2, donkere header,
   blauwe verloopstreep i.p.v. de vroegere driekleur (FR-vlag).
   Kleuren gesampled uit de officiële SPICTS-logobestanden
   (C:\Sytse\SPICTS\Huisstijl\22-SPICTS_logo-kleurW.png).
   ================================================================ */

:root {
    --wo-blue:      #1f8ee2;
    --wo-blue-dark: #15628f;
    --wo-blue-licht: #6cbed9;
    --wo-white:  #ffffff;
    --wo-red:    #d1373f;
    --wo-green:  #2fae60;
    --wo-black:  #1a1a1a;
    --wo-bg:     #eef6fc;
}

/* ── Reset / base ────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
    font-family: sans-serif;
    margin: 0;
    background: var(--wo-bg);
    color: #222;
    padding-top: 61px; /* ruimte voor .wo-topbar, die vast bovenaan staat (zie hieronder) */
}

a { color: inherit; text-decoration: none; }

/* ── Header ──────────────────────────────────────────────────── */
/* Vast bovenaan (i.p.v. gewoon meescrollend) zodat de header/streep niet uit beeld
   verdwijnen tijdens het scrollen — .wo-sidebar was al fixed, maar zonder dit bleef
   de topbar erboven wél gewoon in de normale document-flow staan. */
.wo-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
}

.wo-header {
    background: var(--wo-black);
    color: #fff;
    padding: .6rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
}

.wo-logo { display: flex; align-items: center; gap: .5rem; font-weight: bold; font-size: 1.1rem; }
.wo-logo-icon { width: 30px; height: 30px; display: block; }

.wo-header-user { display: flex; align-items: center; gap: 1rem; font-size: .85rem; }
.wo-header-naam { color: rgba(255,255,255,.55); }
.wo-header-logout { color: rgba(255,255,255,.8); transition: color .15s; }
.wo-header-logout:hover { color: #fff; }
.wo-header-gebruikers { color: rgba(255,255,255,.8); transition: color .15s; }
.wo-header-gebruikers:hover, .wo-header-gebruikers.active { color: #fff; }

/* ── Zijmenu ─────────────────────────────────────────────────── */
.wo-sidebar {
    position: fixed;
    top: 61px; /* header (56px) + streep (5px) */
    left: 0; bottom: 0;
    width: 200px;
    background: var(--wo-black);
    padding: 1.5rem 0;
    z-index: 5;
}

.wo-sidenav { display: flex; flex-direction: column; gap: .2rem; }
.wo-sidenav a {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem 1.5rem;
    color: rgba(255,255,255,.7);
    font-size: .92rem;
    border-left: 3px solid transparent;
    transition: color .15s, background .15s, border-color .15s;
}
.wo-sidenav a:hover { color: #fff; background: rgba(255,255,255,.05); }
.wo-sidenav a.active { color: #fff; background: rgba(255,255,255,.08); border-left-color: var(--wo-blue); }
.wo-sidenav-icon { font-size: 1.1rem; }

@media (max-width: 760px) {
    .wo-sidebar {
        position: static; width: auto;
        padding: 0;
    }
    .wo-sidenav { flex-direction: row; align-items: center; }
    .wo-sidenav a { border-left: none; border-bottom: 3px solid transparent; padding: .6rem .9rem; }
    .wo-sidenav a.active { border-bottom-color: var(--wo-blue); }
    main { margin-left: auto !important; }
}

/* ── Verloopstreep (SPICTS-blauw) ─────────────────────────────── */
.wo-stripe {
    height: 5px;
    background: linear-gradient(to right, var(--wo-blue-dark), var(--wo-blue), var(--wo-blue-licht));
    flex-shrink: 0;
}

/* ── Paginainhoud ─────────────────────────────────────────────── */
main { padding: 2rem; max-width: 1100px; margin: 0 auto 0 220px; }

h2 { margin-top: 0; color: #222; }

/* ── Knoppen ──────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: .3rem .8rem;
    border: none; border-radius: 4px;
    cursor: pointer; text-decoration: none;
    font-size: .85rem; line-height: 1.6;
    white-space: nowrap;
}

.btn-add   { background: var(--wo-blue); color: #fff; margin-bottom: 1rem; }
.btn-del   { background: var(--wo-red);  color: #fff; }
.btn-edit  { background: #e67e00;        color: #fff; }
.btn-oefen { background: var(--wo-green); color: #fff; }

.btn-add:hover   { background: #24399e; }
.btn-del:hover   { background: #a02830; }
.btn-edit:hover  { background: #c65e00; }
.btn-oefen:hover { background: #23924e; }

.btn-back {
    display: inline-block;
    margin-bottom: 1.25rem;
    color: var(--wo-blue);
    font-size: .9rem;
}

button[type=submit], button.wo-btn {
    padding: .6rem 1.4rem;
    background: var(--wo-blue); color: #fff;
    border: none; border-radius: 4px;
    cursor: pointer; font-size: 1rem;
}
button[type=submit]:hover, button.wo-btn:hover { background: #24399e; }

/* ── Tabellen ─────────────────────────────────────────────────── */
table {
    width: 100%; border-collapse: collapse;
    background: #fff; border-radius: 8px;
    overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.1);
    margin-bottom: 1.5rem;
}

th, td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid #eee; font-size: .9rem; }
th { background: #1a1a1a; color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafafa; }

/* ── Kaarten (dashboard) ──────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }

.card {
    background: #fff; border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1); overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
}
.card-head { padding: .9rem 1.1rem .5rem; }
.card-title { font-weight: bold; font-size: 1.05rem; margin: 0; color: var(--wo-black); }
.card-sub { font-size: .8rem; color: #888; margin-top: .2rem; }
.card-body { padding: 0 1.1rem .6rem; flex: 1; }
.card-foot { padding: .7rem 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; border-top: 1px solid #f0f0f0; }

/* Dashboard: grotere, oefen-gerichte kaart (2026-09-09) */
.grid:has(.card-groot) { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
.card-groot .card-head { padding: 1.2rem 1.3rem .6rem; }
.card-groot .card-body { padding: 0 1.3rem .9rem; }
.card-groot .card-foot { padding: 1rem 1.3rem; }
.card-groot .card-title { font-size: 1.2rem; padding-right: 2rem; }
.card-vlag { position: absolute; top: 1rem; right: 1.1rem; font-size: 1.6rem; line-height: 1; }
.card-oefen-btn { width: 100%; text-align: center; padding: .85rem; font-size: 1.05rem; font-weight: 600; }

.progress-track { height: 8px; background: #e8e8e8; border-radius: 5px; overflow: hidden; margin: .5rem 0; }
.progress-fill { height: 100%; background: var(--wo-green); border-radius: 5px; transition: width .3s; }

/* ── Box (formulier-wrapper) ──────────────────────────────────── */
.box {
    max-width: 560px;
    background: #fff; border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    padding: 2rem; margin-bottom: 2rem;
}
.box-wide { max-width: 900px; }
.box-extra-wide { max-width: 1100px; }

/* ── Formulierelementen ───────────────────────────────────────── */
label { display: block; margin-bottom: .25rem; font-weight: bold; font-size: .9rem; color: #333; }

input[type=text], input[type=email], input[type=password], input[type=number], select, textarea {
    width: 100%; padding: .5rem; margin-bottom: 1.2rem;
    border: 1px solid #ccc; border-radius: 4px;
    font-size: 1rem; font-family: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--wo-blue);
    box-shadow: 0 0 0 2px rgba(47,75,206,.2);
}

.hint { font-size: .8rem; color: #666; margin-top: -.9rem; margin-bottom: 1.2rem; }

/* ── Meldingen ────────────────────────────────────────────────── */
.msg-ok  { background: #e6f4ea; color: #1a6e2e; padding: .75rem 1rem; border-radius: 4px; margin-bottom: 1rem; border-left: 3px solid var(--wo-green); }
.msg-err { background: #fdecea; color: #b00020; padding: .75rem 1rem; border-radius: 4px; margin-bottom: 1rem; border-left: 3px solid var(--wo-red); }

/* ── Overhoor-scherm ──────────────────────────────────────────── */
.quiz-card {
    max-width: 640px; margin: 0 auto;
    background: #fff; border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    padding: 2.5rem 2rem;
}

.quiz-progress { display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; }
.quiz-progress .progress-track { flex: 1; margin: 0; height: 10px; }
.quiz-progress .quiz-count { font-size: .85rem; color: #888; white-space: nowrap; }

.quiz-vraag-label { font-size: .85rem; color: #888; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .4rem; }
.quiz-vraag {
    font-size: 1.9rem; font-weight: bold; color: var(--wo-black);
    display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem;
}

.quiz-notitie-hint { font-size: .88rem; color: #777; font-style: italic; margin-bottom: 1.5rem; }

.wo-speak-btn {
    background: var(--wo-bg); border: none; border-radius: 50%;
    width: 44px; height: 44px; flex-shrink: 0;
    font-size: 1.3rem; cursor: pointer; color: var(--wo-blue);
    display: inline-flex; align-items: center; justify-content: center;
}
.wo-speak-btn:hover { background: #dde3f7; }

.quiz-antwoord-vorm input[type=text] {
    font-size: 1.2rem; padding: .75rem 1rem; margin-bottom: 1rem;
}

/* Begrippen-overhoren: een definitie typ je meestal in een paar zinnen, dus een
   tekstvak i.p.v. het krappe eenregelige veld van typen/leren/zinnen. */
.quiz-antwoord-vorm textarea {
    font-size: 1.1rem; padding: .75rem 1rem; margin-bottom: 1rem;
    min-height: 6rem; resize: vertical;
}

/* Kernpunten-uitslag na het beoordelen van een begrip-antwoord */
.kernpunt-lijst { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .92rem; }
.kernpunt-lijst li { padding: .2rem 0; display: flex; align-items: center; gap: .5rem; }
.kernpunt-lijst .kernpunt-aanwezig { color: var(--wo-green); }
.kernpunt-lijst .kernpunt-ontbreekt { color: var(--wo-red); }
.begrip-score { font-size: 1.3rem; font-weight: bold; margin-bottom: .3rem; }

.quiz-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 480px) { .quiz-keuzes { grid-template-columns: 1fr; } }

.keuze-knop {
    padding: .9rem 1rem; border: 2px solid #e2e5f3; border-radius: 8px;
    background: #fff; font-size: 1.05rem; text-align: left;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.keuze-knop:hover:not(:disabled) { border-color: var(--wo-blue); background: #f4f6fd; }
.keuze-knop:disabled { cursor: default; }
.keuze-knop.goed  { border-color: var(--wo-green); background: #e6f4ea; }
.keuze-knop.fout  { border-color: var(--wo-red);   background: #fdecea; }

/* ── Automatisch-verder-balkje ────────────────────────────────── */
.quiz-auto-track { height: 4px; background: var(--wo-bg); border-radius: 2px; overflow: hidden; margin-top: 1rem; }
.quiz-auto-fill { height: 100%; width: 0%; background: var(--wo-blue); }

/* ── Koppelen (matching) ──────────────────────────────────────── */
.quiz-koppel { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1.2rem; margin-bottom: 1rem; }
.koppel-kolom { display: flex; flex-direction: column; gap: .6rem; }

.koppel-tegel {
    padding: .85rem 1rem; border: 2px solid #e2e5f3; border-radius: 8px;
    background: #fff; font-size: 1rem; text-align: center;
    cursor: pointer; transition: border-color .15s, background .15s, transform .1s;
}
.koppel-tegel:hover:not(.gematcht):not(.geselecteerd) { border-color: var(--wo-blue); background: #f4f6fd; }
.koppel-tegel.geselecteerd { border-color: var(--wo-blue); background: #e8f0fe; }
.koppel-tegel.gematcht { border-color: var(--wo-green); background: #e6f4ea; color: #1a6e2e; cursor: default; opacity: .7; }
.koppel-tegel.fout { border-color: var(--wo-red); background: #fdecea; animation: koppel-shake .3s; }

@keyframes koppel-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.quiz-ronde-label { text-align: center; font-size: .85rem; color: #888; margin-bottom: .5rem; }

/* ── Flashcards ───────────────────────────────────────────────── */
.flashkaart {
    border: 2px dashed #e2e5f3; border-radius: 10px;
    padding: 2rem 1.5rem; margin-bottom: 1rem;
    text-align: center; cursor: pointer;
    min-height: 90px; display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s;
}
.flashkaart:hover { border-color: var(--wo-blue); background: #f4f6fd; }

.flashkaart-antwoord {
    font-size: 1.6rem; font-weight: bold; color: var(--wo-green);
    display: none; animation: flashkaart-in .25s ease;
}
.flashkaart.omgedraaid { cursor: default; border-style: solid; border-color: var(--wo-green); background: #e6f4ea; }
.flashkaart.omgedraaid:hover { border-color: var(--wo-green); background: #e6f4ea; }
.flashkaart.omgedraaid .flashkaart-antwoord { display: block; }
.flashkaart.omgedraaid .flashkaart-hint { display: none; }

.flashkaart-hint { font-size: .9rem; color: #999; }

@keyframes flashkaart-in { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

.quiz-flashcard-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 480px) { .quiz-flashcard-knoppen { grid-template-columns: 1fr; } }

.flashcard-knop {
    padding: .9rem 1rem; border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 600; cursor: pointer; color: #fff;
    transition: opacity .15s;
}
.flashcard-knop:hover { opacity: .88; }
.flashcard-knop-fout { background: var(--wo-red); }
.flashcard-knop-goed { background: var(--wo-green); }

/* Altijd zichtbaar (ook leeg) met vaste min-hoogte, zodat de kaart niet van hoogte
   verspringt zodra er feedback verschijnt. */
.quiz-feedback {
    padding: 1rem 1.2rem; border-radius: 8px; margin-top: 1rem;
    font-size: 1rem; min-height: 3.3rem; box-sizing: border-box;
    display: flex; align-items: center;
    background: transparent; border-left: 4px solid transparent;
}
.quiz-feedback.goed { background: #e6f4ea; color: #1a6e2e; border-left-color: var(--wo-green); }
.quiz-feedback.fout { background: #fdecea; color: #b00020; border-left-color: var(--wo-red); }
.quiz-feedback.neutraal { background: var(--wo-bg); color: #555; border-left-color: var(--wo-blue); }
.quiz-feedback .juiste-antwoord { font-weight: bold; }

.quiz-volgende-rij { display: flex; gap: .75rem; margin-top: 1.25rem; }
.quiz-volgende-btn { width: 100%; padding: .8rem; font-size: 1.05rem; flex: 1; margin: 0; }

.ezelsbruggetje-knop {
    flex: 1; padding: .8rem; font-size: 1.05rem; margin: 0;
    background: #fff; color: var(--wo-black); border: 2px solid #e2e5f3;
}
.ezelsbruggetje-knop:hover { border-color: var(--wo-blue); background: #f4f6fd; }

.quiz-ezelsbruggetje-paneel {
    background: var(--wo-bg); border-radius: 8px; padding: 1rem 1.2rem;
    margin-top: 1rem; font-size: .92rem;
}
.quiz-ezelsbruggetje-paneel input[type=text] { margin-bottom: 0; }

/* ── Instellingen-schuifjes (luisteren / fouten herhalen) ────────── */
.quiz-instellingen { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }

.quiz-toggle { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; font-size: .82rem; color: #555; }
.quiz-toggle input { display: none; }

.quiz-toggle-slider {
    width: 36px; height: 20px; background: #ddd; border-radius: 10px;
    position: relative; flex-shrink: 0; transition: background .15s;
}
.quiz-toggle-slider::before {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; background: #fff; border-radius: 50%;
    transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.quiz-toggle input:checked + .quiz-toggle-slider { background: var(--wo-green); }
.quiz-toggle input:checked + .quiz-toggle-slider::before { transform: translateX(16px); }

.quiz-stem-kiezer { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: #555; }
.quiz-stem-select {
    width: auto; margin: 0; padding: .2rem .4rem;
    font-size: .8rem; border-radius: 4px; border: 1px solid #ccc;
    max-width: 180px;
}

/* ── Inline woordenlijst-editor (lijst_edit.php) ─────────────────── */
.woord-veld-met-spreker { display: flex; align-items: center; gap: .35rem; }
.woord-veld-met-spreker input { flex: 1; margin-bottom: 0; }

.inline-speak-btn {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    border: none; background: var(--wo-bg); color: var(--wo-blue);
    cursor: pointer; font-size: .95rem; display: inline-flex;
    align-items: center; justify-content: center; padding: 0;
}
.inline-speak-btn:hover { background: #dde3f7; }

/* Woordkaarten: bron/doel altijd zichtbaar met echte breedte i.p.v. krappe
   tabelcellen; notitie/ezelsbruggetje/voorbeeldzin/extra-antwoorden per woord
   achter een "Meer"-knop, met een compacte preview zodat je niet hoeft te klikken
   om te zien dát er iets staat. */
.woorden-container { display: flex; flex-direction: column; gap: .7rem; }

.woord-kaart {
    border: 1px solid #e2e5f3; border-radius: 8px; padding: .8rem .9rem;
    transition: border-color .15s, background .15s, opacity .15s;
}
.woord-kaart-verwijderen { border-color: var(--wo-red); background: #fdecea; opacity: .65; }

.woord-kaart-hoofdrij { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.woord-kaart-hoofdrij .woord-veld-met-spreker { flex: 1 1 220px; min-width: 160px; }

.woord-meer-toggle {
    background: var(--wo-bg); color: var(--wo-black); flex-shrink: 0;
    white-space: nowrap; padding: .45rem .8rem; font-size: .85rem;
}
.woord-meer-toggle:hover { background: #dde3f7; }

/* ── Boekenkaart: bewerkveldjes achter een toggle-knop (zelfde idee als hierboven) ── */
.boek-bewerk-toggle {
    background: var(--wo-bg); color: var(--wo-black);
    padding: .45rem .8rem; font-size: .85rem; margin: 0;
}
.boek-bewerk-toggle:hover { background: #dde3f7; }
.boek-bewerk-paneel { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed #e2e5f3; }

.woord-verwijder-vinkje {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 6px; cursor: pointer;
    font-size: 1rem; color: #999; flex-shrink: 0; margin: 0;
}
.woord-verwijder-vinkje:hover { color: var(--wo-red); background: #fdecea; }
.woord-verwijder-vinkje input { display: none; }

.woord-kaart-preview {
    display: flex; flex-wrap: wrap; gap: .25rem 1.1rem;
    margin-top: .5rem; font-size: .82rem; color: #777;
}

.woord-kaart-meer {
    margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed #e2e5f3;
}
.woord-kaart-meer label { font-size: .85rem; }
.woord-kaart-meer input[type=text], .woord-kaart-meer textarea { font-size: .92rem; }

/* ── Boekomslag ín de dashboard-kaart (index.php) ────────────────── */
.card-head-rij { display: flex; align-items: flex-start; gap: .8rem; padding: 1.2rem 1.3rem .6rem; }
.card-groot .card-head { padding: 0; flex: 1; }
.card-omslag-wrap { position: relative; width: 40px; height: 54px; flex-shrink: 0; }
.card-omslag {
    width: 40px; height: 54px; object-fit: cover; border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.card-omslag-placeholder {
    background: var(--wo-bg); display: flex; align-items: center;
    justify-content: center; font-size: 1.2rem;
}
.niveau-filter { margin-bottom: 1.5rem; display: flex; align-items: center; gap: .5rem; }
.niveau-filter label { margin: 0; font-weight: normal; color: #666; font-size: .85rem; }
.niveau-filter select { width: auto; margin-bottom: 0; }

/* ── Woordenlijsten-overzicht (lijsten.php) ──────────────────────── */
.card-flags { font-size: .85rem; }
.globale-kaart-maker { font-size: .75rem; color: #999; }
.badge-globaal { background: #e8f0fe; color: #1a56c4; }
.section-label { font-size: .8rem; color: #888; text-transform: uppercase; letter-spacing: .05em; margin: 2rem 0 .75rem; }
.section-label:first-child { margin-top: 0; }

/* ── Woordenlijst-overzicht (lijst_overzicht.php) ────────────────── */
.overzicht-header { display: flex; gap: 1.5rem; align-items: flex-start; }
.overzicht-omslag-wrap { position: relative; width: 96px; height: 128px; flex-shrink: 0; }
.overzicht-omslag { width: 96px; height: 128px; object-fit: cover; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.overzicht-omslag-placeholder { background: var(--wo-bg); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; }
.overzicht-info { flex: 1; }
.overzicht-info h1 { margin: 0 0 .3rem; font-size: 1.5rem; color: var(--wo-black); }
.overzicht-boek { color: #666; font-size: .9rem; margin: 0 0 .4rem; }
.overzicht-omschrijving { color: #666; font-size: .9rem; margin: 0 0 .8rem; }
.overzicht-bewerk-link { display: inline-block; margin-left: 1rem; color: #888; font-size: .85rem; }
.overzicht-bewerk-link:hover { color: var(--wo-blue); }

.richting-kiezer {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--wo-bg); border-radius: 20px; padding: .5rem 1.1rem;
    font-weight: 600; font-size: .95rem; color: var(--wo-black);
    transition: background .15s;
}
.richting-kiezer:hover { background: #dde3f7; }
.richting-pijl { color: var(--wo-blue); font-size: 1.1rem; }

.overzicht-stats { display: flex; gap: 2rem; flex-wrap: wrap; }
.stat-item { text-align: center; }
.stat-getal { font-size: 1.6rem; font-weight: bold; color: var(--wo-black); }
.stat-label { font-size: .78rem; color: #888; text-transform: uppercase; letter-spacing: .04em; }

.modus-knoppen { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
@media (max-width: 700px) { .modus-knoppen { grid-template-columns: repeat(2, 1fr); } }
.modus-knop {
    display: block; text-align: center; padding: 1rem .5rem;
    border: 2px solid #e2e5f3; border-radius: 8px; font-weight: 600;
    color: var(--wo-black); transition: border-color .15s, background .15s;
}
.modus-knop:hover { border-color: var(--wo-blue); background: #f4f6fd; }

.leren-voortgang { display: flex; align-items: center; gap: 1rem; }
.leren-voortgang .progress-track { flex: 1; margin: 0; height: 10px; }
.leren-voortgang-tekst { font-size: .85rem; color: #888; white-space: nowrap; }

.box-dots { display: inline-flex; gap: 3px; }
.box-dot { width: 9px; height: 9px; border-radius: 50%; background: #e2e5f3; display: inline-block; }
.box-dot.gevuld { background: var(--wo-green); }

/* ── Badges (match-type in geschiedenis/statistieken) ──────────── */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 12px; font-size: .78rem; font-weight: bold; }
.badge-exact  { background: #e6f4ea; color: #1a6e2e; }
.badge-los    { background: #e8f0fe; color: #1a56c4; }
.badge-typo   { background: #fff3e0; color: #7a4500; }
.badge-fout   { background: #fdecea; color: #b00020; }