/* =====================================================================
   Мобильная адаптация портала. Этот файл подключается ПОСЛЕ style.css,
   поэтому правила здесь имеют последнее слово (без !important там, где
   достаточно специфичности).

   Брейкпойнты:
     • <= 1024px — iPad и узкие экраны (планшеты)
     • <= 768px  — большие телефоны / маленькие планшеты
     • <= 480px  — телефоны
   ===================================================================== */

/* Safe-area для iPhone с «чёлкой» / Dynamic Island */
:root {
    --safe-area-top:    env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left:   env(safe-area-inset-left, 0px);
    --safe-area-right:  env(safe-area-inset-right, 0px);
}

html, body {
    -webkit-text-size-adjust: 100%;     /* iOS не должен сам увеличивать шрифт */
    -webkit-tap-highlight-color: rgba(244, 94, 40, 0.2);
    overscroll-behavior-y: contain;     /* убираем pull-to-refresh внутри SPA-блоков */
}

/* Плавный момент-скролл для iOS на всех скроллящихся контейнерах */
* { -webkit-overflow-scrolling: touch; }

/* На мобильных размерах форм-инпуты не должны быть меньше 16px —
   иначе iOS зумит страницу при фокусе */
@media (max-width: 768px) {
    input, select, textarea, button {
        font-size: 16px !important;
    }
    /* Но визуально мелкие подсказки сохраняем */
    .filter-input, .filter-select, .search-box {
        font-size: 16px !important;
    }
    /* Минимальные тач-зоны 40+px по высоте */
    button, .btn, .modal-btn, .tb-btn, .gform-submit, .gform-clear,
    .btn-primary, .btn-secondary, .btn-approve,
    nav ul li a, .nav-link, .contact-item {
        min-height: 40px;
    }
}

/* ===== Сайдбар на iPad/планшетах — узкий, но виден ===== */
@media (max-width: 1024px) and (min-width: 769px) {
    #sidebar {
        width: 220px !important;
        min-width: 220px !important;
        padding: 20px 14px;
    }
    #main-content {
        margin-left: 220px !important;
        width: calc(100% - 220px) !important;
    }
    header { padding: 14px 22px; }
}

/* ============================================================
   ОБЩЕЕ ДЛЯ <= 768px (телефоны и узкие планшеты)
   ============================================================ */
@media (max-width: 768px) {
    body { overflow-x: hidden; }

    /* Шапка с большим запасом — учитываем чёлку */
    header {
        padding-top: calc(12px + var(--safe-area-top)) !important;
        padding-left:  calc(15px + var(--safe-area-left)) !important;
        padding-right: calc(15px + var(--safe-area-right)) !important;
    }

    .header-title { font-size: 17px !important; }
    #burger-btn { font-size: 26px !important; padding: 6px 10px; }

    /* Контент: общий padding с учётом safe-area */
    .page-wrapper {
        padding: 16px !important;
        padding-left:  calc(16px + var(--safe-area-left)) !important;
        padding-right: calc(16px + var(--safe-area-right)) !important;
    }

    /* Сайдбар на телефоне — мобильное outline-меню */
    #sidebar {
        width: 88vw !important;
        max-width: 320px !important;
        padding: 18px 18px calc(20px + var(--safe-area-bottom));
    }
    #sidebar nav ul li a { padding: 14px 14px !important; font-size: 15px; }

    /* Контент карточек */
    .news-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

    /* Модалки общего стиля */
    .modal-content {
        width: calc(100% - 24px) !important;
        max-width: none !important;
        padding: 22px 18px !important;
        margin: 12px auto !important;
        max-height: calc(100vh - 24px);
        overflow-y: auto;
    }

    /* TOAST'ы — не плавающее облако вверху, а полоса по ширине */
    #toast-container {
        top: auto !important;
        bottom: calc(16px + var(--safe-area-bottom)) !important;
        right: 12px !important;
        left: 12px !important;
    }
    .toast { width: 100%; min-width: 0 !important; box-sizing: border-box; }

    /* Кнопки крупнее */
    .btn-primary { font-size: 16px; padding: 14px 22px; width: 100%; }
}

