/* =====================================================================
   SALES INTELLIGENCE - STYLES  (Module #8, executive decision center)
   ---------------------------------------------------------------------
   Built on the design system + shared components (reuses .c3-nav / .c3-kpi
   / .c3-two, .mc-ai, .ds-insight, .li-chip). Adds the opportunity card,
   forecast, pipeline/conversion bars, and sales activity. Prefix: .si
   ===================================================================== */

.si { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 1480px; }
.si-head { display: flex; flex-direction: column; gap: 2px; }

/* ---- Forecast ---- */
.si-forecast { display: flex; gap: var(--sp-7); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.si-f__k { display: block; font-size: var(--fs-xs); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ds-text-mute); }
.si-f__v { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: 700; color: var(--ds-accent); line-height: 1.05; }
.si-f__v--sm { font-size: var(--fs-2xl); color: var(--ds-text-hi); }
.si-spark svg { width: 100%; height: 76px; }
.mc-spark__axis { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ds-text-mute); }

/* ---- Pipeline / Conversion bars ---- */
.si-pipe, .si-conv { display: grid; gap: var(--sp-3); }
.si-pipe__row, .si-conv__row { display: grid; grid-template-columns: 10rem 1fr 5rem; gap: var(--sp-3); align-items: center; }
.si-pipe__stage, .si-conv__stage { font-size: var(--fs-sm); color: var(--ds-text-hi); }
.si-pipe__stage em { color: var(--ds-text-mute); font-style: normal; }
.si-pipe__bar, .si-conv__bar { height: 8px; border-radius: var(--r-pill); background: var(--ds-overlay); overflow: hidden; }
.si-pipe__bar > span, .si-conv__bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--ds-gold-500), var(--ds-gold-300)); }
.si-pipe__val, .si-conv__rate { text-align: right; font-family: var(--font-display); font-weight: 700; color: var(--ds-text-hi); font-size: var(--fs-base); }

/* ---- Opportunity cards ---- */
.si-opps { display: grid; gap: var(--sp-4); }
.si-opp { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); background: var(--ds-surface-2); border: 1px solid var(--ds-hairline); border-radius: var(--r-lg); box-shadow: var(--el-1); position: relative; }
.si-opp::before { content: ""; position: absolute; inset: var(--sp-4) auto var(--sp-4) 0; width: 3px; border-radius: var(--r-pill); background: var(--ds-gold-500); }
.si-opp--risk::before { background: var(--ds-danger); }
.si-opp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.si-opp__lead { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; color: var(--ds-text-hi); display: block; }
.si-opp__client { font-size: var(--fs-sm); color: var(--ds-text-lo); }
.si-opp__val { text-align: right; }
.si-opp__v { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 700; color: var(--ds-accent); display: block; line-height: 1; }
.si-opp__stage { font-size: var(--fs-xs); color: var(--ds-text-lo); }
.si-opp__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--ds-hairline); border-bottom: 1px solid var(--ds-hairline); }
.si-opp__k { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ds-text-mute); margin-bottom: 4px; }
.si-opp__k em { color: var(--ds-positive); font-style: normal; }
.si-opp__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.si-opp__t { font-size: var(--fs-sm); color: var(--ds-text); display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.si-sys { font-size: var(--fs-xs); color: var(--ds-text-lo); background: var(--ds-overlay); border: 1px solid var(--ds-hairline); border-radius: var(--r-pill); padding: 1px 7px; }
.si-opp__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.si-opp__na { font-size: var(--fs-base); font-weight: 600; color: var(--ds-text-hi); }
.si-opp__next { display: flex; flex-direction: column; gap: 2px; }
.si-opp__btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---- Follow-up queue ---- */
.si-followup { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.si-fu { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); cursor: pointer; }
.si-fu:hover { background: var(--ds-overlay); }
.si-fu__lead { font-weight: 600; color: var(--ds-text-hi); min-width: 9rem; }
.si-fu__na { flex: 1; font-size: var(--fs-sm); color: var(--ds-text-lo); }
.si-fu__meta { font-size: var(--fs-xs); color: var(--ds-text-mute); }

/* ---- Objections ---- */
.si-obj { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.si-obj__top { display: flex; align-items: center; justify-content: space-between; }
.si-obj__label { font-size: var(--fs-base); font-weight: 600; color: var(--ds-text-hi); }
.si-obj__ai { display: block; margin-top: 3px; font-size: var(--fs-sm); color: var(--ds-text-lo); line-height: var(--lh-snug); }

/* ---- Activity ---- */
.si-act { list-style: none; margin: 0; padding: 0 0 0 var(--sp-2); }
.si-act__i { position: relative; display: flex; gap: var(--sp-4); padding: 0 0 var(--sp-4) var(--sp-5); }
.si-act__dot { position: absolute; left: 0; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ds-text-mute); box-shadow: 0 0 0 3px var(--ds-surface-2); }
.si-act--signal .si-act__dot { background: var(--ds-gold-500); }
.si-act--risk .si-act__dot { background: var(--ds-danger); }
.si-act__i::before { content: ""; position: absolute; left: 4px; top: 5px; bottom: -5px; width: 1px; background: var(--ds-hairline); }
.si-act__i:last-child::before { display: none; }
.si-act__t { display: block; font-size: var(--fs-base); color: var(--ds-text); }
.si-act__t strong { color: var(--ds-text-hi); }
.si-act__w { font-size: var(--fs-xs); color: var(--ds-text-mute); }

/* ---- Team / won-lost ---- */
.si-wl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-top: var(--sp-5); }
.si-lost { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.si-lost li { font-size: var(--fs-sm); color: var(--ds-text); padding-left: var(--sp-4); position: relative; }
.si-lost li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-danger); }
.si-who { color: var(--ds-text-mute); }

@media (max-width: 900px) {
  .si-pipe__row, .si-conv__row { grid-template-columns: 8rem 1fr 4rem; }
  .si-wl { grid-template-columns: 1fr; }
}