/* 積分核算 ▸ 可視化（static/js/viz.js）
 *
 * 只放這個分頁用得到的樣式，類別一律 viz- 開頭，才不會和其他頁的同名類別互相影響。
 * 介面色沿用 style.css 的 :root 變數；資料色（角色、級數、性質、積分分類、發散色）寫在 viz.js，
 * 因為長條、圖例、表格的色鍵要用同一份定義，分兩處寫遲早會對不上。
 */

/* ── 篩選列：在所有圖表上方、作用於下面全部內容，不放進任何一張圖的卡片裡 ── */
.viz-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.viz-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.viz-filter { display: inline-flex; align-items: center; gap: 8px; }
.viz-filter-label { font-size: 13px; color: var(--muted); white-space: nowrap; }
.viz-reset { margin-left: auto; }
.viz-compare-pick { gap: 8px 12px; }
.viz-compare-note { font-size: 12px; color: var(--muted); }
/* 提示「最多 4 位」用較深的橘：--warning 當 12px 小字對白底對比不夠 */
.viz-compare-note.warn { color: #b06000; font-weight: 500; }

/* 計算基礎：兩顆相連的切換按鈕。按下的那顆用主色容器底＋粗體（不只靠顏色），
   外框用 --outline，和旁邊的下拉選單同一個高度感 */
.viz-seg { display: inline-flex; border: 1px solid var(--outline); border-radius: 999px; overflow: hidden; background: var(--surface); }
.viz-seg-btn {
  font: inherit; font-size: 13px; line-height: 1.4; padding: 5px 16px; margin: 0;
  border: 0; background: transparent; color: var(--muted-2); cursor: pointer;
}
.viz-seg-btn + .viz-seg-btn { border-left: 1px solid var(--outline); }
.viz-seg-btn:hover { background: var(--surface-2); color: var(--text); }
.viz-seg-btn[aria-pressed="true"] { background: var(--primary-soft); color: var(--on-primary-container); font-weight: 600; }
/* 外框 overflow: hidden 會切掉往外畫的焦點框，改畫在按鈕內側 */
.viz-seg-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }

/* ── 版面 ──
   區塊之間用 gap 排距。style.css 的 .card + .card 會替相鄰卡片加上邊距，
   並排的兩張小倍數卡就會一高一低，這裡歸零。 */
.viz-body { display: flex; flex-direction: column; gap: 20px; }
.viz-body > .kpi-row { margin-bottom: 0; }
.viz-body > .card + .card,
.viz-pair > .card + .card { margin-top: 0; }
.viz-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* 側欄 244px 之外只剩一千出頭時，並排的兩張圖長條區太窄，改上下疊 */
@media (max-width: 1200px) { .viz-pair { grid-template-columns: minmax(0, 1fr); } }

/* 分組小標（工作分配／積分／家數統計）：上方一條分隔線把組跟組隔開，第一組不畫 */
.viz-section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--border);
}
.viz-body > .viz-section-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.viz-section-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--text); }
.viz-section-sub { font-size: 13px; color: var(--muted); }

/* KPI：數字用文字色、比例字寬（等寬數字在大字上會讓 121 看起來鬆散） */
.viz-kpi .value { color: var(--text); font-variant-numeric: proportional-nums; }
/* 未指派的數字滑鼠停留會列出客戶 */
.viz-kpi[title] { cursor: help; }

/* 卡片是 tooltip 的定位基準 */
.viz-card { position: relative; }
.viz-card-note { margin: 0 0 10px; }

/* ── 圖例：色塊跟長條同形（方塊），文字一律用文字色 ── */
.viz-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; font-size: 12px; color: var(--text); }
.viz-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.viz-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: none; }
/* 啞鈴圖的圖例記號：與圖上同形（空心圈＝應得、實心點＝實得），顏色由 viz.js 帶 */
.viz-mark { display: inline-block; box-sizing: border-box; border-radius: 50%; flex: none; }
.viz-mark-hollow { width: 13px; height: 13px; border: 2px solid; background: transparent; }
.viz-mark-solid { width: 9px; height: 9px; margin: 0 2px; }

