/* 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}
}

/* B-6.5 — tab mode: the foot holds only the tab total + Settle (no payment panel), so the walk-in
   foot's min-height left ~100px empty under it. In tab mode the foot is only as tall as its content
   and the tab lines get that room. */
.sell.tab-mode .sell-cart-foot{min-height:0}

/* B-6.7 — phone: the sale-detail items table was 395–444px wide on a 390 screen and the Line total
   column was cut off (inner sideways swipe). ≤480px hides that column and shows the line total under
   the item name instead; wider screens keep the four columns. */
.sales-item-mtot{display:none}
@media (max-width:480px){
  .sales-items .sales-col-tot{display:none}
  .sales-items .sales-item-mtot{display:block;margin-top:3px;font-size:12.5px;font-weight:600}
  .sales-items .sales-item-mtot .muted{font-weight:400}
}

/* B-7.1 — sale detail ≤768px: a long item / option name (or 5-digit prices) still pushed the items
   table past the screen (.sales-item-name was one line up to 320px wide). The name and its detail
   now wrap; Qty / Price / Line total stay on one line. */
@media (max-width:768px){
  .sales-items td.sales-item-cell{white-space:normal;max-width:none;width:100%}
  .sales-items .sales-item-name{max-width:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .sales-items .sales-item-detail{white-space:normal;overflow-wrap:anywhere}
  .sales-items .sales-item-sub{white-space:normal;overflow-wrap:anywhere}
  .sales-items .sales-item-mtot .sales-line-tot{white-space:normal}
  .sales-items td:not(.sales-item-cell),.sales-items th{white-space:nowrap}
}
@media (max-width:768px){
  .table.sales-items th,.table.sales-items td{padding-left:8px;padding-right:8px}
  .sales-items .sales-col-tot .sales-line-tot{white-space:normal}
  .sales-items .sales-line-tot s{white-space:nowrap}
}
@media (max-width:480px){
  .table.sales-items th,.table.sales-items td{padding-left:5px;padding-right:5px}
  .table.sales-items th:first-child,.table.sales-items td:first-child{padding-left:10px}
  .sales-items .sales-disc-chip{padding:0 5px;font-size:11px}
}

/* B-7.7 — phone tab mode: Walk-in sale / Cancel tab sat flush on the bottom edge. Same breathing
   room under them as under the walk-in Charge button. */
@media (max-width:860px){
  .sell.tab-mode .sell-tabactions{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* B-8.1 — Sales page offline: one plain message instead of "No sales in this range". */
.sales-offline-body{display:flex;gap:12px;align-items:flex-start;color:var(--warn-text)}
.sales-offline-body > div{display:flex;flex-direction:column;gap:6px;align-items:flex-start;color:var(--ink)}
.sales-offline-body p{margin:0;overflow-wrap:anywhere}

/* Sell tile: which ingredient is out, under the Out pill (Eden 2026-10-04) */
.sell-tile-short{font-size:11px;line-height:1.25;color:var(--danger);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;margin-top:-4px}

/* Open-tabs strip (Dinktopia 2026-10-08): unpaid tabs shown big above search so they cannot be
   missed. Orange attention style; a tab open over 12 h turns red and sorts first. */
.sell-opentabs{min-width:0;max-width:100%;padding:12px;border:2px solid var(--orange);border-radius:14px;background:var(--orange-tint);box-shadow:0 2px 10px rgba(240,90,40,.15)}
.sell-opentabs.late{border-color:var(--danger);background:var(--danger-tint);box-shadow:0 2px 10px rgba(220,38,38,.15)}
.sell-opentabs-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-bottom:10px;color:var(--orange)}
.sell-opentabs.late .sell-opentabs-head{color:var(--danger)}
.sell-opentabs-head svg{flex:0 0 auto}
.sell-opentabs-title{font-size:17px;color:var(--ink)}
.sell-opentabs-late{font-size:12px;font-weight:700;color:#fff;background:var(--danger);border-radius:999px;padding:3px 9px}
.sell-opentabs-all{margin-left:auto;min-height:40px;padding:0 14px;border:1px solid currentColor;background:#fff;color:inherit;font-weight:700;border-radius:999px}
.sell-opentabs-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.sell-otab{display:flex;flex-direction:column;gap:4px;min-width:0;min-height:96px;padding:12px 14px;border:1px solid var(--line);border-left:5px solid var(--orange);border-radius:12px;background:#fff;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.sell-otab:hover{box-shadow:0 2px 10px rgba(20,30,39,.12)}
.sell-otab:active{transform:scale(.98)}
.sell-otab.late{border-left-color:var(--danger)}
.sell-otab.on{border-color:var(--orange);outline:2px solid var(--orange);outline-offset:-1px}
.sell-otab-top{display:flex;align-items:center;gap:6px;min-width:0}
.sell-otab-name{min-width:0;flex:1 1 auto;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sell-otab-late{flex:0 0 auto;font-size:11px;font-weight:700;color:#fff;background:var(--danger);border-radius:999px;padding:2px 7px}
.sell-otab-amt{font-size:22px;line-height:1.15;color:var(--ink)}
.sell-otab.late .sell-otab-amt{color:var(--danger)}
.sell-otab-meta{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:860px){
  .sell-opentabs{padding:10px}
  .sell-opentabs-title{font-size:16px}
  .sell-opentabs-row{display:flex;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin:0 -2px}
  .sell-otab{flex:0 0 min(210px,72%);scroll-snap-align:start}
}
/* Tabs button count badge: "Tabs 2"; red when a tab is over 12 h */
.sell-tabsbtn.has-open{border-color:var(--orange);color:var(--orange)}
.sell-tabsbtn.late{border-color:var(--danger);color:var(--danger)}
.sell-tabsbtn-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--orange);color:#fff;font-size:12.5px;font-weight:800;line-height:1}
.sell-tabsbtn.late .sell-tabsbtn-count{background:var(--danger)}
.sell-tabsbtn-count.hidden{display:none}