/* ── UTILITY ─────────────────────────────────────────────── */
.mono { font-family: monospace; }

/* ── LOGIN SCREEN ───────────────────────────────────────── */
#login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); padding: 20px; }
.lcard { background: var(--s); border: 1px solid var(--bd); border-radius: var(--r); padding: 48px 40px; width: min(380px, 92vw); box-shadow: 0 4px 24px rgba(0,0,0,.08); }
.ll { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tx2); margin-bottom: 8px; }
.lt { font-size: 24px; font-weight: 600; margin-bottom: 4px; color: var(--tx); }
.ls2 { font-size: 13px; color: var(--tx2); margin-bottom: 32px; }
.lf { margin-bottom: 16px; }
.lf label { font-size: 13px; font-weight: 500; color: var(--tx2); display: block; margin-bottom: 6px; }
.lf input { width: 100%; padding: 12px 12px; border: 1px solid var(--bd); border-radius: var(--r2); font-family: 'DM Sans', sans-serif; font-size: 16px; color: var(--tx); background: var(--s); outline: none; transition: border .15s; }
.lf input:focus { border-color: var(--ac); }
.lbtn { width: 100%; padding: 13px; background: var(--tx); color: #fff; border: none; border-radius: var(--r2); font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 500; cursor: pointer; margin-top: 8px; transition: opacity .15s; min-height: 48px; }
.lbtn:hover { opacity: .85; }
.lerr { font-size: 13px; color: var(--ac); margin-top: 10px; display: none; }
/* "Stay signed in". .lf sets inputs to width:100% and labels to display:block —
   both wrong for a checkbox — so this row overrides them rather than inventing a
   second form class. Shown only for a login that may use it (lUserChanged). */
.lstay { display: flex; align-items: center; gap: 9px; margin-top: -4px; }
.lstay input { width: auto; padding: 0; margin: 0; min-width: 17px; min-height: 17px; accent-color: var(--ac); }
.lstay label { display: inline; margin: 0; font-size: 13px; color: var(--tx2); cursor: pointer; }
/* Why the login screen is being shown — signed out for idleness, or by the
   forced sign-out. Neutral, not an error: nothing has gone wrong. */
.lnote { font-size: 13px; color: var(--tx2); margin-top: 14px; padding: 10px 12px; background: var(--s2); border: 1px solid var(--bd); border-radius: var(--r2); line-height: 1.45; text-align: left; }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: var(--r2); border: none; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: all .15s; min-height: 36px; }
.btn-sm { padding: 6px 11px; font-size: 12px; min-height: 30px; }
.btn-ac { background: var(--ac); color: #fff; } .btn-ac:hover { opacity: .9; }
.btn-out { background: transparent; border: 1px solid var(--bd); color: var(--tx2); } .btn-out:hover { border-color: #aaa; color: var(--tx); }
.btn-gn { background: var(--gn); color: #fff; } .btn-gn:hover { opacity: .9; }
.btn-bl { background: var(--bl); color: #fff; } .btn-bl:hover { opacity: .9; }
.btn-am { background: var(--am); color: #fff; } .btn-am:hover { opacity: .9; }

/* ── KPI TILES ──────────────────────────────────────────── */
.kpi { background: var(--s); border: 1px solid var(--bd); border-radius: var(--r); padding: 16px 20px; box-shadow: var(--sh); }
.kpi-link { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.kpi-link:hover { box-shadow: var(--sh2); border-color: var(--ac); }
.kpi-val { font-size: 30px; font-weight: 700; font-family: monospace; line-height: 1; }
.kpi-lbl { font-size: 12px; color: var(--tx3); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.kpi-sub { font-size: 12px; color: var(--tx2); margin-top: 2px; }

/* ── CARD ───────────────────────────────────────────────── */
.card { background: var(--s); border: 1px solid var(--bd); border-radius: var(--r); padding: 20px; box-shadow: var(--sh); }

/* ── BADGES ─────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.b-gn { background: var(--gnl); color: var(--gn); }
.b-am { background: var(--aml); color: var(--am); }
.b-rd { background: var(--acl); color: var(--ac); }
.b-bl { background: var(--bll); color: var(--bl); }
.b-gy { background: #f5f5f5; color: #666; }
.b-pp { background: var(--ppl); color: var(--pp); }

/* pills (used in tables and job modal) */
.pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pg  { background: var(--gnl); color: var(--gn); }
.pa  { background: var(--aml); color: var(--am); }
.pb  { background: var(--ppl); color: var(--pp); }
.pz  { background: #f0f0ec; color: #555; }
.pr  { background: var(--acl); color: var(--ac); }

/* ── TABLES ─────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--bd); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--tx3); text-align: left; padding: 9px 12px; border-bottom: 2px solid var(--bd); white-space: nowrap; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--bd); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--s2); }

/* ── FILTER BAR ─────────────────────────────────────────── */
/* The bare `.fbar input` / `.fbar select` selectors are not belt-and-braces —
   they are the fix for a real bug. MEASURED across every page and overlay: 28
   toolbar controls carry no class at all and were rendering as browser-default
   white boxes with black text — 25 of them in Inventory, 2 in the Accounts
   Inbox, 1 in the search overlay. In dark mode that is a white slab with
   unreadable text on a black page; in light mode it is square-cornered and
   visibly not of a piece with the rest of the app. Every one of them is in a
   module built since July, which is exactly where the class was forgotten.
   Styling the ELEMENT inside .fbar rather than chasing 28 class attributes also
   covers the next toolbar someone writes. Buttons are excluded by selector, and
   type=checkbox/radio keep their native appearance. */
.fbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
/* DESCENDANT, not child (`.fbar input`, not `.fbar > input`). The From/To date
   pickers from invDateBar() sit inside a wrapping <span>, so a child selector
   missed exactly the pair that is on four different Inventory lists plus
   Parcels — they stayed white-on-white in dark mode after everything else was
   fixed. A .fbar is a toolbar; it has no nested forms for this to reach. */
.finput,
.fbar input:not([type="checkbox"]):not([type="radio"]) {
  padding: 9px 12px; border: 1px solid var(--bd); border-radius: var(--r2); font-family: inherit; font-size: 14px; background: var(--s); color: var(--tx); outline: none; transition: border .15s;
}
.finput:focus, .fbar input:focus { border-color: #aaa; }
.fsel, .fbar select {
  padding: 9px 12px; border: 1px solid var(--bd); border-radius: var(--r2); font-family: inherit; font-size: 14px; background: var(--s); color: var(--tx); outline: none; cursor: pointer;
}

/* ── MODALS / OVERLAYS ──────────────────────────────────── */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 200; display: none; align-items: center; justify-content: center; padding: 20px; }
.overlay.open { display: flex; }
#invoice-overlay { z-index: 210; }
/* A Payment History row on the bill detail (200) opens the payment it
   describes, so the payment/run detail has to sit ABOVE the bill — and
   deliberately, not by DOM order. With both at 200 the tie was broken by
   source position in index.html, which is nobody's intent and would invert the
   day someone moves a <div>. Below the scan viewer (232), the ⌘K palette (238)
   and the blocking confirm (240). It has no _OVERLAY_CLOSERS entry, so Escape
   closes just this one and drops the reader back to the bill. The ID beats the
   ≤768px `.overlay { z-index: 200 }` rule on specificity, whatever the order. */
#acc-run-detail-overlay { z-index: 202; }
#status-overlay { z-index: 230; }
.modal { background: var(--s); border-radius: 12px; width: 100%; max-width: 760px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.modal-lg { max-width: 960px; }
.modal-xl { max-width: 1180px; }

/* ── BILL SCAN VIEWER ───────────────────────────────────────
   Above the bill detail overlay (200), below the ⌘K palette (238) and the
   blocking confirm (240) — a scan is content, and content must never cover a
   dialog that is awaiting a promise. Escape closes only the topmost overlay
   (_OVERLAY_CLOSERS in app.js), so this closes back to the bill it belongs to. */
#acc-scan-viewer-overlay { z-index: 232; }
/* The card is a fixed-height column: header, strip, stage, note. Without this
   the <iframe> collapses to its intrinsic 150px and the PDF renders as a sliver
   — the stage has to be told how tall it is, it cannot ask the file. */
.acc-sv-modal { display: flex; flex-direction: column; height: 90vh; overflow: hidden; }
/* flex:1 + min-height:0 on BOTH the body and the stage. Without flex:1 the body
   is sized by its content and the stage collapses to a 30px sliver with the rest
   of the card blank white below it; without min-height:0 a flex child defaults
   to min-height:auto, refuses to shrink under its content, and the card
   overflows instead of the stage scrolling. */
.acc-sv-modal > .modal-body { flex: 1; min-height: 0; }
/* Without this the label breaks after the icon and the header grows to two
   lines even on a desktop, because the buttons sit in a shrinking flex row. */
#acc-sv-newtab, #acc-sv-download { white-space: nowrap; }
.acc-sv-strip { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--bd); overflow-x: auto; background: var(--s2); flex-shrink: 0; }
.acc-sv-tab { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--bd); border-radius: var(--r2); background: var(--s); font-size: 12px; white-space: nowrap; cursor: pointer; color: var(--tx2); }
.acc-sv-tab:hover { border-color: var(--ac); }
.acc-sv-tab.on { border-color: var(--ac); color: var(--ac); font-weight: 600; }
/* min-height:0 is load-bearing: a flex child defaults to min-height:auto and
   refuses to shrink below its content, which makes the whole card overflow
   instead of the stage scrolling. */
.acc-sv-stage { flex: 1; min-height: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: auto; }
.acc-sv-stage iframe, .acc-sv-stage embed { width: 100%; height: 100%; border: 0; background: #fff; }
.acc-sv-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.acc-sv-note { padding: 10px 14px; border-top: 1px solid var(--bd); background: var(--s2); flex-shrink: 0; }
@media (max-width: 600px) {
  .acc-sv-modal { height: 93vh; }
  /* "↗ New tab" and "⬇ Download" wrap onto two lines at 375px and eat a
     centimetre of the page you came here to read. The icon carries the meaning
     and both buttons keep their title= for a long-press. */
  .acc-sv-lbl { display: none; }
}
.modal-hd { padding: 20px 24px; border-bottom: 1px solid var(--bd); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--s); z-index: 1; }
.modal-hd h2 { font-size: 18px; font-weight: 700; }
.modal-body { padding: 24px; }
.mclose { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--tx3); padding: 4px 8px; border-radius: 4px; line-height: 1; }
.mclose:hover { background: var(--bg); }

/* ── ENTITY MODAL DETAIL GRIDS ─────────────────────────── */
.em-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.em-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 600px) {
  .em-2col, .em-3col { grid-template-columns: 1fr; }
}

/* ── ENTITY DOC LIST (replaces horizontal chain) ───────── */
.em-doc-list { border: 1px solid var(--bd); border-radius: var(--r2); overflow: hidden; margin-bottom: 10px; }
.em-doc-row { display: flex; align-items: center; gap: 12px; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--bd); transition: background .1s; }
.em-doc-row:last-child { border-bottom: none; }
.em-doc-row:hover { background: var(--s2); }
.em-doc-row.active { background: #1a1a1a; cursor: default; }
[data-theme="dark"] .em-doc-row.active { background: #2a2a2f; border-left: 3px solid var(--ac); }
.em-doc-row.plain { cursor: default; }
.em-doc-row.plain:hover { background: transparent; }
.em-doc-label { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--tx3); width: 80px; flex-shrink: 0; }
.em-doc-row.active .em-doc-label { color: rgba(255,255,255,.5); }
[data-theme="dark"] .em-doc-row.active .em-doc-label { color: var(--tx3); }
.em-doc-body { flex: 1; overflow: hidden; min-width: 0; }
.em-doc-val { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.em-doc-sub { font-size: 10px; color: var(--tx3); margin-top: 1px; }
.em-doc-row.active .em-doc-val { color: #fff; font-weight: 700; }
[data-theme="dark"] .em-doc-row.active .em-doc-val { color: var(--tx); }
.em-doc-row.active .em-doc-sub { color: rgba(255,255,255,.6); }
[data-theme="dark"] .em-doc-row.active .em-doc-sub { color: var(--tx3); }
.em-doc-arrow { color: var(--bd2); font-size: 15px; flex-shrink: 0; }
.em-unlink-btn {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--bd); background: transparent; color: var(--tx3);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; font-family: inherit;
  transition: background .1s, color .1s, border-color .1s;
  opacity: 0;
}
.em-doc-row:hover .em-unlink-btn { opacity: 1; }
.em-unlink-btn:hover { background: var(--am); color: #fff; border-color: var(--am); }
.em-link-btn {
  flex-shrink: 0; font-size: 11px; color: var(--bl); background: none;
  border: 1px solid var(--bd); border-radius: 4px; cursor: pointer;
  padding: 2px 8px; white-space: nowrap; font-family: inherit;
  transition: background .1s, border-color .1s;
}
.em-link-btn:hover { background: var(--s2); border-color: var(--bl); }
.em-doc-row.plain:hover .em-link-btn,
.em-doc-row.em-doc-row-addlink { cursor: default; }
.em-doc-row.em-doc-row-addlink:hover { background: transparent; }
.em-doc-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

/* ── SECTION TITLE / SECTION ────────────────────────────── */
.sec-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx3); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--bd); }
.sec { padding: 14px; background: var(--s2); border: 1px solid var(--bd); border-radius: var(--r2); margin-bottom: 12px; }
.sec > .sec-title { margin-bottom: 10px; }

/* ── PIPELINE ───────────────────────────────────────────── */
.pipeline { display: flex; flex-direction: column; gap: 10px; }
.pipe-section { border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; }
.pipe-section-hd { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--s2); border-bottom: 1px solid var(--bd); }
.pipe-row { display: grid; grid-template-columns: 90px 1fr 2fr 110px 80px; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--bd); cursor: pointer; transition: background .12s; font-size: 13px; }
.pipe-row:last-child { border-bottom: none; }
.pipe-row:hover { background: var(--s2); }
.pipe-row-no { font-family: monospace; font-weight: 700; color: var(--ac); font-size: 12px; }
.pipe-row-cust { font-weight: 600; }
.pipe-row-equip { color: var(--tx2); font-size: 12px; }
.pipe-row-est { font-size: 11px; text-align: right; }
.pipe-cnt { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; border-radius: 10px; padding: 0 6px; background: var(--bd); font-size: 10px; font-weight: 700; color: var(--tx2); }

/* ── DAILY LOG BLOCKS ───────────────────────────────────── */
.dl-block { border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; margin-bottom: 12px; }
.dl-block-hd { background: var(--s2); padding: 11px 16px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 14px; font-weight: 600; }
.dl-block-hd:hover { background: #eee; }
.dl-block-body { display: none; }
.dl-block-body.open { display: block; }
.dl-job-link { color: var(--ac); cursor: pointer; font-weight: 700; display: inline-block; }
.dl-job-link:hover { text-decoration: underline; }
.dl-attend-link { cursor: pointer; font-weight: 600; }
.dl-attend-link:hover { text-decoration: underline; }

/* ── CHECKLIST ──────────────────────────────────────────── */
.cl-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--bd); }
.cl-item:last-child { border-bottom: none; }
.cl-cb { width: 16px; height: 16px; cursor: pointer; accent-color: var(--gn); }

/* ── PROGRESS BAR ───────────────────────────────────────── */
.prog-bar { height: 4px; background: var(--bd); border-radius: 2px; overflow: hidden; }
.prog-bar-fill { height: 100%; border-radius: 2px; transition: width .3s; }

/* ── MODAL TABS ─────────────────────────────────────────── */
.mtabs { display: flex; border-bottom: 1px solid var(--bd); margin-bottom: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mtabs::-webkit-scrollbar { display: none; }
.mtab { padding: 9px 16px; font-size: 14px; font-weight: 500; color: var(--tx2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mtab.active { color: var(--ac); border-bottom-color: var(--ac); }
.sec-stab { min-width: 120px; text-align: center; }

/* ── JOB MODAL DETAIL ROWS ──────────────────────────────── */
.jm-row { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--bd2); font-size: 14px; }
.jm-row:last-child { border-bottom: none; }
.jm-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--tx3); white-space: nowrap; min-width: 100px; padding-top: 2px; }
.jm-val { color: var(--tx); flex: 1; }
.jm-val.mono { font-family: monospace; }
.jm-st { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tx3); margin: 12px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--bd); }

