*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  color-scheme: light;   /* flipped to dark in the dark-mode block at the bottom */
  --navy:    #1e3a5f;
  --navy2:   #16304f;
  --cream:   #faf7f2;
  --warm:    #f0ebe1;
  --border:  #e0d8cc;
  --text:    #1a1a1a;
  --text2:   #5a5248;
  --text3:   #9a9088;
  --green:   #2d7a4f;
  --green-bg:#e8f5ee;
  --red:     #c0392b;
  --red-bg:  #fdecea;
  --blue-bg: #e8f0fb;
  --blue-fg: #1a4a8a;
  --radius:  10px;
  --shadow:  0 1px 3px rgba(0,0,0,.08);
}
html, body {
  height: 100%; width: 100%;
  background: var(--cream);
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px; color: var(--text);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
/* Form controls and buttons do NOT inherit `color` from the page — without
   this they keep the UA's black, which is invisible on every dark surface in
   dark mode. Bare element selectors, so any class/id rule (or an inline style)
   that sets its own colour still wins. This is the safety net for the many
   controls styled inline in index.html with only a background. */
button, input, select, textarea { color: var(--text); }

#app {
  display: grid;
  grid-template-columns: 1fr 320px;
  height: 100vh;
  overflow: hidden;
}
/* Compact phone layout: the form factor is decided in JS (data-layout on <html>
   by applyDeviceLayout() in js/app.js, from Instellingen → Weergave). The
   portrait/landscape split below is a pure CSS concern. Was a raw
   @media (max-width: 700px) query. */

/* Portrait phone: single column, order panel as a bottom strip. Kept compact so
   the product grid keeps most of the screen — a tighter cap plus smaller order
   rows, header and totals (none of which had phone overrides before, so they used
   full desktop sizing and made the strip too tall). Totals + pay grid stay pinned;
   only the order lines scroll (#order-lines is already flex:1/overflow-auto). */
html[data-layout="phone"] #app   { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
html[data-layout="phone"] #right { border-left: none; border-top: 1px solid var(--border); max-height: 42vh; }
html[data-layout="phone"] #order-empty { padding: 16px 12px; }
html[data-layout="phone"] #pay-area     { padding: 8px 10px; gap: 6px; }
html[data-layout="phone"] .pay-btn      { padding: 9px 6px; font-size: calc(12px * var(--ui-scale, 1)); }
/* Compact order overview on phone (both orientations): smaller header, rows and
   totals so more lines fit in a shorter panel. */
html[data-layout="phone"] #order-hdr     { padding: 7px 12px; }
html[data-layout="phone"] #order-hdr .label { font-size: calc(12px * var(--ui-scale, 1)); }
html[data-layout="phone"] .order-row     { padding: 5px 12px; gap: 6px; }
html[data-layout="phone"] .o-qty         { min-width: 24px; height: 24px; font-size: calc(12px * var(--ui-scale, 1)); }
html[data-layout="phone"] .o-name        { font-size: calc(12px * var(--ui-scale, 1)); }
html[data-layout="phone"] .o-price       { font-size: calc(12px * var(--ui-scale, 1)); }
html[data-layout="phone"] #totals        { padding: 8px 12px; }
html[data-layout="phone"] .tot-row       { font-size: calc(12px * var(--ui-scale, 1)); margin-bottom: 2px; }
html[data-layout="phone"] .tot-row.grand { font-size: calc(15px * var(--ui-scale, 1)); margin-top: 5px; padding-top: 6px; }

/* Portrait phone: show ~6 product tiles and the order overview together, instead of
   the product grid filling the whole first screen. The PAGE scrolls (not a locked
   100vh): #left sizes to content, the product grid (#items-wrap) is capped to ≈3 rows
   and scrolls internally for a longer catalogue, and the order panel (#right) flows
   directly underneath — scroll the page down to reach totals + the pay grid. Landscape
   (side-by-side, always on screen) has its own block below and stays untouched. */
@media (orientation: portrait) {
  html[data-layout="phone"] body   { height: auto; min-height: 100%; overflow-y: auto; }
  html[data-layout="phone"] #app   { height: auto; min-height: 100vh; min-height: 100dvh;
                                      overflow: visible; grid-template-rows: auto auto; }
  html[data-layout="phone"] #left       { height: auto; }
  /* ≈6 tiles (2 per row × 3 rows), then the grid scrolls internally; the rest of the
     screen shows the order overview directly below. */
  html[data-layout="phone"] #items-wrap { max-height: 46vh; }
  html[data-layout="phone"] #right { max-height: none; }
  /* Order list shows ~6 products (rows are ~37px); a longer order scrolls inside the
     list (#order-lines already has overflow-y:auto) so the totals + pay buttons stay
     at a predictable spot instead of being pushed far down the page. min-height keeps
     a short order looking like a list and stops it collapsing to nothing again. */
  html[data-layout="phone"] #order-lines { min-height: 74px; max-height: 230px; }
}

/* Landscape phone: too short for a bottom cart (the kassa PWA is locked to
   landscape), so keep a slim order panel on the right and give the product grid
   the full height. Scoped to the phone form factor, so tablets are untouched. */
@media (orientation: landscape) {
  html[data-layout="phone"] #app   { grid-template-columns: 1fr 240px; grid-template-rows: 1fr; }
  html[data-layout="phone"] #right { border-left: 1px solid var(--border); border-top: none; max-height: none; }
  /* Wider product area in landscape — let it fit as many tiles as it can instead of
     forcing the portrait two-up. */
  html[data-layout="phone"] #items { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* Smaller product tiles + a tighter category bar so more fits on a small screen.
   Portrait phone: force exactly two tiles per row (minmax(0,1fr) lets them shrink
   to fit even the narrowest phones, so there are always two side by side).
   Landscape overrides this below with auto-fill, since the grid is much wider. */
html[data-layout="phone"] #items   { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; }
html[data-layout="phone"] #cats    { padding: 8px 10px; gap: 5px; }
html[data-layout="phone"] .cat-btn { padding: 9px 16px; font-size: calc(14px * var(--ui-scale, 1)); }
/* Phone tiles: less white — a warm off-white fill (instead of #fff), no shadow,
   and tighter padding so each tile is more compact. Dark theme keeps its own tile
   colour (the later html[data-theme="dark"] .item-btn rule wins); only the sizing
   below carries over there. */
html[data-layout="phone"] .item-btn    { background: var(--warm); box-shadow: none; padding: 8px 6px 7px; gap: 3px; border-radius: 10px; }
html[data-layout="phone"] .item-swatch { width: 40px; height: 40px; font-size: 22px; }
html[data-layout="phone"] .item-name   { font-size: calc(13px * var(--tile-scale, 1)); }
html[data-layout="phone"] .item-price  { font-size: calc(12px * var(--tile-scale, 1)); }
/* Producten-scherm op telefoon: tightere productrijen + kleinere actieknoppen zodat
   de productnaam meer ruimte krijgt naast de ▲▼✏️🗑️-knoppen op een smal scherm. */
html[data-layout="phone"] .content-view { padding: 12px; }
html[data-layout="phone"] .prod-row     { gap: 6px; padding: 9px 10px; }
html[data-layout="phone"] .prod-row .icon-btn { width: 28px; height: 28px; font-size: 13px; }
html[data-layout="phone"] .prod-emoji   { width: 32px; font-size: 22px; }
/* Iets compactere tekst op het Producten-scherm op telefoon (gebruikersverzoek). */
html[data-layout="phone"] .sub-tab { font-size: 12px; padding: 7px 12px; }
html[data-layout="phone"] #catalogue-view .add-form h3 { font-size: 12px; }
html[data-layout="phone"] #catalogue-view .form-field label { font-size: 10px; }
html[data-layout="phone"] #catalogue-view .form-field input,
html[data-layout="phone"] #catalogue-view .form-field select { font-size: 12px; padding: 7px 9px; }
html[data-layout="phone"] #catalogue-view .prod-info .pname { font-size: calc(14px * var(--ui-scale, 1)); }
html[data-layout="phone"] #catalogue-view .prod-info .pcat  { font-size: calc(11px * var(--ui-scale, 1)); }
html[data-layout="phone"] #catalogue-view .prod-price { font-size: calc(13px * var(--ui-scale, 1)); }
html[data-layout="phone"] #catalogue-view .panel-hdr { font-size: 13px; }
#left { display: flex; flex-direction: column; overflow: hidden; background: var(--cream); }
#topbar {
  background: var(--navy); color: #fff;
  padding: 0 16px; height: 52px;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
#topbar .brand { font-size: 16px; font-weight: 600; letter-spacing: -.3px; }
#topbar .brand span { opacity: .5; font-weight: 400; margin-left: 6px; font-size: 13px; }
#topbar .right-info { display: flex; align-items: center; gap: 16px; }
#clock { font-size: 13px; opacity: .75; font-variant-numeric: tabular-nums; }
#tabs { display: flex; background: var(--navy2); flex-shrink: 0; }
.tab {
  flex: 1; padding: 9px 0; text-align: center;
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,.5);
  cursor: pointer; border-bottom: 2px solid transparent;
  transition: all .15s; letter-spacing: .04em; text-transform: uppercase;
}
.tab.active { color: #fff; border-bottom-color: #6aabf7; }
#cats {
  display: flex; gap: 6px; padding: 10px 14px;
  overflow-x: auto; flex-shrink: 0;
  background: var(--warm); border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#cats::-webkit-scrollbar { display: none; }
.cat-btn {
  flex-shrink: 0; padding: 12px 24px; border-radius: 24px;
  border: 1px solid var(--border); background: #fff;
  font-size: calc(16px * var(--ui-scale, 1)); font-weight: 600; color: var(--text2);
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.cat-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
#items-wrap { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; padding: 14px; align-content: start;
}
.item-btn {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 10px 12px; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: var(--shadow); transition: transform .1s, box-shadow .1s;
  -webkit-user-select: none;
}
.item-btn:active { transform: scale(.95); box-shadow: none; }
.item-swatch { width: 52px; height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 26px; }
/* Tile text scales with the per-device "Tekstgrootte tegels" setting (Instellingen →
   Weergave): data-tile-size on #pos-view sets --tile-scale on #items, inherited here.
   The base px stays context-specific (desktop vs the phone overrides below); the same
   factor multiplies both. Default 1 (normaal) via the var fallback. */
.item-name { font-size: calc(16px * var(--tile-scale, 1)); font-weight: 600; color: var(--text); line-height: 1.3; }
.item-price { font-size: calc(14px * var(--tile-scale, 1)); color: var(--text3); }
#pos-view[data-tile-size="klein"] #items { --tile-scale: .85; }
#pos-view[data-tile-size="groot"] #items { --tile-scale: 1.22; }
/* Non-tile text size (Instellingen → Weergave, "Tekstgrootte verkoopscherm"):
   data-ui-size on <html> sets --ui-scale, inherited by the category bar, the
   winkelmand (order lines + totals), the pay buttons and the product list in
   the catalogue. Their font-size is calc(<base>px * var(--ui-scale, 1)) below —
   desktop base and the phone overrides alike — so the one factor multiplies
   both. The product tiles are deliberately excluded; they keep their own
   --tile-scale above. Normaal (×1) puts the besteltekst at 12px; the grand
   total scales with it so "Te betalen" always stays the biggest line. */
html[data-ui-size="klein"]   { --ui-scale: .75; }
html[data-ui-size="normaal"] { --ui-scale: 1; }
html[data-ui-size="groot"]   { --ui-scale: 1.25; }
#right {
  display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid var(--border); overflow: hidden;
}
#order-hdr {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0; background: var(--warm);
}
#order-hdr .label { font-size: calc(12px * var(--ui-scale, 1)); font-weight: 600; }
#item-count { font-size: calc(12px * var(--ui-scale, 1)); color: var(--text3); }
#order-lines { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#order-empty { padding: 40px 20px; text-align: center; color: var(--text3); font-size: calc(12px * var(--ui-scale, 1)); line-height: 1.6; }
#order-empty .hint { font-size: 28px; margin-bottom: 10px; }
.order-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #f5f0ea; }
.order-row:last-child { border-bottom: none; }
/* Het vakje draagt een aantal ("2") of een gewicht ("450 g", "1,25 kg") — de
   breedte mag dus meegroeien, maar de regel nooit afbreken. */
