/*
 * Перетаскиваемые окна.
 *
 * Показывают содержимое, не спрашивая подтверждения: карточку записи,
 * подробности документа, справку. Окон может быть открыто сколько
 * угодно одновременно, каждое своим `position: fixed`-блоком —
 * подложки-затемнения под ними нет вовсе, страница под окнами
 * остаётся видна, кликабельна и прокручивается как обычно
 * (Александр, 09.09.2026). На телефоне пробовали притемнение фона
 * — показать, что это окно, а не новая страница (задача №8 трекера) —
 * Александр отменил: получалось «серая страница», не окно. Отступ
 * от края, рамка и тень (ниже) справляются без подложки, тем же
 * способом, что и на компьютере.
 *
 * Пакет — `common\assets\WindowAsset`: подключают и кабинет, и доска
 * `dev.wmsdb.ru`, Yii публикует эти файлы в каждое приложение сам.
 *
 * Взято из OMSdb, где отработало на живых страницах, и дополнено:
 * содержимое подгружается с сервера, окно не уезжает за край браузера.
 */

.wms-window {
    position: fixed;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #adb5bd);
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;

    /*
     * Ширина — постоянная доля экрана, не от содержимого; высота —
     * от содержимого, не постоянная доля (задача №8 трекера, слово
     * Александра: «высота — по содержимому, если содержимое меньше
     * окна — окно обтягивает его, без пустого поля снизу»).
     *
     * Было и то, и другое постоянной долей (59vw/72vh — задача №71,
     * разбор ниже), особый случай «обтянуть по содержимому» жил
     * отдельным признаком `wms-window-fit` только для окна деталей
     * заказов. Короткая форма (карточка склада, подтверждение) с той
     * долей всегда получала пустой хвост под собой; отменили обе
     * причины разом — `wms-window-fit` теперь только про ширину,
     * ищи ниже.
     *
     * Ширина 59vw по-прежнему постоянной долей — таблицам внутри
     * так просторнее, а Bootstrap считает колонки по ширине **экрана**,
     * не окна: `col-lg-5`/`col-lg-7` встают рядом, даже если окно
     * само по себе не так широко.
     *
     * Было жёстко 480 пикселей, потом `clamp(320px, 100vw−24px, 920px)`
     * с потолком в 920. На мониторе пошире (1920 и больше) потолок
     * превращал окно в щель посреди экрана — почти половина ширины
     * пустовала, а высота при этом росла от содержимого и на низком
     * экране (900 точек и меньше) окно утыкалось нижним краем ниже
     * видимой части — браузер обрезал его снизу, кнопки подвала
     * оказывались за краем (задача №71, замер Александра 1400×900:
     * окно 920×721, низ на 12 точек ниже края экрана). Потолок
     * по пикселям заменили долей от экрана — держит окно в разумных
     * пределах сама; `max-width`/`max-height` остаются страховкой
     * от совсем маленького экрана (см. ниже — там же полноэкранный
     * режим), тем же отступом в 12 точек, что не даёт окну добраться
     * до самого края.
     */
    width: 59vw;
    height: auto;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    /* Где браузер умеет dvh — по видимой высоте: на телефоне 100vh
       больше экрана на высоту адресной строки, и подвал с кнопками
       уезжал под низ (снимок Александра 15.09.2026). */
    max-height: calc(100dvh - 24px);
}

/*
 * Настольный экран — потолок высоты ещё и в 800 точек, не только
 * в экран (задача №29 трекера, слово Александра: «окно открывается
 * слишком высоким»). На большом мониторе (1920×1080 и выше) прежний
 * потолок `calc(100vh − 24px)` давал под тысячу точек — длинный
 * документ растягивал окно почти во весь экран, хотя само тело
 * и так прокручивается (`.wms-window-body`, `overflow: auto`,
 * ниже) — растягивать окно ради этого незачем, дальше некуда
 * смотреть, не прокручивая. `min()` берёт меньшее из двух: где экран
 * ниже 824 точек (800 + 24 отступа), по-прежнему работает прежний
 * потолок по экрану, а не голые 800 — иначе на невысоком мониторе
 * окно вылезало бы за нижний край (тот же случай, что и раньше,
 * задача №71).
 *
 * Только настольный экран: на телефоне высота этим не ограничена
 * (задача №29, «мобильную раскладку не трогать») — там документ
 * и так открывается карточками, а вертикальное место не в дефиците,
 * как ширина.
 */
