/**
 * Creator Community Newsfeed - Layout Fix
 * 
 * This CSS file fixes the layout issues for the Creator Community Newsfeed page
 * by ensuring the 3-column layout is properly applied using flexbox.
 */

/* Override BuddyBoss theme grid system for the creator community page */
body.creator-community-newsfeed #content,
body.creator-community-newsfeed .container,
body.creator-community-newsfeed .site-content-grid,
body.creator-community-newsfeed .bb-grid {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Main layout container using flexbox instead of grid */
.layout {
    display: flex !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Left sidebar styles */
.left-sidebar {
    width: 260px !important;
    min-width: 260px !important;
    background-color: white !important;
    padding: 20px !important;
    border-right: 1px solid #e5e7eb !important;
    height: 100% !important;
    overflow-y: auto !important;
    position: sticky !important;
    top: 0 !important;
}

/* Main content styles */
.main-content {
    flex: 1 !important;
    background-color: #f8fafc !important;
    padding: 20px 40px !important;
    height: 100% !important;
    overflow-y: auto !important;
    width: auto !important;
    min-width: 0 !important; /* Critical for flexbox child to prevent overflow */
}

/* Right sidebar styles - FIXED WIDTH TO MATCH LEFT SIDEBAR */
.right-sidebar {
    width: 260px !important; /* Changed from 280px to 260px to match left sidebar */
    min-width: 260px !important; /* Changed from 280px to 260px to match left sidebar */
    background-color: white !important;
    padding: 20px !important;
    border-left: 1px solid #e5e7eb !important;
    height: 100% !important;
    overflow-y: auto !important;
    position: sticky !important;
    top: 0 !important;
}

/* Right sidebar white background extension */
.right-sidebar::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    width: 100vw !important;
    height: 100% !important;
    background-color: white !important;
    z-index: -1 !important;
}

/* Ensure the container has no extra margins or padding */
body.creator-community-newsfeed #content > .container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Override any max-width constraints from the theme */
body.creator-community-newsfeed .site-content {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Fix post content widths to prevent overflow */
.newsfeed-post {
    width: 100% !important;
}

.post-content {
    min-width: 0 !important; /* Prevent flex item from overflowing */
    width: auto !important;
    flex: 1 !important;
}

/* Ensure post voting column has fixed width */
.post-voting {
    min-width: 70px !important;
    width: 70px !important;
}

/* Fix for proper content wrapping */
.post-title, .post-body {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Responsive layout for smaller screens */
@media (max-width: 1200px) {
    .layout {
        flex-direction: column !important;
        padding: 20px !important;
    }
    
    .left-sidebar, .right-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        position: static !important;
    }
    
    .left-sidebar {
        margin-bottom: 20px !important;
    }
    
    .right-sidebar {
        margin-top: 20px !important;
    }
    
    .right-sidebar::after {
        display: none !important;
    }
    
    .main-content {
        padding: 0 !important;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .layout {
        padding: 15px !important;
    }
    
    .newsfeed-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .post-voting {
        min-width: 60px !important;
        width: 60px !important;
    }
}

/* BuddyBoss container override */
body.creator-community-newsfeed #content .container {
    display: block !important;
}

/* Fix for BuddyBoss theme specific issues */
body.creator-community-newsfeed .site-content .content-area {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure the entire forum content is visible */
.bb-grid > #primary {
    width: 100% !important;
    max-width: 100% !important;
}