/* 销售漏斗 */
.funnel { margin-top:6px; }
.fn-row { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.fn-bar-wrap { flex:1; display:flex; justify-content:center; }
.fn-bar { background:linear-gradient(90deg,#1a5fd0,#5b9bff); height:30px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:600; min-width:70px; box-shadow:0 2px 6px rgba(26,95,208,.18); }
.fn-meta { width:150px; text-align:right; color:#556; font-size:13px; }

/* ===== 报表统计 ===== */
.kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.kpi-card { background:#fff; border-radius:10px; border:1px solid var(--line); padding:18px 20px; cursor:pointer; transition:box-shadow .15s, transform .1s, border-color .15s; }
.kpi-card:hover { box-shadow:0 4px 14px rgba(22,100,255,.12); border-color:#c8d7f5; transform:translateY(-1px); }
.kpi-lbl { font-size:13px; color:var(--muted); margin-bottom:6px; }
.kpi-num { font-size:26px; font-weight:800; color:var(--blue); }
.report-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.report-card { background:#fff; border-radius:10px; border:1px solid var(--line); padding:18px 20px; }
.report-title { font-size:15px; font-weight:700; color:#1c2c4e; display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.report-title .ico { font-size:18px; }
.report-title .sub { font-size:12px; color:var(--muted); font-weight:400; margin-left:6px; }

/* 销售漏斗（SVG 漏斗形态，每行：阶段名 + 梯形条带 + 金额；不同阶段不同色） */
.fnl-row { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.fnl-lbl { width:80px; color:#333; font-size:13px; text-align:right; flex:0 0 80px; font-weight:600; }
.fnl-svg { flex:1; height:36px; min-width:100px; }
.fnl-amt { width:120px; text-align:right; color:#444; font-size:13px; font-weight:600; }

/* 客户状态环形图 */
.donut-wrap { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.donut { width:200px; height:200px; }
.donut .dn-num { font-size:26px; font-weight:800; fill:#1c2c4e; }
.donut .dn-lbl { font-size:11px; fill:var(--muted); }
.donut-leg { display:flex; flex-direction:column; gap:8px; flex:1; min-width:160px; }
.leg-item { display:flex; align-items:center; gap:8px; font-size:13px; color:#444; }
.leg-item i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.leg-item b { color:#1c2c4e; margin-left:auto; font-weight:700; }

/* 客户来源柱图 */
.bars .bar-row { display:flex; align-items:center; margin-bottom:10px; font-size:13px; }
.bars .bar-lbl { width:90px; color:#444; }
.bars .bar-track { flex:1; background:#eef1f6; border-radius:6px; height:20px; overflow:hidden; }
.bars .bar-fill { height:100%; background:linear-gradient(90deg,#1a5fd0,#5b9bff); }
.bars .bar-val { width:60px; text-align:right; color:#444; font-weight:600; }

/* 业绩排行（前 8，每人多条进度：赢单/回款/利润） */
.rank { display:flex; flex-direction:column; gap:14px; }
.rank-row { display:flex; align-items:center; gap:12px; font-size:13px; }
.rank-no { width:22px; height:22px; border-radius:4px; background:#eef1f6; color:#556; display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 22px; }
.rank-no-1 { background:#fff3cd; color:#b58900; }
.rank-no-2 { background:#e8eaec; color:#7a7e85; }
.rank-no-3 { background:#fde6c8; color:#b9580c; }
.rank-name { width:70px; color:#1c2c4e; font-weight:600; flex:0 0 70px; }
.rank-bars { flex:1; display:flex; flex-direction:column; gap:5px; }
.rank-bar-row { display:flex; align-items:center; gap:8px; }
.rank-bar-label { width:30px; flex:0 0 30px; color:var(--text3); font-size:11px; text-align:right; }
.rank-bar-wrap { flex:1; background:#eef1f6; border-radius:4px; height:10px; overflow:hidden; }
.rank-bar { height:100%; border-radius:4px; cursor:help; }
.rank-bar.won { background:linear-gradient(90deg,#1a5fd0,#5b9bff); }
.rank-bar.payment { background:linear-gradient(90deg,#10b981,#34d399); }
.rank-bar.profit { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
.rank-bar:hover { filter:brightness(1.06); }
.rank-amt { width:120px; text-align:right; color:#1c2c4e; font-weight:700; }
.rank-amt small { display:block; color:var(--muted); font-size:11px; font-weight:400; margin-top:2px; }
/* 业绩排行星图例 */
.rank-legend { display:flex; gap:18px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--text2); }
.rank-legend span { display:flex; align-items:center; gap:6px; }
.rank-legend i { width:12px; height:12px; border-radius:3px; display:inline-block; }
.rank-legend .won { background:linear-gradient(90deg,#1a5fd0,#5b9bff); }
.rank-legend .payment { background:linear-gradient(90deg,#10b981,#34d399); }
.rank-legend .profit { background:linear-gradient(90deg,#f59e0b,#fbbf24); }
/* 业绩排行：目标标尺说明（2026-09-12：进度条锚定固定月/季/年目标，非相对峰值） */
.rank-target-note { margin-top:8px; font-size:12px; color:var(--text3); }

/* 业绩明细表 */
.rpt-tb th, .rpt-tb td { padding:10px 14px; font-size:13px; }
.rpt-tb th { background:#f7f9fc; color:#556; font-weight:600; }

/* 报表统计页：时间工具栏 + KPI 一栏吸顶（下滑时固定，仅报告卡片滚动） */
/* （吸顶样式已统一到 .page-sticky/.rep-sticky 规范，见顶部「吸顶规范」） */

@media (max-width:900px){
  .kpi-row { grid-template-columns:repeat(2,1fr); }
  .report-grid { grid-template-columns:1fr; }
}
/* ===== 报表统计：费用月度柱状图 ===== */
/* 关键修复（2026-09-11）：align-items 必须是 stretch，不能是 flex-end。
   原因：.month-col 只有靠拉伸才会得到「容器全高」（144px），它内部的 .month-track 才有
   flex:1 可分的剩余空间。写成 align-items:flex-end 时 .month-col 高度退化为「内容高度」，
   剩余空间恒为 0 → .month-track 塌陷成 0 → 柱子只剩 .month-fill 的 min-height:2px，
   12 根柱子全长成 2px 细线；而 DOM 里 title/data 都正确（实测 09 月 title=¥25,177、
   inline height=100%，但实际渲染高度 2px），所以肉眼像「没有数据」，实际是有数据画不出来。
   语义未变：各列结构一致（轨道 + 月份标签），底部天然对齐。 */
.months { display:flex; align-items:stretch; gap:6px; height:160px; padding:8px 0; }
.month-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.month-track { width:60%; flex:1; min-height:0; background:#f0f3f7; border-radius:4px 4px 0 0; display:flex; align-items:flex-end; position:relative; }
.month-fill { width:100%; background:linear-gradient(180deg,#993556,#72243e); border-radius:4px 4px 0 0; min-height:2px; transition:height .3s; }
.month-lbl { font-size:11px; color:var(--text3); }

/* ===== 工单人员效能：每日处理时长热力表（2026-09-08） ===== */
.heat-wrap { overflow-x:auto; padding-bottom:6px; }
.heat-tb { border-collapse:collapse; }
/* 关键修复（2026-09-11）：必须显式关闭表头吸顶，否则会被「表头卡在半空」坑掉。
   原因链：① components.css:118 的 `.content table thead th`（特异性 0-1-3）对全站所有
   table 生效；② 本文件 `.heat-tb th`（0-1-1）没声明 position，压不过它，sticky 照常生效；
   ③ `.heat-wrap` 的 overflow-x:auto 会让 overflow-y 一并算成 auto（CSS 规范），
   于是它成为滚动容器，thead 的 sticky 参照系由 .content 变成 .heat-wrap；
   ④ --hdr-off = `.rep-sticky` 实测高度（报表页双层吸顶，约 190px），远超本表自身高度（约 90px）。
   结果：表头被压到表格底部、且带不透明底色 #f7f9fc，把最后一行数据（刘振）整个盖住。
   本表只有 1 行表头 + ≤2 行数据，本就无需吸顶，故按 components.css:31 既有惯例直接关闭。
   特异性 .heat-wrap .heat-tb thead th (0-2-2) > (0-1-3)，可稳定覆盖全局规则。 */
.heat-wrap .heat-tb thead th { position:static; box-shadow:none; }
.heat-tb th { font-size:11px; font-weight:600; color:#556; text-align:center; padding:2px 2px; white-space:nowrap; }
.heat-tb td { padding:2px 2px; }
.heat-tb th.hm-name,
.heat-tb td.hm-name { text-align:left; white-space:nowrap; padding-right:12px; font-size:13px; font-weight:600; color:#1c2c4e; }
.heat-cell { width:44px; height:30px; line-height:30px; border-radius:5px; text-align:center; font-size:11px; font-weight:600; }
.heat-leg { display:flex; align-items:center; gap:4px; margin-top:10px; font-size:12px; color:var(--text3); }
.heat-leg i { display:inline-block; width:16px; height:12px; border-radius:3px; }

/* ===== 处理时长分析（A+B：汇总卡片 + 自适应柱状图）===== */
.eff-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.eff-card { background:#f8fafd; border:1px solid var(--line); border-radius:10px; padding:13px 15px; }
.eff-card .ek { font-size:12px; color:var(--muted); margin-bottom:5px; }
.eff-card .ev { font-size:23px; font-weight:800; color:var(--blue); line-height:1.1; }
.eff-card .ev small { font-size:13px; font-weight:600; color:var(--muted); margin-left:3px; }
.eff-card .es { font-size:11px; color:var(--muted); margin-top:5px; }
.eff-bar-col { display:flex; flex-direction:column; align-items:center; flex:1 0 auto; min-width:44px; height:100%; justify-content:flex-end; }
.eff-chart { display:flex; align-items:flex-end; gap:10px; height:230px; padding:8px 2px 0; border-bottom:1px solid var(--line); overflow-x:auto; }
.eff-bar-col .eff-bar-v { font-size:12px; font-weight:600; color:#1c2c4e; margin-bottom:4px; white-space:nowrap; }
.eff-bar-col .eff-bar { width:30px; border-radius:6px 6px 0 0; background:linear-gradient(180deg,#5b9bff,#1a5fd0); position:relative; transition:filter .15s; cursor:pointer; }
.eff-bar-col .eff-bar:hover { filter:brightness(1.08); }
.eff-bar-col .eff-bar-l { margin-top:7px; font-size:11px; color:var(--muted); white-space:nowrap; }
.eff-tip { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#222; color:#fff; font-size:11px; padding:4px 8px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; margin-bottom:6px; z-index:5; }
.eff-bar-col .eff-bar:hover .eff-tip { opacity:1; }
@media (max-width:820px){ .eff-cards { grid-template-columns:repeat(2,1fr); } }