/* ============================================================
   Path: src/RichRich.Web/wwwroot/css/reconnect.css
   Session: J-34 (reconnect i18n)
   LastModified: 2026-05-23
   Module: Web — Custom bilingual Blazor reconnect modal
   ============================================================
   🆕 NEW FILE — J-34

   يستبدل واجهة إعادة الاتصال الافتراضية في Blazor Server (التي نصوصها
   إنجليزية ثابتة: "Rejoin failed…") بواجهة مخصّصة ثنائية اللغة تطابق
   هوية التطبيق.

   كيف يعمل: Blazor يضيف/يزيل كلاسات على #components-reconnect-modal:
     .components-reconnect-show     → الاتصال انقطع، يحاول
     .components-reconnect-failed   → فشلت محاولة، يعيد
     .components-reconnect-rejected → رُفض، يحتاج reload
   نُظهر النص المناسب لكل حالة عبر هذه الكلاسات، والنص نفسه (ar/en)
   مُحقَّن server-side في App.razor حسب الـ culture cookie.

   المرجع:
   https://learn.microsoft.com/aspnet/core/blazor/fundamentals/signalr#reflect-the-connection-state-in-the-ui
   ============================================================ */

/* الحاوية مخفية افتراضياً — Blazor يُظهرها بإضافة كلاس الحالة */
.reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 12000;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

/* أي حالة من حالات Blazor تجعل الحاوية مرئية */
.reconnect-modal.components-reconnect-show,
.reconnect-modal.components-reconnect-failed,
.reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.reconnect-card {
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: 0 12px 40px -8px rgba(15, 23, 42, 0.3);
    max-width: 360px;
    border-block-start: 4px solid var(--p, #1f6b3a);
}

/* السبينر بلون الـ brand */
.reconnect-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 1.1rem;
    border: 3px solid var(--p-light, #e8f5ee);
    border-top-color: var(--p, #1f6b3a);
    border-radius: 50%;
    animation: reconnectSpin 0.8s linear infinite;
}

@keyframes reconnectSpin {
    to { transform: rotate(360deg); }
}

.reconnect-text {
    margin: 0;
    font-family: 'Tajawal', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--t1, #0f172a);
    line-height: 1.6;
    /* كل النصوص مخفية، ونُظهر المناسب حسب حالة Blazor */
    display: none;
}

/* اختيار النص حسب حالة الـ modal */
.components-reconnect-show .reconnect-text-show { display: block; }
.components-reconnect-failed .reconnect-text-failed { display: block; }
.components-reconnect-rejected .reconnect-text-rejected { display: block; }

/* في حالة "failed" أيضاً نُبقي السبينر يدور (يحاول)، وفي "rejected" نوقفه */
.components-reconnect-rejected .reconnect-spinner {
    animation: none;
    border-top-color: var(--err, #ef4444);
    border-color: color-mix(in srgb, var(--err, #ef4444) 25%, transparent);
    border-top-color: var(--err, #ef4444);
}

.reconnect-reload-btn {
    display: block;
    margin: 1rem auto 0;
    background: var(--p, #1f6b3a);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 0.55rem 1.4rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.reconnect-reload-btn:hover { filter: brightness(1.08); }