/**
 * NorthPathOS · Component styles — THE SINGLE SOURCE OF TRUTH FOR LOOK
 *
 * ════════════════════════════════════════════════════════════════════
 *   STOP. READ AGENTS.md → MODULAR ARCHITECTURE LAW BEFORE EDITING.
 * ════════════════════════════════════════════════════════════════════
 *
 * Every reusable component (.filter-tab, .stat-card, .section-card,
 * .product-table, .smart-btn, .badge, .contact-avatar, etc.) lives in
 * THIS FILE and only this file. Per-module forks are forbidden.
 *
 * Light + dark mode rules colocate per component in the same block so
 * the maintainer sees them together. No separate dark.css.
 *
 * If you find yourself writing `<style>` blocks inside a module or
 * inline `style="background:..."` on a card/pill/badge, STOP, add the
 * rule HERE, and use the class in your module.
 *
 * Loaded by index.html via <link rel="stylesheet" href="lib/components.css">
 * (wired 2026-05-30 after being orphaned for weeks).
 *
 * Companion: lib/ui-components.js exposes NPOS.ui.* render helpers that
 * generate HTML matching these classes — modules call NPOS.ui.filterTabs()
 * instead of hand-rolling the HTML.
 */

* , *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
/* 2026-06-11 (operator-flagged · white-flash on overscroll): html had NO
   background, so rubber-band/overscroll past <body> revealed the browser's
   default white. SOP: paint html + body with the SAME themed page token so the
   background is continuous across the whole structure, and lock overscroll so
   there is no white gutter to reveal. --g50 is remapped per-theme (dark→#0d1829),
   so this stays correct on light/dark/premium without per-theme edits. */
html { scroll-behavior:smooth; background:var(--g50); overscroll-behavior:none; min-height:100% }
body { font-family:var(--font); background:var(--g50); color:var(--black); line-height:1.5; overscroll-behavior:none; min-height:100vh }
a { color:inherit; text-decoration:none }
button { cursor:pointer; font-family:var(--font) }
input, select, textarea { font-family:var(--font) }

/* ── Stat cards — UI-FIX-001: flex column + min-height so .stat-sub aligns ── */
.stats-row {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:1rem; margin-bottom:1.75rem;
}
.stat-card {
  background:var(--surface,var(--white));
  border:1px solid var(--border,var(--g200));
  border-radius:var(--r-lg); padding:1rem 1.25rem;
  min-width:0; overflow:hidden;
  display:flex; flex-direction:column; min-height:110px;
}
.stat-label {
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted,var(--g400));
  margin-bottom:.45rem; min-height:2.2em;
  display:flex; align-items:flex-start; line-height:1.15;
}
.stat-value {
  font-size:1.55rem; font-weight:900; line-height:1;
  word-break:break-word; overflow-wrap:anywhere;
  color:var(--text,var(--black));
}
.stat-sub {
  font-size:.73rem; color:var(--muted-strong,var(--g600));
  margin-top:auto; padding-top:.5rem;
}
.stat-good { color:var(--green) }
.stat-warn { color:var(--amber) }
.stat-bad  { color:var(--red) }

/* ── Topbar icon buttons (lang, theme, all-apps) ── */
.topbar-icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0;
  border-radius:8px;
  color:var(--g600); background:transparent; border:1px solid transparent;
}
.topbar-icon-btn:hover { background:var(--g100); color:var(--g800) }
.topbar-icon-btn #lang-toggle-label { font-size:.72rem; font-weight:800; letter-spacing:.04em }

/* ── All-apps modal grid ── */
.all-apps-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:.75rem; padding:.5rem;
}
.all-apps-tile {
  background:var(--g50,transparent);
  border:1px solid var(--g200); border-radius:10px;
  padding:.9rem .6rem; text-align:center; cursor:pointer;
  transition:transform .12s,border-color .12s,background .12s;
}
.all-apps-tile:hover { transform:translateY(-2px); border-color:var(--blue); background:var(--blue-light) }
.all-apps-tile .icon { font-size:1.5rem; line-height:1; margin-bottom:.35rem }
.all-apps-tile .label { font-size:.78rem; font-weight:600; color:var(--g700) }

