/* assets/styles/sidebar.css */
/* Sidebar styles for the redesigned navigation */

/* ============================================
   Sidebar Base
   ============================================ */
.sidebar-new {
    width: 256px;
}

/* ============================================
   Active Indicator Bar (::before pseudo-element)
   ============================================ */
.nav-link {
    position: relative;
}

/* Active indicator using ::before */
.nav-item .nav-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #8B5CF6 0%, #7C3AED 100%);
    border-radius: 0 2px 2px 0;
    transition: height 0.2s ease-out;
}

/* Active state */
.nav-item.active > .nav-link::before,
.nav-link[aria-current="page"]::before {
    height: 60%;
}

/* ============================================
   Section-specific Accent Colors
   ============================================ */
/* Gestion Section - Violet accent */
.nav-section-gestion .nav-item.active > .nav-link {
    background: rgba(139, 92, 246, 0.15);
}

.nav-section-gestion .nav-item.active > .nav-link::before {
    background: linear-gradient(180deg, #8B5CF6 0%, #7C3AED 100%);
}

.nav-section-gestion .section-title {
    color: #c084fc;
}

/* Comptabilite Section - Cyan accent */
.nav-section-comptabilite .nav-item.active > .nav-link {
    background: rgba(6, 182, 212, 0.15);
}

.nav-section-comptabilite .nav-item.active > .nav-link::before {
    background: linear-gradient(180deg, #06B6D4 0%, #0891B2 100%);
}

.nav-section-comptabilite .section-title {
    color: #22d3ee;
}

/* Footer links - Purple accent */
.sidebar-new > footer .nav-link.active::before,
.sidebar-new > footer .nav-link[aria-current="page"]::before {
    height: 60%;
    background: linear-gradient(180deg, #A855F7 0%, #9333EA 100%);
}

/* ============================================
   Nav Badge Pulse Animation
   ============================================ */
.nav-badge-danger {
    animation: pulse-danger 2s infinite;
}

@keyframes pulse-danger {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0);
    }
}

/* ============================================
   Submenu Animation
   ============================================ */
.nav-submenu {
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out, padding 0.3s ease-out;
}

.nav-item .nav-chevron {
    transition: transform 0.2s ease;
}

/* ============================================
   Section Separator
   ============================================ */
.nav-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    margin: 16px 12px;
}

/* ============================================
   Custom Scrollbar
   ============================================ */
.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   Nav Item Animation on Load
   ============================================ */
.nav-item {
    animation: navSlideIn 0.3s ease forwards;
    animation-delay: calc(var(--nav-index, 0) * 0.03s);
}

@keyframes navSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   Main Content Adjustment
   ============================================ */
.main-content,
main {
    margin-left: 256px;
}

/* ============================================
   Hover Effects
   ============================================ */
.nav-link {
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* ============================================
   Mobile Responsive
   ============================================ */
@media (max-width: 768px) {
    .sidebar-new {
        transform: translateX(-100%);
    }

    .sidebar-new.sidebar-mobile-open {
        transform: translateX(0);
    }

    .main-content,
    main {
        margin-left: 0 !important;
    }
}