/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-d3ikeqv6f0] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-d3ikeqv6f0] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ================================================================
   شريطُ تنافر الإصدارات

   يزيح المحتوى ولا يطفو فوقه: التحذيرُ الذي يغطّي شيئًا يُغلَق ليُرى
   ما تحته، والمغلَقُ لا يحذّر. فإزاحتُه إقرارٌ بأنّه جزءٌ من الصفحة
   لا طارئٌ عليها.

   ولونُه ينقل الحالَ قبل قراءة الحرف: أحمرُ للتنافر المحقَّق، ورماديٌّ
   لتعذُّر القراءة — فالثانيةُ ليست عطلًا في التوافق بل جهلًا به، ولو
   حملت لونَ الأولى لأنذرت بما لم يثبت.

   ولا برتقاليّ.
   ================================================================ */

.ver-banner[b-d3ikeqv6f0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    border-bottom: 1px solid;
}

.ver-banner-mismatch[b-d3ikeqv6f0] {
    background: #FCEBEB;
    color: #A32D2D;
    border-bottom-color: #F7C1C1;
}

.ver-banner-unknown[b-d3ikeqv6f0] {
    background: #F1EFE8;
    color: #5F5E5A;
    border-bottom-color: #D3D1C7;
}

.ver-banner-text[b-d3ikeqv6f0] {
    flex: 1;
    min-width: 0;
}

.ver-banner-link[b-d3ikeqv6f0] {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
    font-weight: 600;
    flex-shrink: 0;
}

    .ver-banner-link:hover[b-d3ikeqv6f0] {
        opacity: 0.75;
    }

@media (max-width: 640px) {
    .ver-banner[b-d3ikeqv6f0] {
        padding: 0.55rem 0.9rem;
        font-size: 0.8rem;
        align-items: flex-start;
    }
}

/* ================================================================
   هويّةُ الرأس والقائمةُ المنسدلة

   سطرُ النطاق الفاعل: القراءةُ الوحيدةُ التي تُخبر «أين أنا الآن» —
   فموضعُه تحت الاسم والوظيفة، وحجمُه أصغر، ولونُه أخفت. ويلتفّ
   سطرين ثمّ يُقصّ: فأسماءُ الجهات طويلةٌ بطبعها، وسطرٌ واحدٌ مبتورٌ
   يُخفي ما يميّز الدفترَ عن أخيه.

   والطبقةُ الشفّافةُ خلف القائمة هي ما يغلقها بالنقر الخارجيّ. ولم
   نستعمل onfocusout لأنّه يقع قبل نقرة الخيار فيبتلع الاختيار —
   والطبقةُ تلتقط الخارجَ وحدَه فلا تسبق الداخل.
   ================================================================ */

.acct-wrap[b-d3ikeqv6f0] {
    position: relative;
}

.user-meta[b-d3ikeqv6f0] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    max-width: 200px;
}

.uz[b-d3ikeqv6f0] {
    font-size: 11px;
    line-height: 1.3;
    color: var(--muted, #8A93A2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    text-align: start;
}

.acct-head .tn[b-d3ikeqv6f0] {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted, #8A93A2);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* الطبقةُ الشفّافة: تغطّي اللوحَ كلَّه فيغلق النقرُ في أيّ موضعٍ خارج القائمة */
.acct-backdrop[b-d3ikeqv6f0] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: transparent;
}

.acct-menu[b-d3ikeqv6f0] {
    z-index: 1201;
}

@media (max-width: 640px) {
    .user-meta[b-d3ikeqv6f0] {
        max-width: 130px;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-r1htou0c9o],
.components-reconnect-repeated-attempt-visible[b-r1htou0c9o],
.components-reconnect-failed-visible[b-r1htou0c9o],
.components-pause-visible[b-r1htou0c9o],
.components-resume-failed-visible[b-r1htou0c9o],
.components-rejoining-animation[b-r1htou0c9o] {
    display: none;
}

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


#components-reconnect-modal[b-r1htou0c9o] {
    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-r1htou0c9o 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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