/* ============================================================
   Телефонная версия. Основная аудитория работает с телефона.

   ВСЁ содержимое файла — внутри @media (max-width: 900px), кроме одного
   блока «скрыть мобильные узлы», который прячет их на десктопе. Так десктопные
   правила физически не могут поменяться от правок здесь.
   Файл подключается ПОСЛЕДНИМ в base.html — при равной специфичности выигрывает он.
   ============================================================ */

/* Мобильные узлы есть в разметке всегда, но на десктопе их не видно */
.m-topbar,
.m-menu,
.m-menu-backdrop,
.m-burger { display: none; }


@media (max-width: 900px) {

/* ---------- Каркас ---------- */

/* Ни одна страница не должна ездить вбок. Если что-то окажется на пару пикселей
   шире экрана, браузер разрешает горизонтальную прокрутку — и вместе с ней
   «уезжает» всё, включая position:fixed (они привязаны к visual viewport). */
html, body { overflow-x: hidden; max-width: 100%; }

.portal-layout { display: block; }

/* Боковой панели на телефоне нет совсем — вместо неё шапка с кнопкой меню */
.sidebar { display: none !important; }

.portal-main {
    padding: 64px 12px 24px;   /* сверху — под фиксированную шапку (52px) */
}

/* ---------- Шапка ---------- */

.m-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 52px;
    padding: 0 12px;
    box-sizing: border-box;
    background: rgba(248, 248, 250, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    z-index: 900;
}

.m-topbar-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.m-logo-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--accent, #007AFF);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.m-topbar-org {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1d1d1f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Три полоски справа. 44px — минимальная зона нажатия, ниже палец промахивается */
.m-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    flex-shrink: 0;
}
.m-burger:active { background: rgba(0, 0, 0, 0.06); }

.m-burger span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--text-primary, #1d1d1f);
    transition: transform 0.18s ease, opacity 0.14s ease;
}

/* Открытое меню — три полоски превращаются в крестик */
.m-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.m-burger.is-open span:nth-child(2) { opacity: 0; }
.m-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Выпадающее меню ---------- */

.m-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 940;
}
.m-menu-backdrop.is-open { opacity: 1; pointer-events: auto; }

.m-menu {
    display: block;
    position: fixed;
    top: 56px;
    right: 8px;
    width: min(280px, calc(100vw - 16px));
    max-height: calc(100vh - 68px);
    overflow-y: auto;
    padding: 8px;
    box-sizing: border-box;
    background: var(--card-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
    z-index: 950;

    /* Закрытое состояние: не просто прозрачное, но и не кликабельное —
       иначе невидимое меню перехватывает нажатия по странице */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.m-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.m-menu-group-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary, #6e6e73);
    padding: 12px 12px 6px;
}

.m-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    box-sizing: border-box;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-primary, #1d1d1f);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.m-menu-item:active { background: rgba(0, 0, 0, 0.05); }
.m-menu-item.active {
    background: rgba(0, 122, 255, 0.12);
    color: var(--accent, #007AFF);
}

.m-menu-item-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    opacity: 0.85;
}
.m-menu-item-label { flex: 1; min-width: 0; }

.m-menu-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 8px 4px;
}

.m-menu-user {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 12px 10px;
    min-width: 0;
}
.m-menu-user-name { font-size: 13.5px; font-weight: 600; }
.m-menu-user-email {
    font-size: 12px;
    color: var(--text-secondary, #6e6e73);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-menu-item--logout { color: var(--danger, #ff3b30); }

/* Пока меню или модалка открыты — страница под ними не прокручивается.
   Без этого палец, промахнувшийся мимо содержимого окна, тянет страницу за ним. */
body.m-menu-open,
body.modal-open { overflow: hidden; }

/* ---------- Страницы ---------- */

.page-header { flex-direction: column; align-items: stretch; gap: 12px; }
.page-title { font-size: 1.25rem; }

/* Шапка списка: на телефоне не липкая. Липкая шапка + липкий thead + фиксированный
   topbar дают три слоя, которые наезжают друг на друга при инерционной прокрутке. */
.list-page-header {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 0 0 16px;
    margin: 0;
}
.list-page-actions { display: flex; }
.list-page-actions .btn { flex: 1; }

/* Таблицы шире экрана — прокручиваем их внутри карточки, а не страницу целиком */
.table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.data-table { min-width: 560px; }
.data-table thead th { position: static; }

.stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.stat-card { padding: 16px; }
.stat-value { font-size: 1.5rem; }

.card-body { padding: 16px; }

/* Чек-лист: номер и текст в строку, кнопка переезжает под них с отступом
   под ширину кружка с номером */
.usn-step { flex-wrap: wrap; }
.usn-step > .btn,
.usn-step > .usn-tag { order: 3; margin-left: 34px; }

/* ---------- Формы и кнопки ---------- */

/* Пальцем в 32px не попасть */
.btn { min-height: 42px; padding: 10px 16px; }
.btn-sm { min-height: 34px; }
.icon-btn { width: 38px; height: 38px; }

/* 16px — граница, ниже которой Safari зумит страницу при фокусе в поле */
.form-control { font-size: 16px; min-height: 42px; }

.form-grid-2, .form-grid-3 { grid-template-columns: 1fr; gap: 12px; }

/* ---------- Модалки ---------- */

/* На телефоне модалка — это отдельный экран, а не окошко поверх */
.modal-overlay {
    padding: 0;
    align-items: stretch;
    /* Прокрутка внутри модалки не должна «протекать» на страницу под ней */
    overscroll-behavior: contain;
}
.modal-overlay--top { padding: 0; }

.modal-card,
.modal-card--std {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    border-radius: 0;
}

.modal-card--std > .modal-title { font-size: 17px; padding: 14px 16px 12px; }
.modal-card--std > .modal-error { margin: 10px 16px 0; }
.modal-card--std .modal-body { padding: 14px 16px; overflow-x: hidden; }

/* Кнопки действий — наверх, сразу под заголовок.
   Порядком flex, а не переносом в разметке: иначе на каждую модалку появился бы
   второй комплект кнопок — с дублями id и двумя обработчиками на одно действие. */
.modal-card--std > .modal-title { order: 0; }
.modal-card--std .modal-ftr     { order: 1; }
.modal-card--std > .modal-error { order: 2; }
.modal-card--std .modal-body    { order: 3; }

.modal-card--std .modal-ftr {
    padding: 10px 16px;
    gap: 8px;
    /* Была нижняя панель — стала верхняя: рамку и фон переворачиваем */
    border-top: 0;
    border-bottom: 1px solid var(--border, #e5e5ea);
    background: transparent;
}
.modal-ftr-right { flex: 1; }
.modal-ftr-right .btn { flex: 1; }
/* «Удалить» / «Заполню позже» не должны отжимать основные кнопки */
.modal-ftr-left { flex-shrink: 0; }

/* ---------- Вход ---------- */

.auth-page { padding: 16px; align-items: flex-start; }
.auth-card { padding: 22px 18px; border-radius: 14px; }

}