/* =============================================================================
   Backorder Analysis — scoped styles
   Prefix: .ba-*
   Builds on Restocked design-system tokens (--bg, --ink, --accent, --red, etc.)
   ============================================================================= */

/* Page shell */
.ba-page { max-width: 1500px; margin: 0 auto; padding: 28px 24px; }

/* Page header */
.ba-ph {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 22px; gap: 20px;
}
.ba-ph h1 {
  font-size: 22px; font-weight: 700; color: var(--ink); margin: 0;
  letter-spacing: -0.2px;
}
.ba-ph-sub {
  font-size: 11px; color: var(--muted); margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
}
.ba-ph-sub svg { width: 11px; height: 11px; stroke-width: 2; }

/* Export dropdown */
.ba-header-actions { position: relative; }
.ba-export-btn {
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--blue);
  background: transparent; border: none; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
  text-decoration-color: #bfdbfe;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px;
}
.ba-export-btn:hover { text-decoration-color: var(--blue); }
.ba-export-btn svg { width: 13px; height: 13px; }
.ba-export-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  min-width: 340px; padding: 6px; z-index: 20;
}
.ba-export-menu[hidden] { display: none; }
.ba-opt {
  display: block; padding: 10px 12px; border-radius: 6px; cursor: pointer;
  text-decoration: none; color: var(--ink);
}
.ba-opt:hover { background: var(--bg); }
.ba-opt-title { font-size: 13px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 8px; }
.ba-opt-title svg { width: 13px; height: 13px; color: var(--muted); stroke-width: 2; }
.ba-opt-desc { font-size: 11px; color: var(--muted); margin-top: 2px; margin-left: 21px; line-height: 1.4; }
.ba-divider { height: 1px; background: var(--border-light, #f0eeea); margin: 4px 6px; }

/* KPI strip */
.ba-kpis {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr 1fr;
  gap: 14px; margin-bottom: 20px;
}
.ba-kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
  transition: all 0.15s;
}
.ba-kpi-lbl {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted);
}
.ba-kpi-val {
  font-size: 28px; font-weight: 700; color: var(--ink); margin-top: 10px;
  letter-spacing: -0.4px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ba-kpi-foot { font-size: 10.5px; color: var(--muted); margin-top: 8px; }
.ba-kpi.hero {
  background: linear-gradient(135deg, #fff5f3 0%, #ffffff 100%);
  border: 2px solid var(--accent); border-radius: 14px;
  padding: 13px 15px;
}
.ba-kpi.hero .ba-kpi-val { font-size: 32px; font-weight: 800; color: var(--accent); }
.ba-kpi.hero .ba-kpi-lbl { color: var(--accent); }
.ba-kpi.stranded {
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
  border-color: #f5cfc9;
}
.ba-kpi.stranded .ba-kpi-val,
.ba-kpi.stranded .ba-kpi-lbl { color: var(--red); }
.ba-kpi.clearable .ba-kpi-val { color: var(--green); }

/* Results bar */
.ba-results-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2px 10px; font-size: 12px; color: var(--muted);
  gap: 18px;
}
.ba-results-lhs strong { color: var(--ink); font-weight: 700; }
.ba-sort-wrap { display: flex; align-items: center; gap: 8px; }
.ba-sort-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 700; color: var(--muted);
}
.ba-sort-form select {
  font-family: inherit; font-size: 12px; color: var(--ink);
  padding: 5px 28px 5px 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; height: 28px;
  appearance: none;
}

/* Table */
.ba-table-wrap {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden;
}
.ba-table-scroll { overflow-x: auto; overflow-y: visible; position: relative; }

