/**
 * Parlo huisstijl -- gedeelde design tokens en componenten.
 * Elke pagina laadt dit bestand en gebruikt deze klassen i.p.v. eigen stijlen
 * te verzinnen, zodat het overal hetzelfde "speelse" gevoel heeft.
 *
 * Kernregel (herzien): ÉÉN primaire actiekleur (--primary) voor élke
 * primaire knop, overal. Semantische kleuren (groen/rood/goud) betekenen
 * altijd hetzelfde en worden nooit als alternatieve knopkleur gebruikt --
 * zie docs/huisstijl.md voor de onderbouwing.
 */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Inter:wght@400;600&display=swap');

:root {
  --page:#FFF9EE; --ink:#241B33; --inkSoft:#8A7F98; --card:#FFFFFF; --line:#EEE3C8;

  /* Eén primaire actiekleur -- overal, geen concurrerende varianten meer */
  --primary:#F0509B; --primaryDeep:#A62368;
  --primaryGradientFrom:#FF6F59; --primaryGradientTo:#F0509B; /* alleen voor hero/merkmomenten */

  /* Semantisch, nooit decoratief */
  --green:#3FC97A; --greenDeep:#279357;
  --red:#E5484D; --redDeep:#B23A3E;
  --gold:#FFB648; --goldDeep:#B4780C;

  /* Neutrale/informatieve tint, spaarzaam (bv. chat-bubbels, niet knoppen) */
  --teal:#1CB3A6; --tealDeep:#0D6B62;

  --night:#1B1332; --nightSoft:#2C2149;
  --locked:#D8CFBE;

  /* Legacy-aliassen zodat bestaande pagina's niet meteen breken tijdens de uitrol */
  --coral:#FF6F59; --coralDeep:#C6432F; --pink:#F0509B; --pinkDeep:#A62368;
  --blue:#4C9EEB; --blueDeep:#2C6FB0;
}

* { box-sizing: border-box; }
body {
  margin:0; font-family:'Inter',sans-serif; background:var(--page); color:var(--ink);
  padding-bottom:76px; overflow-x:hidden; /* vangnet voor de 100vw-truc van .parlo-topbar--bar hieronder */
}
.parlo-wrap { max-width:560px; margin:0 auto; padding:1.5rem; }

/* Topbar: terugknop + merknaam + taalschakelaar, op elke pagina behalve home.
   Twee smaken: compact (standaard, bv. de kleine kaart op login.html) en
   --bar (vol-breed met eigen achtergrond, zie hieronder) -- opt-in via
   Parlo.renderHeader(el, {bar:true}), voorlopig alleen op index.html. */
.parlo-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; gap:10px; }
.parlo-topbar-left { display:flex; align-items:center; gap:12px; }
.parlo-back-btn {
  width:36px; height:36px; border-radius:50%; border:none; background:var(--card);
  border:2px solid var(--line); color:var(--ink); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; text-decoration:none;
}
.parlo-back-btn:hover { border-color:var(--primary); color:var(--primary); }

/* Merk-logo: icoon in een badge + apart woordmerk, i.p.v. één kleine platte
   emoji+tekst-regel -- geeft het logo duidelijk meer visueel gewicht. */
.parlo-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.parlo-brand-icon {
  width:38px; height:38px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  background: linear-gradient(135deg, var(--primaryGradientFrom), var(--primaryGradientTo));
}
.parlo-brand-word { font-family:'Baloo 2',sans-serif; font-size:24px; font-weight:800; color:var(--ink); }

.parlo-subtitle { font-size:13px; color:var(--inkSoft); font-weight:600; margin:2px 0 22px; }

/* "Dit klopt niet"-knop in lesmodus, zie Parlo.renderReportButton() in
   parlo.js -- bewust klein en gedempt (geen alarmerende rode knop overal),
   dit is een vangnet voor uitzonderingen, geen primaire actie. */
