/*
 * select.css
 * Страница: все, где есть выпадающий список
 * Блок: наш список (виджет `common\widgets\Select`)
 *
 * Само поле выглядит как обычное поле Bootstrap — рамку, высоту
 * и стрелку даёт его же класс `form-select`. Здесь только раскрытая
 * часть: её у родного списка рисует операционная система, и оформить
 * её было нельзя.
 *
 * Что внутри:
 * 1. Поле: подсказка серым, пока ничего не выбрано
 * 2. Раскрытый список: ровные отступы со всех сторон
 * 3. Пункт: подсветка при наведении и пометка выбранного
 * 4. Множественный выбор: галочки, счётчик в поле, подвал с кнопками
 */

/* --- 1. Поле --- */

.wms-select {
    /* Ширину задаёт ячейка отбора, а не содержимое: иначе столбцы
       разъезжались бы от длины названий. */
    width: 100%;
}

/*
 * Кнопка ведёт себя как поле, а не как кнопка: текст слева,
 * многоточие вместо обрезки на полуслове.
 *
 * Слева — вплотную, четыре точки: Bootstrap держит там больше, чем
 * нужно кнопке без метки перед текстом (08.09.2026, слово Александра
 * — теснее слева, чтобы больше помещалось справа, под стрелку
 * и крестик очистки: `.record-list-filter-field.filled .form-select`
 * в `lists.css`, там же и правая зона — единое место на оба вида
 * поля со стрелкой, второй раз для этой кнопки отдельно не пишем).
 */
