/* Mobile rules for the Sales Terminal (POS).
   Menu list stays the main surface; the cart becomes a slide-up sheet
   summoned from a sticky total bar above the tab bar. */

@media (max-width: 720px) {
  /* ----- Terminal bar: name + ONE desk button ----- */
  /* Four controls (terminal · printing · ՀԴՄ · shift) want ~600px. At 390px
     they crushed into each other — "SALES TERMINAL" printed over "Front
     Counter" printed over "Printing on". Here the terminal name owns the row
     and the three switches fold into .tb-desk, a sheet the summary button
     drops open. The sheet holds the SAME nodes the desk shows, so the print
     toggle, the ՀԴՄ toggle with its two checkboxes and the shift chip keep
     their own handlers and their own popovers. */
  .terminal-bar { gap: 6px; padding: 6px 10px; }
  .terminal-bar .term-current { padding: 6px 10px; flex: 1 1 auto; min-width: 0; }
  .terminal-bar .term-current .scope { display: none; }
  .terminal-bar .term-current .tx { min-width: 0; }
  .terminal-bar .term-current .tx .lbl,
  .terminal-bar .term-current .tx .nm {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .terminal-bar .term-menu { left: 8px; right: 8px; width: auto; max-width: none; }

  /* The summary. No words on it, so it stays the same width in hy/ru: a printer
     glyph, the ՀԴՄ code with its live health dot, the shift. The dot is the one
     thing that must not be buried — it says whether sales are being declared. */
  .terminal-bar .tb-desk-toggle {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    height: 38px; padding: 0 9px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); color: var(--text-muted);
    font-family: inherit; font-size: 11.5px; font-weight: 700;
  }
  .terminal-bar .tb-desk-toggle .td-bit { display: inline-flex; align-items: center; gap: 4px; }
  .terminal-bar .tb-desk-toggle .td-bit.on { color: var(--accent-700); }
  .terminal-bar .tb-desk-toggle .td-bit.warn { color: var(--warn); }
  .terminal-bar .tb-desk-toggle .td-code { letter-spacing: 0.2px; }
  /* fx-ok/warn/bad/idle are the Configurator's own fiscal tones — one glance
     means the same thing on both screens. */
  .terminal-bar .tb-desk-toggle .td-dot {
    width: 8px; height: 8px; flex: 0 0 auto; border-radius: 999px;
    color: var(--text-soft); background: currentColor;
  }
  .terminal-bar .tb-desk-toggle .td-dot.fx-ok { color: var(--accent); }
  .terminal-bar .tb-desk-toggle .td-dot.fx-warn { color: var(--warn); }
  .terminal-bar .tb-desk-toggle .td-dot.fx-bad { color: var(--danger); }
  .terminal-bar .tb-desk-toggle .td-dot.fx-idle { color: var(--text-soft); }
  /* Filled = the switch is on and this sale goes to the tax office, coloured by
     the box's health. Hollow = the switch is off; the box may well be online,
     but nothing is being declared — the one distinction that must survive the
     collapse into a single button. */
  .terminal-bar .tb-desk-toggle .td-bit:not(.on) .td-dot {
    background: transparent; box-shadow: inset 0 0 0 2px currentColor;
  }
  .terminal-bar .tb-desk-toggle .chev { display: inline-flex; transition: transform 150ms ease; }
  .terminal-bar.m-desk-open .tb-desk-toggle { border-color: var(--accent); background: var(--accent-bg); }
  .terminal-bar.m-desk-open .tb-desk-toggle .chev { transform: rotate(180deg); }

  /* The switches themselves: gone until the button drops them. */
  .terminal-bar .tb-desk { display: none; }
  .terminal-bar.m-desk-open .tb-desk {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px;
    position: absolute; top: calc(100% + 6px); left: 8px; right: 8px; z-index: 60;
    padding: 10px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  }
  .terminal-bar.m-desk-open .pos-print-toggle,
  .terminal-bar.m-desk-open .pos-fiscal-toggle { flex: 1 1 auto; min-width: 0; height: 40px; }
  .terminal-bar.m-desk-open .pos-fiscal-toggle .pt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .terminal-bar.m-desk-open .pos-print-more,
  .terminal-bar.m-desk-open .pos-fiscal-more { height: 40px; flex: 0 0 auto; }
  .terminal-bar.m-desk-open .shift-wrap { display: flex; }
  .terminal-bar.m-desk-open .shift-chip { width: 100%; height: 40px; justify-content: flex-start; }
  /* Inside the sheet there is room for words again, so undo the bar-width
     collapse styles.css puts on the shift chip at phone widths. */
  .terminal-bar.m-desk-open .shift-chip.on span:not(.dot) { display: inline; }
  .terminal-bar.m-desk-open .shift-chip.on .chev { display: inline-flex; margin-left: auto; }
  /* The three popovers span the sheet instead of their desktop fixed widths. */
  .terminal-bar.m-desk-open .pos-print-menu,
  .terminal-bar.m-desk-open .pos-fiscal-menu { left: 0; right: 0; width: auto; }
  .terminal-bar.m-desk-open .shift-menu { left: 0; right: 0; min-width: 0; }

  /* Step bar: the crumbs were flex-shrinking below their own text width, so
     with white-space:nowrap the labels spilled over each other (nothing ever
     "overflowed", it just crushed). Lock every item to its natural width, then
     collapse COMPLETED steps to just their number circle — only the active step
     keeps its label — so the whole breadcrumb fits one row at the same height. */
  .step-bar {
    padding: 6px 10px;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .step-bar::-webkit-scrollbar { display: none; }
  .sales .step-bar > * { flex: 0 0 auto; }
  .sales .step-bar .spacer { flex: 1 1 auto; min-width: 0; }
  .sales .step-bar .crumb { white-space: nowrap; font-size: 12px; }
  /* Done step → number circle only. The label is a bare text node (can't be
     selected), so zero the crumb's font-size and restore it on .num. */
  .sales .step-bar .crumb.done { font-size: 0; gap: 0; padding: 4px; }
  .sales .step-bar .crumb.done .num { font-size: 11px; }
  /* Keep the place chip (Delivery / Table 5) — it's the one bit of context not
     shown elsewhere — and drop the brand chip, which the cart header already
     names. That's what lets the whole row fit without sideways scrolling. */
  .sales .step-bar .crumb.context.brand { display: none; }
  .sales .step-bar .crumb.context {
    display: inline-block;
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 18px;
  }

  /* ----- Place picker: floors and view mode share ONE row ----- */
  /* They used to stack as two full-width blocks and ate most of the screen
     before a single table appeared. Now the floor chips take the space that is
     left and scroll sideways when the names are long (they are ~25% longer in
     hy/ru), and the view switcher shrinks to three icon squares pinned right —
     its label stays in the DOM and in aria-label, just not on screen. */
  .place-controls { flex-wrap: wrap; gap: 8px; padding: 10px 12px 0; margin-bottom: 8px; }
  .place-controls .waiter-bar { flex: 1 1 100%; min-width: 0; gap: 8px; }
  .place-controls .floor-picker,
  .place-controls .place-view-toggle { margin: 0; }
  /* flex-basis 0, not auto: a wrapping flex container assigns lines from the
     items' CONTENT widths, so `auto` pushed the view switcher onto a second row
     the moment a floor name got long. Basis 0 keeps both on one line and lets
     the chips scroll inside whatever is left. */
  .place-controls .floor-picker {
    flex: 1 1 0; min-width: 0;
    overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  .place-controls .floor-picker::-webkit-scrollbar { display: none; }
  .place-controls .floor-picker .floor-chip { flex: 0 0 auto; padding: 6px 10px; }
  .place-controls .place-view-toggle { flex: 0 0 auto; margin-left: auto; }
  .place-view-toggle button { width: 40px; height: 34px; padding: 0; justify-content: center; }
  .place-view-toggle button .pv-label { display: none; }

  .places { grid-template-columns: 1fr; gap: 18px; padding: 0 12px; }
  .tables { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .places-list { padding: 0 12px; }

  /* Floor view: rail stacks under a swipeable stage */
  .places-floor { flex-direction: column; }
  .floor-view { overflow: auto; -webkit-overflow-scrolling: touch; }
  .floor-rail { width: auto; border-left: 0; border-top: 1px solid var(--border); }

  /* ----- Menu step: single column, chips on top ----- */
  .menu-view {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .menu-cats {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
  }
  .menu-cats::-webkit-scrollbar { display: none; }
  .menu-cats .cat {
    width: auto; height: 42px;
    padding: 0 12px;
    white-space: nowrap;
    border-bottom: 0;
    flex: 0 0 auto;
    gap: 6px;
  }
  .menu-cats .cat[aria-current="true"]::before {
    top: auto; left: 8px; right: 8px; bottom: 0;
    width: auto; height: 3px; border-radius: 3px 3px 0 0;
  }
  .menu-cats .cat .count { margin-left: 0; }

  .menu-items { flex: 1 1 auto; padding: 12px; padding-bottom: 84px; }
  .menu-items .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .item-tile { height: 132px; }

  /* ----- Cart → slide-up sheet ----- */
  .m-cart-scrim {
    display: block;
    position: fixed; inset: 0;
    z-index: 165;
    background: rgba(15, 18, 22, 0.45);
    opacity: 0; pointer-events: none;
    transition: opacity 180ms ease;
  }
  .sales.m-cart-open .m-cart-scrim { opacity: 1; pointer-events: auto; }

  .menu-view .cart {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    z-index: 170;
    height: min(88dvh, 640px);
    border-left: 0;
    border-top: 1px solid var(--border-strong);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -14px 40px rgba(0, 0, 0, 0.22);
    transform: translateY(103%);
    transition: transform 240ms cubic-bezier(0.2, 0.9, 0.3, 1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sales.m-cart-open .menu-view .cart { transform: translateY(0); }

  .m-cart-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    margin-left: auto; margin-right: 8px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-muted);
  }
  .cart .cart-head .row { align-items: center; }

  /* ----- Sticky order bar (count · label · total) ----- */
  .m-cart-bar {
    display: flex; align-items: center; gap: 10px;
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(66px + env(safe-area-inset-bottom));
    z-index: 135;
    height: 50px;
    padding: 0 16px;
    border: 0; border-radius: 14px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  }
  .m-cart-bar:disabled { background: var(--disabled); color: var(--text-muted); box-shadow: none; }
  .m-cart-bar .mc-count {
    display: flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 13px;
  }
  .m-cart-bar:disabled .mc-count { background: rgba(0, 0, 0, 0.08); }
  .m-cart-bar .mc-label { font-size: 14px; }
  .m-cart-bar .mc-total { margin-left: auto; font-size: 16px; }
  .sales.m-cart-open .m-cart-bar { display: none; }

  /* ----- Table bill → bottom sheet ----- */
  .bill-scrim { padding: 0; align-items: flex-end; }
  .bill-panel {
    width: 100%; max-width: none;
    max-height: 94dvh;
    border-radius: 18px 18px 0 0;
    display: flex; flex-direction: column;
  }
  .bill-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .bill-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }

  /* ----- Modifier modal → bottom sheet ----- */
  .mod-scrim { padding: 0; align-items: flex-end; }
  .mod-panel {
    max-width: none;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
  }
  .mod-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .mod-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
}