/* ============================================================
   Analytics dashboard styles
   Reuses: leads.css base tokens, pipeline.css filter components
   ============================================================ */

.an-page *, .an-page *::before, .an-page *::after {
  box-sizing: border-box;
}

/* Sidebar layout: page fills full viewport (no top header).
   Body has overflow:hidden, so .an-page is the scroll container.
   max-width:100% prevents children from making it wider than parent. */
.an-page{
  display:flex;flex-direction:column;
  background:var(--bg);
  width:100%;
  max-width:100%;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
}

/* ── Sticky filter bar — floating style (transparent bg) ───
   Still sticks to top on scroll, but no card chrome.
   Uses --bg so content scrolling under it doesn't bleed through. */
.an-sticky{
  position:sticky;top:0;z-index:30;
  background:var(--bg);
}
.an-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 10px;gap:12px;flex-wrap:wrap;
}
.an-title-wrap{display:flex;flex-direction:column;gap:2px}
.an-title{
  font-size:18px;font-weight:700;color:var(--txt);
  letter-spacing:-.2px;margin:0;
}
.an-subtitle{font-size:11px;color:var(--txt3);font-weight:500}
.an-topbar-right{display:flex;align-items:center;gap:10px}
.an-refresh-meta{font-size:11px;color:var(--txt3);font-weight:500}

/* Cross-page navigation link (pipeline ↔ dashboard) */
.cross-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;color:var(--txt3);
  text-decoration:none;padding:5px 10px;border-radius:var(--r);
  transition:all .15s;cursor:pointer;
}
.cross-link:hover{color:var(--p);background:var(--p-tint)}
.cross-link svg{
  width:11px;height:11px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .15s;
}
.cross-link:hover svg{transform:translateX(2px)}
.an-refresh-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:0 12px;height:32px;border-radius:var(--r);
  background:var(--p-tint);color:var(--p);
  border:1px solid var(--p-border);font-weight:600;font-size:12px;
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.an-refresh-btn:hover:not(:disabled){background:var(--p);color:#fff}
.an-refresh-btn:disabled{opacity:.5;cursor:not-allowed}
.an-refresh-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.an-refresh-btn.spinning svg{animation:rfSpin .8s linear infinite}

.an-filterbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:0 20px 12px;
}
.an-spacer{flex:1}
.an-range-select{min-width:148px}

/* ── Body ─────────────────────────────────────────────────── */
.an-body{padding:16px 20px 28px;display:flex;flex-direction:column;gap:14px}

/* ── AI Pulse ─────────────────────────────────────────────── */
.an-pulse{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);
  padding:14px 18px;position:relative;overflow:hidden;
}
.an-pulse::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg, var(--p-tint) 0%, transparent 40%);
  pointer-events:none;opacity:.7;
}
.an-pulse-head{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  position:relative;z-index:1;flex-wrap:wrap;
}
.an-pulse-tag{
  font-size:10px;font-weight:700;color:var(--p);
  letter-spacing:.06em;text-transform:uppercase;
}
.an-pulse-meta{font-size:10px;color:var(--txt3);font-weight:500}
.an-pulse-scope{
  font-size:10px;color:var(--txt3);font-weight:500;margin-left:auto;
  padding:2px 8px;background:var(--card2);border-radius:999px;
}
.an-pulse-body{
  font-size:13px;line-height:1.6;color:var(--txt);
  position:relative;z-index:1;
}
.an-pulse-body strong{font-weight:700;color:var(--txt)}
.an-pulse-empty{font-size:12px;color:var(--txt3);font-style:italic}
.an-pulse.stale .an-pulse-body{opacity:.55}

