/* ===================================================
   Nexus — Mobile improvements v2
   Подключается после style.css
=================================================== */

/* Нижняя навигация: Dock (.dock-wrap) задаётся в dock-dashboard.css */

@media (max-width: 768px) {

    /* === LAYOUT === */
    .main-wrapper {
        margin-left: 0 !important;
        overflow: visible !important;
    }

    .app-container > .main-content {
        margin-left: 0 !important;
    }

    /* Разрешаем скролл на ВСЕХ страницах */
    .main-content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(var(--dock-wrap-height, 88px) + 12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
    }

    /* Главная — topbar сверху */
    .page-index .topbar {
        left: 0 !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
        padding-top: env(safe-area-inset-top) !important;
        height: calc(var(--header-height) + env(safe-area-inset-top)) !important;
    }
    .page-index .main-content {
        padding-top: calc(var(--header-height) + env(safe-area-inset-top) + 16px) !important;
    }

    .nav-divider { grid-column: 1 / -1 !important; width: 100% !important; margin: 6px 0 !important; }
    .nav-label { grid-column: 1 / -1 !important; }
    .nav-item--disabled { display: none !important; }

    .nav-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 10px 12px !important;
        border-radius: 12px !important;
        min-height: 44px !important;
        overflow: hidden !important;
    }

    .nav-icon { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; }

    /* === BOTTOM NAV (legacy класс, если остался) === */
    .bottom-nav {
        display: none !important;
    }

    .bottom-nav-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 8px 4px 5px !important;
        color: var(--text-muted) !important;
        text-decoration: none !important;
        font-size: 10px !important;
        font-weight: 600 !important;
        transition: color 0.15s ease !important;
        -webkit-tap-highlight-color: transparent !important;
        cursor: pointer !important;
        background: none !important; border: none !important; outline: none !important;
        line-height: 1 !important;
    }

    .bottom-nav-item svg { width: 22px !important; height: 22px !important; flex-shrink: 0 !important; transition: transform 0.15s ease !important; }
    .bottom-nav-item:active svg { transform: scale(0.82) !important; }
    .bottom-nav-item.active { color: var(--accent-primary) !important; }
    .bottom-nav-item.active svg { filter: drop-shadow(0 0 5px var(--accent-glow)) !important; }

    /* === TABLE — горизонтальный скролл === */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-left: -16px !important; margin-right: -16px !important;
        padding-left: 16px !important; padding-right: 16px !important;
    }
    .table-container::after { display: none !important; }
    .data-table { min-width: 520px !important; }
    .data-table th, .data-table td { padding: 10px 10px !important; font-size: 12px !important; white-space: nowrap !important; }

    /* === STATS === */
    .stats-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
    .stat-card { flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 14px 10px !important; gap: 8px !important; }
    .stat-info { align-items: center !important; }
    .stat-value { font-size: 22px !important; }
    .stat-sublabel { display: none !important; }

    /* === TOOLBAR === */
    .toolbar { flex-direction: column !important; gap: 10px !important; }
    .search-box { max-width: none !important; }
    .filter-group { width: 100% !important; overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none !important; }
    .filter-group::-webkit-scrollbar { display: none !important; }
    .filter-btn { white-space: nowrap !important; flex-shrink: 0 !important; }

    /* === PAGE HEADER === */
    .page-header { margin-bottom: 16px !important; }
    .page-header h1 { font-size: 20px !important; }

    /* === SECTION HEADER === */
    .section-header { flex-wrap: wrap !important; gap: 10px !important; }

    /* === MODAL — bottom sheet === */
    .modal { align-items: flex-end !important; }
    .modal-content {
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        max-height: 90vh !important; width: 100% !important; max-width: 100% !important;
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    }

    /* === DETAIL PAGE === */
    .detail-header { flex-direction: column !important; gap: 12px !important; }
    .detail-header .detail-actions { width: 100% !important; }
    .detail-header .detail-actions .btn { flex: 1 !important; min-width: 0 !important; }
    .detail-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* === FORMS === */
    .form-row { grid-template-columns: 1fr !important; }

    /* === TELEGRAM LINKS === */
    .telegram-links { display: flex !important; flex-direction: column !important; gap: 8px !important; }
    .telegram-link { padding: 14px 16px !important; }

    /* === DEVICES === */
    .devices-grid { grid-template-columns: 1fr !important; gap: 12px !important; }

    /* === TEAMS === */
    .teams-grid { grid-template-columns: 1fr !important; }
    .team-actions { flex-direction: column !important; }
    .team-actions .btn { width: 100% !important; }

    /* === TABS === */
    .tabs-header { overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none !important; }
    .tabs-header::-webkit-scrollbar { display: none !important; }
    .tab-btn, .detail-tab { white-space: nowrap !important; flex-shrink: 0 !important; min-height: 44px !important; }

    /* SETTINGS — стили в /css/settings.css (v3) */
}

/* ================================================================
   FIX: overflow + убираем bg canvas
================================================================ */
@media (max-width: 768px) {
    html body .main-content { overflow-y: auto !important; }
    /* Только canvas (тяжёлый); слой .bg-fx оставляем — на нём linear-gradient из style.css */
    .bg-fx-canvas { display: none !important; }
}/* ================================================================
   PERFORMANCE: GPU-ускорение и отключение тяжёлых эффектов
================================================================ */
@media (max-width: 768px) {

    /* Переводим анимируемые элементы на GPU */
    .bottom-nav,
.modal-content,
.topbar {
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Убираем backdrop-filter — очень тяжело на мобильном */
    .topbar,
    .modal-content,
    .modal,
    [style*="backdrop-filter"],
    [class*="glass"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Упрощаем box-shadow — убираем многослойные тени */
    .nav-item.active {
        box-shadow: 0 0 12px var(--accent-glow) !important;
    }

    .stat-card,
    .device-card,
    .card {
        box-shadow: 0 6px 28px rgba(0, 0, 0, 0.38) !important;
    }

    /* Убираем filter на иконках — вызывает repaint */
    .bottom-nav-item.active svg {
        filter: none !important;
    }

    /* Убираем transition: all — заменяем на конкретные свойства */
    .nav-item,
    .btn,
    .card,
    .stat-card {
        transition: background 0.15s ease, color 0.15s ease !important;
    }

    /* Отключаем staggered анимации на карточках — вызывают reflow */
    .device-card,
    .stat-card {
        animation: none !important;
        animation-delay: 0s !important;
    }

    /* Отключаем shimmer анимацию */
    .skeleton,
    [class*="shimmer"] {
        animation: none !important;
        background: var(--bg-tertiary) !important;
    }

    /* Плавный скролл через GPU */
    .main-content,
.table-container,
.filter-group,
.tabs-header {
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0);
    }

    /* Убираем color-mix в box-shadow на hover — тяжело пересчитывать */
    .nav-item:hover,
    .btn:hover,
    .card:hover {
        box-shadow: none !important;
    }

    /* Отключаем pointer events на неактивных анимациях */
    * {
        -webkit-tap-highlight-color: transparent;
    }

    /* touch-action для скролла без задержки 300ms */
    a, button, [role="button"] {
        touch-action: manipulation;
    }

    /* Слой «мониторинг»: drawer без жёсткой обводки */
    }