/* ═══════════════════════════════════════════════════════════════════════════
   COMTRIG app shell — the locked light design (design_handoff_shell).
   Loaded by EVERY dashboard page (after its own <style>, so ties resolve to
   these rules). Scoped under html[data-shell="v2"], which /Shared Data/shell.js
   sets before first paint. The Sales dashboard carries an embedded copy of the
   same design (it was the pilot) — keep the two visually identical when
   editing. Tokens: accent #2563eb · surface #fff · page bg #f6f7f9 ·
   border #e6e8ec/#eef0f3 · text #1a1d23/#5b6472/#98a1b0.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-shell="v2"] body {
  background: #f6f7f9;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1a1d23;
}

/* ── Sidebar ── */
html[data-shell="v2"] .sidebar { width: 238px; background: #fff; border-right: 1px solid #e6e8ec; color: #1a1d23; }
html[data-shell="v2"] .main { margin-left: 238px; }
html[data-shell="v2"] .sidebar .logo { padding: 20px 20px 16px; border-bottom: 1px solid #eef0f3; display: flex; align-items: center; gap: 11px; }
html[data-shell="v2"] .sv2-home { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
html[data-shell="v2"] .sv2-home:hover .sv2-name { color: #2563eb; }
html[data-shell="v2"] .sv2-tile { width: 32px; height: 32px; border-radius: 8px; background: #2563eb; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; flex-shrink: 0; font-style: normal; }
html[data-shell="v2"] .sv2-name { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: #1a1d23; font-style: normal; }
html[data-shell="v2"] .sv2-sub { font-size: 10.5px; color: #98a1b0; font-weight: 500; letter-spacing: 0.04em; }
html[data-shell="v2"] .sidebar nav { padding: 14px 12px; display: flex; flex-direction: column; gap: 3px; }
html[data-shell="v2"] .sv2-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: #aab2bf; padding: 6px 12px; }
html[data-shell="v2"] .sv2-label.sv2-sys { padding-top: 14px; }
html[data-shell="v2"] .sidebar nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: #5b6472; border-left: none; }
html[data-shell="v2"] .sidebar nav a:hover { background: #f2f4f7; color: #1a1d23; }
html[data-shell="v2"] .sidebar nav a.active { background: #eaf1fe; color: #2563eb; font-weight: 600; border-left: none; }
html[data-shell="v2"] .sv2-ico { width: 18px; height: 18px; flex-shrink: 0; }
html[data-shell="v2"] .sidebar .sidebar-footer { padding: 14px 16px; border-top: 1px solid #eef0f3; color: #5b6472; }
html[data-shell="v2"] .sv2-footrow { display: flex; align-items: center; gap: 10px; }
html[data-shell="v2"] .sv2-avatar { width: 32px; height: 32px; border-radius: 50%; background: #e8effe; color: #2563eb; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex-shrink: 0; }
html[data-shell="v2"] .sv2-uname { font-size: 12.5px; font-weight: 600; color: #1a1d23; }
html[data-shell="v2"] .sv2-urole { font-size: 11px; color: #98a1b0; }
html[data-shell="v2"] .sv2-pill { font-size: 9.5px; font-weight: 600; color: #98a1b0; border: 1px solid #e0e3e8; border-radius: 5px; padding: 2px 5px; margin-left: auto; }
/* ── Collapsible sidebar ──
   shell.js reads localStorage and stamps html[data-sidebar="hidden"] before
   first paint, then appends the .sv2-sbtoggle handle (a chevron pinned to the
   sidebar's edge, vertically centered). Clicking it slides the sidebar away
   so the content gets the full width; the choice is remembered per browser. */
html[data-shell="v2"] .sidebar { transition: transform .18s ease, visibility 0s; }
html[data-shell="v2"] .main { transition: margin-left .18s ease; }
html[data-shell="v2"] .sv2-sbtoggle { position: fixed; top: 50%; left: 225px; transform: translateY(-50%); z-index: 120; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid #e0e3e8; color: #98a1b0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.07); transition: left .18s ease; }
html[data-shell="v2"] .sv2-sbtoggle:hover { color: #2563eb; border-color: #bcd3fa; }
html[data-shell="v2"] .sv2-sbtoggle svg { width: 14px; height: 14px; transition: transform .18s ease; }
html[data-shell="v2"][data-sidebar="hidden"] .sidebar { transform: translateX(-100%); visibility: hidden; transition: transform .18s ease, visibility 0s .18s; }
html[data-shell="v2"][data-sidebar="hidden"] .main { margin-left: 0; }
html[data-shell="v2"][data-sidebar="hidden"] .sv2-sbtoggle { left: 8px; }
html[data-shell="v2"][data-sidebar="hidden"] .sv2-sbtoggle svg { transform: rotate(180deg); }
/* auth.js injects the signed-in block with dark-theme inline colors — flip them */
html[data-shell="v2"] #__auth_sidebar_user { border-top: 1px solid #eef0f3 !important; color: #98a1b0 !important; font-family: inherit !important; }
html[data-shell="v2"] #__auth_sidebar_user a { color: #2563eb !important; }

/* ── Top bar ── */
html[data-shell="v2"] .topbar { background: #fff; color: #1a1d23; border-bottom: 1px solid #e6e8ec; min-height: 60px; padding: 10px 24px; }
html[data-shell="v2"] .topbar h1 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #1a1d23; }
html[data-shell="v2"] .topbar h1 .crumb { color: #98a1b0; font-weight: 500; }
html[data-shell="v2"] .topbar .subtitle { color: #98a1b0; }
html[data-shell="v2"] .topbar .mock-badge { border: 1px solid #e6e8ec; }
/* Inventory's tabs + hint live inside the top bar — light treatment */
html[data-shell="v2"] .nav-tab { background: #fff; border: 1px solid #d7dbe2; color: #5b6472; box-shadow: none; }
html[data-shell="v2"] .nav-tab:hover { background: #f2f4f7; color: #1a1d23; }
html[data-shell="v2"] .nav-tab.active { background: #eaf1fe; border-color: #bcd3fa; color: #2563eb; box-shadow: none; }
html[data-shell="v2"] .nav-hint, html[data-shell="v2"] #tabhint { color: #98a1b0; }
html[data-shell="v2"] #tabhint b { color: #5b6472; }
/* Settings sub-nav (Models / Data / COGS tabs) */
html[data-shell="v2"] .subnav a.active { color: #2563eb; border-bottom-color: #2563eb; }

/* ── Cards ── */
html[data-shell="v2"] .kpi, html[data-shell="v2"] .chart-card, html[data-shell="v2"] .table-card,
html[data-shell="v2"] .filters-bar, html[data-shell="v2"] .ov-card, html[data-shell="v2"] .ord-card,
html[data-shell="v2"] .detail-card { border: 1px solid #e6e8ec; border-radius: 12px; box-shadow: none; }
html[data-shell="v2"] .kpi .label { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #667085; }
html[data-shell="v2"] .kpi .value { font-weight: 600; font-family: 'IBM Plex Mono', monospace; letter-spacing: -0.03em; }

/* ── Tables: light header row (colors only — each page keeps its metrics) ── */
html[data-shell="v2"] thead th { background: #fafbfc; color: #667085; border-bottom: 1px solid #e6e8ec; }
html[data-shell="v2"] thead th.sortable:hover { color: #2563eb; }
html[data-shell="v2"] thead th .sort-arrow { color: #98a1b0; }
html[data-shell="v2"] thead th.sort-active, html[data-shell="v2"] thead th.sort-active .sort-arrow { color: #2563eb; }
/* the Inventory production mini-grid keeps its compact blue-grey header */
html[data-shell="v2"] table.ord-grid thead th, html[data-shell="v2"] table.ord-grid th { background: #e9eff7; color: #34507a; }

/* ── Interactive accents: blue replaces the old orange ── */
html[data-shell="v2"] .filter-chip:hover { border-color: #2563eb; }
html[data-shell="v2"] .filter-chip.active { background: #2563eb; border-color: #2563eb; color: #fff; }
html[data-shell="v2"] .dropdown-filter-btn:hover { border-color: #2563eb; }
html[data-shell="v2"] .count-badge { background: #2563eb; }
html[data-shell="v2"] .action-btn { background: #2563eb; color: #fff; }
html[data-shell="v2"] .action-btn:hover { background: #1d4fc4; }
html[data-shell="v2"] .action-btn.lo { background: #eaf1fe; color: #1d4ed8; border: 1px solid #bcd3fa; }
html[data-shell="v2"] .action-btn.lo:hover { background: #dbe8fd; border-color: #93b8f5; color: #173da6; }
html[data-shell="v2"] .action-btn.secondary { background: #fff; color: #1a1d23; border: 1px solid #d7dbe2; }

/* ── Narrow screens: same 60px icon rail as the pilot ── */
@media (max-width: 900px) {
  html[data-shell="v2"] .sidebar { width: 60px; }
  html[data-shell="v2"] .main { margin-left: 60px; }
  html[data-shell="v2"] .sv2-sbtoggle { left: 47px; } /* hidden-state left:8px still wins (higher specificity) */
  html[data-shell="v2"] .sidebar .logo { padding: 14px 0 12px; justify-content: center; }
  html[data-shell="v2"] .sv2-titles, html[data-shell="v2"] .sv2-label,
  html[data-shell="v2"] .sv2-footrow, html[data-shell="v2"] #__auth_sidebar_user { display: none !important; }
  html[data-shell="v2"] .sidebar nav a { justify-content: center; }
  html[data-shell="v2"] .sidebar nav a span { display: none; }
}

/* ── Second sweep: page-specific accents unified with the design ── */
/* Admin (Settings) primary buttons */
html[data-shell="v2"] .btn-primary { background: #2563eb; color: #fff; }
html[data-shell="v2"] .btn-primary:hover { background: #1d4fc4; }
/* Excel export buttons everywhere → the design's green */
html[data-shell="v2"] button[onclick*="downloadExcel"],
html[data-shell="v2"] button[onclick*="exportExcel"] { background: #f2fbf5 !important; color: #12894f !important; border: 1px solid #cfe6d8 !important; border-radius: 9px !important; }
html[data-shell="v2"] button[onclick*="downloadExcel"]:hover,
html[data-shell="v2"] button[onclick*="exportExcel"]:hover { background: #e7f7ee !important; }
/* PPC / SQP totals rows follow the light look (Sales already does) */
html[data-shell="v2"] tbody tr.total-row { background: #f4f6f9; color: #1a1d23; border-top: 2px solid #dfe3e9; }
html[data-shell="v2"] tbody tr.total-row .text-green { color: #12894f; }
html[data-shell="v2"] tbody tr.total-row .text-red { color: #dc2626; }
/* Inventory filter chips: blue accent instead of amber */
html[data-shell="v2"] .filters-bar .chip:hover { border-color: #2563eb; color: #1d4ed8; }
html[data-shell="v2"] .filters-bar .chip.active { background: #eaf1fe; color: #1d4ed8; border-color: #bcd3fa; }
/* totals-row cells that carry their own dark/sticky backgrounds (SQP, PPC) */
html[data-shell="v2"] tbody tr.total-row td { background: #f4f6f9 !important; color: #1a1d23; }
/* Settings pages' marketplace segment (Both / US / CA) */
html[data-shell="v2"] .mkt-filter button.active { background: #2563eb; color: #fff; }

/* ═══ Notices — ONE banner design across every page (handoff notice card) ═══
   Three intents: .warn (amber heads-up) · .info (blue FYI) · .danger (red).
   Canonical geometry for all page-top banners; per-page classes are mapped
   onto the same three palettes below. */
html[data-shell="v2"] .app-notice, html[data-shell="v2"] .notice,
html[data-shell="v2"] .data-warning, html[data-shell="v2"] .mockup-notice,
html[data-shell="v2"] .live-notice, html[data-shell="v2"] .unassigned-banner,
html[data-shell="v2"] .missing-sku-banner, html[data-shell="v2"] .missing-cogs-banner,
html[data-shell="v2"] .currency-note {
  border-radius: 11px; border: 1px solid transparent; font-size: 12.5px; line-height: 1.5; padding: 12px 14px;
}
/* page-top banners share the page gutter; in-content banners keep their flow */
html[data-shell="v2"] .app-notice, html[data-shell="v2"] .notice,
html[data-shell="v2"] .data-warning { margin: 14px 28px 0; }
/* amber — heads-up / data quality */
html[data-shell="v2"] .app-notice.warn, html[data-shell="v2"] .notice-warn,
html[data-shell="v2"] .data-warning, html[data-shell="v2"] .unassigned-banner {
  background: #fffbeb; border-color: #fce6a8; color: #7c5b13;
}
html[data-shell="v2"] .app-notice.warn strong, html[data-shell="v2"] .notice-warn strong, html[data-shell="v2"] .notice-warn b,
html[data-shell="v2"] .data-warning strong, html[data-shell="v2"] .unassigned-banner h3 { color: #8a5a00; }
/* blue — informational */
html[data-shell="v2"] .app-notice.info, html[data-shell="v2"] .live-notice,
html[data-shell="v2"] .mockup-notice, html[data-shell="v2"] .missing-sku-banner,
html[data-shell="v2"] .currency-note {
  background: #eff6ff; border-color: #bfdbfe; color: #1e40af; border-left-width: 1px;
}
html[data-shell="v2"] .currency-note strong { color: #1e3a8a; }
html[data-shell="v2"] .mockup-notice strong, html[data-shell="v2"] .live-notice strong,
html[data-shell="v2"] .missing-sku-banner h3 { color: #1e3a8a; }
/* red — errors / must fix */
html[data-shell="v2"] .app-notice.danger, html[data-shell="v2"] .notice-err,
html[data-shell="v2"] .missing-cogs-banner {
  background: #fef2f2; border-color: #fecaca; color: #b42318;
}
html[data-shell="v2"] .missing-cogs-banner h3 { color: #991b1b; }
/* Inventory's collapsible warnings summary + per-model warnings box join the family */
html[data-shell="v2"] .warn-card { background: #fffbeb; border: 1px solid #fce6a8; border-radius: 11px; margin: 14px 28px 12px; }
html[data-shell="v2"] .warn-body { border-top: 1px solid #fce6a8; }
html[data-shell="v2"] .warn-hint { color: #b08a3e; }
html[data-shell="v2"] .warn-caret { color: #8a5a00; }
html[data-shell="v2"] .detail-warns { background: #fffbeb; border-color: #fce6a8; }
html[data-shell="v2"] .detail-warns .dw-head { color: #7c5b13; }
html[data-shell="v2"] .detail-warns .dw-sub { color: #b08a3e; }