/* Страницы импорта (семейство u5NN) — набор виджетов загрузки.

   Своего здесь минимум: полоса выполнения, счётчики, обрезка строки отказа и
   поля параметров. Остальное берётся из контура системы — `spec-list`,
   `table__data`, `badge--*`, `dpc-mode-tab`, `search-box`, `form__*`,
   `button--*`.

   Прежняя форма («одна галочка на объект, один период на всех, одна панель
   прогресса под кнопкой») снята вместе с последней переведённой страницей
   2026-09-07: панель возникала целиком и сдвигала страницу на каждом ответе
   опроса. */

/* ============================================
   Набор виджетов загрузки
   ============================================ */

.import-loads .spec-list__toolbar {
  align-items: end;
}

.import-loads__connection {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 240px;
}

/* ── Ячейка «Загрузка» ───────────────────────────────────────────────── */

.import-loads__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.import-loads__identity {
  display: contents;
}

/* ── Ячейка «Состояние»: шапка ───────────────────────────────────────── */

/* Способ запуска слева, статус — в правом верхнем углу строки загрузки. */
.import-loads__state-head {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 22px;
}

.import-loads__trigger {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Ячейка «Период» ─────────────────────────────────────────────────── */

/* Пикер периода схлопывается без нижней границы ширины: диалог у него
   вьюпортный, а полоса живёт в ячейке таблицы. */
.import-loads__period {
  min-width: 248px;
}

.import-loads__period-kind {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* ── Ячейка «Состояние»: тело ────────────────────────────────────────── */

/* Четыре строки заняты всегда: место под статус, время, полосу и шаг отведено
   сразу, а неизвестное показано прочерком. Иначе строка прыгала бы на каждом
   ответе опроса. */
.import-loads__state {
  display: grid;
  gap: var(--spacing-xs);
  min-width: 260px;
}

.import-loads__meter {
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  overflow: hidden;
}

.import-loads__meter-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.3s ease;
}

.import-loads__timing {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Одна строка на два вопроса: чем занята сейчас или чем кончилась. Обрезка —
   потому что у прогона бывают сотни ошибок на записях; всё целиком уходит в
   буфер кнопкой в правом верхнем углу строки. */
.import-loads__stage {
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.import-loads__stage--failed {
  color: var(--color-error);
}

/* ── Кнопка «скопировать для разбора» ────────────────────────────────── */

/* Есть всегда, а не только при отказе: в буфер уходит весь прогон — сессия,
   период, счётчики, подробности, — и он нужен не только когда что-то упало. */
.import-loads__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.import-loads__copy:hover {
  color: var(--color-text-primary);
  border-color: var(--color-primary);
}

/* ── Кнопка запуска ──────────────────────────────────────────────────── */

.import-loads__action {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  white-space: nowrap;
}

/* Дополнительные параметры запуска. */
.import-loads__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* Флажок дополнительного параметра — у той загрузки, у которой он есть. */
.import-loads__flag {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  color: var(--color-text-primary);
}

.import-loads__flag input {
  accent-color: var(--color-primary);
}

/* Поля отбора у той загрузки, у которой он есть. */
.import-loads__fields {
  display: grid;
  gap: var(--spacing-sm);
  max-width: 520px;
}

.import-loads__field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Общая таблица всех сценариев импорта. */
.import-loads--simplified {
  overflow: hidden;
}

.import-loads--simplified .spec-list {
  flex: 1;
  min-height: 0;
}

.import-loads--simplified .spec-list__toolbar {
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  padding-inline: 8px;
}

.import-loads--simplified .import-loads__connection {
  min-width: 200px;
}

.import-loads--simplified .import-loads__connection > .spec-list__note {
  display: none;
}

.import-loads--simplified .table-wrapper {
  overflow: auto;
  padding: 0 8px 8px;
}

.import-loads--simplified .table__data {
  table-layout: fixed;
  min-width: 1060px;
  width: 100%;
  /* Общая таблица имеет боковые margin по 0.5%; при width: 100% они дают скролл. */
  margin: 0;
  border-spacing: 0 6px;
  /* Прокруткой владеет обёртка: overflow на таблице мешает sticky-заголовку. */
  overflow: visible;
}

.import-loads--simplified .table__header-cell {
  background: color-mix(in srgb, var(--color-bg-primary) 90%, var(--color-text-primary));
  border-bottom: 1px solid var(--color-border);
  padding-block: 10px;
}

.import-loads--simplified .spec-list__row,
.import-loads--simplified .spec-list__row:hover {
  box-shadow: none;
}

.import-loads--simplified .spec-list__row > .table__cell {
  background: color-mix(in srgb, var(--color-bg-primary) 94%, transparent);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.import-loads--simplified .spec-list__row:nth-child(even) > .table__cell {
  background: color-mix(in srgb, var(--color-bg-primary) 96%, var(--color-text-primary));
}

.import-loads--simplified .spec-list__row > .table__cell:first-child {
  border-left: 1px solid var(--color-border);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.import-loads--simplified .spec-list__row > .table__cell:last-child {
  border-right: 1px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.import-loads--simplified .spec-list__row:hover > .table__cell,
.import-loads--simplified .spec-list__row:focus-within > .table__cell {
  background: color-mix(in srgb, var(--color-bg-primary) 94%, var(--color-primary));
  border-color: color-mix(in srgb, var(--color-primary) 65%, var(--color-border));
}

/* Ширины: три колонки знают свой размер в пикселях и не растут от ширины окна —
   пикер периода, кнопка и четыре счётчика одинаковы всегда. Остаток делят
   название и состояние, и название берёт больше: описание в подробном режиме
   раскладывалось в семь строк на 22 %, а соседи стояли пустыми. Состояние
   получает `auto`, то есть весь остаток: считать его вычитанием из процента
   значило бы пересчитывать формулу при каждой правке соседа. */
.import-loads--simplified .table__header-cell:first-child {
  width: 26%;
}

.import-loads--simplified .table__header-cell:nth-child(2) {
  width: 272px;
}

.import-loads--simplified .table__header-cell:nth-child(3) {
  width: 132px;
}

.import-loads--simplified .table__header-cell:nth-child(4) {
  width: 164px;
}

.import-loads--simplified .table__header-cell:nth-child(5) {
  width: auto;
}

/* Верхний край — общий у всех пяти ячеек: при выравнивании по центру кнопка и
   счётчики повисали посреди пустоты, как только описание раскладывалось в
   несколько строк. */
.import-loads--simplified .table__cell {
  vertical-align: top;
  padding: 10px 12px;
}

/* Одна форма и палитра категории в фильтре и в строке. */
.import-loads--simplified [data-load-group] {
  --load-group-color: var(--color-text-secondary);
}

.import-loads--simplified [data-load-group="catalog"] {
  --load-group-color: var(--color-primary);
}

.import-loads--simplified [data-load-group="documents"] {
  --load-group-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-success));
}

.import-loads--simplified [data-load-group="orders"] {
  --load-group-color: var(--color-warning);
}

.import-loads--simplified [data-load-group="finance"] {
  --load-group-color: var(--color-success);
}

.import-loads--simplified [data-load-group="analytics"] {
  --load-group-color: var(--color-accent);
}

.import-loads--simplified .import-loads__groups .dpc-mode-tab,
.import-loads--simplified .import-loads__group {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--load-group-color) 35%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--load-group-color) 12%, var(--color-bg-secondary));
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

.import-loads--simplified .import-loads__groups .dpc-mode-tab:hover {
  border-color: color-mix(in srgb, var(--load-group-color) 65%, var(--color-border));
  background: color-mix(in srgb, var(--load-group-color) 18%, var(--color-bg-primary));
}

.import-loads--simplified .import-loads__groups .dpc-mode-tab--active {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-bg-primary));
  box-shadow: none;
}

