/* ===========================================================================
   ch-dashboard.css — single source of truth for CH web surfaces
   (/accounts, /ceo, /costing, /dispatch, /finance, /inventory, /procurement,
   /quality, /sales, /admin, /login). Linked from each module's base.html or
   embedded by admin routes.

   Replaces duplicated styles previously scattered across surface base
   templates. Token names support both old conventions
   (--line/--good/--bad) and the dispatch-original (--border/--ok/--danger)
   via aliases so existing markup keeps rendering during the migration.

   Section index:
     1. Tokens
     2. Reset + body
     3. Brand chrome (top strip, header, nav, footer)
     4. Layout primitives (container, card, grids, stack)
     5. Typography utilities
     6. Buttons + form controls
     7. Pills + badges
     8. Banners + alerts + guardrails + narrative
     9. KPI tiles + stats
    10. Tables (kv, right-num, wp-table, pl-grid)
    11. Patterns (channel strip, composition, waterfall, tabs, calendar)
    12. CEO-specific patterns (pulse, watchpoints, composite tile)
    13. Dispatch-specific patterns (row bands, hints, action list)
    14. Tooltips
    15. Freshness badges
    16. Mobile responsive
   =========================================================================== */


/* ====== 1. Tokens ====== */
:root {
  /* Country Harvest brand palette (Corporate / Trade register).
     Source: Design/Brand-Tokens.md, approved 2026-04-27. */
  --ch-master-red:    #EE1C24;
  --ch-deep-crimson:  #8B0304;
  --ch-cover-yellow:  #FACA20;
  --ch-navy:          #1B3A5C;
  --navy:             var(--ch-navy);

  /* Surfaces + ink */
  --bg:      #ffffff;
  --paper:   #ffffff;
  --ink:     #1a1a1a;
  --muted:   #555555;

  /* Lines / borders (--line is canonical, --border is alias for legacy markup) */
  --line:    #eaeaea;
  --line-soft: #f2f2f2;
  --border:  var(--line);

  /* Brand accents */
  --accent:        var(--ch-navy);
  --accent-hover:  var(--ch-navy);
  --accent-soft:   #dbeafe;
  --info:          var(--ch-navy);

  /* RAG status — semantic, intentionally NOT brand crimson.
     --good/--bad/--warn are canonical; --ok/--danger are dispatch-legacy aliases. */
  --good:    #548235;
  --warn:    #b45309;
  --bad:     #b91c1c;
  --ok:      var(--good);
  --danger:  var(--bad);

  /* Pill / badge backgrounds */
  --pill-red:    #fee2e2;
  --pill-amber:  #fef3c7;
  --pill-green:  #dcfce7;
  --pill-info:   #dbeafe;
  --pill-blue:   #dbeafe;
  --pill-muted:  #f1f5f9;

  /* Row band tints (dispatch L1/L2 plan rows) */
  --row-l1:  #fdf3f3;
  --row-l2:  #fdf6e3;

  /* Subtle backgrounds */
  --tile-bg:    #fafbfc;
  --hover-bg:   #f9fafb;

  /* Layout constants */
  --container-max:   1100px;
  --container-pad:   24px;
  --container-pad-m: 12px;
  --radius:          8px;
  --radius-sm:       6px;
  --radius-pill:     999px;
}


/* ====== 2. Reset + body ====== */
* { box-sizing: border-box; }
html {
  max-width: 100%;
  overflow-x: hidden;
}
.no-js .echarts-container {
  display: none !important;
}

/* Shared state utilities. JS toggles these classes instead of writing
   presentation styles onto elements at runtime. */
.is-hidden {
  display: none !important;
}
.is-muted {
  opacity: 0.6;
}
.is-deleted-row {
  opacity: 0.4;
  text-decoration: line-through;
}
body {
  margin: 0;
  padding: var(--container-pad);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  max-width: 100%;
  overflow-x: hidden;
}


/* ====== 3. Brand chrome ====== */
.ch-strip {
  height: 4px;
  background: var(--ch-master-red);
  margin: calc(var(--container-pad) * -1) calc(var(--container-pad) * -1) 0 calc(var(--container-pad) * -1);
}
.demo-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 calc(var(--container-pad) * -1);
  padding: 8px var(--container-pad);
  border-bottom: 1px solid #f7c948;
  background: #fff4c2;
  color: #533f03;
  font-size: 12px;
}
.demo-banner strong {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--ch-master-red);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.demo-banner span {
  min-width: 0;
}
.ch-logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.ch-logo img {
  display: block;
  height: 40px;
  width: auto;
  min-width: 120px;
}
.ch-logo .title,
.ch-page-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ch-deep-crimson);
  letter-spacing: 0.02em;
  margin: 0;
}

/* JARVIS chip — was inline-styled 6 ways across files; one class now. */
.jarvis-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  background: var(--ch-master-red);
  color: #fff;
  border-radius: 3px;
  vertical-align: middle;
}

/* Unified header bar — used by the Jarvis web suite. */
header.brand,
header.ch-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 20px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  gap: 16px 24px;
  flex-wrap: wrap;
}
/* Brand-row sizes to its content (logo + page title + jarvis chip).
   The cross-suite nav is forced onto its own row below, so its x-position
   does not drift between pages with different title lengths. */
header.brand .brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  order: 1;
}
header.brand .meta,
header.ch-header-bar .meta {
  font-size: 12px;
  color: var(--muted);
}
header.brand .actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  order: 3;
}

/* Surface-level shortcuts for nested pages. The cross-dashboard
   `.nav-strip` answers "which app am I in?"; this answers "where can
   I go inside this app?" without making every drill page invent its
   own back-link pattern. */
.surface-nav {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--tile-bg);
}
.surface-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 4px 9px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.surface-nav a.current {
  color: var(--accent);
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-weight: 600;
}
.surface-nav a:hover {
  color: var(--accent);
  background: var(--paper);
}

/* CSP-safe utility classes. Use these instead of inline style attributes so
   Content-Security-Policy can drop style-src unsafe-inline. */
