/* bt-report-grid — 結構化 drill-down 四欄 + detail 區
 *
 * Layout:
 *   .bt-report-grid-root
 *   ├── .bt-report-topbar (breadcrumb)
 *   ├── .bt-report-grid (coin | period | bout | round)
 *   └── .bt-report-detail
 *
 * RWD 4-tier:
 *   ≥1280px  : 0.8fr 1.1fr 1fr 1.2fr
 *   1100-1279: 0.8fr 1fr 1fr 1.1fr
 *   900-1099 : 0.8fr 1fr 1fr 1fr
 *   <900     : 單欄 + 麵包屑分頁(.bt-col-focused 才顯示)
 *
 * Plan: docs/plan-20260420-bt-report-coin-column.md(Phase A 加品種維度)
 */

.bt-report-grid-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--panel);
}

/* ── Topbar + Breadcrumb ───────────────────────────────────────── */
.bt-report-topbar {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  font-size: 12px;
  gap: 8px;
  min-height: 30px;
}

.bt-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  overflow-x: auto;
  white-space: nowrap;
  font-weight: 600;
}

.bt-breadcrumb-chip {
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.15s, background 0.15s;
}

.bt-breadcrumb-chip:hover {
  color: var(--text);
  background: var(--panel-2);
}

.bt-breadcrumb-chip.active {
  color: var(--text);
  cursor: default;
}

.bt-breadcrumb-chip.active:hover {
  background: transparent;
}

.bt-breadcrumb-sep {
  color: var(--muted);
  opacity: 0.5;
  font-size: 10px;
}

/* ── Grid 主體(四欄 + 三條 splitter) ──────────────────────────────
 * 新版用 7-track grid:品種 col / splitter / 期 col / splitter / 局 col /
 * splitter / 輪 col。品種+期+局 寬度由 CSS var 控制(可拖曳變動),輪 col
 * 吸收剩餘空間。Splitter 6px 寬可拖,中央有 rs-splitter-btn 收攏按鈕。 */
.bt-report-grid {
  display: grid;
  /* minmax(0, ...) 讓 collapsed (var=0) 真正塌到 0;不加 min 時 grid 用 auto
   * = min-content,被 child 撐開。fr 作為 minmax 的 max 合法。 */
  grid-template-columns:
    minmax(0, var(--bt-col-coin-w, 0.8fr))
    6px
    minmax(0, var(--bt-col-period-w, 1.1fr))
    6px
    minmax(0, var(--bt-col-bout-w, 1fr))
    6px
    minmax(0, var(--bt-col-round-w, 1.2fr));
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  background: var(--divider);
}

/* Dual-mode splitter buttons — backtest report grid 同 splitter 兩顆按鈕
 * (◀ 收 LEFT col,▶ 收 RIGHT col)。垂直 splitter:top/bot 上下排列。
 * 必須在此檔(backtest-report-grid.css)定義,因為 backtest 頁面不載 layout.css。
 * Plan: docs/plan-20260421-backtest-report-precompute.md (Phase E ux) */
.rs-splitter-btn-dual {
  transform: translate(-50%, 0) !important;
}
.rs-splitter-btn-dual.rs-splitter-btn-dual-top {
  top: calc(50% - 30px) !important;
}
.rs-splitter-btn-dual.rs-splitter-btn-dual-bot {
  top: calc(50% + 2px) !important;
}

/* Inner splitter — vertical line between cols, draggable, with toggle btn.
 * Idle background 用 --line-strong 永遠看得見(原 --divider 跟容器底色幾乎
 * 同色,使用者不知道哪裡可拖)。Hover/drag 仍變藍給強回饋。 */
.bt-col-splitter {
  position: relative;
  cursor: col-resize;
  background: var(--line-strong);
  transition: background 0.1s;
  z-index: 2;
}
.bt-col-splitter::before {
  /* hit region 4px each side */
  content: "";
  position: absolute;
  inset: 0 -4px;
  background: transparent;
}
.bt-col-splitter:hover,
.bt-col-splitter.dragging {
  background: var(--blue);
}

/* Horizontal splitter between grid and detail.
 * 同 .bt-col-splitter — idle 用 --line-strong 永遠可見。 */
.bt-grid-detail-splitter {
  position: relative;
  cursor: row-resize;
  background: var(--line-strong);
  height: 6px;
  flex-shrink: 0;
  transition: background 0.1s;
  z-index: 2;
}
.bt-grid-detail-splitter::before {
  content: "";
  position: absolute;
  inset: -4px 0;
  background: transparent;
}
.bt-grid-detail-splitter:hover,
.bt-grid-detail-splitter.dragging {
  background: var(--blue);
}

.bt-col {
  background: var(--panel);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
/* 品種 / 期 / 局 col 用 width 直控(grid track 已是 var,雙保險避免 minmax 不收斂)。
 * Collapsed 時 JS 把 var 設 0 → 該 col 真正塌到 0,輪 col 吸收剩餘空間。 */
.bt-col-coin {
  width: var(--bt-col-coin-w, auto);
}
.bt-col-period {
  width: var(--bt-col-period-w, auto);
}
.bt-col-bout {
  width: var(--bt-col-bout-w, auto);
}

.bt-col-header {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--panel-2);
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bt-col-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  /* auto — 當 table-layout:auto 讓表格自然寬度 > 容器時,這層出現橫向捲軸,
   * 使用者左右滑查看完整 PnL / 時間。先前設 hidden 導致超寬內容被裁掉。 */
  overflow-x: auto;
  min-height: 0;
}

