/* =====================================================
   КАРДИНАЛЬНОЕ РЕШЕНИЕ ПРОБЛЕМЫ МОБИЛЬНОГО МЕНЮ
   ===================================================== */

/* ЭТАП 1: СОЗДАЕМ АБСОЛЮТНЫЙ ПОРТАЛ ДЛЯ МОБИЛЬНОГО МЕНЮ */
#mobile-menu-portal {
    /* МАКСИМАЛЬНЫЙ Z-INDEX - ВЫШЕ ВСЕГО НА СТРАНИЦЕ */
    z-index: 2147483647 !important;
    
    /* ПОЛНОЭКРАННОЕ ПОКРЫТИЕ */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    
    /* СКРЫТО ПО УМОЛЧАНИЮ */
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    
    /* ПЛАВНЫЕ ПЕРЕХОДЫ */
    transition: all 0.3s ease !important;
    
    /* БЛОКИРУЕМ ВЗАИМОДЕЙСТВИЕ КОГДА СКРЫТО */
    pointer-events: none !important;
}

/* СОСТОЯНИЕ ОТКРЫТОГО МЕНЮ */
#mobile-menu-portal.show {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* OVERLAY - ЗАТЕМНЕНИЕ ФОНА */
#mobile-menu-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 1 !important;
}

/* САМО МЕНЮ */
#mobile-menu-content {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    background: #252525 !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow-y: auto !important;
    z-index: 2 !important;
}

/* АНИМАЦИЯ ПОЯВЛЕНИЯ МЕНЮ */
#mobile-menu-portal.show #mobile-menu-content {
    transform: translateX(0) !important;
}

/* ЭТАП 2: ПРИНУДИТЕЛЬНОЕ ПОДАВЛЕНИЕ ВСЕХ ЭЛЕМЕНТОВ СТРАНИЦЫ */

/* КОГДА МОБИЛЬНОЕ МЕНЮ АКТИВНО - БЛОКИРУЕМ ВСЕ */
body.mobile-menu-active {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* ПРИНУДИТЕЛЬНО ПОНИЖАЕМ Z-INDEX ВСЕХ ЭЛЕМЕНТОВ КРОМЕ ПОРТАЛА */
body.mobile-menu-active > *:not(#mobile-menu-portal) {
    z-index: -999999 !important;
    position: relative !important;
}

/* ПРИНУДИТЕЛЬНО СКРЫВАЕМ ВСЕ DROPDOWN И POPUP */
body.mobile-menu-active .user-menu,
body.mobile-menu-active .dropdown-menu,
body.mobile-menu-active #user-dropdown-menu,
body.mobile-menu-active #mobile-user-dropdown-menu,
body.mobile-menu-active .notification-dropdown,
body.mobile-menu-active .notifications-popup,
body.mobile-menu-active [class*="dropdown"],
body.mobile-menu-active [class*="popup"],
body.mobile-menu-active .modal,
body.mobile-menu-active .overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -999999 !important;
}

/* ПРИНУДИТЕЛЬНО БЛОКИРУЕМ ВСЕ ОСНОВНЫЕ ЭЛЕМЕНТЫ */
body.mobile-menu-active main,
body.mobile-menu-active .container,
body.mobile-menu-active section,
body.mobile-menu-active article,
body.mobile-menu-active .content,
body.mobile-menu-active .wrapper,
body.mobile-menu-active .grid,
body.mobile-menu-active .flex {
    z-index: -999999 !important;
    position: relative !important;
}

/* БЛОКИРУЕМ ВСЕ КАРТОЧКИ И БЛОКИ */
body.mobile-menu-active .task-card,
body.mobile-menu-active .channel-card,
body.mobile-menu-active .profile-card,
body.mobile-menu-active .bg-card,
body.mobile-menu-active .info-card,
body.mobile-menu-active [class*="bg-"],
body.mobile-menu-active .card {
    z-index: -999999 !important;
    position: relative !important;
}

/* БЛОКИРУЕМ ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ */
body.mobile-menu-active #floating-notifications-icon,
body.mobile-menu-active .floating,
body.mobile-menu-active .fixed,
body.mobile-menu-active .absolute,
body.mobile-menu-active .sticky {
    z-index: -999999 !important;
    position: relative !important;
}

/* ЭТАП 3: БЛОКИРОВКА ВСЕХ TAILWIND КЛАССОВ */
body.mobile-menu-active .z-10,
body.mobile-menu-active .z-20,
body.mobile-menu-active .z-30,
body.mobile-menu-active .z-40,
body.mobile-menu-active .z-50,
body.mobile-menu-active .z-auto,
body.mobile-menu-active .\!z-10,
body.mobile-menu-active .\!z-20,
body.mobile-menu-active .\!z-30,
body.mobile-menu-active .\!z-40,
body.mobile-menu-active .\!z-50 {
    z-index: -999999 !important;
}