/* ── DETAIL ROWS (migration / setup) ───────────────────── */
.dr { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--bd); font-size: 14px; }
.dr:last-child { border-bottom: none; }
.dr-lbl { color: var(--tx3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 1px; }

/* ── TAG CHIPS ──────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; background: var(--bg); border: 1px solid var(--bd); border-radius: 20px; font-size: 12px; color: var(--tx2); margin: 2px; }

/* ── TOAST ──────────────────────────────────────────────── */
.toast { position: fixed; bottom: 24px; right: 24px; z-index: 500; pointer-events: none; }
.toast-msg { background: var(--tx); color: #fff; padding: 11px 16px; border-radius: 8px; font-size: 14px; margin-top: 8px; box-shadow: var(--sh2); opacity: 0; transition: opacity .2s; max-width: 320px; }
.toast-msg.show { opacity: 1; }
.toast-msg.err { background: var(--ac); }
.toast-msg.ok { background: var(--gn); }

/* ── LOADING / EMPTY STATES ─────────────────────────────── */
.loading { text-align: center; padding: 40px; color: var(--tx3); font-size: 14px; }
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--bd); border-top-color: var(--ac); border-radius: 50%; animation: spin .7s linear infinite; margin-bottom: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { text-align: center; padding: 48px 20px; color: var(--tx3); }
.empty-icon { font-size: 32px; margin-bottom: 12px; }
.empty h3 { font-size: 16px; color: var(--tx2); font-weight: 600; }
.empty p { font-size: 14px; margin-top: 6px; }

/* ── MOBILE BOTTOM NAV ──────────────────────────────────── */
/* Two stacked rows: the active page's own sub-tab row(s) parked in
   #mobile-subnav, and the page buttons under them. The sub-tabs are the REAL
   page elements, moved here by _syncMobileSubnav() in app.js — never copies —
   so the ids, onclick handlers and innerHTML rewrites all keep working. */
#mobile-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 150;
  background: var(--s);
  border-top: 1px solid var(--bd);
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  box-shadow: 0 -2px 12px rgba(0,0,0,.07);
  flex-direction: column;
}

