/* === Skeleton loading placeholders === */
.skeleton {
    display: inline-block;
    width: 100%;
    border-radius: 0.35rem;
    position: relative;
    overflow: hidden;
    background: var(--bs-secondary-bg, #343a40);
}

    .skeleton.skeleton-light {
        background: rgba(255, 255, 255, 0.08);
    }

    .skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.16), transparent );
        animation: skeleton-loading 1.4s ease-in-out infinite;
    }

@keyframes skeleton-loading {
    100% {
        transform: translateX(100%);
    }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.4rem;
}

.skeleton-text-lg {
    height: 1.7rem;
    margin-bottom: 0.6rem;
}

.skeleton-circle {
    border-radius: 50%;
}

.skeleton-pill {
    border-radius: 999px;
}

/* helpers for widths */
.skel-w-25 {
    width: 25%;
}

.skel-w-40 {
    width: 40%;
}

.skel-w-50 {
    width: 50%;
}

.skel-w-60 {
    width: 60%;
}

.skel-w-75 {
    width: 75%;
}

.skel-w-100 {
    width: 100%;
}