:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --line: #d8dee4;
  --text: #13212f;
  --muted: #5a6b7c;
  --accent: #3b5bdb;
  --accent-2: #2f49b0;
  --nav-drawer-bg: var(--panel);
  --nav-drawer-border: var(--line);
  --nav-section-text: var(--muted);
  --nav-tile-bg: #f7f9fb;
  --nav-tile-border: #dbe2ea;
  --nav-tile-text: var(--text);
  --nav-active-bg: #eef1fc;
  --nav-active-border: #c3ccf3;
  --nav-active-text: var(--accent-2);
  --nav-badge-bg: #eef3f8;
  --nav-badge-border: #d6dfe8;
  --nav-logout-border: #e6d5d5;
  --nav-logout-text: #9b5d5d;
  --nav-icon-color: var(--nav-tile-text);
}

.list-filter-shell {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.list-search-unified {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.list-search-input-wrap {
  position: relative;
  flex: 1 1 auto;
}

.list-search-unified {
  flex-wrap: wrap;
}

.list-search-input-wrap {
  /* Search box takes all the slack; pills only take what they need. */
  flex: 100 1 320px;
  min-width: 240px;
}

.list-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.list-search-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.list-search-input {
  padding-left: 36px !important;
  font-size: 12px;
  border-radius: 8px !important;
  border: 0.5px solid var(--line) !important;
  background: var(--panel) !important;
}

/* ---- Filter pills ---- */
.list-pillbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 1 auto;
}

.list-pill-slot {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.list-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 12px;
  border-radius: 999px;
  border: 0.5px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.list-pill:hover {
  border-color: #b9c4d0;
  background: #f7f9fb;
}

.list-pill-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-pill-caret {
  font-size: 9px;
  color: var(--muted);
}

.list-pill-clear {
  display: none;
  font-size: 14px;
  line-height: 1;
  color: inherit;
  opacity: 0.75;
}

.list-pill-clear:hover {
  opacity: 1;
}

/* Active pill: filled accent, value shown, ✕ replaces the caret. */
.list-pill.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.list-pill.active .list-pill-caret {
  display: none;
}

.list-pill.active .list-pill-clear {
  display: inline;
}

.list-pill.open {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(59, 91, 219, 0.15);
}

/* Popover holding the real control — anchored under its own pill. */
.list-pill-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 130;
  min-width: 200px;
  max-width: 320px;
  padding: 12px;
  border: 0.5px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(15, 27, 39, 0.18);
}

/* Keep the popover from overflowing the right viewport edge for the last pills. */
.list-pill-slot:nth-last-child(-n + 2) .list-pill-popover {
  left: auto;
  right: 0;
}

.list-pill-popover.hidden {
  display: none;
}

.list-pill-field {
  display: grid;
  gap: 6px;
}

.list-pill-field-label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.list-pill-popover select,
.list-pill-popover input,
.list-pill-popover .combo-button {
  width: 100%;
  font-size: 13px;
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  border: 0.5px solid var(--line);
  padding: 7px 9px;
}

.list-pill-popover .combo {
  position: relative;
}

/* Off-pill picker input (flatpickr anchor): invisible but positioned so the
   floating calendar appears under its pill. Placed right before its pill. */
.list-pill-picker-input {
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
  align-self: center;
}

.list-clear-all-pill {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  padding: 7px 4px;
  cursor: pointer;
}

/* ---- Overflow actions menu ---- */
.overflow-menu-wrap {
  position: relative;
  display: inline-block;
  margin-left: auto;
}

.overflow-menu-trigger {
  min-width: 40px;
  font-size: 18px;
  line-height: 1;
  padding: 4px 10px;
}

.overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 130;
  min-width: 190px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 0.5px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 32px rgba(15, 27, 39, 0.18);
}

.overflow-menu.hidden {
  display: none;
}

.overflow-menu .overflow-menu-item {
  display: block;
  width: 100%;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 13px !important;
  height: auto !important;
}

.overflow-menu .overflow-menu-item:hover {
  background: #f3f6fa;
}

.list-clear-all-pill:hover {
  color: var(--accent);
  text-decoration: underline;
}

.data-table thead th,
.stock-table thead th,
#resultsTable thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 400;
}

.data-table tbody tr,
.stock-table tbody tr,
#resultsTable tbody tr {
  cursor: pointer;
  transition: background-color 120ms ease;
}

.data-table tbody tr:hover,
.stock-table tbody tr:hover,
#resultsTable tbody tr:hover {
  background: #f3f6fa;
}

.data-table tbody tr.active,
.stock-table tbody tr.active,
#resultsTable tbody tr.active {
  background: #eaeefb;
}

/* ===== Part 360 cockpit ===================================================
   One-glance, read-only view of a part: identity, stock, prices, sales.
   Gives staff back the single-row Excel view inside the app. */
/* Sit above the product detail-panel overlay (z-index 120) so Part 360 is
   never trapped behind it. */
#part360Modal { z-index: 200; }
.part360-card { max-width: 760px; }
.p360 { display: flex; flex-direction: column; gap: 16px; }
.p360-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line, #e2e5ec);
}
.p360-sku { font-size: 20px; font-weight: 700; letter-spacing: .01em; color: var(--accent, #3b4bd8); }
.p360-name { font-size: 15px; font-weight: 600; margin-top: 2px; }
.p360-fit { font-size: 13px; color: #6c7382; margin-top: 4px; }
.p360-stockbig {
  text-align: center; padding: 8px 16px; border-radius: 10px; min-width: 92px;
  background: #eef6f0; border: 1px solid #cfe6d7;
}
.p360-stockbig.out { background: #fbeaea; border-color: #eccccc; }
.p360-stockbig-num { display: block; font-size: 28px; font-weight: 700; line-height: 1; color: #2c7a4d; font-variant-numeric: tabular-nums; }
.p360-stockbig.out .p360-stockbig-num { color: #b23b3b; }
.p360-stockbig-lbl { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6c7382; margin-top: 4px; }
.p360-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
@media (max-width: 620px) { .p360-grid { grid-template-columns: 1fr; } }
.p360-card-box {
  background: var(--card, #fff); border: 1px solid var(--line, #e2e5ec);
  border-radius: 10px; padding: 14px 16px;
}
.p360-card-box h4 { margin: 0 0 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #6c7382; font-weight: 700; }
.p360-wh { display: flex; gap: 10px; }
.p360-wh-cell { flex: 1; text-align: center; background: var(--paper, #f6f7f9); border-radius: 8px; padding: 8px 4px; }
.p360-wh-code { display: block; font-size: 11px; letter-spacing: .06em; color: #6c7382; text-transform: uppercase; }
.p360-wh-qty { display: block; font-size: 20px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.p360-wh-qty.zero { color: #aab0bc; }
.p360-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.p360-price { background: var(--paper, #f6f7f9); border-radius: 8px; padding: 8px 10px; }
.p360-price-lbl { display: block; font-size: 11px; letter-spacing: .05em; color: #6c7382; text-transform: uppercase; }
.p360-price-val { display: block; font-size: 15px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; }
.p360-sales-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.p360-sales-head h4 { margin: 0; }
.p360-sales-kpis { display: flex; gap: 16px; font-size: 13px; color: #6c7382; }
.p360-sales-kpis b { color: var(--ink, #1b1e26); font-size: 15px; font-variant-numeric: tabular-nums; }
.p360-spark { display: flex; align-items: flex-end; gap: 4px; height: 110px; padding: 6px 0 0; overflow-x: auto; }
.p360-bar { flex: 1 0 20px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.p360-bar-fill { width: 70%; max-width: 22px; background: var(--accent, #3b4bd8); border-radius: 3px 3px 0 0; min-height: 2px; opacity: .85; }
.p360-bar:hover .p360-bar-fill { opacity: 1; }
.p360-bar-lbl { font-size: 9px; color: #9aa1af; white-space: nowrap; transform: rotate(-40deg); transform-origin: center; height: 14px; }
/* Sales & Stock combined chart (SVG). */
.p360c-legend { display: flex; gap: 16px; align-items: center; margin: 2px 0 8px; font-size: 12px; color: #6c7382; }
.p360c-key { display: inline-flex; align-items: center; gap: 6px; }
.p360c-key em { font-style: normal; color: #9aa1af; font-size: 11px; cursor: help; }
.p360c-key-bar { width: 12px; height: 12px; border-radius: 3px; background: var(--accent, #3b4bd8); opacity: .82; display: inline-block; }
.p360c-key-line { width: 16px; height: 0; border-top: 2.5px solid #1f9254; display: inline-block; }
.p360c-wrap { width: 100%; overflow-x: auto; }
.p360c-svg { width: 100%; height: auto; display: block; }
.p360c-bar { fill: var(--accent, #3b4bd8); opacity: .82; transition: opacity .12s; }
.p360c-bar:hover { opacity: 1; }
.p360c-line { stroke: #1f9254; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.p360c-dot { fill: #1f9254; }
.p360c-xlbl { fill: #9aa1af; font-size: 10px; }
.p360-years { width: auto; margin-top: 14px; border-collapse: collapse; font-size: 13px; }
.p360-years th, .p360-years td { padding: 3px 18px 3px 0; text-align: left; }
.p360-years th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #6c7382; font-weight: 600; }
.p360-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.p360-empty { color: #6c7382; font-size: 14px; padding: 12px 0; }

/* verdict banner: the one-line phone answer */
.p360-verdict {
  padding: 10px 14px; border-radius: 10px; font-size: 15px; font-weight: 650;
}
.p360-verdict.ok { background: #e8f4ec; color: #226b41; border: 1px solid #cfe6d7; }
.p360-verdict.soon { background: #fbf1df; color: #93590a; border: 1px solid #ecd9b4; }
.p360-verdict.out { background: #fbeaea; color: #9c3030; border: 1px solid #eccccc; }

/* answer bar: available / on-hand / reserved / backordered / incoming */
.p360-answer { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 620px) { .p360-answer { grid-template-columns: repeat(2, 1fr); } }
.p360-a-cell {
  background: var(--card, #fff); border: 1px solid var(--line, #e2e5ec);
  border-radius: 10px; padding: 10px 8px; text-align: center;
}
.p360-a-cell.warn { border-color: #ecd9b4; background: #fdf9f0; }
.p360-a-cell.good { border-color: #cfe6d7; background: #f4faf6; }
.p360-a-num { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.p360-a-cell.warn .p360-a-num { color: #93590a; }
.p360-a-cell.good .p360-a-num { color: #226b41; }
.p360-a-lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #6c7382; margin-top: 3px; }

/* bin / on-order chips */
.p360-bins { display: flex; flex-wrap: wrap; gap: 8px; }
.p360-bin {
  font-size: 13px; background: var(--paper, #f6f7f9); border: 1px solid var(--line, #e2e5ec);
  border-radius: 8px; padding: 5px 10px;
}
.p360-bin b { color: var(--accent, #3b4bd8); }
.p360-bin em { font-style: normal; font-weight: 700; margin-left: 4px; }

.p360-margin { font-style: normal; font-weight: 500; color: #226b41; font-size: 10px; text-transform: none; letter-spacing: 0; }

/* activity feed */
.p360-ev-wrap { overflow-x: auto; }
.p360-events { width: 100%; border-collapse: collapse; font-size: 13px; }
.p360-events td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--line, #eef0f4); white-space: nowrap; }
.p360-events tr:last-child td { border-bottom: 0; }
.p360-ev-date { color: #6c7382; font-variant-numeric: tabular-nums; }
.p360-ev-kind { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 7px; border-radius: 5px; }
.p360-ev-kind.sale { background: #eceffc; color: #3b4bd8; }
.p360-ev-kind.in { background: #e8f4ec; color: #226b41; }
.p360-ev-who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.p360-ev-ref { color: #9aa1af; font-size: 11px; }
@media (prefers-color-scheme: dark) {
  .p360-verdict.ok { background: #1b2c22; color: #6fc790; border-color: #2c4736; }
  .p360-verdict.soon { background: #33291a; color: #e0a24e; border-color: #4d4028; }
  .p360-verdict.out { background: #33211f; color: #e08585; border-color: #5a3532; }
  .p360-a-cell.warn { background: #2a2418; }
  .p360-a-cell.good { background: #1b2c22; }
  .p360-ev-kind.sale { background: #23273a; color: #8f9bff; }
  .p360-ev-kind.in { background: #1b2c22; color: #6fc790; }
}
@media (prefers-color-scheme: dark) {
  .p360-fit, .p360-wh-code, .p360-price-lbl, .p360-sales-kpis, .p360-stockbig-lbl, .p360-years th, .p360-empty { color: #9aa1af; }
  .p360-stockbig { background: #1b2c22; border-color: #2c4736; }
  .p360-stockbig.out { background: #33211f; border-color: #5a3532; }
  .p360-stockbig-num { color: #6fc790; }
  .p360-stockbig.out .p360-stockbig-num { color: #e08585; }
}

/* Pinned selection rows: the user's checked items, kept at the top of the list
   across searches and pages so a selection is never lost. */
#resultsTable tbody tr.product-pinned-row {
  background: #fdf6e3;
}

#resultsTable tbody tr.product-pinned-row:hover {
  background: #faefd0;
}

#resultsTable tbody tr.product-pinned-row.active {
  background: #f3ecd4;
}

/* Divider separating pinned rows from the normal results below. */
#resultsTable tbody tr.product-pinned-divider {
  cursor: default;
}

#resultsTable tbody tr.product-pinned-divider:hover {
  background: transparent;
}

#resultsTable tbody tr.product-pinned-divider td {
  padding: 0;
  height: 0;
  border-bottom: 2px solid #d9c98f;
}

.list-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}

.list-status-badge.neutral {
  background: #eef1f5;
  color: #6d7682;
}

/* Tinted rather than solid: a table full of saturated pills fights the data for
   attention. Same hues, light fill, dark text of the same family. */
.list-status-badge.info {
  background: #e8edfb;
  color: #2f46a8;
}

.list-status-badge.teal {
  background: #ddf1f1;
  color: #0b6a6c;
}

.list-status-badge.success {
  background: #e4f2e8;
  color: #256b3d;
}

.list-status-badge.danger {
  background: #fae8e8;
  color: #a53232;
}

.list-status-badge.warning {
  background: #fdf2d9;
  color: #7a5c14;
}

.list-number-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.list-empty-row:hover {
  background: transparent !important;
}

.list-empty-cell {
  text-align: center !important;
  color: var(--muted);
  font-size: 13px;
  padding: 18px 12px !important;
}

.list-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}

.list-summary-left,
.list-summary-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.list-summary-bar .list-pagination {
  margin: 0;
}

@media (max-width: 900px) {
  .list-search-unified {
    flex-direction: column;
    align-items: stretch;
  }

  /* In column layout, flex-basis controls HEIGHT — the desktop `flex:100 1 320px`
     made the search wrap 320px TALL, leaving a big void with the icon floating in
     its vertical center. Reset it to size to content and span full width. */
  .list-search-input-wrap {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }

  .list-search-input {
    width: 100%;
  }

  .list-pillbar {
    width: 100%;
    flex-wrap: wrap;
  }

  /* The right-anchored flip (for last pills near the viewport edge) pushes a
     lone left-aligned pill's popover off the left of a narrow screen. On mobile
     anchor popovers to the left instead, and cap width to the viewport. */
  .list-pill-slot:nth-last-child(-n + 2) .list-pill-popover,
  .list-pill-popover {
    left: 0;
    right: auto;
    max-width: min(320px, calc(100vw - 24px));
  }

  .list-filters-grid {
    grid-template-columns: 1fr;
  }

  .list-summary-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

.import-health-summary {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.import-health-summary strong {
  color: var(--text);
}

.import-health-table-wrap {
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.import-health-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.import-health-table th,
.import-health-table td {
  border-bottom: 1px solid var(--line);
  padding: 5px 8px;
  text-align: left;
  vertical-align: top;
}

.import-health-table th {
  background: #eef2f6;
  color: var(--muted);
  font-weight: 700;
}

.import-health-status-ok {
  color: #1f6b3b;
  font-weight: 700;
}

.import-health-status-not-found,
.import-health-status-format-issue,
.import-health-status-duplicate {
  color: #7a4500;
  font-weight: 700;
}

.import-validation-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  margin-bottom: 10px;
  font-size: 12px;
}

.import-validation-issues-wrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  max-height: 360px;
  overflow: auto;
}

.import-validation-issues-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.import-validation-issues-table th,
.import-validation-issues-table td {
  border-bottom: 1px solid var(--line);
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}

.import-validation-issues-table th {
  position: sticky;
  top: 0;
  background: #eef2f6;
  z-index: 1;
}

.export-menu {
  position: relative;
  display: inline-flex;
}

.export-menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
  z-index: 30;
  display: grid;
  gap: 0;
}

.export-menu-dropdown.hidden {
  display: none;
}

.export-menu-dropdown button {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 8px 10px;
  text-align: left;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}

.export-menu-dropdown button:last-child {
  border-bottom: 0;
}

.export-menu-dropdown button:hover {
  background: #eef4fb;
}

body[data-active-page="reporting"] .layout.reporting-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
  height: calc(100vh - 56px);
  overflow: hidden;
}

body[data-active-page="reporting"] .reporting-catalog-panel,
body[data-active-page="reporting"] .reporting-workspace-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  min-height: 0;
}

body[data-active-page="reporting"] .reporting-catalog-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body[data-active-page="reporting"] .reporting-catalog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

body[data-active-page="reporting"] .reporting-catalog-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-active-page="reporting"] .reporting-catalog-toggle {
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f7fafd;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
}

body[data-active-page="reporting"] .reporting-catalog-toggle:hover {
  background: #eef4fb;
  color: var(--text);
}

body[data-active-page="reporting"] .reporting-catalog-body {
  padding: 5px;
  overflow: auto;
  min-height: 0;
}

body[data-active-page="reporting"] .report-catalog-group {
  margin-bottom: 8px;
}

body[data-active-page="reporting"] .report-catalog-group h4 {
  margin: 0 0 4px 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

body[data-active-page="reporting"] .report-catalog-list {
  display: grid;
  gap: 2px;
}

body[data-active-page="reporting"] .report-catalog-item {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 8px;
  cursor: pointer;
  line-height: 1.3;
}

body[data-active-page="reporting"] .report-catalog-item:hover {
  background: #f4f8fd;
  border-color: var(--line);
}

body[data-active-page="reporting"] .report-catalog-item.active {
  border-color: #9bb8db;
  color: #183f6b;
  background: #e9f1fb;
}

body[data-active-page="reporting"] .reporting-workspace-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

body[data-active-page="reporting"] .reporting-workspace-header {
  padding: 7px 10px 6px;
  border-bottom: 1px solid var(--line);
}

body[data-active-page="reporting"] .reporting-title-block h3 {
  margin: 0;
  font-size: 18px;
}

body[data-active-page="reporting"] .reporting-title-block small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

body[data-active-page="reporting"] .reporting-workspace-body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 6px;
  padding: 7px 10px 8px;
  min-height: 0;
  overflow: hidden;
}

body[data-active-page="reporting"] .reporting-toolbar-block {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f9fbfd;
  padding: 5px 7px;
}

body[data-active-page="reporting"] .report-controls-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

body[data-active-page="reporting"] .report-toolbar {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

body[data-active-page="reporting"] .report-toolbar > button {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
}

body[data-active-page="reporting"] #createDraftTransferModeBtn {
  border-color: #b8c7d7;
  background: #edf3f9;
  color: #2e4761;
}

body[data-active-page="reporting"] #createDraftTransferModeBtn:hover {
  background: #e1ecf6;
  border-color: #a9bdd3;
}

body[data-active-page="reporting"] .report-filters-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
}

body[data-active-page="reporting"] .report-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

body[data-active-page="reporting"] .report-filter input,
body[data-active-page="reporting"] .report-filter select {
  min-height: 28px;
  padding: 4px 7px;
  font-size: 12px;
}

body[data-active-page="reporting"] .report-filter > span {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

body[data-active-page="reporting"] .report-filter.checkbox-row {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 28px;
}

body[data-active-page="reporting"] .report-filter.checkbox-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  margin: 0;
}

body[data-active-page="reporting"] .report-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7fafd;
  font-size: 12px;
  min-height: 28px;
  align-items: center;
}

body[data-active-page="reporting"] .report-summary-item {
  font-size: 12px;
  white-space: nowrap;
}

body[data-active-page="reporting"] .report-draft-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #9fb4ca;
  background: #edf4fb;
  border-radius: 6px;
  padding: 6px 8px;
  position: sticky;
  top: 0;
  z-index: 6;
}

body[data-active-page="reporting"] .report-draft-meta {
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

body[data-active-page="reporting"] .report-draft-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

body[data-active-page="reporting"] .report-draft-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  margin-right: 6px;
}

body[data-active-page="reporting"] .report-draft-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

body[data-active-page="reporting"] .draft-qty-input {
  width: 78px;
  height: 18px;
  min-height: 18px;
  padding: 0 4px;
  font-size: 11px;
  line-height: 1.1;
  text-align: right;
  vertical-align: middle;
}

body[data-active-page="reporting"] .draft-select-checkbox {
  width: 14px;
  height: 14px;
}

body[data-active-page="reporting"] .draft-row-error {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.05;
  color: #8a3a2b;
  white-space: nowrap;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-draft-mode th,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-draft-mode td {
  padding-top: 3px;
  padding-bottom: 3px;
}

body[data-active-page="reporting"] .report-table-wrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: auto;
  min-height: 0;
  height: 100%;
  background: #fff;
}

body[data-active-page="reporting"] #reportPreviewTable {
  min-width: 960px;
  width: 100%;
  font-size: 12px;
  border-collapse: separate;
  border-spacing: 0;
}

body[data-active-page="reporting"] #reportPreviewTable th,
body[data-active-page="reporting"] #reportPreviewTable td {
  padding-top: 5px;
  padding-bottom: 5px;
}

body[data-active-page="reporting"] #reportPreviewTable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

body[data-active-page="reporting"] #reportPreviewTable th.numeric-col,
body[data-active-page="reporting"] #reportPreviewTable td.numeric-col {
  text-align: right;
}

body[data-active-page="reporting"] #reportPreviewTable thead th.year-total-col {
  background: #d8e2ed;
  font-weight: 700;
  border-left: 2px solid #a9bbce;
}

body[data-active-page="reporting"] #reportPreviewTable tbody td.year-total-col {
  background: #f1f6fb;
  font-weight: 600;
  border-left: 2px solid #b8c9da;
}

body[data-active-page="reporting"] #reportPreviewTable.is-sales-by-months th.sticky-col,
body[data-active-page="reporting"] #reportPreviewTable.is-sales-by-months td.sticky-col {
  position: sticky;
  z-index: 2;
  background: #fff;
}

body[data-active-page="reporting"] #reportPreviewTable.is-sales-by-months thead th.sticky-col {
  z-index: 3;
  background: #f5f8fc;
}

body[data-active-page="reporting"] #reportPreviewTable.is-sales-by-months .sticky-col-1 {
  left: 0;
  min-width: 92px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-sales-by-months .sticky-col-2 {
  left: 92px;
  min-width: 90px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-sales-by-months .sticky-col-3 {
  left: 182px;
  min-width: 90px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-sales-by-months .sticky-col-4 {
  left: 272px;
  min-width: 220px;
  box-shadow: 2px 0 0 #cfd9e4;
}

body[data-active-page="reporting"] #reportPreviewTable th.product-name-col,
body[data-active-page="reporting"] #reportPreviewTable td.product-name-col {
  max-width: 210px;
}

body[data-active-page="reporting"] #reportPreviewTable td.product-name-col {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion {
  min-width: 100%;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.col-action-label,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td.col-action-label {
  width: 132px;
  min-width: 132px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.col-sku,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td.col-sku {
  width: 86px;
  min-width: 86px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.col-make,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td.col-make,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.col-model,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td.col-model {
  width: 82px;
  min-width: 82px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.col-qns,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td.col-qns,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.col-ct,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td.col-ct {
  width: 84px;
  min-width: 84px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.month-col,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td.month-col {
  width: 72px;
  min-width: 72px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.product-name-col,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td.product-name-col {
  width: auto;
  min-width: 220px;
  max-width: none;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-draft-mode th.sticky-col,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-draft-mode td.sticky-col {
  position: sticky;
  z-index: 5;
  background: #fff;
  background-clip: padding-box;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-draft-mode thead th.sticky-col {
  z-index: 7;
  background: #eef4fb;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-draft-mode .draft-sticky-col-1 {
  left: 0;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  z-index: 8;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-draft-mode .draft-sticky-col-2 {
  left: 64px;
  width: 96px;
  min-width: 96px;
  max-width: 96px;
  z-index: 7;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-draft-mode .draft-sticky-col-3 {
  left: 160px;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
  z-index: 6;
  box-shadow: 2px 0 0 #cfd9e4;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-draft-mode thead .draft-sticky-col-1 {
  z-index: 11;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-draft-mode thead .draft-sticky-col-2 {
  z-index: 10;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-draft-mode thead .draft-sticky-col-3 {
  z-index: 9;
}

body[data-active-page="reporting"] #reportStatus {
  font-size: 12px;
}

body[data-active-page="reporting"] .layout.reporting-layout.reporting-catalog-collapsed {
  grid-template-columns: 40px minmax(0, 1fr);
}

body[data-active-page="reporting"] .layout.reporting-layout.reporting-catalog-collapsed .reporting-catalog-body {
  display: none;
}

body[data-active-page="reporting"] .layout.reporting-layout.reporting-catalog-collapsed .reporting-catalog-title {
  max-width: 0;
  opacity: 0;
}

body[data-active-page="reporting"] .layout.reporting-layout.reporting-catalog-collapsed .reporting-catalog-heading {
  justify-content: center;
  padding: 6px 4px;
}

body[data-active-page="reporting"] .layout.reporting-layout.reporting-catalog-collapsed .reporting-catalog-toggle {
  width: 24px;
  min-width: 24px;
}

@media (max-width: 1280px) {
  body[data-active-page="reporting"] .layout.reporting-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    height: calc(100vh - 56px);
  }
}

@media (max-width: 980px) {
  body[data-active-page="reporting"] .layout.reporting-layout {
    grid-template-columns: 1fr;
    height: calc(100vh - 56px);
    overflow-y: auto;
  }

  body[data-active-page="reporting"] .reporting-catalog-panel {
    max-height: 300px;
  }

  body[data-active-page="reporting"] .report-controls-row {
    align-items: flex-start;
  }

  body[data-active-page="reporting"] .report-toolbar {
    justify-content: flex-start;
  }

  body[data-active-page="reporting"] .reporting-workspace-body {
    grid-template-rows: auto auto minmax(280px, 1fr) auto;
    overflow: visible;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 10px 16px;
}

.topbar h1 {
  margin: 0;
  font-size: 20px;
}

.top-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.app-topbar {
  position: relative;
}

.app-topbar .topbar-left,
.app-topbar .top-actions {
  position: relative;
  z-index: 2;
}

.topbar-left {
  display: inline-flex;
  align-items: center;
}

.topbar-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
}

.menu-toggle-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b9c4d0;
  background: #f9fbfd;
  color: #4f6070;
  border-radius: 6px;
  cursor: pointer;
}

.menu-toggle-btn:hover {
  background: #eef3f8;
  color: #243547;
}

.nav-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 30, 0.55);
  z-index: 70;
}

.nav-drawer {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  max-height: 100dvh;
  background: var(--nav-drawer-bg);
  border: 0;
  border-radius: 0;
  z-index: 71;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
}

.nav-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 16px;
  border-bottom: 0.5px solid var(--nav-drawer-border);
  flex: 0 0 auto;
}

.nav-drawer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.nav-drawer-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 10px;
  background: #1e3a5f;
  color: #ffffff;
}

.nav-drawer-brand-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.nav-drawer-brand-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.nav-drawer-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  min-width: 0;
  line-height: 1.2;
}

.nav-drawer-header .close-btn {
  margin-left: 0;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  flex: 0 0 30px;
  border: 0.5px solid var(--nav-drawer-border);
  border-radius: 999px;
  background: var(--nav-tile-bg);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.drawer-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
  flex-wrap: nowrap;
}

.drawer-user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 12px;
}

.drawer-user-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  border: 0.5px solid var(--nav-badge-border);
  background: var(--nav-badge-bg);
  color: var(--nav-active-text);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

#navDrawer .nav-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 12px 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: transparent;
}

#navDrawer .nav-section {
  display: grid;
  gap: 6px;
}

#navDrawer .nav-section + .nav-section {
  margin-top: 10px;
}

#navDrawer .nav-section-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nav-section-text);
  font-weight: 500;
  margin: 0 2px 0;
}

#navDrawer .nav-section-items {
  display: grid;
  gap: 7px;
}

#navDrawer .nav-layout-grid-3 .nav-section-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#navDrawer .nav-layout-grid-2 .nav-section-items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#navDrawer .nav-layout-single .nav-section-items {
  grid-template-columns: minmax(0, 1fr);
}

/* An office user who also works the floor. On a phone they open this menu to
   pick and deliver, but Warehouse sat sixth of seven sections — five scrolls
   away. Ordering only: every page they could reach before is still here, and
   their permissions are untouched. Desktop keeps the standard order. */
#navDrawer .nav-drawer-links.warehouse-first > .nav-section { order: 2; }
#navDrawer .nav-drawer-links.warehouse-first > .nav-section:nth-child(6) { order: 1; }

#navDrawer .nav-drawer-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 12px;
  color: var(--nav-tile-text);
  text-decoration: none;
  border: 0.5px solid var(--nav-tile-border);
  background: var(--nav-tile-bg);
  font-size: 13px;
  font-weight: 500;
}

#navDrawer .nav-drawer-links a:hover {
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
}

#navDrawer .nav-drawer-links a.active {
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  color: var(--nav-active-text);
}

#navDrawer .nav-layout-grid-3 a {
  flex-direction: column;
  justify-content: center;
  text-align: center;
  min-height: 82px;
  gap: 6px;
  padding: 12px 8px;
}

#navDrawer .nav-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  line-height: 1;
  color: currentColor;
}

#navDrawer .nav-layout-grid-3 .nav-item-icon {
  width: 22px;
  height: 22px;
}

#navDrawer .nav-item-label {
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
}

#navDrawer .nav-layout-grid-3 .nav-item-label {
  text-align: center;
}

#navDrawer .nav-item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#navDrawer .nav-drawer-footer {
  margin-top: auto;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 0.5px solid var(--nav-drawer-border);
  background: var(--nav-drawer-bg);
  flex: 0 0 auto;
}

#navDrawer .nav-drawer-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--nav-logout-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 0 12px;
  font-size: 14px;
}

.button-link:hover {
  background: var(--accent-2);
}

/* New Sale / Quote stands out in green vs the other (blue) action buttons. */
#newSaleBtn {
  background: #1f7a3d;
  border-color: #1f7a3d;
}
#newSaleBtn:hover {
  background: #1a6a35;
  border-color: #1a6a35;
}

.hidden-file-input {
  display: none;
}

.secondary-link {
  background: #738393;
  border-color: #738393;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 12px;
  height: calc(100vh - 56px);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.layout.panel-open {
  grid-template-columns: minmax(0, 1fr) 420px;
}

#receivingLayout.receiving-with-manual {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
}

.search-area,
.detail-panel,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.search-area {
  display: flex;
  flex-direction: column;
  overflow: visible;
  min-height: 0;
  min-width: 0;
}

#salesLayout .search-area,
#customersLayout .search-area {
  overflow: hidden;
}

.search-row,
.filters-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.main-search-row {
  grid-template-columns: 1fr 110px 90px;
}

body[data-active-page="products"] .main-search-row {
  grid-template-columns: 1fr 110px 90px;
}

/* Customers has Search + Add Customer, and "Add Customer" does not fit the
   shared 90px third track — the label was clipped, which read as the button
   being missing. Sized to its content instead. */
body[data-active-page="customers"] .main-search-row {
  grid-template-columns: 1fr 110px auto auto auto;
}

@media (max-width: 640px) {
  /* On a phone the input keeps the first row to itself and the buttons sit
     under it, rather than squeezing four things across the screen. */
  body[data-active-page="customers"] .main-search-row {
    grid-template-columns: 1fr auto auto;
  }
  body[data-active-page="customers"] .main-search-row > input {
    grid-column: 1 / -1;
  }
}

.product-clear-filters {
  white-space: nowrap;
}

.clear-filters-active {
  background: var(--accent, #2563eb);
  color: #fff;
  border-color: var(--accent, #2563eb);
  font-weight: 600;
}

.clear-filters-active:hover {
  background: #1d4fd8;
  border-color: #1d4fd8;
}

.sales-filters-row {
  grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.toggle-row {
  grid-template-columns: 1fr;
}

.filters-row {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  position: relative;
  overflow: visible;
  z-index: 5;
}

input,
select,
textarea,
button {
  border-radius: 6px;
  border: 1px solid #b9c4d0;
  padding: 0 10px;
  font-size: 14px;
}

input,
select,
button {
  height: 36px;
}

textarea {
  padding: 10px;
  resize: vertical;
}

button {
  cursor: pointer;
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

button:hover {
  background: var(--accent-2);
}

button.secondary {
  background: #738393;
  border-color: #738393;
}

button.danger {
  background: #a4342f;
  border-color: #a4342f;
}

button.danger:hover {
  background: #8f2b27;
  border-color: #8f2b27;
}

/* The primary "add" action on a list page. Light green rather than solid: it is
   the obvious next thing to do, but it sits beside Search and Import and should
   not shout over them. Declared after the bare `button` rules above, which set a
   solid accent background and otherwise win on equal specificity. */
button.btn-add-soft {
  /* border-radius and font-weight come from the shared button rule below. */
  border: 1px solid #b7dcc4;
  background: #e8f5ed;
  color: #1a6b3c;
  cursor: pointer;
}

button.btn-add-soft:hover {
  border-color: #8fc9a6;
  background: #dcefe4;
  color: #1a6b3c;
}

button.btn-add-soft:disabled { opacity: 0.55; cursor: not-allowed; }

.results-wrap {
  padding: 8px;
  overflow: auto;
  min-height: 0;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
}

.bin-stock-admin-actions {
  display: flex;
  justify-content: flex-end;
  padding: 6px 10px 0;
}

.bin-stock-summary-strip {
  margin: 8px 10px 0;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* Invoices page filter bar refinement */
body[data-active-page="invoices"] .invoices-search-row {
  grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) auto;
  align-items: center;
}

body[data-active-page="invoices"] .invoices-search-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

body[data-active-page="invoices"] .invoices-search-actions > button {
  min-width: 88px;
}

body[data-active-page="invoices"] .invoices-filter-row {
  grid-template-columns: repeat(2, minmax(180px, 260px));
  justify-content: start;
}

@media (max-width: 900px) {
  .page-wrap {
    padding: 10px;
  }

  .grid-form,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  .modal-card,
  .sales-modal-card,
  .add-product-modal-card,
  .pick-modal-card {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
  }

  .modal-header h2 {
    font-size: 17px;
    line-height: 1.25;
    min-width: 0;
  }

  .close-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    font-size: 24px;
    flex: 0 0 48px;
  }

  .modal-body {
    max-height: calc(100dvh - 74px);
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .modal-body .grid-form,
  .modal-body .field-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 0;
  }

  .modal-body .grid-form label,
  .modal-body .stack-form label {
    font-size: 14px;
  }

  .modal-body .grid-form input,
  .modal-body .grid-form select,
  .modal-body .grid-form textarea,
  .modal-body .stack-form input,
  .modal-body .stack-form select,
  .modal-body .stack-form textarea {
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
    font-size: 16px;
  }

  .modal-body .form-actions {
    padding: 0;
    gap: 10px;
  }

  .modal-body .form-actions > button {
    width: 100%;
    min-height: 48px;
  }

  .modal-body .checkbox-row {
    flex-wrap: wrap;
    align-items: center;
  }

  .panel-head,
  .form-actions {
    flex-wrap: wrap;
  }

  .panel-head {
    gap: 8px;
  }

  .data-table,
  .stock-table,
  .settings-table,
  .classic-table {
    width: max(100%, 720px);
    min-width: max-content;
  }

  .results-wrap,
  .table-scroll,
  .panel-body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body[data-active-page="reporting"] .report-filter input,
  body[data-active-page="reporting"] .report-filter select,
  body[data-active-page="reporting"] .report-toolbar > button,
  body[data-active-page="reporting"] .report-draft-actions button {
    font-size: 16px;
    min-height: 40px;
  }

  body[data-active-page="reporting"] .report-controls-row,
  body[data-active-page="reporting"] .report-toolbar,
  body[data-active-page="reporting"] .report-filters-grid,
  body[data-active-page="reporting"] .report-draft-bar,
  body[data-active-page="reporting"] .report-draft-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  body[data-active-page="reporting"] .report-draft-meta,
  body[data-active-page="reporting"] .report-summary-item {
    white-space: normal;
  }

  body[data-active-page="invoices"] .layout {
    grid-template-columns: 1fr;
    height: calc(100vh - 56px);
    padding: 8px;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-active-page="invoices"] .invoices-search-row {
    grid-template-columns: 1fr;
  }

  body[data-active-page="invoices"] .invoices-search-actions {
    justify-content: stretch;
  }

  body[data-active-page="invoices"] .invoices-search-actions > button {
    flex: 1 1 auto;
    min-height: 42px;
    font-size: 16px;
  }

  body[data-active-page="invoices"] .invoices-filter-row {
    grid-template-columns: 1fr;
  }

  body[data-active-page="invoices"] #invoicesTable {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  body[data-active-page="invoices"] #invoicesTable thead {
    display: none;
  }

  body[data-active-page="invoices"] #invoicesTable tbody {
    display: grid;
    gap: 8px;
  }

  body[data-active-page="invoices"] #invoicesTable tbody tr {
    display: block;
    border: 1px solid #d7e0ea;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
  }

  body[data-active-page="invoices"] #invoicesTable tbody td {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    border: 0;
    padding: 4px 0;
    white-space: normal;
    word-break: break-word;
    font-size: 13px;
    line-height: 1.25;
  }

  body[data-active-page="invoices"] #invoicesTable tbody td::before {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    content: "";
  }

  body[data-active-page="invoices"] #invoicesTable tbody td:nth-child(1)::before { content: "Invoice No"; }
  body[data-active-page="invoices"] #invoicesTable tbody td:nth-child(2)::before { content: "Sale No"; }
  body[data-active-page="invoices"] #invoicesTable tbody td:nth-child(3)::before { content: "Customer"; }
  body[data-active-page="invoices"] #invoicesTable tbody td:nth-child(4)::before { content: "Invoice Status"; }
  body[data-active-page="invoices"] #invoicesTable tbody td:nth-child(5)::before { content: "Payment Status"; }
  body[data-active-page="invoices"] #invoicesTable tbody td:nth-child(6)::before { content: "Date"; }
  body[data-active-page="invoices"] #invoicesTable tbody td:nth-child(7)::before { content: "Total"; }
  body[data-active-page="invoices"] #invoicesTable tbody td:nth-child(8)::before { content: "Amount Due"; }
}

#resultsTable {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#customersTable,
#salesTable,
#warehousesTable,
#pickingsTable,
#deliveriesTable,
#movementsTable,
#binsTable,
#binStockTable,
#suppliersTable,
#poTable,
#receivingPoTable,
#adjustmentsTable,
.data-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#resultsTable th,
#resultsTable td {
  border-bottom: 1px solid #e5eaef;
  padding: 4px 8px;
  text-align: left;
  white-space: nowrap;
  line-height: 1.2;
  vertical-align: middle;
}

/* Align Products/Sales list density with compact invoices-style list feel */
#resultsTable th,
#resultsTable td,
#salesTable th,
#salesTable td {
  padding: 6px 8px;
  line-height: 1.2;
  vertical-align: middle;
}

#resultsTable th {
  position: sticky;
  top: 0;
  background: #f9fbfd;
  z-index: 1;
  font-weight: 600;
}

#resultsTable th.header-with-settings {
  position: sticky;
  padding-right: 34px;
}

.header-settings-icon {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6f7f8f;
  text-decoration: none;
  border-radius: 4px;
  border: 1px solid transparent;
  z-index: 4;
}

.header-settings-icon:hover {
  color: #1d2d3d;
  border-color: #c7d2de;
  background: #eef3f8;
}

#customersTable th,
#customersTable td,
#salesTable th,
#salesTable td,
#warehousesTable th,
#warehousesTable td,
#pickingsTable th,
#pickingsTable td,
#deliveriesTable th,
#deliveriesTable td,
#movementsTable th,
#movementsTable td,
#binsTable th,
#binsTable td,
#binStockTable th,
#binStockTable td,
#suppliersTable th,
#suppliersTable td,
#poTable th,
#poTable td,
#receivingPoTable th,
#receivingPoTable td,
#adjustmentsTable th,
#adjustmentsTable td,
.data-table th,
.data-table td {
  border-bottom: 1px solid #e5eaef;
  padding: 8px 6px;
  text-align: left;
  white-space: nowrap;
}

/* Shared row-density source of truth: invoices/products/sales */
#invoicesTable.table-row-standard th,
#invoicesTable.table-row-standard td,
#resultsTable.table-row-standard th,
#resultsTable.table-row-standard td,
#salesTable.table-row-standard th,
#salesTable.table-row-standard td {
  padding: 8px 6px;
  font-size: 13px;
  line-height: 1.2;
  vertical-align: middle;
}

#resultsTable.table-row-standard input[type="checkbox"],
#resultsTable.table-row-standard #selectAllRows {
  width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

#salesTable.table-row-standard .open-btn {
  height: 24px;
  min-height: 24px;
  padding: 0 8px;
  font-size: 12px;
  line-height: 1;
}

/* Fulfillment only ever says Delivery/Pickup: keep it to its content and let
   the wide columns take the spare width instead. */
#salesTable th.sm-ful-h,
#salesTable td.sm-ful {
  width: 1%;
}

/* Row Actions dropdown (sales list). Fixed so the table scroll box can't clip it. */
.row-actions-menu {
  position: fixed;
  z-index: 2000;
  min-width: 170px;
  padding: 4px;
  background: var(--surface, #fff);
  border: 1px solid #d7dfe8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 35, 55, 0.16);
  display: flex;
  flex-direction: column;
}
.row-actions-menu button {
  all: unset;
  box-sizing: border-box;
  padding: 7px 10px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  color: inherit;
  white-space: nowrap;
}
.row-actions-menu button:hover,
.row-actions-menu button:focus-visible {
  background: #eef3f8;
}
:root[data-theme="dark"] .row-actions-menu {
  background: #1d2733;
  border-color: #33414f;
}
:root[data-theme="dark"] .row-actions-menu button:hover {
  background: #2a3644;
}

#customersTable th,
#salesTable th,
#warehousesTable th,
#pickingsTable th,
#deliveriesTable th,
#movementsTable th,
#binsTable th,
#binStockTable th,
#suppliersTable th,
#poTable th,
#receivingPoTable th,
#adjustmentsTable th,
.data-table th {
  position: sticky;
  top: 0;
  background: #f9fbfd;
  z-index: 1;
  font-weight: 600;
}

.col-resizer {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
}

#resultsTable .col-resizer::after {
  content: "";
  position: absolute;
  top: 24%;
  bottom: 24%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: #c4d0db;
}

#resultsTable th:hover .col-resizer::after {
  background: #8fa1b3;
}

.checkbox-cell {
  width: 32px;
  text-align: center;
}

#resultsTable tbody tr {
  cursor: pointer;
}

#resultsTable tbody tr:hover {
  background: #eef5fc;
}

#resultsTable tbody tr.active {
  background: #dcecff;
}

#salesTable tbody tr {
  cursor: pointer;
}

#warehousesTable tbody tr {
  cursor: pointer;
}

#poTable tbody tr {
  cursor: pointer;
}

#adjustmentsTable tbody tr {
  cursor: pointer;
}

#salesTable tbody tr:hover {
  background: #eef5fc;
}

#warehousesTable tbody tr:hover {
  background: #eef5fc;
}

#poTable tbody tr:hover {
  background: #eef5fc;
}

#adjustmentsTable tbody tr:hover {
  background: #eef5fc;
}

#salesTable tbody tr.active {
  background: #dcecff;
}

#warehousesTable tbody tr.active {
  background: #dcecff;
}

#poTable tbody tr.active {
  background: #dcecff;
}

#adjustmentsTable tbody tr.active {
  background: #dcecff;
}

#pickingsTable tbody tr {
  cursor: pointer;
}

#pickingsTable tbody tr:hover {
  background: #eef5fc;
}

#pickingsTable tbody tr.active {
  background: #dcecff;
}

#deliveriesTable tbody tr {
  cursor: pointer;
}

#deliveriesTable tbody tr:hover {
  background: #eef5fc;
}

#deliveriesTable tbody tr.active {
  background: #dcecff;
}

#binsTable tbody tr {
  cursor: pointer;
}

#binsTable tbody tr:hover {
  background: #eef5fc;
}

#binsTable tbody tr.active {
  background: #dcecff;
}

#statusLine {
  padding: 10px 4px;
  color: var(--muted);
  font-size: 12px;
}

#statusLine.status-success {
  color: #1f4f28;
  font-weight: 600;
}

#statusLine.status-error {
  color: #b42318;
  font-weight: 600;
}

.list-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 4px 10px;
}

.list-pagination button {
  min-width: 92px;
}

#productSearchTokens {
  padding: 4px 10px 0;
}

#resultsTable td.cell-center,
#resultsTable th.cell-center {
  text-align: center;
}

#customersStatus,
#salesStatus,
#warehousesStatus,
#pickingsStatus,
#deliveriesStatus,
#movementsStatus {
  padding: 10px 4px;
  color: var(--muted);
  font-size: 12px;
}

#binsStatus,
#binStockStatus {
  padding: 10px 4px;
  color: var(--muted);
  font-size: 12px;
}

.detail-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 420px;
  height: 100%;
  border-left: 0.5px solid var(--line);
  border-radius: 0;
  background: var(--panel);
}

/* ---- Sales detail as a centered modal popup ---- */
.detail-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 27, 39, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.detail-modal-overlay.hidden {
  display: none;
}

/* Inside the modal overlay the panel must never keep its docked side-panel size. */
.detail-modal-overlay .detail-panel:not(.hidden) {
  display: flex !important;
}

.detail-modal-overlay .detail-panel {
  width: min(920px, 100%);
  height: auto;
  max-height: min(88vh, 900px);
  border: 0.5px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(15, 27, 39, 0.28);
  overflow: hidden;
  animation: detail-modal-in 0.16s ease-out;
}

.detail-modal-overlay .detail-content {
  overflow-y: auto;
  flex: 1 1 auto;
}

@keyframes detail-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body.detail-modal-open {
  overflow: hidden;
}

/* On phones, render the detail modal full-screen instead of a centered card. */
@media (max-width: 640px) {
  .detail-modal-overlay {
    padding: 0;
  }
  .detail-modal-overlay .detail-panel {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }
}

.detail-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 0.5px solid var(--line);
  flex: 0 0 48px;
}

.detail-panel-title-wrap,
.detail-panel-heading {
  min-width: 0;
  flex: 1 1 auto;
}

.detail-panel-meta {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
}

.detail-panel h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-panel-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.detail-panel-mode-toggle {
  display: inline-flex;
  gap: 4px;
}

.detail-panel-mode-btn {
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: var(--panel-muted);
}

.detail-panel-mode-btn.active {
  background: var(--accent-2);
  color: #fff;
}

.detail-panel-mode-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.detail-panel-divider {
  width: 1px;
  height: 16px;
  background: var(--line);
  flex: 0 0 1px;
}

.detail-panel-link-btn {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 500;
  padding: 0;
}

/* Part 360 gets a real button, not a small text link — it's a primary action. */
.detail-panel-part360-btn {
  border: 1px solid var(--accent, #3b4bd8);
  background: var(--accent, #3b4bd8);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 120ms ease;
  white-space: nowrap;
}
.detail-panel-part360-btn:hover { filter: brightness(1.08); }
.detail-panel-part360-btn:focus-visible { outline: 2px solid var(--accent, #3b4bd8); outline-offset: 2px; }

.detail-panel-close-btn,
.close-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-muted);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

.detail-panel-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 0.5px solid var(--line);
  background: #fff7e8;
  color: #7a4500;
  font-size: 12px;
}

.detail-panel-confirm-text {
  flex: 1 1 auto;
}

.detail-panel-confirm-btn {
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
}

.detail-panel-confirm-discard {
  color: #7a4500;
}

.detail-panel-confirm-keep {
  color: var(--accent);
}

.detail-panel-mobile-header {
  display: none;
}

.detail-content {
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 14px;
  min-width: 0;
  flex: 1 1 auto;
}

.detail-panel-footer {
  flex: 0 0 48px;
  min-height: 48px;
  padding: 0 16px;
  border-top: 0.5px solid var(--line);
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.detail-panel-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.products-save-feedback {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-muted);
  color: var(--text);
  font-size: 13px;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.detail-block {
  border: 0;
  border-bottom: 0.5px solid #e0e7ef;
  border-radius: 0;
  padding: 10px 16px;
}

.detail-block h3 {
  margin: 0 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.stock-table,
.settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.stock-table th,
.stock-table td,
.settings-table th,
.settings-table td {
  border-bottom: 1px solid #e5eaef;
  padding: 6px;
  text-align: left;
}

.detail-panel .stock-table th {
  padding: 4px 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Line-item tables inside the (narrow, ~420px) detail panel: stop columns from
   being crushed so a long product name no longer wraps into a tall vertical
   sliver. The table sizes to its content and scrolls horizontally inside
   .table-scroll instead of squeezing every column to fit. Cells stay on one
   line; only the name column wraps, and only at spaces (never mid-word). */
.detail-panel .stock-table,
.detail-panel .data-table {
  width: auto;
  min-width: 100%;
  table-layout: auto;
}
.detail-panel .stock-table th,
.detail-panel .stock-table td,
.detail-panel .data-table th,
.detail-panel .data-table td {
  white-space: nowrap;
  vertical-align: middle;
}
.detail-panel .stock-table td input,
.detail-panel .stock-table td select,
.detail-panel .data-table td input,
.detail-panel .data-table td select {
  min-width: 64px;
}
/* The product-name column is the one allowed to wrap — give it room and wrap
   only at word boundaries so it grows in width, not into a vertical stack. */
.detail-panel .stock-table th:nth-child(2),
.detail-panel .stock-table td:nth-child(2),
.detail-panel .data-table th:nth-child(2),
.detail-panel .data-table td:nth-child(2) {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  min-width: 160px;
  max-width: 240px;
}

.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow: auto;
}

.field-grid {
  display: grid;
  /* minmax(0,1fr), not 1fr: a grid item's default min-width is min-content, so
     a select sized to its longest option pushes out of the modal instead of
     shrinking to its column. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.field-grid > label { min-width: 0; }

.detail-panel .field-grid,
.detail-panel .detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
}

.field-grid label,
.detail-grid label,
.detail-panel .detail-content > .detail-block > label {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.detail-panel .field-grid label,
.detail-panel .detail-grid label,
.detail-panel .detail-content > .detail-block > label {
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--line);
}

.detail-panel .field-grid label:nth-child(odd),
.detail-panel .detail-grid label:nth-child(odd) {
  border-right: 0.5px solid var(--line);
}

.detail-panel .field-grid label:nth-last-child(1):nth-child(odd),
.detail-panel .detail-grid label:nth-last-child(1):nth-child(odd),
.detail-panel .field-grid label.full-row,
.detail-panel .detail-grid label.full-row {
  grid-column: span 2;
  border-right: 0;
}

.detail-panel[data-mode="view"] .field-grid label,
.detail-panel[data-mode="view"] .detail-grid label,
.detail-panel[data-mode="view"] .detail-content > .detail-block > label {
  padding: 8px 14px;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.detail-panel .field-grid label:last-child,
.detail-panel .detail-grid label:last-child,
.detail-panel .detail-content > .detail-block > label:last-child {
  border-bottom: 0;
}

.field-grid input,
.field-grid select,
.field-grid textarea {
  width: 100%;
  margin-top: 4px;
  font-size: 13px;
  padding: 6px 10px;
}

.field-grid input[readonly],
.field-grid textarea[readonly],
.compact-readonly {
  color: #1f3347;
  background: #f7fafc;
  border-color: #c9d4df;
  opacity: 1;
  -webkit-text-fill-color: #1f3347;
}

.detail-panel[data-mode="view"] .detail-content form .form-actions,
.detail-panel[data-mode="view"] .detail-content form .button-link,
.detail-panel[data-mode="edit"] .detail-content form .form-actions,
.detail-panel[data-mode="edit"] .detail-content form .button-link {
  display: none !important;
}

.detail-panel .detail-content form .form-actions.detail-panel-inline-actions,
.detail-panel .detail-content form .button-link.detail-panel-inline-actions {
  display: flex !important;
}

.detail-panel[data-mode="view"] .detail-content input:disabled,
.detail-panel[data-mode="view"] .detail-content input[readonly],
.detail-panel[data-mode="view"] .detail-content select:disabled,
.detail-panel[data-mode="view"] .detail-content textarea:disabled,
.detail-panel[data-mode="view"] .detail-content textarea[readonly] {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 2px;
  color: var(--text);
  font-size: 13px;
  font-weight: 400;
  min-height: auto;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
}

.detail-panel[data-mode="view"] .detail-content input.detail-empty-value,
.detail-panel[data-mode="view"] .detail-content textarea.detail-empty-value,
.detail-panel[data-mode="view"] .detail-content select.detail-empty-value {
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}

.detail-panel[data-mode="view"] .detail-content input::placeholder,
.detail-panel[data-mode="view"] .detail-content textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.detail-status-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

.detail-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--muted);
  flex: 0 0 7px;
}

.detail-status-value.is-active {
  color: #1f8f4d;
}

.detail-status-value.is-active .detail-status-dot {
  background: #1f8f4d;
}

.detail-status-value.is-inactive {
  color: var(--muted);
}

.detail-panel[data-mode="view"] .detail-content .checkbox-row,
.detail-panel[data-mode="view"] .detail-content .inline-checkbox {
  align-items: center;
  gap: 7px;
  margin-top: 0;
  color: #1f8f4d;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}

.detail-panel[data-mode="view"] .detail-content .checkbox-row input[type="checkbox"],
.detail-panel[data-mode="view"] .detail-content .inline-checkbox input[type="checkbox"] {
  display: none;
}

.detail-panel[data-mode="view"] .detail-content .checkbox-row span,
.detail-panel[data-mode="view"] .detail-content .inline-checkbox span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.detail-panel[data-mode="view"] .detail-content .checkbox-row span::before,
.detail-panel[data-mode="view"] .detail-content .inline-checkbox span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #1f8f4d;
}

.detail-panel[data-mode="view"] .detail-content .checkbox-row input[type="checkbox"]:not(:checked) + span,
.detail-panel[data-mode="view"] .detail-content .inline-checkbox input[type="checkbox"]:not(:checked) + span {
  color: var(--muted);
}

.detail-panel[data-mode="view"] .detail-content .checkbox-row input[type="checkbox"]:not(:checked) + span::before,
.detail-panel[data-mode="view"] .detail-content .inline-checkbox input[type="checkbox"]:not(:checked) + span::before {
  background: var(--muted);
}

.inline-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.inline-checkbox input {
  /* Explicit, not auto: the mobile product form sizes every input as a
     full-width field, and "auto" let that win — the Active and KSI ticks
     rendered as large squares floating above their labels. */
  width: 18px;
  height: 18px;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  accent-color: var(--accent, #2563eb);
}

.products-mobile-field-cell .inline-checkbox {
  margin-top: 0;
}

/* Belt and braces: wherever a checkbox or radio appears inside the mobile
   product form, it is a tick — never a full-width field. The form's generic
   input sizing stretched Active to 361px and KSI to 166px. */
.products-mobile-detail-form input[type="checkbox"],
.products-mobile-detail-form input[type="radio"],
.products-mobile-detail-shell input[type="checkbox"],
.products-mobile-detail-shell input[type="radio"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--accent, #2563eb);
}

.products-mobile-detail-form .supplier-pick-row input[type="checkbox"],
.products-mobile-detail-form .supplier-pick-row input[type="radio"],
.products-mobile-detail-shell .supplier-pick-row input[type="checkbox"],
.products-mobile-detail-shell .supplier-pick-row input[type="radio"] {
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  max-width: 17px;
}

.page-wrap {
  padding: 12px;
}

.form-panel {
  max-width: 1040px;
}

.login-screen {
  min-height: 100vh;
  /* Dynamic viewport height: on Android/iOS the browser chrome shrinks the
     visible area, and 100vh keeps the old taller value — which overflows by
     exactly the toolbar height and makes the page scroll. */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: var(--bg);
  /* No pinch-zoom, but the card MUST be able to move: a fixed 100dvh height
     with overflow:hidden pinned it, so when the keyboard opened the Continue
     button was trapped underneath with no way to reach it. Scrolling is
     allowed and only kicks in when the keyboard shrinks the viewport. */
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

/* Lock the document itself, not just the card — otherwise the body can still
   rubber-band behind a fixed-height child. The class is set on <html>/<body> by
   the login template so this needs no :has() support. */
html.login-locked,
html.login-locked > body {
  margin: 0;
  /* Not height:100% + overflow:hidden — that is what stopped the card lifting
     above the keyboard. overscroll-behavior still kills the rubber-band. */
  min-height: 100%;
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
}

.login-shell {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-brand {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-bottom: 32px;
  text-align: center;
}

.login-brand-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #185fa5;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.login-brand-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.login-brand h1 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
}

.login-brand p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.login-card {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  background: var(--panel);
  border: 0.5px solid var(--line);
  border-radius: 16px;
  padding: 24px;
}

.login-form {
  display: grid;
  gap: 0;
}

.login-field {
  display: grid;
  gap: 8px;
}

.login-field + .login-field {
  margin-top: 16px;
}

.login-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.login-select-wrap {
  position: relative;
  display: block;
}

.login-form select,
.login-form input {
  width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  padding: 11px 12px;
  border: 0.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
}

/* Keep-me-signed-in checkbox. ".login-form input" above sets width:100% and
   min-height:46px on every input, which stretched the checkbox across the whole
   card underneath its own label — so taps landed on dead space instead of
   toggling it. Undo the text-input styling; the <label> keeps the tap target
   big. Declared !important because a later theme block re-styles
   ".login-screen .login-form input" wholesale. */
.login-form .login-remember input[type="checkbox"] {
  width: 20px !important;
  min-width: 20px;
  height: 20px;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  flex: 0 0 auto;
  appearance: auto;
  -webkit-appearance: checkbox;
  accent-color: #ffffff;
  cursor: pointer;
}

.login-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
}

.login-select-chevron {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.login-select-chevron svg {
  width: 14px;
  height: 14px;
  display: block;
}

.login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  /* Comfortable tap target on a phone. */
  min-height: 44px;
}

.login-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 13px 12px;
  border: 0;
  border-radius: 10px;
  background: #185fa5;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 150ms ease, transform 150ms ease;
}

.login-submit:active {
  transform: scale(0.98);
}

.login-status {
  min-height: 18px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.login-footer {
  margin-top: 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  padding: 12px;
}

.grid-form label {
  font-size: 12px;
  color: var(--muted);
  display: block;
}

.grid-form .req {
  color: #c23d3d;
  font-weight: 600;
  margin-left: 1px;
}

.grid-form input,
.grid-form select,
.grid-form textarea {
  width: 100%;
  margin-top: 4px;
}

.form-actions {
  padding: 10px 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.full-row {
  grid-column: 1 / -1;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.checkbox-row input {
  width: auto;
  margin: 0;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(18, 33, 47, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 99;
}

.modal:not(.hidden) {
  display: flex;
}

.hidden {
  display: none;
}

.modal-card {
  width: min(1320px, 96vw);
  height: min(92vh, 900px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sales-modal-card {
  width: min(1460px, 98vw);
}

.add-product-modal-card {
  width: min(860px, 96vw);
  height: auto;
  max-height: min(92vh, 900px);
}

.pick-modal-card {
  width: min(1500px, 96vw);
  height: min(92vh, 920px);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
}

.modal-body {
  padding: 12px;
  overflow: auto;
}

.stack-form {
  display: grid;
  gap: 10px;
}

.stack-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.adjustment-form-grid {
  display: grid;
  grid-template-columns: minmax(360px, 540px) minmax(320px, 1fr);
  gap: 14px;
  align-items: start;
}

.adjustment-form-left {
  display: grid;
  gap: 8px;
  align-content: start;
}

.adjustment-primary-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.adjustment-form-right {
  align-self: start;
}

.adjustment-compact-field {
  max-width: 420px;
}

.adjustment-product-field {
  max-width: 520px;
}

.adjustment-note-field {
  max-width: 620px;
}

.adjustment-product-results {
  max-width: 520px;
}

.adjustment-stock-box {
  min-height: 140px;
}

.adjustment-stock-box-inline {
  max-width: 620px;
}

.adjustment-stock-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: 6px;
}

.adjustment-stock-item {
  border: 1px solid #dbe4ec;
  background: #f8fbfe;
  border-radius: 6px;
  padding: 6px 8px;
}

.adjustment-stock-label {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.adjustment-stock-value {
  font-size: 18px;
  line-height: 1.1;
  color: #1f3347;
}

.adjustment-stock-warehouse {
  margin-top: 7px;
}

.adjustment-bin-summary {
  margin-top: 10px;
}

.adjustment-bin-summary h4 {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--muted);
}

.adjustment-bin-scroll {
  max-height: 220px;
}

.adjustment-form-actions {
  grid-column: 1 / -1;
  padding: 6px 0 0;
}

.panel-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

.panel-head h3 {
  margin: 0;
  font-size: 16px;
}

.panel-body {
  padding: 10px 12px;
}

.finder-area {
  position: relative;
}

.finder-results {
  display: grid;
  gap: 4px;
  max-height: 180px;
  overflow: auto;
}

.finder-result-btn {
  justify-content: flex-start;
  background: #f7f9fb;
  border-color: #d0dae4;
  color: #243547;
  text-align: left;
  height: 32px;
}

.finder-result-btn:hover {
  background: #edf2f7;
  color: #1b3044;
}

.combo {
  position: relative;
  min-width: 0;
}

.combo-button {
  width: 100%;
  justify-content: flex-start;
  display: inline-flex;
  align-items: center;
  color: var(--text);
  background: #fff;
  border: 1px solid #b9c4d0;
}

.combo-button:hover {
  background: #fff;
  color: var(--text);
}

.combo-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  z-index: 20;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  padding: 6px;
}

.combo-search {
  width: 100%;
  margin-bottom: 6px;
}

@media (max-width: 1080px) {
  .adjustment-form-grid {
    grid-template-columns: 1fr;
  }

  .adjustment-primary-fields {
    grid-template-columns: 1fr;
  }

  .adjustment-form-right,
  .adjustment-compact-field,
  .adjustment-product-field,
  .adjustment-note-field,
  .adjustment-product-results,
  .adjustment-stock-box-inline {
    max-width: 100%;
  }
}

/* Mobile: compact the adjustment form so it fits without long scrolling and
   the Save button stays reachable. */
@media (max-width: 900px) {
  .adjustment-form-grid {
    gap: 8px;
  }
  .adjustment-form-left {
    gap: 6px;
  }
  .adjustment-compact-field,
  .adjustment-product-field,
  .adjustment-note-field {
    font-size: 13px;
  }
  .adjustment-stock-box,
  .adjustment-stock-box-inline {
    min-height: 0;
    padding: 8px 10px;
  }
  .adjustment-note-field textarea {
    rows: 1;
    min-height: 40px;
  }
  .adjustment-form-actions {
    position: sticky;
    bottom: 0;
    background: var(--bg, #fff);
    padding-top: 8px;
    margin-top: 4px;
  }
  .adjustment-form-actions button {
    width: 100%;
  }
}

.combo-options {
  max-height: 180px;
  overflow-y: auto;
  overflow-x: hidden;
}

.combo-option {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 6px 8px;
  border-radius: 6px;
  height: auto;
}

.combo-option:hover {
  background: #eef5fc;
}

.combo-panel .combo-option {
  white-space: nowrap;
}

.sales-customer-selector-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sales-customer-selector-row .combo-button {
  flex: 1 1 auto;
}

.sales-customer-clear-btn {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  line-height: 1;
}

.sales-modal-summary-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border: 0.5px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  background: var(--panel);
  vertical-align: middle;
}

.sales-modal-field {
  display: block;
}

.sales-modal-field .sales-toggle-group {
  margin-top: 4px;
  width: fit-content;
  max-width: 100%;
}

.sale-modal-top-block {
  display: grid;
  gap: 8px;
}

.sale-modal-section-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.sale-modal-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Sale date row: the date field plus the "Tomorrow's sale" shortcut. */
/* Call off one line of a transfer that is out for receiving (admin/office,
   desktop). Quiet by default — it sits under the primary Save action. */
.transfer-remove-line-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid #e3b7b7;
  border-radius: 10px;
  background: #fff;
  color: #b3261e;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.transfer-remove-line-btn:hover {
  background: #fdf3f3;
}

.transfer-remove-line-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Where future-dated sales end and today's begin. The list is newest-first, so
   everything above this row is booked for a later date. A coloured top border
   on the first of today's rows, not a spacer row — the table keeps its rhythm. */
.sales-today-start > td {
  border-top: 1px solid #b7c9e4 !important;
}

/* Collected-on-delivery, in the sales list and on the sale detail. Green
   because it is money in; amber only when it disagrees with the invoice. */
.collected-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e4f2e8;
  color: #256b3d;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sale-collected {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-right: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  background: #e4f2e8;
  color: #256b3d;
}

.sale-collected.is-differs { background: #fdf2d9; color: #7a5c14; }

.sale-collected-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sale-collected-amount { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sale-collected-flag { font-size: 12px; font-weight: 600; }

/* ── Driver Cash page (office) ─────────────────────────────────────────── */
.dcash-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
}

.dcash-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 150px;
  padding: 12px 16px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: #fff;
}

.dcash-stat-value {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.dcash-stat-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}

.dcash-block { padding: 0 12px 16px; }

.dcash-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0 8px;
}

.dcash-block-title { margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; }

/* The page is two jobs in order, not three lists of equal weight: take the
   cash in, then post the payments that never changed hands. The heading says
   what to do and the line under it says why. */
.dcash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-right: 12px;
}

.dcash-head .dcash-summary { flex: 1 1 auto; }
.dcash-head .secondary { margin-top: 12px; }

.dcash-block-why {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
}

.dcash-block-count {
  min-width: 22px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.dcash-block-count:empty { display: none; }

/* A figure that needs acting on, versus one that happens to be zero. */
.dcash-stat.is-live { border-color: #bcd0ee; background: #f4f8fd; }

.dcash-clear {
  margin: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #e4f2e8;
  color: #256b3d;
  font-size: 13px;
  font-weight: 600;
}

/* History is reference, not work: collapsed until asked for. */
.dcash-history > summary {
  cursor: pointer;
  list-style: none;
}

.dcash-history > summary::-webkit-details-marker { display: none; }

.dcash-history > summary::after {
  content: "show";
  font-size: 12px;
  font-weight: 700;
  color: #2358a8;
}

.dcash-history[open] > summary::after { content: "hide"; }

.dcash-row.is-blocked { background: #fdf6f4; }

.dcash-confirm:disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
}

/* The method is the point of this section, so it reads as a label. */
.dcash-row-method {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dcm-check { background: #eaf1fb; color: #2358a8; }
.dcm-due   { background: #fbe4de; color: #9c3b22; }

/* Section 1: the sales a driver's cash came from, listed under their name so
   the office sees what it is taking in before opening the popup. */
.dcash-driver { display: block; }

.dcash-driver-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dcash-driver-sales {
  margin: 6px 0 2px 0;
  padding-left: 10px;
  border-left: 2px solid #e2e8f0;
}

.dcd-sale {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 12px;
}

.dcd-doc { font-weight: 700; color: #334155; }
.dcd-cust {
  color: #64748b;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dcd-amt { font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }

/* Take one delivery's cash on its own, without waiting for the driver's whole
   balance. Same green as the take-all button above it — it is the same action
   on one sale — just sized to sit in a row. */
.dcd-take {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #15803d;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.dcd-take:hover { background: #12692f; }
.dcd-take:disabled { opacity: 0.5; cursor: not-allowed; }

/* Needs an invoice before the money can be taken: a different action, so it
   does not wear the green of taking money in. */
.dcd-sale.is-blocked .dcd-amt { color: #9c3b22; }
.dcd-take.dcash-invoice { background: #9c3b22; }
.dcd-take.dcash-invoice:hover { background: #82301c; }

/* The double confirmation: the sentence the office is agreeing to, then the
   figures behind it. */
.dcc-confirm-line {
  margin-bottom: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

.dcc-confirm-line.is-full { background: #e4f2e8; color: #256b3d; }
.dcc-confirm-line.is-part { background: #fdf2d9; color: #7a5c14; }

.dcc-summary {
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.dcc-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: 13px;
  color: #64748b;
}

.dcc-line strong { color: #0f172a; font-variant-numeric: tabular-nums; }

.dcc-line.dcc-due {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #e2e8f0;
}

.dcc-line.dcc-due strong { font-size: 17px; font-weight: 800; }
.dcm-zelle { background: #ede8fb; color: #5b3fa8; }
.dcm-card  { background: #fdf2d9; color: #7a5c14; }
.dcm-cash  { background: #e4f2e8; color: #256b3d; }

.dcash-empty { padding: 12px; font-size: 13px; }

/* A driver holding cash: name, amount, and one button to take it in. */
.dcash-driver {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
  margin-bottom: 8px;
}

.dcash-driver-main { flex: 1 1 auto; min-width: 0; }
.dcash-driver-name { display: block; font-size: 15px; font-weight: 700; color: #14532d; }
.dcash-driver-meta { font-size: 12px; color: #3f6b50; }

.dcash-driver-amount {
  font-size: 20px;
  font-weight: 800;
  color: #14532d;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dcash-accept {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: #15803d;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* One collection awaiting reconciliation. */
.dcash-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  margin-bottom: 6px;
}

.dcash-row-main { flex: 1 1 200px; min-width: 0; }

/* Sale date sits next to the document number — the office reconciles against a
   day, so it belongs with the identifier, not in the money column. */
.dcash-row-date {
  font-weight: 500;
  font-size: 11px;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

/* Part codes only, on one line: "H3010 x2, H3020 x3". Truncated rather than
   wrapped, so a big sale never grows the row. */
.dcash-row-items {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* In the driver card the sale row is a single flex line, so the item list has
   to break onto a row of its own rather than squeeze in beside the amount. */
.dcd-sale { flex-wrap: wrap; }
.dcd-sale .dcash-row-items { flex: 1 0 100%; margin-top: 2px; }
.dch-row-main .dcash-row-items { margin-top: 2px; }
.dcash-row-doc { font-weight: 700; color: #0f172a; }
.dcash-row-customer { display: block; font-size: 12px; color: #64748b; }
.dcash-row-money { min-width: 96px; text-align: right; }
.dcash-row-amount { display: block; font-weight: 700; font-variant-numeric: tabular-nums; }
.dcash-row-method { font-size: 11px; color: #64748b; text-transform: capitalize; }
.dcash-row-who { min-width: 130px; font-size: 12px; color: #334155; }

.dcash-mismatch {
  padding: 3px 9px;
  border-radius: 999px;
  background: #fdf2d9;
  color: #7a5c14;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.dcash-ok { font-size: 11px; color: #64748b; white-space: nowrap; }

/* The action on each row. It was white on a white row with no colour set, so
   it read as blank space rather than a button. */
.dcash-confirm {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #2358a8;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.dcash-confirm:hover { background: #1c4a8e; }

.dcash-handover {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line, #eef1f5);
  font-size: 13px;
}

.dcash-handover-driver { font-weight: 600; min-width: 110px; }
.dcash-handover-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.dcash-handover-meta { margin-left: auto; font-size: 12px; color: #64748b; }

.dcash-diff {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.dcash-diff.is-short { background: #fae8e8; color: #a02f2f; }
.dcash-diff.is-over { background: #fdf2d9; color: #7a5c14; }
.dcash-diff-ok { font-size: 11px; color: #64748b; }

/* Accept-cash modal. The exact-amount button is the whole point; counting a
   different figure is tucked into a details block as the exception. */
/* The handover preview: which invoices this cash settles. The office is
   confirming paperwork, not just counting notes, so each row carries the
   invoice and what it will read once the payment lands. */
.dch-list {
  margin-bottom: 12px;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.dch-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f7;
}

.dch-row.is-blocked { background: #fdf6f4; }

.dch-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dch-doc { font-weight: 700; font-size: 13px; color: #0f172a; }
.dch-cust { font-size: 12px; color: #64748b; }

.dch-row-inv {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #475569;
}

.dch-after { color: #64748b; }

.dch-amt {
  font-weight: 800;
  font-size: 15px;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dch-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.dch-flag-block { background: #fbe4de; color: #9c3b22; }
.dch-flag-warn { background: #fdf2d9; color: #7a5c14; }

.dch-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 2px solid #e2e8f0;
  font-size: 13px;
  color: #475569;
}

.dch-total strong {
  font-size: 20px;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

/* Cannot accept yet: an invoice has to exist for the money to land on. */
.dch-blocked {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fbe4de;
  color: #9c3b22;
  font-size: 13px;
  line-height: 1.45;
}

.dcash-accept-exact:disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
}

.dcash-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 900;
  transform: translate(-50%, 12px);
  padding: 12px 18px;
  border-radius: 12px;
  background: #14532d;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.dcash-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.dcash-modal-expected {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.dcash-modal-label {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}

.dcash-modal-amount {
  font-size: 24px;
  font-weight: 800;
  color: #14532d;
  font-variant-numeric: tabular-nums;
}

.dcash-accept-exact {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border: 0;
  border-radius: 12px;
  background: #15803d;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.dcash-differs { margin-top: 12px; }
.dcash-differs summary { font-size: 13px; color: #64748b; cursor: pointer; }
.dcash-differs input {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
}

.dcash-accept-counted {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.dcash-error {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fae8e8;
  color: #a02f2f;
  font-size: 13px;
}

.dcash-error.hidden { display: none; }

@media (max-width: 900px) {
  .dcash-row-who, .dcash-ok { display: none; }
  .dcash-driver-amount { font-size: 18px; }
}

/* ── Per-line picking claims ─────────────────────────────────────────────
   Two pickers on one sale. Each line shows who is on it, refreshed every few
   seconds so colleagues appear without a reload. */
.pick-line-claim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 3px 4px 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

/* Someone else has it: informational, and there is no button to take it. */
.pick-line-claim.is-other { background: #fdf2d9; color: #7a5c14; padding-right: 10px; }
.pick-line-claim.is-mine { background: #e8edfb; color: #2f46a8; }
.pick-line-claim.is-done { background: #e4f2e8; color: #256b3d; }

.plc-name { letter-spacing: 0.01em; }

.plc-btn {
  min-height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.plc-btn:disabled { opacity: 0.5; }

/* Unclaimed: the only line control that invites a tap. */
.plc-claim {
  margin-left: auto;
  min-height: 30px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #2358a8;
  font-size: 12px;
}

.plc-undo { background: rgba(255, 255, 255, 0.9); }

/* Saving your own line is the primary action once you hold it, so it carries
   the colour and Release stays quiet beside it. */
.plc-save {
  background: #2358a8;
  color: #fff;
  min-height: 30px;
  padding: 0 14px;
  font-size: 12px;
}
.plc-save:hover { background: #1c4a8e; }

/* Full quantity entered and only waiting to be saved. Green is the cue that
   the line is finished in hand but not yet recorded. */
.plc-save.is-ready {
  background: #1d7a45;
  box-shadow: 0 0 0 3px rgba(29, 122, 69, 0.18);
}
.plc-save.is-ready:hover { background: #176337; }

/* More than the sale asked for. The server refuses this, so it must not read
   as finished. */
.plc-save.is-over {
  background: #b4442e;
  box-shadow: 0 0 0 3px rgba(180, 68, 46, 0.18);
}
.plc-save.is-over:hover { background: #963826; }

@media (max-width: 900px) {
  .plc-btn, .plc-claim { min-height: 34px; font-size: 12px; }
  .pick-line-claim { font-size: 12px; }
}

/* ── Delivery receipt ────────────────────────────────────────────────────
   What the driver reads at the van. Facts as text rather than disabled inputs,
   parts as a scannable list with the quantity first, and real breathing room
   from the panel edge. */
body[data-active-page="deliveries"] .detail-panel .detail-block {
  padding: 16px;
}

body[data-active-page="deliveries"] .detail-panel .form-actions {
  padding: 0 16px 20px;
}

.dlv-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 12px 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line, #e8edf3);
}

.dlv-fact { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.dlv-fact-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

.dlv-fact-value {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.25;
}

/* A phone number is worth tapping, not just reading. */
.dlv-phone {
  font-size: 14px;
  font-weight: 600;
  color: #2358a8;
  text-decoration: none;
}

.dlv-status-pill {
  align-self: flex-start;
  padding: 4px 11px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
  font-weight: 700;
}

.dlv-employee-grid { margin-bottom: 4px; }

.dlv-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.dlv-section-head h3 { margin: 0; font-size: 15px; }

.dlv-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
}

.dlv-lines { display: flex; flex-direction: column; gap: 8px; }

.dlv-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e8edf3);
  border-radius: 12px;
  background: #fff;
}

/* Quantity leads: it is the one number being checked against the box. */
.dlv-line-qty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 46px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #eef2f7;
  color: #0f172a;
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.dlv-line-of {
  font-size: 10px;
  font-weight: 700;
  color: #92400e;
  white-space: nowrap;
}

/* A short line is the exception the driver must notice. */
.dlv-line.is-short { border-color: #fcd34d; background: #fffbeb; }
.dlv-line.is-short .dlv-line-qty { background: #fdf2d9; color: #7a5c14; }

.dlv-line-main { flex: 1 1 auto; min-width: 0; }

.dlv-line-sku {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.01em;
}

.dlv-line-name {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.35;
}

.dlv-line-wh {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
}

/* "Returned": the customer would not take this one. Off by default, since the
   normal delivery hands over everything. */
.dlv-return-toggle {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.dlv-return-toggle[aria-pressed="true"] {
  border-color: #a02f2f;
  background: #a02f2f;
  color: #fff;
}

.dlv-line.is-returned {
  border-color: #e3b7b7;
  background: #fdf3f3;
}

/* Struck through so a glance says "this is not going with you". */
.dlv-line.is-returned .dlv-line-sku,
.dlv-line.is-returned .dlv-line-name {
  text-decoration: line-through;
  opacity: 0.65;
}

.dlv-empty { padding: 16px; text-align: center; font-size: 13px; }
.dlv-lines-block { margin-top: 12px; }

/* ── Driver cash ─────────────────────────────────────────────────────────
   The money step shown after Complete Delivery, and the driver's running
   balance. Sized for a phone held one-handed at a customer's door. */
.driver-holding-bar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 10px 10px 0;
  padding: 10px 14px;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  background: #f0fdf4;
}

.driver-holding-bar[hidden] { display: none; }

.dhb-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #15803d;
}

.dhb-amount {
  font-size: 20px;
  font-weight: 800;
  color: #14532d;
  font-variant-numeric: tabular-nums;
}

.dhb-count { font-size: 12px; color: #3f6b50; }
.dhb-hint { margin-left: auto; font-size: 12px; color: #3f6b50; }

/* The money step is a centred overlay, not a panel appended under the receipt.
   Inline, the amount field and the method buttons opened below the fold on a
   phone — the driver could not see what they were choosing. Centring it puts
   every control on screen whatever the receipt's length. */
.dc-step {
  position: fixed;
  inset: 0;
  /* Above the detail-modal overlay (120) that the delivery opens in. */
  z-index: 500;
  /* Centred while it fits, top-anchored and scrollable once it does not.
     `safe center` does the same thing but Safari support is thin, so this uses
     auto margins on the card instead, which degrade the same way everywhere.
     With the keyboard up there is ~400px of height for a ~500px sheet, and
     plain centring pushed the top and bottom off-screen unreachably. */
  display: block;
  padding: 20px;
  background: rgba(15, 23, 42, 0.55);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* The card itself. Children are wrapped by JS into .dc-card. */
.dc-card {
  width: 100%;
  max-width: 420px;
  /* Vertical auto margins centre it when there is room and collapse to zero
     when there is not, so nothing is ever pushed above the scroll origin. */
  margin: auto;
  padding: 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.3);
}

.dc-step.hidden { display: none; }

.dc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -18px -18px 4px;
  padding: 12px 14px 10px;
  /* Sticky so the close button stays reachable when the keyboard shrinks the
     viewport and the card has to scroll. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-radius: 16px 16px 0 0;
  border-bottom: 1px solid var(--line, #eef1f5);
}

.dc-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: #eef2f7;
  color: #475569;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.dc-close:active { background: #e2e8f0; }

.dc-title { font-size: 15px; font-weight: 700; color: #0f172a; }

.dc-due {
  font-size: 18px;
  font-weight: 800;
  color: #14532d;
  font-variant-numeric: tabular-nums;
}

.dc-already {
  margin-bottom: 8px;
  font-size: 12px;
  color: #92400e;
}

.dc-choices {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

/* Three equal targets: the driver picks one without looking carefully. */
.dc-choice {
  flex: 1 1 0;
  min-height: 52px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  color: #334155;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.dc-choice-primary { border-color: #86efac; background: #f0fdf4; color: #14532d; }

.dc-choice.is-on {
  border-color: #2358a8;
  background: #2358a8;
  color: #fff;
}

.dc-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 4px;
}

.dc-amount-row, .dc-method-row { margin-top: 10px; }
.dc-amount-row.hidden, .dc-method-row.hidden { display: none; }

#dcAmount {
  width: 100%;
  min-height: 52px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  /* 16px stops iOS zooming the page when the field takes focus. */
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* The four methods used to be flex items with a fixed min-width, which
   overflowed a narrow phone and wrapped Zelle onto a second row that the
   sheet then clipped. A grid divides the width that is actually there.
   Below 430px it is 2x2: the Spanish labels ("Efectivo", "Tarjeta") are far
   longer than the English, and four across truncates them on most phones. */
.dc-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

@media (min-width: 430px) {
  .dc-methods { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dc-method {
  min-width: 0;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.dc-method.is-on { border-color: #2358a8; background: #eaf1fb; color: #2358a8; }

/* Failures inside the money sheet. Previously they went to the panel's status
   line, which this sheet covers — so the driver saw the button reset and no
   reason, and tapped again. */
/* Replaces the Nothing/Full/Part choices when there is no money to take —
   every line came back, or the sale is already paid. */
.dc-nothing-note {
  margin: 4px 0 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef2f7;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

.dc-nothing-note.hidden,
.dc-choices.hidden { display: none; }

.dc-step-error {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fbe4de;
  color: #9c3b22;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

.dc-step-error.hidden { display: none; }

.dc-confirm {
  width: 100%;
  min-height: 52px;
  margin-top: 14px;
  border: 0;
  border-radius: 12px;
  background: #15803d;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.dc-confirm:disabled { opacity: 0.6; }

.dc-back {
  width: 100%;
  min-height: 40px;
  margin-top: 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
}

/* Sales page filters: status tabs + toggle chips.
   Replaces six dropdowns, two of which opened a popover containing another
   dropdown. Everything here is one click. */
.sales-status-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  /* Sits inside .list-filter-shell (list_ui.js moves it there), directly under
     the search + pill bar, so it carries the shell's own side padding. */
  padding: 2px 12px 10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sales-status-tabs:empty { display: none; }

.sales-status-tabs::-webkit-scrollbar { display: none; }

.sales-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: #5b6879;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.sales-tab:hover { filter: brightness(0.97); }

/* ONE palette for both the Sales filter tabs and the Status badges in the table.
   A status must always look the same in both places, and no two statuses may
   share a colour — so each stage has its own hue, defined once here. */
:root {
  /* Colour says what the status ASKS OF THE TEAM, not merely where it sits in
     the pipeline. Every pair is >= 4.5:1 (WCAG AA). Red and orange are reserved
     for exception badges (Backordered, Unpaid) and are never a normal status. */
  --st-awaiting-bg:  #fdf2d9; --st-awaiting-fg:  #6b4d07;  /* amber  — act now   7.0:1 */
  --st-picking-bg:   #ddf0f0; --st-picking-fg:   #0a5f61;  /* teal   — in hand   6.3:1 */
  --st-partial-bg:   #ddeef7; --st-partial-fg:   #15607d;  /* cyan   — in hand   5.9:1 */
  --st-issue-bg:     #fae8e8; --st-issue-fg:     #a02f2f;  /* red    — exception 6.0:1 */
  --st-dispatch-bg:  #e8e6fb; --st-dispatch-fg:  #4a3a9e;  /* indigo — waiting   7.2:1 */
  --st-delivery-bg:  #dceafb; --st-delivery-fg:  #1c4f8f;  /* blue   — moving    6.7:1 */
  --st-pickup-bg:    #f0e9fb; --st-pickup-fg:    #6b3ba8;  /* violet — waiting   6.3:1 */
  /* Fulfilled is ~99% of rows, so it is deliberately the quietest tint here. */
  --st-fulfilled-bg: #eef4ef; --st-fulfilled-fg: #3f6b50;  /* soft green — done  5.5:1 */
  --st-quotation-bg: #eef1f5; --st-quotation-fg: #4a5361;  /* slate              6.9:1 */
  --st-cancelled-bg: #f3f4f6; --st-cancelled-fg: #5c636d;  /* grey               5.5:1 */
}

.sales-tab[data-tone] {
  background: #f1f5f9;
  color: #475569;
}
.sales-tab[data-tone="all"]                { background: #eef2f7; color: #334155; }
.sales-tab[data-tone="awaiting_picking"]   { background: var(--st-awaiting-bg);  color: var(--st-awaiting-fg); }
.sales-tab[data-tone="picking"]            { background: var(--st-picking-bg);   color: var(--st-picking-fg); }
.sales-tab[data-tone="partially_picked"]   { background: var(--st-partial-bg);   color: var(--st-partial-fg); }
.sales-tab[data-tone="picking_issue"]      { background: var(--st-issue-bg);     color: var(--st-issue-fg); }
.sales-tab[data-tone="ready_for_dispatch"] { background: var(--st-dispatch-bg);  color: var(--st-dispatch-fg); }
.sales-tab[data-tone="on_delivery"]        { background: var(--st-delivery-bg);  color: var(--st-delivery-fg); }
.sales-tab[data-tone="ready_for_pickup"]   { background: var(--st-pickup-bg);    color: var(--st-pickup-fg); }
.sales-tab[data-tone="fulfilled"]          { background: var(--st-fulfilled-bg); color: var(--st-fulfilled-fg); }
.sales-tab[data-tone="quotation"]          { background: var(--st-quotation-bg); color: var(--st-quotation-fg); }
.sales-tab[data-tone="cancelled"]          { background: var(--st-cancelled-bg); color: var(--st-cancelled-fg); }

/* The table badge for each status, from the same variables. *//* The table badge for each status, from the same variables. */
.list-status-badge.tone-awaiting  { background: var(--st-awaiting-bg);  color: var(--st-awaiting-fg); }
.list-status-badge.tone-picking   { background: var(--st-picking-bg);   color: var(--st-picking-fg); }
.list-status-badge.tone-partial   { background: var(--st-partial-bg);   color: var(--st-partial-fg); }
.list-status-badge.tone-issue     { background: var(--st-issue-bg);     color: var(--st-issue-fg); }
.list-status-badge.tone-dispatch  { background: var(--st-dispatch-bg);  color: var(--st-dispatch-fg); }
.list-status-badge.tone-delivery  { background: var(--st-delivery-bg);  color: var(--st-delivery-fg); }
.list-status-badge.tone-pickup    { background: var(--st-pickup-bg);    color: var(--st-pickup-fg); }
.list-status-badge.tone-fulfilled { background: var(--st-fulfilled-bg); color: var(--st-fulfilled-fg); }
.list-status-badge.tone-quotation { background: var(--st-quotation-bg); color: var(--st-quotation-fg); }
.list-status-badge.tone-cancelled { background: var(--st-cancelled-bg); color: var(--st-cancelled-fg); }

/* Selected: keep the status hue, add a ring so the choice is unmistakable. */
.sales-tab.is-active {
  border-color: currentColor;
  box-shadow: 0 0 0 1px currentColor inset;
  font-weight: 700;
}

.sales-tab-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.75);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Selected keeps a white count chip: reversing it to a solid block of the tab's
   own colour would leave the number unreadable against it. */
.sales-tab.is-active .sales-tab-count {
  background: #fff;
}

/* Chips are grouped into labelled clusters (list_ui.js builds these), so it is
   obvious which control does what instead of six identical pills in a row. */
.list-chip-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 10px;
  border: 1px solid var(--line, #e3e8f0);
  border-radius: 12px;
  background: #f8fafc;
}

.list-chip-group-label {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}

.sales-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.sales-chip:hover { background: #eef2f7; }

.sales-chip.is-on {
  border-color: #2358a8;
  background: #2358a8;
  color: #fff;
}

.sales-filter-spacer { display: none; }


@media (max-width: 900px) {
  .sales-tab,
  .sales-chip {
    min-height: 40px;
    font-size: 14px;
  }

  .sales-filter-spacer { display: none; }

  .sales-filters-row {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* "Tomorrow's sale" / "Tomorrow's delivery": a sale dated ahead of today sits in
   the picking and delivery queues beside today's work. Amber so it reads as a
   caution without looking like an error. */
.pick-future-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
}

.pick-future-note {
  margin: 6px 0 2px;
  padding: 8px 10px;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 900px) {
  .pick-future-badge {
    font-size: 12px;
    padding: 3px 9px;
  }

  .pick-future-note {
    font-size: 14px;
  }
}

/* PO line removal (admin/office, desktop, while receiving). */
.po-line-drop-cell {
  width: 92px;
  text-align: right;
  white-space: nowrap;
}

.po-line-drop-blocked {
  font-size: 12px;
  cursor: help;
}

.sale-date-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

.sale-date-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}

.sale-date-label input[type="date"] {
  font-size: 13px;
}

.sale-tomorrow-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid #cdd6e4;
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

.sale-tomorrow-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent, #2358a8);
  cursor: pointer;
}

/* Ticked state is obvious at a glance, so nobody books the wrong day. */
.sale-tomorrow-toggle.is-on,
.sale-tomorrow-toggle:has(input:checked) {
  border-color: var(--accent, #2358a8);
  background: #eaf1fb;
  color: var(--accent, #2358a8);
  font-weight: 600;
}

@media (max-width: 900px) {
  .sale-tomorrow-toggle {
    min-height: 44px;
    padding: 0 14px;
    font-size: 14px;
  }

  .sale-tomorrow-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
  }
}

.sale-modal-row {
  display: grid;
  gap: 6px;
}

.sale-modal-row + .sale-modal-row {
  margin-top: 2px;
}

.sale-modal-row-customer label,
.sale-modal-row-notes,
.sales-modal-field > label {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}

.sale-modal-row-settings {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.sale-modal-row-notes textarea {
  margin-top: 2px;
}

.sale-modal-row-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sale-modal-row-toolbar #addItemSearchInput {
  width: min(420px, 100%);
}

.sale-add-item-results {
  margin-top: 4px;
}

.sale-lines-empty-state {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px;
}

.sale-modal-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sales-toggle-group {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border: 1px solid #b9c4d0;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.sales-toggle-btn {
  flex: 0 0 auto;
  height: 34px;
  min-height: 34px;
  border: 0;
  border-right: 1px solid #d3dbe4;
  background: #f7f9fc;
  color: #3a4b5c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  padding: 0 12px;
  border-radius: 0;
}

.sales-toggle-btn:last-child {
  border-right: 0;
}

.sales-toggle-btn:hover {
  background: #edf3fa;
  color: #203447;
}

.sales-toggle-btn.active {
  background: #2a4f7c;
  color: #fff;
}

.po-modal-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.po-modal-status-badge.badge-draft         { background: #f0f4f8; color: #555; }
.po-modal-status-badge.badge-ordered       { background: #dbeafe; color: #1d4ed8; }
.po-modal-status-badge.badge-partial       { background: #fef3c7; color: #92400e; }
.po-modal-status-badge.badge-received      { background: #d1fae5; color: #065f46; }
.po-modal-status-badge.badge-cancelled     { background: #fee2e2; color: #991b1b; }

.danger-link {
  background: none;
  border: none;
  color: #dc2626;
  cursor: pointer;
  font-size: 13px;
  padding: 6px 8px;
  text-decoration: underline;
  line-height: 1;
}
.danger-link:hover { color: #991b1b; }

.danger-btn {
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.danger-btn:hover { background: #b91c1c; }

.po-meta-row {
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-muted, #666);
}

.po-modal-footer {
  gap: 12px;
  flex-wrap: wrap;
}

.pick-lines-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pick-line-card {
  border: 1px solid #dde4ec;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.pick-line-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.pick-line-title {
  font-size: 15px;
  line-height: 1.3;
  color: #1b2d3f;
}

.pick-line-sku {
  font-size: 22px;
  font-weight: 700;
  color: #1b2d3f;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.pick-line-name {
  font-size: 13px;
  color: #5a6b7c;
  margin-top: 2px;
  margin-bottom: 6px;
  line-height: 1.3;
}

.pick-line-issue {
  border-color: #e7bac0;
  background: #fff9fa;
}

.pick-line-issue-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #d67984;
  background: #fff0f2;
  color: #9e2d3a;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.pick-line-issue-pill.hidden {
  display: none;
}

.pick-line-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 8px;
}

.pick-line-key {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.pick-line-label {
  font-size: 13px;
  color: #5a6b7c;
}

.pick-line-key strong,
.line-allocated-value {
  font-size: 15px;
  color: #193248;
  font-weight: 600;
}

.pick-line-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.pick-line-grid label {
  font-size: 12px;
  color: var(--muted);
}

.pick-line-grid select,
.pick-line-grid input {
  width: 100%;
  margin-top: 4px;
}

.pick-bins-hint {
  margin-top: 6px;
  margin-bottom: 6px;
  font-size: 12px;
}

.pick-bins-block {
  margin: 4px 0 8px;
  padding: 8px 10px;
  border: 1px solid #dbe4ec;
  border-radius: 8px;
  background: #f8fbfe;
}

.pick-bins-label {
  font-size: 13px;
  font-weight: 600;
  color: #38526a;
  margin-bottom: 4px;
}

.pick-bins-value {
  font-size: 14px;
  color: #23384c;
  line-height: 1.35;
}

.allocations-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.allocation-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.allocation-row-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.allocation-row-top select {
  flex: 1;
  min-width: 0;
}

.alloc-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid #ccd6e0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  height: 52px;
  width: 100%;
}

.stepper-btn {
  width: 52px;
  height: 52px;
  border: none;
  background: #f1f5f9;
  color: #21415f;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  line-height: 1;
  flex-shrink: 0;
}

.stepper-btn:active {
  background: #dbe8f4;
}

.stepper-value {
  flex: 1;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #1b2d3f;
  padding: 0 4px;
  user-select: none;
}

.pick-line-actions {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
}

.pick-line-actions button.secondary {
  background: none;
  border: 1px solid #ccd6e0;
  color: #38526a;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
  font-weight: 500;
}

.pick-line-actions button.secondary:hover {
  background: #f1f5f9;
}

.pick-summary-block {
  margin-bottom: 0;
}

.pick-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.pick-summary-header h3 {
  margin: 0;
  font-size: 18px;
}

.pick-summary-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #cfdceb;
  background: #edf4fb;
  color: #21415f;
  font-size: 12px;
  font-weight: 600;
}

.pick-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 8px;
}

.pick-summary-grid > div {
  border: 1px solid #dbe5ef;
  border-radius: 8px;
  padding: 8px 10px;
  background: #fff;
  min-width: 0;
}

.pick-summary-label {
  display: block;
  font-size: 12px;
  color: #617487;
  margin-bottom: 2px;
}

.pick-summary-grid strong {
  font-size: 14px;
  color: #1d3349;
}

.pick-summary-employee {
  grid-column: 1 / -1;
}

#pickEmployeeEditor {
  margin-top: 4px;
}

.claim-pick-btn {
  font-size: 13px;
  padding: 6px 16px;
}

.pick-lines-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pick-lines-header h3 {
  margin: 0;
}

.pick-overall-progress {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.pick-progress-done {
  color: #27ae60;
}

.pick-allocated-done {
  color: #27ae60;
}

#pickEmployeeClaimed {
  margin-top: 4px;
}

.pick-employee-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #bdd1e6;
  background: #eef6ff;
  color: #21415f;
  font-size: 13px;
  font-weight: 600;
}

.pick-employee-pill-remove {
  min-width: 24px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  padding: 0;
  border: 1px solid #9cb9d8;
  background: #fff;
  color: #21415f;
  font-size: 12px;
}

.delivery-address-block {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.delivery-address-text {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.35;
}

.delivery-maps-link {
  width: fit-content;
}

.pick-summary-actions {
  display: flex;
  justify-content: flex-start;
}

.pick-primary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 0;
}

#pickActionStatus {
  margin-left: 0 !important;
}

/* Remove button — small × circle */
.pick-remove-btn {
  background: #f1f5f9;
  border: 1px solid #ccd6e0;
  color: #8a9bac;
  font-size: 16px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.pick-remove-btn:hover {
  color: #c0392b;
  border-color: #e7bac0;
  background: #fff0f2;
}

/* Mark Not Found — secondary muted text, no border */
.pick-not-found-btn {
  background: none;
  border: none;
  color: #8a9bac;
  font-size: 12px;
  padding: 2px 6px;
  cursor: pointer;
}
.pick-not-found-btn:hover {
  color: #5a6b7c;
  background: none;
}

/* Line card: product info zone with subtle bottom separator */
.pick-line-info-zone {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid #edf1f6;
}

.pick-line-input-zone {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* No-stock bins empty block */
.pick-bins-empty {
  padding: 4px 0;
  background: none;
  border: none;
}
.pick-bins-empty .pick-bins-value {
  color: #a0aeba;
  font-size: 13px;
}

/* Compact inline metadata row */
.pick-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 13px;
  color: #4a5d6e;
  margin-top: 4px;
}
.pick-meta-label {
  color: #8a9bac;
  font-size: 12px;
  margin-right: 3px;
}
.pick-meta-sep {
  color: #c5cfd8;
  font-size: 12px;
}
.pick-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.pick-meta-employee {
  flex-shrink: 0;
}

/* Complete picking button highlight */
.pick-btn-complete {
  background: #27ae60 !important;
  border-color: #219a52 !important;
  color: #fff !important;
}
.pick-btn-complete:hover {
  background: #1f9151 !important;
}

/* Save button when the pick hasn't been claimed yet: muted so it reads as
   not-ready, but still tappable so the claim notice can surface. */
#markPickedBtn.needs-claim {
  background: #c8ced6 !important;
  border-color: #b6bcc6 !important;
  color: #4a5568 !important;
}

/* Success toast */
.pick-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #1d3349;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 9999;
}
.pick-toast.pick-toast-success {
  background: #1d6a3a;
}
.pick-toast.pick-toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Error overlay */
.pick-error-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 24px;
}

.pick-error-box {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.pick-error-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff0f2;
  border: 2px solid #e7bac0;
  color: #c0392b;
  font-size: 28px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.pick-error-msg {
  font-size: 16px;
  color: #1b2d3f;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 24px;
}

.pick-error-close {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 10px;
  background: #1b2d3f;
  color: #fff;
  border: none;
  cursor: pointer;
}

.pick-error-close:hover {
  background: #253d54;
}

/* Hide pick-lines-header when it has no visible h3 (h3 removed) */
.pick-lines-header:empty,
.pick-lines-header:has(> :only-child) {
  margin-bottom: 4px;
}

/* Invoice status pills on sales table — match .list-status-badge dimensions */
.inv-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
/* Tinted, to match .list-status-badge — solid fills made the table shout. */
.inv-pill-none { color: #a0aeba; }
.inv-pill-uninvoiced { background: #eef1f5; color: #4b5563; }
.inv-pill-invoiced   { background: #DBEAFE; color: #1D4ED8; }
/* Neutral on the Invoices page; the Sales list uses .pay-pill-unpaid instead. */
.inv-pill-unpaid     { background: #eef1f5; color: #4a5361; }
.inv-pill-paid       { background: #e4f2e8; color: #197038; }
.inv-pill-partial    { background: #fdf2d9; color: #92600a; }
.inv-pill-cancelled  { background: #eef1f5; color: #6b7280; }
/* Sales list Payment column. Paid is the one solid pill; "Paid to driver" is
   the same green, pale and outlined, so it reads as almost-paid without being
   mistaken for done while the cash is still with the driver. */
.inv-pill.pay-pill-paid   { background: #1f8a4c; color: #fff; }
.inv-pill.pay-pill-driver { background: #eef8f1; color: #1d6b3c; box-shadow: inset 0 0 0 1px #6cbf8a; }
.inv-pill.pay-pill-unpaid { background: #fae8e8; color: #a53232; }
.pay-pill-note { font-size: 10px; color: var(--muted, #6b7280); margin-top: 2px; white-space: nowrap; }

#invoicesTable .inv-row-check {
  display: block;
  width: 14px;
  height: 14px;
  min-height: 14px;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* Invoices KPI bar */
.invoices-kpi-bar {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.invoices-kpi-chip {
  background: var(--surface-2, #f4f6f9);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  min-width: 110px;
}
.invoices-kpi-chip-label {
  font-size: 10px;
  color: var(--muted-text, #888);
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.invoices-kpi-chip-value {
  font-size: 13px;
  font-weight: 700;
  font-family: Arial, sans-serif;
  color: var(--text, #111);
}
.invoices-kpi-chip.unpaid .invoices-kpi-chip-value { color: #C2410C; }
.invoices-kpi-chip.partial .invoices-kpi-chip-value { color: #D97706; }
.invoices-kpi-chip.paid   .invoices-kpi-chip-value { color: #16A34A; }

/* ---- Modernized KPI chips ---- */
.invoices-kpi-bar { gap: 12px; padding: 12px; }
.invoices-kpi-chip {
  flex: 1 1 130px;
  background: #fff;
  border: 1px solid #e6ebf1;
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 1px 2px rgba(15, 27, 39, 0.04);
}
.invoices-kpi-chip-label { font-size: 11px; letter-spacing: 0.05em; }
.invoices-kpi-chip-value { font-size: 18px; font-variant-numeric: tabular-nums; }

/* ---- Invoice detail popup ---- */
.inv-detail-card { max-width: 560px; height: auto; }
.inv-detail { padding: 4px 2px; display: flex; flex-direction: column; gap: 16px; }
.inv-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.inv-detail-title { display: flex; flex-direction: column; gap: 2px; }
.inv-detail-no { font-size: 20px; font-weight: 700; color: #1f2937; letter-spacing: -0.01em; }
.inv-detail-sale { font-size: 13px; color: #64748b; }
.inv-detail-pills { display: flex; gap: 6px; flex-wrap: wrap; }

.inv-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.inv-amount {
  background: #f7f9fc; border: 1px solid #e9eef4; border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px;
}
.inv-amount-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #8a95a3; font-weight: 600; }
.inv-amount-val { font-size: 18px; font-weight: 700; color: #1f2937; font-variant-numeric: tabular-nums; }
.inv-amount-paid { color: #16a34a; }
.inv-amount-due-box { background: #fff7ed; border-color: #fde6cf; }
.inv-amount-due { color: #c2410c; }
.inv-amount-clear { color: #16a34a; }

.inv-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.inv-info { display: flex; flex-direction: column; gap: 2px; }
.inv-info-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: #93a0af; font-weight: 600; }
.inv-info-val { font-size: 14px; color: #334155; }
.inv-address { display: flex; flex-direction: column; gap: 4px; }
.inv-address-val { font-size: 14px; color: #334155; line-height: 1.4; white-space: pre-line; }

.inv-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid #eef2f6; margin-top: 2px; padding-top: 14px; }

/* ---- Semantic buttons (detail + payment popups) ---- */
.inv-actions button, .inv-pay-actions button {
  height: 40px; padding: 0 18px; font-size: 14px; font-weight: 600;
  border-radius: 9px; border: 1px solid transparent; cursor: pointer;
}
button.btn-pay { background: #1f9254; border-color: #1f9254; color: #fff; }
button.btn-pay:hover { background: #197546; border-color: #197546; }
button.btn-doc { background: #fff; border-color: #c4cdd8; color: #33404f; }
button.btn-doc:hover { background: #f2f5f9; border-color: #aeb9c6; }

/* ---- Payment popup ---- */
.inv-pay-form { display: flex; flex-direction: column; gap: 16px; padding: 4px 2px; }
.inv-pay-summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: #f7f9fc; border: 1px solid #e9eef4; border-radius: 12px;
}
.inv-pay-no { font-size: 16px; font-weight: 700; color: #1f2937; }
.inv-pay-total { font-size: 14px; color: #64748b; }
.inv-pay-total strong { color: #1f2937; font-variant-numeric: tabular-nums; }
.inv-pay-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
/* min-width:0 — a grid item defaults to min-content width, so the select grew
   to fit its widest option and pushed out of the modal instead of shrinking. */
.inv-pay-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 12px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; }
/* width:100% + border-box so the control fills its column and its padding and
   border stay inside that width rather than adding to it. */
.inv-pay-field input, .inv-pay-field select { width: 100%; max-width: 100%; box-sizing: border-box; height: 42px; font-size: 16px; padding: 0 12px; border-radius: 9px; border: 1px solid #cbd5e1; font-weight: 400; text-transform: none; letter-spacing: normal; color: #1f2937; }
/* Received-amount stepper: ±$10 per click. */
.inv-pay-stepper { display: flex; align-items: stretch; gap: 0; border: 1px solid #cbd5e1; border-radius: 9px; overflow: hidden; }
.inv-pay-stepper input { flex: 1; height: 42px; border: 0 !important; border-radius: 0 !important; text-align: center; }
.inv-pay-stepper input:focus { box-shadow: none; }
.inv-pay-step { width: 46px; flex: 0 0 46px; border: 0; background: #f1f5f9; color: #21415f; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; }
.inv-pay-step:hover { background: #e2e8f0; }
.inv-pay-step:active { background: #d5e0ec; }

/* Compact payment popup on the Sales page (smaller box than the Invoices one). */
.sales-payment-card { max-width: 420px; width: 92vw; height: auto; }
.inv-pay-field input:focus, .inv-pay-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,91,219,0.12); }
.inv-pay-actions { display: flex; gap: 10px; }
.inv-pay-actions button[type="submit"] { flex: 1 1 auto; }
.inv-pay-status { font-size: 13px; }

@media (max-width: 560px) {
  .inv-amounts { grid-template-columns: 1fr; }
  .inv-info-grid, .inv-pay-fields { grid-template-columns: 1fr; }
}

/* Keep checkbox from inflating row height */
#salesBody .sale-row-check {
  display: block;
  margin: 0;
  width: 14px;
  height: 14px;
}

.token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.token-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e7eef6;
  border: 1px solid #c5d2e0;
  font-size: 12px;
}

.token-remove {
  width: 18px;
  height: 18px;
  border: 1px solid #9aabbd;
  background: #fff;
  color: #415568;
  border-radius: 999px;
  padding: 0;
  line-height: 1;
  font-size: 11px;
}

.token-remove:hover {
  background: #f3f6f9;
  color: #24394f;
}

.full-edit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 10px;
}

.full-edit-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid #e5eaef;
  border-radius: 6px;
  background: #fbfdff;
  min-width: 0;
}

.full-edit-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7d90;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.full-edit-value {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.full-edit-value input,
.full-edit-value textarea {
  width: 100%;
  min-width: 0;
}

.full-edit-value textarea {
  min-height: 72px;
}

.full-edit-value .inline-checkbox {
  min-height: 36px;
}

.compact-opt {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}

.compact-opt label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

@media (min-width: 1500px) {
  .full-edit-list {
    grid-template-columns: repeat(3, minmax(280px, 1fr));
  }
}

@media (max-width: 980px) {
  .full-edit-list {
    grid-template-columns: 1fr;
  }
}

.muted {
  color: var(--muted);
}

.page-notice {
  margin: 6px 0 10px;
  padding: 10px 12px;
  border: 1px solid #b9d9bc;
  background: #edf8ef;
  color: #1f4f28;
  border-radius: 6px;
  font-size: 13px;
}

@media (max-width: 1280px) {
  .layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .detail-panel {
    min-height: 360px;
  }

  .filters-row {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
}

.warehouse-body {
  background: #eef2f6;
}

.warehouse-main {
  padding: 10px;
  display: grid;
  gap: 10px;
}

.warehouse-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.warehouse-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.warehouse-panel-head h2 {
  margin: 0;
  font-size: 16px;
}

.pick-list,
.pick-lines {
  display: grid;
  gap: 8px;
}

.pick-card,
.pick-line-card {
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.pick-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 14px;
}

.pick-row:last-child {
  margin-bottom: 0;
}

.small-note {
  font-size: 12px;
}

.warehouse-doc-head {
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  background: #fff;
}

.warehouse-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.warehouse-actions .button-link {
  width: 100%;
}

.role-permissions-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

.role-permissions-role-panel,
.role-permissions-grid-panel {
  overflow: auto;
}

.role-permissions-grid {
  display: grid;
  gap: 10px;
}

.role-tab {
  display: block;
  width: 100%;
  margin-bottom: 6px;
  text-transform: capitalize;
}

.role-tab.active {
  background: #31516f;
  border-color: #31516f;
}

.role-perm-section {
  border: 1px solid #e1e7ee;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.role-perm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid #ecf1f6;
  background: #f8fbfe;
}

.role-perm-section-toggle {
  border: 0;
  background: transparent;
  color: #25384a;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
}

.role-perm-section-toggle:hover {
  color: #3b5bdb;
}

.role-perm-chevron {
  width: 14px;
  text-align: center;
  color: #5a6b7c;
  font-size: 12px;
}

.role-perm-title {
  letter-spacing: 0.02em;
}

.role-perm-category-toggle {
  margin: 0;
  font-size: 12px;
  color: #32495f;
}

.role-perm-section-body {
  padding: 8px 10px 10px;
  display: grid;
  gap: 6px;
}

.role-perm-section-body.hidden {
  display: none;
}

.role-perm-row {
  margin: 0;
  min-height: 24px;
}

.role-perm-row small {
  margin-left: 4px;
}

.dashboard-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.dashboard-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-section-head h2 {
  margin: 0;
  font-size: 16px;
}

.dashboard-card-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

#reconciliationCards {
  grid-template-columns: repeat(6, minmax(150px, 1fr));
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}

#reconciliationCards .dashboard-card {
  padding: 10px;
  min-height: 68px;
}

#reconciliationCards .dashboard-card-label {
  font-size: 11px;
}

#reconciliationCards .dashboard-card-value {
  font-size: 22px;
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  min-height: 74px;
}

.dashboard-card:hover {
  border-color: #b4c3d4;
  box-shadow: 0 6px 16px rgba(12, 23, 34, 0.08);
}

.dashboard-card-alert {
  border-color: #d46f7d;
}

.dashboard-card-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.dashboard-card-value {
  font-size: 24px;
  font-weight: 600;
}

.kpi-card .dashboard-card-value {
  font-size: 22px;
}

.dashboard-date-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.dashboard-date-filter label {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}

.dashboard-chart {
  height: 220px;
  border: 1px solid #d7e0ea;
  border-radius: 8px;
  padding: 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(24px, 1fr);
  gap: 6px;
  align-items: end;
  background: #fff;
  position: relative;
}

.dashboard-chart-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
}

.dashboard-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 6px;
}

.dashboard-bar-fill {
  width: 100%;
  max-width: 26px;
  background: linear-gradient(180deg, #3b5bdb, #2f49b0);
  border-radius: 6px 6px 4px 4px;
  min-height: 4px;
}

.dashboard-bar-value {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.dashboard-chart-axis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(24px, 1fr);
  gap: 6px;
  padding: 4px 12px 0;
  font-size: 10px;
  color: var(--muted);
}

.dashboard-axis-label {
  text-align: center;
}

@media (max-width: 820px) {
  .role-permissions-layout {
    grid-template-columns: 1fr;
  }

  .dashboard-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-actions {
    flex-wrap: wrap;
  }

  .top-actions .button-link {
    flex: 1 1 calc(50% - 8px);
    min-width: 130px;
  }

  .warehouse-actions button,
  .warehouse-actions .button-link {
    height: 42px;
    font-size: 15px;
  }

}

@media (max-width: 479px) {
  .login-screen {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 480px) {
  .login-brand-icon {
    width: 52px;
    height: 52px;
  }

  .login-brand h1 {
    font-size: 20px;
  }

  .login-card {
    padding: 28px;
  }

  .login-field + .login-field {
    margin-top: 18px;
  }

  .login-submit:hover {
    background: #145490;
    cursor: pointer;
  }
}

@media (max-width: 900px) {
  .nav-drawer {
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .nav-drawer-overlay {
    background: rgba(10, 18, 30, 0.55);
  }

  .nav-drawer-header {
    min-height: 56px;
    padding: 16px;
  }

  .nav-drawer-header h2 {
    font-size: 15px;
  }

  #navDrawer .nav-section-title {
    font-size: 11px;
  }

  #navDrawer .nav-drawer-links a {
    min-height: 44px;
  }

  #navDrawer .nav-drawer-header .close-btn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    font-size: 18px;
  }

  body[data-active-page="pickings"],
  body[data-active-page="deliveries"],
  body[data-active-page="transfers"],
  body[data-active-page="adjustments"],
  body[data-active-page="receiving"] {
    overflow-x: hidden;
  }

  body[data-active-page="pickings"] {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body[data-active-page="deliveries"] {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body[data-active-page="pickings"] .app-topbar,
  body[data-active-page="deliveries"] .app-topbar,
  body[data-active-page="transfers"] .app-topbar,
  body[data-active-page="adjustments"] .app-topbar,
  body[data-active-page="receiving"] .app-topbar {
    min-height: 56px;
    padding: 8px 10px;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
  }

  body[data-active-page="pickings"] .topbar-title,
  body[data-active-page="deliveries"] .topbar-title,
  body[data-active-page="transfers"] .topbar-title,
  body[data-active-page="adjustments"] .topbar-title,
  body[data-active-page="receiving"] .topbar-title {
    position: static;
    transform: none;
    flex: 1 1 auto;
    order: 2;
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
  }

  body[data-active-page="pickings"] .topbar-left,
  body[data-active-page="deliveries"] .topbar-left,
  body[data-active-page="transfers"] .topbar-left,
  body[data-active-page="adjustments"] .topbar-left,
  body[data-active-page="receiving"] .topbar-left {
    order: 1;
  }

  body[data-active-page="pickings"] .top-actions,
  body[data-active-page="deliveries"] .top-actions,
  body[data-active-page="transfers"] .top-actions,
  body[data-active-page="adjustments"] .top-actions,
  body[data-active-page="receiving"] .top-actions {
    order: 3;
    margin-left: auto;
    width: auto;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  body[data-active-page="pickings"] .top-actions .button-link,
  body[data-active-page="deliveries"] .top-actions .button-link,
  body[data-active-page="transfers"] .top-actions .button-link,
  body[data-active-page="adjustments"] .top-actions .button-link,
  body[data-active-page="receiving"] .top-actions .button-link {
    min-height: 40px;
  }

  body[data-active-page="pickings"] .layout,
  body[data-active-page="deliveries"] .layout,
  body[data-active-page="transfers"] .layout,
  body[data-active-page="adjustments"] .layout,
  body[data-active-page="receiving"] .layout {
    grid-template-columns: 1fr;
    height: calc(100vh - 56px);
    padding: 8px;
    gap: 8px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body[data-active-page="pickings"] .layout.panel-open,
  body[data-active-page="deliveries"] .layout.panel-open,
  body[data-active-page="transfers"] .layout.panel-open,
  body[data-active-page="adjustments"] .layout.panel-open,
  body[data-active-page="receiving"] .layout.panel-open {
    grid-template-columns: 1fr;
  }

  body[data-active-page="pickings"] .search-area,
  body[data-active-page="deliveries"] .search-area,
  body[data-active-page="transfers"] .search-area,
  body[data-active-page="adjustments"] .search-area,
  body[data-active-page="receiving"] .search-area {
    min-width: 0;
  }

  body[data-active-page="pickings"] .main-search-row,
  body[data-active-page="deliveries"] .main-search-row,
  body[data-active-page="transfers"] .main-search-row,
  body[data-active-page="adjustments"] .main-search-row,
  body[data-active-page="receiving"] .main-search-row {
    grid-template-columns: 1fr 1fr;
  }

  body[data-active-page="pickings"] .main-search-row > input,
  body[data-active-page="deliveries"] .main-search-row > input,
  body[data-active-page="transfers"] .main-search-row > input,
  body[data-active-page="adjustments"] .main-search-row > input,
  body[data-active-page="receiving"] .main-search-row > input {
    grid-column: 1 / -1;
  }

  body[data-active-page="pickings"] .main-search-row > button,
  body[data-active-page="deliveries"] .main-search-row > button,
  body[data-active-page="transfers"] .main-search-row > button,
  body[data-active-page="adjustments"] .main-search-row > button,
  body[data-active-page="receiving"] .main-search-row > button,
  body[data-active-page="pickings"] .search-row input,
  body[data-active-page="deliveries"] .search-row input,
  body[data-active-page="transfers"] .search-row input,
  body[data-active-page="adjustments"] .search-row input,
  body[data-active-page="receiving"] .search-row input,
  body[data-active-page="pickings"] .search-row select,
  body[data-active-page="deliveries"] .search-row select,
  body[data-active-page="transfers"] .search-row select,
  body[data-active-page="adjustments"] .search-row select,
  body[data-active-page="receiving"] .search-row select,
  body[data-active-page="pickings"] .filters-row select,
  body[data-active-page="deliveries"] .filters-row select,
  body[data-active-page="transfers"] .filters-row select,
  body[data-active-page="adjustments"] .filters-row select,
  body[data-active-page="receiving"] .filters-row select {
    min-height: 42px;
    font-size: 16px;
  }

  body[data-active-page="pickings"] .filters-row,
  body[data-active-page="deliveries"] .filters-row,
  body[data-active-page="transfers"] .filters-row,
  body[data-active-page="adjustments"] .filters-row,
  body[data-active-page="receiving"] .filters-row,
  body[data-active-page="pickings"] .sales-filters-row,
  body[data-active-page="deliveries"] .sales-filters-row,
  body[data-active-page="transfers"] .sales-filters-row,
  body[data-active-page="adjustments"] .sales-filters-row,
  body[data-active-page="receiving"] .sales-filters-row {
    grid-template-columns: 1fr !important;
  }

  body[data-active-page="pickings"] .results-wrap,
  body[data-active-page="deliveries"] .results-wrap,
  body[data-active-page="transfers"] .results-wrap,
  body[data-active-page="adjustments"] .results-wrap,
  body[data-active-page="receiving"] .results-wrap {
    overflow-x: hidden;
    padding: 8px 6px;
  }

  body[data-active-page="deliveries"] .results-wrap {
    overflow: visible;
    max-height: none;
  }

  body[data-active-page="pickings"] #pickingsTable,
  body[data-active-page="deliveries"] #deliveriesTable,
  body[data-active-page="transfers"] #transfersTable,
  body[data-active-page="adjustments"] #adjustmentsTable,
  body[data-active-page="receiving"] #receivingPoTable {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  body[data-active-page="pickings"] #pickingsTable thead,
  body[data-active-page="deliveries"] #deliveriesTable thead,
  body[data-active-page="transfers"] #transfersTable thead,
  body[data-active-page="adjustments"] #adjustmentsTable thead,
  body[data-active-page="receiving"] #receivingPoTable thead {
    display: none;
  }

  body[data-active-page="pickings"] #pickingsTable tbody,
  body[data-active-page="deliveries"] #deliveriesTable tbody,
  body[data-active-page="transfers"] #transfersTable tbody,
  body[data-active-page="adjustments"] #adjustmentsTable tbody,
  body[data-active-page="receiving"] #receivingPoTable tbody {
    display: grid;
    gap: 8px;
  }

  body[data-active-page="pickings"] #pickingsTable tbody tr,
  body[data-active-page="deliveries"] #deliveriesTable tbody tr,
  body[data-active-page="transfers"] #transfersTable tbody tr,
  body[data-active-page="adjustments"] #adjustmentsTable tbody tr,
  body[data-active-page="receiving"] #receivingPoTable tbody tr {
    display: block;
    border: 1px solid #d7e0ea;
    border-radius: 8px;
    background: #fff;
    padding: 8px;
  }

  /* Each row is a card whose cells flow in TWO columns rather than one stacked
     line per field. A picking row has 8 fields; one full-width line each made a
     ~220px card, so barely three fit on a phone. Paired up with the label above
     the value, the same card is roughly half that and twice as many fit. */
  body[data-active-page="pickings"] #pickingsTable tbody tr,
  body[data-active-page="deliveries"] #deliveriesTable tbody tr,
  body[data-active-page="transfers"] #transfersTable tbody tr,
  body[data-active-page="adjustments"] #adjustmentsTable tbody tr,
  body[data-active-page="receiving"] #receivingPoTable tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    padding: 8px 10px;
  }

  body[data-active-page="pickings"] #pickingsTable tbody td,
  body[data-active-page="deliveries"] #deliveriesTable tbody td,
  body[data-active-page="transfers"] #transfersTable tbody td,
  body[data-active-page="adjustments"] #adjustmentsTable tbody td,
  body[data-active-page="receiving"] #receivingPoTable tbody td {
    display: block;
    min-width: 0;
    border: 0;
    padding: 0;
    white-space: normal;
    word-break: break-word;
    font-size: 13px;
    line-height: 1.3;
  }

  /* Label INLINE with the value, not on its own line. A stacked label doubles
     every field's height, which is what made these cards ~212px; inline, the
     same field is one line. */
  body[data-active-page="pickings"] #pickingsTable tbody td::before,
  body[data-active-page="deliveries"] #deliveriesTable tbody td::before,
  body[data-active-page="transfers"] #transfersTable tbody td::before,
  body[data-active-page="adjustments"] #adjustmentsTable tbody td::before,
  body[data-active-page="receiving"] #receivingPoTable tbody td::before {
    display: inline;
    margin-right: 5px;
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    line-height: 1.2;
    /* The markup already carries data-label on every cell; use it instead of a
       per-column nth-child list that silently goes wrong when a column is
       added (pickings' list had drifted by one, mislabelling Date and Lines). */
    content: attr(data-label);
  }

  /* The first cell is the document number — the thing you scan for. Give it the
     full width and make it the headline of the card. */
  body[data-active-page="pickings"] #pickingsTable tbody td:first-child,
  body[data-active-page="deliveries"] #deliveriesTable tbody td:first-child,
  body[data-active-page="transfers"] #transfersTable tbody td:first-child,
  body[data-active-page="adjustments"] #adjustmentsTable tbody td:first-child,
  body[data-active-page="receiving"] #receivingPoTable tbody td:first-child {
    grid-column: 1 / -1;
    font-size: 15px;
    font-weight: 600;
  }

  /* A long free-text cell (the SKU summary on pickings) needs the full width or
     it wraps into a tall narrow column. */
  body[data-active-page="pickings"] #pickingsTable tbody td.pick-items-cell {
    grid-column: 1 / -1;
  }

  /* The batch checkbox is not a labelled field — keep it out of the grid flow. */
  body[data-active-page="pickings"] #pickingsTable tbody td:has(.pick-row-check) {
    grid-column: 1 / -1;
    padding: 0;
  }
  body[data-active-page="pickings"] #pickingsTable tbody td:has(.pick-row-check)::before {
    content: none;
  }

  /* Pickings on a phone: drop the labelled-field layout entirely and show one
     purpose-built card per pick. A picker scans for the PARTS and the CUSTOMER;
     Date, Lines and the field labels themselves are noise that pushed the card
     past 200px. Everything remains available by tapping into Pick Details. */
  body[data-active-page="pickings"] #pickingsTable tbody td:not(.pick-mobile-card):not(:has(.pick-row-check)):not(.day-group-cell),
  body[data-active-page="deliveries"] #deliveriesTable tbody td:not(.pick-mobile-card):not(:has(.delivery-row-check)):not(.day-group-cell),
  body[data-active-page="transfers"] #transfersTable tbody td:not(.pick-mobile-card):not(.day-group-cell),
  body[data-active-page="adjustments"] #adjustmentsTable tbody td:not(.pick-mobile-card):not(.day-group-cell) {
    display: none;
  }
  body[data-active-page="pickings"] #pickingsTable tbody,
  body[data-active-page="deliveries"] #deliveriesTable tbody,
  body[data-active-page="transfers"] #transfersTable tbody,
  body[data-active-page="adjustments"] #adjustmentsTable tbody {
    display: grid;
    gap: 10px;
  }

  body[data-active-page="pickings"] #pickingsTable tbody tr:not(.day-group-row),
  body[data-active-page="deliveries"] #deliveriesTable tbody tr:not(.day-group-row),
  body[data-active-page="transfers"] #transfersTable tbody tr:not(.day-group-row),
  body[data-active-page="adjustments"] #adjustmentsTable tbody tr {
    display: block;
    padding: 0;
    border: 1px solid var(--p-line, #e7ecf1);
    border-radius: var(--w-card-radius, 16px);
    background: #fff;
    box-shadow: var(--w-card-shadow, 0 4px 16px rgba(0, 0, 0, 0.06));
    border-color: transparent;
  }
  body[data-active-page="pickings"] #pickingsTable tbody td.pick-mobile-card,
  body[data-active-page="deliveries"] #deliveriesTable tbody td.pick-mobile-card,
  body[data-active-page="transfers"] #transfersTable tbody td.pick-mobile-card,
  body[data-active-page="adjustments"] #adjustmentsTable tbody td.pick-mobile-card {
    display: block;
    grid-column: 1 / -1;
    padding: 14px;
  }
  /* The stacked-table layout prints each cell's data-label before its value.
     The mobile card supplies its own headings, so that label is dead space —
     26px of it at the top of every card. This was scoped to pickings only,
     which is why the Deliveries cards carried the gap. */
  body[data-active-page="pickings"] #pickingsTable tbody td.pick-mobile-card::before,
  body[data-active-page="deliveries"] #deliveriesTable tbody td.pick-mobile-card::before,
  body[data-active-page="transfers"] #transfersTable tbody td.pick-mobile-card::before,
  body[data-active-page="adjustments"] #adjustmentsTable tbody td.pick-mobile-card::before {
    content: none !important;
  }
  .pmc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
  }
  .pmc-no {
    font-size: var(--wt-hero);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wt-ink);
  }
  .pmc-status {
    flex: 0 0 auto;
    font-size: var(--wt-micro);
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: #eef2f7;
    color: #46536b;
    white-space: nowrap;
  }
  /* Claimed and in progress reads differently from waiting to be started. */
  .pmc-status-picking { background: #e6f0ff; color: #24488f; }
  .pmc-status-awaiting_picking { background: #fff2e0; color: #8a5314; }
  /* The parts are the point of the card, so they get the most weight. */
  /* The parts, second only to the sale number. */
  .pmc-items {
    font-size: var(--wt-body);
    font-weight: 600;
    line-height: 1.4;
    color: var(--wt-ink);
    overflow-wrap: anywhere;
  }
  .pmc-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    font-size: var(--wt-label);
  }
  .pmc-customer {
    min-width: 0;
    color: var(--wt-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pmc-meta {
    flex: 0 0 auto;
    font-size: var(--wt-micro);
    color: var(--wt-ink-soft);
    white-space: nowrap;
  }

  /* Drop the fields that do not help someone scanning the list on a phone.
     Tapping the card still opens the full detail, so nothing is lost — this
     only decides what is worth vertical space in the list itself.

     "Lines" duplicates what the Items summary already conveys. Matched on
     data-label rather than position, so adding a column cannot silently start
     hiding the wrong one. */
  body[data-active-page="pickings"] #pickingsTable tbody td[data-label="Lines"],
  body[data-active-page="deliveries"] #deliveriesTable tbody td[data-label="Lines"],
  body[data-active-page="transfers"] #transfersTable tbody td[data-label="Lines"] {
    display: none;
  }

  /* Keep the label from wrapping onto a second line for the short fields,
     which is what actually costs the extra pixels. */
  body[data-active-page="pickings"] #pickingsTable tbody td::before,
  body[data-active-page="deliveries"] #deliveriesTable tbody td::before,
  body[data-active-page="transfers"] #transfersTable tbody td::before,
  body[data-active-page="adjustments"] #adjustmentsTable tbody td::before {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  body[data-active-page="receiving"] #receivingPoTable tbody td:nth-child(5) button {
    width: 100%;
    min-height: 40px;
  }

  body[data-active-page="deliveries"] .detail-panel,
  body[data-active-page="transfers"] .detail-panel,
  body[data-active-page="adjustments"] .detail-panel {
    position: fixed;
    inset: 56px 0 0 0;
    z-index: 66;
    border-radius: 0;
    border: 0;
    background: #fff;
  }

  body[data-active-page="deliveries"] .detail-panel {
    inset: 0;
    z-index: 84;
    box-shadow: 0 0 0 1px #d7e0ea;
  }

  body[data-active-page="deliveries"] .detail-panel-header,
  body[data-active-page="transfers"] .detail-panel-header,
  body[data-active-page="adjustments"] .detail-panel-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
    border-bottom: 1px solid var(--line);
  }

  body[data-active-page="deliveries"] .detail-content,
  body[data-active-page="transfers"] .detail-content,
  body[data-active-page="adjustments"] .detail-content {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
  }

  body[data-active-page="deliveries"] .detail-content {
    height: calc(100dvh - 58px);
    overscroll-behavior: contain;
  }

  body[data-active-page="deliveries"] .detail-content input,
  body[data-active-page="deliveries"] .detail-content select,
  body[data-active-page="deliveries"] .detail-content textarea {
    font-size: 16px;
  }

  body[data-active-page="deliveries"].delivery-detail-open {
    overflow: hidden;
  }

  body[data-active-page="deliveries"].delivery-detail-open .layout {
    overflow: hidden;
  }

  body[data-active-page="pickings"] .modal-card,
  body[data-active-page="transfers"] .modal-card,
  body[data-active-page="adjustments"] .modal-card,
  body[data-active-page="receiving"] .modal-card {
    width: 100vw;
    max-width: 100vw;
    /* Sized to the VISUAL viewport, so the card ends where the keyboard
       begins. Pinned to 100vh it stayed a full unshrunk screen tall on
       Android and the keyboard simply covered the lower half with no way to
       reach it — while the body inside was already capped at 100dvh, so the
       two disagreed. Anything that no longer fits scrolls in the body.
       vh first as the fallback for browsers without dvh. */
    height: 100vh;
    max-height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  /* Only the line list scrolls; the header and the submit button stay put, so
     the keyboard cannot shove them off-screen. */
  body[data-active-page="receiving"] .modal-card .modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
  }

  body[data-active-page="pickings"] .modal,
  body[data-active-page="transfers"] .modal,
  body[data-active-page="adjustments"] .modal,
  body[data-active-page="receiving"] .modal {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    /* Match the card: a fixed inset:0 overlay is the full screen, which would
       keep stretching the card behind the keyboard. */
    height: 100vh;
    height: 100dvh;
  }

  body[data-active-page="pickings"] .modal-body,
  body[data-active-page="transfers"] .modal-body,
  body[data-active-page="adjustments"] .modal-body,
  body[data-active-page="receiving"] .modal-body {
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }

  /* Prevent iOS/Safari focus zoom inside picking popup by keeping editable controls >=16px. */
  body[data-active-page="pickings"] #pickModal input:not([type="checkbox"]):not([disabled]),
  body[data-active-page="pickings"] #pickModal select:not([disabled]),
  body[data-active-page="pickings"] #pickModal textarea:not([disabled]) {
    font-size: 16px;
    line-height: 1.3;
  }

  body[data-active-page="adjustments"] #adjustmentModal input:not([type="checkbox"]):not([disabled]),
  body[data-active-page="adjustments"] #adjustmentModal select:not([disabled]),
  body[data-active-page="adjustments"] #adjustmentModal textarea:not([disabled]) {
    font-size: 16px;
    line-height: 1.3;
  }

  body[data-active-page="adjustments"] #adjustmentsLayout > .search-area > .top-actions {
    justify-items: center;
    place-items: center;
  }

  body[data-active-page="adjustments"] #newAdjustmentBtn {
    width: min(100%, 300px);
    min-height: 56px;
    font-size: 18px;
    font-weight: 700;
    margin: 0 auto;
    justify-self: center;
  }

  body[data-active-page="adjustments"] .adjustment-form-grid,
  body[data-active-page="adjustments"] .adjustment-form-left,
  body[data-active-page="adjustments"] .adjustment-primary-fields {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-active-page="adjustments"] .adjustment-stock-box-inline,
  body[data-active-page="adjustments"] .adjustment-compact-field,
  body[data-active-page="adjustments"] .adjustment-product-field,
  body[data-active-page="adjustments"] .adjustment-note-field,
  body[data-active-page="adjustments"] .adjustment-product-results {
    max-width: 100%;
  }

  body[data-active-page="transfers"] .allocation-row {
    grid-template-columns: 1fr;
  }

  body[data-active-page="pickings"] .pick-line-actions,
  body[data-active-page="transfers"] .pick-line-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  body[data-active-page="transfers"] .pick-line-card {
    width: 100%;
  }

  body[data-active-page="transfers"] .allocation-row select {
    width: 100%;
  }

  body[data-active-page="transfers"] .pick-line-sku {
    font-size: 22px;
  }

  body[data-active-page="transfers"] .pick-line-label,
  body[data-active-page="transfers"] .pick-bins-label {
    font-size: 14px;
  }

  body[data-active-page="transfers"] .pick-line-key strong,
  body[data-active-page="transfers"] .line-allocated-value,
  body[data-active-page="transfers"] .pick-bins-value {
    font-size: 15px;
  }

  body[data-active-page="pickings"] .form-actions,
  body[data-active-page="deliveries"] .form-actions,
  body[data-active-page="transfers"] .form-actions,
  body[data-active-page="adjustments"] .form-actions,
  body[data-active-page="receiving"] .form-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
  }

  body[data-active-page="pickings"] .form-actions button,
  body[data-active-page="deliveries"] .form-actions button,
  body[data-active-page="transfers"] .form-actions button,
  body[data-active-page="adjustments"] .form-actions button,
  body[data-active-page="receiving"] .form-actions button {
    width: 100%;
    min-height: 42px;
    font-size: 15px;
  }

  body[data-active-page="pickings"] .pick-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  body[data-active-page="pickings"] .pick-meta-sep {
    display: none;
  }

  body[data-active-page="pickings"] .pick-line-card {
    width: 100%;
  }

  body[data-active-page="pickings"] .allocation-row select {
    width: 100%;
  }

  /* Bumped to 26px for legibility, but that put the SKU above the page title
     and flattened everything under it. The scale keeps it dominant within the
     card without competing with the app chrome. */
  /* The SKU leads its card but must not match the page title. One step under
     it, and level with the list's sale number, keeps the two screens coherent. */
  body[data-active-page="pickings"] .pick-line-sku {
    font-size: var(--wt-hero);
  }

  body[data-active-page="pickings"] #pickEmployeeEditor {
    grid-template-columns: 1fr;
  }

  body[data-active-page="pickings"] .pick-line-title {
    font-size: 14px;
  }

  body[data-active-page="pickings"] .pick-line-label,
  body[data-active-page="pickings"] .pick-bins-label {
    font-size: var(--wt-micro);
  }

  /* Tile figures are the reading target: 20px/800 per the spec. The bin hint
     stays at body size — it is supporting text, not a figure. */
  body[data-active-page="pickings"] .pick-line-key strong,
  body[data-active-page="pickings"] .line-allocated-value {
    font-size: 20px;
    font-weight: 800;
  }

  body[data-active-page="pickings"] .pick-bins-value {
    font-size: var(--wt-body);
  }

  body[data-active-page="pickings"] .field-grid,
  body[data-active-page="deliveries"] .field-grid,
  body[data-active-page="transfers"] .field-grid,
  body[data-active-page="adjustments"] .field-grid,
  body[data-active-page="receiving"] .field-grid,
  body[data-active-page="pickings"] .detail-grid,
  body[data-active-page="deliveries"] .detail-grid,
  body[data-active-page="transfers"] .detail-grid,
  body[data-active-page="adjustments"] .detail-grid,
  body[data-active-page="receiving"] .detail-grid {
    grid-template-columns: 1fr;
  }

  body[data-active-page="receiving"] #manualReceivePanel {
    margin-top: 8px;
  }

  body[data-active-page="receiving"] #poReceiveModal input:not([type="checkbox"]):not([disabled]),
  body[data-active-page="receiving"] #poReceiveModal select:not([disabled]) {
    font-size: 16px;
    line-height: 1.3;
  }

  /* ---- Mobile: sticky primary-action bar (warehouse task flows) ----------
     Keep the main commit button (Save Picking / Place / Save Transfer, etc.)
     pinned to the bottom of the scrolling modal/panel so it's always in the
     thumb zone instead of buried under a long list of line cards. */
  body[data-active-page="pickings"] .pick-primary-actions,
  body[data-active-page="pickings"] #pickModal .form-actions,
  body[data-active-page="transfers"] .modal-body .form-actions,
  body[data-active-page="adjustments"] .modal-body .form-actions,
  body[data-active-page="receiving"] .modal-body .form-actions {
    position: sticky;
    /* -12px, not 0: the bar is inside the scrolling .modal-body, whose own
       12px bottom padding sat BELOW the bar. Content scrolled through that gap
       and showed under the Save button. Pulling the bar down by exactly that
       padding puts its edge on the container edge, with nothing behind it. */
    bottom: -12px;
    z-index: 3;
    margin: 12px -12px -12px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    background: var(--panel, #fff);
    border-top: 1px solid var(--line, #e2e8f0);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* Dark rather than accent-blue: this is the commit action at the end of the
     flow, and the blue is already used for status pills and the progress bar. */
  body[data-active-page="pickings"] .pick-primary-actions > button:not(.secondary) {
    background: #1d2939;
    border-color: #1d2939;
    border-radius: var(--p-radius-sm, 10px);
  }
  body[data-active-page="pickings"] .pick-primary-actions > button:not(.secondary):hover {
    background: #131c28;
  }

  /* The primary button in that bar fills the row and is a full-height tap target. */
  body[data-active-page="pickings"] .pick-primary-actions > button:not(.secondary),
  body[data-active-page="transfers"] .modal-body .form-actions > button[type="submit"],
  body[data-active-page="adjustments"] .modal-body .form-actions > button[type="submit"],
  body[data-active-page="receiving"] .modal-body .form-actions > button[type="submit"] {
    flex: 1 1 auto;
    min-height: 52px;
    font-size: 16px;
    font-weight: 600;
  }

  /* Sticky bar for detail-panel flows: sales/returns inline actions, and the
     deliveries "Complete Delivery" action bar (plain .form-actions in the panel). */
  /* The panel is a column: content grows, the action bar is pushed to the
     bottom edge. Sticky alone was not enough — when the content is shorter than
     the screen there is nothing to scroll, so the bar just sat wherever the
     content ended and left dead space beneath it. margin-top:auto fills that
     gap; sticky still holds the bar in view once the content DOES overflow. */
  body[data-active-page="deliveries"] .detail-content {
    display: flex;
    flex-direction: column;
  }
  body[data-active-page="deliveries"] .detail-content > .form-actions {
    margin-top: auto;
  }

  .detail-panel .detail-content .form-actions.detail-panel-inline-actions,
  body[data-active-page="deliveries"] .detail-content > .form-actions {
    position: sticky;
    bottom: 0;
    margin-bottom: 0;
    z-index: 3;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    background: var(--panel, #fff);
    border-top: 1px solid var(--line, #e2e8f0);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.06);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  body[data-active-page="deliveries"] .detail-content > .form-actions > button {
    flex: 1 1 auto;
    min-height: 52px;
    font-size: 16px;
    font-weight: 600;
  }

  /* ---- Mobile: enlarge borderline tap targets to >=44px ------------------ */
  .pick-line-actions button,
  .pick-not-found-btn,
  .receive-po-btn,
  .receive-sales-return-btn {
    min-height: 44px;
  }
  /* Keep the remove-bin control a circle, just a bigger one. */
  .pick-remove-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 18px;
  }
  .pick-line-actions button.secondary {
    padding: 10px 16px;
  }
  /* Give the two per-line pick buttons room to sit side by side as full targets. */
  .pick-line-actions {
    flex-wrap: wrap;
    gap: 10px;
  }
  .pick-line-actions button {
    flex: 1 1 auto;
  }

  /* ------------------------------------------------------------------
     Denser work-list cards.

     A busy morning puts dozens of picks on screen at once. The card was
     laid out for comfort at a desk, and on a phone that meant roughly
     three visible at a time and a long scroll to reach the rest. These
     rules tighten the vertical rhythm only — no text is removed and no
     font drops below the size a picker reads at arm's length on a
     warehouse floor.
     ------------------------------------------------------------------ */
  body[data-active-page="pickings"] #pickingsTable tbody,
  body[data-active-page="deliveries"] #deliveriesTable tbody {
    gap: 7px;
  }
  /* !important because a global rule
     (body[data-active-page] .search-area .results-wrap > table tbody td)
     sets 12px !important on every table cell in the app. Without matching it
     the card padding silently stays at 12px — which is why the original 14px
     here never took effect either. */
  body[data-active-page="pickings"] #pickingsTable tbody td.pick-mobile-card,
  body[data-active-page="deliveries"] #deliveriesTable tbody td.pick-mobile-card {
    padding: 9px 12px !important;
  }
  body[data-active-page="pickings"] #pickingsTable .pmc-top,
  body[data-active-page="deliveries"] #deliveriesTable .pmc-top {
    margin-bottom: 3px;
  }
  /* The sale number stays prominent, just not oversized. */
  body[data-active-page="pickings"] #pickingsTable .pmc-no,
  body[data-active-page="deliveries"] #deliveriesTable .pmc-no {
    font-size: 16px;
  }
  body[data-active-page="pickings"] #pickingsTable .pmc-items,
  body[data-active-page="deliveries"] #deliveriesTable .pmc-items {
    line-height: 1.3;
  }
  /* The footer used to be a full row of its own below a divider, spending
     ~27px on the warehouse and the assignee. Those are secondary details on a
     list someone is scanning for parts and customers, so they now ride on one
     compact line with no divider and no extra block. */
  body[data-active-page="pickings"] #pickingsTable .pmc-foot,
  body[data-active-page="deliveries"] #deliveriesTable .pmc-foot {
    margin-top: 4px;
    padding-top: 0;
    border-top: 0;
    font-size: 11px;
    line-height: 1.25;
  }
  body[data-active-page="pickings"] #pickingsTable .pmc-foot .pmc-ico,
  body[data-active-page="deliveries"] #deliveriesTable .pmc-foot .pmc-ico {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
  }
  /* The status pill drove the header row to 24px on its own. */
  body[data-active-page="pickings"] #pickingsTable .pmc-status,
  body[data-active-page="deliveries"] #deliveriesTable .pmc-status {
    padding: 2px 7px;
    font-size: 10px;
  }
  body[data-active-page="pickings"] #pickingsTable .pmc-line,
  body[data-active-page="deliveries"] #deliveriesTable .pmc-line {
    gap: 6px;
  }
  body[data-active-page="pickings"] #pickingsTable .pmc-line + .pmc-line,
  body[data-active-page="deliveries"] #deliveriesTable .pmc-line + .pmc-line {
    margin-top: 2px;
  }

}

@media (max-width: 900px) {
  .nav-drawer-header {
    min-height: 56px;
    padding: 16px;
    display: flex;
    grid-template-columns: none;
    align-items: center;
    row-gap: 0;
  }

  .nav-drawer-header h2 {
    font-size: 15px;
    line-height: 1.2;
  }

  .nav-drawer-header .drawer-user {
    grid-column: auto;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    font-size: 12px;
  }

  #closeNavDrawerBtn {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    font-size: 20px;
  }

  /* ------------------------------------------------------------------
     Products page, phones only.

     Everything below is scoped to both the 900px media query and
     body[data-active-page="products"], so the desktop Products page and
     every other page are untouched.

     One local token set drives the whole page so spacing, radii and
     shadows stay consistent instead of being re-guessed per component.
     ------------------------------------------------------------------ */
  body[data-active-page="products"] {
    --pm-s1: 4px;
    --pm-s2: 8px;
    --pm-s3: 12px;
    --pm-s4: 16px;
    --pm-r-sm: 8px;
    --pm-r-md: 12px;
    --pm-r-lg: 16px;
    --pm-r-pill: 999px;
    --pm-surface: #fff;
    --pm-sunken: #f4f6fa;
    --pm-line: #e3e8f0;
    --pm-line-strong: #cdd6e4;
    --pm-ink: #16202f;
    --pm-ink-soft: #5b6879;
    --pm-accent: var(--accent, #2358a8);
    --pm-accent-soft: #eaf1fb;
    --pm-shadow: 0 1px 2px rgba(16, 32, 56, 0.06), 0 4px 12px rgba(16, 32, 56, 0.05);
    --pm-tap: 44px;
  }

  /* --- Action bar -------------------------------------------------- */
  /* Button hierarchy: New Sale / Quote is the primary job on this page,
     so it is the only filled button and takes the full first row. Add
     Product and Import Products are secondary outlines sharing row two.
     Export stays a quiet tertiary link. */
  body[data-active-page="products"] .top-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pm-s2);
    padding: var(--pm-s3) var(--pm-s3) var(--pm-s2) !important;
    border-bottom: 1px solid var(--pm-line) !important;
  }

  body[data-active-page="products"] .top-actions .button-link {
    flex: 1 1 calc(50% - var(--pm-s2));
    min-width: 0;
    min-height: var(--pm-tap);
    padding: 0 var(--pm-s3);
    border: 1px solid var(--pm-line-strong);
    border-radius: var(--pm-r-md);
    background: var(--pm-surface);
    color: var(--pm-ink);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: none;
  }

  body[data-active-page="products"] .top-actions #newSaleBtn {
    flex: 1 1 100%;
    border-color: transparent;
    background: var(--pm-accent);
    color: #fff;
    box-shadow: var(--pm-shadow);
  }

  body[data-active-page="products"] .top-actions #newSaleBtn:active {
    background: #1b4a90;
  }

  body[data-active-page="products"] .top-actions .button-link:active {
    background: var(--pm-sunken);
  }

  /* Selection count / totals / clear read as one quiet status strip
     rather than three differently-sized scraps of text. */
  body[data-active-page="products"] #productsSelectionCount,
  body[data-active-page="products"] #productsStockTotals,
  body[data-active-page="products"] #productsClearSelection {
    font-size: 12px !important;
    line-height: var(--pm-tap);
    margin-left: 0 !important;
  }

  body[data-active-page="products"] #productsClearSelection {
    margin-left: auto !important;
    min-height: var(--pm-tap);
    display: inline-flex;
    align-items: center;
  }

  body[data-active-page="products"] #exportExcelMenu {
    margin-left: auto !important;
    flex: 0 0 auto;
  }

  body[data-active-page="products"] #exportExcelMenu .button-link {
    flex: 0 0 auto;
    border-color: transparent;
    background: none;
    color: var(--pm-ink-soft);
    font-weight: 500;
    font-size: 13px;
    padding: 0 var(--pm-s1);
  }

  /* --- Search ------------------------------------------------------ */
  body[data-active-page="products"] .search-area {
    gap: 0;
  }

  body[data-active-page="products"] .search-row,
  body[data-active-page="products"] .main-search-row {
    gap: var(--pm-s2);
    padding: var(--pm-s3) var(--pm-s3) var(--pm-s2);
  }

  body[data-active-page="products"] .main-search-row #searchInput {
    min-height: var(--pm-tap);
    border-radius: var(--pm-r-md);
    border: 1px solid var(--pm-line-strong);
    background: var(--pm-surface);
    padding: 0 var(--pm-s3);
    font-size: 16px; /* 16px stops iOS Safari zooming the page on focus */
  }

  body[data-active-page="products"] .main-search-row #searchBtn,
  body[data-active-page="products"] .main-search-row #clearFiltersBtn {
    min-height: var(--pm-tap);
    padding: 0 var(--pm-s4);
    border-radius: var(--pm-r-md);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* --- Filter pills ------------------------------------------------ */
  /* The five filters are one visually grouped band on a sunken ground, so
     they read as a related set rather than five loose buttons, and each
     carries a chevron so it is obviously a dropdown. */
  body[data-active-page="products"] .filters-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pm-s2);
    margin: 0 var(--pm-s3) var(--pm-s3);
    padding: var(--pm-s2);
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    background: var(--pm-sunken);
  }

  body[data-active-page="products"] .filters-row .combo {
    display: grid;
    align-content: start;
    flex: 1 1 calc(50% - var(--pm-s2));
    min-width: 0;
  }

  body[data-active-page="products"] .combo .combo-button {
    display: flex;
    align-items: center;
    gap: var(--pm-s1);
    width: 100%;
    min-height: var(--pm-tap);
    padding: 0 var(--pm-s3);
    border: 1px solid var(--pm-line-strong);
    border-radius: var(--pm-r-pill);
    background: var(--pm-surface);
    color: var(--pm-ink-soft);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
  }

  body[data-active-page="products"] .combo .combo-button-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-active-page="products"] .combo .combo-chevron {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.55;
    transition: transform 0.15s ease;
  }

  body[data-active-page="products"] .combo .combo-button[data-open] .combo-chevron {
    transform: translateY(1px) rotate(-135deg);
  }

  /* An applied filter is a filled accent chip, so which filters are on is
     readable without opening any of them. */
  body[data-active-page="products"] .combo .combo-button[data-active] {
    border-color: var(--pm-accent);
    background: var(--pm-accent-soft);
    color: var(--pm-accent);
    font-weight: 600;
  }

  body[data-active-page="products"] .combo .combo-button[data-active] .combo-chevron {
    opacity: 0.85;
  }

  body[data-active-page="products"] .combo-panel {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    margin-top: var(--pm-s2);
    z-index: auto;
    border: 1px solid var(--pm-line-strong);
    border-radius: var(--pm-r-md);
    background: var(--pm-surface);
    box-shadow: var(--pm-shadow);
  }

  body[data-active-page="products"] .combo-panel .combo-search {
    min-height: var(--pm-tap);
    font-size: 16px;
  }

  body[data-active-page="products"] .combo-panel .combo-option {
    min-height: var(--pm-tap);
    font-size: 15px;
  }

  body[data-active-page="products"] .token-row,
  body[data-active-page="products"] .customer-chip-row {
    padding: 0 var(--pm-s3);
  }

  /* --- Results ----------------------------------------------------- */
  /* The table is kept for its selection plumbing, but on a phone each row
     is a single full-width cell holding a card (see productMobileCardHtml
     in app.js). The old 3-column layout wrapped the "Details" label. */
  body[data-active-page="products"] .results-wrap {
    padding: 0 var(--pm-s3) var(--pm-s3);
    overflow-x: hidden;
    background: var(--pm-sunken);
  }

  body[data-active-page="products"] #resultsTable {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 var(--pm-s2);
    background: none;
  }

  body[data-active-page="products"] #resultsTable th,
  body[data-active-page="products"] #resultsTable td {
    white-space: normal;
    word-break: break-word;
    border: 0;
    padding: 0;
    background: none;
  }

  body[data-active-page="products"] .products-mobile-head-cell {
    padding: var(--pm-s3) var(--pm-s1) var(--pm-s1) !important;
  }

  body[data-active-page="products"] .products-select-all {
    display: inline-flex;
    align-items: center;
    gap: var(--pm-s2);
    min-height: var(--pm-tap);
    color: var(--pm-ink-soft);
    font-size: 13px;
    font-weight: 500;
  }

  body[data-active-page="products"] .products-select-all input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    accent-color: var(--pm-accent);
  }

  body[data-active-page="products"] .product-card-cell {
    padding: 0 !important;
  }

  body[data-active-page="products"] .pgc-card {
    display: grid;
    gap: var(--pm-s3);
    padding: var(--pm-s3);
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    background: var(--pm-surface);
    box-shadow: var(--pm-shadow);
  }

  body[data-active-page="products"] .product-pinned-row .pgc-card {
    border-color: var(--pm-accent);
    box-shadow: 0 0 0 1px var(--pm-accent) inset, var(--pm-shadow);
  }

  body[data-active-page="products"] .pgc-top {
    display: flex;
    align-items: flex-start;
    gap: var(--pm-s3);
  }

  /* A 44px tap target for the checkbox, offset so the 20px box still lines
     up with the SKU rather than sitting low. */
  body[data-active-page="products"] .pgc-check {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--pm-tap);
    min-height: var(--pm-tap);
    margin: calc(var(--pm-s3) * -1) 0 calc(var(--pm-s3) * -1) calc(var(--pm-s3) * -1);
    padding: var(--pm-s3) 0 0;
  }

  body[data-active-page="products"] .pgc-check .row-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    accent-color: var(--pm-accent);
  }

  body[data-active-page="products"] .pgc-ident {
    min-width: 0;
    flex: 1 1 auto;
  }

  body[data-active-page="products"] .pgc-sku {
    color: var(--pm-ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-active-page="products"] .pgc-name {
    margin-top: 2px;
    color: var(--pm-ink-soft);
    font-size: 13px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  body[data-active-page="products"] .pgc-vehicle {
    margin-top: var(--pm-s1);
    color: var(--pm-ink-soft);
    font-size: 12px;
    line-height: 1.3;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-active-page="products"] .pgc-meta {
    display: flex;
    align-items: center;
    gap: var(--pm-s2);
    padding-top: var(--pm-s3);
    border-top: 1px solid var(--pm-line);
  }

  body[data-active-page="products"] .pgc-stocks {
    display: flex;
    gap: var(--pm-s2);
    min-width: 0;
    flex: 1 1 auto;
  }

  body[data-active-page="products"] .pgc-stock {
    display: inline-flex;
    align-items: baseline;
    gap: var(--pm-s1);
    padding: var(--pm-s1) var(--pm-s2);
    border-radius: var(--pm-r-sm);
    background: var(--pm-sunken);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }

  body[data-active-page="products"] .pgc-stock-label {
    color: var(--pm-ink-soft);
    font-weight: 500;
  }

  body[data-active-page="products"] .pgc-stock-qty {
    color: var(--pm-ink);
    font-weight: 700;
  }

  body[data-active-page="products"] .pgc-stock.is-out .pgc-stock-qty {
    color: var(--pm-ink-soft);
    opacity: 0.6;
  }

  body[data-active-page="products"] .pgc-price {
    flex: 0 0 auto;
    color: var(--pm-ink);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  body[data-active-page="products"] .pgc-details {
    width: 100%;
    min-height: var(--pm-tap);
    padding: 0 var(--pm-s3);
    border: 1px solid var(--pm-line-strong);
    border-radius: var(--pm-r-md);
    background: var(--pm-surface);
    color: var(--pm-accent);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
  }

  body[data-active-page="products"] .pgc-details:active {
    background: var(--pm-accent-soft);
  }

  body[data-active-page="products"] .product-pinned-divider td {
    height: var(--pm-s1);
    padding: 0 !important;
    border-bottom: 1px dashed var(--pm-line-strong);
  }

  /* --- Pagination --------------------------------------------------- */
  body[data-active-page="products"] #statusLine {
    padding: var(--pm-s2) var(--pm-s1);
    color: var(--pm-ink-soft);
    font-size: 12px;
  }

  body[data-active-page="products"] .list-pagination {
    display: flex;
    align-items: center;
    gap: var(--pm-s2);
    margin-top: var(--pm-s1);
    padding: var(--pm-s2);
    border: 1px solid var(--pm-line);
    border-radius: var(--pm-r-lg);
    background: var(--pm-surface);
  }

  body[data-active-page="products"] .list-pagination button {
    flex: 1 1 0;
    min-height: var(--pm-tap);
    padding: 0 var(--pm-s2);
    border: 1px solid var(--pm-line-strong);
    border-radius: var(--pm-r-md);
    background: var(--pm-surface);
    color: var(--pm-ink);
    font-size: 14px;
    font-weight: 600;
  }

  body[data-active-page="products"] .list-pagination button:disabled {
    color: var(--pm-ink-soft);
    opacity: 0.45;
  }

  body[data-active-page="products"] #productsPageLabel {
    flex: 0 0 auto;
    min-width: 92px;
    text-align: center;
    color: var(--pm-ink-soft);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  body[data-active-page="products"] .detail-panel {
    position: fixed;
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    transform: none;
    overflow: hidden;
    overscroll-behavior: contain;
    z-index: 90;
    background: var(--panel);
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-active-page="products"] .detail-panel-header {
    /* Sticky, opaque and above the content: it was scrolling away and rows
       slid underneath it, leaving a half-cut line under the title. The top
       padding clears the notch / status bar. */
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px 10px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
    background: var(--panel);
    border-bottom: 1px solid var(--line, #e2e8f0);
  }

  body[data-active-page="products"] .detail-panel-heading {
    min-width: 0;
  }

  body[data-active-page="products"] .detail-panel-meta,
  body[data-active-page="products"] .detail-panel-header h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-active-page="products"] .detail-panel-header h2 {
    font-size: 18px;
    line-height: 1.2;
  }

  body[data-active-page="products"] #closeDetailBtn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    flex: 0 0 38px;
    border-radius: 999px;
    font-size: 20px;
  }

  body[data-active-page="products"] .panel-toggle {
    display: none;
  }

  body[data-active-page="products"] .detail-content {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
    /* The panel is fixed to the viewport with overflow:hidden, so the CONTENT
       has to scroll — otherwise everything past the first screenful (stock by
       bin, movements, the action buttons) simply cannot be reached on a phone. */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* Clear the phone's home indicator / bottom browser chrome. */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  body[data-active-page="products"] .detail-block,
  body[data-active-page="products"] .field-grid,
  body[data-active-page="products"] .table-scroll,
  body[data-active-page="products"] .stock-table {
    max-width: 100%;
  }

  body[data-active-page="products"] .stock-table {
    min-width: 520px;
  }

  body[data-active-page="products"] .products-compact-form {
    padding: 10px;
  }

  body[data-active-page="products"] .products-compact-form h3 {
    font-size: 12px;
    margin-bottom: 10px;
  }

  body[data-active-page="products"] .products-detail-field-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-active-page="products"] .products-detail-field-grid label {
    font-size: 13px;
  }

  /* 46px is a comfortable touch target for a TEXT field, but applied to a
     checkbox or radio it renders a giant square floating above its label.
     Those get their own sizing below. */
  body[data-active-page="products"] .products-detail-field-grid input:not([type="checkbox"]):not([type="radio"]),
  body[data-active-page="products"] .products-detail-field-grid select,
  body[data-active-page="products"] .products-detail-field-grid textarea {
    min-height: 46px;
    margin-top: 5px;
    font-size: 16px;
  }

  body[data-active-page="products"] .products-detail-field-grid input[type="checkbox"],
  body[data-active-page="products"] .products-detail-field-grid input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    flex: 0 0 auto;
  }

  /* The supplier picker packs five columns into a phone width, so its own
     controls stay small while the text inputs above stay touch-sized. */
  body[data-active-page="products"] .products-detail-field-grid .supplier-pick-row input[type="checkbox"],
  body[data-active-page="products"] .products-detail-field-grid .supplier-pick-row input[type="radio"] {
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
  }

  body[data-active-page="products"] .products-detail-field-grid .supplier-pick-row input.supplier-code {
    min-height: 32px;
    margin-top: 0;
    font-size: 13px;
  }

  body[data-active-page="products"] .products-detail-field-grid textarea {
    min-height: 92px;
  }

  body[data-active-page="products"] .products-detail-field-grid .inline-checkbox {
    min-height: 46px;
    margin-top: 0;
    padding: 10px 2px 0;
  }

  body[data-active-page="products"] .products-detail-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
  }

  body[data-active-page="products"] .products-detail-actions > button {
    width: 100%;
    min-height: 44px;
  }

  body[data-active-page="products"] .products-open-full-btn {
    font-size: 14px;
    font-weight: 500;
  }

  body.products-detail-open[data-active-page="products"] {
    /* overflow:hidden alone does NOT stop iOS Safari scrolling the page behind a
       fixed overlay — the touch is handed to the body and the list underneath
       moves instead of the panel, so the bottom of the detail can never be
       reached. Pinning the body removes it from the scroll chain entirely. */
    overflow: hidden;
    position: fixed;
    inset: 0;
    width: 100%;
    overscroll-behavior: none;
    touch-action: none;
  }

  /* The panel itself is the ONLY thing that scrolls while it is open. */
  body.products-detail-open[data-active-page="products"] .detail-panel .detail-content {
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  body.products-detail-open[data-active-page="products"] #mainLayout > .search-area {
    visibility: hidden;
  }

  body[data-active-page="products"] .products-mobile-detail-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--panel);
  }

  body[data-active-page="products"] .products-mobile-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Nothing should show through above the first section. */
    background: var(--surface2, #f8fafc);
    /* Bottom padding clears the phone's home indicator and the browser's own
       bottom bar; without it the last section sits under the chrome and reads
       as "the page is cut off". */
    padding: 10px 14px calc(28px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
    /* Keep the scroll inside this region rather than handing it to the body. */
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

  body[data-active-page="products"] .products-mobile-section {
    margin: 0 0 12px;
    padding: 12px;
  }

  body[data-active-page="products"] .products-mobile-section-header {
    margin-bottom: 10px;
  }

  body[data-active-page="products"] .products-mobile-section-header h3 {
    margin: 0 0 4px;
    font-size: 15px;
  }

  body[data-active-page="products"] .products-mobile-section-header p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
  }

  body[data-active-page="products"] .products-mobile-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
  }

  body[data-active-page="products"] .products-mobile-detail-form {
    display: contents;
  }

  body[data-active-page="products"] .products-mobile-field-cell {
    min-width: 0;
  }

  body[data-active-page="products"] .products-mobile-field-cell-wide {
    grid-column: 1 / -1;
  }

  body[data-active-page="products"] .products-mobile-edit-toggle {
    margin: 0;
    min-height: 0;
    padding: 0;
  }

  body[data-active-page="products"] .products-mobile-edit-toggle input {
    margin-top: 0;
  }

  body[data-active-page="products"] .products-save-feedback {
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-muted);
    color: var(--text);
    font-size: 13px;
  }

  body[data-active-page="products"] .products-mobile-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }

  body[data-active-page="products"] .products-mobile-summary-item {
    display: grid;
    gap: 4px;
  }

  body[data-active-page="products"] .products-mobile-summary-label {
    color: var(--muted);
    font-size: 12px;
  }

  body[data-active-page="products"] .products-mobile-summary-value {
    min-height: 46px;
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-muted);
    font-size: 16px;
    color: var(--text);
  }

  body[data-active-page="products"] .products-mobile-stock-list {
    display: grid;
    gap: 8px;
  }

  body[data-active-page="products"] .products-mobile-stock-row {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel-muted);
  }

  body[data-active-page="products"] .products-mobile-stock-main {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
  }

  body[data-active-page="products"] .products-mobile-stock-main strong {
    font-size: 14px;
  }

  body[data-active-page="products"] .products-mobile-stock-main span,
  body[data-active-page="products"] .products-mobile-stock-metrics span {
    color: var(--muted);
    font-size: 12px;
  }

  body[data-active-page="products"] .products-mobile-stock-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
  }

  body[data-active-page="products"] .products-mobile-detail-footer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--panel);
  }

  body[data-active-page="products"] .products-mobile-detail-footer > button {
    width: 100%;
    min-height: 46px;
  }

  body[data-active-page="products"] .products-mobile-status-grid {
    grid-template-columns: 1fr;
  }

  body[data-active-page="dashboard"] #pipelineCards,
  body[data-active-page="dashboard"] #reconciliationCards {
    width: 100%;
    min-width: 0;
  }

  body[data-active-page="dashboard"] #pipelineCards thead,
  body[data-active-page="dashboard"] #reconciliationCards thead {
    display: none;
  }

  body[data-active-page="dashboard"] #pipelineCards tbody,
  body[data-active-page="dashboard"] #reconciliationCards tbody {
    display: grid;
    gap: 10px;
  }

  body[data-active-page="dashboard"] #pipelineCards tbody tr,
  body[data-active-page="dashboard"] #reconciliationCards tbody tr {
    display: grid;
    gap: 8px;
    border: 1px solid #d7e0ea;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
  }

  body[data-active-page="dashboard"] #pipelineCards tbody tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-active-page="dashboard"] #pipelineCards tbody td {
    display: grid;
    gap: 4px;
    align-content: start;
    justify-items: center;
    border: 1px solid #dfe6ee;
    border-radius: 8px;
    padding: 10px 8px;
    background: #f9fbfd;
  }

  body[data-active-page="dashboard"] #pipelineCards tbody td::before {
    content: attr(data-mobile-label);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
  }

  body[data-active-page="dashboard"] #reconciliationCards tbody td {
    display: block;
    border: 0;
    padding: 0;
    background: transparent;
  }

  body[data-active-page="dashboard"] #reconciliationCards tbody td:nth-child(1) {
    display: none;
  }

  body[data-active-page="dashboard"] #reconciliationCards tbody td:nth-child(2) {
    font-size: 16px;
    font-weight: 700;
  }

  body[data-active-page="dashboard"] #reconciliationCards tbody td:nth-child(3),
  body[data-active-page="dashboard"] #reconciliationCards tbody td:nth-child(4) {
    font-size: 14px;
  }

  body[data-active-page="dashboard"] .kpi-value,
  body[data-active-page="dashboard"] .kpi-delta {
    text-align: left;
  }

  body[data-active-page="dashboard"] .kpi-value {
    font-size: 18px;
  }
}

/* Shared detail panels keep a compact 2-column field grid in both View and Edit modes. */
.list-notice {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
}

.list-notice.error {
  color: #9b2c2c;
}

.return-count-badge {
  display: inline-block;
  /* Its own pill beside the status, not inside it. */
  margin-left: 6px;
  vertical-align: middle;
  background: #fae8e8;
  color: #a53232;
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
  vertical-align: middle;
}

/* Partially returned: the same family as the red R, one step warmer, so the two
   read as related without a half-returned sale looking as final as a whole one. */
.return-count-badge.is-partial {
  background: #fdeee0;
  color: #9a5a22;
}

/* Exception badges are RED, deliberately distinct from the amber now used by
   Awaiting Picking — an exception must not look like a normal status. */
.backorder-badge {
  display: inline-block;
  background: #fae8e8;
  color: #a02f2f;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

.backorder-banner {
  background: #fff4e0;
  border: 1px solid #e0b46b;
  color: #7a4500;
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
  font-size: 13px;
}

.pick-not-on-stock {
  color: #c87f0a;
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  padding: 10px 8px;
}

.sales-return-linked-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sales-return-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 0;
  color: var(--muted);
  font-size: 12px;
}

.sales-return-create-modal-card {
  max-width: 980px;
}

.sales-return-create-header {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-bottom: 14px;
}

.sales-return-create-header .detail-block {
  margin: 0;
}

.sales-return-create-lines {
  width: 100%;
}

.sales-return-create-lines input[type="number"],
.sales-return-create-lines input[type="text"],
.sales-return-create-meta select,
.sales-return-create-meta textarea {
  width: 100%;
  box-sizing: border-box;
}

.sales-return-create-lines th,
.sales-return-create-lines td {
  vertical-align: middle;
}

.sales-return-create-lines td:last-child,
.sales-return-create-lines th:last-child {
  min-width: 120px;
}

.sales-return-create-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin-top: 14px;
}

.sales-return-create-meta .full-row {
  grid-column: 1 / -1;
}

.sales-return-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.sales-return-create-error {
  color: #9b2c2c;
  font-size: 12px;
}
.detail-panel .field-grid,
.detail-panel .detail-grid,
body[data-active-page="products"] .detail-panel .products-detail-field-grid,
body[data-active-page="products"] .detail-panel .products-mobile-section-grid,
body[data-active-page="pickings"] .detail-panel .field-grid,
body[data-active-page="deliveries"] .detail-panel .field-grid,
body[data-active-page="transfers"] .detail-panel .field-grid,
body[data-active-page="adjustments"] .detail-panel .field-grid,
body[data-active-page="receiving"] .detail-panel .field-grid,
body[data-active-page="pickings"] .detail-panel .detail-grid,
body[data-active-page="deliveries"] .detail-panel .detail-grid,
body[data-active-page="transfers"] .detail-panel .detail-grid,
body[data-active-page="adjustments"] .detail-panel .detail-grid,
body[data-active-page="receiving"] .detail-panel .detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 0;
}

.detail-panel .field-grid label,
.detail-panel .detail-grid label,
.detail-panel .detail-content > .detail-block > label,
body[data-active-page="products"] .detail-panel .products-detail-field-grid label {
  min-width: 0;
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.detail-panel .field-grid label:nth-child(odd),
.detail-panel .detail-grid label:nth-child(odd),
body[data-active-page="products"] .detail-panel .products-detail-field-grid label:nth-child(odd) {
  border-right: 0.5px solid var(--line);
}

.detail-panel .field-grid label:nth-last-child(1):nth-child(odd),
.detail-panel .detail-grid label:nth-last-child(1):nth-child(odd),
body[data-active-page="products"] .detail-panel .products-detail-field-grid label:nth-last-child(1):nth-child(odd),
.detail-panel .field-grid label.full-row,
.detail-panel .detail-grid label.full-row,
.detail-panel .detail-content > .detail-block > label,
body[data-active-page="products"] .detail-panel .products-detail-field-grid label.full-row {
  grid-column: span 2;
  border-right: 0;
}

.detail-panel .field-grid input,
.detail-panel .field-grid select,
.detail-panel .field-grid textarea,
.detail-panel .detail-grid input,
.detail-panel .detail-grid select,
.detail-panel .detail-grid textarea {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .layout.panel-open:has(> .detail-panel:not(.hidden)) {
    display: block;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .layout.panel-open:has(> .detail-panel:not(.hidden)) > :not(.detail-panel) {
    display: none !important;
  }

  .layout.panel-open > .detail-panel:not(.hidden) {
    display: flex;
    width: 100%;
    height: calc(100dvh - 104px);
    min-height: 0;
    border-left: 0;
    background: var(--panel);
  }

  .detail-panel-mobile-header {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    min-height: 52px;
    padding: 6px 10px;
    border-bottom: 0.5px solid var(--line);
    background: var(--panel);
    flex: 0 0 auto;
  }

  .detail-panel-header {
    display: none !important;
  }

  /* Bigger than the 40px default: this is the only way out of a receipt on a
     phone, and it is tapped with gloves on. */
  .detail-panel-mobile-back-btn {
    width: 48px;
    height: 48px;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 28px;
    line-height: 1;
    padding: 0;
  }

  .detail-panel-mobile-title {
    min-width: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .detail-panel-mobile-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 74px;
  }

  .detail-panel-mobile-edit-btn,
  .detail-panel-mobile-cancel-btn {
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 4px;
  }

  .detail-panel-mobile-cancel-btn {
    color: var(--muted);
  }

  .detail-panel-mobile-save-btn {
    border: 0;
    border-radius: 999px;
    background: var(--accent-2);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
  }

  .detail-panel-confirm {
    order: -1;
    padding: 8px 14px;
  }

  .detail-content {
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .detail-panel[data-mode="edit"] .detail-content {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }

  .detail-panel .detail-block,
  body[data-active-page="products"] .detail-panel .detail-block,
  body[data-active-page="products"] .detail-panel .products-mobile-section {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 6px solid var(--panel-muted);
    border-radius: 0;
  }

  .detail-panel .detail-block h3,
  body[data-active-page="products"] .detail-panel .products-mobile-section-header h3 {
    /* font-weight:400 made every section heading read as another line of body
       text, so the page had no hierarchy to scan. */
    margin: 0 0 2px;
    padding: 0;
    background: none;
    color: #64748b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  body[data-active-page="products"] .detail-panel .products-mobile-section-header {
    margin: 0;
  }

  body[data-active-page="products"] .detail-panel .products-mobile-section-header p {
    display: none;
  }

  .detail-panel .field-grid,
  .detail-panel .detail-grid,
  body[data-active-page="products"] .detail-panel .products-detail-field-grid,
  body[data-active-page="products"] .detail-panel .products-mobile-section-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 0;
  }

  .detail-panel .field-grid label,
  .detail-panel .detail-grid label,
  .detail-panel .detail-content > .detail-block > label,
  body[data-active-page="products"] .detail-panel .products-detail-field-grid label,
  body[data-active-page="products"] .detail-panel .products-mobile-section-grid label {
    min-width: 0;
    padding: 10px 14px;
    border-bottom: 0.5px solid var(--line);
    color: var(--muted);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.07em;
    text-transform: uppercase;
  }

  .detail-panel .field-grid label:nth-child(odd),
  .detail-panel .detail-grid label:nth-child(odd),
  body[data-active-page="products"] .detail-panel .products-detail-field-grid label:nth-child(odd),
  body[data-active-page="products"] .detail-panel .products-mobile-section-grid .products-mobile-field-cell:nth-child(odd) label {
    border-right: 0.5px solid var(--line);
  }

  .detail-panel .field-grid label:nth-last-child(1):nth-child(odd),
  .detail-panel .detail-grid label:nth-last-child(1):nth-child(odd),
  body[data-active-page="products"] .detail-panel .products-detail-field-grid label:nth-last-child(1):nth-child(odd),
  .detail-panel .field-grid label.full-row,
  .detail-panel .detail-grid label.full-row,
  .detail-panel .detail-content > .detail-block > label,
  .detail-panel .detail-field-name,
  body[data-active-page="products"] .detail-panel .products-mobile-field-cell.detail-field-name {
    grid-column: span 2;
    border-right: 0;
  }

  .detail-panel[data-mode="view"] .detail-content input:disabled,
  .detail-panel[data-mode="view"] .detail-content input[readonly],
  .detail-panel[data-mode="view"] .detail-content select:disabled,
  .detail-panel[data-mode="view"] .detail-content textarea:disabled,
  .detail-panel[data-mode="view"] .detail-content textarea[readonly],
  .detail-status-value {
    font-size: 14px;
  }

  .detail-panel .field-grid input,
  .detail-panel .field-grid select,
  .detail-panel .field-grid textarea,
  .detail-panel .detail-grid input,
  .detail-panel .detail-grid select,
  .detail-panel .detail-grid textarea {
    width: 100%;
    box-sizing: border-box;
  }

  .detail-panel-footer {
    position: sticky;
    bottom: 0;
    min-height: calc(56px + env(safe-area-inset-bottom));
    padding: 0 14px env(safe-area-inset-bottom);
    border-top: 0.5px solid var(--line);
    background: var(--panel);
    z-index: 3;
  }

  .detail-panel-footer-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 14px;
  }

  .detail-panel-footer-actions .secondary {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 10px 0;
  }

  .detail-panel-footer-actions button:last-child {
    border: 0;
    border-radius: 8px;
    background: var(--accent-2);
    color: #fff;
    padding: 10px 20px;
  }

  body[data-active-page="products"] .products-mobile-detail-body {
    padding: 0;
  }
}

/* Final Reporting overrides: kept at the end so older reporting/mobile rules cannot win. */
body[data-active-page="reporting"] .layout.reporting-layout {
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 8px;
}

body[data-active-page="reporting"] .reporting-catalog-heading {
  padding: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--nav-section-text);
}

body[data-active-page="reporting"] .report-catalog-group {
  margin: 12px 0 0;
}

body[data-active-page="reporting"] .report-catalog-group:first-child {
  margin-top: 4px;
}

body[data-active-page="reporting"] .report-catalog-group h4 {
  margin: 0 0 6px 3px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--nav-section-text);
}

body[data-active-page="reporting"] .report-catalog-list {
  gap: 4px;
}

body[data-active-page="reporting"] .report-catalog-item {
  border: 0.5px solid transparent;
  border-left: 3px solid transparent;
  border-radius: 8px;
  color: var(--nav-tile-text);
  font-size: 12px;
  font-weight: 400;
  padding: 8px 10px;
}

body[data-active-page="reporting"] .report-catalog-item:hover {
  background: var(--nav-tile-bg);
  border-color: var(--nav-tile-border);
  border-left-color: var(--nav-tile-border);
}

body[data-active-page="reporting"] .report-catalog-item.active {
  background: var(--nav-active-bg);
  border-color: var(--nav-active-border);
  border-left-color: var(--accent);
  color: var(--nav-active-text);
  font-weight: 500;
}

body[data-active-page="reporting"] .reporting-workspace-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

body[data-active-page="reporting"] .reporting-title-block {
  min-width: 0;
}

body[data-active-page="reporting"] .reporting-title-block h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

body[data-active-page="reporting"] .reporting-title-block small {
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

body[data-active-page="reporting"] .report-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  position: relative;
  flex-wrap: wrap;
}

body[data-active-page="reporting"] .report-header-actions button,
body[data-active-page="reporting"] .report-pagination button,
body[data-active-page="reporting"] .report-draft-actions button {
  min-height: 28px;
  border-radius: 6px;
  border: 0.5px solid var(--line);
  background: var(--panel);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  cursor: pointer;
}

body[data-active-page="reporting"] .report-header-actions .report-primary-action,
body[data-active-page="reporting"] .report-header-actions .report-mode-toggle.active,
body[data-active-page="reporting"] .report-draft-actions #createDraftTransferBtn:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

body[data-active-page="reporting"] .report-header-actions .report-mode-toggle {
  border-color: var(--accent);
  background: var(--panel);
  color: var(--accent);
}

body[data-active-page="reporting"] .report-export-wrap {
  position: relative;
}

body[data-active-page="reporting"] .report-export-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: 132px;
  overflow: hidden;
  border: 0.5px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

body[data-active-page="reporting"] .report-export-menu[hidden] {
  display: none;
}

body[data-active-page="reporting"] .report-export-menu button {
  display: block;
  width: 100%;
  min-height: 30px;
  border: 0;
  border-bottom: 0.5px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  color: var(--text);
  text-align: left;
}

body[data-active-page="reporting"] .report-export-menu button:last-child {
  border-bottom: 0;
}

body[data-active-page="reporting"] .reporting-workspace-body {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 0;
  padding: 0;
}

body[data-active-page="reporting"] .reporting-toolbar-block {
  border: 0;
  border-bottom: 0.5px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  padding: 8px 14px;
}

body[data-active-page="reporting"] .reporting-toolbar-block:has(.report-filters-grid:empty) {
  display: none;
}

body[data-active-page="reporting"] .report-summary {
  min-height: 0;
  padding: 10px 14px;
  border: 0;
  border-bottom: 0.5px solid var(--line);
  border-radius: 0;
  background: var(--panel);
}

body[data-active-page="reporting"] .report-kpi-chip {
  display: inline-flex;
  flex-direction: column;
  min-width: 128px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--nav-tile-bg);
}

body[data-active-page="reporting"] .report-kpi-chip span {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

body[data-active-page="reporting"] .report-kpi-chip strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
}

body[data-active-page="reporting"] .report-table-wrap {
  border: 0;
  border-radius: 0;
}

body[data-active-page="reporting"] #reportPreviewTable {
  table-layout: fixed;
  min-width: 1010px;
  width: 100%;
  font-size: 12px;
}

body[data-active-page="reporting"] #reportPreviewTable th,
body[data-active-page="reporting"] #reportPreviewTable td {
  height: 32px;
  padding: 0 8px;
  border-bottom: 0.5px solid var(--line);
  background: var(--panel);
  color: var(--text);
  font-size: 12px;
  vertical-align: middle;
  white-space: nowrap;
}

body[data-active-page="reporting"] #reportPreviewTable tbody tr:hover td {
  background: var(--nav-tile-bg);
}

body[data-active-page="reporting"] #reportPreviewTable tbody tr.draft-has-transfer td {
  background: var(--nav-active-bg);
}

body[data-active-page="reporting"] #reportPreviewTable thead th {
  z-index: 5;
  background: var(--nav-tile-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

body[data-active-page="reporting"] #reportPreviewTable th.numeric-col,
body[data-active-page="reporting"] #reportPreviewTable td.numeric-col {
  text-align: right;
}

body[data-active-page="reporting"] .report-sort-btn {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0;
  cursor: pointer;
}

body[data-active-page="reporting"] .report-sort-btn.active {
  color: var(--text);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .row-select-col {
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  text-align: center;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .qty-transfer-col {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-sku {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-make {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-model {
  width: 110px;
  min-width: 110px;
  max-width: 110px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .product-name-col {
  width: 260px;
  min-width: 260px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-qns {
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-ct {
  width: 100px;
  min-width: 100px;
  max-width: 100px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .month-col {
  width: 60px;
  min-width: 60px;
  max-width: 60px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .sticky-transfer-col {
  position: sticky;
  z-index: 6;
  background: var(--panel);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion thead .sticky-transfer-col {
  z-index: 8;
  background: var(--nav-tile-bg);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-select {
  left: 0;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-qty {
  left: 28px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-sku {
  left: 28px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-make {
  left: 108px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-model {
  left: 188px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-name {
  left: 298px;
  box-shadow: 2px 0 0 var(--line);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-sticky-sku {
  left: 118px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-sticky-make {
  left: 198px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-sticky-model {
  left: 278px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-sticky-name {
  left: 388px;
}

/* The qty cell is a stepper: minus, field, plus as one joined control. */
body[data-active-page="reporting"] .draft-qty-stepper {
  display: flex;
  align-items: stretch;
  width: 100%;
}

body[data-active-page="reporting"] .draft-qty-step {
  flex: 0 0 26px;
  width: 26px;
  height: 28px;
  padding: 0;
  border: 0.5px solid var(--line);
  background: var(--nav-tile-bg);
  /* Explicit: the page's generic button rule paints button text white, which
     on this pale control would leave two blank squares. */
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

body[data-active-page="reporting"] .draft-qty-step:first-child {
  border-radius: 6px 0 0 6px;
  border-right: 0;
}

body[data-active-page="reporting"] .draft-qty-step:last-child {
  border-radius: 0 6px 6px 0;
  border-left: 0;
}

body[data-active-page="reporting"] .draft-qty-step:hover {
  background: var(--p-hover, #eef2f6);
}

body[data-active-page="reporting"] .draft-qty-input {
  /* min-width 0 so the field can shrink inside the flex row rather than
     pushing the buttons out of the cell. */
  width: 100%;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  border: 0.5px solid var(--line);
  border-radius: 0;
  background: var(--nav-tile-bg);
  color: var(--text);
  font-size: 13px;
  text-align: center;
}

body[data-active-page="reporting"] .draft-qty-input::-webkit-outer-spin-button,
body[data-active-page="reporting"] .draft-qty-input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

body[data-active-page="reporting"] .draft-qty-input[type="number"] {
  -moz-appearance: textfield;
}

body[data-active-page="reporting"] .report-draft-bar {
  min-height: 44px;
  border: 0;
  border-top: 0.5px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  padding: 0 14px;
  position: sticky;
  bottom: 36px;
}

body[data-active-page="reporting"] .report-draft-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

body[data-active-page="reporting"] .report-draft-actions #createDraftTransferBtn:disabled {
  border-color: var(--line);
  background: var(--nav-tile-bg);
  color: var(--muted);
  cursor: default;
}

body[data-active-page="reporting"] .report-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 4px 14px;
  border-top: 0.5px solid var(--line);
  background: var(--panel);
}

body[data-active-page="reporting"] .report-pagination[hidden] {
  display: none;
}

body[data-active-page="reporting"] .report-pagination-meta,
body[data-active-page="reporting"] .report-page-number,
body[data-active-page="reporting"] #reportStatus {
  color: var(--muted);
  font-size: 12px;
}

body[data-active-page="reporting"] .report-pagination-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

body[data-active-page="reporting"] .report-pagination button {
  height: 28px;
  min-height: 28px;
  background: var(--panel);
}

body[data-active-page="reporting"] #reportStatus {
  padding: 4px 14px;
}

@media (max-width: 980px) {
  body[data-active-page="reporting"] .reporting-workspace-header,
  body[data-active-page="reporting"] .report-pagination,
  body[data-active-page="reporting"] .report-draft-bar {
    align-items: stretch;
    flex-direction: column;
  }

  body[data-active-page="reporting"] .report-header-actions {
    justify-content: flex-start;
  }
}

body[data-active-page="reporting"] .reporting-workspace-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 0.5px solid var(--line);
  background: var(--panel);
}

body[data-active-page="reporting"] .reporting-header-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-active-page="reporting"] .reporting-title-block h3 {
  font-size: 16px;
  font-weight: 500;
}

body[data-active-page="reporting"] .reporting-title-block small {
  font-size: 13px;
}

body[data-active-page="reporting"] .report-summary {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  min-height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-active-page="reporting"] .report-kpi-chip {
  min-width: 126px;
  padding: 8px 14px;
  border-radius: 8px;
  background: #eef1f5;
}

body[data-active-page="reporting"] .reporting-workspace-body {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
}

body[data-active-page="reporting"] .report-table-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

body[data-active-page="reporting"] .report-table-wrap {
  position: relative;
  overflow: auto;
  min-height: 0;
}

body[data-active-page="reporting"] .report-table-fade {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--panel));
  transition: opacity 0.12s linear;
}

body[data-active-page="reporting"] .report-table-fade[hidden] {
  display: none;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion {
  min-width: 1290px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td {
  border-right: 0.5px solid var(--line);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th:last-child,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td:last-child {
  border-right: 0;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-qns,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-ct {
  width: 80px;
  min-width: 80px;
  max-width: 80px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-qns,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-ct,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion thead th.col-qns,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion thead th.col-ct {
  text-align: right;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .product-name-col {
  min-width: 260px;
  width: 260px;
  max-width: 260px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-name {
  left: 298px;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-sticky-name {
  left: 388px;
}

body[data-active-page="reporting"] .report-pagination {
  position: sticky;
  bottom: 0;
  z-index: 4;
  border-top: 0.5px solid var(--line);
  background: var(--panel);
}

body[data-active-page="reporting"] .report-pagination-meta {
  font-size: 12px;
  color: var(--muted);
}

body[data-active-page="reporting"] #reportTableScroll {
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion {
  width: max-content !important;
  min-width: 100% !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .product-name-col {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-sku {
  left: 36px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-make {
  left: 116px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-model {
  left: 196px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-name {
  left: 306px !important;
  box-shadow: 1px 0 0 #d4dae3;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-sku {
  left: 126px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-make {
  left: 206px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-model {
  left: 286px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-name {
  left: 396px !important;
}

body[data-active-page="reporting"] #reportTableScroll {
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion {
  width: max-content !important;
  min-width: 100% !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .product-name-col {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-sku {
  left: 36px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-make {
  left: 116px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-model {
  left: 196px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-name {
  left: 306px !important;
  box-shadow: 1px 0 0 #d4dae3;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-sku {
  left: 126px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-make {
  left: 206px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-model {
  left: 286px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-name {
  left: 396px !important;
}

body[data-active-page="reporting"] #reportTableScroll {
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion {
  width: max-content !important;
  min-width: 100% !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td {
  border-right: 0.5px solid var(--line);
  background-clip: padding-box;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th:last-child,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td:last-child {
  border-right: 0;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .row-select-col {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  text-align: center !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .qty-transfer-col {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  text-align: center !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-sku {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: center !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-make {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: left !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-model {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  text-align: left !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .product-name-col {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-qns,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-ct {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: right !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .month-col {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  text-align: right !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.transfer-frozen,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td.transfer-frozen {
  position: sticky !important;
  z-index: 3;
  background: var(--panel);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion thead th.transfer-frozen {
  z-index: 7;
  background: var(--nav-tile-bg);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion tbody tr.draft-has-transfer td.transfer-frozen {
  background: var(--nav-active-bg);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-select { left: 0 !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-qty { left: 36px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-sku { left: 36px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-make { left: 116px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-model { left: 196px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-name {
  left: 306px !important;
  box-shadow: 1px 0 0 #d4dae3;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-sku { left: 126px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-make { left: 206px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-model { left: 286px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-name { left: 396px !important; }

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .numeric-col {
  font-variant-numeric: tabular-nums;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .numeric-zero {
  color: var(--muted);
  font-weight: 400;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .numeric-nonzero {
  color: var(--text);
  font-weight: 500;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .report-sort-btn {
  justify-content: flex-end;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.col-sku .report-sort-btn {
  justify-content: center;
}

body[data-active-page="reporting"] #reportTableScroll {
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion {
  width: max-content;
  min-width: 100%;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td {
  border-right: 0.5px solid var(--line);
  background-clip: padding-box;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th:last-child,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td:last-child {
  border-right: 0;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .row-select-col {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  text-align: center !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .qty-transfer-col {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  text-align: center !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-sku {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: center !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-make {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: left !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-model {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  text-align: left !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .product-name-col {
  min-width: 220px !important;
  width: 220px !important;
  max-width: 220px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-qns,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-ct {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: right !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .month-col {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  text-align: right !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.transfer-frozen,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td.transfer-frozen {
  position: sticky !important;
  z-index: 3;
  background: var(--panel);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion thead th.transfer-frozen {
  z-index: 7;
  background: var(--nav-tile-bg);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion tbody tr.draft-has-transfer td.transfer-frozen {
  background: var(--nav-active-bg);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-select {
  left: 0 !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-qty {
  left: 36px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-sku {
  left: 36px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-make {
  left: 116px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-model {
  left: 196px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-name {
  left: 306px !important;
  box-shadow: 1px 0 0 #d4dae3;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-sku {
  left: 126px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-make {
  left: 206px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-model {
  left: 286px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-name {
  left: 396px !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .numeric-col {
  font-variant-numeric: tabular-nums;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .numeric-zero {
  color: var(--muted);
  font-weight: 400;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .numeric-nonzero {
  color: var(--text);
  font-weight: 500;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .report-sort-btn {
  justify-content: flex-end;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.col-sku .report-sort-btn {
  justify-content: center;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .sticky-transfer-col,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td {
  position: static !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .sticky-transfer-col,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-select,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-qty,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-sku,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-make,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-model,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-sticky-name {
  box-shadow: none !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-qns,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-ct {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: right !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .product-name-col {
  min-width: 260px !important;
  width: 260px !important;
  max-width: 260px !important;
}

body[data-active-page="reporting"] .reporting-workspace-body #reportStatus {
  padding: 4px 0 0;
}

body[data-active-page="reporting"] .reporting-workspace-header {
  padding: 14px 20px;
  gap: 0;
}

body[data-active-page="reporting"] .reporting-header-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

body[data-active-page="reporting"] .report-summary {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

body[data-active-page="reporting"] .report-summary.muted {
  color: inherit;
}

body[data-active-page="reporting"] .report-table-shell {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

body[data-active-page="reporting"] .report-table-wrap {
  position: relative;
  overflow: auto;
  min-height: 0;
}

body[data-active-page="reporting"] .report-table-fade {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--panel));
}

body[data-active-page="reporting"] .report-table-fade[hidden] {
  display: none;
}

body[data-active-page="reporting"] #reportTableScroll {
  position: relative;
  overflow-x: auto;
  overflow-y: auto;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion {
  width: max-content !important;
  min-width: 100% !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td {
  border-right: 0.5px solid var(--line);
  background-clip: padding-box;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th:last-child,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td:last-child {
  border-right: 0;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .row-select-col {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  text-align: center !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .qty-transfer-col {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  text-align: center !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-sku {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: center !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-make {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: left !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-model {
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
  text-align: left !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .product-name-col {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-qns,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .col-ct {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: right !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .month-col {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  text-align: right !important;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.transfer-frozen,
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion td.transfer-frozen {
  position: sticky !important;
  z-index: 3;
  background: var(--panel);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion thead th.transfer-frozen {
  z-index: 7;
  background: var(--nav-tile-bg);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion tbody tr.draft-has-transfer td.transfer-frozen {
  background: var(--nav-active-bg);
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-select { left: 0 !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-qty { left: 36px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-sku { left: 36px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-make { left: 116px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-model { left: 196px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .transfer-frozen-name {
  left: 306px !important;
  box-shadow: 1px 0 0 #d4dae3;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-sku { left: 126px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-make { left: 206px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-model { left: 286px !important; }
body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion.is-transfer-draft-mode .transfer-frozen-name { left: 396px !important; }

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .numeric-col {
  font-variant-numeric: tabular-nums;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .numeric-zero {
  color: var(--muted);
  font-weight: 400;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .numeric-nonzero {
  color: var(--text);
  font-weight: 500;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion .report-sort-btn {
  justify-content: flex-end;
}

body[data-active-page="reporting"] #reportPreviewTable.is-transfer-suggestion th.col-sku .report-sort-btn {
  justify-content: center;
}

/* ── Nav notification badges (mobile drawer only) ────────────────────────── */
#navDrawer a[data-nav-page] {
  position: relative;
  overflow: visible;
}

/* Sized for a warehouse phone held at arm's length, often in gloves: 18px with
   10px text was too small to read at a glance, which is the only thing this
   badge is for. */
.nav-notif-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 13px;
  background: #e53e3e;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 26px;
  text-align: center;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 1;
}

/* ── Receiving page mobile cards ─────────────────────────────────────────── */
.receiving-cards-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.receiving-card {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--line, #dce4ec);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  outline: none;
}

.receiving-card:focus-visible {
  box-shadow: 0 0 0 2px #4a90d9;
}

.receiving-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.receiving-type-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.receiving-type-po {
  background: #dbeafe;
  color: #1e40af;
}

.receiving-type-return {
  background: #ccfbf1;
  color: #0f766e;
}

.receiving-card-number {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary, #1a2332);
}

.receiving-card-meta {
  font-size: 12px;
  color: var(--muted, #7a8fa8);
  margin-top: 2px;
}

.receiving-card-receipt {
  font-size: 11px;
  color: var(--muted, #7a8fa8);
  margin-top: 2px;
}

.receiving-card-empty {
  padding: 12px;
  font-size: 13px;
  color: var(--muted, #7a8fa8);
  text-align: center;
}

.srr-mobile-header {
  margin-bottom: 12px;
}

.srr-mobile-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a2332);
}

.srr-mobile-customer {
  font-size: 12px;
  color: var(--muted, #7a8fa8);
  margin-top: 2px;
}

.srr-mobile-sale {
  font-size: 11px;
  color: var(--muted, #7a8fa8);
  margin-top: 1px;
}

.srr-mobile-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.srr-item-card {
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--line, #dce4ec);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.srr-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px;
}

.srr-item-sku-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.srr-item-name-text {
  font-size: 12px;
  color: var(--text-primary, #1a2332);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srr-item-warehouse {
  font-size: 11px;
  color: var(--muted, #7a8fa8);
  white-space: nowrap;
}

/* No width here: TomSelect clips the original select, and forcing a width on it
   makes it reappear behind the control it draws. The wrapper carries the width. */
#salesReturnReceiveForm .ts-wrapper {
  width: 100%;
  box-sizing: border-box;
}

.srr-desktop-meta {
  margin-bottom: 10px;
}

.srr-desktop-meta-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a2332);
}

.srr-desktop-meta-sale {
  font-size: 12px;
  color: var(--muted, #7a8fa8);
  margin-top: 2px;
}

/* ── PO Receive card layout ────────────────────────────────────────────── */

.po-receive-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.po-receive-header {
  margin-bottom: 10px;
}

.po-receive-header-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.po-receive-header-item {
  font-size: 13px;
  color: var(--text, #13212f);
}

.po-receive-header-item strong {
  font-weight: 600;
}

.po-receive-sku-filter {
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line, #d8dee4);
  border-radius: 6px;
  background: var(--panel, #fff);
  color: var(--text, #13212f);
  margin-bottom: 6px;
}

.po-receive-sku-filter:focus {
  outline: none;
  border-color: var(--accent, #3b5bdb);
  box-shadow: 0 0 0 2px rgba(59, 91, 219, 0.12);
}

.po-receive-wh-section {
  margin-top: 4px;
}

.po-receive-wh-global {
  width: 100%;
  box-sizing: border-box;
  margin-top: 3px;
}

.po-receive-wh-readonly {
  font-size: 13px;
  color: var(--text, #13212f);
  padding: 7px 0 3px;
}

.po-receive-wh-readonly strong {
  font-weight: 600;
}

.po-receive-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Two-section card: white header + tinted body */
.po-receive-item-card {
  border: 0.5px solid var(--line, #d8dee4);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}

.po-receive-item-card.po-receive-done {
  opacity: 0.55;
}

.po-receive-card-head {
  background: var(--panel, #fff);
  padding: 10px 12px;
  border-bottom: 0.5px solid var(--line, #d8dee4);
}

.po-receive-card-body {
  background: #f0f3f6;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.po-receive-item-sku {
  font-size: 15px;
  font-weight: 700;
  color: var(--text, #13212f);
  line-height: 1.2;
}

.po-receive-item-name {
  font-size: 12px;
  color: var(--muted, #5a6b7c);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  margin-top: 1px;
}

/* The supplier's own part number, above our SKU. The receiver is reading the
   supplier's packing list, so this is the number they are matching against —
   monospace so digit groups line up and a transposed character shows. */
.po-receive-supplier-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #8a5a04;
  background: rgba(214, 138, 8, 0.1);
  border: 1px solid rgba(214, 138, 8, 0.3);
  border-radius: 6px;
  padding: 2px 8px;
  margin-bottom: 4px;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .po-receive-supplier-code {
    color: #f0c46a;
    background: rgba(240, 170, 40, 0.12);
    border-color: rgba(240, 170, 40, 0.34);
  }
}

@media (max-width: 767px) {
  /* Bigger on a phone: this is the number being matched against paper, often
     one-handed in a warehouse aisle. */
  .po-receive-supplier-code {
    font-size: 15px;
    padding: 3px 10px;
  }
}

.po-receive-badges {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.po-receive-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: #e8edf2;
  color: var(--muted, #5a6b7c);
  white-space: nowrap;
}

.po-receive-badge-label {
  font-weight: 600;
  margin-right: 2px;
}

.po-receive-item-done-text {
  font-size: 12px;
  color: #16a34a;
  font-weight: 500;
  margin-top: 4px;
}

.po-receive-field-label {
  font-size: 11px;
  color: var(--muted, #5a6b7c);
  margin-bottom: 3px;
  font-weight: 500;
  display: block;
  text-align: left;
}

.po-receive-suggested-hint {
  font-size: 11px;
  color: var(--muted, #5a6b7c);
  font-weight: 400;
  margin-left: 4px;
}

/* A sale is already waiting on this item: it goes to the Delivery Area, not
   onto a shelf. Loud on purpose — it is the one thing on the line that
   changes what the receiver does with the part in their hands. */
.po-going-out-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(214, 138, 8, 0.1);
  border: 1px solid rgba(214, 138, 8, 0.32);
}

.po-going-out-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #8a5a04;
  white-space: nowrap;
}

.po-going-out-who {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink, #1f2d3a);
  /* Long customer names must not push the row wider than the card. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.po-going-out-partial {
  font-size: 10.5px;
  font-weight: 700;
  color: #8a5a04;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(214, 138, 8, 0.18);
  white-space: nowrap;
}

.po-receive-item-card.po-receive-going-out {
  border-color: rgba(214, 138, 8, 0.45);
}

@media (prefers-color-scheme: dark) {
  .po-going-out-note {
    background: rgba(240, 170, 40, 0.12);
    border-color: rgba(240, 170, 40, 0.36);
  }
  .po-going-out-tag,
  .po-going-out-partial {
    color: #f0c46a;
  }
  .po-going-out-partial {
    background: rgba(240, 170, 40, 0.2);
  }
}

.po-receive-bin-wrap {
  width: 100%;
  position: relative;
}

.po-bin-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 2px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.po-bin-option {
  padding: 10px 12px;
  font-size: 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f2f5;
}

.po-bin-option:last-child {
  border-bottom: 0;
}

.po-bin-option:hover,
.po-bin-option:active {
  background: #eef4fb;
}

/* Location-audit fix-form bin picker (floating, attached to body) */
.audit-binpick {
  position: absolute;
  z-index: 4000;
  background: #fff;
  border: 1px solid var(--line, #d8dee4);
  border-radius: 8px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.audit-binpick-opt {
  padding: 9px 12px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid #f0f2f5;
  white-space: nowrap;
}
.audit-binpick-opt:last-child { border-bottom: 0; }
.audit-binpick-opt:hover,
.audit-binpick-opt:active { background: #eef4fb; }

/* While its bin list is open, let the card overflow so the dropdown isn't
   clipped by the card's overflow:hidden, and float it above sibling cards. */
.po-receive-item-card.po-bin-open {
  overflow: visible;
  position: relative;
  z-index: 60;
}
.po-receive-item-card.po-bin-open .po-receive-card-body {
  overflow: visible;
}

.po-receive-bin-wrap .ts-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

.po-receive-bin-wrap select,
.po-receive-bin-wrap .po-receive-bin-input {
  width: 100%;
  box-sizing: border-box;
}

.po-receive-bin-input {
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 42px;
}

.po-receive-bin-error {
  font-size: 11px;
  color: #dc2626;
  margin-top: 2px;
}

.po-receive-save-line-btn {
  margin-top: 10px;
  width: 100%;
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 600;
  background: #1f7a3d;
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.po-receive-save-line-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.po-receive-progress {
  font-size: 13px;
  font-weight: 600;
  padding: 4px 2px 8px;
}

.po-receive-progress-transfer,
.po-footer-transfer {
  font-weight: 400;
  margin-top: 2px;
}

/* Pin the Done button to the bottom of the scrolling modal so it doesn't sit
   directly under a just-saved item. Hidden while searching (toggled in JS). */
.po-receive-shell .form-actions {
  position: sticky;
  bottom: 0;
  background: var(--panel, #fff);
  padding: 10px 0 4px;
  margin-top: 6px;
  border-top: 1px solid var(--line, #d8dee4);
  z-index: 5;
}

.po-receive-placement {
  font-size: 12px;
  color: #1f7a3d;
  margin-top: 4px;
}

/* Qty stepper row */
/* CT transfer receipt: its own highlighted receipt inside the PO. */
.po-transfer-receipt {
  border: 2px solid #f59e0b;
  background: #fffaf0;
  border-radius: 12px;
  padding: 12px;
}
.po-transfer-receipt-tag {
  display: inline-block;
  background: #c2410c;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 8px;
}
.po-tr-total { font-weight: 600; margin: 6px 0; color: #9a4d00; }
/* Finish sits at the END of the list, not pinned over it: on a long transfer
   receipt a pinned button was one stray thumb away from finishing early. */
body[data-active-page="receiving"] .modal-body .po-transfer-receipt .form-actions {
  position: static;
  margin: 12px 0 0;
  padding: 8px 0 0;
  background: transparent;
  border-top: none;
  box-shadow: none;
}
.po-tr-row {
  border-bottom: 1px solid #f3d9b1;
  padding: 8px 0;
  display: grid;
  gap: 6px;
}
.po-tr-nums { display: flex; gap: 6px; flex-wrap: wrap; }
.po-tr-edit { display: grid; gap: 6px; }
.po-tr-pills {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin: 6px 0;
  background: #fde7c7;
  border-radius: 999px;
  width: fit-content;
}
.po-tr-pill {
  height: 22px;
  min-height: 0;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #9a4d00;
  font-weight: 600;
  font-size: 11px;
  line-height: 22px;
  cursor: pointer;
}
.po-tr-pill.is-active { background: #c2410c; color: #fff; }
.po-tr-saved { font-weight: 700; color: #15803d; padding: 4px 0; }
.po-tr-row-saved { opacity: 0.75; }
/* Always a light orange box, in both themes: it is meant to stand out, and a
   dark variant left the item text (which sets its own colours) unreadable. */
.po-transfer-receipt { color: #1f2937; }
.po-transfer-receipt .po-receive-item-sku,
.po-transfer-receipt .po-receive-item-name,
.po-transfer-receipt .po-receive-header-item,
.po-transfer-receipt strong { color: #1f2937; }
.po-transfer-receipt .muted { color: #6b7280; }

/* CT receiving: set the QNS share aside first — one bar, one tap. */
.po-qns-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff4e5;
  border: 1px solid #f3c98b;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
}
.po-qns-bar-text { color: #9a4d00; }
.po-qns-bar-btn { background: #c2410c; color: #fff; border: none; border-radius: 8px; padding: 0 14px; font-weight: 600; }

/* CT receiving: QNS's share goes in the Transfer Area — its own stepper row. */
.po-receive-ta-row {
  background: #fff4e5;
  border: 1px solid #f3c98b;
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 8px;
}
.po-receive-ta-row .po-receive-qty-label { color: #9a4d00; font-weight: 700; }

.po-receive-qty-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.po-receive-qty-label {
  flex-shrink: 0;
  margin-bottom: 0;
  white-space: nowrap;
}

.po-receive-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ccd6e0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  height: 38px;
  flex: 1 1 0;
  min-width: 0;
}

.po-stepper-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  background: #f1f5f9;
  color: #21415f;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  line-height: 1;
}

.po-stepper-btn:active {
  background: #dbe8f4;
}

.po-stepper-value {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #1b2d3f;
  border: none;
  background: transparent;
  padding: 0 4px;
  min-width: 0;
  width: 100%;
  -moz-appearance: textfield;
}

.po-stepper-value::-webkit-inner-spin-button,
.po-stepper-value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.po-receive-confirm-btn {
  width: 100%;
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 4px;
}

/* ── Warehouse/bin native select text color ──────────────────────────────── */
select {
  color: var(--text);
}

/* ── Tom Select bin autocomplete ─────────────────────────────────────────── */
.ts-wrapper {
  min-width: 0;
  width: 100%;
}

.ts-control {
  min-height: 36px;
  border-radius: 6px !important;
  border-color: #b9c4d0 !important;
  font-size: 14px;
  color: var(--text);
  /* One row, but NOT a locked height: `height` + `overflow:hidden` clipped the
     typing input once a bin chip was in the control, so on a phone the field
     looked like it refused every keystroke. nowrap alone keeps it to one line. */
  flex-wrap: nowrap;
  align-items: center;
}

.ts-control input {
  height: auto;
  min-height: 0 !important;
  margin: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
}

/* Sales-return placement lines. Deliberately has NO overflow/max-height: any
   clipping context here cuts the bin dropdown off, which is what the old
   dropdownParent:"body" workaround was for. The modal body scrolls instead. */
.srr-desktop-lines {
  margin-top: 4px;
}

/* A row with an open bin picker must sit above the rows below it, or the next
   row's own input is painted over the open list. The wrapper carries the
   stacking context because a <tr> cannot reliably take one. */
.srr-desktop-lines tr:focus-within td {
  position: relative;
  z-index: 20;
}

.srr-desktop-lines .ts-wrapper.dropdown-active {
  position: relative;
  z-index: 30;
}

.srr-desktop-lines td {
  overflow: visible;
}


.ts-dropdown {
  /* Renders inline next to its input; the high z-index keeps it above sibling
     rows and the modal chrome. (Other pages still use dropdownParent:"body",
     where it must also out-rank the modal itself.) */
  z-index: 9999;
  /* The list scrolls INSIDE itself rather than growing to the full option
     count, so a long bin list can never run off the bottom of the screen. */
  max-height: min(240px, 40vh);
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

.ts-wrapper.ts-dropdown-up .ts-dropdown {
  bottom: 100% !important;
  top: auto !important;
  border-top: 0.5px solid var(--line);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  margin-bottom: 2px;
  margin-top: 0;
}

.ts-dropdown-content {
  max-height: min(240px, 40vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Touch targets: the rows were text-height, which is unusable on a phone with
   a keyboard up and a list of near-identical bin codes. */
.ts-dropdown .option {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  font-size: 15px;
}
.ts-dropdown .option.active {
  background: #eff6ff;
  color: #1e40af;
}

.ts-control input::placeholder {
  opacity: 1;
}

.ts-control input:focus::placeholder {
  opacity: 0.5;
}

@media (max-width: 900px) {
  .ts-control input,
  .ts-control {
    font-size: 16px !important;
  }
  .ts-control {
    min-height: 44px;
  }
  .ts-control input {
    min-height: 0 !important;
  }

  .ts-dropdown {
    max-height: 160px;
  }

  .ts-dropdown-content {
    max-height: 160px;
  }
}

/* ── App Settings toggles ───────────────────────────────────────── */
.app-setting-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.app-setting-row:last-child {
  border-bottom: none;
}

/* ── Stock Placement page ───────────────────────────────────────── */
.sp-page {
  max-width: 600px;
  margin: 0 auto;
  padding: 12px 12px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sp-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sp-warehouse-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  flex: 1;
}

.sp-warehouse-select {
  font-size: 15px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.sp-search-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.sp-sku-input {
  flex: 1;
  font-size: 18px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 2px solid var(--brand);
  background: var(--surface);
  color: var(--text);
  outline: none;
  min-height: 48px;
}

.sp-sku-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb, 37, 99, 235), 0.15);
}

.sp-clear-btn {
  font-size: 20px;
  line-height: 1;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--muted);
  cursor: pointer;
  min-height: 48px;
}

.sp-product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sp-product-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 600;
}

.sp-sku-badge {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}

.sp-stock-summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.sp-stat {
  font-size: 13px;
  color: var(--muted);
}

.sp-stat strong {
  color: var(--text);
  font-weight: 600;
  margin-left: 4px;
}

.sp-place-success {
  color: #1f6b3b;
  font-weight: 700;
  font-size: 15px;
}

.sp-bin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sp-bin-table th,
.sp-bin-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.sp-bin-table th {
  color: var(--muted);
  font-weight: 500;
}

.sp-qty-cell {
  font-weight: 600;
  text-align: right;
}

.sp-catchall-row td {
  background: #fffbeb;
  color: #92400e;
}

.sp-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sp-form-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
}

.sp-qty-input {
  font-size: 18px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}

.sp-place-btn {
  width: 100%;
  padding: 14px;
  font-size: 17px;
  font-weight: 600;
  background: var(--brand, #2563eb);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  min-height: 52px;
  letter-spacing: 0.01em;
}

.sp-place-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.sp-feedback {
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 6px;
  text-align: center;
  font-weight: 500;
}

.sp-feedback-success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.sp-feedback-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.sp-history {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}

.sp-history-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.sp-history-row {
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.sp-history-row:last-child {
  border-bottom: none;
}

.sp-history-sku {
  font-weight: 600;
}

.sp-history-qty {
  color: var(--brand, #2563eb);
  font-weight: 600;
}

.sp-history-bins {
  color: var(--muted);
}

.sp-no-bins {
  font-size: 13px;
  padding: 6px 0;
}

/* ── Transfers page — mobile UI ─────────────────────────────────────── */

.transfer-detail-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.transfer-detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.transfer-detail-field-full {
  grid-column: 1 / -1;
}

.transfer-field-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.transfer-field-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.transfer-line-card {
  background: var(--surface, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.transfer-line-card-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.transfer-line-sku {
  font-weight: 700;
  font-size: 13px;
  color: var(--brand, #2563eb);
  white-space: nowrap;
}

.transfer-line-name {
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.transfer-line-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.transfer-line-badge {
  font-size: 11px;
  background: var(--surface2, #f1f5f9);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--muted);
}

.transfer-line-badge strong {
  color: var(--text);
}

/* ── Per-item save (transfer pick + receive), mirrors PO receiving ────────── */
.transfer-save-line-btn {
  margin-top: 10px;
  width: 100%;
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 600;
  background: #1f7a3d;
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.transfer-save-line-btn:disabled { opacity: 0.6; cursor: default; }


.pick-line-card.pick-line-done,
.transfer-receive-line.transfer-recv-done {
  opacity: 0.7;
  background: #f3f8f4;
}
.transfer-line-done-text {
  color: #1f7a3d;
  font-weight: 600;
  font-size: 14px;
  margin-top: 4px;
}

.pick-loc-hint {
  font-size: 12px;
  color: #8a5a00;
  background: #fff6e5;
  border: 1px solid #f0d9a8;
  border-radius: 6px;
  padding: 5px 8px;
  margin: 4px 0;
}

.transfer-recv-progress,
#transferReceiveProgress {
  font-size: 13px;
  font-weight: 600;
  padding: 2px 2px 8px;
}

/* Destination bin type-to-search dropdown */
.transfer-recv-bin-wrap { position: relative; width: 100%; }
.transfer-recv-bin-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--line, #d8dee4);
  border-radius: 8px;
  min-height: 42px;
  margin-top: 4px;
}
.transfer-recv-bin-error {
  font-size: 11px;
  color: #dc2626;
  margin-top: 2px;
}
.transfer-bin-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--line, #d8dee4);
  border-radius: 8px;
  margin-top: 2px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.transfer-bin-option {
  padding: 10px 12px;
  font-size: 15px;
  cursor: pointer;
  border-bottom: 1px solid #f0f2f5;
}
.transfer-bin-option:last-child { border-bottom: 0; }
.transfer-bin-option:hover,
.transfer-bin-option:active { background: #eef4fb; }
/* While the bin list is open, let the card overflow so it isn't clipped. */
.transfer-receive-line.transfer-bin-open { overflow: visible; position: relative; z-index: 60; }

.transfer-primary-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.transfer-primary-actions button {
  width: 100%;
}

.transfer-cancel-link {
  background: none;
  border: none;
  padding: 4px 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  cursor: pointer;
  text-decoration: underline;
  display: block;
  width: 100%;
  margin-top: 4px;
}

.transfer-cancel-link:hover {
  color: var(--danger, #dc2626);
}

.transfer-remove-alloc-btn {
  background: none;
  border: 1px solid var(--danger, #dc2626);
  color: var(--danger, #dc2626);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.4;
}

.transfer-remove-alloc-btn:hover {
  background: #fee2e2;
}

.transfer-alloc-status {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

/* Quotation line cards in detail panel */
.q-line-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: var(--surface2, #f9fafb);
}
.q-line-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 8px;
}
/* Let the SKU/name block take the row's free width and wrap at word boundaries
   (not into a one-letter-per-line vertical sliver); keep the ✕ button fixed. */
.q-line-card-header > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.q-line-card-header > .qline-delete-btn {
  flex: 0 0 auto;
}
.q-line-sku {
  font-weight: 700;
  font-size: 13px;
  display: block;
}
.q-line-name {
  font-size: 11px;
  color: var(--muted);
  display: block;
  line-height: 1.3;
  overflow-wrap: normal;
  word-break: normal;
}
.q-line-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: end;
}
.q-line-fields select,
.q-line-fields input[type="number"] {
  width: 100%;
  margin-top: 2px;
}
.q-line-label {
  font-size: 11px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
}
.q-line-total-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
}

/* ---- Location & Quantity Audit ---- */
#locationAuditLayout { padding:14px 16px; }
.audit-area { display:flex; flex-direction:column; min-width:0; }
#locationAuditLayout .audit-counters { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:10px; }
.audit-counter-summary { font-size:12px; color:var(--muted); margin-right:8px; font-weight:600; }
.audit-counter-chip { border:1px solid var(--line); background:#fff; border-radius:14px; padding:5px 12px; font-size:12px; cursor:pointer; line-height:1.4; color:#1a2332; font-weight:500; }
.audit-counter-chip.issue { border-color:#c0392b; color:#a93226; }
.audit-counter-chip.issue strong { color:#a93226; }
.audit-counter-chip.info { color:#4a5568; }
.audit-counter-chip:hover { background:#f3f6fa; }
.audit-counter-chip strong { margin-left:5px; font-weight:700; }
.audit-help { background:#eef4fb; border:1px solid #cfe0f0; border-radius:8px; padding:10px 12px; margin:8px 0; font-size:13px; line-height:1.5; }
.audit-adjust-block { background:#f7faf7; border:1px solid #cfe0cf; border-radius:8px; padding:10px 12px; margin:10px 0; }
.audit-adjust-title { font-weight:600; font-size:13px; margin-bottom:8px; }
.audit-adjust-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.audit-adjust-row label { display:flex; flex-direction:column; font-size:12px; font-weight:600; gap:4px; }
.audit-adjust-row input { padding:5px 8px; width:120px; }
.audit-adjust-hint { font-size:11px; margin-top:6px; }
.audit-search-row { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.audit-search-row input { flex:0 1 320px; }
.audit-search-spacer { flex:1; }
.audit-filters-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.audit-filters-row select { min-width:180px; }
.audit-toggle { font-size:12px; display:inline-flex; align-items:center; gap:5px; color:var(--text); }
.audit-detail-cell { max-width:340px; white-space:normal; font-size:12px; }
#auditTable .audit-fix-btn { padding:3px 12px; }

/* Fix modal — compact, centered, solid (uses .modal + .modal-card base styling) */
.audit-fix-card { width:min(540px, 94vw); height:auto; max-height:min(86vh, 720px); }
.audit-fix-card .modal-body { font-size:13px; }
.audit-fix-card .modal-body p { margin:6px 0; }
.modal-close-btn { border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer; color:var(--muted); padding:0 4px; }
.modal-close-btn:hover { color:var(--text); }
.audit-fix-fields { display:flex; flex-direction:column; gap:10px; margin:12px 0; }
.audit-fix-fields label { display:flex; flex-direction:column; font-size:12px; font-weight:600; gap:4px; }
.audit-fix-fields input { padding:6px 8px; }
.audit-current-bins { margin:8px 0; font-size:12px; color:var(--text); }
.audit-bin-pill { display:inline-block; background:#eef2f7; border-radius:10px; padding:2px 9px; margin:2px; font-weight:600; }
.audit-fix-moves { margin:10px 0; }
.audit-move-row { display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.audit-move-row input { padding:5px 7px; }
.audit-fix-card .form-actions { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }

/* Approvals page + adjust direction */
.audit-adjust-row select { padding:5px 8px; }
.appr-add { color:#1f7a3d; }
.appr-remove { color:#a93226; }
#apprTable .appr-approve { padding:3px 12px; background:#1f7a3d; }
#apprTable .appr-reject { padding:3px 12px; }
#stockApprovalsLayout { padding:14px 16px; }

/* Mobile: audit + approvals tables become stacked cards */
@media (max-width: 760px) {
  #locationAuditLayout, #stockApprovalsLayout { padding:10px; }
  #locationAuditLayout .audit-counters { gap:5px; }
  /* On mobile #mainContent uses overflow:visible, so a too-wide child scrolls the
     whole page. Hard-clamp the audit/approvals layout and every descendant to the
     viewport width and break long unbroken tokens (SKU / raw location). */
  #locationAuditLayout, #stockApprovalsLayout {
    max-width:100vw; width:100%; overflow-x:hidden; box-sizing:border-box;
  }
  #locationAuditLayout *, #stockApprovalsLayout * { max-width:100%; box-sizing:border-box; }
  #locationAuditLayout .audit-area, #locationAuditLayout .results-wrap { width:100%; min-width:0; }
  #auditTable td, #apprTable td { overflow-wrap:anywhere; word-break:break-word; }
  #auditTable td::before, #apprTable td::before { min-width:64px; }
  #auditTable thead, #apprTable thead { display:none; }
  #auditTable, #auditTable tbody, #auditTable tr, #auditTable td,
  #apprTable, #apprTable tbody, #apprTable tr, #apprTable td { display:block; width:100%; }
  #auditTable tr, #apprTable tr {
    border:1px solid var(--line); border-radius:8px; margin-bottom:10px; padding:8px 10px; background:#fff;
  }
  #auditTable td, #apprTable td { border:0; padding:3px 0; text-align:left; }
  #auditTable td::before, #apprTable td::before {
    content: attr(data-label); font-weight:600; color:var(--muted); display:inline-block; min-width:88px; font-size:11px;
  }
  .audit-detail-cell { max-width:none; }
  .audit-adjust-row, .audit-move-row { flex-direction:column; align-items:stretch; }
  .audit-adjust-row input, .audit-adjust-row select, .audit-move-row input { width:100% !important; }

  /* Top bar: stack search + filters full-width so nothing overflows the screen */
  #locationAuditLayout .results-wrap { overflow-x:hidden; max-height:none; padding:0; }
  .audit-search-row { flex-wrap:wrap; gap:8px; }
  .audit-search-row input { flex:1 1 100%; }
  .audit-search-row button { flex:1 1 auto; }
  .audit-search-spacer { display:none; }   /* the spacer that pushes Export right on desktop */
  .audit-filters-row { flex-direction:column; align-items:stretch; gap:10px; }
  .audit-filters-row select { min-width:0; width:100%; }
  .audit-toggle { padding:4px 0; }
  .audit-counter-chip { font-size:11px; padding:5px 10px; }
  .list-pagination { flex-wrap:wrap; gap:8px; justify-content:center; }
}

/* ============================================================================
   Products page — "Soft & airy" modernization (scoped, reversible).
   Everything below is limited to body[data-active-page="products"]. To roll
   back, delete this block.
   ============================================================================ */
/* Shared "soft & airy" tokens. */
:root {
  --p-radius: 14px;
  --p-radius-sm: 10px;
  --p-line: #e7ecf1;
  --p-line-soft: #f0f3f6;
  --p-shadow: 0 1px 2px rgba(15, 27, 39, 0.04), 0 8px 24px rgba(15, 27, 39, 0.06);
}

/* The generalized rules below apply to every list page. They key off the shared
   structure (.search-area > .results-wrap > table) that all list pages use, so
   one block styles the whole app consistently. Non-list pages have no such
   structure and are unaffected. The prefix `body[data-active-page]` keeps this
   from touching login and other frameless pages. */

/* Roomier page padding */
body[data-active-page] .layout {
  gap: 16px;
  padding: 16px 18px;
}

/* The main card: soft border, big radius, gentle shadow */
body[data-active-page] .search-area {
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
  background: var(--panel);
}

/* Action bar: drop hard dividers, add breathing room */
body[data-active-page] .search-area > .top-actions {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--p-line) !important;
}

/* list_ui.js moves the search + filters into .list-filter-shell and empties the
   original .search-row/.filters-row (and any token row). Collapse those emptied
   originals so they don't leave a tall blank gap above the table headers. Only
   when the shell actually exists, so a JS-load failure still shows the search. */
body[data-active-page] .search-area:has(.list-filter-shell) > .search-row,
body[data-active-page] .search-area:has(.list-filter-shell) > .filters-row {
  display: none;
}
body[data-active-page] .search-area > .token-row:empty {
  display: none;
}

/* The generated filter shell: give it the padding the rows used to have. */
body[data-active-page] .search-area .list-filter-shell {
  padding: 14px 16px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--p-line);
}

/* Buttons: calmer, softer, slightly larger radius */
body[data-active-page] .search-area .button-link,
body[data-active-page] .search-area > .top-actions button {
  height: 38px;
  border-radius: var(--p-radius-sm);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 1px rgba(15, 27, 39, 0.05);
  transition: transform 80ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
body[data-active-page] .search-area .button-link:hover,
body[data-active-page] .search-area > .top-actions button:hover {
  box-shadow: 0 2px 6px rgba(15, 27, 39, 0.12);
}
body[data-active-page] .search-area .button-link:active {
  transform: translateY(1px);
}

/* Search input: pill-like, roomy, soft focus ring (matches list-* work).
   Uses !important on background/border to beat .list-search-input's !important. */
body[data-active-page] .list-search-input {
  height: 40px;
  border-radius: var(--p-radius-sm) !important;
  border: 1px solid var(--p-line) !important;
  background: #fbfcfd !important;
  font-size: 13px;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
body[data-active-page] .list-search-input:focus {
  outline: none;
  background: var(--panel) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.12);
}

/* Results area */
body[data-active-page] .search-area .results-wrap {
  padding: 4px 6px 6px;
}

/* Table: airy rows, quiet uppercase headers, hairline column + row lines. */
body[data-active-page] .search-area .results-wrap > table {
  border-collapse: separate;
  border-spacing: 0;
}
body[data-active-page] .search-area .results-wrap > table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel);
  border-bottom: 1px solid var(--p-line);
  border-right: 1px solid var(--p-line);
  padding: 12px 12px !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
body[data-active-page] .search-area .results-wrap > table tbody td {
  padding: 12px 12px !important;
  border-bottom: 1px solid var(--p-line-soft) !important;
  border-right: 1px solid var(--p-line-soft) !important;
  font-size: 13px;
  color: var(--text);
}
/* No line after the last column */
body[data-active-page] .search-area .results-wrap > table thead th:last-child,
body[data-active-page] .search-area .results-wrap > table tbody td:last-child {
  border-right: none !important;
}
body[data-active-page] .search-area .results-wrap > table tbody tr {
  transition: background-color 100ms ease;
}
body[data-active-page] .search-area .results-wrap > table tbody tr:hover {
  background: #f5f8fb;
}
body[data-active-page] .search-area .results-wrap > table tbody tr.active {
  background: #eaf2fb;
  box-shadow: inset 3px 0 0 var(--accent);
}
/* First column a touch of left padding to sit off the card edge */
body[data-active-page] .search-area .results-wrap > table thead th:first-child,
body[data-active-page] .search-area .results-wrap > table tbody td:first-child {
  padding-left: 16px !important;
}

/* Pagination / status: quiet and roomy */
body[data-active-page] .search-area .list-pagination {
  padding: 12px 16px;
  gap: 10px;
}
body[data-active-page] .search-area .list-pagination button,
body[data-active-page] .search-area .list-pagination .secondary {
  height: 36px;
  border-radius: var(--p-radius-sm);
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--p-line);
  font-weight: 500;
}
body[data-active-page] .search-area .list-pagination button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: #f5f8fb;
}

/* ============================================================================
   App-wide "soft & airy" component pass (buttons, inputs, modals, badges).
   Appended last so it wins the cascade; delete this block to revert.
   ============================================================================ */

/* Buttons everywhere: softer radius, gentle shadow, calmer motion. */
button,
.button-link {
  border-radius: 9px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background-color 120ms ease, box-shadow 120ms ease, transform 80ms ease, border-color 120ms ease;
}
button:hover,
.button-link:hover {
  box-shadow: 0 2px 6px rgba(15, 27, 39, 0.10);
}
button:active,
.button-link:active {
  transform: translateY(1px);
}

/* Form controls everywhere: soft border + indigo focus ring. */
input,
select,
textarea {
  border-radius: 9px;
  border: 1px solid var(--p-line, #e7ecf1);
  background: #fbfcfd;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  background: var(--panel);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(59, 91, 219, 0.12);
}
/* Don't override checkboxes/radios/file inputs/range. */
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="range"],
input[type="color"] {
  border-radius: initial;
  background: initial;
  box-shadow: none;
}

/* Modals / popups: bigger radius, soft layered shadow, dim + slight blur. */
.modal {
  background: rgba(15, 27, 39, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.modal-card,
.add-product-modal-card,
.sales-modal-card {
  border: 1px solid var(--p-line, #e7ecf1) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(15, 27, 39, 0.28) !important;
}
.modal-header {
  border-bottom: 1px solid var(--p-line, #e7ecf1);
}

/* Status badges: consistent soft pill everywhere (inv-pill legacy + list badge). */
.inv-pill {
  border-radius: 999px;
}

/* ===== Sale detail: status stepper + modern head ===== */
.sale-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 4px;
}
.sale-status-pill {
  font-size: 12px; font-weight: 700; letter-spacing: .03em;
  padding: 4px 12px; border-radius: 999px;
  background: #eef2fb; color: #3b5bd8;
}
.sale-status-pill.status-fulfilled { background: #e8f4ec; color: #226b41; }
.sale-status-pill.status-cancelled { background: #fbeaea; color: #b23b3b; }
.sale-status-pill.status-picking_issue { background: #fbf1df; color: #93590a; }

.sale-stepper { margin: 8px 0 18px; }
.sale-stepper.cancelled { padding: 10px 14px; background: #fbeaea; border-radius: 10px; }
.sale-step-cancel { color: #b23b3b; font-weight: 650; font-size: 14px; }
.sale-steps { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 4px 0; }
.sale-step {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer; padding: 2px 4px;
  min-width: 76px; flex: 0 0 auto;
}
.sale-step-dot {
  width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: #eef0f4; color: #9aa1af; border: 2px solid #e2e5ec;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sale-step-label { font-size: 11px; color: #9aa1af; text-align: center; line-height: 1.2; }
.sale-step.done .sale-step-dot { background: #e8f4ec; color: #226b41; border-color: #b6ddc4; }
.sale-step.done .sale-step-label { color: #5a6472; }
.sale-step.active .sale-step-dot { background: #3b4bd8; color: #fff; border-color: #3b4bd8; box-shadow: 0 0 0 4px rgba(59,75,216,.15); }
.sale-step.active .sale-step-label { color: #1b1e26; font-weight: 650; }
.sale-step.active.issue .sale-step-dot { background: #b06a0c; border-color: #b06a0c; box-shadow: 0 0 0 4px rgba(176,106,12,.15); }
.sale-step:hover .sale-step-dot { border-color: #3b4bd8; }
.sale-step-line { flex: 1 1 auto; height: 2px; min-width: 12px; background: #e2e5ec; }
.sale-step-hint, .sale-step-hint-issue {
  margin-top: 12px; padding: 10px 14px; border-radius: 9px;
  font-size: 13px; line-height: 1.5; color: #454b59;
  background: #f2f4f8; border: 1px solid #e2e5ec;
}
.sale-step-hint-issue { background: #fbf1df; border-color: #ecd9b4; color: #93590a; }

/* Read-only status facts as at-a-glance chips (under the stepper). */
.sale-fact-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 16px 10px;
  margin-top: -8px;
}
.sale-fact-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
  background: #eef1f6; color: #4b5262; border: 1px solid #e0e5ee;
}
.sale-fact-chip.fact-invoiced { background: #e8f4ec; color: #226b41; border-color: #cfe7d8; }
.sale-fact-chip.fact-uninvoiced { background: #f2f4f8; color: #6b7280; border-color: #e2e5ec; }
.sale-fact-chip.fact-return { background: #eef0fb; color: #4a4fb0; border-color: #dcdff5; }
.sale-fact-chip.fact-backorder { background: #fbf1df; color: #93590a; border-color: #ecd9b4; }
.sale-fact-chip.fact-pick { background: #eaf1f8; color: #375a7c; border-color: #d5e2ef; }
.sale-fact-chip.fact-picker { background: #f1eefa; color: #5a3f96; border-color: #e1daf3; }
/* Admin only: who picked this line and when. */
.ol-picked-by { font-size: 11px; color: #6b7280; margin-top: 3px; }
.ol-picked-by b { color: #5a3f96; font-weight: 600; }

/* Order-lines table hierarchy: numeric right-align + tabular figures; reference
   columns (cost/wholesale/returned) recede; the line total leads. */
.detail-panel .stock-table th.ol-num,
.detail-panel .stock-table td.ol-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.detail-panel .stock-table td.ol-ref { color: var(--muted); }
.detail-panel .stock-table th.ol-ref { color: #aab2bd; }
.detail-panel .stock-table td.order-line-total {
  font-weight: 700; color: #1f2937;
}
.detail-panel .stock-table td.ol-num input { text-align: right; }

/* Sale action bar: distinct, semantic button colors so actions are readable at a
   glance instead of a row of identical grey. Always visible (flex, wraps). */
.sale-action-bar {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 14px;
}
.sale-action-bar button {
  height: 34px;
  font-size: 13px;
  font-weight: 600;
  padding: 0 14px;
  color: #fff;
  border: 1px solid transparent;
}
/* Forward workflow — the next step. Green, strongest weight. */
.sale-action-bar button.btn-go { background: #1f9254; border-color: #1f9254; }
.sale-action-bar button.btn-go:hover { background: #197546; border-color: #197546; }
.sale-action-bar button.btn-go-soft { background: #e6f3ec; border-color: #b7dcc6; color: #1f7a48; }
.sale-action-bar button.btn-go-soft:hover { background: #d8ecdf; }
/* Save — the primary edit commit. Indigo accent. */
.sale-action-bar button.btn-save { background: var(--accent); border-color: var(--accent); }
.sale-action-bar button.btn-save:hover { background: var(--accent-2); border-color: var(--accent-2); }
/* Document actions — neutral outline (Print, Invoice). */
.sale-action-bar button.btn-doc { background: #fff; border-color: #c4cdd8; color: #33404f; }
.sale-action-bar button.btn-doc:hover { background: #f2f5f9; border-color: #aeb9c6; }
/* Create Return — corrective. Amber-tinted outline, clearly not a workflow step. */
.sale-action-bar button.btn-return { background: #fff4e3; border-color: #e6c483; color: #8a5a08; }
.sale-action-bar button.btn-return:hover { background: #fdecce; }
/* Destructive — red. */
.sale-action-bar button.btn-danger { background: #fff; border-color: #d9a3a0; color: #a4342f; }
.sale-action-bar button.btn-danger:hover { background: #a4342f; border-color: #a4342f; color: #fff; }

.sale-lock-note {
  flex: 1 1 100%;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: #7a5a12;
  background: #fdf3e0; border: 1px solid #ecd9b4; border-radius: 8px;
  padding: 7px 12px; margin-bottom: 2px;
}

/* ============================================================================
   Login screen — dark, soft blurred multi-color gradient (blue/orange/green/
   purple) with grain, and a frosted-glass card. Scoped to .login-screen so it
   never touches the app. Pure CSS, no image asset.
   ========================================================================== */
.login-screen {
  position: relative;
  /* Clip the blurred gradient blobs sideways, but never vertically: a plain
     overflow:hidden here trapped the card so it could not lift above the
     on-screen keyboard, leaving Continue unreachable. */
  overflow-x: hidden;
  overflow-y: auto;
  background: #0b0d12;
  /* Gradient variables — defaults ARE the original look. The randomizer script
     overrides these (same palette, shuffled params). "Original" clears them. */
  --lg-b1: radial-gradient(38% 45% at 22% 30%, rgba(232, 120, 54, 0.55), transparent 70%);
  --lg-b2: radial-gradient(40% 42% at 74% 26%, rgba(58, 122, 224, 0.55), transparent 70%);
  --lg-b3: radial-gradient(46% 48% at 62% 74%, rgba(43, 168, 108, 0.50), transparent 72%);
  --lg-b4: radial-gradient(42% 46% at 30% 80%, rgba(140, 92, 210, 0.52), transparent 72%);
  --lg-b5: radial-gradient(50% 50% at 50% 50%, rgba(40, 90, 180, 0.35), transparent 75%);
  --lg-blur: 70px;
  --lg-grain: 0.16;
}
/* Layered radial "blobs" of color, blurred into a soft aurora. */
.login-screen::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: var(--lg-b1), var(--lg-b2), var(--lg-b3), var(--lg-b4), var(--lg-b5);
  filter: blur(var(--lg-blur)) saturate(125%);
  transition: filter .4s ease;
}
/* Fine grain/noise overlay (SVG fractal noise as a data URI). */
.login-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--lg-grain);
  mix-blend-mode: overlay;
  transition: opacity .4s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Tiny randomizer buttons, bottom-left. */
.login-bg-tools {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  gap: 6px;
}
.login-bg-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .12s, transform .12s;
}
.login-bg-btn:hover { background: rgba(255, 255, 255, 0.2); }
.login-bg-btn:active { transform: scale(0.92); }
.login-screen > .login-shell { position: relative; z-index: 2; }

/* Brand text goes light on the dark background. */
.login-screen .login-brand h1 { color: #f5f7fb; }
.login-screen .login-brand p { color: rgba(226, 232, 240, 0.75); }
.login-screen .login-brand-icon {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Frosted-glass card. */
.login-screen .login-card {
  background: rgba(20, 24, 34, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
}
.login-screen .login-label { color: rgba(226, 232, 240, 0.8); }
.login-screen .login-form select,
.login-screen .login-form input {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f5f7fb;
}
.login-screen .login-form select option { color: #1a2332; } /* dropdown list stays readable */
.login-screen .login-form input::placeholder { color: rgba(226, 232, 240, 0.5); }
.login-screen .login-form select:focus,
.login-screen .login-form input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}
.login-screen .login-select-chevron { color: rgba(226, 232, 240, 0.7); }
.login-screen .login-remember { color: rgba(226, 232, 240, 0.82); }

.login-screen .login-submit {
  background: rgba(255, 255, 255, 0.92);
  color: #10141c;
  font-weight: 600;
}
.login-screen .login-submit:hover { background: #ffffff; }
.login-screen .login-status { color: rgba(226, 232, 240, 0.75); }

@media (prefers-reduced-motion: no-preference) {
  /* (static by design; no animation) */
}

/* The mobile pick card lives in an extra <td> so the desktop table keeps its
   columns; hide it above the phone breakpoint. */
.pick-mobile-card { display: none; }
#pickingsTable thead th.pick-mobile-head { display: none; }

/* ===========================================================================
   Warehouse type scale.

   Sizes were being invented per component (22 / 17 / 15 / 13 / 12 / 11 / 10),
   which is why the pick screens read as unrelated to the rest of the app. The
   shell is the reference: sidebar nav is 13px/500, page title 19px/600. These
   steps extend that rather than compete with it.

   --wt-hero   19  the one thing you are looking for (SKU, sale number)
   --wt-body   14  values you read
   --wt-label  13  field names, matching the sidebar
   --wt-micro  11  pills and de-emphasised meta
   =========================================================================== */
:root {
  /* The page title ("Pickings") is 19px/600 and the drawer nav is 16px. A row
     inside a list must sit BELOW the heading that names the page, so the hero
     step is 16px — level with the nav, one step under the title. */
  --wt-hero: 16px;
  --wt-body: 14px;
  --wt-label: 13px;
  --wt-micro: 11px;

  /* Warehouse palette (from the design spec). */
  --w-slate-900: #1e293b;
  --w-slate-500: #64748b;
  --w-slate-200: #e2e8f0;
  --w-slate-100: #f1f5f9;
  --w-slate-50:  #f4f6f9;
  --w-blue-700:  #0f52ba;
  --w-blue-800:  #1d4ed8;
  --w-blue-50:   #eff6ff;
  --w-red-600:   #dc2626;
  --w-red-100:   #fee2e2;
  --w-amber-600: #d97706;
  --w-amber-100: #fef3c7;
  --w-green-500: #22c55e;
  --w-card-radius: 16px;
  --w-tile-radius: 10px;
  --w-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);

  --wt-ink: var(--w-slate-900);
  --wt-ink-soft: var(--w-slate-500);
}

/* ---------------------------------------------------------------------------
   Pick Details, rebuilt on the scale above.

   Problems being fixed:
   - SKU at 22px fought the page title; Available/Picked at 15px carried the
     same weight as the part number, so nothing led.
   - "Add Bin" was a bordered button while "Mark Not Found" was bare text, so
     the destructive-ish action looked like a link and the pair read as
     mismatched rather than as two choices.
   - Meta labels and values ran together at similar sizes.

   The +/- stepper is deliberately untouched.
   --------------------------------------------------------------------------- */
.pick-line-card {
  border: 1px solid var(--p-line, #e7ecf1);
  border-radius: var(--p-radius-sm, 10px);
  padding: 14px;
  background: #fff;
}

/* The part number is the single thing a picker is hunting for. */
.pick-line-sku {
  font-size: var(--wt-hero);
  font-weight: 700;
  color: var(--wt-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.pick-line-name {
  font-size: var(--wt-label);
  color: var(--wt-ink-soft);
  margin-top: 3px;
  margin-bottom: 10px;
  line-height: 1.35;
}

/* Available / Picked as labelled figures: small caps label, value beneath.
   Reads as data instead of a run-on sentence. */
/* Fixed columns, not flex: with flex each figure was only as wide as its own
   text, so AVAILABLE sat over "0" while PICKED sat over a much wider value and
   the two rows of numbers did not line up. */
.pick-line-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, max-content));
  gap: 4px 28px;
  margin-bottom: 10px;
}

.pick-line-key {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-width: 0;
}

.pick-line-label {
  font-size: var(--wt-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wt-ink-soft);
}

.pick-line-key strong,
.line-allocated-value {
  font-size: var(--wt-body);
  font-weight: 600;
  color: var(--wt-ink);
  font-variant-numeric: tabular-nums;
}

.pick-bins-label {
  font-size: var(--wt-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wt-ink-soft);
  margin-bottom: 3px;
}

.pick-bins-value {
  font-size: var(--wt-body);
  color: var(--wt-ink);
  line-height: 1.4;
}

/* Two actions of equal rank, so give them equal shape. Add Bin is the one you
   reach for, so it keeps the stronger border; Mark Not Found is quieter but is
   still a button, not a stray piece of text. */
/* Two actions of different kinds, not a matched pair: "Add Bin" continues the
   normal flow, "Mark Not Found" reports a failure. Giving them identical shape
   made the card look like it offered a choice between equals. Add Bin now leads
   at full width; Mark Not Found sits under it as a quieter, narrower control. */
.pick-line-actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.pick-line-actions button.secondary {
  background: #fff;
  border: 1px solid #c9d4e0;
  color: #2f4055;
  font-size: var(--wt-body);
  font-weight: 600;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--p-radius-sm, 10px);
}

.pick-line-actions button.secondary:hover {
  background: #f4f7fa;
  border-color: #b6c4d2;
}

/* Quiet by default — it is the exception, not the expected path — but still a
   real 44px target, and it commits to a warning colour on press. */
.pick-not-found-btn {
  align-self: center;
  background: none;
  border: 1px solid transparent;
  color: var(--wt-ink-soft);
  font-size: var(--wt-label);
  font-weight: 500;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--p-radius-sm, 10px);
  cursor: pointer;
}

.pick-not-found-btn:hover,
.pick-not-found-btn:active {
  background: #fdf4f4;
  border-color: #ecd9d9;
  color: #9b5d5d;
}

/* ---------------------------------------------------------------------------
   Pick screens — icon rows, stat tiles, progress bar, warning banner.
   --------------------------------------------------------------------------- */

/* Line icons in the list card. Stroked, inherit colour, sized to the text. */
.pmc-ico {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.pmc-line {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.pmc-line > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pmc-where,
.pmc-who {
  font-size: var(--wt-label);
  color: var(--wt-ink-soft);
}

/* Italic, so an unclaimed pick reads as a state rather than a name. */
.pmc-unassigned {
  font-size: var(--wt-label);
  font-style: italic;
  color: #93a1b0;
  white-space: nowrap;
}

/* Progress: count on the left, percentage right, fill bar beneath. */
.pick-lines-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.pick-progress-pct {
  font-size: var(--wt-label);
  font-weight: 600;
  color: var(--wt-ink-soft);
  white-space: nowrap;
}

.pick-progress-track {
  height: 5px;
  margin: 8px 0 12px;
  border-radius: 999px;
  background: #e3e9f0;
  overflow: hidden;
}

.pick-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent, #3b5bdb);
  transition: width 220ms ease;
}

.pick-progress-fill.is-done { background: #1f9254; }

/* Available / Picked as filled tiles. A zero turns the tile red, so "nothing
   to pick" is visible without reading the number. */
.pick-line-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.pick-line-key {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  padding: 9px 12px;
  border-radius: var(--p-radius-sm, 10px);
  background: #f1f4f8;
  min-width: 0;
}

.pick-line-key.is-zero {
  background: #fdeceb;
}

.pick-line-key.is-zero .pick-line-label { color: #c0392b; }
.pick-line-key.is-zero strong { color: #c0392b; }

/* The "/ 1 pcs" tail is context, not the figure itself. */
.pick-of {
  font-size: var(--wt-label);
  font-weight: 500;
  color: var(--wt-ink-soft);
}

.pick-line-key.is-zero .pick-of { color: #d07b71; }

/* Blocking condition — say it once, clearly, in the colour of the problem. */
.pick-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: var(--p-radius-sm, 10px);
  background: #fdeceb;
  color: #c0392b;
  font-size: var(--wt-body);
  font-weight: 600;
}

.pick-warning-icon { font-size: 15px; line-height: 1; }

/* ---------------------------------------------------------------------------
   Pick screens — design-spec pass.
   Palette, radii and weights per the warehouse spec; behaviour unchanged.
   --------------------------------------------------------------------------- */

/* Status badges: blue for in-progress, amber for waiting. */
.pmc-status {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 700;
}
.pmc-status-picking {
  background: var(--w-blue-50);
  color: var(--w-blue-800);
}
.pmc-status-awaiting_picking {
  background: var(--w-amber-100);
  color: var(--w-amber-600);
}

/* List card: 16px radius and the spec's soft shadow. */
body[data-active-page="pickings"] #pickingsTable tbody tr {
  border-radius: var(--w-card-radius) !important;
  box-shadow: var(--w-card-shadow) !important;
  border-color: transparent !important;
}

.pmc-no {
  font-size: 18px;
  font-weight: 700;
  color: var(--w-slate-900);
}
.pmc-items { font-size: 14px; font-weight: 600; color: var(--w-slate-900); }
.pmc-customer { font-size: 14px; font-weight: 400; color: var(--w-slate-500); }
.pmc-where, .pmc-who { font-size: 12px; font-weight: 600; color: var(--w-slate-500); }
.pmc-unassigned {
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  color: var(--w-slate-500);
}
/* The footer sits below a divider's worth of space, per the spec. */
.pmc-foot { padding-top: 12px; margin-top: 2px; }

/* Progress banner. */
.pick-overall-progress { font-size: 14px; font-weight: 700; color: var(--w-slate-900); }
.pick-progress-pct { font-size: 14px; font-weight: 600; color: var(--w-slate-500); }
.pick-progress-track {
  height: 6px;
  border-radius: 100px;
  background: var(--w-slate-200);
}
.pick-progress-fill {
  border-radius: 100px;
  background: var(--w-blue-700);
}
.pick-progress-fill.is-done { background: var(--w-green-500); }

/* Item card. */
.pick-line-card {
  border-radius: var(--w-card-radius);
  border-color: transparent;
  box-shadow: var(--w-card-shadow);
  padding: 20px;
}
.pick-line-name {
  font-size: 16px;
  font-weight: 500;
  color: var(--w-slate-500);
}

/* Inventory tiles. */
.pick-line-key {
  padding: 12px;
  border-radius: var(--w-tile-radius);
  background: var(--w-slate-50);
  gap: 4px;
}
.pick-line-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--w-slate-500);
}
.pick-line-key strong,
.line-allocated-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--w-slate-900);
}
/* Zero available is the blocking case, so the tile carries the alarm. */
.pick-line-key.is-zero { background: var(--w-red-100); }
.pick-line-key.is-zero .pick-line-label,
.pick-line-key.is-zero strong { color: var(--w-red-600); }
.pick-of {
  font-size: 14px;
  font-weight: 500;
  color: var(--w-slate-500);
}
.pick-line-key.is-zero .pick-of { color: var(--w-red-600); }

/* Alert box. */
.pick-warning {
  gap: 10px;
  padding: 12px;
  border-radius: var(--w-tile-radius);
  background: var(--w-red-100);
  color: var(--w-red-600);
  font-size: 14px;
  font-weight: 600;
}

/* Line actions: outlined Add Bin, underlined text link beneath. */
.pick-line-actions button.secondary {
  border: 1px solid var(--w-slate-200);
  background: #fff;
  color: var(--w-slate-900);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--w-tile-radius);
}
.pick-not-found-btn {
  font-size: 14px;
  font-weight: 500;
  color: var(--w-slate-500);
  text-decoration: underline;
}

/* Bottom CTA: dark slate while picking, green once every line is ready. The
   colour change is the confirmation that nothing is outstanding. */
#markPickedBtn {
  min-height: 47px;
  border-radius: var(--w-tile-radius);
  background: var(--w-slate-900);
  border-color: var(--w-slate-900);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
#markPickedBtn:hover { background: #16202e; border-color: #16202e; }

.pick-btn-complete {
  background: var(--w-green-500) !important;
  border-color: var(--w-green-500) !important;
}
.pick-btn-complete:hover {
  background: #1eab55 !important;
  border-color: #1eab55 !important;
}

/* The Status filter is hidden on phones for EVERY role, not just warehouse:
   there is no room for it above the list, and the statuses shown by default are
   the ones you want on the floor. Desktop keeps it. The row is collapsed too,
   or it stays as an empty band — the same wasted strip the empty #menuBar left.
   The selection itself is untouched and still drives the query. */
@media (max-width: 900px) {
  body[data-active-page="pickings"] .filters-row {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   Toggle switch (Employees page: warehouse notifications master switch).
   The checkbox itself is visually hidden but stays focusable and keyboard-
   operable; the track/thumb is drawn from its :checked state.
   --------------------------------------------------------------------------- */
.switch-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  min-height: 32px;
}

/* Not display:none — that would drop it out of the tab order. */
.switch-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.switch-track {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #cbd5e1;
  transition: background-color 150ms ease;
}

.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 27, 39, 0.25);
  transition: transform 150ms ease;
}

.switch-row input:checked + .switch-track { background: var(--w-blue-700, #0f52ba); }
.switch-row input:checked + .switch-track .switch-thumb { transform: translateX(16px); }
.switch-row input:focus-visible + .switch-track {
  outline: 2px solid var(--accent, #3b5bdb);
  outline-offset: 2px;
}
.switch-row input:disabled + .switch-track { opacity: 0.55; }

.switch-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* Transfer badge on the Receiving page, alongside PO and Return. */
.receiving-type-transfer {
  background: #ede9fe;
  color: #5b21b6;
}
/* The transfer card is an <a> (it deep-links into the transfer's own receiving
   flow) rather than a <div> like the others, so undo link styling. */
a.receiving-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Status pills for the delivery / transfer / adjustment cards, on the same
   palette as the picking ones. */
.pmc-status-ready_for_dispatch { background: var(--w-blue-50); color: var(--w-blue-800); }
.pmc-status-on_delivery       { background: var(--w-amber-100); color: var(--w-amber-600); }
.pmc-status-ready_for_pickup  { background: var(--w-amber-100); color: var(--w-amber-600); }
.pmc-status-fulfilled         { background: #dcfce7; color: #15803d; }
.pmc-status-draft             { background: #f1f5f9; color: #475569; }
.pmc-status-in_transit        { background: var(--w-amber-100); color: var(--w-amber-600); }
.pmc-status-arrived           { background: var(--w-blue-50); color: var(--w-blue-800); }
.pmc-status-partially_received{ background: var(--w-amber-100); color: var(--w-amber-600); }
.pmc-status-received          { background: #dcfce7; color: #15803d; }
.pmc-status-cancelled         { background: #fee2e2; color: #b91c1c; }
.pmc-status-adjust            { background: #ede9fe; color: #5b21b6; }

/* Hide the mobile card's spacer header on desktop for the other list pages. */
#deliveriesTable thead th.pick-mobile-head,
#transfersTable thead th.pick-mobile-head,
#adjustmentsTable thead th.pick-mobile-head { display: none; }

/* ---------------------------------------------------------------------------
   Transfer detail on mobile: get to the picking area without scrolling.

   Measured before: 478px of preamble on a 3-line transfer — a 205px field grid
   plus a 253px read-only "Lines" list that repeats the very SKUs the picking
   section renders directly below it, with steppers. More lines, more waste.

   Desktop is untouched: the grid and the line list are useful on a big screen.
   --------------------------------------------------------------------------- */
/* The one-line summary and its Details toggle used to be mobile-only, so on a
   desktop the six-field grid always sat between the header and the work. The
   picker scrolls past it either way — it collapses at every width now. */
.transfer-compact-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}

.transfer-details-toggle {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #5a6b7c);
  cursor: pointer;
}

.transfer-details-toggle[aria-expanded="true"]::after { content: " ▴"; }
.transfer-details-toggle[aria-expanded="false"]::after { content: " ▾"; }

#transferDetailFields { display: none; }
#transferDetailFields.is-open { display: grid; margin-top: 10px; }

/* The read-only line list while picking/receiving: collapsed, because the
   work list below repeats it. Summary stays tappable so it can be opened. */
.transfer-lines-block.is-working > .transfer-lines-summary {
  cursor: pointer;
  list-style: revert;
}

.transfer-lines-block.is-working > .transfer-lines-summary h3 {
  display: inline;
  margin: 0;
}

@media (max-width: 900px) {
  .transfer-compact-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .tch-no {
    font-size: var(--wt-hero, 16px);
    font-weight: 700;
    color: var(--w-slate-900, #1e293b);
  }
  .tch-route {
    font-size: var(--wt-label, 13px);
    font-weight: 600;
    color: var(--w-slate-500, #64748b);
  }
  .tch-status { margin-left: auto; }

  /* The six-field grid becomes opt-in. */
  .transfer-details-toggle {
    display: inline-block;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--w-slate-500, #64748b);
    font-size: var(--wt-label, 13px);
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
    min-height: 32px;
  }
  .transfer-details-toggle:hover { background: none; color: var(--w-slate-900, #1e293b); }
  .transfer-details-toggle[aria-expanded="true"]::after { content: " ▴"; }
  .transfer-details-toggle[aria-expanded="false"]::after { content: " ▾"; }

  #transferDetailFields { display: none; }
  #transferDetailFields.is-open { display: grid; margin-top: 10px; }

}

/* ---------------------------------------------------------------------------
   No double-tap zoom anywhere in the app.

   iOS Safari ignores user-scalable=no in the viewport meta, so the meta tag
   alone does not stop it — touch-action is what actually works. "manipulation"
   removes the double-tap-to-zoom gesture (and with it the ~300ms click delay
   it forces) while leaving scrolling and pinch-zoom intact, so a warehouse user
   who genuinely needs to magnify something still can.

   Applied to the app shell rather than html/body, so the login screen keeps its
   own stricter rule (pan-x pan-y, which also blocks pinch on that one screen).
   --------------------------------------------------------------------------- */
#appShell {
  touch-action: manipulation;
}

/* Controls people tap repeatedly — steppers, action buttons, cards — are the
   ones where a fast second tap would otherwise register as a zoom gesture. */
button,
.stepper-btn,
.pick-mobile-card,
.receiving-card,
.transfer-line-card,
.pick-line-card,
[role="button"],
label.switch-row,
a.button-link {
  touch-action: manipulation;
}

/* ---------------------------------------------------------------------------
   Completion feedback for heavy picking work.

   In a warehouse the useful signal is a colour you catch at a glance, not a
   number you stop to read. Three levels, quietest first:

     line done   soft green card + tick    "this item is handled"
     progress    bar fills, green at 100%  "how far through am I"
     all done    the whole block turns     "stop looking, you are finished"

   Green is reserved for done — nothing else in these screens uses it — so it
   never has to compete for meaning.
   --------------------------------------------------------------------------- */
.pick-line-card.pick-line-done,
.transfer-receive-line.transfer-recv-done {
  background: #f0fdf4;
  border-color: #bbf7d0;
  box-shadow: none;
  overflow: hidden;           /* keeps the height animation clean */
}

.transfer-line-done-text {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--wt-body, 14px);
  font-weight: 600;
  color: #15803d;
}

.pick-line-done .pick-line-sku,
.transfer-recv-done .transfer-line-sku { color: #166534; }

/* Whole list finished: the block itself confirms it, so a picker does not have
   to re-read every card to be sure. */
#transferPickBlock.is-all-done {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--w-card-radius, 16px);
}
#transferPickBlock.is-all-done .pick-overall-progress { color: #15803d; font-weight: 700; }

.pick-overall-progress.pick-progress-done { color: #15803d; font-weight: 700; }

/* The save button must acknowledge the tap instantly — the request can take a
   moment, and a button that looks unchanged reads as "it did not work". */
.transfer-save-line-btn.is-saving {
  opacity: 0.75;
  position: relative;
}
.transfer-save-line-btn.is-saving::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tf-spin 700ms linear infinite;
}
@keyframes tf-spin { to { transform: rotate(360deg); } }

/* Reserve the status line's space so a message appearing or clearing cannot
   push the list up and down under the user's finger. */
#transferActionStatus {
  min-height: 18px;
  display: block;
}

/* 100% complete turns the bar green too, so the colour agrees with the card
   states above it rather than staying "in progress" blue at the finish. */
.pick-progress-fill.is-done { background: var(--w-green-500, #22c55e); }

#transferRecvBlock.is-all-done {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--w-card-radius, 16px);
}
#transferRecvBlock.is-all-done .transfer-recv-progress { color: #15803d; font-weight: 700; }
.transfer-recv-progress.pick-progress-done { color: #15803d; font-weight: 700; }

/* Pick All (system admin). Deliberately understated — it is a shortcut that
   trusts recorded bin quantities instead of a physical check, so it should not
   look like the obvious path for someone standing at the shelf. */
.transfer-pick-all-btn {
  display: block;
  width: 100%;
  min-height: 40px;
  margin: 0 0 10px;
  padding: 0 14px;
  border: 1px dashed #c9d4e0;
  border-radius: var(--w-tile-radius, 10px);
  background: #fff;
  color: var(--w-slate-500, #64748b);
  font-size: var(--wt-label, 13px);
  font-weight: 600;
}
.transfer-pick-all-btn:hover:not(:disabled) {
  background: #f7f9fc;
  border-color: #b6c4d2;
  color: var(--w-slate-900, #1e293b);
}
.transfer-pick-all-btn:disabled { opacity: 0.6; }

/* Per-alert notification chips (Employees page). Five switches per row, so they
   have to be small — on reads as filled, off as outlined and struck through, so
   the state is legible at a glance down the column. */
.notify-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.notify-chip {
  padding: 2px 8px;
  border: 1px solid var(--w-slate-200, #e2e8f0);
  border-radius: 999px;
  background: #fff;
  color: var(--w-slate-500, #64748b);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  min-height: 0;
  cursor: pointer;
  text-decoration: line-through;
  text-decoration-color: rgba(100, 116, 139, 0.55);
}

.notify-chip.is-on {
  background: var(--w-blue-50, #eff6ff);
  border-color: #c7dbff;
  color: var(--w-blue-800, #1d4ed8);
  text-decoration: none;
}

.notify-chip:disabled { cursor: default; opacity: 0.7; }
.notify-chip:not(:disabled):hover { border-color: #b6c4d2; }

/* Create-Sales-Return modal on a phone.

   The Save button sat at the very bottom of a long scrolling form — measured at
   y=992 on a 757px screen — so it was off-screen when the modal opened and read
   as "the button does nothing". Pinned to the bottom edge like the pick and
   delivery bars, so it is reachable the moment the modal opens. */
@media (max-width: 900px) {
  .sales-return-create-actions {
    position: sticky;
    bottom: 0;
    margin: 16px -12px 0;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    background: var(--panel, #fff);
    border-top: 1px solid var(--line, #e2e8f0);
    box-shadow: 0 -6px 16px rgba(15, 23, 42, 0.06);
    z-index: 3;
  }
  .sales-return-create-actions > button[type="submit"] {
    flex: 1 1 auto;
    min-height: 48px;
    font-size: 16px;
    font-weight: 600;
  }
  /* The error must not be hidden behind the pinned bar. */
  .sales-return-create-error { margin-bottom: 8px; }
}

/* The sale-detail overlay must never sit over an open modal. Modals are opened
   FROM the detail panel (Create Sales Return, Enter Payment), so the overlay is
   still on screen underneath — and at equal z-index it won the hit test and ate
   every tap. Desktop and mobile alike. */
body:has(.modal:not(.hidden)) .detail-modal-overlay {
  z-index: 60;
}
.modal:not(.hidden) { z-index: 400; }

/* The sale-detail overlay while a modal opened from it is showing. Kept in the
   DOM (the modal reads selectedDoc from that flow) but pushed out of the way so
   it cannot cover the modal or intercept taps meant for it. */
.detail-modal-overlay.sales-behind-modal {
  visibility: hidden;
  pointer-events: none;
}

/* Confirm dialog shown when a sale edit removes already-picked items and so
   raises a Sales Return. */
.confirm-return-items {
  margin: 10px 0;
  padding-left: 18px;
  line-height: 1.7;
}
.confirm-return-refund {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: 600;
}
.confirm-return-refund input {
  width: 16px;
  height: 16px;
}
.confirm-return-hint {
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

/* Sales list: item numbers column. Keeps long SKU lists from stretching the
   row — the full list is in the cell's title attribute. */
.sales-item-nos {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Sales detail: compact order lines with live stock ─────────────────────── */
/* The rows carried a lot of vertical padding, so a 5-line sale needed scrolling
   before the totals were visible. Tighten them and put the stock read-out on the
   same block as the item name rather than in extra columns. */
.detail-panel .stock-table td.ol-sku,
.detail-panel .stock-table td.ol-name {
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 1.25;
}
.detail-panel .stock-table td input[type="number"],
.detail-panel .stock-table td select {
  padding: 3px 6px;
  height: 26px;
  line-height: 1.2;
}
.detail-panel .stock-table tbody td {
  padding-top: 4px;
  padding-bottom: 4px;
}

.ol-name {
  min-width: 200px;
}

/* Per-warehouse stock under the item name. */
.ol-stock-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 2px;
  font-size: 11px;
  color: #64748b;
}
.ol-stock-wh b {
  font-weight: 600;
  color: #475569;
}
.ol-stock-wh.is-zero {
  color: #b91c1c;
}
.ol-stock-res {
  color: #92400e;
}

/* Backorder: a flag on the SKU and a plain-language notice on the line. */
.ol-bo-flag {
  display: inline-block;
  padding: 0 4px;
  border-radius: 4px;
  background: #fef3c7;
  color: #92400e;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}
.ol-bo-notice {
  color: #b45309;
  font-weight: 600;
}
.order-line-backordered {
  background: #fffbeb;
}

/* Written off: the picker found an empty shelf and office corrected the count.
   Deliberately redder than the amber backorder — a backorder is waiting for a
   delivery, a write-off is stock that was never there, and reading the second
   as the first leaves office sitting on a line that will never arrive. */
.ol-wo-flag {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  background: #fee2e2;
  color: #b91c1c;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  vertical-align: middle;
  white-space: nowrap;
}
.ol-wo-notice {
  color: #b91c1c;
  font-weight: 600;
  font-size: 12.5px;
}
.order-line-written-off {
  background: #fef2f2;
}

:root[data-theme="dark"] .ol-wo-flag {
  background: rgba(220, 38, 38, 0.22);
  color: #fca5a5;
}
:root[data-theme="dark"] .ol-wo-notice { color: #fca5a5; }
:root[data-theme="dark"] .order-line-written-off {
  background: rgba(220, 38, 38, 0.08);
}

/* Returned: part of this line came back on a Sales Return. */
.ol-ret-flag {
  display: inline-block;
  padding: 0 5px;
  border-radius: 4px;
  background: #e0e7ff;
  color: #3730a3;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}
:root[data-theme="dark"] .ol-ret-flag {
  background: rgba(99, 102, 241, 0.22);
  color: #c7d2fe;
}

/* ── Sales detail cards: compact, with stock and backorder ─────────────────── */
/* The card stacked Warehouse/Qty then Price/Total on two rows, so five items
   needed a lot of scrolling. One row of four puts a whole line in ~70px. */
.q-line-card {
  padding: 6px 8px;
  margin-bottom: 6px;
}
.q-line-card-header {
  margin-bottom: 4px;
}
.q-line-ident {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
}
.q-line-sku {
  display: inline;
}
.q-line-name {
  display: inline;
  font-size: 11px;
}
.q-line-fields {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.9fr) minmax(0, 0.8fr);
  gap: 6px 8px;
  align-items: end;
}
.q-line-fields select,
.q-line-fields input[type="number"] {
  height: 28px;
  padding: 2px 6px;
  margin-top: 1px;
}
.q-line-label {
  font-size: 10px;
}
.q-line-total-wrap {
  text-align: right;
}
/* Backordered line: tint the card and colour the notice. */
.q-line-backordered {
  background: #fffbeb;
  border-color: #fcd34d;
}
.q-line-card .ol-stock-line {
  margin: 0 0 4px;
}

/* Narrow phones: two columns rather than four, still tighter than before. */
@media (max-width: 560px) {
  .q-line-fields {
    grid-template-columns: 1fr 1fr;
  }
}

/* Stock read-out: readable at a glance, not fine print. */
.ol-stock-line {
  font-size: 12.5px;
  gap: 4px 14px;
}
.ol-stock-wh b {
  font-size: 12.5px;
}
.ol-stock-res {
  font-size: 12.5px;
}
.ol-bo-notice {
  font-size: 12.5px;
}

/* ── Products page: customer search inside the product search box ─────────── */
.unified-search-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.unified-search-wrap > input {
  width: 100%;
}

/* Suggestions drop under the search box. Products remain the primary result of
   the search itself; this panel only ever offers customers. */
.customer-suggest-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}
.customer-suggest-panel.hidden {
  display: none;
}
.customer-suggest-head {
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  background: var(--surface2, #f8fafc);
  border-bottom: 1px solid var(--line, #e2e8f0);
}
/* These options are <button> elements, and the global rule sets every button to
   a fixed 36px height with its own border and padding. That squashed the name
   out of view and blew the rows up, so the panel rules have to be specific
   enough to win rather than relying on source order. */
.customer-suggest-panel .customer-suggest-option {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text, #0f172a);
}
.customer-suggest-panel .customer-suggest-option + .customer-suggest-option {
  border-top: 1px solid var(--line, #e2e8f0);
}
.customer-suggest-panel .customer-suggest-option:hover,
.customer-suggest-panel .customer-suggest-option:focus {
  background: #eff6ff;
}
.customer-suggest-panel .cs-name {
  font-weight: 600;
  display: inline;
}
.customer-suggest-panel .cs-phone {
  font-size: 12px;
  color: var(--muted, #64748b);
  display: inline;
  margin-left: 8px;
}

/* The chosen customer: a chip under the search row, only once one is picked. */
.customer-chip-row {
  margin: 6px 0 2px;
}
.customer-chip-row.hidden {
  display: none;
}
.customer-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 10px;
  border: 1px solid #2563eb;
  border-radius: 999px;
  background: #eff6ff;
  color: #1e40af;
  font-size: 13px;
}
.customer-chip-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.75;
}
.customer-chip-name {
  font-weight: 600;
}
.customer-chip-phone {
  opacity: 0.8;
}
.customer-chip-clear {
  border: 0;
  background: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  opacity: 0.7;
}
.customer-chip-clear:hover {
  opacity: 1;
}
.customer-suggest-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted, #64748b);
}

/* The customer panel is moved into list_ui's rebuilt search wrapper, so anchor
   it to that too — otherwise it hangs off the original (now empty) container. */
.list-search-input-wrap {
  position: relative;
}
.list-search-input-wrap > .customer-suggest-panel {
  top: calc(100% + 6px);
  left: 0;
  /* The wrapper stretches across the toolbar, so right:0 made the dropdown far
     wider than the box it belongs to. Keep it tied to the input's own width. */
  right: auto;
  width: 100%;
  max-width: 420px;
}

/* A line the picker could not find: office settles it here. */
.q-line-notfound {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 6px;
  padding: 6px 8px;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  background: #fef2f2;
  font-size: 12.5px;
}
.nf-flag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 4px;
  padding: 1px 5px;
}
.nf-note {
  color: #7f1d1d;
  flex: 1 1 auto;
  min-width: 0;
}
.nf-writeoff-btn {
  border: 1px solid #b91c1c;
  background: #fff;
  color: #b91c1c;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.nf-writeoff-btn:hover {
  background: #b91c1c;
  color: #fff;
}

/* Delivery receipt: what is NOT on the van, so the driver can say why. */
.delivery-not-going {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #fcd34d;
  border-radius: 12px;
  background: #fffbeb;
  font-size: 13px;
}
.dng-head {
  font-weight: 700;
  color: #92400e;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dng-row {
  padding: 4px 0;
  color: #78350f;
  line-height: 1.4;
}
.dng-reason {
  color: #b45309;
  font-style: italic;
}
.delivery-short {
  color: #b45309;
  font-size: 11px;
}

/* Section header inside the suggestions panel — the global button/---
   typography must not leak into it. */
.customer-suggest-panel .customer-suggest-head {
  padding: 5px 10px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  background: var(--surface2, #f8fafc);
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.customer-suggest-panel .customer-suggest-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted, #64748b);
}

/* ── Sales page: today's takings ───────────────────────────────────────────── */
/* Pinned above the list so "how are we doing today?" is answered without
   adding up rows or opening the dashboard. Independent of the filters below. */
/* Sits inline in the action row, beside Add Sale / Quotation, rather than as a
   full-width band of its own. */
.sales-today-bar {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-left: 12px;
  padding: 5px 12px;
  border: 1px solid #bae6fd;
  border-radius: 999px;
  background: #f0f9ff;
  font-size: 13px;
}
.sales-today-bar[hidden] {
  display: none;
}
.stb-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0369a1;
  background: #e0f2fe;
  border-radius: 4px;
  padding: 2px 6px;
}
.stb-stat {
  color: #0f172a;
}
.stb-stat b {
  font-weight: 700;
}
.stb-money b {
  font-size: 15px;
  color: #047857;
  font-variant-numeric: tabular-nums;
}
.stb-sep {
  color: #94a3b8;
}
.stb-date {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.stb-returned {
  font-size: 12px;
  color: #b45309;
}

/* Bin a movement came from, on the product detail's stock movements. */
.mv-bin-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 11px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

/* Product detail on a phone: the wide tables (stock by bin, movements) must
   scroll sideways inside their own box rather than pushing the page wider than
   the screen, which is what made the right-hand columns unreachable. */
@media (max-width: 900px) {
  body[data-active-page="products"] .detail-content .stock-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    width: 100%;
    min-width: 0;
  }
  body[data-active-page="products"] .detail-content .stock-table th,
  body[data-active-page="products"] .detail-content .stock-table td {
    padding: 6px 8px;
    font-size: 12px;
  }
  /* Bin chips wrap rather than stretching the row. */
  body[data-active-page="products"] .mv-bin {
    white-space: normal;
  }
}

/* ── Sales return placement: where should this go back? ───────────────────── */
/* The picker took the unit off a specific shelf and the rest of the product is
   usually already somewhere. Showing both turns "Select bin" from a guess into
   a confirmation. */
.srr-hint {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
  font-size: 12px;
}
.srr-hint-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: #475569;
}
.srr-hint-origin {
  color: #166534;
}
.srr-hint-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}
.srr-hint-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #166534;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.srr-hint-others .srr-hint-chip {
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
}
.srr-hint-others .srr-hint-chip:hover {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1e40af;
}
.srr-hint-qty {
  font-weight: 600;
  opacity: 0.7;
}
.srr-bin-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 2px;
}
/* The bin field: taller touch target, clearer affordance.
   TARGETS THE TOMSELECT CONTROL, not the underlying <select>. TomSelect clips
   the original select to 1px and draws its own control; styling the select as a
   full-size bordered box made it paint again behind that control — the "box
   inside a box" on mobile. */
#salesReturnReceiveForm .ts-wrapper .ts-control {
  width: 100%;
  min-height: 38px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line, #cbd5e1);
  background: #fff;
  font-size: 14px;
}

#salesReturnReceiveForm .ts-wrapper.focus .ts-control {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Belt and braces: if TomSelect has not attached yet (or fails to), the raw
   select must still look like a normal field rather than an unstyled control. */
#salesReturnReceiveForm select[data-warehouse-id]:not(.tomselected) {
  width: 100%;
  min-height: 38px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line, #cbd5e1);
  background: #fff;
  font-size: 14px;
}
.srr-hint-virtual {
  color: #b45309;
}
.srr-hint-chip-virtual {
  border-color: #fcd34d;
  background: #fffbeb;
  color: #92400e;
}

/* ── Product detail on a phone ─────────────────────────────────────────────
   One card system for every section: same 12px radius, same 1px border, same
   14px gutter. Numbers are the loudest thing on each row because that is what
   the warehouse is reading; labels sit above them, small and quiet. */

/* Section heading: clearly a heading, not another line of body text. */
body[data-active-page="products"] .products-mobile-section-header h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 2px;
}
body[data-active-page="products"] .products-mobile-section-header p {
  font-size: 12px;
  line-height: 1.35;
  color: #94a3b8;
  margin: 0 0 10px;
}

/* A headline figure. The old markup put label and value in one <label>, which
   rendered as "Total Stock4" with no separation at all. */
.pmd-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: #f8fafc;
  margin-bottom: 10px;
}
.pmd-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}
.pmd-stat-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

/* Shared row card. */
.pmd-wh-row,
.pmd-bin-row,
.pmd-mv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 8px;
}

/* Warehouse: available is the number that decides whether it can ship. */
.pmd-wh-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pmd-wh-code { font-size: 15px; font-weight: 800; color: #0f172a; letter-spacing: 0.02em; }
.pmd-wh-name { font-size: 12px; color: #94a3b8; }
.pmd-wh-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.pmd-wh-avail {
  font-size: 20px; font-weight: 800; line-height: 1;
  color: #047857; font-variant-numeric: tabular-nums;
}
.pmd-wh-row.is-empty .pmd-wh-avail { color: #b91c1c; }
.pmd-wh-sub { font-size: 11px; color: #94a3b8; white-space: nowrap; }

/* Bin: the code is the thing being looked for. */
.pmd-bin-main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pmd-bin-code { font-size: 15px; font-weight: 800; color: #0f172a; }
.pmd-bin-wh {
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #94a3b8;
}
.pmd-bin-qty {
  font-size: 18px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums;
}

/* Movement: what + where on the left, signed qty pinned right. */
.pmd-mv-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; }
.pmd-mv-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pmd-mv-meta {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
  font-size: 12px; color: #94a3b8;
}
.pmd-mv-meta .pmd-mv-ref a { font-weight: 600; }
.pmd-mv-qty {
  font-size: 19px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex: 0 0 auto;
}
.pmd-empty {
  padding: 14px; text-align: center; color: #94a3b8; font-size: 13px;
  border: 1px dashed var(--line, #e2e8f0); border-radius: 12px; background: #f8fafc;
}

/* The list's own header wrapped "DETAILS" to "DETAIL / S" on a narrow screen. */
@media (max-width: 640px) {
  body[data-active-page="products"] #resultsHead th {
    white-space: nowrap;
    font-size: 11px;
  }
}

/* ---------------------------------------------------------------------------
   Bin Count — counting a bin and correcting it (admin only).
   Each line shows the system quantity, a box for what was counted, and where
   else that item lives, because a shortfall here is usually stock filed in
   another bin rather than stock that is gone.
--------------------------------------------------------------------------- */
.bc-bin-results { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 10px; }

/* Before anything is searched. The page is a full-height panel, so without
   this it was a large empty box with a search bar on top. */
.bc-intro {
  max-width: 520px;
  margin: 24px auto;
  padding: 0 16px;
  text-align: center;
  color: #64748b;
}

.bc-intro.hidden { display: none; }
.bc-intro-title { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: #0f172a; }
.bc-intro p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
.bc-intro-note { font-size: 13px; }

.bc-bin {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
}

.bc-bin:hover { border-color: #2358a8; background: #f4f8fd; }
.bc-bin-code { font-weight: 800; }
.bc-bin-wh { font-size: 11px; color: #64748b; text-transform: uppercase; }
.bc-bin-count { font-size: 12px; color: #64748b; }

.bc-sheet { padding: 0 12px 16px; }
.bc-sheet.hidden { display: none; }

.bc-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.bc-sheet-title { margin: 0; font-size: 18px; font-weight: 800; color: #0f172a; }
.bc-sheet-meta { font-size: 12px; color: #64748b; }

/* Adding an item the sheet does not list. One input, results directly under
   it, no modal — it is used mid-count with a part in the other hand. */
.bc-add-row { position: relative; padding: 4px 0 8px; }

#bcAddSearch {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  font-size: 13px;
}

#bcAddSearch:focus { border-style: solid; border-color: #2358a8; outline: none; }

.bc-add-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  max-height: 46vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.bc-add-results.hidden { display: none; }

.bc-add-hit {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 4px 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.bc-add-hit:hover:not([disabled]) { background: #f4f8fd; }
.bc-add-hit[disabled] { opacity: 0.55; cursor: not-allowed; }

.bc-add-sku { font-weight: 800; color: #0f172a; font-size: 13px; }
.bc-add-name {
  font-size: 12px;
  color: #475569;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bc-add-where { font-size: 11px; color: #64748b; white-space: nowrap; }
.bc-add-empty { padding: 10px 12px; font-size: 13px; }

.bc-lines { border-top: 1px solid var(--line, #e2e8f0); }

.bc-line {
  display: grid;
  /* item | in bin | other locations | fix. Item is narrowed to give the fix
     controls room — the SKU and a truncated name are enough to know which
     part you are holding. */
  grid-template-columns: minmax(0, 180px) 52px minmax(0, 1fr) minmax(0, 340px);
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #eef2f7;
}
.bc-name {
  display: block;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The fix control, inline on every line. */
.bc-fix { display: flex; align-items: center; gap: 5px; min-width: 0; }
.bc-fix .bc-af {
  height: 30px; font-size: 12px; padding: 0 6px;
  border: 1px solid #cbd5e1; border-radius: 7px; background: #fff;
  color: #1f2937; min-width: 0;
}
.bc-fix .bc-op { flex: 0 0 96px; }
.bc-fix .bc-to-bin { flex: 1 1 90px; max-width: 130px; }
.bc-fix .bc-to-bin.hidden { display: none; }

.bc-line.has-diff { background: #fffaf2; }
.bc-line-main { min-width: 0; }
.bc-sku { font-weight: 700; color: #0f172a; }
.bc-name { display: block; font-size: 12px; color: #64748b; }

/* Where else this item is. The reason a count differs is usually right here. */
.bc-elsewhere { margin-top: 3px; font-size: 11px; color: #475569; }
.bc-loc {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #eef2f7;
  font-weight: 600;
}

/* A bin in the OTHER warehouse. Worth knowing the item is there, but it cannot
   explain a miscount here and is never offered as a move. */
.bc-loc.is-other-wh {
  background: #fdf2d9;
  color: #7a5c14;
}

.bc-sys {
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #475569;
}

.bc-input {
  width: 100%;
  min-height: 38px;
  padding: 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bc-diff {
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #64748b;
}

.bc-diff.is-short { color: #9c3b22; }
.bc-diff.is-over { color: #1a6b3c; }

.bc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
}

.bc-foot-right { display: flex; align-items: center; gap: 12px; }
.bc-diff-summary { font-size: 13px; color: #475569; }
.bc-empty { padding: 12px; font-size: 13px; }

/* Deciding what each difference means, before any stock moves. */
.bc-confirm-intro { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #475569; }
.bc-confirm-list { max-height: 52vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.bc-confirm-row {
  padding: 10px 0;
  border-bottom: 1px solid #eef2f7;
}

.bc-confirm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.bc-confirm-diff { font-size: 12px; color: #9c3b22; font-variant-numeric: tabular-nums; }

.bc-choice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.4;
  color: #334155;
  cursor: pointer;
}

.bc-choice-skip { color: #64748b; }

.bcash-apply {
  width: 100%;
  min-height: 46px;
  margin-top: 14px;
  border: 0;
  border-radius: 12px;
  background: #15803d;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.bcash-apply:hover { background: #12692f; }
.bcash-apply:disabled { background: #cbd5e1; color: #64748b; cursor: not-allowed; }

@media (max-width: 640px) {
  /* On a phone the row becomes a card: the item, then each figure on its own
     labelled line, then the fix control. The desktop header is hidden here, so
     without those labels the numbers were bare and said nothing. */
  .bc-line { display: block; padding: 12px 0; }
  .bc-line.bc-head { display: none; }
  .bc-line-main { margin-bottom: 6px; }
  .bc-name { font-size: 11px; white-space: normal; }

  /* data-label carries the column name the hidden header would have shown. */
  .bc-sys,
  .bc-elsewhere-cell {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 0;
    text-align: left;
  }
  .bc-sys::before,
  .bc-elsewhere-cell::before {
    content: attr(data-label);
    flex: 0 0 88px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
  }

  .bc-fix {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e8f0;
  }
  .bc-fix::before {
    content: attr(data-label);
    flex: 1 0 100%;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
  }
  .bc-fix .bc-af { height: 36px; font-size: 14px; }
  .bc-fix .bc-op { flex: 1 1 110px; }
  .bc-fix .bc-to-bin { flex: 1 1 110px; max-width: none; }
  .bc-stepper { height: 36px; }
  .bc-stepper .bc-qty { width: 54px; font-size: 15px; }
  .bc-step { width: 34px; flex: 0 0 34px; font-size: 18px; }
  /* A real button, not a transparent box the label spills out of: full width,
     touch height, its own colour. */
  .bc-fix .bc-apply { flex: 1 0 100%; height: 40px; font-size: 15px; }
  .bc-adjust-status { flex: 1 0 100%; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Executive dashboard — the money view, kept off the operational one.
--------------------------------------------------------------------------- */
.exec-wrap .dash-hero-trend.is-up { color: #1a6b3c; }
.exec-wrap .dash-hero-trend.is-down { color: #9c3b22; }

.exec-compare { font-size: 13px; }

.exec-cmp-head,
.exec-cmp-row {
  display: grid;
  grid-template-columns: 1fr 110px 110px 92px;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
}

.exec-cmp-head {
  border-bottom: 1px solid var(--line, #e2e8f0);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
  text-align: right;
}

.exec-cmp-head span:first-child { text-align: left; }
.exec-cmp-row { border-bottom: 1px solid #f1f5f9; }
.exec-cmp-label { color: #334155; }
.exec-cmp-now,
.exec-cmp-prev,
.exec-cmp-chg { text-align: right; font-variant-numeric: tabular-nums; }
.exec-cmp-now { font-weight: 800; color: #0f172a; }
.exec-cmp-prev { color: #64748b; }
.exec-cmp-chg { font-weight: 700; font-size: 12px; color: #64748b; }
.exec-cmp-chg.is-up { color: #1a6b3c; }
.exec-cmp-chg.is-down { color: #9c3b22; }
.exec-cmp-muted { color: #94a3b8; }

.exec-stock-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 0;
}

.exec-stock-wh { font-weight: 800; font-size: 12px; color: #334155; }

.exec-stock-bar {
  height: 8px;
  border-radius: 999px;
  background: #eef2f7;
  overflow: hidden;
}

.exec-stock-fill { height: 100%; background: #2358a8; border-radius: 999px; }
.exec-stock-val { font-weight: 800; font-variant-numeric: tabular-nums; color: #0f172a; }
.exec-stock-units {
  grid-column: 2 / -1;
  font-size: 11px;
  color: #64748b;
}

/* Money sitting still. Flagged, not alarming — some slow stock is normal. */
.exec-dead {
  /* block, not flex: the window buttons, figure and share bar stack. */
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdf2d9;
  color: #7a5c14;
}

.exec-dead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.exec-dead-label { font-size: 12px; font-weight: 700; }
.exec-dead-value {
  display: inline-block;
  margin-right: 8px;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.exec-dead-sub { font-size: 11px; }

.exec-dead-windows { display: flex; gap: 4px; }

.exec-dead-btn {
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid #e0cda2;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: #7a5c14;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.exec-dead-btn.active { background: #7a5c14; border-color: #7a5c14; color: #fff; }
.exec-dead-btn:disabled { opacity: 0.5; cursor: wait; }

/* Idle against moving, on the same total. */
.exec-dead-bar {
  height: 10px;
  margin-top: 8px;
  border-radius: 999px;
  background: #cfe6d8;
  overflow: hidden;
}

.exec-dead-fill { height: 100%; background: #b9892a; border-radius: 999px; }

.exec-dead-legend {
  display: flex;
  gap: 14px;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
}

.exec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: baseline;
}

/* How far the sales record actually reaches — so a window is never read as
   covering more history than exists. */
.exec-dead-note { margin-left: auto; font-weight: 500; opacity: 0.75; }

.exec-dot.is-dead { background: #b9892a; }
.exec-dot.is-live { background: #7fbf9a; }

.exec-rank-row {
  display: grid;
  grid-template-columns: 1fr 70px auto;
  align-items: center;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px solid #f1f5f9;
}

.exec-rank-main { min-width: 0; }
.exec-rank-label { display: block; font-weight: 700; font-size: 13px; color: #0f172a; }
.exec-rank-sub {
  display: block;
  font-size: 11px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exec-rank-bar { height: 6px; border-radius: 999px; background: #eef2f7; overflow: hidden; }
.exec-rank-fill { height: 100%; background: #6f9fd8; border-radius: 999px; }
.exec-rank-value { font-weight: 800; font-variant-numeric: tabular-nums; color: #0f172a; font-size: 13px; }
.exec-empty { padding: 10px 0; font-size: 13px; }

@media (max-width: 640px) {
  .exec-cmp-head, .exec-cmp-row { grid-template-columns: 1fr 84px 70px; }
  .exec-cmp-prev { display: none; }
  .exec-cmp-head span:nth-child(3) { display: none; }
}

/* ---------------------------------------------------------------------------
   PO receiving on a phone. The SKU, the item name and the make/model/year are
   what the warehouse reads to find the part, and they were the smallest text
   on the card — the name was 12px and clipped to a single line, so the
   make/model/year at the end was routinely cut off.
--------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .po-receive-item-sku {
    font-size: 19px;
    line-height: 1.25;
  }

  .po-receive-item-name {
    font-size: 15px;
    line-height: 1.35;
    color: var(--text, #13212f);
    /* Wrap instead of truncating: the vehicle is at the END of this string. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    margin-top: 3px;
  }

  .po-receive-badges { gap: 6px; margin-top: 7px; }

  .po-receive-badge {
    font-size: 13px;
    padding: 3px 9px;
  }

  .po-receive-item-done-text { font-size: 14px; font-weight: 700; }
  .po-receive-placement { font-size: 13px; }
}

/* Undo a line saved by mistake. Quiet: the common case is that the save was
   right, so this must not compete with Save on the next card. */
.po-receive-undo-btn {
  align-self: flex-start;
  margin-top: 6px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.po-receive-undo-btn:hover { border-color: #9c3b22; color: #9c3b22; }
.po-receive-undo-btn:disabled { opacity: 0.55; cursor: wait; }

@media (max-width: 760px) {
  .po-receive-undo-btn { min-height: 38px; font-size: 14px; padding: 0 16px; }
}

/* A bought-to-order line on the picking screen. It came in for this sale, so
   there is no shelf to fetch it from — the card says so instead of showing a
   bin picker with nothing in it. */
.pick-ksi-note {
  padding: 10px 12px;
  border-radius: 10px;
  background: #eef2f7;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .pick-ksi-note { font-size: 14px; padding: 12px 14px; }
}

/* A line already picked in an earlier round: done, nothing to choose. */
.pick-done-note {
  padding: 10px 12px;
  border-radius: 10px;
  background: #e4f2e8;
  color: #256b3d;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .pick-done-note { font-size: 14px; padding: 12px 14px; }
}


/* ── Quick Adjust: one-line stock correction under the bin table ──────────── */
/* Desktop office tool. Everything on a single row so a correction is a few
   taps and Enter, without leaving the product being looked at. */
.qa-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #e3e8ef;
  border-radius: 9px;
  background: #f8fafc;
}
.qa-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  margin-right: 2px;
  white-space: nowrap;
}
.qa-bar .qa-field {
  height: 30px;
  font-size: 13px;
  padding: 0 7px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #1f2937;
  min-width: 0;
}
.qa-bar .qa-bin { max-width: 190px; }

/* Quantity with -/+ either side, as one control. */
.qa-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  overflow: hidden;
  background: #fff;
  height: 30px;
}
.qa-stepper .qa-qty {
  width: 54px;
  text-align: center;
  border: 0;
  outline: none;
  font-size: 13px;
  color: #1f2937;
  background: #fff;
  -moz-appearance: textfield;
}
.qa-stepper .qa-qty::-webkit-outer-spin-button,
.qa-stepper .qa-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qa-step {
  width: 28px;
  flex: 0 0 28px;
  border: 0;
  background: #f1f5f9;
  color: #21415f;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.qa-step:hover { background: #e2e8f0; }
.qa-step:active { background: #d5e0ec; }

/* The destination box is a TomSelect on this line — match the other fields. */
.qa-bar .ts-wrapper { min-width: 150px; max-width: 200px; }

/* The dropdown is appended to <body> so the panel's overflow cannot clip it,
   which makes it a SIBLING of the detail panel rather than a descendant.
   TomSelect ships it at z-index 10 and the panel sits at 120, so the list of
   matching bins opened behind the panel and could not be read. Lift it above
   both the panel and its overlay. Scoped to the tagged dropdown so no other
   page's TomSelect stacking changes. */
body > .ts-dropdown[data-qa-dropdown] {
  z-index: 500;
}
/* Same for the Adjustments page's bin boxes, which sit in #adjustmentModal
   (z-index 400) — see initBinSelect in adjustments.js. */
body > .ts-dropdown[data-adj-dropdown] {
  z-index: 500;
}
.qa-bar .ts-wrapper .ts-control {
  min-height: 30px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font-size: 13px;
}
.qa-bar .qa-note { flex: 1 1 120px; min-width: 100px; }
.qa-inline { display: flex; align-items: center; gap: 4px; min-width: 0; }
.qa-inline > span {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qa-apply {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  background: var(--accent, #3b5bdb);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.qa-apply:hover { filter: brightness(1.06); }
.qa-apply:disabled { opacity: 0.6; cursor: default; }
.qa-status { font-size: 12px; white-space: nowrap; }
.qa-status.qa-good { color: #226b41; font-weight: 600; }
.qa-status.qa-bad { color: #b23b3b; font-weight: 600; }

/* The products detail panel is narrow on smaller screens — let the line wrap
   rather than overflow, keeping the note field last. */
@media (max-width: 900px) {
  .qa-bar .qa-note { flex-basis: 100%; }
}


/* ── Adjustments list: type toggles ──────────────────────────────────────── */
/* Two jobs, two buttons: a count that CHANGED stock, or a move that only
   shifted it between bins. Neither pressed = everything. */
.adj-filter-row { display: flex; align-items: center; gap: 10px; }
.adj-toggles { display: inline-flex; gap: 6px; }
.adj-toggle {
  height: 32px;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.adj-toggle:hover { background: #f1f5f9; }
.adj-toggle.is-on {
  background: var(--accent, #3b5bdb);
  border-color: var(--accent, #3b5bdb);
  color: #fff;
}
.adj-toggle.is-on:hover { filter: brightness(1.06); }


/* ── "Did you put this in Excel too?" ─────────────────────────────────────── */
.xls-ask {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.45);
}
.xls-ask-card {
  background: #fff; border-radius: 14px; padding: 22px 24px;
  width: min(420px, 92vw); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.25);
}
.xls-ask-card h3 { margin: 0 0 6px; font-size: 17px; color: #0f172a; }
.xls-ask-sub { margin: 0 0 18px; font-size: 13px; color: #64748b; }
.xls-ask-actions { display: flex; gap: 10px; }
.xls-ask-actions button {
  flex: 1 1 0; height: 40px; border-radius: 9px; font-size: 14px;
  font-weight: 600; cursor: pointer; border: 1px solid transparent;
}
.xls-ask-yes { background: #226b41; color: #fff; }
.xls-ask-yes:hover { filter: brightness(1.08); }
.xls-ask-no { background: #fff; color: #93590a; border-color: #e6cfa4; }
.xls-ask-no:hover { background: #fdf7ec; }

/* The answer, on the list and in the detail. */
.xls-pill {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.xls-yes { background: #e8f4ec; color: #226b41; }
.xls-no { background: #fbf1df; color: #93590a; }
.xls-unknown { background: transparent; color: #cbd5e1; font-weight: 400; }

.xls-detail { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.xls-detail-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8;
}
.xls-detail-btn {
  margin-left: auto; height: 28px; padding: 0 12px; font-size: 12px;
  border: 1px solid #cbd5e1; border-radius: 7px; background: #fff;
  color: #475569; cursor: pointer;
}
.xls-detail-btn:hover { background: #f1f5f9; }
.xls-detail-btn:disabled { opacity: 0.6; cursor: default; }


/* ── Adjustments list: Note is a glance, not a column that eats the row ───── */
/* Most notes are empty or a few words; the occasional long one was stretching
   the table and squeezing everything that matters. Capped and ellipsised, with
   the full text on hover via the cell's title attribute. */
#adjustmentsTable th.adj-note-col,
#adjustmentsTable td.adj-note-cell {
  max-width: 150px;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ── Bin count: other locations, and the per-line adjust ─────────────────── */
/* Where else the item sits, in its own column beside this bin's figure. When a
   count comes up short the first question is always "is it in another bin",
   so that answer belongs next to the number, not in a sentence underneath. */
.bc-elsewhere-cell {
  min-width: 0;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
}
.bc-elsewhere { display: flex; flex-wrap: wrap; gap: 3px 6px; }
.bc-elsewhere.bc-none { color: #cbd5e1; font-style: italic; }

.bc-wh-select {
  height: 34px;
  padding: 0 8px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #1f2937;
}

.bc-adjust-btn {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.bc-adjust-btn:hover { background: #f1f5f9; }
.bc-adjust-btn.is-open {
  background: var(--accent, #3b5bdb);
  border-color: var(--accent, #3b5bdb);
  color: #fff;
}

/* The adjust line itself — same shape as Quick Adjust on the product page. */
.bc-adjust-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  margin: -1px 0 6px;
  background: #f8fafc;
  border: 1px solid #e3e8ef;
  border-radius: 9px;
}
.bc-adjust-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.bc-adjust-row .bc-af {
  height: 30px;
  font-size: 13px;
  padding: 0 7px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #fff;
  color: #1f2937;
  min-width: 0;
}
.bc-adjust-row .bc-to-bin { max-width: 160px; }
.bc-adjust-row .bc-note { flex: 1 1 100px; min-width: 90px; }
.bc-af-inline { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bc-af-inline > span {
  font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em;
}
.bc-stepper {
  display: inline-flex; align-items: stretch; height: 30px;
  border: 1px solid #cbd5e1; border-radius: 7px; overflow: hidden; background: #fff;
}
.bc-stepper .bc-qty {
  width: 50px; text-align: center; border: 0; outline: none;
  font-size: 13px; color: #1f2937; -moz-appearance: textfield;
}
.bc-stepper .bc-qty::-webkit-outer-spin-button,
.bc-stepper .bc-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bc-step {
  width: 26px; flex: 0 0 26px; border: 0; background: #f1f5f9;
  color: #21415f; font-size: 15px; font-weight: 700; cursor: pointer; padding: 0;
}
.bc-step:hover { background: #e2e8f0; }
.bc-apply {
  height: 30px; padding: 0 13px; border: 0; border-radius: 7px;
  background: var(--accent, #3b5bdb); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.bc-apply:disabled { opacity: 0.6; cursor: default; }
.bc-adjust-status { font-size: 12px; white-space: nowrap; }
.bc-adjust-status.is-good { color: #226b41; font-weight: 600; }
.bc-adjust-status.is-bad { color: #b23b3b; font-weight: 600; }

/* Header row for the count sheet. Shares .bc-line's grid so each label sits
   over its own column; it is not a data row, so the diff/adjust styling that
   colours those cells must not apply to it. */
.bc-line.bc-head {
  padding: 4px 0 6px;
  border-bottom: 1px solid #dbe3ec;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  background: none;
}
/* In bin is a right-aligned number, so its label is too. */
.bc-line.bc-head .bc-sys { text-align: right; color: #94a3b8; font-weight: 700; }


/* ── Bin count: "go and check that bin" reminders ────────────────────────── */
/* Raised while counting one bin, about a different one. Whether a stray item
   is a Move or an Increase cannot be settled without looking there, so the
   question gets recorded instead of guessed at. */
.bc-flag {
  border: 0;
  background: none;
  padding: 0 0 0 4px;
  cursor: pointer;
  color: #b0bac6;
  font-size: 12px;
  line-height: 1;
}
.bc-flag:hover { color: #b45309; }

.bc-note-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin: -1px 0 6px;
  background: #fffaf0;
  border: 1px solid #f0dfc0;
  border-radius: 9px;
}
.bc-note-lead { font-size: 12px; color: #7a5a1e; white-space: nowrap; }
.bc-note-text {
  flex: 1 1 200px;
  min-width: 140px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #e0cfa8;
  border-radius: 7px;
  font-size: 13px;
}
.bc-note-save {
  height: 32px; padding: 0 12px; border: 0; border-radius: 7px;
  background: #b45309; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
}
.bc-note-save:disabled { opacity: 0.6; cursor: default; }
.bc-note-status { font-size: 12px; }
.bc-note-status.is-bad { color: #b23b3b; font-weight: 600; }

/* The list itself, above the bin search. */
.bc-notes {
  margin: 10px 0 4px;
  border: 1px solid #f0dfc0;
  border-radius: 10px;
  background: #fffaf0;
  overflow: hidden;
}
.bc-notes-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #7a5a1e;
  border-bottom: 1px solid #f0dfc0;
}
.bc-notes-count {
  background: #b45309; color: #fff; border-radius: 999px;
  padding: 1px 7px; font-size: 11px;
}
.bc-note {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; font-size: 13px;
  border-bottom: 1px solid #f7ecd8;
}
.bc-note:last-child { border-bottom: 0; }
.bc-note-bin { font-weight: 800; color: #7a5a1e; white-space: nowrap; }
.bc-note-sku { font-weight: 700; color: #334155; white-space: nowrap; }
.bc-note-why {
  flex: 1 1 auto; min-width: 0; color: #64748b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-note-said { font-size: 11px; color: #94a3b8; white-space: nowrap; }
.bc-note-open, .bc-note-done {
  height: 28px; padding: 0 11px; border-radius: 7px; font-size: 12px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
}
.bc-note-open { border: 1px solid #e0cfa8; background: #fff; color: #7a5a1e; }
.bc-note-open:hover { background: #fdf3e2; }
.bc-note-done { border: 0; background: #226b41; color: #fff; }
.bc-note-done:disabled { opacity: 0.6; cursor: default; }

@media (max-width: 640px) {
  /* Stacked, and the buttons get touch height. */
  .bc-note { flex-wrap: wrap; }
  .bc-note-why { flex: 1 0 100%; white-space: normal; }
  .bc-note-open, .bc-note-done { height: 36px; flex: 1 1 auto; }
  .bc-note-row { gap: 6px; }
  .bc-note-lead { flex: 1 0 100%; white-space: normal; }
  .bc-note-save { flex: 1 0 100%; height: 38px; }
}


/* ── Collections: what customers still owe on this driver's deliveries ───── */
.col-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.col-summary { font-size: 14px; color: #475569; }
.col-summary strong { font-size: 18px; color: #0f172a; }

.col-list { padding: 10px 12px 20px; }
.col-cust { border: 1px solid #e3e8ef; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.col-cust-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 14px; border: 0; background: #fff; cursor: pointer; text-align: left;
}
.col-cust-head:hover { background: #f8fafc; }
.col-caret { color: #94a3b8; font-size: 12px; width: 12px; }
.col-cust-name {
  flex: 1 1 auto; min-width: 0; font-weight: 700; color: #0f172a; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.col-cust-count { font-size: 12px; color: #94a3b8; white-space: nowrap; }
.col-cust-owed {
  font-weight: 800; color: #b45309; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.col-cust.is-open .col-cust-head { background: #f8fafc; border-bottom: 1px solid #eef2f7; }

.col-sales { padding: 4px 0; }
.col-sale {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 36px; font-size: 13px; border-bottom: 1px solid #f4f7fa;
}
.col-sale:last-child { border-bottom: 0; }
.col-sale-no { font-weight: 700; color: #334155; white-space: nowrap; }
.col-sale-day { color: #94a3b8; font-size: 12px; white-space: nowrap; }
.col-sale-amt {
  flex: 1 1 auto; text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums; color: #0f172a; white-space: nowrap;
}
.col-sale-of { font-weight: 400; font-size: 11px; color: #94a3b8; }
.col-collect {
  height: 32px; padding: 0 14px; border: 0; border-radius: 8px;
  background: var(--accent, #3b5bdb); color: #fff;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.col-collect:hover { filter: brightness(1.06); }

/* The payment sheet. */
.col-pay-lead { margin-bottom: 14px; }
.col-pay-cust { font-weight: 700; font-size: 15px; color: #0f172a; }
.col-pay-due { font-size: 14px; color: #64748b; margin-top: 2px; }
.col-pay-due strong { color: #b45309; font-size: 18px; }
.col-pay-modes { display: flex; gap: 8px; margin-bottom: 12px; }
.col-mode {
  flex: 1 1 0; height: 42px; border: 1px solid #cbd5e1; border-radius: 9px;
  background: #fff; color: #475569; font-size: 14px; font-weight: 600; cursor: pointer;
}
.col-mode.is-on {
  background: var(--accent, #3b5bdb); border-color: var(--accent, #3b5bdb); color: #fff;
}
.col-pay-field {
  display: block; margin-bottom: 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: #94a3b8;
}
.col-pay-field input, .col-pay-field select {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  height: 42px; padding: 0 11px; font-size: 16px; font-weight: 400;
  text-transform: none; letter-spacing: normal; color: #1f2937;
  border: 1px solid #cbd5e1; border-radius: 9px;
}
.col-confirm {
  width: 100%; height: 46px; border: 0; border-radius: 10px; margin-top: 4px;
  background: #226b41; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
}
.col-confirm:disabled { opacity: 0.6; cursor: default; }
.col-pay-status { margin-top: 10px; font-size: 13px; text-align: center; }
.col-pay-status.is-bad { color: #b23b3b; font-weight: 600; }

/* Product detail: a part can come from several suppliers. The list shows all
   of them; the radio marks the one whose lead time drives reordering. */
.supplier-pick-field {
  display: block;
}

.supplier-pick-hint {
  display: block;
  font-size: 11px;
  color: var(--muted, #5a6b7c);
  font-weight: 400;
  margin: 2px 0 5px;
  line-height: 1.35;
}

.supplier-pick-list {
  display: block;
  max-height: 168px;
  overflow-y: auto;
  border: 1px solid var(--p-line, #dfe5ec);
  border-radius: 8px;
  padding: 4px;
  background: var(--p-surface, #fff);
}

.supplier-pick-field {
  display: block;
  padding: 8px 14px;
  border-bottom: 0.5px solid var(--line);
}

.supplier-pick-summary {
  cursor: pointer;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted, #5a6b7c);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
}

.supplier-pick-count {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--p-hover, #f1f5f9);
  border: 1px solid var(--p-line, #dfe5ec);
}

.supplier-pick-hint {
  font-size: 11px;
  color: var(--muted, #5a6b7c);
  line-height: 1.35;
  margin: 4px 0 6px;
  text-transform: none;
  letter-spacing: 0;
}

/* Shared track definition: the header and every row must line up, so the
   column widths live in one place. */
.supplier-pick-head,
.supplier-pick-row {
  display: grid;
  /* minmax(0,1fr) on the code input: without it a long value widens the grid
     and the row overflows its panel. */
  grid-template-columns: 22px 22px minmax(56px, 1fr) minmax(0, 1.6fr) auto;
  align-items: center;
  gap: 6px;
}

.supplier-pick-head {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #5a6b7c);
  padding: 0 6px 3px;
}

.supplier-pick-list {
  display: block;
  max-height: 190px;
  overflow-y: auto;
  border: 1px solid var(--p-line, #dfe5ec);
  border-radius: 8px;
  padding: 3px;
  background: var(--p-surface, #fff);
}

.supplier-pick-row {
  padding: 3px 6px;
  border-radius: 6px;
  font-size: 12px;
}

.supplier-pick-row:hover {
  background: var(--p-hover, #f4f7fa);
}

/* The detail panel styles every input as a full-width field; these are a
   checkbox, a radio and a small text box inside a grid row, so the panel's
   sizing has to be undone explicitly rather than inherited. */
.supplier-pick-row input[type="checkbox"],
.supplier-pick-row input[type="radio"] {
  width: 15px;
  height: 15px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  accent-color: var(--accent, #2563eb);
}

.detail-panel .supplier-pick-row input.supplier-code,
.supplier-pick-row input.supplier-code {
  width: 100%;
  min-width: 0;
  height: 24px;
  margin: 0;
  padding: 2px 6px;
  font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--p-line, #dfe5ec);
  border-radius: 5px;
  background: var(--p-surface, #fff);
}

.supplier-pick-name {
  font-weight: 600;
  font-size: 11.5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supplier-pick-meta {
  font-size: 10px;
  color: var(--muted, #5a6b7c);
  white-space: nowrap;
}

.detail-supplier-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  border-radius: 999px;
  background: var(--p-hover, #f1f5f9);
  border: 1px solid var(--p-line, #dfe5ec);
  font-size: 11.5px;
  font-weight: 600;
}

.detail-supplier-chip.is-primary {
  background: rgba(37, 99, 235, 0.1);
  border-color: rgba(37, 99, 235, 0.35);
}

.detail-supplier-meta {
  font-weight: 400;
  color: var(--muted, #5a6b7c);
  font-size: 10.5px;
}

/* Transfer picking: both warehouses' stock, and a per-line adjust. */
.pick-dest-has-stock {
  color: #8a5a04;
}

.pick-dest-locs {
  font-size: 11.5px;
  color: var(--muted, #5a6b7c);
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.tp-adjust-toggle {
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px dashed var(--p-line, #dfe5ec);
  background: transparent;
  color: var(--muted, #5a6b7c);
  cursor: pointer;
}

.tp-adjust-toggle.is-open {
  border-style: solid;
  color: var(--ink, #1f2d3a);
  background: var(--p-hover, #f4f7fa);
}

.tp-adjust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  border-radius: 8px;
  background: var(--p-hover, #f4f7fa);
  border: 1px solid var(--p-line, #dfe5ec);
}

.tp-adjust.hidden {
  display: none;
}

.tp-adjust select {
  flex: 1 1 130px;
  /* min-width 0 so a long bin code cannot push the row wider than the card. */
  min-width: 0;
  height: 36px;
  font-size: 13px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid var(--p-line, #dfe5ec);
  background: var(--p-surface, #fff);
}

.tp-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
}

.tp-step {
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 1;
  border: 1px solid var(--p-line, #dfe5ec);
  background: var(--p-surface, #fff);
  /* Explicit: the page's generic button rule paints button text white, which
     on this white stepper left two blank squares either side of the field. */
  color: var(--ink, #1f2d3a);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.tp-step:first-child { border-radius: 6px 0 0 6px; }
.tp-step:last-child { border-radius: 0 6px 6px 0; }

.tp-adjust .tp-qty {
  width: 62px;
  height: 36px;
  min-width: 0;
  text-align: center;
  font-size: 14px;
  border: 1px solid var(--p-line, #dfe5ec);
  border-left: 0;
  border-right: 0;
  background: var(--p-surface, #fff);
}

.tp-apply {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  border: 0;
  background: var(--accent, #2563eb);
  color: #fff;
  cursor: pointer;
}

.tp-apply:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.tp-status {
  flex: 1 1 100%;
  font-size: 11.5px;
}

.tp-status.is-good { color: #15803d; }
.tp-status.is-bad { color: #b91c1c; }

@media (max-width: 767px) {
  /* One control per row on a phone: five controls side by side left each
     about 60px wide, too small to tap accurately in an aisle. */
  .tp-adjust select,
  .tp-adjust .tp-stepper,
  .tp-apply {
    flex: 1 1 100%;
  }
  /* The stepper is one unit: fixed-width buttons with the field between
     them. Letting the row stretch the buttons collapsed them to empty
     squares beside the Qty box. */
  .tp-stepper {
    display: flex;
    width: 100%;
  }
  .tp-step {
    flex: 0 0 52px;
    width: 52px;
  }
  .tp-adjust .tp-qty {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .tp-adjust select,
  .tp-step,
  .tp-adjust .tp-qty,
  .tp-apply { height: 42px; }
}

/* Picking more than requested is allowed; mark it so the extra reads as a
   deliberate choice rather than a miscount. */
.pick-allocated-extra {
  color: #8a5a04;
}

/* ====================================================================
   Today / Yesterday / Older grouping on the warehouse work lists.

   Pickings and Deliveries can both run to dozens of rows. Without
   landmarks the list is an undifferentiated scroll, and a picker cannot
   tell this morning's work from last week's leftovers. The header
   carries the count so a collapsed section still says how much is in it.

   These rules sit OUTSIDE the mobile media query on purpose: the
   grouping is just as useful on the desktop table.
   ==================================================================== */

.day-group-row {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: default;
}

.day-group-cell {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
.day-group-cell::before { content: none !important; }

.day-group-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 4px 7px;
  /* !important throughout: a global `button { background: var(--accent) }`
     rule paints every button indigo, and on tap the focus stays on this one,
     so the header sat filled blue until you clicked elsewhere. This is a
     section heading, not a button to press repeatedly — it must look the
     same before, during and after a tap. */
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  border: 0;
  border-bottom: 1px solid var(--p-line, #e7ecf1);
  color: var(--w-slate-500, #64748b);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
}

.day-group-toggle:hover { color: var(--w-slate-900, #0f172a); }
.day-group-toggle:hover,
.day-group-toggle:active,
.day-group-toggle:focus {
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}
/* Keyboard users still get a ring; a mouse/finger tap does not leave one. */
.day-group-toggle:focus { outline: none; }
.day-group-toggle:focus-visible {
  outline: 2px solid var(--accent, #3b4bd8);
  outline-offset: -2px;
  border-radius: 4px;
}

.day-group-caret {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}
.day-group-toggle.is-collapsed .day-group-caret { transform: rotate(0deg); }

.day-group-label { flex: 0 0 auto; }

/* The count is the point of a collapsed section: it says how much work is
   folded away, so it must stay legible when the label is not. */
.day-group-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--w-slate-200, #e2e8f0);
  color: var(--w-slate-500, #64748b);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}
.day-group-toggle.is-collapsed .day-group-count {
  background: var(--w-blue-50, #eff6ff);
  color: var(--w-blue-800, #1e40af);
}

/* display:none rather than a height transition — these lists can hold
   hundreds of rows, and animating them janks on a warehouse phone. */
tr.day-group-hidden { display: none !important; }

:root[data-theme="dark"] .day-group-toggle {
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
:root[data-theme="dark"] .day-group-count {
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.72);
}

/* On a phone the tbody is a grid of cards; the group header is not a card and
   must not inherit that layout, or it carries a row's worth of unused height. */
@media (max-width: 900px) {
  body[data-active-page="pickings"] #pickingsTable tbody tr.day-group-row,
  body[data-active-page="deliveries"] #deliveriesTable tbody tr.day-group-row {
    display: block;
    margin: 2px 0 0;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  /* The mobile card rules pad every cell; the header supplies its own. */
  body[data-active-page="pickings"] #pickingsTable tbody td.day-group-cell,
  body[data-active-page="deliveries"] #deliveriesTable tbody td.day-group-cell {
    display: block;
    padding: 0 !important;
  }
  body[data-active-page="pickings"] #pickingsTable tbody tr.day-group-row:first-child,
  body[data-active-page="deliveries"] #deliveriesTable tbody tr.day-group-row:first-child {
    margin-top: 0;
  }
  .day-group-toggle { padding: 7px 2px 6px; }
}

/* ====================================================================
   Batch-select checkbox on the phone work lists.

   The desktop table gives the checkbox its own leading column. On a phone
   that column became a full-width block ABOVE each card — 75px of empty
   white per row, which on an admin account was more height than the card
   content itself and the real reason the list scrolled so far.

   It is instead pinned into the card's own top-right corner: the row
   becomes the positioning context and the checkbox overlays it, costing
   no vertical space at all. Sized at 22px with a 44px tap area so it is
   still comfortable with gloves on.
   ==================================================================== */
@media (max-width: 900px) {
  body[data-active-page="pickings"] #pickingsTable tbody tr:not(.day-group-row),
  body[data-active-page="deliveries"] #deliveriesTable tbody tr:not(.day-group-row) {
    position: relative;
  }
  body[data-active-page="pickings"] #pickingsTable tbody td:has(.pick-row-check),
  body[data-active-page="deliveries"] #deliveriesTable tbody td:has(.delivery-row-check) {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: 0 !important;
  }
  body[data-active-page="pickings"] #pickingsTable tbody td:has(.pick-row-check)::before,
  body[data-active-page="deliveries"] #deliveriesTable tbody td:has(.delivery-row-check)::before {
    content: none !important;
  }
  body[data-active-page="pickings"] #pickingsTable .pick-row-check,
  body[data-active-page="deliveries"] #deliveriesTable .delivery-row-check {
    width: 22px;
    height: 22px;
    margin: 0;
  }
  /* Keep the status pill clear of the checkbox that now sits over it. */
  body[data-active-page="pickings"] #pickingsTable tbody tr:has(.pick-row-check) .pmc-top,
  body[data-active-page="deliveries"] #deliveriesTable tbody tr:has(.delivery-row-check) .pmc-top {
    padding-right: 34px;
  }
}

/* Written-off line on the sale card.
   Mirrors the NOT FOUND block's shape so office reads them as the same family,
   but in slate rather than red: NOT FOUND is an open question for someone to
   answer, a write-off is already settled. What it needs from office is a
   decision about the ORDER (delete the line, or wait for stock) — not an
   alarm. */
.q-line-writtenoff {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 6px;
  padding: 6px 8px;
  border: 1px solid var(--w-slate-200, #e2e8f0);
  border-radius: 6px;
  background: var(--w-slate-50, #f8fafc);
  font-size: 12.5px;
}
.wo-flag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 4px;
  padding: 1px 5px;
}
.wo-note {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--w-slate-500, #64748b);
}
/* A faint left edge, so a written-off line is findable when scanning a long
   order without shouting over the rest of it. */
.q-line-written-off {
  border-left: 3px solid #fca5a5;
}

:root[data-theme="dark"] .q-line-writtenoff {
  border-color: rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
}
:root[data-theme="dark"] .wo-note { color: rgba(255, 255, 255, 0.62); }
:root[data-theme="dark"] .wo-flag {
  background: rgba(220, 38, 38, 0.22);
  color: #fca5a5;
}

/* Sale detail: make · model · years · side under each item name. */
.ol-fitment {
  font-size: 12px;
  color: var(--muted, #6b7280);
  margin-top: 2px;
  line-height: 1.3;
}
.q-line-card .ol-fitment {
  margin: 0 0 4px;
}

/* ===== Create Return modal (soft & airy) ===== */
.sales-return-create-modal-card { max-width: 720px; }
.sr-create { display: flex; flex-direction: column; gap: 14px; }
.sr-create-sub { font-size: 13px; color: var(--muted, #6b7280); margin-top: -4px; }
.sr-create-doc { font-weight: 700; color: var(--text, #0f1b27); }
.sr-create-dot { margin: 0 6px; }
.sr-create-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted, #6b7280);
}
.sr-link {
  background: none; border: 0; padding: 0; min-height: 0;
  color: var(--accent, #3b5bdb); font-size: 13px; font-weight: 600;
  text-transform: none; letter-spacing: 0; cursor: pointer;
}
.sr-link:hover { text-decoration: underline; }
.sr-lines { display: flex; flex-direction: column; gap: 8px; }
.sr-line {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--p-line, #e7ecf1); border-radius: 12px;
  background: var(--panel, #fff);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.sr-line.is-selected {
  border-color: #b9c7f5; background: #f5f7ff;
  box-shadow: inset 3px 0 0 var(--accent, #3b5bdb);
}
.sr-line-info { flex: 1 1 auto; min-width: 0; }
.sr-line-title { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.sr-line-sku { font-weight: 700; font-size: 14px; white-space: nowrap; }
.sr-line-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-line-meta { font-size: 12px; color: var(--muted, #6b7280); margin-top: 3px; }
.sr-stepper { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.sr-step {
  width: 34px; height: 34px; min-height: 0; padding: 0;
  border: 1px solid var(--p-line, #e7ecf1); border-radius: 10px;
  background: #f7f9fb; color: var(--text, #0f1b27);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.sr-step:hover { background: #eef2f7; }
.sr-stepper input[type="number"] {
  width: 48px; height: 34px; padding: 0 4px; box-sizing: border-box;
  text-align: center; font-size: 15px; font-weight: 600;
  border: 1px solid var(--p-line, #e7ecf1); border-radius: 10px;
  -moz-appearance: textfield;
}
.sr-stepper input[type="number"]::-webkit-outer-spin-button,
.sr-stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sr-max { font-size: 12px; color: var(--muted, #6b7280); margin-left: 4px; min-width: 34px; }
.sr-note { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.sr-note em { font-style: normal; font-weight: 400; color: var(--muted, #6b7280); margin-left: 4px; }
.sr-note textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--p-line, #e7ecf1); border-radius: 10px; padding: 8px 10px;
  font: inherit; font-weight: 400;
}
.sr-actions { align-items: center; margin-top: 0; padding-top: 14px; border-top: 1px solid var(--p-line, #e7ecf1); }
.sr-summary { margin-right: auto; font-size: 14px; color: var(--muted, #6b7280); }
.sr-summary b { color: var(--text, #0f1b27); }
.sales-return-create-error:not(.hidden) {
  padding: 8px 12px; border-radius: 10px; background: #fdecec; color: #9b2c2c; font-size: 13px;
}

@media (max-width: 640px) {
  .sr-line { flex-direction: column; align-items: stretch; gap: 10px; }
  .sr-line-title { flex-direction: column; gap: 2px; }
  .sr-line-name { white-space: normal; }
  .sr-stepper { justify-content: flex-start; }
  .sr-step { width: 44px; height: 44px; }
  .sr-stepper input[type="number"] { width: 60px; height: 44px; }
  .sr-actions { flex-wrap: wrap; }
  .sr-summary { flex: 1 1 100%; }
}
/* Beats the phone-wide button sizing, which blew this link up to 16px+. */
#appShell .sr-create-head .sr-link, .sr-create-head .sr-link { font-size: 13px; min-height: 0; padding: 0; white-space: nowrap; }
.sr-actions #cancelSalesReturnCreateBtn {
  background: #fff; color: var(--text, #0f1b27);
  border: 1px solid var(--p-line, #e2e8f0);
}
.sr-actions #cancelSalesReturnCreateBtn:hover { background: #f5f7fa; }

/* ===== Take money from driver (sale) ===== */
.detail-modal.tdm-modal {
  width: min(440px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  background: var(--panel, #fff); border-radius: 16px;
  border: 1px solid var(--p-line, #e7ecf1);
  box-shadow: 0 24px 60px rgba(15, 27, 39, 0.28);
}
.tdm-modal .detail-modal-header { padding: 16px 20px 0; }
.tdm-modal .detail-modal-header h3 { margin: 0; font-size: 18px; }
.tdm-modal .detail-modal-body { padding: 6px 20px 4px; display: flex; flex-direction: column; gap: 12px; }
.tdm-sub { font-size: 13px; color: var(--muted, #6b7280); }
.tdm-rows { display: flex; flex-direction: column; gap: 8px; }
.tdm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--p-line, #e7ecf1); border-radius: 12px;
}
.tdm-who { font-weight: 600; font-size: 14px; }
.tdm-meta { font-size: 12px; color: var(--muted, #6b7280); margin-top: 2px; }
.tdm-amt { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.tdm-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 12px; border-radius: 12px; background: #eef8f1; color: #1d6b3c;
}
.tdm-total strong { font-size: 17px; }
.tdm-warn { padding: 8px 12px; border-radius: 10px; background: #fdf2d9; color: #92600a; font-size: 13px; }
.tdm-error:not(.hidden) { padding: 8px 12px; border-radius: 10px; background: #fdecec; color: #9b2c2c; font-size: 13px; }
.tdm-modal .detail-modal-footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px 18px;
}
.tdm-modal .detail-modal-footer .secondary {
  background: #fff; color: var(--text, #0f1b27); border: 1px solid var(--p-line, #e2e8f0);
}
@media (max-width: 640px) {
  .tdm-modal .detail-modal-footer button[data-act="ok"] { flex: 1 1 auto; min-height: 46px; }
}

/* ===== Check Excel (Sales) ===== */
#excelCheckModal .xc-card { max-width: 860px; }
#excelCheckModal .xc-paste, #excelCheckModal .xc-report { display: flex; flex-direction: column; gap: 12px; }
#excelCheckModal .xc-day { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
#excelCheckModal .xc-day input { border: 1px solid var(--p-line, #e7ecf1); border-radius: 10px; padding: 6px 10px; }
#excelCheckModal .xc-paste textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 220px;
  border: 1px solid var(--p-line, #e7ecf1); border-radius: 12px; padding: 10px 12px;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 12; white-space: pre;
}
#excelCheckModal .xc-hint { font-size: 12px; color: var(--muted, #6b7280); }
#excelCheckModal .xc-error:not(.hidden) { padding: 8px 12px; border-radius: 10px; background: #fdecec; color: #9b2c2c; font-size: 13px; }
#excelCheckModal .xc-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 12px; border-top: 1px solid var(--p-line, #e7ecf1); }
#excelCheckModal .xc-actions .secondary { background: #fff; color: var(--text, #0f1b27); border: 1px solid var(--p-line, #e2e8f0); }
#excelCheckModal .xc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#excelCheckModal .xc-tile { border: 1px solid var(--p-line, #e7ecf1); border-radius: 12px; padding: 12px 14px; }
#excelCheckModal .xc-tile-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #6b7280); }
#excelCheckModal .xc-tile-val { font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
#excelCheckModal .xc-tile-sub { font-size: 12px; color: var(--muted, #6b7280); margin-top: 2px; }
#excelCheckModal .xc-tile.is-ok { background: #eef8f1; border-color: #c6e6d1; }
#excelCheckModal .xc-tile.is-ok .xc-tile-val { color: #1d6b3c; }
#excelCheckModal .xc-tile.is-bad { background: #fdf0f0; border-color: #f2cccc; }
#excelCheckModal .xc-tile.is-bad .xc-tile-val { color: #a53232; }
#excelCheckModal .xc-verdict { padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; }
#excelCheckModal .xc-verdict.is-ok { background: #eef8f1; color: #1d6b3c; }
#excelCheckModal .xc-verdict.is-bad { background: #fdf2d9; color: #7a4f08; }
#excelCheckModal .xc-sec { border: 1px solid var(--p-line, #e7ecf1); border-radius: 12px; overflow: hidden; }
#excelCheckModal .xc-sec > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none;
}
#excelCheckModal .xc-sec > summary::-webkit-details-marker { display: none; }
#excelCheckModal .xc-sec-n { min-width: 24px; padding: 1px 8px; border-radius: 999px; font-size: 12px; text-align: center; }
#excelCheckModal .xc-bad > summary { background: #fdf0f0; color: #a53232; }
#excelCheckModal .xc-bad .xc-sec-n { background: #a53232; color: #fff; }
#excelCheckModal .xc-warn > summary { background: #fdf6e7; color: #8a5a0a; }
#excelCheckModal .xc-warn .xc-sec-n { background: #c2850f; color: #fff; }
#excelCheckModal .xc-info > summary { background: #f4f6f9; color: #4b5563; }
#excelCheckModal .xc-info .xc-sec-n { background: #9aa4b2; color: #fff; }
#excelCheckModal .xc-why { padding: 8px 14px 0; font-size: 12px; color: var(--muted, #6b7280); }
#excelCheckModal .xc-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 4px; }
#excelCheckModal .xc-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); padding: 6px 14px; }
#excelCheckModal .xc-table td { padding: 7px 14px; border-top: 1px solid #f0f3f6; }
#excelCheckModal .xc-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
#excelCheckModal .xc-doc, #excelCheckModal .xc-doc {
  background: none; border: 0; padding: 0; min-height: 0; font: inherit; font-size: 13px;
  color: var(--accent, #3b5bdb); font-weight: 600; cursor: pointer;
}
#excelCheckModal .xc-doc:hover { text-decoration: underline; }
#excelCheckModal .xc-note { font-size: 12px; color: var(--muted, #6b7280); }
@media (max-width: 640px) {
  #excelCheckModal .xc-tiles { grid-template-columns: 1fr 1fr; }
  #excelCheckModal .xc-tiles .xc-tile:last-child { grid-column: 1 / -1; }
}
#excelCheckModal .xc-doc, #excelCheckModal .xc-doc { white-space: nowrap; }
#excelCheckModal .xc-table td.xc-name { font-size: 12px; color: var(--muted, #6b7280); max-width: 260px; }
@media (max-width: 640px) {
  #excelCheckModal .xc-table .xc-name { display: none; }
  #excelCheckModal .xc-table th, #excelCheckModal .xc-table td { padding-left: 10px; padding-right: 10px; }
}
#excelCheckModal .xc-how { font-size: 12px; color: var(--muted, #6b7280); white-space: nowrap; }

/* Live Excel chip on the Sales page. */
.xl-chip, #appShell .xl-chip {
  border-radius: 999px; padding: 5px 12px; min-height: 0; font-size: 12px; font-weight: 600;
  border: 1px solid #c9d3f5; background: #f3f5ff; color: #3b5bdb; cursor: pointer; white-space: nowrap;
}
.xl-chip:hover, #appShell .xl-chip:hover { background: #e8ecff; }
.xl-chip[hidden] { display: none !important; }

/* ===== Check Excel vs App (shared popup: excel_live.js) ===== */
#xlModal .xl-card { max-width: 920px; }
#xlModal .xl-loading { padding: 30px 10px; text-align: center; color: var(--muted, #6b7280); font-size: 14px; }
#xlModal .xl-error { padding: 10px 14px; border-radius: 10px; background: #fdecec; color: #9b2c2c; font-size: 13px; }
#xlModal .xl-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
#xlModal .xl-tab {
  display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 6px 12px;
  border: 1px solid var(--p-line, #e2e8f0); border-radius: 999px; background: #fff;
  color: var(--text, #0f1b27); font-size: 13px; font-weight: 600; cursor: pointer;
}
#xlModal .xl-tab.is-on { background: var(--accent, #3b5bdb); border-color: var(--accent, #3b5bdb); color: #fff; }
#xlModal .xl-n { min-width: 18px; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 18px; text-align: center; }
#xlModal .xl-n.is-bad { background: #fde2e2; color: #a53232; }
#xlModal .xl-n.is-ok { background: #e4f2e8; color: #1d6b3c; }
#xlModal .xl-tab.is-on .xl-n { background: rgba(255,255,255,.25); color: #fff; }
#xlModal #xlPane { display: flex; flex-direction: column; gap: 12px; }
#xlModal .xl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#xlModal .xl-tile { border: 1px solid var(--p-line, #e7ecf1); border-radius: 12px; padding: 12px 14px; }
#xlModal .xl-tl { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #6b7280); }
#xlModal .xl-tv { font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
#xlModal .xl-ts { font-size: 12px; color: var(--muted, #6b7280); margin-top: 2px; }
#xlModal .xl-tile.is-ok { background: #eef8f1; border-color: #c6e6d1; }
#xlModal .xl-tile.is-ok .xl-tv { color: #1d6b3c; }
#xlModal .xl-tile.is-bad { background: #fdf0f0; border-color: #f2cccc; }
#xlModal .xl-tile.is-bad .xl-tv { color: #a53232; }
#xlModal .xl-period { font-size: 12px; color: var(--muted, #6b7280); }
#xlModal .xl-verdict { padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; }
#xlModal .xl-verdict.is-ok { background: #eef8f1; color: #1d6b3c; }
#xlModal .xl-verdict.is-bad { background: #fdf2d9; color: #7a4f08; }
#xlModal .xl-sec { border: 1px solid var(--p-line, #e7ecf1); border-radius: 12px; overflow: hidden; }
#xlModal .xl-sec > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none;
}
#xlModal .xl-sec > summary::-webkit-details-marker { display: none; }
#xlModal .xl-sec-n { min-width: 24px; padding: 1px 8px; border-radius: 999px; font-size: 12px; text-align: center; }
#xlModal .xl-bad > summary { background: #fdf0f0; color: #a53232; }
#xlModal .xl-bad .xl-sec-n { background: #a53232; color: #fff; }
#xlModal .xl-warn > summary { background: #fdf6e7; color: #8a5a0a; }
#xlModal .xl-warn .xl-sec-n { background: #c2850f; color: #fff; }
#xlModal .xl-info > summary { background: #f4f6f9; color: #4b5563; }
#xlModal .xl-info .xl-sec-n { background: #9aa4b2; color: #fff; }
#xlModal .xl-why { padding: 8px 14px 0; font-size: 12px; color: var(--muted, #6b7280); }
#xlModal .xl-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 4px; }
#xlModal .xl-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); padding: 6px 12px; white-space: nowrap; }
#xlModal .xl-table td { padding: 7px 12px; border-top: 1px solid #f0f3f6; }
#xlModal .xl-num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
#xlModal .xl-name, #xlModal .xl-dates, #xlModal .xl-how { font-size: 12px; color: var(--muted, #6b7280); }
#xlModal .xl-doc { background: none; border: 0; padding: 0; min-height: 0; font: inherit; font-size: 13px; color: var(--accent, #3b5bdb); font-weight: 600; cursor: pointer; white-space: nowrap; }
#xlModal .xl-doc:hover { text-decoration: underline; }
#xlModal .xl-note { font-size: 12px; color: var(--muted, #6b7280); padding: 0 14px 8px; }
#xlModal .xl-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--p-line, #e7ecf1); }
#xlModal .xl-actions .secondary { background: #fff; color: var(--text, #0f1b27); border: 1px solid var(--p-line, #e2e8f0); }
@media (max-width: 640px) {
  #xlModal .xl-tiles { grid-template-columns: 1fr 1fr; }
  #xlModal .xl-tiles .xl-tile:last-child { grid-column: 1 / -1; }
  #xlModal .xl-name, #xlModal .xl-dates { display: none; }
  #xlModal .xl-table th, #xlModal .xl-table td { padding-left: 8px; padding-right: 8px; }
}
#xlModal .xl-doc-list { border: 1px solid var(--p-line, #e7ecf1); border-radius: 12px; overflow: hidden; }
#xlModal .xl-doc-group + .xl-doc-group { border-top: 1px solid var(--p-line, #e7ecf1); }
#xlModal .xl-doc-group > summary {
  display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(90px, 1fr) minmax(150px, 1.3fr) auto;
  gap: 10px; align-items: center; padding: 10px 14px; cursor: pointer; list-style: none; font-size: 13px;
}
#xlModal .xl-doc-group > summary::-webkit-details-marker { display: none; }
#xlModal .xl-doc-group > summary:hover { background: #f7f9fc; }
#xlModal .xl-doc-group[open] > summary { background: #f3f5ff; }
#xlModal .xl-dg-doc { font-weight: 700; }
#xlModal .xl-dg-doc::before { content: "▸ "; color: var(--muted, #6b7280); }
#xlModal .xl-doc-group[open] .xl-dg-doc::before { content: "▾ "; }
#xlModal .xl-dg-sub { color: var(--muted, #6b7280); }
#xlModal .xl-dg-what { color: #a53232; font-weight: 600; }
#xlModal .xl-dg-n { text-align: right; color: var(--text, #0f1b27); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  #xlModal .xl-doc-group > summary { grid-template-columns: 1fr auto; }
  #xlModal .xl-dg-sub { display: none; }
}
#xlModal .xl-applink { color: var(--accent, #3b5bdb); font-weight: 600; text-decoration: none; white-space: nowrap; }
#xlModal .xl-applink:hover { text-decoration: underline; }
/* Check Excel vs App: sales pane + stock mismatch view */
#xlModal .xl-pane { display: flex; flex-direction: column; gap: 12px; }
#xlModal .xl-dim { color: var(--muted, #6b7280); font-size: 12px; }
#xlModal .xl-stockbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: #f3f5ff; border: 1px solid #c9d3f5;
  font-size: 13px; color: #34418f;
}
#xlModal .xl-daybar { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 12px; padding-left: 72px; }
#xlModal .xl-daynav {
  min-height: 0; width: 36px; height: 36px; padding: 0; border-radius: 10px; border: 1px solid var(--p-line, #e2e8f0);
  background: #fff; color: var(--text, #0f1b27); font-size: 20px; line-height: 1; cursor: pointer;
}
#xlModal .xl-daynav:hover:not(:disabled) { background: #f3f5ff; border-color: #c9d3f5; }
#xlModal .xl-daynav:disabled { opacity: .35; cursor: default; }
#xlModal .xl-daypick {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 150px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--p-line, #e2e8f0);
  background: #fff; font-size: 14px; font-weight: 600; color: var(--text, #0f1b27); cursor: pointer;
}
#xlModal .xl-daypick::after { content: "📅"; font-size: 13px; }
#xlModal .xl-daypick:hover { background: #f3f5ff; border-color: #c9d3f5; }
#xlModal .xl-daypick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
#xlModal .xl-daytoday {
  min-height: 0; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--p-line, #e2e8f0);
  background: #fff; color: var(--accent, #3b5bdb); font-size: 13px; font-weight: 600; cursor: pointer;
}
#xlModal .xl-filters { display: flex; flex-wrap: wrap; gap: 6px; }
#xlModal .xl-filter {
  min-height: 0; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--p-line, #e2e8f0);
  background: #fff; color: var(--text, #0f1b27); font-size: 12px; cursor: pointer;
}
#xlModal .xl-filter.is-on { background: var(--accent, #3b5bdb); border-color: var(--accent, #3b5bdb); color: #fff; }
#xlModal .xl-items { border: 1px solid var(--p-line, #e7ecf1); border-radius: 12px; overflow: hidden; }
#xlModal .xl-item + .xl-item { border-top: 1px solid var(--p-line, #e7ecf1); }
#xlModal .xl-item > summary {
  display: grid; grid-template-columns: minmax(160px, 1.6fr) minmax(170px, 1.4fr) 60px 130px;
  gap: 10px; align-items: center; padding: 9px 14px; cursor: pointer; list-style: none; font-size: 13px;
}
#xlModal .xl-item > summary::-webkit-details-marker { display: none; }
#xlModal .xl-item > summary:hover { background: #f7f9fc; }
#xlModal .xl-item[open] > summary { background: #f3f5ff; }
#xlModal .xl-it-sku { display: flex; flex-direction: column; min-width: 0; }
#xlModal .xl-it-sku .xl-dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#xlModal .xl-it-wh { font-size: 12px; color: var(--muted, #6b7280); font-variant-numeric: tabular-nums; line-height: 1.4; }
#xlModal .xl-it-diff { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
#xlModal .xl-badge { justify-self: end; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
#xlModal .xl-badge.xl-warn { background: #fdf2d9; color: #8a5a0a; }
#xlModal .xl-badge.xl-info { background: #e8ecff; color: #3b5bdb; }
#xlModal .xl-badge.xl-bad { background: #fde2e2; color: #a53232; }
#xlModal .xl-item-body { padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 10px; background: #fbfcfe; }
#xlModal .xl-reason { border: 1px solid var(--p-line, #e7ecf1); border-radius: 10px; padding: 8px 12px; background: #fff; }
#xlModal .xl-reason-head { font-size: 13px; margin-bottom: 6px; }
#xlModal .xl-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#xlModal .xl-side-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted, #6b7280); margin-bottom: 3px; }
#xlModal .xl-sides ul { margin: 0; padding: 0; list-style: none; font-size: 12px; }
#xlModal .xl-sides li { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; flex-wrap: wrap; }
#xlModal .xl-ev-day { color: var(--muted, #6b7280); min-width: 38px; }
#xlModal .xl-ev-qty { font-weight: 700; min-width: 28px; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  #xlModal .xl-item > summary { grid-template-columns: 1fr auto; }
  #xlModal .xl-it-wh { grid-column: 1 / -1; order: 3; }
  #xlModal .xl-sides { grid-template-columns: 1fr; }
}
#xlModal .xl-gap { display: inline-block; padding: 0 6px; border-radius: 6px; background: #f1f3f7; font-weight: 700; font-variant-numeric: tabular-nums; }
#xlModal .xl-headline { font-size: 15px; font-weight: 700; padding: 4px 0 2px; }
#xlModal .xl-grp { border: 1px solid var(--p-line, #e7ecf1); border-radius: 10px; padding: 8px 12px; background: #fff; }
#xlModal .xl-grp-head { font-size: 14px; display: flex; align-items: center; gap: 6px; }
#xlModal .xl-grp-n { color: var(--muted, #6b7280); }
#xlModal .xl-grp-text { font-size: 13px; margin-top: 4px; color: var(--text, #0f1b27); }
#xlModal .xl-lines { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#xlModal .xl-lines li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
#xlModal .xl-ln-when { min-width: 92px; color: var(--muted, #6b7280); font-variant-numeric: tabular-nums; }
#xlModal .xl-ln-sides { flex: 1 1 340px; }
#xlModal .xl-hint { font-size: 12px; font-weight: 600; white-space: nowrap; }
#xlModal .xl-hint-different-amount { color: #8a5a0a; }
#xlModal .xl-hint-not-in-Excel, #xlModal .xl-hint-not-in-the-app { color: #a53232; }
#xlModal .xl-sum { font-size: 13px; padding: 2px 2px 0; font-variant-numeric: tabular-nums; }
#xlModal .xl-where { border: 1px dashed var(--p-line, #dfe5ec); border-radius: 10px; padding: 6px 12px; background: #fff; }
#xlModal .xl-where > summary { cursor: pointer; font-size: 13px; }

/* Customer: full address in search results, under the chosen customer, and Edit. */
.combo-option .cust-opt-name { display: block; }
.combo-option .cust-opt-addr { display: block; font-size: 12px; color: var(--muted, #6b7280); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cust-picked { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  margin-top: 6px; padding: 8px 10px; border: 1px solid var(--p-line, #e7ecf1); border-radius: 10px;
  background: #f8fafc; font-size: 13px; line-height: 1.4; color: var(--text, #0f1b27); font-weight: 400;
  text-transform: none; letter-spacing: normal; }
.cust-picked:empty { display: none; }
.cust-picked-addr { min-width: 0; overflow-wrap: anywhere; }
.cust-edit-btn, #appShell .cust-edit-btn {
  flex: 0 0 auto; min-height: 0; padding: 4px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--p-line, #dbe3ea); background: #fff; color: var(--accent, #3b5bdb); cursor: pointer; white-space: nowrap;
}
.cust-edit-btn:hover { background: #f3f5ff; }