/* `flex: 1 0 auto` on the buttons, not `flex: 1`.
   An admin has SEVEN page tabs and they do not fit 375px. With flex:1 they were
   squeezed and the row overflowed a container that clips, so the Inventory tab
   was rendered off the right edge and could not be tapped AT ALL from a phone —
   silently, with nothing on screen to say a tab was missing. Refusing to shrink
   below content plus overflow-x lets the row scroll instead of swallowing tabs,
   and for the roles with two or three tabs they still grow to fill the width. */
#mobile-tabbar {
  display: flex; flex-direction: row; gap: 4px; padding: 6px 8px 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; scroll-padding-inline: 8px;
}
#mobile-tabbar::-webkit-scrollbar { display: none; }

/* Each parked row keeps its own horizontal scroll (that is what .mtabs already
   does) — a sub-tab row scrolling sideways is allowed, the PAGE scrolling
   sideways is not. */
#mobile-subnav { background: var(--s2); border-bottom: 1px solid var(--bd); }
#mobile-subnav .mtabs {
  /* !important beats the inline margins these rows carry for their desktop
     position (margin-bottom:20px, margin:-10px 0 20px). It is beating an inline
     style, not another rule. `display` is deliberately NOT touched:
     #sup-hist-subtabs is shown and hidden through its inline display and an
     !important here would pin it open. */
  margin: 0 !important;
  padding: 5px 8px !important;
  border-bottom: none;
  gap: 5px;
  scroll-padding-inline: 12px;
}
#mobile-subnav .mtabs + .mtabs { border-top: 1px solid var(--bd2); }
/* Chips, not underlined tabs. An underline sitting at the top edge of a bottom
   bar points at nothing — it reads as a divider rather than a selection. */
