/* Оформление списка заказа: сетка, настройка колонок, ручка растягивания.
 *
 * ⚠️ САМИХ ШИРИН ЗДЕСЬ НЕТ. С 10.09.2026 `grid-template-columns` строит код —
 * `ui/zakaz/zakaz-columns.js`, функция `apply`. Причина: колонки стало можно прятать
 * и тянуть, а скрытая ячейка выпадает из раскладки и сдвигает все следующие под чужие
 * подписи. Значит состав и ширины пересчитываются вместе, а вариантов состава столько,
 * сколько сочетаний галочек, — в CSS их не перечислить.
 *
 * Раньше здесь лежали пять готовых наборов ширин и классы is-simple / is-blank.
 * Они удалены; классы больше никто не ставит. Правда о колонках — список COLUMNS
 * в zakaz-columns.js.
 */

/* ── Сетка ─────────────────────────────────────────────────────────
   Ширины задаёт JS (ui/zakaz/zakaz-columns.js) — здесь только сам факт «это сетка»
   и выравнивание. Так сделано с 10.09.2026, когда колонки стало можно прятать
   и тянуть: скрытая ячейка выпадает из раскладки, и все следующие съезжают под чужие
   подписи. Значит состав меняется вместе с ширинами, а вариантов состава столько,
   сколько сочетаний галочек, — в CSS их не перечислить.

   Раньше здесь лежали ПЯТЬ готовых наборов ширин (обычный, без тары, со второй «Едет»,
   список бланком и их пары). Они удалены: классы is-simple / is-blank больше никто
   не ставит, а мёртвое правило в CSS хуже отсутствующего — следующий читатель поверит,
   что сетка задаётся здесь, и будет править не то место. */
.list-head,
.row {
  display: grid;
  /* Ширины приходят ПЕРЕМЕННОЙ от родителя — её ставит zakaz-columns.js. Так строка
     получает сетку сама, едва родившись, и растягивание колонки не требует обойти
     все 371 строку: замер 10.09.2026 — обход стоил 100 мс на каждое движение мыши,
     колонка тянулась рывками. */
  grid-template-columns: var(--zakaz-cols);
  gap: 8px;
}

/* ⚠️ `align-items` задан ТОЛЬКО строке. Шапке его ставит styles.css
   (`.list-head { align-items: end }`) — подписи прижаты к низу, чтобы двухстрочный
   «Расход в день / будни / вых.» не отрывался от своего столбца (владелец 07.09.2026).
   Напишешь здесь `center` для обоих — этот файл подключён последним и молча перевернёт
   исход: специфичность одинаковая, побеждает то, что ниже. Поймано ревью 10.09.2026. */
.row { align-items: center; }

/* Ячейку, которой нет в составе колонок, прячет JS через `hidden`. Правило ниже —
   единственное, что осталось от прежнего скрытия классами: вторая «Едет» приходит
   не из настройки колонок, а из свойства точки (две поставки в пути). */
.rows:not(.has-slot2) .row-incoming2 { display: none; }

/* ── Порядок колонок ──────────────────────────────────────────────
   Место каждой колонки задаётся свойством order через переменную, которую ставит
   zakaz-columns.js на контейнер. Так перестановка не требует трогать 371 строку:
   переменная наследуется, а сетка раскладывает ячейки по order, не по разметке.
   Запасное число в var(...) — исходный порядок: если переменной нет, всё стоит как
   было задумано. */
.list-head > .col-name,   .row > .row-name-box   { order: var(--ord-name, 2); }
.list-head > .col-stock,  .row > .row-stock      { order: var(--ord-stock, 3); }
.list-head > .col-rate,   .row > .row-rate       { order: var(--ord-rate, 4); }
.list-head > .col-pack,   .row > .row-pack-input { order: var(--ord-pack, 5); }
.list-head > .col-fact,   .row > .row-manual     { order: var(--ord-fact, 6); }
.list-head > .col-reserve, .row > .row-reserve   { order: var(--ord-reserve, 7); }
.list-head > .col-safety, .row > .row-safety     { order: var(--ord-safety, 8); }
.list-head > .col-need,   .row > .row-need       { order: var(--ord-need, 9); }
.list-head > .col-order,  .row > .row-order      { order: var(--ord-order, 10); }
.row > .row-incoming:not(.row-incoming2)         { order: var(--ord-incoming, 11); }
.list-head > .col-incoming                       { order: var(--ord-incoming, 11); }
.list-head > .col-incoming2, .row > .row-incoming2 { order: var(--ord-incoming2, 12); }
.list-head > .col-unit,   .row > .row-unit       { order: var(--ord-unit, 13); }
.row > .row-mark                                 { order: var(--ord-mark, 1); }

/* ── Настройка колонок ────────────────────────────────────────────
   Галочки в две-три колонки, чтобы список умещался в высоту и не отжимал сам заказ.
   Оформление такое же, как у панели «Добавить позиции»: это одна и та же по смыслу
   вещь — настройка того, что видно на экране. */
.columns-panel {
  padding: 12px 16px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.columns-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px 16px;
  margin: 10px 0 12px;
}
.columns-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  cursor: pointer;
}
.columns-item input { cursor: pointer; }

/* ── Ручка «потянуть за край колонки» ─────────────────────────────
   Узкая полоска у правого края подписи. Видна только под мышью — иначе шапка
   зарябит вертикальными чёрточками; в Excel ровно так же: курсор меняется, когда
   наводишь на границу. */
.list-head > span { position: relative; }
.col-resize {
  position: absolute;
  top: 0;
  right: -7px;
  width: 14px;          /* под палец: девять точек мимо пальца, проверено вторым мнением */
  height: 100%;
  cursor: col-resize;
  z-index: 2;
  /* Палец на ручке тянет колонку, а не прокручивает список. */
  touch-action: none;
}
.col-resize::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 4px;
  width: 1px;
  height: 70%;
  background: var(--border);
  opacity: 0;
}
.list-head > span:hover .col-resize::after { opacity: 1; }
/* Пока тянут — курсор «раздвинуть» на всей странице, и текст не выделяется.
   Без этого мышь уезжает с ручки, и выделяются подписи соседних колонок. */
body.is-col-resizing { cursor: col-resize; user-select: none; }

/* «заполнено у N» рядом с названием колонки в настройке: предупреждение, что числа
   продолжат работать в расчёте, даже если колонку спрятать. */
.columns-filled { font-weight: 600; color: var(--muted); font-size: 12px; }

/* ── Перетаскивание колонок ───────────────────────────────────────
   Подпись можно взять и повести. Пока ведут — курсор «схватил», текст не выделяется,
   а место, куда встанет колонка, помечено толстой левой границей. */
.list-head > span { cursor: grab; }
.list-head > span:has(.col-resize):active { cursor: grabbing; }
body.is-col-moving { cursor: grabbing; user-select: none; }
.list-head > span.is-drop-target {
  box-shadow: inset 3px 0 0 0 var(--text);
}