/* ChainLine POS — Design system v3 additions
 * Tokens + classes for everything added in Round 3 (Lightspeed benchmark).
 * Load AFTER pos-styles-v2.css.
 *
 * In index.html, add:
 *   <link rel="stylesheet" href="/pos-styles-v3.css?v=1">
 */

/* ── New semantic colour: violet (for Estimate/Waiting/Consignment) ── */
:root {
  --violet-fg:   #a78bfa;
  --violet-bg:   rgba(167, 139, 250, 0.12);
  --violet-line: rgba(167, 139, 250, 0.32);

  --teal-fg:     #4dc6c6;
  --teal-bg:     rgba(77, 198, 198, 0.12);
  --teal-line:   rgba(77, 198, 198, 0.32);
}

/* ── Expanded badge variants — each status gets a distinct accent ──
 * Override base (.badge.open=blue, .badge.booked=amber, .badge.inprogress=grey)
 * to give every status its own colour so the floor + WO list read at a glance.
 * Mapping (post-Lightspeed parity):
 *   booked       → violet   (parked / scheduled)
 *   open         → amber    (intake done, queued)
 *   inprogress   → blue     (active work)
 *   ready        → green    (already in base)
 *   parts-ordered→ amber    (waiting on parts)
 *   so-arrived   → teal     (special-order arrived)
 *   ra           → red      (warranty / RA!)
 *   overdue      → red      (already in base)
 *   estimate     → yellow   (quote not yet a WO)
 *   waiting      → violet   (waiting on customer)
 *   consignment  → teal     (consignment bike)
 *   done         → muted    (finished work, not yet paid)
 *   done-paid    → muted    (finished + paid)
 *   finished     → muted    (closed)
 *   closed       → muted    (already in base)
 *   cancelled    → muted strikethrough
 */

/* booked → violet (override base amber) */
.badge.booked, .badge-booked {
  color: var(--violet-fg) !important;
  background: var(--violet-bg) !important;
  border-color: var(--violet-line) !important;
}

/* open → amber (override base blue) */
.badge.open, .badge-open {
  color: var(--amber-fg) !important;
  background: var(--amber-bg) !important;
  border-color: var(--amber-line) !important;
}

/* inprogress → blue (override base muted grey) */
.badge.inprogress, .badge-inprogress,
.badge.in-progress, .badge-in-progress {
  color: var(--blue-fg) !important;
  background: var(--blue-bg) !important;
  border-color: var(--blue-line) !important;
}

/* waiting / consignment / violet — kept */
.badge.violet, .badge-violet,
.badge.waiting, .badge-waiting {
  color: var(--violet-fg);
  background: var(--violet-bg);
  border-color: var(--violet-line);
}

.badge.consignment, .badge-consignment {
  color: var(--teal-fg);
  background: var(--teal-bg);
  border-color: var(--teal-line);
}

/* estimate → yellow (use amber tone) */
.badge.estimate, .badge-estimate {
  color: #facc15;
  background: rgba(250, 204, 21, 0.10);
  border-color: rgba(250, 204, 21, 0.30);
}

.badge.parts-ordered, .badge-parts-ordered {
  color: var(--amber-fg);
  background: var(--amber-bg);
  border-color: var(--amber-line);
}

.badge.so-arrived, .badge-so-arrived {
  color: var(--teal-fg);
  background: var(--teal-bg);
  border-color: var(--teal-line);
}

.badge.ra, .badge-ra {
  color: #ff6b5e;
  background: var(--accent-glow);
  border-color: var(--accent-dim);
}

.badge.done, .badge-done,
.badge.finished, .badge-finished {
  color: var(--green-fg);
  background: var(--green-bg);
  border-color: var(--green-line);
  opacity: 0.65;
}

.badge.done-paid, .badge-done-paid {
  color: var(--text3);
  background: var(--bg3);
  border-color: var(--line2);
}

.badge.cancelled, .badge-cancelled {
  color: var(--text3);
  background: var(--bg3);
  border-color: var(--line2);
  text-decoration: line-through;
}

/* ── Customer type chip (STAFF / WHOLESALE / FRIENDS) ── */
.customer-chip {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--line3);
  vertical-align: middle;
}
.customer-chip-staff       { color: var(--amber-fg);  border-color: var(--amber-line); }
.customer-chip-wholesale   { color: var(--blue-fg);   border-color: var(--blue-line); }
.customer-chip-friends     { color: var(--violet-fg); border-color: var(--violet-line); }
.customer-chip-vip         { color: var(--accent);    border-color: var(--accent-dim); }