.o-qty {
  min-width: 28px; height: 28px; border-radius: 7px; padding: 0 5px; white-space: nowrap;
  background: var(--blue-bg); color: var(--blue-fg);
  font-size: calc(12px * var(--ui-scale, 1)); font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.o-name { flex: 1; font-size: calc(12px * var(--ui-scale, 1)); }
.o-price { font-size: calc(12px * var(--ui-scale, 1)); color: var(--text2); font-variant-numeric: tabular-nums; }
.o-del {
  width: 26px; height: 26px; border: none; background: none;
  color: var(--text3); font-size: 18px; cursor: pointer; border-radius: 6px;
  display: flex; align-items: center; justify-content: center; transition: background .1s, color .1s; flex-shrink: 0;
}
.o-del:hover { background: var(--red-bg); color: var(--red); }
#totals { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--warm); flex-shrink: 0; }
.tot-row { display: flex; justify-content: space-between; font-size: calc(12px * var(--ui-scale, 1)); color: var(--text2); margin-bottom: 4px; }
.tot-row.grand { font-size: calc(17px * var(--ui-scale, 1)); font-weight: 700; color: var(--text); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); margin-bottom: 0; }
#pay-area { padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex-shrink: 0; border-top: 1px solid var(--border); }
.pay-btn { padding: 13px 8px; border-radius: var(--radius); border: none; font-size: calc(13px * var(--ui-scale, 1)); font-weight: 600; cursor: pointer; transition: opacity .12s, transform .1s; }
.pay-btn:active { opacity: .82; transform: scale(.97); }
#btn-cash { background: var(--navy); color: #fff; }
#btn-card { background: var(--green); color: #fff; }
#btn-ronde { background: #b26a00; color: #fff; }
#btn-payconiq { background: #e5194f; color: #fff; }
/* Sits beside Payconiq (same row, like Contant/Bancontact). Dormant by default —
   it only lights up for a klant-app order Mollie confirmed as paid, so it never
   books phantom revenue. */
#btn-online { background: var(--cream); color: var(--text3); border: 1px dashed var(--border); }
#btn-online.paid-ready { background: #e8f5e9; color: #1b5e20; border: 1px solid #2e7d32; }
#btn-online:disabled { cursor: not-allowed; }
#btn-online:disabled:active { opacity: 1; transform: none; }
#btn-void { grid-column: 1/-1; background: none; border: 1px solid #e0c0bc; color: var(--red); padding: 9px; font-size: calc(12px * var(--ui-scale, 1)); }
/* Greyed out while an online-paid pickup is loaded — korting and wissen are
   both blocked then (see renderOrder). Scoped to these two so #btn-online's
   own dormant-disabled look above is untouched. */
#btn-discount:disabled, #btn-void:disabled { opacity: .4; cursor: not-allowed; }
#btn-discount:disabled:active, #btn-void:disabled:active { opacity: .4; transform: none; }
/* Read-only bekijkmodus greys every charging button (except #btn-online, which
   keeps its own dormant dashed look). */