/* ============================================================
   ОЧЕНЬ УЗКИЕ ЭКРАНЫ (телефоны iPhone SE и подобные)
   ============================================================ */
@media (max-width: 480px) {
    header { padding: 10px 14px !important; }
    .header-title { font-size: 16px !important; }
}

/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ — горизонтальный билет
   ============================================================ */
@media (max-width: 768px) {
    /* Карточка-удостоверение — масштабируется по ширине */
    .union-id-card-wrap { width: 100% !important; max-width: 100% !important; margin: 0 auto 24px; }
    .union-id-card { aspect-ratio: 1004 / 650; border-radius: 12px !important; }

    /* Дочерние блоки кабинета */
    #cabinet-section {
        padding: 16px !important;
        padding-left:  calc(16px + var(--safe-area-left)) !important;
        padding-right: calc(16px + var(--safe-area-right)) !important;
    }
    .actions-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .action-card { padding: 16px !important; }

    /* Форма регистрации/входа: поля в один столбец */
    .form-group input,
    .form-group select,
    .form-group textarea { font-size: 16px !important; padding: 12px 14px !important; }
    .form-group { margin-bottom: 16px !important; }

    /* Поля «строкой» (телефон+ИНН и т.п.) — переносим */
    .form-group[style*="display: flex"],
    .form-group[style*="display:flex"] {
        flex-direction: column;
        gap: 12px;
    }
    .form-group[style*="display: flex"] > div,
    .form-group[style*="display:flex"] > div { width: 100% !important; }
}

/* ============================================================
   ДОКУМЕНТЫ
   ============================================================ */
@media (max-width: 768px) {
    .file-item-row, .file-row {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 12px !important;
        padding: 14px !important;
    }
    .file-cover { width: 64px !important; height: 64px !important; }
    .file-info  { flex: 1 1 calc(100% - 80px); }
    .file-info h3 { font-size: 17px !important; }
    .file-actions {
        width: 100%; justify-content: flex-end; margin-top: 4px;
        flex-wrap: wrap; gap: 8px !important;
    }
    .file-download, .file-view-btn {
        font-size: 14px !important;
        padding: 8px 14px !important;
        flex: 1 1 auto; text-align: center;
    }

    /* Просмотрщик документа */
    #doc-viewer-overlay { padding: 0; }
    #doc-viewer-box {
        width: 100vw !important; height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        border: none !important;
        padding-top: var(--safe-area-top);
        padding-bottom: var(--safe-area-bottom);
    }
    #doc-viewer-header { padding: 12px 16px !important; }
    #doc-viewer-title { font-size: 14px !important; }
}

/* ============================================================
   НОВОСТИ — мобильный модал
   ============================================================ */
@media (max-width: 768px) {
    #news-viewer-overlay { padding: 0 !important; }
    #news-viewer-box {
        width: 100% !important; max-width: none !important;
        height: 100vh; max-height: 100vh !important;
        border-radius: 0 !important; border: none !important;
    }
    #news-viewer-img { max-height: 220px !important; }
    #news-viewer-content { padding: 18px 18px calc(24px + var(--safe-area-bottom)) !important; }
    #news-viewer-content h2 { font-size: 19px !important; }
}

/* ============================================================
   РЕЕСТР: на телефоне таблица превращается в стопку карточек.
   На iPad — компактная горизонтально-прокручиваемая таблица.
   ============================================================ */