/* ── WO action bar buttons (Print Tag, Request Payment) ── */
.wo-action-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.wo-action-bar .btn {
  height: 32px;
  font-size: 12px;
}

/* ── Hook In/Out input — slightly emphasised ── */
.hook-input {
  background: var(--bg2) !important;
  border-color: var(--line3) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.hook-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}

/* ── Warranty/Save Parts inline toggles ── */
.wo-flags {
  display: flex;
  gap: 18px;
  margin: 6px 0 0;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--line);
}
.wo-flags .toggle { gap: 8px; }
.wo-flags .toggle .lbl { font-size: 12px; }
.wo-flags .toggle .lbl-sub { font-size: 9px; }

.wo-flag-warranty.is-on {
  background: rgba(214,70,58,0.06);
  border-color: rgba(214,70,58,0.32);
}

/* ── Mechanic timer (live ticker on WO) ── */
.wo-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  font-family: var(--mono);
}
.wo-timer .wo-timer-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text3);
}
.wo-timer.is-running .wo-timer-dot {
  background: var(--green-fg);
  box-shadow: 0 0 6px var(--green-fg);
  animation: pulse 2s ease-in-out infinite;
}
.wo-timer-elapsed {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.wo-timer-btn {
  background: transparent;
  border: 1px solid var(--line2);
  color: var(--text);
  padding: 3px 9px;
  font-family: var(--ui);
  font-size: 11px;
  cursor: pointer;
}
.wo-timer-btn:hover { background: var(--bg3); }
.wo-timer-btn.is-stop { color: var(--red-fg); border-color: rgba(214,70,58,0.32); }

/* ── WO photos gallery ── */
.wo-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  margin: 8px 0;
}
.wo-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg2);
  border: 1px solid var(--line2);
  overflow: hidden;
  cursor: pointer;
}
.wo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wo-photo .wo-photo-del {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.6);
  border: 0;
  color: #fff;
  font-family: var(--mono);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.wo-photo:hover .wo-photo-del { background: var(--red-fg); }
.wo-photo-add {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line3);
  color: var(--text3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.wo-photo-add:hover { color: var(--text); border-color: var(--text3); }

/* ── Cash denomination quick-buttons (port from EOD) ── */
.cash-denom-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin: 10px 0;
}
.cash-denom-btn {
  padding: 12px 6px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 80ms, border-color 80ms;
}
.cash-denom-btn:hover { background: var(--bg3); border-color: var(--line3); }
.cash-denom-btn:disabled,
.cash-denom-btn.is-empty {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ── Customer Items tab table ── */
.customer-items-tbl td {
  vertical-align: middle;
}
.customer-items-tbl .serial {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  letter-spacing: 0.04em;
}

/* ── Vendor sheet sidebar on PO ── */
.po-vendor-sheet {
  width: 320px;
  flex-shrink: 0;
}
.po-vendor-sheet .card-head h3 { font-size: 14px; }

/* ── Shop Floor (Kanban) ── */
.floor-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line2);
  border: 1px solid var(--line2);
  overflow-x: auto;
  min-height: calc(100vh - 200px);
}
.floor-column {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-width: 260px;
}
.floor-column-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line2);
  display: flex; align-items: center; gap: 8px;
  background: var(--bg2);
  position: sticky; top: 0; z-index: 1;
}
.floor-column-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
}
.floor-column-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text2);
  background: var(--bg);
  border: 1px solid var(--line2);
  padding: 1px 6px;
  font-variant-numeric: tabular-nums;
}
.floor-column-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
}
.floor-card {
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--text3);
  padding: 10px 12px;
  cursor: grab;
  transition: background 80ms;
  /* Allow native drag gestures on touch devices (HTML5 drag-and-drop) */
  touch-action: none;
  user-select: none;
}
.floor-card:active { cursor: grabbing; }
.floor-card:hover { background: var(--bg3); }
.floor-card.is-overdue { border-left-color: var(--red-fg); }
.floor-card.is-prio { border-left-color: var(--accent); }
.floor-card-id {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
}
.floor-card-cust {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  margin-top: 2px;
}
.floor-card-bike {
  font-size: 11px;
  color: var(--text2);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.floor-card-foot {
  display: flex; align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.floor-card-due {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text2);
}
.floor-card-due.is-overdue { color: var(--red-fg); }
.floor-card-mech { margin-left: auto; }
.floor-card-hook {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--amber-fg);
  background: var(--amber-bg);
  border: 1px solid var(--amber-line);
  padding: 1px 5px;
  text-transform: uppercase;
}

