/**
 * ============================================================
 * Fenice Framework
 * ============================================================
 * File........: assets/css/loading-overlay.css
 * Versione....: 2.9.37-dev
 * Autore......: Laura Bongiorno
 * Data........: 2026-08-05
 * Scopo.......: Overlay globale e avanzamento reale degli upload.
 * ============================================================
 */

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, visibility 160ms ease;
}

.loading-overlay[hidden] { display: none; }
.loading-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.loading-overlay__box {
    width: min(100%, 34rem);
    padding: 2rem;
    border: 1px solid rgba(143, 167, 173, 0.35);
    border-radius: 0.875rem;
    background: #ffffff;
    box-shadow: 0 0.875rem 2.75rem rgba(0, 0, 0, 0.2);
    text-align: center;
}

.loading-overlay__spinner {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.1rem;
    border: 0.35rem solid #dfe6e8;
    border-top-color: #6f8f97;
    border-radius: 50%;
    animation: fenice-loading-spin 800ms linear infinite;
}

.loading-overlay__title {
    margin-bottom: 0.55rem;
    color: #26383d;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.loading-overlay__text {
    color: #56666a;
    font-size: 1rem;
    line-height: 1.5;
}

.loading-overlay__progress {
    display: grid;
    margin-top: 1.35rem;
    gap: .65rem;
    text-align: left;
}

.loading-overlay__progress[hidden] { display: none; }

.loading-overlay__progress-head,
.loading-overlay__progress-values {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.loading-overlay__progress-head {
    color: #33474c;
    font-size: .9rem;
    font-weight: 750;
}

.loading-overlay__progress-percent {
    color: #b95629;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.loading-overlay__progress progress {
    width: 100%;
    height: 1rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #e5ecee;
    accent-color: #6f8f97;
}

.loading-overlay__progress progress::-webkit-progress-bar {
    border-radius: 999px;
    background: #e5ecee;
}
.loading-overlay__progress progress::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, #6f8f97, #d06b36);
}
.loading-overlay__progress progress::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, #6f8f97, #d06b36);
}

.loading-overlay__progress-values {
    color: #56666a;
    font-size: .86rem;
    font-variant-numeric: tabular-nums;
}

.loading-overlay__progress-phase {
    margin: 0;
    color: #56666a;
    font-size: .86rem;
    line-height: 1.4;
}

.loading-overlay__progress.is-complete progress::-webkit-progress-value {
    background: #4f8a63;
}
.loading-overlay__progress.is-complete progress::-moz-progress-bar {
    background: #4f8a63;
}
.loading-overlay__progress.is-error progress::-webkit-progress-value {
    background: #b7352c;
}
.loading-overlay__progress.is-error progress::-moz-progress-bar {
    background: #b7352c;
}

.loading-overlay__progress.is-indeterminate progress {
    animation: fenice-loading-pulse 1.15s ease-in-out infinite alternate;
}

.loading-overlay__close {
    margin-top: 1rem;
}

body.fenice-is-loading {
    overflow: hidden;
    cursor: wait;
}

@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .loading-overlay {
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
    }
}

@media (max-width: 520px) {
    .loading-overlay { padding: .75rem; }
    .loading-overlay__box { padding: 1.4rem 1.1rem; }
    .loading-overlay__progress-values { align-items: flex-start; flex-direction: column; gap: .2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .loading-overlay,
    .loading-overlay__spinner,
    .loading-overlay__progress.is-indeterminate progress {
        transition: none;
        animation: none;
    }
}

@keyframes fenice-loading-spin { to { transform: rotate(360deg); } }
@keyframes fenice-loading-pulse { from { opacity: .55; } to { opacity: 1; } }