/* ===== Wiskunde oefensite – 1ste graad (Pelckmans Portaal) ===== */
:root {
  --roze: #c8326b;
  --roze-licht: #f4d9e4;
  --groen: #7ba428;
  --groen-licht: #eef5dd;
  --groen-rand: #a9cb5c;
  --blauw: #1f6f9c;
  --grijs: #f5f6f8;
  --donker: #2c2c34;
  --goed: #2e9e5b;
  --fout: #d4453b;
  --schaduw: 0 2px 10px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }

body {
  font-family: "Segoe UI", Tahoma, Verdana, sans-serif;
  margin: 0;
  background: var(--grijs);
  color: var(--donker);
  line-height: 1.5;
}

header.top {
  background: var(--roze);
  color: #fff;
  padding: 9px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: var(--schaduw);
}
header.top h1 { margin: 0; font-size: 1.12rem; }
header.top .ondertitel { font-size: .85rem; opacity: .9; }

nav.menu { display: flex; gap: 8px; flex-wrap: wrap; }
.menu-knop {
  color: var(--roze);
  background: #fff;
  border: none;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 20px;
  font-weight: 600;
  font-size: .9rem;
  font-family: inherit;
  text-decoration: none;
  display: inline-block;
  transition: transform .1s;
}
.menu-knop:hover { transform: translateY(-1px); }
.menu-knop.klein { padding: 6px 12px; font-size: .82rem; }

main { max-width: 920px; margin: 16px auto; padding: 0 16px; }

/* ---- Views ---- */
.view { display: none; }
.view.actief { display: block; }

