/**
 * 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 }
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) }

/* ── 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) }
.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 }
.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) }