/*
 * =============================================================================
 * STP GO — GLOBAL THEME TOKENS (tek kaynak)
 * =============================================================================
 * Bu dosya kabuk (default.asp) ve gömülü içerik (#mainContent) için renk/zemin
 * değişkenlerini tanımlar. Yeni tema veya palet güncellemesi yalnızca burada
 * (:root / body.dark-mode / ileride body.theme-*) yapılmalıdır.
 *
 * Yükleme sırası: stp-modern.css → stp-theme-tokens.css → admin-layout.css
 * Böylece kabuk token’ları ve koyu modda stp-modern semantic renkleri burada
 * birleştirilir. Kart yüzeyleri için admin-layout içindeki #mainContent kuralları
 * --stp-content-* kullanır.
 *
 * İsim eşlemesi:
 *   --theme-*   : anlamsal alias (ileride tema motoru / dokümantasyon)
 *   --stp-shell-* / --stp-content-* : layout ile uyumlu mevcut API
 * =============================================================================
 */

:root {
    --theme-name: light;
    --theme-mode: light;

    /* Kabuk — açık tema (modern nötr, yüksek okunabilirlik) */
    --theme-shell-bg: #f0f4f8;
    --theme-surface: #ffffff;
    --theme-surface-muted: #f8fafc;
    --theme-border: #e2e8f0;
    --theme-text: #0f172a;
    --theme-text-muted: #64748b;
    --theme-accent: #2756ca;
    --theme-accent-soft: rgba(33, 126, 196, 0.12);

    --stp-sidebar-w: 240px;
    --stp-topbar-h: 56px;
    --stp-shell-bg: var(--theme-shell-bg);
    --stp-nav-bg: rgba(255, 255, 255, 0.92);
    --stp-nav-text: #1e293b;
    --stp-nav-border: rgba(226, 232, 240, 0.95);
    --stp-nav-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
    --stp-sidebar-bg: #ffffff;
    --stp-sidebar-border: #e8eef5;
    --stp-sidebar-text: #334155;
    --stp-sidebar-hover: #f1f5f9;
    --stp-accent: var(--theme-accent);
    --stp-accent-soft: var(--theme-accent-soft);

    /* SPA gömülü sayfalar (#mainContent) — açık */
    --stp-content-surface: #ffffff;
    --stp-content-surface-2: #f8fafc;
    --stp-content-border: #e2e8f0;
    --stp-content-text: #0f172a;
    --stp-content-muted: #64748b;

    /* Açık tema: accent tek düğümden (stp-modern ile uyum) */
    --stp-primary: var(--theme-accent);
    --stp-primary-hover: #1b6aa6;
    --stp-primary-light: rgba(33, 126, 196, 0.12);
    --stp-primary-rgb: 33, 126, 196;
}

/*
 * Koyu tema — slate tabanlı, WCAG odaklı kontrast (metin ≈ 11–15:1 koyu zeminde)
 * Birincil vurgu: indigo (göz yormayan)
 */
