/* Roadsign Layout — app shell, topbar, panels, splitters */

.app {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 48px 1fr;
}

.hidden-support {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.chip,

.btn,

.profile-shell {
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.btn {
  cursor: pointer;
}

.profile-shell select {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  min-width: 82px;
  font-size: 12px;
}

.shell {
  min-height: 600px;
  min-width: 960px;
  height: calc(100vh - 48px);
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, var(--right-panel-width));
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  background: var(--divider);
}

.left-stack {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(320px, 1fr) 1px minmax(0, var(--report-panel-height));
  gap: 0;
  background: var(--divider);
}

.panel {
  background: var(--panel);
  border: 0;
  border-radius: var(--radius-panel);
  box-shadow: none;
  overflow: hidden;
  min-height: 0;
}

.splitter {
  position: relative;
  z-index: 3;
  user-select: none;
  touch-action: none;
  background: transparent;
}

/* Hit region — expands beyond the visible 1px line so users can grab it */
.splitter::before {
  content: "";
  position: absolute;
  background: transparent;
}

/* Visible line — sits exactly on the 1px grid gap */
.splitter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--divider);
  transition: background 120ms ease;
}

.splitter:hover::after,

.splitter.dragging::after {
  background: rgba(78, 140, 255, 0.75);
}

.splitter-vertical {
  cursor: col-resize;
  margin: 0;
}

.splitter-vertical::before {
  /* Extend hit region 4px left/right → 9px wide clickable strip */
  inset: 0 -4px;
}

.splitter-horizontal {
  cursor: row-resize;
  margin: 0;
}

.splitter-horizontal::before {
  /* Extend hit region 4px top/bottom → 9px tall clickable strip */
  inset: -4px 0;
}

/* ── Collapse/expand toggle button for trading-page .splitter —
 * 與 .bt-splitter 的 .rs-splitter-btn 共用 class,但 trading 的 .splitter
 * position:relative 已由 base rule 設,按鈕走 position:absolute 置中。
 * 視覺 + rotate(180deg) 邏輯集中於 backtest-layout.css 的 rs-splitter-btn
 * 規則,這裡只需確保 .splitter 本身容得下 button(本身 position:relative 已夠)。 */
