/* Исправления для мобильного заголовка */
/* Решает проблемы с отступами аватарки и выравниванием иконок */

@media (max-width: 768px) {
    /* Обеспечиваем симметричные отступы для левой и правой части заголовка */
    .new-header-left {
        margin-left: 16px;
        padding-left: 0;
    }

    .new-header-right {
        margin-right: 16px;
        padding-right: 0;
    }

    /* Принудительно одинаковые отступы для гамбургера и аватарки */
    .new-hamburger,
    .hamburger-menu,
    .menu-toggle,
    button[onclick*="toggleMobileMenu"] {
        margin-left: 20px !important;
        margin-right: 0 !important;
    }

    /* Правая часть хедера - аватарка с одинаковым отступом */
    header #header-avatar,
    .new-avatar-button,
    .header-avatar,
    .user-avatar-container {
        margin-right: 20px !important;
        margin-left: 0 !important;
    }

    /* Принудительно обеспечиваем одинаковые отступы для контейнеров шапки */
    header .flex.items-center.justify-between,
    header .flex.md\\:hidden.justify-between {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Дополнительные исправления для правого отступа */
    .new-header-right {
        margin-right: 16px !important;
        padding-right: 0 !important;
    }

    /* Убираем лишние отступы у дочерних элементов */
    header .flex.items-center.justify-between > *,
    header .flex.md\\:hidden.justify-between > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Исправления для аватарки в обычной шапке - делаем точно такой же как гамбургер */
    header button#mobile-user-menu-toggle {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    header button#mobile-user-menu-toggle img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
        flex-shrink: 0 !important;
    }

    /* Исправления для контейнера аватарки в десктопной версии в шапке */
    header #header-avatar {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    header #header-avatar img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
        flex-shrink: 0 !important;
    }

    /* Обеспечиваем одинаковые отступы и размеры для всех элементов шапки */
    .new-hamburger,
    .hamburger-menu,
    .menu-toggle,
    header button#mobile-user-menu-toggle,
    header #header-avatar,
    .new-avatar-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        max-width: 40px !important;
        max-height: 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: transparent !important;
        border: none !important;
        flex-shrink: 0 !important;
    }

    /* Обеспечиваем отступ справа для аватарки в хедере */
    header #header-avatar,
    .new-avatar-button,
    .header-avatar {
        margin-right: 16px !important;
    }

    /* Исправления для кнопок с иконками - горизонтальное расположение */
    .task-card button,
    .order-card button,
    button[onclick*="subscribeToChannel"],
    button[onclick*="verifyTask"],
    button[onclick*="createOrder"],
    .bg-blue-600,
    .bg-green-600,
    .bg-gray-600 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        text-align: center !important;
    }

    .task-card button i,
    .order-card button i,
    button[onclick*="subscribeToChannel"] i,
    button[onclick*="verifyTask"] i,
    button[onclick*="createOrder"] i,
    .bg-blue-600 i,
    .bg-green-600 i,
    .bg-gray-600 i {
        margin: 0 !important;
        line-height: 1 !important;
        flex-shrink: 0 !important;
    }

    /* Исправления для заголовков блоков с иконками */
    .info-block h3,
    .stats-block h3,
    .feature-block h3 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .info-block h3 i,
    .stats-block h3 i,
    .feature-block h3 i {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        border-radius: 50% !important;
        background: rgba(74, 144, 226, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
        margin: 0 8px 0 0 !important;
        flex-shrink: 0 !important;
    }

    /* Исправления для иконок в блоках на мобильных */
    .page-title i,
    .section-title i,
    .card-header h3 i,
    .info-block h4 i,
    .stat-item i,
    .feature-item i {
        margin: 0 !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
        width: auto !important;
        height: auto !important;
        max-width: 24px !important;
        max-height: 24px !important;
    }

    /* Исправления для всех иконок в блоках - предотвращаем растягивание */
    .info-card i,
    .stat-card i,
    .task-card i,
    .channel-card i,
    .order-card i,
    .profile-block i,
    .balance-block i,
    .stats-block i,
    .tasks-block i {
        flex-shrink: 0 !important;
        width: auto !important;
        height: auto !important;
        max-width: 32px !important;
        max-height: 32px !important;
        min-width: 16px !important;
        min-height: 16px !important;
    }

    /* Общие исправления для всех иконок Remix */
    [class*="ri-"] {
        flex-shrink: 0 !important;
        width: auto !important;
        height: auto !important;
        display: inline-block !important;
        line-height: 1 !important;
    }

    /* Одинаковые отступы контента на всех страницах */
    .container,
    .page-container,
    .main-content,
    .content-wrapper,
    .task-container,
    .profile-container,
    .orders-container,
    .channels-container,
    .notifications-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Обеспечиваем одинаковую ширину всех блоков на мобильных */
    .grid,
    .flex,
    .block,
    .card,
    .info-card,
    .stat-card,
    .task-card,
    .channel-card,
    .order-card,
    .profile-block,
    .balance-block,
    .stats-block,
    .tasks-block,
    .available-tasks-block {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Убеждаемся, что элементы правильно выровнены по центру */
    .new-header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
    }

    /* Исправления для баланса и аватарки */
    .new-balance {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .new-avatar-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
    }

    .new-avatar-button img {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* Исправления для выравнивания иконок с текстом на всех страницах */
@media (max-width: 768px) {
    /* Заголовки с иконками */
    .page-title,
    .section-title,
    .card-header h3,
    .info-block h4 {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        line-height: 1.2 !important;
    }

    .page-title i,
    .section-title i,
    .card-header h3 i,
    .info-block h4 i {
        margin: 0 !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
    }

    /* Элементы с иконками в карточках */
    .info-card .flex,
    .stat-item .flex,
    .feature-item .flex {
        align-items: center !important;
        gap: 0.75rem !important;
    }

    .info-card .flex i,
    .stat-item .flex i,
    .feature-item .flex i {
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
}

/* Исправление аватарки в шапке */
.new-header-right .user-avatar-container {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.new-header-right .user-avatar-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

/* Дополнительные исправления для десктопа */
@media (min-width: 768px) {
    .new-header-right .user-avatar-container {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    /* Убираем сжатие аватарки на десктопе */
    .new-header-right {
        flex-shrink: 0 !important;
    }
}