/* ========================================
   Skeleton Loading
   ======================================== */

/* Skeleton base styles */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bs-secondary-bg) 25%,
        var(--bs-tertiary-bg, rgba(255,255,255,0.1)) 50%,
        var(--bs-secondary-bg) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--bs-border-radius-sm);
}

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

/* Skeleton element sizes */
.skeleton-image {
    width: 50px;
    height: 50px;
    border-radius: var(--bs-border-radius);
}

.skeleton-card-image {
    width: 100%;
    height: 180px;
}

.skeleton-text {
    height: 1em;
    margin: 0.25em 0;
}

.skeleton-tiny { width: 40px; }
.skeleton-short { width: 80px; }
.skeleton-medium { width: 150px; }
.skeleton-title { width: 85%; height: 1.2em; }
.skeleton-meta { width: 100px; }

.skeleton-badge {
    width: 60px;
    height: 1.5em;
    display: inline-block;
}

.skeleton-actions {
    width: 100px;
    height: 30px;
}

.skeleton-footer {
    width: 100%;
    height: 32px;
}

/* Hide skeleton by default, show content */
.sets-skeleton {
    display: none;
}

.sets-content {
    display: block;
}

/* When loading: show skeleton, hide content
   Triggers on:
   - Initial page load (.is-loading class)
   - Turbo frame navigation ([busy] attribute)
*/
turbo-frame#sets-list[busy] .sets-skeleton,
turbo-frame#sets-list.is-loading .sets-skeleton {
    display: block;
}

turbo-frame#sets-list[busy] .sets-content,
turbo-frame#sets-list.is-loading .sets-content {
    display: none;
}

/* Skeleton respects view mode */
turbo-frame#sets-list[busy] .skeleton-table,
turbo-frame#sets-list.is-loading .skeleton-table {
    display: block;
}

turbo-frame#sets-list[busy] .skeleton-cards,
turbo-frame#sets-list.is-loading .skeleton-cards {
    display: none;
}

[data-set-view="grid"] turbo-frame#sets-list[busy] .skeleton-table,
[data-set-view="grid"] turbo-frame#sets-list.is-loading .skeleton-table {
    display: none;
}

[data-set-view="grid"] turbo-frame#sets-list[busy] .skeleton-cards,
[data-set-view="grid"] turbo-frame#sets-list.is-loading .skeleton-cards {
    display: grid;
}

/* Skeleton cards grid layout */
.skeleton-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

/* Disable pointer events during loading */
turbo-frame#sets-list[busy],
turbo-frame#sets-list.is-loading {
    pointer-events: none;
}

/* Theme index skeleton loading */
.themes-skeleton {
    display: none;
}

.themes-content {
    display: block;
}

.is-loading .themes-skeleton {
    display: block;
}

.is-loading .themes-content {
    display: none;
}

.is-loading {
    pointer-events: none;
}