/* ============================================================
   Karanlık Mod (Dark Mode) + tema geçiş butonu.
   Tamamen eklemeli: mevcut hiçbir CSS dosyasına dokunulmadı.
   style.css'deki CSS değişkenleri html.dark-mode üzerinde geçersiz
   kılınır; site genelinde var(--color-*) kullanıldığı için tüm
   yüzeyler otomatik olarak karanlık temaya uyum sağlar.
   Bu dosya en son yüklenir ki override edebilsin (bkz. header.php).
   ============================================================ */

html.dark-mode {
    /* Native tarih/saat seçicileri, kaydırma çubukları vb. karanlık render edilsin */
    color-scheme: dark;

    --color-bg: #0f1729;
    --color-surface: #1a2438;
    --color-text: #e6edf7;
    --color-text-muted: #94a3b8;
    --color-border: #2c3a52;

    --color-primary: #3b82f6;
    --color-primary-dark: #60a5fa;
    --color-primary-light: #172554;

    --color-danger: #f87171;
    /* Karanlik temada 'hover' varyanti koyulasmaz, acilir --
       --color-primary-dark ile ayni orunti. */
    --color-danger-dark: #fca5a5;
    --color-success: #34d399;
    --color-warning: #fbbf24;
    --color-info: #22d3ee;
    --color-accent: #a78bfa;

    /* İkincil yüzey (input zeminleri, iç paneller). */
    --color-surface-alt: #131c2e;

    /* --tint-* değerleri style.css'te color-mix ile semantik renklerden
       türetilir; yukarıdaki renkler değiştiği için tonlar burada ayrıca
       tanımlanmadan karanlık temaya uyum sağlar. */

    /* Gölgeleri karanlık zeminde biraz daha derin yap */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.55);
}

/* ---- Sabitlenmiş (#fafbfc / #ffffff) input arka planlarını karanlığa çevir ----
   Bu seçicilerin özgüllüğü (html.dark-mode input) mevcut ".form-group input"
   gibi kurallardan yüksektir, bu yüzden !important gerekmez. */
html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
    background-color: #131c2e;
    color: var(--color-text);
    border-color: var(--color-border);
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #64748b;
}

/* Odaklanınca yüzey rengine geçen inputlar zaten değişken kullanıyor;
   yalnızca sabit beyaz kalan durumları düzeltiyoruz. */
html.dark-mode .search-bar,
html.dark-mode .topbar-search input,
html.dark-mode .filter-search input {
    background-color: var(--color-surface-alt);
}

/* Durum rozetleri artık --tint-* değişkenlerini kullanıyor; bu değişkenler
   semantik renkleri yüzeye karıştırarak üretildiği ve yukarıdaki renkler
   karanlık temada değiştiği için ayrı override gerekmiyor. Buradaki
   html.dark-mode .badge-* kuralları bu yüzden kaldırıldı. */

/* Seçili hasta kartı (sabit açık yeşil) */
html.dark-mode .selected-patient-card {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
}

/* Abonelik bilgilendirme kutusu (register.php) */
html.dark-mode .subscription-info-box {
    background: var(--color-primary-light);
    border-color: var(--color-border);
}

/* Bekleyen ödeme uyarı kutusu */
html.dark-mode .an-detail-pending {
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fcd34d;
}

/* ============================================================
   Tema geçiş butonu

   Üst barı olan sayfalarda diğer araçların (dil seçici, bildirimler)
   yanına .icon-btn olarak yerleşir; stilini shell.css'ten alır ve
   burada yalnızca ikon rengi verilir.

   Önceden her sayfada sağ altta sabit duruyor ve artık kaldırılmış olan
   "Türkçeye Çevir" balonunun üstüne konumlandırılmıştı (bottom: 4.75rem);
   o balon gidince ekranın sağ alt köşesinde boşlukta asılı kalıyordu.
   ============================================================ */

.theme-toggle-btn {
    color: #d97706;
}

html.dark-mode .theme-toggle-btn {
    color: #fbbf24;
}

/* Tanıtım sayfası (landing.php): kendi üst barının .nav-actions kabının
   içinde, dil seçicinin solunda. Sayfa shell.css'i yüklemediği için
   .icon-btn orada yok — ölçüler dil seçici hapıyla (language.css
   .lang-switch) hizalı olacak şekilde burada tanımlanır.

   Sabit konum KULLANILMAZ: landing.css'teki .topbar z-index 40 ile sabit
   duruyor, aşağıdaki serbest varyant (z-index 20) onun altında kalıp
   görünmez ve tıklanamaz hale geliyordu. */
.theme-toggle-btn-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle-btn-inline:hover {
    background: var(--color-surface);
    border-color: var(--color-primary);
}

/* Üst barı olmayan sayfalar (login.php, register.php): dil seçicinin
   hemen solunda, sağ üstte sabit. */
.theme-toggle-btn-floating {
    position: fixed;
    top: 1.25rem;
    right: 5.5rem;
    z-index: 20;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt, #f6f5f1);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle-btn-floating:hover {
    background: var(--color-surface);
}

@media (max-width: 640px) {
    .theme-toggle-btn-floating {
        top: 0.85rem;
        right: 4.75rem;
        width: 34px;
        height: 34px;
    }
}