/* ==========================================================================
 * POS (waiter / cashier). Scoped to .qm-pos*; uses app.css
 * tokens so it matches the dashboard. Two panes: menu browser + order ticket.
 * ========================================================================== */
.qm-pos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 384px);
  gap: 16px;
  height: calc(100vh - 116px);
  min-height: 540px;
}
/* Full-screen focus mode hides the dashboard header/sidebar (body.qm-fullscreen,
 * .qm-dash-body padding 16px), so fill the viewport minus that padding — no
 * bottom white space. */
body.qm-fullscreen .qm-pos { height: calc(100vh - 32px); }
.qm-pos * { box-sizing: border-box; }

/* ---- Left: menu browser ---- */
.qm-pos-menu {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--e-1);
  overflow: hidden;
}
.qm-pos-bar {
  display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line-2); flex-wrap: wrap;
}
.qm-pos-modes { display: inline-flex; background: var(--surface-2); border-radius: var(--r-pill); padding: 4px; gap: 2px; }
.qm-pos-mode {
  border: 0; background: transparent; color: var(--ink-600); font-weight: 600; font-size: var(--fs-400);
  padding: 8px 16px; border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  transition: background var(--t-fast), color var(--t-fast);
}
.qm-pos-mode i { font-size: var(--fs-400); }
.qm-pos-mode.is-active { background: var(--surface); color: var(--qm-primary); box-shadow: 0 2px 6px rgba(78,8,29,.12); }
.qm-pos-search { position: relative; flex: 1 1 200px; max-width: 320px; }
.qm-pos-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-400); font-size: var(--fs-400); }
.qm-pos-search .form-control { padding-left: 38px; padding-block: 8px; min-height: 40px; }
/* Drawer status chip - links to the Cash drawer page. */
.qm-pos-drawer { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; min-height: 40px; border-radius: var(--r-sm); font-size: var(--fs-300); font-weight: 700; text-decoration: none; border: 1px solid var(--line); transition: transform var(--t-fast), box-shadow var(--t-fast); }
.qm-pos-drawer:hover { transform: translateY(-1px); box-shadow: var(--e-1); }
.qm-pos-drawer.is-open { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.qm-pos-drawer.is-closed { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }

/* Floor zones — ONE zone per row, each a horizontally swipeable rail of its tables with a
   divider under it. The zone name pins to the left so it stays put as the row scrolls and
   keeps every row's tables aligned to the same left edge. Same on desktop / iPad / phone. */
.qm-pos-tables { display: flex; flex: 0 0 auto; flex-direction: column; padding: 2px 16px; border-bottom: 1px solid var(--line-2); }
.qm-pos-zone { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.qm-pos-zone::-webkit-scrollbar { display: none; }
.qm-pos-zone:last-child { border-bottom: 0; }
.qm-pos-zone-name { position: sticky; left: 0; z-index: 1; flex: 0 0 auto; min-width: 78px; padding: 4px 10px 4px 0; background: var(--surface); font-size: var(--fs-200); font-weight: 700; letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-400); }
/* Quick keys — the operator's pinned dishes, on the same labelled rail as the floor zones and
   using the same tile the menu grid uses, so one gesture and one look serve both. Only the track
   differs: a deck is one scrolling row, not a wrapping grid. */
/* A definite width, not a min-width. flex: 0 0 auto sizes the tile to its CONTENT, so once the
   quick key gained a photo the tile grew to the image's natural 600px — .qm-pos-item-img img is
   width:100%, and 100% of an indefinite width is the intrinsic one. The grid tiles never showed
   this because their track supplies the width. */
.qm-pos-quick .qm-pos-item { flex: 0 0 auto; width: 118px; }
.qm-pos-tables .qm-pos-table { flex: 0 0 auto; }
.qm-pos-table {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; padding: 6px 10px; border: 1.5px solid var(--field-border); border-radius: 10px;
  background: var(--surface); cursor: pointer; line-height: 1.1; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.qm-pos-table:hover { border-color: var(--qm-primary); }
.qm-pos-table-lbl { font-weight: 700; font-size: var(--fs-400); color: var(--ink-800); }
.qm-pos-table-seats { font-size: var(--fs-200); color: var(--ink-400); display: inline-flex; align-items: center; gap: 3px; margin-top: 1px; }
.qm-pos-table.is-busy { background: var(--surface-2); border-style: dashed; }
.qm-pos-table.is-busy .qm-pos-table-lbl { color: var(--ink-400); }
.qm-pos-table.is-picked { border-color: var(--qm-primary); background: var(--qm-primary-50); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qm-primary) 12%, transparent); }
.qm-pos-table.is-picked .qm-pos-table-lbl { color: var(--qm-primary); }

