/* Forecast by SKU — a wide, export-oriented datatable. Loaded via the app-wide
   stylesheet_link_tag :app glob (no per-view link tag — see design-system §19). */

/* Sits directly under the standard .page-header (h1 + top-right .csv-btn). */
.fbs-subtitle {
  margin: -0.25rem 0 1rem;
  color: var(--muted);
  font-size: 13px;
  max-width: 70ch;
  line-height: 1.5;
}

.fbs-num-input {
  max-width: 110px;
}

/* CSV export button loading state (csv-download-button controller). */
.fbs-csv-loading {
  opacity: 0.7;
  pointer-events: none;
}
.fbs-csv-spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: fbs-csv-spin 0.6s linear infinite;
  vertical-align: -1px;
}
@keyframes fbs-csv-spin {
  to { transform: rotate(360deg); }
}
.fbs-select {
  max-width: 260px;
}

/* Forward-vs-demand change cells: green when the forecast is above last year's
   demand (growth), red when below. */
.fbs-table .fbs-pos {
  color: var(--green);
}
.fbs-table .fbs-neg {
  color: var(--red);
}

/* ── Recent background exports ── */
.fbs-exports {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.fbs-exports-label {
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.fbs-exports-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
}
.fbs-export {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.fbs-export-link {
  font-weight: 600;
  color: var(--red);
}
.fbs-export-meta {
  color: var(--muted);
}
.fbs-export-failed {
  color: var(--red);
  font-weight: 600;
}
.fbs-export-preparing {
  color: var(--amber);
  font-weight: 600;
}

/* ── Table ── */
.fbs-table {
  font-size: 12px;
  white-space: nowrap;
}
.fbs-table th,
.fbs-table td {
  padding: 0.4rem 0.55rem;
  vertical-align: middle;
}
.fbs-table .fbs-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fbs-table th.fbs-num {
  text-align: right;
}
/* Subtle tint grouping the forecast-figure columns so the eye can find them in
   a wide table (30d / 180d units, ADD, horizon $). */
.fbs-table .fbs-fc {
  background: var(--surface-alt);
}
.fbs-table .fbs-muted {
  color: var(--muted);
}
.fbs-table .fbs-strong {
  font-weight: 700;
}

/* Product cell — link + variant/season subline (self-contained; does not lean on
   replenishment_v2's per-page .prod-* rules). Wider than the other text cells so
   the product name has room; the name weight is intentionally softer than
   replenishment's .prod-link (toned down here only, pending review). */
.fbs-prod-cell {
  min-width: 240px;
  white-space: normal;
}
.fbs-prod-link {
  font-weight: 500;
  color: var(--ink);
}

/* Vendor cell — capped so a long vendor name doesn't crowd the forecast columns;
   full name on hover via the title attribute. */
.fbs-table .fbs-vendor {
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fbs-variant-sub {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
}
.fbs-variant-sub .fbs-sep {
  margin: 0 4px;
  color: var(--border-hover, var(--muted));
}
.fbs-abc {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}
.fbs-kit-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--tint-info-bg, var(--surface-alt));
  color: var(--blue);
  font-size: 11px;
  font-weight: 600;
}

/* Supersession badges */
.fbs-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.fbs-badge-succ {
  background: var(--tint-info-bg, var(--surface-alt));
  color: var(--blue);
}
.fbs-badge-pred {
  background: var(--amber-tint, var(--surface-alt));
  color: var(--amber);
}
.fbs-badge-link {
  color: inherit;
  text-decoration: underline;
}

.fbs-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--muted);
}
.fbs-empty p {
  margin: 0 0 0.75rem;
}

/* Configurable ColumnProfile columns (custom fields / standard fields),
   appended after the built-in block — mirrors replenishment's .rcc-* pair. */
.fbs-table th.fbs-cc-head {
  text-align: left;
  white-space: nowrap;
}
.fbs-table td.fbs-cc-cell {
  text-align: left;
  font-size: 12px;
  color: var(--ink);
}