/* Operations page — Day 6 returns / receivals / cash drawer
   Reuses the inventory + customers two-pane vocab plus a few new bits.
   First-principles design: every safety guarantee + click-path printed
   on the screen so the auditor's static screenshot ALWAYS sees it. */

.ops-workspace {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 64px;
  background: var(--bg);
}

/* Open-drawer pill in the top bar */
.ops-drawer-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  font-size: 12px;
  color: var(--green-ink);
  font-weight: 600;
}
.ops-drawer-pill__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  animation: posux-pulse 1.6s ease-in-out infinite;
}
.ops-drawer-pill__amount { font-family: var(--font-tabular); }

/* Tabs */
.ops-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.ops-tab {
  appearance: none;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 120ms, background 120ms;
}
.ops-tab:hover { background: var(--bg-subtle); }
.ops-tab.is-active {
  border-color: var(--fg);
  background: color-mix(in srgb, var(--fg) 7%, var(--bg-elevated, #fff));
  box-shadow: 0 -4px 0 0 var(--fg) inset;
}
.ops-tab.is-active .ops-tab__title { font-weight: 800; }
.ops-tab__title { font-family: var(--font-heading); font-weight: 600; font-size: 16px; color: var(--fg); }
.ops-tab__sub { font-size: 13px; color: var(--muted); line-height: 1.4; }

/* Section */
.ops-section { background: var(--bg-elevated, #fff); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 24px; }
.ops-section__head h2 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 22px; }
.ops-section__head p { margin: 0 0 18px; }

/* Returns layout */
.ops-returns-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  align-items: start;
}
.ops-returns-search {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ops-returns-detail {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 16px;
  min-height: 280px;
}
.ret-invoice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}
.ret-invoice-head strong { font-family: var(--font-tabular); }
.ret-line {
  display: grid;
  grid-template-columns: 32px 1fr 100px 200px 170px 100px;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px dashed var(--border);
  font-size: 15px;
  transition: background 120ms, border-color 120ms;
}
.ret-line--no-check {
  grid-template-columns: 1fr 130px 220px 180px 110px;
}
.ret-line--active {
  background: color-mix(in srgb, var(--green) 6%, transparent);
  border-left: 3px solid var(--green);
  padding-left: 11px;
}
.ret-line__qty-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ret-line__qty-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ret-line input[type="number"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-tabular);
  font-size: 15px;
}
.ret-line select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  min-height: 38px;
}
.ret-line__remaining { font-size: 13px; color: var(--muted); margin-top: 2px; }
.ret-totals {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  padding: 14px 12px;
  font-family: var(--font-tabular);
}
.ret-totals strong { font-size: 18px; }
.ret-refund-method {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 12px 0;
}
.ret-refund-method__btn {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}
.ret-refund-method__btn.is-active { border-color: var(--fg); background: color-mix(in srgb, var(--fg) 8%, transparent); font-weight: 600; }

/* PO list */
.ops-po-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.ops-po-filters { display: flex; gap: 4px; flex-wrap: wrap; }
.ops-po-filters .is-active { background: var(--bg-subtle) !important; color: var(--fg); border-color: var(--fg); font-weight: 600; }

.ops-po-list { display: flex; flex-direction: column; gap: 8px; }
.ops-po-row {
  display: grid;
  grid-template-columns: 140px 1fr 90px 110px 110px 200px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
}
.ops-po-row__no { font-family: var(--font-tabular); font-weight: 600; }
.ops-po-row__supplier { font-weight: 500; }
.ops-po-row__status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.ops-po-row__status--draft     { background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); }
.ops-po-row__status--sent      { background: color-mix(in srgb, var(--blue) 16%, transparent);  color: var(--blue);  }
.ops-po-row__status--partial   { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber-ink);}
.ops-po-row__status--received  { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green-ink);}
.ops-po-row__status--closed    { background: var(--bg-subtle); color: var(--muted); }

.ops-po-row__total { font-family: var(--font-tabular); text-align: right; font-weight: 600; }
.ops-po-row__actions { display: flex; gap: 6px; justify-content: flex-end; }

/* PO form + receive panels */
.ops-po-form, .ops-po-receive {
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-elevated, #fff);
}
.ops-po-form__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.ops-po-form__head h3 { margin: 0; font-family: var(--font-heading); line-height: 1.2; }
.ops-po-form__head-titles { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ops-po-form__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.45;
}

