/* static/css/sidebar_layout.css */

#sidebar {
    position: fixed; /* Fixed position relative to the viewport */
    left: 0;
    top: 0;
    height: 100vh; /* Full viewport height */
    width: 280px; /* Adjust width as needed */
    background-color: #ffffff; /* Sidebar background */
    z-index: 1000; /* Ensure sidebar is above content */
    transform: translateX(-100%); /* Hide sidebar off-screen to the left */
    transition: transform 0.3s ease-in-out; /* Smooth slide animation */
    overflow-y: auto; /* Allow scrolling within the sidebar if content overflows */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Optional shadow */
    padding-top: 4rem; /* Add padding matching nav height if needed */
    box-sizing: border-box;
}

#sidebar.active {
    transform: translateX(0); /* Slide sidebar into view */
}

#sidebar-overlay {
    position: fixed; /* Cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    z-index: 999; /* Below sidebar but above content */
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Hidden by default */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Fade animation */
}

#sidebar-overlay.active {
    opacity: 1; /* Make overlay visible */
    visibility: visible; /* Make overlay visible */
    transition-delay: 0s; /* Ensure visibility transition is immediate when becoming active */
}

/* Style for the close button inside the sidebar */
.sidebar-close-btn {
    position: absolute;
    top: 0.75rem; /* Adjust position as needed */
    right: 1rem; /* Adjust position as needed */
    background: none;
    border: none;
    font-size: 2rem; /* Make '×' larger */
    line-height: 1;
    color: #6b7280; /* Button color */
    cursor: pointer;
    padding: 0.25rem;
}

.sidebar-close-btn:hover {
    color: #1f2937; /* Darker color on hover */
}

/* Optional: Push content when sidebar is open (alternative to overlay blocking clicks) */
/*
body.sidebar-active .content-area {
    margin-left: 280px; // Match sidebar width
}
*/

/* Adjust content area padding to account for fixed nav bar height */
.content-area {
    padding-top: calc(4rem + 1.5rem); /* Assuming 4rem nav height + 1.5rem desired top padding */
    /* transition: margin-left 0.3s ease-in-out; /* Add if using margin-left push */
}