/* 数据统计专用样式，配合 core.css 使用。项目里没有引图表库，分布与趋势都用 CSS / 内联 SVG 画 */

.scope-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border: 1px solid #d5e8fb; border-radius: 13px; background: #f2f8ff;
  color: var(--primary-deep); font-size: 12px;
}
.scope-chip b { font-weight: 600; }

#mode-note { margin-bottom: 14px; }

.panel { margin-bottom: 14px; }
.panel-body { padding: 16px; }
.grid-2 { display: grid; grid-template-columns: 5fr 7fr; gap: 14px; }
.grid-2 > .panel { margin-bottom: 0; }
.grid-2 + .grid-2, .grid-2 + .panel { margin-top: 14px; }
.panel-heading .head-right { margin-left: auto; }

.rate-cell { display: flex; align-items: center; gap: 9px; }
.rate-cell strong { min-width: 46px; color: var(--text); font-weight: 600; font-size: 13px; }
.rate-cell .track { width: 100%; }

/* ---- 五项：一项一张卡，饼图横排 ---- */
/*
 * 固定五列而不用 auto-fit：五健就是五项，永远是五张卡，
 * 让它们等宽横排才好横着比「哪一项的红色更多」。
 */
.item-pies { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.item-pies > .empty-line { grid-column: 1 / -1; }

.pie-card {
  display: flex; flex-direction: column;
  padding: 14px 14px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: #fff;
}
.pc-head { text-align: center; color: var(--text); font-size: 13px; font-weight: 600; }
.pc-sub { margin-top: 4px; text-align: center; color: var(--light); font-size: 12px; line-height: 1.5; }

.pc-pie { display: grid; place-items: center; padding: 12px 0 9px; }
.pie { width: 126px; height: 126px; display: block; }
/* 白描边把相邻扇形分开；没有它，绿和蓝挨着时看不出分界 */
.pie path { stroke: #fff; stroke-width: 1.5; }
.pie .pie-none { fill: var(--light); font-size: 13px; }
.pc-cap { text-align: center; color: var(--muted); font-size: 12px; }
.pc-cap b { color: var(--text); font-weight: 600; }

.pc-legend { margin-top: 10px; display: grid; gap: 5px; }
.pl-row {
  display: grid; grid-template-columns: 8px 1fr auto 34px;
  align-items: center; gap: 6px; font-size: 12px;
}
.pl-row .sw { width: 8px; height: 8px; border-radius: 2px; }
.pl-row .nm { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-row .vv { color: var(--text); font-weight: 600; }
.pl-row .pp { color: var(--light); text-align: right; }
/* 这一档一个人都没有：留着行让五张卡横向对齐，但整行压暗 */
.pl-row.off .sw { opacity: .3; }
.pl-row.off .vv { color: var(--light); font-weight: 400; }

.pc-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  display: grid; gap: 5px;
}
.pf-line { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; }
.pf-line span { color: var(--muted); }
.pf-line b { color: var(--text); font-weight: 600; }
.pf-line b.bad { color: var(--danger); }
.pf-line b.warn { color: var(--warn); }
.pf-line b.zero { color: var(--light); font-weight: 400; }
/* core.css 里 .track 是定宽 110px 的，卡片里要它撑满一行 */
.pc-foot .track { width: 100%; margin: -1px 0 3px; }

/* ---- 等级分布面板：两种口径两张饼，横排 ---- */
.lv-pies { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- 趋势图（内联 SVG） ---- */
.chart { width: 100%; display: block; }
.chart .grid-line { stroke: #eef0f2; stroke-width: 1; }
.chart .axis-text { fill: #b2b7c3; font-size: 11px; }
.chart .bar-label { fill: #515a6e; font-size: 11px; text-anchor: middle; }
.chart .x-label { fill: #808695; font-size: 11px; text-anchor: middle; }
.chart-legend {
  display: flex; align-items: center; gap: 16px; margin-top: 10px;
  color: var(--muted); font-size: 12px;
}
.chart-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sw { width: 12px; height: 12px; border-radius: 2px; }
.chart-legend .grow { margin-left: auto; }
.chart-note { margin-top: 10px; color: var(--light); font-size: 12px; line-height: 1.7; }

/* ---- 分组对比表 ---- */
.group-table td { height: 56px; vertical-align: middle; }
.group-table .g-name { color: var(--text); font-weight: 500; }
.group-table .g-sub { margin-top: 2px; color: var(--light); font-size: 12px; }
.group-table tr.is-idle td { background: #fcfcfd; }
.group-table tr.is-idle .g-name { color: var(--muted); font-weight: 400; }
.group-table .num { color: var(--text); }
.group-table .zero { color: var(--light); }

/* ---- 计划进度 ---- */
.plan-row { padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.plan-row:first-child { padding-top: 0; }
.plan-row:last-child { padding-bottom: 0; border-bottom: 0; }
.plan-top { display: flex; align-items: center; gap: 8px; }
.plan-top b { color: var(--text); font-weight: 500; font-size: 13px; }
.plan-top .tag { flex: none; }
.plan-top .day { margin-left: auto; color: var(--light); font-size: 12px; flex: none; }
.plan-line { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.plan-line .track { flex: 1; width: auto; height: 8px; }
.plan-line strong { min-width: 46px; color: var(--text); font-weight: 600; font-size: 13px; }
.plan-sub { margin-top: 5px; color: var(--muted); font-size: 12px; }
.plan-sub b { color: var(--text); font-weight: 600; }

/* ---- 五项历年趋势（折线） ---- */
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* 白描边让线上的点在两条线交叉处还看得清是谁的点 */
.chart .dot { stroke: #fff; stroke-width: 1.5; }

/* 图例横排五格，和上面五张饼对齐着读 */
.tl-legend { margin-top: 12px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tl-cell { padding: 8px 10px; border: 1px solid var(--border); border-radius: 4px; background: #fcfdfe; }
.tl-cell.off { opacity: .38; }
.tl-top {
  display: flex; align-items: center; gap: 6px;
  color: var(--text); font-size: 12px; white-space: nowrap;
}
.tl-top .sw { width: 10px; height: 3px; border-radius: 2px; flex: none; }
.tl-bot { margin-top: 5px; display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.tl-bot b { color: var(--text); font-weight: 600; font-size: 14px; }
/* 需跟进率涨了是坏消息，所以向上是红的 */
.tl-bot .up { color: var(--danger); }
.tl-bot .down { color: var(--success); }
.tl-bot .flat { color: var(--light); }

.panel-heading .fh-select { height: 30px; }