/* Phase 2 — Demand Events Management UI.
   Companion to spec/TODO_demand_events_management_ui_design.md §2.6.
   Six cluster status chip colors + a multi-week chip + cluster-row layout. */

/* ─── Cluster status chips ───────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.chip-open,
.chip-ai-suggests {
  background: var(--tint-info-bg, #eff6ff);
  color: var(--tint-info-fg, #3b82f6);
}

.chip-human_resolved,
.chip-auto_resolved,
.chip-resolved {
  background: var(--tint-healthy-bg, #dcfce7);
  color: var(--tint-healthy-fg, #16a34a);
}

.chip-partially_applied,
.chip-partial {
  background: var(--tint-low-bg, #fffbeb);
  color: var(--tint-low-fg, #d97706);
}

.chip-dismissed {
  background: var(--tint-neutral-bg, #f5f5f4);
  color: var(--tint-neutral-fg, #57534e);
}

.chip-stale {
  background: #e2e8f0;
  color: #475569;
  font-style: italic;
}

.chip-multiweek {
  background: var(--tint-low-bg, #fffbeb);
  color: var(--tint-low-fg, #d97706);
  border: 1px solid rgba(217, 119, 6, 0.25);
}

/* Single-SKU clusters originate from a single high-$-impact spike; visually
   distinct from cross-SKU clusters so the buyer knows it's a per-SKU event. */
.chip-single-sku {
  background: var(--tint-overstocked-bg, #f5f3ff);
  color: var(--tint-overstocked-fg, #7c3aed);
  border: 1px solid rgba(124, 58, 237, 0.25);
}

/* Per-SKU overlay toggle on the Member SKUs table — active state when this
   SKU's actuals are currently rendered as a line on the cluster chart. */
.cluster-overlay-btn.is-overlaying {
  background: #1e3a8a;
  color: #fff;
  border-color: #1e3a8a;
}

/* What action was applied when the cluster was resolved (smooth / exclude /
   replace / mixed). Sits next to the status chip so the buyer can see both
   "resolved" AND HOW. */
.chip-resolution-action {
  background: var(--tint-info-bg, #eff6ff);
  color: var(--tint-info-fg, #3b82f6);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

/* ─── Cluster row layout ─────────────────────────────────────────────── */
.cluster-list {
  margin-top: 8px;
}

.cluster-row {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e8e6e1);
  border-radius: 12px;
}

.cluster-row + .cluster-row {
  margin-top: 12px;
}

/* ─── KPI strip ──────────────────────────────────────────────────────── */
.kpi-card {
  background: var(--surface, #ffffff);
  border: 1px solid var(--border, #e8e6e1);
  border-radius: 12px;
  padding: 14px 18px;
}

.kpi-card .kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted, #78716c);
}

.kpi-card .kpi-value {
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
}

/* ─── Tab bar (cluster queue tabs) ───────────────────────────────────── */
.tab-bar .tab {
  color: var(--muted, #78716c);
  font-weight: 600;
  font-size: 13px;
}

.tab-bar .tab.tab-active {
  color: var(--ink, #1c1917);
}