:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f6f6fa;          /* subtle raised / hover fill */
  --ink: #1a1d21;
  --muted: #6b7280;
  --faint: #9ca3af;              /* micro-labels, de-emphasised */
  --line: #e6e8eb;
  --line-2: #f1f2f4;             /* lighter inner divider */
  --brand: #c81e6e;       /* berry — the ONE accent. Green/amber/red mean good/warning/bad and nothing else. */
  --brand-ink: #9d1657;
  --brand-soft: #fbe9f1;         /* accent tint (active states / chips) */
  --gold: #c9a96e;        /* berrynice.my badge/accent (kept for occasional use) */
  --good: #12855e;  --good-soft: #e7f6ee;
  --warn: #b07514;  --warn-soft: #fbf1df;
  --bad: #c23a30;   --bad-soft: #fdeceb;
  --info: #1d4ed8;  --info-soft: #e0edff;
  --amber: #b07514;
  --danger: #dc2626;      /* red */
  --danger-bg: #fef2f2;
  --ok: #16a34a;
  --radius: 8px;                 /* cards. Smaller parts use 6px. */
  /* Shadow is for what opens ABOVE the page (drawers, modals, menus). Cards sit ON the page: hairline only. */
  --shadow: 0 1px 2px rgba(20,18,40,.04), 0 10px 26px -14px rgba(30,20,60,.13);
}
/* ---- Dark theme — opt-in via Appearance settings; "auto" follows the device. Light stays default. ---- */
:root[data-theme="dark"] {
  --bg: #141317; --surface: #1c1b21; --surface-2: #242229;
  --ink: #ecebf1; --muted: #a09eaa; --faint: #6f6d78;
  --line: #2a2831; --line-2: #232128; --brand: #ee6aa0; --brand-ink: #ff8fb8; --brand-soft: #3a1626;
  --good: #4bc48c; --good-soft: #133026; --warn: #e0a54b; --warn-soft: #2e2513; --bad: #ef6a5f; --bad-soft: #331916; --info: #93c5fd; --info-soft: #17324f; --amber: #e0a54b;
  --danger: #ef6a5f; --danger-bg: #331916; --ok: #4bc48c;
  --shadow: 0 1px 2px rgba(0,0,0,.34), 0 14px 30px -16px rgba(0,0,0,.62);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --bg: #141317; --surface: #1c1b21; --surface-2: #242229;
    --ink: #ecebf1; --muted: #a09eaa; --faint: #6f6d78;
    --line: #2a2831; --line-2: #232128; --brand: #ee6aa0; --brand-ink: #ff8fb8; --brand-soft: #3a1626;
    --good: #4bc48c; --good-soft: #133026; --warn: #e0a54b; --warn-soft: #2e2513; --bad: #ef6a5f; --bad-soft: #331916; --info: #93c5fd; --info-soft: #17324f; --amber: #e0a54b;
    --danger: #ef6a5f; --danger-bg: #331916; --ok: #4bc48c;
    --shadow: 0 1px 2px rgba(0,0,0,.34), 0 14px 30px -16px rgba(0,0,0,.62);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5;
  font-variant-numeric: tabular-nums;   /* every figure lines up under the one above it */
}
#app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }

