/* ============================================
   Restocked — Inventory Intelligence
   ============================================ */

:root {
  /* ── Design System Tokens ── */
  /* Foundation colors */
  --bg: #f5f4f0;
  --surface: #ffffff;
  --surface-alt: #fafaf8;
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --light: #8a8a8a;
  --border: #e8e6e1;
  --border-light: #f0eeea;
  --border-hover: #d4d2cd;

  /* Semantic colors */
  --accent: #EA580C;
  --red: #dc2626;
  --green: #16a34a;
  --amber: #d97706;
  --yellow: #ca8a04;
  --blue: #3b82f6;
  --purple: #7c3aed;
  --purple-light: #8b5cf6;
  --rose: #e11d48;
  --orange: #ea580c;
  --stone: #57534e;
  --kit: #0891b2;
  --kit-tint: #ecfeff;

  /* Status tints (background fills for badges/pills) */
  --red-tint: #fef2f2;
  --amber-tint: #fffbeb;
  --yellow-tint: #fef9c3;
  --blue-tint: #eff6ff;
  --green-tint: #dcfce7;
  --purple-tint: #f5f3ff;
  --stone-tint: #f5f5f4;

  /* Typography */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'JetBrains Mono', "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace;

  /* Radii */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 20px;

  /* Shadows (minimal — cards have none at rest) */
  --shadow: none;
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.12);
}

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

body {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

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

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--border-light);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Layout */
.container {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 24px;
}

body.wide-layout > main.container {
  max-width: 100%;
  padding: 0 24px;
}

main.container {
  padding-top: 4px;
  padding-bottom: 28px;
}

/* Navbar */
.navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  flex-shrink: 0;
  padding-right: 16px;
  margin-right: 8px;
  border-right: 1px solid var(--border);
  height: 20px;
}

.navbar-brand:hover { text-decoration: none; color: var(--ink); }

.navbar-logo {
  max-height: 28px;
  max-width: 140px;
  width: auto;
  display: block;
  object-fit: contain;
}

.navbar-company-switcher .form-control-sm {
  font-size: 13px;
  padding: 2px 6px;
  height: auto;
}

/* Desktop: show only the inline switcher inside navbar-links */
.navbar-company-switcher-mobile { display: none; }
.navbar-company-switcher-desktop {
  margin-left: 4px;
  display: flex;
  align-items: center;
}

.logo-preview { margin-bottom: 8px; }
.logo-preview-img { max-height: 60px; width: auto; }

.navbar-links { display: flex; gap: 2px; }

.nav-link {
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.nav-link:hover {
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
}

.nav-link.active {
  background: var(--bg);
  color: var(--ink);
}

.nav-link.active:hover { background: var(--bg); }

/* Nav Dropdowns */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
}

.nav-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid currentColor;
  margin-left: 2px;
  opacity: 0.5;
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-dropdown);
  padding: 6px;
  z-index: 200;
  margin-top: 4px;
}

.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

.nav-dropdown:hover .nav-dropdown-menu {
  display: block;
}

.nav-dropdown-item {
  display: block;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 6px;
  transition: all 0.15s ease;
}

.nav-dropdown-item:hover {
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
}

.nav-dropdown-item.active {
  color: var(--blue);
  font-weight: 600;
}

.nav-dropdown-item.active:hover {
  background: var(--bg);
}

/* Flash Messages */
.flash {
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: 16px;
  font-size: 12px;
  font-weight: 600;
}

.flash-notice {
  background: #f0fdf4;
  color: var(--green);
  border: 1px solid #bbf7d0;
}

.flash-alert {
  background: #fef2f2;
  color: var(--red);
  border: 1px solid #fecaca;
}

.flash-warning {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Page Header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 0 16px;
}

.page-header h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Page subtitle — a generic page-header sub-line. Canonical home (2026-06-14): it was only
   ever defined in two feature sheets (smart_allocation.css 14px + seasonality_studio.css 12px,
   the latter dead/overridden), yet rendered on 5 pages (forecast_accuracy / forecast_overrides /
   forecast_qa / seasonality_studio / smart_allocation). smart_allocation's 14px won the cascade
   everywhere, so 14px is the current de-facto look — kept here verbatim. Hoisted out of both
   feature sheets so moving smart_allocation.css per-page doesn't drop the other 4 pages to 12px. */
.page-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
}
.page-subtitle .dot { padding: 0 6px; color: var(--light); }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 14px;
}

.card h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
}

.card h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 { margin-bottom: 0; }

/* MSRP Summary */
.msrp-summary .msrp-values {
  display: flex;
  gap: 32px;
}

.msrp-item {
  display: flex;
  flex-direction: column;
}

.msrp-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.msrp-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}

/* Tables */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead th {
  padding: 10px 18px;
  text-align: left;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--light);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-light);
}

.data-table.sticky-header thead th {
  position: sticky;
  top: 49px;
  z-index: 10;
  background: var(--surface-alt);
  box-shadow: inset 0 -1px 0 var(--border-light);
}

/* CSV Receive help popup */
.csv-help-btn:hover { background: var(--surface-alt); }
.csv-help-popup {
  position: absolute; top: 100%; right: 0; margin-top: 6px; z-index: 50;
  background: #fff; border: 1px solid var(--border-light); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: 14px 16px; width: 280px;
  font-size: 12px; color: var(--dark); line-height: 1.5;
}
.csv-help-popup strong { font-size: 13px; display: block; margin-bottom: 6px; }
.csv-help-popup p { margin: 0 0 8px; color: var(--muted); }
.csv-help-popup ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.csv-help-popup ul li { margin-bottom: 3px; }
.csv-help-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: monospace; }
.csv-help-table th, .csv-help-table td { border: 1px solid var(--border-light); padding: 4px 8px; text-align: left; }
.csv-help-table th { background: var(--surface-alt); font-weight: 600; }

/* Shake animation for invalid input feedback */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.shake { animation: shake 0.35s ease-in-out; }

.po-line-items-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface-alt);
  box-shadow: inset 0 -1px 0 var(--border-light);
}

.data-table tbody td {
  padding: 9px 18px;
  border-bottom: 1px solid #f5f4f2;
  vertical-align: middle;
  font-size: 12px;
}

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

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

/* Cell utilities — shared by every .data-table consumer (replenishment, super_admin AI
   dashboards, forecast_accuracy, backorder, purchase_orders). Extracted from replenishment_v2.css
   when that file moved per-page (2026-06-14) so non-replenishment tables keep right-align /
   center / monospace cells. Additive to the base `.data-table tbody td` above — no selector
   overlap, higher specificity, layers on top. */
.data-table tbody td.num,
.data-table tbody td .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table tbody td.mono,
.data-table tbody td .mono {
  font-family: "JetBrains Mono", monospace;
}
.data-table tbody td.ctr {
  text-align: center;
}

/* ColumnProfile display-formatted native cells (ApplicationHelper#column_profile_cell_value):
   cmape tinted by SkuForecast::CUMULATIVE_MAPE_BANDS (same hex as the bands), yoy_90d red when
   negative. Global, not per-page — profile columns render on the replenishment, supply plan,
   and forecast_by_sku tables. */
