/*
 * Skeleton loading placeholders — single source of truth.
 *
 * Reusable across AJAX modals and lazy panels. There is no Metronic equivalent,
 * so this file owns the look. Base tint is Metronic gray-200 (#EBEDF3) and the
 * animation is a white shimmer sweep.
 *
 * Usage: give an element `.skeleton` plus a shape helper and an inline width.
 *   <span class="skeleton skeleton-line" style="width: 60%;"></span>
 *   <span class="skeleton skeleton-title" style="width: 220px;"></span>
 *   <span class="skeleton d-block" style="width: 100%; height: 90px;"></span>   (free size)
 *   <span class="skeleton rounded-circle" style="width: 40px; height: 40px;"></span>  (avatar)
 */

.skeleton {
    position: relative;
    overflow: hidden;
    background-color: #EBEDF3; /* Metronic gray-200 */
    border-radius: 0.42rem;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

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

/* Respect users who reduce motion: keep the placeholder, drop the sweep. */
@media (prefers-reduced-motion: reduce) {
    .skeleton::after {
        animation: none;
    }
}

/* Shape helpers — set the width inline; height has a sensible default. */
.skeleton-line {
    display: block;
    height: 14px;
}

.skeleton-title {
    display: block;
    height: 22px;
}