/* Мобильная версия сайта - адаптивные стили */

/* === ОБЩИЕ МОБИЛЬНЫЕ СТИЛИ === */
@media (max-width: 768px) {
    /* Контейнеры */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100% !important;
    }

    /* Сетки и флексы */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .flex {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .flex.items-center {
        align-items: stretch !important;
    }

    /* Карточки */
    .bg-card, .bg-\[#2a2a2a\] {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Кнопки */
    button, .btn {
        width: 100% !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }

    /* Текст */
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1.125rem !important;
    }

    /* Отступы */
    .space-x-4 > * + * {
        margin-left: 0 !important;
        margin-top: 0.5rem !important;
    }

    .space-y-4 > * + * {
        margin-top: 1rem !important;
    }
}

/* === ШАПКА МОБИЛЬНАЯ === */
@media (max-width: 768px) {
    header {
        padding: 0.75rem 1rem !important;
        min-height: 60px !important;
    }

    header .container {
        gap: 0.5rem !important;
    }

    /* Логотип */
    header a[class*="text-2xl"] {
        font-size: 1.25rem !important;
    }

    header .text-sm {
        display: none !important;
    }

    /* Блок с баллами */
    .bg-\[#2a2a2a\].rounded.px-4.py-2 {
        padding: 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Иконка уведомлений */
    #notifications-icon > div {
        width: 36px !important;
        height: 36px !important;
    }

    /* Кнопка пользователя */
    #user-menu-toggle {
        padding: 0.5rem !important;
        min-height: 40px !important;
    }

    #header-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    #user-menu-toggle span {
        font-size: 0.875rem !important;
    }

    /* Выпадающее меню пользователя */
    .user-menu {
        width: calc(100vw - 2rem) !important;
        right: -1rem !important;
        left: 1rem !important;
        max-width: none !important;
    }

    /* Всплывающие уведомления */
    .notifications-popup {
        width: calc(100vw - 2rem) !important;
        right: -1rem !important;
        left: 1rem !important;
    }
}

/* === СТРАНИЦЫ === */

