/*
 * flumen E2E — мобильный слой. Подключается ПОСЛЕДНИМ, ничего не ломая на десктопе:
 * все правила живут внутри @media и включаются только на узких экранах.
 *
 * Задача — не «ужать десктоп», а сделать телефон рабочим инструментом:
 * шапка компактная, меню прокручивается, таблицы превращаются в карточки
 * (иначе 8 колонок каталога на 360px нечитаемы), модалки во весь экран,
 * тач-зоны не меньше 44px.
 */

/* ============ ПЛАНШЕТ И УЖЕ (≤900px) ============ */
@media (max-width: 900px) {
    .pu-wrap, .bd-wrap { padding: 12px 12px 40px; }
    .page-head, .pu-head, .bd-head { gap: 10px; }
    .page-head h1, .pu-head h1, .bd-head h1 { font-size: 18px; }
    .page-head p, .pu-head p, .bd-head p { font-size: 12px; }

    /* Шапка: логотип и меню в строку, служебные плашки прячем — место дороже. */
    .app-head { flex-wrap: wrap; gap: 8px; padding: 9px 12px; position: sticky; top: 0; z-index: 30; }
    .app-head .pill { display: none; }
    .app-head .sp { display: none; }
    #ap-invite { display: none; }               /* редкое действие — остаётся в «Настройках» */
    #ap-logout { margin-left: auto; }

    /* Меню шире экрана — прокручиваем по горизонтали, а не переносим в три ряда. */
    .app-head .nav {
        order: 10; width: 100%; overflow-x: auto; flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .app-head .nav::-webkit-scrollbar { display: none; }
    .app-head .nav-btn { flex: 0 0 auto; }

    /* Доска: колонки уже, но всё ещё прокручиваются вбок — это привычная канбан-механика. */
    .board-col { min-width: 240px; }
    .column { max-height: none; }

    /* Помощник: карта под генератором, а не рядом. */
    .hl-grid { grid-template-columns: minmax(0, 1fr); }
    .gen-map { height: 320px; }
}

/* ============ ТЕЛЕФОН (≤640px) ============ */
@media (max-width: 640px) {
    body { font-size: 13.5px; }
    .pu-wrap, .bd-wrap { padding: 10px 10px 32px; }

    /* Тач-зоны: мелкие кнопки на телефоне промахиваются. */
    .btn, .nav-btn, .pu-tab, .fchip, .bd-seg-btn, .seg-pick button { min-height: 38px; }
    .btn-sm { min-height: 34px; padding: 7px 12px; }
    .link-x, .link-btn, .modal-head .x { min-width: 34px; min-height: 34px; }

    /* Шапки страниц и панели инструментов — в столбик, кнопка действия на всю ширину. */
    .page-head, .pu-head { flex-direction: column; align-items: stretch; }
    .head-actions, .pu-actions, .bd-tools { width: 100%; flex-wrap: wrap; }
    .head-actions .btn, .pu-actions .btn { flex: 1 1 auto; }
    .pu-search, .bd-search, .map-search { width: 100%; }
    .bd-tools { margin-left: 0; }
    .bd-pill { flex: 1 1 auto; text-align: center; }

    /* Модалки: почти во весь экран, с прокруткой содержимого и «липким» низом. */
    .modal { padding: 0; align-items: flex-end; }
    .modal > .modal-card {
        width: 100%; max-width: 100%; max-height: 92vh; overflow-y: auto;
        border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 16px 14px 14px;
        animation: flSheet var(--t-med) both;
    }
    @keyframes flSheet { from { transform: translateY(18px); opacity: .6; } to { transform: none; opacity: 1; } }
    .modal-foot { position: sticky; bottom: -14px; background: var(--panel); padding-top: 10px; margin-top: 4px; }
    .modal-foot .btn { flex: 1 1 auto; }
    .row2 { flex-direction: column; gap: 8px; }

    /* Календарь и списки выбора не должны вылезать за экран. */
    .dp-pop { position: fixed; left: 8px; right: 8px; width: auto; top: auto; }
    .pick-list, .map-found { max-height: 46vh; }

    /* ---- Таблицы → карточки. Восемь колонок каталога на 360px нечитаемы,
       поэтому каждая строка становится блоком, а заголовки подставляются из data-label. ---- */
    .tbl thead { display: none; }
    .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
    .tbl tr {
        border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 9px;
        padding: 4px 2px; background: var(--panel);
    }
    .tbl td {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 7px 11px; border: none; text-align: right;
    }
    .tbl td::before {
        content: attr(data-label); text-align: left; flex: 0 0 auto;
        font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px;
    }
    /* Ячейки без подписи (фото, кнопки) — на всю ширину без псевдоэлемента. */
    .tbl td:empty { display: none; }
    .tbl td[data-label=""]::before, .tbl td:not([data-label])::before { content: none; }
    .tbl td.sb-acts, .tbl td.cat-acts { justify-content: flex-end; flex-wrap: wrap; }
    /* Пустое состояние занимает всю карточку, без псевдоподписи. */
    .tbl td .empty-state { width: 100%; }

    /* Закупки: карточка заказа и блок счетов — в одну колонку. */
    .ordcard { grid-template-columns: minmax(0, 1fr); }
    .acct { width: 100%; }

    /* Доска: колонка почти во весь экран — читаемо и привычно свайпается. */
    .board-col { min-width: 86vw; }
    .bd-seg { width: 100%; }
    .bd-seg-btn { flex: 1 1 0; }

    /* Карта: выше, легенда и подпись компактнее. */
    .gen-map { height: 60vh; min-height: 280px; }
    .map-legend { gap: 8px; font-size: 11px; }
    .map-hint { font-size: 11px; }

    /* Личное «Продано» под доской — та же карточная логика, что у таблиц. */
    .ps-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============ УЗКИЙ ТЕЛЕФОН (≤380px) ============ */
@media (max-width: 380px) {
    .app-logo-name { display: none; }           /* оставляем только знак */
    .page-head h1, .pu-head h1, .bd-head h1 { font-size: 17px; }
    .tbl td { padding: 6px 9px; font-size: 12.5px; }
}

/* ============ Экраны входа на телефоне ============ */
@media (max-width: 640px) {
    .auth-wrap { padding: 14px; align-items: flex-start; }
    .card { padding: 20px 18px 18px; max-width: 100%; }
}