/*
 * wwwroot/css/loading.css
 *
 * Plain static CSS — NOT a .razor file, so "@" is just CSS syntax here,
 * no escaping needed. This file exists specifically because @keyframes,
 * @media, etc. cannot be written directly inside App.razor or any other
 * .razor file (the Razor compiler treats "@" as a C# transition token).
 *
 * Contains:
 *   1. The #blazor-error-ui styling Blazor's project template expects
 *      (referenced by id from the <div id="blazor-error-ui"> in App.razor).
 *   2. A minimal pre-boot spinner keyframe, in case any component wants
 *      a raw CSS animation class instead of Tailwind's animate-spin utility.
 */

/* ── Blazor framework-level error banner ─────────────────────────────────── */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: oklch(0.58 0.22 27 / 0.95);
    color: #fff;
    padding: 0.75rem 1rem;
    font-family: "Inter", system-ui, sans-serif;
    font-size: 0.875rem;
    box-sizing: border-box;
}

#blazor-error-ui .reload {
    color: #fff;
    text-decoration: underline;
    margin-left: 0.5rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
    margin-left: 1rem;
}

/* ── Pre-boot spinner keyframe ───────────────────────────────────────────── */
/* Used only if a raw CSS class is needed before Tailwind utilities are
   available (e.g. very first paint). Most components should prefer
   Tailwind's `animate-spin` utility instead — see SplashScreen.razor. */
@keyframes app-spin {
    to {
        transform: rotate(360deg);
    }
}

.app-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid oklch(0.62 0.11 200);
    border-top-color: transparent;
    border-radius: 50%;
    animation: app-spin 0.75s linear infinite;
}