/* Comprehensive Fix for Admin Panel Tab Scrolling Issues */
/* This fixes scrolling for ALL 11 instances across 4 templates */

/* Ensure the parent container structure has proper dimensions */
.admin-panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* Critical for flexbox overflow */
    height: calc(100vh - 140px); /* Account for header/navbar */
}

/* Tab content container - fixed height with relative positioning */
.admin-panel-tabs {
    flex: 1;
    position: relative !important;
    overflow: hidden !important;
    min-height: 0;
    height: 100%;
}

/* Individual tab panes - restore absolute positioning for proper scrolling */
.admin-panel-tab {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Preserve content layout from compact-alerts while fixing positioning */
    display: flex;
    flex-direction: column;
}

/* Ensure active tabs are visible */
.admin-panel-tab.active,
.admin-panel-tab.show {
    display: flex !important;
}

/* Hide inactive tabs properly */
.admin-panel-tab:not(.active):not(.show) {
    display: none !important;
}

/* Ensure content within tabs doesn't break scrolling */
.admin-panel-tab > .container,
.admin-panel-tab > .container-fluid,
.admin-panel-tab > div {
    flex-shrink: 0; /* Prevent content from shrinking */
}

/* Fix for nested multi-step content (specific to site_ui tab) */
#multi-step-content {
    min-height: auto;
    overflow: visible;
}

/* Site Customization Toggle CSS moved to:
   /static/css/components/_site-customization-toggle.css

   This file now contains only admin panel scrolling fixes */

/* Mobile responsive adjustments */
@media (max-width: 991.98px) {
    .admin-panel-content {
        height: calc(100vh - 120px); /* Slightly less offset for mobile */
    }

    .admin-panel-tab {
        /* On mobile, switch to normal flow */
        position: relative !important;
        height: auto !important;
        min-height: calc(100vh - 200px);
    }
}