:root {
  --ink: #12141c;
  --ink-muted: #62697a;
  --ink-faint: #98a0ad;
  --line: #e7e9ee;
  --line-strong: #d7dbe3;
  --surface: #ffffff;
  --bg: #f7f8fa;
  --accent: #3b67d6;
  --accent-ink: #2748a3;
  --accent-soft: #eaf0fd;
  --good: #1a8354;
  --good-soft: #e4f6ec;
  --warn: #a9660a;
  --warn-soft: #fcf1de;
  --risk: #c33f3f;
  --risk-soft: #fceaea;
  --coral: #b04a2e;
  --coral-soft: #f8e9e2;
  --avatar-bg: #6c4cd9;

  /* Navigation menu palette - light, matching the rest of the app (dark navy and charcoal cuts
     were both rejected in review). The icon/group/active-rail structure stays; only the surface
     is the app's own. */
  --sidebar-bg: #ffffff;
  --sidebar-ink: #62697a;
  --sidebar-ink-faint: #98a0ad;
  --sidebar-line: #e7e9ee;
  --sidebar-active: #eaf0fd;
  --sidebar-accent: #3b67d6;
  --shadow-sm: 0 1px 2px rgba(18, 20, 28, 0.05);
  --shadow-md: 0 10px 28px rgba(18, 20, 28, 0.08);
  --shadow-lg: 0 24px 64px rgba(10, 12, 20, 0.28);
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

input, select, button {
  font: inherit;
  padding: 8px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
}

input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

input::placeholder { color: var(--ink-faint); }

button {
  cursor: pointer;
  font-weight: 600;
  font-size: 13.5px;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}
button:active { transform: translateY(1px); }

button.primary { background: var(--accent); color: white; border-color: var(--accent); }
button.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }

button.secondary { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }
button.secondary:hover { background: #dbe6fb; }

button.danger { background: var(--risk-soft); border-color: var(--risk-soft); color: var(--risk); }
button.danger:hover { background: #f7d7d7; }

button.small { padding: 5px 9px; font-size: 12px; }
button.full-width { width: 100%; }

button.icon-btn {
  padding: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button.icon-btn svg { width: 15px; height: 15px; flex: none; }

button.icon-btn.icon-btn-danger { background: var(--risk-soft); border-color: var(--risk-soft); color: var(--risk); }
button.icon-btn.icon-btn-danger:hover { background: #f7d7d7; }

.error-text { color: var(--risk); font-size: 13px; }
.badge { font-size: 11px; background: var(--accent-soft); color: var(--accent-ink); padding: 3px 9px; border-radius: 20px; font-weight: 600; letter-spacing: 0.02em; }
.badge-next { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-faint); background: var(--bg); border: 1px solid var(--line); padding: 2px 7px; border-radius: 20px; margin-left: 6px; }

/* ---- Status pills (used in list tables) ---- */

.pill {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.pill-good { background: var(--good-soft); color: var(--good); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
.pill-risk { background: var(--risk-soft); color: var(--risk); }
.pill-neutral { background: var(--bg); color: var(--ink-muted); }

/* ---- Chips ---- */

.chip {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 7px 13px;
  border-radius: 8px;
  white-space: nowrap;
}

/* ---- Brand / logo ---- */

.logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--accent);
  color: white;
  font-weight: 800;
  font-size: 13px;
  border-radius: 7px;
  margin-right: 2px;
  vertical-align: middle;
}

/* ---- Login screen ---- */

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 20%, #1e2740 0%, #12141c 60%);
}

.login-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 40px 36px;
  width: 340px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: var(--shadow-lg);
}

.login-brand {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.login-brand .logo-badge { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }

.login-sub {
  color: var(--ink-muted);
  font-size: 14px;
  margin-top: -6px;
  margin-bottom: 8px;
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
}

.login-card input { width: 100%; padding: 10px 12px; }
.login-card button.primary { padding: 10px; font-size: 14px; margin-top: 4px; }

/* ---- App shell ---- */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Sidebar + main column sit side by side below the full-width top strip, so the two read as one
   frame (shared border/background) instead of two separately-bordered boxes meeting at a seam. */
.shell-row {
  display: flex;
  flex: 1;
  min-height: 0;
}

.sidebar {
  width: 232px;
  flex: none;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  color: var(--sidebar-ink);
  display: flex;
  flex-direction: column;
  transition: width 0.18s ease;
  overflow: hidden;
}

/* Desktop drawer: collapsed means gone from the layout (width:0) - the content column reclaims
   the space. Nav rows keep a fixed min-width so they don't reflow mid-collapse; the sidebar's
   overflow:hidden clips them. */
.sidebar > * { min-width: 232px; }
@media (min-width: 901px) {
  .sidebar:not(.open) { width: 0; }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 14px 13px;
  border-bottom: 1px solid var(--sidebar-line);
  min-height: 59px;
  white-space: nowrap;
}
.brand-name { font-weight: 800; font-size: 15px; color: var(--ink); }
.brand-env { display: block; font-size: 10.5px; font-weight: 600; color: var(--sidebar-accent); letter-spacing: 0.05em; text-transform: uppercase; }

.nav-menu {
  list-style: none;
  margin: 0;
  padding: 10px 8px;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-group-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sidebar-ink-faint);
  padding: 12px 10px 5px;
  white-space: nowrap;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sidebar-ink);
  border-radius: 8px;
  white-space: nowrap;
  transition: background-color 0.12s ease;
}
.nav-ico { width: 17px; height: 17px; flex: none; stroke: currentColor; opacity: 0.75; }
.nav-item:hover { background: var(--bg); color: var(--ink); }
.nav-item.active { background: var(--sidebar-active); color: var(--accent-ink); font-weight: 700; }
.nav-item.active .nav-ico { opacity: 1; stroke: var(--sidebar-accent); }
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-accent);
}

/* Upcoming modules: one ghosted cluster at the bottom of the menu, not inline with live rows. */
.nav-soon-divider { border-top: 1px solid var(--sidebar-line); margin: 8px 2px 4px; }
.nav-item-disabled {
  cursor: default;
  color: var(--sidebar-ink-faint);
  font-weight: 500;
}
.nav-item-disabled:hover { background: none; color: var(--sidebar-ink-faint); }
.nav-lock { flex: none; opacity: 0.45; }
.nav-item-disabled .badge-next {
  margin-left: auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--warn);
  background: none;
  border: 1px solid var(--warn);
  border-radius: 4px;
  padding: 0 4px;
}

/* ---- Main column / top bar ---- */

