/* ================================================================
   Design starter — tokens, shell, and shared component styles
   ----------------------------------------------------------------
   Use as the foundation for the project's app.css. Sections labelled
   GENERIC carry across projects unchanged. Sections labelled PATTERN
   are common shapes (KPI tile, status badge, etc.) — keep the shape,
   rename and recolor per project. Drop blocks the project doesn't use.

   Pairs with: Bootstrap 5.x base, DataTables, Litepicker.
   ================================================================ */

:root {
  /* Brand */
  --color-brand-red: #d2151e;
  --color-brand-red-hover: #b01219;
  --color-brand-red-soft: #fde8e9;
  --color-brand-red-softer: #fef4f5;

  /* Neutrals */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-bg: #f7f9fb;
  --color-pattern: #f1f1f1;
  /* Ink ramp — five steps, darkest → lightest. Text hierarchy comes from
     THIS ramp plus font weight (see --font-*), not from a second or condensed
     typeface. Use: heading = titles / KPI values; text = body; muted = secondary;
     subtle = meta / captions. faint is decorative only — it does NOT meet text
     contrast, so never use it for essential copy. */
  --color-text-heading: #13161d;
  --color-text: #1a1f2c;
  --color-text-muted: #6b7280;
  --color-text-subtle: #9ca3af;
  --color-text-faint: #b3b9c4;
  --color-border: #e5e7eb;
  --color-border-soft: #eef0f3;
  --color-surface-hover: #f4f6f9;

  /* Semantic */
  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-warning: #d97706;
  --color-warning-soft: #fef3c7;
  --color-info: #0284c7;
  --color-info-soft: #e0f2fe;
  --color-danger: var(--color-brand-red);
  --color-danger-soft: var(--color-brand-red-soft);
  --color-neutral: #4b5563;
  --color-neutral-soft: #f1f3f5;

  /* PATTERN: extra accent colors for categorical visualizations
     (charts, breakdowns, classification labels) — rename per project */
  --color-accent-1: #7c3aed;
  --color-accent-1-soft: #ede9fe;
  --color-accent-2: #0891b2;
  --color-accent-2-soft: #cffafe;
  --color-accent-3: #c2410c;
  --color-accent-3-soft: #ffedd5;
  --color-accent-4: #0d9488;
  --color-accent-4-soft: #ccfbf1;
  --color-accent-5: #64748b;
  --color-accent-5-soft: #e2e8f0;

  /* PMS status hues beyond the semantic set (BRIEF_design §1 vocabulary).
     indigo = pending-review · teal = terminal-good (Confirmed/Unloaded) ·
     cyan = on-vessel · discard = muted red-grey · settled = Closed/dark. */
  --color-indigo: #4f46e5;
  --color-indigo-soft: #e3e6fd;
  --color-indigo-text: #3730a3;
  --color-teal: #0d9488;
  --color-teal-soft: #cdf5ef;
  --color-teal-text: #0f5f56;
  --color-cyan: #0891b2;
  --color-cyan-soft: #d3f3fb;
  --color-cyan-text: #0e6379;
  --color-discard: #9a6b6f;
  --color-discard-soft: #f4ecec;
  --color-discard-text: #7c5457;
  --color-settled: #334155;
  --color-settled-soft: #e2e8f0;
  --color-settled-text: #1e293b;

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --topbar-height: 60px;
  /* Content measure — the page shell stops growing here and centres itself
     (topbar row + page content share the gutter, so they stay aligned).
     Sized to sit just past an XL desktop: a 1920px screen minus the 240px
     sidebar is ~1680px, so 1560 + gutters fills it and anything wider gets
     even margins. Per-page escape hatch: add .layout-fluid to .app-shell
     (see "Content measure" below) to go back to full-width liquid. */
  --content-max: 1560px;
  --content-gutter: 22px;

  /* Density */
  --card-padding: 16px;
  --card-radius: 10px;
  --table-row-py: 10px;
  --table-cell-px: 14px;
  --gap-section: 18px;
  --gap-card: 14px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-sidebar: 1px 0 0 var(--color-border-soft), 4px 0 24px -8px rgba(15, 23, 42, 0.04);

  /* Type — a two-family system: Inter (sans: body, headings, labels) and
     Roboto Mono (mono: IDs, numbers, code, timestamps). Hierarchy comes from
     Inter's weight range + the ink ramp above, NOT from a condensed face.
     The base layout / Blade template loads both fonts (CDN, no build step);
     the CSS only names them and keeps system fallbacks so it degrades cleanly.
     Roboto Mono has no programming ligatures, so code and config render
     exactly as typed. --font-cond is the label / eyebrow role — it folds into
     Inter to keep the system two-family; repoint it (and add a CDN link) only
     if a project genuinely wants a condensed face. */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-cond: var(--font-sans);

  /* Status text tiers — readable text/icon colors on tinted badges.
     (Names are provisional; rename per project. Previously these darks
      were hardcoded literals scattered through the badge rules.) */
  --color-success-text: #14532d;
  --color-success-strong: #15803d;
  --color-warning-text: #92400e;
  --color-warning-strong: #b45309;
  --color-info-text: #075985;
  --color-neutral-text: #374151;
}

/* Bootstrap theme overrides ----------------------------------- */
:root {
  --bs-primary: var(--color-brand-red);
  --bs-primary-rgb: 210, 21, 30;
  --bs-success: var(--color-success);
  --bs-warning: var(--color-warning);
  --bs-info: var(--color-info);
  --bs-danger: var(--color-brand-red);
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: 14px;
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--card-radius);
}

/* Base ---------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--color-brand-red); text-decoration: none; }
a:hover { color: var(--color-brand-red-hover); text-decoration: underline; }

/* Per-row quick-action icon buttons for DataTable rows. Kept neutral at
   rest so they don't compete with the row's content; brand-red on hover.
   Icon actions render as a segmented button group — a shared hairline
   border + hairline dividers — so they read as controls, not hyperlinks.
   Groups holding full .btn children (e.g. "Review") stay ungrouped. */
.row-actions { display: inline-flex; gap: 2px; vertical-align: middle; }
.row-actions:has(> .row-action-btn) {
  gap: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 7px;
}
.row-actions:has(> .row-action-btn) > .row-action-btn {
  width: 30px; height: 26px;
  border-radius: 0;
}
.row-actions:has(> .row-action-btn) > .row-action-btn.is-compact { width: 26px; height: 22px; }
.row-actions > .row-action-btn + .row-action-btn { border-left: 1px solid var(--color-border); }
.row-actions:has(> .row-action-btn) > .row-action-btn:first-child {
  border-top-left-radius: 6px; border-bottom-left-radius: 6px;
}
.row-actions:has(> .row-action-btn) > .row-action-btn:last-child {
  border-top-right-radius: 6px; border-bottom-right-radius: 6px;
}
.row-actions:has(> .row-action-btn) > .row-action-btn:hover { background: var(--color-surface-hover); }
.row-action-btn {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;                 /* also used on native <button> — kill UA chrome */
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 6px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.row-action-btn:hover {
  background: var(--color-bg);
  color: var(--color-brand-red);
  text-decoration: none;
}
.row-action-btn i { font-size: 14px; line-height: 1; }
/* Compact variant — for dense rows or tight card headers. */
.row-action-btn.is-compact { width: 22px; height: 22px; font-size: 12px; border-radius: 5px; }
.row-action-btn.is-compact i { font-size: 12px; }
/* Blocked action — rendered, not hidden, so the row still shows what is
   possible and the title says why (e.g. clearing a bilty with no approved
   inspection report). Server re-checks regardless. */
.row-action-btn.is-disabled,
.row-action-btn[disabled] {
  color: var(--color-text-subtle);
  cursor: not-allowed;
  opacity: 0.55;
}
.row-action-btn.is-disabled:hover,
.row-action-btn[disabled]:hover,
.row-actions:has(> .row-action-btn) > .row-action-btn[disabled]:hover {
  background: transparent;
  color: var(--color-text-subtle);
}

/* In-table links read as normal text — a soft dotted underline is the only
   default hint that the cell is clickable. Hover swaps to brand-red + solid
   underline. Applied to any anchor inside a DataTable cell so hyperlinked
   rows don't bleed brand-red across the grid. */
.cell-link {
  color: var(--color-text);
  text-decoration: underline dotted var(--color-border);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.cell-link:hover {
  color: var(--color-brand-red);
  text-decoration: underline solid var(--color-brand-red);
}

::selection { background: var(--color-brand-red-soft); color: var(--color-brand-red-hover); }

/* Numbers / IDs */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.cond { font-family: var(--font-cond); }

/* Layout shell ------------------------------------------------- */
.app-shell { min-height: 100vh; display: flex; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--color-white);
  border-right: 1px solid var(--color-border-soft);
  /* PMS: the sidebar sits in normal document flow and stretches with the
     page — the whole document scrolls as one and the nav NEVER gets its own
     scrollbar. Short pages leave blank space under the nav (accepted).
     Off-canvas fixed positioning still applies on mobile (see @media 768px). */
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: width 0.18s ease;
  box-shadow: var(--shadow-sidebar);
}

.sidebar-brand {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--color-border-soft);
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--color-brand-red);
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.sidebar-brand-text {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
}
.sidebar-brand-text small {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-top: -1px;
}

.sidebar-nav {
  flex: 1;
  overflow: visible; /* PMS: no internal scrollbar — the document scrolls */
  padding: 12px 10px;
}
.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  padding: 14px 12px 6px;
  white-space: nowrap;
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border-radius: 7px;
  color: var(--color-text);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.sidebar-link:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  text-decoration: none;
}
.sidebar-link i {
  font-size: 17px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.sidebar-link.active {
  background: var(--color-brand-red-soft);
  color: var(--color-brand-red);
}
.sidebar-link.active i { color: var(--color-brand-red); }
.sidebar-link .badge-count {
  margin-left: auto;
  background: var(--color-neutral-soft);
  color: var(--color-text-muted);
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  font-family: var(--font-cond);
}
.sidebar-link.active .badge-count {
  background: var(--color-brand-red);
  color: white;
}
.sidebar-sublink {
  display: flex;
  align-items: center;
  padding: 6px 12px 6px 43px;
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 400;
  border-radius: 7px;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.sidebar-sublink:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  text-decoration: none;
}
.sidebar-sublink.active {
  color: var(--color-brand-red);
  font-weight: 600;
  background: var(--color-brand-red-soft);
}
/* Attention badge on a nav sublink: count of items needing action (e.g.
   RFQs pending allocation). Server renders it only when count > 0.
   Red + exclamation icon — colour never carries the meaning alone. */
.sublink-alert {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--color-brand-red);
  color: white;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 7px 3px 5px;
  border-radius: 9px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.sublink-alert .bi { font-size: 9px; }
.sidebar-sublink.active .sublink-alert { background: var(--color-brand-red); color: white; }

/* Sidebar group — PMS: collapsible parent with sub-items. The server
   renders the active page's group with .is-open (+ .has-active) and the
   link with .active; app.js only toggles on click. */
.sidebar-group { display: flex; flex-direction: column; }
.sidebar-group-label {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border-radius: 7px;
  color: var(--color-text);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.sidebar-group-label:hover { background: var(--color-surface-hover); }
.sidebar-group-label .group-caret {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-text-subtle);
  transition: transform 0.15s ease;
}
.sidebar-group.is-open > .sidebar-group-label .group-caret { transform: rotate(90deg); }
.sidebar-group:not(.is-open) .sidebar-sublinks { display: none; }
/* Closed group holding the active page: tint icon + darken label so the
   user can still locate themselves (icon + weight, not colour alone). */
.sidebar-group.has-active:not(.is-open) > .sidebar-group-label { color: var(--color-text-heading); }
.sidebar-group.has-active:not(.is-open) > .sidebar-group-label i { color: var(--color-brand-red); }
.sidebar-group-label i {
  font-size: 17px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}
.sidebar-sublinks {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 2px;
}

/* Collapsed: show only the group's icon, hide the label text + sublinks */
:root[data-sidebar-collapsed="true"] .sidebar-group-label {
  justify-content: center;
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
}
:root[data-sidebar-collapsed="true"] .sidebar-group-label span { display: none; }
:root[data-sidebar-collapsed="true"] .sidebar-sublinks { display: none; }

.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--color-border-soft);
  font-size: 11px;
  color: var(--color-text-subtle);
  white-space: nowrap;
  overflow: hidden;
}

/* Sidebar collapse toggle (built into sidebar) */
.sidebar-collapse-btn {
  margin-left: auto;
  background: transparent;
  border: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-subtle);
  font-size: 12px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.sidebar-collapse-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.sidebar-collapse-btn .collapsed-icon { display: none; }

/* Collapsed sidebar */
:root[data-sidebar-collapsed="true"] .sidebar { width: var(--sidebar-width-collapsed); }
:root[data-sidebar-collapsed="true"] .sidebar-brand-text,
:root[data-sidebar-collapsed="true"] .sidebar-link span,
:root[data-sidebar-collapsed="true"] .sidebar-link .badge-count,
:root[data-sidebar-collapsed="true"] .sidebar-section-label,
:root[data-sidebar-collapsed="true"] .sidebar-sublink,
:root[data-sidebar-collapsed="true"] .sidebar-footer { display: none; }
:root[data-sidebar-collapsed="true"] .sidebar-link { justify-content: center; padding: 9px 12px; }
:root[data-sidebar-collapsed="true"] .sidebar-brand {
  padding: 0 12px;
  gap: 6px;
  justify-content: center;
  position: relative;
}
:root[data-sidebar-collapsed="true"] .sidebar-brand-mark { display: none; }
:root[data-sidebar-collapsed="true"] .sidebar-collapse-btn {
  margin-left: 0;
  width: 34px;
  height: 34px;
  font-size: 14px;
}
:root[data-sidebar-collapsed="true"] .sidebar-collapse-btn i:not(.collapsed-icon) { display: none; }
:root[data-sidebar-collapsed="true"] .sidebar-collapse-btn .collapsed-icon { display: inline-block; }
:root[data-sidebar-collapsed="true"] .group-caret { display: none; }
:root[data-sidebar-collapsed="true"] .brand-bar { display: none; }

/* Main area + topbar ------------------------------------------ */
.app-main {
  flex: 1;
  min-width: 0;
}

.topbar {
  height: var(--topbar-height);
  background: white;
  border-bottom: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  /* full-bleed bar, measure-aligned contents (see --content-max) */
  padding: 0 max(var(--content-gutter), (100% - var(--content-max)) / 2);
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 17px;
}
.topbar-toggle:hover { background: var(--color-surface-hover); color: var(--color-text); }
@media (max-width: 768px) {
  .topbar-toggle { display: inline-flex; }
}

.breadcrumb-trail {
  font-size: 13px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.breadcrumb-trail .crumb-current { color: var(--color-text); font-weight: 500; }
.breadcrumb-trail .crumb-sep { color: var(--color-text-subtle); }
.breadcrumb-trail a { color: var(--color-text-muted); }
.breadcrumb-trail a:hover { color: var(--color-brand-red); text-decoration: none; }

.topbar-spacer { flex: 1; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Page content */
.page-content {
  padding: var(--gap-section) max(var(--content-gutter), (100% - var(--content-max)) / 2);
}

/* Content measure — ESCAPE HATCH ------------------------------
   Default: every page is capped at --content-max and centred, so content
   doesn't stretch across a 27" display. For a genuinely content-heavy page
   (wide grids, comparison matrices, dense reports) add ONE class in the
   markup and the page goes back to full-width liquid:

       <div class="app-shell layout-fluid">   ← whole page, topbar included

   Or, to widen only the content and leave the topbar aligned:

       <main class="page-content is-fluid">

   Nothing else changes; both are pure CSS switches.                       */
.app-shell.layout-fluid > .app-main > .topbar,
.app-shell.layout-fluid .page-content,
.page-content.is-fluid {
  padding-inline: var(--content-gutter);
}
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--gap-section);
  flex-wrap: wrap;
}
.page-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.015em; color: var(--color-text-heading); }
.page-subtitle { font-size: 13px; color: var(--color-text-muted); margin: 4px 0 0; }

/* OUTCOME STATUS — page-title convention (one rule, whole app) ---
   ACTION pages (create / edit / submit screens) show the status the record
   will be in AFTER this form is submitted — never its current status — and
   always wrapped in .status-next, whose micro-label states the tense:

       <span class="status-next">On save <i class="bi bi-arrow-right"></i>
         <span class="badge-x badge-draft">…</span></span>

   DETAIL / read pages show the record's CURRENT status as a bare .badge-x
   beside its ID. A page whose action sets no status carries no badge.        */