.pay-btn:disabled:not(#btn-online) { opacity: .4; cursor: not-allowed; }
.pay-btn:disabled:not(#btn-online):active { opacity: .4; transform: none; }
#statusbar { background: var(--navy2); color: rgba(255,255,255,.55); font-size: 11px; padding: 5px 16px; display: flex; justify-content: space-between; flex-shrink: 0; }

/* ── Scrollable content views ── */
.content-view { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; display: none; }
.content-view.active { display: block; }
#pos-view { display: flex; flex-direction: column; flex: 1; overflow: hidden; }

/* ── Shared card / section styles ── */
.section-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-bottom: 10px; }
.panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.panel-hdr { padding: 10px 14px; background: var(--warm); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text2); display: flex; align-items: center; justify-content: space-between; }
.panel-row { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid #f5f0ea; font-size: 13px; }
.panel-row:last-child { border-bottom: none; }

/* ── Report ── */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.stat-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.stat-card .lbl { font-size: 11px; color: var(--text3); margin-bottom: 4px; }
.stat-card .val { font-size: 22px; font-weight: 700; }
.stat-card .sub { font-size: 11px; color: var(--text3); margin-top: 2px; }
.rpt-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid #f5f0ea; font-size: 12px; }
.rpt-row:last-child { border-bottom: none; }
.rpt-time { color: var(--text3); min-width: 44px; font-variant-numeric: tabular-nums; }
.rpt-items { flex: 1; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-amt { font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; }
.badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 20px; flex-shrink: 0; }
.badge-cash { background: var(--green-bg); color: var(--green); }
.badge-card { background: var(--blue-bg); color: var(--blue-fg); }
.badge-payconiq { background: #fde8ee; color: #e5194f; }
.top-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-bottom: 1px solid #f5f0ea; font-size: 12px; }
.top-row:last-child { border-bottom: none; }
.bar-wrap { flex: 1; margin: 0 10px; background: var(--warm); border-radius: 4px; height: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--navy); border-radius: 4px; transition: width .4s; }
.qty-lbl { color: var(--text3); min-width: 28px; text-align: right; }
/* 🖨️-knop per betaalmethode in het rapport (Betaalmethodes). De plaatshouder
   houdt de bedrag-kolom uitgelijnd voor rijen zonder bonnen. */
.mrep-btn { flex-shrink: 0; width: 30px; height: 28px; margin-left: 8px; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: var(--cream); color: var(--text2); font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mrep-btn:hover { border-color: var(--navy); }
.mrep-btn.mrep-ph { background: transparent; border-color: transparent; cursor: default; pointer-events: none; }

/* ── Settings / actions ── */
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #f5f0ea; gap: 12px; }
.setting-row:last-child { border-bottom: none; }
.setting-row label { font-size: 13px; color: var(--text); }
.setting-row input[type=text],
.setting-row input[type=number],
.setting-row input[type=password] {
  width: 200px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 7px; font-size: 13px; background: var(--cream); color: var(--text); text-align: right;
}
#cfg-addr { width: 260px; }
.action-btn {
  width: 100%; padding: 11px; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--cream); font-size: 13px; font-weight: 500; color: var(--text);
  cursor: pointer; margin-bottom: 8px; text-align: left;
  display: flex; align-items: center; gap: 10px; transition: background .12s;
}
.action-btn:hover { background: var(--warm); }
.action-btn .ico { font-size: 18px; }
.action-btn.danger { color: var(--red); border-color: #e0c0bc; }

/* ── Product catalogue management ── */
#catalogue-view { display: none; }
#catalogue-view.active { display: block; }

/* sub-tabs inside catalogue */
.sub-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sub-tab {
  padding: 12px 24px; border-radius: 24px; border: 1px solid var(--border);
  background: #fff; font-size: 16px; font-weight: 600; color: var(--text2);
  cursor: pointer; transition: all .12s;
}
.sub-tab.active { background: var(--navy); color: #fff; border-color: var(--navy); }
/* Klanten / Bedrijven-filter in de klantenlijst (aan/uit, zoals de BTW-keuze). */
.cust-filter-btn { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--cream); color: var(--text2); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cust-filter-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* product list rows */
.prod-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid #f5f0ea;
}
.prod-row:last-child { border-bottom: none; }
.prod-emoji { font-size: 26px; width: 40px; text-align: center; flex-shrink: 0; }
.prod-info { flex: 1; min-width: 0; }
.prod-info .pname { font-size: calc(16px * var(--ui-scale, 1)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-info .pcat  { font-size: calc(13px * var(--ui-scale, 1)); color: var(--text3); }
.prod-price { font-size: calc(14px * var(--ui-scale, 1)); font-variant-numeric: tabular-nums; color: var(--text2); min-width: 46px; text-align: right; }
.icon-btn {
  width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--cream); color: var(--text); font-size: 14px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: background .1s, color .1s; flex-shrink: 0;
}
.icon-btn:hover { background: var(--warm); }
.icon-btn.del:hover { background: var(--red-bg); color: var(--red); border-color: #e0c0bc; }
.icon-btn:disabled { opacity: .3; cursor: default; background: var(--cream); }
/* Must out-specify .icon-btn.del:hover, or a disabled delete still lights up red. */
.icon-btn.del:disabled:hover { background: var(--cream); color: inherit; border-color: var(--border); }

/* ── Maker's credit ──
   Defined here rather than in customer/css/order.css because the klant-app
   loads this stylesheet too (customer/index.html), so both apps share it. */
.made-by { text-align: center; font-size: 11px; color: var(--text3); padding: 14px 10px; line-height: 1.5; }
.made-by a { color: inherit; font-weight: 600; text-decoration: underline; }
.made-by a:hover { color: var(--navy); }
/* The PIN box is a white card (the dim is the overlay behind it), so the
   default muted grey is right — only the spacing needs adjusting. */
#pin-box .made-by { padding: 16px 10px 0; }

/* openingsuren rows (Instellingen → Online bestellen) */
.hours-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.hours-day { min-width: 88px; font-size: 12px; font-weight: 600; }
.hours-closed { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text3); min-width: 78px; cursor: pointer; }
.hours-closed input { width: 14px; height: 14px; cursor: pointer; }
.hours-row input[type="time"] { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.hours-sep { color: var(--text3); font-size: 12px; }

/* category list rows */
.cat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-bottom: 1px solid #f5f0ea;
}
.cat-row:last-child { border-bottom: none; }
.cat-color-swatch { width: 24px; height: 24px; border-radius: 6px; flex-shrink: 0; }
.cat-name { flex: 1; font-size: 13px; font-weight: 500; }
.cat-count { font-size: 12px; color: var(--text3); }

/* add-form inline */
.add-form {
  background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; margin-bottom: 14px;
}
.add-form h3 { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--text2); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.form-grid.full { grid-template-columns: 1fr; }
/* Phone: stack the form in one column — two columns don't fit a ~358px-wide
   content area (the product/categorie-formulieren op het Producten-scherm). */
html[data-layout="phone"] .form-grid { grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field label { font-size: 11px; font-weight: 500; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.form-field input,
.form-field select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 13px; background: #fff; color: var(--text);
  -webkit-appearance: none; appearance: none;
  /* Fill the grid/flex cell and allow shrinking below the input's intrinsic width
     — without min-width:0 a text/number input keeps a ~190px default that forces a
     two-column .form-grid wider than a narrow phone (horizontal overflow). */
  width: 100%; min-width: 0;
}
.form-field input:focus,
.form-field select:focus { outline: none; border-color: var(--navy); }
/* Live marge onder de aankoopprijs in het productformulier; leeg = niets te tonen. */
.margin-hint { font-size: 11px; color: var(--text3); }
.margin-hint:empty { display: none; }
.margin-hint.neg, .pcat .neg { color: var(--red); }
.form-actions { display: flex; gap: 8px; }
.btn-primary {
  flex: 1; padding: 10px; border-radius: var(--radius); border: none;
  background: var(--navy); color: #fff; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: opacity .12s;
}
.btn-primary:active { opacity: .8; }
.btn-secondary {
  padding: 10px 16px; border-radius: var(--radius); border: 1px solid var(--border);
  background: #fff; color: var(--text2); font-size: 13px; cursor: pointer; transition: background .12s;
}
.btn-secondary:hover { background: var(--warm); }

/* emoji picker row */
.emoji-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.emoji-opt {
  width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border);
  background: #fff; color: var(--text); font-size: 18px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all .1s;
}
.emoji-opt.selected { border-color: var(--navy); background: var(--blue-bg); }

/* ── Receipt modal ── */
#modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 100;
  align-items: center; justify-content: center; padding: 20px;
}
#modal-overlay.show { display: flex; }
/* Grows with every order line: capped to the screen so a long order scrolls in the
   body and "Volgende klant" + the other buttons stay visible on a phone. */
#modal { background: #fff; border-radius: 16px; width: 100%; max-width: 340px; max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#modal-hdr { flex-shrink: 0; background: var(--navy); color: #fff; padding: 16px 20px; }
#modal-hdr .m-title { font-size: 15px; font-weight: 600; }
#modal-hdr .m-sub { font-size: 12px; opacity: .65; margin-top: 2px; }
#modal-body { padding: 16px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.receipt-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--text2); padding: 3px 0; }
.receipt-divider { border: none; border-top: 1px dashed var(--border); margin: 10px 0; }
.receipt-total { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; padding: 6px 0 0; }
.receipt-customer { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); padding: 0 0 4px; }
#modal-footer { flex-shrink: 0; padding: 12px 20px 20px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal-btn { padding: 11px; border-radius: var(--radius); border: none; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .12s; }
.modal-btn:active { opacity: .8; }
#modal-btn-new { background: var(--navy); color: #fff; grid-column: 1/-1; }
#modal-btn-print { background: var(--warm); color: var(--text); border: 1px solid var(--border); grid-column: 1/-1; }
#modal-btn-prev, #modal-btn-next { background: var(--cream); color: var(--text2); border: 1px solid var(--border); }
#modal-btn-prev:disabled, #modal-btn-next:disabled { opacity: .4; cursor: default; }

/* ── Payconiq QR payment ── */
#qr-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 110;
  align-items: center; justify-content: center; padding: 20px;
}
#qr-overlay.show { display: flex; }
#qr-box { background: #fff; border-radius: 16px; width: 100%; max-width: 340px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#qr-hdr { background: #e5194f; color: #fff; padding: 16px 20px; font-size: 15px; font-weight: 600; }

/* ── Edit product modal ── */
#edit-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 110;
  align-items: center; justify-content: center; padding: 20px;
}
#edit-overlay.show { display: flex; }
/* Capped to the screen: on a phone the form is taller than the viewport, so only the
   body scrolls and the header + Annuleren/Opslaan stay visible (dvh = minus browser bars). */
#edit-modal { background: #fff; border-radius: 16px; width: 100%; max-width: 380px; max-height: 90vh; max-height: 90dvh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#edit-modal-hdr { flex-shrink: 0; background: var(--navy); color: #fff; padding: 14px 18px; font-size: 14px; font-weight: 600; }
#edit-modal-body { padding: 16px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#edit-modal-footer { flex-shrink: 0; padding: 12px 18px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; }

/* ── PIN modal ── */
#pin-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 200; align-items: center; justify-content: center; }
#pin-overlay.show { display: flex; }
#pin-box { background: #fff; border-radius: 16px; padding: 28px 24px; width: 280px; text-align: center; }
#pin-box h2 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
#pin-box p { font-size: 13px; color: var(--text3); margin-bottom: 20px; }
#pin-dots { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); transition: background .15s, border-color .15s; }
.pin-dot.filled { background: var(--navy); border-color: var(--navy); }
#pin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pin-key { padding: 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--cream); color: var(--text); font-size: 18px; font-weight: 600; cursor: pointer; transition: background .1s; }
.pin-key:active { background: var(--warm); }
.pin-key.del { font-size: 14px; color: var(--text3); }
#pin-error { font-size: 12px; color: var(--red); margin-top: 10px; min-height: 18px; }
/* Lock screen step 1: one tile per staff member */
#pin-userlist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.pin-user { padding: 13px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--cream); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; text-align: left; }
.pin-user:active { background: var(--warm); }
#btn-pin-back:hover { text-decoration: underline; }

