/* ===== 履歴タイムライン: 名前 | 折りたたみバー | データ列 | 名前(anchor) | Gantt(横スクロール) ===== */
.ch-split { display: flex; border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden; }
.ch-name { flex: 0 0 180px; min-width: 0; overflow: hidden; }
.ch-data { flex: 0 1 auto; min-width: 0; overflow-x: auto; }   /* 内容幅。広げない */
.ch-data.folded { flex: 0 0 0 !important; width: 0; overflow: hidden; }
.ch-gantt { flex: 1 1 300px; min-width: 0; background: #fafafa; overflow-x: auto; }  /* 残り幅を占有 */
.ch-gantt-inner { position: relative; }   /* 横幅は JS が時間スパンに応じて設定 */

/* 細い折りたたみバー(独立した1列。キャンペーン名の右、データ列をまとめて畳む) */
.ch-foldbar { flex: 0 0 16px; background: #f1f3f5; cursor: pointer; display: flex;
  align-items: flex-start; justify-content: center; padding-top: 8px; color: #c2185b;
  font-size: 11px; border-right: 1px solid #dee2e6; user-select: none; }
.ch-foldbar:hover { background: #e9ecef; }

.ch-table { border-collapse: collapse; font-size: 12px; }
/* 名前列はペイン幅いっぱいで省略表示、データ列は内容幅(無駄に広げない) */
.ch-name .ch-table { width: 100%; table-layout: fixed; }
.ch-data .ch-table { width: auto; table-layout: auto; }
.ch-table th, .ch-table td { border-bottom: 1px solid #eef0f2; padding: 4px 10px;
  height: 34px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-table th { background: #fce4ec; position: sticky; top: 0; }
.ch-table tr.hl td { background: #fff0f6; }
.heat { position: relative; }
.heat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--heat, 0%); background: rgba(194,24,91,.16); z-index: 0; }
.heat > * { position: relative; z-index: 1; }

/* 2段ヘッダ(上=年/下=月、月は省略なし)+ 月境界の薄い縦線 */
.ch-gaxis { height: 34px; border-bottom: 1px solid #e9ecef; position: relative; }
.ch-gaxis-years { position: absolute; top: 0; left: 0; right: 0; height: 16px; border-bottom: 1px solid #f1f3f5; }
.ch-gaxis-months { position: absolute; top: 16px; left: 0; right: 0; height: 18px; }
.ch-gaxis-years span { position: absolute; top: 2px; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; color: #868e96; white-space: nowrap; }
.ch-gaxis-months span { position: absolute; top: 3px; transform: translateX(-50%);
  font-size: 9.5px; color: #adb5bd; white-space: nowrap; }
.ch-grid { position: absolute; top: 34px; bottom: 0; left: 0; right: 0; z-index: 0; pointer-events: none; }
.ch-grid i { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(0,0,0,.05); }
/* 今月マーカー: 軸〜トラックを貫く縦線 + 上端ラベル */
.ch-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1.5px dashed #e8590c; z-index: 2; pointer-events: none; }
.ch-today-lbl { position: absolute; top: 0; left: 0; transform: translateX(-50%); background: #e8590c;
  color: #fff; font-size: 9px; line-height: 1; padding: 1px 3px; border-radius: 2px; white-space: nowrap; }
.ch-gtrack { height: 34px; border-bottom: 1px solid #f1f3f5; position: relative; white-space: nowrap; }
.ch-gtrack.hl { background: #fff0f6; }
/* Gantt 内のキャンペーン名: プロット位置に置く単なるラベル(バーと一緒にスクロール) */
.ch-gtrack-label { position: absolute; top: 0; height: 34px; line-height: 34px;
  font-size: 11px; white-space: nowrap; color: #343a40; z-index: 3; padding-left: 5px;
  pointer-events: none; text-shadow: 0 0 2px #fafafa, 0 0 2px #fafafa, 0 0 2px #fafafa; }
/* プロット = 枠付きゲージ箱。JS が枠色・破線/実線・下からの塗り高さ(割引率5段階)を設定 */
.ch-bar { position: absolute; height: 14px; top: 10px; min-width: 5px; border-radius: 3px;
  background: transparent; border: 1px solid #c2185b; box-sizing: border-box; overflow: hidden; z-index: 1; }
.ch-bar.dashed { border-style: dashed; }
.ch-fill { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; }
/* 恒例まとめビューの散布点 */
.ch-dot { position: absolute; width: 9px; height: 9px; top: 13px; border-radius: 50%; background: #c2185b; z-index: 1; }

/* 色エンコード凡例 */
.ch-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center;
  font-size: 11px; color: #495057; margin: 4px 0 8px; }
.ch-leg-grp { display: inline-flex; align-items: center; gap: 2px; }
.ch-leg-grp > b { font-weight: 600; margin-right: 4px; font-size: 11px; }
.ch-leg-box b { margin: 0; }   /* スウォッチ内の塗りには群名用 margin を効かせない */
.ch-leg-box { position: relative; width: 16px; height: 14px; border: 1px solid; border-radius: 2px;
  display: inline-block; overflow: hidden; box-sizing: border-box; vertical-align: middle; background: #fff; }
.ch-leg-box.dashed { border-style: dashed; }
.ch-leg-box b { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: block; }
.ch-leg-note { color: #868e96; }
/* 凡例クリックフィルタ: スウォッチ/群名は押下可、選択中は枠ハイライト */
.ch-leg-box { cursor: pointer; }
.ch-leg-box.on { outline: 2px solid #c2185b; outline-offset: 1px; }
.ch-leg-toggle { cursor: pointer; }
.ch-leg-toggle.on { color: #c2185b; text-decoration: underline; }

/* section セレクタ: 選択中を明確化 + 横スクロール時も左端に固定 */
.ch-section-bar .dlc-chip.is-selected {
  background: #c2185b; border-color: #c2185b; color: #fff; font-weight: 600;
  box-shadow: 0 0 0 2px rgba(194,24,91,.45);
  position: sticky; left: 0; z-index: 2;
}

/* 個別/恒例 モード選択 (選択状態を明確化) */
.ch-mode { font-weight: 600; }
.ch-mode.is-selected { background: #c2185b !important; color: #fff !important;
  box-shadow: 0 0 0 2px rgba(194,24,91,.45); }
.ch-mode:not(.is-selected) { background: transparent; color: #ced4da; border: 1px solid #6c757d; opacity: .85; }

/* Gantt 月幅ズーム 3段階 */
.ch-zoom { margin-left: auto; color: #e9ecef; font-size: 11px; }
.ch-zchip { border: 1px solid #6c757d; background: transparent; color: #e9ecef; border-radius: 10px;
  padding: 1px 9px; font-size: 11px; margin-left: 4px; cursor: pointer; }
.ch-zchip.on { background: #495057; border-color: #adb5bd; color: #fff; font-weight: 600; }

/* 分類・条件フィルタ chip */
.ch-filterset { margin-top: 6px; color: #e9ecef; font-size: 11px; }
.ch-fchip { border: 1px solid #6c757d; background: transparent; color: #e9ecef; border-radius: 12px;
  padding: 1px 10px; font-size: 11px; margin: 2px 3px; cursor: pointer; }
.ch-fchip.on { background: #c2185b; border-color: #c2185b; color: #fff; }

/* 並び順 chip (単一選択) */
.ch-sortset { margin-top: 6px; color: #e9ecef; font-size: 11px; }
.ch-schip { border: 1px solid #6c757d; background: transparent; color: #e9ecef; border-radius: 12px;
  padding: 1px 10px; font-size: 11px; margin: 2px 3px; cursor: pointer; }
.ch-schip.on { background: #1e88e5; border-color: #1e88e5; color: #fff; font-weight: 600; }
.ch-filter-empty { color: #ffb3c1; font-size: 11px; margin-left: 10px; }

/* 表示列設定パネル (ダーク背景上なので文字を明色に) */
.ch-colset { color: #e9ecef; font-size: 11px; }
.ch-colset label { margin-right: 12px; font-size: 11px; color: #e9ecef; }
.ch-colset-label { color: #e9ecef; font-weight: 600; margin-right: 6px; }