/* /Components/Layout/MainLayout.razor.rz.scp.css */
/*
   The circuit-failure bar. Blazor's template ships this as `lightyellow`, which is the one
   surface in the panel that never got looked at — it sits at the bottom of the window and only
   appears when the SignalR circuit has died, which is exactly the moment the operator needs to
   believe what they are reading.

   This is scoped CSS (`::deep`-less, compiled to an attribute selector), so it outranks the
   #blazor-error-ui rule in wwwroot/app.css no matter which loads first. The two must therefore
   agree; they are both red-on-white now. Do not restyle one without the other.

   The literal colours are deliberate. Scoped stylesheets are collected into
   Waseeni.Admin.styles.css, which is served without app.css's :root — so var(--red) here
   resolves to nothing and the bar renders transparent.
*/
#blazor-error-ui[b-5l2u0x2qg8] {
    color-scheme: light only;
    background: #c42b2b;   /* --red */
    color: #fff;
    bottom: 0;
    box-shadow: 0 -1px 3px rgba(16, 26, 51, 0.25);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

    #blazor-error-ui a[b-5l2u0x2qg8],
    #blazor-error-ui .reload[b-5l2u0x2qg8] {
        color: #fff;
    }

    #blazor-error-ui .dismiss[b-5l2u0x2qg8] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-5xioft06fe],
.components-reconnect-repeated-attempt-visible[b-5xioft06fe],
.components-reconnect-failed-visible[b-5xioft06fe],
.components-pause-visible[b-5xioft06fe],
.components-resume-failed-visible[b-5xioft06fe],
.components-rejoining-animation[b-5xioft06fe] {
    display: none;
}

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


/*
   Scoped, so it beats wwwroot/app.css's rule for the same element — and it is served without
   app.css's :root, so every colour here is a literal. The values are the blue identity's;
   Blazor's template ships generic greys and a #6b9ed2 button that belongs to no product.
*/
#components-reconnect-modal[b-5xioft06fe] {
    background-color: #fff;
    color: #101a33;   /* --ink */
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid #ccd3ec;   /* --rule-2 */
    border-radius: 8px;
    box-shadow: 0 3px 8px 2px rgba(16, 26, 51, 0.22);
    font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-5xioft06fe 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-5xioft06fe]::backdrop {
    background-color: rgba(16, 26, 51, 0.45);
    animation: components-reconnect-modal-fadeInOpacity-b-5xioft06fe 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-5xioft06fe] {
    border: 0;
    background-color: #0a5af9;   /* --action */
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 24px;
    border-radius: 8px;
}

    #components-reconnect-modal button:hover[b-5xioft06fe] {
        background-color: #0847c6;   /* --action-deep */
    }

    #components-reconnect-modal button:active[b-5xioft06fe] {
        background-color: #0a5af9;
    }

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

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

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

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