/* Lichte, vriendelijke uitstraling: wit, zachte kleuren, ronde vormen en veel ruimte voor foto's.
   Het klassikale scherm (Zoom) houdt de donkere petrol-stijl uit app.css. */
:root {
  color-scheme: light;
  --bg1: #F3F9FA; --bg2: #E4F3F6;
  --vlak: #FFFFFF; --vlak2: #EAF4F6;
  --lijn: #DCE9EC; --tekst: #0B2A33; --zacht: #4B6670; --stil: #86A0A8;
  --cyaan: #5FD4E0; --cyaan-d: #2FB3C2; --diep: #0E7C8A;
  --gloed: 0 8px 26px rgba(11,42,51,.10);
  --goed: #22A45D; --goed-bg: #E2F6EA; --fout: #E2574C; --fout-bg: #FDECEA; --geel: #F4B942;
  --koraal: #FF8A5B; --zon: #FFF3D6;
}
body:not(.klas-modus) {
  background: radial-gradient(1100px 500px at 90% -10%, #D8F1F5 0%, transparent 60%),
              radial-gradient(900px 500px at -10% 30%, #FFF3E0 0%, transparent 55%),
              #F7FBFC fixed;
  color: var(--tekst);
}
body:not(.klas-modus) a { color: var(--diep); }
body:not(.klas-modus) .nav a, body:not(.klas-modus) .les-tabs a { color: var(--zacht); }
body:not(.klas-modus) .nav a.aan, body:not(.klas-modus) .nav a:hover, body:not(.klas-modus) .les-tabs a.aan, body:not(.klas-modus) .les-tabs a:hover { color: var(--tekst); }
body:not(.klas-modus) .thema-kaart, body:not(.klas-modus) .les-kaart { color: var(--tekst); }
body:not(.klas-modus) .kruimel a { color: var(--zacht); }
body:not(.klas-modus) h4 { color: var(--diep); }

/* Knoppen */
body:not(.klas-modus) .knop { color: #06323B; box-shadow: 0 6px 16px rgba(47,179,194,.28); }
body:not(.klas-modus) .knop:hover { background: #7FE3EC; }
body:not(.klas-modus) .knop.licht { background: #fff; color: var(--tekst); border: 1px solid var(--lijn); box-shadow: 0 2px 6px rgba(11,42,51,.06); }
body:not(.klas-modus) .knop.licht:hover { background: #F0F8FA; }
body:not(.klas-modus) .link-knop { color: var(--diep); }
body:not(.klas-modus) .icoon-knop, body:not(.klas-modus) .mini-knop { background: #fff; border-color: var(--lijn); }
body:not(.klas-modus) .luister { background: #E3F7FA; color: var(--diep); border-color: #B7E6ED; }
body:not(.klas-modus) .luister:hover { background: #CDF0F5; }
body:not(.klas-modus) .seg { background: #fff; }
body:not(.klas-modus) .seg button.aan { color: #06323B; }

/* Kopbalk en login */
body:not(.klas-modus) .kopbalk { background: rgba(255,255,255,.88); border-bottom: 1px solid var(--lijn); box-shadow: 0 2px 14px rgba(11,42,51,.05); }
body:not(.klas-modus) .logo { color: var(--tekst); }
body:not(.klas-modus) .logo-blok { background: linear-gradient(135deg, #0B2A33, #1E4A55); box-shadow: 0 6px 14px rgba(11,42,51,.25); }
body:not(.klas-modus) .nav a:hover, body:not(.klas-modus) .nav a.aan { background: #E3F7FA; color: var(--diep); }
body:not(.klas-modus) .login-wrap { background: linear-gradient(120deg, rgba(11,42,51,.55), rgba(11,42,51,.15)), url(https://dmszdkpuvjccghfxnrvd.supabase.co/storage/v1/object/public/media/t01/cover.jpg) center/cover, linear-gradient(160deg, #D8F1F5, #FFF3E0); }
body:not(.klas-modus) .login-kaart { background: rgba(255,255,255,.96); box-shadow: 0 24px 70px rgba(11,42,51,.28); }
body:not(.klas-modus) .veld input, body:not(.klas-modus) .veld select, body:not(.klas-modus) .veld textarea { background: #F6FAFB; border-color: var(--lijn); }
body:not(.klas-modus) .veld input:focus, body:not(.klas-modus) .veld textarea:focus { background: #fff; border-color: var(--cyaan-d); box-shadow: 0 0 0 4px rgba(95,212,224,.25); }

/* Kaarten, thema's en lessen: wit met zachte schaduw en grotere foto's */
body:not(.klas-modus) .kaart, body:not(.klas-modus) .oef, body:not(.klas-modus) .les-kaart, body:not(.klas-modus) .les-tabs, body:not(.klas-modus) .thema-kaart {
  background: #fff; box-shadow: 0 4px 18px rgba(11,42,51,.07);
}
body:not(.klas-modus) .thema-kaart { border-radius: 22px; border-color: transparent; }
body:not(.klas-modus) .thema-kaart:hover { transform: translateY(-5px) rotate(-.3deg); box-shadow: 0 16px 34px rgba(11,42,51,.16); border-color: transparent; }
body:not(.klas-modus) .thema-kaart .tk-foto { aspect-ratio: 4/3; background: linear-gradient(135deg, #CDEFF3, #FFEFD2); }
body:not(.klas-modus) .thema-kaart .tk-nr { background: #fff; color: var(--diep); border-color: transparent; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
body:not(.klas-modus) .balk { background: #E4EEF0; }
body:not(.klas-modus) .balk > i { box-shadow: none; }
body:not(.klas-modus) .thema-held { border: 0; border-radius: 28px; min-height: 280px; box-shadow: 0 14px 40px rgba(11,42,51,.2); background: linear-gradient(135deg, #CDEFF3, #FFEFD2); }
body:not(.klas-modus) .thema-held::after { background: linear-gradient(0deg, rgba(11,42,51,.86) 0%, rgba(11,42,51,.15) 65%, transparent); }
body:not(.klas-modus) .thema-held .th-in, body:not(.klas-modus) .thema-held h1, body:not(.klas-modus) .thema-held p { color: #fff; }
body:not(.klas-modus) .thema-held .th-nr { color: #A8EEF5; }
body:not(.klas-modus) .doelen span { background: #fff; color: var(--tekst); border-color: transparent; }
body:not(.klas-modus) .les-kaart { border-color: transparent; border-radius: 20px; }
body:not(.klas-modus) .les-kaart:hover { border-color: transparent; box-shadow: 0 12px 28px rgba(11,42,51,.14); transform: translateY(-2px); }
body:not(.klas-modus) .les-kaart img { width: 104px; height: 78px; border-radius: 14px; background: linear-gradient(135deg, #CDEFF3, #FFEFD2); }
body:not(.klas-modus) .les-kaart .lk-nr { color: var(--diep); }
body:not(.klas-modus) .ring { background: conic-gradient(var(--cyaan-d) calc(var(--p) * 1%), #E4EEF0 0); }
body:not(.klas-modus) .ring::before { background: #fff; color: var(--tekst); }
body:not(.klas-modus) .kruimel, body:not(.klas-modus) .kruimel a { color: var(--zacht); }

/* Lespagina */
body:not(.klas-modus) .les-tabs { border-color: transparent; border-radius: 20px; }
body:not(.klas-modus) .les-tabs a.aan { background: #E3F7FA; color: var(--tekst); box-shadow: inset 4px 0 0 var(--cyaan-d); }
body:not(.klas-modus) .les-tabs a:hover { background: #F0F8FA; }
body:not(.klas-modus) .les-tabs .tnr2 { background: #EAF4F6; }
body:not(.klas-modus) .oef { border-color: transparent; border-radius: 22px; padding: 22px 24px; }
body:not(.klas-modus) .oef-nr { color: #06323B; border-radius: 12px; }
body:not(.klas-modus) .oef:nth-of-type(3n+2) .oef-nr { background: var(--geel); }
body:not(.klas-modus) .oef:nth-of-type(3n+3) .oef-nr { background: var(--koraal); color: #fff; }

/* Oefeningen */
body:not(.klas-modus) .woordkaart, body:not(.klas-modus) .koppel-el, body:not(.klas-modus) .fotovak, body:not(.klas-modus) .mc-item,
body:not(.klas-modus) .volg-item, body:not(.klas-modus) .bak { background: #F6FAFB; border-color: var(--lijn); }
body:not(.klas-modus) .woordkaart:hover { background: #E3F7FA; border-color: var(--cyaan-d); transform: translateY(-2px); }
body:not(.klas-modus) .tekst, body:not(.klas-modus) .vertaling, body:not(.klas-modus) .voorbeeld, body:not(.klas-modus) .situatie,
body:not(.klas-modus) .hulpzinnen, body:not(.klas-modus) .checklist, body:not(.klas-modus) .inzend-tekst { background: #F3F9FA; }
body:not(.klas-modus) .situatie { background: var(--zon); }
body:not(.klas-modus) .tekst { border-color: transparent; border-left: 5px solid var(--cyaan); border-radius: 6px 16px 16px 6px; }
body:not(.klas-modus) .flitskaart { background: linear-gradient(135deg, #FFFFFF, #E6F7FA); border: 0; box-shadow: 0 14px 34px rgba(11,42,51,.16); color: var(--tekst); }
body:not(.klas-modus) .flitskaart.om { background: linear-gradient(135deg, #FFF8E5, #FFEAC2); }
body:not(.klas-modus) .chip { background: #fff; color: var(--tekst); border: 1px solid var(--lijn); box-shadow: 0 2px 0 #CFE0E4; }
body:not(.klas-modus) .gat-in, body:not(.klas-modus) .dictee-in, body:not(.klas-modus) .getal-in, body:not(.klas-modus) .vrij-in,
body:not(.klas-modus) .schrijf-in { background: #fff; border-color: var(--lijn); }
body:not(.klas-modus) .schrijf-in:focus { border-color: var(--cyaan-d); box-shadow: 0 0 0 4px rgba(95,212,224,.25); }
body:not(.klas-modus) .koppel-el.sel { border-color: var(--cyaan-d); box-shadow: 0 0 0 3px rgba(95,212,224,.35); }
body:not(.klas-modus) .optie.gekozen { color: #06323B; }
body:not(.klas-modus) .dictee-item, body:not(.klas-modus) .nazeg-item { border-bottom-color: #E4EEF0; }

/* Tabellen, docent en meldingen */
body:not(.klas-modus) table.tabel th, body:not(.klas-modus) table.tabel td { border-bottom-color: #E4EEF0; }
body:not(.klas-modus) table.tabel th { background: #F0F7F9; }
body:not(.klas-modus) table.tabel tr:hover td { background: #F6FAFB; }
body:not(.klas-modus) .cel.c0 { background: #F0F5F6; }
body:not(.klas-modus) .cel.c1 { background: var(--fout-bg); }
body:not(.klas-modus) .modal { background: #fff; border: 0; box-shadow: 0 30px 80px rgba(11,42,51,.35); }
body:not(.klas-modus) .toast { background: #0B2A33; color: #fff; }
body:not(.klas-modus) .demo-balk { color: #2b2000; }

/* Klassikaal scherm blijft donker */
body.klas-modus { color-scheme: dark;
  --vlak: rgba(255,255,255,.055); --vlak2: rgba(255,255,255,.09); --lijn: rgba(255,255,255,.14);
  --tekst: #FFFFFF; --zacht: rgba(255,255,255,.72); --stil: rgba(255,255,255,.5);
  --gloed: 0 0 0 1px rgba(95,212,224,.35), 0 0 24px rgba(95,212,224,.25);
  --goed: #5EE08A; --goed-bg: rgba(94,224,138,.14); --fout: #FF7A7A; --fout-bg: rgba(255,122,122,.14);
}
body:not(.klas-modus) .lid { color: var(--koraal); }
body:not(.klas-modus) .woordkaart img { background: linear-gradient(135deg, #CDEFF3, #FFEFD2); }
body:not(.klas-modus) .gat-in::placeholder, body:not(.klas-modus) .gat-leeg { color: var(--diep); }

/* Leesbaarheid: titel op de foto, uitleg in een eigen witte kaart eronder */
body:not(.klas-modus) .thema-held { min-height: 240px; margin-bottom: 14px; }
body:not(.klas-modus) .thema-held::after { background: linear-gradient(0deg, rgba(8,30,37,.92) 0%, rgba(8,30,37,.55) 38%, rgba(8,30,37,0) 75%); }
body:not(.klas-modus) .thema-held h1 { margin: 2px 0 0; text-shadow: 0 2px 12px rgba(0,0,0,.45); }
body:not(.klas-modus) .thema-held .th-nr { color: #BDF3F8; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
body:not(.klas-modus) .thema-held .th-sub { color: #fff; opacity: .95; font-size: 1.05rem; margin-top: 2px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.thema-intro { background: #fff; border-radius: 22px; padding: 20px 24px; margin-bottom: 26px; box-shadow: 0 4px 18px rgba(11,42,51,.07); }
.thema-intro p { margin: 0; max-width: 780px; color: var(--tekst); font-size: 1.05rem; line-height: 1.55; }
body:not(.klas-modus) .thema-intro .doelen span { background: #E3F7FA; color: var(--tekst); border: 1px solid #B7E6ED; }

/* ---- Licenties, klassen, beoordeling, grammaticatrainer ---- */
.lic-pil { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.lic-pil.ok { background: var(--goed-bg); color: #177A44; }
.lic-pil.bijna { background: var(--zon); color: #8A5A00; }
.lic-pil.uit { background: var(--fout-bg); color: #B03A30; }
.lic-banner { background: var(--zon); border: 1px solid #F1D38A; color: #6B4B00; border-radius: 14px; padding: 10px 16px; margin-bottom: 14px; font-weight: 600; }
.lic-banner a { color: #6B4B00; text-decoration: underline; }

.klassen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 26px; }
.klas-kaart { background: #fff; border: 1px solid var(--lijn); border-radius: 18px; padding: 18px; box-shadow: var(--gloed); }
.kk-naam { font-size: 1.15rem; font-weight: 800; color: var(--tekst) !important; text-decoration: none; display: block; margin-bottom: 4px; }
.klas-kaart .balk { background: #E4EFF2; }
tfoot td { border-top: 2px solid var(--lijn); padding-top: 8px; }

.status-pil.verbeter { background: #FFE2D3; color: #A4411A; }
.feedback.verbeter { background: #FFF1E8; border-color: #F6B898; }
.status-regel.verbeter { color: #A4411A; }
.status-regel.voldoende { color: #177A44; }
.knop.goed { background: var(--goed); color: #fff; box-shadow: 0 6px 16px rgba(34,164,93,.3); }
.knop.goed:hover { background: #2BB96A; }
body:not(.klas-modus) .knop.rood { color: #fff; }
.oude-versie { border-left: 3px solid var(--lijn); padding: 4px 0 4px 12px; margin: 8px 0; }
.oude-versies summary, details summary { cursor: pointer; font-weight: 600; color: var(--diep); }
.les-kaart.klas-nu { border-color: var(--cyaan-d); background: #F0FBFD; }

.gram-kop { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 10px; }
.gram-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.gram-kaart { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--lijn); border-radius: 16px; padding: 14px 16px; text-decoration: none; color: var(--tekst) !important; transition: .15s; }
.gram-kaart:hover { transform: translateY(-2px); box-shadow: var(--gloed); border-color: var(--cyaan-d); }
.gram-kaart.klaar { background: #F2FBF6; border-color: #BFE6CF; }
.gk-nr { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--vlak2); color: var(--diep); font-weight: 800; display: grid; place-items: center; }
.gk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gk-t span { font-size: .85rem; color: var(--zacht); }
.gk-t .en { color: var(--stil); font-size: .8rem; }
.ring.klein-ring { width: 44px; height: 44px; background: conic-gradient(var(--cyaan-d) calc(var(--p) * 1%), #E4EFF2 0); }
.ring.klein-ring::before { width: 35px; height: 35px; background: #fff; font-size: .7rem; color: var(--tekst); }
.gram-link { background: var(--zon); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
@media (max-width: 640px) { .gram-grid { grid-template-columns: 1fr; } }

/* Telefoon: navigatie als vaste balk onderaan met tekst */
select.mini-knop, .veld select, .veld input { max-width: 100%; }
@media (max-width: 860px) {
  body:not(.klas-modus) .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; background: #fff; border-top: 1px solid var(--lijn); box-shadow: 0 -6px 20px rgba(11,42,51,.08);
    display: flex; flex-wrap: nowrap; gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); overflow-x: auto; }
  body:not(.klas-modus) .nav a { flex: 1 0 auto; min-width: 64px; text-align: center; padding: 8px 6px; font-size: .72rem; line-height: 1.15; border-radius: 12px; }
  body:not(.klas-modus) .pagina { padding-bottom: 84px; }
  body:not(.klas-modus) .kopbalk { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .tabel-wrap { max-width: calc(100vw - 32px); overflow-x: auto; }
}

/* Gelijke themakaarten: vaste fotoverhouding, foto vult het vak, tekst en balk op vaste plek */
.thema-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: stretch; }
.thema-kaart { height: 100%; }
body:not(.klas-modus) .thema-kaart .tk-foto { aspect-ratio: 4/3; flex: none; width: 100%; overflow: hidden; }
.thema-kaart .tk-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thema-kaart .tk-body { display: flex; flex-direction: column; gap: 4px; min-height: 118px; }
.thema-kaart .tk-body b { font-size: 1.05rem; line-height: 1.25; }
.thema-kaart .tk-body .klein { flex: 1; line-height: 1.3; }
.thema-kaart .tk-body .balk { margin-top: auto; flex: none; }
.les-lijst .les-kaart, .klas-keuze .les-kaart { min-height: 84px; }
.les-kaart > img { flex: none; width: 96px; height: 64px; object-fit: cover; }

/* Woordenlijst: alle kaarten even groot, zonder foto's, met taalkeuze */
.woorden-balk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.woorden-balk .seg { margin-bottom: 0; }
.taal-veld { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--zacht); }
.taal-kies { border: 1px solid var(--lijn); border-radius: 999px; padding: 6px 12px; background: #fff; color: var(--tekst); font: inherit; }
.woordgrid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-items: stretch !important; gap: 10px; }
.woordkaart { min-height: 78px; justify-content: space-between; gap: 6px; }
.wk-boven { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.wk-luister { font-size: .85rem; opacity: .45; flex: none; }
.woordkaart:hover .wk-luister { opacity: 1; }
.wk-en { min-height: 1.2em; }
.fk-woord { text-align: center; }
.wk-en[dir="rtl"] { text-align: right; }

/* Proefles */
.proef-balk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; padding: 10px 16px; background: #fff4d6; color: #5b4300; border-bottom: 1px solid #f0d58a; font-size: .95rem; }
.proef-balk .klein-knop { padding: 6px 12px; font-size: .9rem; }