@import url("../design-system/css/tokens.css");

/* Эволюция теста — layout и элементы, специфичные для учебного конструктора.
   Канон — autotests-builder: plaque controls слева, sticky terminal справа. */

.test-evolution__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.test-evolution__toolbar .panel__body {
  padding: var(--space-3) var(--space-4);
}

.test-evolution__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  width: 100%;
}

.test-evolution__presets .chip {
  border-color: var(--color-border);
  background: var(--color-surface);
}

/* Параметры — группы-секции с plaque controls */
.test-evolution__params {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.te-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.te-group__title {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 600;
}

.te-group__desc {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.te-group__params {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.te-group__params > * {
  min-width: 0;
  width: 100%;
}

/* Ручной режим — опции стека визуально приглушены (применяются в авто) */
.te-params--manual .te-group:not(:first-child) {
  opacity: 0.55;
}

.te-check-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.te-check-field__label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Выходная панель */
.test-evolution__output {
  display: block;
  padding: var(--space-3) var(--space-4);
  overflow: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}

.test-evolution__output-foot {
  padding: var(--space-2) var(--space-4);
}

.test-evolution__status {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* Проект: дерево + чипы файлов + код */
.te-project {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Колонка «Файлы» между конфигом и кодом — как sidebar в IDE.
   Модель configurator.css: 6 слотов — cfg=2, дерево=1, код=3. */
@media (min-width: 769px) {
  .configurator__layout--terminal {
    /* 3 колонки занимают всё: left-gutter для 2-колоночной схемы не нужен */
    --configurator-gutter: 0px;
    --configurator-gutter-gap: 0px;
    grid-template-columns:
      var(--configurator-cfg)
      var(--configurator-col-rest)
      calc(
        100% - var(--configurator-cfg) - var(--configurator-col-rest) -
          2 * var(--configurator-gap, var(--space-3))
      );
  }

  .configurator__layout--terminal > .test-evolution__nav {
    grid-column: 2 / 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
  }

  .configurator__layout--terminal > .test-evolution__aside {
    grid-column: 3 / 4;
  }

  /* aside/nav — sticky containing blocks: растянуть на весь ход колонки,
     иначе у panel--sticky нет хода и хром уезжает за вьюпорт. */
  .configurator__aside .test-evolution__output-panel,
  .configurator__aside .test-evolution__output-sticky,
  .test-evolution__nav > .panel--sticky {
    flex: 1 1 auto;
  }

  /* Когда колонка кончается, sticky подпирает панель снизу и её тело
     уходит под фикс-хедер — но шапка остаётся приклеенной: отдельный
     sticky на .panel__bar. overflow: clip обрезает по скруглению как
     hidden, но не создаёт scroll-контейнер (он гасил бы sticky). */
  .configurator__layout--terminal .panel--sticky {
    overflow: clip;
  }

  .configurator__layout--terminal .panel--sticky > .panel__bar {
    position: sticky;
    top: calc(var(--header-occupied-height) + var(--space-4));
    z-index: 3;
  }
}

/* Дерево каталогов — кликабельные файлы, вложенные details. */
.te-nav,
.te-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.te-nav ul {
  padding-left: var(--space-4);
}

.te-nav__item--dir > details > summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  line-height: 1.8;
  user-select: none;
}

.te-nav__file {
  display: block;
  width: 100%;
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--panel-code-color);
  font-size: var(--font-size-xs);
  line-height: 1.8;
  text-align: left;
  cursor: pointer;
}

.te-nav__file:hover {
  background: var(--color-surface-soft);
}

.te-nav__file.is-active {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
}

.te-nav__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* IDE-режим: конфиг заморожен, код редактируется. */
.test-evolution__main.is-locked {
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

#te-edit.is-on {
  color: var(--color-primary);
}

/* IDE-редактор: textarea с прозрачным текстом поверх подсвеченного pre.
   padding-left компенсирует гуттер .te-ln::before (3ch + 1.5ch + 1ch + 1px). */
.te-editor {
  position: relative;
}

.te-editor > .te-code {
  overflow: hidden;
}

.te-editor__input {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  padding-left: calc(var(--space-3) + 5.5ch + 1px);
  background: transparent;
  color: transparent;
  caret-color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  white-space: pre;
  overflow: hidden;
  resize: none;
  outline: none;
}

.te-editor__input:focus {
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

/* Run-гуттер как в IDE: колонка 2.4ch под иконку перед номером строки */
.te-code--run .te-ln {
  position: relative;
  padding-left: 2.4ch;
}

.te-editor--run .te-editor__input {
  left: calc(1px + var(--space-3) + 2.4ch);
  padding-left: 5.5ch;
}

.te-glyph {
  position: absolute;
  left: 0.2ch;
  top: 0;
  display: flex;
  align-items: center;
  width: 2ch;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-success);
  cursor: pointer;
  opacity: 0.65;
}

.te-glyph svg {
  display: block;
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
}

.te-glyph:hover {
  opacity: 1;
}

/* Поповер с командой запуска/дебага единицы */
.te-runpop {
  position: absolute;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 40rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
  box-shadow: 0 6px 24px rgb(0 0 0 / 45%);
  font-family: var(--font-ui);
}

.te-runpop__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.te-runpop__label {
  flex: 0 0 3.2rem;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.te-runpop__cmd {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.te-runpop__copy {
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}

.te-runpop__copy:hover {
  color: var(--color-text);
}

/* Строка удалённого запуска — отделена от локальных команд */
.te-runpop__row--jenkins {
  margin-top: var(--space-1);
  padding-top: var(--space-1);
  border-top: 1px solid var(--color-border);
}

.te-runpop__go {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-success);
  font: inherit;
  cursor: pointer;
}

.te-runpop__go:hover {
  text-decoration: underline;
}

.te-runpop__jenkins--off {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.te-runpop__sent {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.te-runpop__sent--ok {
  color: var(--color-success);
}

.te-runpop__sent--fail {
  color: var(--indicator-close, #f87171);
}

.te-runpop__jenkins a {
  color: var(--color-primary);
}

.tab[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.te-file-why {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
}

.te-code {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  line-height: 1.55;
  white-space: pre;
  counter-reset: te-ln;
}

/* IDE-гуттер: номер строки через ::before, не попадает в выделение */
.te-code .te-ln { display: block; }
.te-code .te-ln::before {
  counter-increment: te-ln;
  content: counter(te-ln);
  display: inline-block;
  box-sizing: content-box;
  width: 3ch;
  margin-right: 1.5ch;
  padding-right: 1ch;
  border-right: 1px solid currentColor;
  text-align: right;
  opacity: 0.28;
  user-select: none;
}

/* Числовой параметр: слайдер + степпер в одном слоте, подпись кейсов под полем */
.te-num-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
/* Колонка подписи фиксированной ширины — слайдеры всех зон
   стартуют с одной вертикали, без рваного левого края. */
.te-num {
  --plaque-mixed-label-col: 5.5rem;
}

.te-num-range {
  flex: 1;
  min-width: 72px;
  accent-color: var(--color-primary);
}
.te-num-cases {
  padding: 0 var(--space-2) var(--space-2);
  font-size: var(--font-size-xs, 12px);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.te-run {
  margin: 0;
  white-space: pre;
}

/* Блок файла: путь + зачем + код */
.te-fileblock {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  scroll-margin-top: var(--space-3);
}

.te-fileblock__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.te-fileblock__path {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.te-fileblock__why {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
}

/* Diff-режим */
.te-diff-empty {
  margin: 0;
  color: var(--color-text-muted);
}

.te-diff-file {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-2);
}

.te-diff-file__path {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.te-diff-file__path--added {
  color: #3fb950;
}

.te-diff-file__path--removed {
  color: #f85149;
}

.te-diff-file__path--changed {
  color: #d29922;
}

.te-diff {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  line-height: 1.5;
}

.te-diff__add {
  color: #3fb950;
  background: rgba(63, 185, 80, 0.08);
  display: block;
}

.te-diff__del {
  color: #f85149;
  background: rgba(248, 81, 73, 0.08);
  display: block;
}

.te-diff__ctx {
  color: var(--color-text-muted);
  display: block;
}

.te-diff__skip {
  color: var(--color-text-muted);
  display: block;
  font-style: italic;
}

/* Изменения */
.te-changes ul {
  margin: 0;
  padding-left: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.te-changes h3 {
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--font-size-sm);
}

.te-changes__conflicts li {
  color: var(--color-warning, #d29922);
}

/* Кнопка-фикс рядом с конфликтом */
#te-conflicts li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.te-conflict-fix {
  flex-shrink: 0;
  font-size: var(--font-size-xs);
}

/* Mobile: одна колонка */
@media (max-width: 900px) {
  .test-evolution__workspace {
    grid-template-columns: 1fr;
  }
}

/* ---------- run dock: нижняя панель прогона ---------- */

.te-dock {
  margin-top: var(--space-4, 16px);
  background: var(--color-surface, #141419);
  border-top: 1px solid var(--color-border, #2a2a33);
  scroll-margin-top: calc(var(--header-occupied-height, 56px) + var(--space-2, 8px));
}

.te-dock__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--color-border, #2a2a33);
}

.te-dock__title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.te-dock__status {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.te-dock__status--ok { color: var(--color-success); }
.te-dock__status--fail { color: var(--indicator-close, #f87171); }

.te-dock__close {
  font: inherit;
  font-size: 16px;
  line-height: 1;
  padding: 2px 8px;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
}

/* Колонки прогона: первая — стек панелей раннера
   (jenkins/junit/gradle/allure), затем selenoid и testops. */
.te-dock__panels {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px) var(--space-3, 14px) var(--space-3, 14px);
  align-items: start;
}

@media (max-width: 1200px) {
  .te-dock__panels { grid-template-columns: minmax(0, 1fr); }
}

.te-runstack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 8px);
  min-width: 0;
}

.te-runpanel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 140px;
  border: 1px solid var(--color-border, #2a2a33);
  border-radius: 6px;
  background: var(--color-surface-alt, #1b1b22);
  overflow: clip;
}

.te-runstack > .te-runpanel--console {
  height: 280px;
}

/* боковые панели тянутся на высоту стека раннера */
.te-dock__panels > .te-runpanel {
  height: auto;
  align-self: stretch;
}

.te-runpanel__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border, #2a2a33);
  background: var(--color-surface, #141419);
}

.te-runpanel__title {
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.te-runpanel__meta {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.te-runpanel__meta a { color: var(--color-primary); }

.te-runpanel__body {
  flex: 1;
  margin: 0;
  padding: 8px 10px;
  overflow: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-text, #e6e6ea);
}

.te-runpanel__log {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  word-break: break-all;
}

/* живой контент в панелях: iframe selenoid-ui и <video> сессии */
.te-runpanel__media {
  margin-bottom: var(--space-2, 8px);
  border: 1px solid var(--color-border, #2a2a33);
  border-radius: 4px;
  overflow: clip;
  background: #000;
}

.te-runpanel__media iframe,
.te-runpanel__media video {
  display: block;
  width: 100%;
  height: 160px;
  border: 0;
}

/* счётчики gradle test report */
.te-dock__counters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin-bottom: var(--space-2, 8px);
}

.te-dock__counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  padding: 4px 8px;
  border: 1px solid var(--color-border, #2a2a33);
  border-radius: 4px;
}

.te-dock__counter b {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text, #e6e6ea);
}

.te-dock__counter span {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* стандартный набор иконок в header'е панели (selenoid-ui / IDE-панели) */
.te-rp-icons {
  display: flex;
  align-items: center;
  gap: 1px;
  margin-left: auto;
}

.te-runpanel__meta + .te-rp-icons { margin-left: 6px; }

.te-rp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.te-rp-icon:hover {
  color: var(--color-text, #e6e6ea);
  background: var(--color-surface-alt, #23232b);
}

.te-rp-icon--on { color: var(--color-primary); }
.te-rp-icon--drag { cursor: grab; }

.te-rp-lock {
  display: inline-flex;
  align-items: center;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  color: var(--color-text-muted);
}

.te-rp-lock svg { width: 100%; height: 100%; }
.te-rp-lock--locked { color: var(--color-success); }

/* свёрнутая / скрытая / развёрнутая панель */
.te-runpanel--collapsed { height: auto; }
.te-runpanel--collapsed .te-runpanel__body { display: none; }
.te-runpanel--closed { display: none; }

.te-runpanel--max {
  position: fixed;
  z-index: 60;
  inset: calc(var(--header-occupied-height, 56px) + 8px) 16px 16px;
  height: auto;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* инфо-карточка из иконки i */
.te-rp-info {
  position: absolute;
  top: calc(100% + 4px);
  right: 4px;
  z-index: 70;
  width: 250px;
  padding: 10px 12px;
  border: 1px solid var(--color-border, #2a2a33);
  border-radius: 6px;
  background: var(--color-surface, #1b1b22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  line-height: 1.5;
  color: var(--color-text, #e6e6ea);
  text-transform: none;
  letter-spacing: normal;
}

.te-rp-info a {
  display: block;
  margin-top: 4px;
  color: var(--color-primary);
}

.te-runpanel__body .te-dock__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px solid var(--color-border, #23232b);
}

.te-runpanel__body a { color: var(--color-primary); }
.te-runpanel__body .te-dock__dim { color: var(--color-text-muted); }
.te-runpanel__body .te-dock__ok { color: var(--color-success); }
.te-runpanel__body .te-dock__bad { color: var(--indicator-close, #f87171); }