@import '_content/Blazicons/Blazicons.886t4n1lry.bundle.scp.css';

/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Blazor bağlantı kopması diyaloğu — Vault modal diline hizalanmış, tema uyumlu sürüm.

   Not: Bu diyalog devre (circuit) koptuğunda gösterildiği için SfDialog/Vault bileşeni
   olamaz; native <dialog> + saf CSS olmak zorunda. Bu yüzden Vault'un GÖRSEL dili
   (16px köşe, aynı gölge, is-sky / is-rose aksan aileleri, aynı primary buton) app.css
   token'ları üzerinden yeniden kurulmuştur — yüzey ve metin renkleri
   [data-bs-theme="dark"] ile otomatik döner.

   Renk dili: durum rengi (halka + ikon + geri sayım) mavi -> kırmızı olarak durumu
   anlatır; buton her zaman Vault primary mavisidir, çünkü "Tekrar Dene" güvenli bir
   eylemdir, yıkıcı bir eylem değil. */

/* ─── Durum görünürlüğü (Blazor'ın beklediği sözleşme) ─────────────────────── */
.components-reconnect-first-attempt-visible[b-mzcemie4t6],
.components-reconnect-repeated-attempt-visible[b-mzcemie4t6],
.components-reconnect-failed-visible[b-mzcemie4t6],
.components-pause-visible[b-mzcemie4t6],
.components-resume-failed-visible[b-mzcemie4t6],
.components-rejoining-animation[b-mzcemie4t6] {
    display: none;
}

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

/* Blazor durum sınıflarını değiştirmez, ÜST ÜSTE EKLER: "show" -> "show retrying" ->
   "show retrying failed". Yukarıdaki kurallar tek başına kalırsa üç mesaj aynı anda
   görünür. Bu yüzden ileri bir duruma geçildiğinde önceki durumun metni gizlenir.
   Seçiciler p ile daraltılmıştır: butonlar da aynı görünürlük sınıflarını taşır. */
#components-reconnect-modal.components-reconnect-retrying p.components-reconnect-first-attempt-visible[b-mzcemie4t6],
#components-reconnect-modal.components-reconnect-failed p.components-reconnect-first-attempt-visible[b-mzcemie4t6],
#components-reconnect-modal.components-reconnect-failed p.components-reconnect-repeated-attempt-visible[b-mzcemie4t6],
#components-reconnect-modal.components-reconnect-failed .components-rejoining-animation[b-mzcemie4t6] {
    display: none;
}

/* ─── Diyalog kabuğu ───────────────────────────────────────────────────────── */
#components-reconnect-modal[b-mzcemie4t6] {
    /* Durum aksanı — Vault is-sky ailesi. Fallback'ler app.css hiç yüklenemezse diye. */
    --rc-accent:      #0284c7;
    --rc-accent-lite: #0ea5e9;
    --rc-soft:        rgba(2, 132, 199, .12);
    --rc-icon:        var(--rc-accent);

    /* Yüzey ve metin — tema token'ları */
    --rc-surface: var(--bg-elevated, #FFFFFF);
    --rc-text:    var(--text-primary, #111827);
    --rc-muted:   var(--text-secondary, #6B7280);
    --rc-border:  var(--border-color, #E5E7EB);
    --rc-shadow:  0 24px 56px -12px rgba(0, 0, 0, .28), 0 0 0 1px rgba(15, 23, 42, .06);

    box-sizing: border-box;
    width: min(21rem, calc(100vw - 2rem));
    margin: 20vh auto;
    padding: 1.75rem 1.5rem;
    background-color: var(--rc-surface);
    color: var(--rc-text);
    border: 1px solid var(--rc-border);
    border-radius: 16px;
    box-shadow: var(--rc-shadow);
    font-size: 13px;
    line-height: 1.5;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-mzcemie4t6 0.5s both;
}

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

/* showModal() diyaloğun kendisini odaklar; tarayıcı da üzerine varsayılan odak halkasını
   çizer. Diyalog bir kontrol değil kapsayıcıdır — halka yalnızca butonlarda kalır. */
#components-reconnect-modal:focus[b-mzcemie4t6],
#components-reconnect-modal:focus-visible[b-mzcemie4t6] {
    outline: none;
}

/* Koyu temada aksan bir ton açılır (koyu yüzeyde okunurluk) ve gölge derinleşir. */
[data-bs-theme="dark"] #components-reconnect-modal[b-mzcemie4t6] {
    --rc-icon:   var(--rc-accent-lite);
    --rc-shadow: 0 24px 56px -12px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* Başarısız durumlar Vault is-rose ailesine geçer — renk burada bilgi taşır, süs değil. */
#components-reconnect-modal.components-reconnect-failed[b-mzcemie4t6],
#components-reconnect-modal.components-reconnect-resume-failed[b-mzcemie4t6] {
    --rc-accent:      #e11d48;
    --rc-accent-lite: #f43f5e;
    --rc-soft:        rgba(225, 29, 72, .12);
}

#components-reconnect-modal[b-mzcemie4t6]::backdrop {
    background-color: rgba(9, 12, 18, .55);
    backdrop-filter: blur(3px);
    animation: components-reconnect-modal-fadeInOpacity-b-mzcemie4t6 0.5s ease-in-out;
    opacity: 1;
}

