:root {
	--brand: #2a8f47;
	--brand-ink: #1a6a32;
	--brand-soft: #e6f4ea;
	--brand-soft-2: #f1faf4;
	--ink: #1f2937;
	--ink-mid: #4b5563;
	--ink-dim: #6b7280;
	--line: #e5e7eb;
	--line-soft: #f1f3f5;
	--bg: #ffffff;
	--bg-alt: #fafbfc;
	--bg-stripe: #fcfdfd;
	--warn: #f59e0b;
	--bad: #dc2626;
	--shadow: 0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
	--radius: 6px;
}

/* Page-level accent modes. Flipping these custom properties recolors
   the entire Jobs page (ribbon, tabs, list-mgr rail, toolbar, buttons,
   hover states) so the user sees at a glance whether they're in Order
   (green, default), Quote (blue), History (red), or Template (purple)
   mode — matches legacy pp2016's window-wide accent behavior. */
body.mode-quote {
	--brand: #2563eb;
	--brand-ink: #1e3a8a;
	--brand-soft: #dbeafe;
	--brand-soft-2: #eff6ff;
}
body.mode-history {
	--brand: #dc2626;
	--brand-ink: #991b1b;
	--brand-soft: #fee2e2;
	--brand-soft-2: #fef2f2;
}
body.mode-template {
	--brand: #8b5cf6;
	--brand-ink: #6b21a8;
	--brand-soft: #ede9fe;
	--brand-soft-2: #f5f3ff;
}
/* Per-tab tinting (applied via body.page-<key>). Jobs stays on the green
   default; every other tab repaints ribbon/tabs/rail/buttons through the
   same --brand tokens so Dave can see which section he's in at a glance. */
