/* Backtest layout — mirrors trading page grid structure */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  overflow: hidden;
}

.app {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100vh;
  overflow: hidden;
}

/* Shell: left-stack | splitter | right-panel */
.bt-shell {
  display: grid;
  /* minmax(0, var) — 沒有 min,collapsed (var=0) 才會真正塌到 0;
   * 否則 child 的 min-content 會撐開 track。 */
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, var(--bt-right-width, 360px));
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  padding: 0;
  gap: 0;
  background: var(--divider);
}

/* Left Stack: chart + splitter + report */
.bt-left-stack {
  display: grid;
  /* report-height 用 minmax(0, var) — collapsed (var=0) 真正塌到 0;
   * chart row 維持 minmax(200, 1fr) 保最小可視。 */
  grid-template-rows: minmax(200px, 1fr) 1px minmax(0, var(--bt-report-height, 220px));
  min-height: 0;
  overflow: hidden;
  background: var(--divider);
}

/* Panels */
.bt-chart-panel {
  background: var(--panel);
  border: 0;
  border-radius: var(--radius-panel);
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Chart stage must fill remaining space after topbar/info-bar/toolbar */
.bt-chart-panel .chart-stage {
  flex: 1 1 0;
  min-height: 0;
}

.bt-chart-panel .chart-topbar,
.bt-chart-panel .chart-info-bar,
.bt-chart-panel .chart-toolbar {
  flex-shrink: 0;
}

/* Allow coin dropdown to overflow chart-topbar */
.bt-chart-panel .chart-topbar {
  overflow: visible;
}

.bt-report-panel {
  background: var(--panel);
  border: 0;
  border-radius: var(--radius-panel);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  /* 同 .bt-right-panel:用 height 直控,collapsed 時 var=0 + overflow:hidden
   * 真正塌到 0,splitter 仍是 grid 的 1px 可按按鈕展開。 */
  height: var(--bt-report-height, 220px);
}

.bt-right-panel {
  background: var(--panel);
  border: 0;
  border-radius: var(--radius-panel);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
  /* 用 width 直控,避開 grid track 在 minmax 下不收斂的瀏覽器行為。
   * Collapsed 時 JS 把 --bt-right-width 設 0px → width:0 + overflow:hidden
   * 完全消失;splitter 仍是 grid 的 1px,可按按鈕展開。 */
  width: var(--bt-right-width, 360px);
  min-width: 0;
  overflow: hidden;
}
.bt-shell {
  /* shell 的第三 track 仍走 var,但 right-panel 自己也 width 控制以雙保險 */
}

/* Splitters — 1px visible line with 9px hit region */
.bt-splitter-h, .bt-splitter-v {
  position: relative;
  flex-shrink: 0;
  background: var(--divider);
  transition: background 0.1s;
}

.bt-splitter-h {
  cursor: row-resize;
  height: 1px;
}

.bt-splitter-v {
  cursor: col-resize;
  width: 1px;
}

/* Invisible hit region extends 4px outward */
.bt-splitter-h::before, .bt-splitter-v::before {
  content: "";
  position: absolute;
  background: transparent;
}

.bt-splitter-h::before { inset: -4px 0; }
.bt-splitter-v::before { inset: 0 -4px; }

/* Hide old handle dot — the whole line is the splitter now */
.bt-splitter-handle {
  display: none;
}

.bt-splitter-h:hover,
.bt-splitter-v:hover,
.bt-splitter-h.dragging,
.bt-splitter-v.dragging {
  background: var(--blue);
}

/* ── Collapse/expand toggle button (共用 rs-splitter-btn) ─────────────
 * splitter-toggle.js 在每條 splitter 中央注入一顆 button,橫 ▼ / 直 ▶,
 * collapsed 時 rotate 180deg 變 ▲ / ◀。按鈕 z-index 高於 splitter 本身
 * 但低於 modal。拖曳期間 pointer-events:none 避免誤觸。 */
.rs-splitter-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 16px;
  padding: 0;
  margin: 0;
  background: var(--panel-2, #1a1a2e);
  border: 1px solid var(--line, #2a2a3e);
  border-radius: 4px;
  color: var(--muted, #8a94a8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: background 0.15s, color 0.15s;
}
.rs-splitter-btn-v {
  width: 16px;
  height: 28px;
}
.rs-splitter-btn:hover {
  background: var(--blue, #4a8cff);
  color: #fff;
  border-color: var(--blue, #4a8cff);
}
.rs-splitter-btn svg {
  width: 10px;
  height: 7px;
  transition: transform 0.2s;
}
.rs-splitter-btn-v svg {
  width: 7px;
  height: 10px;
}
.rs-splitter-collapsed .rs-splitter-btn svg {
  transform: rotate(180deg);
}
/* flip 變體:預設箭頭已 rotate 180(指向反方向)。
 * Collapsed 之後 svg.style.transform 會被 splitter-toggle.js 直接設 inline,
 * 不靠 CSS rule 切換(實測 same-specificity 的 .rs-splitter-collapsed
 * .rs-splitter-btn svg vs .rs-splitter-collapsed .rs-splitter-btn-flip svg
 * source order 不穩定)。 */
.rs-splitter-btn-flip svg {
  transform: rotate(180deg);
}
.dragging .rs-splitter-btn {
  pointer-events: none;
}

/* Collapsed shell sizing helpers — when toggled, CSS var is 0 but
 * the splitter + its button must remain clickable to allow expand. */
.rs-splitter-collapsed {
  /* splitter line itself stays visible at its natural 1px,button is
   * the only clickable re-entry point,整條線不可消失。 */
}

/* ≤900px RWD:整個 splitter 已被 layout 隱藏(layout 變單欄),按鈕跟著消失。
 * 900-1280 區間拖曳被 bt-bootstrap 禁用,但收攏按鈕仍可用(便利性)。 */
@media (max-width: 900px) {
  .rs-splitter-btn { display: none; }
}

/* Progress bar — lives inside .btfa-footer while a backtest is running.
   Track + bar + centered percent/stage label, taller than the old 3px
   line so the user actually notices long-running tasks. */
.bt-progress {
  position: relative;
  height: 20px;
  margin-top: 8px;
  background: var(--panel-2);
  border-radius: 6px;
  overflow: hidden;
}
.bt-progress-bar {
  position: absolute;
  inset: 0;
  /* Width stays 100%; scaleX reveals the fill. transform + composited
   * transition gives sub-pixel animation on narrow bars (plain `width`
   * snaps to integer pixels, which made tiny drift invisible and the
   * fill look chunky even when the JS pct was moving smoothly). */
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--blue);
  transition: transform 120ms linear;
  will-change: transform;
}
.bt-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  mix-blend-mode: difference;
  pointer-events: none;
  /* Monospace digits so 29.66 → 29.67 doesn't reflow width. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ─── Responsive (UI_STANDARD v2.0 Part 7) ─────────────────────────────
   Desktop (≥1280px): user-draggable right panel width (--bt-right-width, 360 default).
   Tablet  (1100-1279px): clamp right panel to 300px so chart has breathing room.
   Narrow  (900-1099px):  clamp right panel to 260px.
   Mobile  (<900px):      collapse to single column, right panel at bottom.

   .bt-shell grid-template-columns uses minmax(0, 1fr) for left so left side can
   shrink. This file overrides right panel width; split handle auto-hides <900. */

@media (max-width: 1279px) {
  /* RWD 仍用 var 讓 collapsed 生效;預設值改小避免畫面太擠 */
  .bt-shell {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, var(--bt-right-width, 300px));
  }
}

@media (max-width: 1099px) {
  .bt-shell {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, var(--bt-right-width, 260px));
  }
}

@media (max-width: 900px) {
  .bt-shell {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) 1px 360px;
    gap: 0;
    background: var(--bg);
  }
  .bt-splitter-v { display: none; }
  .bt-right-panel { border-radius: var(--radius-panel); }
}