/* Kassanext.
   Aan een kassa staat iemand die haast heeft, vaak met een vinger op een
   aanraakscherm. Daarom is alles wat je aanslaat minstens zestig pixels hoog
   en staan bedragen in een letter waarin de cijfers even breed zijn — dan
   springt een totaal niet heen en weer terwijl je aanslaat.

   De kleuren komen van het merk: hetzelfde donkerblauw en hetzelfde blauw als
   het beeldmerk. De balk bovenaan is donker; dat scheelt niet alleen dat het
   er verzorgd uitziet, het scheidt ook waar je bént van waar je wérkt, en dat
   helpt als je de hele dag naar hetzelfde scherm kijkt. */

:root {
  --inkt: #0d1526;
  --muted: #5a6478;
  --zwak: #8a93a6;
  --lijn: #e7ebf1;
  --lijn-fijn: #f0f3f7;
  --bg: #f6f8fb;
  --kaart: #ffffff;
  --navy: #241043;
  --navy-op: #3a1a5e;
  --blauw: #7c3aed;
  --blauw-donker: #6d28d9;
  --blauw-licht: #f5f0ff;
  --groen: #15803d;
  --groen-bg: #e8f6ed;
  --rood: #b91c1c;
  --rood-bg: #fdeced;
  --amber: #b45309;
  --amber-bg: #fff6e6;
  --schaduw: 0 1px 2px rgba(11,34,68,.05), 0 1px 3px rgba(11,34,68,.04);
  --schaduw-op: 0 4px 6px -1px rgba(11,34,68,.08), 0 12px 24px -8px rgba(11,34,68,.14);
  --rond: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  color: var(--inkt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { letter-spacing: -.018em; }

.getal { font-variant-numeric: tabular-nums; }

/* ── Merk ───────────────────────────────────────────────────────────────── */

.merk { display: inline-flex; align-items: baseline; font-weight: 700; letter-spacing: -.03em; }
.merk .a { color: var(--navy); }
.merk .b { color: var(--blauw); }
/* In de donkere balk moet het woordmerk mee omkleuren, anders staat er
   donkerblauw op donkerblauw en lees je alleen het tweede deel. */
.balk .merk .a { color: #fff; }
.balk .merk .b { color: #fb7185; }

/* ── Aanmelden ──────────────────────────────────────────────────────────── */

.aanmeld { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.kaart {
  width: 100%; max-width: 420px; background: var(--kaart);
  border: 1px solid var(--lijn); border-radius: 16px; padding: 34px;
  box-shadow: var(--schaduw-op);
}
.kaart .merk { font-size: 26px; }
.onder { color: var(--muted); font-size: 13px; margin: 6px 0 26px; }

label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.veld { margin-bottom: 16px; }

/* Ook `input` zónder type-attribuut: dat is gewoon een tekstveld, maar
   `input[type=text]` matcht er niet op — het attribuut moet er dan lettérlijk
   staan. Daardoor stond het gebruikersnaamveld op het aanmeldscherm als enige
   onopgemaakt, naast een keurig wachtwoordveld eronder. */
input:not([type]), input[type=text], input[type=password], input[type=email],
input[type=number], input[type=date], input[type=tel], input[type=search],
select, textarea {
  width: 100%; padding: 12px 14px; font: inherit;
  border: 1px solid var(--lijn); border-radius: 10px;
  background: var(--kaart); color: var(--inkt);
}
input:not([type]):focus, input[type=text]:focus, input[type=password]:focus,
input[type=email]:focus, input[type=number]:focus, input[type=date]:focus,
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(37,99,235,.28); border-color: var(--blauw);
}

.knop {
  transition: background .12s, border-color .12s, box-shadow .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border: 0; border-radius: 10px;
  background: var(--blauw); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
.knop.breed { width: 100%; }
.knop.stil { background: var(--kaart); color: var(--inkt); border: 1px solid var(--lijn); }
.knop.stil:hover { background: var(--bg); border-color: #d7dee8; }
.knop.klein { padding: 8px 13px; font-size: 13px; font-weight: 500; }
.knop.groot { min-height: 62px; font-size: 17px; }
.knop.gevaar { background: var(--rood); }
.knop:disabled { opacity: .45; cursor: default; }
/* `hidden` verliest het van `display: inline-flex` op .knop — die staat in de
   stijl van de pagina en `hidden` alleen in die van de browser. Daardoor bleef
   "Plekken opslaan" altijd staan, ook als er niets verplaatst was. */
.knop[hidden] { display: none; }

.melding { margin-top: 14px; padding: 11px 13px; border-radius: 10px; font-size: 13px;
           background: var(--bg); color: var(--muted); }
.melding.fout { background: var(--rood-bg); color: var(--rood); }
.melding.goed { background: var(--groen-bg); color: var(--groen); }
/* Voor wat geen fout is maar wel eerst gelezen moet worden. */
.melding.let  { background: var(--amber-bg); color: var(--amber); }

.codeveld input { text-align: center; font-size: 28px; letter-spacing: 12px; }

/* ── Het geraamte ───────────────────────────────────────────────────────── */

/* ── Het geraamte ─────────────────────────────────────────────────────────────
 *
 * Op een breed scherm staat het menu links: dan is er ruimte, en een lijst onder
 * elkaar is sneller te lezen dan tien knoppen op een rij. Op een telefoon of een
 * handheld achter de bar is die ruimte er niet — daar blijft het een balk boven,
 * die meeschuift. Eén opmaak die zich aanpast in plaats van twee menu's die uit
 * elkaar gaan lopen.
 */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.balk {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 18px; background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.07);
  position: sticky; top: 0; z-index: 20;
}
.balk .merk { font-size: 19px; }
.balk .winkelnaam { color: #9fb2cf; font-size: 13px; }
.balk nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.balk nav button {
  border: 0; background: none; font: inherit; font-size: 14px; color: #9fb2cf;
  padding: 9px 13px; border-radius: 8px; cursor: pointer; font-weight: 500;
  transition: background .12s, color .12s;
}
.balk nav button:hover { background: rgba(255,255,255,.09); color: #fff; }
.balk nav button.aan { background: var(--blauw); color: #fff; font-weight: 600; }
.balk .wie { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #9fb2cf; }

main { flex: 1; padding: 18px; max-width: 1400px; width: 100%; margin: 0 auto; }

.paneel {
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: 14px;
  padding: 20px; margin-bottom: 18px;
}
.paneel h2 { margin: 0 0 4px; font-size: 17px; }
.paneel .uitleg { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.kop { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.kop h2 { margin: 0; }
.kop .rechts { margin-left: auto; display: flex; gap: 8px; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); padding: 0 10px 10px; border-bottom: 1px solid var(--lijn);
}
td { padding: 12px 10px; border-bottom: 1px solid var(--lijn); }
tr:last-child td { border-bottom: 0; }
.r { text-align: right; }
/* Een compacte tabel voor lijstjes in een dialoog, waar de ruimte op is. */
table.klein { font-size: 13px; }
table.klein th, table.klein td { padding: 6px 8px; }
.sub { display: block; color: var(--muted); font-size: 12px; }
.leeg { text-align: center; color: var(--muted); padding: 44px 20px; }

.merkje { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px;
          font-weight: 600; letter-spacing: -.005em; }
.merkje.goed { background: var(--groen-bg); color: var(--groen); }
.merkje.let  { background: var(--amber-bg); color: var(--amber); }
.merkje.uit  { background: var(--bg); color: var(--muted); }
.merkje.fout { background: var(--rood-bg); color: var(--rood); }

/* ── Het rooster ─────────────────────────────────────────────────────────── */
/*
 * Een raster met de mensen als rijen en zeven dagen als kolommen, zoals het aan
 * een koelkast hangt. Op een telefoon schuift het horizontaal: zeven kolommen
 * naast elkaar persen levert onleesbare hokjes op.
 */
.roosterrol { overflow-x: auto; margin: 4px 0 0; }
table.rooster { min-width: 720px; }
table.rooster th, table.rooster td { padding: 6px 7px; vertical-align: top; }
table.rooster td.wie { white-space: nowrap; padding-top: 11px; }

table.rooster th.dagkop { text-align: left; font-weight: 600; line-height: 1.15; }
table.rooster th.dagkop span { display: block; font-weight: 500; color: var(--muted);
                               font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
table.rooster th.dagkop.nu, table.rooster td.vakje.nu { background: var(--blauw-licht); }

table.rooster td.vakje { min-width: 84px; }

/* Een dienst is een blokje waar je op tikt. Groot genoeg voor een vinger, want
   een rooster wordt net zo vaak op een telefoon bijgewerkt als op een pc. */
.rooster .dienst {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em;
  color: var(--blauw); background: var(--blauw-licht);
  border: 1px solid transparent; border-radius: 8px;
  padding: 5px 7px; margin-bottom: 4px; min-height: 30px;
  font-variant-numeric: tabular-nums;
}
.rooster .dienst:hover { border-color: var(--blauw); }
.rooster .dienst span { display: block; font-weight: 500; font-size: 11px; color: var(--muted); }

/* De plus is stil tot je erover gaat: een raster vol plussen leest als rommel. */
.rooster .erbij {
  width: 100%; min-height: 26px; cursor: pointer; font: inherit; font-size: 15px;
  color: var(--lijn); background: transparent; border: 1px dashed var(--lijn);
  border-radius: 8px; padding: 0;
}
.rooster .erbij:hover { color: var(--blauw); border-color: var(--blauw); }

/* Geklokt dat ver van gepland ligt. Geen rood: het is geen fout. */
table.rooster td.let { color: var(--amber); font-weight: 600; }

/* ── De week als tijdbalk ────────────────────────────────────────────────── */
/*
 * Zeven kolommen met de uren van boven naar beneden, en elke dienst als blok op
 * zijn eigen tijd. De hoogte is de duur — dat is het hele punt: je ziet aan de
 * vorm of er om acht uur genoeg mensen staan, zonder te rekenen.
 */
.agendarol { overflow-x: auto; margin: 6px 0 2px; }
.agenda { display: flex; min-width: 760px; }

.agenda .urenkolom { width: 52px; flex: none; }
.agenda .uur { position: relative; }
.agenda .uur span {
  position: absolute; top: -7px; right: 8px; font-size: 11px;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

.agenda .dagkolom { flex: 1 1 0; min-width: 96px; border-left: 1px solid var(--lijn); }
.agenda .dagkolom.nu { background: var(--blauw-licht); }

.agenda .dagtop {
  height: 76px; padding: 5px 8px 0; border-bottom: 1px solid var(--lijn);
  font-size: 14px; font-weight: 600; line-height: 1.1;
}
.agenda .dagtop span {
  display: inline-block; margin-right: 4px; font-size: 11px; font-weight: 500;
  color: var(--muted); text-transform: uppercase; letter-spacing: .04em;
}
.agenda .dagtop em {
  display: block; font-style: normal; font-size: 11px; font-weight: 500; color: var(--muted);
}
/* Wie er die dag niet kan. In amber en niet rood: het is geen fout, het is iets
   om te weten vóórdat je iemand inplant. */
.agenda .dagtop i {
  display: block; font-style: normal; font-size: 11px; font-weight: 600;
  color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.agenda .dagbaan { position: relative; }
.agenda .lijn { border-bottom: 1px solid var(--lijn-fijn, #eef1f5); }

/* De hele dag is één vlak waarin je kunt tikken en slepen. touch-action uit,
   want anders scrollt de pagina mee terwijl je een streep trekt. */
.agenda .dagbaan { cursor: crosshair; touch-action: none; }
.agenda .dagbaan:hover { background: color-mix(in srgb, var(--blauw-licht) 55%, transparent); }

/* Wanneer je open bent. Een lichte band achter de diensten: het is achtergrond,
   geen inhoud — je moet erdoorheen kunnen kijken naar wie er staat. */
.agenda .openband {
  position: absolute; left: 0; right: 0; z-index: 0;
  background: color-mix(in srgb, var(--blauw) 7%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--blauw) 22%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--blauw) 22%, transparent);
  pointer-events: none;
}

/* Open zonder dat er iemand staat. Amber, net als een gat in de maand: het is
   geen fout, het is iets om op te lossen. */
.agenda .dagtop u {
  display: block; text-decoration: none; font-size: 11px; font-weight: 600;
  color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Wat je aan het trekken bent. Een streepjesrand: het staat er nog niet. */
.agenda .sleep {
  display: none; position: absolute; left: 2px; right: 3px; z-index: 1;
  border-radius: 8px; background: var(--blauw-licht);
  border: 2px dashed var(--blauw); color: var(--blauw);
  font-size: 11px; font-weight: 700; padding: 2px 5px;
  font-variant-numeric: tabular-nums; pointer-events: none;
}

.agenda .blok {
  position: absolute; overflow: hidden; cursor: pointer; text-align: left; z-index: 2;
  font: inherit; padding: 4px 6px; border-radius: 8px;
  background: var(--blauw); color: #fff; border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 1px 3px rgba(36,16,67,.18);
}
.agenda .blok:hover { background: var(--blauw-donker, #6d28d9); }
.agenda .blok b { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; }
.agenda .blok span {
  display: block; font-size: 11px; opacity: .85; font-variant-numeric: tabular-nums;
}
.agenda .blok span.waar { opacity: .7; }

/* Drie of meer mensen op hetzelfde uur: dan is er geen plaats voor de eindtijd
   en de plek. Liever de voornaam en de begintijd leesbaar dan alles afgekapt. */
.agenda .blok.smal { padding: 3px 4px; }
.agenda .blok.smal b { font-size: 11.5px; }
.agenda .blok.smal span { font-size: 10.5px; }

/* De lijst met kastjes. In de eerste kolom kan een regel uitleg staan, en dan
   wordt die kolom breed en breken de tijd en de knoppen in drie stukken. Dus:
   de uitleg krijgt een grens, en wat niet mag afbreken breekt niet af. */
table.kastjes td:first-child { max-width: 290px; }
table.kastjes td.tijd,
table.kastjes .qrrij .knop { white-space: nowrap; }

/* ── De kassa ───────────────────────────────────────────────────────────── */

/* Het kassablad vult het scherm en scrolt zelf niet.
 *
 * Met een handvol artikelen viel het niet op, maar met honderdachttien groeit
 * de pagina tot ver onder de vouw — en dan scrolt de mand met het totaal en de
 * afrekenknoppen gewoon mee het beeld uit. Precies wat je aan een toonbank
 * niet wilt: je bent aan het aanslaan en het bedrag is weg.
 *
 * Dus: het blad is even hoog als het venster, en het énige wat scrolt is het
 * vak met de artikelen. Links staat wat je nodig hebt om af te rekenen, en dat
 * blijft staan. 100dvh en niet 100vh, want op een telefoon schuift de
 * adresbalk in en uit en dan klopt vh niet meer. */
.kassablad {
  display: grid; grid-template-columns: minmax(320px, 400px) 1fr; gap: 18px;
  height: calc(100dvh - 108px); min-height: 460px; align-items: stretch;
}
@supports not (height: 100dvh) { .kassablad { height: calc(100vh - 108px); } }

/* De echte hoogte wordt door het script gezet, want hoe hoog de balk bovenaan
   is hangt ervan af of de navigatie in één of twee regels past — en dat hangt
   weer af van de breedte van het scherm en het aantal tabbladen. Een vast
   getal klopt dan bij de een wel en bij de ander net niet. Het getal hierboven
   is alleen de eerste tekening, voordat het script erbij is. */
.kassablad[style*="height"] { min-height: 0; }

.mand {
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
  margin-bottom: 0; min-height: 0; height: 100%;
}
/* Twee tabbladen boven de mand: wat je nu aanslaat, en wat er al op de tafel
   staat. Dat tweede stond eerst als los blok onder het kassablad — buiten
   beeld zodra het blad het scherm vult. */
.mandtabs { display: flex; border-bottom: 1px solid var(--lijn); flex: none; }
.mandtab {
  flex: 1; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 550;
  color: var(--muted); padding: 13px 10px; cursor: pointer; position: relative;
  border-bottom: 2px solid transparent; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.mandtab:hover { color: var(--inkt); background: var(--bg); }
.mandtab.aan { color: var(--blauw); border-bottom-color: var(--blauw); font-weight: 650; }
.mandtab .getal { font-weight: 700; }

.mand .mandkop { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--lijn); flex: none; }
.mand .mandkop h2 { font-size: 16px; margin: 0; }
.mand .mandkop .rechts { margin-left: auto; display: flex; gap: 6px; }
/* De mand krijgt de ruimte die overblijft, en scrolt daarbinnen. Zo blijven
   het totaal en de knoppen eronder altijd op hun plek staan. */
.mandlijst { flex: 1; min-height: 0; overflow-y: auto; }
.mandlijst td { padding: 10px; }
.mandlijst .aantal { white-space: nowrap; text-align: center; width: 116px; }
.mandlijst .aantal span { display: inline-block; min-width: 28px; }
.mandlijst .leeg { padding: 32px 20px; }
/* De rondekop in het rekeningtabblad: een grijze scheiding per ronde. */
.mandlijst .rondekop td { background: var(--bg); font-size: 12px; color: var(--muted); padding: 7px 10px; }

/* Een regel die al apart is afgerekend: laten staan maar duidelijk afgedaan.
   Weghalen zou lijken alsof er nooit iets besteld is. */
.mandlijst .albetaald td { color: var(--zwak); }
.mandlijst .albetaald td:nth-child(2) { text-decoration: line-through; }

/* Het vinkje voor het splitsen, met het aantal ernaast als één knop. */
.vink { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.vink input { width: 17px; height: 17px; margin: 0; accent-color: var(--blauw); }

/* Het kruisje om iets van de rekening te halen. Klein en grijs: het hoort
   bereikbaar te zijn maar niet uit te nodigen. */
.weghaal {
  border: 0; background: none; color: var(--zwak); font-size: 16px; line-height: 1;
  padding: 2px 5px; margin-left: 4px; border-radius: 6px; cursor: pointer;
}
.weghaal:hover { background: var(--rood-bg); color: var(--rood); }

.tellers { display: flex; justify-content: space-between; padding: 12px 18px 0; color: var(--muted); font-size: 13px; }
.totaal {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 8px 18px 14px;
}
.totaal span { color: var(--muted); }
.totaal strong { font-size: 34px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.betalen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px 18px; }

.kassablad > .paneel:not(.mand) {
  display: flex; flex-direction: column; min-height: 0; height: 100%;
  margin-bottom: 0; overflow: hidden;
}

.zoek { width: 100%; padding: 14px 16px; font-size: 16px; border: 1px solid var(--lijn); border-radius: 11px; flex: none; }
.groepen { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; flex: none; }

/* Kleinere knoppen: met honderd artikelen wil je er meer tegelijk zien, en op
   een aanraakscherm is honderdtwintig bij zeventig nog altijd ruim genoeg om
   raak te tikken. Alleen dit vak scrollt. */
.knoppen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); gap: 8px;
  flex: 1; min-height: 0; overflow-y: auto; align-content: start;
  padding: 2px 2px 8px; margin: 0 -2px;
}
.artikelknop {
  display: flex; flex-direction: column; gap: 3px;
  min-height: 74px; padding: 9px 11px; text-align: left;
  border: 1px solid var(--lijn); border-radius: 10px; background: var(--kaart);
  font: inherit; cursor: pointer;
}
.artikelknop {
  box-shadow: var(--schaduw);
  transition: border-color .12s, box-shadow .12s, transform .08s;
}
.artikelknop:hover { border-color: var(--blauw); box-shadow: var(--schaduw-op); }
.artikelknop:active { transform: translateY(1px); box-shadow: var(--schaduw); }
.artikelknop .n {
  font-weight: 600; line-height: 1.25; letter-spacing: -.012em; font-size: 13.5px;
  /* Lange namen als "Warme chocolademelk met slagroom" mogen de knop niet twee
     keer zo hoog maken. Twee regels en dan drie puntjes — en genoeg hoogte
     gereserveerd, anders knipt de tweede regel doormidden en lees je "Biefstuk
     van de" met een halve "haas" eronder. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em;
  /* Eén lang woord ("Kinderpannenkoek") past niet op een regel en wordt dan
     zonder puntjes afgeknipt. Dit laat hem desnoods middenin afbreken, want
     half zichtbaar is erger dan afgebroken. */
  overflow-wrap: anywhere;
}
.artikelknop .p {
  margin-top: auto; color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums;
}

/* ── Een plaatje op de knop ───────────────────────────────────────────────

   Boven de naam en over de hele breedte. Een vaste hoogte, want knoppen die
   verschillend hoog zijn maken een raster dat niet meer te scannen is -- en
   dat is precies waarvoor de plaatjes er zijn.

   `object-fit: cover` snijdt bij in plaats van te vervormen: een liggende foto
   van een broodje mag niet uitgerekt op een vierkante knop staan. Bij de foto
   zelf snijden we juist níet af (daar past de hele foto in 800 bij 800); hier
   wel, want een knop is een knop en geen fotolijst. */
.artikelknop .knopfoto,
.artikelknop .geenknopfoto {
  display: block; width: 100%; object-fit: cover;
  border-radius: 7px; margin: -2px 0 6px;
  background: var(--bg);
  /* Meegroeien met de knop in plaats van een vaste hoogte.
     
     Met 64 pixels was het plaatje op een groot kassascherm een streepje boven
     de naam: de knop werd breder, het plaatje niet. Vier op drie betekent dat
     hij op een knop van 122 pixels 92 hoog is en op een knop van 200 pixels
     150 -- op een breed scherm dus bijna twee keer zo groot, en dat is precies
     waar de ruimte voor is.
     
     De grenzen eromheen zijn er voor de uitersten: op de 360 pixels van een
     pinterminal mag hij niet tot een reepje slinken, en op een televisie niet
     de hele knop opeten zodat de prijs eronder wegvalt. */
  aspect-ratio: 4 / 3;
  min-height: 76px;
  max-height: 168px;
}

/* Een leeg vlak waar een foto hoort.
   
   Waarom niet gewoon niets: in een raster wordt een knop zonder plaatje
   uitgerekt tot de hoogte van zijn rijgenoten, en dan staat de prijs los
   onderaan met een gat erboven. Dat leest als een fout. Met een leeg vlak
   blijft het raster regelmatig, én zie je in één blik bij welke artikelen er
   nog een foto moet komen -- dat is het gat waard. */
.artikelknop .geenknopfoto {
  border: 1px dashed var(--lijn);
  display: grid; place-items: center;
  color: var(--zwak); font-size: 15px; font-weight: 400;
}

/* De naam blijft op twee regels, ook met een foto. Eén regel leek zuiniger en
   maakte "Broodje warm vlees met veel saus" tot "Broodje warm vle…" -- en dan
   staan er twee broodjes naast elkaar die je niet uit elkaar houdt. Het plaatje
   is er om te helpen, niet om de naam te vervangen. */
.artikelknop.metfoto { min-height: 0; }
/* "op voorraad: 0" hoort op zijn eigen regel. Als inline element plakte hij op
   een smal scherm tegen de prijs aan — "€ 3,50op voorraad: 0" — en dat viel pas
   op toen ik de knoppen op 360 pixels opmat, de breedte van een Ciontek. Op een
   breed scherm brak hij vanzelf af en zag je er niets van. */
.artikelknop .op { display: block; color: var(--rood); font-size: 11px; font-weight: 600; }

/* ── Dialoog ────────────────────────────────────────────────────────────── */

.laag { position: fixed; inset: 0; background: rgba(11,34,68,.5); backdrop-filter: blur(3px);
        display: grid; place-items: center; padding: 20px; z-index: 50; }
.dialoog { width: 100%; max-width: 460px; background: var(--kaart); border-radius: 16px;
           overflow: hidden; box-shadow: 0 20px 50px -12px rgba(11,34,68,.35); }
.dialoog.breed { max-width: 760px; }
.dialoog .dkop { display: flex; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--lijn); }
.dialoog .dkop h2 { margin: 0; font-size: 17px; }
.dialoog .dkop button { margin-left: auto; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--muted); }
.dialoog .dlijf { padding: 20px; max-height: 66vh; overflow-y: auto; }
.dialoog .dvoet { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid var(--lijn); }

.bedraggroot { font-size: 44px; font-weight: 700; text-align: center; padding: 6px 0 18px;
               font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.snelgeld { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.wissel { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 15px; border-radius: 10px; background: var(--bg); margin-bottom: 14px; }
.wissel strong { font-size: 24px; }
.wissel .tekort { color: var(--rood); font-weight: 600; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--inkt); color: #fff; padding: 13px 20px; border-radius: 12px;
  font-size: 14px; z-index: 60; max-width: 90vw;
}
.toast.fout { background: var(--rood); }
/* Een waarschuwing: het is gelukt, maar er is iets om te weten. */
.toast.let  { background: var(--amber); }

/* ── De balie ────────────────────────────────────────────────────────────── */
/*
 * Kaarten met het nummer groot links: dat is waarop je zoekt als iemand aan de
 * balie zegt "ik had 34". Klaar krijgt een groene rand — dat is wat je nu kunt
 * meegeven, en dat mag opvallen.
 */
/*
 * Twee kolommen: links waar je tikt, rechts wat je afrekent en wie er wacht. Op
 * een grote iPad of een balie-pc staat alles tegelijk in beeld; op een telefoon
 * gaat het onder elkaar.
 */
.balieblad { display: grid; grid-template-columns: 1fr 340px; gap: 12px; align-items: start; }
@media (max-width: 900px) { .balieblad { grid-template-columns: 1fr; } }

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

/* Grote tegels: hier wordt met een vinger op gemikt terwijl er een rij staat. */
.bategels { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.bategel {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  min-height: 74px; padding: 10px 11px; cursor: pointer; text-align: left; font: inherit;
  background: #fff; border: 1px solid var(--lijn); border-radius: 12px;
}
.bategel:hover { border-color: var(--blauw); }
.bategel:active { background: var(--blauw-licht); }
.bategel b { font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--inkt); }
.bategel span { font-size: 15px; font-weight: 700; color: var(--blauw);
                font-variant-numeric: tabular-nums; margin-top: auto; }
.bategel em {
  font-style: normal; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}

/* ── De bar ──────────────────────────────────────────────────────────────
   Groepen als grote knoppen, de open groep vol gekleurd. De tegels groter dan
   aan de balie en met een kleurrand: aan de tap mik je met een natte vinger,
   en de kleur zegt welke groep het is voordat je de naam leest. --k is de
   kleur van de groep, of van het artikel als het er zelf een heeft. */
.bargroepen { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
              gap: 8px; margin: 12px 0; }
.bargroep {
  min-height: 56px; padding: 8px 10px; font: inherit; font-size: 16px; font-weight: 700;
  border-radius: 12px; cursor: pointer; text-align: center;
  color: var(--k); background: #fff; border: 2px solid var(--k);
}
.bargroep.aan { color: #fff; background: var(--k); }
.bategels.bar { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bategels.bar .bategel {
  position: relative; min-height: 96px; padding: 12px 13px;
  border: 1px solid var(--lijn); border-left: 7px solid var(--k);
}
.bategels.bar .bategel b { font-size: 16px; }
.bategels.bar .bategel span { font-size: 17px; color: var(--inkt); }
.bategels.bar .bategel:active { background: #f1f5f9; }
/* Hoeveel er al van in het mandje ligt: bij de vierde pils wil je niet tellen. */
.barteller {
  position: absolute; top: 8px; right: 8px; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 13px; background: var(--k); color: #fff; font-style: normal;
  font-size: 14px; font-weight: 700; line-height: 26px; text-align: center;
}

/* ── De eigen indeling van de bar ─────────────────────────────────────────
   Tabs bovenin met de naam van de groep, daaronder een vast raster. Een lege
   plek blijft leeg: wie de kroket blind tikt, wil hem morgen op dezelfde plek. */
.bartabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 10px; padding: 6px;
           background: #d4d8de; border-radius: 10px; }
.bartab { font: inherit; font-size: 16px; font-weight: 600; padding: 10px 14px; border: 0;
          border-radius: 8px; background: transparent; color: #374151; cursor: pointer; }
.bartab.aan { background: #fff; color: var(--inkt); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.bartab.nieuw { color: var(--blauw); }
.barraster { display: grid; gap: 8px; }
.barknop {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 92px; padding: 10px 8px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; text-align: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12);
}
.barknop b { font-size: 19px; font-weight: 600; line-height: 1.15; }
.barknop span { font-size: 14px; margin-top: 4px; font-variant-numeric: tabular-nums; opacity: .9; }
.barknop:active { filter: brightness(.92); }
.barknop.gekozen { outline: 4px solid var(--blauw); outline-offset: 2px; }
.barleeg { min-height: 92px; border-radius: 10px; }
.barleeg.bewerk { border: 2px dashed #c3c9d2; background: #f8fafc; color: #94a3b8;
                  font-size: 28px; cursor: pointer; }
.barleeg.bewerk:hover, .barleeg.doel { border-color: var(--blauw); color: var(--blauw); }
.barfoto { width: 100%; max-height: 90px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 7px;
            margin: -2px 0 6px; background: rgba(255,255,255,.35); }
.barfotoaan { display: flex; gap: 6px; align-items: center; font-size: 14px; margin-left: auto; }
.barinstel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.barinstel input { flex: 1 1 180px; font-size: 15px; }
.barinstel label { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.barkleuren { display: flex; flex-wrap: wrap; gap: 8px; }
.barkleur { width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); cursor: pointer; }
.barkleur.aan { outline: 3px solid var(--blauw); outline-offset: 2px; }
.barkieslijst { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.barkiesrij { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; font: inherit;
              text-align: left; background: #fff; border: 1px solid var(--lijn); border-radius: 8px; cursor: pointer; }
.barkiesrij:hover { border-color: var(--blauw); }
.barkiesrij em { font-style: normal; color: var(--muted); font-size: 12.5px; margin-left: 6px; }
@media (max-width: 700px) { .barknop b { font-size: 16px; } .barknop, .barleeg { min-height: 76px; } }

/* Een plaatje op een balietegel. Iets hoger dan op de kassa: aan een balie
   wordt van verder gekeken en met meer haast. */
.bategel .knopfoto,
.bategel .geenknopfoto {
  display: block; width: 100%; object-fit: cover;
  border-radius: 8px; margin: -3px 0 5px; background: var(--bg);
  /* Zelfde gedachte als op de kassa, en aan een balie mag hij iets ruimer:
     daar wordt van verder gekeken en met meer haast. */
  aspect-ratio: 4 / 3;
  min-height: 72px;
  max-height: 150px;
}
.bategel .geenknopfoto {
  border: 1px dashed var(--lijn); display: grid; place-items: center;
  color: var(--zwak); font-size: 14px;
}
.bategel.metfoto { min-height: 0; }

/* Een miniatuur in de artikelenlijst. Klein: hier is de foto niet om op te
   tikken maar om te zien welk artikel er een heeft. */
.minifoto {
  width: 34px; height: 34px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--lijn); background: var(--bg); vertical-align: middle;
}
.geenfoto {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 6px; border: 1px dashed var(--lijn); color: var(--zwak);
  font-size: 14px; vertical-align: middle;
}

.batotaal {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 12px 0 10px; padding-top: 10px; border-top: 1px solid var(--lijn);
}
.batotaal span { font-size: 13px; color: var(--muted); }
.batotaal strong { font-size: 30px; font-weight: 800; letter-spacing: -.03em;
                   font-variant-numeric: tabular-nums; }

.baknoppen { display: grid; grid-template-columns: 1fr; gap: 8px; }
.babiljetten { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.baliebonnen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px; margin: 6px 0 14px;
}
.baliekaart {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center;
  background: #fff; border: 1px solid var(--lijn); border-radius: 12px; padding: 10px;
  margin-bottom: 8px;
}
.baliekaart.klaar { border-color: var(--groen); background: var(--groen-bg); }

.baliekaart .banr {
  font-size: 30px; font-weight: 800; letter-spacing: -.03em; text-align: center;
  color: var(--inkt); font-variant-numeric: tabular-nums;
}
.baliekaart.klaar .banr { color: var(--groen); }

.baliekaart .baregels { display: flex; flex-direction: column; gap: 1px; }
.baliekaart .baregels span { font-size: 13.5px; color: var(--inkt); }
.baliekaart .baplekken { display: flex; gap: 5px; align-items: center; margin-top: 5px;
                         flex-wrap: wrap; }
.baliekaart .baplekken .sub { display: inline; }

/* ── Het controlescherm bij het pinnen ───────────────────────────────────── */
/*
 * Over het hele scherm, want zolang de terminal bezig is hoort er niets anders
 * te kunnen. De kleur van de kaart zegt wat er is gebeurd; de tekst zegt wat je
 * moet doen. "Onbekend" is de enige waar iemand moet kiezen in plaats van lezen,
 * en die staat er daarom het uitgebreidst.
 */
.bacontrole {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(13, 21, 38, .72); padding: 20px;
}
.bakaart {
  background: #fff; border-radius: 18px; padding: 28px 30px; max-width: 520px;
  border-top: 8px solid var(--blauw); text-align: center;
}
.bakaart.gelukt { border-top-color: var(--groen); }
.bakaart.let    { border-top-color: var(--amber); }
.bakaart.fout   { border-top-color: var(--rood); }

.bakaart .babedrag {
  font-size: 40px; font-weight: 800; letter-spacing: -.03em; color: var(--inkt);
  font-variant-numeric: tabular-nums;
}
.bakaart h2 { margin: 8px 0 6px; font-size: 21px; }
.bakaart.gelukt h2 { color: var(--groen); }
.bakaart.let h2    { color: var(--amber); }
.bakaart.fout h2   { color: var(--rood); }
.bakaart p { margin: 0 0 18px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.bakaart .baknoprij { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }


/* ── De maand in vogelvlucht ─────────────────────────────────────────────── */
/*
 * Een kalender met zeven kolommen. Waar het om gaat is niet het overzicht maar
 * het gat: een dag zonder iemand valt op, en de rest is rustig.
 */
.maand { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }

.mkop {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); padding: 0 2px 2px;
}

.mdag {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  min-height: 86px; padding: 7px 8px; cursor: pointer; text-align: left;
  font: inherit; background: #fff; border: 1px solid var(--lijn); border-radius: 10px;
}
.mdag:hover { border-color: var(--blauw); }
.mdag.buiten { background: var(--bg); border-color: transparent; cursor: default; }
.mdag.nu { box-shadow: inset 0 0 0 2px var(--blauw); }

/* Het gat. Amber en niet rood: een dag waarop je dicht bent is geen fout, en
   met rood leer je de kleur negeren. */
.mdag.gat { background: var(--amber-bg); border-color: var(--amber); }

.mdag .nr { font-size: 14px; font-weight: 600; color: var(--inkt);
            font-variant-numeric: tabular-nums; }
.mdag.buiten .nr { color: var(--muted); font-weight: 500; }
.mdag .wie { font-size: 11.5px; color: var(--inkt); line-height: 1.25; }
.mdag .uur { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.mdag .niemand { font-size: 11.5px; font-weight: 600; color: var(--amber); }
.mdag .weg { font-size: 10.5px; color: var(--amber); margin-top: auto; }

@media (max-width: 720px) {
  .maand { gap: 3px; }
  .mdag { min-height: 66px; padding: 5px; }
  .mdag .wie { display: none; }
}

/* De kleur van een medewerker: een stip bij zijn naam, en een rij om te kiezen. */
.wiestip {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 7px; vertical-align: 1px;
}

.kleurrij { display: flex; flex-wrap: wrap; gap: 6px; }
.kleurknop {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; padding: 0;
}
.kleurknop.aan { border-color: var(--inkt); box-shadow: 0 0 0 2px #fff inset; }

/* Zeven dagen onder elkaar in één venster: dag, wat hij kan, en waarom. */
.bsrij { display: grid; grid-template-columns: 62px 118px 1fr; gap: 8px;
         align-items: center; margin-bottom: 7px; }
.bsrij label { font-size: 13px; font-weight: 600; color: var(--inkt); }
.bsrij select, .bsrij input { margin: 0; }

@media (max-width: 980px) {
  .kassablad { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .tafelbalk ~ .kassablad { height: auto; }
  .mand { height: auto; margin-bottom: 18px; }
  .mandlijst { max-height: 40vh; }
  .kassablad > .paneel:not(.mand) { height: auto; }
  .knoppen { overflow: visible; max-height: none; }
  .balk { flex-wrap: wrap; }
}

.winkellogo { max-height: 34px; max-width: 170px; object-fit: contain; }
.logovak {
  display: grid; place-items: center; min-height: 120px; padding: 18px;
  border: 1px dashed var(--lijn); border-radius: 12px; background: var(--bg);
}
.logovak img { max-width: 260px; max-height: 90px; object-fit: contain; }
.logovak .geen { color: var(--muted); font-size: 14px; }

/* ── Horeca ─────────────────────────────────────────────────────────────── */

.tafelbalk {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding: 12px 16px; background: var(--kaart); border: 1px solid var(--lijn); border-radius: 12px;
}
.tafelbalk strong { font-size: 17px; }
.tafelbalk .sub { display: inline; }

.zonekop { margin: 18px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tafels { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.tafelknop {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 88px; padding: 12px 14px;
  border: 1px solid var(--lijn); border-radius: 12px; background: var(--kaart);
  font: inherit; cursor: pointer; text-align: left;
}
.tafelknop { box-shadow: var(--schaduw); transition: border-color .12s, box-shadow .12s; }
.tafelknop:hover { border-color: var(--blauw); box-shadow: var(--schaduw-op); }
.tafelknop .nr { font-size: 22px; font-weight: 700; }
.tafelknop .bedrag { font-weight: 600; color: var(--blauw); font-variant-numeric: tabular-nums; }
.tafelknop .sinds { font-size: 12px; color: var(--muted); }
.tafelknop.bezet { border-color: var(--blauw); background: var(--blauw-licht); }

.rekening .rondekop td {
  padding-top: 16px; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; border-bottom: 0;
}
.rekening .aantal { width: 54px; color: var(--muted); }

/* De controlebon: een bon zoals hij op tafel komt, dus smal en rustig. */
.controlebon { border: 1px solid var(--lijn); border-radius: 12px; padding: 18px; }
.controlebon .ckop { margin-bottom: 12px; }
.controlebon .ckop strong { font-size: 16px; }
.controlebon table { width: 100%; }
.controlebon td { padding: 6px 4px; }
.controlebon .aantal { width: 48px; color: var(--muted); }
.controlebon .cbtw { margin-top: 8px; border-top: 1px solid var(--lijn); }
.controlebon .cbtw td { color: var(--muted); font-size: 13px; padding: 5px 4px; }
.ctotaal {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 10px; padding-top: 12px; border-top: 2px solid var(--lijn);
}
.ctotaal strong { font-size: 26px; letter-spacing: -.03em; }

.knop.wijze { flex: 1; }
.knop.wijze.aan { background: var(--blauw); color: #fff; border-color: var(--blauw); }

/* ── De plattegrond ─────────────────────────────────────────────────────── */

.plattegrond {
  position: relative;
  min-height: 520px;
  margin-top: 14px;
  border: 1px solid var(--lijn);
  border-radius: 14px;
  /* Een warme vloer in plaats van wit: het scheelt niets voor de werking maar
     het leest als een ruimte in plaats van als een spreadsheet. */
  background:
    linear-gradient(to right, rgba(120,110,95,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,110,95,.055) 1px, transparent 1px),
    linear-gradient(160deg, #fbf9f6, #f4f1ec);
  background-size: 24px 24px, 24px 24px, 100% 100%;
  overflow: auto;
  /* Geen paginascroll en geen tekstselectie tijdens het trekken van een kader:
     anders schuift het scherm mee of licht de tekst op de tafels blauw op. */
  touch-action: none;
  user-select: none;
}

.plantafel { position: absolute; cursor: grab; user-select: none; }
.plantafel.pakt { cursor: grabbing; z-index: 5; }
.plantafel.pakt .blad { box-shadow: 0 10px 24px rgba(15,30,60,.22); }

/* Gekozen tafels: een ring eromheen in plaats van een kleurvlak, zodat je
   tegelijk ziet dat er iets openstaat (dat is al blauw) én dat hij gekozen is. */
.plantafel.gekozen .blad {
  border-color: var(--blauw);
  box-shadow: 0 0 0 2px var(--blauw), 0 1px 2px rgba(60,50,35,.10);
}
.plantafel.gekozen .stoel { background: #9db6e0; }

/* Het kader dat je over het vlak trekt. */
.sleepvak {
  position: absolute; z-index: 10; pointer-events: none;
  border: 1px solid var(--blauw); background: rgba(37,99,235,.10); border-radius: 2px;
}

/* Het tafelblad. */
.blad {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: #fff;
  border: 1px solid #d9d2c7;
  box-shadow: 0 1px 2px rgba(60,50,35,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.blad.vorm-rond     { border-radius: 50%; }
.blad.vorm-vierkant { border-radius: 8px; }
.blad.vorm-lang     { border-radius: 8px; }

.blad .nr { font-size: 16px; font-weight: 700; line-height: 1.05; color: var(--inkt); }
.blad .bd { font-size: 11px; font-weight: 600; color: var(--blauw); }

/* De stoelen. */
.stoel {
  position: absolute;
  border-radius: 5px;
  background: #cdc4b6;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}

/* Bezet: het blad kleurt en de stoelen ook, zodat je het van een afstand ziet. */
.plantafel.bezet .blad  { background: var(--blauw-licht); border-color: var(--blauw); }
.plantafel.bezet .stoel { background: #9db6e0; }

.plattegrond.kiezen .plantafel { cursor: pointer; }
.plattegrond.kiezen .plantafel:hover .blad { border-color: var(--blauw); }

.planleeg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.planvoet {
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
  margin-top: 12px; color: var(--muted); font-size: 13px; flex-wrap: wrap;
}
.planvoet .sub { display: inline; max-width: 46ch; line-height: 1.4; }

.merkrij { display: inline-flex; align-items: center; gap: 10px; }
.merkicoon { border-radius: 22%; flex: none; }

.dagblad { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.afsluiting h3 { margin: 0 0 4px; font-size: 15px; }
.afsluiting table { margin: 12px 0; }
.afsluiting td { padding: 9px 4px; }
.afsluiting tr.uitkomst td { font-weight: 700; font-size: 17px; border-top: 2px solid var(--lijn); }
.afsluiting tr.uitkomst.goed td { color: var(--groen); }
.afsluiting tr.uitkomst.mis td  { color: var(--rood); }

@media (max-width: 900px) { .dagblad { grid-template-columns: 1fr; } }

.knop.stil.aan { background: var(--blauw); color: #fff; border-color: var(--blauw); }

/* Een bar is een toog: massiever dan een tafel, met krukken aan één kant. */
.blad.vorm-bar {
  border-radius: 6px;
  background: linear-gradient(180deg, #fdfbf8, #efe8dd);
  border-color: #c9bfae;
}
.stoel.kruk { border-radius: 50%; }

/* De krukken van een bar. */
.krukken { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.krukknop {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 82px; padding: 12px 14px; text-align: left;
  border: 1px solid var(--lijn); border-radius: 12px; background: var(--kaart);
  font: inherit; cursor: pointer;
}
.krukknop:hover { border-color: var(--blauw); }
.krukknop .nr { font-size: 20px; font-weight: 700; }
.krukknop .bd { font-weight: 600; color: var(--blauw); font-variant-numeric: tabular-nums; }
.krukknop .vrij, .krukknop .samen { font-size: 12px; color: var(--muted); }
.krukknop.bezet { border-color: var(--blauw); background: var(--blauw-licht); }
.krukknop.gekozen { outline: 3px solid var(--blauw); outline-offset: 1px; }

/* ── Bestellen via QR ────────────────────────────────────────────────────── */

.qrschakel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.qrschakel .uitleg { margin: 0; }
.qrknoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.qrrij { display: inline-flex; gap: 6px; }

.qrvoorbeeld {
  display: grid; place-content: center; min-height: 260px;
  background: var(--bg); border: 1px solid var(--lijn); border-radius: 12px; padding: 18px;
}
/* Een tekening, geen plaatje: op elk formaat precies goed. Een geschaald
   plaatje maakt het ene vakje zes en het andere zeven pixels breed, en daar
   gaat een camera van twijfelen. */
.qrvoorbeeld svg { width: 260px; height: 260px; display: block; }
.qradres { margin: 12px 0 0; word-break: break-all; text-align: center; }

/* Een Kassanext-medewerker die in de zaak van een klant meekijkt. Opvallend
   genoeg om te zien, rustig genoeg om niet de hele balk te kapen. */
.balk .wie .gast {
  padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: #fff5e5; color: var(--amber);
}

/* ── Statistieken ────────────────────────────────────────────────────────── */

.statperiode {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px;
}
.statperiode label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.statperiode input[type="date"] { width: auto; padding: 8px 10px; }
.statperiode .sub { margin-left: auto; }

.delta {
  display: block; margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 600;
}
.delta.op   { color: var(--groen); }
.delta.af   { color: var(--rood); }
.delta.vlak { color: var(--muted); font-weight: 400; }

/* Twee panelen naast elkaar zolang het past, en eronder zodra het niet meer
   past. Een grafiek van 300 pixels breed leest niemand. */
.statrij { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; }
.statrij .paneel { margin: 0; }

.grafiek svg { width: 100%; height: auto; display: block; overflow: visible; }
.grafiek .raster { stroke: var(--lijn); stroke-width: 1; }
.grafiek .as { font-size: 11px; fill: var(--muted); font-family: inherit; }
.grafiek .as.eind { text-anchor: end; }
.grafiek .as.midden { text-anchor: middle; }
.grafiek .staaf { transition: opacity .12s; }
.grafiek .staaf:hover { opacity: .78; }
.grafiek .raakvlak:hover { fill: rgba(11, 61, 145, .06); }
.grafiek .sub { margin: 10px 0 0; }

.balken { display: flex; flex-direction: column; gap: 10px; }
.balk { display: grid; grid-template-columns: minmax(90px, 26%) 1fr auto; align-items: center; gap: 12px; }
.balk .naam { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balk .spoor { height: 10px; background: var(--bg); border-radius: 20px; overflow: hidden; }
.balk .vulling { display: block; height: 100%; background: var(--blauw); border-radius: 20px; }
.balk .waarde { font-variant-numeric: tabular-nums; font-size: 14px; text-align: right; white-space: nowrap; }
.balk .waarde .sub { display: block; }

/* Aanwijzen moet iets doen; zonder dit is een staaf een vlek zonder getal. */
.tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  padding: 7px 10px; border-radius: 8px; font-size: 13px; white-space: nowrap;
  background: var(--inkt); color: #fff; box-shadow: 0 6px 18px rgba(16, 32, 46, .22);
  transition: opacity .1s;
}
.tip.aan { opacity: 1; }

.stattegels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.stattegel {
  background: var(--kaart); border: 1px solid var(--lijn);
  border-radius: 14px; padding: 16px 18px;
}
.stattegel .naam {
  display: block; font-size: 11px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.stattegel .waarde {
  display: block; margin-top: 6px; font-size: 27px; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

/* ── Printerinstellingen ─────────────────────────────────────────────────── */

.rij2 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }

.vinkje {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px;
  font-weight: 400; cursor: pointer;
}
.vinkje input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.vinkje strong { display: block; font-size: 14px; font-weight: 600; }
.vinkje .sub { display: block; margin-top: 2px; }

/* ── Reserveringen ───────────────────────────────────────────────────────── */

.rij3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; }
tr.vervallen td { opacity: .55; }
tr.vervallen strong { text-decoration: line-through; }

/* Een tafel waar straks iemand verwacht wordt: een rand die opvalt zonder te
   schreeuwen. Bezet blijft bezet — dat is dringender. */
.plantafel.verwacht .blad { border-color: var(--amber); box-shadow: 0 0 0 2px #fff5e5; }
.plantafel .blad .res {
  display: block; font-size: 11px; font-weight: 600; color: var(--amber);
  margin-top: 2px; white-space: nowrap;
}

/* Gasten die volgens het reserveringssysteem al aan tafel zitten. Er loopt hier
   nog geen rekening, maar de tafel is wel degelijk bezet — en dat moet je zien
   voordat je er iemand anders neerzet. */
.plantafel.zit .blad  { border-color: var(--groen); box-shadow: 0 0 0 2px #e7f6ee; }
.plantafel.zit .blad .res { color: var(--groen); }

/* ── Voorbeeldindelingen ─────────────────────────────────────────────────── */

.voorbeelden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .voorbeelden { grid-template-columns: 1fr; } }

.voorbeeld {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  border: 1px solid var(--lijn); border-radius: 12px; padding: 12px;
  background: var(--kaart); font: inherit; text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.voorbeeld:hover { border-color: var(--blauw); box-shadow: var(--schaduw-op); }
.voorbeeld strong { font-size: 14px; }
.voorbeeld .sub { font-size: 12px; line-height: 1.4; }

/* De tekening: hetzelfde vlak als de echte plattegrond, alleen kleiner. */
.vtekening {
  display: block; width: 100%; height: 138px; margin-bottom: 6px;
  background: #f7f4ef; border: 1px solid #e6ded1; border-radius: 8px;
  display: grid; place-items: center; overflow: hidden;
}
.vplan { position: relative; display: block; }
.vt {
  position: absolute; background: #fff; border: 1px solid #d9d2c7;
}
.vt.vorm-rond { border-radius: 50%; }
.vt.vorm-vierkant, .vt.vorm-lang { border-radius: 2px; }
.vt.vorm-bar { border-radius: 2px; background: #efe8dd; border-color: #c9bfae; }

/* ── Doorwerken zonder internet ──────────────────────────────────────────── */

/* Onderin en over de volle breedte: een medewerker moet dit zien zonder ernaar
   te zoeken, maar het mag de kassa niet in de weg zitten. */
.lijnbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px 18px; text-align: center;
  font-size: 14px; font-weight: 600; color: #fff;
}
.lijnbalk.uit   { background: var(--amber); }
.lijnbalk.bezig { background: var(--blauw); }

.rekeningknoppen { display: flex; gap: 10px; margin-top: 14px; }
.rekeningknoppen .breed { flex: 1; }

/* ── Koppelingen ─────────────────────────────────────────────────────────── */

.koppels { display: flex; flex-direction: column; gap: 12px; }
.koppel {
  display: flex; align-items: flex-start; gap: 14px;
  border: 1px solid var(--lijn); border-radius: 12px; padding: 14px 16px;
}
.koppel > div:first-child { flex: 1; }
.koppel .rechts { display: flex; align-items: center; gap: 10px; }
.kprekeningen { margin-top: 20px; border-top: 1px solid var(--lijn); padding-top: 16px; }
.kprekeningen h3 { margin: 0 0 4px; font-size: 15px; }

/* Rekeningen aan de bar die niet op een genummerde kruk staan. */
.losserekeningen { margin-top: 20px; border-top: 1px solid #e6ebf2; padding-top: 16px; }
.losserekeningen h3 { margin: 0 0 4px; font-size: 15px; }
.losbon { display: block; width: 100%; text-align: left; margin-top: 8px; }

/* De koppelcode: lang, en je moet hem in één keer kunnen selecteren. */
.kpcode {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: #f2f4f7; border: 1px solid var(--lijn); border-radius: 8px;
  padding: 10px 12px; word-break: break-all; user-select: all;
}

/* ── Het menu links, op een breed scherm ──────────────────────────────────────
 *
 * Staat achteraan met opzet. Deze regels overschrijven de balk hierboven, en bij
 * gelijke specificiteit wint in CSS wie het laatst komt — een media-query
 * bovenaan het bestand had geen enkel effect, en dat is precies wat er gebeurde.
 */
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 208px 1fr; grid-template-rows: auto 1fr; }

  .balk {
    grid-column: 1 / -1;
    /* Het menu verhuist naar de zijkant, dus de balk houdt alleen het merk, de
       naam van de zaak en wie er is. */
  }
  .balk nav { display: none; }

  .zijmenu {
    grid-column: 1; grid-row: 2;
    background: var(--navy); padding: 14px 10px;
    display: flex; flex-direction: column; gap: 2px;
    /* Niet vastgeplakt: dat vraagt om een getal voor de hoogte van de balk, en
       zo'n getal klopt precies één keer. De kolom loopt gewoon mee. */
  }
  .zijmenu button {
    border: 0; background: none; font: inherit; font-size: 14.5px; color: #9fb2cf;
    padding: 11px 14px; border-radius: 9px; cursor: pointer; font-weight: 500;
    text-align: left; width: 100%;
    transition: background .12s, color .12s;
  }
  .zijmenu button:hover { background: rgba(255,255,255,.09); color: #fff; }
  .zijmenu button.aan { background: var(--blauw); color: #fff; font-weight: 600; }

  .zijversie {
    margin-top: auto; padding: 16px 14px 6px;
    font-size: 11.5px; letter-spacing: .02em; color: #7d6b9c;
    font-variant-numeric: tabular-nums;
  }

  main { grid-column: 2; grid-row: 2; }
}

/* Onder de 900 pixels bestaat het zijmenu niet: dan doet de balk het werk. */
@media (max-width: 899px) { .zijmenu { display: none; } }

/* ── Het overzicht boven de reserveringen ─────────────────────────────────
   
   Drie dingen die je in één blik wil zien als je om zes uur de zaal inkijkt:
   de cijfers, waar de drukte zit, en welke tafels nog vrij zijn. De staafjes
   zijn geen versiering — de hoogte is het aantal gasten per half uur, en de
   koraalstreep is het half uur waar je nu in zit. */

.resoverzicht {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-areas: "cijfers cijfers" "spreiding zaal";
  gap: 12px;
  padding: 0 14px 14px;
}
.resoverzicht .cijfers { grid-area: cijfers; }
.resoverzicht .spreiding { grid-area: spreiding; }
.resoverzicht .zaal { grid-area: zaal; }

.resoverzicht .vlak {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 14px 16px 12px;
  min-width: 0;
}
.resoverzicht h3 {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--zwak);
}

/* De cijfers */

.cijfers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cijfer {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 13px 15px 12px;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.cijfer .getal {
  font-size: 27px; font-weight: 700; line-height: 1.1; color: var(--inkt);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.cijfer .wat { font-size: 13px; color: var(--muted); font-weight: 500; }
.cijfer .onder {
  font-size: 11.5px; color: var(--zwak); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* De spreiding over de avond */

.staven {
  display: flex; align-items: flex-end; gap: 3px;
  height: 132px;
}
.staven .vak {
  flex: 1 1 0; min-width: 0;
  height: 100%;
  display: flex; flex-direction: column; align-items: stretch;
  position: relative;
}
/* De staaf krijgt wat er overblijft nadat het getal en de tijd hun regel
   hebben. Zo staat het getal altijd bóven de staaf en nooit erop. */
.staven .staafvak { flex: 1 1 auto; display: flex; align-items: flex-end; min-height: 0; }
.staven .staaf {
  width: 100%;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--blauw) 0%, var(--blauw-donker) 100%);
  min-height: 0;
  transition: height .18s ease;
}
.staven .vak.top .staaf { background: linear-gradient(180deg, var(--navy-op) 0%, var(--navy) 100%); }
.staven .tel {
  font-size: 10.5px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: center;
  min-height: 15px; line-height: 15px;
}
.staven .vak.top .tel { color: var(--navy); font-weight: 700; }
.staven .uur {
  font-size: 10.5px; color: var(--zwak); margin-top: 5px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-align: center; min-height: 13px;
}
/* Het half uur waar je nu in zit. Een lijn en geen kleurvlak: de kleur van de
   staaf zegt al iets anders (dat is de drukste). */
.staven .vak.nu::before {
  content: ""; position: absolute; left: 50%; top: 15px; bottom: 18px;
  width: 2px; margin-left: -1px; border-radius: 2px;
  background: #fb7185;
}

/* De tafels */

.rtafels { display: flex; flex-wrap: wrap; gap: 7px; }
.rtafel {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 54px; padding: 7px 9px 6px;
  border-radius: 9px; border: 1px solid var(--lijn);
  background: var(--bg);
}
.rtafel b { font-size: 13px; font-weight: 600; color: var(--inkt); }
.rtafel i {
  font-style: normal; font-size: 10.5px; color: var(--zwak);
  font-variant-numeric: tabular-nums;
}
.rtafel.bezet    { background: var(--groen-bg); border-color: #bfe3cc; }
.rtafel.bezet b  { color: var(--groen); }
.rtafel.bezet i  { color: var(--groen); }
.rtafel.verwacht { background: var(--amber-bg); border-color: #f0dcb4; }
.rtafel.verwacht b, .rtafel.verwacht i { color: var(--amber); }

/* Op een smaller scherm onder elkaar: naast elkaar wordt de spreiding te smal
   om nog iets te kunnen lezen. */
@media (max-width: 1100px) {
  .resoverzicht {
    grid-template-columns: 1fr;
    grid-template-areas: "cijfers" "spreiding" "zaal";
  }
}
@media (max-width: 620px) {
  .cijfers { grid-template-columns: repeat(2, 1fr); }
}

/* Wat er aan een tafel is afgerekend, onder de naam van de gast. Groen omdat het
   binnen is, en niet vet: het is een gegeven en geen waarschuwing. */
.sub.besteed { color: var(--groen); font-variant-numeric: tabular-nums; }

/* De balk die zegt dat er een nieuwere versie klaarstaat. Bovenaan alles, want
   hij is de verklaring voor "ik zie dat nieuwe scherm niet". Niet vanzelf
   verversen: dat is het laatste wat je wil terwijl iemand afrekent. */
.versiebalk {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--navy); color: #fff;
  font-size: 13.5px;
}
.versiebalk span { flex: 1; min-width: 200px; }
.versiebalk .knop { background: #fff; color: var(--navy); border-color: #fff; }
.versiebalk .knop.stil { background: transparent; color: #cbb6ff;
                         border-color: rgba(255,255,255,.3); }

/* ── De gangen van een ronde, op de rekening ──────────────────────────────

   Drie woorden per gang: welke gang, en of hij wacht, in de keuken staat of
   klaar is. Dat is wat de bediening aan een tafel wil weten zonder naar de
   keuken te lopen. */
.rondekop.gangen td { padding-top: 4px; padding-bottom: 8px; }

.gangmerk {
  display: inline-block; padding: 3px 10px; margin-right: 4px;
  border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--bg); color: var(--muted);
}
.gangmerk.gevraagd { background: var(--amber-bg); color: var(--amber); }
.gangmerk.klaar    { background: var(--groen-bg); color: var(--groen); }
.gangmerk.wacht    { background: var(--bg); color: var(--zwak); }

/* ── Een scheiding met een kopje, in een lang formulier ───────────────────
   Het artikelscherm werd te lang om in één blik te lezen. Een lijn met een
   woord erin zegt waar het over gaat zonder een tweede tabblad te vragen. */
.scheiding {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 14px; color: var(--zwak);
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}
.scheiding::before, .scheiding::after {
  content: ""; height: 1px; background: var(--lijn); flex: 1;
}
.scheiding::before { flex: 0 0 8px; }

/* ── Een foto bij een artikel ─────────────────────────────────────────────
   Vast vierkant, zodat het scherm niet verspringt terwijl er een foto wordt
   geladen — en zodat een liggende en een staande foto er even groot uitzien. */
.fotovak {
  width: 100%; max-width: 220px; aspect-ratio: 1;
  border: 1px solid var(--lijn); border-radius: 12px;
  background: var(--bg);
  display: grid; place-items: center; overflow: hidden;
}
.fotovak img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fotovak .geenfoto { color: var(--zwak); font-size: 13px; }

/* ── Tijdvakken per dag, in het webshopscherm ──────────────────────────────
   Twee vakken per dag is genoeg: een winkel met ochtend en middag. Wie er drie
   wil, kan de tweede ruimer maken — een rij die eindeloos kan groeien wordt
   een rij die niemand meer overziet. */
.momentrij {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--lijn-fijn);
}
.momentrij:last-child { border-bottom: 0; }
.momentrij .dagnaam {
  width: 30px; flex: none; font-weight: 600; font-size: 13px; color: var(--muted);
  text-transform: lowercase;
}
.momentrij input[type="time"] { width: 108px; flex: none; }
.momentrij .tot { color: var(--zwak); font-size: 12.5px; }

/* ── Inkoop ────────────────────────────────────────────────────────────────
   Een levering en een bestelgroep zijn allebei "een kop met een lijst eronder".
   Zelfde vorm, zodat je niet twee dingen hoeft te leren. */
.levrij {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--lijn-fijn);
}
.levrij:first-of-type { border-top: 1px solid var(--lijn); }

.besgroep { border-top: 1px solid var(--lijn); }
.besgroep:first-of-type { border-top: 0; }
.beskop {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 14px 8px;
}
.beskop .sub { margin: 0; }
.beskop .qrrij { margin-left: auto; }

/* ── De kas tellen ─────────────────────────────────────────────────────────
   Per coupure, in de volgorde waarin je een la uitruimt: grote biljetten eerst.
   Het bedrag naast elk vakje rekent mee terwijl je tikt, zodat een tikfout van
   een factor tien meteen opvalt. */
.coupures {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px; padding: 0 14px 14px;
}
.coupure {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--lijn); border-radius: 10px; padding: 7px 10px;
  background: var(--kaart);
}
.coupure .waarde {
  width: 46px; flex: none; font-size: 13px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.coupure input { width: 62px; flex: none; text-align: right; }
.coupure .som {
  font-size: 12.5px; color: var(--zwak); font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.kasslot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 0 14px 14px;
}
.kasslot > div {
  background: var(--bg); border: 1px solid var(--lijn); border-radius: 12px;
  padding: 11px 13px; display: flex; flex-direction: column; gap: 1px;
}
.kasslot .label { font-size: 12px; color: var(--muted); }
.kasslot strong { font-size: 21px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kasslot strong.goed { color: var(--groen); }
.kasslot strong.mis  { color: var(--rood); }

.raster-kas {
  display: grid; gap: 0 16px; padding: 0 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

td.getal.mis { color: var(--rood); font-weight: 600; }

@media (max-width: 520px) {
  .kasslot { grid-template-columns: 1fr; }
}

/* Eén regel onder een tegel, voor wat het getal betekent. Bij de marge is dat
   nodig: een marge over de helft van je omzet is niet een marge over alles. */
.stattegel .onder {
  font-size: 11.5px; color: var(--zwak); margin-top: 3px; line-height: 1.4;
}

/* Een opdracht om te kopiëren. Breekbaar op elke plek, want een adres met een
   sleutel van veertig tekens past op geen enkel scherm in één regel — en
   afgekapt overtikken is precies waar het misgaat. */
pre.opdracht {
  margin: 0 0 12px; padding: 12px 14px;
  background: var(--navy); color: #e9dcff;
  border-radius: 10px; overflow-x: auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-all;
  user-select: all;
}

/* ── De bonontwerper ────────────────────────────────────────────────────────
 *
 * Het voorbeeld moet er niet mooi uitzien maar precies. Vandaar een vast
 * lettertype, en een meetlat erboven die het aantal tekens laat zien -- want
 * die breedte is de hele beperking waarbinnen je ontwerpt.
 */
.bobreedte { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 16px; }
.bobreedte select { min-width: 140px; }
.botekens { display: flex; flex-direction: column; line-height: 1.1; padding-bottom: 4px; }
.botekens strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.botekens span { font-size: 12px; color: var(--muted); }

.botwee { display: grid; grid-template-columns: minmax(280px, 1fr) auto; gap: 24px; align-items: start; }
@media (max-width: 900px) { .botwee { grid-template-columns: 1fr; } }
.botwee h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
             color: var(--muted); margin: 0 0 10px; }
.botwee h3 + .bonpapier { margin-bottom: 18px; }

.bonpapier { background: var(--kaart); border: 1px solid var(--lijn); border-radius: 6px;
             padding: 12px 14px; overflow-x: auto; }
.bolat, .bonvoorbeeld {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.45; white-space: pre; color: var(--inkt);
}
.bolat { color: var(--zwak); border-bottom: 1px solid var(--lijn-fijn); padding-bottom: 4px; margin-bottom: 6px; }
.bonvoorbeeld { margin: 0; }
/* Twee en vier keer zo breed als de printer ze afdrukt. Met een transform en
 * geen font-size, want dan blijft één teken precies twee of vier kolommen --
 * en dat is waar het voorbeeld op klopt. */
.bonvoorbeeld .bofactor2, .bonvoorbeeld .bofactor4 {
  display: inline-block; transform-origin: left center; font-weight: 700;
}
.bonvoorbeeld .bofactor2 { transform: scaleX(2); }
.bonvoorbeeld .bofactor4 { transform: scaleX(4); }
.bonvoorbeeld .bologo { color: var(--muted); font-style: italic; }

.boblokken { list-style: none; margin: 0; padding: 0; }
.boblok { border: 1px solid var(--lijn); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.boblok.bovast { background: var(--bg); }
.bokop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bokop .sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.bopijlen { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.boopties { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;
            margin-top: 10px; font-size: 13px; }
.boopties textarea { width: 100%; }
.bovink { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bovelden { display: flex; flex-wrap: wrap; gap: 6px 12px; width: 100%; }
.boerbij { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

.bologovak { display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
             padding: 12px; background: var(--bg); border-radius: 8px; }
.bologovak img { max-height: 72px; max-width: 220px; background: #fff; padding: 4px;
                 border: 1px solid var(--lijn); border-radius: 4px; }
.bologovak .sub { font-size: 12px; color: var(--muted); }

/* De bar-app (Windows, "Kassanext Bar"): geen menu, de bar over de hele breedte.
   Bovenaan blijven de zaak, wie er staat en Afmelden. */
.app.alleenbar .balk nav, .app.alleenbar .zijmenu { display: none !important; }
@media (min-width: 900px) { .app.alleenbar { grid-template-columns: 1fr; } .app.alleenbar main { grid-column: 1; } }

/* Wegboeken: een grote knop per post. */
.wegposten { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.wegposten .knop.aan { background: var(--blauw); color: #fff; border-color: var(--blauw); }
.wegposten .sub { font-size: 11px; opacity: .7; font-weight: 500; margin-left: 4px; }
.wegrij { display: grid; grid-template-columns: 1fr auto 150px auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
@media (max-width: 640px) { .wegrij { grid-template-columns: 1fr 1fr; } }

/* Clubkaarten: één groot veld waar de lezer in tikt. */
.kaartscan input { font-size: 18px; padding: 14px 16px; border: 2px dashed var(--lijn, #d0d7e2); border-radius: 12px; width: 100%; }
.kaartscan input:focus { border-color: var(--blauw, #2563eb); border-style: solid; outline: none; }

/* Licenties */
.licstand { padding: 10px 14px; border-radius: 10px; background: var(--groen-bg); color: var(--groen); margin-bottom: 10px; }
.licstand.vol { background: var(--amber-bg); color: var(--amber); }