/* 数据分析页样式: 配色与后台其它页面统一走品牌粉 #e8657f */
.analytics-body { background: #f5f6f8; padding: 16px; }
.topbar { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 8px; padding: 10px 16px; margin-bottom: 16px; }
.filters { margin-left: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* 顶栏里的 select 复用 admin.css 的 input 观感, 但宽度自适应内容, 不撑满一行 */
/* min-width:0 必留: flex item 默认 min-width:auto, 窄屏下会被 <select> 的固有宽度(由最长 option 决定,
   如 admin.js 自动生成的 "2026秋冬订货会·{代理名}")撑破容器 → 整页横向溢出 */
.f-label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: #666; white-space: nowrap; min-width: 0; }
.f-label select { width: auto; max-width: 200px; margin: 0; padding: 7px 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: #fff; color: #333; min-width: 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* min-width:0 必留: grid item 默认 min-width:auto, 会被 ECharts 按 clientWidth 写死 px 宽度的画布
   撑大轨道 → 画布随之变更宽 → 轨道再被撑大, 整页正反馈越撑越宽(换窗口尺寸/截图时会触发)。
   项目里踩过同类"网格隐式下限"坑, 这里直接堵死 */
/* margin-bottom:0 覆盖 admin.css 的 .card{margin-bottom:12px}: 网格布局里 gap 已经给足了行距,
   两者叠加会变成行距 28px / 列距 16px, 间距不齐 */
.card { background: #fff; border-radius: 8px; padding: 16px; min-width: 0; margin-bottom: 0; }
.card.wide { grid-column: 1 / -1; }
.card-title { font-weight: 700; margin-bottom: 12px; }
/* overflow:hidden 兜底: 万一画布瞬时超出容器, 也只裁掉不外溢, 不会把页面顶宽 */
.chart { height: 320px; overflow: hidden; }
.chart.wide { height: 260px; }
/* ECharts CDN 全挂时的兜底提示(analytics.html 内联 document.write 注入) */
.lib-error { background: #fff3f5; border: 1px solid #f3c6d0; color: #c0395a; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; font-size: 13px; }
/* 图表容器内的降级文案: 库没加载出来时替代空白画布 */
.chart-fallback { display: flex; align-items: center; justify-content: center; height: 100%; color: #bbb; font-size: 14px; text-align: center; padding: 0 20px; }
/* 窄屏单列: 与 admin.css 的 720px 断点保持一致, 两列并排在小屏上会挤成一团 */
@media (max-width: 720px) {
  .analytics-body { padding: 12px; }
  .grid { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; gap: 8px; }
  .filters { margin-left: 0; width: 100%; }
  .f-label select { flex: 1; max-width: none; min-width: 0; }
}
/* ==================== 打印视图(任务15) ====================
   任务14 的教训: 曾用 @media print{ .topbar,.filters{display:none} } —— 打印按 A4 宽重排卡片, 而 canvas
   保留屏幕期的内联像素宽, 被 .chart 的 overflow:hidden 裁掉大半, 产出"看着正常、数据不全"的图。
   任务15 实测结论(Playwright + page.pdf 逐版验证):
   1) 打印样式全部走 CSS, 不对图表做 resize(analytics.js 里已无 beforeprint/afterprint 处理)。
      ⚠️ 9/16 复核更正: 本条原先附带的归因"打印期(含 beforeprint)哪怕只改 document.title 或对 ECharts
      做一次 resize 就会错乱"已被对照实验证伪 —— Playwright 逐像素比对: 改 title / 对实例 resize() /
      打印期重排 vs 屏幕期重排, 全部 0px 差异(实验脚本与产物 /tmp/ddh-print-audit/)。
      "打印期不碰 DOM"作为无副作用的约定予以保留, 但它不是"DOM 一变就坏"的证据, 排障时勿据此排除其他成因。
   2) 正确做法 = 打印时让容器贴合画布: 容器 width/height 自动、overflow 放开, 画布回到文档流。
      画布高度由自身宽高比决定(位图是 dpr 倍, 比例不变), 所以整图等比缩放, 既不裁切也不变形。
   3) max-width:100% 兜底: 屏幕窗口很宽时画布可能宽于纸面, 此时等比缩到纸宽而不是被裁掉右半边。 */
.print-head { display: none; }
@media print {
  /* 纸张与页边距由本页决定(A4): "默认"页边距选项会采用这里的 12mm, 可用宽度 = 210-24 = 186mm ≈ 703px */
  @page { size: A4 portrait; margin: 12mm; }
  .analytics-body { padding: 0; background: #fff; }
  /* 筛选器/导出按钮/降级提示都是屏幕专用的 */
  .topbar, .filters, .btn-plain, .lib-error { display: none !important; }
  .grid { display: block; }
  .card { padding: 10px; min-width: 0; border: 1px solid #ccc; box-shadow: none; margin-bottom: 10px; break-inside: avoid; }
  /* 容器贴合画布(zrender 的根 div 与 canvas 都放开尺寸), 画布回到文档流并按容器宽度等比呈现 */
  .chart, .chart.wide { width: auto; height: auto; overflow: visible; }
  .chart > div { width: auto !important; height: auto !important; }
  .chart canvas { position: static !important; display: block; margin: 0 auto; max-width: 100% !important; height: auto !important; }
  .print-head { display: block; margin-bottom: 10px; }
  .print-head .meta { margin-left: 8px; font-size: 12px; }
}