.main-column {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Toolbar over the content column only - the brand lives in the sidebar now, so this strip
   answers "which screen" (title + breadcrumb) and carries search + period. */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  min-height: 59px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-spacer { flex: 1; }

.page-title { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.page-crumb { font-size: 12px; color: var(--ink-faint); margin-top: 1px; }

.topbar-right { display: flex; align-items: center; gap: 12px; }

.omnisearch { position: relative; width: 300px; }
.omnisearch input { width: 100%; padding: 8px 12px 8px 32px; background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398a0ad' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center; border-color: var(--line); }
.omni-results { position: absolute; top: 38px; left: 0; right: 0; width: auto; z-index: 30; }
.omni-results .omni-group-label { padding: 6px 12px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); cursor: default; }
.omni-results .omni-group-label:hover { background: none; }

.avatar-menu { position: relative; }
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: white;
  font-weight: 700;
  font-size: 13px;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-dropdown {
  position: absolute;
  top: 44px;
  right: 0;
  width: 220px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 14px;
  z-index: 30;
}
.avatar-dropdown-user { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; font-size: 13.5px; }

.content {
  flex: 1;
  padding: 28px 32px 60px;
  max-width: 1180px;
}

.view { display: none; }
.view.active { display: block; }

/* ---- KPI dashboard cards ---- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.kpi-label { font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 12.5px; color: var(--ink-muted); margin-top: 4px; }

/* ---- Tabs ---- */

.tabs {
  display: flex;
  gap: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 2px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-muted);
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Panels / tables (shared across views) ---- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.panel.wide { max-width: none; }

.panel h2 { font-size: 14.5px; font-weight: 700; margin: 0 0 14px; color: var(--ink); }

.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.panel-header h2 { margin: 0; }

.result-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  background: var(--surface);
}
.result-list:empty { border: none; box-shadow: none; }
.result-list li {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.result-list li:last-child { border-bottom: none; }
.result-list li:hover { background: var(--accent-soft); }

#ntAllocBody input.alloc-input, #stmtCreditAllocBody input.alloc-input { width: 100px; text-align: right; }
.alloc-cell { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.alloc-cell button.alloc-max-btn { padding: 5px 8px; font-size: 11.5px; }

.table-scroll { overflow-x: auto; }

.lines-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.lines-table th, .lines-table td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.lines-table thead th {
  color: var(--ink-faint);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--line-strong);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.lines-table tbody tr:hover td { background: #fafbfd; }
.lines-table tbody tr:last-child td { border-bottom: none; }

/* ---- New Transaction entry zone (document fields + product search/add, composed into one surface) ---- */

.nt-fields-head { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 10px; }
.nt-entry-divider { height: 1px; background: var(--line); margin: 16px 0; }

.nt-search-wrap { margin-bottom: 10px; }
.nt-search-wrap input { width: 100%; }
#ntProductResults li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#ntProductResults .nt-result-onhand { color: var(--ink-faint); font-size: 12px; }
#ntProductResults .nt-result-price { color: var(--ink-faint); font-variant-numeric: tabular-nums; flex: none; }

.nt-picked-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--accent-soft);
  border-radius: 9px;
  padding: 8px 10px 8px 8px;
  margin-bottom: 14px;
}
.nt-picked-chip { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 160px; }
.nt-picked-swatch {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--surface);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex: none;
}
.nt-picked-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.nt-picked-meta { font-size: 11.5px; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.nt-picked-row label { font-size: 11px; font-weight: 700; color: var(--accent-ink); display: flex; flex-direction: column; gap: 3px; }
.nt-picked-row input { width: 62px; text-align: right; background: var(--surface); }
.nt-picked-row button.primary { flex: none; }

/* ---- New Transaction line items (card layout, replaces a table row per line) ---- */

.nt-line-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.nt-line-card {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
}
.nt-line-swatch {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}
.nt-line-main { min-width: 0; }
.nt-line-name-row { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.nt-line-name { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-line-code { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nt-line-serials-row { margin-top: 4px; }
.nt-line-formula-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nt-line-formula { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.nt-line-formula b { font-weight: 600; }
.nt-line-vat { font-size: 11px; font-weight: 600; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.nt-line-totals { text-align: right; flex: none; }
.nt-line-total { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nt-line-tax { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; margin-top: 1px; white-space: nowrap; }

.nt-line-actions { display: flex; align-items: center; gap: 6px; flex: none; }

.nt-totals-card {
  margin-top: 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
}
.nt-totals-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; min-width: 220px; }
.nt-totals-line { display: flex; justify-content: space-between; width: 100%; gap: 20px; font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.nt-totals-line.grand { font-size: 15px; font-weight: 700; color: var(--ink); padding-top: 6px; margin-top: 2px; border-top: 1px dashed var(--line); }

.actions { margin-top: 16px; display: flex; gap: 10px; }

#saleResult { margin-top: 14px; font-size: 14px; font-weight: 600; }
#saleResult.success { color: var(--good); }
#saleResult.error { color: var(--risk); }

/* Numeric column alignment, per table (columns mean different things per table). */
#tendersBody td:nth-child(3),
#customersBody td:nth-child(4),
#productsBody td:nth-child(3), #productsBody td:nth-child(4),
#historyBody td:nth-child(4),
#dashboardRecentBody td:nth-child(4),
#stmtOpenItemsBody td:nth-child(4), #stmtOpenItemsBody td:nth-child(5), #stmtOpenItemsBody td:nth-child(6), #stmtOpenItemsBody td:nth-child(7),
#stmtHistoryBody td:nth-child(2), #stmtHistoryBody td:nth-child(3), #stmtHistoryBody td:nth-child(4), #stmtHistoryBody td:nth-child(5),
#ntAllocBody td:nth-child(4), #ntAllocBody td:nth-child(5),
#stmtCreditsBody td:nth-child(3), #stmtCreditsBody td:nth-child(4), #stmtCreditsBody td:nth-child(5),
#stmtCreditAllocBody td:nth-child(4), #stmtCreditAllocBody td:nth-child(5),
#txnBody td:nth-child(4), #txnBody td:nth-child(5), #txnBody td:nth-child(6),
#atxnBody td:nth-child(5), #atxnBody td:nth-child(6), #atxnBody td:nth-child(7) {
  text-align: right;
}
#customersBody td:nth-child(5), #historyBody td:nth-child(5), #dashboardRecentBody td:nth-child(5) { text-align: center; }

/* ---- Sales History / list views ---- */

.filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: relative; }
.filter-row .result-list { position: absolute; top: 38px; left: 0; width: 300px; z-index: 5; }
.filter-row label { font-size: 13px; color: var(--ink-muted); display: flex; gap: 5px; align-items: center; }

.filter-label { font-size: 13px; color: var(--ink-faint); margin-top: 10px; padding: 4px 0; }

.muted-note { font-size: 13px; color: var(--ink-muted); background: var(--bg); padding: 10px 14px; border-radius: 8px; margin: 10px 0; border-left: 3px solid var(--line-strong); }

.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-muted); margin: 0 0 3px; }

.alloc-modal-title { font-size: 17px; font-weight: 700; margin: 0 0 14px; color: var(--ink); }

.stat-row { display: flex; gap: 10px; margin-bottom: 16px; }
.stat-tile { flex: 1; background: var(--bg); border-radius: 8px; padding: 10px 14px; }
.stat-label { font-size: 11.5px; color: var(--ink-muted); margin-bottom: 3px; }
.stat-value { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-value.is-done { color: var(--good); }

/* ---- Maintain (list + form) views ---- */

.list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.list-toolbar input { flex: 1; max-width: 340px; }

.pf-col-select { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); margin: 2px 0 10px; }
.pf-col-select select { font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink); }

/* Category is an optional additional column - present in the DOM but hidden until the toggle above
   turns it on (#productsTable.show-category), rather than re-rendering the table on toggle. */
#productsTable .col-category { display: none; }
#productsTable.show-category .col-category { display: table-cell; }

.lines-table td.row-actions { text-align: right; }
.lines-table tr.clickable-row { cursor: pointer; }
.lines-table tr.clickable-row:hover td { background: var(--accent-soft); border-bottom-color: #d3e0fa; }
.lines-table tr.row-selected td { background: var(--accent-soft); border-bottom-color: #d3e0fa; box-shadow: inset 3px 0 0 var(--accent); }

/* Transaction list status/type markers, all anchored on the reference cell so they still read
   once Type is hidden on phone (see the #txnTable/#atxnTable column-hiding rules below): a status
   dot (green Valid / amber On Hold) plus a left-edge stripe reinforcing On Hold, and a Dr/Cr chip
   for debit- vs credit-side (Dbcr=1 vs 2: Credit Note/Credit Entry/Receipt are credit-side). */
.txn-ref-inner { display: inline-flex; align-items: center; gap: 8px; }

.txn-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.txn-status-dot.is-valid { background: var(--good); }
.txn-status-dot.is-hold { background: var(--warn); }

.txn-drcr {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 6px; flex: none;
}
.txn-drcr.is-dr { background: var(--accent-soft); color: var(--accent-ink); }
.txn-drcr.is-cr { background: var(--coral-soft); color: var(--coral); }

.lines-table tr.txn-row-hold td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* Rows with two action buttons (e.g. Edit + Allocate) were wrapping onto a second line while
   single-button rows stayed on one, so adjacent rows ended up at two different heights - keep the
   action group on one line and let the table's own .table-scroll wrapper handle any overflow. */
.lines-table td.txn-actions { white-space: nowrap; }

/* ---- Full-page record view (Odoo-style: breadcrumb + actions + sectioned form) ---- */

.record-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  margin-bottom: 4px;
}
.breadcrumb-link {
  background: none;
  border: none;
  padding: 0;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--accent);
}
.breadcrumb-link:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--ink-faint); }
#customerRecordCrumb, #productRecordCrumb { color: var(--ink-muted); font-weight: 500; }

.record-actions-bar {
  display: flex;
  gap: 10px;
  margin: 12px 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.record-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 6px 26px 26px;
  max-width: 780px;
}

.record-section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.record-section:last-child { border-bottom: none; }
.record-section h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}

.record-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px 20px;
}
.record-grid label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-muted);
}
.record-grid input, .record-grid select { width: 100%; }
.record-grid label.pf-field-wide { grid-column: span 2; }
.record-grid label.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.record-grid label.checkbox-label input { width: auto; }

/* ---- Customer form: header pane (Name/Currency/BRN/Blocked, visible without scrolling - same
   "top pane" convention as the product form's stock card) and the Contact 1 subgroup ---- */

