/* ============================================================
   layout.css — the app shell: title bar, drawing rail, chart area,
   right panels, bottom bar. (Where things sit, not how controls look.)
   ============================================================ */

/* ---- Title bar ---- */
.title-bar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--spacing-md);
  height: var(--titlebar-height);
  padding: 0 var(--spacing-lg);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  /* no overflow:hidden — it would clip dropdowns; .toolbar handles its own overflow */
  position: relative;
  z-index: 50;
}

.title-logo { display: flex; align-items: center; gap: var(--spacing-md); flex-shrink: 0; }
.logo-img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 8px var(--accent-30)); }
.logo-text {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800;
  letter-spacing: .08em; color: var(--text-primary); white-space: nowrap;
}
.logo-highlight { color: var(--accent); }
.logo-divider { opacity: .3; }
.logo-subtitle {
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .15em; color: var(--text-secondary); text-transform: uppercase;
}

.sym-pill {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 5px 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius-md);
  color: var(--text-primary); font-weight: 700; letter-spacing: .03em; font-size: var(--text-sm);
  white-space: nowrap; cursor: pointer;
}
.sym-pill:hover { border-color: var(--accent); }
.market-price { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); white-space: nowrap; flex-shrink: 0; }
/* candle-close countdown — pinned to the price scale, under the last-price tag (TradingView-style).
   Vertical position (top) is set in JS from the last price's pixel; horizontal sits over the axis. */
/* price-scale overlay: our own last-price tag + candle-close timer, stacked and
   identical, filling the full width of the price scale. top/width/right set in JS
   from the real axis geometry so they line up with the scale exactly. */
.pscale { position: absolute; right: 0; z-index: 5; pointer-events: none; display: flex; flex-direction: column; transition: opacity .2s ease; }
.pscale-price, .pscale-timer {
  width: 100%; box-sizing: border-box; text-align: center;
  font-size: 11px; font-weight: 700; line-height: 1.45; white-space: nowrap;
}
.pscale-price { color: #fff; background: var(--ref-error, #ef4444); }   /* bg recolored by JS (up/down) */
.pscale-timer { color: var(--text-primary); background: var(--bg-tertiary); }

.header-right { display: flex; align-items: center; gap: var(--spacing-md); margin-left: auto; min-width: 0; }
.toolbar { min-width: 0; overflow-x: auto; scrollbar-width: none; display: flex; align-items: center; gap: 2px; }
.toolbar::-webkit-scrollbar { display: none; }

.status { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--text-xs); color: var(--text-muted); flex-shrink: 0; }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted);
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}
.status-dot.live { background: var(--ref-success); box-shadow: 0 0 6px var(--ref-success); }
.status-dot.sample { background: var(--ref-warning); }

/* ---- Body: drawing rail + chart + right panels ---- */
.layout { flex: 1; display: flex; min-height: 0; }

.draw-toolbar {
  width: 46px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-xs);
  background: var(--bg-primary); border-right: 1px solid var(--border-color);
}
.draw-tool {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--border-radius-md);
  color: var(--text-secondary); font-size: 18px; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.draw-tool .glyph { display: inline-flex; }
.draw-tool .glyph svg { width: 20px; height: 20px; display: block; }
.draw-tool:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.draw-tool.active { color: var(--accent); border-color: var(--accent); }
.draw-tool-danger { margin-top: auto; }
.draw-tool-danger:hover { color: var(--ref-error); }

.chart-wrap { flex: 1; min-width: 0; min-height: 0; position: relative; }
#chart { width: 100%; height: 100%; }

/* KLineChart pane separator — stamped with .kl-separator by ChartController */
.kl-separator {
  background: rgba(255,255,255,0.04) !important;
  transition: background 120ms ease !important;
  position: relative;
}
.kl-separator::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 32px; height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.15);
  transition: background 120ms ease, width 120ms ease;
}
.kl-separator:hover {
  background: rgba(var(--accent-rgb), .12) !important;
}
.kl-separator:hover::before {
  background: var(--accent);
  width: 48px;
}

/* Symbol-switch: clean fade out / fade in */
.chart-wrap.switching { opacity: .15; transition: opacity 180ms ease-in; }
.chart-wrap.revealing { opacity: 1; transition: opacity 380ms cubic-bezier(0.16, 1, 0.3, 1); }

