/* ===== 数据看板：KPI 磁贴 / 图表容器 / 状态条 ===== */

/* ---------- KPI 磁贴：小标签 → 大数字 → 副说明 ---------- */
.kpi {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  min-width: 0;
  transition: transform .2s, box-shadow .2s;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi-label { font-size: 12px; color: var(--hint); }
.kpi-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 2px 0 2px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi-note { font-size: 11px; color: var(--hint); }

/* 数字语义着色。色值同 js/charts/theme.js 的 chartColor。 */
.kpi-value.primary { color: var(--primary); }
.kpi-value.success { color: var(--success); }
.kpi-value.danger { color: var(--danger); }
.kpi-value.warning { color: var(--warning); }
.kpi-value.muted { color: var(--hint); }

/* ---------- 卡片标题行 ---------- */
/* 标题在左、粒度切换在右。.mode-switch 自带 margin-left:auto 与 flex:none，
   所以这一层只要把它们摆成一行；挤不下时整组换行，换行后它独占一行并靠右，
   比把标题和按钮各压成两行小字好读。
   margin-bottom 补的是 layout.css:202 那句 `.chart-card h3{margin:0 0 2px}`——
   标题包进这一层之后由容器接管间距，所以下面要把它清零，否则两处叠加。 */
.chart-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 2px;
}
.chart-card-head h3 { margin: 0; }

/* ---------- 图表宿主 ---------- */
/* 高度一律用固定 px，**不要换成 vh/dvh**：canvas 只在 resize 事件里跟着更新，
   而 dvh 会因为移动端地址栏收展在"没有 resize 事件"的情况下改变宿主高度，
   于是画布永远比宿主矮一截、且不会自愈。 */
.chart-host { width: 100%; height: 240px; }
.chart-card.wide .chart-host { height: 280px; }

@media (max-width: 640px) {
  /* 横向被压扁之后 240px 显得过高，虚线框里内容更瘦长 */
  .chart-host { height: 200px; }
  .chart-card.wide .chart-host { height: 220px; }
}

/* 无数据时居中一句灰字，而不是留一张空坐标轴 */
.chart-empty {
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-sm);
  color: var(--hint);
  font-size: 13px;
}

/* ---------- 看板状态条 ---------- */
.dashboard-status {
  margin: 0 0 16px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  background: var(--neutral-soft);
  color: var(--muted);
}
.dashboard-status.ok { background: var(--success-soft); color: var(--success-ink); }
/* 读取失败给结论，不留白 */
.dashboard-status.error { background: #fff1f2; color: var(--danger-ink); }