/*
 * stijl.css - vormgeving van de app.
 *
 * Mobiel eerst. Managers pakken dit erbij op hun telefoon tussen twee
 * gesprekken door, dus alles is ontworpen voor een smal scherm en wordt op een
 * groter scherm alleen ruimer. Knoppen zijn minimaal 44 pixels hoog zodat ze
 * met een duim te raken zijn.
 *
 * De huisstijl staat NIET in dit bestand maar in config.php. Zie de uitleg
 * hieronder bij :root.
 */

/*
 * DE KLEUREN HIERONDER ZIJN ALLEEN EEN TERUGVAL.
 * De echte huisstijl staat in config.php onder 'huisstijl' en wordt door
 * app/views/laag_boven.php als kleurinstellingen boven deze regels gezet.
 * In dit bestand staat dus met opzet geen enkele klantkleur: zo kan de app
 * verhuizen naar een andere huisstijl zonder dat er code aangepast wordt.
 */
:root {
  --papier:       #ffffff;
  --achtergrond:  #f5f5f5;
  --inkt:         #1f1f23;
  --inkt-kop:     #1f1f23;
  --inkt-zacht:   #5b5b66;
  --lijn:         #e3e3e3;
  --accent:        #3b3b6d;
  --accent-donker: #2f2f5c;
  --accent-tekst: #ffffff;
  --accent-donker-tekst: #ffffff;
  --accent-zacht: #eeeef5;
  --actie:        #c98a12;   /* "hier begint iets": het actiekader en de tegel In te plannen */
  --actie-tekst:  #ffffff;
  --actie-zacht:  #fdf3df;
  --let-op:       #c98a12;
  --fout:         #b3261e;
  --stil:         #b3261e;
  --goed:         #1d5b2a;
  --rond:         14px;
  --schaduw:      0 2px 10px rgba(16, 24, 40, .07);
  --lettertype:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --lettertype-koppen: var(--lettertype);
}

/* De zachte vlakken worden uit de kleuren hierboven afgeleid, zodat er per
   huisstijl maar een handjevol kleuren ingesteld hoeft te worden.

   Eerst vaste waarden als terugval. Een telefoon die color-mix niet kent
   (ongeveer van voor 2023) krijgt deze, en houdt dus leesbare meldingen in
   plaats van onzichtbare tekst. */
:root {
  --let-op-vlak:  #fdf3df;
  --let-op-rand:  #f4dca6;
  --let-op-tekst: #6b4a06;
  --fout-vlak:    #fbeae9;
  --fout-rand:    #eab9b6;
  --goed-vlak:    #e8f1ea;
  --goed-rand:    #b9d4c0;
  --merk-vlak:    #eef0f3;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --let-op-vlak:  color-mix(in srgb, var(--let-op) 16%, #ffffff);
    --let-op-rand:  color-mix(in srgb, var(--let-op) 40%, #ffffff);
    --let-op-tekst: color-mix(in srgb, var(--let-op) 75%, #000000);
    --fout-vlak:    color-mix(in srgb, var(--fout) 10%, #ffffff);
    --fout-rand:    color-mix(in srgb, var(--fout) 30%, #ffffff);
    --goed-vlak:    color-mix(in srgb, var(--goed) 12%, #ffffff);
    --goed-rand:    color-mix(in srgb, var(--goed) 30%, #ffffff);
    --merk-vlak:    color-mix(in srgb, var(--lijn) 60%, #ffffff);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--achtergrond);
  color: var(--inkt);
  font-family: var(--lettertype);
  font-size: 16px;
  line-height: 1.5;

  /* De pagina mag nooit zijwaarts schuiven. Uit Notion komen soms hele lange
     woorden zonder spatie, zoals een Outlook-bericht-id of een lange URL. Die
     duwden het scherm eerder breder dan de telefoon. */
  overflow-x: hidden;
}

/* Lange woorden breken af in plaats van uit het scherm te lopen. */
.lopende-tekst,
.tijdlijn-tekst,
.paren dd,
.kaart-regel,
.kaart-actie,
.kaart-voet,
.elders-lijst,
.blok p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Technische regels uit de geplande taken: ingeklapt, en als ze open staan
   scrollen ze binnen hun eigen kader in plaats van de pagina mee te trekken. */
.techniek { margin-top: 12px; font-size: 12px; color: var(--inkt-zacht); }
.techniek summary { cursor: pointer; }
.techniek pre {
  margin-top: 8px;
  padding: 8px;
  background: var(--achtergrond);
  border-radius: 6px;
  overflow-x: auto;
  white-space: pre;
}

/* Koppen en namen in het koplettertype (bij JGP: Jost) en in de kopkleur;
   de lopende tekst houdt het gewone lettertype (Inter). Allebei komen ze
   uit config.php. Regels verderop die een kop bewust grijs maken, zoals
   .blok h2, winnen hiervan omdat ze specifieker zijn. */
h1, h2, h3, h4, .kop, .kaart-naam, .balk-titel {
  font-family: var(--lettertype-koppen);
  color: var(--inkt-kop);
}

a { color: var(--accent-donker); }

/* ------------------------------ balk ------------------------------ */

/* Wit in plaats van donker, met een zachte schaduw in plaats van een harde
 * rand: zelfde opzet als de topbar uit de jgp-hub-artifact (02-09-2026,
 * verzoek Sofie om de vormgeving van die artifact over te nemen). */
.balk {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--papier);
  color: var(--inkt);
  box-shadow: var(--schaduw);
}
.balk-titel {
  color: var(--accent-donker);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 15px;
}
.balk-rechts { display: flex; align-items: center; gap: 4px; font-size: 13px; flex-wrap: wrap; }
.balk-link {
  color: var(--inkt-zacht);
  text-decoration: none;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
}
.balk-link:hover { background: var(--accent-zacht); color: var(--accent-donker); }
.balk-link.actief { background: var(--accent); color: var(--accent-tekst); }
.balk-wie { display: flex; flex-direction: column; line-height: 1.2; text-align: right; margin-left: 4px; }
.balk-rol { color: var(--inkt-zacht); font-size: 11px; }

/* ---------------------------- inhoud ------------------------------ */

.inhoud {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 14px 40px;
}

.kop { font-size: 22px; margin: 8px 0 2px; }
.onderkop { margin: 0 0 16px; color: var(--inkt-zacht); font-size: 14px; }
.grijs { color: var(--inkt-zacht); }
.scheider { margin: 0 6px; color: var(--lijn); }
.terug { margin: 0 0 12px; font-size: 14px; }

/* ---------------------------- knoppen ----------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--accent-donker);
  border-radius: 999px;
  background: var(--accent-donker);
  color: var(--accent-donker-tekst);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.knop-leeg { background: var(--papier); color: var(--accent-donker); }
.knop-groot { width: 100%; font-size: 16px; }
.knop-bellen { background: var(--inkt); border-color: var(--inkt); }

/* ---------------------------- filters ----------------------------- */

.filters {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  padding: 12px;
  margin-bottom: 16px;
}
.zoekbalk {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  font-size: 16px;   /* 16px voorkomt dat iOS inzoomt bij het tikken */
}
.filter-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.filter-rij select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--papier);
  font-size: 15px;
}
.filter-knoppen { display: flex; gap: 8px; margin-top: 10px; }

.signaal {
  display: block;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--fout-rand);
  border-radius: var(--rond);
  background: var(--fout-vlak);
  color: var(--fout);
  font-weight: 600;
  text-decoration: none;
}

/* ----------------------------- lijst ------------------------------ */

.lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.kaart {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
}
.kaart-afgerond { opacity: .62; }
.kaart-stil { border-left: 4px solid var(--stil); }
.kaart-link { display: block; padding: 12px 14px; color: inherit; text-decoration: none; }

.kaart-boven { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kaart-naam { font-size: 17px; font-weight: 700; }
.kaart-regel { color: var(--inkt-zacht); font-size: 14px; margin-top: 2px; }
.kaart-merken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kaart-gesprek { margin-top: 8px; font-size: 14px; font-weight: 600; }
.kaart-voet { margin-top: 8px; font-size: 13px; color: var(--inkt-zacht); }
.kaart-actie { margin-top: 6px; font-size: 13px; }
.stil-tekst { color: var(--stil); font-weight: 600; }

.merk {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--merk-vlak);
  color: var(--inkt-zacht);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.merk-fase { background: var(--inkt); color: #fff; }
.merk-wie  { background: var(--accent-zacht); color: var(--accent-donker); }

.vlag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
}
.vlag-stil { background: var(--fout-vlak); color: var(--stil); }

/* ---------------------------- profiel ----------------------------- */

.profiel-kop { margin-bottom: 14px; }
.profiel-kop h1 { font-size: 24px; margin: 0 0 4px; }
.profiel-onder { margin: 0 0 8px; color: var(--inkt-zacht); font-size: 14px; }
.profiel-merken { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }

.blok {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  padding: 14px;
  margin-bottom: 12px;
}
.blok h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .05em; color: var(--inkt-zacht); margin: 0 0 10px; }
.blok-contact { display: flex; flex-direction: column; gap: 8px; }
.blok-contact .knop { width: 100%; }

.lopende-tekst { font-size: 15.5px; }
.paren { margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
.paren dt { font-weight: 700; font-size: 13px; color: var(--inkt-zacht); }
.paren dd { margin: 0 0 4px; }

.elders-lijst { margin: 0; padding-left: 18px; }
.elders-lijst li { margin-bottom: 4px; }

/* --------------------------- tijdlijn ----------------------------- */

.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--lijn);
}
.tijdlijn-item:first-child { padding-top: 0; }
.tijdlijn-feedback { border-left-color: var(--accent); }
.tijdlijn-datum { font-size: 12px; color: var(--inkt-zacht); }
.tijdlijn-kop { font-weight: 700; }
.tijdlijn-wie { color: var(--inkt-zacht); font-size: 13px; }
.tijdlijn-tekst { margin-top: 4px; font-size: 15px; }

/* --------------------------- meldingen ---------------------------- */

.melding-fout, .melding-let-op {
  padding: 10px 12px;
  border-radius: var(--rond);
  font-size: 14px;
}
.melding-fout   { background: var(--fout-vlak);  color: var(--fout);   border: 1px solid var(--fout-rand); }
.melding-goed   { background: var(--goed-vlak); color: var(--goed); border: 1px solid var(--goed-rand); padding: 10px 12px; border-radius: var(--rond); font-size: 14px; }

/* ------------------------- de knoppen (acties) -------------------------- */

.blok-actie { border-color: var(--accent); border-width: 2px; }
.actie-form { display: flex; flex-direction: column; gap: 10px; }

.keuze {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;          /* met een duim te raken */
  padding: 6px 10px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--papier);
  cursor: pointer;
}
.keuze input { width: 20px; height: 20px; flex: none; }
.keuze span { font-size: 15px; }

.samen { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.samen legend { padding: 0; font-size: 13px; font-weight: 700; color: var(--inkt-zacht); }

.veld { display: flex; flex-direction: column; gap: 6px; }
.veld > span { font-size: 14px; font-weight: 600; }
.veld textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  font: inherit;
  font-size: 16px;           /* 16px voorkomt inzoomen op iOS */
  resize: vertical;
}

.hint { margin: 0; font-size: 13px; color: var(--inkt-zacht); }
.melding-let-op { background: var(--let-op-vlak); color: var(--let-op-tekst); border: 1px solid var(--let-op-rand); }

.leeg-blok, .fout-blok, .inlog-blok {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  padding: 18px;
}
.fout-blok { border-color: var(--fout-rand); }
.fout-blok h1 { font-size: 20px; margin: 0 0 10px; color: var(--fout); }
.fout-uitleg { font-size: 16px; }
.fout-belangrijk { background: var(--let-op-vlak); border-radius: var(--rond); padding: 10px 12px; }
.fout-details { margin-top: 14px; font-size: 13px; }
.fout-details pre { overflow-x: auto; background: var(--achtergrond); padding: 10px; border-radius: 6px; }
.fout-hulp { font-size: 13px; color: var(--inkt-zacht); }

/* ---------------------------- inloggen ---------------------------- */

.inlog-blok h1 { font-size: 22px; margin: 0 0 6px; }
.inlog-uitleg { color: var(--inkt-zacht); margin-top: 0; }
.ontwikkel-blok { margin-top: 22px; padding-top: 16px; border-top: 2px dashed var(--lijn); }
.ontwikkel-blok h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--let-op-tekst); }
.ontwikkel-regel { margin-bottom: 6px; }
.ontwikkel-regel button {
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  background: var(--papier);
  font-size: 15px;
  cursor: pointer;
}
.ontwikkel-regel span { display: block; color: var(--inkt-zacht); font-size: 12px; }

