/* LFZ Loading Screen — replaces the default Blazor circular loader.
   Ported from the OnePortal shell (OnePortal.Blazor) so E-Service's boot
   screen matches: LFZ initials ring, rotating value word, gradient bar, %.
   .lfz-authorizing-screen is the post-boot auth wait UI (App.razor) — same look,
   separate class so index.html boot timers do not confuse it with the boot screen. */
.lfz-loading-screen,
.lfz-authorizing-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;
}

.lfz-loading-screen .lfz-spinner-ring,
.lfz-authorizing-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%);
}

.lfz-loading-screen .lfz-spinner-core,
.lfz-authorizing-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-loading-screen .lfz-spinner-initials,
.lfz-authorizing-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);
}

.lfz-loading-screen .lfz-spinner-text,
.lfz-authorizing-screen .lfz-spinner-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    align-items: center;
}

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

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

.lfz-loading-screen .lfz-spinner-progress,
.lfz-authorizing-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,
.lfz-authorizing-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;
}

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


/* ---------------------------------------------------------------------------
   IN-APP SPINNER
   Same look as the boot screen, three sizes, block or inline. Use it for
   panel/page loading states after the app has booted (component: LfzSpinner).
   Shares the two keyframes below. Selectors are intentionally NOT scoped under
   .lfz-loading-screen so they never collide with the boot-screen rules above.
   ------------------------------------------------------------------------ */

/* 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;
}

.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;
}

@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%); }
}