/*
 * GastroCore Demo-Kasse – Fast-Food (Fast Sale) mode.
 * Colours, sizes and fonts follow the real till (UI-SPEC sections 1-5). All values are on the
 * 1280 x 800 till canvas; demo.js scales that canvas as a whole ("fixed" layout, >= 900 px wide)
 * or switches to a stacked phone layout (< 900 px wide).
 * Change the look: edit the tokens in :root. No external fonts, images or libraries.
 */

:root {
  /* Fast-Food screen (fixed palette of the till, POS 549+) */
  --ff-bg: #243044;
  --ff-surface: #33415A;
  --ff-surface2: #3D4C67;
  --ff-line: #52627E;
  --ff-text: #F4F7FB;
  --ff-muted: #B4C2D6;
  --ff-blue: #2563EB;
  --ff-red: #DC2626;
  --ff-selected: #E11D48;
  --ff-brand: #F97316;
  --ff-ok: #22C55E;
  --ff-warn: #F59E0B;
  --ff-hint: #0B1220;
  /* tender colours as r,g,b so the disabled state can use 35 % alpha */
  --rgb-card: 22, 163, 74;     /* Karte  #16A34A */
  --rgb-cash: 180, 83, 9;      /* Bar    #B45309 */
  --rgb-split: 61, 76, 103;    /* Geteilt #3D4C67 */
  --ff-radius: 10px;
  --ff-radius-card: 12px;
  --tile-radius: 8px;

  /* App theme "Hell" (default theme of the till: options panel, dialogs, toast) */
  --primary: #3841E9;
  --on-primary: #F3F1FF;
  --surface: #F4F6F8;
  --on-surface: #1A2027;
  --on-surface-variant: #667085;
  --sc-low: #F1F3F6;
  --sc: #EAEDF1;
  --sc-high: #E2E6EB;
  --sc-highest: #DADFE6;
  --outline: #C3C9D2;
  --outline-variant: #E2E6EC;
  --error: #B41340;
  --success: #17924A;
  --on-success: #FFFFFF;
  --success-container: #D6F1E0;
  --warning: #B76E0A;
  --warning-container: #FBE9C8;
  --danger: #C62233;
  --on-danger: #FFFFFF;
  --accent: #3B49E0;
  --info: #0E77BE;
  --hairline: rgba(26, 37, 64, .12);
  --surface-raised: #FFFFFF;
  --elev6: #E0E3F6;
  --elev8: #DEE1F6;
  --scrim: rgba(0, 0, 0, .6);
  --print-orange: #F58220;
  --print-button: #AD4800;

  /* Bill rows use the till's "Dunkel" row colours for legibility (UI-SPEC D1) */
  --row-text: #E6E9EF;
  --row-muted: #9AA4B4;
  --row-extras: #FF8A8A;
  --row-status: #F2B44C;
  --row-selected: #1F2733;
  --row-hairline: rgba(255, 255, 255, .12);

  /* Website frame around the till */
  --bar-bg: #0B1220;
  --bar-h: 44px;
  --focus: #FACC15;
  --focus-light: #1D4ED8;

  --font: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "DejaVu Sans Mono", Consolas, "Courier New", monospace;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--ff-bg);
  color: var(--ff-text);
  font-family: var(--font);
  font-weight: 600;
  line-height: 1.25;
}
html.is-fixed, html.is-fixed body { height: 100%; overflow: hidden; }
html.is-locked, html.is-locked body { overflow: hidden; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:disabled, button[aria-disabled="true"] { cursor: default; }
svg { display: block; flex: none; fill: currentColor; }
[hidden] { display: none !important; }
p, h1, h2, h3, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.noscript { padding: 24px; text-align: center; }

/* Focus: always visible for keyboard users */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.light :focus-visible, .opts :focus-visible { outline-color: var(--focus-light); }
.grid .tile:focus-visible, .cats .cat:focus-visible, .bill :focus-visible, .og :focus-visible, .numpad .key:focus-visible, .tenders .tender:focus-visible { outline-offset: -4px; }

/* Press feedback (the till uses a ripple, no hover) */
.till button:not(:disabled):not([aria-disabled="true"]):active { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .12); }
.till .light button:not(:disabled):not([aria-disabled="true"]):active,
.till .opts button:not(:disabled):not([aria-disabled="true"]):active { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .08); }
@media (hover: hover) {
  .till button:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: inset 0 0 0 999px rgba(255, 255, 255, .05); }
  .till .light button:not(:disabled):not([aria-disabled="true"]):hover,
  .till .opts button:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .04); }
}

