/* Bug-sweep fixes, team b (Oct 2026). Loaded after si.css. */

/* B7 — short screens (1280×620) with many cart lines: the lines list used to grow to its content
   and squeeze the foot, hiding Pay/Discount/Note and the Cash field under the pinned total.
   Lines now take only the space that is left; the foot (tabs + panel + total + Charge) keeps
   priority and scrolls inside itself, with the total + Charge still pinned at its bottom. */
.sell-lines{flex:1 1 0;min-height:72px}
.sell-cart-foot{flex:0 1 auto;min-height:min(300px,55vh)}
/* desktop of any height: the cart fills the screen so the lines take all the room the foot leaves
   (without a height the lines box stayed at its 72px minimum: one visible line on 1366x900+) */
@media (min-width:861px){.sell-cart{height:calc(100vh - var(--topbar-h) - 28px)}}
/* phone bottom sheet is tall: show a few lines, the foot still keeps Charge in view */
@media (max-width:860px){.sell-lines{min-height:min(150px,20vh)}}

/* B2 — a refused offline sale turns the pending pill red and opens the queue sheet */
.sell-pending{cursor:pointer}
.sell-pending.sell-pending-bad{color:var(--danger-text,#B42318);background:var(--danger-tint,#FDECEA)}
.sell-queue{display:flex;flex-direction:column;gap:8px}
.sell-queue-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;min-width:0}
.sell-queue-row.bad{border-color:var(--danger,#D92D20);background:var(--danger-tint,#FDECEA)}
.sell-queue-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.sell-queue-main b{font-size:13px}
.sell-queue-err{font-size:12.5px;font-weight:600;color:var(--danger-text,#B42318);overflow-wrap:anywhere}
.sell-queue-row .pill{flex:none}

/* B14 — log out from the lock screen */
.sell-lock-logout{margin-top:6px;font-size:13px;color:var(--muted)}
.sell-lock-logout:hover{color:var(--ink)}

/* B12 — tab lines: long names wrap to two lines instead of hiding the qty/total */
.sell-tabline .sell-line-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}

/* B22 — the list is capped; say so */
.sales-cap-note{font-size:12.5px;color:var(--warn-text,#93370D);background:var(--warn-tint,#FEF6E7);border-radius:10px;padding:8px 12px}
.sales-cap-note.hidden{display:none}

/* B21 — "incl. VAT-exempt" is information inside the discounts, not another deduction */
.sales-total-row.sales-total-info{color:var(--muted);font-size:12.5px}

/* B12 — phone: the Tabs button sat alone on a third row (and lost its border: --border is not a
   defined token). It now shares row 1 with the cashier chip, labelled, search below. */
.sell-tabsbtn{border:1px solid var(--line);background:#fff;color:var(--ink)}
.sell-tabsbtn.on{border-color:var(--orange);color:var(--orange);background:var(--warn-tint)}
@media (max-width:860px){
  .sell-head .sell-tabsbtn{order:2;margin-left:auto;height:44px;border-radius:999px;padding:0 14px}
  .sell-head .sell-pending{order:2}
  .sell-head .sell-search-wrap{order:3}
  .sell-head .sell-tabsbtn-lbl{display:inline}
  /* B12 — long source names were clipped in equal-width segments: wrap into a chip grid */
  .sell-sources{align-items:flex-start}
  .sell-sources-lbl{padding-top:9px}
  .sell-sources-seg{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:5px;border:0;background:transparent;overflow:visible;border-radius:0}
  .sell-sources-seg button{height:auto;min-height:36px;padding:4px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;white-space:normal;line-height:1.15;overflow-wrap:anywhere;text-align:left;justify-content:flex-start}
  .sell-sources-seg button + button{border-left:1px solid var(--line)}
}

/* B-R12 — phone: Sales KPI amounts were clipped ("₱168,06…").
   B-3.6 — …and a seven-figure amount then wrapped mid-digit ("₱1,862,905.3 / 1"). Smaller figures
   that never break: one line, nothing hidden (₱9,999,999.99 fits a 2-up card at 360px). */
@media (max-width:700px){
  .sales-kpis .kpi-value{font-size:clamp(13px,4.1vw,22px);letter-spacing:-.03em;white-space:nowrap;overflow-wrap:normal;word-break:normal;text-overflow:clip}
}

/* B-R14 — phone: toasts sat at the bottom, on top of the bottom sheets' action buttons (Charge,
   Settle, Refund…). While any sheet / modal is open they move to the top of the screen. */
@media (max-width:860px){
  body:has(.modal-backdrop) .toast-root,
  body:has(.sell.sheet-open) .toast-root{top:calc(10px + env(safe-area-inset-top));bottom:auto;left:12px;right:12px;align-items:stretch}
  body:has(.modal-backdrop) .toast,
  body:has(.sell.sheet-open) .toast{min-width:0;max-width:none}
}

/* B-R15 — short desktop screens (1280×620): with many cart lines only one line showed and the
   quick-cash chips slid under the pinned total. Tighter cart chrome, one row of payment methods
   and one scrollable row of cash chips leave room for ~3 lines with everything in view. */
@media (min-width:861px) and (max-height:700px){
  .sell-cart{height:calc(100vh - var(--topbar-h) - 28px)} /* full height: the lines take what the foot leaves */
  .sell-cart-head{padding:8px 16px}
  .sell-cart-foot{gap:8px;min-height:0}
  .sell-tab{height:34px}
  .sell-panel{gap:8px}
  .sell-seg.sell-methods{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
  .sell-seg.sell-methods button{height:32px}
  .sell-tendered-wrap .input,.sell-tendered{height:36px}
  .sell-quick{flex-wrap:nowrap;gap:3px;overflow-x:auto;scrollbar-width:none}
  .sell-quick .chip{flex:1 0 auto;height:32px;min-width:30px;padding:0 4px;font-size:12px}
  .sell-foot-end{gap:6px;padding-bottom:10px}
  .sell-trow{padding:3px 0}
  .sell-total{padding:4px 0 2px}
  .sell-total-val{font-size:28px}
  .sell-complete{height:46px;font-size:16px}
  .sell-lockbar{padding:5px 16px}
  .sell-lockbar .btn-sm{height:28px}
  .sell-line{padding:7px 0}
}