/* ── SVG 長條圖 ── */
.viz-chart { width: 100%; }
.viz-svg { display: block; width: 100%; height: auto; font-family: var(--font); }
/* 格線與軸：1px 實線、比表面深一階的灰，退在背景不搶資料 */
.viz-gridline { stroke: #eceff3; stroke-width: 1; }
.viz-baseline { stroke: var(--border); stroke-width: 1; }
.viz-tick { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.viz-label { font-size: 13px; fill: var(--text); }
.viz-total { font-size: 12px; font-weight: 500; fill: var(--text); font-variant-numeric: tabular-nums; }
.viz-group-label { font-size: 13px; font-weight: 600; fill: var(--text); }
/* 淡化的列：長條在 JS 裡已改灰，名字與合計也退成淡灰 */
.viz-row.is-muted .viz-label,
.viz-row.is-muted .viz-total,
.viz-group-label.is-muted { fill: #80868b; font-weight: 400; }
/* 整列帶狀區域是滑鼠命中範圍：平常透明（transparent 仍收得到滑鼠事件，none 就收不到），指到時淡淡浮起 */
.viz-band { fill: transparent; }
.viz-row { outline: none; }
.viz-row.is-active .viz-band { fill: var(--surface-2); }
.viz-row:focus-visible .viz-band { stroke: var(--primary); stroke-width: 2px; }

/* ── tooltip：數值大字在前、名稱在後，系列用短線記號 ── */
.viz-tip {
  position: absolute; z-index: 30; pointer-events: none;
  min-width: 170px; max-width: 280px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); font-size: 12px; color: var(--text);
}
.viz-tip[hidden] { display: none; }
.viz-tip-value { font-size: 20px; font-weight: 600; line-height: 1.25; }
.viz-tip-title { color: var(--muted); margin: 2px 0 8px; }
.viz-tip-line { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; line-height: 1.75; }
.viz-tip-key { width: 12px; height: 3px; border-radius: 2px; }
.viz-tip-num { text-align: right; font-variant-numeric: tabular-nums; }
.viz-tip-line.on { font-weight: 600; }
.viz-tip-line.sum { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); font-weight: 600; }

/* ── 表格（表格檢視、熱度表、比較表） ── */
/* position: relative 讓外框成為表格裡絕對定位元素（例如給報讀器的 .viz-sr）的定位基準：
   否則它們以卡片為基準、跑出可捲動的外框，寬表格（家數統計熱度表）會把整頁撐出橫向捲軸 */
.viz-table-wrap { overflow-x: auto; position: relative; }
.viz-table th, .viz-table td { white-space: nowrap; }
.viz-table thead th.num, .viz-table td.num { text-align: right; }
.viz-table td.num { font-variant-numeric: tabular-nums; }
/* 列名用 th（報讀器才知道這格是列標題），但外觀要跟一般資料格一樣，不要瀏覽器預設的粗體置中 */
.viz-table tbody th, .viz-table tfoot th {
  text-align: left; font-weight: 400; font-size: 14px; padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.viz-table tfoot th { font-weight: 700; background: var(--grand-bg, #dde5ef); border-top: 2px solid var(--subtotal-line, #cbd5e1); }
.viz-table tfoot td { padding: 13px 16px; }
/* 表頭與列名旁的系列色鍵：短線，不讓表格裡出現一排色塊 */
.viz-key { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 8px; vertical-align: middle; }
.viz-row-picked > th, .viz-row-picked > td { font-weight: 700; }
.viz-row-picked > td.cell-mono { color: var(--text); }
/* 比較人員時沒被選的人整列淡化（與圖上把長條改灰同一個用意） */
.viz-table tr.viz-row-dim > th, .viz-table tr.viz-row-dim > td { opacity: .45; }
/* 兩列表頭：上面一列是分區（跨欄置中）、第一欄列名跨兩列貼底 */
.viz-table thead th.viz-colgroup { text-align: center; font-weight: 600; color: var(--text); }
.viz-table thead th[rowspan] { vertical-align: bottom; }

/* 熱度表：格子之間留 2px 表面色間隙（跟堆疊長條同一套分隔方式），深色格字改白 */
.viz-heat th, .viz-heat td, .viz-heat tbody th, .viz-heat tfoot td { padding: 8px 12px; }
.viz-heat thead th.num { text-align: center; }
.viz-heat td.viz-heat-cell {
  min-width: 60px; text-align: center; font-variant-numeric: tabular-nums;
  color: var(--text); border: 2px solid var(--surface);
}
.viz-heat td.viz-heat-dark { color: #fff; font-weight: 600; }
.viz-heat td.viz-heat-zero { color: #b6bfcc; }
.viz-scale { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.viz-scale-item { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
/* 連續色階：色塊之間 2px 間隙排成一條，讀得出是由淺到深的同一個尺度 */
.viz-ramp { display: inline-flex; gap: 2px; }

/* 家數統計的兩張表：欄多、標題長（「外出次數（同集團算一趟）」），表頭允許換行，不然整張表要捲很遠 */
.viz-stat-heat thead th { white-space: normal; line-height: 1.35; vertical-align: bottom; }
.viz-stat-heat thead th.num { min-width: 64px; max-width: 7.5em; }
.viz-stat-heat thead th.viz-colgroup { vertical-align: middle; border-bottom: 1px solid var(--border); }
/* 實得時標在表頭的「依實際完成」：小徽章放在欄名下方 */
.viz-actual-mark {
  display: block; width: fit-content; margin: 4px auto 0; padding: 1px 6px; border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: 0; white-space: nowrap;
  background: var(--primary-soft); color: var(--on-primary-container);
}

/* 比較表：每列最大值用粗體（不用顏色），段落之間一條較粗的分隔線 */
.viz-compare-table td.viz-max { font-weight: 700; color: var(--text); }
.viz-compare-table tr.viz-sep > th,
.viz-compare-table tr.viz-sep > td { border-top: 2px solid var(--border); }

/* 只給報讀器念的文字（熱度表 0 格畫成「·」，但要念成 0） */
.viz-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 積分分配的疑點（2026-09-21）── */
/* 規則線：虛線、中性灰，退在點的後面 */
.viz-refline { stroke: #9aa0a6; stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; }
.viz-ref-label { font-size: 11px; fill: var(--muted); }
.viz-axis-title { font-size: 11px; fill: var(--muted); }
/* 圖例裡的虛線記號（與圖上的規則線同形） */
.viz-mark-dash { display: inline-block; width: 18px; height: 0; border-top: 2px dashed #9aa0a6; flex: none; }
.viz-findings { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; line-height: 1.7; color: var(--text); }