/* Unified Navigation System Styling - Override existing styles */

/* Main sidebar navigation - Higher specificity */
.aside-container .sidebar-nav,
.sidebar .sidebar-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Navigation items - Override existing styles */
.aside-container .sidebar-nav > li,
.sidebar .sidebar-nav > li {
    display: block !important;
}

.aside-container .sidebar-nav > li > a,
.aside-container .sidebar-nav > li > span,
.sidebar .sidebar-nav > li > a,
.sidebar .sidebar-nav > li > span {
    position: relative !important;
    display: block !important;
    padding: 1rem 1.875rem !important;
    color: #919293 !important; /* Light grey for unselected items */
    letter-spacing: 0.025em !important;
    font-weight: bold !important;
    cursor: pointer !important;
    text-shadow: 0 1px 3px #222 !important;
    text-decoration: none !important;
    transition: color 0.3s ease, background-color 0.3s ease !important;
    background-color: transparent !important;
}

/* Hover effects - Override existing styles */
.aside-container .sidebar-nav > li > a:hover,
.aside-container .sidebar-nav > li > a:focus,
.aside-container .sidebar-nav > li > span:hover,
.sidebar .sidebar-nav > li > a:hover,
.sidebar .sidebar-nav > li > a:focus,
.sidebar .sidebar-nav > li > span:hover {
    text-decoration: none !important;
    outline: none !important;
    color: #fff !important; /* White on hover */
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Active/selected items - Override existing styles */
.aside-container .sidebar-nav > li.active > a,
.aside-container .sidebar-nav > li.active > span,
.aside-container .sidebar-nav > li.open > a,
.aside-container .sidebar-nav > li.open > span,
.sidebar .sidebar-nav > li.active > a,
.sidebar .sidebar-nav > li.active > span,
.sidebar .sidebar-nav > li.open > a,
.sidebar .sidebar-nav > li.open > span {
    background-color: #434953 !important;
    color: #fff !important; /* White for selected items */
}

/* Icons in navigation - Override existing styles */
.aside-container .sidebar-nav > li > a > em,
.aside-container .sidebar-nav > li > span > em,
.sidebar .sidebar-nav > li > a > em,
.sidebar .sidebar-nav > li > span > em {
    width: 2rem !important;
    display: inline-block !important;
    font-style: normal !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    color: inherit !important;
    margin-right: 0.5rem !important;
}

.aside-container .sidebar-nav > li.active > a > em,
.aside-container .sidebar-nav > li.active > span > em,
.aside-container .sidebar-nav > li.open > a > em,
.aside-container .sidebar-nav > li.open > span > em,
.sidebar .sidebar-nav > li.active > a > em,
.sidebar .sidebar-nav > li.active > span > em,
.sidebar .sidebar-nav > li.open > a > em,
.sidebar .sidebar-nav > li.open > span > em {
    color: #fff !important;
}

/* Section headers (parent items with # URLs) */
.aside-container .sidebar-nav > li > span.nav-header,
.sidebar .sidebar-nav > li > span.nav-header {
    background-color: #2c3e50 !important;
    color: #ecf0f1 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    font-size: 0.875rem !important;
    letter-spacing: 0.1em !important;
    border-bottom: 1px solid #34495e !important;
}

.aside-container .sidebar-nav > li > span.nav-header:hover,
.sidebar .sidebar-nav > li > span.nav-header:hover {
    background-color: #34495e !important;
    color: #fff !important;
}

/* Submenu styling - Override existing styles */
.aside-container .sidebar-subnav,
.sidebar .sidebar-subnav {
    background-color: #212429 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border-left: 3px solid #434953 !important;
}

.aside-container .sidebar-subnav > li > a,
.sidebar .sidebar-subnav > li > a {
    display: block !important;
    position: relative !important;
    padding: 10px 30px 10px 50px !important; /* Extra left padding for indentation */
    font-weight: normal !important;
    background-color: transparent !important;
    color: #919293 !important; /* Light grey for unselected submenu items */
    font-size: 0.8125rem !important;
    text-decoration: none !important;
    transition: color 0.3s ease, background-color 0.3s ease !important;
}

.aside-container .sidebar-subnav > li > a:hover,
.aside-container .sidebar-subnav > li > a:focus,
.sidebar .sidebar-subnav > li > a:hover,
.sidebar .sidebar-subnav > li > a:focus {
    color: #fff !important; /* White on hover */
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.aside-container .sidebar-subnav > li.active > a,
.sidebar .sidebar-subnav > li.active > a {
    color: #fff !important; /* White for active submenu items */
    background-color: #434953 !important;
    border-left: 3px solid #3498db !important;
}

/* Submenu icons */
.aside-container .sidebar-subnav > li > a > em,
.sidebar .sidebar-subnav > li > a > em {
    display: inline-block !important;
    width: 1.8em !important;
    margin-right: 0.5rem !important;
    color: inherit !important;
}

/* Collapse/expand animations */
.aside-container .sidebar-subnav.collapse,
.sidebar .sidebar-subnav.collapse {
    display: none !important;
}

.aside-container .sidebar-subnav.collapse.show,
.sidebar .sidebar-subnav.collapse.show {
    display: block !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .aside-container .sidebar-nav > li > a,
    .aside-container .sidebar-nav > li > span,
    .sidebar .sidebar-nav > li > a,
    .sidebar .sidebar-nav > li > span {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    .aside-container .sidebar-subnav > li > a,
    .sidebar .sidebar-subnav > li > a {
        padding: 8px 20px 8px 35px !important;
        font-size: 0.75rem !important;
    }
}

/* Badge styling for menu items */
.aside-container .sidebar-nav .badge,
.sidebar .sidebar-nav .badge {
    display: inline-block !important;
    float: right !important;
    margin-top: 0.2rem !important;
}

/* Smooth transitions for all interactive elements */
.aside-container .sidebar-nav li,
.aside-container .sidebar-subnav li,
.sidebar .sidebar-nav li,
.sidebar .sidebar-subnav li {
    transition: all 0.3s ease !important;
}

/* Focus states for accessibility */
.aside-container .sidebar-nav > li > a:focus,
.aside-container .sidebar-subnav > li > a:focus,
.sidebar .sidebar-nav > li > a:focus,
.sidebar .sidebar-subnav > li > a:focus {
    outline: 2px solid #3498db !important;
    outline-offset: -2px !important;
}

/* Loading state */
.aside-container .sidebar-nav.loading,
.sidebar .sidebar-nav.loading {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* Error state */
.aside-container .sidebar-nav.error > li > a,
.aside-container .sidebar-nav.error > li > span,
.sidebar .sidebar-nav.error > li > a,
.sidebar .sidebar-nav.error > li > span {
    color: #e74c3c !important;
}

/* Success state for active sections */
.aside-container .sidebar-nav > li.open,
.sidebar .sidebar-nav > li.open {
    border-left: 3px solid #27ae60 !important;
}

/* Custom scrollbar for navigation */
.aside-container .sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    width: 6px !important;
}

.aside-container .sidebar::-webkit-scrollbar-track,
.sidebar::-webkit-scrollbar-track {
    background: #2c3e50 !important;
}

.aside-container .sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background: #34495e !important;
    border-radius: 3px !important;
}

.aside-container .sidebar::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover {
    background: #4a5f7a !important;
}