.cpv-green { color: #16a34a; font-weight: 600; }
.cpv-amber { color: #d97706; font-weight: 600; }
.cpv-red   { color: #dc2626; font-weight: 600; }
.cpv-neg   { color: #dc2626; }

/* Suppressed suggested-order strikethrough — used on the SKU view (skus/_three_card_row,
   skus/_order_calculation, skus/qa_panel/_header_kpis). Extracted from replenishment_v2.css
   (2026-06-14) so the SKU view keeps the strikethrough without loading the replenishment sheet. */
.sugg-suppressed s {
  color: #92400e;
  text-decoration-thickness: 2px;
  text-decoration-color: #d97706;
}

/* Hover tooltip bubble — injected on <body> by the shared `hover_tooltip_controller.js`
   (`bubble.className = "hover-tooltip"`), used on replenishment AND forecast_accuracy (and any
   future page wiring the controller). Extracted from replenishment_v2.css (2026-06-14) when that
   file moved per-page so the shared controller's tooltips stay styled everywhere. */
.hover-tooltip {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: #fff;
  background: #1a1a1a;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  max-width: 280px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease-out;
}
.hover-tooltip.hover-tooltip--visible {
  opacity: 1;
}
.hover-tooltip > div + div {
  margin-top: 4px;
}

.sortable-header a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.sortable-header a:hover { color: var(--muted); }

.sortable-header.sorted a { color: var(--ink); }

.sort-arrow { font-size: 10px; }

.inactive-row { opacity: 0.5; }

.actions-col {
  width: 80px;
  text-align: center;
}

.empty-state {
  text-align: center;
  padding: 40px 16px;
  color: var(--muted);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  background: var(--border-light);
  color: var(--ink);
  margin: 2px 2px;
}

.badge-option {
  background: #eff6ff;
  color: var(--blue);
}

/* Status */
.status-active {
  color: var(--green);
  font-weight: 600;
  font-size: 12px;
}

.status-inactive {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
}

.status-warning {
  color: var(--amber);
  font-weight: 600;
  font-size: 12px;
}

.status-toggle {
  cursor: pointer;
  user-select: none;
  transition: opacity 0.15s ease;
}

.status-toggle:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.toggle-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-hover);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.text-muted { color: var(--muted); }

/* Filters */
.filters-card { margin-bottom: 14px; }

.filters-form {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 180px;
}

.filter-group label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.filter-actions {
  display: flex;
  gap: 8px;
}

/* Sort-by preset dropdown on a filter card. The option labels carry a
 * direction suffix ("high → low"), so the select needs more room than a
 * stock filter control but shouldn't stretch across the row. */
.filter-sort-select { max-width: 260px; }

/* Filter submit button — primary action on the filter card. Pre-2026-06 it
 * rendered as a faint outlined btn-secondary that was visually indistinguishable
 * from the Clear button. Promote it to the accent (orange) Primary CTA
 * treatment per design-system.md §5 — same shape the PO index uses
 * (`.po-v2 .btn-accent`). Color via `var(--accent)` not a hard-coded hex so
 * any theme swap propagates. */
.filter-actions .btn-secondary {
  background: var(--accent);
  color: var(--surface);
  border-color: var(--accent);
}

.filter-actions .btn-secondary:hover {
  opacity: 0.9;
}

/* Clear stays subordinate but gets a clearer hover so the affordance is
 * obvious next to the now-stronger Filter button. */
.filter-actions .btn-outline:hover {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--border-hover);
}

/* Forms */
.form { max-width: 640px; }

.form-group {
  margin-bottom: 14px;
  flex: 1;
}

.form-row {
  display: flex;
  gap: 14px;
}

.form-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 5px;
}

.form-control {
  display: block;
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  font-family: var(--font-sans);
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control::placeholder {
  color: var(--light);
}

/* Narrow numeric input for threshold-style settings fields (canonical
   replacement for the frozen inline max-width:120px pattern). */
.form-control--narrow {
  max-width: 120px;
}

/* Subsection divider + strong sub-heading label inside a settings fieldset
   (canonical replacements for the frozen inline hr/font-weight patterns). */
.form-divider {
  border: none;
  border-top: 1px solid var(--border-light, #e8e6e1);
  margin: 1rem 0;
}

.form-label--strong {
  font-weight: 600;
}

/* Medium/wide constraints for settings-style text fields and selects
   (canonical replacements for the frozen inline max-width:200px/400px). */
.form-control--medium {
  max-width: 200px;
}

.form-control--wide {
  max-width: 400px;
}

.form-control:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(26, 26, 26, 0.08);
}

.form-control:disabled {
  border-color: var(--border-light);
  background: var(--surface-alt);
  color: var(--light);
  cursor: not-allowed;
}

textarea.form-control { resize: vertical; }

select.form-control {
  appearance: auto;
}

.form-checkbox {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
  border-radius: 4px;
  accent-color: var(--ink);
}

.form-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin: 16px 0;
}

.form-fieldset legend {
  font-size: 13px;
  font-weight: 700;
  padding: 0 8px;
  color: var(--ink);
}

/* Permission-picker rows (user edit form) */
.permission-fieldset-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 0 0 12px;
}

.permission-row {
  margin-bottom: 8px;
}

.permission-label {
  font-weight: 400;
}

/* A permission bundled with the selected role: checked + locked (disabled). */
.permission-row--locked .permission-label {
  color: var(--muted);
}

.permission-locked-note {
  margin-left: 6px;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
}

/* Multi-select dropdown */
.ms-trigger {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  gap: 8px;
  min-height: 38px;
}

.ms-trigger:hover {
  border-color: var(--border-hover);
}

.ms-pills {
  flex: 1;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  overflow: hidden;
  align-items: center;
}

.ms-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.ms-pill-remove {
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}

.ms-pill-remove:hover {
  color: var(--ink);
}

.ms-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-dropdown);
  overflow: hidden;
}

.ms-search-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-light);
}

.ms-search {
  width: 100%;
  padding: 6px 8px 6px 28px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  font-size: 12px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}

.ms-search:focus {
  border-color: var(--ink);
}

.ms-actions {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  gap: 10px;
}

.ms-action-btn {
  font-size: 11px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.ms-action-btn-select { color: var(--blue); }
.ms-action-btn-clear { color: var(--muted); }

.ms-options {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
}

.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}

.ms-option:hover {
  background: var(--surface-alt);
}

.ms-option-selected {
  background: var(--bg);
}

.ms-option-selected:hover {
  background: var(--bg);
}

.ms-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid var(--border-hover);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-checkbox-checked {
  border: none;
  background: var(--ink);
  color: var(--surface);
}

.ms-hint {
  padding: 10px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

.form-actions {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.form-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  color: var(--red);
  font-size: 12px;
}

.form-errors h3 { color: var(--red); margin: 0 0 6px; font-size: 12px; font-weight: 700; }
.form-errors ul { margin: 0; padding-left: 20px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  line-height: 1.5;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--accent);
  color: var(--surface);
  border-color: var(--accent);
}

.btn-primary:hover {
  opacity: 0.85;
}

.btn-secondary {
  background: var(--surface);
  color: #555;
  border-color: var(--border-hover);
}

.btn-secondary:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.btn-outline {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border);
}

.btn-outline:hover {
  background: var(--bg);
  color: #555;
}

.btn-danger {
  background: var(--surface);
  color: var(--red);
  border-color: var(--border-hover);
}

.btn-danger:hover {
  background: var(--red);
  color: var(--surface);
  border-color: var(--red);
}

.btn-sm {
  padding: 4px 12px;
  font-size: 12px;
}

/* Navbar SKU Quick Search */
.navbar-sku-search {
  position: relative;
  margin-right: 8px;
}
.qs-input {
  width: 130px;
  padding: 4px 8px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: width 0.2s, border-color 0.2s;
}
.qs-input::placeholder { color: var(--light); }
.qs-input:focus {
  width: 200px;
  border-color: var(--accent);
}
.qs-results {
  position: absolute;
  top: 100%;
  right: 0;
  width: 540px;
  max-width: calc(100vw - 32px);
  max-height: 480px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(0,0,0,0.12);
  z-index: 1000;
  margin-top: 4px;
}
.qs-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 12px;
  border-bottom: 1px solid var(--border-light, #f0f0f0);
}
.qs-item:hover { background: var(--bg); }
.qs-item:last-child { border-bottom: none; }
.qs-sku {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--accent);
}
.qs-product {
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qs-empty {
  padding: 10px;
  text-align: center;
  color: var(--light);
  font-size: 12px;
}
.qs-item { padding: 10px 14px; }
.qs-item.is-focused { background: var(--bg); }
.qs-item > .qs-product { flex: 1 1 auto; }
.qs-section {
  padding: 6px 10px 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--light);
}
.qs-variant {
  font-size: 10px;
  color: var(--muted);
  padding: 2px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  white-space: nowrap;
}
.qs-stock {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  white-space: nowrap;
  margin-left: auto;
}
.qs-stock--ok  { background: rgba(22,163,74,0.1);  color: var(--green); }
.qs-stock--oos { background: rgba(220,38,38,0.1); color: var(--red); }
.qs-product-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.qs-product-row .qs-product {
  grid-column: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: normal;
  line-height: 1.25;
}
.qs-product-row .qs-sub {
  grid-column: 1;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.qs-product-row .qs-arrow {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--muted);
  display: flex;
  align-items: center;
}
.qs-product-row:hover .qs-arrow { color: var(--accent, #e54d2e); }
.qs-back {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 8px 10px; border: none; background: var(--surface-alt);
  font: inherit; text-align: left; cursor: pointer; color: var(--muted);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.qs-back:hover { color: var(--ink); }
.qs-back .qs-crumb {
  color: var(--ink); font-weight: 600; margin-left: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Navbar User */
.navbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.navbar-user-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.navbar-company-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  padding-right: 10px;
  border-right: 1px solid var(--border);
}

.navbar-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Role Badges */
.badge-role-admin {
  background: #fef2f2;
  color: var(--red);
  font-size: 9px;
}

.badge-role-editor {
  background: #eff6ff;
  color: var(--blue);
  font-size: 9px;
}

.badge-role-viewer {
  background: #f0fdf4;
  color: var(--green);
  font-size: 9px;
}

.badge-discontinued {
  font-size: 9px;
  padding: 2px 8px;
  background: #fef2f2;
  color: var(--red);
  vertical-align: middle;
}

.badge-not-tracked {
  font-size: 9px;
  padding: 2px 8px;
  background: #fffbeb;
  color: var(--amber);
  vertical-align: middle;
}

/* Phase-out row badge (spec/PLAN_sku_phase_out_flag.md §9) — amber, matching the
   SKU-view banner tone. Selling down, no reorders recommended. */
.badge-phaseout {
  font-size: 9px;
  padding: 2px 8px;
  background: #fef3c7;
  color: var(--amber);
  vertical-align: middle;
}

/* Supersession row badges — amber (retiring predecessor) / blue (successor),
   matching the SKU-view banner + inherited-forecast notice tones. */
.badge-superseded {
  font-size: 9px;
  padding: 2px 8px;
  background: #fff7ed;
  color: #b45309;
  vertical-align: middle;
  text-decoration: none;
}
.badge-successor {
  font-size: 9px;
  padding: 2px 8px;
  background: #eff6ff;
  color: #1d4ed8;
  vertical-align: middle;
  text-decoration: none;
}

/* Auth Pages */
.auth-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 120px);
  padding: 40px 24px;
}

.auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  width: 100%;
  max-width: 400px;
}