.splitter.rs-splitter-collapsed {
  /* collapsed 時 splitter 線仍顯示,button 仍可按展開 */
}
/* ≤900 整個 splitter 隱藏,按鈕自動消失。≥901 仍顯示按鈕(便利收攏)。 */
@media (max-width: 900px) {
  .rs-splitter-btn { display: none; }
}
body.chart-expanded .rs-splitter-btn { display: none; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.panel-title {
  display: grid;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.panel-title strong {
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.tf-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
  width: 100%;
  padding-bottom: 2px;
}

.tf-row::-webkit-scrollbar {
  height: 3px;
}

.tf-row::-webkit-scrollbar-track {
  background: transparent;
}

.tf-row::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}

/* scrollbar hidden via thin scrollbar from base.css */

/* -- Network toggle (testnet / mainnet) -- */
.network-toggle-btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 200, 83, 0.3);
  background: rgba(0, 200, 83, 0.10);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  white-space: nowrap;
}
.network-toggle-btn:hover { background: rgba(0, 200, 83, 0.18); border-color: rgba(0, 200, 83, 0.5); }
.network-indicator { width: 8px; height: 8px; border-radius: 50%; background: #00c853; }
/* Testnet variant: both data-attribute (legacy) and class (Engine) work. */
.network-toggle-btn[data-network="testnet"],
.network-toggle-btn.testnet { border-color: rgba(255, 152, 0, 0.3); background: rgba(255, 152, 0, 0.10); }
.network-toggle-btn[data-network="testnet"]:hover,
.network-toggle-btn.testnet:hover { background: rgba(255, 152, 0, 0.18); border-color: rgba(255, 152, 0, 0.5); }
.network-toggle-btn[data-network="testnet"] .network-indicator,
.network-toggle-btn.testnet .network-indicator { background: #ff9800; }

/* T-039: Engine-rendered wallet status icon/text */
.wallet-status-ok    { color: var(--green); font-size: 12px; line-height: 20px; }
.wallet-status-warn  { color: var(--accent, #f0b90b); font-size: 12px; font-weight: 500; line-height: 20px; }
.wallet-status-muted { color: var(--muted); font-size: 12px; line-height: 20px; }

.wallet-btn {
  height: 32px;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid rgba(78, 140, 255, 0.3);
  background: rgba(78, 140, 255, 0.12);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--mono);
}

.wallet-btn:hover {
  background: rgba(78, 140, 255, 0.2);
  border-color: rgba(78, 140, 255, 0.5);
}

/* Auth button (shown when connected but not approved) — small yellow pill.
   Replaces legacy inline styles on #walletAuthBtn for Engine migration. */
.wallet-btn.auth {
  font-size: 11px;
  padding: 0 8px;
  height: 22px;
  background: var(--yellow, #f0b90b);
  color: #000;
  border: none;
  border-radius: 4px;
  font-weight: 600;
}
.wallet-btn.auth:hover {
  background: var(--yellow, #f0b90b);
  filter: brightness(1.1);
  border: none;
}

.wallet-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.coin-panel-header {
  padding: 10px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.coin-panel-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.coin-panel-tab {
  flex: 1;
  padding: 8px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
}

.coin-panel-tab:hover { color: var(--text); }

.coin-panel-tab.active {
  color: var(--accent, #f0b90b);
  border-bottom-color: var(--accent, #f0b90b);
}

.coin-panel-tab.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.coin-panel-subtabs {
  display: flex;
  gap: 0;
  padding: 0;
}

.coin-panel-sub {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
}

.coin-panel-sub:hover { color: var(--text); }

.coin-panel-sub.active {
  color: var(--text);
  border-bottom-color: var(--text);
}

.coin-panel-search {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}

.coin-panel-search:focus { border-color: rgba(255,255,255,0.2); }

.coin-panel-list-head {
  display: flex;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.coin-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.coin-panel-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.1s;
}

.coin-panel-row:hover { background: rgba(255,255,255,0.04); }

.coin-panel-row.active { background: rgba(255,255,255,0.06); }

.coin-row-star {
  flex: 0 0 20px;
  width: 20px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  margin-right: 6px;
  text-align: center;
  transition: color 0.1s, transform 0.1s;
}

.coin-row-star:hover { color: var(--accent, #f0b90b); transform: scale(1.15); }

.coin-row-star.active { color: var(--accent, #f0b90b); }

.coin-row-name {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.coin-row-name strong { font-weight: 700; color: var(--text); }

.coin-row-name .coin-row-vol {
  font-size: 11px;
  color: var(--muted);
}

.coin-row-tag {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  margin-left: 6px;
}

.coin-row-lev {
  font-size: 11px;
  color: var(--accent, #f0b90b);
  margin-left: 4px;
  font-weight: 600;
}

.coin-row-lev-col {
  flex: 0.7;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent, #f0b90b);
}

.coin-row-price { flex: 1; text-align: right; font-weight: 600; }

.coin-row-change { flex: 1; text-align: right; font-weight: 600; }

.coin-panel-row.unverified {
  opacity: 0.35;
  cursor: not-allowed;
}

.coin-panel-row.unverified:hover { background: none; }

/* Stack overlay legends vertically in main pane */

.table-box,

.log-box-wrap {
  min-height: 0;
  padding: 16px 18px;
}

.log-box-wrap {
  border-left: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

th, td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  color: var(--muted);
  font-weight: 600;
}

pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  color: #cbd3df;
  font-size: 11px;
  line-height: 1.65;
}

.blank-canvas {
  min-height: 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.01);
}

.blank-canvas.report {
  border-top: 0;
}

.blank-canvas.side {
  flex: 1;
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.02);
}

.hidden-cache {
  display: none !important;
}

.right-panel {
  min-height: 0;
  min-width: 0;
  display: grid;
  /* Rows: trade-mode-tabs / order-side-toggle / active panel / splitter / asset summary
     Previously only 4 explicit rows → side-toggle stretched into the 1fr slot
     (367px) and the active panel got cropped into the 10px splitter row. */
  grid-template-rows: auto auto minmax(0, 1fr) 10px minmax(0, var(--right-asset-height, 132px));
  gap: 0;
  padding: 16px 16px 16px 16px;
  overflow: hidden;
  /* width 直控,collapsed 時 var=0 真正消失(同 backtest .bt-right-panel)。
   * box-sizing border-box 確保 padding(16+16=32px) 算進 width,
   * 否則 collapsed (var=0) 時 padding 仍佔 32px。 */
  width: var(--right-panel-width, 360px);
  box-sizing: border-box;
}
/* report panel 高度直控:同樣 collapsed 時 var=0 → height:0 + 父層 overflow:hidden */
.report-body {
  height: var(--report-panel-height, 240px);
  min-height: 0;
  overflow: hidden;
}

/* ── Splitter collapse/expand button (shared across backtest + trading) ─
 * 此規則本來只在 backtest-layout.css,移到全站 layout.css 讓 trading 也吃到。
 * 按鈕浮在 splitter 中央,collapsed 時三角 rotate 180deg(▼→▲ / ▶→◀)。 */
.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 = 預設箭頭方向反向(收攏左/上);collapsed 後切換由 splitter-toggle.js
 * 直接 inline svg.style.transform 控制,不用 CSS class(避開特異性順位問題)。 */
.rs-splitter-btn-flip svg {
  transform: rotate(180deg);
}
.dragging .rs-splitter-btn {
  pointer-events: none;
}

/* Dual-mode buttons — 同 splitter 兩顆按鈕(◀ 收 LEFT,▶ 收 RIGHT)。
 * 垂直 splitter:top/bottom 上下排列。Plan: docs/plan-20260421-backtest-report-precompute.md */
.rs-splitter-btn-dual {
  transform: translate(-50%, 0);
}
.rs-splitter-btn-dual-top {
  top: calc(50% - 30px);
}
.rs-splitter-btn-dual-bot {
  top: calc(50% + 2px);
}

/* Collapsed sibling helpers — splitter 收攏時把鄰居 panel 的 padding 歸零,
 * 否則 box-sizing:border-box + padding=16px 會把 width 撐到 32px。 */
#verticalSplitter.rs-splitter-collapsed ~ .right-panel,
.splitter-vertical.rs-splitter-collapsed ~ .right-panel {
  padding: 0;
  border: 0;
}
#horizontalSplitter.rs-splitter-collapsed + .report-body,
.splitter-horizontal.rs-splitter-collapsed + .report-body {
  padding: 0;
  border: 0;
}
.right-panel > .trade-mode-tabs { margin-bottom: 8px; }
.right-panel > #rightHorizontalSplitter { min-height: 10px; }

.meta-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* AutoTrader panels (semi / auto) */

@keyframes at-pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.slider {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
}

.slider .bar {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffffff 0 24%, rgba(255,255,255,0.1) 24% 100%);
}

.asset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.asset-item {
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.asset-item:nth-child(2n) {
  border-right: 0;
}

.asset-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.asset-item strong {
  font-family: var(--mono);
  font-size: 21px;
}

.note-list {
  display: grid;
  gap: 0;
}

.note {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

body.chart-expanded .shell {
  grid-template-columns: minmax(0, 1fr);
}

body.chart-expanded .left-stack {
  grid-template-rows: minmax(0, 1fr);
}

body.chart-expanded .right-panel,

body.chart-expanded #verticalSplitter,

body.chart-expanded #horizontalSplitter,

body.chart-expanded .report-body {
  display: none;
}

body.chart-expanded .chart-wrap {
  min-height: calc(100vh - 98px);
}

/* ─── Responsive (UI_STANDARD v2.0 Part 7) ─────────────────────────────
   Desktop (≥1280px): user-draggable right panel (--right-panel-width, 360).
   Tablet  (1100-1279px): clamp right panel to 300px.
   Narrow  (900-1099px):  clamp right panel to 260px + lift min-width floor.
   Mobile  (<900px):      single column, right panel at bottom. */

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

@media (max-width: 1099px) {
  .shell {
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, var(--right-panel-width, 260px));
    min-width: 0;  /* allow narrower than 960 for tablet+ */
  }
}

@media (max-width: 900px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    background: var(--bg);
  }

  .left-stack {
    grid-template-rows: minmax(560px, 1fr) 1px 260px;
    gap: 0;
  }

  .splitter {
    display: none;
  }
}

@media (max-width: 820px) {
  :root {
    --chart-dock-width: 56px;
  }

  .shell {
    padding: 0;
  }

  .left-stack {
    grid-template-rows: 520px 1px 320px;
    gap: 0;
  }

  .report-grid {
    grid-template-columns: 1fr;
  }

  .log-box-wrap {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .asset-grid {
    grid-template-columns: 1fr;
  }

  .chart-left-dock {
    padding-inline: 8px;
  }

  .chart-dock-status {
    padding-inline: 6px;
  }
}