/* /Components/Layout/NotificationBell.razor.rz.scp.css */
.notification-bell[b-uk8i8chckf] {
    display: flex;
    align-items: center;
}

/* MudBlazor hangs the badge at top: -8px, which assumes a full-height app bar.
   Ours is Dense — 48px — and the bell sits at the very top of it, so the count
   was drawn above the top edge of the window and cut in half. Pulling it back
   inside the bar is the whole fix; the horizontal placement is left alone. */
.notification-bell[b-uk8i8chckf]  .mud-badge-wrapper.mud-badge-top .mud-badge {
    top: 4px;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-bhpbd1pxnr],
.components-reconnect-repeated-attempt-visible[b-bhpbd1pxnr],
.components-reconnect-failed-visible[b-bhpbd1pxnr],
.components-pause-visible[b-bhpbd1pxnr],
.components-resume-failed-visible[b-bhpbd1pxnr],
.components-rejoining-animation[b-bhpbd1pxnr] {
    display: none;
}

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

/* Colours come from the MudBlazor palette so the dialog follows the app's
   theme, with the dark palette's own values as fallbacks: the circuit is down
   when this shows, and the theme provider may not have rendered its variables.
   MudBlazor ships its own '#components-reconnect-modal' rule that forces the
   page background and sets no text colour at all — on a dark theme that leaves
   black text on a near-black panel, which is what this file exists to fix. Its
   !important can only be answered in kind. */
#components-reconnect-modal[b-bhpbd1pxnr] {
    background-color: var(--mud-palette-surface, #1e1e2e) !important;
    color: var(--mud-palette-text-primary, #e0e0e0);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--mud-palette-primary, #7c4dff);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-bhpbd1pxnr 0.5s both;
}

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

#components-reconnect-modal[b-bhpbd1pxnr]::backdrop {
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(2px);
    animation: components-reconnect-modal-fadeInOpacity-b-bhpbd1pxnr 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

#components-reconnect-modal p[b-bhpbd1pxnr] {
    margin: 0;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary, #e0e0e0);
}

/* The countdown is the one thing worth reading twice. */
#components-seconds-to-next-attempt[b-bhpbd1pxnr] {
    font-weight: 600;
    color: var(--mud-palette-primary, #7c4dff);
}

#components-reconnect-modal.components-reconnect-failed p[b-bhpbd1pxnr],
#components-reconnect-modal.components-reconnect-resume-failed p[b-bhpbd1pxnr] {
    color: var(--mud-palette-error, #f44336);
}

#components-reconnect-modal button[b-bhpbd1pxnr] {
    border: 0;
    background-color: var(--mud-palette-primary, #7c4dff);
    color: var(--mud-palette-primary-text, #fff);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 8px 28px;
    border-radius: 4px;
    cursor: pointer;
    /* MudBlazor forces 40px of margin on this button; the flex gap already
       spaces it. */
    margin: 0 !important;
}

    #components-reconnect-modal button:hover[b-bhpbd1pxnr] {
        background-color: var(--mud-palette-primary-darken, #5c2edb);
    }

    #components-reconnect-modal button:active[b-bhpbd1pxnr] {
        background-color: var(--mud-palette-primary, #7c4dff);
    }

    #components-reconnect-modal button:focus-visible[b-bhpbd1pxnr] {
        outline: 2px solid var(--mud-palette-primary-lighten, #9a75ff);
        outline-offset: 2px;
    }

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

    .components-rejoining-animation div[b-bhpbd1pxnr] {
        position: absolute;
        border: 3px solid var(--mud-palette-primary, #7c4dff);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-bhpbd1pxnr 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-bhpbd1pxnr {
    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;
    }
}