/* ЭТАП 4: АБСОЛЮТНАЯ БЛОКИРОВКА ВСЕХ ЭЛЕМЕНТОВ С INLINE СТИЛЯМИ */
body.mobile-menu-active [style*="z-index"],
body.mobile-menu-active [style*="position: fixed"],
body.mobile-menu-active [style*="position: absolute"],
body.mobile-menu-active [style*="position: sticky"] {
    z-index: -999999 !important;
    position: relative !important;
}

/* ЭТАП 5: ФИНАЛЬНАЯ БЛОКИРОВКА - ВСЕ ЭЛЕМЕНТЫ БЕЗ ИСКЛЮЧЕНИЙ */
body.mobile-menu-active *:not(#mobile-menu-portal):not(#mobile-menu-portal *) {
    z-index: -999999 !important;
}

/* ЭТАП 6: СТИЛИ СОДЕРЖИМОГО МЕНЮ */

/* Заголовок меню */
.mobile-menu-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem !important;
    border-bottom: 1px solid #3a3a3a !important;
    background: #252525 !important;
}

.mobile-menu-user-info {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.mobile-menu-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #2a2a2a !important;
}

.mobile-menu-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.mobile-menu-user-details h4 {
    color: white !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.mobile-menu-user-details p {
    color: #999 !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.mobile-menu-close {
    background: none !important;
    border: none !important;
    color: white !important;
    font-size: 1.5rem !important;
    cursor: pointer !important;
    padding: 0.5rem !important;
    border-radius: 4px !important;
    transition: background 0.2s !important;
    min-width: 40px !important;
    min-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mobile-menu-close:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Баланс */
.mobile-menu-balance {
    margin: 1rem !important;
    padding: 0.75rem !important;
    background: #2a2a2a !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.mobile-menu-balance i {
    color: #ffd700 !important;
    font-size: 1.2rem !important;
}

.mobile-menu-balance span {
    color: #ffd700 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
}

/* Пункты меню */
.mobile-menu-items {
    padding: 0 1rem 1rem !important;
    flex: 1 !important;
    overflow-y: auto !important;
}

.mobile-menu-items a {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem 0 !important;
    color: #e0e0e0 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #3a3a3a !important;
    transition: color 0.2s !important;
    font-size: 0.9rem !important;
}

.mobile-menu-items a:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.05) !important;
    margin: 0 -1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.mobile-menu-items a:last-child {
    border-bottom: none !important;
}

.mobile-menu-items a.text-red-400 {
    color: #f87171 !important;
}

.mobile-menu-items a i {
    width: 1.25rem !important;
    text-align: center !important;
    font-size: 1.1rem !important;
}

/* ЭТАП 7: ЗАЩИТА ОТ ВНЕШНИХ ВЛИЯНИЙ */

/* Убираем все transform у элементов страницы при активном меню */
body.mobile-menu-active main *,
body.mobile-menu-active .container *,
body.mobile-menu-active section *,
body.mobile-menu-active article * {
    transform: none !important;
    position: static !important;
    z-index: -999999 !important;
}

/* Принудительно отключаем все анимации на странице */
body.mobile-menu-active * {
    animation: none !important;
    transition: none !important;
}

/* Восстанавливаем анимации только для портала */
#mobile-menu-portal,
#mobile-menu-portal * {
    animation: unset !important;
    transition: unset !important;
}

#mobile-menu-portal {
    transition: all 0.3s ease !important;
}

#mobile-menu-content {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ЭТАП 8: ЯДЕРНАЯ ОПЦИЯ - МАКСИМАЛЬНОЕ ПОДАВЛЕНИЕ */

/* Принудительно блокируем ВСЕ элементы страницы кроме портала */
body.mobile-menu-active *:not(#mobile-menu-portal):not(#mobile-menu-portal *):not(html):not(body) {
    z-index: -999999 !important;
    position: relative !important;
}

