/* =================================================================
   SITE-SIGNALR.CSS — SignalR Status Banner
   Egitim Sosyal Tesisler Mudurlugu
   =================================================================
   v1.0 — _Layout.cshtml inline stillerinden çıkarıldı
   Multi-tab BroadcastChannel senkronizasyonu (Phase 7.1)
   ================================================================= */

/* -----------------------------------------------------------------
   1. BANNER — Fixed top, status indicator
   ----------------------------------------------------------------- */

.signalr-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky, 1020);
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: var(--elev-2);
}

.signalr-banner--connected {
    background: #10B981;
    color: var(--acik-metin, #FFFFFF);
}

.signalr-banner--reconnecting {
    background: #F59E0B;
    color: var(--ana-metin-rengi);
}

.signalr-banner--disconnected {
    background: #EF4444;
    color: var(--acik-metin, #FFFFFF);
}

.signalr-banner__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.signalr-banner__icon .spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

.signalr-banner__close {
    position: absolute;
    right: var(--space-3);
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: var(--space-1);
    line-height: 1;
}

.signalr-banner__close:hover {
    opacity: 0.85;
}

.signalr-banner__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* -----------------------------------------------------------------
   2. MULTI-TAB SENKRONIZASYON — sadece aktif tab gösterir
   ----------------------------------------------------------------- */

/* Aktif tab dışındaki banner'lar gizli (BroadcastChannel üzerinden) */
body:not([data-tab-active="true"]) .signalr-banner {
    display: none;
}

/* -----------------------------------------------------------------
   3. IMPERSONATION BANNER — Yönetici taklit modu
   ----------------------------------------------------------------- */

.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #DC2626;
    color: var(--acik-metin, #FFFFFF);
    padding: var(--space-3) var(--space-5);
    text-align: center;
    font-weight: 600;
    z-index: var(--z-sticky, 1020);
    box-shadow: var(--elev-2);
}

.impersonation-banner__stop-btn {
    background: var(--acik-metin, #FFFFFF);
    color: #DC2626;
    border: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 600;
    margin-left: var(--space-3);
    cursor: pointer;
    min-height: var(--space-11);
}

.impersonation-banner__stop-btn:hover {
    background: var(--surface-2);
}

.impersonation-banner__stop-btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------
   4. QR MODAL — Manuel giriş için
   ----------------------------------------------------------------- */

.qr-modal {
    position: fixed;
    bottom: var(--space-20);
    right: var(--space-6);
    width: 280px;
    background: var(--surface-1);
    border-radius: var(--radius-bento);
    box-shadow: var(--elev-4);
    padding: var(--space-5);
    z-index: var(--z-modal, 1050);
}

.qr-modal__title {
    font-weight: 700;
    margin: 0 0 var(--space-3);
    font-size: 0.95rem;
}

.qr-modal__close {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    background: transparent;
    border: none;
    color: var(--ikincil-metin);
    cursor: pointer;
    width: var(--space-11);
    height: var(--space-11);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qr-modal__close:hover {
    background: var(--surface-2);
}

.qr-modal__close:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------
   5. WCAG 2.2 AA
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .signalr-banner,
    .impersonation-banner,
    .qr-modal {
        transition: none !important;
    }
}