/*
 * Skeleton при первой отрисовке страницы (до DOMContentLoaded).
 * Скрывается классом html.crm-ready.
 */

.crm-page-boot-skeleton {
    padding: 0.5rem 0 1.25rem;
    pointer-events: none;
    user-select: none;
}

html.crm-ready .crm-page-boot-skeleton {
    display: none;
}

.crm-skeleton {
    background: linear-gradient(
        90deg,
        var(--bs-secondary-bg, #e9ecef) 0%,
        color-mix(in srgb, var(--bs-secondary-bg, #e9ecef) 55%, var(--bs-body-bg, #fff) 45%) 50%,
        var(--bs-secondary-bg, #e9ecef) 100%
    );
    background-size: 200% 100%;
    border-radius: 0.375rem;
    animation: crm-skeleton-shimmer 1.2s ease-in-out infinite;
}

.crm-skeleton-line {
    height: 0.875rem;
    margin-bottom: 0.5rem;
}

.crm-skeleton-line--title {
    height: 1.25rem;
    width: 42%;
    margin-bottom: 0.75rem;
}

.crm-skeleton-line--short {
    width: 68%;
}

.crm-skeleton-card {
    height: 4.5rem;
    margin-bottom: 0.625rem;
    border-radius: 0.625rem;
}

.crm-skeleton-toolbar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.crm-skeleton-toolbar .crm-skeleton {
    height: 2.15rem;
    flex: 1 1 0;
    max-width: 8rem;
}

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

@media (prefers-reduced-motion: reduce) {
    .crm-skeleton {
        animation: none;
        background: var(--bs-secondary-bg, #e9ecef);
    }
}