/* ============================================================================
   report-viz.css · 报告可视化增强样式（报告专属 · 全站共用 styles.css 之外的增量层）
   ----------------------------------------------------------------------------
   引入位置：category.html / inventory.html / zerofactory.html（report.js 所在页面）
   设计原则：
     1. 🔴 只做「增量」与「同优先级覆盖」，绝不改 styles.css（styles.css 被全站 21 页共用，
        动它等于动首页）。本文件全部选择器都带 .report / .rep- / .rv- 前缀做命名空间隔离。
     2. 零 JS 依赖：报告导出的是静态 HTML（导出 Word/HTML 后不含脚本），因此
        悬停提示、占比标注、图例一律用纯 CSS 与内联属性实现。
     3. 主题跟随：颜色全部走 CSS 变量（--ink/--white/--brand…），不写死深浅色。
   ============================================================================ */

/* ── 1. 条形图：真实占比口径 ────────────────────────────────────────────────
   背景：原实现把所有 bar-row 按「本组最大值」缩放到满格 —— 数字对，视觉撒谎
        （范围一 1190 / 范围二 10 / 范围三 0 时，范围二条宽仅 0.8%，却仍是一条可见的条子；
         而三范围均等 400/400/400 时三条全是 100.0%）。
   现在：report.js 改按「总量」缩放，条内追加真实占比徽标，并在条上加数据点悬停。 */
.report .bar-row .bt{ position:relative; }
.report .bar-row .bt i{ position:relative; }

/* 条上真实占比徽标（紧跟条尾，若条太短则由 JS 侧用 .bt-pct.out 靠右） */
.report .bt-pct{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:700; color:var(--ink-2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  pointer-events:none; padding:0 4px;
}
.report .bt-pct.in{ right:6px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35); }
.report .bt-pct.out{ right:-42px; }

/* 条形图悬停：整行高亮 + 原生 title 之外再给一层视觉反馈 */
.report .bars .bar-row{ border-radius:8px; padding:3px 6px; margin:-3px -6px; transition:background .18s ease; }
.report .bars .bar-row:hover{ background:rgba(10,132,255,.05); }
.report .bars .bar-row:hover .bt i{ filter:saturate(1.2) brightness(1.03); }

/* ── 2. 条形图统一图例（范围配色语义说明） ─────────────────────────────── */
.rv-legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
  margin:2px 0 10px; font-size:12px; color:var(--ink-2);
}
.rv-legend span{ display:inline-flex; align-items:center; gap:6px; }
.rv-legend i{ width:20px; height:9px; border-radius:4px; display:inline-block; flex:none; }
.rv-legend .rv-legend-note{ color:var(--ink-3); font-size:11.5px; }

/* ── 3. 卡片数值视觉层级（原 .rep-row 数值与标签字号接近，重点不跳） ───── */
.report .rep-card-h{ letter-spacing:-.2px; }
.report .rep-row b{
  font-size:15px; font-weight:700; letter-spacing:-.2px;
  font-variant-numeric:tabular-nums;
}
.report .rep-row.total b{ font-size:16.5px; color:var(--brand-d); }
.report .rep-card.c-1 .rep-row.total b{ color:var(--warn-d); }
.report .rep-card.c-2 .rep-row.total b{ color:var(--blue-d); }
.report .rep-card.c-3 .rep-row.total b{ color:var(--brand-d); }

/* ── 4. 环形图：零数据占位态（原来是空白圆环，客户以为页面坏了） ───────── */
.rv-donut-empty{ flex:none; text-align:center; }
.rv-donut-empty svg{ display:block; margin:0 auto; }
.rv-donut-empty .rv-empty-t{ font-size:12.5px; font-weight:700; fill:var(--ink-2); }
.rv-donut-empty .rv-empty-s{ font-size:10.5px; fill:var(--ink-3); }
.rv-donut-empty .rv-empty-hint{
  margin-top:8px; font-size:12px; color:var(--ink-3); max-width:190px;
  line-height:1.5; margin-left:auto; margin-right:auto;
}

