/* =============================
   SIDEBAR
============================= */
#sidebar {
    position: fixed;
    top: 60px; /* Below the header */
    left: 0;
    width: 250px;
    height: calc(100vh - 60px); /* Full height minus header height */
    background-color: #1e1e2d; /* Dark background as defined in styles.css */
    color: #ffffff; /* White text for contrast */
    overflow-y: auto; /* Enable scrolling for long content */
    padding: 1rem 0; /* Vertical padding, no horizontal as links have padding */
    transition: transform 0.3s ease, left 0.3s ease; /* Smooth transition for responsiveness */
    z-index: 999; /* Below header, above main content */
    box-shadow: inset -3px 0 6px rgba(0, 0, 0, 0.2); /* Subtle inner shadow */
}

/* Remove default list styling for the main navigation */
#sidebar .sidebar-nav {
    list-style: none; /* Removes the dots */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

/* Base styles for sidebar links */
#sidebar .sidebar-link {
    display: flex; /* For icon and text alignment */
    align-items: center;
    padding: 0.75rem 1.5rem; /* Padding for links */
    color: #ffffff; /* White color for all links */
    border-left: 4px solid transparent; /* Left border for active/hover state */
    transition: background 0.3s ease, color 0.3s ease, border-left-color 0.3s ease;
    text-decoration: none; /* Remove underline */
}

#sidebar .sidebar-link:hover,
#sidebar .sidebar-link:focus {
    background-color: #1e90ff; /* Bright blue background on hover */
    color: #1e1e2d; /* Dark text on hover */
    border-left-color: #004080; /* Darker blue border on hover */
    text-decoration: none; /* Ensure no underline on hover/focus */
}

/* Active link styling */
#sidebar .sidebar-link.active {
    background-color: #004080; /* Primary blue for active link */
    color: #ffffff; /* White text for active link */
    border-left-color: #1e90ff; /* Bright blue active border */
}

/* Icon styling within sidebar links */
#sidebar .sidebar-link i {
    margin-right: 10px; /* Space between icon and text */
    width: 20px; /* Fixed width for icons to ensure alignment */
    text-align: center;
}

/* Sidebar section titles */
#sidebar .sidebar-section {
    color: rgba(255, 255, 255, 0.6); /* Lighter grey for section titles */
    text-transform: uppercase;
    padding: 1.25rem 1.5rem 0.5rem; /* More padding top/bottom */
    margin-top: 1rem; /* Space above each section */
    letter-spacing: 0.05em;
    font-size: 0.8rem;
}

#sidebar .sidebar-section:first-child {
    margin-top: 0; /* No top margin for the very first section */
}

/* Submenu container */
#sidebar .submenu {
    list-style: none; /* Removes the dots for submenus as well */
    padding: 0;
    margin: 0;
    overflow: hidden; /* Hide overflow during collapse/expand */
    max-height: 0; /* Collapsed state */
    transition: max-height 0.3s ease-out; /* Smooth collapse/expand */
}

#sidebar .has-submenu.open .submenu {
    max-height: 200px; /* Sufficient height to show all submenu items when open */
}

/* Submenu links */
#sidebar .submenu li a {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem 0.75rem 2.5rem; /* Indent submenu items */
    color: #ffffff;
    border-left: 4px solid transparent;
    transition: background 0.3s ease, color 0.3s ease, border-left-color 0.3s ease;
    text-decoration: none;
}

/* Add margin-right to icons within submenu links */
#sidebar .submenu li a i {
    margin-right: 10px; /* Added space for submenu icons */
    width: 20px; /* Ensure consistent icon width */
    text-align: center;
}

#sidebar .submenu li a:hover,
#sidebar .submenu li a:focus {
    background-color: #2a3a4a; /* Slightly lighter dark background on hover */
    color: #1e90ff; /* Bright blue text on hover */
    border-left-color: #004080;
}

#sidebar .submenu li a.active {
    background-color: #004080;
    color: #ffffff;
    border-left-color: #1e90ff;
}

/* Submenu toggle icon (chevron) */
.submenu-toggle-icon {
    margin-left: auto; /* Push chevron to the right */
    transition: transform 0.3s ease;
}

.has-submenu.open .submenu-toggle-icon {
    transform: rotate(180deg); /* Rotate chevron when submenu is open */
}

/* =============================
   RESPONSIVE SIDEBAR
============================= */
@media (max-width: 768px) {
    #sidebar {
        transform: translateX(-260px); /* Hide sidebar off-screen by default */
        left: 0; /* Ensure left is 0 for correct transform */
        box-shadow: 3px 0 6px rgba(0, 0, 0, 0.2); /* Shadow when it slides in */
    }

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

    /* Overlay when sidebar is open on mobile (optional, but good for UX) */
    .sidebar-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
        z-index: 998; /* Below sidebar, above main content */
        transition: opacity 0.3s ease;
    }
}