/* ---- Login ---- */
.login-kaart { max-width: 420px; margin: 6vh auto 0; }
.login-kaart h2 { margin: 0 0 6px; color: var(--roze); }
.login-uitleg { color: #666; font-size: .92rem; margin: 0 0 18px; }
.veld { display: block; margin-bottom: 14px; }
.veld span { display: block; font-size: .82rem; font-weight: 600; color: #555; margin-bottom: 4px; }
.veld input {
  width: 100%; font-size: 1.1rem; padding: 10px 14px;
  border: 2px solid #cdd2da; border-radius: 10px; font-family: inherit;
}
.veld input:focus { outline: none; border-color: var(--blauw); }
.loginfout { color: var(--fout); font-size: .9rem; min-height: 20px; margin-bottom: 6px; }
.knop.groot { width: 100%; padding: 14px; font-size: 1.05rem; }

/* ---- Keuzescherm ---- */
.welkom-kaart h2 { margin: 0 0 6px; color: var(--roze); }
.welkom-kaart p { margin: 0; color: #555; }
.vak-kaart { padding: 18px 22px; }
.vak-titel { margin: 0 0 12px; color: var(--blauw); font-size: 1.2rem; }
.onderdeel-lijst { display: flex; flex-direction: column; gap: 10px; }
.onderdeel-rij {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--grijs); border: 1px solid #e4e7ec;
  border-radius: 10px; padding: 12px 14px;
}
.onderdeel-info { font-size: 1.02rem; }
.onderdeel-info .code { color: #888; font-size: .8rem; margin-left: 6px; }
.onderdeel-knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.knop.klein { padding: 8px 14px; font-size: .85rem; text-decoration: none; display: inline-block; }
a.knop { line-height: 1.1; }

/* Oefenscherm compacter zodat "Volgende" op een 1080-scherm zichtbaar blijft zonder scrollen */
#view-oefenen .kaart { padding: 14px 18px; margin-bottom: 12px; }
.oefen-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.kop-knoppen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.oefen-kop h2 { margin: 0; font-size: 1.15rem; color: var(--blauw); }
.menu-knop.klein { background: var(--grijs); border: 1px solid #dde1e7; }

.mini-knop { background:#fff; border:1px solid var(--blauw); color:var(--blauw); border-radius:8px; padding:6px 12px; cursor:pointer; font-size:.82rem; font-family:inherit; }
.mini-knop.rood { border-color: var(--fout); color: var(--fout); }

/* examenblok-label boven de onderdelen */
.blok-titel {
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: #8a8f98; margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px dashed #e0e3e8;
}
.vak-titel + .blok-titel { margin-top: 4px; }

/* kladpapier-tip */
.tip-kaart { background: #fff8e6; border: 1px solid #f0d98a; color: #7a5d12; font-size: .95rem; }

/* ---- Touchscreen-keypad (wiskunde) ---- */
.keypad { margin-top: 14px; max-width: 360px; }
.keypad-functies { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 6px; }
.cijferpad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.keypad button {
  font-family: inherit; font-size: 1.3rem; padding: 12px 0;
  border: 1px solid #cdd2da; background: #fff; border-radius: 10px;
  cursor: pointer; min-height: 50px; user-select: none;
}
.keypad-functies button { font-size: 1.05rem; }
.keypad button:hover { background: var(--roze-licht); border-color: var(--roze); }
.keypad button:active { transform: translateY(1px); }
.keypad .op { background: #eef3f7; color: var(--blauw); font-weight: 700; border-color: #cfe0ea; }
.keypad .op:hover { background: var(--blauw); color: #fff; border-color: var(--blauw); }
.keypad .back { background: #fbe9e7; color: var(--fout); border-color: #f1c4be; }
.keypad .back:hover { background: var(--fout); color: #fff; }

.kaart {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--schaduw);
  padding: 22px;
  margin-bottom: 20px;
}

/* ---- Score ---- */
.scorebalk {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.score-item {
  flex: 1 1 90px;
  background: var(--groen-licht);
  border: 1px solid var(--groen-rand);
  border-radius: 10px;
  padding: 6px 8px;
  text-align: center;
}
.score-item .getal { font-size: 1.25rem; font-weight: 700; color: var(--groen); line-height: 1.2; }
.score-item .label { font-size: .68rem; text-transform: uppercase; letter-spacing: .4px; color: #555; }
.score-item.reeks .getal { color: var(--roze); }

/* ---- Voortgang binnen de reeks van 25 ---- */
.vraag-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.vraag-kop .hoofdstuk-badge { margin-bottom: 0; }
.reeks-teller { font-size: .8rem; font-weight: 700; color: #8a8f98; white-space: nowrap; }

/* ---- Resultaat van de reeks ---- */
.resultaat-kaart { text-align: center; max-width: 480px; margin: 4vh auto 0; padding: 30px 26px; }
.res-emoji { font-size: 3rem; line-height: 1; }
.resultaat-kaart h2 { margin: 8px 0 4px; color: var(--roze); }
.res-sub { color: #666; margin: 0 0 18px; font-size: .95rem; }
.res-cijfer { font-size: 2.6rem; font-weight: 800; color: var(--groen); line-height: 1.1; }
.res-eenheid { font-size: 1rem; font-weight: 600; color: #777; }
.res-pct { font-size: 1.1rem; color: #555; margin-top: 4px; }
.res-bericht { margin: 14px 0 22px; color: #444; }
.res-knoppen { display: flex; flex-direction: column; gap: 10px; }

/* ---- Vraag ---- */
.hoofdstuk-badge {
  display: inline-block;
  background: var(--roze);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}
.vraag {
  font-size: 1.9rem;
  margin: 8px 0 18px;
  min-height: 52px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.vraag .vraagstuk { font-size: 1.1rem; font-weight: 600; line-height: 1.6; }
.vraag .zin { font-size: 1.15rem; font-weight: 600; }
.vraag .grijs { color: #888; font-weight: 400; font-size: .9rem; }

/* ---- Meerkeuze ---- */
.keuze-opties { display: flex; flex-direction: column; gap: 10px; }
.keuze-knop {
  text-align: left; font-family: inherit; font-size: 1.05rem;
  background: #fff; border: 2px solid #cdd2da; border-radius: 10px;
  padding: 12px 16px; cursor: pointer; transition: border-color .1s, background .1s;
}
.keuze-knop:hover:not(:disabled) { border-color: var(--blauw); background: #f3f8fb; }
.keuze-knop:disabled { cursor: default; opacity: .85; }
.keuze-knop.juist-keuze { border-color: var(--goed); background: #e3f6ea; color: #1d6e3f; font-weight: 600; }
.keuze-knop.fout-keuze { border-color: var(--fout); background: #fbe5e3; color: #9c2a23; }

/* breuk / macht / wortel weergave */
.frac { display: inline-flex; flex-direction: column; text-align: center; vertical-align: middle; margin: 0 3px; }
.frac .num { border-bottom: 2px solid currentColor; padding: 0 5px; line-height: 1.15; }
.frac .den { padding: 0 5px; line-height: 1.15; }
.wortel { display: inline-flex; align-items: stretch; }
.wortel .teken { font-size: 1.1em; }
.wortel .radicand { border-top: 2px solid currentColor; padding: 0 4px; margin-top: 2px; }
sup { font-size: .62em; }

/* ---- Invoer ---- */
.toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar button {
  background: var(--roze-licht);
  border: 1px solid var(--roze);
  color: var(--roze);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 1rem;
  cursor: pointer;
  min-width: 42px;
}
.toolbar button:hover { background: var(--roze); color: #fff; }

.invoer-rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#antwoord {
  flex: 1 1 220px;
  font-size: 1.4rem;
  padding: 10px 14px;
  border: 2px solid #cdd2da;
  border-radius: 10px;
  font-family: inherit;
}
#antwoord:focus { outline: none; border-color: var(--blauw); }

.knop {
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
}
.knop.primair { background: var(--groen); }
.knop.primair:hover { background: #6a8f22; }
.knop.secundair { background: var(--blauw); }
.knop.secundair:hover { background: #185a80; }
/* Uitgeschakelde knop (bv. "Volgende" zolang er nog niet gecontroleerd is):
   lichter en grijs zodat duidelijk is dat hij nog niet bruikbaar is. */
.knop:disabled,
.knop:disabled:hover { background: #c7cdd3; color: #f3f5f7; cursor: not-allowed; }

.preview { font-size: 1.2rem; min-height: 30px; color: #555; margin: 8px 0; }
.preview .label { font-size: .8rem; color: #999; }

/* ---- Feedback ---- */
.feedback { margin-top: 16px; font-size: 1.1rem; padding: 14px; border-radius: 10px; display: none; }
.feedback.goed { display: block; background: #e3f6ea; border: 1px solid var(--goed); color: #1d6e3f; }
.feedback.fout { display: block; background: #fbe5e3; border: 1px solid var(--fout); color: #9c2a23; }
.feedback .juist { font-weight: 700; }
.hint { margin-top: 10px; font-size: .92rem; color: #555; font-style: italic; }

/* ---- Hoofdstukkiezer ---- */
.filterlijst { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.filterlijst label {
  display: flex; align-items: center; gap: 6px;
  background: var(--grijs);
  border: 1px solid #dde1e7;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: .82rem;
  cursor: pointer;
}
.filterlijst label input { accent-color: var(--groen); }
.filter-knoppen { margin-top: 12px; display: flex; gap: 8px; }
.filter-knoppen button {
  background: #fff; border: 1px solid var(--blauw); color: var(--blauw);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: .82rem;
}
details summary { cursor: pointer; font-weight: 700; color: var(--blauw); }

/* ---- Definitiepagina ---- */
.def-kader {
  background: var(--groen-licht);
  border: 2px solid var(--groen-rand);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.def-kader h3 { margin: 0 0 8px; color: var(--groen); font-size: 1.05rem; }
.def-kader .soort {
  display: inline-block; background: var(--groen); color: #fff;
  font-size: .72rem; padding: 2px 8px; border-radius: 5px; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .5px;
}
.def-kader ul { margin: 8px 0 0; padding-left: 20px; }
.def-kader li { margin-bottom: 4px; }
.hoofdstuk-titel {
  border-left: 5px solid var(--roze);
  padding-left: 12px;
  margin: 26px 0 12px;
  color: var(--roze);
}
.inhoud-index { columns: 2; column-gap: 24px; font-size: .9rem; }
.inhoud-index a { color: var(--blauw); text-decoration: none; }
.inhoud-index a:hover { text-decoration: underline; }

footer { text-align: center; font-size: .8rem; color: #888; padding: 20px; }

@media (max-width: 560px) {
  .vraag { font-size: 1.5rem; }
  .inhoud-index { columns: 1; }
}