@media (max-width: 1024px) {
    table.reg-table { font-size: 12px; }
    table.reg-table th, table.reg-table tbody td {
        padding: 6px 8px !important;
    }
    .reg-toolbar {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .reg-toolbar h1 { font-size: 15px !important; }
    .toolbar-right { width: 100%; }
    .search-box { width: 100% !important; }
    .reg-tabs { overflow-x: auto; max-width: 100%; flex-wrap: nowrap; }
    .reg-tab { white-space: nowrap; }
}

@media (max-width: 768px) {
    /* Главный приём: members-table → карточки. У её ячеек ПРОСТАВЛЕН
       data-label (см. рендер в registry.html), поэтому подпись каждого поля
       берётся из ::before. ВАЖНО: карточный режим включаем ТОЛЬКО для
       members-table — у остальных reg-таблиц (взносы/расходы/документы/голоса)
       data-label нет, и карточки выглядели бы как столбик значений без
       подписей. Их обрабатываем горизонтальной прокруткой ниже. */
    table#members-table { display: block; width: 100%; }
    table#members-table thead { display: none; }
    table#members-table tbody, table#members-table tfoot { display: block; width: 100%; }
    table#members-table tbody tr {
        display: grid;
        /* Равные половины (1fr 1fr) вместо max-content 1fr: при max-content
           длинный email распирал левую колонку, а поля справа (фамилия, телефон)
           сжимались и «съезжали». Теперь колонки ровные. */
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
        padding: 14px;
        border-bottom: 1px solid var(--table-border, #e5e5ea);
        background: #fff;
    }
    table#members-table tbody tr.dept-row {
        grid-template-columns: 1fr !important;
        padding: 10px 14px;
        background: linear-gradient(90deg, #2b1b54 0%, #3d2472 100%) !important;
        color: #fff !important;
        font-weight: 700;
    }
    table#members-table tbody tr.dept-row td {
        background: transparent !important; color: #fff !important;
        border: none !important; padding: 0 !important; white-space: normal !important;
        font-size: 12px;
    }
    table#members-table tbody td {
        display: block;
        border: none !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow: visible !important;
        padding: 0 !important;
        /* длинный email/значение переносится внутри своей колонки, а не распирает её */
        min-width: 0;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    /* Подпись поля = data-label, либо текст th — добавляем через ::before  */
    table#members-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        color: var(--ios-text-gray, #80868b);
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 1px;
    }
    /* Единое выравнивание ВСЕХ ячеек карточки по ЛЕВОМУ краю. Иначе inline
       text-align:center у части полей (Пол, № в отделе, Вступил, Документы)
       делает карточку «скомканной» — метки и значения прыгают центр/лево. */
    table#members-table tbody td,
    table#members-table tbody td::before,
    table#members-table tbody td * {
        text-align: left !important;
    }
    table#members-table tbody td.num-cell, table#members-table tbody td:first-child {
        grid-column: 1; align-self: start;
    }

    /* Скрываем второстепенные колонки (№№ внутри отдела, ID) */
    table#members-table tbody td:nth-child(3) { display: none; }

    /* Прочие таблицы реестра и бухгалтерии — НЕ карточки, а горизонтальная
       прокрутка: заголовки столбцов (thead) остаются на месте, значения под
       ними. Так таблицы взносов/расходов/документов/голосов/ФОТ/бюджета и
       сводка расходов на /accounting читаемы и не ломают ширину страницы. */
    table.reg-table:not(#members-table),
    .staff-table, .fees-matrix, .staff-doc-table, .exp-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        white-space: nowrap;
    }

    /* Фильтры реестра — в столбик */
    .filter-bar {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px !important;
        padding: 10px 12px !important;
    }
    .filter-bar > * { width: 100% !important; }

    /* Кнопки в тулбаре — все растянуть */
    .tb-btn { flex: 1 1 auto; justify-content: center; }

    /* Тосты реестра — над safe-area (iPhone с «домашней» полосой), без выхода
       за края экрана. */
    #reg-toast {
        bottom: calc(20px + var(--safe-area-bottom)) !important;
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
    }

    /* Страница создания документа — компактные поля на телефоне. */
    .cd-container { padding: 16px !important; }

    /* Форма «Создать голосование»: поля «Начало»/«Окончание» в один столбец —
       иначе два datetime-local в 2 колонки не помещаются и правое поле
       обрезается за краем экрана. */
    #poll-date-row { grid-template-columns: 1fr !important; }
    input[type="datetime-local"], input[type="date"], input[type="time"] {
        min-width: 0; max-width: 100%; box-sizing: border-box;
    }
}

/* ============================================================
   БЮДЖЕТ: горизонтально-прокручиваемая таблица + кнопки сверху
   ============================================================ */