body.dark-mode {
    --theme-name: dark;
    --theme-mode: dark;

    --theme-shell-bg: #0f172a;
    --theme-surface: #1e293b;
    --theme-surface-muted: #172033;
    --theme-border: #334155;
    --theme-text: #f1f5f9;
    --theme-text-muted: #94a3b8;
    --theme-accent: #818cf8;
    --theme-accent-soft: rgba(129, 140, 248, 0.18);

    /* Tek slate zemin: sidebar | üst bar | içerik aynı ton (köşe birleşimlerinde renk sıçraması olmasın) */
    --stp-shell-bg: #0f172a;
    --stp-nav-bg: #0f172a;
    --stp-nav-text: #f1f5f9;
    --stp-nav-border: rgba(148, 163, 184, 0.16);
    --stp-nav-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
    --stp-sidebar-bg: #0f172a;
    --stp-sidebar-border: rgba(148, 163, 184, 0.14);
    --stp-sidebar-text: #e2e8f0;
    --stp-sidebar-hover: rgba(255, 255, 255, 0.06);
    --stp-accent: var(--theme-accent);
    --stp-accent-soft: var(--theme-accent-soft);

    --stp-content-surface: #1e293b;
    --stp-content-surface-2: #172033;
    --stp-content-border: #334155;
    --stp-content-text: #f1f5f9;
    --stp-content-muted: #94a3b8;

    /*
     * stp-modern.css ile uyum (gömülü sayfalar body.dark-mode altında kalıtır).
     * --stp-white kart/buton için #fff kalır; yüzeyler --stp-gray-* ve --stp-content-* ile gider.
     */
    --stp-primary: #818cf8;
    --stp-primary-hover: #a5b4fc;
    --stp-primary-light: rgba(129, 140, 248, 0.14);
    --stp-primary-rgb: 129, 140, 248;

    --stp-secondary: #94a3b8;
    --stp-secondary-hover: #cbd5e1;

    --stp-success: #34d399;
    --stp-success-hover: #10b981;
    --stp-warning: #fbbf24;
    --stp-warning-hover: #f59e0b;
    --stp-danger: #f87171;
    --stp-danger-hover: #ef4444;
    --stp-info: #38bdf8;
    --stp-info-hover: #0ea5e9;

    /* Gri ölçeği: koyu arayüz (üst = daha açık metin) */
    --stp-gray-50: #0f172a;
    --stp-gray-100: #172033;
    --stp-gray-200: #1e293b;
    --stp-gray-300: #334155;
    --stp-gray-400: #475569;
    --stp-gray-500: #64748b;
    --stp-gray-600: #94a3b8;
    --stp-gray-700: #cbd5e1;
    --stp-gray-800: #e2e8f0;
    --stp-gray-900: #f8fafc;
}

/*
 * İleride: body.theme-custom.dark-mode { ... } ile aynı değişken adlarını geçersiz kılın.
 * Örnek: body.theme-ocean.dark-mode { --theme-accent: #22d3ee; --stp-accent: #22d3ee; }
 */

/* ----------------------------------------------------------------------------
 * Sidebar marka logosu — koyu modda gri ton + beyaza/açık griye yakın parlaklık
 * (yalnızca grayscale bırakıldığında koyu gri kalıyordu; önce siyahlaştır+invert)
 * ---------------------------------------------------------------------------- */
body.dark-mode .main-sidebar .brand-link img.brand-image-xl,
body.dark-mode .main-sidebar .brand-link img.brand-image-xs,
body.dark-mode .stp-sidebar .brand-link img.brand-image-xl,
body.dark-mode .stp-sidebar .brand-link img.brand-image-xs {
    filter: grayscale(1) brightness(0) invert(1) brightness(0.88) contrast(1.03);
    opacity: 0.96;
}

body.dark-mode .main-sidebar .brand-link:hover img,
body.dark-mode .stp-sidebar .brand-link:hover img {
    filter: grayscale(1) brightness(0) invert(1) brightness(0.94) contrast(1.04);
    opacity: 1;
}

/*
 * ------------------------------------------------------------------------------
 * Faz 2 — Servis kabuğu (servis/default.asp inline stiller; !important ile çakışır)
 * ------------------------------------------------------------------------------
 */
body.dark-mode .main-sidebar {
    background: var(--stp-sidebar-bg) !important;
    border-right-color: var(--stp-sidebar-border) !important;
}

body.dark-mode .main-header {
    background: var(--stp-nav-bg) !important;
    border-bottom-color: var(--stp-nav-border) !important;
}

body.dark-mode .main-header .nav-link {
    color: var(--stp-nav-text) !important;
}

body.dark-mode .content-wrapper {
    background: var(--stp-shell-bg) !important;
}

body.dark-mode .nav-sidebar .nav-item > .nav-link {
    color: var(--stp-sidebar-text) !important;
}

