/* ==========================================================================
 * POS action screens — Discount, Coupon, Loyalty, Split,
 * Payment/tender, Guests, Hold/Recall, Manager PIN, Void, Bill, Tip.
 * One shell + one keypad drive them all. Scoped .qm-posm*; reuses app.css
 * tokens and the .qm-pos-* patterns for full consistency.
 * ========================================================================== */
.qm-posm-overlay {
  position: fixed; inset: 0; z-index: 1085; display: none; align-items: center; justify-content: center;
  padding: 22px; background: rgba(31,11,18,.56); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.qm-posm-overlay.is-open { display: flex; animation: qmPosmFade .16s ease; }
@keyframes qmPosmFade { from { opacity: 0; } to { opacity: 1; } }
.qm-posm-dialog {
  background: var(--surface); border-radius: var(--r-lg); width: min(480px, 100%); max-height: 94vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 34px 90px rgba(31,11,18,.42);
  animation: qmPosmPop .18s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes qmPosmPop { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.qm-posm-dialog.qm-posm-md { width: min(600px, 100%); }
.qm-posm-dialog.qm-posm-lg { width: min(720px, 100%); }
.qm-posm-dialog.qm-posm-sm { width: min(384px, 100%); }
.qm-posm-dialog.qm-posm-receipt { width: min(408px, 100%); }

.qm-posm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.qm-posm-title { margin: 0; font-size: var(--fs-800); font-weight: 700; color: var(--ink-900); display: inline-flex; align-items: center; gap: 10px; }
.qm-posm-title i { color: var(--qm-primary); }
.qm-posm-title small { font-weight: 600; font-size: var(--fs-400); color: var(--ink-400); }
.qm-posm-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink-700); font-size: var(--fs-600); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.qm-posm-close:hover { background: var(--qm-primary-50); color: var(--qm-primary); }
.qm-posm-body { padding: 20px 22px; overflow-y: auto; }
.qm-posm-foot { padding: 16px 22px; border-top: 1px solid var(--line-2); background: var(--surface-2); display: flex; gap: 10px; }
.qm-posm-foot .qm-btn { flex: 1; padding: 13px; font-size: var(--fs-600); font-weight: 700; }
.qm-posm-foot .qm-btn-outline { flex: 0 0 auto; }

.qm-posm-label { display: block; font-size: var(--fs-300); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--ink-400); margin: 0 0 8px; }
.qm-posm-section + .qm-posm-section { margin-top: 18px; }

/* Segmented toggle (matches the .qm-pos-modes pill group) */
.qm-posm-seg { display: inline-flex; width: 100%; background: var(--surface-2); border-radius: var(--r-pill); padding: 4px; gap: 2px; }
.qm-posm-seg button { flex: 1; border: 0; background: transparent; color: var(--ink-600); font-weight: 700; font-size: var(--fs-400); padding: 9px 10px; border-radius: var(--r-pill); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background var(--t-fast), color var(--t-fast); }
.qm-posm-seg button.is-active { background: var(--surface); color: var(--qm-primary); box-shadow: 0 2px 6px rgba(78,8,29,.12); }
.qm-posm-seg button:disabled { opacity: .4; cursor: not-allowed; }

/* Preset money/percent chips (reuse tender look) */
.qm-posm-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.qm-posm-chip { border: 1px solid var(--field-border); background: var(--surface); color: var(--ink-800); font-weight: 700; font-size: var(--fs-500); padding: 11px 8px; border-radius: var(--r-sm); cursor: pointer; transition: all var(--t-fast); }
.qm-posm-chip:hover, .qm-posm-chip.is-active { border-color: var(--qm-primary); color: var(--qm-primary); background: var(--qm-primary-50); }

/* --- Shared number pad --- */
.qm-posm-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-md); margin-bottom: 12px; }
.qm-posm-readout dt { font-size: var(--fs-300); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--ink-400); }
.qm-posm-readout dd { margin: 0; font-size: var(--fs-1100); font-weight: 700; color: var(--qm-primary); letter-spacing: var(--ls-snug); }
.qm-posm-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qm-posm-key { min-height: 52px; border: 1px solid var(--field-border); background: var(--surface); color: var(--ink-900); font-size: var(--fs-900); font-weight: 700; border-radius: var(--r-sm); cursor: pointer; transition: all var(--t-fast); }
.qm-posm-key:hover { border-color: var(--qm-primary); background: var(--qm-primary-50); color: var(--qm-primary); }
.qm-posm-key:active { transform: scale(.97); }
.qm-posm-key-wide { grid-column: span 1; }

