/* === Skeleton Loading ===
 * Shimmer placeholders for async content.
 * Uses @keyframes shimmer from animations.css.
 * Version: 1.0.0
 */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-border) 0%,
        var(--color-bg-tertiary) 40%,
        var(--color-border) 80%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ── Variants ──────────────────────────────────── */
.skeleton--text {
    height: 1em;
    margin-bottom: 0.5em;
}
.skeleton--text:last-child {
    width: 70%;
}

.skeleton--title {
    height: 1.5em;
    width: 60%;
    margin-bottom: 1em;
}

.skeleton--avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton--card {
    height: 200px;
    border-radius: var(--radius-md);
}

.skeleton--button {
    height: 40px;
    width: 120px;
    border-radius: var(--radius-sm);
}

.skeleton--table-row {
    height: 48px;
    margin-bottom: 4px;
}

/* ── Skeleton card group ───────────────────────── */
.skeleton-card-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}
.skeleton-card-group .skeleton--card {
    height: 200px;
    margin-bottom: 0;
}

/* ── Skeleton table ────────────────────────────── */
.skeleton-table {
    width: 100%;
}
.skeleton-table .skeleton--table-row:nth-child(odd) {
    opacity: 0.7;
}

/* ── Loading container ─────────────────────────── */
.skeleton-container {
    position: relative;
}
.skeleton-container > .skeleton-fallback {
    display: block;
}
.skeleton-container > .skeleton-content {
    display: none;
}
.skeleton-container--loaded > .skeleton-fallback {
    display: none;
}
.skeleton-container--loaded > .skeleton-content {
    display: block;
}

/* Внутри grid/flex-контейнеров (card-grid) — не ломать раскладку */
.card-grid.skeleton-container--loaded > .skeleton-content {
    display: contents;
}