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

.bottom-nav { display: none; }

@media (max-width: 768px) {

    /* === LAYOUT === */
    .mobile-menu-btn { display: none !important; }

    .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(72px + 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;
    }

    /* === OVERLAY === */
    .mobile-overlay { display: block !important; z-index: 149 !important; }

    /* === SIDEBAR DRAWER СНИЗУ === */
    .sidebar {
        position: fixed !important;
        top: auto !important;
        bottom: calc(57px + env(safe-area-inset-bottom)) !important;
        left: 0 !important; right: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: 75vh !important;
        min-height: 0 !important;
        transform: translateY(calc(100% + 20px)) !important;
        transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
        border-radius: 20px 20px 0 0 !important;
        border-right: none !important;
        border-top: 1px solid var(--border-color) !important;
        overflow-y: auto !important; overflow-x: hidden !important;
        padding-bottom: 20px !important; padding-top: 0 !important;
        z-index: 150 !important;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.5) !important;
    }

    .sidebar::before {
        content: '' !important;
        display: block !important;
        width: 40px !important; height: 4px !important;
        background: var(--border-light) !important;
        border-radius: 2px !important;
        margin: 12px auto 4px !important;
    }

    .sidebar.open { transform: translateY(0) !important; }

    /* Sidebar header */
    .sidebar-header { padding: 8px 16px 10px !important; border-bottom: 1px solid var(--border-color) !important; }
    .sidebar .logo-text { display: inline !important; font-size: 16px !important; }

    /* Sidebar nav — 2 колонки */
    .sidebar-nav {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
        padding: 12px 12px 8px !important;
        overflow: visible !important;
    }
    .nav-divider { grid-column: 1 / -1 !important; width: 100% !important; margin: 6px 0 !important; }
    .nav-label { grid-column: 1 / -1 !important; }
    .sidebar .nav-label { display: block !important; }
    .nav-item--disabled { display: none !important; }

    /* Показываем текст в drawer */
    .sidebar .nav-item span,
    .sidebar-nav .nav-item span {
        display: inline !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        flex: 1 !important;
        min-width: 0 !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; }

    /* Sidebar footer */
    .sidebar-footer {
        margin: 4px 12px 0 !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        background: var(--bg-tertiary) !important;
        display: flex !important; align-items: center !important;
    }
    .sidebar-footer .user-details { display: flex !important; flex-direction: column !important; }

    /* === BOTTOM NAV === */
    .bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important; left: 0 !important; right: 0 !important;
        z-index: 200 !important;
        background: var(--bg-secondary) !important;
        border-top: 1px solid var(--border-color) !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        height: calc(57px + env(safe-area-inset-bottom)) !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 === */
    .settings-grid { grid-template-columns: 1fr !important; }
    .danger-item { flex-direction: column !important; gap: 12px !important; text-align: center !important; }
}

/* ================================================================
   FIX: overflow + убираем bg canvas
================================================================ */
@media (max-width: 768px) {
    html body .main-content { overflow-y: auto !important; }
    .bg-fx, .bg-fx-canvas { display: none !important; }
}

/* ================================================================
   SIDEBAR — мобильный drawer (оригинальная структура)
================================================================ */
@media (max-width: 768px) {

    /* --- nav-item: горизонтально с текстом --- */
    .sidebar .sidebar-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
        padding: 8px 10px !important;
        overflow-y: auto !important;
        flex: 1 !important;
    }

    .sidebar .nav-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        min-height: 48px !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        position: relative !important;
        transform: none !important;
    }
    .sidebar .nav-item:hover { transform: none !important; }

    /* Показываем span */
    .sidebar .nav-item span {
        display: inline !important;
        white-space: nowrap !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        flex: 1 !important;
        overflow: visible !important;
        text-overflow: unset !important;
        opacity: 1 !important;
        max-width: unset !important;
        width: auto !important;
    }

    .sidebar .nav-item.active span { color: #fff !important; }

    /* Активный пункт — белый текст на оранжевом (как в style.css) */
    .sidebar .nav-item.active {
        background: var(--accent-primary) !important;
        color: #fff !important;
        box-shadow: 0 0 20px var(--accent-glow) !important;
    }

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

    /* Скрываем disabled (В РАЗРАБОТКЕ) */
    .sidebar .nav-item--disabled { display: none !important; }

    /* nav-label: без !important на display — чтобы api.js мог скрыть через style.display */
    .sidebar .nav-label {
        display: block;
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.07em !important;
        text-transform: uppercase !important;
        color: var(--text-muted) !important;
        padding: 10px 14px 4px !important;
    }

    /* nav-divider: без !important на display */
    .sidebar .nav-divider {
        display: block;
        width: calc(100% - 28px) !important;
        height: 1px !important;
        align-self: unset !important;
        margin: 6px 14px 2px !important;
    }

    /* --- sidebar-footer --- */
    .sidebar .sidebar-footer {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 12px 14px !important;
        margin: 4px 10px !important;
        background: var(--bg-tertiary) !important;
        border-radius: 12px !important;
        border-top: none !important;
        flex-shrink: 0 !important;
    }

    .sidebar .user-info {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .sidebar .user-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
        flex-shrink: 0 !important;
    }

    .sidebar .user-details {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
    }

    .sidebar .user-name {
        font-size: 13px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
    }

    .sidebar .user-role {
        font-size: 11px !important;
        color: var(--text-muted) !important;
        display: block !important;
    }

    .sidebar .logout-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        background: rgba(239,68,68,0.12) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ef4444 !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }

    .sidebar .logout-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* --- Логотип --- */
    .sidebar .logo-image { display: none !important; }
    .sidebar .m-logo {
        width: 32px !important;
        height: 32px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    .sidebar .logo-text {
        display: inline !important;
        font-size: 18px !important;
        font-weight: 800 !important;
    }

    .sidebar-header {
        padding: 12px 16px 10px !important;
        border-bottom: 1px solid var(--border-color) !important;
        flex-shrink: 0 !important;
    }
}


/* ================================================================
   PERFORMANCE: GPU-ускорение и отключение тяжёлых эффектов
================================================================ */
@media (max-width: 768px) {

    /* Переводим анимируемые элементы на GPU */
    .sidebar,
    .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,
    .settings-card,
    .device-card,
    .card {
        box-shadow: none !important;
    }

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

    /* Ускоряем transition sidebar — убираем cubic-bezier пересчёт */
    .sidebar {
        transition: transform 0.28s ease !important;
    }

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

    /* Отключаем staggered анимации на карточках — вызывают reflow */
    .settings-card,
    .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,
    .sidebar,
    .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;
    }
}