/* PIN dots */
.qm-posm-pin { display: flex; justify-content: center; gap: 14px; margin: 6px 0 16px; }
.qm-posm-pin span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--field-border); transition: all var(--t-fast); }
.qm-posm-pin span.is-on { background: var(--qm-primary); border-color: var(--qm-primary); }
.qm-posm-authline { text-align: center; font-size: var(--fs-400); color: var(--ink-500); margin: 0 0 14px; }

/* Live totals readout (reuse .qm-pos-totals rhythm) */
.qm-posm-totals { margin: 16px 0 0; }
.qm-posm-totals > div { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 0; font-size: var(--fs-500); }
.qm-posm-totals dt { color: var(--ink-500); }
.qm-posm-totals dd { margin: 0; font-weight: 700; color: var(--ink-800); }
.qm-posm-was { color: var(--ink-400); text-decoration: line-through; font-size: var(--fs-400); }
.qm-posm-save { color: var(--ok); font-weight: 700; }
.qm-posm-totals > .qm-posm-grand { border-top: 1px dashed var(--field-border); margin-top: 6px; padding-top: 10px; }
.qm-posm-grand dt { font-weight: 700; color: var(--ink-900); font-size: var(--fs-600); }
.qm-posm-grand dd { font-weight: 700; color: var(--qm-primary); font-size: var(--fs-900); }
.qm-posm-change dd { color: var(--ok); }
.qm-posm-due dd { color: var(--warn); }

/* Tender list (payment) */
.qm-posm-tenders-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.qm-posm-tender-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); }
.qm-posm-tender-row i.method { color: var(--qm-primary); width: 18px; text-align: center; }
.qm-posm-tender-row .m { flex: 1; font-weight: 600; font-size: var(--fs-500); color: var(--ink-800); }
.qm-posm-tender-row .amt { font-weight: 700; color: var(--ink-900); }
.qm-posm-tender-row .rm { border: 0; background: transparent; color: var(--ink-300); cursor: pointer; font-size: var(--fs-500); padding: 4px; }
.qm-posm-tender-row .rm:hover { color: var(--qm-primary); }

/* Card reader / split-routing panel */
.qm-posm-terminal { text-align: center; padding: 26px 18px; border: 1px dashed var(--field-border); border-radius: var(--r-md); background: var(--surface-2); }
.qm-posm-terminal-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--qm-primary-50); color: var(--qm-primary); font-size: 24px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.qm-posm-terminal strong { display: block; font-size: var(--fs-700); color: var(--ink-900); }
.qm-posm-terminal p { margin: 6px 0 18px; font-size: var(--fs-400); color: var(--ink-500); }
.qm-posm-terminal .qm-btn { min-width: 190px; }

/* Move / merge table */
.qm-posm-movecard { padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-500); }
.qm-posm-movecard strong { color: var(--ink-900); }
.qm-posm-movetables { display: flex; flex-direction: column; gap: 14px; }
.qm-posm-movezone { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qm-posm-movezone-name { font-size: var(--fs-200); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--ink-400); min-width: 80px; }
.qm-posm-movegrid { display: flex; gap: 8px; flex-wrap: wrap; }
.qm-posm-movet { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 54px; padding: 8px 10px; border: 1.5px solid var(--field-border); border-radius: 10px; background: var(--surface); cursor: pointer; line-height: 1.15; transition: all var(--t-fast); }
.qm-posm-movet span { font-weight: 700; font-size: var(--fs-400); color: var(--ink-800); }
.qm-posm-movet small { font-size: var(--fs-200); color: var(--ink-400); display: inline-flex; align-items: center; gap: 3px; margin-top: 1px; }
.qm-posm-movet:hover { border-color: var(--qm-primary); }
.qm-posm-movet.is-busy { background: var(--surface-2); border-style: dashed; }
.qm-posm-movet.is-busy span { color: var(--ink-400); }
.qm-posm-movet.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-posm-movet.is-picked span { color: var(--qm-primary); }

