/* ============================================
   LAYOUT: Grid — сайдбар + контент
   Единственный источник видимости для Отслеживание, Рабочая таблица, Входной контроль
   ============================================ */

/* Десктоп: сайдбар fixed, контент не перекрывается — отступ через padding контейнера и явный margin контента */
@media (min-width: 769px) {
    .app-layout {
        display: block !important;
        width: 100% !important;
        min-height: 100vh !important;
        padding-left: var(--sidebar-width, 300px) !important;
        box-sizing: border-box !important;
    }
    body.sidebar-collapsed .app-layout {
        padding-left: var(--sidebar-width, 80px) !important;
    }
    .app-layout > #mainContent,
    .app-layout > .main-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 0 !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 14px 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    /* Дублируем для всех страниц (Material Vision, Обеспечение линии, Планирование, Аналитика, Чат и т.д.) */
    #mainContent,
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Мобилка: без отступа, контент на всю ширину */
@media (max-width: 768px) {
    .app-layout {
        display: block !important;
        width: 100% !important;
        min-height: 100vh !important;
        padding-left: 0 !important;
    }
    #mainContent,
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* Базовые стили контента (общие). margin и width только в @media выше */
#mainContent,
.main-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 0 !important;
    margin-top: 0 !important;
    padding: 0 14px 20px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Все страницы по умолчанию скрыты, без лишнего отступа сверху */
#mainContent .page,
.main-content .page {
    display: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding-top: 0 !important;
}

/* Активная страница — видима (любая), контент с самого верха */
#mainContent .page.active,
.main-content .page.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 400px !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Три приложения: явно показываем при .active (перебивает любые другие стили) */
#mainContent #tracking-page.active,
#mainContent #packaging-page.active,
#mainContent #excel-worktable-page.active {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 400px !important;
    position: relative !important;
    width: 100% !important;
}

/* Контент внутри этих страниц не скрывать — блоки по умолчанию block/grid */
#mainContent #tracking-page.active .header,
#mainContent #tracking-page.active .stats-grid,
#mainContent #tracking-page.active .posts-container,
#mainContent #packaging-page.active .container,
#mainContent #excel-worktable-page.active .excel-worktable-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#mainContent #tracking-page.active .stats-grid {
    display: grid !important;
}
#mainContent #tracking-page.active .posts-container {
    display: grid !important;
}

/* Рабочая таблица: контейнер + активная вкладка и таблица видимы */
#mainContent #packaging-page.active .tab-content.active,
#mainContent #packaging-page.active .table-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Входной контроль: контейнер и блок таблицы видимы */
#mainContent #excel-worktable-page.active #dockStageTableContent {
    display: block !important;
    visibility: visible !important;
}

/* Мобильные */
@media (max-width: 768px) {
    .app-layout {
        grid-template-columns: 1fr !important;
    }
    #mainContent,
    .main-content {
        padding: 20px !important;
    }
}