/* ================================================================
   SKELETON LOADER — GLOBAL STYLES
   Reads company CSS variables from CompanyCSSCustomization.css.
   Do not hard-code colors here; use var(--company-*) instead.
   ================================================================ */

/* ── Base skeleton element ─────────────────────────────────────── */
.sk-box {
    display: block;
    background-color: var(--company-primary-50, #eff6ff);
    background-image: linear-gradient(
        90deg,
        var(--company-primary-50,  #eff6ff) 25%,
        var(--company-primary-100, #dbeafe) 50%,
        var(--company-primary-50,  #eff6ff) 75%
    );
    background-size: 400% 100%;
    border-radius: var(--company-radius-sm, 6px);
    animation: sk-shimmer 1.6s linear infinite;
}

@keyframes sk-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Reduced-motion: swap shimmer for a gentle pulse */
@media (prefers-reduced-motion: reduce) {
    .sk-box {
        animation: sk-pulse 2s ease-in-out infinite;
        background-image: none;
    }
    @keyframes sk-pulse {
        0%, 100% { opacity: 1; }
        50%       { opacity: 0.4; }
    }
}

/* ── Size helpers ──────────────────────────────────────────────── */
.sk-h-xs  { height: 10px; }
.sk-h-sm  { height: 14px; }
.sk-h-md  { height: 18px; }
.sk-h-lg  { height: 24px; }
.sk-h-xl  { height: 32px; }
.sk-h-2xl { height: 48px; }
.sk-h-3xl { height: 64px; }
.sk-h-4xl { height: 96px; }
.sk-h-5xl { height: 140px; }

.sk-w-20  { width: 20%; }
.sk-w-25  { width: 25%; }
.sk-w-33  { width: 33%; }
.sk-w-40  { width: 40%; }
.sk-w-50  { width: 50%; }
.sk-w-60  { width: 60%; }
.sk-w-75  { width: 75%; }
.sk-w-full{ width: 100%; }

/* shapes */
.sk-circle { border-radius: 50%;   }
.sk-pill   { border-radius: 999px; }

/* ── Structural containers ─────────────────────────────────────── */
.sk-card {
    background: var(--company-bg-primary, #fff);
    border: 1px solid var(--company-border-light, #e5e7eb);
    border-radius: var(--company-radius-lg, 12px);
    box-shadow: var(--company-card-shadow, 0 1px 3px rgba(0,0,0,.08));
    padding: 1.5rem;
    overflow: hidden;
}

.sk-card-sm {
    padding: 1rem;
}

/* Banner mimics the gradient page headers used in several views */
.sk-header-banner {
    background: linear-gradient(
        135deg,
        var(--company-primary-600, #2563eb),
        var(--company-primary-800, #1e40af)
    );
    border-radius: var(--company-radius-lg, 12px);
    padding: 2rem;
    margin-bottom: 1.5rem;
    opacity: 0.18;           /* very subtle — only shows brand color */
}

/* ── Card-grid responsive layout ───────────────────────────────── */
.sk-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 576px) {
    .sk-card-grid { grid-template-columns: 1fr; }
}

/* ── Stat-card row ─────────────────────────────────────────────── */
.sk-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* ── Content fade-in when skeleton is replaced ─────────────────── */
.sk-ready {
    animation: sk-fade-in 0.35s ease-out both;
}

@keyframes sk-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

@media (prefers-reduced-motion: reduce) {
    .sk-ready { animation: none; }
}

/* ── Accessibility helper ──────────────────────────────────────── */
.sk-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}