/* Специальное правило для всех div, section, main, article */
body.mobile-menu-active div:not(#mobile-menu-portal):not(#mobile-menu-portal *),
body.mobile-menu-active section:not(#mobile-menu-portal):not(#mobile-menu-portal *),
body.mobile-menu-active main:not(#mobile-menu-portal):not(#mobile-menu-portal *),
body.mobile-menu-active article:not(#mobile-menu-portal):not(#mobile-menu-portal *),
body.mobile-menu-active header:not(#mobile-menu-portal):not(#mobile-menu-portal *),
body.mobile-menu-active nav:not(#mobile-menu-portal):not(#mobile-menu-portal *),
body.mobile-menu-active aside:not(#mobile-menu-portal):not(#mobile-menu-portal *),
body.mobile-menu-active footer:not(#mobile-menu-portal):not(#mobile-menu-portal *) {
    z-index: -999999 !important;
    position: relative !important;
}

/* Блокируем все классы с высокими z-index */
body.mobile-menu-active [class*="z-"],
body.mobile-menu-active [style*="z-index"],
body.mobile-menu-active [class*="fixed"],
body.mobile-menu-active [class*="absolute"],
body.mobile-menu-active [class*="sticky"],
body.mobile-menu-active [class*="relative"] {
    z-index: -999999 !important;
    position: relative !important;
}

/* Специально для tailwind классов */
body.mobile-menu-active .fixed,
body.mobile-menu-active .absolute,
body.mobile-menu-active .sticky,
body.mobile-menu-active .relative {
    z-index: -999999 !important;
    position: relative !important;
}

/* Блокируем все возможные контейнеры */
body.mobile-menu-active .bg-gray-800,
body.mobile-menu-active .bg-gray-900,
body.mobile-menu-active .bg-\[.*\],
body.mobile-menu-active .text-.*,
body.mobile-menu-active .border-.*,
body.mobile-menu-active .rounded-.*,
body.mobile-menu-active .shadow-.*,
body.mobile-menu-active .p-.*,
body.mobile-menu-active .m-.*,
body.mobile-menu-active .w-.*,
body.mobile-menu-active .h-.*,
body.mobile-menu-active .flex.*,
body.mobile-menu-active .grid.* {
    z-index: -999999 !important;
}

/* ЭТАП 9: ФИНАЛЬНАЯ ЯДЕРНАЯ АТАКА */

/* Перехватываем любые попытки установить высокий z-index */
body.mobile-menu-active [style*="z-index: 1"],
body.mobile-menu-active [style*="z-index: 10"],
body.mobile-menu-active [style*="z-index: 100"],
body.mobile-menu-active [style*="z-index: 1000"],
body.mobile-menu-active [style*="z-index: 10000"],
body.mobile-menu-active [style*="z-index: 100000"],
body.mobile-menu-active [style*="z-index: 999"],
body.mobile-menu-active [style*="z-index: 9999"],
body.mobile-menu-active [style*="z-index: 99999"] {
    z-index: -999999 !important;
}

/* Блокируем конкретные проблемные элементы */
body.mobile-menu-active .task-card,
body.mobile-menu-active .channel-card,
body.mobile-menu-active .info-card,
body.mobile-menu-active .bg-card,
body.mobile-menu-active .card {
    z-index: -999999 !important;
    position: relative !important;
}

/* Блокируем все кнопки, ссылки и интерактивные элементы */
body.mobile-menu-active button:not(#mobile-menu-portal button):not(#mobile-menu-portal *),
body.mobile-menu-active a:not(#mobile-menu-portal a):not(#mobile-menu-portal *),
body.mobile-menu-active input:not(#mobile-menu-portal input):not(#mobile-menu-portal *),
body.mobile-menu-active textarea:not(#mobile-menu-portal textarea):not(#mobile-menu-portal *),
body.mobile-menu-active select:not(#mobile-menu-portal select):not(#mobile-menu-portal *) {
    z-index: -999999 !important;
    position: relative !important;
}

/* ГАРАНТИЯ: Портал всегда сверху */
#mobile-menu-portal {
    z-index: 2147483647 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

#mobile-menu-portal * {
    z-index: inherit !important;
}

/* ЭТАП 10: СУПЕР-АГРЕССИВНАЯ БЛОКИРОВКА */

/* Принудительно блокируем ВСЕ элементы с любым z-index */
body.mobile-menu-active *:not(#mobile-menu-portal):not(#mobile-menu-portal *) {
    z-index: -999999 !important;
    position: relative !important;
    isolation: isolate !important;
    transform: none !important;
    will-change: auto !important;
}

/* Принудительно блокируем все inline стили */
body.mobile-menu-active [style] {
    z-index: -999999 !important;
}

/* Принудительно блокируем все возможные позиционированные элементы */
body.mobile-menu-active .position-relative,
body.mobile-menu-active .position-absolute,
body.mobile-menu-active .position-fixed,
body.mobile-menu-active .position-sticky,
body.mobile-menu-active [class*="pos-"],
body.mobile-menu-active [style*="position"] {
    z-index: -999999 !important;
    position: relative !important;
}

/* Блокируем все возможные контейнеры и оберки */
body.mobile-menu-active .container,
body.mobile-menu-active .wrapper,
body.mobile-menu-active .content,
body.mobile-menu-active .main,
body.mobile-menu-active .app,
body.mobile-menu-active .page,
body.mobile-menu-active .layout,
body.mobile-menu-active .section,
body.mobile-menu-active .block,
body.mobile-menu-active .component,
body.mobile-menu-active .widget,
body.mobile-menu-active .panel,
body.mobile-menu-active .box,
body.mobile-menu-active .item {
    z-index: -999999 !important;
    position: relative !important;
}

/* Блокируем все элементы с высокими числовыми z-index */
body.mobile-menu-active [style*="z-index: 2"],
body.mobile-menu-active [style*="z-index: 3"],
body.mobile-menu-active [style*="z-index: 4"],
body.mobile-menu-active [style*="z-index: 5"],
body.mobile-menu-active [style*="z-index: 6"],
body.mobile-menu-active [style*="z-index: 7"],
body.mobile-menu-active [style*="z-index: 8"],
body.mobile-menu-active [style*="z-index: 9"],
body.mobile-menu-active [style*="z-index: 50"],
body.mobile-menu-active [style*="z-index: 100"],
body.mobile-menu-active [style*="z-index: 500"],
body.mobile-menu-active [style*="z-index: 1000"] {
    z-index: -999999 !important;
}

/* ФИНАЛЬНАЯ ЯДЕРНАЯ АТАКА - ПОЛНОЕ СКРЫТИЕ ВСЕГО КРОМЕ ПОРТАЛА */

/* РАДИКАЛЬНОЕ РЕШЕНИЕ: ПОЛНОСТЬЮ СКРЫВАЕМ ВСЕ ЭЛЕМЕНТЫ КРОМЕ ПОРТАЛА */
body.mobile-menu-active > *:not(#mobile-menu-portal) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -999999 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* ОТКЛЮЧАЕМ ПРОБЛЕМНЫЙ СЕЛЕКТОР */
/*
*:not(.notifications-container):not(.notification):not(.notifications-container *) {
    z-index: auto !important;
}
*/

/* УБЕЖДАЕМСЯ ЧТО ПОРТАЛ ПОЛНОСТЬЮ КОНТРОЛИРУЕТ ЭКРАН */
body.mobile-menu-active #mobile-menu-portal {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2147483647 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.8) !important;
    isolation: auto !important;
}

/* ДОПОЛНИТЕЛЬНАЯ ЗАЩИТА - СКРЫВАЕМ ВСЕ ВЛОЖЕННЫЕ ЭЛЕМЕНТЫ */
body.mobile-menu-active *:not(#mobile-menu-portal):not(#mobile-menu-portal *) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -999999 !important;
    transform: none !important;
    transform-style: flat !important;
    perspective: none !important;
    backface-visibility: hidden !important;
    will-change: auto !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* ВОССТАНАВЛИВАЕМ ВИДИМОСТЬ ТОЛЬКО ДЛЯ ЭЛЕМЕНТОВ ПОРТАЛА */
#mobile-menu-portal,
#mobile-menu-portal * {
    display: inherit !important;
    visibility: visible !important;
    opacity: inherit !important;
    position: inherit !important;
    top: inherit !important;
    left: inherit !important;
    transform: inherit !important;
}

/* СПЕЦИАЛЬНЫЕ СТИЛИ ДЛЯ ЭЛЕМЕНТОВ ПОРТАЛА */
#mobile-menu-overlay {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    z-index: 1 !important;
}

#mobile-menu-content {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 280px !important;
    height: 100vh !important;
    background: #252525 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 2 !important;
}

/* ПРИНУДИТЕЛЬНО ПОКАЗЫВАЕМ МЕНЮ КОГДА ПОРТАЛ АКТИВЕН */
#mobile-menu-portal.show #mobile-menu-content {
    transform: translateX(0) !important;
}

/* УБИРАЕМ ВСЕ БЛОКИРОВКИ С ЭЛЕМЕНТОВ МЕНЮ */
#mobile-menu-portal a,
#mobile-menu-portal button,
#mobile-menu-portal span,
#mobile-menu-portal div,
#mobile-menu-portal i {
    display: inherit !important;
    visibility: visible !important;
    opacity: inherit !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: inherit !important;
    pointer-events: auto !important;
}

/* ПРИНУДИТЕЛЬНО БЛОКИРУЕМ HTML И BODY ОТ ПРОКРУТКИ */
body.mobile-menu-active {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

html.mobile-menu-active {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}