/* ============================================================
   Skeleton Loading States
   Per design guidelines: pulsing --bg-subtle placeholders
   ============================================================ */
.skeleton {
    background: var(--bg-subtle);
    border-radius: var(--radius-sm);
    animation: skeletonPulse 1.4s ease-in-out infinite;
}

.skeleton-text {
    height: 14px;
    margin-bottom: var(--space-sm);
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 65%; }
.skeleton-text.long { width: 90%; }

.skeleton-table-row {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr 1fr;
    gap: var(--space-lg);
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-default);
}

.skeleton-table-row .skeleton {
    height: 16px;
}

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

@keyframes skeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}