/* Skeleton Loading Components
   Lightweight shimmer placeholders for deferred content loading.
   Uses CSS custom properties for theme compatibility. */

:root {
    --skeleton-base: #ececec;
    --skeleton-shine: #f8f8f8;
    --skeleton-radius: 6px;
}

/* Base shimmer animation */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-shine) 50%,
        var(--skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--skeleton-radius);
}

/* Text line placeholder */
.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text:last-child {
    width: 60%;
}

/* Heading placeholder */
.skeleton-heading {
    height: 22px;
    width: 40%;
    margin-bottom: 12px;
    border-radius: 4px;
}

/* Card placeholder */
.skeleton-card {
    min-height: 120px;
    margin-bottom: 12px;
    border-radius: 10px;
    padding: 16px;
}

/* Table row placeholder */
.skeleton-row {
    height: 48px;
    margin-bottom: 8px;
    border-radius: var(--skeleton-radius);
}

/* Circular avatar placeholder */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Swimmer row skeleton (matches .swimmer-row layout) */
.skeleton-swimmer-row {
    display: flex;
    align-items: center;
    padding: 8px;
    margin-bottom: 8px;
    gap: 12px;
}

.skeleton-swimmer-row .skeleton-avatar {
    width: 36px;
    height: 36px;
}

.skeleton-swimmer-row .skeleton-text-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-swimmer-row .skeleton-text-group .skeleton-text {
    margin-bottom: 0;
}

.skeleton-swimmer-row .skeleton-text-group .skeleton-text:first-child {
    width: 55%;
    height: 14px;
}

.skeleton-swimmer-row .skeleton-text-group .skeleton-text:last-child {
    width: 30%;
    height: 11px;
}

/* Team row skeleton (matches .team-card-overview layout) */
.skeleton-team-row {
    display: flex;
    align-items: center;
    padding: 8px;
    margin-bottom: 8px;
    gap: 12px;
}

.skeleton-team-row .skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
}

.skeleton-team-row .skeleton-text-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-team-row .skeleton-text-group .skeleton-text:first-child {
    width: 50%;
    height: 14px;
}

.skeleton-team-row .skeleton-text-group .skeleton-text:last-child {
    width: 25%;
    height: 11px;
}

/* Meet card skeleton (matches .meet-card-unified layout) */
.skeleton-meet-card {
    min-height: 180px;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Fade-in for loaded content replacing skeletons */
.skeleton-loaded {
    animation: skeleton-fade-in 0.2s ease-out;
}

@keyframes skeleton-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Image skeleton loading — wrapper shows shimmer, img fades in on load.
   Applied by img-loading.js to .meet-card-thumb, .recent-avatar, and
   any img loaded from /Images/Display. */
.img-skeleton-wrap {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-shine) 50%,
        var(--skeleton-base) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--skeleton-radius);
}

.img-skeleton-wrap > img {
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.img-skeleton-wrap.img-loaded {
    animation: none;
    background: none;
}

.img-skeleton-wrap.img-loaded > img {
    opacity: 1;
}

/* Shimmer applied to an existing positioned container (no wrapper needed).
   Used for .meet-logo-slot, .event-image-slot where wrapping breaks layout. */
.img-shimmer-bg {
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 25%,
        var(--skeleton-shine) 50%,
        var(--skeleton-base) 75%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
}