/* 
    Файл адаптивных (медиа) стилей приложения
    Адаптация под: смартфон, планшет, фолды
*/

/* ============================================================
   1. CSS-переменные для мобильных устройств (уменьшенные отступы)
   ============================================================ */
@media (max-width: 767px) {
    :root {
        --main-border-radius: 16px;
        --second-border-radius: 10px;
        --last-border-radius: 6px;
        --last-border-radius-mini: 3px;
    }
}

/* ============================================================
   2. Смартфоны < 768px
      - Блоки .blockDarkType1 (кроме .topNav) на 100% ширины
      - Переключение свайпом через CSS scroll-snap
      - .topNav фиксирован сверху, вне скролла
   ============================================================ */
@media (max-width: 767px) {
    /* --- Рабочее пространство: переключаем на flex + scroll-snap --- */
    .workSpace {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        height: 100% !important;

        /* scroll-snap с префиксами для кросс-браузерности */
        -webkit-scroll-snap-type: x mandatory;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;

        /* Отключаем grid-свойства */
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-gap: 0 !important;
        gap: 0 !important;

        /* Скрываем скроллбар */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .workSpace::-webkit-scrollbar {
        display: none;
    }

    /* --- Верхняя навигация: фиксируется сверху, вне скролла --- */
    .topNav {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        flex: 0 0 auto !important;
        min-width: 100% !important;
        width: 100% !important;
        scroll-snap-align: none;
        -webkit-scroll-snap-align: none;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0.65em 0.85em !important;
    }

    /* --- Все блоки .blockDarkType1 (кроме .topNav) --- */
    .blockDarkType1:not(.topNav) {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: calc(100vh - 1em);
        overflow-y: auto;

        /* scroll-snap: каждый блок — отдельная "страница" */
        -webkit-scroll-snap-align: start;
        -ms-scroll-snap-align: start;
        scroll-snap-align: start;

        /* Сбрасываем grid-колонки, заданные через --wg */
        grid-column: 1 / -1 !important;

        /* Уменьшаем внутренние отступы */
        padding: 0.85em;

        /* Отступ сверху для компенсации фиксированного .topNav */
        margin-top: 0 !important;
    }

    /* Первый блок после .topNav — добавляем отступ */
    .topNav + .blockDarkType1 {
        margin-top: 4em !important;
    }

    /* --- Блоки .sppvr (с формой) на мобильных --- */
    .sppvr:not(form) {
        height: auto !important;
        min-height: calc(100vh - 6em);
    }
    form.sppvr {
        grid-column: 1 / -1 !important;
    }

    /* --- Кнопки на главной --- */
    .buttons {
        grid-template-columns: repeat(3, 1fr) !important;
        padding: var(--second-border-radius);
        grid-gap: var(--second-border-radius);
    }
    .buttons button {
        width: 100% !important;
    }
    .buttons .find {
        min-width: auto;
        width: 100%;
        grid-column: 1 / -1;
    }

    /* --- Папки и карточки на главной --- */
    .folders {
        grid-template-columns: repeat(auto-fill, minmax(8em, auto));
    }
    .entrys {
        grid-template-columns: repeat(auto-fill, minmax(8em, auto));
    }

    /* --- Блоки с ответами экспертов --- */
    .answers {
        grid-template-columns: 1fr !important;
    }

    /* --- Таблицы в рекомендациях --- */
    .recData table {
        font-size: 0.8em;
    }
    .recData table thead tr th,
    .recData table tbody tr td {
        padding: 2px;
    }

    /* --- Портрет пациента --- */
    .pData .pDatal label.inpSubmitNext {
        position: relative;
        right: auto;
        margin-top: 0.3em;
    }
}

/* ============================================================
   3. Планшеты 768px - 1024px
      - Уменьшенные отступы
      - Комфортное отображение в 1-2 колонки
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* --- Рабочее пространство: уменьшаем отступы --- */
    .workSpace {
        top: 0.75em;
        left: 0.75em;
        right: 0.75em;
        bottom: 0.75em;
        grid-gap: 0.75em;
        gap: 0.75em;
        grid-template-columns: repeat(12, calc((100vw - 1.5em - (0.75em * 11)) / 12));
    }

    /* --- Верхняя навигация --- */
    .topNav {
        grid-template-columns: 50px 1fr 140px;
        grid-gap: 0.75em;
    }
    .topNav .logoApp img {
        width: 50px;
    }

    /* --- Все блоки .blockDarkType1 --- */
    .blockDarkType1 {
        padding: 0.85em;
    }

    /* --- Блоки с формой СППВР --- */
    .sppvr:not(form) {
        height: auto;
        min-height: calc(100vh - 4em);
    }

    /* --- Кнопки на главной --- */
    .buttons {
        padding: var(--second-border-radius);
        grid-gap: var(--second-border-radius);
    }

    /* --- Папки и карточки --- */
    .folders {
        grid-template-columns: repeat(auto-fill, minmax(9em, auto));
    }
    .entrys {
        grid-template-columns: repeat(auto-fill, minmax(9em, auto));
    }

    /* --- Ответы экспертов: максимум 2 колонки --- */
    .answers {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   4. Фолды (складные / планшеты в альбоме) 1024px - 1280px
      - Блоки .blockDarkType1 принудительно по 50% ширины
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* --- Все блоки .blockDarkType1 (кроме .topNav) по 6 колонок (50%) --- */
    .blockDarkType1:not(.topNav) {
        grid-column: span 6 !important;
    }

    /* --- Рабочее пространство: чуть уменьшаем отступы --- */
    .workSpace {
        top: 0.85em;
        left: 0.85em;
        right: 0.85em;
        bottom: 0.85em;
        grid-gap: 0.85em;
        gap: 0.85em;
        grid-template-columns: repeat(12, calc((100vw - 1.7em - (0.85em * 11)) / 12));
    }

    /* --- Верхняя навигация --- */
    .topNav {
        grid-template-columns: 55px 1fr 160px;
        grid-gap: 0.85em;
    }

    /* --- Все блоки .blockDarkType1 --- */
    .blockDarkType1 {
        padding: 1em;
    }

    /* --- Блоки с формой СППВР --- */
    .sppvr:not(form) {
        height: auto;
        min-height: calc(100vh - 3em);
    }

    /* --- Кнопки на главной --- */
    .buttons {
        /* Статичный блок, дополнительных правок не требуется */
    }

    /* --- Ответы экспертов: максимум 2 колонки --- */
    .answers {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
    5. Десктоп > 1280px
      - Всё остаётся без изменений (стили из css.css)
      - Этот блок — для явного указания, что изменений не требуется
   ============================================================ */

/* ============================================================
    6. Touch-адаптация для режима редактирования
   ============================================================ */

/* Увеличенные отступы для touch-целей на мобильных */
@media (max-width: 767px) {
    /* Модальное окно на мобильных */
    .modal-dialog {
        max-width: 90%;
        padding: 1em;
    }
    .modal-dialog .modal-buttons button {
        padding: 0.9em;
        font-size: 1.1em;
    }
    
    /* Блок создания папки на мобильных */
    .btn-create-folder {
        min-height: 120px;
    }
    .btn-create-folder .create-input {
        font-size: 1.1em;
        padding: 0.6em;
    }
    .btn-create-folder .create-buttons button {
        padding: 0.6em 1em;
        font-size: 1em;
    }
    
    /* Contenteditable на мобильных */
    .foldersBlock h2>span[contenteditable="true"] {
        font-size: 1.1em;
        padding: 0.3em 0.5em;
    }
    
    /* Папки в режиме редактирования — больше места для touch */
    .edit-mode .folder,
    .edit-mode .entry {
        touch-action: none;
    }
    
    /* --- Меню пользователя на мобильных --- */
    .user-menu-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: 100%;
        border-radius: var(--second-border-radius) var(--second-border-radius) 0 0;
        transform: translateY(100%);
        max-height: 50vh;
        overflow-y: auto;
        padding: var(--second-border-radius);
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
    }
    .user-menu-dropdown.active {
        transform: translateY(0);
    }
    .user-menu-item {
        padding: 14px var(--last-border-radius);
        font-size: 1em;
    }
    /* Модальное окно выбора папки на мобильных */
    .modal-dialog.folder-select .folder-option {
        padding: 0.8em 0.7em;
    }
    .modal-dialog.folder-select .folder-option .folder-title {
        font-size: 1em;
    }
    .modal-dialog.folder-select .new-folder-row input {
        font-size: 1em;
        padding: 0.7em;
    }
    .modal-dialog.folder-select .new-folder-row .btn-create-add {
        padding: 0.7em 1em;
        font-size: 0.9em;
    }
}

/* Планшеты */
@media (min-width: 768px) and (max-width: 1023px) {
    .modal-dialog {
        max-width: 350px;
    }
    .modal-dialog .modal-buttons button {
        padding: 0.8em;
    }
}