.wms-select-toggle {
    width: 100%;
    padding-left: .25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Товар в документе: наименование не прячет размер за многоточием. */
.wms-select[data-select-display="document-item"] .wms-select-toggle {
    white-space: normal;
    line-height: 1.15;
}

.wms-select-document-main,
.wms-select-document-size {
    display: block;
}

.wms-select-document-main {
    overflow-wrap: anywhere;
}

.wms-select-document-size {
    margin-top: .15rem;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .875em;
}

/*
 * Ничего не выбрано — в поле подсказка, и она серая.
 *
 * Тот же цвет, которым Bootstrap красит подсказки в текстовых полях:
 * тогда во всей строке отбора серый одинаковый.
 */
.wms-select-empty .wms-select-text {
    color: var(--bs-secondary-color, #6c757d);
}

/* --- 2. Раскрытый список --- */

.wms-select-menu {
    /*
     * Ширина по полю, пока не сказано иначе.
     *
     * Список шире своего поля выглядит выехавшим, а меняющаяся
     * от длины названий ширина дёргает глаз при каждом открытии.
     * Где этого мало — узкий столбец, длинные названия — ширина
     * задаётся настройкой виджета (`menu.width`), и она перебивает
     * это правило.
     */
    width: 100%;

    /*
     * Уже поля список не станет никогда, даже если задали меньше:
     * обрубок под полем выглядит поломкой.
     */
    min-width: 100%;

    /*
     * Длинный справочник прокручивается внутри себя, а не уезжает
     * за край экрана.
     *
     * Это предел на случай, когда число видимых пунктов не задали.
     * Задали — скрипт поставит свою высоту, ровно по строкам.
     */
    max-height: 15rem;
    overflow-y: auto;

    /*
     * Докрутив список до конца, дальше не прокручиваем таблицу под ним.
     *
     * Без этого выходит так: человек листает справочник, доходит
     * до последнего пункта, продолжает крутить — и вместо списка
     * начинает ехать страница. Список при этом остаётся на месте
     * и уезжает вместе со всей таблицей.
     *
     * Тот же приём стоит у окон (`windows.css`): прокручивается
     * то, на чём мышь, и ничего больше.
     */
    overscroll-behavior: contain;

    /*
     * Отступ снизу — нулевой, не общий с верхним намеренно: подвал
     * (`.wms-select-foot`) стоит внутри этой же прокрутки, `position:
     * sticky` держит его у нижнего края, но отступ САМОЙ панели снизу
     * в эту площадь не входит — он остаётся частью прокручиваемого
     * содержимого и виден под подвалом отдельной полоской, сквозь
     * которую при прокрутке проступает строка пунктов (08.09.2026,
     * слово Александра: «снизу, где галочки, блок просвечивает
     * строчка»). Подвал держит свой отступ сам (`padding` в
     * `.wms-select-foot`), панели её здесь не нужно.
     */
    padding: .25rem 0 0;
    margin-top: .125rem;
}

/* --- 3. Пункт --- */

/*
 * Отступы одинаковые слева и справа — то, чего родной список не умел.
 * Ради этого виджет и появился.
 */
.wms-select-item {
    padding: .4rem .75rem;
    white-space: normal;
    cursor: pointer;
}

/*
 * Выбранный пункт помечен, но не кричит.
 *
 * Bootstrap красит `active` синим фоном во всю строку — в списке
 * из трёх значений это выглядит как ошибка. Оставляем чуть заметный
 * фон и жирную подпись.
 */
.wms-select-item.active {
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-body-color, #212529);
    font-weight: 600;
}

.wms-select-item.active:hover,
.wms-select-item.active:focus {
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
}

/* --- 4. Множественный выбор --- */

/*
 * Галочка у пункта.
 *
 * Место под неё держится у всех пунктов, а не только у отмеченных:
 * иначе подписи прыгали бы влево-вправо по мере выбора.
 *
 * Рисуем сами, а не значком из набора: значок пришлось бы подключать
 * ради одной галочки, а тут две линии под углом.
 */
.wms-select-many .wms-select-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.wms-select-mark {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .2rem;
    background: var(--bs-body-bg, #fff);
    position: relative;
}

.wms-select-item.active .wms-select-mark {
    border-color: var(--bs-primary, #0d6efd);
    background: var(--bs-primary, #0d6efd);
}

/* Сама галочка: две линии уголком, повёрнутые на 45°. */
.wms-select-item.active .wms-select-mark::after {
    content: '';
    position: absolute;
    left: .3rem;
    top: .1rem;
    width: .25rem;
    height: .5rem;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/*
 * Сколько выбрано сверх первого: «Пижамы +2».
 *
 * Перечислять всё в поле нельзя — оно росло бы вместе с выбором
 * и разгоняло столбец. Что именно отмечено, видно в самом списке.
 */
.wms-select-more {
    display: inline-block;
    margin-left: .35rem;
    padding: 0 .3rem;
    border-radius: .75rem;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-secondary-color, #6c757d);
    font-size: .75em;
    vertical-align: middle;
}

/*
 * Подвал списка: «Отмена» и «Применить».
 *
 * Кнопки у правого края, главная последняя — как во всём кабинете
 * (правило 6.1).
 *
 * Подвал не уезжает вместе с пунктами при прокрутке: липнет к низу,
 * иначе в длинном справочнике до кнопок пришлось бы листать.
 */
.wms-select-foot {
    position: sticky;
    bottom: 0;
    z-index: 1;

    display: flex;
    justify-content: flex-end;
    gap: .35rem;

    padding: .3rem .5rem;

    /*
     * Без верхнего отступа — не `margin`, а `padding`: подвал приклеен
     * (`sticky`), и промежуток снаружи его короба — это прокручиваемая
     * площадь без фона, сквозь неё видна строка пунктов, докрутившаяся
     * почти до подвала, но не под него (08.09.2026, слово Александра).
     * Дыхание сверху даёт сам `padding`, он закрашен тем же фоном,
     * что и весь подвал.
     */
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    background: var(--bs-body-bg, #fff);
}

/*
 * Кнопки подвала — квадратные, под один значок.
 *
 * Обычная маленькая кнопка рассчитана на надпись и держит запас
 * по бокам: две такие в узком столбце не помещаются. Здесь ширина
 * равна высоте, и пара занимает не больше поля.
 */
.wms-select-foot .btn {
    --bs-btn-padding-x: .4rem;
    --bs-btn-padding-y: .15rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/*
 * Место под полосу прокрутки подвалу не нужно.
 *
 * Общее правило ниже отодвигает пункты, но подвал липкий и идёт
 * во всю ширину — лишний отступ увёл бы кнопки от края.
 */
.wms-select-scrolled .wms-select-foot {
    padding-right: .75rem;
}

/*
 * Список прокручивается — отводим место под полосу.
 *
 * Иначе она ложится поверх текста, и у длинных названий последние
 * буквы уходят под неё. Ширину полосы замерил `scrollbar.js`:
 * на разных системах она разная, а на телефоне её нет вовсе,
 * и жёсткое число оставило бы там пустую щель (правило 6.2).
 *
 * Класс ставит скрипт, когда прокрутка действительно появилась.
 */
.wms-select-scrolled .wms-select-item {
    padding-right: calc(.75rem + var(--wms-scrollbar, 15px));
}

/*
 * Список шириной по содержимому: названия не переносятся.
 *
 * Ставится, когда ширина задана как `auto`. Без этого браузер видит
 * разрешённый перенос и выбирает ширину по самому короткому слову —
 * список остаётся узким, а названия разваливаются на три строки.
 */
.wms-select-menu-wide .wms-select-item {
    white-space: nowrap;
}

/*
 * Место под крестик очистки — тем же правилом, что у любого поля
 * со списком: кнопка сама несёт класс `form-select`, второй раз
 * то же самое отдельно для неё не пишем (правило 0.6). Правило —
 * `.record-list-filter-field.filled .form-select` в `lists.css`.
 */

/*
 * Ячейка с открытым списком поднимается над соседними.
 *
 * Любым раскрытым — выпадающим списком, календарём: у них одна беда
 * и одно лекарство.
 *
 * Ячейки строки отбора липкие, и у каждой свой слой. Внутри своего
 * слоя список подняться выше соседней ячейки не может — как ни
 * задавай ему `z-index`, соседняя нарисуется поверх, и список
 * уезжает под неё.
 *
 * Поэтому поднимаем саму ячейку, и только пока список раскрыт:
 * постоянный подъём переставил бы местами слои липкой шапки.
 */
.record-list-filter-row > th:has(.dropdown-menu.show) {
    z-index: 6;
}

/*
 * То же для узкого экрана: там поля отбора живут в окне, но окно
 * само по себе слой — а вот в полосе поиска над списком ячейки нет,
 * и поднимать надо обёртку поля.
 */
.record-list-quick:has(.dropdown-menu.show),
.record-list-filter-line:has(.dropdown-menu.show) {
    position: relative;
    z-index: 6;
}

/* --- Поиск с сервера (задание #155) --- */

/*
 * Поле ввода — липкое сверху раскрытой части: подсказка прокручивается
 * под ним, а поле остаётся на месте, как подвал с кнопками при галочках.
 */
.wms-select-search-box {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0 .5rem .35rem;
    background: var(--bs-dropdown-bg, #fff);
}

/* Миниатюра слева от названия — как в ячейке товара (`ProductCell`). */
.wms-select-with-search .wms-select-item {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.wms-select-thumb {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    object-fit: cover;
    border-radius: .2rem;
}

/*
 * Товар в подсказке документа — один раз, размеры под ним кнопками.
 *
 * Раньше каждая учётная единица повторяла фото, артикул и длинное
 * название, а отличалась одной последней строкой `S`/`M`/`L`.
 * Теперь общая часть занимает одну строку, а нажимается именно размер.
 */
.wms-select-document-group {
    padding: .4rem .75rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

.wms-select-document-group:last-child {
    border-bottom: 0;
}

.wms-select-document-group-head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.wms-select-document-group-title {
    min-width: 0;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.wms-select-document-sizes {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .3rem;
    margin-left: 2.25rem;
}

/* Кнопка размера компактная, но остаётся настоящей кнопкой выбора
   (`data-select-item`) и потому работает мышью, касанием и клавиатурой. */
.wms-select-with-search .wms-select-document-size-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 2rem;
    padding: .2rem .5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .25rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    font-size: .875em;
    line-height: 1.2;
    white-space: nowrap;
}

.wms-select-with-search .wms-select-document-size-option:hover,
.wms-select-with-search .wms-select-document-size-option:focus {
    background: var(--bs-secondary-bg, #e9ecef);
}

.wms-select-with-search .wms-select-document-size-option.active {
    border-color: var(--bs-primary, #0d6efd);
    background: var(--bs-primary-bg-subtle, #cfe2ff);
}

/* Общее правило прокручиваемого списка добавляет справа ширину полосы
   каждому обычному пункту. У маленькой кнопки размера эта полоса уже
   учтена контейнером группы, иначе `S` становился шириной в полстроки. */
.wms-select-scrolled .wms-select-document-size-option {
    padding-right: .5rem;
}

/* Строка состояния: «ищем…», «ничего не нашлось». */
.wms-select-status {
    padding: .3rem .75rem .5rem;
    font-size: .85em;
    color: var(--bs-secondary-color, #6c757d);
}

.wms-select-status:empty {
    display: none;
}