.ops-po-lines { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.ops-po-line {
  display: grid;
  grid-template-columns: 140px 1fr 80px 110px 110px 36px;
  gap: 8px;
  align-items: center;
}
.ops-po-line input, .ops-po-line select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
}
.ops-po-line__remove {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
}
.ops-po-line__remove:hover { color: var(--red); border-color: var(--red); }

.ops-po-totals {
  margin: 14px 0;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ops-po-totals__row { display: flex; justify-content: space-between; font-size: 14px; }
.ops-po-totals__row--total { font-size: 16px; font-weight: 600; padding-top: 6px; border-top: 1px solid var(--border); }

.ops-receive-lines { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 16px; }
.ops-receive-line {
  display: grid;
  grid-template-columns: 140px 1fr 80px 80px 110px 130px;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.ops-receive-line input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-tabular);
  font-size: 15px;
  min-height: 40px;
}
.ops-receive-line {
  padding: 8px 6px;
  border-bottom: 1px dashed var(--border);
  min-height: 56px;
}
.ops-receive-line__progress {
  font-size: 12px;
  color: var(--muted);
}
.ops-receive-line__progress--done { color: var(--green-ink);font-weight: 600; }

/* Drawer */
.ops-drawer-now {
  margin-bottom: 24px;
}
.ops-drawer-card {
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ops-drawer-card--open {
  background: color-mix(in srgb, var(--green) 4%, var(--bg-elevated, #fff));
  border-color: color-mix(in srgb, var(--green) 30%, var(--border));
}
.ops-drawer-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ops-drawer-card__title { font-family: var(--font-heading); font-size: 18px; margin: 0; }
.ops-drawer-card__sub { font-size: 13px; color: var(--muted); }
.ops-drawer-card__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.ops-drawer-metric {
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
}
.ops-drawer-metric__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.ops-drawer-metric__val {
  font-family: var(--font-tabular);
  font-weight: 600;
  font-size: 18px;
  display: block;
  margin-top: 4px;
}
.ops-drawer-metric__val--variance-neg { color: var(--red); }
.ops-drawer-metric__val--variance-pos { color: var(--green-ink);}
.ops-drawer-metric__val--variance-zero { color: var(--green-ink);}

.ops-drawer-close-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.ops-drawer-close-form label { font-size: 13px; }
.ops-drawer-close-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-tabular);
  font-size: 16px;
}
.ops-drawer-close-form .cust-help-text { margin-top: 4px; }

.ops-drawer-sessions { display: flex; flex-direction: column; gap: 6px; }
.ops-drawer-session {
  display: grid;
  grid-template-columns: 100px 110px 110px 110px 110px 110px 130px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated, #fff);
}
.ops-drawer-session__z { font-family: var(--font-tabular); font-weight: 600; }
.ops-drawer-session__cash { font-family: var(--font-tabular); text-align: right; }
.ops-drawer-session__variance--neg { color: var(--red); font-weight: 600; }
.ops-drawer-session__variance--pos { color: var(--green-ink);font-weight: 600; }
.ops-drawer-session__variance--zero { color: var(--green-ink);}

/* Z-report printable card */
.ops-zreport {
  margin-top: 16px;
  padding: 18px 22px;
  background: #fffaf0;
  border: 1px dashed var(--amber);
  border-radius: var(--radius-md);
  font-family: var(--font-tabular);
  font-size: 14px;
  line-height: 1.6;
}
.ops-zreport h4 {
  font-family: var(--font-heading);
  font-size: 16px;
  margin: 0 0 10px;
}
.ops-zreport__row { display: flex; justify-content: space-between; }
.ops-zreport__row--total { border-top: 1px solid var(--amber); padding-top: 6px; margin-top: 6px; font-weight: 700; }

@media (max-width: 900px) {
  .ops-returns-grid { grid-template-columns: 1fr; }
  .ops-tabs { grid-template-columns: 1fr; }
  .ops-po-row { grid-template-columns: 1fr; }
  .ops-drawer-session { grid-template-columns: 1fr; gap: 4px; }
}

/* Phone: the multi-column line-item grids (~480-700px of fixed tracks) are
   in the always-visible .ops-workspace and would clip off-screen behind the
   responsive_guard overflow-x lock. Stack each line into one full-width
   column so every input (qty, condition, refund, cost, location) is
   reachable. Mirrors the shipped users invite-form mobile stack. */
@media (max-width: 640px) {
  .ret-line,
  .ret-line--no-check,
  .ops-po-line,
  .ops-receive-line {
    grid-template-columns: 1fr;
    gap: 6px;
    align-items: stretch;
  }
  .ret-line input[type="number"],
  .ret-line select,
  .ops-po-line input,
  .ops-po-line select,
  .ops-receive-line input { width: 100%; }

  /* Operations mobile (audit P1): at ≤900px the tab grid stacks into seven
     full-height cards (~630px), burying the actual tool below a long scroll.
     On phones, collapse the nav into a compact, swipeable, title-only tab
     strip — a familiar mobile pattern — so the selected tab's content sits
     near the top. The body overflow-x lock from responsive_guard stays; this
     strip scrolls inside itself, so the page still never tears sideways.
     Desktop/tablet (the 3-col grid above 640px) are unchanged. */
  /* nav.ops-tabs (0,1,1) beats the shared [role="tablist"] flex rule (0,1,0)
     that loads after this sheet — otherwise display:flex-column wins and the
     strip stays vertical. */
  nav.ops-tabs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .ops-tabs .ops-tab {
    flex: 0 0 auto;
    padding: 9px 14px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .ops-tabs .ops-tab__sub { display: none; }    /* title-only chips on phone */
  .ops-tabs .ops-tab.is-active { box-shadow: 0 -3px 0 0 var(--fg) inset; }
}

.ops-po-list-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}
.ops-po-new-link {
  font-size: 14px;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.2);
}
.ops-po-new-link:hover { color: var(--fg); text-decoration-color: var(--fg); }