.status-next {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.status-next > i { font-size: 11px; color: var(--color-text-subtle); }
/* the badge inside stays a normal badge — only the micro-label is uppercase */
.status-next > .badge-x { text-transform: none; letter-spacing: 0; }
.page-actions { display: flex; gap: 8px; align-items: center; }

/* Cards & surfaces -------------------------------------------- */
.card-x {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
}
.card-x-pad { padding: var(--card-padding); flex: 1; display: flex; flex-direction: column; }
.card-x-head {
  padding: 12px var(--card-padding);
  border-bottom: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-x-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--color-text-heading);
}
.card-x-head-link {
  color: inherit;
  text-decoration: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.card-x-head-link::after {
  content: '\f285'; /* bi-arrow-right */
  font-family: 'bootstrap-icons';
  font-size: 12px;
  color: var(--color-text-subtle);
  font-weight: 400;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s, transform 0.15s;
}
.card-x-head-link:hover {
  color: var(--color-brand-red);
  text-decoration: none;
}
.card-x-head-link:hover::after {
  opacity: 1;
  transform: translateX(0);
  color: var(--color-brand-red);
}
.card-x-head .head-meta {
  font-size: 12px;
  color: var(--color-text-muted);
}
.card-x-head .head-links {
  display: flex;
  align-items: center;
  gap: 14px;
}
.card-x-head .head-links a { color: var(--color-text-muted); }
.card-x-head .head-links a:hover { color: var(--color-brand-red); text-decoration: none; }

/* KPI / stat card --------------------------------------------- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-card);
  margin-bottom: var(--gap-section);
}
@media (max-width: 1100px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .kpi-strip { grid-template-columns: 1fr; } }

.kpi-card {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--card-radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-xs);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  min-width: 0;
}
.kpi-icon {
  position: static;
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-neutral-soft);
  color: var(--color-text-muted);
  font-size: 22px;
  flex-shrink: 0;
}
.kpi-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.kpi-card[data-tone="red"]   .kpi-icon { background: var(--color-brand-red-soft); color: var(--color-brand-red); }
.kpi-card[data-tone="amber"] .kpi-icon { background: var(--color-warning-soft);   color: var(--color-warning);   }
.kpi-card[data-tone="green"] .kpi-icon { background: var(--color-success-soft);   color: var(--color-success);   }
.kpi-card[data-tone="blue"]  .kpi-icon { background: var(--color-info-soft);      color: var(--color-info);      }
.kpi-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.kpi-value {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
  font-variant-numeric: tabular-nums;
}
.kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
}
.kpi-trend.up { color: var(--color-success); }
.kpi-trend.down { color: var(--color-brand-red); }
.kpi-trend.flat { color: var(--color-text-muted); }
.kpi-trend-note { color: var(--color-text-muted); font-weight: 400; margin-left: 4px; }

/* Compact KPI bar — slim alternative to .kpi-strip (ledger pages).
   One white strip sized to its content (not full-width), cells split by
   hairlines: tiny tone-dotted label over a mono value with an inline note.
   ~half the height of .kpi-strip so the table starts high on the page. */
.kpi-bar {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-xs);
}
.kpi-bar-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 9px 20px 10px 16px;
  border-right: 1px solid var(--color-border-soft);
  min-width: 0;
}
.kpi-bar-cell:last-child { border-right: 0; }
.kpi-bar-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.kpi-bar-dot { width: 7px; height: 7px; border-radius: 2px; background: var(--color-neutral); flex-shrink: 0; }
.kpi-bar-cell[data-tone="red"]   .kpi-bar-dot { background: var(--color-brand-red); }
.kpi-bar-cell[data-tone="amber"] .kpi-bar-dot { background: var(--color-warning); }
.kpi-bar-cell[data-tone="green"] .kpi-bar-dot { background: var(--color-success); }
.kpi-bar-cell[data-tone="blue"]  .kpi-bar-dot { background: var(--color-info); }
.kpi-bar-cell[data-tone="teal"]  .kpi-bar-dot { background: var(--color-teal); }
.kpi-bar-value {
  font-family: var(--font-mono);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--color-text-heading);
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kpi-bar-sub {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 5px;
  white-space: nowrap;
}
.kpi-bar-sub a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-border); text-underline-offset: 2px; }
/* Split variant: one cell, two figure rows (supplier / agent) sharing the
   tone-dotted label. Icons reuse the table's kind vocabulary (box / truck). */
.kpi-bar-split { display: flex; flex-direction: column; gap: 2px; }
.kpi-bar-split .kpi-bar-value { font-size: 13.5px; display: flex; align-items: baseline; gap: 7px; }
.kpi-bar-split .kpi-bar-value > i { font-size: 11px; color: var(--color-text-subtle); width: 14px; flex-shrink: 0; font-style: normal; }
@media (max-width: 1080px) {
  .kpi-bar { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .kpi-bar-cell:nth-child(2n) { border-right: 0; }
  .kpi-bar-cell:nth-child(n+3) { border-top: 1px solid var(--color-border-soft); }
}

/* Badges ------------------------------------------------------ */
.badge-x {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.01em;
  line-height: 1.4;
  white-space: nowrap;
}
.badge-x .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Compact variant — secondary chips (e.g. tag chips folded under an id) */
.badge-x.badge-sm { font-size: 10px; padding: 2px 6px; }

/* Quietest tag treatment: a secondary meta line under an id. Kills the chip
   fill entirely — 10.5px muted text with middot separators — so tags read as
   metadata, not as badges competing with status colour. */
.tag-line { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tag-line .badge-x {
  background: transparent;
  padding: 0;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--color-text-subtle);
  letter-spacing: 0.01em;
}
.tag-line .badge-x + .badge-x::before { content: '·'; margin-right: 4px; color: var(--color-text-faint); }
/* Status badges — starter set. Each gets a colour token + an inline icon
   (sized via .badge-x i). Same-colour states are differentiated by their
   icon, never by colour alone. Rename / extend per project. */
/* —— PMS §1 status vocabulary ——————————————————————————————————
   One class per stored status value. Colour + icon ALWAYS travel together;
   the icon named in each comment is the canonical pairing and is rendered
   inside the badge wherever the status appears (badges, cells, pills, logs).

   RFQ item (C.1) */
.badge-new        { background: var(--color-neutral-soft); color: var(--color-neutral-text); }    /* bi-asterisk */
.badge-sent       { background: var(--color-info-soft);    color: var(--color-info-text); }       /* bi-send */
.badge-onhold     { background: var(--color-warning-soft); color: var(--color-warning-text); }    /* bi-pause-circle */
.badge-unapproved { background: var(--color-indigo-soft);  color: var(--color-indigo-text); }     /* bi-hourglass-split */
.badge-approved   { background: var(--color-success-soft); color: var(--color-success-text); }    /* bi-check-circle */
.badge-discarded  { background: var(--color-discard-soft); color: var(--color-discard-text); }    /* bi-x-circle */
.badge-confirmed  { background: var(--color-teal-soft);    color: var(--color-teal-text); }       /* bi-bag-check */

/* Intl / Dom order (C.3 / C.4) */
.badge-draft          { background: var(--color-neutral-soft); color: var(--color-neutral-text); } /* bi-pencil-square */
.badge-awaiting-agent { background: var(--color-warning-soft); color: var(--color-warning-text); } /* bi-person-plus */
.badge-handoff        { background: var(--color-info-soft);    color: var(--color-info-text); }    /* bi-box-arrow-right */
.badge-vessel         { background: var(--color-cyan-soft);    color: var(--color-cyan-text); }    /* bi-box-seam */
.badge-unloaded       { background: var(--color-teal-soft);    color: var(--color-teal-text); }    /* bi-box-arrow-in-down */
.badge-delivered      { background: var(--color-success-soft); color: var(--color-success-text); } /* bi-check2-circle */
.badge-cancelled      { background: var(--color-danger-soft);  color: var(--color-brand-red-hover); } /* bi-x-octagon */
.badge-closed         { background: var(--color-settled-soft); color: var(--color-settled-text); } /* bi-lock */

/* Milestone-laggard progress (intl orders): handoff → vessel → unloaded →
   delivered. .done = every unit past that stage; .part = some units past.
   Segment colours follow the C.3 badge ramp (blue → cyan → teal → green). */
.po-progress { display: inline-flex; gap: 3px; margin-top: 5px; }
.po-progress .seg { width: 15px; height: 3px; border-radius: 2px; background: var(--color-border); }
.po-progress .seg:nth-child(1) { --seg-c: var(--color-info); }
.po-progress .seg:nth-child(2) { --seg-c: var(--color-cyan, var(--color-cyan-text)); }
.po-progress .seg:nth-child(3) { --seg-c: var(--color-teal); }
.po-progress .seg:nth-child(4) { --seg-c: var(--color-success); }
.po-progress .seg.done { background: var(--seg-c); }
.po-progress .seg.part { background: linear-gradient(90deg, var(--seg-c) 0 50%, var(--color-border) 50% 100%); }

/* Bilty (C.6) — Cancelled reuses .badge-cancelled */
.badge-awaited    { background: var(--color-neutral-soft); color: var(--color-neutral-text); }    /* bi-hourglass */
.badge-processing { background: var(--color-info-soft);    color: var(--color-info-text); }       /* bi-arrow-repeat */
.badge-cleared    { background: var(--color-success-soft); color: var(--color-success-text); }    /* bi-check2-all */

/* Inspection report (C.7) — Approved/Rejected reuse .badge-approved/.badge-rejected.
   Warning (not DSS indigo): an unapproved report is an action queue for the admin. */
.badge-report-unapproved { background: var(--color-warning-soft); color: var(--color-warning-text); } /* bi-hourglass-split */

/* Inspection (C.7) — Unapproved / Approved reuse the RFQ classes */
.badge-rejected   { background: var(--color-danger-soft);  color: var(--color-brand-red-hover); } /* bi-x-circle */

/* Inspection entry grid — narrow per-cell qty inputs + live "to account" */
.insp-qty {
  width: 62px; height: 28px; padding: 0 6px;
  border: 1px solid var(--color-border); border-radius: 6px;
  font-family: var(--font-mono); font-size: 12px; text-align: center;
  background: white; color: var(--color-text);
}
.insp-qty::-webkit-outer-spin-button, .insp-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.insp-qty { -moz-appearance: textfield; }
.insp-qty:focus { outline: none; border-color: var(--color-brand-red); box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10); }
.insp-qty:disabled { background: var(--color-neutral-soft); color: var(--color-text-subtle); cursor: not-allowed; }
.insp-done td { opacity: 0.55; }
.insp-unordered td { background: var(--color-warning-soft); }
.insp-acct-ok   { color: var(--color-success); font-weight: 700; }
.insp-acct-over { color: var(--color-brand-red); font-weight: 700; }

/* Sync run (C.9) */
.badge-sync-running  { background: var(--color-info-soft);    color: var(--color-info-text); }    /* bi-arrow-repeat */
.badge-sync-complete { background: var(--color-success-soft); color: var(--color-success-text); } /* bi-check-circle */
.badge-sync-failed   { background: var(--color-danger-soft);  color: var(--color-brand-red-hover); } /* bi-exclamation-octagon */
.badge-sync-partial  { background: var(--color-warning-soft); color: var(--color-warning-text); } /* bi-exclamation-triangle */

/* Outbound replenish (C.10) */
.badge-out-pending { background: var(--color-neutral-soft); color: var(--color-neutral-text); }   /* bi-hourglass */
.badge-out-sent    { background: var(--color-success-soft); color: var(--color-success-text); }   /* bi-check-circle */
.badge-out-failed  { background: var(--color-danger-soft);  color: var(--color-brand-red-hover); } /* bi-exclamation-octagon */

/* Supplier type (categorical, not a status) */
.badge-type-intl { background: var(--color-info-soft);    color: var(--color-info-text); }        /* bi-globe2 */
.badge-type-dom  { background: var(--color-neutral-soft); color: var(--color-neutral-text); }     /* bi-truck */

/* Last-sync classification (D-13) — stock state at the latest sync */
.badge-class-zero { background: var(--color-danger-soft);  color: var(--color-brand-red-hover); } /* bi-exclamation-circle */
.badge-class-low  { background: var(--color-warning-soft); color: var(--color-warning-text); }    /* bi-arrow-down-circle */
.badge-x i {
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.badge-active { background: var(--color-success-soft); color: var(--color-success-text); }
.badge-inactive { background: var(--color-neutral-soft); color: var(--color-text-muted); }
.badge-info { background: var(--color-info-soft); color: var(--color-info-text); }
.badge-neutral { background: var(--color-neutral-soft); color: var(--color-neutral); }
/* Sync direction (C.9) — inbound pulls in (blue), outbound pushes out (teal) */
.badge-dir-in  { background: var(--color-info-soft); color: var(--color-info-text); }   /* bi-box-arrow-in-down */
.badge-dir-out { background: var(--color-teal-soft); color: var(--color-teal-text); }   /* bi-box-arrow-up */
/* Semantic status trio (used by IVS discrepancy summaries etc.) — built from
   the same tokens as badge-onhold / badge-class-low / badge-sync-failed. */
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning-text); }
.badge-success { background: var(--color-success-soft); color: var(--color-success-text); }
.badge-danger  { background: var(--color-danger-soft);  color: var(--color-brand-red-hover); }
/* PATTERN: categorical / tier badges (classification labels, size buckets,
   segments, etc.) — one class per category, built from the accent tokens in
   :root. They carry no fixed meaning; rename and recolour per project. */
.badge-accent-1 { background: var(--color-accent-1-soft); color: #5b21b6; }
.badge-accent-3 { background: var(--color-accent-3-soft); color: #9a3412; }

/* Permission matrix (Roles & Permissions) */
.perm-matrix { width: 100%; border-collapse: collapse; }
.perm-matrix th, .perm-matrix td { padding: 9px 12px; border-bottom: 1px solid var(--color-border-soft); font-size: 13px; }
.perm-matrix thead th {
  position: sticky; top: 0; background: white; z-index: 2;
  text-align: center; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--color-text-heading);
  border-bottom: 2px solid var(--color-border);
  vertical-align: bottom;
}
.perm-matrix thead th:first-child { text-align: left; }
.perm-matrix .perm-group td {
  background: var(--color-bg);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-text-subtle);
}
.perm-matrix td.perm-name { font-weight: 500; color: var(--color-text); }
.perm-matrix td.perm-name .perm-key { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-subtle); display: block; }
.perm-matrix td.perm-cell { text-align: center; }
.perm-check { color: var(--color-success); font-size: 15px; }
.perm-dash { color: var(--color-border); font-size: 13px; }
.perm-col-admin { background: var(--color-brand-red-softer); }
.perm-matrix input[type="checkbox"] { cursor: pointer; }

/* Disabled/inactive rows — dim the whole row, keep the status badge + actions readable */
.table-x tbody tr[data-status="inactive"] > td { opacity: 0.55; }
.table-x tbody tr[data-status="inactive"] > td:has(.badge-x),
.table-x tbody tr[data-status="inactive"] > td.col-actions { opacity: 1; }
.progress-x {
  height: 6px;
  background: var(--color-neutral-soft);
  border-radius: 10px;
  overflow: hidden;
}
.progress-x-fill {
  height: 100%;
  background: var(--color-brand-red);
  border-radius: 10px;
  transition: width 0.2s ease;
}
/* Status-driven progress bar colors — PMS intl-order milestone ramp
   (the multi-segment milestone bar component lands with the orders round) */
.progress-x.status-draft     .progress-x-fill { background: var(--color-text-subtle); }
.progress-x.status-handoff   .progress-x-fill { background: var(--color-info); }
.progress-x.status-vessel    .progress-x-fill { background: var(--color-cyan); }
.progress-x.status-unloaded  .progress-x-fill { background: var(--color-teal); }
.progress-x.status-delivered .progress-x-fill { background: var(--color-success); }
.progress-x.status-cancelled .progress-x-fill { background: var(--color-brand-red); }
.progress-x.thick { height: 8px; }
.progress-x-row { display: flex; align-items: center; gap: 10px; }
.progress-x-row .progress-x { flex: 1; }
.progress-x-row .progress-text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Buttons (override Bootstrap slightly for tighter look) ------ */
.btn { font-size: 13px; font-weight: 500; border-radius: 7px; padding: 6px 13px; }
.btn-sm { font-size: 12px; padding: 4px 10px; }
.btn:hover, .btn:focus, .btn:active { text-decoration: none; }
.btn-primary {
  background: var(--color-brand-red);
  border-color: var(--color-brand-red);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--color-brand-red-hover) !important;
  border-color: var(--color-brand-red-hover) !important;
}
.btn-outline-primary {
  --bs-btn-color: var(--color-brand-red);
  --bs-btn-border-color: var(--color-brand-red);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-brand-red);
  --bs-btn-hover-border-color: var(--color-brand-red);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-brand-red-hover);
  --bs-btn-active-border-color: var(--color-brand-red-hover);
  --bs-btn-focus-shadow-rgb: 210, 21, 30;
}
.btn-outline-success {
  --bs-btn-color: var(--color-success);
  --bs-btn-border-color: var(--color-success);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-success);
  --bs-btn-hover-border-color: var(--color-success);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-success-strong);
  --bs-btn-active-border-color: var(--color-success-strong);
  --bs-btn-focus-shadow-rgb: 22, 163, 74;
}
.btn-outline-warning {
  --bs-btn-color: var(--color-warning);
  --bs-btn-border-color: var(--color-warning);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-warning);
  --bs-btn-hover-border-color: var(--color-warning);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-warning-strong);
  --bs-btn-active-border-color: var(--color-warning-strong);
  --bs-btn-focus-shadow-rgb: 217, 119, 6;
}
.btn-outline-danger {
  --bs-btn-color: var(--color-brand-red);
  --bs-btn-border-color: var(--color-brand-red);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-bg: var(--color-brand-red);
  --bs-btn-hover-border-color: var(--color-brand-red);
  --bs-btn-active-color: var(--color-white);
  --bs-btn-active-bg: var(--color-brand-red-hover);
  --bs-btn-active-border-color: var(--color-brand-red-hover);
  --bs-btn-focus-shadow-rgb: 210, 21, 30;
}
.btn-outline-secondary {
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-outline-secondary:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border);
  color: var(--color-text);
}
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--color-surface-hover); }
.btn-icon {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 7px;
}