/* ---- Sidebar shell: collapsible + drag-to-resize container ---- */
.sidebar-shell {
  position: relative;
  flex-shrink: 0;
  width: var(--sidebar-w);
  transition: width var(--transition-sidebar);
  /* overflow: visible so the toggle tab can stick out to the left */
  overflow: visible;
}
.sidebar-shell.sb-collapsed { width: 0; }

/* Drag handle — 6px hit target on the left edge */
.sidebar-drag {
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 20; user-select: none;
}
.sidebar-drag::after {
  content: ''; position: absolute;
  top: 0; bottom: 0; left: 2px; width: 1px;
  background: transparent;
  transition: background var(--transition-fast);
}
.sidebar-drag:hover::after,
.sidebar-drag.sb-dragging::after { background: var(--accent); }

/* Collapse/expand toggle — tabs off the left edge, always visible */
.sidebar-toggle {
  position: absolute; top: 50%; left: -16px;
  transform: translateY(-50%);
  width: 16px; height: 48px; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color); border-right: none;
  border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
  color: var(--text-muted); cursor: pointer; padding: 0;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.sidebar-toggle:hover { color: var(--accent); border-color: var(--accent-30); background: var(--bg-tertiary); }
.sidebar-toggle iconify-icon { font-size: 11px; pointer-events: none; }