/* ── Table 樣式 ────────────────────────────────────────────────── */
.bt-col-table {
  /* auto 讓欄位依內容伸縮 — 長內容(PNL 帶 %、完整時間)可吃到需要的
   * 寬度。表格 naturalWidth 可能超過 .bt-col-scroll 容器寬度,由 scroller
   * 加橫向捲軸(overflow-x:auto)讓使用者左右滑查看。 */
  border-collapse: collapse;
  font-size: 11px;
  table-layout: auto;
}

.bt-col-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--panel-2);
  padding: 5px 6px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.bt-col-table thead th:hover { color: var(--text); }
.bt-col-table thead th.sorted { color: var(--text); }
.bt-col-table thead th.sorted::after {
  content: "";
  display: inline-block;
  margin-left: 3px;
  border: 3px solid transparent;
  vertical-align: middle;
}
.bt-col-table thead th.sorted[data-dir="asc"]::after {
  border-bottom-color: var(--blue);
  margin-bottom: 2px;
}
.bt-col-table thead th.sorted[data-dir="desc"]::after {
  border-top-color: var(--blue);
  margin-top: 2px;
}

.bt-col-table th.r, .bt-col-table td.r { text-align: right; }
.bt-col-table th.c, .bt-col-table td.c { text-align: center; }

.bt-col-table tbody td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.bt-col-table tbody tr {
  cursor: pointer;
  transition: background 0.1s;
  /* Virtualization-lite: skip layout + paint for offscreen rows. For a
   * 10k-round backtest this drops tbody relayout from O(10k) to O(visible
   * ~30). contain-intrinsic-size reserves the row's expected height so
   * scrollbar math stays correct while rows are skipped. Supported in
   * Chromium/Firefox; Safari falls back to full layout (still correct,
   * just slower). Row padding 5px+5px + 11px line = ~22px → round to 24px. */
  content-visibility: auto;
  contain-intrinsic-size: 24px;
}

.bt-col-table tbody tr:hover td { background: var(--panel-2); }

.bt-col-table tbody tr.selected td {
  background: color-mix(in srgb, var(--blue) 15%, var(--panel));
  color: var(--text);
}

.bt-col-table td.pos { color: var(--green); }
.bt-col-table td.neg { color: var(--red); }
.bt-col-table td.dim { color: var(--muted); }

/* ── Detail 區 ─────────────────────────────────────────────────── */
.bt-report-detail {
  /* 高度由 CSS var 控制(可拖曳 + 收攏);min/max 給拖曳 clamp 用,
   * collapsed 時直接 height:0 + overflow:hidden(JS 設 var 為 0px)。
   * box-sizing border-box 讓 padding 算進 height,避免 var=0 時 padding
   * 仍佔 20px。 */
  height: var(--bt-detail-h, 140px);
  min-height: 0;
  background: var(--panel);
  overflow-y: auto;
  flex-shrink: 0;
  padding: 10px 12px;
  box-sizing: border-box;
}
/* Sibling 收攏:splitter collapsed → 緊鄰的 detail padding 歸零,真正消失 */
.bt-grid-detail-splitter.rs-splitter-collapsed + .bt-report-detail {
  padding: 0;
  border: 0;
}
/* 預設視圖(沒選 period/bout/round) → 整塊 detail + splitter 隱藏 */
.bt-report-grid-root.bt-detail-hidden .bt-grid-detail-splitter,
.bt-report-grid-root.bt-detail-hidden .bt-report-detail {
  display: none;
}

.bt-detail-empty {
  text-align: center;
  color: var(--muted);
  padding: 24px 0;
  font-size: 12px;
}

.bt-detail-section {
  margin-bottom: 12px;
}

.bt-detail-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.bt-detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.bt-detail-stat-card {
  background: var(--panel-2);
  border-radius: 6px;
  padding: 8px;
  min-width: 0;
}

.bt-detail-stat-card .k {
  font-size: 10px;
  color: var(--muted);
  margin-bottom: 2px;
  overflow: hidden;
}

.bt-detail-stat-card .v {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--mono);
  overflow: hidden;
}

/* Chart hosts — SVG 寬高由 JS 設定 */
.bt-detail-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#btDetailEquity, #btDetailDistribution, #btDetailRadar {
  width: 100%;
  min-height: 0;
}

#btDetailEquity { grid-column: 1 / -1; }

/* Round detail table (單輪展開) */
.bt-round-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-family: var(--mono);
}
.bt-round-detail-table td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--line);
}
.bt-round-detail-table td:first-child {
  color: var(--muted);
  width: 140px;
}

/* ── RWD 4-tier ───────────────────────────────────────────────── */
@media (min-width: 1100px) and (max-width: 1279px) {
  .bt-report-grid {
    grid-template-columns:
      minmax(0, var(--bt-col-coin-w, 0.8fr))
      6px
      minmax(0, var(--bt-col-period-w, 1fr))
      6px
      minmax(0, var(--bt-col-bout-w, 1fr))
      6px
      minmax(0, var(--bt-col-round-w, 1.1fr));
  }
}

@media (min-width: 900px) and (max-width: 1099px) {
  .bt-report-grid {
    grid-template-columns:
      minmax(0, var(--bt-col-coin-w, 0.8fr))
      6px
      minmax(0, var(--bt-col-period-w, 1fr))
      6px
      minmax(0, var(--bt-col-bout-w, 1fr))
      6px
      minmax(0, var(--bt-col-round-w, 1fr));
  }
  .bt-detail-charts { grid-template-columns: 1fr; }
  .bt-detail-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 899px) {
  .bt-report-grid {
    grid-template-columns: 1fr;
  }
  .bt-report-grid .bt-col,
  .bt-report-grid .bt-col-splitter {
    display: none;
  }
  .bt-report-grid .bt-col.bt-col-focused {
    display: flex;
  }
  .bt-detail-charts { grid-template-columns: 1fr; }
  .bt-detail-stats-grid { grid-template-columns: repeat(2, 1fr); }
}