/*
 * Global page-loading overlay — MDP-796.
 *
 * Full-screen blocking overlay shown while a navigation or form submit is in
 * flight. Pages in this app can take several seconds to render; without this the
 * browser gives no in-page feedback and users click the same control again.
 *
 * Markup is created by static/js/page_loading.js; this file only styles it.
 */

.mdp-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000; /* above Bootstrap modals (1055) and the toast stack */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    /* Soft veil rather than a flat grey block: the page stays faintly visible
       behind it, so the overlay reads as "working" instead of "broken". */
    background: rgba(244, 246, 251, 0.82);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    /* Fade in rather than snapping, so a fast page that beats the show-delay
       never produces a hard flash. */
    opacity: 0;
    transition: opacity 120ms ease-out;
}

.mdp-loading-overlay.is-visible {
    opacity: 1;
}

.mdp-loading-overlay__spinner {
    width: 3rem;
    height: 3rem;
    border: 0.3rem solid rgba(13, 110, 253, 0.18);
    border-top-color: #0d6efd; /* brand blue, matches .btn-primary in custom.css */
    border-radius: 50%;
    animation: mdp-loading-spin 0.7s linear infinite;
}

.mdp-loading-overlay__text {
    color: #1a237e;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

@keyframes mdp-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Respect users who ask for reduced motion: keep the overlay and its message,
   drop the spin. */
@media (prefers-reduced-motion: reduce) {
    .mdp-loading-overlay {
        transition: none;
    }

    .mdp-loading-overlay__spinner {
        animation: none;
        border-top-color: #0d6efd;
        opacity: 0.6;
    }
}