/* Custom Sidebar Hover Effects */
.pe-nav-link {
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
    margin: 2px 8px;
    padding: 12px 16px !important;
}

.pe-nav-link:hover {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    transform: translateX(8px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.pe-nav-link:hover .pe-nav-icon {
    color: white !important;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

.pe-nav-link:hover .pe-nav-content {
    color: white !important;
    font-weight: 600;
}

.pe-nav-link:hover .pe-nav-arrow {
    color: white !important;
    transform: rotate(180deg);
    transition: all 0.3s ease;
}

/* Active state */
.pe-nav-link.active {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pe-nav-link.active .pe-nav-icon,
.pe-nav-link.active .pe-nav-content {
    color: #000000 !important;
}

/* Menu title hover effect */
.pe-menu-title {
    transition: all 0.3s ease;
    padding: 8px 16px;
    border-radius: 6px;
    margin: 8px 8px 4px 8px;
}

.pe-menu-title:hover {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745 !important;
    font-weight: 600;
}

/* Submenu hover effects */
.pe-slide-menu .pe-nav-link {
    margin-left: 32px;
    font-size: 0.9rem;
}

.pe-slide-menu .pe-nav-link:hover {
    background: linear-gradient(135deg, #17a2b8 0%, #6610f2 100%) !important;
    transform: translateX(12px);
}

/* Icon animations */
.pe-nav-icon {
    transition: all 0.3s ease;
    margin-right: 12px;
    width: 20px;
    text-align: center;
}

/* Smooth collapse animations */
.pe-slide-menu {
    transition: all 0.4s ease;
}

.pe-slide-menu.collapsing {
    transition: height 0.4s ease;
}

/* Custom scrollbar for sidebar */
#sidebar-simplebar .simplebar-scrollbar::before {
    background: #28a745;
    opacity: 0.6;
}

#sidebar-simplebar .simplebar-scrollbar:hover::before {
    opacity: 1;
}

/* Logo hover effect */
.logo-main {
    transition: all 0.3s ease;
}

.logo-main:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}