/**
 * loading.css — the ONE loading surface for the whole system.
 *
 * ── Why this file exists (owner report 2026-08-01, point 7) ─────────────────
 * «لسه شاشات التحميل مختلفة مش موحدة على كامل الموقع». It was measured: five
 * separate definitions of the same idea shipped side by side —
 *
 *   base.css            .spin  → @keyframes spin,      1s linear
 *   coordinator.css     .spin  → @keyframes spin,      1s linear  (redeclared)
 *   monitoring-board.css .spin → @keyframes mb-spin,   1s linear
 *   executive.css       .spin  → @keyframes exec-spin, 0.8s linear
 *   admin-console.css   .ac-spin → @keyframes ac-spin, 1s linear, 30px, teal
 *
 * Same class name, four different keyframes, two different speeds, and a fifth
 * under another name at a fixed size and colour. Whichever stylesheet a page
 * happened to load last decided how fast its spinner turned. That is not a
 * style difference the reader can name — it is exactly the "كل صفحة شكلها
 * مختلف" feeling, produced by nobody deciding anything.
 *
 * ── The contract ────────────────────────────────────────────────────────────
 * Three states, and every page uses these and nothing else:
 *
 *   .iag-load          — the block: centred spinner + one line of Arabic.
 *                        For "this region has no content yet".
 *   .iag-load-inline   — the same spinner at text size, for a button or a row
 *                        that is refreshing content already on screen.
 *   .skeleton          — (components-skeletons.css) for a region whose SHAPE is
 *                        already known. Preferred at page level: a skeleton
 *                        says "this is what is coming", a spinner says "wait".
 *
 * `.spin` survives as the single global utility (defined here, once) because
 * ~200 existing call sites spell the spinner as
 * `<i data-lucide="loader-2" class="spin">`. Keeping the name and unifying the
 * behaviour fixes every one of them without touching a line of markup.
 */

/* ── The one rotation ──────────────────────────────────────────────────────
   Named iag-spin, not `spin`, so a page-level `@keyframes spin` cannot shadow
   it — which is precisely how coordinator.css and monitoring-board.css each
   ended up animating the same class against their own timeline. */
@keyframes iag-spin { to { transform: rotate(360deg); } }

.spin,
.iag-load-spin {
    animation: iag-spin 1s linear infinite;
    transform-origin: center;
}

/* ── The block state ─────────────────────────────────────────────────────── */
.iag-load {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2.5rem 1rem;
    color: var(--color-text-muted, #64748b);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    text-align: center;
}

.iag-load-spin,
.iag-load i,
.iag-load svg {
    width: 26px;
    height: 26px;
    color: var(--brand-primary-teal, #0f766e);
    stroke-width: 2.2;
}

/* Nested inside a card that already has its own padding. */
.iag-load.is-compact { padding: 1.25rem 1rem; }
.iag-load.is-compact i,
.iag-load.is-compact svg { width: 20px; height: 20px; }

/* ── The inline state ────────────────────────────────────────────────────── */
.iag-load-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    font-size: inherit;
}
.iag-load-inline i,
.iag-load-inline svg {
    width: 1em;
    height: 1em;
    animation: iag-spin 1s linear infinite;
}

/* ── Honour the setting ──────────────────────────────────────────────────── */
/* A vestibular-motion setting is not a suggestion. The spinner stops turning
   and the text carries the message on its own — which it always could. */
@media (prefers-reduced-motion: reduce) {
    .spin,
    .iag-load-spin,
    .iag-load i,
    .iag-load svg,
    .iag-load-inline i,
    .iag-load-inline svg { animation: none; }
}