/* Category tabs */
.qm-pos-cats { display: flex; flex: 0 0 auto; gap: 6px; padding: 12px 16px 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.qm-pos-cats::-webkit-scrollbar { display: none; }
.qm-pos-cat {
  flex: 0 0 auto; border: 1px solid var(--field-border); background: var(--surface); color: var(--ink-700);
  font-weight: 600; font-size: var(--fs-400); padding: 8px 16px; border-radius: var(--r-pill); cursor: pointer;
  transition: all var(--t-fast);
}
.qm-pos-cat:hover { border-color: var(--qm-primary); color: var(--qm-primary); }
.qm-pos-cat.is-active { background: var(--qm-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px color-mix(in srgb, var(--qm-primary) 22%, transparent); }

/* Item grid */
.qm-pos-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 16px; overflow-y: auto; align-content: start; }

/* POS function toolbar — premium key deck (preview only) */
.qm-pos-funcs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; padding: 14px 16px; border-top: 1px solid var(--line-2); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.qm-pos-func {
  display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px 8px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface);
  color: var(--ink-700); font-weight: 600; font-size: var(--fs-300); cursor: pointer;
  box-shadow: 0 2px 6px rgba(78,8,29,.05); transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.qm-pos-func i { width: 36px; height: 36px; border-radius: 11px; background: var(--qm-primary-50); color: var(--qm-primary); font-size: var(--fs-600); display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast), color var(--t-fast); }
.qm-pos-func:hover { border-color: var(--qm-primary); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(78,8,29,.1); }
.qm-pos-func:hover i { background: var(--qm-grad); color: #fff; }

/* Quick-cash tenders (shown when Cash is selected) */
.qm-pos-tenders { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.qm-pos-tender { border: 1px solid var(--field-border); background: var(--surface); color: var(--ink-800); font-weight: 700; font-size: var(--fs-400); padding: 9px; border-radius: var(--r-sm); cursor: pointer; transition: all var(--t-fast); }
.qm-pos-tender:hover { border-color: var(--qm-primary); color: var(--qm-primary); background: var(--qm-primary-50); }
.qm-pos-item {
  display: flex; flex-direction: column; text-align: left; gap: 8px; padding: 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.qm-pos-item:hover { transform: translateY(-2px); border-color: var(--field-border); box-shadow: 0 10px 20px rgba(78,8,29,.10); }
.qm-pos-item:active { transform: translateY(0); }
.qm-pos-item-img { position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 1/1; background: var(--surface-2); }
.qm-pos-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qm-pos-item-off { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(31,11,18,.55); color: #fff; font-weight: 700; font-size: var(--fs-300); }
.qm-pos-item.is-off { opacity: .6; cursor: not-allowed; }
.qm-pos-item-body { display: flex; flex-direction: column; gap: 3px; }
.qm-pos-item-name { font-weight: 600; font-size: var(--fs-400); color: var(--ink-900); line-height: 1.25; }
.qm-pos-item-price { font-weight: 700; font-size: var(--fs-500); color: var(--qm-primary); }

/* ---- Right: order ticket ---- */
.qm-pos-ticket {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r-md); box-shadow: var(--e-1); overflow: hidden;
}
.qm-pos-ticket-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px; background: var(--qm-grad-dark); color: #fff; }
.qm-pos-ticket-where { display: flex; flex-direction: column; }
.qm-pos-ticket-where strong { font-size: var(--fs-700); }
.qm-pos-ticket-sub { font-size: var(--fs-300); opacity: .82; }
.qm-pos-ticket-waiter { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-300); font-weight: 600; background: rgba(255,255,255,.14); padding: 5px 10px 5px 5px; border-radius: var(--r-pill); }
.qm-pos-ticket-waiter img { border-radius: 50%; object-fit: cover; }

/* Order ticket lines — kitchen-pipeline style: text-only, no thumbnails. */
.qm-pos-lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 16px; display: flex; flex-direction: column; }
.qm-pos-line { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px dashed var(--line-2); }
.qm-pos-line:last-child { border-bottom: 0; }
.qm-pos-line-qty { font-weight: 700; font-size: var(--fs-500); color: var(--qm-primary-600); }
.qm-pos-line-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qm-pos-line-name { font-weight: 600; font-size: var(--fs-500); color: var(--ink-900); }
.qm-pos-line-opt { font-size: var(--fs-200); color: var(--ink-500); line-height: 1.35; padding-left: 9px; border-left: 2px solid var(--qm-primary-100); }
.qm-pos-line-right { display: inline-flex; align-items: center; gap: 8px; }
.qm-pos-qty { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2); border-radius: var(--r-pill); padding: 2px; }
.qm-pos-step { width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-700); font-size: var(--fs-600); font-weight: 700; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.qm-pos-step:hover { background: var(--surface); color: var(--qm-primary); box-shadow: 0 1px 4px rgba(78,8,29,.14); }
.qm-pos-qty-n { min-width: 18px; text-align: center; font-weight: 700; font-size: var(--fs-400); }
.qm-pos-line-total { font-weight: 700; font-size: var(--fs-400); color: var(--ink-900); min-width: 52px; text-align: right; }
.qm-pos-line-x { border: 0; background: transparent; color: var(--ink-300); cursor: pointer; font-size: var(--fs-500); padding: 4px; border-radius: 6px; }
.qm-pos-line-x:hover { color: var(--qm-primary); background: var(--qm-primary-50); }
@keyframes qmPosFlash { from { background: var(--qm-primary-50); } to { background: transparent; } }
.qm-pos-flash { animation: qmPosFlash .6s ease; }

