/**
 * jo-skeleton.css — Skeleton screens untuk halaman yang load data heavy.
 *
 * Pakai dengan markup:
 *   <div class="jo-skeleton-row"></div>
 *   <div class="jo-skeleton-card"></div>
 *   <div class="jo-skeleton-text"></div>
 *
 * Shimmer effect: gradient gerak kanan-kiri untuk feel "loading". Tidak
 * butuh JS — pure CSS animation.
 */

.jo-skel-base,
.jo-skeleton-row,
.jo-skeleton-card,
.jo-skeleton-text,
.jo-skeleton-circle,
.jo-skeleton-table-cell {
    background: linear-gradient(90deg, #E2E8F0 0%, #F1F5F9 50%, #E2E8F0 100%);
    background-size: 200% 100%;
    animation: joSkeletonShimmer 1.5s linear infinite;
    border-radius: 6px;
    display: block;
}

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

.jo-skeleton-row {
    height: 56px;
    margin-bottom: 8px;
    border-radius: 8px;
}

.jo-skeleton-card {
    height: 140px;
    margin-bottom: 12px;
    border-radius: 12px;
}

.jo-skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 100%;
}
.jo-skeleton-text.short { width: 60%; }
.jo-skeleton-text.medium { width: 80%; }

.jo-skeleton-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.jo-skeleton-table-cell {
    height: 18px;
    margin: 6px 0;
}

/* Composite: skeleton list (untuk halaman index/list view) */
.jo-skeleton-list {
    padding: 12px;
}
.jo-skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 12px;
    margin-bottom: 8px;
    background: white;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
}
.jo-skeleton-list-item .jo-skeleton-circle {
    flex-shrink: 0;
}
.jo-skeleton-list-item .jo-skel-content {
    flex: 1;
}