/* ═══════════════════════════════════════════════════════════════════
   EZY Workshop Agent — Tuck Shop: POS terminal, Manage tab, customer kiosk

   The POS and the customer shop share one layout language, the way a
   fast-food self-order kiosk and its till do: a category rail, big
   tap-to-add product tiles, and a cart column with steppers and one big
   commit button. Everything an Operator taps mid-rush is at least 44px.
   Loaded after style.css and leans on its variables.
   ═══════════════════════════════════════════════════════════════════ */

/* ── POS tab shell ───────────────────────────────────────────────── */

.tuck-pos {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.pos-subnav {
  display: flex;
  gap: var(--space-sm);
}

.pos-subtab {
  padding: 10px 20px;
  min-height: 44px;
  border: 1px solid var(--bubble-agent-border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.pos-subtab.active {
  background: var(--ezy-blue);
  border-color: var(--ezy-blue);
  color: var(--text-white);
}

.pos-badge {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--status-pending);
  color: var(--text-white);
  font-size: var(--font-size-sm);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── The sell view: menu on the left, cart on the right ──────────── */

.pos-sell-view {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.pos-menu {
  flex: 1;
  min-width: 0;
}

/* ── Category rail (POS and shop share these classes) ────────────── */

.pos-category-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.pos-category {
  padding: 8px 18px;
  min-height: 44px;
  border: 1px solid var(--bubble-agent-border);
  border-radius: 22px;
  background: var(--bg-white);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  cursor: pointer;
}

.pos-category.active {
  background: var(--ezy-blue);
  border-color: var(--ezy-blue);
  color: var(--text-white);
  font-weight: 600;
}

/* ── Product tiles ───────────────────────────────────────────────── */

.pos-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-sm);
}

.pos-tile {
  min-height: 96px;
  padding: var(--space-sm);
  border: 1px solid var(--bubble-agent-border);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xs);
  text-align: left;
}

.pos-tile:active {
  background: var(--ezy-blue-light);
  border-color: var(--ezy-blue);
}

.pos-tile-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

.pos-tile-price {
  font-size: var(--font-size-base);
  color: var(--ezy-blue);
  font-weight: 700;
}

.pos-tile-stock {
  font-size: var(--font-size-sm);
  color: var(--status-pending);
  font-weight: 600;
}

/* Sold out stays visibly on the menu — "why can't I ring it up" answers
   itself — but nothing about the tile invites a tap. */
.pos-tile.sold-out {
  cursor: not-allowed;
  opacity: 0.5;
}

.pos-tile.sold-out .pos-tile-stock {
  color: var(--status-offline);
}

/* ── The cart column ─────────────────────────────────────────────── */

.pos-cart {
  width: 340px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--bg-white);
  border: 1px solid var(--bubble-agent-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pos-settlement {
  display: flex;
  gap: var(--space-sm);
}

.pos-settle-btn {
  flex: 1;
  min-height: 48px;
  border: 1px solid var(--bubble-agent-border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text-secondary);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
}

.pos-settle-btn.active {
  background: var(--ezy-blue-light);
  border-color: var(--ezy-blue);
  color: var(--ezy-blue-dark);
}

.pos-customer-btn {
  min-height: 48px;
  border: 1px dashed var(--ezy-blue);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--ezy-blue);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
}

.pos-customer-btn.has-customer {
  border-style: solid;
  background: var(--ezy-blue-light);
  color: var(--ezy-blue-dark);
}

#pos-customer-limit {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

#pos-customer-limit.over-limit {
  color: var(--status-pending);
  font-weight: 600;
}

/* Card only: the optional Yoco-statement note. Same footprint as the customer
   button it replaces on a card sale, so the cart below does not jump. */
.pos-card-descriptor {
  min-height: 48px;
  padding: 0 var(--space-sm);
  border: 1px dashed var(--bubble-agent-border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  color: var(--text-primary);
  font-size: var(--font-size-base);
}

/* Cart lines with steppers */

.pos-cart-lines {
  display: flex;
  flex-direction: column;
}

.pos-line {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--bubble-agent-border);
}

