/* ============================================================================
   LFZ Loader — v1 (17 September 2026)

   Copied verbatim from OnePortal's shell:
     OnePortal.Blazor/wwwroot/css/app.css

   Two things live in here and they are independent:

     1. .lfz-loading-screen   the full-screen boot loader that sits in
                              index.html and is destroyed when the app renders.
     2. .lfz-spinner          the in-app spinner, in three sizes, for
                              "loading..." states inside a page.

   Both share the same ring, the same core, the same colours and the same two
   keyframes at the bottom of this file. Do not split the file — the keyframes
   are needed by both.

   Colours (do not change these):
     #f04925   LFZ orange   ring, top
     #7a7d84   LFZ grey     ring, right
     #002b5c   LFZ navy     ring, bottom, and the core
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. BOOT LOADING SCREEN
   Replaces the stock Blazor "Loading: 3/47 resources" fraction.
   ------------------------------------------------------------------------ */

.lfz-loading-screen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    z-index: 10000;
}

.lfz-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Spinner ring - matches LfzSpinner component */
.lfz-loading-screen .lfz-spinner-ring {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border-style: solid;
    border-width: 3px;
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: #f04925; /* LFZ orange/red */
    border-right-color: #7a7d84; /* LFZ grey */
    border-bottom-color: #002b5c; /* LFZ deep blue */
    animation: lfz-spinner-spin 0.9s linear infinite;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 60%);
}

/* Inner core */
.lfz-loading-screen .lfz-spinner-core {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, #002b5c, #0c264a);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.45),
        0 0 14px rgba(0, 75, 160, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LFZ initials */
.lfz-loading-screen .lfz-spinner-initials {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Text block */
.lfz-loading-screen .lfz-spinner-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    align-items: center;
}

/* Main caption */
.lfz-loading-screen .lfz-spinner-caption {
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4b5563;
    opacity: 0.95;
}

/* Rotating keywords */
.lfz-loading-screen .lfz-spinner-subcaption {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9ca3af;
    opacity: 0.98;
}

/* Slim animated load bar */
.lfz-loading-screen .lfz-spinner-progress {
    margin-top: 0.4rem;
    width: 140px;
    height: 4px;
    border-radius: 999px;
    background: rgba(156, 163, 175, 0.4);
    overflow: hidden;
    position: relative;
}

.lfz-loading-screen .lfz-spinner-progress-inner {
    position: absolute;
    inset: 0;
    transform: translateX(-80%);
    background: linear-gradient(90deg, #f04925, #f97316, #22c55e, #0ea5e9);
    animation: lfz-progress-slide 1.4s ease-in-out infinite;
}

/* Loading percentage display */
.lfz-loading-percentage {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.05em;
}


/* ---------------------------------------------------------------------------
   2. IN-APP SPINNER
   Same look, three sizes, block or inline. Use it for panel/page loading
   states after the app has booted.
   ------------------------------------------------------------------------ */

/* Base container */
.lfz-spinner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #111827;
}

/* Block vs inline mode */
.lfz-spinner-block {
    justify-content: center;
    padding: 0; /* no background container, just the spinner */
}

.lfz-spinner-inline {
    display: inline-flex;
    padding: 0;
}

/* Spinner ring */
.lfz-spinner-ring {
    position: relative;
    border-radius: 999px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: #f04925; /* LFZ orange/red */
    border-right-color: #7a7d84; /* LFZ grey */
    border-bottom-color: #002b5c; /* LFZ deep blue */
    animation: lfz-spinner-spin 0.9s linear infinite;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 60%);
}

/* Inner core */
.lfz-spinner-core {
    border-radius: 999px;
    background: linear-gradient(135deg, #002b5c, #0c264a);
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.45),
        0 0 14px rgba(0, 75, 160, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LFZ initials */
.lfz-spinner-initials {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Text block */
.lfz-spinner-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* Main caption */
.lfz-spinner-caption {
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4b5563;
    opacity: 0.95;
}

/* Rotating keywords */
.lfz-spinner-subcaption {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9ca3af;
    opacity: 0.98;
}

/* Slim animated load bar */
.lfz-spinner-progress {
    margin-top: 0.4rem;
    width: 140px;
    height: 4px;
    border-radius: 999px;
    background: rgba(156, 163, 175, 0.4);
    overflow: hidden;
    position: relative;
}

.lfz-spinner-progress-inner {
    position: absolute;
    inset: 0;
    transform: translateX(-80%);
    background: linear-gradient(90deg, #f04925, #f97316, #22c55e, #0ea5e9);
    animation: lfz-progress-slide 1.4s ease-in-out infinite;
}

/* Sizes */
.lfz-spinner-sm .lfz-spinner-ring {
    width: 26px;
    height: 26px;
    border-width: 2px;
}

.lfz-spinner-sm .lfz-spinner-core {
    width: 18px;
    height: 18px;
}

.lfz-spinner-sm .lfz-spinner-initials {
    font-size: 0.55rem;
}

.lfz-spinner-md .lfz-spinner-ring {
    width: 36px;
    height: 36px;
    border-width: 3px;
}

.lfz-spinner-md .lfz-spinner-core {
    width: 26px;
    height: 26px;
}

.lfz-spinner-md .lfz-spinner-initials {
    font-size: 0.7rem;
}

.lfz-spinner-lg .lfz-spinner-ring {
    width: 48px;
    height: 48px;
    border-width: 3px;
}

.lfz-spinner-lg .lfz-spinner-core {
    width: 34px;
    height: 34px;
}

.lfz-spinner-lg .lfz-spinner-initials {
    font-size: 0.85rem;
}


/* ---------------------------------------------------------------------------
   3. ANIMATIONS — required by both sections above
   ------------------------------------------------------------------------ */

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

@keyframes lfz-progress-slide {
    0%   { transform: translateX(-80%); }
    50%  { transform: translateX(-10%); }
    100% { transform: translateX(100%); }
}