.auth-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin: 0 0 4px;
}

.auth-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-align: center;
  margin: 0 0 28px;
}

.auth-form .form-actions {
  border-top: none;
  padding-top: 8px;
}

.btn-full {
  width: 100%;
}

.form-check {
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-check-label {
  font-size: 13px;
  color: var(--ink);
}

/* Import Page */
.import-running-banner {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.import-running-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.import-running-content > form:last-child {
  margin-left: auto;
}

.import-live-counts {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}

.import-description {
  margin: 0 0 16px;
  font-size: 14px;
}

.import-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.import-action-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.import-action-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
}

.import-action-card p {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}

.import-action-card > form:last-child,
.import-action-card > .btn:last-child {
  margin-top: auto;
}

.import-last-run {
  font-size: 12px !important;
  color: var(--light) !important;
}

.import-action-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.import-full-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.import-full-toggle .form-check-input {
  margin: 0;
}

.import-days-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.import-days-field label {
  margin: 0;
  white-space: nowrap;
}

.tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--border);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
}

.record-count-line {
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
}

.import-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.import-status-completed { color: var(--green); }
.import-status-completed-with-failures { color: var(--amber); }
.import-status-failed { color: var(--red); }
.import-status-running { color: var(--blue); }
.import-status-pending { color: var(--muted); }
.import-status-cancelled { color: var(--amber); }

.import-error-row {
  background: #fef2f2;
  font-size: 12px;
  padding: 8px 16px !important;
}

/* Diagnostic (non-error) job log row: forecast/supply-projection timing
   summaries are stored in error_log; a clean run must not read as a failure. */
.import-log-row {
  background: var(--surface-alt);
  font-size: 12px;
  padding: 8px 16px !important;
}

.import-error-detail {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--radius-sm);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--red);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 500px;
  overflow-y: auto;
}

.text-danger { color: var(--red); }
.text-success { color: var(--green); }
.text-warning { color: #d97706; }
.text-right { text-align: right; }

/* Delta color utilities emitted by the shared `delta_class` helper (sd- prefix,
   originally page-scoped to the Sales Dashboard). Global so every surface that
   renders a signed change — Sales Dashboard, Sales Aggregate — colors it. */
.sd-delta-positive { color: var(--green); }
.sd-delta-negative { color: var(--red); }
.sd-delta-neutral { color: var(--muted); }

/* Monospace + tabular-figures utility. Global (used on dashboard, SKU/product,
   replenishment, POs, etc.); hoisted here from backorder_analysis.css when that
   feature stylesheet moved to per-page loading (app/page_stylesheets/). */
.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: 'tnum' 1;
}

.alert-warning {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: 14px;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Replenishment */
.text-center { text-align: center; }

.tooltip-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--light);
  background: var(--border-light);
  border: 1px solid var(--border-hover);
  border-radius: 50%;
  margin-left: 4px;
  cursor: help;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}

.replenishment-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.replenishment-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s ease;
}

.replenishment-tab:hover {
  color: var(--ink);
  text-decoration: none;
}

.replenishment-tab.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}

.product-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  margin-top: 14px;
  overflow: hidden;
}

.product-group-first {
  margin-top: 0;
}

.product-group .data-table thead th {
  background: var(--surface-alt);
  color: var(--light);
  border-bottom: 1px solid var(--border-light);
}

.product-group .data-table tbody td {
  border-bottom: 1px solid #f5f4f2;
}

.product-group .data-table tbody tr:nth-child(even) {
  background: transparent;
}

.product-group .data-table tbody tr:nth-child(even):hover {
  background: var(--border-light);
}

.product-group-header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-light);
}

.product-group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.product-group-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.product-group-meta {
  font-size: 12px;
  color: var(--light);
}

.product-group-sku-count {
  font-size: 13px;
}

/* Replenishment column emphasis */
.metric-primary {
  font-weight: 600;
  color: var(--ink);
}

.metric-alert {
  color: var(--red);
  font-weight: 600;
}

.metric-muted {
  color: var(--light);
}

.sku-link {
  color: var(--muted);
  text-decoration: none;
}

.sku-link:hover {
  color: var(--blue);
  text-decoration: none;
}

/* Inherits the row text color with a dotted underline — for linking a record's
   display name (e.g. product name) to its detail page without shouting blue. */
.record-link {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.record-link:hover {
  color: var(--blue);
}

/* Subtle secondary line under a table cell's primary name — e.g. a SKU's
   variant description ("Pink / Large") beneath the product name. */
.cell-variant-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.3;
}

.badge-season {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* Pagination */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  margin-top: 14px;
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
}

.pagination-info {
  color: var(--muted);
}

.pagination-info strong {
  color: var(--ink);
}

.pagination-pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}

.pagination-nav:hover {
  background: var(--bg);
  text-decoration: none;
}

.pagination-nav.disabled {
  color: var(--border-hover);
  cursor: default;
  pointer-events: none;
}

.pagination-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}

.pagination-page:hover {
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
}

.pagination-page.active {
  background: var(--ink);
  color: var(--surface);
  pointer-events: none;
}

.pagination-gap {
  padding: 0 4px;
  color: var(--light);
}

.pagination-per-page {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pagination-per-page-label {
  color: var(--muted);
  font-size: 12px;
}

.pagination-per-page-options {
  display: flex;
  gap: 3px;
}

.pagination-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  text-decoration: none;
  background: var(--border-light);
  color: var(--muted);
  transition: all 0.15s;
}

.pagination-pill:hover {
  background: var(--border-hover);
  color: var(--ink);
  text-decoration: none;
}

.pagination-pill.active {
  background: var(--ink);
  color: var(--surface);
  pointer-events: none;
}

/* Inline Edit */
.editable-text {
  cursor: pointer;
  border-bottom: 1px dashed var(--border-hover);
  padding-bottom: 1px;
}

.editable-text:hover {
  border-bottom-color: var(--ink);
  color: var(--ink);
}

.form-control-inline {
  font-size: 13px;
  padding: 2px 6px;
  width: 100%;
  max-width: 200px;
}

.form-control-inline-textarea {
  max-width: 280px;
  resize: vertical;
  line-height: 1.4;
}

/* Block form hint with top margin — class replacement for the inline
   `style="display: block; margin-top: 6px;"` used by settings form hints
   (no-inline-styles policy; existing inline copies are frozen tech debt). */
.form-hint-block {
  display: block;
  margin-top: 6px;
}

.field-edit-error {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 100;
  margin-top: 4px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  background: #dc3545;
  border-radius: 4px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  animation: fieldEditErrorIn 0.15s ease-out;
}

.field-edit-error::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 12px;
  border: 5px solid transparent;
  border-bottom-color: #dc3545;
}

