.page-layout {
    display: flex;
    min-height: 100vh;
    position: relative;
}

.main-content {
    margin-left: 240px;
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.2s ease;
    background-color: #282828;
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
        padding-top: 60px;
    }
    
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.2s ease;
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
}

.header-sidebar.sidebar-collapsed + .header-sidebar__toggle + .main-content {
    margin-left: 50px;
}