/* Uygulama açılmadan önce görünen ilk ekran ve hata şeridi. */

/*
    Sayfa arka planı MudBlazor'un tema değişkeninden gelir; buradaki sabit renk
    yalnızca uygulama yüklenene kadar geçerli olan yedektir.

    Sabit yazılırsa gece modunu bozar. Hiçbir ara katmanın kendi arka planı yoktur
    (mud-layout, mud-main-content, mud-container hepsi saydamdır), yani sayfanın
    zemini doğrudan buradan gelir. Tema koyuya döndüğünde metin rengi açık griye
    geçer ama zemin açık gri kalırsa, bir kartın İÇİNDE olmayan her yazı — sayfa
    başlığı, açıklaması, "kayıt yok" metni, toplam satırı — açık zemine açık renkle
    çizilir ve okunmaz olur.
*/
html, body {
    margin: 0;
    font-family: Inter, "Segoe UI", system-ui, sans-serif;
    background: var(--mud-palette-background, #F2F3F0);
    color: var(--mud-palette-text-primary, #0D1113);
}

.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 8px;
}

.loading-mark {
    font-size: 28px;
    font-weight: 700;
    color: #0D1113;
    letter-spacing: -0.02em;
}

/* İşaret metnin rengini alır; ayrılan kol kendi magentasını korur. */
.loading-glyph {
    color: #6E787B;
}

.loading-note {
    font-size: 13px;
    color: #6E787B;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 20px;
    background: #FEF3C7;
    color: #7C2D12;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, .1);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 12px;
    top: 10px;
    cursor: pointer;
}

/*
    Açılış ekranı tema değişkenleri yüklenmeden önce görünür; o anda elimizdeki tek
    ipucu sistemin tercihidir. Uyarlanmazsa koyu masaüstünde beyaz bir kare patlar.
    Uygulama yüklenince değişkenler devreye girer ve buradaki yedek renkler düşer.
*/
@media (prefers-color-scheme: dark) {
    html, body {
        background: var(--mud-palette-background, #0D1013);
        color: var(--mud-palette-text-primary, #ECEFEC);
    }

    .loading-mark {
        color: #ECEFEC;
    }

    .loading-glyph {
        color: #79868A;
    }

    .loading-note {
        color: #79868A;
    }
}