/* Register (POS), kitchen display and customer display: mobile pass (phones 360-430 px, tablets: Android Chrome, iPad Safari).
   Loaded after pos.css / screens.css. Findings and before / after: docs/UX-AUDIT.md, section "Mobile pass".
   The register is a kiosk-style app, so it also gets: no pull-to-refresh, no rubber-band scroll, notch-safe edges, keyboard-safe dialogs. */

:root { --tap: 44px; --safe-b: env(safe-area-inset-bottom, 0px); }

/* ------------------------------------------------------------ every device */
html, body { overscroll-behavior: none; }               /* a swipe down in the register must not reload the page (open order, half-typed amount) */
body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-touch-callout: none; }
.pcard, .oline, .tool, .nk, .key, .pm, .cat { -webkit-user-select: none; user-select: none; }   /* a long press on a tile must not select its text or open the iOS callout */
input, textarea { -webkit-user-select: text; user-select: text; }
.dlg-body, .op-lines, .products, .orders-list, .ol-detail { overscroll-behavior: contain; }
/* iOS Safari: while the keyboard is open the dialog layer follows the visible area (device.js publishes --vvh / --vvt) */
.dlg-back { inset: var(--vvt, 0px) 0 auto 0; height: var(--vvh, 100dvh); }

/* ------------------------------------------------------------ touch devices and phones */
@media (max-width: 900px), (pointer: coarse) {
  /* 16 px: iOS Safari zooms the page when a smaller field takes focus (the register used 15 px) */
  :root:root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
  :root:root select, :root:root textarea { font-size: 16px; }
  :root:root .btn, :root:root .chip, :root:root .ochip, :root:root .icon-btn, :root:root .tab { min-height: var(--tap); }
  :root:root .icon-btn { width: var(--tap); height: var(--tap); }
  :root:root .icon-btn.sm { width: var(--tap); height: var(--tap); }
  :root:root .stepper button { width: var(--tap); height: var(--tap); }
  :root:root .stepper input { min-height: var(--tap); }
  :root:root .nk { min-height: var(--tap); }
  :root:root .mi { min-height: var(--tap); }
  :root:root .seg.sm button, :root:root .seg button { min-height: var(--tap); min-width: var(--tap); }   /* EN / العربية switch in the menu */
  :root:root .lic-btn { min-height: var(--tap); }
  :root:root .lic-x { width: var(--tap); height: var(--tap); }
  /* the avatar is a button too */
  button.avatar { position: relative; }
  button.avatar::after { content: ""; position: absolute; inset: -4px; }
  /* the (i) on a product tile: the glyph stays 30 px, the hit area is 46 px, and it still does not trigger the tile */
  .pc-info { position: absolute; }
  .pc-info::after { content: ""; position: absolute; inset: -8px; }
}