@keyframes fieldEditErrorIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mf-status {
  font-size: 11px;
  margin-left: 6px;
  font-weight: 500;
}
.mf-status-saving { color: #6b7280; }
.mf-status-saved { color: #16a34a; }
.mf-status-synced { color: #16a34a; }
.mf-status-sync-error { color: #d97706; }
.mf-status-error { color: #dc2626; }

/* Sales Dashboard */
.date-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.date-presets-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-right: 4px;
}

.sales-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.sales-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.sales-summary-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 4px;
}

.sales-summary-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.sales-summary-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.sales-summary-refund .sales-summary-value {
  color: var(--red);
}

.sales-summary-net .sales-summary-value {
  color: var(--green);
}

.sales-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.totals-row {
  background: var(--bg);
  border-top: 2px solid var(--border);
}

.totals-row td {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

/* Trend Chart */
.trend-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 220px;
  padding-top: 20px;
}

.trend-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.trend-bar-container {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.trend-bar {
  width: 70%;
  max-width: 48px;
  background: var(--blue);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  min-height: 2px;
  transition: height 0.3s ease;
  cursor: default;
}

.trend-bar:hover {
  background: #1d4ed8;
}

.trend-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 6px;
  white-space: nowrap;
}

.trend-value {
  font-size: 10px;
  color: var(--light);
  white-space: nowrap;
}

/* Hamburger Button */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
}

.hamburger:hover {
  background: var(--border-light);
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
  transition: all 0.2s ease;
}

/* Navbar collapse wrapper — visible by default on desktop */
.navbar-collapse {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: space-between;
  margin-left: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .container { padding: 0 12px; }
  .card { padding: 20px 12px; }
  .page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
  .page-header h1 { font-size: 18px; }
  .page-header-actions { flex-wrap: wrap; }
  .filters-form { flex-direction: column; }
  .filter-group { min-width: 100%; }
  .form-row { flex-direction: column; gap: 0; }
  .msrp-summary .msrp-values { flex-direction: column; gap: 12px; }
  .sales-summary-grid { grid-template-columns: repeat(2, 1fr); }
  .sales-two-col { grid-template-columns: 1fr; }
  .data-table thead th { padding: 8px 10px; font-size: 8px; }
  .data-table tbody td { padding: 8px 10px; font-size: 11px; }
  .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .data-table { min-width: 700px; }

  /* Navbar mobile layout — reorder: hamburger (left), company switcher (center), logo (right) */
  .navbar-content {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 16px;
  }

  .hamburger {
    display: flex;
    order: 1;
  }

  .navbar-company-switcher-mobile {
    display: block;
    order: 2;
    margin-left: 0;
    margin-right: auto;
  }

  .navbar-company-switcher-desktop {
    display: none !important;
  }

  .navbar-brand {
    order: 3;
    margin-left: auto;
  }

  .navbar-collapse {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-left: 0;
    padding-top: 4px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
    gap: 0;
    order: 4;
    flex: none;
  }

  .navbar-collapse.mobile-menu-open {
    display: flex;
  }

  .navbar-links {
    flex-direction: column;
    gap: 0;
  }

  /* On mobile, dropdowns expand inline instead of floating */
  .nav-dropdown {
    position: static;
  }

  .nav-dropdown-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 6px 12px;
    border-radius: 0;
    font-size: 13px;
  }

  .nav-dropdown-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    margin-top: 0;
    padding: 0 0 2px 0;
    background: var(--bg);
  }

  .nav-dropdown-menu::before {
    display: none;
  }

  .nav-dropdown:hover .nav-dropdown-menu {
    display: none;
  }

  .nav-dropdown.mobile-dropdown-open .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-item {
    padding: 6px 24px;
    font-size: 13px;
  }

  .navbar-sku-search { display: none; }

  .navbar-user {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    margin-top: 2px;
  }

  .navbar-user .btn {
    margin-left: auto;
    font-size: 11px;
    padding: 2px 10px;
  }

  .navbar-company-name {
    border-right: 1px solid var(--border);
    padding-right: 6px;
    font-size: 11px;
  }

  .navbar-user-name {
    display: none;
  }

  .navbar-avatar {
    order: -1;
  }

  .navbar-user .badge {
    font-size: 10px;
    padding: 1px 5px;
  }
}

/* ============================================
   Purchase Order Styles
   ============================================ */