#mobile-subnav .mtab {
  flex: 0 0 auto;
  min-width: 0;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  margin-bottom: 0;
  color: var(--tx2);
}
#mobile-subnav .mtab.active { background: var(--acl); color: var(--ac); border-bottom-color: transparent; }
/* Group rows (Accounts, Inventory, the supplier Historical row) sit ABOVE their
   own sub-tabs, so they need to look like the parent of the row beneath rather
   than a peer of it: solid fill against the tint below. */
#mobile-subnav .acct-grp.active,
#mobile-subnav .inv-grp.active,
#mobile-subnav .sup-grp.active { background: var(--ac); color: #fff; }

.mob-tab {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tx3);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  transition: background .15s, color .15s;
  min-height: 44px;
  white-space: nowrap;
}
.mob-tab.active { color: var(--ac); background: var(--acl); }
.mob-tab:active  { opacity: .75; }

@media (max-width: 768px) {
  /* Bottom nav replaces hamburger entirely */
  #mobile-nav    { display: flex; }
  .nav-toggle    { display: none !important; }
  .nav-tabs      { display: none !important; }
  /* The bar is 1, 2 or 3 rows tall depending on the page, so its height is
     measured and published as --mobnav-h by _mobNavHeight(). The old fixed 80px
     hid the last table row on Accounts and Inventory (3 rows of chrome) while
     wasting a centimetre on the Dashboard (1 row). The fallback covers the
     instant before the first measurement lands. */
  .page.active   { padding-bottom: calc(var(--mobnav-h, 64px) + 20px); }
  /* Modals should still sit above the nav bar */
  .overlay       { z-index: 200; }
  /* Toast sits above the mobile nav bar */
  .toast         { bottom: calc(var(--mobnav-h, 64px) + 12px); }
}

