/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Shell styling lives in wwwroot/app.css (global, uses logical properties for RTL).
   The Blazor #blazor-error-ui rules also moved there so they apply to the element,
   which is rendered outside this component's scoped markup. Intentionally empty. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-v31tb94kbg],
.components-reconnect-repeated-attempt-visible[b-v31tb94kbg],
.components-reconnect-failed-visible[b-v31tb94kbg],
.components-pause-visible[b-v31tb94kbg],
.components-resume-failed-visible[b-v31tb94kbg],
.components-rejoining-animation[b-v31tb94kbg] {
    display: none;
}

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


#components-reconnect-modal[b-v31tb94kbg] {
    background-color: white;
    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-v31tb94kbg 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-v31tb94kbg] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-v31tb94kbg] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-v31tb94kbg] {
        background-color: #6b9ed2;
    }

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

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

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

@keyframes components-rejoining-animation-b-v31tb94kbg {
    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;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Premium centered login — teal-green + violet brand, self-contained, theme-aware.
   Uses logical properties so it flips under RTL. */

.login-wrap[b-xn1pmljx3o] {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 15% 0%, rgba(14, 168, 133, .10), transparent 60%),
        linear-gradient(135deg, #eef7f4 0%, #f3f6fb 50%, #f0edfb 100%);
    font-family: var(--font, 'Cairo', 'Inter', 'Segoe UI', Tahoma, sans-serif);
    color: var(--text, #0f2136);
}

/* ---- Brand panel ---- */
.login-brand[b-xn1pmljx3o] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 40px 56px;
}

.brand-top[b-xn1pmljx3o] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-shield[b-xn1pmljx3o] {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0ea885, #6c5ce7);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(14, 168, 133, .32);
}

.brand-name[b-xn1pmljx3o] {
    font-weight: 800;
    font-size: 19px;
    line-height: 1.15;
    color: #0f2136;
}

.brand-tag[b-xn1pmljx3o] {
    font-size: 12.5px;
    color: #6b7d92;
    margin-top: 3px;
}

.brand-mid[b-xn1pmljx3o] {
    margin-top: auto;
    margin-bottom: auto;
}

.brand-mid h1[b-xn1pmljx3o] {
    font-size: 44px;
    font-weight: 800;
    color: #0d2b3e;
    margin: 0;
    letter-spacing: -1px;
    outline: none;
}

.brand-mid p[b-xn1pmljx3o] {
    font-size: 16px;
    color: #4c6072;
    margin-top: 16px;
    max-width: 380px;
    line-height: 1.55;
}

/* ---- Login card ---- */
.login-panel[b-xn1pmljx3o] {
    display: grid;
    place-items: center;
    padding: 32px;
}

.login-card[b-xn1pmljx3o] {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 28px;
    padding: 44px 48px;
    box-shadow: 0 40px 100px rgba(15, 33, 54, .18);
    animation: login-rise-b-xn1pmljx3o .5s cubic-bezier(.2, .7, .2, 1) both;
}

.login-lang[b-xn1pmljx3o] {
    position: absolute;
    top: 22px;
    inset-inline-end: 26px;
    display: inline-flex;
    gap: 4px;
    background: #f6f8fa;
    border: 1px solid #e4ebf1;
    border-radius: 20px;
    padding: 4px;
}

.login-lang a[b-xn1pmljx3o] {
    padding: 4px 11px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 800;
    color: #6b7d92;
    text-decoration: none;
}

.login-lang a.on[b-xn1pmljx3o] {
    background: #e2f5ef;
    color: #0a7a5d;
}

.login-logo[b-xn1pmljx3o] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    font-size: 26px;
    font-weight: 800;
    background: radial-gradient(circle at 50% 40%, #e5f6f1, #eef2f8);
    color: #0ea885;
}

.login-card h2[b-xn1pmljx3o] {
    text-align: center;
    font-size: 24px;
    font-weight: 800;
    color: #0f2136;
    margin: 0;
}

.login-subtitle[b-xn1pmljx3o] {
    text-align: center;
    color: #6b7d92;
    font-size: 13px;
    margin: 6px 0 16px;
}

.login-alert[b-xn1pmljx3o] {
    background: #fdeceb;
    color: #c0392b;
    border: 1px solid #f6c9c5;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 13px;
    margin-bottom: 16px;
    text-align: center;
}

.lf-label[b-xn1pmljx3o] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: #3a4c60;
    margin: 10px 0 5px;
}

.lf-wrap[b-xn1pmljx3o] {
    position: relative;
    display: flex;
    align-items: center;
}

