/* ===========================================================================
   LB&S LTD — Modern SaaS Dashboard Design System
   ---------------------------------------------------------------------------
   Inspired by: Linear · Vercel · Stripe Dashboard
   Design language: refined neutrals, true-dark mode, subtle borders,
   minimal shadows, Inter typography with tight tracking on headings.
   =========================================================================== */

/* ===========================================================================
   1. Design Tokens
   =========================================================================== */
:root {
  /* Surfaces — light */
  --bg:           #FFFFFF;
  --surface:      #FFFFFF;
  --surface-2:    #FAFAFA;
  --surface-3:    #F4F4F5;
  --surface-hover:#F4F4F5;
  --overlay:      rgba(0, 0, 0, 0.5);

  /* Borders */
  --border:        #E4E4E7;
  --border-strong: #D4D4D8;
  --border-focus:  #2563EB;

  /* Text — darkened secondary/muted for stronger, more readable contrast */
  --text:    #09090B;
  --text-2:  #3F3F46;
  --text-3:  #52525B;
  --text-inv:#FFFFFF;

  /* Accents */
  --accent:        #2563EB;
  --accent-hover:  #1D4ED8;
  --accent-active: #1E40AF;
  --accent-soft:   #EFF6FF;
  --accent-soft-2: #DBEAFE;
  --accent-text:   #1D4ED8;
  --accent-ring:   rgba(37, 99, 235, 0.20);

  /* Semantic */
  --success:      #16A34A;
  --success-soft: #F0FDF4;
  --success-text: #15803D;
  --success-ring: rgba(22, 163, 74, 0.20);

  --warning:      #D97706;
  --warning-soft: #FFFBEB;
  --warning-text: #B45309;
  --warning-ring: rgba(217, 119, 6, 0.20);

  --danger:       #DC2626;
  --danger-soft:  #FEF2F2;
  --danger-text:  #B91C1C;
  --danger-ring:  rgba(220, 38, 38, 0.20);

  --info:         #0EA5E9;
  --info-soft:    #F0F9FF;
  --info-text:    #0369A1;
  --info-ring:    rgba(14, 165, 233, 0.20);

  --purple:       #7C3AED;
  --purple-soft:  #F5F3FF;
  --purple-text:  #6D28D9;

  --pink:         #DB2777;
  --pink-soft:    #FDF2F8;
  --pink-text:    #BE185D;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --text-2xs:  12px;
  --text-xs:   13px;
  --text-sm:   14px;
  --text-base: 15px;
  --text-md:   16px;
  --text-lg:   17px;
  --text-xl:   19px;
  --text-2xl:  22px;
  --text-3xl:  26px;
  --text-4xl:  32px;
  --text-5xl:  38px;
  --text-6xl:  50px;

  --weight-regular: 400;
  --weight-med:     500;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Spacing (4px base) */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-9:  36px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* Radius */
  --r-xs:  2px;
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  8px;
  --r-xl:  10px;
  --r-2xl: 14px;
  --r-3xl: 18px;
  --r-full: 9999px;

  /* Shadows — refined, mostly border-based */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 1px rgba(0, 0, 0, 0.03);
  --shadow:    0 2px 4px -1px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.10), 0 8px 8px -4px rgba(0, 0, 0, 0.04);

  /* Transitions */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-norm: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 240ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index */
  --z-base:     0;
  --z-elevated: 10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
  --z-tooltip:  500;

  /* Layout */
  --sidebar-w:           260px;
  --sidebar-w-collapsed: 64px;
  --header-h:            56px;
  /* none = let .page-content fill the available width inside .app-main.
     Previously capped at 1600px which left visible gutters on 1920+ monitors
     and squeezed the wide tables (Browse Catalogue, Order builder, KPI cards
     on list pages). The sidebar already takes the left ~260px so there's no
     "ultra-wide line length" problem on text-heavy pages either. */
  --max-content-w:       none;

  /* Component-friendly aliases for legacy class names */
  --color-bg:         var(--bg);
  --color-surface:    var(--surface);
  --color-surface-2:  var(--surface-2);
  --color-surface-3:  var(--surface-3);
  --color-border:     var(--border);
  --color-border-strong: var(--border-strong);
  --color-text:       var(--text);
  --color-text-2:     var(--text-2);
  --color-text-3:     var(--text-3);
  /* Aliases — these were used 130+ times across pages but never defined, so
     "muted/subtle" text fell back to full-contrast (no hierarchy) and
     --color-card/-bg-2 backgrounds went transparent. Defining them here (once,
     referencing theme-adapted base tokens) repairs hierarchy + dark mode app-wide. */
  --color-text-muted:  var(--text-3);
  --color-text-subtle: var(--text-2);
  --color-text-secondary: var(--text-2); /* 26 uses (cash/automation/recurring) — was undefined → text rendered full-contrast */
  --surface-1:         var(--surface);   /* 4 uses — was undefined → #fff fallback = white tiles in dark mode */
  --color-bg-2:        var(--surface-2);
  --color-card:        var(--surface);
  --color-accent:     var(--accent);
  --color-brand:      var(--accent);
  --color-primary:    var(--accent);
  --color-success:    var(--success);
  --color-warning:    var(--warning);
  --color-error:      var(--danger);
  --color-danger:     var(--danger);
  --color-info:       var(--info);
}

/* ===========================================================================
   2. Dark mode — true dark, not just inverted
   =========================================================================== */
[data-theme="dark"] {
  --bg:           #09090B;
  --surface:      #0F0F11;
  --surface-2:    #18181B;
  --surface-3:    #1F1F23;
  --surface-hover:#1F1F23;
  --overlay:      rgba(0, 0, 0, 0.7);

  --border:        #27272A;
  --border-strong: #3F3F46;

  --text:    #FAFAFA;
  --text-2:  #C9CAD1;
  --text-3:  #9CA3AF;
  --text-inv:#09090B;

  --accent:        #3B82F6;
  --accent-hover:  #60A5FA;
  --accent-active: #2563EB;
  --accent-soft:   rgba(59, 130, 246, 0.10);
  --accent-soft-2: rgba(59, 130, 246, 0.16);
  --accent-text:   #93C5FD;
  --accent-ring:   rgba(59, 130, 246, 0.30);

  --success:      #22C55E;
  --success-soft: rgba(34, 197, 94, 0.10);
  --success-text: #86EFAC;
  --success-ring: rgba(34, 197, 94, 0.30);

  --warning:      #F59E0B;
  --warning-soft: rgba(245, 158, 11, 0.10);
  --warning-text: #FCD34D;
  --warning-ring: rgba(245, 158, 11, 0.30);

  --danger:       #EF4444;
  --danger-soft:  rgba(239, 68, 68, 0.10);
  --danger-text:  #FCA5A5;
  --danger-ring:  rgba(239, 68, 68, 0.30);

  --info:         #38BDF8;
  --info-soft:    rgba(56, 189, 248, 0.10);
  --info-text:    #7DD3FC;
  --info-ring:    rgba(56, 189, 248, 0.30);

  --purple:       #A78BFA;
  --purple-soft:  rgba(167, 139, 250, 0.10);
  --purple-text:  #C4B5FD;

  --pink:         #F472B6;
  --pink-soft:    rgba(244, 114, 182, 0.10);
  --pink-text:    #F9A8D4;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow:    0 2px 4px -1px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.6), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.7), 0 8px 8px -4px rgba(0, 0, 0, 0.4);
}

/* ===========================================================================
   3. Reset & Base
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-size-adjust: 100%;
  background: var(--bg);
  color: var(--text);
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--weight-semi);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
  color: var(--text);
}
h1 { font-size: var(--text-4xl); letter-spacing: -0.025em; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }

p { margin: 0; }
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--accent-hover); }

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

::selection { background: var(--accent-soft); color: var(--accent-text); }

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--r-full);
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* Focus */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   4. App Layout — Sidebar + Header + Content
   =========================================================================== */
.app-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  background: var(--bg);
  transition: grid-template-columns var(--t-norm);
}

.app-layout:has(.sidebar.collapsed) {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

.app-shell {
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  min-width: 0;
  min-height: 100vh;
}

.app-main {
  /* Tighter content gutter (was sp-4/sp-5 = 16/20) so pages use more of the
     viewport. The 6 pages that cancel this with negative margins are updated
     to -12px -16px to stay aligned (see page-builder-playbook rule 9). */
  padding: var(--sp-3) var(--sp-4);
  min-width: 0;
  background: var(--surface-2);
}

.page-content {
  max-width: var(--max-content-w);
  margin: 0 auto;
}

/* ===========================================================================
   5. Sidebar
   =========================================================================== */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow: hidden;
  z-index: var(--z-sticky);
  transition: width var(--t-norm);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
  height: var(--header-h);
  flex-shrink: 0;
}

.sidebar-logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-sm);
}

.sidebar-brand-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  letter-spacing: -0.01em;
  color: var(--text);
}

.sidebar-brand-sub {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 1px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-section-hdr {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: var(--sp-3) var(--sp-3) 4px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 6px var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  text-align: left;
  width: 100%;
  border: none;
  background: transparent;
  text-decoration: none;
  position: relative;
}

.nav-item:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.nav-item.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--weight-semi);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}

.nav-item.active .nav-icon { opacity: 1; }

.nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 var(--sp-1);
  border-radius: var(--r-full);
  background: var(--accent);
  color: white;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.nav-badge:empty { display: none; }

.nav-chevron {
  width: 14px;
  height: 14px;
  margin-left: auto;
  transition: transform var(--t-fast);
  opacity: 0.6;
}

.nav-item[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

.nav-sub {
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-7);
  position: relative;
}

.nav-sub.open { display: flex; }

.nav-sub-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-2);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}

.nav-sub-item:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.nav-sub-item.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--weight-semi);
}

.nav-sub-badge {
  margin-left: auto;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  color: var(--text-3);
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: var(--r-full);
  min-width: 18px;
  text-align: center;
}
.nav-sub-badge:empty { display: none; }

.nav-sub-item.active .nav-sub-badge {
  background: var(--accent);
  color: white;
}

/* Visual separator between lifecycle items and order-related modules
   (Back-Orders, Delivery Runs, Offline Queue) in the Orders submenu. */
.nav-sub-sep {
  height: 1px;
  background: var(--border);
  margin: 6px var(--sp-3);
  opacity: .7;
}

/* Mini sub-heading inside a long dropdown (e.g. the Accounting group) so
   20 items read as a handful of labelled clusters instead of one wall. */
.nav-sub-head {
  font-size: 9.5px;
  font-weight: var(--weight-semi);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 9px var(--sp-3) 3px calc(var(--sp-3) + 24px);
  opacity: .85;
  user-select: none;
}
.nav-sub-head:first-child { padding-top: 4px; }
/* Keep collapsed-sidebar fly-outs clean — labels only matter when expanded. */
.sidebar.collapsed .nav-sub.is-flyout-open .nav-sub-head { display: none; }

/* Section-header icon — tiny glyph that anchors each section label. */
.nav-section-hdr .ico { color: var(--text-3); margin-right: 5px; opacity: .8; }

.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-2);
  flex-shrink: 0;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-2);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast);
}
.sidebar-user:hover { background: var(--surface-hover); }

.user-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  display: grid;
  place-items: center;
  font-weight: var(--weight-semi);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
}

.sidebar-user-info { min-width: 0; flex: 1; }
.sidebar-user-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-role {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 1px;
  text-transform: capitalize;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: calc(var(--z-sticky) - 1);
  backdrop-filter: blur(2px);
}

/* Collapsed sidebar */
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-chevron,
.sidebar.collapsed .nav-section-hdr,
.sidebar.collapsed .sidebar-brand-name,
.sidebar.collapsed .sidebar-brand-sub,
.sidebar.collapsed .sidebar-user-info,
.sidebar.collapsed .nav-sub { display: none; }
.sidebar.collapsed .nav-item,
.sidebar.collapsed .sidebar-user { justify-content: center; }
.sidebar.collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }

/* ──────────────────────────────────────────────────────────────────
   Collapsed-sidebar hover fly-out
   Hovering an icon-group toggle reveals a panel of sub-items beside
   it. position:fixed escapes the sidebar's overflow:hidden; the JS
   in setupCollapsedSidebarFlyouts() sets --flyout-top and adds the
   .is-flyout-open class. JS also re-positions after first paint to
   ensure the panel never overflows the viewport.
   ────────────────────────────────────────────────────────────────── */
.sidebar.collapsed .nav-sub.is-flyout-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: var(--sidebar-w-collapsed, 64px);
  top: var(--flyout-top, 200px);
  min-width: 220px;
  max-width: 280px;
  /* Cap at viewport - 16px so the panel can NEVER overflow */
  max-height: calc(100vh - 16px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  padding: 0;
  z-index: calc(var(--z-sticky) + 10);
  animation: flyout-fade-in 0.12s ease-out;
  overflow: hidden;          /* clip the rounded corners */
}
.sidebar.collapsed .nav-sub.is-flyout-open::before {
  /* Invisible bridge so cursor moving from icon → flyout keeps hover */
  content: '';
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 12px;
}
/* Sticky title row at top of panel — uses ::before of the FIRST .nav-sub-item
   instead of pseudo (which can't be sticky in a flex container reliably). */
.sidebar.collapsed .nav-sub.is-flyout-open[data-flyout-title]::after {
  content: attr(data-flyout-title);
  flex: 0 0 auto;
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 12px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  order: -1;
  position: sticky;
  top: 0;
  z-index: 2;
}
/* Inner scrollable region — wraps all .nav-sub-item links. Since they
   are flex-column siblings of ::after, we make them scroll as a group
   via a wrapper rule: any .nav-sub-item gets flex:0 0 auto and the
   container's overflow-y auto handles the rest. */
.sidebar.collapsed .nav-sub.is-flyout-open {
  overflow-y: auto;       /* the panel itself scrolls */
}
.sidebar.collapsed .nav-sub.is-flyout-open .nav-sub-item {
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 14px;
  border-radius: 4px;
  margin: 1px 6px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
}
.sidebar.collapsed .nav-sub.is-flyout-open .nav-sub-item:first-of-type { margin-top: 4px; }
.sidebar.collapsed .nav-sub.is-flyout-open .nav-sub-item:last-of-type  { margin-bottom: 6px; }
.sidebar.collapsed .nav-sub.is-flyout-open .nav-sub-item:hover {
  background: var(--surface-2);
}
.sidebar.collapsed .nav-sub.is-flyout-open .nav-sub-item.active {
  background: oklch(var(--accent-base, 60% 0.15 240) / 0.10);
  color: var(--accent, #3a7bd5);
  font-weight: 600;
}
/* Custom scrollbar — visible so users know they CAN scroll, but subtle. */
.sidebar.collapsed .nav-sub.is-flyout-open::-webkit-scrollbar {
  width: 8px;
}
.sidebar.collapsed .nav-sub.is-flyout-open::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.sidebar.collapsed .nav-sub.is-flyout-open::-webkit-scrollbar-thumb:hover {
  background: var(--text-3);
}
.sidebar.collapsed .nav-sub.is-flyout-open::-webkit-scrollbar-track {
  background: transparent;
}
@keyframes flyout-fade-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ===========================================================================
   6. Header
   =========================================================================== */
.app-header {
  position: sticky;
  top: 0;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px) saturate(180%);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-6);
  z-index: var(--z-sticky);
}

[data-theme="dark"] .app-header {
  background: rgba(9, 9, 11, 0.7);
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.sidebar-toggle-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  color: var(--text-2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.sidebar-toggle-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
}
.breadcrumb-item {
  color: var(--text-3);
  text-decoration: none;
  transition: color var(--t-fast);
}
.breadcrumb-item:hover { color: var(--text); }
.breadcrumb-sep {
  color: var(--text-3);
  font-size: 13px;
}
.breadcrumb-current {
  color: var(--text);
  font-weight: var(--weight-medium);
}

.header-search-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 var(--sp-3);
  height: 34px;
  color: var(--text-3);
  font-size: var(--text-sm);
  /* Grow to fill the empty middle of the topbar (capped + centred). */
  flex: 1 1 auto;
  min-width: 200px;
  max-width: 680px;
  margin: 0 var(--sp-5);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.header-search-btn:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}
.header-search-btn .search-label {
  flex: 1;
  text-align: left;
  font-family: var(--font-sans);
}
.header-kbd {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-3);
}

.header-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  color: var(--text-2);
  display: grid;
  place-items: center;
  position: relative;
  transition: background var(--t-fast), color var(--t-fast);
}
.header-icon-btn:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.notif-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--danger);
  border: 2px solid var(--bg);
  display: none;
}
.notif-dot.has-notif { display: block; }

[data-theme="light"] .theme-icon-dark { display: none; }
[data-theme="dark"]  .theme-icon-light { display: none; }

.header-user {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px var(--sp-2) 4px 4px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast);
}
.header-user:hover { background: var(--surface-hover); }
.header-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  display: grid;
  place-items: center;
  font-weight: var(--weight-semi);
  font-size: 12px;
}
.header-user-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

/* Phase E1 — active company switcher in topbar */
.header-company {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  max-width: 200px;
  color: var(--text);
}
.header-company:hover { background: var(--surface-hover); border-color: var(--accent); }
.header-company-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.header-company[data-mode="all"] {
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  border-color: color-mix(in oklch, var(--accent) 40%, var(--border));
}

/* ===========================================================================
   7. Page Header
   =========================================================================== */
.page-wrapper { display: flex; flex-direction: column; gap: var(--sp-4); }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-bottom: 0;
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

.page-subtitle {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 2px;
  font-weight: var(--weight-regular);
}

.page-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ===========================================================================
   8. Buttons
   =========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  height: 32px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: all var(--t-fast);
  text-decoration: none;
  background: transparent;
  color: var(--text);
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Primary */
.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: white;
}
.btn-primary:active {
  background: var(--accent-active);
}

/* Secondary */
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

/* Ghost — a light but clearly-bordered button (NOT a bare text link). Subtle
   surface fill + a real border so every "Export / Edit / Refresh"-style action
   reads as a button on white cards and page headers alike. */
.btn-ghost {
  background: var(--surface-2);
  color: var(--text-2);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:active {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

/* Danger */
.btn-danger {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}
.btn-danger:hover {
  background: var(--danger-text);
  border-color: var(--danger-text);
  color: white;
}

/* Warning — soft amber treatment so 'Hold order' reads as a caution
   without screaming like Cancel. Tinted bg + amber border + amber text. */
.btn-warning {
  background: var(--warning-soft, #FFFBEB);
  color: var(--warning-text, #B45309);
  border-color: color-mix(in oklch, var(--warning, #D97706) 40%, var(--border));
}
.btn-warning:hover {
  background: color-mix(in oklch, var(--warning, #D97706) 12%, var(--surface));
  border-color: var(--warning, #D97706);
  color: var(--warning-text, #B45309);
}
.btn-warning:focus-visible {
  outline: 2px solid var(--warning-ring, rgba(217, 119, 6, 0.20));
  outline-offset: 1px;
}

/* Sizes */
.btn-sm {
  height: 30px;
  padding: 0 var(--sp-3);
  font-size: var(--text-xs);
  border-radius: var(--r-md);
}
.btn-xs {
  height: 24px;
  padding: 0 var(--sp-2);
  font-size: var(--text-2xs);
  border-radius: var(--r-sm);
}
.btn-lg {
  height: 42px;
  padding: 0 var(--sp-5);
  font-size: var(--text-base);
}

.btn-icon {
  padding: 0;
  width: 32px;
  height: 32px;
}
.btn-icon.btn-sm { width: 30px; height: 30px; }
.btn-icon.btn-xs { width: 24px; height: 24px; }

.btn-link-inline {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  font-weight: var(--weight-medium);
  text-decoration: none;
  cursor: pointer;
  font-size: inherit;
}
.btn-link-inline:hover { color: var(--accent-hover); text-decoration: underline; }

.btn-group {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 2px;
  gap: 2px;
}
.btn-group .btn {
  height: 28px;
  padding: 0 var(--sp-3);
  font-size: var(--text-xs);
  border: none;
  background: transparent;
  color: var(--text-2);
  border-radius: var(--r-sm);
}
.btn-group .btn:hover { background: var(--surface-hover); color: var(--text); }
.btn-group .btn.active {
  background: var(--accent);
  color: white;
}

.justify-start { justify-content: flex-start; text-align: left; }
.gap-3 { gap: var(--sp-3); }

/* ===========================================================================
   9. Cards
   =========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-3);
}
.card-header:last-child { padding-bottom: 0; border: none; margin-bottom: 0; }

.card-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  letter-spacing: -0.01em;
  color: var(--text);
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.card-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* "Compact" card chip — used in lists */
.card-customer,
.card-open {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.card-customer:hover, .card-open:hover {
  border-color: var(--border-strong);
  background: var(--surface-2);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.card-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text);
}
.card-code, .card-num {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-family: var(--font-mono);
}
.card-meta {
  font-size: var(--text-xs);
  color: var(--text-3);
}
.card-status { margin-left: auto; }

/* ===========================================================================
   10. KPI Cards
   =========================================================================== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.kpi-card:hover {
  border-color: var(--border-strong);
}

.kpi-card--link { cursor: pointer; }
.kpi-card--link:hover {
  box-shadow: var(--shadow-sm);
}

.kpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: 0;
}

.kpi-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.kpi-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-2);
  flex-shrink: 0;
}
.kpi-icon svg { width: 14px; height: 14px; }

.kpi-card[data-accent="success"] .kpi-icon { background: var(--success-soft); color: var(--success); }
.kpi-card[data-accent="warning"] .kpi-icon { background: var(--warning-soft); color: var(--warning); }
.kpi-card[data-accent="danger"]  .kpi-icon { background: var(--danger-soft);  color: var(--danger); }
.kpi-card[data-accent="info"]    .kpi-icon { background: var(--info-soft);    color: var(--info); }
.kpi-card[data-accent="accent"]  .kpi-icon { background: var(--accent-soft);  color: var(--accent); }
.kpi-card[data-accent="purple"]  .kpi-icon { background: var(--purple-soft);  color: var(--purple); }

.kpi-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.025em;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kpi-sub {
  font-size: var(--text-2xs);
  color: var(--text-3);
  margin-top: 2px;
}

.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.kpi-trend.up   { color: var(--success-text); background: var(--success-soft); }
.kpi-trend.down { color: var(--danger-text);  background: var(--danger-soft); }
.kpi-trend.flat { color: var(--text-3);       background: var(--surface-3); }

.kpi-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  margin-top: auto;
  font-size: var(--text-xs);
  color: var(--text-3);
}

.kpi-link-hint {
  color: var(--accent);
  font-weight: var(--weight-medium);
}

.kpi-accent { color: var(--accent); }
.kpi-col { display: flex; flex-direction: column; gap: var(--sp-2); }
.kpi-hero { padding: var(--sp-6); }
.kpi-desc {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: var(--sp-1);
}

/* Top accent strip per KPI variant */
.kpi-card[data-stripe]::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.kpi-card[data-stripe="success"]::before { background: var(--success); }
.kpi-card[data-stripe="warning"]::before { background: var(--warning); }
.kpi-card[data-stripe="danger"]::before  { background: var(--danger); }
.kpi-card[data-stripe="info"]::before    { background: var(--info); }
.kpi-card[data-stripe="purple"]::before  { background: var(--purple); }

/* ===========================================================================
   11. Badges
   =========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  border-radius: var(--r-full);
  background: var(--surface-3);
  color: var(--text-2);
  border: 1px solid transparent;
  white-space: nowrap;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  line-height: 1.4;
}

.badge-neutral   { background: var(--surface-3);   color: var(--text-2); }
.badge-submitted { background: var(--info-soft);   color: var(--info-text); }
.badge-processing { background: var(--accent-soft); color: var(--accent-text); }
.badge-proforma  { background: var(--purple-soft); color: var(--purple-text); }
.badge-dispatched{ background: var(--warning-soft);color: var(--warning-text); }
.badge-hold      { background: var(--warning-soft);color: var(--warning-text); }
.badge-invoiced  { background: var(--accent-soft); color: var(--accent-text); }
.badge-completed { background: var(--success-soft);color: var(--success-text); }
.badge-paid      { background: var(--success-soft);color: var(--success-text); }
.badge-partially_paid { background: var(--info-soft); color: var(--info-text); }
.badge-delivered { background: var(--success-soft);color: var(--success-text); }
.badge-active    { background: var(--success-soft);color: var(--success-text); }
.badge-inactive  { background: var(--surface-3);   color: var(--text-3); }
.badge-cancelled { background: var(--danger-soft); color: var(--danger-text); }
.badge-pending   { background: var(--warning-soft);color: var(--warning-text); }
.badge-partial   { background: var(--info-soft);   color: var(--info-text); }
.badge-overdue   { background: var(--danger-soft); color: var(--danger-text); }
.badge-draft     { background: var(--surface-3);   color: var(--text-2); }
.badge-sent      { background: var(--info-soft);   color: var(--info-text); }
.badge-received  { background: var(--success-soft);color: var(--success-text); }
.badge-pending_credit_approval { background: var(--warning-soft); color: var(--warning-text); }
/* Semantic badge variants — used app-wide (invoices, AP 3-way-match, imports,
   admin-kill, etc.) but were never defined, so they rendered as plain grey.
   Mapped to the existing soft/text tokens for consistent colour. */
.badge-success { background: var(--success-soft); color: var(--success-text); }
.badge-warning { background: var(--warning-soft); color: var(--warning-text); }
.badge-info    { background: var(--info-soft);    color: var(--info-text); }
.badge-error,
.badge-danger  { background: var(--danger-soft);  color: var(--danger-text); }

/* ===========================================================================
   12. Alerts
   =========================================================================== */
.alert {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.alert-info {
  background: var(--info-soft);
  border-color: var(--info-ring);
  color: var(--info-text);
}
.alert-success {
  background: var(--success-soft);
  border-color: var(--success-ring);
  color: var(--success-text);
}
.alert-warning {
  background: var(--warning-soft);
  border-color: var(--warning-ring);
  color: var(--warning-text);
}
.alert-error,
.alert-danger {
  background: var(--danger-soft);
  border-color: var(--danger-ring);
  color: var(--danger-text);
}

/* ===========================================================================
   13. Forms
   =========================================================================== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.form-label,
.form-group > label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--text-2);
  letter-spacing: 0.01em;
}

.form-control,
.form-input,
input[type="text"]:not(.cmd-input),
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="url"],
textarea,
select {
  width: 100%;
  height: 32px;
  padding: 0 var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

textarea {
  height: auto;
  min-height: 80px;
  padding: var(--sp-2) var(--sp-3);
  line-height: var(--leading-normal);
  resize: vertical;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2371717A' stroke-width='2'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-2) center;
  background-size: 12px;
  padding-right: var(--sp-7);
}

.form-control::placeholder,
.form-input::placeholder,
input::placeholder,
textarea::placeholder { color: var(--text-3); }

.form-control:hover,
.form-input:hover,
input:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled) {
  border-color: var(--border-strong);
}

.form-control:focus,
.form-input:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}

.form-control:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  background: var(--surface-2);
  color: var(--text-3);
  cursor: not-allowed;
}

.form-control.is-invalid,
input.is-invalid { border-color: var(--danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-ring); }

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
}
.form-grid-2,
.form-grid-3,
.form-grid-4 { display: grid; gap: var(--sp-3); }
.form-grid-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid-3 { grid-template-columns: repeat(3, 1fr); }
.form-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .form-grid-2, .form-grid-3, .form-grid-4 { grid-template-columns: 1fr; }
}

.form-check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.form-submit { width: 100%; }

/* ===========================================================================
   14. Tables
   =========================================================================== */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}

.data-table thead {
  background: var(--surface-2);
}

.data-table th {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  color: var(--text-3);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
}

.data-table td {
  padding: 8px var(--sp-3);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
  font-size: var(--text-sm);
}

.data-table tbody tr:last-child td { border-bottom: none; }

/* Vertical grid lines — every cell gets a right border except the last in its
   row, turning the horizontal-only borders into a full grid. Applies to every
   .data-table across the app (list pages, detail tables, dashboard cards). The
   rightmost column stays borderless so the table edge reads clean. */
.data-table th:not(:last-child),
.data-table td:not(:last-child) {
  border-right: 1px solid var(--border);
}

/* Same vertical grid lines for the custom (non-.data-table) tables on detail
   pages — order/quote/back-order line items, product detail, delivery runs,
   documents, settings, etc. — so every table in the app reads as a full grid. */
.full-table th:not(:last-child),          .full-table td:not(:last-child),
.full-table-v2 th:not(:last-child),       .full-table-v2 td:not(:last-child),
.ucp-table th:not(:last-child),           .ucp-table td:not(:last-child),
.pd3-table th:not(:last-child),           .pd3-table td:not(:last-child),
.od-mini-table th:not(:last-child),       .od-mini-table td:not(:last-child),
.ov-mini-table th:not(:last-child),       .ov-mini-table td:not(:last-child),
.onv2-items-table th:not(:last-child),    .onv2-items-table td:not(:last-child),
.onv2-va-table th:not(:last-child),       .onv2-va-table td:not(:last-child),
.ocp-table th:not(:last-child),           .ocp-table td:not(:last-child),
.qnv2-items-table th:not(:last-child),    .qnv2-items-table td:not(:last-child),
.order-items-table th:not(:last-child),   .order-items-table td:not(:last-child),
.ins-top-table th:not(:last-child),       .ins-top-table td:not(:last-child),
.dr3rep-table th:not(:last-child),        .dr3rep-table td:not(:last-child),
.dr3-table th:not(:last-child),           .dr3-table td:not(:last-child),
.rp-stops-table th:not(:last-child),      .rp-stops-table td:not(:last-child),
.doc-table th:not(:last-child),           .doc-table td:not(:last-child),
.tgt-table th:not(:last-child),           .tgt-table td:not(:last-child),
.bf-table th:not(:last-child),            .bf-table td:not(:last-child),
.bo3-prod-cust-table th:not(:last-child), .bo3-prod-cust-table td:not(:last-child),
.bo3-items-mini th:not(:last-child),      .bo3-items-mini td:not(:last-child) {
  border-right: 1px solid var(--border);
}

.data-table tbody tr {
  transition: background var(--t-fast);
}

.data-table tbody tr:hover {
  background: var(--surface-2);
}

.row-clickable { cursor: pointer; }

.td-empty {
  text-align: center;
  padding: var(--sp-12) var(--sp-4) !important;
  color: var(--text-3);
  font-size: var(--text-sm);
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-bottom: none;
  flex-wrap: wrap;
}
.table-toolbar + .table-wrap { border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* Order/Customer profile overview grid */
.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3);
}

/* ===========================================================================
   Change Order Status modal
   =========================================================================== */
.status-change-current {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
  font-size: var(--text-sm);
}

.status-change-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-2);
}

.status-option-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  width: 100%;
}
.status-option-card:hover {
  border-color: var(--sc-accent, var(--accent));
  background: var(--surface-2);
}
.status-option-card:hover .soc-arrow {
  transform: translateX(2px);
  color: var(--sc-accent, var(--accent));
}

.soc-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  background: color-mix(in oklch, var(--sc-accent, var(--accent)) 12%, transparent);
  color: var(--sc-accent, var(--accent));
  flex-shrink: 0;
}

.soc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.soc-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text);
}

.soc-desc {
  font-size: var(--text-xs);
  color: var(--text-3);
  line-height: 1.3;
}

.soc-arrow {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform var(--t-fast), color var(--t-fast);
}

/* Wider modal for the status grid */
.modal.modal-wide,
body:has(.status-change-grid) .modal {
  width: min(720px, calc(100vw - 32px));
}

/* ===========================================================================
   Order Detail Page — Shopify-style document with workflow + 2-col body
   =========================================================================== */
.order-page {
  gap: var(--sp-3);
  width: 100%;
  /* Let the page bleed to the viewport edges for max table width */
  margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 0;
  padding: var(--sp-3) var(--sp-4);
}

/* ── Top bar: breadcrumb + title + status + CTAs ───────────────────────── */
.order-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.order-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.order-back-link {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-decoration: none;
  font-weight: var(--weight-medium);
  padding-right: var(--sp-2);
  border-right: 1px solid var(--border);
}
.order-back-link:hover { color: var(--text); }

.order-num {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0;
  line-height: 1;
}

.order-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  position: relative;
}

/* Sub-meta line (small grey row under topbar) */
.order-submeta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: -8px;
}
.order-submeta-dot { color: var(--border-strong); }
.order-submeta strong { color: var(--text-2); font-weight: var(--weight-semi); }

/* More-actions dropdown */
.order-more-menu { position: relative; }
.order-more-menu summary {
  list-style: none;
  cursor: pointer;
}
.order-more-menu summary::-webkit-details-marker { display: none; }
.order-more-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: var(--z-elevated);
  display: flex;
  flex-direction: column;
}
.order-more-item {
  padding: 6px var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text);
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast);
}
.order-more-item:hover { background: var(--surface-hover); }
/* Destructive menu item — reads red so it stands apart from the
   regular ghost-style items above. */
.order-more-item.order-more-danger { color: var(--color-error, #c0392b); }
.order-more-item.order-more-danger:hover {
  background: oklch(var(--err-base, 60% 0.18 25) / 0.10);
  color: var(--color-error, #c0392b);
}
.order-more-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
/* Inline trash button in cancelled order rows */
.ol-act-delete:hover {
  background: oklch(var(--err-base, 60% 0.18 25) / 0.12);
  color: var(--color-error, #c0392b);
}

/* Close the More menu when any modal is open — prevents it bleeding through */
body:has(.modal-backdrop.open) .order-more-menu[open] .order-more-panel,
body:has(.modal.open)         .order-more-menu[open] .order-more-panel {
  display: none;
}

/* ── Status workflow pipeline ─────────────────────────────────────────── */
.order-workflow {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.wf-step {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.wf-dot {
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
  flex-shrink: 0;
}
.wf-done .wf-dot {
  background: var(--success);
  border-color: var(--success);
  color: white;
}
.wf-current .wf-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.wf-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-3);
  white-space: nowrap;
}
.wf-done .wf-label,
.wf-current .wf-label {
  color: var(--text);
  font-weight: var(--weight-semi);
}

.wf-line {
  flex: 1;
  height: 1.5px;
  background: var(--border);
  min-width: var(--sp-2);
  margin: 0 var(--sp-1);
}
.wf-line-done { background: var(--success); }

/* Phase 5+ — full 8-stage pipeline polish */
.wf-icon {
  font-size: 14px;
  margin-right: 4px;
  display: inline-block;
}
.wf-label { display: flex; align-items: center; }

/* M1.6: Failed delivery branch (Option C). The Delivered step renders red
   instead of empty when delivery_status='failed' / 'partial', so the
   operator sees the breakage at a glance. Same slot as wf-done but a
   warning palette + alert-triangle icon. */
.wf-failed .wf-dot {
  background: var(--danger, oklch(60% 0.18 25));
  border-color: var(--danger, oklch(60% 0.18 25));
  color: white;
  box-shadow: 0 0 0 4px oklch(60% 0.18 25 / 0.18);
}
.wf-failed .wf-label {
  color: oklch(40% 0.18 25);
  font-weight: var(--weight-semi);
}
.wf-failed .wf-meta {
  color: oklch(45% 0.18 25);
  font-weight: var(--weight-medium);
}

/* Skipped step (e.g. Credit Approval that didn't apply) */
.wf-skipped .wf-dot {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-3);
  opacity: 0.6;
}
.wf-skipped .wf-label {
  color: var(--text-3);
  text-decoration: line-through;
  opacity: 0.7;
}

/* When pipeline has 8+ stages, tighten spacing + allow scroll */
.order-workflow {
  overflow-x: auto;
  scrollbar-width: thin;
}
.order-workflow .wf-label {
  font-size: var(--text-xs, 12px);
}

@media (max-width: 900px) {
  .wf-label .wf-icon { font-size: 14px; }
  .wf-label span:not(.wf-icon) { display: none; }
  /* On mobile, show only icons + numbers — saves horizontal space */
}

/* ── Body grid: main column + sidebar ─────────────────────────────────── */
.order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--sp-3);
  align-items: start;
}
@media (max-width: 1024px) {
  .order-grid { grid-template-columns: 1fr; }
}

.order-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

.order-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
/* Right sidebar cards: tighter padding so more rows are visible */
.order-side .order-side-card .order-side-head { padding: var(--sp-2) var(--sp-3) !important; }
.order-side .order-side-card > div:not(.order-side-head) { padding: var(--sp-2) var(--sp-3) !important; }
.order-side .order-side-meta { font-size: var(--text-xs); }
.order-side .order-side-meta > div { padding: 2px 0; }
.order-side .order-side-title { font-size: var(--text-sm); }

/* ── Section pattern (used for Items, Notes, Timeline) ────────────────── */
.order-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.order-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
}

.order-section-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.order-section-meta {
  font-size: var(--text-xs);
  color: var(--text-3);
}

/* ── Items table — proper aligned columns + bulk operations ────────── */
.order-items-tablewrap {
  overflow-x: auto;
}

.order-items-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}

.order-items-table thead th {
  background: var(--surface-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
.order-items-table thead th.oi-col-qty,
.order-items-table thead th.oi-col-price,
.order-items-table thead th.oi-col-vat,
.order-items-table thead th.oi-col-total { text-align: right; }

.order-items-table tbody td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.order-items-table tbody tr:last-child td { border-bottom: none; }

.oi-row { transition: background var(--t-fast); }
.oi-row:hover { background: var(--surface-2); }
.oi-row-saved {
  background: var(--success-soft);
  transition: background var(--t-slow);
}

/* Column widths */
.oi-col-check { width: 36px; }
.oi-col-num   { width: 28px; color: var(--text-3); font-size: var(--text-xs); text-align: center; }
.oi-col-img   { width: 56px; }
.oi-col-prod  { min-width: 220px; }
.oi-col-qty   { width: 90px;  text-align: right; }
.oi-col-price { width: 130px; text-align: right; }
.oi-col-vat   { width: 90px;  text-align: right; color: var(--text-2); }
.oi-col-total { width: 110px; text-align: right; }
.oi-col-menu  { width: 40px; }

.oi-select { cursor: pointer; }

.oi-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: block;
}
.oi-img-empty {}

.oi-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text);
  text-decoration: none;
  display: block;
  line-height: 1.3;
}
.oi-name:hover { color: var(--accent); }

.oi-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  flex-wrap: wrap;
}

.oi-input {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.oi-input:hover { border-color: var(--border-strong); }
.oi-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.oi-price-hint {
  font-size: 12px;
  margin-top: 2px;
  text-align: right;
  line-height: 1.2;
}

/* Inline "Update for Customer" link under each price input */
.oi-update-link {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: var(--weight-medium);
  color: var(--accent);
  text-decoration: none;
  text-align: right;
  line-height: 1.2;
}
.oi-update-link:hover { text-decoration: underline; }

/* ── Update for Customer popup (UCP) ─────────────────────────────── */
.modal.modal-wide-ucp {
  width: min(960px, calc(100vw - 24px));
  max-height: 92vh;
}
.modal.modal-wide-ucp .modal-body {
  padding: var(--sp-3) var(--sp-4);
}

.ucp-anchor-banner {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-soft-2) 100%);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-4);
  box-shadow: 0 1px 2px oklch(20% 0.02 240 / 0.04);
}
.ucp-anchor-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: var(--surface);
  border-radius: var(--r-full);
  box-shadow: 0 1px 3px oklch(20% 0.02 240 / 0.08);
}

.ucp-section {
  margin-bottom: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.ucp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.ucp-section-head h4 {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  margin: 0;
}
/* Inside-section table loses its outer border (already on section wrapper) */
.ucp-section .ucp-tablewrap {
  border: none;
  border-radius: 0;
  max-height: 280px;
}

.ucp-tablewrap {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.ucp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
.ucp-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface-2);
  z-index: 1;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.ucp-table thead th.ucp-c-default,
.ucp-table thead th.ucp-c-price,
.ucp-table thead th.ucp-c-diff { text-align: right; }

.ucp-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ucp-table tbody tr:last-child td { border-bottom: none; }
.ucp-table tbody tr { transition: background var(--t-fast); }
.ucp-table tbody tr:hover { background: var(--accent-soft); }
/* Highlight rows whose checkbox is ticked */
.ucp-table tbody tr:has(.ucp-select:checked) {
  background: var(--accent-soft);
}
.ucp-table tbody tr:has(.ucp-select:checked):hover {
  background: var(--accent-soft-2);
}

.ucp-c-check   { width: 32px; }
.ucp-c-img     { width: 44px; }
.ucp-c-prod    { min-width: 220px; }
.ucp-c-default { width: 80px;  text-align: right; color: var(--text-3); }
.ucp-c-price   { width: 130px; text-align: right; }
.ucp-c-diff    { width: 70px;  text-align: right; font-variant-numeric: tabular-nums; }

.ucp-img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: block;
}
.ucp-img-empty {}

.ucp-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}
.ucp-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}

/* Currency-input pattern: £ sits INSIDE the input as a non-interactive
   overlay so the whole thing looks like a single field. */
.ucp-price-wrap {
  position: relative;
  display: inline-block;
  width: 100px;
}
.ucp-price-prefix {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.ucp-price {
  width: 100%;
  height: 30px;
  padding: 0 8px 0 22px; /* leave room for the overlaid £ */
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
  outline: none;
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  box-sizing: border-box;
}
.ucp-price:hover { border-color: var(--border-strong); }
.ucp-price:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
/* Hide native number-input spinner arrows inside the modal */
.ucp-price::-webkit-outer-spin-button,
.ucp-price::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ucp-price[type="number"] { -moz-appearance: textfield; }

/* Modal filter search bar — flex container with bare input inside.
   This pattern avoids fighting the global `input[type="text"]` rule
   (which has higher specificity than a single class). */
.ucp-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: var(--sp-3);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ucp-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.ucp-search-icon {
  flex: 0 0 auto;
  color: var(--text-3);
}
/* Specificity chained class+element to beat the global form-input rule */
.ucp-search input.ucp-search-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text);
  box-shadow: none;
}
.ucp-search input.ucp-search-input::placeholder { color: var(--text-3); }
.ucp-search input.ucp-search-input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}
.ucp-search-clear {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--text-3);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
}
.ucp-search input.ucp-search-input:not(:placeholder-shown) ~ .ucp-search-clear { display: flex; }
.ucp-search-clear:hover { background: var(--surface-2); color: var(--text); }
/* Section header — show match count when filtered */
.ucp-section.is-empty-after-filter .ucp-tablewrap { display: none; }
.ucp-section-match-count {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-left: 6px;
}
.ucp-no-results {
  padding: 16px;
  text-align: center;
  color: var(--text-3);
  font-size: var(--text-sm);
}

.ucp-footer-summary {
  /* Stick to the bottom of the scrolling modal body so the user never
     has to scroll to find the bulk-apply controls / selection count. */
  position: sticky;
  bottom: calc(-1 * var(--sp-3)); /* counteract margin-top */
  z-index: 5;
  margin-top: var(--sp-3);
  padding: 10px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-2);
  border-radius: var(--r-md);
  /* Subtle shadow so it visually separates from the scrolling content
     beneath when sticky */
  box-shadow: 0 -4px 12px oklch(20% 0.02 240 / 0.06);
  font-size: var(--text-sm);
  color: var(--text);
  font-weight: var(--weight-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.ucp-footer-summary strong {
  color: var(--accent);
  font-size: var(--text-base);
}
.ucp-fs-count { flex: 0 0 auto; white-space: nowrap; }

/* Bulk-apply bar — appears in the footer when 1+ products are selected */
.ucp-fs-bulk {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1 1 auto;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.ucp-fs-bulk-label {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-semi);
  margin-right: 4px;
}
.ucp-bulk-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ucp-bulk-input-wrap {
  position: relative;
  display: inline-block;
  width: 80px;
}
.ucp-bulk-input {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  outline: none;
  font-family: var(--font-sans);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  box-sizing: border-box;
}
.ucp-bulk-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
/* Hide spinner arrows */
.ucp-bulk-input::-webkit-outer-spin-button,
.ucp-bulk-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ucp-bulk-input[type="number"] { -moz-appearance: textfield; }
.ucp-bulk-input-price { padding-left: 22px; }
.ucp-bulk-prefix {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: var(--text-sm);
  pointer-events: none;
}
.ucp-bulk-suffix {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  font-size: var(--text-sm);
  pointer-events: none;
}
.ucp-bulk-input-wrap:has(.ucp-bulk-suffix) .ucp-bulk-input { padding-right: 22px; }

/* Bulk action bar — sticky-ish header above the table */
.oi-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-soft-2);
  flex-wrap: wrap;
}
.oi-bulk-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--accent-text);
}
.oi-bulk-count strong { font-weight: var(--weight-semi); }
.oi-bulk-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  position: relative;
}

.oi-bulk-menu { position: relative; }
.oi-bulk-menu summary {
  list-style: none;
  cursor: pointer;
}
.oi-bulk-menu summary::-webkit-details-marker { display: none; }
.oi-bulk-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: var(--z-elevated);
  display: flex;
  flex-direction: column;
}
.oi-bulk-menu-section {
  padding: 8px 12px 4px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.oi-bulk-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text);
  font-size: var(--text-sm);
  transition: background var(--t-fast);
}
.oi-bulk-menu-item:hover { background: var(--accent-soft); }
body:has(.modal-backdrop.open) .oi-bulk-menu[open] .oi-bulk-menu-panel,
body:has(.modal.open)         .oi-bulk-menu[open] .oi-bulk-menu-panel {
  display: none;
}

/* Sidebar additions: negotiated prices list, docs grid */
.order-side-list {
  display: flex;
  flex-direction: column;
  padding: 4px var(--sp-2) var(--sp-2);
}
.order-side-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 6px var(--sp-2);
  border-radius: var(--r-sm);
}
.order-side-list-row:hover { background: var(--surface-2); }
.order-side-list-main { min-width: 0; }
.order-side-list-main .text-xs { display: block; line-height: 1; margin-bottom: 2px; }

.order-side-empty {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  font-size: var(--text-xs);
  color: var(--text-3);
  line-height: 1.4;
}

.order-side-docs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding: 4px;
}
.order-side-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text);
  text-align: left;
  transition: background var(--t-fast);
}
.order-side-doc:hover { background: var(--surface-hover); }
.oi-doc-ico {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
}

/* ── Editable items list with per-line Save-for-Customer (Section B) ─ */
.order-items-edit {
  display: flex;
  flex-direction: column;
}

.order-line {
  display: grid;
  grid-template-columns: 56px minmax(160px, 1fr) 90px 140px 110px 100px 40px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
  position: relative;
}
.order-line:last-child { border-bottom: none; }
.order-line.line-saved {
  background: var(--success-soft);
  transition: background var(--t-slow);
}

@media (max-width: 900px) {
  .order-line {
    grid-template-columns: 56px 1fr 40px;
    grid-template-areas:
      "img info menu"
      "img qty  menu"
      "img price menu"
      "img vat   menu"
      "img total menu";
    row-gap: var(--sp-2);
  }
  .order-line-img       { grid-area: img; }
  .order-line-info      { grid-area: info; }
  .order-line-menu      { grid-area: menu; }
}

.order-line-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.order-line-img-empty {}

.order-line-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-line-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-line-name:hover { color: var(--accent); }

.order-line-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  flex-wrap: wrap;
}

.order-line-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.order-line-field label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.line-input {
  width: 100%;
  height: 30px;
  padding: 0 var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.line-input:hover { border-color: var(--border-strong); }
.line-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.line-vat-display {
  font-size: var(--text-sm);
  color: var(--text-2);
  text-align: right;
  padding: 0 var(--sp-2);
}

.line-price-hint {
  font-size: 12px;
  margin-top: 2px;
  text-align: right;
}

.order-line-total {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  color: var(--text);
  text-align: right;
}

/* Per-line action menu */
.order-line-menu { position: relative; }
.order-line-menu summary {
  list-style: none;
  cursor: pointer;
}
.order-line-menu summary::-webkit-details-marker { display: none; }
.order-line-menu-panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
  z-index: var(--z-elevated);
  display: flex;
  flex-direction: column;
}
.line-menu-section {
  padding: var(--sp-2) var(--sp-3) 4px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
}
.order-line-menu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast);
  color: var(--text);
  font-size: var(--text-sm);
}
.order-line-menu-item:hover { background: var(--accent-soft); }
.order-line-menu-item strong {
  font-weight: var(--weight-semi);
}
.order-line-menu-item.line-menu-danger { color: var(--danger); }
.order-line-menu-item.line-menu-danger:hover { background: var(--danger-soft); }
.order-line-menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* Hide line menus when modal is open (same pattern as the More menu) */
body:has(.modal-backdrop.open) .order-line-menu[open] .order-line-menu-panel,
body:has(.modal.open)         .order-line-menu[open] .order-line-menu-panel {
  display: none;
}

/* ── Items list (Shopify-style, NOT a table) ─────────────────────────── */
.order-items-list {
  display: flex;
  flex-direction: column;
}

.order-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.order-item:last-child { border-bottom: none; }

.order-item-img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  display: block;
}
.order-item-img-empty {
  width: 48px;
  height: 48px;
}

.order-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-item-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-item-name:hover { color: var(--accent); }

.order-item-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  flex-wrap: wrap;
}

.order-item-total {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  color: var(--text);
  text-align: right;
  flex-shrink: 0;
  min-width: 100px;
}

/* ── Totals strip ─────────────────────────────────────────────────────── */
/* Totals block — narrow right-aligned summary box (invoice style)
   so labels stay next to values instead of spread across the whole row. */
.order-totals {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  margin-left: auto;             /* push to the right edge of items card */
  width: 100%;
  max-width: 340px;              /* tight summary column */
  background: transparent;
  border-top: 1px solid var(--border);
}

.order-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  color: var(--text-2);
  padding: 3px 0;
  gap: var(--sp-3);
}
.order-totals-row > span:first-child { color: var(--text-3); }
.order-totals-row > span:last-child  { color: var(--text); font-variant-numeric: tabular-nums; }
.order-totals-discount { color: var(--danger-text); }
.order-totals-discount > span { color: var(--danger-text) !important; }

.order-totals-divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-2) 0;
}

.order-totals-grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
  font-weight: var(--weight-bold);
  color: var(--text);
  letter-spacing: -0.01em;
  padding-top: var(--sp-1);
}
.order-totals-grand > span:first-child {
  font-size: var(--text-base);
}
.order-totals-grand > span:last-child {
  font-size: var(--text-xl);
  font-variant-numeric: tabular-nums;
}

/* ── Notes panel ──────────────────────────────────────────────────────── */
.order-note {
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text);
  white-space: pre-wrap;
  background: var(--warning-soft);
  color: var(--warning-text);
}

/* ── Timeline (comment box + events) ─────────────────────────────────── */
.order-comment-box {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.order-comment-box textarea { resize: vertical; }
.order-comment-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.order-timeline {
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.tl-row {
  display: flex;
  gap: var(--sp-3);
  position: relative;
}
.tl-row:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: -16px;
  width: 1.5px;
  background: var(--border);
  z-index: 0;
}

.tl-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: var(--weight-semi);
  letter-spacing: 0.02em;
  z-index: 1;
}

.tl-dot {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  font-size: var(--text-xs);
  color: var(--text-3);
  z-index: 1;
}
.tl-dot-created {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
  font-weight: var(--weight-bold);
}
.tl-dot-status { background: var(--accent-soft); border-color: var(--accent-ring); }
.tl-dot-items { background: var(--warning-soft); border-color: var(--warning-ring); }
.tl-dot-edit { background: var(--info-soft); border-color: var(--info-ring); }

.tl-body { flex: 1; min-width: 0; padding-top: 2px; }

.tl-bubble {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
}

.tl-bubble-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: 4px;
}

.tl-author {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text);
}

.tl-time {
  font-size: var(--text-2xs);
  color: var(--text-3);
  white-space: nowrap;
}

.tl-text {
  font-size: var(--text-sm);
  color: var(--text);
  white-space: pre-wrap;
}

.tl-event-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.tl-event-text {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.tl-event-meta {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 2px;
}

.tl-diff {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.tl-diff-row {
  padding: 4px var(--sp-2);
  border-radius: var(--r-sm);
}
.tl-diff-old { background: var(--danger-soft); color: var(--danger-text); }
.tl-diff-old::before { content: '− '; font-weight: var(--weight-bold); }
.tl-diff-new { background: var(--success-soft); color: var(--success-text); }
.tl-diff-new::before { content: '+ '; font-weight: var(--weight-bold); }

.tl-action {
  font-size: var(--text-2xs);
  color: var(--text-3);
  background: none;
  border: none;
  padding: 4px 0 0;
  cursor: pointer;
}
.tl-action:hover { color: var(--danger); }

/* ── Right sidebar cards ──────────────────────────────────────────────── */
.order-side-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.order-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
}

.order-side-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.order-side-link {
  font-size: var(--text-xs);
  color: var(--accent);
  text-decoration: none;
  font-weight: var(--weight-medium);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.order-side-link:hover { color: var(--accent-hover); }

/* Customer card */
.order-customer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
}

.order-customer-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  letter-spacing: 0.02em;
}

.order-customer-body {
  min-width: 0;
  flex: 1;
}

.order-customer-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-customer-name:hover { color: var(--accent); }

.order-customer-acc {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-family: var(--font-mono);
  margin-top: 1px;
}

.order-customer-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  border-top: 1px solid var(--border);
}

.order-contact-link {
  font-size: var(--text-xs);
  color: var(--text-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-contact-link:hover { color: var(--accent); }

/* Address block */
.order-address {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text);
  font-style: normal;
  line-height: 1.5;
}

.order-side-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  font-size: var(--text-xs);
  color: var(--text-3);
  border-top: 1px solid var(--border);
}
.order-side-meta strong {
  color: var(--text);
  font-weight: var(--weight-semi);
}
.order-side-meta > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}

/* EPOS process orders cards */
.process-cards-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.process-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.process-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.process-card.priority-urgent { border-left: 3px solid var(--danger); }
.process-card.priority-soon { border-left: 3px solid var(--warning); }

/* EPOS process orders — redesigned table: avatars · urgency accent · age pill */
.ep-table td { padding-top: 9px; padding-bottom: 9px; vertical-align: middle; }
/* Fixed column widths so the content stays grouped — stops the table from
   over-stretching the Customer column and leaving a big empty gap before
   Items. Slack lands in the (right-aligned) Action column, which is the
   conventional place for it. */
.ep-table { table-layout: fixed; }
.ep-table thead th:nth-child(1) { width: 90px; }   /* Order */
.ep-table thead th:nth-child(2) { width: 320px; }  /* Customer */
.ep-table thead th:nth-child(3) { width: 78px; }   /* Items */
.ep-table thead th:nth-child(4) { width: 120px; }  /* Total */
.ep-table thead th:nth-child(5) { width: 165px; }  /* Waiting */
.ep-num-link { font-weight: 700; font-size: 13.5px; color: var(--color-accent, var(--accent)); white-space: nowrap; }
.ep-card-cust { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 0; }
.ep-advance-grow { flex: 1; }
.ep-row.ep-prio-urgent > td:first-child { box-shadow: inset 3px 0 0 var(--color-danger, #ef4444); }
.ep-row.ep-prio-soon   > td:first-child { box-shadow: inset 3px 0 0 var(--color-warning, #f59e0b); }
.ep-cust-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ep-avatar { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.ep-cust-body { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ep-cust-name { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-cust-acct { font-size: 12px; color: var(--text-3); }
.ep-table .ep-items { font-weight: 600; }
.ep-table .ep-total { font-weight: 700; }
.ep-wait-cell { white-space: nowrap; }
.ep-age { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.ep-age-normal { background: var(--surface-3); color: var(--text-2); }
.ep-age-soon   { background: color-mix(in oklch, var(--color-warning, #f59e0b) 16%, transparent); color: #b45309; }
.ep-age-urgent { background: color-mix(in oklch, var(--color-danger, #ef4444) 16%, transparent); color: #be123c; }
.ep-wait-date { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 3px; }
.ep-act-cell { display: flex; align-items: center; gap: 6px; }
.ep-act-cell .ep-icon-btn { margin-right: 0; flex: none; }
.ep-act-cell .ep-advance { flex: 1; margin-left: 0; }

/* ── Product Categories — searchable tree + drag-reorder ──────────────── */
.cat-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.cat-search { position: relative; display: flex; align-items: center; flex: 1; min-width: 240px; max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 10px; color: var(--text-3); }
.cat-search:focus-within { border-color: var(--accent); }
.cat-search-input { flex: 1; border: none; background: none; outline: none; padding: 9px 8px; font-size: 13.5px; color: var(--text); }
.cat-search-x { border: none; background: none; cursor: pointer; color: var(--text-3); display: grid; place-items: center; padding: 2px; }
.cat-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cat-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.cat-chip:hover { border-color: color-mix(in oklch, #6366F1 40%, var(--border)); }
.cat-chip.on { background: color-mix(in oklch, #6366F1 12%, transparent); border-color: color-mix(in oklch, #6366F1 40%, var(--border)); color: #4338CA; font-weight: 600; }
.cat-chip-n { font-variant-numeric: tabular-nums; opacity: .7; font-weight: 600; }
.cat-bulkbar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; margin-bottom: var(--sp-3); background: color-mix(in oklch, #6366F1 7%, var(--surface)); border: 1px solid color-mix(in oklch, #6366F1 28%, var(--border)); border-radius: var(--r-md); }
.cat-bulk-n { font-size: 14px; }

.cat-table td { vertical-align: middle; }
.cat-table th.cat-c-grip, .cat-table td.cat-c-grip { width: 30px; padding-left: 8px; padding-right: 0; }
.cat-table th.cat-c-chk,  .cat-table td.cat-c-chk  { width: 34px; }
.cat-table th.cat-c-exp,  .cat-table td.cat-c-exp  { width: 28px; padding-left: 0; padding-right: 0; }
.cat-table th.cat-c-img,  .cat-table td.cat-c-img  { width: 56px; }
.cat-table th.cat-c-prod, .cat-table td.cat-c-prod { width: 180px; }
.cat-table th.cat-c-act,  .cat-table td.cat-c-act  { width: 1%; white-space: nowrap; text-align: right; }
/* keep the left utility columns borderless so the grid doesn't read cramped */
.cat-table th.cat-c-grip, .cat-table td.cat-c-grip,
.cat-table th.cat-c-chk,  .cat-table td.cat-c-chk,
.cat-table th.cat-c-exp,  .cat-table td.cat-c-exp { border-right: none; }

.cat-grip { display: inline-grid; place-items: center; width: 22px; height: 26px; color: var(--text-3); cursor: grab; border-radius: 5px; }
.cat-grip:hover { color: var(--text-2); background: var(--surface-2); }
.cat-grip:active { cursor: grabbing; }
.cat-exp { display: inline-grid; place-items: center; width: 24px; height: 24px; border: none; background: none; color: var(--text-3); cursor: pointer; border-radius: 5px; transition: transform var(--t-fast), background var(--t-fast); }
.cat-exp:hover { background: var(--surface-2); color: var(--text); }
.cat-exp.is-open { transform: rotate(180deg); color: var(--accent); }

.cat-thumb { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; border: 1px solid var(--border); display: block; }
.cat-thumb--ph { display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in oklch, #6366F1 14%, var(--surface-2)), var(--surface-2)); color: #6366F1; font-size: 13px; font-weight: 700; }

.cat-row--parent .cat-name { font-weight: 600; font-size: 14px; }
.cat-name--sub { font-weight: 500; font-size: 14px; }
.cat-meta { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.cat-subcount { color: var(--accent); font-weight: 600; }
.cat-tag-empty { color: var(--color-warning); font-weight: 600; }
.cat-hl { background: color-mix(in oklch, #F59E0B 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Child rows only render under an OPEN parent — tint them (lighter than the
   parent) + continue the left accent rail so the open group reads as one block. */
.cat-row--child > td { background: color-mix(in oklch, #6366F1 5%, transparent); }
.cat-row--child > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.cat-twig { display: inline-block; width: 13px; height: 13px; border-left: 2px solid var(--border); border-bottom: 2px solid var(--border); border-bottom-left-radius: 5px; margin-left: 9px; }

.cat-prodwrap { display: flex; align-items: center; gap: 10px; }
.cat-prod-link { font-weight: 600; font-size: 14px; min-width: 34px; }
.cat-prod-zero { color: var(--text-3); min-width: 34px; display: inline-block; }
.cat-prodbar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; max-width: 120px; }
.cat-prodbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #6366F1, #8B5CF6); }

.cat-acts { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.cat-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.cat-ico:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }
.cat-ico:disabled { opacity: .4; cursor: not-allowed; }
.cat-ico--danger:hover:not(:disabled) { border-color: var(--color-danger); color: var(--color-danger); }
.cat-ico svg { width: 15px; height: 15px; }
.cat-txtbtn { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 7px; padding: 5px 9px; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.cat-txtbtn:hover { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }

.cat-row.is-sel > td { background: color-mix(in oklch, #6366F1 7%, transparent); }
.cat-row.cat-drop > td { box-shadow: inset 0 2px 0 var(--accent); }
.cat-row.cat-dragging > td { opacity: .5; }
.cat-row--addsub td { padding: 2px 10px 10px; border: none; background: color-mix(in oklch, #6366F1 5%, transparent); }
.cat-row--addsub td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.cat-addsub { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--border); background: none; color: var(--text-3); border-radius: 7px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.cat-addsub:hover { border-color: var(--accent); color: var(--accent); }

/* Sub-category count column + expanded-row highlight */
.cat-table th.cat-c-sub, .cat-table td.cat-c-sub { width: 150px; }
.cat-subbar i { background: linear-gradient(90deg, #8B5CF6, #A855F7); }
.cat-sublink { border: none; background: none; padding: 0; cursor: pointer; color: #7C3AED; font-weight: 600; font-size: 14px; }
.cat-sublink:hover { text-decoration: underline; }
.cat-row--parent.is-expanded > td { background: color-mix(in oklch, #6366F1 8%, transparent); }
.cat-row--parent.is-expanded > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Full-detail rows: web badge, sort #, created date, stock value, preview strip */
.cat-table th.cat-c-prev, .cat-table td.cat-c-prev { width: 150px; }
.cat-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cat-meta-x { color: var(--text-3); }
.cat-dot { color: var(--text-3); opacity: .5; }
.cat-badge { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.cat-badge--web { background: color-mix(in oklch, #10B981 16%, transparent); color: #047857; }
.cat-badge--off { background: var(--surface-3); color: var(--text-3); }
.cat-value { font-size: 11.5px; color: var(--text-2); font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.cat-preview { display: flex; gap: 3px; }
.cat-preview img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; border: 1px solid var(--border); }

/* Products list — quick-filter chips + margin column */
.prod-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.prod-chips-label { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); font-weight: 600; margin-right: 2px; }
.prod-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border: 1px solid var(--border); background: var(--surface); border-radius: 999px; font-size: 13px; color: var(--text-2); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.prod-chip:hover { border-color: color-mix(in oklch, #6366F1 40%, var(--border)); color: var(--text); }
.prod-chip.on { background: color-mix(in oklch, #6366F1 12%, transparent); border-color: color-mix(in oklch, #6366F1 42%, var(--border)); color: #4338CA; font-weight: 600; }
.prod-margin { display: inline-block; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 6px; }
.prod-margin--low { background: color-mix(in oklch, var(--color-danger) 14%, transparent); color: #be123c; }
.prod-margin--mid { background: color-mix(in oklch, var(--color-warning) 16%, transparent); color: #b45309; }
.prod-margin--hi  { background: color-mix(in oklch, var(--color-success) 15%, transparent); color: #047857; }

/* ── Products: labeled filter toolbar (.pf-*) ─────────────────────────── */
.pf-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-grow  { flex: 1; min-width: 240px; }
.pf-label { font-size: 12px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--text-3); line-height: 1; padding-left: 2px; }
.pf-bar .filter-select { min-width: 138px; max-width: 210px; }
.pf-bar .pf-grow .search-wrap { min-width: 240px; }

/* "More" popover */
.pf-more { position: relative; flex-shrink: 0; }
.pf-more-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; }
.pf-more-btn.has-on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.pf-more-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; width: 224px; display: flex; flex-direction: column; gap: 6px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 10px 28px rgba(16,24,40,.14); }
.pf-pop[hidden] { display: none; }
.pf-poplabel { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); }
.pf-pop select.form-input { width: 100%; min-width: 0; max-width: none; height: 34px; }

/* Active-filters row — mirrors the indigo .prod-chip.on language, adds a removable ✕ */
.pf-active { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: var(--sp-2) 0 0; }
.pf-active-lbl { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); margin-right: 2px; }
.pf-achip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 11px; border: 1px solid color-mix(in oklch, #6366F1 42%, var(--border)); background: color-mix(in oklch, #6366F1 12%, transparent); color: #4338CA; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
.pf-achip:hover { background: color-mix(in oklch, #6366F1 18%, transparent); border-color: color-mix(in oklch, #6366F1 55%, var(--border)); }
.pf-achip .pf-x { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 999px; font-size: 12px; color: #6366F1; }
.pf-achip:hover .pf-x { background: rgba(99,102,241,.18); color: #3730A3; }
.pf-clearall { margin-left: 4px; background: none; border: none; padding: 4px 6px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--danger, #DC2626); text-decoration: underline; }
.pf-clearall:hover { color: #B91C1C; }

/* Result count line */
.pf-count { font-size: 13px; color: var(--text-2); margin: 8px 0 var(--sp-2); padding-left: 2px; }
.pf-count b { color: var(--text); font-weight: 600; }

@media (max-width: 720px) {
  .pf-bar .pf-field:not(.pf-grow):not(.pf-more) { flex: 1 1 calc(50% - var(--sp-2)); }
  .pf-bar .filter-select { min-width: 0; max-width: none; width: 100%; }
  .pf-more, .pf-more-btn { width: 100%; }
  .pf-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; }
}

/* ── Products: table/grid view toggle ─────────────────────────────────── */
.prod-viewtoggle { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.prod-vbtn { display: inline-grid; place-items: center; width: 34px; height: 30px; border: none; background: var(--surface); color: var(--text-3); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.prod-vbtn:hover { color: var(--text); }
.prod-vbtn.on { background: color-mix(in oklch, #6366F1 14%, var(--surface)); color: #4338CA; }
.prod-vbtn + .prod-vbtn { border-left: 1px solid var(--border); }

/* ── Products: inline edit cells ──────────────────────────────────────── */
.prod-edit-cell { cursor: pointer; }
.prod-edit-cell:hover { background: color-mix(in oklch, #6366F1 6%, transparent); }
.prod-pencil { opacity: 0; color: var(--text-3); vertical-align: -1px; transition: opacity var(--t-fast); }
.prod-edit-cell:hover .prod-pencil { opacity: .7; }
.prod-inline-input { width: 100%; max-width: 120px; padding: 4px 7px; border: 1px solid var(--accent, #6366F1); border-radius: 6px; font-size: 14px; background: var(--surface); color: var(--text); box-shadow: 0 0 0 3px color-mix(in oklch, #6366F1 16%, transparent); }

/* ── Products: grid / gallery cards ───────────────────────────────────── */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 12px; padding: 12px; }
.prod-gcard { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); cursor: pointer; display: flex; flex-direction: column; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.prod-gcard:hover { border-color: color-mix(in oklch, #6366F1 45%, var(--border)); box-shadow: 0 10px 22px -14px rgba(16,24,40,.32); transform: translateY(-2px); }
.prod-gimg { position: relative; aspect-ratio: 1; background: #fff; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--border); }
/* contain (not cover) so portrait keyring / tall product shots show in full
   — no top/bottom crop; 8px inset gives the product breathing room.
   Replaced elements (img) need EXPLICIT width+height for object-fit to have a
   box to fit within — inset alone leaves them at natural size (→ clipped). */
.prod-gimg img { position: absolute; top: 8px; left: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.prod-gimg-ph { color: var(--text-3); font-size: 26px; font-weight: 300; }
.prod-gtag { position: absolute; top: 6px; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; line-height: 1.4; }
.prod-gtag--off { left: 6px; background: var(--surface-3, #e2e8f0); color: var(--text-2); }
.prod-gtag--feat { right: 6px; background: color-mix(in oklch, #F59E0B 88%, white); color: #7c2d12; }
.prod-gbody { padding: 9px 10px 10px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.prod-gcode { font-family: var(--font-mono, monospace); font-size: 10.5px; color: var(--color-accent, #6366F1); letter-spacing: .2px; }
.prod-gtitle { font-size: 12.5px; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.prod-gmeta { display: flex; align-items: center; gap: 7px; margin-top: 2px; }
.prod-gprice { font-size: 14.5px; font-weight: 700; }
.prod-gfoot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 7px; }
.prod-gstock { font-size: 12px; font-weight: 600; }
.prod-gstock--out { color: var(--color-danger); }
.prod-gstock--low { color: var(--color-warning); }
.prod-gstock--ok  { color: var(--text-3); }
.prod-gview { display: inline-grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.prod-gview:hover { border-color: var(--accent, #6366F1); color: var(--accent, #6366F1); }

/* ── Products: quick-view drawer ──────────────────────────────────────── */
#prodQV { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
#prodQV .prod-qv-back { position: absolute; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(5px) saturate(1.05); -webkit-backdrop-filter: blur(5px) saturate(1.05); opacity: 0; transition: opacity .25s; pointer-events: auto; }
#prodQV.open .prod-qv-back { opacity: 1; }
.prod-qv-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(420px, 94vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: -14px 0 44px -22px rgba(16,24,40,.45); transform: translateX(100%); transition: transform .25s ease; pointer-events: auto; display: flex; flex-direction: column; }
#prodQV.open .prod-qv-panel { transform: none; }
.prod-qv-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.prod-qv-code { font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 700; color: var(--color-accent, #6366F1); }
.prod-qv-x { border: none; background: none; cursor: pointer; color: var(--text-3); display: grid; place-items: center; padding: 2px; }
.prod-qv-x:hover { color: var(--text); }
.prod-qv-scroll { padding: 16px; overflow: auto; }
.prod-qv-img { width: 100%; height: 300px; object-fit: contain; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--border); margin-bottom: 12px; }
.prod-qv-title { font-size: 16px; font-weight: 600; margin: 0 0 14px; line-height: 1.35; }
.prod-qv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent); font-size: 14px; }
.prod-qv-row span { color: var(--text-3); }
.prod-qv-row strong { text-align: right; }
.prod-qv-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* ── Catalogue workspace drawer (.cat-dw-*) ───────────────────────────── */
#catDrawer { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
#catDrawer .cat-dw-back { position: absolute; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(5px) saturate(1.05); -webkit-backdrop-filter: blur(5px) saturate(1.05); opacity: 0; transition: opacity .25s; pointer-events: auto; }
#catDrawer.open .cat-dw-back { opacity: 1; }
.cat-dw-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(520px, 96vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: -14px 0 44px -22px rgba(16,24,40,.45); transform: translateX(100%); transition: transform .25s ease; pointer-events: auto; display: flex; flex-direction: column; }
#catDrawer.open .cat-dw-panel { transform: none; }
.cat-dw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cat-dw-title { font-size: 17px; font-weight: 700; line-height: 1.3; }
.cat-dw-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.cat-dw-x { border: none; background: none; cursor: pointer; color: var(--text-3); display: grid; place-items: center; padding: 2px; flex-shrink: 0; }
.cat-dw-x:hover { color: var(--text); }
.cat-dw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cat-dw-stats > div { background: var(--surface-2); padding: 10px 6px; text-align: center; font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .3px; }
.cat-dw-stats span { display: block; font-size: 17px; font-weight: 700; color: var(--text); margin-bottom: 1px; text-transform: none; letter-spacing: 0; }
.cat-dw-actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cat-dw-tabs { display: flex; padding: 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cat-dw-tab { border: none; background: none; padding: 11px 4px; margin-right: 18px; font-size: 14px; font-weight: 600; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cat-dw-tab:hover { color: var(--text-2); }
.cat-dw-tab.active { color: #4338CA; border-bottom-color: #6366F1; }
.cat-dw-body { padding: 14px 16px; overflow: auto; flex: 1; }
.cat-dw-add { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.cat-dw-table { width: 100%; border-collapse: collapse; }
.cat-dw-table td { padding: 9px 4px; border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent); vertical-align: middle; }
.cat-dw-empty { color: var(--text-3); font-size: 14px; text-align: center; padding: 28px 14px; line-height: 1.5; }

/* ── Catalogue coverage-gap cards ─────────────────────────────────────── */
.cat-cov-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: var(--sp-3); }
.cat-cov { text-align: left; border: 1px solid var(--border); border-left-width: 3px; border-radius: 12px; padding: 12px 14px; background: var(--surface); cursor: default; transition: box-shadow var(--t-fast); }
.cat-cov[onclick] { cursor: pointer; }
.cat-cov[onclick]:hover { box-shadow: 0 6px 16px -10px rgba(16,24,40,.3); }
.cat-cov-n { font-size: 22px; font-weight: 700; line-height: 1; }
.cat-cov-l { font-size: 13px; font-weight: 600; margin-top: 5px; }
.cat-cov-h { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.cat-cov--ok { border-left-color: var(--color-success, #10B981); }
.cat-cov--ok .cat-cov-n { color: var(--color-success, #10B981); }
.cat-cov--warn { border-left-color: #F59E0B; background: color-mix(in oklch, #F59E0B 5%, var(--surface)); }
.cat-cov--warn .cat-cov-n { color: #B45309; }
.cat-cov--bad { border-left-color: #F43F5E; background: color-mix(in oklch, #F43F5E 6%, var(--surface)); }
.cat-cov--bad .cat-cov-n { color: #be123c; }

/* ── Catalogue-products: tier toggle + price cells + margin pills ─────── */
.cp-tiers { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.cp-tier { border: none; background: var(--surface); color: var(--text-3); padding: 0 11px; height: 34px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
.cp-tier + .cp-tier { border-left: 1px solid var(--border); }
.cp-tier:hover { color: var(--text); }
.cp-tier.active { background: color-mix(in oklch, #14B8A6 16%, var(--surface)); color: #0f766e; }
.cp-price { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cp-price--bb { color: var(--color-warning); }
.cp-badge { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px; letter-spacing: .3px; }
.cp-badge--ov { background: color-mix(in oklch, #6366F1 16%, transparent); color: #4338CA; }
.cp-badge--mk { background: color-mix(in oklch, #F59E0B 18%, transparent); color: #b45309; }
.cp-badge--base { background: var(--surface-2); color: var(--text-3); }
.cp-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.cp-pill--ok { background: color-mix(in oklch, var(--color-success) 14%, transparent); color: #047857; }
.cp-pill--cost { background: color-mix(in oklch, var(--color-danger) 16%, transparent); color: #be123c; }
.stk-cover--amber { background: color-mix(in oklch, var(--color-warning) 18%, transparent); color: #b45309; }
.stk-reorder-input { width: 58px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; text-align: right; background: var(--surface); color: var(--text); font-variant-numeric: tabular-nums; }
.stk-reorder-input:focus { border-color: var(--accent, #6366F1); outline: none; box-shadow: 0 0 0 2px color-mix(in oklch, #6366F1 16%, transparent); }

/* Stock detail drawer */
.stk-drawer { position: fixed; inset: 0; z-index: 1200; pointer-events: none; }
.stk-drawer .sd-back { position: absolute; inset: 0; background: rgba(15,23,42,0.5); backdrop-filter: blur(5px) saturate(1.05); -webkit-backdrop-filter: blur(5px) saturate(1.05); opacity: 0; transition: opacity .25s; pointer-events: auto; }
.stk-drawer.open .sd-back { opacity: 1; }
.sd-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(460px, 96vw); background: var(--surface); border-left: 1px solid var(--border); box-shadow: -14px 0 44px -22px rgba(16,24,40,.45); transform: translateX(100%); transition: transform .25s ease; pointer-events: auto; display: flex; flex-direction: column; }
.stk-drawer.open .sd-panel { transform: none; }
.sd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sd-title { font-size: 16px; font-weight: 700; line-height: 1.3; }
.sd-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.sd-body { padding: 16px; overflow: auto; flex: 1; }
.sd-sec { margin-bottom: 18px; }
.sd-sec-h { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); margin-bottom: 8px; }
.sd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 16px; }
.sd-grid > div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; border-bottom: 1px solid color-mix(in oklch, var(--border) 50%, transparent); padding-bottom: 6px; }
.sd-grid span { color: var(--text-3); }
.sd-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ── Manage Stock — calm dense row refinement (#stockTable-scoped) ── */
#stockTable td        { padding-top: 5px; padding-bottom: 5px; line-height: 1.25; }
#stockTable thead th  { padding-top: 6px; padding-bottom: 6px; }
#stockTable .cell-check    { width: 32px; }
#stockTable .stk-status    { width: 108px; }
#stockTable .stk-img-cell  { width: 52px; text-align: center; }
#stockTable .stk-acts-cell { width: 108px; }

/* Left-accent status bar */
#stockTable td.stk-status { position: relative; }
#stockTable td.stk-status::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; border-radius: 0 2px 2px 0; background: var(--text-3);
}
#stockTable td.stk-status[data-st="healthy"]::before     { background: var(--color-success); }
#stockTable td.stk-status[data-st="low"]::before         { background: var(--color-warning); }
#stockTable td.stk-status[data-st="out"]::before         { background: var(--color-danger); }
#stockTable td.stk-status[data-st="overstock"]::before   { background: var(--color-info, #6366F1); }
#stockTable td.stk-status[data-st="nothreshold"]::before { background: var(--border-strong, var(--text-3)); }
.stk-badge { font-size: 12px; padding: 1px 7px; }

/* Compact thumb */
#stockTable .stk-thumb { width: 40px; height: 40px; font-size: 15px; margin: 0 auto; }

/* Grouped product cell — title 1-line clamp, quiet meta */
.stk-prod { min-width: 0; }
.stk-prod-title { font-weight: var(--weight-med, 500); color: var(--text); font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk-prod-meta { font-size: 12px; color: var(--text-3); margin-top: 1px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.stk-prod-meta .mono { color: var(--text-2); }
.stk-prod-dot { color: var(--border-strong, var(--text-3)); }

/* Tabular numbers */
#stockTable .stk-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stk-unit { font-size: 12px; color: var(--text-3); margin-left: 1px; }

/* De-emphasise secondary columns */
.stk-dim { color: var(--text-3); font-size: 13px; }
.stk-dim .text-info { color: var(--info-text, var(--color-info, #0EA5E9)); }

/* Emphasise the Reorder decision column */
#stockTable .stk-col-act { background: color-mix(in oklch, var(--color-info, #6366F1) 4%, transparent); }
#stockTable tbody tr:hover .stk-col-act { background: color-mix(in oklch, var(--color-info, #6366F1) 7%, transparent); }

/* Actions — single nowrap row of 28px icon buttons, revealed on hover */
.stk-acts { display: flex; flex-wrap: nowrap; gap: 4px; justify-content: flex-end; align-items: center; opacity: 0; transform: translateX(4px); transition: opacity var(--t-fast), transform var(--t-fast); }
.stk-row:hover .stk-acts, .stk-acts:focus-within { opacity: 1; transform: none; }
@media (hover: none) { .stk-acts { opacity: 1; transform: none; } }
.stk-acts .ico-btn { width: 28px; height: 28px; flex: 0 0 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text-3); cursor: pointer; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.stk-acts .ico-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.stk-acts .ico-btn:disabled { opacity: .38; cursor: not-allowed; }
.stk-acts .ico-btn:disabled:hover { background: transparent; border-color: transparent; color: var(--text-3); }
.cp-edit-cell { cursor: pointer; }
.cp-edit-cell:hover { background: color-mix(in oklch, #14B8A6 8%, transparent); }
.cp-revert { border: none; background: none; cursor: pointer; color: var(--text-3); font-size: 13px; line-height: 1; padding: 0 2px; opacity: 0; transition: opacity var(--t-fast), color var(--t-fast); }
.cp-edit-cell:hover .cp-revert, .cp-price:hover .cp-revert { opacity: .75; }
.cp-revert:hover { color: var(--accent, #6366F1); opacity: 1; }
.cp-sim { background: color-mix(in oklch, #14B8A6 6%, var(--surface)); border: 1px solid color-mix(in oklch, #14B8A6 30%, var(--border)); border-radius: var(--r-md); padding: 12px 14px; margin-top: var(--sp-2); }
.cp-sim-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-sim-lbl { font-weight: 600; font-size: 14px; }
.cp-sim-result { margin-top: 9px; font-size: 14px; color: var(--text-2); }
.cp-sim-result b { color: var(--text); }
.cp-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.cp-sortable:hover { color: var(--text); background: color-mix(in oklch, #6366F1 5%, transparent); }
.cp-sorted { color: #4338CA; }
.cp-sort-ind { font-size: 9px; }
.ep-icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; margin-right: 6px; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.ep-icon-btn:hover { border-color: var(--color-accent, var(--accent)); color: var(--color-accent, var(--accent)); background: var(--surface-2); }
.ep-icon-btn svg { width: 15px; height: 15px; }
.ep-advance { margin-left: 2px; }

.process-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.process-card-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--accent);
}
.process-card-num:hover { color: var(--accent-hover); text-decoration: underline; }

.process-card-customer {
  font-size: var(--text-sm);
}
.process-card-customer .fw-semi {
  color: var(--text);
  display: block;
}
.process-card-customer .text-muted {
  font-size: var(--text-xs);
}

.process-card-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.process-card-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.process-card-meta .text-muted {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.process-card-meta .fw-semi {
  font-size: var(--text-sm);
  color: var(--text);
}

.process-card-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.process-card-actions .btn { flex: 1; min-width: 0; }

/* Product detail page layout */
.prod-detail-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: var(--sp-4);
}
@media (max-width: 1024px) {
  .prod-detail-grid { grid-template-columns: 1fr; }
}

.prod-hero-card {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: fit-content;
}

.prod-hero-img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--surface-2);
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  position: relative;
}
.prod-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.prod-hero-empty {
  color: var(--text-3);
  font-size: var(--text-sm);
}

.prod-thumb-strip {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: 2px;
}
.prod-thumb-strip > * {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  background: var(--surface-2);
  position: relative;
}
.prod-thumb-strip > *.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.prod-thumb-strip img { width: 100%; height: 100%; object-fit: cover; }

.prod-info-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

.prod-info-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

.prod-kpi-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (max-width: 640px) {
  .prod-kpi-col { grid-template-columns: 1fr; }
}

.def-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--text-sm);
}
.def-list > .def-label {
  color: var(--text-3);
  font-size: var(--text-xs);
  padding-top: 1px;
}
.def-list > .def-value {
  color: var(--text);
  word-break: break-word;
}

.tier-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--text-sm);
}
.tier-grid-head,
.tier-grid-row {
  display: grid;
  grid-template-columns: 1fr 90px 90px 90px;
  gap: var(--sp-2);
  padding: 6px var(--sp-2);
  align-items: center;
}
.tier-grid-head {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: var(--weight-semi);
  border-bottom: 1px solid var(--border);
}
/* Match header column alignment to value column alignment — first column
   is the row-label (left), the three numeric columns are right-aligned. */
.tier-grid-head > *      { text-align: right; }
.tier-grid-head > *:first-child { text-align: left; }
.tier-grid-row:nth-child(even) { background: var(--surface-2); border-radius: var(--r-sm); }
.tier-grid-row > * {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.tier-grid-row > *:first-child {
  text-align: left;
  color: var(--text-2);
  font-weight: var(--weight-medium);
}

.d-flex { display: flex; }
.align-center { align-items: center; }
.d-grid { display: grid; }
.mono { font-family: var(--font-mono); }

/* Activity log filter bar */
.activity-filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-2);
}
.activity-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.activity-filter-label {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Filter bar — search + dropdowns */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-2);
  flex-wrap: wrap;
}
.filter-bar > * { flex-shrink: 0; }
.filter-bar input[type="text"],
.filter-bar input[type="search"] {
  flex: 1;
  min-width: 200px;
  width: auto;
}
.filter-bar select,
.filter-bar .filter-select,
.filter-bar select.form-input {
  width: auto;
  min-width: 140px;
  max-width: 220px;
  flex-shrink: 0;
}
.filter-bar .search-wrap {
  flex: 1;
  min-width: 240px;
  width: auto;
}
.filter-select {
  width: auto !important;
  min-width: 140px;
}

/* Column variant — tabs above search/filters */
.filter-bar.filter-bar-col {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
  overflow: visible;
  /* Children (.tab-strip-wrap, .ol-toolbar) have their own borders.
     Stripping the outer .filter-bar border + background means the
     filter-bar-col wrapper isn't a visible element on its own — it
     just stacks its children edge-to-edge with the page wrapper. */
  border: none;
  background: transparent;
  border-radius: 0;
}
.filter-bar-col .tab-strip-wrap {
  border-bottom: 1px solid var(--border);
}
.filter-bar-col .filter-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  flex-wrap: wrap;
}
.filter-bar-col .filter-row > * { flex-shrink: 0; }
.filter-bar-col .filter-row input[type="text"],
.filter-bar-col .filter-row input[type="search"],
.filter-bar-col .filter-search { flex: 1; min-width: 200px; }
.filter-bar-col .filter-row select { min-width: 140px; }

/* Search input with icon */
.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
}
.search-wrap svg {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-3);
  pointer-events: none;
  z-index: 1;
}
.search-wrap input.search-input,
input.search-input {
  width: 100%;
  height: 32px;
  /* Plain .search-input (no wrap) gets normal padding; wrapped one reserves icon space */
  padding: 0 var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* Specificity needs to beat the generic input[type="text"]:not(.cmd-input) form rule (0,2,1) */
.search-wrap input.search-input {
  padding-left: calc(var(--sp-3) + 14px + var(--sp-2)); /* 12 + 14 + 8 = 34px clear of the icon */
}
.search-wrap input.search-input:focus,
input.search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}
.filter-search { flex: 1; min-width: 240px; }

/* ════════════════════════════════════════════════════════════════════════
   COLOURFUL FILTER BARS — indigo-unified + active-value glow (project-wide)
   Placed after the shared filter rules so it wins on source order (no
   !important). Anchor hue #6366F1 (matches .prod-chip / .pf-* product work).
   Headline: a filter <select> NOT on its first ("All / Any") option glows so
   active filters are scannable. Pure CSS via :has(option:first-child:checked).
   ════════════════════════════════════════════════════════════════════════ */

/* 1 — Search: indigo magnifier + indigo hover/focus */
.filter-bar .search-wrap svg, .search-wrap svg, .pf-bar .search-wrap svg {
  color: color-mix(in oklch, #6366F1 60%, var(--text-3));
  transition: color var(--t-fast);
}
.search-wrap:hover svg, .search-wrap:focus-within svg { color: #6366F1; }
.search-wrap input.search-input:hover:not(:focus), input.search-input:hover:not(:focus) {
  border-color: color-mix(in oklch, #6366F1 38%, var(--border));
}
.search-wrap input.search-input:focus, input.search-input:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px color-mix(in oklch, #6366F1 18%, transparent);
  outline: none;
}

/* 2 — Filter selects: hover warm-up, focus ring, ACTIVE-VALUE glow */
.filter-bar select, .filter-bar .filter-select, .filter-bar select.form-input,
.filter-select, .pf-bar .filter-select {
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.filter-bar select:hover:not(:focus), .filter-bar .filter-select:hover:not(:focus),
.filter-bar select.form-input:hover:not(:focus), .filter-select:hover:not(:focus),
.pf-bar .filter-select:hover:not(:focus) {
  border-color: color-mix(in oklch, #6366F1 40%, var(--border));
}
.filter-bar select:focus, .filter-bar .filter-select:focus, .filter-bar select.form-input:focus,
.filter-select:focus, .pf-bar .filter-select:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px color-mix(in oklch, #6366F1 18%, transparent);
  outline: none;
}
.filter-bar select:not(:has(option:first-child:checked)),
.filter-bar .filter-select:not(:has(option:first-child:checked)),
.filter-bar select.form-input:not(:has(option:first-child:checked)),
.filter-select:not(:has(option:first-child:checked)),
.pf-bar .filter-select:not(:has(option:first-child:checked)) {
  border-color: color-mix(in oklch, #6366F1 48%, var(--border));
  background-color: color-mix(in oklch, #6366F1 9%, var(--surface));
  color: #4338CA;
  font-weight: 600;
  box-shadow: 0 0 0 2px color-mix(in oklch, #6366F1 12%, transparent);
}

/* 3 — Filter-bar container: subtle indigo top accent */
.filter-bar {
  border-color: color-mix(in oklch, #6366F1 22%, var(--border));
  box-shadow: inset 0 2px 0 0 color-mix(in oklch, #6366F1 32%, transparent);
}
.filter-bar.filter-bar-col { border-color: transparent; box-shadow: none; }

/* 4 — Products .pf-bar per-type colour key (dots + label tint, order-proof) */
.pf-label { color: color-mix(in oklch, #6366F1 60%, var(--text-3)); }
.pf-bar .pf-field--search { --pf-type-c: #6366F1; } /* indigo  */
.pf-bar .pf-field--cat    { --pf-type-c: #8B5CF6; } /* violet  */
.pf-bar .pf-field--sub    { --pf-type-c: #0EA5E9; } /* sky     */
.pf-bar .pf-field--cata   { --pf-type-c: #14B8A6; } /* teal    */
.pf-bar .pf-field--brand  { --pf-type-c: #F59E0B; } /* amber   */
.pf-bar .pf-field--status { --pf-type-c: #10B981; } /* emerald */
.pf-bar .pf-field .pf-label {
  display: inline-flex; align-items: center; gap: 5px;
  color: color-mix(in oklch, var(--pf-type-c, #6366F1) 55%, var(--text-3));
}
.pf-bar .pf-field .pf-label::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--pf-type-c, var(--text-3)); flex-shrink: 0;
}
.pf-bar .pf-more .pf-label::before { display: none; } /* no dot on the spacer label */
.pf-bar .pf-field:has(.filter-select:not(:has(option:first-child:checked))) .pf-label,
.pf-bar .pf-field--search:focus-within .pf-label {
  color: var(--pf-type-c, #6366F1);
}
.pf-bar .pf-field:has(.filter-select:not(:has(option:first-child:checked))) .filter-select {
  border-color: color-mix(in oklch, var(--pf-type-c, #6366F1) 52%, var(--border));
  background-color: color-mix(in oklch, var(--pf-type-c, #6366F1) 10%, var(--surface));
  color: color-mix(in oklch, var(--pf-type-c, #6366F1) 72%, var(--text));
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--pf-type-c, #6366F1) 14%, transparent);
}

/* 5 — inv-tab: indigo active for PLAIN tabs (stage-coloured tabs untouched) */
.inv-tab.active:not([class*="tab-stage-"]) {
  border-bottom-color: #6366F1; color: #4338CA; font-weight: 600;
}
.inv-tab:not([class*="tab-stage-"]):not(.active):hover {
  color: color-mix(in oklch, #6366F1 70%, var(--text-2));
}
.inv-tab.active:not([class*="tab-stage-"]) .t-n { background: #6366F1; color: #fff; opacity: 1; }

/* 6 — bespoke search boxes: indigo focus for family consistency */
.ol-toolbar-search-input:focus, .bo3-search-input:focus, .dr3-search-input:focus,
.cat-search-input:focus, .wh-search-input:focus, .pack-search-input:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px color-mix(in oklch, #6366F1 18%, transparent);
  outline: none;
}
/* 7 — bespoke dropdowns: customers .cl-select + finance .input active glow */
.cl-select:not(:has(option:first-child:checked)),
.filter-bar select.input:not(:has(option:first-child:checked)) {
  border-color: color-mix(in oklch, #6366F1 48%, var(--border));
  background-color: color-mix(in oklch, #6366F1 9%, var(--surface));
  color: #4338CA; font-weight: 600;
}
.cl-select:focus, .filter-bar input.input:focus, .filter-bar select.input:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px color-mix(in oklch, #6366F1 18%, transparent);
  outline: none;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  flex-wrap: wrap;
}
/* Three slots: total info · centered page buttons · rows-per-page selector.
   Using a three-column layout so each side anchors instead of spreading. */
.pagination-info {
  font-size: var(--text-xs);
  color: var(--text-3);
  flex: 1 1 auto;
  text-align: left;
}
.pagination-pages {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.pagination-size {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--text-3);
  flex: 1 1 auto;
  justify-content: flex-end;
  white-space: nowrap;            /* "Rows per page:" stays on one line */
}
.pagination-size select {
  width: 72px;                    /* compact — fits up to 4-digit values */
  height: 28px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--text-xs);
  color: var(--text);
  cursor: pointer;
}

.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 var(--sp-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t-fast);
}
.page-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}
.page-btn.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.page-ellipsis {
  color: var(--text-3);
  padding: 0 var(--sp-1);
}

/* ===========================================================================
   15. Modals
   =========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-norm), visibility var(--t-norm);
  backdrop-filter: blur(5px) saturate(1.05);
}
.modal-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.97);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.28), 0 2px 8px -2px rgba(0, 0, 0, 0.08);
  z-index: var(--z-modal);
  width: min(580px, calc(100vw - 32px));
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-norm), visibility var(--t-norm), transform var(--t-norm);
  overflow: hidden;
}
.modal.open {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0;
  line-height: 1.35;
}

.modal-close {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  margin: 0 -4px 0 0;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  color: var(--text-3);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.modal-close:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}

.modal-body {
  padding: var(--sp-5);
  overflow: auto;           /* both axes — wide tables scroll instead of clipping at the modal edge */
  flex: 1;
}

.modal-body > * + * { margin-top: var(--sp-4); }

/* Data/table modals: a bare table fills the body; if it's still wider than the
   modal (nowrap money columns, the customer ledger, etc.) the body's overflow:auto
   gives it a horizontal scrollbar instead of silently clipping the last column. */
.modal-body table { width: 100%; }

/* ── In-modal form rhythm — decluttered: comfortable inputs, a clear label→field
   gap and generous spacing between groups. Scoped to .modal-body so page forms
   stay untouched. Drives the consistent look across all 250+ openModal modals. */
.modal-body .form-group { gap: 7px; }
.modal-body .form-group + .form-group,
.modal-body .form-row + .form-row { margin-top: var(--sp-4); }
.modal-body .form-input,
.modal-body input[type="text"]:not(.cmd-input),
.modal-body input[type="email"],
.modal-body input[type="password"],
.modal-body input[type="number"],
.modal-body input[type="search"],
.modal-body input[type="tel"],
.modal-body input[type="date"],
.modal-body input[type="datetime-local"],
.modal-body input[type="time"],
.modal-body input[type="url"],
.modal-body select { height: 38px; }
.modal-body .form-input:focus,
.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus { box-shadow: 0 0 0 3px var(--accent-ring); }
.modal-body .req { color: var(--accent-text); font-weight: var(--weight-semi); }
/* checkbox / radio rows become comfortable, hoverable chips */
.modal-body label:has(> input[type="checkbox"]),
.modal-body label:has(> input[type="radio"]) {
  padding: 6px 8px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast);
}
.modal-body label:has(> input[type="checkbox"]):hover,
.modal-body label:has(> input[type="radio"]):hover { background: var(--surface-2); }

/* ── .fmod — Finance / accounting modal forms ───────────────────────────────
   One professional, consistent look for every finance & accounting popup
   (manual journal, fixed asset, payroll, FX rate, budget, bank import, …).
   Wrap a modal body in <div class="fmod"> and use these primitives. Scoped so
   it never touches the 250+ other modals. */
.modal-body .fmod > * + * { margin-top: var(--sp-4); }
.fmod-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); align-items: start; }
.fmod-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.fmod-row.cols-1 { grid-template-columns: 1fr; }
@media (max-width: 560px) { .fmod-row, .fmod-row.cols-3 { grid-template-columns: 1fr; } }
.fmod-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fmod-field > label { font-size: var(--text-xs); font-weight: var(--weight-semi); color: var(--text-2); letter-spacing: .01em; }
.fmod-field .req { color: var(--accent-text); margin-left: 2px; font-weight: var(--weight-bold); }
.fmod-field .fmod-hint { font-size: var(--text-2xs); color: var(--text-3); line-height: 1.45; }
/* inputs fill their column + share the modal-body 38px sizing/focus ring */
.fmod .form-input,
.fmod input:not([type="checkbox"]):not([type="radio"]),
.fmod select,
.fmod textarea { width: 100%; box-sizing: border-box; }
.fmod textarea { resize: vertical; min-height: 70px; }
/* amount input with a leading currency glyph */
.fmod-money { position: relative; display: block; }
.fmod-money::before { content: "£"; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-weight: var(--weight-medium); pointer-events: none; }
.fmod-money > input { padding-left: 22px !important; text-align: right; font-variant-numeric: tabular-nums; }
/* section divider/header inside a form */
.fmod-section { font-size: var(--text-2xs); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding-bottom: 7px; border-bottom: 1px solid var(--color-border); }
/* multi-row line editor (journal lines, etc.) */
.fmod-lines { width: 100%; border-collapse: separate; border-spacing: 0; }
.fmod-lines thead th { font-size: var(--text-2xs); font-weight: var(--weight-semi); text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); text-align: left; padding: 0 6px 7px; white-space: nowrap; }
.fmod-lines thead th.num { text-align: right; }
.fmod-lines td { padding: 3px 4px; vertical-align: middle; }
.fmod-lines tbody tr + tr td { padding-top: 6px; }
.fmod-lines input, .fmod-lines select { height: 36px; }
.fmod-lines td.num input { text-align: right; font-variant-numeric: tabular-nums; }
.fmod-lines td.x-cell { width: 40px; text-align: center; }
.fmod-lines td.x-cell .btn { padding: 6px 9px; }
/* totals / balance status bar */
.fmod-balbar { display: flex; align-items: center; gap: var(--sp-4); padding: 11px 14px; background: var(--surface-2); border: 1px solid var(--color-border); border-radius: var(--r-md); font-variant-numeric: tabular-nums; }
.fmod-balbar .lbl { color: var(--text-3); font-size: var(--text-xs); margin-right: 4px; }
.fmod-balbar .val { font-weight: var(--weight-semi); }
.fmod-balbar .pill { margin-left: auto; font-size: var(--text-xs); font-weight: var(--weight-semi); padding: 4px 10px; border-radius: 999px; }
.fmod-balbar .pill.ok { color: var(--color-success); background: var(--success-soft); }
.fmod-balbar .pill.bad { color: var(--color-danger); background: var(--danger-soft); }
/* key→value rows for read-only detail popups (period/transaction/supplier) */
.fmod-kv { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--color-border); }
.fmod-kv:last-child { border-bottom: 0; }
.fmod-kv .k { color: var(--text-3); font-size: var(--text-xs); white-space: nowrap; }
.fmod-kv .v { font-weight: var(--weight-semi); text-align: right; font-variant-numeric: tabular-nums; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}
.modal-footer:empty { display: none; }

/* Phase 5 Step 1.8 — when a save-state indicator is injected as the first
 * child of the modal footer, push it to the left and keep buttons right. */
.modal-footer.modal-footer-with-state {
  justify-content: space-between;
}
.modal-footer.modal-footer-with-state .save-state {
  margin-right: auto;
}

/* ===========================================================================
   16. Tabs
   =========================================================================== */
.tab-strip-wrap {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
  /* Hide the horizontal scrollbar — it only appears when tabs overflow
     and even then the user can swipe/scroll wheel. The gutter showing
     even at fits-fine widths was creating dead vertical space. */
  scrollbar-width: none;
}
.tab-strip-wrap::-webkit-scrollbar { display: none; }

/* ── Settings page shell — grouped vertical nav (all sections visible) ── */
.settings-layout { display:grid; grid-template-columns: 250px minmax(0,1fr); gap:20px; align-items:start; }
.settings-nav {
  position: sticky; top: 8px;
  display:flex; flex-direction:column; gap:13px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--r-lg);
  padding: 12px 10px;
  max-height: calc(100vh - 96px); overflow-y:auto;
}
.settings-nav-group { display:flex; flex-direction:column; gap:2px; }
.settings-nav .sng-hd { font-size:10.5px; font-weight:var(--weight-semi); letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); padding:3px 10px 4px; }
.settings-nav-item {
  display:flex; align-items:center; gap:10px; width:100%;
  padding:8px 10px; border:none; background:transparent; cursor:pointer; text-align:left;
  border-radius: var(--r-md);
  font-size:14px; font-weight:var(--weight-medium); color:var(--text-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.settings-nav-item svg { width:17px; height:17px; flex:none; color:var(--text-3); transition:color var(--t-fast); }
.settings-nav-item span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.settings-nav-item:hover { background: var(--surface-hover); color: var(--text); }
.settings-nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight:var(--weight-semi); }
.settings-nav-item.active svg { color: var(--accent); }
.settings-content { min-width:0; }
.settings-content-hd { display:flex; align-items:center; gap:13px; margin-bottom:18px; }
.settings-content-hd .sch-ic { width:44px; height:44px; border-radius:13px; flex:none; display:grid; place-items:center; background: var(--accent-soft); color: var(--accent); }
.settings-content-hd .sch-ic svg { width:22px; height:22px; }
.settings-content-hd h2 { margin:0; font-size:19px; font-weight:var(--weight-bold); letter-spacing:-0.01em; color:var(--text); }
.settings-content-hd p { margin:3px 0 0; font-size:14px; color:var(--text-3); }
@media (max-width: 920px) {
  .settings-layout { grid-template-columns: 1fr; gap:14px; }
  .settings-nav { position:static; flex-direction:row; gap:6px; max-height:none; overflow-x:auto; overflow-y:visible; padding:8px; }
  .settings-nav-group { flex-direction:row; gap:6px; }
  .settings-nav .sng-hd { display:none; }
  .settings-nav-group + .settings-nav-group::before { content:""; width:1px; align-self:stretch; background:var(--border); margin:4px 2px; flex:none; }
  .settings-nav-item { white-space:nowrap; }
  .settings-content-hd { margin-bottom:14px; }
}

/* ── Settings → Company tab redesign (.coset-*) ─────────────────────
   Card-sectioned company profile + live PDF letterhead preview. */
.coset { display:flex; flex-direction:column; gap:16px; }
.coset-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.coset-hd { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.coset-hd .coset-ic {
  width:38px; height:38px; border-radius:11px; flex:none;
  display:grid; place-items:center;
  background: var(--accent-soft); color: var(--accent);
}
.coset-hd .coset-ic svg { width:19px; height:19px; }
.coset-hd-tx h3 { margin:0; font-size:15px; font-weight:var(--weight-semi); color:var(--text); letter-spacing:-0.01em; }
.coset-hd-tx p  { margin:3px 0 0; font-size:12.5px; color:var(--text-3); line-height:1.45; }
.coset-card .form-label { font-weight:var(--weight-medium); }
/* branding split: fields left, live preview right */
.coset-brand { display:grid; grid-template-columns: 1fr 320px; gap:22px; align-items:start; }
@media (max-width: 980px){ .coset-brand { grid-template-columns:1fr; } }
.coset-logo {
  display:flex; align-items:center; gap:12px;
  background:var(--surface-2); border:1px dashed var(--border);
  border-radius:var(--r-2); padding:12px; min-height:78px;
}
.coset-accent { display:flex; gap:8px; align-items:center; }
.coset-accent input[type=color]{ width:46px; height:40px; padding:0; border:1px solid var(--border); border-radius:var(--r-2); cursor:pointer; background:none; }
/* live letterhead preview — always "paper" white regardless of theme */
.coset-preview-wrap { position:sticky; top:8px; }
.coset-letter { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 8px 26px -12px rgba(2,6,23,.35); }
.coset-letter-bar { height:7px; background: var(--accent); }
.coset-letter-body { padding:16px 18px; }
.coset-letter-top { display:flex; gap:13px; align-items:center; }
.coset-letter-logo { width:54px; height:54px; border-radius:12px; flex:none; display:grid; place-items:center; background:#f1f5f9; color:#0f172a; font-weight:700; font-size:18px; letter-spacing:.5px; overflow:hidden; }
.coset-letter-logo img { width:100%; height:100%; object-fit:contain; background:#fff; }
.coset-letter-co { font-size:15.5px; font-weight:700; color:#0f172a; line-height:1.2; }
.coset-letter-sub { font-size:12px; color:#64748b; margin-top:3px; line-height:1.4; }
.coset-letter-doc { margin-top:15px; display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid #eef2f7; padding-top:11px; }
.coset-letter-title { font-size:15px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
.coset-letter-meta { font-size:12px; color:#94a3b8; text-align:right; line-height:1.6; }
.coset-letter-lines { margin-top:13px; }
.coset-letter-lines i { display:block; height:7px; border-radius:3px; background:#eef2f7; margin-bottom:6px; }
.coset-letter-lines i:nth-child(1){ width:90%; } .coset-letter-lines i:nth-child(2){ width:72%; } .coset-letter-lines i:nth-child(3){ width:82%; }
.coset-preview-cap { font-size:12px; color:var(--text-3); margin-top:9px; text-align:center; }
/* sticky save bar */
.coset-savebar {
  position: sticky; bottom: 8px; z-index: 6; margin-top: 2px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px;
  background: color-mix(in oklch, var(--surface) 86%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: 0 6px 20px -12px rgba(2,6,23,.4);
}
.coset-save-hint { font-size:13px; color:var(--text-3); display:flex; align-items:center; gap:7px; }

.tab-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-3);
  min-width: max-content;
}
/* Lifecycle track separator — marks where the fulfilment track hands off to
   billing, and billing to closed, in the orders tab strip. */
.tab-track-sep { width: 1px; height: 16px; background: var(--color-border, #e3e6ea); margin: 0 7px; flex-shrink: 0; align-self: center; }
/* Lifecycle track tint — colours the three tab groups (fulfilment / billing /
   closed) so they read as distinct tracks even when inactive. Subtle bg + rounded
   top; the active tab keeps its accent underline + per-stage colour (untinted). */
.tab-btn.tab-track-open:not(.active),
.tab-btn.tab-track-billing:not(.active),
.tab-btn.tab-track-closed:not(.active)   { border-radius: 5px 5px 0 0; }
.tab-btn.tab-track-open:not(.active)     { background: color-mix(in oklch, #2563EB 9%, transparent); }
.tab-btn.tab-track-billing:not(.active)  { background: color-mix(in oklch, #16A34A 10%, transparent); }
.tab-btn.tab-track-closed:not(.active)   { background: color-mix(in oklch, #64748B 11%, transparent); }
.tab-btn.tab-track-open:not(.active):hover    { background: color-mix(in oklch, #2563EB 17%, transparent); }
.tab-btn.tab-track-billing:not(.active):hover { background: color-mix(in oklch, #16A34A 18%, transparent); }
.tab-btn.tab-track-closed:not(.active):hover  { background: color-mix(in oklch, #64748B 19%, transparent); }

.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.tab-btn:hover { color: var(--text); }

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: var(--weight-semi);
}

/* Nav-tabs (e.g. Back-Orders, Offline Queue on the Orders tab strip)
   take you off the page rather than filter the current list. Distinguish
   them with a left divider so the user sees "this is a different thing"
   before they click. */
.tab-btn-nav {
  margin-left: 4px;
  padding-left: 16px;
  position: relative;
}
.tab-btn-nav::before {
  content: '';
  position: absolute;
  left: 0;
  top: 30%;
  bottom: 30%;
  width: 1px;
  background: var(--border);
}
.tab-btn-nav:first-of-type {
  margin-left: 12px;
}

.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background: var(--surface-3);
  color: var(--text-2);
  border-radius: var(--r-full);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
}
.tab-btn.active .tab-badge {
  background: var(--accent);
  color: white;
}

/* Lifecycle-color overlay — when a .tab-btn ALSO has a .tab-stage-* class,
   it adopts the stage color for hover/active state + colored badge tint.
   See the lpv2 blueprint at the end of this file for stage tokens. */
.tab-btn[class*="tab-stage-"]:hover { color: var(--tab-color, var(--text)); }
.tab-btn[class*="tab-stage-"] .tab-badge {
  background: var(--tab-soft, var(--surface-3));
  color: var(--tab-color, var(--text-2));
}
.tab-btn[class*="tab-stage-"].active {
  color: var(--tab-color, var(--accent));
  border-bottom-color: var(--tab-color, var(--accent));
}
.tab-btn[class*="tab-stage-"].active .tab-badge {
  background: var(--tab-color, var(--accent));
  color: #fff;
}

/* ===========================================================================
   17. Toast
   =========================================================================== */
.toast-container {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
  max-width: calc(100vw - var(--sp-10));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  min-width: 280px;
  max-width: 400px;
  pointer-events: auto;
  animation: toast-in var(--t-norm) ease-out;
  position: relative;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.toast.toast-success { border-left: 3px solid var(--success); }
.toast.toast-warning { border-left: 3px solid var(--warning); }
.toast.toast-error,
.toast.toast-danger  { border-left: 3px solid var(--danger); }
.toast.toast-info    { border-left: 3px solid var(--info); }

.toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.toast-success .toast-icon { color: var(--success); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-error .toast-icon,
.toast-danger .toast-icon { color: var(--danger); }
.toast-info .toast-icon { color: var(--info); }

.toast-content { flex: 1; min-width: 0; }

.toast-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text);
  letter-spacing: -0.01em;
}

.toast-msg {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-top: 2px;
  line-height: var(--leading-snug);
}

.toast-close {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--text-3);
  cursor: pointer;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  margin-left: var(--sp-2);
  transition: background var(--t-fast), color var(--t-fast);
}
.toast-close:hover { background: var(--surface-hover); color: var(--text); }

/* Star / pin favourites — Phase 5 Step 2.3 ────────────────────────
   Star button on detail pages + sidebar Pinned section. */
.pin-star-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  width: 36px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-3);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pin-star-btn:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent);
}
.pin-star-btn.is-pinned {
  color: #f59e0b;
  border-color: color-mix(in oklch, #f59e0b 40%, var(--border));
  background: color-mix(in oklch, #f59e0b 8%, transparent);
}
.pin-star-btn.is-pinned:hover { color: #f59e0b; border-color: #f59e0b; transform: scale(1.05); }

/* Sidebar Pinned / Recent sections — compact list */
.nav-pins {
  margin-bottom: var(--sp-1);
  padding-bottom: var(--sp-1);
  border-bottom: 1px solid var(--border);
}
.nav-pins .nav-section-hdr {
  padding: 4px var(--sp-3) 2px;
  font-size: 12px;
}
.nav-pin-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--sp-3);
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--text-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.nav-pin-item:hover { background: var(--surface-hover); color: var(--text); }
.nav-pin-icon { font-size: 12px; flex-shrink: 0; width: 14px; text-align: center; opacity: 0.8; }
.nav-pin-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar.collapsed .nav-pin-label,
.sidebar.collapsed .nav-pins .nav-section-hdr { display: none; }

/* Saved views — Phase 5 Step 2.2 ──────────────────────────────────
   Chip row above the filter bar showing user's saved filter combinations. */
.saved-views-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 0 4px;
  margin-bottom: 8px;
}
.saved-view-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  /* Square-ish chips (was r-full / pill shape). Matches new design pref. */
  border-radius: 5px;
  font-size: var(--text-xs);
  cursor: pointer;
  color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.saved-view-chip:hover { background: var(--surface-hover); border-color: var(--accent); }
.saved-view-chip-star { color: var(--text-3); font-size: 12px; }
.saved-view-chip-star:empty { display: none; }
.saved-view-chip-label { font-weight: var(--weight-medium); }
.saved-view-chip-count {
  color: var(--text-3); font-weight: 400; font-size: var(--text-xs);
  margin-left: 2px;
}
/* Preset chips are slightly muted to distinguish from user-saved ones */
.saved-view-chip-preset {
  background: var(--surface-2, var(--surface));
}
.saved-view-chip-preset .saved-view-chip-star {
  color: #F59E0B;  /* amber star for starred presets */
}
.saved-view-chip-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border-radius: var(--r-full);
  color: var(--text-3);
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.saved-view-chip:hover .saved-view-chip-del { opacity: 1; }
.saved-view-chip-del:hover { background: color-mix(in oklch, var(--danger) 15%, transparent); color: var(--danger); }
.saved-view-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.saved-view-save-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Quick-create FAB — Phase 5 Step 2.1 ─────────────────────────────
   Floating action button bottom-right of every page. Hidden during setup
   wizard via body.setup-mode + when not authenticated (handled in JS). */
.quick-fab {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: white;
  border: none;
  display: none;   /* hidden by default; .authed body class reveals it */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.4), 0 4px 8px -4px rgba(0,0,0,0.2);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  z-index: var(--z-sticky, 50);
}
body.authed .quick-fab { display: flex; }
body.authed.setup-mode .quick-fab { display: none; }
/* Per-user opt-out via Settings → Preferences */
body.no-quick-fab .quick-fab,
body.no-quick-fab .quick-fab-menu { display: none !important; }

/* Coaching / onboarding per-user opt-outs — Settings → Personal / Coaching.
   helpTip(), glossary, and aiSmartSuggestions also early-return on the JS side
   so future renders skip the markup entirely; these rules hide anything that
   was already painted before the toggle flipped. */
body.no-help-tips .help-tip,
body.no-help-tips .help-tip-pop { display: none !important; }
body.no-glossary .gloss { all: unset; }
body.no-glossary .gloss-pop { display: none !important; }
body.no-smart-suggestions .ai-smart-suggestions { display: none !important; }

/* Personal / Coaching tab toggles */
.personal-section { margin-bottom: var(--sp-4); }
.personal-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.personal-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-2);
  cursor: pointer;
}
.personal-toggle:hover { background: var(--surface-3, var(--surface-2)); }
.personal-toggle-text { flex: 1; min-width: 0; }
.personal-toggle-title { font-weight: var(--weight-semi); font-size: 14px; color: var(--text); }
.personal-toggle-desc { font-size: 13px; color: var(--text-3); margin-top: 2px; line-height: 1.45; }

/* Switch (re-used pattern; safe to define here even if duplicated elsewhere) */
.personal-toggle .switch { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; }
.personal-toggle .switch input { opacity: 0; width: 0; height: 0; }
.personal-toggle .switch-slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--color-border);
  border-radius: 999px;
  transition: background .15s ease;
}
.personal-toggle .switch-slider::before {
  content: ''; position: absolute;
  width: 16px; height: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.personal-toggle .switch input:checked + .switch-slider { background: var(--accent); }
.personal-toggle .switch input:checked + .switch-slider::before { transform: translateX(16px); }
.personal-toggle .switch input:focus-visible + .switch-slider {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.quick-fab svg { width: 24px; height: 24px; transition: transform var(--t-norm); }
.quick-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(0,0,0,0.45), 0 6px 12px -6px rgba(0,0,0,0.25); background: color-mix(in oklch, var(--accent) 90%, white); }
.quick-fab.open svg { transform: rotate(45deg); }
.quick-fab.open { background: var(--text); }

.quick-fab-menu {
  position: fixed;
  bottom: calc(var(--sp-5) + 70px);
  right: var(--sp-5);
  width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.35), 0 8px 16px -8px rgba(0,0,0,0.15);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 2px;
  z-index: var(--z-sticky, 50);
  animation: quick-fab-pop 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: bottom right;
}
.quick-fab-menu.open { display: flex; }
@keyframes quick-fab-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.quick-fab-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text);
  width: 100%;
  transition: background var(--t-fast);
}
.quick-fab-item:hover { background: var(--surface-hover); }
.quick-fab-item-icon { font-size: 18px; flex-shrink: 0; }
.quick-fab-item-label { flex: 1; font-weight: var(--weight-medium); }
.quick-fab-item-kbd {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--text-3);
  flex-shrink: 0;
}

/* Menu also follows the authed/setup-mode rules */
body.setup-mode .quick-fab-menu,
body:not(.authed) .quick-fab-menu { display: none !important; }

/* Mobile: bring FAB closer to thumb */
@media (max-width: 600px) {
  .quick-fab { bottom: var(--sp-4); right: var(--sp-4); width: 52px; height: 52px; }
  .quick-fab-menu { bottom: calc(var(--sp-4) + 64px); right: var(--sp-4); }
}

/* Save-state indicator — Phase 5 Step 1.8 ─────────────────────────
   Small inline pill embedded in edit-form headers showing whether the user's
   changes are saved. Used by saveState.show() / saveState.attach(). */
.save-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 3px 8px;
  border-radius: var(--r-sm);
  line-height: 1;
  letter-spacing: 0.02em;
  transition: background var(--t-fast), color var(--t-fast), opacity var(--t-fast);
  white-space: nowrap;
}
.save-state-idle   { opacity: 0; pointer-events: none; }
.save-state-dirty  { background: color-mix(in oklch, var(--color-warning,#f59e0b) 15%, transparent); color: var(--color-warning,#a16207); }
.save-state-saving { background: var(--surface-2); color: var(--text-2); }
.save-state-saved  { background: color-mix(in oklch, var(--color-success,#16a34a) 15%, transparent); color: var(--color-success,#15803d); }
.save-state-error  { background: color-mix(in oklch, var(--danger) 15%, transparent); color: var(--danger); }

/* Undo variant — Phase 5 Step 1.6 ─────────────────────────────────
   Adds an Undo button + bottom countdown bar. Toast stays 10s by default
   instead of the usual 4s so the user has time to react. */
.toast-undo { position: relative; overflow: hidden; padding-bottom: 14px; }
.toast-undo-btn {
  flex-shrink: 0;
  margin-left: var(--sp-2);
  padding: 4px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-weight: var(--weight-semi);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.toast-undo-btn:hover:not(:disabled) {
  background: color-mix(in oklch, var(--accent) 12%, var(--surface));
  border-color: var(--accent);
}
.toast-undo-btn:disabled { cursor: progress; opacity: 0.6; }
.toast-undo-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: color-mix(in oklch, var(--accent) 12%, transparent);
}
.toast-undo-progress-bar {
  height: 100%;
  width: 100%;
  background: var(--accent);
}

/* ===========================================================================
   19. Command palette
   =========================================================================== */
.cmd-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
  z-index: var(--z-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity 160ms ease-out, visibility 160ms;
}
.cmd-backdrop.open { opacity: 1; visibility: visible; }
.cmd-backdrop.open {
  opacity: 1;
  visibility: visible;
}

.cmd-palette {
  position: fixed;
  top: 14vh;
  left: 50%;
  transform: translateX(-50%) translateY(-12px) scale(0.98);
  width: min(640px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.10);
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 180ms,
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 64vh;
}
.cmd-palette.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

.cmd-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
}
.cmd-search svg { flex-shrink: 0; }

.cmd-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--text);
  outline: none;
  font-family: var(--font-sans);
  padding: 4px 0;
}
.cmd-input::placeholder { color: var(--text-3); }

.cmd-esc {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

.cmd-results {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}

.cmd-result-group-title,
.cmd-section-header {
  padding: 8px 12px 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  background: transparent;
}
/* Centered helper used for "Searching…" + empty messages */
.cmd-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  color: var(--text-3);
  font-size: var(--text-sm);
}
/* Visual separator between sections */
.cmd-section-header + .cmd-section-header { display: none; }
.cmd-results .cmd-section-header:not(:first-child) {
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* Both class names used in the codebase — keep them in sync */
.cmd-result,
.cmd-result-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast);
}
.cmd-result:hover,
.cmd-result.selected,
.cmd-result-item:hover,
.cmd-result-item.focused {
  background: var(--accent-ring, oklch(70% 0.12 230 / 0.10));
}
.cmd-result.selected .cmd-result-title,
.cmd-result-item.focused .cmd-result-title {
  color: var(--accent);
}

.cmd-result-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-size: 14px;
  line-height: 1;
}
.cmd-result-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cmd-result-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.cmd-result-sub {
  font-size: var(--text-xs);
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.cmd-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.cmd-footer-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-2xs);
  color: var(--text-3);
}

.cmd-footer-item kbd,
kbd {
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  padding: 1px 5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
}

/* ===========================================================================
   20. Keyboard shortcuts overlay
   =========================================================================== */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-norm), visibility var(--t-norm);
  backdrop-filter: blur(4px);
}
.shortcuts-overlay.open {
  opacity: 1;
  visibility: visible;
}

.shortcuts-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  width: min(640px, calc(100vw - 32px));
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shortcuts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
}

.shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  padding: var(--sp-5);
}
@media (max-width: 640px) {
  .shortcuts-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
}

.shortcut-group-title {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--sp-3);
}

.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.shortcut-row:last-child { border: none; }

.shortcut-desc { color: var(--text-2); }
.shortcut-keys { display: inline-flex; gap: var(--sp-1); }

/* ===========================================================================
   21. Login overlay
   =========================================================================== */
.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: var(--z-toast);
  display: none;
  place-items: center;
  padding: var(--sp-5);
  background-image:
    radial-gradient(ellipse at top left, var(--accent-soft) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, var(--purple-soft) 0%, transparent 50%);
}
.login-overlay.show,
.login-overlay.open { display: grid; }

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
}

.login-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-4);
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: white;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-md);
}

.login-title {
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-1);
}

.login-sub {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-3);
  margin-bottom: var(--sp-6);
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-bottom: var(--sp-4);
}
.login-field label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  color: var(--text-2);
}

.login-error {
  font-size: var(--text-xs);
  color: var(--danger-text);
  background: var(--danger-soft);
  border: 1px solid var(--danger-ring);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  display: none;
  margin-bottom: var(--sp-3);
}
.login-error:not(:empty) { display: block; }

.login-submit { width: 100%; height: 42px; font-size: var(--text-base); }

/* ===========================================================================
   22. Skeleton loader
   =========================================================================== */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--surface-3) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
}

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-row {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3);
}
.skeleton-line {
  height: 12px;
  flex: 1;
}
.skeleton-line.short { flex: 0.5; }

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: var(--r-full);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================================================================
   23. Empty state
   =========================================================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  gap: var(--sp-2);
}

.empty-state-icon {
  width: 44px;
  height: 44px;
  background: var(--surface-2);
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  color: var(--text-3);
  margin-bottom: var(--sp-1);
}

.empty-state-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  color: var(--text);
  margin: 0;
}

.empty-state-desc {
  font-size: var(--text-sm);
  color: var(--text-3);
  max-width: 420px;
  line-height: var(--leading-relaxed);
}

/* ===========================================================================
   44. Feature tour overlay — Phase 5 Step 1.4
   30-second guided intro. Backdrop dims everything; callout floats next to
   the highlighted element. Highlighted element gets a glowing outline.
   =========================================================================== */
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}
.tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(5px) saturate(1.05);
  -webkit-backdrop-filter: blur(5px) saturate(1.05);
  pointer-events: auto;
  animation: tour-fade 0.3s ease-out;
}
@keyframes tour-fade { from { opacity: 0; } to { opacity: 1; } }

.tour-highlight {
  position: relative;
  z-index: 2001;
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px color-mix(in oklch, var(--accent) 25%, transparent),
              0 0 30px color-mix(in oklch, var(--accent) 40%, transparent);
  border-radius: var(--r-md);
  transition: outline 0.2s, box-shadow 0.2s;
}

.tour-callout {
  position: fixed;
  z-index: 2002;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.35), 0 8px 16px -8px rgba(0,0,0,0.15);
  padding: var(--sp-4) var(--sp-5);
  pointer-events: auto;
  animation: tour-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tour-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tour-callout::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.tour-callout[data-arrow="left"]::before  { left: -8px; top: 50%; margin-top: -7px; }
.tour-callout[data-arrow="top"]::before   { top: -8px; left: 50%; margin-left: -7px; }
.tour-callout[data-arrow="top-right"]::before { top: -8px; right: 28px; }

.tour-callout-step {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-2);
}
.tour-callout-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.tour-callout-icon {
  font-size: 24px;
  line-height: 1;
}
.tour-callout-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  margin: 0;
  color: var(--text);
}
.tour-callout-body {
  font-size: var(--text-sm);
  color: var(--text-2);
  margin: 0 0 var(--sp-3);
  line-height: var(--leading-relaxed);
}
.tour-callout-progress {
  display: flex;
  gap: 6px;
  margin-bottom: var(--sp-3);
}
.tour-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--border);
  transition: background 0.2s;
}
.tour-progress-dot.done { background: var(--accent); }
.tour-callout-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* On phones, callout positions absolutely at the bottom of the viewport */
@media (max-width: 600px) {
  .tour-callout {
    position: fixed !important;
    bottom: 16px !important;
    top: auto !important;
    left: 16px !important;
    right: 16px !important;
    width: auto;
    max-width: none;
  }
  .tour-callout::before { display: none; }
}

/* Coaching variant — bigger icon, example chip, CTA buttons.  Used by the
   emptyState() helper (Phase 5 Step 1.3) on first-visit "Create your first X"
   placeholders. Distinct from the small "no rows match filter" empty state. */
.empty-state-coach {
  padding: var(--sp-7) var(--sp-5);
  gap: var(--sp-3);
}
.empty-state-icon-lg {
  width: 64px;
  height: 64px;
  background: color-mix(in oklch, var(--accent) 10%, var(--surface-2));
  color: var(--accent);
  font-size: 28px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  margin-bottom: var(--sp-2);
}
.empty-state-example {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--text-2);
  max-width: 100%;
  white-space: normal;
}
.empty-state-actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

/* ===========================================================================
   24. Accordion
   =========================================================================== */
.accordion-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-2);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text);
  transition: background var(--t-fast);
}
.accordion-header:hover { background: var(--surface-2); }

.accordion-body {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  display: none;
}
.accordion-item.open .accordion-body { display: block; }

.accordion-item.open .accordion-chevron { transform: rotate(180deg); }

.accordion-chevron {
  width: 16px; height: 16px;
  color: var(--text-3);
  transition: transform var(--t-fast);
}

/* ===========================================================================
   25. Utilities
   =========================================================================== */
.text-2xs { font-size: var(--text-2xs); }
.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-base{ font-size: var(--text-base); }
.text-md  { font-size: var(--text-md); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

.fw-regular { font-weight: var(--weight-regular); }
.fw-med     { font-weight: var(--weight-medium); }
.fw-medium  { font-weight: var(--weight-medium); }
.fw-semi    { font-weight: var(--weight-semi); }
.fw-bold    { font-weight: var(--weight-bold); }

.text-muted   { color: var(--text-3); }
.text-default { color: var(--text); }
.text-accent  { color: var(--accent); }
.text-success { color: var(--success-text); }
.text-warning { color: var(--warning-text); }
.text-danger  { color: var(--danger-text); }
.text-info    { color: var(--info-text); }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-center { text-align: center; }

/* Higher-specificity overrides so utility classes win against the base
   `.data-table th { text-align: left }` rule. Without this, putting
   `class="text-right"` on a header is silently ignored — headers misalign
   with right-aligned numeric cells (the Qty / Price / Balance pattern). */
.data-table th.text-right,  .data-table td.text-right,
table th.text-right,        table td.text-right        { text-align: right;  }
.data-table th.text-left,   .data-table td.text-left,
table th.text-left,         table td.text-left         { text-align: left;   }
.data-table th.text-center, .data-table td.text-center,
table th.text-center,       table td.text-center       { text-align: center; }
/* Numeric cells: tabular figures so digits line up vertically across rows */
.data-table td.text-right,  .data-table th.text-right,
table td.text-right,        table th.text-right { font-variant-numeric: tabular-nums; }

.bg-surface    { background: var(--surface); }
.bg-surface-2  { background: var(--surface-2); }
.bg-surface-3  { background: var(--surface-3); }

.border-0  { border: none; }
.border-1  { border: 1px solid var(--border); }
.rounded   { border-radius: var(--r-md); }
.rounded-lg{ border-radius: var(--r-lg); }
.rounded-xl{ border-radius: var(--r-xl); }

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }

.mb-1 { margin-bottom: var(--sp-1); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }

.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-5 { gap: var(--sp-5); }
.gap-6 { gap: var(--sp-6); }

.flex      { display: flex; }
.flex-col  { display: flex; flex-direction: column; }
.flex-row  { display: flex; flex-direction: row; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-1   { flex: 1; }
.flex-wrap{ flex-wrap: wrap; }

.grid    { display: grid; }
.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.divider {
  height: 1px;
  background: var(--border);
  margin: var(--sp-4) 0;
}

.font-mono { font-family: var(--font-mono); }
.tabular   { font-variant-numeric: tabular-nums; }

.text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hidden { display: none !important; }

/* ===========================================================================
   Finance Centre nav (two-level: group tabs + sub-pills)
   =========================================================================== */
.fin-nav-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-1);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  overflow: hidden;
}

.fn-group-tabs {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.fn-group-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.fn-group-tab:hover {
  background: var(--surface-hover);
  color: var(--text);
}
.fn-group-tab.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: var(--weight-semi);
}
.fn-group-icon { font-size: var(--text-base); line-height: 1; }

.fn-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
}

.fn-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px var(--sp-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--t-fast);
}
.fn-pill:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  color: var(--text);
}
.fn-pill.active {
  background: var(--accent-soft);
  color: var(--accent-text);
  border-color: var(--accent-soft-2);
  font-weight: var(--weight-semi);
}
.fn-pill-icon { font-size: var(--text-sm); line-height: 1; }

/* ===========================================================================
   Searchable select (combobox)
   =========================================================================== */
.searchable-select {
  position: relative;
  width: 100%;
}

.searchable-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  width: 100%;
  height: 32px;
  padding: 0 var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.searchable-select-trigger:hover {
  border-color: var(--border-strong);
}
.searchable-select-trigger:focus,
.searchable-select.open .searchable-select-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}

.ss-trigger-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  text-align: left;
  line-height: 1.2;
}
.ss-trigger-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
}
.ss-trigger-sub {
  font-size: var(--text-2xs);
  color: var(--text-3);
  margin-top: 2px;
}

.ss-chevron {
  flex-shrink: 0;
  color: var(--text-3);
  transition: transform var(--t-fast);
}
.searchable-select.open .ss-chevron { transform: rotate(180deg); }

.searchable-select-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-modal);
  display: none;
  flex-direction: column;
  max-height: 320px;
  overflow: hidden;
}
.searchable-select.open .searchable-select-panel { display: flex; }

.searchable-select-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  color: var(--text-3);
  flex-shrink: 0;
}
.searchable-select-search svg { flex-shrink: 0; }

.searchable-select-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  color: var(--text);
  outline: none;
  width: 100%;
  height: auto;
  padding: 0;
}
.searchable-select-search-input::placeholder { color: var(--text-3); }

.searchable-select-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.searchable-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
  width: 100%;
}
.searchable-select-option:hover,
.searchable-select-option.focused,
.searchable-select-option.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
}
/* Keyboard-active row gets a slightly stronger ring to distinguish it
   from a passive hover and to give the user a clear "what will Enter
   pick" affordance. */
.searchable-select-option.is-active {
  outline: 2px solid var(--accent, oklch(55% 0.18 248));
  outline-offset: -2px;
}
.searchable-select-option.is-selected {
  background: var(--accent-soft-2);
  color: var(--accent-text);
  font-weight: var(--weight-semi);
}
.searchable-select-option.is-selected.is-active {
  outline: 2px solid var(--accent, oklch(55% 0.18 248));
}

.ss-option-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.ss-option-main > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-option-main > span:last-child {
  margin-top: 2px;
}

.searchable-select-empty {
  padding: var(--sp-4);
  text-align: center;
  color: var(--text-3);
  font-size: var(--text-sm);
}

/* Custom inline rich-text editor */
.rte-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.rte-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.rte-toolbar button {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: background var(--t-fast);
}
.rte-toolbar button:hover { background: var(--surface-hover); color: var(--text); }
.rte-content {
  min-height: 120px;
  padding: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text);
  outline: none;
}
.rte-content:empty::before {
  content: attr(data-placeholder);
  color: var(--text-3);
}

.row-hover:hover { background: var(--surface-hover); }

.chip-code {
  display: inline-block;
  padding: 1px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);
}

/* ===========================================================================
   26. Offline indicator
   =========================================================================== */
body.offline-mode::before {
  content: 'Offline — showing cached data';
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--warning);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  text-align: center;
  padding: 4px 8px;
  z-index: var(--z-toast);
  letter-spacing: 0.02em;
}

/* ===========================================================================
   27. Responsive
   =========================================================================== */
@media (max-width: 1024px) {
  .app-layout { grid-template-columns: 1fr; }
  .app-layout:has(.sidebar.collapsed) { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform var(--t-norm);
    z-index: var(--z-overlay);
    box-shadow: var(--shadow-xl);
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay { display: none; }
  .sidebar.open ~ .sidebar-overlay { display: block; }
  .app-shell { grid-template-rows: var(--header-h) 1fr; }
  /* label hidden here → don't let the search grow into an empty pill */
  .header-search-btn { flex: 0 0 auto; min-width: 36px; width: 36px; max-width: none; margin: 0; padding: 0; justify-content: center; }
  .header-search-btn .search-label { display: none; }
  .header-kbd { display: none; }
}

@media (max-width: 768px) {
  .app-main { padding: var(--sp-3); }
  .page-title { font-size: var(--text-2xl); }
  .page-header { gap: var(--sp-3); }
  .page-actions { width: 100%; }
  .page-actions .btn:not(.btn-icon) { flex: 1; }
  .kpi-row,
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .kpi-value { font-size: var(--text-2xl); }
  .header-user-name { display: none; }
  .breadcrumb-item:not(.breadcrumb-current) { display: none; }
  .breadcrumb-sep { display: none; }
  .data-table th,
  .data-table td { padding: var(--sp-2) var(--sp-3); }
  .modal { width: calc(100vw - 16px); border-radius: var(--r-lg); }
  .toast-container { right: var(--sp-3); left: var(--sp-3); bottom: var(--sp-3); }
  .toast { min-width: 0; max-width: none; }
}

@media (max-width: 480px) {
  .filter-bar { padding: var(--sp-2); }
  .filter-bar select { min-width: 100px; flex: 1; }
  .card { padding: var(--sp-4); }
  .modal-body { padding: var(--sp-4); }
  .modal-header,
  .modal-footer { padding: var(--sp-3) var(--sp-4); }
  .kpi-card { padding: var(--sp-4); }
  .kpi-value { font-size: var(--text-xl); }
  .header-right { gap: var(--sp-1); }
}

/* ===========================================================================
   27b. New Order — keyboard-driven full-page form
   =========================================================================== */
.order-new-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  /* Bleed to the viewport edges for max items-table width */
  margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 0;
  padding: var(--sp-3) var(--sp-4) calc(64px + var(--sp-3));  /* leave room for sticky totalbar */
  min-height: calc(100vh - 56px);
}

/* ── Top bar ───────────────────────────────────────────── */
.onv2-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.onv2-title-block { flex: 0 0 auto; }
.onv2-title-block .breadcrumb-mini {
  font-size: var(--text-xs);
  color: var(--text-3);
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: 2px;
}
.onv2-title-block .breadcrumb-mini a { color: var(--text-3); text-decoration: none; }
.onv2-title-block .breadcrumb-mini a:hover { color: var(--accent); }
.onv2-title-block .breadcrumb-mini .sep { color: var(--text-4); }
.onv2-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
  line-height: 1.1;
}
.onv2-kbd-hint {
  flex: 1;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  flex-wrap: wrap;
}
.onv2-kbd-hint kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-2);
}
.onv2-actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; }

/* ── Context strip: customer + shipping inline ─────────── */
.onv2-context {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}
.onv2-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onv2-field .form-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin: 0;
  font-weight: 600;
}
.onv2-field-wide { grid-column: span 2; }
.onv2-field-narrow { grid-column: span 1; }
.onv2-context .searchable-select { width: 100%; }

/* ── Search row ────────────────────────────────────────── */
.onv2-search-row {
  position: relative;
  padding-top: var(--sp-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap; /* keep search + Browse Catalogue on one line */
}
.onv2-search-wrap {
  /* Let the search bar grow to fill whatever space is left after the Browse
     Catalogue button — no max-width cap, so on wider monitors the input
     stretches the full row width. min-width: 0 lets it shrink on narrow
     viewports without overflowing. */
  flex: 1 1 auto;
  min-width: 0;
}
/* Camera scan + Browse Catalogue buttons — sized to match the search input's
   38px height so the entire row reads as one connected unit. The camera
   button is a square icon-only button; Browse Catalogue is icon + label. */
.onv2-scan-btn,
.onv2-browse-cat-btn {
  flex: 0 0 auto;
  height: 38px;
  margin-left: 0 !important;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.onv2-scan-btn { padding: 0 12px; }
/* Photo-identify button — same shape as the barcode scan button but
   accent-tinted so the user can tell the two camera buttons apart at
   a glance. The sparkles icon signals "this is the AI one". */
.onv2-vision-btn {
  color: var(--accent, #2563eb) !important;
  border-color: color-mix(in oklch, var(--accent, #2563eb) 30%, var(--color-border, var(--border))) !important;
  background: color-mix(in oklch, var(--accent, #2563eb) 6%, var(--color-surface, var(--surface))) !important;
}
.onv2-vision-btn:hover {
  background: color-mix(in oklch, var(--accent, #2563eb) 12%, var(--color-surface, var(--surface))) !important;
  border-color: var(--accent, #2563eb) !important;
}
@media (max-width: 720px) {
  /* Tablets / phones — let the search bar take the rest of the row and
     wrap the button under it if there's truly not enough room. */
  .onv2-search-row { flex-wrap: wrap; }
  .onv2-search-wrap { flex: 1 1 100%; max-width: none; }
}
.onv2-search-wrap input.search-input {
  height: 38px;
  font-size: var(--text-base);
}
.onv2-search-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  z-index: 100;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  max-height: 340px;
  overflow: auto;
}
.onv2-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 6px var(--sp-3);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.onv2-result:last-child { border-bottom: none; }
.onv2-result.is-active { background: var(--accent-ring); color: var(--text); }
.onv2-result-main { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; flex: 1; }
.onv2-result-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onv2-result-price { flex-shrink: 0; font-weight: 600; }
.onv2-cust-price-star { color: var(--accent); font-weight: bold; margin-right: 2px; }

/* ── Wide items table ──────────────────────────────────── */
.onv2-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* Horizontal-scroll fallback — if the table needs more width than the
     panel allows (e.g. narrow viewport + open sidebar), let the user
     scroll instead of clipping the rightmost columns. The inline picker
     dropdown is position:fixed so it still escapes this container. */
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface);
}
.onv2-items-table {
  width: 100%;
  /* border-collapse:separate so the per-cell vertical dividers below
     render as a clean 1-pixel line instead of merging with the row
     border. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  table-layout: auto;
}
/* Grid lines — vertical between every column, horizontal between every
   row. Header row gets a heavier bottom border to separate from body. */
.onv2-items-table thead th,
.onv2-items-table tbody td,
.onv2-items-table tfoot td {
  border-right: 1px solid var(--color-border, var(--border));
}
.onv2-items-table thead th:last-child,
.onv2-items-table tbody td:last-child,
.onv2-items-table tfoot td:last-child {
  border-right: none;
}

/* ── Product cell — thumbnail + name ─────────────────────────────── */
.onv2-prod-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.onv2-prod-thumb {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--color-border, var(--border));
  object-fit: cover;
  background: var(--color-surface-2, var(--surface-2));
}
.onv2-prod-thumb-empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-3, var(--text-3));
}
.onv2-prod-thumb-empty svg { width: 14px; height: 14px; opacity: 0.6; }
.onv2-prod-name {
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}
/* Default styling for inputs inside items rows — keep them tight numeric-style.
   Width is set per-column below (qty: 64px, price: 80px, disc: 56px).
   padding-right: 0 so the right-aligned digit sits flush against the input's
   right border. The input border itself sits at the cell's padding-right
   from the cell's right edge, which matches the header — column header
   and value below it line up vertically.
   !important needed to beat the base .form-input-sm rule which uses
   !important itself. */
.onv2-items-table tbody input.form-input-sm {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 4px 0 4px 6px !important;
}
.onv2-items-table thead th {
  background: var(--surface-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
  text-align: left;
  /* Tight horizontal padding so all 15 columns (incl. Customer + Action)
     fit without horizontal scroll on standard 1280px-class viewports. */
  padding: 8px 5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.onv2-items-table tbody td {
  padding: 6px 5px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
/* First column still needs a bit of left padding to look balanced */
.onv2-items-table thead th:first-child,
.onv2-items-table tbody td:first-child { padding-left: 8px; }
.onv2-items-table thead th:last-child,
.onv2-items-table tbody td:last-child  { padding-right: 8px; }
.onv2-items-table tbody tr:last-child td { border-bottom: none; }
.onv2-items-table tbody tr:hover { background: var(--surface-2); }
.onv2-items-table tbody tr.onv2-flash { animation: onv2-flash 0.4s ease-out; }
@keyframes onv2-flash { 0% { background: var(--accent-ring); } 100% { background: transparent; } }
.onv2-empty {
  text-align: center;
  color: var(--text-3);
  padding: var(--sp-6) 0 !important;
}

/* ── Inline product picker (tfoot row) ──────────────────────────────
 * Sticky-feeling row at the bottom of the items table. Stays visible
 * regardless of how many items the order has; lets sales reps pick the
 * next product without scrolling back to the top search bar. */
.onv2-items-table tfoot td.onv2-inline-picker-cell {
  position: relative;          /* anchor for the dropdown */
  padding: 0 !important;
  background: var(--surface-2);
  border-top: 1px solid var(--color-border);
}
.onv2-inline-picker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
}
.onv2-inline-picker-icon {
  font-size: 16px;
  color: var(--color-primary);
  width: 20px;
  text-align: center;
}
.onv2-inline-picker-input {
  flex: 1;
  border: 1px solid transparent;
  background: transparent;
  padding: 6px 8px;
  font-size: var(--text-sm);
  color: var(--text-1);
  border-radius: 6px;
  outline: none;
}
.onv2-inline-picker-input:focus {
  background: var(--color-surface, var(--surface));
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.onv2-inline-picker-input::placeholder {
  color: var(--text-3);
}
.onv2-inline-picker-hint {
  white-space: nowrap;
  padding-right: 4px;
}
.onv2-inline-results {
  /* position:fixed so it escapes the table-wrap's overflow:hidden and
     can float freely above the table. left/width/bottom are set
     dynamically by noInlinePositionDropdown(). */
  position: fixed;
  max-height: 360px;
  overflow-y: auto;
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
  z-index: 200;
}

/* ── Draft auto-save indicator (top bar) ──────────────────────────── */
.onv2-save-indicator {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-xs);
  color: var(--text-3);
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.onv2-save-indicator.is-flash {
  color: var(--color-success);
  background: oklch(75% 0.18 145 / 0.12);
  border-color: oklch(75% 0.18 145 / 0.3);
}

/* ── Auto-resume banner ───────────────────────────────────────────── */
.onv2-resume-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-3);
  background: oklch(95% 0.05 250 / 0.6);
  border: 1px solid oklch(75% 0.12 250 / 0.4);
  border-radius: var(--radius-md);
  animation: onv2-resume-slide-in 0.3s ease-out;
}
@keyframes onv2-resume-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.onv2-resume-icon { font-size: 24px; }
.onv2-resume-body { flex: 1; }
.onv2-resume-title { font-weight: var(--weight-semi); color: var(--text-1); }
.onv2-resume-actions { display: flex; gap: 6px; align-items: center; }
/* Column sizing — every column has a generous min-width so the contents get
   breathing room even on wide screens; the PRODUCT column absorbs whatever
   space is left. `width: 1%` + `min-width` is the trick — at 1%, the cell
   wants to shrink, but min-width forces it to stay at least that wide, and
   any remaining space falls through to the `width: auto` PRODUCT column. */
.onv2-col-num,
.onv2-col-code,
.onv2-col-qty,
.onv2-col-price,
.onv2-col-disc,
.onv2-col-disc-amt,
.onv2-col-vat,
.onv2-col-vat-amt,
.onv2-col-line,
.onv2-col-total,
.onv2-col-act,
.onv2-col-check,
.onv2-col-stock,
.onv2-col-margin,
.onv2-col-default,
.onv2-col-cust {
  width: 1%;
  white-space: nowrap;
}
/* Per-column minimums — tuned so the full 16-col items table fits in the
   New Order builder's main panel (~1018px on a 1440 viewport with the
   300px sidebar) WITHOUT a horizontal scrollbar. Numeric input cells use
   tighter mins than before, the auxiliary cells (Default/Customer/Margin)
   collapse to icon/dash widths, and Product remains the lone flex column.
   Re-tuned 2026-05-23 from "1432px wants scroll" → "986px fits clean". */
.onv2-col-check     { min-width: 28px; width: 28px; }
.onv2-col-num       { min-width: 24px; width: 24px; }
.onv2-col-code      { min-width: 64px; }
.onv2-col-stock     { min-width: 52px; }
.onv2-col-qty       { min-width: 52px; }
.onv2-col-price     { min-width: 76px; }
.onv2-col-default   { min-width: 56px; }
.onv2-col-disc      { min-width: 48px; }
.onv2-col-disc-amt  { min-width: 64px; }
.onv2-col-vat       { min-width: 40px; }
.onv2-col-vat-amt   { min-width: 56px; }
.onv2-col-margin    { min-width: 60px; }
.onv2-col-line      { min-width: 64px; }
.onv2-col-total     { min-width: 76px; }
.onv2-col-cust      { min-width: 52px; }
.onv2-col-act       { min-width: 32px; width: 32px; }
.onv2-col-title {
  width: auto; /* this is the flex column — takes all remaining space */
  min-width: 140px;
  white-space: normal;
}
/* Column alignment — number columns get right-aligned headers + cells so the
   inputs inside (which are right-aligned via the rule below) line up with
   the header label above them. Without this, headers default to text-align:
   left while inputs are flush right, leaving the column visually misaligned. */
.onv2-col-num     { text-align: center; color: var(--text-3); }
.onv2-col-stock,
.onv2-col-qty,
.onv2-col-price,
.onv2-col-default,
.onv2-col-disc,
.onv2-col-disc-amt,
.onv2-col-vat,
.onv2-col-vat-amt,
.onv2-col-margin,
.onv2-col-line,
.onv2-col-total   { text-align: right; font-variant-numeric: tabular-nums; }
.onv2-col-cust    { text-align: center; }
.onv2-col-act     { text-align: center; }
/* Tabular figures on the static text cells (Default £, VAT %, Line Net, Line
   Total) so columns of numbers line up vertically by decimal point. */
.onv2-col-default,
.onv2-col-vat,
.onv2-col-line,
.onv2-col-total { font-variant-numeric: tabular-nums; }
/* Inputs in number columns — auto-fit to value so 2.85 doesn't clip to
   2.8 and 15 doesn't clip to 1. field-sizing is Chrome 123+ / FF 121+ /
   Safari 17.4+. The min/max bounds keep small inputs clickable and
   prevent freak values from blowing out the column. Older browsers
   fall through to the fixed-width @supports block below. */
.onv2-col-qty   input,
.onv2-col-price input,
.onv2-col-disc  input,
.onv2-col-disc-amt input,
.onv2-qty-input,
.onv2-price-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: 6px;
  /* No internal right padding so the digit sits flush against the input's
     right border. The input border itself is at the cell's padding-right
     from the cell's right edge, which matches the header — column header
     and value below it line up. */
  padding-right: 0 !important;
  field-sizing: content;
  /* border-box (NOT content-box) keeps the input inside its cell. With
     content-box the inputs spilled into adjacent cells, so QTY visually
     overlapped UNIT £. */
  box-sizing: border-box;
}
.onv2-col-qty   input { width: 100%; min-width: 44px;  max-width: none; }
.onv2-col-price input { width: 100%; min-width: 64px;  max-width: none; }
.onv2-col-disc  input { width: 100%; min-width: 40px;  max-width: none; }
.onv2-col-disc-amt input { width: 100%; min-width: 52px; max-width: none; }
.onv2-qty-input,
.onv2-price-input    { width: auto; min-width: 32px; max-width: 110px; }
@supports not (field-sizing: content) {
  .onv2-col-qty   input { width: 52px;  min-width: 52px; }
  .onv2-col-price input { width: 72px;  min-width: 72px; }
  .onv2-col-disc  input { width: 44px;  min-width: 44px; }
  .onv2-col-disc-amt input { width: 56px; min-width: 56px; }
  .onv2-qty-input,
  .onv2-price-input   { width: 100%; }
}
/* Tighter side-padding on these auto-fit cells so the input + border
   isn't crowded by 20px of dead space on either side. The DISC pair
   (% + £) groups visually — extra right-padding on Disc £ separates
   it from VAT so the columns read as three distinct cells. */
.onv2-col-qty,
.onv2-col-price { padding-left: 6px; padding-right: 6px; }
.onv2-col-disc      { padding-left: 6px; padding-right: 4px; }
.onv2-col-disc-amt  { padding-left: 4px; padding-right: 14px; }
.onv2-col-vat       { padding-left: 14px; }
.onv2-disc-input::placeholder,
.onv2-disc-amt-input::placeholder { color: var(--text-3); opacity: 0.5; }

.btn-icon-x {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3);
  width: 26px; height: 26px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.btn-icon-x:hover { background: oklch(var(--err-base) 0.06); color: var(--color-error, #c0392b); border-color: var(--border); }

/* ── Sticky bottom totals bar ──────────────────────────── */
.onv2-totalbar {
  position: fixed;
  left: var(--sidebar-w, 256px);
  right: 0;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  z-index: 50;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
body:has(.sidebar.collapsed) .onv2-totalbar { left: 64px; }
.onv2-totalbar-left {
  display: flex; align-items: center; gap: var(--sp-2);
  flex-wrap: wrap;
}
.onv2-totalbar-right { display: flex; align-items: center; gap: var(--sp-3); }
.onv2-tb-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
}
.onv2-tb-value { font-weight: 600; font-size: var(--text-sm); }
.onv2-tb-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 var(--sp-2);
}
.onv2-tb-total-label { color: var(--text-2); }
.onv2-tb-total {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--accent);
}

/* Credit chip in total bar */
.onv2-credit-inline { display: flex; align-items: center; }
.onv2-credit-chip {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: var(--text-xs);
}
.onv2-credit-chip.is-over { border-color: var(--color-error, #c0392b); background: oklch(var(--err-base) 0.08); }
.onv2-credit-chip.is-hold { border-color: var(--color-error, #c0392b); }
.onv2-credit-bar {
  width: 80px;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
}
.onv2-credit-bar-fill { display: block; height: 100%; }
.onv2-credit-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.04em;
}
.onv2-credit-tag-error { background: oklch(var(--err-base) 0.15); color: var(--color-error, #c0392b); }

/* ── Defensive global rule for number inputs in table rows ──────────────
   Any <input type="number"> nested in a tbody row inherits border-box
   and a minimum 10px right padding so right-aligned digits ("100", "12.5")
   never kiss the input border, AND the input never spills past its cell
   to overlap the next column. Several legacy renderers in pages/*.js use
   inline styles like style="width:60px;padding:3px 6px" which is too
   tight for tabular digits — this rule corrects them without touching
   each renderer. Use !important on padding-right only (the minimum
   horizontal breathing room) — vertical and left padding stay at the
   inline value so layout-specific designs are preserved. */
table tbody input[type="number"] {
  box-sizing: border-box;
}
/* Default right-padding for number inputs inside tables that DO NOT supply a
   column-specific rule. Without !important so per-table rules can override —
   the original `!important` here trapped digits 10px from the cell edge while
   headers sat 8px from the cell edge, breaking column header/value alignment. */
table tbody input[type="number"]:not([style*="padding-right"]) {
  padding-right: 8px;
}

/* Small form-input variant used inside the context strip + items table */
.form-input-sm {
  height: 32px !important;
  padding: 4px 8px !important;
  font-size: var(--text-sm);
}

/* Narrower screens: stack the context strip and float the totalbar full width */
@media (max-width: 1100px) {
  .onv2-context { grid-template-columns: repeat(2, 1fr); }
  .onv2-field-wide { grid-column: span 2; }
  .onv2-totalbar { left: 0; }
  .onv2-kbd-hint { display: none; }
}
@media (max-width: 700px) {
  .order-new-v2 { padding: var(--sp-2); margin: 0; }
  .onv2-context { grid-template-columns: 1fr; }
  .onv2-field-wide { grid-column: span 1; }
}

/* ===========================================================================
   27c. Order Detail — dense items table (.oi-dense)
   Wins over the older .order-items-table rules via element-qualified selectors.
   =========================================================================== */
table.oi-dense {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--text-sm);
  table-layout: fixed;
}
table.oi-dense thead th {
  background: var(--surface-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.oi-dense thead th.oi-col-stock,
table.oi-dense thead th.oi-col-qty,
table.oi-dense thead th.oi-col-price,
table.oi-dense thead th.oi-col-default,
table.oi-dense thead th.oi-col-disc,
table.oi-dense thead th.oi-col-disc-amt,
table.oi-dense thead th.oi-col-vat,
table.oi-dense thead th.oi-col-vat-amt,
table.oi-dense thead th.oi-col-line,
table.oi-dense thead th.oi-col-total { text-align: right; }
table.oi-dense thead th.oi-col-cust,
table.oi-dense thead th.oi-col-menu { text-align: center; }
table.oi-dense tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.oi-dense tbody tr:last-child td { border-bottom: none; }
table.oi-dense tbody tr.oi-row:hover { background: var(--surface-2); }
table.oi-dense tbody tr.oi-row-saved { animation: oi-saved-flash 0.6s ease-out; }
@keyframes oi-saved-flash {
  0% { background: oklch(70% 0.18 145 / 0.18); }
  100% { background: transparent; }
}

/* Column widths — adjusted so Qty fits 4-digit values comfortably */
table.oi-dense .oi-col-check  { width: 32px; text-align: center; padding: 6px 4px; }
table.oi-dense .oi-col-num    { width: 28px; color: var(--text-3); text-align: center; padding: 6px 4px; }
table.oi-dense .oi-col-code   { width: 120px; }
table.oi-dense .oi-col-code a { color: var(--accent); text-decoration: none; font-size: var(--text-xs); }
table.oi-dense .oi-col-code a:hover { text-decoration: underline; }
table.oi-dense .oi-col-prod    { min-width: 220px; }
table.oi-dense .oi-col-stock   { width: 64px;  text-align: right; padding-right: 8px; }
table.oi-dense .oi-col-qty     { width: 84px;  text-align: right; }
table.oi-dense .oi-col-price   { width: 96px;  text-align: right; }
table.oi-dense .oi-col-default { width: 80px;  text-align: right; }
table.oi-dense .oi-col-disc    { width: 70px;  text-align: right; }
table.oi-dense .oi-col-disc-amt{ width: 80px;  text-align: right; color: var(--text-3); }
table.oi-dense .oi-col-vat     { width: 60px;  text-align: right; color: var(--text-3); }
table.oi-dense .oi-col-vat-amt { width: 80px;  text-align: right; color: var(--text-3); }
table.oi-dense .oi-col-line    { width: 90px;  text-align: right; color: var(--text-2); }
table.oi-dense .oi-col-total   { width: 96px;  text-align: right; }
table.oi-dense .oi-col-cust    { width: 110px; text-align: center; padding: 6px 4px; }
table.oi-dense .oi-col-menu    { width: 32px;  text-align: center; padding: 6px 4px; }
/* Right-align number inputs inside qty/price/disc/disc-amt cells. Input
   padding-right is 0 so the digit sits flush against the input's right
   border; the input border itself sits at the cell's padding-right (8px)
   from the cell's right edge — within 1-2px of where the header text sits,
   so the column reads cleanly aligned without any cell/header padding
   gymnastics. */
table.oi-dense .oi-col-qty input,
table.oi-dense .oi-col-price input,
table.oi-dense .oi-col-disc input,
table.oi-dense .oi-col-disc-amt input { text-align: right; padding-right: 0 !important; }

table.oi-dense .oi-name {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
}
table.oi-dense .oi-name:hover { color: var(--accent); }
table.oi-dense .oi-badge-cust {
  display: inline-block;
  color: var(--accent);
  font-size: 13px;
  margin-left: 4px;
  vertical-align: middle;
}
table.oi-dense .oi-subcat {
  display: inline-block;
  color: var(--text-3);
  font-size: 12px;
  margin-left: 8px;
  vertical-align: middle;
}
/* Inline-edit inputs — hide native spinners so digits are never clipped */
table.oi-dense .oi-input {
  width: 100%;
  height: 28px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: var(--text-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;        /* Firefox: remove spinner */
}
/* Chrome / Edge / Safari: remove the spinner buttons */
table.oi-dense .oi-input::-webkit-outer-spin-button,
table.oi-dense .oi-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
table.oi-dense .oi-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
table.oi-dense .oi-pct { font-size: 12px; }

table.oi-dense .oi-cust-btn {
  height: 24px;
  padding: 2px 6px;
  font-size: var(--text-xs);
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--text-2);
  white-space: nowrap;
}
table.oi-dense .oi-cust-btn:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--accent);
}
table.oi-dense .oi-cust-on  { color: var(--accent); font-weight: 600; }
table.oi-dense .oi-cust-off { color: var(--text-3); }

.btn-xs {
  height: 24px;
  padding: 2px 6px;
  font-size: var(--text-xs);
  line-height: 1.2;
}

/* ===========================================================================
   27d. Orders list — sticky bulk-actions toolbar + tighter table
   =========================================================================== */

/* ── KPI strip — 4 cards at top of page ──────────────────────────── */
.ol-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 980px) {
  .ol-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ol-kpi-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  min-height: 64px;
}
.ol-kpi-card[role="button"] { cursor: pointer; }
.ol-kpi-card[role="button"]:hover {
  transform: translateY(-1px);
  border-color: var(--accent, #3a7bd5);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.ol-kpi-icon {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.ol-kpi-accent-blue  .ol-kpi-icon { background: oklch(95% 0.05 240); color: oklch(40% 0.15 240); }
.ol-kpi-accent-amber .ol-kpi-icon { background: oklch(95% 0.05 80);  color: oklch(45% 0.15 65); }
.ol-kpi-accent-rose  .ol-kpi-icon { background: oklch(95% 0.04 20);  color: oklch(45% 0.18 25); }
.ol-kpi-accent-green .ol-kpi-icon { background: oklch(95% 0.05 145); color: oklch(40% 0.15 145); }
.ol-kpi-accent-muted .ol-kpi-icon { opacity: 0.55; }
.ol-kpi-body { min-width: 0; flex: 1; }
.ol-kpi-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
  line-height: 1.2;
}
.ol-kpi-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.ol-kpi-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Professional toolbar — search left, filter chips right ──────── */
.ol-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-top: 0;
}
@media (max-width: 880px) {
  .ol-toolbar { flex-wrap: wrap; }
}
.ol-toolbar-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 280px;
  min-width: 0;
  padding: 0 12px;
  height: 34px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ol-toolbar-search:focus-within {
  border-color: var(--accent, #3a7bd5);
  box-shadow: 0 0 0 3px oklch(var(--accent-base, 60% 0.15 240) / 0.12);
}
.ol-toolbar-search svg { color: var(--text-3); flex-shrink: 0; }
/* High-specificity override: the global input[type=text] rule sets a
   background, border, height, and width:100% — those create the nested
   "box inside a box" look. Force them off here. */
.ol-toolbar-search input.ol-toolbar-search-input,
input.ol-toolbar-search-input[type="text"] {
  flex: 1;
  min-width: 0;
  width: auto;
  border: none;
  background: transparent;
  outline: none;
  box-shadow: none;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  height: 100%;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.ol-toolbar-search input.ol-toolbar-search-input:focus {
  outline: none;
  box-shadow: none;
  border: none;
}
.ol-toolbar-search input.ol-toolbar-search-input::placeholder { color: var(--text-3); }
.ol-toolbar-search-clear {
  border: none;
  background: transparent;
  color: var(--text-3);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
}
.ol-toolbar-search-clear:hover { color: var(--text); background: var(--border); }

.ol-toolbar-chips {
  display: flex;
  align-items: center;
  gap: 20px;     /* wider gap between semantic chip groups, no visible bar */
  flex-shrink: 0;
}
.ol-chip-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  /* Soft tinted background lets each group read as a unit
     without screaming for attention. */
  padding: 3px;
  background: var(--surface-2);
  border-radius: 999px;
}
@media (max-width: 880px) {
  .ol-toolbar-chips { flex-wrap: wrap; width: 100%; gap: 8px; }
  .ol-chip-group { background: transparent; padding: 0; }
}
/* Legacy bar still exported for backward compat if any other page uses it */
.ol-chip-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 2px 0 4px 0;
}
/* Chips inside a chip-group are borderless, transparent — only the
   active one shows a fill. Standalone chips (outside a group) keep a
   subtle border so they still look like clickable controls. */
.ol-chip {
  padding: 4px 12px;
  border: 1px solid transparent;
  background: transparent;
  /* Square-ish chips (was border-radius:999px / pill shape). Matches new
     design pref consistent with the saved-view chips. */
  border-radius: 5px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
  line-height: 1.5;
  font-weight: 500;
}
.ol-chip:hover {
  background: var(--surface);
  color: var(--text);
}
.ol-chip.is-active {
  background: var(--accent, #3a7bd5);
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
/* Standalone chips outside a group (e.g. the clear ✕) keep a border */
.ol-toolbar-chips > .ol-chip,
.ol-chip-bar > .ol-chip {
  border-color: var(--border);
  background: var(--surface);
}
.ol-chip-sep {
  /* deprecated — kept for backward compat with any leftover markup */
  width: 0; height: 0; margin: 0;
}
.ol-chip-clear {
  border-style: dashed;
  color: var(--text-3);
}
.ol-chip-clear:hover {
  color: var(--danger, #d63838);
  border-color: var(--danger, #d63838);
}

/* ── Customer avatar in row ─────────────────────────────────────── */
.ol-cust-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ol-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.ol-cust-body { min-width: 0; flex: 1; }

/* ── Delivery-run progress (thin bar + "5/8" label inline) ───── */
.run-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.run-progress-track {
  flex: 1;
  min-width: 60px;
  max-width: 140px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.run-progress-fill {
  height: 100%;
  background: var(--accent, #3a7bd5);
  border-radius: 2px;
  transition: width .25s ease;
}
.run-progress-fill.is-done {
  background: oklch(50% 0.15 145);
}
.run-progress-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Pipeline progress indicator (clean thin bar + step counter) ── */
.ol-mp-wrap { margin-top: 5px; max-width: 110px; }
.ol-mp {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.ol-mp-track {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.ol-mp-fill {
  height: 100%;
  background: var(--accent, #3a7bd5);
  border-radius: 2px;
  transition: width .25s ease;
}
.ol-mp-step { white-space: nowrap; }

/* Pipeline dots — matches preview-orders.html. Six thin pills, each
   stage = one dot. Replaces the old single fill-bar + "X/6" label. */
.ol-mp.pipeline      { display: inline-flex; gap: 2px; margin-top: 4px; padding: 0; background: transparent; }
.pipe-dot            { width: 18px; height: 3px; border-radius: 2px; background: var(--surface-3); flex-shrink: 0; }
.pipe-dot.done       { background: var(--accent, #3a7bd5); }
.pipe-dot.done.current { opacity: .55; }

/* ── Order lifecycle status (STATUS column): smart stage chip + 8-step progress.
   Mirrors the detail page's command-centre stepper so list ↔ detail stay
   consistent. Green segments = done steps; the leading edge is the richer green. */
.ol-lc { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.ol-lc-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 5px; line-height: 1.4; white-space: nowrap; }
.ol-lc-cdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.ol-lc-prog { display: inline-flex; gap: 2px; align-items: center; }
.ol-lc-seg { width: 12px; height: 3px; border-radius: 2px; background: var(--surface-3, #e3e6ea); flex-shrink: 0; transition: background .15s; }
.ol-lc-seg.done { background: oklch(64% 0.14 150); }
.ol-lc-seg.done.cur { background: oklch(54% 0.18 150); }

/* ── Big-order highlight (£500+) ────────────────────────────────── */
.ol-big-star {
  margin-left: 4px;
  font-size: 12px;
  vertical-align: middle;
}
.ol-row-big .ol-cell-total {
  position: relative;
}
.ol-row-big .ol-cell-total::after {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: oklch(70% 0.12 80);
  border-radius: 1px;
}

/* ── Row hover actions toolbar ─────────────────────────────────── */
.ol-row-actions {
  display: inline-flex;
  gap: 2px;
  opacity: 0.5;
  transition: opacity .15s ease;
}
.ol-table tr:hover .ol-row-actions { opacity: 1; }

/* ── Footer summary card ────────────────────────────────────────── */
.ol-foot-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
/* Footer quick-actions read as buttons, not floating text — bordered like
   btn-secondary (same treatment as the My Cash header + AR row buttons). */
.ol-foot-summary .ol-foot-actions .btn {
  border: 1px solid var(--border);
  background: var(--surface);
}
.ol-foot-summary .ol-foot-actions .btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
@media (max-width: 720px) {
  .ol-foot-summary { grid-template-columns: repeat(2, 1fr); }
}

/* Pro variant: stats grid on the left, action buttons docked right.
   When the page narrows, the actions wrap below the stats. */
.ol-foot-pro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.ol-foot-pro .ol-foot-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
}
@media (max-width: 1280px) {
  .ol-foot-pro .ol-foot-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ol-foot-pro .ol-foot-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ol-foot-pro .ol-foot-cell-wide { grid-column: span 1; }
@media (min-width: 1281px) {
  /* Give the top-customer cell a bit more room since it carries text */
  .ol-foot-pro .ol-foot-cell-wide { grid-column: span 1; min-width: 0; }
}
.ol-foot-pro .ol-foot-value-text {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ol-foot-pro .ol-foot-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}
.ol-foot-pro .ol-foot-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ol-foot-pro .ol-foot-actions svg { flex-shrink: 0; }
@media (max-width: 1024px) {
  .ol-foot-pro .ol-foot-actions {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: var(--sp-2);
    margin-top: var(--sp-2);
    width: 100%;
    justify-content: flex-end;
  }
}
.ol-foot-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ol-foot-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 600;
}
.ol-foot-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.ol-foot-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-left: 4px;
  font-weight: 400;
}

/* Pro footer — danger-styled action button (e.g. Bulk purge / Empty trash). */
.ol-foot-pro .ol-foot-actions .btn.ol-foot-action-danger {
  color: var(--danger);
}
.ol-foot-pro .ol-foot-actions .btn.ol-foot-action-danger:hover {
  background: oklch(95% 0.04 25);
  border-color: oklch(70% 0.18 25);
}

/* ════════════════════════════════════════════════════════════════════════
   PRO LIST-FOOTER — "colourful tile" redesign (CSS-ONLY, all list pages).
   Each stat cell becomes a discrete colour-keyed mini-vkpi tile: a gradient
   accent rail + an accent dot in the label + an accent-tinted value (the exact
   .vkpi 86% color-mix). Colour auto-assigned by position (nth-child 6n+1..6) so
   the footer is a cohesive sibling of the KPI strip with zero per-page work.
   Comes AFTER the base .ol-foot-* block above so it wins on source order. ──── */
.ol-foot-summary.ol-foot-pro,
.list-foot-pro.ol-foot-pro {
  background: var(--surface);          /* was the flat --surface-2 grey wall */
  padding: 11px 14px;
}
.ol-foot-pro .ol-foot-stats { gap: 8px; }

.ol-foot-pro .ol-foot-cell {
  --foot-accent: #6366F1;              /* overridden per nth-child below */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px 7px 13px;          /* room for the 3px accent rail */
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: color-mix(in oklch, var(--foot-accent) 5%, var(--surface));
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ol-foot-pro .ol-foot-cell::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--foot-accent) 78%, white), var(--foot-accent));
}
.ol-foot-pro .ol-foot-cell:hover {
  border-color: color-mix(in oklch, var(--foot-accent) 34%, var(--border));
  background: color-mix(in oklch, var(--foot-accent) 9%, var(--surface));
}

.ol-foot-pro .ol-foot-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600;
  color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ol-foot-pro .ol-foot-label::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--foot-accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--foot-accent) 15%, transparent);
}

/* Value tinted via the EXACT .vkpi-value recipe. A plain color: rule means an
   inline style="color:…" on a wrapped value (e.g. an overdue £) still wins. */
.ol-foot-pro .ol-foot-value {
  font-size: 15px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklch, var(--foot-accent) 86%, var(--text));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ol-foot-pro .ol-foot-value.ol-foot-value-text,
.ol-foot-pro .ol-foot-value-text {
  font-size: 14px; font-weight: 600;
  color: color-mix(in oklch, var(--foot-accent) 60%, var(--text));
}
.ol-foot-pro .ol-foot-sub {
  margin-left: 0; font-size: 12px; font-weight: 400; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The 6-accent cycle by position — same order as .vkpi-strip. */
.ol-foot-pro .ol-foot-cell:nth-child(6n + 1) { --foot-accent: #6366F1; } /* indigo  */
.ol-foot-pro .ol-foot-cell:nth-child(6n + 2) { --foot-accent: #0EA5E9; } /* sky     */
.ol-foot-pro .ol-foot-cell:nth-child(6n + 3) { --foot-accent: #10B981; } /* emerald */
.ol-foot-pro .ol-foot-cell:nth-child(6n + 4) { --foot-accent: #F59E0B; } /* amber   */
.ol-foot-pro .ol-foot-cell:nth-child(6n + 5) { --foot-accent: #F43F5E; } /* rose    */
.ol-foot-pro .ol-foot-cell:nth-child(6n + 6) { --foot-accent: #8B5CF6; } /* violet  */

.ol-foot-pro .ol-foot-actions { padding-left: 14px; border-left: 1px solid var(--border); }

/* Dark mode (app flips via [data-theme="dark"]). Bright accents glare at 86%
   on the dark surface, so fold in more --text for legible value contrast. */
[data-theme="dark"] .ol-foot-pro .ol-foot-value {
  color: color-mix(in oklch, var(--foot-accent) 68%, var(--text));
}
[data-theme="dark"] .ol-foot-pro .ol-foot-value.ol-foot-value-text,
[data-theme="dark"] .ol-foot-pro .ol-foot-value-text {
  color: color-mix(in oklch, var(--foot-accent) 48%, var(--text));
}
[data-theme="dark"] .ol-foot-pro .ol-foot-cell {
  background: color-mix(in oklch, var(--foot-accent) 10%, var(--surface));
}
[data-theme="dark"] .ol-foot-pro .ol-foot-cell:hover {
  background: color-mix(in oklch, var(--foot-accent) 15%, var(--surface));
}

/* Re-state the responsive column contract AFTER our block so it survives. */
@media (max-width: 1280px) { .ol-foot-pro .ol-foot-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ol-foot-pro .ol-foot-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1024px) {
  .ol-foot-pro .ol-foot-actions {
    border-left: none; border-top: 1px solid var(--border);
    padding-left: 0; padding-top: var(--sp-2); margin-top: var(--sp-2);
    width: 100%; justify-content: flex-end;
  }
}

/* ── Generic alias so any page can use `.list-foot-pro` ─────────
   The orders-prefixed class names are kept for back-compat but the
   `list-foot-pro` modifier lets new pages avoid the order-specific
   prefix. Same rules apply via class chain (no extra selectors). */
.list-foot-pro {  /* alias of .ol-foot-pro */ }
.list-foot-pro .ol-foot-stats { /* inherits all .ol-foot-pro .ol-foot-stats rules */ }
/* If a page uses `<div class="list-foot-pro">` without the .ol- ancestors
   it still picks up styling because both classes co-exist on the wrapper. */

/* ── Density: compact is the default now (was a toggle, simplified). ─── */
.ol-page .ol-table tbody td {
  padding-top: 6px;
  padding-bottom: 6px;
}
.ol-page .ol-avatar {
  width: 26px; height: 26px;
  font-size: 12px;
}
.ol-page .ol-mp-wrap { margin-top: 3px; }
.ol-page .ol-mp-dot { width: 5px; height: 5px; }
/* Trim wasted horizontal padding in dense numeric columns */
.ol-page .ol-table .ol-cell-num,
.ol-page .ol-table .ol-cell-items,
.ol-page .ol-table .ol-cell-date,
.ol-page .ol-table .ol-cell-status,
.ol-page .ol-table .ol-cell-total { padding-left: 8px; padding-right: 8px; }
.ol-page .ol-row-actions { gap: 0; }
.ol-page .ol-row-actions .btn-xs { padding-left: 6px; padding-right: 6px; }

.ol-bulkbar {
  position: sticky;
  top: 56px;                        /* clear the app header */
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 8px 12px;
  background: var(--accent-ring, oklch(70% 0.12 230 / 0.12));
  border: 1px solid var(--accent, #3a7bd5);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.ol-bulkbar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text);
}
.ol-bulkbar-left strong {
  font-weight: 700;
  color: var(--accent);
  font-size: var(--text-base);
}
.ol-bulkbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.ol-bulkbar-label {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Orders list table — denser, classier, with per-column alignment */
.ol-table thead th {
  padding: 8px 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  text-align: left;            /* default: left */
  vertical-align: middle;
}
/* Right-align both header AND data cells via the .ol-right helper class */
.ol-table .ol-right { text-align: right; }
.ol-table .cell-check, .ol-table th.cell-check { text-align: center; width: 36px; padding: 8px 4px; }

.ol-table tbody td {
  padding: 8px 10px;
  vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.ol-table tbody tr:last-child td { border-bottom: none; }
.ol-table tbody tr.row-clickable { cursor: pointer; transition: background var(--t-fast); }
.ol-table tbody tr.row-clickable:hover { background: var(--surface-2); }

/* Column sizing — every column is content-driven (no fixed widths).
   Each column gets `width: 1%; white-space: nowrap` on BOTH header and
   data cell, which makes the browser size each one to the width of its
   widest cell. Slack is distributed proportionally so all columns stay
   visually balanced; nothing balloons. */
.ol-table { table-layout: auto; width: 100%; }

/* Percentage-based column widths — fills the table width evenly with
   no random gaps, regardless of content length. The browser still
   honours content-driven sizing as MINIMUMS, so a long company name
   can push CUSTOMER wider, but everything stretches proportionally. */
.ol-table thead th.cell-check,
.ol-table tbody td.cell-check       { width: 36px; white-space: nowrap; }
.ol-table .ol-col-num,
.ol-table .ol-cell-num              { width: 10%;  min-width: 100px; white-space: nowrap; }
.ol-table .ol-col-cust,
.ol-table .ol-cell-cust             { width: 32%;  min-width: 260px; white-space: normal;  vertical-align: top; }
.ol-table .ol-col-items,
.ol-table .ol-cell-items            { width: 9%;   min-width: 80px;  white-space: nowrap; }
.ol-table .ol-col-total,
.ol-table .ol-cell-total            { width: 13%;  min-width: 110px; white-space: nowrap; }
.ol-table .ol-col-deliv,
.ol-table .ol-cell-deliv            { width: 10%;  white-space: nowrap; }
.ol-table .ol-col-date,
.ol-table .ol-cell-date             { width: 10%;  min-width: 95px;  white-space: nowrap; }
.ol-table .ol-col-status,
.ol-table .ol-cell-status           { width: 12%;  min-width: 110px; white-space: nowrap; }
.ol-table .ol-col-actions,
.ol-table .ol-cell-actions          { width: 14%;  min-width: 150px; white-space: nowrap; }
.ol-table .ol-cell-cust .fw-medi {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
/* (legacy) Phantom spacer — no longer needed since CUSTOMER is flex,
   but keep the rule so any leftover markup doesn't break the layout. */
.ol-table .ol-col-spacer,
.ol-table .ol-cell-spacer { width: 0; padding: 0; border: none; display: none; }

/* ── Order # cell — source pill + sales rep meta line ─────────── */
.ol-num-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
/* Flat uppercase pill — no icon. Border + colour conveys the channel
   without competing with the order number for attention. */
.ol-src-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
  background: transparent;
  color: var(--text-3);
  border: 1px solid var(--border);
}
.ol-src-pill.is-phone  { color: oklch(38% 0.15 145); border-color: oklch(82% 0.10 145); }
.ol-src-pill.is-email  { color: oklch(40% 0.15 240); border-color: oklch(82% 0.10 240); }
.ol-src-pill.is-portal { color: oklch(40% 0.15 290); border-color: oklch(82% 0.10 290); }
.ol-src-pill.is-rep    { color: oklch(45% 0.15 65);  border-color: oklch(82% 0.10 65);  }
.ol-src-pill.is-epos   { color: oklch(45% 0.18 25);  border-color: oklch(82% 0.10 25);  }
.ol-src-pill.is-app    { /* neutral default — uses base styles */ }
/* Sales rep name on the meta line */
.ol-rep-name {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* ── Customer cell — sub-row with account + email + phone links ── */
.ol-cust-sub {
  display: flex;
  align-items: center;
  gap: 4px 14px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.ol-cust-sub > * + *::before {
  /* Subtle dot separator between fields — only renders between siblings */
  content: '·';
  margin-right: 14px;
  margin-left: -10px;
  color: var(--text-3);
  opacity: 0.5;
}
.ol-cust-link {
  display: inline-block;
  font-size: 12px;
  color: var(--text-3);
  text-decoration: none;
  transition: color .15s ease;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.ol-cust-link:hover { color: var(--accent, #3a7bd5); text-decoration: underline; }
.ol-cust-notes {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 4px;
  padding: 3px 8px;
  background: var(--surface-2);
  border-radius: 4px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}
.ol-cust-notes-label {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-right: 4px;
}
/* Delivery destination line under Total — text-only, no icon */
.ol-total-deliv {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.ol-table .ol-cell-cust .fw-medi {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
/* Inner divs in narrow cells keep their nowrap */
.ol-table .ol-cell-num   > div,
.ol-table .ol-cell-items > div,
.ol-table .ol-cell-total > div,
.ol-table .ol-cell-deliv > div,
.ol-table .ol-cell-date  > div { white-space: nowrap; }

/* Cell content tweaks */
.ol-table .ol-cell-num { line-height: 1.25; }
.ol-table .ol-num .text-accent { font-size: var(--text-sm); }
.ol-table .ol-cell-cust { line-height: 1.25; }
.ol-table .ol-cell-items,
.ol-table .ol-cell-total { line-height: 1.25; font-variant-numeric: tabular-nums; }
.ol-table .ol-cell-total { text-align: right; }
.ol-table .ol-cell-deliv .mono { font-family: var(--font-mono); }
.ol-table .ol-cell-date  { line-height: 1.25; }
.ol-table .ol-cell-actions {
  text-align: right;
  white-space: nowrap;
}
.ol-table .ol-cell-actions .btn-xs + .btn-xs { margin-left: 4px; }
.ol-flag-aging {
  color: var(--color-warning, #c98c0a);
  font-weight: 600;
  margin-top: 2px;
}

/* Tighten the orders/back-orders/delivery-runs page vertical rhythm.
   When the .ol-table is the workhorse, we want the strip → tabs →
   toolbar → table to read as ONE block, not three loose sections.   */
.page-wrapper:has(.ol-table) { gap: var(--sp-2); }
.page-wrapper:has(.ol-table) .page-header { margin-bottom: 0; }
.page-wrapper:has(.ol-table) .filter-bar-col {
  padding: 0;
  /* Pull the table card up against the toolbar so there's no dead band */
  margin-bottom: calc(-1 * var(--sp-2));
}
.page-wrapper:has(.ol-table) .ol-card {
  margin-top: -1px;            /* overlap toolbar's bottom border */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ── Universal fix for "card padding eats into table" ───────────────
 * Base .card has padding:16px (good for content cards) but every
 * page that drops a .table-wrap straight inside a .card ends up with
 * a 16px white band on all four sides of the table.
 *
 * This rule targets any .card whose DIRECT child is a .table-wrap —
 * those cards become padding:0 wrappers with overflow:hidden so the
 * rounded corners still clip the inner table. Pagination, footer
 * summary, etc. that live alongside the table inside the same card
 * keep their own padding rules (they declare their own).
 *
 * Applies to every page using the pattern:
 *   <div class="card">
 *     <div class="table-wrap"><table class="data-table">…</table></div>
 *     <div class="pagination">…</div>
 *   </div>
 *
 * Covers 28 list pages including Customers, Products, Invoices,
 * Suppliers, Settings sub-tabs, Categories, Companies, Reports, and
 * the redesigned Orders/Back-Orders/Delivery Runs/Trash pages.
 * ─────────────────────────────────────────────────────────────────── */
.card:has(> .table-wrap) {
  padding: 0;
  overflow: hidden;
}
/* Pagination block at the bottom of a table-card needs its own padding
   restored since the parent card no longer provides it. Pagination
   helpers consistently use these wrapper classes. */
.card:has(> .table-wrap) > .pagination,
.card:has(> .table-wrap) > .pagination-wrap,
.card:has(> .table-wrap) > [class*="pagination"] {
  padding: var(--sp-2) var(--sp-3);
}
/* Inside the filter-bar-col, tab-strip sits flush against the toolbar
   (the toolbar's top border already provides the visual divider). */
.page-wrapper:has(.ol-table) .filter-bar-col .tab-strip-wrap {
  margin-bottom: 0;
}
.page-wrapper:has(.ol-table) .filter-bar-col .ol-toolbar {
  /* Pull up so it touches the tab strip's bottom border line */
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  /* Drop bottom radius so the table card below can sit flush */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  /* Don't double-border with the card below — share one line */
  border-bottom: none;
}
/* .table-wrap inherited overflow-x:auto AND overflow-y:auto from a base
   rule, the y-axis being unnecessary on these pages — it caused a
   vertical scrollbar gutter to appear at the right edge of the table.
   Force y-overflow to visible so the gutter never appears. */
.page-wrapper:has(.ol-table) .table-wrap {
  overflow-y: visible;
}

/* ===========================================================================
   27e. In-app dialog (confirmDialog / alertDialog / promptDialog)
   =========================================================================== */
.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(5px) saturate(1.05);
  z-index: 9999;                /* sits above .modal-backdrop (3000s) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  transition: opacity 160ms ease-out;
}
.app-dialog-backdrop.open { opacity: 1; }
.app-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl, 14px);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.28), 0 2px 8px -2px rgba(0, 0, 0, 0.08);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  transform: scale(0.96) translateY(8px);
  opacity: 0;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease-out;
}
.app-dialog-backdrop.open .app-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.app-dialog-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}
.app-dialog-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-ring, oklch(70% 0.12 230 / 0.15));
  color: var(--accent, #3a7bd5);
  font-size: 18px;
  font-weight: 600;
}
.app-dialog-danger .app-dialog-icon {
  background: oklch(60% 0.2 25 / 0.12);
  color: var(--color-error, #c0392b);
}
.app-dialog-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  flex: 1;
  line-height: 1.3;
}
.app-dialog-body {
  padding: 0 var(--sp-4) var(--sp-4);
  padding-left: calc(var(--sp-4) + 36px + var(--sp-3));   /* indent to align with title */
}
.app-dialog-message {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: var(--sp-3);
}
.app-dialog-body:last-child .app-dialog-message { margin-bottom: 0; }

/* Phase 5 Step 1.7 — context-rich confirmations ──────────────────
   Impact list shows what/who is affected; reversibility note tells the
   user whether the action can be undone. */
.app-dialog-impact {
  list-style: none;
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  display: grid;
  gap: var(--sp-2);
}
.app-dialog-impact li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.4;
}
.app-dialog-impact-ic {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
  color: var(--accent);
  font-size: 14px;
  margin-top: 1px;
}
.app-dialog-reversibility {
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: color-mix(in oklch, var(--color-success, #16a34a) 8%, transparent);
  border-left: 3px solid var(--color-success, #16a34a);
  border-radius: var(--r-sm);
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.4;
}
.app-dialog-reversibility.is-danger {
  background: color-mix(in oklch, var(--danger) 8%, transparent);
  border-left-color: var(--danger);
}
.app-dialog-reversibility strong { color: var(--text); }

.app-dialog-input {
  width: 100%;
  margin-top: var(--sp-2);
}
.app-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}
.app-dialog-footer .btn {
  min-width: 90px;
}

/* Pick-completion modal — two-path choice cards (pack vs dispatch).
   Lives in the global app-dialog (appended to <body>), so it can't use
   the .wh-page-scoped warehouse styles. */
.pick-choice-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; cursor: pointer;
  padding: 14px; margin-bottom: 10px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #e5e7eb);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s, transform .08s;
}
.pick-choice-card:hover {
  border-color: oklch(60% 0.16 240);
  box-shadow: 0 2px 10px oklch(60% 0.18 240 / 0.12);
}
.pick-choice-card:active { transform: scale(0.99); }
.pick-choice-card .pcc-ico {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.pick-choice-card .pcc-ico svg { width: 18px; height: 18px; color: #fff; stroke: #fff; }
.pick-choice-card .pcc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pick-choice-card .pcc-title { font-size: 15px; font-weight: 700; color: var(--text, #111); }
.pick-choice-card .pcc-sub { font-size: 13px; color: var(--text-3, #6b7280); line-height: 1.45; }
.pick-choice-card .pcc-arrow { flex: 0 0 auto; color: var(--text-3, #9ca3af); display: flex; }
.pick-choice-card .pcc-arrow svg { width: 16px; height: 16px; }
.pick-choice-card:hover .pcc-arrow { color: oklch(60% 0.16 240); }
.btn-danger {
  background: var(--color-error, #c0392b);
  color: white;
  border: 1px solid var(--color-error, #c0392b);
}
.btn-danger:hover {
  background: oklch(55% 0.2 25);
  border-color: oklch(55% 0.2 25);
}

@media (max-width: 480px) {
  .app-dialog { max-width: 100%; }
  .app-dialog-body { padding-left: var(--sp-4); }
}

/* ===========================================================================
   27f. Add Item to Order popup (.aio) — searchable product picker
   =========================================================================== */
.aio { display: flex; flex-direction: column; gap: var(--sp-3); min-height: 420px; }
.aio-search-wrap { padding: 0; }
.aio-search-wrap input.search-input { height: 36px; font-size: var(--text-base); }

.aio-list {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  max-height: 360px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.aio-empty {
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  color: var(--text-3);
  font-size: var(--text-sm);
}

.aio-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast);
}
.aio-row:last-child { border-bottom: none; }
.aio-row.is-active,
.aio-row:hover { background: var(--accent-ring, oklch(70% 0.12 230 / 0.10)); }

.aio-row-img {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  object-fit: contain;
  border: 1px solid var(--border);
}
.aio-row-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.aio-row-main {
  flex: 1 1 auto;
  min-width: 0;
}
.aio-row-title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aio-row-star {
  color: var(--accent);
  margin-right: 4px;
}
.aio-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 2px;
}
.aio-row-meta .mono { color: var(--text-2); }
.aio-row-stock {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  font-weight: 500;
}
.aio-row-stock.aio-stock-out { background: oklch(60% 0.2 25 / 0.12); color: var(--color-error, #c0392b); }
.aio-row-stock.aio-stock-low { background: oklch(75% 0.18 80 / 0.18); color: var(--color-warning, #c98c0a); }

.aio-row-price {
  flex: 0 0 auto;
  text-align: right;
  min-width: 90px;
}
.aio-row-price-eff {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.aio-row-price-default {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Selected product preview + qty/price inputs */
.aio-selected {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.aio-sel-info {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  flex: 1 1 auto;
  min-width: 0;
}
.aio-sel-img {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--surface);
  object-fit: contain;
  border: 1px solid var(--border);
}
.aio-sel-meta { min-width: 0; }
.aio-sel-title {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
}
.aio-sel-code {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 2px;
}
.aio-sel-hint { margin-top: 4px; }
.aio-sel-inputs {
  display: grid;
  grid-template-columns: 90px 110px;
  gap: var(--sp-2);
  flex: 0 0 auto;
}
.aio-sel-inputs .form-group { margin: 0; }

@media (max-width: 640px) {
  .aio-selected { flex-direction: column; }
  .aio-sel-inputs { width: 100%; grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
   27g. Product Detail page — dense info-rich layout
   =========================================================================== */
.pd-page { gap: var(--sp-3); }

/* Compact top bar with breadcrumb + actions */
.pd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.pd-bc {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-3);
}
.pd-bc a { color: var(--text-3); text-decoration: none; }
.pd-bc a:hover { color: var(--accent); }
.pd-bc-code {
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  color: var(--text);
}

/* Title row */
.pd-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.pd-title { margin: 0 0 6px; line-height: 1.2; }
.pd-meta {
  font-size: var(--text-sm);
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.pd-meta-link { color: var(--text-2); text-decoration: none; }
.pd-meta-link:hover { color: var(--accent); }
.pd-meta-sep {
  display: inline-block;
  width: 3px; height: 3px;
  background: var(--text-4);
  border-radius: 50%;
  vertical-align: middle;
}
.pd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  max-width: 60%;
}

/* Main grid: 260px sticky sidebar + scrollable main */
.pd-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
.pd-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: sticky;
  top: calc(56px + var(--sp-3));
}
.pd-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

/* Image card in sidebar */
.pd-img-card { padding: var(--sp-2); }
.pd-img-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.pd-img-empty {
  font-size: var(--text-xs);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pd-thumbs {
  display: flex;
  gap: 4px;
  margin-top: var(--sp-2);
  overflow-x: auto;
}
.pd-thumb {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  padding: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  overflow: hidden;
}
.pd-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pd-thumb img { width: 100%; height: 100%; object-fit: contain; }
.pd-upload {
  display: block;
  margin-top: var(--sp-2);
  padding: 8px 12px;
  text-align: center;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast);
}
.pd-upload:hover { border-color: var(--accent); color: var(--accent); }
.pd-upload input { display: none; }

/* Stock snapshot */
.pd-snapshot-card .card-header,
.pd-actions-card  .card-header {
  padding: 8px 12px;
}
.pd-snap { padding: 4px 12px 12px; }
.pd-snap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: var(--text-xs);
  color: var(--text-3);
  border-bottom: 1px dashed var(--border);
}
.pd-snap-row:last-child { border-bottom: none; }
.pd-snap-row strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pd-reorder-flag {
  margin-top: var(--sp-2);
  padding: 6px 8px;
  background: oklch(75% 0.18 80 / 0.18);
  color: var(--color-warning, #c98c0a);
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* Quick actions */
.pd-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px 12px 12px;
}
.pd-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast);
  text-align: center;
}
.pd-action:hover {
  background: var(--accent-ring);
  border-color: var(--accent);
  color: var(--accent);
}
.pd-action-ico { font-size: 16px; line-height: 1; }

/* KPI strip in main column */
.pd-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
}
.pd-kpi {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.pd-kpi-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
}
.pd-kpi-value {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-top: 2px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pd-kpi-hint {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3);
}

/* 2-column section grid */
.pd-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 1100px) {
  .pd-grid { grid-template-columns: 1fr; }
  .pd-sidebar { position: static; }
  .pd-2col { grid-template-columns: 1fr; }
  .pd-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .pd-pills { max-width: 100%; }
}

/* Definition rows (compact) ─ used inside the product detail panel.
   The outer .def-list is a 2-col grid; we override it here to use equal
   columns so the two visible columns of rows have identical widths
   (otherwise col-1 is 140px tight and col-2 sprawls). */
.pd-def.def-list,
.def-list.pd-def {
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--sp-3);
  padding: 0;
}
/* Each def-row is a label-on-left / value-on-right line. */
.pd-def .def-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 5px 12px;
  font-size: var(--text-xs);
  border-bottom: 1px dashed var(--border);
}
.pd-def .def-row:last-child { border-bottom: none; }
.pd-def .def-label {
  color: var(--text-3);
  flex: 0 0 auto;
  white-space: nowrap;
}
.pd-def .def-value {
  color: var(--text);
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}
.pd-spec-head {
  padding: 8px 12px 4px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
}

/* Top customers / customer pricing lists */
.pd-cust-list { padding: 4px 0; }
.pd-cust-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: background var(--t-fast);
}
.pd-cust-row:last-child { border-bottom: none; }
.pd-cust-row:hover { background: var(--surface-2); }
.pd-cust-rank {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-ring);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}
.pd-cust-info { flex: 1; min-width: 0; }
.pd-cust-name {
  font-size: var(--text-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-cust-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 1px;
}
.pd-cust-num {
  flex: 0 0 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pd-cust-num strong {
  font-size: var(--text-sm);
  color: var(--text);
}

/* Related products grid */
.pd-related {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-2);
  padding: var(--sp-3);
}
@media (max-width: 1400px) { .pd-related { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px)  { .pd-related { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .pd-related { grid-template-columns: repeat(2, 1fr); } }

.pd-related-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--text);
  background: var(--surface);
  transition: all var(--t-fast);
}
.pd-related-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pd-related-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-related-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pd-related-empty {
  font-size: 12px;
  color: var(--text-3);
  text-transform: uppercase;
}
.pd-related-title {
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 32px;
}
.pd-related-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
}
.pd-related-price {
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.pd-related-stock {
  font-size: 12px;
  color: var(--text-3);
}

/* ===========================================================================
   27g-extra. Consistent product thumbnail (used in list tables)
   =========================================================================== */
.product-thumb {
  width: 48px;
  height: 48px;
  object-fit: contain;       /* keep the product visible — no cropping */
  object-position: center center;
  background: #fff;          /* clean photo background */
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  display: block;
  margin: 0 auto;            /* centre the thumb in its <td> */
}
.thumb-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 18px;
}

/* ===========================================================================
   27k. New Quotation full page (.quote-new-v2) — keyboard-driven entry
   =========================================================================== */
.quote-new-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 0;
  padding: var(--sp-3) var(--sp-4) calc(64px + var(--sp-3));
  min-height: calc(100vh - 56px);
}

.qnv2-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
}
.qnv2-title-block { flex: 0 0 auto; }
.qnv2-title-block .breadcrumb-mini {
  font-size: var(--text-xs);
  color: var(--text-3);
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: 2px;
}
.qnv2-title-block .breadcrumb-mini a { color: var(--text-3); text-decoration: none; }
.qnv2-title-block .breadcrumb-mini a:hover { color: var(--accent); }
.qnv2-title-block .breadcrumb-mini .sep { color: var(--text-4); }
.qnv2-title { font-size: var(--text-lg); font-weight: 600; margin: 0; line-height: 1.1; }
.qnv2-kbd-hint {
  flex: 1;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  flex-wrap: wrap;
}
.qnv2-kbd-hint kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--surface);
  color: var(--text-2);
}
.qnv2-actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; }

/* Context strip: customer + validity + reference + currency */
.qnv2-context {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr 0.8fr;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--border);
}
.qnv2-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qnv2-field .form-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin: 0;
  font-weight: 600;
}
.qnv2-field-wide { /* customer field */ }
.qnv2-context .searchable-select { width: 100%; }
.qnv2-quick { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.qnv2-quick-btn {
  padding: 1px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  color: var(--text-3);
  cursor: pointer;
}
.qnv2-quick-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Search row */
.qnv2-search-row { position: relative; padding-top: var(--sp-2); }
.qnv2-search-wrap { max-width: 100%; }
.qnv2-search-wrap input.search-input { height: 38px; font-size: var(--text-base); }
.qnv2-search-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  z-index: 100;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  max-height: 340px;
  overflow: auto;
}
.qnv2-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 6px var(--sp-3);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.qnv2-result:last-child { border-bottom: none; }
.qnv2-result.is-active { background: var(--accent-ring); }
.qnv2-result-main { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; flex: 1; }
.qnv2-result-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qnv2-result-price { flex-shrink: 0; font-weight: 600; }
.qnv2-cust-star { color: var(--accent); font-weight: bold; margin-right: 2px; }

/* Items table */
.qnv2-table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* Allow horizontal scroll as a safety net for very narrow viewports;
     normal viewports fit without scrolling thanks to the tight column
     padding below. */
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface);
}
.qnv2-items-table {
  width: 100%;
  /* border-collapse:separate so the per-cell vertical dividers render
     as a clean 1-pixel line — same pattern as the new-order table. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
  table-layout: auto;
}
/* Grid lines — vertical between every column. */
.qnv2-items-table thead th,
.qnv2-items-table tbody td,
.qnv2-items-table tfoot td {
  border-right: 1px solid var(--color-border, var(--border));
}
.qnv2-items-table thead th:last-child,
.qnv2-items-table tbody td:last-child,
.qnv2-items-table tfoot td:last-child {
  border-right: none;
}
/* Default styling for inputs inside quotation items rows.
   padding-right: 0 so the right-aligned digit sits flush against the input's
   right border — matching where the header text sits in the cell above.
   !important needed to beat the base .form-input-sm rule which uses
   !important itself. */
.qnv2-items-table tbody input.form-input-sm {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 4px 0 4px 6px !important;
}
.qnv2-items-table thead th {
  background: var(--surface-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
  text-align: left;
  /* Tight padding so all 12 columns (incl. Customer + Action) fit
     without horizontal scroll on standard viewports. */
  padding: 8px 5px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.qnv2-items-table tbody td {
  padding: 6px 5px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.qnv2-items-table thead th:first-child,
.qnv2-items-table tbody td:first-child { padding-left: 8px; }
.qnv2-items-table thead th:last-child,
.qnv2-items-table tbody td:last-child  { padding-right: 8px; }
.qnv2-items-table tbody tr:last-child td { border-bottom: none; }
.qnv2-items-table tbody tr:hover { background: var(--surface-2); }
.qnv2-empty { text-align: center; color: var(--text-3); padding: var(--sp-6) 0 !important; }
/* Column sizing for quotation items table — same pattern as Order:
   shrink-to-content for everything, PRODUCT is the flex column. */
.qnv2-col-num,
.qnv2-col-code,
.qnv2-col-qty,
.qnv2-col-price,
.qnv2-col-default,
.qnv2-col-disc,
.qnv2-col-disc-amt,
.qnv2-col-vat,
.qnv2-col-vat-amt,
.qnv2-col-line,
.qnv2-col-total,
.qnv2-col-cust,
.qnv2-col-act {
  width: 1%;
  white-space: nowrap;
}
.qnv2-col-vat-amt   { min-width: 78px; }
.qnv2-items-table th.qnv2-col-vat-amt,
.qnv2-items-table td.qnv2-col-vat-amt { text-align: right; font-variant-numeric: tabular-nums; padding-right: 10px; }
.qnv2-col-default {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs, 11px);
  line-height: 1.2;
}
.qnv2-col-cust { text-align: center; }
.qnv2-col-title {
  width: auto;
  min-width: 160px;
  white-space: normal;
}
.qnv2-col-num   { text-align: center; color: var(--text-3); }
/* All numeric columns share the same right-align so the column header reads
   exactly above the right-aligned input or value below it. Was previously
   inconsistent: VAT was center, qty/price/disc/disc-amt headers were left
   (default), inputs inside them were right-aligned with 10px internal pad. */
.qnv2-items-table th.qnv2-col-qty,
.qnv2-items-table td.qnv2-col-qty,
.qnv2-items-table th.qnv2-col-price,
.qnv2-items-table td.qnv2-col-price,
.qnv2-items-table th.qnv2-col-disc,
.qnv2-items-table td.qnv2-col-disc,
.qnv2-items-table th.qnv2-col-disc-amt,
.qnv2-items-table td.qnv2-col-disc-amt,
.qnv2-items-table th.qnv2-col-vat,
.qnv2-items-table td.qnv2-col-vat,
.qnv2-items-table th.qnv2-col-line,
.qnv2-items-table td.qnv2-col-line,
.qnv2-items-table th.qnv2-col-total,
.qnv2-items-table td.qnv2-col-total,
.qnv2-items-table th.qnv2-col-default,
.qnv2-items-table td.qnv2-col-default { text-align: right; font-variant-numeric: tabular-nums; }
.qnv2-col-act   { text-align: center; }
/* Auto-fit numeric inputs in the items table.
   - field-sizing: content (Chrome 123+, FF 121+, Safari 17.4+) makes the
     input grow with its value, so "2.85" doesn't clip to "2.8" and "15"
     doesn't clip to "1".
   - min-width keeps an empty/short input clickable; max-width prevents
     a freak value (e.g. 99999.99) from blowing out the column.
   - Tighter horizontal padding gives more usable space inside the box
     so 3–4 digit values fit even in the fallback fixed width.
   - tabular-nums keeps the digits aligned across rows. */
.qnv2-qty-input,
.qnv2-price-input,
.qnv2-disc-input,
.qnv2-disc-amt-input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding-left: 6px;
  /* Zero internal right-padding so the digit sits flush against the input's
     right border. Input border sits at the cell's padding-right from the
     cell edge, matching the header — column aligns vertically. */
  padding-right: 0 !important;
  field-sizing: content;
  /* border-box (NOT content-box) keeps the input inside its cell. With
     content-box the cell width was 64px but the input rendered at 72px,
     spilling 8px into the next cell so QTY visually overlapped UNIT £. */
  box-sizing: border-box;
}
.qnv2-qty-input      { width: auto; min-width: 32px; max-width: 80px; }
.qnv2-price-input    { width: auto; min-width: 56px; max-width: 110px; }
.qnv2-disc-input     { width: auto; min-width: 28px; max-width: 60px; }
.qnv2-disc-amt-input { width: auto; min-width: 48px; max-width: 90px; }
/* Hide native number-input spinners (same as new-order page) */
.qnv2-qty-input::-webkit-inner-spin-button,
.qnv2-qty-input::-webkit-outer-spin-button,
.qnv2-price-input::-webkit-inner-spin-button,
.qnv2-price-input::-webkit-outer-spin-button,
.qnv2-disc-input::-webkit-inner-spin-button,
.qnv2-disc-input::-webkit-outer-spin-button,
.qnv2-disc-amt-input::-webkit-inner-spin-button,
.qnv2-disc-amt-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qnv2-qty-input,
.qnv2-price-input,
.qnv2-disc-input,
.qnv2-disc-amt-input { -moz-appearance: textfield; }
/* Fallback for browsers without field-sizing — pad the fixed widths
   enough to fit common 3–4 digit values (was: 64 / 80 / 56). */
@supports not (field-sizing: content) {
  .qnv2-qty-input      { width: 64px; min-width: 64px; }
  .qnv2-price-input    { width: 88px; min-width: 88px; }
  .qnv2-disc-input     { width: 56px; min-width: 56px; }
  .qnv2-disc-amt-input { width: 76px; min-width: 76px; }
}
/* Tighter cell padding for the auto-fit input columns. The DISC pair
   (% + £) groups visually — extra right-padding on Disc £ separates the
   group from VAT so the columns read as three distinct cells. */
.qnv2-items-table .qnv2-col-qty,
.qnv2-items-table .qnv2-col-price {
  padding-left: 6px;
  padding-right: 6px;
}
.qnv2-items-table .qnv2-col-disc     { padding-left: 6px; padding-right: 4px; }
.qnv2-items-table .qnv2-col-disc-amt { padding-left: 4px; padding-right: 14px; }
.qnv2-items-table .qnv2-col-vat      { padding-left: 14px; }
/* Empty discount inputs show a dim placeholder so zero-discount rows
   don't visually crowd the VAT% cell next to them. */
.qnv2-disc-input::placeholder,
.qnv2-disc-amt-input::placeholder { color: var(--text-3); opacity: 0.5; }

/* Terms & conditions collapsible */
.qnv2-terms { margin-top: var(--sp-1); }
.qnv2-terms summary {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--text-2);
  padding: 6px 0;
  font-weight: 500;
}
.qnv2-terms summary:hover { color: var(--accent); }
.qnv2-terms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.qnv2-terms-grid textarea { resize: vertical; font-size: var(--text-sm); }

/* Sticky bottom totals bar */
.qnv2-totalbar {
  position: fixed;
  left: var(--sidebar-w, 256px);
  right: 0;
  bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  z-index: 50;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
body:has(.sidebar.collapsed) .qnv2-totalbar { left: 64px; }
.qnv2-totalbar-left { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.qnv2-totalbar-right { display: flex; align-items: center; gap: var(--sp-3); }
.qnv2-tb-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
}
.qnv2-tb-value { font-weight: 600; font-size: var(--text-sm); }
.qnv2-tb-sep { width: 1px; height: 18px; background: var(--border); margin: 0 var(--sp-2); }
.qnv2-tb-total-label { color: var(--text-2); }
.qnv2-tb-total { font-size: var(--text-lg); font-weight: 700; color: var(--accent); }
.qnv2-email-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--text-3);
}

@media (max-width: 1100px) {
  .qnv2-context { grid-template-columns: 1fr 1fr; }
  .qnv2-totalbar { left: 0; }
  .qnv2-kbd-hint { display: none; }
  .qnv2-terms-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .quote-new-v2 { padding: var(--sp-2); margin: 0; }
  .qnv2-context { grid-template-columns: 1fr; }
}

/* ===========================================================================
   27j. Customers list page (.cl-*) — KPI strip + filter chips + dense table
   =========================================================================== */
.cl-page { gap: var(--sp-3); }

/* KPI strip — 6 clickable segment cards */
.cl-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-2);
}
.cl-kpi {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  /* Left rail kept on every card; coloured only when active. Stops the
     content from shifting when the active card switches. */
  border-left: 3px solid transparent;
  transition: border-color var(--t-fast), background var(--t-fast);
  position: relative;
}
.cl-kpi-clickable { cursor: pointer; }
.cl-kpi-clickable:hover {
  border-color: var(--border);
  background: var(--surface-2);
}
/* Active state — subtle accent rail on the left only. No blue wash,
   no double border, no heavy shadow. Reads as "this is the current
   filter" without dominating the strip. */
.cl-kpi.is-active {
  border-color: var(--border);
  border-left-color: var(--accent, #3a7bd5);
  background: var(--surface);
}
.cl-kpi.is-active .cl-kpi-label {
  color: var(--accent, #3a7bd5);
}
.cl-kpi.is-active .cl-kpi-value {
  color: var(--text);
}
.cl-kpi-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
}
.cl-kpi-value {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-top: 2px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cl-kpi-hint {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3);
}
.cl-color-active  { color: oklch(50% 0.18 145); }
.cl-color-risk    { color: oklch(55% 0.18 60);  }
.cl-color-dormant { color: oklch(55% 0.18 25);  }
.cl-color-hold    { color: oklch(50% 0.18 25);  }

/* ── Vibrant KPI treatment (Customers list) ──────────────────────────────
   Brings .cl-kpi into the dashboard .dw-kpi family — gradient icon chip +
   colored top accent + soft top wash + tinted value — so the Customers list
   speaks the same VB colour language as the dashboard + Orders. Scoped to
   .cl-kpi-strip, used only by the Customers list. */
.cl-kpi-strip .cl-kpi {
  --c: #64748B;
  border-left: 1px solid var(--border);
  border-top: 3px solid var(--c);
  overflow: hidden;
}
.cl-kpi-strip .cl-kpi::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 42px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--c) 9%, transparent), transparent);
  pointer-events: none;
}
.cl-kpi-strip .cl-kpi > * { position: relative; }
.cl-kpi-strip .cl-kpi-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 9px;
  margin-bottom: 6px;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in oklch, var(--c) 70%, white), var(--c));
  box-shadow: 0 6px 15px -6px color-mix(in oklch, var(--c) 55%, transparent);
}
.cl-kpi-strip .cl-kpi-icon svg { width: 16px; height: 16px; }
.cl-kpi-strip .cl-kpi-value { color: color-mix(in oklch, var(--c) 86%, var(--text)); }
.cl-kpi-strip .cl-kpi-accent-indigo  { --c: #6366F1; }
.cl-kpi-strip .cl-kpi-accent-emerald { --c: #10B981; }
.cl-kpi-strip .cl-kpi-accent-amber   { --c: #F59E0B; }
.cl-kpi-strip .cl-kpi-accent-rose    { --c: #F43F5E; }
.cl-kpi-strip .cl-kpi-accent-sky     { --c: #0EA5E9; }
.cl-kpi-strip .cl-kpi-accent-slate   { --c: #94A3B8; }
.cl-kpi-strip .cl-kpi-accent-slate .cl-kpi-icon  { background: var(--surface-2); color: var(--text-3); box-shadow: none; }
.cl-kpi-strip .cl-kpi-accent-slate .cl-kpi-value { color: var(--text); }
.cl-kpi-strip .cl-kpi.is-active {
  border-color: color-mix(in oklch, var(--c) 32%, var(--border));
  border-top-color: var(--c);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--c) 16%, transparent);
}
.cl-kpi-strip .cl-kpi.is-active .cl-kpi-label { color: color-mix(in oklch, var(--c) 80%, var(--text)); }

@media (max-width: 1100px) {
  .cl-kpi-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .cl-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Shared vibrant KPI strip (.vkpi) ────────────────────────────────────
   Canonical reusable version of the dashboard .dw-kpi treatment — gradient
   icon chip + colored top accent + soft top wash + tinted value. New pages
   use this directly (Orders/Customers keep their page-local .ol-/.cl- copies
   for now; migrate them here later). Accent via a .vkpi-<colour> class. */
.vkpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.vkpi {
  --c: #64748B;
  position: relative; overflow: hidden;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--c);
  border-radius: var(--r-md);
}
.vkpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 42px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--c) 9%, transparent), transparent);
  pointer-events: none;
}
.vkpi > * { position: relative; }
.vkpi.is-clickable { cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.vkpi.is-clickable:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px color-mix(in oklch, var(--c) 42%, transparent); }
.vkpi.is-active { border-color: color-mix(in oklch, var(--c) 32%, var(--border)); box-shadow: 0 0 0 2px color-mix(in oklch, var(--c) 16%, transparent); }
.vkpi-icon {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 9px; margin-bottom: 6px; color: #fff;
  background: linear-gradient(135deg, color-mix(in oklch, var(--c) 70%, white), var(--c));
  box-shadow: 0 6px 15px -6px color-mix(in oklch, var(--c) 55%, transparent);
}
.vkpi-icon svg { width: 16px; height: 16px; }
.vkpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); font-weight: 600; }
.vkpi-value { font-size: var(--text-xl); font-weight: 700; margin-top: 2px; line-height: 1.1; font-variant-numeric: tabular-nums; color: color-mix(in oklch, var(--c) 86%, var(--text)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vkpi-hint { margin-top: 2px; font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vkpi-indigo  { --c: #6366F1; }
.vkpi-emerald { --c: #10B981; }
.vkpi-amber   { --c: #F59E0B; }
.vkpi-rose    { --c: #F43F5E; }
.vkpi-sky     { --c: #0EA5E9; }
.vkpi-violet  { --c: #8B5CF6; }
.vkpi-slate   { --c: #94A3B8; }
.vkpi-slate .vkpi-icon  { background: var(--surface-2); color: var(--text-3); box-shadow: none; }
.vkpi-slate .vkpi-value { color: var(--text); }
@media (max-width: 1100px) { .vkpi-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .vkpi-strip { grid-template-columns: repeat(2, 1fr); } }

/* ── /warehouses fleet cockpit (.whs-*) ───────────────────────────────────
   Card-grid of physical sites + per-site detail drawer. All colours via
   color-mix against design tokens so light/dark both adapt. */
.whs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; margin-bottom: var(--sp-3); }
.whs-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 14px 14px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.whs-card:hover { box-shadow: 0 8px 22px -12px color-mix(in oklch, var(--text) 30%, transparent); border-color: color-mix(in oklch, var(--text) 14%, var(--border)); }
.whs-card-main { border-color: color-mix(in oklch, #8B5CF6 40%, var(--border)); box-shadow: inset 3px 0 0 #8B5CF6; }
.whs-card-off { opacity: .72; }
.whs-card-head { display: flex; flex-direction: column; gap: 2px; }
.whs-card-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.whs-code { font-size: 12px; color: var(--text-3); background: var(--surface-2); padding: 1px 6px; border-radius: 5px; }
.whs-name { font-size: var(--text-md); font-weight: 700; color: var(--text); }
.whs-badge { font-size: 12px; }
.whs-sub { font-size: 13px; color: var(--text-3); }
.whs-pol-row { display: flex; gap: 6px; flex-wrap: wrap; }
.whs-pol { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); padding: 2px 7px; border-radius: 999px; }
.whs-pol-warn { color: color-mix(in oklch, #F59E0B 72%, var(--text)); background: color-mix(in oklch, #F59E0B 14%, var(--surface)); border-color: color-mix(in oklch, #F59E0B 35%, var(--border)); }
.whs-occ { display: flex; flex-direction: column; gap: 4px; }
.whs-occ-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); font-weight: 600; }
.whs-occ-track { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.whs-occ-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.whs-occ-emerald { background: #10B981; }
.whs-occ-amber { background: #F59E0B; }
.whs-occ-rose { background: #F43F5E; }
.whs-occ-sky { background: color-mix(in oklch, #0EA5E9 45%, var(--surface-2)); }
.whs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 9px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.whs-stat { display: flex; flex-direction: column; gap: 1px; }
.whs-stat-v { font-size: var(--text-md); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.whs-stat-l { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); }
.whs-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.whs-chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; line-height: 1.4; transition: filter var(--t-fast); }
.whs-chip svg { width: 12px; height: 12px; }
.whs-chip:hover { filter: brightness(.97); }
.whs-chip-amber   { color: color-mix(in oklch, #F59E0B 72%, var(--text)); background: color-mix(in oklch, #F59E0B 12%, var(--surface)); border-color: color-mix(in oklch, #F59E0B 32%, var(--border)); }
.whs-chip-rose    { color: color-mix(in oklch, #F43F5E 72%, var(--text)); background: color-mix(in oklch, #F43F5E 12%, var(--surface)); border-color: color-mix(in oklch, #F43F5E 32%, var(--border)); }
.whs-chip-sky     { color: color-mix(in oklch, #0EA5E9 72%, var(--text)); background: color-mix(in oklch, #0EA5E9 12%, var(--surface)); border-color: color-mix(in oklch, #0EA5E9 32%, var(--border)); }
.whs-chip-violet  { color: color-mix(in oklch, #8B5CF6 72%, var(--text)); background: color-mix(in oklch, #8B5CF6 12%, var(--surface)); border-color: color-mix(in oklch, #8B5CF6 32%, var(--border)); }
.whs-chip-indigo  { color: color-mix(in oklch, #6366F1 72%, var(--text)); background: color-mix(in oklch, #6366F1 12%, var(--surface)); border-color: color-mix(in oklch, #6366F1 32%, var(--border)); }
.whs-chip-emerald { color: color-mix(in oklch, #10B981 72%, var(--text)); background: color-mix(in oklch, #10B981 12%, var(--surface)); border-color: color-mix(in oklch, #10B981 32%, var(--border)); }
.whs-card-actions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.whs-drawer { display: flex; flex-direction: column; gap: 16px; }
.whs-d-section { display: flex; flex-direction: column; gap: 8px; }
.whs-d-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.whs-d-title svg { width: 14px; height: 14px; }
.whs-kv { display: flex; gap: 10px; font-size: 14px; }
.whs-kv-k { flex: 0 0 150px; color: var(--text-3); }
.whs-kv-v { color: var(--text); flex: 1; min-width: 0; word-break: break-word; }
.whs-d-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.whs-d-tile { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--border); border-left: 3px solid var(--wc, #64748B); background: var(--surface-2); }
.whs-d-tile.is-clickable { cursor: pointer; }
.whs-d-tile.is-clickable:hover { background: var(--surface); }
.whs-d-v { font-size: var(--text-lg); font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.whs-d-l { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-3); }
.whs-d-amber { --wc: #F59E0B; } .whs-d-indigo { --wc: #6366F1; } .whs-d-sky { --wc: #0EA5E9; }
.whs-d-rose { --wc: #F43F5E; } .whs-d-violet { --wc: #8B5CF6; } .whs-d-emerald { --wc: #10B981; }
@media (max-width: 560px) { .whs-grid { grid-template-columns: 1fr; } .whs-kv-k { flex-basis: 110px; } }

/* Filter row — two stacked rows: top = search + tools (one line), bottom = chips */
.cl-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cl-filters-top {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: nowrap;
}
.cl-search {
  flex: 1 1 auto;
  min-width: 0;             /* allow shrink */
}
.cl-search input.search-input { height: 36px; }
.cl-select {
  height: 36px;
  flex: 0 0 auto;
  min-width: 140px;
  max-width: 200px;
}
.cl-density {
  height: 36px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Chips row — horizontal, scroll on narrow screens */
.cl-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.cl-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.cl-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cl-chip.is-active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.cl-chip-count {
  display: inline-block;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  min-width: 18px;
  text-align: center;
}
.cl-chip.is-active .cl-chip-count {
  background: rgba(255, 255, 255, 0.22);
}

/* Mobile: stack the top row, chips scroll horizontally */
@media (max-width: 720px) {
  .cl-filters-top { flex-wrap: wrap; }
  .cl-search { flex: 1 1 100%; }
  .cl-select { flex: 1 1 calc(50% - 4px); max-width: none; }
  .cl-density { flex: 1 1 100%; }
  .cl-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .cl-chips::-webkit-scrollbar { height: 4px; }
}

/* Sticky bulk-actions toolbar */
.cl-bulkbar {
  position: sticky;
  top: 56px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 8px 12px;
  background: var(--accent-ring, oklch(70% 0.12 230 / 0.12));
  border: 1px solid var(--accent, #3a7bd5);
  border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  flex-wrap: wrap;
}
.cl-bulkbar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text);
}
.cl-bulkbar-left strong {
  font-weight: 700;
  color: var(--accent);
}
.cl-bulkbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* Table — column widths */
.cl-table thead th {
  padding: 8px 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  vertical-align: middle;
}
.cl-table .cl-col-check    { width: 36px; padding: 8px 4px; text-align: center; }
.cl-table .cl-col-cust     { min-width: 240px; }
.cl-table .cl-col-contact  { min-width: 200px; }
.cl-table .cl-col-orders   { width: 90px; }
.cl-table .cl-col-last     { width: 110px; }
.cl-table .cl-col-balance  { width: 100px; }
.cl-table .cl-col-credit   { width: 110px; }
.cl-table .cl-col-terms    { width: 70px; }
.cl-table .cl-col-status   { width: 90px; }
.cl-table .cl-col-act      { width: 110px; padding: 8px 4px; }

.cl-table tbody td { padding: 10px; vertical-align: middle; }
.cl-table.cl-dense tbody td { padding: 6px 10px; }

/* Customer cell — avatar + name + meta */
.cl-cust-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cl-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.cl-table.cl-dense .cl-avatar { width: 30px; height: 30px; font-size: 12px; }
.cl-cust-main { min-width: 0; flex: 1; }
.cl-cust-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-cust-meta {
  font-size: 12px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.cl-acct {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}
.cl-meta-sep {
  display: inline-block;
  width: 2px; height: 2px;
  background: var(--text-4);
  border-radius: 50%;
}

/* Contact column */
.cl-col-contact { font-size: var(--text-xs); }
.cl-contact-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}
.cl-contact-row a { color: var(--text-2); text-decoration: none; }
.cl-contact-row a:hover { color: var(--accent); }
.cl-contact-ico { color: var(--text-3); width: 14px; flex: 0 0 auto; }

/* Orders column */
.cl-col-orders { font-variant-numeric: tabular-nums; }
.cl-orders-num { font-weight: 600; color: var(--text); }
.cl-orders-spend { font-size: 12px; color: var(--text-3); }

/* Last order */
.cl-last-rel { font-size: var(--text-xs); color: var(--text); font-weight: 500; }
.cl-last-date { font-size: 12px; color: var(--text-3); }

/* Balance */
.cl-bal-amt { font-weight: 500; font-variant-numeric: tabular-nums; }
.cl-bal-due { color: oklch(55% 0.18 60); font-weight: 600; }
.cl-bal-open { font-size: 12px; color: oklch(55% 0.18 60); margin-top: 2px; }

/* Credit usage bar */
.cl-col-credit { font-variant-numeric: tabular-nums; }
.cl-credit-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
  width: 80px;
  margin-left: auto;
}
.cl-credit-bar-fill { height: 100%; transition: width 0.3s; }
.cl-credit-ok    { background: oklch(50% 0.18 145); }
.cl-credit-warn  { background: oklch(55% 0.18 60); }
.cl-credit-over  { background: oklch(50% 0.18 25); }
.cl-credit-empty { font-size: 12px; color: var(--text-3); }

/* Terms */
.cl-terms {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cl-terms small { font-size: 12px; color: var(--text-3); margin-left: 1px; }

/* Health badges */
.cl-active  { background: oklch(75% 0.16 145 / 0.20); color: oklch(45% 0.18 145); }
.cl-steady  { background: oklch(75% 0.15 200 / 0.20); color: oklch(45% 0.18 200); }
.cl-risk    { background: oklch(75% 0.18 80  / 0.22); color: oklch(45% 0.18 60);  }
.cl-dormant { background: oklch(75% 0.18 25  / 0.18); color: oklch(45% 0.18 25);  }
.cl-new     { background: oklch(80% 0.10 250 / 0.20); color: oklch(45% 0.18 250); }
.cl-hold    { background: oklch(60% 0.20 25  / 0.20); color: oklch(40% 0.20 25); }

/* Quick action icons */
.cl-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
}
.btn-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-3);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--t-fast);
}
.btn-icon:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--accent);
}

/* Form-input-sm used in tools row */
.cl-tools .form-input-sm,
.cl-tools select.form-input-sm,
.cl-bulkbar .form-input-sm {
  height: 32px;
  padding: 4px 10px;
  font-size: var(--text-sm);
}

/* ===========================================================================
   27i. Customer Profile page (.cp-*) — dense sticky-sidebar + main layout
   =========================================================================== */
.cp-page { gap: var(--sp-3); }

/* Compact top bar with breadcrumb + actions */
.cp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.cp-bc {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-3);
}
.cp-bc a { color: var(--text-3); text-decoration: none; }
.cp-bc a:hover { color: var(--accent); }
.cp-bc-code {
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs);
  color: var(--text);
}

/* Title row */
.cp-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.cp-title { margin: 0 0 6px; line-height: 1.2; }
.cp-meta {
  font-size: var(--text-sm);
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.cp-meta-sep {
  display: inline-block;
  width: 3px; height: 3px;
  background: var(--text-4);
  border-radius: 50%;
}
.cp-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Health pills — colour-coded by recency / activity */
.cp-health-active  { background: oklch(75% 0.16 145 / 0.18); color: oklch(45% 0.18 145); }
.cp-health-steady  { background: oklch(75% 0.15 200 / 0.18); color: oklch(45% 0.18 200); }
.cp-health-risk    { background: oklch(75% 0.18 80  / 0.20); color: oklch(45% 0.18 60);  }
.cp-health-dormant { background: oklch(75% 0.18 25  / 0.18); color: oklch(45% 0.18 25);  }
.cp-health-new     { background: oklch(80% 0.10 250 / 0.18); color: oklch(45% 0.18 250); }
.cp-health-none    { background: var(--surface-2); color: var(--text-3); }

/* Main grid: 280px sticky sidebar + scrollable main */
.cp-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}
.cp-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: sticky;
  top: calc(56px + var(--sp-3));
  max-height: calc(100vh - 56px - var(--sp-4));
  overflow-y: auto;
}
.cp-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

/* Avatar card */
.cp-avatar-card {
  padding: var(--sp-3);
  text-align: center;
}
.cp-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto 10px;
  letter-spacing: -0.02em;
}
.cp-avatar-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cp-avatar-acct {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.cp-since {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

/* Stats / snapshot card */
.cp-stats-card .card-header,
.cp-actions-card .card-header,
.cp-contact-card .card-header,
.cp-addr-card .card-header { padding: 8px 12px; }
.cp-snap { padding: 4px 12px 12px; }
.cp-snap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: var(--text-xs);
  color: var(--text-3);
  border-bottom: 1px dashed var(--border);
}
.cp-snap-row:last-child { border-bottom: none; }
.cp-snap-row strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cp-good { color: oklch(50% 0.18 145); }
.cp-warn { color: oklch(55% 0.18 60); }

/* Quick actions */
.cp-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px 12px 12px;
}
.cp-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast);
  text-align: center;
  line-height: 1.2;
}
.cp-action:hover {
  background: var(--accent-ring);
  border-color: var(--accent);
  color: var(--accent);
}
.cp-action-success:hover { background: oklch(75% 0.18 145 / 0.18); border-color: oklch(50% 0.18 145); color: oklch(40% 0.18 145); }
.cp-action-danger:hover  { background: oklch(75% 0.18 25  / 0.18); border-color: oklch(50% 0.18 25);  color: oklch(40% 0.18 25);  }
.cp-action-ico { font-size: 18px; line-height: 1; }

/* Contact + address cards */
.cp-contact { padding: 4px 12px 12px; }
.cp-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--text-xs);
  color: var(--text-2);
  border-bottom: 1px dashed var(--border);
}
.cp-contact-row:last-child { border-bottom: none; }
.cp-contact-row a { color: var(--text); text-decoration: none; }
.cp-contact-row a:hover { color: var(--accent); }
.cp-contact-ico {
  width: 18px;
  flex: 0 0 auto;
  text-align: center;
  color: var(--text-3);
}
.cp-addr { padding: 4px 12px 12px; }
.cp-addr-block {
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.cp-addr-block:last-child { border-bottom: none; }
.cp-addr-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 600;
}
.cp-addr-text {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-top: 2px;
  line-height: 1.4;
}
.cp-addr-same {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-style: italic;
}

/* KPI strip in main column */
.cp-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-2);
}
.cp-kpi {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.cp-kpi-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
}
.cp-kpi-value {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-top: 2px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.cp-kpi-hint {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3);
}

/* Credit usage bar */
.cp-credit-bar {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.cp-credit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-bottom: 6px;
}
.cp-credit-track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.cp-credit-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s;
}

/* Tabs */
.cp-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.cp-tab {
  padding: 8px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-3);
  transition: all var(--t-fast);
  white-space: nowrap;
}
.cp-tab:hover { color: var(--text); }
.cp-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.cp-tab-badge {
  display: inline-block;
  background: var(--surface-2);
  color: var(--text-3);
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: 4px;
  font-weight: 500;
}
.cp-tab.is-active .cp-tab-badge {
  background: var(--accent-ring);
  color: var(--accent);
}
.cp-tab-pane {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-2);
}

/* Two-col grid for overview cards */
.cp-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

/* Definition rows used in overview cards */
.cp-def-grid { padding: 4px 12px 12px; }
.cp-def-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 5px 0;
  font-size: var(--text-xs);
  border-bottom: 1px dashed var(--border);
}
.cp-def-row:last-child { border-bottom: none; }
.cp-def-row > span:first-child { color: var(--text-3); }
.cp-def-row strong {
  color: var(--text);
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cp-hold-row { color: var(--color-error, #c0392b); }

/* Activity timeline */
.cp-timeline {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-timeline-item {
  display: flex;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.cp-timeline-item:last-child { border-bottom: none; }
.cp-timeline-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex: 0 0 auto;
  background: var(--text-3);
}
.cp-tl-order   { background: oklch(60% 0.18 230); }
.cp-tl-payment { background: oklch(60% 0.18 145); }
.cp-tl-invoice { background: oklch(60% 0.18 60);  }
.cp-timeline-body { flex: 1; min-width: 0; }
.cp-timeline-title {
  font-size: var(--text-sm);
  color: var(--text);
  line-height: 1.3;
}
.cp-timeline-title a { color: var(--accent); text-decoration: none; }
.cp-timeline-title a:hover { text-decoration: underline; }
.cp-timeline-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Responsive */
@media (max-width: 1100px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-sidebar { position: static; max-height: none; overflow: visible; }
  .cp-kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .cp-2col { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .cp-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .cp-actions { grid-template-columns: 1fr; }
}

/* ===========================================================================
   27h. Image zoom — centered compact dialog (NOT full-screen)
   =========================================================================== */
img.zoomable,
.zoomable img,
[data-zoom-src] {
  cursor: zoom-in;
  transition: filter 120ms ease-out, transform 200ms ease-out;
}
img.zoomable:hover,
.zoomable:hover img,
[data-zoom-src]:hover { filter: brightness(1.05); }

/* ── Inline outlined icons (window.icon) + status dots (window.dot) ── */
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex: none; }
.ico + span, .ico + * { vertical-align: middle; }
button .ico, a .ico, .btn .ico, label .ico { pointer-events: none; }
.ico-loader { animation: spin 0.8s linear infinite; }   /* loader glyph spins automatically */
.sdot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; vertical-align: -0.04em; flex: none; background: currentColor; }
.sdot-red    { background: var(--color-error,   #dc2626); }
.sdot-green  { background: var(--color-success, #16a34a); }
.sdot-amber  { background: var(--color-warning, #d97706); }
.sdot-orange { background: #ea580c; }
.sdot-blue   { background: var(--color-accent,  #2563eb); }
.sdot-purple { background: #7c3aed; }
.sdot-grey   { background: var(--text-3,        #94a3b8); }
.sdot-dark   { background: #334155; }
.sdot-brown  { background: #92400e; }

/* ── Invoices AR workspace — full-width table + insights strip ──────── */
.inv-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }

/* AR detail redesign — filter chips, due pills, payment progress, delivery state */
.inv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap; transition: border-color var(--t-fast), background var(--t-fast); }
.inv-chip:hover { border-color: var(--border-strong); }
.inv-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.inv-chip-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.inv-due-pill { display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; }
.inv-due-pill.od    { background: var(--danger-soft); color: var(--danger-text); }
.inv-due-pill.today { background: var(--warning-soft); color: var(--warning-text); }
.inv-due-pill.soon  { background: var(--warning-soft); color: var(--warning-text); }
.inv-paybar { height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; margin-top: 4px; min-width: 64px; }
.inv-paybar i { display: block; height: 100%; background: var(--success); border-radius: 2px; }
.inv-deliv { display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.inv-deliv.ok   { background: var(--success-soft); color: var(--success-text); }
.inv-deliv.mid  { background: var(--accent-soft);  color: var(--accent-text); }
.inv-deliv.wait { background: var(--surface-3);    color: var(--text-2); }
.inv-deliv.bad  { background: var(--danger-soft);  color: var(--danger-text); }
.inv-cell-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; white-space: nowrap; }

/* AR-family table discipline — column grid + tidy two-line cells (playbook
   §1.10). Shared by the Invoices and Proformas list tables. */
#invoicesTable th, #invoicesTable td,
#proformasTable th, #proformasTable td { border-right: 1px solid var(--border); }
#invoicesTable th:last-child, #invoicesTable td:last-child,
#proformasTable th:last-child, #proformasTable td:last-child { border-right: 0; }
#invoicesTable tbody td,
#proformasTable tbody td { vertical-align: top; line-height: 1.35; padding: 10px 8px; }
#invoicesTable td.inv-nowrap, #invoicesTable th.inv-nowrap,
#proformasTable td.inv-nowrap, #proformasTable th.inv-nowrap { white-space: nowrap; }
#invoicesTable .inv-cust-name,
#proformasTable .inv-cust-name { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#invoicesTable td.ol-cell-actions,
#proformasTable td.ol-cell-actions { white-space: nowrap; }
.inv-actions { display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.inv-row-menu { min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 4px; z-index: var(--z-tooltip); }
.inv-row-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: var(--r-md); font-size: 14px; color: var(--text); cursor: pointer; }
.inv-row-menu button:hover { background: var(--surface-2); }
.inv-menu-tpl { display: none; }
.inv-kpi { padding: 12px 14px; }
.inv-kpi .k-label { font-size: 12px; color: var(--text-3); text-transform: uppercase; letter-spacing: .4px; }
.inv-kpi .k-value { font-size: 22px; font-weight: 700; line-height: 1.15; margin-top: 2px; }
.inv-kpi .k-sub { font-size: 12px; color: var(--text-3); }
.inv-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
.inv-insights .card { padding: 12px 14px; }
.inv-insights .side-h { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); margin: 0 0 10px; display: flex; align-items: center; gap: 6px; }

/* AR page — compact vertical rhythm: the global .page-wrapper gap (16px)
   PLUS per-section margins stacked into fat dead bands between sections. */
.inv-page { gap: 10px; }
.inv-page .inv-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.inv-page .page-subtitle { margin: 0; }
.inv-page .inv-insights2 { margin-top: 0; }
.inv-page .inv-main { margin-top: 0; }
.inv-sv-inline { margin-left: auto; }
.inv-sv-inline .saved-views-row { padding: 0; margin: 0; }

/* Document detail v2 (invoice + proforma) — lifecycle strip, quick facts,
   history list. Shared by #/invoices/:id and #/proformas/:id. */
.dlc { display: flex; align-items: flex-start; gap: 0; padding: 14px 18px 12px; overflow-x: auto; }
.dlc-node { flex: 1; min-width: 110px; text-align: center; position: relative; }
.dlc-node::before { content: ''; position: absolute; top: 9px; left: -50%; width: 100%; height: 2px; background: var(--border); }
.dlc-node:first-child::before { display: none; }
.dlc-node.done::before, .dlc-node.current::before { background: var(--success); }
.dlc-node.dead::before { background: var(--danger); }
.dlc-dot { width: 20px; height: 20px; border-radius: 50%; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; background: var(--surface-3); color: var(--text-3); position: relative; z-index: 1; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.dlc-node.done .dlc-dot { background: var(--success); color: #fff; box-shadow: 0 0 0 1px var(--success); }
.dlc-node.current .dlc-dot { background: var(--surface); color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.dlc-node.dead .dlc-dot { background: var(--danger); color: #fff; box-shadow: 0 0 0 1px var(--danger); }
.dlc-dot svg { width: 11px; height: 11px; }
.dlc-label { font-size: 13px; font-weight: 600; }
.dlc-node.dead .dlc-label { color: var(--danger-text); }
.dlc-sub { font-size: 10.5px; color: var(--text-3); margin-top: 1px; }
.dqf { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.dqf-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 14px; min-width: 0; }
.dqf-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.dqf-value { font-size: 15px; font-weight: 600; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dqf-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Full-width info panels row (order-page style — replaces the 320px sidebar) */
.dpx { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); align-items: stretch; }
.dpx-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; }
.dpx-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dpx-scroll { max-height: 200px; overflow-y: auto; min-height: 0; }
@media (max-width: 1100px) { .dpx { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dpx { grid-template-columns: 1fr; } }

/* Sticky bottom totals bar (mirrors the order page's onv2-page-foot) */
.dfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; row-gap: 8px; padding: 8px 14px; background: var(--surface); border: 1px solid var(--border); border-top: 2px solid color-mix(in oklch, var(--accent) 40%, var(--border)); border-radius: var(--r-md) var(--r-md) 0 0; margin-top: var(--sp-3); font-size: var(--text-sm); position: sticky; bottom: 0; z-index: 20; }
.dfoot-stats { display: flex; align-items: center; flex-wrap: wrap; gap: 0; min-width: 0; }
.dfoot-stat { padding: 0 12px; border-right: 1px solid var(--border); white-space: nowrap; font-size: 12.5px; color: var(--text-2); }
.dfoot-stat:first-child { padding-left: 0; }
.dfoot-stat:last-child { border-right: 0; }
.dfoot-stat strong { color: var(--text); font-variant-numeric: tabular-nums; }
.dfoot-stat.dfoot-total strong { font-size: 15px; }
.dfoot-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* Product thumbnails in detail-page items tables */
.dprod { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dprod > div { min-width: 0; }
.dthumb { width: 38px; height: 38px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2); flex: none; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); }
.dthumb svg { width: 16px; height: 16px; }
/* Items tables on the billing detail pages get the order-page treatment:
   a dedicated image column with a larger thumb + blue mono product code. */
.onv2-items-table .dthumb { width: 52px; height: 52px; border-radius: var(--r-md); }
.dprod-code { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 600; }
.dcust-btn { white-space: nowrap; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-md); padding: 4px 9px; transition: border-color var(--t-fast), background var(--t-fast); }
.dcust-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.dcust-on  { color: var(--accent); font-weight: 700; }
.dcust-off { color: var(--text-2); }
.dcust-btn:hover .dcust-off { color: var(--accent-text); }
/* The onv2-col-* minimums are tuned for the order builder's ~1018px panel;
   these detail pages are FULL width (~1336px @1440), so without overrides
   PRODUCT swallowed all spare space while the money columns sat squeezed at
   their minimums. Looser mins re-balance the row. */
.ditems .onv2-col-num      { min-width: 32px; width: 32px; }
.ditems .onv2-col-stock    { min-width: 60px; }
.ditems .onv2-col-qty      { min-width: 72px; }
.ditems .onv2-col-price    { min-width: 92px; }
.ditems .onv2-col-default  { min-width: 70px; }
.ditems .onv2-col-disc     { min-width: 62px; }
.ditems .onv2-col-disc-amt { min-width: 86px; }
.ditems .onv2-col-vat      { min-width: 52px; }
.ditems .onv2-col-vat-amt  { min-width: 82px; }
.ditems .onv2-col-line     { min-width: 94px; }
.ditems .onv2-col-total    { min-width: 104px; }
.ditems .onv2-col-cust     { min-width: 110px; }
.ditems .onv2-col-title    { min-width: 260px; }
.ditems th.onv2-col-qty, .ditems td.onv2-col-qty,
.ditems th.onv2-col-price, .ditems td.onv2-col-price,
.ditems th.onv2-col-disc, .ditems td.onv2-col-disc,
.ditems th.onv2-col-disc-amt, .ditems td.onv2-col-disc-amt { text-align: right; }
.ditems td .form-input-sm { text-align: right; }

.dhx { display: grid; gap: 0; }
.dhx-row { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.dhx-row:last-child { border-bottom: 0; }
.dhx-when { flex: none; color: var(--text-3); font-size: 12px; white-space: nowrap; padding-top: 1px; }
.dhx-what { min-width: 0; line-height: 1.4; }
.dhx-who { color: var(--text-3); font-size: 12px; }
@media (max-width: 900px) { .dqf { grid-template-columns: repeat(2, 1fr); } }

/* AR insights v2 — one slim strip instead of three tall cards */
.inv-insights2 { display: flex; align-items: stretch; gap: 0; margin-top: var(--sp-3); padding: 10px 0; }
.inv-insights2 .ii2-sec { flex: 1; min-width: 0; padding: 0 16px; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.inv-insights2 .ii2-sec + .ii2-sec { border-left: 1px solid var(--border); }
.inv-insights2 .ii2-age { flex: 1.15; }
.inv-insights2 .ii2-debt { flex: 1.45; }
.inv-insights2 .ii2-rate { flex: 0.9; }
.ii2-h { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.ii2-h svg { width: 13px; height: 13px; }
.ii2-h-val { margin-left: auto; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text); }
.ii2-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-3); }
.ii2-bar i { display: block; height: 100%; }
.ii2-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--text-2); }
.ii2-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ii2-legend strong { color: var(--text); font-weight: 600; }
.ii2-debtors { display: flex; gap: 6px; min-width: 0; }
.ii2-debtor { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-lg); padding: 6px 10px; font-size: 13px; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); text-align: left; }
.ii2-debtor:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.ii2-debtor-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ii2-debtor strong { margin-left: auto; white-space: nowrap; color: var(--warning-text); font-weight: 700; }
.ii2-rate-row { display: flex; align-items: center; gap: 10px; }
.ii2-pct { font-size: 20px; font-weight: 700; color: var(--success); line-height: 1; }
.ii2-rbar { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.ii2-rbar i { display: block; height: 100%; background: var(--success); border-radius: 3px; }
.ii2-rate-sub { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ii2-empty { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
@media (max-width: 1100px) {
  .inv-insights2 { flex-direction: column; gap: 10px; padding: 12px 0; }
  .inv-insights2 .ii2-sec + .ii2-sec { border-left: 0; border-top: 1px solid var(--border); padding-top: 10px; }
}
.inv-main { display: block; margin-top: var(--sp-3); }
.inv-left { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
/* (Relic removed: the old 304px-sidebar layout gave the table card
   flex:1 + min-height:440px and stretched .table-wrap to fill — with the
   sidebar long gone that just painted dead space under short tables.) */
.inv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.inv-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: none; background: none; border-bottom: 2px solid transparent; color: var(--text-2); font-weight: 500; cursor: pointer; white-space: nowrap; font-size: 14px; border-radius: 7px 7px 0 0; transition: color var(--t-fast), background var(--t-fast); }
.inv-tab:hover { background: color-mix(in oklch, var(--text) 4%, transparent); }
.inv-tab.active { border-bottom-color: var(--color-accent); color: var(--color-accent); font-weight: 600; }
/* Count chip — a consistent rounded pill on EVERY tab (was faded text on plain tabs). */
.inv-tab .t-n { display: inline-grid; place-items: center; min-width: 18px; height: 17px; padding: 0 6px; border-radius: 999px; background: color-mix(in oklch, var(--text) 8%, transparent); color: var(--text-2); font-size: 10.5px; font-weight: 600; opacity: 1; margin-left: 0; font-variant-numeric: tabular-nums; transition: background var(--t-fast), color var(--t-fast); }
.inv-tab:hover .t-n { background: color-mix(in oklch, var(--text) 12%, transparent); }

/* Lifecycle-color overlay for .inv-tab — used by Invoices, Proformas,
   Quotations, Credit Notes, Debit Notes, Purchase Orders. When a tab
   ALSO has a .tab-stage-* class, it adopts that stage's colour for
   hover/active state + colored badge tint. */
.inv-tab[class*="tab-stage-"]:hover { color: var(--tab-color, var(--text)); }
.inv-tab[class*="tab-stage-"] .t-n {
  opacity: 1;
  padding: 0 6px; border-radius: 9px; min-height: 16px;
  background: var(--tab-soft, var(--surface-3));
  color: var(--tab-color, var(--text-3));
  font-size: 10.5px; font-weight: 600;
  display: inline-grid; place-items: center;
  min-width: 18px; height: 17px; margin-left: 0;
  transition: all .15s;
}
.inv-tab[class*="tab-stage-"].active {
  color: var(--tab-color, var(--accent));
  border-bottom-color: var(--tab-color, var(--accent));
}
.inv-tab[class*="tab-stage-"].active .t-n {
  background: var(--tab-color, var(--accent));
  color: #fff;
}
@media (max-width: 1100px) {
  .inv-insights { grid-template-columns: repeat(2, 1fr); }
  .inv-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .inv-kpis { grid-template-columns: repeat(2, 1fr); }
  .inv-insights { grid-template-columns: 1fr; }
}

/* Just provides a positioning context for the magnifier badge ::after —
   does NOT set `display`, so it can be safely combined with classes like
   .pd-img-box (flex) without breaking their centering. */
.zoomable-wrap { position: relative; }
.zoomable-wrap::after {
  content: "";
  position: absolute;
  top: 6px; right: 6px;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  color: #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 120ms ease-out;
  pointer-events: none;
}
.zoomable-wrap:hover::after { opacity: 1; }

/* Dim backdrop — fixes to viewport so the dialog can centre over it */
.img-zoom-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 160ms ease-out;
}
.img-zoom-backdrop.open { opacity: 1; }

/* The dialog — fixed size, centred via the flex backdrop, NOT full-screen */
.img-zoom-figure {
  position: relative;
  width: min(600px, 92vw);
  max-height: min(85vh, 720px);
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: scale(0.94);
  opacity: 0;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease-out;
}
.img-zoom-backdrop.open .img-zoom-figure {
  transform: scale(1);
  opacity: 1;
}

/* Stage — fixed square area where the image is centred both axes.
   Uses position:relative + absolutely-positioned <img> so percentage sizing
   doesn't break inside the flex column (auto-height flex parents nullify
   percent heights → image overflows and is clipped by overflow:hidden). */
.img-zoom-stage {
  position: relative;
  flex: 1 1 auto;
  background: var(--surface-2);
  min-height: 360px;
  max-height: calc(85vh - 70px);
  height: calc(85vh - 70px);
  overflow: hidden;
}
.img-zoom-img {
  position: absolute;
  inset: 24px;                    /* 24px padding inside the stage */
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100% - 48px);
  max-height: calc(100% - 48px);
  margin: auto;
  object-fit: contain;             /* never crop — letterbox/pillarbox if needed */
  object-position: center;
  background: #fff;
  border-radius: 4px;
  transition: opacity 150ms ease-out;
  cursor: zoom-out;
  user-select: none;
}

/* Caption strip below the image */
.img-zoom-caption {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
}
.img-zoom-caption-text { min-width: 0; flex: 1; }
.img-zoom-title {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.img-zoom-code {
  font-size: 12px;
  color: var(--text-3);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.img-zoom-counter {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Controls */
.img-zoom-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.img-zoom-close:hover { background: #fff; color: var(--color-error, #c0392b); }

.img-zoom-nav {
  position: absolute;
  top: calc(50% - 30px);              /* sit on the image stage, not over caption */
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease-out, color 120ms ease-out;
}
.img-zoom-nav:hover { background: #fff; color: var(--accent); }
.img-zoom-prev { left: 10px; }
.img-zoom-next { right: 10px; }

@media (max-width: 640px) {
  .img-zoom-backdrop { padding: 12px; }
  .img-zoom-figure { width: 100%; max-height: 90vh; }
  .img-zoom-stage { min-height: 260px; padding: 16px; }
}

/* ===========================================================================
   27l. Rich product-search dropdown (shared by debit/credit notes, POs,
   stock-take, quotation detail). Replaces the simple text-only dropdown
   project-wide with image + meta + stock chip + price + ★ for customer-
   specific pricing.
   =========================================================================== */
.search-dropdown.rich-search-list,
.rich-search-list {
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, var(--r-md, 8px));
  background: var(--color-surface, var(--surface));
  max-height: 360px;
  overflow-y: auto;
  box-shadow: 0 8px 20px oklch(20% 0.02 240 / 0.10);
}
.rsr-loadmore {
  padding: 10px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-text-3, var(--text-3));
  border-top: 1px solid var(--color-border, var(--border));
}
.rich-search-empty {
  padding: var(--sp-6, 24px) var(--sp-4, 16px);
  text-align: center;
  color: var(--color-text-3, var(--text-3));
  font-size: var(--text-sm, 13px);
}
.rsr-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border, var(--border));
  cursor: pointer;
  transition: background 120ms ease-out;
}
.rsr-row.is-selected {
  background: var(--accent-soft, oklch(95% 0.04 248)) !important;
}
.rsr-check-wrap {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  margin: -4px 0 -4px -4px;
}
.rsr-check {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
}
/* Sticky "N selected · Add all" footer at the bottom of the dropdown */
.rsr-multi-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--accent-soft, oklch(95% 0.04 248));
  border-top: 1px solid var(--color-border, var(--border));
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 -4px 12px oklch(20% 0.02 240 / 0.08);
}
.rsr-multi-footer strong { color: var(--accent, oklch(55% 0.18 248)); font-size: var(--text-base); }
.rsr-row:last-child { border-bottom: none; }
.rsr-row.is-active,
.rsr-row.is-hover,
.rsr-row:hover {
  background: var(--accent-ring, oklch(70% 0.12 230 / 0.10));
}
.rsr-img {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm, var(--r-sm, 6px));
  background: var(--color-surface-2, var(--surface-2));
  object-fit: contain;
  border: 1px solid var(--color-border, var(--border));
}
.rsr-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--color-text-3, var(--text-3));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.rsr-main { flex: 1 1 auto; min-width: 0; }
.rsr-title {
  font-size: var(--text-sm, 13px);
  font-weight: 500;
  color: var(--color-text, var(--text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rsr-star { color: var(--color-warning, #c98c0a); margin-right: 4px; }
.rsr-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-xs, 11px);
  color: var(--color-text-3, var(--text-3));
  margin-top: 2px;
}
.rsr-meta .mono { color: var(--color-text-2, var(--text-2)); }
.rsr-code { font-weight: 500; }
.rsr-sep { opacity: 0.6; }
/* Secondary meta row — small status chips (stock, MOQ, VAT, saved-price).
   Sits beneath the code/barcode/category line so the primary metadata
   stays uncluttered. */
.rsr-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}
.rsr-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-surface-2, var(--surface-2));
  font-weight: 500;
  font-size: var(--text-xs, 11px);
  color: var(--color-text-2, var(--text-2));
  white-space: nowrap;
  line-height: 1.4;
}
.rsr-chip.rsr-stock                  { background: color-mix(in oklch, var(--success, oklch(70% 0.16 145)) 14%, transparent); color: var(--success, #1f9b6c); }
.rsr-chip.rsr-stock.rsr-stock-out    { background: color-mix(in oklch, var(--danger, #d63838) 14%, transparent);   color: var(--danger, #c0392b); }
.rsr-chip.rsr-stock.rsr-stock-low    { background: color-mix(in oklch, var(--warning, #d4831a) 16%, transparent);  color: var(--warning, #c98c0a); }
.rsr-chip.rsr-moq                    { background: color-mix(in oklch, var(--accent, #2563eb) 14%, transparent);   color: var(--accent, #2563eb); }
.rsr-chip.rsr-moq.rsr-moq-warn       { background: color-mix(in oklch, var(--warning, #d4831a) 16%, transparent);  color: var(--warning, #c98c0a); }
.rsr-chip.rsr-vat                    { background: var(--color-surface-2, var(--surface-2)); color: var(--color-text-3, var(--text-3)); }
.rsr-chip.rsr-saved                  { background: color-mix(in oklch, var(--warning, #d4831a) 14%, transparent);  color: var(--warning, #c98c0a); font-weight: 600; }
.rsr-cat                             { color: var(--color-text-3, var(--text-3)); }

/* Backwards-compat: the original .rsr-stock outside .rsr-chips still
   exists in some callers. Keep the pill styling for those, but no longer
   pushes itself right via margin-left:auto. */
.rsr-stock:not(.rsr-chip) {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-surface-2, var(--surface-2));
  font-weight: 500;
  font-size: var(--text-xs, 11px);
}
.rsr-stock:not(.rsr-chip).rsr-stock-out { background: oklch(60% 0.20 25 / 0.12); color: var(--color-error, #c0392b); }
.rsr-stock:not(.rsr-chip).rsr-stock-low { background: oklch(75% 0.18 80 / 0.18); color: var(--color-warning, #c98c0a); }

/* Barcode visual — sits between the main meta block and the price column
   in the product-search dropdown. Renders the existing
   /api/products/:id/barcode-image endpoint via <img> with token in the
   query string (auth middleware accepts ?token=). loading=lazy so a
   783-row search doesn't fire 783 image requests at once — only the
   ~15 visible rows pull. Hidden gracefully via onerror when the product
   has no barcode AND no product_code (rare). */
.rsr-barcode {
  flex: 0 0 auto;
  width: 180px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-radius: var(--r-sm, 4px);
  background: #ffffff;
  border: 1px solid var(--color-border, var(--border));
  overflow: hidden;
}
.rsr-barcode img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Slight contrast boost — bwip-js outputs a clean black-on-white image
     by default, which can look washed-out on dark sidebars. */
  filter: contrast(1.05);
}
.rsr-barcode-empty {
  /* Reserve the same space when a product has no barcode so columns
     in the dropdown stay aligned row-to-row. */
  background: transparent;
}
.rsr-price {
  flex: 0 0 auto;
  text-align: right;
  min-width: 90px;
}
.rsr-price-eff {
  font-weight: 600;
  font-size: var(--text-sm, 13px);
  color: var(--color-text, var(--text));
  font-variant-numeric: tabular-nums;
}
.rsr-price-default {
  font-size: 12px;
  color: var(--color-text-3, var(--text-3));
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   27m. Quotation Detail page (qd-*)
   Sticky-sidebar + main layout mirroring product/customer detail.
   =========================================================================== */
.quote-detail-page { padding-bottom: 100px; /* room for sticky save bar */ }

.qd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3, 12px);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.qd-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  flex-wrap: wrap;
}
.qd-back-link {
  font-size: var(--text-sm, 13px);
  color: var(--color-text-2, var(--text-2));
  text-decoration: none;
}
.qd-back-link:hover { color: var(--accent); text-decoration: underline; }
.qd-num {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text, var(--text));
}
.qd-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
}

.qd-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--text-xs, 11px);
  font-weight: 500;
  background: var(--color-surface-2, var(--surface-2));
  color: var(--color-text-2, var(--text-2));
}
.qd-chip-success { background: oklch(80% 0.16 145 / 0.14); color: oklch(40% 0.16 145); }
.qd-chip-warning { background: oklch(75% 0.18 80 / 0.18); color: oklch(45% 0.18 80); }
.qd-chip-danger  { background: oklch(60% 0.20 25 / 0.14); color: oklch(45% 0.20 25); }
.qd-chip-muted   { background: var(--color-surface-2, var(--surface-2)); color: var(--color-text-3, var(--text-3)); }

.qd-submeta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-xs, 11px);
  color: var(--color-text-3, var(--text-3));
  margin-bottom: var(--sp-4, 16px);
  flex-wrap: wrap;
}
.qd-submeta-dot { opacity: 0.5; }

/* More actions dropdown */
.qd-more-menu { position: relative; }
.qd-more-menu > summary { list-style: none; cursor: pointer; }
.qd-more-menu > summary::-webkit-details-marker { display: none; }
.qd-more-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 220px;
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 8px);
  padding: 4px 0;
  box-shadow: 0 8px 24px oklch(20% 0.02 240 / 0.12);
}
.qd-more-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-size: var(--text-sm, 13px);
  color: var(--color-text, var(--text));
  cursor: pointer;
}
.qd-more-item:hover { background: var(--color-surface-2, var(--surface-2)); }
.qd-more-danger { color: var(--color-error, #c0392b); }
.qd-more-sep { height: 1px; background: var(--color-border, var(--border)); margin: 4px 0; }

/* Status workflow */
.qd-workflow {
  display: flex;
  align-items: center;
  gap: 0;
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  background: var(--color-surface-2, var(--surface-2));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--sp-4, 16px);
}
.qd-workflow .wf-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.qd-workflow .wf-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--color-surface, var(--surface));
  border: 2px solid var(--color-border, var(--border));
  color: var(--color-text-3, var(--text-3));
}
.qd-workflow .wf-label {
  font-size: var(--text-sm, 13px);
  font-weight: 500;
  color: var(--color-text-3, var(--text-3));
}
.qd-workflow .wf-line {
  flex: 1 1 auto;
  height: 2px;
  background: var(--color-border, var(--border));
  min-width: 32px;
  margin: 0 8px;
}
.qd-workflow .wf-done .wf-dot {
  background: oklch(52% 0.17 145);
  border-color: oklch(52% 0.17 145);
  color: #fff;
}
.qd-workflow .wf-done .wf-label { color: var(--color-text, var(--text)); }
.qd-workflow .wf-line-done { background: oklch(52% 0.17 145); }
.qd-workflow .wf-current .wf-dot {
  background: var(--color-surface, var(--surface));
  border-color: var(--accent);
  color: var(--accent);
}
.qd-workflow .wf-current .wf-label { color: var(--accent); }

.qd-status-banner {
  padding: 10px 14px;
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm, 13px);
  margin-bottom: var(--sp-4, 16px);
  background: var(--color-surface-2, var(--surface-2));
  border: 1px solid var(--color-border, var(--border));
}
.qd-status-banner.qd-status-rejected { background: oklch(60% 0.20 25 / 0.10); border-color: oklch(60% 0.20 25 / 0.30); color: oklch(40% 0.20 25); }
.qd-status-banner.qd-status-expired  { background: oklch(75% 0.18 80 / 0.10); border-color: oklch(75% 0.18 80 / 0.30); color: oklch(45% 0.18 80); }

/* 2-col grid */
.qd-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--sp-4, 16px);
  align-items: start;
}
@media (max-width: 1100px) {
  .qd-grid { grid-template-columns: 1fr; }
}

.qd-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4, 16px);
  min-width: 0;
}

.qd-section {
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 8px);
  padding: var(--sp-4, 16px);
}
.qd-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3, 12px);
}
.qd-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, var(--text));
}
.qd-section-meta {
  font-size: var(--text-xs, 11px);
  color: var(--color-text-3, var(--text-3));
  margin-left: 8px;
}

/* ===========================================================================
   27n. New Order / New Quotation power features (OQP)
   Includes a 2-col split layout (items left + sticky sidebar right) so the
   items table fills the viewport instead of wasting vertical space.
   =========================================================================== */

/* Split layout */
.onv2-split { padding-bottom: 80px; /* room for sticky totals bar */ position: relative; }
.onv2-body {
  /* Sidebar moved out 2026-05-23 → body is now a single full-width column.
     The 5 meta panels live in .onv2-header-strip ABOVE the items table so
     the table can use the full page width. */
  display: block;
  margin-top: var(--sp-3, 12px);
}
.onv2-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
}

/* ── Header strip — 5 chip-cards above the items table ─────────────
   Each card is a <details> element. Summary stays compact (icon +
   label + value + sub-line); clicking expands an absolutely-positioned
   popover below the card so the items table never gets pushed down. */
.onv2-header-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  position: relative; /* anchor for the absolute-positioned popover bodies */
  z-index: 5;
}
@media (max-width: 1100px) {
  .onv2-header-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .onv2-header-strip { grid-template-columns: 1fr 1fr; }
}
.onv2-hs-card {
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--r-md, 8px);
  position: relative;
  transition: border-color 0.12s, box-shadow 0.12s;
  /* details element has its own bg sometimes — kill it */
  list-style: none;
}
/* Customer card is a <button> that opens the picker modal directly
   instead of an inline popover. Strip the default button styling so it
   visually matches the other <details> cards. */
button.onv2-hs-card-modal {
  all: unset;
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--r-md, 8px);
  position: relative;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
  cursor: pointer;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  user-select: none;
  text-align: left;
  box-sizing: border-box;
}
button.onv2-hs-card-modal:hover {
  border-color: var(--accent, #2563eb);
  background: color-mix(in oklch, var(--accent, #2563eb) 4%, var(--color-surface, var(--surface)));
}
button.onv2-hs-card-modal:focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 1px;
}
/* When the Customer card is empty (no customer picked yet), match the
   dashed-accent treatment used for the other empty chips. */
button.onv2-hs-card-modal.is-empty {
  border-style: dashed;
}
button.onv2-hs-card-modal.is-empty .onv2-hs-value { color: var(--accent, #2563eb); }
/* Replace the chevron with an edit icon for the modal-style card. */
button.onv2-hs-card-modal .onv2-hs-chev {
  color: var(--color-text-3, var(--text-3));
  width: 14px; height: 14px;
}
button.onv2-hs-card-modal .onv2-hs-chev svg { width: 14px; height: 14px; }
button.onv2-hs-card-modal:hover .onv2-hs-chev { color: var(--accent, #2563eb); }
.onv2-hs-card:hover { border-color: var(--border-strong, color-mix(in oklch, var(--accent) 20%, var(--border))); }
.onv2-hs-card[open] {
  border-color: var(--accent, #2563eb);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  z-index: 10;
}
.onv2-hs-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  user-select: none;
}
.onv2-hs-card > summary::-webkit-details-marker,
.onv2-hs-card > summary::marker { display: none; }
.onv2-hs-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent, #2563eb);
  flex-shrink: 0;
}
.onv2-hs-icon svg { width: 16px; height: 16px; }
.onv2-hs-text {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1;
}
.onv2-hs-label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-3, var(--text-3));
}
.onv2-hs-value {
  font-size: 14px; font-weight: 600;
  color: var(--color-text, var(--text));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.onv2-hs-sub {
  font-size: 12px;
  color: var(--color-text-3, var(--text-3));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.onv2-hs-chev {
  font-size: 12px;
  color: var(--color-text-3, var(--text-3));
  transition: transform 0.12s;
  flex-shrink: 0;
}
.onv2-hs-card[open] .onv2-hs-chev { transform: rotate(180deg); }

/* Empty-state styling — when nothing is picked, accent-tint background */
.onv2-hs-card.is-empty { border-style: dashed; }
.onv2-hs-card.is-empty .onv2-hs-value { color: var(--accent, #2563eb); }

/* The popover body — absolute-positioned so the items table doesn't get
   shoved down when a card opens. Aligned to the card's left edge, with
   width clamped between the card width and a sensible max so a wide
   ORDER DETAILS form still fits comfortably. Single-open is enforced
   in JS (noHsSetupCards) so two popovers can never overlap. */
.onv2-hs-body {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 320px;
  max-width: 420px;
  width: max-content;
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--accent, #2563eb);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  z-index: 50;
  max-height: 70vh;
  overflow-y: auto;
}
/* Customer popover needs more width — it holds the searchable-select,
   the credit-utilisation widget, often-buys, recent-orders, etc. */
.onv2-header-strip .onv2-hs-card[data-card="customer"] .onv2-hs-body {
  min-width: 380px;
  max-width: 480px;
}
/* Order details popover holds a denser form — same wider sizing. */
.onv2-header-strip .onv2-hs-card[data-card="order"] .onv2-hs-body {
  min-width: 360px;
  max-width: 440px;
}
/* Right-edge cards' popovers anchor right so they don't overflow viewport. */
.onv2-header-strip .onv2-hs-card:nth-child(n+4) .onv2-hs-body {
  left: auto; right: 0;
}
@media (max-width: 720px) {
  .onv2-hs-body { left: 0 !important; right: 0 !important; min-width: 280px; }
}
.onv2-hs-body .onv2-side-field { margin-bottom: 8px; }
.onv2-hs-body .onv2-side-field:last-child { margin-bottom: 0; }
.onv2-hs-body .form-label { font-size: 12px; margin-bottom: 3px; display: block; }
.onv2-hs-body .onv2-side-row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px;
}
.onv2-hs-body .onv2-quick { display: flex; gap: 4px; margin-top: 4px; }
.onv2-hs-body .onv2-quick-btn {
  padding: 3px 8px; font-size: 12px;
  background: var(--color-surface-2, var(--surface-2));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--r-sm, 4px);
  cursor: pointer; color: var(--color-text-2, var(--text-2));
}
.onv2-hs-body .onv2-quick-btn:hover { background: var(--color-surface, var(--surface)); }

/* ──────────────────────────────────────────────────────────────────
   Order-DETAIL header-strip variant (added 2026-05-23)
   ────────────────────────────────────────────────────────────────
   The order-detail page (pages/orders.js renderOrderDetailPage) ships
   markup that uses `.onv2-hs-card-*` selectors with a `-card-` infix
   (e.g. .onv2-hs-card-popover, .onv2-hs-card-label, .onv2-hs-card-icon).
   These were left UNSTYLED in the initial b8cf7db commit because the
   New Order builder uses `.onv2-hs-*` without the infix and that's all
   that styles.css covered. Without these rules the popover opens
   in-flow and grows whichever card was clicked, breaking the 5-card
   grid alignment (CUSTOMER tall + the rest short).

   Rather than rename across both pages, mirror the existing rules onto
   the -card- variants so the two parallel naming conventions both
   render identically. Keep the rule blocks side-by-side so a future
   refactor sees the duplication and can collapse it.
*/

/* Chip internals — typography hierarchy (label / value / sub) */
.onv2-hs-card > summary .onv2-hs-card-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent, #2563eb);
  flex-shrink: 0;
}
.onv2-hs-card > summary .onv2-hs-card-icon svg { width: 16px; height: 16px; }
.onv2-hs-card-main {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; flex: 1;
}
.onv2-hs-card-label {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-text-3, var(--text-3));
}
.onv2-hs-card-value {
  font-size: 14px; font-weight: 600;
  color: var(--color-text, var(--text));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.onv2-hs-card-sub {
  font-size: 12px;
  color: var(--color-text-3, var(--text-3));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.onv2-hs-card-caret {
  font-size: 12px;
  color: var(--color-text-3, var(--text-3));
  transition: transform 0.12s;
  flex-shrink: 0;
}
.onv2-hs-card[open] .onv2-hs-card-caret { transform: rotate(180deg); }

/* Popover — absolute-positioned so opening it does NOT change the
   card height. Same shape as .onv2-hs-body (the new-order variant). */
.onv2-hs-card-popover {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 320px;
  max-width: 420px;
  width: max-content;
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--accent, #2563eb);
  border-radius: var(--r-md, 8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  z-index: 50;
  max-height: 70vh;
  overflow-y: auto;
}
.onv2-hs-card-popover-body {
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
}
.onv2-hs-card-popover-foot {
  padding: 8px var(--sp-4, 16px);
  border-top: 1px solid var(--color-border, var(--border));
  display: flex; gap: 6px; flex-wrap: wrap;
  background: var(--color-surface-2, var(--surface-2));
  border-radius: 0 0 var(--r-md, 8px) var(--r-md, 8px);
}
/* Customer + delivery popovers need extra width for the richer body. */
.onv2-header-strip .onv2-hs-card[data-card="customer"] .onv2-hs-card-popover {
  min-width: 360px;
  max-width: 460px;
}
.onv2-header-strip .onv2-hs-card[data-card="delivery"] .onv2-hs-card-popover {
  min-width: 320px;
  max-width: 420px;
}
/* Right-edge cards (CATALOGUE = 4th, NEGOTIATED = 5th) anchor right so
   their popovers don't overflow the viewport. */
.onv2-header-strip .onv2-hs-card:nth-child(n+4) .onv2-hs-card-popover {
  left: auto; right: 0;
}
@media (max-width: 720px) {
  .onv2-hs-card-popover { left: 0 !important; right: 0 !important; min-width: 280px; }
}

/* Sidebar sections */
.onv2-side-section {
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 8px);
  padding: var(--sp-3, 12px);
}
.onv2-side-head {
  font-size: var(--text-xs, 11px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-text-3, var(--text-3));
  margin-bottom: 10px;
}
.onv2-side-field { margin-bottom: 8px; }
.onv2-side-field:last-child { margin-bottom: 0; }
.onv2-side-field .form-label { margin-bottom: 3px; font-size: 12px; }
.onv2-side-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.onv2-side-row-2 .form-label { font-size: 12px; margin-bottom: 3px; }
.onv2-side-check { margin-top: 6px; font-size: var(--text-sm, 13px); display: flex; align-items: flex-start; gap: 6px; }

/* Slim customer panel inside sidebar (overrides the wide row layout) */
.onv2-cust-panel-side {
  background: var(--color-surface-2, var(--surface-2));
  border: none;
  padding: 8px 0 0 0;
  margin: 8px 0 0 0;
  border-top: 1px dashed var(--color-border, var(--border));
}
.onv2-cust-panel-side .onv2-cust-row {
  grid-template-columns: 1fr;
  gap: 8px;
}
.onv2-cust-panel-side .onv2-cust-warnings { margin-top: 0; }
.onv2-cust-panel-side .onv2-cust-actions { flex-wrap: wrap; }
.onv2-cust-panel-side .onv2-often-buys { margin-top: 8px; padding-top: 8px; }

/* Inline price indicator + "save as customer price" button. Sits next to
   the unit-price input in the items table for both New Quotation and
   Quotation Detail pages. */
.oqp-price-cell {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.oqp-price-cell input {
  flex: 1 1 auto;
  min-width: 60px; /* never crush below this — leaves room for "0.50" etc. */
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.oqp-price-ind {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 12px;
  line-height: 1;
  border-radius: 3px;
  cursor: help;
}
.oqp-price-ind-default { display: none; } /* no decoration when price is default */
.oqp-price-ind-saved {
  color: oklch(45% 0.18 80);
  font-size: 13px;
}
.oqp-price-ind-modified {
  background: oklch(75% 0.18 80 / 0.16);
  color: oklch(45% 0.18 80);
}
.oqp-price-ind-changed {
  background: oklch(60% 0.20 25 / 0.14);
  color: oklch(45% 0.20 25);
  font-weight: 600;
}
.oqp-price-save {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: transparent;
  border: 1px dashed var(--color-border, var(--border));
  border-radius: 3px;
  cursor: pointer;
  font-size: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-3, var(--text-3));
  transition: all 120ms ease-out;
  padding: 0;
}
.oqp-price-save:hover {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-ring, oklch(70% 0.12 230 / 0.10));
  color: var(--accent);
}

/* Empty-state hero (centered with icon) */
.onv2-empty-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 60px 24px;
  color: var(--color-text-3, var(--text-3));
}
.onv2-empty-icon { font-size: 36px; opacity: 0.5; }
.onv2-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-2, var(--text-2));
}
.onv2-empty-hint { font-size: var(--text-sm, 13px); text-align: center; max-width: 420px; line-height: 1.5; }
.onv2-empty-hint kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--color-surface-2, var(--surface-2));
  border: 1px solid var(--color-border, var(--border));
  border-radius: 4px;
}



/* "More ▾" dropdown menu */
.onv2-more-menu { position: relative; }
.onv2-more-menu > summary { list-style: none; cursor: pointer; }
.onv2-more-menu > summary::-webkit-details-marker { display: none; }
.onv2-more-panel {
  position: absolute;
  right: 0; top: calc(100% + 4px);
  z-index: 30;
  min-width: 240px;
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 8px);
  padding: 4px 0;
  box-shadow: 0 8px 24px oklch(20% 0.02 240 / 0.12);
}
.onv2-more-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-size: var(--text-sm, 13px);
  color: var(--color-text, var(--text));
  cursor: pointer;
}
.onv2-more-item:hover { background: var(--color-surface-2, var(--surface-2)); }
.onv2-more-toggle { display: flex; align-items: center; gap: 8px; }
.onv2-more-toggle input { margin: 0; }
.onv2-more-sep { height: 1px; background: var(--color-border, var(--border)); margin: 4px 0; }

/* Customer intelligence panel */
.onv2-cust-panel {
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 8px);
  padding: var(--sp-3, 12px);
  margin-bottom: var(--sp-3, 12px);
}
.onv2-cust-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: var(--sp-4, 16px);
  align-items: center;
}
@media (max-width: 1100px) { .onv2-cust-row { grid-template-columns: 1fr; } }
.onv2-cust-credit-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.onv2-cust-credit-pct { font-weight: 600; font-size: var(--text-sm, 13px); color: oklch(52% 0.17 145); }
.onv2-cust-credit-pct.is-warn { color: oklch(55% 0.18 80); }
.onv2-cust-credit-pct.is-over { color: oklch(50% 0.20 25); }
.onv2-cust-credit-bar {
  height: 6px;
  background: var(--color-border, var(--border));
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.onv2-cust-credit-fill {
  height: 100%;
  background: oklch(52% 0.17 145);
  border-radius: 3px;
  transition: width 200ms ease-out;
}
.onv2-cust-credit-fill.is-warn { background: oklch(55% 0.18 80); }
.onv2-cust-credit-fill.is-over { background: oklch(50% 0.20 25); }
.onv2-cust-credit-foot { display: flex; justify-content: space-between; }
.onv2-cust-warnings { display: flex; gap: 6px; flex-wrap: wrap; }
.onv2-cust-warn-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: oklch(75% 0.18 80 / 0.18);
  color: oklch(45% 0.18 80);
  font-size: var(--text-xs, 11px);
  font-weight: 500;
}
.onv2-cust-warn-chip.is-error { background: oklch(60% 0.20 25 / 0.14); color: oklch(45% 0.20 25); }
.onv2-cust-actions { display: flex; gap: 6px; }

/* "Often buys" quick-add chips */
.onv2-often-buys {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--sp-3, 12px);
  padding-top: var(--sp-3, 12px);
  border-top: 1px dashed var(--color-border, var(--border));
}
.onv2-often-chip {
  background: var(--color-surface-2, var(--surface-2));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-sm, 4px);
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  cursor: pointer;
  transition: all 120ms ease-out;
}
.onv2-often-chip:hover {
  border-color: var(--accent);
  background: var(--accent-ring, oklch(70% 0.12 230 / 0.10));
}

/* Second context-row (ref + delivery date + notes) */
.onv2-context-row2 { margin-top: var(--sp-2, 8px); }
.onv2-quick {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.onv2-quick-btn {
  background: var(--color-surface-2, var(--surface-2));
  border: 1px solid var(--color-border, var(--border));
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--color-text-2, var(--text-2));
}
.onv2-quick-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Discount + coupon row */
.onv2-discount-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--sp-3, 12px);
  padding: var(--sp-3, 12px);
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 8px);
  margin-top: var(--sp-2, 8px);
}
@media (max-width: 900px) { .onv2-discount-row { grid-template-columns: 1fr; } }
.onv2-discount-input { display: flex; gap: 6px; align-items: center; }
.onv2-discount-input select { max-width: 80px; }
.onv2-coupon-status { margin-top: 4px; min-height: 1.2em; }

/* Bulk action bar */
.onv2-bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--accent-ring, oklch(70% 0.12 230 / 0.12));
  border: 1px solid var(--accent);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--sp-2, 8px);
  font-size: var(--text-sm, 13px);
}
.onv2-bulk-sep {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  opacity: 0.5;
  margin: 0 4px;
}

/* Items table: new columns */
.onv2-items-table th.onv2-col-num,
.onv2-items-table td.onv2-col-num { text-align: center; color: var(--text-3); }
.onv2-items-table th.onv2-col-check,
.onv2-items-table td.onv2-col-check { padding: 4px 6px; text-align: center; }
/* Disc % / Margin / Disc £ / VAT / Line Net / Line Total — all share the same
   right-align with tabular-nums so the column header reads exactly above the
   right-aligned input or value below it. The earlier (lower-specificity) rule
   at ~5755 set this on the class alone; these higher-specificity selectors
   used to set center, which left the header drifting away from the values. */
.onv2-items-table th.onv2-col-disc,
.onv2-items-table td.onv2-col-disc,
.onv2-items-table th.onv2-col-disc-amt,
.onv2-items-table td.onv2-col-disc-amt,
.onv2-items-table th.onv2-col-vat,
.onv2-items-table td.onv2-col-vat,
.onv2-items-table th.onv2-col-vat-amt,
.onv2-items-table td.onv2-col-vat-amt,
.onv2-items-table th.onv2-col-margin,
.onv2-items-table td.onv2-col-margin,
.onv2-items-table th.onv2-col-line,
.onv2-items-table td.onv2-col-line,
.onv2-items-table th.onv2-col-total,
.onv2-items-table td.onv2-col-total,
.onv2-items-table th.onv2-col-qty,
.onv2-items-table td.onv2-col-qty,
.onv2-items-table th.onv2-col-price,
.onv2-items-table td.onv2-col-price,
.onv2-items-table th.onv2-col-stock,
.onv2-items-table td.onv2-col-stock { text-align: right; font-variant-numeric: tabular-nums; }
/* Default-price column (shows default + % diff stacked vertically).
   Header font-size deliberately omitted so it inherits the unified 11px
   thead style — overriding it makes DEFAULT look heavier than the other
   column labels. The 12px body-cell font is intentional to fit £xx.xx +
   diff% stacked, so that's kept on td only. */
.onv2-items-table th.onv2-col-default,
.onv2-items-table td.onv2-col-default {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  padding-right: 12px;
}
.onv2-items-table td.onv2-col-default { font-size: var(--text-xs, 11px); }
.onv2-pct { font-size: 12px; font-weight: 600; }
/* "Customer" column — compact text-labelled chip ("Save for cust." /
   "★ Update"). Tight padding so the column fits on standard viewports
   without forcing the table into horizontal scroll. Header font-size
   omitted for the same reason as DEFAULT above. */
.onv2-items-table th.onv2-col-cust,
.onv2-items-table td.onv2-col-cust {
  width: 1%;
  white-space: nowrap;
  text-align: center;
}
.onv2-items-table td.onv2-col-cust { font-size: var(--text-xs, 11px); }
.onv2-cust-btn {
  background: transparent;
  border: 1px dashed var(--color-border, var(--border));
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  transition: all 120ms ease-out;
}
.onv2-cust-btn:hover {
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-ring, oklch(70% 0.12 230 / 0.10));
}
.onv2-cust-on  { color: var(--accent); font-weight: 500; }
.onv2-cust-off { color: var(--color-text-3, var(--text-3)); }
/* ★ on product title — already-saved customer price */
.onv2-name-cust {
  color: var(--accent);
  margin-left: 4px;
  font-size: 12px;
}

/* Negotiated prices sidebar card */
.onv2-side-head-row { display: flex; justify-content: space-between; align-items: center; }
.onv2-negotiated-list { display: flex; flex-direction: column; }
.onv2-negotiated-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border, var(--border));
}
.onv2-negotiated-row:last-child { border-bottom: none; }
.onv2-negotiated-main { min-width: 0; }
.onv2-negotiated-scope {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-3, var(--text-3));
}
.onv2-negotiated-label {
  font-size: var(--text-sm, 13px);
  font-weight: 500;
  color: var(--color-text, var(--text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onv2-negotiated-val { font-size: var(--text-sm, 13px); font-weight: 600; }
.onv2-negotiated-empty { padding: 4px 0; line-height: 1.5; }
/* Cost / margin columns are hidden by default — only admins who tick
   "Show landing cost / margin" in the More menu opt in to see them.
   Hiding BOTH th and td (not just one) prevents column misalignment. */
.onv2-cost-col { display: none; }
.onv2-items-table.show-cost .onv2-cost-col { display: table-cell; }
.onv2-items-table tr.is-selected { background: var(--accent-ring, oklch(70% 0.12 230 / 0.08)); }
.onv2-row-check { cursor: pointer; }

/* Stock warning badges */
.oqp-stock-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.oqp-stock-badge.is-out  { background: oklch(60% 0.20 25 / 0.14); color: oklch(45% 0.20 25); }
.oqp-stock-badge.is-short{ background: oklch(75% 0.18 80 / 0.18); color: oklch(45% 0.18 80); }
.oqp-stock-badge.is-low  { background: oklch(75% 0.18 80 / 0.10); color: oklch(50% 0.18 80); }

/* Margin badges */
.oqp-margin-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.oqp-margin-badge.is-thin { background: oklch(60% 0.20 25 / 0.14); color: oklch(45% 0.20 25); }
.oqp-margin-badge.is-mid  { background: oklch(75% 0.18 80 / 0.18); color: oklch(45% 0.18 80); }
.oqp-margin-badge.is-fat  { background: oklch(80% 0.16 145 / 0.18); color: oklch(40% 0.16 145); }

/* Autosave indicator (in totals bar) */
.onv2-autosave-ind {
  font-size: var(--text-xs, 11px);
  color: var(--color-text-3, var(--text-3));
  opacity: 0;
  transition: opacity 240ms ease-out;
}
.onv2-autosave-ind.is-flash { opacity: 1; color: oklch(52% 0.17 145); }

/* Shortcuts cheatsheet modal */
.oqp-help-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 14px;
  font-size: var(--text-sm, 13px);
}
.oqp-help-key { text-align: right; }
.oqp-help-key kbd {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--color-surface-2, var(--surface-2));
  border: 1px solid var(--color-border, var(--border));
  border-bottom-width: 2px;
  border-radius: 4px;
}
.oqp-help-desc { color: var(--color-text-2, var(--text-2)); align-self: center; }
.oqp-help-sep { height: 1px; background: var(--color-border, var(--border)); margin: 6px 0; }
.oqp-help-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--color-border, var(--border)); }

/* EPOS Register product tile — image + code + title + price + stock.
   Touch-friendly grid for in-store cashier UI. */
.epos-tile {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-2, 8px);
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface, var(--bg-elev));
  transition: transform var(--t-fast, 120ms ease-out), border-color var(--t-fast, 120ms ease-out), box-shadow var(--t-fast, 120ms ease-out);
}
.epos-tile:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 4px 12px oklch(20% 0.02 240 / 0.10);
}
.epos-tile-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--color-surface-2, var(--surface-2));
  border-radius: var(--radius-sm, 6px);
  margin-bottom: 4px;
}
.epos-tile-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-text-3, var(--text-3));
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.epos-tile-code {
  font-family: var(--font-mono);
  font-size: 12px;
}
.epos-tile-title {
  font-size: var(--text-sm, 13px);
  font-weight: 500;
  line-height: 1.25;
  max-height: 2.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.epos-tile-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid var(--color-border, var(--border));
}
.epos-tile-price {
  font-weight: 600;
  font-size: var(--text-sm, 13px);
}
.epos-tile-stock {
  font-variant-numeric: tabular-nums;
}

/* Add-item search row inside detail. Uses the standard project
   .search-wrap pattern (icon overlaid on a plain bordered input) so it
   visually matches every other product search across the project (New
   Order, New Quotation, Debit/Credit Notes, etc.). */
.qd-add-row { margin-bottom: var(--sp-3, 12px); position: relative; }
.qd-search-wrap { max-width: 100%; }
.qd-search-wrap input.search-input {
  height: 38px;
  font-size: var(--text-base);
}
.qd-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 8px);
  max-height: 380px;
  overflow-y: auto;
  box-shadow: 0 8px 20px oklch(20% 0.02 240 / 0.12);
}

/* Items table */
.qd-table-wrap { overflow-x: auto; }
.qd-items-table {
  width: 100%;
  /* border-collapse:separate to render the per-cell vertical dividers
     cleanly — matches the new-order + new-quotation tables. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm, 13px);
}
.qd-items-table th,
.qd-items-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border, var(--border));
  border-right: 1px solid var(--color-border, var(--border));
  vertical-align: middle;
  white-space: nowrap;
}
.qd-items-table th:last-child,
.qd-items-table td:last-child { border-right: none; }
.qd-items-table th {
  font-weight: 500;
  color: var(--color-text-3, var(--text-3));
  font-size: var(--text-xs, 11px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  background: var(--color-surface-2, var(--surface-2));
}
.qd-items-table tbody tr:hover { background: var(--accent-ring, oklch(70% 0.12 230 / 0.06)); }
.qd-items-table .form-input-sm { padding: 4px 0 4px 6px !important; font-size: var(--text-sm, 13px); text-align: right; font-variant-numeric: tabular-nums; }
/* Quotation Detail items table — same "1 flex + rest shrink" pattern as
   New Order. Product is the flex column. */
.qd-items-table { table-layout: auto; width: 100%; }
.qd-col-num, .qd-col-img, .qd-col-code,
.qd-col-qty, .qd-col-price, .qd-col-default,
.qd-col-disc, .qd-col-disc-amt, .qd-col-vat, .qd-col-vat-amt, .qd-col-line,
.qd-col-total, .qd-col-cust, .qd-col-act {
  width: 1%;
  white-space: nowrap;
}
.qd-col-vat-amt   { text-align: right; font-variant-numeric: tabular-nums; padding-right: 10px; }
.qd-items-table th.qd-col-vat-amt { text-align: right; font-variant-numeric: tabular-nums; }
.qd-col-title { width: auto; min-width: 160px; white-space: normal; }
.qd-col-num   { text-align: center; color: var(--color-text-3, var(--text-3)); }
.qd-col-img   { }
/* Headers and cells share the same alignment for every numeric column so the
   column header reads exactly above the value below it. */
.qd-items-table th.qd-col-qty,
.qd-items-table th.qd-col-price,
.qd-items-table th.qd-col-default,
.qd-items-table th.qd-col-disc,
.qd-items-table th.qd-col-disc-amt,
.qd-items-table th.qd-col-vat,
.qd-items-table th.qd-col-line,
.qd-items-table th.qd-col-total { text-align: right; font-variant-numeric: tabular-nums; }
.qd-items-table th.qd-col-num,
.qd-items-table th.qd-col-cust { text-align: center; }
.qd-col-qty,
.qd-col-price,
.qd-col-disc,
.qd-col-disc-amt { text-align: right; }
/* Right-align number inputs and zero out their internal right padding so the
   digit sits flush against the input's right border. The input border itself
   sits at the cell's padding-right, which matches the header's padding-right,
   so the column header and the value below line up vertically. */
.qd-col-qty input,
.qd-col-price input,
.qd-col-disc input,
.qd-col-disc-amt input { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0 !important; }
.qd-col-qty input      { width: 60px; }
.qd-col-price input    { width: 80px; }
.qd-col-disc input     { width: 60px; }
.qd-col-disc-amt input { width: 84px; }
.qd-col-disc        { padding-right: 4px; }
.qd-col-disc-amt    { padding-left: 4px; padding-right: 14px; }
.qd-col-vat         { text-align: right; font-variant-numeric: tabular-nums; padding-left: 14px; padding-right: 10px; }
.qd-disc-input::placeholder,
.qd-disc-amt-input::placeholder { color: var(--text-3); opacity: 0.5; }
.qd-col-line, .qd-col-total { text-align: right; font-variant-numeric: tabular-nums; }
.qd-col-default {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-xs, 11px);
  line-height: 1.2;
}
.qd-col-cust  { text-align: center; }
.qd-col-act   { text-align: right; }
.qd-row-img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface-2, var(--surface-2));
  object-fit: contain;
  border: 1px solid var(--color-border, var(--border));
  cursor: pointer;
}
.qd-row-img-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--color-text-3, var(--text-3));
}

/* Notes & terms */
.qd-notes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3, 12px);
}
@media (max-width: 760px) { .qd-notes-grid { grid-template-columns: 1fr; } }

/* Sticky sidebar */
.qd-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
  position: sticky;
  top: 70px;
  min-width: 0;
}
@media (max-width: 1100px) { .qd-sidebar { position: static; } }

.qd-side-section {
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 8px);
  padding: var(--sp-3, 12px);
}
.qd-side-head {
  font-size: var(--text-xs, 11px);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--color-text-3, var(--text-3));
  margin-bottom: 10px;
}

.qd-customer-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface-2, var(--surface-2));
  margin-bottom: 10px;
  transition: background 120ms ease-out;
}
.qd-customer-card:hover { background: var(--accent-ring, oklch(70% 0.12 230 / 0.12)); }
.qd-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  flex: 0 0 auto;
}
.qd-customer-info { min-width: 0; flex: 1; }
.qd-customer-name {
  font-weight: 600;
  font-size: var(--text-sm, 13px);
  color: var(--color-text, var(--text));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qd-customer-meta {
  font-size: var(--text-xs, 11px);
  color: var(--color-text-3, var(--text-3));
}
.qd-side-block { margin-top: 10px; }
.qd-side-label {
  font-size: var(--text-xs, 11px);
  color: var(--color-text-3, var(--text-3));
  margin-bottom: 4px;
}
.qd-side-addr { font-size: var(--text-sm, 13px); color: var(--color-text, var(--text)); line-height: 1.4; }

.qd-side-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.qd-side-input { max-width: 160px; }
.qd-side-actions {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Totals card */
.qd-totals-card { background: linear-gradient(180deg, var(--color-surface, var(--surface)) 0%, var(--color-surface-2, var(--surface-2)) 100%); }
.qd-total-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: var(--text-sm, 13px);
  color: var(--color-text-2, var(--text-2));
  font-variant-numeric: tabular-nums;
}
.qd-total-grand {
  border-top: 1px solid var(--color-border, var(--border));
  margin-top: 4px;
  padding-top: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text, var(--text));
}

/* Quick actions */
.qd-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.qd-quick-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--color-surface-2, var(--surface-2));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-sm, 6px);
  font-size: var(--text-xs, 11px);
  color: var(--color-text, var(--text));
  cursor: pointer;
  transition: background 120ms ease-out;
  text-align: left;
}
.qd-quick-btn:hover { background: var(--accent-ring, oklch(70% 0.12 230 / 0.10)); }
.qd-quick-btn.qd-quick-primary {
  grid-column: 1 / -1;
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  justify-content: center;
}
.qd-quick-btn.qd-quick-primary:hover { background: oklch(45% 0.18 248); }
.qd-quick-ic { font-size: 14px; }

/* Sticky save bar */
.qd-savebar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w, 220px);
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: oklch(28% 0.04 248);
  color: #fff;
  border-top: 1px solid oklch(40% 0.04 248);
  z-index: 30;
  box-shadow: 0 -4px 16px oklch(20% 0.02 240 / 0.20);
}
.qd-savebar-text { font-size: var(--text-sm, 13px); font-weight: 500; }
.qd-savebar-actions { display: flex; gap: 8px; }
.qd-savebar .btn-ghost { color: #fff; border-color: oklch(60% 0.04 248); }
.qd-savebar .btn-ghost:hover { background: oklch(40% 0.04 248); }
@media (max-width: 900px) { .qd-savebar { left: 0; } }

/* Small ✕ icon button reused by row remove */
.btn-icon-x {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-text-3, var(--text-3));
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 120ms ease-out;
}
.btn-icon-x:hover {
  background: oklch(60% 0.20 25 / 0.12);
  color: var(--color-error, #c0392b);
  border-color: oklch(60% 0.20 25 / 0.30);
}

/* ===========================================================================
   28. Print
   =========================================================================== */
@media print {
  .sidebar, .app-header, .modal-backdrop, .toast-container,
  .cmd-palette, .cmd-backdrop, .page-actions, .filter-bar,
  .pagination, .table-toolbar { display: none !important; }
  body { background: white !important; color: black !important; }
  .app-main { padding: 0 !important; }
  .app-layout { display: block !important; }
  .card, .data-table, .kpi-card { border: 1px solid #ccc !important; }
}

/* ════════════════════════════════════════════════════════════════
   Phase D1c — Warehouse Ops (mobile-first kiosk UI)
   Activated on every /wh/* route. Big tap targets, single-task
   screens, full-width cards. Designed for phone + 10" tablet.
   ════════════════════════════════════════════════════════════════ */

.wh-page {
  min-height: 100vh;
  background: var(--color-bg-2);
  font-size: 16px;
  padding-bottom: 80px;
}

/* Hide app chrome when in /wh/* — kiosk feel */
body.wh-mode .sidebar,
body.wh-mode .app-header { display: none; }
body.wh-mode .app-main     { padding: 0; margin-left: 0; }
body.wh-mode .page-content { padding: 0; }
body.wh-mode .app-layout   { display: block; grid-template-columns: 1fr; }
body.wh-mode               { background: var(--color-bg-2); }

.wh-topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 12px;
  min-height: 56px;
}
.wh-topbar-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; font-size: 19px; line-height: 1; flex-shrink: 0;
  text-decoration: none; color: var(--color-text-2);
  border: 1px solid var(--color-border); border-radius: 9px;
  transition: background .12s, border-color .12s, color .12s;
}
.wh-topbar-back:hover { background: var(--color-bg-2); border-color: var(--color-text-3); color: var(--color-text-1); }
.wh-topbar-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: oklch(60% 0.17 248); }
.wh-topbar-titlewrap { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.wh-topbar-title { font-size: 20px; font-weight: 600; flex: 1; }
.wh-topbar-titlewrap .wh-topbar-title { flex: none; font-size: 18px; font-weight: 700; line-height: 1.15; }
.wh-topbar-sub { font-size: 13px; color: var(--color-text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wh-topbar-meta  { font-size: 14px; color: var(--color-text-3); flex-shrink: 0; }

.wh-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding: 20px;
}
.wh-tile {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px;
  padding: 28px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-decoration: none; color: inherit;
  transition: transform 0.1s, border-color 0.1s, box-shadow 0.1s;
  min-height: 140px;
}
.wh-tile:hover, .wh-tile:focus {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 6px 16px -8px rgba(0,0,0,0.15);
}
.wh-tile-ico { font-size: 38px; line-height: 1; }
.wh-tile-label { font-size: 18px; font-weight: 600; }
.wh-tile-hint { font-size: 14px; color: var(--color-text-3); line-height: 1.3; }

.wh-foot {
  padding: 16px 20px;
  text-align: center;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
}

.wh-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin: 16px;
  overflow: hidden;
}
.wh-card-head {
  padding: 12px 16px;
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
}

.wh-stub {
  text-align: center;
  padding: 40px 20px;
}
.wh-stub-ico { font-size: 64px; line-height: 1; }
.wh-stub-title { font-size: 24px; font-weight: 600; margin: 16px 0 8px; }
.wh-stub-body { color: var(--color-text-3); max-width: 480px; margin: 0 auto; line-height: 1.5; }
.wh-stub-phase {
  display: inline-block; margin-top: 14px;
  padding: 6px 14px;
  background: var(--color-bg-2);
  border-radius: 8px;
  font-size: 14px; color: var(--color-text-3);
}

.wh-result { padding: 16px; border-top: 1px solid var(--color-border); }
.wh-result-line { margin-bottom: 6px; }
.wh-result-ok {
  padding: 14px; border-radius: 8px;
  background: oklch(96% 0.04 145); border: 1px solid oklch(70% 0.16 145);
}
.wh-result-err {
  padding: 14px; border-radius: 8px;
  background: oklch(96% 0.04 25); border: 1px solid oklch(70% 0.18 25);
  color: oklch(40% 0.18 25);
}

.wh-log {
  max-height: 320px; overflow-y: auto;
  padding: 8px 0;
}
.wh-log-row {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}
.wh-log-row.ok  { color: var(--color-text); }
.wh-log-row.err { color: var(--color-error); }
.wh-log-time { font-size: 12px; color: var(--color-text-3); min-width: 60px; }

.wh-recent-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
}
.wh-recent-row:last-child { border-bottom: none; }

/* ── ScanInput component ─────────────────────────────────────── */
.scan-input-root {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
}
.scan-modes {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.scan-mode-btn {
  flex: 1; min-width: 110px;
  padding: 10px 12px;
  background: var(--color-bg-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  color: var(--color-text);
}
.scan-mode-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.scan-mode-btn.is-active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.scan-body { display: flex; flex-direction: column; gap: 10px; }
.scan-video-wrap {
  position: relative;
  width: 100%; max-width: 480px; margin: 0 auto;
  aspect-ratio: 4 / 3;
  background: black;
  border-radius: 12px; overflow: hidden;
}
.scan-video { width: 100%; height: 100%; object-fit: cover; }
.scan-input-reticle {
  position: absolute; top: 25%; left: 12%; right: 12%; bottom: 25%;
  border: 3px solid oklch(80% 0.18 145);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.35);
  pointer-events: none;
}
.scan-hint {
  position: absolute; bottom: 8px; left: 0; right: 0;
  text-align: center; color: white;
  font-size: 14px; text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
.scan-input-wrap {
  display: flex; gap: 8px;
}
.scan-input {
  flex: 1; padding: 14px 16px;
  font-size: 18px; font-family: var(--font-mono, monospace);
  border: 2px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
}
.scan-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px oklch(70% 0.16 248 / 0.15);
}
.scan-submit {
  padding: 14px 22px;
  font-size: 16px;
  border-radius: 10px;
}
.scan-input-status { padding: 0 4px; min-height: 18px; }

/* On large desktop, /wh/* still works but with a max-width container */
@media (min-width: 900px) {
  .wh-page { max-width: 720px; margin: 0 auto; }
  .wh-card { margin: 16px 0; }
}

/* ===========================================================================
   42. Mobile / PWA polish — phone-width fixes (≤ 480px) + tablet (≤ 768px)
   Replaces the historical scattered media-query bandages with one focused block.
   Why: at narrow widths several flex/grid containers lacked min-width:0, so any
   wide descendant (tab strips, breadcrumbs, KPI rows, items tables) was pushing
   .app-main past the viewport — every leaf inside then inherited that bloated
   width, clipping values off the right edge.
   =========================================================================== */

/* (a) Lock the app shell to the viewport so wide descendants overflow internally
       rather than pushing the whole layout off-screen. The horizontal scrollers
       below (.cp-tabs, .tab-strip-wrap, .data-table wrappers) handle their own
       internal overflow. */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .app-layout, .app-shell, .app-main { min-width: 0; max-width: 100vw; }
  .app-main { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .page-content { max-width: 100%; }

  /* Any direct grid/flex children of page wrappers must allow content to shrink */
  .cp-grid, .cp-sidebar, .cp-main,
  .order-grid, .order-main, .order-aside,
  .page-wrapper { min-width: 0; }

  /* Card-style content (Account snapshot rows etc.) must shrink to fit */
  .card, .cp-stats-card, .cp-actions-card, .cp-avatar-card { max-width: 100%; min-width: 0; }
  .cp-snap, .cp-snap-row { max-width: 100%; min-width: 0; }
  .cp-snap-row > strong { min-width: 0; text-align: right; word-break: break-word; }
}

/* (b) Topbar — at phone widths compact the right-hand cluster aggressively
       so the env badge + company switcher + user avatar all stay on-screen. */
@media (max-width: 480px) {
  /* Hide secondary affordances */
  .header-search-btn { flex: 0 0 auto; padding: 0; width: 32px; min-width: 32px; max-width: none; margin: 0; justify-content: center; }
  .header-search-btn .search-label { display: none; }
  .breadcrumb-current { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Env badge stays but compact — just the colour + 3-letter label */
  #envBadge { padding: 2px 6px; font-size: 12px; margin-right: 4px !important; }

  /* Company switcher: icon + caret only (hide the name), keep clickable */
  .header-company { max-width: 64px; padding: 4px 6px; gap: 4px; }
  .header-company .header-company-name { display: none; }

  /* User avatar only (name + caret already hidden at 768; ensure no padding bloat) */
  .header-user { padding: 2px; }
  .header-user .header-user-avatar { width: 28px; height: 28px; font-size: 12px; }

  /* Tight padding to avoid wrap to a second row */
  .app-header { padding: 0 var(--sp-3); }
  .header-right { gap: 4px; }
}

/* (c) Page-action button rows (Edit, + New Order, Generate invoice, etc.)
       Force them to wrap to a new row at narrow widths instead of clipping.
       Buttons get min-width:max-content + flex-basis:auto so they don't shrink
       below their label width. */
@media (max-width: 600px) {
  .page-actions,
  .order-topbar-right,
  .cp-topbar .page-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .page-actions .btn,
  .order-topbar-right .btn {
    min-width: max-content;
  }
  /* Order detail topbar wraps title above actions on phones */
  .order-topbar { flex-direction: column; align-items: flex-start; }
  .order-topbar-right { justify-content: flex-start; }
}

/* (d) Horizontal-scroll tab strips — add a soft right-edge fade so users
       know they can swipe to see more tabs. */
@media (max-width: 768px) {
  .tab-strip-wrap, .cp-tabs {
    position: relative;
    /* Hide native scrollbar to free up vertical space — swipe still works */
    scrollbar-width: none;
  }
  .tab-strip-wrap::-webkit-scrollbar, .cp-tabs::-webkit-scrollbar { display: none; }
  .tab-strip-wrap::after, .cp-tabs::after {
    content: '';
    position: sticky;
    right: 0;
    top: 0;
    width: 24px;
    height: 100%;
    background: linear-gradient(to right, transparent, var(--surface));
    pointer-events: none;
    margin-left: -24px;
    flex: 0 0 24px;
  }
}

/* (e) Data tables on phones: ensure they scroll horizontally inside their
       wrapper instead of pushing the page wider. Wrappers must have min-width:0
       to participate in flex/grid shrinking. Also define the .hide-mobile /
       .hide-xs utility classes that the HTML already uses to drop low-value
       columns at narrow widths (orders/invoices/etc.) — they were never
       defined, which is why every column stayed visible on phones. */
@media (max-width: 768px) {
  .table-wrap, .data-table-wrap, .ol-table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
  .hide-mobile { display: none !important; }
}
@media (max-width: 480px) {
  .hide-xs { display: none !important; }
}

/* (f) New Order builder — at phone widths, force the items area to scroll
       horizontally inside its card rather than overflowing the page. */
@media (max-width: 600px) {
  .order-new-v2 { margin-left: 0; margin-right: 0; padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .onv2-topbar { flex-wrap: wrap; gap: var(--sp-2); }
  .onv2-actions { width: 100%; justify-content: flex-end; }
  .onv2-actions .btn { flex: 1; }
  .onv2-kbd-hint { display: none; } /* keyboard hints irrelevant on touch */
}

/* (g) KPI grids — many pages set inline `style="grid-template-columns:repeat(4,1fr)"`
       or `1fr 1fr 1fr`. Attribute-selector + !important is the cleanest way to
       override those at phone widths without rewriting every page module.
       Matches the pattern documented in feedback memory
       `project_responsive_overrides.md`. */
@media (max-width: 768px) {
  .kpi-grid[style*="grid-template-columns"],
  [class*="kpi"][style*="grid-template-columns"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===========================================================================
   43. First-run setup wizard — Phase 5 Step 1.1
   Full-bleed welcome experience; no sidebar/topbar (page has hideChrome:true).
   Designed to feel calm + professional so a new admin doesn't bounce.
   =========================================================================== */
.setup-wizard {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--accent) 6%, var(--bg)) 0%,
    var(--bg) 50%,
    color-mix(in oklch, var(--accent) 4%, var(--bg)) 100%);
  padding: var(--sp-4);
  overflow-y: auto;
}
.setup-shell {
  width: 100%;
  max-width: 720px;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.25), 0 8px 16px -8px rgba(0,0,0,0.1);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 95vh;
}
.setup-header {
  padding: var(--sp-5) var(--sp-6) var(--sp-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.setup-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.setup-brand-mark {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; letter-spacing: -0.5px;
}
.setup-brand-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--text);
}
.setup-brand-sub {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 2px;
}
.setup-progress {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: var(--sp-3);
}
.setup-step-dot {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3, var(--border));
  transition: background var(--t-fast);
}
.setup-step-dot.active { background: var(--accent); }
.setup-step-dot.done   { background: color-mix(in oklch, var(--accent) 70%, var(--bg)); }

.setup-body {
  flex: 1;
  padding: var(--sp-6);
  overflow-y: auto;
}
.setup-step-welcome { text-align: center; padding: var(--sp-4) 0; }
.setup-step-icon {
  font-size: 56px;
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.setup-step-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semi);
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 var(--sp-2);
}
.setup-step-optional {
  font-size: var(--text-sm);
  color: var(--text-3);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}
.setup-step-lede {
  font-size: var(--text-base);
  color: var(--text-2);
  margin: 0 0 var(--sp-4);
  line-height: 1.5;
}
.setup-step-note {
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
}
.setup-checklist {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-4) auto;
  max-width: 480px;
  text-align: left;
}
.setup-check-item {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  color: var(--text);
}
.setup-check-item span:first-child {
  font-size: 18px;
  flex: 0 0 auto;
}
.setup-section {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  background: var(--surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.setup-section-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--text);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.setup-summary {
  background: var(--surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  margin: var(--sp-4) auto;
  max-width: 520px;
  overflow: hidden;
}
.setup-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
  text-align: left;
}
.setup-summary-row:last-child { border-bottom: none; }
.setup-summary-row strong {
  color: var(--text);
  font-weight: var(--weight-medium);
}
.setup-summary-row span {
  color: var(--text-2);
}

.setup-footer {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  padding: var(--sp-3) var(--sp-6);
}
.setup-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
}

/* Hide the sidebar/topbar chrome when the setup wizard is showing */
body.setup-mode .sidebar,
body.setup-mode .app-header,
body.setup-mode .sidebar-overlay { display: none !important; }
body.setup-mode .app-layout { grid-template-columns: 1fr !important; }
body.setup-mode .app-main { padding: 0 !important; }

@media (max-width: 600px) {
  .setup-wizard { padding: 0; align-items: flex-start; }
  .setup-shell { max-height: 100vh; min-height: 100vh; border-radius: 0; box-shadow: none; }
  .setup-header { padding: var(--sp-4); }
  .setup-body { padding: var(--sp-4); }
  .setup-footer { padding: var(--sp-3) var(--sp-4); }
  .setup-step-icon { font-size: 40px; }
  .setup-step-title { font-size: var(--text-xl); }
}

/* ── Help tooltips — Phase 5 Step 2.5 ──────────────────────── */
.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  font-size: 12px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  vertical-align: middle;
  margin-left: 6px;
  padding: 0;
  line-height: 1;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  user-select: none;
}
.help-tip:hover,
.help-tip:focus-visible {
  background: var(--accent);
  color: white;
  outline: none;
  transform: scale(1.1);
}
.help-tip:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 40%, transparent);
}

/* Popover that appears when ? is clicked / tapped */
.help-tip-pop {
  position: fixed;
  z-index: 10000;
  max-width: 280px;
  background: var(--text);
  color: var(--bg);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-2);
  font-size: var(--text-sm);
  line-height: 1.4;
  box-shadow: 0 8px 28px -6px rgba(0,0,0,0.35), 0 4px 8px -4px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast);
  pointer-events: none;
}
.help-tip-pop.show {
  opacity: 1;
  transform: translateY(0);
}

/* Desktop hover tooltip — uses CSS-only ::after for fast feedback */
@media (hover: hover) {
  .help-tip { position: relative; }
  .help-tip::after {
    content: attr(data-help);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: max-content;
    max-width: 240px;
    background: var(--text);
    color: var(--bg);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
    line-height: 1.4;
    white-space: normal;
    text-align: left;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 24px -6px rgba(0,0,0,0.3);
    transition: opacity var(--t-fast), transform var(--t-fast);
    z-index: 9999;
  }
  .help-tip:hover::after,
  .help-tip:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* When the field has a help-tip, slight extra label spacing reads cleaner */
.form-group label .help-tip,
.field-label .help-tip { margin-left: 4px; }

/* ── Inline glossary — Phase 5 Step 2.6 ─────────────────────── */
/* Jargon terms auto-marked by glossary.attachToContainer().
 * Dotted underline gives a subtle "tap me" cue. We use text-decoration
 * (not border-bottom) so the cue remains visible on text that's already
 * `color: var(--text-2)` or muted — border-bottom-color tries to mix with
 * transparent and disappears on grey text. */
.gloss {
  text-decoration: underline dotted color-mix(in oklch, var(--accent) 80%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: help;
  position: relative;
  outline: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.gloss:hover,
.gloss:focus-visible {
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  color: var(--accent);
  text-decoration-style: solid;
  text-decoration-color: var(--accent);
  border-radius: 2px;
}
.gloss:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--accent) 40%, transparent);
}

/* Popover — same look as help-tip-pop but wider for a term-name + definition */
.gloss-pop {
  position: fixed;
  z-index: 10000;
  max-width: 320px;
  background: var(--text);
  color: var(--bg);
  padding: var(--sp-3);
  border-radius: var(--r-2);
  font-size: var(--text-sm);
  line-height: 1.45;
  box-shadow: 0 8px 28px -6px rgba(0,0,0,0.35), 0 4px 8px -4px rgba(0,0,0,0.2);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast);
  pointer-events: none;
}
.gloss-pop.show {
  opacity: 1;
  transform: translateY(0);
}
.gloss-pop strong {
  color: var(--bg);
  font-weight: var(--weight-semibold);
  display: inline-block;
  margin-bottom: 2px;
}

/* Desktop hover-only fast tooltip — uses ::after for snappy feedback.
 * On mobile (no hover), the click-popover above takes over. */
@media (hover: hover) {
  .gloss::after {
    content: attr(data-term) ': ' attr(aria-label);
    /* aria-label is "Term: definition" so we slice — instead use data-term + a CSS-rendered defn.
     * Simplest: hide the auto pseudo and rely on the JS popover. We keep this here for
     * future enhancement but disable it for now. */
    display: none;
  }
}

/* Opt-out class — apply to any wrapper element that should not be scanned */
.no-gloss .gloss {
  text-decoration: none;
  background: none;
  color: inherit;
  cursor: inherit;
}

/* ── Help center — Phase 5 Step 2.7 ─────────────────────────── */
.help-page { max-width: 1200px; margin: 0 auto; }

.help-search-wrap {
  margin: var(--sp-4) 0;
  position: relative;
}
.help-search-input {
  font-size: var(--text-lg);
  padding: var(--sp-3) var(--sp-4);
  height: auto;
  border-radius: var(--r-3);
}
.help-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 20%, transparent);
}
.help-search-hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: var(--sp-2);
  padding-left: var(--sp-2);
}

.help-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-4);
  align-items: flex-start;
}
@media (max-width: 800px) {
  .help-grid { grid-template-columns: 1fr; }
}

.help-categories {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-3);
  padding: var(--sp-3);
  position: sticky;
  top: var(--sp-3);
}
.help-cat-head {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--sp-2);
}
.help-cat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: none;
  border-radius: var(--r-2);
  color: var(--text);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.help-cat-item:hover { background: var(--surface-hover); }
.help-cat-item.active {
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: var(--weight-medium);
}
.help-cat-count {
  font-size: var(--text-xs);
  color: var(--text-3);
  background: var(--surface-2);
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.help-cat-item.active .help-cat-count {
  background: color-mix(in oklch, var(--accent) 20%, transparent);
  color: var(--accent);
}

.help-cat-section { margin-bottom: var(--sp-5); }
.help-cat-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-border);
}

.help-article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--sp-3);
}
.help-article-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-3);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  color: var(--text);
  transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.help-article-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 20px -8px rgba(0,0,0,0.15);
}
.help-article-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--sp-1);
}
.help-article-summary {
  font-size: var(--text-sm);
  color: var(--text-2);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--sp-2);
}
.help-article-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
}
.help-article-readmore { color: var(--accent); font-weight: var(--weight-medium); }

.help-empty {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  color: var(--text-2);
}
.help-empty-icon { font-size: 48px; margin-bottom: var(--sp-3); }
.help-empty-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text); margin-bottom: var(--sp-2); }
.help-empty-body { font-size: var(--text-sm); }

/* Reader view */
.help-reader { max-width: 820px; margin: 0 auto; }
.help-reader-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-border);
}
.help-article-body {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text);
}
.help-article-body h1 {
  font-size: var(--text-3xl);
  margin: 0 0 var(--sp-4);
}
.help-article-body h2 {
  font-size: var(--text-xl);
  margin: var(--sp-5) 0 var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-border);
}
.help-article-body h3 {
  font-size: var(--text-lg);
  margin: var(--sp-4) 0 var(--sp-2);
}
.help-article-body p { margin: 0 0 var(--sp-3); }
.help-article-body ul, .help-article-body ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.help-article-body li { margin-bottom: var(--sp-1); }
.help-article-body code {
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--accent);
}
.help-article-body a { color: var(--accent); text-decoration: underline; }
.help-article-body strong { font-weight: var(--weight-semibold); color: var(--text); }

.help-md-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-3) 0;
  font-size: var(--text-sm);
}
.help-md-table th, .help-md-table td {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border);
  text-align: left;
}
.help-md-table th {
  background: var(--surface-2);
  font-weight: var(--weight-semibold);
}
.help-md-table tbody tr:nth-child(even) { background: var(--surface); }

.help-score {
  margin: var(--sp-4) 0 var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-2);
  font-size: var(--text-sm);
  background: var(--surface);
  border: 1px solid var(--color-border);
}
.help-score-success { color: var(--success); border-color: color-mix(in oklch, var(--success) 40%, transparent); }
.help-score-warning { color: var(--warning); border-color: color-mix(in oklch, var(--warning) 40%, transparent); }
.help-score-danger  { color: var(--danger);  border-color: color-mix(in oklch, var(--danger) 40%, transparent); }

.help-feedback {
  margin: var(--sp-5) 0 var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-3);
  text-align: center;
}
.help-feedback-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--sp-3);
}
.help-feedback-buttons {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
}
.help-fb-btn {
  min-width: 120px;
  font-size: var(--text-base);
  padding: var(--sp-2) var(--sp-4);
}
.help-feedback-thanks {
  font-size: var(--text-base);
  color: var(--success);
  font-weight: var(--weight-medium);
  padding: var(--sp-2);
}

/* ── Walkthrough overlays — Phase 5 Step 2.8 ────────────────── */
/* Light-touch overlay — we don't darken the page; instead we draw a dotted
 * arrow from a callout to the target element, and pulse the target itself.
 * The user can keep clicking on the rest of the page while the walkthrough
 * is active. */
.wt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
}

.wt-arrow-svg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9001;
}

/* Pulse-highlight on the current target so the eye finds it quickly */
.wt-highlight {
  position: relative;
  z-index: 9002;
  animation: wt-pulse 1.6s ease-in-out infinite;
  border-radius: var(--r-2);
}
@keyframes wt-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 50%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in oklch, var(--accent) 0%, transparent); }
}

.wt-callout {
  position: fixed;
  z-index: 9003;
  width: min(340px, 92vw);
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-3);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.30), 0 4px 12px -4px rgba(0,0,0,0.15);
  padding: 0;
  pointer-events: auto;
  font-size: var(--text-sm);
  animation: wt-callout-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes wt-callout-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.wt-callout-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--color-border);
}
.wt-callout-icon {
  font-size: 18px;
  line-height: 1;
}
.wt-callout-title {
  flex: 1;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--text);
}
.wt-callout-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-1);
  transition: background var(--t-fast);
}
.wt-callout-close:hover { background: var(--surface-2); color: var(--text); }

.wt-callout-body {
  padding: var(--sp-2) var(--sp-3) var(--sp-3);
  line-height: 1.5;
  color: var(--text-2);
}

.wt-callout-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--color-border);
  background: var(--surface-2);
  border-radius: 0 0 var(--r-3) var(--r-3);
}
.wt-callout-progress {
  font-size: var(--text-xs);
  color: var(--text-3);
}
.wt-callout-actions {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.wt-callout-disable {
  font-size: var(--text-xs) !important;
  color: var(--text-3) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 4px 6px !important;
}
.wt-callout-disable:hover {
  color: var(--text-1) !important;
  background: transparent !important;
}

/* Replay list inside the help center */
.help-walkthrough-section {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.help-walkthrough-section-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.help-walkthrough-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-2);
}
.help-walkthrough-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
  text-decoration: none;
  color: var(--text);
}
.help-walkthrough-item:hover {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.help-walkthrough-item-title {
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
}
.help-walkthrough-item-arrow {
  color: var(--accent);
  font-size: var(--text-sm);
}

/* ── AI Assistant — Phase 5 Section S ───────────────────────── */
/* Floating button bottom-left (mirrors the FAB which is bottom-right) */
.ai-chat-fab {
  position: fixed;
  bottom: var(--sp-5);
  left: var(--sp-5);
  width: 56px;
  height: 56px;
  border-radius: var(--r-full);
  background: linear-gradient(135deg, oklch(60% 0.20 280), oklch(55% 0.20 250));
  color: white;
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.40), 0 4px 8px -4px rgba(0,0,0,0.2);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  z-index: var(--z-sticky, 50);
}
body.authed .ai-chat-fab:not([hidden]) { display: flex; }
body.authed.setup-mode .ai-chat-fab { display: none; }
.ai-chat-fab svg { width: 24px; height: 24px; }
.ai-chat-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.50), 0 6px 12px -6px rgba(0,0,0,0.25);
}
.ai-chat-fab.open {
  transform: rotate(45deg);
}

.ai-chat-drawer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: min(420px, 100vw);
  height: min(640px, 92vh);
  background: var(--surface);
  border-top-left-radius: var(--r-3);
  border: 1px solid var(--color-border);
  box-shadow: 0 -8px 40px -4px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  z-index: 999;
  transform: translateY(110%);
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ai-chat-drawer.open { transform: translateY(0); }

.ai-chat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(135deg, oklch(60% 0.20 280), oklch(55% 0.20 250));
  color: white;
  border-top-left-radius: var(--r-3);
}
.ai-chat-title { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--weight-semibold); }
.ai-chat-icon { font-size: 20px; }
.ai-chat-close {
  background: transparent;
  border: none;
  color: white;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: var(--r-1);
  opacity: 0.85;
}
.ai-chat-close:hover { opacity: 1; background: rgba(255,255,255,0.15); }

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ai-msg {
  max-width: 88%;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-3);
  font-size: var(--text-sm);
  line-height: 1.45;
  animation: ai-fade-in 200ms ease;
}
@keyframes ai-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-msg-user {
  align-self: flex-end;
  background: var(--accent);
  color: white;
  border-bottom-right-radius: var(--r-1);
}
.ai-msg-assistant {
  align-self: flex-start;
  background: var(--surface-2);
  color: var(--text);
  border-bottom-left-radius: var(--r-1);
}
.ai-msg-system {
  align-self: stretch;
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 20%, transparent);
  max-width: 100%;
}
.ai-msg-error {
  align-self: flex-start;
  background: color-mix(in oklch, var(--danger) 12%, transparent);
  color: var(--danger);
  border: 1px solid color-mix(in oklch, var(--danger) 30%, transparent);
}
.ai-msg-typing { align-self: flex-start; background: var(--surface-2); padding: var(--sp-2) var(--sp-3); }
.ai-typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.ai-typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-3);
  animation: ai-bounce 1.4s infinite ease-in-out;
}
.ai-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}

.ai-msg-content code {
  background: var(--surface);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.ai-msg-suggestions {
  margin-top: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.ai-suggestion-chip {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-full);
  padding: 4px 12px;
  font-size: var(--text-xs);
  cursor: pointer;
  color: var(--text);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ai-suggestion-chip:hover {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}

.ai-tool-calls {
  margin-top: var(--sp-2);
  cursor: pointer;
}

.ai-chat-form {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--color-border);
  background: var(--surface);
}
.ai-chat-input { flex: 1; }
.ai-chat-footer {
  padding: var(--sp-1) var(--sp-3) var(--sp-2);
  background: var(--surface);
  text-align: center;
  font-size: var(--text-xs);
  border-bottom-left-radius: var(--r-3);
  color: var(--text-3);
}

/* Smart suggestions block (S3) */
.ai-smart-suggestions {
  background: color-mix(in oklch, var(--accent) 6%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 20%, transparent);
  border-radius: var(--r-3);
  padding: var(--sp-3);
  margin: var(--sp-3) 0;
}
.ai-smart-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--text-sm);
}
.ai-smart-list { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ai-smart-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-2);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.ai-smart-item:hover {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 10%, transparent);
}
.ai-smart-icon { font-size: 20px; flex-shrink: 0; }
.ai-smart-title { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text); }
.ai-smart-sub   { font-size: var(--text-xs); color: var(--text-2); line-height: 1.35; }

/* Mobile: drawer becomes nearly full-screen */
@media (max-width: 600px) {
  .ai-chat-drawer { width: 100vw; height: 100vh; border-radius: 0; }
  .ai-chat-head { border-radius: 0; }
  .ai-chat-footer { border-radius: 0; }
}

/* ── Product form redesign — keyboard-friendly + sticky save ── */
.pf-page {
  /* Reserve space at the bottom for the sticky action bar */
  padding-bottom: 80px;
  max-width: none;
}
.pf-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
}
.pf-progress {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}
.pf-progress-label { font-size: var(--text-xs); color: var(--text-3); white-space: nowrap; }
.pf-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.pf-progress-fill {
  height: 6px;
  width: 0%;
  background: var(--success);
  border-radius: 3px;
  transition: width var(--t-norm), background var(--t-norm);
}
.pf-progress-pct {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  min-width: 36px;
  text-align: right;
}
.pf-shortcuts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.pf-shortcuts kbd {
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}

.pf-header { margin-bottom: var(--sp-3); }
.pf-status-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-self: center; }

.pf-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--sp-4);
  align-items: flex-start;
}
@media (max-width: 900px) { .pf-layout { grid-template-columns: 1fr; } }

.pf-nav {
  position: sticky;
  top: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-3);
  padding: var(--sp-2);
  display: grid;
  gap: 2px;
}
@media (max-width: 900px) {
  .pf-nav { position: static; display: flex; overflow-x: auto; }
  .pf-nav-item { flex-shrink: 0; }
  .pf-nav-sep, .pf-nav-meta { display: none; }
}
.pf-nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: transparent;
  border: none;
  border-radius: var(--r-2);
  color: var(--text-2);
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.pf-nav-item:hover { background: var(--surface-hover); color: var(--text); }
.pf-nav-item.active {
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: var(--weight-medium);
}
.pf-nav-icon { font-size: 16px; }
.pf-nav-label { flex: 1; }
.pf-nav-key {
  font-size: 9px;
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--text-3);
  font-family: var(--font-mono, monospace);
}
.pf-nav-item.active .pf-nav-key { background: var(--surface); }
.pf-nav-sep { height: 1px; background: var(--color-border); margin: var(--sp-2) 0; }
.pf-nav-meta { padding: var(--sp-2); }
.pf-draft-restore {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--sp-2);
  background: color-mix(in oklch, var(--warning) 10%, transparent);
  border: 1px solid color-mix(in oklch, var(--warning) 30%, transparent);
  border-radius: var(--r-2);
}

.pf-main { min-width: 0; /* avoid grid overflow */ }
/* Use existing pf-section, pf-summary, pf-body markup; just nicer spacing */
.pf-main details.pf-section {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-3);
  padding: 0;
  margin-bottom: var(--sp-3);
}
.pf-main details.pf-section > summary.pf-summary {
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  font-weight: var(--weight-semibold);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border-bottom: 1px solid transparent;
}
.pf-main details.pf-section[open] > summary.pf-summary {
  border-bottom-color: var(--color-border);
}
.pf-main details.pf-section > summary.pf-summary::before {
  content: '▶';
  font-size: 12px;
  color: var(--text-3);
  transition: transform var(--t-fast);
}
.pf-main details.pf-section[open] > summary.pf-summary::before {
  transform: rotate(90deg);
}
.pf-main .pf-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }

/* Live margin calculator card */
.pf-margin-card {
  position: sticky;
  bottom: 80px;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--accent) 8%, var(--surface)),
    color-mix(in oklch, var(--accent) 4%, var(--surface)));
  border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
  border-radius: var(--r-3);
  padding: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-3);
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.1);
}
.pf-margin-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-3);
}
.pf-margin-row > div { display: flex; flex-direction: column; }
.pf-margin-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 2px;
}
.pf-margin-row strong { font-size: var(--text-lg); }
.pf-margin-pct.good { color: var(--success); }
.pf-margin-pct.ok   { color: var(--accent); }
.pf-margin-pct.low  { color: var(--warning); }
.pf-margin-pct.bad  { color: var(--danger); }

/* Sticky action bar */
.pf-action-bar {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-w, 256px);
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--color-border);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  z-index: 40;
  box-shadow: 0 -4px 12px -4px rgba(0,0,0,0.08);
}
.sidebar.collapsed ~ .app-main .pf-action-bar { left: 64px; }
@media (max-width: 900px) { .pf-action-bar { left: 0; } }
.pf-action-bar-left, .pf-action-bar-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.pf-dirty-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warning);
  display: inline-block;
  animation: pf-pulse 1.6s infinite;
}
@keyframes pf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Section Y3 — Per-user font-size preference ────────────── */
body.font-small  { font-size: 14px; }
body.font-medium { font-size: 14px; }
body.font-large  { font-size: 16px; }
body.font-large .nav-label { font-size: 15px; }
body.font-large .page-title { font-size: 28px; }

/* ── Section W2 — Barcode camera scanner ───────────────────── */
.scan-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
}
.scan-frame {
  position: relative;
  width: min(420px, 92vw);
  height: min(420px, 92vw);
  border-radius: var(--r-3);
  overflow: hidden;
  background: #000;
}
.scan-frame video { width: 100%; height: 100%; object-fit: cover; }
.scan-reticle {
  position: absolute; inset: 0;
  border: 3px solid color-mix(in oklch, var(--accent) 80%, transparent);
  border-radius: var(--r-3);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.45) inset;
  margin: 18%;
}
.scan-status {
  position: absolute; bottom: 12px; left: 0; right: 0;
  text-align: center; color: white; font-size: var(--text-sm);
}
.scan-close {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,0.18);
  border: none; color: white; font-size: 28px;
  width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; line-height: 1;
}
.scan-close:hover { background: rgba(255,255,255,0.28); }

/* ── Section W3 — Tap-to-call/maps/mailto link styling ──────── */
a[href^="tel:"], a[href^="mailto:"] {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in oklch, var(--accent) 40%, transparent);
}
a[href^="tel:"]:hover, a[href^="mailto:"]:hover {
  text-decoration: underline;
}
a[href*="maps.google.com"] { color: var(--accent); text-decoration: none; }
a[href*="maps.google.com"]:hover { text-decoration: underline; }

/* ── Section Z — Bulk imports UI ─────────────────────────────── */
.imports-page { max-width: 1200px; margin: 0 auto; }
.imports-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-4);
  align-items: flex-start;
}
@media (max-width: 800px) { .imports-layout { grid-template-columns: 1fr; } }

.imports-wizard {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
}
.imports-step-no {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}
.imports-step h2 { margin: 0 0 var(--sp-3); font-size: var(--text-xl); }

.imports-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.imports-entity-card {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  text-align: center;
  cursor: pointer;
  transition: all var(--t-fast);
}
.imports-entity-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.imports-entity-card.active {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
  box-shadow: 0 0 0 1px var(--accent);
}
.imports-entity-icon { font-size: 32px; margin-bottom: var(--sp-2); }
.imports-entity-name { font-weight: var(--weight-semibold); margin-bottom: 4px; }
.imports-entity-sub  { font-size: var(--text-xs); color: var(--text-2); }

.imports-dropzone {
  border: 2px dashed var(--color-border);
  border-radius: var(--r-3);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  transition: border-color var(--t-fast), background var(--t-fast);
  margin-top: var(--sp-3);
}
.imports-dropzone-active {
  border-color: var(--accent);
  background: color-mix(in oklch, var(--accent) 8%, transparent);
}
.imports-dropzone-icon { font-size: 40px; margin-bottom: var(--sp-2); }
.imports-dropzone-text { font-size: var(--text-base); }

.imports-actions {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
}

.imports-mapping-table { font-size: var(--text-sm); }
.imports-mapping-table th, .imports-mapping-table td { padding: 6px 12px; }

.imports-history {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-3);
  padding: var(--sp-3);
}
.imports-history-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-1);
}
.imports-history-item {
  display: block;
  text-decoration: none;
  color: var(--text);
  padding: var(--sp-2);
  border-radius: var(--r-2);
  border: 1px solid transparent;
}
.imports-history-item:hover {
  background: var(--surface-2);
  border-color: var(--color-border);
}
.imports-history-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--text-sm);
}
.imports-history-sub {
  font-size: var(--text-xs);
  color: var(--text-2);
  margin-top: 2px;
}

/* ──────────────────────────────────────────────────────────────────
 * Order Catalogue Picker  (#/orders/new/catalogue)
 * ────────────────────────────────────────────────────────────────── */
.ocp-page { padding-bottom: 80px; /* clearance for the sticky bottom bar */ }
.ocp-card {
  padding: var(--sp-3) var(--sp-3) 0 var(--sp-3);
  overflow: hidden;
}

.onv2-browse-cat-btn {
  margin-left: 6px;
  white-space: nowrap;
}

/* Customer banner */
.ocp-cust-banner {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-2);
  margin-bottom: var(--sp-3);
  font-size: var(--text-sm);
}
.ocp-cust-banner-ok   { background: color-mix(in oklch, var(--success) 8%, transparent); color: var(--text); }
.ocp-cust-banner-warn { background: color-mix(in oklch, var(--warning) 10%, transparent); color: var(--text); }
.ocp-cust-banner a    { color: var(--accent); margin-left: auto; font-weight: var(--weight-semi); }

/* Search bar */
.ocp-search-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) 0;
  margin-bottom: var(--sp-2);
}
.ocp-search-wrap { flex: 1; }

/* Filter chips */
.ocp-filter-row {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding-bottom: var(--sp-3);
}
.ocp-chip-group {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.ocp-chip-group-sub {
  padding-left: var(--sp-2);
  border-left: 2px solid var(--color-border);
}
.ocp-chip {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--surface);
  color: var(--text-2);
  font-size: 13px;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.ocp-chip:hover { background: var(--surface-2); color: var(--text); }
.ocp-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast, #fff);
}
.ocp-chip-sub.is-on { background: color-mix(in oklch, var(--accent) 75%, transparent); }
.ocp-filter-selects {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-2);
}
.ocp-filter-select { max-width: 220px; }
.ocp-filter-label {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 140px;
}
.ocp-filter-label-text {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); font-weight: var(--weight-semi);
}
.ocp-filter-label select:disabled {
  background: var(--surface-2); color: var(--text-3); cursor: not-allowed;
}

/* Table */
.ocp-table-wrap {
  margin: 0 calc(-1 * var(--sp-3));      /* edge-flush within the card */
  overflow-x: auto;
}
/* min-width keeps every column at its target size; the wrap above scrolls
   horizontally when the viewport is narrower than the sum of the columns
   (otherwise the browser squeezes inputs down to ~30px and value text
   gets clipped behind the type=number spinner buttons). */
.ocp-table { width: 100%; min-width: 1180px; font-size: var(--text-sm); border-collapse: separate; border-spacing: 0; }
/* Hide the number-spinner buttons — they steal ~16px from each input and
   are useless for currency/discount fields where the user wants to type. */
.ocp-table input[type=number]::-webkit-inner-spin-button,
.ocp-table input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none; margin: 0;
}
.ocp-table input[type=number] { -moz-appearance: textfield; }
.ocp-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  border-bottom: 1px solid var(--color-border);
  padding: 10px 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-2);
  font-weight: var(--weight-semi);
  text-align: left;
  white-space: nowrap;
}
.ocp-table tbody td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.ocp-row:hover td { background: var(--surface-2); }
/* Highlight rows whose product is already on the destination doc — green-tinted
   strip on the left + faint background so they're easy to spot at a glance. */
.ocp-row-added td {
  background: color-mix(in oklch, var(--success) 5%, transparent);
}
.ocp-row-added:hover td {
  background: color-mix(in oklch, var(--success) 11%, transparent);
}
.ocp-row-added td:first-child {
  box-shadow: inset 3px 0 0 var(--success);
}
/* Keyboard-navigation highlight — the row whose input / Add button has focus.
   Placed after .ocp-row-added so the blue focus strip wins when a row is both
   added and focused. */
.ocp-row:focus-within td { background: var(--accent-ring, oklch(70% 0.12 230 / 0.16)); }
.ocp-row:focus-within td:first-child { box-shadow: inset 3px 0 0 var(--accent, var(--primary, #2563eb)); }
/* Keyboard-shortcut hint at the right of the catalogue search bar. */
.ocp-kbd-hint { margin-left: auto; white-space: nowrap; align-self: center; }
@media (max-width: 760px) { .ocp-kbd-hint { display: none; } }
/* Vertically center every cell + number inputs in the rich table so qty/price
   columns line up with the product title row (was visibly off when the
   product cell wraps to 2 lines). */
.ocp-table tbody td { vertical-align: middle; }
.ocp-table tbody td input { vertical-align: middle; }

.ocp-col-img   { width: 58px; }
.ocp-col-prod  { min-width: 300px; }
.ocp-col-stock { width: 70px;  padding-right: 8px; }
.ocp-col-qty   { width: 90px; }
.ocp-col-price { width: 110px; }
.ocp-col-default { width: 80px; }
.ocp-col-disc  { width: 70px; }
.ocp-col-disc-amt { width: 90px; padding-right: 8px; }
.ocp-col-vat   { width: 50px; }
.ocp-col-vat-amt { width: 80px; padding-right: 8px; }
.ocp-col-line  { width: 90px;  padding-right: 8px; }
.ocp-col-total { width: 100px; padding-right: 8px; }
.ocp-col-cust  { width: 110px; }
/* Headers + cells share the same right-align for every numeric column so the
   column header reads exactly above the value below it. Without this, headers
   defaulted to the table's `text-align: left` while inputs/values inside the
   cells were right-aligned, visibly drifting the column. */
.ocp-table th.ocp-col-stock,
.ocp-table td.ocp-col-stock,
.ocp-table th.ocp-col-qty,
.ocp-table td.ocp-col-qty,
.ocp-table th.ocp-col-price,
.ocp-table td.ocp-col-price,
.ocp-table th.ocp-col-default,
.ocp-table td.ocp-col-default,
.ocp-table th.ocp-col-disc,
.ocp-table td.ocp-col-disc,
.ocp-table th.ocp-col-disc-amt,
.ocp-table td.ocp-col-disc-amt,
.ocp-table th.ocp-col-vat,
.ocp-table td.ocp-col-vat,
.ocp-table th.ocp-col-vat-amt,
.ocp-table td.ocp-col-vat-amt,
.ocp-table th.ocp-col-line,
.ocp-table td.ocp-col-line,
.ocp-table th.ocp-col-total,
.ocp-table td.ocp-col-total { text-align: right; font-variant-numeric: tabular-nums; }
.ocp-cust-cell { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ocp-cust-btn { padding: 2px 6px; line-height: 1.2; }

/* Unit £ save-state indicator (auto-save to customer pricing) */
.ocp-col-price { position: relative; }
.ocp-save-state {
  display: flex; justify-content: flex-end; align-items: center;
  height: 14px; margin-top: 2px;
}
.ocp-ss-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}
.ocp-ss-pending { background: var(--text-3); animation: ocpPulse 1.2s infinite ease-in-out; }
.ocp-ss-saving  { background: var(--accent); animation: ocpPulse 0.8s infinite ease-in-out; }
.ocp-ss-tag {
  font-size: 12px; line-height: 1; padding: 2px 6px; border-radius: 999px;
  font-weight: var(--weight-semi); white-space: nowrap;
}
.ocp-ss-saved { background: color-mix(in oklch, var(--success) 16%, transparent); color: var(--success); }
.ocp-ss-error { background: color-mix(in oklch, var(--danger) 16%, transparent);  color: var(--danger);  }
@keyframes ocpPulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.15); }
}
.ocp-col-act   { width: 110px; text-align: right; padding-right: 12px; }

/* Right-align number inputs inside cells. Zero internal right padding so the
   digit sits flush against the input's right border, which lines up with the
   right-aligned header text above. */
.ocp-col-qty input,
.ocp-col-price input,
.ocp-col-disc input,
.ocp-col-disc-amt input {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 100%;
  padding-left: 6px;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* Image thumbnail */
.ocp-thumb {
  width: 46px; height: 46px;
  object-fit: cover;
  border-radius: var(--r-2);
  background: var(--surface-2);
  display: block;
}
.ocp-thumb-empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
}

/* Product cell title + meta */
.ocp-prod-title {
  font-weight: var(--weight-semi); color: var(--text);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.25;
}
.ocp-prod-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.ocp-prod-meta  { font-size: var(--text-xs); color: var(--text-3); margin-top: 1px; }
.ocp-prod-code  { font-family: var(--font-mono, ui-monospace, monospace); color: var(--text-2); }
/* Inline stock-alert chips in the product title (shown only when low / out). */
.ocp-chip-out { background: color-mix(in oklch, var(--danger) 14%, transparent); color: var(--danger); border-color: transparent; }
.ocp-chip-low { background: color-mix(in oklch, var(--warning) 18%, transparent); color: var(--warning-700, #92600a); border-color: transparent; }

/* Two-column layout inside the PRODUCT cell: meta-block on the left
   takes all remaining space, barcode SVG strip sits on the right. */
.ocp-prod-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
}
.ocp-prod-main {
  flex: 1;
  min-width: 0;
}
.ocp-prod-barcode {
  flex-shrink: 0;
  width: 124px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ocp-prod-barcode img {
  display: block;
  width: 100%;
  max-height: 32px;
  object-fit: contain;
}
/* Chip strip — MOQ + pack-size chips under the meta line. Small,
   muted, single line so the row doesn't grow taller than necessary. */
.ocp-prod-chips {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.ocp-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--color-surface-2, var(--surface-2));
  color: var(--color-text-2, var(--text-2));
  border: 1px solid var(--color-border, var(--border));
  border-radius: 999px;
  white-space: nowrap;
}

/* Stock indicator */
.ocp-stock-out  { color: var(--danger); font-weight: var(--weight-semi); }
.ocp-stock-low  { color: var(--warning); font-weight: var(--weight-semi); }

/* Default-price reset button — price on top, % diff vs Unit £ below */
.ocp-default-cell {
  background: none; border: 0;
  font: inherit; color: var(--text-2);
  cursor: pointer;
  padding: 0;
  display: inline-flex; flex-direction: column; align-items: flex-end;
  line-height: 1.2;
  text-align: right;
}
.ocp-default-cell:hover .ocp-default-amt { color: var(--accent); }
.ocp-default-amt {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  font-variant-numeric: tabular-nums;
}
.ocp-default-pct {
  font-size: 12px;
  font-weight: var(--weight-semi);
  margin-top: 1px;
  font-variant-numeric: tabular-nums;
}

/* Add button — width-locked so "Added · 2" doesn't reflow the column */
.ocp-add-btn {
  min-width: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Empty state cell */
.ocp-empty { background: var(--surface); }

/* Pagination strip */
.ocp-pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 1px solid var(--color-border);
  background: var(--surface);
}

/* Sticky bottom bar — order summary + Apply */
.ocp-bottom-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 20px -4px rgba(0,0,0,0.08);
  z-index: 50;
}
.ocp-bottom-stats { font-size: var(--text-sm); color: var(--text-2); }
.ocp-bottom-stats strong { color: var(--text); }
.ocp-bottom-actions { display: flex; gap: var(--sp-2); }

/* Sidebar collapse hides quick-fab; bottom bar should still be reachable */
body.no-quick-fab .ocp-bottom-bar { /* unchanged */ }

/* Phone tweaks — fewer columns, more padding around tap targets */
@media (max-width: 640px) {
  .ocp-table thead th { font-size: 12px; padding: 8px 4px; }
  .ocp-table tbody td { padding: 8px 4px; }
  .ocp-col-default, .ocp-col-vat, .ocp-col-vat-amt, .ocp-col-line, .ocp-col-cust { display: none; }
  .ocp-thumb { width: 48px; height: 48px; }
  .ocp-col-img { width: 56px; }
  .ocp-bottom-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }
  .ocp-bottom-actions { justify-content: stretch; }
  .ocp-bottom-actions .btn { flex: 1; }
}

/* ===========================================================================
   Customer form page — wide 2-column layout with sticky sidebar.
   Replaces the modal form that used to live inside a 600px popup. Sections
   are laid out in a 12-column CSS Grid so the form fits the full page width
   without leaving dead space on the right; sidebar pins to the viewport so
   account stats / quick actions / recent orders stay visible while scrolling.
   =========================================================================== */
.cust-form-wrapper { max-width: none; }
.cust-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--sp-4);
  align-items: start;
}
@media (max-width: 1100px) {
  .cust-form-layout { grid-template-columns: 1fr; }
}

/* Form is a 12-col grid; each section spans the columns it needs. Sections
   stack two-up so the empty right space is filled with useful sections. */
.cust-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-4);
}
.cust-section { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.cust-section-company    { grid-column: span 7; }
.cust-section-contact    { grid-column: span 5; }
.cust-section-billing    { grid-column: span 6; }
.cust-section-shipping   { grid-column: span 6; }
.cust-section-financial  { grid-column: span 7; }
.cust-section-fulfillment{ grid-column: span 5; }
.cust-section-notes      { grid-column: span 12; }
.cust-form-footer        { grid-column: span 12; display:flex; justify-content:space-between; align-items:center; padding: var(--sp-3) 0 var(--sp-2); gap: var(--sp-3); }
.cust-form-footer-actions { display:flex; gap: var(--sp-2); }

/* Single-column at narrow widths so every section is one wide card. */
@media (max-width: 900px) {
  .cust-form-grid { grid-template-columns: 1fr; }
  .cust-section, .cust-form-footer { grid-column: span 1 !important; }
}

/* Section header used inside each card */
.cust-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--color-border, var(--border));
}
.cust-sec-label {
  font-size: var(--text-xs, 11px);
  font-weight: var(--weight-semi, 600);
  color: var(--color-text-2, var(--text-2));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.cust-sec-link {
  font-size: var(--text-xs, 11px);
  color: var(--accent);
  text-decoration: none;
}
.cust-sec-link:hover { text-decoration: underline; }

/* Each card lays its own form fields out as a 2-column sub-grid so labels
   and inputs sit cleanly without per-field margin gymnastics. */
.cust-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.cust-field { min-width: 0; }
.cust-field-wide { grid-column: 1 / -1; }
.cust-field-help { font-size: var(--text-xs, 11px); color: var(--color-text-3, var(--text-3)); margin-top: 4px; }
@media (max-width: 640px) {
  .cust-fields { grid-template-columns: 1fr; }
  .cust-field-wide { grid-column: 1; }
}

.cust-copy-btn { font-size: var(--text-xs, 11px); padding: 4px 8px; display: inline-flex; align-items: center; gap: 4px; }
.cust-copy-btn svg { width: 12px; height: 12px; }

/* Sidebar — sticky, compact, dense. */
.cust-sidebar {
  display: flex; flex-direction: column; gap: var(--sp-3);
  position: sticky; top: 72px;
  align-self: start;
  min-width: 0;
}
@media (max-width: 1100px) { .cust-sidebar { position: static; } }
.cust-side-card { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }

/* Identity card — gradient strip + initials avatar + chips. */
.cust-identity-card {
  background: linear-gradient(135deg, var(--accent-ring, oklch(70% 0.12 230 / 0.10)) 0%, var(--color-surface, var(--surface)) 60%);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-3);
  align-items: center;
}
.cust-identity-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg, white);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  font-weight: var(--weight-semi, 600);
  letter-spacing: 0.02em;
}
.cust-identity-body { min-width: 0; }
.cust-identity-name {
  font-weight: var(--weight-semi, 600);
  color: var(--color-text, var(--text));
  font-size: var(--text-md, 14px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cust-identity-acct {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-xs, 11px);
  color: var(--color-text-2, var(--text-2));
  margin-top: 2px;
}
.cust-identity-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cust-chip {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-surface-2, var(--surface-2));
  color: var(--color-text-2, var(--text-2));
  border: 1px solid var(--color-border, var(--border));
  white-space: nowrap;
}
.cust-chip-info    { background: color-mix(in oklch, var(--accent) 14%, transparent); color: var(--accent); border-color: transparent; }
.cust-chip-warning { background: color-mix(in oklch, var(--warning, oklch(75% 0.16 75)) 16%, transparent); color: var(--warning, oklch(60% 0.16 75)); border-color: transparent; }
.cust-chip-danger  { background: color-mix(in oklch, var(--danger) 14%, transparent); color: var(--danger); border-color: transparent; }

/* KPI grid in the Account Summary card */
.cust-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.cust-kpi {
  background: var(--color-surface-2, var(--surface-2));
  border-radius: var(--radius-md, 8px);
  padding: 10px 12px;
}
.cust-kpi-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-3, var(--text-3));
  margin-bottom: 2px;
}
.cust-kpi-value {
  font-size: var(--text-md, 14px);
  font-weight: var(--weight-semi, 600);
  font-variant-numeric: tabular-nums;
  color: var(--color-text, var(--text));
}

/* Credit utilisation bar */
.cust-util-row { display: flex; flex-direction: column; gap: 6px; }
.cust-util-label {
  display: flex; justify-content: space-between;
  font-size: var(--text-xs, 11px);
  color: var(--color-text-2, var(--text-2));
}
.cust-util-pct { font-variant-numeric: tabular-nums; font-weight: var(--weight-semi, 600); }
.cust-util-bar {
  height: 6px;
  background: var(--color-surface-2, var(--surface-2));
  border-radius: 999px;
  overflow: hidden;
}
.cust-util-bar-fill { height: 100%; transition: width 0.3s ease, background-color 0.2s; }
.cust-bar-ok      { background: var(--success, oklch(75% 0.18 145)); }
.cust-bar-warning { background: var(--warning, oklch(75% 0.16 75)); }
.cust-bar-danger  { background: var(--danger); }
.cust-last-order {
  display: flex; justify-content: space-between;
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--color-border, var(--border));
}

/* Quick action buttons — 2 col grid of icon+label squares */
.cust-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.cust-qa-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  color: var(--color-text-2, var(--text-2));
  font-size: var(--text-xs, 11px);
  font-weight: var(--weight-semi, 600);
  transition: all 120ms ease-out;
}
.cust-qa-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-ring, oklch(70% 0.12 230 / 0.08));
  transform: translateY(-1px);
}
.cust-qa-btn svg { width: 18px; height: 18px; }

/* Mini list rows (Recent Orders / Invoices) */
.cust-mini-list { display: flex; flex-direction: column; gap: 4px; }
.cust-mini-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 6px);
  text-decoration: none;
  color: inherit;
  transition: background 120ms ease-out;
  gap: var(--sp-2);
}
.cust-mini-row:hover { background: var(--color-surface-2, var(--surface-2)); }
.cust-mini-main { min-width: 0; flex: 1; }
.cust-mini-title {
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-semi, 600);
  color: var(--color-text, var(--text));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cust-mini-sub {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-3, var(--text-3));
  margin-top: 1px;
}
.cust-mini-val {
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-semi, 600);
  font-variant-numeric: tabular-nums;
  color: var(--color-text, var(--text));
  white-space: nowrap;
}

/* Onboarding checklist (shown only in New mode). Rows tick green via JS as
   their corresponding form field gets a value. */
.cust-onboard-list { display: flex; flex-direction: column; gap: 4px; }
.cust-onboard-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  padding: 8px 6px;
  border-radius: var(--radius-sm, 6px);
  align-items: start;
  transition: background 120ms, color 120ms;
}
.cust-onboard-row + .cust-onboard-row { border-top: 1px solid var(--color-border, var(--border)); border-radius: 0; }
.cust-onboard-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  border: 1px solid var(--color-border, var(--border));
  color: var(--color-text-3, var(--text-3));
  background: var(--color-surface, var(--surface));
  font-weight: var(--weight-semi, 600);
}
.cust-onboard-title {
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-semi, 600);
  color: var(--color-text, var(--text));
}
.cust-onboard-sub {
  font-size: var(--text-xs, 11px);
  color: var(--color-text-3, var(--text-3));
  margin-top: 2px;
  line-height: 1.4;
}
.cust-onboard-done .cust-onboard-icon {
  background: var(--success, oklch(75% 0.18 145));
  color: white;
  border-color: var(--success, oklch(75% 0.18 145));
}
.cust-onboard-done .cust-onboard-title { color: var(--color-text-2, var(--text-2)); text-decoration: line-through; text-decoration-color: var(--color-text-3, var(--text-3)); }

/* Tips card — small ordered list */
.cust-tips-list {
  margin: 0;
  padding-left: var(--sp-4);
  display: flex; flex-direction: column;
  gap: 6px;
  font-size: var(--text-xs, 11px);
  color: var(--color-text-2, var(--text-2));
  line-height: 1.5;
}
.cust-tips-list li::marker { color: var(--accent); font-weight: var(--weight-semi, 600); }

/* Trade Discount sub-block inside Financial Settings. Visually separated by a
   subtle banded background + accent left edge so the auto-apply toggle reads
   as its own decision, not just another field. */
.cust-trade-discount {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface-2, var(--surface-2));
  border-radius: var(--radius-md, 8px);
  border-left: 3px solid var(--accent);
}
.cust-trade-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.cust-trade-label {
  font-size: var(--text-sm, 13px);
  font-weight: var(--weight-semi, 600);
  color: var(--color-text, var(--text));
}
.cust-trade-hint {
  font-size: var(--text-xs, 11px);
  color: var(--color-text-3, var(--text-3));
}
.cust-trade-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--sp-3);
  align-items: center;
}
@media (max-width: 720px) { .cust-trade-row { grid-template-columns: 1fr; } }
.cust-trade-input-wrap { position: relative; }
.cust-trade-input { padding-right: 28px !important; text-align: right; font-variant-numeric: tabular-nums; }
.cust-trade-pct {
  position: absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  font-size: var(--text-sm, 13px);
  color: var(--color-text-3, var(--text-3));
  pointer-events: none;
}
.cust-trade-switch {
  display: flex; align-items: center; gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: var(--text-sm, 13px);
  color: var(--color-text-2, var(--text-2));
}
.cust-trade-switch input { position: absolute; opacity: 0; pointer-events: none; }
.cust-trade-switch-track {
  flex: 0 0 36px;
  width: 36px; height: 20px;
  background: var(--color-border, var(--border));
  border-radius: 999px;
  position: relative;
  transition: background 160ms ease-out;
}
.cust-trade-switch-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--color-surface, var(--surface));
  border-radius: 50%;
  transition: transform 160ms ease-out;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.cust-trade-switch input:checked ~ .cust-trade-switch-track {
  background: var(--accent);
}
.cust-trade-switch input:checked ~ .cust-trade-switch-track .cust-trade-switch-thumb {
  transform: translateX(16px);
}
.cust-trade-switch input:disabled ~ .cust-trade-switch-track {
  opacity: 0.5;
  cursor: not-allowed;
}
.cust-trade-switch input:disabled ~ .cust-trade-switch-text {
  color: var(--color-text-3, var(--text-3));
}
.cust-trade-switch-text { line-height: 1.4; }

/* ===========================================================================
   Shared document summary panel — sits above the sticky total bar on every
   builder + detail page. Renders Gross / Discounts (line + trade + order +
   coupon) / Net / Delivery / VAT / Final amount. Each row hides itself when
   its value is zero so simple docs stay compact.
   =========================================================================== */
.onv2-doc-summary {
  margin: var(--sp-4, 16px) 0;
  padding: 14px 18px;
  /* Soft accent-tinted card. The faint background gives the panel a
     visual identity without a heavy border; rounded corners + 1px
     border match the items-table edge so it sits in the page like a
     companion to the data above it, not a foreign element. */
  background: color-mix(in oklch, var(--accent, #2563eb) 3%, var(--color-surface, var(--surface)));
  border: 1px solid var(--color-border, var(--border));
  border-radius: var(--r-md, 8px);
  min-width: 300px;
  max-width: 420px;
  margin-left: auto;
}

/* ── Photo-picker modal (used by OQP.identifyAndAddProduct) ────────
   Two-path picker: live webcam capture OR file upload. Lives outside
   the global #modal so it doesn't fight with other modals for z-index. */
.pickphoto-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: pickphoto-fade-in 0.15s ease-out;
}
@keyframes pickphoto-fade-in { from { opacity: 0; } to { opacity: 1; } }
.pickphoto-modal {
  background: var(--color-surface, var(--surface));
  border-radius: var(--r-lg, 12px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.30);
  width: 92vw;
  max-width: 520px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pickphoto-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border, var(--border));
  font-size: 14px;
}
.pickphoto-close {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  color: var(--color-text-3, var(--text-3));
  cursor: pointer;
  padding: 0 4px;
}
.pickphoto-close:hover { color: var(--color-text, var(--text)); }
.pickphoto-body {
  padding: 18px;
  flex: 1;
  overflow-y: auto;
}
.pickphoto-choose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.pickphoto-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 14px;
  background: var(--color-surface-2, var(--surface-2));
  border: 2px solid transparent;
  border-radius: var(--r-md, 8px);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
  font-family: inherit;
}
.pickphoto-choice:hover {
  border-color: var(--accent, #2563eb);
  background: color-mix(in oklch, var(--accent, #2563eb) 6%, var(--color-surface-2, var(--surface-2)));
}
.pickphoto-choice:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; }
.pickphoto-choice-icon { font-size: 36px; line-height: 1; }
.pickphoto-choice-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-text, var(--text));
}
.pickphoto-choice-sub {
  font-size: 12px;
  color: var(--color-text-3, var(--text-3));
}

/* Camera view */
.pickphoto-camera {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pickphoto-camera video {
  width: 100%;
  max-height: 480px;
  background: #000;
  border-radius: var(--r-md, 8px);
  display: block;
  object-fit: contain;
}
.pickphoto-cam-status {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-2, var(--text-2));
  min-height: 18px;
}
.pickphoto-cam-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.pickphoto-capture {
  font-size: 14px;
  padding: 10px 22px;
}

@media (max-width: 540px) {
  .pickphoto-choose { grid-template-columns: 1fr; }
  .pickphoto-choice { padding: 18px 14px; }
}

/* ── AI test-connection inline status badge ─────────────────────────
   Renders next to the "Test connection" button in Settings → AI so the
   user sees the result without having to catch a 4-second auto-dismiss
   toast. Empty by default, populated by testAiKey() with one of four
   states: testing / ok / warn / err. */
.ai-test-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: var(--sp-3, 12px);
  padding: 0 12px;
  height: 34px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  vertical-align: middle;
  /* hidden until populated */
}
.ai-test-status:empty { display: none; }
.ai-test-status .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.ai-test-status .spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ai-test-spin 0.7s linear infinite;
}
@keyframes ai-test-spin { to { transform: rotate(360deg); } }
.ai-test-status.is-testing {
  background: color-mix(in oklch, var(--accent, #2563eb) 8%, transparent);
  border-color: color-mix(in oklch, var(--accent, #2563eb) 30%, transparent);
  color: var(--accent, #2563eb);
}
.ai-test-status.is-ok {
  background: color-mix(in oklch, var(--success, oklch(70% 0.16 145)) 12%, transparent);
  border-color: color-mix(in oklch, var(--success, oklch(70% 0.16 145)) 38%, transparent);
  color: var(--success, #1f9b6c);
}
.ai-test-status.is-ok .ico {
  background: var(--success, #1f9b6c);
  color: #fff;
}
.ai-test-status.is-warn {
  background: color-mix(in oklch, var(--warning, #d4831a) 12%, transparent);
  border-color: color-mix(in oklch, var(--warning, #d4831a) 38%, transparent);
  color: var(--warning, #c98c0a);
}
.ai-test-status.is-warn .ico {
  background: var(--warning, #d4831a);
  color: #fff;
}
.ai-test-status.is-err {
  background: color-mix(in oklch, var(--danger, #d63838) 12%, transparent);
  border-color: color-mix(in oklch, var(--danger, #d63838) 38%, transparent);
  color: var(--danger, #d63838);
}
.ai-test-status.is-err .ico {
  background: var(--danger, #d63838);
  color: #fff;
}

/* ── Customer picker modal (auto-opens on every new builder) ─────────
   First-class modal launched from OQP.openCustomerPickerModal. Shown
   on /orders/new, /quotations/new, /proformas/new, /invoices/new when
   no customer is already set. Search-as-you-type input + scrollable
   list + arrow-key/Enter navigation + "Create new customer" CTA. */
#modal.cust-picker-modal #modalBody { padding: 0 !important; }
#modal.cust-picker-modal #modal-content,
#modal.cust-picker-modal .modal-content { max-width: 640px; width: 92vw; }
.cust-picker {
  display: flex;
  flex-direction: column;
  height: min(72vh, 640px);
}
.cust-picker-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border, var(--border));
  background: var(--color-surface, var(--surface));
}
.cust-picker-search svg { color: var(--color-text-3, var(--text-3)); flex-shrink: 0; }
.cust-picker-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--color-text, var(--text));
}
.cust-picker-search input::placeholder { color: var(--color-text-3, var(--text-3)); }
.cust-picker-kbd { font-size: 12px; color: var(--color-text-3, var(--text-3)); white-space: nowrap; }
.cust-picker-kbd kbd {
  background: var(--color-surface-2, var(--surface-2));
  border: 1px solid var(--color-border, var(--border));
  border-radius: 3px;
  padding: 1px 5px;
  font-family: inherit;
  font-size: 12px;
}
.cust-picker-list {
  flex: 1;
  overflow-y: auto;
  background: var(--color-surface-2, var(--surface-2));
}
.cust-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border, var(--border));
  cursor: pointer;
  background: var(--color-surface, var(--surface));
  transition: background 0.08s;
}
.cust-picker-row:hover, .cust-picker-row.is-active {
  background: color-mix(in oklch, var(--accent, #2563eb) 8%, var(--color-surface, var(--surface)));
}
.cust-picker-row.is-active {
  border-left: 3px solid var(--accent, #2563eb);
  padding-left: 13px;
}
.cust-picker-row-main { min-width: 0; flex: 1; }
/* Compact 2-row card: identity (name + aka, terms · address) on the left, a money +
   activity rail on the right — both vertically centred so the row stays short and the
   right side is no longer dead space. */
.cust-picker-row { align-items: center; }
.cpk-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cust-picker-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, var(--text));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}
.cust-picker-meta {
  font-size: 13px;
  color: var(--color-text-2, var(--text-2));
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* AKA — former name(s) after a rename, inline beside the current name. */
.cpk-aka {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 12px;
  font-style: italic;
  color: var(--color-text-3, var(--text-3));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cpk-aka svg { opacity: 0.6; flex-shrink: 0; }
/* Right rail — money pills over activity pills, right-aligned + vertically centred. */
.cust-picker-row-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  max-width: 250px;
}
/* Pill rows */
.cpk-pills { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cpk-pills--meta { margin-top: 5px; overflow: hidden; }
.cust-picker-row-side .cpk-pills { justify-content: flex-end; flex-wrap: wrap; gap: 4px; }
/* Square, colour-coded info pill */
.cpk-pill {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; line-height: 1.55;
  padding: 1px 7px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.cpk-pill svg { opacity: 0.75; flex-shrink: 0; }
.cpk-pill--loc { font-weight: 500; flex: 0 1 auto; min-width: 0; max-width: 270px; overflow: hidden; text-overflow: ellipsis; }
/* Colour by meaning */
.cpk-pill--acc   { background: color-mix(in oklch, var(--color-text-3, #6b7280) 13%, transparent); color: var(--color-text-2, #52525b); }
.cpk-pill--loc   { background: color-mix(in oklch, var(--color-text-3, #6b7280) 12%, transparent); color: var(--color-text-2, #52525b); }
.cpk-pill--count { background: color-mix(in oklch, var(--color-text-3, #6b7280) 12%, transparent); color: var(--color-text-2, #52525b); }
.cpk-pill--trade { background: color-mix(in oklch, #7c3aed 14%, transparent); color: #6d28d9; }
.cpk-pill--terms { background: color-mix(in oklch, var(--accent, #2563eb) 13%, transparent); color: var(--accent, #2563eb); }
.cpk-pill--recent{ background: color-mix(in oklch, var(--color-success, #16a34a) 15%, transparent); color: var(--color-success, #15803d); }
.cpk-pill--new   { background: color-mix(in oklch, var(--color-success, #16a34a) 15%, transparent); color: var(--color-success, #15803d); }
.cpk-pill--warm  { background: color-mix(in oklch, var(--warning, #d4831a) 16%, transparent); color: var(--warning, #b45309); }
.cpk-pill--cold  { background: color-mix(in oklch, var(--color-text-3, #6b7280) 14%, transparent); color: var(--color-text-3, #6b7280); }
.cpk-pill--money { background: color-mix(in oklch, #0d9488 14%, transparent); color: #0f766e; }
.cpk-pill--owed  { background: color-mix(in oklch, var(--warning, #d4831a) 18%, transparent); color: var(--warning, #b45309); }
.cpk-pill--open  { background: color-mix(in oklch, var(--danger, #d63838) 14%, transparent); color: var(--danger, #d63838); }
.cust-picker-bal {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--warning, #d4831a) 18%, transparent);
  color: var(--warning, #d4831a);
  white-space: nowrap;
  flex-shrink: 0;
}
.cust-picker-hold {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--danger, #d63838);
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cust-picker-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--color-text-3, var(--text-3));
  font-size: 14px;
}
.cust-picker-empty .btn-link-inline {
  background: none; border: none; padding: 0;
  color: var(--accent, #2563eb);
  font: inherit; cursor: pointer; text-decoration: underline;
}
.cust-picker-more {
  padding: 10px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-3, var(--text-3));
  background: var(--color-surface, var(--surface));
}
.cust-picker-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-border, var(--border));
  background: var(--color-surface, var(--surface));
}

/* ── Order-level PRICING bar ─────────────────────────────────────────
   Single horizontal row sitting directly under the items table holding:
   Order discount type+value · Coupon code+Apply · Email PDF toggle.
   Highlighted background so it reads as a distinct action area between
   the items table (above) and the SUMMARY panel (below).
   All three fields use INLINE labels (no stacking) so every input sits
   on the same baseline — bar height stays compact (~46px). */
.onv2-pricing-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 12px);
  flex-wrap: wrap;
  padding: 8px var(--sp-4, 16px);
  margin: var(--sp-3, 12px) 0 0;
  background: color-mix(in oklch, var(--accent) 6%, var(--color-surface, var(--surface)));
  border: 1px solid color-mix(in oklch, var(--accent) 22%, var(--color-border, var(--border)));
  border-radius: var(--radius-md, 8px);
}
.onv2-pricing-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.onv2-pricing-label {
  font-size: var(--text-xs, 11px);
  font-weight: var(--weight-semi, 600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-3, var(--text-3));
  white-space: nowrap;
}
.onv2-pricing-inputs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
/* Tighter input sizing — labels are now inline so we can keep inputs
   compact without losing legibility. */
.onv2-pricing-bar .onv2-pricing-type   { width: 58px;  flex-shrink: 0; }
.onv2-pricing-bar .onv2-pricing-value  { width: 80px;  flex-shrink: 0; }
.onv2-pricing-bar .onv2-pricing-coupon { width: 140px; flex-shrink: 0; }
.onv2-pricing-sep {
  width: 1px;
  height: 24px;
  background: color-mix(in oklch, var(--accent) 22%, var(--color-border, var(--border)));
  margin: 0 var(--sp-1, 4px);
}
.onv2-pricing-email {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;            /* push to the right end of the row */
  font-size: var(--text-sm, 13px);
  color: var(--color-text-2, var(--text-2));
  cursor: pointer;
  white-space: nowrap;
}
.onv2-pricing-email input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
}
/* On narrow screens drop the email toggle's auto-margin so the bar wraps
   naturally without leaving a giant gap. */
@media (max-width: 720px) {
  .onv2-pricing-email   { margin-left: 0; }
  .onv2-pricing-sep     { display: none; }
}
/* Redesigned summary list:
   - Two-column grid (label right-aligned, value right-aligned)
   - Group spacing > row dividers. Only 2 visible dividers: above Net
     Total (separates discounts from product subtotal) and above Total
     (separates the running sum from the grand total).
   - Discount rows: red value + minus sign so the maths reads obvious.
   - Net Total: dashed top border + bold to elevate it as a subtotal.
   - Aux rows (delivery): muted text, smaller weight — secondary info.
   - Total: enlarged + accent-coloured value, anchors the panel. */
.onv2-ds-rows {
  display: flex;
  flex-direction: column;
}
.onv2-ds-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--sp-4, 16px);
  padding: 5px 0;
  font-size: var(--text-sm, 13px);
  color: var(--color-text, var(--text));
}
.onv2-ds-row[hidden] { display: none; }
.onv2-ds-l {
  text-align: right;
  color: var(--color-text-2, var(--text-2));
  font-weight: 500;
}
.onv2-ds-paren {
  color: var(--color-text-3, var(--text-3));
  font-weight: 400;
  margin-left: 2px;
}
.onv2-ds-v {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
  min-width: 80px;
  color: var(--color-text, var(--text));
}
/* Discount rows — value in danger red, with a minus already prefixed
   by updateDocSummary. Label stays neutral so the eye lands on the
   number itself. */
.onv2-ds-disc .onv2-ds-v {
  color: var(--danger, oklch(60% 0.18 25));
}
/* Net Total — promoted as a subtotal. Dashed divider separates it
   from the (possibly multiple) discount lines above. */
.onv2-ds-subtotal {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border, var(--border));
}
.onv2-ds-subtotal .onv2-ds-l,
.onv2-ds-subtotal .onv2-ds-v {
  font-weight: 700;
  color: var(--color-text, var(--text));
}
/* Aux rows (delivery + delivery VAT) — muted; not part of the
   discount chain but not headline either. */
.onv2-ds-aux .onv2-ds-l,
.onv2-ds-aux .onv2-ds-v {
  color: var(--color-text-3, var(--text-3));
  font-weight: 500;
}
/* Grand Total — the anchor. Solid top border, larger label + value,
   accent colour on the value so it reads as the headline figure. */
.onv2-ds-grand {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 2px solid var(--color-text, var(--text));
}
.onv2-ds-grand .onv2-ds-l {
  font-size: var(--text-base, 14px);
  font-weight: 700;
  color: var(--color-text, var(--text));
}
.onv2-ds-grand .onv2-ds-v {
  font-size: var(--text-lg, 17px);
  font-weight: 800;
  color: var(--accent, #2563eb);
}
@media (max-width: 720px) {
  .onv2-doc-summary { max-width: 100%; margin-left: 0; }
}

/* ── VAT Analysis (per-rate breakdown) ───────────────────────────────
   Sits in the LEFT column of .onv2-pricing-summary-row alongside the
   ORDER DISCOUNT / COUPON pricing bar; the SUMMARY box occupies the
   right column of the same grid. Rendered by OQP.updateVatAnalysis.
   Layout mirrors the legacy AdminLTE table: small uppercase head,
   6-col table (Rate / Sub-total / Discount / Net / VAT / Gross),
   bold Total row.

   Empty container when there are zero items — no visual footprint.
*/
.onv2-vat-analysis {
  margin: 0;
}
.onv2-vat-analysis:empty { display: none; }
.onv2-va-head {
  font-size: var(--text-2xs, 11px);
  font-weight: var(--weight-bold, 700);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-3, var(--text-3));
  background: var(--color-surface-2, var(--surface-2));
  border: 1px solid var(--color-border, var(--border));
  border-bottom: none;
  padding: 6px 12px;
  border-radius: var(--r-md, 8px) var(--r-md, 8px) 0 0;
}
.onv2-va-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-xs, 12px);
  background: var(--color-surface, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-radius: 0 0 var(--r-md, 8px) var(--r-md, 8px);
  overflow: hidden;
  table-layout: auto;
}
/* Header alignment intentionally NOT set here — defaults to left, but
   the .onv2-va-num class (also applied to numeric <th>s in markup)
   wins via the per-column selector below to right-align them so each
   header sits directly above its value. */
.onv2-va-table thead th {
  background: var(--color-surface-2, var(--surface-2));
  font-size: var(--text-2xs, 11px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-3, var(--text-3));
  font-weight: 600;
  padding: 6px 10px;
  text-align: left;  /* Rate header defaults left (Chrome's <th> default
                        is center, which would mismatch the body cells) */
  border-bottom: 1px solid var(--color-border, var(--border));
}
.onv2-va-table tbody td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--color-border, var(--border));
  color: var(--color-text-2, var(--text-2));
}
.onv2-va-table tbody tr:last-child td { border-bottom: none; }
/* Vertical grid lines — right border on every cell, dropped on the
   last column so the outer table border doesn't double up. Matches the
   items-table grid pattern so the two tables read as a family. */
.onv2-va-table thead th,
.onv2-va-table tbody td {
  border-right: 1px solid var(--color-border, var(--border));
}
.onv2-va-table thead th:last-child,
.onv2-va-table tbody td:last-child {
  border-right: none;
}
/* Numeric column class — covers both <th> in head AND <td> in body so
   header text and body values both right-align identically. */
.onv2-va-table th.onv2-va-num,
.onv2-va-table td.onv2-va-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.onv2-va-total td {
  font-weight: var(--weight-bold, 700);
  color: var(--color-text, var(--text));
  background: var(--color-surface-2, var(--surface-2));
}

/* ════════════════════════════════════════════════════════════════════
   Order Detail redesign — mirrors New Order layout
   Adds: single-column body grid, pricing+summary row, docs strip,
   footer KPI bar, page-header layout with sub-meta inline.
   ════════════════════════════════════════════════════════════════════ */

/* Page header: title left, page actions right */
/* ── Polished compact header strip ─────────────────────────────────
   Goal: one tight 2-line block on the left (breadcrumb + title-with-
   badge-and-submeta), one right-aligned action cluster with thin
   dividers between functional groups, sticky so it stays visible as
   the user scrolls deeper into the page. */
.order-detail-v2 .onv2-page-header {
  display: flex;
  align-items: center;            /* vertically center title block + actions */
  justify-content: space-between;
  gap: var(--sp-3, 12px);
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md, 8px);
  margin-bottom: var(--sp-3, 12px);
  box-shadow: 0 1px 2px color-mix(in oklch, var(--text-1) 4%, transparent);
}
.order-detail-v2 .onv2-page-header-left {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;                       /* very tight stacking */
}
.order-detail-v2 .breadcrumbs {
  font-size: var(--text-xs, 12px);
  color: var(--text-3);
  margin-bottom: 0;
  line-height: 1.2;
}
.order-detail-v2 .breadcrumbs a { color: var(--text-3); text-decoration: none; }
.order-detail-v2 .breadcrumbs a:hover { color: var(--accent); }
.order-detail-v2 .page-title {
  font-size: var(--text-xl, 18px);    /* slightly smaller — 18px is plenty for tight pro look */
  font-weight: var(--weight-semi, 600);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
  white-space: nowrap;              /* never wrap title + badge */
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-detail-v2 .order-submeta-inline {
  font-size: var(--text-xs, 12px);
  color: var(--text-3);
  line-height: 1.2;
  margin-top: 1px !important;       /* override inline margin-top:4px */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-detail-v2 .order-submeta-inline .badge {
  padding: 1px 6px;
  font-size: var(--text-xs, 12px);
  vertical-align: baseline;
}
.order-detail-v2 .onv2-submeta-dot {
  margin: 0 4px;
  color: var(--text-3);
  opacity: 0.5;
}

/* ── Right cluster: 9 actions grouped by intent ──────────────────
   Order: star · Back · More │ Hold · Cancel │ Proforma · Invoice │
   Record Payment · Release for Pick & Pack
   The thin divider sits BEFORE positions 4, 6, 8 (group starts). */
.order-detail-v2 .onv2-page-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.order-detail-v2 .onv2-page-actions > :nth-child(4),
.order-detail-v2 .onv2-page-actions > :nth-child(6),
.order-detail-v2 .onv2-page-actions > :nth-child(8) {
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--color-border);
}
/* Tighter action buttons in the header — keep them sub-32px tall */
.order-detail-v2 .onv2-page-actions .btn,
.order-detail-v2 .onv2-page-actions details > summary.btn {
  height: 30px;
  min-height: 30px;
  padding: 0 10px;
  font-size: var(--text-xs, 12px);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.order-detail-v2 .onv2-page-actions .btn .ico,
.order-detail-v2 .onv2-page-actions .btn svg {
  width: 14px;
  height: 14px;
}
/* Star pin button has no text — square it */
.order-detail-v2 .onv2-page-actions > :first-child {
  width: 30px;
  padding: 0;
  justify-content: center;
}
/* Hint strip kept available but optional — collapses on narrow screens */
.order-detail-v2 .onv2-hint-strip {
  padding-right: 8px;
  border-right: 1px solid var(--color-border);
  margin-right: 4px;
}
.order-detail-v2 .onv2-hint-strip kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs, 12px);
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: 1px 4px;
  margin: 0 1px;
}
@media (max-width: 1280px) {
  .order-detail-v2 .onv2-hint-strip { display: none; }
}
/* On very narrow screens (<900px), break the header into stacked rows */
@media (max-width: 900px) {
  .order-detail-v2 .onv2-page-header {
    align-items: stretch;
  }
  .order-detail-v2 .onv2-page-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────────
   PHASE 1 — Quick-facts strip + Customer Actions Ribbon
   Lives right under the page header, above the picking widget /
   lifecycle stepper. The strip surfaces the 4 critical numbers the
   user needs immediately on landing: Invoice No · Order No · Credit
   Limit · Customer Balance. The ribbon below it is the 6-button
   customer-scoped action row from the legacy admin (Statement /
   Prepay / Orders / Credit Note / Allocate / Transfer).
   ────────────────────────────────────────────────────────────────── */
.order-detail-v2 .od-qfacts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3, 12px);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  overflow: hidden;
}
.order-detail-v2 .od-qf {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid var(--color-border);
}
.order-detail-v2 .od-qf:last-child { border-right: none; }
.order-detail-v2 .od-qf-l {
  font-size: var(--text-xs, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.order-detail-v2 .od-qf-l .ico { width: 12px; height: 12px; }
.order-detail-v2 .od-qf-v {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.order-detail-v2 a.od-qf-v:hover { text-decoration: underline; }
.order-detail-v2 .od-qf-v.od-qf-italic { color: var(--text-3); font-weight: 500; font-style: italic; font-size: 14px; }
.order-detail-v2 .od-qf-v.od-qf-accent  { color: var(--accent); }
.order-detail-v2 .od-qf-v.od-qf-success { color: var(--success, oklch(60% 0.16 145)); }
.order-detail-v2 .od-qf-v.od-qf-danger  { color: var(--danger,  oklch(60% 0.18 25)); }
.order-detail-v2 .od-qf-meta {
  font-size: var(--text-xs, 12px);
  color: var(--text-3);
}
.order-detail-v2 .od-qf-meta a { color: var(--accent); font-weight: 500; }
@media (max-width: 900px) {
  .order-detail-v2 .od-qfacts { grid-template-columns: repeat(2, 1fr); }
}

/* Customer Actions Ribbon — 6 horizontal action buttons. */
.order-detail-v2 .od-ribbon {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: var(--sp-3, 12px);
}
.order-detail-v2 .od-ribbon-btn {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  cursor: pointer;
  transition: all .12s;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
}
.order-detail-v2 .od-ribbon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklch, var(--accent) 6%, transparent);
  text-decoration: none;
}
.order-detail-v2 .od-ribbon-btn .ico { color: var(--text-3); }
.order-detail-v2 .od-ribbon-btn:hover .ico { color: var(--accent); }
.order-detail-v2 .od-ribbon-warning {
  color: var(--warning, oklch(70% 0.14 70));
  border-color: color-mix(in oklch, var(--warning, oklch(70% 0.14 70)) 30%, var(--color-border));
  background: color-mix(in oklch, var(--warning, oklch(70% 0.14 70)) 8%, var(--surface));
}
.order-detail-v2 .od-ribbon-warning .ico { color: var(--warning, oklch(70% 0.14 70)); }
.order-detail-v2 .od-ribbon-warning:hover {
  background: var(--warning, oklch(70% 0.14 70));
  color: white;
  border-color: var(--warning, oklch(70% 0.14 70));
}
.order-detail-v2 .od-ribbon-warning:hover .ico { color: white; }
@media (max-width: 1100px) {
  .order-detail-v2 .od-ribbon { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .order-detail-v2 .od-ribbon { grid-template-columns: repeat(2, 1fr); }
}

/* ──────────────────────────────────────────────────────────────────
   PHASE 2 — Status Cockpit row (4 cards: Payment / Fulfilment /
   Documents / Signature & T&C). Sits between the header strip and
   the items table. Each card is self-contained — clear title +
   key facts + bottom-actions — so a glance answers "where is this
   order?" for whichever role is looking.
   ────────────────────────────────────────────────────────────────── */
.order-detail-v2 .od-cockpit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-3, 12px);
}
.order-detail-v2 .od-ckpt {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.order-detail-v2 .od-ckpt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.order-detail-v2 .od-ckpt-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-3);
  letter-spacing: .05em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.order-detail-v2 .od-ckpt-title .ico { color: var(--accent); width: 14px; height: 14px; }
.order-detail-v2 .od-ckpt-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  font-size: 13px;
  align-items: baseline;
  margin: 0;
}
.order-detail-v2 .od-ckpt-grid dt { color: var(--text-3); font-weight: 500; }
.order-detail-v2 .od-ckpt-grid dd {
  color: var(--text);
  font-weight: 600;
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.order-detail-v2 .od-ckpt-grid dd .muted { color: var(--text-3); font-weight: 500; }
.order-detail-v2 .od-ckpt-grid dd a { color: var(--accent); }
.order-detail-v2 .od-ckpt-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}
.order-detail-v2 .od-ckpt-actions .btn { width: 100%; justify-content: center; }

/* Fulfilment ladder — 5 stages with dots that fill as the order
   progresses. Mirrors the top lifecycle stepper but with timestamps. */
.order-detail-v2 .od-ladder { display: flex; flex-direction: column; gap: 1px; }
.order-detail-v2 .od-lad-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
}
.order-detail-v2 .od-lad-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-border, var(--border));
  flex-shrink: 0;
}
.order-detail-v2 .od-lad-step.done .od-lad-dot { background: var(--success, oklch(60% 0.16 145)); }
.order-detail-v2 .od-lad-step.active .od-lad-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}
.order-detail-v2 .od-lad-label { color: var(--text-2); flex: 1; }
.order-detail-v2 .od-lad-step.done .od-lad-label,
.order-detail-v2 .od-lad-step.active .od-lad-label { color: var(--text); font-weight: 600; }
.order-detail-v2 .od-lad-time {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Documents card — list of doc rows with proper button per row. */
.order-detail-v2 .od-doc-list { display: flex; flex-direction: column; gap: 6px; }
.order-detail-v2 .od-doc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font-size: 13px;
}
.order-detail-v2 .od-doc-icon {
  width: 26px; height: 26px;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  flex-shrink: 0;
}
.order-detail-v2 .od-doc-icon .ico { width: 14px; height: 14px; }
.order-detail-v2 .od-doc-name {
  flex: 1;
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-detail-v2 .od-doc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-size: var(--text-xs, 12px);
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: all .12s;
}
.order-detail-v2 .od-doc-btn .ico { width: 13px; height: 13px; }
.order-detail-v2 .od-doc-btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.order-detail-v2 .od-doc-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: white; text-decoration: none; }
.order-detail-v2 .od-doc-btn-secondary {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--accent);
}
.order-detail-v2 .od-doc-btn-secondary:hover {
  background: color-mix(in oklch, var(--accent) 6%, transparent);
  text-decoration: none;
}
.order-detail-v2 .od-doc-btn-disabled {
  background: var(--surface);
  color: var(--text-3);
  border-color: var(--color-border);
  cursor: not-allowed;
}

/* Signature & T&C card */
.order-detail-v2 .od-sig-canvas {
  background: var(--surface-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--r-sm);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-detail-v2 .od-sig-consent {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--success, oklch(60% 0.16 145));
  font-weight: 600;
}
.order-detail-v2 .od-sig-meta {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.45;
}

@media (max-width: 1400px) {
  .order-detail-v2 .od-cockpit { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .order-detail-v2 .od-cockpit { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────
   PHASE 3 — 4-cell HERO row replacing the legacy 5-card chip strip.
   Each cell is a multi-section block (identity → chips → contact →
   account / billing → delivery → ETA / order meta → history /
   total → credit → AR). Dashed dividers separate sub-sections inside
   one cell, solid borders separate cells.
   ────────────────────────────────────────────────────────────────── */
.order-detail-v2 .od-hero {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  margin-bottom: var(--sp-3, 12px);
  overflow: hidden;
}
.order-detail-v2 .od-hero-cell {
  padding: 14px 16px;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.order-detail-v2 .od-hero-cell:last-child { border-right: none; }
.order-detail-v2 .od-hero-label {
  font-size: var(--text-xs, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: space-between;
}
.order-detail-v2 .od-hero-edit {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  opacity: .8;
}
.order-detail-v2 .od-hero-edit:hover { opacity: 1; text-decoration: underline; }
.order-detail-v2 .od-uc {
  font-family: "Segoe UI Symbol", "Apple Symbols", system-ui;
  font-weight: 400;
}

.order-detail-v2 .od-cust-row { display: flex; gap: 12px; align-items: center; }
.order-detail-v2 .od-cust-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #2563eb);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.order-detail-v2 .od-cust-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.order-detail-v2 .od-cust-code {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 2px;
}
.order-detail-v2 .od-cust-code .od-mono {
  font-family: ui-monospace, monospace;
  color: var(--text-2);
  font-weight: 600;
}
.order-detail-v2 .od-cust-divider {
  border: none;
  border-top: 1px dashed var(--color-border);
  margin: 10px 0 8px;
}

/* Section sub-header inside a hero cell */
.order-detail-v2 .od-subhead {
  font-size: var(--text-xs, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  margin: 0 0 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.order-detail-v2 .od-subhead .ico {
  width: 12px;
  height: 12px;
  color: var(--text-3);
}
.order-detail-v2 .od-flag-differs {
  margin-left: auto;
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: var(--text-xs, 12px);
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
}

/* Chip row inside hero */
.order-detail-v2 .od-chip-row { display: flex; gap: 4px; flex-wrap: wrap; }
.order-detail-v2 .od-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-2);
  color: var(--text-2);
  border: 1px solid var(--color-border);
}
.order-detail-v2 .od-chip .ico { width: 11px; height: 11px; }
.order-detail-v2 .od-chip-accent {
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  color: var(--accent);
  border-color: transparent;
}
.order-detail-v2 .od-chip-editable {
  cursor: pointer;
  border-style: dashed;
}
.order-detail-v2 .od-chip-editable:hover {
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
}

/* Contact block — icon column + value column */
.order-detail-v2 .od-contact-block {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 6px 8px;
  font-size: 13px;
  align-items: baseline;
}
.order-detail-v2 .od-ci {
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.order-detail-v2 .od-ci .ico { width: 14px; height: 14px; }
.order-detail-v2 .od-cv {
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}
.order-detail-v2 .od-cv a { color: var(--text); }
.order-detail-v2 .od-cv a:hover { color: var(--accent); }
.order-detail-v2 .od-cv .od-meta {
  color: var(--text-3);
  font-weight: 400;
  font-size: 12px;
}

/* Labeled-row data list — used in every hero cell */
.order-detail-v2 .od-dlist {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 4px 12px;
  font-size: 13px;
  align-items: baseline;
  margin: 0;
}
.order-detail-v2 .od-dlist dt {
  color: var(--text-3);
  font-weight: 500;
  margin: 0;
}
.order-detail-v2 .od-dlist dd {
  color: var(--text);
  font-weight: 600;
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.order-detail-v2 .od-dlist dd.od-mono { font-family: ui-monospace, monospace; }
.order-detail-v2 .od-dlist dd.od-accent  { color: var(--accent); }
.order-detail-v2 .od-dlist dd.od-success { color: var(--success, oklch(60% 0.16 145)); }
.order-detail-v2 .od-dlist dd.od-danger  { color: var(--danger,  oklch(60% 0.18 25)); }
.order-detail-v2 .od-dlist dd.muted { color: var(--text-3); font-weight: 500; }
.order-detail-v2 .od-dlist dd .muted { color: var(--text-3); font-weight: 400; }
.order-detail-v2 .od-dlist dd a { color: var(--accent); }

/* ETA pill */
.order-detail-v2 .od-eta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  padding: 3px 8px;
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  border-radius: var(--r-sm);
}
.order-detail-v2 .od-eta-pill .ico { width: 12px; height: 12px; }
.order-detail-v2 .od-eta-edit { color: var(--text-3); cursor: pointer; margin-left: 4px; }
.order-detail-v2 .od-eta-edit:hover { color: var(--accent); }

/* Credit & Money cell — large total + credit bar + AR */
.order-detail-v2 .od-money-value {
  font-size: var(--text-2xl, 20px);
  font-weight: 800;
  color: var(--accent);
  margin-top: 2px;
}
.order-detail-v2 .od-money-sub {
  font-size: 13px;
  color: var(--text-2);
}
.order-detail-v2 .od-credit-bar {
  background: var(--surface-2);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
  margin-top: 4px;
}
.order-detail-v2 .od-credit-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success, oklch(60% 0.16 145)), var(--warning, oklch(70% 0.14 70)));
}
.order-detail-v2 .od-credit-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-2);
  margin-top: 4px;
}
.order-detail-v2 .od-credit-row strong { color: var(--text); font-weight: 600; }

@media (max-width: 1400px) {
  .order-detail-v2 .od-hero { grid-template-columns: repeat(2, 1fr); }
  .order-detail-v2 .od-hero-cell:nth-child(2) { border-right: none; }
  .order-detail-v2 .od-hero-cell:nth-child(1), .order-detail-v2 .od-hero-cell:nth-child(2) {
    border-bottom: 1px solid var(--color-border);
  }
}
@media (max-width: 720px) {
  .order-detail-v2 .od-hero { grid-template-columns: 1fr; }
  .order-detail-v2 .od-hero-cell {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .order-detail-v2 .od-hero-cell:last-child { border-bottom: none; }
}

/* ──────────────────────────────────────────────────────────────────
   PHASE 4 — Shipping & Handling + Delivery Note Info forms
   Two editable cards side-by-side that sit between the items section
   and the comments timeline. Both forms POST to existing/new PATCH
   endpoints; on success the page re-renders so hero + cockpit reflect
   the new values immediately.
   ────────────────────────────────────────────────────────────────── */
.order-detail-v2 .od-forms-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-3, 12px);
}
.order-detail-v2 .od-form-card {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  padding: 14px 18px;
}
.order-detail-v2 .od-form-head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: .05em;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.order-detail-v2 .od-form-head .ico { color: var(--accent); width: 14px; height: 14px; }
.order-detail-v2 .od-form-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px 12px;
  align-items: center;
}
.order-detail-v2 .od-form-lbl {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
}
.order-detail-v2 .od-form-val {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.order-detail-v2 .od-form-input {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font: inherit;
  background: var(--surface);
  width: 100%;
}
.order-detail-v2 .od-form-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
  border-color: var(--accent);
}
@media (max-width: 1100px) {
  .order-detail-v2 .od-forms-row { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────
   Phase 5 — Comment streams split into customer-facing (Order) and
   internal (Warehouse) cards. Sit side by side above the unified
   Timeline. Each card has a header strip with an icon + count pill +
   description, a scroll list of past comments, and a compose box
   pinned to the bottom.
   ────────────────────────────────────────────────────────────────── */
.order-detail-v2 .od-comments-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-3, 12px);
}
.order-detail-v2 .od-comments-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  overflow: hidden;
}
.order-detail-v2 .od-comments-order {
  border-top: 3px solid var(--accent, #0ea5e9);
}
.order-detail-v2 .od-comments-warehouse {
  border-top: 3px solid #f59e0b;
}
.order-detail-v2 .od-comments-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(15,23,42,.02), transparent);
}
.order-detail-v2 .od-comments-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: rgba(14,165,233,.08);
  color: var(--accent, #0ea5e9);
}
.order-detail-v2 .od-comments-warehouse .od-comments-icon {
  background: rgba(245,158,11,.10);
  color: #b45309;
}
.order-detail-v2 .od-comments-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 0;
  color: var(--text);
}
.order-detail-v2 .od-comments-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(14,165,233,.12);
  color: var(--accent, #0ea5e9);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.order-detail-v2 .od-comments-pill-amber {
  background: rgba(245,158,11,.15);
  color: #b45309;
}
.order-detail-v2 .od-comments-sub {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-3, #64748b);
  font-weight: 500;
}
.order-detail-v2 .od-comments-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  max-height: 260px;
  overflow-y: auto;
}
.order-detail-v2 .od-comments-empty {
  font-size: 13px;
  color: var(--text-3, #64748b);
  font-style: italic;
  padding: 12px 0;
  border: 1px dashed var(--color-border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  text-align: center;
  line-height: 1.5;
}
.order-detail-v2 .od-cmt {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  align-items: start;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(15,23,42,.02);
  transition: background .12s;
}
.order-detail-v2 .od-cmt:hover {
  background: rgba(15,23,42,.04);
}
.order-detail-v2 .od-cmt-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--accent, #0ea5e9);
}
.order-detail-v2 .od-cmt-avatar-order {
  background: var(--accent, #0ea5e9);
}
.order-detail-v2 .od-cmt-avatar-warehouse {
  background: #f59e0b;
}
.order-detail-v2 .od-cmt-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.order-detail-v2 .od-cmt-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.order-detail-v2 .od-cmt-time {
  font-size: 12px;
  color: var(--text-3, #64748b);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.order-detail-v2 .od-cmt-text {
  font-size: 13px;
  color: var(--text-2, #334155);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.order-detail-v2 .od-cmt-del {
  background: transparent;
  border: none;
  padding: 4px;
  border-radius: var(--r-sm);
  color: var(--text-3, #64748b);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
}
.order-detail-v2 .od-cmt:hover .od-cmt-del {
  opacity: 1;
}
.order-detail-v2 .od-cmt-del:hover {
  color: #dc2626;
  background: rgba(220,38,38,.08);
}
.order-detail-v2 .od-comments-compose {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--color-border);
  background: rgba(15,23,42,.015);
}
.order-detail-v2 .od-comments-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 13px;
  background: var(--surface);
  resize: vertical;
  min-height: 50px;
}
.order-detail-v2 .od-comments-textarea:focus {
  outline: 2px solid var(--accent, #0ea5e9);
  outline-offset: -1px;
  border-color: var(--accent, #0ea5e9);
}
.order-detail-v2 .od-comments-warehouse .od-comments-textarea:focus {
  outline-color: #f59e0b;
  border-color: #f59e0b;
}
.order-detail-v2 .od-comments-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.order-detail-v2 .od-comments-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-3, #64748b);
}
.order-detail-v2 .od-comments-hint .ico { width: 14px; height: 14px; }

/* Timeline audience badge — coloured dot next to author name */
.order-detail-v2 .tl-aud {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.order-detail-v2 .tl-aud-order {
  background: rgba(14,165,233,.10);
  color: var(--accent, #0284c7);
}
.order-detail-v2 .tl-aud-warehouse {
  background: rgba(245,158,11,.12);
  color: #b45309;
}
.order-detail-v2 .tl-aud .ico { width: 11px; height: 11px; }
.order-detail-v2 .tl-avatar-warehouse { background: #f59e0b; color: #fff; }
.order-detail-v2 .tl-bubble-warehouse {
  border-left: 3px solid #f59e0b;
}

@media (max-width: 1100px) {
  .order-detail-v2 .od-comments-row { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────────
   Phase 6 — Tabs panel at the bottom of the Order Detail page.
   Six tabs (Customer Profile / Fulfilment / Payments / Activity /
   Files / Linked documents) each lazy-load their content on first
   click and cache the result so re-clicking is instant.
   ────────────────────────────────────────────────────────────────── */
.order-detail-v2 .od-tabs-section {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  overflow: hidden;
  margin-bottom: var(--sp-3, 12px);
}
.order-detail-v2 .od-tabs-bar {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, rgba(15,23,42,.02), transparent);
  overflow-x: auto;
  scrollbar-width: thin;
}
.order-detail-v2 .od-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2, #475569);
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.order-detail-v2 .od-tab .ico { width: 15px; height: 15px; }
.order-detail-v2 .od-tab:hover {
  color: var(--text);
  background: rgba(15,23,42,.03);
}
.order-detail-v2 .od-tab-active {
  color: var(--accent, #0ea5e9);
  border-bottom-color: var(--accent, #0ea5e9);
  background: var(--surface);
}
.order-detail-v2 .od-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.order-detail-v2 .od-tab-active .od-tab-badge {
  background: rgba(14,165,233,.15);
  color: var(--accent, #0284c7);
}
.order-detail-v2 .od-tab-body {
  padding: 16px;
  min-height: 200px;
}
.order-detail-v2 .od-tab-loading,
.order-detail-v2 .od-tab-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  color: var(--text-3, #64748b);
  font-style: italic;
  font-size: 14px;
  text-align: center;
}
.order-detail-v2 .od-tab-loading .ico {
  animation: od-tab-spin 1.2s linear infinite;
}
@keyframes od-tab-spin { to { transform: rotate(360deg); } }

.order-detail-v2 .od-tab-grid {
  display: grid;
  gap: 12px;
}
.order-detail-v2 .od-tab-grid-2 {
  grid-template-columns: 1fr 1fr;
}
.order-detail-v2 .od-tab-card {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}
.order-detail-v2 .od-tab-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--accent, #0284c7);
  margin-bottom: 12px;
}
.order-detail-v2 .od-tab-card-head .ico { width: 14px; height: 14px; }
.order-detail-v2 .od-tab-meta {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3, #64748b);
}
.order-detail-v2 .od-tab-muted {
  color: var(--text-3, #64748b);
  font-style: italic;
  font-size: 13px;
}

/* Description-list inside profile cards */
.order-detail-v2 .od-tab-dlist {
  display: grid;
  grid-template-columns: minmax(110px, max-content) 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 13px;
}
.order-detail-v2 .od-tab-dlist dt {
  color: var(--text-3, #64748b);
  font-weight: 500;
}
.order-detail-v2 .od-tab-dlist dd {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

/* AKA / previous names row */
.order-detail-v2 .od-aka-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.order-detail-v2 .od-aka-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(245,158,11,.10);
  color: #92400e;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid rgba(245,158,11,.25);
}
.order-detail-v2 .od-aka-pill .ico { color: #b45309; }

/* Fulfilment — pick status strip */
.order-detail-v2 .od-pick-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.order-detail-v2 .od-pick-cell {
  padding: 12px 14px;
  border-right: 1px solid var(--color-border);
}
.order-detail-v2 .od-pick-cell:last-child { border-right: none; }
.order-detail-v2 .od-pick-l {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3, #64748b);
  margin-bottom: 4px;
}
.order-detail-v2 .od-pick-v {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

/* Payments — KPI strip */
.order-detail-v2 .od-pay-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.order-detail-v2 .od-pay-kpi {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  border-left: 3px solid var(--accent, #0ea5e9);
}
.order-detail-v2 .od-pay-kpi-good {
  border-left-color: #10b981;
}
.order-detail-v2 .od-pay-kpi-warn {
  border-left-color: #ef4444;
}
.order-detail-v2 .od-pay-l {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3, #64748b);
  margin-bottom: 4px;
}
.order-detail-v2 .od-pay-v {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Files — upload form */
.order-detail-v2 .od-file-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.order-detail-v2 .od-file-input {
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font-size: 13px;
  background: var(--surface);
  flex: 1;
  min-width: 200px;
}
.order-detail-v2 .od-file-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-3, #64748b);
}
.order-detail-v2 .od-file-hint .mono {
  background: rgba(15,23,42,.05);
  padding: 1px 6px;
  border-radius: 3px;
}

/* Linked documents — count chips */
.order-detail-v2 .od-link-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.order-detail-v2 .od-link-count-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(15,23,42,.04);
  color: var(--text-2, #334155);
  font-size: 12px;
  border: 1px solid var(--color-border);
}
.order-detail-v2 .od-link-count-chip strong {
  color: var(--accent, #0284c7);
  font-variant-numeric: tabular-nums;
}
.order-detail-v2 .od-link-kind {
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 900px) {
  .order-detail-v2 .od-tab-grid-2 { grid-template-columns: 1fr; }
  .order-detail-v2 .od-pay-kpis   { grid-template-columns: repeat(2, 1fr); }
  .order-detail-v2 .od-pick-strip { grid-template-columns: repeat(2, 1fr); }
  .order-detail-v2 .od-pick-cell:nth-child(2) { border-right: none; }
}
@media (max-width: 560px) {
  .order-detail-v2 .od-pay-kpis   { grid-template-columns: 1fr; }
  .order-detail-v2 .od-pick-strip { grid-template-columns: 1fr; }
  .order-detail-v2 .od-pick-cell  { border-right: none; border-bottom: 1px solid var(--color-border); }
  .order-detail-v2 .od-pick-cell:last-child { border-bottom: none; }
  .order-detail-v2 .od-tab { padding: 10px 12px; }
  .order-detail-v2 .od-tab span:not(.od-tab-badge) { display: none; } /* icons only on tiny screens */
}

/* Single-column body grid (no right aside anymore — chip strip replaced it) */
.order-detail-v2 .order-grid-v2 {
  display: block;
}
.order-detail-v2 .order-grid-v2 > .order-main {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3, 12px);
}

/* Pricing bar + Summary card side by side under the items table */
/* 2-col layout — LEFT: pricing bar + VAT analysis (stacked).
   RIGHT: SUMMARY card. Used on both /orders/new and /orders/:id (and
   any other doc-builder/detail page that adopts the same structure).
   Was originally scoped to .order-detail-v2; unscoped here so the New
   Order builder gets the same side-by-side treatment. */
.onv2-pricing-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-3, 12px);
  align-items: start;
  margin-top: var(--sp-3, 12px);
}
.onv2-pricing-summary-row .onv2-doc-summary {
  margin: 0;
  max-width: none;
  min-width: 0;
}
/* The left column itself stacks the pricing bar above the VAT analysis. */
.onv2-pricing-stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2, 8px);
  min-width: 0;
}
/* Pricing-bar normally carries margin-top:12px so it floats away from
   whatever sits above it. Inside the stack that margin pushes it BELOW
   the SUMMARY card's top edge (which sits flush at the row's top),
   creating a visible misalignment. Reset to 0 so both columns start
   at the same y. */
.onv2-pricing-stack > .onv2-pricing-bar {
  margin-top: 0;
}
@media (max-width: 900px) {
  .onv2-pricing-summary-row {
    grid-template-columns: 1fr;
  }
}

/* The pricing bar on Order Detail is read-only (shows discount/coupon
   as captured on the order). Edit goes via the Edit button → modal. */
.order-detail-v2 .onv2-pricing-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  flex-wrap: wrap;
  padding: 10px 14px;
  background: color-mix(in oklch, var(--accent) 4%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 20%, var(--color-border));
  border-radius: var(--r-md, 8px);
  font-size: var(--text-sm, 13px);
}
.order-detail-v2 .onv2-pricing-label {
  font-size: var(--text-xs, 12px);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.order-detail-v2 .onv2-pricing-disc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-weight: var(--weight-semi, 600);
}
.order-detail-v2 .onv2-pricing-sep {
  width: 1px;
  height: 22px;
  background: var(--color-border);
  opacity: 0.5;
  margin: 0 6px;
}
.order-detail-v2 .onv2-pricing-coupon-display {
  font-size: var(--text-sm, 13px);
}

/* Documents strip — horizontal pills below the body */
.order-detail-v2 .order-docs-strip {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  flex-wrap: wrap;
  padding: var(--sp-3, 12px) var(--sp-4, 16px);
  background: var(--surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md, 8px);
  margin: var(--sp-4, 16px) 0 var(--sp-3, 12px);
}
.order-detail-v2 .order-docs-strip-label {
  font-size: var(--text-xs, 12px);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.order-detail-v2 .order-doc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md, 8px);
  font-size: var(--text-sm, 13px);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.order-detail-v2 .order-doc-pill:hover {
  background: var(--accent-soft, color-mix(in oklch, var(--accent) 10%, transparent));
  border-color: var(--accent);
  color: var(--accent);
}

/* Footer KPI bar — fixed at the bottom of the body content (matches New Order) */
/* ── Polished footer KPI + action strip ──────────────────────────
   Goal: one tight row — left KPIs · accent TOTAL pill · right action
   cluster (grouped by intent with thin dividers), matching the header
   strip aesthetic. */
.order-detail-v2 .onv2-page-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;                  /* graceful wrap to row 2 if needed */
  row-gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-top: 2px solid color-mix(in oklch, var(--accent) 40%, var(--color-border));
  border-radius: var(--r-md, 8px) var(--r-md, 8px) 0 0;   /* square the bottom — it sits flush on the viewport edge */
  margin-top: var(--sp-3, 12px);
  font-size: var(--text-sm, 13px);
  position: sticky;
  bottom: 0;                          /* flush to the viewport bottom (no float gap) */
  z-index: 10;
  box-shadow: 0 -2px 12px color-mix(in oklch, var(--text-1) 8%, transparent);
}
/* The order-detail page reuses .order-new-v2, which reserves 76px of bottom
   padding "for the sticky totalbar". But the order-detail footer is sticky
   INSIDE this same wrapper, so that trailing padding becomes the footer's
   travel limit — near full scroll it lands ~76px above the viewport bottom,
   leaving a transparent gap below it. The footer is in normal flow + the last
   child, so it needs no reserved room here; trim the padding to a small inset
   that matches the footer's own `bottom`. Scoped to .order-detail-v2 so the
   New Order page's totalbar spacing is untouched. */
.order-new-v2.order-detail-v2 { padding-bottom: 0; margin-bottom: calc(var(--sp-4, 16px) * -1); }
.order-detail-v2 .onv2-foot-stats {
  display: flex;
  align-items: center;
  gap: 0;                            /* dividers handle spacing */
  flex-wrap: nowrap;
  min-width: 0;
  flex-shrink: 1;                    /* allow stats to compress before actions do */
}
.order-detail-v2 .onv2-foot-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 10px;
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
  flex-shrink: 0;                    /* never compress an individual stat */
}
.order-detail-v2 .onv2-foot-stat:first-child { padding-left: 0; }
.order-detail-v2 .onv2-foot-stat:nth-last-child(2) { border-right: none; }
.order-detail-v2 .onv2-foot-label {
  font-size: var(--text-xs, 12px);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.order-detail-v2 .onv2-foot-stat strong {
  font-size: var(--text-sm, 13px);
  font-weight: 700;
  color: var(--text-1, var(--text));
  font-variant-numeric: tabular-nums;
}
/* TOTAL — emphasised pill with accent background */
.order-detail-v2 .onv2-foot-stat:last-child {
  border-right: none;
  padding: 4px 12px 4px 14px;
  margin-left: 4px;
  background: color-mix(in oklch, var(--accent) 10%, transparent);
  border-radius: var(--r-md, 8px);
  border-left: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
}
.order-detail-v2 .onv2-foot-stat:last-child .onv2-foot-label {
  color: var(--accent);
}
.order-detail-v2 .onv2-foot-total {
  color: var(--accent);
  font-size: var(--text-lg, 16px) !important;
  font-weight: 800 !important;
}

/* Right action cluster — grouped by intent with thin dividers.
   Order: Save · Hold │ View Proforma · View Invoice │ Record Payment · Release for Pick & Pack
   Divider sits BEFORE positions 3 (View Proforma) and 5 (Record Payment). */
.order-detail-v2 .onv2-foot-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
.order-detail-v2 .onv2-foot-actions > :nth-child(3),
.order-detail-v2 .onv2-foot-actions > :nth-child(5) {
  margin-left: 8px;
  padding-left: 12px;
  border-left: 1px solid var(--color-border);
}
/* Tight 30px action buttons matching header strip */
.order-detail-v2 .onv2-foot-actions .btn {
  height: 30px;
  min-height: 30px;
  padding: 0 10px;
  font-size: var(--text-xs, 12px);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.order-detail-v2 .onv2-foot-actions .btn .ico,
.order-detail-v2 .onv2-foot-actions .btn svg {
  width: 14px;
  height: 14px;
}

/* Responsive — wrap to 2 rows only when truly necessary */
@media (max-width: 1100px) {
  .order-detail-v2 .onv2-page-foot {
    flex-wrap: wrap;
  }
  .order-detail-v2 .onv2-foot-actions {
    width: 100%;
    justify-content: flex-end;
  }
}
@media (max-width: 720px) {
  .order-detail-v2 .onv2-foot-stats {
    flex-wrap: wrap;
    overflow: visible;
  }
  .order-detail-v2 .onv2-foot-stat {
    padding: 4px 8px;
    border-right: none;
  }
}

/* Wider header chip cards on Order Detail (5 cards same as New Order) */
.order-detail-v2 .onv2-header-strip {
  margin-bottom: var(--sp-4, 16px);
}

/* ── Promote ghost buttons in header + footer strips to proper buttons
   Without this, .btn-ghost is fully transparent (no border, no bg),
   which makes Save / Hold / View Proforma / View Invoice / Back / More
   read as plain text links rather than tappable buttons. Give them the
   secondary-button look (subtle surface + 1px border) so the page
   actions feel substantive while keeping .btn-primary and the danger
   buttons (Cancel) visually distinct.
   Scoped narrowly to the page-action + foot-action containers so this
   doesn't change ghost buttons elsewhere on the page (e.g. inside
   popovers or the items table). */
.order-detail-v2 .onv2-page-actions .btn-ghost,
.order-detail-v2 .onv2-foot-actions .btn-ghost {
  background: var(--surface);
  color: var(--text-1, var(--text));
  border: 1px solid var(--color-border);
  font-weight: 500;
}
.order-detail-v2 .onv2-page-actions .btn-ghost:hover,
.order-detail-v2 .onv2-foot-actions .btn-ghost:hover {
  background: var(--surface-hover, color-mix(in oklch, var(--accent) 6%, var(--surface)));
  border-color: color-mix(in oklch, var(--accent) 30%, var(--color-border));
  color: var(--accent);
}
/* Active/focus — subtle accent ring */
.order-detail-v2 .onv2-page-actions .btn-ghost:focus-visible,
.order-detail-v2 .onv2-foot-actions .btn-ghost:focus-visible {
  outline: 2px solid color-mix(in oklch, var(--accent) 40%, transparent);
  outline-offset: 1px;
}

/* Keep .btn-link-inline (the "Clear" link in bulk bars) looking like a
   text link — that one IS supposed to be subtle. */
.order-detail-v2 .onv2-page-actions .btn-link-inline,
.order-detail-v2 .onv2-foot-actions .btn-link-inline {
  background: transparent;
  border: none;
}

/* Destructive buttons (Cancel) keep their solid look with red border */
.order-detail-v2 .onv2-page-actions .btn-ghost[style*="color-error"],
.order-detail-v2 .onv2-page-actions .btn-ghost[style*="--color-error"] {
  border-color: color-mix(in oklch, oklch(60% 0.20 25) 30%, var(--color-border));
}

/* ────────────────────────────────────────────────────────────────────
   Font-size normalization on Order Detail
   The page accumulated 10 distinct font sizes (9-22px) across its many
   sub-sections, including some at 9-11px that were uncomfortably small.
   This sweep aligns every remaining off-scale class to the token scale:
   --text-xs (12px) for labels/chips/badges, --text-sm (13px) for body.
   ──────────────────────────────────────────────────────────────────── */
.order-detail-v2 .od-lad-time,
.order-detail-v2 .od-ckpt-title,
.order-detail-v2 .od-meta,
.order-detail-v2 .od-form-head,
.order-detail-v2 .od-hero-edit,
.order-detail-v2 .od-uc,
.order-detail-v2 .od-chip,
.order-detail-v2 .onv2-va-num,
.order-detail-v2 h4,
.order-detail-v2 .oi-pct,
.order-detail-v2 kbd {
  font-size: var(--text-xs, 12px);
}

/* ──────────────────────────────────────────────────────────────────
   PREVIEW PARITY — Visual-design fixes added to make /orders/:id
   match preview-order-detail-redesign.html exactly. New classes:
     wf-label-wrap / wf-meta             — lifecycle step meta sub-line
     od-cust-fka / od-cust-fka-pill      — Customer AKA pill
     od-tag-pill                         — Account-section tag pills
     od-aged-grid / od-aged-cell         — Aged-debt 4-cell mini-bar
     od-ckpt-add                         — "+ Add" link in card header
     onv2-item-search-bar + inputs       — top items search/AI/Browse
     onv2-item-add-row + plus            — bottom inline-add row
     onv2-pricing-email                  — "Email PDF" checkbox label
     od-tab-counter                      — counter chip on tab labels
     od-comments-aud-pill                — Sales/Warehouse pill in title
     onv2-foot-stat-big                  — bigger Total cell in footer
   ────────────────────────────────────────────────────────────────── */

/* Lifecycle stepper — sub-line under each step label */
.order-detail-v2 .order-workflow .wf-step { align-items: flex-start; }
.order-detail-v2 .order-workflow .wf-label-wrap {
  display: flex; flex-direction: column;
  min-width: 0;
  font-size: 13px;
}
.order-detail-v2 .order-workflow .wf-label {
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.order-detail-v2 .order-workflow .wf-meta {
  font-size: var(--text-xs, 12px);
  color: var(--text-3, #64748b);
  margin-top: 3px;
  line-height: 1.3;
}
.order-detail-v2 .order-workflow .wf-done .wf-meta { color: var(--color-success, #16a34a); font-weight: 500; }
.order-detail-v2 .order-workflow .wf-current .wf-meta { color: var(--accent, #0284c7); font-weight: 500; }

/* Customer AKA pill on the hero Customer cell */
.order-detail-v2 .od-cust-fka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-2, #475569);
  flex-wrap: wrap;
}
.order-detail-v2 .od-cust-fka-pill {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(245,158,11,.15);
  color: #b45309;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.order-detail-v2 .od-cust-fka em {
  font-style: italic;
  color: var(--text-2, #475569);
  font-weight: 500;
}

/* Account section tag pills (Hospitality / Repeat / etc.) */
.order-detail-v2 .od-tag-pill {
  display: inline-block;
  padding: 1px 8px;
  background: rgba(15,23,42,.06);
  color: var(--text-2, #334155);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-right: 4px;
}

/* Credit & Money: aged-debt mini buckets at the bottom */
.order-detail-v2 .od-aged-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 10px;
}
.order-detail-v2 .od-aged-cell {
  padding: 6px 8px;
  background: rgba(15,23,42,.03);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  text-align: center;
}
.order-detail-v2 .od-aged-cell.od-aged-warn {
  background: rgba(245,158,11,.10);
  border-color: rgba(245,158,11,.30);
}
.order-detail-v2 .od-aged-cell.od-aged-danger {
  background: rgba(220,38,38,.10);
  border-color: rgba(220,38,38,.30);
}
.order-detail-v2 .od-aged-label {
  font-size: var(--text-xs, 12px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3, #64748b);
}
.order-detail-v2 .od-aged-val {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin-top: 1px;
}
.order-detail-v2 .od-aged-cell.od-aged-warn .od-aged-val   { color: #b45309; }
.order-detail-v2 .od-aged-cell.od-aged-danger .od-aged-val { color: #b91c1c; }

/* Documents card — "+ Add" link in the cockpit header */
.order-detail-v2 .od-ckpt-add {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--accent, #0284c7);
  text-decoration: none;
  font-weight: 600;
}
.order-detail-v2 .od-ckpt-add:hover { text-decoration: underline; }

/* Items section — top search bar (mirrors /orders/new) */
.order-detail-v2 .onv2-item-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(15,23,42,.02);
  border: 1px solid var(--color-border);
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.order-detail-v2 .onv2-item-search-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 14px;
  background: var(--surface);
}
.order-detail-v2 .onv2-item-search-input:focus {
  outline: 2px solid var(--accent, #0ea5e9);
  outline-offset: -1px;
  border-color: var(--accent, #0ea5e9);
}
.order-detail-v2 .onv2-item-search-tools {
  display: flex;
  gap: 4px;
}
.order-detail-v2 .onv2-it-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  color: var(--text-2, #475569);
  cursor: pointer;
}
.order-detail-v2 .onv2-it-tool-btn:hover {
  background: rgba(15,23,42,.04);
  color: var(--text);
}
.order-detail-v2 .onv2-it-tool-btn.onv2-it-tool-active {
  background: rgba(14,165,233,.08);
  color: var(--accent, #0284c7);
  border-color: rgba(14,165,233,.25);
}
.order-detail-v2 .onv2-it-browse-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  color: var(--text-2, #475569);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  height: 32px;
}
.order-detail-v2 .onv2-it-browse-btn:hover {
  background: rgba(15,23,42,.04);
  color: var(--text);
}

/* Items section — bottom inline-add row */
.order-detail-v2 .onv2-item-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(14,165,233,.04);
  border: 1px dashed rgba(14,165,233,.30);
  border-radius: var(--r-sm);
  margin-top: 8px;
}
.order-detail-v2 .onv2-add-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent, #0ea5e9);
  color: #fff;
}
.order-detail-v2 .onv2-add-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  outline: none;
}
.order-detail-v2 .onv2-add-input::placeholder { color: var(--text-3, #94a3b8); }
.order-detail-v2 .onv2-add-hint {
  font-size: 12px;
  color: var(--text-3, #64748b);
}
.order-detail-v2 .onv2-add-hint kbd {
  display: inline-block;
  padding: 1px 5px;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
}

/* Pricing bar — "Email PDF" checkbox + Apply coupon button extras */
.order-detail-v2 .onv2-pricing-bar .onv2-pricing-spacer { flex: 1; min-width: 12px; }
.order-detail-v2 .onv2-pricing-email {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2, #475569);
  cursor: pointer;
  user-select: none;
}
.order-detail-v2 .onv2-pricing-email input[type=checkbox] { margin: 0; }

/* Tab bar — counter chip alongside the tab label */
.order-detail-v2 .od-tabs-bar .od-tab .od-tab-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.08);
  color: var(--text-2, #475569);
  font-size: var(--text-xs, 12px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.order-detail-v2 .od-tabs-bar .od-tab-active .od-tab-counter {
  background: rgba(14,165,233,.15);
  color: var(--accent, #0284c7);
}

/* Comments — "Sales-facing" / "Warehouse-facing" pill next to title */
.order-detail-v2 .od-comments-aud-pill {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 6px;
  border-radius: 999px;
  font-size: var(--text-xs, 12px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.order-detail-v2 .od-comments-aud-pill-order {
  background: rgba(14,165,233,.12);
  color: var(--accent, #0284c7);
}
.order-detail-v2 .od-comments-aud-pill-warehouse {
  background: rgba(245,158,11,.15);
  color: #b45309;
}

/* Footer — bigger "Total" cell that pops against the others */
.order-detail-v2 .onv2-foot-stat-big {
  padding-left: 8px;
  border-left: 2px solid var(--color-border);
}
.order-detail-v2 .onv2-foot-stat-big .onv2-foot-label {
  color: var(--text-2, #475569);
  font-weight: 700;
}
.order-detail-v2 .onv2-foot-stat-big .onv2-foot-total {
  font-size: 16px;
  color: var(--accent, #0284c7);
}

/* Page-title row + Credit hold badge styling (header right of title) */
.order-detail-v2 .page-title-row .badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs, 12px); padding: 3px 8px; }
.order-detail-v2 .page-title-row .badge .ico { width: 12px; height: 12px; }
.order-detail-v2 .breadcrumbs .text-muted { margin: 0 6px; opacity: .7; }

/* Items section — combined Code · Product column requires a slight bump in
   the existing oi-col-prod cell so the product name has room to breathe. */
.order-detail-v2 .oi-col-prod .oi-name { font-weight: 600; }
.order-detail-v2 .oi-col-codeprod .oi-name { font-weight: 600; color: var(--text); }
.order-detail-v2 .oi-col-codeprod .oi-meta {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3, #64748b);
  line-height: 1.4;
}
.order-detail-v2 .oi-col-codeprod .oi-meta-code {
  font-family: ui-monospace, monospace;
  color: var(--accent, #0284c7);
  text-decoration: none;
}
.order-detail-v2 .oi-col-codeprod .oi-meta-code:hover { text-decoration: underline; }
.order-detail-v2 .oi-col-codeprod .oi-meta-bc {
  font-family: ui-monospace, monospace;
  color: var(--text-3, #94a3b8);
}
/* Pick-progress chips on order-detail lines — make a short pick (picked <
   ordered) visible here instead of only at dispatch. */
.order-detail-v2 .oi-pick-badge { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:600; padding:1px 6px; border-radius:999px; vertical-align:middle; white-space:nowrap; }
.order-detail-v2 .oi-pick-short { background:color-mix(in oklch, var(--color-warning,#f59e0b) 16%, transparent); color:var(--color-warning,#a16207); }
.order-detail-v2 .oi-pick-wip { background:var(--color-bg-2,#f1f5f9); color:var(--text-3,#64748b); }
.order-detail-v2 .oi-pick-ok { background:color-mix(in oklch, var(--color-success,#16a34a) 14%, transparent); color:var(--color-success,#15803d); }
.order-detail-v2 .oi-pick-need { background:color-mix(in oklch, var(--color-danger,#dc2626) 14%, transparent); color:var(--color-danger,#b91c1c); }
.order-detail-v2 .oi-short-resolved { background:color-mix(in oklch, var(--color-success,#16a34a) 12%, transparent); color:var(--color-success,#15803d); }
.order-detail-v2 .oi-accept-short { margin-left:6px; font-size:12px; font-weight:700; padding:2px 9px; border-radius:999px; border:1px solid color-mix(in oklch, var(--color-warning,#f59e0b) 45%, transparent); background:color-mix(in oklch, var(--color-warning,#f59e0b) 10%, var(--surface,#fff)); color:var(--color-warning,#a16207); cursor:pointer; display:inline-flex; align-items:center; gap:3px; vertical-align:middle; }
.order-detail-v2 .oi-accept-short:hover { background:color-mix(in oklch, var(--color-warning,#f59e0b) 22%, var(--surface,#fff)); }
/* Pack stage (follows picking): packing… = blue, packed = indigo — distinct from
   the green "picked" so the picking→picked→packing→packed lifecycle reads clearly. */
.order-detail-v2 .oi-pack-wip { background:color-mix(in oklch, oklch(60% 0.16 250) 18%, transparent); color:oklch(45% 0.17 255); }
.order-detail-v2 .oi-pack-ok  { background:color-mix(in oklch, oklch(55% 0.17 285) 18%, transparent); color:oklch(44% 0.18 285); }

/* Returns-to-stock queue (#/wh/returns) */
.wh-returns { padding:16px 20px 40px; max-width:920px; }
.wh-ret-head h2 { display:flex; align-items:center; gap:9px; font-size:20px; font-weight:700; margin:0 0 4px; }
.wh-ret-head p { color:var(--text-3,#64748b); font-size:13.5px; margin:0 0 16px; max-width:640px; line-height:1.5; }
.wh-ret-count { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 7px; border-radius:999px; background:color-mix(in oklch, var(--color-warning,#f59e0b) 18%, transparent); color:var(--color-warning,#a16207); font-size:14px; font-weight:700; }
.wh-ret-loading { color:var(--text-3,#64748b); display:flex; align-items:center; gap:7px; padding:24px 0; }
.wh-ret-list { display:flex; flex-direction:column; gap:10px; }
.wh-ret-card { display:flex; align-items:center; gap:16px; padding:14px 16px; background:var(--color-surface,#fff); border:1px solid var(--color-border,#e2e8f0); border-radius:12px; }
.wh-ret-qty { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:64px; padding:8px 10px; border-radius:10px; background:color-mix(in oklch, var(--color-danger,#dc2626) 9%, transparent); color:var(--color-danger,#b91c1c); font-size:22px; font-weight:800; line-height:1; }
.wh-ret-qty small { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; opacity:.8; margin-top:3px; }
.wh-ret-info { flex:1 1 auto; min-width:0; }
.wh-ret-title { font-weight:700; font-size:14.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wh-ret-tag { display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:600; padding:1px 7px; border-radius:999px; background:color-mix(in oklch, var(--color-warning,#f59e0b) 16%, transparent); color:var(--color-warning,#a16207); }
.wh-ret-meta { font-size:12.5px; color:var(--text-3,#64748b); margin-top:3px; line-height:1.5; }
.wh-ret-meta a { color:var(--accent,#0284c7); text-decoration:none; }
.wh-ret-picker { font-size:11.5px; color:var(--text-3,#94a3b8); margin-top:3px; display:flex; align-items:center; gap:4px; }
.wh-ret-btn { flex:0 0 auto; }
.wh-ret-empty { display:flex; flex-direction:column; align-items:center; gap:10px; padding:48px 16px; color:var(--text-3,#64748b); text-align:center; }
.wh-ret-empty svg { color:var(--color-success,#16a34a); }
@media (max-width:640px){ .wh-ret-card { flex-wrap:wrap; } .wh-ret-btn { width:100%; } }

/* Pack-station "items removed → return to stock" banner */
/* margin: 0 12px matches the .pack-detail grid's 12px padding so the banner's
   left/right edges line up with the cards below (was full-width, sticking out). */
.pack-returns-banner { margin:0 12px 12px; padding:12px 14px; border-radius:11px; background:color-mix(in oklch, var(--color-danger,#dc2626) 8%, transparent); border:1px solid color-mix(in oklch, var(--color-danger,#dc2626) 28%, transparent); }
.pack-ret-head { display:flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:var(--color-danger,#b91c1c); }
.pack-ret-note { font-size:13px; color:var(--text-3,#64748b); margin:4px 0 10px; line-height:1.45; }
.pack-ret-list { display:flex; flex-direction:column; gap:6px; }
.pack-ret-row { display:flex; align-items:center; gap:10px; padding:8px 10px; background:var(--color-surface,#fff); border:1px solid var(--color-border,#e2e8f0); border-radius:9px; }
.pack-ret-q { flex:0 0 auto; font-weight:800; font-size:15px; color:var(--color-danger,#b91c1c); min-width:34px; }
.pack-ret-t { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.pack-ret-t strong { font-size:13.5px; }
.pack-ret-sub { font-size:11.5px; color:var(--text-3,#64748b); }
.pack-stale-banner { background:color-mix(in oklch, var(--accent,#0284c7) 8%, transparent); border-color:color-mix(in oklch, var(--accent,#0284c7) 26%, transparent); }
.pack-stale-banner .pack-ret-head { color:var(--accent,#0369a1); }
/* HARD re-issue block (packing on hold) — red, distinct from the soft blue reprint hint. */
.pack-stale-banner--block { background:color-mix(in oklch, var(--color-danger,#dc2626) 12%, transparent); border-color:color-mix(in oklch, var(--color-danger,#dc2626) 42%, transparent); }
.pack-stale-banner--block .pack-ret-head { color:var(--color-danger,#b91c1c); }

/* Pick-page "reprint the picking list" banner */
.wh-stale-banner { display:flex; align-items:center; gap:11px; margin:0 0 12px; padding:11px 14px; border-radius:11px; background:color-mix(in oklch, var(--accent,#0284c7) 9%, transparent); border:1px solid color-mix(in oklch, var(--accent,#0284c7) 28%, transparent); }
.wh-stale-banner > svg { flex:0 0 auto; color:var(--accent,#0369a1); }
.wh-stale-txt { flex:1 1 auto; font-size:14px; line-height:1.4; color:#334155; }
.wh-stale-txt strong { color:var(--accent,#0369a1); }
.wh-stale-btn { flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; padding:8px 13px; border-radius:9px; border:1px solid var(--accent,#0284c7); background:var(--accent,#0284c7); color:#fff; font-size:12.5px; font-weight:600; cursor:pointer; }
/* Re-issue HARD block — order edited after the list was issued to the crew; picking is
   on hold until a manager re-issues. Red (danger), no worker action (manager-side). */
.wh-stale-banner--block { background:color-mix(in oklch, var(--color-danger,#dc2626) 11%, transparent); border-color:color-mix(in oklch, var(--color-danger,#dc2626) 34%, transparent); }
.wh-stale-banner--block > svg { color:var(--color-danger,#dc2626); }
.wh-stale-banner--block .wh-stale-txt strong { color:var(--color-danger,#b91c1c); }
.wh-ws-blocked-lab { color:var(--color-danger,#b91c1c) !important; font-weight:600; }
.wh-ws-note-lab { color:var(--color-text-secondary,#64748b) !important; font-weight:500; }

/* Pick-page "Returns to stock" tile */
.wh-returns-tile { display:flex; align-items:center; gap:12px; margin:0 12px 12px; padding:12px 16px; border-radius:12px; background:color-mix(in oklch, var(--color-danger,#dc2626) 8%, transparent); border:1px solid color-mix(in oklch, var(--color-danger,#dc2626) 26%, transparent); cursor:pointer; text-decoration:none; }
.wh-returns-tile:hover { background:color-mix(in oklch, var(--color-danger,#dc2626) 13%, transparent); }
.wh-returns-tile .wrt-ic { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--color-danger,#dc2626); color:#fff; }
.wh-returns-tile .wrt-main { flex:1 1 auto; min-width:0; }
.wh-returns-tile .wrt-title { font-weight:700; font-size:14px; color:var(--color-danger,#b91c1c); }
.wh-returns-tile .wrt-sub { font-size:13px; color:var(--text-3,#64748b); margin-top:1px; }
.wh-returns-tile .wrt-count { flex:0 0 auto; min-width:30px; height:30px; padding:0 9px; border-radius:999px; background:var(--color-danger,#dc2626); color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; }

/* Warehouse nav "Returns to stock" pending-count badge */
.nav-sub-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; border-radius:999px; background:var(--color-danger,#dc2626); color:#fff; font-size:12px; font-weight:700; vertical-align:middle; line-height:1; }
.order-detail-v2 .oi-col-thumb { width: 50px; text-align: center; padding: 4px 6px; }
.order-detail-v2 .oi-pic-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: rgba(15,23,42,.04);
  border: 1px solid var(--color-border);
  object-fit: cover;
  color: var(--text-3, #94a3b8);
}
.order-detail-v2 .oi-pic-thumb-empty { background: rgba(15,23,42,.03); }

/* ──────────────────────────────────────────────────────────────────
   TAB-BODY PARITY — styles for the 6 tab-body renderers so they
   visually match the preview-order-detail-redesign.html spec.
   Profile tab: .od-profile-grid (3-col) + .od-rename-list + .od-timeline
   Fulfilment / Payments: .od-mini-card stacked vertically
   Activity: .od-activity-filter chip row + .od-timeline
   Files: .od-files-grid + .od-file-card + .od-file-upload tile
   Linked: .od-ldoc-list + .od-ldoc-row with icon/main/amt/status cols
   ────────────────────────────────────────────────────────────────── */

/* ── PROFILE — 3-column grid + rename history + recent activity ── */
.order-detail-v2 .od-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding: 4px 2px;
}
.order-detail-v2 .od-pg-section h4 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3, #64748b);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.order-detail-v2 .od-pg-section h4 .ico { color: var(--accent, #0284c7); width: 14px; height: 14px; }
.order-detail-v2 .od-pg-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px dotted var(--color-border);
  font-size: 13px;
}
.order-detail-v2 .od-pg-row:last-child { border-bottom: none; }
.order-detail-v2 .od-pg-row .l { color: var(--text-3, #64748b); }
.order-detail-v2 .od-pg-row .v { color: var(--text); font-weight: 600; text-align: right; }
.order-detail-v2 .od-pg-row .v a { color: var(--accent, #0284c7); text-decoration: none; }
.order-detail-v2 .od-pg-row .v a:hover { text-decoration: underline; }

.order-detail-v2 .od-tab-sep {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 24px 0;
}
.order-detail-v2 .od-tab-section-head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-3, #64748b);
  letter-spacing: 0.05em;
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.order-detail-v2 .od-tab-section-meta {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3, #94a3b8);
}

/* Rename history list */
.order-detail-v2 .od-rename-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.order-detail-v2 .od-rename-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  padding: 10px 14px;
  background: rgba(15,23,42,.02);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font-size: 13px;
  align-items: baseline;
}
.order-detail-v2 .od-rename-row.od-rename-current {
  background: rgba(14,165,233,.04);
  border-color: rgba(14,165,233,.20);
}
.order-detail-v2 .od-rename-name {
  font-weight: 600;
  color: var(--text);
}
.order-detail-v2 .od-rename-current .od-rename-name { color: var(--accent, #0284c7); }
.order-detail-v2 .od-rename-meta {
  color: var(--text-3, #64748b);
  font-size: 12px;
  white-space: nowrap;
}

/* Recent activity timeline + Activity-tab timeline (shared) */
.order-detail-v2 .od-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.order-detail-v2 .od-tl-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: start;
  padding: 4px 0;
}
.order-detail-v2 .od-tl-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(15,23,42,.08);
  color: var(--text-2, #475569);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.order-detail-v2 .od-tl-dot.od-tl-dot-ok   { background: rgba(16,185,129,.15); color: #047857; }
.order-detail-v2 .od-tl-dot.od-tl-dot-warn { background: rgba(245,158,11,.15); color: #b45309; }
.order-detail-v2 .od-tl-head {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 13px;
  flex-wrap: wrap;
}
.order-detail-v2 .od-tl-actor { font-weight: 700; color: var(--text); }
.order-detail-v2 .od-tl-action { color: var(--text-2, #475569); }
.order-detail-v2 .od-tl-time {
  margin-left: auto;
  color: var(--text-3, #94a3b8);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.order-detail-v2 .od-tl-body {
  grid-column: 2;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-2, #475569);
  line-height: 1.5;
}

/* ── FULFILMENT / PAYMENTS — stacked mini-cards ── */
.order-detail-v2 .od-mini-card {
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  margin-bottom: 12px;
  overflow: hidden;
}
.order-detail-v2 .od-mini-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  background: rgba(15,23,42,.02);
}
.order-detail-v2 .od-mini-card-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.order-detail-v2 .od-mini-card-title .ico { color: var(--accent, #0284c7); width: 14px; height: 14px; }
.order-detail-v2 .od-mini-card-body { padding: 12px 14px; }
.order-detail-v2 .od-mini-empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-3, #64748b);
  text-align: center;
  padding: 14px;
}

.order-detail-v2 .od-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.order-detail-v2 .od-mini-table th {
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3, #64748b);
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
}
.order-detail-v2 .od-mini-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.order-detail-v2 .od-mini-table tr:last-child td { border-bottom: none; }
.order-detail-v2 .od-mini-table tr.row-clickable { cursor: pointer; }
.order-detail-v2 .od-mini-table tr.row-clickable:hover { background: rgba(14,165,233,.04); }

.order-detail-v2 .od-mini-dlist {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 13px;
  margin: 0;
  max-width: 420px;
}
.order-detail-v2 .od-mini-dlist dt { color: var(--text-3, #64748b); font-weight: 500; }
.order-detail-v2 .od-mini-dlist dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; }
.order-detail-v2 .od-mini-dlist dd a { color: var(--accent, #0284c7); text-decoration: none; }
.order-detail-v2 .od-mini-dlist dd.od-mini-accent {
  color: var(--accent, #0284c7);
  font-size: 14px;
}

/* ── ACTIVITY — filter chip row ── */
.order-detail-v2 .od-activity-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.order-detail-v2 .od-activity-filter .od-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2, #475569);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.order-detail-v2 .od-activity-filter .od-chip:hover {
  background: rgba(15,23,42,.04);
}
.order-detail-v2 .od-activity-filter .od-chip.od-chip-accent {
  background: var(--accent, #0ea5e9);
  color: #fff;
  border-color: var(--accent, #0ea5e9);
}

/* ── FILES — grid + cards + upload tile ── */
.order-detail-v2 .od-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.order-detail-v2 .od-file-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  padding: 12px;
  background: rgba(15,23,42,.02);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  align-items: start;
}
.order-detail-v2 .od-file-card-icon {
  width: 40px; height: 50px;
  border-radius: var(--r-sm);
  background: rgba(14,165,233,.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #0284c7);
}
.order-detail-v2 .od-file-card-body { min-width: 0; }
.order-detail-v2 .od-file-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}
.order-detail-v2 .od-file-card-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3, #64748b);
}
.order-detail-v2 .od-file-card-actions {
  grid-column: 2;
  margin-top: 8px;
  display: flex;
  gap: 4px;
}
.order-detail-v2 .od-file-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px;
  background: rgba(14,165,233,.04);
  border: 2px dashed rgba(14,165,233,.30);
  border-radius: var(--r-sm);
  color: var(--accent, #0284c7);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.order-detail-v2 .od-file-upload:hover {
  background: rgba(14,165,233,.08);
  border-color: var(--accent, #0ea5e9);
}

/* ── LINKED DOCUMENTS — stacked rows ── */
.order-detail-v2 .od-ldoc-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.order-detail-v2 .od-ldoc-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.order-detail-v2 .od-ldoc-row:hover {
  background: rgba(14,165,233,.04);
  border-color: rgba(14,165,233,.25);
}
.order-detail-v2 .od-ldoc-row.od-ldoc-row-pending {
  opacity: 0.6;
  cursor: default;
}
.order-detail-v2 .od-ldoc-row.od-ldoc-row-pending:hover { background: var(--surface); border-color: var(--color-border); }
.order-detail-v2 .od-ldoc-icon {
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  background: rgba(14,165,233,.08);
  color: var(--accent, #0284c7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.order-detail-v2 .od-ldoc-main { min-width: 0; }
.order-detail-v2 .od-ldoc-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  font-family: ui-monospace, monospace;
}
.order-detail-v2 .od-ldoc-meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-3, #64748b);
}
.order-detail-v2 .od-ldoc-amt {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  min-width: 80px;
  text-align: right;
}
.order-detail-v2 .od-ldoc-amt.muted { color: var(--text-3, #94a3b8); }
.order-detail-v2 .od-ldoc-actions {
  display: flex;
  gap: 4px;
}

/* Responsive collapse for tab bodies */
@media (max-width: 1100px) {
  .order-detail-v2 .od-profile-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .order-detail-v2 .od-profile-grid { grid-template-columns: 1fr; }
  .order-detail-v2 .od-rename-row { grid-template-columns: 1fr; gap: 2px; }
  .order-detail-v2 .od-ldoc-row { grid-template-columns: 36px 1fr; row-gap: 6px; }
  .order-detail-v2 .od-ldoc-amt, .order-detail-v2 .od-ldoc-status, .order-detail-v2 .od-ldoc-actions { grid-column: 2; }
}


/* ── Orders LIST table redesign (v2) ─────────────────────────────────────
   Reduced from 8 cols → 5 (+ checkbox + kebab). Every row is exactly
   2 lines tall. Primary info (Order #, Customer name, Total, Status
   badge) is larger/bolder. Secondary info (relative time, source pill,
   account no, payment terms, units, mini-pipeline) is muted + smaller.
   Tertiary info (phone, email, sales rep, full notes) moved to row-
   hover tooltips. Per-row Actions collapsed into a single kebab. */

.ol-table-v2 thead th             { font-weight: 600; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.ol-table-v2 tbody tr.ol-row-v2   { vertical-align: middle; }
.ol-table-v2 tbody td             { padding: 10px 12px; }

/* Column widths — let Customer absorb extra horizontal space. */
.ol-table-v2 .ol-col-num,
.ol-table-v2 .ol-cell-num         { width: 14%; min-width: 130px; white-space: nowrap; }
.ol-table-v2 .ol-col-cust,
.ol-table-v2 .ol-cell-cust        { width: auto; min-width: 220px; }
.ol-table-v2 .ol-col-total,
.ol-table-v2 .ol-cell-total       { width: 12%; min-width: 100px; white-space: nowrap; }
.ol-table-v2 .ol-col-status,
.ol-table-v2 .ol-cell-status      { width: 18%; min-width: 160px; }
.ol-table-v2 .ol-col-kebab,
.ol-table-v2 .ol-cell-kebab       { width: 44px; }

/* Order # cell — 2-line stack: #number (semibold) + meta (muted) */
.ol-table-v2 .ol-cell-num .ol-num       { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; }
.ol-table-v2 .ol-cell-num .ol-num-meta  { display: inline-flex; align-items: center; gap: 4px; margin-top: 1px; font-size: 12px; }
.ol-table-v2 .ol-cell-num .ol-sep       { opacity: .4; }
.ol-table-v2 .ol-big-star               { color: oklch(72% 0.16 75); display: inline-flex; }
.ol-table-v2 .ol-note-dot               { color: var(--accent); display: inline-flex; opacity: .6; cursor: help; }
.ol-table-v2 .ol-note-dot:hover         { opacity: 1; }
/* "Reship" pill in the order # cell — flags a re-attempt after a failed delivery
   so a reshipping order (which otherwise sits at a fresh-looking pending/out-for-
   delivery status) is unmistakable in the list. Amber, compact. */
.ol-table-v2 .ol-reship-badge           { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 5px; border-radius: 4px; background: color-mix(in oklch, var(--warning, #d4831a) 18%, transparent); color: var(--warning, #b45309); line-height: 1.4; white-space: nowrap; cursor: help; }

/* Customer cell — avatar + name + sub */
.ol-table-v2 .ol-cell-cust .ol-cust-row  { display: flex; gap: 10px; align-items: center; }
.ol-table-v2 .ol-cell-cust .ol-avatar    { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
.ol-table-v2 .ol-cell-cust .ol-cust-body { min-width: 0; }
.ol-table-v2 .ol-cell-cust .ol-cust-name { font-size: 13.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ol-table-v2 .ol-cell-cust .ol-cust-sub  { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin-top: 2px; }
.ol-table-v2 .ol-cell-cust .ol-sep       { opacity: .4; }

/* Total cell — £amount semibold + units muted */
.ol-table-v2 .ol-cell-total              { text-align: right; }
.ol-table-v2 .ol-cell-total .tabular     { font-variant-numeric: tabular-nums; }
.ol-table-v2 .ol-cell-total > div:first-child { font-size: 13.5px; }
.ol-table-v2 .ol-cell-total > div + div  { margin-top: 1px; font-size: 12px; }

/* Status cell — badge + mini-pipeline */
.ol-table-v2 .ol-cell-status             { line-height: 1.2; }
.ol-table-v2 .ol-cell-status .badge      { font-size: 12px; padding: 2px 8px; }
.ol-table-v2 .ol-cell-status .ol-mp-wrap { margin-top: 4px; }

/* Aging row — subtle amber left-border instead of a clock badge */
.ol-table-v2 tbody tr.ol-row-aging       { box-shadow: inset 3px 0 0 0 oklch(70% 0.18 70); }

/* Big-order row — subtle gold tint */
.ol-table-v2 tbody tr.ol-row-big         { background: linear-gradient(90deg, oklch(98% 0.02 80 / .35), transparent 240px); }
.ol-table-v2 tbody tr.ol-row-big:hover   { background: linear-gradient(90deg, oklch(96% 0.04 80 / .4), var(--surface-2) 240px); }

/* Kebab cell — single round button that toggles a fly-out menu */
.ol-table-v2 .ol-cell-kebab              { text-align: right; }
.ol-table-v2 .ol-row-kebab               { position: relative; display: inline-block; }
.ol-table-v2 .ol-row-kebab > summary     { list-style: none; cursor: pointer; width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); transition: background var(--t-fast), color var(--t-fast); }
.ol-table-v2 .ol-row-kebab > summary::-webkit-details-marker { display: none; }
.ol-table-v2 .ol-row-kebab > summary:hover { background: var(--surface-3); color: var(--text); }
.ol-table-v2 .ol-row-kebab[open] > summary { background: var(--surface-3); color: var(--text); }

/* Kebab dropdown panel — anchored to the right edge of the kebab button */
.ol-table-v2 .ol-kebab-panel             { position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 8px 24px -8px rgba(0,0,0,.18); padding: 4px; }
.ol-table-v2 .ol-kebab-panel .onv2-more-item { white-space: nowrap; }

/* Mobile-first stack — hide low-priority columns at narrow widths. */
@media (max-width: 760px) {
  .ol-table-v2 .ol-col-status,
  .ol-table-v2 .ol-cell-status           { display: none; }
  .ol-table-v2 .ol-cell-cust .ol-cust-sub { display: none; }
}
@media (max-width: 480px) {
  .ol-table-v2 .ol-col-total,
  .ol-table-v2 .ol-cell-total            { width: auto; min-width: 80px; }
  .ol-table-v2 tbody td                  { padding: 8px 6px; }
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ Pro list page blueprint v2 — 16 list pages share this layer       ║
   ║                                                                   ║
   ║ Adds: lifecycle-color tabs, From→To date range, keyboard layer    ║
   ║ (keycaps + focus row + shortcuts modal), lifecycle-aware bulkbar  ║
   ║ with stage chip + lock-icons, Visible Tabs gear popover.          ║
   ║                                                                   ║
   ║ Class prefix: .lpv2-*  (list-page-v2)                             ║
   ║ Stage prefix: .tab-stage-*  (orderable per-page)                  ║
   ║                                                                   ║
   ║ See preview-orders.html for the visual reference.                 ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

/* ── Lifecycle stage color tokens — used by .tab-stage-* on every list */
.tab-stage-submitted  { --tab-color: #2563EB; --tab-soft: #EFF6FF; }
.tab-stage-pickpacked,
.tab-stage-processing { --tab-color: #4F46E5; --tab-soft: #EEF2FF; }
.tab-stage-picking        { --tab-color: #4F46E5; --tab-soft: #EEF2FF; }
.tab-stage-packing        { --tab-color: #8B5CF6; --tab-soft: #F5F3FF; }
.tab-stage-ready_dispatch { --tab-color: #059669; --tab-soft: #ECFDF5; }
.tab-stage-dispatched { --tab-color: #D97706; --tab-soft: #FFFBEB; }
.tab-stage-delivered  { --tab-color: #0D9488; --tab-soft: #F0FDFA; }
.tab-stage-invoiced   { --tab-color: #0284C7; --tab-soft: #F0F9FF; }
.tab-stage-proforma   { --tab-color: #7C3AED; --tab-soft: #F5F3FF; }
.tab-stage-partpaid,
.tab-stage-partially_paid { --tab-color: #0891B2; --tab-soft: #ECFEFF; }
.tab-stage-paid       { --tab-color: #16A34A; --tab-soft: #F0FDF4; }
.tab-stage-completed  { --tab-color: #059669; --tab-soft: #ECFDF5; }
.tab-stage-hold       { --tab-color: #B45309; --tab-soft: #FEF3C7; }
.tab-stage-cancelled  { --tab-color: #DC2626; --tab-soft: #FEF2F2; }
.tab-stage-backorder  { --tab-color: #B45309; --tab-soft: #FEF3C7; }
.tab-stage-offline    { --tab-color: #6B7280; --tab-soft: #F4F4F5; }
.tab-stage-draft      { --tab-color: #6B7280; --tab-soft: #F4F4F5; }
.tab-stage-sent       { --tab-color: #2563EB; --tab-soft: #EFF6FF; }
.tab-stage-accepted   { --tab-color: #16A34A; --tab-soft: #F0FDF4; }
.tab-stage-rejected   { --tab-color: #DC2626; --tab-soft: #FEF2F2; }
.tab-stage-expired    { --tab-color: #6B7280; --tab-soft: #F4F4F5; }
.tab-stage-converted  { --tab-color: #059669; --tab-soft: #ECFDF5; }
.tab-stage-pending    { --tab-color: #D97706; --tab-soft: #FFFBEB; }
.tab-stage-received   { --tab-color: #0D9488; --tab-soft: #F0FDFA; }
.tab-stage-partial    { --tab-color: #0891B2; --tab-soft: #ECFEFF; }
.tab-stage-issued     { --tab-color: #0284C7; --tab-soft: #F0F9FF; }
.tab-stage-closed     { --tab-color: #059669; --tab-soft: #ECFDF5; }
.tab-stage-active     { --tab-color: #16A34A; --tab-soft: #F0FDF4; }
.tab-stage-archived   { --tab-color: #6B7280; --tab-soft: #F4F4F5; }

/* Tabs read --tab-color / --tab-soft. Falls back to neutral when absent (e.g. "All" tab). */
.lpv2-tab {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 12.5px; font-weight: 500;
  color: var(--text-3);
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
  margin-bottom: -1px;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.lpv2-tab:hover { color: var(--tab-color, var(--text)); background: var(--surface-2); }
.lpv2-tab.active {
  color: var(--tab-color, var(--accent));
  border-bottom-color: var(--tab-color, var(--accent));
  font-weight: 600;
}
.lpv2-tab-badge {
  padding: 0 6px; border-radius: 9px; min-height: 16px;
  background: var(--tab-soft, var(--surface-3));
  color: var(--tab-color, var(--text-3));
  font-size: 10.5px; font-weight: 600;
  display: inline-grid; place-items: center;
  transition: all .15s;
}
.lpv2-tab.active .lpv2-tab-badge {
  background: var(--tab-color, var(--accent));
  color: #fff;
}
.lpv2-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 4px;
}
.lpv2-tab-sep {
  width: 1px; background: var(--border);
  margin: 6px 2px 6px 4px;
}
.lpv2-tab-nav-icon { opacity: .5; }

/* Tab rail wrapper — flex parent with right-anchored Visible Tabs gear */
.lpv2-tab-rail-row {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  min-width: 0; max-width: 100%;
}
.lpv2-tab-rail {
  flex: 1; min-width: 0;
  display: flex; align-items: stretch; gap: 0;
  overflow-x: auto;
}
.lpv2-tab-rail::-webkit-scrollbar { display: none; }
.lpv2-tab-rail-right {
  flex: 0 0 auto;
  display: flex; align-items: center;
  padding-left: 6px;
  border-left: 1px solid var(--border);
  background: var(--bg);
}

/* Visible Tabs gear button + popover */
.lpv2-tab-settings-wrap { position: relative; padding: 0 4px; }
.lpv2-tab-settings {
  width: 28px; height: 28px; border-radius: 5px;
  background: transparent; border: 1px solid transparent;
  display: grid; place-items: center;
  color: var(--text-3); cursor: pointer;
}
.lpv2-tab-settings:hover { background: var(--surface-3); color: var(--text); border-color: var(--border); }
.lpv2-tab-settings-wrap.open .lpv2-tab-settings {
  background: var(--surface-3); color: var(--text); border-color: var(--border-2, var(--border));
}
.lpv2-tab-popover {
  position: absolute; right: 4px; top: 36px;
  width: 260px; max-width: calc(100vw - 24px);
  z-index: 40;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16,24,40,.10);
  padding: 6px;
  font-size: 12.5px;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
  display: none;
}
.lpv2-tab-settings-wrap.open .lpv2-tab-popover { display: block; }
.lpv2-tab-popover-head {
  display: flex; align-items: center;
  padding: 6px 8px 8px;
  border-bottom: 1px solid var(--border); margin-bottom: 6px;
}
.lpv2-tab-popover-head .title {
  font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3);
}
.lpv2-tab-popover-head .reset {
  margin-left: auto; font-size: 12px;
  color: var(--accent); background: transparent; border: none; cursor: pointer;
}
.lpv2-tab-opt {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 5px 6px 5px 4px;
  background: transparent; border: none;
  border-radius: 5px;
  font-size: 12.5px; color: var(--text);
  text-align: left; cursor: pointer;
  position: relative;
}
.lpv2-tab-opt:hover { background: var(--surface-2); }
.lpv2-tab-opt:hover .lpv2-drag-grip { color: var(--text-3); }
.lpv2-tab-opt input { width: 13px; height: 13px; accent-color: var(--accent); }
.lpv2-tab-opt .opt-badge {
  margin-left: auto;
  padding: 0 6px; border-radius: 9px;
  background: var(--surface-3); color: var(--text-3);
  font-size: 10.5px; font-weight: 600; min-height: 16px;
  display: inline-grid; place-items: center;
}
.lpv2-tab-opt.locked { color: var(--text-4); }
.lpv2-tab-opt-section {
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-4);
  padding: 8px 8px 4px;
}
.lpv2-drag-grip {
  width: 14px; height: 14px;
  color: transparent;
  transition: color .12s;
  cursor: grab;
  display: grid; place-items: center;
}
.lpv2-drag-grip:active { cursor: grabbing; }
.lpv2-tab-opt.dragging {
  opacity: .55;
  background: var(--accent-soft);
  box-shadow: 0 4px 12px rgba(16,24,40,.08);
}
.lpv2-tab-opt.drop-above { box-shadow: inset 0 2px 0 0 var(--accent); }
.lpv2-tab-opt.drop-below { box-shadow: inset 0 -2px 0 0 var(--accent); }
.lpv2-tab-opt.locked .lpv2-drag-grip { display: none; }
.lpv2-tab-opt-helper {
  padding: 8px 8px 6px;
  font-size: 12px; color: var(--text-3);
  display: flex; align-items: center; gap: 5px;
}

/* ── From → To date range picker */
.lpv2-date-range {
  height: 26px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 4px 0 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px;
  transition: all .15s;
}
.lpv2-date-range:hover, .lpv2-date-range:focus-within { border-color: var(--border-2, var(--text-4)); }
.lpv2-date-range:focus-within { box-shadow: 0 0 0 3px var(--accent-ring); border-color: var(--accent); }
.lpv2-date-range-icon { color: var(--text-3); display: inline-flex; }
.lpv2-date-range input[type="date"] {
  border: none; background: transparent;
  font: inherit; color: var(--text);
  font-size: 13px; font-feature-settings: "tnum";
  padding: 0 2px; outline: none;
  width: 102px; line-height: 1;
  cursor: pointer;
}
.lpv2-date-range input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(50%); padding: 0; margin-left: 2px; cursor: pointer; opacity: .55;
}
.lpv2-date-range input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
.lpv2-date-range .lpv2-date-arrow {
  color: var(--text-4); font-size: 14px; padding: 0 2px;
  user-select: none;
}
.lpv2-date-clear {
  width: 18px; height: 18px; border-radius: 4px;
  background: transparent; border: none;
  display: grid; place-items: center;
  color: var(--text-4); cursor: pointer;
  transition: all .15s;
}
.lpv2-date-clear:hover { background: var(--surface-3); color: var(--text-2); }
.lpv2-date-range.active {
  background: var(--accent-soft);
  border-color: var(--accent-soft-2);
}
.lpv2-date-range.active .lpv2-date-range-icon { color: var(--accent-text); }
.lpv2-date-range.active input[type="date"] { color: var(--accent-text); font-weight: 500; }

/* ── Keyboard layer */
.lpv2-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 17px; padding: 0 5px;
  font-size: 10.5px; font-weight: 500;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text-3); background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  line-height: 1;
}
.btn .lpv2-kbd { margin-left: 4px; }
.btn-primary .lpv2-kbd {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.30);
  color: #fff;
}

/* Keyboard-focused row (J/K + arrow nav) */
tr.row-kbd-focus {
  background: linear-gradient(90deg, rgba(37,99,235,0.06), transparent 360px);
  box-shadow: inset 3px 0 0 var(--accent);
}
tr.row-kbd-focus .ord-num::before,
tr.row-kbd-focus .lpv2-row-ref::before {
  content: '▸';
  color: var(--accent);
  margin-right: 4px;
  font-weight: 600;
}

/* Floating shortcuts launcher (bottom-right of any list page) */
.lpv2-shortcuts-launcher {
  position: fixed; bottom: 16px; right: 16px;
  height: 32px; padding: 0 10px 0 12px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border-2, var(--border));
  box-shadow: 0 4px 16px rgba(16,24,40,0.10);
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-2); font-size: 13px; font-weight: 500;
  z-index: 49;
  cursor: pointer;
}
.lpv2-shortcuts-launcher:hover { background: var(--surface-2); }
.lpv2-shortcuts-launcher svg { color: var(--text-3); }

/* Shortcuts modal */
.lpv2-shortcuts-backdrop {
  position: fixed; inset: 0;
  background: rgba(9,9,11,0.55);
  z-index: 100;
  display: none;
}
.lpv2-shortcuts-backdrop.open { display: block; animation: lpv2-fade .12s ease-out; }
@keyframes lpv2-fade { from { opacity: 0; } to { opacity: 1; } }
.lpv2-shortcuts-modal {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 760px; max-width: 92vw; max-height: 82vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  z-index: 101;
  display: none;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(16,24,40,0.20);
}
.lpv2-shortcuts-modal.open { display: flex; animation: lpv2-fade .14s ease-out; }
.lpv2-shortcuts-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.lpv2-shortcuts-head h3 { font-size: 13.5px; font-weight: 600; margin: 0; }
.lpv2-shortcuts-head .head-meta {
  font-size: 11.5px; color: var(--text-3);
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.lpv2-shortcuts-head .close {
  margin-left: auto;
  width: 26px; height: 26px; border-radius: 5px;
  display: grid; place-items: center;
  color: var(--text-3); background: transparent; border: none; cursor: pointer;
}
.lpv2-shortcuts-head .close:hover { background: var(--surface-2); color: var(--text); }
.lpv2-shortcuts-body {
  padding: 16px 18px 18px;
  overflow-y: auto;
}
.lpv2-shortcuts-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}
.lpv2-shortcuts-section h4 {
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-3);
  margin: 0 0 6px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.lpv2-shortcuts-list { display: flex; flex-direction: column; gap: 2px; }
.lpv2-shortcut-row {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 6px; border-radius: 5px;
  font-size: 12.5px;
}
.lpv2-shortcut-row:hover { background: var(--surface-2); }
.lpv2-shortcut-row .desc { color: var(--text-2); }
.lpv2-shortcut-row .keys {
  margin-left: auto;
  display: inline-flex; gap: 3px; align-items: center;
}
.lpv2-shortcut-row .keys .plus,
.lpv2-shortcut-row .keys .then {
  color: var(--text-4); font-size: 12px; padding: 0 1px;
}
.lpv2-shortcuts-foot {
  padding: 10px 18px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-3);
  display: flex; align-items: center; gap: 8px;
  background: var(--surface-2);
}

/* ── Lifecycle-aware bulkbar (dark floating bar at viewport bottom) */
.lpv2-bulkbar {
  position: fixed; bottom: 16px;
  left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--surface);
  border-radius: 9px;
  padding: 6px 6px 6px 14px;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 12px 32px rgba(16,24,40,.18);
  font-size: 13px;
  z-index: 50;
  max-width: calc(100vw - 24px);
  width: max-content;
  white-space: nowrap;
  overflow-x: auto;
}
.lpv2-bulkbar::-webkit-scrollbar { display: none; }
.lpv2-bulkbar-count {
  font-weight: 600; padding-right: 10px;
  border-right: 1px solid #3F3F46; margin-right: 4px;
  white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.lpv2-bulkbar-count .small { font-weight: 400; opacity: .65; }
.lpv2-bulkbar-count .stage-chip {
  font-size: 10.5px; font-weight: 500;
  padding: 2px 7px; border-radius: 9px;
  background: rgba(96, 165, 250, 0.16);
  color: #93C5FD;
}
.lpv2-bulkbar-count .stage-chip.mixed {
  background: rgba(252, 211, 77, 0.16);
  color: #FCD34D;
}
.lpv2-bulkbar-btn {
  height: 28px; padding: 0 10px;
  background: transparent; color: var(--surface);
  border: 1px solid transparent; border-radius: 5px;
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; flex-shrink: 0;
  line-height: 1; cursor: pointer;
}
.lpv2-bulkbar-btn svg { flex-shrink: 0; }
.lpv2-bulkbar-btn:hover { background: #27272A; }
.lpv2-bulkbar-btn.primary { background: var(--accent); }
.lpv2-bulkbar-btn.primary:hover { background: var(--accent-hover, var(--accent-2, #1D4ED8)); }
.lpv2-bulkbar-btn.warn { color: #FCD34D; }
.lpv2-bulkbar-btn.warn:hover { background: #3F2D0C; }
.lpv2-bulkbar-btn.danger { color: #FCA5A5; }
.lpv2-bulkbar-btn.danger:hover { background: #3F1D1D; }
.lpv2-bulkbar-btn.disabled,
.lpv2-bulkbar-btn.disabled:hover {
  color: #71717A; background: transparent; cursor: not-allowed;
}
.lpv2-bulkbar-btn.disabled .lock-ico { color: #71717A; opacity: .85; margin-left: 1px; }
.lpv2-bulkbar-btn .lpv2-kbd {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.85);
  margin-left: 6px; height: 16px; min-width: 16px; padding: 0 4px;
}
.lpv2-bulkbar-btn.primary .lpv2-kbd {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.36);
  color: #fff;
}
.lpv2-bulkbar-btn.warn .lpv2-kbd { color: #FCD34D; border-color: rgba(252,211,77,0.35); }
.lpv2-bulkbar-btn.danger .lpv2-kbd { color: #FCA5A5; border-color: rgba(252,165,165,0.35); }
.lpv2-bulkbar-sep { width: 1px; height: 16px; background: #3F3F46; margin: 0 2px; flex-shrink: 0; }
.lpv2-bulkbar-close {
  width: 26px; height: 26px; border-radius: 5px;
  display: grid; place-items: center;
  background: transparent; color: #A1A1AA; border: none;
  flex-shrink: 0; cursor: pointer;
}
.lpv2-bulkbar-close:hover { background: #27272A; color: var(--surface); }

/* ── Responsive breakpoints */
@media (max-width: 1400px) {
  .lpv2-bulkbar-btn { padding: 0 8px; }
}
@media (max-width: 1100px) {
  .lpv2-bulkbar { max-width: calc(100vw - 16px); }
}
@media (max-width: 720px) {
  .lpv2-shortcuts-launcher { display: none; }
  .lpv2-shortcuts-modal { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .lpv2-shortcuts-grid { grid-template-columns: 1fr; }
  .lpv2-bulkbar-btn { padding: 0 6px; font-size: 11.5px; }
  .lpv2-bulkbar-btn .lpv2-kbd { display: none; }
}

/* ── Insights strip — fluid grid that fits 6-8 cards across.
   auto-fit + minmax avoids the 6+2 wrap that fixed columns produced. */
.ol-kpi-strip.ol-kpi-strip-v2 {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
@media (max-width: 1100px) {
  .ol-kpi-strip.ol-kpi-strip-v2 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 720px) {
  .ol-kpi-strip.ol-kpi-strip-v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* VERTICAL layout — icon top-left, value big, label small, sub muted.
   Horizontal (icon-left) was too cramped at ~180px wide because the
   body got <120px for label+value+sub, causing labels to wrap to 2
   lines and sub-text to truncate. Vertical gives the content full
   card width so nothing wraps unexpectedly. */
.ol-kpi-strip.ol-kpi-strip-v2 .ol-kpi-card {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  min-height: 90px;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.06s;
}
.ol-kpi-strip.ol-kpi-strip-v2 .ol-kpi-icon {
  width: 26px;
  height: 26px;
  font-size: 14px;
  margin-bottom: 2px;
}
.ol-kpi-strip.ol-kpi-strip-v2 .ol-kpi-body {
  width: 100%;
  flex: none;
}
.ol-kpi-strip.ol-kpi-strip-v2 .ol-kpi-label {
  font-size: 12px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ol-kpi-strip.ol-kpi-strip-v2 .ol-kpi-value {
  font-size: 22px;
  line-height: 1.1;
  margin-top: 1px;
}
.ol-kpi-strip.ol-kpi-strip-v2 .ol-kpi-sub {
  font-size: 10.5px;
  margin-top: 2px;
  opacity: 0.85;
}

/* Active state — when a KPI's filter is currently applied, the card
   gets a brand-blue accent + soft glow + a tiny ✓ chip so the operator
   sees at-a-glance which filter is driving the list. */
.ol-kpi-strip .ol-kpi-card.is-active {
  border-color: var(--accent, oklch(50% 0.18 264));
  box-shadow: 0 0 0 3px oklch(50% 0.18 264 / 0.14);
  background: oklch(98% 0.02 264);
}
.ol-kpi-strip .ol-kpi-card.is-active .ol-kpi-label {
  color: var(--accent, oklch(50% 0.18 264));
}
.ol-kpi-strip .ol-kpi-card.is-active .ol-kpi-active-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  background: var(--accent, oklch(50% 0.18 264));
  color: #fff;
  border-radius: 3px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}
.ol-kpi-strip .ol-kpi-card[role="button"]:active {
  transform: translateY(1px);
}

/* New purple accent for "Ready to ship" tile */
.ol-kpi-accent-purple .ol-kpi-icon {
  background: #F5F3FF; color: #7C3AED;
}

/* ── Vibrant KPI treatment (Orders list v2) ──────────────────────────────
   Mirrors the dashboard .dw-kpi family — gradient icon chip + colored top
   accent + soft top wash + tinted value — so the Orders list speaks the same
   VB colour language as the dashboard. Scoped to .ol-kpi-strip-v2, which is
   used only by the Orders list, so nothing else is affected. */
.ol-kpi-strip-v2 .ol-kpi-card {
  --c: #64748B;
  position: relative;
  overflow: hidden;
  border-top: 3px solid var(--c);
}
.ol-kpi-strip-v2 .ol-kpi-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 44px;
  background: linear-gradient(180deg, color-mix(in oklch, var(--c) 9%, transparent), transparent);
  pointer-events: none;
}
.ol-kpi-strip-v2 .ol-kpi-card > * { position: relative; }
.ol-kpi-strip-v2 .ol-kpi-icon {
  background: linear-gradient(135deg, color-mix(in oklch, var(--c) 70%, white), var(--c));
  color: #fff;
  box-shadow: 0 6px 15px -6px color-mix(in oklch, var(--c) 55%, transparent);
}
.ol-kpi-strip-v2 .ol-kpi-value {
  color: color-mix(in oklch, var(--c) 86%, var(--text));
}
.ol-kpi-strip-v2 .ol-kpi-accent-blue   { --c: #6366F1; }
.ol-kpi-strip-v2 .ol-kpi-accent-amber  { --c: #F59E0B; }
.ol-kpi-strip-v2 .ol-kpi-accent-rose   { --c: #F43F5E; }
.ol-kpi-strip-v2 .ol-kpi-accent-green  { --c: #10B981; }
.ol-kpi-strip-v2 .ol-kpi-accent-purple { --c: #8B5CF6; }
.ol-kpi-strip-v2 .ol-kpi-accent-muted  { --c: #94A3B8; }
.ol-kpi-strip-v2 .ol-kpi-accent-muted .ol-kpi-icon {
  background: var(--surface-2); color: var(--text-3); box-shadow: none; opacity: 1;
}
.ol-kpi-strip-v2 .ol-kpi-accent-muted .ol-kpi-value { color: var(--text); }

/* ── Suggestion banner above tabs */
.ol-suggest-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(90deg, var(--accent-soft), transparent 80%);
  border: 1px solid var(--accent-soft-2);
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 12.5px;
}
.ol-suggest-icon {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--accent); color: white;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.ol-suggest-text { flex: 1; min-width: 0; }
.ol-suggest-actions {
  display: inline-flex; gap: 6px;
}
.ol-suggest-close {
  width: 22px; height: 22px; border-radius: 5px;
  display: grid; place-items: center;
  color: var(--text-3);
  background: transparent; border: none; cursor: pointer;
}
.ol-suggest-close:hover { background: var(--surface-2); color: var(--text); }

/* ── Tab-strip-wrap v2 — flex parent so the Visible Tabs gear sticks
   to the right edge of the tab rail. The tab strip itself scrolls if
   the tabs overflow. CRITICAL: must override the base .tab-strip-wrap
   overflow-x: auto, otherwise the Visible Tabs popover (which is
   absolutely positioned BELOW the gear, extending past the wrap's
   bottom edge) gets clipped invisible. */
.tab-strip-wrap.tab-strip-wrap-v2 {
  display: flex; align-items: stretch;
  min-width: 0; max-width: 100%;
  overflow-x: visible; /* override base — let the popover spill */
  overflow-y: visible;
}
.tab-strip-wrap.tab-strip-wrap-v2 .tab-strip {
  flex: 1; min-width: 0;
  overflow-x: auto;     /* tab strip itself does the horizontal scroll */
  overflow-y: hidden;   /* CSS spec quirk: setting overflow-x:auto with
                           overflow-y unset implicitly clamps Y to auto,
                           so a vertical scrollbar appears even though
                           the row only needs to scroll horizontally. */
  scrollbar-width: none;/* Firefox + non-webkit — hide the visible bar. */
}
.tab-strip-wrap.tab-strip-wrap-v2 .tab-strip::-webkit-scrollbar {
  display: none;        /* Chrome / Safari / Edge */
  width: 0; height: 0;  /* belt-and-braces in case display:none isn't enough */
}
.tab-strip-wrap.tab-strip-wrap-v2 .lpv2-tab-settings-wrap {
  flex: 0 0 auto;
  display: flex; align-items: center;
  padding: 0 4px 0 6px;
  border-left: 1px solid var(--border);
  background: var(--bg);
}

/* ── Single-row page header v2 (matches preview-orders.html) */
.page-header.page-header-v2 {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 12px;
}
.page-header.page-header-v2 .page-title {
  font-size: 18px; line-height: 1.1; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.page-header.page-header-v2 .page-meta-inline {
  font-size: 13px; color: var(--text-3);
  padding-left: 12px; border-left: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.page-header.page-header-v2 .page-meta-inline strong { color: var(--text); font-weight: 600; }
.page-header.page-header-v2 .page-meta-inline .sep { color: var(--text-4); opacity: .6; }
.page-header.page-header-v2 .page-actions {
  margin-left: auto;
  display: flex; gap: 6px;
}

/* ── Table v3 — 9-column layout (Items / Next action / Rep added) ─────
   Pixel-matches preview-orders.html → table-layout:fixed with colgroup
   widths so the customer cell can never stretch to fill the row. */
.ol-table.ol-table-v3 { table-layout: fixed; min-width: 1100px; }
/* Rebalanced widths — measured live: rows with chat-icon need 172px in
   the Order cell to fit `#XXXXX [chat] Xh ago APP` on one line; rows
   without chat icon need 154px. 180px covers both with a small buffer.
   Status holds badge + 6 dots + sometimes a sub-line. The role-aware
   column (ol-cg-rolecol) carries balance/customer-health/ship/delivery
   info depending on Auth.getUser().role. Customer absorbs remainder. */
.ol-table.ol-table-v3 col.ol-cg-check    { width: 34px; }
.ol-table.ol-table-v3 col.ol-cg-num      { width: 230px; }
.ol-table.ol-table-v3 col.ol-cg-cust     { width: auto; }
.ol-table.ol-table-v3 col.ol-cg-items    { width: 90px; }
.ol-table.ol-table-v3 col.ol-cg-total    { width: 110px; }
.ol-table.ol-table-v3 col.ol-cg-status   { width: 160px; }
.ol-table.ol-table-v3 col.ol-cg-rolecol  { width: 170px; }
.ol-table.ol-table-v3 col.ol-cg-rolecol2 { width: 160px; }
.ol-table.ol-table-v3 col.ol-cg-kebab    { width: 36px; }

/* Secondary role column variants — same layout shape as the primary
   .ol-rcol-* family, just one more class so per-variant accents can
   differ (age-warn for stuck orders, cust-warn for dormant customers). */
.ol-rcol-age.is-warn    .ol-rcol-amt { color: var(--warning-text, #B45309); font-weight: 500; }
.ol-rcol-cust.is-warn   .ol-rcol-sub { color: var(--warning-text, #B45309); font-weight: 500; }

/* Rep avatar+name row inside the Order cell — used to live in its own
   column (~90px) which was wasted space. Now it's a compact 3rd line
   under #order + meta. Use display:flex (not inline-flex) so it sits
   on its own line below the meta row; slightly more muted than meta
   so it reads as auxiliary info. */
.ol-num-rep {
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--text-3);
}
.ol-num-rep .ol-rep-avatar {
  width: 16px; height: 16px;
  font-size: 8.5px; font-weight: 600;
  border-radius: 50%;
  background: var(--surface-3); color: var(--text-2);
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.ol-num-rep .ol-rep-name {
  line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Role-aware column cells — shared layout (amt + sub on two lines),
   per-variant accent colours. is-warn turns the sub-line orange. */
.ol-rcol-amt          { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.2; }
.ol-rcol-sub          { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.3; }
.ol-rcol-muted        { font-size: 13px; color: var(--text-4); }
.ol-rcol-balance.is-warn      .ol-rcol-sub,
.ol-rcol-health.is-warn       .ol-rcol-sub,
.ol-rcol-ship.is-warn         .ol-rcol-amt { color: var(--warning-text, #B45309); font-weight: 500; }
.ol-rcol-balance              .ol-rcol-amt { color: var(--text); }
.ol-rcol-balance.is-warn      .ol-rcol-amt { color: var(--danger-text, #B91C1C); }
.ol-rcol-progress {
  display: inline-block; vertical-align: middle;
  width: 60px; height: 4px; border-radius: 2px;
  background: var(--surface-3); overflow: hidden;
  margin-right: 6px;
}
.ol-rcol-progress-fill {
  height: 100%; background: var(--accent, #3a7bd5); border-radius: 2px;
  transition: width .25s ease;
}
.ol-rcol-progress-text { font-size: 12px; color: var(--text-3); }
.ol-cell-rolecol      { line-height: 1.3; }

/* Cell padding — tightened from 9px to 7px vertical for a more
   compact row. Was previously 9px 10px (preview spec). Combined
   with shrunken inter-line margins below, this brings the
   baseline row height down ~6-8px. */
.ol-table.ol-table-v3 thead th,
.ol-table.ol-table-v3 tbody td   { padding: 7px 10px; vertical-align: middle; }
.ol-table.ol-table-v3 thead th   { font-size: 10.5px; }
.ol-table.ol-table-v3 .ol-items-qty { font-size: 14px; }

/* Grid lines between columns — matches preview-orders.html. Each cell
   gets a 1px right border; the last column drops it so the table edge
   stays clean. Horizontal lines (border-bottom on td) already exist
   in the base .ol-table block. */
.ol-table.ol-table-v3 thead th,
.ol-table.ol-table-v3 tbody td               { border-right: 1px solid var(--border); }
.ol-table.ol-table-v3 thead th:last-child,
.ol-table.ol-table-v3 tbody td:last-child    { border-right: none; }

/* Order-cell meta line — keep inline with order # for a compact
   2-line stack (line 1 = #order + meta + pill, line 2 = rep).
   Column widened to 230px above so the PORTAL/EMAIL pill has room
   to sit on the same line without crowding the column border.
   `flex-wrap: wrap` is the safety net: if a future change extends
   line 1 content, the pill drops to its own line instead of
   silently truncating. NO `overflow: hidden` on the cell — the
   earlier `overflow:hidden + nowrap` combo silently clipped PORTAL
   to "PORTA" and EMAIL to "EMA". */
.ol-table.ol-table-v3 .ol-num      { flex-wrap: nowrap; min-width: 0; }
.ol-table.ol-table-v3 .ol-num-meta { flex-wrap: wrap; }

/* Sales-ref meta line: keep the hash + ref on ONE line and ellipsis the ref
   WITHIN the order-# column, so a long "EDR3/260618/001" no longer bleeds
   right into the customer cell and collides with the avatar. Full ref stays
   in the title tooltip. Scoped to .ol-num-ref so the wrapping time/source
   pills are untouched (no cell-level overflow:hidden — that clipped pills). */
.ol-table-v2 .ol-cell-num .ol-num-ref     { display: flex; flex-wrap: nowrap; min-width: 0; max-width: 100%; }
.ol-table-v2 .ol-cell-num .ol-num-ref-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tighter spacing inside the Status cell — drops 2px between
   badge and pipeline dots so aging rows feel less tall. v2 set
   this to 4px. */
.ol-table.ol-table-v3 .ol-cell-status .ol-mp-wrap { margin-top: 2px; }

/* col-/cell- width overrides from v1/v2 (lines ~6755+ + ~16170+) no
   longer apply once table-layout:fixed kicks in — colgroup widths win.
   We still need to neutralise the legacy min-widths so they don't push
   columns wider than colgroup spec on narrow viewports. */
.ol-table.ol-table-v3 th, .ol-table.ol-table-v3 td { min-width: 0; }

/* Next-action chip: subtle outlined pill that lights up on hover. Rendered
   as a real <button> when the status has a callable action, plain <span>
   when it's a muted closed/cancelled hint. Cursor + hover differ so it's
   obvious which variant is clickable. */
.ol-next-action {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11.5px; color: var(--text-2);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  transition: all .15s;
  cursor: default;
}
button.ol-next-action               { cursor: pointer; font-family: inherit; }
button.ol-next-action:hover         { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
button.ol-next-action.primary:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.ol-next-action.primary {
  background: var(--accent-soft); border-color: var(--accent-soft-2); color: var(--accent-text);
  font-weight: 500;
}
.ol-next-action.muted { color: var(--text-4); background: transparent; border-color: transparent; }
/* Default meta line is muted grey — contextual info ("Out with driver",
   "INV001345 · due 22 Jun", "Sent 3h ago · awaiting payment"). Only
   the `.ol-next-meta-warn` variant uses warning orange for aging /
   credit-hold scenarios. */
.ol-next-meta            { font-size: 10.5px; color: var(--text-3); margin-top: 2px; }
.ol-next-meta-warn       { font-size: 10.5px; color: var(--warning-text, #B45309); margin-top: 2px; font-weight: 500; }

/* Kebab menu (per-row) — matches preview-orders.html spec exactly.
   The <details><summary> SPA pattern uses these classes instead of
   .onv2-more-* so we get free section headers + danger styling. */
.ol-row-kebab.kebab-wrap[open] .ol-kebab-btn.kebab { background: var(--surface-3); color: var(--text); }
.kebab-menu {
  position: absolute;
  right: 4px; top: 32px;
  min-width: 220px;
  z-index: 30;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
  padding: 4px;
  font-size: 12.5px;
}
.kebab-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px;
  background: transparent; border: none;
  border-radius: 5px;
  font-size: 12.5px; color: var(--text);
  text-align: left; cursor: pointer;
}
.kebab-item:hover { background: var(--surface-2); }
.kebab-item.disabled,
.kebab-item:disabled            { color: var(--text-4); cursor: not-allowed; }
.kebab-item.disabled:hover,
.kebab-item:disabled:hover      { background: transparent; }
.kebab-item.danger              { color: var(--danger-text, #B91C1C); }
.kebab-item.danger:hover        { background: var(--danger-soft, #FEF2F2); }
.kebab-item.danger.disabled:hover { background: transparent; }
.kebab-sep                      { height: 1px; background: var(--border); margin: 4px 0; }
.kebab-section {
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-4);
  padding: 7px 10px 4px;
}

/* Rep avatar — small initials chip + first name */
.ol-rep-row { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-2); }
.ol-rep-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-3); color: var(--text-2);
  font-size: 12px; font-weight: 600;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}

/* Customer grade pill — small coloured tag next to the customer name in the
   Orders list. Each grade (V/A/B/C/D) gets its own colour from the lifecycle
   palette so the pill is recognisable at a glance. */
.ol-cust-grade {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 3px;
  vertical-align: middle;
  border: 1px solid;
  background: var(--surface-2);
  white-space: nowrap;
}
.ol-grade-V { background: #FEF3C7; color: #B45309; border-color: #FDE68A; }     /* gold-amber → VIP */
.ol-grade-A { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }     /* emerald → top tier */
.ol-grade-B { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }     /* blue → solid */
.ol-grade-C { background: #F4F4F5; color: #52525B; border-color: #E4E4E7; }     /* grey → average */
.ol-grade-D { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }     /* red → watch */

/* Aging stripe — orange box-shadow on left edge of aging rows */
.ol-table tbody tr.ol-row-aging {
  box-shadow: inset 3px 0 0 0 #D97706;
}
.ol-table tbody tr.ol-row-aging.row-kbd-focus {
  /* When keyboard-focused, accent stripe wins over aging stripe */
  box-shadow: inset 3px 0 0 0 var(--accent);
}

/* Responsive: hide secondary columns on smaller viewports */
@media (max-width: 1400px) { .ol-table.ol-table-v3 .hide-lg { display: none; } }
@media (max-width: 1100px) { .ol-table.ol-table-v3 .hide-md { display: none; } }
@media (max-width: 760px)  { .ol-table.ol-table-v3 .hide-xs { display: none; } }

/* ═══════════════════════════════════════════════════════════════════
   Order Command Center (handoff visibility) — top of order detail page
   Banner (what now) + 6-handoff timeline + dispatch readiness + docs.
   ═══════════════════════════════════════════════════════════════════ */
.occ {
  /* Severity quartet — theme-aware (light + dark); overridden per stage tone below. */
  --occ-accent:var(--accent); --occ-soft:var(--accent-soft); --occ-ink:var(--accent-text); --occ-ring:var(--accent-ring);
  border:1px solid var(--color-border);
  border-radius:12px; background:var(--surface); margin:0 0 16px; overflow:hidden;
}
.occ--ready    { --occ-accent:var(--success); --occ-soft:var(--success-soft); --occ-ink:var(--success-text); --occ-ring:var(--success-ring); }
.occ--progress { --occ-accent:var(--accent);  --occ-soft:var(--accent-soft);  --occ-ink:var(--accent-text);  --occ-ring:var(--accent-ring); }
.occ--info     { --occ-accent:var(--info);     --occ-soft:var(--info-soft);     --occ-ink:var(--info-text);     --occ-ring:var(--info-ring); }
.occ--wait     { --occ-accent:var(--warning);  --occ-soft:var(--warning-soft);  --occ-ink:var(--warning-text);  --occ-ring:var(--warning-ring); }
.occ--done     { --occ-accent:var(--success); --occ-soft:var(--success-soft); --occ-ink:var(--success-text); --occ-ring:var(--success-ring); }
.occ--danger   { --occ-accent:var(--danger);   --occ-soft:var(--danger-soft);   --occ-ink:var(--danger-text);   --occ-ring:var(--danger-ring); }

/* Hero banner — the single primary "what now" action. Themed by stage tone.
   Icon-less, exactly like the sub-cards: same flush-left text block + foot action
   row + soft tint + left stripe; distinguished ONLY by a slightly larger heading
   and the actor pill. Same padding + stripe width as .occ-shortfall so the hero
   and every alert below it read as one family. Container border stays neutral. */
.occ-banner { padding:14px 16px; background:var(--occ-soft); border-left:3px solid var(--occ-accent); }
.occ-banner-main { min-width:0; }
.occ-banner-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.occ-banner-title { font-size:15px; font-weight:700; color:var(--occ-ink); letter-spacing:-.01em; }
.occ-actor { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; padding:2px 8px; border-radius:999px; background:var(--surface); color:var(--occ-ink); border:1px solid var(--occ-ring); }
/* "Reship" badge — re-attempt after a failed delivery. Amber so it reads as a flag
   without alarming (the dispatch flow itself is the normal happy path). */
.occ-reship-badge { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 8px; border-radius:999px; background:color-mix(in oklch, var(--warning, #d4831a) 16%, transparent); color:var(--warning, #b45309); }
.occ-banner-msg { margin-top:4px; font-size:14px; color:var(--text-2); line-height:1.45; }

/* ── Smart "Record proof of delivery" modal ── */
.pod-ctx { background:var(--surface-2,#f6f7f9); border:1px solid var(--color-border); border-radius:10px; padding:11px 13px; margin-bottom:14px; }
.pod-ctx--reship { background:color-mix(in oklch, var(--warning,#d4831a) 7%, var(--surface-2,#f6f7f9)); border-color:color-mix(in oklch, var(--warning,#d4831a) 28%, var(--color-border)); }
.pod-ctx-top { display:flex; align-items:center; gap:8px; }
.pod-ctx-order { font-size:14px; font-weight:700; color:var(--text-1,#111); }
.pod-ctx-reship { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:1px 6px; border-radius:999px; background:color-mix(in oklch, var(--warning,#d4831a) 18%, transparent); color:var(--warning,#b45309); }
.pod-ctx-cust { font-size:14px; font-weight:600; color:var(--text-1,#111); margin-top:2px; }
.pod-ctx-meta { font-size:12.5px; color:var(--text-2,#6b7280); margin-top:3px; }
.pod-ctx-lines { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.pod-ctx-pill { display:inline-flex; align-items:center; gap:4px; font-size:11.5px; color:var(--text-2,#6b7280); background:var(--surface,#fff); border:1px solid var(--color-border); border-radius:6px; padding:2px 7px; }
.pod-lead { margin:0 0 4px; font-size:14px; color:var(--text-2,#6b7280); line-height:1.45; }
.pod-field { margin-top:13px; }
.pod-label { display:block; font-size:13px; font-weight:600; color:var(--text-2,#6b7280); margin-bottom:5px; }
.pod-req { color:var(--danger,#dc2626); font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.03em; margin-left:6px; }
.pod-opt { color:var(--text-3,#9ca3af); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.03em; margin-left:6px; }
.pod-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.pod-chip { font-size:13px; font-weight:500; padding:4px 10px; border-radius:999px; border:1px solid var(--color-border); background:var(--surface,#fff); color:var(--text-2,#6b7280); cursor:pointer; transition:border-color .12s, color .12s, background .12s; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pod-chip:hover { border-color:var(--accent,#4f46e5); color:var(--accent,#4f46e5); background:color-mix(in oklch, var(--accent,#4f46e5) 6%, transparent); }
.pod-chip.is-active { border-color:var(--accent,#4f46e5); color:var(--accent,#4f46e5); background:color-mix(in oklch, var(--accent,#4f46e5) 10%, transparent); font-weight:600; }
.pod-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px; padding:15px; border:1.5px dashed var(--color-border); border-radius:10px; cursor:pointer; transition:border-color .12s, background .12s; }
.pod-drop:hover { border-color:var(--accent,#4f46e5); background:color-mix(in oklch, var(--accent,#4f46e5) 4%, transparent); }
.pod-drop-ic { color:var(--accent,#4f46e5); display:inline-flex; }
.pod-drop-main { font-size:14px; font-weight:600; color:var(--text-1,#111); }
.pod-drop-sub { font-size:12px; color:var(--text-3,#9ca3af); }
.pod-preview { align-items:center; gap:12px; padding:10px; border:1px solid var(--color-border); border-radius:10px; background:var(--surface-2,#f6f7f9); }
.pod-preview-img { width:54px; height:54px; object-fit:cover; border-radius:8px; border:1px solid var(--color-border); flex:0 0 auto; }
.pod-preview-meta { flex:1 1 auto; min-width:0; }
.pod-preview-name { font-size:12.5px; font-weight:600; color:var(--text-1,#111); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pod-preview-size { font-size:12px; color:var(--text-3,#9ca3af); margin-top:1px; }
.pod-preview-x { flex:0 0 auto; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; border:1px solid var(--color-border); background:var(--surface,#fff); color:var(--text-2,#6b7280); cursor:pointer; }
.pod-preview-x:hover { color:var(--danger,#dc2626); border-color:var(--danger,#dc2626); }
.pod-tip { margin-top:14px; font-size:12px; color:var(--text-3,#6b7280); line-height:1.5; padding-top:11px; border-top:1px solid var(--color-border); }
/* .occ-banner-ctas now lives INSIDE .occ-banner-main as a foot action row, styled
   by the unified action-row block below (shared with .occ-sf-actions). */

/* ── Alert sub-cards — one unified anatomy, severity-driven ──────────────────
   Every secondary banner (short-pick, returns hold, reprint, stale invoice,
   cancelling) shares ONE structure with the hero: left accent stripe + soft tint
   + a coloured heading + muted body + a foot action row. Each variant only swaps
   the severity quartet (--sev / -soft / -text / -ring) so colour == meaning and
   the whole stack reads consistently. All tokens are theme-aware (light + dark). */
.occ-shortfall {
  --sev:var(--warning); --sev-soft:var(--warning-soft); --sev-text:var(--warning-text); --sev-ring:var(--warning-ring);
  padding:14px 16px; background:var(--sev-soft);
  border-top:1px solid var(--color-border); border-left:3px solid var(--sev);
}
.occ-sf-head { font-size:13.5px; font-weight:700; color:var(--sev-text); }
.occ-sf-list { margin:9px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.occ-sf-list li { font-size:12.5px; color:var(--text-2); }
.occ-sf-code { font-family:var(--font-mono, ui-monospace, monospace); font-weight:600; color:var(--sev-text); }
/* ── Structured detail line ───────────────────────────────────────────────────
   A crammed run-on ("CODE name — N units · in a carton — packer taking it out →
   shelf · picker") is unreadable. Split it into THREE scannable parts: a qty
   chip (how many), the product (what), and a plain-language status line (where it
   is now → where it's going · who). Shared by the returns + short-pick lists. */
.occ-sf-list .occ-ln { display:flex; gap:11px; align-items:flex-start; }
.occ-ln-qty { flex:0 0 auto; min-width:66px; text-align:center; font-size:11.5px; font-weight:700; color:var(--sev-text); background:var(--surface); border:1px solid var(--sev-ring); border-radius:999px; padding:3px 10px; }
.occ-ln-body { flex:1 1 auto; min-width:0; }
.occ-ln-title { font-size:14px; color:var(--text); font-weight:500; }
.occ-ln-title .occ-sf-code { margin-right:6px; font-weight:700; }
.occ-ln-meta { font-size:11.5px; color:var(--text-2); margin-top:2px; line-height:1.45; }
.occ-ln-meta strong { color:var(--text); font-weight:600; }
.occ-sf-note { margin-top:8px; font-size:11.5px; color:var(--text-2); line-height:1.5; }
.occ-sf-note a { color:var(--accent); text-decoration:none; font-weight:600; }
.occ-sf-note a:hover { text-decoration:underline; }
/* ── Unified banner action row + buttons ─────────────────────────────────────
   The hero CTAs (.occ-banner-ctas) and every sub-card's actions (.occ-sf-actions)
   share ONE treatment: a left-aligned, wrapping row at the FOOT of the banner
   where every button is a defined, BORDERED control — no borderless ghost reads
   as a plain link on the soft tint. Primary/danger keep their solid fill as the
   obvious next step; everything else is surface + border with a severity-tinted
   hover. Buttons therefore sit in the same place + look the same in every banner. */
.occ-banner-ctas,
.occ-sf-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px; }
.occ-banner-ctas .btn,
.occ-sf-actions .btn { border:1px solid var(--color-border); background:var(--surface); color:var(--text); }
.occ-banner-ctas .btn:hover { border-color:var(--occ-accent); background:var(--surface-hover); }
.occ-sf-actions .btn:hover  { border-color:var(--sev); background:var(--surface-hover); }
.occ-banner-ctas .btn-primary,
.occ-sf-actions .btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.occ-banner-ctas .btn-primary:hover,
.occ-sf-actions .btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }
.occ-banner-ctas .btn-danger,
.occ-sf-actions .btn-danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.occ-banner-ctas .btn-danger:hover,
.occ-sf-actions .btn-danger:hover { background:var(--danger-text); border-color:var(--danger-text); color:#fff; }
/* Variants — only the severity quartet changes. */
.occ-returns   { --sev:var(--danger);  --sev-soft:var(--danger-soft);  --sev-text:var(--danger-text);  --sev-ring:var(--danger-ring); }
.occ-liststale { --sev:var(--info);    --sev-soft:var(--info-soft);    --sev-text:var(--info-text);    --sev-ring:var(--info-ring); }
.occ-invstale  { --sev:var(--warning); --sev-soft:var(--warning-soft); --sev-text:var(--warning-text); --sev-ring:var(--warning-ring); }
.occ-cancelling{ --sev:var(--danger);  --sev-soft:var(--danger-soft);  --sev-text:var(--danger-text);  --sev-ring:var(--danger-ring); }

/* Timeline — horizontal stepper of the 6 handoffs (theme-aware) */
.occ-timeline { display:flex; padding:18px 18px 16px; overflow-x:auto; border-top:1px solid var(--color-border); }
.occ-tl-node { flex:1 1 0; min-width:118px; text-align:center; position:relative; padding:0 4px; }
.occ-tl-node:not(:last-child)::after { content:''; position:absolute; top:10px; left:calc(50% + 13px); right:calc(-50% + 13px); height:2px; background:var(--color-border); }
.occ-tl--done:not(:last-child)::after { background:var(--success); }
.occ-tl-dot { position:relative; z-index:1; width:22px; height:22px; border-radius:50%; background:var(--surface); border:2px solid var(--color-border); display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.occ-tl--done .occ-tl-dot { background:var(--success); border-color:var(--success); }
.occ-tl--current .occ-tl-dot { border-color:var(--occ-accent); box-shadow:0 0 0 4px var(--occ-ring); }
.occ-tl--current .occ-tl-dot::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--occ-accent); }
.occ-tl-label { font-size:13px; font-weight:600; color:var(--text); margin-top:7px; }
.occ-tl--pending .occ-tl-label { color:var(--text-3); }
.occ-tl-sub { font-size:12px; color:var(--text-2); margin-top:2px; line-height:1.3; }
.occ-tl-detail { display:inline-block; margin-top:4px; font-size:12px; font-weight:600; padding:1px 6px; border-radius:4px; background:var(--surface-3); color:var(--text-2); }

/* Readiness — ready to hand to the driver? (theme-aware) */
.occ-ready { margin:0 18px 16px; border:1px solid var(--color-border); border-radius:10px; overflow:hidden; }
.occ-ready.is-ready { border-color:color-mix(in oklch, var(--success) 45%, var(--color-border)); }
.occ-ready-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; background:var(--surface-2); flex-wrap:wrap; }
.occ-ready-title { font-size:14px; font-weight:700; color:var(--text); display:inline-flex; align-items:center; gap:6px; }
.occ-ready-flag { font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:5px; }
.occ-ready.is-ready .occ-ready-flag { color:var(--success); }
.occ-ready.not-ready .occ-ready-flag { color:var(--warning); }
.occ-rd-list { list-style:none; margin:0; padding:8px 12px; display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; }
.occ-rd-item { display:flex; align-items:center; gap:8px; font-size:12.5px; }
.occ-rd-item .occ-rd-ic { flex:0 0 auto; display:inline-flex; }
.occ-rd-item.ok  .occ-rd-ic { color:var(--success); }
.occ-rd-item.no  .occ-rd-ic { color:var(--danger); }
.occ-rd-item.adv .occ-rd-ic { color:var(--text-3); }
.occ-rd-item.no .occ-rd-lbl { color:var(--text); font-weight:600; }
.occ-rd-lbl { flex:1 1 auto; color:var(--text-2); }
.occ-rd-detail { font-size:12px; font-weight:600; color:var(--text-2); }
.occ-ready-actions { padding:0 12px 12px; }

/* Documents bundle (theme-aware) */
.occ-docs { display:flex; align-items:center; gap:8px; padding:0 18px 16px; flex-wrap:wrap; }
.occ-docs-lbl { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); margin-right:2px; }
.occ-doc { display:inline-flex; align-items:center; gap:6px; font-size:13px; padding:5px 10px; border-radius:8px; border:1px solid var(--color-border); background:var(--surface); cursor:pointer; font-family:inherit; }
.occ-doc--has { color:var(--text); }
.occ-doc--has:hover { border-color:var(--occ-accent); background:var(--occ-soft); }
.occ-doc--none { color:var(--text-3); cursor:default; }
.occ-doc-num { font-weight:700; }
.occ-doc--has .occ-doc-num { color:var(--occ-accent); }

@media (max-width:720px) {
  .occ-banner { flex-wrap:wrap; }
  .occ-banner-ctas { width:100%; }
  .occ-rd-list { grid-template-columns:1fr; }
  .occ-tl-node { min-width:108px; }
}

/* ═══ Multi-picker/packer release modal (Release for Pick & Pack) ═══ */
.rtp-modal2 { display:flex; flex-direction:column; gap:14px; }
.rtp-intro { font-size:14px; color:#475569; line-height:1.5; }
/* Re-release ("Release new lines"): banner showing the crew already on the order
   + highlight for their pre-selected rows + an "on order" tag. */
.rtp-crew-note { display:flex; gap:8px; align-items:flex-start; font-size:12.5px; line-height:1.45; color:#1e3a8a; background:#eff6ff; border:1px solid #bfdbfe; border-radius:9px; padding:9px 11px; }
.rtp-crew-note svg { flex:0 0 auto; margin-top:1px; color:#2563eb; }
.rtp-crew-role { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#64748b; font-weight:700; }
.rtp-wrow.is-assigned { background:#eff6ff; }
.rtp-assigned-tag { flex:0 0 auto; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#1d4ed8; background:#dbeafe; border-radius:999px; padding:2px 7px; }
.rtp-group { border:1px solid var(--color-border); border-radius:12px; padding:12px 14px; }
.rtp-group-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.rtp-group-head > span:first-child { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:#1e293b; }
.rtp-group-count { font-size:12px; font-weight:600; color:#3b82f6; background:#eff6ff; border-radius:999px; padding:2px 9px; white-space:nowrap; }
.rtp-chips-sel { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.rtp-chips-sel:empty { display:none; }
.rtp-selchip { display:inline-flex; align-items:center; gap:4px; font-size:13px; padding:3px 5px 3px 10px; border-radius:999px; background:#eff6ff; color:#1e3a8a; border:1px solid #bfdbfe; font-weight:500; }
.rtp-selchip button { border:0; background:none; cursor:pointer; font-size:15px; line-height:1; color:#64748b; padding:0 3px; border-radius:50%; }
.rtp-selchip button:hover { color:#dc2626; }
.rtp-search { display:flex; align-items:center; gap:8px; border:1px solid var(--color-border); border-radius:8px; padding:0 10px; margin-bottom:8px; color:#94a3b8; }
.rtp-search input { flex:1; border:0; outline:none; background:transparent; padding:8px 0; font-size:14px; color:#1e293b; }
.rtp-wlist { max-height:148px; overflow-y:auto; border:1px solid var(--color-border); border-radius:8px; }
.rtp-wlist-empty { padding:16px; text-align:center; color:#94a3b8; font-size:14px; }
.rtp-wrow { display:flex; align-items:center; gap:10px; padding:7px 11px; cursor:pointer; border-bottom:1px solid var(--color-border); font-size:14px; }
.rtp-wrow:last-child { border-bottom:0; }
.rtp-wrow:hover { background:#f8fafc; }
.rtp-wrow:has(input:checked) { background:#eff6ff; }
.rtp-wrow input { margin:0; flex:0 0 auto; }
.rtp-wrow-name { flex:1 1 auto; color:#1e293b; min-width:0; }
.rtp-wrow:has(input:checked) .rtp-wrow-name { font-weight:600; }
.rtp-wrow-role { font-size:12px; text-transform:uppercase; letter-spacing:.03em; color:#94a3b8; flex:0 0 auto; }
.rtp-load { flex:0 0 auto; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.rtp-load::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.rtp-load--free  { color:#16a34a; background:#f0fdf4; }
.rtp-load--light { color:#d97706; background:#fffbeb; }
.rtp-load--busy  { color:#dc2626; background:#fef2f2; }
.rtp-split-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; font-size:14px; }
.rtp-split-row label { display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.rtp-split-label { font-weight:600; color:#475569; }
.rtp-split-hint { font-size:11.5px; color:#94a3b8; margin-top:5px; }
.rtp-manual { margin-top:8px; max-height:180px; overflow:auto; }
.rtp-method-wrap { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rtp-method-pill { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--color-border); border-radius:8px; cursor:pointer; font-size:14px; }
.rtp-method-pill:has(input:checked) { border-color:#3b82f6; background:#eff6ff; font-weight:600; }
.rtp-method-pill input { margin:0; }
.rtp-manual-row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--color-border); }
.rtp-manual-prod { flex:1 1 auto; font-size:12.5px; min-width:0; }
.rtp-manual-pick { flex:0 0 160px; }
/* Print worker lists modal */
.rtp-print-wrap { display:flex; flex-direction:column; gap:16px; padding:0 10px; }
.rtp-print-orderbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; background:#f8fafc; border:1px solid var(--color-border); border-radius:10px; }
.rtp-print-orderno { font-weight:700; color:#1e293b; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.rtp-print-cust { font-size:14px; color:#64748b; padding-left:10px; border-left:1px solid var(--color-border); }
.rtp-print-intro { font-size:14px; color:#475569; line-height:1.5; }
.rtp-print-shead { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.rtp-print-count { background:#eff6ff; color:#3b82f6; border-radius:999px; padding:1px 8px; font-size:12px; font-weight:700; }
.rtp-print-card { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--color-border); border-radius:10px; margin-bottom:8px; transition:border-color .12s, box-shadow .12s; }
.rtp-print-card:hover { border-color:#bfdbfe; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.rtp-print-card:last-child { margin-bottom:0; }
.rtp-print-avatar { flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.rtp-print-avatar--picking { background:#e0e7ff; color:#4338ca; }
.rtp-print-avatar--packing { background:#dcfce7; color:#15803d; }
.rtp-print-info { flex:1 1 auto; display:flex; flex-direction:column; min-width:0; gap:1px; }
.rtp-print-name { font-weight:600; color:#1e293b; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rtp-print-meta { font-size:13px; color:#64748b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rtp-print-btn { flex:0 0 auto; }
.rtp-print-empty { display:flex; align-items:center; gap:8px; font-size:14px; color:#64748b; padding:14px; border:1px dashed var(--color-border); border-radius:10px; }
@media (max-width:560px) {
  .rtp-print-card { flex-wrap:wrap; }
  .rtp-print-btn { width:100%; margin-top:4px; }
}

/* ── Re-issue modal — per-worker print + reassign; stale workers highlighted, and
   Reassign stays disabled until the fresh list is printed (force-print rule). ── */
.rri-intro { font-size:14px; color:var(--text-2); line-height:1.5; margin-bottom:12px; }
.rri-intro strong { color:var(--text); }
.rri-card { display:flex; align-items:center; gap:11px; padding:7px 12px; border:1px solid var(--color-border); border-radius:10px; margin-bottom:6px; transition:background .15s, border-color .15s, opacity .15s; }
.rri-card:last-child { margin-bottom:0; }
.rri-card--stale { background:var(--warning-soft); border-color:color-mix(in oklch, var(--warning) 38%, var(--color-border)); border-left:3px solid var(--warning); }
.rri-card--ok { opacity:.9; }
.rri-actions { flex:0 0 auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rri-tag { display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:1px 7px; border-radius:999px; vertical-align:middle; margin-left:6px; white-space:nowrap; }
.rri-tag--stale { background:var(--surface); color:var(--warning-text); border:1px solid var(--warning-ring); }
.rri-tag--ok { background:var(--surface); color:var(--success-text); border:1px solid var(--success-ring); }
.rri-done { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--success); white-space:nowrap; }
.rri-armed { box-shadow:0 0 0 3px var(--accent-ring); }
@media (max-width:560px) {
  .rri-card { flex-wrap:wrap; }
  .rri-actions { width:100%; }
  .rri-actions .btn { flex:1 1 auto; }
}

/* ─────────────────────────────────────────────────────────────────────
   Warehouse queue order card (.woc) — SHARED by the Pick + Pack hubs.
   Compact, height-conscious, and balanced: identity left ↔ status right
   on top; key stats left ↔ worker pills right in the middle (uses the
   full card width instead of stacking everything on one side); a
   full-width progress bar (+ optional actions) along the bottom.
   ───────────────────────────────────────────────────────────────────── */
.woc { border: 1px solid var(--color-border); border-radius: 12px; padding: 12px 15px; cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.woc:hover { border-color: oklch(72% 0.10 240); box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.woc.is-mine { background: oklch(98.6% 0.016 240); border-color: oklch(83% 0.06 240); }
.woc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.woc-id { min-width: 0; flex: 1 1 auto; }
.woc-num { font-weight: 700; font-size: 15.5px; color: var(--color-text-1); display: inline-flex; align-items: center; gap: 7px; }
.woc-mine { font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #fff; background: oklch(60% 0.18 240); padding: 2px 6px; border-radius: 999px; }
.woc-cust { font-size: 12.5px; color: var(--color-text-2); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.woc-status { font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
.woc-status--todo { background: oklch(94% 0.02 250); color: oklch(42% 0.04 250); }
.woc-status--prog { background: oklch(94% 0.10 80); color: oklch(38% 0.16 70); }
.woc-status--done { background: oklch(93% 0.10 145); color: oklch(36% 0.15 145); }
.woc-mid { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 11px; flex-wrap: wrap; }
.woc-stats { display: flex; gap: 20px; }
.woc-stat { display: flex; flex-direction: column; line-height: 1.1; }
.woc-stat b { font-size: 16px; font-weight: 800; color: var(--color-text-1); font-variant-numeric: tabular-nums; }
.woc-stat span { font-size: 10.5px; color: var(--color-text-3); margin-top: 1px; }
.woc-stat i { font-style: normal; font-weight: 700; }
.woc-stat--key b { color: oklch(48% 0.17 248); }
.woc-short { color: oklch(50% 0.16 70); }
.woc-sealed { color: oklch(46% 0.16 145); }
/* "Your share" line on a queue card — what's assigned to ME vs the whole order */
.woc-yours { display: flex; align-items: center; gap: 6px; margin-top: 9px; padding: 6px 11px; background: oklch(97% 0.025 240); border: 1px solid oklch(86% 0.06 240); border-radius: 8px; font-size: 11.5px; font-weight: 600; color: oklch(43% 0.16 248); flex-wrap: wrap; }
.woc-yours strong { font-weight: 800; }
.woc-yours-of { color: var(--color-text-3); font-weight: 600; }
.woc-people { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.woc-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.woc-pill.is-empty { background: oklch(95% 0.015 250); color: var(--color-text-2); }
.woc-pill.is-progress { background: oklch(95% 0.07 80); color: oklch(40% 0.15 70); }
.woc-pill.is-done { background: oklch(94% 0.09 145); color: oklch(37% 0.15 145); }
.woc-pill-sub { opacity: .82; font-weight: 500; }
.woc-pill-sub::before { content: '·'; margin: 0 4px; opacity: .55; }
.woc-flag { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; padding: 5px 10px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: oklch(46% 0.20 25); background: oklch(96.5% 0.035 25); border: 1px solid oklch(90% 0.06 25); }
.woc-foot { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
.woc-bar { flex: 1 1 auto; height: 7px; border-radius: 999px; background: oklch(93% 0.012 250); overflow: hidden; }
.woc-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, oklch(62% 0.17 248), oklch(60% 0.16 210)); transition: width .35s ease; }
.woc-bar-fill.is-done { background: linear-gradient(90deg, oklch(60% 0.16 145), oklch(56% 0.15 130)); }
.woc-pct { font-weight: 800; font-size: 13px; color: var(--color-text-1); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 34px; text-align: right; }
.woc-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.woc-acts .btn-xs { min-height: 30px; border: 1px solid var(--color-border); background: var(--color-bg, #fff); border-radius: 8px; transition: border-color .12s, color .12s, background .12s; }
.woc-acts .btn-xs:hover { border-color: oklch(62% 0.15 145); color: oklch(45% 0.16 145); background: oklch(97% 0.03 145); }
@media (max-width: 600px) {
  .woc-mid { gap: 10px; }
  .woc-stats { gap: 14px; }
}

/* Slim hint bar — shared by Pick + Pack hubs (replaces the old oversized hero box). */
.wh-hint { display: flex; align-items: center; gap: 10px; margin: 2px 12px 12px; padding: 9px 13px; border-radius: 10px; border: 1px solid oklch(90% 0.035 240); background: oklch(98.5% 0.012 240); font-size: 12.5px; color: var(--color-text-2); line-height: 1.35; }
.wh-hint b { color: var(--color-text-1); font-weight: 700; }
.wh-hint-ico { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; background: oklch(62% 0.16 240); color: #fff; display: inline-flex; align-items: center; justify-content: center; }

/* Slim "ready to ship" banner (pick hub) — compact single row, was an oversized hero box. */
.wh-ready-banner { display: flex; align-items: center; gap: 11px; margin: 2px 12px 12px; padding: 9px 13px; border-radius: 11px; border: 1px solid oklch(83% 0.09 240); background: linear-gradient(135deg, oklch(97.5% 0.025 240), oklch(96% 0.045 225)); }
.wh-ready-ico { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: oklch(60% 0.18 240); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.wh-ready-txt { flex: 1 1 auto; min-width: 140px; font-size: 14px; color: var(--color-text-2); line-height: 1.35; }
.wh-ready-txt b { color: var(--color-text-1); font-weight: 700; }
.wh-ready-acts { display: flex; gap: 7px; flex-shrink: 0; flex-wrap: wrap; }
.wh-ready-view { background: #fff; border: 1px solid oklch(80% 0.09 240); color: oklch(42% 0.16 240); font-weight: 600; }
.wh-ready-view:hover { background: oklch(98% 0.02 240); border-color: oklch(66% 0.14 240); color: oklch(36% 0.17 240); }
@media (max-width: 560px) { .wh-ready-banner { flex-wrap: wrap; } .wh-ready-txt { flex-basis: 100%; } }

/* Pick hub KPI tiles — mirror the pack hub's stat tiles. */
.wh-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; }
.wh-kpi { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 12px; padding: 10px 14px; text-align: left; }
.wh-kpi-lab { font-size: 12px; color: var(--color-text-3); font-weight: 600; letter-spacing: .6px; text-transform: uppercase; }
.wh-kpi-val { font-size: 24px; font-weight: 700; color: var(--color-text-1); margin-top: 2px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wh-kpi-sub { font-size: 12px; color: var(--color-text-3); margin-top: 1px; }
.wh-kpi-btn { cursor: pointer; font: inherit; appearance: none; transition: border-color .15s, transform .08s, box-shadow .15s; }
.wh-kpi-btn:hover { border-color: oklch(70% 0.10 240); }
.wh-kpi-btn:active { transform: scale(.98); }
.wh-kpi-btn.is-active { background: oklch(96% 0.06 240); border-color: oklch(60% 0.18 240); box-shadow: 0 0 0 2px oklch(60% 0.18 240 / 0.18); }
.wh-kpi-btn.is-active .wh-kpi-val, .wh-kpi-btn.is-active .wh-kpi-lab { color: oklch(35% 0.18 240); }
@media (max-width: 768px) { .wh-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ── Add-to-delivery-run smart modal (ATR) ───────────────────────── */
.atr-ctx { display:flex; flex-wrap:wrap; gap:8px 18px; margin:8px 0 14px; padding:10px 12px; background:var(--surface-2); border:1px solid var(--color-border); border-radius:var(--radius-md); font-size:12.5px; color:var(--color-text-secondary); }
.atr-ctx-item { display:inline-flex; align-items:center; gap:6px; }
.atr-ctx-item b { color:var(--color-text); font-weight:600; }
.atr-seg { display:flex; gap:3px; background:var(--surface-3); border-radius:var(--radius-md); padding:3px; margin-bottom:14px; }
.atr-seg-btn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none; background:transparent; padding:9px 12px; border-radius:calc(var(--radius-md) - 2px); font-size:14px; font-weight:600; color:var(--color-text-secondary); cursor:pointer; transition:background .12s, color .12s, box-shadow .12s; }
.atr-seg-btn:hover { color:var(--color-text); }
.atr-seg-btn.active { background:var(--color-surface); color:var(--color-text); box-shadow:0 1px 3px rgba(0,0,0,.10); }
.atr-panel { animation:atr-fade .14s ease; }
@keyframes atr-fade { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
.atr-hint { font-size:11.5px; color:var(--text-3); margin:0 0 9px; display:flex; align-items:center; gap:5px; }
.atr-group-lbl { font-size:10.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:var(--text-3); margin:12px 2px 7px; }
.atr-group-lbl:first-child { margin-top:0; }
.atr-run-list { max-height:300px; overflow-y:auto; margin:0 -2px; padding:0 2px 2px; }
.atr-run-card { display:flex; align-items:flex-start; gap:11px; padding:11px 12px; border:1.5px solid var(--color-border); border-radius:var(--radius-md); margin-bottom:8px; cursor:pointer; transition:border-color .12s, background .12s; }
.atr-run-card:hover { border-color:var(--accent); }
.atr-run-card.is-suggested { background:var(--surface-2); }
.atr-run-card input[type=radio] { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.atr-run-card:has(input:checked) { border-color:var(--accent); background:var(--surface-2); box-shadow:0 0 0 2px var(--accent) inset; }
.atr-run-radio { flex:0 0 16px; width:16px; height:16px; border:2px solid var(--color-border); border-radius:50%; margin-top:2px; position:relative; transition:border-color .12s; }
.atr-run-card:has(input:checked) .atr-run-radio { border-color:var(--accent); }
.atr-run-card:has(input:checked) .atr-run-radio::after { content:''; position:absolute; inset:2.5px; border-radius:50%; background:var(--accent); }
.atr-run-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.atr-run-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.atr-run-top strong { font-size:13.5px; color:var(--color-text); }
.atr-run-sub { font-size:13px; color:var(--color-text-secondary); }
.atr-run-near { font-size:11.5px; color:var(--accent); font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.atr-badge { font-size:12px; font-weight:700; letter-spacing:.2px; color:var(--accent); background:var(--surface-3); border:1px solid var(--color-border); border-radius:20px; padding:2px 8px; }
.atr-empty { padding:20px 16px; text-align:center; color:var(--text-3); font-size:14px; background:var(--surface-2); border:1px dashed var(--color-border); border-radius:var(--radius-md); }
.atr-field { margin-bottom:11px; }
.atr-field label { display:block; font-size:13px; font-weight:600; color:var(--color-text-secondary); margin-bottom:4px; }
.atr-field input, .atr-field select { width:100%; }
.atr-note { font-size:12px; color:var(--text-3); margin-top:6px; line-height:1.5; }

/* ── Role Center (#/users → Roles & Permissions) ─────────────────── */
.rc-wrap { display:grid; grid-template-columns:248px minmax(0,1fr); gap:12px; align-items:start; }
.rc-side { padding:8px 0 0 !important; position:sticky; top:72px; max-height:calc(100vh - 96px); overflow-y:auto; }
.rc-dept { font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--text-3,#94a3b8); padding:10px 14px 4px; }
.rc-role { display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; text-align:left;
  padding:7px 14px; border:0; background:none; cursor:pointer; font-size:var(--text-sm); color:var(--color-text);
  border-left:3px solid transparent; }
.rc-role:hover { background:var(--surface-2); }
.rc-role.active { background:oklch(96% 0.03 255); border-left-color:var(--color-primary); font-weight:600; color:var(--color-primary); }
.rc-count { font-size:10.5px; background:var(--surface-3,#e2e8f0); color:var(--color-text-secondary); border-radius:999px; padding:1px 7px; }
.rc-role.active .rc-count { background:var(--color-primary); color:#fff; }
.rc-sec { padding:12px 16px 14px !important; margin-bottom:12px; }
.rc-sec-h { font-weight:var(--weight-semi); font-size:var(--text-sm); margin-bottom:10px; }
details.rc-sec summary::-webkit-details-marker { display:none; }
details.rc-sec summary { list-style:none; margin-bottom:0; }
details[open].rc-sec summary { margin-bottom:10px; }
.rc-chips { display:flex; flex-wrap:wrap; gap:8px; }
.rc-chip { border:1.5px solid var(--color-border); background:var(--surface-1,#fff); color:var(--color-text-secondary);
  border-radius:999px; padding:6px 13px; font-size:12.5px; cursor:pointer; transition:all .12s; }
.rc-chip:hover { border-color:var(--color-primary); }
.rc-chip.on { background:oklch(95% 0.04 255); border-color:var(--color-primary); color:var(--color-primary); font-weight:600; }
.rc-line { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:9px 0; border-top:1px solid var(--surface-2); cursor:pointer; }
.rc-line:first-of-type { border-top:0; }
.rc-line > span:first-child { font-size:var(--text-sm); font-weight:500; }
/* iOS-style switch */
.rc-switch { position:relative; flex:none; }
.rc-switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; z-index:1; }
.rc-switch i { display:block; width:40px; height:22px; border-radius:999px; background:var(--surface-3,#cbd5e1); transition:background .15s; position:relative; }
.rc-switch i::after { content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgb(0 0 0/.25); transition:left .15s; }
.rc-switch input:checked + i { background:var(--color-success,#16a34a); }
.rc-switch input:checked + i::after { left:20px; }
.rc-num { display:flex; align-items:center; gap:5px; font-size:var(--text-sm); color:var(--color-text-secondary); }
.rc-num input { width:92px; text-align:right; padding:5px 8px; border:1px solid var(--color-border); border-radius:6px; font-size:var(--text-sm); }
.rc-savebar { position:sticky; bottom:12px; z-index:30; margin-top:12px; display:flex; justify-content:space-between; align-items:center; gap:12px;
  background:var(--color-text,#0f172a); color:#fff; border-radius:10px; padding:10px 16px; box-shadow:0 8px 24px rgb(0 0 0/.25); }
.rc-savebar .btn-ghost { color:#fff; border-color:rgb(255 255 255/.35); }
@media (max-width: 760px) {
  .rc-wrap { grid-template-columns:1fr; }
  .rc-side { position:static; max-height:240px; }
}

/* ── Cash Custody wallet UX (#/my-cash + #/cash-flow) ─────────────── */
.cw-wrap { max-width: 980px; }
.cw-hero { padding: 20px 22px !important; border-left: 4px solid var(--color-primary); margin-bottom: 14px; }
.cw-hero-amt { font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.5px; }
.cw-hero-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.cw-hero-stats .ico, .cw-warn .ico { vertical-align: -2px; margin-right: 3px; }
.cw-warn { color: oklch(55% 0.15 60); }
.cw-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.cw-btn { flex: 1; min-width: 200px; padding: 12px 16px; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.cw-sec { padding: 14px 16px !important; margin-bottom: 14px; }
.cw-sec-h { font-weight: var(--weight-semi); font-size: var(--text-sm); margin-bottom: 8px; }
.cw-sec-h .ico { vertical-align: -2.5px; margin-right: 6px; color: var(--color-primary); }
.cw-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--surface-2); }
.cw-line:first-of-type { border-top: 0; }

/* how-it-works strip */
.cw-howto { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: var(--surface-2); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 12.5px; color: var(--color-text-secondary); }
.cw-step { display: inline-flex; align-items: center; gap: 6px; }
.cw-step .ico { color: var(--color-primary); }
.cw-step-n { width: 17px; height: 17px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cw-arrow { color: var(--text-3, #94a3b8); }

/* diary feed */
.cw-day { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3, #94a3b8); padding: 12px 0 4px; }
.cw-feed-item { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--surface-2); }
.cw-feed-item:first-of-type { border-top: 0; }
.cw-feed-ico { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cw-green { background: oklch(95% 0.05 150); color: oklch(45% 0.13 150); }
.cw-blue  { background: oklch(95% 0.04 255); color: var(--color-primary); }
.cw-amber { background: oklch(96% 0.06 80);  color: oklch(50% 0.13 70); }
.cw-grey  { background: var(--surface-2); color: var(--color-text-secondary); }
.cw-feed-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: var(--text-sm); }
.cw-feed-amt { font-weight: 600; font-size: var(--text-sm); flex: none; }
.cw-amt-in { color: oklch(45% 0.13 150); }
.cw-amt-out { color: var(--color-text-secondary); }
.cw-chip { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; margin-left: 4px; vertical-align: 1px; }
.cw-chip-wait { background: oklch(96% 0.06 80); color: oklch(48% 0.13 70); }
.cw-chip-ok   { background: oklch(95% 0.05 150); color: oklch(42% 0.13 150); }
.cw-chip-bad  { background: var(--surface-2); color: var(--color-text-secondary); }
.cw-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px; text-align: center; color: var(--color-text-secondary); font-size: var(--text-sm); }
.cw-empty .ico { color: var(--text-3, #94a3b8); }

/* accept zone (control room) */
.cw-accept-zone { margin-bottom: 6px; }
.cw-accept-card { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px !important; margin-bottom: 10px; border-left: 4px solid var(--color-warning, #f59e0b); }
.cw-accept-amt { font-size: 26px; font-weight: 700; }

/* pocket cards */
.cw-pockets { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 12px; }
.cw-pocket { padding: 14px 16px !important; }
.cw-pocket-me { border-left: 3px solid var(--color-primary); }
.cw-pocket-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cw-pocket-amt { font-size: 24px; font-weight: 700; margin-bottom: 2px; }

/* amount chips in modals */
.cw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.cw-amt-chip { border: 1.5px solid var(--color-border); background: var(--surface-1, #fff); border-radius: 999px; padding: 5px 13px; font-size: 12.5px; cursor: pointer; }
.cw-amt-chip:hover, .cw-amt-chip.on { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }

@media (max-width: 640px) {
  .cw-hero-amt { font-size: 34px; }
  .cw-actions { flex-direction: column; }
  .cw-btn { width: 100%; }
  .cw-accept-card { flex-direction: column; align-items: stretch; }
  .cw-accept-card .btn { width: 100%; }
}

/* cash-flow dashboard v3 */
.cw-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
.cw-kpi { padding: 12px 14px !important; }
.cw-kpi-amt { font-size: 22px; font-weight: 700; line-height: 1.2; }
.cw-kpi-accent { border-left: 3px solid var(--color-primary); }
.cw-click { cursor: pointer; border-radius: 8px; }
.cw-click:hover { background: var(--surface-2); }
.cw-info-amt { font-size: 32px; font-weight: 700; text-align: center; margin-top: 2px; }
.cw-info-row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid var(--surface-2); font-size: var(--text-sm); }
.cw-info-row > span:first-child { color: var(--color-text-secondary); flex: none; }
.cw-info-row > span:last-child { text-align: right; }
.cw-filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--surface-2); margin-bottom: 4px; }
@media (max-width: 640px) { .cw-kpis { grid-template-columns: repeat(2, 1fr); } }

/* cash dashboard v4: reconcile, chase, 14d bars */
.cw-recon { border-left: 4px solid oklch(60% 0.13 150); }
.cw-recon-off { border-left-color: var(--color-warning, #f59e0b); }
.cw-recon-ico { color: oklch(50% 0.13 150); }
.cw-recon-off .cw-recon-ico { color: oklch(55% 0.14 70); }
.cw-bars { display: flex; gap: 6px; align-items: flex-end; padding: 6px 2px 0; overflow-x: auto; }
.cw-bar-col { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; min-width: 26px; }
.cw-bar-pair { display: flex; gap: 2px; align-items: flex-end; height: 66px; }
.cw-bar { width: 9px; border-radius: 3px 3px 0 0; min-height: 2px; }
.cw-bar-in { background: oklch(70% 0.13 150); }
.cw-bar-bank { background: var(--color-primary); opacity: .75; }
.cw-bar-lbl { font-size: 9.5px; color: var(--text-3, #94a3b8); }
.cw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; vertical-align: 0; }
.cw-dot-in { background: oklch(70% 0.13 150); }
.cw-dot-bank { background: var(--color-primary); opacity: .75; }

/* ── Cash v5: premium wallet card + pipeline + toned KPIs ────────── */
.cwx-card { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 24px 18px;
  background: linear-gradient(135deg, oklch(28% 0.07 265) 0%, oklch(38% 0.12 280) 55%, oklch(46% 0.15 295) 100%);
  color: #fff; max-width: 480px; box-shadow: 0 10px 30px -12px oklch(35% 0.12 280 / .55), 0 2px 8px -2px oklch(30% 0.1 270 / .4); margin-bottom: 16px; }
.cwx-card-glow { position: absolute; top: -60px; right: -40px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, oklch(75% 0.12 300 / .25), transparent 65%); pointer-events: none; }
.cwx-card-top { display: flex; justify-content: space-between; align-items: center; }
.cwx-card-label { font-size: 12px; font-weight: 700; letter-spacing: 1.2px; opacity: .85; display: inline-flex; align-items: center; gap: 6px; }
.cwx-chipgfx { width: 34px; height: 24px; border-radius: 5px; background: linear-gradient(135deg, oklch(85% 0.08 90), oklch(70% 0.1 80)); position: relative; opacity: .9; }
.cwx-chipgfx i { position: absolute; left: 0; right: 0; height: 1px; background: oklch(55% 0.08 80 / .7); }
.cwx-chipgfx i:first-child { top: 8px; } .cwx-chipgfx i:last-child { top: 15px; }
.cwx-card-amt { font-size: 44px; font-weight: 750; letter-spacing: -1px; line-height: 1.1; margin: 14px 0 10px; font-variant-numeric: tabular-nums; }
.cwx-card-dec { font-size: 24px; font-weight: 650; opacity: .75; }
.cwx-card-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.cwx-stat { font-size: 11.5px; font-weight: 600; background: oklch(100% 0 0 / .14); border: 1px solid oklch(100% 0 0 / .18); border-radius: 999px; padding: 3px 10px; display: inline-flex; align-items: center; gap: 5px; backdrop-filter: blur(2px); }
.cwx-stat-warn { background: oklch(80% 0.14 80 / .25); border-color: oklch(85% 0.12 85 / .4); }
.cwx-card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 13px; opacity: .85; }
.cwx-card-brand { font-weight: 800; letter-spacing: 1.5px; font-size: 12px; }

.cwx-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; max-width: 640px; margin-bottom: 16px; }
.cwx-action { display: flex; align-items: center; gap: 11px; padding: 13px 14px; background: var(--surface-1, #fff); border: 1px solid var(--color-border); border-radius: 14px; cursor: pointer; text-align: left; transition: transform .12s ease, box-shadow .12s ease, border-color .12s; }
.cwx-action:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px oklch(40% 0.1 270 / .35); border-color: var(--color-primary); }
.cwx-action-ico { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cwx-ico-blue  { background: oklch(94% 0.04 255); color: var(--color-primary); }
.cwx-ico-amber { background: oklch(96% 0.06 80);  color: oklch(50% 0.13 70); }
.cwx-ico-green { background: oklch(94% 0.06 150); color: oklch(42% 0.13 150); }
.cwx-ico-slate { background: var(--surface-2); color: var(--color-text-secondary); }
.cwx-ico-red   { background: oklch(95% 0.04 25);  color: oklch(50% 0.16 25); }
.cwx-action-txt { display: flex; flex-direction: column; line-height: 1.25; }
.cwx-action-txt strong { font-size: 13.5px; }
.cwx-action-txt span:last-child { font-size: 12px; color: var(--color-text-secondary); }

.cwx-pipeline { display: flex; align-items: stretch; gap: 6px; padding: 16px 18px !important; margin-bottom: 12px; overflow-x: auto; }
.cwx-stage { flex: 1; min-width: 130px; text-align: center; padding: 4px 6px; }
.cwx-stage-ico { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.cwx-stage-val { font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cwx-stage-lbl { font-size: 13px; font-weight: 650; margin-top: 1px; }
.cwx-stage-sub { font-size: 10.5px; color: var(--color-text-secondary); margin-top: 1px; }
.cwx-pipe-arrow { align-self: center; color: var(--text-3, #94a3b8); flex: none; }

.cwx-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; margin-bottom: 10px; }
.cwx-kpi { display: flex; align-items: center; gap: 10px; background: var(--surface-1, #fff); border: 1px solid var(--color-border); border-radius: 12px; padding: 11px 13px; transition: transform .12s, box-shadow .12s; }
.cwx-kpi:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -10px oklch(40% 0.08 270 / .3); }
.cwx-kpi-ico { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cwx-kpi--blue  .cwx-kpi-ico { background: oklch(94% 0.04 255); color: var(--color-primary); }
.cwx-kpi--amber .cwx-kpi-ico { background: oklch(96% 0.06 80);  color: oklch(50% 0.13 70); }
.cwx-kpi--green .cwx-kpi-ico { background: oklch(94% 0.06 150); color: oklch(42% 0.13 150); }
.cwx-kpi--red   .cwx-kpi-ico { background: oklch(95% 0.04 25);  color: oklch(50% 0.16 25); }
.cwx-kpi--slate .cwx-kpi-ico { background: var(--surface-2); color: var(--color-text-secondary); }
.cwx-kpi-amt { font-size: 17.5px; font-weight: 750; font-variant-numeric: tabular-nums; line-height: 1.15; }
.cwx-kpi-lbl { font-size: 10.5px; color: var(--color-text-secondary); }

.cwx-pocket { border-top: 3px solid transparent; transition: transform .12s, box-shadow .12s; }
.cwx-pocket:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px oklch(40% 0.1 270 / .35); }
.cwx-pocket--blue  { border-top-color: var(--color-primary); }
.cwx-pocket--green { border-top-color: oklch(70% 0.13 150); }
.cwx-pocket--slate { border-top-color: oklch(70% 0.02 260); }
.cwx-avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex: none; }
.cwx-avatar--blue  { background: oklch(93% 0.05 255); color: var(--color-primary); box-shadow: 0 0 0 2px oklch(85% 0.07 255); }
.cwx-avatar--green { background: oklch(93% 0.06 150); color: oklch(40% 0.13 150); box-shadow: 0 0 0 2px oklch(85% 0.08 150); }
.cwx-avatar--slate { background: var(--surface-2); color: var(--color-text-secondary); box-shadow: 0 0 0 2px var(--color-border); }

.cw-feed-item { transition: background .1s; border-radius: 10px; padding: 9px 8px; margin: 0 -8px; }
.cw-feed-ico { width: 36px; height: 36px; }
.cw-feed-amt { font-variant-numeric: tabular-nums; font-size: 14px; }
.cw-amt-in { color: oklch(42% 0.13 150); }

@media (max-width: 640px) {
  .cwx-card { max-width: none; }
  .cwx-card-amt { font-size: 38px; }
  .cwx-pipeline { gap: 2px; padding: 12px 10px !important; }
  .cwx-pipe-arrow { display: none; }
  .cwx-stage { min-width: 0; }
}

/* ── Cash v7: bank-run, alerts, denoms, week, comments, responsive ── */
.cw-bankrun { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px !important; margin-bottom: 12px; border-left: 4px solid var(--color-warning, #f59e0b); font-size: var(--text-sm); }
.cw-bankrun .ico { color: oklch(55% 0.14 70); flex: none; }
.cw-bankrun span { flex: 1; min-width: 200px; }
.cw-alerts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cw-alert { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 5px; }
.cw-alert-warn { background: oklch(96% 0.06 80); color: oklch(45% 0.13 70); border: 1px solid oklch(88% 0.08 80); }
.cw-alert-info { background: oklch(95% 0.03 255); color: var(--color-primary); border: 1px solid oklch(88% 0.05 255); }
.cw-alert-danger { background: oklch(95% 0.04 25); color: oklch(45% 0.16 25); border: 1px solid oklch(88% 0.07 25); }
.cw-chip-disp { background: oklch(95% 0.04 25); color: oklch(45% 0.16 25); }
.cw-red { background: oklch(95% 0.04 25); color: oklch(50% 0.16 25); }
.cw-accept-btns { flex: none; display: flex; gap: 8px; align-items: center; }
.cw-denoms { margin-top: 10px; border: 1px dashed var(--color-border); border-radius: 10px; padding: 8px 12px; }
.cw-denoms summary { cursor: pointer; color: var(--color-text-secondary); }
.cw-denoms summary .ico { vertical-align: -2px; margin-right: 4px; }
.cw-denom-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin: 10px 0 6px; }
.cw-denom-grid label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--color-text-secondary); font-weight: 600; }
.cw-denom-grid input { width: 100%; border: 1px solid var(--color-border); border-radius: 8px; padding: 6px 8px; text-align: center; font-size: 14px; }
.cw-week-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.cw-week-amt { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.cw-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cw-comments { border-top: 1px solid var(--surface-2); margin-top: 12px; }
.cw-comment { font-size: var(--text-sm); padding: 6px 0; border-bottom: 1px solid var(--surface-2); }
.cw-search { width: 170px; }

/* responsive — tablets */
@media (max-width: 900px) {
  .cw-two-col { grid-template-columns: 1fr; }
  .cwx-kpis { grid-template-columns: repeat(3, 1fr); }
  .cwx-pipeline { flex-wrap: wrap; justify-content: center; }
  .cwx-stage { flex: 1 1 40%; min-width: 130px; }
  .cwx-pipe-arrow { display: none; }
}
/* responsive — phones */
@media (max-width: 640px) {
  .cw-wrap .page-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .cw-wrap .page-actions { flex-wrap: wrap; }
  .cwx-kpis { grid-template-columns: repeat(2, 1fr); }
  .cwx-actions { grid-template-columns: 1fr 1fr; }
  .cwx-action-eod { grid-column: 1 / -1; }
  .cw-pockets { grid-template-columns: 1fr 1fr; }
  .cw-filterbar { flex-direction: column; align-items: stretch; }
  .cw-filterbar .form-input, .cw-search { width: 100% !important; }
  .cw-line { flex-wrap: wrap; }
  .cw-feed-amt { font-size: 14px; }
  .cw-bars { gap: 3px; }
  .cw-bar-col { min-width: 18px; }
  .cwx-stage { flex: 1 1 45%; }
}
@media (max-width: 430px) {
  .cw-pockets { grid-template-columns: 1fr; }
  .cwx-card-amt { font-size: 34px; }
  .cwx-actions { grid-template-columns: 1fr; }
  .cwx-kpis { grid-template-columns: repeat(2, 1fr); }
  .cw-accept-card { flex-direction: column; align-items: stretch; }
  .cw-accept-btns { width: 100%; }
  .cw-accept-btns .btn { flex: 1; }
}

/* cash v7 polish: rank badges, zero stages, zero-day chart dots */
.cw-rank { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--surface-2); color: var(--color-text-secondary); flex: none; }
.cw-rank-1 { background: oklch(90% 0.08 85); color: oklch(45% 0.1 80); }
.cw-rank-2 { background: oklch(93% 0.01 260); color: oklch(50% 0.02 260); }
.cw-rank-3 { background: oklch(92% 0.05 55); color: oklch(48% 0.09 55); }
.cwx-stage-zero { opacity: .45; }
.cwx-stage-zero .cwx-stage-val { font-weight: 600; }
.cw-bar-none { width: 9px; height: 3px; border-radius: 2px; background: var(--surface-2); align-self: flex-end; }

/* cash pages — unified 14px section rhythm + alignment polish */
.cw-wrap .cwx-card, .cw-wrap .cwx-actions { margin-bottom: 14px; }
.cw-wrap .cw-bankrun, .cw-wrap .cwx-pipeline { margin-bottom: 14px; }
.cw-wrap .cwx-kpis { margin-bottom: 8px; }
.cw-wrap .cw-two-col { margin-bottom: 14px; }
.cw-wrap .cw-pockets { margin-bottom: 14px; }
.cw-wrap .cw-alerts { margin-bottom: 14px; }
.page-actions .cw-amt-chip { padding: 6px 14px; }              /* match 30px btn-sm height */
.cw-sec .cw-day:first-of-type { padding-top: 4px; }            /* no dead air under section title */
.cw-sec-h + .cw-line { border-top: 0; }                        /* first row flush under heading */
.cwx-pipeline { justify-content: space-evenly; }
.cwx-stage { max-width: 200px; }                               /* stages don't drift apart on wide screens */

/* cash pages width: wallet = centered column, dashboard = full bleed */
.cw-wrap { margin-left: auto; margin-right: auto; }
.cw-wrap-wide { max-width: none; }

/* My Cash — 2-column hero (card+actions left, Today snapshot right) */
.mc-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 16px; align-items: stretch; margin-bottom: 14px; }
.mc-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mc-left .cwx-card { max-width: none; margin-bottom: 0; }
.mc-left .cwx-actions { margin-bottom: 0; max-width: none; }
.mc-today { display: flex; flex-direction: column; padding: 16px 18px; }
.mc-today-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.mc-trow { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--surface-2); }
.mc-trow:last-child { border-bottom: 0; }
.mc-tico { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mc-tlbl { flex: 1; font-size: 13.5px; }
.mc-tval { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14px; }
.mc-today-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: baseline; justify-content: space-between; border-top: 2px solid var(--color-border); }
.mc-today-hand { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; }
.mc-today-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 8px; color: oklch(55% 0.12 150); }
.mc-today-last { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--surface-2); }
@media (max-width: 900px) { .mc-hero { grid-template-columns: 1fr; } }

/* My Cash v3 — full 2-column page: card+actions+stats rail | diary feed beside it
   (kills the tall vertical stack → fits ~1 viewport, minimal scroll) */
.mc-grid { display: grid; grid-template-columns: 384px minmax(0, 1fr); gap: 16px; align-items: start; }
.mc-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mc-rail .cwx-card { max-width: none; margin-bottom: 0; }
.mc-rail .cwx-actions { grid-template-columns: 1fr 1fr; max-width: none; margin-bottom: 0; gap: 10px; }
.mc-rail .cwx-action { padding: 11px 12px; }           /* tighter tiles → shorter rail, less scroll */
.mc-feed { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mc-feed .cw-sec, .mc-feed .cw-accept-zone { margin: 0; }
.mc-diary { margin: 0; }

/* compact combined Today + This-week panel (replaces the tall Today aside + full-width week strip) */
.mc-stats { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.mc-stats-grp { display: flex; flex-direction: column; gap: 7px; }
.mc-stats-grp + .mc-stats-grp { border-top: 1px solid var(--surface-2); padding-top: 11px; }
.mc-stats-h { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--color-text-secondary); display: flex; align-items: center; gap: 8px; }
.mc-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mc-stat { display: flex; flex-direction: column; gap: 1px; }
.mc-stat-lbl { font-size: 12px; color: var(--color-text-secondary); }
.mc-stat-val { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mc-stat-zero { color: var(--text-3, #94a3b8); font-weight: 600; }
.mc-stats-last { padding-top: 4px; }

/* feed gets a gentle cap so a long history scrolls inside, page stays ~1 screen.
   The header is a fixed flex item; the feed lives in ONE scroll wrapper
   (.mc-diary-scroll). Earlier this made EVERY row a flex child that shrank below
   its content height → rows + day headers overlapped. The wrapper keeps the rows
   in normal block flow (natural height, no overlap) and only it scrolls. */
@media (min-width: 901px) {
  .mc-diary { max-height: calc(100vh - 200px); display: flex; flex-direction: column; }
  .mc-diary .cw-sec-h, .mc-diary .mc-diary-chips { flex: none; }
  .mc-diary-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
}
.mc-diary-chips { margin: 2px 0 8px; }
@media (max-width: 900px) {
  .mc-grid { grid-template-columns: 1fr; }
  .mc-rail .cwx-actions { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .mc-rail .cwx-actions { grid-template-columns: 1fr; }
}

/* ── Credit Control v3 ──────────────────────────────────────────── */
.cc-aging { display:flex; flex-direction:column; gap:8px; }
.cc-aging-bar { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--surface-2); }
.cc-aging-seg { height:100%; transition:width .3s; }
.cc-aging-seg.s-current { background:var(--color-success,#16a34a); }
.cc-aging-seg.s-1   { background:#eab308; }
.cc-aging-seg.s-2   { background:#f59e0b; }
.cc-aging-seg.s-3   { background:#f97316; }
.cc-aging-seg.s-4   { background:var(--color-error,#dc2626); }
.cc-aging-legend { display:flex; flex-wrap:wrap; gap:14px; }
.cc-aging-leg { display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; padding:2px 4px; border-radius:6px; }
.cc-aging-leg:hover { background:var(--surface-2); }
.cc-aging-leg.is-active { background:color-mix(in oklch, var(--accent) 12%, transparent); }
.cc-aging-dot { width:10px; height:10px; border-radius:3px; flex:none; }
.cc-aging-leg .lab { color:var(--text-2); }
.cc-aging-leg .val { font-weight:600; font-variant-numeric:tabular-nums; }

/* in-row mini aging bar */
.cc-rowbar { display:flex; height:8px; width:120px; border-radius:4px; overflow:hidden; background:var(--surface-2); }
.cc-rowbar i { height:100%; display:block; }

/* utilisation pill */
.cc-util { display:inline-flex; align-items:center; gap:6px; }
.cc-util-track { width:56px; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.cc-util-fill { height:100%; display:block; }
.cc-util-num { font-size:13px; font-variant-numeric:tabular-nums; }

/* chase-stage badges */
.cc-stage { font-size:12px; font-weight:700; padding:1px 6px; border-radius:999px; text-transform:uppercase; letter-spacing:.3px; }
.cc-stage.r1 { background:color-mix(in oklch,#3b82f6 16%,transparent); color:#2563eb; }
.cc-stage.r2 { background:color-mix(in oklch,#f59e0b 18%,transparent); color:#b45309; }
.cc-stage.fn { background:color-mix(in oklch,#dc2626 16%,transparent); color:#b91c1c; }

/* confidence dots */
.cc-conf { font-size:12px; font-weight:600; }
.cc-conf.high { color:var(--color-success,#16a34a); }
.cc-conf.medium { color:#b45309; }
.cc-conf.low { color:var(--color-error,#dc2626); }

/* Severity status pill for credit-control KPI cards — no trend arrow, colour
   reflects whether the metric is a concern (NOT good/bad-implying up/down). */
.kpi-pill { display:inline-flex; align-items:center; gap:4px; font-size:var(--text-xs); font-weight:var(--weight-semi); padding:2px 8px; border-radius:var(--r-full); }
.kpi-pill.danger { color:var(--danger-text);  background:var(--danger-soft); }
.kpi-pill.warn   { color:#b45309;             background:color-mix(in oklch,#f59e0b 16%,transparent); }
.kpi-pill.ok     { color:var(--success-text); background:var(--success-soft); }
.kpi-pill.muted  { color:var(--text-3);       background:var(--surface-3); }

/* ── Out-of-Stock reorder table — grid lines + fixed column widths ── */
/* auto layout (not fixed) so extra width on ultra-wide screens distributes
   proportionally across columns instead of dumping it all into Product. */
#oosTable { table-layout: auto; width: 100%; }
#oosTable th, #oosTable td { border-right: 1px solid var(--border); vertical-align: middle; padding: 5px 10px; }
#oosTable th:last-child, #oosTable td:last-child { border-right: 0; }
#oosTable thead th { white-space: nowrap; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
#oosTable tbody td { line-height: 1.3; }
#oosTable .oos-c-chk   { width: 34px;  text-align: center; }
#oosTable .oos-c-img   { width: 48px; }
#oosTable .oos-c-prod  { max-width: 420px; }
#oosTable .oos-c-sup   { width: 16%; min-width: 150px; }
#oosTable .oos-c-stock { width: 9%;  min-width: 96px;  text-align: right; }
#oosTable .oos-c-reord { width: 11%; min-width: 124px; text-align: right; }
#oosTable .oos-c-cost  { width: 9%;  min-width: 92px;  text-align: right; }
#oosTable .oos-c-sugg  { width: 10%; min-width: 108px; text-align: right; }
#oosTable .oos-c-act   { width: 84px;  text-align: right; }
#oosTable .oos-c-prod .fw-med { line-height: 1.25; word-break: break-word; }
#oosTable .dthumb { width: 34px; height: 34px; }
#oosTable .oos-c-act .d-flex { gap: 4px; justify-content: flex-end; }
.oos-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; line-height: 1.25; }
.oos-pack { font-size: 12px; color: var(--text-3); white-space: nowrap; }


/* === transfers cockpit === */
/* ── /transfers cockpit — only NEW page-specific tokens + the age pill.
   Everything else reuses .vkpi*, .inv-insights, .inv-tabs, .whs-drawer,
   .whs-d-*, .whs-kv*, .card, .badge-*. Token-based so dark mode re-mixes. */
.tr-age {
  display:inline-block; font-size:12px; font-weight:700; line-height:1;
  padding:3px 7px; border-radius:999px; white-space:nowrap;
}
.tr-age-emerald { color:#047857; background:color-mix(in oklch, #10b981 16%, var(--surface)); }
.tr-age-sky     { color:#0369a1; background:color-mix(in oklch, #0ea5e9 16%, var(--surface)); }
.tr-age-amber   { color:#b45309; background:color-mix(in oklch, #f59e0b 18%, var(--surface)); }
.tr-age-rose    { color:#be123c; background:color-mix(in oklch, #f43f5e 18%, var(--surface)); }

/* fill colours used by the aging-ladder + lane bars */
:root { --tr-emerald:#10b981; --tr-sky:#0ea5e9; --tr-amber:#f59e0b; --tr-rose:#f43f5e; --tr-indigo:#6366f1; }
[data-theme="dark"] {
  --tr-emerald:#34d399; --tr-sky:#38bdf8; --tr-amber:#fbbf24; --tr-rose:#fb7185; --tr-indigo:#818cf8;
}
[data-theme="dark"] .tr-age-emerald { color:#6ee7b7; background:color-mix(in oklch, #10b981 26%, var(--surface)); }
[data-theme="dark"] .tr-age-sky     { color:#7dd3fc; background:color-mix(in oklch, #0ea5e9 26%, var(--surface)); }
[data-theme="dark"] .tr-age-amber   { color:#fcd34d; background:color-mix(in oklch, #f59e0b 28%, var(--surface)); }
[data-theme="dark"] .tr-age-rose    { color:#fda4af; background:color-mix(in oklch, #f43f5e 28%, var(--surface)); }

/* === returns cockpit === */
/* Returns cockpit — filter chips (only NEW class; everything else reuses
   .vkpi-*, .inv-insights, .inv-tabs, .whs-drawer/.whs-d-*, .badge-*). */
.rtnk-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;font-size:13px;font-weight:500;line-height:1;
  border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--text-2);cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.rtnk-chip svg{width:13px;height:13px}
.rtnk-chip:hover{background:var(--surface-2);color:var(--text)}
.rtnk-chip.is-on{
  background:color-mix(in oklch, #6366f1 12%, var(--surface));
  border-color:color-mix(in oklch, #6366f1 45%, var(--border));
  color:color-mix(in oklch, #6366f1 70%, var(--text));
}


/* === batches cockpit === */
/* ── /batches cockpit — page-specific only (reuses .vkpi-*, .whs-*, .inv-tabs,
   .inv-tab, .inv-insights, .badge-*, .whs-occ-* fill colours) ───────── */

.btc-page { margin: -12px -16px -12px; padding: 12px 16px 28px; }

/* Insights cards */
.btc-insights { margin: var(--sp-3) 0; }
.btc-ins-card { padding: var(--sp-3); }
.btc-ins-title { display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--text-2); margin-bottom: 10px; }
.btc-ins-title svg { width: 15px; height: 15px; }
.btc-ins-foot { margin-top: 8px; }

/* FEFO radar rows */
.btc-radar-row { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: 8px;
  width: 100%; background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left; }
.btc-radar-row:hover .btc-radar-l { color: var(--text); }
.btc-radar-l { font-size: .76rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btc-radar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.btc-radar-fill { display: block; height: 100%; border-radius: 999px; }
.btc-radar-v { font-size: .8rem; font-weight: 600; color: var(--text); text-align: right; }

/* Status mix stacked bar + legend (reuses .whs-occ-* as fills) */
.btc-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.btc-bar-seg { display: block; height: 100%; }
.btc-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.btc-leg { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--text-2); }
.btc-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* Top-at-risk rows */
.btc-risk-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  width: 100%; background: none; border: 0; border-radius: var(--r-md); padding: 5px 6px; cursor: pointer; text-align: left; }
.btc-risk-row:hover { background: var(--surface-2); }
.btc-risk-code { font-size: .72rem; color: var(--text); }
.btc-risk-prod { font-size: .76rem; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btc-risk-v { font-size: .78rem; font-weight: 600; color: var(--text); }

/* Toolbar */
.btc-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: var(--sp-3) 0 var(--sp-2); }
.btc-search { display: flex; align-items: center; gap: 6px; flex: 1 1 240px; max-width: 320px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0 10px; }
.btc-search svg { width: 15px; height: 15px; color: var(--text-3); flex: 0 0 auto; }
.btc-search input { flex: 1; border: 0; background: none; outline: none; padding: 8px 0; font-size: .85rem; color: var(--text); }
.btc-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.whs-chip.btc-chip-on { background: color-mix(in oklch, var(--text) 8%, var(--surface)); border-color: var(--text-3); font-weight: 600; }

/* Tabs spacing + per-tab count badge */
.btc-tabs { margin-bottom: var(--sp-3); }
.inv-tab-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px;
  font-size: .68rem; font-weight: 600; background: var(--surface-2); color: var(--text-2); }
.inv-tab.active .inv-tab-badge { background: color-mix(in oklch, var(--text) 12%, var(--surface)); color: var(--text); }

/* Table grid lines (per playbook rule 8) */
.btc-table th, .btc-table td { border-right: 1px solid var(--border); }
.btc-table th:last-child, .btc-table td:last-child { border-right: 0; }

/* FEFO expiry pills + drawer recall events */
.btc-exp-pill { display: inline-block; font-size: .68rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.btc-exp-rose    { background: color-mix(in oklch, #e11d48 16%, var(--surface)); color: #be123c; }
.btc-exp-amber   { background: color-mix(in oklch, #f59e0b 18%, var(--surface)); color: #b45309; }
.btc-exp-sky     { background: color-mix(in oklch, #0ea5e9 16%, var(--surface)); color: #0369a1; }
.btc-exp-emerald { background: color-mix(in oklch, #10b981 16%, var(--surface)); color: #047857; }
.btc-exp-slate   { background: var(--surface-2); color: var(--text-3); }

.btc-event { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--border); }
.btc-event:last-child { border-bottom: 0; }

[data-theme="dark"] .btc-exp-rose    { color: #fda4af; }
[data-theme="dark"] .btc-exp-amber   { color: #fcd34d; }
[data-theme="dark"] .btc-exp-sky     { color: #7dd3fc; }
[data-theme="dark"] .btc-exp-emerald { color: #6ee7b7; }

/* === cartons cockpit === */
/* ── /cartons cockpit — page-specific only (reuses .vkpi / .whs-d-* / .inv-tabs / .inv-insights) ── */
.crt-toolbar { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin:var(--sp-3) 0 var(--sp-2); }
.crt-search { position:relative; display:flex; align-items:center; min-width:260px; flex:0 0 auto; }
.crt-search-ic { position:absolute; left:10px; display:flex; color:var(--text-3); pointer-events:none; }
.crt-search-ic svg { width:15px; height:15px; }
.crt-search input { width:100%; padding:7px 10px 7px 30px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--text); font-size:14px; }
.crt-search input:focus { outline:none; border-color:color-mix(in oklch, #6366f1 55%, var(--border)); }

.crt-chips { display:flex; gap:6px; flex-wrap:wrap; }
.crt-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border:1px solid var(--border); border-radius:999px; background:var(--surface); color:var(--text-2); font-size:13px; font-weight:500; cursor:pointer; transition:all .12s; }
.crt-chip svg { width:13px; height:13px; }
.crt-chip:hover { background:var(--surface-2); }
.crt-chip.active { background:color-mix(in oklch, #6366f1 14%, var(--surface)); border-color:color-mix(in oklch, #6366f1 45%, var(--border)); color:var(--text); }

/* dismissible by-warehouse drill filter */
.crt-whfilter { margin:0 0 var(--sp-2); }
.crt-whfilter-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 10px; border:1px solid color-mix(in oklch, #6366f1 35%, var(--border)); border-radius:999px; background:color-mix(in oklch, #6366f1 10%, var(--surface)); color:var(--text); font-size:13px; }
.crt-whfilter-chip svg { width:13px; height:13px; }
.crt-whfilter-x { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0; border:none; border-radius:50%; background:transparent; color:var(--text-3); cursor:pointer; }
.crt-whfilter-x:hover { background:var(--surface-2); color:var(--text); }
.crt-whfilter-x svg { width:12px; height:12px; }

/* insights cards */
.crt-ins { padding:var(--sp-3); }
.crt-ins-h { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); margin-bottom:10px; }
.crt-ins-h svg { width:14px; height:14px; }

.crt-mix { display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--surface-2); }
.crt-mix-seg { height:100%; }
.crt-mix-emerald { background:#10b981; } .crt-mix-sky { background:#0ea5e9; }
.crt-mix-slate { background:#94a3b8; }   .crt-mix-rose { background:#f43f5e; }
.crt-legend { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.crt-leg { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--text-2); }
.crt-leg-dot { width:9px; height:9px; border-radius:3px; display:inline-block; }

.crt-wh-list { display:flex; flex-direction:column; gap:7px; }
.crt-wh-row { display:flex; align-items:center; gap:9px; width:100%; background:none; border:none; padding:2px 0; cursor:pointer; text-align:left; }
.crt-wh-row:hover .crt-wh-code { color:var(--text); }
.crt-wh-code { font-size:13px; color:var(--text-2); min-width:64px; }
.crt-wh-bar { flex:1; height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.crt-wh-fill { display:block; height:100%; background:#6366f1; border-radius:4px; }
.crt-wh-n { font-size:13px; font-weight:600; color:var(--text); min-width:34px; text-align:right; }

.crt-fh { display:flex; flex-direction:column; gap:8px; }
.crt-fh-row { display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--text-2); }
.crt-fh-row span:first-child { display:inline-flex; align-items:center; gap:6px; }
.crt-fh-row svg { width:14px; height:14px; color:var(--text-3); }

/* table fill bar */
.crt-row.is-clickable { cursor:pointer; }
.crt-row.is-clickable:hover { background:var(--surface-2); }
.crt-fill { display:flex; align-items:center; gap:8px; }
.crt-fill-track { flex:1; height:8px; min-width:60px; border-radius:4px; background:var(--surface-2); overflow:hidden; }
.crt-fill-bar { height:100%; border-radius:4px; }
.crt-fill-emerald { background:#10b981; } .crt-fill-amber { background:#f59e0b; }
.crt-fill-rose { background:#f43f5e; }    .crt-fill-sky { background:#0ea5e9; }
.crt-fill-txt { font-size:12px; color:var(--text-2); font-variant-numeric:tabular-nums; white-space:nowrap; }

.crt-barcode { max-width:100%; height:auto; background:#fff; padding:6px 8px; border-radius:var(--r-md); border:1px solid var(--border); }

/* === cycle-counts cockpit === */
/* ── Cycle Counts cockpit (cyc-*) — only NEW classes; reuses vkpi/whs/inv-* ── */
.cyc-chipbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0 12px; }
.cyc-chip-wrap { display:flex; gap:6px; flex-wrap:wrap; }
.cyc-seg .btn { border-radius:0; }

.cyc-ins { padding:14px 16px; }
.cyc-ins-title { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:10px; }
.cyc-ins-title svg { width:15px; height:15px; }
.cyc-ins-rows { display:flex; flex-direction:column; gap:7px; }
.cyc-ins-row { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--text); }
.cyc-ins-v { margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); }
.cyc-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.cyc-dot-emerald { background:#10b981; }
.cyc-dot-rose { background:#f43f5e; }
.cyc-dot-slate { background:#64748b; }
.cyc-dot-violet { background:#8b5cf6; }
.cyc-dot-amber { background:#f59e0b; }
.cyc-dot-sky { background:#0ea5e9; }

.cyc-bar { display:flex; height:9px; border-radius:99px; overflow:hidden; background:var(--surface-2); margin-bottom:12px; }
.cyc-bar-seg { height:100%; }
.cyc-bar-over { background:#10b981; }
.cyc-bar-short { background:#f43f5e; }

.cyc-wh-list { display:flex; flex-direction:column; gap:8px; }
.cyc-wh-row { display:grid; grid-template-columns:1fr 86px 40px; align-items:center; gap:9px; font-size:13px; cursor:pointer; padding:2px 0; }
.cyc-wh-row:hover { color:var(--text); }
.cyc-wh-name { color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cyc-wh-track { height:7px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.cyc-wh-fill { height:100%; border-radius:99px; }
.cyc-wh-emerald { background:#10b981; }
.cyc-wh-amber { background:#f59e0b; }
.cyc-wh-rose { background:#f43f5e; }
.cyc-wh-sky { background:#0ea5e9; }
.cyc-wh-pct { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); }

.cyc-acc { font-weight:600; font-variant-numeric:tabular-nums; }
.cyc-acc-good { color:#10b981; }
.cyc-acc-mid { color:#f59e0b; }
.cyc-acc-bad { color:#f43f5e; }

.cyc-age { font-size:12px; font-weight:600; padding:1px 6px; border-radius:99px; margin-left:4px; }
.cyc-age-fresh { background:color-mix(in oklch, #10b981 14%, var(--surface)); color:#0f9d6f; }
.cyc-age-warn  { background:color-mix(in oklch, #f59e0b 16%, var(--surface)); color:#b8780a; }
.cyc-age-old   { background:color-mix(in oklch, #f43f5e 16%, var(--surface)); color:#d83a52; }

.inv-tab-count { font-size:12px; opacity:.7; font-variant-numeric:tabular-nums; }

.cyc-table th, .cyc-table td { border-right:1px solid var(--border); }
.cyc-table th:last-child, .cyc-table td:last-child { border-right:none; }


/* === report: hub === */
/* ── Reports Hub (Report Center) — NEW, prefixed hub-* ─────────── */
.hub-page .vkpi-strip { margin-bottom: var(--sp-3); }

/* Live search box in the page-actions (flex pattern, not .search-wrap) */
.hub-search-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--color-surface-2, var(--surface-2));
  border: 1px solid var(--color-border, var(--border));
  border-radius: 9px; padding: 0 10px; min-width: 240px;
  color: var(--color-text-3, var(--text-muted));
}
.hub-search-wrap svg { width: 16px; height: 16px; flex: 0 0 auto; }
.hub-search-input {
  border: 0; background: transparent; outline: none;
  padding: 8px 2px; font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-1, var(--text)); width: 100%;
}
.hub-search-input::placeholder { color: var(--color-text-3, var(--text-muted)); }

.hub-section { margin-top: var(--sp-4); }
.hub-section-head { margin-bottom: var(--sp-2); }
.hub-section-title {
  margin: 0; font-size: var(--text-base, 1rem); font-weight: var(--weight-semi, 600);
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-text-1, var(--text));
}
.hub-section-title svg { width: 16px; height: 16px; color: var(--color-warning, #d97706); }

.hub-grid {
  display: grid; gap: var(--sp-2, 10px);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.hub-card {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 14px;
  background: var(--color-surface-1, var(--surface));
  border: 1px solid var(--color-border, var(--border));
  border-left: 3px solid var(--hub-accent, var(--color-primary, #6366f1));
  border-radius: 12px; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.hub-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--hub-accent, #6366f1) 18%, transparent);
  border-color: color-mix(in srgb, var(--hub-accent, #6366f1) 45%, var(--color-border, #e5e7eb));
}
.hub-card-ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--hub-accent, #6366f1) 12%, transparent);
  color: var(--hub-accent, #6366f1);
}
.hub-card-ic svg { width: 20px; height: 20px; }
.hub-card-body { min-width: 0; }
.hub-card-name {
  font-weight: var(--weight-semi, 600); font-size: var(--text-sm, 0.9rem);
  color: var(--color-text-1, var(--text)); display: flex; align-items: center; gap: 6px;
}
.hub-card-desc {
  margin-top: 3px; font-size: var(--text-xs, 0.78rem); line-height: 1.4;
  color: var(--color-text-2, var(--text-muted));
}
.hub-card-cat {
  margin-top: 6px; font-size: 0.68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-text-3, var(--text-muted)); opacity: .8;
}
.hub-soon {
  font-size: 0.62rem; font-weight: 600; padding: 1px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-info, #0ea5e9) 15%, transparent);
  color: var(--color-info, #0284c7); text-transform: uppercase; letter-spacing: .03em;
}

/* Star / favourite toggle (top-right of each card) */
.hub-star {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer; padding: 0;
  color: var(--color-text-3, var(--text-muted)); opacity: .55;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
.hub-star svg { width: 16px; height: 16px; }
.hub-card:hover .hub-star { opacity: 1; }
.hub-star:hover { background: color-mix(in srgb, var(--color-warning, #f59e0b) 12%, transparent); color: var(--color-warning, #d97706); }
.hub-star.is-on { opacity: 1; color: var(--color-warning, #f59e0b); }
.hub-star.is-on svg { fill: currentColor; }

/* Accent keys (mirror the vkpi palette names) */
.hub-accent-indigo  { --hub-accent: #6366f1; }
.hub-accent-emerald { --hub-accent: #10b981; }
.hub-accent-amber   { --hub-accent: #f59e0b; }
.hub-accent-rose    { --hub-accent: #f43f5e; }
.hub-accent-sky     { --hub-accent: #0ea5e9; }
.hub-accent-violet  { --hub-accent: #8b5cf6; }
.hub-accent-slate   { --hub-accent: #64748b; }

.hub-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 48px 16px; color: var(--color-text-3, var(--text-muted));
}
.hub-empty svg { width: 28px; height: 28px; opacity: .6; }

@media (max-width: 640px) {
  .hub-grid { grid-template-columns: 1fr; }
  .hub-search-wrap { min-width: 0; width: 100%; }
}

/* === report: sales-by-customer === */
/* ── Sales by Customer report (pages/reports-gap.js) ─────────────────
   All token-based; reuses .vkpi-strip/.inv-insights/.card/.data-table.
   Only NEW selectors below, prefixed .sbc-. */
.sbc-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sbc-range .input { width: auto; }

/* Top-10 horizontal bars */
.sbc-bars { display: flex; flex-direction: column; gap: 6px; }
.sbc-bar-row { display: grid; grid-template-columns: 96px 1fr 64px; align-items: center; gap: 8px;
  width: 100%; background: none; border: 0; padding: 2px 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.sbc-bar-row:hover .sbc-bar-name { color: var(--color-primary, #4f46e5); }
.sbc-bar-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbc-bar-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--color-border) 60%, transparent); overflow: hidden; }
.sbc-bar-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary, #4f46e5) 60%, #818cf8), var(--color-primary, #4f46e5)); }
.sbc-bar-val { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--text-2, #64748b); }

/* New vs returning split */
.sbc-split-track { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--color-border); }
.sbc-split-new { background: color-mix(in srgb, var(--color-success, #10b981) 85%, #fff); }
.sbc-split-ret { background: color-mix(in srgb, var(--color-info, #0ea5e9) 80%, #fff); }
.sbc-split-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; flex-wrap: wrap; }
.sbc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.sbc-dot-new { background: color-mix(in srgb, var(--color-success, #10b981) 85%, #fff); }
.sbc-dot-ret { background: color-mix(in srgb, var(--color-info, #0ea5e9) 80%, #fff); }

/* At-risk list */
.sbc-risk { display: flex; flex-direction: column; gap: 4px; }
.sbc-risk-row { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: none; border: 0; padding: 3px 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.sbc-risk-row:hover .sbc-risk-name { color: var(--color-primary, #4f46e5); }
.sbc-risk-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbc-risk-meta { font-size: 12px; color: var(--text-2, #64748b); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sbc-risk-days { color: var(--color-danger, #ef4444); font-weight: 600; }

/* Ranked table embellishments */
.sbc-table .sbc-rank { color: var(--text-3, #94a3b8); font-variant-numeric: tabular-nums; width: 36px; }
.sbc-share { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.sbc-share-track { width: 54px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-border) 60%, transparent); overflow: hidden; }
.sbc-share-fill { display: block; height: 100%; border-radius: 999px; background: var(--color-primary, #4f46e5); }
.sbc-share-num { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 38px; text-align: right; }

@media (max-width: 720px) {
  .sbc-bar-row { grid-template-columns: 80px 1fr 56px; }
}

/* === report: sales-by-category === */
/* No new CSS required. Reuses existing global classes:
   .page-wrapper .page-header .page-title .page-subtitle .page-actions
   .vkpi-strip .vkpi .vkpi-{indigo,emerald,amber,sky,violet} .vkpi-icon .vkpi-label .vkpi-value .vkpi-hint .is-clickable
   .inv-insights .card .side-h .table-wrap .data-table .fw-med .fw-semi .text-muted .text-xs .text-sm
   .btn .btn-secondary .btn-sm .form-input
   Bar charts are inline-styled divs (width % via computed value) with var(--surface-2) track + brand colours — no chart lib, no new selectors.
   NOTE (review fix): inline styles use var(--text-3) — the real muted-text token — NOT var(--text-muted), which is not a defined CSS variable (only the .text-muted utility class exists, and it maps to --text-3). */

/* === report: sales-by-region === */
/* ── Sales by Region report (prefix sbr-) ─────────────────────────────── */
.sbr-range { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.sbr-date { display:flex; flex-direction:column; font-size:12px; font-weight:600; color:var(--color-text-3); gap:3px; }
.sbr-date input { font-size:14px; padding:5px 8px; border:1px solid var(--color-border); border-radius:var(--radius-sm); background:var(--color-surface); color:var(--color-text-1); }

.sbr-insights { margin:var(--sp-3) 0; }
.sbr-ins-card { padding:14px 16px; }
.sbr-ins-title { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--color-text-2); margin-bottom:12px; }
.sbr-ins-title svg { width:15px; height:15px; }
.sbr-ins-title .text-muted { text-transform:none; letter-spacing:0; font-weight:500; font-size:12px; }

.sbr-bar-row { margin-bottom:10px; }
.sbr-bar-row:last-child { margin-bottom:0; }
.sbr-bar-head { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:4px; }
.sbr-bar-label { font-size:13px; font-weight:600; color:var(--color-text-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sbr-bar-val { font-size:13px; font-weight:700; color:var(--color-text-2); white-space:nowrap; }
.sbr-bar-track { height:8px; border-radius:99px; background:var(--color-surface-2); overflow:hidden; }
.sbr-bar-fill { height:100%; border-radius:99px; transition:width .4s ease; }

.sbr-bar-indigo  { background:color-mix(in oklch, var(--color-primary) 78%, transparent); }
.sbr-bar-emerald { background:color-mix(in oklch, var(--color-success) 78%, transparent); }
.sbr-bar-amber   { background:color-mix(in oklch, var(--color-warning) 80%, transparent); }
.sbr-bar-sky     { background:color-mix(in oklch, var(--color-info) 78%, transparent); }
.sbr-bar-violet  { background:color-mix(in oklch, #8b5cf6 80%, transparent); }
.sbr-bar-rose    { background:color-mix(in oklch, var(--color-danger) 72%, transparent); }
.sbr-bar-slate   { background:color-mix(in oklch, var(--color-text-3) 55%, transparent); }

.sbr-split { display:flex; flex-direction:column; gap:12px; }
.sbr-split-track { display:flex; height:14px; border-radius:99px; overflow:hidden; background:var(--color-surface-2); }
.sbr-split-seg { height:100%; transition:width .4s ease; }
.sbr-split-legend { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--color-text-2); }
.sbr-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle; }

.sbr-tabs { margin-bottom:var(--sp-2); }
.sbr-page .data-table td.num, .sbr-page .data-table th.num { text-align:right; }

@media (max-width:1100px){ .sbr-insights{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:720px){ .sbr-insights{ grid-template-columns:1fr;} .sbr-range{ width:100%; } }

/* === report: sales-comparison === */
/* ── Sales Comparison report (pages/reports-gap.js) ── prefix: sc- ── */
.sc-page .inv-insights .card { display: flex; flex-direction: column; }

/* signed delta pills (reused in KPI hints, movers, table) */
.sc-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600;
  padding: 1px 6px; border-radius: 999px; line-height: 1.5; white-space: nowrap; }
.sc-delta-up   { color: var(--color-success, #16a34a); background: color-mix(in oklab, var(--color-success, #16a34a) 12%, transparent); }
.sc-delta-down { color: var(--color-danger, #dc2626);  background: color-mix(in oklab, var(--color-danger, #dc2626) 12%, transparent); }
.sc-delta-flat { color: var(--text-2, #6b7280);        background: color-mix(in oklab, var(--text-2, #6b7280) 10%, transparent); }

/* 12-month CSS bar trend */
.sc-trend { display: flex; align-items: flex-end; gap: 4px; height: 130px; padding: 4px 2px 0; }
.sc-bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.sc-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.sc-bar-fill { width: 100%; border-radius: 4px 4px 0 0;
  background: color-mix(in oklab, var(--color-primary, #4f46e5) 55%, transparent);
  transition: height .25s ease; min-height: 2px; }
.sc-bar-fill.sc-bar-curr { background: var(--color-primary, #4f46e5); }
.sc-bar-lbl { font-size: 9px; color: var(--text-2, #6b7280); text-transform: uppercase; letter-spacing: .3px; }

/* movers list (category + customer) */
.sc-mover-list { display: flex; flex-direction: column; }
.sc-mover { display: flex; align-items: center; gap: 8px; padding: 7px 0;
  border-bottom: 1px solid var(--border, #e5e7eb); }
.sc-mover:last-child { border-bottom: 0; }
.sc-mover-name { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-mover-val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-mover-link { cursor: pointer; }
.sc-mover-link:hover { background: color-mix(in oklab, var(--color-primary, #4f46e5) 6%, transparent);
  margin: 0 -8px; padding-left: 8px; padding-right: 8px; border-radius: 6px; }

/* === report: dead-stock === */
/* ── Dead / Slow-moving Stock report (deadstock-*) ─────────────────── */
.deadstock-tier-row { margin-bottom: 10px; }
.deadstock-tier-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.deadstock-tier-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.deadstock-tier-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.deadstock-trap { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.deadstock-trap:first-of-type { border-top: none; }
.deadstock-trap.is-clickable { cursor: pointer; border-radius: 6px; padding-inline: 6px; margin-inline: -6px; transition: background var(--t-fast); }
.deadstock-trap.is-clickable:hover { background: var(--surface-2); }
.deadstock-trap-main { min-width: 0; }
.deadstock-trap-title { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deadstock-trap-val { font-size: 14px; font-weight: 700; color: color-mix(in oklch, #F43F5E 70%, var(--text)); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* === report: aged-creditors === */
/* ── Aged Creditors report (prefix ac-) — NEW css only ──────────
 * Tokens used are real & verified: --color-text, --color-text-2,
 * --color-border, --color-bg-2, --color-primary, --color-error,
 * --color-warning, --text-sm/--text-xs, --weight-semi/--weight-medium.
 * (--color-text-1 does NOT exist in this codebase — use --color-text.) */
.ac-ins { padding: 14px 16px; }
.ac-ins-head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); font-weight: var(--weight-semi);
  color: var(--color-text-2); margin-bottom: 12px;
}
.ac-ins-head svg { width: 16px; height: 16px; opacity: .8; }

/* stacked ageing bar */
.ac-stack {
  display: flex; height: 16px; width: 100%;
  border-radius: 6px; overflow: hidden;
  background: var(--color-bg-2); margin-bottom: 12px;
}
.ac-stack-seg { height: 100%; }
.ac-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.ac-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--color-text-2);
}
.ac-legend-item b { color: var(--color-text); font-weight: var(--weight-semi); }
.ac-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* accent hex matches the .vkpi-* palette exactly (those accents aren't tokens) */
.ac-acc-emerald { background: #10B981; }
.ac-acc-sky     { background: #0EA5E9; }
.ac-acc-amber   { background: #F59E0B; }
.ac-acc-violet  { background: #8B5CF6; }
.ac-acc-rose    { background: #F43F5E; }

/* top creditors rows */
.ac-top-row { padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.ac-top-row:last-child { border-bottom: 0; }
.ac-top-row.is-clickable { cursor: pointer; }
.ac-top-row.is-clickable:hover { background: color-mix(in srgb, var(--color-primary) 5%, transparent); border-radius: 6px; }
.ac-top-meta { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ac-top-name { font-weight: var(--weight-medium); font-size: var(--text-sm); }
.ac-top-amt  { font-weight: var(--weight-semi); font-size: var(--text-sm); }
.ac-top-bar  { height: 5px; border-radius: 3px; background: var(--color-bg-2); margin: 5px 0 3px; overflow: hidden; }
.ac-top-fill { height: 100%; background: color-mix(in srgb, #F43F5E 80%, transparent); border-radius: 3px; }
.ac-top-sub  { font-size: var(--text-xs); }

/* due/overdue split */
.ac-split { display: flex; flex-direction: column; gap: 8px; }
.ac-split-row { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--color-text-2); }
.ac-split-row b { color: var(--color-text); }
.ac-split-tot { border-top: 1px solid var(--color-border); padding-top: 8px; margin-top: 2px; font-weight: var(--weight-semi); }
.ac-split-tot span, .ac-split-tot b { color: var(--color-text); }

/* === report: delivery-performance === */
/* === Delivery Performance report (dlp-*) — token-based, append to styles.css === */
.dlp-loading { padding: 40px; text-align: center; color: var(--text-3); }

/* horizontal mini bar (cell + by-driver insight) */
.dlp-bar { flex: 1; height: 8px; background: var(--color-surface-2, var(--surface-2)); border-radius: 999px; overflow: hidden; min-width: 60px; }
.dlp-bar-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.dlp-emerald { background: color-mix(in oklch, var(--color-success, #16a34a) 78%, transparent); }
.dlp-sky     { background: color-mix(in oklch, var(--color-info, #0ea5e9) 78%, transparent); }
.dlp-amber   { background: color-mix(in oklch, var(--color-warning, #d97706) 80%, transparent); }
.dlp-rose    { background: color-mix(in oklch, var(--color-danger, #dc2626) 80%, transparent); }

.dlp-num-emerald { color: var(--color-success, #16a34a); }
.dlp-num-sky     { color: var(--color-info, #0ea5e9); }
.dlp-num-amber   { color: var(--color-warning, #d97706); }
.dlp-num-rose    { color: var(--color-danger, #dc2626); }

/* table cell: bar + value */
.dlp-cell-bar { display: flex; align-items: center; gap: 8px; }
.dlp-cell-v { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 42px; text-align: right; color: var(--text-1); }

/* by-driver/run insight rows */
.dlp-row-mini { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.dlp-row-mini-l { flex: 0 0 92px; font-size: 13px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlp-row-mini-v { flex: 0 0 40px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; color: var(--text-1); }

/* on-time trend column chart */
.dlp-trend { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 6px; overflow-x: auto; }
.dlp-col { flex: 1 0 14px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 14px; }
.dlp-col-track { width: 100%; flex: 1; display: flex; align-items: flex-end; background: transparent; }
.dlp-col-fill { width: 100%; border-radius: 4px 4px 0 0; min-height: 4px; transition: height .3s ease; }
.dlp-col-lbl { font-size: 9px; color: var(--text-3); margin-top: 4px; white-space: nowrap; }

/* fill-rate gauge */
.dlp-gauge { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.dlp-gauge-num { font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .dlp-row-mini-l { flex-basis: 70px; }
}

/* === report: order-to-cash === */
/* ── Order-to-Cash report (prefix o2c-) — NEW only; reuses .vkpi* .whs-card .inv-insights .data-table .card ── */
.o2c-page { margin: -12px -16px -12px; padding: 12px 16px 28px; }
.o2c-loading { padding: 40px 0; text-align: center; color: var(--color-text-3); }
.o2c-page .page-actions .input-sm { max-width: 150px; }
.o2c-unit { font-size: 0.55em; font-weight: var(--weight-med); color: var(--color-text-3); }

.o2c-insights { margin: 14px 0 16px; }
.o2c-insight-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.o2c-insight-title {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--color-text-2);
}
.o2c-insight-title svg { width: 16px; height: 16px; opacity: .8; }

/* stage-duration bars */
.o2c-bars { display: flex; flex-direction: column; gap: 12px; }
.o2c-bar-row { display: flex; flex-direction: column; gap: 5px; }
.o2c-bar-head { display: flex; justify-content: space-between; align-items: baseline; }
.o2c-bar-label { display: flex; align-items: center; gap: 7px; font-size: var(--text-sm); color: var(--color-text-2); }
.o2c-bar-val { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--color-text-1, var(--text)); }
.o2c-bar-unit { font-size: .72em; font-weight: var(--weight-regular); color: var(--color-text-3); }
.o2c-bar-track { height: 8px; border-radius: 999px; background: color-mix(in oklab, var(--color-text-3) 14%, transparent); overflow: hidden; }
.o2c-bar-fill { height: 100%; border-radius: 999px; transition: width .35s ease; }
.o2c-bar-note { font-size: var(--text-xs); color: var(--color-text-3); }
.o2c-bar-foot { font-size: var(--text-xs); color: var(--color-text-3); margin-top: 2px; }

.o2c-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.o2c-dot-sky,     .o2c-fill-sky     { background: var(--color-sky,     #0ea5e9); }
.o2c-dot-violet,  .o2c-fill-violet  { background: var(--color-violet,  #8b5cf6); }
.o2c-dot-emerald, .o2c-fill-emerald { background: var(--color-emerald, #10b981); }
.o2c-fill-indigo { background: var(--color-indigo, #6366f1); }

/* slowest-to-cash list */
.o2c-slow-list { display: flex; flex-direction: column; gap: 2px; }
.o2c-slow-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 8px; border-radius: 8px;
}
.o2c-slow-row.is-clickable { cursor: pointer; }
.o2c-slow-row.is-clickable:hover { background: color-mix(in oklab, var(--color-indigo, #6366f1) 8%, transparent); }
.o2c-slow-main { display: flex; flex-direction: column; min-width: 0; }
.o2c-slow-no { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--color-text-1, var(--text)); }
.o2c-slow-cust { font-size: var(--text-xs); color: var(--color-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.o2c-slow-days { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-rose, #f43f5e); white-space: nowrap; }
.o2c-empty-mini { font-size: var(--text-sm); color: var(--color-text-3); padding: 8px 0; }

/* cycle health */
.o2c-health { display: flex; flex-direction: column; gap: 8px; }
.o2c-health-row { display: flex; justify-content: space-between; align-items: baseline; }
.o2c-health-label { font-size: var(--text-sm); color: var(--color-text-2); }
.o2c-health-val { font-size: var(--text-sm); font-weight: var(--weight-semi); color: var(--color-text-1, var(--text)); }
.o2c-health-bar { height: 8px; border-radius: 999px; background: color-mix(in oklab, var(--color-text-3) 14%, transparent); overflow: hidden; }

@media (max-width: 1100px) { .o2c-insights { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .o2c-insights { grid-template-columns: 1fr; } }


/* === report redesign: daily-sales === */
/* ── Daily Sales cockpit — NEW css (ds-prefixed, token-based) ──────
   Reuses .vkpi*/.inv-insights/.card/.data-table/.side-h/.sbc-bar* already
   in styles.css. Only the bits unique to the daily trend / best-worst /
   cancellations panels + the table share-bar live here. */

/* Date-range inputs must size to content (mirror .sbc-range .input). */
.ds-range .input { width: auto; }

/* Stacked net+VAT trend bar inside the reused .sbc-bar-track */
.ds-trend-track { background: color-mix(in srgb, var(--color-border) 55%, transparent); }
.ds-trend-fill { display: flex; height: 100%; border-radius: 999px; overflow: hidden; }
.ds-seg-net { display: block; height: 100%; background: var(--vkpi-indigo, #6366F1); }
.ds-seg-vat { display: block; height: 100%; background: color-mix(in srgb, var(--color-sky, #0ea5e9) 70%, transparent); }
.ds-trend-canc .sbc-bar-val { color: var(--color-danger, #e11d48); font-weight: 600; }
.ds-trend-canc .sbc-bar-name::after { content: " ⚑"; color: var(--color-danger, #e11d48); font-size: 12px; }

.ds-legend { display: flex; gap: 14px; margin-top: 8px; font-size: 12px; color: var(--text-3); }
.ds-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.ds-dot-net { background: var(--vkpi-indigo, #6366F1); }
.ds-dot-vat { background: color-mix(in srgb, var(--color-sky, #0ea5e9) 70%, transparent); }

/* Best vs worst panel */
.ds-bw { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ds-bw-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.ds-bw-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ds-bw-tag svg { width: 13px; height: 13px; }
.ds-bw-best { background: color-mix(in srgb, var(--color-success, #16a34a) 14%, transparent); color: var(--color-success, #16a34a); }
.ds-bw-worst { background: color-mix(in srgb, var(--text-3) 16%, transparent); color: var(--text-2, var(--text-3)); }
.ds-bw-day { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-bw-val { font-variant-numeric: tabular-nums; font-weight: 700; }
.ds-bw-foot { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--text-3); }

/* Cancellations panel */
.ds-canc { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ds-canc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ds-canc-day { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-canc-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-danger, #e11d48); }
.ds-canc-foot { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--text-3); }
#dsCancCard.ds-flash { box-shadow: 0 0 0 2px var(--color-danger, #e11d48); transition: box-shadow .25s; }

/* Table inline gross-share bar */
.ds-share { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.ds-share-track { width: 72px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-border) 60%, transparent); overflow: hidden; }
.ds-share-fill { display: block; height: 100%; border-radius: 999px; background: var(--vkpi-emerald, #10b981); }
.ds-canc-cell { color: var(--color-danger, #e11d48); font-weight: 600; }
.ds-totals td { font-weight: var(--weight-semi, 600); border-top: 2px solid var(--color-border); background: var(--surface-2); }

@media (max-width: 720px) {
  .ds-share-track { width: 48px; }
}

/* === report redesign: product-sales === */
/* ── Product Sales cockpit (pds-) — page-prefixed, token-based ──── */
.pds-range { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pds-range .input-sm { min-width:130px; }

/* Top-10 revenue bar list (mirrors the .sbc-bars pattern) */
.pds-bars { display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.pds-bar-row {
  display:grid; grid-template-columns:minmax(0,1fr) 1fr auto; align-items:center; gap:10px;
  width:100%; background:none; border:0; padding:2px 0; cursor:pointer; text-align:left; font:inherit; color:inherit;
}
.pds-bar-name { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pds-bar-track { height:8px; border-radius:5px; background:var(--color-surface-2,#FAFAFA); overflow:hidden; }
.pds-bar-fill {
  display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg, var(--color-primary,#6366F1), color-mix(in oklch, var(--color-primary,#6366F1) 55%, #A78BFA));
}
.pds-bar-val { font-size:13px; font-weight:700; white-space:nowrap; text-align:right; }
.pds-bar-row:hover .pds-bar-name { color:var(--color-primary,#6366F1); }

/* Concentration / movers split bars */
.pds-conc { margin-top:10px; }
.pds-split-track {
  display:flex; height:14px; border-radius:7px; overflow:hidden;
  background:var(--color-surface-2,#FAFAFA);
}
.pds-split-track span { display:block; height:100%; }
.pds-split-a    { background:var(--color-primary,#6366F1); }
.pds-split-b    { background:color-mix(in oklch, var(--color-primary,#6366F1) 22%, transparent); }
.pds-split-fast { background:var(--color-success,#16A34A); }
.pds-split-slow { background:var(--color-warning,#D97706); }
.pds-split-legend {
  display:flex; gap:18px; flex-wrap:wrap; margin-top:9px; font-size:13px; color:var(--color-text-2,#52525B);
}
.pds-split-legend b { color:var(--color-text,#09090B); }
.pds-dot { display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.pds-dot-a    { background:var(--color-primary,#6366F1); }
.pds-dot-b    { background:color-mix(in oklch, var(--color-primary,#6366F1) 22%, var(--color-surface-2,#FAFAFA)); }
.pds-dot-fast { background:var(--color-success,#16A34A); }
.pds-dot-slow { background:var(--color-warning,#D97706); }
.pds-link {
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--color-primary,#6366F1); font-weight:600;
}
.pds-link:hover { text-decoration:underline; }

/* Tabs count pill */
.pds-tabs { margin-top:14px; }
.pds-tab-n {
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:9px; font-size:12px; font-weight:700;
  background:var(--color-surface-2,#FAFAFA); color:var(--color-text-2,#52525B);
}
.inv-tab.active .pds-tab-n { background:color-mix(in oklch, var(--color-primary,#6366F1) 16%, transparent); color:var(--color-primary,#6366F1); }

/* Table niceties */
.pds-table .pds-rank { color:var(--color-text-3,#71717A); font-size:13px; width:34px; text-align:center; }
.pds-sortable { cursor:pointer; user-select:none; white-space:nowrap; }
.pds-sortable:hover { color:var(--color-primary,#6366F1); }
.pds-ushare { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.pds-ushare-track { width:54px; height:6px; border-radius:4px; background:var(--color-surface-2,#FAFAFA); overflow:hidden; flex:none; }
.pds-ushare-fill { display:block; height:100%; border-radius:4px; background:var(--color-info,#0EA5E9); }

/* === report redesign: vat-report === */
/* ── VAT Analysis cockpit (vat-*) ─────────────────────────────
   Reuses .vkpi*, .inv-insights, .card, .table-wrap, .data-table.
   Only NEW, page-prefixed, token-based rules below. */

/* Insight 1: VAT-by-rate bars */
.vat-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.vat-bar-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-areas: "label track val" "label sub sub";
  align-items: center; column-gap: 10px; row-gap: 2px;
}
.vat-bar-label { grid-area: label; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.vat-bar-track { grid-area: track; height: 10px; border-radius: 6px; background: color-mix(in oklch, var(--c, #6366F1) 12%, var(--surface-2, #f1f5f9)); overflow: hidden; }
.vat-bar-fill  { display: block; height: 100%; border-radius: 6px; background: var(--c, #6366F1); }
.vat-bar-val   { grid-area: val; font-weight: 700; font-variant-numeric: tabular-nums; color: color-mix(in oklch, var(--c, #6366F1) 86%, var(--text)); }
.vat-bar-sub   { grid-area: sub; font-size: 12px; color: var(--text-3); }
.vat-ac-indigo  { --c: #6366F1; }
.vat-ac-emerald { --c: #10B981; }
.vat-ac-amber   { --c: #F59E0B; }
.vat-ac-sky     { --c: #0EA5E9; }
.vat-ac-violet  { --c: #8B5CF6; }
.vat-ac-rose    { --c: #F43F5E; }

/* Insight 2: net vs VAT split bar */
.vat-split-track { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-2, #f1f5f9); }
.vat-split-net { background: #6366F1; }
.vat-split-vat { background: #F59E0B; }
.vat-split-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; font-size: 14px; }
.vat-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.vat-dot-net { background: #6366F1; }
.vat-dot-vat { background: #F59E0B; }

/* Insight 3: monthly trend columns */
.vat-trend { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 6px; }
.vat-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.vat-col-val { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 4px; white-space: nowrap; }
.vat-col-bar { width: 70%; max-width: 34px; border-radius: 5px 5px 0 0; background: color-mix(in oklch, #6366F1 22%, var(--surface-2, #f1f5f9)); transition: background var(--t-fast, .15s); }
.vat-col.is-current .vat-col-bar { background: #6366F1; }
.vat-col.is-current .vat-col-val { color: color-mix(in oklch, #6366F1 86%, var(--text)); }
.vat-col-lbl { font-size: 12px; color: var(--text-3); margin-top: 5px; white-space: nowrap; }

/* Table totals row */
.vat-table tfoot .vat-total-row td { border-top: 2px solid var(--color-border, var(--border)); background: var(--surface-2, #f8fafc); }

/* Date-range actions wrap nicely on narrow screens */
.vat-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

[data-theme="dark"] .vat-bar-track,
[data-theme="dark"] .vat-split-track,
[data-theme="dark"] .vat-col-bar { background: color-mix(in oklch, var(--c, #6366F1) 16%, var(--surface, #1e293b)); }
[data-theme="dark"] .vat-table tfoot .vat-total-row td { background: color-mix(in oklch, var(--text) 6%, var(--surface)); }

/* === report redesign: stock-value === */
/* ── Stock Value report — page-prefixed, token-based (NEW only) ────── */
/* Value-by-category dual bar: outer track width = retail (relative to max);
   inner cost portion fills from the left, leaving margin headroom visible. */
.sv-cat-row { margin: 0 0 10px; cursor: pointer; }
.sv-cat-head { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 4px; }
.sv-cat-name { font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-cat-track {
  height: 12px; border-radius: 6px; min-width: 24px;
  background: color-mix(in oklch, var(--success) 32%, transparent);
  overflow: hidden; transition: width .25s ease;
}
.sv-cat-cost { height: 100%; background: color-mix(in oklch, var(--warning) 70%, transparent); border-radius: 6px 0 0 6px; }
.sv-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); margin-top: 8px; }
.sv-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 6px; }
.sv-dot-cost   { background: color-mix(in oklch, var(--warning) 70%, transparent); margin-left: 0; }
.sv-dot-retail { background: color-mix(in oklch, var(--success) 32%, transparent); }

/* Top-value SKU ranked rows */
.sv-sku-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.sv-sku-row:last-child { border-bottom: 0; }
.sv-sku-row:hover { background: color-mix(in oklch, var(--primary) 5%, transparent); }
.sv-sku-main { flex: 1; min-width: 0; }
.sv-sku-title { font-weight: 600; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-sku-track { height: 4px; border-radius: 3px; background: color-mix(in oklch, var(--primary) 12%, transparent); margin-top: 5px; overflow: hidden; }
.sv-sku-fill { height: 100%; background: color-mix(in oklch, var(--primary) 70%, transparent); border-radius: 3px; }
.sv-sku-val { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; }

/* In-table share-of-retail mini bar */
.sv-share-cell { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.sv-share-track { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in oklch, var(--success) 14%, transparent); overflow: hidden; }
.sv-share-fill { height: 100%; background: color-mix(in oklch, var(--success) 60%, transparent); border-radius: 3px; }

/* === report redesign: enhanced-reports === */
/* === report: enhanced-reports (prefix .er-) — NEW css only ===========
   Reuses .vkpi*, .inv-insights, .inv-tabs/.inv-tab, .side-h, .card,
   .table-wrap, .data-table, .badge-*. Token-based; light + dark safe.
   The vkpi-{accent} classes are reused purely to pull their --c colour
   into the dots / bars / stack segments below. */

.er-tabs { margin-bottom: var(--sp-3); }
.er-tab { gap: 7px; }
.er-tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-3)); flex: 0 0 auto; }

/* report header band */
.er-rep-head { margin-bottom: var(--sp-3); }
.er-rep-title { display: flex; align-items: flex-start; gap: 12px; }
.er-rep-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: color-mix(in oklch, var(--c, #6366F1) 14%, var(--surface)); color: var(--c, #6366F1); flex: 0 0 auto; }
.er-rep-ic svg { width: 18px; height: 18px; }
.er-rep-h { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semi); line-height: 1.2; }
.er-rep-sub { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-2); }

/* filter bar */
.er-filters { padding: 10px 14px; margin-bottom: var(--sp-3); }
.er-filter-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.er-fld { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.er-fld .form-input { width: auto; min-width: 130px; }
.er-filter-actions { display: flex; gap: 6px; margin-left: auto; align-self: flex-end; }

/* insights strip column-count overrides */
.er-insights-2 { grid-template-columns: repeat(2, 1fr); }
.er-insights-1 { grid-template-columns: 1fr; }
@media (max-width: 900px) { .er-insights-2 { grid-template-columns: 1fr; } }

/* stacked single-bar breakdown (ageing / disposition / status / direction) */
.er-stack { display: flex; height: 16px; border-radius: 999px; overflow: hidden;
  background: color-mix(in oklch, var(--text) 8%, transparent); }
.er-stack-seg { display: block; height: 100%; background: var(--c, var(--text-3)); }
.er-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; }
.er-leg { color: var(--text-2); }
.er-leg b { color: var(--text); font-variant-numeric: tabular-nums; }
.er-leg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, var(--text-3)); margin-right: 5px; vertical-align: middle; }

/* horizontal mini bar rows (top-N) */
.er-bars { display: flex; flex-direction: column; gap: 6px; }
.er-bar-row2 { display: grid; grid-template-columns: 1fr 84px 60px; align-items: center; gap: 8px;
  width: 100%; background: none; border: 0; padding: 2px 0; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.er-bar-row2:hover .er-bar-name2 { color: var(--color-primary, #4f46e5); }
.er-bar-name2 { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.er-bar-track { height: 8px; border-radius: 999px; overflow: hidden;
  background: color-mix(in oklch, var(--text) 8%, transparent); }
.er-bar-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in oklch, var(--color-primary, #4f46e5) 55%, #818cf8), var(--color-primary, #4f46e5)); }
.er-bar-val2 { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--text-2); }

/* ranked text rows (debtors / movers / oldest) */
.er-rank { display: flex; flex-direction: column; gap: 4px; }
.er-rank-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
  border-bottom: 1px solid color-mix(in oklch, var(--text) 5%, transparent); }
.er-rank-row:last-child { border-bottom: 0; }
.er-rank-row:hover .er-rank-name { color: var(--color-primary, #4f46e5); }
.er-rank-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.er-rank-val { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.er-danger { color: var(--color-error, #ef4444); font-weight: 600; }
.er-good   { color: var(--color-success, #10b981); font-weight: 600; }

/* gauge (delivery success / COD) */
.er-gauge { text-align: left; }
.er-gauge-num { font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: color-mix(in oklch, var(--c, #10B981) 86%, var(--text)); margin-bottom: 8px; }
.er-gauge-track { height: 10px; border-radius: 999px; overflow: hidden;
  background: color-mix(in oklch, var(--text) 8%, transparent); }
.er-gauge-fill { display: block; height: 100%; border-radius: 999px; background: var(--c, #10B981); }

/* customer / event header strip */
.er-cust-head { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 16px; margin-bottom: var(--sp-3); flex-wrap: wrap; }
.er-cust-stats { display: flex; gap: 18px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.er-cust-stats b { color: var(--text); font-variant-numeric: tabular-nums; }

/* closing balance line */
.er-closing { text-align: right; margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--text-2); }

/* edge-flush data table grid lines (matches playbook rule 8) */
.er-table th, .er-table td { border-right: 1px solid var(--color-border); }
.er-table th:last-child, .er-table td:last-child { border-right: 0; }

/* === report redesign: delivery-reports === */
/* ── Delivery Reports cockpit — new CSS (page-prefixed .drr-, token-based) ── */
.drr-page { padding: 12px 16px 28px; max-width: none; margin: -12px -16px -12px; }

/* Segmented day toggle (reuses existing tokens) */
.drr-day-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: 7px; overflow: hidden; background: var(--color-surface); }
.drr-day-toggle button { background: transparent; border: 0; padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; border-right: 1px solid var(--color-border); }
.drr-day-toggle button:last-child { border-right: 0; }
.drr-day-toggle button:hover { background: var(--color-bg); color: var(--color-text); }
.drr-day-toggle button.active { background: color-mix(in oklab, var(--color-primary) 14%, transparent); color: var(--color-primary); }

/* On-time card */
.drr-ot { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.drr-ot-stat { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-text); }
.drr-ot-stat.drr-good { color: var(--color-success); }
.drr-ot-stat.drr-warn { color: var(--color-warning); }
.drr-ot-stat.drr-bad  { color: var(--color-error); }
.drr-ot-sub { font-size: 13px; color: var(--color-text-muted); }
.drr-spark { width: 100%; height: 64px; display: block; }
.drr-legend { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }
.drr-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.drr-sw-g { background: var(--color-success); }
.drr-sw-r { background: var(--color-error); }
.drr-range { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Horizontal bar rows (failure reasons + cycle buckets) */
.drr-bars { display: flex; flex-direction: column; gap: 6px; }
.drr-bar-row { display: grid; grid-template-columns: minmax(0,1fr) 2fr 44px; gap: 10px; align-items: center; font-size: 12.5px; }
.drr-bar-lab { color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drr-bar-track { height: 8px; background: var(--color-bg); border-radius: 4px; overflow: hidden; }
.drr-bar-fill { height: 100%; border-radius: 4px; transition: width .25s; }
.drr-fill-r { background: var(--color-error); }
.drr-fill-b { background: var(--color-primary); }
.drr-bar-cnt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text); }

/* COD block */
.drr-cod-card { margin: 14px 0; }
.drr-cod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.drr-cod-cell { background: var(--color-bg); border-radius: 8px; padding: 10px 12px; }
.drr-cod-lab { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--color-text-muted); }
.drr-cod-val { display: block; font-size: 17px; font-weight: 800; margin-top: 3px; font-variant-numeric: tabular-nums; }
.drr-good { color: var(--color-success); }
.drr-bad  { color: var(--color-error); }
.drr-cod-list-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin: 4px 0 6px; }
.drr-cod-list { display: flex; flex-direction: column; gap: 4px; }
.drr-cod-drow { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed var(--color-border); }
.drr-cod-drow:last-child { border-bottom: 0; }
.drr-cod-dname { font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drr-cod-dmeta { font-variant-numeric: tabular-nums; color: var(--color-text-muted); white-space: nowrap; }

/* Inline status notes */
.drr-unavail { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-warning); padding: 6px 0; }
.drr-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-success); padding: 6px 0; }

@media (max-width: 1100px) { .drr-cod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .drr-page { padding: 10px 10px 60px; }
  .drr-bar-row { grid-template-columns: minmax(0,1fr) 1.5fr 40px; gap: 8px; }
  .drr-cod-grid { grid-template-columns: 1fr 1fr; }
}
[data-theme=dark] .drr-cod-cell { background: color-mix(in oklab, var(--color-surface) 70%, #000 30%); }

/* CSS injector — call drrInjectCss() at the top of renderDeliveryReports.
   (Defined here as a comment-of-record; the actual injector lives in JS below.) */

/* === report redesign: group-reports === */
/* ── Group Reports cockpit (page-prefixed .gr-*) ─────────────────── */
.gr-range { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }

/* CSS bar lists in the insights strip */
.gr-bars { display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.gr-bar-row {
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(60px,1fr) auto;
  align-items:center; gap:10px; width:100%; padding:5px 6px; border:0;
  background:transparent; cursor:pointer; border-radius:8px; text-align:left;
  font:inherit; color:inherit; transition:background .12s ease;
}
.gr-bar-row:hover { background:var(--surface-hover, color-mix(in oklab, var(--color-text) 6%, transparent)); }
.gr-bar-name { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gr-bar-track {
  height:8px; border-radius:99px;
  background:color-mix(in oklab, var(--color-text) 9%, transparent);
  overflow:hidden;
}
.gr-bar-fill { display:block; height:100%; border-radius:99px; min-width:2px; }
.gr-fill-rev { background:linear-gradient(90deg, var(--color-emerald, #10b981), color-mix(in oklab, var(--color-emerald, #10b981) 60%, var(--color-sky, #0ea5e9))); }
.gr-fill-ar  { background:linear-gradient(90deg, var(--color-amber, #f59e0b), color-mix(in oklab, var(--color-amber, #f59e0b) 55%, var(--color-rose, #f43f5e))); }
.gr-bar-val { font-size:12.5px; font-weight:700; white-space:nowrap; text-align:right; }
.gr-mini {
  display:inline-block; font-size:9px; font-weight:700; letter-spacing:.04em;
  padding:1px 4px; border-radius:4px; vertical-align:middle;
  background:color-mix(in oklab, var(--color-primary, #6366f1) 16%, transparent);
  color:var(--color-primary, #6366f1);
}

/* inter-company stat list */
.gr-stat-list { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.gr-stat {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:7px 4px; border-bottom:1px solid var(--color-border, rgba(0,0,0,.06));
}
.gr-stat:last-child { border-bottom:0; }
.gr-stat-l { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--color-text-muted, #64748b); }
.gr-stat-l svg { width:14px; height:14px; opacity:.8; }
.gr-stat-v { font-size:14px; font-weight:700; }
.gr-foot-note { margin-top:10px; font-size:11.5px; color:var(--color-text-muted, #64748b); line-height:1.4; }

/* table polish */
.gr-table tbody td { border-right:1px solid var(--color-border, rgba(0,0,0,.06)); }
.gr-table tbody td:last-child { border-right:0; }
.gr-badge { font-size:12px; margin-left:4px; }
.gr-star { color:var(--color-amber, #f59e0b); font-size:13px; }
.gr-total-row { background:var(--surface-hover, color-mix(in oklab, var(--color-text) 5%, transparent)); font-weight:600; }
.gr-total-row td { border-top:2px solid var(--color-border, rgba(0,0,0,.12)); }

.gr-note {
  margin-top:8px; padding:0 4px; font-size:13px; line-height:1.5;
  color:var(--color-text-muted, #64748b);
}

@media (max-width:1100px) {
  .gr-bar-row { grid-template-columns:minmax(0,1.2fr) minmax(40px,1fr) auto; }
}

/* === report redesign: sales-targets === */
/* ── Sales Targets cockpit — NEW rules (folded into injectTgtCss) ───────── */
/* page chrome */
.tgt-page { padding:12px 16px 28px; margin:-12px -16px -12px; }
.tgt-month { padding:8px 11px; border:1px solid var(--color-border); border-radius:9px; background:var(--color-surface); color:var(--color-text); font-size:14px; }

/* keep the kpi sub-count chip on the On-track / commission tiles */
.tgt-kpi-x { font-size:14px; font-weight:600; color:var(--color-text-muted); }

/* insights strip spacing */
.tgt-insights { margin:14px 0; }
.tgt-insights .side-h { display:flex; align-items:center; gap:6px; font-weight:700; font-size:14px; margin-bottom:10px; }

/* distribution stacked bar */
.tgt-dist-bar { display:flex; height:12px; border-radius:6px; overflow:hidden; margin-bottom:12px; background:var(--surface-2,var(--color-bg)); }
.tgt-dist-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:3px 0; }
.tgt-dist-k { display:flex; align-items:center; gap:7px; }
.tgt-dist-v { font-weight:700; }
.tgt-dot { width:9px; height:9px; border-radius:2px; display:inline-block; flex:none; }

/* leaderboard */
.tgt-lb-row { display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--color-border); }
.tgt-lb-row:last-child { border-bottom:0; }
.tgt-lb-main { flex:1; min-width:0; }
.tgt-lb-name { font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.tgt-lb-track { height:6px; border-radius:3px; background:var(--surface-2,var(--color-bg)); overflow:hidden; }
.tgt-lb-fill { display:block; height:100%; border-radius:3px; background:linear-gradient(90deg,#6366F1,#8B5CF6); }
.tgt-lb-amt { font-size:12.5px; font-weight:700; white-space:nowrap; }

/* pace card */
.tgt-pace-row { display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; }
.tgt-pace-v { font-weight:700; }
.tgt-pace-track { height:8px; border-radius:4px; background:var(--surface-2,var(--color-bg)); overflow:hidden; }
.tgt-pace-fill { display:block; height:100%; border-radius:4px; }
.tgt-pace-verdict { font-size:13px; font-weight:700; margin-top:10px; }
.tgt-pace-foot { display:flex; justify-content:space-between; font-size:11.5px; margin-top:8px; padding-top:8px; border-top:1px solid var(--color-border); }

/* table — reuse .data-table; rep + input + bar specifics */
.tgt-table .right { text-align:right; }
.tgt-rep { font-weight:600; display:flex; align-items:center; }
.tgt-rank { display:inline-flex; align-items:center; justify-content:center; width:21px; height:21px; border-radius:50%; font-size:12px; font-weight:800; margin-right:8px; flex:none; background:var(--color-bg); color:var(--color-text-muted); border:1px solid var(--color-border); }
.tgt-rank.gold { background:oklch(86% 0.14 90); color:oklch(34% 0.1 75); border-color:oklch(74% 0.14 90); }
.tgt-rank.silver { background:oklch(89% 0.01 264); color:oklch(40% 0.01 264); border-color:oklch(80% 0.01 264); }
.tgt-rank.bronze { background:oklch(72% 0.09 50); color:#fff; border-color:oklch(62% 0.09 50); }
.tgt-rank.none { opacity:.55; }
.tgt-rep-e { font-size:12px; color:var(--color-text-muted); }
.tgt-input-wrap { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--color-border); border-radius:8px; padding:4px 9px; background:var(--color-bg); }
.tgt-input-wrap:focus-within { border-color:var(--brand-600,var(--color-primary)); background:var(--color-surface); }
.tgt-cur { color:var(--color-text-muted); font-size:14px; }
.tgt-input { flex:0 0 90px; width:90px; border:0; outline:0; background:transparent; font-size:14px; font-weight:700; color:var(--color-text); text-align:right; }
.tgt-input::-webkit-outer-spin-button, .tgt-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.tgt-input[type=number] { -moz-appearance:textfield; }
.tgt-ro { font-weight:700; }
/* export-safe plain-text mirror of the target — invisible on screen, but
   present in the DOM text so exportTableToCSV (which strips <input>) captures it */
.tgt-export { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.tgt-bar { position:relative; height:8px; background:var(--color-bg); border:1px solid var(--color-border); border-radius:5px; overflow:hidden; min-width:120px; }
.tgt-fill { position:absolute; left:0; top:0; bottom:0; }
.tgt-fill.hit  { background:var(--color-success,#10B981); }
.tgt-fill.warn { background:oklch(78% 0.15 75); }
.tgt-fill.low  { background:oklch(64% 0.2 18); }
.tgt-marker { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--color-text); opacity:.5; }
.tgt-pct { font-size:12px; font-weight:700; margin-top:3px; }
.tgt-pct.hit  { color:var(--color-success,#10B981); }
.tgt-pct.warn { color:oklch(55% 0.15 65); }
.tgt-pct.low  { color:oklch(55% 0.2 18); }
.tgt-pct.none { color:var(--color-text-muted); font-weight:500; }
.tgt-sales { font-weight:600; }
.tgt-comm { font-weight:700; color:var(--color-success); }
.tgt-empty { padding:26px; text-align:center; color:var(--color-text-muted); }
.tgt-loader { padding:40px; text-align:center; color:var(--color-text-muted); }
[data-theme=dark] .tgt-month, [data-theme=dark] .tgt-input-wrap { background:oklch(24% 0.02 264); border-color:oklch(32% 0.02 264); }


/* === delivery-performance custom-date === */
/* No new CSS required — reuses .page-actions, .input.input-sm, .btn-group,
   .vkpi-strip, .inv-insights, .data-table, .text-muted (all already in styles.css). */

/* ── Report header date-range toolbars — compact, inline, never full-width ──
   The global input[type=date]{width:100%} made the From/To pickers stretch and
   stack vertically in .page-actions. Pin them to a fixed width + lay the range
   out as a tidy wrapping flex so the report header reads as a clean toolbar. */
.page-actions input[type="date"],
.page-actions input[type="month"] {
  width: 152px;
  flex: 0 0 auto;
}
.ds-range, .pds-range, .vat-range, .sbc-range, .sbr-range, .sc-range, .scmp-range,
.dlp-range, .dead-range, .deadstock-range, .drr-range, .o2c-range, .agc-range,
.rep-range, .reportRange, .rpt-range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 100%;
}

/* ── Unified finance date-range toolbar (2026-06-23) ──────────────────────────
   Fixes the staggered flex-end wrap (date inputs + Apply + 4 loose preset buttons
   spilling onto a second line, right-pushed). Now: the date range is one block,
   the presets are ONE segmented control that wraps as a unit, Export PDF sits at
   the right edge. Used by the kit finToolbar + the custom finance toolbars. */
.fin-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 14px;
}
.fin-tb-dates { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fin-tb-dates input[type="date"] { width: 150px; flex: 0 0 auto; }
.fin-tb-arrow { color: var(--text-3); font-size: 14px; }
.fin-seg {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  background: var(--surface);
}
.fin-seg-btn {
  border: 0;
  border-left: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.1;
  transition: background var(--t-fast, .15s), color var(--t-fast, .15s);
}
.fin-seg-btn:first-child { border-left: 0; }
.fin-seg-btn:hover { background: var(--surface-hover); color: var(--text); }
.fin-seg-btn.active { background: var(--accent); color: #fff; }
.fin-tb-pdf { margin-left: auto; }
@media (max-width: 680px) {
  .fin-tb-pdf { margin-left: 0; }
  .fin-seg { width: 100%; }
  .fin-seg-btn { flex: 1 1 0; text-align: center; padding: 8px 6px; }
}

/* Finance search field — magnifier icon embedded via a flex container (NOT the
   .search-wrap absolute-icon pattern, which overlaps); reusable across finance. */
.fin-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  min-width: 240px;
  max-width: 460px;
  flex: 1 1 280px;
  transition: border-color var(--t-fast, .15s), box-shadow var(--t-fast, .15s);
}
.fin-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fin-search > svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.fin-search input {
  border: 0; background: transparent; outline: none;
  flex: 1; min-width: 0; padding: 0;
  font-size: 14px; color: var(--text);
}
.fin-search input::placeholder { color: var(--text-3); }
.fin-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.fin-search .fin-search-clear {
  border: 0; background: transparent; color: var(--text-3);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px; flex: none;
}
.fin-search .fin-search-clear:hover { color: var(--text); }
/* the From→To arrow stays inline + muted */
.ds-range > span, .page-actions .range-arrow { color: var(--text-3); flex: 0 0 auto; }

/* ── Finance kit — plain-English line, guides, visual primitives ─────────── */
.fin-plain { max-width: 780px; line-height: 1.5; color: var(--text-2); }
/* "How to read this" guide */
.fin-guide { margin: var(--sp-2) 0 var(--sp-3); border: 1px solid var(--border); border-left: 3px solid var(--accent, #6366F1); border-radius: var(--r-md); background: color-mix(in oklch, #6366F1 5%, var(--surface)); overflow: hidden; }
.fin-guide > summary { cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--text-2); display: flex; align-items: center; gap: 6px; list-style: none; }
.fin-guide > summary::-webkit-details-marker { display: none; }
.fin-guide > summary svg { width: 14px; height: 14px; }
.fin-guide[open] > summary { border-bottom: 1px solid var(--border); }
.fin-guide-body { padding: 10px 14px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.fin-guide-body p { margin: 0 0 6px; } .fin-guide-body ul { margin: 4px 0 8px; padding-left: 18px; } .fin-guide-body li { margin: 2px 0; }
.fin-guide-body strong { color: var(--text); }
/* waterfall (P&L) */
.fin-waterfall { display: flex; flex-direction: column; gap: 7px; padding: 4px 0; }
.fin-wf-row { display: grid; grid-template-columns: 140px 1fr 110px; align-items: center; gap: 10px; }
.fin-wf-label { font-size: 13px; color: var(--text-2); font-weight: 600; }
.fin-wf-track { height: 16px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.fin-wf-bar { height: 100%; border-radius: 4px; }
.fin-wf-bar.wf-in { background: #10B981; } .fin-wf-bar.wf-out { background: #F59E0B; } .fin-wf-bar.wf-total { background: #6366F1; }
.fin-wf-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12.5px; color: var(--text); }
.fin-wf-val.is-neg { color: #DC2626; }
/* equation bars (Balance Sheet / TB) */
.fin-eqbar { display: flex; align-items: flex-end; justify-content: center; gap: 18px; padding: 12px 0; flex-wrap: wrap; }
.fin-eq-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fin-eq-stack { width: 70px; height: 150px; display: flex; flex-direction: column-reverse; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.fin-eq-seg { width: 100%; min-height: 2px; }
.fin-eq-emerald { background: #10B981; } .fin-eq-amber { background: #F59E0B; } .fin-eq-violet { background: #8B5CF6; } .fin-eq-sky { background: #0EA5E9; } .fin-eq-indigo { background: #6366F1; } .fin-eq-slate { background: #94A3B8; } .fin-eq-rose { background: #F43F5E; }
.fin-eq-cap { font-size: 12px; text-align: center; color: var(--text-3); }
.fin-eq-cap strong { color: var(--text); font-size: 14px; }
.fin-eq-eq { font-size: 24px; font-weight: 700; color: var(--text-3); align-self: center; }
.fin-eq-legend { width: 100%; display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center; margin-top: 6px; font-size: 11.5px; color: var(--text-2); }
.fin-eq-leg { display: inline-flex; align-items: center; gap: 5px; } .fin-eq-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
/* ageing stack */
.fin-agestack-wrap { display: flex; flex-direction: column; gap: 8px; }
.fin-agestack { display: flex; height: 22px; border-radius: 5px; overflow: hidden; background: var(--surface-2); }
.fin-age-seg { height: 100%; } .fin-age-seg.is-clickable { cursor: pointer; }
.fin-age-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 11.5px; color: var(--text-2); }
.fin-age-leg { display: inline-flex; align-items: center; gap: 5px; } .fin-age-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
/* diverge bars (cash flow) */
.fin-diverge { display: flex; flex-direction: column; gap: 6px; }
.fin-dv-row { display: grid; grid-template-columns: 1fr 130px 1fr 96px; align-items: center; gap: 6px; }
.fin-dv-out { display: flex; justify-content: flex-end; } .fin-dv-in { display: flex; justify-content: flex-start; }
.fin-dv-bar { height: 15px; border-radius: 3px; } .fin-dv-bar-out { background: #F43F5E; } .fin-dv-bar-in { background: #10B981; }
.fin-dv-label { text-align: center; font-size: 11.5px; color: var(--text-2); }
.fin-dv-net { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; } .fin-dv-net.is-neg { color: #DC2626; }
/* labelled % bars */
.fin-bars { display: flex; flex-direction: column; gap: 6px; }
.fin-bar-row { display: grid; grid-template-columns: 150px 1fr 96px; align-items: center; gap: 10px; }
.fin-bar-label { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-bar-track { height: 14px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.fin-bar-fill { display: block; height: 100%; border-radius: 4px; }
.fin-bar-indigo { background: #6366F1; } .fin-bar-emerald { background: #10B981; } .fin-bar-amber { background: #F59E0B; } .fin-bar-rose { background: #F43F5E; } .fin-bar-sky { background: #0EA5E9; } .fin-bar-violet { background: #8B5CF6; } .fin-bar-slate { background: #94A3B8; }
/* finance hub quick-category icon + P&L statement section header (QA-2026-06-23) */
.fin-qcat-ic { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; opacity:.85; }
.fin-stmt-section td, .fin-stmt-section { font-weight:600; text-transform:uppercase; letter-spacing:.4px; font-size:12px; color:var(--text-2); }
.fin-bar-val { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--text); }
/* VAT funnel */
.fin-funnel { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; }
.fin-fn-step { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-radius: 6px; color: #fff; min-width: 180px; }
.fin-fn-in { background: #0EA5E9; } .fin-fn-out { background: #F59E0B; } .fin-fn-total { background: #6366F1; }
.fin-fn-label { font-size: 13px; font-weight: 600; } .fin-fn-val { font-variant-numeric: tabular-nums; font-weight: 700; }
/* balanced banner */
.fin-balance-banner { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: var(--r-md); font-size: 14px; margin: 10px 0; }
.fin-balance-banner svg { width: 18px; height: 18px; flex: none; }
.fin-balance-banner.is-balanced { background: color-mix(in oklch, #10B981 12%, var(--surface)); border: 1px solid color-mix(in oklch, #10B981 35%, var(--border)); color: color-mix(in oklch, #10B981 70%, var(--text)); }
.fin-balance-banner.is-off { background: color-mix(in oklch, #F43F5E 12%, var(--surface)); border: 1px solid color-mix(in oklch, #F43F5E 35%, var(--border)); color: color-mix(in oklch, #F43F5E 70%, var(--text)); }
@media (max-width: 600px) {
  .fin-wf-row { grid-template-columns: 100px 1fr 88px; }
  .fin-dv-row { grid-template-columns: 1fr 90px 1fr 72px; }
  .fin-bar-row { grid-template-columns: 110px 1fr 80px; }
}

/* Finance hub — colour-keyed "jump to a report" category cards */
.fin-qcat { border:1px solid var(--border); border-top:3px solid var(--accent,#6366F1); border-radius:var(--r-md); background:var(--surface); padding:10px 12px; }
.fin-qcat-indigo { --accent:#6366F1; } .fin-qcat-sky { --accent:#0EA5E9; } .fin-qcat-amber { --accent:#F59E0B; } .fin-qcat-emerald { --accent:#10B981; } .fin-qcat-violet { --accent:#8B5CF6; } .fin-qcat-rose { --accent:#F43F5E; }
.fin-qcat-hd { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-3); margin-bottom:6px; display:flex; align-items:center; gap:5px; }
.fin-qcat-btn { display:flex; align-items:center; gap:6px; width:100%; text-align:left; padding:5px 7px; border-radius:6px; font-size:12.5px; color:var(--text-2); background:transparent; border:0; cursor:pointer; }
.fin-qcat-btn:hover { background:var(--surface-2); color:var(--text); }
.fin-qcat-btn svg { width:14px; height:14px; }

/* ── Finance nav v2 — self-explaining section description + page cards ───── */
.finx-groupdesc { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-3); margin:8px 2px 10px; }
.finx-groupdesc svg { width:13px; height:13px; flex:none; opacity:.7; }
.finx-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:8px; }
.finx-card { display:flex; align-items:flex-start; gap:9px; text-align:left; padding:9px 11px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); cursor:pointer; transition:border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.finx-card:hover { border-color:color-mix(in oklch, #6366F1 40%, var(--border)); background:var(--surface-2); }
.finx-card.active { border-color:#6366F1; background:color-mix(in oklch, #6366F1 8%, var(--surface)); box-shadow:0 0 0 1px #6366F1 inset; }
.finx-card-ic { width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:8px; background:color-mix(in oklch, #6366F1 12%, var(--surface-2)); color:#6366F1; }
.finx-card-ic svg { width:16px; height:16px; }
.finx-card.active .finx-card-ic { background:#6366F1; color:#fff; }
.finx-card-tx { display:flex; flex-direction:column; gap:1px; min-width:0; }
.finx-card-name { font-size:14px; font-weight:600; color:var(--text); }
.finx-card-desc { font-size:12px; line-height:1.35; color:var(--text-3); }
@media (max-width:600px){ .finx-cards { grid-template-columns:1fr 1fr; } .finx-card-desc { display:none; } }

/* ── Companies cockpit (2026-06-23) — card grid + revenue-share insight ───── */
.comp-share { margin: 10px 0 2px; }
.comp-share-bar { height: 6px; border-radius: 4px; background: var(--surface-2, #eef0f4); overflow: hidden; }
.comp-share-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent, #6366F1), #8b5cf6); border-radius: 4px; }
.comp-share-lbl { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.comp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.comp-stat { background: var(--surface-2, #f7f8fa); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.comp-stat-v { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; }
.comp-stat-l { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-3); margin-top: 2px; }
.comp-stat-sub { font-size: 12px; font-weight: 500; color: var(--text-3); }
.comp-insights { margin-bottom: 14px; }
.comp-ins-body { padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.comp-ins-row { display: flex; align-items: center; gap: 10px; }
.comp-ins-name { flex: 0 0 96px; font-size: 13px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-ins-track { flex: 1; height: 10px; border-radius: 5px; background: var(--surface-2, #eef0f4); overflow: hidden; }
.comp-ins-fill { display: block; height: 100%; background: #6366F1; border-radius: 5px; }
.comp-ins-fill.is-main { background: linear-gradient(90deg, #6366F1, #8b5cf6); }
.comp-ins-val { flex: 0 0 auto; font-size: 13px; font-weight: 600; min-width: 130px; text-align: right; }

/* ── Users — Role Center footprint + Special Access cards (2026-06-23) ────── */
.rc-footprint { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rc-fp { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--surface-2, #f4f5f8); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.rc-fp svg { width: 12px; height: 12px; }
.rc-fp-warn { color: #9a6a00; background: #fff7e6; border-color: #f0d28a; }
.sp-card { border: 1px solid var(--border); border-left: 4px solid var(--accent, #6366F1); border-radius: 9px; padding: 11px 13px; background: var(--surface); }
.sp-card-h { display: flex; align-items: center; gap: 8px; }
.sp-rose { border-left-color: #F43F5E; } .sp-amber { border-left-color: #F59E0B; }
.sp-sky { border-left-color: #0EA5E9; } .sp-violet { border-left-color: #8B5CF6; }

/* ── Activity log — insight grid + metadata preview chips (2026-06-23) ────── */
.act-ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: var(--sp-3); }
@media (max-width: 900px) { .act-ins-grid { grid-template-columns: 1fr; } }
.act-meta-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.act-meta-chip { font-size: 10.5px; background: var(--surface-2, #f4f5f8); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; color: var(--text-2); }
.act-meta-chip b { font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .3px; font-size: 9.5px; margin-right: 3px; }

/* ── Bulk imports — wizard stepper (2026-06-23) ──────────────────────────── */
.imp-stepper { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.imp-step { display: inline-flex; align-items: center; gap: 7px; }
.imp-step-dot { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 2px solid var(--border); color: var(--text-3); background: var(--surface); }
.imp-step-lbl { font-size: 13px; font-weight: 600; color: var(--text-3); }
.imp-step-now .imp-step-dot { border-color: var(--accent, #6366F1); color: #fff; background: var(--accent, #6366F1); }
.imp-step-now .imp-step-lbl { color: var(--text); }
.imp-step-done .imp-step-dot { border-color: #10B981; background: #10B981; color: #fff; }
.imp-step-done .imp-step-lbl { color: var(--text-2); }
.imp-step-line { flex: 1; height: 2px; background: var(--border); max-width: 48px; }

/* ── Offline Queue cockpit — presentation only ─────────────────── */
.oq-mid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-3); margin:var(--sp-3) 0; }
@media (max-width:900px){ .oq-mid{ grid-template-columns:1fr; } }
.oq-log{ max-height:300px; overflow:auto; display:flex; flex-direction:column; }
.oq-log-row{ display:flex; align-items:center; gap:8px; padding:7px 2px; border-bottom:1px solid var(--border); }
.oq-log-row:last-child{ border-bottom:0; }
.oq-kind-pill{ display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:var(--weight-semi); letter-spacing:.3px; text-transform:uppercase; padding:1px 6px; border-radius:999px; line-height:1.6; flex:none; }
.oq-kind-pill svg{ width:10px; height:10px; }
.oq-kind-order{ color:var(--color-accent); background:color-mix(in oklch, var(--color-accent) 12%, transparent); }
.oq-kind-pay{ color:var(--color-success); background:color-mix(in oklch, var(--color-success) 14%, transparent); }
.oq-table tr.oq-row-dup > td{ background:color-mix(in oklch, var(--color-warning) 7%, transparent); }
.oq-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:48px 24px; color:var(--text-2); }
.oq-empty svg{ color:var(--color-success); opacity:.85; margin-bottom:10px; }
.oq-empty-title{ font-size:var(--text-base); font-weight:var(--weight-semi); color:var(--text-1); }
.oq-empty-sub{ font-size:var(--text-sm); color:var(--text-2); max-width:460px; margin-top:4px; line-height:1.5; }
/* ── Vibrant Help Center ─────────────────────────────────────────────── */
.help-page .vkpi-strip { margin-bottom: 16px; }

/* Section label — self-defined because .comp-section-label is NOT a global
   kit class (verified: only .comp-insights/.comp-ins-*/.comp-stat*/.comp-share*
   exist). Namespaced to .help-page so it can't collide with anything. */
.help-page .comp-section-label {
  display: block; margin: 6px 0 10px;
  font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Hero search */
.help-hero { margin: 4px 0 18px; }
.help-hero-search.fin-search { width: 100%; max-width: none; height: 52px; border-radius: 14px;
  font-size: 16px; box-shadow: 0 2px 10px rgba(15,23,42,.06); }
.help-hero-search.fin-search input { font-size: 16px; }
.help-search-hint { display: block; margin-top: 8px; font-size: 13px; color: var(--color-text-muted); }

/* Walkthrough card */
.help-walkthrough-card { margin-bottom: 18px; }
.help-walkthrough-card .card-title { display: inline-flex; align-items: center; gap: 8px; }
.help-walkthrough-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0 2px; }
.help-walkthrough-item { display: inline-flex; align-items: center; gap: 12px;
  padding: 9px 14px; border: 1px solid var(--color-border); border-radius: 10px;
  background: var(--color-surface-2); text-decoration: none; color: var(--color-text);
  font-weight: 600; font-size: 14px; transition: all .15s; }
.help-walkthrough-item:hover { border-color: var(--color-primary); background: var(--color-surface);
  transform: translateY(-1px); box-shadow: 0 3px 10px rgba(15,23,42,.08); }
.help-walkthrough-item-arrow { font-size: 13px; color: var(--color-primary); font-weight: 700; }

/* Category card grid */
.help-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin-bottom: 24px; }
.help-cat-card { display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px 16px; border: 1px solid var(--color-border); border-left: 4px solid var(--color-border);
  border-radius: 12px; background: var(--color-surface); cursor: pointer; transition: all .15s;
  font: inherit; width: 100%; }
.help-cat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15,23,42,.1); }
.help-cat-card.active { box-shadow: 0 0 0 2px var(--color-primary) inset; }
.help-cat-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.help-cat-ico svg { width: 20px; height: 20px; }
.help-cat-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.help-cat-name { font-weight: 700; font-size: 14px; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.help-cat-sub { font-size: 13px; color: var(--color-text-muted); }
.help-cat-count { font-weight: 800; font-size: 18px; color: var(--color-text);
  font-variant-numeric: tabular-nums; }

/* Accent palette for category cards (border-left + icon tint) */
.help-cat-card.help-cat-indigo  { border-left-color:#6366f1; } .help-cat-card.help-cat-indigo  .help-cat-ico{background:rgba(99,102,241,.12);color:#6366f1;}
.help-cat-card.help-cat-violet  { border-left-color:#8b5cf6; } .help-cat-card.help-cat-violet  .help-cat-ico{background:rgba(139,92,246,.12);color:#8b5cf6;}
.help-cat-card.help-cat-sky     { border-left-color:#0ea5e9; } .help-cat-card.help-cat-sky     .help-cat-ico{background:rgba(14,165,233,.12);color:#0ea5e9;}
.help-cat-card.help-cat-emerald { border-left-color:#10b981; } .help-cat-card.help-cat-emerald .help-cat-ico{background:rgba(16,185,129,.12);color:#10b981;}
.help-cat-card.help-cat-amber   { border-left-color:#f59e0b; } .help-cat-card.help-cat-amber   .help-cat-ico{background:rgba(245,158,11,.14);color:#d97706;}
.help-cat-card.help-cat-slate   { border-left-color:#64748b; } .help-cat-card.help-cat-slate   .help-cat-ico{background:rgba(100,116,139,.14);color:#475569;}

/* List header + clear chip */
.help-list-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.help-list-head .comp-section-label { margin: 0; }

/* Article sections */
.help-cat-section { margin-bottom: 24px; }
.help-cat-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 12px; }
.help-cat-title-ico { display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px; }
.help-cat-title-ico svg { width: 15px; height: 15px; }
.help-cat-title-ico.help-cat-indigo  { background:rgba(99,102,241,.12);color:#6366f1;}
.help-cat-title-ico.help-cat-violet  { background:rgba(139,92,246,.12);color:#8b5cf6;}
.help-cat-title-ico.help-cat-sky     { background:rgba(14,165,233,.12);color:#0ea5e9;}
.help-cat-title-ico.help-cat-emerald { background:rgba(16,185,129,.12);color:#10b981;}
.help-cat-title-ico.help-cat-amber   { background:rgba(245,158,11,.14);color:#d97706;}
.help-cat-title-ico.help-cat-slate   { background:rgba(100,116,139,.14);color:#475569;}
.help-cat-title-count { margin-left: auto; font-size: 13px; font-weight: 700;
  color: var(--color-text-muted); background: var(--color-surface-2);
  border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 9px; }

.help-article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.help-article-card { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-border);
  border-radius: 12px; background: var(--color-surface); text-decoration: none; color: inherit;
  transition: all .15s; position: relative; overflow: hidden; }
.help-article-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--color-border); }
.help-article-card.help-cat-indigo::before  { background:#6366f1; }
.help-article-card.help-cat-violet::before  { background:#8b5cf6; }
.help-article-card.help-cat-sky::before     { background:#0ea5e9; }
.help-article-card.help-cat-emerald::before { background:#10b981; }
.help-article-card.help-cat-amber::before   { background:#f59e0b; }
.help-article-card.help-cat-slate::before   { background:#64748b; }
.help-article-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,23,42,.1);
  border-color: var(--color-primary); }
.help-article-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-2); color: var(--color-text-muted); }
.help-article-icon svg { width: 17px; height: 17px; }
.help-article-main { min-width: 0; flex: 1 1 auto; }
.help-article-title { font-weight: 700; font-size: 14.5px; color: var(--color-text); margin-bottom: 4px; }
.help-article-summary { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.help-article-foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.help-article-readmore { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--color-primary);
  display: inline-flex; align-items: center; gap: 4px; }
.help-article-readmore svg { width: 13px; height: 13px; }

/* Empty state */
.help-empty { text-align: center; padding: 48px 20px; }
.help-empty-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-surface-2); color: var(--color-text-muted); }
.help-empty-icon svg { width: 26px; height: 26px; }
.help-empty-title { font-weight: 700; font-size: 16px; margin-bottom: 6px; }
.help-empty-body { font-size: 14px; color: var(--color-text-muted); }

@media (max-width: 720px) {
  .help-cat-grid { grid-template-columns: 1fr 1fr; }
  .help-article-grid { grid-template-columns: 1fr; }
}
/* ===================== Accounting Import — AC Pro workbench ===================== */
.aci { font-size: 14px; }
.aci .aci-bar { display:flex; gap:10px; align-items:flex-start; background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:10px; padding:11px 14px; font-size:.85rem; color:var(--color-text-muted); margin-top:var(--sp-3); line-height:1.5; }
.aci .aci-bar > svg { flex:none; width:16px; height:16px; margin-top:1px; opacity:.65; }
.aci .aci-bar strong { color:var(--color-text); font-weight:600; }

/* KPI strip */
.aci .aci-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:var(--sp-3); }
.aci .aci-kpi { background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; padding:12px 14px; min-width:0; }
.aci .aci-kpi-l { font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color:var(--color-text-muted); font-weight:600; }
.aci .aci-kpi-v { font-size:1.15rem; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums; line-height:1.2; }
.aci .aci-kpi-s { font-size:.74rem; color:var(--color-text-muted); margin-top:3px; }
.aci button.aci-kpi { text-align:left; cursor:pointer; font:inherit; transition:border-color .12s, background .12s; }
.aci button.aci-kpi:hover { border-color:var(--color-primary); }
.aci button.aci-kpi.on { border-color:var(--color-primary); box-shadow:inset 0 0 0 1px var(--color-primary); }

/* Card + section header */
.aci .aci-card { background:var(--color-surface); border:1px solid var(--color-border); border-radius:10px; margin-top:var(--sp-3); overflow:hidden; }
.aci .aci-card-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; border-bottom:1px solid var(--color-border); font-weight:600; font-size:.88rem; }
.aci .aci-card-h .sub { font-weight:400; color:var(--color-text-muted); font-size:.82rem; }

/* Professional gridded table */
.aci .aci-tw { overflow:auto; }
.aci table.aci-t { width:100%; border-collapse:separate; border-spacing:0; font-size:.82rem; }
.aci table.aci-t thead th { position:sticky; top:0; z-index:1; background:var(--color-surface-2); text-align:left; font-size:.66rem; letter-spacing:.03em; text-transform:uppercase; color:var(--color-text-muted); font-weight:700; padding:9px 12px; border-bottom:2px solid var(--color-border); border-right:1px solid var(--color-border); white-space:nowrap; }
.aci table.aci-t thead th:last-child { border-right:0; }
.aci table.aci-t thead th.num { text-align:right; }
.aci table.aci-t thead th.ctr { text-align:center; }
.aci table.aci-t tbody td { padding:8px 12px; border-bottom:1px solid var(--color-border); border-right:1px solid var(--color-border); vertical-align:middle; }
.aci table.aci-t tbody td:last-child { border-right:0; }
.aci table.aci-t tbody tr:last-child td { border-bottom:0; }
.aci table.aci-t tbody tr:hover td { background:var(--color-surface-2); }
.aci table.aci-t td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.aci table.aci-t td.ctr { text-align:center; }
.aci table.aci-t td.strong { font-weight:600; }
.aci table.aci-t .owed { color:var(--color-danger); font-weight:600; }
.aci table.aci-t .ok { color:var(--color-success); font-weight:600; }
.aci table.aci-t td.muted, .aci table.aci-t .muted { color:var(--color-text-muted); }
.aci .aci-empty { padding:34px 16px; text-align:center; color:var(--color-text-muted); }

/* Pager */
.aci .aci-pager { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-top:1px solid var(--color-border); flex-wrap:wrap; font-size:.82rem; color:var(--color-text-muted); }
.aci .aci-pager .grp { display:flex; align-items:center; gap:8px; }

/* Inline badge sizing inside aci tables */
.aci table.aci-t .badge { font-size:.7rem; padding:2px 8px; }

/* Toolbar (search / filters) */
.aci .aci-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:var(--sp-3); }
.aci .aci-search { display:flex; align-items:center; gap:6px; background:var(--color-surface); border:1px solid var(--color-border); border-radius:8px; padding:0 10px; height:34px; }
.aci .aci-search svg { width:15px; height:15px; opacity:.55; flex:none; }
.aci .aci-search input { border:0; outline:0; background:transparent; height:32px; font:inherit; min-width:220px; color:var(--color-text); }

/* two-column detail (AC Pro vs live) collapses on narrow */
@media (max-width:900px){ .aci .aci-detail-cols { grid-template-columns:1fr !important; } }
.aci table.aci-t select.aci-assign { font:inherit; font-size:.8rem; padding:4px 8px; border:1px solid var(--color-border); border-radius:6px; background:var(--color-surface); color:var(--color-text); max-width:160px; }
.aci table.aci-t select.aci-assign:hover { border-color:var(--color-primary); }