/* Layout Container Overrides - Full Width Layout Support */

#layout-container {
    /* Remove Bootstrap's default container-fluid padding */
    padding-left: 0 !important;
    padding-right: 0 !important;
    
    /* Ensure full width */
    max-width: 100% !important;
    width: 100% !important;
    
    /* Remove any margins */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Responsive handling for sidebar - adjust padding when sidebar is visible */
@media (min-width: 1200px) {
    #layout-container {
        /* Account for 280px sidebar width at desktop sizes */
        padding-left: 280px !important;
        padding-right: 0 !important;
    }
    
    /* Override the main padding since we're handling it in layout-container */
    .main {
        padding-left: 0 !important;
    }
}

/* For profile layouts that want true full-width (edge-to-edge) */
.profile-full-width #layout-container {
    padding-left: 0 !important;
}

@media (min-width: 1200px) {
    .profile-full-width #layout-container {
        padding-left: 0 !important;
        margin-left: -280px !important;
        width: calc(100% + 280px) !important;
    }
}

/* Profile layout sections - ensure they can use full width */
#layout-container .profile-section-1,
#layout-container .profile-section-2,
#layout-container .profile-section-3,
#layout-container .profile-section-4,
#layout-container .profile-section-5 {
    /* Allow sections to extend to full available width */
    width: 100%;
}

/* Override any Bootstrap container-fluid defaults within layout-container */
#layout-container .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 1199px) {
    #layout-container {
        padding: 0 !important;
    }
}

/* Theme-specific overrides for full-width layouts */
.theme-dark #layout-container {
    background: #1a1a1a;
}

.theme-light #layout-container {
    background: #ffffff;
}

.theme-colorful #layout-container {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Ensure header and footer don't interfere with full-width content */
.main {
    /* Remove any default padding that might constrain the layout-container */
    padding: 0;
}

/* Optional: Add some utility classes for sections that want some padding */
.section-padded {
    padding-left: 15px;
    padding-right: 15px;
}

.section-narrow {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.section-wide {
    max-width: 1400px;
    margin: 0 auto;
}