/* -----------------------------------------------------------------------
   Copyright (c) 2025-2026 Akshaya Vault. All rights reserved.
   Author: Kiran Kurapaty <kkurapaty@gmail.com>

   This source file is part of the Akshaya Vault application and is
   confidential and proprietary. Unauthorized copying, modification, use,
   or distribution of this file, via any medium, is strictly prohibited
   without prior written permission from Akshaya Vault.
   ----------------------------------------------------------------------- */
:root {
    --primary-dark: #0f3460;
    --primary-light: #16213e;
    --primary-medium: #1a2f5c;
    --dot-color: #e94560;
    --hint-color: #8b96b8;
    --ring-color: #d4af37;
    --message-color: #cdd6ea;
    --header-color: #eef1f8;
    --status-color: #e8ecf6;
    --product-header: #0f3460;
    --product-header-dark: #2D8659;
    --product-header-tagline: #2D8659;
    --product-header-tagline-dark: #d4af37;
}

/* theme-detector.js sets data-theme="dark" on <html> - swap the header/tagline colors
   used by MainLayout.razor's brand text (the loader's own h1/.tagline below are pinned
   to the -dark variants directly, since the loader's gradient background never changes
   with theme). */
[data-theme="dark"] {
    --product-header: var(--product-header-dark);
    --product-header-tagline: var(--product-header-tagline-dark);
}

* {
    box-sizing: border-box;
}

html, body {
    font-family: 'Montserrat', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
}

.app-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-dark) 55%, var(--primary-medium) 100%);
    background-size: 200% 200%;
    animation: drift 12s ease-in-out infinite;
    color: var(--header-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.app-loader.app-loader-hidden {
    opacity: 0;
    pointer-events: none;
}

@keyframes drift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.loader {
    text-align: center;
    padding: 3rem 2.5rem;
    max-width: 30rem;
    animation: rise 0.7s ease-out;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.logo-ring {
    position: relative;
    width: 128px;
    height: 128px;
    margin: 0 auto 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .logo-ring::before,
    .logo-ring::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid var(--ring-color);
        opacity: 0;
        animation: pulse 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    .logo-ring::after {
        animation-delay: 1.2s;
    }

@keyframes pulse {
    0% {
        transform: scale(0.8);
        opacity: 0.7;
    }

    80% {
        transform: scale(1.6);
        opacity: 0;
    }

    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

.logo-ring img {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 1;
    background: #fff;
}

/* Scoped to .loader (not bare h1/h2/p.message) - these were previously unscoped, which made
   every h1/h2 on every page in the app inherit near-white text unless something else happened to
   override it. Radzen's own text components always do, but a plain heading with no Radzen
   wrapper - e.g. the print-only report header in reports.css's .print-header - had nothing to
   win that fight and rendered invisible white-on-white text, on screen, in print, and in PDF
   export alike. */
.loader h1 {
    margin: 0 0 0.35rem;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--header-color);
}

.tagline {
    margin: 0 0 1.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--product-header-tagline);
    text-transform: uppercase;
}

.loader h2 {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffffff;
}

.loader p.message {
    margin: 0 auto 1.75rem;
    max-width: 26rem;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--message-color);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.3);
    font-size: 0.82rem;
    color: var(--status-color);
}

.dots {
    display: inline-flex;
    gap: 0.3rem;
}

    .dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--dot-color);
        animation: bounce 1.4s ease-in-out infinite;
    }

        .dots span:nth-child(2) {
            animation-delay: 0.15s;
        }

        .dots span:nth-child(3) {
            animation-delay: 0.3s;
        }

@keyframes bounce {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }

    40% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

.hint {
    margin-top: 1.75rem;
    font-size: 0.75rem;
    color: var(--hint-color);
}

@media (prefers-reduced-motion: reduce) {
    html, body, .app-loader {
        animation: none;
    }

    .app-loader {
        transition: none;
    }

    .logo-ring::before, .logo-ring::after, .dots span {
        animation: none;
        opacity: 0;
    }
}