/* ── Admin panel ── */
#admin-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 200; align-items: center; justify-content: center; padding: 20px; }
#admin-overlay.show { display: flex; }
#admin-box { background: #fff; border-radius: 16px; width: 100%; max-width: 760px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.2); }
#admin-hdr { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; }
.admin-section { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.admin-section-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text3); letter-spacing: .5px; margin-bottom: 8px; }
.admin-danger-btn { width: 100%; padding: 9px 14px; background: #fff0f0; border: 1px solid #f5c6c6; color: var(--red); border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; }
.admin-danger-btn:hover { background: #ffe0e0; }
.admin-save-btn { padding: 8px 14px; background: var(--navy); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.admin-save-btn:hover { background: #1a3860; }
.admin-close-btn { display: block; width: calc(100% - 36px); margin: 14px 18px; padding: 10px; background: var(--cream); color: var(--text); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; cursor: pointer; }
.admin-close-btn:hover { background: var(--warm); }

/* Users table (Beheer → Gebruikers). Scrolls sideways rather than squeezing
   the tab columns — the panel runs on a tablet. */
#users-wrap { overflow-x: auto; margin: 0 -4px; }
#users-table { width: 100%; border-collapse: collapse; font-size: 12px; }
#users-table th { font-size: 10px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .3px; padding: 0 4px 6px; text-align: center; white-space: nowrap; }
#users-table th.u-name-col, #users-table td.u-name { text-align: left; min-width: 96px; }
#users-table td { padding: 5px 4px; text-align: center; border-top: 1px solid var(--border); }
#users-table td.u-name input { width: 100%; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--cream); color: var(--text); }
#users-table input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.u-btn { background: none; border: none; font-size: 14px; cursor: pointer; padding: 2px 4px; line-height: 1; }
.u-btn[disabled] { opacity: .3; cursor: not-allowed; }
/* One step warmer than the fields inside it, so the inputs read as inset in
   both themes (light: warm row / cream fields, dark: the same relationship). */
.u-detail td { background: var(--warm); text-align: left; padding: 10px 12px; }
.u-detail-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--text3); letter-spacing: .3px; margin-bottom: 6px; }
.u-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 2px 10px; margin-bottom: 12px; }
.u-sections label { display: flex; align-items: center; gap: 7px; font-size: 12px; cursor: pointer; }
.u-newpin { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.u-newpin input { width: 120px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--cream); color: var(--text); }
#users-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
#users-add input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; background: var(--cream); color: var(--text); }
#users-add input[type="text"] { flex: 1; min-width: 110px; }
#users-add input[type="password"] { width: 106px; }

/* ── Toast ── */
#toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1a1a1a; color: #fff; padding: 10px 20px; border-radius: 20px; font-size: 13px; opacity: 0; transition: all .3s; z-index: 300; white-space: nowrap; pointer-events: none; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Product photo ── */
.product-img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; display: block; }
.prod-img-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; display: block; }

/* ── Print ── */
@media print {
  /* Suppress the browser's own print header/footer (print date, page title,
     document URL, page number). With a zero page margin there is no margin box
     for the browser to draw them in, so Chrome/Edge omit them. #print-area keeps
     its own 10px padding, so receipt content still isn't flush to the paper edge. */
  @page { margin: 0; }
  #app, #modal-overlay, #pin-overlay, #edit-overlay, #admin-overlay, #qr-overlay, #preorder-overlay, #dayclose-overlay, #discount-overlay, #weight-overlay, #invoice-overlay, #payconfirm-overlay, #sale-customer-overlay, #invoice-preview-overlay, #bon-preview-overlay, #msg-receipts-overlay, #customer-orders-overlay, #catsheet-overlay, #quote-editor-overlay, #quote-preview-overlay, #quote-po-overlay, #toast { display: none !important; }
  #print-area { display: block !important; }
}
#print-area { display: none; font-family: 'Courier New', monospace; font-size: 12px; max-width: 300px; margin: 0 auto; padding: 10px; }
#print-area .p-hdr, .ticket-preview .p-hdr { text-align: center; font-weight: bold; font-size: 14px; margin-bottom: 4px; }
#print-area .p-logo, .ticket-preview .p-logo { display: block; max-width: 200px; max-height: 80px; margin: 0 auto 4px; object-fit: contain; }
#print-area .p-sub, .ticket-preview .p-sub { text-align: center; font-size: 11px; margin-bottom: 4px; }
#print-area .p-line, .ticket-preview .p-line { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 2px; }
#print-area .p-item, .ticket-preview .p-item { display: flex; margin-bottom: 2px; }
#print-area .p-item .p-item-name, .ticket-preview .p-item .p-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 4px; }
#print-area .p-item .p-item-price, #print-area .p-item .p-item-total, .ticket-preview .p-item .p-item-price, .ticket-preview .p-item .p-item-total { flex-shrink: 0; width: 54px; text-align: right; }
#print-area .p-div, .ticket-preview .p-div { border-top: 1px dashed #000; margin: 8px 0; }
#print-area .p-tot, .ticket-preview .p-tot { display: flex; justify-content: space-between; font-weight: bold; font-size: 14px; }
#print-area .p-ft, .ticket-preview .p-ft { text-align: center; margin-top: 8px; font-size: 11px; }
#print-area .p-fc { display: flex; justify-content: space-between; margin-bottom: 2px; font-size: 12px; }