/* ------------------------------ voet ------------------------------ */

.voet {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 14px 30px;
  color: var(--inkt-zacht);
  font-size: 12px;
}

/* ------------------------- grotere schermen ----------------------- */

@media (min-width: 620px) {
  .inhoud { padding: 24px 20px 60px; }
  .filter-rij { grid-template-columns: repeat(4, 1fr); }
  .blok-contact { flex-direction: row; }
  .blok-contact .knop { width: auto; }
  .paren { grid-template-columns: 200px 1fr; align-items: baseline; }
  .paren dt { grid-column: 1; }
  .paren dd { grid-column: 2; }
  .knop-groot { width: auto; }
}

/* =====================================================================
   HET KANDIDAATSCHERM
   Zelfde blokkentaal als het overzicht: witte kaarten met bolle hoeken op
   een rustige achtergrond. Bewust opgebouwd voor een telefoon.
   ===================================================================== */

/* --- 1. Het kopblok: alles wat zonder scrollen zichtbaar moet zijn --- */
.kopblok {
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-top: 4px solid var(--accent);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  padding: 16px 16px 14px;
  margin-bottom: 12px;
}
.kopblok h1 { font-size: 24px; line-height: 1.15; margin: 0; }
.kopblok-onder {
  color: var(--inkt-zacht);
  font-size: 14px;
  margin: 4px 0 10px;
}

.contactknoppen { display: flex; gap: 8px; margin-top: 12px; }
.contactknoppen .knop {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  font-size: 15px;
}
.contactregel {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--inkt-zacht);
  text-align: center;
  word-break: break-word;
}

/* Kleine tekeningetjes. Ze staan in de pagina zelf, er wordt niets van
   buiten geladen. */
.ico {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.snelkop .ico, .merk .ico { width: 16px; height: 16px; }
/* LinkedIn is een dichte vorm, geen lijntekening. */
.snelkop-linkedin .ico, .ico path[d^="M4.98"] { fill: currentColor; stroke: none; }

.snelkoppelingen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--lijn);
}
.snelkop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  background: var(--accent-zacht);
  color: var(--accent-donker);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.snelkop:hover { border-color: var(--accent); }
.snelkop-uit {
  background: transparent;
  color: var(--inkt-zacht);
  font-weight: 400;
}

/* --- 2. Waar staan we --- */
.stand {
  background: var(--accent-zacht);
  border: 1px solid var(--accent);
  border-radius: var(--rond);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.stand-hoofd {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--inkt);
}
.stand-regel {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--inkt);
}
.stand-gesprek { font-weight: 600; }
.stand-stil {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--stil);
}

/* --- 3. De profielblokjes --- */
.blok-profiel h2 { color: var(--accent-donker); }
.blok-profiel + .blok-profiel { margin-top: 10px; }

