/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* #blazor-error-ui er flyttet til den globale app.css, så den også gælder PublicLayout (den
   offentlige statusside). En scoped regel her ramte kun MainLayout og lod bjælken stå permanent
   synlig på statussiden. Denne fil holdes tom med vilje. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-w32mk473di],
.components-reconnect-repeated-attempt-visible[b-w32mk473di],
.components-reconnect-failed-visible[b-w32mk473di],
.components-pause-visible[b-w32mk473di],
.components-resume-failed-visible[b-w32mk473di],
.components-rejoining-animation[b-w32mk473di] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-w32mk473di],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-w32mk473di],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-w32mk473di],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-w32mk473di],
#components-reconnect-modal.components-reconnect-retrying[b-w32mk473di],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-w32mk473di],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-w32mk473di],
#components-reconnect-modal.components-reconnect-failed[b-w32mk473di],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-w32mk473di] {
    display: block;
}


#components-reconnect-modal[b-w32mk473di] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-w32mk473di 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-w32mk473di 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-w32mk473di 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-w32mk473di]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-w32mk473di 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-w32mk473di {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-w32mk473di {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-w32mk473di {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-w32mk473di] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-w32mk473di] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-w32mk473di] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-w32mk473di] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-w32mk473di] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-w32mk473di] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-w32mk473di] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-w32mk473di 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-w32mk473di] {
            animation-delay: -0.5s;
        }

/* Nedsat bevægelse: ringene bliver til en stillestående prik.
   app.css sætter globalt animation-duration til 0,001 ms under
   prefers-reduced-motion. Ripplen starter på 0×0 px, så den lander med det samme
   på en 3 px blå prik — præcis dét, man ser på Windows, når «Animationseffekter»
   er slået fra under Tilgængelighed. Og det er den værste plads at miste
   fremdriftsvisning: brugeren kan ikke se, om der stadig forsøges, eller om det
   er gået i stå.

   En opacitetspuls i stedet. Den flytter ikke noget på skærmen og udløser derfor
   ikke det, reduced-motion er sat i verden for at beskytte imod — men den viser
   stadig, at der sker noget. !important er nødvendigt for at slå den globale regel,
   der også bruger !important. */
@media (prefers-reduced-motion: reduce) {
    .components-rejoining-animation div[b-w32mk473di] {
        top: 0;
        left: 0;
        width: 74px;
        height: 74px;
        opacity: 1;
        animation-name: components-rejoining-puls-b-w32mk473di !important;
        animation-duration: 1.6s !important;
        animation-iteration-count: infinite !important;
        animation-timing-function: ease-in-out !important;
    }

    /* Den anden ring er kun til for at give ripplen dybde. Uden bevægelse ville
       to ens cirkler oven på hinanden bare se ud som én kraftigere streg. */
    .components-rejoining-animation div:nth-child(2)[b-w32mk473di] {
        display: none;
    }
}

@keyframes components-rejoining-puls-b-w32mk473di {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

@keyframes components-rejoining-animation-b-w32mk473di {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}