/* 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: #0b2244;
  --navy-op: #16305c;
  --blauw: #2563eb;
  --blauw-donker: #1d4ed8;
  --blauw-licht: #eef4ff;
  --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: #7ea2f0; }

/* ── 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); }

.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); }

/* ── 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;
}
.artikelknop .op { 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); }

@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; }

  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; } }