/* --- 6. Alleen voor Sofie --- */
.blok-intern {
  background: transparent;
  border-style: dashed;
}
.blok-intern summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--inkt-zacht);
}
.blok-intern h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--inkt-zacht);
  margin: 14px 0 4px;
}
.blok-intern pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  background: var(--achtergrond);
  border-radius: 6px;
  padding: 8px;
}

/* Op een breed scherm hoeft de tekst niet de hele breedte te vullen. */
@media (min-width: 720px) {
  .contactknoppen .knop { flex: 0 1 auto; min-width: 150px; }
}

/* --- Feedback in de tijdlijn, onder het gesprek waar hij bij hoort --- */
.tijdlijn-feedback {
  margin-top: 6px;
  font-size: 14px;
  color: var(--inkt);
}
.oordeel {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-right: 6px;
  vertical-align: 1px;
}
.oordeel-ja      { background: var(--goed);  color: #fff; }
.oordeel-nee     { background: var(--fout);  color: #fff; }
.oordeel-twijfel { background: var(--let-op); color: var(--inkt); }

/* =====================================================================
   HET ACTIEBLOK
   Dit is het enige blok waar iemand iets MOET doen. Het mag er daarom
   anders uitzien dan de leesblokken: opvallender, met genummerde stappen
   zodat je in een oogopslag ziet wat er van je gevraagd wordt.
   ===================================================================== */
.blok-actie {
  border: 2px solid var(--actie);
  background: var(--papier);
  padding: 0;
  overflow: hidden;
}
.actie-kop {
  background: var(--actie);
  color: var(--actie-tekst);
  padding: 12px 16px;
}
.actie-kop h2 {
  margin: 0;
  color: var(--actie-tekst);
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
}
.actie-kop .actie-uitleg {
  margin: 2px 0 0;
  font-size: 13px;
  opacity: .92;
}
.actie-binnen { padding: 14px 16px 16px; }

.stap { margin-top: 16px; }
.stap:first-child { margin-top: 0; }
.stap-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
.stap-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--accent-zacht);
  color: var(--accent-donker);
  font-size: 13px;
}
.stap-los { font-weight: 400; color: var(--inkt-zacht); font-size: 13px; }

.keuze {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--papier);
}
.keuze:hover { border-color: var(--accent); }
.keuze input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--accent-donker); }
.keuze:has(input:checked) {
  border-color: var(--accent-donker);
  background: var(--accent-zacht);
  font-weight: 600;
}

.naast-elkaar { display: flex; flex-wrap: wrap; gap: 8px; }
.naast-elkaar .keuze { flex: 1 1 140px; margin-bottom: 0; }

.richtlijn {
  background: var(--accent-zacht);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  margin: 8px 0 0;
  font-size: 13px;
}
.richtlijn strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-donker); }

/* Tekstvakken. Standaard geeft de browser een smal vakje in een ander
   lettertype; op een telefoon is dat onwerkbaar. */
textarea,
input[type="text"],
input[type="search"] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px;          /* onder 16px zoomt iOS bij het tikken in */
  color: var(--inkt);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 10px 12px;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.45; }
textarea:focus,
input[type="text"]:focus,
input[type="search"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Het tekstvak onder "Anders" bij het salaris. */
.veld-anders { display: block; margin-top: 8px; }
.veld-anders .stap-los { display: block; margin-bottom: 4px; }
input[type="date"] {
  font: inherit;
  font-size: 16px;
  color: var(--inkt);
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 10px 12px;
}

/* De drie oordeelknoppen. Kleur pas als je kiest, niet ervoor: anders stuurt
   het scherm de manager richting een antwoord. */
.oordeelknoppen .keuze { justify-content: center; font-weight: 600; }
.keuze-ja:has(input:checked)      { border-color: var(--goed);   background: #EAF3EC; }
.keuze-nee:has(input:checked)     { border-color: var(--fout);   background: #FBECEA; }
.keuze-twijfel:has(input:checked) { border-color: var(--let-op); background: #FEF6E6; }

/* Wat de gespreksvoerders over de voorwaarden zeiden. Staat boven het
   formulier, want dit moet je gelezen hebben voor je een bod doet. */
.uit-gesprekken {
  background: var(--achtergrond);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.uit-gesprekken h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--inkt-zacht);
}
.uit-gesprekken p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.uit-gesprekken p:last-child { margin-bottom: 0; }

/* Wijst naar de achtergrondinformatie die onder het actieblok staat, zodat
   niemand denkt dat het formulier de hele pagina is. */
.naar-beneden {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--lijn);
  font-size: 13px;
  color: var(--inkt-zacht);
  text-align: center;
}

/* ---------------------------------------------------------------------
   "Wat wacht er op jou" (/mij).
   De kaart is hier geen samenvatting maar een openstaande vraag, dus hij
   krijgt een gekleurde rand per soort vraag en de vraag zelf staat groot
   onder de naam. Zo zie je op een telefoon in een oogopslag wat er van je
   gevraagd wordt zonder de kaart te openen.
   --------------------------------------------------------------------- */
.signaal-actie {
  border-color: var(--actie);
  background: var(--actie-zacht);
  color: var(--inkt-kop);
}

.kaart-open { border-left: 4px solid var(--lijn); }
.kaart-gespreksvoerder { border-left-color: var(--accent); }
.kaart-feedback        { border-left-color: var(--let-op); }
.kaart-aanbieding      { border-left-color: var(--goed); }
.kaart-sofie           { border-left-color: var(--inkt); }

.kaart-vraag {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-donker);
}

.vlag-dagen { background: var(--achtergrond); color: var(--inkt-zacht); }

/* De regel "Volgende stap" in het werkblok van Sofie. Staat visueel boven het
   dossier eronder, want dat is precies het onderscheid dat het veld maakt. */
.volgende-stap {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--accent-zacht);
  color: var(--accent-donker);
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   FEITEN. Label links, de kern rechts, de rest achter "meer".
   Op een telefoon staat het label boven de tekst, want naast elkaar wordt
   de kolom te smal om nog te lezen.
   --------------------------------------------------------------------- */
.blok-kort { border-left: 4px solid var(--accent); }

.feiten { display: flex; flex-direction: column; gap: 12px; }

.feit { display: grid; grid-template-columns: 148px 1fr; gap: 4px 14px; align-items: baseline; }
.feit-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--inkt-zacht);
}
.feit-kern { font-size: 15px; line-height: 1.45; }
.feit-meer { grid-column: 2; }
.feit-meer > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-donker);
  list-style: none;
  padding: 2px 0;
}
.feit-meer > summary::-webkit-details-marker { display: none; }
.feit-meer > summary::after { content: " +"; }
.feit-meer[open] > summary::after { content: " -"; }
.feit-rest {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--inkt-zacht);
}

@media (max-width: 560px) {
  .feit { grid-template-columns: 1fr; gap: 2px; }
  .feit-meer { grid-column: 1; }
}

/* Een heel blok inklappen. De kop blijft een kop, ook in de summary. */
.uitklap > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.uitklap > summary::-webkit-details-marker { display: none; }
.uitklap > summary h2 { display: inline; margin: 0; }
.uitklap-hint { font-size: 13px; color: var(--inkt-zacht); white-space: nowrap; }
.uitklap-hint::after { content: " +"; font-weight: 700; }
.uitklap[open] .uitklap-hint::after { content: " -"; }
.uitklap[open] > summary { margin-bottom: 10px; }
.uitklap h3 { margin: 14px 0 4px; font-size: 15px; }

/* De richtlijn naast een vraag: zelfde inklapgedrag als een feit. */
.richtlijn .feit-meer { grid-column: auto; }

/* Wie er al gesproken heeft, met de ronde ervoor. */
.gesproken { margin: 6px 0 0; font-size: 14px; color: var(--inkt-zacht); }
.gesproken-ronde {
  display: inline-block;
  min-width: 20px;
  font-weight: 700;
  color: var(--accent-donker);
}

