/* Professional Sidebar Navigation Enhancements */

/* Smooth animations for all navigation items */
.fi-sidebar-item-button,
.fi-sidebar-group-button,
.fi-sidebar-nav-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

/* Hover effect - subtle scale and glow */
.fi-sidebar-item-button:hover,
.fi-sidebar-nav-item:hover {
    transform: translateX(-4px);
    background: rgba(var(--primary-500), 0.08) !important;
}

/* Active state with smooth color transition */
.fi-sidebar-item-button[aria-current="page"],
.fi-sidebar-nav-item[aria-current="page"] {
    background: linear-gradient(90deg, rgba(var(--primary-500), 0.12), rgba(var(--primary-500), 0.06)) !important;
    border-right: 3px solid rgb(var(--primary-500));
}

/* Group buttons with colored borders */
.fi-sidebar-group {
    position: relative;
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

/* Colored borders for different groups */
.fi-sidebar-group:nth-child(1) {
    /* الاتصالات - Communication */
    border: 2px solid rgba(67, 192, 146, 0.3);
    /* Blue */
    background: linear-gradient(135deg, rgba(62, 116, 201, 0.03), transparent);
}

.fi-sidebar-group:nth-child(1):hover {
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.fi-sidebar-group:nth-child(2) {
    /* الأتمتة - Automation */
    border: 2px solid rgba(168, 85, 247, 0.3);
    /* Purple */
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.03), transparent);
}

.fi-sidebar-group:nth-child(2):hover {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15);
}

.fi-sidebar-group:nth-child(3) {
    /* الإدارة - Management */
    border: 2px solid rgba(16, 185, 129, 0.3);
    /* Green */
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.03), transparent);
}

.fi-sidebar-group:nth-child(3):hover {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

.fi-sidebar-group:nth-child(4) {
    /* الدعم - Support */
    border: 2px solid rgba(245, 158, 11, 0.3);
    /* Amber */
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.03), transparent);
}

.fi-sidebar-group:nth-child(4):hover {
    border-color: rgba(245, 158, 11, 0.5);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.fi-sidebar-group:nth-child(5),
.fi-sidebar-group:nth-child(6) {
    /* البريد - Email */
    border: 2px solid rgba(236, 72, 153, 0.3);
    /* Pink */
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.03), transparent);
}

.fi-sidebar-group:nth-child(5):hover,
.fi-sidebar-group:nth-child(6):hover {
    border-color: rgba(236, 72, 153, 0.5);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.15);
}

/* Last group - Settings */
.fi-sidebar-group:last-child {
    /* الإعدادات - Settings */
    border: 2px solid rgba(107, 114, 128, 0.3);
    /* Gray */
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.03), transparent);
}

.fi-sidebar-group:last-child:hover {
    border-color: rgba(107, 114, 128, 0.5);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.15);
}

/* Group label with subtle animation */
.fi-sidebar-group-label {
    font-weight: 600;
    letter-spacing: 0.025em;
    transition: all 0.2s ease;
}

.fi-sidebar-group:hover .fi-sidebar-group-label {
    transform: translateX(-2px);
}

/* Collapse/expand animation */
.fi-sidebar-group-items {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon animations */
.fi-sidebar-item-icon,
.fi-sidebar-nav-icon {
    transition: transform 0.2s ease;
}

.fi-sidebar-item-button:hover .fi-sidebar-item-icon,
.fi-sidebar-nav-item:hover .fi-sidebar-nav-icon {
    transform: scale(1.1) rotate(2deg);
}

/* Badge animations */
.fi-sidebar-item-badge,
.fi-sidebar-nav-badge {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* Dark mode adjustments with Universe Theme */
.dark .fi-sidebar-group {
    border-color: rgba(0, 229, 255, 0.15);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.02), transparent);
}

.dark .fi-sidebar-group:hover {
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 229, 255, 0.2);
}

.dark .fi-sidebar-item-button:hover,
.dark .fi-sidebar-nav-item:hover {
    background: rgba(0, 229, 255, 0.08) !important;
    box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.1);
}

/* Active state with cyan glow */
.dark .fi-sidebar-item-button[aria-current="page"],
.dark .fi-sidebar-nav-item[aria-current="page"] {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.15), rgba(0, 229, 255, 0.05)) !important;
    border-right: 3px solid #00E5FF;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
}

/* Icon glow on active */
.dark .fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon,
.dark .fi-sidebar-nav-item[aria-current="page"] .fi-sidebar-nav-icon {
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.8));
}

/* ====================================
   ☀️ LIGHT MODE SIDEBAR
   ==================================== */

html:not(.dark) .fi-sidebar-group {
    border-color: rgba(0, 184, 212, 0.2);
    background: linear-gradient(135deg, rgba(0, 184, 212, 0.03), transparent);
}

html:not(.dark) .fi-sidebar-group:hover {
    border-color: rgba(0, 184, 212, 0.4);
    box-shadow: 0 4px 12px rgba(0, 184, 212, 0.15);
}

html:not(.dark) .fi-sidebar-item-button:hover,
html:not(.dark) .fi-sidebar-nav-item:hover {
    background: rgba(0, 184, 212, 0.1) !important;
    box-shadow: inset 0 0 8px rgba(0, 184, 212, 0.1);
}

/* Active state with cyan */
html:not(.dark) .fi-sidebar-item-button[aria-current="page"],
html:not(.dark) .fi-sidebar-nav-item[aria-current="page"] {
    background: linear-gradient(90deg, rgba(0, 184, 212, 0.15), rgba(0, 184, 212, 0.05)) !important;
    border-right: 3px solid #00B8D4;
    box-shadow: 0 4px 12px rgba(0, 184, 212, 0.2);
}

/* Icon emphasis on active */
html:not(.dark) .fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon,
html:not(.dark) .fi-sidebar-nav-item[aria-current="page"] .fi-sidebar-nav-icon {
    color: #00B8D4;
    transform: scale(1.1);
}