.cf-header-pane {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 4px;
}
.cf-header-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 160px; }
.cf-header-field.cf-header-field-wide { flex: 2; min-width: 220px; }
.cf-header-field span:first-child { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-faint); }
.cf-header-field input, .cf-header-field select { width: 100%; }
.cf-currency-lock-hint { vertical-align: -1px; margin-left: 3px; }
.cf-blocked-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700;
  padding: 9px 15px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer; user-select: none; flex: none;
}
.cf-blocked-toggle input { margin: 0; }
.cf-blocked-toggle.is-blocked { background: var(--risk-soft); border-color: var(--risk-soft); color: var(--risk); }

.contact-subgroup { border: 1px dashed var(--line-strong); border-radius: 9px; padding: 14px 16px 4px; margin-top: 16px; }
.contact-subgroup-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); margin-bottom: 12px; }

/* ---- Product form ---- */

.record-section-sub {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-faint);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 1px 8px;
  border-radius: 20px;
  margin-left: 8px;
}

/* ---- Stock: status pill (list column + form summary card) ---- */

.stock-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: 3px 10px; border-radius: 20px;
}
.stock-pill .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.stock-pill.in-stock { background: var(--good-soft); color: var(--good); }
.stock-pill.in-stock .dot { background: var(--good); }
.stock-pill.low-stock { background: var(--warn-soft); color: var(--warn); }
.stock-pill.low-stock .dot { background: var(--warn); }
.stock-pill.out-stock { background: var(--risk-soft); color: var(--risk); }
.stock-pill.out-stock .dot { background: var(--risk); }

.stock-loc-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 2px; margin-left: 4px;
  cursor: pointer; color: var(--ink-faint); vertical-align: middle; border-radius: 4px;
}
.stock-loc-icon-btn:hover { color: var(--accent); background: var(--accent-soft); }

.stock-loc-popover {
  position: fixed;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 10px 12px;
  min-width: 180px;
  font-size: 12.5px;
}
.stock-loc-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); margin-bottom: 6px; }
.stock-loc-popover table { width: 100%; border-collapse: collapse; }
.stock-loc-popover td { padding: 3px 0; color: var(--ink); }
.stock-loc-popover td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.stock-loc-popover .stock-loc-empty { color: var(--ink-faint); }

.pf-stock-card {
  display: flex; align-items: center; gap: 22px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.pf-stock-figure { display: flex; flex-direction: column; gap: 2px; flex: none; }
.pf-stock-value { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
.pf-stock-unit { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; }
.pf-stock-divider { width: 1px; align-self: stretch; background: var(--line); flex: none; }
.pf-stock-meta { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pf-stock-title-row { display: flex; align-items: center; gap: 10px; }
.pf-stock-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); }
.pf-stock-sub { font-size: 12.5px; color: var(--ink-muted); }
.pf-stock-sub strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.pf-stock-card.new-product { background: var(--bg); border-style: dashed; }
.pf-stock-card.new-product .pf-stock-value { color: var(--ink-faint); }

/* ---- Top-pane status flags (currently just Blocked) - deliberately above General so a blocked
   item can't be missed by scrolling past it, unlike the rest of Status at the bottom of the form. ---- */

.pf-top-flags { display: flex; justify-content: flex-end; margin-top: -6px; }
.pf-blocked-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700;
  padding: 5px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink-muted);
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.pf-blocked-toggle input { margin: 0; }
.pf-blocked-toggle.is-blocked { background: var(--risk-soft); border-color: var(--risk-soft); color: var(--risk); }

/* ---- Pricing: lead price card + wholesale tier cards, with live margin vs. cost ---- */

.pf-price-lead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 15px;
  background: var(--accent-soft);
  border-radius: 9px;
  margin-bottom: 12px;
}
.pf-price-lead-top { display: flex; align-items: center; gap: 14px; }
.pf-price-lead-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--accent-ink); }
.pf-price-lead-sub { font-size: 10.5px; color: var(--accent-ink); opacity: 0.75; margin-top: 1px; }
.pf-price-lead-input {
  margin-left: auto;
  width: 140px;
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 6px 10px;
  background: var(--surface);
  color: var(--ink);
}
.pf-price-lead-margin { font-size: 10.5px; font-weight: 700; background: var(--good-soft); color: var(--good); padding: 3px 9px; border-radius: 20px; flex: none; }

.pf-price-tax-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.pf-price-tax-row label { font-size: 10.5px; font-weight: 600; color: var(--accent-ink); opacity: 0.85; }
.pf-price-tax-row input { width: 140px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; border: 1px solid var(--line-strong); border-radius: 7px; padding: 5px 10px; background: var(--surface); color: var(--ink); }
.pf-tier-card .pf-price-tax-row { justify-content: space-between; margin-top: 6px; }
.pf-tier-card .pf-price-tax-row input { width: auto; flex: 1; min-width: 0; font-size: 12.5px; padding: 4px 8px; }

.pf-tier-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); margin: 4px 0 8px; }
.pf-tier-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.pf-tier-card { border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px; }
.pf-tier-label { font-size: 11px; font-weight: 600; color: var(--ink-muted); margin-bottom: 5px; }
.pf-tier-value-row { display: flex; align-items: center; gap: 8px; }
.pf-tier-input { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 8px; }
.pf-tier-margin { font-size: 10px; font-weight: 700; color: var(--warn); background: var(--warn-soft); padding: 2px 7px; border-radius: 20px; flex: none; }

.pf-cost-row { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pf-cost-row label { font-size: 11.5px; font-weight: 600; color: var(--ink-muted); flex: 1; }
.pf-cost-row input { max-width: 140px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; border: 1px solid var(--line-strong); border-radius: 6px; }

/* ---- Custom fields: mandatory (per INParameter) grouped and visually distinct from optional ---- */

.pf-req-block {
  border: 1px solid var(--accent-soft);
  background: var(--accent-soft);
  border-radius: 9px;
  padding: 14px 15px 12px;
  margin-bottom: 16px;
}
.pf-req-title {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-ink);
  margin-bottom: 10px;
}
.pf-req-star { color: var(--risk); margin-left: 2px; }
.pf-req-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 16px; }
.pf-req-grid label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.pf-req-grid input:not(.pf-combo-input) { width: 100%; padding: 7px 9px; border: 1px solid var(--accent); border-radius: 7px; }

.pf-combo { position: relative; }
.pf-combo-input {
  width: 100%;
  padding: 7px 60px 7px 9px;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}
.pf-combo-count {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--accent-ink);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 20px;
  pointer-events: none;
  white-space: nowrap;
}
.pf-combo-list {
  position: absolute;
  z-index: 10;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
}
.pf-combo-list li {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  cursor: pointer;
}
.pf-combo-list li:hover { background: var(--accent-soft); color: var(--accent-ink); }
.pf-combo-list li.pf-combo-empty { color: var(--ink-faint); cursor: default; }
.pf-combo-list li.pf-combo-empty:hover { background: none; color: var(--ink-faint); }

.pf-opt-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); margin: 2px 0 10px; }
.pf-opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 16px; }
.pf-opt-field label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-faint); margin-bottom: 5px; }
.pf-opt-tag { font-size: 8.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); background: var(--bg); border: 1px solid var(--line); padding: 1px 6px; border-radius: 20px; }
.pf-opt-field input, .pf-opt-field select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-muted); font-size: 12px; }
.pf-opt-field.filled label { color: var(--ink-muted); }
.pf-opt-field.filled input, .pf-opt-field.filled select { color: var(--ink); }

/* ---- Status: ready-to-save badge ---- */

.pf-status-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pf-status-row .record-grid { flex: 1; }
.pf-ready-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--good); background: var(--good-soft); padding: 5px 11px; border-radius: 20px; flex: none; }

/* ---- Responsive: tablet / phone ---- */

.hamburger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: none;
  padding: 0;
  margin-right: 4px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink-muted);
}
.hamburger-btn:hover { background: var(--bg); color: var(--ink); }

/* Backdrop only ever dims content on tablet/phone (see media query below) - on desktop the
   sidebar collapses out of the flex row instead of overlaying, so nothing needs dimming there. */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 20, 0.4);
  z-index: 40;
}

@media (max-width: 900px) {
  .sidebar-backdrop.open { display: block; }

  .content { max-width: 100%; }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 260px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }

  .omnisearch { width: 220px; }
}