/* ---------------------------------------------------------------------
   DE DAGENKIEZER bij "wanneer kun je?". Per werkdag twee aantikbare
   dagdelen. Rijen in plaats van een wolk losse knopjes, zodat je op een
   telefoon met je duim per dag naar beneden loopt.
   --------------------------------------------------------------------- */
.momenten { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.moment-dag {
  display: grid;
  grid-template-columns: 66px 1fr 1fr;
  gap: 8px;
  align-items: center;
}
.moment-datum { font-size: 14px; font-weight: 700; color: var(--inkt-zacht); }
.keuze.moment { margin-bottom: 0; justify-content: center; padding: 8px 6px; min-height: 42px; }
.keuze.moment input { position: absolute; opacity: 0; pointer-events: none; }
.keuze.moment span { font-size: 14px; }
.keuze.moment:has(input:checked) {
  border-color: var(--accent-donker);
  background: var(--accent-zacht);
  font-weight: 700;
}
.keuze.moment:has(input:focus-visible) { outline: 2px solid var(--accent-donker); outline-offset: 1px; }

/* ---------------------------------------------------------------------
   OVERZICHTSKAARTEN: kleur op de linkerrand per groep fases, zodat je de
   lijst kunt scannen zonder de merkjes te lezen. Neutraal = nog voor het
   eerste gesprek, paars = in gesprek, geel = aanbiedingsfase.
   --------------------------------------------------------------------- */
.kaart { border-left: 4px solid var(--lijn); transition: box-shadow .12s ease, border-color .12s ease; }
.kaart-f2, .kaart-f3 { border-left-color: var(--accent); }
.kaart-f4           { border-left-color: var(--let-op); }
.kaart:hover        { box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.kaart-link:focus-visible { outline: 2px solid var(--accent-donker); outline-offset: -2px; border-radius: var(--rond); }

/* De kaartkleuren van /mij opnieuw, omdat de basisregel hierboven later in
   dit bestand staat en anders hun linkerrand terugzet naar neutraal. */
.kaart-gespreksvoerder { border-left-color: var(--accent); }
.kaart-feedback        { border-left-color: var(--let-op); }
.kaart-aanbieding      { border-left-color: var(--goed); }
.kaart-sofie           { border-left-color: var(--inkt); }

/* ---------------------------------------------------------------------
   TUSSENKOPJES PER FASE op het overzicht. Klein en rustig: ze moeten de
   lijst indelen, niet de aandacht van de kandidaten wegtrekken.
   --------------------------------------------------------------------- */
.groep-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--inkt-zacht);
}
.groep-kop:first-of-type { margin-top: 10px; }
.groep-aantal {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--achtergrond);
  border: 1px solid var(--lijn);
  font-size: 12px;
  letter-spacing: 0;
}

/* Uitleg onder een voorgeselecteerd antwoord in het aanbiedingsformulier,
   en de regel boven de dagenkiezer die zegt waarom er dagen missen. */
.vooraf-uitleg {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--inkt-zacht);
  font-style: italic;
}
.uit-kandidaat {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--accent);
  background: var(--accent-zacht);
  border-radius: 0 var(--rond) var(--rond) 0;
  font-size: 14px;
  color: var(--accent-donker);
}

/* ---------------------------------------------------------------------
   HET AANBIEDINGSFORMULIER
   De knop met het bedrag dat de kandidaat zelf noemde krijgt een randje,
   zodat je hem tussen de andere bedragen meteen ziet. De vervolgvraag
   (autocategorie) staat ingesprongen, zodat zichtbaar is dat hij bij de
   vraag erboven hoort.
   --------------------------------------------------------------------- */
.keuze-gevraagd { border-color: var(--accent); background: var(--accent-zacht); }
.keuze span small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--accent-donker);
  letter-spacing: .02em;
}
.vervolgvraag {
  margin: 10px 0 0 14px;
  padding-left: 12px;
  border-left: 2px solid var(--lijn);
}
.stap-kop-klein { font-size: 14px; margin-bottom: 6px; }
.stap[hidden], .vervolgvraag[hidden] { display: none; }

/* De vragen die pas verschijnen als je een constructie aanvinkt, staan
   ingesprongen onder die vraag, zodat zichtbaar is dat ze erbij horen. */
.stap-vervolg {
  margin-left: 14px;
  padding-left: 12px;
  border-left: 2px solid var(--accent-zacht);
}

/* De constructienaam boven een vervolgblok (Vast dienstverband / Midlance),
   zodat een manager niet per ongeluk het verkeerde bedrag in het verkeerde
   blok zet als beide constructies tegelijk aanstaan. 01-09-2026. */
.stap-kop-constructie {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-donker);
  background: var(--accent-zacht);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------------------
   Ingeklapte groepen op het overzicht (talentpool, on hold, afgerond) en
   de uitklapper boven de filters. Allebei gewone <details>, dus geen
   JavaScript nodig.
   --------------------------------------------------------------------- */
.groep-dicht > summary,
.filter-uitklap > summary {
  cursor: pointer;
  list-style: none;
}
.groep-dicht > summary::-webkit-details-marker,
.filter-uitklap > summary::-webkit-details-marker { display: none; }

.groep-dicht > summary::before,
.filter-uitklap > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  color: var(--inkt-zacht);
}
.groep-dicht[open] > summary::before,
.filter-uitklap[open] > summary::before { content: "▾"; }

.filter-uitklap > summary {
  padding: 8px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-donker);
}
.filter-uitklap > summary:focus-visible,
.groep-dicht > summary:focus-visible { outline: 2px solid var(--accent-donker); outline-offset: 2px; }

.onderkop-rest { color: var(--inkt-zacht); }

/* Waar een gespreksronde plaatsvond, achter de naam van de gespreksvoerder. */
.gesproken-waar { color: var(--inkt-zacht); font-size: 13px; }

/* ---------------------------------------------------------------------
   STAAFJES op de cijferpagina. Geen grafiekbibliotheek: dat zou van
   buiten geladen moeten worden en dat mag niet. Dit is gewoon een balkje
   met een breedte in procenten, en het werkt ook op een telefoon.
   --------------------------------------------------------------------- */
.staafjes { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.staaf-rij { display: grid; grid-template-columns: 104px 1fr 32px; gap: 10px; align-items: center; }
.staaf-label { font-size: 14px; color: var(--inkt-zacht); }
.staaf-baan { background: var(--achtergrond); border-radius: 999px; height: 18px; overflow: hidden; }
.staaf-vulling { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.staaf-getal { font-size: 15px; font-weight: 700; text-align: right; }
.feit-kern small { display: block; font-weight: 400; font-size: 12px; color: var(--inkt-zacht); }

/* =====================================================================
   HET BORD (tabblad Pipeline), verzoek Sofie 03-09-2026
   Nagebouwd van haar dashboard (de jgp-hub-artifact): tegels met aantallen,
   filterchips, per fase een kolom, per kandidaat een kaart. Op een telefoon
   schuiven de kolommen zijwaarts; de lijst op "/" blijft daar de eerste keus.
   Kleuren komen uit de variabelen bovenaan; per fasekolom en per unit komt
   een kleur mee uit config.php (bord.fase_kleuren, bord.unit_kleuren).
   ===================================================================== */
.inhoud-breed { max-width: 1240px; }

.bord-kop { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bord-kop .kop { text-transform: uppercase; letter-spacing: .01em; font-size: 24px; }
.bord-kop .onderkop { margin: 0; }
.bord-kop .onderkop b { color: var(--accent-donker); }

.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  margin: 14px 0 16px;
}
.tegel {
  display: block;
  background: var(--papier);
  border-radius: var(--rond);
  padding: 13px 15px;
  box-shadow: var(--schaduw);
  text-decoration: none;
  color: var(--inkt);
  border: 2.5px solid transparent;
  transition: transform .08s;
}
.tegel:hover { transform: translateY(-2px); }
.tegel-actief { border-color: var(--inkt-kop); }
.tegel .num {
  font-family: var(--lettertype-koppen);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--inkt-kop);
}
.tegel .lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--inkt-zacht);
  margin-top: 5px;
}
.tegel-paars { background: var(--accent); }
.tegel-paars .num, .tegel-paars .lbl { color: var(--accent-tekst); }
.tegel-geel { background: var(--actie); }
.tegel-geel .num, .tegel-geel .lbl { color: var(--actie-tekst); }

