/* ═══════════════════════════════════════════════════════════
   Sidebar Loading Skeleton Styles
   ═══════════════════════════════════════════════════════════ */

/* Skeleton Animation */
@keyframes skeleton-loading {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* Skeleton Base */
.skeleton-line,
.skeleton-icon,
.skeleton-text {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.1) 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Skeleton Item (Nav Item) */
.skeleton-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    margin-bottom: 4px;
    opacity: 0.6;
}

/* Skeleton Icon */
.skeleton-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Skeleton Text */
.skeleton-text {
    height: 14px;
    flex: 1;
    max-width: 150px;
}

/* Skeleton Line (Section Title) */
.skeleton-line {
    margin: 16px 20px 12px;
    opacity: 0.4;
}

/* Fade In Animation للقائمة بعد التحميل */
.nav-menu {
    animation: fadeIn 0.3s ease-in;
}

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

/* تحسين أداء الـ Skeleton */
.skeleton-item,
.skeleton-line,
.skeleton-icon,
.skeleton-text {
    will-change: background-position;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .skeleton-line,
    .skeleton-icon,
    .skeleton-text {
        background: linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.05) 100%
        );
    }
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .skeleton-item {
        padding: 10px 16px;
    }
    
    .skeleton-icon {
        width: 20px;
        height: 20px;
    }
    
    .skeleton-text {
        height: 12px;
        max-width: 120px;
    }
}