/* Right panels fill the shell; overflow clips content when shell shrinks */
/* ---- Right panels (watchlist / object tree) ---- */
.right-panels {
  width: 100%; height: 100%; flex-shrink: 0;
  border-left: 1px solid var(--border-color);
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
}
.panel-section { border-bottom: 1px solid var(--border-subtle); }
.phd {
  padding: 8px 10px; font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle);
}
.prow { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; font-size: var(--text-sm); color: var(--text-primary); }
.dw-k { color: var(--text-muted); }
.pos { color: var(--ref-success); font-weight: 600; }
.neg { color: var(--ref-error); font-weight: 600; }
.ot-empty { color: var(--text-muted); }
.ot-count { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .6; }
.ot-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; }
.ot-name { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ot-gear, .ot-x {
  display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0;
  background: transparent; border: none; color: var(--text-muted); cursor: pointer; border-radius: var(--border-radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}
.ot-gear:hover { color: var(--accent); background: var(--bg-tertiary); }
.ot-x:hover { color: var(--ref-error); background: var(--bg-tertiary); }

/* ---- Bottom bar ---- */
.bottom-bar {
  display: flex; align-items: center; gap: var(--spacing-lg);
  height: 30px; padding: 0 var(--spacing-lg);
  background: var(--bg-primary); border-top: 1px solid var(--border-color);
  font-size: var(--text-xs); color: var(--text-muted);
}
.bb-item { display: inline-flex; align-items: center; gap: 5px; }
.bb-muted { color: var(--text-muted); }
.scale-toggle { display: inline-flex; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; }
.scale-toggle button {
  padding: 3px 9px; background: transparent; border: none; border-right: 1px solid var(--border-color);
  color: var(--text-secondary); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; cursor: pointer;
}
.scale-toggle button:last-child { border-right: none; }
.scale-toggle button:hover { color: var(--text-primary); }
.scale-toggle button.on { color: var(--accent); background: var(--accent-10); }
.bb-fit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  border-radius: var(--border-radius-sm); font-size: 14px;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.bb-fit-btn:hover { color: var(--accent); background: var(--bg-tertiary); }
.bb-status { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* ---- Data mode toggle + info card ---- */
.bb-data-wrap { display: inline-flex; align-items: center; gap: 4px; }

/* Exchange picker (bottom bar) */
.bb-venue {
  display: inline-flex; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px;
  background: var(--bg-tertiary); border: 1px solid var(--border-subtle);
  border-radius: 10px; color: var(--text-secondary);
  font-size: 10px; cursor: pointer; white-space: nowrap;
}
.bb-venue:hover { color: var(--text-primary); border-color: var(--border-hover); }
.bb-venue-menu { max-height: 300px; overflow-y: auto; }

.bb-info-anchor {
  position: relative;
  display: inline-flex; align-items: center;
  color: var(--text-muted); cursor: default;
  opacity: .55; transition: opacity var(--transition-fast);
}
.bb-info-anchor:hover { opacity: 1; }

/* The card itself — hidden by default, shown on hover */
.bb-info-card {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%; transform: translateX(-50%);
  width: 340px;
  background: var(--bg-popover);
  border: 1px solid var(--border-popover);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-md);
  padding: 10px 12px;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
/* Arrow */
.bb-info-card::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--border-popover);
}
.bb-info-anchor:hover .bb-info-card { display: flex; }

.bb-info-row {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; border-radius: var(--border-radius-sm);
  background: var(--bg-tertiary);
}
.bb-info-row--highlight { background: rgba(var(--accent-rgb, 243,156,18), .08); border: 1px solid rgba(var(--accent-rgb, 243,156,18), .2); }

.bb-info-mode {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
}
.bb-info-desc {
  font-size: 11px; line-height: 1.5; color: var(--text-secondary);
}

/* ---- Chart fullscreen (double-click to toggle) ---- */
body.chart-fullscreen .title-bar,
body.chart-fullscreen .draw-toolbar,
body.chart-fullscreen .sidebar-shell,
body.chart-fullscreen .bottom-bar { display: none !important; }

body.chart-fullscreen .layout { flex: 1; }

/* ---- Narrow widths: drop secondary chrome ---- */
@media (max-width: 720px) {
  .logo-divider, .logo-subtitle { display: none; }
  .status #statusText { display: none; }
  .title-bar { gap: var(--spacing-sm); }
}

/* ── Timeframe bar ─────────────────────────────── */
.toolbar { position: relative; }
.tf-bar { display: flex; align-items: center; gap: 2px; }
.tf-pill {
  height: 26px; padding: 0 8px; background: transparent; border: none;
  color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-xs);
  font-weight: 600; cursor: pointer; border-radius: var(--border-radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.tf-pill:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.tf-pill.active { color: var(--accent); background: rgba(var(--accent-rgb, 243,156,18), .12); }
.tf-pill-custom { font-style: italic; }

.toolbar-sep {
  width: 1px; height: 16px; background: var(--border-color); margin: 0 6px; flex-shrink: 0;
}

.ts-btn-charttype {
  width: 30px !important; height: 30px !important;
  color: var(--text-secondary);
}
.ts-btn-charttype:hover { color: var(--text-primary); background: var(--bg-tertiary); }

.tf-more {
  height: 26px; width: 26px; padding: 0; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-muted); cursor: pointer;
  border-radius: var(--border-radius-sm); font-size: 14px;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.tf-more:hover { color: var(--text-primary); background: var(--bg-tertiary); }

.tf-flyout {
  position: fixed;
  background: var(--bg-popover); border: 1px solid var(--border-popover);
  border-radius: var(--border-radius-md); box-shadow: var(--shadow-md);
  padding: 6px; width: 190px; z-index: 9999;
  display: none; flex-direction: column; gap: 0;
}
.tf-flyout.open { display: flex; }

.tf-cat { display: flex; align-items: center; gap: 4px; padding: 1px 0; }
.tf-cat-label {
  width: 50px; flex-shrink: 0; font-size: 8px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.tf-cat-items { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.tf-cat-item {
  height: 20px; padding: 0 6px; background: var(--bg-tertiary); border: none;
  border-radius: var(--border-radius-sm); color: var(--text-secondary);
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.tf-cat-item:hover { background: var(--border-color); color: var(--text-primary); }
.tf-cat-item.active { background: rgba(var(--accent-rgb, 243,156,18), .15); color: var(--accent); }

.tf-custom-row {
  display: flex; gap: 4px; align-items: center;
  padding-top: 5px; margin-top: 3px; border-top: 1px solid var(--border-subtle);
}
.tf-custom-input { flex: 1; height: 24px; font-size: 11px; }
.tf-input-invalid { border-color: var(--ref-error) !important; animation: tf-shake .3s ease; }
@keyframes tf-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.tf-custom-go {
  height: 24px; padding: 0 8px; background: var(--accent); color: #000;
  border: none; border-radius: var(--border-radius-sm); font-weight: 700;
  font-size: 11px; cursor: pointer;
}

/* ── Chart type menu groups ─────────────────────── */
.menu-group-label {
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); padding: 6px 10px 3px;
}
.menu-sep { height: 1px; background: var(--border-subtle); margin: 4px 0; }