/* ── MOBILE OVERRIDES ───────────────────────────────────── */
@media (max-width: 600px) {
  /* Modals slide up from bottom */
  .overlay { align-items: flex-end; padding: 0; }
  .modal { border-radius: 16px 16px 0 0; max-width: 100%; max-height: 93vh; }
  .modal-lg { max-width: 100%; }
  .modal-hd { padding: 16px 16px; }
  .modal-hd h2 { font-size: 17px; }
  .modal-body { padding: 16px; }

  /* Tab items don't shrink so row scrolls */
  .mtab { flex-shrink: 0; font-size: 14px; padding: 10px 14px; }
  .sec-stab { min-width: 80px; }

  /* Login card compact on small phones */
  .lcard { padding: 36px 24px; }
  .lt { font-size: 22px; }

  /* KPI value on phone */
  .kpi-val { font-size: 26px; }
  .kpi-lbl { font-size: 12px; }

  /* Detail rows: single col */
  .dr { grid-template-columns: 1fr; gap: 2px; }

  /* JM label narrower */
  .jm-lbl { min-width: 80px; font-size: 11px; }
  .jm-val { font-size: 14px; }

  /* Tables: ensure container scrolls, not the page */
  .tbl-wrap { -webkit-overflow-scrolling: touch; border-radius: var(--r2); }
  .tbl { font-size: 13px; }
  .tbl th { font-size: 11px; padding: 8px 10px; }
  .tbl td { padding: 10px 10px; font-size: 13px; }

  /* Buttons: bigger tap targets on mobile */
  .btn { min-height: 42px; padding: 10px 15px; font-size: 14px; }
  .btn-sm { min-height: 34px; padding: 8px 12px; font-size: 13px; }

  /* Inventory is entered at the store counter, often one-handed and in a hurry,
     so its small buttons get the full 44px Apple tap target rather than the
     34px .btn-sm default. Scoped to the inventory page + its overlays so the
     rest of the app keeps its existing density. */
  #page-inventory .btn-sm,
  #inv-item-form-overlay .btn-sm,
  #inv-adjust-form-overlay .btn-sm,
  #inv-cat-form-overlay .btn-sm,
  #inv-lookup-form-overlay .btn-sm,
  #inv-indent-form-overlay .btn-sm,
  #inv-issue-form-overlay .btn-sm,
  #inv-order-form-overlay .btn-sm,
  #inv-receive-form-overlay .btn-sm,
  #inv-return-form-overlay .btn-sm { min-height: 44px; padding: 10px 14px; }

  /* Row-level controls in every line-item sub-table: pad the hit area out to
     44px without making the glyph itself larger. */
  #inv-itemf-var-body button,
  #inv-indf-line-body button,
  #inv-issf-line-body button,
  #inv-ordf-line-body button,
  #inv-recf-line-body button { min-width: 44px; min-height: 44px; }

  /* The five inventory line-item tbodies used to be named here for a 16px
     !important font-size. That rule is now GLOBAL for touch devices — see "NO
     INPUT UNDER 16px ON A TOUCH DEVICE" in forms.css — because measuring found
     70 more controls with the same problem on 15 other screens, and because a
     max-width query missed a phone held in landscape entirely. The reasoning
     recorded here (they are the most-typed fields in the module, the inline
     font-size:13px comes from a JS template string, and iOS zooming on every
     focus is the friction that killed the system this replaced) is what
     motivated generalising it. */

  /* Toast anchored above the bottom nav on phones. This block is BELOW the
     768px one in the file, so a plain `bottom:16px` here beat it — which is why
     every toast on a phone has been landing on top of the nav bar, covering the
     tabs for its four seconds. It has to repeat the calc, not just the sides. */
  .toast { bottom: calc(var(--mobnav-h, 64px) + 12px); right: 12px; left: 12px; }
  .toast-msg { max-width: 100%; }

  /* Section title */
  .sec-title { font-size: 12px; }

  /* Badge / pill slightly bigger */
  .badge { font-size: 11px; padding: 3px 9px; }
  .pill { font-size: 12px; }

  /* Daily log block */
  .dl-block-hd { font-size: 14px; padding: 13px 14px; }
}

