/*
   AdminSys.Testen – alleen wat de testtool zelf nodig heeft; de huisstijl staat in huisstijl.css (AdminSys.Web.Gedeeld).
   Opmaak die bij één component hoort, staat in dat component (Component.razor.css).
*/

.blazor-error-boundary::after {
    content: "Er is een fout opgetreden.";
}

/* Het opstarten van de app (TestLayout): weg zodra de pagina iets toont; pas na een korte pauze zichtbaar, zodat een snelle start niet flitst */
.opstarten {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 12vh;
    animation: opstarten-tonen .2s .15s both;
}

    .opstarten:not(:last-child) {
        display: none;
    }

    .opstarten > .kaart {
        align-self: stretch;
    }

.opstarten-merk {
    width: 64px;
    height: 64px;
    animation: opstarten-puls 1.4s ease-in-out infinite;
}

/* De voortgang van het laden: Blazor zet --blazor-load-percentage tijdens het downloaden van WebAssembly */
.opstarten-voortgang {
    width: 220px;
    max-width: 60%;
    height: 4px;
    border-radius: 2px;
    background: var(--oppervlak-2);
    overflow: hidden;
}

    .opstarten-voortgang > span {
        display: block;
        width: var(--blazor-load-percentage, 0%);
        height: 100%;
        background: var(--pk-groen);
        transition: width .2s;
    }

@keyframes opstarten-tonen {
    from {
        opacity: 0;
    }
}

@keyframes opstarten-puls {
    50% {
        opacity: .55;
        transform: scale(.94);
    }
}

@media (prefers-reduced-motion: reduce) {
    .opstarten,
    .opstarten-merk {
        animation: none;
    }
}

/* Het merkteken boven een lege lijst (Start) */
.leeg-merk {
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
}