/* Trading terminal */
.terminal {
  display: grid;
  grid-template-columns: 1fr 300px 320px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "ticker ticker ticker"
    "chart  book   form"
    "panel  panel  form";
  gap: 1px;
  background: var(--border-color);
  height: calc(100vh - var(--header-h));
  min-height: 640px;
}
.terminal > * { background: var(--bg-primary); }
.tm-ticker { grid-area: ticker; }
.tm-chart  { grid-area: chart; min-width: 0; min-height: 0; }
.tm-book   { grid-area: book; min-height: 0; }
.tm-form   { grid-area: form; overflow-y: auto; }
.tm-panel  { grid-area: panel; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Ticker bar */
.ticker-bar { display: flex; align-items: center; gap: var(--sp-5); padding: 8px var(--sp-4); overflow-x: auto; }
.ticker-symbol { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-lg); cursor: pointer; }
.ticker-symbol .caret { color: var(--text-muted); font-size: 10px; }
.ticker-last { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: 700; }
.ticker-stat { display: flex; flex-direction: column; white-space: nowrap; }
.ticker-stat .lbl { font-size: var(--fs-xs); color: var(--text-muted); }
.ticker-stat .val { font-size: var(--fs-sm); font-family: var(--font-mono); }
.funding-timer { font-family: var(--font-mono); }

/* Chart */
.chart-toolbar { display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); border-bottom: 1px solid var(--border-color); flex-wrap: wrap; }
.chart-toolbar .seg button { padding: 3px 8px; }
.chart-canvas-wrap { position: relative; width: 100%; height: calc(100% - 42px); min-height: 260px; }
#priceChart { width: 100%; height: 100%; display: block; }
.chart-hover-legend { position: absolute; top: 8px; left: 10px; font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-secondary); pointer-events: none; z-index: 3; }
.chart-loading {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--bg-primary); color: var(--text-muted); font-size: var(--fs-sm);
  transition: opacity .25s ease;
}
.chart-loading.done { opacity: 0; pointer-events: none; }

/* ============================================================
   Order book + trade tape — strict grid, tabular numerals
   ============================================================ */
.tm-book {
  --ob-row-h: 22px;                 /* compact but readable, zero layout shift */
  --ob-cols: 1.15fr 1fr 1fr;        /* Price a touch wider than Size / Total */
  --ob-pad-x: var(--sp-3);
  --ob-gutter: 6px;                 /* reserved scrollbar width */
}