.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  font-size: 13.5px;
  font-weight: 600;
  border: 1.5px solid var(--lijn);
  background: var(--papier);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--inkt);
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { border-color: var(--accent); }
.chip-actief, .chip-actief:hover { background: var(--inkt-kop); border-color: var(--inkt-kop); color: #fff; }
.chip-scheiding { width: 1px; height: 22px; background: var(--lijn); margin: 0 3px; }
.chips-zoek { margin-left: auto; }
.chips-zoek input {
  font: inherit;
  font-size: 13.5px;
  border: 1.5px solid var(--lijn);
  border-radius: 999px;
  padding: 7px 16px;
  width: 210px;
  max-width: 100%;
  background: var(--papier);
  color: var(--inkt);
}
.chips-zoek input:focus { outline: none; border-color: var(--accent); }

.legenda { font-size: 12px; color: var(--inkt-zacht); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 12px; }
.legenda span { display: inline-flex; align-items: center; gap: 5px; }
.legenda-wis { margin-left: auto; }
.stip { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.stip-aan { background: var(--goed); }
.stip-uit { border: 1.5px solid var(--lijn); }
.bord-hint { font-size: 12px; color: var(--inkt-zacht); margin: -4px 0 10px; }

.bord {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 1fr);   /* zes kolommen passen zo binnen 1240px, net als op het dashboard */
  gap: 12px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 8px;
}
.kolom {
  background: var(--accent-zacht);
  border-radius: var(--rond);
  padding: 8px;
  border-top: 4px solid var(--lijn);
  min-height: 90px;
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .kolom { background: color-mix(in srgb, var(--accent) 14%, var(--papier)); }
}
.kolom h2 {
  font-family: var(--lettertype);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--inkt-zacht);
  padding: 5px 7px 9px;
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.kolom h2 .aantal {
  background: var(--papier);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 11px;
  line-height: 19px;
  color: var(--accent-donker);
}
.kolom-doel { outline: 2px dashed var(--accent-donker); outline-offset: -2px; }
.kolom-nee  { outline: 2px dashed var(--fout); outline-offset: -2px; }
.kolom-breed { border-top-color: var(--accent); }

.geparkeerd { margin-top: 18px; }
.geparkeerd > summary { cursor: pointer; list-style: none; }
.geparkeerd > summary::-webkit-details-marker { display: none; }
.geparkeerd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.geparkeerd-grid .bkaart { margin-bottom: 0; }

.bkaart {
  background: var(--papier);
  border-radius: 12px;
  margin-bottom: 9px;
  box-shadow: var(--schaduw);
  border: 2px solid transparent;
  transition: .12s;
}
.bkaart:hover { border-color: var(--accent); transform: translateY(-1px); }
.bkaart[draggable="true"] { cursor: grab; }
.bkaart.sleept { opacity: .45; }
.bkaart-stil { border-color: var(--fout-rand); }
.bkaart-link { display: block; padding: 11px 13px; color: inherit; text-decoration: none; }
.bkaart-kop { display: flex; gap: 9px; align-items: center; }
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  background: var(--u, var(--accent));
}
.bkaart-naam {
  font-family: var(--lettertype-koppen);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--inkt-kop);
}
.bkaart-rol { font-size: 12px; color: var(--inkt); margin-top: 1px; }
.bkaart-plaats { font-size: 11.5px; color: var(--inkt-zacht); margin-top: 1px; }