.pos-line-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pos-line-name {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-line-each {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.pos-line-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.pos-step {
  width: 44px;
  height: 44px;
  border: 1px solid var(--bubble-agent-border);
  border-radius: var(--radius-sm);
  background: var(--bg-chat);
  color: var(--text-primary);
  font-size: var(--font-size-lg);
  font-weight: 700;
  cursor: pointer;
}

.pos-step:active {
  background: var(--ezy-blue-light);
}

.pos-line-qty {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
}

.pos-line-total {
  min-width: 72px;
  text-align: right;
}

.pos-cart-empty {
  color: var(--text-muted);
  padding: var(--space-md) 0;
  text-align: center;
}

.pos-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--font-size-lg);
  padding-top: var(--space-sm);
}

.pos-total-row strong {
  font-size: var(--font-size-xl);
}

.pos-charge-btn {
  min-height: 64px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--status-online);
  color: var(--text-white);
  font-size: var(--font-size-lg);
  font-weight: 700;
  cursor: pointer;
}

.pos-charge-btn:disabled {
  background: var(--text-muted);
  cursor: not-allowed;
}

.pos-clear-btn {
  min-height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--status-offline);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
}

.pos-last-sale {
  border-top: 1px solid var(--bubble-agent-border);
  padding-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ── Customer picker modal ───────────────────────────────────────── */

.pos-customer-modal {
  max-width: 640px;
  width: 90vw;
}

#pos-customer-search {
  width: 100%;
  min-height: 48px;
  padding: 8px 12px;
  font-size: var(--font-size-base);
  margin: var(--space-sm) 0 var(--space-md);
}

.pos-customer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-sm);
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: var(--space-md);
}

.pos-customer-tile {
  min-height: 64px;
  padding: var(--space-sm);
  border: 1px solid var(--bubble-agent-border);
  border-radius: var(--radius-md);
  background: var(--bg-white);
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
}

.pos-customer-tile:active {
  background: var(--ezy-blue-light);
  border-color: var(--ezy-blue);
}

/* ── Manage tab: pill nav, one section at a time ─────────────────── */

.manage-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.manage-pill {
  padding: 8px 18px;
  min-height: 44px;
  border: 1px solid var(--bubble-agent-border);
  border-radius: 22px;
  background: var(--bg-white);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  cursor: pointer;
}

.manage-pill.active {
  background: var(--ezy-blue);
  border-color: var(--ezy-blue);
  color: var(--text-white);
  font-weight: 600;
}

/* One section shows at a time; the pills choose which. A section still
   carrying .hidden (role-gated) never gets a pill and never shows —
   .hidden's !important outranks .manage-active by design. */
#tuck-manage-container section {
  display: none;
}

#tuck-manage-container section.manage-active {
  display: block;
  background: var(--bg-white);
  border: 1px solid var(--bubble-agent-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
}

/* ── Customer kiosk ──────────────────────────────────────────────── */

/* style.css styles the bare <header> element as the app's fixed top bar
   (position: fixed, top: 0, header height, dark background). This header is
   page content, not chrome — reset every one of those properties or the
   kiosk's balance cards float over the shop and the page scrolls behind them. */
.shop-header {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  height: auto;
  background: none;
  color: inherit;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: stretch;
  justify-content: flex-start;
  margin-bottom: var(--space-md);
}

.shop-identity {
  flex: 1 1 240px;
}

.shop-figure-card {
  background: var(--bg-white);
  border: 1px solid var(--bubble-agent-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md);
  min-width: 200px;
}

.shop-figure-card > label,
.shop-figure-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.shop-figure {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text-primary);
}