/* ------------------------------------------------------------------ website frame */
.app { display: flex; flex-direction: column; }
.app.is-fixed { height: 100vh; height: 100dvh; }
.bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--bar-h);
  padding: 6px 12px;
  background: var(--bar-bg);
  color: var(--ff-text);
  font-size: 13px;
  border-bottom: 1px solid var(--ff-line);
}
.bar[inert] { opacity: .55; }
.bar-ribbon { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.bar-badge {
  flex: none;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--ff-warn);
  color: #0B1220;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .8px;
}
.bar-long, .bar-short { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-short { display: none; }
.bar-switches { display: flex; gap: 8px; flex: none; }
.seg { display: inline-flex; border: 1px solid var(--ff-line); border-radius: 8px; overflow: hidden; }
.seg button {
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ff-muted);
  background: transparent;
}
.seg button + button { border-left: 1px solid var(--ff-line); }
.seg button[aria-pressed="true"] { background: var(--ff-text); color: var(--bar-bg); }
.seg button:focus-visible { outline-offset: -3px; }
.narrow-hint { display: none; }
.stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: var(--ff-bg); }

/* ------------------------------------------------------------------ till canvas (fixed 1280 x 800) */
.till {
  position: absolute;
  left: 0;
  top: 0;
  width: 1280px;
  height: 800px;
  transform-origin: 0 0;
  background: var(--ff-bg);
  color: var(--ff-text);
  font-size: 14px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  color-scheme: dark;
  overflow: hidden;
}
.area { position: absolute; }
#brand   { left: 8px;   top: 8px;   width: 156px; height: 64px; }
#cats    { left: 8px;   top: 80px;  width: 156px; height: 712px; }
#hdr     { left: 172px; top: 8px;   width: 756px; height: 56px; }
#main    { left: 172px; top: 72px;  width: 756px; height: 720px; }
#rtop    { left: 936px; top: 8px;   width: 336px; height: 56px; }
#bill    { left: 936px; top: 72px;  width: 336px; height: 352px; }
#entryRow{ left: 936px; top: 432px; width: 336px; height: 56px; }
#numpad  { left: 936px; top: 496px; width: 210px; height: 296px; }
#tenders { left: 1154px; top: 496px; width: 118px; height: 296px; }

/* brand card */
.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 10px;
  border-radius: var(--ff-radius-card);
  background: var(--ff-brand);
  color: #fff;
  text-align: left;
}
.brand-name { font-size: 18px; font-weight: 900; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.brand-sub { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; color: rgba(255, 255, 255, .85); }

/* category rail */
.cats { overflow-y: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats ul { display: flex; flex-direction: column; gap: 8px; }
.cat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  padding: 0 6px;
  border-radius: var(--ff-radius-card);
  background: var(--ff-surface);
  border: 1px solid var(--ff-line);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
}
.cat-label { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat[aria-pressed="true"] { background: var(--ff-selected); border-color: var(--ff-selected); }

/* header row: search + icon tiles */
.hdr { display: flex; gap: 8px; align-items: stretch; }
.search {
  position: relative;
  flex: 1 1 auto;
  min-width: 140px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: var(--ff-radius);
  background: var(--ff-surface);
  color: var(--ff-muted);
}
.search:focus-within { box-shadow: 0 0 0 2px var(--ff-muted); }
.search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ff-text);
  font-size: 17px;
  font-weight: 400;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
}
.search input::placeholder { color: var(--ff-muted); font-weight: 600; opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-x { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: -8px; border-radius: 8px; color: var(--ff-muted); }
.tiles { display: flex; gap: 8px; flex: none; position: relative; }
.itile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 56px;
  height: 56px;
  border-radius: var(--ff-radius);
  background: var(--ff-surface);
  border: 1px solid var(--ff-line);
  color: var(--ff-text);
}
.itile:disabled, .itile[aria-disabled="true"] { background: rgba(51, 65, 90, .5); color: var(--ff-muted); }
.itile-cap { font-size: 11px; font-weight: 700; line-height: 12px; text-align: center; white-space: nowrap; }
.itile.tse { width: 48px; color: var(--ff-muted); border-color: rgba(180, 194, 214, .7); }
.bubble, .tse-pop {
  position: absolute;
  top: 62px;
  z-index: 30;
  border: 1px solid var(--ff-line);
  color: var(--ff-text);
  pointer-events: none;
}
.bubble {
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ff-hint);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.tse-pop {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 220px;
  max-width: 380px;
  padding: 14px;
  border-radius: 12px;
  background: var(--ff-surface2);
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.tse-pop-title { font-size: 16px; font-weight: 700; }
.tse-pop-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.tse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ff-muted); flex: none; }

