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

/* ============================================================
   0. Safe-area отступы для PWA standalone-режима
      Обеспечивают корректное отображение на устройствах с notch
      и закруглёнными углами (iPhone, современные Android)
   ============================================================ */

/* Верхний отступ для topNav в standalone-режиме */
@media (display-mode: standalone) {
    .topNav {
        padding-top: max(0.65em, env(safe-area-inset-top, 0px)) !important;
    }
    
    /* Нижний отступ для mobile-nav */
    .mobile-nav.active {
        padding-bottom: max(0.5em, env(safe-area-inset-bottom, 0px)) !important;
    }
    
    /* Левый и правый отступы для контента */
    .workSpace {
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}

/* ============================================================
   Window Controls Overlay (PWA на ПК)
   Активируется в Chromium-браузерах (Edge 91+, Chrome 93+)
   при запуске PWA в режиме standalone.
   - Кнопки управления окном встраиваются в интерфейс topNav
   - topNav становится областью перетаскивания окна (drag region)
   - env(titlebar-area-*) автоматически подстраивается под ОС
     (Windows — кнопки справа, macOS — слева)
   ============================================================ */
@media (display-mode: window-controls-overlay) {
    /* --- Body как flex-колонка: topNav + workSpace --- */
    body {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* --- Верхняя навигация: в потоке flex, как drag-область --- */
    .topNav {
        /* Выходим из position: fixed — становимся частью flex-потока */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 100;
        flex: 0 0 auto !important;
        min-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        scroll-snap-align: none;
        -webkit-scroll-snap-align: none;
        /* Скругления только сверху, чтобы стыковалось с workSpace */
        border-radius: var(--main-border-radius) var(--main-border-radius) 0 0 !important;
        margin: 0 !important;
        padding: 0.65em 0.85em !important;

        /*
            Минимальная высота — как у области заголовка окна.
            Используем min-height вместо height, чтобы контент
            (логотип 60px + отступы) не обрезался, если системная
            область заголовка меньше необходимого.
        */
        min-height: env(titlebar-area-height, 70px) !important;
        height: auto !important;

        /* Отступ справа — ширина кнопок управления окном (Windows) */
        padding-right: env(titlebar-area-width, 0px) !important;

        /* Область перетаскивания окна */
        app-region: drag;
        -webkit-app-region: drag;

        /* Сохраняем glassmorphism-стиль .blockDarkType1 */
        background: var(--bg-surface) !important;
        background-image: var(--bg-gradient) !important;
        background-attachment: fixed !important;
        backdrop-filter: blur(var(--blur-glass, 24px)) !important;
        -webkit-backdrop-filter: blur(var(--blur-glass, 24px)) !important;
        border-bottom: 1px solid var(--border-subtle) !important;
        box-shadow: var(--box-shadow-stnd) !important;
    }

    /* Интерактивные элементы НЕ должны быть drag-областью */
    .topNav .links,
    .topNav .userData,
    .topNav .logoApp {
        app-region: no-drag;
        -webkit-app-region: no-drag;
    }

    /*
        Адаптация контента topNav под компактную высоту.
        Если системная область заголовка меньше 70px,
        логотип и элементы подстраиваются.
    */
    .topNav .logoApp img {
        width: 40px !important;
        height: 40px !important;
    }

    .topNav .links {
        gap: 0.5em;
    }

    .topNav .userData span.shortname {
        font-size: 0.85em;
        padding: 0.3em 0.6em;
    }

    /* --- Рабочее пространство: flex-grow заполняет остаток --- */
    .workSpace {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        padding: 1em !important;
        box-sizing: border-box !important;
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        grid-gap: 1em !important;
        grid-template-rows: min-content !important;
        overflow: hidden !important;
    }
}

/* ============================================================
   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 фиксирован сверху, вне скролла
      - .mobile-nav — нижняя панель навигации из data-title
   ============================================================ */
@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: 100dvh !important;

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

        /* Плавный скролл */
        scroll-behavior: smooth;

        /* Отключаем 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;

        /* Отступ снизу для компенсации фиксированной mobile-nav */
        /* 70px — высота табов + safe-area-inset */
        bottom: calc(1em + 70px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .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;
        height: 70px !important;
        box-sizing: border-box !important;
        scroll-snap-align: none;
        -webkit-scroll-snap-align: none;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0.65em 0.85em !important;

        /* Сохраняем glassmorphism-стиль .blockDarkType1 */
        background: var(--bg-surface) !important;
        background-image: var(--bg-gradient) !important;
        background-attachment: fixed !important;
        backdrop-filter: blur(var(--blur-glass, 24px)) !important;
        -webkit-backdrop-filter: blur(var(--blur-glass, 24px)) !important;
        border-bottom: 1px solid var(--border-subtle) !important;
        box-shadow: var(--box-shadow-stnd) !important;
    }

    /* --- Все блоки .blockDarkType1 (кроме .topNav) и .sppvr:not(form) --- */
    .blockDarkType1:not(.topNav),
    .sppvr:not(form) {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: calc(100vh - var(--main-border-radius) * 2 - 70px - 70px) !important;
        margin-top: 70px !important;
        min-height: unset !important;
        overflow-y: auto !important;

        /* 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;
    }

    /* Форма СППВР на мобильных */
    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;
    }

    /* --- Компактные горизонтальные карточки экспертов на мобильных --- */
    .experts-grid {
        gap: 0.75rem;
    }

    .expert-card {
        flex-direction: row;
        border-radius: 14px;
    }

    .expert-photo {
        width: 100px;
        min-width: 100px;
        aspect-ratio: 1/1;
        border-radius: 0;
    }

    .expert-card-body {
        padding: 0.75rem;
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .expert-name {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .expert-min-name {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .expert-info {
        display: none;
    }

    .expert-card-footer {
        display: none;
    }

    .expert-photo-placeholder svg {
        width: 40px;
        height: 40px;
    }

    /* --- Таблицы в рекомендациях --- */
    .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;
    }

    /* ============================================================
       Мобильная навигация (bottom nav)
       Генерируется JS из data-title блоков
       ============================================================ */
    .mobile-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        display: flex;
        overflow-x: auto;
        background: var(--bg-surface);
        background-image: var(--bg-gradient);
        background-attachment: fixed;
        backdrop-filter: blur(var(--blur-glass, 24px));
        -webkit-backdrop-filter: blur(var(--blur-glass, 24px));
        border-top: 1px solid var(--border-subtle);
        /* Безопасная зона для iPhone X+ */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        /* Скрываем скроллбар */
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* Анимация появления */
        transform: translateY(100%);
        transition: transform 0.3s ease;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
        /* Явная высота для корректного расчёта отступов блоков */
        height: 70px;
        box-sizing: border-box;
    }
    .mobile-nav::-webkit-scrollbar {
        display: none;
    }
    .mobile-nav.active {
        transform: translateY(0);
    }

    /* Таб навигации */
    .mobile-nav .mobile-nav-tab {
        flex: 1 0 auto;
        padding: 0.6em 0.8em;
        text-align: center;
        font-size: 0.75em;
        color: var(--text-secondary, #8E9DAE);
        cursor: pointer;
        border: none;
        background: transparent;
        transition: color 0.2s, background 0.2s;
        white-space: nowrap;
        position: relative;
        min-width: 0;
        font-family: inherit;
        line-height: 1.2;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }
    .mobile-nav .mobile-nav-tab:active {
        background: rgba(255, 255, 255, 0.05);
    }

    /* Активный таб */
    .mobile-nav .mobile-nav-tab.active {
        color: var(--accent-primary, #007bff);
    }
    .mobile-nav .mobile-nav-tab.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20%;
        right: 20%;
        height: 2px;
        background: var(--accent-primary, #007bff);
        border-radius: 1px;
    }

    /* Кнопка "Домой" — прижимается к правому краю */
    .mobile-nav .mobile-nav-tab.mobile-nav-home {
        margin-left: auto;
    }

    .expert-modal-close{
        position: fixed;
    top: 3rem;
    right: 3rem;
    }
}

/* ============================================================
   3. Планшеты 768px - 1024px
      - Уменьшенные отступы
      - Блоки по --wg колонок (как на десктопе)
   ============================================================ */
@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 (кроме .topNav) по --wg колонок --- */
    .blockDarkType1:not(.topNav) {
        grid-column: span var(--wg, 6) !important;
        padding: 0.85em;
        box-sizing: border-box;
    }

    /* --- Блоки с формой СППВР --- */
    .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 по --wg колонок (не принудительные 50%!)
      - Если блок всего 1 (--wg=12) — он на всю ширину
      - Если блок без --wg (authForm) — fallback 6 колонок
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
    /* --- Все блоки .blockDarkType1 (кроме .topNav) по --wg колонок --- */
    .blockDarkType1:not(.topNav) {
        grid-column: span var(--wg, 6) !important;
        box-sizing: border-box;
    }

    /* --- Рабочее пространство: чуть уменьшаем отступы --- */
    .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);
    }

    /* --- Ответы экспертов: максимум 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 !important;
        left: var(--second-border-radius) !important;
        right: var(--second-border-radius) !important;
        bottom: calc(70px + var(--second-border-radius)) !important;
        top: auto !important;
        min-width: auto !important;
        width: auto !important;
        border-radius: var(--second-border-radius) !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        padding: var(--second-border-radius) !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5) !important;
        z-index: 99 !important;
        margin: 0 !important;
        transform: none !important;
    }
    .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;
    }
}

/* ============================================================
    7. Очень маленькие экраны ≤ 480px
       - Защита от переполнения контента
       - Папки и случаи в 1 колонку
       - Модальные окна на всю ширину снизу
       - Кнопки вертикально
   ============================================================ */
@media (max-width: 480px) {
    /* --- Защита от переполнения контента (проблема 1) --- */
    .blockDarkType1 {
        overflow-x: hidden !important;
        word-break: break-word;
        hyphens: auto;
        min-height: 0 !important;
    }

    /* Таблицы с фиксированной раскладкой */
    .recData table {
        table-layout: fixed;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Предотвращение выхода flex/grid контейнеров */
    .blockDarkType1 > * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Длинные ссылки */
    a {
        word-break: break-all;
    }

    /* --- Папки и случаи в 1 колонку (проблема 3) --- */
    .folders,
    .entrys {
        grid-template-columns: 1fr !important;
    }

    .folders .folder,
    .entrys .entry {
        aspect-ratio: unset !important;
        min-height: 150px;
    }

    /* --- Модальные окна на всю ширину снизу (проблема 4) --- */
    .modal-overlay {
        align-items: flex-end !important;
    }

    .modal-dialog {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: var(--second-border-radius) var(--second-border-radius) 0 0 !important;
        max-height: 85vh;
        overflow-y: auto;
    }

    /* --- Меню пользователя на очень маленьких экранах — на всю ширину снизу --- */
    .user-menu-dropdown {
        left: 0 !important;
        right: 0 !important;
        bottom: 70px !important;
        border-radius: var(--second-border-radius) var(--second-border-radius) 0 0 !important;
    }

    /* --- Кнопки вертикально (проблема 6) --- */
    .buttons {
        grid-template-columns: 1fr !important;
        gap: 0.5em;
    }

    .buttons button {
        width: 100% !important;
        justify-content: center;
    }

    .buttons .find {
        grid-column: 1 / -1;
    }

    /* Inline-блоки с кнопками — вертикально */
    .inlineBox {
        flex-direction: column !important;
    }

    .inlineBox label,
    .inlineBox button {
        width: 100% !important;
    }

    /* Кнопки в модальных окнах — крупнее для touch */
    .modal-dialog .modal-buttons button {
        padding: 0.9em;
        font-size: 1em;
    }

    /* Блок с кнопками в результатах СППВР */
    form.sppvr.line .inlineBox {
        flex-direction: column !important;
    }

    form.sppvr.line .inlineBox label {
        width: 100% !important;
    }

    /* --- Строка создания новой папки в модальном окне (задача 4) --- */
    .modal-dialog.folder-select .new-folder-row {
        flex-wrap: wrap !important;
    }

    .modal-dialog.folder-select .new-folder-row input {
        min-width: 100% !important;
    }
}