@media (max-width: 1024px) {
    .budget-toolbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
    .budget-add-btn { flex: 1 1 calc(50% - 6px); justify-content: center; }
    .year-btns { width: 100%; margin-left: 0 !important; }

    #budget-content { padding: 10px !important; }
    .budget-table, .quarterly-table, .forecast-table {
        font-size: 12px !important;
        display: block; overflow-x: auto; max-width: 100%;
    }
    .budget-table th, .budget-table td,
    .quarterly-table th, .quarterly-table td,
    .forecast-table th, .forecast-table td {
        padding: 6px 8px !important;
    }
}

/* ============================================================
   ЧАТ: на телефоне — стандартный «one-pane» режим
   ============================================================ */
@media (max-width: 768px) {
    .messenger-container { flex-direction: row; }
    .chat-sidebar {
        position: absolute; inset: 0; width: 100%; max-width: 100%;
        z-index: 50; transform: translateX(0);
    }
    .chat-sidebar.collapsed { transform: translateX(-100%); }
    .chat-main { width: 100%; }
    .chat-input-area {
        padding: 10px 14px !important;
        padding-bottom: calc(10px + var(--safe-area-bottom)) !important;
        flex-wrap: wrap; gap: 6px !important;
    }
    #chat-input-msg { font-size: 16px !important; }
    .msg-bubble { max-width: 88% !important; }

    /* Встроенный вьюер вложений — на весь экран */
    #chat-viewer-overlay { padding: 0; }
    #chat-viewer-box {
        width: 100vw !important; height: 100vh !important;
        border-radius: 0 !important; border: none !important;
        padding-top: var(--safe-area-top);
        padding-bottom: var(--safe-area-bottom);
    }
    #chat-viewer-header { padding: 12px 14px !important; }
    #chat-viewer-title { font-size: 13px !important; max-width: 55% !important; }
}

/* ============================================================
   GOOGLE-FORM МОДАЛКИ (добавление взноса/расхода/участника)
   ============================================================ */
@media (max-width: 768px) {
    .gform-overlay {
        padding: 0 !important;
        align-items: stretch !important;
    }
    .gform-container {
        width: 100% !important; max-width: 100% !important;
        min-height: 100vh; border-radius: 0 !important;
        padding: calc(20px + var(--safe-area-top)) 16px calc(24px + var(--safe-area-bottom)) !important;
    }
    .gform-header h2 { font-size: 18px !important; }
    .gform-card { padding: 14px !important; }
    .gform-actions { flex-direction: column; gap: 10px !important; }
    .gform-submit, .gform-clear { width: 100%; padding: 14px !important; }
}

/* ============================================================
   КАСТОМНЫЕ ДИАЛОГИ (ui-dialogs)
   ============================================================ */
@media (max-width: 480px) {
    .ui-dlg-box {
        width: calc(100% - 24px) !important;
        padding: 18px 18px !important;
    }
    .ui-dlg-actions { flex-direction: column-reverse; gap: 8px; }
    .ui-dlg-btn { width: 100%; padding: 12px 18px !important; font-size: 15px !important; }
}

/* ============================================================
   АДМИН-ПАНЕЛЬ
   ============================================================ */
@media (max-width: 768px) {
    .admin-content {
        padding: 16px !important;
        padding-left:  calc(16px + var(--safe-area-left)) !important;
        padding-right: calc(16px + var(--safe-area-right)) !important;
    }
    .admin-panel-card { padding: 16px !important; }
    .news-list-item {
        flex-wrap: wrap;
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    .admin-list-thumb { width: 48px !important; height: 48px !important; }
    .admin-list-body { flex: 1 1 calc(100% - 110px); min-width: 0; }
    .admin-list-title { font-size: 14px !important; }
}

/* ============================================================
   МИНИ-МОДАЛ «Назначить роль» в реестре
   ============================================================ */
@media (max-width: 480px) {
    #role-modal {
        width: calc(100% - 24px) !important;
        padding: 18px !important;
    }
    #role-modal .role-modal-btns { flex-direction: column-reverse; gap: 8px; }
    #role-modal .role-modal-btns button { width: 100%; padding: 12px !important; }
}