/*
 * list-mobile.css
 * Страница: все, где есть списки (виджет RecordList)
 * Блок: полоса над списком на телефоне и два её окна
 *
 * На мониторе поля отбора стоят в таблице, каждое над своим столбцом:
 * видно, что к чему относится, и отбирать можно не отрываясь от списка.
 *
 * На телефоне так не выходит. Столбцов нет — строка превращается
 * в карточку, — и поля выстраиваются столбиком: восемь полей занимают
 * пол-экрана, и до первой записи надо прокручивать. Поэтому там они
 * убираются в окно, а сверху остаётся полоса: поиск и две кнопки.
 *
 * Устроено как в приложении Wildberries: продавец сидит там каждый
 * день, и переучиваться его заставлять незачем (правило 0.8).
 *
 * Что внутри:
 * 1. Полоса: видна только на узком экране
 * 2. Поле поиска и кнопки
 * 3. Окно отбора: поля столбиком с подписями
 * 4. Окно сортировки: направление и список полей
 */

/* --- 1. Полоса --- */

/*
 * На мониторе полосы нет вовсе. Не `display: none` у самой полосы,
 * а правило на весь блок: так же прячется строка отбора на телефоне,
 * и оба правила стоят рядом — видно, что это две стороны одного
 * решения.
 */
.record-list-mobile {
    display: none;
}

@media (max-width: 767.98px) {
    .record-list-mobile {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .6rem 1rem;
    }

    /*
     * Строка отбора внутри таблицы прячется: её поля переезжают
     * в полосу и в окно.
     *
     * Прячем именно строку целиком, а не поля по одному: пустая
     * строка шапки оставила бы над списком полосу в палец высотой.
     */
    .record-list .record-list-filter-row {
        display: none;
    }

    /* --- 2. Поле поиска и кнопки --- */

    .record-list-quick {
        flex: 1 1 auto;
        min-width: 0;
    }

    /*
     * Поле занимает всю отведённую ширину. Обёртка полю не мешает:
     * она нужна только чтобы скрипт знал, что откуда взял.
     */
    .record-list-quick .record-list-filter-holder,
    .record-list-quick .record-list-filter-field {
        width: 100%;
    }

    /*
     * Поле той же высоты, что и кнопки рядом.
     *
     * В таблице поля отбора мелкие — они стоят в шапке и должны быть
     * незаметны. Здесь наоборот: поле стоит в одном ряду с кнопками,
     * и разная высота читается как небрежность. К тому же в него
     * набирают пальцем, а не мышью.
     */
    .record-list-quick .form-control,
    .record-list-quick .form-select {
        /*
         * Высота берётся из той же переменной, что у кнопок рядом.
         *
         * В единицах шрифта её задавать нельзя: на экранах уже
         * 575 точек базовый шрифт уменьшается, и поле сжималось
         * до 35 точек, а кнопки оставались 38 — заданные прямо
         * в точках. Разница в три точки, но в одном ряду она
         * бросается в глаза.
         */
        height: var(--wms-touch, 2.5rem);
        font-size: 1rem;
    }

    /*
     * Кнопки квадратные и крупные: в них целятся пальцем, а не мышью.
     * Сорок точек — тот размер, ниже которого начинают промахиваться.
     */
    .record-list-tool {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;

        /* Та же высота, что у поля рядом, и ширина ей под стать. */
        width: var(--wms-touch, 2.5rem);
        height: var(--wms-touch, 2.5rem);
        padding: 0;
    }

    /* --- 3. Окно отбора --- */

    /*
     * Поле и его подпись — одной строкой, подпись сверху мелким серым.
     * Без подписи непонятно, что это за поле: в таблице её роль играл
     * заголовок столбца.
     */
    .record-list-filter-line {
        margin-bottom: 1rem;
    }

    .record-list-filter-caption {
        margin-bottom: .25rem;
        font-size: .8125rem;
        color: var(--bs-secondary-color, #6c757d);
    }

    /*
     * В окне поля крупнее, чем в таблице: там они мелкие, потому что
     * стоят в шапке и должны быть незаметны, а здесь это единственное
     * содержимое экрана, и в них набирают пальцем.
     */
    .record-list-filters-body .form-control,
    .record-list-filters-body .form-select {
        padding-top: .5rem;
        padding-bottom: .5rem;
        font-size: 1rem;
    }

    /* --- 4. Окно сортировки --- */

    /*
     * Поле сортировки — строка во всю ширину: кружок справа, название
     * слева. Нажимается вся строка, а не один кружок: попасть пальцем
     * в кружок размером с горошину трудно.
     */
    .record-list-sort-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
        padding: .75rem 0;
        border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, .1));
        cursor: pointer;
    }

    .record-list-sort-item:last-child {
        border-bottom: 0;
    }

    /* Кружок справа, как в приложении площадки. */
    .record-list-sort-item .form-check-input {
        order: 2;
        flex: 0 0 auto;
        margin: 0;
    }
}

