/* tb-componenten.css — de bouwstenen, gebouwd op tb-tokens.css.
   Laadt altijd NA tb-tokens.css. Geen enkele kleurwaarde in dit bestand:
   alles verwijst naar een variabele, zodat een stijlwijziging één plek heeft.
   Geen !important: dit is nieuwe code en hoeft niets te overschrijven.

   Herkomst: workspaces/theoriebriljant/redesign/schetsen/1-examenbureau.html
   en 4-dashboard.html (keuze Daan, 3-10-2026). */

/* ── knop ──────────────────────────────────────────────────────── */
.tb-knop{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 22px;
  border:1px solid transparent; border-radius:var(--tb-r);
  font-family:var(--tb-font); font-size:16px; font-weight:600; line-height:1;
  letter-spacing:-.01em; text-decoration:none; cursor:pointer;
  transition:transform calc(var(--tb-t) * .8), background var(--tb-t), border-color var(--tb-t);
}
.tb-knop:active{transform:translateY(1px)}
.tb-knop:focus-visible{outline:2px solid var(--tb-accent); outline-offset:2px}

.tb-knop--1{background:var(--tb-ink); color:var(--tb-canvas)}
.tb-knop--1:hover{background:var(--tb-ink-2)}

.tb-knop--2{background:transparent; color:var(--tb-ink); border-color:var(--tb-line-2)}
.tb-knop--2:hover{border-color:var(--tb-ink)}

.tb-knop--3{background:transparent; color:var(--tb-accent-ink); padding:0 4px; min-height:40px}
.tb-knop--3:hover{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}

.tb-knop--sm{min-height:40px; padding:0 16px; font-size:15px}
.tb-knop--blok{width:100%}

/* ── kaart ─────────────────────────────────────────────────────── */
.tb-kaart{
  background:var(--tb-canvas);
  border:1px solid var(--tb-line);
  border-radius:var(--tb-r);
  padding:var(--tb-s3);
}
.tb-kaart--vlak{padding:0; overflow:hidden}
.tb-kaart__kop{
  display:flex; align-items:center; justify-content:space-between; gap:var(--tb-s2);
  padding:14px var(--tb-s3);
  border-bottom:1px solid var(--tb-line);
  background:var(--tb-canvas-2);
  font-size:13px; font-weight:600; color:var(--tb-ink-2);
}
.tb-kaart__titel{
  font-size:13px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tb-ink-3); margin:0;
}

/* ── chip ──────────────────────────────────────────────────────── */
.tb-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 11px; border-radius:999px;
  border:1px solid var(--tb-line); background:var(--tb-canvas-2);
  font-size:13.5px; font-weight:500; color:var(--tb-ink-2);
}
.tb-chip b{color:var(--tb-ink); font-weight:700}

/* ── badge ─────────────────────────────────────────────────────── */
.tb-badge{
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:999px;
  font-size:12.5px; font-weight:600; white-space:nowrap;
}
.tb-badge--ok{background:var(--tb-ok-soft); color:var(--tb-ok)}
.tb-badge--warn{background:var(--tb-warn-soft); color:var(--tb-warn)}
.tb-badge--neutraal{background:var(--tb-canvas-2); color:var(--tb-ink-3); border:1px solid var(--tb-line)}

/* ── lijstrij ──────────────────────────────────────────────────── */
.tb-rij{
  display:flex; align-items:center; gap:var(--tb-s2);
  padding:13px 0; border-bottom:1px solid var(--tb-line);
}
.tb-rij:last-child{border-bottom:0}
.tb-rij__nr{
  flex:none; width:34px; height:34px; border-radius:var(--tb-r);
  background:var(--tb-canvas-2); border:1px solid var(--tb-line);
  display:grid; place-items:center;
  font-size:14px; font-weight:700; color:var(--tb-ink-2);
  font-variant-numeric:tabular-nums;
}
.tb-rij__tekst{flex:1; min-width:0}
.tb-rij__tekst b{display:block; font-size:15.5px; font-weight:600}
.tb-rij__tekst span{display:block; margin-top:2px; font-size:13.5px; color:var(--tb-ink-3)}

/* ── voortgangsbalk ────────────────────────────────────────────── */
.tb-meter{
  height:6px; border-radius:999px;
  background:var(--tb-canvas-3); overflow:hidden;
}
.tb-meter > i{
  display:block; height:100%; border-radius:999px;
  background:var(--tb-accent);
  transition:width var(--tb-t) ease-out;
}
.tb-meter--ok > i{background:var(--tb-ok)}
.tb-meter--dun{height:3px}

/* ── formulierveld ─────────────────────────────────────────────── */
.tb-veld{display:grid; gap:6px}
.tb-veld label{font-size:14.5px; font-weight:600; color:var(--tb-ink-2)}
.tb-veld input,
.tb-veld select,
.tb-veld textarea{
  min-height:48px; padding:12px 14px;
  border:1px solid var(--tb-line-2); border-radius:var(--tb-r);
  background:var(--tb-canvas); color:var(--tb-ink);
  font-family:var(--tb-font); font-size:16px;  /* 16px voorkomt inzoomen op iOS */
  transition:border-color var(--tb-t);
}
.tb-veld textarea{min-height:120px; line-height:1.55}
.tb-veld input:focus,
.tb-veld select:focus,
.tb-veld textarea:focus{outline:2px solid var(--tb-accent); outline-offset:1px; border-color:var(--tb-ink)}
.tb-veld__hulp{font-size:13.5px; color:var(--tb-ink-3)}
.tb-veld__fout{font-size:13.5px; color:var(--tb-warn); font-weight:500}

/* ── uitklapper ────────────────────────────────────────────────── */
.tb-uitklap{border-bottom:1px solid var(--tb-line)}
.tb-uitklap summary{
  cursor:pointer; padding:var(--tb-s3) 0;
  font-size:17px; font-weight:600; letter-spacing:-.02em;
  list-style:none; display:flex; justify-content:space-between; align-items:center;
  gap:var(--tb-s3);
}
.tb-uitklap summary::-webkit-details-marker{display:none}
.tb-uitklap summary::after{
  content:""; flex:none; width:11px; height:11px; margin-top:-4px;
  border-right:2px solid var(--tb-ink-3); border-bottom:2px solid var(--tb-ink-3);
  transform:rotate(45deg); transition:transform var(--tb-t);
}
.tb-uitklap[open] summary::after{transform:rotate(225deg); margin-top:4px}
.tb-uitklap p{
  padding:0 0 var(--tb-s3); margin:0;
  font-size:16px; color:var(--tb-ink-2); max-width:62ch; line-height:1.6;
}

/* ── raakvlakken: 44px is een eis, geen smaak.
      Tot 900px, want een tablet is ook touch. ─────────────────── */
@media(max-width:900px){
  .tb-knop,
  .tb-knop--sm,
  .tb-knop--3{min-height:44px}
  .tb-uitklap summary{min-height:44px}
}