/* Tables ------------------------------------------------------ */
.table-x {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
.table-x thead th {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 10px var(--table-cell-px);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  /* Long headers may wrap to two lines; all header text sits on the same
     baseline via bottom alignment. */
  white-space: normal;
  vertical-align: bottom;
  line-height: 1.35;
}
.table-x tbody td {
  padding: var(--table-row-py) var(--table-cell-px);
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: middle;
}
.table-x tbody tr:last-child td { border-bottom: 0; }
.table-x tbody tr:hover { background: var(--color-surface-hover); }
.table-x tbody tr.clickable { cursor: pointer; }
.table-x.no-hover tbody tr:hover { background: transparent; }

/* Table footer (totals) rows — border-collapse is 'separate', so borders set
   on <tr>/<tfoot> never paint; style the cells themselves. First footer row
   gets the strong totals rule; any following rows (net movement etc.) don't. */
.table-x tfoot td, .table-x tfoot th {
  padding: var(--table-row-py) var(--table-cell-px);
  border-top: 2px solid var(--color-border);
  vertical-align: middle;
}
.table-x tfoot tr + tr td, .table-x tfoot tr + tr th { border-top: 0; }

/* Right-aligned money with an optional Cr/Dr tag: the tag renders in a fixed
   slot (::after reads data-suffix) so bare amounts (0, no tag) still align
   digit-for-digit with tagged ones — no padding hacks in the data layer. */
.bal-cell::after {
  content: attr(data-suffix);
  display: inline-block;
  width: 2.3ch;
  margin-left: 5px;
  text-align: left;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
}

.table-x .col-actions { width: 40px; text-align: right; }
/* Leading actions column: align to the row's left edge, not the far side. */
.table-x .col-actions:first-child { text-align: left; }
.table-x .col-tight { white-space: nowrap; }
/* col-center beats DataTables' auto type alignment (e.g. dt-type-date → right) */
.table-x .col-counts { white-space: nowrap; font-size: 12.5px; }
table.table-x th.col-center,
table.table-x td.col-center { text-align: center !important; }

/* Equalize padding on centered orderable headers so the title sits at true visual center
   (DataTables adds extra padding-right for the absolute-positioned sort arrow). */
table.table-x th.col-center.dt-orderable-asc,
table.table-x th.col-center.dt-orderable-desc { padding-left: 30px !important; padding-right: 30px !important; }

/* DataTables override --------------------------------------- */
.dt-container { font-family: var(--font-sans); position: relative; }
.dt-container .dt-top { display: none; }
.dt-container .dt-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-bg);
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  font-size: 12.5px;
}
.dt-container .dt-bot-left {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 12.5px;
  min-height: 30px;
}
.dt-container .dt-bot-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dt-container .dt-info {
  color: var(--color-text-muted) !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.4;
}
.dt-container .dt-length {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.dt-container .dt-length label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  font-size: 0;
  color: transparent;
}
.dt-container .dt-length select {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 24px 4px 9px;
  font-size: 12px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath d='M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/%3e%3c/svg%3e");
  background-position: right 7px center;
  background-size: 9px 9px;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: white;
  color: var(--color-text);
}
.dt-container .dt-length select:hover { border-color: var(--color-text-muted); }
.dt-container .dt-paging { margin: 0; }
.dt-container .dt-paging .pagination {
  --bs-pagination-color: var(--color-text-muted);
  --bs-pagination-bg: white;
  --bs-pagination-border-color: var(--color-border-soft);
  --bs-pagination-hover-color: var(--color-brand-red);
  --bs-pagination-hover-bg: var(--color-brand-red-softer);
  --bs-pagination-hover-border-color: var(--color-border-soft);
  --bs-pagination-focus-color: var(--color-brand-red);
  --bs-pagination-focus-bg: var(--color-brand-red-softer);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
  --bs-pagination-active-color: var(--color-brand-red);
  --bs-pagination-active-bg: var(--color-brand-red-soft);
  --bs-pagination-active-border-color: var(--color-brand-red-soft);
  --bs-pagination-disabled-color: var(--color-text-subtle);
  --bs-pagination-disabled-bg: white;
  --bs-pagination-disabled-border-color: var(--color-border-soft);
  --bs-pagination-border-radius: 6px;
  --bs-pagination-padding-x: 10px;
  --bs-pagination-padding-y: 3px;
  --bs-pagination-font-size: 12px;
  gap: 4px;
  margin: 0;
}
.dt-container .dt-paging .pagination .page-link {
  min-width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: 500;
  line-height: 1;
}
.dt-container .dt-paging .pagination .page-item.active .page-link {
  font-weight: 600;
}
.dt-container .dt-paging .dt-paging-button {
  border-radius: 6px;
}

/* Loading indicator — replace DataTables 2.x's centered "Processing…" card
   with a thin 3px progress strip pinned to the top edge of the table
   wrapper. The brand-red bar matches the in-progress treatment used for
   the live spinner and active pagination. */
.dt-container .dt-processing,
.dt-container .dt-processing.dt-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  margin: 0;
  padding: 0;
  background: var(--color-border-soft);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;          /* cancel DT's translate(-50%, -50%) centering */
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
.dt-container .dt-processing > * { display: none !important; }
.dt-container .dt-processing::before {
  content: '';
  display: block;
  height: 100%;
  background: var(--color-text-subtle);
  animation: dt-progress-sweep 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes dt-progress-sweep {
  0%   { margin-left: 0;    margin-right: 100%; }
  50%  { margin-left: 25%;  margin-right: 0%;   }
  100% { margin-left: 100%; margin-right: 0;    }
}

/* Bootstrap pagination — brand red active state (DT + anywhere else) */
.pagination {
  --bs-pagination-color: var(--color-text-muted);
  --bs-pagination-bg: transparent;
  --bs-pagination-border-color: transparent;
  --bs-pagination-hover-color: var(--color-brand-red);
  --bs-pagination-hover-bg: var(--color-brand-red-softer);
  --bs-pagination-hover-border-color: transparent;
  --bs-pagination-focus-color: var(--color-brand-red);
  --bs-pagination-focus-bg: var(--color-brand-red-softer);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
  --bs-pagination-active-color: var(--color-brand-red);
  --bs-pagination-active-bg: var(--color-brand-red-soft);
  --bs-pagination-active-border-color: var(--color-brand-red-soft);
  --bs-pagination-disabled-color: var(--color-text-subtle);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-border-color: transparent;
  --bs-pagination-border-radius: 6px;
  --bs-pagination-padding-x: 9px;
  --bs-pagination-padding-y: 3px;
  --bs-pagination-font-size: 12px;
  gap: 2px;
}
.pagination .page-item .page-link {
  border-radius: 6px !important;
  font-weight: 500;
  min-width: 28px;
  text-align: center;
  line-height: 1.5;
}
.pagination .page-item.active .page-link {
  font-weight: 600;
}
.pagination .page-item.disabled .page-link {
  opacity: 0.5;
}
/* Standalone pager bar — same look as the DataTables dt-bot, for paginated
   card lists (e.g. Delayed RFQs groups). Server renders ?page=N links. */
.pager-x {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 14px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.pager-x .pagination { margin: 0; }

/* Status tabs (Linear-style) ---------------------------------- */
.status-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-bottom: var(--gap-card);
  border-bottom: 1px solid var(--color-border-soft);
  padding: 0 4px;
}
.status-tab {
  background: transparent;
  border: 0;
  padding: 10px 14px 11px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.12s;
  white-space: nowrap;
  text-decoration: none;
}
.status-tab:hover,
.status-tab:focus { text-decoration: none; }
.status-tab > i {
  font-size: 14px;
  line-height: 1;
  opacity: 0.85;
}
.status-tab.is-active > i { opacity: 1; }
.status-tab:hover { color: var(--color-text); }
.status-tab.is-active {
  color: var(--color-brand-red);
  border-bottom-color: var(--color-brand-red);
  font-weight: 600;
}
.status-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
  height: 18px;
  border-radius: 999px;
  background: var(--color-neutral-soft);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.status-tab.is-active .status-tab-count {
  background: var(--color-brand-red-soft);
  color: var(--color-brand-red);
}

/* Filter fieldset (groups always-on pills with a labelled border) */
.filter-fieldset {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 8px 14px 12px;
  margin: 0 0 var(--gap-card);
  background: transparent;
  min-inline-size: 0;
}
.filter-fieldset-legend {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding: 0 8px;
  margin: 0 0 0 4px;
  width: auto;
  float: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.filter-fieldset-legend i { font-size: 12px; }
.filter-fieldset .filter-pills { margin-bottom: 0; }
/* DataTables v2 stamps dt-type-date/numeric classes with right alignment on
   detected columns — kill that inside .table-x; alignment here is explicit
   (col-center / inline styles), never type-inferred. app.css loads after the
   DataTables sheet, so this wins ties. */
.table-x th.dt-type-date, .table-x td.dt-type-date,
.table-x th.dt-type-numeric, .table-x td.dt-type-numeric,
.table-x th.dt-orderable-asc, .table-x th.dt-orderable-desc { text-align: left; }
.table-x th.col-center, .table-x td.col-center { text-align: center; }
/* Pills layout — filters.js renders .filter-pills > .filter-pills-row > pills */
.filter-pills { display: flex; flex-direction: column; gap: 8px; }
.filter-pills-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Linear-style filter toolbar + active-filter chips ---------- */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-xs);
  margin-bottom: 8px;
}
.filter-bar-input {
  flex: 0 1 240px;
  height: 32px;  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  font-size: 13px;
  background: var(--color-white);
  color: var(--color-text);
  outline: 0;
  transition: background 0.12s, border-color 0.12s;
  min-width: 0;
}
.filter-bar-input::placeholder { color: var(--color-text-subtle); }
.filter-bar-input:hover { border-color: var(--color-text-subtle); }
.filter-bar-input:focus {
  background: white;
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
}
.filter-bar-divider {
  width: 1px;
  height: 22px;
  background: var(--color-border);
  margin: 0 4px;
}
.filter-bar-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: transparent;
  border: 1px dashed var(--color-border);
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.filter-bar-add:hover {
  border-color: var(--color-brand-red);
  border-style: solid;
  color: var(--color-brand-red);
  background: var(--color-brand-red-softer);
}
.filter-bar-add i { font-size: 13px; line-height: 1; }
.filter-bar-spacer { flex: 1; }
.filter-bar-clear {
  font-size: 12.5px;
  color: var(--color-text-muted);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.filter-bar-clear:hover {
  color: var(--color-brand-red);
  background: var(--color-brand-red-softer);
}

/* Add-filter dropdown menu styling */
.add-filter-menu {
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 4px;
  min-width: 200px;
}
.add-filter-menu .dropdown-header {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  font-weight: 700;
  padding: 6px 10px 4px;
}
.add-filter-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-text);
}
.add-filter-menu .dropdown-item i {
  color: var(--color-text-subtle);
  font-size: 14px;
  width: 16px;
  text-align: center;
}
.add-filter-menu .dropdown-item:hover {
  background: var(--color-brand-red-softer);
  color: var(--color-brand-red);
  text-decoration: none;
}
.add-filter-menu .dropdown-item:hover i { color: var(--color-brand-red); }
.add-filter-menu .dropdown-divider {
  margin: 4px 4px;
  border-color: var(--color-border-soft);
}

/* Active filter chips row */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 2px 0;
  margin-bottom: var(--gap-card);
}
.active-filter {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 4px 0 10px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 12.5px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color 0.12s;
}
.active-filter:hover { border-color: var(--color-text-muted); }
.active-filter:not(:has(.af-close)) { padding-right: 10px; }
.active-filter .af-key {
  color: var(--color-text-muted);
  font-weight: 500;
}
.active-filter .af-val {
  color: var(--color-text);
  font-weight: 600;
  margin-left: 5px;
}
.active-filter .af-val {
  color: var(--color-text);
  font-weight: 600;
}
.active-filter .af-close {
  background: transparent;
  border: 0;
  padding: 0;
  margin-left: 6px;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.active-filter .af-close i { font-size: 14px; line-height: 1; }
.active-filter .af-close:hover {
  background: var(--color-brand-red-softer);
  color: var(--color-brand-red);
}

/* Filter value popover (anchored to chip while editing) */
.active-filter.is-editing {
  border-color: var(--color-brand-red);
  border-style: solid;
  background: var(--color-brand-red-softer);
}
.active-filter .af-val-empty {
  color: var(--color-text-subtle);
  font-style: italic;
  font-weight: 500;
}
.af-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg, 0 10px 24px -4px rgba(15, 23, 42, 0.12));
  padding: 6px;
  z-index: 20;
  font-weight: normal;
}
.af-popover-search {
  position: relative;
  padding: 6px 6px 4px;
}
.af-popover-search i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  font-size: 13px;
}
.af-popover-search input {
  width: 100%;
  height: 30px;
  padding: 0 10px 0 30px;
  border: 1px solid var(--color-border-soft);
  border-radius: 6px;
  font-size: 12.5px;
  outline: 0;
  background: var(--color-white);
}
.af-popover-search input:focus {
  background: white;
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
}
.af-popover-list {
  list-style: none;
  margin: 4px 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
}
.af-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
}
.af-popover-item.is-highlighted,
.af-popover-item:hover {
  background: var(--color-brand-red-softer);
  color: var(--color-brand-red);
}
.af-popover-check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: white;
  flex-shrink: 0;
}
.af-popover-item.is-highlighted .af-popover-check {
  background: var(--color-brand-red);
  border-color: var(--color-brand-red);
}
.af-popover-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.af-popover-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 4px;
  border-top: 1px solid var(--color-border-soft);
  margin-top: 4px;
}
.af-popover-foot-spacer { flex: 1; }
.af-popover-foot .btn-sm { font-size: 12px; padding: 4px 10px; }
.af-popover-clear {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  padding: 4px 8px;
  font-weight: 500;
}
.af-popover-clear:hover { color: var(--color-brand-red); background: var(--color-brand-red-softer); border-radius: 5px; }

/* Tag/chip input (used inside af-popover for free-text multi-value filters) */
.af-chip-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 4px 6px;
  margin: 0 6px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.af-chip-input:focus-within {
  background: white;
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
}
.af-input-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px 2px 7px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.4;
}
.af-input-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.af-input-chip-x:hover {
  background: var(--color-brand-red-softer);
  color: var(--color-brand-red);
}
.af-input-chip-x i { font-size: 12px; line-height: 1; }
.af-chip-input-field {
  flex: 1;
  min-width: 60px;
  height: 22px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--color-text);
}
.af-chip-input-field::placeholder { color: var(--color-text-subtle); font-family: var(--font-sans); }

/* Single-text-input variant (used inside af-popover for single free-text filters) */
.af-popover-textfield {
  display: block;
  width: calc(100% - 12px);
  margin: 0 6px;
  height: 32px;
  padding: 0 10px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-text);
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.af-popover-textfield:focus {
  outline: none;
  background: white;
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
}
.af-popover-hint {
  padding: 6px 8px 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.af-popover-hint kbd {
  display: inline-block;
  padding: 0 4px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.5;
}

/* Filter footer + Apply + pending-state (consolidated from filters.js) -----
   Previously injected at runtime by filters.js; moved here so all filter
   styling has a single home and there is no app.css <-> JS source-order
   dependency. Tokens already in use below. */
.filter-fieldset-legend { white-space: nowrap; }
.filter-form { display: contents; }
.filter-state-inputs { display: none; }

.active-filter { cursor: pointer; user-select: none; }
.active-filter.is-editing { cursor: default; }
.active-filter .af-popover { user-select: text; }
.active-filter .af-popover * { cursor: default; }
.active-filter .af-popover .af-popover-item { cursor: pointer; }
.active-filter .af-popover .af-popover-textfield,
.active-filter .af-popover .af-chip-input-field { cursor: text; }
.active-filter .af-close { cursor: pointer; }

/* a11y: visible focus ring for keyboard users (pills are now focusable). */
.active-filter:focus-visible {
  outline: 2px solid var(--color-brand-red);
  outline-offset: 1px;
}

/* Dirty (pending-but-not-applied) chip indicator. The DASHED border is the
   non-color cue, so meaning never rests on color alone. */
.active-filter.is-dirty:not(.is-editing) {
  border-style: dashed;
  border-color: var(--color-brand-red);
  background: var(--color-brand-red-softer);
}
.active-filter.is-dirty:not(.is-editing) .af-key { color: var(--color-brand-red); }

/* Conditional form footer */
.filter-footer {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border);
}
.filter-footer.is-visible { display: flex; }
.filter-footer-left,
.filter-footer-right { display: flex; align-items: center; gap: 8px; }
.filter-footer-right { margin-left: auto; }

.filter-clear-all {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none; cursor: pointer;
  padding: 4px 8px; border-radius: 5px;
  transition: color 0.12s, background 0.12s;
}
.filter-clear-all:hover { color: var(--color-brand-red); background: var(--color-brand-red-softer); }
.filter-clear-all i { font-size: 11px; }

.filter-footer-hint {
  font-size: 12px; font-weight: 500;
  color: var(--color-text-muted);
  letter-spacing: 0;
}

.filter-apply-btn { display: inline-flex; align-items: center; gap: 6px; }
.filter-apply-btn .filter-apply-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: rgba(255,255,255,0.25);
  border-radius: 9px;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.filter-discard-btn { font-size: 12px; padding: 4px 10px; }

/* Filter strip ------------------------------------------------ */
.filter-strip {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 10px 8px 14px;
  background: white;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--card-radius);
  margin-bottom: var(--gap-card);
  box-shadow: var(--shadow-xs);
}
.filter-strip-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding-right: 10px;
  margin-right: 2px;
  border-right: 1px solid var(--color-border-soft);
  height: 32px;
  white-space: nowrap;
}
.filter-strip-label i { font-size: 13px; color: var(--color-text-subtle); }
.filter-strip .form-select-sm,
.filter-strip .form-control-sm {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 12.5px;
  height: 32px;
  width: auto;
  min-width: 140px;
  flex: 0 0 auto;
}
.filter-strip .form-select-sm:hover,
.filter-strip .form-control-sm:hover { border-color: var(--color-text-muted); }
.filter-strip .form-select-sm:focus,
.filter-strip .form-control-sm:focus {
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
}
.filter-strip #f-daterange { min-width: 200px; }
.filter-strip .search-input { flex: 0 0 auto; }
.filter-strip .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 9px;
  background: var(--color-brand-red-softer);
  color: var(--color-brand-red-hover);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
}
.filter-strip .filter-chip i { cursor: pointer; font-size: 13px; }
.filter-strip .clear-all {
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}
.filter-strip .clear-all:hover {
  color: var(--color-brand-red);
  background: var(--color-brand-red-softer);
}
.filter-strip .strip-spacer { flex: 1; }

/* Search input */
.search-input {
  position: relative;
  display: inline-flex;
}
.search-input input {
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 0 10px 0 30px;
  font-size: 12.5px;
  background: white;
}
.search-input i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-subtle);
  font-size: 13px;
}

/* Form ------------------------------------------------------- */
.form-label-x {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
  display: block;
}
.form-help { font-size: 11.5px; color: var(--color-text-muted); margin-top: 3px; }
/* INPUT FILL — one rule for the whole app: editable inputs are WHITE.
   Grey fill is reserved for state that is NOT editable (disabled / readonly /
   derived display boxes: .derived-display — e.g. the A1.6 auto-basis line on
   admin/Agent Form — and Flags Config's auto-generated key). Don't introduce a
   grey fill on a new control without that reason. */
.form-control, .form-select {
  font-size: 13px;
  border-color: var(--color-border);
  border-radius: 7px;
  padding: 7px 11px;
  background-color: var(--color-white);
}
.form-control:disabled, .form-control[readonly],
.form-select:disabled, .form-select[readonly] {
  background-color: var(--color-bg);
  color: var(--color-text-muted);
}
/* Hide number-input spin buttons app-wide — the up/down steppers are unwanted */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.form-select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath d='M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/%3e%3c/svg%3e");
  background-position: right 10px center;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}
.form-select-sm {
  padding: 5px 28px 5px 10px;
  background-position: right 8px center;
  background-size: 10px 10px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
}
.form-row-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-card);
}
@media (max-width: 768px) { .form-row-grid { grid-template-columns: 1fr; } }

/* Empty state ----------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-muted);
}
.empty-state.empty-state--lg { padding: 60px 24px; }
.empty-state .empty-icon {
  width: 54px; height: 54px;
  margin: 0 auto 12px;
  background: var(--color-bg);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  color: var(--color-text-subtle);
}
.empty-state h4 {
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--color-text-heading);
  font-weight: 600;
}
.empty-state p {
  font-size: 13px;
  margin: 0 0 14px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Tabs ------------------------------------------------------- */
.tabs-x {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--gap-card);
}
.tab-x {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tab-x:hover { color: var(--color-text); }
.tab-x.active {
  color: var(--color-brand-red);
  border-bottom-color: var(--color-brand-red);
  font-weight: 600;
}
.tab-x .tab-count {
  font-size: 10.5px;
  background: var(--color-neutral-soft);
  color: var(--color-text-muted);
  padding: 1px 6px;
  border-radius: 9px;
  font-weight: 600;
}
.tab-x.active .tab-count { background: var(--color-brand-red-soft); color: var(--color-brand-red); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Timeline -------------------------------------------------- */
.timeline-x {
  position: relative;
  padding-left: 22px;
}
.timeline-x::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 4px; bottom: 4px;
  width: 2px;
  background: var(--color-border);
}
.timeline-item {
  position: relative;
  padding-bottom: 16px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -19px;
  top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--color-text-subtle);
}
.timeline-item.accent-1::before { border-color: var(--color-accent-1); }
.timeline-item.accent-2::before { border-color: var(--color-accent-2); }
.timeline-item.accent-3::before { border-color: var(--color-accent-3); }
/* (dropped) .timeline-item.brand red dot — decision: timeline dots stay grey */
.timeline-item-head { display: flex; align-items: baseline; gap: 8px; }
.timeline-date { font-size: 11.5px; color: var(--color-text-muted); font-family: var(--font-mono); }
.timeline-detail { font-size: 12.5px; color: var(--color-text-muted); margin-top: 3px; }

/* Login ----------------------------------------------------- */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: white;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border-soft);
  padding: 32px 30px;
}
.login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 28px;
}
.login-logo .sidebar-brand-mark { width: 36px; height: 36px; font-size: 17px; }
.login-logo .sidebar-brand-text { font-size: 17px; }
.login-title {
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  color: var(--color-text-heading);
}
.login-sub {
  font-size: 12.5px;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 24px;
}

/* Misc ------------------------------------------------------ */
.text-muted-x { color: var(--color-text-muted); }
.text-subtle { color: var(--color-text-subtle); }
.text-heading { color: var(--color-text-heading); }
.text-faint { color: var(--color-text-faint); } /* decorative only — fails text contrast; not for essential copy */
.text-mono { font-family: var(--font-mono); }
.text-cond { font-family: var(--font-cond); }
.text-brand { color: var(--color-brand-red); }

/* Cell utilities — for DataTable cells.
   .cell-id        mono identifier (record id) — bold
   .cell-meta      muted secondary text inside a cell (timestamps, sub-notes)
   .cell-num-ok    success-tone tabular number (counts, totals)
   .cell-num-bad   danger-tone  tabular number (errors, failures)        */
.cell-id          { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.cell-meta        { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); }
.cell-num-ok      { font-family: var(--font-mono); font-weight: 600; color: var(--color-success); }
.cell-num-bad     { font-family: var(--font-mono); font-weight: 600; color: var(--color-brand-red); }
.cell-num-warn    { font-family: var(--font-mono); font-weight: 600; color: var(--color-warning); }
.cell-num-muted   { font-family: var(--font-mono); color: var(--color-text-muted); }
.text-strong      { font-weight: 600; }

/* DataTable — keep its host table at 100% width without inline style */
.table-x.dt-host { width: 100%; }

/* Modal — light restyle over Bootstrap's modal (rounded corners, soft
   borders). Uses Bootstrap's own modal classes; this is just polish. */
.modal-x .modal-content {
  border-radius: 12px;
  border: 1px solid var(--color-border);
}
.modal-x .modal-header,
.modal-x .modal-footer {
  border-color: var(--color-border-soft);
}
.modal-x .modal-title {
  font-size: 16px;
  font-weight: 700;
}
.divider { height: 1px; background: var(--color-border-soft); margin: var(--gap-card) 0; }

.copy-btn {
  background: transparent;
  border: 0;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--color-text-muted);
  font-size: 12px;
  cursor: pointer;
}
.copy-btn:hover { background: var(--color-surface-hover); color: var(--color-brand-red); }

/* Two-col layout (e.g. list + detail, or content + side panel) */
.dash-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--gap-card);
  margin-bottom: var(--gap-section);
  align-items: start;
}
@media (max-width: 1100px) { .dash-grid { grid-template-columns: 1fr; } }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-card);
}
@media (max-width: 1100px) { .detail-grid { grid-template-columns: 1fr; } }

/* Variant switcher chip */
.variant-switch {
  display: inline-flex;
  background: var(--color-neutral-soft);
  border-radius: 8px;
  padding: 3px;
  gap: 0;
}
.variant-switch button {
  background: transparent;
  border: 0;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: 6px;
  cursor: pointer;
}
.variant-switch button.on {
  background: white;
  color: var(--color-text);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

/* Spinner inline */
.spinner-inline {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-brand-red);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
}

/* DataTables 2 type-detection: columns whose data-order values are numeric
   get dt-type-numeric (right-align) — which right-aligns ID/ref/date HEADERS
   over left-aligned cells. Alignment in this kit is always explicit
   (.col-center class or inline text-align) — neutralise the auto classes. */
.table-x th.dt-type-numeric:not(.col-center),
.table-x td.dt-type-numeric:not(.col-center),
.table-x th.dt-type-date:not(.col-center),
.table-x td.dt-type-date:not(.col-center) { text-align: left; }

/* Report outcome/composition bar (stacked, in a table cell or KPI) */
.mix-bar { display: flex; height: 9px; border-radius: 3px; overflow: hidden; background: var(--color-neutral-soft); min-width: 120px; }
.mix-bar > span { display: block; height: 100%; }
.mix-legend { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.mix-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; flex-shrink: 0; }

/* ============================================================================
   Agent comparison (intl order — the §5 standout interactive screen)
   ============================================================================ */
.cmp-wrap { overflow-x: auto; }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 720px; }
.cmp-table th, .cmp-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border-soft); font-size: 13px; vertical-align: middle; }
/* Item info columns pinned left */
.cmp-table .cmp-item { text-align: left; }
.cmp-table thead th { background: white; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-heading); border-bottom: 2px solid var(--color-border); white-space: nowrap; }
/* An agent occupies a 2-col group (rate · carrying); grouped header spans them */
.cmp-agent-head { text-align: center; border-left: 1px solid var(--color-border); position: relative; }
.cmp-agent-head .cmp-agent-name { font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--color-text-heading); }
.cmp-agent-head .cmp-agent-rm { position: absolute; top: 6px; right: 6px; color: var(--color-text-subtle); cursor: pointer; font-size: 12px; }
.cmp-agent-head .cmp-agent-rm:hover { color: var(--color-brand-red); }
.cmp-table td.cmp-grp-start, .cmp-table th.cmp-grp-start { border-left: 1px solid var(--color-border); }
.cmp-rate-input {
  width: 74px; height: 30px; padding: 0 8px; text-align: right;
  border: 1px solid var(--color-border); border-radius: 6px;
  font-family: var(--font-mono); font-size: 12.5px; background: var(--color-white);
}
.cmp-rate-input:focus { outline: none; background: white; border-color: var(--color-brand-red); box-shadow: 0 0 0 3px rgba(210,21,30,0.10); }
.cmp-carry { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* Winner emphasis: cheapest cell in a row, and the overall-winner column */
.cmp-win-cell { background: var(--color-success-soft); font-weight: 700; color: var(--color-success-text); border-radius: 5px; }
.cmp-win-col { background: rgba(31, 138, 91, 0.05); }
.cmp-foot td { border-top: 2px solid var(--color-border); font-weight: 700; }
.cmp-foot .cmp-sub { font-weight: 500; color: var(--color-text-muted); font-size: 11px; }
.cmp-incomplete td { background: var(--color-warning-soft); }
.cmp-incomplete .cmp-item { color: var(--color-warning-text); }
/* Basis segmented toggle inside a cell */
/* Previous (bordered-track) version — revert candidate:
.basis-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--color-bg-page); border: 1px solid var(--color-border); border-radius: 6px; }
.basis-seg button { border: 0; background: transparent; font-size: 11px; font-weight: 600; padding: 2px 7px; cursor: pointer; color: var(--color-text-subtle); border-radius: 4px; }
.basis-seg button.on { background: white; color: var(--color-text-heading); box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04); }
*/
.basis-seg { display: inline-flex; background: #eef1f5; border-radius: 6px; }
.basis-seg button { border: 0; background: transparent; font-size: 11px; font-weight: 600; padding: 3px 8px; cursor: pointer; color: var(--color-text-subtle); border-radius: 6px; }
.basis-seg button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-info); position: relative; z-index: 1; }
.basis-seg button.on { background: white; color: var(--color-text-heading); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
.basis-seg button.on:focus-visible { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08), 0 0 0 2px var(--color-info); }
.cmp-winbadge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--color-success-text); text-transform: uppercase; letter-spacing: 0.04em; }

/* Carton-granular fulfillment picker (§5) */
.carton-pick-row { display: flex; align-items: center; gap: 12px; padding: 6px 14px; border-bottom: 1px solid var(--color-border-soft); }
.carton-pick-row.is-picked { background: var(--color-info-soft); }
.ff-item-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.ff-item-main .cell-id { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-mark-pill { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 1px 8px; border-radius: 999px; background: var(--color-bg-subtle, #f0f2f5); border: 1px solid var(--color-border); font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--color-text-muted); }
.ff-mark-pill i { font-size: 9.5px; color: var(--color-text-subtle); }
.ff-pending-pill { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 1px 8px; border-radius: 999px; background: transparent; border: 1px solid var(--color-border); font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--color-text-muted); white-space: nowrap; }
.ff-pending-pill i { font-size: 10px; color: var(--color-text-muted); }
.carton-input { width: 72px; height: 30px; padding: 0 8px; text-align: right; border: 1px solid var(--color-border); border-radius: 6px; font-family: var(--font-mono); font-size: 12.5px; background: var(--color-white); }
.carton-input:focus { outline: none; background: white; border-color: var(--color-info); box-shadow: 0 0 0 3px rgba(2,132,199,0.12); }
.carton-input::-webkit-outer-spin-button, .carton-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.carton-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Order line-item editor totals row */
.line-editor-foot { display: flex; justify-content: flex-end; gap: 28px; padding: 12px 16px; border-top: 2px solid var(--color-border); flex-wrap: wrap; }
.line-editor-foot .let-stat { text-align: right; }
.line-editor-foot .let-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-subtle); }
.line-editor-foot .let-val { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--color-text-heading); font-variant-numeric: tabular-nums; }

/* Litepicker — theme to match app -------------------------- */
.litepicker .container__main,
.litepicker .container__months,
.litepicker .container__footer,
.litepicker .container__predefined-ranges {
  box-shadow: none !important;
}
.litepicker {
  /* a notch more compact than stock (38px days) */
  --litepicker-day-width: 30px;
  --litepicker-month-width: calc(var(--litepicker-day-width) * 7);
  --litepicker-day-color: var(--color-text);
  --litepicker-day-color-hover: var(--color-text);
  --litepicker-is-today-color: var(--color-brand-red);
  --litepicker-is-in-range-color: var(--color-brand-red-hover);
  --litepicker-is-in-range-bg: var(--color-brand-red-soft);
  --litepicker-is-start-color: white;
  --litepicker-is-start-color-bg: var(--color-brand-red);
  --litepicker-is-end-color: white;
  --litepicker-is-end-color-bg: var(--color-brand-red);
  --litepicker-button-prev-month-color: var(--color-text-muted);
  --litepicker-button-prev-month-color-hover: var(--color-brand-red);
  --litepicker-button-next-month-color: var(--color-text-muted);
  --litepicker-button-next-month-color-hover: var(--color-brand-red);
  --litepicker-month-header-color: var(--color-text);
  --litepicker-container-months-color-bg: white;
  --litepicker-container-months-box-shadow-color: transparent;
  --litepicker-container-footer-color-bg: white;
  --litepicker-container-footer-box-shadow-color: transparent;
  --litepicker-footer-color-bg: white;
  --litepicker-footer-button-color: white;
  --litepicker-footer-button-bg: var(--color-brand-red);
  --litepicker-footer-button-hover-bg: var(--color-brand-red-hover);
  --litepicker-footer-button-cancel-color: var(--color-text);
  --litepicker-footer-button-cancel-bg: var(--color-neutral-soft);
  --litepicker-footer-button-cancel-hover-bg: var(--color-border);

  font-family: var(--font-sans);
  border-radius: var(--card-radius);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: 0;
  overflow: hidden;
  background: white;
}
.litepicker .container__months {
  box-shadow: none !important;
  padding: 4px;
}
.litepicker .container__months .month-item-header {
  padding: 6px 6px 2px;
}
.litepicker .container__months .month-item-header > div > .month-item-name,
.litepicker .container__months .month-item-header > div > .month-item-year {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.litepicker .container__months .month-item-header div > .month-item-name { margin-right: 4px; }

.litepicker .container__months .month-item-weekdays-row > div {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 0 6px;
}

.litepicker .container__days .day-item {
  border-radius: 6px;
  font-size: 12px;
  height: var(--litepicker-day-width) !important;
  line-height: 1 !important;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: var(--color-text);
  padding: 0;
  height: 36px;
  line-height: 36px;
  box-shadow: none !important;
}
.litepicker .container__days .day-item:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  box-shadow: none !important;
}
.litepicker .container__days .day-item.is-today {
  color: var(--color-brand-red);
  font-weight: 600;
}
.litepicker .container__days .day-item.is-in-range {
  background: var(--color-brand-red-soft);
  color: var(--color-brand-red-hover);
  border-radius: 0;
}
.litepicker .container__days .day-item.is-start-date,
.litepicker .container__days .day-item.is-end-date,
.litepicker .container__days .day-item.is-start-date.is-end-date {
  background: var(--color-brand-red);
  color: white;
  font-weight: 600;
}
.litepicker .container__days .day-item.is-start-date { border-radius: 6px 0 0 6px; }
.litepicker .container__days .day-item.is-end-date { border-radius: 0 6px 6px 0; }
.litepicker .container__days .day-item.is-start-date.is-end-date { border-radius: 6px; }
.litepicker .container__days .day-item.is-locked {
  color: var(--color-text-subtle);
  opacity: 0.4;
}

.litepicker .container__months .button-previous-month,
.litepicker .container__months .button-next-month {
  border-radius: 6px;
  padding: 4px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.litepicker .container__months .button-previous-month svg,
.litepicker .container__months .button-next-month svg {
  fill: var(--color-text-muted);
}
.litepicker .container__months .button-previous-month:hover,
.litepicker .container__months .button-next-month:hover {
  background: var(--color-surface-hover);
}
.litepicker .container__months .button-previous-month:hover svg,
.litepicker .container__months .button-next-month:hover svg {
  fill: var(--color-brand-red);
}

.litepicker .container__footer {
  padding: 8px 10px;
  border-top: 1px solid var(--color-border-soft);
  background: white;
}
.litepicker .container__footer .preview-date-range {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text-muted);
}
.litepicker .container__footer .button-cancel,
.litepicker .container__footer .button-apply {
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  padding: 5px 12px;
  border: 0;
  margin-left: 6px;
}
.litepicker .container__footer .button-apply {
  background: var(--color-brand-red);
  color: white;
}
.litepicker .container__footer .button-apply:hover {
  background: var(--color-brand-red-hover);
}
.litepicker .container__footer .button-apply:disabled {
  background: var(--color-neutral-soft);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}