/* ── Vertical pills (dashboard filter row, replaces sidebar Verticals) ── */
.vertical-pills { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem }
.vertical-pill {
  padding:.35rem .85rem; border-radius:99px;
  font-size:.78rem; font-weight:600;
  background:var(--g100); border:1px solid var(--g200); color:var(--g700);
  cursor:pointer;
}
.vertical-pill:hover { background:var(--g200) }
.vertical-pill.active { background:var(--blue); border-color:var(--blue); color:#fff }

/* ── Section card ── */
.section-card {
  background:var(--white); border:1px solid var(--g200);
  border-radius:var(--r-lg); overflow:hidden; margin-bottom:1.5rem;
}
.section-card-head {
  padding:.85rem 1.25rem; border-bottom:1px solid var(--g100);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem; cursor:pointer; user-select:none;
}
.section-card-head:hover { background:var(--g50) }
.section-card-title { font-size:.9rem; font-weight:800; display:flex; align-items:center; gap:.5rem }
.section-card-title::after { content:'▾'; font-size:.75rem; color:var(--g400); transition:transform .15s }
.section-card.collapsed .section-card-title::after { content:'▸' }
.section-card-body { padding:1.25rem }
.section-card.collapsed .section-card-body { display:none }
.clinical-preview {
  background:var(--g50); border:1px solid var(--g200); border-radius:var(--r);
  padding:1rem; font-size:.83rem; line-height:1.6; min-height:4rem; color:var(--g800);
}

/* ── Buttons ── */
.btn {
  padding:.55rem 1rem; border-radius:9px;
  font-size:.84rem; font-weight:600;
  border:1px solid transparent; transition:all .12s;
  display:inline-flex; align-items:center; gap:.4rem;
  cursor:pointer; white-space:nowrap;
}
.btn-primary { background:var(--blue);  color:#fff; border-color:var(--blue) }
.btn-primary:hover { background:var(--blueH); border-color:var(--blueH) }
.btn-green   { background:var(--green); color:#fff; border-color:var(--green) }
.btn-green:hover { background:#15803d }
.btn-amber   { background:var(--amber); color:#fff; border-color:var(--amber) }
.btn-blue    { background:#2563eb; color:#fff; border-color:#2563eb }
.btn-danger  { background:var(--red);   color:#fff; border-color:var(--red) }
.btn-ghost   { background:var(--white); color:var(--g700); border-color:var(--g200) }
.btn-ghost:hover { background:var(--g50) }
.btn-secondary { background:var(--g100); color:var(--g700); border-color:var(--g200) }
.btn-secondary:hover { background:var(--g200) }
.btn-sm { padding:.3rem .65rem; font-size:.76rem; border-radius:7px }

/* ── Tabs ── */
.tab-bar { display:flex; gap:.3rem; flex-wrap:wrap }
.tab-btn {
  padding:.35rem .8rem; border-radius:99px;
  font-size:.78rem; font-weight:600;
  border:1px solid var(--g200); background:var(--white); color:var(--g600);
  cursor:pointer; transition:all .12s;
  display:flex; align-items:center; gap:.4rem;
}
.tab-btn:hover { border-color:var(--blue); color:var(--blue) }
.tab-btn.active { background:var(--blue); color:#fff; border-color:var(--blue) }
.tab-count {
  background:rgba(255,255,255,.25); color:inherit;
  font-size:.65rem; padding:.05rem .35rem; border-radius:99px; font-weight:800;
}
.tab-btn:not(.active) .tab-count { background:var(--g100); color:var(--g600) }

/* 2026-05-30 — Filter tab pills, identical visual style to .tab-btn so
   every module (contacts, invoices, todos, pm, crm, agenda, intake,
   visits, employees, annotations) renders pills the same as catalog.
   Operator screenshot: "the same pills to be populated across the entire
   app". Implemented as .filter-tab / .filter-tabs containers + a tab-count
   reuse via .tab-count rules above. */
.filter-tabs { display:flex; gap:.3rem; flex-wrap:wrap; margin-bottom:1rem }
.filter-tab {
  padding:.35rem .8rem; border-radius:99px;
  font-size:.78rem; font-weight:600;
  border:1px solid var(--g200); background:var(--white); color:var(--g600);
  cursor:pointer; transition:all .12s;
  display:inline-flex; align-items:center; gap:.4rem;
  text-decoration:none;
}
.filter-tab:hover { border-color:var(--blue); color:var(--blue) }
.filter-tab.active { background:var(--blue); color:#fff; border-color:var(--blue) }
.filter-tab .tab-count {
  background:rgba(255,255,255,.25); color:inherit;
  font-size:.65rem; padding:.05rem .35rem; border-radius:99px; font-weight:800;
}
.filter-tab:not(.active) .tab-count { background:var(--g100); color:var(--g600) }

/* 2026-05-30 — dark-mode rules colocated with the component, no longer
   scattered between dark.css and the monolith. Every component below has
   its dark-mode override IN the same section so future maintainers see
   light + dark together. */
body[data-theme="dark"] .filter-tab,
body[data-theme="dark"] .tab-btn {
  background:var(--surface-2); border-color:var(--border); color:var(--text);
}
body[data-theme="dark"] .filter-tab:hover,
body[data-theme="dark"] .tab-btn:hover {
  background:var(--surface); border-color:var(--blue); color:var(--blue);
}
body[data-theme="dark"] .filter-tab.active,
body[data-theme="dark"] .tab-btn.active {
  background:var(--blue); color:#fff; border-color:var(--blue);
}
body[data-theme="dark"] .filter-tab:not(.active) .tab-count,
body[data-theme="dark"] .tab-btn:not(.active) .tab-count {
  background:var(--surface); color:var(--muted-strong,#94a3b8);
}

/* ── Standard table — used by every list view (LIST-STD-001 2026-05-25)  ──
   Operator: "every list should look like the catalog view".
   The `.product-table` class is the canonical look — same column structure,
   same row hover, same status-badge styling, same monospace SKU/ref styling. */
.product-table-wrap { overflow-x:auto }
.product-table { width:100%; border-collapse:collapse; font-size:.83rem }
.product-table th {
  text-align:left; padding:.65rem 1rem;
  font-size:.67rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  color:var(--g400); background:var(--g50); border-bottom:1px solid var(--g200);
}
.product-table td { padding:.75rem 1rem; border-bottom:1px solid var(--g100); vertical-align:middle }
.product-table tr:last-child td { border-bottom:none }
.product-table tr:hover td { background:var(--g50) }
.empty-row { text-align:center; color:var(--g400); padding:2.5rem 1rem!important; font-size:.84rem }

/* ── Badges ── */
.badge {
  display:inline-block; font-size:.68rem; font-weight:700;
  padding:.2rem .6rem; border-radius:99px; white-space:nowrap;
}
.badge-green  { background:var(--green-light);  color:var(--green) }
.badge-amber  { background:var(--amber-light);  color:var(--amber) }
.badge-red    { background:var(--red-light);    color:var(--red) }
.badge-blue   { background:var(--blue-light);   color:var(--blue) }
.badge-purple { background:var(--purple-light); color:var(--purple) }
.badge-gray   { background:var(--g100);         color:var(--g600) }

/* ── Cells ── */
.cell-main { font-weight:600; font-size:.84rem }
.cell-sub  { font-size:.73rem; color:var(--g400); margin-top:.1rem }
.cell-trunc{ max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cell-meta { font-size:.73rem; color:var(--g500); margin-top:.1rem }
.mono-ref  { font-family:monospace; font-size:.76rem; color:var(--g600) }

/* ── Forms ── */
/* FIX 2026-05-29 (Faro NEURO #47): align-items:end → inputs in the same row
   line up at the bottom regardless of label height (1-line "Ciudad" vs 2-line
   "Cuenta de ingresos (contabilidad — sólo contador+)"). Without this, the
   shorter-label input sat higher than its neighbors. */
.field-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.85rem; align-items:end }
.field-group { display:flex; flex-direction:column; gap:.3rem; justify-content:flex-end }
.field-group-wide { grid-column:1 / -1 }
.field-group label { font-size:.76rem; font-weight:700; color:var(--g700) }
/* 2026-07-01 — required-field marker for editable record forms (e.g. intake record edit). */
.field-group label .req { color:var(--red); margin-left:.15rem }
.field-hint { font-weight:400; color:var(--g400) }
.field-input {
  padding:.6rem .85rem; border:1.5px solid var(--g200); border-radius:9px;
  font-size:.875rem; color:var(--black); background:var(--white);
  transition:border-color .15s,box-shadow .15s;
}
.field-input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,86,219,.15) }
textarea.field-input { resize:vertical; min-height:60px }
.form-actions { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center }
.search-inline { padding:.4rem .85rem; border:1.5px solid var(--g200); border-radius:99px; font-size:.82rem; min-width:180px }
.search-inline:focus { outline:none; border-color:var(--blue) }
.action-btn {
  font-size:.75rem; font-weight:600; padding:.28rem .65rem; border-radius:7px;
  border:1px solid var(--g200); background:var(--white); color:var(--g700);
  transition:background .12s; cursor:pointer;
}
.action-btn:hover { background:var(--g50) }

/* ── Record layout ── */
.record-page { max-width:1200px }
.record-breadcrumb { margin-bottom:.75rem }
.record-smart { margin-bottom:1rem }
.record-header { margin-bottom:1.25rem }
.record-body { display:grid; grid-template-columns:1fr 300px; gap:1.5rem; align-items:start }
@media (max-width:960px) { .record-body { grid-template-columns:1fr } }
.record-title-row { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:1rem }
.record-title { font-size:1.3rem; font-weight:900 }
.record-meta { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:.4rem; font-size:.82rem }
.meta-sep { color:var(--g300) }
.meta-ref { font-family:monospace; color:var(--g600); font-size:.75rem }
.meta-price { font-weight:800; color:var(--blue) }
.record-header-actions { display:flex; gap:.5rem; flex-wrap:wrap }
.empty-page { text-align:center; color:var(--g400); padding:3rem; font-size:.9rem }
.empty-sub { color:var(--g400); font-size:.82rem; padding:.5rem 0 }

/* ── Smart buttons (relational links shown on record headers) ── */
.smart-buttons { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.5rem }
.smart-btn {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .85rem; border-radius:99px;
  background:var(--blue-light); color:var(--blue);
  font-size:.78rem; font-weight:700;
  border:1px solid #bfdbfe; transition:all .12s; text-decoration:none;
}
.smart-btn:hover { background:#dbeafe }
.smart-btn-count {
  background:var(--blue); color:#fff;
  font-size:.62rem; padding:.05rem .35rem; border-radius:99px; font-weight:800;
}

/* ── Filter chip (smart-button relational filter — pool?contact=…) ── */
.filter-banner {
  background:var(--blue-light); border:1px solid #bfdbfe;
  color:var(--blue); border-radius:var(--r);
  padding:.5rem .85rem; margin-bottom:1rem;
  display:flex; align-items:center; gap:.75rem; font-size:.83rem; font-weight:600;
}
.filter-banner .clear-chip {
  background:var(--blue); color:#fff;
  font-size:.72rem; padding:.2rem .6rem; border-radius:99px;
  font-weight:700; cursor:pointer; border:none; margin-left:auto;
}

/* ── Breadcrumb ── */
.breadcrumb { display:flex; align-items:center; gap:.35rem; font-size:.78rem; color:var(--g600); flex-wrap:wrap }
.bc-link { color:var(--blue); font-weight:500 }
.bc-link:hover { text-decoration:underline }
.bc-sep { color:var(--g300) }
.bc-current { color:var(--g700); font-weight:600 }

/* ── Chatter ── */
.chatter-panel {
  background:var(--white); border:1px solid var(--g200);
  border-radius:var(--r-lg); overflow:hidden;
  position:sticky; top:calc(var(--topbar) + 1rem);
}
.chatter-head { padding:.75rem 1rem; border-bottom:1px solid var(--g100); font-size:.82rem; font-weight:800; color:var(--g700) }
.chatter-entries { max-height:420px; overflow-y:auto; padding:.75rem 1rem; display:flex; flex-direction:column; gap:.6rem }
.chatter-entry { font-size:.8rem }
.chatter-system .chatter-body { color:var(--g500); font-style:italic }
.chatter-note   .chatter-body { color:var(--g800) }
.chatter-update .chatter-body { color:var(--g800); font-weight:600 }
.chatter-meta { display:flex; justify-content:space-between; margin-bottom:.15rem }
.chatter-author { font-weight:700; font-size:.73rem; color:var(--g700) }
.chatter-time { font-size:.68rem; color:var(--g400) }
.chatter-body { line-height:1.4 }
.chatter-empty { color:var(--g400); font-size:.8rem; text-align:center; padding:1rem }
.chatter-compose { padding:.75rem 1rem; border-top:1px solid var(--g100); display:flex; flex-direction:column; gap:.5rem }
/* SOP 2026-06-25: buttons must never be flush against a panel or card border.
   .chatter-input-row padding is 0 1rem but the last flex child (the button) sits
   right at that boundary — add explicit right gap so it breathes. */
.chatter-panel .chatter-input-row { padding:0 1rem 0 1rem; gap:.5rem }
.chatter-panel .chatter-input-row .btn { flex-shrink:0; margin-right:.05rem }
.chatter-compose .btn { flex-shrink:0 }
.chatter-input { width:100%; padding:.5rem .75rem; border:1.5px solid var(--g200); border-radius:8px; font-size:.8rem; resize:none }
.chatter-input:focus { outline:none; border-color:var(--blue) }
.chatter-changes { margin:.3rem 0 0 0; padding-left:0; list-style:none; font-size:.76rem; line-height:1.55 }
.chatter-changes li { padding:.15rem 0; color:var(--g700) }
.chatter-changes strong { color:var(--g800); font-weight:700 }
.chatter-changes code {
  background:var(--g100); color:var(--g700);
  padding:.05rem .35rem; border-radius:5px;
  font-family:monospace; font-size:.72rem;
}
.chatter-changes .chatter-from { background:var(--red-light); color:var(--red) }
.chatter-changes .chatter-to   { background:var(--green-light); color:var(--green) }
.chatter-changes .chatter-arrow { color:var(--g400); margin:0 .25rem }

/* ── Timeline ── */
.timeline { display:flex; flex-direction:column; gap:.75rem }
.timeline-entry { display:flex; gap:.75rem; align-items:flex-start }
.timeline-dot { width:8px; height:8px; border-radius:50%; background:var(--blue); flex-shrink:0; margin-top:.35rem }
.timeline-body { flex:1; font-size:.82rem }
.tl-from { color:var(--g400) }
.tl-arrow { color:var(--g300); margin:0 .3rem }
.tl-to { font-weight:700; color:var(--g800) }
.tl-time { font-size:.72rem; color:var(--g400); margin-left:.5rem }
.tl-note { color:var(--g600); font-size:.78rem; margin-top:.15rem }

/* ── Pipeline (repair status stepper) ── */
.pipeline-track {
  display:flex; align-items:center; gap:0;
  background:var(--white); border:1px solid var(--g200); border-radius:var(--r-lg);
  padding:1rem 1.25rem; margin-bottom:1.25rem; overflow-x:auto;
}
.pl-step { display:flex; flex-direction:column; align-items:center; gap:.3rem; min-width:70px }
.pl-dot { width:12px; height:12px; border-radius:50%; background:var(--g200); border:2px solid var(--g200) }
.pl-step.pl-done .pl-dot { background:var(--green); border-color:var(--green) }
.pl-step.pl-active .pl-dot { background:var(--blue); border-color:var(--blue); box-shadow:0 0 0 3px #bfdbfe }
.pl-label { font-size:.68rem; font-weight:600; color:var(--g400); text-align:center; white-space:nowrap }
.pl-step.pl-done .pl-label { color:var(--green) }
.pl-step.pl-active .pl-label { color:var(--blue); font-weight:800 }
.pl-line { flex:1; height:2px; background:var(--g200); min-width:20px }

/* ── Battery indicator ── */
.battery-bar { display:inline-block; width:42px; height:8px; border-radius:99px; background:var(--g200); overflow:hidden; vertical-align:middle; margin-right:.35rem }
.battery-fill { height:100%; border-radius:99px }
.battery-pct { font-size:.75rem; font-weight:600; color:var(--g700); vertical-align:middle }

/* ── Misc helpers ── */
.cat-pill { font-size:.68rem; font-weight:600; padding:.15rem .55rem; background:var(--g100); color:var(--g600); border-radius:99px }
.tag-pill { font-size:.68rem; padding:.12rem .5rem; border-radius:99px; background:var(--g100); color:var(--g600); font-weight:600 }
.linked-row {
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.6rem 0; border-bottom:1px solid var(--g100); font-size:.83rem;
}
.linked-row:last-child { border-bottom:none }
.linked-ref { font-family:monospace; font-size:.76rem; color:var(--g600) }
.linked-label { flex:1; color:var(--g700) }
.linked-link { color:var(--blue); font-size:.78rem; font-weight:600; margin-left:auto; white-space:nowrap }
.linked-link:hover { text-decoration:underline }
.parts-row { display:flex; gap:1rem; align-items:center; font-size:.82rem; padding:.45rem 0; border-bottom:1px solid var(--g100) }
.parts-sku { font-family:monospace; color:var(--g600); flex:1 }
.parts-qty { font-weight:700 }
.parts-cost { color:var(--blue); font-weight:700 }

/* ── Record list (drop-in for list views that don't use table) ── */
.record-list { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--g200); border-radius:var(--r-lg); overflow:hidden }
.record-row {
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.75rem 1rem; border-bottom:1px solid var(--g100); font-size:.83rem;
}
.record-row:last-child { border-bottom:none }
.record-row:hover { background:var(--g50) }

/* ── Drawer (slide-in form) ── */
.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:50; display:flex; align-items:flex-end; justify-content:flex-end }
.drawer { background:var(--white); width:min(480px,100vw); height:100%; display:flex; flex-direction:column; box-shadow:-4px 0 24px rgba(0,0,0,.12) }
.drawer-head { padding:1rem 1.25rem; border-bottom:1px solid var(--g200); display:flex; align-items:center; justify-content:space-between }
.drawer-title { font-weight:800; font-size:.95rem }
.drawer-close { background:none; border:none; font-size:1.1rem; color:var(--g400); cursor:pointer; padding:.3rem }
.drawer-body { flex:1; overflow-y:auto; padding:1.25rem }

/* ── Modal ── */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:100; display:flex; align-items:center; justify-content:center; padding:1rem }
.modal-box { background:var(--white); border-radius:var(--r-lg); padding:1.75rem; max-width:380px; width:100%; box-shadow:var(--sh2) }
.modal-card { background:var(--white); border-radius:var(--r-lg); width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--sh2); display:flex; flex-direction:column }
.modal-header { padding:1rem 1.25rem; border-bottom:1px solid var(--g200); display:flex; align-items:center; justify-content:space-between }
.modal-title  { font-weight:800; font-size:.95rem }
.modal-close  { background:none; border:none; font-size:1.2rem; color:var(--g400); cursor:pointer; padding:.3rem }
.modal-body   { padding:1.25rem; overflow-y:auto }
.modal-footer { padding:.85rem 1.25rem; border-top:1px solid var(--g200); display:flex; gap:.5rem; justify-content:flex-end; flex-wrap:wrap }
.modal-msg { font-size:.9rem; color:var(--g800); margin-bottom:1.25rem; line-height:1.5 }
.modal-actions { display:flex; gap:.75rem; justify-content:flex-end }

/* ── Toast ── */
#toast-root { position:fixed; bottom:1.5rem; right:1.5rem; z-index:200; display:flex; flex-direction:column; gap:.5rem; pointer-events:none }
.toast {
  padding:.7rem 1.1rem; border-radius:10px; font-size:.84rem; font-weight:600;
  box-shadow:var(--sh2); color:#fff;
  opacity:0; transform:translateY(8px);
  transition:opacity .25s,transform .25s; pointer-events:none;
}
.toast.show { opacity:1; transform:translateY(0) }
.toast-success { background:var(--green) }
.toast-error   { background:var(--red) }
.toast-info    { background:var(--blue) }

/* ── Contact avatar (used in list views) ── */
.contact-avatar { font-size:1.1rem; width:28px; text-align:center }

/* ── Scanner bar ── */
.scan-bar { display:flex; align-items:center; gap:.75rem; background:var(--g800); color:#fff; border-radius:var(--r-lg); padding:.85rem 1.25rem; margin-bottom:1.25rem }
.scan-bar-icon { font-size:1.2rem; flex-shrink:0 }
.scan-bar-label { font-size:.8rem; font-weight:600; color:#94a3b8; white-space:nowrap }
.scan-input { flex:1; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.15); border-radius:8px; padding:.55rem 1rem; font-size:.9rem; color:#fff; font-family:monospace; letter-spacing:.05em }
.scan-input::placeholder { color:rgba(255,255,255,.3) }
.scan-input:focus { outline:none; border-color:var(--wa); background:rgba(255,255,255,.12) }
.scan-status { font-size:.75rem; color:#94a3b8; white-space:nowrap }
.scan-status.hit  { color:var(--wa) }
.scan-status.miss { color:#f87171 }

/* ── Barcode label modal ── */
.label-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; display:flex; align-items:center; justify-content:center }
.label-modal { background:#fff; border-radius:var(--r-lg); width:min(520px,95vw); max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.2) }
.label-modal-head { padding:1rem 1.25rem; border-bottom:1px solid var(--g200); display:flex; align-items:center; justify-content:space-between }
.label-modal-title { font-weight:800; font-size:.95rem }
.label-modal-body { padding:1.5rem }
.label-preview { border:1.5px dashed var(--g300); border-radius:10px; padding:1.25rem; display:flex; flex-direction:column; align-items:center; gap:.5rem; background:#fafafa; margin-bottom:1.25rem }
.label-preview svg { max-width:100% }
.label-name { font-weight:800; font-size:.9rem; text-align:center }
.label-ref { font-family:monospace; font-size:.75rem; color:var(--g600) }
.label-price { font-weight:900; font-size:1.1rem; color:var(--blue) }
.label-grade { font-size:.72rem }
.label-actions { display:flex; gap:.75rem; flex-wrap:wrap }
.label-size-row { display:flex; gap:.5rem; margin-bottom:1rem; flex-wrap:wrap }
.label-size-btn { padding:.3rem .75rem; border-radius:99px; font-size:.76rem; font-weight:600; border:1.5px solid var(--g200); background:var(--white); cursor:pointer }
.label-size-btn.active { background:var(--blue); color:#fff; border-color:var(--blue) }
@media print {
  body > *:not(.label-print-frame) { display:none!important }
  .label-print-frame { display:block!important }
}

/* ── Dashboard module cards ── */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; margin-bottom:1.5rem }
.dash-module-card {
  background:var(--white); border:1px solid var(--g200); border-radius:var(--r-lg);
  padding:1.25rem; cursor:pointer; transition:all .15s;
  display:flex; flex-direction:column; gap:.5rem;
}
.dash-module-card:hover { border-color:var(--blue); box-shadow:var(--sh2); transform:translateY(-2px) }
.dash-module-icon  { font-size:1.75rem }
.dash-module-title { font-weight:800; font-size:.95rem }
.dash-module-sub   { font-size:.78rem; color:var(--g600) }

/* ── E-commerce bridge banner ── */
.ecom-bridge {
  background:linear-gradient(135deg,var(--blue) 0%,#2563eb 100%);
  color:#fff; border-radius:var(--r-lg);
  padding:1.25rem; margin-bottom:1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  cursor:pointer; transition:opacity .15s; text-decoration:none;
}
.ecom-bridge:hover { opacity:.93 }
.ecom-bridge .title { font-weight:800; font-size:.95rem }
.ecom-bridge .sub { font-size:.78rem; opacity:.85; margin-top:.2rem }
.ecom-bridge-arrow { font-size:1.5rem; opacity:.8 }

/* ── Ecosystem tile grid (other NorthPath apps) ── */
.eco-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem; margin-bottom:1.5rem;
}
.eco-tile {
  background:var(--white); border:1px solid var(--g200); border-radius:var(--r-lg);
  padding:1rem 1.15rem; cursor:pointer; transition:all .15s;
  display:flex; flex-direction:column; gap:.35rem; text-decoration:none; color:inherit;
}
.eco-tile:hover { border-color:var(--purple); box-shadow:var(--sh2); transform:translateY(-2px) }
.eco-tile .icon { font-size:1.5rem }
.eco-tile .title { font-weight:800; font-size:.9rem }
.eco-tile .url { font-size:.7rem; color:var(--g500); font-family:monospace; word-break:break-all }
.eco-tile .desc { font-size:.75rem; color:var(--g600) }

/* ── Clinical summary panel ─────────────────────────────
   Theme cascade: --bg-card (light) → --surface (dark/premium) → white. */
.clinical-summary-panel { margin: 1rem 0; }
.clinical-summary-panel .filter-tabs { margin-bottom: .75rem }
.cs-pane {
  background: var(--bg-card, var(--surface, #fff));
  color: var(--text-main, var(--cream, var(--g800, #111)));
  border: 1px solid var(--border-color, var(--surface-2, #e5e7eb));
  border-radius: 10px;
  padding: .85rem;
}
.cs-pane .product-table { background: transparent }
.cs-pane .product-table th { background: var(--surface-2, var(--g50, #f9fafb)); color: var(--text-muted, var(--g500, #6b7280)) }
.cs-pane .product-table td { color: inherit; border-color: var(--border-color, var(--surface-2, #e5e7eb)) }

/* Explicit dark-mode override */
body[data-theme="dark"] .cs-pane {
  background: var(--surface, #0d1829) !important;
  color: var(--text-main, #e2e8f0);
  border-color: var(--surface-2, #142540);
}
body[data-theme="dark"] .cs-pane .product-table th {
  background: var(--surface-2, #142540);
  color: var(--g500, #94a3b8);
}
/* 2026-06-10 — ported from retired dark.css (orphaned): td/meta sub-rules the
   live block was missing, tokenized instead of the raw hex the orphan used. */
body[data-theme="dark"] .cs-pane .product-table { background: transparent !important; }
body[data-theme="dark"] .cs-pane .product-table td {
  color: var(--text, #e2e8f0) !important;
  border-color: var(--surface-2, #142540) !important;
}
body[data-theme="dark"] .cs-pane .cell-meta { color: var(--g500, #94a3b8) !important; }

/* Premium navy/gold override — matches 2026 brand */
body[data-theme="premium"] .cs-pane {
  background: var(--surface, #1c2848) !important;
  color: var(--cream, #f5ecd5);
  border-color: var(--surface-2, #243358);
}
body[data-theme="premium"] .cs-pane .product-table th {
  background: var(--surface-2, #243358);
  color: var(--cream-muted, #c4bb9c);
}
body[data-theme="premium"] .cs-pane .product-table td {
  border-color: var(--surface-2, #243358);
}
body[data-theme="premium"] .cs-pane .empty-sub,
body[data-theme="dark"]    .cs-pane .empty-sub {
  color: var(--cream-muted, var(--g500, #94a3b8));
}

/* ── Theme-congruent scrollbars (WebKit + Firefox) ──────
   Light = neutral gray. Dark = subtle navy. Premium = gold accent. */
* { scrollbar-width: thin; scrollbar-color: var(--g300, #d1d5db) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--g300, #d1d5db);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--g400, #9ca3af); background-clip: padding-box; }

body[data-theme="dark"]    { scrollbar-color: var(--surface-2, #142540) transparent; }
body[data-theme="dark"]    ::-webkit-scrollbar-thumb { background: var(--surface-2, #142540); background-clip: padding-box; }
body[data-theme="dark"]    ::-webkit-scrollbar-thumb:hover { background: var(--g600, #4b5563); background-clip: padding-box; }

body[data-theme="premium"] { scrollbar-color: rgba(212,160,23,.45) transparent; }
body[data-theme="premium"] ::-webkit-scrollbar-thumb { background: rgba(212,160,23,.45); background-clip: padding-box; }
body[data-theme="premium"] ::-webkit-scrollbar-thumb:hover { background: var(--gold, #d4a017); background-clip: padding-box; }
/* 2026-06-09 — dark + premium are dark-family themes: without color-scheme:dark
   the UA draws native date/time picker indicator icons dark-on-dark (invisible
   in the Nuevo evento modal). color-scheme makes the UA render them light.
   NOTE: lib/dark.css is ORPHANED (never linked) — dark rules live HERE per the
   dark-mode law in AGENTS.md. */
body[data-theme="dark"]    { color-scheme: dark; }
body[data-theme="premium"] { color-scheme: dark; }

/* ── FAB (floating action button) — mobile-first scaffold ─ */
.fab-host { display:none; }
@media (max-width: 768px) {
  .fab-host { display:block; position:fixed; bottom:18px; right:18px; z-index:90; }
  .fab-trigger { width:56px; height:56px; border-radius:50%; background:var(--blue,#1a56db); color:#fff; border:0; box-shadow:0 4px 14px rgba(0,0,0,.18); font-size:28px; line-height:1; cursor:pointer; transition:transform .18s ease; }
  .fab-host[data-state="open"] .fab-trigger { transform: rotate(45deg); }
  .fab-fan { position:absolute; bottom:64px; right:8px; display:flex; flex-direction:column; gap:8px; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; transform:translateY(8px); }
  .fab-host[data-state="open"] .fab-fan { opacity:1; pointer-events:auto; transform:translateY(0); }
  .fab-fan-item { width:44px; height:44px; border-radius:50%; background:var(--bg-card,#fff); border:1px solid var(--border-color,#e5e7eb); box-shadow:0 2px 8px rgba(0,0,0,.12); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
  .fab-fan-item svg { width:20px; height:20px; }
}

/* ── D10 (2026-06-03): extracted from admin/index.html inline <style> block (lines 70-680) ── */
    :root {
      --black:#0a0a0a;--white:#fff;
      --g50:#f9fafb;--g100:#f3f4f6;--g200:#e5e7eb;
      --g300:#d1d5db;--g400:#9ca3af;--g500:#6b7280;--g600:#4b5563;--g700:#374151;--g800:#1f2937;
      --blue:#1a56db;--blueH:#1444b8;--blue-light:#eff6ff;
      --green:#16a34a;--green-light:#dcfce7;
      --red:#dc2626;--red-light:#fef2f2;
      --amber:#d97706;--amber-light:#fef3c7;
      --purple:#7c3aed;--purple-light:#ede9fe;
      --wa:#25d366;
      --font:'Segoe UI',system-ui,-apple-system,sans-serif;
      --r:10px;--r-lg:14px;
      --sh:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
      --sh2:0 4px 16px rgba(0,0,0,.08);
      --sidebar:224px;--topbar:49px;
      /* 2026-05-30 — module-shared semantic tokens. Modules referenced these
         via var(--bg-card, #fallback) but the vars were never declared, so
         every dark-mode render fell back to the white literal. Declaring
         them here (light) + overriding in body[data-theme="dark"] makes
         every existing inline reference dark-mode-aware automatically. */
      --bg-card:#f8f8f8;
      --bg-main:#ffffff;
      --border-color:#e5e7eb;
      --text-main:#1b1a17;
      --text-muted:#888888;
      --accent:#d4a017;
      --warn:#f59e0b;
      --danger:#ef4444;
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{font-family:var(--font);background:var(--g50);color:var(--black);line-height:1.5}
    a{color:inherit;text-decoration:none}
    button{cursor:pointer;font-family:var(--font)}
    input,select,textarea{font-family:var(--font)}

    /* Login */
    #login-gate{position:fixed;inset:0;background:var(--g50);display:flex;align-items:center;justify-content:center;z-index:999}
    .login-card{background:var(--white);border:1px solid var(--g200);border-radius:18px;padding:2.5rem 2rem;width:100%;max-width:380px;text-align:center;box-shadow:var(--sh2)}
    .login-logo{font-weight:900;font-size:1.3rem;margin-bottom:.2rem}
    .login-logo span{color:var(--blue)}
    .login-version{font-size:.68rem;background:var(--blue-light);color:var(--blue);border-radius:99px;padding:.1rem .55rem;font-weight:700;display:inline-block;margin-bottom:1.25rem}
    .login-sub{font-size:.82rem;color:var(--g600);margin-bottom:1.75rem}
    .login-label{display:block;text-align:left;font-size:.78rem;font-weight:700;color:var(--g700);margin-bottom:.3rem}
    .login-input{width:100%;padding:.75rem 1rem;border:1.5px solid var(--g200);border-radius:9px;font-size:.9rem;margin-bottom:1rem;transition:border-color .15s}
    .login-input:focus{outline:none;border-color:var(--blue)}
    .login-err{font-size:.78rem;color:var(--red);margin-bottom:.75rem;display:none}

    /* App */
    #app{display:none;min-height:100vh}

    /* Topbar */
    .topbar{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--g200);height:var(--topbar);padding:0 1.25rem;display:flex;align-items:center;gap:1rem;box-shadow:var(--sh)}
    /* 2026-05-30 — wordmark: "Faro" white + "Salud" blue accent, both tight
       (no internal gap). Operator screenshot: 'white "Faro" Same blue color
       "Salud"'. Gap reserved only for the badge to the right. */
    .topbar-logo{font-weight:900;font-size:.95rem;display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:#fff}
    .topbar-brand{display:inline-flex;align-items:baseline;letter-spacing:.005em;color:#fff}
    body[data-theme="light"] .topbar-brand{color:var(--black,#1b1a17)}
    .topbar-brand-accent{color:var(--blue);margin-left:0}
    /* Badge: dark navy pill matching the page background tone (per operator
       screenshot: "make the color dark blue like the background color").
       White text inside. Clean monochrome — no gold, no border accent. */
    .topbar-badge{font-size:.6rem;background:#020810;color:#fff;border-radius:99px;padding:.18rem .55rem;font-weight:800;letter-spacing:.05em;border:1px solid rgba(255,255,255,.1)}
    body[data-theme="light"] .topbar-badge{background:#0d1829;color:#fff;border-color:transparent}
    .topbar-right{margin-left:auto;display:flex;align-items:center;gap:.75rem}
    .topbar-tenant{font-size:.75rem;color:var(--g600);font-weight:600;background:var(--g100);padding:.3rem .75rem;border-radius:99px}
    /* 2026-05-30 — hamburger visible at ALL viewports so the desktop user can
       also fold the sidebar in/out (TikTok / CLUB BETA pattern). On desktop
       the click collapses the sidebar to width 0 (slide left); on mobile the
       hamburger triggers the slide-out drawer (main content shifts right). */
    .hamburger{display:flex;background:none;border:1px solid var(--g200);border-radius:8px;padding:.35rem .55rem;cursor:pointer;align-items:center;justify-content:center;transition:background .12s,border-color .12s}
    .hamburger:hover{background:var(--g50);border-color:var(--g300,#cbd5e1)}
    .hamburger svg{width:18px;height:18px;color:var(--g700)}

    /* Layout */
    .app-body{display:flex;min-height:calc(100vh - var(--topbar))}

    /* Sidebar */
    .sidebar{width:var(--sidebar);flex-shrink:0;background:var(--white);border-right:1px solid var(--g200);padding:1rem .75rem;position:sticky;top:var(--topbar);height:calc(100vh - var(--topbar));overflow-y:auto;transition:width .35s cubic-bezier(.4,0,.2,1), padding .35s ease, opacity .25s ease, border-right-color .25s ease}
    /* 2026-05-30 — desktop fold-in/out: when .app-body has .sidebar-collapsed,
       sidebar slides away (width 0 + zero padding + transparent border) and
       main content reflows to fill. Reversible animation. */
    .app-body.sidebar-collapsed .sidebar{width:0;padding-left:0;padding-right:0;opacity:0;border-right-color:transparent;overflow:hidden}
    .app-body.sidebar-collapsed .sidebar > *{opacity:0;pointer-events:none}
    .app-body .sidebar > *{transition:opacity .2s ease}
    /* 2026-05-30 — TikTok/CLUB-style slide-out drawer per operator video #2.
       Mobile (<= 768px): sidebar fixed BEHIND main content, always visible
       underneath. Tapping hamburger sets .menu-open on .app-body → main
       content slides right (260px), revealing the sidebar. The content gets
       rounded corners + drop shadow to look like a card sliding away. */
    /* 2026-05-30 — All mobile @media rules moved to lib/responsive.css
       (single source of truth per operator: "if you have to create a module
       for @media alone"). The sidebar slide-out drawer + two-floor topbar
       grid + tables / stat grid mobile collapse all live there. */
    .nav-section{font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--g400);padding:.2rem .6rem;margin:1rem 0 .25rem}
    .nav-section:first-of-type{margin-top:0}
    .nav-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:8px;font-size:.84rem;font-weight:500;color:var(--g700);cursor:pointer;transition:background .12s;margin-bottom:.05rem;border:none;background:none;width:100%;text-align:left}
    .nav-item:hover{background:var(--g50)}
    .nav-item.active{background:var(--blue-light);color:var(--blue);font-weight:700}
    .nav-item.nav-locked{opacity:.32;cursor:not-allowed;pointer-events:none;font-style:italic}
    .nav-icon{font-size:.95rem;width:20px;height:20px;text-align:center;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
    .nav-icon svg{width:100%;height:100%;display:block}
    .nav-item{min-width:0;overflow:hidden}
    .nav-item > span:not(.nav-icon){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
    .nav-sep{height:1px;background:var(--g100);margin:.5rem .6rem}
    .sidebar-backdrop{display:none;position:fixed;inset:0;z-index:29;background:rgba(0,0,0,.2)}
    .sidebar-backdrop.show{display:block}

    /* Main */
    .main-content{flex:1;padding:1.5rem 1.75rem;overflow-x:hidden;min-width:0}
    /* main-content mobile padding handled in lib/responsive.css */
    /* Tables overflow horizontally instead of stretching the page bg.
       Mobile-specific tightening lives in lib/responsive.css. */
    .product-table-wrap,.table-wrap,.section-card-body{max-width:100%;overflow-x:auto}

    /* Page header */
    .page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}
    .page-title{font-size:1.4rem;font-weight:900;line-height:1.2}
    .page-subtitle{font-size:.82rem;color:var(--g600);margin-top:.2rem}
    .header-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
    /* Buttons must never sit flush against a card or panel border — SOP 2026-06-25 */
    .section-card-head .header-actions,.section-card-head>.btn{margin-right:.15rem}
    .page-header .header-actions{padding-right:.1rem}

    /* Stats — 2026-05-25 UI-FIX-001: was a normal block, sub-labels drifted to
       different Y when title wrapped or value was tall. Flex column + auto top-margin
       on .stat-sub pins every footer to the same baseline regardless of title length. */
    /* 2026-05-26 — currency widening: COP values can hit 9+ digits. Bumped
       min column width 170→210px so amounts breathe; .stat-value font scales
       down by font-size:clamp() based on viewport (still bold + readable). */
    .stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem;margin-bottom:1.75rem}
    .stat-card{
      background:var(--surface,var(--white));border:1px solid var(--border,var(--g200));
      border-radius:var(--r-lg);padding:1rem 1.25rem;min-width:0;overflow:hidden;
      display:flex;flex-direction:column;min-height:110px;
      /* 2026-06-01 — enables container-query based font shrink in .stat-value */
      container-type: inline-size;
    }
    .stat-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted,var(--g400));margin-bottom:.45rem;min-height:2.2em;display:flex;align-items:flex-start;line-height:1.15}
    /* 2026-06-01 — operator: stat-value must NEVER line-wrap. Long COP figures
       like $1,500,000 used to wrap to a second line as "$ 1.500.00" + "0".
       Switched to: nowrap + overflow:hidden + container-query-driven font size
       that auto-shrinks based on actual card width (8.5cqi ≈ 8.5% of card
       inline-size, clamped 0.78rem–1.45rem). Single-line guaranteed. */
    .stat-value{
      font-size:clamp(0.78rem, 8.5cqi, 1.45rem);
      font-weight:900;line-height:1.1;
      white-space:nowrap;overflow:hidden;text-overflow:clip;
      color:var(--text,var(--black));
      max-width:100%;
    }
    /* Fallback for browsers without container queries (Safari <16): use viewport-based clamp */
    @supports not (container-type: inline-size) {
      .stat-value{ font-size:clamp(0.85rem, 1.7vw, 1.45rem); white-space:nowrap; overflow:hidden; }
    }
    .stat-sub{font-size:.73rem;color:var(--muted-strong,var(--g600));margin-top:auto;padding-top:.5rem}
    .stat-good{color:var(--green)}.stat-warn{color:var(--amber)}.stat-bad{color:var(--red)}

    /* 2026-05-25 SANITIZE-002: topbar icon buttons (lang, theme, all-apps).
       Square, ghost-style, fits next to the existing topbar-tenant chip. */
    .topbar-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:8px;color:var(--g600);background:transparent;border:1px solid transparent}
    .topbar-icon-btn:hover{background:var(--g100);color:var(--g800)}
    .topbar-icon-btn #lang-toggle-label{font-size:.72rem;font-weight:800;letter-spacing:.04em}

    /* All-apps modal — opens from waffle-grid button, lists every module as a tile.
       Reuses the existing .modal styling layer further down in this file. */
    .all-apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.75rem;padding:.5rem}
    .all-apps-tile{background:var(--g50,transparent);border:1px solid var(--g200);border-radius:10px;padding:.9rem .6rem;text-align:center;cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
    .all-apps-tile:hover{transform:translateY(-2px);border-color:var(--blue);background:var(--blue-light)}
    .all-apps-tile .icon{font-size:1.5rem;line-height:1;margin-bottom:.35rem;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--blue)}
    .all-apps-tile .icon svg{width:100%;height:100%}
    .all-apps-tile .label{font-size:.78rem;font-weight:600;color:var(--g700)}

    /* Vertical pills — replaces the sidebar "Verticals" section with dashboard filter chips.
       Per screenshot annotation: "Verticals should be pills or buttons here that once clicked
       will only show the corresponding applications to that vertical." */
    .vertical-pills{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
    .vertical-pill{padding:.35rem .85rem;border-radius:99px;font-size:.78rem;font-weight:600;background:var(--g100);border:1px solid var(--g200);color:var(--g700);cursor:pointer}
    .vertical-pill:hover{background:var(--g200)}
    .vertical-pill.active{background:var(--blue);border-color:var(--blue);color:#fff}

    /* ── Dark theme — body[data-theme="dark"] mirrors v5 OS visual style ──
       Operator note: ANY new color in the rest of this file should also exist
       in the dark overrides below. If it doesn't, the dark theme will look
       half-applied. Audit by toggling and visually scanning each module. */
    body[data-theme="dark"]{
      --bg:#020810;--surface:#0d1829;--surface-2:#142540;
      --border:rgba(59,130,246,.18);
      --text:#e2e8f0;--muted:#64748b;--muted-strong:#94a3b8;
      --white:#0d1829;
      --g50:#0d1829;--g100:#142540;--g200:#1e293b;
      --g300:#334155;--g400:#64748b;--g500:#94a3b8;--g600:#cbd5e1;--g700:#e2e8f0;--g800:#f1f5f9;
      --blue:#3b82f6;--blueH:#60a5fa;--blue-light:#1e3a8a;
      --green:#10b981;--green-light:#064e3b;
      --red:#ef4444;--red-light:#7f1d1d;
      --amber:#f59e0b;--amber-light:#78350f;
      --purple:#a78bfa;--purple-light:#4c1d95;
      --black:#e2e8f0;  /* invert — most usages are text color, NOT pure black */
      /* 2026-05-30 — flip the module-shared tokens so every inline
         var(--bg-card) / var(--border-color) / var(--text-muted) in any
         module file picks up dark mode without per-module CSS edits. */
      --bg-card:#142540;
      --bg-main:#0d1829;
      --border-color:#1e293b;
      --text-main:#e2e8f0;
      --text-muted:#94a3b8;
      /* 2026-06-10 — ported from lib/dark.css on its retirement (file was ORPHANED,
         never linked — these dark values silently never applied). tokens.css defines
         all of these LIGHT at :root, so without the overrides below dark mode renders
         e.g. --ink/--g900 near-black text on dark surfaces (the black-font-on-dark bug
         the 2026-06-09 sweep meant to fix). */
      --gold:#facc15; --gold-light:#78350f;
      --gray-400:var(--g400); --gray-500:var(--g500); --gray-600:var(--g600);
      --g050:#0d1829; --g900:#f1f5f9; --ink:#e2e8f0;
      --card:var(--surface-2); --line:var(--border); --shadow:rgba(0,0,0,.5);
      --cream:#e2e8f0; --cream-muted:#94a3b8;
      --blue-deep:#93c5fd; --green-deep:#6ee7b7; --amber-deep:#fcd34d; --purple-deep:#c4b5fd;
      --info:#60a5fa; --success:#34d399; --cyan:#22d3ee;
      --accent-dark:#facc15; --accent-soft:var(--surface-2); --on-accent:#0d1829;
      background:var(--bg);
    }
    /* Ported from retired dark.css: live classes it styled that had no dark rule here.
       (eco-tile / record-list were dead classes — dropped, not ported.) */
    body[data-theme="dark"] .dash-module-card,
    body[data-theme="dark"] .chatter-panel { background:var(--surface-2); border-color:var(--border); }
    body[data-theme="dark"] .topbar{background:var(--surface);border-bottom:1px solid var(--border)}
    body[data-theme="dark"] .sidebar{background:var(--surface);border-right:1px solid var(--border)}
    body[data-theme="dark"] .stat-card,
    body[data-theme="dark"] .section-card,
    body[data-theme="dark"] .all-apps-tile{background:var(--surface-2);border-color:var(--border)}
    body[data-theme="dark"] .nav-item{color:var(--g600)}
    body[data-theme="dark"] .nav-item:hover{background:var(--g100)}
    body[data-theme="dark"] .nav-item.active{background:var(--blue-light);color:var(--blue)}
    body[data-theme="dark"] .btn{background:var(--surface-2);color:var(--text);border-color:var(--border)}
    body[data-theme="dark"] .btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
    body[data-theme="dark"] input,body[data-theme="dark"] select,body[data-theme="dark"] textarea{
      background:var(--surface-2);color:var(--text);border-color:var(--border)
    }
    /* 2026-05-30 — explicit dark-mode rules for floating panels (Cmd+K
       overlay, notification dropdown, generic modals) so they aren't white
       on top of the dark page. Operator screenshot showed white overlays
       fighting the dark theme. !important to override inline style. */
    body[data-theme="dark"] .cmdk-box,
    body[data-theme="dark"] #notif-dropdown,
    body[data-theme="dark"] .modal-box{
      background:var(--surface-2) !important;
      border-color:var(--border) !important;
      color:var(--text) !important;
    }
    body[data-theme="dark"] .cmdk-box input,
    body[data-theme="dark"] #notif-dropdown input{
      background:var(--surface) !important;
      color:var(--text) !important;
      border-color:var(--border) !important;
    }
    body[data-theme="dark"] .cmdk-box kbd,
    body[data-theme="dark"] #notif-dropdown kbd{
      background:var(--surface) !important;
      color:var(--text) !important;
      border-color:var(--border) !important;
    }
    body[data-theme="dark"] .cmdk-box [data-cmdk-idx]:hover,
    body[data-theme="dark"] #notif-dropdown [data-notif-id]:hover{
      background:var(--surface) !important;
    }
    body[data-theme="dark"] .cmdk-item{background:transparent}
    body[data-theme="dark"] .all-apps-grid > div{background:var(--surface-2) !important;border-color:var(--border) !important;color:var(--text) !important}

    /* 2026-05-30 — Filter tabs (.filter-tab / .filter-tabs / .tab-btn)
       live in lib/components.css (now properly wired via <link> below).
       DO NOT redefine them here — single source of truth. */

    /* Section card */
    .section-card{background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);overflow:hidden;margin-bottom:1.5rem}
    .section-card-head{padding:.85rem 1.25rem;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;cursor:pointer;user-select:none}
    .section-card-head:hover{background:var(--g50)}
    .section-card-title{font-size:.9rem;font-weight:800;display:flex;align-items:center;gap:.5rem}
    .section-card-title::after{content:'▾';font-size:.75rem;color:var(--g400);transition:transform .15s}
    .section-card.collapsed .section-card-title::after{content:'▸'}
    .section-card-body{padding:1.25rem}
    .section-card.collapsed .section-card-body{display:none}
    .clinical-preview{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r);padding:1rem;font-size:.83rem;line-height:1.6;min-height:4rem;color:var(--g800)}

    /* Buttons */
    .btn{padding:.55rem 1rem;border-radius:9px;font-size:.84rem;font-weight:600;border:1px solid transparent;transition:all .12s;display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;white-space:nowrap}
    .btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
    .btn-primary:hover{background:var(--blueH);border-color:var(--blueH)}
    .btn-green{background:var(--green);color:#fff;border-color:var(--green)}
    .btn-green:hover{background:#15803d}
    .btn-amber{background:var(--amber);color:#fff;border-color:var(--amber)}
    .btn-blue{background:#2563eb;color:#fff;border-color:#2563eb}
    .btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
    .btn-ghost{background:var(--white);color:var(--g700);border-color:var(--g200)}
    .btn-ghost:hover{background:var(--g50)}
    .btn-sm{padding:.3rem .65rem;font-size:.76rem;border-radius:7px}

    /* Tabs */
    .tab-bar{display:flex;gap:.3rem;flex-wrap:wrap}
    .tab-btn{padding:.35rem .8rem;border-radius:99px;font-size:.78rem;font-weight:600;border:1px solid var(--g200);background:var(--white);color:var(--g600);cursor:pointer;transition:all .12s;display:flex;align-items:center;gap:.4rem}
    .tab-btn:hover{border-color:var(--blue);color:var(--blue)}
    .tab-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
    .tab-count{background:rgba(255,255,255,.25);color:inherit;font-size:.65rem;padding:.05rem .35rem;border-radius:99px;font-weight:800}
    .tab-btn:not(.active) .tab-count{background:var(--g100);color:var(--g600)}

    /* Table */
    .product-table-wrap{overflow-x:auto}
    .product-table{width:100%;border-collapse:collapse;font-size:.83rem}
    .product-table th{text-align:left;padding:.65rem 1rem;font-size:.67rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--g400);background:var(--g50);border-bottom:1px solid var(--g200)}
    .product-table td{padding:.75rem 1rem;border-bottom:1px solid var(--g100);vertical-align:middle}
    .product-table tr:last-child td{border-bottom:none}
    .product-table tr:hover td{background:var(--g50)}
    .empty-row{text-align:center;color:var(--g400);padding:2.5rem 1rem!important;font-size:.84rem}

    /* Badges */
    .badge{display:inline-block;font-size:.68rem;font-weight:700;padding:.2rem .6rem;border-radius:99px;white-space:nowrap}
    .badge-green{background:var(--green-light);color:var(--green)}
    .badge-amber{background:var(--amber-light);color:var(--amber)}
    .badge-red{background:var(--red-light);color:var(--red)}
    .badge-blue{background:var(--blue-light);color:var(--blue)}
    .badge-purple{background:var(--purple-light);color:var(--purple)}
    .badge-gray{background:var(--g100);color:var(--g600)}

    /* Cells */
    .cell-main{font-weight:600;font-size:.84rem}
    .cell-sub{font-size:.73rem;color:var(--g400);margin-top:.1rem}
    .cell-trunc{max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .mono-ref{font-family:monospace;font-size:.76rem;color:var(--g600)}

    /* Forms */
    .field-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.85rem}
    .field-group{display:flex;flex-direction:column;gap:.3rem}
    .field-group-wide{grid-column:1 / -1}
    .field-group label{font-size:.76rem;font-weight:700;color:var(--g700)}
    .field-hint{font-weight:400;color:var(--g400)}
    .field-input{padding:.6rem .85rem;border:1.5px solid var(--g200);border-radius:9px;font-size:.875rem;color:var(--black);background:var(--white);transition:border-color .15s,box-shadow .15s}
    .field-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,86,219,.15)}
    textarea.field-input{resize:vertical;min-height:60px}
    .form-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
    .search-inline{padding:.4rem .85rem;border:1.5px solid var(--g200);border-radius:99px;font-size:.82rem;min-width:180px}
    .search-inline:focus{outline:none;border-color:var(--blue)}
    .action-btn{font-size:.75rem;font-weight:600;padding:.28rem .65rem;border-radius:7px;border:1px solid var(--g200);background:var(--white);color:var(--g700);transition:background .12s;cursor:pointer}
    .action-btn:hover{background:var(--g50)}

    /* Record layout */
    .record-page{max-width:1200px}
    .record-breadcrumb{margin-bottom:.75rem}
    .record-smart{margin-bottom:1rem}
    .record-header{margin-bottom:1.25rem}
    .record-body{display:grid;grid-template-columns:1fr 300px;gap:1.5rem;align-items:start}
    /* record-body 960px collapse handled in lib/responsive.css */
    .record-title-row{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1rem}
    .record-title{font-size:1.3rem;font-weight:900}
    .record-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:.4rem;font-size:.82rem}
    .meta-sep{color:var(--g300)}
    .meta-ref{font-family:monospace;color:var(--g600);font-size:.75rem}
    .meta-price{font-weight:800;color:var(--blue)}
    .record-header-actions{display:flex;gap:.5rem;flex-wrap:wrap}
    .empty-page{text-align:center;color:var(--g400);padding:3rem;font-size:.9rem}
    .empty-sub{color:var(--g400);font-size:.82rem;padding:.5rem 0}

    /* Smart buttons */
    .smart-buttons{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
    .smart-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .85rem;border-radius:99px;background:var(--blue-light);color:var(--blue);font-size:.78rem;font-weight:700;border:1px solid #bfdbfe;transition:all .12s;text-decoration:none}
    .smart-btn:hover{background:#dbeafe}
    .smart-btn-count{background:var(--blue);color:#fff;font-size:.62rem;padding:.05rem .35rem;border-radius:99px;font-weight:800}
    .smart-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}
    .smart-btn-icon svg{width:100%;height:100%}

    /* Breadcrumb */
    .breadcrumb{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--g600);flex-wrap:wrap}
    .bc-link{color:var(--blue);font-weight:500}
    .bc-link:hover{text-decoration:underline}
    .bc-sep{color:var(--g300)}
    .bc-current{color:var(--g700);font-weight:600}

    /* Chatter */
    .chatter-panel{background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);overflow:hidden;position:sticky;top:calc(var(--topbar) + 1rem)}
    .chatter-head{padding:.75rem 1rem;border-bottom:1px solid var(--g100);font-size:.82rem;font-weight:800;color:var(--g700)}
    .chatter-entries{max-height:380px;overflow-y:auto;padding:.75rem 1rem;display:flex;flex-direction:column;gap:.6rem}
    .chatter-entry{font-size:.8rem}
    .chatter-system .chatter-body{color:var(--g500);font-style:italic}
    .chatter-note .chatter-body{color:var(--g800)}
    .chatter-meta{display:flex;justify-content:space-between;margin-bottom:.15rem}
    .chatter-author{font-weight:700;font-size:.73rem;color:var(--g700)}
    .chatter-time{font-size:.68rem;color:var(--g400)}
    .chatter-body{line-height:1.4}
    .chatter-empty{color:var(--g400);font-size:.8rem;text-align:center;padding:1rem}
    .chatter-compose{padding:.75rem 1rem;border-top:1px solid var(--g100);display:flex;flex-direction:column;gap:.5rem}
    .chatter-input{width:100%;padding:.5rem .75rem;border:1.5px solid var(--g200);border-radius:8px;font-size:.8rem;resize:none}
    .chatter-input:focus{outline:none;border-color:var(--blue)}

    /* Timeline */
    .timeline{display:flex;flex-direction:column;gap:.75rem}
    .timeline-entry{display:flex;gap:.75rem;align-items:flex-start}
    .timeline-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex-shrink:0;margin-top:.35rem}
    .timeline-body{flex:1;font-size:.82rem}
    .tl-from{color:var(--g400)}.tl-arrow{color:var(--g300);margin:0 .3rem}
    .tl-to{font-weight:700;color:var(--g800)}.tl-time{font-size:.72rem;color:var(--g400);margin-left:.5rem}
    .tl-note{color:var(--g600);font-size:.78rem;margin-top:.15rem}

    /* Pipeline */
    .pipeline-track{display:flex;align-items:center;gap:0;background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);padding:1rem 1.25rem;margin-bottom:1.25rem;overflow-x:auto}
    .pl-step{display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:70px}
    .pl-dot{width:12px;height:12px;border-radius:50%;background:var(--g200);border:2px solid var(--g200)}
    .pl-step.pl-done .pl-dot{background:var(--green);border-color:var(--green)}
    .pl-step.pl-active .pl-dot{background:var(--blue);border-color:var(--blue);box-shadow:0 0 0 3px #bfdbfe}
    .pl-label{font-size:.68rem;font-weight:600;color:var(--g400);text-align:center;white-space:nowrap}
    .pl-step.pl-done .pl-label{color:var(--green)}
    .pl-step.pl-active .pl-label{color:var(--blue);font-weight:800}
    .pl-line{flex:1;height:2px;background:var(--g200);min-width:20px}

    /* Battery */
    .battery-bar{display:inline-block;width:42px;height:8px;border-radius:99px;background:var(--g200);overflow:hidden;vertical-align:middle;margin-right:.35rem}
    .battery-fill{height:100%;border-radius:99px}
    .battery-pct{font-size:.75rem;font-weight:600;color:var(--g700);vertical-align:middle}

    /* Misc */
    .cat-pill{font-size:.68rem;font-weight:600;padding:.15rem .55rem;background:var(--g100);color:var(--g600);border-radius:99px}
    .tag-pill{font-size:.68rem;padding:.12rem .5rem;border-radius:99px;background:var(--g100);color:var(--g600);font-weight:600}
    .linked-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.6rem 0;border-bottom:1px solid var(--g100);font-size:.83rem}
    .linked-row:last-child{border-bottom:none}
    .linked-ref{font-family:monospace;font-size:.76rem;color:var(--g600)}
    .linked-label{flex:1;color:var(--g700)}
    .linked-link{color:var(--blue);font-size:.78rem;font-weight:600;margin-left:auto;white-space:nowrap}
    .linked-link:hover{text-decoration:underline}
    .parts-row{display:flex;gap:1rem;align-items:center;font-size:.82rem;padding:.45rem 0;border-bottom:1px solid var(--g100)}
    .parts-sku{font-family:monospace;color:var(--g600);flex:1}
    .parts-qty{font-weight:700}.parts-cost{color:var(--blue);font-weight:700}

    /* Drawer */
    .drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50;align-items:flex-end;justify-content:flex-end}
    .drawer{background:var(--white);width:min(480px,100vw);height:100%;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.12)}
    .drawer-head{padding:1rem 1.25rem;border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between}
    .drawer-title{font-weight:800;font-size:.95rem}
    .drawer-close{background:none;border:none;font-size:1.1rem;color:var(--g400);cursor:pointer;padding:.3rem}
    .drawer-body{flex:1;overflow-y:auto;padding:1.25rem}

    /* ── Faro splash (2026-05-26 FOUC fix) ─────────────────────────────────
       Hidden by default; shown via body.swapping class. Theme-color-matched
       through CSS vars so light/dark/premium each get their own surface tone.
       Fade-out via .splash-fading (300ms). */
    .faro-splash{
      position:fixed; inset:0; z-index:9999;
      background:var(--bg, #ffffff);
      display:none;
      align-items:center; justify-content:center;
      opacity:1; transition:opacity .3s ease-out;
    }
    /* Recognize both html.swapping (set by head-script before body parses) and
       body.swapping (set by JS during the click handler). Either keeps splash up. */
    html.swapping .faro-splash,
    body.swapping .faro-splash{ display:flex; }
    html.swapping.splash-fading .faro-splash,
    body.swapping.splash-fading .faro-splash{ opacity:0; pointer-events:none; }
    /* Force the body itself to share the themed bg during swap so any zero-time
       layout glitch doesn't leak white through gaps between splash + chrome. */
    html.swapping body{ background:transparent !important; }
    .faro-splash-inner{
      display:flex; flex-direction:column; align-items:center; gap:1rem;
      color:var(--text, var(--g800, #1a1a1a));
    }
    .faro-splash-mark{
      color:var(--blue, #4a90e2);
      animation: faro-pulse 1.4s ease-in-out infinite;
    }
    body[data-theme="premium"] .faro-splash-mark{ color:var(--gold, #d4a017); }
    body[data-theme="dark"]    .faro-splash-mark{ color:var(--blue, #4a90e2); }
    .faro-splash-name{
      font-size:1.4rem; font-weight:800;
      letter-spacing:.02em;
    }
    .faro-splash-sub{
      font-size:.85rem; font-weight:500;
      color:var(--muted, var(--g500, #94a3b8));
    }
    @keyframes faro-pulse {
      0%, 100% { opacity:.7; transform:scale(1); }
      50%      { opacity:1;  transform:scale(1.05); }
    }

    /* Modal */
    .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100;display:flex;align-items:center;justify-content:center}
    .modal-box{background:var(--white);border-radius:var(--r-lg);padding:1.75rem;max-width:380px;width:90%;box-shadow:var(--sh2)}
    .modal-msg{font-size:.9rem;color:var(--g800);margin-bottom:1.25rem;line-height:1.5}
    .modal-actions{display:flex;gap:.75rem;justify-content:flex-end}

    /* Dark-theme modal contrast fix (2026-05-26 — operator feedback: blends into UI)
       Dark backdrop + dark modal background lose visual hierarchy. Add a clear
       blue accent border + stronger drop shadow + darker overlay so the modal
       pops off the page. Premium gets its own pass in lib/themes/premium.css. */
    body[data-theme="dark"] .modal-overlay{background:rgba(0,0,0,.65)}
    body[data-theme="dark"] .modal-box{
      background:var(--surface-2);
      border:1px solid var(--blue);
      box-shadow:0 0 0 1px rgba(74,144,226,0.15), 0 12px 32px rgba(0,0,0,.55);
    }
    body[data-theme="dark"] .modal-card{
      background:var(--surface-2);
      border:1px solid var(--blue);
      box-shadow:0 0 0 1px rgba(74,144,226,0.15), 0 12px 32px rgba(0,0,0,.55);
    }
    body[data-theme="dark"] .modal-msg{color:var(--text)}

    /* Toast */
    #toast-root{position:fixed;bottom:1.5rem;right:1.5rem;z-index:200;display:flex;flex-direction:column;gap:.5rem;pointer-events:none}
    .toast{padding:.7rem 1.1rem;border-radius:10px;font-size:.84rem;font-weight:600;box-shadow:var(--sh2);color:#fff;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s;pointer-events:none}
    .toast.show{opacity:1;transform:translateY(0)}
    .toast-success{background:var(--green)}.toast-error{background:var(--red)}.toast-info{background:var(--blue)}

    /* Contact */
    .contact-avatar{font-size:.72rem;font-weight:700;letter-spacing:.02em;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--blue-light);color:var(--blue);text-transform:uppercase}
    .contact-avatar.company{background:transparent;border:1.5px solid var(--blue);color:var(--blue);border-radius:6px}
    .contact-avatar.patient{background:var(--g100);color:var(--g700)}

    /* ── Scanner bar (2026-05-26 — theme-aware color harmonization) ──────
       Was: fixed `var(--g800)` outer + barely-visible 8% white inner →
       layered boxes felt mismatched and washed out in dark/premium themes.
       Now: --surface-2 outer + --surface-deeper inner via subtle inset
       shadow → clear 2-tone hierarchy that adapts per theme automatically.
       Light theme overrides below give a darker accent strip that stands
       out against the page (operator-flagged: scanner is a critical action,
       deserves visual emphasis). */
    .scan-bar{
      display:flex;align-items:center;gap:.75rem;
      background:var(--surface-2, var(--g800));
      color:var(--text, #fff);
      border:1px solid var(--border, transparent);
      border-radius:var(--r-lg);padding:.85rem 1.25rem;
      margin-bottom:1.25rem;
      box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
    }
    /* Light theme: dark inverted strip so the scanner pops on white pages */
    body[data-theme="light"] .scan-bar,
    body:not([data-theme]) .scan-bar{
      background:linear-gradient(180deg, #1f2937 0%, #111827 100%);
      color:#f1f5f9;
      border-color:rgba(255,255,255,.08);
    }
    .scan-bar-icon{font-size:1.2rem;flex-shrink:0;opacity:.85}
    .scan-bar-label{
      font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      color:var(--muted-strong, #94a3b8);white-space:nowrap;
    }
    body[data-theme="light"] .scan-bar-label,
    body:not([data-theme]) .scan-bar-label{ color:#94a3b8; }
    .scan-input{
      flex:1;
      background:rgba(0,0,0,.35);
      border:1.5px solid rgba(255,255,255,.10);
      border-radius:8px;padding:.55rem 1rem;font-size:.9rem;
      color:#f1f5f9;
      font-family:monospace;letter-spacing:.05em;
      box-shadow:0 1px 2px rgba(0,0,0,.25) inset;
      transition:border-color .15s, background .15s;
    }
    body[data-theme="premium"] .scan-input{
      background:rgba(0,0,0,.45);
      border-color:rgba(212,160,23,.20);
      color:var(--gold-bright, #f0c040);
    }
    .scan-input::placeholder{color:rgba(255,255,255,.32)}
    .scan-input:focus{
      outline:none;
      border-color:var(--blue, #4a90e2);
      background:rgba(0,0,0,.45);
      box-shadow:0 0 0 3px rgba(74,144,226,.18), 0 1px 2px rgba(0,0,0,.25) inset;
    }
    body[data-theme="premium"] .scan-input:focus{
      border-color:var(--gold, #d4a017);
      box-shadow:0 0 0 3px rgba(212,160,23,.18), 0 1px 2px rgba(0,0,0,.25) inset;
    }
    .scan-status{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.55);white-space:nowrap;letter-spacing:.05em}
    .scan-status.hit{color:#4ade80}
    .scan-status.miss{color:#f87171}
    body[data-theme="premium"] .scan-status.hit{color:var(--gold-bright, #f0c040)}

    /* ── Barcode label modal ──────────────────────────────────────────── */
    .label-modal-overlay{
      position:fixed;inset:0;background:rgba(0,0,0,.45);
      z-index:200;display:flex;align-items:center;justify-content:center;
    }
    .label-modal{
      background:#fff;border-radius:var(--r-lg);
      width:min(520px,95vw);max-height:90vh;overflow-y:auto;
      box-shadow:0 20px 60px rgba(0,0,0,.2);
    }
    .label-modal-head{
      padding:1rem 1.25rem;border-bottom:1px solid var(--g200);
      display:flex;align-items:center;justify-content:space-between;
    }
    .label-modal-title{font-weight:800;font-size:.95rem}
    .label-modal-body{padding:1.5rem}
    .label-preview{
      border:1.5px dashed var(--g300);border-radius:10px;
      padding:1.25rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;
      background:#fafafa;margin-bottom:1.25rem;
    }
    .label-preview svg{max-width:100%}
    .label-name{font-weight:800;font-size:.9rem;text-align:center}
    .label-ref{font-family:monospace;font-size:.75rem;color:var(--g600)}
    .label-price{font-weight:900;font-size:1.1rem;color:var(--blue)}
    .label-grade{font-size:.72rem}
    .label-actions{display:flex;gap:.75rem;flex-wrap:wrap}
    @media print{
      body > *:not(.label-print-frame){display:none!important}
      .label-print-frame{display:block!important}
    }
    .label-size-row{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
    .label-size-btn{
      padding:.3rem .75rem;border-radius:99px;font-size:.76rem;font-weight:600;
      border:1.5px solid var(--g200);background:var(--white);cursor:pointer;
    }
    .label-size-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}

    /* Dashboard */
    .dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin-bottom:1.5rem}
    .dash-module-card{background:var(--white);border:1px solid var(--g200);border-radius:var(--r-lg);padding:1.25rem;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;gap:.5rem}
    .dash-module-card:hover{border-color:var(--blue);box-shadow:var(--sh2);transform:translateY(-2px)}
    .dash-module-icon{font-size:1.75rem;color:var(--blue);display:inline-flex;align-items:center;justify-content:flex-start;width:32px;height:32px}
    .dash-module-icon svg{width:100%;height:100%}
    .dash-module-title{font-weight:800;font-size:.95rem}.dash-module-sub{font-size:.78rem;color:var(--g600)}

    /* Ecom bridge */
    .ecom-bridge{background:linear-gradient(135deg,var(--blue) 0%,#2563eb 100%);color:#fff;border-radius:var(--r-lg);padding:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;margin-bottom:1.5rem;transition:opacity .15s;text-decoration:none}
    .ecom-bridge:hover{opacity:.93}
    .ecom-bridge .title{font-weight:800;font-size:.95rem}
    .ecom-bridge .sub{font-size:.78rem;opacity:.85;margin-top:.2rem}
    .ecom-bridge-arrow{font-size:1.5rem;opacity:.8}

/* ── HOLDCO-LENS toggle + source-company badge (2026-06-14) ── */
/* Active (group/lens-on) state uses the gold secondary per the brand color system. */
.holdco-lens-toggle { display:inline-flex; align-items:center; gap:.4rem; }
.holdco-lens-toggle.active { background:var(--gold); color:#fff; border-color:var(--gold); }
.holdco-lens-toggle.active:hover { background:var(--goldH, var(--gold)); }
.source-company-badge { font-size:.68rem; letter-spacing:.02em; }