@media (max-width: 640px) {
  .content { padding: 16px 16px 40px; }

  .topbar { padding: 10px 14px; flex-wrap: wrap; row-gap: 10px; }
  .page-head { padding: 12px 16px 4px; }
  .page-title { font-size: 16.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .topbar-right { width: 100%; flex-wrap: wrap; row-gap: 8px; }
  .omnisearch { order: 1; width: 100%; flex: 1 1 100%; }
  #periodChip { order: 2; }
  .avatar-menu { order: 3; margin-left: auto; }

  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
  .kpi-card { padding: 14px 16px; }
  .kpi-value { font-size: 22px; }

  .panel { padding: 16px; }

  .record-form { padding: 4px 16px 20px; max-width: 100%; }
  .record-grid { grid-template-columns: 1fr; gap: 14px 0; }
  .record-grid label.pf-field-wide { grid-column: auto; }

  .pf-stock-card { flex-wrap: wrap; gap: 14px 22px; }
  .pf-stock-divider { display: none; }

  .pf-price-lead-top { flex-wrap: wrap; }
  .pf-price-lead-input { margin-left: 0; width: 100%; text-align: left; }
  .pf-price-tax-row { justify-content: flex-start; }
  .pf-price-tax-row input { width: 100%; text-align: left; }
  .pf-tier-row { grid-template-columns: 1fr; }
  .pf-req-grid, .pf-opt-grid { grid-template-columns: 1fr; }

  .record-actions-bar { flex-wrap: wrap; }
  .record-actions-bar button { flex: 1; }

  .tabs { gap: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { white-space: nowrap; }

  .list-toolbar { flex-wrap: wrap; }
  .list-toolbar input { max-width: 100%; }

  .filter-row { flex-wrap: wrap; }
  .filter-row .result-list { position: static; width: 100%; margin-top: 6px; }

  .login-card { width: calc(100vw - 40px); padding: 32px 24px; }

  button, input, select { font-size: 16px; }
  button.small { font-size: 13px; }
}

/* Edit/View transaction panes: float over whatever screen is currently open (customer-scoped
   Transactions tab or the standalone cross-customer Transactions list) instead of navigating away
   from it - closing the pane returns to that exact screen, filters and scroll position intact. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 20, 0.45);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 5vh 20px;
  /* Without this, scrolling to the end of the modal's own content on a touch device can "chain"
     into scrolling the page underneath, which is what shows the background through - the modal is
     still on top, the page behind it just moved. */
  overscroll-behavior: contain;
}
/* Belt-and-braces for the same issue: while any modal is open, the page behind it can't scroll at
   all, touch-chaining or not - see lockBodyScroll()/unlockBodyScroll() in app.js. */
body.modal-open {
  overflow: hidden;
}
.modal-panel {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px;
  width: 100%;
  max-width: 640px;
}
.modal-panel-wide { max-width: 920px; }
.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  padding: 4px 8px;
}
.modal-close-btn:hover { color: var(--ink); }
.modal-panel .panel.wide { box-shadow: none; padding: 0; margin: 0 0 20px; }
.modal-panel .panel.wide:last-child { margin-bottom: 0; }

/* ---- Serial Numbers modal (grouped by product, with a live progress pill and duplicate check) ---- */

.serial-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.serial-modal-head h2 { margin: 0 0 3px; }
.serial-modal-sub { margin: 0; font-size: 12.5px; color: var(--ink-muted); }

.serial-progress {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--warn-soft); color: var(--warn);
  font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 20px; flex: none; white-space: nowrap;
}
.serial-progress.is-done { background: var(--good-soft); color: var(--good); }
.serial-progress-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.serial-group { margin-bottom: 18px; }
.serial-group:last-child { margin-bottom: 0; }
.serial-group-head { display: flex; align-items: baseline; gap: 7px; margin-bottom: 8px; }
.serial-group-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.serial-group-code { font-size: 11px; color: var(--ink-faint); }

.serial-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.serial-row:last-child { margin-bottom: 0; }
.serial-unit-badge {
  width: 24px; height: 24px; border-radius: 6px; background: var(--bg); color: var(--ink-faint);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: none;
}
.serial-row input { flex: 1; }
.serial-row.has-dup input { border-color: var(--risk); background: var(--risk-soft); color: var(--risk); }
.serial-dup-hint { font-size: 11px; color: var(--risk); font-weight: 600; flex: none; }

.serial-warn-banner {
  display: flex; align-items: center; gap: 8px; background: var(--risk-soft); color: var(--risk);
  font-size: 12.5px; font-weight: 600; padding: 9px 12px; border-radius: 8px; margin-top: 4px;
}

.serial-receipt-group { margin-bottom: 14px; }
.serial-receipt-group:last-child { margin-bottom: 0; }
.serial-receipt-head { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 7px; display: flex; align-items: baseline; gap: 7px; }
.serial-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.serial-chip { font-size: 12px; font-weight: 600; color: var(--ink); background: var(--bg); border: 1px solid var(--line); padding: 4px 9px; border-radius: 6px; }
.serial-chip-empty { font-size: 12.5px; color: var(--ink-faint); }

@media (max-width: 700px) {
  .modal-overlay { padding: 0; align-items: stretch; }
  .modal-panel { max-width: 100%; min-height: 100%; border-radius: 0; }

  /* Wide multi-column tables (the reallocation grid) don't fit a phone-width modal without
     horizontal scroll - reflow each row into a stacked card instead, one labelled field per line,
     using each td's data-label attribute for the field name. Opt-in via .stacks-on-mobile so this
     doesn't affect every .lines-table, most of which stay fine with .table-scroll's horizontal
     scroll at this width. */
  .stacks-on-mobile thead { display: none; }
  .stacks-on-mobile, .stacks-on-mobile tbody, .stacks-on-mobile tr, .stacks-on-mobile td { display: block; width: 100%; }
  .stacks-on-mobile tr {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
  }
  .stacks-on-mobile td {
    border-bottom: none;
    padding: 5px 0;
    text-align: left !important;
  }
  .stacks-on-mobile td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--ink-muted);
  }

  /* Transaction tables (customer record's own Transactions tab, and the standalone cross-customer
     Transactions list) are 7-8 columns wide - too dense to stack row-by-row without making a long
     list of transactions feel endless, so instead trim to the columns needed to identify a row and
     act on it (Customer where shown, Reference, Date, Amount, the action button), hiding
     Type/Allocated/Remaining. Those stay visible again above this breakpoint. */
  #txnTable th:nth-child(3), #txnTable td:nth-child(3),
  #txnTable th:nth-child(5), #txnTable td:nth-child(5),
  #txnTable th:nth-child(6), #txnTable td:nth-child(6) {
    display: none;
  }
  #atxnTable th:nth-child(4), #atxnTable td:nth-child(4),
  #atxnTable th:nth-child(6), #atxnTable td:nth-child(6),
  #atxnTable th:nth-child(7), #atxnTable td:nth-child(7) {
    display: none;
  }
}

/* ==============================================================
   POS redesign (Sales / POS screen only - #view-salesPos.pos-shell)
   Re-themes this one screen via scoped CSS custom properties; every
   existing shared rule (.panel, .nt-line-card, .pill, button.primary,
   .result-list, .tabs, etc.) already reads these same variable names,
   so overriding them here re-skins those components automatically -
   no need to duplicate their rules, only the genuinely new till-layout
   pieces below (customer/composer/sidebar/display-panel/tender-list).
   ============================================================== */

#view-salesPos.pos-shell {
  --bg: #F1F3EE;
  --surface: #FFFFFF;
  --surface-2: #F7F8F4;
  --ink: #1B211D;
  --ink-muted: #5C665F;
  --ink-faint: #93A196;
  --line: #DEE3DA;
  --line-strong: #C7CEC2;
  --accent: #146356;
  --accent-ink: #0E4B41;
  --accent-strong: #0E4B41;
  --accent-bright: #2E9C78;
  --accent-soft: #E1EFE7;
  --warn: #93610A;
  --warn-soft: #F7EAD2;
  --risk: #AE3A2C;
  --risk-soft: #F6E0DA;
  --good: #1E8A5F;
  --good-soft: #DEF1E5;
  --display-bg: #0D2019;
  --display-bg-2: #10281F;
  --display-ink: #E9FAF1;
  --display-ink-dim: #78B49E;
  --shadow-sm: 0 1px 2px rgba(15, 26, 20, 0.06);
  --shadow-md: 0 10px 26px rgba(15, 26, 20, 0.10);
  --shadow-lg: 0 20px 48px rgba(9, 18, 14, 0.30);
  --font-display: "Archivo", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-family: var(--font-body);
}

.pos-shell .section-label,
.pos-shell .customer-avatar,
.pos-shell .nt-line-swatch,
.pos-shell .composer-swatch,
.pos-shell .composer-field label,
.pos-shell .tab {
  font-family: var(--font-display);
}

