/* ============================================================
   CHERI SMS - Skeleton Loading Animations
   Created: February 19, 2026
   Only loads when UI_DesignTheme = "modern"
   ============================================================ */

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

/* Base skeleton class */
.skeleton {
    background: linear-gradient(90deg,
        var(--border-color, #e2e8f0) 25%,
        var(--bg-card, #ffffff) 50%,
        var(--border-color, #e2e8f0) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm, 6px);
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

/* Skeleton variants */
.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 100%;
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-text.tiny { width: 40%; height: 12px; }

.skeleton-title {
    height: 24px;
    margin-bottom: 12px;
    width: 50%;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full, 9999px);
}

.skeleton-avatar.lg {
    width: 56px;
    height: 56px;
}

.skeleton-image {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-md, 10px);
}

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

.skeleton-badge {
    height: 22px;
    width: 60px;
    border-radius: var(--radius-full, 9999px);
}

/* Skeleton card layout */
.skeleton-card {
    padding: var(--space-5, 1.25rem);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-card, #ffffff);
}

.skeleton-card .skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* Skeleton table */
.skeleton-table {
    width: 100%;
}

.skeleton-table-row {
    display: flex;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.skeleton-table-cell {
    flex: 1;
    height: 14px;
}

.skeleton-table-cell:first-child { flex: 0.5; }
.skeleton-table-cell:last-child { flex: 0.7; }

/* Skeleton stat card */
.skeleton-stat {
    padding: var(--space-5, 1.25rem);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-card, #ffffff);
}

.skeleton-stat-number {
    height: 32px;
    width: 80px;
    margin-bottom: 8px;
}

.skeleton-stat-label {
    height: 12px;
    width: 120px;
}

/* Dark mode skeleton */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg,
        var(--border-color, #334155) 25%,
        var(--bg-hover, #475569) 50%,
        var(--border-color, #334155) 75%
    );
    background-size: 200% 100%;
}

/* Page content loading skeleton */
.page-skeleton {
    padding: 24px;
}

.page-skeleton .skeleton-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.page-skeleton .skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}