@import 'Fawri.SmartBilling.Web.Client.g0d3vwaolf.bundle.scp.css';

/* /Components/Account/Login.razor.rz.scp.css */
/* DV.c — split sign-in: gradient brand panel (the one bold move) + a quiet form column.
   Web/Components/Account/Login.razor.css — F.5 block (replaces the old centred .login). */
.login-shell[b-vnofboy4vv]{ display:grid; grid-template-columns:1.05fr 0.95fr; min-block-size:100vh; }
.login-brand[b-vnofboy4vv]{ position:relative; overflow:hidden; padding:var(--space-2xl); color:var(--color-text-on-primary);
  background:radial-gradient(120% 90% at 15% 10%, var(--b3g-blue-600), var(--b3g-blue-900) 70%);
  display:flex; flex-direction:column; justify-content:space-between; }
.login-brand__title[b-vnofboy4vv]{ font-size:var(--text-3xl); line-height:var(--leading-tight); max-inline-size:15ch; }
.login-col[b-vnofboy4vv]{ display:flex; align-items:center; justify-content:center; padding:var(--space-2xl);
  background:var(--color-bg-surface); }
.login-col__box[b-vnofboy4vv]{ inline-size:100%; max-inline-size:22rem; }
@media (max-width:48rem){ .login-shell[b-vnofboy4vv]{ grid-template-columns:1fr; } .login-brand[b-vnofboy4vv]{ display:none; } }

/* The brand panel's gradient is theme-invariant (deep B3G blue in light AND dark), so its
   on-primary text must stay light in every theme — bind the role token on this surface only.
   Keeps WCAG AA (white ≥4.7:1 on blue-600→900) without reintroducing a hex literal. */
.login-brand[b-vnofboy4vv]{ --color-text-on-primary: var(--b3g-neutral-0); }

.login-brand__head[b-vnofboy4vv]{ display:flex; flex-direction:column; gap:var(--space-md); }
/* .login-brand__head is a flex column (cross axis = horizontal); its default align-items:stretch would
   stretch this auto-width img to the full panel width and distort it. Pin it to the start so width:auto
   stays proportional to the 2.5rem height. */
.login-brand__logo[b-vnofboy4vv]{ block-size:2.5rem; inline-size:auto; align-self:flex-start; }
.login-brand__eyebrow[b-vnofboy4vv]{ font-size:var(--text-xs); font-weight:var(--font-weight-semibold);
  letter-spacing:0.08em; }
.login-brand__mid[b-vnofboy4vv]{ display:flex; flex-direction:column; gap:var(--space-lg); }
.login-brand__spine[b-vnofboy4vv]{ display:flex; gap:var(--space-2xs); }
.login-brand__seg[b-vnofboy4vv]{ block-size:0.375rem; inline-size:2.5rem; border-radius:var(--radius-full); }
.login-brand__seg--blue[b-vnofboy4vv]{ background:var(--b3g-blue-300); }
.login-brand__seg--green[b-vnofboy4vv]{ background:var(--b3g-green-500); }
.login-brand__seg--orange[b-vnofboy4vv]{ background:var(--b3g-orange-500); }
.login-brand__footer[b-vnofboy4vv]{ font-size:var(--text-sm); }

.login-col__switchers[b-vnofboy4vv]{ display:flex; flex-wrap:wrap; gap:var(--space-sm);
  justify-content:flex-end; margin-block-end:var(--space-lg); }

.login__title[b-vnofboy4vv] {
    margin-block-end: var(--space-lg);
}

.login__error[b-vnofboy4vv] {
    padding: var(--space-sm);
    margin-block-end: var(--space-md);
    border-radius: var(--radius-md);
    background-color: var(--color-error-subtle);
    color: var(--color-error);
}

/* §C2 single-session logout: informational, not an error — neutral surface. */
.login__notice[b-vnofboy4vv] {
    padding: var(--space-sm);
    margin-block-end: var(--space-md);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-subtle);
    color: var(--color-text-primary);
}

.login__field[b-vnofboy4vv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-block-end: var(--space-md);
}

