/* Kassa door Broer Collective: de huisstijl van Broer Collective (tokens zoals reserveren/bron/static/beheer.css en
   broercollective/app/site.css). Letters op de eigen server (static/letters, OFL). Roze is de kleur van de kassa. */
@font-face{font-family:"Anybody";font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(letters/anybody-v13-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Anybody";font-style:normal;font-weight:100 900;font-stretch:50% 150%;font-display:swap;src:url(letters/anybody-v13-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(letters/schibsted-grotesk-v7-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Schibsted Grotesk";font-style:normal;font-weight:400 900;font-display:swap;src:url(letters/schibsted-grotesk-v7-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light;
  --bg:#F1EFEA; --ink:#15171F;
  --hi:#FFE45C; --hi-ink:#15171F;
  --pop:#FF6FA8;
  --card:#FFFFFF;
  --alt:#2230F5; --alt-ink:#F1EFEA;
  --ok:#2FB36B;
  --muted:color-mix(in srgb, var(--ink) 72%, var(--bg));
  --faint:color-mix(in srgb, var(--ink) 18%, var(--bg));
  --display:"Anybody", "Arial Black", Impact, sans-serif;
  --body:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance;margin:0}
h1{font-family:var(--display);font-variation-settings:"wdth" 116,"wght" 900;font-size:clamp(30px,4.4vw,48px);line-height:.95;letter-spacing:-.01em}
h2{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 850;font-size:22px;line-height:1.05}
p{margin:0}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gedempt,.hint{color:var(--muted)}
.hint{font-size:13px;display:block}
.mono{font-variant-numeric:tabular-nums;white-space:nowrap}
.bm{fill:currentColor;flex:none}

/* logo: roze tegel met de K, "kassa" en "door broer collective" */
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.tegel{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--pop);color:var(--ink);flex:none}
.tegel .bm{width:16px;height:auto}
.tegel.groot{width:72px;height:72px;border-radius:18px;margin-bottom:8px}
.tegel.groot .bm{width:32px}
.logo-tekst{display:grid;line-height:1}
.logo-tekst b{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 900;font-size:24px;letter-spacing:-.01em}
.logo-tekst small{font-size:11px;font-weight:700;letter-spacing:.02em;margin-top:3px;color:var(--muted)}

/* knoppen en bouwstenen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:2px solid var(--ink);background:var(--ink);color:var(--bg);
  padding:10px 20px;border-radius:999px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;transition:transform .2s;min-height:48px}
.knop:hover{transform:translateY(-2px) rotate(-1.5deg)}
.knop:disabled{opacity:.4;cursor:default;transform:none}
.knop.licht{background:transparent;color:var(--ink)}
.knop.licht[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.knop.klein{padding:4px 14px;font-size:14px;min-height:36px}
/* Hoofdacties in de productkleur van de kassa (roze, zoals kobalt bij Boeken): tekst en rand blijven inkt (contrast ~7:1). */
.knop.groot{font-size:20px;padding:14px 28px;min-height:60px;background:var(--pop);color:var(--ink);border-color:var(--ink)}
.knop.groot:not(:disabled):hover{box-shadow:3px 3px 0 var(--ink)}
@media (prefers-reduced-motion:reduce){.knop{transition:none}.knop:hover{transform:none}}
input,select,textarea{font:inherit;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:10px 12px;min-width:0}
input[type="checkbox"]{width:22px;height:22px;accent-color:var(--ink)}
.melding{padding:12px 16px;border-radius:14px;border:2px solid var(--ink);font-weight:600}
.melding.goed{background:color-mix(in srgb,var(--ok) 22%,var(--card))}
.melding.fout{background:color-mix(in srgb,var(--pop) 30%,var(--card))}
/* Melding van automatisch opslaan (Instellingen): blijft bovenin in beeld tijdens het scrollen. */
.opslaan-status{position:sticky;top:10px;z-index:5;justify-self:start;margin:0;padding:6px 14px;border-radius:999px;
  border:2px solid var(--ink);background:var(--card);font-weight:700;font-size:14px}
.opslaan-status.goed{background:color-mix(in srgb,var(--ok) 30%,var(--card))}
.opslaan-status.bezig{background:var(--hi)}
.opslaan-status.fout{background:color-mix(in srgb,var(--pop) 35%,var(--card))}
@media (max-width:899px){.opslaan-status{top:74px}}
.bladeren{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;font-weight:700}
.voorbeeld-download{display:flex;gap:8px 10px;align-items:center;flex-wrap:wrap;margin:0}
.voorbeeld-download .hint{flex-basis:100%}
.stappen-lijst{margin:0;padding-left:22px;display:grid;gap:8px;font-weight:600}
.stappen-lijst li.klaar{color:var(--muted);font-weight:400}
.melding.let-op{background:color-mix(in srgb,var(--hi) 60%,var(--card))}
details.hint summary{cursor:pointer;font-weight:700;color:var(--ink)}
.pil{display:inline-block;font-size:13px;font-weight:800;padding:2px 10px;border-radius:999px;background:var(--card);border:1.5px solid var(--ink)}
.leeg{padding:18px;border:2px dashed var(--faint);border-radius:14px;color:var(--muted)}

/* ---------- kassascherm ---------- */
.kassa-body{height:100dvh;display:grid;grid-template-rows:auto 1fr;overflow:hidden}
.kassa-kop{display:flex;align-items:center;gap:12px 20px;padding:10px 16px;border-top:6px solid var(--pop);border-bottom:2px solid var(--ink);flex-wrap:wrap}
.zaaknaam{font-weight:800;font-size:18px;margin-right:auto}
.demo-pil{background:var(--hi)}
.kassa{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);gap:16px;padding:16px;min-height:0}
.kiezen{display:flex;flex-direction:column;gap:12px;min-height:0}
.kiezen .snel{flex:1}
.scan{display:flex;gap:8px}
.scan input{flex:1;font-size:20px;padding:12px 16px;border-radius:999px}
.resultaten,.snel{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;align-content:start;overflow:auto;min-height:0}
.resultaten{max-height:40vh;padding:12px;border:2px solid var(--ink);border-radius:18px;background:var(--hi)}
.tegelknop{font:inherit;color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:16px;padding:10px 12px;
  display:flex;flex-direction:column;justify-content:space-between;text-align:left;gap:6px;cursor:pointer;line-height:1.2;
  font-weight:700;min-width:0}