.pos-shell .nt-line-code,
.pos-shell .nt-line-formula,
.pos-shell .nt-line-total,
.pos-shell .nt-line-tax,
.pos-shell .nt-line-vat,
.pos-shell .stat-value,
.pos-shell .display-figure,
.pos-shell .display-sub .v,
.pos-shell .mode-cur,
.pos-shell .amt,
.pos-shell .tender-row-2 input,
.pos-shell .customer-meta .code,
.pos-shell .result-list .code,
.pos-shell .currency-tag,
.pos-shell .composer-desc .price,
.pos-shell .hist-ref {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.pos-shell button.secondary:hover { background: var(--line); }

/* ---- layout ---- */

.pos-layout { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 22px; align-items: start; }
.pos-layout .main-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pos-layout .main-col > .panel { margin-bottom: 0; }

@media (max-width: 980px) {
  .pos-layout { grid-template-columns: 1fr; }
}

/* ---- customer card ---- */

.customer-card { padding: 14px 18px; }
.customer-row { display: flex; align-items: center; gap: 14px; }
.customer-avatar {
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.customer-id { flex: 1; min-width: 0; }
.customer-name { font-weight: 600; font-size: 15.5px; }
.customer-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-muted); margin-top: 4px;
}
.customer-meta .sep { color: var(--line-strong); }
.currency-tag {
  font-size: 11px; font-weight: 600; color: var(--ink-muted);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 1px 7px; border-radius: 5px;
}
.btn-quiet {
  background: none; border: none; color: var(--accent);
  font-weight: 600; font-size: 13px; padding: 8px 6px;
}
.btn-quiet:hover { text-decoration: underline; }

.customer-search-toggle { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.customer-search-toggle summary {
  list-style: none; cursor: pointer;
  font-size: 12.5px; color: var(--accent); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.customer-search-toggle summary::-webkit-details-marker { display: none; }
.customer-search-toggle summary::before { content: "\2304"; font-size: 15px; transition: transform .15s ease; }
.customer-search-toggle[open] summary::before { transform: rotate(-180deg); }
.customer-search-body { padding-top: 12px; }
.search-row { display: flex; gap: 8px; }
.search-row input { flex: 1; }

/* ---- line items card ---- */

.lines-card { padding: 18px; }
.lines-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.lines-head .section-label { margin: 0; }
.item-count { font-size: 12px; color: var(--ink-faint); font-weight: 600; }

.product-search { position: relative; margin-bottom: 10px; }
.product-search input { width: 100%; padding-left: 38px; }
.product-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none;
}

.composer {
  display: flex; align-items: center; gap: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-bright);
  border-radius: 9px;
  padding: 10px 12px 10px 10px;
  margin: 6px 0 14px;
}
.composer-swatch {
  width: 34px; height: 34px; flex: none; border-radius: 8px;
  background: var(--surface);
  color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px;
}
.composer-desc { flex: 1; min-width: 0; }
.composer-desc .name { font-weight: 600; font-size: 13.5px; }
.composer-desc .price { font-size: 12px; color: var(--accent-strong); margin-top: 1px; }
.composer-field { display: flex; flex-direction: column; gap: 2px; }
.composer-field label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-strong); font-weight: 700; }
.composer-field input {
  width: 64px; padding: 7px 8px; border-radius: 6px;
  border: 1px solid var(--accent-bright); background: var(--surface);
  font-family: var(--font-mono); font-size: 13px; text-align: right;
}
.composer button.primary { flex: none; }

.pos-shell .nt-line-card:hover { border-color: var(--line-strong); background: var(--surface-2); }

.lines-summary { display: flex; gap: 0; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.lines-summary .stat { flex: 1; text-align: left; }
.lines-summary .stat + .stat { border-left: 1px solid var(--line); padding-left: 18px; margin-left: 18px; }
.lines-summary .stat-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-faint); font-weight: 700; margin-bottom: 3px;
}
.lines-summary .stat-value { font-size: 15.5px; font-weight: 600; }
.lines-summary .stat-value.discount { color: var(--risk); }

/* ---- sidebar / payment ---- */

.pos-sidebar { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.pos-sidebar > .panel { margin-bottom: 0; }

.display-panel {
  background: linear-gradient(180deg, var(--display-bg-2), var(--display-bg));
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,0.03);
  color: var(--display-ink);
}
.display-eyebrow {
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--display-ink-dim);
  display: flex; justify-content: space-between; align-items: center;
}
.display-figure {
  font-weight: 600; font-size: 44px; letter-spacing: -0.01em;
  margin-top: 4px; line-height: 1.05; text-align: right;
}
.display-sub {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(233,250,241,0.12);
  font-size: 12px; color: var(--display-ink-dim);
}
.display-sub .v { color: var(--display-ink); font-weight: 600; }

.progress-track { margin-top: 12px; height: 6px; border-radius: 4px; background: rgba(233,250,241,0.12); overflow: hidden; }
.progress-fill { height: 100%; background: var(--display-ink-dim); border-radius: 4px; }
.progress-fill.paid { background: #7FE8BE; }

.pay-card { padding: 16px 18px; }

.tender-entry { display: flex; flex-direction: column; gap: 8px; }
.tender-entry select, .tender-entry input { width: 100%; }
.tender-row-2 { display: grid; grid-template-columns: 88px 1fr; gap: 8px; }
.tender-row-2 input { text-align: right; }
.tender-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 2px; }
.tender-actions button { width: 100%; }

.tender-list { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.tender-list-empty {
  font-size: 12.5px; color: var(--ink-faint);
  padding: 14px 0; text-align: center;
  border: 1px dashed var(--line); border-radius: 8px;
}
.tender-line { display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; }
.tender-line .mode-tag {
  width: 26px; height: 26px; flex: none; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
}
.tender-line .mode-name { flex: 1; font-size: 13px; font-weight: 500; }
.tender-line .amt { font-weight: 600; font-size: 13.5px; }

button.icon-btn-xs { width: 24px; height: 24px; padding: 4px; }
button.icon-btn-xs svg { width: 11px; height: 11px; }

.pay-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.pay-actions button { width: 100%; padding: 13px 16px; font-size: 14.5px; }
.pay-helper { font-size: 11.5px; color: var(--ink-faint); text-align: center; margin-top: 8px; }
.pay-helper strong { color: var(--warn); font-family: var(--font-mono); }

/* ---- history ---- */

.history-card { padding: 18px; }
.pos-shell .filter-row input[type="text"] { flex: 1; min-width: 220px; }

/* ==============================================================
   Printing (Invoice/Credit Note/Debit Note + POS receipt)
   Rendered inside a dedicated hidden iframe (see printHtml() in app.js) that loads this same
   stylesheet - not the live page - so nothing here needs to hide the rest of the app during print.
   ============================================================== */

@media print {
  @page { margin: 12mm; }
}

.print-doc {
  --pd-ink: #414042;
  --pd-ink-muted: #6D6E71;
  --pd-ink-faint: #A2A3A6;
  --pd-line: #E1E2DD;
  --pd-line-strong: #C6C8C0;
  --pd-accent: #7CB342;
  --pd-accent-strong: #4F7A22;
  --pd-accent-soft: #EEF6E4;
  --pd-font-display: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  --pd-font-body: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  --pd-font-mono: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-family: var(--pd-font-body);
  color: var(--pd-ink);
  font-size: 12.5px;
  line-height: 1.5;
}

.print-doc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 20px; border-bottom: 3px solid var(--pd-ink); margin-bottom: 26px; }
.print-doc .brand-logo { height: 40px; width: auto; display: block; margin-bottom: 10px; }
.print-doc .brand-lines { font-size: 11.5px; color: var(--pd-ink-muted); }
.print-doc .brand-lines div { margin-bottom: 1px; }
.print-doc .brand-regs { margin-top: 6px; font-size: 10.5px; color: var(--pd-ink-faint); font-family: var(--pd-font-mono); }
.print-doc-id { text-align: right; flex: none; }
.print-doc-badge {
  display: inline-block; font-family: var(--pd-font-display); font-weight: 800; font-size: 15px;
  letter-spacing: 0.06em; color: var(--pd-accent-strong); background: var(--pd-accent-soft);
  border-radius: 6px; padding: 7px 14px; margin-bottom: 10px;
}
.print-doc-ref { font-family: var(--pd-font-mono); font-size: 15px; font-weight: 700; }
.print-doc-date { font-size: 11.5px; color: var(--pd-ink-muted); margin-top: 2px; }