.qm-pos-empty { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink-400); text-align: center; gap: 8px; padding: 24px; }
.qm-pos-empty i { font-size: 30px; opacity: .4; }
.qm-pos-empty p { margin: 0; font-size: var(--fs-400); }

.qm-pos-ticket-ft { border-top: 1px solid var(--line-2); padding: 12px 16px 16px; background: var(--surface-2); }
.qm-pos-note { position: relative; margin-bottom: 12px; }
.qm-pos-note i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-400); font-size: 12px; }
.qm-pos-note .form-control { padding-left: 34px; min-height: 40px; background: var(--surface); }
.qm-pos-totals { margin: 0 0 12px; }
.qm-pos-totals > div { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; }
.qm-pos-totals dt { color: var(--ink-500); font-size: var(--fs-400); }
.qm-pos-totals dd { margin: 0; font-weight: 600; font-size: var(--fs-400); color: var(--ink-800); }
.qm-pos-totals > .qm-pos-grand { border-top: 1px dashed var(--field-border); margin-top: 4px; padding-top: 8px; }
.qm-pos-grand dt { font-weight: 700; color: var(--ink-900); font-size: var(--fs-600); }
.qm-pos-grand dd { font-weight: 700; color: var(--qm-primary); font-size: var(--fs-800); }

