/* RixDesk Next Custom Styles */

/* 1. AI Shimmer Effect */
@keyframes shimmer {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

.ai-shimmer {
    background: linear-gradient(to right,
            #1F2937 40%,
            #0052CC 50%,
            #1F2937 60%);
    background-size: 200% auto;
    color: transparent;
    /* Fallback */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

/* 2. Custom Scrollbar for Sidebar and Main Content */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.3);
    /* gray-400 with opacity */
    border-radius: 20px;
    border: 3px solid transparent;
}

.custom-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.6);
}

/* 3. Navigation Item Styles */
.nav-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 8px;
    color: #4B5563;
    /* gray-600 */
    font-size: 0.875rem;
    /* text-sm */
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
    cursor: pointer;
}

.nav-item:hover {
    background-color: #EFF6FF;
    /* blue-50 */
    color: #0052CC;
    /* rix-blue */
}

/* Active State */
.nav-item.active {
    background-color: #EFF6FF;
    /* blue-50 */
    color: #0052CC;
    /* rix-blue */
}

.nav-item.active:hover {
    background-color: #E0E7FF;
    /* Slightly darker hover for active */
}

/* Left Indicator Stripe for Active State */
.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 20px;
    width: 4px;
    background-color: #0052CC;
    border-radius: 0 4px 4px 0;
}

/* Icon Container Alignment */
.nav-icon {
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
    /* Fixed gap */
}