/* ============================================================
   МОБИЛЬНАЯ ВЁРСТКА: сайт в браузере телефона
   ============================================================
   Отдельный файл, а не правка `style.css`: так мобильные правила
   видно целиком, и они не могут случайно перебить настольный вид.
   На широком экране здесь нет ни одного действующего правила —
   вёрстка для компьютера остаётся ровно такой, как была.

   **Зачем это нужно.** Прораб и приёмщик работают с телефона,
   а не за ноутбуком: прораб стоит у машины и отмечает привоз.
   До этой правки меню было одной строкой без переноса
   (`flex-wrap: nowrap` в `style.css`), и на телефоне пункты уезжали
   за край экрана — дойти до приёмки было нельзя.
   ============================================================ */

/* Кнопка «меню» и панель: на компьютере их нет вообще */
.app-nav-toggle,
.app-mobile-panel {
    display: none;
}

@media (max-width: 991.98px) {

    /* ---- Шапка: кнопка меню и имя вошедшего ---- */
    .app-header-inner {
        height: 52px;
        padding: 0 12px;
        gap: 8px;
    }

    .app-brand {
        font-size: 16px;
    }

    .app-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        order: -1;
        /* 44×44 — наименьший размер, по которому надёжно попадает
           палец. Меньше делать нельзя: прораб в перчатках. */
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 10px;
        background: #fff;
        cursor: pointer;
        flex-shrink: 0;
    }

    .app-nav-toggle:hover {
        background: rgba(0, 0, 0, 0.04);
    }

    /* Три полоски рисуем сами: не тянем ради этого иконочный шрифт */
    .app-nav-toggle-bars,
    .app-nav-toggle-bars::before,
    .app-nav-toggle-bars::after {
        display: block;
        width: 20px;
        height: 2px;
        background: var(--color-text, #1d1d1f);
        border-radius: 2px;
        content: "";
        position: relative;
    }

    .app-nav-toggle-bars::before {
        top: -6px;
    }

    .app-nav-toggle-bars::after {
        top: 4px;
    }

    /* ---- Имя и выход: на телефоне оставляем только имя ---- */
    .app-user {
        margin-left: auto;
        gap: 8px;
    }

    .app-user-name {
        max-width: 96px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
    }

    .app-user .btn {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* ---- Меню: выезжает панелью вместо строки, уходящей за край ---- */
    #appMenu {
        display: none;
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        bottom: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 0;
        margin: 0;
        padding: 10px 12px 32px;
        background: #fff;
        overflow-y: auto;
        /* Плавная прокрутка важнее анимации: список длинный */
        -webkit-overflow-scrolling: touch;
        z-index: 1100;
    }

    /* Открытое состояние ставит `static/mobile.js` */
    body.app-nav-open #appMenu {
        display: flex;
    }

    body.app-nav-open {
        /* Фон не должен прокручиваться под открытым меню */
        overflow: hidden;
    }

    #appMenu > li {
        width: 100%;
    }

    .app-menu-link,
    .app-menu-item {
        display: flex;
        width: 100%;
        /* 48 px по высоте: строка меню должна быть «пальцевой» */
        min-height: 48px;
        padding: 12px 10px;
        font-size: 16px;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .app-menu-group {
        width: 100%;
        padding: 14px 10px 6px;
        font-size: 12px;
    }

    /* «Ещё» на телефоне не нужно: все пункты и так в одном списке */
    .app-menu-more > .app-menu-link {
        display: none;
    }

    .app-menu-more {
        position: static;
        width: 100%;
    }

    /* Раскрытый список «Ещё» — теми же крупными строками */
    .app-menu-dropdown,
    .app-menu-dropdown.open {
        position: static;
        display: block !important;
        width: 100%;
        min-width: 0;
        border: 0;
        box-shadow: none;
        padding: 0;
        background: transparent;
    }

    .app-menu-dropdown .app-menu-group:first-child {
        padding-top: 0;
    }
}

/* Совсем узкий экран: имя вошедшего убираем, оставляем кнопки */
@media (max-width: 575.98px) {
    .app-user-name {
        display: none;
    }
}