body.dark-mode .nav-sidebar .nav-item > .nav-link:hover {
    background: var(--stp-sidebar-hover) !important;
    color: var(--stp-accent) !important;
}

body.dark-mode .nav-sidebar .nav-item > .nav-link.active,
body.dark-mode .nav-sidebar .nav-item > .nav-link:focus {
    background: var(--stp-primary-light) !important;
    color: var(--stp-accent) !important;
}

body.dark-mode .sidebar .sidebar-footer {
    border-top-color: var(--stp-sidebar-border) !important;
}

body.dark-mode .nav-header {
    color: var(--stp-content-muted) !important;
}

body.dark-mode .sidebar .form-control-sidebar {
    background: var(--stp-gray-100) !important;
    border-color: var(--stp-gray-300) !important;
    color: var(--stp-gray-800) !important;
}

body.dark-mode .sidebar .btn-sidebar {
    background: var(--stp-gray-100) !important;
    border-color: var(--stp-gray-300) !important;
    color: var(--stp-gray-600) !important;
}

body.dark-mode .main-sidebar .sidebar-footer img {
    filter: grayscale(1) brightness(0) invert(1) brightness(0.88) contrast(1.03);
    opacity: 0.96;
}

/*
 * ------------------------------------------------------------------------------
 * Giriş (login.asp .stp-login-page)
 * Tutarlı açık arayüz: OS prefers-color-scheme ile otomatik koyu yapılmaz;
 * kullanıcı giriş yaptıktan sonra Kabuk / Users.Tema (body.dark-mode) ile koyu tema kullanır.
 * ------------------------------------------------------------------------------
 */
.stp-login-page {
    background: linear-gradient(165deg, #64748b 0%, #475569 42%, #334155 100%);
}

.stp-login-page .stp-login-card {
    border-color: var(--theme-border);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.22);
}

/*
 * =====================================================================
 * İframe/Liste sayfaları için yaygın --pe-* değişken override'ları
 * (AigUlasmayanlar, MerkezServisOnayaSunucalklar, KaliteKontrol, vb.)
 * Bu sayfalar StpWriteThemeTokensLink ile bu dosyayı zaten dahil ediyor;
 * iframe body.dark-mode (wiser-ui.js tarafından senkronize edilir) eklenince
 * sayfanın --pe-* token'ları dark token'lara otomatik geçer.
 * =====================================================================
 */
body.dark-mode {
    --pe-bg: #0f172a;
    --pe-card: #1e293b;
    --pe-border: #334155;
    --pe-text: #f1f5f9;
    --pe-text-muted: #94a3b8;
    --pe-section-bg: #172033;
}
body.dark-mode table.dataTable tbody tr.odd,
body.dark-mode table.dataTable tbody tr.even,
body.dark-mode table.dataTable tbody tr {
    background: #1e293b !important;
    color: #f1f5f9 !important;
}
body.dark-mode table.dataTable tbody tr:hover {
    background: #172033 !important;
}
body.dark-mode table.dataTable tbody td {
    border-bottom-color: #334155 !important;
    color: #f1f5f9;
}
body.dark-mode .dataTables_wrapper .dataTables_filter input,
body.dark-mode .dataTables_wrapper .dataTables_length select {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--theme-accent, #818cf8) !important;
    border-color: var(--theme-accent, #818cf8) !important;
    color: #fff !important;
}

/*
 * Tema evrimi (durum):
 * Faz 1 — bu dosya + admin-layout; admin/default.asp kabuk
 * Faz 2 — login / servis kabuğu / accent / servis+koyu blokları / login prefers-color-scheme
 * Faz 3 — Fonksiyonlar/StpThemeLinks.asp + toplu <% StpWriteThemeTokensLink %> (stp-modern sonrası).
 * Login: işletim sistemi koyu/aydınlık tercihi sayfa görünümünü otomatik değiştirmez.
 */