[data-bs-theme="dark"] #components-reconnect-modal[b-mzcemie4t6]::backdrop {
    background-color: rgba(0, 0, 0, .7);
}

/* ─── İçerik ───────────────────────────────────────────────────────────────── */
.components-reconnect-container[b-mzcemie4t6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

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

.components-reconnect-title[b-mzcemie4t6] {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--rc-text);
    letter-spacing: -0.005em;
}

.components-reconnect-hint[b-mzcemie4t6] {
    display: block;
    margin-top: 4px;
    color: var(--rc-muted);
}

/* Geri sayım rakamı — sabit genişlikli rakamlarla her saniye zıplamayı önler. */
#components-seconds-to-next-attempt[b-mzcemie4t6] {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--rc-icon);
}

/* Bağlantı yok ikonu — yalnızca başarısız durumlarda görünür. */
.components-reconnect-status-icon[b-mzcemie4t6] {
    width: 44px;
    height: 44px;
    padding: 10px;
    color: var(--rc-icon);
    background: var(--rc-soft);
    border-radius: 50%;
}

.components-reconnect-status-icon svg[b-mzcemie4t6] {
    display: block;
    width: 100%;
    height: 100%;
}

/* ─── Butonlar (Vault vault-btn--primary) ──────────────────────────────────── */
#components-reconnect-modal button[b-mzcemie4t6] {
    font: inherit;
    font-weight: 500;
    letter-spacing: -0.005em;
    border: 0;
    border-radius: 10px;
    padding: 9px 20px;
    margin-top: 2px;
    color: var(--vm-btn-ink, #fff);
    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .20) inset,
                0 4px 12px -2px rgba(2, 132, 199, .45);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .2s ease, filter .18s ease;
}

#components-reconnect-modal button:hover[b-mzcemie4t6] {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset,
                0 8px 20px -4px rgba(2, 132, 199, .55);
}

#components-reconnect-modal button:active[b-mzcemie4t6] {
    transform: translateY(0);
}

/* Odak halkası metin renginde — hem yüzeye hem butona karşı yüksek kontrast. */
#components-reconnect-modal button:focus-visible[b-mzcemie4t6] {
    outline: 2px solid var(--rc-text);
    outline-offset: 3px;
}

/* ─── Yeniden bağlanma halkası ─────────────────────────────────────────────── */
.components-rejoining-animation[b-mzcemie4t6] {
    position: relative;
    width: 72px;
    height: 72px;
}

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

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

/* ─── Animasyonlar ─────────────────────────────────────────────────────────── */
@keyframes components-reconnect-modal-slideUp-b-mzcemie4t6 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

@keyframes components-rejoining-animation-b-mzcemie4t6 {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

/* Hareket azaltma tercihi — diyalog anında açılır, halka yavaşlar, buton sabit kalır. */
@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal[b-mzcemie4t6],
    #components-reconnect-modal[open][b-mzcemie4t6] {
        animation: none;
        opacity: 1;
    }

    #components-reconnect-modal[b-mzcemie4t6]::backdrop {
        animation: none;
    }

    .components-rejoining-animation div[b-mzcemie4t6] {
        animation-duration: 3s;
    }

    #components-reconnect-modal button[b-mzcemie4t6] {
        transition: none;
    }

    #components-reconnect-modal button:hover[b-mzcemie4t6] {
        transform: none;
    }
}
/* /Components/Shared/HelpButton.razor.rz.scp.css */
.help-content :deep(h1)[b-bhf4mpyzvy] { font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.help-content :deep(h2)[b-bhf4mpyzvy] { font-size: 14px; font-weight: 600; margin-top: 20px; margin-bottom: 8px; }
.help-content :deep(h3)[b-bhf4mpyzvy] { font-size: 13px; font-weight: 600; margin-top: 16px; margin-bottom: 6px; }
.help-content :deep(p)[b-bhf4mpyzvy] { margin-bottom: 10px; }
.help-content :deep(ul)[b-bhf4mpyzvy], .help-content :deep(ol)[b-bhf4mpyzvy] { padding-left: 20px; margin-bottom: 10px; }
.help-content :deep(li)[b-bhf4mpyzvy] { margin-bottom: 4px; }
.help-content :deep(code)[b-bhf4mpyzvy] { background: var(--surface-hover); padding: 1px 5px; border-radius: 4px; font-family: monospace; font-size: 12px; }
.help-content :deep(hr)[b-bhf4mpyzvy] { border-color: var(--border-color); margin: 16px 0; }