.badges { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.badge {
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  text-transform: uppercase;
  letter-spacing: .03em;
  background: var(--merk-vlak);
  color: var(--inkt-zacht);
  white-space: nowrap;
}
.badge-unit { background: var(--accent-zacht); color: var(--accent-donker); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .badge-unit {
    background: color-mix(in srgb, var(--u, var(--accent)) 18%, #fff);
    color: color-mix(in srgb, var(--u, var(--accent)) 65%, #000);
  }
}
/* Status-kleuren, geen klantkleuren: dezelfde betekenis als in de artifact. */
.badge-inplannen { background: #FFE9C9; color: #9A6B14; }
.badge-gepland   { background: var(--goed-vlak); color: var(--goed); }
.badge-gehad     { background: var(--lijn); color: var(--inkt); }
.badge-escalatie { background: var(--fout-vlak); color: var(--fout); }
.badge-rond      { background: var(--inkt-kop); color: #fff; }
.badge-rec       { background: #EAF2FE; color: #2A5DA8; }
.badge-parkeer   { background: #EDE0D4; color: #7A5A3A; }

.bkaart-mini {
  font-size: 11.5px;
  color: var(--inkt);
  margin-top: 7px;
  border-top: 1px dashed var(--lijn);
  padding-top: 6px;
  overflow-wrap: anywhere;
}
.bkaart-bal { font-size: 11.5px; font-weight: 600; color: var(--inkt-zacht); margin-top: 6px; }
.stil-badge {
  background: var(--fout-vlak);
  color: var(--fout);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-block;
  margin-top: 7px;
}

@media (max-width: 700px) {
  .bord { grid-auto-columns: 82vw; }
  .chips-zoek { margin-left: 0; width: 100%; }
  .chips-zoek input { width: 100%; }
}

/* De bovenbalk op een smal scherm: de titel op een regel, de pillen kleiner,
   de rol onder de naam weg. Anders brak de balk over drie regels. */
@media (max-width: 600px) {
  .balk { padding: 8px 10px; gap: 8px; }
  .balk-titel { font-size: 12.5px; white-space: nowrap; }
  .balk-rechts { gap: 2px; font-size: 12.5px; }
  .balk-link { padding: 6px 8px; }
  .balk-rol { display: none; }
  .balk-wie { margin-left: 2px; }
}

/* Fase wijzigen op het kandidaatscherm (knop_fase.php). */
.fase-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.fase-form .veld select { width: 100%; }
.fase-uitleg { margin: 0; font-size: 13px; }

/* =====================================================================
   PLANNING en VANDAAG (04-09-2026): agendaregels per dag en taakregels.
   ===================================================================== */
.agenda-dag { margin-bottom: 14px; }
.agenda-vandaag .groep-kop { color: var(--accent-donker); }
.agenda-voorbij { opacity: .8; }
.agenda-lijst, .taak-lijst, .inplannen-lijst { list-style: none; margin: 0; padding: 0; }
.agenda-rij {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 10px;
  align-items: start;
  background: var(--papier);
  border: 1px solid var(--lijn);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  box-shadow: var(--schaduw);
  padding: 10px 12px;
  margin-bottom: 7px;
}
.agenda-intake { border-left-color: var(--let-op); }
.agenda-2e, .agenda-3e { border-left-color: var(--accent-donker); }
.agenda-tijd { font-weight: 800; font-size: 14px; color: var(--inkt-kop); padding-top: 1px; }
.agenda-inhoud { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; min-width: 0; }
.agenda-naam { font-family: var(--lettertype-koppen); font-weight: 700; font-size: 15px; color: var(--inkt-kop); }
.agenda-wat { font-size: 13.5px; }
.agenda-sub { font-size: 12.5px; color: var(--inkt-zacht); }

.taak-rij {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--lijn);
}
.taak-rij:last-child { border-bottom: none; }
.taak-inhoud { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.taak-naam { font-weight: 700; color: var(--inkt-kop); }
.taak-wat { font-size: 13px; color: var(--inkt); overflow-wrap: anywhere; }
.taak-rij .vlag { flex: none; }

.blok h2 .groep-aantal { margin-left: 8px; }
.inplannen-fase {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--accent-donker);
  margin: 14px 0 6px;
}
.inplannen-lijst li { padding: 6px 0; border-bottom: 1px dashed var(--lijn); font-size: 14.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inplannen-lijst li:last-child { border-bottom: none; }
.inplannen-lijst a { font-weight: 600; }
.blok-uitleg-klein { margin: -4px 0 8px; font-size: 13px; }
.blok-vandaag { border-top: 4px solid var(--actie); }

/* Kandidaat toevoegen en het vraagveld (04-09-2026). */
.toevoegen-regel { margin: 0 0 12px; }
.toevoegen-regel .knop { min-height: 40px; }
.toevoeg-form { display: flex; flex-direction: column; gap: 12px; }
.toevoeg-form .veld { display: flex; flex-direction: column; gap: 4px; }
.toevoeg-form .veld > span { font-size: 14px; font-weight: 600; }
.toevoeg-form input, .toevoeg-form select, .toevoeg-form textarea {
  font: inherit; width: 100%; box-sizing: border-box;
  border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px;
  background: var(--papier); color: var(--inkt);
}
.toevoeg-form .naast-elkaar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .toevoeg-form .naast-elkaar { grid-template-columns: 1fr; } }
.vraagveld { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.vraag-label { font-size: 13px; font-weight: 600; color: var(--inkt-zacht); }
.blok-antwoord { border-left: 4px solid var(--actie); }
.antwoord-zin { margin: 0 0 6px; font-weight: 700; font-size: 16px; color: var(--inkt-kop); }
.antwoord-gelezen { margin: 0; font-size: 13px; }


/* =====================================================================
   AFWERKING (04-09-2026, verzoek Sofie: "het moet er echt superprofi
   uitzien"). Geen nieuwe kleuren: alles komt uit de variabelen bovenaan.
   Wat hier staat: het logo in de balk en op het inlogscherm, een
   gelaagde schaduw, rustige overgangen, zichtbare focus, initialen op de
   kaarten, en een voet met het logo.
   ===================================================================== */
:root {
  --schaduw: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .06);
  --schaduw-zweef: 0 2px 4px rgba(16, 24, 40, .05), 0 10px 28px rgba(16, 24, 40, .10);
}
body {
  background-image: radial-gradient(1200px 420px at 50% -120px, color-mix(in srgb, var(--papier) 55%, var(--achtergrond)), transparent 70%);
  background-repeat: no-repeat;
}
::selection { background: color-mix(in srgb, var(--actie) 45%, #fff); color: var(--inkt-kop); }

/* De balk: logo, wordmark, pillen, en de ingelogde persoon als rondje. */
.balk { box-shadow: 0 1px 0 var(--lijn), var(--schaduw); }
.balk-titel { display: inline-flex; align-items: center; gap: 10px; }
.balk-logo { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.balk-link { transition: background .12s ease, color .12s ease; }
.balk-link.actief { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 45%, transparent); }
.balk-wie { flex-direction: row; align-items: center; gap: 8px; text-align: left; }
.balk-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-donker); color: var(--accent-donker-tekst);
  font-weight: 800; font-size: 12px; letter-spacing: .02em;
}
.balk-wie-tekst { display: flex; flex-direction: column; line-height: 1.15; }

/* Knoppen en kaarten reageren, rustig. */
.knop { transition: transform .08s ease, box-shadow .12s ease, background .12s ease; box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.knop:hover { box-shadow: var(--schaduw-zweef); transform: translateY(-1px); }
.knop:active { transform: translateY(0); box-shadow: none; }
.knop-leeg { box-shadow: none; }
.kaart { transition: box-shadow .14s ease, transform .14s ease, border-color .14s ease; }
.kaart:hover { box-shadow: var(--schaduw-zweef); transform: translateY(-1px); }
.blok { transition: box-shadow .14s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 55%, #fff);
  outline-offset: 2px;
  border-radius: 8px;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

/* Initialen op de kaarten van het overzicht, in de kleur van de unit. */
.kaart-link { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; }
.kaart-link > .avatar { width: 40px; height: 40px; font-size: 13px; margin-top: 2px; }
.kaart-inhoud { min-width: 0; }
.kaart-afgerond .avatar { filter: grayscale(1); }

/* Het kopblok van een kandidaat: groot rondje met initialen naast de naam. */
.kopblok-naam { display: flex; align-items: center; gap: 14px; }
.kopblok-naam .avatar { width: 52px; height: 52px; font-size: 18px; }
.kopblok-naam h1 { margin: 0; }

/* Groepskoppen op het overzicht: een stip in de fasekleur ervoor. */
.groep-kop { display: flex; align-items: center; gap: 8px; }
.groep-stip { width: 10px; height: 10px; border-radius: 50%; background: var(--lijn); flex: none; }

/* Lege staten met een icoon, zodat "niets" niet op "kapot" lijkt. */
.leeg-blok { text-align: center; padding: 28px 18px; }
.leeg-blok::before { content: "✓"; display: block; font-size: 28px; margin-bottom: 6px; color: var(--goed); }
.leeg-blok p { margin: 4px 0; }

/* Het inlogscherm. */
.inlog { display: flex; flex-direction: column; align-items: center; padding: 6vh 0 30px; }
.inlog-kaart {
  width: 100%; max-width: 440px; text-align: center;
  background: var(--papier); border: 1px solid var(--lijn); border-radius: 22px;
  box-shadow: var(--schaduw-zweef); padding: 34px 28px 26px;
}
.inlog-logo { width: 112px; height: 112px; margin: 0 auto 14px; display: block; }
.inlog-titel { font-size: 26px; margin: 0 0 8px; letter-spacing: .01em; }
.inlog-uitleg { color: var(--inkt); font-size: 15.5px; line-height: 1.55; margin: 0 0 22px; }
.inlog-knop { width: 100%; gap: 10px; font-size: 16px; }
.inlog-knop .ico { width: 18px; height: 18px; flex: none; }
.inlog-klein { color: var(--inkt-zacht); font-size: 13px; margin: 12px 0 0; }
.inlog-voet { color: var(--inkt-zacht); font-size: 12.5px; margin-top: 18px; text-align: center; max-width: 440px; }

/* De voet. */
.voet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.voet-logo { width: 22px; height: 22px; border-radius: 50%; }
.voet-tijd { margin-left: auto; }
.inhoud-breed + .voet { max-width: 1240px; }

/* Cijfers: staafjes in de accentkleur met een zachte baan. */
.staaf-baan { background: color-mix(in srgb, var(--accent) 12%, var(--papier)); }
.staaf-vulling { background: linear-gradient(90deg, var(--accent-donker), var(--accent)); transition: width .4s ease; }

/* Vlakke details-koppen krijgen een pijltje dat meedraait. */
details.uitklap > summary, details.geparkeerd > summary, details.groep-dicht > summary { cursor: pointer; }


/* =====================================================================
   CIJFERS als rapportage (04-09-2026) en de WhatsApp-stip op het bord.
   ===================================================================== */
.tegels-vier { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.chip-rechts { margin-left: auto; }
.twee-kolommen { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 860px) { .twee-kolommen { grid-template-columns: 1fr 1fr; } .twee-kolommen .blok { margin-bottom: 0; } .twee-kolommen { margin-bottom: 12px; } }

.trechter { display: flex; flex-direction: column; gap: 6px; }
.trechter-rij { display: grid; grid-template-columns: 104px 1fr 96px; gap: 10px; align-items: center; }
.trechter-baan { background: color-mix(in srgb, var(--accent) 12%, var(--papier)); border-radius: 8px; height: 30px; }
.trechter-vul {
  display: flex; align-items: center; padding-left: 10px; box-sizing: border-box;
  height: 100%; min-width: 36px; border-radius: 8px;
  background: linear-gradient(90deg, var(--accent-donker), var(--accent));
  color: #fff; font-weight: 700; font-size: 13px;
  transition: width .4s ease;
}
.conv { font-size: 12px; color: var(--inkt-zacht); text-align: right; }
.conv b { color: var(--accent-donker); }
.staaf-rood { background: linear-gradient(90deg, #A33A3A, #E06C6C); }
.staaf-geel { background: linear-gradient(90deg, var(--let-op), var(--actie)); }

.week-grid { display: flex; gap: 8px; align-items: flex-end; height: 150px; padding-top: 14px; }
.week-kolom { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.week-staven { flex: 1; width: 100%; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.week-staaf { display: block; width: 45%; min-height: 3px; border-radius: 6px 6px 0 0; position: relative; }
.week-staaf i { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10.5px; color: var(--inkt-zacht); }
.week-nieuw { background: var(--accent); }
.week-gesprek { background: var(--actie); }
.week-label { font-size: 10.5px; color: var(--inkt-zacht); white-space: nowrap; }
.week-legenda { display: flex; gap: 14px; font-size: 12px; color: var(--inkt); margin-top: 10px; }
.week-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.legenda-blok { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.tabel-wrap { overflow-x: auto; }
.rapport-tabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rapport-tabel th, .rapport-tabel td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--lijn); white-space: nowrap; }
.rapport-tabel th { background: var(--accent-zacht); color: var(--accent-donker); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
.rapport-tabel td:first-child { white-space: normal; font-weight: 600; }

.stip-wa { background: var(--let-op); }
.blok-whatsapp { border-top: 4px solid var(--let-op); }

@media print {
  .balk, .nietprinten, .voet, .toevoegen-regel { display: none !important; }
  body { background: #fff; }
  .blok, .tegel { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .inhoud { max-width: none; padding: 0; }
}


/* TALENTPOOL (04-09-2026) */
.kaart-pool { border-left: 4px solid var(--lijn); }
.vlag-goed { background: var(--goed-vlak); color: var(--goed); }
.kaart-merken .badge { margin-top: 0; }

/* Uitleg en de hulplink in de voet (04-09-2026). */
.balk-uitleg { color: var(--accent-donker); }
.voet-hulp { color: var(--accent-donker); font-weight: 600; }

/* Na het 2e gesprek eerst het besluit (04-09-2026). De rest van het formulier
   klapt pas open na een keuze; zonder :has staat alles gewoon open. */
.besluitknoppen { display: flex; flex-direction: column; gap: 8px; }
.besluitknoppen .keuze { align-items: flex-start; }
.besluitknoppen .keuze span { display: flex; flex-direction: column; gap: 2px; }
.besluitknoppen .keuze strong { font-size: 15.5px; }
.besluitknoppen .keuze small { font-size: 13px; color: var(--inkt-zacht); }
.hint-besluit { display: none; }
@supports selector(:has(*)) {
  .besluit-eerst .stap-rest { display: none; }
  .besluit-eerst:has(input[name="besluit"]:checked) .stap-rest { display: block; }
  .besluit-eerst:has(input[value="AANBIEDING"]:checked) .hint-AANBIEDING,
  .besluit-eerst:has(input[value="GESPREK"]:checked) .hint-GESPREK,
  .besluit-eerst:has(input[value="AFWIJZEN"]:checked) .hint-AFWIJZEN { display: block; }
}

/* Twee vakken bij de feedback (07-09-2026). De vraag boven elk vak en de
   aanwijzing eronder wisselen mee met het gekozen oordeel of besluit. Zonder
   :has staat de algemene vraag ("Wat zag je, of wat gaf de doorslag?") en
   blijven de aanwijzingen per oordeel verborgen: dan werkt het nog steeds,
   alleen minder precies. */
.vak { margin-top: 12px; }
.vak-label { display: block; font-weight: 600; margin-bottom: 4px; }
.vak-label .vraag-per, .vak .richtlijn.vraag-per { display: none; }
.vak-label .vraag-algemeen { display: inline; }
@supports selector(:has(*)) {
  .actie-form:has(input[name="oordeel"]:checked) .vraag-algemeen,
  .actie-form:has(input[name="besluit"]:checked) .vraag-algemeen { display: none; }
  .actie-form:has(input[name="oordeel"][value="JA"]:checked) .vraag-JA,
  .actie-form:has(input[name="oordeel"][value="TWIJFEL"]:checked) .vraag-TWIJFEL,
  .actie-form:has(input[name="oordeel"][value="NEE"]:checked) .vraag-NEE,
  .actie-form:has(input[name="besluit"][value="AANBIEDING"]:checked) .vraag-AANBIEDING,
  .actie-form:has(input[name="besluit"][value="GESPREK"]:checked) .vraag-GESPREK,
  .actie-form:has(input[name="besluit"][value="AFWIJZEN"]:checked) .vraag-AFWIJZEN { display: inline; }
  .actie-form:has(input[name="oordeel"][value="JA"]:checked) .richtlijn.vraag-JA,
  .actie-form:has(input[name="oordeel"][value="TWIJFEL"]:checked) .richtlijn.vraag-TWIJFEL,
  .actie-form:has(input[name="oordeel"][value="NEE"]:checked) .richtlijn.vraag-NEE,
  .actie-form:has(input[name="besluit"][value="AANBIEDING"]:checked) .richtlijn.vraag-AANBIEDING,
  .actie-form:has(input[name="besluit"][value="GESPREK"]:checked) .richtlijn.vraag-GESPREK,
  .actie-form:has(input[name="besluit"][value="AFWIJZEN"]:checked) .richtlijn.vraag-AFWIJZEN { display: block; }
}

/* Het debrief-script en de momenten, alleen voor Sofie (07-09-2026). */
.blok-debrief { border-top: 4px solid var(--accent); }
.blok-debrief h3 { margin: 16px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-donker); }
.blok-debrief ul { margin: 0; padding-left: 18px; }
.blok-debrief li { margin: 3px 0; }
.blok-debrief .citaat { background: var(--accent-zacht); border-left: 3px solid var(--accent); padding: 8px 12px; border-radius: 0 6px 6px 0; margin: 6px 0; }
.momenten-lijst { margin: 0; padding-left: 18px; }
.momenten-lijst li { margin: 3px 0; }
.momenten-lijst .leeg { color: var(--inkt-zacht); }

/* Meldingen op je telefoon (04-09-2026). */
.blok-meldingen { border-top: 4px solid var(--accent); }
.blok-meldingen-compact { margin-top: 18px; }
.blok-meldingen-compact .meldingen-uitleg { font-size: 14px; margin: 0 0 6px; }
.meldingen-status { margin: 6px 0 10px; font-size: 14px; }
.meldingen-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
/* Een knop met het attribuut hidden moet ook echt weg zijn; display op .knop won anders. */
.knop[hidden] { display: none !important; }

/* Zoeken vanuit de balk en opmerkingen bij een kandidaat (04-09-2026). */
.balk-zoek { margin: 0 4px; }
.balk-zoek input {
  font: inherit; font-size: 13px;
  border: 1.5px solid var(--lijn); border-radius: 999px;
  padding: 6px 12px; width: 150px; background: var(--papier); color: var(--inkt);
}
.balk-zoek input:focus { outline: none; border-color: var(--accent); width: 200px; }
@media (max-width: 600px) { .balk-zoek { order: 10; width: 100%; margin: 4px 0 0; } .balk-zoek input { width: 100%; } }

.opmerkingen { list-style: none; margin: 0 0 12px; padding: 0; }
.opmerking { padding: 8px 0; border-bottom: 1px dashed var(--lijn); }
.opmerking:last-child { border-bottom: none; }
.opmerking-wie { font-weight: 700; color: var(--inkt-kop); }
.opmerking-wanneer { font-size: 12px; color: var(--inkt-zacht); margin-left: 6px; }
.opmerking-tekst { font-size: 14.5px; margin-top: 2px; }
.opmerking-form { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.opmerking-form textarea { font: inherit; font-size: 14.5px; border: 1px solid var(--lijn); border-radius: 10px; padding: 9px 11px; resize: vertical; }
.opmerking-form .knop { align-self: flex-start; }

/* Voorstellen aan een collega (04-09-2026). */
.blok-voorstellen textarea { font: inherit; font-size: 14.5px; border: 1px solid var(--lijn); border-radius: 10px; padding: 9px 11px; width: 100%; box-sizing: border-box; resize: vertical; }

/* Verbinden op LinkedIn (04-09-2026). */
.snelkop-verbind { border-color: var(--accent); color: var(--accent-donker); }
.verbind-melding { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--inkt-kop); color: #fff; border-radius: 999px; padding: 10px 18px; font-size: 13.5px; max-width: 92%; z-index: 50; box-shadow: var(--schaduw-zweef); }

/* Gesprek inplannen en opruimen (04-09-2026). */
.blok-inplannen .invoer { font: inherit; font-size: 15px; border: 1px solid var(--lijn); border-radius: 10px; padding: 9px 11px; }
.blok-opruimen { border-top: 4px solid var(--lijn); }

/* Welkom bij het eerste bezoek (04-09-2026). */
.welkom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--actie-zacht); border: 1px solid color-mix(in srgb, var(--actie) 60%, #fff); border-left: 5px solid var(--actie); border-radius: var(--rond); padding: 10px 14px; margin-bottom: 14px; font-size: 14.5px; }
.knop-klein { min-height: 36px; padding: 6px 14px; font-size: 14px; }
.welkom-weg { margin-left: auto; color: var(--inkt-zacht); font-size: 13px; }

/* Trechter als echte trechter (07-09-2026): trapezia die smaller worden,
   links de fase en het percentage, rechts waar de rest bleef. */
.funnel { display: flex; flex-direction: column; }
.funnel-stap { display: grid; grid-template-columns: 150px 1fr 260px; gap: 14px; align-items: center; min-height: 64px; }
.funnel-links { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.funnel-label { font-size: 14px; font-weight: 600; color: var(--inkt); }
.funnel-conv { font-size: 11.5px; color: var(--inkt-zacht); }
.funnel-conv b { color: var(--accent-donker); }
.funnel-baan { height: 64px; }
.funnel-vul {
  display: flex; align-items: flex-start; justify-content: center; box-sizing: border-box;
  height: 100%; margin: 0 auto; padding-top: 12px;
  background: linear-gradient(180deg, var(--accent), var(--accent-donker));
  color: #fff; font-weight: 700; font-size: 16px;
}
.funnel-stap-eind .funnel-baan { height: 52px; }
.funnel-vul-eind { background: var(--actie); color: var(--actie-tekst); border-radius: 0 0 10px 10px; align-items: center; padding-top: 0; }
.funnel-rechts { font-size: 12px; color: var(--inkt-zacht); line-height: 1.45; border-left: 2px solid color-mix(in srgb, var(--accent) 25%, var(--papier)); padding-left: 12px; }
.funnel-rechts b { color: var(--inkt); font-weight: 600; }
.funnel-rood { color: #A33A3A; }
.tegel-rood { background: #F6E3E3; }
.tegel-rood .num { color: #A33A3A; }
@media (max-width: 700px) { .funnel-stap { grid-template-columns: 90px 1fr; } .funnel-rechts { grid-column: 2; border: 0; padding: 0 0 8px; } }

/* Blok "Waar de meeste winst zit" (07-09-2026). */
.blok-winst { border-left: 5px solid var(--actie); }
.winst-lijst { margin: 8px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--inkt); }
.winst-lijst li::marker { color: var(--accent-donker); font-weight: 700; }

/* Sessiebalk en storingen (07-09-2026, productplan stap 1 en 4). */
.sessie-balk { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; background: var(--inkt-kop); color: #fff; padding: 10px 16px; border-radius: var(--rond); box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 14px; z-index: 50; max-width: calc(100% - 32px); }
.sessie-balk .knop { white-space: nowrap; }
.blok-storing { border-left: 5px solid var(--fout); }
.storing-lijst { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.45; }
.storing-tijd { color: var(--inkt-zacht); font-variant-numeric: tabular-nums; margin-right: 8px; }

/* Demomodus op het inlogscherm (07-09-2026, productplan stap 8). */
.demo-blok { margin-top: 18px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.demo-blok h2 { margin: 0; font-size: 16px; }
.demo-blok p { margin: 0 0 6px; font-size: 13.5px; color: var(--inkt-zacht); }
.demo-code { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--inkt-zacht); margin-bottom: 6px; }
.demo-code input { font: inherit; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: var(--rond); }

/* Feedback zonder inlog (08-09-2026, productplan stap 5). */
.snel { max-width: 640px; margin: 0 auto; }
.snel-hoi { font-size: 16px; margin: 6px 0 14px; }
.snel-voet { font-size: 13px; margin-top: 14px; }
.knop-licht { background: var(--papier); color: var(--accent-donker); border: 1px solid var(--lijn); }
.taak-rij .snel-kopie { margin-left: 8px; font-size: 12px; padding: 4px 9px; }

/* Vrije uren bij Gesprek inplannen (08-09-2026). */
.vrij-uit { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.vrij-kop { font-weight: 600; }
.vrij-dag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vrij-daglabel { min-width: 130px; color: var(--inkt-zacht); }
.vrij-uur { font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid var(--lijn); border-radius: 999px; background: var(--papier); color: var(--inkt); cursor: pointer; }
.vrij-uur:hover { border-color: var(--accent-donker); }
.vrij-uur.aan { background: var(--accent-donker); color: var(--accent-donker-tekst); border-color: var(--accent-donker); }
.vrij-hint { margin-top: 8px; }

/* =====================================================================
   INSTELLINGEN (11-09-2026): gebruikers, units, koppelingen. Zie app/views/beheer.php.
   ===================================================================== */
.beheer-tabel td { white-space: normal; vertical-align: top; }
.beheer-tabel td:first-child { white-space: nowrap; }
.beheer-uit td { color: var(--inkt-zacht); }
.beheer-bewerk summary, .beheer-nieuw summary { display: inline-flex; list-style: none; cursor: pointer; }
.beheer-bewerk summary::-webkit-details-marker, .beheer-nieuw summary::-webkit-details-marker { display: none; }
.beheer-bewerk-inhoud { margin-top: 10px; padding: 14px; background: var(--accent-zacht); border-radius: var(--rond); }
.beheer-bewerk .beheer-bewerk-inhoud { min-width: 320px; }
.beheer-nieuw { margin-top: 14px; }
.beheer-form { display: flex; flex-direction: column; gap: 12px; }
.beheer-form input[type="text"], .beheer-form input[type="email"], .beheer-form select { width: 100%; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: var(--rond); font: inherit; font-size: 15px; background: var(--papier); color: var(--inkt); }
.beheer-vinkjes { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.beheer-vinkje { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.beheer-inline { display: inline; margin: 0; }
.beheer-code { padding: 10px 12px; background: var(--accent-zacht); border-radius: var(--rond); font-size: 13px; overflow-x: auto; user-select: all; }
.beheer-code-inline { font-size: 12.5px; word-break: break-all; }