/**
 * lines.css
 * Страница: documents/<вид>/form — форма документа любого вида
 * Блок: шапка документа и строки (таблица [data-lines])
 *
 * Что внутри: сжатая шапка, раскладка формы в окне, миниатюра товара
 * в строке.
 */

/* --- 0. Панель табличной части --- */

/*
 * Полоса кнопок над таблицей строк — как панель табличной части в 1С:
 * загрузить из файла, наполнить, добавить строку.
 *
 * Правила здесь свои, а не наборные классы вёрстки, потому что общие
 * классы дали на телефоне четыре высокие карточки: кнопки сжимались
 * по ширине, текст переносился по словам, и каждая вырастала точек
 * до ста двадцати (снимок Александра 06.09.2026).
 *
 * Кнопка не тянется и не сжимается — переносится целиком на вторую
 * строку. Высота полосы равна высоте кнопки, и на компьютере она
 * выглядит так же, как раньше.
 */
.document-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
    padding: .35rem .4rem;
}

.document-toolbar .btn {
    flex: 0 0 auto;

    /* Текст внутри кнопки не переносится: подпись у неё одна строка. */
    white-space: nowrap;
}

/*
 * На узком экране подписи прячутся, остаются значки с подсказкой:
 * четыре кнопки с полными надписями в 390 точек не помещаются
 * никаким переносом (слово Александра 06.09.2026).
 */
@media (max-width: 575.98px) {
    .document-toolbar .btn .bi {
        margin: 0;
    }

    .document-toolbar .btn-text {
        display: none;
    }
}


/* --- 0.1. Прокрутка таблицы строк: шапка и итоги остаются на виду --- */

/*
 * Длинный документ прокручивается внутри своего блока, а не страницей.
 *
 * Так сделано в списках (`RecordList`), и по той же причине: на двухсотой
 * строке без шапки не понять, где «было», а где «стало», а итоги внизу
 * уезжают из виду совсем — человек не видит, сколько всего набрал
 * (замечание Александра 06.09.2026). Способ тот же, что у списков,
 * второго не заводим (правило 1.9).
 *
 * Потолок высоты — экран минус то, что занято сверху: шапка кабинета,
 * заголовок, реквизиты, панель кнопок. В окне это правило снимается:
 * там высоту держит само окно.
 */
.document-table .table-responsive {
    max-height: calc(100vh - 24rem);
    overflow: auto;
}

/*
 * Шапка держится у верхнего края таблицы.
 *
 * `background-clip: padding-box` — тот же приём, что в списках: фон
 * не заходит под границу ячейки, иначе на стыке столбцов остаётся
 * полоска без фона, и сквозь неё при прокрутке видна набегающая
 * строка (07.09.2026, разбор координатора на списках, тот же случай
 * ждал и здесь).
 */
.document-lines > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--bs-body-bg, #fff);
    background-clip: padding-box;
}

/*
 * Итоги держатся у нижнего края: сколько строк, сколько штук и суммы —
 * это то, ради чего человек и смотрит на длинный документ.
 *
 * Линия сверху рисуется тенью, а не рамкой: рамку на липкой строке
 * браузер прокручивает вместе с ячейкой, и она то появляется,
 * то пропадает.
 */