/* ── PRINT TAGS ─────────────────────────────────────────── */
@media print {
  body > * { display: none !important; }
  #print-tags-container { display: block !important; }

  /* 8-up A4 portrait: 2 cols × 4 rows */
  .tag-page {
    width: 210mm;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 10mm 8mm 0;
    page-break-after: always;
    box-sizing: border-box;
  }

  .tag-label {
    height: 68mm;
    border: 0.4mm solid #ccc;
    padding: 4mm;
    display: flex;
    flex-direction: row;
    gap: 4mm;
    align-items: stretch;
    page-break-inside: avoid;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* QR: 42mm leaves ~43mm for text (vs 31mm at 52mm) */
  .tag-qr-wrap {
    flex-shrink: 0;
    width: 42mm;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tag-qr-wrap canvas {
    width: 42mm !important;
    height: 42mm !important;
    display: block !important;
  }

  .tag-qr-wrap img { display: none !important; }

  /* Text column: spread 4 fields evenly across full height */
  .tag-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* Each labeled field stacks label above value */
  .tag-field {
    display: flex;
    flex-direction: column;
  }

  /* Small grey uppercase sub-heading */
  .tag-lbl {
    font-family: Arial, sans-serif;
    font-size: 5.5pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #999;
    line-height: 1;
    margin-bottom: 1pt;
  }

  .tag-jobno {
    font-family: Arial, 'Helvetica Neue', sans-serif;
    font-size: 20pt;
    font-weight: 900;
    line-height: 1.05;
    color: #000;
    word-break: break-all;
    letter-spacing: -0.3pt;
  }

  .tag-customer {
    font-family: Arial, sans-serif;
    font-size: 11pt;
    font-weight: 700;
    color: #000;
    line-height: 1.2;
    word-break: break-word;
  }

  /* Now carries the FULL description (make, V, A, kW, RPM, frame, type … S/N)
     rather than the make alone, so it must be capped: .tag-label is a fixed
     68mm with overflow:hidden, and an unbounded equipment block would push
     "Date Received" off the bottom of a physical label. Four lines, then clip. */
  .tag-equipment {
    font-family: Arial, sans-serif;
    font-size: 8.5pt;
    font-weight: 400;
    color: #222;
    line-height: 1.3;
    word-break: break-word;
    max-height: 15mm;
    overflow: hidden;
  }

  .tag-date {
    font-family: Arial, sans-serif;
    font-size: 9pt;
    font-weight: 600;
    color: #000;
  }
}

/* Daybook toolbar: the vertical separators group controls on one line. Once the
   bar wraps they land at the end of a line and separate nothing, so drop them. */
@media (max-width: 768px) {
  .db-rule { display: none !important; }
}

/* ── ADVANCED JOB SEARCH (js/job-search.js) ─────────────────────────────────
   Scoped to .fnd-* so nothing here can reach the All Jobs toolbar, which
   already owns the ids #jf-sort and #jf-status. */
.fnd-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.fnd-pill {
  cursor: pointer; display: inline-block; padding: 5px 13px; border-radius: 20px;
  font-size: 12px; white-space: nowrap; background: var(--s2); color: var(--tx2);
  border: 1px solid var(--bd);
}
.fnd-pill.on { background: var(--ac); color: #fff; border-color: var(--ac); font-weight: 700; }
.fnd-pill.ghost { border-style: dashed; }

.fnd-src { font-size: 13px; color: var(--tx); padding: 10px 12px; background: var(--s2);
           border: 1px solid var(--bd); border-radius: var(--r2); }
.fnd-src-spec { font-size: 12px; color: var(--tx2); margin-top: 3px; }
.fnd-warn { font-size: 12px; color: var(--wn, #b45309); margin-top: 5px; }

.fnd-facets { gap: 8px; flex-wrap: wrap; align-items: center; }
/* The range pairs must shrink with the bar rather than forcing it wide — the
   min-width:auto flex default is what made other panels scroll sideways. */
.fnd-rng { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
           color: var(--tx2); min-width: 0; }
.fnd-rng .finput { width: 68px; min-width: 0; }

.fnd-note { font-size: 11px; color: var(--tx3); line-height: 1.5; margin-top: 6px; }
.fnd-sub  { font-size: 11px; color: var(--tx2); margin-top: 2px;
            overflow-wrap: anywhere; }
.fnd-why  { font-size: 11px; color: var(--tx2); overflow-wrap: anywhere; }
.fnd-score { color: var(--tx3); }

/* The one thing in the result list that must be unmissable.
   display:block + width:fit-content, NOT inline-block: .pcard-no is
   white-space:nowrap, which keeps an inline-block badge on the job number's own
   line and widens the column past its 110px. */
.fnd-same {
  display: block; width: fit-content;
  margin-top: 3px; padding: 1px 6px; border-radius: 4px;
  background: var(--ac); color: #fff; font-size: 9px; font-weight: 700;
  letter-spacing: .4px; white-space: nowrap;
}

.fnd-sec-hd { font-size: 13px; font-weight: 600; color: var(--tx);
              margin: 20px 0 8px; padding-top: 14px; border-top: 1px solid var(--bd); }

@media (max-width: 768px) {
  .fnd-rng { width: 100%; }
  .fnd-rng .finput { flex: 1; }
}

/* ── NOTIFICATIONS PANEL (mig 100) ─────────────────────────────
   z-index 234: above the content overlays (200–232) so the bell works from
   inside a stacked job → entity flow, below the ⌘K palette (238) and the
   blocking confirm (240). On a computer it floats under the bell with no dim;
   on a phone it is a bottom sheet over everything, including the tab bar. */
.ntf-btn { position: relative; overflow: visible; }
.ntf-dot { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--ac); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px;
  text-align: center; font-family: monospace; pointer-events: none; box-shadow: 0 0 0 2px var(--s); }
#ntf-overlay { z-index: 234; background: transparent; align-items: flex-start; justify-content: flex-end; padding: 62px 16px 16px; }
.ntf-panel { background: var(--s); border: 1px solid var(--bd); border-radius: 12px; box-shadow: var(--sh2);
  width: 410px; max-width: 100%; max-height: calc(100vh - 84px); display: flex; flex-direction: column; overflow: hidden; }
.ntf-hd { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--bd); }
.ntf-body { overflow-y: auto; flex: 1; min-height: 60px; -webkit-overflow-scrolling: touch; }
.ntf-sec { padding: 12px 14px 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tx3); }
.ntf-row { display: flex; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--bd2); align-items: flex-start; }
.ntf-row:hover { background: var(--s2); }
.ntf-row.unread .ntf-t { color: var(--tx); }
.ntf-row:not(.unread) { opacity: .78; }
.ntf-ic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 30px; font-size: 15px; background: var(--s2); }
.ntf-t { font-size: 13px; font-weight: 600; color: var(--tx2); overflow-wrap: anywhere; }
.ntf-b { font-size: 12px; color: var(--tx2); margin-top: 2px; overflow-wrap: anywhere; }
.ntf-when { font-size: 11px; color: var(--tx3); margin-top: 3px; }
.ntf-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ac); flex: 0 0 8px; margin-top: 6px; }
.ntf-empty, .ntf-clear { padding: 14px; font-size: 13px; color: var(--tx3); }
.ntf-clear { color: var(--gn); }
.ntf-act { margin: 12px 14px 4px; border: 1px solid var(--bd); border-left: 3px solid var(--ac); border-radius: var(--r2); background: var(--s2); }
.ntf-act-hd { padding: 9px 10px 6px; font-size: 13px; }
.ntf-act-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; border-top: 1px solid var(--bd2); }
.ntf-act-row:hover { background: var(--s); }
.ntf-act-sup { flex: 1; min-width: 0; color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntf-act-val { font-family: monospace; }
.ntf-act-age { font-size: 11px; color: var(--tx3); min-width: 30px; text-align: right; }
.ntf-act-age.late { color: var(--ac); font-weight: 700; }
.ntf-act-more { padding: 4px 10px; font-size: 11px; color: var(--tx3); }
.ntf-ft { border-top: 1px solid var(--bd); padding: 10px 14px; font-size: 12px; color: var(--tx2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 768px) {
  #ntf-overlay { background: rgba(0,0,0,.45); align-items: flex-end; justify-content: stretch; padding: 0; }
  .ntf-panel { width: 100%; max-height: 86vh; border-radius: 14px 14px 0 0; border-bottom: 0; }
  .ntf-ft { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .ntf-row, .ntf-act-row { padding-top: 11px; padding-bottom: 11px; }
}

/* ── APPROVALS (Inventory › Purchase › Approvals) ─────────────── */
.apr-sec-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }
.apr-sec-hd h3 { font-size: 16px; font-weight: 700; }
.apr-count { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 10px; background: var(--s2); border: 1px solid var(--bd); font-size: 12px; font-weight: 600; color: var(--tx2); }
.apr-selall { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tx2); cursor: pointer; }
.apr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
.apr-card { background: var(--s); border: 1px solid var(--bd); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--sh); min-width: 0; display: flex; flex-direction: column; }
.apr-card.sel { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac); }
.apr-card-hd { display: flex; gap: 10px; align-items: flex-start; }
.apr-chk { padding-top: 2px; cursor: pointer; }
.apr-chk input { width: 18px; height: 18px; accent-color: var(--ac); cursor: pointer; }
.apr-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.apr-age { font-size: 11px; padding: 1px 6px; border-radius: 8px; background: var(--s2); color: var(--tx3); font-weight: 600; }
.apr-age.late { background: var(--acl); color: var(--ac); }
.apr-meta { font-size: 12px; color: var(--tx2); margin-top: 2px; overflow-wrap: anywhere; }
.apr-val { font-family: monospace; font-weight: 700; font-size: 15px; white-space: nowrap; }
.apr-lines { margin: 10px 0 0; border-top: 1px solid var(--bd2); }
.apr-line { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--bd2); font-size: 13px; align-items: baseline; }
.apr-item { min-width: 0; overflow-wrap: anywhere; }
.apr-sub { display: block; font-size: 11px; color: var(--tx3); }
.apr-q, .apr-amt { font-family: monospace; font-size: 12px; white-space: nowrap; text-align: right; }
.apr-amt { min-width: 64px; color: var(--tx2); }
.apr-flags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.apr-notes { font-size: 12px; color: var(--tx2); margin-top: 8px; padding: 6px 8px; background: var(--s2); border-radius: var(--r2); }
.apr-acts { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; align-items: center; }
/* .btn has no :disabled style app-wide (measured: opacity 1, cursor pointer), so an
   "Approve selected" with nothing selected looked clickable. Scoped here, not global. */
