/* Skeleton Loading - Enterprise Shimmer Effect */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--card-border-color) 0%,
        rgba(255, 255, 255, 0.4) 50%,
        var(--card-border-color) 100%
    );
    background-size: 200% 100%;
    border-radius: 6px;
    animation: shimmer 1.5s infinite linear;
}

.skeleton-text { height: 0.875rem; }
.skeleton-title { height: 1.5rem; }
.skeleton-badge { height: 1.25rem; border-radius: 12px; }

/* Width utilities for skeletons */
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-75 { width: 75%; }

/* Filter dropdown skeleton */
.skeleton-select {
    height: 38px;
    border-radius: 6px;
    width: 100%;
}

.skeleton-pill {
    height: 28px;
    border-radius: 14px;
    display: inline-block;
}

.skeleton-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Hide skeleton when loaded */
.filter-skeleton {
    transition: opacity 0.2s ease;
}

.filter-skeleton.loaded {
    display: none;
}

/* Show actual filter when loaded */
.filter-actual {
    display: none;
}

.filter-actual.loaded {
    display: block;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}