/* Split — share cards */
.qm-posm-shares { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.qm-posm-share { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 12px; text-align: center; }
.qm-posm-share.is-paid { border-color: color-mix(in srgb, var(--ok) 28%, transparent); background: var(--ok-bg); }
.qm-posm-share-h { font-size: var(--fs-300); font-weight: 700; color: var(--ink-500); }
.qm-posm-share-amt { font-size: var(--fs-900); font-weight: 700; color: var(--ink-900); margin: 4px 0 8px; }
.qm-posm-assignbar { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: var(--fs-400); font-weight: 600; color: var(--ink-600); }

/* Assignable line rows (split by item / void / bill) */
.qm-posm-lines { display: flex; flex-direction: column; gap: 4px; }
.qm-posm-lrow { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px dashed var(--line-2); }
.qm-posm-lrow:last-child { border-bottom: 0; }
.qm-posm-lrow .q { font-weight: 700; color: var(--qm-primary-600); min-width: 26px; }
.qm-posm-lrow .n { flex: 1; font-weight: 600; font-size: var(--fs-500); color: var(--ink-900); }
.qm-posm-lrow .t { font-weight: 700; color: var(--ink-800); }

/* Reason chips */
.qm-posm-reasons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qm-posm-reason { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border: 1px solid var(--field-border); border-radius: var(--r-sm); cursor: pointer; font-size: var(--fs-400); font-weight: 600; color: var(--ink-800); }
.qm-posm-reason.is-on { border-color: var(--qm-primary); background: var(--qm-primary-50); color: var(--qm-primary); }

/* Recall / parked tickets */
.qm-posm-parked { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qm-posm-parkcard { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface); }
.qm-posm-parkcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.qm-posm-parkcard-no { font-weight: 700; color: var(--ink-900); }
.qm-posm-parkcard-meta { font-size: var(--fs-300); color: var(--ink-500); margin-bottom: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.qm-posm-filter { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }

/* Loyalty / customer */
.qm-posm-cust { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface-2); margin: 12px 0; }
.qm-posm-cust-pts { margin-left: auto; text-align: right; }
.qm-posm-cust-pts strong { display: block; font-size: var(--fs-900); font-weight: 700; color: var(--qm-primary); }
.qm-posm-cust-pts span { font-size: var(--fs-200); color: var(--ink-400); }
/* Small helpers so the POS screens use classes, not inline styles. */
.qm-posm-cust-name { font-size: var(--fs-600); color: var(--ink-900); }
.qm-posm-cust-meta { font-size: var(--fs-300); color: var(--ink-500); }
.qm-posm-chip-sub { display: block; font-weight: 600; color: var(--ink-400); }
.qm-posm-chips.qm-posm-chips-2 { grid-template-columns: 1fr 1fr; }
.qm-posm-void-scope { margin: 0 0 14px; font-weight: 600; color: var(--ink-800); }
.qm-posm-reason-dot { font-size: 8px; color: var(--ink-300); }
.qm-posm-reward { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); margin-bottom: 8px; }
.qm-posm-reward .rn { flex: 1; font-weight: 600; font-size: var(--fs-500); color: var(--ink-900); }
.qm-posm-reward .rp { font-size: var(--fs-300); font-weight: 700; color: var(--ink-500); }

/* Search field with icon */
.qm-posm-search { position: relative; margin-bottom: 12px; }
.qm-posm-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-400); font-size: var(--fs-400); }
.qm-posm-search .form-control { padding-left: 38px; }

/* Coupon result pill line */
.qm-posm-result { margin-top: 12px; }

