/* ═══════════════════════════════════════════════════════════════════════════
   De schil van de beheerschermen — inc/tb-schil.php, templates/tb-schil.php.
   Bord: beheer-set.html + beheer2.html, instructie beheer-set-instructie.md (19 sep 2026).

   Eén appvenster op de verloopband, rail links, kopbalk, inhoud. Drie schermtypen:
     LIJST       vier kengetallen, dan secties met een tabel   (Bestellingen, Baksels)
     GELD        de saldokaart, dan een tabel die optelt       (Verdiensten)
     FORMULIER   meteen de secties, met een hulpkolom rechts    (Pakket)
   plus de Agenda, die de schil, de chips en de kopbalk overneemt.

   Alles hangt onder `.tb-bh` en elke klasse begint met `tb-bh-`. `.tb-stappen` werd
   op 17 sep door twee onderdelen gebruikt en maakte /instructies/ stuk; dat nooit weer.

   Kleuren komen uit 00-tokens.css. Waar het bord `#9096AB` voor tekst gebruikt (railkoppen,
   tellingen) staat hier `--tb-soft` (#6B7089): lichter mag tekst op deze site niet (CLAUDE.md).
   ═══════════════════════════════════════════════════════════════════════════ */

.tb-bh{
  --bh-wit:var(--tb-surface); --bh-rust:#FBF7F3; --bh-vulling:var(--tb-avatar-grond); --bh-zand:#F4EFE9;
  --bh-inkt:var(--tb-ink); --bh-tekst:#3C4157; --bh-zacht:var(--tb-soft);
  --bh-lijn:rgba(20,26,51,.08); --bh-lijn2:rgba(20,26,51,.14);
  --bh-or:var(--tb-action); --bh-or-vlak:#FDF1EC; --bh-or-rand:rgba(188,84,16,.28); --bh-or-ink:#9E4710;
  --bh-groen:#0E7A57; --bh-groen-vlak:#E4F2EA;
  --bh-geel:#7A5A10; --bh-geel-vlak:#FBF1DC;
  --bh-rood:#A3352F; --bh-rood-vlak:#FBEBEA;
  --bh-blauw:#2B4B8F; --bh-blauw-vlak:#E7EDF8;
  --bh-veld:44px;
  color:var(--bh-tekst);font:400 15px/1.55 var(--tb-sans);
  padding:18px;min-height:100vh;
  /* Op de schil zelf en niet `fixed` op de body: zo loopt het verloop door tot onder het
     appvenster, ook op een lange pagina (18 sep: er bleef een lichte strook onderaan). */
  background:linear-gradient(145deg,#DFF0E8 0%,#F1F5EE 26%,#FCF7F2 54%,#FBEADF 82%,#F7DCD0 100%);
}
body.tb-bh-body{background:#FBF1EA}
/* Koppen erven op de site Fraunces; in de schil is alles schreefloos, zoals op het bord. */
.tb-bh h1,.tb-bh h2,.tb-bh h3{font-family:var(--tb-sans)}
/* :where() geeft deze regel nul gewicht: knoppen en chips die een link zijn houden hun eigen kleur. */
:where(.tb-bh) a{text-decoration:none;color:inherit}
.tb-bh :focus-visible{outline:2px solid var(--bh-or);outline-offset:2px;border-radius:8px}
.tb-bh .tb-bh-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tb-bh svg{flex:0 0 auto}

/* ── het appvenster ─────────────────────────────────────────────────────── */
.tb-bh-app{max-width:1420px;margin:0 auto;background:var(--bh-wit);border-radius:22px;
  box-shadow:0 1px 2px rgba(20,26,51,.05),0 30px 70px -40px rgba(20,26,51,.45);
  display:grid;grid-template-columns:238px minmax(0,1fr);min-height:calc(100vh - 36px)}

/* ── de rail ────────────────────────────────────────────────────────────── */
.tb-bh-rail{border-right:1px solid var(--bh-lijn);padding:18px 12px;display:flex;flex-direction:column;
  background:var(--bh-rust);border-radius:22px 0 0 22px}
.tb-bh-logo{display:block;padding:2px 12px 10px}
.tb-bh-logo img{display:block;height:24px;width:auto}
.tb-bh-rail .tb-bh-groepkop{margin:16px 12px 6px;font:700 10px/1 var(--tb-sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--bh-zacht)}
.tb-bh-rail .tb-bh-groep:first-child .tb-bh-groepkop{margin-top:4px}
.tb-bh-rail ul{list-style:none;margin:0;padding:0}
.tb-bh-rail .tb-bh-item{display:flex;align-items:center;gap:11px;min-height:40px;padding:0 12px;border-radius:11px;
  font-size:14px;font-weight:500;color:var(--bh-tekst)}
.tb-bh-rail .tb-bh-item:hover{background:var(--bh-zand)}
.tb-bh-rail .tb-bh-item[aria-current]{background:var(--bh-inkt);color:#fff;font-weight:600}
.tb-bh-rail .tb-bh-n{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--bh-or);color:#fff;font:700 11px/20px var(--tb-sans);text-align:center}
.tb-bh-rail .tb-bh-stip{margin-left:auto;width:8px;height:8px;border-radius:999px;background:var(--bh-or)}
.tb-bh-rail .tb-bh-item[aria-current] .tb-bh-n{background:rgba(255,255,255,.22)}
.tb-bh-railvoet{margin-top:auto;padding-top:16px;display:flex;flex-direction:column;gap:8px}
.tb-bh-bakkerij{display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;
  background:var(--bh-wit);border:1px solid var(--bh-lijn)}
.tb-bh-bakkerij:hover{border-color:var(--bh-or-rand)}
.tb-bh-bakkerij .tb-bh-t{display:block;font-size:13px;font-weight:600;color:var(--bh-inkt);line-height:1.25}
.tb-bh-bakkerij .tb-bh-s{display:block;font-size:11.5px;color:var(--bh-zacht);margin-top:1px}
.tb-bh-voetlinks{display:flex;flex-wrap:wrap;gap:2px 12px;padding:0 10px;font-size:12.5px}
.tb-bh-voetlinks a{color:var(--bh-zacht)}
.tb-bh-voetlinks a:hover{color:var(--bh-inkt);text-decoration:underline;text-underline-offset:3px}

/* ── hoofd en kopbalk ───────────────────────────────────────────────────── */
.tb-bh-hoofd{padding:22px 28px 30px;min-width:0}
.tb-bh-kopbalk{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.tb-bh-kopbalk h1{margin:0;font:600 27px/1.15 var(--tb-sans);letter-spacing:-.02em;color:var(--bh-inkt)}
.tb-bh-kopbalk .tb-bh-sub{margin:4px 0 0;font-size:13.5px;color:var(--bh-zacht)}
.tb-bh-kopbalk .tb-bh-rechts{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-bh-zoek{position:relative}
.tb-bh-zoek input{width:230px;height:40px;padding:0 14px 0 38px;border:1px solid var(--bh-lijn2);
  border-radius:11px;font:400 14px/1 var(--tb-sans);background:var(--bh-wit);color:var(--bh-inkt)}
.tb-bh-zoek svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--bh-zacht)}
.tb-bh-knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;
  border:1px solid transparent;border-radius:11px;font:600 14px/1 var(--tb-sans);cursor:pointer;white-space:nowrap}
/* `.tb-bh a` erft de tekstkleur en woog zwaarder dan de knop: de oranje knop kreeg donkere tekst (Fatih, 19 sep).
   Daarom de knoppen onder `.tb-bh`, zodat ze winnen. */
.tb-bh .tb-bh-knop--vol{background:var(--bh-or);color:#fff}
.tb-bh .tb-bh-knop--vol:hover{background:var(--tb-action-hover);color:#fff}
.tb-bh .tb-bh-knop--rand{background:var(--bh-wit);color:var(--bh-inkt);border-color:var(--bh-lijn2)}
.tb-bh .tb-bh-knop--rand:hover{border-color:var(--bh-or-rand);color:var(--bh-or)}
.tb-bh-knop--klein{height:34px;padding:0 12px;font-size:13px;border-radius:9px}
.tb-bh-knop[disabled],.tb-bh-knop[aria-disabled="true"]{background:var(--bh-vulling);color:var(--bh-zacht);cursor:not-allowed;border-color:transparent}

/* ── voortgang (het stappenplan, compact) ───────────────────────────────── */
.tb-bh-voortgang{display:flex;align-items:center;gap:13px;background:var(--bh-inkt);color:var(--tb-on-ink);
  border-radius:14px;padding:11px 15px;margin-bottom:22px;font-size:13.5px}
.tb-bh-voortgang .tb-bh-balk{flex:0 0 84px;height:5px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}
.tb-bh-voortgang .tb-bh-balk i{display:block;height:100%;background:var(--tb-on-ink-accent);border-radius:999px}
.tb-bh-voortgang b{color:#fff;font-weight:600}
.tb-bh-voortgang a{margin-left:auto;color:var(--tb-on-ink-accent);font-weight:600;font-size:13px;white-space:nowrap}
.tb-bh-voortgang a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── kengetallen ────────────────────────────────────────────────────────── */
.tb-bh-kengetallen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:26px}
.tb-bh-kg{border:1px solid var(--bh-lijn);border-radius:16px;padding:15px 16px;background:var(--bh-wit);
  display:flex;flex-direction:column;min-width:0}
.tb-bh-kg .tb-bh-lab{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--bh-zacht)}
.tb-bh-kg .tb-bh-onder{display:flex;align-items:flex-end;gap:11px;margin-top:8px;min-width:0}
.tb-bh-kg .tb-bh-cijfer{font:600 29px/1 var(--tb-sans);letter-spacing:-.025em;color:var(--bh-inkt);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-bh-kg .tb-bh-cijfer--tekst{font-size:22px;letter-spacing:-.015em;white-space:normal}
.tb-bh-kg .tb-bh-delta{font-size:12px;font-weight:600;padding-bottom:3px;min-width:0}
.tb-bh-kg .tb-bh-delta--op{color:var(--bh-groen)}
.tb-bh-kg .tb-bh-delta--stil{color:var(--bh-zacht);font-weight:500}
.tb-bh-kg .tb-bh-mini{margin-left:auto;padding-bottom:2px;flex:0 0 auto}
/* Geen oranje vlak meer (Fatih, 19 sep: "zo'n oranje box werkt nergens"): het kengetal dat op je wacht
   valt op door het oranje label en cijfer, niet door een getinte kaart. */
.tb-bh-kg--let{border-color:var(--bh-lijn2);box-shadow:0 1px 2px rgba(20,26,51,.05)}
.tb-bh-kg--let .tb-bh-lab{color:var(--bh-or-ink);font-weight:600}
.tb-bh-kg--let .tb-bh-cijfer{color:var(--bh-or)}

/* ── sectie + tabel ─────────────────────────────────────────────────────── */
.tb-bh-sectie{margin-bottom:30px}
.tb-bh-sectiekop{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.tb-bh-sectiekop h2{margin:0;font:600 16px/1.2 var(--tb-sans);color:var(--bh-inkt)}
.tb-bh-sectiekop .tb-bh-telling{font-size:13px;color:var(--bh-zacht);font-variant-numeric:tabular-nums}
.tb-bh-sectiekop .tb-bh-rechts{margin-left:auto;display:flex;gap:6px}
.tb-bh-stil{display:inline-flex;align-items:center;background:none;border:0;padding:0 8px;height:32px;border-radius:8px;cursor:pointer;
  font:600 13px/1 var(--tb-sans);color:var(--bh-zacht)}
.tb-bh-stil:hover{background:var(--bh-zand);color:var(--bh-inkt)}
.tb-bh-tabelwikkel{min-width:0}
.tb-bh table{width:100%;border-collapse:collapse}
.tb-bh thead th{padding:9px 12px;text-align:left;font:600 12.5px/1 var(--tb-sans);color:var(--bh-zacht);
  border-bottom:1px solid var(--bh-lijn2);white-space:nowrap}
.tb-bh th.tb-bh-r,.tb-bh td.tb-bh-r{text-align:right}
.tb-bh tbody td{padding:11px 12px;border-bottom:1px solid var(--bh-lijn);vertical-align:middle;font-size:14px}
.tb-bh tbody tr:last-child td{border-bottom:0}
.tb-bh tbody tr:hover td{background:var(--bh-rust)}
.tb-bh tbody tr[data-link]{cursor:pointer}
.tb-bh tfoot td{padding:12px;border-top:2px solid var(--bh-lijn2);font-size:14px;font-weight:600;color:var(--bh-inkt);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-bh-leeg td{padding:22px 12px!important;color:var(--bh-zacht);font-size:14px;text-align:left}
.tb-bh-leeg td a{color:var(--bh-or);font-weight:600}

.tb-bh-baksel{display:flex;align-items:center;gap:12px;min-width:0}
.tb-bh-thumb{width:40px;height:40px;border-radius:11px;flex:0 0 auto;overflow:hidden;background:var(--bh-vulling);
  box-shadow:inset 0 0 0 1px rgba(20,26,51,.06);display:grid;place-items:center}
.tb-bh-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tb-bh-thumb svg{width:50%;height:50%;stroke:var(--bh-zacht);fill:none;stroke-width:1.6}
.tb-bh-baksel .tb-bh-t{display:block;font-size:14.5px;font-weight:600;color:var(--bh-inkt);line-height:1.3}
.tb-bh-baksel a.tb-bh-t:hover{color:var(--bh-or)}
.tb-bh-baksel .tb-bh-s{display:block;font-size:12px;color:var(--bh-zacht);margin-top:2px}
.tb-bh-mm{font:500 12px/1 "JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.tb-bh-klant{display:flex;align-items:center;gap:9px;white-space:nowrap}
.tb-bh-avatar{width:28px;height:28px;border-radius:999px;flex:0 0 auto;overflow:hidden;background:var(--bh-vulling);
  display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(20,26,51,.06)}
.tb-bh-avatar svg{width:58%;height:58%;fill:var(--tb-avatar-ink)}
.tb-bh-avatar img{width:100%;height:100%;object-fit:cover}

/* ── chips ──────────────────────────────────────────────────────────────── */
.tb-bh-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:9px;
  font:600 13px/1 var(--tb-sans);white-space:nowrap;border:1px solid transparent;font-variant-numeric:tabular-nums}
.tb-bh-chip--wacht{background:var(--bh-geel-vlak);color:var(--bh-geel)}
.tb-bh-chip--open{background:var(--bh-blauw-vlak);color:var(--bh-blauw)}
.tb-bh-chip--betaald{background:var(--bh-groen-vlak);color:var(--bh-groen)}
.tb-bh-chip--klaar{background:var(--bh-inkt);color:#fff}
.tb-bh-chip--stop{background:var(--bh-rood-vlak);color:var(--bh-rood)}
.tb-bh-chip--nu{background:var(--bh-wit);border-color:var(--bh-or);color:var(--bh-or)}
a.tb-bh-chip--nu:hover{background:var(--bh-or);color:#fff}
.tb-bh-chip--dag{background:var(--bh-zand);color:var(--bh-tekst)}
.tb-bh-chip--dag-dicht{background:var(--bh-rood-vlak);color:var(--bh-rood)}
.tb-bh-chip--dag-klaar{background:var(--bh-groen-vlak);color:var(--bh-groen)}
.tb-bh-chip--stil{background:var(--bh-vulling);color:var(--bh-zacht)}
.tb-bh-bedrag{font:600 14.5px/1 var(--tb-sans);color:var(--bh-inkt);font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-bh-bedrag--stil{color:var(--bh-zacht);font-weight:500}
.tb-bh-bedrag--af{color:var(--bh-rood);font-weight:500}

/* ── tabbladen (Verkocht · Zelf gekocht) ────────────────────────────────── */
.tb-bh-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:12px;background:var(--bh-zand);margin-bottom:20px}
.tb-bh-tabs a{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:9px;
  font:600 13.5px/1 var(--tb-sans);color:var(--bh-zacht)}
.tb-bh-tabs a[aria-current]{background:var(--bh-wit);color:var(--bh-inkt);box-shadow:0 1px 2px rgba(20,26,51,.08)}
.tb-bh-tabs .tb-bh-telling{font-weight:600;color:var(--bh-zacht)}

/* ── geldscherm: de saldokaart ──────────────────────────────────────────── */
.tb-bh-saldo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  border:1px solid var(--bh-lijn);background:var(--bh-rust);border-radius:18px;padding:20px 24px;margin-bottom:26px;
  scroll-margin-top:20px}
.tb-bh-saldo .tb-bh-lab{font-size:12.5px;color:var(--bh-or-ink);font-weight:600}
.tb-bh-saldo .tb-bh-groot{font:600 40px/1 var(--tb-sans);letter-spacing:-.03em;color:var(--bh-or);
  font-variant-numeric:tabular-nums;margin-top:5px}
.tb-bh-saldo .tb-bh-uitleg{margin:8px 0 0;font-size:13px;color:var(--bh-tekst);max-width:56ch}
.tb-bh-saldo .tb-bh-rechtsblok{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.tb-bh-saldo form{display:flex;flex-direction:column;align-items:flex-end;gap:8px;margin:0}
.tb-bh-saldo input[type=text]{height:var(--bh-veld);width:260px;padding:0 13px;border:1px solid var(--bh-lijn2);border-radius:10px;
  font:500 14px/1 var(--tb-sans);background:var(--bh-wit);color:var(--bh-inkt)}
.tb-bh-saldo label{font-size:12.5px;font-weight:600;color:var(--bh-or-ink)}
.tb-bh-bankregel{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--bh-zacht)}
.tb-bh-melding{margin:0;font-size:13px;color:var(--bh-tekst);max-width:34ch;text-align:right}
.tb-bh-melding:empty{display:none}
.tb-bh-onderregel{margin:14px 0 0;font-size:13px;color:var(--bh-zacht)}
.tb-bh-onderregel a{color:var(--bh-or);font-weight:600}
.tb-bh-periode{position:relative}
.tb-bh-periode summary{list-style:none}
.tb-bh-periode summary::-webkit-details-marker{display:none}
.tb-bh-periode ul{position:absolute;right:0;top:calc(100% + 6px);z-index:5;list-style:none;margin:0;padding:6px;min-width:190px;
  background:var(--bh-wit);border:1px solid var(--bh-lijn2);border-radius:12px;box-shadow:0 12px 30px -12px rgba(20,26,51,.3)}
.tb-bh-periode li a{display:block;padding:9px 11px;border-radius:8px;font-size:14px;color:var(--bh-tekst)}
.tb-bh-periode li a:hover{background:var(--bh-zand)}
.tb-bh-periode li a[aria-current]{font-weight:700;color:var(--bh-inkt)}

/* ── formulierscherm ────────────────────────────────────────────────────── */
.tb-bh-vormraam{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:26px;align-items:start}
.tb-bh-vormsectie{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--bh-lijn)}
.tb-bh-vormsectie:last-child{border-bottom:0;margin-bottom:0}
.tb-bh-vormsectie > h2{margin:0 0 3px;font:600 16px/1.2 var(--tb-sans);color:var(--bh-inkt)}
.tb-bh-vormsectie > p.tb-bh-hint{margin:0 0 16px;font-size:13.5px;color:var(--bh-zacht);max-width:60ch}
.tb-bh-hulp{border:1px solid var(--bh-lijn);border-radius:16px;padding:18px 20px;background:var(--bh-rust)}
.tb-bh-hulp h3{margin:0 0 9px;font:600 14px/1.3 var(--tb-sans);color:var(--bh-inkt)}
.tb-bh-hulp p{margin:0 0 10px;font-size:13px;line-height:1.55;color:var(--bh-zacht)}
.tb-bh-hulp .tb-bh-rij{display:flex;gap:9px;align-items:flex-start;font-size:13px;padding:5px 0;color:var(--bh-tekst)}
.tb-bh-hulp .tb-bh-rij svg{margin-top:3px;color:var(--bh-groen)}
.tb-bh-hulp .tb-bh-rij.is-open{color:var(--bh-zacht)}
.tb-bh-hulp .tb-bh-rij.is-open svg{color:var(--bh-zacht)}
.tb-bh-hulp .tb-bh-rij a{color:var(--bh-or);font-weight:600}

/* Pakket: de huidige stand en de ladder */
.tb-bh-stand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tb-bh-stand .tb-bh-naam{font:600 24px/1.1 var(--tb-sans);letter-spacing:-.02em;color:var(--bh-inkt)}
.tb-bh-stand .tb-bh-prijs{font-size:14px;color:var(--bh-tekst)}
.tb-bh-stand p{margin:6px 0 0;font-size:13.5px;color:var(--bh-zacht);flex-basis:100%}
.tb-bh-ladder{list-style:none;margin:0;padding:0;border:1px solid var(--bh-lijn);border-radius:16px;overflow:hidden}
.tb-bh-trede{display:grid;grid-template-columns:120px minmax(0,1fr) auto auto;gap:18px;align-items:center;
  padding:15px 18px;border-bottom:1px solid var(--bh-lijn)}
.tb-bh-trede:last-child{border-bottom:0}
.tb-bh-trede.is-nu{background:var(--bh-rust)}
.tb-bh-trede .tb-bh-naam{font:600 15px/1.2 var(--tb-sans);color:var(--bh-inkt)}
.tb-bh-trede .tb-bh-wat{font-size:13.5px;color:var(--bh-tekst)}
.tb-bh-trede .tb-bh-prijs{font:600 14px/1.2 var(--tb-sans);color:var(--bh-inkt);text-align:right;white-space:nowrap}
.tb-bh-trede .tb-bh-prijs small{display:block;font-weight:500;font-size:12px;color:var(--bh-zacht);margin-top:3px}
.tb-bh-abonnement{margin-top:4px}
.tb-bh-abonnement > summary{cursor:pointer;font:600 14px/1.4 var(--tb-sans);color:var(--bh-or);list-style:none}
.tb-bh-abonnement > summary::-webkit-details-marker{display:none}
.tb-bh-abonnement[open] > summary{margin-bottom:12px}

/* Het bakselformulier: Voxels widget binnen een `.tb-app`-omhulling (88-formulier.css hangt daaraan);
   alleen de paginamarges van .tb-app horen hier niet. */
.tb-bh .tb-app.tb-bh-form{padding:0;max-width:none;margin:0;min-width:0}
.tb-bh .tb-bk-keuze{max-width:none}

/* ── agenda ─────────────────────────────────────────────────────────────── */
.tb-bh-maand{border:1px solid var(--bh-lijn);border-radius:16px;overflow:hidden}
.tb-bh-weekdagen,.tb-bh-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.tb-bh-weekdagen span{padding:10px 12px;font:600 12.5px/1 var(--tb-sans);color:var(--bh-zacht);border-bottom:1px solid var(--bh-lijn2);background:var(--bh-rust)}
.tb-bh-dag{min-height:112px;padding:8px 8px 10px;border-right:1px solid var(--bh-lijn);border-bottom:1px solid var(--bh-lijn);
  display:flex;flex-direction:column;gap:5px;min-width:0}
.tb-bh-week .tb-bh-dag:nth-child(7n){border-right:0}
.tb-bh-week:last-child .tb-bh-dag{border-bottom:0}
.tb-bh-dag.is-buiten{background:#FCFAF8}
.tb-bh-dag.is-buiten .tb-bh-dagnr{color:var(--tb-soft);opacity:.55}
.tb-bh-dagnr{font:600 13px/1 var(--tb-sans);color:var(--bh-inkt);display:flex;align-items:center;gap:6px}
.tb-bh-dag.is-vandaag .tb-bh-dagnr span{display:inline-grid;place-items:center;width:24px;height:24px;margin:-5px 0 -5px -4px;
  border-radius:999px;background:var(--bh-or);color:#fff}
.tb-bh-dag .tb-bh-chip{height:auto;min-height:26px;padding:5px 8px;font-size:12px;line-height:1.25;white-space:normal;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;border-radius:8px}
.tb-bh-dag a.tb-bh-chip:hover{filter:brightness(.97)}
.tb-bh-legenda{display:flex;flex-wrap:wrap;gap:8px 16px;margin:14px 0 0;font-size:12.5px;color:var(--bh-zacht)}
.tb-bh-legenda span{display:inline-flex;align-items:center;gap:6px}
.tb-bh-legenda i{width:10px;height:10px;border-radius:3px;display:inline-block}
.tb-bh-daglijst{display:none}

/* ── smaller ────────────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .tb-bh-kengetallen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb-bh-vormraam{grid-template-columns:1fr}
}
@media (max-width:920px){
  .tb-bh{padding:0}
  .tb-bh-app{grid-template-columns:1fr;border-radius:0;box-shadow:none;min-height:100vh}
  /* De rail wordt één rij bovenaan die zelf schuift; de pagina nooit. */
  .tb-bh-rail{border-radius:0;border-right:0;border-bottom:1px solid var(--bh-lijn);padding:10px 12px;
    flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px}
  .tb-bh-rail::-webkit-scrollbar{display:none}
  .tb-bh-rail .tb-bh-groep{display:contents}
  .tb-bh-rail .tb-bh-groepkop{display:none}
  .tb-bh-rail ul{display:flex;gap:4px}
  .tb-bh-rail .tb-bh-item{min-height:40px;white-space:nowrap;background:var(--bh-wit);border:1px solid var(--bh-lijn)}
  .tb-bh-rail .tb-bh-item[aria-current]{border-color:var(--bh-inkt)}
  .tb-bh-rail .tb-bh-n,.tb-bh-rail .tb-bh-stip{margin-left:4px}
  .tb-bh-railvoet{display:none}
  .tb-bh-logo{padding:0 6px 0 2px;align-self:center;flex:0 0 auto}
  .tb-bh-logo img{height:20px}
  .tb-bh-hoofd{padding:18px 16px 28px}
  .tb-bh-kopbalk .tb-bh-rechts{margin-left:0;width:100%}
  .tb-bh-zoek{flex:1 1 100%}
  .tb-bh-zoek input{width:100%}
  .tb-bh-tabelwikkel{overflow-x:auto;margin:0 -16px;padding:0 16px}
  .tb-bh-tabelwikkel table{min-width:860px}
  /* De eerste kolom (baksel) houdt zijn breedte; anders brak een titel over vijf regels. */
  .tb-bh-tabelwikkel td:first-child{min-width:240px}
  /* Zonder rijen hoeft de tabel niet te schuiven: dan moet de uitleg binnen het scherm passen. */
  .tb-bh-tabelwikkel table:has(.tb-bh-leeg){min-width:0}
  .tb-bh-tabelwikkel table:has(.tb-bh-leeg) thead{display:none}
  .tb-bh-saldo{grid-template-columns:1fr}
  .tb-bh-saldo .tb-bh-rechtsblok,.tb-bh-saldo form{align-items:stretch}
  .tb-bh-saldo input[type=text]{width:100%}
  .tb-bh-melding{text-align:left;max-width:none}
  .tb-bh-trede{grid-template-columns:1fr auto;gap:6px 14px}
  .tb-bh-trede .tb-bh-wat{grid-column:1 / -1;grid-row:2}
  .tb-bh-trede .tb-bh-actie{grid-column:1 / -1}
  /* Een maandrooster van zeven kolommen past niet op 390 px: dan een lijst per dag. */
  .tb-bh-maand{display:none}
  .tb-bh-daglijst{display:block}
}
@media (max-width:560px){
  .tb-bh-kengetallen{gap:10px}
  .tb-bh-kg{padding:13px 13px}
  .tb-bh-kg .tb-bh-cijfer{font-size:24px}
  .tb-bh-kg .tb-bh-mini{display:none}
  .tb-bh-voortgang{flex-wrap:wrap}
  .tb-bh-voortgang a{margin-left:0}
}

/* Agenda als lijst per dag (smal scherm) */
.tb-bh-daglijst{list-style:none;margin:0;padding:0}
.tb-bh-daglijst > li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--bh-lijn)}
.tb-bh-daglijst > li:last-child{border-bottom:0}
.tb-bh-daglijst .tb-bh-datum{font:600 13px/1.2 var(--tb-sans);color:var(--bh-inkt)}
.tb-bh-daglijst .tb-bh-datum small{display:block;font-weight:500;color:var(--bh-zacht);margin-top:2px}
.tb-bh-daglijst .tb-bh-items{display:flex;flex-direction:column;gap:6px}
.tb-bh-daglijst .tb-bh-chip{height:auto;min-height:30px;padding:7px 10px;white-space:normal;line-height:1.3}

/* De Instagram-wizard in de schil (templates/tb-instagram-wizard.php): de wizard en "Zo werkt het"
   naast elkaar, zonder de band en de marges van de losse pagina. De foto's in het raster passen
   binnen hun kolom (18 sep: op 390 px stak er een 198 px buiten beeld). */
.tb-bh .tb-igw--schil{background:none;padding:0;margin:0}
.tb-bh .tb-igw--schil .tb-ov-raam{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:26px;max-width:none;margin:0;padding:0;align-items:start}
.tb-bh .tb-igw--schil img{max-width:100%;height:auto}
@media (max-width:1100px){
  .tb-bh .tb-igw--schil .tb-ov-raam{grid-template-columns:minmax(0,1fr)}
  .tb-bh .tb-igw--schil .tb-ov-zij{order:-1}
}

/* Het besteldetail in de schil (templates/tb-bestelling.php): zonder de losse paginaband en -marges. */
.tb-bh .tb-bestelling--schil{background:none;padding:0}
.tb-bh .tb-bestelling--schil .tb-bst-band{background:none;border:0}
.tb-bh .tb-bestelling--schil .tb-bst-band-in{max-width:none;padding:0 0 20px}
.tb-bh .tb-bestelling--schil .tb-bst-raster{max-width:none;margin:0;padding:0}

/* ...en in de taal van de schil (Fatih, 2026-09-19: "bij orders zoals deze wil ik ook de nieuwe design").
   Links vlakke secties met een haarlijn ertussen, zoals Pakket; rechts de kaarten als hulpkolom. Geen
   schaduw, geen serif, geen oranje datumkop, kopjes in zinsvorm. */
.tb-bh .tb-bh-kruimel{display:flex;gap:6px;align-items:center;margin:0 0 8px;font:500 13px/1.4 var(--tb-sans);color:var(--bh-zacht)}
.tb-bh .tb-bh-kruimel a{color:var(--bh-zacht);text-decoration:none}
.tb-bh .tb-bh-kruimel a:hover{color:var(--bh-inkt)}
.tb-bh .tb-bh-titelrij{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tb-bh .tb-bh-sub--nadruk{color:var(--bh-tekst);font-weight:600}
.tb-bh .tb-bh-rechts form{margin:0}
.tb-bh .tb-bestelling--schil .tb-bst-melding{margin:0 0 20px;border-radius:12px}
.tb-bh .tb-bestelling--schil .tb-bst-raster{grid-template-columns:minmax(0,1fr) 320px;gap:32px}
.tb-bh .tb-bestelling--schil .tb-bst-hoofd{gap:0}
.tb-bh .tb-bestelling--schil .tb-bst-zij{gap:16px}
.tb-bh .tb-bestelling--schil .tb-bst-hoofd .tb-bst-kaart{background:none;border:0;border-bottom:1px solid var(--bh-lijn);border-radius:0;box-shadow:none;padding:0 0 24px;margin:0 0 24px}
.tb-bh .tb-bestelling--schil .tb-bst-hoofd .tb-bst-kaart:last-child{border-bottom:0;margin-bottom:0}
.tb-bh .tb-bestelling--schil .tb-bst-zij .tb-bst-kaart{background:var(--bh-rust);border:1px solid var(--bh-lijn);border-radius:16px;box-shadow:none;padding:18px 20px}
.tb-bh .tb-bestelling--schil .tb-bst-label{margin:0 0 14px;font:600 16px/1.2 var(--tb-sans);letter-spacing:0;text-transform:none;color:var(--bh-inkt)}
.tb-bh .tb-bestelling--schil .tb-bst-zij .tb-bst-label{font-size:14px;margin-bottom:10px}
/* Wanneer: het datumblok neutraal, de kop in de maat van de schil. */
.tb-bh .tb-bestelling--schil .tb-bst-datum{border-color:var(--bh-lijn2);border-radius:12px}
.tb-bh .tb-bestelling--schil .tb-bst-datum-dag{background:var(--bh-zand);color:var(--bh-inkt);font-size:11px}
.tb-bh .tb-bestelling--schil .tb-bst-datum-nr{font:600 26px/1.1 var(--tb-sans);letter-spacing:-.02em;color:var(--bh-inkt)}
.tb-bh .tb-bestelling--schil .tb-bst-wanneer h2{font:600 19px/1.3 var(--tb-sans);letter-spacing:-.01em;color:var(--bh-inkt)}
.tb-bh .tb-bestelling--schil .tb-bst-wanneer p{font-size:14.5px;color:var(--bh-zacht)}
.tb-bh .tb-bestelling--schil .tb-bst-teller{background:var(--bh-zand);color:var(--bh-tekst);box-shadow:none;border-radius:9px}
.tb-bh .tb-bestelling--schil .tb-bst-teller.is-voorbij{background:var(--bh-vulling);color:var(--bh-zacht)}
/* Wat er is besteld, verloop */
.tb-bh .tb-bestelling--schil .tb-bst-product-foto{border-radius:12px;background:var(--bh-zand)}
.tb-bh .tb-bestelling--schil .tb-bst-product-naam,.tb-bh .tb-bestelling--schil .tb-bst-product-prijs{font:600 16px/1.35 var(--tb-sans);color:var(--bh-inkt)}
.tb-bh .tb-bestelling--schil .tb-bst-product-meta{font-size:13.5px;color:var(--bh-zacht)}
.tb-bh .tb-bestelling--schil .tb-bst-citaat{border-radius:12px;background:var(--bh-rust)}
.tb-bh .tb-bestelling--schil .tb-bst-stap{font-size:14.5px;font-weight:500}
.tb-bh .tb-bestelling--schil .tb-bst-verloop .is-nu .tb-bst-stap{font-weight:600}
.tb-bh .tb-bestelling--schil .tb-bst-stap-sub{font-size:13px}
.tb-bh .tb-bestelling--schil .tb-bst-verloop .is-nu .tb-bst-stip{background:var(--bh-inkt)}
/* Geld en klant in de hulpkolom: kleiner, zoals de hulp bij Pakket. */
.tb-bh .tb-bestelling--schil .tb-bst-bedragen dt,.tb-bh .tb-bestelling--schil .tb-bst-bedragen dd{font-size:14px;color:var(--bh-tekst)}
.tb-bh .tb-bestelling--schil .tb-bst-bedragen-totaal dt,.tb-bh .tb-bestelling--schil .tb-bst-bedragen-totaal dd{font-size:16px;font-weight:600;color:var(--bh-inkt)}
.tb-bh .tb-bestelling--schil .tb-bst-bedragen-totaal{border-color:var(--bh-lijn2)}
.tb-bh .tb-bestelling--schil .tb-bst-klein{font-size:13px;color:var(--bh-zacht)}
.tb-bh .tb-bestelling--schil .tb-bst-klein strong{color:var(--bh-inkt)}
.tb-bh .tb-bestelling--schil .tb-bst-notitie{background:var(--bh-wit);border:1px solid var(--bh-lijn);font-size:13px;color:var(--bh-tekst)}
.tb-bh .tb-bestelling--schil .tb-bst-klant-naam{font:600 15px/1.3 var(--tb-sans);color:var(--bh-inkt)}
.tb-bh .tb-bestelling--schil .tb-bst-klant-sub{font-size:13px;color:var(--bh-zacht)}
.tb-bh .tb-bestelling--schil .tb-bst-regels dt,.tb-bh .tb-bestelling--schil .tb-bst-regels dd{font-size:14px}
.tb-bh .tb-bestelling--schil .tb-bst-link a,.tb-bh .tb-bestelling--schil .tb-bst-klein a,
.tb-bh .tb-bestelling--schil .tb-bst-notitie a,.tb-bh .tb-bestelling--schil .tb-bst-regels a{color:var(--bh-or);font-weight:600;text-decoration:none}
.tb-bh .tb-bestelling--schil .tb-bst-link a:hover,.tb-bh .tb-bestelling--schil .tb-bst-klein a:hover,
.tb-bh .tb-bestelling--schil .tb-bst-notitie a:hover{text-decoration:underline;text-underline-offset:3px}
/* De knoppen in "Als het misgaat": dezelfde vorm als de knoppen van de schil. */
.tb-bh .tb-bestelling--schil .tb-bst-knop{height:40px;border-radius:11px;font:600 14px/1 var(--tb-sans)}
.tb-bh .tb-bestelling--schil .tb-bst-knop--zacht{background:var(--bh-wit);box-shadow:inset 0 0 0 1px var(--bh-lijn2)}
@media (max-width:1100px){
  .tb-bh .tb-bestelling--schil .tb-bst-raster{grid-template-columns:minmax(0,1fr);grid-template-areas:"hoofd" "zij";gap:24px}
}
@media (max-width:640px){
  .tb-bh .tb-bestelling--schil .tb-bh-rechts{width:100%}
  .tb-bh .tb-bestelling--schil .tb-bh-rechts > *{flex:1 1 100%}
  .tb-bh .tb-bestelling--schil .tb-bh-rechts .tb-bh-knop{width:100%}
}

/* Het bestelscherm van de klant in de schil (Voxels single-order): onze agendaknoppen staan erboven
   (inc/tb-agenda-knop.php), dus Voxels "Google Cal" en "iCal" weg; die gaven bovendien een afspraak van
   nul minuten (dates=…T000000/…T000000, gezien op #55). "Ga terug" staat al als "Alle bestellingen" in de kopbalk. */
.tb-bh .order-event .further-actions a[href^="https://calendar.google.com"],
.tb-bh .order-event .further-actions a[href^="data:text/calendar"],
.tb-bh .vx-order-head .ts-go-back{display:none}