.parlo-report-btn-wrap { text-align:right; margin:-14px 0 14px; }
.parlo-report-btn {
  background:transparent; border:none; color:var(--inkSoft); font-size:12px; font-weight:600;
  cursor:pointer; padding:4px 8px; border-radius:8px; font-family:inherit;
}
@media (hover: hover) {
  .parlo-report-btn:hover { color:var(--redDeep); background:#FDEBE8; }
}
.parlo-report-btn:disabled { opacity:0.7; cursor:default; }

/* Navigatielinks in de topbalk, alleen zichtbaar vanaf desktop-breedte --
   op mobiel doet de onderste tabbalk (.parlo-bottomnav) hetzelfde werk. */
.parlo-header-nav { display:none; }
@media (min-width: 900px) {
  .parlo-header-nav { display:flex; gap:28px; align-items:center; }
  .parlo-header-nav a {
    text-decoration:none; font-size:14px; font-weight:700; color:var(--inkSoft); white-space:nowrap;
    padding-bottom:4px; border-bottom:2px solid transparent;
  }
  .parlo-header-nav a:hover { color:var(--ink); }
  .parlo-header-nav a.active { color:var(--primary); border-bottom-color:var(--primary); }
}

/* Vol-breed navbar-variant: een echte balk met eigen achtergrond die tot de
   viewportranden loopt, ongeacht de max-breedte/padding van de omringende
   .parlo-wrap (klassieke "full-bleed"-truc). Bewust NIET de standaard --
   op een kleine gecentreerde kaart (login.html) zou dit een balk midden op
   de pagina laten losbarsten, vandaar de opt-in. margin-top:-1.5rem heft
   precies de padding-top van de omringende .parlo-wrap op, zodat de balk
   vlak tegen de bovenkant van de pagina aansluit. */
.parlo-topbar--bar {
  display:block;
  position:relative; left:50%; right:50%; width:100vw; margin-left:-50vw; margin-right:-50vw;
  margin-top:-1.5rem; margin-bottom:0;
  background:var(--card); border-bottom:1px solid var(--line);
}
.parlo-topbar--bar .parlo-topbar-inner {
  max-width:1180px; margin:0 auto; padding:16px 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

.parlo-lang-switcher { display:flex; gap:6px; }
.parlo-lang-btn { padding:4px 12px; font-size:12px; font-weight:700; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--inkSoft); cursor:pointer; }
.parlo-lang-btn.active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* Uitleg-kadertje: korte, bondige uitleg bovenaan een module */
.parlo-explain {
  display:flex; gap:10px; align-items:flex-start; background:#FFF3D6; border:2px solid var(--gold);
  border-radius:16px; padding:14px 16px; margin-bottom:20px; font-size:14px; line-height:1.5; color:var(--ink);
}
.parlo-explain .icon { font-size:18px; flex-shrink:0; }

/* Chunky knoppen: 3D-schaduwrand, indrukbaar -- ÉÉN primaire kleur voor alles behalve semantische feedback */
.parlo-btn { border:none; border-radius:999px; font-weight:700; cursor:pointer; font-family:inherit;
  transition: transform .05s, box-shadow .05s; }
.parlo-btn:active { transform: translateY(3px); box-shadow:none !important; }
.parlo-btn-primary { background:var(--primary); color:#fff; box-shadow:0 4px 0 var(--primaryDeep); }
.parlo-btn-hero { background:linear-gradient(90deg,var(--primaryGradientFrom),var(--primaryGradientTo)); color:#fff;
  box-shadow:0 4px 0 var(--primaryDeep); } /* alleen voor het ene grote "start les"-moment */
.parlo-btn-success { background:var(--green); color:#fff; box-shadow:0 4px 0 var(--greenDeep); }
.parlo-btn-danger { background:var(--red); color:#fff; box-shadow:0 4px 0 var(--redDeep); }
.parlo-btn-ghost { background:transparent; color:var(--inkSoft); border:2px solid var(--line); box-shadow:none; }
.parlo-btn-lg { width:100%; padding:14px 0; font-size:16px; }
.parlo-btn-md { padding:11px 20px; font-size:14px; }

/* Oude klasnamen als alias, tot de volledige uitrol (zie docs/huisstijl.md) */
.parlo-btn-coral, .parlo-btn-pink, .parlo-btn-teal, .parlo-btn-blue { background:var(--primary); color:#fff; box-shadow:0 4px 0 var(--primaryDeep); }
.parlo-btn-green { background:var(--green); color:#fff; box-shadow:0 4px 0 var(--greenDeep); }

.parlo-card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.5rem; }

.parlo-icon-btn { width:40px; height:40px; border-radius:50%; border:none; background:var(--card);
  border:2px solid var(--line); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.parlo-icon-btn:hover { border-color:var(--primary); }

/* Onderste tabbalk -- mobile-first navigatiepatroon, bereidt een toekomstige native app voor */
.parlo-bottomnav {
  position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:space-around;
  background:#fff; border-top:1px solid var(--line); padding:8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index:50;
}
.parlo-bottomnav a {
  display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none;
  color:var(--inkSoft); font-size:11px; font-weight:700; padding:4px 14px; border-radius:12px;
}
.parlo-bottomnav a.active { color:var(--primary); }
.parlo-bottomnav a .nav-icon { font-size:20px; }

@media (min-width: 900px) {
  /* Op desktop staan dezelfde links al in de topbalk (.parlo-header-nav),
     dus geen dubbele/overbodige balk onderaan de pagina.
     BELANGRIJK: deze regel moet NA de kale .parlo-bottomnav-regel hierboven
     staan. Stond hij ervóór (zoals eerder het geval was), dan wint bij
     gelijke specificiteit altijd de latere, onvoorwaardelijke regel --
     ongeacht de media query -- en bleef de balk zichtbaar op elke
     breedte. Precies dat is een keer gemeld en hier gecorrigeerd. */
  .parlo-bottomnav { display:none; }
  body { padding-bottom: 0; }
}

/* Admin-navigatiebalk: gedeeld over alle admin-*.html-pagina's */
.parlo-admin-nav { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; border-bottom:1px solid var(--line); padding-bottom:14px; }
.parlo-admin-nav-item { padding:7px 14px; border-radius:999px; font-size:13px; font-weight:700; color:var(--inkSoft);
  text-decoration:none; border:2px solid var(--line); background:var(--card); }
.parlo-admin-nav-item.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.parlo-admin-nav-item:hover:not(.active) { border-color:var(--teal); color:var(--ink); }

/* Impersonatie-banner: verschijnt in de header op ELKE pagina zolang een
   admin als een andere gebruiker is ingelogd (zie /api/auth/me.impersonating) */
.parlo-impersonate-banner { display:flex; align-items:center; gap:8px; background:#FFF3D6; border:2px solid var(--gold);
  border-radius:999px; padding:5px 12px 5px 14px; font-size:12px; font-weight:700; color:var(--goldDeep); }
.parlo-impersonate-banner button { border:none; background:var(--ink); color:#fff; border-radius:999px;
  padding:4px 10px; font-size:11px; font-weight:800; cursor:pointer; }