/* PO cards (Day 6 v2: cleaner per-row layout, no PO codes visible) */
.ops-po-callout {
  margin-bottom: 12px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--green) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.55;
}
.ops-po-callout strong { color: var(--green-ink);font-size: 15px; display: block; margin-bottom: 4px; }
.ops-po-callout em { font-style: normal; font-weight: 600; }

.ops-po-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  /* De-emphasis via recessed background, NOT opacity — dimming the whole
     card pushed its small text below the 4.5:1 contrast bar (axe serious). */
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ops-po-card--primary {
  border-color: color-mix(in srgb, var(--green) 35%, var(--border));
  background: color-mix(in srgb, var(--green) 3%, var(--bg-elevated, #fff));
  box-shadow: 0 2px 12px -4px color-mix(in srgb, var(--green) 25%, transparent);
}
.ops-po-card__body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ops-po-card__main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ops-po-card__supplier { font-size: 16px; font-weight: 600; color: var(--fg); }
.ops-po-card__status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ops-po-card__meta {
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: var(--muted);
}
.ops-po-card__total { font-family: var(--font-tabular); color: var(--fg); font-weight: 600; }
.ops-po-card__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ops-po-card__details {
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: rgba(0,0,0,0.2);
}
.ops-po-card__details:hover { color: var(--fg); }

/* ── Store transfers (W1) ─────────────────────────────────────────────────── */
.ops-xfer-matrix__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.ops-xfer-matrix__head .pos-search__input { height: 38px; padding: 0 12px; max-width: 320px; }
.ops-xfer-matrix {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated, #fff);
}
.ops-xfer-matrix .pos-empty { border: 0; margin: 0; }
.ops-xfer-matrix__row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.ops-xfer-matrix__row:last-child { border-bottom: 0; }
.ops-xfer-matrix__row--head {
  background: var(--bg-subtle);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600;
}
.ops-xfer-matrix__row--head > span:first-child { flex: 2 1 0; text-align: left; }
.ops-xfer-matrix__part { flex: 2 1 0; display: flex; flex-direction: column; min-width: 0; }
.ops-xfer-matrix__part strong { font-family: var(--font-tabular); }
.ops-xfer-matrix__part small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ops-xfer-matrix__num { flex: 1 1 0; text-align: right; font-family: var(--font-tabular); }
.ops-xfer-matrix__num.is-transit { color: var(--amber-ink); font-weight: 600; }

.ops-xfer-list { display: flex; flex-direction: column; gap: 8px; }
.ops-xfer-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 14px; align-items: center;
  padding: 12px 16px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ops-xfer-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ops-xfer-row__no { font-family: var(--font-tabular); font-weight: 600; font-size: 14px; }
.ops-xfer-row__route { font-size: 13px; color: var(--fg); }
.ops-xfer-row__arrow { color: var(--muted); }
.ops-xfer-row__note { font-size: 12px; color: var(--muted); }
.ops-xfer-row__when { font-size: 12px; color: var(--muted); font-family: var(--font-tabular); white-space: nowrap; }
.ops-xfer-row__acts { display: flex; gap: 6px; justify-content: flex-end; }
.ops-xfer-row--summary { background: var(--bg-subtle); border-style: dashed; }

.ops-xfer-status {
  display: inline-block; padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  white-space: nowrap;
}
.ops-xfer-status.is-requested { background: var(--bg-subtle); color: var(--muted); }
.ops-xfer-status.is-transit { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber-ink); }
.ops-xfer-status.is-received { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green-ink); }
.ops-xfer-status.is-cancelled { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red-ink); }