table.ba-table {
  border-collapse: separate; border-spacing: 0;
  width: 100%; font-size: 12px;
  min-width: 2100px;
}
table.ba-table thead th {
  background: var(--surface-alt, #fafaf8); color: var(--light, #b0aead);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 10px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 3;
  user-select: none; vertical-align: middle;
}
table.ba-table thead th.num { text-align: right; }
table.ba-table tbody td {
  padding: 11px 12px; border-bottom: 1px solid var(--border-light, #f0eeea);
  vertical-align: middle; white-space: nowrap;
  color: var(--ink); background: var(--surface);
}
table.ba-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.ba-table tbody tr:hover td { background: var(--surface-alt, #fafaf8); }
table.ba-table tbody tr:last-child td { border-bottom: none; }

/* Sticky columns — only the expand chevron + Product/SKU stay pinned on
   horizontal scroll. Kit, Missing Component, and everything else scroll. */
.ba-table .st { position: sticky; z-index: 2; background: var(--surface); }
table.ba-table tbody tr:hover .st { background: var(--surface-alt, #fafaf8); }
.ba-table .st.chev    { left: 0;     width: 40px;  min-width: 40px; }
.ba-table .st.prodsku {
  left: 40px; min-width: 300px; max-width: 300px;
  border-right: 1px solid var(--border);
  box-shadow: 4px 0 10px -6px rgba(0,0,0,0.08);
}
.ba-table thead th.st { z-index: 4; }

/* Chev button */
.ba-chev-btn {
  background: transparent; border: none; cursor: pointer; padding: 4px 6px;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; line-height: 1;
}
.ba-chev-btn:hover { background: var(--border-light, #f0eeea); color: var(--ink); }
.ba-chev-btn svg { width: 14px; height: 14px; stroke-width: 2.2; transition: transform 0.15s; }
.ba-chev-btn.open { color: var(--ink); }
.ba-chev-btn.open svg { transform: rotate(90deg); }

/* Cell primitives */
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: 'tnum' 1; }

/* Consolidated Product/SKU cell — ABC badge + product name (top), SKU link + product type (bottom) */
.ba-prodsku-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ba-prodsku-name {
  font-size: 12px; font-weight: 500; color: var(--ink);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ba-prodsku-name-text { overflow: hidden; text-overflow: ellipsis; }
.ba-prodsku-meta {
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ba-sku-link {
  font-family: "JetBrains Mono", monospace; font-weight: 600;
  color: var(--muted); text-decoration: none;
}
.ba-sku-link:hover { color: var(--blue); text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 2px; }
.ba-prodsku-ptype { color: var(--muted); }

/* ABC badge — matches Vendor Purchase Forecast */
.ba-abc-badge {
  display: inline-block; flex-shrink: 0;
  padding: 1px 5px; font-size: 9px; font-weight: 600; border-radius: 3px;
  background: var(--border-light, #f0eeea); color: var(--muted);
}
.ba-abc-a1, .ba-abc-a2 { background: rgba(22, 163, 74, 0.15); color: #3a6a1f; }
.ba-abc-b             { background: rgba(217, 119, 6, 0.15); color: #8a5a00; }
.ba-abc-c, .ba-abc-o  { background: #eee; color: #666; }

.ba-missing-cell { color: var(--amber); font-family: "JetBrains Mono", monospace; font-size: 11px; }
.ba-em { color: var(--light, #b0aead); }

/* Kit pill */
.ba-kit-pill {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  background: #ccfbf1; color: #0d9488;
}

/* Aging pill */
.ba-age {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 600;
}
.ba-age.fresh    { background: #dcfce7; color: var(--green); }
.ba-age.warn     { background: #fffbeb; color: var(--amber); }
.ba-age.stale    { background: #fff4ed; color: var(--orange); }
.ba-age.critical { background: #fef2f2; color: var(--red); }

/* Status pill (Status USA custom field — per-SKU lifecycle marker) */
.ba-status-pill {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  background: var(--border-light, #f0eeea); color: var(--muted);
}
.ba-status-normal        { background: #ccfbf1; color: #0d9488; }
.ba-status-discontinued  { background: #f5f4f0; color: var(--muted); }
.ba-status-phasing_out   { background: #fffbeb; color: var(--amber); }

/* Inbound ref */
.ba-inb-ref {
  font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--blue);
  text-decoration: underline dotted; text-underline-offset: 2px;
  text-decoration-color: #bfdbfe; font-weight: 600;
}
.ba-inb-qty { font-size: 10px; color: var(--muted); font-family: "JetBrains Mono", monospace; }
.ba-cell-stack { display: inline-flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.ba-date { font-size: 11px; color: var(--ink); }

/* Diagnostic pills on dates */
.ba-diag {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.2px;
}
.ba-diag.stranded     { background: #fef2f2; color: var(--red); }
.ba-diag.insufficient { background: #fff4ed; color: var(--orange); }
.ba-diag.overdue      { background: #fef2f2; color: var(--red); }
.ba-diag.horizon      { background: #f5f5f4; color: var(--stone, #57534e); }
.ba-stranded-pair { display: inline-flex; align-items: center; gap: 6px; }

.ba-clr-green { color: var(--green); font-weight: 600; }
.ba-clr-amber { color: var(--amber); font-weight: 600; }
.ba-clr-gray  { color: var(--muted); }

.ba-zero { color: var(--light, #b0aead); font-family: "JetBrains Mono", monospace; }
.ba-avail-red   { color: var(--red); font-weight: 700; font-family: "JetBrains Mono", monospace; }
.ba-avail-green { color: var(--green); font-weight: 600; font-family: "JetBrains Mono", monospace; }
.ba-bo-cost { font-weight: 700; font-family: "JetBrains Mono", monospace; }

/* Row accents */
tr.row-stranded     .st.chev { box-shadow: inset 3px 0 0 0 var(--red); }
tr.row-insufficient .st.chev { box-shadow: inset 3px 0 0 0 var(--orange); }

/* Drawer.
   The <td colspan="17"> is 2100px wide (full table min-width). Without
   intervention, horizontal scroll in the main grid moves the drawer content
   out of view. We anchor the drawer's inner wrapper via `position: sticky;
   left: 0` against the `.ba-table-scroll` overflow-x: auto ancestor, and
   constrain its width to the viewport so it stays fully visible no matter
   where the user is scrolled horizontally. */
tr.ba-drawer-row td {
  background: var(--surface-alt, #fafaf8);
  padding: 0;
  border-bottom: 1px solid var(--border-light, #f0eeea);
  white-space: normal;
}
.ba-drawer-inner {
  position: sticky;
  left: 0;
  box-sizing: border-box;
  /* Viewport-width clamp: 48px buffers the .ba-page horizontal padding (24px each side),
     1452px caps at the .ba-page max-width of 1500px minus the same padding. */
  width: calc(100vw - 48px);
  max-width: 1452px;
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ba-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ba-drawer-head h4 {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); margin: 0; display: flex; align-items: center; gap: 6px;
}
.ba-drawer-head h4 svg { width: 12px; height: 12px; }
.ba-drawer-sku { color: var(--ink); }
.ba-drawer-sep { color: var(--light, #b0aead); font-weight: 400; }
.ba-drawer-meta { color: var(--ink); font-weight: 400; }
.ba-drawer-kit-summary {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; color: var(--muted); flex-wrap: wrap;
}
.ba-drawer-item { display: inline-flex; align-items: center; gap: 6px; }
.ba-drawer-item strong { color: var(--ink); font-weight: 600; }

table.ba-drawer-t {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
  border-collapse: separate; border-spacing: 0;
  font-size: 11px; overflow: hidden;
}
table.ba-drawer-t thead th {
  background: #fff; color: var(--light, #b0aead);
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  padding: 8px 12px; text-align: left;
  border-bottom: 1px solid var(--border-light, #f0eeea);
  white-space: nowrap;
}
table.ba-drawer-t thead th.num { text-align: right; }
table.ba-drawer-t tbody td {
  padding: 9px 12px; border-bottom: 1px solid var(--border-light, #f0eeea);
  color: var(--ink); font-size: 11px; white-space: nowrap;
}
table.ba-drawer-t tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.ba-drawer-t tbody tr:last-child td { border-bottom: none; }
table.ba-drawer-t tbody tr:hover td { background: #fafaf8; }
.ba-drawer-order-id { color: var(--blue); }
.ba-cust-type {
  display: inline-flex; padding: 2px 7px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
  font-family: "JetBrains Mono", monospace;
}
.ba-cust-type.b2b         { background: #dbeafe; color: #2563eb; }
.ba-cust-type.dtc         { background: #f0eeea; color: #57534e; }
.ba-cust-type.marketplace { background: #ede9fe; color: #7c3aed; }

.ba-drawer-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 4px;
}
.ba-drawer-more { font-size: 11px; color: var(--muted); }

/* Empty states */
.ba-empty {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 100px 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 12px;
}
.ba-empty-icon {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.ba-empty-icon svg { width: 32px; height: 32px; stroke-width: 2; }
.ba-empty.celebration .ba-empty-icon { background: #dcfce7; color: var(--green); }
.ba-empty.filter .ba-empty-icon { background: var(--bg); color: var(--muted); }
.ba-empty h2 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0; }
.ba-empty p { font-size: 13px; color: var(--muted); margin: 0; max-width: 320px; line-height: 1.5; }
.ba-empty-actions { display: flex; gap: 8px; margin-top: 10px; }