/* base.css */

/* Main Wrapper */
#wrapper {
    display: flex; /* Enable flexbox */
    align-items: stretch; /* Stretch children to the full height */
    height: 100vh; /* Full viewport height */
}

/* Sidebar styles */
#sidebar-wrapper {
    width: 250px; /* Set fixed width */
    background: #f8f9fa; /* Background color */
    flex-shrink: 0; /* Prevent shrinking */
    height: 100vh; /* Full height */
    transition: margin 0.25s ease-out;
}

/* Page content styles */
#page-content-wrapper {
    padding: 20px;
    overflow-y: auto; /* Enable vertical scrolling if necessary */
    transition: margin 0.25s ease-out;
}

/* When sidebar is collapsed */
#wrapper.toggled #sidebar-wrapper {
    margin-left: -250px; /* Slide sidebar to the left */
}

#wrapper.toggled #page-content-wrapper {
    margin-left: 0; /* Expand content area to full width */
}