@media (min-width: 768px) {
    .wms-window {
        max-height: min(800px, calc(100vh - 24px));
    }
}

/*
 * На телефоне окно почти во весь ширину, но с отступом от краёв —
 * рамкой и тенью видно, что это окно, а не новая страница (слово
 * Александра, задача №8 трекера: «окно открывается во весь экран,
 * непонятно, что это модальное окно, как будто новая страница»).
 *
 * Раньше (снимок Александра с телефона, координатор 07.09.2026) было
 * ровно наоборот: окно растягивалось на весь экран без полей вовсе,
 * потому что через оставленный тогда край страницы было видно кусок
 * списка над окном — казалось, что оно не открылось целиком. Пробовали
 * добавить ещё и притемнение фона под отступом — Александр отменил,
 * получалась «серая страница», не окно (см. докблок файла). Тот же
 * отступ, рамка и тень, что у окна на компьютере, без подложки —
 * оказалось достаточно.
 *
 * Высоту здесь больше не переопределяем: она теперь `auto`
 * у самого `.wms-window` (см. первое правило файла) и одна на все
 * ширины разом — по содержимому, с тем же потолком `calc(100vh − 24px)`.
 *
 * Отступ — те же 12 точек с каждой стороны, что у окна на компьютере
 * (`calc(100vw − 24px)` в первом правиле файла), свой замер не заводим.
 *
 * Позицию не двигаем через `style.top/left` — `placeOnScreen()`
 * и `keepInside()` в `windows.js` на этой ширине ничего не трогают,
 * место целиком держит эта раскладка (правило 0.8: способ один,
 * а не JS и CSS порознь спорят, кто сейчас главный).
 */
@media (max-width: 767.98px) {
    .wms-window {
        top: 12px;
        left: 12px;
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }
}

/*
 * Окно, обтянутое содержимым по ширине: не шире, чем нужно, потолок —
 * экран.
 *
 * Высота у всех окон и так теперь по содержимому (первое правило
 * файла, задача №8 трекера) — раньше это было особым случаем именно
 * этого признака, теперь общим правилом, и здесь этой строки больше
 * нет.
 *
 * Включается признаком `data-window-fit` на ссылке, которая открывает
 * окно (`wmsWindows.open/load({fit: true})` из кода) — заведено
 * для «Деталей заказов» на рабочем столе: там таблица уже страницы
 * (430 точек), а окно всегда было 920 — половина пустовала (снимок
 * Александра, координатор 08.09.2026).
 *
 * `width: max-content` берёт ширину у самого широкого ребёнка
 * (тела, обычно таблицы внутри); `max-width` — тот же потолок, что
 * у обычного окна, чтобы широкая таблица не вытолкнула его за экран.
 *
 * На телефоне признак не действует — там ширина и так почти во весь
 * экран (правило выше), и это правило нарочно ограничено шириной
 * от 768px, чтобы не спорить с ним specificity (у обоих один класс).
 */
@media (min-width: 768px) {
    .wms-window.wms-window-fit {
        width: max-content;
        max-width: calc(100vw - 24px);
        min-width: 0;
    }
}

/*
 * Заголовок: за него окно перетаскивается мышью.
 *
 * Полоса низкая нарочно. Она не несёт работы — только название и
 * крестик, — а место на экране у нас главный ресурс (правило 6.6):
 * каждая её точка отнята у таблицы строк. Было 8 точек отступа
 * и крупная надпись, стало 4 и обычная.
 */
.wms-window-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px;
    background: var(--bs-tertiary-bg, #f4f6f9);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 6px 6px 0 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: move;
    user-select: none;
}

