/* 
 * SIDEBAR WIDTH FIX - ENSURE MAIN CONTENT RESPONDS TO SIDEBAR WIDTH CHANGES
 * This ensures that the main content area properly adjusts when sidebar width changes
 */

/* Enhanced Layout Grid with CSS Variable Support */
.main-content {
    display: grid;
    grid-template-columns: var(--sidebar-width, 300px) 1fr var(--sidebar-width, 300px);
    gap: 2rem;
    margin: 2rem auto;
    max-width: var(--container-width, 1200px);
    transition: grid-template-columns 0.3s ease;
}

/* Responsive adjustments for sidebar width */
@media (max-width: 1024px) {
    .main-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .sidebar-left,
    .sidebar-right {
        order: 2;
        margin-top: 1rem;
    }
    
    .content-area {
        order: 1;
    }
}

/* Dynamic sidebar width adjustments */
:root {
    --sidebar-min-width: 200px;
    --sidebar-max-width: 400px;
}

/* Ensure sidebar width is within reasonable bounds */
.sidebar-left,
.sidebar-right {
    min-width: var(--sidebar-min-width);
    max-width: var(--sidebar-max-width);
    width: var(--sidebar-width, 300px);
}

/* Content area should flex properly */
.content-area {
    min-width: 0; /* Prevents grid items from overflowing */
    flex: 1;
}

/* Fix for specific sidebar positions */
body.sidebar-none .main-content {
    grid-template-columns: 1fr;
}

body.sidebar-left .main-content {
    grid-template-columns: var(--sidebar-width, 300px) 1fr;
}

body.sidebar-right .main-content {
    grid-template-columns: 1fr var(--sidebar-width, 300px);
}

body.sidebar-both .main-content {
    grid-template-columns: var(--sidebar-width, 300px) 1fr var(--sidebar-width, 300px);
}

/* Backup JavaScript fix for browsers that don't support CSS variables properly */