/* Раскладка терминала: список слева, график в центре, ордер справа,
   позиции внизу. На узком экране колонки складываются в одну. */

.terminal-body { overflow: hidden; }

.terminal {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 290px;
  grid-template-rows: minmax(0, 1fr) 210px;
  grid-template-areas:
    "watchlist chart order"
    "watchlist positions order";
  gap: 10px;
  padding: 10px;
  height: calc(100vh - 66px);
}

.pane {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ---------- список инструментов ---------- */
.watchlist { grid-area: watchlist; padding: 12px; gap: 10px; }
.search.sm { max-width: none; margin: 0; padding: 8px 12px; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  border-radius: 999px; padding: 4px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit;
}
.chip[data-active="true"] { background: var(--accent); border-color: var(--accent); color: #0a0d11; }

.wl-list { overflow-y: auto; flex: 1; margin: 0 -6px; }
.wl-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 10px; border: none; background: transparent; cursor: pointer;
  border-radius: 9px; text-align: left; font-family: inherit;
}
.wl-row:hover { background: #131920; }
.wl-row[data-active="true"] { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.wl-row img, .wl-row .glyph {
  width: 24px; height: 24px; border-radius: 6px; object-fit: contain;
  background: var(--paper-2); padding: 3px; flex: none;
}
.wl-row .glyph {
  display: flex; align-items: center; justify-content: center; padding: 0;
  font-family: Inter, system-ui, sans-serif; font-size: 11px; color: var(--accent);
}
.wl-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wl-id b { font-weight: 500; color: var(--ink); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-id i { font-style: normal; font-size: 11px; color: var(--muted); }
.wl-price { font-family: Inter, system-ui, sans-serif; color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.wl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rule); flex: none; }
.wl-dot.on { background: var(--up); }

/* ---------- график ---------- */
.chart-pane { grid-area: chart; }
.chart-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--rule);
}
.logo.md { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: var(--paper-2); padding: 6px; }
.logo.md.glyph { display: flex; align-items: center; justify-content: center; padding: 0; font-family: Inter, system-ui, sans-serif; font-size: 15px; color: var(--accent); }
.chart-id { min-width: 0; }
.chart-name { font-size: 25px; line-height: 1.1; }
.chart-sub { font-size: 12px; color: var(--muted); }
.chart-quote { display: flex; align-items: baseline; gap: 9px; }
.q-price { font-size: 26px; font-variant-numeric: tabular-nums; }
.q-chg { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--muted); }
.chart-stats { display: flex; gap: 22px; margin-left: auto; }
.chart-stats .k { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.chart-stats .v { font-family: Inter, system-ui, sans-serif; font-size: 15px; font-variant-numeric: tabular-nums; }
.tfs { display: flex; gap: 4px; }
.tfs button {
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  border-radius: 7px; padding: 4px 9px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.tfs button[data-active="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
#chart { flex: 1; min-height: 0; }

/* ---------- панель ордера ---------- */
.order-pane { grid-area: order; padding: 14px; overflow-y: auto; }
.order-pane .field { margin-bottom: 12px; }
.quickset { display: flex; gap: 5px; margin-top: 6px; }
.quickset button {
  flex: 1; border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  border-radius: 7px; padding: 5px 0; font-size: 12px; cursor: pointer; font-family: inherit;
}
.quickset button:hover { border-color: var(--muted); }
.check { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ink-2); margin-bottom: 14px; line-height: 1.4; }
.check input { width: auto; margin-top: 2px; }
.btn.wide { width: 100%; margin-top: 10px; }

/* ---------- позиции ---------- */
.positions { grid-area: positions; padding: 12px 14px; overflow: auto; }
.pos-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.pos-head h3 { font-family: Inter, system-ui, sans-serif; font-weight: 400; font-size: 18px; margin: 0; }
.pos-head span { font-size: 12px; color: var(--muted); }
.table.compact { border: none; }
.table.compact th { padding: 7px 10px; font-size: 10px; }
.table.compact td { padding: 8px 10px; font-size: 13px; }
.empty.sm { padding: 18px; font-size: 13px; }

@media (max-width: 1100px) {
  .terminal-body { overflow: auto; }
  .terminal {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto 420px auto auto;
    grid-template-areas: "watchlist" "chart" "order" "positions";
  }
  .wl-list { max-height: 260px; }
}