/* --- 2. Карточка записи: как в приложении площадки --- */

/*
 * Снимок Александра 06.09.2026: карточка занимала полэкрана, каждое
 * поле шло отдельной строкой «подпись слева, значение справа», и на
 * телефон помещались два документа. В приложениях Ozon и Wildberries
 * карточка — это три строки без подписей, где каждое значение стоит
 * на своём месте.
 *
 * Роли ячеек объявляет список (`data-m`), раскладку дают эти правила:
 *
 *   [галочка] Заголовок                        Состояние
 *             Вторая строка серым                  дата
 *   [поле]                        числа   сумма   шеврон
 *
 * Второй заход, после первого снимка: галочка выбора и кнопка удаления
 * занимали по своей строке, поле себестоимости — ещё одну, шеврон —
 * четвёртую. Выходило 175 точек вместо 90. Теперь галочка стоит рядом
 * с заголовком, кнопки уехали под шеврон, поле встало слева в строку
 * чисел, а сам шеврон — в её правый край.
 *
 * Включается только у списков с ролями (`record-block-cards`).
 */

/*
 * Ячейка шеврона на компьютере не показывается вовсе: она есть
 * в каждой строке, а в шапке её нет — таблица съехала бы вправо.
 */
.record-card-more {
    display: none;
}