/* ── Kanban drag-and-drop ── */
.floor-card {
  user-select: none;
}
.floor-card[draggable="true"]:active { cursor: grabbing; }
.floor-card.is-dragging {
  opacity: 0.4;
  transform: rotate(-1deg);
}
body.floor-dragging .floor-column {
  transition: background 80ms, box-shadow 80ms;
}
body.floor-dragging .floor-column:not(.drop-target) {
  background: var(--bg);
}
.floor-column.drop-target {
  background: var(--accent-glow);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.floor-column.drop-target .floor-column-head {
  background: var(--accent-glow);
  color: var(--accent);
}

/* ── Mechanic top filter on floor view ── */
.floor-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.floor-mech-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 4px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  color: var(--text2);
  font-family: var(--ui);
  font-size: 12px;
  cursor: pointer;
}
.floor-mech-pill .av-init { width: 18px; height: 18px; font-size: 9px; }
.floor-mech-pill.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--text);
}

/* ── My Queue list ── */
.queue-empty {
  padding: 60px 16px;
  text-align: center;
  color: var(--text2);
  border: 1px solid var(--line2);
  background: var(--bg);
}
.queue-empty .glyph {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 8px;
}

/* ── Hook column on WO list ── */
.tbl .cell-hook {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--amber-fg);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tbl .cell-hook.empty { color: var(--text3); font-weight: 400; }

/* ── Parked sales tray (Sales register) ── */
.parked-tray {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.parked-tray .label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-right: 6px;
}
.parked-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--bg);
  border: 1px solid var(--line3);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  cursor: pointer;
}
.parked-chip:hover { background: var(--bg3); border-color: var(--accent); }
.parked-chip-wo { color: var(--amber-fg); border-color: var(--amber-line); }

/* ── Internal note style: muted background to distinguish from receipt note ── */
.note-internal textarea {
  background: rgba(214,70,58,0.04);
  border-color: rgba(214,70,58,0.2);
}
.note-internal .field-hint { color: var(--red-fg); opacity: 0.7; }

/* ── RA! / Warranty workflow callout ── */
.ra-callout {
  padding: 12px 14px;
  background: var(--accent-glow);
  border: 1px solid var(--accent-dim);
  margin: 10px 0;
  font-size: 12px;
  color: var(--text);
}
.ra-callout-head {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}

/* ── Top tab variant for customer detail (replaces left-rail) ── */
.detail-top-tabs {
  display: flex;
  border-bottom: 1px solid var(--line2);
  margin-bottom: 16px;
  overflow-x: auto;
}
.detail-top-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text2);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 80ms;
}
.detail-top-tab:hover { color: var(--text); }
.detail-top-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.detail-top-tab-count {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  background: var(--bg3);
  padding: 1px 5px;
}
.detail-top-tab.active .detail-top-tab-count { color: var(--text); background: var(--bg2); }

/* ── Show kbd hints next to action labels ── */
.action-with-kbd {
  display: inline-flex; align-items: baseline; gap: 6px;
}
.action-with-kbd .kbd {
  font-size: 9px;
  padding: 1px 4px;
}

/* ── Workorder header customer block — make STAFF chip read well ── */
.wo-customer-header {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  flex-wrap: wrap;
}
.wo-customer-header .label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
}
.wo-customer-header .name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* ── Public customer status page (wo-status.html) lives off this file too ── */