/* ── Kassabon-indeling: live preview, LOGO placeholder, settings tabs, block editor ── */
/* The preview always looks like white thermal paper, in light and dark theme. */
.ticket-preview { font-family: 'Courier New', monospace; font-size: 12px; color: #111; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px; max-width: 320px; overflow-x: auto; }
.p-logo-ph { display: inline-block; border: 1px dashed #999; border-radius: 4px; padding: 10px 22px; font-weight: bold; letter-spacing: 2px; color: #666; background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 6px, #ececec 6px, #ececec 12px); }
.settings-tabbar { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 4px 12px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.settings-tab { border: 1px solid var(--border); background: var(--cream); color: var(--text2); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.settings-tab:hover { border-color: var(--navy); }
.settings-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.tk-block-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.tk-block-row.tk-off { opacity: .5; }
.tk-block-row .tk-on { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.tk-block-label { flex: 1 1 120px; font-size: 13px; color: var(--text); }
.tk-block-row .tk-text { flex: 1 1 120px; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; background: var(--cream); color: var(--text); }
.tk-align { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; background: var(--cream); color: var(--text); flex-shrink: 0; }
.tk-align.tk-size { min-width: 84px; }
.tk-actions { display: flex; gap: 4px; flex-shrink: 0; }
.tk-btn { width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 6px; background: var(--cream); color: var(--text2); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.tk-btn:disabled { opacity: .35; cursor: default; }
.tk-btn.tk-del { color: var(--red); border-color: #e0c0bc; }

/* ── Stock badges on POS product buttons ── */
.item-btn { position: relative; }
.item-stock { position: absolute; top: 5px; right: 5px; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 10px; background: var(--green-bg); color: var(--green); }
.item-stock.low { background: #fff3e0; color: #b26a00; }
.item-stock.out { background: var(--red-bg); color: var(--red); }
.item-btn.sold-out { opacity: .5; }
.item-btn.sold-out .item-swatch { filter: grayscale(1); }

/* ── Tab badge (today's pickups count) ── */
.tab-badge { display: inline-block; min-width: 16px; padding: 1px 5px; border-radius: 10px; background: #e5194f; color: #fff; font-size: 10px; font-weight: 700; text-align: center; vertical-align: middle; }

/* ── POS pickup banner ── */
#pickup-banner { margin: 0 0 10px; padding: 10px 14px; background: #fff3e0; border: 1px solid #f0d9b0; border-radius: var(--radius); color: #7a4500; font-size: 13px; font-weight: 600; cursor: pointer; }
#pickup-banner:active { opacity: .85; }

/* ── Stock management rows ── */
.stock-row { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.stock-row .s-name { flex: 1; min-width: 0; }
.stock-row input[type=number] { width: 62px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.stock-row .s-track { width: 16px; height: 16px; cursor: pointer; }

/* ── Pre-order cards ── */
.po-daygroup { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); background: var(--cream); padding: 7px 14px 4px; }
.po-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.po-card .po-info { flex: 1; min-width: 0; }
.po-card .po-cust { font-weight: 600; font-size: 13px; }
.po-card .po-meta { font-size: 11px; color: var(--text3); margin-top: 1px; }
/* Must be hard to miss: ringing this order up again would charge the customer twice. */
.po-card .po-paid { font-size: 11px; font-weight: 600; color: #2e7d32; margin-top: 2px; }
.po-status { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.po-status.open { background: #fff3e0; color: #b26a00; }
.po-status.ready { background: var(--blue-bg); color: var(--blue-fg); }
.po-status.collected { background: var(--green-bg); color: var(--green); }
.po-status.cancelled { background: var(--red-bg); color: var(--red); }

/* ── Pre-order & day-close modals (reuse edit-modal look) ── */
#preorder-overlay, #dayclose-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 120; align-items: center; justify-content: center; padding: 20px; }
#preorder-overlay.show, #dayclose-overlay.show { display: flex; }
#preorder-box, #dayclose-box { background: #fff; border-radius: 16px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#preorder-hdr, #dayclose-hdr { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; position: sticky; top: 0; }
#preorder-modal-body, #dayclose-body { padding: 16px 18px; }
#preorder-modal-footer, #dayclose-footer { padding: 0 18px 18px; display: flex; gap: 8px; flex-wrap: wrap; }
#preorder-modal-footer .btn-primary, #dayclose-footer .btn-primary { flex: 1; }
/* Omzet-rapport modal — same look as #dayclose-overlay */
#omzet-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 120; align-items: center; justify-content: center; padding: 20px; }
#omzet-overlay.show { display: flex; }
#omzet-box { background: #fff; border-radius: 16px; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#omzet-hdr { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; position: sticky; top: 0; }
#omzet-body { padding: 16px 18px; }
#omzet-footer { padding: 0 18px 18px; display: flex; gap: 8px; flex-wrap: wrap; }
#omzet-footer .btn-primary { flex: 1; }

/* ── Qty calculator (quantity-first entry on the POS) ── */
/* Instellingen → Weergave switches #pos-view between data-entry="calc" (pad
   visible, amount first) and "tiles" (pad gone, one tap = one unit). */
#pos-main { display: flex; flex: 1; overflow: hidden; min-height: 0; }
#pos-view[data-entry="tiles"] #qty-pad { display: none; }
#qty-pad {
  width: 190px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 12px;
  background: var(--warm); border-right: 1px solid var(--border);
  overflow-y: auto;
}
.qty-pad-lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); }
#qty-display {
  height: 58px; border-radius: 10px;
  background: #fff; border: 2px solid var(--border);
  font-size: 30px; font-weight: 700; color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
#qty-display.set { color: var(--navy); border-color: var(--navy); background: var(--blue-bg); }
#qty-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qty-key {
  padding: 15px 0; border-radius: 10px;
  border: 1px solid var(--border); background: #fff;
  font-size: 20px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: background .1s;
  box-shadow: var(--shadow);
}
.qty-key:active { background: var(--warm); }
.quick-amount-btn {
  flex: 1; padding: 10px 0; border-radius: 8px;
  border: 1px solid var(--border); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: background .1s;
}
.quick-amount-btn:active { background: var(--warm); }
.qty-key.qty-clear { color: var(--red); font-size: 16px; }
@keyframes qtyFlash { 0%,100% { background: var(--warm); } 50% { background: #ffe2b8; } }
#qty-pad.flash { animation: qtyFlash .4s ease 2; }
/* Narrower qty-pad in the compact phone layout (see the data-layout note above). */
html[data-layout="phone"] #qty-pad { width: 132px; padding: 10px 8px; }
html[data-layout="phone"] .qty-key { padding: 10px 0; font-size: 17px; }
html[data-layout="phone"] #qty-display { height: 44px; font-size: 22px; }

/* ── Payment confirm modal (contant / bancontact) ── */
#payconfirm-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 110;
  align-items: center; justify-content: center; padding: 20px;
}
#payconfirm-overlay.show { display: flex; }
#payconfirm-box { background: #fff; border-radius: 16px; width: 100%; max-width: 340px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#payconfirm-hdr { background: var(--navy); color: #fff; padding: 16px 20px; font-size: 15px; font-weight: 600; }

/* ── Klant kiezen bij de verkoop (Weergave-optie, punt 4) ── */
#sale-customer-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 120;
  align-items: center; justify-content: center; padding: 20px;
}
#sale-customer-overlay.show { display: flex; }
#sale-customer-box { background: #fff; border-radius: 16px; width: 100%; max-width: 360px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#sale-customer-hdr { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; }
#sale-customer-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.sale-cust-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; }
.sale-cust-row:last-child { border-bottom: none; }
.sale-cust-row:hover { background: rgba(127,127,127,.12); }
.sale-cust-row .scr-name { font-size: 14px; font-weight: 500; color: var(--text); }
.sale-cust-row .scr-meta { font-size: 11px; color: var(--text3); white-space: nowrap; }

/* ── Korting & Factuur pay buttons ── */
#btn-discount { background: #fff3e0; color: #b26a00; border: 1px solid #f0d9b0; }
#btn-discount.active { background: #b26a00; color: #fff; border-color: #b26a00; }
#btn-invoice { background: var(--blue-bg); color: var(--blue-fg); border: 1px solid #c3d6f2; }
/* Neutral secondary action — sits in the half-width cell next to Factuur (was
   full-width on its own row, which read as too prominent). Neutral colour on
   purpose: it was falling back to the UA button face (grey box, invisible in
   dark mode). */
#btn-preorder { background: var(--warm); color: var(--text); }
/* Offerte: eigen volle rij onder Factuur + Voorbestelling (enkel wanneer offertes aanstaan). */
#btn-quote { grid-column: 1/-1; background: var(--warm); color: var(--text); padding: 10px 8px; }
.badge-invoice { background: var(--blue-bg); color: var(--blue-fg); }
/* "Betaald – factuur": betaald aan de kassa, gefactureerd elders — buiten de omzet. */
.badge-extinv { background: var(--warm); color: var(--text2); border: 1px dashed var(--border); }
.extinv-row { padding: 0 18px 18px; margin-top: -8px; }
.extinv-row .btn-secondary { width: 100%; padding: 12px; font-size: 14px; }
.extinv-copies { font-size: 12px; color: var(--text3); font-weight: 500; }
/* Negatief artikel (retour / leeggoed): een herkenbare tegel en orderregel. */
.item-btn.item-neg .item-price,
.order-row.neg .o-price { color: var(--red); }
.item-neg-tag { font-size: 10px; font-weight: 700; color: var(--red); }
.rpt-row.extinv .rpt-amt { color: var(--text3); font-weight: 500; }

/* ── Weegvenster (product per kilogram) ── */
#weight-box { background: #fff; border-radius: 16px; width: 100%; max-width: 340px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#weight-hdr { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; }
/* Het gewicht groot in beeld met de prijs eronder, zodat de kassier in één
   oogopslag ziet wat er aangerekend wordt voordat hij bevestigt. */
#weight-display {
  border-radius: 10px; background: var(--blue-bg); border: 2px solid var(--navy);
  padding: 10px; margin-bottom: 10px; text-align: center;
}
#weight-amount { font-size: 30px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.1; }
#weight-price { font-size: 15px; font-weight: 600; color: var(--text2); margin-top: 2px; }
#weight-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
#weight-steps .qty-key { font-size: 15px; }
#weight-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ── Automaat Cash (bedrag-invoer, ombouw van "Op ronde") ── */
#automaat-box { background: #fff; border-radius: 16px; width: 100%; max-width: 340px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#automaat-hdr { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; }
#automaat-display { border-radius: 10px; background: var(--blue-bg); border: 2px solid var(--navy); padding: 10px; margin-bottom: 10px; text-align: center; }
#automaat-amount { font-size: 30px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.1; }
#automaat-sub { font-size: 13px; font-weight: 600; color: var(--text2); margin-top: 2px; min-height: 16px; }
#automaat-vat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.vat-pick { padding: 9px 4px; border-radius: 8px; border: 1px solid var(--border); background: var(--cream); color: var(--text2); font-size: 13px; font-weight: 600; cursor: pointer; }
.vat-pick.sel { background: var(--navy); color: #fff; border-color: var(--navy); }
#automaat-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* ── Korting & Factuur modals ── */
#discount-overlay, #invoice-overlay, #weight-overlay, #automaat-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 120;
  align-items: center; justify-content: center; padding: 20px;
}
#discount-overlay.show, #invoice-overlay.show, #weight-overlay.show, #automaat-overlay.show { display: flex; }
#discount-box { background: #fff; border-radius: 16px; width: 100%; max-width: 340px; max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#invoice-box  { background: #fff; border-radius: 16px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#discount-hdr { background: #b26a00; color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; }
#invoice-hdr  { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; }
/* Factuur afronden: Annuleren · Inboeken / Inboeken & afdrukken · Inboeken & mailen (2×2). */
#invoice-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 18px 18px; }
#invoice-actions button { padding: 11px 8px; font-size: 13px; }

/* ── Tafel-QR-blad (#print-area.qrsheet) ──
   Het globale @page { margin: 0 } hierboven haalt de browsermarges weg, dus dit blad
   draagt zijn eigen papiermarge. break-inside voorkomt dat een kaartje over twee
   bladen gesneden wordt — precies wat je niet wil bij iets dat uitgeknipt wordt. */
#print-area.qrsheet {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  max-width: none; padding: 10mm;
  /* Expliciet zwart op wit: zonder dit erft dit blad body { color: var(--text) }, en dat
     is in Donkere modus bijna wit — dan drukt het tafelnummer wit op wit papier af. */
  background: #fff; color: #000;
}
#print-area.qrsheet .qr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8mm; }
#print-area.qrsheet .qr-card {
  border: 1px dashed #999; border-radius: 6px; padding: 6mm; text-align: center;
  break-inside: avoid; page-break-inside: avoid;
}
#print-area.qrsheet .qr-shop { font-size: 11pt; color: #555; margin-bottom: 3mm; }
#print-area.qrsheet .qr-svg svg { width: 50mm; height: 50mm; display: block; margin: 0 auto; }
#print-area.qrsheet .qr-label { font-size: 22pt; font-weight: 700; margin-top: 4mm; color: #000; }
#print-area.qrsheet .qr-url { font-size: 7pt; color: #777; margin-top: 2mm; word-break: break-all; }

/* ── Productoverzicht per categorie ──
   Eén opmaak voor twee plaatsen: het voorbeeldvenster (#catsheet-body) en het
   afdrukblad (#print-area.catsheet). Beide tekenen dezelfde .cs-doc, zodat wat
   je op het scherm goedkeurt ook is wat uit de printer komt. */
/* Knop boven de categorielijst: het hele assortiment op één blad. Volle breedte,
   want ze slaat op alles wat eronder staat en niet op één rij. */
#catalog-sheet-btn { display: block; width: 100%; margin-bottom: 14px; padding: 11px; font-size: 13px; }
/* Ruimte tussen twee categorieblokken op het volledige blad, zodat de gekleurde
   balk van de volgende categorie niet tegen de laatste prijs van de vorige plakt. */
.cs-group + .cs-group { margin-top: 22px; }
.cs-title-scope { font-size: 11px; font-weight: 600; color: #444; margin-top: 2px; }
#catsheet-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 120; align-items: center; justify-content: center; padding: 20px; }
#catsheet-overlay.show { display: flex; }
#catsheet-box { background: #fff; border-radius: 16px; width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#catsheet-hdr { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; position: sticky; top: 0; z-index: 1; }
#catsheet-opts { padding: 12px 18px 0; font-size: 13px; color: var(--text2); display: flex; flex-wrap: wrap; gap: 6px 18px; }
#catsheet-opts label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
#catsheet-opts input { width: 16px; height: 16px; cursor: pointer; }
/* Het blad heeft een A4-verhouding: op een smal scherm past het niet en zou de
   PRIJS-kolom — waar dit blad om draait — buiten beeld vallen. Daarom schuift het
   voorbeeld zijwaarts i.p.v. de kolommen te pletten, zodat je op een telefoon
   exact hetzelfde blad ziet als wat er uit de printer komt. */
#catsheet-body { padding: 12px 18px 4px; overflow-x: auto; }
#catsheet-body .cs-doc { min-width: 440px; }
#catsheet-mailrow { display: flex; gap: 8px; padding: 10px 18px 0; }
#catsheet-mailrow input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; background: var(--cream); color: var(--text); }
#catsheet-mailrow input:disabled { opacity: .5; }
#catsheet-footer { padding: 12px 18px 18px; display: flex; gap: 8px; flex-wrap: wrap; }
#catsheet-footer .btn-primary { flex: 1; }

/* Het blad zelf. Wit papier met zwarte inkt, ook in Donkere modus — anders zou
   het voorbeeld niet lijken op wat er gedrukt wordt, en zou de afdruk zelfs wit
   op wit kunnen uitvallen (dezelfde val als bij het QR-blad hierboven). */
.cs-doc { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; background: #fff; color: #111; }
#catsheet-body .cs-doc { border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.cs-hdr { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cs-logo { max-width: 150px; max-height: 46px; object-fit: contain; display: block; margin-bottom: 6px; }
.cs-name { font-size: 19px; font-weight: 700; color: #111; }
.cs-contact { font-size: 11px; color: #555; line-height: 1.5; }
.cs-title { text-align: right; flex-shrink: 0; }
.cs-title-main { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: #111; }
.cs-title-sub { font-size: 11px; color: #555; margin-top: 2px; }
.cs-catbar { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-bottom: 6px; }
.cs-swatch { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }
.cs-catname { font-size: 15px; font-weight: 700; color: #111; }
.cs-count { margin-left: auto; font-size: 11px; color: #777; }
.cs-table { width: 100%; border-collapse: collapse; }
.cs-table th { font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #888; text-align: left; padding: 0 6px 5px 0; border-bottom: 1px solid #333; }
.cs-table td { padding: 5px 6px 5px 0; border-bottom: 1px solid #e8e5dd; vertical-align: middle; }
.cs-c-img { width: 30px; }
.cs-c-unit { width: 118px; font-size: 11px; color: #777; white-space: nowrap; }
.cs-c-vat { width: 48px; font-size: 11px; color: #777; text-align: right; white-space: nowrap; }
/* De prijs is waarvoor dit blad bestaat: vet, rechts uitgelijnd, nooit afgebroken. */
.cs-c-price { width: 78px; font-weight: 700; text-align: right; white-space: nowrap; font-size: 13px; }
.cs-c-name { font-size: 13px; }
.cs-thumb { width: 24px; height: 24px; object-fit: cover; border-radius: 4px; display: block; }
.cs-emoji { font-size: 17px; }
.cs-row.cs-off td { color: #999; }
.cs-tag { font-size: 10px; color: #b26a00; white-space: nowrap; }
.cs-empty { color: #888; font-size: 12px; padding: 12px 0; }
.cs-foot { margin-top: 12px; font-size: 10px; color: #888; }

/* Afdrukblad: A4 met eigen papiermarge (het globale @page { margin: 0 } haalt de
   browsermarges weg). Een rij mag niet over twee bladen gesneden worden, en de
   kolomkoppen herhalen op elk blad — anders leest blad 2 als een naamloze lijst
   getallen. */
#print-area.catsheet { max-width: none; padding: 12mm; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; font-size: 12px; background: #fff; color: #111; }
#print-area.catsheet .cs-table thead { display: table-header-group; }
#print-area.catsheet .cs-row { break-inside: avoid; page-break-inside: avoid; }
/* Een categoriekop onderaan een blad met haar producten op het volgende is precies
   de plek waar een lezer een categorie overslaat — hou kop en tabel bij elkaar. */
#print-area.catsheet .cs-catbar { break-after: avoid; page-break-after: avoid; }
/* Op een telefoon is elke millimeter er een: laat het venster bijna het hele
   scherm gebruiken, anders blijft er van het blad zelf te weinig over. */
html[data-layout="phone"] #catsheet-overlay { padding: 8px; }
html[data-layout="phone"] #catsheet-body { padding: 10px 10px 4px; }
html[data-layout="phone"] #catsheet-mailrow,
html[data-layout="phone"] #catsheet-opts { padding-left: 10px; padding-right: 10px; }
html[data-layout="phone"] #catsheet-footer { padding: 12px 10px 14px; }

/* ── Invoice (A4-style document via #print-area.invoice) ── */
#print-area.invoice {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; max-width: 700px; padding: 24px;
}
/* Shared invoice body — buildInvoiceHtml() wraps its output in .inv-doc, so the
   same rules style the print document (#print-area.invoice), the on-screen quick
   view (#invoice-preview-body) and the layout-designer preview
   (#invoice-designer-preview) without per-container duplication. */
.inv-doc .inv-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.inv-doc .inv-shop { font-size: 18px; font-weight: 700; margin-bottom: 2px; }
.inv-doc .inv-title { text-align: right; }
.inv-doc .inv-nr { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.inv-doc .inv-muted { color: #555; font-size: 12px; }
.inv-doc .inv-lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #888; margin-bottom: 3px; }
.inv-doc .inv-cust { margin-bottom: 20px; padding: 10px 12px; border: 1px solid #ccc; border-radius: 6px; display: inline-block; min-width: 240px; }
.inv-doc .inv-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.inv-doc .inv-table th, .inv-doc .inv-table td { border: 1px solid #ccc; padding: 6px 8px; text-align: left; font-size: 12px; }
.inv-doc .inv-table th { background: #f2f2f2; font-weight: 600; }
.inv-doc .inv-table .r { text-align: right; }
.inv-doc .inv-totals { margin-left: auto; max-width: 280px; }
.inv-doc .inv-trow { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12px; }
.inv-doc .inv-grand { font-size: 15px; font-weight: 700; border-top: 2px solid #000; margin-top: 6px; padding-top: 6px; }
.inv-doc .inv-foot { margin-top: 28px; font-size: 12px; }
/* Blocks the invoice-layout designer can add / reorder. */
.inv-doc .inv-logo { margin-bottom: 16px; }
.inv-doc .inv-logo-img { max-height: 70px; max-width: 220px; object-fit: contain; }
.inv-doc .inv-hr { border: none; border-top: 1px solid #ccc; margin: 14px 0; }
.inv-doc .inv-text { font-size: 12px; margin: 6px 0; }
.inv-doc .inv-footline { margin-top: 14px; font-size: 12px; }
.inv-doc .inv-due { margin: -14px 0 20px; font-size: 13px; font-weight: 700; text-align: right; }
/* De kortingregels staan in hun eigen blok maar horen visueel bij de totalen:
   zelfde breedte en uitlijning, zonder de dubbele marge ertussen. */
.inv-doc .inv-disc { margin-bottom: 0; }
.inv-doc .inv-payref { margin: 16px 0; padding: 10px 12px; border: 1px solid #bbb; border-radius: 6px; background: #f7f7f7; }
.inv-doc .inv-payref-lbl { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #888; display: block; margin-bottom: 2px; }
.inv-doc .inv-payref-val { font-size: 15px; font-weight: 700; font-family: 'Courier New', monospace; letter-spacing: 1px; }

/* ── Factuur quick view (on-screen preview, not print) ── */
/* ── Verstuurde berichten (Instellingen → Berichten) ── */
.sent-msg { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--cream); margin-bottom: 6px; cursor: pointer; }
.sent-msg:hover { background: var(--warm); }
.sent-msg-title { font-size: 13px; font-weight: 600; }
.sent-msg-when { font-size: 11px; color: var(--text3); margin-top: 1px; }
.sent-msg-stat { font-size: 11px; color: var(--text2); white-space: nowrap; flex-shrink: 0; }

#msg-receipts-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 130; align-items: center; justify-content: center; padding: 20px; }
#msg-receipts-overlay.show { display: flex; }
#msg-receipts-box { background: #fff; border-radius: 16px; width: 100%; max-width: 460px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.2); }
#msg-receipts-hdr { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
#msg-receipts-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; opacity: .8; }
#msg-receipts-close:hover { opacity: 1; }
#msg-receipts-meta { padding: 12px 18px; border-bottom: 1px solid var(--border); }
#msg-receipts-meta .mr-title { font-size: 14px; font-weight: 700; }
#msg-receipts-meta .mr-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
#msg-receipts-body { overflow-y: auto; padding: 6px 18px; }
.mr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.mr-row:last-child { border-bottom: none; }
.mr-name { font-size: 13px; font-weight: 600; }
.mr-email { font-size: 11px; color: var(--text3); }
.mr-state { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.mr-state.ok { background: var(--green-bg); color: var(--green); }
.mr-state.del { background: var(--red-bg); color: var(--red); }
.mr-state.pending { background: var(--warm); color: var(--text3); }
.mr-state .mr-when { font-weight: 400; opacity: .85; }
#msg-receipts-footer { padding: 12px 18px 16px; }
#msg-receipts-footer button { width: 100%; }

/* ── Bestellingen van één klant (klantenlijst → 📋) ── */
.badge-btn { border: none; cursor: pointer; font: inherit; }
.badge-btn:hover { filter: brightness(.94); }
#customer-orders-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 130; align-items: center; justify-content: center; padding: 20px; }
#customer-orders-overlay.show { display: flex; }
#customer-orders-box { background: #fff; border-radius: 16px; width: 100%; max-width: 480px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.2); }
#customer-orders-hdr { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
#customer-orders-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; opacity: .8; }
#customer-orders-close:hover { opacity: 1; }
#customer-orders-meta { padding: 12px 18px; border-bottom: 1px solid var(--border); }
#customer-orders-meta .mr-title { font-size: 14px; font-weight: 700; }
#customer-orders-meta .mr-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
#customer-orders-body { overflow-y: auto; padding: 10px 18px; }
.co-order { padding: 10px 0; border-bottom: 1px solid var(--border); }
.co-order:last-child { border-bottom: none; }
.co-order-hdr { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; }
.co-order-items { font-size: 12px; color: var(--text2); margin: 4px 0; }
.co-order-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.co-order-ft .co-pay { font-weight: 600; }
.co-pay.paid { color: var(--green); }
.co-pay.pending { color: var(--text3); }
.co-pay.failed, .co-pay.expired { color: var(--red); }
.co-order-ft > span:last-child { font-weight: 700; }
#customer-orders-footer { padding: 12px 18px 16px; }
#customer-orders-footer button { width: 100%; }

#invoice-preview-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 120;
  align-items: center; justify-content: center; padding: 20px;
}
#invoice-preview-overlay.show { display: flex; }
#invoice-preview-box { background: #fff; border-radius: 16px; width: 100%; max-width: 760px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#invoice-preview-hdr { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
#invoice-preview-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; opacity: .8; }
#invoice-preview-close:hover { opacity: 1; }
#invoice-preview-body {
  overflow-y: auto; padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px; color: var(--text1);
}
/* .inv-* rules are shared via .inv-doc (see the invoice block above). */
#invoice-preview-footer { padding: 14px 18px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border); }

/* ── Offertes ── */
#quote-editor-overlay, #quote-preview-overlay, #quote-po-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 120;
  align-items: center; justify-content: center; padding: 20px;
}
#quote-editor-overlay.show, #quote-preview-overlay.show, #quote-po-overlay.show { display: flex; }
#quote-po-overlay { z-index: 130; }
#quote-editor-box, #quote-preview-box { background: #fff; border-radius: 16px; width: 100%; max-width: 820px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#quote-preview-box { max-width: 760px; }
#quote-po-box { background: #fff; border-radius: 16px; width: 100%; max-width: 420px; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#quote-editor-hdr, #quote-preview-hdr, #quote-po-hdr { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.qe-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; opacity: .8; }
.qe-close:hover { opacity: 1; }
#quote-editor-body { overflow-y: auto; padding: 16px 18px; }
#quote-editor-body textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; background: var(--cream); color: var(--text); }
#quote-editor-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; padding: 12px 18px 16px; border-top: 1px solid var(--border); }
#quote-editor-actions button { padding: 10px 14px; font-size: 13px; }
.qe-lines-hdr { display: flex; align-items: center; justify-content: space-between; margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
.qe-lines-hdr label { font-size: 12px; font-weight: 400; color: var(--text3); display: flex; align-items: center; gap: 6px; }
.qe-lines-hdr select, .qe-add select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; background: var(--cream); color: var(--text); }
.qe-table { width: 100%; border-collapse: collapse; }
.qe-table th { font-size: 11px; font-weight: 600; color: var(--text3); text-align: left; padding: 4px 4px; }
.qe-table td { padding: 3px 4px; vertical-align: middle; }
.qe-table input, .qe-table select { width: 100%; box-sizing: border-box; padding: 7px 8px; border: 1px solid var(--border); border-radius: 7px; font-size: 13px; background: var(--cream); color: var(--text); }
.qe-table .qe-num { width: 82px; }
.qe-table .qe-vat { width: 78px; }
.qe-table .qe-sum { width: 86px; text-align: right; font-size: 13px; white-space: nowrap; }
.qe-table .qe-btns { width: 92px; }
.qe-table .qe-btns .tk-actions { justify-content: flex-end; }
.qe-table .qe-free-tag { font-size: 10px; color: var(--text3); }
.qe-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.qe-add button { padding: 7px 12px; font-size: 12px; }
.qe-foot { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-top: 12px; }
#qe-totals { min-width: 240px; font-size: 13px; }
#qe-totals .qe-trow { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
#qe-totals .qe-grand { font-weight: 700; font-size: 15px; border-top: 2px solid var(--text); margin-top: 4px; padding-top: 4px; }
#quote-preview-body { overflow-y: auto; padding: 24px; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; font-size: 13px; background: #fff; color: #111; }
#quote-preview-footer { padding: 14px 18px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border); }
.inv-doc .inv-intro { margin: -6px 0 18px; font-size: 12px; white-space: pre-line; }
.inv-doc .inv-terms { margin-top: 16px; font-size: 11px; color: #444; white-space: pre-line; }
.q-summary-card { flex: 1 1 140px; background: var(--cream); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.q-summary-card .q-sv { font-size: 16px; font-weight: 700; }
.q-summary-card .q-sl { font-size: 11px; color: var(--text3); }
.q-status { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.q-status.draft { background: var(--warm); color: var(--text2); }
.q-status.sent { background: var(--blue-bg); color: var(--blue-fg); }
.q-status.accepted { background: var(--green-bg); color: var(--green); }
.q-status.declined { background: var(--red-bg); color: var(--red); }
.q-status.converted { background: #ede7f6; color: #4527a0; }
.q-status.expired { background: #fff3e0; color: #7a4500; }
.q-status-select { padding: 5px 6px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; background: var(--cream); color: var(--text); }
html[data-theme="dark"] #quote-editor-box, html[data-theme="dark"] #quote-po-box, html[data-theme="dark"] #quote-preview-box { background: #23272f; }

/* Bestelbon-preview overlay (👁️ in Bestellingen). Mirrors the invoice preview
   but sized for a narrow ticket; always paper-light so it reads like a printed
   slip regardless of the app theme. */
#bon-preview-overlay {
  display: none; position: fixed; inset: 0;
  /* 140 = boven #customer-orders-overlay (130): de 👁️-preview kan nu vanuit het
     klant-bestellingenoverzicht geopend worden en moet er dan bovenop komen, niet
     erachter. Blijft onder de auth-overlays (pin/admin = 200). */
  background: rgba(0,0,0,.5); z-index: 140;
  align-items: center; justify-content: center; padding: 20px;
}
#bon-preview-overlay.show { display: flex; }
/* Bladerknoppen (◀ Vorige bon / Volgende bon ▶): duidelijk uitgegrijsd op de
   eerste/laatste bon — zelfde stijl als de kassabon-recall-nav. */
#bon-preview-prev:disabled, #bon-preview-next:disabled { opacity: .4; cursor: default; }
#bon-preview-box { background: #fff; border-radius: 16px; width: 100%; max-width: 380px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
#bon-preview-hdr { background: var(--navy); color: #fff; padding: 14px 18px; font-size: 15px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
#bon-preview-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; opacity: .8; }
#bon-preview-close:hover { opacity: 1; }
#bon-preview-body { overflow-y: auto; padding: 20px; background: #efe8db; color: #111;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
#bon-preview-body .ticket-body { background: #fff; color: #111; padding: 16px 14px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
#bon-preview-footer { padding: 14px 18px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border); }

/* Live preview inside the invoice-layout designer (Instellingen → Factuur-indeling).
   Always light like a printed page, regardless of the app theme. */
#invoice-designer-preview {
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #111;
  padding: 16px; max-height: 560px; overflow: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
}

/* ── Prominent "Instellingen opslaan" button ──
   Deliberately loud (green, big) and in its own panel so it reads as THE save
   action for the settings tab, not one control buried inside Betalingen. */
.save-settings-btn {
  width: 100%; padding: 16px; border-radius: var(--radius); border: none;
  background: var(--green); color: #fff; font-size: 16px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 2px 10px rgba(45,122,79,.35); transition: opacity .12s, transform .1s;
}
.save-settings-btn:active { opacity: .88; transform: scale(.99); }
#sec-opslaan { border-color: var(--green); }

/* ═══════════════════════════════════════════════════════════════════
   Dark mode ("Donkere modus" — Instellingen → Weergave)
   Toggled by html[data-theme="dark"]. The palette is driven through the
   existing CSS variables; the block below only has to re-point the handful
   of surfaces and dividers that were hardcoded to white / near-white.
   The klant-app loads this same stylesheet but never sets the attribute,
   so it is unaffected.
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  /* Tells the browser to render everything it draws itself — unstyled inputs,
     time/date pickers, scrollbars — in its dark palette. Without this, a
     control the stylesheet never gave a background to keeps a white UA
     default, which is a glaring white box on a dark screen (and unreadable
     once its text colour follows the theme). */
  color-scheme: dark;
  --navy:    #12233c;
  --navy2:   #0d1b30;
  --cream:   #15171c;
  --warm:    #1f232b;
  --border:  #333a45;
  --text:    #e9e9ec;
  --text2:   #b7bcc6;
  --text3:   #868d99;
  --green-bg:#12351f;
  /* The light-mode red (#c0392b) only reaches ~2.8:1 on these dark surfaces,
     which is what made "Verkeerde PIN", "Bestelling wissen" and the C-key hard
     to read. Same hue, lifted until it passes. */
  --red:     #ff7a6b;
  --red-bg:  #3a1a16;
  --blue-bg: #17273f;
  --blue-fg: #7fb2f6;
  --shadow:  0 1px 3px rgba(0,0,0,.45);
}
/* Card / panel / modal surfaces that were literal #fff */
html[data-theme="dark"] .item-btn,
html[data-theme="dark"] .cat-btn,
html[data-theme="dark"] #right,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .sub-tab,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .emoji-opt,
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field select,
html[data-theme="dark"] #qty-display,
html[data-theme="dark"] .qty-key,
html[data-theme="dark"] .quick-amount-btn,
html[data-theme="dark"] #modal,
html[data-theme="dark"] #qr-box,
html[data-theme="dark"] #edit-modal,
html[data-theme="dark"] #pin-box,
html[data-theme="dark"] #admin-box,
html[data-theme="dark"] #preorder-box,
html[data-theme="dark"] #dayclose-box,
html[data-theme="dark"] #omzet-box,
html[data-theme="dark"] #payconfirm-box,
html[data-theme="dark"] #discount-box,
html[data-theme="dark"] #weight-box,
html[data-theme="dark"] #msg-receipts-box,
html[data-theme="dark"] #customer-orders-box,
html[data-theme="dark"] #sale-customer-box,
html[data-theme="dark"] #invoice-box { background: #23272f; }
/* Faint cream dividers (#f5f0ea) hardcoded on list rows */
html[data-theme="dark"] .order-row,
html[data-theme="dark"] .panel-row,
html[data-theme="dark"] .rpt-row,
html[data-theme="dark"] .top-row,
html[data-theme="dark"] .setting-row,
html[data-theme="dark"] .prod-row,
html[data-theme="dark"] .cat-row { border-bottom-color: var(--border); }
/* Admin danger button reads as a bright card on light; darken it */
html[data-theme="dark"] .admin-danger-btn { background: #2c1512; border-color: #5a2b26; }
html[data-theme="dark"] .admin-danger-btn:hover { background: #3a1a16; }

/* ── Barcode scanner (js/scanner.js) ─────────────────────────────── */
#scan-overlay { position: fixed; inset: 0; z-index: 900; display: none; flex-direction: column;
  background: #0d0f13; color: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#scan-overlay.show { display: flex; }
body.scan-open { overflow: hidden; }
/* Verkoop-scanvenster (Scanner.open met dock; Instellingen → Weergave → Scanvenster):
   een venster dat de winkelmand vrij laat. Plaats en breedte zet scanner.js inline. */
#scan-overlay.scan-win { border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.45); }
#scan-overlay.scan-float { top: auto; left: auto; max-height: calc(100vh - 16px); }
#scan-overlay.scan-float .scan-stage { height: min(30vh, 200px); }
/* Gsm rechtop: camera bovenaan, de winkelmand vast onderaan (scanner.js zet .scan-pinned). */
#scan-overlay.scan-sheet { bottom: 48vh; }
#scan-overlay.scan-sheet .scan-stage { height: 24vh; }
#right.scan-pinned { position: fixed; left: 0; right: 0; bottom: 0; height: 48vh; z-index: 901; max-height: none;
  border-top: 2px solid var(--navy); box-shadow: 0 -8px 24px rgba(0,0,0,.25); }
#right.scan-pinned #pay-area { display: none; }
#right.scan-pinned #order-lines { max-height: none; }
/* Een gescande regel licht even op in de winkelmand. */
.order-row.flash { animation: order-flash 1.4s ease-out; }
@keyframes order-flash {
  0%, 40% { background: var(--green-bg); box-shadow: inset 4px 0 0 var(--green); }
  100%    { background: transparent;     box-shadow: inset 4px 0 0 transparent; }
}
.scan-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
#scan-title { flex: 1; font-weight: 600; font-size: 15px; }
.scan-btn { background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 8px; padding: 9px 13px; font-size: 15px; cursor: pointer; }
.scan-stage { position: relative; flex: 0 0 auto; height: min(46vh, 420px); background: #000; overflow: hidden; }
#scan-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; left: 10%; right: 10%; top: 30%; bottom: 30%; border: 2px solid rgba(255,255,255,.85);
  border-radius: 10px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); pointer-events: none; }
.scan-line { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: #ff5a4e; opacity: .85; }
.scan-msg { position: absolute; left: 12px; right: 12px; bottom: 12px; text-align: center; font-size: 13px;
  background: rgba(0,0,0,.6); padding: 8px 10px; border-radius: 8px; }
.scan-manual { display: flex; gap: 8px; padding: 10px 12px; }
/* Bluetooth-/USB-scanner (Scanner.setMode('wedge')): geen camerabeeld, enkel de melding. */
#scan-overlay.scan-wedge .scan-stage { height: auto; background: transparent; padding: 14px 12px 2px; }
#scan-overlay.scan-wedge #scan-video,
#scan-overlay.scan-wedge .scan-frame { display: none; }
#scan-overlay.scan-wedge .scan-msg { position: static; font-size: 15px; padding: 22px 14px; background: rgba(255,255,255,.08); }
.scan-manual input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid #3a3f49;
  background: #1a1d23; color: #fff; font-size: 16px; }
.scan-slot { padding: 0 12px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.scan-card { background: var(--cream); color: var(--text); border-radius: 12px; padding: 14px; margin-top: 4px; }
.scan-card h4 { margin: 0 0 4px; font-size: 16px; }
.scan-card .sc-sub { font-size: 12px; color: var(--text3); margin-bottom: 10px; }
.scan-card .sc-row { display: flex; gap: 10px; align-items: center; }
.scan-card .sc-img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--border); }
.scan-card .sc-qty { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.scan-card .sc-qty input { width: 110px; text-align: center; font-size: 22px; padding: 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--warm); color: var(--text); }
.scan-card .sc-qty button { width: 46px; height: 46px; font-size: 22px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--warm); color: var(--text); cursor: pointer; }
.scan-card .sc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.scan-card .sc-actions button { flex: 1; min-width: 130px; padding: 12px; }
.scan-card .sc-src { font-size: 11px; color: var(--text3); margin-top: 8px; }
.scan-card .sc-list { max-height: 180px; overflow-y: auto; margin-top: 8px; }
.scan-card .sc-list button { display: block; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--border);
  background: none; color: var(--text); font-size: 14px; cursor: pointer; }
.scan-log { margin-top: 10px; font-size: 13px; color: #cfd3da; }
.scan-log div { padding: 5px 0; border-bottom: 1px solid #262a31; display: flex; justify-content: space-between; gap: 8px; }
body.scan-open #toast { z-index: 950; }