/* ═══════════════════════════════════════════════════════════════════
   SALES FORECASTING MODULE — Track C
   Only NEW rules live here. The view reuses the shared brand components
   from styles.css (.section-h, .panel, .kpi, .day-card, .dp-row, .insight,
   .action-item, .f-chip, .btn) verbatim — do not duplicate those here.
   ═══════════════════════════════════════════════════════════════════ */

/* "demo data" guardrail pill — shows next to the title until NCR_LIVE=true,
   so synthetic numbers are never mistaken for actuals. */
.rrf-pill {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.6;
}

/* Mock / pre-NCR state — muted amber. */
.rrf-pill.rrf-demo {
  color: var(--rr-yellow);
  background: rgba(255, 241, 64, 0.12);
  border: 1px solid rgba(255, 241, 64, 0.35);
}

/* Live / NCR-on state — neon cyan with a soft glow. */
.rrf-pill.rrf-live {
  color: var(--rr-cyan);
  background: rgba(88, 249, 244, 0.12);
  border: 1px solid rgba(88, 249, 244, 0.4);
  box-shadow: 0 0 8px rgba(88, 249, 244, 0.25);
}

/* Make the horizon chips read as clickable (the shared .f-chip is static). */
.day-strip + .chips .f-chip,
.panel-h .chips .f-chip[data-rrf-horizon] {
  cursor: pointer;
}
.panel-h .chips .f-chip[data-rrf-horizon] {
  cursor: pointer;
  user-select: none;
}

/* "from actuals" basis pill — neon cyan when computed from real DB history. */
.rrf-pill.rrf-live {
  color: var(--rr-cyan);
  background: rgba(88, 249, 244, 0.12);
  border: 1px solid rgba(88, 249, 244, 0.4);
  box-shadow: 0 0 8px rgba(88, 249, 244, 0.25);
}

/* ─── GM APPROVAL GATE ─────────────────────────────────────────── */
.rrf-approval {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.rrf-approval .rrf-appr-state { flex: 1 1 320px; font-size: 13px; line-height: 1.5; }
.rrf-approval .rrf-appr-meta { font-size: 11px; color: var(--rr-text-muted); flex: 0 1 auto; }
.rrf-appr-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 8px; vertical-align: middle;
}
.rrf-approval.rrf-approved {
  border-color: rgba(70, 227, 155, 0.4);
  background: rgba(70, 227, 155, 0.07);
}
.rrf-approval.rrf-approved .rrf-appr-dot { background: #46E39B; box-shadow: 0 0 8px rgba(70, 227, 155, 0.6); }
.rrf-approval.rrf-unapproved {
  border-color: rgba(255, 241, 64, 0.35);
  background: rgba(255, 241, 64, 0.06);
}
.rrf-approval.rrf-unapproved .rrf-appr-dot { background: var(--rr-yellow); box-shadow: 0 0 8px rgba(255, 241, 64, 0.5); }

/* ─── DRIVERS WATERFALL ────────────────────────────────────────── */
.rrf-drivers-panel .rrf-summary {
  font-size: 13px;
  line-height: 1.55;
  color: var(--rr-text);
  background: rgba(88, 249, 244, 0.06);
  border-left: 3px solid var(--rr-cyan);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  margin: 4px 0 14px;
}
.rrf-waterfall { display: flex; flex-direction: column; gap: 8px; }
.rrf-driver {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 2fr minmax(72px, auto);
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}
.rrf-d-label { color: var(--rr-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrf-d-track {
  height: 10px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.rrf-d-fill { height: 100%; border-radius: 6px; transition: width 0.25s ease; }
.rrf-d-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

.rrf-d-base .rrf-d-fill { background: linear-gradient(90deg, rgba(120,130,150,0.5), rgba(120,130,150,0.8)); }
.rrf-d-base .rrf-d-label, .rrf-d-base .rrf-d-val { color: var(--rr-text-muted); }
.rrf-d-pos .rrf-d-fill { background: linear-gradient(90deg, rgba(70,227,155,0.6), #46E39B); }
.rrf-d-pos .rrf-d-val { color: #46E39B; }
.rrf-d-neg .rrf-d-fill { background: linear-gradient(90deg, rgba(255,107,160,0.6), #FF6BA0); }
.rrf-d-neg .rrf-d-val { color: #FF6BA0; }
.rrf-d-flat .rrf-d-fill { background: rgba(255,255,255,0.18); }
.rrf-d-flat .rrf-d-val, .rrf-d-flat .rrf-d-label { color: var(--rr-text-muted); }
.rrf-d-total {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 8px; margin-top: 2px;
}
.rrf-d-total .rrf-d-label { font-weight: 700; }
.rrf-d-total .rrf-d-val { color: var(--rr-cyan); font-weight: 700; font-size: 14px; }
.rrf-conf-note { margin-top: 12px; font-size: 11px; color: var(--rr-text-muted); font-style: italic; }