/* product grid */
.main { overflow: hidden; }
.grid {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  grid-auto-rows: var(--row-h, 232px);
  gap: 8px;
  padding-bottom: 8px;
  overflow-y: auto;
  align-content: start;
  scrollbar-width: thin;
}
.tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px;
  border-radius: var(--tile-radius);
  background: var(--tile-bg, #3D4C67);
  color: var(--tile-fg, #fff);
}
.tile-name {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tile-name-in {
  display: block;
  max-width: 100%;
  font-weight: 700;
  line-height: 1.12;
  text-align: center;
  overflow-wrap: normal;
  hyphens: manual;
}
.tile-name-in.brk { overflow-wrap: anywhere; }
.tile-price { flex: none; margin-top: 2px; font-weight: 700; line-height: 1.15; text-align: center; white-space: nowrap; }
.grid-empty { grid-column: 1 / -1; padding: 40px 12px; text-align: center; color: var(--ff-muted); font-size: 16px; }

/* right column: order type, Aktion, trash */
.rtop { display: flex; gap: 8px; }
.otype {
  flex: 0 0 168px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 10px;
  border-radius: var(--ff-radius);
  background: var(--ff-surface);
  border: 1px solid var(--ff-line);
  color: var(--ff-text);
  text-align: left;
  min-width: 0;
}
.otype-text { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.otype svg { color: var(--ff-muted); }
.aktion { flex: 0 0 96px; border-radius: var(--ff-radius); background: var(--ff-blue); color: #fff; font-size: 16px; font-weight: 700; }
.trash { flex: 0 0 56px; display: flex; align-items: center; justify-content: center; border-radius: var(--ff-radius); background: var(--ff-red); color: #fff; }

/* bill panel */
.bill {
  display: flex;
  flex-direction: column;
  border-radius: var(--ff-radius);
  background: var(--ff-surface);
  border: 1px solid var(--ff-line);
  overflow: hidden;
}
.bill-list { flex: 1 1 auto; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin; }
.bill-empty { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; color: var(--ff-muted); font-size: 16px; padding: 12px; text-align: center; }
.line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 56px;
  padding: 4px 6px 4px 11px;
  border-radius: 6px;
  color: var(--row-text);
  box-shadow: inset 0 -1px 0 var(--row-hairline);
  flex: none;
}
.line.is-selected { background: var(--row-selected); }
.line-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 6px 0 0 6px; background: var(--row-status); }
.line-sel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  align-self: stretch;
  text-align: left;
  color: inherit;
  border-radius: 4px;
}
.line-qty { flex: 0 0 40px; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.line-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-right: 4px; }
.line-name { font-size: 15px; font-weight: 600; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.line-extras { font-size: 14px; font-weight: 700; line-height: 16px; color: var(--row-extras); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-note { font-size: 11px; font-weight: 600; color: var(--row-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-price { flex: none; padding-right: 4px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.line-btn { flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 24px; color: var(--row-text); }
.line-btn + .line-btn { margin-left: 8px; }

/* entry + total */
.entryrow { display: flex; align-items: center; gap: 8px; }
.entry {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: var(--ff-radius);
  background: var(--ff-surface);
  border: 1px solid var(--ff-line);
  text-align: left;
}
.entry:disabled { cursor: default; }
.entry-hint { color: var(--ff-muted); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.entry-val { flex: 1 1 auto; color: var(--ff-text); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.entry-cl { color: var(--ff-muted); font-size: 13px; font-weight: 700; }
.total { flex: none; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.total-l { color: var(--ff-muted); font-size: 15px; font-weight: 500; }
.total-cur { color: var(--ff-muted); font-size: 13px; font-weight: 700; }
.total-amt { color: var(--ff-text); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* numpad */
.numpad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px; }
.key {
  border-radius: var(--ff-radius);
  background: var(--ff-surface);
  border: 1px solid var(--ff-line);
  color: var(--ff-text);
  font-size: 24px;
  font-weight: 500;
}

/* tenders */
.tenders { display: flex; flex-direction: column; gap: 8px; }
.tender {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 4px 6px;
  border-radius: var(--ff-radius);
  color: #fff;
  background: rgb(var(--t-rgb));
}
.tender:disabled { background: rgba(var(--t-rgb), .35); }
.t-card { --t-rgb: var(--rgb-card); }
.t-cash { --t-rgb: var(--rgb-cash); }
.t-split { --t-rgb: var(--rgb-split); }
.tender-name { font-size: 16px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.tender-amt { font-size: 13px; font-weight: 600; line-height: 15px; color: rgba(255, 255, 255, .9); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ options panel "Varianten und Extras" */
.opts {
  position: absolute;
  inset: 0 0 8px 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--sc-low);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
  overflow: hidden;
  color-scheme: light;
}
.opts-head, .opts-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--sc-high); }
.opts-title { flex: 1 1 auto; min-width: 0; }
.opts-title h2 { font-size: 24px; font-weight: 700; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opts-sub { font-size: 14px; color: var(--on-surface-variant); }
.opts-unit { flex: none; font-size: 24px; font-weight: 700; color: var(--success); font-variant-numeric: tabular-nums; white-space: nowrap; }
.opts-close { flex: none; height: 52px; min-width: 120px; padding: 0 16px; border-radius: 10px; background: var(--danger); color: var(--on-danger); font-size: 18px; font-weight: 700; }
.opts-body { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.og-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.og-title { font-size: 22px; font-weight: 700; }
.og-rule { font-size: 15px; color: var(--on-surface-variant); }
.og-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(101px, 1fr)); gap: 10px; }
.og-tiles.is-variants { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ot {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 86px;
  border-radius: 10px;
  background: var(--sc-high);
  border: 1px solid var(--outline-variant);
  color: var(--on-surface);
  overflow: hidden;
}
.ot.is-on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.ot.is-off { opacity: .45; }
.ot-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px;
  color: inherit;
  border-radius: 10px;
}
.ot-name { font-size: 14px; font-weight: 600; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ot-price { font-size: 14px; font-weight: 700; opacity: .85; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vt .ot-name { font-size: 18px; font-weight: 700; line-height: 22px; }
.vt .ot-price { font-weight: 600; opacity: 1; color: var(--on-surface-variant); }
.vt.is-on .ot-price { color: var(--on-primary); }
.ot-step { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 0 6px 8px; margin-top: -4px; }
.ot-step button { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(243, 241, 255, .22); color: var(--on-primary); }
.ot-step button:disabled { opacity: .4; }
.ot-qty { min-width: 24px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.note-field { display: flex; flex-direction: column; gap: 4px; }
.note-field span { font-size: 13px; color: var(--on-surface-variant); }
.note-field input {
  height: 56px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid var(--outline);
  background: transparent;
  color: var(--on-surface);
  font-size: 16px;
  font-weight: 400;
  -webkit-user-select: text;
  user-select: text;
}
.note-field input:focus { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); outline: none; }
.pill { height: 46px; min-width: 72px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--outline); color: var(--primary); font-size: 20px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pill:disabled { color: rgba(26, 32, 39, .38); border-color: rgba(26, 32, 39, .12); }
.opts-qty { font-size: 20px; font-weight: 700; min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.spacer { flex: 1 1 auto; }
.opts-total-l { color: var(--on-surface-variant); }
.opts-total { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opts-add { height: 46px; min-width: 170px; padding: 0 24px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 16px; font-weight: 700; }
.opts-add:disabled { background: rgba(26, 32, 39, .12); color: rgba(26, 32, 39, .38); }

/* ------------------------------------------------------------------ dialogs */
.layer { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; }
.scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade .18s ease-out; }
.dlg { position: relative; z-index: 1; color: var(--on-surface); color-scheme: light; animation: fade .18s ease-out; max-height: calc(100% - 24px); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.xbtn {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--outline-variant);
  background: var(--surface);
  color: var(--on-surface);
}
.xbtn:disabled { opacity: .38; }
.mbtn { min-height: 40px; padding: 8px 24px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .8px; color: var(--primary); }
.mbtn-filled { background: var(--primary); color: var(--on-primary); }
.mbtn-error { background: var(--error); color: var(--on-primary); }
.mbtn-text { background: transparent; padding: 8px 12px; }

/* PosAlertDialog */
.alert { width: min(520px, calc(100% - 32px)); min-width: 280px; display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: 28px; background: var(--sc-high); overflow: auto; }
.alert-head { display: flex; align-items: flex-start; gap: 12px; }
.alert-title { flex: 1 1 auto; font-size: 24px; font-weight: 400; line-height: 32px; padding-top: 6px; }
.alert-sub { font-size: 14px; color: var(--on-surface-variant); }
.alert-body { font-size: 14px; color: var(--on-surface-variant); display: flex; flex-direction: column; gap: 8px; }
.alert-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.del-item { font-size: 14px; font-weight: 700; letter-spacing: .6px; color: var(--on-surface); }
.del-opt { font-size: 14px; color: var(--on-surface-variant); padding-left: 12px; }

/* order mode */
.mode-list { display: flex; flex-direction: column; gap: 8px; }
.mode-row { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 12px; border-radius: 8px; background: var(--sc-high); border: 1px solid var(--outline-variant); color: var(--on-surface); font-size: 16px; text-align: left; }
.alert .mode-row { background: var(--surface); }
.mode-row span:first-child { flex: 1 1 auto; }
.mode-row[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.vat-pill { flex: none; padding: 5px 12px; border-radius: 8px; font-size: 22px; font-weight: 800; color: var(--info); background: rgba(14, 119, 190, .18); line-height: 1; }
.mode-row[aria-pressed="true"] .vat-pill { color: var(--on-primary); background: rgba(243, 241, 255, .22); }

/* cash dialog "Barzahlung" */
.cash { width: 720px; height: 560px; max-width: calc(100% - 16px); display: flex; flex-direction: column; padding: 16px; border-radius: 12px; background: var(--elev6); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.cash-head { flex: none; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cash-title { font-size: 22px; font-weight: 700; }
.demo-chip { padding: 2px 8px; border-radius: 6px; background: var(--warning-container); color: var(--warning); font-size: 12px; font-weight: 700; white-space: nowrap; }
.cash-head .spacer { flex: 1 1 auto; }
.cash-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 52px minmax(0, 1fr) 56px;
  grid-template-areas: "notes sum" "notes amt" "notes keys" "exact acts";
  column-gap: 16px;
  row-gap: 8px;
}
.notes { grid-area: notes; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
.note-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; border-radius: 8px; color: #fff; background: var(--note-bg, #52606D); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.note-btn svg { color: rgba(255, 255, 255, .85); }
.exact { grid-area: exact; border-radius: 8px; background: rgba(23, 146, 74, .14); border: 1px solid rgba(23, 146, 74, .5); color: var(--success); font-size: 18px; font-weight: 700; }
.sum { grid-area: sum; display: flex; flex-direction: column; gap: 4px; }
.sum-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sum-l { font-size: 17px; color: var(--on-surface-variant); }
.chip { padding: 4px 16px; border-radius: 6px; background: var(--sc-high); color: var(--on-surface); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip.is-change { background: rgba(23, 146, 74, .16); color: var(--success); }
.amount { grid-area: amt; display: flex; align-items: center; justify-content: flex-end; padding: 0 16px; border-radius: 8px; background: var(--sc-high); border: 1px solid var(--hairline); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; }
.ckeys { grid-area: keys; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ckey { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--surface-raised); border: 1px solid var(--hairline); color: var(--on-surface); font-size: 24px; font-weight: 600; }
.cacts { grid-area: acts; display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.c-btn { border-radius: 8px; background: var(--danger); color: var(--on-danger); font-size: 24px; font-weight: 700; }
.ok-btn { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--success); color: var(--on-success); }
.ok-btn:disabled { background: var(--sc-highest); color: rgba(26, 32, 39, .38); }

/* card terminal overlay (TerminalPaymentOverlay) */
.term { width: 560px; max-width: calc(100% - 16px); display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px; border-radius: 12px; background: var(--surface); border: 1px solid var(--hairline); text-align: center; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); overflow: auto; }
.term-top { align-self: stretch; display: flex; justify-content: flex-end; margin: -12px -12px -40px 0; }
.term-busy, .term-done { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.term-busy .progress { align-self: stretch; }
.term-circle { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--c); background: rgba(var(--c-rgb), .15); }
.term-circle.is-busy { --c: var(--accent); --c-rgb: 59, 73, 224; animation: pulse .75s linear infinite alternate; }
.term-circle.is-ok { --c: var(--success); --c-rgb: 23, 146, 74; }
.term-circle.is-bad { --c: var(--danger); --c-rgb: 198, 34, 51; }
@keyframes pulse { from { transform: scale(.92); opacity: .55; } to { transform: scale(1.12); opacity: 1; } }
.term-title { font-size: 13px; font-weight: 500; color: var(--on-surface-variant); }
.term-amt { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.term-demo { font-size: 13px; font-weight: 600; color: var(--warning); }
.progress { position: relative; align-self: stretch; height: 4px; border-radius: 2px; background: rgba(59, 73, 224, .2); overflow: hidden; }
.progress::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--accent); border-radius: 2px; animation: indet 1.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes indet { 0% { left: -40%; } 60% { left: 100%; } 100% { left: 100%; } }
.term-hint { font-size: 15px; font-weight: 600; min-height: 38px; display: flex; align-items: center; justify-content: center; }
.term-small { font-size: 12px; color: var(--on-surface-variant); }
.term-cancel { align-self: stretch; height: 44px; border-radius: 8px; border: 1px solid var(--hairline); color: var(--danger); font-weight: 700; }
.term-sim { font-size: 13px; color: var(--accent); text-decoration: underline; padding: 6px 8px; border-radius: 6px; }
.term-ok { font-size: 18px; font-weight: 700; color: var(--success); }
.term-q { font-size: 14px; }
.term-btns { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.term-btns button { height: 48px; border-radius: 8px; font-size: 15px; font-weight: 700; }
.btn-outline { border: 1px solid var(--outline); color: var(--on-surface); background: transparent; }
.btn-success { background: var(--success); color: var(--on-success); }

/* declined: "Zahlung nicht erfolgt" */
.declined { text-align: center; align-items: stretch; }
.declined-glyph { font-size: 72px; font-weight: 900; line-height: 1; color: var(--danger); }
.declined-title { font-size: 26px; font-weight: 900; color: var(--danger); }
.declined-body { font-size: 17px; color: var(--on-surface); }
.retry { height: 56px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-size: 18px; font-weight: 700; }

/* "Beleg drucken?" */
.rq { width: 520px; max-width: calc(100% - 40px); display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; border-radius: 24px; background: var(--surface); text-align: center; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.rq-top { align-self: stretch; display: flex; justify-content: flex-end; margin-bottom: -60px; }
.rq-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--print-orange); background: rgba(245, 130, 32, .12); }
.rq-title { font-size: 24px; font-weight: 700; }
.rq-msg { color: var(--on-surface-variant); font-size: 15px; }
.rq-btns { align-self: stretch; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rq-btns button { min-height: 56px; border-radius: 12px; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.rq-no { background: var(--sc-high); color: var(--on-surface); }
.rq-print { background: var(--print-button); color: #fff; }

/* receipt preview (demo paper) */
.rcpt { width: 560px; max-width: calc(100% - 16px); max-height: calc(100% - 24px); display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: var(--sc-high); box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.rcpt-head { display: flex; align-items: center; gap: 12px; }
.rcpt-title { flex: 1 1 auto; font-size: 20px; font-weight: 700; }
.rcpt-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 4px 4px 16px; }
.paper {
  flex: none;
  width: calc(var(--cols, 48) * 1ch + 24px);
  padding: 16px 12px 20px;
  background: #FFFFFF;
  color: #111111;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  -webkit-user-select: text;
  user-select: text;
  position: relative;
}
.paper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 8px;
  background: linear-gradient(-45deg, transparent 6px, #fff 6px) 0 0 / 12px 8px repeat-x, linear-gradient(45deg, transparent 6px, #fff 6px) 0 0 / 12px 8px repeat-x;
}
.pl { white-space: pre; min-height: 1.3em; }
.pl.b { font-weight: 700; }
.pl.c { text-align: center; }
.pl.small { font-size: 11px; }
.pl.tall { padding-top: 1.3em; }
.dbl { display: inline-block; transform: scaleY(2); transform-origin: bottom; }
.rcpt-foot { display: flex; justify-content: flex-end; gap: 8px; }
.rcpt-foot .mbtn-filled { min-height: 48px; padding: 8px 28px; font-size: 15px; }

/* Aktion sheet */
.sheet { width: 794px; max-width: calc(100% - 16px); display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: rgba(222, 225, 246, .98); border: 1px solid var(--hairline); overflow: auto; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); }
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-head .sp48 { width: 48px; flex: none; }
.sheet-title { flex: 1 1 auto; text-align: center; }
.sheet-title h2 { font-size: 24px; font-weight: 800; }
.sheet-title p { color: var(--on-surface-variant); }
.sheet-row { display: grid; gap: 8px; }
.sheet-row.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sheet-row.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sheet-row.r2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sheet-sec { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--on-surface-variant); }
.sheet-sec::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hairline); }
.atile { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--sc-high); color: var(--on-surface); font-size: 17px; }
.atile.warn { background: var(--warning-container); color: var(--warning); }
.atile.pos { background: var(--success-container); color: var(--success); }

/* Warteliste */
.wl-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto; }
.wl-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--outline-variant); color: var(--on-surface); }
.wl-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wl-info strong { font-size: 16px; }
.wl-info span { font-size: 13px; color: var(--on-surface-variant); }
.wl-foot { font-size: 13px; color: var(--on-surface-variant); }

/* toasts */
.toast-host { position: absolute; left: 0; right: 0; top: 12px; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.toast { pointer-events: none; max-width: 560px; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 8px; background: var(--surface-raised); color: var(--on-surface); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); font-size: 15px; }
.toast-x { pointer-events: auto; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 20px; color: var(--on-surface-variant); }
.systoast-host { position: absolute; left: 0; right: 0; bottom: 48px; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
.systoast { padding: 10px 18px; border-radius: 999px; background: #323232; color: #fff; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }

/* ------------------------------------------------------------------ stacked layout (narrow screens, phones) */
.app.is-stacked .stage { overflow: visible; flex: none; }
.app.is-stacked .bar { flex-wrap: wrap; }
.app.is-stacked .narrow-hint {
  display: block;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--ff-muted);
  background: rgba(11, 18, 32, .55);
}
.is-stacked .till {
  position: relative;
  width: auto;
  height: auto;
  transform: none !important;
  overflow: visible;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "brand rtop"
    "hdr hdr"
    "cats cats"
    "main main"
    "bill bill"
    "entry entry"
    "numpad numpad"
    "tenders tenders";
  gap: 8px;
  padding: 8px 8px 0;
}
.is-stacked #brand, .is-stacked #cats, .is-stacked #hdr, .is-stacked #main, .is-stacked #rtop,
.is-stacked #bill, .is-stacked #entryRow, .is-stacked #numpad, .is-stacked #tenders {
  position: relative; left: auto; top: auto; width: auto; height: auto; min-width: 0;
}
.is-stacked #brand { grid-area: brand; height: 48px; padding: 0 12px; }
.is-stacked .brand-name { font-size: 16px; }
.is-stacked .brand-sub { font-size: 10px; }
.is-stacked #rtop { grid-area: rtop; height: 48px; }
.is-stacked .otype { flex: 1 1 auto; }
.is-stacked .otype-text { font-size: 15px; }
.is-stacked .aktion { flex: 0 0 80px; font-size: 15px; }
.is-stacked .trash { flex: 0 0 48px; }
.is-stacked #hdr { grid-area: hdr; flex-wrap: wrap; gap: 6px; }
.is-stacked .search { flex: 1 1 200px; height: 48px; }
.is-stacked .search input { font-size: 16px; }
.is-stacked .tiles { gap: 6px; margin-left: auto; }
.is-stacked .itile { width: 48px; height: 48px; }
.is-stacked .itile.tse { width: 44px; }
.is-stacked .itile-cap { font-size: 9px; line-height: 10px; }
.is-stacked .bubble, .is-stacked .tse-pop { top: 54px; }
.is-stacked #cats { grid-area: cats; overflow-x: auto; overflow-y: hidden; margin: 0 -8px; padding: 0 8px 2px; scroll-padding: 0 8px; }
.is-stacked .cats ul { flex-direction: row; gap: 8px; }
.is-stacked .cats li { flex: none; }
.is-stacked .cat { width: auto; height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; }
.is-stacked .cat-label { -webkit-line-clamp: 1; }
.is-stacked #main { grid-area: main; overflow: visible; }
.is-stacked .grid { height: auto; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-auto-rows: 116px; padding-bottom: 0; }
.is-stacked #bill { grid-area: bill; min-height: 72px; }
.is-stacked .bill-list { overflow: visible; }
.is-stacked #entryRow { grid-area: entry; height: 52px; }
.is-stacked .entry { height: 52px; }
.is-stacked .total-amt { font-size: 26px; }
.is-stacked #numpad { grid-area: numpad; grid-template-rows: repeat(4, 48px); }
.is-stacked .key { font-size: 22px; }
.is-stacked #tenders {
  grid-area: tenders;
  position: sticky;
  bottom: 0;
  z-index: 20;
  flex-direction: row;
  margin: 0 -8px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--ff-bg);
  box-shadow: 0 -8px 16px rgba(0, 0, 0, .28);
}
.is-stacked .tender { height: 64px; flex: 1 1 0; }
.is-stacked .t-split { flex: .8 1 0; }

/* options panel becomes a full-screen sheet */
.is-stacked .opts { position: fixed; inset: 0; z-index: 45; border-radius: 0; border: 0; }
.is-stacked .opts-head { flex-wrap: wrap; padding: 8px 12px; }
.is-stacked .opts-title h2 { font-size: 20px; line-height: 26px; }
.is-stacked .opts-unit { font-size: 20px; }
.is-stacked .opts-close { height: 44px; min-width: 96px; font-size: 16px; }
.is-stacked .opts-body { padding: 14px 12px; gap: 16px; overscroll-behavior: contain; }
.is-stacked .og-title { font-size: 19px; }
.is-stacked .og-tiles { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.is-stacked .og-tiles.is-variants { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.is-stacked .opts-foot { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
.is-stacked .pill { min-width: 52px; height: 44px; }
.is-stacked .opts-add { min-width: 0; flex: 1 1 100%; height: 48px; }

/* dialogs over the viewport */
.is-stacked .layer { position: fixed; inset: 0; z-index: 70; padding: 8px; }
.is-stacked .dlg { max-height: calc(100% - 8px); overflow: auto; overscroll-behavior: contain; }
.is-stacked .cash { width: 100%; max-width: 480px; height: auto; padding: 12px; }
.is-stacked .cash-head { margin-bottom: 8px; flex-wrap: wrap; row-gap: 6px; }
.is-stacked .cash-head .cash-title { flex: 1 1 auto; }
.is-stacked .cash-head .spacer { display: none; }
.is-stacked .cash-head .demo-chip { order: 3; }
.is-stacked .cash-title { font-size: 20px; }
.is-stacked .cash-body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 48px auto 48px auto 52px;
  grid-template-areas: "sum" "amt" "notes" "exact" "keys" "acts";
}
.is-stacked .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 48px); }
.is-stacked .note-btn { flex-direction: row; font-size: 17px; gap: 6px; padding: 4px; }
.is-stacked .note-btn svg { width: 18px; height: 18px; }
.is-stacked .sum-l { font-size: 15px; }
.is-stacked .chip { font-size: 17px; padding: 2px 12px; }
.is-stacked .amount { font-size: 22px; }
.is-stacked .exact { font-size: 16px; }
.is-stacked .ckeys { grid-template-rows: repeat(4, 46px); }
.is-stacked .ckey { font-size: 21px; }
.is-stacked .term { padding: 20px 16px; }
.is-stacked .rcpt { padding: 12px; }
.is-stacked .paper { font-size: clamp(8px, calc((100vw - 76px) / (var(--cols, 48) * .6)), 13px); }
.is-stacked .alert { padding: 18px; border-radius: 22px; min-width: 0; width: 100%; }
.is-stacked .sheet-row.r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.is-stacked .sheet-row.r3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.is-stacked .atile { font-size: 15px; min-height: 56px; }
.is-stacked .toast-host { position: fixed; top: 8px; padding: 0 12px; z-index: 90; }
.is-stacked .systoast-host { position: fixed; bottom: 96px; z-index: 90; }

@media (max-width: 560px) {
  .bar-long { display: none; }
  .bar-short { display: inline; }
  .bar { gap: 8px; padding: 6px 8px; }
  .seg button { min-width: 40px; padding: 0 8px; }
}
@media (max-width: 380px) {
  .is-stacked #brand { padding: 0 8px; }
  .is-stacked .brand-name { font-size: 14px; }
  .is-stacked .aktion { flex-basis: 66px; font-size: 14px; }
  .is-stacked .otype-text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .scrim, .dlg { animation: none; }
  .term-circle.is-busy { animation-duration: 1.6s; }
  .progress::before { animation-duration: 2.6s; }
}