.litepicker .container__footer .button-cancel {
  background: transparent;
  color: var(--color-text-muted);
}
.litepicker .container__footer .button-cancel:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

/* Ranges plugin — preset shortcuts panel (positioned left of the months) */
.litepicker .container__predefined-ranges {
  background: var(--color-bg);
  border-right: 1px solid var(--color-border-soft);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
}
.litepicker .container__predefined-ranges button {
  background: transparent;
  border: 0;
  font-size: 12.5px;
  font-family: var(--font-sans);
  color: var(--color-text);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.litepicker .container__predefined-ranges button:hover {
  background: var(--color-brand-red-soft);
  color: var(--color-brand-red) !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

/* Responsive ----------------------------------------------- */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    transform: translateX(-100%);
    overflow-y: auto; /* the off-canvas drawer alone may scroll internally */
    transition: transform 0.18s ease, width 0.18s ease;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .breadcrumb-trail { display: none; }
  .page-content { padding: 14px 14px; }
}

/* DataTables — keep wide tables horizontally scrollable inside the card
   instead of overflowing the card (and the body) on narrow viewports. */
.card-x > .dt-container {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}
/* The dt-bot toolbar sits inside the same scroll container; pin it to the
   visible scrollport so it stays usable even when the user scrolls the table. */
.card-x > .dt-container > .dt-bot {
  position: sticky;
  left: 0;
}

/* Narrow viewports: stack the dt-bot pieces so pagination doesn't get crushed
   into a tiny column that wraps every button onto its own row. */
@media (max-width: 640px) {
  .card-x > .dt-container > .dt-bot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 12px;
  }
  .card-x > .dt-container > .dt-bot .dt-bot-left {
    justify-content: center;
    text-align: center;
    min-height: 0;
  }
  .card-x > .dt-container > .dt-bot .dt-bot-right {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 8px;
  }
  .card-x > .dt-container > .dt-bot .dt-paging .pagination {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* --- Mobile cleanup for elements that overflow the viewport --- */

   ("2 active", "1 paused") on narrow viewports so the topbar fits. */
@media (max-width: 640px) {
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar-right { gap: 8px; }
}

/* Horizontal tab strips: status-tabs and tabs-x scroll horizontally at ANY
   width where the full strip doesn't fit (7 status tabs overflow well above
   phone widths) — swipe/scroll instead of breaking out of the page. */
.status-tabs,
.tabs-x {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* keep the bottom border full-width as the strip scrolls */
  padding-bottom: 1px;
}
.status-tabs::-webkit-scrollbar,
.tabs-x::-webkit-scrollbar { height: 2px; }
.status-tabs::-webkit-scrollbar-thumb,
.tabs-x::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.status-tab,
.tab-x { flex: 0 0 auto; }

/* Active-filter popovers anchored to chips can extend past the right
   edge of narrow viewports. Cap their width to fit. */
@media (max-width: 640px) {
  .af-popover {
    min-width: 0;
    max-width: calc(100vw - 24px);
    width: max-content;
  }
  .af-popover-list { max-height: 50vh; }
  /* Items become tight at narrow widths — let labels wrap, keep checks/counts pinned. */
  .af-popover-item {
    flex-wrap: wrap;
    row-gap: 2px;
  }
}

/* Belt-and-braces: clip any residual horizontal overflow at the page
   level on mobile (open popovers anchored mid-row, long flash content,
   etc.) so the whole page never side-scrolls. The sidebar (off-canvas
   at this breakpoint) and the table scroll wrapper are unaffected. */
@media (max-width: 768px) {
  html, body { overflow-x: clip; }
}

/* ============================================================================
   SweetAlert2 theme — project design system
   ----------------------------------------------------------------------------
   Loads AFTER sweetalert2.min.css so it wins by source order. Restyles
   SweetAlert v11 to match the admin design system (icon-left two-column
   layout, brand-red primary actions, divided right-aligned footer,
   design-system inputs, compact toast with colored accent stripe).
   No JS migration needed — existing Swal.fire(...) calls inherit the look.
   Two opt-ins:
     • Destructive confirm: customClass: { confirmButton: 'swal2-confirm--danger' }
     • Toast accent stripe: customClass: { popup: 'toast--success' | error | warning | info }
   ============================================================================ */

:root {
  --swal-radius: 12px;
  --swal-pad-x: 24px;
}

/* --- Backdrop ------------------------------------------------------------- */
.swal2-container {
  padding: 1rem;
}
.swal2-container.swal2-backdrop-show {
  background: rgba(15, 23, 42, 0.42);
}

/* --- The card ------------------------------------------------------------- */
.swal2-popup {
  width: 27em;
  max-width: calc(100vw - 2rem);
  padding: 0;
  border: 1px solid var(--color-border, var(--color-border));
  border-radius: var(--swal-radius);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
  background: var(--color-white, var(--color-white));
  font-family: var(--font-sans, 'Inter', system-ui, -apple-system, sans-serif);
  font-size: 14px;
  color: var(--color-text, var(--color-text));
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  justify-items: stretch;
}
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file,
.swal2-range,
.swal2-radio,
.swal2-checkbox,
.swal2-actions,
.swal2-footer,
.swal2-validation-message,
.swal2-progress-steps,
.swal2-image,
.swal2-timer-progress-bar-container { grid-column: 1 / -1; }

/* --- Icon: small soft tinted badge, left-aligned ------------------------- */
.swal2-icon {
  width: 5em;
  height: 5em;
  font-size: 8.4px;
  margin: var(--swal-pad-x) 14px 0 var(--swal-pad-x);
  border: 0 !important;
  border-radius: 1.25em;
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: start;
  flex-shrink: 0;
}
.swal2-icon .swal2-icon-content {
  font-size: 3.2em;
  font-weight: 600;
  line-height: 1;
}
.swal2-icon.swal2-success { background: var(--color-success-soft, var(--color-success-soft)); }
.swal2-icon.swal2-error   { background: var(--color-brand-red-soft, var(--color-brand-red-soft)); }
.swal2-icon.swal2-warning { background: var(--color-warning-soft, var(--color-warning-soft)); color: var(--color-warning, var(--color-warning)); }
.swal2-icon.swal2-info    { background: var(--color-info-soft, var(--color-info-soft)); color: var(--color-info, var(--color-info)); }
.swal2-icon.swal2-question{ background: var(--color-neutral-soft, var(--color-neutral-soft)); color: var(--color-neutral, var(--color-neutral)); }

.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--color-success, var(--color-success)); }
.swal2-icon.swal2-success .swal2-success-ring { display: none; }
.swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-icon.swal2-success .swal2-success-fix { display: none; }

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--color-brand-red, var(--color-brand-red)); }

/* --- Close button --------------------------------------------------------- */
.swal2-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: var(--color-text-subtle, var(--color-text-subtle));
  font-size: 24px;
  transition: background 0.12s, color 0.12s;
}
.swal2-close:hover,
.swal2-close:focus {
  background: var(--color-surface-hover, var(--color-surface-hover));
  color: var(--color-text, var(--color-text));
  outline: none;
}

/* --- Title ---------------------------------------------------------------- */
.swal2-title {
  grid-column: 2;
  grid-row: 1;
  padding: var(--swal-pad-x) var(--swal-pad-x) 0 0;
  margin: 0;
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-text, var(--color-text));
  align-self: start;
}
.swal2-popup:not(:has(.swal2-icon[style*='flex'])) .swal2-title,
.swal2-popup:not(:has(.swal2-icon[style*='flex'])) .swal2-html-container { padding-left: var(--swal-pad-x); }

/* --- Body text ------------------------------------------------------------ */
.swal2-popup .swal2-html-container {
  grid-column: 2;
  grid-row: 2;
  padding: 5px var(--swal-pad-x) 0 0;
  margin: 0;
  text-align: left !important;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-muted, var(--color-text-muted));
  overflow: visible;
  justify-content: flex-start;
}
.swal2-popup .swal2-html-container > * { text-align: left; }
.swal2-html-container b,
.swal2-html-container strong { color: var(--color-text, var(--color-text)); font-weight: 600; }
.swal2-html-container code,
.swal2-html-container .mono {
  font-family: var(--font-mono, 'Roboto Mono', ui-monospace, monospace);
  font-size: 12.5px;
  background: var(--color-neutral-soft, var(--color-neutral-soft));
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--color-text, var(--color-text));
}

/* --- Inputs --------------------------------------------------------------- */
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
  margin: 14px var(--swal-pad-x) 0;
  width: calc(100% - 2 * var(--swal-pad-x));
  box-shadow: none;
  border: 1px solid var(--color-border, var(--color-border));
  border-radius: 7px;
  background: var(--color-white);
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13.5px;
  color: var(--color-text, var(--color-text));
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.swal2-input { height: 38px; padding: 0 12px; }
.swal2-textarea { padding: 10px 12px; min-height: 84px; }
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus,
.swal2-file:focus {
  outline: none;
  background: var(--color-white);
  border-color: var(--color-brand-red, var(--color-brand-red));
  box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
}
.swal2-input::placeholder,
.swal2-textarea::placeholder { color: var(--color-text-subtle, var(--color-text-subtle)); }

.swal2-range,
.swal2-radio,
.swal2-checkbox { margin: 14px var(--swal-pad-x) 0; background: transparent; }
.swal2-radio label,
.swal2-checkbox label { font-size: 13.5px; color: var(--color-text, var(--color-text)); }
.swal2-input[type='radio'],
.swal2-radio input,
.swal2-checkbox input { accent-color: var(--color-brand-red, var(--color-brand-red)); }

.swal2-validation-message {
  margin: 14px var(--swal-pad-x) 0;
  padding: 8px 12px;
  border-radius: 7px;
  background: var(--color-brand-red-soft, var(--color-brand-red-soft));
  color: var(--color-brand-red-hover, var(--color-brand-red-hover));
  font-size: 12.5px;
  font-weight: 500;
  justify-content: flex-start;
  text-align: left;
}
.swal2-validation-message::before {
  background: var(--color-brand-red, var(--color-brand-red));
  margin: 0 8px 0 0;
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 11px;
}

/* --- Actions: right-aligned footer with a top divider --------------------- */
.swal2-actions {
  margin: 20px 0 0;
  padding: 14px var(--swal-pad-x);
  width: 100%;
  border-top: 1px solid var(--color-border-soft, var(--color-border-soft));
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.swal2-actions:empty { display: none; }

.swal2-styled {
  margin: 0;
  padding: 7px 15px;
  border-radius: 7px;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.swal2-styled:focus { box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.18); }

.swal2-styled.swal2-confirm {
  background: var(--color-brand-red, var(--color-brand-red));
  border: 1px solid var(--color-brand-red, var(--color-brand-red));
  color: var(--color-white);
}
.swal2-styled.swal2-confirm:hover {
  background: var(--color-brand-red-hover, var(--color-brand-red-hover));
  border-color: var(--color-brand-red-hover, var(--color-brand-red-hover));
}

.swal2-styled.swal2-cancel {
  background: var(--color-white);
  border: 1px solid var(--color-border, var(--color-border));
  color: var(--color-text, var(--color-text));
}
.swal2-styled.swal2-cancel:hover {
  background: var(--color-surface-hover, var(--color-surface-hover));
  border-color: var(--color-border, var(--color-border));
}
.swal2-styled.swal2-cancel:focus { box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.10); }

.swal2-styled.swal2-deny {
  background: var(--color-white);
  border: 1px solid var(--color-brand-red, var(--color-brand-red));
  color: var(--color-brand-red, var(--color-brand-red));
}
.swal2-styled.swal2-deny:hover {
  background: var(--color-brand-red, var(--color-brand-red));
  border-color: var(--color-brand-red, var(--color-brand-red));
  color: var(--color-white);
}

.swal2-styled.swal2-confirm.swal2-confirm--danger {
  background: var(--color-brand-red, var(--color-brand-red));
  border-color: var(--color-brand-red, var(--color-brand-red));
}
.swal2-styled.swal2-confirm.swal2-confirm--danger:hover {
  background: var(--color-brand-red-hover, var(--color-brand-red-hover));
  border-color: var(--color-brand-red-hover, var(--color-brand-red-hover));
}

.swal2-loading .swal2-styled.swal2-confirm { background: var(--color-brand-red, var(--color-brand-red)); }
.swal2-loader { border-color: var(--color-white) transparent var(--color-white) transparent; }

/* --- Footer (links / fine print) ----------------------------------------- */
.swal2-footer {
  margin: 0;
  padding: 12px var(--swal-pad-x);
  border-top: 1px solid var(--color-border-soft, var(--color-border-soft));
  font-size: 12px;
  color: var(--color-text-muted, var(--color-text-muted));
  justify-content: flex-start;
  text-align: left;
}
.swal2-footer a { color: var(--color-brand-red, var(--color-brand-red)); }
.swal2-actions + .swal2-footer { border-top: 0; padding-top: 0; }

/* --- Progress steps ------------------------------------------------------- */
.swal2-progress-steps { margin: 16px var(--swal-pad-x) 0; padding: 0; }
.swal2-progress-steps .swal2-progress-step { background: var(--color-brand-red, var(--color-brand-red)); }
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step { background: var(--color-brand-red, var(--color-brand-red)); }
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step,
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line { background: var(--color-border, var(--color-border)); }
.swal2-progress-steps .swal2-progress-step-line { background: var(--color-brand-red, var(--color-brand-red)); }

/* --- Timer bar ------------------------------------------------------------ */
.swal2-timer-progress-bar { background: var(--color-brand-red, var(--color-brand-red)); height: 3px; }

/* === Toast — compact corner notification ================================ */
.swal2-popup.swal2-toast {
  width: auto;
  max-width: 380px;
  padding: 12px 14px;
  border: 1px solid var(--color-border, var(--color-border));
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.05);
  align-items: center;
}
.swal2-popup.swal2-toast .swal2-icon {
  width: 5em;
  height: 5em;
  font-size: 5.8px;
  min-width: 29px;
  margin: 0 11px 0 0;
  border-radius: 1.4em;
  grid-row: auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swal2-popup.swal2-toast .swal2-icon > * { display: none !important; }
.swal2-popup.swal2-toast .swal2-icon::after {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.swal2-popup.swal2-toast .swal2-icon.swal2-success::after { content: '\2713'; color: var(--color-success, var(--color-success)); }
.swal2-popup.swal2-toast .swal2-icon.swal2-error::after   { content: '\2715'; font-size: 14px; color: var(--color-brand-red, var(--color-brand-red)); }
.swal2-popup.swal2-toast .swal2-icon.swal2-warning::after { content: '!'; color: var(--color-warning, var(--color-warning)); }
.swal2-popup.swal2-toast .swal2-icon.swal2-info::after    { content: 'i'; font-family: Georgia, 'Times New Roman', serif; font-style: italic; color: var(--color-info, var(--color-info)); }
.swal2-popup.swal2-toast .swal2-icon.swal2-question::after{ content: '?'; color: var(--color-neutral, var(--color-neutral)); }
.swal2-popup.swal2-toast .swal2-title {
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text, var(--color-text));
}
.swal2-popup.swal2-toast .swal2-html-container {
  padding: 0;
  font-size: 12.5px;
  line-height: 1.4;
}
.swal2-popup.swal2-toast .swal2-actions {
  margin: 0 0 0 8px;
  padding: 0;
  border-top: 0;
  width: auto;
}
.swal2-popup.swal2-toast .swal2-styled { padding: 5px 11px; font-size: 12px; }
.swal2-popup.swal2-toast .swal2-close {
  position: static;
  width: 24px;
  height: 24px;
  font-size: 20px;
  margin-left: 6px;
}
.swal2-popup.swal2-toast .swal2-timer-progress-bar-container { border-radius: 0 0 10px 10px; }
.swal2-popup.swal2-toast .swal2-timer-progress-bar { background: var(--color-border, var(--color-border)); }

.swal2-popup.swal2-toast.toast--success { border-left: 3px solid var(--color-success, var(--color-success)); }
.swal2-popup.swal2-toast.toast--error   { border-left: 3px solid var(--color-brand-red, var(--color-brand-red)); }
.swal2-popup.swal2-toast.toast--warning { border-left: 3px solid var(--color-warning, var(--color-warning)); }
.swal2-popup.swal2-toast.toast--info    { border-left: 3px solid var(--color-info, var(--color-info)); }

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .swal2-show, .swal2-hide, .swal2-icon.swal2-success [class^='swal2-success-line'] { animation: none !important; }
}

/* ============================================================================
   Mobile audit additions
   ----------------------------------------------------------------------------
   Patches applied after a static review pass for mobile-specific issues.
   The existing responsive sections above cover the bulk of mobile behavior;
   these rules target the gaps. Tested heuristically against the source —
   verify on real devices before shipping to production.
   ============================================================================ */

/* --- iOS input zoom prevention -------------------------------------------- */
/* iOS Safari zooms the viewport when an input is focused and its font-size
   is below 16px. Below 640px viewport width, force inputs to 16px and
   compensate with padding so the visual size stays roughly equivalent.    */
@media (max-width: 640px) {
  .form-control,
  .form-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="time"],
  textarea,
  select {
    font-size: 16px;
  }
}

/* --- Sidebar backdrop on mobile-open -------------------------------------- */
/* When the sidebar slides in on mobile, the rest of the page is still
   tappable underneath. Add a tap-to-dismiss dimmed backdrop so the
   sidebar feels modal and the user can close it by tapping outside.
   The backdrop element is `.sidebar-backdrop` — render it in the shell
   partial as a sibling of `.sidebar`, no inline style needed.            */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  z-index: 49;            /* below sidebar (z: 50+), above content       */
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
  .sidebar.mobile-open ~ .sidebar-backdrop,
  .sidebar.mobile-open + .sidebar-backdrop {
    display: block;
  }
}

