/* ─────────────────────────────────────────────────────────────
 * styles/reports.css — PageReports 圖表配色與元件
 *
 * 為什麼存在：原本 PageReports 全部圖表都用單色（jade 或 ink），
 * 連續看會視覺疲勞。本檔提供 6 色色盲友善 palette（HSL 平衡）
 * 給 bar / donut / legend 循環套用，僅在報表頁生效，不影響
 * 主品牌 token（紙底 / 朱 / jade / ink 仍由 horizon.css 主控）。
 *
 * 整合：由 PM 在 index.html line 13 後加
 *   <link rel="stylesheet" href="styles/reports.css"/>
 * ───────────────────────────────────────────────────────────── */

:root {
  /* 6 色 chart palette — 色盲友善 HSL 平衡 */
  --chart-jade:     #3F6A5E;   /* 主，自家 */
  --chart-cinnabar: #B85042;   /* 朱，警示 / 協力廠商 */
  --chart-gold:     #C99838;   /* 金，收益 */
  --chart-indigo:   #5A6BA8;   /* 青藍，趨勢 */
  --chart-clay:     #A47864;   /* 陶土，中性 */
  --chart-sage:     #8AAB7E;   /* 鼠尾草，輔助 */

  /* -soft 版本 rgba(0.15)，做背景 / hover / 弱化態 */
  --chart-jade-soft:     rgba(63, 106, 94, 0.15);
  --chart-cinnabar-soft: rgba(184, 80, 66, 0.15);
  --chart-gold-soft:     rgba(201, 152, 56, 0.15);
  --chart-indigo-soft:   rgba(90, 107, 168, 0.15);
  --chart-clay-soft:     rgba(164, 120, 100, 0.15);
  --chart-sage-soft:     rgba(138, 171, 126, 0.15);
}

/* ── Bar：循環色 c-1..c-6 ──────────────────────────── */
.hz-chart-bar {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 2px;
  transition: background .25s ease, height .6s cubic-bezier(0.16, 1, 0.3, 1), opacity .2s;
}
.hz-chart-bar:hover { opacity: 0.85; }

.hz-chart-bar.c-1 { background: var(--chart-jade); }
.hz-chart-bar.c-2 { background: var(--chart-cinnabar); }
.hz-chart-bar.c-3 { background: var(--chart-gold); }
.hz-chart-bar.c-4 { background: var(--chart-indigo); }
.hz-chart-bar.c-5 { background: var(--chart-clay); }
.hz-chart-bar.c-6 { background: var(--chart-sage); }

/* pipe-fill 循環色（產業分布橫條） */
.hz-chart-fill {
  height: 100%;
  border-radius: inherit;
  transition: width .6s ease-out, background .25s;
}
.hz-chart-fill.c-1 { background: var(--chart-jade); }
.hz-chart-fill.c-2 { background: var(--chart-cinnabar); }
.hz-chart-fill.c-3 { background: var(--chart-gold); }
.hz-chart-fill.c-4 { background: var(--chart-indigo); }
.hz-chart-fill.c-5 { background: var(--chart-clay); }
.hz-chart-fill.c-6 { background: var(--chart-sage); }

/* ── Legend：橫向 flex，色塊 + 文字 ─────────────────── */
.hz-chart-legend {
  display: flex;
  flex-wrap: nowrap;
  gap: 14px;
  margin-top: 10px;
  padding: 8px 4px 2px;
  font-size: 11px;
  color: var(--ink-3);
  align-items: center;
}
.hz-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  letter-spacing: 0.02em;
}
.hz-chart-legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  display: inline-block;
}
.hz-chart-legend-swatch.c-1 { background: var(--chart-jade); }
.hz-chart-legend-swatch.c-2 { background: var(--chart-cinnabar); }
.hz-chart-legend-swatch.c-3 { background: var(--chart-gold); }
.hz-chart-legend-swatch.c-4 { background: var(--chart-indigo); }
.hz-chart-legend-swatch.c-5 { background: var(--chart-clay); }
.hz-chart-legend-swatch.c-6 { background: var(--chart-sage); }

/* ── Donut：SVG 容器 + 中央 label ───────────────────── */
.hz-chart-donut {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
  margin: 0 auto;
}
.hz-chart-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.hz-chart-donut-seg {
  fill: none;
  stroke-width: 18;
  transition: stroke-width .25s, opacity .2s;
}
.hz-chart-donut-seg:hover { stroke-width: 22; }
.hz-chart-donut-seg.c-1 { stroke: var(--chart-jade); }
.hz-chart-donut-seg.c-2 { stroke: var(--chart-cinnabar); }
.hz-chart-donut-seg.c-3 { stroke: var(--chart-gold); }
.hz-chart-donut-seg.c-4 { stroke: var(--chart-indigo); }
.hz-chart-donut-seg.c-5 { stroke: var(--chart-clay); }
.hz-chart-donut-seg.c-6 { stroke: var(--chart-sage); }
.hz-chart-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
}
.hz-chart-donut-center .num {
  font-family: 'Cormorant Garamond', 'Noto Serif TC', serif;
  font-size: 26px;
  color: var(--ink);
  line-height: 1;
}
.hz-chart-donut-center .lbl {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* ── 響應式：≤640px legend 換行、bar 高度縮小 ─────── */
@media (max-width: 640px) {
  .hz-chart-legend {
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 10.5px;
  }
  .A .card > .bars { height: 120px !important; }
  .hz-chart-donut { max-width: 180px; }
  .hz-chart-donut-center .num { font-size: 22px; }
}