.apr-sec-hd .btn:disabled, .ntf-ft .btn:disabled { opacity: .45; cursor: not-allowed; }
.apr-none { padding: 18px; text-align: center; color: var(--tx3); font-size: 13px; background: var(--s); border: 1px dashed var(--bd); border-radius: var(--r); }
@media (max-width: 600px) {
  .apr-grid { grid-template-columns: 1fr; }
  .apr-acts .btn { flex: 1; }
  .apr-acts span[style*="flex:1"] { display: none; }
}

/* Accounts › Inbox section chips (Oct 2026). One row; on a phone it scrolls
   sideways rather than wrapping into a second and third line. */
.acc-ibx-chips { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; -webkit-overflow-scrolling: touch; }
.acc-ibx-chips .btn { flex: 0 0 auto; white-space: nowrap; }
.acc-ibx-chips .btn.ibx-zero { opacity: .55; }
.acc-ibx-chips .ibx-n { display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px; border-radius: 10px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, currentColor 14%, transparent); }
.acc-ibx-how summary { cursor: pointer; font-size: 11px; color: var(--tx3); display: inline; }
.acc-ibx-how[open] summary { margin-bottom: 4px; }

/* Accounts › Sales › Sales Register (worktree L, Oct 2026). A list, not her
   A–S grid: rows fit a laptop with no sideways scroll and become cards on a
   phone. The exports keep her grid. Every cell is min-width:0 so a long
   unbroken PO number or GSTIN cannot widen the row. */
.sr-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.sr-seg, .sr-actions, .sr-fys { display: flex; gap: 4px; flex-wrap: wrap; }
.sr-actions { margin-left: auto; }
.sr-fbar { gap: 8px; align-items: center; flex-wrap: wrap; }
.sr-cust-sel { width: auto; max-width: 220px; min-width: 0; }
.sr-q { flex: 1 1 200px; min-width: 0; max-width: 340px; }
.sr-chk { font-size: 12px; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.sr-chk input { width: auto; }
.sr-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.sr-kpi { flex: 1 1 180px; min-width: 0; padding: 12px 16px; }
.sr-kpi .kpi-val { font-size: 20px; overflow-wrap: anywhere; }
.sr-kpi .kpi-sub { font-size: 11.5px; overflow-wrap: anywhere; }
.sr-kpi-on { border-color: var(--ac); box-shadow: inset 0 -3px 0 var(--ac); }
.sr-kpi-mute { opacity: .7; flex-grow: .7; }
.sr-kpi-mute .kpi-val { color: var(--tx2); }
.sr-count { font-size: 12px; color: var(--tx2); margin: 0 0 6px; }
.sr-count-note { color: var(--tx3); }
.sr-list { background: var(--s); border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; }
.sr-row { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1.1fr) minmax(0,2.4fr) minmax(0,.95fr) minmax(0,.9fr) minmax(0,.95fr);
  gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--bd2); font-size: 13px; cursor: pointer; align-items: start; }