.import-loads--simplified .import-loads__groups .dpc-mode-tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.import-loads--simplified .import-loads__group {
  flex-shrink: 0;
}

.import-loads--simplified .import-loads__title {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.import-loads--simplified .spec-list__name {
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
}

/* Описание — три строки, дальше многоточие и подсказка целиком по наведению.
   Без обрезки подробный режим отдавал одной загрузке восемь строк высоты, а
   остальные четыре ячейки ряда стояли при этом пустыми: колонка узкая, и шире
   ей не стать — справа фиксированные пикер, кнопка и счётчики. Полный текст
   живёт в карточке, куда ведёт код загрузки.

   Правило смотрит на `:not(.spec-list--compact)` не для красоты: у краткого
   режима ровно один способ действия — `display: none` на описании (см.
   components.css), и специфичность у него та же, а per-page файл подключён
   позже темы. То есть `display` из этого блока молча выключал «Кратко»
   целиком. Режим отбора при этом остаётся: искать в кратком режиме по
   скрытому описанию нельзя, и `haystack` это знает.

   Строкой список ограничен по той же причине: `spec-list__note` носит и подпись
   селектора кабинета в тулбаре, и она пряталась/показывалась вместе с режимом,
   хотя к описанию загрузки отношения не имеет. */
.import-loads--simplified
  .spec-list:not(.spec-list--compact)
  .spec-list__row
  .spec-list__note {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.import-loads--simplified .import-loads__identity {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.import-loads--simplified .spec-list__code {
  padding: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
}

.import-loads--simplified .import-loads__task {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Копирование отчёта — слева от способа запуска. Правый верхний угол
   состояния занимает бейдж; кнопка и подписи остаются в первой строке. */
.import-loads--simplified .import-loads__state-cell {
  position: relative;
}

.import-loads--simplified .import-loads__state-cell .import-loads__copy {
  position: absolute;
  top: 10px;
  left: 12px;
  border-color: transparent;
}

.import-loads--simplified .import-loads__state-cell .import-loads__copy:hover {
  border-color: var(--color-primary);
}

.import-loads--simplified .import-loads__state-head {
  padding-left: 26px;
  justify-content: space-between;
}

.import-loads--simplified .import-loads__state-head > .badge {
  margin-left: auto;
  flex-shrink: 0;
}

.import-loads--simplified .import-loads__inline-params {
  margin-top: 12px;
}

.import-loads--simplified .import-loads__inline-params:empty {
  display: none;
}

.import-loads--simplified .import-loads__flag {
  align-items: flex-start;
  font-size: var(--font-size-xs);
}

.import-loads--simplified .import-loads__flag input {
  flex-shrink: 0;
  margin-top: 3px;
}

.import-loads--simplified .import-loads__task a {
  color: var(--color-primary);
  text-decoration: none;
}

.import-loads--simplified .import-loads__task a:hover,
.import-loads--simplified .import-loads__task a:focus-visible {
  text-decoration: underline;
}

.import-loads--simplified .import-loads__state {
  min-width: 0;
  gap: 4px;
}

.import-loads--simplified .import-loads__timing,
.import-loads--simplified .import-loads__stage {
  line-height: 16px;
  min-height: 16px;
}

.import-loads--simplified .import-loads__timing {
  white-space: nowrap;
}

.import-loads--simplified .import-loads__meter {
  height: 4px;
}

.import-loads--simplified .import-loads__meter--idle {
  visibility: hidden;
}

.import-loads--simplified .import-loads__meter--unknown .import-loads__meter-fill {
  animation: import-loads-progress 1.5s ease-in-out infinite alternate;
}

@keyframes import-loads-progress {
  from { transform: translateX(0); }
  to { transform: translateX(185%); }
}

@media (prefers-reduced-motion: reduce) {
  .import-loads--simplified .import-loads__meter--unknown .import-loads__meter-fill {
    animation: none;
  }
}

/* Четыре пары в столбик — ровно столько же строк, сколько у состояния справа, и
   именно они задают высоту ряда. Поэтому шаг здесь плотнее обычного: каждый
   лишний пиксель множится на пятнадцать загрузок. */
.import-loads--simplified .import-loads__indicators {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 2px 8px;
  width: max-content;
  max-width: 100%;
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

.import-loads--simplified .import-loads__indicators > div {
  display: contents;
}

.import-loads--simplified .import-loads__indicators dt {
  color: var(--color-text-secondary);
}

.import-loads--simplified .import-loads__indicators dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.import-loads--simplified .import-loads__action {
  justify-content: center;
}

/* Кнопка выглядит кнопкой: заливка, рамка, своя высота. Прежняя `Subtle` без
   фона и рамки читалась ссылкой — в таблице, где каждая строка сама по себе
   кликабельной не является, это единственный элемент, который надо нажать, и
   он был наименее заметным. Цвет несёт смысл: зелёная — запустить, красная —
   прервать идущий прогон. */
.import-loads--simplified .import-loads__action > .import-loads__run-button {
  flex: 0 0 106px;
  width: 106px;
  height: 30px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--color-success) 45%, var(--color-border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-bg-primary));
  color: var(--color-success);
  font-weight: 500;
}

.import-loads--simplified .import-loads__run-button:hover:not(:disabled) {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 26%, var(--color-bg-primary));
  color: var(--color-success);
}

.import-loads--simplified .import-loads__run-button:disabled {
  border-color: var(--color-border);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

.import-loads--simplified .import-loads__action--running > .import-loads__run-button {
  border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-border));
  background: color-mix(in srgb, var(--color-error) 14%, var(--color-bg-primary));
  color: var(--color-error);
}

.import-loads--simplified .import-loads__action--running .import-loads__run-button:hover:not(:disabled) {
  border-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 26%, var(--color-bg-primary));
  color: var(--color-error);
}

.import-loads--simplified .import-loads__button-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}

.import-loads--simplified .import-loads__button-content svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}