/* --- Tap target minimums -------------------------------------------------- */
/* iOS HIG and Android Material both recommend a minimum 44px tap target.
   Many of our compact buttons (28px / 30px height) are tighter than that
   for desktop density. Bump them on mobile.                              */
@media (max-width: 640px) {
  .btn,
  .btn-sm,
  .rcell-action,
  .topbar-toggle,
  .sidebar-collapse-btn,
  .filter-strip .btn,
  .af-popover .btn {
    min-height: 40px;            /* slightly under 44 to keep density   */
    padding-left: 14px;
    padding-right: 14px;
  }
  /* Icon-only buttons need square tap targets, not just min-height. */
  .rcell-action,
  .topbar-toggle,
  .sidebar-collapse-btn {
    min-width: 40px;
  }
}

/* --- Filter pills wrapping ----------------------------------------------- */
/* On narrow viewports, allow filter pills to wrap onto multiple rows
   rather than overflowing the container.                                */
@media (max-width: 640px) {
  .filter-fieldset,
  .filter-strip {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .af-chip,
  .filter-pill {
    flex: 0 1 auto;
  }
}

/* --- Custom modal-x mobile treatment ------------------------------------- */
/* On small screens Bootstrap's .modal-dialog can feel cramped — give
   .modal-x dialogs the full viewport minus safe-area padding. */
@media (max-width: 640px) {
  .modal-x .modal-dialog {
    margin: 0;
    max-width: 100vw;
    min-height: 100vh;
  }
  .modal-x .modal-content {
    border-radius: 0;
    min-height: 100vh;
  }
}

/* --- Topbar height + safe area on very small viewports -------------------- */
/* Reduce topbar padding aggressively under 380px (iPhone SE width). */
@media (max-width: 380px) {
  .topbar {
    padding: 0 10px;
    gap: 6px;
  }
  .topbar-right { gap: 6px; }
}

/* --- Body horizontal-scroll prevention (already in main responsive
   section above, kept here for redundancy + iOS clip-path support) ------- */
@supports (overflow-x: clip) {
  html, body { overflow-x: clip; }
}
@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden; }
}

/* ============================================================================
   PMS additions — components this project adds on top of the starter.
   ============================================================================ */

/* --- Brand wordmark (no logo: plain "PMS" chip in brand colour) ----------- */
.sidebar-brand-mark.brand-wordmark {
  width: auto;
  padding: 0 9px;
  font-size: 13px;
  letter-spacing: 0.06em;
}
.sidebar-brand-text small { white-space: normal; line-height: 1.35; }

/* --- Classification & VIP marks (products / RFQ lines) -------------------- */
.pill-class {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 18px; padding: 0 6px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
.pill-0s { background: var(--color-danger-soft);  color: var(--color-brand-red-hover); } /* zero stock */
.pill-ls { background: var(--color-warning-soft); color: var(--color-warning-text); }    /* low stock */
.pill-urgent {
  display: inline-flex; align-items: center; gap: 3px;
  height: 18px; padding: 0 7px;
  border-radius: 5px;
  background: var(--color-brand-red); color: white;
  font-size: 10.5px; font-weight: 700;
}
.pill-urgent i { font-size: 9px; line-height: 1; }

/* --- Topbar widgets: icon button + alerts bell + user chip ---------------- */
.topbar-icon-btn {
  position: relative;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent;
  border-radius: 8px;
  color: var(--color-text-muted);
  font-size: 17px;
  cursor: pointer;
}
.topbar-icon-btn:hover { background: var(--color-surface-hover); color: var(--color-text); }
.topbar-icon-btn .notif-count {
  position: absolute;
  top: 0; right: -2px;
  min-width: 15px; height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-brand-red);
  color: white;
  font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  border: 2px solid white;
  box-sizing: content-box;
}

.user-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 4px 8px 4px 4px;
  border: 0; background: transparent;
  border-radius: 9px;
  cursor: pointer;
}
.user-chip:hover { background: var(--color-surface-hover); }
.user-avatar {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--color-brand-red-soft);
  color: var(--color-brand-red);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.user-chip .user-meta { display: flex; flex-direction: column; align-items: flex-start; }
.user-chip .user-name { font-size: 12.5px; font-weight: 600; color: var(--color-text); line-height: 1.2; }
.user-chip .user-role { font-size: 10.5px; color: var(--color-text-muted); line-height: 1.2; }
.user-chip > i { font-size: 11px; color: var(--color-text-subtle); }
@media (max-width: 640px) { .user-chip .user-meta { display: none; } }

/* --- Generic dropdown restyle (user menu etc.) ---------------------------- */
.dropdown-menu {
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  box-shadow: var(--shadow-md);
  padding: 5px;
}
.dropdown-menu .dropdown-item {
  display: flex; align-items: center; gap: 9px;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--color-text);
}
.dropdown-menu .dropdown-item i { color: var(--color-text-muted); font-size: 14px; width: 16px; text-align: center; }
.dropdown-menu .dropdown-item:hover { background: var(--color-surface-hover); color: var(--color-text); }
.dropdown-menu .dropdown-item.item-danger,
.dropdown-menu .dropdown-item.item-danger i { color: var(--color-brand-red); }
.dropdown-menu .dropdown-item.item-danger:hover { background: var(--color-brand-red-softer); }
.dropdown-menu .dropdown-header {
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  padding: 6px 10px 4px;
}
.dropdown-menu .dropdown-divider { margin: 4px; border-color: var(--color-border-soft); }

/* --- Notifications dropdown (alerts bell) ---------------------------------- */
.notif-menu {
  width: 330px;
  max-width: calc(100vw - 24px);
  padding: 0;
  overflow: hidden;
}
.notif-menu .notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 13px; font-weight: 600;
  color: var(--color-text-heading);
}
.notif-menu .notif-head a { font-size: 11.5px; font-weight: 500; }
.notif-item {
  display: flex; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-soft);
  text-decoration: none;
}
.notif-item:hover { background: var(--color-surface-hover); text-decoration: none; }
.notif-item .notif-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.notif-item .notif-icon.tone-red   { background: var(--color-brand-red-soft); color: var(--color-brand-red); }
.notif-item .notif-icon.tone-amber { background: var(--color-warning-soft);   color: var(--color-warning); }
.notif-item .notif-icon.tone-blue  { background: var(--color-info-soft);      color: var(--color-info); }
.notif-item .notif-text { min-width: 0; }
.notif-item .notif-title { display: block; font-size: 12.5px; font-weight: 600; color: var(--color-text); line-height: 1.3; }
.notif-item .notif-body  { display: block; font-size: 12px; color: var(--color-text-muted); line-height: 1.35; margin-top: 1px; }
.notif-item .notif-time  { display: block; font-size: 10.5px; color: var(--color-text-subtle); font-family: var(--font-mono); margin-top: 3px; }
.notif-item.is-unread .notif-title::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-brand-red);
  margin-left: 6px;
  vertical-align: 1px;
}
.notif-menu .notif-foot {
  padding: 9px 14px;
  text-align: center;
  border-top: 1px solid var(--color-border-soft);
  background: var(--color-bg);
}
.notif-menu .notif-foot a { font-size: 12px; font-weight: 500; }

/* --- Forms: required mark + password toggle -------------------------------- */
.form-label-x .req { color: var(--color-brand-red); margin-left: 2px; }
.pw-toggle {
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px;
  border: 0; background: transparent;
  border-radius: 6px;
  color: var(--color-text-subtle);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
}
.pw-toggle:hover { color: var(--color-text); background: var(--color-surface-hover); }

/* --- Attachments (Dropzone-style drop area + file rows) -------------------- */
.upload-drop {
  border: 1.5px dashed var(--color-border);
  border-radius: 10px;
  background: var(--color-bg);
  padding: 22px 16px;
  text-align: center;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.upload-drop:hover { border-color: var(--color-brand-red); background: var(--color-brand-red-softer); }
.upload-drop i { font-size: 22px; color: var(--color-text-subtle); display: block; margin-bottom: 6px; }
.upload-drop .upload-hint { font-size: 12.5px; }
.upload-drop .upload-hint strong { color: var(--color-text); font-weight: 600; }
.upload-drop .upload-meta { font-size: 11px; color: var(--color-text-subtle); margin-top: 3px; }

.attach-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.attach-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  background: white;
}
.attach-row .attach-icon {
  width: 30px; height: 30px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-neutral-soft);
  color: var(--color-text-muted);
  font-size: 14px;
  flex-shrink: 0;
}
.attach-row .attach-name {
  font-size: 12.5px; font-weight: 500; color: var(--color-text);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-row .attach-meta { font-size: 11px; color: var(--color-text-subtle); font-family: var(--font-mono); }
.attach-row .attach-actions { margin-left: auto; display: inline-flex; gap: 2px; flex-shrink: 0; }

/* ============================================================================
   Toastr theme — success/info feedback toasts (top-right, ~3s).
   Loads AFTER toastr.min.css. White card + coloured accent stripe + a
   bootstrap-icon glyph injected by PMS.toast() into the title, so the toast
   mirrors the SweetAlert2 toast restyle and either library reads as one
   system. Meaning is carried by stripe colour + icon, never colour alone.
   ============================================================================ */
#toast-container > div {
  width: auto;
  min-width: 260px;
  max-width: 380px;
  padding: 11px 32px 11px 14px;
  margin: 0 0 8px;
  background-color: white !important;
  background-image: none !important;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.05);
  opacity: 1;
  font-family: var(--font-sans);
}
#toast-container > div:hover {
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.16), 0 1px 3px rgba(15, 23, 42, 0.08);
}
#toast-container > .toast-success { border-left: 3px solid var(--color-success); }
#toast-container > .toast-error   { border-left: 3px solid var(--color-brand-red); }
#toast-container > .toast-warning { border-left: 3px solid var(--color-warning); }
#toast-container > .toast-info    { border-left: 3px solid var(--color-info); }
#toast-container .toast-title {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600;
  color: var(--color-text);
}
#toast-container .toast-title .bi { font-size: 14px; line-height: 1; }
#toast-container > .toast-success .toast-title .bi { color: var(--color-success); }
#toast-container > .toast-error   .toast-title .bi { color: var(--color-brand-red); }
#toast-container > .toast-warning .toast-title .bi { color: var(--color-warning); }
#toast-container > .toast-info    .toast-title .bi { color: var(--color-info); }
#toast-container .toast-message { font-size: 12.5px; color: var(--color-text-muted); }
#toast-container .toast-title + .toast-message { margin-top: 2px; }
#toast-container .toast-close-button {
  position: absolute;
  right: 9px; top: 7px;
  color: var(--color-text-subtle);
  opacity: 1;
  font-size: 16px;
  font-weight: 400;
  text-shadow: none;
}
#toast-container .toast-close-button:hover { color: var(--color-text); opacity: 1; }
#toast-container .toast-progress { background: var(--color-border); opacity: 1; height: 2px; }

/* ============================================================================
   RFQ Workspace components
   ============================================================================ */

/* Workspace two-column layout: view rail + cards */
.rfq-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--gap-card); align-items: start; }
@media (max-width: 1100px) { .rfq-layout { grid-template-columns: 1fr; } }

/* In-page view rail (Urgent / Zero stock / Low stock / Archived) */
.view-rail { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.view-link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px; font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.view-link i { font-size: 14px; color: var(--color-text-muted); width: 18px; text-align: center; }
.view-link:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
.view-link .badge-count {
  margin-left: auto;
  background: var(--color-neutral-soft);
  color: var(--color-text-muted);
  font-size: 10.5px; font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.view-link.active { background: var(--color-brand-red-soft); color: var(--color-brand-red); font-weight: 600; }
.view-link.active i { color: var(--color-brand-red); }
.view-link.active .badge-count { background: var(--color-brand-red); color: white; }
.view-rail .rail-divider { height: 1px; background: var(--color-border-soft); margin: 6px 4px; }

/* RFQ card */
.rfq-card { margin-bottom: var(--gap-card); }
.rfq-card .table-x thead th { background: white; }
.rfq-card .table-x tbody tr:hover { background: transparent; }

/* Dense-variant item table cells are tighter than the default table */
.rfq-items-table.table-x tbody td { padding: 8px 10px; }
.rfq-items-table.table-x thead th { padding: 7px 10px; }

/* The 11-column item table scrolls INSIDE the card on narrow viewports
   (same behavior the DataTables wrapper gets) — the page never side-scrolls.
   Status-edit dropdowns use Popper's fixed strategy (set in page JS) so the
   scroll container doesn't clip them. */
.rfq-table-scroll { overflow-x: auto; min-width: 0; }
.rfq-table-scroll .rfq-items-table { min-width: 860px; }

/* Generic horizontal-scroll wrapper for wide plain (non-DataTables) grids —
   the inspection-entry grid has 10 columns and must stay reachable below its
   ~960px natural width (DataTables lists get this from their own wrapper). */
.table-scroll { overflow-x: auto; min-width: 0; max-width: 100%; }
.table-scroll .insp-grid { min-width: 960px; }
/* Dashboard analysis tables (IMS "Stuck in stage": 6 cols incl. a reason
   column) — scroll rather than clip when the card is narrower than the grid. */
.table-scroll .table-x { min-width: 640px; }

/* Payments: form + party-snapshot two-column; stacks on narrow screens so the
   fixed 340px snapshot never crushes the form (mobile-included, like the app). */
.pay-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap-card); align-items: start; }
/* v2 Payments: even 50/50 split — linear form left, party snapshot right */
.pay-layout.pay-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .pay-layout, .pay-layout.pay-split { grid-template-columns: 1fr; } }

/* Revealed "+N more" rows: reference-only — dimmed, actions hidden */
.rfq-dim td { opacity: 0.55; }
.rfq-dim .row-actions, .rfq-dim .item-status-edit { display: none !important; }
.rfq-dim .rfq-row-check { visibility: hidden; }
.rfq-items-table .form-check-input { margin: 0; vertical-align: middle; }

/* ============================================================================
   DSS dashboard — stat strips, foot metas, delayed badge
   ============================================================================ */
.dss-3col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap-card); align-items: start; }
.dss-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--gap-card); align-items: start; }
/* Group-header rows inside a table (e.g. Delayed RFQs grouped by RFQ) */
.table-x tr.tr-group td {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
  padding: 8px 14px;
}
/* Delayed RFQ groups: one shared column grid on every card. Without this
   each table auto-sizes to its own content, so Status / In status / Limit /
   Over by land at different x-positions card to card. Fixed layout + pinned
   widths on the 4 trailing columns; SKU absorbs the rest. */
.delay-group .table-x { table-layout: fixed; width: 100%; }
.delay-group .table-x th:nth-child(2) { width: 150px; }
.delay-group .table-x th:nth-child(3),
.delay-group .table-x th:nth-child(4),
.delay-group .table-x th:nth-child(5) { width: 96px; }
@media (max-width: 640px) {
  /* stacked one-per-row cards — cross-card alignment moot; let content size itself */
  .delay-group .table-x { table-layout: auto; }
}

/* Strip of big stats (allocation pipeline, movement by status) */
.stat-strip { display: flex; flex-wrap: wrap; }
/* Fixed 6-up responsive grid (opt-in — the strip must hold exactly 6 cells):
   6 across on a laptop, 3+3 on mid screens, 2+2+2 on small. Ranged queries so
   exactly ONE layout is active and the cell separators stay correct. Plain
   .stat-strip (IMS dashboard, run summary) keeps the flex-wrap behaviour. */
.stat-strip.cols-6 { display: grid; grid-template-columns: repeat(6, 1fr); }
.stat-strip.cols-6 > .stat-cell { min-width: 0; }
@media (max-width: 1100px) and (min-width: 681px) {
  .stat-strip.cols-6 { grid-template-columns: repeat(3, 1fr); }
  .stat-strip.cols-6 > .stat-cell:nth-child(3n) { border-right: 0; }
  .stat-strip.cols-6 > .stat-cell:nth-child(n+4) { border-top: 1px solid var(--color-border-soft); }
}
@media (max-width: 680px) {
  .stat-strip.cols-6 { grid-template-columns: repeat(2, 1fr); }
  .stat-strip.cols-6 > .stat-cell:nth-child(2n) { border-right: 0; }
  .stat-strip.cols-6 > .stat-cell:nth-child(n+3) { border-top: 1px solid var(--color-border-soft); }
}
.stat-cell {
  flex: 1 1 130px;
  min-width: 130px;
  padding: 0 20px;
  border-right: 1px solid var(--color-border-soft);
  min-height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
}
/* Cells carrying a flush bottom band reserve room EQUAL to the band height
   (no top padding) so the figure centers in the white region above the band
   — equal breathing room above the value and below the subtext. */
.stat-cell:has(> .stat-label:last-child),
.stat-cell:has(> .badge-x:last-child) { padding-bottom: 26px; }
.stat-cell:last-child { border-right: 0; }
.stat-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin-bottom: 6px;
  white-space: nowrap;
}
.stat-value {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-heading);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stat-value .plus { color: var(--color-text-subtle); font-weight: 500; font-size: 14px; margin: 0 2px; }
/* Urgent annotation of a "t ★m" value: no brackets — the grey star glyph
   itself separates and labels the urgent share (star-first, tight pair) */
.stat-value .u-seg { color: var(--color-text-muted); margin-left: 8px; white-space: nowrap; }
.stat-value .u-seg .bi { font-size: 13px; margin-right: 3px; vertical-align: 2px; }
.stat-sub { margin-top: 5px; font-size: 11px; color: var(--color-text-muted); }
.stat-sub.mono { font-size: 10.5px; }
/* "Cutout diary" strip cards: bare title sitting on the page background,
   the white strip as the hero block, and the footer as a recessed shaded
   tab beneath it — inset top shadow = the pages above casting onto the
   thumb-index cutout. */