.wms-window-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wms-window-close {
    border: none;
    background: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    color: var(--bs-secondary-color, #6c757d);
}

.wms-window-close:hover {
    color: var(--bs-danger, #dc3545);
}

/*
 * Тело с прокруткой.
 *
 * `overscroll-behavior: contain` — докрутив до края, страница под окном
 * не поедет. Иначе человек, читающий длинный документ в окне, случайно
 * промотает всё, что было под ним.
 */
/*
 * Желоб под вертикальную полосу зарезервирован всегда, даже когда
 * полосы сейчас нет.
 *
 * Без этого у истории заказа полоса на миг пропадала при пересчёте
 * ширин таблиц (стало у́же — полосы не стало — таблица шире на её
 * толщину — столбцы зафиксировались по этой ширине — полоса
 * вернулась, а таблица нет). Причина не в полосе самой, а в том,
 * что ширина тела от неё зависела: чужой пересчёт застал её
 * в момент, когда полосы не было (Александр, координатор 07.09.2026).
 *
 * Раньше `scrollbar-gutter: stable` пробовали для всей страницы
 * и убрали 31.08.2026 (правило 6.2 — постоянный желоб рисовал серую
 * щель по короткой странице). Здесь другое: тело окна короче
 * страницы почти всегда, и щель у него не постоянный фон, а край
 * той же карточки, что и остальное тело, — не видно почти никогда.
 */
.wms-window-body {
    padding: 12px 16px;

    /*
     * Высота окна — по содержимому, с потолком в экран (задача №8
     * трекера, первое правило файла): у самого `.wms-window` высота
     * `auto`, а держит её эта же флекс-раскладка — тело забирает,
     * что осталось после заголовка и подвала, и прокручивается само,
     * когда содержимого больше, чем допускает потолок `max-height`
     * окна.
     */
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.wms-window-body .table {
    margin-bottom: 0;
}

/*
 * Подвал с кнопками: сохранить, удалить, завести новый.
 *
 * Отделён чертой и не прокручивается вместе с содержимым — кнопки
 * должны быть под рукой и в длинном документе.
 *
 * Появляется, только когда в пришедшей разметке есть блок
 * `data-window-footer`. Пустой полосы внизу не будет.
 */
.wms-window-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 16px;
    background: var(--bs-tertiary-bg, #f4f6f9);
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0 0 6px 6px;

    /* Над телом с прокруткой: иначе тень уйдёт под содержимое. */
    position: relative;
    z-index: 1;
}

/*
 * На телефоне кнопки подвала — в столбик, каждая во всю ширину.
 *
 * `RecordFooter` (общий виджет подвала окна записи) кладёт кнопки
 * двумя группами — опасное действие слева, остальные справа
 * ({@see \common\widgets\RecordFooter}), каждая своим `div.d-flex`.
 * В строку в четыре-пять кнопок («Провести», «Скачать для
 * Wildberries», «Закрыть», «Изменить») не помещались уже на среднем
 * телефоне — крайние резались краем окна (задача №20 трекера, снимок
 * Александра).
 *
 * Селектор — по классу `.d-flex`, а не по `> div`: у записи со своим
 * переключением «просмотр/правка» (задача №118) обе группы
 * `RecordFooter` вызывающий шаблон заворачивает ещё в один слой —
 * `[data-record-view-footer]`/`[data-record-edit-footer]`
 * (`record-form.js`, правило 23) — и до самих кнопок оказывается
 * три уровня вложенности, а не один. `> div` доставал только этот
 * внешний слой (обычный блок, без своего `display: flex`) и оставлял
 * кнопки внутри в строку — тот же снимок Александра ещё раз, после
 * первой правки (координатор, задача №20). Класс `.d-flex` находит
 * обе группы на любой глубине, потому что виджет кладёт его только
 * на них, других флекс-блоков в подвале нет.
 */
@media (max-width: 767.98px) {
    .wms-window-footer,
    .wms-window-footer .d-flex {
        /* В ряд, не столбиком: столбик из трёх кнопок уходил под низ
           экрана, «Провести» было не видно (снимок Александра
           15.09.2026). Не влезли — переносятся. */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: .4rem;
    }

    .wms-window .wms-window-footer .btn,
    .wms-window .wms-window-footer .d-flex .btn {
        flex: 1 1 auto;
        width: auto;
        height: 30px;
        min-height: 0;
        padding: 0 .5rem;
        font-size: .85rem;
        line-height: 1.2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /*
     * На широком экране опасная кнопка сама уезжает к левому краю
     * (`margin-right: auto` в правиле ниже) — в столбик её толкать
     * некуда, а лишний отступ раздвинул бы кнопки внутри своей же
     * группы.
     */
    .wms-window-footer .btn-danger,
    .wms-window-footer .btn-outline-danger {
        margin-right: 0;
    }
}

/*
 * Признак, что содержимое продолжается за краем.
 *
 * Тело окна прокручивается, и граница режет то, что не поместилось,
 * ровно по себе: у нижнего блока пропадает и скругление, и отступ.
 * Он выглядит обрубленным и приклеенным к подвалу — читается как
 * поломанная разметка, хотя она цела.
 *
 * Тень говорит, что там продолжение. Отметки ставит скрипт и снимает
 * их, когда крутить некуда: тень, обещающая то, чего нет, не лучше
 * её отсутствия.
 */
.wms-window[data-more-below] .wms-window-footer {
    box-shadow: 0 -6px 10px -7px rgba(0, 0, 0, .3);
}

.wms-window[data-more-above] .wms-window-header {
    box-shadow: 0 6px 10px -7px rgba(0, 0, 0, .3);
    position: relative;
    z-index: 1;
}

/*
 * Подвала может не быть — тогда содержимое режет нижний край самого
 * окна. Тень вешать не на что, поэтому ставим черту: она так же
 * говорит, что низ здесь не кончился.
 *
 * Подвал в разметке идёт после тела, поэтому смотрим вперёд
 * через `:has`, а не назад через соседа.
 */
.wms-window[data-more-below] .wms-window-body:has(+ .wms-window-footer[hidden]) {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

/*
 * Опасное действие отодвигается влево, к краю (правило 0.8): рука
 * не должна попадать на него, целясь в «Сохранить».
 */
.wms-window-footer .btn-danger,
.wms-window-footer .btn-outline-danger {
    margin-right: auto;
}

/*
 * Пока содержимое едет с сервера — коробочка, та же, что на заставке
 * страницы (`.preloader` в макете): кадры скачка повторены один в один,
 * чтобы окно и страница выглядели роднёй. Восклицательные знаки —
 * как и там: AdminLTE при настройке «уменьшить движение» глушит
 * анимации на всё подряд, и коробка замирала бы намертво.
 */
.wms-window-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px 4px;
    color: #6c757d;
}

.wms-window-loading svg,
.document-lines-cover svg {
    width: 48px;
    height: 48px;
    animation-name: wms-box-shake !important;
    animation-duration: 1.5s !important;
    animation-timing-function: ease !important;
    animation-iteration-count: infinite !important;
}

@keyframes wms-box-shake {
    0%   { transform: translate(2px, 1px) rotate(0deg) }
    10%  { transform: translate(-1px, -2px) rotate(-2deg) }
    20%  { transform: translate(-3px, 0) rotate(3deg) }
    30%  { transform: translate(0, 2px) rotate(0deg) }
    40%  { transform: translate(1px, -1px) rotate(1deg) }
    50%  { transform: translate(-1px, 2px) rotate(-1deg) }
    60%  { transform: translate(-3px, 1px) rotate(0deg) }
    70%  { transform: translate(2px, 1px) rotate(-2deg) }
    80%  { transform: translate(-1px, -1px) rotate(4deg) }
    90%  { transform: translate(2px, 2px) rotate(0deg) }
    100% { transform: translate(1px, -2px) rotate(-1deg) }
}

/*
 * Окно с удалённой записью.
 *
 * Красная полоса сверху — чтобы человек не начал работать с тем,
 * что уже убрано, и не удивлялся, почему кнопки не действуют.
 */
.wms-window.deleted {
    border-color: var(--bs-danger, #dc3545);
}

.wms-window.deleted .wms-window-header {
    background: var(--bs-danger-bg-subtle, #f8d7da);
    color: var(--bs-danger-text-emphasis, #58151c);
    border-bottom-color: var(--bs-danger-border-subtle, #f1aeb5);
}

/*
 * Телефон: место на экране — ресурс (слово Александра 15.09.2026,
 * «зачем такие большие отступы»). Окно почти в край, отступы шапки,
 * тела, карточек и подвала вдвое меньше; высота — по видимой части
 * экрана (dvh), а не по 100vh с адресной строкой.
 */
@media (max-width: 767.98px) {
    .wms-window {
        top: 6px;
        left: 6px;
        width: calc(100vw - 12px);
        max-width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
        max-height: calc(100dvh - 12px);
    }

    .wms-window-header {
        padding: 2px 8px;
    }

    .wms-window-body {
        padding: 6px;
    }

    .wms-window-body .card-body {
        padding: .5rem;
    }

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

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

    .wms-window-footer {
        padding: 4px 6px;
        gap: .3rem;
    }
}