/* Receipt / bill preview */
.qm-posm-receipt-body { padding: 22px; font-family: var(--f-mono); }
.qm-posm-rc-head { text-align: center; margin-bottom: 14px; }
.qm-posm-rc-head strong { font-size: var(--fs-700); font-weight: 700; color: var(--ink-900); font-family: var(--f-sans); }
.qm-posm-rc-head p { margin: 4px 0 0; font-size: var(--fs-300); color: var(--ink-500); }
.qm-posm-rc-line { display: flex; justify-content: space-between; font-size: var(--fs-400); color: var(--ink-800); padding: 2px 0; }
.qm-posm-rc-line .rc-opt { color: var(--ink-400); font-size: var(--fs-200); padding-left: 12px; }
.qm-posm-rc-rule { border: 0; border-top: 1px dashed var(--field-border); margin: 10px 0; }
.qm-posm-rc-total { display: flex; justify-content: space-between; font-weight: 700; font-size: var(--fs-600); color: var(--ink-900); }

.qm-posm-hint { font-size: var(--fs-300); color: var(--ink-400); margin: 10px 0 0; text-align: center; }
/* New-customer offer: a plain note above the fields, an inline error under them - never a toast. */
.qm-posm-note { font-size: var(--fs-300); color: var(--ink-500); margin: 0 0 10px; }
.qm-posm-err { font-size: var(--fs-300); font-weight: 600; color: var(--danger, #c0392b); margin: 8px 0 0; }
.qm-posm-body .form-control.is-invalid { border-color: var(--danger, #c0392b); box-shadow: none; }

/* Choices.js dropdowns inside POS modals: cap the list and, for the Discount
 * "reason" (which sits low in the modal), flip it UP over the form so it's
 * fully visible without scrolling under "New total". The body keeps its own
 * scroll for tall content (e.g. the custom keypad), so the footer stays
 * reachable. ID/2-class selectors beat choices.min.css which loads later. */
.qm-posm-dialog .choices { position: relative; }
.qm-posm-dialog .choices__list--dropdown, .qm-posm-dialog .choices__list[aria-expanded] { max-height: 240px; z-index: 20; }
#posm-discount .choices .choices__list--dropdown, #posm-discount .choices .choices__list[aria-expanded] { top: auto; bottom: calc(100% + 6px); }

@media (max-width: 560px) {
  .qm-posm-reasons, .qm-posm-parked { grid-template-columns: 1fr; }
}

/* Customer search results (Customer & loyalty screen). */
.qm-posm-custresults { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.qm-posm-custrow {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-sm);
  padding: 9px 12px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.qm-posm-custrow:hover { border-color: var(--qm-primary); background: var(--qm-primary-50); }
.qm-posm-custrow strong { font-size: var(--fs-400); color: var(--ink-900); }
.qm-posm-custrow > span:not(.qm-pill) { flex: 1 1 auto; font-size: var(--fs-300); color: var(--ink-500); }
.qm-posm-cust-av {
  width: 40px; height: 40px; border-radius: 50%; background: var(--qm-primary-50);
  color: var(--qm-primary); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-600);
}

/* --- Print the bill preview ------------------------------------------------
   This sheet loads only on the POS page (PosController pageStyles), so hiding
   the rest of the page in print never touches other dashboard screens. When the
   cashier hits Print in the open Bill modal, only the receipt body prints. */
@media print {
  body * { visibility: hidden; }
  #posm-bill.is-open .qm-posm-receipt-body,
  #posm-bill.is-open .qm-posm-receipt-body * { visibility: visible; }
  #posm-bill.is-open { position: static; display: block; background: none; }
  #posm-bill.is-open .qm-posm-dialog { position: static; box-shadow: none; max-width: none; width: auto; margin: 0; }
  #posm-bill.is-open .qm-posm-receipt-body {
    position: absolute; top: 0; left: 0; width: 100%;
    color: #000; background: #fff; padding: 0; font-size: var(--fs-300);
  }
  /* Drop the modal chrome (title bar + action buttons) from the printout. */
  #posm-bill .qm-posm-head, #posm-bill .qm-posm-foot { display: none !important; }
  @page { margin: 12mm; }
}

/* Finger-sized dismiss target on tablets, matching the customize modal. */
@media (pointer: coarse) {
  .qm-posm-close { min-width: 44px; min-height: 44px; }
}