/* sidebar */
.sidebar { background: #14161a; color: #d7dade; display: flex; flex-direction: column; padding: 16px 12px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; color: #fff; padding: 6px 8px 18px; }
.brand-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; background: var(--brand); border-radius: 8px; font-size: 13px; font-weight: 700; }
.nav-group { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #aab0ba; margin: 14px 6px 6px; cursor: pointer; user-select: none; border-radius: 7px; padding: 5px 8px; transition: background .12s, color .12s; }
.nav-group:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-group:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.nav-caret { font-size: 11px; font-weight: 700; opacity: .85; transition: transform .12s; flex: none; }
.nav-group.collapsed .nav-caret { opacity: .95; }
.nav-group-body.collapsed { display: none; }
.nav-item { display: block; padding: 8px 10px; border-radius: 8px; color: #c3c7cd; text-decoration: none; font-size: 13.5px; }
.nav-item:hover { background: #21242a; color: #fff; }
.nav-item.active { background: var(--brand); color: #fff; }
.sidebar-foot { margin-top: auto; padding: 12px 8px 4px; font-size: 12px; color: #7c828c; display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; display: inline-block; }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--danger); }

/* content */
.content { display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; border-bottom: 1px solid var(--line); background: var(--surface); gap: 12px; }
.topbar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar h1 { font-size: 18px; margin: 0; font-weight: 600; }
.nav-toggle { display: inline-flex; align-items: center; background: none; border: 1px solid var(--line); border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--ink); padding: 5px 10px; }
/* Desktop: ☰ docks / undocks the sidebar so a wide grid can have the whole window (FB-000077). The choice is
   remembered per browser. Below 860px the same button opens the off-canvas drawer instead. */
@media (min-width: 701px) {
  body.nav-collapsed #app { grid-template-columns: 1fr; }
  body.nav-collapsed .sidebar { display: none; }
  .nav-toggle:hover { background: var(--surface-2); }
}
.nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(16,20,26,.5); z-index: 55; }
.view { padding: 24px 28px; overflow-x: auto; }

/* salesperson target scoreboard */
.target-grid { display: flex; gap: 14px; flex-wrap: wrap; }
.target-card { flex: 1 1 260px; border: 1px solid var(--line); border-radius: 12px; padding: 18px; background: var(--surface); }
.target-head { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.target-big { font-size: 26px; font-weight: 650; }
.target-big.bad { color: var(--danger); } .target-big.good { color: var(--ok); }
.target-sub { font-size: 13px; color: var(--muted); margin: 4px 0 12px; }
.target-track { height: 10px; border-radius: 6px; background: var(--line-2); border: 1px solid var(--line); overflow: hidden; }
.target-fill { height: 100%; } .target-fill.bad { background: var(--danger); } .target-fill.good { background: var(--ok); }
.target-note { font-size: 12px; color: var(--muted); margin-top: 8px; }
.commission-banner { padding: 13px 16px; border-radius: var(--radius); margin-bottom: 16px; font-size: 15px; }
.commission-banner.locked { background: var(--bad-soft); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 32%, transparent); }
.commission-banner.active { background: var(--good-soft); color: var(--good); border: 1px solid color-mix(in srgb, var(--good) 32%, transparent); }
.mini-track { height: 7px; border-radius: 5px; background: var(--line-2); overflow: hidden; margin-top: 4px; max-width: 220px; }
.mini-fill { height: 100%; } .mini-fill.bad { background: var(--danger); } .mini-fill.good { background: var(--ok); }
.mini-lbl { font-size: 12.5px; }

/* Money columns tidied by ui.tidyMoney(): heading says "(RM)" once, cells are right-aligned digits.
   Key/value lists get ledger form instead — symbol at the left edge, digits at the right. */
td[data-money], th[data-money] { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money { display: flex; justify-content: space-between; gap: 8px; min-width: 7em; white-space: nowrap; }
.money .cur { color: var(--muted); font-weight: 500; }

/* dashboard sales/profit comparison tiles */
.tile-sub { font-size: 12px; margin-top: 5px; }
.delta-up { color: var(--good); font-weight: 700; }
.delta-down { color: #dc2626; font-weight: 700; }

/* stock-receive photo gallery */
.img-gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.img-thumb { display: block; width: 120px; height: 120px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.img-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* lookups manager layout (left table-list + right panel) */
.lk-layout { display: flex; gap: 18px; align-items: flex-start; }
.lk-nav { width: 230px; flex: none; padding: 8px; }
.lk-panel { flex: 1; min-width: 0; }
.lookup-nav-item { display: block; padding: 9px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 500; }
.lookup-nav-item:hover { background: var(--hover, rgba(124,58,237,.06)); }
.lookup-nav-item.active { background: rgba(124,58,237,.12); font-weight: 700; }

/* kpis */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.kpi-label { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.kpi-value { font-size: 27px; font-weight: 760; margin-top: 8px; letter-spacing: -.025em; line-height: 1.05; }
.kpi-sub { color: var(--muted); font-size: 12.5px; margin-top: 5px; }
/* reusable trend chip for KPI tiles (dashboards) */
.trend { display: inline-block; font-size: 11.5px; font-weight: 600; }
.trend.up { color: var(--good); }
.trend.down { color: var(--bad); }
.trend.flat { color: var(--muted); }

/* cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 20px; }
.card-title { padding: 15px 18px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; letter-spacing: -.01em; }
.card-body { padding: 16px 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; color: var(--muted); font-weight: 700; padding: 10px; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.table td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--surface-2); }
/* Money and counts line up. `num` is already on the right cells in 32 page files — it just never had a rule,
   so every amount in the ERP was left-aligned against a left-aligned label. Tabular figures matter as much
   as the alignment: without them a 1 is narrower than a 7, so the digits still fail to stack and the eye
   cannot compare two rows at a glance. */
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Identifiers stay left — they read as words — but tabular figures keep the digits scannable down a column. */
.table td.mono, .table td.col-id { font-variant-numeric: tabular-nums; }

/* bars */
.bars { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 190px; align-items: center; gap: 12px; }
.bar-label { color: var(--muted); font-size: 13px; }
.bar-track { background: var(--line-2); border-radius: 6px; height: 22px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--brand); border-radius: 6px; min-width: 2px; }
.bar-fill.danger { background: var(--danger); }
.bar-row.click { cursor: pointer; border-radius: 8px; padding: 2px 6px; margin: 0 -6px; transition: background .12s; }
.bar-row.click:hover { background: var(--brand-soft); }
.bar-row.click:hover .bar-label { color: var(--brand-ink); }
.bar-val { text-align: right; font-size: 12.5px; color: var(--muted); }

/* states */
.loading, .placeholder { text-align: center; color: var(--muted); padding: 60px 20px; }
.placeholder-icon { font-size: 34px; }
.error-box { background: var(--danger-bg); color: var(--danger); border: 1px solid #fecaca; border-radius: var(--radius); padding: 14px 16px; }

/* controls */
.filter-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.input { height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; background: var(--surface); color: var(--ink); }
input.input { min-width: 260px; }
input.input.date { min-width: 150px; width: 150px; }
.filter-label { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
select.input { min-width: 150px; }
.grow-spacer { flex: 1; }
.filter-bar .cbx.filter-cb { min-width: 190px; max-width: 240px; }

/* type-to-search combo box */
.cbx { position: relative; }
.cbx-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px rgba(0,0,0,.16); max-height: 264px; overflow-y: auto; padding: 4px; min-width: 320px; max-width: min(440px, 92vw); }
.cbx-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13.5px; }
.cbx-opt:hover, .cbx-opt.active { background: var(--surface-2, #f0f0f5); }
.cbx-label { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.cbx-sub { color: var(--muted); font-size: 12px; white-space: normal; }
.cbx-add { color: var(--brand, #6366f1); font-weight: 600; }
.cbx-empty { padding: 10px; color: var(--muted); font-size: 13px; }
/* "Did you mean:" heads the near-miss suggestions offered when a code search finds nothing. */
.cbx-didyou { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-top: 1px solid var(--line, #eee); }
.sr-count { color: var(--muted); font-size: 12.5px; padding: 4px 2px 12px; }
/* virtual-scrolled table (Stock Balance): internal scroll + sticky header, only visible rows in DOM */
.table-scroll.virtual { overflow: auto; min-height: 240px; }
.table-scroll.virtual thead th { position: sticky; top: 0; z-index: 3; background: var(--surface, #fff); }
.table-scroll.virtual thead th.row-actions { z-index: 4; }
.table-scroll.virtual thead { box-shadow: 0 1px 0 var(--line); }
.table-scroll.virtual tbody tr.click { height: 39px; }
.table-scroll.virtual tbody td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vspacer { pointer-events: none; }
/* click-to-edit price cells */
.editable-cell { cursor: pointer; }
.editable-cell .cell-val.empty { color: var(--muted); }
.editable-cell:hover .cell-val { text-decoration: underline dotted; text-underline-offset: 3px; }
.editable-cell.saving .cell-val { opacity: .5; }
.editable-cell.save-ok .cell-val { color: #16a34a; }
.editable-cell.save-err .cell-val { color: #dc2626; }

/* per-row action icons (Stock Balance) — pinned to the right edge so they stay visible while scrolling */
col.actions-col { width: 108px; }
th.row-actions, td.row-actions { position: sticky; right: 0; background: var(--surface); box-shadow: -6px 0 8px -8px rgba(0,0,0,.25); text-align: center; white-space: nowrap; }
tr.click:hover td.row-actions { background: var(--surface-hover, #f7f7fa); }
td.row-actions .icon-btn { padding: 3px 5px; }
/* ---- Change History (audit) timeline ---- */
.modal.ah-modal { width: min(680px, 96vw); max-height: 88vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--surface, #fff); border-radius: 14px; box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.ah-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.ah-title { font-size: 19px; font-weight: 700; margin-top: 2px; }
.ah-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ah-filters { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.ah-fchip { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 4px 13px; font-size: 12.5px; cursor: pointer; transition: all .12s; }
.ah-fchip:hover { border-color: var(--brand, #6366f1); color: var(--ink); }
.ah-fchip.active { background: var(--brand, #6366f1); border-color: var(--brand, #6366f1); color: #fff; }
.ah-feed { overflow-y: auto; padding: 6px 22px 14px; }
.ah-entry { display: flex; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line-soft, #f0f0f3); }
.ah-entry:last-child { border-bottom: none; }
.ah-avatar { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: .3px; }
.ah-body { flex: 1; min-width: 0; }
.ah-row1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ah-field { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 6px; background: #eef2ff; color: #4338ca; white-space: nowrap; }
.ah-field.k-price { background: #ecfdf5; color: #047857; }
.ah-field.k-note { background: #f3f4f6; color: #374151; }
.ah-field.k-status { background: var(--warn-soft); color: var(--warn); }
.ah-field.k-spec { background: #e0f2fe; color: #075985; }
.ah-field.k-event { background: #f5f3ff; color: #6d28d9; }
.ah-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ah-change { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 6px; }
.ah-chip { font-size: 13px; padding: 3px 10px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-chip.ah-old { color: var(--muted); text-decoration: line-through; background: #fafafa; }
.ah-chip.ah-new { font-weight: 600; border-color: #c7d2fe; background: #eef2ff; color: #3730a3; }
.ah-chip.ah-desc { white-space: normal; font-size: 12.5px; color: var(--ink); background: #fafafa; }
.ah-arrow { color: var(--muted); font-size: 13px; }
.ah-verb { font-size: 12px; color: var(--muted); }
.ah-who { font-size: 12.5px; color: var(--muted); }
.ah-foot { padding: 14px 22px; border-top: 1px solid var(--line); text-align: right; }
@media (prefers-color-scheme: dark) {
  .ah-field { background: #312e81; color: #c7d2fe; } .ah-field.k-price { background: #064e3b; color: #6ee7b7; }
  .ah-field.k-note { background: #374151; color: #e5e7eb; } .ah-field.k-status { background: #78350f; color: #fde68a; }
  .ah-field.k-spec { background: #075985; color: #bae6fd; } .ah-field.k-event { background: #4c1d95; color: #ddd6fe; }
  .ah-chip.ah-old { background: #1f2937; } .ah-chip.ah-new { background: #312e81; color: #c7d2fe; border-color: #4338ca; }
  .ah-chip.ah-desc { background: #1f2937; }
}
/* Same audit-chip dark palette for the in-app theme TOGGLE (data-theme), not just OS dark. */
:root[data-theme="dark"] .ah-field { background: #312e81; color: #c7d2fe; }
:root[data-theme="dark"] .ah-field.k-price { background: #064e3b; color: #6ee7b7; }
:root[data-theme="dark"] .ah-field.k-note { background: #374151; color: #e5e7eb; }
:root[data-theme="dark"] .ah-field.k-status { background: #78350f; color: #fde68a; }
:root[data-theme="dark"] .ah-field.k-spec { background: #075985; color: #bae6fd; }
:root[data-theme="dark"] .ah-field.k-event { background: #4c1d95; color: #ddd6fe; }
:root[data-theme="dark"] .ah-chip.ah-old { background: #1f2937; }
:root[data-theme="dark"] .ah-chip.ah-new { background: #312e81; color: #c7d2fe; border-color: #4338ca; }
:root[data-theme="dark"] .ah-chip.ah-desc { background: #1f2937; }
.icon-btn { background: none; border: none; cursor: pointer; font-size: 15px; padding: 4px 6px; border-radius: 6px; opacity: .7; }
.icon-btn:hover { opacity: 1; background: var(--surface-2, #f0f0f3); }

/* ---- Stock Receive form / detail ---- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head-actions { display: flex; gap: 8px; }
.breadcrumb { font-size: 13px; color: var(--muted); }
.breadcrumb a { color: var(--brand, #c2185b); text-decoration: none; }
.notice { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent); color: var(--warn); border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
.form-card { margin-bottom: 16px; padding: 18px; }
.form-grid { display: grid; gap: 14px 22px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.form-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.form-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.form-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.form-label .req { color: #dc2626; }
.input.full { width: 100%; min-width: 0; box-sizing: border-box; }
.input-suffix { display: flex; align-items: center; gap: 6px; }
.input-suffix .suffix { color: var(--muted); font-size: 13px; }
.inline-link { display: inline-block; margin-top: 6px; font-size: 12.5px; color: var(--brand, #c2185b); text-decoration: none; }
.hint { font-size: 12px; color: var(--muted); }
.form-section-title { font-weight: 700; font-size: 13px; margin: 18px 0 10px; }
.form-stack { display: flex; flex-direction: column; gap: 12px; }
.radio-row { display: flex; gap: 22px; align-items: center; height: 40px; }
.radio-opt { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; font-size: 14px; }
.cell-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.totals-row { display: flex; gap: 28px; justify-content: flex-end; padding: 14px 4px 2px; font-size: 14px; }
/* Stock Transfer create — inline item cards */
.xfer-item { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 12px 0; }
.xfer-head { display: flex; align-items: flex-end; gap: 12px; }
.xfer-pc { display: flex; align-items: center; gap: 14px; flex: 1; }
.xfer-pc-label { font-weight: 600; font-size: 14px; white-space: nowrap; }
.xfer-pc .cbx { flex: 1; }
.field-error { color: #dc2626; font-size: 12px; margin: 4px 0; }
.kv-grid.compact { grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 12px 0; }
.add-item-row { text-align: right; padding-top: 8px; }
.icon-btn.danger { color: #dc2626; }
/* Settings — logo upload */
.logo-upload { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-preview { display: flex; align-items: center; gap: 12px; }
.logo-preview img { max-width: 120px; max-height: 64px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; }
.logo-placeholder { width: 44px; height: 44px; }
.logo-placeholder svg { width: 44px; height: 44px; display: block; }
.preview-box { display: flex; align-items: center; height: 40px; }
.money-preview { font-size: 16px; font-weight: 700; color: var(--brand, #c81e6e); }
.check-list { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 6px 0; }
.check-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; cursor: pointer; }
/* Stock Take — scan-to-count two columns */
.take-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.take-cols .form-card { margin: 0; }
.take-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line-soft, #f0f0f3); }
.take-pc { font-weight: 700; font-size: 13.5px; }
.take-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.empty-rows.all-counted { color: #16a34a; font-weight: 600; }
.hint.err { color: #dc2626; }
.hint.ok { color: #16a34a; }
.take-cols.three { grid-template-columns: 1fr 1fr 1fr; }
.take-sub.muted { opacity: .8; }
.hint.warn { color: var(--warn); }
@media (max-width: 1100px) { .take-cols.three { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .take-cols { grid-template-columns: 1fr; } }

/* stock take — live session chrome */
.live-dot { color: #16a34a; font-size: 12px; font-weight: 700; margin-right: 10px; animation: bnpulse 1.6s ease-in-out infinite; }
@keyframes bnpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.take-progress { height: 8px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin: 4px 2px 12px; }
.take-progress-fill { height: 100%; background: var(--brand); width: 0; transition: width .3s ease; }
.take-stats { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.take-stats.report { margin-top: 12px; }
.take-stat { flex: 1; min-width: 96px; background: var(--surface); border: 1px solid var(--line, #e6e6ea); border-radius: 12px; padding: 12px 14px; text-align: center; }
.take-stat-v { font-size: 22px; font-weight: 800; line-height: 1.1; }
.take-stat-l { font-size: 11.5px; color: var(--muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .03em; }
.take-stat.ok .take-stat-v { color: var(--good); } .take-stat.bad .take-stat-v { color: var(--danger); } .take-stat.warn .take-stat-v { color: var(--warn); }
.form-actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.btn.lg { padding: 10px 18px; font-size: 14px; }
.input.lg { padding: 11px 14px; font-size: 15px; }
.meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.meta-l { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.meta-v { font-size: 13.5px; margin-top: 2px; }
@media (max-width: 700px) { .meta-grid { grid-template-columns: 1fr; } }

/* ===== stock take — live session (scanner-first UI) ===== */
.st-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.st-topbar-r { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.st-btngrps { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.st-btngrp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-btngrp-l { font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 2px; }
@media (max-width: 600px) { .st-btngrps { align-items: flex-start; } }
.st-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.st-eyebrow .live-dot { margin: 0; font-size: 10px; }
.st-title { font-size: 24px; font-weight: 800; margin-top: 2px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.st-verdict { font-size: 12px; font-weight: 700; }
.st-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.st-sound { white-space: nowrap; }
.st-presence { display: flex; align-items: center; gap: 4px; }
.st-avatar { width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-left: -6px; border: 2px solid var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.st-avatar:first-child { margin-left: 0; }
.st-presence-lbl { font-size: 12px; color: var(--muted); margin-left: 8px; white-space: nowrap; }
.st-presence-none { font-size: 12px; color: var(--muted); }

/* scan hero */
.st-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.st-scan-wrap { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 2px solid var(--brand); border-radius: 12px; padding: 4px 14px; box-shadow: 0 4px 16px rgba(124,58,237,.12); }
.st-scan-wrap:focus-within { box-shadow: 0 0 0 4px rgba(124,58,237,.18); }
.st-scan-ico { letter-spacing: -2px; color: var(--brand); font-size: 18px; opacity: .7; user-select: none; }
.st-scan { flex: 1; border: 0; outline: 0; background: transparent; font-size: 22px; font-weight: 600; padding: 12px 0; color: var(--ink); }
.st-flash { margin-top: 14px; border-radius: 12px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
.st-flash-big { font-size: 22px; font-weight: 800; }
.st-flash-small { font-size: 13px; color: var(--muted); margin-top: 3px; }
.st-flash.idle { opacity: .8; }
.st-flash.ok { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 32%, transparent); } .st-flash.ok .st-flash-big { color: var(--good); }
.st-flash.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 32%, transparent); } .st-flash.warn .st-flash-big { color: var(--warn); }
.st-flash.err { background: var(--danger-bg); border-color: #f4c0c0; } .st-flash.err .st-flash-big { color: var(--danger); }
.st-flash.pulse { animation: stpulse .4s ease; }
@keyframes stpulse { 0% { transform: scale(.98); } 40% { transform: scale(1.015); } 100% { transform: scale(1); } }

/* metrics: ring + tiles */
.st-metrics { display: flex; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.st-ring { flex: 0 0 auto; width: 150px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; justify-content: center; padding: 10px; }
.st-ring-svg { width: 128px; height: 128px; }
.st-ring-track { fill: none; stroke: var(--line-2); stroke-width: 12; }
.st-ring-fill { fill: none; stroke: url(#g); stroke: #7c3aed; stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.st-ring-big { font-size: 26px; font-weight: 800; fill: var(--ink); text-anchor: middle; }
.st-ring-small { font-size: 12px; fill: var(--muted); text-anchor: middle; }
.st-tiles { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.st-tiles.report { grid-template-columns: repeat(5, 1fr); flex: 1; }

/* lower: activity feed + tabbed lists */
.st-lower { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.st-feed-card, .st-lists-card { margin: 0; }
.st-feed { display: flex; flex-direction: column; gap: 2px; max-height: 460px; overflow-y: auto; }
.st-feed-item { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--line-soft, #f0f0f3); }
.st-feed-dot { width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.st-feed-dot.ok { background: var(--good-soft); color: var(--good); } .st-feed-dot.warn { background: var(--warn-soft); color: var(--warn); }
.st-feed-main { flex: 1; min-width: 0; }
.st-feed-pc { font-weight: 700; font-size: 13px; }
.st-feed-sub { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-feed-time { font-size: 11px; color: var(--muted); white-space: nowrap; }
.st-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.st-tab { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--muted); }
.st-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.st-tab-n { font-size: 11px; font-weight: 700; background: var(--line-2); color: var(--muted); border-radius: 999px; padding: 1px 7px; }
.st-tab.active .st-tab-n { background: rgba(255,255,255,.25); color: #fff; }
.st-tab-n.bad { background: var(--danger-bg); color: var(--danger); } .st-tab-n.ok { background: var(--good-soft); color: var(--good); } .st-tab-n.warn { background: var(--warn-soft); color: var(--warn); }
.st-list-tools { margin-bottom: 8px; }
.st-search { width: 100%; }
.st-list { max-height: 520px; overflow-y: auto; }
.take-item-main { min-width: 0; }
.take-badge { margin-left: 8px; font-size: 10px; vertical-align: middle; }

/* report head */
.st-report-head { display: flex; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.st-donut-card { margin: 0; flex: 0 0 auto; width: 190px; display: flex; align-items: center; justify-content: center; }
.st-donut .st-ring-svg { width: 150px; height: 150px; }

@media (max-width: 1000px) {
  .st-metrics { flex-direction: column; } .st-ring { width: 100%; }
  .st-tiles, .st-tiles.report { grid-template-columns: repeat(2, 1fr); }
  .st-lower { grid-template-columns: 1fr; } .st-report-head { flex-direction: column; } .st-donut-card { width: 100%; }
}
.modal-scroll { overflow-y: auto; padding: 4px 2px; }
.empty-rows { color: var(--muted); font-size: 13px; padding: 20px 4px; }
.img-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.img-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.img-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-2, #f5f5f7); border-radius: 8px; padding: 6px 10px; font-size: 12.5px; }
.img-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) { .form-grid.two, .form-grid.three { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.btn { height: 34px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--ink); }
.btn:hover { background: var(--surface-2); }
.btn[disabled] { opacity: .4; cursor: default; }
.btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-ink); }

/* pills */
.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--line-2); color: var(--muted); }
.pill.ok { background: var(--good-soft); color: var(--good); } .pill.bad { background: var(--danger-bg); color: var(--danger); }
.pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.muted { background: var(--line-2); color: var(--muted); }
.pill.info { background: var(--info-soft); color: var(--info); }
tr.row-muted td { opacity: .5; }
tr.row-muted .pill { opacity: 1; }
.btn.sm { height: 26px; padding: 0 10px; font-size: 12px; }
.sold-banner { background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 32%, transparent); border-radius: 12px; padding: 14px 16px; margin: 4px 0 14px; }
.sold-banner .kv-grid { gap: 10px 18px; } .sold-banner .kv-v strong { color: var(--good); font-size: 15px; }
.sold-banner.restricted { background: var(--surface-2); border-color: var(--line); }
.flow-arrow { color: #4b5162; font-weight: 500; }
.st-feed-pc .flow-arrow { margin-left: 10px; font-weight: 400; color: #6b7280; }
.check-cell { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.check-cell input, .flag-row input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--brand); }
.flag-row { display: flex; gap: 28px; flex-wrap: wrap; }
.flag-row .check { font-size: 14px; }
.settle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.settle-v { font-size: 20px; font-weight: 800; margin-top: 3px; }
.settle-v.neg { color: var(--danger); } .settle-v.pos { color: var(--good); }
td .neg, .kv-v .neg, strong.neg { color: var(--danger); }
@media (max-width: 700px) { .settle-grid { grid-template-columns: 1fr; } }

/* clickable rows + pager */
tr.click { cursor: pointer; } tr.click:hover td { background: var(--surface-2); }
.table.small td, .table.small th { padding: 6px 8px; font-size: 12.5px; }
.pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; padding-top: 14px; }
.pager-info { color: var(--muted); font-size: 12.5px; margin-right: auto; }

/* modal / drawer */
.modal-overlay { position: fixed; inset: 0; background: rgba(16,20,26,.45); display: flex; justify-content: flex-end; z-index: 50; }
.modal-overlay.center { justify-content: center; align-items: center; }
.modal.arrange { width: min(560px, 94vw); max-height: 86vh; overflow-y: auto; background: var(--surface); border-radius: 14px; padding: 22px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.arrange-list { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.arrange-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); cursor: grab; font-size: 13.5px; }
.arrange-row:last-child { border-bottom: none; }
.arrange-row:active { cursor: grabbing; }
.arrange-row:hover { background: var(--surface-2); }
.arrange-row.dragging { opacity: .4; }
.arrange-row.drop-target { box-shadow: inset 0 3px 0 var(--brand); background: var(--brand-soft); }
.drag-handle { color: #b4b7bd; font-size: 15px; letter-spacing: -3px; cursor: grab; }
.arrange-label { flex: 1; }
.arrange-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.hidden { display: none; }
.drawer-eyebrow { font-size: 11px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }
.drawer-foot { position: sticky; bottom: 0; background: var(--surface); display: flex; gap: 10px; padding: 14px 0 6px; margin-top: 20px; border-top: 1px solid var(--line); }
.drawer-foot .btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; }
.edit-modal { width: min(640px, 94vw); }
.edit-body { display: flex; flex-direction: column; }
.edit-lbl { font-size: 12px; color: var(--muted); margin-top: 12px; margin-bottom: 4px; }
.input.full { width: 100%; height: 40px; }
.edit-prices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.edit-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.edit-field input { width: 112px; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.edit-err { color: var(--danger); font-size: 12.5px; margin-top: 10px; min-height: 1em; }
.drawer { width: min(560px, 94vw); background: var(--surface); height: 100%; overflow-y: auto; padding: 22px 24px; box-shadow: -4px 0 24px rgba(0,0,0,.12); }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.drawer-title { font-size: 18px; font-weight: 650; }
.drawer-sub { color: var(--muted); font-size: 13px; }
.btn-x { border: none; background: none; font-size: 16px; cursor: pointer; color: var(--muted); }
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; margin-bottom: 20px; }
.phone-row { display: flex; gap: 8px; align-items: stretch; }
.phone-row .phone-cc-wrap { flex: 0 0 168px; min-width: 0; display: flex; }
.phone-row .phone-cc { width: 168px; min-width: 0; max-width: 168px; flex: 0 0 168px; padding: 0 8px; font-weight: 600; background: var(--surface-2); }
.phone-row .phone-n { flex: 1; min-width: 0; }
.kv { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid #f0f1f3; padding: 6px 0; font-size: 13px; }
.kv .kv-v { text-align: right; }
.kv-k { color: var(--muted); } .kv-v { font-weight: 500; }
.drawer-section { margin-top: 18px; }
.drawer-section-title { font-weight: 600; font-size: 13.5px; margin-bottom: 10px; }
.price-edit { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.price-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.price-field input { width: 100px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; }
.ta { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13.5px; resize: vertical; }
.readonly-tag { margin-left: auto; font-size: 11.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; background: #f3f4f6; }
.muted-lbl { font-size: 12px; color: var(--muted); }
/* Invoice payment breakdown — Method / Amount / Reference. Columns live here (not inline) so the phone rule
   below can stack them; inline widths cannot be overridden by a media query. */
.pay-grid { grid-template-columns: 140px 150px 1fr; gap: 8px; align-items: center; margin-bottom: 6px; }
.pay-grid-head { margin-bottom: 4px; }
.lead { color: var(--muted); margin: 0 0 18px; max-width: 720px; }
.feed-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.card-title-inline { font-weight: 600; font-size: 14px; }
.feed-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.feed-more { color: var(--muted); font-size: 12px; margin-top: 10px; }
.date-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.date-range .input { height: 34px; }
.kpi-row.tight { grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 18px; }
.kpi-row.tight .kpi { padding: 14px 16px; }
.kpi-row.tight .kpi-value { font-size: 22px; }
.feed-head.wrap { flex-wrap: wrap; gap: 12px; }
/* salesman summary tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 18px; }
.tile { border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; background: var(--surface); }
.tile-label { color: var(--muted); font-size: 12px; font-weight: 500; }
.tile-value { font-size: 20px; font-weight: 750; margin-top: 6px; letter-spacing: -.02em; }
.tile-value.green, td.num-green { color: var(--good); }
td.num-green { font-weight: 500; }
/* performance detail modal */
/* these need .modal.arrange specificity to override the base .modal.arrange width */
.modal.arrange.detail-modal { width: min(1240px, 97vw); max-height: 92vh; }
.modal.arrange.unit-modal { width: min(820px, 95vw); max-height: 92vh; }
.unit-modal .kv-grid { grid-template-columns: 1fr 1fr; }
.detail-modal .table.small td, .detail-modal .table.small th { padding: 9px 12px; font-size: 13px; white-space: nowrap; }
.detail-modal .drawer-section-title { font-size: 15px; }
.detail-actions { display: flex; gap: 16px; }
.btn-link { border: none; background: none; color: var(--brand-ink); font-size: 13px; font-weight: 500; cursor: pointer; padding: 2px 0; }
.btn-link:hover { text-decoration: underline; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
.seg { display: inline-flex; background: var(--line-2); border-radius: 10px; padding: 3px; gap: 2px; margin-bottom: 16px; }
.seg-btn { display: inline-flex; align-items: center; gap: 7px; border: none; background: transparent; padding: 7px 16px; border-radius: 8px; font-size: 13.5px; cursor: pointer; color: var(--muted); }
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { background: var(--surface); color: var(--ink); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }
.seg-count { font-size: 11.5px; background: rgba(0,0,0,.06); border-radius: 999px; padding: 1px 8px; color: inherit; }
.seg-btn.active .seg-count { background: var(--brand); color: #fff; }
.btn.ghost { border-style: dashed; color: var(--muted); }
.input.grow { flex: 1; min-width: 260px; }
.filter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 16px; }
.filter-grid .input { min-width: 0; width: 100%; }
.table-scroll { overflow-x: auto; }
/* A wide table on a Mac hides its scrollbar until you touch it, so the right-hand columns simply look cut off
   (FB-000075). Draw a thin, always-visible bar under every sideways-scrolling table instead. */
.table-scroll::-webkit-scrollbar, .acc-mwrap::-webkit-scrollbar, .a2-scroll::-webkit-scrollbar, .grid-scroll::-webkit-scrollbar { height: 10px; width: 10px; }
.table-scroll::-webkit-scrollbar-track, .acc-mwrap::-webkit-scrollbar-track, .a2-scroll::-webkit-scrollbar-track, .grid-scroll::-webkit-scrollbar-track { background: var(--surface-2, #f6f6fa); border-radius: 5px; }
.table-scroll::-webkit-scrollbar-thumb, .acc-mwrap::-webkit-scrollbar-thumb, .a2-scroll::-webkit-scrollbar-thumb, .grid-scroll::-webkit-scrollbar-thumb { background: #c4c7cf; border-radius: 5px; border: 2px solid var(--surface-2, #f6f6fa); }
.table-scroll::-webkit-scrollbar-thumb:hover, .acc-mwrap::-webkit-scrollbar-thumb:hover, .a2-scroll::-webkit-scrollbar-thumb:hover, .grid-scroll::-webkit-scrollbar-thumb:hover { background: #9aa0ab; }
.table-scroll, .acc-mwrap, .a2-scroll, .grid-scroll { scrollbar-width: thin; scrollbar-color: #c4c7cf var(--surface-2, #f6f6fa); }
/* Spreadsheet-style cell navigation: focus box + copy flash (see grid.js attachCellNav) */
.table.fixed td:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); border-radius: 3px; }
.table.fixed td.cell-copied { box-shadow: inset 0 0 0 2px var(--ok); background: rgba(34,197,94,.12); transition: background .1s; }
.cell-remark { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; color: var(--muted); font-size: 12.5px; }
.cell-price { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; background: var(--surface); text-align: right; }
.cell-price:hover { border-color: var(--border-strong, #c9ccd1); }
.cell-price:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(124,58,237,.15); outline: none; }
.cell-price.saving { border-color: var(--brand); }
.cell-price.save-ok { border-color: var(--ok); background: #f0fdf4; }
.cell-price.save-err { border-color: var(--danger); background: var(--danger-bg); }
.cell-text { width: 100%; height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 12.5px; background: var(--surface); }
.cell-text:hover { border-color: #c9ccd1; }
.cell-text:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(124,58,237,.15); outline: none; }
.cell-text.saving { border-color: var(--brand); }
.cell-text.save-ok { border-color: var(--ok); background: #f0fdf4; }
.cell-text.save-err { border-color: var(--danger); background: var(--danger-bg); }
/* kill number-input spinner arrows everywhere */
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* sortable headers */
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--ink); }
th.sortable.active { color: var(--brand); }
.th-col { position: relative; user-select: none; white-space: nowrap; cursor: grab; padding-right: 16px; }
.th-col:active { cursor: grabbing; }
.th-col.dragging { opacity: .4; }
.th-col.drop-target { box-shadow: inset 3px 0 0 var(--brand); background: var(--brand-soft); }
/* per-column filters (shared Grid) */
.grid-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.grid-filter-row .th-filter { padding: 4px 6px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.grid-filter-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 12px; padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.grid-filter-input::placeholder { color: var(--faint); }
.grid-filter-input:focus { outline: none; border-color: var(--brand); }
/* column resize */
table.fixed { table-layout: fixed; }
table.fixed th, table.fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* hand-built tables upgraded by ui.enhanceTables(): same heading affordances as the Grid */
.th-enh { position: relative; user-select: none; white-space: nowrap; padding-right: 18px; }
.th-enh .sort-ind { opacity: .55; font-size: 10px; }
.th-enh.active .sort-ind { opacity: 1; }
table.enh-fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-resizer { position: absolute; top: 0; right: 0; width: 10px; height: 100%; cursor: col-resize; z-index: 3; }
.col-resizer::after { content: ""; position: absolute; right: 3px; top: 16%; height: 68%; width: 2px; border-radius: 2px; background: transparent; }
.col-resizer:hover::after { background: var(--brand); }
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing .col-resizer::after { background: var(--brand); }

/* multi-select filter */
.ms { position: relative; }
.ms-btn { display: flex; align-items: center; gap: 6px; width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13.5px; cursor: pointer; color: var(--ink); text-align: left; }
.ms-btn:hover { border-color: #c9ccd1; }
.ms-btn.has { border-color: var(--brand); color: var(--brand-ink); }
.ms-btn > span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-badge { min-width: 18px; text-align: center; font-size: 11px; background: var(--brand); color: #fff; border-radius: 999px; padding: 1px 6px; }
.ms-badge:empty { display: none; }
.ms-caret { color: var(--muted); font-size: 10px; }
.ms-panel { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: 280px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 28px rgba(16,24,40,.14); padding: 8px; }
.ms-panel.hidden { display: none; }
.ms-search { width: 100%; height: 32px; margin-bottom: 6px; }
.ms-list { max-height: 240px; overflow-y: auto; }
.ms-opt { display: flex; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.ms-opt:hover { background: var(--surface-2); }
.ms-clear { width: 100%; margin-top: 6px; border: none; background: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 6px; border-top: 1px solid var(--line); }
.ms-clear:hover { color: var(--danger); }
.cols-panel { left: auto; right: 0; }
.cols-panel .ms-list { max-height: 320px; }
@media (max-width: 1100px) { .filter-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .filter-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 700px) {
  /* Phones: single column — the sidebar becomes an off-canvas drawer toggled by ☰, closing after a tap. */
  #app { grid-template-columns: 1fr; }
  body.nav-collapsed #app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 264px; z-index: 60;
    transform: translateX(-100%); transition: transform .25s ease;
    flex-direction: column; flex-wrap: nowrap; overflow-y: auto;
    box-shadow: 0 0 40px rgba(0,0,0,.45);
  }
  body.nav-collapsed .sidebar { display: flex; }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .nav-backdrop { display: block; }
}
@media (max-width: 860px) {
  /* Stop iOS Safari from auto-zooming when a field is focused (any font < 16px triggers it). */
  .input, input.input, select.input, textarea, .ta, input, select { font-size: 16px; }
  /* (The slide-in drawer lives in the ≤700px block below — phones only. A tablet or a narrow desktop window keeps
     the docked sidebar, which stays open until ☰ hides it; FB-000077 "when I click the side it auto closes".) */

  .topbar { padding: 12px 16px; position: sticky; top: 0; z-index: 30; flex-wrap: wrap; row-gap: 8px; }
  .topbar h1 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .user-role { display: none; }
  /* The branch picker, Today, Report, bell, name and sign-out are one row almost twice a phone's width. Let
     the cluster take its own full-width line under the title and wrap, so nothing sits off the right edge. */
  .topbar-right { flex: 1 1 100%; min-width: 0; }
  .user-menu { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }

  .view { padding: 16px 13px; }
  .kpi-row.tight, .grid-2 { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .kv-grid, .unit-modal .kv-grid, .kv-grid.compact { grid-template-columns: 1fr; }
  .page-head { gap: 8px; flex-wrap: wrap; }
  .page-head-actions { flex-wrap: wrap; }
  /* touch-friendly rows + wrapping controls */
  .seg { display: flex; width: 100%; }
  .seg-btn { flex: 1 1 0; justify-content: center; }
  .chip-bar { gap: 6px; }
  .tabs { overflow-x: auto; }

  /* filters + inputs go full-width and stack cleanly */
  .filter-bar { gap: 8px; }
  .filter-bar > .input, .filter-bar input.input, .filter-bar select.input { flex: 1 1 160px; min-width: 0; }
  .grow-spacer { display: none; }

  /* lookups manager stacks: table list becomes a wrap of chips above the panel */
  .lk-layout { flex-direction: column; }
  .lk-nav { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
  .lk-nav .lookup-nav-item { flex: 0 1 auto; }
}

/* ---- Roles & Access page ---- */
.tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tab { background: none; border: none; padding: 8px 16px; cursor: pointer; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; }
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.check-grid { display: grid; gap: 9px 18px; padding: 6px 0; }
.check-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.check-grid .check { color: var(--ink); font-size: 13px; cursor: pointer; align-items: flex-start; }
.check-grid .check input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; margin-top: 1px; }
.check.disabled { opacity: .5; cursor: default; }
.muted-note { color: var(--muted); font-size: 12.5px; margin: 6px 0 2px; }
tr.dimmed { opacity: .55; }
.link { color: var(--brand); font-size: 13px; }
.drawer.wide { width: min(720px, 96vw); }
.input.compact, .btn.compact { padding: 4px 10px; font-size: 13px; height: auto; min-width: 0; }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.btn.danger:hover { background: var(--danger-bg, #fdecec); }
@media (max-width: 700px) { .check-grid.cols-3, .check-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Deposit outcome chooser (reservation cancel) */
.deposit-choices { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
.deposit-choice { text-align: left; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; transition: border-color .12s, background .12s; }
.deposit-choice:hover { border-color: var(--brand); }
.deposit-choice.active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.deposit-choice .dc-title { font-weight: 600; font-size: 14px; color: var(--ink); }
.deposit-choice .dc-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---- Login gate ---- */
.login-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1130, #241a3a 55%, #10131a); padding: 20px; }
.login-logo { max-height: 52px; max-width: 200px; object-fit: contain; display: block; }
.brand-logo { height: 30px; width: 30px; object-fit: contain; border-radius: 8px; background: #fff; }
.login-card { width: min(400px, 94vw); background: var(--surface, #fff); border-radius: 16px; padding: 32px 30px; box-shadow: 0 24px 70px rgba(0,0,0,.4); }
.login-brand { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; color: var(--ink); }
.login-brand .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; }
.login-sub { color: var(--muted); font-size: 13.5px; margin: 4px 0 22px; }
.login-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 12px 0 5px; }
.login-overlay .input.full { width: 100%; box-sizing: border-box; }
.login-err { color: var(--danger, #dc2626); font-size: 13px; min-height: 18px; margin: 10px 0 4px; }
.btn.full { width: 100%; display: flex; align-items: center; justify-content: center; height: 42px; font-size: 15px; margin-top: 6px; }

/* signed-in user chip in the topbar */
.user-menu { display: flex; align-items: center; gap: 10px; }
.user-chip { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.user-chip .user-name { font-weight: 650; font-size: 13.5px; color: var(--ink); }
.user-chip .user-role { font-size: 11.5px; color: var(--muted); }
.pw-btn .pw-icon { display: none; }

/* Setup page — how-to guide */
.setup-guide { display: flex; flex-direction: column; gap: 16px; }
.setup-step { display: flex; gap: 12px; align-items: flex-start; }
.setup-step-n { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.setup-step-t { font-weight: 600; font-size: 14px; color: var(--ink); }
.setup-step-b { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.5; }

/* RemarkTags — multi-select chips input for issues/remarks */
.tag-input{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:38px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.tag-input.disabled{background:var(--surface-2);opacity:.7}
.tag-chip{display:inline-flex;align-items:center;gap:5px;background:var(--line-2);color:var(--ink);border-radius:6px;padding:3px 8px;font-size:12.5px;white-space:nowrap}
.tag-chip .tag-x{border:0;background:transparent;cursor:pointer;color:#8a8f9c;font-size:11px;padding:0;line-height:1}
.tag-chip .tag-x:hover{color:#c81e6e}
.tag-entry{border:0;outline:none;flex:1;min-width:130px;font-size:13.5px;background:transparent;padding:2px}
.filter-grid .refund-check,.refund-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}

/* ---- Repair module (Berry Fix): status filter chips, clickable rows, single-col kv ---- */
.chip { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; cursor: pointer; transition: all .12s; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--surface-2, #f6f6f9); }
.kv-grid.one { grid-template-columns: 1fr; gap: 6px; }

/* ---- P&L statement ---- */
.pnl-table td { padding: 7px 14px; }
.pnl-table tr.pnl-total td { border-top: 1px solid var(--line); font-weight: 600; }
.pnl-table .pnl-bold { font-weight: 600; }
.pnl-table tr.pnl-indent td:first-child { font-size: 12.5px; }
.pnl-table tr.pnl-head td { padding-top: 15px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pnl-table tr.pnl-head:first-child td { padding-top: 4px; }
.pnl-table tr.pnl-detail td:first-child { font-size: 12px; }
.pnl-table .pnl-caret { font-size: 10px; color: var(--muted); }
.bs-sub { padding-left: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.bs-auto { display: inline-block; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--chip-bg, #eef1f5); border-radius: 4px; padding: 1px 6px; }
.bs-banner { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 11px 14px; border-radius: 8px; font-size: 13px; }
.bs-banner .bs-banner-icon { font-weight: 700; font-size: 15px; }
.bs-banner.ok { background: var(--good-soft); color: var(--good); }
.bs-banner.off { background: var(--danger-bg); color: var(--danger); }

/* ---- Repair: guided stages + test ticks ---- */
.stage-card { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.stage-card.current { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; }
.stage-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; user-select: none; }
.stage-head:hover { background: rgba(0,0,0,.02); }
.stage-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--line-2); color: var(--muted); flex: none; }
.stage-num.current { background: var(--brand); color: #fff; }
.stage-num.done { background: #15803d; color: #fff; }
.stage-title { font-weight: 600; font-size: 14px; }
.stage-state { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.stage-state.current { color: var(--brand); font-weight: 600; }
.stage-caret { color: var(--muted); font-size: 12px; width: 14px; text-align: center; }
.stage-body { padding: 12px 14px 2px; background: rgba(0,0,0,.012); }
.stage-body > .card { margin-bottom: 12px; }
.test-tick { width: 44px; height: 32px; border: 1px solid var(--line); border-radius: 7px; font-size: 16px; font-weight: 700; cursor: pointer; background: #fff; line-height: 1; padding: 0; }
.test-tick.none { color: #9aa1b2; }
.test-tick.ok { color: var(--good); border-color: color-mix(in srgb, var(--good) 32%, transparent); background: var(--good-soft); }
.test-tick.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 32%, transparent); background: var(--danger-bg); }
.test-tick.na { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 32%, transparent); background: var(--warn-soft); font-size: 11px; }
.test-table td { vertical-align: middle; }

/* ---- Repair job wizard (one stage per screen) ---- */
.wiz-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.wiz-step { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; font-size: 13px; color: var(--ink, #232838); }
.wiz-step:hover { border-color: var(--brand); }
.wiz-step .wiz-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--line-2); color: var(--muted); flex: none; }
.wiz-step.current { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; font-weight: 600; }
.wiz-step.current .wiz-num { background: var(--brand); color: #fff; }
.wiz-step.done .wiz-num { background: #15803d; color: #fff; }
.wiz-step.todo { color: var(--muted); }
.wiz-arrow { color: #c9ced9; }
.wiz-head { margin-bottom: 12px; }
.wiz-head-title { font-weight: 700; font-size: 16px; }
.wiz-head-sub { color: var(--muted); font-size: 12px; margin-left: 8px; }
.wiz-foot { display: flex; align-items: center; margin: 18px 0 4px; }

/* ---- Staff Guide ---- */
.guide-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; margin-bottom: 14px; flex-wrap: wrap; }
.guide-role { font-weight: 600; }
.guide-index { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.guide-chip { display: inline-block; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--ink, #232838); background: #fff; }
.guide-chip:hover { border-color: var(--brand); color: var(--brand); }
.guide-section { margin-bottom: 16px; overflow: hidden; }
.guide-sec-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.015); }
.guide-sec-icon { font-size: 22px; }
.guide-sec-title { font-weight: 700; font-size: 15px; }
.guide-steps { padding: 6px 16px 14px; }
.guide-step { padding: 14px 0; border-bottom: 1px solid var(--line); }
.guide-step:last-child { border-bottom: 0; }
.guide-step-h { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.guide-step-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.guide-step-body { font-size: 13.5px; line-height: 1.6; color: #333a4d; }
.guide-step-body b { color: #1c2030; }
.guide-shot { display: block; max-width: 100%; margin: 12px 0 2px; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.guide-shot-ph { margin: 12px 0 2px; padding: 22px; border: 1px dashed var(--line); border-radius: 8px; text-align: center; color: var(--muted); font-size: 12px; background: rgba(0,0,0,.01); }
.guide-shot-svg { line-height: 0; padding: 0; background: #fff; }
.guide-shot-svg svg { display: block; width: 100%; height: auto; }

/* ---- Phones (≤560px): denser tables, single-column checkbox grids, tidier topbar ---- */
@media (max-width: 560px) {
  .view { padding: 14px 11px; }
  .table td, .table th { padding: 8px 10px; }
  .table.small td, .table.small th, .pnl-table td { padding: 6px 9px; font-size: 12px; }
  .check-grid.cols-3, .check-grid.cols-2 { grid-template-columns: 1fr; }
  .kpi-value { font-size: 24px; }
  .topbar-right .btn.compact { padding: 5px 9px; font-size: 12px; }
  .modal.arrange, .modal.drawer.wide, .modal.unit-modal, .modal.detail-modal { width: 96vw; max-width: 96vw; }
  .date-range { flex-wrap: wrap; }
  .user-chip { display: none; }   /* name + role; the bell, Today and Sign out are what a phone needs */
  .pw-btn .pw-text { display: none; } .pw-btn .pw-icon { display: inline; } /* "Change password" → 🔑 */
  .pay-grid { grid-template-columns: 1fr; gap: 4px; margin-bottom: 10px; }
  .pay-grid-head { display: none; } /* column headings mean nothing once the columns are stacked */
}

/* ---- Lookups grouped by area ---- */
.lk-group-head { width: 100%; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 12px 12px 4px; }
.lk-group-head:first-child { padding-top: 4px; }
.lk-panel-head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.lk-area-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); background: rgba(124,58,237,.10); border-radius: 6px; padding: 3px 9px; }

/* Stale-build nag — sits above everything, out of the way of the page it interrupts. */
.build-nag{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:9999;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  max-width:min(680px,94vw);padding:11px 15px;border-radius:12px;background:var(--ink,#232838);color:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,.28);font-size:13.5px;line-height:1.4}
.build-nag .btn{white-space:nowrap}
.build-nag .btn:not(.primary){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#fff}

/* Repair Jobs — colour-code each row by job type so the queue reads at a glance.
   Asked for by the Repair HOD (FB-000021): warranty claim red, customer repair blue, buy-back green.
   A warranty claim is a FLAG sitting on top of a type rather than a type of its own, and it is the one
   nobody should miss, so it wins over the underlying type. In-house is the everyday bulk of the queue
   (89 of 134 jobs), so it gets a quiet grey rather than a fourth shouting colour.
   Drawn with an inset shadow rather than a border because the table uses collapsed borders, where a
   border-left on a row is unreliable across browsers. Colours come from the theme tokens, so they hold
   in dark mode too. */
tr.jt-warranty > td:first-child { box-shadow: inset 4px 0 0 var(--bad); }
tr.jt-customer > td:first-child { box-shadow: inset 4px 0 0 var(--info); }
tr.jt-buyback  > td:first-child { box-shadow: inset 4px 0 0 var(--ok); }
tr.jt-inhouse  > td:first-child { box-shadow: inset 4px 0 0 var(--line); }

/* A colour code nobody can read is decoration, so the key sits above the table. */
.jt-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.jt-legend span { display: inline-flex; align-items: center; gap: 5px; }
.jt-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Repair Jobs — short identifier fields shown in CAPITALS, asked for by the Repair HOD (FB-000020):
   "nak semua tulisan besar ... kecuali perkara yang memang diperlukan besar / kecil / simbol seperti unlock pin".
   DISPLAY ONLY — text-transform changes what is drawn, never what is stored, so anything typed in mixed case
   is still saved and exported exactly as entered.
   Applied to names, device, brand, model, colour and repair type. Deliberately NOT applied to whole
   sentences (problem reported, condition before, notes), where capitals slow reading rather than help, nor
   to the unlock PIN, email or serial, where upper case, lower case and symbols carry meaning. */
.uc-text { text-transform: uppercase; }