/* Skeleton / shimmer loading - dipakai lintas halaman selagi data diambil via AJAX */

@keyframes skeleton-shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.skeleton {
    display: block;
    background-color: #eceff5;
    background-image: linear-gradient(90deg, #eceff5 0px, #f6f7fb 40px, #eceff5 80px);
    background-size: 600px;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 0.4rem;
}

.skeleton-text {
    height: 0.85rem;
    margin-bottom: 0.5rem;
    width: 100%;
}

.skeleton-text:last-child {
    margin-bottom: 0;
}

.skeleton-title {
    height: 1.15rem;
    width: 60%;
    margin-bottom: 0.75rem;
}

.skeleton-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-badge {
    height: 1.35rem;
    width: 4.5rem;
    border-radius: 0.4rem;
}

.skeleton-card .skeleton-text {
    width: 90%;
}

.skeleton-card .skeleton-text.short {
    width: 50%;
}

/* Baris skeleton di dalam tbody, tampil sementara data-list.js masih fetch data */
tr.skeleton-row td {
    padding: 0.85rem 0.75rem;
}

tr.skeleton-row .skeleton {
    height: 0.9rem;
    width: 100%;
}

[data-skeleton-target].is-loaded > [data-skeleton] {
    display: none;
}

[data-skeleton-target]:not(.is-loaded) > [data-skeleton-content] {
    display: none;
}