.card-strip { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.card-strip > .card-x-head { background: transparent; border-bottom: 0; padding: 0 2px 9px; }
.card-strip > .dist-bar {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-bottom: 0;
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  overflow: hidden;
}
.card-strip > .stat-strip {
  background: white;
  border: 1px solid var(--color-border-soft);
  border-bottom: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  box-shadow: var(--shadow-xs);
}
.card-strip > .dist-bar + .stat-strip { border-top: 0; border-radius: 0; }
/* Recess locked at depth 10 (separator 38) — dialed in via tweaks, then baked */
.card-strip > .card-foot-meta {
  background: hsl(215, 18%, 95.3%);
  border: 1px solid var(--color-border-soft);
  border-top: 0;
  border-radius: 0 0 var(--card-radius) var(--card-radius);
  box-shadow: inset 0 4px 5px -3px rgba(15, 23, 42, 0.08);
}

/* Allocation cells: figure → detail; the name is a grey flush full-width
   band at the cell base (mirrors the pipeline status bands). The band is
   absolutely pinned to the base and the figure is justify-center'd in the
   space above it, so the figure keeps even top/bottom breathing room. */
.stat-cell .stat-sub { margin-bottom: 0; }
.stat-cell > .stat-label:last-child {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  background: var(--color-neutral-soft);
  color: var(--color-text-muted);
  text-align: center;
  padding: 5px 8px;
}

/* Status pill snapped flush to the cell's base as a full-width band */
.stat-cell > .badge-x:last-child {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  justify-content: center;
  border-radius: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Card footer meta line: RFQ/user-level counters under a strip */
.card-foot-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 8px 16px;
  border-top: 1px solid var(--color-border-soft);
  font-size: 12.5px;
  color: var(--color-text-muted);
}
.card-foot-meta .foot-stat { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.card-foot-meta .foot-stat b {
  font-family: var(--font-mono);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-text-heading);
  font-variant-numeric: tabular-nums;
}
.card-foot-meta .foot-link { margin-left: auto; font-size: 12px; white-space: nowrap; }

/* Delayed status badge (dashboard + Delayed RFQs page) */
.badge-delayed { background: var(--color-brand-red-soft); color: var(--color-brand-red); }

/* RFQ card header — supplier is the title; one meta line beneath
   (RFQ no · urgent · created · items · reminder); actions right. */
/* Urgent RFQ card: red left edge (items inside carry the red star) */
.rfq-card[data-urgent="1"] { border-left: 3px solid var(--color-brand-red); }
.rfq-card .card-x-head { flex-wrap: wrap; gap: 6px 14px; }
.rfq-head-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.rfq-head-meta .meta-dot { color: var(--color-text-subtle); }
.rfq-actions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; margin-left: auto; }

/* Note-count badge on the RFQ notes icon button */
.row-action-btn { position: relative; }
.row-action-btn .note-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  border-radius: 7px;
  background: var(--color-neutral-soft);
  color: var(--color-text-muted);
  font-size: 8.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
  border: 2px solid white;
  box-sizing: content-box;
}

/* Status badge doubles as the quick status-change dropdown */
button.status-dd { border: 0; cursor: pointer; font-family: inherit; appearance: none; -webkit-appearance: none; }
button.status-dd .status-dd-caret { font-size: 9px; margin-left: 1px; opacity: 0.75; }
button.status-dd:hover { filter: brightness(0.94); }
button.status-dd:focus-visible { outline: 2px solid var(--color-brand-red); outline-offset: 1px; }

.rfq-more-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px dashed var(--color-border);
  background: transparent;
  border-radius: 7px;
  padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.rfq-more-btn:hover { border-color: var(--color-brand-red); color: var(--color-brand-red); background: var(--color-brand-red-softer); }
.rfq-more-btn i { font-size: 12px; }

/* Line-card (variant B) metric pairs */
.metric { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.metric .m-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-text-subtle);
}
.metric .m-val { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Inline requested-qty input (the gate: actions unlock once it is set) */
.req-input {
  width: 68px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--color-warning-soft);
  color: var(--color-text);
}
.req-input:focus {
  outline: none;
  background: white;
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
}

/* Select2 — theme to match app ------------------------------ */
/* Single-select, sized to pair with .form-select-sm */
.select2-container--default .select2-selection--single {
  height: 35px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  /* same white fill as .form-control so mixed forms — text inputs,
     date pickers, selects — read as one family */
  background: var(--color-white);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 33px;
  font-size: 13px;
  color: var(--color-text);
  padding-left: 10px;
  padding-right: 26px;
  text-align: left; /* don't inherit cell alignment (e.g. right-aligned action columns) */
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--color-text-subtle); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 33px; right: 4px; }
/* Small variant (pairs with .form-select-sm in dense tables) — add the
   .select2-sm class to the generated container */
.select2-container--default.select2-sm .select2-selection--single { height: 31px; }
.select2-container--default.select2-sm .select2-selection--single .select2-selection__rendered { line-height: 29px; }
.select2-container--default.select2-sm .select2-selection--single .select2-selection__arrow { height: 29px; }
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
}
.select2-dropdown {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, 0.12));
  overflow: hidden;
}
.select2-search--dropdown { padding: 8px; }
.select2-search--dropdown .select2-search__field {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  padding: 5px 9px;
  font-family: inherit;
}
.select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
}
.select2-results__option {
  font-size: 13px;
  padding: 7px 11px;
  color: var(--color-text);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background: var(--color-brand-red-soft);
  color: var(--color-brand-red);
}
.select2-container--default .select2-results__option--selected { background: var(--color-brand-red); color: white; }
/* Multiple (tagged) variant — chips styled like the app's pills */
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-white);
  min-height: 35px;
  padding: 2px 6px;
  cursor: text;
}
/* Bulk-transfer form: cap tagged multi-selects to one input's height so they
   stay aligned with the single-line fields beside them in the same grid row.
   Extra chips scroll inside the box instead of growing the control. */
#bulk-form .select2-container--default .select2-selection--multiple {
  max-height: 35px;
  overflow-y: auto;
  overflow-x: hidden;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--color-brand-red);
  box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10);
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: white;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 12px;
  color: var(--color-text);
  padding: 2px 7px;
  margin: 3px 4px 2px 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--color-text-subtle);
  margin-right: 4px;
  font-weight: 600;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: var(--color-brand-red); }
.select2-container--default .select2-search--inline .select2-search__field {
  font-size: 13px;
  font-family: inherit;
  margin-top: 5px;
}

/* ============================================================================
   Order editors — order-summary ledger
   ----------------------------------------------------------------------------
   The summary ledger is the stored-total breakdown shown on the dom editor and
   reused on order detail. (The GST-treatment indicator .gst-mode-* that used to
   live here was removed with the per-line GST UI — v2 §C15.)
   ============================================================================ */

/* Order-summary ledger (stored-total breakdown) */
.sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border-soft);
}
.sum-row .sum-label { color: var(--color-text-muted); }
.sum-row .sum-val { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-text); white-space: nowrap; }
.sum-row.sum-tax { padding-top: 5px; padding-bottom: 5px; }
.sum-row.sum-tax .sum-label { padding-left: 14px; position: relative; }
.sum-row.sum-tax .sum-label::before { content: '\21B3'; position: absolute; left: 0; color: var(--color-text-faint); }
.sum-row.sum-grand {
  border-bottom: 0;
  border-top: 2px solid var(--color-border);
  margin-top: 2px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.sum-row.sum-grand .sum-label { font-weight: 700; color: var(--color-text-heading); font-size: 14px; }
.sum-row.sum-grand .sum-val { font-weight: 800; color: var(--color-brand-red); font-size: 18px; }
.sum-foot { padding: 10px 16px 14px; font-size: 11px; color: var(--color-text-subtle); line-height: 1.4; }

/* ============================================================================
   Fulfillment create — carton-granular multi-order picker (§5)
   ----------------------------------------------------------------------------
   Pairs with the existing .carton-pick-row / .carton-input helpers. An order
   the selected agent has handed off is one .ff-order-group; per-(fulfillment,
   order) handling (D-5, entered in supplier FX) sits in the group head and
   lights up once any carton in that order is picked.
   ============================================================================ */
.ff-order-group { border: 1px solid var(--color-border-soft); border-radius: var(--card-radius); overflow: hidden; margin-bottom: 12px; }
.ff-order-group.is-active { border-color: var(--color-info); box-shadow: var(--shadow-xs); }
.ff-order-head {
  display: flex; align-items: center; gap: 10px 14px;
  padding: 10px 14px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
  flex-wrap: wrap;
}
.ff-order-group.is-active .ff-order-head { background: var(--color-info-soft); }
.ff-order-head .ff-order-id { font-family: var(--font-mono); font-weight: 700; color: var(--color-text-heading); }
/* Hyperlinked order ids keep the standard cell-link hover (this rule sits after
   the color override above, which would otherwise win on equal specificity). */
.ff-order-head a.ff-order-id:hover { color: var(--color-brand-red); text-decoration: underline solid var(--color-brand-red); }
.ff-order-head .ff-order-meta { font-size: 12px; color: var(--color-text-muted); }
.ff-order-head .ff-order-meta .meta-dot { color: var(--color-text-subtle); margin: 0 5px; }
.ff-order-handling { margin-left: auto; display: flex; align-items: center; gap: 8px; opacity: 0.5; transition: opacity 0.12s; }
.ff-order-group.is-active .ff-order-handling { opacity: 1; }
.ff-order-handling .ff-handling-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-subtle); white-space: nowrap; }
.ff-handling-input {
  width: 92px; height: 30px; padding: 0 8px 0 18px; text-align: right;
  border: 1px solid var(--color-border); border-radius: 6px;
  font-family: var(--font-mono); font-size: 12.5px; background: var(--color-white);
}
.ff-handling-input:focus { outline: none; background: white; border-color: var(--color-info); box-shadow: 0 0 0 3px rgba(2,132,199,0.12); }
.ff-handling-input::-webkit-outer-spin-button, .ff-handling-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ff-handling-input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.ff-handling-inr { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); white-space: nowrap; min-width: 74px; }
.ff-avail { font-family: var(--font-mono); font-size: 12px; color: var(--color-text-muted); white-space: nowrap; }
.ff-avail.is-full { color: var(--color-warning); }
/* Agent's last-N fulfillment refs — a sequence hint (read-only chips) */
.ff-ref-hint { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ff-ref-chip {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-neutral-soft);
  padding: 2px 8px; border-radius: 5px;
}

/* ============================================================================
   Settings — unified configuration list (§Admin/Settings)
   ----------------------------------------------------------------------------
   Replaces the per-setting card grid with one flowing panel: a sticky section
   anchor-nav on the left, and a single card on the right whose sections are
   separated by header bars and whose settings are rows (label + description
   left, control right) divided by hairlines — no box per setting. Controls
   reuse the brand focus ring; the day/hour/unit suffix is an appended addon
   on numeric fields. Toggles use .settings-switch (brand-red when on).
   ============================================================================ */
.settings-layout {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 1080px) {
  .settings-layout { grid-template-columns: 1fr; gap: 14px; }
}

/* Left anchor nav — sticky under the topbar */
.settings-nav {
  position: sticky;
  top: calc(var(--topbar-height) + 18px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-nav-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-subtle);
  padding: 0 11px 6px;
}
.settings-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  border-radius: 7px;
  font-size: 13px; font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer; white-space: nowrap;
  border: 0; background: transparent; text-align: left; width: 100%;
}
.settings-nav-link i { font-size: 14px; width: 17px; text-align: center; color: var(--color-text-subtle); flex-shrink: 0; }
.settings-nav-link:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
.settings-nav-link.active { background: var(--color-brand-red-soft); color: var(--color-brand-red); font-weight: 600; }
.settings-nav-link.active i { color: var(--color-brand-red); }
@media (max-width: 1080px) {
  .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .settings-nav-title { display: none; }
  .settings-nav-link { width: auto; padding: 6px 12px; border: 1px solid var(--color-border-soft); }
}

/* Right panel — one card per subsystem group */
.settings-panel { overflow: hidden; }
.settings-section { scroll-margin-top: calc(var(--topbar-height) + 20px); }
.settings-section + .settings-section { border-top: 1px solid var(--color-border); }
/* Subsystem groups — one card per group, stacked with a gap between them. */
.settings-panels { display: flex; flex-direction: column; gap: var(--gap-card); min-width: 0; }

.settings-section-head {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 15px 22px 14px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
}
.settings-section-icon {
  width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: white; border: 1px solid var(--color-border-soft);
  color: var(--color-text-muted); font-size: 15px;
}
.settings-section-head h2 {
  margin: 0; font-size: 14px; font-weight: 700;
  letter-spacing: -0.005em; color: var(--color-text-heading);
}
.settings-section-head p {
  margin: 2px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.45;
}

/* A single setting row */
.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 240px);
  gap: 20px 28px;
  align-items: start;
  padding: 17px 22px;
}
@media (max-width: 820px) {
  .settings-row { grid-template-columns: 1fr; gap: 10px; }
  .settings-row-control { align-items: stretch; }
  .settings-row-control.is-toggle { align-items: flex-start; }
}
.settings-row + .settings-row { border-top: 1px solid var(--color-border-soft); }
.settings-row-label {
  font-size: 13.5px; font-weight: 600; color: var(--color-text-heading);
  display: flex; align-items: center; gap: 8px;
}
.settings-row-desc {
  font-size: 12.5px; color: var(--color-text-muted);
  margin-top: 4px; line-height: 1.5; max-width: 56ch;
}
.settings-row-desc code {
  font-family: var(--font-mono); font-size: 11.5px;
  background: var(--color-neutral-soft); color: var(--color-text);
  padding: 1px 5px; border-radius: 4px;
}

/* Control column */
.settings-row-control { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 0; }
.settings-row-control.is-toggle { align-items: flex-end; justify-content: center; }
.settings-row-hint { font-size: 11.5px; color: var(--color-text-subtle); }
.settings-row-hint b { color: var(--color-text-muted); font-weight: 600; }

/* Field group: bordered wrapper holding an input (+ optional unit addon) or a select */
.settings-field {
  display: flex; align-items: stretch;
  border: 1px solid var(--color-border); border-radius: 8px;
  background: white; overflow: hidden;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.settings-field:focus-within { border-color: var(--color-brand-red); box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.10); }
.settings-field.is-readonly { background: var(--color-neutral-soft); }
.settings-field input,
.settings-field select {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  padding: 9px 12px;
  font-family: var(--font-mono); font-size: 13px; color: var(--color-text);
}
.settings-field input[readonly] { color: var(--color-text-muted); cursor: default; }
.settings-field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'%3e%3cpath d='M3.204 5h9.592L8 10.481 3.204 5zm-.753.659 4.796 5.48a1 1 0 0 0 1.506 0l4.796-5.48c.566-.647.106-1.659-.753-1.659H3.204a1 1 0 0 0-.753 1.659z'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 11px;
}
.settings-field-unit {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 0 13px;
  border-left: 1px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-sans); font-size: 12px; color: var(--color-text-muted);
  white-space: nowrap;
}
.settings-field-unit i { font-size: 12px; }

/* On/off switch — brand-red when engaged */
.settings-switch { position: relative; display: inline-flex; flex-shrink: 0; }
.settings-switch input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.settings-switch .track {
  width: 40px; height: 22px; border-radius: 999px;
  background: var(--color-border-soft); border: 1px solid var(--color-border);
  position: relative; transition: background 0.16s ease, border-color 0.16s ease;
}
.settings-switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: white; box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease;
}
.settings-switch input:checked + .track { background: var(--color-brand-red); border-color: var(--color-brand-red); }
.settings-switch input:checked + .track::after { transform: translateX(18px); }
.settings-switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.18); }

/* Footnote under a section (e.g. terminal statuses excluded) */
.settings-note {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 12px 22px 15px;
  font-size: 12px; color: var(--color-text-muted); line-height: 1.5;
  border-top: 1px dashed var(--color-border);
}
.settings-note i { color: var(--color-text-subtle); margin-top: 1px; }

/* Unsaved-changes indicator in the page header */
.settings-dirty {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--color-warning-text);
  background: var(--color-warning-soft);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.settings-dirty i { font-size: 8px; }


/* ============================================================================
   v2 — PROMOTED PATTERNS (§C12)
   Every inline style that repeated 4+ times across the export was promoted to
   this layer. Two kinds of rule live here:

   1. COMPONENT classes  — a named thing (alert tile, icon chip, index row,
      inspection-grid cell, summary money field). Use these, not utilities,
      when the element is that thing.
   2. UTILITY classes    — single-purpose `u-*` primitives for the long tail
      (typography, colour, gap, spacing, truncation). Bootstrap-style, but
      scoped with the `u-` prefix so they never collide with the kit or a
      plugin theme. This layer is LAST in the file, so same-specificity ties
      resolve in its favour.

   RULES FOR NEW WORK
   - Layout (display / grid / flex / position) is NEVER inline. Reach for a
     component class first, then `u-row`/`u-col`/`u-grid2` + a gap utility.
   - `style="display:none"` IS still allowed inline: it is initial *state*
     that page JS toggles via `el.style.display`, not styling. A class with
     the same effect would fight the script.
   - `<th>` width hints (`style="width: 92px"`) may stay inline — they are
     per-table measurements, not a reusable pattern.
   ========================================================================= */

/* --- Components ---------------------------------------------------------- */

/* Page Index rows */
.idx-list { display: flex; flex-direction: column; padding: 6px; }
.idx-row { display: block; padding: 9px 11px; border-radius: 7px; text-decoration: none; color: inherit; }
.idx-row:hover { background: var(--color-surface-hover); text-decoration: none; }
.idx-name { display: block; font-size: 13px; font-weight: 600; color: var(--color-text-heading); text-decoration: none; }
.idx-desc { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.45; text-decoration: none; }

