/* ============================================================================
   pipeline.css — tweaks specific to the Pipeline module ONLY.
   No fonts/colors/global styles (core.css owns all tokens). Every class is
   namespaced .pipeline-* and leans on palette tokens via var(--…).
   Houses: win-rate gauge tile, the horizontal kanban board + deal cards,
   the conversion-funnel steps, and the scrollable deals table.
   ========================================================================== */

/* ── KPI tiles: keep the spark hugging the bottom ──────────────────────── */
.pipeline-kpi .spark{margin-top:11px}
.pipeline-kpi .kpi-sub{font-size:11px;color:var(--text-faint)}

/* ── win-rate gauge tile ───────────────────────────────────────────────── */
.pipeline-gauge-card{display:flex;flex-direction:column;gap:4px}
.pipeline-gauge{position:relative;display:grid;place-items:center;margin:2px auto 6px;width:100%;max-width:160px;aspect-ratio:1/.86}
.pipeline-gauge .chart{position:absolute;inset:0}
.pipeline-gauge-core{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;gap:3px;transform:translateY(6px)}
.pipeline-gauge-core .pgc-num{font-family:var(--font-display);font-size:36px;font-weight:600;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.pipeline-gauge-core .pgc-num i{font-size:18px;font-style:normal;color:var(--text-muted);margin-left:1px}
.pipeline-gauge-core .pgc-lbl{font-family:var(--font-mono);font-size:8px;letter-spacing:2px;color:var(--text-faint)}

/* ── shared mini avatar ────────────────────────────────────────────────── */
.pipeline-av{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;
  font-family:var(--font-display);font-size:9px;font-weight:700;color:var(--bg);flex:none}

/* ════ KANBAN BOARD ═══════════════════════════════════════════════════════ */
.pipeline-board-card{overflow:hidden}
.pipeline-board{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);
  gap:13px;padding:0 16px 16px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;
}
.pipeline-board::-webkit-scrollbar{height:8px}
.pipeline-col{
  display:flex;flex-direction:column;min-width:0;scroll-snap-align:start;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);
}

/* column header carries the stage accent + value subtotal */
.pipeline-col-head{
  padding:11px 12px 10px;border-bottom:1px solid var(--border);border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  position:relative;background:linear-gradient(180deg,var(--panel),transparent);
}
.pipeline-col-head::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:3px 0 0 0;background:var(--stage-accent);box-shadow:0 0 10px var(--stage-accent)}
.pipeline-col-head .pch-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pipeline-col-head .pch-name{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.4px;
  text-transform:uppercase;color:var(--text)}
.pipeline-col-head .pch-count{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 6px;
  border-radius:9px;font-family:var(--font-mono);font-size:10px;font-weight:700;
  color:var(--stage-accent);border:1px solid var(--border)}
.pipeline-col-head .pch-total{font-family:var(--font-mono);font-size:15px;font-weight:600;letter-spacing:.5px;
  margin-top:5px;color:var(--text);font-variant-numeric:tabular-nums}

.pipeline-col-body{display:flex;flex-direction:column;gap:9px;padding:11px 10px;min-height:60px}

/* the deal card */
.pipeline-deal{
  background:linear-gradient(180deg,var(--panel-hi),var(--panel));
  border:1px solid var(--border);border-radius:10px;padding:10px 11px 9px;cursor:pointer;
  transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);
}
.pipeline-deal:hover{border-color:var(--border-hi);transform:translateY(-2px);box-shadow:0 8px 20px var(--bg)}
.pipeline-deal:focus-visible{border-color:var(--accent1)}
.pipeline-deal .pd-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:6px}
.pipeline-deal .pd-co{font-size:13px;font-weight:600;color:var(--text);line-height:1.25}
.pipeline-deal .pd-heat{flex:none;font-size:8px;padding:2px 6px;letter-spacing:.8px}
.pipeline-deal .pd-val{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.4px;
  color:var(--text);font-variant-numeric:tabular-nums;margin-bottom:9px}
.pipeline-deal .pd-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pipeline-deal .pd-owner{display:inline-flex;align-items:center;gap:6px;min-width:0}
.pipeline-deal .pd-owner-name{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipeline-deal .pd-age{font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;color:var(--text-faint);white-space:nowrap}
.pipeline-deal .pd-prob{height:3px;border-radius:3px;background:var(--bg);overflow:hidden;margin-top:9px}
.pipeline-deal .pd-prob-bar{height:100%;border-radius:3px;opacity:.85}

/* add-deal ghost row at the foot of a column */
.pipeline-addrow{
  margin:0 10px 11px;padding:7px;border-radius:8px;border:1px dashed var(--border);
  font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:var(--text-faint);
  background:transparent;transition:.15s var(--ease)}
.pipeline-addrow:hover{border-color:var(--border-hi);color:var(--text-muted);background:var(--panel)}

/* ════ CONVERSION FUNNEL ══════════════════════════════════════════════════ */
.pipeline-funnel{display:flex;flex-direction:column;gap:13px;margin-top:2px}
.pipeline-fstep .pf-meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.pipeline-fstep .pf-name{font-size:12px;font-weight:600;color:var(--text-muted)}
.pipeline-fstep .pf-n{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.pipeline-fstep .pf-n i{font-style:normal;color:var(--text-faint);font-weight:400;font-size:11px}
.pipeline-fstep .pf-n .pf-drop{font-style:normal;color:var(--danger);font-size:10px;margin-left:7px;letter-spacing:.5px}
.pipeline-fstep .pf-track{height:9px;border-radius:6px;background:var(--bg);overflow:hidden;border:1px solid var(--border)}
.pipeline-fstep .pf-bar{height:100%;border-radius:6px;transition:width .9s var(--ease);box-shadow:0 0 10px var(--weather)}

/* ════ DEALS TABLE ════════════════════════════════════════════════════════ */
.pipeline-table-wrap{overflow-x:auto}
.pipeline-table-wrap .table{min-width:680px}
.pipeline-tcell{display:inline-flex;align-items:center;gap:7px}
.pipeline-stage-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;
  font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);
  padding:3px 9px;border-radius:20px;border:1px solid var(--border);background:var(--panel)}
.pipeline-stage-chip::before{content:'';width:6px;height:6px;border-radius:50%;
  background:var(--stage-accent);box-shadow:0 0 6px var(--stage-accent)}

/* ════ RESPONSIVE ═════════════════════════════════════════════════════════ */
@media (max-width:820px){
  /* keep kanban a real horizontal scroller on narrow screens */
  .pipeline-board{grid-auto-columns:minmax(212px,80%)}
}
@media (max-width:560px){
  .pipeline-board{grid-auto-columns:minmax(200px,86%)}
  .pipeline-deal .pd-val{font-size:17px}
}