/* ===========================
       GLOBAL LOADING OVERLAY
       =========================== */

    .global-loading-overlay {
        /* Positioning - Fixed covers entire viewport */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;

        /* Layout - Flexbox for perfect centering */
        display: none;
        /* Hidden by default */
        justify-content: center;
        align-items: center;
        flex-direction: column;

        /* Visual - Glass morphism effect */
        background-color: rgba(253, 253, 252, 0.25);
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);

        /* Stacking - Above all content */
        z-index: 99999;

        /* Interaction - Prevent clicks through overlay */
        pointer-events: none;
        /* Allow clicks when hidden */
        user-select: none;

        /* Animation - Smooth fade in/out */
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    /* Active State - Visible overlay */
    .global-loading-overlay.active {
        display: flex;
        opacity: 1;
        pointer-events: all;
        /* Block clicks when visible */
    }

    /* Dark Mode Support - Tailwind/Bootstrap Dark Mode */
    [data-bs-theme="dark"] .global-loading-overlay,
    .dark .global-loading-overlay {
        background-color: rgba(10, 10, 10, 0.35);
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
    }

    /* ===========================
       LOADING CONTENT CONTAINER
       =========================== */

    .loading-content {
        /* Layout */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 1.5rem;

        /* No background card - clean minimal style */
        background: transparent;

        /* Animation - Fade in */
        animation: fadeInScale 0.3s ease-out;
        transform-origin: center;
    }

    /* Loading Content Entrance Animation */
    @keyframes fadeInScale {
        0% {
            opacity: 0;
            transform: scale(0.95);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* ===========================
       CIRCULAR SPINNER (SVG)
       =========================== */

    .loading-spinner-wrapper {
        width: 120px;
        height: 120px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .circular-spinner {
        animation: rotate 2s linear infinite;
        height: 100%;
        transform-origin: center center;
        width: 100%;
        position: absolute;
    }

    .spinner-path {
        stroke: var(--primary-color, #00FF00);
        /* Use primary theme color */
        stroke-dasharray: 150, 200;
        stroke-dashoffset: -10;
        animation: dash 1.5s ease-in-out infinite;
        stroke-linecap: round;
    }

    /* System Image in Center */
    .loader-system-image {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        object-fit: contain;
        background: white;
        padding: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 10;
    }

    /* Dark Mode - System Image */
    [data-bs-theme="dark"] .loader-system-image,
    .dark .loader-system-image {
        background: #1b1b18;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    /* Dark Mode - Spinner Color */
    [data-bs-theme="dark"] .spinner-path,
    .dark .spinner-path {
        stroke: var(--primary-color, #00FF00);
        /* Use primary theme color for dark mode */
    }

    /* Rotation Animation */
    @keyframes rotate {
        100% {
            transform: rotate(360deg);
        }
    }

    /* Dash Animation (creates the circular arc effect) */
    @keyframes dash {
        0% {
            stroke-dasharray: 1, 200;
            stroke-dashoffset: 0;
        }

        50% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -35px;
        }

        100% {
            stroke-dasharray: 89, 200;
            stroke-dashoffset: -124px;
        }
    }

    /* ===========================
       LOADING MESSAGE
       =========================== */

    .loading-message {
        font-family: var(--font-secondary, 'Orbitron', sans-serif);
        line-height: 1.5;
        margin: 0;
    }

    .loading-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--color-text-dark, #ffffff);
        margin: 0 0 0.5rem 0;
        letter-spacing: 0.1em;
        font-family: var(--font-secondary, 'Orbitron', sans-serif);
        text-transform: uppercase;
    }

    .loading-subtitle {
        font-size: 0.9rem;
        color: var(--color-text-light, rgba(255, 255, 255, 0.7));
        margin: 0;
        font-weight: 400;
        font-family: var(--font-secondary, 'Orbitron', sans-serif);
        letter-spacing: 0.05em;
    }

    /* Dark Mode - Loading Message */
    [data-bs-thvar(--color-text-dark, #ffffff);
    }

    [data-bs-theme="dark"] .loading-subtitle,
    .dark .loading-subtitle {
        color: var(--color-text-light, rgba(255, 255, 255, 0.7))rk"] .loading-subtitle,
 .dark .loading-subtitle {
            color: #A1A09A;
        }

        /* ===========================
       LOADING PROGRESS (Optional)
       =========================== */

        .loading-progress {
            /* Layout */
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;

            /* Animation - Fade in when shown */
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .loading-progress .progress {
            /* Bootstrap progress bar customization */
            background-color: rgba(0, 255, 0, 0.1);
            border-radius: 999px;
            overflow: hidden;
        }

        .loading-progress .provar(--primary-color, #00FF00)progress-bar,
        .loading-progress .progress .progress-bar-striped {
            background-color: #f53003;
            background-image: linear-gradient(45deg,
                    rgba(255, 255, 255, 0.15) 25%,
                    transparent 25%,
                    transparent 50%,
                    rgba(255, 255, 255, 0.15) 50%,
                    rgba(255, 255, 255, 0.15) 75%,
                    transparent 75%,
                    transparent);
            background-size: 1rem 1rem;
        }

        /* Dark Mode - Progress Bar */
        [data-bs-theme="dark"] .loa0,
        255,
        0,
        0.15);
    }

    [data-bs-theme="dark"] .loading-progress .progress .progress-bar,
    [data-bs-theme="dark"] .loading-progress .progress .progress-bar-striped,
    .dark .loading-progress .progress .progress-bar,
    .dark .loading-progress .progress .progress-bar-striped {

        background-color: var(--primary-color, #00FF00)ress .progress-bar,
        .dark .loading-progress .progress .progress-bar-striped {
            background-color: #FF4433;
        }

        /* ===========================
       MOBILE RESPONSIVENESS
       =========================== */

        @media (max-width: 576px) {
            .loading-spinner-wrapper {
                width: 100px;
                height: 100px;
            }

            .loader-system-image {
                width: 70px;
                height: 70px;
                padding: 6px;
            }

            .loading-title {
                font-size: 1.1rem;
            }

            .loading-subtitle {
                font-size: 0.85rem;
            }

            .loading-progress .progress {
                width: 200px !important;
            }
        }

        /* ===========================
       ACCESSIBILITY ENHANCEMENTS
       =========================== */

        /* High Contrast Mode Support */
        @media (prefers-contrast: high) {
            .global-loading-overlay {
                background-color: rgba(253, 253, 252, 0.9);
                backdrop-filter: none;
            }

            .spinner-path {
                stroke: var(--primary-color, #00FF00);
                stroke-width: 8;
            }

            .loading-title,
            .loading-subtitle {
                color: var(--color-text-dark, #ffffff);
            }
        }

        /* Reduced Motion Support */
        @media (prefers-reduced-motion: reduce) {

            .global-loading-overlay,
            .loading-content,
            .circular-spinner,
            .spinner-path {
                animation: none !important;
                transition: none !important;
            }

            .spinner-path {
                /* Show static arc instead of animation */
                stroke-dasharray: 89, 200;
                stroke-dashoffset: -35px;
            }
        }

        /* Focus Visible for Keyf53003Navigation */
        .global-loading-overlay:focus-visible {
            outline: 3px solid #8b5a9e;
            outline-offset: -3px;
        }