/* ════════════════════════════════════════════════════════════════════
   MOBILE — Round 3 module overrides (workorder presets, shop floor,
   sales register, customer detail tabs, parked tray)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Workorder preset bar — wrap categories, stack search ── */
  .wo-preset-top {
    flex-wrap: wrap;
    gap: 8px;
  }
  .wo-preset-search {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    order: -1;
  }
  .wo-preset-search .input { height: 40px !important; font-size: 16px !important; }
  .wo-preset-cat {
    height: 40px;
    padding: 0 12px;
    font-size: 12px;
    flex: 0 0 auto;
  }
  /* Preset grid — 2-up on narrow screens (cards stay tappable) */
  .wo-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .preset-btn { min-height: 64px; }

  /* ── Cash denomination buttons — at least 56px tall ── */
  .cash-denom-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }
  .cash-denom-btn {
    min-height: 56px;
    font-size: 15px;
    padding: 10px 4px;
  }
  /* Form input inside cash modal — tall and touch-friendly */
  .form-input {
    min-height: 48px !important;
    font-size: 18px !important;
  }

  /* ── Customer detail top tabs — horizontal scroll (already overflow-x:auto, reinforce) ── */
  .detail-top-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .detail-top-tabs::-webkit-scrollbar { display: none; }
  .detail-top-tab {
    flex-shrink: 0;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 13px;
  }

  /* ── Parked sales tray — wrap chips, larger tap targets ── */
  .parked-tray {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
  }
  .parked-chip {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 12px;
  }

  /* ── Sales register — collapse 2-col cart/checkout on mobile ──
     The SalesScreen renders an inline grid: 1.5fr | 1fr. React serialises
     this as style="grid-template-columns:1.5fr 1fr". Stack to 1 col so
     the cart panel and totals/pay stack vertically (page scrolls). */
  div[style*="1.5fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Also catch NewWO right-aside layout (gridTemplateColumns: 1fr 360px) */
  div[style*="1fr 360px"] {
    grid-template-columns: 1fr !important;
  }

  /* Pay buttons (Cash / Card / Other) — full-width grid, tall */
  .pay-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .pay-btn {
    min-height: 64px !important;
    font-size: 14px;
  }

  /* Cart line rows — at least 44px tappable; wrap qty stepper if needed */
  .line-row {
    padding: 10px 12px;
    min-height: 56px;
    gap: 8px;
  }
  .qty-stepper button {
    min-width: 36px;
    min-height: 36px;
    font-size: 16px;
  }
  .qty-stepper input {
    min-width: 44px;
    min-height: 36px;
    font-size: 15px;
    text-align: center;
  }

  /* Item search results — bigger rows */
  .item-row {
    min-height: 56px;
    padding: 12px 14px;
  }

  /* ── Shop floor — single-column horizontal scroll (1 column visible at a time) ── */
  .floor-board {
    grid-template-columns: repeat(6, 84vw) !important;
    grid-auto-flow: column;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 8px;
    background: transparent;
    border: 0;
    min-height: calc(100vh - 240px);
  }
  .floor-column {
    scroll-snap-align: start;
    min-width: 84vw;
    border: 1px solid var(--line2);
  }
  .floor-column-head { padding: 12px; }
  .floor-card {
    /* On touch devices, let users tap-to-move via long-press menu;
       keep drag enabled but make tap-target generous */
    padding: 12px 14px;
    min-height: 64px;
    touch-action: manipulation; /* override touch-action:none on touch — long-press still works for drag start */
  }
  .floor-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .floor-filter-bar::-webkit-scrollbar { display: none; }
  .floor-mech-pill {
    flex-shrink: 0;
    min-height: 38px;
  }

  /* ── WO action bar buttons — wrap, full-height ── */
  .wo-action-bar .btn {
    min-height: 40px;
    font-size: 13px;
  }

  /* ── New Work Order — sticky bottom action bar on mobile ──
     The .new-wo-mobile-foot is appended in pos-app.js NewWorkOrderScreen
     and contains the Create button. Hidden on desktop via the
     :not(@media max-width:768px) display:none above. */
  .new-wo-mobile-foot {
    display: flex;
    gap: 8px;
    position: sticky;
    bottom: 72px; /* sit above bottom nav (56px nav + safe-area buffer) */
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 72px));
    left: 0; right: 0;
    background: var(--bg-1, var(--bg));
    border-top: 1px solid var(--line2);
    padding: 10px 12px;
    margin: 16px -12px 0; /* extend to page edges */
    z-index: 50;
  }
  .new-wo-mobile-foot .btn {
    flex: 1;
    min-height: 48px;
    justify-content: center;
  }
}

/* Hide the mobile-only sticky create bar on desktop */
.new-wo-mobile-foot { display: none; }

/* Narrower phones — go single column for preset grid + denoms */
@media (max-width: 420px) {
  .wo-preset-grid { grid-template-columns: 1fr !important; }
  .cash-denom-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}