/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* ── Dialog as full-viewport flex overlay ──────────────────────────────────────
   Blazor's runtime never calls showModal() itself — only our .razor.js handler
   does. We style the <dialog> as a viewport-spanning flex container so it looks
   correct in either mode (top-layer modal via showModal() or non-modal via just
   the [open] attribute). The inner div is the visible card.                    */
#components-reconnect-modal[b-48ypysyzq6] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 1rem;
    background-color: rgb(19 19 20 / 0.8);
    border: 0;
    color: inherit;
    z-index: 50;
}

    #components-reconnect-modal[open][b-48ypysyzq6] {
        display: flex;
        align-items: center;
        justify-content: center;
        animation: reconnect-fade-in-b-48ypysyzq6 0.5s ease-in-out 0.3s both;
    }

    /* Delay the fade-in so brief drops — e.g. a .NET graceful-shutdown blip
       where the first reconnect succeeds within ~200 ms — never visually
       surface. Matches stock Blazor's 0.3 s opening delay. */
    @keyframes reconnect-fade-in-b-48ypysyzq6 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* When showModal() runs, the dialog enters the top layer and the browser
       paints a separate ::backdrop element. The dialog itself already paints
       our overlay color, so neutralise ::backdrop to avoid stacking two
       semi-transparent layers (which would over-darken). */
    #components-reconnect-modal[b-48ypysyzq6]::backdrop {
        background-color: transparent;
    }

/* ── Visibility-toggle rule chain — uses ::deep so the scope attribute is only
   required on the dialog itself, not on each descendant. Blazor's scoped-CSS
   compiler appends [b-…] to the parent selector and leaves the descendants
   un-attributed, which is the contract we want when state classes drive child
   visibility from outside the .razor render tree.                              */
#components-reconnect-modal[b-48ypysyzq6]  .components-reconnect-first-attempt-visible,
#components-reconnect-modal[b-48ypysyzq6]  .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal[b-48ypysyzq6]  .components-reconnect-failed-visible,
#components-reconnect-modal[b-48ypysyzq6]  .components-pause-visible,
#components-reconnect-modal[b-48ypysyzq6]  .components-resume-failed-visible {
    display: none;
}

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

/* Blazor adds `retrying` without removing `show` once attempt > 1. Without this
   override both paragraphs would render at once. */
#components-reconnect-modal.components-reconnect-retrying[b-48ypysyzq6]  .components-reconnect-first-attempt-visible {
    display: none;
}

/* ── Rotating-ring spinner — mirrors Login's .signin-spinner pattern ────────── */
#components-reconnect-modal[b-48ypysyzq6]  .reconnect-spinner {
    width: 64px;
    height: 64px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: var(--color-primary);
    animation: reconnect-spin-b-48ypysyzq6 0.7s linear infinite;
}

@keyframes reconnect-spin-b-48ypysyzq6 {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Sign-in button loading state, extracted from Login.razor's inline <style> (ZEI-181).
   Scoped CSS so the full CSP needs no inline-style exception for these rules. The
   spinner mirrors ReconnectModal's .reconnect-spinner pattern. */
.signin .signin-loading-label[b-ol7yevgkwv],
.signin .signin-spinner[b-ol7yevgkwv] {
    display: none;
}

.signin.is-loading[b-ol7yevgkwv] {
    pointer-events: none;
    opacity: 0.7;
    cursor: progress;
}

    .signin.is-loading .signin-label[b-ol7yevgkwv] {
        display: none;
    }

    .signin.is-loading .signin-loading-label[b-ol7yevgkwv],
    .signin.is-loading .signin-spinner[b-ol7yevgkwv] {
        display: inline-block;
    }

.signin-spinner[b-ol7yevgkwv] {
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: signin-spin-b-ol7yevgkwv 0.7s linear infinite;
}

@keyframes signin-spin-b-ol7yevgkwv {
    to {
        transform: rotate(360deg);
    }
}