/* Главная страница */
@media (max-width: 768px) {
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    .task-card {
        padding: 1rem !important;
    }

    .task-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .task-buttons {
        width: 100% !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .task-buttons button {
        width: 100% !important;
    }
}

/* Профиль */
@media (max-width: 768px) {
    .profile-grid {
        grid-template-columns: 1fr !important;
    }

    .profile-stats {
        flex-direction: column !important;
        text-align: center !important;
    }

    .profile-avatar {
        width: 80px !important;
        height: 80px !important;
        margin: 0 auto 1rem auto !important;
    }

    .level-progress {
        width: 100% !important;
        margin-top: 1rem !important;
    }

    .operations-history {
        overflow-x: auto !important;
    }

    .operations-table {
        min-width: 500px !important;
    }
}

/* Каналы */
@media (max-width: 768px) {
    .channels-grid {
        grid-template-columns: 1fr !important;
    }

    .channel-card {
        padding: 1rem !important;
    }

    .channel-info {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
    }

    .channel-avatar {
        margin-right: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    .channel-stats {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.25rem !important;
    }

    .channel-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .channel-actions button {
        width: 100% !important;
    }
}

/* Заказы */
@media (max-width: 768px) {
    .orders-grid {
        grid-template-columns: 1fr !important;
    }

    .order-card {
        padding: 1rem !important;
    }

    .order-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .order-details {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .order-actions {
        width: 100% !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .order-actions button {
        width: 100% !important;
    }
}

/* Настройки */
@media (max-width: 768px) {
    .settings-form {
        padding: 1rem !important;
    }

    .form-group {
        margin-bottom: 1rem !important;
    }

    .form-row {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .toggle-switch {
        align-self: flex-start !important;
    }
}

/* === ТАБЫ === */
@media (max-width: 768px) {
    .tabs-container {
        margin-bottom: 1rem !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .tabs {
        display: flex !important;
        white-space: nowrap !important;
        padding-bottom: 0.5rem !important;
        min-width: max-content !important;
    }

    .tab {
        padding: 0.5rem 1rem !important;
        margin-right: 0.5rem !important;
        font-size: 0.875rem !important;
        min-width: max-content !important;
    }

    .tab:last-child {
        margin-right: 0 !important;
    }
}

/* === МОДАЛЬНЫЕ ОКНА === */
@media (max-width: 768px) {
    .modal {
        width: calc(100vw - 2rem) !important;
        max-width: none !important;
        margin: 1rem !important;
        max-height: calc(100vh - 2rem) !important;
        overflow-y: auto !important;
    }

    .modal-content {
        padding: 1rem !important;
    }

    .modal-header {
        flex-direction: column !important;
        gap: 0.5rem !important;
        text-align: center !important;
    }

    .modal-footer {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .modal-footer button {
        width: 100% !important;
    }
}

/* === ФОРМЫ === */
@media (max-width: 768px) {
    .form-container {
        padding: 1rem !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    input, textarea, select {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 1rem !important;
    }

    .form-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .form-actions button {
        width: 100% !important;
    }
}

/* === УВЕДОМЛЕНИЯ === */
@media (max-width: 768px) {
    .notification-item {
        padding: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .notification-content {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .notification-actions {
        width: 100% !important;
        justify-content: space-between !important;
    }
}

/* === ПАГИНАЦИЯ === */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.25rem !important;
    }

    .pagination-item {
        min-width: 40px !important;
        height: 40px !important;
        font-size: 0.875rem !important;
    }

    .pagination-info {
        width: 100% !important;
        text-align: center !important;
        margin-top: 0.5rem !important;
    }
}

/* === СКРЫТИЕ ЭЛЕМЕНТОВ НА МОБИЛЬНЫХ === */
@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-hidden {
        display: none !important;
    }
}

/* === ПОКАЗ ЭЛЕМЕНТОВ ТОЛЬКО НА МОБИЛЬНЫХ === */
.mobile-only {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }

    .mobile-only.flex {
        display: flex !important;
    }

    .mobile-only.grid {
        display: grid !important;
    }
}

/* === МОБИЛЬНОЕ МЕНЮ === */
/* Скрываем мобильное меню на десктопе */
#mobile-menu-toggle {
    display: none;
}

@media (max-width: 768px) {
    #mobile-menu-toggle {
        display: flex !important;
    }

    .mobile-menu-toggle {
        display: block !important;
        background: none !important;
        border: none !important;
        color: white !important;
        font-size: 1.5rem !important;
        padding: 0.5rem !important;
        cursor: pointer !important;
    }

    .desktop-menu {
        display: none !important;
    }

    .mobile-menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: rgba(0, 0, 0, 0.8) !important;
        z-index: 9999 !important;
        display: none !important;
    }

    .mobile-menu.show {
        display: block !important;
    }

    .mobile-menu-content {
        background-color: #252525 !important;
        width: 280px !important;
        height: 100% !important;
        padding: 1rem !important;
        overflow-y: auto !important;
    }

    .mobile-menu-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 2rem !important;
        padding-bottom: 1rem !important;
        border-bottom: 1px solid #3a3a3a !important;
    }

    .mobile-menu-close {
        background: none !important;
        border: none !important;
        color: white !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
    }

    .mobile-menu-items a {
        display: block !important;
        padding: 1rem 0 !important;
        color: #e0e0e0 !important;
        text-decoration: none !important;
        border-bottom: 1px solid #3a3a3a !important;
        transition: color 0.2s ease !important;
    }

    .mobile-menu-items a:hover {
        color: white !important;
    }

    .mobile-menu-items i {
        margin-right: 0.75rem !important;
        width: 1.25rem !important;
        text-align: center !important;
    }
}

/* === СКРЫТИЕ МЕНЮ ОТ НЕАВТОРИЗОВАННЫХ === */
.user-menu-hidden {
    display: none !important;
}

/* === ФИКСЫ ДЛЯ СОВМЕСТИМОСТИ === */
@media (max-width: 768px) {
    /* Исправление переполнения */
    body {
        overflow-x: hidden !important;
    }

    /* Исправление скролла */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch !important;
    }

    /* Исправление z-index */
    .dropdown-menu,
    .user-menu,
    .notifications-popup {
        z-index: 10000 !important;
    }

    /* Исправление высоты экрана */
    .min-h-screen {
        min-height: 100vh !important;
        min-height: calc(var(--vh, 1vh) * 100) !important;
    }
}