.print-meta-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; margin-bottom: 28px; }
.print-meta-label {
  font-family: var(--pd-font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--pd-ink-faint); margin-bottom: 6px;
}
.print-meta-name { font-weight: 700; font-size: 14px; margin-bottom: 3px; }
.print-meta-block div:not(.print-meta-label):not(.print-meta-name) { color: var(--pd-ink-muted); margin-bottom: 1px; }
.print-meta-block .print-meta-vat { font-family: var(--pd-font-mono); font-size: 11.5px; margin-top: 4px; color: var(--pd-ink-muted); }
.print-meta-facts { display: flex; flex-direction: column; gap: 7px; }
.print-meta-fact { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.print-meta-fact span:first-child { color: var(--pd-ink-faint); }
.print-meta-fact span:last-child { font-weight: 600; text-align: right; }

table.print-lines-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
table.print-lines-table th {
  text-align: left; font-family: var(--pd-font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--pd-ink-faint);
  padding: 0 6px 8px; border-bottom: 1.5px solid var(--pd-ink);
}
table.print-lines-table th.num, table.print-lines-table td.num { text-align: right; }
table.print-lines-table td {
  padding: 10px 6px; border-bottom: 1px solid var(--pd-line); vertical-align: top; font-size: 12px;
}
table.print-lines-table td.num { font-family: var(--pd-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.print-lines-table tbody tr:last-child td { border-bottom: 1.5px solid var(--pd-line-strong); }
.print-line-name { font-weight: 600; }
.print-line-code, .print-line-serials { font-size: 10.5px; }
.print-line-code { font-family: var(--pd-font-mono); color: var(--pd-ink-faint); margin-top: 1px; }
.print-line-serials { color: var(--pd-accent-strong); margin-top: 2px; }
.print-cell-note { font-size: 9.5px; color: var(--pd-ink-faint); margin-top: 2px; font-weight: 400; }
.print-cell-note.plus { color: var(--pd-accent-strong); font-weight: 600; }

.print-totals-wrap { display: flex; justify-content: flex-end; margin: 14px 0 26px; }
.print-totals { width: 260px; display: flex; flex-direction: column; gap: 5px; }
.print-totals .row { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--pd-ink-muted); }
.print-totals .row .v { font-family: var(--pd-font-mono); font-variant-numeric: tabular-nums; }
.print-totals .row.grand {
  margin-top: 6px; padding-top: 10px; border-top: 2px solid var(--pd-ink);
  font-family: var(--pd-font-display); font-weight: 800; font-size: 16px; color: var(--pd-accent-strong);
}
.print-totals .row.grand .v { font-family: var(--pd-font-mono); }

.print-terms {
  font-size: 9.5px; line-height: 1.6; color: var(--pd-ink-muted); background: var(--pd-accent-soft);
  border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; white-space: pre-line;
}
.print-terms-title {
  font-family: var(--pd-font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--pd-accent-strong); margin-bottom: 6px;
}
.print-doc-footer {
  display: flex; justify-content: flex-end; align-items: center; font-size: 10px;
  color: var(--pd-ink-faint); border-top: 1px solid var(--pd-line); padding-top: 12px;
}
.print-doc-footer .mono { font-family: var(--pd-font-mono); }

.print-receipt {
  width: 80mm;
  font-family: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: #000;
}
.print-receipt .center { text-align: center; }
.print-receipt .bold { font-weight: 700; }
.print-receipt hr { border: none; border-top: 1px dashed #000; margin: 6px 0; }
.print-receipt .row { display: flex; justify-content: space-between; gap: 8px; }
.print-receipt .line-desc { margin-top: 4px; }
/* Serials sit indented under their line, quieter than the amounts around them. */
.print-receipt .line-serial { padding-left: 8px; font-size: 9.5px; color: #333; }
.print-receipt .barcode { margin-top: 6px; }
.print-receipt .barcode svg { max-width: 100%; height: 34px; }
.print-receipt .barcode-text { font-size: 9px; letter-spacing: 0.18em; margin-top: 1px; }

/* ==============================================================
   General Ledger: Chart of Accounts / Journal Entries / Cash Book / Reconciliation
   ============================================================== */

.lines-table th.num, .lines-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Editable line-item tables (Journal Entry / Cash Book lines) - inputs sit flush in the cell so
   the table itself still reads like a spreadsheet, not a stack of separate form fields. */
.editable-lines-table td { padding: 5px 8px; }
.editable-lines-table input, .editable-lines-table select {
  width: 100%; border: 1px solid transparent; background: transparent; padding: 5px 6px;
  font: inherit; border-radius: 6px;
}
.editable-lines-table input:hover, .editable-lines-table select:hover,
.editable-lines-table input:focus, .editable-lines-table select:focus { border-color: var(--line); background: #fff; }
.editable-lines-table input.num { text-align: right; font-variant-numeric: tabular-nums; }
.editable-lines-table tr.line-generated td { color: var(--ink-faint); font-style: italic; }
.editable-lines-table tr.line-generated input, .editable-lines-table tr.line-generated select { color: inherit; }

.lines-total-row td { font-weight: 700; border-top: 2px solid var(--line); }
.lines-diff-row td { font-weight: 700; color: var(--risk); }
.lines-diff-row.is-balanced td { color: var(--good); }

.recon-statement-row { align-items: end; margin: 16px 0; }
.recon-statement-row .kpi-card { margin: 0; }
#rcLinesBody tr.recon-checked td { background: var(--good-soft); }

/* ==============================================================
   Settings (General/Sales/Inventory/Purchases/GL parameters, lookups, entry types)
   ============================================================== */

.record-grid label span.hint { display: block; text-transform: none; font-weight: 500; font-size: 11.5px; color: var(--ink-faint); letter-spacing: 0; margin-top: 1px; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; max-width: 560px; }
.toggle-row .toggle-copy strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.toggle-row .toggle-copy span { font-size: 12px; color: var(--ink-faint); }
.switch { position: relative; width: 40px; height: 23px; flex-shrink: 0; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .track { position: absolute; inset: 0; background: var(--line-strong); border-radius: 99px; transition: background .15s; cursor: pointer; }
.switch .track::after { content: ""; position: absolute; width: 17px; height: 17px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform .15s; }
.switch input:checked + .track { background: var(--good); }
.switch input:checked + .track::after { transform: translateX(17px); }

.cat-tabs { display: flex; gap: 4px; margin-bottom: 14px; }
.cat-tab {
  appearance: none; cursor: pointer; font: inherit; font-weight: 700; font-size: 12.5px;
  padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-muted);
}
.cat-tab.active { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }
.cat-panel { display: none; }
.cat-panel.active { display: block; }

.not-built {
  display: flex; align-items: flex-start; gap: 12px; background: var(--warn-soft);
  border-radius: 9px; padding: 14px 16px; margin-bottom: 20px; font-size: 12.5px; color: var(--warn);
}
.not-built svg { flex-shrink: 0; margin-top: 1px; }
.not-built b { display: block; margin-bottom: 2px; }

.lines-table td.row-actions { text-align: right; white-space: nowrap; }

.settings-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin: 0 0 12px; padding-top: 2px; }

/* ==============================================================
   Repairs & Service Jobs
   ============================================================== */

.board-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.board-toolbar input[type="search"] { flex: 1; min-width: 220px; max-width: 340px; }

.status-filter-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.status-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px;
  border: 1px solid var(--line-strong); background: var(--surface); font-size: 12.5px; font-weight: 700; color: var(--ink-muted); cursor: pointer;
}
.status-chip.active { border-color: transparent; }
.status-chip[data-status=""].active { background: var(--accent); color: #fff; }
.status-chip[data-status="0"].active { background: var(--ink-faint); color: #fff; }
.status-chip[data-status="1"].active { background: var(--accent); color: #fff; }
.status-chip[data-status="2"].active { background: var(--risk); color: #fff; }
.status-chip[data-status="3"].active { background: var(--warn); color: #fff; }
.status-chip[data-status="4"].active { background: var(--coral); color: #fff; }
.status-chip[data-status="5"].active { background: var(--good); color: #fff; }
.status-chip[data-status="6"].active { background: var(--ink); color: var(--bg); }

table.job-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.job-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); background: var(--bg); padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.job-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.job-table tbody tr:last-child td { border-bottom: none; }
table.job-table tbody tr:hover td { background: var(--bg); cursor: pointer; }
.job-device { display: flex; flex-direction: column; gap: 1px; }
.job-device b { font-size: 13px; }
.job-device span { font-size: 11.5px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.assignee { display: inline-flex; align-items: center; gap: 6px; }
.assignee .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); }
.assignee.unassigned { color: var(--ink-faint); font-style: italic; }

.pill-s0 { background: #eceef1; color: #62697a; }
.pill-s1 { background: var(--accent-soft); color: var(--accent-ink); }
.pill-s2 { background: var(--risk-soft); color: var(--risk); }
.pill-s3 { background: var(--warn-soft); color: var(--warn); }
.pill-s4 { background: var(--coral-soft); color: var(--coral); }
.pill-s5 { background: var(--good-soft); color: var(--good); }
.pill-s6 { background: var(--ink); color: var(--bg); }

.job-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; flex-wrap: wrap; }
.job-header h1 { font-size: 19px; margin: 0 0 3px; }
.job-header .sub { font-size: 13px; color: var(--ink-muted); }
.job-header-actions { display: flex; gap: 8px; }

.pipeline { display: flex; align-items: center; gap: 0; margin-bottom: 18px; overflow-x: auto; padding-bottom: 2px; }
.pipeline-step { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; width: 108px; position: relative; }
.pipeline-step .node { width: 26px; height: 26px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--ink-faint); z-index: 1; }
.pipeline-step .label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-faint); text-align: center; }
.pipeline-step .connector { position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--line-strong); z-index: 0; }
.pipeline-step:first-child .connector { display: none; }
.pipeline-step.done .node { background: var(--good); border-color: var(--good); color: #fff; }
.pipeline-step.done .label { color: var(--good); }
.pipeline-step.done .connector { background: var(--good); }
.pipeline-step.current .node { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.pipeline-step.current .label { color: var(--accent-ink); }

.warranty-card { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 9px; border: 1px solid var(--line); }
.warranty-card.iw { background: var(--good-soft); border-color: transparent; }
.warranty-card.oow { background: var(--risk-soft); border-color: transparent; }
.warranty-card svg { flex-shrink: 0; margin-top: 2px; }
.warranty-card b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.warranty-card span { font-size: 12.5px; }

.accessory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 16px; }
.accessory-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px; font-weight: 600; }
.accessory-chip input[type="checkbox"] { width: auto; }

table.line-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.line-table th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.line-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); }
.spare-status { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.spare-status.requested { background: var(--warn-soft); color: var(--warn); }
.spare-status.delivered { background: var(--good-soft); color: var(--good); }

.log-list { display: flex; flex-direction: column; }
.log-item { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.log-item:last-child { border-bottom: none; }
.log-dot-col { display: flex; flex-direction: column; align-items: center; }
.log-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); margin-top: 5px; flex-shrink: 0; }
.log-body b { font-size: 13.5px; }
.log-meta { font-size: 12px; color: var(--ink-faint); margin-top: 2px; }

@media (max-width: 860px) {
  .accessory-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Repairs: table-style code/product pickers (replaces the old dropdown add-line row -
   the live lists are 124 failure / 140 repair codes, far past what a <select> can carry) ---- */
.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pick-panel .panel-head { margin-bottom: 10px; }
.count-badge { font-size: 11px; font-weight: 700; color: var(--ink-faint); background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.pick-search { width: 100%; margin-bottom: 10px; }
.pick-scroll { overflow: auto; max-height: 264px; border: 1px solid var(--line); border-radius: 9px; }
.pick-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pick-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pick-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pick-table tbody tr { cursor: pointer; }
.pick-table tbody tr:last-child td { border-bottom: none; }
.pick-table tbody tr:hover { background: var(--bg); }
.pick-table tbody tr.selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.pick-table tbody tr.selected .code-cell { color: var(--accent-ink); }
.code-cell { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--ink-muted); width: 1%; }
.pick-empty { padding: 18px 12px; text-align: center; color: var(--ink-faint); font-size: 12px; cursor: default; }
.compose-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 9px; background: var(--bg); }
.compose-slot { display: inline-flex; align-items: baseline; gap: 7px; padding: 6px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; min-width: 150px; }
.compose-slot .code-cell { width: auto; }
.compose-slot.empty { color: var(--ink-faint); border-style: dashed; }
.compose-arrow { color: var(--ink-faint); font-weight: 700; font-size: 13px; }
.compose-bar .spacer { flex: 1; }
.compose-bar input.level { width: 72px; }
@media (max-width: 900px) { .pick-grid { grid-template-columns: 1fr; } }

/* Compact code comboboxes on the diagnosis compose bar (type-ahead on code only) */
.code-combo { position: relative; display: flex; flex-direction: column; min-width: 190px; }
.code-combo .combo-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; margin: 0; }
.combo-desc { font-size: 11.5px; color: var(--ink-muted); margin-top: 4px; min-height: 15px; }
.status-chip[data-status="open"].active { background: var(--accent); color: #fff; }

/* New Job intake flow (customer -> IMEI lookup -> condition) */
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; margin-right: 6px; }
.selected-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--accent); border-radius: 9px; background: var(--accent-soft); }
.device-result { margin-top: 14px; border-radius: 9px; padding: 14px; border: 1px solid; }
.device-result.found { background: var(--good-soft); border-color: var(--good); }
.device-result.notfound { background: var(--warn-soft); border-color: var(--warn); }
.device-result .dr-head { font-weight: 800; font-size: 13.5px; margin-bottom: 10px; }
.device-result.found .dr-head { color: var(--good); }
.device-result.notfound .dr-head { color: var(--warn); }
.dr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px 18px; }
.dr-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-bottom: 2px; }
.mapping-preview { margin-top: 12px; padding: 8px 12px; border-radius: 7px; background: var(--surface); border: 1px dashed var(--line-strong); font-size: 12.5px; color: var(--ink-muted); }
.device-result .pick-scroll { background: var(--surface); }

