/*
 * Vendor Purchase Forecast — scoped styles (vpf- prefix).
 *
 * Shared with existing Restocked patterns: relies on .filters-card,
 * .form-control, .dash-kpi-card, .data-table, .card from the global design
 * system. Adds scoped classes for the display-mode toggle, banners, legend,
 * column-mode switcher, sticky grid, status icons, and peak-month highlight.
 */

/* ─── Display mode toggle (MoQ Group / By SKU) ─── */
.vpf-display-toggle {
  display: inline-flex;
  background: var(--white, #fff);
  border: 1px solid var(--border, #e5e5e0);
  border-radius: 8px;
  overflow: hidden;
}
.vpf-display-toggle .vpf-toggle-btn {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--ink, #2a2a2a);
  text-decoration: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-right: 1px solid var(--border, #e5e5e0);
}
.vpf-display-toggle .vpf-toggle-btn:last-child { border-right: none; }
.vpf-display-toggle .vpf-toggle-btn.active {
  background: var(--ink, #2a2a2a);
  color: var(--white, #fff);
}

/* ─── Banners ─── */
.vpf-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
}
.vpf-banner-icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
}
.vpf-banner > div { flex: 1; line-height: 1.4; }
.vpf-banner-action {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.vpf-banner-warning {
  background: rgba(249, 185, 67, 0.12);
  border: 1px solid rgba(249, 185, 67, 0.3);
  color: #8a5a00;
}
.vpf-banner-warning .vpf-banner-icon { color: var(--amber, #e5a000); }
.vpf-banner-warning .vpf-banner-action { color: #8a5a00; }
.vpf-banner-info {
  background: rgba(52, 125, 204, 0.08);
  border: 1px solid rgba(52, 125, 204, 0.2);
  color: #1e4f87;
}
.vpf-banner-info .vpf-banner-icon { color: var(--blue, #347dcc); }
.vpf-banner-info .vpf-banner-action { color: #1e4f87; }

/* ─── Table card ─── */
.vpf-table-card {
  padding: 0;
  overflow: hidden;
}
.vpf-table-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border, #e5e5e0);
  flex-wrap: wrap;
}
.vpf-table-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.vpf-legend-item {
  font-size: 11px;
  color: var(--muted, #7a7a6e);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vpf-legend-defer { color: var(--amber, #c88800); }
.vpf-legend-padded { color: var(--blue, #347dcc); }

/* Column-mode toggle (Units / Units+$ / $ only) */
.vpf-colmode-toggle {
  display: inline-flex;
  background: var(--bg-soft, #f5f4f0);
  border-radius: 6px;
  padding: 2px;
}
.vpf-colmode-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, #7a7a6e);
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.vpf-colmode-btn.active {
  background: var(--white, #fff);
  color: var(--ink, #2a2a2a);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

/* ─── Grid ─── */
.vpf-grid-wrapper {
  overflow: auto;
  max-height: 70vh;
}
.vpf-grid {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
.vpf-grid th,
.vpf-grid td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-soft, #efede8);
  vertical-align: middle;
}
.vpf-grid th.text-right, .vpf-grid td.text-right { text-align: right; }
.vpf-grid th.text-center, .vpf-grid td.text-center { text-align: center; }

/* Sticky header row */
.vpf-sticky-header {
  position: sticky;
  top: 0;
  background: var(--bg-soft, #f5f4f0);
  z-index: 3;
  font-weight: 600;
  font-size: 11px;
  color: var(--muted, #7a7a6e);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* thead cells that are also sticky columns need the header bg (not row bg) */
.vpf-grid thead .vpf-sticky-col,
.vpf-grid thead .vpf-sticky-col-moq { background: var(--bg-soft, #f5f4f0); }

/* Sticky left columns: Product/SKU (col 1) and MOQ (col 2) */
.vpf-sticky-col {
  position: sticky;
  left: 0;
  background: var(--white, #fff);
  z-index: 1;
  text-align: left;
  /* Fixed width + overflow clip so long product names truncate instead of
     flowing under the sticky MOQ column to its right. */
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  overflow: hidden;
}
.vpf-sticky-col-moq {
  position: sticky;
  left: 320px;        /* matches fixed width of Product/SKU column */
  background: var(--white, #fff);
  z-index: 2;         /* above sticky-col so any overflow hides behind it */
  text-align: right;
  /* Subtle left-border so the second sticky col visually separates from the
     Product/SKU column to its left. */
  box-shadow: inset 1px 0 0 var(--border-light, #f0eeea),
              inset -1px 0 0 var(--border-light, #f0eeea);
}
.vpf-grid thead .vpf-sticky-col,
.vpf-grid thead .vpf-sticky-col-moq { z-index: 4; }

/* Vendor rollup row */
.vpf-vendor-header td {
  background: #f5f1e7;
  font-size: 13px;
  border-top: 2px solid var(--border, #e5e5e0);
  padding-top: 12px;
  padding-bottom: 12px;
}
.vpf-vendor-header .vpf-sticky-col,
.vpf-vendor-header .vpf-sticky-col-moq { background: #f5f1e7; }

/* MOQ group row (secondary rollup in by_moq_group mode) */
.vpf-group-row td {
  background: #faf9f5;
  font-size: 12px;
}
.vpf-group-row .vpf-sticky-col,
.vpf-group-row .vpf-sticky-col-moq { background: #faf9f5; }
.vpf-group-name { font-weight: 600; }

/* SKU row */
.vpf-sku-row .vpf-sticky-col { padding-top: 10px; padding-bottom: 10px; }
.vpf-product-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink, #2a2a2a);
  display: flex;
  align-items: center;
  gap: 6px;
  /* Truncate long names rather than wrapping past the column boundary. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vpf-product-name .vpf-abc-badge {
  flex-shrink: 0;  /* keep the badge full-size even when name truncates */
}
.vpf-sku-code {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted, #7a7a6e);
  margin-top: 2px;
  /* Match product name truncation so nothing overflows into the MOQ sticky col. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grand total row — sticky to bottom of scrolling grid */
tfoot .vpf-grand-total td {
  position: sticky;
  bottom: 0;
  background: var(--ink, #2a2a2a);
  color: var(--white, #fff);
  font-weight: 600;
  border-top: 2px solid var(--ink, #2a2a2a);
  padding-top: 12px;
  padding-bottom: 12px;
  z-index: 2;
}
/* Grand total's sticky left col needs higher z so it layers above
   the row cells + above the regular sticky columns during horizontal scroll */
tfoot .vpf-grand-total .vpf-sticky-col,
tfoot .vpf-grand-total .vpf-sticky-col-moq {
  background: var(--ink, #2a2a2a);
  z-index: 3;
}

/* Peak placement month column — subtle highlight */
.vpf-peak-col {
  background: rgba(234, 84, 74, 0.04);
}
.vpf-vendor-header .vpf-peak-col { background: rgba(234, 84, 74, 0.08); }
.vpf-group-row .vpf-peak-col { background: rgba(234, 84, 74, 0.06); }
th.vpf-peak-col {
  background: rgba(234, 84, 74, 0.1);
  color: var(--red, #ea544a);
}

/* Cell content (units + dollars). Visibility driven by [data-col-mode] on
   the .vpf-table-card root, set by the Stimulus controller. */
.vpf-cell-units { font-size: 12px; font-variant-numeric: tabular-nums; display: block; }
.vpf-cell-dollars { font-size: 11px; color: var(--muted, #7a7a6e); font-variant-numeric: tabular-nums; display: block; }

.vpf-table-card[data-col-mode="units"] .vpf-cell-dollars,
.vpf-table-card[data-col-mode="units"] .vpf-col-dollar { display: none; }

.vpf-table-card[data-col-mode="dollars"] .vpf-cell-units { display: none; }
.vpf-cell-flag {
  margin-left: 4px;
  font-size: 10px;
  color: var(--blue, #347dcc);
  cursor: help;
}

/* Status icons on rows (⚠ / ℹ) */
.vpf-row-icon {
  font-size: 14px;
  cursor: help;
  line-height: 1;
}
.vpf-icon-defer { color: var(--amber, #c88800); }
.vpf-icon-padded { color: var(--blue, #347dcc); }

/* ABC badge (A1/A2/B/C/O) */
.vpf-abc-badge {
  display: inline-block;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 600;
  border-radius: 3px;
  background: var(--bg-soft, #f5f4f0);
  color: var(--muted, #7a7a6e);
  margin-left: 4px;
}
.vpf-abc-a1, .vpf-abc-a2 { background: rgba(106, 158, 75, 0.15); color: #3a6a1f; }
.vpf-abc-b { background: rgba(249, 185, 67, 0.15); color: #8a5a00; }
.vpf-abc-c, .vpf-abc-o { background: #eee; color: #666; }