/* Global Preloader & AJAX Bar */

    /* ──────────────────────────────────────────────────────────
       PAGE OVERLAY – locks scroll while the initial paint loads
       ────────────────────────────────────────────────────────── */
    body.gl-loading {
        overflow: hidden;
    }

    /* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       1.  PAGE PRELOADER — fixed full-viewport overlay
           Visible from the very first byte until window.load,
           then faded out by main.js → $('.tj-preloader').fadeOut()
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
    #gl-page-loader {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #ffffff;
        /* Smooth opacity exit used by the safety-timeout fallback */
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* State class added by the safety-timeout script below */
    #gl-page-loader.gl-page-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* ── Spinner wrapper ── */
    .gl-spinner {
        position: relative;
        width: 64px;
        height: 64px;
    }

    /* Outer arc — rotates using --primary-color (dashboard primary blue) */
    .gl-arc-outer {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        /* Track: subtle transparent ring */
        border: 3px solid rgba(0, 0, 0, 0.07);
        /* Active arc segment in the primary theme color */
        border-top-color: var(--primary-color, #0c7fae);
        border-right-color: var(--primary-color, #0c7fae);
        animation: gl-spin 0.9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
    }

    /* Inner arc — counter-rotates using --secondary-color */
    .gl-arc-inner {
        position: absolute;
        inset: 11px;
        border-radius: 50%;
        border: 2.5px solid rgba(0, 0, 0, 0.06);
        border-bottom-color: var(--secondary-color, #263370);
        border-left-color: var(--secondary-color, #263370);
        animation: gl-spin 1.25s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite reverse;
    }

    /* Center pulsing dot — echos the primary color */
    .gl-center-dot {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .gl-center-dot::after {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--primary-color, #0c7fae);
        /* Ripple pulse outward */
        animation: gl-dot-pulse 1.8s ease-out infinite;
    }

    /* ── Keyframes ── */
    @keyframes gl-spin {
        to { transform: rotate(360deg); }
    }

    @keyframes gl-dot-pulse {
        0%   { box-shadow: 0 0 0 0   rgba(12, 127, 174, 0.45); transform: scale(1);   }
        60%  { box-shadow: 0 0 0 10px rgba(12, 127, 174, 0);   transform: scale(0.85); }
        100% { box-shadow: 0 0 0 0   rgba(12, 127, 174, 0);   transform: scale(1);   }
    }

    /* ── Reduced-motion: static rings, no animation ── */
    @media (prefers-reduced-motion: reduce) {
        .gl-arc-outer {
            animation: none;
            border-color: var(--primary-color, #0c7fae);
        }
        .gl-arc-inner {
            animation: none;
            border-color: var(--secondary-color, #263370);
        }
        .gl-center-dot::after {
            animation: none;
        }
    }

    /* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
       2.  AJAX TOP-BAR — 3 px animated progress strip
           Appears on ajaxStart / fetch start, disappears on stop.
           Always mounted; toggled via .gl-bar-active class.
       â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */
    #gl-ajax-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 999999;       /* above everything including modals */
        pointer-events: none;  /* never intercepts clicks */
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    #gl-ajax-bar.gl-bar-active {
        opacity: 1;
    }

    /* Gradient fill spanning the full bar width */
    .gl-bar-fill {
        position: absolute;
        inset: 0;
        /* Gradient sweeps between primary and secondary theme colors */
        background: linear-gradient(
            90deg,
            var(--primary-color, #0c7fae) 0%,
            var(--secondary-color, #263370) 50%,
            var(--primary-color, #0c7fae) 100%
        );
        background-size: 200% 100%;
        /* Continuous shimmer — conveys "working" without a determinate fill */
        animation: gl-bar-shimmer 1.6s linear infinite;
        box-shadow: 0 1px 8px rgba(12, 127, 174, 0.4);
    }

    /* Translucent glare sweep over the gradient for extra polish */
    .gl-bar-glare {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 25%;
        background: rgba(255, 255, 255, 0.3);
        animation: gl-bar-sweep 1.6s ease-in-out infinite;
        border-radius: 0 2px 2px 0;
    }

    @keyframes gl-bar-shimmer {
        0%   { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }

    @keyframes gl-bar-sweep {
        0%   { left: -30%; }
        100% { left: 130%; }
    }