/* Till shift bar on the POS view (mirrors the mobile shift-first flow) */
.shift-bar { margin-bottom: 14px; }
.shift-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 9px; font-size: 13px; }
#shiftOpenForm { background: var(--warn-soft); border: 1px solid var(--warn); }
#shiftStatus { background: var(--good-soft); border: 1px solid var(--good); }
.shift-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.shift-dot.none { background: var(--warn); }
.shift-dot.open { background: var(--good); }
#sb-float { width: 130px; }
#sb-pin { width: 76px; letter-spacing: 0.2em; }
#sb-info b { font-weight: 800; }

/* Open-drawer panel: the identifying line, then the running figures the close-off will declare
   against. The figures wrap on a narrow till screen rather than scrolling sideways. */
.shift-detail { padding: 10px 14px; border-radius: 9px; font-size: 13px; }
.shift-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shift-detail-figures {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--good);
}
.shift-figure { display: flex; flex-direction: column; gap: 1px; }
.shift-figure-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); font-weight: 700;
}
.shift-figure b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
#csResultBody td { font-size: 13px; }
#csResultBody td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.cs-variance-bad { color: var(--risk); }
.cs-variance-ok { color: var(--good); }

/* POS line-discount pill: filled when a discount is on the line */
.nt-line-actions .disc-on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* POS scan bar (scanner-first capture, mirrors the mobile till) */
.scan-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 8px 12px; border: 1.5px dashed var(--accent); border-radius: 9px; background: var(--accent-soft); }
.scan-bar svg { width: 18px; height: 18px; color: var(--accent-ink); flex: none; }
.scan-bar input { flex: 1; border: none; background: none; font: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.04em; color: var(--ink); outline: none; padding: 2px 0; }
.scan-msg { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.scan-msg.ok { color: var(--good); }
.scan-msg.bad { color: var(--risk); }

/* Settings: per-tab section sub-nav (one section on screen at a time) */
.stg-shell { display: flex; gap: 18px; align-items: flex-start; }
.stg-nav { width: 216px; flex: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: var(--shadow-sm); position: sticky; top: 76px; }
.stg-nav-item { padding: 8px 11px; border-radius: 8px; cursor: pointer; font-size: 13.3px; font-weight: 600; color: var(--ink-muted); position: relative; }
.stg-nav-item:hover { background: var(--bg); color: var(--ink); }
.stg-nav-item.active { background: var(--accent-soft); color: var(--accent-ink); }
.stg-nav-item.active::before { content: ''; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.stg-pane { flex: 1; min-width: 0; }
@media (max-width: 860px) {
  .stg-shell { flex-direction: column; }
  .stg-nav { width: 100%; position: static; display: flex; flex-wrap: wrap; gap: 2px; }
  .stg-nav-item.active::before { content: none; }
}

/* AR customer centre (per the approved mockup): type pills, allocation progress, aging, limit bar */
.tpill { font-size: 10.5px; font-weight: 800; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.tpill.inv { background: var(--accent-soft); color: var(--accent-ink); }
.tpill.rct { background: var(--good-soft); color: var(--good); }
.tpill.cn { background: var(--warn-soft); color: var(--warn); }
.alloc-bar { width: 64px; height: 5px; border-radius: 3px; background: var(--line); display: inline-block; vertical-align: middle; margin-right: 7px; overflow: hidden; }
.alloc-bar i { display: block; height: 100%; background: var(--good); }
.remaining-due { font-weight: 800; color: var(--risk); }
.remaining-cr { font-weight: 800; color: var(--good); }
.remaining-zero { color: var(--ink-faint); }
.overdue-tag { font-size: 10px; font-weight: 800; color: var(--risk); background: var(--risk-soft); border-radius: 4px; padding: 1px 5px; margin-left: 6px; white-space: nowrap; }
.limit-bar { height: 5px; border-radius: 3px; background: var(--line); margin-top: 8px; overflow: hidden; }
.limit-bar i { display: block; height: 100%; background: var(--warn); border-radius: 3px; }
.aging-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
.aging-title { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 10px; }
.aging-track { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-bottom: 10px; background: var(--line); }
.aging-track i { display: block; height: 100%; }
.aging-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--ink-muted); }
.aging-legend b { font-variant-numeric: tabular-nums; color: var(--ink); }
.aging-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }

