/* ===================================
   Modern Sidebar Menu Styles
   =================================== */

/* Active state left accent bar */
.sidebar-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-focus));
    border-radius: 0 4px 4px 0;
    box-shadow: 0 0 8px rgba(var(--color-primary-rgb), 0.4);
}

.dark .sidebar-active::before {
    background: linear-gradient(180deg, var(--color-accent), var(--color-accent-focus));
    box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.4);
}

/* Smooth entrance animation for sidebar */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.sidebar-panel .px-4 ul li {
    animation: slideInRight 0.3s ease-out both;
}

.sidebar-panel .px-4 ul li:nth-child(1) {
    animation-delay: 0.05s;
}

.sidebar-panel .px-4 ul li:nth-child(2) {
    animation-delay: 0.1s;
}

.sidebar-panel .px-4 ul li:nth-child(3) {
    animation-delay: 0.15s;
}

.sidebar-panel .px-4 ul li:nth-child(4) {
    animation-delay: 0.2s;
}

.sidebar-panel .px-4 ul li:nth-child(5) {
    animation-delay: 0.25s;
}

/* Glassmorphism effect on hover */
.sidebar-panel a:hover {
    backdrop-filter: blur(8px);
}

/* Enhanced shadow on active menu items */
.sidebar-active {
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1), 0 1px 3px -1px rgba(0, 0, 0, 0.06);
}

.dark .sidebar-active {
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.3), 0 1px 3px -1px rgba(0, 0, 0, 0.2);
}

/* Icon pulse animation on hover */
@keyframes iconPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

.sidebar-panel a:hover .flex.h-9 {
    animation: iconPulse 0.6s ease-in-out;
}

/* Section header fade-in */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sidebar-panel .flex.items-center.gap-2 {
    animation: fadeInDown 0.4s ease-out;
}

/* Smooth scrollbar for sidebar */
.sidebar-panel [x-init*="SimpleBar"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

.sidebar-panel [x-init*="SimpleBar"]::-webkit-scrollbar {
    width: 6px;
}

.sidebar-panel [x-init*="SimpleBar"]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-panel [x-init*="SimpleBar"]::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.3);
    border-radius: 10px;
}

.dark .sidebar-panel [x-init*="SimpleBar"]::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.2);
}