.login__label[b-vnofboy4vv] {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

.login__input[b-vnofboy4vv] {
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
}

.login__forgot[b-vnofboy4vv] {
    align-self: flex-start;
    margin-block-start: var(--space-3xs);
    font-size: var(--text-sm);
    color: var(--color-text-link);
    text-decoration: none;
}

.login__forgot:hover[b-vnofboy4vv] {
    text-decoration: underline;
}

.login__submit[b-vnofboy4vv] {
    inline-size: 100%;
    min-block-size: var(--control-height-md);
    margin-block-start: var(--space-sm);
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.login__submit:hover[b-vnofboy4vv] {
    background-color: var(--color-primary-hover);
}

/* CR-UX.1 — discreet "reset app" recovery link for a stale WASM cache. */
.login__reset[b-vnofboy4vv] {
    display: block;
    inline-size: 100%;
    margin-block-start: var(--space-md);
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    text-align: center;
    text-decoration: underline;
    cursor: pointer;
}

.login__reset:hover[b-vnofboy4vv] {
    color: var(--color-text-primary);
}
/* /Components/Account/Logout.razor.rz.scp.css */
.logout[b-1mvkvb4zed] {
    max-inline-size: 28rem;
    margin-inline: auto;
    padding: var(--space-xl);
}

.logout__title[b-1mvkvb4zed] {
    margin-block-end: var(--space-lg);
}

.logout__submit[b-1mvkvb4zed] {
    min-block-size: var(--control-height-md);
    padding-inline: var(--space-lg);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.logout__submit:hover[b-1mvkvb4zed] {
    background-color: var(--color-bg-subtle);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-15fet844jw],
.components-reconnect-repeated-attempt-visible[b-15fet844jw],
.components-reconnect-failed-visible[b-15fet844jw],
.components-pause-visible[b-15fet844jw],
.components-resume-failed-visible[b-15fet844jw],
.components-rejoining-animation[b-15fet844jw] {
    display: none;
}

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


#components-reconnect-modal[b-15fet844jw] {
    background-color: var(--color-text-on-primary);
    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-15fet844jw 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-15fet844jw] {
    border: 0;
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-15fet844jw] {
        background-color: var(--color-primary-hover);
    }

    #components-reconnect-modal button:active[b-15fet844jw] {
        background-color: var(--color-primary);
    }

.components-rejoining-animation[b-15fet844jw] {
    position: relative;
    inline-size: 5rem;
    block-size: 5rem;
}

    .components-rejoining-animation div[b-15fet844jw] {
        position: absolute;
        border: 3px solid var(--color-focus-ring);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-15fet844jw 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

/* Concentric expanding rings (logical insets so it mirrors correctly in RTL). */
@keyframes components-rejoining-animation-b-15fet844jw {
    0% {
        inset-block-start: 2.5rem;
        inset-inline-start: 2.5rem;
        inline-size: 0;
        block-size: 0;
        opacity: 0;
    }

    4.9% {
        inset-block-start: 2.5rem;
        inset-inline-start: 2.5rem;
        inline-size: 0;
        block-size: 0;
        opacity: 0;
    }

    5% {
        inset-block-start: 2.5rem;
        inset-inline-start: 2.5rem;
        inline-size: 0;
        block-size: 0;
        opacity: 1;
    }

    100% {
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 5rem;
        block-size: 5rem;
        opacity: 0;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page[b-v637y9ci4d] {
    padding: var(--space-lg);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    background-color: var(--color-error-subtle);
    max-inline-size: 60ch;
}

.error-page__title[b-v637y9ci4d] {
    color: var(--color-error);
    margin-block-end: var(--space-xs);
}

.error-page__message[b-v637y9ci4d] {
    color: var(--color-text-primary);
}

.error-page__request[b-v637y9ci4d] {
    margin-block-start: var(--space-sm);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home[b-iphunn67tr] {
    padding-block: var(--space-lg);
}

.home__title[b-iphunn67tr] {
    margin-block-end: var(--space-sm);
}

.home__intro[b-iphunn67tr] {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    max-inline-size: 60ch;
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found[b-mhvkrj76f1] {
    padding-block: var(--space-lg);
}

.not-found__title[b-mhvkrj76f1] {
    margin-block-end: var(--space-sm);
}

.not-found__message[b-mhvkrj76f1] {
    color: var(--color-text-secondary);
    max-inline-size: 60ch;
}

.not-found__request[b-mhvkrj76f1] {
    margin-block-start: var(--space-md);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}