/* ---- After Sales: workshop centre (AR-customer-centre design language) ---- */
.kpi-value.kpi-text { font-size: 17px; font-weight: 700; display: flex; align-items: center; min-height: 34px; }
.kpi-value.kpi-text .pill { font-size: 12.5px; }
.device-chip { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); min-height: 20px; }

/* ---- AR customer centre: hero header + filter chips (per the approved mockup) ---- */
/* The customer record opens with two stacked headers reading as one card: header 1 is who the
   customer is and what can be raised for them (never leaves the screen), header 2 is the money -
   balance, due, credit, aging - which folds away while a document is being raised. */
.cust-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 0;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px 11px 0 0; box-shadow: var(--shadow-sm); }
.cust-head.solo { border-radius: 11px; margin-bottom: 18px; }
#custOverview { padding: 16px 18px 18px; background: var(--surface); border: 1px solid var(--line);
  border-top: none; border-radius: 0 0 11px 11px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
/* Nested inside header 2 the boxes sit on the page ground rather than floating as their own cards. */
#custOverview .kpi-grid { margin-bottom: 0; }
#custOverview .kpi-card { background: var(--bg); box-shadow: none; }
#custOverview .aging-card { background: none; border: none; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none; padding: 14px 0 0; margin: 14px 0 0; }

.cust-avatar { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), #6f4bd8);
  color: #fff; font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; flex: none; }
.cust-id h1 { font-size: 19px; margin: 0; }
.cust-meta { font-size: 12.5px; color: var(--ink-muted); margin-top: 2px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 3px 10px; vertical-align: 2px; }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.risk { background: var(--risk-soft); color: var(--risk); }
.head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.fchip { font-size: 12px; font-weight: 700; color: var(--ink-muted); background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 99px; padding: 5px 12px; cursor: pointer; user-select: none; }
.fchip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 720px) { .head-actions { margin-left: 0; } }
.edit-mode-label { font-size: 15px; font-weight: 700; align-self: center; }
.bar-spacer { flex: 1; }
.action-menu { position: relative; display: inline-block; }
.action-menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 170px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: var(--shadow-md); }
.action-menu-list button { display: block; width: 100%; text-align: left; border: none; background: none; font: inherit;
  font-weight: 600; color: var(--ink); padding: 7px 10px; border-radius: 7px; cursor: pointer; }
.action-menu-list button:hover { background: var(--bg); }

/* ---- Mockup parity pass: board chip counts, job header, nav badge, settings tables ---- */
.status-chip .count { opacity: .7; font-weight: 600; margin-left: 5px; }
.status-chip.active .count { opacity: .85; }

.job-header-left { display: flex; gap: 16px; align-items: center; }
.job-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#rpJobTitle .pill { margin-left: 6px; vertical-align: 3px; }

/* DOA / OOP-Swap are branches off the main pipeline, not steps along it */
.pipeline-step.branch .node { border-color: var(--risk); color: var(--risk); }
.pipeline-step.branch .label { color: var(--risk); }

.nav-count { margin-left: auto; font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 1px 7px;
  background: var(--line); color: var(--ink-muted); }
.nav-item.active .nav-count { background: var(--accent); color: #fff; }

.omni-kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-size: 10.5px; font-weight: 700; color: var(--ink-faint); border: 1px solid var(--line-strong);
  border-radius: 5px; padding: 1px 5px; background: var(--surface); }

.et-fmt { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px; color: var(--ink-muted);
  background: var(--bg); padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line); white-space: nowrap; }
.pill-dr { background: var(--accent-soft); color: var(--accent-ink); }
.pill-cr { background: var(--warn-soft); color: var(--warn); }
.pill-pos { background: var(--good-soft); color: var(--good); }
.muted-cell { color: var(--ink-faint); }

/* Settings' master tables are read far more often than edited, so the row Edit button stays out
   of the way until the row is hovered or focused. Scoped to Settings on purpose - the working
   lists elsewhere (GL accounts, customers, products) keep theirs always visible. On touch, where
   there is no hover, they stay visible too. */
@media (hover: hover) {
  #view-settings .lines-table td.row-actions button { opacity: 0; transition: opacity .12s; }
  #view-settings .lines-table tr:hover td.row-actions button,
  #view-settings .lines-table td.row-actions button:focus-visible { opacity: 1; }
}
.omnisearch input { padding-right: 58px; }
/* Stock Transactions reuse the customer record's two-header shape: the list keeps header 2 (the
   counts), and the document screen drops it, so #stockHead/#stDocHead round off on their own. */
#stockOverview { padding: 16px 18px 18px; background: var(--surface); border: 1px solid var(--line);
  border-top: none; border-radius: 0 0 11px 11px; box-shadow: var(--shadow-sm); margin-bottom: 18px; }
#stockOverview .kpi-grid { margin-bottom: 0; }
#stockOverview .kpi-card { background: var(--bg); box-shadow: none; }
#stockOverview .aging-card { background: none; border: none; border-top: 1px solid var(--line);
  border-radius: 0; box-shadow: none; padding: 14px 0 0; margin: 14px 0 0; }

/* ---- Customers dashboard: pinned search, then the two source-labelled bands ---- */
.cust-searchbar { position: sticky; top: 0; z-index: 20; background: var(--surface); border: 1px solid var(--line);
  border-radius: 11px; box-shadow: var(--shadow-sm); padding: 13px 15px; margin-bottom: 16px; }
.cust-searchrow { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.cust-searchfield { position: relative; flex: 1; min-width: 220px; display: block; }
.cust-searchfield svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 14px;
  height: 14px; stroke: var(--ink-faint); pointer-events: none; }
.cust-searchfield input { width: 100%; padding-left: 34px; }
.range-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong);
  border-radius: 99px; padding: 4px 9px 4px 12px; background: var(--surface); font-size: 12px;
  font-weight: 700; color: var(--ink-faint); white-space: nowrap; }
.range-pill select { border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--ink); cursor: pointer; padding: 3px 2px; }

.dash-band { background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow-sm); padding: 14px 16px 16px; margin-bottom: 16px; }
.dash-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.dash-head h2 { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0; }
.dash-src { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; font-weight: 700;
  color: var(--accent-ink); background: var(--accent-soft); border-radius: 4px; padding: 1px 6px; }
.dash-head .dash-sub { font-size: 11.5px; color: var(--ink-faint); margin-left: auto; }
.dash-band .kpi-grid { margin-bottom: 0; }
.dash-band .kpi-card { background: var(--bg); box-shadow: none; }
.dash-strip { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.dash-strip .muted-note { margin: 8px 0 0; }
.kpi-of { font-size: 13px; font-weight: 600; color: var(--ink-faint); }

/* Customer matches drop out of the pinned search bar rather than sitting at the foot of the page. */
.results-pane { position: absolute; left: 15px; right: 15px; top: calc(100% - 4px); z-index: 30;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: var(--shadow-md); overflow: hidden; }
.results-pane-head { display: flex; align-items: center; gap: 10px; padding: 9px 13px;
  border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.results-pane-head button { margin-left: auto; }
.results-pane-scroll { max-height: 320px; overflow-y: auto; }
.results-pane .lines-table th { position: sticky; top: 0; z-index: 1; background: var(--bg); }
.cust-searchbar { position: sticky; }
/* The Inventory pane carries an extra control (the category column picker) in its header. */
.results-pane-head .pf-col-select { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ink-muted); }
.results-pane-head .pf-col-select + button { margin-left: 10px; }