/* Dashboard alert tiles */
.alert-tile { display: flex; align-items: center; gap: 11px; padding: 13px 16px; background: var(--color-white); text-decoration: none; color: inherit; }
.alert-tile:hover { background: var(--color-surface-hover); text-decoration: none; }
.alert-tile-grid { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-border-soft); text-decoration: none; color: inherit; }
.alert-tile-grid:hover { background: var(--color-surface-hover); text-decoration: none; }

/* Square icon chip (34px) — tone variants follow the status palette */
.icon-chip { width: 34px; height: 34px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.icon-chip-red { background: var(--color-brand-red-soft); color: var(--color-brand-red); }
.icon-chip-amber { background: var(--color-warning-soft); color: var(--color-warning-text); }

/* Small round avatar in a table cell / list row */
.avatar-28 { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }

/* Inline progress / composition bars */
.bar-track { flex: 1; min-width: 0; height: 5px; border-radius: 3px; background: var(--color-border-soft); overflow: hidden; }
.bar-track-lg { display: block; flex: 1; min-width: 140px; height: 8px; border-radius: 2px; background: var(--color-neutral-soft); }

/* Boxed key/value block, and the read-only DERIVED display (grey fill = not
   editable — same contract as :disabled/[readonly]; see the INPUT FILL note) */
.kv-box { border: 1px solid var(--color-border-soft); border-radius: 8px; padding: 9px 11px; background: var(--color-bg); }
.derived-display { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--color-bg); border-radius: 6px; font-size: 12px; color: var(--color-text-muted); }
.derived-display > i { font-size: 11px; color: var(--color-text-subtle); }

/* Order-summary money field (label | ₹-prefixed right-aligned input) */
.sum-field { position: relative; width: 170px; flex-shrink: 0; }
.sum-field-prefix { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-subtle); font-size: 12px; }

/* Settings: insertable template variable chip */
.var-chip { font-family: var(--font-mono); font-size: 11px; padding: 3px 7px; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-white); color: var(--color-text); cursor: pointer; white-space: nowrap; }
.var-chip:hover { background: var(--color-surface-hover); border-color: var(--color-text-subtle); }

/* Eyebrow labels (uppercase micro-headings) */
.eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-subtle); }
.eyebrow-sm { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; color: var(--color-text-subtle); }
.eyebrow-lg { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 7px; }

/* Superscript footnote marker next to a figure */
.sup-note { font-size: 11px; font-weight: 600; color: var(--color-text-subtle); margin-left: 2px; top: -0.95em; }

/* Striped image/chart placeholder (drop a real chart or shot in) */
.chart-ph { height: 300px; border-radius: 8px; background: repeating-linear-gradient(45deg, var(--color-neutral-soft) 0px, var(--color-neutral-soft) 12px, #e9ebee 12px, #e9ebee 24px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--color-text-subtle); }

/* Inspection-entry grid cells (fixed measure columns in a flex row) */
.insp-cell-66 { width: 66px; flex-shrink: 0; display: flex; justify-content: center; }
.insp-cell-66c { width: 66px; flex-shrink: 0; text-align: center; }
.insp-cell-58 { width: 58px; flex-shrink: 0; text-align: right; font-size: 12.5px; }
.insp-cell-84 { width: 84px; flex-shrink: 0; text-align: right; font-size: 12.5px; }
.insp-cell-46 { width: 46px; flex-shrink: 0; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--color-warning-text); }
.insp-cell-34 { width: 34px; text-align: right; font-size: 11.5px; }

/* --- Utilities ----------------------------------------------------------- */

/* layout */
.u-flex { display: flex; }
.u-iflex { display: inline-flex; align-items: center; }
.u-row { display: flex; align-items: center; }
.u-col { display: flex; flex-direction: column; }
.u-baseline { display: flex; align-items: baseline; }
.u-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.u-wrapf { flex-wrap: wrap; }
.u-between { justify-content: space-between; }
.u-jcenter { justify-content: center; }
.u-aicenter { align-items: center; }
.u-astart { align-items: flex-start; }
.u-min0 { min-width: 0; }
.u-shrink0 { flex-shrink: 0; }
.u-grow { flex: 1; min-width: 0; }
.u-mla { margin-left: auto; }
.u-rel { position: relative; }
.u-block { display: block; }
.u-w100 { width: 100%; }
.u-w88 { width: 88px; }
.u-h10 { height: 10px; }

/* gaps */
.u-g0 { gap: 0; } .u-g2 { gap: 2px; } .u-g3 { gap: 3px; } .u-g4 { gap: 4px; }
.u-g5 { gap: 5px; } .u-g6 { gap: 6px; } .u-g7 { gap: 7px; } .u-g8 { gap: 8px; }
.u-g9 { gap: 9px; } .u-g10 { gap: 10px; } .u-g11 { gap: 11px; } .u-g12 { gap: 12px; }
.u-g14 { gap: 14px; } .u-g24 { gap: 24px; } .u-gcard { gap: var(--gap-card); }

/* spacing */
.u-m0 { margin: 0; } .u-m2top { margin: 2px 0 0; }
.u-mb0 { margin-bottom: 0; } .u-mb4 { margin-bottom: 4px; } .u-mb14 { margin-bottom: 14px; }
.u-mb-card { margin-bottom: var(--gap-card); }
.u-mt1 { margin-top: 1px; } .u-mt2 { margin-top: 2px; } .u-mt3 { margin-top: 3px; }
.u-mt6 { margin-top: 6px; } .u-mt8 { margin-top: 8px; } .u-mt10 { margin-top: 10px; }
.u-mtn4 { margin-top: -4px; }
.u-ir1 { margin-right: 1px; } .u-ir3 { margin-right: 3px; } .u-ir4 { margin-right: 4px; }
.u-ir5 { margin-right: 5px; } .u-ir6 { margin-right: 6px; } .u-ir7 { margin-right: 7px; }
.u-ir8 { margin-right: 8px; }
.u-il2 { margin-left: 2px; } .u-il6 { margin-left: 6px; } .u-il8 { margin-left: 8px; }
.u-pad6 { padding: 6px; } .u-pad16 { padding: 16px; }
.u-pad810 { padding: 8px 10px; } .u-pad-1016 { padding: 10px 16px; } .u-pad-1216 { padding: 12px 16px; }

/* rules */
.u-bb-soft { border-bottom: 1px solid var(--color-border-soft); }
.u-bt-soft { border-top: 1px solid var(--color-border-soft); }
.u-bt-strong { border-top: 2px solid var(--color-border); }

/* type */
.u-sans { font-family: var(--font-sans); }
.u-fs7 { font-size: 7.5px; } .u-fs10 { font-size: 10px; } .u-fs105 { font-size: 10.5px; }
.u-fs11 { font-size: 11px; } .u-fs115 { font-size: 11.5px; } .u-fs12 { font-size: 12px; }
.u-fs125 { font-size: 12.5px; } .u-fs13 { font-size: 13px; } .u-fs135 { font-size: 13.5px; }
.u-fs14 { font-size: 14px; } .u-fs15 { font-size: 15px; } .u-fs34 { font-size: 34px; }
.u-w4 { font-weight: 400; } .u-w5 { font-weight: 500; } .u-w6 { font-weight: 600; }
.u-w65 { font-weight: 650; } .u-w7 { font-weight: 700; } .u-w8 { font-weight: 800; }
.u-lh13 { line-height: 1.3; }
.u-tcenter { text-align: center; }
.col-right { text-align: right; }
/* col-right beats DataTables' auto type alignment, same as col-center */
table.table-x th.col-right,
table.table-x td.col-right { text-align: right !important; }

/* colour */
.u-c-text { color: var(--color-text); }
.u-c-muted { color: var(--color-text-muted); }
.u-c-subtle { color: var(--color-text-subtle); }
.u-c-heading { color: var(--color-text-heading); }
.u-c-red { color: var(--color-brand-red); }
.u-c-success { color: var(--color-success); }
.u-c-warn { color: var(--color-warning-text); }
.u-c-info { color: var(--color-info-text); }
.u-c-border { color: var(--color-border); }
.u-c-inherit { color: inherit; }
.u-bg-white { background: var(--color-white); }

/* text behaviour */
.u-nowrap { white-space: nowrap; }
.u-wrap { white-space: normal; }
.u-ovh { overflow: hidden; }
.u-ellip { overflow: hidden; text-overflow: ellipsis; }
.u-trunc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-nodeco { text-decoration: none; }
.u-plain { text-decoration: none; color: inherit; }
.u-underline { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-border); }
.u-nobreak { break-inside: avoid; }
.u-vmid { vertical-align: middle; }
.u-pointer { cursor: pointer; }
.u-off { opacity: 0.4; cursor: not-allowed; }

/* icon-chip sizes & tones (see the components block above) */
.icon-chip-15 { font-size: 15px; }
.icon-chip-sm { width: 28px; height: 28px; font-size: 15px; }
.icon-chip-md { width: 30px; height: 30px; font-size: 15px; }
.icon-chip-lg { width: 40px; height: 40px; border-radius: 10px; font-size: 19px; }
.icon-chip-xl { width: 46px; height: 46px; border-radius: 12px; font-size: 20px; }
.icon-chip-info { background: var(--color-info-soft); color: var(--color-info-text); }
.icon-chip-cyan { background: var(--color-cyan-soft); color: var(--color-cyan-text); }
.icon-chip-teal { background: var(--color-teal-soft); color: var(--color-teal-text); }
.icon-chip-neutral { background: var(--color-neutral-soft); color: var(--color-text-muted); }
.icon-chip-heading { background: var(--color-neutral-soft); color: var(--color-text-heading); }
.icon-chip-redhover { background: var(--color-brand-red-soft); color: var(--color-brand-red-hover); }

/* Stacked composition bar — segment shape is CSS, the flex ratio and tone stay
   inline because both are data (see the inline-style note above). */
.bar-seg { min-width: 4px; }
/* Single-value fill inside .bar-track-lg — width is the datum. */
.bar-fill { display: block; height: 8px; border-radius: 2px; }

/* extra utilities used by the second promotion pass */
.u-fdcol { flex-direction: column; }
.u-jend { justify-content: flex-end; }
.u-jstart { justify-content: flex-start; }
.u-aend { align-items: flex-end; }
.u-fs8 { font-size: 8px; }
.u-fs145 { font-size: 14.5px; }
.u-fs155 { font-size: 15.5px; }
.u-fs19 { font-size: 19px; }
.u-fs20 { font-size: 20px; }
.u-fs21 { font-size: 21px; }
.u-fs22 { font-size: 22px; }
.u-lh115 { line-height: 1.15; }
.u-lh125 { line-height: 1.25; }
.u-lh14 { line-height: 1.4; }
.u-lh155 { line-height: 1.55; }
.u-lh19 { line-height: 1.9; }
.u-mt7 { margin-top: 7px; }
.u-mt12 { margin-top: 12px; }
.u-mt14 { margin-top: 14px; }
.u-mt16 { margin-top: 16px; }
.u-mb5 { margin-bottom: 5px; }
.u-mb8 { margin-bottom: 8px; }
.u-mb12 { margin-bottom: 12px; }
.u-pt8 { padding-top: 8px; }
.u-pt12 { padding-top: 12px; }
.u-pad0 { padding: 0; }
.u-pad14 { padding: 14px; }
.u-pad-1316 { padding: 13px 16px; }
.u-pad-812 { padding: 8px 12px; }
.u-pad-1014 { padding: 10px 14px; }
.u-pad-1214 { padding: 12px 14px; }
.u-pad-3020 { padding: 30px 20px; }
.u-bt-dash { border-top: 1px dashed var(--color-border); }
.u-c-success-text { color: var(--color-success-text); }
.u-c-warning { color: var(--color-warning); }
.u-c-info-plain { color: var(--color-info); }
.u-c-cyan { color: var(--color-cyan); }
.u-c-teal { color: var(--color-teal); }
.u-scroll-x { overflow-x: auto; }
.u-prewrap { white-space: pre-wrap; }
.u-resize-v { resize: vertical; min-height: 48px; }
.u-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.u-noevt { pointer-events: none; }

/* second-pass promotions */
.sum-total-band { border-top: 2px solid var(--color-border); background: var(--color-bg); padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 0 0 calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px); }
.sum-input { text-align: right; padding-left: 26px; height: 32px; }
.sum-input-wide { padding-left: 38px; }
.eyebrow-tight { font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-subtle); }
.eyebrow-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.wordmark { font-size: 12px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-text-heading); }
.dot-success { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); }
.v-sep { width: 1px; height: 13px; background: var(--color-border); margin: 0 3px; }
.th-sub { background: var(--color-neutral-soft); box-shadow: inset 0 -1px 0 var(--color-border); }
.row-40 { min-height: 40px; padding: 0 16px; }
.insp-cell-76 { width: 76px; flex-shrink: 0; text-align: right; }
.u-bl-soft { border-left: 1px solid var(--color-border-soft); }
.u-pad-panel { padding: 14px 16px 16px 16px; }
.u-pad-814 { padding: 8px 14px; }
.u-pad-42 { padding: 4px 2px; }
.u-rowgap2 { row-gap: 2px; }
.u-astart-grid { align-items: start; }
.u-mt-card { margin-top: var(--gap-card); }
.u-mt0 { margin-top: 0; }
.u-mt4 { margin-top: 4px; }
.u-m2y { margin: 2px 0; }
.u-g5 { gap: 5px; }
.u-g13 { gap: 13px; }
.u-iblock { display: inline-block; }
.u-tleft { text-align: left; }
.u-fs16 { font-size: 16px; }
.u-measure { max-width: 80ch; }
.u-list-note { margin: 10px 0 0; padding-left: 18px; color: var(--color-text); line-height: 1.9; }
.bar-fill-h { height: 100%; }

/* The brand switch is not settings-only — the domestic order form uses it for
   the D-6 tax switch. Same geometry and brand-red engaged state. */
.brand-switch { position: relative; display: inline-flex; flex-shrink: 0; }
.brand-switch input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; z-index: 1;
}
.brand-switch .track {
  width: 40px; height: 22px; border-radius: 999px;
  background: var(--color-border-soft); border: 1px solid var(--color-border);
  position: relative; transition: background 0.16s ease, border-color 0.16s ease;
}
.brand-switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: white; box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease;
}
.brand-switch input:checked + .track { background: var(--color-brand-red); border-color: var(--color-brand-red); }
.brand-switch input:checked + .track::after { transform: translateX(18px); }
.brand-switch input:focus-visible + .track { box-shadow: 0 0 0 3px rgba(210, 21, 30, 0.18); }
/* A summary row whose field has been switched off (label + disabled input). */
.sum-off { opacity: 0.55; }

/* "Unordered receipt" line marker — a line added after Confirmed, i.e. goods
   that arrived without having been ordered. Amber, same family as the
   inspection-entry excess marker. */
.pill-unordered {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--color-warning-soft); color: var(--color-warning-text);
  border: 1px solid var(--color-warning-border, var(--color-warning));
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
}
.pill-unordered i { font-size: 10px; }

/* Alternate-state block inside a live card (states a condition, e.g.
   tax_enabled = 0) — dashed so it reads as a specification, not data. */
.alt-state { margin-top: 4px; padding: 9px 11px; border: 1px dashed var(--color-border); border-radius: 8px; background: var(--color-bg); }
/* Per-order-group condition note on the inspection report */
.grp-note { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; padding: 8px 11px; border-radius: 8px; background: var(--color-bg); border: 1px solid var(--color-border-soft); font-size: 12px; color: var(--color-text-muted); }
.grp-note i { font-size: 12px; color: var(--color-text-subtle); }
/* A tax-disabled domestic group's ledger has one value column, like intl */
.led.led-no-tax { grid-template-columns: 1fr 108px; }

/* --- layout utilities completed (v2 §C12 pass 3) --------------------------- */
.u-grid { display: grid; }
.u-iflex-raw { display: inline-flex; }
.u-abaseline { align-items: baseline; }
.u-astretch { align-items: stretch; }
.u-aend-grid { align-items: end; }
.u-selfcenter { align-self: center; }
.u-flex1 { flex: 1; }
.u-flex-search { flex: 1 1 320px; }
.u-scroll-y { overflow-y: auto; }
.u-g1 { gap: 1px; } .u-g16 { gap: 16px; } .u-g18 { gap: 18px; } .u-g20 { gap: 20px; } .u-g22 { gap: 22px; }
.u-g-1014 { gap: 10px 14px; } .u-g-1216 { gap: 12px 16px; }
.u-colgap14 { column-gap: 14px; }
/* Grid track sets used by page layouts. Named by shape, not by page, so a new
   screen can reuse them instead of going back to an inline grid. */
.u-gtc-2 { grid-template-columns: 1fr 1fr; }
.u-gtc-3 { grid-template-columns: repeat(3, 1fr); }
.u-gtc-4 { grid-template-columns: repeat(4, 1fr); }
.u-gtc-1a { grid-template-columns: 1fr auto; }
.u-gtc-full { grid-template-columns: minmax(0, 1fr); }
.u-gtc-110 { grid-template-columns: 110px 1fr; }
.u-gtc-151 { grid-template-columns: 1.5fr 1fr 1fr; }
.u-gtc-icon { grid-template-columns: 34px minmax(0, 1fr) auto; }
.u-gtc-auto230 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.u-gtc-auto250 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
/* Overlays */
.u-abs { position: absolute; }
.u-inset0 { position: absolute; inset: 0; }
.u-pin-bottom { position: absolute; left: 0; right: 0; bottom: 0; }
.u-logo-invert { filter: invert(1) grayscale(100%) opacity(0.7); }
.u-maxh280 { max-height: 280px; }