.sr-row.sr-sel { grid-template-columns: 22px minmax(0,1.05fr) minmax(0,1.1fr) minmax(0,2.4fr) minmax(0,.95fr) minmax(0,.9fr) minmax(0,.95fr); }
.sr-row:hover { background: var(--s2); }
.sr-row > div, .sr-lrow > div { min-width: 0; overflow-wrap: anywhere; }
.sr-head, .sr-head:hover { cursor: default; background: var(--s2); font-size: 11px; color: var(--tx3); text-transform: uppercase; letter-spacing: .05em; padding-top: 7px; padding-bottom: 7px; }
.sr-r { text-align: right; }
.sr-no { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-cust { font-weight: 600; }
.sr-sub { font-size: 11.5px; color: var(--tx3); margin-top: 2px; }
.sr-amt { font-weight: 600; white-space: nowrap; }
.sr-lbl { display: none; }
.sr-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--tx2); font-size: 12.5px; }
.sr-more { display: none; font-size: 11.5px; color: var(--tx3); margin-top: 4px; }
.sr-c-desc { cursor: zoom-in; }
.sr-c-desc.sr-open { cursor: zoom-out; }
.sr-c-desc.sr-open .sr-desc { -webkit-line-clamp: unset; display: block; }
.sr-c-desc.sr-open .sr-more { display: block; }
.sr-cx { color: var(--tx3); }
.sr-cx .sr-no, .sr-cx .sr-amt, .sr-cx .sr-cust { text-decoration: line-through; }
.sr-tick input { width: auto; margin-top: 2px; }
.sr-chip { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 600; white-space: nowrap; background: var(--s2); color: var(--tx2); }
.sr-chip-gn { background: var(--gnl); color: var(--gn); }
.sr-chip-am { background: var(--aml); color: var(--am); }
.sr-pdf { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 10px; font-size: 10.5px; font-weight: 600; white-space: nowrap; cursor: pointer; border: 1px solid var(--bd); color: var(--tx2); }
.sr-pdf:hover { border-color: var(--ac, #c0392b); color: var(--ac, #c0392b); }
.sr-chip-ac { background: var(--acl); color: var(--ac); }
.sr-chip-bl { background: var(--bll); color: var(--bl); }
.sr-chip-mute { background: var(--s2); color: var(--tx3); }
.sr-empty { padding: 14px; text-align: center; color: var(--tx3); font-size: 13px; }
.sr-pf { margin-top: 12px; }
.sr-pf-head { width: 100%; display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: baseline; text-align: left;
  background: none; border: 1px dashed var(--bd); border-radius: var(--r); padding: 9px 14px; cursor: pointer; color: var(--tx); font: inherit; font-size: 13px; }
.sr-pf-sum { font-size: 12px; color: var(--tx3); }
.sr-list-pf { margin-top: 6px; }
.sr-tools { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin-top: 14px; }
.sr-tools-exp { min-width: 0; flex: 1 1 320px; }
.sr-tools-einv { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-hint { font-size: 11px; color: var(--tx3); margin-top: 4px; }
.sr-lg { margin-bottom: 8px; }
.sr-lg-head { width: 100%; display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between; align-items: baseline; text-align: left;
  background: var(--s); border: 1px solid var(--bd); border-radius: var(--r); padding: 9px 14px; cursor: pointer; color: var(--tx); font: inherit; font-size: 13.5px; }
.sr-lg-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.sr-lg-bal { font-weight: 700; font-size: 13px; }
.sr-dr { color: var(--ac); }
.sr-cr { color: var(--gn); }
.sr-lg .sr-list { margin-top: 4px; }
.sr-lrow { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr); gap: 12px; padding: 8px 14px;
  border-bottom: 1px solid var(--bd2); font-size: 13px; cursor: pointer; }
.sr-lrow:hover { background: var(--s2); }
.sr-pfrow { font-style: italic; color: var(--tx2); }
@media (max-width: 760px) {
  .sr-actions { margin-left: 0; }
  .sr-q { max-width: none; flex-basis: 100%; }
  .sr-kpi { flex-basis: 140px; padding: 10px 12px; }
  .sr-kpi .kpi-val { font-size: 17px; }
  .sr-list { background: none; border: 0; overflow: visible; }
  .sr-head { display: none; }
  /* A row becomes a card: number + total on top, then who, what, money. */
  .sr-row, .sr-row.sr-sel { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 4px 10px;
    grid-template-areas: "no tot" "cust cust" "desc desc" "rcv due";
    background: var(--s); border: 1px solid var(--bd); border-radius: var(--r); margin-bottom: 8px; padding: 10px 12px; }
  .sr-row.sr-sel { grid-template-areas: "tick tick" "no tot" "cust cust" "desc desc" "rcv due"; }
  .sr-tick { grid-area: tick; }
  .sr-c-no { grid-area: no; } .sr-c-tot { grid-area: tot; } .sr-c-cust { grid-area: cust; }
  .sr-c-desc { grid-area: desc; } .sr-c-rcv { grid-area: rcv; text-align: left; } .sr-c-due { grid-area: due; }
  .sr-lbl { display: block; font-size: 10px; color: var(--tx3); text-transform: uppercase; letter-spacing: .05em; }
  .sr-lrow { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap: 4px 10px; background: var(--s);
    border: 1px solid var(--bd); border-radius: var(--r2); margin-bottom: 6px; padding: 8px 10px; }
  .sr-lrow > .sr-c-no { grid-column: 1 / -1; }
  .sr-lrow > .sr-r { text-align: left; }
}

/* ── Chain at a glance (mig 142, js/chain-icons.js) ─────────────────────────
   Small circled letters, one per chain step. Red ring = linked, grey = not.
   Both themes come from the tokens; nothing here is a hard-coded colour. */
.wd-chain { display: inline-flex; gap: 3px; flex-wrap: nowrap; cursor: pointer; vertical-align: middle; }
.wd-chain-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%;
  border: 1.5px solid var(--tx3); color: var(--tx3); opacity: .45;
  font: 700 8.5px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  letter-spacing: -.02em; box-sizing: border-box; user-select: none;
}
.wd-chain-i.on { border-color: var(--ac); color: var(--ac); opacity: 1; background: var(--acl); }
/* Phone: the strip rides under the customer name (the Chain column is mob-hide). */
.wd-chain-mob { display: none; }
@media (max-width: 600px) {
  .wd-chain-mob { display: block; margin-top: 4px; }
  .wd-chain-mob .wd-chain { flex-wrap: wrap; row-gap: 3px; }
}