body.page-services {
	--brand: #8b6f47;
	--brand-ink: #6b5335;
	--brand-soft: #efe4d3;
	--brand-soft-2: #f5efe6;
	--bg-alt: #f5efe6;
	--bg-stripe: #faf5eb;
	background: #efe4d3;
}
body.page-customers {
	--brand: #2563eb;
	--brand-ink: #1e3a8a;
	--brand-soft: #dbeafe;
	--brand-soft-2: #eff6ff;
	--bg-alt: #eff6ff;
	--bg-stripe: #f5f9ff;
	background: #dbeafe;
}
body.page-ar {
	--brand: #0891b2;
	--brand-ink: #155e75;
	--brand-soft: #cffafe;
	--brand-soft-2: #ecfeff;
	--bg-alt: #ecfeff;
	--bg-stripe: #f0fdff;
	background: #cffafe;
}
body.page-reports {
	--brand: #9f1239;
	--brand-ink: #6b1029;
	--brand-soft: #fce7eb;
	--brand-soft-2: #fef1f4;
	--bg-alt: #fef1f4;
	--bg-stripe: #fef6f8;
	background: #fce7eb;
}
body.page-accounting {
	--brand: #334155;
	--brand-ink: #1e293b;
	--brand-soft: #e2e8f0;
	--brand-soft-2: #f1f5f9;
	--bg-alt: #f1f5f9;
	--bg-stripe: #f8fafc;
	background: #e2e8f0;
}
* { box-sizing: border-box; }
html, body {
	margin: 0;
	height: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
	color: var(--ink);
	background: #eef1f4;
}
.num { font-variant-numeric: tabular-nums; }
a { color: #2563eb; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Window chrome */
.window { display: flex; flex-direction: column; height: 100vh; background: var(--bg); }

/* Consolidated top row — replaces titlebar + tabs + ribbon (Dave 2026-04-24).
   Logo, app name, tabs, click-to-hide spacer, and global actions all in one
   strip. Saves ~70px of vertical chrome on every page. */
.topbar {
	display: flex; align-items: stretch;
	background: var(--brand); color: #fff;
	border-bottom: 1px solid rgba(0,0,0,.12);
	padding: 0 6px;
	min-height: 38px;
}
.tb-brand {
	display: flex; align-items: center; gap: 6px;
	padding: 0 8px 0 6px;
	border-right: 1px solid rgba(255,255,255,.18);
}
.tb-brand .brand-mark {
	width: 26px; height: 26px; border-radius: 50%;
	object-fit: cover; background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.tb-name {
	font-weight: 700; letter-spacing: .3px; font-size: 13px; line-height: 1;
}
.tb-name-sub {
	font-size: 9px; letter-spacing: .5px; color: rgba(255,255,255,.55);
	font-weight: 600; text-transform: uppercase; line-height: 1;
}
.tb-mode-badge {
	margin-left: 10px; padding: 3px 8px; border-radius: 10px;
	background: rgba(56, 189, 248, .18); color: #7dd3fc;
	font-size: 10px; font-weight: 700; letter-spacing: .4px;
	text-transform: uppercase; text-decoration: none; line-height: 1;
	border: 1px solid rgba(56, 189, 248, .35);
}
.tb-mode-badge:hover { background: rgba(56, 189, 248, .32); color: #fff; }

/* ?theme=pp — pp2016 green parity. Chester's default --brand (#2a8f47) is
   already green but a touch brighter than pp2016. Theme-pp shifts to the
   forest-green pp2016 uses on title bars and section accents so McKenzie can
   A/B the two. Toggle with ?theme=pp / ?theme=default; persists in
   localStorage as chester_theme. The brand vars cascade everywhere — topbar,
   ribbons, hover states, modal titles — so a single override recolors the
   whole app. */
:root.theme-pp {
	--brand:        #1b7a3c;
	--brand-ink:    #0f5125;
	--brand-soft:   #d6f0dc;
	--brand-soft-2: #e9f7ee;
}
/* Theme badge — same shape as the McKenzie Mode badge but green-tinted so
   you can tell at a glance which override is active. */
.tb-theme-badge {
	margin-left: 6px; padding: 3px 8px; border-radius: 10px;
	background: rgba(216, 240, 220, .25); color: #d6f0dc;
	font-size: 10px; font-weight: 700; letter-spacing: .4px;
	text-transform: uppercase; text-decoration: none; line-height: 1;
	border: 1px solid rgba(216, 240, 220, .4);
}
.tb-theme-badge:hover { background: rgba(216, 240, 220, .4); color: #fff; }

/* Smarter Estimator #1 — Customer-history banner. Shows above the items grid
   when the job has a CusNo. Lets McKenzie one-click clone items from a past
   order. Collapsible. */
.jd-cust-history {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: #fffef7;
}
.jd-cust-history-head {
	display: flex; align-items: center; gap: 8px;
	width: 100%; padding: 6px 12px; cursor: pointer;
	background: transparent; border: 0; text-align: left;
	font: 600 12px system-ui; color: #475569;
}
.jd-cust-history-head .chev { width: 14px; color: #94a3b8; }
.jd-cust-history-head .lbl { font-weight: 700; color: #92400e; }
.jd-cust-history-hint { color: #94a3b8; font-size: 11px; font-weight: 500; margin-left: 8px; }
.jd-cust-history-body { padding: 4px 8px 8px; display: grid; gap: 4px; }
.jd-cust-history-body[hidden] { display: none; }
.jd-cust-history-loading,
.jd-cust-history-empty,
.jd-cust-history-err {
	padding: 8px 12px; color: var(--ink-dim); font-size: 12px; font-style: italic;
}
.jd-cust-history-err { color: #991b1b; font-style: normal; }
.jd-cust-history-row {
	display: grid;
	grid-template-columns: 180px 1.2fr 1.4fr 220px;
	gap: 8px; align-items: center;
	padding: 4px 8px;
	border: 1px solid #fde68a;
	border-radius: 5px;
	background: #fffbe6;
	font-size: 12px;
}
.jd-cust-history-row:hover { background: #fef3c7; border-color: #fcd34d; }
.jd-cust-history-meta { display: flex; align-items: center; gap: 6px; }
.jd-cust-history-date { color: var(--ink-mid); font-weight: 600; }
.jd-cust-history-jobno { color: var(--ink-dim); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }
.jd-cust-history-badge {
	padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700;
	letter-spacing: .4px; text-transform: uppercase;
}
.jd-cust-history-badge.bg-quote   { background: #dbeafe; color: #1e40af; }
.jd-cust-history-badge.bg-order   { background: #d1fae5; color: #065f46; }
.jd-cust-history-badge.bg-history { background: #e5e7eb; color: #374151; }
.jd-cust-history-title { font-weight: 600; color: var(--ink); }
.jd-cust-history-summary {
	color: var(--ink-mid); font-size: 11px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jd-cust-history-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.jd-cust-history-copy {
	background: #16a34a; color: #fff; border: 0;
	padding: 3px 8px; border-radius: 4px;
	font-size: 11px; font-weight: 600; cursor: pointer;
}
.jd-cust-history-copy:hover { background: #15803d; }
.jd-cust-history-copy:disabled { background: #94a3b8; cursor: progress; }
.jd-cust-history-open {
	color: #1e40af; text-decoration: none; font-size: 11px; font-weight: 600;
	padding: 3px 6px; border-radius: 4px;
}
.jd-cust-history-open:hover { background: #dbeafe; }
.jd-cust-history-total {
	margin-left: 6px;
	font-weight: 700; color: #065f46; font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 11.5px;
}

/* Smarter Estimator #8 — Similar-jobs toggle + body. Lives under the customer
   history. Shows Jaccard similarity score and copy buttons. */
.jd-similar-toggle {
	display: block; margin: 4px 8px 6px;
	background: transparent; color: #1e40af;
	border: 1px dashed #93c5fd; border-radius: 4px;
	padding: 3px 10px; font: 600 11.5px system-ui;
	cursor: pointer;
}
.jd-similar-toggle:hover { background: #eff6ff; }
.jd-similar-body { padding: 4px 8px 8px; display: grid; gap: 4px; }
.jd-similar-body[hidden] { display: none; }
.jd-similar-row { border-color: #93c5fd; background: #eff6ff; }
.jd-similar-row:hover { background: #dbeafe; border-color: #60a5fa; }
.jd-similar-sim {
	display: inline-block; padding: 1px 6px; border-radius: 3px;
	background: #1e40af; color: #fff; font-weight: 700; font-size: 10px;
	letter-spacing: .3px;
}

/* Smarter Estimator #7 — Win-rate chip in the bill-to panel, next to the
   tier chip. Informational only. */
.cust-win-chip {
	display: inline-block; margin-left: 4px; padding: 2px 7px;
	border-radius: 3px; font-size: 10.5px; font-weight: 700;
	letter-spacing: .3px; text-transform: uppercase;
}
.cust-win-chip.win-high { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.cust-win-chip.win-mid  { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }
.cust-win-chip.win-low  { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.cust-win-chip.win-na   { background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1; }

/* Smarter Estimator #9 — Vendor-compare chip inside the items grid description
   cell. Green when broker would be cheaper than our cost; blue when matched
   but not cheaper (informational). */
.vendor-compare-chip {
	display: inline-block; margin-left: 6px; padding: 1px 6px;
	border-radius: 3px; font-size: 10px; font-weight: 700;
	letter-spacing: .2px;
}
.vendor-compare-chip.vendor-cheaper { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.vendor-compare-chip.vendor-info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }

/* Smarter Estimator #12 — Customer payment-tier chip in the bill-to panel.
   Color-coded; informational only (no action). */
.jd-cust-tier { margin-top: 3px; }
.cust-tier-chip {
	display: inline-block; padding: 2px 7px; border-radius: 3px;
	font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
	text-transform: uppercase;
}
.cust-tier-chip.tier-reliable          { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.cust-tier-chip.tier-standard          { background: #e2e8f0; color: #334155; border: 1px solid #cbd5e1; }
.cust-tier-chip.tier-slow              { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }
.cust-tier-chip.tier-collection_problem{ background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* Smarter Estimator #10 — Qty-break suggestion chip. Shows under the qty cell
   when current qty is just below a common print-pricing tier. Click → confirms
   and re-prices at the higher qty. */
.qty-break-hint {
	display: inline-block; margin-top: 2px; padding: 1px 5px;
	background: #ecfdf5; color: #065f46;
	border: 1px solid #6ee7b7; border-radius: 3px;
	font-size: 9.5px; font-weight: 700; cursor: pointer;
	letter-spacing: .2px; line-height: 1.3;
}
.qty-break-hint:hover { background: #d1fae5; border-color: #34d399; }

/* Smarter Estimator #5 — Floor-breach badge in the state-indicators area.
   Surfaces when parent margin is <10%. Click → prompt for reason → persists
   to item_edits.floor_breach_reason. */
.floor-breach-badge {
	display: inline-block; margin-right: 3px; padding: 1px 6px;
	border-radius: 3px; font-size: 10px; font-weight: 700; cursor: pointer;
	border: 1px solid transparent; line-height: 1.4;
}
.floor-breach-badge.breach-thin {
	background: #fef3c7; color: #92400e; border-color: #fbbf24;
}
.floor-breach-badge.breach-bad {
	background: #fee2e2; color: #991b1b; border-color: #dc2626;
}
.floor-breach-badge.breach-noted {
	background: #e0e7ff; color: #4338ca; border-color: #a5b4fc;
}
.floor-breach-badge:hover { opacity: .85; }

/* Smarter Estimator #4 — Per-line margin chip. Tiny colored dot prefixed to the
   line total so McKenzie sees green/amber/red at a glance without seeing the
   exact cost. Targets: ≥50% green, 30-49% amber, 0-29% red, <0% underwater. */
.margin-chip {
	display: inline-block; width: 8px; height: 8px; border-radius: 50%;
	margin-right: 5px; vertical-align: middle;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .1);
}
.margin-chip.good       { background: #10b981; }
.margin-chip.okay       { background: #f59e0b; }
.margin-chip.bad        { background: #ef4444; }
.margin-chip.underwater { background: #7f1d1d; box-shadow: 0 0 0 2px #fecaca; }

/* Smarter Estimator #6 — Cost + Margin% columns visible only when html.show-margin
   (set by ?show=margin URL param). Never persisted in localStorage so McKenzie
   doesn't accidentally see costs. */
.col-cost, .col-margin { display: none; }
html.show-margin .col-cost, html.show-margin .col-margin { display: table-cell; }
html.show-margin .col-cost {
	color: var(--ink-mid); font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 11.5px; font-weight: 600;
}
html.show-margin .col-margin .margin-pct {
	display: inline-block; padding: 1px 6px; border-radius: 3px;
	font-size: 11px; font-weight: 700; letter-spacing: .2px;
}
html.show-margin .margin-pct.good { background: #d1fae5; color: #065f46; }
html.show-margin .margin-pct.okay { background: #fef3c7; color: #92400e; }
html.show-margin .margin-pct.bad  { background: #fee2e2; color: #991b1b; }

/* Smarter Estimator #2 — Similar-items typeahead under the New Item description
   input. Floats below the field. Customer-scoped first, global fallback. */
.ni-desc-suggest {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
	background: #fff; border: 1px solid var(--line);
	border-top: 0; border-radius: 0 0 6px 6px;
	box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
	max-height: 280px; overflow: auto;
}
.ni-desc-suggest[hidden] { display: none; }
.ni-desc-suggest-loading, .ni-desc-suggest-empty, .ni-desc-suggest-err {
	padding: 8px 12px; color: var(--ink-dim); font-size: 11.5px; font-style: italic;
}
.ni-desc-suggest-err { color: #991b1b; font-style: normal; }
.ni-desc-suggest-row {
	padding: 6px 12px; border-top: 1px solid var(--line-soft);
	cursor: pointer;
}
.ni-desc-suggest-row:first-child { border-top: 0; }
.ni-desc-suggest-row:hover { background: #f1f5f9; }
.ni-desc-suggest-main { display: flex; align-items: baseline; gap: 8px; }
.ni-desc-suggest-jobno {
	font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 10.5px;
	color: #1e40af; font-weight: 700;
}
.ni-desc-suggest-desc {
	font-size: 12.5px; color: var(--ink); font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ni-desc-suggest-meta { font-size: 10.5px; color: var(--ink-dim); margin-top: 2px; }
.ni-desc-suggest-cust { color: #92400e; font-weight: 600; margin-left: 6px; }

/* Unit suffix on the Unit Price column — pp2016 parity (e.g. "542.40/M",
   "0.3014/Ea"). Slightly dimmer than the number itself so the value dominates
   visually but the unit is still visible. */
.unit-suffix {
	margin-left: 1px;
	font-size: 10px;
	color: var(--ink-dim, #94a3b8);
	font-weight: 500;
}

/* Keyboard-shortcut overlay — Build #3 of CPAI modernization playbook.
   Press ? anywhere outside a text input to invoke; Esc or click backdrop
   to close. Dense, scannable, grouped by area. */
#kb-shortcut-overlay {
	position: fixed; inset: 0;
	background: rgba(15, 23, 42, .55);
	display: flex; align-items: flex-start; justify-content: center;
	padding-top: 8vh;
	z-index: 9999;
}
.kb-shortcut-modal {
	width: clamp(560px, 60vw, 820px);
	max-height: 80vh;
	background: #fff; border-radius: 8px;
	box-shadow: 0 24px 48px rgba(15, 23, 42, .3);
	display: flex; flex-direction: column;
	overflow: hidden;
}
.kb-shortcut-modal header {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 16px; border-bottom: 1px solid #e5e7eb;
	background: #f8fafc;
}
.kb-shortcut-modal header h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: .3px; }
.kb-close {
	margin-left: auto; background: none; border: 0;
	font-size: 16px; cursor: pointer; padding: 4px 10px; border-radius: 4px;
	color: #475569;
}
.kb-close:hover { background: #fee2e2; color: #991b1b; }
.kb-body {
	flex: 1; overflow: auto; padding: 14px 18px;
	display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px;
}
.kb-section h4 {
	margin: 0 0 6px; font-size: 11px; font-weight: 700;
	letter-spacing: .6px; text-transform: uppercase;
	color: #475569; border-bottom: 1px solid #e5e7eb; padding-bottom: 4px;
}
.kb-section table { width: 100%; border-collapse: collapse; font-size: 12px; }
.kb-section td { padding: 3px 6px 3px 0; vertical-align: top; line-height: 1.45; }
.kb-section td.kbd { width: 130px; white-space: nowrap; }
.kb-section kbd {
	display: inline-block; padding: 1px 6px; border-radius: 3px;
	background: #f1f5f9; border: 1px solid #cbd5e1; border-bottom-width: 2px;
	font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: #0f172a;
}
.kb-shortcut-modal footer {
	padding: 8px 18px; border-top: 1px solid #e5e7eb; background: #f8fafc;
	font-size: 11px; color: #475569;
}

/* Live customer-preview pane — Build #2 of CPAI modernization playbook.
   Fixed right-side overlay that slides in when toggled. Width is ~38% of
   viewport at desktop sizes, capped between 380px and 640px. */
.jd-preview-panel {
	position: fixed; right: 0; top: 64px; bottom: 32px;
	width: clamp(380px, 38vw, 640px);
	background: #fff;
	border-left: 1px solid #e5e7eb;
	box-shadow: -6px 0 24px rgba(15, 23, 42, .12);
	display: flex; flex-direction: column;
	z-index: 50;
}
.jd-preview-panel[hidden] { display: none; }
.jd-preview-head {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 12px; border-bottom: 1px solid #e5e7eb;
	background: #f8fafc;
}
.jd-preview-title {
	font-weight: 700; font-size: 12px; color: #0f172a;
	letter-spacing: .3px;
}
.jd-preview-mode {
	padding: 2px 6px; font-size: 12px;
	border: 1px solid #cbd5e1; border-radius: 4px; background: #fff;
}
.jd-preview-open {
	margin-left: auto; padding: 2px 8px; font-size: 14px; line-height: 1;
	color: #475569; text-decoration: none; border-radius: 4px;
}
.jd-preview-open:hover { background: #e2e8f0; color: #0f172a; }
.jd-preview-close {
	cursor: pointer; background: none; border: 0; font-size: 16px;
	color: #475569; padding: 2px 8px; line-height: 1; border-radius: 4px;
}
.jd-preview-close:hover { background: #fee2e2; color: #991b1b; }
.jd-preview-frame {
	flex: 1; border: 0; background: #fff;
}
/* When preview is open, give the items area a bit of right padding so
   the items table doesn't get hidden behind the panel on narrow viewports. */
body.jd-preview-open .detail { padding-right: clamp(380px, 38vw, 640px); transition: padding-right .15s ease; }
/* Active state on the toolbar toggle when the panel is shown */
.tb-btn.active { background: #1e40af; color: #fff; border-color: #1e3a8a; }

/* Inline grid editing — Build #1 of CPAI modernization playbook.
   Cells marked .cell-edit show a subtle hover state, and become outlined
   + editable on double-click. .editing during input, .saving during POST,
   .saved as a brief success affordance. */
.cell-edit {
	cursor: cell;
	position: relative;
	transition: background-color .12s ease, outline-color .12s ease;
}
.cell-edit:hover {
	background: rgba(96, 165, 250, .08);
	outline: 1px dashed rgba(96, 165, 250, .4);
	outline-offset: -1px;
}
.cell-edit.editing {
	outline: 2px solid #3b82f6;
	outline-offset: -2px;
	background: #fff;
	cursor: text;
}
.cell-edit.editing:hover {
	outline: 2px solid #3b82f6;  /* don't change on hover while editing */
}
.cell-edit.saving::after {
	content: '↻';
	position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	color: #94a3b8; font-size: 11px;
	animation: cellEditSpin 1s linear infinite;
}
.cell-edit.saved::after {
	content: '✓';
	position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
	color: #16a34a; font-size: 12px; font-weight: 700;
	animation: cellEditFadeOut 1.5s forwards;
}
@keyframes cellEditSpin { from { transform: translateY(-50%) rotate(0); } to { transform: translateY(-50%) rotate(360deg); } }
@keyframes cellEditFadeOut { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.tb-tabs {
	display: flex; align-items: stretch; padding: 0 4px;
}
.tb-tab {
	display: inline-flex; align-items: center;
	padding: 0 14px; color: rgba(255,255,255,.78);
	text-decoration: none; font-size: 13px;
	border-bottom: 2px solid transparent;
	transition: color .12s, background .12s, border-color .12s;
}
.tb-tab:hover { color: #fff; background: rgba(255,255,255,.08); }
.tb-tab.active {
	color: #fff; font-weight: 600;
	border-bottom-color: #fff;
	background: rgba(255,255,255,.10);
}
/* Parent tab with children (Financial) — shows a submenu on hover/focus. */
.tb-tab-wrap { position: relative; display: inline-flex; align-items: stretch; }
.tb-tab-parent .tb-chev { font-size: 9px; margin-left: 4px; opacity: .7; }
.tb-submenu {
	position: absolute; top: 100%; left: 0; z-index: 60;
	min-width: 180px;
	background: #fff; color: #1e293b;
	border: 1px solid rgba(0,0,0,.12);
	border-radius: 0 0 6px 6px;
	box-shadow: 0 6px 18px rgba(0,0,0,.18);
	padding: 4px 0;
	display: none;
}
.tb-tab-wrap:hover .tb-submenu,
.tb-tab-wrap:focus-within .tb-submenu { display: block; }
.tb-sub-item {
	display: block; padding: 7px 14px;
	font-size: 13px; color: #334155; text-decoration: none;
	transition: background .12s, color .12s;
}
.tb-sub-item:hover { background: #f1f5f9; color: #0f172a; }
.tb-sub-item.active { background: #e2e8f0; color: #0f172a; font-weight: 600; }
/* Sub-section header inside dropdown (FB Dave 2026-05-24) */
.tb-sub-header {
	padding: 10px 14px 4px;
	font-size: 10px; font-weight: 700; letter-spacing: .8px;
	color: #94a3b8; text-transform: uppercase;
	border-top: 1px solid #e2e8f0;
	margin-top: 4px;
	user-select: none;
}
.tb-sub-header:first-child { border-top: none; margin-top: 0; }
.tb-spacer {
	flex: 1; align-self: stretch; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; color: rgba(255,255,255,.45); font-style: italic;
	letter-spacing: .04em; transition: color .15s, background .15s;
}
.tb-spacer::before { content: '‹ hide / show open job ›'; font-size: 9px; }
.tb-spacer:hover { color: #fff; background: rgba(255,255,255,.06); }
.tb-actions {
	display: flex; align-items: stretch;
	border-left: 1px solid rgba(255,255,255,.18);
}
.tb-act {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 0 10px; border: 0; background: transparent; cursor: pointer;
	color: rgba(255,255,255,.85); font-size: 12px;
	font-family: inherit; transition: color .12s, background .12s;
}
.tb-act svg { width: 15px; height: 15px; }
.tb-gear { padding: 0 10px; display: inline-flex; align-items: center; color: rgba(255,255,255,.85); }
.tb-gear svg { width: 17px; height: 17px; }
.tb-gear:hover { color: #fff; background: rgba(255,255,255,.10); }
.tb-gear.active { color: #fff; background: rgba(255,255,255,.14); }
.tb-act:hover { color: #fff; background: rgba(255,255,255,.10); }
.tb-act.tb-refresh { color: #bbf7d0; }
.tb-act.tb-refresh:hover { color: #fff; background: rgba(34,197,94,.25); }
.tb-act.tb-feedback { position: relative; color: #fef3c7; }
.tb-act.tb-feedback:hover { color: #fff; background: rgba(245,158,11,.25); }
.tb-act.tb-feedback.active { color: #fff; background: rgba(245,158,11,.30); }
.fb-count-badge {
	position: absolute; top: 2px; right: 2px;
	background: #f59e0b; color: #1f1300;
	font-size: 9.5px; font-weight: 800;
	padding: 1px 5px; border-radius: 10px;
	min-width: 16px; text-align: center;
	box-shadow: 0 0 0 1.5px rgba(15,23,42,.85);
}

/* Chat unread badge — sits inline next to the "Chat" tab label. Red accent
   so it reads as "someone said something" rather than triage queue. */
.tb-tab .ch-unread-badge {
	display: inline-block;
	background: #ef4444; color: #fff;
	font-size: 9.5px; font-weight: 800;
	padding: 1px 5px; border-radius: 10px;
	min-width: 16px; text-align: center;
	margin-left: 6px; vertical-align: middle;
	box-shadow: 0 0 0 1.5px rgba(15,23,42,.85);
}

/* Legacy chrome shells — left in for back-compat with renderWindow contracts. */
.win-ctrls { display: none; }

/* Body */
/* FB 2026-05-02 (103128 + 103307) — bumped from 180px to 220px so rail
 * labels like "Graphics 39", "Tax Exempt", "All Customers" stop wrapping
 * and the badge counts have breathing room. */
.body { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr; transition: grid-template-columns .2s; }
.body.rail-collapsed { grid-template-columns: 28px 1fr; }
/* When a page has NO list-manager rail (e.g. customer-cleanup, vendors-review,
   profit-first-actuals, payments-audit, purchases-matches), collapse the body
   grid to a single full-width column so <main class="detail"> doesn't get
   stuffed into the 220px first column. :has() needs Chrome 105+ / Safari 15.4+
   / Firefox 121+ — all current. (FB Dave 2026-05-06 screenshots) */
.body:not(:has(> .list-mgr)) { grid-template-columns: 1fr; }
/* And let those rail-less pages scroll vertically. .detail's overflow:hidden
   was clipping the bottom of long pages (FB Dave 2026-05-06_091412 — couldn't
   scroll on Bill-Payment Match Review). */
.body:not(:has(> .list-mgr)) > .detail { overflow-y: auto; }

/* List manager */
.list-mgr {
	position: relative;
	border-right: 1px solid var(--line); background: var(--bg-alt);
	overflow-y: auto; overflow-x: hidden; font-size: 12px;
	box-shadow: inset -4px 0 6px -6px rgba(0,0,0,.18);
}
.list-mgr .rail-head {
	display: flex; align-items: center; gap: 6px;
	padding: 4px 8px; background: var(--bg-alt);
	border-bottom: 1px solid var(--line);
	font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
	color: var(--ink-dim); font-weight: 600;
	position: sticky; top: 0; z-index: 3;
}
.list-mgr .rail-head .spacer { flex: 1; }

/* Column collapse/expand controls */
.col-chev {
	border: 0; background: transparent; cursor: pointer;
	width: 20px; height: 20px; border-radius: 3px;
	display: inline-grid; place-items: center;
	color: var(--ink-dim); font-size: 12px;
}
.col-chev:hover { background: var(--brand-soft); color: var(--brand-ink); }
.col-stub {
	display: none; align-items: flex-start; justify-content: center;
	padding-top: 8px; background: var(--bg-alt);
	border-right: 1px solid var(--line); cursor: pointer;
	box-shadow: inset -4px 0 6px -6px rgba(0,0,0,.18);
}
.col-stub:hover { background: var(--brand-soft); }
.col-stub .col-label {
	writing-mode: vertical-rl; transform: rotate(180deg);
	margin-top: 8px; font-size: 10px; letter-spacing: .6px;
	text-transform: uppercase; color: var(--ink-dim); font-weight: 600;
}
.body.rail-collapsed .list-mgr { display: none; }
.body.rail-collapsed .rail-stub { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rail-stub { display: none; }
.lm-datefilter {
	padding: 8px 12px; border-bottom: 1px solid var(--line);
	background: var(--bg-soft);
}
.lm-datefilter label {
	display: flex; align-items: center; gap: 6px;
	font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .4px;
}
.lm-datefilter select {
	flex: 1; padding: 4px 6px; font-size: 12px;
	border: 1px solid var(--line); border-radius: 3px;
	background: var(--bg); color: var(--ink); font-family: inherit;
	text-transform: none; letter-spacing: 0;
}
.lm-datefilter select:focus { outline: none; border-color: var(--brand); }
.lm-section { border-bottom: 1px solid var(--line); }
.lm-section > header {
	display: flex; align-items: center; gap: 6px;
	padding: 6px 10px; background: var(--brand-soft);
	font-weight: 600; color: var(--brand-ink);
	cursor: pointer; user-select: none;
}
.lm-section > header .chev { transition: transform .15s; color: var(--ink-dim); }
.lm-section.collapsed > header .chev { transform: rotate(-90deg); }
.lm-section ul { list-style: none; margin: 0; padding: 2px 0 6px; }
.lm-section.collapsed ul { display: none; }
.lm-section li {
	padding: 2px 10px 2px 26px; cursor: pointer; color: var(--ink-mid);
	display: flex; align-items: center; gap: 6px; line-height: 1.6;
}
.lm-section li:hover { background: var(--brand-soft); color: var(--brand-ink); }
.lm-section li.active { background: var(--brand); color: white; }
.lm-section li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .55; }
.lm-section li.active::before { background: white; opacity: 1; }
.lm-section li .badge {
	margin-left: auto; background: rgba(0,0,0,.06); color: var(--ink-dim);
	border-radius: 10px; padding: 0 6px; font-size: 10px; font-weight: 600;
}
.lm-section li.active .badge { background: rgba(255,255,255,.25); color: white; }

.lm-section li.lm-divider {
	font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
	color: var(--ink-dim); padding: 6px 10px 2px 16px; cursor: default;
	pointer-events: none;
}
.lm-section li.lm-divider::before { display: none; }
/* FB 2026-05-02 — date-window + action items used to render smaller and
   indented further so they read as a "sub-list". Now that they're first-
   class entries in the inline rail (Quotes/History redesign), unify
   typography + bullet + indent with the status items above them. */
.lm-section li.lm-datewin,
.lm-section li.lm-action { /* same as base .lm-section li */ }

/* Per-section color coding so at-a-glance the user knows which bucket is
   which, regardless of the page-level accent mode. Orders stay on the
   page default (green via --brand). */
.lm-section[data-section="orders"] > header { background: #e6f4ea; color: #1a6a32; }
.lm-section[data-section="orders"] li::before { background: #2a8f47; }
.lm-section[data-section="orders"] li:hover { background: #e6f4ea; color: #1a6a32; }
.lm-section[data-section="orders"] li.active { background: #2a8f47; color: #fff; }
.lm-section[data-section="orders"] li.active::before { background: #fff; }

.lm-section[data-section="quotes"] > header { background: #dbeafe; color: #1e3a8a; }
.lm-section[data-section="quotes"] li::before { background: #2563eb; }
.lm-section[data-section="quotes"] li:hover { background: #dbeafe; color: #1e3a8a; }
.lm-section[data-section="quotes"] li.active { background: #2563eb; color: #fff; }
.lm-section[data-section="quotes"] li.active::before { background: #fff; }

.lm-section[data-section="history"] > header { background: #fee2e2; color: #991b1b; }
.lm-section[data-section="history"] li::before { background: #dc2626; }
.lm-section[data-section="history"] li:hover { background: #fee2e2; color: #991b1b; }
.lm-section[data-section="history"] li.active { background: #dc2626; color: #fff; }
.lm-section[data-section="history"] li.active::before { background: #fff; }

.lm-section[data-section="templates"] > header { background: #ede9fe; color: #6b21a8; }
.lm-section[data-section="templates"] li::before { background: #8b5cf6; }
.lm-section[data-section="templates"] li:hover { background: #ede9fe; color: #6b21a8; }
.lm-section[data-section="templates"] li.active { background: #8b5cf6; color: #fff; }
.lm-section[data-section="templates"] li.active::before { background: #fff; }

/* Detail pane */
.detail { display: flex; flex-direction: column; min-height: 0; background: var(--bg); overflow: hidden; }
.detail-chrome {
	display: flex; align-items: center; justify-content: space-between;
	padding: 4px 10px;
	background: linear-gradient(to bottom, #fff, #f6f8f9);
	border-bottom: 1px solid var(--line);
	font-size: 11px; color: var(--ink-dim);
}
.detail-chrome b { color: var(--ink); }

/* summary header */
.job-header {
	display: flex; flex-wrap: wrap;
	align-items: center; gap: 10px;
	padding: 4px 12px;
	background: linear-gradient(to right, var(--brand-soft-2), transparent 60%);
	border-bottom: 1px solid var(--line);
}
.job-header .job-title { flex: 1 1 200px; min-width: 0; }
.pill {
	padding: 1px 6px; border-radius: 3px;
	font-size: 10px; font-weight: 600; letter-spacing: .3px;
	background: #dcfce7; color: #166534; text-transform: uppercase;
}
.job-no { font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.5px; }
.job-title { font-size: 15px; color: var(--ink); font-weight: 500; }
.job-title[data-cell="job-title"] { cursor: text; padding: 2px 6px; border-radius: 4px; }
.job-title[data-cell="job-title"]:hover { background: rgba(0,0,0,0.04); }
.job-title[data-cell="job-title"] input { outline: none; }

/* Quote mode — matches legacy pp2016's blue Quote chrome so the user
   knows at a glance they're editing a quote, not an order. */
.detail-chrome.mode-quote {
	background: linear-gradient(to bottom, #dbeafe, #bfdbfe);
	border-bottom-color: #60a5fa;
	color: #1e3a8a;
}
.detail-chrome.mode-quote b { color: #1e3a8a; }
.job-header.mode-quote {
	background: linear-gradient(to right, #dbeafe, transparent 60%);
	border-bottom-color: #60a5fa;
}
.job-header.mode-quote .pill { background: #dbeafe; color: #1e40af; }
.job-header.mode-quote .job-no { color: #1e3a8a; }

/* History mode — red so closed/archived jobs read as look-don't-touch. */
.detail-chrome.mode-history {
	background: linear-gradient(to bottom, #fee2e2, #fecaca);
	border-bottom-color: #f87171;
	color: #991b1b;
}
.detail-chrome.mode-history b { color: #991b1b; }
.job-header.mode-history {
	background: linear-gradient(to right, #fee2e2, transparent 60%);
	border-bottom-color: #f87171;
}
.job-header.mode-history .pill { background: #fee2e2; color: #991b1b; }
.job-header.mode-history .job-no { color: #991b1b; }

/* Unlock button / chip — sits at the right end of the History job-header.
   🔒 button = locked state (edits read-only); 🔓 chip = unlocked (reason shown,
   tap Re-lock to drop back). Margin-left:auto pushes it to the far right. */
.unlock-btn {
	margin-left: auto;
	padding: 4px 10px;
	font-size: 12px; font-weight: 600;
	background: #991b1b; color: #fff;
	border: 1px solid #7f1d1d; border-radius: 6px;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.unlock-btn:hover { background: #7f1d1d; }
.unlock-chip {
	margin-left: auto;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 4px 3px 10px;
	font-size: 12px; font-weight: 600;
	background: #dcfce7; color: #166534;
	border: 1px solid #86efac; border-radius: 6px;
	max-width: 420px;
}
.unlock-chip .rzn {
	font-weight: 400; font-style: italic; color: #15803d;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px;
}
.relock-btn {
	padding: 2px 8px; font-size: 11px; font-weight: 600;
	background: #fff; color: #166534;
	border: 1px solid #86efac; border-radius: 4px;
	cursor: pointer;
}
.relock-btn:hover { background: #f0fdf4; }

/* Template mode — purple/lavender so template jobs (JobType=2) stand out. */
.detail-chrome.mode-template {
	background: linear-gradient(to bottom, #ede9fe, #ddd6fe);
	border-bottom-color: #a78bfa;
	color: #6b21a8;
}
.detail-chrome.mode-template b { color: #6b21a8; }
.job-header.mode-template {
	background: linear-gradient(to right, #ede9fe, transparent 60%);
	border-bottom-color: #a78bfa;
}
.job-header.mode-template .pill { background: #ede9fe; color: #6b21a8; }
.job-header.mode-template .job-no { color: #6b21a8; }
/* Source badges — tiny inline indicators of where a row's data lives.
   Default 'legacy' state renders nothing (silence on the common case).
   Tooltip on hover explains each non-legacy state. */
.src-badge {
	display: inline-block;
	font-size: 11px;
	margin-right: 4px;
	vertical-align: middle;
	cursor: help;
	line-height: 1;
}
.src-modified { color: #b45309; }   /* amber — overlay edits on a legacy row */
.src-chester  { color: #10b981; }   /* green — created in Chester */
.src-migrated { color: #dc2626; filter: saturate(1.2); }  /* red — snapshot, legacy edits won't propagate */
/* Slightly bigger when sitting in the open-job header so it's noticeable */
.job-no .src-badge { font-size: 14px; margin-right: 6px; }

.status-badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px; border-radius: 20px;
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
	background: #fef3c7; color: #92400e;
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #eab308; }
.status-badge.s-draft { background: #f1f5f9; color: #475569; }
.status-badge.s-draft::before { background: #94a3b8; }
.status-badge.s-estimated, .status-badge.s-quoted { background: #dbeafe; color: #1e40af; }
.status-badge.s-estimated::before, .status-badge.s-quoted::before { background: #3b82f6; }
.status-badge.s-confirmed { background: #dcfce7; color: #166534; }
.status-badge.s-confirmed::before { background: #22c55e; }
.status-badge.s-in-production { background: #fef3c7; color: #92400e; }
.status-badge.s-in-production::before { background: #eab308; }
.status-badge.s-ready-to-ship, .status-badge.s-ready-to-post { background: #e0e7ff; color: #3730a3; }
.status-badge.s-ready-to-ship::before, .status-badge.s-ready-to-post::before { background: #6366f1; }
.status-badge.s-invoiced, .status-badge.s-complete, .status-badge.s-won { background: #d1fae5; color: #065f46; }
.status-badge.s-invoiced::before, .status-badge.s-complete::before, .status-badge.s-won::before { background: #10b981; }
.status-badge.s-cancelled, .status-badge.s-lost { background: #fee2e2; color: #991b1b; }
.status-badge.s-cancelled::before, .status-badge.s-lost::before { background: #ef4444; }
/* Inline status dropdown (Orders bucket). Styled like the pill badge so the
   header stays visually coherent, but with a caret affordance so users know
   it's editable. Option list inherits native styling — fine for Ver1. */
.status-select {
	appearance: none; -webkit-appearance: none;
	padding: 4px 24px 4px 14px; border-radius: 20px;
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
	border: 1px solid rgba(0,0,0,.08);
	background: #fef3c7 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%2392400e'/></svg>") no-repeat right 8px center;
	color: #92400e; cursor: pointer;
}
.status-select.s-in-production { background-color: #fef3c7; color: #92400e; }
.status-select.s-ready-to-ship, .status-select.s-ready-to-post { background-color: #e0e7ff; color: #3730a3; }
.status-select.s-on-hold { background-color: #f1f5f9; color: #475569; }
.status-select:hover { border-color: rgba(0,0,0,.2); }
.status-select:disabled { opacity: .6; cursor: wait; }

/* Post button — the terminal action that moves an Order to History. Colored
   distinctively so it reads as consequential, not just another toolbar btn. */
.post-btn {
	background: #059669 !important; color: #fff !important;
	border-color: #047857 !important; font-weight: 600;
}
.post-btn:hover { background: #047857 !important; }
.post-btn:disabled { opacity: .7; cursor: wait; }

/* Reorder — History-only action that clones a finished job into a fresh
   Quote/Order. Distinct color (purple) keeps it out of the way of primary
   header actions while still reading as a do-thing button. */
.reorder-btn {
	background: #7c3aed !important; color: #fff !important;
	border-color: #6d28d9 !important; font-weight: 600;
}
.reorder-btn:hover { background: #6d28d9 !important; }

.reorder-picker { display: flex; gap: 12px; margin: 12px 0; }
.reorder-opt {
	flex: 1; border: 1px solid rgba(0,0,0,.12); border-radius: 8px;
	padding: 14px; background: #fff; cursor: pointer; text-align: left;
	transition: border-color .15s, transform .05s;
}
.reorder-opt:hover { border-color: #7c3aed; transform: translateY(-1px); }
.reorder-opt:disabled { opacity: .5; cursor: wait; transform: none; }
.reorder-opt.as-quote:hover { border-color: #2563eb; }
.reorder-opt.as-order:hover { border-color: #059669; }
.reorder-opt .ro-head { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.reorder-opt .ro-sub { color: var(--ink-dim); font-size: 12px; }
.reorder-status { min-height: 18px; font-size: 12px; color: var(--ink-dim); margin-top: 6px; }

/* Identity picker — first-run "who's at this computer" modal. Used by
   identity.js to attach a CSR id to writes/locks so other users see who
   has a job open. */
.ident-dlg { padding: 6px 4px 12px; }
.ident-title { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.ident-sub { color: var(--ink-dim); font-size: 12px; margin-bottom: 12px; }
.ident-list { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; border: 1px solid rgba(0,0,0,.08); border-radius: 6px; }
.ident-list li { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.04); }
.ident-list li:hover { background: #eef3ff; }
.ident-list li:last-child { border-bottom: none; }
.ident-loading, .ident-err { color: var(--ink-dim); font-style: italic; cursor: default !important; }
.ident-err { color: #b91c1c; }

/* Lock banner — shown in detail header when another user is editing this
   job. Includes a Take-Over button that steals the lock with confirmation. */
.lock-banner { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 16px; background: #fee2e2; color: #991b1b; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.lock-banner.mine { background: #dcfce7; color: #166534; }
.lock-banner .takeover { background: transparent; border: 1px solid currentColor; color: inherit; padding: 1px 8px; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 10px; }
.lock-banner .takeover:hover { background: rgba(0,0,0,.08); }
body.lock-readonly .items input,
body.lock-readonly .items select,
body.lock-readonly .meta-cell.clickable,
body.lock-readonly .items-toolbar .tb-btn:not(#jd-print-wo):not(#jd-print-inv):not(#jd-email),
body.lock-readonly .status-select { pointer-events: none; opacity: .7; }

.folder-ico { width: 28px; height: 28px; display: grid; place-items: center; color: var(--warn); }

/* meta grid */
.meta-toolbar {
	display: flex; align-items: center; gap: 4px;
	padding: 4px 10px; background: var(--bg-alt);
	border-bottom: 1px solid var(--line);
	font-size: 11px; color: var(--ink-dim);
}
.meta-toolbar .sep { flex: 1; }
.meta-toolbar button {
	background: transparent; border: 0; padding: 3px 6px;
	border-radius: 3px; cursor: pointer; color: var(--ink-mid);
	display: flex; align-items: center; gap: 4px;
}
.meta-toolbar button:hover { background: var(--brand-soft); color: var(--brand-ink); }
.meta-grid {
	display: grid; grid-template-columns: 2fr 2fr 1.8fr 1.4fr;
	gap: 4px; padding: 4px;
	background: var(--bg-alt);
	border-bottom: 1px solid var(--line);
}
/* Toggle bar that lets Ashley collapse the meta-grid (top: BillTo/ShipTo/...)
 * or foot-grid (bottom: JobTotals/Notes/Memo) on her smaller laptop screen.
 * When collapsed a one-line summary renders inline so the key facts stay
 * visible without re-expanding. */
.jd-grid-toggle {
	display: flex; align-items: center; gap: 6px;
	padding: 3px 10px; cursor: pointer; user-select: none;
	background: var(--bg-alt); border-bottom: 1px solid var(--line);
	font-size: 11px; color: var(--ink-dim); font-weight: 600;
	letter-spacing: .3px;
}
.jd-grid-toggle:hover { background: var(--brand-soft-2, #eef2ff); }
.jd-grid-toggle .chev { font-size: 10px; width: 10px; display: inline-block; }
.jd-grid-toggle .lbl  { text-transform: uppercase; }
.jd-grid-toggle .jd-grid-summary { color: var(--ink); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.jd-grid-toggle .jd-grid-summary .sep { color: var(--ink-dim); margin: 0 4px; }
.jd-grid-toggle.collapsed { border-top: 1px solid var(--line); }
.meta-cell {
	padding: 4px 8px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
	min-width: 0;
}
.meta-cell .lbl {
	font-size: 9px; text-transform: uppercase; letter-spacing: .4px;
	color: var(--ink-dim); font-weight: 600; margin-bottom: 2px;
	padding-bottom: 2px; border-bottom: 1px solid var(--line-soft);
}
.meta-cell .line { line-height: 1.3; font-size: 11.5px; }
.meta-cell .line.big { font-weight: 600; color: var(--ink); font-size: 12px; }
.meta-cell .link { color: #2563eb; cursor: pointer; }
.meta-cell .kv { display: grid; grid-template-columns: 50px 1fr; gap: 1px 6px; font-size: 11px; }
.meta-cell .kv .k { color: var(--ink-dim); }
.dep-badge {
	display: inline-block; padding: 1px 5px; border-radius: 3px;
	background: #f59e0b; color: #fff; font-weight: 700;
	font-size: 9px; letter-spacing: .3px; vertical-align: 1px;
}

/* Items table */
.items-section { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.items-toolbar {
	display: flex; align-items: center; gap: 4px;
	padding: 6px 10px; background: var(--bg-alt);
	border-bottom: 1px solid var(--line);
}
.items-toolbar .title {
	font-weight: 600; color: var(--ink); padding: 0 8px;
	display: flex; align-items: center; gap: 6px;
}
.items-toolbar .title::before { content: "▸"; color: var(--brand); }
.items-toggle {
	border: 0; background: transparent; cursor: pointer;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 2px 8px; border-radius: 4px;
	font-weight: 600; font-size: 13px; color: var(--ink);
}
.items-toggle:hover { background: var(--brand-soft); color: var(--brand-ink); }
.items-toggle .chev {
	display: inline-block; color: var(--brand);
	transition: transform .15s ease;
}
.items-section.items-collapsed .items-toggle .chev { transform: rotate(-90deg); }
.items-section.items-collapsed .items-body { display: none; }
.items-section.items-collapsed { flex: 0 0 auto; }

.jh-collapse { margin-left: auto; }
.tb-btn {
	border: 0; background: transparent; padding: 2px 8px;
	border-radius: 3px; cursor: pointer; font-size: 11px; color: var(--ink-mid);
	display: flex; align-items: center; gap: 4px; line-height: 1.3;
}
.tb-btn:hover { background: var(--brand-soft); color: var(--brand-ink); }
.tb-btn.danger:hover { background: #fee2e2; color: var(--bad); }
.tb-spacer { flex: 1; }

/* Items body = scrollable table area. Totals / notes sit in .foot-grid below. */
.items-body {
	flex: 1; min-height: 0;
	display: flex; flex-direction: column;
	border-bottom: 1px solid var(--line);
}
.items-scroll { flex: 1; min-height: 0; overflow: auto; }

/* Bottom-of-detail grid: Job Totals · Balance Due · Job Note · Memo to Customer. */
.foot-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding: 8px 10px 10px;
	background: var(--bg-alt);
	border-top: 1px solid var(--line);
}
.rail-cell {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 8px 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.rail-cell .lbl {
	font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
	color: var(--ink-dim); font-weight: 600; margin-bottom: 4px;
	padding-bottom: 4px; border-bottom: 1px solid var(--line-soft);
}
.rail-balance {
	background: linear-gradient(180deg, #fef9c3 0%, #fffbeb 100%);
	border-color: #facc15;
	box-shadow: 0 2px 6px rgba(250,204,21,.18);
}
/* Internal-only card — the 8% Safety Buffer + Profit First forecast.
 * Distinct slate-tinted look so it visually reads as "internal cockpit data,
 * never a customer-facing surface". The diagonal hatch + INTERNAL ONLY badge
 * are the visual hedge against accidental copy/paste into a quote/invoice. */
.rail-internal {
	background:
		repeating-linear-gradient(135deg, transparent 0 8px, rgba(185,28,28,.04) 8px 9px),
		linear-gradient(180deg, #f8fafc 0%, #eef2f6 100%);
	border-color: #cbd5e1;
	border-left: 3px solid #b91c1c;
}
.rail-internal .totals-table td { font-size: 11px; }
.rail-internal .totals-table .v { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Rollup badge sits next to the parent item's Price.
 * .ok = parent total matches sum of child services (the desired state).
 * .warn = mismatch — hint that something needs reprice / hand edit.
 * .open = parent has 0 price but children exist — pending reprice.
 */
.rollup-badge {
	display: inline-block; margin-left: 6px;
	font-size: 10px; font-weight: 600; line-height: 1;
	padding: 2px 6px; border-radius: 8px;
	font-variant-numeric: tabular-nums; cursor: help;
	vertical-align: middle;
}
.rollup-badge.ok    { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.rollup-badge.warn  { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.rollup-badge.open  { background: #e0e7ff; color: #3730a3; border: 1px solid #a5b4fc; }

/* Item Line Price cell states (FB 2026-04-28_154244).
 * .ok      — parent price matches sum of services
 * .warn    — children sum to a value but parent has no override
 * .forced  — parent price was hand-set / overridden, supersedes the sum
 * .open    — no services yet; click to add */
.line-total {
	display: inline-block; padding: 2px 6px; border-radius: 4px;
	font-variant-numeric: tabular-nums; font-weight: 600;
	cursor: pointer; transition: filter .12s;
}
.line-total:hover { filter: brightness(1.06); }
.line-total.ok     { background: #dcfce7; color: #166534; }
.line-total.warn   { background: #fef3c7; color: #92400e; }
.line-total.forced { background: #fde68a; color: #78350f; border: 1px dashed #b45309; }
.line-total.open   { background: #f1f5f9; color: #475569; }
table.items tr.grp:hover .rollup-badge { filter: brightness(1.05); }

/* Hover a parent row: spotlight its children — services not under the hovered
 * parent fade. Wired in JS by toggling .rollup-spotlight on the table.
 */
table.items.rollup-spotlight tr.svc { opacity: .35; transition: opacity .12s; }
table.items.rollup-spotlight tr.svc.lit { opacity: 1; background: rgba(250, 204, 21, .12); }
table.items.rollup-spotlight tr.grp { opacity: .55; }
table.items.rollup-spotlight tr.grp.lit { opacity: 1; background: rgba(250, 204, 21, .18); }
/* Drag-to-reorder service rows (FB 2026-04-25_155318) */
table.items tr.svc.drop-above td { box-shadow: inset 0 2px 0 0 #2563eb; }
table.items tr.svc.drop-below td { box-shadow: inset 0 -2px 0 0 #2563eb; }
table.items tr.svc .svc-grip:hover { color: #2563eb; cursor: grab; }
table.items tr.svc:active .svc-grip { cursor: grabbing; }
table.items { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.items thead th {
	background: var(--bg-alt);
	border-bottom: 1px solid var(--line);
	padding: 6px 10px; text-align: left;
	font-size: 11px; font-weight: 600; color: var(--ink-dim);
	text-transform: uppercase; letter-spacing: .4px;
	white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.items thead th.num { text-align: right; }
table.items td {
	padding: 5px 10px;
	border-bottom: 1px solid var(--line-soft);
	vertical-align: top;
}
table.items td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.items tr:hover > td { background: var(--brand-soft-2); }

/* Group/parent row */
tr.grp > td {
	background: var(--brand-soft);
	font-weight: 700; color: var(--ink);
	border-top: 1px solid #c8e6d2;
	border-bottom: 1px solid #c8e6d2;
}
tr.grp:hover > td { background: #daecdf; }
tr.grp td.desc { display: flex; align-items: center; gap: 8px; }
tr.grp .folder { color: var(--warn); display: inline-grid; place-items: center; }
tr.grp .dims { color: var(--ink-dim); font-weight: 500; font-size: 11.5px; }

/* Service row */
tr.svc td.desc {
	padding-left: 44px; color: var(--ink-mid);
	position: relative;
}
tr.svc td.desc::before {
	content: ""; position: absolute;
	left: 22px; top: 0; bottom: 0;
	border-left: 1px dashed #cfd4dc;
}
tr.svc td.desc::after {
	content: ""; position: absolute;
	left: 22px; top: 12px;
	width: 14px; border-top: 1px dashed #cfd4dc;
}
tr.svc .svc-label { color: var(--ink-dim); font-weight: 500; margin-right: 4px; }
tr.svc .svc-name { color: var(--ink); }
tr.svc .svc-detail { color: var(--ink-dim); font-size: 11.5px; }
.nocharge { color: var(--ink-dim); font-style: italic; }
.price-col { font-weight: 600; }

/* Bottom panels */
.foot-grid {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 6px; padding: 6px;
	border-top: 1px solid var(--line);
	background: var(--bg-alt);
}
/* Combined Job Totals + Balance Due rail-cell (post-2026-04-25 merge).
 * Top half: editable totals table. Bottom half: yellow Balance Due (still
 * the click target for capturing payment). The thin divider keeps the two
 * click regions visually distinct. */
.rail-finance { padding: 0; overflow: hidden; }
.rail-finance .rail-finance-top,
.rail-finance .rail-finance-bot { padding: 8px 12px; }
.rail-finance .rail-finance-bot {
	background: linear-gradient(180deg, #fef9c3 0%, #fffbeb 100%);
	border-top: 1px solid #facc15;
}
.rail-finance .rail-finance-top:hover,
.rail-finance .rail-finance-bot:hover { background-color: rgba(250, 204, 21, .08); }

/* Top header workflow control — replaces the prior Workflow rail-cell.
 * Click the colored badge to reveal a small popover of valid transitions. */
.status-wf-slot { position: relative; display: inline-flex; align-items: center; }
.status-wf-badge {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 12px; border: none; border-radius: 12px;
	color: #fff; font-weight: 700; font-size: 11px;
	text-transform: uppercase; letter-spacing: .4px;
	cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.status-wf-badge:hover { filter: brightness(1.08); }
.status-wf-chev { font-size: 9px; opacity: .85; }
.status-wf-menu {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
	min-width: 180px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0,0,0,.12);
	padding: 4px;
	flex-direction: column; gap: 2px;
}
/* `display: flex` previously overrode the [hidden] attribute, so the menu
 * stayed visible above the customer field even when "closed". Scope the
 * flex display to the not-hidden state (FB 2026-04-26_140805 follow-up). */
.status-wf-menu:not([hidden]) { display: flex; }
.status-wf-menu[hidden]       { display: none; }
.status-wf-opt {
	display: block; width: 100%; text-align: left;
	padding: 6px 10px; border: 0;
	background: transparent; color: #334155;
	font-size: 12px; font-weight: 600; border-radius: 4px;
	cursor: pointer;
	border-left: 3px solid var(--wf-c, #475569);
}
.status-wf-opt:hover { background: #f1f5f9; color: var(--wf-c, #334155); }
.status-wf-empty { padding: 6px 10px; font-size: 11px; color: var(--ink-dim); font-style: italic; }

/* Side flag dropdown — sits LEFT of the state badge for in_production /
 * on_hold / void marks (FB 2026-04-26_140354). Visually quiet so the badge
 * remains the primary state indicator. position:relative so the side menu
 * anchors to the flag button rather than stacking on top of the badge menu. */
.status-wf-side { position: relative; display: inline-flex; align-items: center; margin-right: 4px; }
.status-wf-flag {
	display: inline-flex; align-items: center; gap: 3px;
	padding: 3px 8px; border: 1px solid #cbd5e1; border-radius: 12px;
	background: #f1f5f9; color: #334155; font-size: 11px; font-weight: 600;
	cursor: pointer;
}
.status-wf-flag:hover { background: #e2e8f0; border-color: #94a3b8; color: #0f172a; }
.status-wf-side > .status-wf-menu.side-menu { top: calc(100% + 6px); left: 0; right: auto; }

/* Anchor the badge dropdown to the badge itself, not the slot — otherwise it
 * stacks underneath the side menu and the two visually overlap. */
.status-wf-main { position: relative; display: inline-flex; align-items: center; }
.status-wf-main > .status-wf-menu.badge-menu { top: calc(100% + 6px); left: auto; right: 0; }

/* Toolbar Print menu — small dropdown anchored to the 🖨 Print button */
.tb-print-wrap { position: relative; display: inline-block; }
.tb-print-menu {
	position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
	min-width: 200px; background: #fff; border: 1px solid var(--line);
	border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.12);
	padding: 4px; display: flex; flex-direction: column; gap: 2px;
}
.tb-print-menu[hidden] { display: none; }
.tb-print-menu button {
	display: block; width: 100%; text-align: left;
	padding: 7px 12px; border: 0; background: transparent;
	color: #334155; font-size: 12.5px; font-weight: 600;
	border-radius: 4px; cursor: pointer;
}
.tb-print-menu button:hover { background: #f1f5f9; color: #0f172a; }
.foot-cell {
	padding: 8px 12px;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0,0,0,.03);
	min-height: 120px;
}
.foot-cell .lbl {
	font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
	color: var(--ink-dim); font-weight: 600; margin-bottom: 4px;
	padding-bottom: 4px; border-bottom: 1px solid var(--line-soft);
}
.rail-cell .note-body { font-size: 12px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; }
.totals-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.totals-table td { padding: 2px 0; }
.totals-table td:first-child { color: var(--ink-dim); }
.totals-table td.v { text-align: right; font-variant-numeric: tabular-nums; }
.totals-table tr.grand td { font-weight: 700; font-size: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.totals-table tr.balance td { color: #c026d3; font-weight: 700; font-size: 14px; }

/* Generic list/table (Jobs list, Customers, Services) */
.list-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.list-head {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 10px; background: var(--bg-alt);
	border-bottom: 1px solid var(--line); font-size: 12px;
}
.list-head .title { font-weight: 600; color: var(--ink); padding: 0 6px; }
.list-head .count { color: var(--ink-dim); font-size: 11px; }
.list-head input[type="search"] {
	padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px;
	font-size: 12px; background: #fff; color: var(--ink);
	min-width: 220px;
}
.list-head input[type="search"]:focus { outline: 1px solid var(--brand); border-color: var(--brand); }
.list-head .sep { flex: 1; }
.list-scroll { flex: 1; overflow: auto; }
/* Bulk-select column on the jobs list (FB 2026-04-26_132800) */
table.grid th.bulk-cell, table.grid td.bulk-cell { width: 28px; padding: 0 4px; text-align: center; }
table.grid td.bulk-cell input[type="checkbox"] { cursor: pointer; }

/* FB Dave 2026-05-01_211328 — denser job rows (less vertical padding so more
   rows fit on a screen, matching legacy pp2016 row density). */
table.grid { width: 100%; border-collapse: collapse; font-size: 12px; }
table.grid thead th {
	background: var(--bg-alt); border-bottom: 1px solid var(--line);
	padding: 4px 10px; text-align: left;
	font-size: 11px; font-weight: 600; color: var(--ink-dim);
	text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
	position: sticky; top: 0; z-index: 2;
}
table.grid thead th.num { text-align: right; }
table.grid tbody tr { cursor: pointer; }
table.grid tbody tr:hover > td { background: var(--brand-soft-2); }
table.grid tbody tr.active > td { background: var(--brand-soft); }
table.grid td {
	padding: 2px 10px;
	border-bottom: 1px solid var(--line-soft);
	white-space: nowrap;
	line-height: 1.3;
}
table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.wrap { white-space: normal; }

/* Reconcile table column widths — centralized via <colgroup> so the header
   markup stays clean (no inline width="..." style="..." per <th>). */
table.recon-table col.rec-c    { width: 34px; }
table.recon-table col.rec-r    { width: 30px; }
table.recon-table col.rec-date { width: 100px; }
table.recon-table col.rec-num  { width: 70px; }
table.recon-table col.rec-wd   { width: 110px; }
table.recon-table col.rec-dep  { width: 110px; }
table.recon-table col.rec-bal  { width: 130px; }
table.recon-table thead th:nth-child(1),
table.recon-table thead th:nth-child(2) { text-align: center; }
table.recon-table thead th #rec-check-all { margin-top: 1px; }

/* Sortable column headers (FB 2026-04-28_154812). Click to sort asc/desc;
   per-bucket sort persisted to localStorage. Arrow ↕ = inactive (this column
   could sort but isn't); ▲/▼ = active sort direction. */
table.grid.sortable thead th.sortable { cursor: pointer; transition: background .12s; }
table.grid.sortable thead th.sortable:hover { background: var(--brand-soft-2); color: var(--ink); }
table.grid.sortable thead th .sort-arrow {
	display: inline-block; margin-left: 4px; font-size: 10px; opacity: 0.95;
	font-weight: 700; vertical-align: baseline;
}
table.grid.sortable thead th .sort-arrow.off { opacity: 0.3; font-weight: 400; }
table.grid.sortable thead th .sort-arrow.on  { color: var(--brand, #7c3aed); }

/* Split panes — list + detail */
.split-2col { display: grid; grid-template-columns: 380px 1fr 0fr; min-height: 0; flex: 1; transition: grid-template-columns .2s; }
.split-2col.list-collapsed { grid-template-columns: 28px 1fr 0fr; }
/* When the detail pane is minimized, the jobs list grows to take ALL the
 * freed real estate (FB 2026-04-26_225945: "seeing more Jobs data might be
 * more important" than the Chester mascot peek). The chester-placeholder
 * is suppressed in this state so the list can use the whole width. */
.split-2col.detail-collapsed { grid-template-columns: 1fr 28px 0fr; }
.split-2col.detail-collapsed > .chester-placeholder { display: none !important; }
.split-2col > .left {
	border-right: 1px solid var(--line);
	display: flex; flex-direction: column; min-height: 0; overflow: hidden;
	background: var(--bg);
	box-shadow: inset -4px 0 6px -6px rgba(0,0,0,.14);
}
.split-2col > .right {
	display: flex; flex-direction: column; min-height: 0; overflow: hidden;
	background: var(--bg);
}
.split-2col.list-collapsed > .left { display: none; }
.split-2col.list-collapsed > .list-stub { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.split-2col.detail-collapsed > .right { display: none; }
.split-2col.detail-collapsed > .detail-stub { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.list-stub, .detail-stub { display: none; }

/* Chester empty-state — fills the detail pane when no job is selected, and
   peeks out of the collapsed-detail stub. */
.chester-empty {
	height: 100%; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 14px;
	color: var(--ink-dim); user-select: none;
}
.chester-hero {
	width: 220px; height: 220px; border-radius: 50%;
	object-fit: cover; background: var(--bg);
	box-shadow: 0 6px 24px rgba(0,0,0,.10);
	opacity: .92;
	animation: chester-fade .5s ease-out;
}
.chester-empty-msg {
	font-size: 14px; color: var(--ink-mid); text-align: center;
}
.chester-stub {
	width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
	background: var(--bg); margin-top: 4px;
}

/* Chester placeholder — fills the huge empty area to the right of the jobs
   list when the detail pane is collapsed. Clicking it re-opens detail. */
.chester-placeholder {
	display: none;
	height: 100%;
	flex-direction: column; align-items: center; justify-content: center;
	gap: 24px;
	background: var(--bg-alt);
	cursor: pointer;
	user-select: none;
}
.split-2col.detail-collapsed > .chester-placeholder { display: flex; }
.chester-huge {
	width: min(60vh, 520px); height: min(60vh, 520px);
	object-fit: contain;
	opacity: .95;
	animation: chester-fade .5s ease-out;
	transition: transform .2s ease, opacity .2s ease;
}
.chester-placeholder:hover .chester-huge { transform: scale(1.02); opacity: 1; }
.chester-placeholder-msg {
	font-size: 16px; color: var(--ink-mid); text-align: center;
}
@keyframes chester-fade {
	from { opacity: 0; transform: scale(.92); }
	to   { opacity: .92; transform: scale(1); }
}

/* Loading / empty states */
.pad { padding: 24px; color: var(--ink-dim); font-size: 13px; }
.pad.center { text-align: center; }

/* Status bar */
.statusbar {
	display: flex; align-items: center; gap: 16px;
	padding: 4px 12px; background: var(--brand); color: white; font-size: 11px;
}
.statusbar .right { margin-left: auto; display: flex; gap: 14px; }
.statusbar .right span { cursor: pointer; opacity: .9; }
.statusbar .right span:hover { opacity: 1; text-decoration: underline; }

/* Coming-soon stubs */
.coming-soon {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	flex: 1; color: var(--ink-dim); gap: 8px;
}
.coming-soon .big { font-size: 22px; font-weight: 600; color: var(--ink-mid); }
.coming-soon .sub { font-size: 13px; }

/* Modal overlay */
.modal-backdrop {
	position: fixed; inset: 0; z-index: 100;
	background: rgba(15, 23, 42, .45);
	display: flex; align-items: center; justify-content: center;
	padding: 24px;
}
.modal {
	background: #fff; border-radius: 4px; box-shadow: 0 20px 40px rgba(0,0,0,.2);
	display: flex; flex-direction: column;
	max-width: 1400px; width: 100%; max-height: 90vh; min-height: 0;
	overflow: hidden;
	border: 1px solid var(--brand);
}
.modal.lg { max-width: 1600px; }
.modal.md { max-width: 560px; }
.modal.sm { max-width: 420px; }
.modal.full { max-width: 100vw; width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
.modal-backdrop:has(.modal.full) { padding: 0; }
.pf-lines.pf-lines-wide { font-size: 12px; }
.pf-lines.pf-lines-wide th, .pf-lines.pf-lines-wide td { padding: 4px 6px; }
.pf-lines.pf-lines-wide input, .pf-lines.pf-lines-wide select {
    width: 100%; padding: 3px 4px; font-size: 12px; border: 1px solid var(--line);
    border-radius: 3px; background: #fff;
}
.pf-lines.pf-lines-wide td.num input { text-align: right; }
.pf-lines.pf-lines-wide .col-sku    { width: 110px; }
.pf-lines.pf-lines-wide .col-desc   { min-width: 220px; }
.pf-lines.pf-lines-wide .col-w      { width: 70px; }
.pf-lines.pf-lines-wide .col-l      { width: 70px; }
.pf-lines.pf-lines-wide .col-thk    { width: 80px; }
.pf-lines.pf-lines-wide .col-form   { width: 100px; }
.pf-lines.pf-lines-wide .col-acct   { width: 130px; }
.pf-lines.pf-lines-wide .col-eq     { width: 130px; }
.pf-lines.pf-lines-wide .col-qty    { width: 70px; }
.pf-lines.pf-lines-wide .col-unit   { width: 90px; }
.pf-lines.pf-lines-wide .col-amt    { width: 100px; }
.pf-lines.pf-lines-wide .col-rm     { width: 28px; }
.modal-head {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px; background: var(--brand-soft);
	border-bottom: 1px solid var(--line);
}
.modal-head .title { font-weight: 600; color: var(--brand-ink); font-size: 14px; }
.modal-head .sub { color: var(--ink-dim); font-size: 12px; }
.modal-head .sep { flex: 1; }
.modal-head .x {
	width: 26px; height: 26px; border-radius: 4px;
	border: 0; background: transparent; color: var(--ink-mid);
	cursor: pointer; font-size: 16px;
}
.modal-head .x:hover { background: rgba(0,0,0,.08); color: var(--bad); }
.modal-body { flex: 1; min-height: 0; overflow: auto; }
.modal-foot {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 14px; border-top: 1px solid var(--line);
	background: var(--bg-alt);
}
.modal-foot .sep { flex: 1; }
.btn {
	padding: 6px 14px; border: 1px solid var(--line); background: #fff;
	border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--ink);
}
.btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.btn.primary { background: var(--brand); color: white; border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-ink); }
.btn.ghost { border-color: transparent; }

/* Note dialog — matches pp2016's two-pane Job Note / Memo editor.
   Left rail: Date Stamp / Date + Time / Quick Note variants / Clear / Save / Close.
   Right: fill-all textarea. Feels hand-filling a paper work-order. */
.note-dialog { display: flex; height: 520px; max-height: 72vh; min-height: 0; }
.note-side {
	width: 180px; background: var(--brand-soft-2); border-right: 1px solid var(--line);
	display: flex; flex-direction: column; padding: 0; flex: 0 0 auto;
}
.note-side .date-head {
	background: var(--brand); color: #fff;
	padding: 10px 12px; font-weight: 600; font-size: 13px;
	text-align: center; letter-spacing: .3px;
}
.note-side .grp { padding: 6px 0; border-bottom: 1px solid var(--line); }
.note-side .grp:last-of-type { border-bottom: 0; }
.note-side button {
	display: flex; align-items: center; gap: 8px;
	width: 100%; padding: 6px 12px;
	border: 0; background: transparent; cursor: pointer;
	font-size: 12px; color: var(--ink); text-align: left;
}
.note-side button:hover { background: var(--brand-soft); color: var(--brand-ink); }
.note-side button.danger:hover { background: #fee2e2; color: var(--bad); }
.note-side button .ico { width: 14px; height: 14px; color: var(--ink-mid); flex: 0 0 auto; }
.note-side .spacer { flex: 1; }
.note-side .save { color: #166534; font-weight: 600; }
.note-side .save .ico { color: #16a34a; }
.note-side .cancel { color: var(--bad); }
.note-main {
	flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.note-main .hd {
	padding: 10px 14px; background: var(--bg-alt);
	border-bottom: 1px solid var(--line);
	font-weight: 600; font-size: 14px; color: var(--ink);
}
.note-main textarea {
	flex: 1; min-height: 0; border: 0; resize: none;
	padding: 12px 14px; font-family: inherit; font-size: 13px;
	color: var(--ink); outline: none;
	line-height: 1.5;
}

/* Quick Notes picker (stacked child modal) */
.qn-picker { padding: 14px 18px; max-height: 62vh; overflow: auto; }
.qn-picker .cat-title {
	font-weight: 600; font-size: 13px; color: var(--brand-ink);
	background: var(--brand-soft); padding: 4px 8px; margin-bottom: 8px;
}
.qn-picker label {
	display: flex; gap: 8px; align-items: baseline;
	padding: 3px 6px; cursor: pointer; font-size: 13px;
}
.qn-picker label:hover { background: var(--brand-soft); color: var(--brand-ink); }
.qn-picker label input[type=checkbox] { margin: 0; }

/* Clickable footer cells (Job Note, Memo, Totals, Balance) */
.rail-cell.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.rail-cell.clickable:hover {
	border-color: var(--brand);
	box-shadow: 0 0 0 2px var(--brand-soft), 0 1px 2px rgba(0,0,0,.04);
}
.rail-cell .note-body {
	white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis;
	max-height: 60px; font-size: 11px; color: var(--ink-mid); line-height: 1.35;
}

/* Clickable meta cells (Bill To, Ship To, Ordered By, When) */
.meta-cell.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.meta-cell.clickable:hover {
	border-color: var(--brand);
	box-shadow: 0 0 0 2px var(--brand-soft), 0 1px 2px rgba(0,0,0,.04);
}

/* Generic picker dialog (Ordered By, Bill To/Ship To, etc.) */
.pick-dialog { display: flex; flex-direction: column; height: 500px; max-height: 70vh; min-height: 0; }
.pick-head {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 12px; border-bottom: 1px solid var(--line);
	background: var(--bg-alt);
}
.pick-head .title { font-weight: 600; }
.pick-head .sub { color: var(--ink-dim); font-size: 11px; }
.pick-head .sep { flex: 1; }
.pick-head .x {
	background: transparent; border: 0; font-size: 20px; line-height: 1;
	color: var(--ink-dim); cursor: pointer; padding: 0 4px;
}
.pick-head .x:hover { color: var(--ink); }
.pick-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pick-search {
	border: 0; border-bottom: 1px solid var(--line);
	padding: 6px 12px; font: inherit; font-size: 12px;
	background: #fff; outline: none;
}
.pick-search:focus { background: var(--brand-soft); color: var(--brand-ink); }
.pick-list { flex: 1; overflow: auto; padding: 4px 0; }
.pick-row {
	padding: 6px 12px; cursor: pointer;
	border-bottom: 1px dotted var(--line-soft, #eee);
}
.pick-row:hover { background: var(--brand-soft); }
.pick-row.active { background: var(--brand-soft); border-left: 3px solid var(--brand); padding-left: 9px; }
.pick-main { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.pick-main .nm { font-weight: 600; }
.pick-main .role { color: var(--ink-dim); font-size: 11px; }
.pick-sub { color: var(--ink-mid); font-size: 11px; margin-top: 1px; }
.pick-empty { padding: 20px 12px; color: var(--ink-dim); text-align: center; font-style: italic; }
.key-badge {
	display: inline-block; padding: 0 6px; font-size: 10px;
	background: var(--brand); color: #fff; border-radius: 8px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .3px;
}
.pick-foot {
	display: flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-top: 1px solid var(--line); background: var(--bg-alt);
}
.pick-foot .sep { flex: 1; }
.pick-foot .btn {
	padding: 4px 12px; border: 1px solid var(--line); border-radius: 3px;
	background: #fff; cursor: pointer; font: inherit; font-size: 12px;
}
.pick-foot .btn:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); }
.pick-foot .btn:disabled { color: var(--ink-dim); cursor: not-allowed; opacity: .6; }
.pick-foot .btn.primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.pick-foot .btn.primary:hover:not(:disabled) { filter: brightness(1.08); }

/* When dialog — simple form grid between pick-head and pick-foot */
.when-dialog { display: flex; flex-direction: column; min-height: 520px; }
.when-body { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.when-body .form-row { grid-template-columns: 90px 1fr; }
.when-body input[type="date"], .when-body input[type="text"], .when-body select {
	border: 1px solid var(--line); border-radius: 3px;
	padding: 4px 6px; font: inherit; font-size: 12px; color: var(--ink);
	background: #fff; width: 100%;
}
.when-body input:disabled, .when-body select:disabled {
	background: var(--bg-alt); color: var(--ink-dim); cursor: not-allowed;
}
.w-title-row {
	display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center;
	padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.w-title-row label { font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .3px; }
.w-dates, .w-group {
	display: flex; flex-direction: column; gap: 4px;
	padding: 6px 0; border-bottom: 1px solid var(--line);
}
.w-group:last-child { border-bottom: none; }
.w-date-row {
	display: grid; grid-template-columns: 90px 20px 1fr 90px; gap: 8px; align-items: center;
}
.w-date-row label { font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .3px; }
.w-date-row input[type="checkbox"] { width: auto; margin: 0; justify-self: center; }
.w-date-row .w-time { width: 100%; }

/* Job Totals dialog — pp2016 parity. Three-column grid: label / input / aux */
.job-totals-dialog { display: flex; flex-direction: column; min-height: 460px; }
.jt-body { padding: 14px 20px; overflow: auto; }
.jt-grid {
	display: grid;
	grid-template-columns: 110px 140px 1fr;
	gap: 6px 12px;
	align-items: center;
}
.jt-grid > label { font-size: 12px; color: var(--ink-dim); }
.jt-grid label.jt-strong { color: var(--ink); font-weight: 600; }
.jt-grid label.jt-inline-label { text-align: right; padding-right: 4px; }
.jt-num {
	border: 1px solid var(--line); border-radius: 3px;
	padding: 4px 6px; font: inherit; font-size: 12px; color: var(--ink);
	background: #fff; text-align: right; width: 100%;
}
.jt-num:focus { outline: 1px solid var(--brand); border-color: var(--brand); }
.jt-num:disabled { background: var(--bg-alt); color: var(--ink-dim); cursor: not-allowed; }
.jt-grid select {
	border: 1px solid var(--line); border-radius: 3px;
	padding: 3px 6px; font: inherit; font-size: 12px; color: var(--ink); background: #fff;
}
.jt-grid select:disabled { background: var(--bg-alt); color: var(--ink-dim); cursor: not-allowed; }
.jt-ro {
	text-align: right; padding: 4px 8px; font-size: 12px;
	color: var(--ink); background: var(--bg-alt);
	border: 1px solid var(--line); border-radius: 3px;
}
.jt-ro.jt-strong { font-weight: 700; background: #fff; }
.jt-inline { display: flex; align-items: center; gap: 6px; }
.jt-pct { max-width: 70px; }
.jt-date-row input[type="date"] {
	border: 1px solid var(--line); border-radius: 3px;
	padding: 3px 6px; font: inherit; font-size: 12px; color: var(--ink); background: #fff;
}
.jt-date-row input[type="date"]:disabled { background: var(--bg-alt); color: var(--ink-dim); }
.jt-sep { height: 1px; background: var(--line); margin: 14px 0; }

/* Balance Due / Deposit dialog — captures a new payment */
.bal-due-dialog { display: flex; flex-direction: column; min-height: 440px; }
.bal-body { padding: 14px 20px; overflow: auto; }
.bal-grid {
	display: grid;
	grid-template-columns: 110px 180px 1fr;
	gap: 6px 12px;
	align-items: center;
}
.bal-grid > label { font-size: 12px; color: var(--ink-dim); }
.bal-grid input[type="number"], .bal-grid input[type="text"], .bal-grid input[type="date"] {
	border: 1px solid var(--line); border-radius: 3px;
	padding: 4px 6px; font: inherit; font-size: 12px; color: var(--ink);
	background: #fff; width: 100%;
}
.bal-grid input[type="number"] { text-align: right; }
.bal-grid select {
	border: 1px solid var(--line); border-radius: 3px;
	font: inherit; font-size: 12px; color: var(--ink); background: #fff;
	padding: 2px; width: 100%;
}
.bal-grid .btn { padding: 3px 8px; font-size: 11px; white-space: nowrap; }
.bal-history { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.bal-hist-hd {
	font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
	color: var(--ink-dim); margin-bottom: 6px;
}
.bal-hist-list { max-height: 160px; overflow: auto; font-size: 12px; }
.bal-hist-row {
	display: grid;
	grid-template-columns: 80px 110px 90px 1fr auto;
	gap: 6px; padding: 4px 6px; border-bottom: 1px solid var(--line);
	align-items: center;
}
.bal-hist-row:last-child { border-bottom: 0; }
.bal-hist-amt { text-align: right; font-weight: 600; }
.bal-hist-ref { color: var(--ink-dim); font-size: 11px; }
.bal-hist-row .tag.overlay {
	background: #fff3e0; color: #b85c00;
	font-size: 10px; padding: 1px 5px; border-radius: 3px;
}

/* Specs form */
.specs-grid { display: grid; grid-template-columns: minmax(380px, 420px) 1fr; min-height: 0; height: 100%; }
.specs-left, .specs-right {
	display: flex; flex-direction: column; min-height: 0;
	border-right: 1px solid var(--line);
}
.specs-right { border-right: 0; }
.specs-left .hd, .specs-right .hd {
	padding: 6px 12px; background: var(--bg-alt);
	border-bottom: 1px solid var(--line);
	font-size: 11px; text-transform: uppercase; font-weight: 600;
	color: var(--ink-dim); letter-spacing: .5px;
	display: flex; align-items: center; gap: 6px;
}
.specs-left .body { padding: 10px 12px; overflow: auto; }
.form-row {
	display: grid; grid-template-columns: 110px 1fr; align-items: center;
	gap: 4px 10px; padding: 3px 0;
}
.form-row label { color: var(--ink-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.form-row input, .form-row select, .form-row textarea {
	border: 1px solid var(--line); border-radius: 3px;
	padding: 3px 6px; font: inherit; font-size: 12px; color: var(--ink);
	background: #fff; width: 100%;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
	outline: 1px solid var(--brand); border-color: var(--brand);
}
.form-row textarea { resize: vertical; min-height: 52px; }
.form-row.two { grid-template-columns: 110px 1fr 60px 1fr; }
.form-row.two label + input { max-width: 100px; }
.form-section {
	margin: 10px 0 2px; padding: 4px 0 2px;
	border-top: 1px solid var(--line-soft);
	font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
	color: var(--ink-dim); font-weight: 600;
}

/* Services picker (Specs right pane) */
.svc-picker { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.svc-picker-head {
	display: flex; gap: 6px; align-items: center;
	padding: 6px 12px; border-bottom: 1px solid var(--line);
}
.svc-picker-head input[type="search"] {
	flex: 1; padding: 4px 8px; border: 1px solid var(--line);
	border-radius: 3px; font-size: 12px;
}
.svc-picker-body { display: grid; grid-template-columns: 180px 1fr; min-height: 0; flex: 1; }
.svc-deps {
	border-right: 1px solid var(--line); background: var(--bg-alt);
	overflow: auto; font-size: 12px;
}
.svc-deps .dep {
	padding: 4px 10px; cursor: pointer; color: var(--ink-mid);
	border-bottom: 1px solid var(--line-soft);
}
.svc-deps .dep.active { background: var(--brand); color: white; font-weight: 600; }
.svc-deps .dep:hover:not(.active) { background: var(--brand-soft); color: var(--brand-ink); }
.svc-deps .dep .cnt { float: right; color: var(--ink-dim); font-size: 11px; }
.svc-deps .dep.active .cnt { color: rgba(255,255,255,.8); }
.svc-list { overflow: auto; }
.svc-list table { width: 100%; border-collapse: collapse; font-size: 12px; }
.svc-list td {
	padding: 3px 10px; border-bottom: 1px solid var(--line-soft);
	cursor: pointer;
}
.svc-list tr:hover td { background: var(--brand-soft-2); }
.svc-list .cat { color: var(--ink-dim); font-size: 11px; width: 130px; }
.svc-list .name { color: var(--ink); }
.svc-list .add { width: 30px; text-align: center; color: var(--brand); font-weight: 700; }

/* Attached services panel */
.specs-attached {
	border-top: 1px solid var(--line); background: var(--bg-alt); max-height: 40%;
	display: flex; flex-direction: column; min-height: 120px;
}
.specs-attached .hd { justify-content: space-between; }
.specs-attached .list { flex: 1; overflow: auto; padding: 4px 0; }
.specs-attached table { width: 100%; border-collapse: collapse; font-size: 12px; }
.specs-attached td { padding: 3px 10px; border-bottom: 1px solid var(--line-soft); }
.specs-attached tr:hover td { background: var(--brand-soft-2); }
.specs-attached .rm { text-align: center; color: var(--bad); cursor: pointer; }

/* Costs matrix */
.costs-body { padding: 0; overflow: auto; min-height: 300px; }
table.costs {
	width: 100%; border-collapse: collapse; font-size: 12.5px;
}
table.costs thead th {
	background: var(--bg-alt); border-bottom: 1px solid var(--line);
	padding: 8px 10px; text-align: left;
	font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
	color: var(--ink-dim); font-weight: 600;
	position: sticky; top: 0; z-index: 2;
}
table.costs thead th.num { text-align: right; }
table.costs td {
	padding: 4px 10px; border-bottom: 1px solid var(--line-soft);
}
table.costs td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.costs td input.c-edit {
	width: 80px; text-align: right; font-variant-numeric: tabular-nums;
	border: 1px solid var(--line); border-radius: 3px; padding: 2px 6px; font: inherit;
	background: #fff;
}
table.costs td input.c-edit:focus { outline: 1px solid var(--brand); border-color: var(--brand); }
table.costs tr.grp > td {
	background: var(--brand-soft); font-weight: 700; color: var(--ink);
	border-top: 1px solid #c8e6d2; border-bottom: 1px solid #c8e6d2;
}
table.costs tfoot td {
	background: var(--brand-soft-2); font-weight: 700;
	border-top: 1px solid var(--line); padding: 6px 10px;
}
table.costs tfoot td.num { font-size: 13.5px; }
table.costs tfoot tr.grand td { font-size: 15px; color: var(--brand-ink); }
table.costs tfoot tr.balance td { color: var(--bad); }

.costs-toolbar {
	display: flex; gap: 8px; align-items: center;
	padding: 6px 12px; border-bottom: 1px solid var(--line);
	background: var(--bg-alt);
}
.costs-toolbar .sep { flex: 1; }
.costs-toolbar select {
	border: 1px solid var(--line); border-radius: 3px;
	padding: 3px 6px; font: inherit; font-size: 12px; background: #fff;
}

/* ============ SPECS dialog (matches PrintersPlan screenshot) ============ */
.specs-dlg { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.specs-dlg .dlg-title {
	background: linear-gradient(to bottom, #e6f4ea, #d4ebda);
	border-bottom: 1px solid var(--brand);
	padding: 6px 12px;
	font-weight: 600; color: var(--brand-ink); font-size: 13px;
	display: flex; align-items: center; gap: 8px;
}
.specs-dlg .dlg-title .x { margin-left: auto; background: transparent; border: 0; cursor: pointer; font-size: 16px; color: var(--ink-mid); }
.specs-dlg .dlg-title .x:hover { color: var(--bad); }
.specs-dlg .row {
	display: grid;
	grid-template-columns: 200px 1fr;
	min-height: 0; flex: 1;
}

/* Green section bars */
.pp-bar {
	background: linear-gradient(to bottom, #4caf50, #2a8f47);
	color: white; font-weight: 700; letter-spacing: .3px;
	padding: 4px 10px; font-size: 13px;
	display: flex; align-items: center; gap: 8px;
	border-bottom: 1px solid var(--brand-ink);
}
.pp-bar.sub { background: #f5f5f5; color: var(--ink-mid); font-weight: 600; border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }

/* Left narrow rail */
.specs-rail { border-right: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; min-height: 0; }
.specs-rail .itm-hdr {
	background: linear-gradient(to bottom, #4caf50, #2a8f47);
	color: white; font-weight: 700; font-size: 14px;
	padding: 4px 10px;
}
.specs-rail .itm-img {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; padding: 14px 10px; border-bottom: 1px solid var(--line);
	background: #fafbfc;
}
.specs-rail .itm-img .ph {
	width: 96px; height: 72px; border: 1px dashed #cbd5e1;
	display: grid; place-items: center; color: var(--ink-dim); font-size: 11px;
	text-align: center; padding: 4px; background: #fff;
}
.specs-rail .itm-img .prod { font-weight: 700; color: var(--ink); }
.specs-rail .svc-header {
	background: linear-gradient(to bottom, #4caf50, #2a8f47);
	color: white; font-weight: 700; padding: 4px 10px; font-size: 12px;
}
.specs-rail .add-from { background: #f5f5f5; color: var(--ink-mid); padding: 3px 10px; font-size: 11px; font-style: italic; }
.specs-rail .deps { flex: 1; overflow: auto; font-size: 12px; }
.specs-rail .dep {
	display: flex; align-items: center; gap: 8px;
	padding: 3px 10px; cursor: pointer; color: var(--ink);
	border-bottom: 1px solid var(--line-soft);
}
.specs-rail .dep:hover { background: var(--brand-soft); }
.specs-rail .dep.active { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; }
.dep-dot {
	width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; display: inline-block;
	margin-right: 6px;
}
.cat-dot {
	width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block;
	margin-right: 6px; vertical-align: middle;
}
/* Department dot colors mirror Dave's pp2016 screenshots (2026-04-24). */
.dep-dot.d- { background: #cbd5e1; }
.dep-dot.d-graphics { background: #16a34a; }                          /* green */
.dep-dot.d-paper { background: #eab308; }                             /* yellow */
.dep-dot.d-prep { background: #0ea5e9; }                              /* sky/blue */
.dep-dot.d-printing { background: #dc2626; }                          /* red */
.dep-dot.d-digital { background: #6b7280; }                           /* gray */
.dep-dot.d-wide-format, .dep-dot.d-widef { background: #ea580c; }     /* orange */
.dep-dot.d-vinyl-department, .dep-dot.d-vinyl { background: #ea580c; }/* orange */
.dep-dot.d-sign-shop, .dep-dot.d-sign { background: #06b6d4; }        /* cyan */
.dep-dot.d-finishing { background: #06b6d4; }                         /* cyan */
.dep-dot.d-bindery-finishing, .dep-dot.d-bindery { background: #06b6d4; }
.dep-dot.d-mailing { background: #ec4899; }                           /* pink */
.dep-dot.d-brokered { background: #ec4899; }                          /* pink */
.dep-dot.d-other, .dep-dot.d-misc { background: #6b7280; }            /* gray */
.dep-dot.d-all { background: linear-gradient(45deg, #16a34a 50%, #eab308 50%); }

.specs-rail .rail-actions { border-top: 1px solid var(--line); padding: 0; }
.specs-rail .rail-btn {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 10px; border: 0; background: transparent; cursor: pointer;
	width: 100%; text-align: left; color: var(--ink); font-size: 12px;
	border-bottom: 1px solid var(--line-soft);
}
.specs-rail .rail-btn:hover { background: var(--brand-soft); color: var(--brand-ink); }
.specs-rail .rail-btn.save { color: var(--brand-ink); font-weight: 600; }
.specs-rail .rail-btn.close { color: var(--bad); }

/* FB 2026-05-06_091929 — Shared tab strip across the 3 A/P + vendor pages
   (purchases.html, purchases-matches.html, vendors-review.html). One-click
   navigation between them. */
.ap-tab-strip {
	display: flex; gap: 2px; padding: 6px 12px 0; background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}
.ap-tab {
	padding: 6px 14px; border: 1px solid #cbd5e1; border-bottom: 0;
	border-radius: 5px 5px 0 0; background: #fff; color: #475569;
	font-size: 12.5px; font-weight: 600; text-decoration: none;
	margin-bottom: -1px;
}
.ap-tab:hover { background: #eff6ff; color: #1e40af; text-decoration: none; }
.ap-tab.active { background: #1e40af; color: #fff; border-color: #1e3a8a; }
.ap-tab.active:hover { background: #1e40af; color: #fff; }

/* FB 2026-05-06 (Dave) — Notes & Pricing Options block. Sits at the BOTTOM
   of the right pane (.specs-main). When CLOSED: just a thin green header bar.
   When OPEN: takes the empty space below the service rows (flex:1) so it
   "uses up" the bottom whitespace instead of leaving a void below the table.
   The svc-list-wrap above stays its natural height (auto-shrinks via min-height:0). */
.specs-main { display: flex; flex-direction: column; min-height: 0; }
.specs-main .sp-extras {
	border-top: 1px solid var(--line);
	display: flex; flex-direction: column;
	flex: 0 0 auto;          /* closed: just header height */
	overflow: hidden;
}
.specs-main .sp-extras[open] {
	flex: 1 1 0;             /* open: fill remaining vertical space */
	min-height: 140px;
}
.sp-extras > .sp-extras-summary {
	background: linear-gradient(to bottom, #4caf50, #2a8f47);
	color: #fff; font-weight: 700; letter-spacing: .3px;
	padding: 5px 12px; font-size: 13px;
	cursor: pointer; user-select: none;
	display: flex; align-items: center; gap: 8px;
	list-style: none;
	flex-shrink: 0;
}
.sp-extras > .sp-extras-summary::-webkit-details-marker { display: none; }
.sp-extras > .sp-extras-summary .chev {
	display: inline-block; transition: transform .15s ease; font-size: 11px;
}
.sp-extras[open] > .sp-extras-summary .chev { transform: rotate(90deg); }
.sp-extras-hint {
	margin-left: auto; font-weight: 500; font-size: 11px;
	color: rgba(255,255,255,.85); font-style: italic;
}
.sp-extras-body {
	padding: 8px 14px 10px; background: #fafbfc;
	overflow-y: auto;
	flex: 1 1 auto;
	display: flex; flex-direction: row; align-items: flex-start;
	gap: 10px; flex-wrap: wrap;
}
/* FB Dave 2026-05-28 — lay the four blocks out as columns left→right:
   Notes ~60%, then Add-on / Lock / Fulfillment sharing the rest. Wraps when
   the pane is narrow. */
.sp-extras-body > .sp-col { flex: 1 1 0; min-width: 150px; box-sizing: border-box; }
.sp-extras-body > .sp-col-notes { flex: 0 0 58%; min-width: 280px; }
.sp-extras-body > .sp-col.sp-toggle { margin: 0 !important; }
.sp-extras-body .item-note { margin-bottom: 0; }
.sp-extras-body textarea {
	width: 100%; min-height: 60px; box-sizing: border-box;
}
/* FB 2026-05-06 (Dave) — compact one-line toggle pills (Add-on, Lock per-piece).
   Description tucked into the title attribute so it shows on hover instead of
   eating two lines of vertical space. */
.sp-toggle {
	margin-top: 4px !important; margin-bottom: 4px !important;
	padding: 4px 10px !important;
	border-radius: 5px;
	font-size: 12px;
	cursor: help;
}
.sp-toggle label {
	display: flex; align-items: center; gap: 8px;
	font-weight: 600; cursor: pointer; line-height: 1.2;
}
.sp-toggle label em {
	font-style: italic; font-weight: 400; opacity: 0.75; font-size: 11px;
}
.sp-toggle-blue   { background: #dbeafe; border: 1px solid #93c5fd; color: #1e3a8a; }
.sp-toggle-yellow { background: #fef3c7; border: 1px solid #fbbf24; color: #78350f; }
.sp-lock-pill {
	font-family: ui-monospace, "SF Mono", Consolas, monospace;
	font-size: 12px; background: #fff; padding: 1px 7px;
	border-radius: 4px; border: 1px solid #fbbf24;
	margin-left: auto;
}

/* Click-to-collapse on section headers (pp-bar + svc-list-head) — works at any
   screen size, but most useful on small ones. Adds a chevron + cursor. */
.specs-dlg .pp-bar,
.specs-dlg .svc-list-head { cursor: pointer; user-select: none; }
.specs-dlg .pp-bar::before,
.specs-dlg .svc-list-head::before {
	content: '▾'; display: inline-block; margin-right: 6px;
	transition: transform .15s ease; font-size: 11px; opacity: .85;
}
.specs-dlg .pp-bar.collapsed::before,
.specs-dlg .svc-list-head.collapsed::before { transform: rotate(-90deg); }
.specs-dlg .section-collapsed { display: none !important; }

/* Title-bar rail-toggle button — hidden on desktop, shown on small screens */
.specs-dlg .dlg-title .rail-toggle {
	display: none; background: transparent; border: 0; cursor: pointer;
	font-size: 16px; color: var(--brand-ink); padding: 0 4px;
}
.specs-dlg .dlg-title .rail-toggle:hover { color: var(--brand); }

/* FB 2026-05-06_125606 (Ashley) — small-screen accordion behavior.
   ≤900px: collapse the 200px+1fr grid into one column, hide the rail
   behind the ☰ toggle, stack the property grid, and tighten paddings. */
@media (max-width: 900px) {
	.specs-dlg .row { grid-template-columns: 1fr; }
	.specs-dlg .specs-rail {
		display: none;
		border-right: 0; border-bottom: 1px solid var(--line);
	}
	.specs-dlg.rail-shown .specs-rail {
		display: flex;
		max-height: 40vh; overflow-y: auto;
	}
	.specs-dlg .dlg-title .rail-toggle { display: inline-block; }
	/* Stack the 2-col property grid */
	.specs-dlg .prop-grid { grid-template-columns: 1fr !important; }
	.specs-dlg .prop-grid .prop-left { border-right: 0; border-bottom: 1px solid var(--line); }
	/* Tighter padding on small screens */
	.specs-dlg .prop-row .lbl { font-size: 11px; }
	.specs-dlg .pp-bar { font-size: 12px; padding: 3px 8px; }
}

/* Main specs content */
.specs-main { display: flex; flex-direction: column; min-height: 0; }
.specs-main .item-props { border-bottom: 1px solid var(--line); }
.prop-grid {
	display: grid;
	grid-template-columns: 1fr 320px;
}
.prop-grid .prop-left { border-right: 1px solid var(--line); }
.prop-row {
	display: grid;
	grid-template-columns: 120px 1fr;
	align-items: center;
	border-bottom: 1px solid var(--line-soft);
	min-height: 26px;
}
.prop-row .lbl {
	padding: 4px 10px; color: var(--ink);
	border-right: 1px solid var(--line-soft);
	font-weight: 500; font-size: 12.5px;
	background: #fafbfc;
	display: flex; align-items: center; gap: 6px;
}
.prop-row .val { padding: 3px 8px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
.prop-row .val input, .prop-row .val select {
	border: 0; background: transparent; font: inherit; font-size: 12.5px;
	width: 100%; padding: 2px 4px;
}
.prop-row .val input:focus, .prop-row .val select:focus {
	outline: 1px solid var(--brand); background: #fff;
}
.prop-row .val .edit-ico { color: var(--ink-dim); font-size: 11px; cursor: pointer; }

.specs-main .svc-list-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.specs-main .svc-list-head {
	background: linear-gradient(to bottom, #4caf50, #2a8f47);
	color: white; padding: 4px 10px;
	display: flex; align-items: center; gap: 12px;
	font-weight: 700; font-size: 13px;
}
.specs-main .svc-list-head .hint { font-weight: 400; font-style: italic; color: rgba(255,255,255,.8); font-size: 11.5px; }
.specs-main .svc-list-head .collapse { margin-left: auto; color: white; cursor: pointer; font-size: 14px; }
.specs-main .svc-cols {
	display: grid;
	grid-template-columns: 18px 28px 180px 1fr 28px;
	background: #fafbfc; color: var(--ink-dim);
	font-size: 11px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
	border-bottom: 1px solid var(--line);
	padding: 4px 0;
}
.specs-main .svc-cols > div { padding: 0 10px; }
.specs-main .svc-rows { flex: 1; overflow: auto; }
.specs-main .svc-row {
	display: grid;
	grid-template-columns: 18px 28px 180px 1fr 28px;
	align-items: center;
	border-bottom: 1px solid var(--line-soft);
	cursor: pointer;
	min-height: 24px;
	transition: background .1s, opacity .15s;
}
.specs-main .svc-row .svc-drag {
	color: var(--ink-dim); font-size: 11px; line-height: 1; text-align: center;
	cursor: grab; user-select: none; opacity: .35; transition: opacity .12s;
}
.specs-main .svc-row:hover .svc-drag { opacity: .9; }
.specs-main .svc-row .svc-drag:active { cursor: grabbing; }
.specs-main .svc-row.dragging { opacity: .45; background: var(--brand-soft-2); }
.specs-main .svc-row.drag-over { box-shadow: inset 0 -2px 0 0 var(--accent, #2563eb); }
.specs-main .svc-row:hover { background: var(--brand-soft-2); }
.specs-main .svc-row .edit-ico { color: var(--ink-dim); text-align: center; }
.specs-main .svc-row .cat {
	display: flex; align-items: center; gap: 8px;
	padding: 2px 10px;
	font-weight: 600; color: var(--ink);
	border-right: 1px solid var(--line-soft);
}
.specs-main .svc-row .detail { padding: 2px 10px; color: var(--ink); }
.specs-main .svc-row .detail .bold { font-weight: 600; }
.specs-main .svc-row .detail .dim { color: var(--ink-dim); }
.specs-main .svc-row .svc-rm {
	border: 0; background: transparent; cursor: pointer;
	color: var(--ink-dim); font-size: 13px; padding: 2px 4px;
	border-radius: 3px; opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.specs-main .svc-row:hover .svc-rm { opacity: .65; }
.specs-main .svc-row .svc-rm:hover { opacity: 1; color: #b32b2b; background: rgba(179,43,43,.1); }
.specs-main .svc-row .svc-rm:disabled { cursor: wait; opacity: .3; }

/* Wide inline cost matrix — full-screen Specs dialog (FB 2026-04-26_174805
 * option B). Each service row shows all 11 cost cells inline next to
 * Category + Detail. Per-cell inputs scroll horizontally on narrow viewports
 * via the wrapping div. Compact 12px font keeps the matrix readable while
 * fitting ~16 columns on a 1920×1080 monitor. */
.svc-rows-wide-wrap { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
table.svc-rows-wide { width: 100%; border-collapse: collapse; font-size: 12px; }
table.svc-rows-wide thead th {
	position: sticky; top: 0; z-index: 1;
	background: var(--brand-soft); color: var(--brand-ink);
	padding: 4px 6px; text-align: left; font-weight: 600;
	border-bottom: 2px solid var(--brand);
	white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: .3px;
}
table.svc-rows-wide thead th.c-num { text-align: right; }
table.svc-rows-wide tbody td {
	padding: 3px 6px; border-bottom: 1px solid var(--line-soft);
	vertical-align: middle; white-space: nowrap;
}
table.svc-rows-wide tbody tr:nth-child(even) td { background: var(--bg-stripe, #fafbfc); }
table.svc-rows-wide tbody tr.svc-row-wide { cursor: pointer; }
table.svc-rows-wide tbody tr.svc-row-wide:hover td { background: var(--brand-soft-2); }
table.svc-rows-wide tbody tr.svc-row-wide.dragging { opacity: .4; }
table.svc-rows-wide tbody tr.svc-row-wide.drag-over td { box-shadow: inset 0 -2px 0 0 #2563eb; }
table.svc-rows-wide td.c-cat { font-weight: 600; }

/* FB 2026-05-20_163214 — service-row lock indicator + banner */
.svc-lock-banner {
	background: #fef3c7; border: 1px solid #fcd34d; color: #92400e;
	padding: 6px 10px; font-size: 12px; border-radius: 4px;
	margin-bottom: 6px;
}
.svc-lock-toggle {
	background: none; border: none; cursor: pointer;
	font-size: 12px; padding: 0 4px; margin-right: 4px;
	vertical-align: middle; line-height: 1;
}
.svc-lock-toggle.unlocked { opacity: 0.25; }
.svc-lock-toggle.unlocked:hover { opacity: 0.8; }
.svc-lock-toggle.locked { opacity: 1; }
.svc-lock-toggle.locked:hover { background: #fee2e2; border-radius: 2px; }
table.svc-rows-wide tbody tr.svc-row-locked td {
	background: #fffbeb !important;
	border-left: 3px solid #f59e0b;
}
table.svc-rows-wide tbody tr.svc-row-locked td:first-child { border-left: 3px solid #f59e0b; }
table.svc-rows-wide td.c-cat .svc-name { margin-left: 6px; }
table.svc-rows-wide td.c-detail { color: var(--ink-mid); max-width: 220px; min-width: 140px; white-space: normal; word-wrap: break-word; line-height: 1.25; padding: 3px 6px; }
table.svc-rows-wide td.c-num { text-align: right; }
table.svc-rows-wide td.c-num.readout { color: var(--ink-mid); font-variant-numeric: tabular-nums; }
table.svc-rows-wide td.c-num input.ct-inline-input {
	width: 70px; padding: 2px 4px; border: 1px solid transparent; border-radius: 2px;
	font-size: 12px; text-align: right; background: transparent; color: var(--ink);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
table.svc-rows-wide td.c-num input.ct-inline-input::-webkit-outer-spin-button,
table.svc-rows-wide td.c-num input.ct-inline-input::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}
table.svc-rows-wide td.c-num input.ct-inline-input:hover { border-color: var(--line); }
table.svc-rows-wide td.c-num input.ct-inline-input:focus {
	outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 2px var(--brand-soft);
}
/* Strip native up/down spinners from every numeric input the operator hits.
   Spinners cause accidental value changes when the cursor is near the right
   edge of the cell, and shop staff would rather just type the number. */
input[type="number"].ct-input,
.svc-tray input[type="number"],
.specs-dlg input[type="number"],
.modal input[type="number"] {
	-moz-appearance: textfield;
}
input[type="number"].ct-input::-webkit-outer-spin-button,
input[type="number"].ct-input::-webkit-inner-spin-button,
.svc-tray input[type="number"]::-webkit-outer-spin-button,
.svc-tray input[type="number"]::-webkit-inner-spin-button,
.specs-dlg input[type="number"]::-webkit-outer-spin-button,
.specs-dlg input[type="number"]::-webkit-inner-spin-button,
.modal input[type="number"]::-webkit-outer-spin-button,
.modal input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}
table.svc-rows-wide td.c-per { color: var(--ink-dim); font-size: 11px; text-align: center; min-width: 28px; }
table.svc-rows-wide td.c-drag { width: 18px; padding: 0 2px; }
table.svc-rows-wide td.c-drag .svc-drag {
	color: var(--ink-dim); font-size: 11px; line-height: 1; cursor: grab;
	user-select: none; opacity: .35; transition: opacity .12s;
}
table.svc-rows-wide tbody tr:hover .svc-drag { opacity: .9; }
table.svc-rows-wide td.c-imp { width: 28px; padding: 0 2px; text-align: center; }
table.svc-rows-wide td.c-imp .svc-imp-btn {
	border: 1px solid var(--line); background: var(--bg-stripe, #fafbfc); cursor: pointer;
	color: var(--ink-mid); font-size: 13px; padding: 1px 5px; border-radius: 3px;
}
table.svc-rows-wide td.c-imp .svc-imp-btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
table.svc-rows-wide td.c-svc-link { width: 28px; padding: 0 2px; text-align: center; }
table.svc-rows-wide td.c-svc-link .svc-link-btn {
	display: inline-block; padding: 1px 5px; border: 1px solid var(--line); border-radius: 3px;
	background: var(--bg-stripe, #fafbfc); color: var(--ink-mid); font-size: 13px; text-decoration: none;
}
table.svc-rows-wide td.c-svc-link .svc-link-btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
table.svc-rows-wide td.c-rm { width: 24px; padding: 0 2px; text-align: center; }
table.svc-rows-wide td.c-rm .svc-rm {
	border: 0; background: transparent; cursor: pointer; opacity: 0;
	color: var(--ink-dim); font-size: 13px; padding: 1px 4px; border-radius: 3px;
	transition: opacity .12s, color .12s, background .12s;
}
table.svc-rows-wide tbody tr:hover .svc-rm { opacity: .65; }
table.svc-rows-wide td.c-rm .svc-rm:hover { opacity: 1; color: #b32b2b; background: rgba(179,43,43,.1); }

/* Phase 1 services-as-workflow — per-row state pill + advance buttons. */
table.svc-rows-wide th.c-svc-flow,
table.svc-rows-wide td.c-svc-flow { width: 130px; padding: 0 4px; text-align: left; }
.svc-flow-cell { display: flex; align-items: center; gap: 4px; }
.svc-state {
	display: inline-block; padding: 1px 6px; border-radius: 9px;
	font-size: 10px; font-weight: 700; line-height: 1.4;
	border: 1px solid transparent; white-space: nowrap;
}
.svc-state-pend { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.svc-state-go   { background: #dbeafe; color: #1e3a8a; border-color: #93c5fd; }
.svc-state-done { background: #dcfce7; color: #15803d; border-color: #86efac; }
.svc-state-blk  { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.svc-flow-btn {
	border: 1px solid var(--line); background: var(--bg-stripe, #fafbfc); cursor: pointer;
	color: var(--ink-mid); font-size: 11px; padding: 1px 5px; border-radius: 3px;
	line-height: 1.2;
}
.svc-flow-btn:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.svc-flow-btn:disabled { opacity: .5; cursor: progress; }

/* Σ Totals row at the bottom of the wide cost matrix (FB 2026-04-26_192059) */
table.svc-rows-wide tfoot td {
	background: var(--brand-soft);
	border-top: 2px solid var(--brand);
	padding: 6px 6px;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}
table.svc-rows-wide tfoot td.c-num { text-align: right; }
table.svc-rows-wide tfoot tr.svc-totals { font-weight: 600; }
table.svc-rows-wide tfoot select#sp-quick-markup {
	border: 1px solid var(--line); border-radius: 3px; background: #fff; cursor: pointer;
}
table.svc-rows-wide tfoot tr.svc-override td {
	background: #fffbeb;
	border-top: 1px dashed #f59e0b;
	padding: 6px 6px;
	font-weight: 500;
}
table.svc-rows-wide tfoot tr.svc-override input#sp-item-override {
	width: 100px; padding: 4px 6px; border: 1px solid #f59e0b; border-radius: 3px;
	font-size: 13px; font-weight: 700; text-align: right; color: #92400e; background: #fff;
	font-variant-numeric: tabular-nums;
}
table.svc-rows-wide tfoot tr.svc-override input#sp-item-override:focus {
	outline: none; border-color: #d97706; box-shadow: 0 0 0 2px #fef3c7;
}

/* Inline-edit inputs on the Services detail dialog (FB Dave 2026-04-26) */
input.svc-edit-inline {
	width: 100px; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px;
	font: inherit; font-variant-numeric: tabular-nums; background: transparent;
	color: var(--ink);
}
input.svc-edit-inline:hover { border-color: var(--line); background: #fff; }
input.svc-edit-inline:focus {
	outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 2px var(--brand-soft);
}

/* ============================================================================
 * Cut Layout modal — modeled on the pp2016 Large Format + Quick Cutting
 * Layout dialogs Dave referenced (FB 2026-04-26_192059). Modern look with the
 * same information density. Two modes: Roll and Sheet (Parent → Run → Finish).
 * ============================================================================ */
/* Cut Layout mode tabs — segmented-control look so they read as a single
   connected control INSIDE the modal, not floating in the title bar.
   FB 2026-05-06_233716 — Dave wanted them visually contained. */
.cl-mode-tabs {
	display: inline-flex; gap: 0; margin-left: 16px;
	border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
	background: #f8fafc;
}
.cl-mode-tabs .cl-tab {
	background: transparent; border: 0; border-right: 1px solid var(--line);
	padding: 5px 12px; cursor: pointer;
	color: var(--ink-mid); font-size: 12px; font-weight: 600;
	transition: background .12s ease, color .12s ease;
}
.cl-mode-tabs .cl-tab:last-child { border-right: 0; }
.cl-mode-tabs .cl-tab:hover { color: var(--ink); background: #f1f5f9; }
.cl-mode-tabs .cl-tab.active {
	color: #fff; background: var(--brand);
}

.cl-body { padding: 0; overflow: auto; }
.cl-svc-header {
	background: linear-gradient(to bottom, #3b82f6, #1d4ed8);
	color: #fff; padding: 8px 16px; border-bottom: 1px solid #1e40af;
}
.cl-svc-header .cl-svc-name { font-weight: 700; font-size: 14px; }
.cl-svc-header .cl-svc-meta {
	display: flex; gap: 18px; margin-top: 4px;
	font-size: 11px; color: #dbeafe; opacity: .92;
}
.cl-svc-header .cl-svc-meta .dim { opacity: .55; font-style: italic; }

/* FB 2026-05-02_140940 / 141302 — cutlayout modal cleanup. Issues fixed:
 *  - 3-stage row was getting cramped under ~900px (Parent/Run/Finish wrapped weirdly).
 *  - Input column padding ate horizontal room, making fields word-wrap.
 *  - Section headers had inconsistent margins between input + output sides.
 *  - Stat grid sometimes orphaned a single card on its own row.
 * Approach: tighter padding, more aggressive responsive collapse, denser type. */
.cl-cols { display: grid; grid-template-columns: minmax(340px, 1fr) minmax(340px, 1fr); gap: 0; min-height: 480px; }
@media (max-width: 1100px) { .cl-cols { grid-template-columns: 1fr; } }
.cl-inputs { padding: 10px 12px; border-right: 1px solid var(--line); background: #f8fafc; overflow: auto; }
.cl-output { padding: 10px 14px; overflow: auto; background: #fff; }
@media (max-width: 1100px) { .cl-inputs { border-right: 0; border-bottom: 1px solid var(--line); } }

.cl-section-h {
	font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
	color: var(--brand-ink); background: var(--brand-soft);
	padding: 3px 10px; margin: 10px -12px 6px;
	border-top: 1px solid var(--brand);
}
.cl-section-h:first-child { margin-top: 0; }
.cl-output .cl-section-h { margin: 12px -14px 6px; }
.cl-output .cl-section-h:first-child { margin-top: 0; }

.cl-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin-bottom: 6px; }
.cl-inputs label {
	display: flex; flex-direction: column; gap: 2px;
	font-size: 11px; color: var(--ink-mid); font-weight: 600;
	min-width: 0;
}
.cl-inputs label input, .cl-inputs label select {
	padding: 3px 6px; border: 1px solid var(--line); border-radius: 3px;
	font-size: 12px; background: #fff; color: var(--ink);
	font-weight: 400; min-width: 0;
}
.cl-inputs label input:focus, .cl-inputs label select:focus {
	outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft);
}

/* 3-stage Parent → Run → Finish. Below 700px (still inside the modal),
 * collapse to a single column so each stage gets full width. */
.cl-grid-3-stage { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
@media (max-width: 700px) { .cl-grid-3-stage { grid-template-columns: 1fr; } }
.cl-stage { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 6px; min-width: 0; }
.cl-stage-h {
	font-size: 11px; font-weight: 700; color: var(--brand-ink);
	background: var(--brand-soft); margin: -6px -6px 5px; padding: 3px 8px;
	border-bottom: 1px solid var(--brand);
}
.cl-stage label { margin-bottom: 4px; }

.cl-stat-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 8px;
}
.cl-stat {
	background: var(--brand-soft); border: 1px solid var(--brand);
	border-radius: 4px; padding: 8px 10px;
}
.cl-stat.warn { background: #fef3c7; border-color: #f59e0b; }
.cl-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--brand-ink); font-weight: 700; }
.cl-stat-val { font-size: 18px; font-weight: 700; color: var(--ink); margin: 2px 0; }
.cl-stat-hint { font-size: 11px; color: var(--ink-mid); }

.cl-err { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; padding: 8px 12px; border-radius: 4px; font-size: 12px; margin: 8px 0; }

.cl-svg-wrap svg { background: #fafbfc; border: 1px solid var(--line); border-radius: 4px; }

.cl-sheet-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.cl-panel { background: #fafbfc; border: 1px solid var(--line); border-radius: 4px; }
.cl-panel-h {
	background: var(--brand-soft); color: var(--brand-ink);
	padding: 5px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase;
	border-bottom: 1px solid var(--brand);
	display: flex; align-items: baseline; gap: 8px;
}
.cl-panel-meta { font-size: 10px; font-weight: 500; color: var(--ink-mid); text-transform: none; letter-spacing: 0; margin-left: auto; }
.cl-panel-svg { padding: 16px; display: flex; justify-content: center; }

/* Tray chevron — replaces the old static ✎ pencil. Same width slot. */
.specs-main .svc-row .svc-tray-toggle {
	border: 0; background: transparent; cursor: pointer;
	color: var(--ink-dim); font-size: 12px; padding: 0;
	width: 100%; height: 100%; line-height: 24px;
	transition: color .12s, background .12s;
}
.specs-main .svc-row .svc-tray-toggle:hover { color: var(--brand-ink); background: rgba(0,0,0,.04); }

/* Inline Cost Detail tray — collapsible per-row drawer with the most
   commonly edited cost cells. Matches the bulk Costs dialog's field
   semantics so values stay consistent between the two views. */
.specs-main .svc-tray {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	padding: 8px 12px 10px 36px;
	background: linear-gradient(180deg, #f7f9fb 0%, #fbfcfd 100%);
	border-bottom: 1px solid var(--line-soft);
	font-size: 11.5px;
}
.specs-main .svc-tray .ct-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 12px; row-gap: 4px;
	padding: 4px 14px;
	border-right: 1px dashed var(--line);
	min-width: 0;
}
.specs-main .svc-tray .ct-block:last-child { border-right: 0; }
.specs-main .svc-tray .ct-block-label {
	grid-column: 1 / -1;
	font-size: 10px; font-weight: 700; letter-spacing: .8px;
	text-transform: uppercase; color: var(--ink-dim);
	margin-bottom: 2px;
}
.specs-main .svc-tray .ct-cell {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 6px;
	min-width: 0;
}
.specs-main .svc-tray .ct-lbl { color: var(--ink-mid); font-size: 11px; }
.specs-main .svc-tray .ct-input {
	width: 100%; min-width: 0;
	padding: 2px 6px;
	border: 1px solid var(--line);
	border-radius: 3px;
	font-size: 12px; font-family: inherit;
	text-align: right;
	background: white;
	transition: border-color .12s, background .12s;
}
.specs-main .svc-tray .ct-input:focus {
	outline: 0; border-color: var(--brand);
	background: #fffef0;
}
.specs-main .svc-tray .ct-input[readonly] { background: #f3f5f7; color: var(--ink-dim); cursor: not-allowed; }
.specs-main .svc-tray .ct-readout {
	font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums;
	text-align: right; padding: 2px 6px;
	background: #eef1f4; border-radius: 3px;
}
.specs-main .svc-tray .ct-suffix { color: var(--ink-dim); font-size: 10.5px; min-width: 18px; }
.specs-main .svc-tray .ct-cell.muted .ct-input { background: #f3f5f7; }
.specs-main .svc-tray .ct-result .ct-readout { font-weight: 600; }
.specs-main .svc-tray .ct-status {
	grid-column: 1 / -1;
	min-height: 14px; padding-top: 4px;
	font-size: 11px; color: var(--ink-dim); text-align: right;
}
.specs-main .svc-tray .ct-status.ok { color: var(--brand-ink); }
.specs-main .svc-tray .ct-status.warn { color: #b07a00; }
.specs-main .svc-tray .ct-status.err { color: #b32b2b; }

.specs-main .item-note {
	border-top: 1px solid var(--line); background: #fafbfc;
	padding: 6px 10px;
	display: grid; grid-template-columns: 100px 1fr; gap: 10px;
	align-items: start;
}
.specs-main .item-note label { color: var(--ink); font-weight: 500; font-size: 12.5px; display: flex; align-items: center; gap: 6px; }
.specs-main .item-note textarea {
	border: 1px solid var(--line); border-radius: 3px; padding: 4px 6px;
	min-height: 40px; resize: vertical; font: inherit; font-size: 12px;
	background: #fff;
}

/* ============ COSTS dialog (matches PrintersPlan screenshot) ============ */
.costs-dlg { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.costs-dlg .dlg-title {
	background: linear-gradient(to bottom, #e6f4ea, #d4ebda);
	border-bottom: 1px solid var(--brand);
	padding: 6px 12px;
	font-weight: 600; color: var(--brand-ink); font-size: 13px;
	display: flex; align-items: center; gap: 8px;
}
.costs-dlg .dlg-title .x { margin-left: auto; background: transparent; border: 0; cursor: pointer; font-size: 16px; color: var(--ink-mid); }
.costs-dlg .dlg-title .x:hover { color: var(--bad); }
.costs-dlg .item-banner {
	padding: 6px 12px;
	color: #1e40af; font-weight: 700; font-size: 14px;
	border-bottom: 1px solid var(--line-soft);
	display: flex; justify-content: space-between; align-items: center;
}
.costs-dlg .item-banner .icons { display: flex; gap: 8px; color: var(--ink-dim); font-size: 14px; }
.costs-dlg .hint {
	padding: 4px 12px; color: var(--ink-mid); font-size: 11.5px;
	border-bottom: 1px solid var(--line);
	background: #fafbfc;
}
.costs-dlg .hint code { background: rgba(0,0,0,.05); padding: 0 4px; border-radius: 2px; }
.costs-dlg .matrix-wrap { flex: 1; overflow: auto; min-height: 280px; }

table.cm { width: 100%; border-collapse: collapse; font-size: 12px; }
table.cm thead .grp-hdr th {
	background: linear-gradient(to bottom, #4caf50, #2a8f47);
	color: white; font-weight: 700; text-align: center;
	padding: 4px 8px; font-size: 12px;
	border-right: 1px solid var(--brand-ink);
	letter-spacing: .3px;
}
table.cm thead .grp-hdr th:last-child { border-right: 0; }
table.cm thead .col-hdr th {
	background: #f1faf4; color: var(--ink);
	padding: 4px 8px; font-size: 11px; font-weight: 600;
	border-bottom: 1px solid var(--brand);
	border-right: 1px solid var(--line-soft);
	text-align: center;
	line-height: 1.2;
}
table.cm thead .col-hdr th.svc { text-align: left; padding-left: 10px; }
table.cm tbody td {
	padding: 3px 8px; border-bottom: 1px solid var(--line-soft);
	border-right: 1px solid var(--line-soft);
	font-variant-numeric: tabular-nums;
}
table.cm tbody td.svc {
	text-align: left; font-weight: 500; color: var(--ink);
	display: flex; align-items: center; gap: 8px;
	border-right: 2px solid var(--brand);
	cursor: pointer;
}
table.cm tbody td.svc:hover { background: var(--brand-soft-2); }
table.cm tbody td.num { text-align: right; }
table.cm tbody td.ctr { text-align: center; }
table.cm tbody td.grp-end { border-right: 2px solid var(--brand); }
table.cm tbody td input.cm-edit {
	width: 100%; border: 0; background: transparent;
	font: inherit; font-size: 12px; text-align: right;
	font-variant-numeric: tabular-nums; padding: 1px 2px;
}
table.cm tbody td input.cm-edit:focus { outline: 1px solid var(--brand); background: #fff9e6; }
table.cm tbody tr:hover td { background: var(--brand-soft-2); }
table.cm tbody td .plusminus { color: var(--ink-dim); font-size: 11px; margin-left: 4px; cursor: pointer; }
table.cm tbody td.ed { background: #fffbea; }
table.cm tbody tr.total > td {
	background: #e6f4ea; font-weight: 700;
	border-top: 1px solid var(--brand); border-bottom: 1px solid var(--brand);
}
table.cm tbody tr.margin > td { background: #fafbfc; font-weight: 600; color: var(--ink-mid); }
table.cm tbody tr.default > td {
	background: linear-gradient(to bottom, #4caf50, #2a8f47);
	color: white; font-weight: 700;
	border-top: 1px solid var(--brand-ink);
}
table.cm tbody tr.default > td.svc { border-right: 2px solid var(--brand-ink); }

/* Emergency Fund row — internal safety buffer (8% of entire job).
   Yellow tint signals "internal use only — never on customer docs". */
table.cm tbody tr.emergency > td {
	background: #fef3c7;
	color: #78350f;
	font-weight: 600;
	border-top: 1px dashed #d97706;
}
table.cm tbody tr.emergency > td.svc { padding-left: 10px; }

/* Profit First Tracker — sits between table and footer, lower-left of dialog. */
.costs-dlg .cd-pf {
	display: grid; grid-template-columns: 60px 1fr 100px;
	gap: 2px 8px;
	margin: 8px 12px 0;
	padding: 8px 12px;
	max-width: 360px;
	background: linear-gradient(to bottom, #ecfdf5, #d1fae5);
	border: 1px solid #6ee7b7;
	border-radius: 4px;
	font-size: 11px;
}
.costs-dlg .cd-pf-hdr {
	grid-column: 1 / -1;
	font-weight: 700; color: #065f46;
	display: flex; justify-content: space-between; align-items: baseline;
	border-bottom: 1px solid #6ee7b7;
	padding-bottom: 3px; margin-bottom: 3px;
}
.costs-dlg .cd-pf-base { font-weight: 500; color: var(--ink-dim); font-size: 10px; }
.costs-dlg .cd-pf-row { display: contents; }
.costs-dlg .cd-pf-row .cd-pf-pct { color: var(--ink-mid); text-align: right; font-variant-numeric: tabular-nums; }
.costs-dlg .cd-pf-row .cd-pf-lbl { color: var(--ink); }
.costs-dlg .cd-pf-row .cd-pf-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.costs-dlg .cd-pf-row.cd-pf-sub .cd-pf-pct,
.costs-dlg .cd-pf-row.cd-pf-sub .cd-pf-lbl { color: var(--ink-dim); font-style: italic; }
.costs-dlg .cd-pf-row.cd-pf-sub .cd-pf-amt { font-weight: 500; color: var(--ink-mid); }

.costs-dlg .cd-foot {
	display: flex; gap: 4px; padding: 6px 10px;
	border-top: 1px solid var(--line); background: #fafbfc;
	align-items: center;
}
.costs-dlg .cd-foot .sep { flex: 1; }
.cd-btn {
	display: flex; align-items: center; gap: 6px;
	padding: 4px 10px; border: 1px solid var(--line); background: #fff;
	border-radius: 3px; cursor: pointer; font-size: 12px; color: var(--ink);
}
.cd-btn:hover { background: var(--brand-soft); border-color: var(--brand); }
.cd-btn.save { color: var(--brand-ink); font-weight: 600; }
.cd-btn.cancel { color: var(--bad); }
.cd-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============ Service Specs mini modal (per-service options) ============ */
.ss-dlg { display: flex; flex-direction: column; min-height: 0; }
.ss-dlg .ss-title {
	background: linear-gradient(to bottom, #e2e8f0, #cbd5e1);
	padding: 4px 10px;
	font-size: 12px; color: var(--ink);
	display: flex; align-items: center; gap: 8px;
	border-bottom: 1px solid #94a3b8;
}
.ss-dlg .ss-title .x { margin-left: auto; background: transparent; border: 0; cursor: pointer; color: var(--ink-mid); font-size: 15px; }
.ss-dlg .ss-body { padding: 0; }
.ss-dlg .ss-banner {
	background: linear-gradient(to bottom, #3b82f6, #1d4ed8);
	color: white; font-weight: 700;
	padding: 4px 10px; font-size: 13px;
}

/* Pull-from-history tree (FB 2026-04-26_132303) */
.pull-job { border-bottom: 1px solid #e5e7eb; }
.pull-job:last-child { border-bottom: 0; }
.pull-job-hdr {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 10px;
	background: #f1f5f9;
	border-bottom: 1px solid #e2e8f0;
	font-size: 12px;
}
.pull-job-hdr .pull-jobno { font-weight: 700; color: #0f172a; }
.pull-job-hdr .pull-jobdate { color: #64748b; font-size: 11px; }
.pull-job-hdr .pull-jobcust { color: #1e293b; font-weight: 600; flex: 0 1 auto; }
.pull-job-hdr .pull-jobtitle { color: #64748b; font-style: italic; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk { font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #fff; }
.bk-order { background: #ea580c; }
.bk-quote { background: #2563eb; }
.bk-tpl   { background: #7c3aed; }
.bk-hist  { background: #475569; }

.pull-item { padding: 0; }
.pull-item-hdr {
	display: flex; align-items: center; gap: 8px;
	padding: 4px 10px 4px 22px;
	border-bottom: 1px solid #f1f5f9;
	font-size: 12px;
}
.pull-item-hdr .pull-toggle {
	background: transparent; border: 0; cursor: pointer;
	color: #64748b; font-size: 11px; padding: 0 4px; min-width: 16px;
}
.pull-item-hdr .pull-itemdesc { flex: 1; color: #0f172a; font-weight: 500; }
.pull-item-hdr .pull-itemqty,
.pull-item-hdr .pull-itemsvc { color: #64748b; font-size: 11px; }
.pull-item-hdr .pull-itemprice { color: #16a34a; font-weight: 700; min-width: 60px; text-align: right; }
.pull-item-hdr .pull-grab {
	background: #16a34a; color: #fff; border: 0;
	padding: 2px 8px; border-radius: 3px; cursor: pointer;
	font-size: 11px; font-weight: 700;
}
.pull-item-hdr .pull-grab:hover:not(:disabled) { background: #15803d; }
.pull-item-hdr .pull-grab:disabled { background: #94a3b8; cursor: wait; }

.pull-svc-list {
	background: #fafbfc;
	padding: 4px 10px 4px 44px;
	border-bottom: 1px solid #f1f5f9;
}
.pull-svc {
	display: flex; align-items: center; gap: 8px;
	font-size: 11px; color: #475569;
	padding: 2px 0;
}
.pull-svc .pull-svcname { flex: 1; }
.pull-svc .pull-svcqty { color: #94a3b8; min-width: 40px; text-align: right; }
.pull-svc .pull-svcprice { color: #64748b; min-width: 60px; text-align: right; }
.pull-svc-empty { color: #94a3b8; font-size: 11px; font-style: italic; }

/* Pull-from-History v2 — pp2016 Add Item(s) to Order parity
 * (FB 2026-04-26 evening + 2026-04-27 morning) */
.pull2-rail {
	width: 220px; flex-shrink: 0;
	background: #fef2f2; border-right: 1px solid #fecaca;
	padding: 12px 10px; display: flex; flex-direction: column; gap: 6px;
	overflow-y: auto;
}
.pull2-rail-h {
	font-size: 11px; font-weight: 700; color: #991b1b;
	text-transform: uppercase; letter-spacing: .4px; padding: 4px 6px;
}
.pull2-rail-list { list-style: none; margin: 0; padding: 0; }
.pull2-rail-list li {
	padding: 6px 10px; cursor: pointer; border-radius: 4px;
	font-size: 13px; color: #1f2937; margin-bottom: 1px;
}
.pull2-rail-list li:hover { background: #fee2e2; }
.pull2-rail-list li.active {
	background: #dc2626; color: #fff; font-weight: 600;
}
.pull2-rail-actions {
	margin-top: auto; display: flex; flex-direction: column; gap: 6px;
	padding-top: 12px; border-top: 1px solid #fecaca;
}
.pull2-rail-actions .btn { width: 100%; }
.pull2-rail-actions #pull2-ok:not([disabled]) {
	background: #16a34a; color: #fff; border-color: #15803d; font-weight: 700;
}

.pull2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pull2-toolbar {
	display: flex; gap: 8px; align-items: center;
	padding: 10px 14px; border-bottom: 1px solid #e5e7eb;
	background: #fafbfc;
}
.pull2-tabs { display: flex; gap: 0; border: 1px solid #cbd5e1; border-radius: 4px; overflow: hidden; }
.pull2-tab {
	background: #fff; border: 0; border-right: 1px solid #cbd5e1;
	padding: 6px 12px; cursor: pointer; font-size: 12px; color: #475569;
}
.pull2-tab:last-child { border-right: 0; }
.pull2-tab:hover { background: #f1f5f9; }
.pull2-tab.active { background: #1e40af; color: #fff; }

.pull2-results { flex: 1; overflow: auto; padding: 0; }
.pull2-results .empty { padding: 24px; text-align: center; color: #94a3b8; font-size: 13px; }

table.pull2-flat {
	width: 100%; border-collapse: collapse; font-size: 12.5px;
}
table.pull2-flat thead th {
	position: sticky; top: 0;
	background: #f1f5f9; border-bottom: 2px solid #cbd5e1;
	padding: 6px 10px; text-align: left; font-weight: 700; font-size: 11px;
	text-transform: uppercase; letter-spacing: .3px; color: #475569;
}
table.pull2-flat thead th.num { text-align: right; }
table.pull2-flat thead th.ck { width: 28px; padding: 6px 4px; }
table.pull2-flat tbody td {
	padding: 5px 10px; border-bottom: 1px solid #f1f5f9;
	vertical-align: top;
}
table.pull2-flat tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.pull2-flat tbody td.ck { padding: 5px 4px; text-align: center; }
table.pull2-flat tbody td.dim { color: #6b7280; font-size: 11.5px; }
table.pull2-flat tbody td.ellipsis { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.pull2-flat tbody tr:nth-child(even) td { background: #fafbfc; }
table.pull2-flat tbody tr:hover td { background: #fef3c7; }

.pull2-prod {
	border-bottom: 1px solid #e5e7eb;
}
.pull2-prod-h {
	background: #1e40af; color: #fff;
	padding: 5px 12px; font-size: 12px; font-weight: 700;
}
.pull2-prod-h .dim { color: #c7d2fe; font-weight: 400; font-size: 11px; margin-left: 8px; }
.pull2-prod table.pull2-flat tbody tr:hover td { background: #eff6ff; }

.ss-dlg .ss-section {
	background: #dbeafe; color: var(--ink);
	padding: 3px 10px; font-weight: 600; font-size: 11px;
	text-transform: uppercase; letter-spacing: .3px;
	border-top: 1px solid #93c5fd;
	border-bottom: 1px solid #93c5fd;
}
.ss-dlg .ss-row {
	display: grid; grid-template-columns: 110px 1fr;
	align-items: center;
	border-bottom: 1px solid var(--line-soft);
	min-height: 22px;
}
.ss-dlg .ss-row .lbl {
	padding: 2px 10px; background: #fafbfc;
	color: var(--ink-mid); font-size: 11.5px;
	border-right: 1px solid var(--line-soft);
	display: flex; align-items: center; gap: 4px;
	font-style: italic;
}
.ss-dlg .ss-row .val { padding: 2px 10px; color: var(--ink); font-size: 12px; font-style: italic; }
.ss-dlg .ss-row.edit .lbl { font-style: normal; color: var(--ink); font-weight: 500; }
.ss-dlg .ss-row.edit .val { font-style: normal; }
.ss-dlg .ss-row .val input, .ss-dlg .ss-row .val select {
	border: 0; background: transparent; font: inherit; font-size: 12px;
	width: 100%; padding: 1px 2px;
}
.ss-dlg .ss-row .val input:focus, .ss-dlg .ss-row .val select:focus {
	outline: 1px solid var(--brand); background: #fff;
}
.ss-dlg .ss-diagram {
	padding: 10px; background: #fafbfc; border-top: 1px solid var(--line-soft);
	display: flex; justify-content: center;
}
.ss-dlg .ss-foot {
	display: flex; gap: 8px; justify-content: center;
	padding: 8px; border-top: 1px solid var(--line); background: #fafbfc;
}

/* Floating skin-flip toggle (top-right, every page, both skins). */
.skin-flip {
	position: fixed; top: 10px; right: 14px; z-index: 250;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px; border-radius: 18px;
	background: #0f172a; color: #f1f5f9; border: 1px solid rgba(255,255,255,.08);
	font-size: 11px; font-weight: 600; letter-spacing: .3px;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0,0,0,.18);
	font-family: inherit;
}
.skin-flip:hover { background: #1e293b; }
.skin-flip-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25);
}
body.skin-openbooks .skin-flip-dot { background: #0ea5e9; box-shadow: 0 0 0 2px rgba(14,165,233,.25); }
.skin-flip-cur { color: #f1f5f9; }
.skin-flip-arrow { color: #64748b; font-size: 12px; }
.skin-flip-next { color: #94a3b8; font-weight: 500; }

/* Floating "Suggest a change" button + modal (bottom-left, every page). */
.fb-btn {
	position: fixed; left: 14px; bottom: 36px; z-index: 200;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 12px; border-radius: 20px;
	background: var(--brand); color: #fff; border: 0; cursor: pointer;
	font-size: 12px; font-weight: 600; letter-spacing: .2px;
	box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.fb-btn:hover { background: var(--brand-ink); }
.fb-modal {
	position: fixed; inset: 0; z-index: 300;
	display: flex; align-items: center; justify-content: center;
	background: rgba(15,23,42,.35);
}
.fb-modal[hidden] { display: none; }
.fb-card {
	background: #fff; border-radius: 8px; width: min(560px, 92vw);
	/* FB Dave 2026-05-01_220729 — cap height + let body scroll so the
	   send button isn't pushed below the viewport on smaller monitors. */
	max-height: 90vh;
	box-shadow: 0 20px 40px rgba(0,0,0,.25); overflow: hidden;
	display: flex; flex-direction: column;
}
.fb-body { overflow-y: auto; min-height: 0; flex: 1; }
.fb-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 14px; background: var(--brand-soft);
	border-bottom: 1px solid var(--line); font-weight: 600; color: var(--brand-ink);
}
.fb-x { background: transparent; border: 0; font-size: 16px; color: var(--ink-dim); cursor: pointer; }
.fb-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.fb-label { font-size: 12px; color: var(--ink-mid); font-weight: 500; }
.fb-body textarea {
	width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px;
	font-family: inherit; font-size: 13px; resize: vertical;
}
.fb-body textarea:focus { outline: 1px solid var(--brand); border-color: var(--brand); }
.fb-checkline { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-mid); }
.fb-preview img { max-width: 100%; border: 1px solid var(--line); border-radius: 4px; }

/* Multi-shot thumbnail strip (FB 2026-04-26 — before/after workflow) */
.fb-shots {
	display: flex; gap: 8px; padding: 8px 4px; margin: 8px 0;
	background: #f1f5f9; border: 1px solid var(--line); border-radius: 4px;
	overflow-x: auto;
}
.fb-thumb {
	position: relative; flex: 0 0 110px; width: 110px;
	border: 2px solid transparent; border-radius: 4px;
	cursor: pointer; background: #fff; transition: border-color .12s;
}
.fb-thumb.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.fb-thumb:hover { border-color: var(--brand-ink); }
.fb-thumb img { display: block; width: 100%; height: 70px; object-fit: cover; border-radius: 2px; }
.fb-thumb .fb-thumb-num {
	position: absolute; top: 2px; left: 2px;
	background: rgba(15,23,42,.85); color: #fff;
	font: 700 10px system-ui; padding: 1px 5px; border-radius: 8px;
}
.fb-thumb .fb-thumb-del {
	position: absolute; top: 2px; right: 2px;
	background: rgba(220,38,38,.85); color: #fff;
	border: 0; cursor: pointer; padding: 0 5px; border-radius: 8px;
	font: 700 10px system-ui;
}
.fb-thumb .fb-thumb-del:hover { background: #b91c1c; }
.fb-shotline { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fb-target-hint {
	font-size: 11.5px; color: #475569; background: #f1f5f9; border: 1px dashed #cbd5e1;
	border-radius: 4px; padding: 6px 8px; line-height: 1.4;
}
.fb-target-hint code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; color: #0f172a; }
.fb-anno-bar {
	display: flex; align-items: center; gap: 4px; padding: 6px;
	background: #0f172a; border-radius: 4px 4px 0 0;
}
.fb-anno-bar .fb-tool, .fb-anno-bar .fb-anno-btn {
	background: #1e293b; color: #e2e8f0; border: 1px solid #334155;
	padding: 4px 8px; border-radius: 3px; font-size: 12px; cursor: pointer;
}
.fb-anno-bar .fb-tool:hover, .fb-anno-bar .fb-anno-btn:hover { background: #334155; }
.fb-anno-bar .fb-tool.active { background: #f59e0b; color: #0f172a; border-color: #f59e0b; }
.fb-anno-bar .fb-swatch {
	width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent;
	cursor: pointer; padding: 0;
}
.fb-anno-bar .fb-swatch.active { border-color: #fff; box-shadow: 0 0 0 1px #0f172a; }
.fb-anno-sep { width: 1px; height: 18px; background: #334155; margin: 0 4px; }
.fb-anno-btn {
	background: #fff; color: #334155; border: 1px solid #cbd5e1;
	padding: 5px 10px; border-radius: 3px; font-size: 11.5px; cursor: pointer; font-weight: 600;
}
.fb-anno-btn:hover { background: #f1f5f9; }
.fb-canvas {
	display: block; max-width: 100%; height: auto;
	border: 1px solid #0f172a; border-top: 0; border-radius: 0 0 4px 4px;
	cursor: crosshair; touch-action: none;
}
.fb-foot {
	padding: 10px 14px; background: #fafbfc; border-top: 1px solid var(--line);
	display: flex; align-items: center; gap: 8px;
}
.fb-status { flex: 1; font-size: 12px; color: var(--ink-dim); }

/* ------- New Job wizard (new_job_bc.pdf) -------
   Three stacked picker groups on a narrow dialog. Header color re-themes to
   match the selected Job type (Order=green, Quote=blue, Template=purple). */
.nj-dlg { min-width: 340px; max-width: 420px; background: #fff; border-radius: 6px; overflow: hidden; }
.nj-title {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 12px; background: #6b7280; color: #fff;
	font-weight: 600;
}
.nj-title .x { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 16px; cursor: pointer; }
.nj-title.nj-type-order    { background: #16a34a; }
.nj-title.nj-type-quote    { background: #2563eb; }
.nj-title.nj-type-template { background: #8b5cf6; }
.nj-body { padding: 10px 14px; }
.nj-step { margin-bottom: 12px; }
.nj-step-head {
	font-weight: 600; color: var(--ink-mid); font-size: 12px;
	padding: 4px 0; display: flex; align-items: center; gap: 6px;
}
.nj-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 20px; height: 20px; background: #e5e7eb; color: var(--ink-mid);
	border-radius: 50%; font-size: 11px; font-weight: 700;
}
.nj-choices { list-style: none; margin: 0; padding: 0 0 0 22px; }
.nj-choices li {
	display: flex; align-items: center; gap: 8px;
	padding: 4px 8px; cursor: pointer; border-radius: 4px;
	font-size: 13px; color: var(--ink);
}
.nj-choices li:hover { background: var(--brand-soft-2); }
.nj-choices li.active { background: var(--brand-soft); font-weight: 600; }
.nj-choices li.nj-loading, .nj-choices li.nj-err { color: var(--ink-dim); font-style: italic; cursor: default; }
.nj-ico {
	display: inline-block; width: 16px; height: 16px;
	background: #9ca3af; border-radius: 2px; flex-shrink: 0;
}
.nj-ico.type-order    { background: #16a34a; }
.nj-ico.type-quote    { background: #2563eb; }
.nj-ico.type-template { background: #8b5cf6; }
.nj-ico.csr, .nj-ico.cus-find, .nj-ico.cus-regular, .nj-ico.cus-new, .nj-ico.cus-walk {
	background: transparent; width: auto; height: auto; font-size: 14px;
}
.nj-foot {
	padding: 8px 12px; border-top: 1px solid var(--line);
	display: flex; align-items: center; gap: 8px; background: var(--bg-alt);
}
.nj-foot .sep { flex: 1; }

/* ------- Find dialog (find_button.pdf) -------
   Four-column layout: scope / field / op / value input + inline results. */
.find-dlg { min-width: 860px; max-width: 960px; background: #fff; border-radius: 6px; overflow: hidden; }
.find-title {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 12px; background: #374151; color: #fff;
	font-weight: 600;
}
.find-title .x { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 16px; cursor: pointer; }
.find-body { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1.4fr; gap: 0; border-bottom: 1px solid var(--line); }
.find-col { border-right: 1px solid var(--line); min-height: 320px; background: #fafbfc; }
.find-col:last-child { border-right: 0; }
.find-colhead {
	padding: 6px 10px; background: var(--brand); color: #fff;
	font-weight: 600; font-size: 12px; letter-spacing: .2px;
}
.find-list { list-style: none; margin: 0; padding: 4px 0; max-height: 320px; overflow-y: auto; }
.find-list li {
	padding: 3px 10px; cursor: pointer; font-size: 12px; color: var(--ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.find-list li:hover { background: var(--brand-soft-2); }
.find-list li.active { background: var(--brand); color: #fff; font-weight: 600; }
.find-value-col { background: var(--brand-soft-2); }
.find-val-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.find-val-lbl { font-size: 12px; color: var(--ink-mid); font-weight: 600; }
.find-val-input {
	padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px;
	font-size: 13px; width: 100%;
}
.find-val-input:focus { outline: 1px solid var(--brand); border-color: var(--brand); }
.find-actions { display: flex; gap: 6px; margin-top: 6px; }
.find-status { font-size: 12px; color: var(--ink-dim); min-height: 14px; }
.find-results { max-height: 260px; overflow-y: auto; border-top: 1px solid var(--line); }
.find-rh { padding: 6px 12px; font-weight: 600; font-size: 12px; background: #f1f5f9; color: var(--ink-mid); }
.find-rh-count { color: var(--ink-dim); font-weight: 400; }
.find-rbody table { width: 100%; }
.find-rbody tr { cursor: pointer; }
.find-rbody tr:hover td { background: var(--brand-soft-2); }
.find-foot { padding: 8px 12px; background: var(--bg-alt); border-top: 1px solid var(--line); }

/* === A/R page === */
.ar-detail { display: flex; flex-direction: column; min-height: 0; }
.ar-header { padding: 10px 16px 6px; border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.ar-header h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--brand-ink); }
.ar-header h2 .muted { color: var(--ink-dim); font-weight: 400; font-size: 13px; margin-left: 8px; }
.ar-header .small { font-size: 12px; margin-top: 2px; }
.ar-header .back { color: var(--brand); text-decoration: none; margin-right: 10px; font-weight: 400; font-size: 13px; }
.ar-header .back:hover { text-decoration: underline; }
.ar-actions { display: flex; align-items: center; gap: 8px; padding: 4px 0 6px; }
.ar-actions .btn-bulk { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.ar-export-btn { margin-left: auto; padding: 4px 10px; font-size: 12px; font-weight: 500; background: var(--brand-soft); color: var(--brand-ink); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.ar-export-btn:hover { background: #fde68a; }
.ar-body { flex: 1; overflow: auto; padding: 0; }
.ar-body .empty { padding: 30px; text-align: center; color: var(--ink-dim); }
.ar-body .empty.err { color: #b91c1c; }

.ar-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ar-table thead th { position: sticky; top: 0; background: var(--brand-soft); color: var(--brand-ink); padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--line); font-weight: 600; z-index: 1; }
.ar-table th.num, .ar-table td.num { text-align: right; }
.ar-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ar-table th.sortable:hover { background: #fde68a; }
.ar-table th.sortable .sort-chev { display: inline-block; min-width: 10px; color: #92400e; font-size: 10px; opacity: .9; margin-left: 2px; }
.ar-table th.sortable.active { color: #92400e; }
.ar-table tbody td { padding: 5px 10px; border-bottom: 1px solid var(--line); }
.ar-table tbody tr:nth-child(even) td { background: var(--bg-stripe); }
.ar-table tbody tr.clickable { cursor: pointer; }
.ar-table tbody tr.clickable:hover td { background: var(--brand-soft); color: var(--brand-ink); }
.ar-table td.warn { color: #b91c1c; font-weight: 600; }
.ar-table td.ellipsis { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Inline per-row action buttons (FB 2026-04-26_134642) */
.ar-table .row-actions { padding: 2px 4px; }
.ar-table .row-act {
	background: transparent; border: 1px solid #e2e8f0; border-radius: 3px;
	padding: 1px 4px; margin: 0 1px; cursor: pointer; font-size: 13px; line-height: 1;
	color: #334155;
}
.ar-table .row-act:hover { background: #f1f5f9; border-color: #94a3b8; color: #0f172a; }

/* Aging row tints — left border bar */
.ar-table tr.age-0 td:first-child { border-left: 3px solid #16a34a; }
.ar-table tr.age-1 td:first-child { border-left: 3px solid #ca8a04; }
.ar-table tr.age-2 td:first-child { border-left: 3px solid #ea580c; }
.ar-table tr.age-3 td:first-child { border-left: 3px solid #dc2626; }
.ar-table tr.age-4 td:first-child { border-left: 3px solid #7f1d1d; }

/* Pay Now dialog — opened from A/R unpaid rows */
.pay-dlg { display: flex; flex-direction: column; min-height: 0; }
.pay-head {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 14px; background: var(--brand-soft);
	border-bottom: 1px solid var(--line);
}
.pay-head .pay-title { font-weight: 600; color: var(--brand-ink); font-size: 14px; flex: 1; }
.pay-head .pay-title .muted { display: block; font-weight: 400; font-size: 12px; margin-top: 2px; }
.pay-head .pay-x {
	width: 26px; height: 26px; border-radius: 4px;
	border: 0; background: transparent; color: var(--ink-mid);
	cursor: pointer; font-size: 18px; line-height: 1;
}
.pay-head .pay-x:hover { background: rgba(0,0,0,.08); color: var(--bad); }
.pay-body { padding: 14px; overflow: auto; }

.pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pay-summary {
	background: var(--bg-alt); border: 1px solid var(--line); border-radius: 4px;
	padding: 10px 12px; font-size: 12px;
}
.pay-summary .ps-row { display: flex; justify-content: space-between; padding: 4px 0; }
.pay-summary .ps-row + .ps-row { border-top: 1px dashed var(--line); }
.pay-summary .ps-row.big { font-weight: 600; font-size: 13px; padding-top: 6px; }
.pay-summary .ps-val { color: var(--ink); }
.pay-summary .ps-val.num { font-variant-numeric: tabular-nums; }
.pay-summary .ps-val.warn { color: #b91c1c; }

.pay-form { display: flex; flex-direction: column; gap: 10px; }
.pay-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-mid); }
.pay-form input, .pay-form select {
	padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px;
	font-size: 13px; color: var(--ink); background: #fff;
}
.pay-form input:focus, .pay-form select:focus { outline: none; border-color: var(--brand); }
.pay-form input:disabled, .pay-form select:disabled { background: var(--bg-alt); color: var(--ink-dim); }
.pay-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.pay-msg { font-size: 12px; min-height: 16px; }
.pay-msg.ok  { color: #15803d; }
.pay-msg.err { color: #b91c1c; }

.pay-history { margin-top: 16px; }
.pay-history h4 { margin: 0 0 6px 0; font-size: 13px; color: var(--brand-ink); }
.ar-table.compact thead th { padding: 4px 8px; font-size: 11px; }
.ar-table.compact tbody td { padding: 3px 8px; font-size: 11px; }

/* Purchases (A/P) entry form ------------------------------------------- */
.modal.wide { max-width: 920px; }
.modal-x {
	width: 26px; height: 26px; border-radius: 4px;
	border: 0; background: transparent; color: var(--ink-mid);
	cursor: pointer; font-size: 16px; margin-left: auto;
}
.modal-x:hover { background: rgba(0,0,0,.08); color: var(--bad); }
.modal-head h3 { margin: 0; font-size: 14px; color: var(--brand-ink); font-weight: 600; flex: 1; }

.purch-form { padding: 12px 14px; }
.pf-row {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px;
}
.pf-row label {
	display: flex; flex-direction: column; gap: 3px;
	font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .3px;
}
.pf-row input, .pf-row select {
	padding: 5px 7px; border: 1px solid var(--line); border-radius: 3px;
	font-size: 13px; color: var(--ink); background: #fff;
}
.pf-row input:focus, .pf-row select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.pf-section { margin: 14px 0; border: 1px solid var(--line); border-radius: 4px; }
.pf-section-head {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 10px; background: var(--brand-soft); border-bottom: 1px solid var(--line);
	font-size: 12px; font-weight: 600; color: var(--brand-ink);
}
.pf-section-head span { flex: 1; }
.pf-lines { width: 100%; border-collapse: collapse; }
.pf-lines th {
	background: var(--bg-alt); text-align: left; padding: 5px 8px;
	font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .3px;
	border-bottom: 1px solid var(--line);
}
.pf-lines td { padding: 4px 6px; border-bottom: 1px solid var(--line); }
.pf-lines tfoot td { background: var(--bg-alt); font-size: 12px; }
.pf-lines th.num, .pf-lines td.num { text-align: right; }
.pf-lines input { width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid transparent; background: transparent; font-size: 12px; }
.pf-lines input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 2px var(--brand-soft); }
.pf-lines input.num { text-align: right; }
.pf-lines .pf-rm {
	width: 22px; height: 22px; border: 0; background: transparent;
	color: var(--ink-dim); cursor: pointer; border-radius: 3px;
}
.pf-lines .pf-rm:hover { color: var(--bad); background: rgba(0,0,0,.06); }
.pf-notes { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--ink-dim); text-transform: uppercase; }
.pf-notes textarea { padding: 6px 8px; border: 1px solid var(--line); border-radius: 3px; font: inherit; font-size: 12px; resize: vertical; }

.ar-table tr.s-overdue td { background: rgba(220, 38, 38, 0.06); }
.ar-table tr.s-partial td { background: rgba(234, 179, 8, 0.06); }
.ar-table tr.s-paid    td { color: var(--ink-dim); }

/* ---- Services secondary-category chips + tag buttons ---- */
.seccat-bar {
	display: flex; flex-wrap: wrap; gap: 4px;
	padding: 6px 10px; background: var(--bg-alt);
	border-bottom: 1px solid var(--line);
}
.seccat-chip {
	font: inherit; font-size: 11.5px; line-height: 1;
	padding: 4px 8px; border: 1px solid var(--line); border-radius: 12px;
	background: #fff; color: var(--ink); cursor: pointer;
	display: inline-flex; align-items: center; gap: 4px;
}
.seccat-chip:hover { background: var(--bg-alt); }
.seccat-chip.active { font-weight: 600; }
.seccat-chip .n {
	font-size: 10px; opacity: .75;
	padding: 1px 5px; border-radius: 8px; background: rgba(0,0,0,.07);
}
.seccat-chip.active .n { background: rgba(255,255,255,.25); }
.tag-cell { padding: 2px 4px; }
.seccat-tag {
	font: inherit; font-size: 10.5px; line-height: 1; cursor: pointer;
	padding: 3px 7px; border-radius: 10px; border: 1px solid transparent;
	color: #fff; white-space: nowrap;
}
.seccat-tag.empty {
	background: transparent; color: var(--ink-dim);
	border: 1px dashed var(--line);
}
.seccat-tag.empty:hover { color: var(--brand); border-color: var(--brand); }
.seccat-tag.set:hover { filter: brightness(1.08); }
.seccat-pop {
	position: absolute; z-index: 9999;
	background: #fff; border: 1px solid var(--line); border-radius: 4px;
	box-shadow: 0 6px 20px rgba(0,0,0,.18);
	padding: 4px; min-width: 160px;
	display: flex; flex-direction: column; gap: 1px;
}
.seccat-opt {
	font: inherit; font-size: 12px; text-align: left; cursor: pointer;
	padding: 5px 8px; border: 0; background: transparent; border-radius: 3px;
	display: flex; align-items: center; gap: 7px; color: var(--ink);
}
.seccat-opt:hover { background: var(--bg-alt); }
.seccat-opt.selected { background: var(--brand-soft); font-weight: 600; }
.seccat-opt .dot {
	display: inline-block; width: 10px; height: 10px; border-radius: 50%;
}
.equip-tag {
	font: inherit; font-size: 10.5px; line-height: 1; cursor: pointer;
	padding: 3px 7px; border-radius: 10px; white-space: nowrap;
	background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd;
}
.equip-tag.empty {
	background: transparent; color: var(--ink-dim);
	border: 1px dashed var(--line);
}
.equip-tag.empty:hover { color: #7c3aed; border-color: #7c3aed; }
.equip-tag.set:hover { background: #ddd6fe; }
.equip-grp-head {
	font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
	color: var(--ink-dim); padding: 6px 8px 2px; border-top: 1px solid var(--line);
	margin-top: 2px;
}
.equip-grp-head:first-child { border-top: 0; margin-top: 0; }

/* ---- Accounting workspace ---------------------------------------------- */
.acct-detail { display: flex; flex-direction: column; min-height: 0; }

.acct-daterange {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 14px; background: var(--bg); border-bottom: 1px solid var(--line);
	font-size: 12px; color: var(--ink-dim);
}
.acct-daterange .dr-label { font-weight: 600; color: var(--ink); margin-right: 4px; }
.acct-daterange select,
.acct-daterange input[type="date"] {
	font: inherit; font-size: 12px; padding: 3px 6px;
	border: 1px solid var(--line); background: var(--bg); color: var(--ink);
	border-radius: 3px; min-width: 0;
}
.acct-daterange select { min-width: 130px; }
.acct-daterange input[type="date"] { width: 130px; }
.acct-daterange .dr-arrow { color: var(--ink-dim); font-weight: 600; }
.acct-daterange .dr-readonly .acct-pill { font-size: 11px; }
/* Balance-mode reports use only end date — disable from-input UNLESS the
 * user picked Custom (FB 2026-04-27_142935: previously couldn't type the
 * start date because pointer-events:none was blanket-applied). */
.acct-daterange[data-mode="balance"]:not([data-preset="custom"]) .dr-from,
.acct-daterange[data-mode="balance"]:not([data-preset="custom"]) .dr-arrow { opacity: 0.35; pointer-events: none; }
.acct-daterange[data-mode="none"] .dr-from,
.acct-daterange[data-mode="none"] .dr-to,
.acct-daterange[data-mode="none"] .dr-arrow,
.acct-daterange[data-mode="none"] select { opacity: 0.35; pointer-events: none; }
.acct-daterange .dr-hint { margin-left: auto; color: var(--ink-dim); font-size: 11px; font-style: italic; }

.acct-header {
	padding: 10px 14px; background: var(--bg);
	border-bottom: 1px solid var(--line);
	display: flex; flex-direction: column; gap: 2px;
}
.acct-title {
	display: flex; align-items: center; gap: 10px;
	font-size: 15px; font-weight: 600; color: var(--ink);
}
.acct-sub { font-size: 11.5px; color: var(--ink-dim); }
.acct-pill {
	font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
	border: 1px solid transparent; line-height: 1.5;
}
.acct-pill.ok   { background: #dcfce7; color: #166534; border-color: #86efac; }
.acct-pill.warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

.acct-body {
	flex: 1; min-height: 0; overflow: auto;
	padding: 12px 14px; background: var(--bg-alt);
}
.acct-body .empty {
	padding: 28px; text-align: center; color: var(--ink-dim);
	background: var(--bg); border: 1px dashed var(--line); border-radius: 4px;
}
.acct-body .empty.err { color: var(--bad); border-color: var(--bad); }

.acct-cards {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px; margin-bottom: 4px;
}
@media (max-width: 1280px) { .acct-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .acct-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .acct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }
.acct-card {
	background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
	padding: 8px 10px; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.acct-card .lbl {
	font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
	color: var(--ink-dim); font-weight: 600;
}
.acct-card .big {
	font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums;
	color: var(--ink); margin-top: 3px; line-height: 1.15;
}
.acct-card .sub { font-size: 11px; color: var(--ink-dim); margin-top: 2px; }
@media (max-width: 1100px) { .acct-card .big { font-size: 16px; } }

/* === Modernized bank-account register header (FB Dave 2026-05-23) === */
.reg-modern-head { padding: 4px 0 0; }
.reg-modern-topline {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-bottom: 8px;
}
.reg-back-link {
	font-size: 12px; color: var(--ink-dim); text-decoration: none;
	padding: 4px 8px; border-radius: 4px; background: #f1f5f9;
	border: 1px solid #e2e8f0; transition: background .12s;
}
.reg-back-link:hover { background: #e2e8f0; color: var(--ink); }
.reg-actions { display: flex; align-items: center; gap: 6px; }
.reg-actions .btn-mini {
	font-size: 12px; padding: 5px 10px; font-weight: 600;
	border-radius: 5px; cursor: pointer;
	background: #fff; border: 1px solid #cbd5e1; color: var(--ink);
	transition: all .12s;
}
.reg-actions .btn-mini:hover { background: #f1f5f9; border-color: #94a3b8; }
.reg-actions #reg-reconcile {
	background: #16a34a; border-color: #15803d; color: #fff;
}
.reg-actions #reg-reconcile:hover { background: #15803d; }
.reg-actions #reg-import {
	background: #0ea5e9; border-color: #0284c7; color: #fff;
}
.reg-actions #reg-import:hover { background: #0284c7; }
.reg-modern-titlerow {
	display: flex; align-items: flex-start; gap: 16px;
	margin-bottom: 12px;
}
.reg-modern-titlecol { flex: 1; min-width: 0; }
.reg-modern-h1 {
	font-size: 22px; font-weight: 700; margin: 0 0 4px;
	color: var(--ink); letter-spacing: -.3px;
}
.reg-jump-wrap select#reg-jump {
	font-size: 18px !important; font-weight: 700 !important;
	padding: 4px 8px !important; border: 1px solid #cbd5e1 !important;
	border-radius: 5px !important; background: #fff !important;
	max-width: 480px !important; cursor: pointer;
}
.reg-modern-subline {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	font-size: 12px; color: var(--ink-dim);
}
.reg-type-chip {
	font-size: 11px; font-weight: 700; padding: 2px 8px;
	border-radius: 10px; border: 1px solid;
	text-transform: uppercase; letter-spacing: .4px;
}
.reg-meta { font-size: 12px; color: var(--ink-dim); }
.reg-meta b { color: var(--ink); font-weight: 600; }
.reg-warn-chip {
	font-size: 11px; font-weight: 600; padding: 3px 8px;
	border-radius: 4px; background: #fef3c7; color: #92400e;
	border: 1px solid #fcd34d;
}
.reg-stat-grid {
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px; margin-bottom: 6px;
}
@media (max-width: 1280px) { .reg-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .reg-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }
.reg-stat {
	background: var(--bg); border: 1px solid var(--line);
	border-left: 3px solid #94a3b8;
	border-radius: 4px; padding: 5px 8px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.reg-stat-hero { background: linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%); }
.reg-stat-lbl {
	font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
	color: var(--ink-dim); font-weight: 600;
}
.reg-stat-big {
	font-size: 13px; font-weight: 700;
	font-variant-numeric: tabular-nums; line-height: 1.2;
	margin-top: 2px;
}
.reg-stat-sub { font-size: 10px; color: var(--ink-dim); margin-top: 2px; }
.reg-stat-hero .reg-stat-big { font-size: 16px; }
@media (max-width: 1100px) {
	.reg-stat-big { font-size: 12px; }
	.reg-stat-hero .reg-stat-big { font-size: 14px; }
}

/* Register table — friendlier row spacing + hover (FB Dave 2026-05-23) */
.register-table tbody#reg-tbody tr.reg-hist td {
	padding: 6px 8px;
}
.register-table tbody#reg-tbody tr.reg-hist:nth-child(even) {
	background: #fafbfc;
}
.register-table tbody#reg-tbody tr.reg-hist:hover {
	background: #eff6ff !important;
	cursor: pointer;
}

/* Register toolbar — filter input + bulk-categorize bar (FB Dave 2026-05-23) */
.reg-toolbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin: 8px 0 6px; padding: 6px 8px;
	background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 5px;
}
.reg-toolbar-left { display: flex; align-items: center; gap: 10px; flex: 1; }
.reg-filter-input {
	flex: 1; max-width: 460px;
	font-size: 13px; padding: 6px 10px;
	border: 1px solid #cbd5e1; border-radius: 5px;
	background: #fff;
}
.reg-filter-input:focus {
	outline: none; border-color: #0ea5e9;
	box-shadow: 0 0 0 2px #bae6fd;
}
.reg-filter-count {
	display: none; font-size: 11px; font-weight: 600;
	padding: 2px 8px; border-radius: 10px;
	background: #e0f2fe; color: #075985;
}
.reg-bulk {
	display: flex; align-items: center; gap: 8px;
	padding: 4px 8px; background: #fef3c7; border: 1px solid #fcd34d;
	border-radius: 5px;
}
.reg-bulk-count { font-size: 12px; color: #92400e; }
.reg-bulk-count b { font-size: 13px; color: #78350f; }
.reg-bulk-target {
	font-size: 12px; padding: 4px 6px;
	border: 1px solid #cbd5e1; border-radius: 4px; background: #fff;
	max-width: 240px;
}
.reg-bulk-btn {
	font-size: 12px; font-weight: 600; padding: 5px 12px;
	background: #16a34a; border: 1px solid #15803d; color: #fff;
	border-radius: 4px; cursor: pointer;
}
.reg-bulk-btn:hover { background: #15803d; }
.reg-bulk-btn:disabled { background: #94a3b8; border-color: #64748b; cursor: not-allowed; }
.reg-bulk-clear {
	font-size: 12px; padding: 5px 10px;
	background: #fff; border: 1px solid #cbd5e1; color: var(--ink);
	border-radius: 4px; cursor: pointer;
}
.reg-bulk-clear:hover { background: #f1f5f9; }

/* Selection column in register table */
.register-table th.reg-sel-th { width: 28px; text-align: center; padding: 4px; }
.register-table td.reg-sel-cell { width: 28px; text-align: center; padding: 4px; }
.reg-sel-check { cursor: pointer; transform: scale(1.15); }

/* Vendor column (FB Dave 2026-05-24) */
.reg-vendor-cell { font-size: 12px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg-vendor-link { color: #7c3aed; font-weight: 600; background: #ede9fe; padding: 1px 6px; border-radius: 9px; }
.reg-vendor-guess { color: #475569; font-weight: 500; font-style: italic; opacity: 0.85; }

/* Quick-filter chip in register toolbar (FB Dave 2026-05-24) */
.reg-chip-btn {
	font-size: 12px; font-weight: 600; padding: 5px 10px;
	background: #fff; border: 1px solid #cbd5e1; color: var(--ink);
	border-radius: 14px; cursor: pointer;
	transition: all .12s;
}
.reg-chip-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
.reg-chip-btn.active {
	background: #fef3c7; border-color: #f59e0b; color: #78350f;
}
.reg-tool-divider {
	display: inline-block; width: 1px; height: 20px;
	background: #cbd5e1; margin: 0 4px;
}
.reg-chip-btn.reg-tool-btn {
	background: #f0f9ff; border-color: #7dd3fc; color: #075985;
}
.reg-chip-btn.reg-tool-btn:hover {
	background: #e0f2fe; border-color: #38bdf8;
}
.btn-mini {
	font-size: 11.5px; padding: 4px 9px; border: 1px solid #cbd5e1;
	background: #fff; border-radius: 4px; cursor: pointer; font-weight: 600;
}
.btn-mini:hover { background: #f8fafc; }
.dup-table th, .dup-table td, .xfer-table th, .xfer-table td, .vm-table th, .vm-table td {
	padding: 6px 8px; border-bottom: 1px solid #e2e8f0; text-align: left;
}
.dup-table tbody tr:hover, .xfer-table tbody tr:hover, .vm-table tbody tr:hover {
	background: #f8fafc;
}
.modal-head {
	display: flex; justify-content: space-between; align-items: center;
	padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.modal-close {
	background: none; border: 0; font-size: 18px; cursor: pointer; color: #64748b;
}
.modal-close:hover { color: #0f172a; }

/* ==========================================================================
 * Modern Home dashboard (FB Dave 2026-05-24) — QBO-inspired patterns, distinct
 * trade dress. Slate-blue primary, chester orange as secondary accent.
 * ========================================================================== */
.home-greeting {
	padding: 18px 24px 6px;
	background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
	border-bottom: 1px solid #e2e8f0;
}
.home-greeting h1 {
	margin: 0; font-size: 24px; font-weight: 700;
	color: #0f172a; letter-spacing: -.4px;
}
.home-greeting-date {
	font-size: 13px; color: #64748b; margin-top: 4px;
}
.home-cutoff-note {
	font-size: 11px; color: #94a3b8; margin-top: 4px;
}
.home-legacy-link {
	color: #1e40af; text-decoration: none; font-weight: 600;
}
.home-legacy-link:hover { text-decoration: underline; }
.home-canvas {
	padding: 18px 24px 28px;
	background: #fafbfc;
	max-width: 1600px;
}
.home-section { margin-bottom: 24px; }
.home-section:last-child { margin-bottom: 0; }
.home-sec-title {
	font-size: 13px; text-transform: uppercase; letter-spacing: .8px;
	font-weight: 700; color: #475569;
	margin: 0 0 10px;
}
.home-sec-title .home-sec-sub {
	font-size: 11px; text-transform: none; letter-spacing: 0;
	font-weight: 500; color: #94a3b8;
	margin-left: 8px;
}

/* KPI cards + charts (ported from kpi.html) */
.kpi-card-grid {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px; margin-bottom: 14px;
}
@media (max-width: 1100px) { .kpi-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-card {
	background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
	padding: 14px 16px;
	border-left: 3px solid #3b82f6;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.kpi-card-label {
	font-size: 11px; color: #64748b; text-transform: uppercase; letter-spacing: .5px;
}
.kpi-card-value {
	font-size: 22px; font-weight: 600; margin-top: 4px; color: #0f172a;
	line-height: 1.2;
}
.kpi-card-sub {
	font-size: 11px; color: #64748b; margin-top: 4px;
}
.kpi-chart-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 1100px) { .kpi-chart-grid { grid-template-columns: 1fr; } }
.kpi-panel {
	background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
	padding: 12px 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.kpi-panel-head {
	display: flex; justify-content: space-between; align-items: baseline;
	margin-bottom: 8px;
}
.kpi-panel-head h3 {
	margin: 0; font-size: 13px; color: #0f172a; font-weight: 600;
}
.kpi-panel-sub {
	font-size: 11px; color: #64748b;
}
.kpi-legend {
	display: flex; gap: 14px; font-size: 11px; color: #475569;
	margin-top: 6px; justify-content: center;
}
.kpi-legend-swatch {
	display: inline-block; width: 10px; height: 2px;
	vertical-align: middle; margin-right: 4px;
}
.kpi-table {
	width: 100%; border-collapse: collapse; font-size: 12px;
	background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
	overflow: hidden;
}
.kpi-table thead tr { background: #f1f5f9; text-align: left; }
.kpi-table th, .kpi-table td { padding: 6px 8px; border-bottom: 1px solid #e2e8f0; }
.kpi-table tr:last-child td { border-bottom: none; }
.kpi-table .num { text-align: right; }
.kpi-bar { background: #e2e8f0; border-radius: 3px; height: 8px; }
.kpi-bar > div { background: #3b82f6; height: 8px; border-radius: 3px; }

/* Work queue cards */
.home-queue-grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
@media (max-width: 1100px) { .home-queue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-queue-card {
	background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
	padding: 14px 16px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
	display: grid; grid-template-rows: auto auto auto auto auto;
	row-gap: 4px;
	border-top: 3px solid #94a3b8;
}
.home-queue-card.tone-warn    { border-top-color: #f59e0b; }
.home-queue-card.tone-info    { border-top-color: #3b82f6; }
.home-queue-card.tone-neutral { border-top-color: #64748b; }
.home-queue-card.tone-good    { border-top-color: #16a34a; }
.home-q-icon { font-size: 18px; line-height: 1; }
.home-q-count {
	font-size: 32px; font-weight: 800; line-height: 1.1;
	color: #0f172a; font-variant-numeric: tabular-nums;
	margin-top: 2px;
}
.home-q-label { font-size: 13px; font-weight: 600; color: #334155; }
.home-q-sub { font-size: 11px; color: #94a3b8; }
.home-q-action {
	margin-top: 6px; font-size: 12px; font-weight: 700;
	color: #1e40af; text-decoration: none; align-self: start;
	padding: 5px 10px; border-radius: 5px;
	background: #eff6ff; border: 1px solid #bfdbfe;
	transition: all .12s;
}
.home-q-action:hover { background: #dbeafe; border-color: #93c5fd; }
.home-q-action-empty { display: block; height: 1px; }

/* Bank tile grid */
.home-tile-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}
.home-tile {
	background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
	border-top: 3px solid #94a3b8;
	padding: 12px 14px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
	text-decoration: none; color: inherit;
	display: block;
	transition: box-shadow .12s, transform .12s;
}
.home-tile:hover {
	box-shadow: 0 4px 10px rgba(15, 23, 42, .08);
	transform: translateY(-1px);
}
.home-tile-name {
	font-size: 12px; font-weight: 600; color: #475569;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-tile-bal {
	font-size: 20px; font-weight: 700; margin-top: 4px;
	font-variant-numeric: tabular-nums;
}
.home-tile-recon {
	font-size: 11px; margin-top: 4px; font-weight: 600;
}
.home-tile-recon.tone-good { color: #16a34a; }
.home-tile-recon.tone-warn { color: #b45309; }

/* Recent activity (slim) */
.home-recent {
	width: 100%; border-collapse: collapse;
	background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
	overflow: hidden;
	font-size: 12.5px;
}
.home-recent thead th {
	background: #f8fafc; padding: 10px 12px;
	text-align: left; font-weight: 600; color: #475569;
	font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
	border-bottom: 1px solid #e2e8f0;
}
.home-recent th.num, .home-recent td.num { text-align: right; font-variant-numeric: tabular-nums; }
.home-recent tbody td {
	padding: 8px 12px;
	border-bottom: 1px solid #f1f5f9;
}
.home-recent tbody tr:last-child td { border-bottom: none; }
.home-recent tbody tr:hover { background: #f8fafc; }
.home-recent td.memo { color: #334155; }
.home-recent .src-pill {
	font-size: 10px; padding: 2px 6px; border-radius: 8px;
	background: #f1f5f9; color: #64748b; text-transform: uppercase;
	letter-spacing: .3px; font-weight: 600;
}
.home-recent td.empty { padding: 28px; text-align: center; color: #94a3b8; }

/* "MORE TOOLS" divider between primary + secondary sidebar sections (FB 2026-05-24) */
.lm-divider {
	padding: 14px 12px 4px;
	font-size: 10px; font-weight: 700; letter-spacing: 1px;
	color: #94a3b8; text-transform: uppercase;
	border-top: 1px solid #e2e8f0;
	margin-top: 8px;
}
.lm-divider:first-child { border-top: none; margin-top: 0; }

/* Categorize page (FB Dave 2026-05-24) */
.rev-head {
	padding: 16px 24px 8px;
	background: linear-gradient(180deg, #fef3c7 0%, #fffbeb 100%);
	border-bottom: 1px solid #fcd34d;
}
.rev-head h1 {
	margin: 0; font-size: 22px; font-weight: 700; color: #78350f;
	letter-spacing: -.3px;
}
.rev-head-sub {
	font-size: 13px; color: #92400e; margin-top: 4px;
}
.rev-headlink {
	color: #1e40af; text-decoration: none; font-weight: 600;
	padding: 2px 6px; border-radius: 4px;
}
.rev-headlink:hover { background: #dbeafe; }
.rev-headlink.active { background: #dbeafe; }

.rev-canvas {
	padding: 14px 24px 28px;
	background: #fafbfc;
}
.rev-chip-row {
	display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px;
}
.rev-year-chip {
	font-size: 12px; font-weight: 600; padding: 5px 12px;
	background: #fff; color: var(--ink);
	border: 1px solid #cbd5e1; border-radius: 6px;
	cursor: pointer; transition: all .12s;
}
.rev-year-chip b { color: #b45309; margin-left: 4px; }
.rev-year-chip:hover { background: #f1f5f9; border-color: #94a3b8; }
.rev-year-chip.active {
	background: #1e40af; color: #fff; border-color: #1e40af;
}
.rev-year-chip.active b { color: #fef3c7; }
.rev-year-chip.rev-year-old { background: #f8fafc; color: #64748b; }
.rev-year-chip.rev-year-old.active {
	background: #475569; color: #fff; border-color: #475569;
}
.rev-chip {
	font-size: 12px; padding: 5px 10px;
	background: #fff; color: var(--ink);
	border: 1px solid #cbd5e1; border-radius: 14px;
	text-decoration: none; transition: all .12s;
}
.rev-chip b { color: #b45309; margin-left: 4px; }
.rev-chip:hover { background: #f1f5f9; border-color: #94a3b8; }
.rev-chip.active {
	background: #1e40af; color: #fff; border-color: #1e40af;
}
.rev-chip.active b { color: #fef3c7; }

.rev-toolbar {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin: 8px 0 10px; padding: 8px 10px;
	background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
}
.rev-toolbar-left { display: flex; align-items: center; gap: 10px; flex: 1; }
.rev-filter-input {
	flex: 1; max-width: 460px;
	font-size: 13px; padding: 6px 10px;
	border: 1px solid #cbd5e1; border-radius: 5px;
	background: #fff;
}
.rev-filter-input:focus {
	outline: none; border-color: #0ea5e9;
	box-shadow: 0 0 0 2px #bae6fd;
}
.rev-count {
	font-size: 11px; font-weight: 600;
	padding: 2px 8px; border-radius: 10px;
	background: #f1f5f9; color: #475569;
}
.rev-bulk {
	display: flex; align-items: center; gap: 8px;
	padding: 4px 8px; background: #fef3c7; border: 1px solid #fcd34d;
	border-radius: 5px;
}
.rev-bulk-n { font-size: 12px; color: #92400e; }
.rev-bulk-n b { font-size: 13px; color: #78350f; }
.rev-bulk-target {
	font-size: 12px; padding: 4px 6px;
	border: 1px solid #cbd5e1; border-radius: 4px; background: #fff;
	max-width: 240px;
}
.rev-bulk-btn {
	font-size: 12px; font-weight: 600; padding: 5px 12px;
	background: #16a34a; border: 1px solid #15803d; color: #fff;
	border-radius: 4px; cursor: pointer;
}
.rev-bulk-btn:hover { background: #15803d; }
.rev-bulk-btn:disabled { background: #94a3b8; cursor: not-allowed; }
.rev-bulk-clear {
	font-size: 12px; padding: 5px 10px;
	background: #fff; border: 1px solid #cbd5e1; color: var(--ink);
	border-radius: 4px; cursor: pointer;
}
.rev-bulk-clear:hover { background: #f1f5f9; }

.rev-table {
	width: 100%; border-collapse: collapse;
	background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
	overflow: hidden;
	font-size: 12.5px;
}
.rev-table thead th {
	background: #f8fafc; padding: 8px 10px;
	text-align: left; font-weight: 600; color: #475569;
	font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
	border-bottom: 1px solid #e2e8f0;
	position: sticky; top: 0; z-index: 2;
}
.rev-table th.num, .rev-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.rev-table tbody td {
	padding: 7px 10px;
	border-bottom: 1px solid #f1f5f9;
}
.rev-table tbody tr.rev-row:hover {
	background: #eff6ff; cursor: pointer;
}
.rev-table th.rev-sel-th, .rev-table td.rev-sel-cell {
	width: 28px; padding: 6px; text-align: center;
}
.rev-table .rev-acct { color: #475569; font-weight: 500; }
.rev-table .rev-vendor-chip {
	font-size: 11px; padding: 1px 6px; border-radius: 8px;
	background: #ede9fe; color: #6d28d9; font-weight: 600;
}
.rev-table td.num.pos { color: #047857; }
.rev-table td.num.neg { color: #b91c1c; }
.rev-table td.empty { padding: 28px; text-align: center; color: #94a3b8; }

/* Payroll Check detail panel (FB Dave 2026-05-24) — inline row expansion */
.pay-detail { font-size: 13px; color: #0f172a; }
.pay-head {
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: 12px; border-bottom: 1px solid #e2e8f0; margin-bottom: 14px;
}
.pay-emp { font-size: 18px; font-weight: 700; color: #0f172a; }
.pay-meta { font-size: 12px; color: #64748b; margin-top: 2px; }
.pay-close {
	font-size: 12px; padding: 5px 10px;
	background: #fff; border: 1px solid #cbd5e1; color: #475569;
	border-radius: 5px; cursor: pointer;
}
.pay-close:hover { background: #f1f5f9; }
.pay-grid {
	display: grid; grid-template-columns: 1fr 1fr 1fr;
	gap: 14px; margin-bottom: 12px;
}
@media (max-width: 1000px) { .pay-grid { grid-template-columns: 1fr; } }
.pay-col {
	background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
	padding: 10px 12px;
}
.pay-col-net {
	background: linear-gradient(180deg, #ecfdf5 0%, #fff 100%);
	border-color: #86efac;
}
.pay-section-title {
	font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
	font-weight: 700; color: #475569; margin-bottom: 6px;
}
.pay-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pay-table td, .pay-table th { padding: 5px 4px; }
.pay-table thead th {
	font-size: 10px; text-transform: uppercase; color: #94a3b8;
	border-bottom: 1px solid #e2e8f0; text-align: left;
}
.pay-table th.pay-num, .pay-table td.pay-num { text-align: right; font-variant-numeric: tabular-nums; }
.pay-lbl { color: #334155; }
.pay-pos { color: #047857; font-weight: 600; }
.pay-subtotal td { padding-top: 7px; border-top: 1px solid #e2e8f0; font-size: 13px; }
.pay-empty { color: #94a3b8; padding: 12px; text-align: center; font-style: italic; }
.pay-net-amount {
	font-size: 32px; font-weight: 800; color: #047857;
	font-variant-numeric: tabular-nums; line-height: 1; margin: 6px 0 8px;
}
.pay-net-from { font-size: 12px; color: #475569; }
.pay-net-flow {
	margin-top: 10px; padding-top: 8px; border-top: 1px dashed #86efac;
	font-size: 11px; color: #64748b;
}
.pay-net-formula {
	margin-top: 4px; font-weight: 600; color: #334155;
	font-variant-numeric: tabular-nums;
}
.pay-other { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; }
.pay-raw { margin-top: 8px; }
.pay-raw summary {
	cursor: pointer; font-size: 11px; color: #64748b;
	padding: 4px 0; user-select: none;
}
.pay-raw summary:hover { color: #334155; }

/* Profit First Account Map — CSS Grid layout (FB Dave 2026-05-24) */
.pf-canvas { padding: 12px 18px; background: #fafbfc; }
.pf-grid-table {
	background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
	overflow: hidden; font-size: 12.5px;
}
/* Grid: 100px date · 5 × 130px amount columns · description fills rest */
.pf-grid-row {
	display: grid;
	grid-template-columns: 100px 130px 130px 130px 130px 130px minmax(200px, 1fr);
	align-items: center;
	border-bottom: 1px solid #f1f5f9;
}
.pf-grid-row.pf-grid-head {
	background: #f8fafc;
	border-bottom: 3px solid #94a3b8;
	position: sticky; top: 0; z-index: 2;
}
.pf-grid-row.pf-grid-head .pf-cell {
	padding: 10px 8px;
	font-size: 11px; font-weight: 700; color: #475569;
	text-transform: uppercase; letter-spacing: .5px;
}
.pf-grid-row.pf-grid-head .pf-col-head {
	text-align: right; padding-right: 14px;
	border-bottom: 3px solid #94a3b8;  /* override w/ inline color per col */
	margin-bottom: -3px;
}
.pf-grid-row.pf-grid-foot {
	background: #f8fafc;
	border-top: 2px solid #cbd5e1; font-weight: 700;
}
.pf-grid-row.pf-grid-foot .pf-cell { padding: 10px 8px; }
.pf-grid-row[data-tx]:hover { background: #eff6ff; cursor: pointer; }
.pf-grid-row[data-tx].pf-grid-row-xfer { background: #fef3c7; }
.pf-grid-row[data-tx].pf-grid-row-xfer:hover { background: #fde68a; }
.pf-cell {
	padding: 7px 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pf-cell.pf-amt {
	text-align: right; font-variant-numeric: tabular-nums;
	padding-right: 14px;
}
.pf-cell.pf-date { color: #64748b; font-size: 11px; font-weight: 600; }
.pf-cell.pf-desc {
	color: #334155; font-size: 11.5px;
	border-left: 1px solid #e2e8f0;
}
.pf-xfer-chip {
	display: inline-block; font-size: 10px; font-weight: 700;
	padding: 1px 6px; border-radius: 8px;
	background: #f59e0b; color: #fff;
	margin-right: 6px; white-space: nowrap;
}
.pf-uncat-chip {
	display: inline-block; font-size: 10px; font-weight: 700;
	padding: 1px 6px; border-radius: 8px;
	background: #dc2626; color: #fff;
	margin-right: 6px; white-space: nowrap;
}
.pf-contra-tag {
	display: inline-block; font-size: 11px; font-weight: 600;
	padding: 1px 6px; border-radius: 4px;
	background: #ede9fe; color: #6d28d9;
	margin-right: 6px; white-space: nowrap;
}
/* Uncategorized rows: red left edge (overrides xfer amber when both apply) */
.pf-grid-row[data-tx].pf-grid-row-uncat {
	background: #fef2f2;
	border-left: 4px solid #dc2626;
	padding-left: 0;  /* compensate for border */
}
.pf-grid-row[data-tx].pf-grid-row-uncat:hover { background: #fee2e2; }
.pf-grid-row[data-tx].pf-grid-row-uncat.pf-grid-row-xfer {
	/* both flagged — red wins */
	background: #fef2f2;
}
.pf-cell.pf-total { font-size: 13px; }

/* Find PF Match button + popover (FB Dave 2026-05-24) */
.pf-match-btn {
	display: inline-block; font-size: 10px; font-weight: 600;
	padding: 1px 8px; border-radius: 8px;
	background: #1e40af; color: #fff;
	border: 0; cursor: pointer;
	margin-right: 6px; white-space: nowrap;
}
.pf-match-btn:hover { background: #1e3a8a; }
.pf-match-pop {
	position: absolute; z-index: 1000;
	width: 360px; max-height: 400px; overflow-y: auto;
	background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0,0,0,.15);
	font-size: 12px;
}
.pf-pop-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 12px; background: #f8fafc;
	border-bottom: 1px solid #e2e8f0;
}
.pf-pop-head b { font-size: 13px; }
.pf-pop-close {
	background: transparent; border: 0; cursor: pointer;
	font-size: 14px; color: #64748b;
}
.pf-pop-body { padding: 4px; }
.pf-pop-row {
	padding: 8px 10px; border-bottom: 1px solid #f1f5f9;
}
.pf-pop-row:last-child { border-bottom: none; }
.pf-pop-line1 {
	display: flex; justify-content: space-between;
	margin-bottom: 2px;
}
.pf-pop-acct { font-weight: 600; color: #1e40af; font-size: 12px; }
.pf-pop-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-pop-line2 { color: #64748b; font-size: 11px; margin-bottom: 6px; }
.pf-pop-merge {
	font-size: 11px; font-weight: 600;
	padding: 4px 10px; border-radius: 4px;
	background: #16a34a; color: #fff; border: 0; cursor: pointer;
}
.pf-pop-merge:hover { background: #15803d; }
.pf-pop-merge:disabled { background: #94a3b8; cursor: not-allowed; }

/* Loan health rollup (FB Dave 2026-05-24) */
.loan-rollup {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px; margin-bottom: 14px;
}
@media (max-width: 900px) { .loan-rollup { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.loan-rollup-card {
	background: #fff; border: 1px solid #e2e8f0; border-radius: 6px;
	padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.loan-rollup-lbl {
	font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
	color: #64748b; font-weight: 600;
}
.loan-rollup-val {
	font-size: 20px; font-weight: 700; margin-top: 4px;
	font-variant-numeric: tabular-nums; color: #0f172a;
}
.loans-table { font-size: 12.5px; }
.loans-table thead th { padding: 8px 10px; font-size: 11px; }
.loans-table tbody td { padding: 8px 10px; }
.loans-table tbody tr.loan-row:hover { background: #eff6ff; }

/* Sidebar sub-headers within a section (FB Dave 2026-05-24) */
.lm-section ul li.lm-subhead {
	list-style: none;
	font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
	color: #64748b; font-weight: 700;
	padding: 8px 8px 3px;
	margin-top: 4px;
	border-top: 1px solid #e2e8f0;
	cursor: default;
	background: transparent !important;
}
.lm-section ul li.lm-subhead:first-child { border-top: none; margin-top: 0; }
.lm-section ul li.lm-subhead:hover { background: transparent !important; }

/* Accordion sections — used on the loan detail page (and any other acct
 * subpage that wants collapsible blocks for narrower screens). */
.acct-section { margin-top: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); }
.acct-section + .acct-section { margin-top: 8px; }
.acct-sec-head {
	display: flex; align-items: center; gap: 6px;
	padding: 6px 10px; cursor: pointer; user-select: none;
	font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
	color: var(--ink-dim); font-weight: 600; background: var(--bg-alt);
	border-bottom: 1px solid var(--line);
}
.acct-sec-head:hover { background: var(--brand-soft-2, #eef2ff); }
.acct-sec-head .chev { font-size: 10px; color: var(--ink-dim); width: 12px; display: inline-block; }
.acct-sec-body { padding: 8px 10px; }
.acct-section.collapsed .acct-sec-body { display: none; }
.acct-section.collapsed .acct-sec-head { border-bottom: 0; }
/* When the cards section is inside an accordion, drop its own bottom margin
 * so the section padding governs spacing. */
.acct-section .acct-cards { margin-bottom: 0; }
.suspect-grp { margin-bottom: 10px; }
.suspect-grp .suspect-head {
	padding: 4px 8px; font-size: 12px; color: var(--ink);
	background: var(--bg-soft, #f8fafc); margin-bottom: 4px;
}
.acct-h3 {
	font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
	color: var(--ink-dim); font-weight: 600; margin: 8px 0;
}

.acct-table {
	width: 100%; border-collapse: collapse; background: var(--bg);
	border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
	font-size: 12.5px;
}
.acct-table th {
	background: var(--bg-alt); text-align: left;
	padding: 7px 10px; font-size: 11px; color: var(--ink-dim);
	text-transform: uppercase; letter-spacing: .3px;
	border-bottom: 1px solid var(--line); font-weight: 600;
}
.acct-table th.num, .acct-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.acct-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); }
.acct-table.compact td, .acct-table.compact th { padding: 5px 8px; font-size: 12px; }
.acct-table tbody tr:hover td { background: var(--brand-soft-2); }
.acct-table tr.grp-head td { padding-top: 8px; padding-bottom: 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.acct-table tr.grp-head:hover td { background: inherit; }
.acct-table code {
	font-family: "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
	font-size: 11.5px; color: var(--brand-ink);
	background: var(--brand-soft); padding: 1px 5px; border-radius: 3px;
}
.acct-table .pos { color: #166534; }
.acct-table .neg { color: #b91c1c; }

.type-pill {
	font-size: 10.5px; font-weight: 600; padding: 1px 7px;
	border-radius: 8px; line-height: 1.5;
}

.src {
	font-size: 10.5px; padding: 1px 6px; border-radius: 8px;
	font-variant-numeric: tabular-nums;
}
.src.src-wh { background: #dbeafe; color: #1e3a8a; }
.src.src-mn { background: #fef3c7; color: #92400e; }

/* Mode chip in the sidebar bottom */
.acct-mode { padding: 8px; }
.mode-chip {
	font-size: 10.5px; padding: 6px 8px; border-radius: 4px;
	border: 1px solid var(--line); background: var(--bg);
	color: var(--ink-dim); line-height: 1.4;
}
.mode-chip.live { background: #dcfce7; color: #166534; border-color: #86efac; font-weight: 600; }
.mode-chip.stub { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

/* Period view card */
.acct-period {
	background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
	padding: 16px 20px; max-width: 540px;
}
.acct-period .kv {
	display: flex; justify-content: space-between; padding: 8px 0;
	border-bottom: 1px solid var(--line-soft);
}
.acct-period .kv:last-of-type { border-bottom: 0; }
.acct-period .lbl { color: var(--ink-dim); font-size: 11.5px; }
.acct-period .val { font-weight: 600; }
.acct-period .acct-actions { display: flex; gap: 8px; margin-top: 16px; }

/* Coming-soon panel for Reconciliation stub */
.acct-coming {
	background: var(--bg); border: 1px dashed var(--line); border-radius: 4px;
	padding: 32px; text-align: center; max-width: 620px; margin: 24px auto;
}
.acct-coming .big { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.acct-coming .sub { font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; }

/* JE detail dialog */
.je-dlg { display: flex; flex-direction: column; min-height: 300px; }
.je-title {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 14px; background: var(--brand); color: #fff;
	font-size: 14px; font-weight: 600;
}
.je-title .x {
	margin-left: auto; background: transparent; border: 0;
	color: #fff; font-size: 16px; cursor: pointer; padding: 4px 8px;
}
.je-body { padding: 12px 16px; flex: 1; overflow: auto; }
.je-meta {
	display: flex; gap: 24px; margin-bottom: 8px;
	padding-bottom: 8px; border-bottom: 1px solid var(--line);
	font-size: 12px;
}
.je-meta .lbl { color: var(--ink-dim); margin-right: 4px; }
.je-memo { font-size: 13px; margin-bottom: 12px; color: var(--ink); }
.je-foot {
	padding: 10px 14px; background: var(--bg-alt);
	border-top: 1px solid var(--line);
	display: flex; justify-content: flex-end; gap: 8px;
}

/* Account Register — GnuCash-style ledger with inline entry row */
.register-table { font-size: 12px; }
.register-table tr.reg-hist { cursor: pointer; }
.register-table tr.reg-hist:hover td { background: var(--brand-soft-2); }
.register-table tr.reg-empty td { text-align: center; color: var(--ink-dim); padding: 24px; font-style: italic; }
.register-table tfoot tr.reg-new td {
	background: #fefce8; border-top: 2px solid #fcd34d;
	padding: 4px 6px; vertical-align: middle;
}
.register-table tfoot tr.reg-new td:first-child { border-left: 3px solid #f59e0b; }
.register-table tr.reg-editing td {
	background: #eff6ff; padding: 4px 6px; vertical-align: middle;
	border-top: 1px solid #93c5fd; border-bottom: 1px solid #93c5fd;
}
.register-table tr.reg-editing td:first-child { border-left: 3px solid #2563eb; }
.register-table input.reg-in {
	width: 100%; box-sizing: border-box;
	border: 1px solid var(--line); background: var(--bg);
	padding: 4px 6px; font-size: 12px; font-family: inherit;
	border-radius: 3px; color: var(--ink);
}
.register-table input.reg-in:focus {
	outline: none; border-color: var(--brand);
	box-shadow: 0 0 0 2px var(--brand-soft);
}
.register-table input.reg-in.num { text-align: right; font-variant-numeric: tabular-nums; }
.register-table input[type="number"].reg-in::-webkit-outer-spin-button,
.register-table input[type="number"].reg-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Autocomplete dropdown — FB Dave 2026-05-24 switched to position:fixed so
 * it escapes the table's overflow clipping. JS sets top/left on show. */
.reg-ac {
	position: fixed; z-index: 9999;
	max-height: 240px; overflow-y: auto;
	min-width: 240px;
	background: var(--bg); border: 1px solid var(--line);
	border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,.12);
	margin-top: 2px;
}
.reg-ac-item {
	padding: 6px 10px; font-size: 12px; cursor: pointer;
	border-bottom: 1px solid var(--line-soft); color: var(--ink);
}
.reg-ac-item:last-child { border-bottom: 0; }
.reg-ac-item.on,
.reg-ac-item:hover { background: var(--brand-soft); }

#reg-back:hover { color: var(--brand) !important; text-decoration: underline !important; }

/* ---- Reconciliation panel ---- */
.recon-form {
	border: 1px solid var(--line); border-radius: 6px;
	background: var(--bg-soft); padding: 12px 14px; margin-bottom: 12px;
}
.recon-row {
	display: flex; flex-wrap: wrap; gap: 14px 18px;
	align-items: center; margin-bottom: 8px;
}
.recon-row:last-child { margin-bottom: 0; }
.recon-row label {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 12px; color: var(--ink-soft);
}
.recon-row label input[type="date"],
.recon-row label input[type="number"],
.recon-row label input[type="text"] {
	border: 1px solid var(--line); background: var(--bg);
	padding: 4px 6px; font-size: 12px; font-family: inherit;
	border-radius: 3px; color: var(--ink);
}
.recon-row label input:focus {
	outline: none; border-color: var(--brand);
	box-shadow: 0 0 0 2px var(--brand-soft);
}
.recon-row .sep {
	width: 1px; align-self: stretch; background: var(--line);
}
.recon-table { width: 100%; }
.recon-table th, .recon-table td { font-size: 12px; }
.recon-table tr.rec-fuzzy td {
	color: var(--ink-soft); background: var(--bg-soft);
	font-style: italic;
}
.recon-table tr.rec-fuzzy td:first-child { border-left: 3px solid #cbd5e1; }
.recon-table tr:not(.rec-fuzzy) td:first-child { border-left: 3px solid transparent; }
.recon-table input.rec-check { cursor: pointer; transform: scale(1.1); }
.recon-table .rec-date-cell { cursor: pointer; border-bottom: 1px dotted var(--line); }
.recon-table .rec-date-cell:hover { background: var(--brand-soft); color: var(--brand); }
.recon-foot {
	margin-top: 14px; padding: 12px 14px;
	border: 1px solid var(--line); border-radius: 6px;
	background: var(--bg-soft);
}
.recon-summary { display: grid; gap: 4px; }
.rs-line {
	display: flex; justify-content: space-between;
	padding: 3px 0; font-size: 12px;
}
.rs-line.rs-sub { border-top: 1px dashed var(--line-soft); padding-top: 6px; }
.rs-line .num { font-variant-numeric: tabular-nums; }
.rs-diff {
	margin-top: 6px; padding: 6px 8px; border-radius: 4px;
	font-weight: 600;
}
.rs-diff.ok { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.rs-diff.warn { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.rs-line.rs-mismatch { color: #b91c1c; }
.rs-line.rs-mismatch .num { font-weight: 600; }
.recon-actions {
	display: flex; gap: 10px; justify-content: flex-end;
	margin-top: 12px; padding-top: 10px;
	border-top: 1px solid var(--line-soft);
}
.recon-actions button[disabled] { opacity: .5; cursor: not-allowed; }

/* Service picker rebuild (FB 2026-04-27_131017) — sticky-open multi-select with
 * a left category rail. Wider modal so the rail + service list both breathe. */
.sp-picker { display: flex; flex-direction: column; min-height: 0; flex: 1; height: 75vh; min-width: 880px; }
.sp-body { display: grid; grid-template-columns: 240px 1fr; gap: 0; flex: 1; min-height: 0; }
.sp-rail { background: var(--bg-alt); border-right: 1px solid var(--line); overflow: auto; padding: 6px; font-size: 12px; }
.sp-rail .sp-dep { margin-bottom: 4px; }
.sp-rail .sp-dep-h { display: flex; align-items: center; gap: 4px; padding: 4px 8px; cursor: pointer;
    color: var(--ink); font-weight: 600; user-select: none; border-radius: 4px; }
.sp-rail .sp-dep-h:hover { background: var(--brand-soft-2, #eef2ff); }
.sp-rail .sp-dep.open .sp-dep-h { background: #e0e7ff; color: #4338ca; }
.sp-rail .sp-dep-h .chev { font-size: 10px; color: var(--ink-dim); width: 12px; }
.sp-rail .sp-dep-h .sp-dep-n { margin-left: auto; font-size: 10px; color: var(--ink-dim); font-weight: 500; }
.sp-rail .sp-cat-list { list-style: none; margin: 0 0 0 16px; padding: 0; }
.sp-rail .sp-cat { display: flex; align-items: center; padding: 3px 8px; cursor: pointer; border-radius: 3px; color: var(--ink-mid); font-size: 11.5px; }
.sp-rail .sp-cat:hover { background: rgba(0,0,0,.04); }
.sp-rail .sp-cat.active { background: #fef3c7; color: #78350f; font-weight: 600; }
.sp-rail .sp-cat .sp-cat-n { margin-left: auto; font-size: 10px; color: var(--ink-dim); }
.sp-main { display: flex; flex-direction: column; min-height: 0; }
.sp-search { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.sp-search input { width: 100%; padding: 6px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 4px; }
.sp-list { flex: 1; overflow: auto; }
.sp-list .sp-empty { padding: 32px; text-align: center; color: var(--ink-dim); font-style: italic; }
.sp-svc-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.sp-svc-row { cursor: pointer; }
.sp-svc-row:hover { background: var(--brand-soft-2, #eef2ff); }
.sp-svc-row.picked { background: #ecfdf5; }
.sp-svc-row.picked:hover { background: #d1fae5; }
.sp-svc-row td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); }
.sp-svc-row .sp-pick { width: 28px; text-align: center; }
.sp-svc-row .sp-svc-cat { color: var(--ink-mid); font-size: 11px; max-width: 140px; }
.sp-svc-row .sp-svc-name { color: var(--ink); font-weight: 500; }
.sp-foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg-alt); }

/* Per-cell collapsible foot-grid items (FB 2026-04-27_142200) — each of
 * Notes / Memo / Job Totals has its own ▾ header click-toggle. */
.foot-grid .rail-cell.collapsible { display: flex; flex-direction: column; }
.foot-grid .rail-cell.collapsible > .rail-head {
	display: flex; align-items: center; gap: 6px;
	padding: 4px 8px; cursor: pointer; user-select: none;
	font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
	color: var(--ink-dim); font-weight: 600;
	background: var(--bg-alt); border-bottom: 1px solid var(--line-soft);
}
.foot-grid .rail-cell.collapsible > .rail-head:hover { background: var(--brand-soft-2, #eef2ff); }
.foot-grid .rail-cell.collapsible > .rail-head .chev { font-size: 10px; width: 10px; }
.foot-grid .rail-cell.collapsible > .rail-body { flex: 1; padding: 6px 8px; }
.foot-grid .rail-cell.collapsible.collapsed > .rail-body { display: none; }
.foot-grid .rail-cell.rail-finance .totals-table { width: 100%; font-size: 11.5px; }
.foot-grid .rail-cell.rail-finance .totals-table td { padding: 1px 0; }
.foot-grid .rail-cell.rail-finance .totals-table .v { text-align: right; font-variant-numeric: tabular-nums; }
.foot-grid .rail-cell.rail-finance .totals-table .grand .v,
.foot-grid .rail-cell.rail-finance .totals-table .balance .v { font-weight: 700; font-size: 13px; }
.foot-grid .rail-cell.rail-finance .rail-finance-bot { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 4px; }

/* Instance banner — top strip rendered on dash.inkspotnd.com (staging) and any
   non-prod host (localhost / LAN). Never appears on erp.inkspotnd.com. Pushes the
   rest of the chrome down by its own height via body.instance-* margin. */
.instance-banner {
	position: fixed; top: 0; left: 0; right: 0; height: 28px; z-index: 9999;
	display: flex; align-items: center; gap: 12px; padding: 0 14px;
	font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	color: #1f2937; letter-spacing: 0.2px;
	border-bottom: 1px solid rgba(0,0,0,0.18);
	box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 2px 6px rgba(0,0,0,0.12);
	user-select: none; pointer-events: none;
}
.instance-banner .ib-tag { font-weight: 800; font-size: 11px; letter-spacing: 0.6px; padding: 2px 8px; border-radius: 3px; background: rgba(0,0,0,0.18); color: #fff; }
.instance-banner .ib-sub { opacity: 0.9; font-weight: 500; }
.instance-banner .ib-host { margin-left: auto; opacity: 0.75; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-weight: 500; font-size: 11px; }
.instance-banner-dash  { background: linear-gradient(180deg, #fb923c 0%, #f97316 100%); }
.instance-banner-local { background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%); color: #f8fafc; }
/* FB 2026-05-11 — when a modal is open the dev banner must yield. Previously
   the banner's z-index:9999 sat ON TOP of full-screen modals, clipping the
   modal's own toolbar header. Drop it below the backdrop's z-index when any
   modal is on the page. */
body:has(.modal-backdrop) .instance-banner { z-index: 50; }
.instance-banner-local .ib-tag { background: rgba(255,255,255,0.2); }

body.instance-dash, body.instance-local { padding-top: 28px; }
/* When the instance banner adds 28px of top padding, the .window's 100vh
   overflows by 28px and the bottom statusbar gets clipped. Cap the window
   height so the bottom row stays in-frame. */
body.instance-dash  .window,
body.instance-local .window { height: calc(100vh - 28px); }
/* Subtle accent on the dash chrome so it never feels "the same" as erp. */
body.instance-dash .titlebar { box-shadow: inset 0 -2px 0 #f97316; }
body.instance-local .titlebar { box-shadow: inset 0 -2px 0 #64748b; }
body.instance-dash::before {
	content: ""; position: fixed; top: 28px; left: 0; right: 0; height: 2px;
	background: repeating-linear-gradient(45deg, #f97316 0 8px, transparent 8px 16px);
	z-index: 9998; pointer-events: none;
}