.document-lines > tfoot > tr > td {
    position: sticky;
    /*
     * К низу своего прокручиваемого блока, без дополнительного
     * отступа. Строка состояния кабинета и подвал окна находятся
     * снаружи этого блока и уже отнимают собственную высоту. Отступ
     * на `--wms-footer` сдвигал итоги внутрь таблицы и накрывал ими
     * единственную или последнюю строку ввода (задача #170).
     */
    bottom: 0;
    z-index: 3;
    background: var(--bs-body-bg, #fff);
    background-clip: padding-box;
    box-shadow: inset 0 1px 0 var(--bs-border-color, #dee2e6);
}

/*
 * В окне липкое цепляется не за верх и низ тела, а за край его
 * же отступа (`top: 0` у липкого считается от границы содержимого,
 * то есть от края отступа, а не от края блока) — между настоящим
 * краем и шапкой остаётся зазор в те же 12 точек, что и отступ,
 * и сквозь него при прокрутке видна набегающая строка (замер
 * координатора 07.09.2026: тело — 202, шапка стала — 214).
 *
 * Убираем отступ сверху и снизу у самого тела и переносим его внутрь
 * содержимого — на шапку документа и на низ таблицы. Слева и справа
 * отступ остаётся: там липкого нет, зазор там никому не виден.
 */
.wms-window-body:has(.record-form) {
    padding-top: 0;
    padding-bottom: 0;
}

.wms-window-body .record-form {
    margin-top: 12px;
}

.wms-window-body .document-table {
    margin-bottom: 12px;
}

/*
 * Таблица строк в окне всегда занимает ровно ширину окна — без
 * горизонтальной прокрутки, при любой ширине (задача №28 трекера).
 *
 * До этого прокрутка вбок была желаемым поведением на широком окне
 * (координатор 07.09.2026: длинные заголовки вида — «Средняя цена
 * со скидкой» — рвались по одному слову без неё), а перенос заголовков
 * без прокрутки включался только в узком окне (порог по ширине
 * контейнера, задача №20 трекера, второй заход). Александр проверил
 * решение №20 на своём телефоне («версия для ПК», окно шире 480 CSS-
 * точек, второй снимок задачи №28) и застал именно старую, ещё не
 * убранную ветку с прокруткой — значит порога тут быть не должно
 * вовсе, перенос заголовков нужен при любой ширине окна документа,
 * а не только у самых узких.
 */
@media (min-width: 768px) {
    .wms-window-body .document-table,
    .wms-window-body .document-table .table-responsive {
        width: 100%;
        min-width: 0;
    }

    /*
     * `table-layout: fixed` — с явной шириной у каждой ячейки шапки:
     * без неё браузер меряет столбцы по содержимому (`auto`) и отдаёт
     * лишнее место тому, кто «попросил» больше, — поле штук (обычные
     * 9rem) забирало половину ширины, а столбец номенклатуры сжимался
     * до одной буквы, хотя ему назначили `30%` (поймано на снимке
     * дважды, задача №20 трекера, второй заход: `auto` не гарантирует
     * процент, если явной ширины не хватает соседям). У `fixed`
     * в расчёт идёт только первая строка — шапка, поэтому проценты
     * ниже стоят на `th`, а не на `td`: ширина ячеек тела эту
     * раскладку не меняет.
     */
    .wms-window-body .document-lines {
        table-layout: fixed;
    }

    .wms-window-body .document-lines > thead > tr > th,
    .wms-window-body .document-lines > tbody > tr > td,
    .wms-window-body .document-lines > tfoot > tr > td {
        padding: .25rem .3rem;
        font-size: 12px;
        overflow: hidden;
    }

    /* Номер строки — самый узкий столбец, ему хватает одной-двух
       цифр. */
    .wms-window-body .document-lines > thead > tr > th.document-line-number-head {
        width: 6%;
        padding-left: 0;
        padding-right: 0;
    }

    /* Было/стало по каждому складу и цена/сумма вида — поровну между
       собой, доля одна на все четыре рода столбцов. */
    .wms-window-body .document-lines > thead > tr > th.document-stock-head,
    .wms-window-body .document-lines > thead > tr > th[data-line-extra] {
        width: 12%;
    }

    /*
     * Столбец ввода — 16%: доли выше (6 + 30 + 12×2 + 16 + 12×2) дают
     * ровно 100%, иначе при `table-layout: fixed` остаток либо
     * пустует, либо браузер распределяет его на глаз.
     */
    .wms-window-body .document-lines > thead > tr > th.document-line-quantity-cell {
        width: 16%;
    }

    /* Поле ввода занимает всю свою (уже узкую) ячейку — иначе
       браузерная кайма числа поверх и так тесного столбца съедала
       ещё несколько точек. */
    .document-line-quantity-cell input {
        width: 100%;
        padding: 0 .25rem;
    }
}

/*
 * Крестик строки держится у правого края тела окна, как кнопки
 * действий в списке: без этого на широкой строке до него нужно
 * сначала докрутить, хотя убирают строку чаще, чем смотрят
 * на последний столбец.
 *
 * `background-clip: padding-box` — тот же приём, что у шапки и
 * подвала выше: без него на стыке с соседней ячейкой остаётся
 * полоска без фона.
 */
.wms-window-body .document-lines > tbody > tr > td.document-line-remove,
.wms-window-body .document-lines > thead > tr > th.document-line-remove {
    position: sticky;
    right: 0;
    background: var(--bs-body-bg, #fff);
    background-clip: padding-box;
}

.wms-window-body .document-lines > tbody > tr > td.document-line-remove {
    z-index: 2;
}

/*
 * Реквизиты шапки документа — общий класс `.record-form`, стиль
 * лежит в своём файле `record-form.css`: 07.09.2026 то же нужно
 * стало карточке поставки и карточке задания, второй раз не считаем
 * (правило 0.6).
 */

/* --- 2. Форма в окне --- */

/*
 * В окне крутится тело окна целиком, своей прокрутки у таблицы нет.
 *
 * Раньше было наоборот: тело окна стояло на месте (`overflow: hidden`),
 * а строки прокручивались в собственном блоке внутри себя, своей
 * прокруткой — второй способ на один экран, свой для окон документа.
 * Решение Александра 07.09.2026: у любого окна с таблицей крутится
 * тело окна, а не вложенный блок; шапка столбцов и подвал итогов
 * липнут к его краям своей же прокруткой (`position: sticky`, строки
 * ниже) — заводить для окна второй контейнер не нужно.
 *
 * Тело окна и так прокручивается само по себе: `max-height`/`overflow`
 * заданы в `windows.css`, для всех окон разом, второй раз здесь
 * не пишем. Здесь снимается только то, что раньше отдавало прокрутку
 * таблице внутри окна, — то же самое, что задаёт потолок высоты
 * на странице (строка 72 выше), в окне он не нужен: высоту держит
 * тело окна.
 */
.wms-window-body .document-table .table-responsive {
    max-height: none;
    overflow: visible;
}

/*
 * После группировки размеров настоящие `thead` и `tfoot` документа
 * выносятся общим механизмом списков в отдельные полосы
 * (`record-list-float.js`). Полоса находится уже вне таблицы, поэтому
 * прежний `position: sticky` на её ячейках на неё не действует.
 * В окне крутится `.wms-window-body`: держим названия столбцов сверху
 * у того же контейнера.
 */
@media (min-width: 768px) {
    .wms-window-body .document-table .record-list-float-head {
        position: sticky;
        top: 0;
        z-index: 5;
    }

    /*
     * Строка артикула остаётся над его размерами, но ниже липкой
     * полосы названий. Высоту полосы записывает общий механизм после
     * каждой раскладки, в том числе при смене плотности таблицы.
     */
    .wms-window-body .document-lines > tbody > tr.document-group-header {
        position: sticky;
        top: var(--record-list-float-head-height, 21px);
        z-index: 4;
    }
}

/* --- 2а. Столбец номенклатуры --- */

/*
 * Столбец резиновый, пока таблице хватает места, и ужимается, когда
 * не хватает, — но не уже ста точек.
 *
 * Название единицы длинное: артикул, наименование с витрины, размер.
 * В одну строку оно занимало полэкрана, и столбцам остатков места
 * не оставалось. Перенос разрешён только здесь: сжатый вид держит
 * строки в одну линию (правило 6.5), но у этого столбца уже стоит
 * картинка в 50 точек, и две строки текста в ту же высоту влезают
 * даром (слово Александра 06.09.2026).
 */
.document-lines .document-item-cell {
    min-width: 100px;
    white-space: normal;
    line-height: 1.2;
}

.document-lines .document-item-head {
    min-width: 100px;
}

/*
 * Столбец ввода штук — постоянная ширина, как и была встроенным
 * `style` раньше (задача №20 трекера, второй заход: вынесена классом,
 * чтобы её можно было ужать в узком окне ниже без `!important` —
 * встроенный `style` весит больше любого класса).
 */
.document-line-quantity-cell {
    width: 9rem;
}

/*
 * Артикул и наименование рисует общий виджет ячейки товара
 * (`ProductCell`, классы `product-cell-*` в `lists.css`): столбец
 * «Товар» выглядит одинаково в списке товаров, в документах
 * и в заказах площадки (правило 0.8). Своих правил для этих двух
 * строк здесь больше нет — иначе они разъедутся с остальной системой.
 */

/*
 * Столбцу номенклатуры без горизонтальной прокрутки нужна своя ширина,
 * иначе он выталкивает соседние (задача №20 трекера, второй заход,
 * слово Александра: длинное наименование можно поделить на три
 * строки). Название режется на три строки многоточием — это витрина
 * товара, целиком её видно в подсказке и в карточке товара, здесь
 * достаточно узнать, что за строка.
 *
 * Порога по ширине окна здесь больше нет (задача №28 трекера):
 * держать прокрутку вбок на широком окне пробовали (координатор
 * 07.09.2026) — так заголовки вида не рвались по одному слову, — но
 * Александр проверил это же решение на своём телефоне («версия для
 * ПК», окно шире прежнего порога 480 CSS-точек) и застал прежнюю
 * прокрутку снова: значит нужного порога тут в принципе нет, перенос
 * и ужатые столбцы — единственное поведение окна документа, при любой
 * его ширине. Снаружи — по-прежнему экран не уже 768px: теснее
 * работает своя карточная раскладка строки (раздел 5), у неё другая
 * ширина столбца номенклатуры.
 */
@media (min-width: 768px) {
    /*
     * Ширина — на шапке (`document-item-head`), не на теле: у
     * `table-layout: fixed` в расчёт идёт только первая строка
     * (комментарий у соседнего правила выше).
     */
    .document-lines .document-item-head {
        width: 30%;
    }

    .document-lines .document-item-cell .product-cell-title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    /*
     * Снимок в строке — тот же приём, что и у номенклатуры выше:
     * поуже, чтобы освободить место тексту (обычные 38 точек — ширина
     * для просторного десктопа).
     */
    .document-lines .document-item-cell .document-line-photo {
        max-width: 26px;
    }

    /*
     * Заголовки своих столбцов вида («Средняя цена со скидкой»,
     * «Сумма со скидкой») переносятся на естественных парах слов —
     * «Средняя цена / со скидкой», а не по одному слову на строку:
     * без ширины у колонки браузер перенёс бы как попало («Средняя /
     * цена / со / скидкой», снимок Александра, задачи №20 и №28
     * трекера). Ширину держит не `min`/`max-width` (при `table-layout:
     * fixed` они не считаются вовсе), а сам процент у каждого рода
     * столбца (правило выше) — здесь только разрешение переноситься.
     */
    .wms-window-body .document-lines > thead > tr > th:not(.document-item-head) {
        white-space: normal;
        line-height: 1.15;
    }
}

/* --- 3. Крестик строки --- */

/*
 * Своё правило фокуса убрано (задачи №124–125, Александр 11.09.2026):
 * крестик — не кнопка, а настоящий Bootstrap `btn-close`
 * ({@see \common\widgets\Button::runClose()}), и вид под фокусом даёт
 * сам Bootstrap, без своего css поверх.
 */

/* --- 4. Заголовки столбцов остатка --- */

/*
 * Заголовок в две строки: сверху «Было» или «Стало», снизу склад.
 *
 * В одну строку «Было, Склад в Подольске» растягивало столбец
 * до полутора сотен точек. У перемещения таких столбцов четыре,
 * и таблица уезжала за край экрана, хотя цифры в ней — три-четыре
 * знака (замечание Александра 06.09.2026).
 *
 * Название склада мельче и приглушённое: оно уточнение, а не сам
 * заголовок. Длинное обрезается многоточием — целиком оно есть
 * в подсказке и в реквизитах, где склад и выбирали.
 */
.document-stock-head {
    /* Ширина по содержимому, но не шире шести знаков названия. */
    max-width: 7rem;
}

.document-stock-word {
    display: block;
    line-height: 1.1;
}

.document-stock-place {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--bs-secondary-color, #6c757d);
}

/* Пустая вторая строка места не занимает: у документа с одним
   складом её нет вовсе. */
.document-stock-place:empty {
    display: none;
}

/*
 * Картинка товара в строке.
 *
 * Мелкая и в пропорции снимков площадки, 3:4, целиком: квадратная
 * рамка режет товару голову и ноги, а по ним его и узнают
 * (правило 6.0.3).
 *
 * Высота задаёт размер, ширина считается сама — тогда строка
 * не растягивается, какой бы снимок ни пришёл.
 */
.document-line-photo {
    /*
     * Пятьдесят точек по высоте — по слову Александра 06.09.2026.
     * Строка от этого становится выше (было 29), но товар в документе
     * узнают по картинке, а на мелкой её не разглядеть.
     *
     * Ширина считается сама, по пропорции снимка. Потолок 38 — это
     * 3:4 от высоты: у Wildberries снимки вертикальные, и квадратная
     * рамка резала бы товару голову и ноги (правило 6.0.3).
     *
     * Высота — потолком, а не жёстко (15.09.2026, Татьяна и Александр:
     * «для фотографии очень много выделено места в высоту, просто белые
     * поля»): при жёсткой высоте 50 и ширине не больше 26–38 вертикальный
     * снимок вписывался по ширине, а поле оставалось 50 в высоту — с
     * пустотой сверху и снизу внутри самого снимка. Теперь поле ровно
     * по картинке: ширина ограничена, высота по пропорции, потолок 50.
     */
    height: auto;
    max-height: 50px;
    width: auto;
    max-width: 38px;
    object-fit: contain;
    border-radius: 2px;
    vertical-align: middle;
}

/* --- 4а. Группы по артикулу --- */

/*
 * Строки одного артикула собраны под общей строкой — как на странице
 * «Товары» с группировкой (слово Александра 15.09.2026): строка
 * артикула несёт фото и название, строки размеров — низкие, без фото,
 * с одним размером вместо имени. Собирает скрипт (`regroup()`),
 * здесь только вид; классы те же по смыслу, что `record-group-*`
 * у списка, но своя таблица — свои имена, чтобы правила списка
 * сюда не просачивались.
 */
.document-lines > tbody > tr.document-group-header > td {
    font-weight: 600;
    background: var(--bs-tertiary-bg, #f8f9fa);
    cursor: pointer;
}

.document-group-toggle {
    display: inline-block;
    width: 1em;
    text-align: center;
    color: var(--bs-secondary-color, #6c757d);
}

.document-lines > tbody > tr.document-group-member > td {
    padding-top: .1rem;
    padding-bottom: .1rem;
}

.document-lines > tbody > tr.document-group-member [data-line-photo] {
    display: none;
}

/* Размер в строке группы — справа, у столбцов с числами (слово
   Александра 15.09.2026), а не слева под артикулом. */
.document-lines > tbody > tr.document-group-member .document-item-cell {
    font-size: .9em;
    text-align: right;
}

.document-lines > tbody > tr.document-group-member .document-item-cell .product-cell {
    justify-content: flex-end;
    text-align: right;
}

/*
 * В редактировании строка размера остаётся настоящим селектом: его можно
 * раскрыть и выбрать другой товар. Закрытое поле показывает только размер,
 * как обычный текст в режиме просмотра, и не раздувает строку повтором
 * артикула и наименования.
 */
.document-lines > tbody > tr.document-group-member .document-group-size-select .wms-select-toggle {
    min-height: 0;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: .9em;
    line-height: 1.2;
    text-align: right !important;
}

.document-lines > tbody > tr.document-group-member .document-group-size-select .wms-select-document-main {
    overflow-wrap: normal;
    white-space: nowrap;
}

.document-lines > tbody > tr.document-group-member .form-control {
    min-height: 0;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: .9em;
}

.document-group-hidden {
    display: none;
}

/*
 * Заставка над строками, пока скрипт собирает группы (докблок
 * `DocumentTable::run()`): коробочка та же, что на странице целиком
 * (`.preloader` в макете, кадры `preloader-shake` оттуда же). Через
 * десять секунд уходит сама — документ не должен остаться запертым,
 * если скрипт не отработал.
 */
.document-lines-holder {
    position: relative;
}

.document-lines-cover {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: var(--bs-body-bg, #fff);
    transition: opacity .2s;
    animation: document-lines-cover-give-up 0s linear 10s forwards;
}

@keyframes document-lines-cover-give-up {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

/* Сама коробочка и её скачок — в windows.css (`wms-box-shake`),
   одним правилом на окно и на эту заставку. */
.document-lines-cover svg {
    color: #6c757d;
}

.document-lines-cover.is-done {
    opacity: 0;
    pointer-events: none;
}

/* Знак над номерами: свернуть или раскрыть все артикулы разом. */
.document-group-toggle-all {
    margin-left: .25rem;
    cursor: pointer;
}

/* Плюс/минус внутри ячейки товара — только для телефона (ниже);
   на широком экране знак стоит в столбце номеров. */
.document-group-toggle-mobile {
    display: none;
}

/*
 * Телефон: строки — карточки (раздел 5), и строка артикула — такая же
 * карточка, серая: плюс/минус, фото, артикул с названием, а суммы
 * «Было / Штук / Стало» — рядом числами с подписями, как у строки
 * размера (слово Александра 15.09.2026: на телефоне суммы съезжали,
 * а свернуть было нечем). Столбец номеров на телефоне скрыт, поэтому
 * знак — свой, внутри ячейки товара.
 */
/* Мини-таблица сумм в строке артикула — только на телефоне. */
.document-group-mini {
    display: none;
}

@media (max-width: 767.98px) {
    .record-list .document-lines[data-lines] > tbody > tr.document-group-header {
        background: var(--bs-tertiary-bg, #f8f9fa);
        cursor: pointer;

        /*
         * Липнет к верху, пока листают её размеры или гонят «Далее»
         * по полям: иначе с третьего размера уже не видно, к какому
         * артикулу и фото вбиваешь штуки (снимок Александра 15.09.2026).
         * Следующий артикул, дойдя до верха, сменяет предыдущий.
         * Работает потому, что на телефоне обёртка таблицы без своей
         * прокрутки (overflow visible в раскладке карточек) — липкое
         * считается от тела окна.
         */
        position: sticky;
        top: 0;
        z-index: 4;
    }

    /*
     * Липкое считается от ближайшего предка с прокруткой. У обёртки
     * таблицы строк своя прокрутка (`overflow: auto`, раздел 0.1) —
     * на телефоне она не крутится, крутится тело окна или страница,
     * но объявленная прокрутка всё равно делает её точкой отсчёта,
     * и строка артикула «липла» к обёртке, которая уезжает вместе
     * со всем (снимок Александра 15.09.2026). Снимаем.
     */
    .document-table .table-responsive,
    .wms-window-body .document-table .table-responsive {
        overflow: visible;
        max-height: none;
    }

    /* Суммы в своих столбцах на телефоне не нужны — они в мини-таблице. */
    .record-list .document-lines[data-lines] > tbody > tr.document-group-header > td[data-group-sum] {
        display: none;
    }

    /* Свёрнутые размеры: правило карточки «строка — flex» выше сильнее
       общего `.document-group-hidden`, поэтому скрытие — той же силы. */
    .record-list .document-lines[data-lines] > tbody > tr.document-group-hidden {
        display: none;
    }

    .document-group-toggle-mobile {
        display: inline-block;
        margin-right: .4rem;
    }

    /*
     * Мини-таблица: подписи столбцов один раз сверху, под ними суммы
     * (слово Александра 15.09.2026). Столбцы одной ширины с числами
     * в строках размеров ниже — так числа читаются столбиками.
     */
    .record-list .document-lines[data-lines] .document-group-mini {
        display: table;
        width: 100%;
        margin-top: .35rem;
        border-collapse: collapse;
        table-layout: fixed;
    }

    .record-list .document-lines[data-lines] .document-group-mini th {
        font-size: 10px;
        font-weight: 400;
        color: var(--bs-secondary-color, #6c757d);
        text-align: right;
        padding: 0 .2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .record-list .document-lines[data-lines] .document-group-mini td {
        font-size: 12px;
        font-weight: 600;
        text-align: right;
        padding: 0 .2rem;
    }

    /* Строки размеров: без фото, без подписей у чисел — подписи
       уже в мини-таблице выше; числа — столбиками той же ширины. */
    .document-lines > tbody > tr.document-group-member [data-line-photo] {
        display: none;
    }

    /* Ячейка товара у строки размера на телефоне не нужна: размер
       стоит над полем «Штук» (ниже, через data-size), а строка —
       одна линия чисел (слово Александра 15.09.2026). */
    .record-list .document-lines[data-lines] > tbody > tr.document-group-member .document-item-cell {
        display: none;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-member > td[data-mobile-label]::before {
        content: none;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-member > td.document-line-quantity-cell[data-size]::before {
        content: attr(data-size);
        display: block;
        font-size: 10px;
        line-height: 1.1;
        color: var(--bs-secondary-color, #6c757d);
        text-align: right;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-member > td[data-line-balance],
    .record-list .document-lines[data-lines] > tbody > tr.document-group-member > td:has([data-line-quantity]),
    .record-list .document-lines[data-lines] > tbody > tr.document-group-member > td[data-line-after] {
        flex: 1 1 0;
        text-align: right;
        padding: 0 .2rem;
    }
}

/* --- 5. Карточка строки на телефоне --- */

/*
 * Общая карточная раскладка списка (`lists.css`, `record-list .table`,
 * подключается автоматически через `labelWindowTables()` в
 * `windows.js`) кладёт КАЖДОЕ поле своей строкой «подпись слева,
 * значение справа» — годится для обычного списка (Товары, Заказы),
 * но у строки документа шесть-семь числовых столбцов (номенклатура,
 * было, штук, стало, ещё цена и сумма у отгрузки), и выходило по семь
 * строк на товар и столько же на итог (снимок Александра, задача №20
 * трекера, первый заход не подошёл).
 *
 * Здесь — своя, плотная раскладка именно для строк документа (общий
 * виджет `DocumentTable`, не по шаблонам — правило 9): номенклатура
 * с фото — своя строка; было/штук/стало и доп. столбцы вида — второй
 * строкой мелкими подписями перед числом, а не отдельной строкой
 * на каждое поле. Подписи — атрибут `data-mobile-label`, который
 * кладёт сам виджет (короче, чем текст двухстрочной шапки столбца,
 * и без слипшихся слов вроде «БылоПодольске»).
 *
 * Селектор с атрибутом `[data-lines]` весит больше общего
 * `.record-list .table`, поэтому побеждает без `!important` — тот же
 * приём, что и у самого общего правила (единая специфичность —
 * не заплатка, а расчёт).
 */
@media (max-width: 767.98px) {
    .record-list .document-lines[data-lines] > thead {
        display: none;
    }

    .record-list .document-lines[data-lines] > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: .6rem;
        row-gap: .15rem;
        padding: .35rem .25rem;
        border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    }

    .record-list .document-lines[data-lines] > tbody > tr:last-child {
        border-bottom: 0;
    }

    /* Построчная подпись общей раскладки здесь не нужна — своя,
       мелкая, перед числом (ниже, по data-mobile-label). */
    .record-list .document-lines[data-lines] > tbody > tr > td::before,
    .record-list .document-lines[data-lines] > tfoot > tr > td::before {
        content: none;
    }

    .record-list .document-lines[data-lines] > tbody > tr > td,
    .record-list .document-lines[data-lines] > tfoot > tr > td {
        display: block;
        padding: 0;
        text-align: left;
        min-width: 0;
    }

    /* Номер строки — на телефоне не нужен, места ему не даём. */
    .record-list .document-lines[data-lines] > tbody > tr > td:first-child {
        display: none;
    }

    /* Номенклатура с фото — своя строка во всю ширину, первой. */
    .record-list .document-lines[data-lines] .document-item-cell {
        flex: 1 1 auto;
        min-width: 0;
        order: 1;
    }

    /* Крестик убрать строку — рядом с названием, в конце первой строки. */
    .record-list .document-lines[data-lines] > tbody > tr > td.document-line-remove {
        order: 2;
        flex: 0 0 auto;
        width: auto;
    }

    /*
     * Было / штук / стало / доп. столбцы вида — второй строкой, мелким
     * шрифтом, подпись перед числом. `:has()` находит ячейку ввода без
     * своего класса под мобильный CSS — он у неё уже один на всю
     * систему (`data-line-quantity`), заводить второй незачем
     * (правило 0.6).
     */
    .record-list .document-lines[data-lines] > tbody > tr > td[data-line-balance],
    .record-list .document-lines[data-lines] > tbody > tr > td:has([data-line-quantity]),
    .record-list .document-lines[data-lines] > tbody > tr > td[data-line-after],
    .record-list .document-lines[data-lines] > tbody > tr > td[data-line-extra] {
        order: 3;
        flex: 0 0 auto;
        font-size: 12px;
        white-space: nowrap;
    }

    .record-list .document-lines[data-lines] > tbody > tr > td[data-mobile-label]::before,
    .record-list .document-lines[data-lines] > tfoot > tr > td[data-mobile-label]::before {
        content: attr(data-mobile-label) ' ';
        font-size: 10px;
        color: var(--bs-secondary-color, #6c757d);
    }

    .record-list .document-lines[data-lines] td:has([data-line-quantity]) input {
        display: inline-block;
        width: 4.5rem;
        height: 24px;
        padding: 0 .25rem;
        font-size: 12px;
        vertical-align: middle;
    }

    /* Итоговая строка — тем же приёмом, в одну-две строки. */
    .record-list .document-lines[data-lines] > tfoot > tr {
        display: flex;
        flex-wrap: wrap;
        column-gap: .6rem;
        row-gap: .15rem;
        padding: .3rem .25rem;
    }

    /*
     * Общий мобильный подвал RecordList поднимается над строкой состояния
     * кабинета (`bottom: var(--wms-footer)`). В окне документа строка
     * состояния находится снаружи самого окна, а подвал с кнопками уже
     * ограничивает прокручиваемое тело снизу. Поэтому дополнительный
     * отступ оставлял между итогами и кнопками видимую строку документа.
     * Внутри окна итоги примыкают прямо к нижнему краю тела.
     */
    .wms-window-body .record-list .document-lines[data-lines] > tfoot {
        bottom: 0;
    }

    .record-list .document-lines[data-lines] > tfoot > tr > td:empty,
    .record-list .document-lines[data-lines] > tfoot > tr > td:first-child,
    .record-list .document-lines[data-lines] > tfoot > tr > td.document-line-remove {
        display: none;
    }

    .record-list .document-lines[data-lines] > tfoot > tr > td {
        font-size: 12px;
    }
}

/*
 * --- 6. Телефон: плотная раскладка групп (15.09.2026, слово Александра:
 * «строчки не помещаются, блямба сверху огромная, кнопки огромные») ---
 *
 * С открытой клавиатурой у окна остаётся треть экрана. Строка артикула —
 * одна линия: знак, фото, артикул, справа мини-таблица сумм. Строка
 * размера — одна линия: крестик, размер слева от поля, «было», поле,
 * «стало». Правила ниже перекрывают раздел 5 и мобильную часть 4а —
 * стоят после них и с тем же или большим весом.
 */
@media (max-width: 767.98px) {
    /* Строка артикула — одна линия. */
    .record-list .document-lines[data-lines] > tbody > tr.document-group-header {
        flex-wrap: nowrap;
        align-items: center;
        gap: .3rem;
        padding: .15rem .3rem;
        row-gap: 0;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-header > td.document-item-cell {
        display: flex;
        align-items: center;
        gap: .3rem;
        min-width: 0;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-header .product-cell {
        display: flex;
        align-items: center;
        gap: .3rem;
        min-width: 0;
        flex: 1 1 auto;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-header .product-cell-text {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Вторая строка (название витрины) — лишняя, артикула хватает. */
    .record-list .document-lines[data-lines] > tbody > tr.document-group-header .product-cell-title {
        display: none;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-header .document-line-photo,
    .record-list .document-lines[data-lines] > tbody > tr.document-group-header .wms-gallery-thumb {
        max-height: 28px;
        max-width: 22px;
        height: auto;
        width: auto;
        margin: 0;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-header .document-line-photo-box {
        line-height: 0;
    }

    /* Мини-таблица — справа, в той же линии, без внешней ширины. */
    .record-list .document-lines[data-lines] .document-group-mini {
        display: inline-table;
        width: auto;
        margin: 0 0 0 auto;
        flex: 0 0 auto;
        table-layout: auto;
    }

    .record-list .document-lines[data-lines] .document-group-mini th {
        font-size: 9px;
        line-height: 1;
        padding: 0 .3rem;
    }

    .record-list .document-lines[data-lines] .document-group-mini td {
        font-size: 11px;
        line-height: 1.1;
        padding: 0 .3rem;
    }

    /* Мини-таблица — всегда второй строкой, на всю ширину: первая
       строка целиком под название артикула (слово Александра
       15.09.2026: «чтобы название влезало полностью, а суммы — новой
       строкой»). */
    .record-list .document-lines[data-lines] > tbody > tr.document-group-header > td.document-item-cell {
        flex-wrap: wrap;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-header .document-group-mini {
        flex: 1 1 100%;
        width: 100%;
        margin: .1rem 0 0 0;
        table-layout: fixed;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-header .document-group-mini th,
    .record-list .document-lines[data-lines] > tbody > tr.document-group-header .document-group-mini td {
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Строка размера — одна линия, без отступов. */
    .record-list .document-lines[data-lines] > tbody > tr.document-group-member {
        flex-wrap: nowrap;
        align-items: center;
        gap: .3rem;
        padding: .1rem .3rem;
        row-gap: 0;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-member > td.document-line-remove {
        order: 0;
        flex: 0 0 1.3rem;
        width: auto;
        padding: 0;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-member > td.document-line-remove .btn {
        padding: 0 .2rem;
        font-size: .85rem;
        line-height: 1;
    }

    /* Ширины ячеек одинаковые на всех строках — числа встают столбцами,
       а не пляшут по содержимому (снимок Александра 15.09.2026). */
    .record-list .document-lines[data-lines] > tbody > tr.document-group-member > td[data-line-balance],
    .record-list .document-lines[data-lines] > tbody > tr.document-group-member > td[data-line-after] {
        flex: 0 0 3.8rem;
        min-width: 0;
        font-size: 12px;
        line-height: 1.2;
        padding: 0 .15rem;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-member > td[data-line-extra] {
        flex: 1 1 0;
        min-width: 0;
        font-size: 12px;
        line-height: 1.2;
        padding: 0 .15rem;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Размер — слева от поля, в одной линии с ним, не над ним. */
    .record-list .document-lines[data-lines] > tbody > tr.document-group-member > td.document-line-quantity-cell {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: .3rem;
        flex: 0 0 7.2rem;
        padding: 0 .15rem;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-member > td.document-line-quantity-cell[data-size]::before {
        display: inline;
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
    }

    .record-list .document-lines[data-lines] > tbody > tr.document-group-member td.document-line-quantity-cell input {
        width: 3.6rem;
        height: 26px;
        padding: 0 .25rem;
        font-size: 12px;
    }

    /* Итоги под таблицей — мелко и в одну линию. */
    .record-list .document-lines[data-lines] > tfoot > tr {
        padding: .15rem .3rem;
        column-gap: .5rem;
        font-size: 11px;
    }
}

/* --- 0.2. Список «Действия» над строками --- */

/*
 * Пункт — название и строка-пояснение под ним (слово Александра
 * 15.09.2026: «построчно написано, что действие приведёт к тому-то»).
 * Ширина списка — чтобы пояснение читалось, но не шире экрана телефона.
 */
.document-actions {
    min-width: 20rem;
    max-width: calc(100vw - 2rem);
    padding: .25rem 0;

    /* Видны три пункта, дальше прокрутка внутри списка (слово
       Александра 15.09.2026): длинная портянка не раскрывалась бы
       на весь экран — ни на компьютере, ни на телефоне. */
    max-height: 13rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.document-action {
    white-space: normal;
    padding: .4rem .8rem;
}

.document-action-title {
    display: block;
    font-weight: 500;
}

.document-action-hint {
    display: block;
    margin-top: .1rem;
    font-size: 11px;
    line-height: 1.25;
    color: var(--bs-secondary-color, #6c757d);
}

.document-action:disabled .document-action-hint,
.document-action.disabled .document-action-hint {
    color: var(--bs-tertiary-color, #adb5bd);
}

/*
 * В журнале документов видов уже восемь. Чтобы список не превращался
 * в длинную портянку, одновременно видны четыре компактных пункта,
 * остальные прокручиваются внутри. Пояснение прижато к названию,
 * ширины хватает для одной строки текста на обычном экране.
 */
.document-create-actions {
    width: 32rem;
    max-height: min(8rem, calc(100vh - 2rem));
    padding: .15rem 0;
}

.document-create-actions .document-action {
    padding: .2rem .65rem;
}

.document-create-actions .document-action-title {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
}

.document-create-actions .document-action-hint {
    margin-top: 0;
    font-size: 10px;
    line-height: 1.1;
}

/* На узком экране подпись «Действия» остаётся: без неё кнопка списка —
   такой же квадратик, каким были прежние. */
@media (max-width: 575.98px) {
    .document-toolbar .dropdown-toggle .btn-text {
        display: inline;
    }
}

/* Блоки-уведомления в документе (ошибки загрузки файла, предупреждение
   по остаткам WB): закрываемые, с потолком высоты и прокруткой внутри —
   сотня строк ошибок не должна растягивать окно (15.09.2026). */
.document-note {
    max-height: 14rem;
    overflow-y: auto;
}

.document-note .btn-close {
    position: sticky;
    float: right;
    top: 0;
}