/*
 * =============================================================================
 * PAGE BOOT — jednotný loader při otevření stránky
 *
 * Záměr: překrýt FOUC / problik při navigaci stejným kolečkem všude.
 * Markup: #page-boot (bez textu). Třída html.page-booting hned v HTML.
 * Logika: js/shared/ui/page-boot.js (auto hide, nebo manual pro app.html).
 *
 * Toast / modal / overlay NESMÍ dostat page-boot-fade-in s fill-mode both —
 * jinak prázdný černý toast zůstane opacity:1 (bug „černá bublina“).
 * =============================================================================
 */

/* Host na chráněné stránce — skryj UI do assertPageAccess / redirect */
html.sp-auth-pending body {
    visibility: hidden !important;
}

@keyframes page-boot-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes page-boot-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/*
 * Přímé děti body, které se NEÚČASTNÍ boot fade (toasty, overlaye, chrome).
 * :where() = nulová specificita navíc uvnitř :not().
 */
html.page-booting,
html.page-booting body {
    background: #1e293b;
}

html.page-booting body > *:not(#page-boot):not(.page-transition-overlay):not(:where(.toast, .modal-overlay, .sp-report-overlay, .mobile-nav-backdrop, #sp-report-toast)) {
    opacity: 0 !important;
}

/* Globální page fade — výchozí zakrytí (fade-in po .loaded) */
.page-transition-overlay,
#page-boot {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    background: #1e293b;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    /* Rychlý, měkký ease-out — fade in i fade out overlaye */
    transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.18s linear;
}

.page-transition-overlay.loaded,
#page-boot.loaded,
#page-boot.is-done {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.page-boot-spinner,
.page-transition-spinner {
    width: 2.65rem;
    height: 2.65rem;
    box-sizing: border-box;
    border-radius: 999px;
    border: 3px solid rgba(148, 163, 184, 0.35);
    border-top-color: #38bdf8;
    animation: page-boot-spin 0.7s linear infinite;
}

/* Fade-in jen hlavní obsah — bez toastů (prázdný toast = černá bublina) */
html.page-ready:not(.page-ready-settled) body > *:not(#page-boot):not(.page-transition-overlay):not(:where(.toast, .modal-overlay, .sp-report-overlay, .mobile-nav-backdrop, #sp-report-toast)) {
    animation: page-boot-fade-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Po doběhnutí animace zruš fill, ať CSS toastů znovu řídí opacity */
html.page-ready-settled body > * {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .page-boot-spinner,
    .page-transition-spinner {
        animation-duration: 1.4s;
    }

    .page-transition-overlay,
    #page-boot {
        transition-duration: 0.08s;
    }

    html.page-ready:not(.page-ready-settled) body > *:not(#page-boot):not(.page-transition-overlay):not(:where(.toast, .modal-overlay, .sp-report-overlay, .mobile-nav-backdrop, #sp-report-toast)) {
        animation-duration: 0.08s;
    }
}