.shop-figure-detail {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.shop-statement summary {
  cursor: pointer;
  color: var(--ezy-blue);
  font-size: var(--font-size-sm);
  margin-top: var(--space-xs);
}

/* The kiosk itself: same rail/tiles/cart as the POS */

.shop-layout {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin-top: var(--space-md);
}

.shop-menu {
  flex: 1;
  min-width: 0;
}

.shop-basket {
  width: 340px;
}

.shop-slot-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.shop-slot-bar {
  display: flex;
  gap: var(--space-sm);
}

.shop-slot {
  flex: 1;
  min-height: 56px;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--bubble-agent-border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.shop-slot.active {
  background: var(--ezy-blue-light);
  border-color: var(--ezy-blue);
}

.shop-slot-name {
  font-weight: 600;
  color: var(--text-primary);
}

.shop-slot-cutoff {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.shop-account {
  margin-top: var(--space-lg);
}

.shop-account summary {
  cursor: pointer;
  color: var(--ezy-blue);
  font-weight: 600;
}

/* ── Manage tab: forms, controls and tables ──────────────────────── */

/* Every text control in a manage section is a comfortable tap target and
   never wider than the card. 16px stops iOS zooming the page on focus. */
#tuck-manage-container section input:not([type="checkbox"]),
#tuck-manage-container section select {
  display: block;
  width: 100%;
  max-width: 420px;
  min-height: 44px;
  padding: 8px 12px;
  margin: 0 0 var(--space-sm);
  font-size: 16px;
  border: 1px solid var(--bubble-agent-border);
  border-radius: var(--radius-sm);
  background: var(--bg-white);
  box-sizing: border-box;
}

#tuck-manage-container section .btn {
  min-height: 44px;
}

/* The entry forms lay out as a responsive grid: fields side by side where
   there is room, a single stacked column on a phone. .hidden's !important
   still wins over these display values, so role-gating is untouched. */
#tuck-customer-form,
#tuck-product-form,
#tuck-receive-form,
#tuck-loss-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-sm);
  align-items: start;
  margin-bottom: var(--space-md);
}

#tuck-manage-container #tuck-customer-form input,
#tuck-manage-container #tuck-product-form input,
#tuck-manage-container #tuck-product-form select,
#tuck-manage-container #tuck-receive-form input,
#tuck-manage-container #tuck-receive-form select,
#tuck-manage-container #tuck-loss-form input,
#tuck-manage-container #tuck-loss-form select {
  max-width: none;
  margin: 0;
}

/* Explanatory copy and the submit each take a full row of the grid. */
#tuck-loss-form > p,
#tuck-customer-form .btn,
#tuck-product-form .btn,
#tuck-receive-form .btn,
#tuck-loss-form .btn {
  grid-column: 1 / -1;
}

/* The Paid-from toggle on the receive form spans the row, like the submit button,
   and its two buttons are the POS settlement buttons, not form-wide .btn. */
#tuck-receive-form .tk-paid-by {
  grid-column: 1 / -1;
}
#tuck-receive-form .tk-paid-by .pos-settle-btn {
  grid-column: auto;
  justify-self: stretch;
}

#tuck-customer-form .btn,
#tuck-product-form .btn,
#tuck-receive-form .btn,
#tuck-loss-form .btn {
  justify-self: start;
}

/* Inline filter rows (limit dates, loss status, profit period) keep their
   labels tight against a stacked control. */
#tuck-manage-container section p > label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: 2px;
}

/* Wide ledgers scroll sideways inside their own rail instead of pushing
   the whole card off the phone screen. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-sm) 0;
}

#tuck-manage-container section table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

#tuck-manage-container section th,
#tuck-manage-container section td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--bubble-agent-border);
}

#tuck-manage-container section th {
  white-space: nowrap;
  color: var(--text-secondary);
  font-weight: 600;
}

/* The stock-take count boxes live inside table cells — cell-sized, not
   block controls. */
#tuck-manage-container #tuck-count-table input {
  display: inline-block;
  width: 90px;
  min-width: 0;
  margin: 0;
}

/* ── Small screens: the cart drops below the menu ────────────────── */

@media (max-width: 860px) {
  .pos-sell-view,
  .shop-layout {
    flex-direction: column;
  }

  .pos-cart,
  .shop-basket {
    width: 100%;
    position: static;
  }

  .pos-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  /* On a phone the grid forms are one column and the submit spans it. */
  #tuck-customer-form .btn,
  #tuck-product-form .btn,
  #tuck-receive-form .btn,
  #tuck-loss-form .btn {
    justify-self: stretch;
  }
}