/* Lange namen: hooguit drie regels (vaste hoogte, zodat de prijzen op een lijn staan), lange woorden mogen breken; de hele
   naam staat in de tooltip en op de bon. */
.tegelknop span{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;
  font-size:15px;line-height:1.2;height:calc(3 * 1.2em);flex:none}
.tegelknop b{font-size:18px}
/* Een foto bovenin de tegel, bijgesneden (object-fit). Geen overflow:hidden op de tegel: dan mag de rij hem kleiner maken
   dan zijn inhoud. De ronde hoeken zitten daarom op de foto zelf. */
.tegel-voorraad{font-size:12px;font-weight:600;color:var(--muted)}
.tegel-voorraad.op{color:var(--ink);background:color-mix(in srgb,var(--pop) 35%,var(--card));border-radius:6px;padding:0 6px;
  justify-self:start;align-self:flex-start}
.tegelknop.met-foto{padding-top:0}
.tegelfoto{display:block;width:calc(100% + 24px);margin:0 -12px;height:84px;object-fit:cover;background:var(--faint);
  border-bottom:2px solid var(--ink);border-radius:14px 14px 0 0;flex:none}
.tegelknop:hover{background:color-mix(in srgb,var(--pop) 14%,var(--card))}
.tegelknop:active{background:var(--pop)}
.kiezen-onder{display:flex;gap:10px;flex-wrap:wrap}
/* Categorieen: grote knoppen die allemaal in beeld blijven (geen zijwaarts scrollen), met het aantal artikelen eronder.
   De gekozen categorie is roze met een dikke rand, zodat ook een kind ziet waar hij is. */
.tabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;flex:none}
.tabs button{font:inherit;font-size:17px;font-weight:800;line-height:1.15;color:var(--ink);background:var(--card);
  border:2px solid var(--ink);border-radius:14px;padding:8px 10px;min-height:60px;cursor:pointer;display:grid;
  align-content:center;justify-items:center;text-align:center;gap:2px}
.tabs button small{font-size:12px;font-weight:600;color:var(--muted)}
.tabs button:hover{background:color-mix(in srgb,var(--pop) 14%,var(--card))}
.tabs button[aria-selected="true"]{background:var(--pop);box-shadow:inset 0 0 0 2px var(--ink)}
.tabs button[aria-selected="true"] small{color:var(--ink)}
/* Kleur per categorie (wens Mart 28-10-2026, zaken.categorie_kleur): het tabblad in een lichte tint van zijn kleur, gekozen
   in de volle kleur met een dikke rand; op elke tegel een streep links in dezelfde kleur. */
.cat-0{--cat:#D9B48F}.cat-1{--cat:#FFD45C}.cat-2{--cat:#8FD9A8}.cat-3{--cat:#8EC5FF}.cat-4{--cat:#C3A6FF}
.cat-5{--cat:#FFB27A}.cat-6{--cat:#7FD6D0}.cat-7{--cat:#E6A1E0}.cat-8{--cat:#C8D86B}.cat-9{--cat:#F2A7A0}
.cat-overig{--cat:#CFCBC2}.cat-snel{--cat:var(--pop)}
.tabs button[class*="cat-"]{background:color-mix(in srgb,var(--cat) 62%,var(--card))}
.tabs button[class*="cat-"]:hover{background:color-mix(in srgb,var(--cat) 82%,var(--card))}
.tabs button[class*="cat-"][aria-selected="true"]{background:var(--cat);box-shadow:inset 0 0 0 4px var(--ink)}
.tegelknop[class*="cat-"]{box-shadow:inset 10px 0 0 var(--cat);padding-left:20px}
.tegelknop[class*="cat-"] .tegelfoto{width:calc(100% + 32px);margin:0 -12px 0 -20px}
.cat-stip{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--cat);border:1.5px solid var(--ink);
  margin-right:6px;vertical-align:-1px}
@media (max-width:520px){.tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.tabs button{font-size:16px;min-height:56px}}

.bonpaneel{background:var(--card);border:2px solid var(--ink);border-radius:20px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.bonpaneel .regels{flex:1}
.bonpaneel-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 16px;border-bottom:2px solid var(--ink);
  background:color-mix(in srgb,var(--pop) 22%,var(--card))}
.retour-pil{background:var(--pop)}
.regels{list-style:none;margin:0;padding:0;overflow:auto;min-height:0}
.regel{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:6px 10px;align-items:center;padding:10px 12px 10px 16px;border-bottom:1px solid var(--faint)}
.regel.nieuw{animation:oplichten 1s ease-out}
@keyframes oplichten{from{background:var(--hi)}to{background:transparent}}
@media (prefers-reduced-motion:reduce){.regel.nieuw{animation:none}}
.regel-naam{display:grid;font-weight:700;line-height:1.25;min-width:0;overflow-wrap:anywhere}
.regel-naam .naam{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.regel-naam small{font-weight:400;color:var(--muted)}
/* Kleine foto voor de regel op de bon (alleen op het scherm). */
.regel-naam.met-foto{grid-template-columns:32px minmax(0,1fr);column-gap:8px}
.regel-naam.met-foto>:not(.regel-foto){grid-column:2}
.regel-foto{grid-column:1;grid-row:1/span 3;width:32px;height:32px;object-fit:cover;border-radius:7px;
  border:1.5px solid var(--ink);background:var(--faint);align-self:center}
.regel-bedrag{text-align:right;min-width:72px}
.stappen{display:flex;align-items:center;gap:6px}
.stappen b{min-width:28px;text-align:center}
.rond{width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:var(--card);color:var(--ink);font:inherit;font-size:20px;font-weight:800;cursor:pointer;line-height:1}
.rond:active{background:var(--hi)}
.rond.weg{border-color:transparent;color:var(--muted)}
.bonpaneel .leeg{margin:16px}
.totaalrij{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px;border-top:2px solid var(--ink);font-weight:800}
.totaalrij b{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 900;font-size:40px;line-height:1}
.bonpaneel-acties{display:grid;grid-template-columns:auto auto 1fr;gap:10px;padding:0 16px 16px}
.bonpaneel-acties .knop{white-space:nowrap;padding-left:16px;padding-right:16px}
.kortingrij{display:flex;justify-content:space-between;padding:10px 16px 0;border-top:2px solid var(--ink);font-weight:700}
.kortingrij+.totaalrij{border-top:0}
.regel-korting{color:var(--ink);background:color-mix(in srgb,var(--pop) 30%,var(--card));border-radius:6px;padding:0 6px;
  justify-self:start;font-size:12px;font-weight:800}
.rond.procent{font-size:16px}
.rond.procent[aria-pressed="true"]{background:var(--pop)}
.bon-korting{font-size:13px}
/* Afspraken uit Boeken */
.afspraken-lijst{display:grid;gap:8px;max-height:55vh;overflow:auto}
.afspraak{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;
  border:2px solid var(--ink);border-radius:14px;background:var(--card)}
.afspraak.afgerekend,.afspraak.niet_gekomen{opacity:.6}
.afspraak-info{display:grid;gap:2px}
.afspraak-info b{font-size:18px}
.afspraak-info small{color:var(--muted)}
/* Dag afsluiten: tellen per biljet en munt */
.munten{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.munten label{display:grid;gap:4px;font-weight:800;font-size:15px}
.munten input{font-size:20px;text-align:center}
.verschil{font-weight:900;font-size:20px}
.verschil.goed{color:var(--ink);background:color-mix(in srgb,var(--ok) 25%,var(--card));padding:6px 12px;border-radius:10px}
.verschil.fout{color:var(--ink);background:color-mix(in srgb,var(--pop) 35%,var(--card));padding:6px 12px;border-radius:10px}
/* Uitboeken */
.reden{display:flex;gap:8px;align-items:center;font-weight:700;border:2px solid var(--ink);border-radius:999px;padding:8px 14px;
  background:var(--card);cursor:pointer}
.reden:has(input:checked){background:var(--pop)}
.uitboek-regels{display:grid;gap:6px}
/* Pincodescherm */
.pin-body{min-height:100vh;display:grid;place-items:center;padding:16px}
.pin{width:min(400px,100%);display:grid;gap:14px}
.pin-scherm{font-size:36px;letter-spacing:.4em;text-align:center;padding:10px}
.pin-form{display:grid;gap:12px}
.eigenaar-pil{background:color-mix(in srgb,var(--alt) 18%,var(--card));font-size:14px}
/* Klant op de bon (voor een factuur). */
.klantrij{display:flex;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--faint)}
.klantrij #klant-knop{flex:1;justify-content:flex-start;min-height:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.klantrij #klant-knop.gekozen{background:color-mix(in srgb,var(--alt) 14%,var(--card))}
.klant-lijst{display:grid;gap:8px;max-height:40vh;overflow:auto}
.klant-lijst button{font:inherit;text-align:left;padding:12px 14px;border:2px solid var(--ink);border-radius:14px;background:var(--card);
  color:var(--ink);cursor:pointer;display:grid;gap:2px}
.klant-lijst button b{font-size:17px}
.klant-lijst button span{font-size:13px;color:var(--muted)}
.klant-lijst button:active{background:var(--pop)}
.klant-nieuw>summary{list-style:none;cursor:pointer;width:max-content}
.klant-nieuw>summary::-webkit-details-marker{display:none}
.nieuw-in{padding:12px 0 0;gap:10px;display:grid}
.nieuw-in label{display:grid;gap:4px;font-weight:700}
.bon-factuur{font-weight:800}
/* Oefenstand: een gele pil in de kop, en op de bon een duidelijke regel. */
.oefen-pil{background:var(--hi);font-size:15px}
.oefen-kaart{background:color-mix(in srgb,var(--hi) 55%,var(--card))}
.bon-oefen{background:var(--hi);text-align:center;font-weight:900;padding:4px;border-radius:6px;letter-spacing:.04em}
/* Het aantal in de bon is een knop: tik erop voor het cijferblok. */
.aantal-knop{font:inherit;font-weight:800;min-width:40px;height:40px;border-radius:10px;border:2px dashed var(--faint);
  background:transparent;color:var(--ink);cursor:pointer}
.aantal-knop:hover{border-color:var(--ink)}
.dlg.smal{width:min(380px,calc(100vw - 32px))}
.aantal-scherm{display:block;text-align:right;font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 900;font-size:48px;
  line-height:1;background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:10px 16px}
.cijferblok{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cijferblok button{font:inherit;font-size:26px;font-weight:800;min-height:64px;border-radius:14px;border:2px solid var(--ink);
  background:var(--card);color:var(--ink);cursor:pointer}
.cijferblok button:active{background:var(--pop)}
.cijferblok .plus{font-size:18px;background:color-mix(in srgb,var(--pop) 18%,var(--card))}
.bon-totaal.bon-korting{font-size:15px;font-weight:700}
@media (max-width:420px){.bonpaneel-acties{grid-template-columns:1fr 1fr}.bonpaneel-acties #afrekenen{grid-column:1/-1}}
/* Smal (telefoon): de naam op een eigen regel, knoppen en bedrag eronder. */
@media (max-width:520px){.regel{grid-template-columns:auto 1fr auto}.regel-naam{grid-column:1/-1}.regel-bedrag{justify-self:end}}
body.is-retour .bonpaneel{border-color:var(--pop);box-shadow:0 0 0 4px var(--pop)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;
  font-weight:700;max-width:calc(100vw - 32px);z-index:10;text-align:center}
.toast.fout{background:var(--pop);color:var(--ink);border:2px solid var(--ink)}

@media (max-width:820px){
  .kassa-body{height:auto;overflow:visible}
  .kassa{grid-template-columns:minmax(0,1fr)}
  .bonpaneel{min-height:420px}
  .totaalrij b{font-size:32px}
}

/* dialogen */
.dlg{border:2px solid var(--ink);border-radius:22px;padding:0;background:var(--bg);color:var(--ink);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px)}
.dlg::backdrop{background:color-mix(in srgb,var(--ink) 55%,transparent)}
.dlg-in{display:grid;gap:14px;padding:22px}
.dlg-in>label{display:grid;gap:4px;font-weight:700}
.dlg-acties{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:4px}
.groot-bedrag{display:flex;justify-content:space-between;align-items:baseline;font-weight:800}
.groot-bedrag b{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 900;font-size:44px;line-height:1}
.betaalwijzen{border:0;padding:0;margin:0}
.betaalwijzen legend{font-weight:700;margin-bottom:8px}
.knoppenrij{display:flex;gap:8px;flex-wrap:wrap}
.betaalwijze{flex:1;min-height:64px;font-size:18px}
.contant{display:grid;gap:8px}
.contant label{font-weight:700}
.contant input{font-size:24px}
.wisselgeld{display:flex;justify-content:space-between;font-weight:800;font-size:20px}

/* de bon (op het scherm en op papier) */
.bon{background:var(--card);border:2px solid var(--ink);border-radius:14px;padding:16px;display:grid;gap:6px;font-size:15px}
.bon-zaak{font-weight:900;font-size:18px}
.bon-klein{font-size:13px;color:var(--muted)}
.bon table{width:100%;border-collapse:collapse}
.bon td,.bon th{padding:3px 0;vertical-align:top;text-align:left}
.bon td.mono,.bon th:last-child,.bon td:last-child{text-align:right}
.bon-regels td:first-child{width:52px;white-space:nowrap}
.bon-regels{border-top:1.5px dashed var(--ink);border-bottom:1.5px dashed var(--ink);margin:4px 0}
.bon-totaal{display:flex;justify-content:space-between;font-weight:900;font-size:20px}
.bon-btw{font-size:13px}
.bon-btw th{font-weight:700;text-align:right}
.bon-btw th:first-child{text-align:left}
.bon-voet{text-align:center;margin-top:6px;font-weight:600}
.afdruk{display:none}
@media print{
  @page{margin:4mm}
  body,body.kassa-body{display:block;height:auto;background:#fff;overflow:visible}
  /* Alleen op het kassascherm: daar gaat alleen de bon naar de printer. (Eerst gold dit voor elke pagina, en dan kwam de
     factuur en elk overzicht als leeg blad uit de printer.) */
  body.kassa-body>*:not(.afdruk){display:none!important}
  .kop,.voet,.zijbalk,.schaduw,.niet-afdrukken{display:none!important}
  body.met-zijbalk{display:block}
  .afdruk{display:block!important;width:72mm;font-size:12px}
  .afdruk .bon,.losse-bon .bon{border:0;padding:0;font-size:12px;color:#000}
  .bon-klein{color:#000}
}

/* ---------- beheer ---------- */
.kop{border-bottom:2px solid var(--ink);background:var(--bg)}
.kop-in{max-width:1120px;margin:0 auto;padding:14px 16px;display:flex;gap:10px 32px;align-items:center;flex-wrap:wrap}
.kop nav{display:flex;gap:4px 8px;flex-wrap:wrap}
.kop nav a{text-decoration:none;font-weight:700;padding:6px 12px;border-radius:999px}
.kop nav a:hover{background:var(--card)}
.kop nav a[aria-current="page"]{background:var(--hi);color:var(--hi-ink)}
/* Menu als zijbalk (wens Mart 28-10-2026): op een groot scherm vast links, op een telefoon of tablet achter "Menu" en dan
   schuift hij van links in beeld (:target, dus ook zonder script). */
body.met-zijbalk{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.zijbalk{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--bg);border-right:2px solid var(--ink);
  padding:16px 12px 24px;display:flex;flex-direction:column;gap:14px}
.zijbalk-kop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px}
.zijbalk-zaak{font-weight:800;padding:0 8px;margin:0;overflow-wrap:anywhere}
.zijbalk nav{display:flex;flex-direction:column;gap:2px}
.zijbalk nav a{text-decoration:none;font-weight:700;font-size:16px;padding:10px 12px;border-radius:12px}
.zijbalk nav a:hover{background:var(--card)}
.zijbalk nav a[aria-current="page"]{background:var(--hi);color:var(--hi-ink)}
.zijbalk nav .naar-kassa{background:var(--pop);color:var(--ink);border:2px solid var(--ink);margin-bottom:8px;text-align:center}
/* Blijft roze bij hover (werd wit door `.zijbalk nav a:hover`; gezien door de chat Reserveringssysteem). */
.zijbalk nav .naar-kassa:hover{background:color-mix(in srgb,var(--pop) 85%,var(--ink))}
.zijbalk nav .alle-zaken{margin-top:8px;border-top:2px solid var(--faint);border-radius:0;padding-top:14px}
.zijbalk .vergrendel{padding:0 4px}
.zijbalk .sluit,.kop-smal,.schaduw{display:none}
.beheer-rechts{min-width:0}
.menu-knop::before{content:"\2630";font-size:17px;margin-right:8px;line-height:1}
@media (max-width:899px){
  body.met-zijbalk{display:block}
  .kop-smal{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;position:sticky;top:0;z-index:30}
  .zijbalk{position:fixed;inset:0 auto 0 0;height:auto;width:min(300px,86vw);z-index:50;transform:translateX(-105%);
    transition:transform .2s ease;box-shadow:4px 0 24px rgba(0,0,0,.18)}
  .zijbalk:target{transform:none}
  .zijbalk .sluit{display:inline-flex}
  .zijbalk:target~.schaduw{display:block;position:fixed;inset:0;background:rgba(21,23,31,.38);z-index:40}
}
@media (prefers-reduced-motion:reduce){.zijbalk{transition:none}}
main.beheer{max-width:1120px;margin:0 auto;padding:28px 16px 64px;display:grid;gap:20px}
.voet{max-width:1120px;margin:0 auto;padding:0 16px 32px;font-size:13px;color:var(--muted)}
.kaart{background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:20px;display:grid;gap:12px;min-width:0}
.kaart.let-op{background:color-mix(in srgb,var(--pop) 18%,var(--card))}
.kop-rij{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.rij{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.rij label,.velden label{display:grid;gap:4px;font-size:14px;font-weight:700}
/* Alle invulvakken even breed (wens Mart 27-10-2026): kolommen van gelijke breedte, op een telefoon een; vinkjes en
   uitleg over de hele breedte. */
.velden{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:14px;align-items:start}
.velden .breed,.velden .vink,.velden>p{grid-column:1/-1}
.velden.kaal{border:0;padding:0;margin:0;min-width:0}
.vink{display:flex!important;gap:10px;align-items:center;font-weight:600!important}
.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.cijfer{background:var(--card);border:2px solid var(--ink);border-radius:18px;padding:14px 16px;display:grid;gap:2px}
.cijfer span{font-size:13px;font-weight:700;color:var(--muted)}
.cijfer b{font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 900;font-size:30px;line-height:1.1}
.cijfer.hoofd{background:var(--hi)}
.dagnav{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tabel-wrap{overflow-x:auto;border:2px solid var(--ink);border-radius:18px;background:var(--card)}
.tabel{width:100%;border-collapse:collapse}
.tabel th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;padding:10px 12px;border-bottom:2px solid var(--ink)}
.tabel td{padding:10px 12px;border-bottom:1px solid var(--faint);vertical-align:top}
.tabel tr:last-child td{border-bottom:0}
.tabel .rechts{text-align:right}
.tabel tr.retour td{background:color-mix(in srgb,var(--pop) 12%,var(--card))}
.status{font-size:12px;font-weight:800;padding:1px 9px;border-radius:999px;border:1.5px solid var(--ink);white-space:nowrap}
.status.klaar{background:color-mix(in srgb,var(--ok) 30%,var(--card))}
.status.wacht{background:var(--hi)}
.status.fout,.status.stop{background:var(--pop)}
.status.uit{border-color:var(--faint);color:var(--muted)}
code{font-size:13px;background:var(--bg);padding:1px 5px;border-radius:4px}
.inline{display:inline}

/* losse bonpagina (vanuit het beheer) */
.losse-bon{max-width:420px;margin:24px auto;padding:0 16px;display:grid;gap:12px}

/* voorpagina en foutpagina: een kobalt vlak, zoals bij Boeken */
body.vlak{background:var(--alt);color:var(--alt-ink);min-height:100vh;display:grid;place-items:center}
.voorpagina{max-width:640px;padding:48px 20px;display:grid;gap:14px;justify-items:start}
.voorpagina h1{font-size:clamp(56px,12vw,120px)}
.voorpagina .onder{font-weight:800;font-size:18px;margin-top:-6px}
.voorpagina .zin{font-size:clamp(18px,2.2vw,22px);max-width:34ch}
.voorpagina .klein{font-size:14px;opacity:.85}
.voorpagina .knop{background:var(--alt-ink);color:var(--alt);border-color:var(--alt-ink);margin-top:8px}