/* ── Stat cards ───────────────────────────────────────────── */
.stat-grid{
  display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:10px;
}
.stat-card{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);
  padding:14px 16px;
}
.stat-label{
  font-size:10px;font-weight:700;color:var(--txt3);
  text-transform:uppercase;letter-spacing:.04em;
  display:flex;align-items:center;gap:5px;
}
.info-tip{
  cursor:help;color:var(--txt3);font-size:11px;
}
.stat-row{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-top:6px;gap:10px;
}
.stat-value{
  font-size:26px;font-weight:700;color:var(--txt);
  letter-spacing:-.5px;line-height:1;font-variant-numeric:tabular-nums;
}
.stat-value .stat-unit{
  font-size:13px;font-weight:500;color:var(--txt3);margin-left:3px;
}
.stat-spark{
  width:62px !important;
  height:24px !important;
  max-width:62px;max-height:24px;
  flex-shrink:0;opacity:.85;
}
.stat-delta{
  font-size:11px;color:var(--txt3);font-weight:500;margin-top:6px;
  display:flex;align-items:center;gap:4px;
}
.stat-delta strong{font-weight:700}
.stat-delta.up    strong{color:var(--ok-txt, #085041)}
.stat-delta.down  strong{color:var(--err-txt, #A32D2D)}
.stat-delta.flat  strong{color:var(--txt3)}

/* ── Chart row (3 up) ─────────────────────────────────────── */
.chart-row{
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:10px;
}
.chart-card{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);
  padding:14px 16px;display:flex;flex-direction:column;
}
.chart-card-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.chart-card-title{
  font-size:12px;font-weight:700;color:var(--txt);
}
.chart-legend{display:flex;gap:10px;font-size:10px;color:var(--txt2)}
.chart-legend i{
  display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;
  vertical-align:middle;
}
.chart-canvas-wrap{
  flex:1;min-height:160px;position:relative;
}
.chart-canvas-wrap canvas{max-height:200px}

/* ── Funnel ──────────────────────────────────────────────── */
.funnel-rows{display:flex;flex-direction:column;gap:7px;flex:1}
.funnel-row{}
.funnel-row-meta{
  display:flex;align-items:center;justify-content:space-between;
  font-size:10px;margin-bottom:3px;
}
.funnel-row-label{color:var(--txt2);font-weight:600}
.funnel-row-count{color:var(--txt3);font-weight:500}
.funnel-row-drop{color:var(--err);margin-left:4px;font-weight:600}
.funnel-bar{
  height:18px;background:var(--card2);border-radius:3px;overflow:hidden;
}
.funnel-bar-fill{
  height:100%;border-radius:3px;transition:width .3s;
}
.funnel-callout{
  margin-top:10px;padding-top:8px;border-top:1px solid var(--bdr);
  font-size:10px;color:var(--txt3);
}
.funnel-callout strong{color:var(--txt2);font-weight:600}
.funnel-empty{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--txt3);font-style:italic;padding:30px;
}

/* ── Lead sources ─────────────────────────────────────────── */
.sources-wrap{
  display:flex;align-items:center;gap:18px;flex:1;
}
.sources-donut-wrap{
  position:relative;width:96px;height:96px;flex-shrink:0;
}
.sources-donut-wrap canvas{width:96px !important;height:96px !important}
.sources-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
}
.sources-center-num{
  font-size:22px;font-weight:700;color:var(--txt);
  font-variant-numeric:tabular-nums;line-height:1;
}
.sources-center-lbl{
  font-size:9px;color:var(--txt3);margin-top:2px;
  text-transform:uppercase;letter-spacing:.04em;
}
.sources-legend{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:8px;
}
.sources-legend-row{
  display:flex;flex-direction:column;gap:3px;
}
.sources-legend-row-top{
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;
}
.sources-legend-row .src-name{
  display:flex;align-items:center;gap:6px;color:var(--txt2);
  font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.sources-legend-row .src-name i{
  width:8px;height:8px;border-radius:2px;display:inline-block;flex-shrink:0;
}
.sources-legend-row .src-count{
  color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:11px;flex-shrink:0;margin-left:8px;
}
.sources-legend-row .src-count .src-pct{
  color:var(--txt3);font-weight:500;margin-left:4px;
}
.sources-legend-bar{
  height:4px;background:var(--card2);border-radius:2px;overflow:hidden;
}
.sources-legend-bar-fill{
  height:100%;border-radius:2px;transition:width .3s;
}

/* ── Team comparison ─────────────────────────────────────── */
.team-card{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);
  padding:14px 18px;
}
.team-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;gap:12px;flex-wrap:wrap;
}
.team-title{font-size:13px;font-weight:700;color:var(--txt)}
.team-sub{font-size:11px;color:var(--txt3);margin-top:2px}
.team-controls{display:flex;align-items:center;gap:8px}
.team-controls-label{font-size:11px;color:var(--txt3)}
.team-controls select{
  height:28px;font-size:11px;font-weight:600;
  padding:0 24px 0 10px;border-radius:4px;
  border:1px solid var(--bdr);background:var(--card2);color:var(--txt);
  font-family:inherit;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 6px center;background-size:11px;
}
.team-canvas-wrap{height:220px;position:relative}
.team-canvas-wrap canvas{max-height:220px}
.team-legend{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:10px;
}
.team-legend-item{
  display:flex;align-items:center;gap:6px;font-size:11px;cursor:pointer;
  padding:3px 8px;border-radius:4px;transition:background .15s;
  user-select:none;
}
.team-legend-item:hover{background:var(--card2)}
.team-legend-item.muted{opacity:.4}
.team-legend-item .leg-av{
  width:18px;height:18px;border-radius:50%;
  color:#fff;font-size:9px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
}
.team-legend-item .leg-name{color:var(--txt);font-weight:600}
.team-legend-item .leg-total{color:var(--txt3)}
.team-legend-item .leg-trend{font-weight:700;font-size:10px}
.team-legend-item .leg-trend.up   {color:var(--ok-txt, #085041)}
.team-legend-item .leg-trend.down {color:var(--err-txt, #A32D2D)}
.team-legend-item .leg-trend.flat {color:var(--txt3)}
.team-empty{
  height:220px;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--txt3);font-style:italic;
}

/* ── Top movers ──────────────────────────────────────────── */
.movers-card{
  background:var(--card);border:1px solid var(--bdr);border-radius:var(--r2);
  padding:14px 18px;
}
.movers-title{font-size:13px;font-weight:700;color:var(--txt);margin-bottom:12px}
.movers-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:18px}
.movers-section-head{
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  margin-bottom:8px;
}
.movers-section-head.success{color:var(--ok-txt, #085041)}
.movers-section-head.danger {color:var(--err-txt, #A32D2D)}
.movers-list{display:flex;flex-direction:column;gap:0}
.movers-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 0;border-bottom:1px solid var(--bdr);font-size:12px;
  cursor:pointer;transition:background .15s;
}
.movers-row:hover{background:var(--card2)}
.movers-row:last-child{border-bottom:none}
.movers-row-left{
  display:flex;align-items:center;gap:8px;min-width:0;flex:1;
}
.movers-row-av{
  width:18px;height:18px;border-radius:50%;background:var(--p);
  color:#fff;font-size:9px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.movers-row-av.unassigned{background:var(--txt3)}
.movers-row-name{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.movers-row-name strong{font-weight:700;color:var(--txt)}
.movers-row-name span{color:var(--txt3);margin-left:4px}
.movers-row-right{
  font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--txt2);flex-shrink:0;margin-left:8px;
}
.movers-row.win  .movers-row-right{color:var(--ok-txt, #085041)}
.movers-row.lost .movers-row-right{color:var(--err-txt, #A32D2D)}
.movers-row.abandoned .movers-row-right{color:var(--txt3)}
.movers-empty{
  padding:14px 4px;font-size:11px;color:var(--txt3);
  font-style:italic;
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 1100px){
  .stat-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .chart-row{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .chart-row > .chart-card:nth-child(3){grid-column:1/-1}
}
@media (max-width: 720px){
  .stat-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .chart-row{grid-template-columns:minmax(0, 1fr)}
  .movers-grid{grid-template-columns:minmax(0, 1fr)}
  .an-topbar{flex-direction:column;align-items:flex-start}
  .an-topbar-right{width:100%;justify-content:space-between}
}