.u-no-margin { margin: 0 !important; }
.u-mt-8 { margin-top: 8px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mt-1em { margin-top: 1em !important; }
.u-mb-12 { margin-bottom: 12px !important; }
.u-py-12 { padding-top: 12px !important; padding-bottom: 12px !important; }
.u-flex-wrap-gap {
  display: flex !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.u-flex-between-wrap {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.u-text-muted { color: #666 !important; }
.u-text-small { font-size: 13px !important; }
.u-text-xs { font-size: 11px !important; }
.u-code-xs { font-size: 11px !important; }
.u-text-normal { font-weight: 400 !important; }
.u-navy { color: #1B3A5C !important; }
.u-good { color: var(--good) !important; }
.u-danger { color: var(--ch-master-red) !important; }
.u-required { color: var(--ch-master-red) !important; }
.u-export-actions {
  margin-bottom: 12px !important;
  text-align: right !important;
}
.u-chart-760-lg,
.u-chart-760-md,
.u-chart-760-sm,
.u-chart-760-xs,
.u-chart-760-mini {
  width: 100%;
  max-width: 760px;
}
.u-chart-760-lg { height: 340px; }
.u-chart-760-md { height: 300px; }
.u-chart-760-sm { height: 280px; }
.u-chart-760-xs { height: 240px; }
.u-chart-760-mini { height: 90px; margin-top: 12px; }
.u-border-top-soft { border-top: 1px solid #e5e7eb; }
.u-border-left-danger { border-left: 4px solid var(--ch-master-red); }

/* Admin-specific chrome and ledger helpers. Kept here rather than inline in
   jarvis/admin/routes.py so the global CSP can reject inline styles. */
.admin-ui .kpi-tile {
  background: var(--bg-card, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.admin-ui .kpi-tile h2 {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 6px;
  font-weight: 500;
}
.admin-ui .kpi-tile .value {
  font-size: 24px;
  font-weight: 700;
  color: var(--navy, #1B3A5C);
}
.admin-ui .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.admin-ui .empty {
  color: var(--muted);
  font-style: italic;
  padding: 24px;
  text-align: center;
}
.admin-ui .badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.admin-ui .badge-green { background: var(--pill-green, #dcfce7); color: var(--good, #1e7e34); }
.admin-ui .badge-amber { background: var(--pill-amber, #fef3c7); color: var(--warn, #856404); }
.admin-ui .badge-red   { background: var(--pill-red, #fee2e2);   color: var(--bad, #721c24); }
.admin-ui .badge-blue  { background: var(--pill-info, #d1ecf1);  color: #0c5460; }
.admin-ui .admin-h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy, #1B3A5C);
  margin: 16px 0 14px;
}
.admin-ui .admin-subnav {
  font-size: 12px !important;
  gap: 10px !important;
  margin-top: 6px;
  padding-top: 4px;
  opacity: 0.85;
}
.admin-ui .admin-subnav a { padding: 2px 8px !important; }
.admin-ui .admin-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-ui .admin-detail-table th {
  width: 180px;
  color: var(--muted);
  font-weight: 600;
}
.admin-ui .admin-detail-pre {
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--tile-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 12px;
  line-height: 1.45;
}
.admin-ui .admin-detail-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.admin-ui .admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
}
.admin-ui .admin-filter-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.admin-ui details summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}
@media (max-width: 600px) {
  .admin-ui .admin-subnav {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto;
    opacity: 1 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-ui .admin-subnav::-webkit-scrollbar { display: none; }
  .admin-ui .admin-subnav a {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 8px 10px !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--tile-bg) !important;
    text-align: center !important;
  }
  .admin-ui .admin-table-wrap { position: relative; }
  .admin-ui .admin-table-wrap > table:has(th:nth-child(4)) { min-width: 680px; }
  .admin-ui .admin-table-wrap > table:has(th:nth-child(6)) { min-width: 820px; }
  .admin-ui .admin-table-wrap > table:has(th:nth-child(8)) { min-width: 960px; }
}

/* Nav strip — pill-outlined active state, used by the Jarvis web suite. */
.nav-strip {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 13px;
  flex-wrap: wrap;
}
header.brand > .nav-strip {
  flex: 1 1 100%;
  order: 2;
  width: 100%;
}
.nav-strip a {
  color: var(--muted);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
}
.nav-strip a.current,
.nav-strip a[aria-current="page"] {
  color: var(--accent);
  border-color: var(--line);
  background: var(--paper);
  font-weight: 600;
}
.nav-strip a:hover:not(.current):not([aria-current="page"]) {
  color: var(--accent);
}
.nav-logout {
  margin: 0;
  margin-left: auto;
}
.nav-logout button {
  min-height: 0;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  color: var(--muted);
  background: transparent;
  box-shadow: none;
}
.nav-logout button:hover {
  color: var(--bad);
  background: var(--paper);
}

/* Crimson footer */
.ch-footer {
  background: var(--ch-deep-crimson);
  color: #fff;
  margin: 32px calc(var(--container-pad) * -1) calc(var(--container-pad) * -1) calc(var(--container-pad) * -1);
  padding: 18px var(--container-pad);
  font-size: 12px;
  line-height: 1.5;
}
.ch-footer a {
  color: var(--ch-cover-yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ch-footer a:hover { color: #fff; }
.ch-footer .entity {
  opacity: 0.85;
  margin-top: 4px;
}


/* ====== 4. Layout primitives ====== */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.card h2 {
  font-size: 15px;
  margin: 0 0 12px 0;
  color: var(--accent);
  letter-spacing: 0.02em;
  /* Akash 2026-05-07: Title Case default for ALL dashboard card
     headers across the 5 surfaces. CSS `capitalize` capitalises
     first letter of each word — leaves already-uppercase letters
     alone (so "SKU", "FIFO", "P&L", "CM%", "MTD" stay caps).
     Subtitle spans (.muted, .freshness-chip, .head-tail) reset
     to none below so " — sorted by CM Rs" doesn't become
     " — Sorted By Cm Rs". */
  text-transform: capitalize;
}
/* Subtitle spans inside h2 — preserve sentence-case copy. The
   capitalize rule above cascades by default; these resets pin
   the muted/secondary spans back to natural casing. */
.card h2 .muted,
.card h2 .recon-h2-sub,
.card h2 .h2-sub,
.card h2 .normal,
.card h2 .small,
.card h2 .freshness-chip,
.card h2 .head-tail,
.card h2 code,
.card h2 a code {
  text-transform: none;
  letter-spacing: 0;
}
/* Same Title Case treatment for collapsible-card summaries +
   the `.codes-h2` in-content header used by the by-item-code
   drawer. Match the h2 register since these act as panel titles. */
details.card > summary > .summary-title,
.codes-drawer > summary > .summary-title,
.codes-h2 {
  text-transform: capitalize;
}
.card h3 {
  font-size: 13px;
  margin: 16px 0 6px 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.card .head h2 { margin: 0; }
.card .head .panel-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Card with left-edge accent (warn / good / info) — replaces ad-hoc
   inline border-left on /sales. */
.card.accent-warn { border-left: 3px solid var(--warn); }
.card.accent-bad  { border-left: 3px solid var(--bad); }
.card.accent-good { border-left: 3px solid var(--good); }
.card.accent-info { border-left: 3px solid var(--info); }

/* Compact card variant for status strips */
.card.compact { padding: 12px 18px; }

/* Automatic long-card collapse. The shared collapsible_cards.js marks
   row-heavy cards so the first viewport stays scannable on phones while
   preserving the full table/list behind an explicit expand control. */
.card.card-auto-collapse {
  position: relative;
}
.card.card-auto-collapse.is-card-collapsed {
  max-height: 640px;
  overflow: hidden;
  padding-bottom: 72px;
}
.card-collapse-footer {
  display: flex;
  justify-content: center;
  margin-top: 14px;
  position: relative;
  z-index: 2;
}
.card.card-auto-collapse.is-card-collapsed .card-collapse-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 28px 16px 14px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    var(--paper) 42%,
    var(--paper)
  );
  border-radius: 0 0 var(--radius) var(--radius);
}
.card-collapse-toggle {
  display: inline-flex;
  align-items: center;
}
@media (max-width: 700px) {
  .card.card-auto-collapse.is-card-collapsed {
    max-height: 520px;
  }
}

/* Two-up grid for landing-page card layouts */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

/* Stat-row grid (sales /sales) */
.grid-perf {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* Watchpoint / pulse / KPI tile grids */
.tile-grid,
.watchpoint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

@media (min-width: 761px) and (max-width: 1080px) {
  .kpis,
  .grid-perf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cards,
  .tile-grid,
  .watchpoint-grid,
  .pulse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Shared SS identity/evidence strip */
.ss-summary-strip {
  display: grid;
  gap: 14px;
}
.ss-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.ss-summary-title {
  min-width: 0;
}
.ss-summary-title .eyebrow {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.ss-summary-title h2 {
  margin: 0;
  overflow-wrap: anywhere;
}
.ss-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}
.ss-summary-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 150px;
}
.ss-summary-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.ss-summary-source {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 12px;
}
.ss-summary-source span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ss-summary-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ss-summary-metric {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--tile-bg);
}
.ss-summary-metric span,
.ss-summary-metric small {
  display: block;
  min-width: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.ss-summary-metric span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.ss-summary-metric strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.ss-summary-metric small {
  margin-top: 3px;
  font-size: 12px;
}
@media (min-width: 761px) and (max-width: 1080px) {
  .ss-summary-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .ss-summary-head {
    display: grid;
  }
  .ss-summary-status,
  .ss-summary-actions {
    justify-content: flex-start;
  }
  .ss-summary-metrics {
    grid-template-columns: 1fr;
  }
}

hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 14px 0;
}


/* ====== 5. Typography utilities ====== */
.muted { color: var(--muted); }
.right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.center { text-align: center; }
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tabular { font-variant-numeric: tabular-nums; }
.small { font-size: 13px; }
.xsmall { font-size: 12px; }
.tiny { font-size: 11px; }
.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.good { color: var(--good); }
.bad  { color: var(--bad); }
.warn { color: var(--warn); }
/* Utility helpers — undo h2/h3 weight or letter-spacing inside an inline span. */
.normal { font-weight: normal; }
.lower  { text-transform: none; letter-spacing: 0; }
.dim    { opacity: 0.7; }
.flex-1 { flex: 1; }


/* ====== 6. Buttons + form controls ====== */
button, .btn {
  font: inherit;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  line-height: 1.4;
  overflow-wrap: normal;
  text-align: center;
  white-space: nowrap;
  word-break: normal;
}
button:hover:not(:disabled),
.btn:hover { background: var(--hover-bg); }
button:disabled,
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary CTA — master red (click-bright) → deep crimson on hover */
button.primary, .btn.primary,
.btn-primary {
  background: var(--ch-master-red);
  color: white;
  border-color: var(--ch-master-red);
}
button.primary:hover:not(:disabled),
.btn.primary:hover,
.btn-primary:hover {
  background: var(--ch-deep-crimson);
  border-color: var(--ch-deep-crimson);
  color: white;
}

/* Secondary CTA — outlined deep crimson (used on /dispatch upload) */
.btn-secondary {
  background: white;
  color: var(--ch-deep-crimson);
  border: 1px solid var(--ch-deep-crimson);
}
.btn-secondary:hover {
  background: var(--ch-deep-crimson);
  color: white;
}
.btn-danger {
  background: white;
  color: var(--bad);
  border-color: var(--bad);
}
.btn-danger:hover:not(:disabled) {
  background: var(--pill-red);
  color: var(--bad);
}

/* T3.2 — Export-PDF button shared across dashboard surfaces.
   JS in /static/pdf_export.js attaches click handler to .pdf-export-btn.
   Surface markup: `<button class="pdf-export-btn" data-export-url="...">Export PDF</button>`. */
.pdf-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-sm, 6px);
  background: white;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pdf-export-btn:hover:not(:disabled) {
  border-color: var(--navy);
  background: var(--pill-info, #f1f5f9);
}
.pdf-export-btn:disabled {
  cursor: progress;
  opacity: 0.85;
}
.pdf-export-btn.pdf-export-rendering {
  border-color: var(--warn);
  background: var(--pill-amber, #fef3c7);
}
.pdf-export-btn.pdf-export-ready {
  border-color: var(--good);
  background: var(--pill-green, #dcfce7);
  color: var(--good);
}
.pdf-export-btn.pdf-export-failed {
  border-color: var(--bad);
  background: var(--pill-red, #fee2e2);
  color: var(--bad);
}

/* Chip-style button (inventory as-of picker, sku quick-links) */
.btn-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: white;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
}
.btn-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.btn-chip-on,
.btn-chip.is-on {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-chip-on:hover,
.btn-chip.is-on:hover { color: white; }

.btn-tiny {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  text-decoration: none;
}
.card-title-action {
  float: right;
  margin-left: 8px;
}

/* Form controls */
input[type=text], input[type=search], input[type=date],
select, textarea {
  font: inherit;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  width: 100%;
}
input[type=file] {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: white;
}

/* Inline search box pattern (costing nav) */
.nav-search {
  display: flex;
  gap: 6px;
  align-items: center;
}
.nav-search input { width: 220px; }
.nav-search a { font-size: 12px; }


/* ====== 7. Pills + badges (.badge is alias for .pill) ====== */
.pill, .badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
  letter-spacing: 0.04em;
}
.pill-red,    .badge-red,    .badge-danger { background: var(--pill-red);   color: var(--bad); }
.pill-amber,  .badge-amber,  .badge-warn   { background: var(--pill-amber); color: #92400e; }
.pill-green,  .badge-green,  .badge-ok     { background: var(--pill-green); color: #166534; }
.pill-info,   .badge-info                  { background: var(--pill-info);  color: var(--info); }
.pill-muted,  .badge-muted                 { background: var(--pill-muted); color: var(--muted); }


/* ====== 8. Banners + alerts + guardrails + narrative ====== */
.banner {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 13px;
}
.banner b { color: var(--accent); }
.banner.warn         { background: #fffbeb; border-color: #fde68a; }
.banner.bad,
.banner.discontinued { background: #fef2f2; border-color: #fecaca; }
.banner.good         { background: #f0fdf4; border-color: #bbf7d0; }
.banner.in_trial     { background: #f0f9ff; border-color: #bae6fd; }
.banner.info         { background: #f0f9ff; border-color: #bae6fd; }

/* Left-bordered alert (sales SS card alerts) */
.alert {
  border-left: 4px solid;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--paper);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.alert.red    { border-left-color: var(--bad); }
.alert.amber  { border-left-color: var(--warn); }
.alert.green  { border-left-color: var(--good); }
.alert .head  { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 0; }
.alert .title { font-weight: 600; }
.alert .body  { color: var(--muted); margin-top: 4px; font-size: 13px; }
.alert .ack-row { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.alert.acked { opacity: 0.65; }
.alert.acked .pill-info { background: var(--pill-green); color: var(--good); }

/* Guardrail (sales SS card order-time hints) */
.guardrail {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.guardrail.warn { background: #fffbeb; border: 1px solid #fde68a; }
.guardrail.info { background: #eff6ff; border: 1px solid #bfdbfe; }
.guardrail.good { background: #f0fdf4; border: 1px solid #bbf7d0; }
.guardrail .title { font-weight: 600; margin-bottom: 4px; }
.guardrail ul { margin: 4px 0 0 18px; padding: 0; }
.guardrail li { font-size: 13px; }

/* AI narrative box (sales SS card "Why this SS matters", CEO panel 1 fallback) */
.narrative {
  background: #f8fafc;
  border-left: 4px solid var(--accent);
  padding: 12px 16px;
  font-style: italic;
  margin-bottom: 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.narrative.loading { color: var(--muted); }
.narrative-text {
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--ink);
  font-size: 14px;
}
.narrative-collapsed {
  max-height: 7em;
  overflow: hidden;
  position: relative;
}
.narrative-collapsed.expanded { max-height: none; }
.narrative-collapsed:not(.expanded)::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2em;
  background: linear-gradient(transparent, var(--paper));
  pointer-events: none;
}
.narrative-toggle {
  margin-top: 8px;
  display: inline-block;
  cursor: pointer;
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
  border: none;
  background: none;
  padding: 0;
}
.narrative-toggle:hover { text-decoration: underline; }

/* Data-context strip — top-of-page time-window legend.
   Replaces the inline-styled banner at top of cockpit.html. */
.data-context-strip {
  background: var(--tile-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: baseline;
}
.data-context-strip strong { color: var(--accent); font-weight: 600; }

/* In-page jump links for long dashboards. Keep these quieter than the
   surface shortcuts because they navigate within the current page only. */
.page-jump-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tile-bg);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.page-jump-nav::-webkit-scrollbar { display: none; }
.page-jump-nav .label {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: 0 0 auto;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  margin-right: 2px;
  padding: 0 8px 0 0;
  background: var(--tile-bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.page-jump-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--paper);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
}
.page-jump-nav a:hover {
  color: var(--accent);
  border-color: var(--line);
}
.page-jump-nav a.is-active,
.page-jump-nav a[aria-current="location"] {
  color: var(--accent);
  border-color: var(--accent-soft);
  background: var(--pill-info);
  font-weight: 650;
}
.page-section {
  scroll-margin-top: 96px;
}
.page-back-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 30;
  min-width: 44px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: white;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.16s ease, transform 0.16s ease, background 0.16s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}
.page-back-top:hover {
  background: var(--accent);
}
.page-back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
@media print {
  .page-back-top {
    display: none !important;
  }
}


/* ====== 9. KPI tiles + stats ====== */
.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.kpi.kpi-shared {
  align-content: start;
  display: grid;
  min-height: 94px;
  text-decoration: none;
}
.kpi .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.kpi .val {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}
.kpi.kpi-shared .val {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.kpi .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.kpi.kpi-shared .sub {
  line-height: 1.35;
}
a.kpi.kpi-shared:hover {
  background: var(--hover-bg);
}
.kpi .delta-up   { color: var(--good); }
.kpi .delta-down { color: var(--bad); }
.kpi .delta-flat { color: var(--muted); }

/* Costing cockpit rebuild: finance-first, table-first surfaces. */
.costing-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0 12px;
}
.costing-hero h2 {
  margin: 0 0 4px;
  font-size: 22px;
  letter-spacing: 0;
}
.costing-hero p { margin: 0; max-width: 880px; }
.costing-actions,
.costing-sku-search,
.inline-form {
  display: flex;
  align-items: center;
  gap: 8px;
}
.costing-sku-search input {
  min-width: 320px;
}
.costing-filter-bar {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr)) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  margin: 0 0 10px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.costing-filter-bar label,
.costing-import-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.costing-filter-bar input,
.costing-filter-bar select,
.costing-sku-search input,
.costing-import-form input,
.costing-import-form textarea {
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 8px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.free-issue-review-form {
  display: grid;
  grid-template-columns: minmax(120px, 145px) minmax(150px, 1fr) auto;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  min-width: 380px;
}
.free-issue-review-form select,
.free-issue-review-form input[type=text] {
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 8px;
  font: inherit;
  color: var(--ink);
  background: #fff;
}
.review-detail-text {
  max-width: 640px;
}
.costing-status-row,
.costing-exception-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.costing-exception-strip a {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  text-decoration: none;
  background: #fff;
  font-size: 12px;
}
.costing-kpis {
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  margin-bottom: 10px;
}
.costing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 14px;
  align-items: start;
}
.costing-workflow-grid,
.costing-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
}
.costing-workflow-card {
  display: grid;
  gap: 6px;
  min-height: 132px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-decoration: none;
}
.costing-workflow-card span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.costing-workflow-card strong {
  font-size: 24px;
  line-height: 1.1;
}
.costing-workflow-card small {
  color: var(--muted);
  line-height: 1.35;
}
.costing-chart {
  width: 100%;
  min-height: 300px;
}
.costing-chart-small {
  min-height: 220px;
}
.costing-main-panel,
.costing-side-panel {
  margin-bottom: 14px;
}
.costing-side-panel {
  position: sticky;
  top: 74px;
}
.costing-dl {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 12px;
  font-size: 13px;
}
.costing-dl dt {
  color: var(--muted);
  font-weight: 600;
}
.costing-dl dd { margin: 0; }
.compact-table table {
  font-size: 12px;
}
.costing-waterfall {
  display: grid;
  gap: 8px;
}
.costing-waterfall div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.costing-waterfall div:last-child {
  border-bottom: 0;
  font-size: 16px;
}
.costing-import-form {
  gap: 8px;
}

/* Compact KPI tile — used inline within larger cards */
.kpi-tile {
  background: var(--tile-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.kpi-tile .kpi-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.kpi-tile .kpi-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

/* Sales /sales stat block (inside cards) */
.stat .label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.stat .val {
  font-size: 18px;
  font-weight: 600;
  margin-top: 2px;
}
.stat .sub {
  font-size: 11px;
  color: var(--muted);
}


/* ====== 10. Tables ====== */
table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--tile-bg);
}
table.right-num td:not(:first-child),
table.right-num th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
table th.num,
table td.num,
table th.right,
table td.right {
  white-space: nowrap;
}
table tr:last-child td { border-bottom: none; }

.empty-state-card {
  align-items: center;
  background: var(--tile-bg);
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: grid;
  gap: 10px;
  line-height: 1.45;
  padding: 14px;
}
.empty-state-card strong {
  color: var(--ink);
  display: block;
  font-size: 14px;
}
.empty-state-card span {
  display: block;
}
.empty-state-card-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 12px;
}
@media (max-width: 620px) {
  .empty-state-card-compact {
    grid-template-columns: minmax(0, 1fr);
  }
}

.evidence-collapse {
  background: var(--tile-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  line-height: 1.5;
  max-width: 100%;
  overflow: hidden;
}
.evidence-collapse > summary {
  cursor: pointer;
  display: grid;
  gap: 8px;
  list-style: none;
  padding: 8px 10px;
}
.evidence-collapse > summary::-webkit-details-marker {
  display: none;
}
.evidence-summary-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.evidence-summary-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  min-width: 0;
}
.evidence-summary-action {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}
.evidence-preview,
.evidence-full {
  font: inherit;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.evidence-preview {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
  display: -webkit-box;
  font-weight: 400;
  overflow: hidden;
  padding: 8px 0 0;
}
.evidence-full {
  background: #fff;
  border: 0;
  border-top: 1px solid var(--line-soft);
  color: var(--ink);
  display: none;
  margin: 0;
  max-height: 420px;
  overflow: auto;
  padding: 10px;
}
.evidence-collapse[open] .evidence-preview {
  display: none;
}
.evidence-collapse[open] .evidence-full {
  display: block;
}
@media (max-width: 620px) {
  .evidence-summary-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
}

.responsive-table,
.table-wrap,
.history-table-wrap,
.mix-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.responsive-table > table,
.table-wrap > table,
.history-table-wrap > table,
.mix-scroll > table {
  min-width: 680px;
}
.responsive-table::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.history-table-wrap::-webkit-scrollbar,
.mix-scroll::-webkit-scrollbar {
  height: 8px;
}
.responsive-table::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.history-table-wrap::-webkit-scrollbar-thumb,
.mix-scroll::-webkit-scrollbar-thumb {
  background: #d8d8d8;
  border-radius: var(--radius-pill);
}

.data-table,
.qvq-table,
.sc-table,
.leaderboard,
.fr-table,
.brk-table,
.rm-matrix,
.fifo-disp,
.detail-table,
.preview-num,
.committed-orders-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td,
.qvq-table th,
.qvq-table td,
.sc-table th,
.sc-table td,
.leaderboard th,
.leaderboard td,
.fr-table th,
.fr-table td,
.brk-table th,
.brk-table td,
.rm-matrix th,
.rm-matrix td,
.fifo-disp th,
.fifo-disp td,
.detail-table th,
.detail-table td,
.preview-num th,
.preview-num td,
.committed-orders-table th,
.committed-orders-table td {
  border-bottom-color: var(--line);
}
.data-table tbody tr:hover td,
.qvq-table tbody tr:hover td,
.sc-table tbody tr:hover td,
.leaderboard tbody tr:hover td,
.fr-table tbody tr:hover td,
.brk-table tbody tr:hover td,
.rm-matrix tbody tr:hover td,
.fifo-disp tbody tr:hover td,
.detail-table tbody tr:hover td,
.preview-num tbody tr:hover td,
.committed-orders-table tbody tr:hover td {
  background: #fffafa;
}
.data-table tr.totals,
.qvq-table tr.totals,
.sc-table tr.totals,
.rm-matrix tr.totals {
  background: var(--pill-amber);
  font-weight: 600;
}
.qvq-table,
.sc-table,
.leaderboard,
.fr-table,
.brk-table,
.rm-matrix,
.fifo-disp,
.detail-table,
.preview-num,
.committed-orders-table {
  min-width: 720px;
}
.qvq-table,
.committed-orders-table {
  min-width: 920px;
}
.sc-table,
.rm-matrix {
  min-width: 760px;
}
.fifo-disp {
  min-width: 640px;
}

.full-span {
  grid-column: 1 / -1;
  min-width: 0;
}
.inline-ok {
  display: inline-block;
}
.section-spacer-sm { margin-top: 10px; }
.section-spacer-md { margin-top: 14px; }
.field-required { color: var(--bad); }
.chart-frame {
  width: 100%;
  max-width: 780px;
}
.chart-frame-sm { height: 90px; }
.chart-frame-md { height: 240px; }
.chart-frame-lg { height: 320px; }
.panel-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}
.panel-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: var(--muted);
}
.card.tint-info,
.card.surface-soft {
  background: var(--tile-bg);
}
.card.tint-warn {
  background: #fff8eb;
  border-left: 4px solid var(--warn);
}
.overlay-note {
  background: #fff8eb;
  border-left: 4px solid var(--warn);
  padding: 8px 12px;
  margin: 8px 0;
  border-radius: var(--radius-sm);
}

/* Dispatch tables use th from base ruleset */

/* Key-value table (sales) */
table.kv { width: 100%; border-collapse: collapse; }
table.kv td {
  padding: 4px 8px 4px 0;
  vertical-align: top;
}
table.kv td.k {
  color: var(--muted);
  width: 200px;
}

/* ====== KPI strip + totals strip (promoted to shared 2026-05-13) ======
   `.kv-strip` (label · value, used by sales / dispatch / costing cards)
   and `.totals-strip` (value + label-after, used by inventory) were both
   defined INLINE in single templates (preview.html / inventory.html) for
   months — so every OTHER card that referenced these class names rendered
   unstyled. Akash 2026-05-13 spotted it on the Open Orders card. Promoting
   to shared CSS so any surface using these classes inherits naturally. */
.kv-strip {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.kv-strip .kv {
  display: flex;
  gap: 8px;
  font-size: 14px;
  padding: 4px 0;
  align-items: baseline;
}
.kv-strip .kv .k {
  color: var(--muted);
}

.totals-strip {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 8px 0 12px;
  font-size: 13px;
}
.totals-strip strong { color: var(--ink); }

/* Compact watchpoint table (CEO panels) */
.wp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.wp-table th, .wp-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
}
.wp-table thead th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
  text-align: left;
}
.wp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.wp-table tbody tr:last-child td { border-bottom: none; }

.wp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
}
.wp-list li {
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.wp-list li:last-child { border-bottom: none; }
.wp-list-label,
.pulse-list-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* CEO P&L grid */
.pl-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pl-grid th, .pl-grid td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.pl-grid thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  text-align: right;
}
.pl-grid thead th:first-child { text-align: left; }
.pl-grid .row-label {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
}
.pl-grid .row-label .note {
  font-size: 11px;
  font-weight: normal;
  margin-left: 6px;
}
.pl-grid .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pl-grid tbody tr:last-child td,
.pl-grid tbody tr:last-child th { border-bottom: none; }


/* ====== 11. Patterns ====== */

/* Channel strip (costing) */
.channel-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
}
.channel-strip .ch {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.channel-strip .ch .name {
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
}
.channel-strip .ch .row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* Composition bars (RM/PM/Conv split, costing SKU drill) */
.composition {
  display: flex;
  height: 28px;
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0;
}
.composition span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: white;
  font-weight: 600;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
.composition .rm   { background: #305496; }
.composition .pm   { background: #548235; }
.composition .conv { background: #b45309; }
.composition-legend {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.composition-legend span { display: inline-block; margin-right: 12px; }
.composition-legend i {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

/* Stacked-bar utility — used in CEO Panel 6 health spectrum + Panel 7 channel mix */
.stacked-bar {
  display: flex;
  height: 24px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--pill-muted);
  margin: 6px 0 10px;
}
.stacked-bar.tall { height: 28px; }

/* Waterfall bars (costing SKU drill) */
.waterfall { margin: 8px 0; }
.waterfall .row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-family: -apple-system, ui-monospace, SF Mono, monospace;
}
.waterfall .row .lbl {
  width: 110px;
  font-weight: 600;
  font-size: 13px;
}
.waterfall .row .bar-track {
  flex: 1;
  height: 18px;
  background: #f3f4f6;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.waterfall .row .bar {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 4px;
}
.waterfall .row.base     .bar { background: var(--accent); }
.waterfall .row.subtotal .bar { background: var(--good); }
.waterfall .row.deduct   .bar { background: var(--warn); }
.waterfall .row .val {
  width: 110px;
  text-align: right;
  font-size: 13px;
}

/* Tabs (costing SKU drill) */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.tabs .tab {
  padding: 8px 14px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted);
  font-weight: 600;
  font-size: 13px;
  border-bottom: 2px solid transparent;
}
.tabs .tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Calendar list (CEO P5 forward calendar + what-changed) */
.calendar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.calendar-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.calendar-list li:last-child { border-bottom: none; }
.calendar-list .label { color: var(--ink); }
.calendar-list .when {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.foot {
  margin-top: 24px;
  color: var(--muted);
  font-size: 12px;
}


/* ====== 12. CEO-specific patterns ====== */

/* Pulse card (CEO Panel 3) */
.pulse-card {
  background: var(--tile-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.pulse-card.accent { border-left: 3px solid var(--accent); }
.pulse-card h3 {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.pulse-kpi { margin-bottom: 8px; }
.pulse-kpi .big {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.pulse-kpi .muted { font-size: 12px; }
.pulse-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  padding: 2px 0;
}
.pulse-row .pill {
  flex: 0 0 auto;
}
.pulse-row.accent,
.pulse-row .accent {
  color: var(--accent);
  font-weight: 600;
}
.pulse-state-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.pulse-state {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--muted);
}
.pulse-state b { color: var(--accent); }

/* MTD pace state table — replaces the inline arrow-strip 2026-05-02 */
.pulse-state-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 12px;
}
.pulse-state-table th {
  font-weight: 600;
  color: var(--muted);
  padding: 4px 6px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pulse-state-table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--line-soft, #eee);
}
.pulse-state-table tr:last-child td { border-bottom: none; }

/* Watchpoint tile (CEO Panel 4) */
.wp-tile {
  background: var(--tile-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.wp-tile h3 {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.wp-counts {
  display: flex;
  gap: 18px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.wp-count {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wp-count b {
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}
.wp-count .muted { font-size: 11px; }

/* Composite tile (CEO Watchpoints Rs-at-risk headline) — 2026-05-02
   reorder: this is now the second-most-prominent element on the page,
   so the headline gets bigger + the breakdown row formats as labelled
   chips for at-a-glance scanning. */
.composite-tile {
  background: linear-gradient(180deg, #fef9f9 0%, var(--tile-bg) 100%);
  border: 2px solid var(--ch-master-red);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
}
.composite-headline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.composite-label {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.composite-value {
  font-size: 44px;
  font-weight: 700;
  color: var(--ch-deep-crimson);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Page-level action bar (Regenerate / Export PDF) — sits at the very
   top of the cockpit, above all panels, so the buttons stay reachable
   regardless of where the AI Narrative panel sits. */
.cockpit-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.composite-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
}
.composite-breakdown b {
  color: var(--ink);
  font-weight: 600;
}
.composite-drill {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.drill-col .drill-head {
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 4px;
}
.drill-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
}
.drill-col li {
  padding: 3px 0;
  line-height: 1.4;
}
.drill-col a {
  color: var(--ink);
  text-decoration: none;
}
.drill-col a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Sparkline (CEO Panel 2 — used by inline SVG) */
.sparkline {
  margin-bottom: 14px;
}
.sparkline-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.sparkline svg {
  width: 100%;
  max-width: 720px;
  height: auto;
  display: block;
}
/* NSV trend hover state — 2026-05-02 D-fix */
.nsv-bar { transition: opacity 0.15s ease, transform 0.15s ease; }
.nsv-bar-group:hover .nsv-bar { opacity: 1; }
.nsv-bar-group:hover .nsv-bar-value { font-weight: 700; fill: #8B0304; }
.nsv-bar-value { pointer-events: none; }


/* ====== 13. Dispatch-specific patterns ====== */

/* Plan row banding (dispatch L1/L2) */
.row-L1 td { background: var(--row-l1); }
.row-L2 td { background: var(--row-l2); }

/* Hints card (dispatch optimization tips) */
.hints-card {
  background: #fffaef;
  border: 1px solid #f7cb73;
  border-left: 4px solid var(--warn);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 18px 0;
  font-size: 14px;
  line-height: 1.45;
}
.hints-heading {
  font-size: 16px;
  color: var(--warn);
  text-transform: none;
  letter-spacing: normal;
  margin: 8px 0 10px;
  font-weight: 600;
}

/* Numbered action list (dispatch plan actions) */
.action-list {
  list-style: none;
  margin: 0 0 18px 0;
  background: #f0faf4;
  border: 1px solid #b7e4c7;
  border-left: 4px solid var(--good);
  border-radius: var(--radius);
  padding: 14px 18px 14px 18px;
  counter-reset: action-counter;
}
.action-list li {
  position: relative;
  padding: 8px 0 8px 42px;
  border-bottom: 1px solid #d7ecdc;
  counter-increment: action-counter;
  font-size: 14px;
  line-height: 1.45;
}
.action-list li:last-child { border-bottom: none; }
.action-list li::before {
  content: counter(action-counter);
  position: absolute;
  left: 0; top: 8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--good);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}
.action-heading {
  font-size: 16px;
  color: var(--good);
  text-transform: none;
  letter-spacing: normal;
  margin: 8px 0 10px;
  font-weight: 600;
}

/* Metrics grid (dispatch plan top-of-page) */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px 24px;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.metric-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.metric-value { font-size: 16px; }

/* Inline error/warn boxes (dispatch upload feedback) */
.error {
  color: var(--bad);
  background: var(--pill-red);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin: 12px 0;
}
.error.warn {
  color: var(--warn);
  background: var(--pill-amber);
}

/* code blocks (dispatch + costing) */
code {
  background: var(--pill-muted);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 13px;
}

/* Inline kv row (dispatch session metadata) */
.kv-row {
  display: flex;
  gap: 8px;
  font-size: 14px;
  padding: 4px 0;
}
.kv-row .k {
  color: var(--muted);
  min-width: 160px;
}


/* ====== 14. Tooltips (.tt — CSS-only, keyboard accessible) ====== */
.tt {
  border-bottom: 1px dotted var(--muted);
  cursor: help;
  position: relative;
}
.tt[data-tip]:hover::after,
.tt[data-tip]:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: #1f2937;
  color: white;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.4;
  font-weight: normal;
  letter-spacing: 0;
  white-space: normal;
  max-width: 280px;
  min-width: 180px;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.tt[data-tip]:hover::before,
.tt[data-tip]:focus::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 12px;
  border: 6px solid transparent;
  border-top-color: #1f2937;
}


/* ====== 15. Freshness badges ====== */
.fresh { font-size: 11px; }
.fresh-live     { color: var(--good); }
.fresh-fallback { color: var(--warn); }
.fresh-stale    { color: var(--muted); }
.fresh-missing  { color: var(--bad); }

/* T1.3 — per-card freshness chip.
   Renders inline next to a card's <h2>/<h3>. Status states map TTL age:
   green <50% TTL · amber 50-100% · red beyond. Hover the chip for the
   underlying source label + absolute timestamp. JS in freshness_chip.js
   hydrates the relative-time + ↻ click.

   Border uses the foreground color directly (e.g. var(--good)) so the
   pill outline is clearly visible against the white card behind it —
   the muted --pill-* tokens are too close to the card bg for an 11px
   element to stand out on its own. */
.freshness-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; line-height: 1;
  padding: 3px 4px 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--pill-green);
  color: var(--good);
  border: 1.5px solid var(--good);
  vertical-align: middle;
  margin-left: 10px;
  white-space: nowrap;
  cursor: help;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.freshness-chip[data-status="amber"] {
  background: var(--pill-amber); color: var(--warn);  border-color: var(--warn);
}
.freshness-chip[data-status="red"] {
  background: var(--pill-red);   color: var(--bad);   border-color: var(--bad);
}
.freshness-chip[data-status="empty"] {
  background: var(--pill-muted); color: var(--muted); border-color: var(--muted);
}
.freshness-rel { font-variant-numeric: tabular-nums; }
.freshness-refresh {
  background: rgba(255,255,255,0.85); border: 0;
  padding: 0;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer; font-size: 12px; line-height: 1;
  color: inherit; opacity: 0.95;
  transition: transform 0.3s, opacity 0.2s, background-color 0.2s;
}
.freshness-refresh:hover  { opacity: 1; background: #fff; }
.freshness-refresh:active { transform: rotate(180deg); }
.freshness-refresh.spinning { animation: freshSpin 0.8s linear infinite; opacity: 1; }
@keyframes freshSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Stale-row highlight (costing inventory >60d) */
tr.row-warn td { background: #fffbeb; }

/* ====== Operations UX refresh ======
   Shared shell for Accounts, CEO/Cockpit, Sales, Dispatch, Inventory,
   Procurement, Quality, Portal, and Admin. Costing keeps finance-cockpit
   page styling below, but shares the same suite-level brand/nav language. */
body.ops-ui {
  --ops-bg: #f6f7f9;
  --ops-panel: #ffffff;
  --ops-line: #dfe4ea;
  --ops-line-soft: #eef1f5;
  --ops-ink: #111827;
  --ops-muted: #667085;
  --ops-red: var(--ch-deep-crimson);
  --ops-red-live: var(--ch-master-red);
  --ops-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  background: var(--ops-bg);
  color: var(--ops-ink);
  padding: 18px 22px 0;
}
.ops-ui .container { max-width: 1480px; }
.ops-ui .ch-strip {
  height: 5px;
  margin: -18px -22px 0;
  background: linear-gradient(90deg, var(--ch-deep-crimson) 0%, var(--ch-master-red) 64%, var(--ch-cover-yellow) 100%);
}
.ops-ui header.brand {
  margin: 0 0 16px;
  padding: 14px 16px 12px;
  border: 1px solid var(--ops-line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--ops-panel);
  box-shadow: var(--ops-shadow);
}
.ops-ui header.brand .brand-row { flex: 0 0 auto; }
.ops-ui .ch-page-title {
  color: var(--ops-ink);
  font-size: 15px;
  letter-spacing: 0;
}
.ops-ui header.brand .actions {
  flex: 1 1 100%;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ops-line-soft);
}
.ops-ui header.brand .meta {
  color: var(--ops-muted);
  font-weight: 600;
}
.ops-ui .nav-strip { gap: 8px; }
.ops-ui .nav-strip a,
.ops-ui .nav-logout button {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 650;
}
.ops-ui .surface-nav {
  flex: 1 1 auto;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #f7f8fa;
  overflow-x: auto;
}
.ops-ui .surface-nav a {
  padding: 8px 10px;
  border-radius: 6px;
  color: #475467;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
}
.ops-ui .surface-nav a.current {
  color: #fff;
  background: var(--ops-red);
  box-shadow: none;
}
.ops-ui .surface-nav a:hover:not(.current) {
  color: var(--ops-red);
  background: #fff;
}
.ops-ui .page-jump-nav {
  border-color: var(--ops-line);
  background: #fff;
  border-radius: 8px;
}
.ops-ui .card {
  border-color: var(--ops-line);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow: var(--ops-shadow);
  margin-bottom: 14px;
}
.ops-ui .container > .card:first-of-type,
.ops-ui main.portal-wrap > .card:first-child {
  border-left: 4px solid var(--ops-red-live);
}
.ops-ui .card h2 {
  color: var(--ops-ink);
  font-size: 15px;
  letter-spacing: 0;
}
.ops-ui .card h3 {
  color: var(--ops-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.ops-ui .card.tint-info,
.ops-ui .card.surface-soft { background: #f8fafc; }
.ops-ui .card.tint-warn {
  background: #fff8eb;
  border-left: 4px solid var(--warn);
}
.ops-ui .card .head { align-items: center; }
.ops-ui .panel-heading > .btn,
.ops-ui .panel-heading > button,
.ops-ui .panel-actions .btn,
.ops-ui .panel-actions button,
.ops-ui .export-links a {
  flex: 0 0 auto;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}
.ops-ui .row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ops-ui .ops-purpose-line,
.ops-ui .ops-owner-line,
.ops-ui .portal-status-detail {
  margin: 8px 0 0;
  color: var(--ops-muted);
  font-size: 13px;
  line-height: 1.45;
}
.ops-ui .ops-decision-strip,
.ops-ui .ops-source-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.ops-ui .ops-decision-item,
.ops-ui .ops-source-chip,
.ops-ui .surface-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  border: 1px solid var(--ops-line);
  border-radius: 999px;
  background: #fff;
  color: #475467;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  padding: 4px 8px;
  white-space: nowrap;
}
.ops-ui .ops-decision-item strong { color: var(--ops-ink); }
.ops-ui .ops-action-row,
.ops-ui .ops-handoff-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ops-ui .ops-handoff-links {
  justify-content: flex-start;
  margin-top: 12px;
}
.ops-ui .ops-empty-state {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--ops-muted);
  font-size: 13px;
  line-height: 1.45;
  padding: 12px 14px;
}
.ops-ui .ops-empty-state strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ops-ink);
}
.ops-ui .status-live,
.ops-ui .ops-source-chip.good {
  border-color: #b7ddc2;
  background: #ecfdf3;
  color: #067647;
}
.ops-ui .status-setup,
.ops-ui .ops-source-chip.warn {
  border-color: #f7d99b;
  background: #fff8eb;
  color: #8a4b00;
}
.ops-ui .status-iteration {
  border-color: #c7d7fe;
  background: #eef4ff;
  color: #344054;
}
.ops-ui .status-parked_feed,
.ops-ui .ops-source-chip.locked {
  border-color: #d0d5dd;
  background: #f2f4f7;
  color: #667085;
}
.ops-ui .banner,
.ops-ui .narrative,
.ops-ui .guardrail,
.ops-ui .alert {
  border-radius: 8px;
  box-shadow: var(--ops-shadow);
}
.ops-ui .kpis,
.ops-ui .grid-perf,
.ops-ui .pulse-grid,
.ops-ui .watchpoint-grid,
.ops-ui .network-pulse-grid,
.ops-ui .fifo-summary,
.ops-ui .customer-kpis,
.ops-ui .util-kpis,
.ops-ui .sku-kpis,
.ops-ui .history-kpi-grid,
.ops-ui .pending-kpi-grid,
.ops-ui .brk-headline,
.ops-ui .scd-headline,
.ops-ui .sku-month-headline { gap: 10px; }
.ops-ui .kpi,
.ops-ui .kpi-tile,
.ops-ui .stat,
.ops-ui .brk-stat,
.ops-ui .scd-stat,
.ops-ui .sku-month-stat,
.ops-ui .pulse-card,
.ops-ui .wp-tile,
.ops-ui .network-pulse-tile,
.ops-ui .fifo-kpi,
.ops-ui .customer-kpi,
.ops-ui .util-kpi,
.ops-ui .sku-kpi,
.ops-ui .history-kpi,
.ops-ui .pending-kpi,
.ops-ui .metric {
  min-width: 0;
  border: 1px solid var(--ops-line);
  border-top: 3px solid #c7ced8;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--ops-shadow);
  padding: 11px 12px;
}
.ops-ui .kpis .kpi:nth-child(1),
.ops-ui .grid-perf .stat:nth-child(1),
.ops-ui .brk-headline .brk-stat:nth-child(1),
.ops-ui .scd-headline .scd-stat:nth-child(1),
.ops-ui .sku-month-headline .sku-month-stat:nth-child(1),
.ops-ui .pulse-grid .pulse-card:nth-child(1),
.ops-ui .network-pulse-grid > *:nth-child(1),
.ops-ui .fifo-summary .fifo-kpi:nth-child(1),
.ops-ui .customer-kpis > *:nth-child(1),
.ops-ui .util-kpis > *:nth-child(1),
.ops-ui .sku-kpis > *:nth-child(1),
.ops-ui .history-kpi-grid .history-kpi:nth-child(1),
.ops-ui .pending-kpi-grid > *:nth-child(1) {
  border-top-color: var(--ops-red-live);
}
.ops-ui .kpi .label,
.ops-ui .kpi-tile .kpi-label,
.ops-ui .stat .label,
.ops-ui .brk-stat .label,
.ops-ui .scd-stat .label,
.ops-ui .sku-month-stat .label,
.ops-ui .pulse-kpi .muted,
.ops-ui .wp-count .muted,
.ops-ui .network-pulse-tile .label,
.ops-ui .fifo-kpi .label,
.ops-ui .customer-kpi .label,
.ops-ui .util-kpi .label,
.ops-ui .sku-kpi .label,
.ops-ui .history-kpi .label,
.ops-ui .pending-kpi .label,
.ops-ui .pending-kpi .k,
.ops-ui .metric-label {
  color: var(--ops-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ops-ui .kpi .val,
.ops-ui .kpi-tile .kpi-value,
.ops-ui .stat .val,
.ops-ui .brk-stat .val,
.ops-ui .scd-stat .val,
.ops-ui .sku-month-stat .val,
.ops-ui .pulse-kpi .big,
.ops-ui .wp-count b,
.ops-ui .network-pulse-tile .val,
.ops-ui .fifo-kpi .value,
.ops-ui .customer-kpi .value,
.ops-ui .util-kpi .value,
.ops-ui .sku-kpi .value,
.ops-ui .history-kpi .val,
.ops-ui .pending-kpi .value,
.ops-ui .pending-kpi strong,
.ops-ui .metric-value {
  color: var(--ops-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.12;
}
.ops-ui .qvq-controls,
.ops-ui .brk-date-filter,
.ops-ui .scd-date-filter,
.ops-ui .sku-month-filter,
.ops-ui .fr-filter,
.ops-ui .history-filter,
.ops-ui .util-filter,
.ops-ui .customer-filter,
.ops-ui .fifo-toolbar,
.ops-ui .fifo-controls,
.ops-ui .asof-bar,
.ops-ui .trend-toggles,
.ops-ui .analytics-actions,
.ops-ui .download-row,
.ops-ui .sku-toolbar {
  padding: 10px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--ops-shadow);
}

.ops-ui .ops-control-panel {
  padding: 12px 16px;
}

.ops-ui .ops-control-row,
.ops-ui .ops-control-primary,
.ops-ui .ops-control-actions,
.ops-ui .ops-control-form {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

.ops-ui .ops-control-row {
  flex-wrap: nowrap;
  justify-content: space-between;
}

.ops-ui .ops-control-primary {
  flex: 1 1 auto;
  flex-wrap: wrap;
}

.ops-ui .ops-control-actions {
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ops-ui .ops-control-form {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}

.ops-ui .ops-control-label,
.ops-ui .ops-control-note {
  flex: 0 0 auto;
  white-space: nowrap;
}

.ops-ui .ops-control-label {
  color: var(--ops-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ops-ui .ops-control-note {
  color: var(--ops-muted);
  font-size: 12px;
}

.ops-ui .ops-control-row .btn-chip,
.ops-ui .ops-control-row .pdf-export-btn {
  width: auto;
  min-width: 0;
  min-height: 34px;
  padding: 7px 12px;
  white-space: nowrap;
}

.ops-ui .ops-control-form input[type="date"] {
  flex: 0 1 142px;
  width: 142px;
  min-width: 128px;
}

.ops-ui .qvq-controls label,
.ops-ui .brk-date-filter label,
.ops-ui .scd-date-filter label,
.ops-ui .sku-month-filter label,
.ops-ui .fr-filter label,
.ops-ui .history-filter label,
.ops-ui .util-filter label,
.ops-ui .customer-filter label,
.ops-ui .fifo-toolbar label,
.ops-ui .fifo-controls label,
.ops-ui .asof-bar label,
.ops-ui .sku-toolbar label,
.ops-ui .login-card label {
  color: var(--ops-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ops-ui input[type=text],
.ops-ui input[type=search],
.ops-ui input[type=date],
.ops-ui input[type=datetime-local],
.ops-ui input[type=password],
.ops-ui input[type=number],
.ops-ui select,
.ops-ui textarea {
  min-height: 36px;
  border-color: var(--ops-line);
  border-radius: 6px;
  background: #fff;
}
.ops-ui .transport-failure-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.ops-ui .transport-failure-fields[hidden] {
  display: none;
}
.ops-ui .transport-failure-fields input {
  flex: 1 1 112px;
  min-width: 0;
}
.ops-ui button,
.ops-ui .btn,
.ops-ui .btn-chip,
.ops-ui .pdf-export-btn {
  border-color: var(--ops-line);
  border-radius: 6px;
  min-height: 34px;
  font-weight: 600;
}
.ops-ui button.primary,
.ops-ui .btn.primary,
.ops-ui .btn-primary {
  background: var(--ops-red-live);
  border-color: var(--ops-red-live);
}
.ops-ui button.primary:hover:not(:disabled),
.ops-ui .btn.primary:hover,
.ops-ui .btn-primary:hover {
  background: var(--ops-red);
  border-color: var(--ops-red);
}
.ops-ui .responsive-table,
.ops-ui .table-wrap,
.ops-ui .history-table-wrap,
.ops-ui .mix-scroll,
.ops-ui .admin-table-wrap,
.ops-ui .customer-table-wrap,
.ops-ui .util-table-wrap,
.ops-ui .aging-table-wrap {
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #fff;
}
.ops-ui table th {
  background: #f5f7fa;
  color: var(--ops-muted);
  font-size: 11px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.ops-ui table td { border-bottom-color: var(--ops-line-soft); }
.ops-ui table tbody tr:hover td { background: #fffafa; }
.ops-ui table a {
  color: var(--ops-red);
  font-weight: 600;
  text-decoration: none;
}
.ops-ui table a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ops-ui .grid-cards,
.ops-ui .lens-grid,
.ops-ui .brk-grid,
.ops-ui .scd-grid,
.ops-ui .sku-month-grid,
.ops-ui .history-chart-grid,
.ops-ui .distribution-grid,
.ops-ui .cohort-grid,
.ops-ui .fr-grid { gap: 14px; }
.ops-ui .chart-frame,
.ops-ui .trend-chart,
.ops-ui .product-chart,
.ops-ui .fr-chart,
.ops-ui .scd-chart,
.ops-ui .sku-month-chart,
.ops-ui .days-cover-histogram {
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #fff;
}
.ops-ui .tabs .tab.active,
.ops-ui .trend-toggles a.active,
.ops-ui .btn-chip-on,
.ops-ui .btn-chip.is-on {
  background: var(--ops-red);
  border-color: var(--ops-red);
  color: #fff;
}
.ops-ui .tabs .tab { border-radius: 6px 6px 0 0; }
.admin-ui .admin-h1 {
  color: var(--ops-ink);
  font-size: 22px;
  letter-spacing: 0;
}
.admin-ui header.brand { align-items: flex-start; }
.admin-ui .admin-subnav {
  flex: 1 1 100%;
  order: 3;
  display: flex;
  gap: 4px !important;
  max-width: 100%;
  margin-top: 8px;
  padding: 4px !important;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #f7f8fa;
  overflow-x: auto;
  opacity: 1 !important;
}
.admin-ui .admin-subnav a {
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #475467;
  background: transparent !important;
  font-size: 12px;
  font-weight: 650;
}
.admin-ui .admin-subnav a.current {
  color: #fff;
  background: var(--ops-red) !important;
}
.admin-control-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 14px;
  padding: 20px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #fff;
}
.admin-control-hero h2 {
  margin: 0 0 8px;
  color: var(--ops-ink);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
}
.admin-hero-state {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-height: 120px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #f7f8fa;
}
.admin-hero-state span,
.admin-issue-severity,
.admin-trust-dot {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-hero-state strong { font-size: 36px; color: var(--ops-ink); line-height: 1; }
.admin-hero-state small { color: var(--ops-muted); font-size: 12px; }
.admin-hero-state.ok { border-color: #b7e4c7; background: #f0fdf4; }
.admin-hero-state.warn { border-color: #fde68a; background: #fffbeb; }
.admin-hero-state.bad { border-color: #fecaca; background: #fef2f2; }
.admin-trust-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.admin-trust-item,
.admin-issue-row,
.admin-timeline-row,
.admin-chain-step,
.admin-usage-bar {
  color: inherit;
  text-decoration: none;
}
.admin-trust-item {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #fff;
}
.admin-trust-item b,
.admin-timeline-row b,
.admin-chain-step b,
.admin-issue-row b { display: block; color: var(--ops-ink); font-size: 13px; }
.admin-trust-item small,
.admin-timeline-row small,
.admin-chain-step small,
.admin-issue-row small { display: block; color: var(--ops-muted); font-size: 12px; line-height: 1.35; }
.admin-trust-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
}
.admin-trust-item.ok .admin-trust-dot,
.admin-chain-step.ok span,
.admin-timeline-row.ok .admin-timeline-marker,
.admin-matrix-cell.on { background: #dcfce7; color: #166534; }
.admin-trust-item.warn .admin-trust-dot,
.admin-chain-step.warn span,
.admin-timeline-row.warn .admin-timeline-marker { background: #fef3c7; color: #92400e; }
.admin-trust-item.bad .admin-trust-dot,
.admin-chain-step.bad span,
.admin-timeline-row.bad .admin-timeline-marker { background: #fee2e2; color: #991b1b; }
.admin-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
.admin-two-col > *,
.admin-ui .page-section,
.admin-ui .admin-table-wrap {
  min-width: 0;
}
.admin-issues,
.admin-timeline,
.admin-chain,
.admin-access-matrix,
.admin-usage,
.admin-quick-links { margin-bottom: 14px; }
.admin-issue-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 110px;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--ops-line-soft);
}
.admin-issue-row:last-child { border-bottom: 0; }
.admin-issue-severity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 6px;
  background: #eef2f7;
  color: #475467;
}
.admin-issue-row.warn .admin-issue-severity { background: #fef3c7; color: #92400e; }
.admin-issue-row.bad .admin-issue-severity { background: #fee2e2; color: #991b1b; }
.admin-issue-row em {
  color: var(--ops-muted);
  font-size: 12px;
  font-style: normal;
  text-align: right;
}
.admin-all-clear {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid #b7e4c7;
  border-radius: 8px;
  background: #f0fdf4;
  color: #166534;
}
.admin-all-clear span { color: #166534; font-size: 13px; }
.admin-timeline-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 92px 80px;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--ops-line-soft);
}
.admin-timeline-row:last-child { border-bottom: 0; }
.admin-timeline-marker {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #e5e7eb;
}
.admin-timeline-row strong,
.admin-timeline-row em {
  color: var(--ops-muted);
  font-size: 12px;
  font-style: normal;
  text-align: right;
}
.admin-chain-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.admin-chain-step {
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 108px;
  padding: 12px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #f8fafc;
}
.admin-chain-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-width: 34px;
  min-height: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef2f7;
  color: #475467;
  font-size: 10px;
  font-weight: 800;
}
.admin-mini-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.admin-mini-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #f8fafc;
}
.admin-mini-metrics b { color: var(--ops-ink); font-size: 14px; }
.admin-mini-metrics small { color: var(--ops-muted); font-size: 11px; }
.admin-ui .page-section > .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.admin-ui .page-section > .head h2 { margin: 0; }
.admin-ui .eyebrow {
  margin: 0 0 6px;
  color: var(--ops-red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin-users-hero,
.admin-access-overview,
.admin-access-map,
.admin-users-list,
.admin-add-user {
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #fff;
}
.admin-users-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 18px;
  align-items: center;
}
.admin-users-hero h2 {
  margin: 0 0 8px;
  color: var(--ops-ink);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
}
.admin-users-hero p:not(.eyebrow) {
  margin: 0;
  max-width: 760px;
  color: var(--ops-muted);
  font-size: 13px;
  line-height: 1.5;
}
.admin-user-metric-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.admin-user-metric-stack span,
.admin-user-meta span {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #f8fafc;
}
.admin-user-metric-stack b {
  color: var(--ops-ink);
  font-size: 22px;
  line-height: 1;
}
.admin-user-metric-stack small,
.admin-user-meta b {
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.admin-users-matrix {
  min-width: 1180px;
}
.admin-users-matrix th {
  white-space: nowrap;
  font-size: 11px;
}
.admin-users-matrix td:first-child {
  min-width: 150px;
}
.admin-users-matrix td:first-child b,
.admin-users-matrix td:first-child small,
.admin-users-matrix td:first-child span {
  display: block;
}
.admin-users-matrix td:first-child small {
  color: var(--ops-muted);
  font-size: 12px;
}
.admin-access-overview summary,
.admin-user-edit-drawer summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  color: var(--ops-ink);
  font-weight: 750;
}
.admin-access-overview summary small,
.admin-user-edit-drawer summary {
  color: var(--ops-muted);
  font-size: 12px;
}
.admin-access-overview[open] summary {
  margin-bottom: 12px;
}
.admin-surface-lanes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.admin-surface-lane {
  display: grid;
  grid-template-columns: minmax(92px, 120px) minmax(0, 1fr) 58px;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 9px 10px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #f8fafc;
}
.admin-surface-lane b {
  color: var(--ops-ink);
  font-size: 13px;
}
.admin-surface-lane small,
.admin-surface-lane em {
  color: var(--ops-muted);
  font-size: 11px;
  font-style: normal;
}
.admin-surface-lane small { text-align: right; }
.admin-matrix-cell {
  display: inline-flex;
  justify-content: center;
  min-width: 36px;
  padding: 3px 6px;
  border-radius: 999px;
  background: #f2f4f7;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
}
.admin-matrix-cell.off {
  background: #f2f4f7;
  color: #98a2b3;
}
.admin-usage-bar {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
}
.admin-usage-bar b {
  display: block;
  height: 8px;
  min-width: 4px;
  border-radius: 999px;
  background: var(--ops-red-live);
}
.admin-usage-bar span,
.admin-usage-bar em {
  color: var(--ops-muted);
  font-size: 12px;
  font-style: normal;
}
.admin-usage-bar em { text-align: right; }
.admin-link-row,
.admin-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.admin-quick-links h3 {
  margin: 14px 0 8px;
  color: var(--ops-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin-confirm-page p { color: var(--ops-muted); font-size: 13px; }
.admin-confirm-actions { margin-top: 14px; }
.admin-users-list .admin-access-note {
  margin: -4px 0 10px;
}
.admin-users-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 10px;
}
.admin-user-card {
  display: grid;
  gap: 10px;
  margin-top: 0;
  padding: 14px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #fbfcfd;
}
.admin-user-edit {
  display: grid;
  gap: 10px;
}
.admin-user-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.admin-user-identity {
  display: grid;
  gap: 2px;
}
.admin-user-identity strong {
  color: var(--ops-ink);
  font-size: 15px;
}
.admin-user-identity span,
.admin-user-meta span {
  color: var(--ops-muted);
  font-size: 12px;
}
.admin-user-badges,
.admin-user-actions,
.admin-security-row,
.surface-pills {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.admin-user-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.admin-user-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.surface-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: #eef2f7;
  color: #344054;
  font-size: 11px;
  font-weight: 750;
}
.admin-user-edit-drawer {
  padding: 9px 10px;
  border: 1px solid var(--ops-line);
  border-radius: 8px;
  background: #fff;
}
.admin-user-edit-drawer[open] {
  display: grid;
  gap: 10px;
}
.admin-user-edit-drawer[open] summary {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ops-line-soft);
}
.user-row-card {
  display: grid;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ops-line);
}
.user-row-card:last-child { border-bottom: 0; }
.admin-add-user .user-row-card {
  padding: 0;
  border-bottom: 0;
}
.surface-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.admin-ui .surface-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--ops-line);
  border-radius: 6px;
  background: #fff;
  color: var(--ops-ink);
  font-size: 13px;
  line-height: 1.25;
}
.admin-ui .surface-check input { flex: 0 0 auto; }
.field-label {
  display: grid;
  gap: 5px;
  color: var(--ops-muted);
  font-size: 13px;
}
.field-label input {
  width: 100%;
  max-width: none;
  padding: 8px 10px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  font: inherit;
}
.admin-user-actions button,
.admin-add-user .user-row-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: 7px 12px;
  border: 1px solid var(--ops-line);
  border-radius: 4px;
  background: var(--ops-red);
  color: #fff;
  font-weight: 600;
}
.admin-user-revoke {
  justify-self: start;
  margin: -2px 0 0;
}
.admin-user-revoke button {
  padding: 7px 12px;
  border: 1px solid #fecaca;
  border-radius: 4px;
  background: #fff;
  color: #991b1b;
  font-weight: 650;
}
.admin-access-note {
  color: var(--ops-muted);
  font-size: 13px;
}
.portal-ui .portal-wrap {
  max-width: 1120px;
  margin: 0 auto;
}
.portal-ui .portal-account-form {
  display: grid;
  gap: 10px;
  max-width: 460px;
  margin-top: 14px;
}
.portal-ui .portal-account-form label {
  color: var(--ops-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.portal-ui .portal-account-form input {
  width: 100%;
}
.portal-ui .portal-account-form button {
  justify-self: start;
  margin-top: 4px;
}
.portal-ui .portal-intro {
  margin-bottom: 16px;
}
.portal-ui .portal-intro h2 {
  margin: 0;
}
.portal-ui .portal-user {
  color: var(--ops-muted);
  font-size: 13px;
  font-weight: 650;
}
.portal-ui .phone-highlights {
  display: none;
}
.portal-ui .phone-highlights-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.portal-ui .phone-highlights-kicker {
  display: block;
  margin: 0 0 4px;
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.portal-ui .phone-highlights-head h2,
.portal-ui .phone-highlight-card h2 {
  margin: 0;
}
.portal-ui .phone-highlight-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}
.portal-ui .phone-highlight-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border-top: 3px solid #c7ced8;
  margin: 0;
  padding: 12px;
}
.portal-ui .phone-highlight-card[data-tone="good"] { border-top-color: #12b76a; }
.portal-ui .phone-highlight-card[data-tone="warn"] { border-top-color: #f79009; }
.portal-ui .phone-highlight-card[data-tone="bad"] { border-top-color: #d92d20; }
.portal-ui .phone-highlight-card[data-tone="info"] { border-top-color: #528bff; }
.portal-ui .phone-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.portal-ui .phone-highlight-card h2 {
  color: var(--ops-ink);
  font-size: 16px;
  line-height: 1.25;
}
.portal-ui .phone-badges,
.portal-ui .phone-links,
.portal-ui .phone-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.portal-ui .phone-badge,
.portal-ui .phone-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  border: 1px solid var(--ops-line);
  border-radius: 6px;
  background: #fff;
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  padding: 4px 7px;
}
.portal-ui .phone-badge b,
.portal-ui .phone-strip-item b {
  color: var(--ops-ink);
}
.portal-ui .phone-badge.tone-good,
.portal-ui .phone-strip-item.tone-good { background: #ecfdf3; border-color: #abefc6; color: #067647; }
.portal-ui .phone-badge.tone-warn,
.portal-ui .phone-strip-item.tone-warn { background: #fffaeb; border-color: #fedf89; color: #b54708; }
.portal-ui .phone-badge.tone-bad,
.portal-ui .phone-strip-item.tone-bad { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.portal-ui .phone-badge.tone-info,
.portal-ui .phone-strip-item.tone-info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.portal-ui .phone-bars {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.portal-ui .phone-bars-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 750;
}
.portal-ui .phone-bars-head b {
  color: var(--ops-ink);
}
.portal-ui .phone-bars-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  align-items: end;
  height: 46px;
  min-width: 0;
}
.portal-ui .phone-bar {
  position: relative;
  display: block;
  min-width: 0;
  height: 46px;
  color: var(--ops-muted);
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
  line-height: 1;
  text-align: center;
}
.portal-ui .phone-bar i {
  display: block;
  position: absolute;
  right: 28%;
  bottom: 15px;
  left: 28%;
  min-height: 2px;
  border-radius: 4px 4px 2px 2px;
  background: #528bff;
}
.portal-ui .phone-bar em {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  color: var(--ops-muted);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portal-ui .phone-progress {
  display: grid;
  gap: 5px;
}
.portal-ui .phone-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 750;
}
.portal-ui .phone-progress-meta b {
  color: var(--ops-ink);
}
.portal-ui .phone-progress-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #eef2f6;
}
.portal-ui .phone-progress-track span {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: inherit;
  background: #528bff;
}
.portal-ui .phone-progress[data-tone="good"] .phone-progress-track span { background: #12b76a; }
.portal-ui .phone-progress[data-tone="warn"] .phone-progress-track span { background: #f79009; }
.portal-ui .phone-progress[data-tone="bad"] .phone-progress-track span { background: #d92d20; }
.portal-ui .phone-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.portal-ui .phone-metric {
  min-width: 0;
  min-height: 54px;
  border: 1px solid var(--ops-line);
  border-radius: 6px;
  background: #fff;
  padding: 7px;
}
.portal-ui .phone-metric b {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ops-ink);
  font-size: 17px;
  line-height: 1.15;
}
.portal-ui .phone-metric span {
  display: block;
  margin-top: 3px;
  color: var(--ops-muted);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.2;
}
.portal-ui .phone-metric.tone-good { border-color: #abefc6; background: #fbfffd; }
.portal-ui .phone-metric.tone-warn { border-color: #fedf89; background: #fffdf6; }
.portal-ui .phone-metric.tone-bad { border-color: #fecdca; background: #fffafa; }
.portal-ui .phone-links a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ops-line);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--ops-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  padding: 5px 8px;
  text-decoration: none;
}
.portal-ui .today-pulse {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}
.portal-ui .today-pulse-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.portal-ui .today-pulse-kicker,
.portal-ui .today-pulse-eyebrow {
  display: block;
  margin: 0 0 4px;
  color: var(--ops-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.portal-ui .today-pulse-head h2,
.portal-ui .today-pulse-card h2 {
  margin: 0;
}
.portal-ui .today-pulse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 12px;
}
.portal-ui .today-pulse-card {
  min-height: 154px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 3px solid #c7ced8;
  margin: 0;
}
.portal-ui .today-pulse-card[data-status="live"] { border-top-color: #12b76a; }
.portal-ui .today-pulse-card[data-status="setup"] { border-top-color: #f79009; }
.portal-ui .today-pulse-card[data-status="iteration"] { border-top-color: #528bff; }
.portal-ui .today-pulse-card[data-status="parked_feed"] { border-top-color: #98a2b3; }
.portal-ui .today-pulse-card p {
  margin: 10px 0 12px;
  color: var(--ops-muted);
  font-size: 13px;
  line-height: 1.35;
}
.portal-ui .today-pulse-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.portal-ui .today-pulse-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ops-line);
  border-radius: 6px;
  background: #fff;
  color: var(--ops-ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  padding: 5px 8px;
  text-decoration: none;
}
.portal-ui .today-pulse-link:hover {
  border-color: #b9c3d0;
  background: #f8fafc;
}
.portal-ui .today-pulse-link .surface-status {
  min-height: 22px;
  padding: 3px 6px;
}
.portal-ui .portal-groups {
  display: grid;
  gap: 20px;
}
.portal-ui .portal-group {
  display: grid;
  gap: 10px;
}
.portal-ui .portal-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.portal-ui .portal-group-head h2 {
  margin: 0;
  color: var(--ops-ink);
  font-size: 18px;
}
.portal-ui .portal-group-head p {
  max-width: 610px;
  margin: 0;
  color: var(--ops-muted);
  font-size: 12px;
  line-height: 1.4;
}
.portal-ui .portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.portal-ui .portal-card {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-top: 3px solid #c7ced8;
}
.portal-ui .portal-card h2 {
  margin: 0;
}
.portal-ui .portal-card p {
  margin: 8px 0 0;
  color: var(--ops-muted);
  font-size: 13px;
  line-height: 1.35;
}
.portal-ui .portal-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.portal-ui .portal-card[data-status="live"] { border-top-color: #12b76a; }
.portal-ui .portal-card[data-status="setup"] { border-top-color: #f79009; }
.portal-ui .portal-card[data-status="iteration"] { border-top-color: #528bff; }
.portal-ui .portal-card[data-status="parked_feed"] { border-top-color: #98a2b3; }
.portal-ui .portal-status-detail {
  font-size: 12px;
}
.portal-ui .portal-owner-note {
  color: var(--ops-muted);
  font-size: 12px;
  font-weight: 650;
}
.portal-ui .portal-card .btn { align-self: flex-start; }
.portal-ui .login-card { border-top: 3px solid var(--ops-red-live); }
.ops-ui .ch-footer { margin: 34px -22px 0; }

@media (max-width: 1100px) {
  .ops-ui .grid-cards,
  .ops-ui .lens-grid,
  .ops-ui .brk-grid,
  .ops-ui .scd-grid,
  .ops-ui .sku-month-grid,
  .ops-ui .history-chart-grid,
  .ops-ui .distribution-grid,
  .ops-ui .cohort-grid,
  .ops-ui .fr-grid {
    grid-template-columns: 1fr;
  }
  .admin-trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-two-col,
  .admin-chain-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  body.ops-ui { padding: 14px 12px 0; }
  .ops-ui .ch-strip { margin: -14px -12px 0; }
  .ops-ui header.brand .actions {
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ops-ui header.brand .actions::-webkit-scrollbar { display: none; }
  .ops-ui header.brand .actions > .meta {
    flex: 0 0 auto;
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ops-ui header.brand .actions > .surface-nav {
    flex: 0 0 auto;
    max-width: none;
    width: auto;
  }
  .ops-ui header.brand .actions > .btn,
  .ops-ui header.brand .actions > button,
  .ops-ui header.brand .actions > a.btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .ops-ui .surface-nav { flex: 0 0 auto; }
  .ops-ui .nav-strip {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .ops-ui .qvq-controls,
  .ops-ui .brk-date-filter,
  .ops-ui .scd-date-filter,
  .ops-ui .sku-month-filter,
  .ops-ui .fr-filter,
  .ops-ui .history-filter,
  .ops-ui .util-filter,
  .ops-ui .customer-filter,
  .ops-ui .fifo-toolbar,
  .ops-ui .fifo-controls,
  .ops-ui .asof-bar,
  .ops-ui .trend-toggles,
  .ops-ui .analytics-actions,
  .ops-ui .download-row,
  .ops-ui .sku-toolbar { align-items: stretch; }
  .ops-ui .ops-control-panel {
    padding: 12px;
  }
  .ops-ui .ops-control-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ops-ui .ops-control-primary,
  .ops-ui .ops-control-actions {
    flex-wrap: wrap;
    overflow: visible;
    max-width: 100%;
  }
  .ops-ui .ops-control-form {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    flex: 1 1 100%;
    width: 100%;
  }
  .ops-ui .ops-control-form input[type="date"] {
    width: 100%;
    min-width: 0;
  }
  .ops-ui .ops-control-note {
    white-space: normal;
  }
  .ops-ui .qvq-controls,
  .ops-ui .brk-date-filter,
  .ops-ui .scd-date-filter,
  .ops-ui .sku-month-filter,
  .ops-ui .fr-filter,
  .ops-ui .history-filter,
  .ops-ui .util-filter,
  .ops-ui .customer-filter,
  .ops-ui .fifo-toolbar,
  .ops-ui .fifo-controls,
  .ops-ui .asof-bar,
  .ops-ui .trend-toggles,
  .ops-ui .analytics-actions,
  .ops-ui .download-row,
  .ops-ui .sku-toolbar,
  .ops-ui .fifo-toolbar form,
  .ops-ui .fifo-controls form,
  .ops-ui .sku-toolbar form,
  .ops-ui .asof-bar form {
    display: grid;
    grid-template-columns: 1fr;
  }
  .ops-ui .fifo-toolbar .btn-chip,
  .ops-ui .fifo-controls .btn-chip,
  .ops-ui .sku-toolbar .btn-chip,
  .ops-ui .asof-bar .btn-chip,
  .ops-ui .fifo-toolbar button,
  .ops-ui .fifo-controls button,
  .ops-ui .sku-toolbar button,
  .ops-ui .asof-bar button {
    width: 100%;
    justify-content: center;
  }
  .ops-ui .ops-control-row .btn-chip,
  .ops-ui .ops-control-row .pdf-export-btn,
  .ops-ui .ops-control-form button {
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
  }
  .ops-ui .kpis,
  .ops-ui .grid-perf,
  .ops-ui .pulse-grid,
  .ops-ui .watchpoint-grid,
  .ops-ui .network-pulse-grid,
  .ops-ui .fifo-summary,
  .ops-ui .customer-kpis,
  .ops-ui .util-kpis,
  .ops-ui .sku-kpis,
  .ops-ui .history-kpi-grid,
  .ops-ui .pending-kpi-grid,
  .ops-ui .brk-headline,
  .ops-ui .scd-headline,
  .ops-ui .sku-month-headline,
  .portal-ui .today-pulse-grid,
  .portal-ui .portal-grid {
    grid-template-columns: 1fr;
  }
  .portal-ui .today-pulse-link {
    width: 100%;
    justify-content: space-between;
  }
  .ops-ui .kpi .val,
  .ops-ui .kpi-tile .kpi-value,
  .ops-ui .stat .val,
  .ops-ui .brk-stat .val,
  .ops-ui .scd-stat .val,
  .ops-ui .sku-month-stat .val,
  .ops-ui .pulse-kpi .big,
  .ops-ui .wp-count b,
  .ops-ui .network-pulse-tile .val,
  .ops-ui .fifo-kpi .value,
  .ops-ui .customer-kpi .value,
  .ops-ui .util-kpi .value,
  .ops-ui .sku-kpi .value,
  .ops-ui .history-kpi .val,
  .ops-ui .pending-kpi .value,
  .ops-ui .pending-kpi strong,
  .ops-ui .metric-value {
    font-size: 20px;
  }
  .ops-ui .ch-footer { margin: 24px -12px 0; }
  .admin-control-hero {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .admin-users-hero {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .admin-hero-state {
    order: -1;
  }
  .admin-control-hero h2 {
    font-size: 22px;
  }
  .admin-hero-state {
    min-height: 96px;
  }
  .admin-trust-strip,
  .admin-mini-metrics {
    grid-template-columns: 1fr;
  }
  .admin-surface-lanes {
    grid-template-columns: 1fr;
  }
  .admin-surface-lane {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .admin-surface-lane small {
    text-align: left;
  }
  .admin-user-meta,
  .admin-users-card-grid,
  .admin-user-fields {
    grid-template-columns: 1fr;
  }
  .admin-user-metric-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-user-metric-stack span {
    padding: 8px;
  }
  .admin-users-hero h2 {
    font-size: 21px;
  }
  .admin-user-card {
    padding: 12px;
  }
  .admin-user-card-head,
  .admin-user-actions,
  .admin-security-row {
    align-items: stretch;
  }
  .admin-user-actions button,
  .admin-user-revoke,
  .admin-user-revoke button,
  .admin-add-user .user-row-card button {
    width: 100%;
  }
  .admin-ui header.brand .nav-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 6px !important;
    align-items: center;
    padding-bottom: 3px;
  }
  .admin-ui header.brand .nav-strip a,
  .admin-ui header.brand .nav-logout button {
    flex: 0 0 auto;
    width: auto;
    min-height: 36px;
    padding: 8px 10px !important;
    white-space: nowrap;
  }
  .admin-ui header.brand .nav-logout {
    flex: 0 0 auto;
    grid-column: auto;
    width: auto;
    margin: 0;
  }
  .admin-trust-item {
    min-height: auto;
  }
  .admin-issue-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .admin-issue-row em {
    text-align: left;
  }
  .admin-timeline-row {
    grid-template-columns: 16px minmax(0, 1fr);
  }
  .admin-timeline-row strong,
  .admin-timeline-row em {
    grid-column: 2;
    text-align: left;
  }
  .admin-usage-bar {
    grid-template-columns: 1fr 48px;
  }
  .admin-usage-bar b {
    grid-column: 1 / -1;
  }
  .admin-link-row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 600px) {
  .portal-ui .page-jump-nav,
  .portal-ui .desktop-portal-map {
    display: none !important;
  }
  .portal-ui.phone-highlights-enabled .phone-highlights {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
  }
  .portal-ui.phone-highlights-enabled .today-pulse {
    display: none;
  }
  .portal-ui.phone-highlights-enabled .phone-highlights-head {
    align-items: center;
  }
  .portal-ui.phone-highlights-enabled .phone-highlights-head .portal-user {
    display: none;
  }
  .portal-ui.phone-highlights-enabled .phone-highlights-head h2 {
    font-size: 20px;
  }
  .portal-ui.phone-highlights-enabled .phone-card-top {
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .portal-ui.phone-highlights-enabled .phone-card-top .phone-badges {
    min-width: 0;
  }
  .portal-ui.phone-highlights-enabled .phone-badge {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }
  .portal-ui.phone-highlights-enabled .phone-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .portal-ui.phone-highlights-enabled .phone-highlight-card[data-card="sales_today"] .phone-badge {
    flex-basis: 100%;
  }
  .portal-ui.phone-highlights-enabled .phone-highlight-card[data-card="sales_today"] .phone-metric-grid {
    grid-template-columns: 1fr;
  }
  .portal-ui .portal-account-form {
    max-width: none;
  }
  .portal-ui .portal-account-form button {
    justify-self: stretch;
    width: 100%;
  }
  .portal-ui .nav-strip {
    justify-content: flex-end;
    overflow: visible;
    padding: 0;
  }
  .portal-ui .nav-strip > a {
    display: none;
  }
  .portal-ui .nav-logout button {
    min-height: 34px;
    padding: 6px 10px;
  }
  .portal-ui .today-pulse {
    gap: 10px;
    margin-bottom: 12px;
  }
  .portal-ui .today-pulse-head {
    align-items: center;
  }
  .portal-ui .today-pulse-kicker,
  .portal-ui .today-pulse-head .portal-user,
  .portal-ui .today-pulse-eyebrow,
  .portal-ui .today-pulse-card p {
    display: none;
  }
  .portal-ui .today-pulse-head h2 {
    font-size: 20px;
  }
  .portal-ui .today-pulse-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .portal-ui .today-pulse-card {
    min-height: 0;
    padding: 12px;
  }
  .portal-ui .today-pulse-card h2 {
    font-size: 15px;
    line-height: 1.25;
  }
  .portal-ui .today-pulse-card .portal-card-top {
    align-items: center;
  }
  .portal-ui .today-pulse-links {
    margin-top: 8px;
    gap: 6px;
  }
  .portal-ui .today-pulse-link {
    width: auto;
    min-height: 30px;
    justify-content: flex-start;
    padding: 4px 7px;
  }
  .portal-ui .today-pulse-link .surface-status {
    min-height: 20px;
    padding: 2px 5px;
  }
}

@media (max-width: 420px) {
  .portal-ui.phone-highlights-enabled .phone-badge {
    flex-basis: 100%;
  }
  .portal-ui.phone-highlights-enabled .phone-metric-grid {
    grid-template-columns: 1fr;
  }
}

/* ====== Costing UX refresh (finance cockpit, scoped to costing/base.html) ====== */
.costing-ui {
  --costing-bg: #f6f7f9;
  --costing-panel: #ffffff;
  --costing-line: #dfe4ea;
  --costing-line-soft: #eef1f5;
  --costing-ink: #111827;
  --costing-muted: #667085;
  --costing-red: var(--ch-deep-crimson);
  --costing-red-live: var(--ch-master-red);
  --costing-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --costing-shadow-raised: 0 12px 28px rgba(16, 24, 40, 0.08);
  background: var(--costing-bg);
  color: var(--costing-ink);
  padding: 18px 22px 0;
}
.costing-ui .container {
  max-width: 1480px;
}
.costing-ui .ch-strip {
  height: 5px;
  margin: -18px -22px 0;
  background: linear-gradient(90deg, var(--ch-deep-crimson) 0%, var(--ch-master-red) 64%, var(--ch-cover-yellow) 100%);
}
.costing-ui header.brand {
  margin: 0 0 16px;
  padding: 14px 16px 12px;
  border: 1px solid var(--costing-line);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: var(--costing-panel);
  box-shadow: var(--costing-shadow);
}
.costing-ui header.brand .brand-row {
  flex: 0 0 auto;
}
.costing-ui .ch-page-title {
  color: var(--costing-ink);
  font-size: 15px;
  letter-spacing: 0;
}
.costing-ui .nav-strip {
  gap: 8px;
}
.costing-ui .nav-strip a,
.costing-ui .nav-logout button {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 650;
}
.costing-ui header.brand .actions {
  flex: 1 1 100%;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--costing-line-soft);
}
.costing-ui header.brand .meta {
  color: var(--costing-muted);
  font-weight: 600;
}
.costing-ui .surface-nav {
  flex: 1 1 auto;
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--costing-line);
  border-radius: 8px;
  background: #f7f8fa;
  overflow-x: auto;
}
.costing-ui .surface-nav a {
  padding: 8px 10px;
  border-radius: 6px;
  color: #475467;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
}
.costing-ui .surface-nav a.current {
  color: #fff;
  background: var(--costing-red);
  box-shadow: none;
}
.costing-ui .surface-nav a:hover:not(.current) {
  color: var(--costing-red);
  background: #fff;
}
.costing-ui .btn-trust-desk {
  flex: 0 0 auto;
  color: #344054;
  background: #fff;
}
.costing-ui .btn-trust-desk.current {
  color: #fff;
  background: var(--costing-red);
  border-color: var(--costing-red);
}
.costing-ui .page-jump-nav {
  border-color: var(--costing-line);
  background: #fff;
  border-radius: 8px;
}
.costing-ui .costing-hero {
  align-items: center;
  margin: 14px 0 12px;
  padding: 16px 18px;
  border: 1px solid var(--costing-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--costing-shadow);
}
.costing-ui .costing-overview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
  gap: 18px;
}
.costing-ui .costing-hero h2,
.costing-ui .sku-head-row h2,
.costing-ui .ing-head-row h2,
.costing-ui .fam-head-row h2,
.costing-ui .trial-head-row h2 {
  margin: 0 0 5px;
  color: var(--costing-ink);
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0;
}
.costing-ui .costing-hero p,
.costing-ui .sku-head-sub,
.costing-ui .ing-head-sub,
.costing-ui .fam-head-sub,
.costing-ui .trial-head-sub {
  max-width: 920px;
  color: var(--costing-muted);
  font-size: 13px;
  line-height: 1.45;
}
.costing-ui .costing-hero-read {
  min-width: 178px;
  padding: 10px 12px;
  border: 1px solid var(--costing-line);
  border-radius: 8px;
  background: #fbfcfd;
}
.costing-ui .costing-hero-read span,
.costing-ui .costing-hero-read small {
  display: block;
  color: var(--costing-muted);
  font-size: 11px;
}
.costing-ui .costing-hero-read strong {
  display: block;
  margin: 3px 0;
  color: #067647;
  font-size: 24px;
  line-height: 1.1;
}
.costing-ui .costing-actions,
.costing-ui .costing-sku-search,
.costing-ui .inline-form,
.costing-ui .sku-head-actions,
.costing-ui .ing-head-actions,
.costing-ui .fam-head-actions,
.costing-ui .trial-head-actions {
  gap: 8px;
  flex-wrap: wrap;
}
.costing-ui .btn,
.costing-ui .costing-hero button,
.costing-ui .costing-drill-hero button,
.costing-ui .costing-filter-bar button,
.costing-ui .costing-import-form button,
.costing-ui .inline-form button,
.costing-ui .pdf-export-btn {
  border-color: var(--costing-line);
  border-radius: 6px;
  min-height: 34px;
  font-weight: 600;
}
.costing-ui .btn.primary,
.costing-ui .costing-hero button.primary,
.costing-ui .costing-drill-hero button.primary,
.costing-ui .costing-filter-bar button.primary,
.costing-ui .costing-import-form button.primary,
.costing-ui .inline-form button.primary {
  background: var(--costing-red-live);
  border-color: var(--costing-red-live);
}
.costing-ui .costing-filter-bar {
  top: 8px;
  z-index: 20;
  grid-template-columns:
    minmax(150px, 1fr) minmax(160px, 1fr)
    minmax(150px, 1fr) minmax(150px, 1fr)
    minmax(150px, 190px) minmax(96px, 130px);
  gap: 10px;
  align-items: end;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--costing-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--costing-shadow);
}
.costing-ui .costing-filter-bar.has-customer-filter {
  grid-template-columns:
    minmax(130px, 0.8fr) minmax(145px, 0.8fr)
    minmax(130px, 0.8fr) minmax(130px, 0.8fr)
    minmax(240px, 1.5fr) minmax(140px, 180px)
    minmax(96px, 130px);
}
.costing-ui .costing-filter-bar label,
.costing-ui .costing-import-form label {
  color: var(--costing-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.costing-ui .costing-filter-bar input,
.costing-ui .costing-filter-bar select,
.costing-ui .costing-sku-search input,
.costing-ui .costing-import-form input,
.costing-ui .costing-import-form textarea,
.costing-ui .free-issue-review-form input,
.costing-ui .free-issue-review-form select {
  min-height: 36px;
  border-color: var(--costing-line);
  border-radius: 6px;
  background: #fff;
}
.costing-ui .costing-advanced-filters {
  position: relative;
  align-self: end;
  min-width: 0;
}
.costing-ui .costing-advanced-filters summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--costing-line);
  border-radius: 6px;
  color: #344054;
  background: #fff;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.costing-ui .costing-advanced-filters summary::-webkit-details-marker {
  display: none;
}
.costing-ui .advanced-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: var(--costing-red);
  font-size: 11px;
  font-weight: 750;
}
.costing-ui .advanced-filter-grid {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(2, minmax(170px, 1fr));
  gap: 10px;
  width: min(460px, calc(100vw - 44px));
  padding: 12px;
  border: 1px solid var(--costing-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--costing-shadow-raised);
}
.costing-ui .costing-active-filters {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -2px;
}
.costing-ui .costing-active-filters span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--costing-line);
  border-radius: var(--radius-pill);
  color: #344054;
  background: #fbfcfd;
  font-size: 12px;
  line-height: 1.2;
}
.costing-ui .costing-active-filters b {
  margin-left: 4px;
  color: var(--costing-ink);
  overflow-wrap: anywhere;
}
.costing-ui .costing-head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: end;
  gap: 10px 12px;
}
.costing-ui .costing-panel-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.costing-ui .costing-panel-title h2 {
  margin: 0;
}
.costing-ui .costing-panel-title p {
  max-width: 620px;
  margin: 0;
  line-height: 1.35;
}
.costing-ui .costing-table-sort {
  display: grid;
  grid-template-columns: minmax(160px, 240px) auto;
  align-items: end;
  gap: 8px;
}
.costing-ui .costing-table-sort label {
  display: grid;
  gap: 4px;
  color: var(--costing-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.costing-ui .costing-table-sort select {
  min-height: 34px;
  min-width: 160px;
  border-color: var(--costing-line);
  border-radius: 6px;
  background: #fff;
}
.costing-ui .costing-table-sort button {
  min-width: 82px;
}
.costing-ui .costing-status-row {
  margin: 10px 0 12px;
}
.costing-ui .costing-status-row .pill,
.costing-ui .costing-exception-strip a {
  border: 1px solid var(--costing-line);
  border-radius: var(--radius-pill);
  padding: 4px 9px;
  background: #fff;
  box-shadow: var(--costing-shadow);
}
.costing-ui .costing-exception-strip {
  margin: 4px 0 14px;
}
.costing-ui .costing-exception-strip a {
  color: #344054;
  font-size: 12px;
  font-weight: 600;
}
.costing-ui .costing-exception-strip a:hover {
  color: var(--costing-red);
  border-color: #f3b4b7;
}
.costing-ui .costing-kpis {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.costing-ui .costing-kpis .kpi,
.costing-ui .kpi-tile {
  border: 1px solid var(--costing-line);
  border-top: 3px solid #c7ced8;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow: var(--costing-shadow);
}
.costing-ui .costing-kpis .kpi:nth-child(1),
.costing-ui .costing-kpis .kpi:nth-child(5),
.costing-ui .kpi-tile:nth-child(1) {
  border-top-color: var(--costing-red-live);
}
.costing-ui .costing-kpis .kpi:nth-child(3),
.costing-ui .costing-kpis .kpi:nth-child(6) {
  border-top-color: var(--warn);
}
.costing-ui .costing-bridge {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}
.costing-ui .bridge-card {
  position: relative;
  min-width: 0;
  padding: 12px 22px 12px 12px;
  border: 1px solid var(--costing-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--costing-shadow);
}
.costing-ui .bridge-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 9px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid #98a2b3;
  border-right: 1px solid #98a2b3;
  transform: translateY(-50%) rotate(45deg);
  background: var(--costing-bg);
}
.costing-ui .bridge-card .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-bottom: 8px;
  border: 1px solid var(--costing-line);
  border-radius: 50%;
  color: var(--costing-muted);
  font-size: 11px;
  font-weight: 750;
}
.costing-ui .bridge-card b,
.costing-ui .bridge-card small {
  display: block;
  color: var(--costing-muted);
}
.costing-ui .bridge-card b {
  margin-bottom: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.costing-ui .bridge-card strong {
  display: block;
  margin-bottom: 6px;
  color: var(--costing-ink);
  font-size: 20px;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.costing-ui .bridge-card.good strong,
.costing-ui .bridge-card.result strong {
  color: #067647;
}
.costing-ui .bridge-card.cost strong {
  color: var(--costing-red-live);
}
.costing-ui .bridge-card.result {
  border-color: #98d8b3;
  background: #f7fef9;
}
.costing-ui .bridge-card.driver-card.driver-inline {
  border-color: #98d8b3;
  background: #f7fef9;
}
.costing-ui .bridge-card.driver-card.driver-mix {
  border-color: #fed7aa;
  background: #fff7ed;
}
.costing-ui .bridge-card.driver-card.driver-freight,
.costing-ui .bridge-card.driver-card.driver-freight_gap {
  border-color: #bfdbfe;
  background: #eff6ff;
}
.costing-ui .bridge-card.driver-card.driver-mix_freight,
.costing-ui .bridge-card.driver-card.driver-scheme_freight,
.costing-ui .bridge-card.driver-card.driver-mix_scheme,
.costing-ui .bridge-card.driver-card.driver-cm_watch {
  border-color: #fecaca;
  background: #fff5f5;
}
.costing-ui .bridge-card.driver-card.driver-scheme {
  border-color: #fde68a;
  background: #fffbeb;
}
.costing-ui .bridge-card.driver-card.driver-data_gap {
  border-color: #fde68a;
  background: #fffbeb;
}
.costing-ui .bridge-card.driver-card.driver-mix strong {
  color: #9a3412;
}
.costing-ui .bridge-card.driver-card.driver-freight strong,
.costing-ui .bridge-card.driver-card.driver-freight_gap strong {
  color: #1d4ed8;
}
.costing-ui .bridge-card.driver-card.driver-mix_freight strong,
.costing-ui .bridge-card.driver-card.driver-scheme_freight strong,
.costing-ui .bridge-card.driver-card.driver-mix_scheme strong,
.costing-ui .bridge-card.driver-card.driver-cm_watch strong {
  color: var(--bad);
}
.costing-ui .bridge-card.driver-card.driver-scheme strong,
.costing-ui .bridge-card.driver-card.driver-data_gap strong {
  color: #92400e;
}
.costing-ui .cm-driver-pill {
  border: 1px solid transparent;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: none;
}
.costing-ui .cm-driver-inline {
  border-color: #bbf7d0;
  background: var(--pill-green);
  color: #166534;
}
.costing-ui .cm-driver-mix {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #9a3412;
}
.costing-ui .cm-driver-freight,
.costing-ui .cm-driver-freight_gap {
  border-color: #bfdbfe;
  background: var(--pill-info);
  color: #1d4ed8;
}
.costing-ui .cm-driver-mix_freight,
.costing-ui .cm-driver-scheme_freight,
.costing-ui .cm-driver-mix_scheme,
.costing-ui .cm-driver-cm_watch {
  border-color: #fecaca;
  background: var(--pill-red);
  color: var(--bad);
}
.costing-ui .cm-driver-scheme {
  border-color: #fde68a;
  background: var(--pill-amber);
  color: #92400e;
}
.costing-ui .cm-driver-data_gap {
  border-color: #fde68a;
  background: var(--pill-amber);
  color: #92400e;
}
.costing-ui .costing-trust-ribbon {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr)) minmax(112px, auto);
  align-items: stretch;
  gap: 0;
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid var(--costing-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--costing-shadow);
}
.costing-ui .trust-chip,
.costing-ui .trust-desk-link {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 12px;
  border-right: 1px solid var(--costing-line-soft);
  color: #344054;
  text-decoration: none;
}
.costing-ui .trust-chip:hover,
.costing-ui .trust-desk-link:hover {
  background: #fbfcfd;
}
.costing-ui .trust-chip b,
.costing-ui .trust-chip small {
  display: block;
  line-height: 1.2;
}
.costing-ui .trust-chip b {
  font-size: 12px;
}
.costing-ui .trust-chip small {
  margin-top: 2px;
  color: var(--costing-muted);
  font-size: 11px;
}
.costing-ui .trust-dot {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
}
.costing-ui .trust-chip.ok .trust-dot {
  color: #067647;
  background: #dcfae6;
}
.costing-ui .trust-chip.warn .trust-dot {
  color: #b54708;
  background: #fef0c7;
}
.costing-ui .trust-chip.bad .trust-dot {
  color: var(--costing-red-live);
  background: #fee4e2;
}
.costing-ui .trust-desk-link {
  justify-content: center;
  border-right: 0;
  color: #1849a9;
  font-size: 12px;
  font-weight: 700;
}
.costing-ui .kpi .label,
.costing-ui .kpi-tile .kpi-label {
  color: var(--costing-muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.07em;
}
.costing-ui .kpi .val,
.costing-ui .kpi-tile .kpi-value {
  color: var(--costing-ink);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.12;
}
.costing-ui .kpi .sub {
  color: var(--costing-muted);
  line-height: 1.35;
}
.costing-ui .costing-layout {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 370px);
  gap: 16px;
}
.costing-ui .costing-layout > *,
.costing-ui .costing-main-panel,
.costing-ui .costing-side-panel {
  min-width: 0;
}
.costing-ui .costing-workflow-grid,
.costing-ui .costing-chart-grid {
  align-items: start;
  gap: 14px;
}
.costing-ui .costing-workflow-card {
  border-color: var(--costing-line);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
  box-shadow: var(--costing-shadow);
}
.costing-ui .costing-workflow-card:hover {
  border-color: #f3b4b7;
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.08);
}
.costing-ui .costing-workflow-card strong {
  color: var(--costing-red);
}
.costing-ui .costing-chart {
  position: relative;
  border: 1px solid var(--costing-line-soft);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.costing-ui .costing-chart-fallback {
  display: grid;
  align-content: center;
  gap: 12px;
  min-height: 300px;
  padding: 16px;
}
.costing-ui .driver-watch-table {
  min-height: 300px;
  overflow: auto;
}
.costing-ui .driver-watch-table table {
  min-width: 620px;
}
.costing-ui .driver-watch-table td,
.costing-ui .driver-watch-table th {
  padding-top: 9px;
  padding-bottom: 9px;
}
.costing-ui .driver-watch-table a {
  color: var(--costing-red);
  font-weight: 750;
  text-decoration: none;
}
.costing-ui .driver-watch-table a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.costing-ui .costing-action-queue {
  margin: 16px 0;
}
.costing-ui .costing-action-queue > .head {
  margin-bottom: 10px;
}
.costing-ui .ss-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.costing-ui .ss-action-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--costing-line);
  border-top: 3px solid var(--costing-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--costing-shadow);
}
.costing-ui .ss-action-card.action-mix,
.costing-ui .ss-action-card.action-scheme {
  border-top-color: #f59e0b;
}
.costing-ui .ss-action-card.action-freight,
.costing-ui .ss-action-card.action-freight_gap {
  border-top-color: #2563eb;
}
.costing-ui .ss-action-card.action-mix_freight,
.costing-ui .ss-action-card.action-scheme_freight,
.costing-ui .ss-action-card.action-mix_scheme,
.costing-ui .ss-action-card.action-cm_watch {
  border-top-color: var(--bad);
}
.costing-ui .ss-action-card.action-data_gap {
  border-top-color: #d97706;
}
.costing-ui .ss-action-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.costing-ui .ss-action-party {
  overflow: hidden;
  color: var(--costing-ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.costing-ui .ss-action-party:hover {
  color: var(--costing-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.costing-ui .ss-action-card > strong {
  color: var(--costing-ink);
  font-size: 18px;
  line-height: 1.15;
}
.costing-ui .ss-action-card p {
  min-height: 48px;
  margin: 0;
  color: var(--costing-muted);
  font-size: 12px;
  line-height: 1.35;
}
.costing-ui .ss-action-card dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}
.costing-ui .ss-action-card dl div {
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid var(--costing-line-soft);
  border-radius: 6px;
  background: #fbfcfd;
}
.costing-ui .ss-action-card dt,
.costing-ui .ss-action-card dd {
  margin: 0;
}
.costing-ui .ss-action-card dt {
  color: var(--costing-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.costing-ui .ss-action-card dd {
  margin-top: 3px;
  color: var(--costing-ink);
  font-size: 12px;
  font-weight: 800;
}
.costing-ui .ss-action-card-links {
  margin-top: 2px;
}
.costing-ui .ss-action-card-links a:first-child {
  border-color: #f3b4b7;
  color: var(--costing-red);
  background: #fffafa;
}
.costing-ui .ss-action-empty {
  padding: 14px;
}
.costing-ui .ss-action-cell {
  display: grid;
  gap: 3px;
  min-width: 145px;
}
.costing-ui .ss-action-cell .pill {
  justify-self: start;
}
.costing-ui .ss-action-cell a,
.costing-ui .ss-action-cell span {
  color: var(--costing-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}
.costing-ui .ss-action-cell a:hover {
  color: var(--costing-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.costing-ui .ss-action-cell small {
  color: var(--costing-muted);
  font-size: 11px;
  line-height: 1.25;
}
.costing-ui .ss-action-cell.compact {
  min-width: 130px;
}
.costing-ui .costing-chart-fallback > b {
  color: var(--costing-ink);
  font-size: 13px;
}
.costing-ui .chart-fallback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.costing-ui .chart-fallback-grid a {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--costing-line-soft);
  border-radius: 6px;
  color: var(--costing-ink);
  background: #fbfcfd;
  text-decoration: none;
}
.costing-ui .chart-fallback-grid a:hover {
  border-color: #f3b4b7;
  background: #fffafa;
}
.costing-ui .chart-fallback-grid span {
  overflow: hidden;
  color: var(--costing-muted);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.costing-ui .chart-fallback-grid strong {
  color: var(--costing-red);
  font-size: 18px;
  line-height: 1.15;
}
.costing-ui .chart-fallback-grid small {
  overflow: hidden;
  color: var(--costing-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.costing-ui .card {
  border-color: var(--costing-line);
  border-radius: 8px;
  box-shadow: var(--costing-shadow);
}
.costing-ui .card h2 {
  color: var(--costing-ink);
  font-size: 15px;
  letter-spacing: 0;
}
.costing-ui .card h3 {
  color: var(--costing-muted);
  font-size: 12px;
  letter-spacing: 0.06em;
}
.costing-ui .costing-side-panel {
  top: 96px;
}
.costing-ui .costing-dl {
  grid-template-columns: 112px 1fr;
  gap: 10px 14px;
}
.costing-ui .costing-dl dt {
  color: var(--costing-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.costing-ui .table-wrap,
.costing-ui .responsive-table,
.costing-ui .history-table-wrap {
  border: 1px solid var(--costing-line);
  border-radius: 8px;
  background: #fff;
}
.costing-ui .table-wrap table th,
.costing-ui table th {
  background: #f5f7fa;
  color: var(--costing-muted);
  font-size: 11px;
  letter-spacing: 0.05em;
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: normal;
}
.costing-ui .table-wrap table td,
.costing-ui table td {
  border-bottom-color: var(--costing-line-soft);
  overflow-wrap: normal;
  word-break: normal;
}
.costing-ui table th.num,
.costing-ui table td.num {
  white-space: nowrap;
}
.costing-ui .table-wrap table td:first-child,
.costing-ui .table-wrap table th:first-child {
  min-width: 120px;
}
.costing-ui .table-wrap tbody tr:hover td {
  background: #fffafa;
}
.costing-ui .costing-scroll-table > table {
  min-width: 760px;
}
.costing-ui .ss-drilldown {
  min-width: 180px;
}
.costing-ui .ss-party-select {
  color: var(--costing-ink);
  font-weight: 750;
  text-decoration: none;
}
.costing-ui .ss-party-select:hover {
  color: var(--costing-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.costing-ui .ss-drilldown > summary {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--costing-line);
  border-radius: 6px;
  color: var(--costing-red);
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.costing-ui .ss-drilldown > summary::-webkit-details-marker {
  display: none;
}
.costing-ui .ss-drilldown[open] > summary {
  color: #fff;
  border-color: var(--costing-red);
  background: var(--costing-red);
}
.costing-ui .ss-drill-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.costing-ui .ss-row-actions {
  flex-wrap: nowrap;
  min-width: 188px;
  margin-top: 0;
}
.costing-ui .ss-drill-links a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid var(--costing-line);
  border-radius: 6px;
  background: #fbfcfd;
  font-size: 12px;
}
.costing-ui .ss-row-actions a {
  min-height: 28px;
  padding-inline: 6px;
  font-size: 11px;
  font-weight: 750;
}
.costing-ui .state-drill-links {
  min-width: 190px;
  gap: 3px;
}
.costing-ui .state-drill-links a {
  padding-inline: 5px;
  font-size: 11px;
}
.costing-ui .ss-drill-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(86px, 1fr));
  gap: 6px;
  margin: 8px 0 0;
}
.costing-ui .ss-drill-metrics div {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--costing-line-soft);
  border-radius: 6px;
  background: #fff;
}
.costing-ui .ss-drill-metrics dt {
  color: var(--costing-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.costing-ui .ss-drill-metrics dd {
  margin: 2px 0 0;
  color: var(--costing-ink);
  font-size: 12px;
  font-weight: 750;
}
.costing-ui .sku-cockpit-table > table {
  min-width: 920px;
  table-layout: auto;
}
.costing-ui .sku-cockpit-table td:first-child,
.costing-ui .sku-cockpit-table th:first-child {
  min-width: 150px;
}
.costing-ui table a {
  color: var(--costing-red);
  font-weight: 600;
  text-decoration: none;
}
.costing-ui table a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.costing-ui .invoice-no {
  white-space: nowrap;
}
.costing-ui .costing-waterfall {
  border: 1px solid var(--costing-line);
  border-radius: 8px;
  padding: 4px 12px;
  background: #fbfcfd;
}
.costing-ui .costing-waterfall div {
  border-bottom-color: var(--costing-line-soft);
}
.costing-ui .costing-waterfall div:last-child {
  color: var(--costing-red);
}
.costing-ui .costing-drill-hero {
  margin: 14px 0 14px;
  padding: 18px 20px;
  border-left: 4px solid var(--costing-red-live);
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}
.costing-ui .costing-drill-hero .sku-head-row,
.costing-ui .costing-drill-hero .ing-head-row,
.costing-ui .costing-drill-hero .fam-head-row,
.costing-ui .costing-drill-hero .trial-head-row {
  align-items: center;
}
.costing-ui .alias-list code {
  background: #f2f4f7;
}
.costing-ui .spec-grid,
.costing-ui .kpi-strip-grid {
  gap: 10px;
}
.costing-ui .tabs {
  gap: 6px;
  border-bottom-color: var(--costing-line);
}
.costing-ui .tabs .tab {
  border-radius: 6px 6px 0 0;
  color: var(--costing-muted);
}
.costing-ui .tabs .tab.active {
  color: #fff;
  border-bottom-color: var(--costing-red);
  background: var(--costing-red);
}
.costing-ui .composition {
  height: 34px;
  border-radius: 6px;
  background: #eef1f5;
}
.costing-ui .composition span {
  text-shadow: none;
}
.costing-ui .banner {
  border-radius: 8px;
  box-shadow: var(--costing-shadow);
}
.costing-ui .finance-pack-recovery {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.costing-ui .finance-pack-recovery .banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.costing-ui .ch-footer {
  margin: 34px -22px 0;
}

@media (min-width: 1280px) {
  .costing-ui .contribution-kpis {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

@media (max-width: 1000px) {
  .costing-ui .costing-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .costing-ui .costing-filter-bar.has-customer-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .costing-ui .costing-filter-bar button {
    grid-column: 1 / -1;
  }
  .costing-ui .costing-layout {
    grid-template-columns: 1fr;
  }
  .costing-ui .costing-side-panel {
    position: static;
  }
  .costing-ui .costing-side-panel.card-auto-collapse {
    position: relative;
  }
  .costing-ui .costing-bridge {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .costing-ui .ss-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .costing-ui .costing-trust-ribbon {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .costing-ui .trust-desk-link {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1550px) {
  .costing-ui #ss-contribution-table .costing-table-optional,
  .costing-ui #state-contribution-table .costing-table-optional {
    display: none;
  }
}

@media (max-width: 1450px) {
  .costing-ui .costing-layout .costing-table-optional {
    display: none;
  }
}

@media (max-width: 680px) {
  .costing-ui {
    padding: 14px 12px 0;
  }
  .costing-ui .ch-strip {
    margin: -14px -12px 0;
  }
  .costing-ui header.brand {
    padding: 12px 10px;
    gap: 10px;
  }
  .costing-ui header.brand .brand-row {
    justify-content: center;
    width: 100%;
  }
  .costing-ui .nav-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .costing-ui .nav-strip::-webkit-scrollbar,
  .costing-ui .surface-nav::-webkit-scrollbar {
    display: none;
  }
  .costing-ui .nav-strip a,
  .costing-ui .nav-logout button {
    flex: 0 0 auto;
    width: auto;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: var(--radius-pill);
  }
  .costing-ui .nav-logout {
    flex: 0 0 auto;
    grid-column: auto;
    width: auto;
    margin: 0;
  }
  .costing-ui header.brand .actions,
  .costing-ui .costing-hero,
  .costing-ui .costing-drill-hero .sku-head-row,
  .costing-ui .costing-drill-hero .ing-head-row,
  .costing-ui .costing-drill-hero .fam-head-row,
  .costing-ui .costing-drill-hero .trial-head-row {
    align-items: stretch;
  }
  .costing-ui .costing-hero {
    flex-direction: column;
  }
  .costing-ui header.brand .actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .costing-ui header.brand .actions::-webkit-scrollbar {
    display: none;
  }
  .costing-ui header.brand .meta {
    flex: 1 1 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .costing-ui header.brand .actions > .surface-nav {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .costing-ui .surface-nav {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .costing-ui .surface-nav a {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 7px 10px;
    white-space: nowrap;
  }
  .costing-ui .surface-nav a.current {
    order: -1;
  }
  .costing-ui .btn-trust-desk,
  .costing-ui #refresh-btn {
    width: auto;
    min-height: 36px;
  }
  .costing-ui .costing-overview-hero {
    grid-template-columns: 1fr;
  }
  .costing-ui .costing-hero h2,
  .costing-ui .sku-head-row h2,
  .costing-ui .ing-head-row h2,
  .costing-ui .fam-head-row h2,
  .costing-ui .trial-head-row h2 {
    font-size: 22px;
  }
  .costing-ui .page-jump-nav {
    gap: 4px;
    padding: 6px 8px;
  }
  .costing-ui .page-jump-nav .label {
    padding-right: 4px;
    font-size: 10px;
  }
  .costing-ui .page-jump-nav a {
    min-height: 36px;
    padding: 7px 6px;
    font-size: 11px;
  }
  .costing-ui .costing-sku-search input {
    min-width: 0;
  }
  .costing-ui .costing-filter-bar {
    grid-template-columns: 1fr;
    position: static;
  }
  .costing-ui .costing-filter-bar.has-customer-filter {
    grid-template-columns: 1fr;
  }
  .costing-ui .costing-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .costing-ui .costing-kpis .kpi {
    min-width: 0;
    padding: 10px 12px;
  }
  .costing-ui .costing-kpis .kpi .label {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    line-height: 1.15;
  }
  .costing-ui .costing-kpis .kpi .val {
    font-size: 20px;
  }
  .costing-ui .costing-kpis .kpi .sub {
    font-size: 11px;
    line-height: 1.25;
  }
  .costing-ui .costing-main-panel .head,
  .costing-ui .costing-head-actions,
  .costing-ui .costing-table-sort {
    align-items: stretch;
  }
  .costing-ui .costing-main-panel .head {
    flex-direction: column;
    gap: 8px;
  }
  .costing-ui .costing-main-panel .head h2 {
    width: 100%;
  }
  .costing-ui .costing-table-sort {
    grid-template-columns: 1fr;
  }
  .costing-ui .costing-head-actions {
    justify-content: flex-start;
    width: 100%;
  }
  .costing-ui .costing-table-sort,
  .costing-ui .costing-table-sort label,
  .costing-ui .costing-table-sort select {
    width: 100%;
  }
  .costing-ui .advanced-filter-grid {
    position: static;
    width: auto;
    grid-template-columns: 1fr;
    margin-top: 8px;
    box-shadow: none;
  }
  .costing-ui .costing-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .costing-ui .costing-bridge {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .costing-ui .ss-action-grid {
    grid-template-columns: 1fr;
  }
  .costing-ui .ss-action-card p {
    min-height: 0;
  }
  .costing-ui .ss-action-card dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .costing-ui .bridge-card:not(:last-child)::after {
    display: none;
  }
  .costing-ui .costing-trust-ribbon {
    grid-template-columns: 1fr;
  }
  .costing-ui .trust-chip,
  .costing-ui .trust-desk-link {
    border-right: 0;
    border-bottom: 1px solid var(--costing-line-soft);
  }
  .costing-ui .costing-table-optional {
    display: none;
  }
  .costing-ui .costing-mobile-optional {
    display: none;
  }
  .costing-ui .sku-cockpit-table > table {
    min-width: 560px;
    table-layout: auto;
  }
  .costing-ui .sku-cockpit-table td:first-child,
  .costing-ui .sku-cockpit-table th:first-child {
    min-width: 130px;
  }
  .costing-ui .ch-footer {
    margin: 24px -12px 0;
  }
}


/* ====== 16. Mobile responsive ====== */
@media (max-width: 600px) {
  body {
    font-size: 15px;
    padding: 16px var(--container-pad-m);
  }
  .container { padding: 0; }
  .card { padding: 14px; margin-bottom: 12px; }
  .card h2 { font-size: 14px; }
  .card h3 { font-size: 12px; }

  .ch-strip {
    margin: -16px calc(var(--container-pad-m) * -1) 0 calc(var(--container-pad-m) * -1);
    max-width: 100vw;
  }
  .ch-logo img {
    height: 32px;
    min-width: 100px;
  }
  .ch-logo {
    min-height: 44px;
  }
  .ch-footer {
    margin: 24px calc(var(--container-pad-m) * -1) -16px calc(var(--container-pad-m) * -1);
    padding: 14px 16px;
    max-width: 100vw;
  }

  header.brand h1,
  .ch-page-title { font-size: 16px; }
  header.brand .meta,
  header.ch-header-bar .meta { font-size: 11px; }

  /* Phone use is task-first: keep dashboard switching compact so the
     page's actual work stays visible above the fold. */
  .ops-ui .nav-strip {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 6px;
    font-size: 13px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ops-ui .nav-strip::-webkit-scrollbar,
  .ops-ui .surface-nav::-webkit-scrollbar {
    display: none;
  }
  .ops-ui .nav-strip a,
  .ops-ui .nav-logout button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    width: auto;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--tile-bg);
    line-height: 1.2;
  }
  .ops-ui .nav-strip a.current,
  .ops-ui .nav-strip a[aria-current="page"] {
    background: var(--paper);
    border-color: #d8d8d8;
  }
  .ops-ui .nav-logout {
    flex: 0 0 auto;
    grid-column: auto;
    margin: 0;
    width: auto;
  }
  .ops-ui .nav-logout button {
    min-height: 34px;
    background: var(--paper);
  }

  .ops-ui .surface-nav,
  .page-jump-nav {
    width: 100%;
  }
  .ops-ui .surface-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    padding: 4px;
    border-radius: var(--radius);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ops-ui .surface-nav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    text-align: center;
    white-space: nowrap;
  }
  .page-jump-nav a {
    min-height: 40px;
    padding: 8px 10px;
  }
  .page-back-top {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .grid-cards { grid-template-columns: 1fr; gap: 12px; }
  .grid-perf { grid-template-columns: 1fr 1fr; gap: 8px; }
  .grid-perf .stat .val { font-size: 16px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi .val { font-size: 20px; }
  .channel-strip { grid-template-columns: 1fr 1fr; }
  .card-collapse-footer { padding-left: 0; padding-right: 0; }
  .card-collapse-toggle { width: 100%; justify-content: center; }

  table th, table td { padding: 6px 6px; font-size: 13px; }
  table.kv { font-size: 13px; }
  table.kv td { padding: 6px 4px 6px 0; }
  table.kv td.k { width: auto; padding-right: 6px; }

  .alert { padding: 10px 12px; }
  .alert .ack-row { gap: 4px; }
  .narrative { padding: 10px 12px; font-size: 13px; }
  .pill, .badge { padding: 2px 6px; font-size: 10px; }
  .card-title-action {
    float: none;
    display: inline-flex;
    margin: 6px 4px 0 0;
  }

  /* Tap targets */
  button, .btn, select,
  input[type=text], input[type=search], input[type=date],
  input[type=number], input[type=password], textarea {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
  }
  .freshness-chip .freshness-refresh {
    min-height: 28px;
    min-width: 28px;
    width: 28px;
    height: 28px;
    padding: 0;
  }
  .btn-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 12px;
  }

  .hide-mobile { display: none; }
  .card a { word-break: break-word; }
  .costing-hero,
  .costing-actions,
  .costing-sku-search {
    flex-direction: column;
    align-items: stretch;
  }
  .costing-sku-search input { min-width: 0; width: 100%; }
  .costing-filter-bar {
    position: static;
    grid-template-columns: 1fr;
  }
  .costing-kpis { grid-template-columns: 1fr; }
  .costing-layout { grid-template-columns: 1fr; }
  .costing-side-panel { position: static; }
  .costing-side-panel.card-auto-collapse { position: relative; }
  .costing-dl { grid-template-columns: 1fr; }
  .costing-table-optional { display: none; }
  .costing-main-panel .table-wrap > table,
  .costing-side-panel .table-wrap > table {
    min-width: 0;
    table-layout: fixed;
  }
  .costing-main-panel .table-wrap > table:has(th:nth-child(4)),
  .costing-side-panel .table-wrap > table:has(th:nth-child(4)) {
    min-width: 680px;
    table-layout: auto;
  }
  .costing-main-panel .table-wrap > table:has(th:nth-child(6)),
  .costing-side-panel .table-wrap > table:has(th:nth-child(6)) {
    min-width: 820px;
  }
  .costing-main-panel .costing-scroll-table > table,
  .costing-side-panel .costing-scroll-table > table {
    min-width: 760px;
    table-layout: auto;
  }
  .costing-ui .costing-main-panel .sku-cockpit-table > table {
    min-width: 560px;
    table-layout: auto;
  }
  .costing-main-panel table th,
  .costing-main-panel table td,
  .costing-side-panel table th,
  .costing-side-panel table td {
    overflow-wrap: anywhere;
    word-break: normal;
  }
  .costing-main-panel table th,
  .costing-side-panel table th {
    letter-spacing: 0;
  }
  .costing-main-panel .table-wrap th:first-child,
  .costing-main-panel .table-wrap td:first-child {
    width: 24%;
  }
  .free-issue-review-form {
    grid-template-columns: 1fr;
    min-width: 280px;
  }
}

@media (max-width: 400px) {
  .kpis { grid-template-columns: 1fr; }
  .grid-perf { grid-template-columns: 1fr; }
  body { padding: 12px 8px; }
  .card { padding: 12px; }
}

/* T2.7 — As-of time-travel chip
   Used on /costing/sku/{name} + /costing/family/{name} +
   /costing/ingredient/{name} drill headers. Empty / single-month
   variant renders a static pill; multi-month variant renders a
   <select> that auto-submits on change. */
.asof-chip,
.asof-chip-form {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  background: #f8fafc;
  font-size: 12px;
  color: var(--ink, #1f2937);
  white-space: nowrap;
}
.asof-chip-static { color: var(--muted, #6b7280); cursor: default; }
.asof-chip-label { font-weight: 500; white-space: nowrap; }
.asof-chip-select {
  border: none;
  background: transparent;
  font-size: 12px;
  min-width: 84px;
  padding: 0 2px;
  outline: none;
  cursor: pointer;
}
.asof-chip-select:focus { color: var(--accent, #305496); }

/* T2.5c — SS bucket pill palette (F4 ratification)
   star          → navy (high growth + high share, the prized cohort)
   emerging      → green (high growth, lower share — invest)
   detect        → amber (high share, low growth — investigate)
   dont_bother   → muted-grey (low growth + low share — deprioritise)
   Used inline next to Status pill on the SS Action Card header.    */
.pill-bucket-star {
  background: var(--ch-navy, #305496);
  color: #fff;
}
.pill-bucket-emerging {
  background: rgba(84,130,53,0.18);
  color: var(--good, #548235);
}
.pill-bucket-detect {
  background: rgba(245,158,11,0.18);
  color: #b45309;
}
.pill-bucket-dont_bother {
  background: rgba(107,114,128,0.15);
  color: var(--muted, #6b7280);
}

/* T2.5c A3 — 4-cohort matrix card on Sales landing
   2x2 grid: Retained-Grown / Retained-Declined / Lapsed / Recruited.
   Sized for desktop scan + collapses to 2-column on tablet, 1-column
   on phone via the auto-fit grid template.                           */
.cohort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.cohort-cell {
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 6px;
  padding: 10px 14px;
  background: #fafafa;
}
.cohort-h     { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.cohort-n     { font-size: 18px; font-weight: 600; }
.cohort-rs    { font-size: 12px; color: var(--muted, #6b7280); margin: 4px 0 8px 0; }
.cohort-sample        { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.cohort-sample li     { padding: 2px 0; border-top: 1px solid #eef2f7; }
.cohort-sample li:first-child { border-top: 0; }

/* Per-cohort tone — green good, amber warn, navy emerging, muted lapsed */
.cohort-grown    { border-left: 3px solid var(--good, #548235); }
.cohort-declined { border-left: 3px solid #b45309; }
.cohort-lapsed   { border-left: 3px solid var(--bad, #b91c1c); }
.cohort-recruited{ border-left: 3px solid var(--ch-navy, #305496); }

/* T2.5c A2/R3 — cadence-deviation strip on closure tracker */
.cadence-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #eef2f7;
}
.cadence-strip strong { margin-right: 4px; }

/* ====== Open Orders card (Akash 2026-05-13) ======
   Shared Jinja macro jarvis/web/components/open_orders_card.html
   renders full on /dispatch/ and compact on /sales/. Uses canonical .right-num table
   styling + a small set of helpers below. NO hardcoded brand colors —
   reads --line / --muted / --warn / --bad tokens. */

.aging-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
}
.chip-aging {
  background: #f3f4f6;
  color: var(--ink);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.chip-aging.warn {
  background: #fdf3e7;
  color: var(--warn);
  border-color: rgba(180,83,9,0.22);
}

/* Per-order table — uses base table styling (uppercase muted th,
   thin row separators, 6/10 padding). Just adds a touch of vertical
   rhythm + makes the toggle button look like a glyph not a button. */
.oo-orders-table { margin-top: 14px; font-size: 13px; }
.oo-orders-table thead th { white-space: nowrap; }
.oo-orders-table tbody tr.oo-row td { vertical-align: middle; }
.oo-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 11px;
  color: var(--accent);
  padding: 0 4px 0 0;
  line-height: 1;
}
.oo-toggle:hover { color: var(--accent-hover); }
.oo-drill-cell {
  background: #fafbfc;
  padding: 10px 14px 14px 30px;
}
.oo-residual-action {
  align-items: center;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 6px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 9px 10px;
}
.oo-residual-action strong {
  color: #7c2d12;
  display: block;
  font-size: 12px;
  margin-bottom: 2px;
}
.oo-close-residual {
  border-color: #c2410c;
  color: #9a3412;
  flex: 0 0 auto;
}
.oo-close-residual:hover {
  background: #ffedd5;
  color: #7c2d12;
}
.oo-close-residual:disabled {
  cursor: wait;
  opacity: 0.62;
}
.oo-line-table {
  font-size: 12px;
  background: transparent;
}
.oo-line-table thead th {
  font-size: 10px;
}

/* Canonical accessibility-hidden rows/items. Several workflow lists
   set display:grid/flex on row elements, so make the HTML hidden
   contract win across cards, tables, and operator queues. */
[hidden] { display: none !important; }

/* Monospace cells (item codes, batch numbers) */
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

/* Empty-state card variant */
.card.empty {
  background: #fafafa;
  color: var(--muted);
}
.card.empty h2 { color: var(--ink); }

.table-empty-cell {
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  padding: 14px 16px !important;
  text-align: left !important;
}
.table-empty-cell strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 3px;
}
.table-empty-cell span {
  display: block;
  max-width: 760px;
}

/* ====== Pending-order card system (2026-05-14) ======
   Shared by /sales, /dispatch, and pending-aware inventory overlays.
   The goal is scan-first on desktop and card-style readable on phones,
   without adding another dashboard design language. */
.pending-card {
  background: linear-gradient(180deg, #fff 0%, #fff 58%, #fffafa 100%);
  border-color: #efd8d8;
  box-shadow: 0 1px 0 rgba(139,3,4,0.04);
}
.pending-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.pending-card-head h2 {
  margin: 0;
}
.pending-card-sub {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.pending-card-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
}
.pending-card-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 10px;
}
.pending-date-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 6px;
}
.pending-date-filter label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
}
.pending-date-filter input {
  min-height: 32px;
  width: 136px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-transform: none;
}
.oo-inline-details {
  min-width: 120px;
}
.oo-inline-details summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  list-style: none;
}
.oo-inline-details summary::-webkit-details-marker {
  display: none;
}
.oo-inline-details ul {
  min-width: 260px;
  max-width: 340px;
  margin: 6px 0 0;
  padding-left: 16px;
  color: var(--ink);
  text-align: left;
  white-space: normal;
}
.oo-inline-details li + li {
  margin-top: 4px;
}
.pending-age-badge {
  flex: 0 0 auto;
  min-width: 78px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pending-age-badge span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pending-age-badge strong {
  display: block;
  font-size: 17px;
  line-height: 1.1;
}
.pending-age-badge.is-warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: var(--warn);
}
.pending-age-badge.is-late {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--bad);
}
.pending-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}
.pending-kpi {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.pending-kpi .k {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.pending-kpi strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.pending-kpi.is-warn strong { color: var(--warn); }
.pending-aging-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 6px;
  margin: 8px 0 14px;
}
.pending-aging-strip span,
.pending-aging-strip button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.pending-aging-strip button:hover,
.pending-aging-strip button.active {
  border-color: var(--accent-soft);
  background: #fffafa;
}
.pending-aging-strip strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pending-aging-strip .is-warn {
  background: #fffbeb;
  border-color: #fde68a;
}
.pending-aging-strip .is-late {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--bad);
}
.pending-tat-buckets {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
}
.pending-tat-buckets button.is-warn {
  background: #fffbeb;
  border-color: #fde68a;
}
.pending-tat-buckets button.is-late {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--bad);
}
.pending-period-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}
.pending-tat-drilldown h3 {
  margin: 0 0 8px;
}
.pending-table-wrap {
  margin-top: 4px;
}
.pending-surface-handoff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #efd8d8;
}
.pending-surface-handoff .btn {
  flex: 0 0 auto;
}
.oo-orders-table {
  min-width: 1060px;
}
.oo-orders-table th:nth-child(7),
.oo-orders-table td:nth-child(7),
.oo-orders-table th:nth-child(8),
.oo-orders-table td:nth-child(8),
.oo-orders-table th:nth-child(n+9),
.oo-orders-table td:nth-child(n+9) {
  white-space: nowrap;
}
.oo-orders-table tbody tr.oo-row:hover td {
  background: #fffafa;
}
.oo-po-cell {
  white-space: nowrap;
  font-weight: 600;
}
.oo-party-cell a {
  font-weight: 600;
}
.oo-toggle {
  min-width: 24px;
  min-height: 24px;
  margin-right: 2px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.oo-toggle:hover {
  border-color: var(--accent);
  background: #fffafa;
}
.pending-small-table {
  min-width: 560px;
}
.pending-state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.pending-state-grid > div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.pending-state-grid span,
.pending-state-grid small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.pending-state-grid strong {
  display: block;
  margin: 2px 0;
  color: var(--ink);
  font-size: 16px;
}
.pending-footnote,
.pending-empty-copy {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.pending-empty {
  background: #fffafa;
  border-style: dashed;
}

.inventory-commitment-panel {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px dashed #efd8d8;
  border-radius: var(--radius-sm);
  background: #fffafa;
}
.inventory-commitment-panel .totals-strip {
  padding: 0;
  margin: 0;
}
.inventory-commitment-panel .totals-strip + .totals-strip {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.inventory-commitment-panel .overlay-label {
  flex-basis: 170px;
}

@media (max-width: 760px) {
  .responsive-table {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #fff;
  }
  .responsive-table::before,
  .table-wrap::before,
  .admin-table-wrap::before,
  .history-table-wrap::before,
  .mix-scroll::before {
    content: "Swipe table ->";
    display: block;
    padding: 7px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    background: var(--tile-bg);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .responsive-table > table th:first-child,
  .responsive-table > table td:first-child,
  .table-wrap > table th:first-child,
  .table-wrap > table td:first-child,
  .admin-table-wrap > table th:first-child,
  .admin-table-wrap > table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--paper);
    box-shadow: 1px 0 0 var(--line);
  }
  .responsive-table > table th:first-child,
  .table-wrap > table th:first-child,
  .admin-table-wrap > table th:first-child {
    z-index: 3;
    background: var(--tile-bg);
  }
  .responsive-table td a,
  .history-table-wrap td a,
  .mix-scroll td a,
  .admin-table-wrap td a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 0;
  }

  .pending-card-head {
    align-items: stretch;
    flex-direction: column;
  }
  .pending-card-tools,
  .pending-date-filter,
  .pending-card-actions {
    justify-content: flex-start;
  }
  .pending-age-badge {
    min-width: 66px;
  }
  .pending-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pending-aging-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pending-surface-handoff {
    align-items: stretch;
    flex-direction: column;
  }
  .pending-surface-handoff .btn {
    width: 100%;
  }

  .oo-orders-table,
  .oo-orders-table thead,
  .oo-orders-table tbody,
  .oo-orders-table tr,
  .oo-orders-table td,
  .oo-line-table,
  .oo-line-table thead,
  .oo-line-table tbody,
  .oo-line-table tr,
  .oo-line-table td,
  .pending-small-table,
  .pending-small-table tbody,
  .pending-small-table tr,
  .pending-small-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .oo-orders-table,
  .oo-line-table,
  .pending-small-table {
    min-width: 0;
  }
  .oo-orders-table thead,
  .oo-line-table thead {
    display: none;
  }
  .pending-small-table tr.kv-th {
    display: none;
  }
  .oo-orders-table tr.oo-row,
  .oo-line-table tr,
  .pending-small-table tr:not(.kv-th) {
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
  }
  .oo-orders-table tr.oo-row:last-child,
  .pending-small-table tr:last-child {
    border-bottom: 0;
  }
  .oo-orders-table tr.oo-row td,
  .oo-line-table tr td,
  .pending-small-table tr:not(.kv-th) td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 5px 0;
    border-bottom: 0;
    text-align: right !important;
  }
  .oo-orders-table tr.oo-row td::before,
  .oo-line-table tr td::before,
  .pending-small-table tr:not(.kv-th) td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
  }
  .oo-orders-table td.oo-po-cell,
  .oo-orders-table td.oo-party-cell {
    justify-content: flex-start;
    text-align: left !important;
  }
  .oo-orders-table td.oo-po-cell::before,
  .oo-orders-table td.oo-party-cell::before {
    display: none;
  }
  .oo-orders-table td.oo-party-cell {
    padding-top: 2px;
  }
  .oo-orders-table tr.oo-drill {
    display: block;
  }
  .oo-orders-table tr.oo-drill[hidden] {
    display: none;
  }
  .oo-orders-table tr.oo-drill td.oo-drill-cell {
    display: block;
    padding: 0;
    background: #f8fafc;
  }
  .oo-orders-table tr.oo-drill td.oo-drill-cell::before {
    display: none;
  }
  .oo-line-table tr {
    background: #fff;
  }
}

@media print {
  .card.card-auto-collapse.is-card-collapsed {
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
  .card-collapse-footer,
  .card-collapse-toggle {
    display: none !important;
  }
}

@media (max-width: 600px) {
  header.brand,
  header.ch-header-bar {
    align-items: stretch;
    gap: 10px;
  }
  header.brand .brand-row,
  header.brand .actions,
  header.ch-header-bar .actions {
    width: 100%;
  }
  .nav-strip {
    width: 100%;
    overflow-x: visible;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 0;
  }
  .nav-strip a {
    min-width: 0;
  }
  .portal-ui .nav-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .portal-ui .nav-strip a,
  .portal-ui .nav-logout button {
    flex: 0 0 auto;
    min-height: 34px;
    width: auto;
    padding: 7px 10px;
    border-radius: var(--radius-pill);
  }
  .portal-ui .nav-logout {
    flex: 0 0 auto;
    margin-left: 0;
  }
  .admin-ui header.brand .nav-strip {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .admin-ui header.brand .nav-strip a,
  .admin-ui header.brand .nav-logout button {
    flex: 0 0 auto;
    min-height: 34px;
    width: auto;
    padding: 7px 10px !important;
    border-radius: var(--radius-pill);
  }
  .admin-ui header.brand .nav-logout {
    flex: 0 0 auto;
    grid-column: auto;
    width: auto;
    margin-left: 0;
  }
  .card {
    overflow-x: visible;
  }

  .responsive-table > .oo-orders-table,
  .responsive-table > .oo-line-table,
  .responsive-table > .pending-small-table {
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .pending-card-head {
    flex-direction: column;
  }
  .pending-age-badge {
    width: 100%;
    text-align: left;
  }
  .pending-kpi-grid,
  .pending-aging-strip {
    grid-template-columns: 1fr;
  }
}

/* Inventory filter polish. Shared ops-control-* classes own the top
   control panel; legacy Inventory filter rows stay compact inside cards. */
.inventory-ui .card.compact.page-section {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

.inventory-ui .ops-control-panel.card.compact.page-section {
  display: block;
  padding: 12px 16px;
}

.inventory-ui .inventory-control-row {
  gap: 10px 14px;
  min-width: 0;
  max-width: 100%;
}

.inventory-ui .inventory-control-actions {
  justify-content: flex-end;
  margin-left: auto;
}

.inventory-ui .asof-bar,
.inventory-ui .download-row,
.inventory-ui .sku-toolbar,
.inventory-ui .batch-toolbar,
.inventory-ui .fifo-toolbar,
.inventory-ui .fifo-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.inventory-ui .card.compact.page-section .download-row + .download-row {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.inventory-ui .download-row .label {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.inventory-ui .asof-form,
.inventory-ui .sku-asof-form,
.inventory-ui .batch-asof-form,
.inventory-ui .grn-range-form,
.inventory-ui .fifo-toolbar form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.inventory-ui .asof-form input[type="date"],
.inventory-ui .sku-asof-form input[type="date"],
.inventory-ui .batch-asof-form input[type="date"],
.inventory-ui .grn-range-form input[type="date"],
.inventory-ui .fifo-toolbar input[type="date"] {
  flex: 0 1 142px;
  width: 142px;
  min-width: 128px;
}

.inventory-ui .asof-bar > .muted {
  flex: 0 0 auto;
  white-space: nowrap;
}

.inventory-ui .asof-bar form.asof-form {
  display: inline-flex;
  flex: 0 0 auto;
  width: auto;
}

.inventory-ui .asof-bar .right-tail {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}

.inventory-ui .asof-bar .btn-chip,
.inventory-ui .asof-bar .pdf-export-btn,
.inventory-ui .download-row .btn-chip,
.inventory-ui .inventory-control-actions .btn-chip,
.inventory-ui .sku-toolbar .btn-chip,
.inventory-ui .batch-toolbar .btn-chip,
.inventory-ui .fifo-controls .btn-chip,
.inventory-ui .fifo-toolbar .btn-chip {
  width: auto;
  min-width: 0;
  min-height: 34px;
  padding: 7px 12px;
}

.inventory-ui .btn-chip.is-on,
.inventory-ui .btn-chip.btn-chip-on {
  background: var(--ops-red-live);
  border-color: var(--ops-red-live);
  color: #fff;
}

@media (max-width: 760px) {
  .inventory-ui .card.compact.page-section {
    padding: 12px;
  }

  .inventory-ui .inventory-control-row {
    align-items: flex-start;
    overflow-x: hidden;
    width: 100%;
  }

  .inventory-ui .inventory-control-row > .asof-form,
  .inventory-ui .inventory-control-row > .inventory-control-actions {
    flex: 1 1 100%;
    min-width: 0;
  }

  .inventory-ui .asof-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .inventory-ui .inventory-control-actions,
  .inventory-ui .download-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .inventory-ui .asof-bar::-webkit-scrollbar,
  .inventory-ui .inventory-control-actions::-webkit-scrollbar,
  .inventory-ui .download-row::-webkit-scrollbar {
    display: none;
  }

  .inventory-ui .asof-bar,
  .inventory-ui .inventory-control-actions,
  .inventory-ui .download-row {
    scrollbar-width: none;
  }

  .inventory-ui .asof-bar .right-tail {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    max-width: none;
    overflow: visible;
    padding-bottom: 0;
  }

  .inventory-ui .asof-bar .right-tail .muted {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .inventory-ui .download-row .label {
    position: sticky;
    left: 0;
    z-index: 1;
    padding-right: 4px;
    background: var(--paper);
  }

  .inventory-ui .download-row:not(.grn-range-form) {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 0;
  }

  .inventory-ui .download-row:not(.grn-range-form) .label {
    position: static;
    flex: 0 0 100%;
    padding-right: 0;
    background: transparent;
  }

  .inventory-ui .download-row:not(.grn-range-form) .btn-chip {
    flex: 1 1 calc(50% - 6px);
    min-width: 126px;
    white-space: normal;
  }

  .inventory-ui .inventory-control-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .inventory-ui .asof-form,
  .inventory-ui .sku-asof-form,
  .inventory-ui .batch-asof-form,
  .inventory-ui .grn-range-form,
  .inventory-ui .fifo-toolbar form {
    width: auto;
    grid-template-columns: none;
  }

  .inventory-ui .asof-bar form.asof-form {
    flex: 0 0 auto;
    width: auto;
  }

  .inventory-ui .asof-bar .btn-chip,
  .inventory-ui .asof-bar .pdf-export-btn,
  .inventory-ui .download-row .btn-chip,
  .inventory-ui .inventory-control-actions .btn-chip,
  .inventory-ui .sku-toolbar .btn-chip,
  .inventory-ui .batch-toolbar .btn-chip,
  .inventory-ui .fifo-controls .btn-chip,
  .inventory-ui .fifo-toolbar .btn-chip,
  .inventory-ui .asof-form button,
  .inventory-ui .sku-asof-form button,
  .inventory-ui .batch-asof-form button,
  .inventory-ui .grn-range-form button,
  .inventory-ui .fifo-toolbar button {
    flex: 0 0 auto;
    width: auto;
    justify-content: center;
  }

  .inventory-ui .asof-form input[type="date"],
  .inventory-ui .sku-asof-form input[type="date"],
  .inventory-ui .batch-asof-form input[type="date"],
  .inventory-ui .grn-range-form input[type="date"],
  .inventory-ui .fifo-toolbar input[type="date"] {
    flex: 0 0 138px;
    width: 138px;
  }

  .inventory-ui .download-row.grn-range-form {
    flex-wrap: wrap;
    overflow-x: visible;
    overflow-y: visible;
    padding-bottom: 0;
  }

  .inventory-ui .download-row.grn-range-form .label {
    position: static;
    flex: 0 0 100%;
    background: transparent;
    padding-right: 0;
  }

  .inventory-ui .download-row.grn-range-form input[type="date"] {
    flex: 1 1 118px;
    width: auto;
    min-width: 112px;
    max-width: 132px;
  }
}


/* ====== Utility scale classes generated for CSP-safe data-driven bars ====== */
.u-width-pct-0 { width: 0%; }
.u-width-pct-1 { width: 1%; }
.u-width-pct-2 { width: 2%; }
.u-width-pct-3 { width: 3%; }
.u-width-pct-4 { width: 4%; }
.u-width-pct-5 { width: 5%; }
.u-width-pct-6 { width: 6%; }
.u-width-pct-7 { width: 7%; }
.u-width-pct-8 { width: 8%; }
.u-width-pct-9 { width: 9%; }
.u-width-pct-10 { width: 10%; }
.u-width-pct-11 { width: 11%; }
.u-width-pct-12 { width: 12%; }
.u-width-pct-13 { width: 13%; }
.u-width-pct-14 { width: 14%; }
.u-width-pct-15 { width: 15%; }
.u-width-pct-16 { width: 16%; }
.u-width-pct-17 { width: 17%; }
.u-width-pct-18 { width: 18%; }
.u-width-pct-19 { width: 19%; }
.u-width-pct-20 { width: 20%; }
.u-width-pct-21 { width: 21%; }
.u-width-pct-22 { width: 22%; }
.u-width-pct-23 { width: 23%; }
.u-width-pct-24 { width: 24%; }
.u-width-pct-25 { width: 25%; }
.u-width-pct-26 { width: 26%; }
.u-width-pct-27 { width: 27%; }
.u-width-pct-28 { width: 28%; }
.u-width-pct-29 { width: 29%; }
.u-width-pct-30 { width: 30%; }
.u-width-pct-31 { width: 31%; }
.u-width-pct-32 { width: 32%; }
.u-width-pct-33 { width: 33%; }
.u-width-pct-34 { width: 34%; }
.u-width-pct-35 { width: 35%; }
.u-width-pct-36 { width: 36%; }
.u-width-pct-37 { width: 37%; }
.u-width-pct-38 { width: 38%; }
.u-width-pct-39 { width: 39%; }
.u-width-pct-40 { width: 40%; }
.u-width-pct-41 { width: 41%; }
.u-width-pct-42 { width: 42%; }
.u-width-pct-43 { width: 43%; }
.u-width-pct-44 { width: 44%; }
.u-width-pct-45 { width: 45%; }
.u-width-pct-46 { width: 46%; }
.u-width-pct-47 { width: 47%; }
.u-width-pct-48 { width: 48%; }
.u-width-pct-49 { width: 49%; }
.u-width-pct-50 { width: 50%; }
.u-width-pct-51 { width: 51%; }
.u-width-pct-52 { width: 52%; }
.u-width-pct-53 { width: 53%; }
.u-width-pct-54 { width: 54%; }
.u-width-pct-55 { width: 55%; }
.u-width-pct-56 { width: 56%; }
.u-width-pct-57 { width: 57%; }
.u-width-pct-58 { width: 58%; }
.u-width-pct-59 { width: 59%; }
.u-width-pct-60 { width: 60%; }
.u-width-pct-61 { width: 61%; }
.u-width-pct-62 { width: 62%; }
.u-width-pct-63 { width: 63%; }
.u-width-pct-64 { width: 64%; }
.u-width-pct-65 { width: 65%; }
.u-width-pct-66 { width: 66%; }
.u-width-pct-67 { width: 67%; }
.u-width-pct-68 { width: 68%; }
.u-width-pct-69 { width: 69%; }
.u-width-pct-70 { width: 70%; }
.u-width-pct-71 { width: 71%; }
.u-width-pct-72 { width: 72%; }
.u-width-pct-73 { width: 73%; }
.u-width-pct-74 { width: 74%; }
.u-width-pct-75 { width: 75%; }
.u-width-pct-76 { width: 76%; }
.u-width-pct-77 { width: 77%; }
.u-width-pct-78 { width: 78%; }
.u-width-pct-79 { width: 79%; }
.u-width-pct-80 { width: 80%; }
.u-width-pct-81 { width: 81%; }
.u-width-pct-82 { width: 82%; }
.u-width-pct-83 { width: 83%; }
.u-width-pct-84 { width: 84%; }
.u-width-pct-85 { width: 85%; }
.u-width-pct-86 { width: 86%; }
.u-width-pct-87 { width: 87%; }
.u-width-pct-88 { width: 88%; }
.u-width-pct-89 { width: 89%; }
.u-width-pct-90 { width: 90%; }
.u-width-pct-91 { width: 91%; }
.u-width-pct-92 { width: 92%; }
.u-width-pct-93 { width: 93%; }
.u-width-pct-94 { width: 94%; }
.u-width-pct-95 { width: 95%; }
.u-width-pct-96 { width: 96%; }
.u-width-pct-97 { width: 97%; }
.u-width-pct-98 { width: 98%; }
.u-width-pct-99 { width: 99%; }
.u-width-pct-100 { width: 100%; }
.u-height-px-0 { height: 0px; }
.u-height-px-1 { height: 1px; }
.u-height-px-2 { height: 2px; }
.u-height-px-3 { height: 3px; }
.u-height-px-4 { height: 4px; }
.u-height-px-5 { height: 5px; }
.u-height-px-6 { height: 6px; }
.u-height-px-7 { height: 7px; }
.u-height-px-8 { height: 8px; }
.u-height-px-9 { height: 9px; }
.u-height-px-10 { height: 10px; }
.u-height-px-11 { height: 11px; }
.u-height-px-12 { height: 12px; }
.u-height-px-13 { height: 13px; }
.u-height-px-14 { height: 14px; }
.u-height-px-15 { height: 15px; }
.u-height-px-16 { height: 16px; }
.u-height-px-17 { height: 17px; }
.u-height-px-18 { height: 18px; }
.u-height-px-19 { height: 19px; }
.u-height-px-20 { height: 20px; }
.u-height-px-21 { height: 21px; }
.u-height-px-22 { height: 22px; }
.u-height-px-23 { height: 23px; }
.u-height-px-24 { height: 24px; }
.u-height-px-25 { height: 25px; }
.u-height-px-26 { height: 26px; }
.u-height-px-27 { height: 27px; }
.u-height-px-28 { height: 28px; }
.u-height-px-29 { height: 29px; }
.u-height-px-30 { height: 30px; }
.u-height-px-31 { height: 31px; }
.u-height-px-32 { height: 32px; }
.u-height-px-33 { height: 33px; }
.u-height-px-34 { height: 34px; }
.u-height-px-35 { height: 35px; }
.u-height-px-36 { height: 36px; }
.u-height-px-37 { height: 37px; }
.u-height-px-38 { height: 38px; }
.u-height-px-39 { height: 39px; }
.u-height-px-40 { height: 40px; }
.u-height-px-41 { height: 41px; }
.u-height-px-42 { height: 42px; }
.u-height-px-43 { height: 43px; }
.u-height-px-44 { height: 44px; }
.u-height-px-45 { height: 45px; }
.u-height-px-46 { height: 46px; }
.u-height-px-47 { height: 47px; }
.u-height-px-48 { height: 48px; }
.u-height-px-49 { height: 49px; }
.u-height-px-50 { height: 50px; }
.u-height-px-51 { height: 51px; }
.u-height-px-52 { height: 52px; }
.u-height-px-53 { height: 53px; }
.u-height-px-54 { height: 54px; }
.u-height-px-55 { height: 55px; }
.u-height-px-56 { height: 56px; }
.u-height-px-57 { height: 57px; }
.u-height-px-58 { height: 58px; }
.u-height-px-59 { height: 59px; }
.u-height-px-60 { height: 60px; }
.u-height-px-61 { height: 61px; }
.u-height-px-62 { height: 62px; }
.u-height-px-63 { height: 63px; }
.u-height-px-64 { height: 64px; }
.u-height-px-65 { height: 65px; }
.u-height-px-66 { height: 66px; }
.u-height-px-67 { height: 67px; }
.u-height-px-68 { height: 68px; }
.u-height-px-69 { height: 69px; }
.u-height-px-70 { height: 70px; }
.u-height-px-71 { height: 71px; }
.u-height-px-72 { height: 72px; }
.u-height-px-73 { height: 73px; }
.u-height-px-74 { height: 74px; }
.u-height-px-75 { height: 75px; }
.u-height-px-76 { height: 76px; }
.u-height-px-77 { height: 77px; }
.u-height-px-78 { height: 78px; }
.u-height-px-79 { height: 79px; }
.u-height-px-80 { height: 80px; }
.u-height-px-81 { height: 81px; }
.u-height-px-82 { height: 82px; }
.u-height-px-83 { height: 83px; }
.u-height-px-84 { height: 84px; }
.u-height-px-85 { height: 85px; }
.u-height-px-86 { height: 86px; }
.u-height-px-87 { height: 87px; }
.u-height-px-88 { height: 88px; }
.u-height-px-89 { height: 89px; }
.u-height-px-90 { height: 90px; }
.u-height-px-91 { height: 91px; }
.u-height-px-92 { height: 92px; }
.u-height-px-93 { height: 93px; }
.u-height-px-94 { height: 94px; }
.u-height-px-95 { height: 95px; }
.u-height-px-96 { height: 96px; }
.u-height-px-97 { height: 97px; }
.u-height-px-98 { height: 98px; }
.u-height-px-99 { height: 99px; }
.u-height-px-100 { height: 100px; }
.u-height-px-101 { height: 101px; }
.u-height-px-102 { height: 102px; }
.u-height-px-103 { height: 103px; }
.u-height-px-104 { height: 104px; }
.u-height-px-105 { height: 105px; }
.u-height-px-106 { height: 106px; }
.u-height-px-107 { height: 107px; }
.u-height-px-108 { height: 108px; }
.u-height-px-109 { height: 109px; }
.u-height-px-110 { height: 110px; }
.u-height-px-111 { height: 111px; }
.u-height-px-112 { height: 112px; }
.u-height-px-113 { height: 113px; }
.u-height-px-114 { height: 114px; }
.u-height-px-115 { height: 115px; }
.u-height-px-116 { height: 116px; }
.u-height-px-117 { height: 117px; }
.u-height-px-118 { height: 118px; }
.u-height-px-119 { height: 119px; }
.u-height-px-120 { height: 120px; }
.u-height-px-121 { height: 121px; }
.u-height-px-122 { height: 122px; }
.u-height-px-123 { height: 123px; }
.u-height-px-124 { height: 124px; }
.u-height-px-125 { height: 125px; }
.u-height-px-126 { height: 126px; }
.u-height-px-127 { height: 127px; }
.u-height-px-128 { height: 128px; }
.u-height-px-129 { height: 129px; }
.u-height-px-130 { height: 130px; }
.u-height-px-131 { height: 131px; }
.u-height-px-132 { height: 132px; }
.u-height-px-133 { height: 133px; }
.u-height-px-134 { height: 134px; }
.u-height-px-135 { height: 135px; }
.u-height-px-136 { height: 136px; }
.u-height-px-137 { height: 137px; }
.u-height-px-138 { height: 138px; }
.u-height-px-139 { height: 139px; }
.u-height-px-140 { height: 140px; }
.u-height-px-141 { height: 141px; }
.u-height-px-142 { height: 142px; }
.u-height-px-143 { height: 143px; }
.u-height-px-144 { height: 144px; }
.u-height-px-145 { height: 145px; }
.u-height-px-146 { height: 146px; }
.u-height-px-147 { height: 147px; }
.u-height-px-148 { height: 148px; }
.u-height-px-149 { height: 149px; }
.u-height-px-150 { height: 150px; }
.u-height-px-151 { height: 151px; }
.u-height-px-152 { height: 152px; }
.u-height-px-153 { height: 153px; }
.u-height-px-154 { height: 154px; }
.u-height-px-155 { height: 155px; }
.u-height-px-156 { height: 156px; }
.u-height-px-157 { height: 157px; }
.u-height-px-158 { height: 158px; }
.u-height-px-159 { height: 159px; }
.u-height-px-160 { height: 160px; }
.u-height-px-161 { height: 161px; }
.u-height-px-162 { height: 162px; }
.u-height-px-163 { height: 163px; }
.u-height-px-164 { height: 164px; }
.u-height-px-165 { height: 165px; }
.u-height-px-166 { height: 166px; }
.u-height-px-167 { height: 167px; }
.u-height-px-168 { height: 168px; }
.u-height-px-169 { height: 169px; }
.u-height-px-170 { height: 170px; }
.u-height-px-171 { height: 171px; }
.u-height-px-172 { height: 172px; }
.u-height-px-173 { height: 173px; }
.u-height-px-174 { height: 174px; }
.u-height-px-175 { height: 175px; }
.u-height-px-176 { height: 176px; }
.u-height-px-177 { height: 177px; }
.u-height-px-178 { height: 178px; }
.u-height-px-179 { height: 179px; }
.u-height-px-180 { height: 180px; }
.u-height-px-181 { height: 181px; }
.u-height-px-182 { height: 182px; }
.u-height-px-183 { height: 183px; }
.u-height-px-184 { height: 184px; }
.u-height-px-185 { height: 185px; }
.u-height-px-186 { height: 186px; }
.u-height-px-187 { height: 187px; }
.u-height-px-188 { height: 188px; }
.u-height-px-189 { height: 189px; }
.u-height-px-190 { height: 190px; }
.u-height-px-191 { height: 191px; }
.u-height-px-192 { height: 192px; }
.u-height-px-193 { height: 193px; }
.u-height-px-194 { height: 194px; }
.u-height-px-195 { height: 195px; }
.u-height-px-196 { height: 196px; }
.u-height-px-197 { height: 197px; }
.u-height-px-198 { height: 198px; }
.u-height-px-199 { height: 199px; }
.u-height-px-200 { height: 200px; }
.u-height-px-201 { height: 201px; }
.u-height-px-202 { height: 202px; }
.u-height-px-203 { height: 203px; }
.u-height-px-204 { height: 204px; }
.u-height-px-205 { height: 205px; }
.u-height-px-206 { height: 206px; }
.u-height-px-207 { height: 207px; }
.u-height-px-208 { height: 208px; }
.u-height-px-209 { height: 209px; }
.u-height-px-210 { height: 210px; }
.u-height-px-211 { height: 211px; }
.u-height-px-212 { height: 212px; }
.u-height-px-213 { height: 213px; }
.u-height-px-214 { height: 214px; }
.u-height-px-215 { height: 215px; }
.u-height-px-216 { height: 216px; }
.u-height-px-217 { height: 217px; }
.u-height-px-218 { height: 218px; }
.u-height-px-219 { height: 219px; }
.u-height-px-220 { height: 220px; }
.u-height-px-221 { height: 221px; }
.u-height-px-222 { height: 222px; }
.u-height-px-223 { height: 223px; }
.u-height-px-224 { height: 224px; }
.u-height-px-225 { height: 225px; }
.u-height-px-226 { height: 226px; }
.u-height-px-227 { height: 227px; }
.u-height-px-228 { height: 228px; }
.u-height-px-229 { height: 229px; }
.u-height-px-230 { height: 230px; }
.u-height-px-231 { height: 231px; }
.u-height-px-232 { height: 232px; }
.u-height-px-233 { height: 233px; }
.u-height-px-234 { height: 234px; }
.u-height-px-235 { height: 235px; }
.u-height-px-236 { height: 236px; }
.u-height-px-237 { height: 237px; }
.u-height-px-238 { height: 238px; }
.u-height-px-239 { height: 239px; }
.u-height-px-240 { height: 240px; }
.u-height-px-241 { height: 241px; }
.u-height-px-242 { height: 242px; }
.u-height-px-243 { height: 243px; }
.u-height-px-244 { height: 244px; }
.u-height-px-245 { height: 245px; }
.u-height-px-246 { height: 246px; }
.u-height-px-247 { height: 247px; }
.u-height-px-248 { height: 248px; }
.u-height-px-249 { height: 249px; }
.u-height-px-250 { height: 250px; }
.u-height-px-251 { height: 251px; }
.u-height-px-252 { height: 252px; }
.u-height-px-253 { height: 253px; }
.u-height-px-254 { height: 254px; }
.u-height-px-255 { height: 255px; }
.u-height-px-256 { height: 256px; }
.u-height-px-257 { height: 257px; }
.u-height-px-258 { height: 258px; }
.u-height-px-259 { height: 259px; }
.u-height-px-260 { height: 260px; }
.u-height-px-261 { height: 261px; }
.u-height-px-262 { height: 262px; }
.u-height-px-263 { height: 263px; }
.u-height-px-264 { height: 264px; }
.u-height-px-265 { height: 265px; }
.u-height-px-266 { height: 266px; }
.u-height-px-267 { height: 267px; }
.u-height-px-268 { height: 268px; }
.u-height-px-269 { height: 269px; }
.u-height-px-270 { height: 270px; }
.u-height-px-271 { height: 271px; }
.u-height-px-272 { height: 272px; }
.u-height-px-273 { height: 273px; }
.u-height-px-274 { height: 274px; }
.u-height-px-275 { height: 275px; }
.u-height-px-276 { height: 276px; }
.u-height-px-277 { height: 277px; }
.u-height-px-278 { height: 278px; }
.u-height-px-279 { height: 279px; }
.u-height-px-280 { height: 280px; }
.u-height-px-281 { height: 281px; }
.u-height-px-282 { height: 282px; }
.u-height-px-283 { height: 283px; }
.u-height-px-284 { height: 284px; }
.u-height-px-285 { height: 285px; }
.u-height-px-286 { height: 286px; }
.u-height-px-287 { height: 287px; }
.u-height-px-288 { height: 288px; }
.u-height-px-289 { height: 289px; }
.u-height-px-290 { height: 290px; }
.u-height-px-291 { height: 291px; }
.u-height-px-292 { height: 292px; }
.u-height-px-293 { height: 293px; }
.u-height-px-294 { height: 294px; }
.u-height-px-295 { height: 295px; }
.u-height-px-296 { height: 296px; }
.u-height-px-297 { height: 297px; }
.u-height-px-298 { height: 298px; }
.u-height-px-299 { height: 299px; }
.u-height-px-300 { height: 300px; }
.u-height-px-301 { height: 301px; }
.u-height-px-302 { height: 302px; }
.u-height-px-303 { height: 303px; }
.u-height-px-304 { height: 304px; }
.u-height-px-305 { height: 305px; }
.u-height-px-306 { height: 306px; }
.u-height-px-307 { height: 307px; }
.u-height-px-308 { height: 308px; }
.u-height-px-309 { height: 309px; }
.u-height-px-310 { height: 310px; }
.u-height-px-311 { height: 311px; }
.u-height-px-312 { height: 312px; }
.u-height-px-313 { height: 313px; }
.u-height-px-314 { height: 314px; }
.u-height-px-315 { height: 315px; }
.u-height-px-316 { height: 316px; }
.u-height-px-317 { height: 317px; }
.u-height-px-318 { height: 318px; }
.u-height-px-319 { height: 319px; }
.u-height-px-320 { height: 320px; }
.u-height-px-321 { height: 321px; }
.u-height-px-322 { height: 322px; }
.u-height-px-323 { height: 323px; }
.u-height-px-324 { height: 324px; }
.u-height-px-325 { height: 325px; }
.u-height-px-326 { height: 326px; }
.u-height-px-327 { height: 327px; }
.u-height-px-328 { height: 328px; }
.u-height-px-329 { height: 329px; }
.u-height-px-330 { height: 330px; }
.u-height-px-331 { height: 331px; }
.u-height-px-332 { height: 332px; }
.u-height-px-333 { height: 333px; }
.u-height-px-334 { height: 334px; }
.u-height-px-335 { height: 335px; }
.u-height-px-336 { height: 336px; }
.u-height-px-337 { height: 337px; }
.u-height-px-338 { height: 338px; }
.u-height-px-339 { height: 339px; }
.u-height-px-340 { height: 340px; }
.u-height-px-341 { height: 341px; }
.u-height-px-342 { height: 342px; }
.u-height-px-343 { height: 343px; }
.u-height-px-344 { height: 344px; }
.u-height-px-345 { height: 345px; }
.u-height-px-346 { height: 346px; }
.u-height-px-347 { height: 347px; }
.u-height-px-348 { height: 348px; }
.u-height-px-349 { height: 349px; }
.u-height-px-350 { height: 350px; }
.u-height-px-351 { height: 351px; }
.u-height-px-352 { height: 352px; }
.u-height-px-353 { height: 353px; }
.u-height-px-354 { height: 354px; }
.u-height-px-355 { height: 355px; }
.u-height-px-356 { height: 356px; }
.u-height-px-357 { height: 357px; }
.u-height-px-358 { height: 358px; }
.u-height-px-359 { height: 359px; }
.u-height-px-360 { height: 360px; }
.u-height-px-361 { height: 361px; }
.u-height-px-362 { height: 362px; }
.u-height-px-363 { height: 363px; }
.u-height-px-364 { height: 364px; }
.u-height-px-365 { height: 365px; }
.u-height-px-366 { height: 366px; }
.u-height-px-367 { height: 367px; }
.u-height-px-368 { height: 368px; }
.u-height-px-369 { height: 369px; }
.u-height-px-370 { height: 370px; }
.u-height-px-371 { height: 371px; }
.u-height-px-372 { height: 372px; }
.u-height-px-373 { height: 373px; }
.u-height-px-374 { height: 374px; }
.u-height-px-375 { height: 375px; }
.u-height-px-376 { height: 376px; }
.u-height-px-377 { height: 377px; }
.u-height-px-378 { height: 378px; }
.u-height-px-379 { height: 379px; }
.u-height-px-380 { height: 380px; }
.u-height-px-381 { height: 381px; }
.u-height-px-382 { height: 382px; }
.u-height-px-383 { height: 383px; }
.u-height-px-384 { height: 384px; }
.u-height-px-385 { height: 385px; }
.u-height-px-386 { height: 386px; }
.u-height-px-387 { height: 387px; }
.u-height-px-388 { height: 388px; }
.u-height-px-389 { height: 389px; }
.u-height-px-390 { height: 390px; }
.u-height-px-391 { height: 391px; }
.u-height-px-392 { height: 392px; }
.u-height-px-393 { height: 393px; }
.u-height-px-394 { height: 394px; }
.u-height-px-395 { height: 395px; }
.u-height-px-396 { height: 396px; }
.u-height-px-397 { height: 397px; }
.u-height-px-398 { height: 398px; }
.u-height-px-399 { height: 399px; }
.u-height-px-400 { height: 400px; }
.u-height-px-401 { height: 401px; }
.u-height-px-402 { height: 402px; }
.u-height-px-403 { height: 403px; }
.u-height-px-404 { height: 404px; }
.u-height-px-405 { height: 405px; }
.u-height-px-406 { height: 406px; }
.u-height-px-407 { height: 407px; }
.u-height-px-408 { height: 408px; }
.u-height-px-409 { height: 409px; }
.u-height-px-410 { height: 410px; }
.u-height-px-411 { height: 411px; }
.u-height-px-412 { height: 412px; }
.u-height-px-413 { height: 413px; }
.u-height-px-414 { height: 414px; }
.u-height-px-415 { height: 415px; }
.u-height-px-416 { height: 416px; }
.u-height-px-417 { height: 417px; }
.u-height-px-418 { height: 418px; }
.u-height-px-419 { height: 419px; }
.u-height-px-420 { height: 420px; }
.u-height-px-421 { height: 421px; }
.u-height-px-422 { height: 422px; }
.u-height-px-423 { height: 423px; }
.u-height-px-424 { height: 424px; }
.u-height-px-425 { height: 425px; }
.u-height-px-426 { height: 426px; }
.u-height-px-427 { height: 427px; }
.u-height-px-428 { height: 428px; }
.u-height-px-429 { height: 429px; }
.u-height-px-430 { height: 430px; }
.u-height-px-431 { height: 431px; }
.u-height-px-432 { height: 432px; }
.u-height-px-433 { height: 433px; }
.u-height-px-434 { height: 434px; }
.u-height-px-435 { height: 435px; }
.u-height-px-436 { height: 436px; }
.u-height-px-437 { height: 437px; }
.u-height-px-438 { height: 438px; }
.u-height-px-439 { height: 439px; }
.u-height-px-440 { height: 440px; }
.u-height-px-441 { height: 441px; }
.u-height-px-442 { height: 442px; }
.u-height-px-443 { height: 443px; }
.u-height-px-444 { height: 444px; }
.u-height-px-445 { height: 445px; }
.u-height-px-446 { height: 446px; }
.u-height-px-447 { height: 447px; }
.u-height-px-448 { height: 448px; }
.u-height-px-449 { height: 449px; }
.u-height-px-450 { height: 450px; }
.u-height-px-451 { height: 451px; }
.u-height-px-452 { height: 452px; }
.u-height-px-453 { height: 453px; }
.u-height-px-454 { height: 454px; }
.u-height-px-455 { height: 455px; }
.u-height-px-456 { height: 456px; }
.u-height-px-457 { height: 457px; }
.u-height-px-458 { height: 458px; }
.u-height-px-459 { height: 459px; }
.u-height-px-460 { height: 460px; }
.u-height-px-461 { height: 461px; }
.u-height-px-462 { height: 462px; }
.u-height-px-463 { height: 463px; }
.u-height-px-464 { height: 464px; }
.u-height-px-465 { height: 465px; }
.u-height-px-466 { height: 466px; }
.u-height-px-467 { height: 467px; }
.u-height-px-468 { height: 468px; }
.u-height-px-469 { height: 469px; }
.u-height-px-470 { height: 470px; }
.u-height-px-471 { height: 471px; }
.u-height-px-472 { height: 472px; }
.u-height-px-473 { height: 473px; }
.u-height-px-474 { height: 474px; }
.u-height-px-475 { height: 475px; }
.u-height-px-476 { height: 476px; }
.u-height-px-477 { height: 477px; }
.u-height-px-478 { height: 478px; }
.u-height-px-479 { height: 479px; }
.u-height-px-480 { height: 480px; }
.u-height-px-481 { height: 481px; }
.u-height-px-482 { height: 482px; }
.u-height-px-483 { height: 483px; }
.u-height-px-484 { height: 484px; }
.u-height-px-485 { height: 485px; }
.u-height-px-486 { height: 486px; }
.u-height-px-487 { height: 487px; }
.u-height-px-488 { height: 488px; }
.u-height-px-489 { height: 489px; }
.u-height-px-490 { height: 490px; }
.u-height-px-491 { height: 491px; }
.u-height-px-492 { height: 492px; }
.u-height-px-493 { height: 493px; }
.u-height-px-494 { height: 494px; }
.u-height-px-495 { height: 495px; }
.u-height-px-496 { height: 496px; }
.u-height-px-497 { height: 497px; }
.u-height-px-498 { height: 498px; }
.u-height-px-499 { height: 499px; }
.u-height-px-500 { height: 500px; }
.u-height-px-501 { height: 501px; }
.u-height-px-502 { height: 502px; }
.u-height-px-503 { height: 503px; }
.u-height-px-504 { height: 504px; }
.u-height-px-505 { height: 505px; }
.u-height-px-506 { height: 506px; }
.u-height-px-507 { height: 507px; }
.u-height-px-508 { height: 508px; }
.u-height-px-509 { height: 509px; }
.u-height-px-510 { height: 510px; }
.u-height-px-511 { height: 511px; }
.u-height-px-512 { height: 512px; }
.u-height-px-513 { height: 513px; }
.u-height-px-514 { height: 514px; }
.u-height-px-515 { height: 515px; }
.u-height-px-516 { height: 516px; }
.u-height-px-517 { height: 517px; }
.u-height-px-518 { height: 518px; }
.u-height-px-519 { height: 519px; }
.u-height-px-520 { height: 520px; }
.u-height-px-521 { height: 521px; }
.u-height-px-522 { height: 522px; }
.u-height-px-523 { height: 523px; }
.u-height-px-524 { height: 524px; }
.u-height-px-525 { height: 525px; }
.u-height-px-526 { height: 526px; }
.u-height-px-527 { height: 527px; }
.u-height-px-528 { height: 528px; }
.u-height-px-529 { height: 529px; }
.u-height-px-530 { height: 530px; }
.u-height-px-531 { height: 531px; }
.u-height-px-532 { height: 532px; }
.u-height-px-533 { height: 533px; }
.u-height-px-534 { height: 534px; }
.u-height-px-535 { height: 535px; }
.u-height-px-536 { height: 536px; }
.u-height-px-537 { height: 537px; }
.u-height-px-538 { height: 538px; }
.u-height-px-539 { height: 539px; }
.u-height-px-540 { height: 540px; }
.u-height-px-541 { height: 541px; }
.u-height-px-542 { height: 542px; }
.u-height-px-543 { height: 543px; }
.u-height-px-544 { height: 544px; }
.u-height-px-545 { height: 545px; }
.u-height-px-546 { height: 546px; }
.u-height-px-547 { height: 547px; }
.u-height-px-548 { height: 548px; }
.u-height-px-549 { height: 549px; }
.u-height-px-550 { height: 550px; }
.u-height-px-551 { height: 551px; }
.u-height-px-552 { height: 552px; }
.u-height-px-553 { height: 553px; }
.u-height-px-554 { height: 554px; }
.u-height-px-555 { height: 555px; }
.u-height-px-556 { height: 556px; }
.u-height-px-557 { height: 557px; }
.u-height-px-558 { height: 558px; }
.u-height-px-559 { height: 559px; }
.u-height-px-560 { height: 560px; }
.u-height-px-561 { height: 561px; }
.u-height-px-562 { height: 562px; }
.u-height-px-563 { height: 563px; }
.u-height-px-564 { height: 564px; }
.u-height-px-565 { height: 565px; }
.u-height-px-566 { height: 566px; }
.u-height-px-567 { height: 567px; }
.u-height-px-568 { height: 568px; }
.u-height-px-569 { height: 569px; }
.u-height-px-570 { height: 570px; }
.u-height-px-571 { height: 571px; }
.u-height-px-572 { height: 572px; }
.u-height-px-573 { height: 573px; }
.u-height-px-574 { height: 574px; }
.u-height-px-575 { height: 575px; }
.u-height-px-576 { height: 576px; }
.u-height-px-577 { height: 577px; }
.u-height-px-578 { height: 578px; }
.u-height-px-579 { height: 579px; }
.u-height-px-580 { height: 580px; }
.u-height-px-581 { height: 581px; }
.u-height-px-582 { height: 582px; }
.u-height-px-583 { height: 583px; }
.u-height-px-584 { height: 584px; }
.u-height-px-585 { height: 585px; }
.u-height-px-586 { height: 586px; }
.u-height-px-587 { height: 587px; }
.u-height-px-588 { height: 588px; }
.u-height-px-589 { height: 589px; }
.u-height-px-590 { height: 590px; }
.u-height-px-591 { height: 591px; }
.u-height-px-592 { height: 592px; }
.u-height-px-593 { height: 593px; }
.u-height-px-594 { height: 594px; }
.u-height-px-595 { height: 595px; }
.u-height-px-596 { height: 596px; }
.u-height-px-597 { height: 597px; }
.u-height-px-598 { height: 598px; }
.u-height-px-599 { height: 599px; }
.u-height-px-600 { height: 600px; }
.u-color-good { color: var(--good); }
.u-color-warn { color: var(--warn); }
.u-color-bad { color: var(--bad); }
.u-color-info { color: #075985; }
.u-color-muted { color: var(--muted); }
.u-color-accent { color: var(--accent-hover); }
.u-color-blue { color: #528bff; }