/* PO Status Badges */
.badge-po-gray { background: var(--border-light); color: var(--ink); }
.badge-po-yellow { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.badge-po-blue { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.badge-po-purple { background: #ede9fe; color: #5b21b6; border: 1px solid #c4b5fd; }
.badge-po-orange { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.badge-po-green { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.badge-po-red { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* Override-drift badge (Active Overrides page). Text/state machine in
   app/helpers/override_drift_helper.rb; colors live here. */
.override-drift-badge { font-weight: 500; }
.override-drift-badge--over_forecasting {
  color: var(--red); background: var(--red-tint);
  padding: 1px 6px; border-radius: 4px;
}
.override-drift-badge--under_forecasting {
  color: var(--amber); background: var(--amber-tint);
  padding: 1px 6px; border-radius: 4px;
}
.override-drift-badge--within_band { color: var(--muted); }
.override-drift-badge--low_volume,
.override-drift-badge--not_captured { color: var(--light); }

/* ── Help Panels ── */
.help-panel {
  padding: 12px 16px;
  background: var(--surface-alt, #fafaf8);
  border: 1px solid var(--border, #e8e6e1);
  border-radius: 8px;
  font-size: 0.85em;
  line-height: 1.6;
}
.help-panel-purple {
  background: #f5f3ff;
  border-color: #c4b5fd;
}
.help-panel-toggle {
  display: none;
  margin-top: 8px;
}
.help-code-block {
  background: #1a1a1a;
  color: #e5e5e5;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 4px 0 8px;
  font-size: 11px;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
}
.help-hint {
  color: var(--muted, #8a8a8a);
  font-size: 11px;
}

/* PO Tabs */
.po-tabs { margin-top: 16px; }

.po-tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.po-tab-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: all 0.15s ease;
}

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

.po-tab-btn.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}

.po-tab-panel {
  display: none;
  padding-top: 16px;
}

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

/* Activity Timeline */
.activity-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.activity-entry {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-light);
}

.activity-entry:last-child { border-bottom: none; }

.activity-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.activity-action {
  color: var(--ink);
  font-size: 12px;
}

.activity-changes {
  margin-top: 6px;
  padding: 8px 12px;
  background: var(--surface-alt);
  border-radius: 6px;
  font-size: 12px;
}

.activity-change-item {
  margin-bottom: 4px;
}

.activity-change-item:last-child { margin-bottom: 0; }

.activity-field {
  font-weight: 600;
  color: var(--ink);
  margin-right: 4px;
}

/* Product History */
.product-history {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.history-item {
  display: flex;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--muted);
}

.history-item:last-child { border-bottom: none; }

.history-label {
  width: 160px;
  flex-shrink: 0;
  font-weight: 700;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.history-value {
  color: var(--ink);
}

/* AI Group Analysis */
.btn-ai-analyze {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #7c3aed;
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  margin-left: auto;
}

.btn-ai-analyze:hover {
  background: #ede9fe;
  border-color: #c4b5fd;
}

.btn-ai-analyze:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ai-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #ddd6fe;
  border-top-color: #7c3aed;
  border-radius: 50%;
  animation: ai-spin 0.6s linear infinite;
}

@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

/* .ai-indicator, .ai-lightbox-*, .btn-ai-debug rules were removed when the
   legacy app/views/shared/_ai_indicator.html.erb partial + its controller
   methods (group-sku-analysis#showReason / #showRawResponse) were deleted
   in the AI Verdict Pill refactor (2026-05-21). The new pill lives at
   .ai-cell in replenishment_v2.css; the modal lives at .ai-modal /
   .ai-verdict-modal. */

/* ==========================================================================
   DETAIL PAGE COMPONENTS (reusable across product view, future detail pages)
   ========================================================================== */

/* --- Layout (product view specific) --- */
.pv-page { padding: 24px 20px; max-width: 100%; overflow-x: hidden; }
.pv-grid { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.pv-sidebar { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pv-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.pv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
  min-width: 0;
}
.pv-header > * { min-width: 0; }

.pv-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pv-title { font-size: 22px; font-weight: 700; margin: 0; overflow-wrap: break-word; word-break: break-word; }

.pv-subtitle {
  font-size: 13px;
  color: #8a8a8a;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pv-product-types { font-size: 12px; color: #8a8a8a; margin-top: 4px; }
.pv-dot { color: #d4d2cd; }

.pv-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* --- Badges (reusable) --- */
.detail-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}
.detail-badge-active { background: #dcfce7; color: #15803d; }
.detail-badge-draft { background: #fef3c7; color: #92400e; }
.detail-badge-archived { background: #f3f4f6; color: #6b7280; }
.detail-badge-season { background: #f3f4f6; color: #6b7280; font-weight: 600; font-size: 12px; padding: 2px 8px; border-radius: 4px; }

.detail-badge-warning {
  background: #fef3c7;
  color: #92400e;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
}

/* --- Buttons (reusable) --- */
.detail-btn-ai {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: #fff;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(109,40,217,0.3);
  transition: opacity 0.15s;
}
.detail-btn-ai:hover { opacity: 0.9; }
.detail-btn-ai:disabled { opacity: 0.6; cursor: not-allowed; }

.detail-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid #d4d2cd;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: #555;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.15s;
}
.detail-btn-outline:hover { background: #f5f4f0; }

.detail-btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px 0;
  background: #e54d2e;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  margin-top: 14px;
  transition: opacity 0.15s;
}
.detail-btn-cta:hover { opacity: 0.9; color: #fff; }

/* --- Cards (reusable) --- */
.detail-card {
  background: #fff;
  border: 1px solid #e8e6e1;
  border-radius: 12px;
  padding: 18px 20px;
  min-width: 0;
  overflow-wrap: break-word;
}

.detail-card-hero {
  background: linear-gradient(135deg, #fff5f3 0%, #fff 100%);
  border: 2px solid #e54d2e;
  border-radius: 14px;
  padding: 22px 20px;
  min-width: 0;
  overflow-wrap: break-word;
}

.detail-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.detail-card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8a8a8a;
  margin-bottom: 6px;
}

.detail-card-label-sm {
  font-size: 10px;
  color: #8a8a8a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-card-value { font-size: 28px; font-weight: 700; line-height: 1.1; }
.detail-card-value-md { font-size: 18px; font-weight: 700; }
.detail-card-sub { font-size: 12px; color: #8a8a8a; margin-top: 2px; }

.detail-card-hero-value {
  font-size: 36px;
  font-weight: 700;
  color: #e54d2e;
  line-height: 1.1;
}
.detail-card-hero-unit { font-size: 16px; font-weight: 500; color: #c4402a; }

.detail-card-divider {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #f0eeea;
}

/* --- Health Bar & Legend (reusable) --- */
.detail-health-bar {
  height: 8px;
  display: flex;
  gap: 1.5px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}
.detail-health-bar span { display: block; border-radius: 1px; }

.detail-health-legend { display: flex; flex-direction: column; gap: 4px; }

.detail-health-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.detail-health-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block;
}

.detail-health-label { flex: 1; color: #555; }
.detail-health-count { font-weight: 600; min-width: 20px; text-align: right; }
.detail-health-pct { color: #8a8a8a; min-width: 30px; text-align: right; }

/* --- Excess Inventory Section (reusable) --- */
.detail-excess-section {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #ede9fe;
  border-radius: 8px;
  background: #faf5ff;
}

/* --- Metadata Rows (reusable) --- */
.detail-meta-rows { display: flex; flex-direction: column; }

.detail-meta-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px solid #f8f7f5;
  gap: 8px;
}
.detail-meta-row:last-child { border-bottom: none; }
.detail-meta-row span:first-child { color: #8a8a8a; flex-shrink: 0; }
.detail-meta-row span:last-child { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.detail-mono { font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; }

/* --- Toggle Buttons (reusable) --- */
.detail-toggle-btn {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  background: #f0eeea;
  color: #8a8a8a;
  transition: all 0.15s;
}
.detail-toggle-btn.active { background: #1a1a1a; color: #fff; }
.detail-toggle-btn:hover:not(.active) { background: #e5e3df; }

/* Year-button lazy fetch in flight (loadYearAndRender sets aria-busy) —
   pulse + progress cursor so a slow chart_year.json fetch is visibly "working".
   No pointer-events lock: in-flight fetches dedup per year, and blocking clicks
   would also block switching to a DIFFERENT range while a fetch runs. */
.detail-toggle-btn[aria-busy="true"] {
  cursor: progress;
  animation: chart-btn-busy-pulse 0.9s ease-in-out infinite;
}
@keyframes chart-btn-busy-pulse {
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-toggle-btn[aria-busy="true"] { animation: none; opacity: 0.6; }
}

/* Channel toggle pills */
.detail-toggle-btn--channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 11px;
}
.detail-toggle-btn--channel.active {
  background: var(--channel-color, #1a1a1a);
  border-color: var(--channel-color, #1a1a1a);
  color: #fff;
}
.detail-toggle-btn--channel:hover:not(.active) { background: #e5e3df; }
.channel-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: var(--channel-color);
}
.detail-toggle-btn--channel.active .channel-swatch { background: #fff !important; }

/* ============================================================
   Product view (show page) — classes extracted from former
   inline styles (2026-09, NO-INLINE-STYLES cleanup). Data-driven
   values (sparkline bar geometry/color, health-bar flex, channel
   --channel-color) are applied by the `dyn-style` Stimulus
   controller from data-dyn-* attributes.
   ============================================================ */
/* small shared utilities */
.pv-strong { font-weight: 700; }
.pv-fw-600 { font-weight: 600; }
.pv-ml-auto { margin-left: auto; }
.pv-mt-14 { margin-top: 14px; }
.pv-m-0 { margin: 0; }
.pv-fs-9 { font-size: 9px; }
.pv-fs-11 { font-size: 11px; }
.pv-fs-13 { font-size: 13px; }
.pv-h-14 { font-size: 14px; font-weight: 700; }
.pv-scroll-x { overflow-x: auto; }
.pv-border-top { border-top: 1px solid var(--border); }
.pv-flex-4 { display: flex; align-items: center; gap: 4px; }
.pv-flex-6 { display: flex; align-items: center; gap: 6px; }
.pv-flex-gap-4 { display: flex; gap: 4px; }
.pv-flex-baseline-6 { display: flex; align-items: baseline; gap: 6px; }
.pv-row-between { display: flex; justify-content: space-between; align-items: center; }
.pv-row-between-mt { display: flex; justify-content: space-between; margin-top: 6px; }
.pv-row-between-12 { display: flex; justify-content: space-between; font-size: 12px; }
.pv-note-sm { font-size: 12px; color: var(--muted); padding: 8px 0; }
.pv-mini-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.detail-card--compact { padding: 14px 16px; }
.detail-card--flush { padding: 0; overflow: hidden; }

/* AI panel header */
.pv-ai-title-row { display: flex; align-items: center; gap: 10px; }
.pv-ai-title { font-size: 14px; font-weight: 700; }
.pv-ai-subtitle { font-size: 11px; color: var(--muted); }

/* Header / pricing */
.pv-title-editable { cursor: pointer; }
.pv-badge-sm { font-size: 11px; padding: 2px 8px; }
.pv-price-sale { color: var(--red); font-weight: 700; }
.pv-badge-discount { background: #fef2f2; color: var(--red); font-size: 10px; }
.pv-price-strike { text-decoration: line-through; color: var(--muted); }
.pv-moq-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }

/* Bundle card */
.pv-bundle-card { border: 2px solid #ddd6fe; background: #f5f3ff; }
.pv-bundle-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pv-bundle-name { font-size: 28px; font-weight: 800; color: #6d28d9; letter-spacing: -0.5px; }
.pv-bundle-desc { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Variant health / inventory / demand cards */
.pv-vh-count { font-size: 12px; color: var(--muted); font-weight: 600; }
.pv-excess-label { color: var(--purple); display: flex; align-items: center; gap: 4px; }
.pv-unit-label { font-size: 10px; color: var(--muted); }
.pv-excess-note { font-size: 11px; color: var(--muted); margin-top: 4px; }
.pv-unit-inline { font-size: 13px; color: var(--muted); }
.pv-vspy { font-size: 12px; margin-top: 4px; display: flex; align-items: center; gap: 4px; font-weight: 600; }
.pv-vspy.is-up { color: var(--green); }
.pv-vspy.is-down { color: var(--red); }
.pv-vspy-sub { font-weight: 400; color: var(--muted); }

/* Seasonality card */
.pv-season-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pv-season-sub { font-size: 10px; color: var(--muted); margin-bottom: 6px; }
.pv-season-badge { margin-left: auto; font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
.pv-season-badge--trough { background: #3b82f618; color: #3b82f6; }
.pv-season-badge--peak { background: #ea580c18; color: #ea580c; }
.pv-season-badge--rising { background: #d9770618; color: #d97706; }
.pv-season-badge--declining { background: #7c3aed18; color: #7c3aed; }
.pv-season-badge--flat { background: #16a34a18; color: #16a34a; }
.pv-season-msg { margin-top: 8px; font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.pv-season-msg--trough { color: #3b82f6; }
.pv-season-msg--peak { color: #ea580c; }
.pv-season-msg--rising { color: #d97706; }
.pv-season-msg--declining { color: #7c3aed; }
.pv-season-msg--flat { color: #16a34a; }
.pv-season-msg-muted { margin-top: 8px; font-size: 11px; color: var(--muted); }
.skd-spark-bar { flex: 1; border-radius: 2px 2px 0 0; }
.skd-spark-bar--min { min-height: 4px; }

/* Chart card */
.pv-chart-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.pv-chart-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pv-channel-lbl { font-size: 11px; color: #8a8a8a; }
.pv-chart-canvas-wrap { position: relative; height: 325px; }

/* SKU breakdown table */
.pv-w-200 { width: 200px; }
.pv-w-96 { width: 96px; }
.pv-w-78 { width: 78px; }
.pv-w-68 { width: 68px; }
.pv-w-60 { width: 60px; }
.pv-w-52 { width: 52px; }
.pv-w-36 { width: 36px; }
.pv-w-32 { width: 32px; }
.pv-w-120 { width: 120px; }
.detail-sku-table tr.is-inactive { opacity: 0.5; }
.pv-sku-cell { font-size: 11px; color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-variant-cell { color: var(--muted); font-weight: 500; }
.pv-abc-cell { text-align: center; font-weight: 700; font-size: 11px; }
.pv-cell-oos { color: var(--red); font-weight: 600; }
.pv-cell-onorder { color: var(--blue); }
.pv-cell-high { color: var(--amber); font-weight: 700; }
.pv-cell-sugg { color: var(--accent); font-weight: 700; }
.pv-sku-tfoot { background: var(--surface-alt, #fafaf8); font-weight: 700; font-size: 12px; }
.pv-tfoot-cell { padding: 9px 18px; }
.pv-empty-lg { padding: 24px; text-align: center; color: var(--muted); font-size: 13px; }

/* DC allocation / geographic shift */
.pv-dc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pv-geo-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-light); }
.pv-geo-head { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.pv-popover-anchor { position: relative; cursor: pointer; }
.pv-geo-popover { display: none; position: absolute; bottom: 100%; left: 0; width: 300px; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); font-size: 12px; line-height: 1.5; color: var(--text); z-index: 100; margin-bottom: 6px; text-transform: none; font-weight: 400; letter-spacing: normal; }
.pv-popover-title { font-weight: 600; margin-bottom: 6px; }
.pv-popover-p { margin: 0 0 8px; }
.pv-geo-row { font-size: 12px; margin-bottom: 4px; }
.pv-geo-delta { font-weight: 600; margin-left: 4px; }
.pv-geo-delta.is-red { color: var(--red); }
.pv-geo-delta.is-amber { color: var(--amber); }

/* --- Chart (reusable) --- */
.detail-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 12px;
}

.detail-chart-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 8px;
  font-size: 10px;
  color: #8a8a8a;
}

.pv-legend-item { display: inline-flex; align-items: center; gap: 4px; }

.pv-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.pv-legend-line {
  height: 3px !important;
  border-radius: 1px;
}

.pv-legend-dashed {
  width: 10px;
  height: 0;
  border-top: 2px dashed;
  background: none !important;
}

/* --- SKU Table (reusable) --- */
.detail-sku-table {
  border-collapse: collapse;
  font-size: 13px;
}

.detail-sku-table { width: 100%; }

.detail-sku-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #aaa;
  padding: 10px 10px;
  border-bottom: 1px solid #f0eeea;
  /* Multi-word headers ("Days On Hand", "Demand 365d", "Sug. Order") wrap to
     their column width hint instead of forcing the whole table wider than its
     container and clipping the trailing action column behind a scrollbar. */
  white-space: normal;
  vertical-align: bottom;
}

.detail-sku-table td {
  padding: 10px 10px;
  border-bottom: 1px solid #f8f7f5;
}

.detail-sku-table tbody tr:hover { background: #fafaf8; }

.detail-status-badge {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.health-healthy { color: #16a34a; }
.health-low_stock { color: #d97706; }
.health-oos { color: #dc2626; }
.health-overstocked { color: #7c3aed; }
.health-dead_stock { color: #57534e; }
.health-bg-healthy { background: #16a34a; }
.health-bg-low_stock { background: #d97706; }
.health-bg-oos { background: #dc2626; }
.health-bg-overstocked { background: #7c3aed; }
.health-bg-dead_stock { background: #57534e; }
.health-approaching_season { color: #d97706; }
.health-bg-approaching_season { background: #d97706; }
.health-off_season { color: #7c3aed; }
.health-bg-off_season { background: #7c3aed; }
/* Phase-out (spec/PLAN_sku_phase_out_flag.md §9) — amber-800, matching the
   .badge-phaseout row badge and the SKU-view banner. Deliberately darker than
   .health-low_stock (#d97706) so the two amber buckets stay distinguishable. */
.health-phase_out { color: #92400e; }
.health-bg-phase_out { background: #92400e; }

.detail-analyze-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid #d4d2cd;
  background: #fff;
  color: #8a8a8a;
  cursor: pointer;
  transition: all 0.15s;
}
.detail-analyze-btn:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

.detail-status-legend {
  display: flex;
  gap: 16px;
  padding: 12px 16px;
  border-top: 1px solid #f0eeea;
  font-size: 11px;
  color: #8a8a8a;
}

.detail-status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* --- Collapsible Section (reusable) --- */
.pv-collapsible-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: #fff;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  font-family: inherit;
  transition: background 0.15s;
}
.pv-collapsible-header:hover { background: #fafaf8; }
.pv-collapsible-header.open { background: #fafaf8; }

/* --- AI Panel (reusable) --- */
.detail-ai-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.15);
  z-index: 999;
  cursor: pointer;
}

.detail-ai-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  background: #fff;
  z-index: 1000;
  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
  border-left: 1px solid #e8e6e1;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}
.detail-ai-panel.open { transform: translateX(0); }

.detail-ai-panel-header {
  padding: 18px 22px;
  border-bottom: 1px solid #e8e6e1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #faf5ff 0%, #fff 100%);
}

.detail-ai-icon-box {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-ai-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #8a8a8a;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.detail-ai-close-btn:hover { color: #1a1a1a; }

.detail-ai-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 22px;
}

.pv-ai-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid #e8e6e1;
  border-top-color: #8b5cf6;
  border-radius: 50%;
  animation: pv-spin 1.2s linear infinite;
}

@keyframes pv-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pv-ai-content {
  font-size: 13px;
  line-height: 1.65;
  color: #333;
}
.pv-ai-content h1, .pv-ai-content h2, .pv-ai-content h3 {
  margin-top: 16px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
}
.pv-ai-content p { margin-bottom: 10px; }
.pv-ai-content ul, .pv-ai-content ol { margin-bottom: 10px; padding-left: 18px; }
.pv-ai-content li { margin-bottom: 4px; }
.pv-ai-content strong { font-weight: 700; }
.pv-ai-content code { background: #f3f4f6; padding: 1px 4px; border-radius: 3px; font-size: 12px; }

/* ===========================================
   Variant Mix Visualization (Product View)
   =========================================== */
.vm-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.vm-header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
}
.vm-header-subtitle {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
}
.vm-bars { padding: 16px 20px; }
.vm-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vm-bar-row + .vm-bar-row { margin-top: 8px; }
.vm-bar-label {
  width: 56px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vm-bar-track {
  flex: 1;
  height: 28px;
  background: var(--bg);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.vm-bar-fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding-left: 8px;
}
.vm-bar-fill-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.vm-bar-outside {
  width: 50px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
}
.vm-bar-pct {
  width: 50px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}
.vm-summary {
  padding: 12px 20px 4px;
  border-top: 1px solid var(--border-light);
  font-size: 11px;
  color: var(--muted);
}
.vm-summary strong { color: var(--ink); }

/* --- Two Variant Heatmap --- */
.vm-heatmap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.vm-heatmap-table-wrap { overflow-x: auto; padding: 16px 20px; }
.vm-heatmap-table {
  border-collapse: separate;
  border-spacing: 3px;
  width: 100%;
  font-family: var(--font-mono);
}
.vm-heatmap-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 8px 12px;
  text-align: center;
  color: var(--muted);
  white-space: nowrap;
}
.vm-data-cell {
  padding: 10px 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  cursor: default;
  transition: opacity 0.15s;
}
.vm-row-header {
  text-align: right !important;
  padding-right: 12px !important;
  transition: background 0.15s;
  border-radius: 6px;
}
.vm-col-header {
  transition: background 0.15s;
  border-radius: 6px;
}
.vm-row-total, .vm-col-total {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface-alt, #fafaf8);
  border-radius: 6px;
  text-align: center;
  padding: 10px 12px;
}
.vm-grand-total {
  font-size: 13px !important;
  font-weight: 800 !important;
}
.vm-row-mix {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  text-align: center;
  padding: 10px 12px;
}
.vm-col-mix {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  text-align: center;
  padding: 10px 12px;
}
.vm-mix-header-blue { color: var(--blue) !important; }
.vm-mix-header-green { color: var(--green) !important; }

.vm-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted);
}
.vm-legend-swatch {
  width: 16px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}

/* --- Marginal Distribution Charts --- */
.vm-marginals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.vm-marginal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.vm-marginal-bars { padding: 12px 16px; }
.vm-marginal-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vm-marginal-bar-row + .vm-marginal-bar-row { margin-top: 6px; }
.vm-marginal-label {
  width: 50px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vm-marginal-track {
  flex: 1;
  height: 24px;
  background: var(--bg);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.vm-marginal-fill {
  height: 100%;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding-left: 8px;
}
.vm-marginal-fill-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.vm-marginal-outside {
  width: 36px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  flex-shrink: 0;
}
.vm-marginal-pct {
  width: 42px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Responsive --- */
/* --- Responsive: Tablet / narrow desktop --- */
@media (max-width: 768px) {
  .pv-grid { grid-template-columns: 1fr; }
  .pv-header { flex-direction: column; }
  .pv-actions { flex-wrap: wrap; }
  .detail-ai-panel { width: 100%; }
  .detail-chart-header { flex-direction: column; gap: 8px; }
  .vm-marginals { grid-template-columns: 1fr; }
  .vm-heatmap-table { min-width: 500px; }
}

/* --- Responsive: Mobile --- */
@media (max-width: 600px) {
  .pv-page { padding: 16px 12px; }
  .pv-title { font-size: 18px; }
  .pv-subtitle { font-size: 12px; }
  .pv-actions { width: 100%; flex-wrap: wrap; }
  .pv-actions > * { flex: 1 1 auto; text-align: center; min-width: 0; white-space: nowrap; }

  .detail-card, .detail-card-hero { padding: 14px; overflow: hidden; }
  .detail-card-value { font-size: 22px; }
  .detail-card-hero-value { font-size: 28px; }

  .detail-chart-header > div:last-child { flex-wrap: wrap; }
  .detail-toggle-btn { padding: 4px 8px; font-size: 10px; }

  .detail-sku-table { font-size: 11px; }
  .detail-sku-table th, .detail-sku-table td { padding: 6px 4px; }
  .detail-sku-table th { font-size: 9px; letter-spacing: 0; }

  .detail-meta-row { font-size: 12px; }
  .detail-health-legend { font-size: 11px; }

  .pv-collapsible-header { font-size: 13px; padding: 12px 14px; }

  .detail-btn-ai, .detail-btn-outline, .detail-btn-cta { font-size: 12px; padding: 6px 12px; }

  .vm-bar-label { width: 44px; font-size: 11px; }
  .vm-bar-pct { width: 40px; font-size: 11px; }
  .vm-heatmap-header { flex-direction: column; gap: 8px; align-items: flex-start; }

  .detail-ai-panel { width: 100%; }
  .detail-ai-panel-header { padding: 14px; }
  .detail-ai-panel-body { padding: 14px; }
}

/* ===========================================
   SKU Detail Page
   =========================================== */

.skd-breadcrumb {
  display: flex; align-items: center; gap: 6px; margin-bottom: 16px;
  font-size: 12px; color: #8a8a8a; flex-wrap: wrap;
}
.skd-breadcrumb-link {
  display: flex; align-items: center; gap: 4px;
  color: #3b82f6; font-weight: 500; text-decoration: none;
}
.skd-breadcrumb-link:hover { text-decoration: underline; }
.skd-breadcrumb-sep { color: #d4d2cd; }
.skd-breadcrumb-text { color: #8a8a8a; }
.skd-breadcrumb-current { font-weight: 600; color: #1a1a1a; }

.skd-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px; gap: 12px;
}
.skd-title { font-size: 22px; font-weight: 700; margin: 0; }
.skd-health-badge {
  font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 4px;
}
.skd-subtitle {
  font-size: 13px; color: #8a8a8a; display: flex; gap: 8px;
  align-items: center; flex-wrap: wrap;
}
.skd-sku-pill {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  background: #f0f0ee; padding: 1px 8px; border-radius: 4px;
}
.skd-dot { color: #d4d2cd; }
.skd-actions { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* Hero card */
.skd-hero-card {
  background: linear-gradient(135deg, #fff5f3 0%, #fff 100%);
  border: 2px solid #e54d2e; border-radius: 14px; overflow: hidden;
}
.skd-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px 0; background: #e54d2e; color: #fff;
  border: none; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: none;
}
.skd-cta-btn:hover { background: #d4432a; color: #fff; }

/* Order calculation */
.skd-order-calc-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: rgba(229,77,46,0.03);
  border: none; border-top: 1px solid rgba(229,77,46,0.15);
  cursor: pointer; font-family: inherit; color: #c4402a;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.skd-order-calc-toggle:hover { background: rgba(229,77,46,0.06); }
.skd-calc-row {
  display: flex; justify-content: space-between; padding: 4px 0;
  font-size: 11px; border-bottom: 1px solid rgba(229,77,46,0.08);
  color: #8a8a8a;
}
.skd-calc-row-bold { color: #1a1a1a; font-weight: 700; }
.skd-calc-total {
  display: flex; justify-content: space-between; padding: 8px 0 0;
  margin-top: 4px; border-top: 2px solid #e54d2e;
  font-size: 13px; font-weight: 800; color: #e54d2e;
}

/* Inventory by location */
.skd-location-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0 0; background: none; border: none;
  cursor: pointer; font-family: inherit; color: #8a8a8a;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.skd-loc-header {
  display: grid; grid-template-columns: 1fr 56px;
  gap: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #b0aead; padding-bottom: 6px;
  border-bottom: 1px solid #f0eeea;
}
.skd-loc-row {
  display: grid; grid-template-columns: 1fr 56px;
  gap: 6px; padding: 7px 0; border-bottom: 1px solid #f8f7f5;
  font-size: 12px; align-items: center;
}

/* Seasonality sparkline */
.skd-sparkline {
  display: flex; gap: 2px; align-items: flex-end; height: 32px; margin-bottom: 6px;
}
.skd-sparkline-labels {
  display: flex; justify-content: space-between; font-size: 9px; color: #b0aead;
}

/* Availability bars */
.skd-avail-bar-track {
  height: 6px; border-radius: 3px; background: #f0eeea; overflow: hidden;
}
.skd-avail-bar-fill {
  height: 100%; border-radius: 3px; opacity: 0.7; transition: width 0.3s;
}

/* Supply planning rows */
.skd-supply-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 4px 0; border-bottom: 1px solid #f8f7f5;
}

/* ADD Demand Rate section */
.skd-add-header {
  width: 100%; display: flex; align-items: center;
  padding: 18px 22px; background: #fff;
  border: none; cursor: pointer; font-family: inherit;
  gap: 12px; transition: background 0.15s;
}
.skd-add-header:hover { background: #fafaf8; }
.skd-add-collapsed-summary {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.skd-show-calc-btn {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 10px; font-weight: 600; color: #3b82f6;
  padding: 4px 10px; border-radius: 6px; background: #eff6ff;
}

/* ADD steps */
.skd-step {
  padding: 14px 16px; border-radius: 10px; background: #fafaf8;
  border: 1px solid #f0eeea; margin-bottom: 12px;
}
.skd-step-title {
  display: flex; align-items: center; margin-bottom: 10px;
  font-size: 12px; font-weight: 700;
}
.skd-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: #1a1a1a;
  color: #fff; font-size: 10px; font-weight: 700; margin-right: 8px; flex-shrink: 0;
}
.skd-fallback-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  background: #fffbeb; color: #92400e;
}

/* ADD window table */
.skd-window-table, .skd-adj-table { font-size: 11px; }
.skd-window-header {
  display: grid; grid-template-columns: 48px 52px 52px 56px 56px 60px 1fr;
  gap: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #b0aead; padding-bottom: 6px;
  border-bottom: 1px solid #e8e6e1; margin-bottom: 4px;
}
.skd-window-row {
  display: grid; grid-template-columns: 48px 52px 52px 56px 56px 60px 1fr;
  gap: 4px; padding: 5px 0; border-bottom: 1px solid #f5f4f2; align-items: center;
}
.skd-adj-header {
  display: grid; grid-template-columns: 48px 56px 56px 60px 1fr;
  gap: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: #6b7c9e; padding-bottom: 6px;
  border-bottom: 1px solid #bfdbfe; margin-bottom: 4px;
}
.skd-adj-row {
  display: grid; grid-template-columns: 48px 56px 56px 60px 1fr;
  gap: 4px; padding: 5px 0; border-bottom: 1px solid #dbeafe; align-items: center;
}

/* ADD summary bar */
.skd-add-summary-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: center; padding: 12px 16px; border-radius: 8px; background: #f5f4f0;
}

/* Variant mix */
.skd-mix-badge {
  font-size: 10px; font-weight: 600; padding: 1px 8px; border-radius: 10px;
}
.skd-mix-header {
  display: grid; grid-template-columns: 44px 1fr 56px 44px;
  gap: 8px; padding: 0 8px 6px; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px; color: #b0aead;
}
.skd-mix-row {
  display: grid; grid-template-columns: 44px 1fr 56px 44px;
  gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px;
  border: 1.5px solid transparent;
}
.skd-mix-row-current-purple { background: #f5f3ff; border-color: #ddd6fe; }
.skd-mix-row-current-blue { background: #eff6ff; border-color: #bfdbfe; }

/* Receiving history */
.skd-recv-header {
  display: grid; grid-template-columns: 1fr 80px 80px 100px;
  gap: 8px; font-weight: 700; font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.5px; padding-bottom: 10px; border-bottom: 1px solid #e8e6e1; color: #aaa;
}
.skd-recv-row {
  display: grid; grid-template-columns: 1fr 80px 80px 100px;
  gap: 8px; padding: 10px 0; border-bottom: 1px solid #f5f4f2; align-items: center;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .skd-header { flex-direction: column; align-items: stretch; }
  .skd-title { font-size: 18px; }
  .skd-breadcrumb { font-size: 11px; margin-bottom: 12px; }
  .skd-add-header { padding: 14px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .skd-add-collapsed-summary { display: none; }
  .skd-window-header, .skd-window-row { grid-template-columns: 40px 44px 44px 48px 48px 52px 1fr; font-size: 9px; }
  .skd-adj-header, .skd-adj-row { grid-template-columns: 40px 48px 48px 52px 1fr; font-size: 9px; }
  .skd-recv-header, .skd-recv-row { grid-template-columns: 1fr 60px 60px 80px; font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   Custom Fields Config Page
   ═══════════════════════════════════════════════════════════════ */

/* Stats bar */
.cf-stats { font-size: 12px; color: var(--muted); margin-bottom: 20px; display: flex; gap: 16px; align-items: center; }
.cf-stats strong { color: var(--ink); }

/* Section headers */
.cf-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--muted); margin: 0 0 10px;
  font-family: monospace;
}

/* Slot card (configured field) */
.slot-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ink);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: box-shadow 0.15s;
  margin-bottom: 8px;
}
.slot-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }

.slot-card-header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;
}
.slot-card-header-text { flex: 1; min-width: 0; }
.slot-card-name { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; }
.slot-card-desc { font-size: 11px; color: var(--muted); margin: 2px 0 0; }
.slot-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

.slot-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 6px;
  font-family: monospace; font-size: 11px; font-weight: 700;
  color: var(--muted); background: var(--border-light);
  border-radius: 5px;
}

/* Metadata badges row */
.slot-card-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

.badge-type {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; font-family: monospace;
  background: rgba(59,130,246,0.06); color: var(--blue);
}
.badge-required {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  background: rgba(217,119,6,0.07); color: var(--amber);
}
.badge-shopify {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600; font-family: monospace;
  background: rgba(22,163,74,0.06); color: var(--green);
}

/* Allowed values pills */
.slot-card-values { display: flex; flex-wrap: wrap; gap: 4px; }
.value-pill {
  display: inline-block; padding: 2px 8px;
  font-size: 11px; border-radius: 4px;
  background: var(--border-light); border: 1px solid var(--border);
  color: var(--ink);
}

/* Empty slot buttons grid */
.cf-empty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.empty-slot-btn {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: var(--font-sans);
  font-size: 13px; color: var(--muted);
}
.empty-slot-btn:hover {
  border-color: var(--accent);
  background: rgba(229,77,46,0.03);
  color: var(--ink);
}
.empty-slot-btn .slot-badge { flex-shrink: 0; }

/* Empty state */
.cf-empty-state {
  text-align: center; padding: 48px 24px; color: var(--muted);
}
.cf-empty-state p { margin: 8px 0 0; font-size: 13px; }

/* ── Drawer ── */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
  z-index: 999;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 480px; max-width: calc(100vw - 24px);
  background: var(--surface);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  z-index: 1000;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.drawer-panel.open { transform: translateX(0); }

.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-header h3 { font-size: 15px; font-weight: 700; margin: 0; color: var(--ink); }
.drawer-close {
  background: none; border: none; cursor: pointer;
  padding: 4px; color: var(--muted); font-size: 18px; line-height: 1;
}
.drawer-close:hover { color: var(--ink); }

.drawer-body { padding: 22px; flex: 1; overflow-y: auto; }

.drawer-slot-indicator {
  font-family: monospace; font-size: 12px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--border-light); color: var(--muted);
  margin-bottom: 18px;
}

.drawer-field { margin-bottom: 18px; }
.drawer-field > label {
  display: block; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); margin-bottom: 6px;
}
.drawer-field .hint {
  font-size: 11px; color: var(--light); margin-top: 4px;
}

.drawer-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 22px; border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Data type tile picker */
.type-tile-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.type-tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px; border-radius: var(--radius-sm); text-align: center;
  border: 1px solid var(--border); cursor: pointer;
  transition: all 0.15s; font-size: 11px; color: var(--muted);
  background: var(--surface);
}
.type-tile:hover { border-color: var(--border-hover); color: var(--ink); }
.type-tile.selected {
  border: 2px solid var(--ink); color: var(--ink);
  background: rgba(26,26,26,0.02);
}
.type-tile-icon { font-size: 16px; font-weight: 700; font-family: monospace; }

/* Toggle pair (nullable + filterable in drawer) */
.drawer-toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.drawer-toggle-btn {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); cursor: pointer;
  background: var(--surface); font-size: 12px; color: var(--ink);
  transition: all 0.15s; font-family: var(--font-sans);
}
.drawer-toggle-btn:hover { border-color: var(--border-hover); }
.drawer-toggle-btn.active { border-color: var(--green); background: rgba(22,163,74,0.03); }

.toggle-track {
  width: 32px; height: 18px; border-radius: 9px;
  background: var(--border); position: relative;
  transition: background 0.15s; flex-shrink: 0;
}
.toggle-track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.drawer-toggle-btn.active .toggle-track { background: var(--green); }
.drawer-toggle-btn.active .toggle-track::after { transform: translateX(14px); }

/* Tag input */
.tag-input-wrapper {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  min-height: 38px; cursor: text;
  background: var(--surface);
}
.tag-input-wrapper:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px rgba(26,26,26,0.08);
}
.tag-input-wrapper input {
  border: none; outline: none; background: transparent;
  font-size: 13px; font-family: var(--font-sans);
  flex: 1; min-width: 80px; padding: 0;
  color: var(--ink);
}
.tag-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--border-light); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 6px 2px 8px;
  font-size: 12px; color: var(--ink);
}
.tag-pill button {
  background: none; border: none; cursor: pointer;
  padding: 0 2px; font-size: 14px; line-height: 1;
  color: var(--muted);
}
.tag-pill button:hover { color: var(--red); }

/* Tab count badges */
.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-family: monospace; font-size: 10px; font-weight: 700;
  background: var(--border-light); color: var(--muted);
  border-radius: 9px; margin-left: 4px;
}

/* Icon-only button */
.btn-icon-only {
  padding: 4px 8px; font-size: 14px; line-height: 1;
}

/* Slot preview (existing data hint in drawer) */
.slot-preview {
  padding: 12px 14px; margin-bottom: 18px;
  border-radius: var(--radius-sm);
  background: rgba(59,130,246,0.04);
  border: 1px solid rgba(59,130,246,0.12);
}
.slot-preview-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--blue); margin-bottom: 4px;
}
.slot-preview-count {
  font-size: 12px; color: var(--muted); margin-bottom: 8px;
}
.slot-preview-values {
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}

/* ── DC Location Selector (Replenishment by DC) ── */
/* Owns its own bottom gap (canonical replacement for the wrapper div's frozen
   inline margin-bottom:16px) — it is the only user of this class. */
.dc-selector {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 16px;
  background: var(--surface-alt);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
}
.dc-selector-pill {
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-light);
  transition: background 0.15s, color 0.15s;
}
.dc-selector-pill:hover:not(.active) {
  background: var(--border-light);
  color: var(--ink);
}
.dc-selector-pill.active {
  background: var(--accent);
  color: #fff;
}

/* Quiet CSV / "Columns" button (design system §5.1). Promoted from
   replenishment_v2.css to global so it can be used on every data surface
   (replenishment, supply plan, vendor purchase forecast, backorder analysis). */
.csv-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s;
}
.csv-btn:hover {
  color: var(--ink);
  border-color: var(--border-hover, #d8d6d1);
}

/* Hot Watch bulk-open bar (select rows → open in Replenishment / Supply Plan) */
.hw-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.hw-bulk-count { font-size: 13px; color: var(--muted); }
.hw-bulk-hint { font-size: 12px; color: var(--red); }

/* Hot Watch — ABC KPI strip + table-cell styles (replaces per-element inline styles:
   at 100+ rows the days-on-hand / availability / action-link inline declarations
   were ~400 separate style objects the engine recomputed on every repaint). */
.hw-csv-link { font-size: 13px; color: var(--blue); text-decoration: underline dotted; text-underline-offset: 3px; }
.hw-abc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 1.5rem; }
.hw-abc-card { padding: 12px 16px; text-align: center; }
.hw-abc-rank { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.hw-abc-total { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.hw-abc-pcts { display: flex; justify-content: center; gap: 16px; font-size: 13px; }
.hw-pct-oos { font-weight: 600; color: #dc2626; }
.hw-pct-atrisk { font-weight: 600; color: #f59e0b; }
.hw-results-heading { margin-bottom: 12px; }
.hw-kit-badge { background: var(--kit-tint); color: var(--kit); padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 600; margin-left: 4px; }
.hw-doh { color: #f59e0b; font-weight: 600; }
.hw-avail-pct { color: var(--light); font-size: 11px; margin-left: 3px; }
.hw-glass-link { text-decoration: none; font-size: 16px; }
.hw-replenish-link { font-size: 12px; text-decoration: underline dotted; text-underline-offset: 3px; white-space: nowrap; color: var(--blue); }
.hw-replenish-link.hw-replenish-kit { color: var(--kit); }
/* Give the SKU column ~25px more room so codes wrap less (applies to header th + cell td). */
.hw-sku-col { min-width: 120px; }