/* ── 5. 排放源贡献度排行（新图） ───────────────────────────────────────── */
.rv-rank{ display:flex; flex-direction:column; gap:8px; margin:10px 0 4px; }
.rv-rank-row{ display:grid; grid-template-columns:26px 1fr; gap:10px 12px; align-items:center; }
.rv-rank-no{
  width:22px; height:22px; border-radius:7px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(180deg,#9aa4b2,#7d8695);
}
.rv-rank-row:nth-child(1) .rv-rank-no{ background:linear-gradient(180deg,#ffb340,#ff9f0a); }
.rv-rank-row:nth-child(2) .rv-rank-no{ background:linear-gradient(180deg,#5eb0ff,#0a84ff); }
.rv-rank-row:nth-child(3) .rv-rank-no{ background:linear-gradient(180deg,#5cdc82,#30d158); }
.rv-rank-body{ display:grid; grid-template-columns:1fr; gap:4px; }
.rv-rank-top{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:13.5px; }
.rv-rank-name{ font-weight:600; color:var(--ink-1); }
.rv-rank-scope{
  font-size:11px; font-weight:700; padding:1px 6px; border-radius:6px;
  background:var(--chip); color:var(--ink-2);
}
.rv-rank-val{ margin-left:auto; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
.rv-rank-val small{ font-weight:600; color:var(--ink-2); }
.rv-rank-more{
  margin-top:6px; font-size:12.5px; color:var(--ink-2);
  padding:7px 10px; background:var(--surface-2); border-radius:9px;
  border:1px dashed var(--line-2);
}

/* ── 6. 环比 / 同比对比条（新图） ─────────────────────────────────────── */
.rv-cmp{ display:grid; gap:10px; margin:10px 0 4px; }
.rv-cmp-row{
  display:grid; grid-template-columns:88px 1fr 128px; gap:10px; align-items:center;
  font-size:13.5px;
}
.rv-cmp-row .rv-cmp-k{ color:var(--ink-2); font-weight:600; }
.rv-cmp-track{ height:12px; background:var(--bar-track); border-radius:980px; overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08); position:relative; }
.rv-cmp-track i{ display:block; height:100%; border-radius:980px; position:relative; }
.rv-cmp-track i.cur{ background:linear-gradient(90deg,#0071e3,#0a84ff); }
.rv-cmp-track i.prev{ background:linear-gradient(90deg,#c7ccd6,#a8aeb9); }
.rv-cmp-v{ text-align:right; font-variant-numeric:tabular-nums; font-weight:700; color:var(--ink); }
.rv-cmp-delta{ display:inline-flex; align-items:center; gap:4px; font-weight:800; font-size:13px; }
/* 中国习惯：涨=红、跌=绿（排放上升即风险→红；下降即改善→绿） */
.rv-cmp-delta.up{ color:#e0342a; }
.rv-cmp-delta.down{ color:#0a8f45; }
.rv-cmp-delta.flat{ color:var(--ink-3); }
.rv-cmp-head{
  display:flex; flex-wrap:wrap; gap:6px 16px; align-items:center;
  font-size:12px; color:var(--ink-2); margin-bottom:2px;
}
.rv-cmp-head i{ width:20px; height:9px; border-radius:4px; display:inline-block; }
.rv-cmp-head i.cur{ background:linear-gradient(90deg,#0071e3,#0a84ff); }
.rv-cmp-head i.prev{ background:linear-gradient(90deg,#c7ccd6,#a8aeb9); }

/* ── 7. 行业基准对标（新图） ───────────────────────────────────────────── */
.rv-bench{ display:grid; gap:11px; margin:10px 0 4px; }
.rv-bench-row{ display:grid; grid-template-columns:1fr; gap:5px; }
.rv-bench-top{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font-size:13.5px; }
.rv-bench-top b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.rv-bench-top .rv-bench-tag{
  font-size:11px; font-weight:700; padding:1px 7px; border-radius:6px;
}
.rv-bench-tag.ok{ background:rgba(48,209,88,.14); color:#0a8f45; }
.rv-bench-tag.warn{ background:rgba(255,159,10,.16); color:#9a6200; }
.rv-bench-tag.bad{ background:rgba(255,69,58,.14); color:#c0271d; }
.rv-bench-track{
  position:relative; height:14px; background:var(--bar-track); border-radius:980px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
.rv-bench-fill{ position:absolute; left:0; top:0; height:100%; border-radius:980px; }
.rv-bench-fill.ok{ background:linear-gradient(90deg,#30d158,#28a949); }
.rv-bench-fill.warn{ background:linear-gradient(90deg,#ffb340,#ff9f0a); }
.rv-bench-fill.bad{ background:linear-gradient(90deg,#ff6961,#ff453a); }
.rv-bench-mark{
  position:absolute; top:-3px; bottom:-3px; width:2px; border-radius:2px;
  background:var(--ink-1); box-shadow:0 0 0 2px rgba(255,255,255,.85);
}
.rv-bench-mark::after{
  content:attr(data-label); position:absolute; top:-17px; left:50%; transform:translateX(-50%);
  font-size:10.5px; font-weight:700; color:var(--ink-2); white-space:nowrap;
}
.rv-bench-scale{
  display:flex; justify-content:space-between; font-size:10.5px;
  color:var(--ink-3); margin-top:14px;
}

/* ── 8. 驾驶舱外壳：略收紧间距 + 数值跳度 ─────────────────────────────── */
.report .rep-dash{ box-shadow:var(--shadow-sm); }
.report .rep-dash > .rep-cards{ min-width:0; }

/* ── 9. 章节装饰字母：空框兜底（report.js 侧已按标题首字填充，此处防漏） ── */
.report .esg-letter:empty{ background:linear-gradient(180deg,#c7ccd6,#a8aeb9); }

/* ── 10. 打印 / 导出一致性 ─────────────────────────────────────────────── */
@media print{
  .report .bars .bar-row:hover{ background:none; }
  .rv-cmp, .rv-rank, .rv-bench{ break-inside:avoid; }
}