.book { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* Header — same grid + padding as the rows, plus the reserved gutter so the
   right column lines up whether or not the list is scrolling. */
.book-header,
.trades-header {
  display: grid;
  grid-template-columns: var(--ob-cols);
  align-items: center;
  height: 26px;
  padding: 0 calc(var(--ob-pad-x) + var(--ob-gutter)) 0 var(--ob-pad-x);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  letter-spacing: .02em;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.book-header .col-size,  .book-header .col-total,
.trades-header .col-size, .trades-header .col-time { text-align: right; }

/* Scroll containers — thin, gutter-stable so rows never reflow under the header */
.book-side {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}
.book-side::-webkit-scrollbar { width: var(--ob-gutter); }
.book-side::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; border: none; }

/* One data row */
.book-row,
.trade-row {
  position: relative;
  display: grid;
  grid-template-columns: var(--ob-cols);
  align-items: center;
  height: var(--ob-row-h);
  padding: 0 var(--ob-pad-x);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.book-row { cursor: pointer; transition: background-color .08s ease; }
.book-row:hover  { background: var(--bg-hover); box-shadow: inset 2px 0 0 var(--accent); }
.trade-row:hover { background: var(--bg-hover); }

/* Columns: Price left, everything else hard-right, all above the depth bar */
.book-row .col,
.trade-row .col { position: relative; z-index: 1; overflow: hidden; text-overflow: ellipsis; }
.col-price { text-align: left; }
.col-size, .col-total, .col-time { text-align: right; }
.col-time { color: var(--text-muted); }

/* Depth bar — sits in the row background, never affects layout */
.book-row .depth-bar {
  position: absolute;
  inset: 0 0 0 auto;               /* pinned to the right edge, grows leftward */
  z-index: 0;
  opacity: .12;
  pointer-events: none;
}
.book-row.ask .col-price   { color: var(--danger); }
.book-row.ask .depth-bar   { background: var(--danger); }
.book-row.bid .col-price   { color: var(--success); }
.book-row.bid .depth-bar   { background: var(--success); }

/* Trade tape price colouring */
.trade-row.buy  .col-price { color: var(--success); }
.trade-row.sell .col-price { color: var(--danger); }

/* Price-change flash on refresh */
.book-row.flash-up   { animation: bookflash-up .45s ease; }
.book-row.flash-down { animation: bookflash-down .45s ease; }
@keyframes bookflash-up   { from { background: var(--success-soft); } }
@keyframes bookflash-down { from { background: var(--danger-soft); } }

/* Spread / mark row between asks and bids */
.book-spread {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 var(--ob-pad-x);
  border-block: 1px solid var(--border-color);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  flex-shrink: 0;
}
.book-spread .mid {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--text-primary);
  text-align: center;
}
.book-spread .mid.up   { color: var(--success); }
.book-spread .mid.down  { color: var(--danger); }
.book-spread .mid[data-dir="up"]::after   { content: "\25B2"; font-size: 8px; margin-left: 5px; vertical-align: 1px; }
.book-spread .mid[data-dir="down"]::after { content: "\25BC"; font-size: 8px; margin-left: 5px; vertical-align: 1px; }
.book-spread #bookSpread { text-align: right; }

/* Skeleton placeholder rows share the exact row height → no shift on first data */
.skeleton-row-book { height: var(--ob-row-h, 22px); padding: 5px var(--sp-3); }
.skeleton-row-book .skeleton { display: block; width: 100%; height: 100%; grid-column: 1 / -1; border-radius: 3px; }
.book-side.loaded .skeleton-row-book { display: none; }

/* Order form */
.order-form { padding: var(--sp-3); }
.side-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: var(--sp-3); }
.side-toggle button { padding: 9px; border-radius: var(--radius-sm); font-weight: 700; border: 1px solid var(--border-color); color: var(--text-muted); transition: all var(--transition); }
.side-toggle button:hover { color: var(--text-secondary); border-color: var(--border-strong); }
.side-toggle button.buy.active { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.side-toggle button.sell.active { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.order-types { display: flex; gap: 2px; margin-bottom: var(--sp-3); overflow-x: auto; }
.order-types button { padding: 6px 10px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.order-types button.active { color: var(--text-primary); border-bottom-color: var(--accent); }
.order-form .field-label { display: flex; justify-content: space-between; }
.order-form .balance-line { font-size: var(--fs-xs); color: var(--text-muted); }
.pct-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin: var(--sp-2) 0; }
.pct-row button { padding: 4px; font-size: var(--fs-xs); border: 1px solid var(--border-color); border-radius: 4px; color: var(--text-muted); }
.pct-row button:hover { border-color: var(--accent); color: var(--text-primary); }
.order-summary { margin: var(--sp-3) 0; padding: var(--sp-3); background: var(--bg-secondary); border-radius: var(--radius-sm); }
.order-summary .kv { padding: 3px 0; font-size: var(--fs-sm); }
.order-form-error { margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.order-form-error[hidden] { display: none; }
.form-group.has-error .input { border-color: var(--danger); }
#ofQty.at-limit { border-color: var(--warning); }
.order-form .input:focus { box-shadow: 0 0 0 3px var(--accent-soft); }

/* Bottom panel tables */
.tm-panel .tabs { padding: 0 var(--sp-3); flex-shrink: 0; }
.tm-panel .panel-scroll { flex: 1; overflow: auto; }
.pnl-pos { color: var(--success); }
.pnl-neg { color: var(--danger); }

/* Symbol dropdown */
.symbol-picker {
  position: absolute; top: calc(100% + 4px); left: 0; width: 340px; z-index: 80;
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden;
  display: none;
}
.symbol-picker.open { display: block; }
.symbol-picker input { border-radius: 0; border-width: 0 0 1px 0; }
.symbol-picker-list { max-height: 320px; overflow-y: auto; }
.symbol-picker-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; padding: 9px var(--sp-3); font-size: var(--fs-sm); cursor: pointer; }
.symbol-picker-row:hover { background: var(--bg-hover); }
.symbol-picker-row .sp-price, .symbol-picker-row .sp-chg { text-align: right; font-family: var(--font-mono); }

/* =========================================================================
   Markets — multi-asset instrument table (markets.php / markets.js)
   ========================================================================= */
.mkt-table td, .mkt-table th { white-space: nowrap; }
.mkt-sym { display: flex; align-items: center; gap: 2px; }
.asset-ico--mono {
  display: inline-grid; place-items: center; width: 1.5em; height: 1.5em;
  margin-right: 7px; border-radius: 5px; font-size: .62em; font-weight: 800;
  letter-spacing: .02em; background: var(--bg-hover); color: var(--text-secondary);
  border: 1px solid var(--border-color); font-family: var(--font-sans);
}
.asset-ico.fa-oil-well, .asset-ico.fa-droplet { color: #4aa8f3; }
.asset-ico.fa-gem { color: #35c7c1; }
.asset-ico.fa-building-columns { color: #8b93b7; }
.asset-ico.fa-chart-line { color: #a97bf0; }
.asset-ico.fa-right-left { color: #4ac48a; }

.mkt-status { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.mkt-chip {
  font: 700 10px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--bg-hover); color: var(--text-muted);
}
.mkt-chip--live        { background: var(--success-soft); color: var(--success); }
.mkt-chip--delayed     { background: var(--warning-soft); color: var(--warning); }
.mkt-chip--simulated   { background: var(--warning-soft); color: var(--warning); }
.mkt-chip--unavailable { background: var(--bg-hover);     color: var(--text-muted); }
.mkt-chip--state-open   { background: var(--success-soft); color: var(--success); }
.mkt-chip--state-closed { background: var(--bg-hover);     color: var(--text-muted); }
.mkt-chip--state-pre, .mkt-chip--state-after { background: var(--warning-soft); color: var(--warning); }

/* Mobile — keep icon + symbol + price + 24h% only. */
@media (max-width: 640px) {
  .mkt-table .mkt-hide-sm { display: none; }
  .mkt-table td, .mkt-table th { padding-left: 8px; padding-right: 8px; }
  .mkt-status { flex-direction: column; align-items: flex-start; gap: 3px; }
}