.qm-pos-pay { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.qm-pos-pay-lbl { font-size: var(--fs-300); color: var(--ink-500); margin-right: 2px; }
.qm-pos-paybtn { flex: 1; border: 1px solid var(--field-border); background: var(--surface); color: var(--ink-700); font-weight: 600; font-size: var(--fs-400); padding: 8px; border-radius: var(--r-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all var(--t-fast); }
.qm-pos-paybtn.is-active { border-color: var(--qm-primary); color: var(--qm-primary); background: var(--qm-primary-50); }

.qm-pos-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.qm-pos-actions-2 { grid-template-columns: 1fr 1.5fr; }
.qm-pos-actions .qm-btn { width: 100%; padding: 13px 10px; font-size: var(--fs-600); }
.qm-pos-send { color: var(--ink-700); }
.qm-pos-charge { font-weight: 700; }

/* Ticket identity line (order # + timer) on the dark header */
.qm-pos-ticket-meta { display: flex; gap: 12px; margin-top: 5px; font-size: var(--fs-200); font-weight: 600; color: rgba(255,255,255,.72); }
.qm-pos-ticket-timer i { margin-right: 3px; opacity: .8; }

/* Selected ticket line (discount/void target it) */
.qm-pos-line.is-selected { background: var(--qm-primary-50); box-shadow: inset 3px 0 0 var(--qm-primary); border-radius: 6px; border-bottom-color: transparent; }
.qm-pos-line { cursor: pointer; }

.qm-pos-preview-note { margin: 12px 0 0; font-size: var(--fs-200); color: var(--ink-400); text-align: center; line-height: 1.4; }
.qm-pos-preview-note i { color: var(--qm-primary); }

/* Responsive: stack the ticket under the menu on small screens */
/* --- Collapsible action deck + New-Order ticket -------------------------------------------------- */
/* "Additional options" pill (same chrome as the drawer chip) toggles the function deck; chevron flips. */
/* These toggles are <button>s wearing the drawer pill — strip native button chrome and inherit the UI
   font so they match the drawer <a> exactly. */
.qm-pos-morebtn { -webkit-appearance: none; appearance: none; font-family: inherit; color: var(--ink-700); background: var(--surface); cursor: pointer; }
.qm-pos-morebtn:hover { border-color: color-mix(in srgb, var(--qm-primary) 30%, var(--line)); }
.qm-pos-morebtn .qm-pos-more-chev, .qm-pos-chev-h { font-size: var(--fs-200); color: var(--ink-400); transition: transform var(--t-fast); }
.qm-pos-morebtn[aria-expanded="true"] .qm-pos-more-chev { transform: rotate(180deg); }
/* The Order pill collapses a SIDE panel, so its chevron is horizontal: points right while open (push it
   away), flips to left once collapsed (pull it back). */
.qm-pos-morebtn[aria-expanded="false"] .qm-pos-chev-h { transform: rotate(180deg); }
.qm-pos.funcs-closed .qm-pos-funcs { display: none; }
/* Floor-zones (Tables) toggle — plain show/hide, open by default. The quick-key deck rides the
   same band but is never collapsed: a key the cashier has to reopen a drawer to reach is not a
   quick key. */
.qm-pos.tables-closed .qm-pos-tables:not(.qm-pos-quick) { display: none; }
/* The pinned strip has its own switch, so hiding the floor zones never takes it with them
   and hiding it never takes the zones. */
.qm-pos.quick-closed .qm-pos-quick { display: none; }
/* New-Order panel collapse (its pill lives in the top bar): the whole ticket column folds away to the
   right and the menu takes the full width; toggled back the same way. On phone/tablet it simply hides. */
.qm-pos.ticket-closed { grid-template-columns: 1fr; }
.qm-pos.ticket-closed .qm-pos-ticket { display: none; }

@media (max-width: 980px) {
  /* iPad / phone: one column that fills the screen. The menu takes all the height above the
     cart and its item grid scrolls inside it, so opening Tables or the action deck just
     shrinks the grid — sections can never overlap or clip. Collapsing the cart hands its
     height back to the menu, so there is no dead space below it. */
  .qm-pos { display: flex; flex-direction: column; height: calc(100dvh - 96px); min-height: 480px; }
  .qm-pos-menu { flex: 1 1 auto; height: auto; min-height: 0; }
  .qm-pos-ticket { flex: 0 0 auto; height: auto; max-height: 68%; min-height: 300px; }
  /* Action deck starts collapsed on tablet/phone to reclaim space; the toggle opens it. */
  .qm-pos-funcs { display: none; }
  .qm-pos.funcs-open .qm-pos-funcs { display: grid; }
  /* Compact the top bar so it never wraps into a tall stack that starves the menu grid:
     search takes its own row, and the section toggles + drawer chip collapse to icons
     (labels remain as tooltips / accessible names via title). */
  .qm-pos-bar { gap: 8px; padding: 10px 12px; }
  .qm-pos-search { flex: 1 1 100%; max-width: none; }
  .qm-pos-morebtn > span, .qm-pos-drawer > span { display: none; }
}

/* Delivery order details (phone orders): compact customer strip under the header. */
.qm-pos-delivery { display: grid; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: var(--surface-2); }

/* Sent-ticket state: the order is committed; the bar offers the next ticket. */
.qm-pos-sentbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--qm-primary-50); color: var(--qm-primary); font-weight: 600; font-size: var(--fs-400);
}
.qm-pos-sentbar i { margin-right: 4px; }
.qm-pos.is-sent .qm-pos-qty,
.qm-pos.is-sent .qm-pos-line-x { visibility: hidden; }

/* Touch terminals: the waiter screen is driven by finger, so every control on it
   meets the same 44px floor the rest of the product already uses. */
@media (pointer: coarse) {
  .qm-pos-mode, .qm-pos-cat, .qm-pos-table, .qm-pos-paybtn { min-height: 44px; }
  .qm-pos-step { min-width: 44px; min-height: 44px; }
}

/* ---- Till layout switches (POS settings → Till layout) --------------------------------------
   Photos hide by class rather than by dropping the <img>, so the tile keeps the definite width
   its flex track depends on. The three dashboard bars are drawn by the layout OUTSIDE .qm-pos,
   so they are reached with :has() — the same mechanism the header-offset rules already use. */
.qm-pos.images-off .qm-pos-item-img { display: none; }
body:has(.qm-pos.no-subheader) .qm-dash-subhead { display: none; }
body:has(.qm-pos.no-topheader) .qm-dash-top { display: none; }
body:has(.qm-pos.no-sidebar) #qm-dash-side { display: none; }