/*
 * Tasks Page Layout Fixes
 * Исправления для правильного отображения контента страницы заданий
 */

/* === Основной контейнер страницы === */
.tasks-page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    box-sizing: border-box;
    overflow: hidden;
}

/* === Контейнер контента === */
.tasks-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* === Основной контейнер заданий === */
.tasks-main-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* === Обеспечиваем правильную ширину для всех дочерних элементов === */
.tasks-main-container > * {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* === Контейнер списка заданий === */
#tasks-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* === Карточки заданий === */
.task-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* === Боковая панель === */
.tasks-sidebar {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* === Респонсивная сетка для десктопа === */
@media (min-width: 1024px) {
    .tasks-content {
        grid-template-columns: 1fr 380px;
        gap: 2rem;
    }
    
    .tasks-page-container {
        padding: 0 2rem;
    }
}

@media (min-width: 1200px) {
    .tasks-content {
        grid-template-columns: 1fr 400px;
        gap: 2.5rem;
    }
}

/* === Исправления для элементов, которые могут выходить за границы === */
.relative {
    overflow: hidden;
}

.bg-gradient-to-br,
.bg-gradient-to-r {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* === Фиксированная ширина для контейнеров с градиентами === */
.relative .absolute {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* === Обеспечиваем правильное поведение flex элементов === */
.flex,
.flex-col,
.flex-row {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.flex > * {
    flex-shrink: 1;
    min-width: 0;
}

/* === Статистические блоки === */
.flex.gap-3 {
    flex-wrap: wrap;
}

.flex.gap-3 > * {
    flex-shrink: 0;
    min-width: 120px;
}

/* === Мобильная адаптация === */
@media (max-width: 768px) {
    .tasks-page-container {
        padding: 0 0.75rem;
    }
    
    .tasks-content {
        gap: 1rem;
    }
    
    .tasks-main-container {
        padding: 1rem;
    }
    
    /* Убираем горизонтальные отступы у карточек на мобильных */
    .task-card {
        margin-left: 0;
        margin-right: 0;
    }
}

/* === Дополнительные исправления для предотвращения переполнения === */
.overflow-x-auto {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* === Специальные исправления для проблемных элементов === */
.backdrop-blur-sm {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.border {
    box-sizing: border-box;
}

.p-6,
.px-6,
.py-6 {
    box-sizing: border-box;
}

/* === Убедимся, что элементы не выходят за пределы родителя === */
* {
    max-width: 100%;
    box-sizing: border-box;
}

/* === Исправления для элементов, которые могут создавать горизонтальную прокрутку === */
.min-w-\[120px\] {
    min-width: 120px;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .min-w-\[120px\] {
        min-width: 100px;
    }
}