/* =========================================================================
 * 纯 CSS 图表组件样式
 * ========================================================================= */
.chart{width:100%;position:relative}
.chart[style*="pointer"]{transition:opacity .15s}
.chart[style*="pointer"]:hover{opacity:.88}
.chart[style*="pointer"]::after{
  content:'点击查看明细 →';position:absolute;top:8px;right:12px;
  font-size:11px;color:#4361ee;opacity:0;transition:opacity .2s;pointer-events:none;
}
.chart[style*="pointer"]:hover::after{opacity:1}

/* ---- 通用 tooltip ---- */
.chart-tip{
  position:fixed;z-index:9800;display:none;pointer-events:none;
  background:rgba(26,26,46,.94);color:#fff;font-size:12px;line-height:1.7;
  padding:8px 12px;border-radius:8px;max-width:280px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
}
.c-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#9ca3af;font-size:13px}

/* ---- 竖向柱状图 / 堆叠 / 分组：共用骨架 ---- */
.c-barv,.c-stack,.c-group{display:flex;flex-direction:column;height:100%}
.c-grid{
  display:grid;grid-template-columns:52px 1fr;gap:0;
  height:calc(100% - 26px);min-height:0;
}
.c-ygrid{
  grid-column:1;display:flex;align-items:flex-end;justify-content:flex-end;
  padding-right:8px;border-bottom:1px dashed #eceff5;
}
.c-ylab{font-size:11px;color:#9ca3af;line-height:1;transform:translateY(50%)}
.c-plot{
  grid-column:2;display:flex;align-items:stretch;gap:6px;padding:0 4px;min-height:0;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(25% - 1px),#eceff5 calc(25% - 1px),#eceff5 25%);
}
.c-col{flex:1;min-width:0;position:relative;display:flex;align-items:stretch}
.c-colfill{flex:1;display:flex;align-items:flex-end;justify-content:center;min-height:0;position:relative;width:100%}
.c-bar{width:100%;max-width:54px;align-self:flex-end;border-radius:6px 6px 0 0;transition:filter .18s;cursor:pointer}
.c-vlab{
  position:absolute;left:50%;transform:translateX(-50%);
  font-size:10px;color:#6b7280;white-space:nowrap;
  font-variant-numeric:tabular-nums;pointer-events:none;
}
.c-stackel{width:100%;max-width:48px;align-self:stretch;display:flex;flex-direction:column-reverse;justify-content:flex-start}
.c-seg{width:100%;transition:filter .15s;cursor:pointer}
.c-stackel .c-seg:first-child{border-radius:0 0 5px 5px}
.c-stackel .c-seg:last-child{border-radius:5px 5px 0 0}
.c-xaxis{display:flex;gap:6px;padding:6px 4px 0;margin-left:52px;flex-shrink:0;height:26px;align-items:center}
.c-xlab2{flex:1;text-align:center;font-size:11px;color:#6b7280;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- 横向条形图 ---- */
.c-barh{display:flex;flex-direction:column}
.c-bhlist{display:flex;flex-direction:column;gap:6px;flex:1;justify-content:space-around}
.c-bhrow{display:grid;grid-template-columns:minmax(90px,26%) 1fr 62px;align-items:center;gap:10px}
.c-bhname{font-size:12px;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-bhtrack{background:#f1f3f9;border-radius:5px;height:15px;overflow:hidden}
.c-bhbar{height:100%;border-radius:5px;transition:filter .18s;cursor:pointer;min-width:3px}
.c-bhval{font-size:11px;color:#6b7280;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- 环形图 ---- */
.c-donut{display:flex;flex-direction:column;align-items:center;gap:12px}
.c-donutwrap{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.c-donutc{border-radius:50%}
.c-donutc1{position:absolute;font-size:17px;font-weight:700;color:#1a1a2e;pointer-events:none}
.c-donutc2{position:absolute;font-size:11px;color:#9ca3af;pointer-events:none;transform:translateY(18px)}
.c-legend{display:flex;flex-direction:column;gap:6px;width:100%;min-width:0}
.c-lgitem{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:7px;cursor:default;font-size:12px}
.c-lgdot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.c-lgnm{color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-lgv{color:#9ca3af;font-size:11px;font-variant-numeric:tabular-nums}

/* ---- 分组柱状图 ---- */
.c-ggroup{display:flex;align-items:flex-end;gap:3px;width:100%;height:100%;padding:0 4px;justify-content:center}
.c-gbarwrap{flex:1;display:flex;align-items:flex-end;height:100%;max-width:22px}
.c-gbar{width:100%;border-radius:4px 4px 0 0;transition:filter .18s;cursor:pointer}
.c-gbarwrap:hover .c-gbar{filter:brightness(1.2)}

/* 带图例时预留图例高度 */
.c-stack.has-legend .c-grid,.c-group.has-legend .c-grid{height:calc(100% - 58px)}
.c-legend.inline{
  flex-shrink:0;min-height:30px;margin-top:8px;
  display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;
}
.c-legend.inline .c-lgitem{grid-template-columns:9px auto;gap:6px}

/* ---- 热力图 ---- */
.c-heat{overflow-x:auto;padding-bottom:4px}
.c-heatgrid{display:grid;gap:2px;min-width:560px}
.c-heath{font-size:10px;color:#6b7280;text-align:center;padding:5px 2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.c-heatrow{font-size:11px;color:#374151;display:flex;align-items:center;justify-content:flex-end;
  padding-right:8px;white-space:nowrap;font-weight:500}
.c-heatcell{height:30px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  cursor:default;transition:transform .15s;overflow:hidden}
.c-heatcell:hover{transform:scale(1.06);box-shadow:0 3px 10px rgba(0,0,0,.18);z-index:2}
.c-heatcell span{font-size:10px;color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.25);pointer-events:none}
.c-heatbar{display:flex;align-items:center;gap:3px;justify-content:center;margin-top:12px;font-size:11px;color:#9ca3af}
.c-heatbar i{width:20px;height:9px;border-radius:2px;display:inline-block}

@media (max-width:640px){
  .c-grid{grid-template-columns:40px 1fr}
  .c-xaxis{margin-left:40px}
  .c-bhrow{grid-template-columns:minmax(70px,32%) 1fr 52px;gap:7px}
}