/* ===== LOADING OVERLAY =====
   Matches the navbar: white surface, #e0e0e0 border, soft shadow and the
   ClientZone logo gradient (teal #00c4b4 -> indigo #3730a3).
   Pages show/hide #loading via style.display, so every entrance uses
   keyframes (they restart each time display goes none -> block). */
.loading-overlay-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20001;
    animation: czFadeIn 0.15s ease both;
}

/* Frosted veil; more opaque where backdrop-filter is unsupported */
.loading-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.85);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .loading-overlay {
        background-color: rgba(255, 255, 255, 0.6);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
}

/* Indeterminate progress bar along the top edge */
.loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    overflow: hidden;
    background: rgba(26, 115, 232, 0.12);
}

    .loading-bar::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 40%;
        border-radius: 0 3px 3px 0;
        background: linear-gradient(90deg, #00c4b4 0%, #3730a3 100%);
        animation: czBar 1.2s ease-in-out infinite;
    }

/* Centre card - a square around the logo, delayed slightly so quick postbacks don't flash it.
   The label hangs below it (see .loading-text) so the logo sits dead centre. */
.loading-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    border-radius: 10px;
    /* White fill over a rotating conic gradient that only shows through the border:
       a grey track with a teal -> indigo comet chasing around the box. */
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        conic-gradient(from var(--cz-border-angle), #e0e0e0 0deg 200deg, #00c4b4 290deg, #3730a3 360deg) border-box;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    animation: czCardIn 0.2s ease 0.12s both, czBorderSpin 1.4s linear infinite;
}

/* Registered so the gradient angle can be animated; without @property support the
   border simply shows a static gradient. */
@property --cz-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* The logo's visual weight (the big ring) sits right of and below the image centre;
   the uneven margins nudge it ~1.5px left and ~1px up so it reads as centred. */
.loading-logo {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 3px 2px 0;
    object-fit: contain;
    animation: czPulse 1.4s ease-in-out infinite;
}

.loading-text {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 600;
    color: #444444;
    letter-spacing: 0.02em;
}

@keyframes czFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes czCardIn {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 6px)); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

@keyframes czBorderSpin {
    to { --cz-border-angle: 360deg; }
}

@keyframes czPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.92); opacity: 0.8; }
}

@keyframes czBar {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .loading-card {
        animation: czCardIn 0.2s ease 0.12s both, czBorderSpin 3.5s linear infinite;
    }

    .loading-logo {
        animation: none;
    }

    .loading-bar::before {
        width: 100%;
        animation: none;
    }
}