/* ✅ Sidebar Styles */
.sidebar {
    position: fixed;
    left: -260px;
    /* Hide sidebar by default on all screens */
    top: 0;
    width: 260px;
    height: 100vh;
    /* Ensure sidebar reaches the full height of the screen */
    background: #1E1E1E;
    color: #E0E0E0;
    padding-top: 60px;
    /* Increased padding to move text lower */
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    max-height: calc(100vh - 40px);
    /* Extend scroll height slightly lower */
    scrollbar-width: none;
    /* Hide scrollbar for Firefox */
    -ms-overflow-style: none;
    /* Hide scrollbar for IE/Edge */
    transition: left 0.3s ease-in-out;
    z-index: 1000;
    /* Ensure sidebar is above content */
}

/* Scroll height can be adjusted here */

/* Hide scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar.open {
    left: 0 !important;
    /* Show sidebar when toggled */
}

.sidebar ul {
    list-style: none;
    padding: 20px;
    /* Added padding inside sidebar for better spacing */
}

.sidebar ul li {
    padding: 16px 25px;
    /* Increased padding for better spacing */
    display: flex;
    align-items: center;
    position: relative;
    list-style-type: none !important;
    /* Ensure no bullet points or extra markers */
    border: none !important;
    /* Remove unwanted borders */
    outline: none !important;
    /* Remove focus outlines */
    background: transparent !important;
    /* Ensure no weird background */
    flex-direction: column;
    /* Ensures submenu aligns correctly under parent */
}

.sidebar ul li::after {
    content: none !important;
    /* Hide any extra pseudo-elements */
    display: none !important;
}

.sidebar ul li a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    /* Ensure font size remains consistent */
    transition: background 0.3s ease;
    width: 100%;
}

.sidebar ul li a:hover {
    background: #38385a;
}

/* Ensure sidebar text remains readable */
.sidebar-item a .sidebar-label {
    font-size: 18px;
    font-weight: bold;
}

/* ✅ Hide Submenus by Default */
.submenu {
    display: none;
    list-style-type: none;
    padding-left: 15px;
    /* Indent submenu items properly */
    text-align: left;
    width: 100%;
}

/* ✅ Show submenu when parent is active */
.sidebar ul li.active .submenu {
    display: block;
    position: relative;
    width: 100%;
}

/* ✅ Adjust Hamburger Menu Button */
.menu-btn {
    position: fixed;
    top: 15px;
    left: 15px;
    background: #BB86FC !important;
    /* Ensure purple color applies */
    color: #FFFFFF !important;
    /* White three lines */
    border: none;
    padding: 4px 8px;
    /* Smaller size */
    font-size: 16px;
    /* Further reduced icon size */
    cursor: pointer;
    border-radius: 50px;
    transition: background 0.3s, box-shadow 0.3s;
    z-index: 1101;
    /* Ensure button is above sidebar */
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}

.menu-btn:hover {
    background: #8a5bc7 !important;
    /* Darker purple on hover */
}

/* ✅ Sidebar Layout & Responsive Adjustments */
.main-content {
    margin-left: 0;
    /* Ensure main content starts at full width */
    padding: 20px;
    transition: margin-left 0.3s ease-in-out;
}

@media (min-width: 769px) {
    .sidebar {
        left: -260px;
        /* Hide sidebar by default on large screens */
    }

    .sidebar.open {
        left: 0 !important;
    }

    .main-content {
        margin-left: 0 !important;
        /* Ensure content is correctly positioned */
    }

    .sidebar.open~.main-content {
        margin-left: 260px !important;
        /* Shift content when sidebar opens */
    }
}