/* Loading states, shared across the signed-in app.

   Every class here is prefixed `sc-` on purpose. This file is linked from
   index.html alongside the other app stylesheets, so all of them are live on
   every page at once — an unprefixed name like `.spinner` or `.card` is a
   cross-page override waiting to happen (see test_app_css_isolation.py, and
   the .card collision that broke the signed-in home page).

   Animations only move transform and opacity so they stay on the compositor
   and never cause layout work while the page is already busy fetching. */

/* ---- shimmer skeleton -------------------------------------------------- */

.sc-skel {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #ececea;
}

/* The sweep is a pseudo-element sliding across, rather than an animated
   background-position, so it composites instead of repainting the fill. */
.sc-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: sc-sweep 1.4s ease-in-out infinite;
}

@keyframes sc-sweep {
    100% { transform: translateX(100%); }
}

.sc-skel-line { height: 12px; margin-bottom: 10px; }
.sc-skel-line:last-child { margin-bottom: 0; }
.sc-skel-line.sc-w40 { width: 40%; }
.sc-skel-line.sc-w60 { width: 60%; }
.sc-skel-line.sc-w80 { width: 80%; }

/* Staggered so the sweeps do not move in lockstep, which reads as a single
   flashing block rather than a set of loading panels. */
.sc-skel-stagger-1::after { animation-delay: 0.10s; }
.sc-skel-stagger-2::after { animation-delay: 0.20s; }
.sc-skel-stagger-3::after { animation-delay: 0.30s; }

/* ---- dashboard skeleton ------------------------------------------------ */

.sc-skel-dash { padding: 24px 32px; }

.sc-skel-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.sc-skel-kpi {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sc-skel-charts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.sc-skel-chart {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sc-skel-chart-body { height: 180px; margin-top: 16px; }

/* ---- branded block loader ---------------------------------------------- */

.sc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 64px 24px;
    text-align: center;
}

.sc-loading-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #7a8794;
    letter-spacing: 0.01em;
    margin: 0;
}

/* ---- spinner ----------------------------------------------------------- */

.sc-spinner {
    display: inline-block;
    box-sizing: border-box;
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(27, 58, 92, 0.15);
    border-top-color: #e2a45a;
    animation: sc-spin 0.7s linear infinite;
    vertical-align: -0.15em;
}

@keyframes sc-spin {
    100% { transform: rotate(360deg); }
}

/* Sized so it sits on the text baseline inside a button without changing the
   button's height. */
.sc-spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.sc-spinner-lg { width: 34px; height: 34px; border-width: 3px; }

/* ---- three-dot pulse, for inline "still working" hints ----------------- */

.sc-dots { display: inline-flex; gap: 5px; align-items: center; }

.sc-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1B3A5C;
    opacity: 0.35;
    animation: sc-bounce 1.1s ease-in-out infinite;
}

.sc-dots i:nth-child(2) { animation-delay: 0.15s; }
.sc-dots i:nth-child(3) { animation-delay: 0.30s; }

@keyframes sc-bounce {
    0%, 80%, 100% { transform: translateY(0);     opacity: 0.35; }
    40%           { transform: translateY(-4px);  opacity: 1; }
}

/* Motion here is decorative — the label and layout already communicate the
   state, so honour the OS setting and hold everything still. */
@media (prefers-reduced-motion: reduce) {
    .sc-skel::after,
    .sc-spinner,
    .sc-dots i {
        animation: none;
    }
    .sc-skel::after { transform: translateX(0); opacity: 0.25; }
    .sc-spinner { border-top-color: rgba(27, 58, 92, 0.45); }
}