/* ============================================================
   POS view — split layout, product grid, cart, payment, shift
   ============================================================ */
#view-pos.active { display: grid; }
#view-pos {
  /* The cart scales with the screen instead of holding a fixed 360px floor: on a
     tablet that floor was what pushed the till into the stacked phone layout. */
  grid-template-columns: 1fr clamp(280px, 32%, 440px);
  gap: var(--s4); padding: var(--s4);
  /* The shell's .app-body owns the viewport height; fill it. */
  height: 100%; min-height: 0;
}

.pos-left { display: flex; flex-direction: column; gap: var(--s3); min-height: 0; }

/* Shift gate banner */
.shift-gate {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r);
  background: var(--warn-weak); border: 1px solid transparent; color: var(--warn);
}
.shift-gate .gate-text { flex: 1; }
.shift-gate .gate-text b { display: block; color: var(--text); font-size: var(--fs-base); }
.shift-gate .gate-text small { color: var(--text-2); }

.scan-row { display: flex; gap: var(--s2); }
.scan-field { position: relative; flex: 1; display: flex; align-items: center; }
.scan-field .ic { position: absolute; left: var(--s3); color: var(--text-3); pointer-events: none; }
.scan-field input { height: 48px; padding-left: var(--s8); font-size: var(--fs-md); }
.scan-row .btn { height: 48px; }

.product-grid {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s3); align-content: start; padding-bottom: var(--s3);
}
/* "no products" is a message about the whole grid, not an item in it. */
.product-grid .cart-empty { grid-column: 1 / -1; }
.prod-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s2);
  min-height: 96px; padding: var(--s3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  text-align: left; box-shadow: var(--shadow-1);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.prod-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-2); }
.prod-card:active { transform: scale(.98); }
.prod-card.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.prod-card.out { opacity: .55; }
.prod-card .pname { font-weight: 600; font-size: var(--fs-sm); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod-card .pprice { font-weight: 800; font-variant-numeric: tabular-nums; }
.prod-card .pstock { font-size: var(--fs-xs); color: var(--text-3); }
.prod-card .pstock.low { color: var(--danger); font-weight: 700; }

/* ---------- Cart (right rail) ---------- */
.pos-right {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden;
}
.cart-header { display: flex; align-items: center; justify-content: space-between;
  padding: var(--s4); border-bottom: 1px solid var(--border); font-weight: 700; }
.cart-items { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s2); }
.cart-empty { padding: var(--s7) var(--s4); text-align: center; color: var(--text-3);
  display: flex; flex-direction: column; gap: var(--s1); }
.cart-empty small { color: var(--text-3); }

.cart-line { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s2);
  padding: var(--s3); border-radius: var(--r-sm); align-items: center;
  transition: background var(--dur-fast) var(--ease); }
.cart-line:hover { background: var(--surface-2); }
.cart-line.sel { background: var(--accent-weak); box-shadow: inset 3px 0 0 var(--accent); }
.cart-line .cname { font-weight: 600; }
.cart-line .cunit { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.cart-line .ctotal { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.qty-controls { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s2); margin-top: 6px; }
.qty-controls button { width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-lg);
  font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.qty-controls button:hover { background: var(--surface-2); }
.qty-controls .qv { min-width: 34px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.qty-controls .del { margin-left: auto; color: var(--danger); border-color: transparent; }
.qty-controls .del:hover { background: var(--danger-weak); }

.cart-totals { padding: var(--s3) var(--s4); border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--s2); background: var(--surface-2); }
.cart-totals .row { display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-base); }
.cart-totals .row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.cart-totals .discount-row input { width: 120px; height: 34px; text-align: right; }
.cart-totals .promo-row select { width: 60%; height: 34px; }
.cart-totals .grand { padding-top: var(--s2); border-top: 1px dashed var(--border-strong);
  font-size: var(--fs-lg); font-weight: 800; }
.cart-totals .grand span:last-child { font-size: var(--fs-xl); color: var(--money); }

.cart-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s2);
  padding: var(--s3) var(--s4) 0; }
.cart-actions .btn { height: 40px; padding: 0; font-size: var(--fs-sm); }
.pos-right .kbd-hints { padding: var(--s2) var(--s4); flex-direction: column; align-items: flex-start; gap: 4px; }

/* cash field + its keyboard toggle */
.pay-amount-row { display: flex; gap: var(--s2); align-items: center; }
.pay-amount-row #payAmount { flex: 1; min-width: 0; }
.pay-amount-row .icon-btn { flex: none; width: 48px; height: 48px; }
.pay-amount-row .icon-btn.active { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); }
#payAmount[readonly] { cursor: default; }
.btn.pay { margin: var(--s3) var(--s4) var(--s4); height: 56px; font-size: var(--fs-lg);
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  border-radius: var(--r); box-shadow: var(--shadow-2); }
.btn.pay:hover:not(:disabled) { background: var(--accent-hover); }
.btn.pay:disabled { background: var(--surface-3); color: var(--text-3); border-color: var(--border); box-shadow: none; }

/* ---------- Payment modal ---------- */
.pay-total { display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--s4); background: var(--surface-2); border-radius: var(--r); }
.pay-total span:last-child { font-size: var(--fs-3xl); font-weight: 800; color: var(--money);
  font-variant-numeric: tabular-nums; }
.pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.btn.pm { height: 56px; flex-direction: column; gap: 4px; font-size: var(--fs-sm); }
.btn.pm.active { border-color: var(--accent); background: var(--accent-weak); color: var(--accent); }
.btn.pm .ic { width: 22px; height: 22px; }
#payAmount { height: 52px; font-size: var(--fs-xl); text-align: right; font-weight: 700; }
.quick-cash { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.quick-cash button { height: 40px; border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--r-sm); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.quick-cash button:hover { background: var(--accent-weak); border-color: var(--accent-border); }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.numpad button { height: 52px; border: 1px solid var(--border-strong); background: var(--surface);
  border-radius: var(--r-sm); font-size: var(--fs-xl); font-weight: 700; }
.numpad button:hover { background: var(--surface-2); }
.numpad button:active { transform: translateY(1px); }
.pay-change { display: flex; align-items: baseline; justify-content: space-between;
  font-size: var(--fs-lg); font-weight: 700; padding: var(--s2) var(--s1); }
.pay-change span { font-variant-numeric: tabular-nums; color: var(--money); }
.pay-change.neg span { color: var(--danger); }

/* ---------- Done modal ---------- */
#doneModal { align-items: center; text-align: center; }
.done-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--success-weak);
  color: var(--success); display: flex; align-items: center; justify-content: center; }
.done-icon .ic { width: 40px; height: 40px; stroke-width: 2.5; }
.done-change { font-size: var(--fs-xl); font-weight: 700; }
.done-change span { color: var(--money); font-variant-numeric: tabular-nums; }
#doneModal .modal-actions { flex-direction: column; width: 100%; }
#doneModal .modal-actions .btn { justify-content: center; }

/* held / sale detail lists */
.held-row, .mini-row { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s3); border: 1px solid var(--border); border-radius: var(--r-sm);
  margin-bottom: var(--s2); }
.held-row > div:last-child { display: flex; gap: var(--s2); }
.mini-list { margin-top: var(--s3); display: flex; flex-direction: column; }
.mini-row { font-size: var(--fs-sm); }
#saleDetail .meta { color: var(--text-2); font-size: var(--fs-sm); margin-bottom: var(--s3); }
#saleDetail table td { padding: var(--s2) 0; border-bottom: 1px solid var(--border); }

/* ---------- ops (shift/cash/attendance) ---------- */
.ops-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s4); padding: var(--s4); align-items: start; }
.shift-status, .att-status { margin-bottom: var(--s3); font-size: var(--fs-base); }
.shift-summary { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3);
  background: var(--surface-2); border-radius: var(--r-sm); margin-bottom: var(--s3); }
.shift-summary .row { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.shift-summary .row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.shift-summary .row.grand { border-top: 1px dashed var(--border-strong); padding-top: var(--s2);
  font-weight: 700; font-size: var(--fs-base); }
.cash-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }

/* ---------- report grid ---------- */
.report-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); padding: 0 var(--s4) var(--s4); }
.report-grid .panel table { margin-top: var(--s2); }
.report-grid .panel td { padding: var(--s2); border-bottom: 1px solid var(--border); }
.report-grid .full { grid-column: 1 / -1; }

/* ---------- admin ---------- */
.admin-tabs { margin: var(--s4) var(--s4) 0; }
.admin-panel { padding: var(--s2) 0; }

/* ---------- responsive ----------
   The till stays side-by-side wherever two panes still fit, because stacking
   costs the cashier the one thing the layout is for: seeing the catalogue and
   the running total at the same time, without scrolling between them. */

/* Tablets, either orientation. Tighter gutters and a slimmer cart buy back the
   width the second pane needs; product cards shrink a little so a portrait
   tablet still shows two columns of them. */
@media (max-width: 1023px) {
  #view-pos { gap: var(--s3); padding: var(--s3); }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .report-grid { grid-template-columns: 1fr; }

  /* In a narrow cart the shortcut list wraps to six lines and costs ~160px that
     the basket needs more. The one shortcut worth surfacing is printed on the
     BAYAR button itself, which stays. */
  .pos-right .kbd-hints { display: none; }
}

/* A touch device has no keyboard to give these shortcuts, at any width. */
@media (pointer: coarse) {
  .pos-right .kbd-hints { display: none; }
}

/* Short viewports — a tablet on its side, or a small laptop. The basket was
   showing two of four lines because each one spent a whole second row on its
   quantity buttons; inline they cost nothing and the list roughly doubles. */
@media (max-height: 860px) {
  .cart-line { grid-template-columns: 1fr auto auto; gap: 2px var(--s3); }
  .cart-line .qty-controls { grid-column: auto; margin-top: 0; order: 2; }
  .cart-line .ctotal { order: 3; min-width: 76px; }
  .qty-controls button { width: 30px; height: 30px; }
  .qty-controls .qv { min-width: 26px; }
}

/* Phones: below this a second pane cannot be honest, so stack. The cart is
   capped rather than given a 60dvh floor — an empty cart used to claim most of
   the screen and squeeze the product grid into a single crushed row. */
@media (max-width: 767px) {
  #view-pos { grid-template-columns: 1fr; height: auto; }
  .product-grid { min-height: 34dvh; }
  .pos-right { min-height: 0; max-height: none; }
  #cartItems { min-height: 22dvh; max-height: 40dvh; }
}

@media (max-width: 560px) {
  #view-pos { padding: var(--s3); gap: var(--s3); }
  .cards { grid-template-columns: 1fr 1fr; padding: 0 var(--s3) var(--s3); }
  .cart-actions { grid-template-columns: 1fr 1fr; }
}