/* 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 + step bar: compact ----- */
  .terminal-bar .term-current { padding: 6px 10px; }
  .terminal-bar .term-current .scope { display: none; }
  .terminal-bar .term-menu { left: 8px; right: 8px; width: auto; max-width: none; }

  /* 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 ----- */
  .place-controls { flex-wrap: wrap; gap: 8px; padding: 10px 12px 0; }
  .sales .step-body > .place-view-toggle { align-self: stretch; }
  .place-view-toggle { display: flex; }
  .place-view-toggle button { flex: 1 1 0; justify-content: center; }

  .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)); }
}