.lf-ic[b-xn1pmljx3o] {
    position: absolute;
    inset-inline-start: 14px;
    color: #93a3ba;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.lf[b-xn1pmljx3o] {
    width: 100%;
    height: 46px;
    border: 1px solid #e4ebf1;
    border-radius: 13px;
    background: #f8fafb;
    padding-inline: 44px 44px;
    font-size: 14px;
    color: #0f2136;
    outline: none;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.lf:focus[b-xn1pmljx3o] {
    border-color: #0ea885;
    box-shadow: 0 0 0 4px rgba(14, 168, 133, .14);
    background: #fff;
}

.lf:hover:not(:focus)[b-xn1pmljx3o] {
    border-color: #cfdae2;
}

.lf-eye[b-xn1pmljx3o] {
    position: absolute;
    inset-inline-end: 12px;
    background: none;
    border: none;
    color: #93a3ba;
    cursor: pointer;
    display: grid;
    place-items: center;
    padding: 6px;
}

.lf-row[b-xn1pmljx3o] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0 16px;
}

.lf-remember[b-xn1pmljx3o] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #3a4c60;
    cursor: pointer;
}

.lf-remember input[b-xn1pmljx3o] {
    width: 17px;
    height: 17px;
    accent-color: #0ea885;
}

.login-submit[b-xn1pmljx3o] {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 13px;
    font-family: inherit;
    background: linear-gradient(135deg, #0ea885, #12b892);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 12px 26px rgba(14, 168, 133, .38);
    transition: transform .1s, box-shadow .15s;
}

.login-submit:hover[b-xn1pmljx3o] {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(14, 168, 133, .48);
}

.login-submit:active[b-xn1pmljx3o] {
    transform: translateY(0);
}

.login-credit[b-xn1pmljx3o] {
    text-align: center;
    font-size: 12px;
    color: #8595a9;
    margin-top: 16px;
}

.login-credit b[b-xn1pmljx3o] {
    color: #6c5ce7;
    font-weight: 700;
}

@keyframes login-rise-b-xn1pmljx3o {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .login-card[b-xn1pmljx3o] { animation: none; }
}

@media (max-width: 900px) {
    .login-wrap[b-xn1pmljx3o] { grid-template-columns: 1fr; }
    .login-brand[b-xn1pmljx3o] { display: none; }
    .login-panel[b-xn1pmljx3o] { padding: 18px; }
}

/* ---- Dark mode (data-theme on <html>) ---- */
[data-theme="dark"] .login-wrap[b-xn1pmljx3o] {
    background:
        radial-gradient(1200px 600px at 15% 0%, rgba(47, 208, 172, .08), transparent 60%),
        linear-gradient(135deg, #0a111f 0%, #0c1424 50%, #10142a 100%);
    color: #e6edf5;
}

[data-theme="dark"] .brand-name[b-xn1pmljx3o],
[data-theme="dark"] .brand-mid h1[b-xn1pmljx3o],
[data-theme="dark"] .login-card h2[b-xn1pmljx3o] { color: #e6edf5; }

[data-theme="dark"] .brand-tag[b-xn1pmljx3o],
[data-theme="dark"] .brand-mid p[b-xn1pmljx3o] { color: #93a3ba; }

[data-theme="dark"] .login-card[b-xn1pmljx3o] {
    background: #111b2e;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

[data-theme="dark"] .login-lang[b-xn1pmljx3o] { background: #0e1626; border-color: #22304a; }
[data-theme="dark"] .login-lang a[b-xn1pmljx3o] { color: #93a3ba; }
[data-theme="dark"] .login-lang a.on[b-xn1pmljx3o] { background: rgba(47, 208, 172, .14); color: #2fd0ac; }
[data-theme="dark"] .login-logo[b-xn1pmljx3o] { background: radial-gradient(circle at 50% 40%, #16273a, #10192b); color: #2fd0ac; }
[data-theme="dark"] .lf-label[b-xn1pmljx3o] { color: #c2ccdb; }
[data-theme="dark"] .lf[b-xn1pmljx3o] { background: #0e1626; border-color: #22304a; color: #e6edf5; }
[data-theme="dark"] .lf:focus[b-xn1pmljx3o] { background: #111b2e; border-color: #2fd0ac; box-shadow: 0 0 0 4px rgba(47, 208, 172, .16); }
[data-theme="dark"] .lf:hover:not(:focus)[b-xn1pmljx3o] { border-color: #2b3a56; }
[data-theme="dark"] .lf-remember[b-xn1pmljx3o] { color: #c2ccdb; }
[data-theme="dark"] .login-alert[b-xn1pmljx3o] { background: #3a1a18; border-color: #5a2a26; color: #ff9b92; }

/* ============================================================================
   Pharmacy animation (brand panel): floating pills + grinding mortar & pestle
   + pulse rings + heartbeat line. Transform/opacity only; reduced-motion aware.
   ============================================================================ */
.login-brand[b-xn1pmljx3o] { position: relative; overflow: hidden; }
.brand-top[b-xn1pmljx3o], .brand-mid[b-xn1pmljx3o] { position: relative; z-index: 2; }

.pharma-scene[b-xn1pmljx3o] { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* ---- floating capsule pills + round tablets ---- */
.pill[b-xn1pmljx3o] {
    position: absolute;
    inset-block-end: -50px;
    width: 48px;
    height: 20px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg, var(--pa, #0ea885) 0 50%, #fff 50% 100%);
    box-shadow: inset 0 2px 3px rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(0, 0, 0, .07),
        0 8px 16px rgba(15, 33, 54, .12);
    animation: pill-float-b-xn1pmljx3o var(--dur, 18s) linear infinite;
    animation-delay: var(--dl, 0s);
}

.pill--round[b-xn1pmljx3o] {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85), var(--pa, #6c5ce7) 78%);
}

.pill--round[b-xn1pmljx3o]::before {
    content: '';
    position: absolute;
    inset-inline: 5px;
    inset-block-start: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, .6);
    border-radius: 2px;
}

.pill--1[b-xn1pmljx3o] { inset-inline-start: 12%; --pa: #0ea885; --dur: 17s; --dl: 0s;   --rot: 20deg; }
.pill--2[b-xn1pmljx3o] { inset-inline-start: 74%; --pa: #6c5ce7; --dur: 21s; --dl: 3s; }
.pill--3[b-xn1pmljx3o] { inset-inline-start: 40%; --pa: #f79009; --dur: 15s; --dl: 6s;   --rot: -15deg; }
.pill--4[b-xn1pmljx3o] { inset-inline-start: 86%; --pa: #2e90fa; --dur: 19s; --dl: 1.5s; }
.pill--5[b-xn1pmljx3o] { inset-inline-start: 24%; --pa: #12b892; --dur: 23s; --dl: 8s;   --rot: 35deg; }
.pill--6[b-xn1pmljx3o] { inset-inline-start: 58%; --pa: #8b7cf7; --dur: 18s; --dl: 4.5s; --rot: -28deg; }
.pill--7[b-xn1pmljx3o] { inset-inline-start: 6%;  --pa: #2e90fa; --dur: 20s; --dl: 10s; }

@keyframes pill-float-b-xn1pmljx3o {
    0%   { transform: translateY(0) rotate(var(--rot, 0deg)); opacity: 0; }
    12%  { opacity: .55; }
    88%  { opacity: .55; }
    100% { transform: translateY(-112vh) rotate(calc(var(--rot, 0deg) + 45deg)); opacity: 0; }
}

/* ---- central mortar & pestle emblem with pulse rings ---- */
.pharma-emblem[b-xn1pmljx3o] {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-end: 11%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    display: grid;
    place-items: center;
    color: #0ea885;
}

.mortar[b-xn1pmljx3o] { width: 98px; height: 98px; animation: mortar-bob-b-xn1pmljx3o 5s ease-in-out infinite; }
.mortar .bowl[b-xn1pmljx3o] { fill: currentColor; }
.mortar .bowl-top[b-xn1pmljx3o] { fill: #ffffff; opacity: .22; }
.mortar .pestle[b-xn1pmljx3o] {
    fill: currentColor;
    transform-box: fill-box;
    transform-origin: 50% 92%;
    animation: pestle-grind-b-xn1pmljx3o 3.2s ease-in-out infinite;
}

.ring[b-xn1pmljx3o] {
    position: absolute;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 2px solid #0ea885;
    opacity: 0;
    animation: ring-pulse-b-xn1pmljx3o 3.6s ease-out infinite;
}

.ring--2[b-xn1pmljx3o] { animation-delay: 1.8s; border-color: #6c5ce7; }

@keyframes mortar-bob-b-xn1pmljx3o { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pestle-grind-b-xn1pmljx3o { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-7deg); } }
@keyframes ring-pulse-b-xn1pmljx3o { 0% { transform: scale(.55); opacity: .5; } 100% { transform: scale(1.75); opacity: 0; } }

/* ---- heartbeat / EKG line ---- */
.ekg[b-xn1pmljx3o] { position: absolute; inset-inline: 0; inset-block-end: 5%; width: 100%; height: 40px; opacity: .5; }
.ekg path[b-xn1pmljx3o] {
    fill: none;
    stroke: #0ea885;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    animation: ekg-draw-b-xn1pmljx3o 3.8s linear infinite;
}

@keyframes ekg-draw-b-xn1pmljx3o { 0% { stroke-dashoffset: 340; } 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -340; } }

@media (prefers-reduced-motion: reduce) {
    .pill[b-xn1pmljx3o] { animation: none; opacity: .4; }
    .mortar[b-xn1pmljx3o], .mortar .pestle[b-xn1pmljx3o], .ring[b-xn1pmljx3o], .ekg path[b-xn1pmljx3o] { animation: none; }
    .ekg path[b-xn1pmljx3o] { stroke-dashoffset: 0; }
}

[data-theme="dark"] .pharma-emblem[b-xn1pmljx3o] { color: #2fd0ac; }
[data-theme="dark"] .ring[b-xn1pmljx3o] { border-color: #2fd0ac; }
[data-theme="dark"] .ring--2[b-xn1pmljx3o] { border-color: #8b7cf7; }
[data-theme="dark"] .ekg path[b-xn1pmljx3o] { stroke: #2fd0ac; }