@media (max-width: 767.98px) {

    .record-block-cards .record-list .table > tbody > tr {
        display: grid;
        /*
         * `minmax(0, 1fr)`, а не просто `1fr`, и это главное здесь.
         *
         * У доли `1fr` наименьший размер по умолчанию — по содержимому.
         * Значит колонка с текстом не ужимается меньше самого длинного
         * слова, и обрезка многоточием не срабатывает: заголовок товара
         * вылезал из своей дорожки на полсотни точек и налезал
         * на состояние. `min-width: 0` у самой ячейки этого не лечит —
         * ограничение сидит в дорожке, а не в ячейке.
         */
        grid-template-columns: auto minmax(0, 1fr) auto auto auto;
        align-items: center;
        gap: 1px 8px;
        margin-bottom: 7px;
        padding: 8px 10px;
        border: 0;
        border-radius: 10px;
        background: var(--bs-body-bg, #fff);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12);

        /*
         * Всё, что не влезло, обрезается по краю карточки.
         *
         * Во второй строке ячеек несколько, и колонки под них растут
         * по содержимому: длинное название склада растянуло бы карточку
         * шире экрана, и появилась бы прокрутка вбок — на телефоне это
         * худшее, что может случиться со списком.
         */
        overflow: hidden;
    }

    .record-block-cards .record-list .table > tbody > tr:last-child {
        margin-bottom: 0;
    }

    /* Подписей в карточке нет: они съедали половину ширины. */
    .record-block-cards .record-list .table > tbody > tr > td::before {
        display: none;
    }

    .record-block-cards .record-list .table > tbody > tr > td {
        display: block;
        padding: 0;
        text-align: left;
        min-width: 0;
    }

    /*
     * Пустая ячейка места не занимает.
     *
     * В журнале сумма есть только у отгрузки, у прихода и пересчёта
     * ячейка пуста — так решил Александр. Без этого правила у них
     * в третьей строке зияла бы дыра (предупредил помощник два).
     */
    .record-block-cards .record-list .table > tbody > tr > td:empty {
        display: none;
    }


    /*
     * Селектор длинный намеренно: у главной колонки списка есть своё
     * мобильное правило («заголовок карточки во всю ширину»), и оно
     * сильнее короткого — из-за него заголовок товара вылезал
     * из своей колонки и налезал на подпись состояния.
     */
    .record-block-cards .record-list .table > tbody > tr > td[data-m="title"] {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        padding-bottom: 0;

        /*
         * Ячейка занимает всю дорожку — это важнее, чем кажется.
         *
         * Сперва здесь стояло `justify-self: start`, чтобы номер
         * документа не вставал по центру. Но с ним элемент сетки
         * перестаёт растягиваться по дорожке и сжимается к своему
         * содержимому: заголовок выходил за колонку на полсотни точек
         * и налезал на состояние, а обрезка многоточием не срабатывала,
         * потому что обрезать было нечего — ячейка ровно по тексту.
         *
         * Выравнивание решается проще — текстом внутри ячейки.
         */
        justify-self: stretch;
        text-align: left;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Состояние — рядом с заголовком, мелко и серым. */
    /*
     * Состояние держит свою ширину и не даёт заголовку на себя
     * налезть: колонка узкая, а длинное слово обрезается многоточием.
     */
    .record-block-cards td[data-m="status"] {
        grid-column: 3 / 5;
        grid-row: 1;
        justify-self: end;
        max-width: 7rem;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
        color: var(--bs-secondary-color, #6c757d);
        white-space: nowrap;
    }

    /*
     * Дата — последней колонкой второй строки, чтобы не попасть
     * в середину: вторая строка заполняется слева направо, и без
     * явной колонки дата вставала между видом и складом.
     */
    .record-block-cards td[data-m="date"] {
        grid-column: 5;
        grid-row: 2;
        justify-self: end;
        font-size: 11px;
        color: var(--bs-secondary-color, #6c757d);
        white-space: nowrap;
    }

    /*
     * Первая клетка второй строки занята заранее.
     *
     * Во второй строке ячеек бывает несколько — в журнале это вид
     * и два склада, «Приход товара · → Коледино», — и колонку им
     * назначить нельзя: они наложились бы друг на друга. Сетка
     * раскладывает их сама, но начинала с первой колонки, под значком,
     * и строка шла вразнобой. Пустая клетка сдвигает начало под текст.
     */
    .record-block-cards .record-list .table > tbody > tr::before {
        content: '';
        grid-column: 1;
        grid-row: 2;
    }

    .record-block-cards td[data-m="line2"] {
        grid-row: 2;
        font-size: 12px;
        color: var(--bs-secondary-color, #6c757d);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * Поле ввода — слева в строке чисел, узкое. Своей строки ему
     * не даём: себестоимость правят и с телефона, но ради неё карточка
     * расти не должна.
     */
    .record-block-cards td[data-m="field"] {
        grid-column: 1 / 3;
        grid-row: 3;
    }

    .record-block-cards td[data-m="field"] .record-list-input {
        /*
         * `inline-block`, не унаследованный от Bootstrap `.form-control`
         * `display: block; width: 100%` — блочный инпут всегда начинает
         * свою строку сам, и подпись перед ним (`::before` ниже) вставала
         * отдельной строкой сверху, а не рядом (задача №18 трекера).
         */
        display: inline-block;
        vertical-align: middle;
        width: auto;
        max-width: 5.5rem;
        height: 24px;
        font-size: 12px;
    }

    /*
     * Подпись перед числом — мелкая и серая.
     *
     * Без неё в строке стояли голые цифры «0» и «0,00», и понять,
     * что это остаток, а что деньги, было нельзя (замечание
     * Александра по снимку).
     */
    .record-block-cards .record-list .table > tbody > tr > td[data-m="count"]::before,
    .record-block-cards .record-list .table > tbody > tr > td[data-m="amount"]::before,
    .record-block-cards .record-list .table > tbody > tr > td[data-m="field"]::before {
        display: inline;
        content: attr(data-label) " ";
        font-size: 10px;
        font-weight: 400;
        color: var(--bs-secondary-color, #6c757d);
    }

    /*
     * Чисел в строке бывает несколько: в журнале это «1 строка»
     * и «4 шт». Колонку им не назначаем — сетка выложит их подряд,
     * иначе они легли бы в одну клетку друг на друга.
     */
    .record-block-cards td[data-m="count"] {
        grid-row: 3;
        justify-self: start;
        font-size: 12px;
        color: var(--bs-secondary-color, #6c757d);
        white-space: nowrap;
    }

    /* Деньги — последней колонкой строки, правым краем. */
    .record-block-cards td[data-m="amount"] {
        grid-column: 5;
        padding-left: 6px;
        grid-row: 3;
        justify-self: end;
        font-weight: 600;
        white-space: nowrap;
    }

    .record-block-cards td[data-m="note"] {
        grid-column: 1 / -1;
        grid-row: 4;
        font-size: 12px;
        color: var(--bs-secondary-color, #6c757d);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /*
     * Галочка выбора — маленькая, рядом с заголовком. Своей строки
     * ей не даём: из-за неё карточка росла на два десятка точек.
     */
    .record-block-cards .record-list-choice {
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .record-block-cards .record-list-choice .form-check-input {
        width: 15px;
        height: 15px;
        margin: 0;
    }

    /*
     * Кнопки записи — под шеврон.
     *
     * Красная корзина в каждой карточке и место занимает, и палец
     * к ней попадает случайно при прокрутке. Открыл карточку —
     * получил все действия.
     */
    .record-block-cards .record-list .table > tbody > tr > td.record-list-actions {
        display: none;
    }

    /*
     * Селектор той же длины, что у правила скрытия выше — иначе
     * оно и побеждает: специфичность считает классы и теги, а у
     * короткой записи (без `.record-list .table > tbody >`) тегов
     * меньше, хотя классов поровну. Та же ловушка, что и с обычными
     * полями чуть ниже, — там уже подписано, здесь забыли при
     * заведении кнопок (задача №13 трекера, слово Александра:
     * «на мобильной версии нет кнопок управления» — карточку
     * раскрывали, а кнопки не появлялись).
     */
    .record-block-cards .record-list .table > tbody > tr.record-card-open > td.record-list-actions {
        /*
         * Flex и прижатие вправо — как на десктопе (`lists.css`,
         * раздел 3.6): «Кнопки — у правого края» — общее правило
         * интерфейса и для карточки тоже, не только для таблицы
         * (правило 13, `.claude/rules/interface.md`).
         */
        display: flex;
        justify-content: flex-end;
        grid-column: 1 / -1;
        padding-top: 4px;
    }

    /* Всё без роли скрыто, пока не нажали шеврон. */
    .record-block-cards .record-list .table > tbody > tr > td:not([data-m]):not(.record-list-choice):not(.record-list-actions):not(.record-card-more) {
        display: none;
    }

    /*
     * Раскрыли — спрятанное идёт столбиком «подпись — значение».
     * Здесь это уместно: полей немного, и смотрят их осознанно.
     */
    /*
     * Селектор длинный не для красоты: правило скрытия выше устроено
     * так же, и без равной длины оно побеждало — шеврон менял стрелку,
     * а содержимое не показывалось (поймал координатор на снимке).
     */
    .record-block-cards .record-list .table > tbody > tr.record-card-open > td:not([data-m]):not(.record-list-choice):not(.record-list-actions):not(.record-card-more) {
        display: flex;
        grid-column: 1 / -1;
        justify-content: space-between;
        gap: 1rem;
        padding: 2px 0;
        font-size: 12px;
    }

    .record-block-cards .record-list .table > tbody > tr.record-card-open > td:not([data-m])::before {
        display: block;
        color: var(--bs-secondary-color, #6c757d);
    }

    /*
     * Шеврон — в правом верхнем углу, своей колонкой.
     *
     * Стоял в строке чисел и ложился поверх суммы: «83 166,» вместо
     * «83 166,57». В своей колонке он ничего не перекрывает и не
     * создаёт лишней строки там, где чисел нет вовсе, — на заказах
     * из-за него была третья строка ни за чем.
     */
    .record-block-cards .record-card-more {
        display: block;
        grid-column: 5;
        grid-row: 1;
        justify-self: end;
        align-self: start;
    }

    .record-card-more-button {
        padding: 0 .15rem;
        border: 0;
        background: none;
        color: var(--bs-secondary-color, #6c757d);
        font-size: 11px;
        line-height: 1;
    }

    .record-card-open .record-card-more-button {
        transform: rotate(180deg);
    }
}

/*
 * На компьютере ничего из этого нет: правила живут внутри `@media`,
 * а признак `data-m` в разметке безвреден.
 */