/* ------------------------------------------------------------ phones */
@media (max-width: 760px) {
  .topbar { padding-inline: max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-right)); }
  :root:root .topbar .icon-btn { width: var(--tap); height: var(--tap); min-height: var(--tap); }
  :root:root .topbar .avatar { width: 40px; height: 40px; }
  :root:root .tabs .tab { min-height: 52px; padding-inline: 10px; }
  :root:root .order-chips .ochip { height: var(--tap); }
  .products { padding-bottom: calc(100px + var(--safe-b)); }
  .cart-fab { inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .orderpanel { padding-bottom: 0; }
  .pay-btn { margin-bottom: calc(10px + var(--safe-b)); }
  #toasts { inset-inline: 12px; }

  /* dialogs become bottom sheets: thumb zone, rounded top, action bar clear of the home indicator */
  .dlg-back:not(:has(.dlg-full)) { padding: 0; place-items: end center; }
  .dlg:not(.dlg-full) { width: 100%; max-width: none; max-height: calc(100dvh - 10px - env(safe-area-inset-top, 0px)); max-height: min(calc(100dvh - 10px - env(safe-area-inset-top, 0px)), var(--vvh, 100dvh)); border-radius: 22px 22px 0 0; transform: translateY(40px); }
  .dlg-back.in .dlg { transform: none; }
  .dlg-head { padding: 12px 8px 12px 18px; }
  [dir="rtl"] .dlg-head { padding: 12px 18px 12px 8px; }
  .dlg-full .dlg-head { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .dlg-foot { padding-bottom: calc(12px + var(--safe-b)); }
  .dlg-foot .btn { min-width: 0; }
  .pin-pad button { height: 60px; }

  /* payment: amount due + remaining stay in view while the cashier types (they used to sit below the keypad, a full scroll away) */
  .dlg-pay .pay-grid { display: flex; flex-direction: column; gap: 12px; overflow: visible; height: auto; padding: 0 16px; background: var(--panel-2); min-height: 100%; }
  .dlg-pay .pay-left, .dlg-pay .pay-right { display: contents; }
  .dlg-pay .pay-sum { order: -1; position: sticky; top: 0; z-index: 4; margin-inline: -16px; padding: 10px 16px; border-radius: 0; border-width: 0 0 1px; box-shadow: var(--shadow-1); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; align-items: stretch; }
  .dlg-pay .pay-sum .ps-row { display: none; }
  .dlg-pay .pay-sum .ps-row.big, .dlg-pay .pay-sum .ps-row.status { display: grid; align-content: center; justify-items: start; gap: 0; border: 0; margin: 0; padding: 6px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; line-height: 1.3; }
  .dlg-pay .pay-sum .ps-row.big { background: var(--brand-soft); }
  .dlg-pay .pay-sum .ps-row.big b { font-size: 24px; line-height: 1.15; letter-spacing: 0; }
  .dlg-pay .pay-sum .ps-row.status b { font-size: 24px; line-height: 1.15; }
  .dlg-pay .pay-methods { margin-top: 4px; }
  .dlg-pay .pay-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dlg-pay .pay-quick [data-exact] { grid-column: 1 / -1; }   /* "Exact" (Arabic: "المبلغ بالضبط") needs a full row, it overflowed its 5th column */
  .dlg-pay .pay-foot { margin: 4px -16px 0; padding: 10px 16px calc(12px + var(--safe-b)); }
  .key { height: 56px; }
}

/* ------------------------------------------------------------ small tablets in portrait (iPad mini, Android 8-10") */
@media (min-width: 761px) and (max-width: 900px) {
  .topbar { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); }
}

/* ------------------------------------------------------------ landscape phones (812 x 375): the two-column register needs ~620 px of height */
@media (max-height: 480px) and (min-width: 761px) {
  /* the order panel scrolls as a whole (lines, totals, tools, keypad) and the Payment button stays pinned at its bottom */
  .orderpanel { overflow-y: auto; overscroll-behavior: contain; }
  .op-lines { flex: 0 0 auto; min-height: 96px; max-height: 40dvh; }
  .op-head { padding-block: 6px 2px; }
  .pay-btn { position: sticky; bottom: 6px; z-index: 3; flex: none; }
  .cat-bar { padding-block: 6px; } .cat { height: 44px; }
  .topbar { height: 52px; }
  .ol-detail, .orders-list { overscroll-behavior: contain; }
}

/* ------------------------------------------------------------ landscape phones and an open keyboard: height is the scarce thing */
@media (max-height: 480px) and (max-width: 900px) {
  .dlg:not(.dlg-full) { max-height: calc(var(--vvh, 100dvh) - 6px); }
  .dlg-head { padding-block: 6px; }
  .dlg-body { padding-block: 10px; }
}

/* ------------------------------------------------------------ kitchen display: stage chips are tabs on a phone */
.k-count { cursor: pointer; font: inherit; color: inherit; }
@media (max-width: 640px) {
  :root:root .k-count { min-height: var(--tap); padding-inline: 14px; }
  .k-top { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  :root:root .k-card footer .btn-primary { min-height: 56px; flex: 1 1 auto; }
  .k-col-body { padding-bottom: calc(12px + var(--safe-b)); }
}
/* customer display: respect the notch when it is a tablet in landscape */
.d-root, .k-root { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }