/* 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;
}

/* Prior-peaks badge — surfaces when a member SKU has historical weeks ≥
   event-week BEFORE the chart's ±26w visible window. Tells the buyer the
   chart is hiding context that may change their resolution. Companion to
   the scanner's full-history F-gate widening (2026-06-09). Amber because
   it's a "look here before acting" cue, not an error. */
.chip-prior-peaks {
  background: var(--tint-low-bg, #fffbeb);
  color: var(--tint-low-fg, #d97706);
  border: 1px solid rgba(217, 119, 6, 0.25);
  font-size: 10px;
  padding: 1px 6px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  margin-left: 6px;
  cursor: help;
}

/* 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);
}

/* ─── Apply-action modal: per-action help blocks ──────────────────────── */
/* Phase 2.2 — 5 color-coded blurbs (one per action). Only one is visible
   at a time; Stimulus toggles `is-active` (defaults to display: none). */
.de-help {
  display: none;
  padding: 12px 14px;
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  line-height: 1.5;
  border-left: 3px solid #6b7280;
  background: var(--bg, #f5f4f0);
}

.de-help.is-active {
  display: block;
}

.de-help-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.de-help-row {
  margin-bottom: 6px;
}

.de-help-row:last-child {
  margin-bottom: 0;
}

.de-help-impact {
  font-weight: 600;
}

/* Per-action color palette — amber for smooth (reduces), green for spread
   (preserves total), red for exclude (strongest reduction), blue for replace
   (depends on value), neutral for dismiss (no impact). */
.de-help--smooth {
  background: #fff8e6;
  border-left-color: #f59e0b;
}
.de-help--smooth .de-help-impact { color: #b45309; }

.de-help--spread {
  background: #ecfdf5;
  border-left-color: #059669;
}
.de-help--spread .de-help-impact { color: #047857; }

.de-help--exclude {
  background: #fef2f2;
  border-left-color: #dc2626;
}
.de-help--exclude .de-help-impact { color: #b91c1c; }

.de-help--replace {
  background: #eff6ff;
  border-left-color: #2563eb;
}
.de-help--replace .de-help-impact { color: #1d4ed8; }

.de-help--dismiss {
  background: #f3f4f6;
  border-left-color: #6b7280;
}
.de-help--dismiss .de-help-impact { color: #4b5563; }

/* Live "what will be flagged" preview under the flag-event date pickers.
   Any day the buyer picks snaps to its ISO week; this line confirms the
   resolved week(s) so the Mon-anchor / "inclusive" ambiguity disappears. */
.de-flag-preview {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #1f2937);
  min-height: 1em;
}
.de-flag-preview:empty {
  display: none;
}
.de-flag-preview .de-flag-preview-weeks {
  color: var(--muted, #6b7280);
  font-weight: 500;
}