/* ============================================================================
   ТЕРМИНАЛ: сетка масштабируемых виджетов (стакан, график, бегущая строка,
   счёт, непокрытые позиции, роботы, заявка).
   Плоская система в стиле shadcn: те же токены, что и в style.css.
   ========================================================================== */

/* Компактная шапка терминала: заголовок и кнопки в ОДНУ строку, минимум отступов */
.term-head { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin: 0 0 8px; }
.term-head h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.term-actions { display: flex; gap: 6px; margin-left: auto; }
.term-actions button { min-height: 28px; padding: 3px 10px; font-size: 12px; line-height: 1.2; }
#terminal-panel { padding-top: 14px; }
@media (max-width: 560px) { .term-head { flex-wrap: wrap; } }

/* Кнопки заявки: по разные стороны, выровнены по столбцам стакана (1fr 1fr, тот же gap) */
.bk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-top: 4px; }
.bk-btns .term-btn { width: 100%; }

/* Сводка стакана: стенка покупок СЛЕВА, «в позиции» по ЦЕНТРУ, стенка продаж СПРАВА */
.bk-sum { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 10px; align-items: center; }
.bk-sum .bk-wall-b { text-align: left; }
.bk-sum .bk-pos { text-align: center; }
.bk-sum .bk-wall-a { text-align: right; }

/* ---------- сетка ---------- */
.term-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 40px;          /* шаг сетки: виджет кратен ему */
  gap: 10px;
  align-items: stretch;
}
.term-empty { grid-column: 1 / -1; }

/* ---------- виджет ---------- */
.term-w {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  overflow: hidden; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.term-w.dragging { opacity: .55; outline: 2px dashed var(--accent); }
.term-w.over { outline: 2px solid var(--accent); }
.term-h {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 4px 6px 4px 9px; border-bottom: 1px solid var(--border);
  background: var(--card-2); font-size: 12px; font-weight: 600; line-height: 1.2;
  cursor: move; user-select: none;
}
.term-h .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ Имя .sub совпадает с глобальным .sub в style.css (заголовки разделов,
   margin: 22px 0 10px) — из-за этого шапка виджета раздувалась до 65px.
   Поэтому здесь margin обнуляем явно. */
.term-h .sub { margin: 0; font-size: 11px; font-weight: 500; color: var(--muted); }
.term-btn {
  border: 1px solid transparent; background: transparent; color: var(--muted);
  cursor: pointer; padding: 1px 6px; border-radius: 6px; font-size: 13px; line-height: 1.3;
  min-height: 0;
}
.term-btn:hover { background: var(--hover); color: var(--text); border-color: var(--border); }
.term-btn.del:hover { color: var(--err); }
.term-b { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px; display: flex; flex-direction: column; }
.term-b.p0 { padding: 0; }
/* контейнер графика: ОБЯЗАТЕЛЬНО ограничен по высоте и обрезает содержимое.
   Иначе LWC с autoSize растит холст -> контейнер растёт -> холст растёт (бесконечный рост). */
.ch-host { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: hidden; position: relative; }

/* ручка масштабирования (тянется мышью, шаг = клетка сетки) */
.term-rz { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; z-index: 3; }
.term-rz::after {
  content: ""; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); opacity: .55;
}
.term-rz:hover::after { opacity: 1; border-color: var(--accent); }

/* ---------- бегущая строка ---------- */
.tape { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.tape-top { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 4px 6px; }
.tape-scroll { flex: 1 1 auto; min-height: 34px; overflow: hidden; position: relative; cursor: grab; }
.tape-scroll.grabbing { cursor: grabbing; }
.tape-run { display: flex; align-items: center; gap: 16px; white-space: nowrap; will-change: transform; }
.tick {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 1px 5px;
  border-radius: 6px; cursor: context-menu; font-size: 13px;
}
.tick:hover { background: var(--hover); }
.tick .tk { font-weight: 600; }
.tick .nm { color: var(--muted); font-size: 11px; }
.tick .pr { font-variant-numeric: tabular-nums; }
.tick.up .pr { color: var(--ok); }
.tick.down .pr { color: var(--err); }
.tape-watch { flex: 0 0 auto; max-height: 48%; overflow: auto; border-top: 1px solid var(--border); padding: 6px; }
.tape-watch .wl { display: flex; flex-wrap: wrap; gap: 6px; }
.tape-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px 2px 8px;
  border: 1px solid var(--border); border-radius: 999px; font-size: 12px; background: var(--card-2);
}
.tape-chip button { border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 0 2px; min-height: 0; }
.tape-chip button:hover { color: var(--err); }

/* контекстное меню */
.term-ctx {
  position: fixed; z-index: 70; min-width: 200px; padding: 4px;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); font-size: 13px;
}
.term-ctx button {
  display: block; width: 100%; text-align: left; border: none; background: transparent;
  color: var(--text); padding: 6px 9px; border-radius: 6px; cursor: pointer; min-height: 0;
}
.term-ctx button:hover { background: var(--hover); }
.term-ctx .sep { height: 1px; background: var(--border); margin: 4px 2px; }

/* ---------- стакан ---------- */
.obk { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; font-size: 12px; }
.obk h5 { margin: 0 0 4px; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.obk .row { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 1px 3px; font-variant-numeric: tabular-nums; }
.obk .row .bar { position: absolute; top: 0; bottom: 0; right: 0; opacity: .16; border-radius: 2px; }
.obk .ask .bar { background: var(--err); left: 0; right: auto; }   /* продажи — от центра (левый край) к правому, зеркально покупкам */
.obk .bid .bar { background: var(--ok); }                          /* покупки — от центра (правый край) к левому */
.obk .row span { position: relative; }
.obk .mid { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 11px; padding: 3px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); margin: 3px 0; }
/* строки, информационная строка, таблицы */
.obk .row.wall { background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 3px; }
.obk .row.wall span { font-weight: 700; }
.obk .row[data-price] { cursor: pointer; }
.obk .row[data-price]:hover { background: var(--hover); }

/* информационная строка графика (OHLC + объём под курсором) */
.ch-leg { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ch-leg b { color: var(--text); }

/* ---------- таблицы/списки виджетов ---------- */
.term-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.term-tbl th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--border); padding: 3px 4px; }
.term-tbl td { padding: 4px; border-bottom: 1px solid var(--border); }
.term-tbl tr:hover td { background: var(--row-hover); }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.kv b { font-variant-numeric: tabular-nums; }
.big { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- поиск инструмента внутри виджетов (единый UX с бегущей строкой) ---------- */
.term-b .tk-field { position: relative; width: 100%; min-width: 0; flex: 1 1 auto; }
.term-b .tk-res {
  display: none; max-height: 200px; overflow: auto;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); margin-top: 2px;
}
.term-b .tk-res.open { display: block; }
.term-b .tk-res .ticker-row {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; font-size: 12px; cursor: pointer;
}
.term-b .tk-res .ticker-row:hover { background: var(--hover); }
.term-b .tk-res .tk-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- формы внутри виджетов ---------- */
.term-b input, .term-b select { min-height: 30px; padding: 4px 8px; font-size: 12px; width: 100%; }
/* внутри виджета .hint должен быть компактным (глобальный .hint имеет margin 6px 0) */
.term-b .hint { margin: 0 0 4px; font-size: 12px; }
.term-row { display: flex; gap: 6px; align-items: center; }
.term-row > * { min-width: 0; }
.buy { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.sell { color: var(--err); border-color: color-mix(in srgb, var(--err) 40%, transparent); }
.term-note { font-size: 11px; color: var(--muted); margin-top: 6px; }
.term-note.err { color: var(--err); font-weight: 600; }