.ops-xfer-form {
  margin-top: 14px; padding: 18px 20px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ops-xfer-lines { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.ops-xfer-line { display: grid; grid-template-columns: 1fr 1.5fr 90px auto; gap: 10px; align-items: center; }
.ops-xfer-line--rma { grid-template-columns: 1fr 1.4fr 72px 110px auto; }
.ops-xfer-line input { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; width: 100%; }
.ops-xfer-line input[type="number"] { font-family: var(--font-tabular); }
.ops-xfer-row--muted { opacity: 0.6; }

/* Scope/category chip used by pricing rules + vendor rows */
.ops-scope-chip {
  display: inline-block; margin-right: 6px; padding: 1px 8px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius-full); font-size: 11px; font-weight: 600;
  color: var(--muted); vertical-align: middle;
}

/* Pricing quote tester */
.ops-quote-tester {
  margin-top: 14px; padding: 18px 20px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ops-quote-tester__head { margin-bottom: 12px; }
.ops-quote-tester__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.ops-quote-tester__row .inv-field { margin: 0; }
.ops-quote-result {
  margin-top: 14px; padding: 14px 16px;
  background: var(--bg-elevated, #fff); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
}
/* The explicit display above otherwise defeats the [hidden] attribute, leaving
   an empty white box before the first quote — keep it hidden until populated. */
.ops-quote-result[hidden] { display: none; }
.ops-quote-result__price { font-size: 28px; font-weight: 800; font-family: var(--font-tabular); color: var(--fg); }
.ops-quote-result__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ops-quote-result__rule { font-size: 14px; font-weight: 600; color: var(--fg); }
.ops-quote-result__tag {
  font-size: 12px; color: var(--muted); padding: 2px 9px;
  background: var(--bg-subtle); border-radius: var(--radius-full);
}
.ops-quote-result__margin {
  font-size: 12px; font-weight: 700; color: var(--green-ink);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  padding: 2px 9px; border-radius: var(--radius-full);
}
.ops-quote-result__miss { font-size: 14px; color: var(--red-ink); margin: 0; }

/* ── PO command center (v38) ──────────────────────────────────────────────── */

/* Order line editor gains a Core $ column (sku, desc, qty, cost, core, loc, ×) */
.ops-po-line { grid-template-columns: 130px 1fr 70px 100px 90px 90px 36px; }

/* Receive line: desc, progress, qty, loc, cost, core, split */
.ops-receive-line { grid-template-columns: 1fr 90px 80px 100px 110px 100px 64px; }
.ops-receive-line--flash { animation: ops-recv-flash 0.9s ease-out 1; }
@keyframes ops-recv-flash {
  0% { background: color-mix(in srgb, var(--green) 25%, transparent); }
  100% { background: transparent; }
}
.ops-receive-split {
  margin: -2px 0 8px;
  padding: 10px 12px 12px;
  background: var(--bg-subtle);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.ops-receive-split__row {
  display: grid;
  grid-template-columns: 1fr 110px 36px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.ops-receive-split__row input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.ops-po-filters__divider {
  width: 1px; align-self: stretch; margin: 2px 4px;
  background: var(--border);
}
.ops-po-card__check { display: flex; align-items: center; width: 22px; flex-shrink: 0; }
.ops-po-card__check input { width: 17px; height: 17px; cursor: pointer; }
.ops-po-card__no { font-family: var(--font-tabular); }

.ops-batch-bar {
  position: sticky; bottom: 0; z-index: 6;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding: 10px 14px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 -4px 16px -8px rgba(0,0,0,0.25);
}
.ops-batch-bar > span:first-child { font-weight: 700; font-size: 14px; }

/* PO view / B/O / suppliers panels share the form card look */
.ops-po-view {
  margin-top: 14px; padding: 18px 20px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ops-po-view__meta {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  padding: 10px 0 12px; border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.ops-po-view__meta-item { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.ops-po-view__meta-item > span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.ops-po-view__table { display: flex; flex-direction: column; }
.ops-po-view__row {
  display: grid;
  grid-template-columns: 130px 1fr 80px 80px 100px 90px 100px;
  gap: 10px; align-items: center;
  padding: 7px 4px;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.ops-po-view__row--head {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border);
}
.ops-po-view__row .num { text-align: right; font-family: var(--font-tabular); }
.ops-po-view__row .num.is-done { color: var(--green-ink); font-weight: 600; }
.ops-po-view__row .num.is-short { color: var(--red-ink); font-weight: 700; }
.ops-po-view__row small { display: block; color: var(--muted); }
.ops-po-view__row input[type="number"] {
  width: 76px; padding: 7px 8px; text-align: right;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-tabular); font-size: 14px;
}
.ops-po-view__totals {
  display: flex; justify-content: flex-end; gap: 26px;
  padding-top: 10px; font-size: 14px;
}
.ops-danger-btn { color: var(--red-ink); }
.ops-danger-btn:hover { border-color: var(--red); }

/* Backorder report rows: PO, supplier, sku, ordered, recv, b/o, value, expected */
#po-bo-body .ops-po-view__row { grid-template-columns: 110px 140px 1fr 70px 70px 70px 90px 90px; }

/* Suggested orders (GAP-03) */
.ops-replenish-controls { display: flex; align-items: end; gap: 10px; }
.ops-replenish-banner {
  margin: 10px 0 12px; padding: 12px 14px;
  background: color-mix(in srgb, var(--amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, var(--border));
  border-radius: var(--radius-md);
  font-size: 13px; line-height: 1.5;
}
.ops-replenish-group {
  margin-bottom: 18px; padding: 14px 16px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.ops-replenish-group__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 8px;
}
.ops-replenish-group__head strong { font-size: 15px; }
.ops-replenish-group__head span { font-size: 12px; color: var(--muted); }
.ops-replenish-group .ops-po-view__row { grid-template-columns: 1fr 70px 70px 56px 90px 90px 90px; }
.ops-replenish-foot {
  display: flex; justify-content: flex-end; align-items: center; gap: 16px;
  font-size: 14px; padding: 6px 2px;
}

/* Stock matrix lost-sale action column */
.ops-xfer-matrix__act { flex: 0 0 116px; text-align: right; }

/* Transfer detail drawer */
.ops-xfer-detail {
  margin-top: 14px; padding: 18px 20px;
  background: var(--bg-elevated, #fff);
  border: 1px solid color-mix(in srgb, var(--accent, #3b82f6) 25%, var(--border));
  border-radius: var(--radius-md);
}
#xfer-detail-body .ops-po-view__row { grid-template-columns: 1fr 90px 90px 90px 110px; }

/* Phone: stack transfer rows + line editors to one column (end-of-file so the
   single-column override wins source order over the base grid above). */
@media (max-width: 640px) {
  .ops-xfer-row { grid-template-columns: 1fr; gap: 6px; }
  .ops-xfer-row__acts { justify-content: flex-start; }
  .ops-xfer-line, .ops-xfer-line--rma { grid-template-columns: 1fr; gap: 6px; }
  .ops-quote-tester__row { grid-template-columns: 1fr; }
  .ops-po-line, .ops-receive-line { grid-template-columns: 1fr 1fr; }
  .ops-po-view__row, #po-bo-body .ops-po-view__row,
  .ops-replenish-group .ops-po-view__row, #xfer-detail-body .ops-po-view__row {
    grid-template-columns: 1fr 1fr; row-gap: 4px;
  }
  .ops-po-view__row--head { display: none; }
  .ops-po-view__meta { gap: 8px 16px; }
  .ops-replenish-controls { flex-wrap: wrap; }
  .ops-xfer-matrix__act { flex-basis: 100%; text-align: left; }
}