/**
 * App Container CSS
 *
 * Project: Sharing Digital Kommunity (SDK)
 * Developer: KreativeStudio
 * 
 * This file contains styles for the app container layout, ensuring proper
 * sidebar and main content behavior.
 */

/* App container */
.app-container {
    display: flex;
    width: 100%;
    max-width: 100vw;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Ensure the body doesn't allow horizontal overflow */
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Main content styles */
.main-content {
    flex: 1;
    width: calc(100% - 280px - 40px);
    margin-left: calc(280px + 40px);
    transition: margin-left 0.3s ease, width 0.3s ease;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
}

/* When sidebar is collapsed */
.sidebar.collapsed + .main-content,
.main-content.main-content-expanded {
    margin-left: 120px;
    width: calc(100% - 120px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .main-content {
        width: 100%;
        margin-left: 0;
    }
    
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    }
}

/* Fix for content inside main-content */
.main-content > * {
    max-width: 100%;
}