/* Uzser tasarım sistemi — Uzser AI Engine (Uzser.AI.Engine.Components/wwwroot/css/site.css) genel bölümleri.
   Alınan: 1-1124 (jetonlar, açık/koyu tema, kabuk, menü, ızgara, rozet, buton, DevExpress köprüsü, giriş, KPI)
   ve 2106-2157 (kenar çubuğu simge modu). Pano, sohbet, akış gibi AI Engine ekranlarına özgü kısımlar alınmadı.
   Deploy'a özgü kurallar deploy.css'tedir; bu dosyayı elle değiştirmek yerine orada ezin. */

/* ============================================================
   Uzser — Kurumsal layout & tema katmanı
   DevExpress (blazing-berry) üzerine kurumsal kabuk.

   TEMA: mobil uygulamanın görsel sözleşmesi web'e taşındı
   (mobile/uzser_ai_engine/lib/theme/tokens.dart). Üç kural:
     1. Tek vurgu rengi; renk yalnız ANLAM taşıdığında girer.
     2. Kart değil bant: ayrım gölgeyle değil KENARLA yapılır.
     3. Sayı öndedir: sabit genişlikli rakam, negatif harf aralığı.

   ⚠️ Renkler doğrudan yazılmaz, hepsi jeton üzerinden gelir. Bir kural
   içine sabit renk yazmak, o kuralı iki temadan birinde kırar — ve bu
   ancak temayı değiştiren kullanıcı fark ettiğinde ortaya çıkar.
   ============================================================ */

/* ============================================================
   1) JETONLAR — AÇIK tema (taban)
   ⚠️ Her jeton ÖNCE burada tanımlanır. Yalnız koyu blokta tanımlanan bir
   renk, açık temada hiç uygulanmaz ve metin/zemin birbirini yutar.
   ============================================================ */
:root {
    /* -- marka / vurgu -------------------------------------------------- */
    /* ⚠️ VURGU YEŞİL DEĞİL, İNDİGO. Yeşil bırakılmıştı ve "başarılı" durum rengiyle
       (--uz-ok) AYNI aileydi: vurgu ile semantik renk çakışınca her düğme, her etkin
       menü, her KPI "olumlu bir şey bildiriyor" gibi okunuyor ve ekran tek renge
       boğuluyordu. Vurgu artık yeşil/sarı/kırmızının DIŞINDA; o üç renk yalnız duruma ait. */
    --uz-brand:        #4338ca;
    --uz-brand-dark:   #3730a3;
    --uz-brand-rgb:    67, 56, 202;   /* Bootstrap --bs-primary-rgb köprüsü için */
    --uz-brand-fg:     #ffffff;   /* vurgu ÜZERİNDEKİ metin */
    --uz-brand-soft:   #eceafe;   /* vurgunun sönük zemini */

    /* -- yüzeyler ------------------------------------------------------- */
    --uz-content-bg:   #f3f5f9;
    --uz-surface:      #ffffff;   /* bant/kart/grid gövdesi */
    --uz-surface-alt:  #ffffff;   /* açılır menü, popup (bir kat yukarısı) */
    --uz-surface-sunk: #f6f8fb;   /* grid başlığı, boş durum zemini */
    --uz-border:       #dde3ec;
    --uz-border-soft:  #eaeff5;   /* satır içi ince ayraç */

    /* -- metin ---------------------------------------------------------- */
    --uz-ink:          #131a22;
    --uz-ink-soft:     #5b6775;
    --uz-ink-faint:    #8794a3;

    /* -- kabuk ---------------------------------------------------------- */
    --uz-header-bg:    #ffffff;
    --uz-header-fg:    #131a22;
    --uz-header-hover: rgba(19,26,34,.06);
    --uz-sidebar-bg:   #ffffff;
    --uz-sidebar-fg:   #5b6775;
    --uz-sidebar-muted:#8794a3;
    --uz-sidebar-hover-bg: rgba(19,26,34,.05);
    --uz-sidebar-hover-fg: #131a22;
    --uz-sidebar-active-bg: var(--uz-brand-soft);
    --uz-sidebar-active-fg: #131a22;
    --uz-sidebar-accent:    var(--uz-brand);
    --uz-sidebar-border:    var(--uz-border);

    /* -- durum (yalnız anlam) ------------------------------------------- */
    --uz-ok:           #16a34a;  --uz-ok-soft:      #e7f6ec;
    --uz-warn:         #b45309;  --uz-warn-soft:    #fdf3e3;
    --uz-danger:       #dc2626;  --uz-danger-soft:  #fdeaea;
    --uz-info:         #2563eb;  --uz-info-soft:    #e8effd;
    --uz-neutral:      #5b6775;  --uz-neutral-soft: #eceff3;

    /* AI sohbet rol renkleri — ai-chat.css'ten buraya taşındı ki tema
       değişkenleri tek dosyada dursun. */
    --uz-role-proje:   #0d9488;
    --uz-role-destek:  #d97706;
    --uz-role-satis:   #7c3aed;
    --uz-role-ceviri:  #db2777;

    /* -- listeler ------------------------------------------------------- */
    --uz-row-alt:      #f9fafb;
    --uz-row-hover:    #eef2f6;
    --uz-grid-head-bg: var(--uz-surface-sunk);

    /* -- widget serisi --------------------------------------------------- */
    /* Bileşenin KİMLİK rengi: hangi konuya ait olduğunu söyler, "iyi/kötü"
       demez. Bu yüzden seride yeşil/sarı/kırmızı YOKTUR — o üçü duruma ait.
       c2–c5 yukarıdaki --uz-role-* renklerinin ta kendisi; ayrı bir palet
       uydurmak iki listeyi ayrı ayrı bakımda tutmak demekti. */
    --uz-c1: var(--uz-brand);   --uz-c1-soft: var(--uz-brand-soft);
    --uz-c2: #0d9488;           --uz-c2-soft: #d9f2ee;
    --uz-c3: #d97706;           --uz-c3-soft: #fdf0dc;
    --uz-c4: #7c3aed;           --uz-c4-soft: #f0e9fe;
    --uz-c5: #db2777;           --uz-c5-soft: #fce7f1;
    --uz-c6: #64748b;           --uz-c6-soft: #eaeef3;

    /* -- ölçü ----------------------------------------------------------- */
    --uz-header-h:     56px;
    --uz-sidebar-w:    268px;
    /* Yarıçap ÖLÇÜLÜ: kontroller küçük, kartlar biraz daha yumuşak. Kartın
       kendi yarıçapı olmadığında pano tek bir gri alan gibi okunuyordu. */
    --uz-radius:       8px;
    --uz-radius-sm:    6px;
    --uz-radius-lg:    14px;
    /* Kenar hâlâ birincil ayraç; gölge yalnız KART katmanına ait ve yalnız
       açık temada var (koyuda gölge okunmaz, kartı kirli gösterir —
       orada ayrım yüzey basamağıyla yapılır, bkz. koyu blok). */
    --uz-shadow-sm:    none;
    --uz-shadow:       none;
    --uz-shadow-card:  0 1px 2px rgba(19,26,34,.045), 0 10px 26px -16px rgba(19,26,34,.16);
    --uz-shadow-float: 0 12px 32px rgba(19,26,34,.16);
    /* Liste satırlarındaki sol durum şeridi. */
    --uz-stripe:       3px;

    color-scheme: light;
}

/* ============================================================
   2) JETONLAR — KOYU tema
   Üç durum vardır: açık seçilmiş, koyu seçilmiş, seçim yok (sistem).
   Sistem durumunda gövdede hiçbir işaret bulunmaz; ayrımı yalnız
   prefers-color-scheme yapar. Bu yüzden iki blok gerekir.
   ============================================================ */
@media (prefers-color-scheme: dark) {
    /* :not([data-uz-theme="light"]) — kullanıcı AÇIK seçtiyse işletim
       sisteminin koyu tercihi onu ezmemeli. */
    :root:not([data-uz-theme="light"]) {
        --uz-brand:        #8f9bf5;
        --uz-brand-dark:   #7c88ee;
        --uz-brand-fg:     #14173a;
        --uz-brand-rgb:    143, 155, 245;
        --uz-brand-soft:   #282e52;

        --uz-content-bg:   #171b23;
        --uz-surface:      #212734;
        --uz-surface-alt:  #262d3c;
        --uz-surface-sunk: #1b2029;
        --uz-border:       #333c4b;
        --uz-border-soft:  #2a323f;

        --uz-ink:          #e9edf4;
        --uz-ink-soft:     #98a4b5;
        --uz-ink-faint:    #66717f;

        --uz-header-bg:    #1b2029;
        --uz-header-fg:    #e9edf4;
        --uz-header-hover: rgba(255,255,255,.06);
        --uz-sidebar-bg:   #1b2029;
        --uz-sidebar-fg:   #98a4b5;
        --uz-sidebar-muted:#66717f;
        --uz-sidebar-hover-bg: rgba(255,255,255,.05);
        --uz-sidebar-hover-fg: #e9edf4;
        --uz-sidebar-active-bg: #282e52;
        --uz-sidebar-active-fg: #e9edf4;
        --uz-sidebar-accent:    #8f9bf5;
        --uz-sidebar-border:    #333c4b;

        --uz-ok:           #4ade80;  --uz-ok-soft:      #1b3326;
        --uz-warn:         #fbbf24;  --uz-warn-soft:    #3a2f14;
        --uz-danger:       #f87171;  --uz-danger-soft:  #3b2020;
        --uz-info:         #60a5fa;  --uz-info-soft:    #1b2740;
        --uz-neutral:      #98a4b5;  --uz-neutral-soft: #2a323f;
        --uz-role-proje:   #14b8a6;
        --uz-role-destek:  #f59e0b;
        --uz-role-satis:   #a78bfa;
        --uz-role-ceviri:  #f472b6;

        /* Widget serisi: her ton bir kademe AÇILIR, yoksa koyu zeminde okunmaz. */
        --uz-c2: #14b8a6;  --uz-c2-soft: #123a37;
        --uz-c3: #f59e0b;  --uz-c3-soft: #3a2f14;
        --uz-c4: #a78bfa;  --uz-c4-soft: #2e2450;
        --uz-c5: #f472b6;  --uz-c5-soft: #43203a;
        --uz-c6: #94a3b8;  --uz-c6-soft: #242b37;

        /* Koyu zeminde zebra çizgisi gürültü yapıyor; ayrım kenarla. */
        --uz-row-alt:      transparent;
        --uz-row-hover:    rgba(255,255,255,.035);
        --uz-grid-head-bg: #1b2029;

        /* ⚠️ Kart gölgesi koyuda YOK. Koyu zeminde gölge derinlik vermez, kartın
           kenarını bulandırır; yükselti burada yüzey basamağıyla kurulur
           (#171b23 zemin → #212734 kart → #262d3c yüzen). */
        --uz-shadow-card:  none;
        --uz-shadow-float: 0 12px 32px rgba(0,0,0,.55);

        color-scheme: dark;
    }
}

/* Kullanıcı KOYU seçtiyse işletim sistemi ne derse desin koyu. */
:root[data-uz-theme="dark"] {
    --uz-brand:        #8f9bf5;
    --uz-brand-dark:   #7c88ee;
    --uz-brand-fg:     #14173a;
        --uz-brand-rgb:    143, 155, 245;
    --uz-brand-soft:   #282e52;

    --uz-content-bg:   #171b23;
    --uz-surface:      #212734;
    --uz-surface-alt:  #262d3c;
    --uz-surface-sunk: #1b2029;
    --uz-border:       #333c4b;
    --uz-border-soft:  #2a323f;

    --uz-ink:          #e9edf4;
    --uz-ink-soft:     #98a4b5;
    --uz-ink-faint:    #66717f;

    --uz-header-bg:    #1b2029;
    --uz-header-fg:    #e9edf4;
    --uz-header-hover: rgba(255,255,255,.06);
    --uz-sidebar-bg:   #1b2029;
    --uz-sidebar-fg:   #98a4b5;
    --uz-sidebar-muted:#66717f;
    --uz-sidebar-hover-bg: rgba(255,255,255,.05);
    --uz-sidebar-hover-fg: #e9edf4;
    --uz-sidebar-active-bg: #282e52;
    --uz-sidebar-active-fg: #e9edf4;
    --uz-sidebar-accent:    #8f9bf5;
    --uz-sidebar-border:    #333c4b;

    --uz-ok:           #4ade80;  --uz-ok-soft:      #1b3326;
    --uz-warn:         #fbbf24;  --uz-warn-soft:    #3a2f14;
    --uz-danger:       #f87171;  --uz-danger-soft:  #3b2020;
    --uz-info:         #60a5fa;  --uz-info-soft:    #1b2740;
    --uz-neutral:      #98a4b5;  --uz-neutral-soft: #2a323f;
        --uz-role-proje:   #14b8a6;
        --uz-role-destek:  #f59e0b;
        --uz-role-satis:   #a78bfa;
        --uz-role-ceviri:  #f472b6;

    /* Widget serisi: her ton bir kademe AÇILIR, yoksa koyu zeminde okunmaz. */
    --uz-c2: #14b8a6;  --uz-c2-soft: #123a37;
    --uz-c3: #f59e0b;  --uz-c3-soft: #3a2f14;
    --uz-c4: #a78bfa;  --uz-c4-soft: #2e2450;
    --uz-c5: #f472b6;  --uz-c5-soft: #43203a;
    --uz-c6: #94a3b8;  --uz-c6-soft: #242b37;

    --uz-row-alt:      transparent;
    --uz-row-hover:    rgba(255,255,255,.035);
    --uz-grid-head-bg: #1b2029;

    /* ⚠️ Kart gölgesi koyuda YOK — gerekçe yukarıdaki koyu blokta. */
    --uz-shadow-card:  none;
    --uz-shadow-float: 0 12px 32px rgba(0,0,0,.55);

    color-scheme: dark;
}

/* ============================================================
   3) BOOTSTRAP KÖPRÜSÜ
   ⚠️ Bootstrap kendi değişkenleriyle boyar (--bs-body-bg vb.). Bunlar
   eşlenmezse koyu temada sayfanın kabuğu koyu, içindeki her .table /
   .form-control / .alert BEYAZ kalır — yani "alaca" ekran. Köprü tek yerde
   durur ki bir sonraki bileşen eklenince yeniden düşünmek gerekmesin.
   ============================================================ */
:root {
    --bs-body-bg:            var(--uz-content-bg);
    --bs-body-color:         var(--uz-ink);
    --bs-emphasis-color:     var(--uz-ink);
    --bs-secondary-color:    var(--uz-ink-soft);
    --bs-tertiary-color:     var(--uz-ink-faint);
    --bs-border-color:       var(--uz-border);
    --bs-secondary-bg:       var(--uz-surface-sunk);
    --bs-tertiary-bg:        var(--uz-surface-sunk);
    --bs-link-color:         var(--uz-brand);
    --bs-link-hover-color:   var(--uz-brand-dark);
    --bs-heading-color:      var(--uz-ink);

    /* ⚠️ "primary" DevExpress temasından geliyor ve blazing-berry MORU (rgb(95,54,141)).
       Canlıda ölçüldü: KPI bileşeninin rakamı (.text-primary) mor çiziliyordu — grafik
       paletindeki morun aynısı, ürünün vurgu renginin yanında yabancı duruyordu. */
    --bs-primary:            var(--uz-brand);
    --bs-primary-rgb:        var(--uz-brand-rgb, 34, 197, 94);
    --bs-primary-text-emphasis: var(--uz-brand);
}

/* Yardımcı sınıflar jetona bağlanır: Bootstrap/DevExpress bunları kendi sabit
   renkleriyle boyuyor ve sayfa sayfa avlamak yerine tek yerde karşılanır. */
.text-primary { color: var(--uz-brand) !important; }

/* ============================================================
   YAZI TİPİ — kendi sunucumuzdan
   ⚠️ CDN'den ÇEKİLMEZ. Ürün müşterinin kendi ağından açılıyor; dış bir
   adrese bağımlı yazı tipi, o adres engelliyse ya da yavaşsa ekranı
   sistem yazı tipine düşürür ve arayüz her makinede başka görünür.
   Ayrıca istemcinin IP'si üçüncü bir tarafa sızar.

   Manrope DEĞİŞKEN font (tek dosya 400–800 arası her ağırlığı verir):
   iki alt küme, toplam ~40 KB. latin-ext ŞART — ğ ş ı İ orada.
   Lisans: SIL OFL 1.1, fonts/Manrope-OFL.txt.
   ============================================================ */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
    height: 100%;
    margin: 0;
    /* Yedek zincir gerçek: font gelmezse ekran bozulmaz, yalnız karakterini kaybeder. */
    font-family: 'Manrope', 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    background: var(--uz-content-bg);
    color: var(--uz-ink);
}
* { box-sizing: border-box; }

/* Bağlantılar ve form alanları — bunlar her sayfada var. */
a, .btn-link { color: var(--uz-brand); }
a:hover { color: var(--uz-brand-dark); }
.table { --bs-table-bg: transparent; --bs-table-color: var(--uz-ink); color: var(--uz-ink); }
.table > :not(caption) > * > * { border-bottom-color: var(--uz-border-soft); }
.form-control, .form-select, .input-group-text {
    background: var(--uz-surface); color: var(--uz-ink); border-color: var(--uz-border);
}
.form-control:focus, .form-select:focus {
    background: var(--uz-surface); color: var(--uz-ink);
    border-color: var(--uz-brand); box-shadow: none;
}
.form-control::placeholder { color: var(--uz-ink-faint); }
.form-check-input { background-color: var(--uz-surface); border-color: var(--uz-border); }
.form-check-input:checked { background-color: var(--uz-brand); border-color: var(--uz-brand); }
hr { border-color: var(--uz-border); opacity: 1; }

/* Bootstrap uyarı bantları — anlam rengi jetondan. */
.alert { border-radius: var(--uz-radius); border-width: 1px; }
.alert-info    { background: var(--uz-info-soft);    color: var(--uz-info);    border-color: var(--uz-info); }
.alert-success { background: var(--uz-ok-soft);      color: var(--uz-ok);      border-color: var(--uz-ok); }
.alert-warning { background: var(--uz-warn-soft);    color: var(--uz-warn);    border-color: var(--uz-warn); }
.alert-danger  { background: var(--uz-danger-soft);  color: var(--uz-danger);  border-color: var(--uz-danger); }
.alert .alert-heading { color: inherit; }

/* Sayı hizası: tutar ve bakiye güncellenince satır ZIPLAMAMALI. */
.uzser-shell table td, .uzser-shell table th,
.uzser-kpi-v, .uzser-stat .v, .uz-num { font-variant-numeric: tabular-nums; }

/* ===================== Uygulama kabuğu ===================== */
.uzser-shell {
    display: grid;
    grid-template-columns: var(--uz-sidebar-w) 1fr;
    grid-template-rows: var(--uz-header-h) 1fr;
    grid-template-areas: "header header" "sidebar main";
    height: 100vh; height: 100dvh;
    overflow: hidden;
}

.uzser-header {
    grid-area: header;
    background: var(--uz-header-bg);
    color: var(--uz-header-fg);
    border-bottom: 1px solid var(--uz-border);
    z-index: 30;
    display: flex; align-items: center; gap: 4px;
    padding: 0 12px;
}
.uzser-header-right { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.uzser-header-sep { width: 1px; height: 22px; background: var(--uz-border); margin: 0 8px; flex: 0 0 auto; }
.uzser-brand {
    font-weight: 700; font-size: 18px; color: var(--uz-brand) !important;
    letter-spacing: -.2px; margin-left: 6px; white-space: nowrap; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 8px;
}
.uzser-brand .bi { font-size: 20px; }

/* Ürün logosu (MarkaLogo.razor). Yükseklik kapsayıcıdan; genişlik orandan. Koyu varyant
   yalnız koyu temada görünür — üç tema durumu da (açık / koyu / sistem) aşağıda. */
.uz-logo { display: inline-flex; align-items: center; height: 30px; }
.uz-logo img { height: 100%; width: auto; display: block; }
.uz-logo .uz-logo-koyu { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-uz-theme="light"]) .uz-logo .uz-logo-acik { display: none; }
    :root:not([data-uz-theme="light"]) .uz-logo .uz-logo-koyu { display: block; }
}
:root[data-uz-theme="dark"] .uz-logo .uz-logo-acik { display: none; }
:root[data-uz-theme="dark"] .uz-logo .uz-logo-koyu { display: block; }

/* Header DxButton (Link) araçları — düz, çerçevesiz */
.uzser-htool.dxbl-btn, .uzser-htool {
    color: var(--uz-header-fg) !important; background: transparent !important;
    border: 0 !important; box-shadow: none !important; border-radius: var(--uz-radius-sm) !important;
    min-height: 38px; padding: 0 10px !important; font-weight: 500;
}
.uzser-htool.dxbl-btn:hover, .uzser-htool:hover { background: var(--uz-header-hover) !important; }
.uzser-htool.dxbl-btn:focus, .uzser-htool.dxbl-btn:focus-visible { box-shadow: none !important; outline: none !important; }
.uzser-htool .bi { font-size: 17px; }
.uzser-user-name { font-weight: 600; }
@media (max-width: 640px) { .uzser-user-name { display: none; } }

/* Hesap (kullanıcı) açılır menüsü */
.uzser-acct-pop {
    position: absolute; right: 0; top: 46px; width: 264px;
    background: var(--uz-surface-alt); border: 1px solid var(--uz-border);
    border-radius: var(--uz-radius); box-shadow: var(--uz-shadow-float); z-index: 50;
}
.uzser-acct-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--uz-border); }
.uzser-acct-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: var(--uz-brand-soft); color: var(--uz-brand);
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.uzser-acct-avatar i { font-size: 24px; line-height: 1; }
.uzser-acct-name { font-weight: 700; font-size: 14px; color: var(--uz-ink); }
.uzser-acct-mail { font-size: 12px; color: var(--uz-ink-soft); }
.uzser-acct-menu { padding: 6px; }
.uzser-acct-item {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px;
    border: 0; background: transparent; border-radius: var(--uz-radius-sm); font: inherit; font-size: 13.5px;
    color: var(--uz-ink); text-align: left; cursor: pointer;
}
.uzser-acct-item i { font-size: 16px; width: 18px; text-align: center; color: var(--uz-ink-soft); }
.uzser-acct-item:hover { background: var(--uz-row-hover); }
.uzser-acct-item.danger, .uzser-acct-item.danger i { color: var(--uz-danger); }
.uzser-acct-item.danger:hover { background: var(--uz-danger-soft); }
.uzser-acct-sep { height: 1px; background: var(--uz-border); margin: 4px 6px; }
.uzser-acct-label {
    font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase;
    color: var(--uz-ink-faint); font-weight: 700; padding: 8px 10px 4px;
}
.uzser-badge {
    font-size: 11px; padding: 2px 9px; border-radius: var(--uz-radius-sm); font-weight: 600;
}
.uzser-badge.internal { background: var(--uz-info-soft); color: var(--uz-info); }
.uzser-badge.customer { background: var(--uz-neutral-soft); color: var(--uz-neutral); }

/* Tema seçici — üç durumlu (Sistem / Açık / Koyu) */
.uzser-tema { display: flex; gap: 4px; padding: 2px 6px 8px; }
.uzser-tema button {
    flex: 1 1 0; padding: 7px 4px; font: inherit; font-size: 12px; font-weight: 600;
    background: transparent; color: var(--uz-ink-soft);
    border: 1px solid var(--uz-border); border-radius: var(--uz-radius-sm); cursor: pointer;
}
.uzser-tema button:hover { background: var(--uz-row-hover); color: var(--uz-ink); }
.uzser-tema button[aria-pressed="true"] {
    background: var(--uz-brand-soft); color: var(--uz-brand); border-color: var(--uz-brand);
}
.uzser-tema button:focus-visible { outline: 2px solid var(--uz-brand); outline-offset: -2px; }
/* Başlık çubuğu biçimi: yalnız simge, sözcük yok. */
.uzser-tema.compact { padding: 0; gap: 2px; }
.uzser-tema.compact button { flex: 0 0 auto; min-width: 30px; padding: 5px 7px; font-size: 13px; line-height: 1; }

/* Hamburger sadece dar ekranda */
.uzser-burger-item { display: none !important; }
.uzser-shell.compact .uzser-burger-item { display: inline-flex !important; }

/* ===================== Yan menü ===================== */
.uzser-sidebar {
    grid-area: sidebar; background: var(--uz-sidebar-bg); color: var(--uz-sidebar-fg);
    overflow-y: auto; overflow-x: hidden; padding: 10px 0;
    transition: transform .22s ease; border-right: 1px solid var(--uz-sidebar-border);
}
.uzser-nav, .uzser-nav .dxbl-treeview, .uzser-nav .dxbl-scroll-viewer {
    background: transparent !important; border: 0 !important; color: var(--uz-sidebar-fg);
    --dxbl-treeview-font-size: .875rem;
    --dxbl-treeview-item-border-radius: var(--uz-radius-sm);
    --dxbl-treeview-item-spacing-y: .125rem;
    --dxbl-treeview-item-text-wrap: normal;
    --dxbl-treeview-item-content-indent: .65rem;
    --dxbl-treeview-item-hover-bg: var(--uz-sidebar-hover-bg);
    --dxbl-treeview-item-hover-color: var(--uz-sidebar-hover-fg);
    --dxbl-treeview-item-selection-bg: var(--uz-sidebar-active-bg);
    --dxbl-treeview-item-selection-color: var(--uz-sidebar-active-fg);
    --dxbl-treeview-item-selection-focused-color: var(--uz-sidebar-active-fg);
    --dxbl-treeview-item-focus-outline-color: transparent;
    --dxbl-treeview-item-focus-outline-width: 0;
}
.uzser-nav .dxbl-treeview-item-text, .uzser-nav .dxbl-treeview-item-container, .uzser-nav a {
    color: var(--uz-sidebar-fg) !important; text-decoration: none !important;
}
.uzser-nav .dxbl-treeview-item-text {
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    word-break: break-word; line-height: 1.3;
}
.uzser-nav .dxbl-treeview-item-container {
    border-radius: var(--uz-radius-sm); padding: 7px 10px; border-left: var(--uz-stripe) solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.uzser-nav .dxbl-treeview-item-container:hover {
    background: var(--uz-sidebar-hover-bg) !important; color: var(--uz-sidebar-hover-fg) !important;
}
.uzser-nav .dxbl-treeview-item-container:hover .dxbl-treeview-item-text { color: var(--uz-sidebar-hover-fg) !important; }
.uzser-nav .dxbl-treeview-item-container.dxbl-active,
.uzser-nav .dxbl-treeview-item-container[aria-selected="true"] {
    background: var(--uz-sidebar-active-bg) !important; border-left-color: var(--uz-sidebar-accent);
}
.uzser-nav .dxbl-treeview-item-container.dxbl-active .dxbl-treeview-item-text,
.uzser-nav .dxbl-treeview-item-container[aria-selected="true"] .dxbl-treeview-item-text {
    color: var(--uz-sidebar-active-fg) !important; font-weight: 600;
}
/* ⚠️ DevExpress seçili öğeyi ayrı bir ::before KATMANIYLA boyuyor. Yalnız
   kapsayıcının arka planını ezmek yetmiyor: üstte blazing-berry'nin MOR dolgusu
   kalıyor ve menü, temanın tek vurgu kuralını ihlal eden bir renk gösteriyordu.
   Canlıda ölçüldü (rgb(95,54,141)); ölçmeden fark edilmesi güç, çünkü öğenin
   kendi background'ı doğru değeri taşıyor. */
.uzser-nav .dxbl-treeview-item-container.dxbl-active::before,
.uzser-nav .dxbl-treeview-item-container[aria-selected="true"]::before,
.uzser-nav .dxbl-treeview-item-container:hover::before {
    background: transparent !important;
    background-color: transparent !important;
}
.uzser-nav .dxbl-treeview-item-container:focus, .uzser-nav .dxbl-treeview-item-container:focus-visible,
.uzser-nav *:focus, .uzser-nav *:focus-visible { outline: none !important; box-shadow: none !important; }
.uzser-nav .bi { margin-right: 9px; opacity: .85; font-size: .95em; width: 18px; display: inline-block; text-align: center; }
.uzser-nav .dxbl-btn:not(.dxbl-btn-primary):not(.dxbl-btn-secondary):not(.dxbl-btn-link) {
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    color: var(--uz-sidebar-muted) !important; min-width: 0 !important;
}
.uzser-nav .dxbl-btn svg { fill: currentColor !important; }

/* ===================== İçerik ===================== */
.uzser-main { grid-area: main; background: var(--uz-content-bg); overflow-y: auto; overflow-x: hidden; }
.uzser-content { padding: 20px 24px 40px; max-width: 1600px; margin: 0 auto; width: 100%; }
.uzser-scrim { position: fixed; inset: 0; background: rgba(6, 9, 13, .55); z-index: 25; }

/* Dar ekran (drawer) */
.uzser-shell.compact { grid-template-columns: 1fr; grid-template-areas: "header" "main"; }
.uzser-shell.compact .uzser-sidebar {
    position: fixed; top: var(--uz-header-h); left: 0; bottom: 0; width: var(--uz-sidebar-w);
    transform: translateX(-100%); z-index: 26; box-shadow: var(--uz-shadow-float);
}
.uzser-shell.compact.nav-open .uzser-sidebar { transform: translateX(0); }

/* ===================== Sayfa başlığı ===================== */
.uzser-page-header {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-bottom: 18px; padding: 2px 0 14px; border-bottom: 1px solid var(--uz-border); flex-wrap: wrap;
}
.uzser-page-header h1, .uzser-page-header h3 {
    margin: 0; font-size: 21px; font-weight: 600; color: var(--uz-ink); letter-spacing: -.4px;
    padding-left: 12px; border-left: var(--uz-stripe) solid var(--uz-brand); line-height: 1.2;
}
.uzser-page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.text-muted, .uzser-page-header p { color: var(--uz-ink-soft) !important; }

/* ===================== Bant sistemi (eski "kart") ===================== */
.uzser-card, .card {
    border: 1px solid var(--uz-border); border-radius: var(--uz-radius);
    background: var(--uz-surface); box-shadow: var(--uz-shadow-sm); color: var(--uz-ink);
}
.uzser-card { padding: 18px 20px; margin-bottom: 18px; }
.card-header {
    font-weight: 600; color: var(--uz-ink);
    background: transparent; border-bottom: 1px solid var(--uz-border);
}
.card-body { color: var(--uz-ink); }
.uzser-stat {
    background: var(--uz-surface); border: 1px solid var(--uz-border);
    border-radius: var(--uz-radius); padding: 16px 18px; box-shadow: var(--uz-shadow-sm);
}
.uzser-stat .v { font-size: 24px; font-weight: 700; color: var(--uz-ink); letter-spacing: -.6px; }
.uzser-stat .l { font-size: 13px; color: var(--uz-ink-soft); }

/* ===================== DevExpress Grid (liste) ===================== */
.dxbl-grid {
    --dxbl-grid-cell-padding-y: .5rem;
    border: 1px solid var(--uz-border) !important; border-radius: var(--uz-radius);
    overflow: hidden; background: var(--uz-surface); color: var(--uz-ink); font-size: 13.5px;
}
.dxbl-grid .dxbl-grid-header th, .dxbl-grid thead th {
    background: var(--uz-grid-head-bg) !important; color: var(--uz-ink-soft) !important; font-weight: 600 !important;
    font-size: 12.5px; border-bottom: 1px solid var(--uz-border) !important; white-space: nowrap;
}
/* ⚠️ Izgaranın kendi zemini yetmiyor: DevExpress içeride AYRI katmanlar çiziyor
   (kaydırma görüntüleyici, tablo, thead, sütun tanımları) ve her biri kendi
   beyazını taşıyor. Bunlar saydamlaştırılmazsa koyu temada satırlar BEYAZ kalır
   ve üzerlerindeki açık metin okunmaz olur — canlıda tam olarak bu görüldü. */
.dxbl-grid .dxbl-scroll-viewer,
.dxbl-grid .dxbl-scroll-viewer-content,
.dxbl-grid .dxbl-grid-table,
.dxbl-grid table,
.dxbl-grid thead,
.dxbl-grid tbody,
.dxbl-grid col,
.dxbl-grid .dxbl-grid-empty-cell {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--uz-ink);
}
.dxbl-grid tbody tr > td { background: transparent; color: var(--uz-ink); }
.dxbl-grid tbody tr:nth-child(even) > td { background: var(--uz-row-alt); }
.dxbl-grid tbody tr:hover > td { background: var(--uz-row-hover) !important; }
.dxbl-grid tbody td { border-bottom: 1px solid var(--uz-border-soft) !important; vertical-align: middle; }
.dxbl-grid .dxbl-pager {
    padding: 8px 10px; border-top: 1px solid var(--uz-border);
    background: var(--uz-surface); color: var(--uz-ink-soft);
}

/* Satır başındaki durum şeridi — listelerde durumu RENKLE değil, konumla
   da okunur kılar. `uz-row-<durum>` sınıfı taşıyan satırlarda görünür. */
.uz-row-ok      > td:first-child { box-shadow: inset var(--uz-stripe) 0 0 0 var(--uz-ok); }
.uz-row-warn    > td:first-child { box-shadow: inset var(--uz-stripe) 0 0 0 var(--uz-warn); }
.uz-row-danger  > td:first-child { box-shadow: inset var(--uz-stripe) 0 0 0 var(--uz-danger); }
.uz-row-info    > td:first-child { box-shadow: inset var(--uz-stripe) 0 0 0 var(--uz-info); }

/* ===================== Rozetler (pill) ===================== */
.uz-pill {
    display: inline-block; padding: 2px 10px; border-radius: var(--uz-radius-sm);
    font-size: 12px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.uz-pill-green { background: var(--uz-ok-soft);      color: var(--uz-ok); }
.uz-pill-blue  { background: var(--uz-info-soft);    color: var(--uz-info); }
.uz-pill-amber { background: var(--uz-warn-soft);    color: var(--uz-warn); }
.uz-pill-red   { background: var(--uz-danger-soft);  color: var(--uz-danger); }
.uz-pill-gray  { background: var(--uz-neutral-soft); color: var(--uz-neutral); }

/* ===================== Butonlar ===================== */
.dxbl-btn { border-radius: var(--uz-radius-sm) !important; }
/* Anlam sınıfı taşımayan butonları nötr yap — tek-primary hiyerarşisi.
   ⚠️ `.dxbl-btn-tool`, `.dxbl-btn-text-secondary` ve girdi içi düğmeler DIŞARIDA:
   bunlar buton değil ARAYÜZ PARÇASI (menüdeki genişlet/daralt oku, ızgara
   sayfalayıcısı, combo'nun açılır oku, alan temizleme çarpısı). Nötr kurala
   yakalandıklarında kutulanıyorlar — ok olması gereken yerde düğme görünüyordu.

   ⚠️ Combo oku özellikle sinsiydi: `.dxbl-btn-outline-secondary` sınıfı taşıdığı
   için bu kurala giriyor, KOYU temada yüzey rengi girdiyle aynı olduğundan
   görünmüyor, AÇIK temada beyaz kutu + çerçeve olarak ortaya çıkıyordu. Tek
   temaya bakarak fark edilmesi mümkün değildi. */
.dxbl-btn:not(.dxbl-btn-primary):not(.dxbl-btn-secondary):not(.dxbl-btn-success):not(.dxbl-btn-danger):not(.dxbl-btn-warning):not(.dxbl-btn-info):not(.dxbl-btn-light):not(.dxbl-btn-dark):not(.dxbl-btn-link):not(.dxbl-btn-tool):not(.dxbl-btn-text-secondary):not(.dxbl-edit-btn-dropdown):not(.dxbl-edit-btn-clear):not(.dxbl-edit-btn-spin-up):not(.dxbl-edit-btn-spin-down) {
    background: var(--uz-surface) !important; border: 1px solid var(--uz-border) !important; color: var(--uz-ink) !important;
}
.dxbl-btn:not(.dxbl-btn-primary):not(.dxbl-btn-secondary):not(.dxbl-btn-success):not(.dxbl-btn-danger):not(.dxbl-btn-warning):not(.dxbl-btn-info):not(.dxbl-btn-light):not(.dxbl-btn-dark):not(.dxbl-btn-link):not(.dxbl-btn-tool):not(.dxbl-btn-text-secondary):not(.dxbl-edit-btn-dropdown):not(.dxbl-edit-btn-clear):not(.dxbl-edit-btn-spin-up):not(.dxbl-edit-btn-spin-down):hover {
    background: var(--uz-row-hover) !important;
}

/* Araç/metin butonları: çerçevesiz, zeminsiz — yalnız simge. */
.dxbl-btn-tool, .dxbl-btn-text-secondary {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--uz-ink-soft) !important;
}
.dxbl-btn-tool:hover, .dxbl-btn-text-secondary:hover {
    background: var(--uz-row-hover) !important; color: var(--uz-ink) !important;
}
/* Kenar çubuğunda zemin bile verilmez: menü satırının kendi vurgusu yeter. */
.uzser-sidebar .dxbl-btn-tool, .uzser-sidebar .dxbl-btn-text-secondary,
.uzser-nav .dxbl-btn-tool, .uzser-nav .dxbl-btn-text-secondary {
    color: var(--uz-sidebar-muted) !important;
}
.uzser-sidebar .dxbl-btn-tool:hover, .uzser-nav .dxbl-btn-tool:hover {
    background: transparent !important; color: var(--uz-sidebar-hover-fg) !important;
}
.dxbl-btn-secondary { background: var(--uz-surface) !important; border: 1px solid var(--uz-border) !important; color: var(--uz-ink) !important; }
.dxbl-btn-secondary:hover { background: var(--uz-row-hover) !important; }
.dxbl-btn-primary {
    background: var(--uz-brand) !important; border-color: var(--uz-brand) !important;
    color: var(--uz-brand-fg) !important;
}
.dxbl-btn-primary:hover { background: var(--uz-brand-dark) !important; border-color: var(--uz-brand-dark) !important; }
.dxbl-btn-link { color: var(--uz-brand) !important; }

/* ===================== DevExpress yüzey köprüsü =====================
   ⚠️ DevExpress temasının 1700'den fazla değişkeni var; hepsini eşlemek bu
   turun işi değil. Burada yalnız KABUK ve LİSTELERİN dokunduğu yüzeyler
   bağlanır: metin kutuları (giriş ekranı bunlarla kuruluyor), açılır listeler
   ve popup'lar. Bunlar bağlanmazsa koyu temada form alanları BEYAZ kalır ve
   üzerlerindeki açık renkli etiket okunmaz olur — giriş ekranında tam olarak
   bu oluyordu.

   Kalanı (takvim, sihirbaz, grafik) bir sonraki tur. */
.dxbl-edit, .dxbl-text-edit, .dxbl-memo, .dxbl-combobox, .dxbl-spin-edit, .dxbl-date-edit {
    --dxbl-text-edit-bg: var(--uz-surface);
    --dxbl-text-edit-color: var(--uz-ink);
    --dxbl-text-edit-border-color: var(--uz-border);
    background: var(--uz-surface) !important;
    color: var(--uz-ink) !important;
    border-color: var(--uz-border) !important;
    border-radius: var(--uz-radius-sm) !important;
}
.dxbl-edit input, .dxbl-edit textarea, .dxbl-edit-input,
input.dxbl-textbox, textarea.dxbl-memo-input {
    background: transparent !important;
    color: var(--uz-ink) !important;
}
.dxbl-edit input::placeholder, .dxbl-edit textarea::placeholder { color: var(--uz-ink-faint) !important; }
.dxbl-edit:focus-within { border-color: var(--uz-brand) !important; box-shadow: none !important; }

/* DxFormLayout GRUBU (DxFormLayoutGroup) — kendi BEYAZINI taşıyor.
   ⚠️ Ölçüldü: .dxbl-group.expanded → rgb(255,255,255). Koyu temada grubun içindeki
   etiketler --uz-ink-soft ile çizildiği için beyaz zeminde 2.53 kontrasta düşüyor,
   yani okunmuyor. Kap saydam bırakılır: arkasındaki yüzey neyse onu alsın.
   Başlık şeridi de aynı sebeple jetona bağlanır. */
.dxbl-group, .dxbl-group-body, .dxbl-group-body-content { background: transparent !important; }
.dxbl-group > .dxbl-group-header, .dxbl-group-header {
    background: var(--uz-surface-sunk) !important;
    color: var(--uz-ink) !important;
    border-color: var(--uz-border) !important;
}

/* Form etiketleri (DxFormLayoutItem Caption) — koyu zeminde okunmalı. */
.dxbl-fl-cpt, .dxbl-fl-cpt label, .dxbl-form-layout label { color: var(--uz-ink-soft) !important; }

/* Kapalı combo: sağdaki ok düğmesi.
   ⚠️ Düğmenin ARKASINDAKİ grup kabı kendi beyazını taşıyor (ölçüldü:
   .dxbl-btn-group → rgb(255,255,255)) ve düğmenin 1px kenarı var. İkisi birden,
   koyu girdi alanının içinde beyaz bir kutu ve çerçeve bırakıyordu. Ok bir
   düğme değil, alanın parçası. */
.dxbl-edit .dxbl-btn-group,
.dxbl-text-edit .dxbl-btn-group,
.dxbl-edit .dxbl-btn-group-right,
/* Sayısal alanın artır/azalt grubu — aynı sorun, ayrı sınıf adı. */
.dxbl-spin-btns, .dxbl-btn-group-vertical {
    background: transparent !important;
    background-color: transparent !important;
}
.dxbl-edit-btn-dropdown,
.dxbl-edit .dxbl-btn-outline-secondary,
.dxbl-edit .dxbl-edit-btn-clear {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--uz-ink-soft) !important;
}
.dxbl-edit-btn-dropdown:hover,
.dxbl-edit .dxbl-btn-outline-secondary:hover {
    background: var(--uz-row-hover) !important; color: var(--uz-ink) !important;
}

/* Açılan liste. ⚠️ Sınıf adları TAHMİN edilmedi, açık combo üzerinde ölçüldü:
   dış kap `dxbl-dropdown-dialog`, içi `dxbl-list-box-render-container` ve onun
   içinde ayrıca kendi beyazını taşıyan bir kaydırma görüntüleyici var. Üçü
   birden boyanmazsa liste koyu temada beyaz açılır. */
dxbl-dropdown-dialog, .dxbl-dropdown-dialog, .dxbl-edit-dropdown,
.dxbl-list-box-render-container,
.dxbl-dropdown-dialog .dxbl-scroll-viewer,
.dxbl-dropdown-dialog .dxbl-scroll-viewer-content,
.dxbl-edit-dropdown .dxbl-scroll-viewer,
.dxbl-edit-dropdown .dxbl-scroll-viewer-content {
    background: var(--uz-surface-alt) !important;
    background-color: var(--uz-surface-alt) !important;
    color: var(--uz-ink) !important;
    border-color: var(--uz-border) !important;
}
.dxbl-list-box-item, .dxbl-list-box-item td { color: var(--uz-ink) !important; }
.dxbl-list-box-item:hover { background: var(--uz-row-hover) !important; }
/* ⚠️ Seçili satırı DevExpress yine ayrı bir ::before katmanıyla boyuyor —
   menüdeki mor dolgunun aynısı (ölçüldü: rgb(95,54,141)). Satırın kendi
   arka planını ezmek yetmez. */
.dxbl-list-box-item-selected::before,
.dxbl-list-box-item-focused::before,
.dxbl-list-box-item:hover::before {
    background: transparent !important;
    background-color: transparent !important;
}
.dxbl-list-box-item-selected {
    background: var(--uz-brand-soft) !important; color: var(--uz-ink) !important;
}

/* Takvim.
   ⚠️ DevExpress'in ÜÇÜNCÜ ::before vakası (menü öğesi ve liste satırından sonra):
   "bugün" ve seçili gün ayrı bir katmanla mor boyanıyor (ölçüldü: rgb(95,54,141)).
   Hücrenin kendi arka planı saydam olduğu için ölçmeden fark edilmiyor. */
.dxbl-calendar-day::before,
.dxbl-calendar-today::before,
.dxbl-calendar-day-selected::before,
.dxbl-calendar-selected::before {
    background: transparent !important;
    background-color: transparent !important;
}
/* Bugün: dolgu değil ÇERÇEVE — seçili günle karışmasın.
   ⚠️ Burada mor, ::before'dan DEĞİL `border` ve `outline`'dan geliyordu. Yalnız
   arka plan rengine bakan bir denetim bunu "temiz" sanır; üç özelliği de
   bağlamak gerekiyor. */
.dxbl-calendar-today {
    border-color: var(--uz-brand) !important;
    outline-color: var(--uz-brand) !important;
    box-shadow: none !important;
    border-radius: var(--uz-radius-sm);
}
.dxbl-calendar-day-selected, .dxbl-calendar-selected, .dxbl-calendar-selected-item {
    background: var(--uz-brand-soft) !important; color: var(--uz-ink) !important;
    border-color: var(--uz-brand) !important; outline-color: var(--uz-brand) !important;
}
/* Odak halkası da aynı vurgudan. */
.dxbl-calendar-day:focus, .dxbl-calendar-day:focus-visible,
.dxbl-calendar-cell:focus, .dxbl-calendar-cell:focus-visible {
    outline-color: var(--uz-brand) !important;
}
.dxbl-calendar-day:hover { background: var(--uz-row-hover) !important; }
.dxbl-calendar-header, .dxbl-calendar-footer {
    background: transparent !important; color: var(--uz-ink) !important;
}
.dxbl-calendar-days-of-week, .dxbl-calendar-week-number { color: var(--uz-ink-faint) !important; }
.dxbl-calendar-other-month { color: var(--uz-ink-faint) !important; }

/* Yüzen katmanlar: açılır liste, popup, pencere. */
.dxbl-dropdown, .dxbl-popup, .dxbl-window, .dxbl-listbox, .dxbl-calendar {
    --dxbl-dropdown-bg: var(--uz-surface-alt);
    --dxbl-dropdown-color: var(--uz-ink);
    --dxbl-dropdown-border-color: var(--uz-border);
    --dxbl-list-box-bg: var(--uz-surface-alt);
    --dxbl-list-box-color: var(--uz-ink);
    --dxbl-list-box-border-color: var(--uz-border);
    --dxbl-list-box-item-hover-bg: var(--uz-row-hover);
    --dxbl-list-box-item-hover-color: var(--uz-ink);
    --dxbl-list-box-item-active-bg: var(--uz-brand-soft);
    --dxbl-list-box-item-active-color: var(--uz-ink);
    --dxbl-calendar-bg: var(--uz-surface-alt);
    --dxbl-calendar-color: var(--uz-ink);
    --dxbl-calendar-border-color: var(--uz-border);
    background-color: var(--uz-surface-alt) !important;
    color: var(--uz-ink) !important;
    border-color: var(--uz-border) !important;
}
.dxbl-popup-header, .dxbl-window-header {
    background: var(--uz-surface-alt) !important; color: var(--uz-ink) !important;
    border-bottom: 1px solid var(--uz-border) !important;
}
.dxbl-popup-body, .dxbl-window-body { background: var(--uz-surface-alt) !important; color: var(--uz-ink) !important; }

/* Modal (diyalog) ailesi.
   ⚠️ Gövdeyi taşıyan sınıf `dxbl-modal-content`; `dxbl-popup`/`dxbl-window`
   köprüsü ona ULAŞMIYORDU ve diyaloglar koyu temada bembeyaz açılıyordu.
   Sınıf adları açık bir diyalog üzerinde sayıldı, tahmin edilmedi. */
.dxbl-modal-content, .dxbl-modal-header, .dxbl-modal-body, .dxbl-modal-footer {
    background: var(--uz-surface-alt) !important;
    background-color: var(--uz-surface-alt) !important;
    color: var(--uz-ink) !important;
    border-color: var(--uz-border) !important;
}
.dxbl-modal-content { border-radius: var(--uz-radius) !important; box-shadow: var(--uz-shadow-float) !important; }
.dxbl-modal-header, .dxbl-modal-footer { border-color: var(--uz-border) !important; }
.dxbl-modal-title { color: var(--uz-ink) !important; }
/* Perde: ekranın geri kalanını bastırır — açık temada da koyu olmalı. */
.dxbl-modal-back, .dxbl-popup-backdrop { background: rgba(6, 9, 13, .55) !important; }

/* ===================== Bootstrap yardımcı sınıfları =====================
   ⚠️ Sayfalar bu sınıfları doğrudan kullanıyor (`badge bg-light`, `table` …) ve
   Bootstrap onları SABİT açık renklerle boyuyor. Jetona bağlanmazlarsa koyu
   temada tek tek beyaz lekeler kalır — sayfa sayfa avlamak yerine burada,
   tek yerde karşılanır. */
.bg-white, .bg-light {
    background-color: var(--uz-surface-sunk) !important;
    color: var(--uz-ink) !important;
}
.text-dark { color: var(--uz-ink) !important; }
.text-body-secondary, .text-secondary { color: var(--uz-ink-soft) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--uz-border) !important; }

.table > thead th, .table-light, .table-light > th, .table-light > td {
    background-color: var(--uz-grid-head-bg) !important;
    color: var(--uz-ink-soft) !important;
    border-color: var(--uz-border) !important;
}

.progress { background-color: var(--uz-neutral-soft); }
/* ⚠️ İlerleme çubuğu Bootstrap'in kendi birincil rengini alıyordu — blazing-berry
   moru. Tek vurgu kuralı gereği bizim vurgumuz olmalı. */
.progress-bar { background-color: var(--uz-brand) !important; }

/* ===================== DevExpress onay kutusu =====================
   Kutunun kendisi sınıfsız bir iç DIV; dışarıdaki sınıf işaretli durumu söyler
   (ölçüldü: .dxbl-checkbox-display-view-checked). İç DIV boyanmazsa koyu temada
   beyaz kare olarak kalır. */
.dxbl-checkbox > div {
    background: var(--uz-surface) !important;
    border-color: var(--uz-border) !important;
}
.dxbl-checkbox-checked > div,
.dxbl-checkbox-display-view-checked > div,
.dxbl-checkbox-indeterminate > div {
    background: var(--uz-brand) !important;
    border-color: var(--uz-brand) !important;
    color: var(--uz-brand-fg) !important;
}

/* ===================== Grafikler (DevExpress SVG) =====================
   Seri renkleri C# tarafındaki ortak paletten gelir (UzChartPalette); burada
   yalnız grafiğin ÇEVRESİ — yazı, ızgara, eksen — temaya bağlanır.

   ⚠️ DevExpress eksen yazılarının rengini SATIR İÇİ stille yazıyor
   (ölçüldü: `style="fill: rgba(33,37,41,.75)"`). Satır içi stili yalnız
   `!important` taşıyan bir kural yenebilir; onsuz etiketler koyu zeminde
   neredeyse siyah kalıyor ve grafik okunmuyordu. */
.dxc-chart text, .dxbl-chart-root text, .dxbl-pie-chart text {
    fill: var(--uz-ink-soft) !important;
}
/* Izgara ve eksen çizgileri öznitelikle geliyor (#d3d3d3 / #767676) — koyu
   zeminde fazla parlak. Yalnız bu gruplar hedeflenir; seri çizgisi kapsam
   dışıdır, aksi hâlde grafiğin kendi rengi de gri olurdu. */
.dxc-grids-group path, .dxc-val-grid path, .dxc-arg-grid path,
.dxc-axes-group path, .dxc-border path {
    stroke: var(--uz-border) !important;
}
.dxc-background { fill: transparent !important; }

/* ===================== Sekmeler ===================== */
.dxbl-tabs .dxbl-tab.dxbl-active { font-weight: 600; }
.dxbl-tabs .dxbl-tab.dxbl-active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--uz-brand); }

/* ===================== Boş durum ===================== */
.uzser-empty {
    text-align: center; color: var(--uz-ink-soft); padding: 36px 16px;
    border: 1px dashed var(--uz-border); border-radius: var(--uz-radius); background: var(--uz-surface-sunk);
}
.uzser-empty i { font-size: 28px; opacity: .5; display: block; margin-bottom: 8px; }

/* ===================== Giriş ekranı ===================== */
.uzser-login-shell {
    min-height: 100dvh; display: flex; align-items: center; justify-content: center;
    background: var(--uz-content-bg); padding: 16px;
}
.uzser-login-card {
    background: var(--uz-surface); padding: 32px 28px; width: min(420px, 100%);
    border: 1px solid var(--uz-border); border-radius: var(--uz-radius); box-shadow: var(--uz-shadow-sm);
}
/* Giriş ekranı (GirisEkrani.razor): solda marka paneli, sağda form.
   Marka paneli LOGO renklerini kullanır (lacivert #223a65 + turuncu #fc5f00) ve iki temada da
   lacivert kalır; form tarafı uygulamanın tema jetonlarını izler. */
.uz-giris {
    --giris-lacivert: #223a65;
    --giris-lacivert-koyu: #14223d;
    --giris-turuncu: #fc5f00;
    --giris-turuncu-acik: #ff9a57;   /* lacivert zeminde okunur turuncu */
    --giris-odak: #223a65;
    --giris-hata-zemin: #fdecea;
    --giris-hata-cizgi: #f5c2bd;
    --giris-hata-yazi: #a4231a;

    min-height: 100vh; min-height: 100dvh;
    display: grid; grid-template-columns: minmax(400px, 46%) 1fr;
    background: var(--uz-surface);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-uz-theme="light"]) .uz-giris {
        --giris-odak: #8fa6d6; --giris-hata-zemin: #3a1d1d; --giris-hata-cizgi: #6b2c2c; --giris-hata-yazi: #f7b4ad;
    }
}
:root[data-uz-theme="dark"] .uz-giris {
    --giris-odak: #8fa6d6; --giris-hata-zemin: #3a1d1d; --giris-hata-cizgi: #6b2c2c; --giris-hata-yazi: #f7b4ad;
}

/* ---- marka paneli ---- */
.uz-giris-marka {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(120% 70% at 100% 0%, rgba(252, 95, 0, .16) 0%, rgba(252, 95, 0, 0) 55%),
        linear-gradient(160deg, var(--giris-lacivert) 0%, var(--giris-lacivert-koyu) 100%);
}
.uz-giris-ag {
    position: absolute; inset: 0; width: 100%; height: 100%;
    /* Motif yalnız üst bölümde: metnin arkasına düşen çizgi okumayı bozuyordu. */
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 58%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 58%);
}
.uz-giris-ag-cizgi path { fill: none; stroke: rgba(255, 255, 255, .10); stroke-width: 2; }
.uz-giris-ag-dugum circle { fill: var(--giris-lacivert-koyu); stroke: rgba(255, 255, 255, .28); stroke-width: 2; }
.uz-giris-ag-vurgu circle { fill: var(--giris-turuncu); }

.uz-giris-marka-ic {
    position: relative; height: 100%;
    display: flex; flex-direction: column; gap: 40px;
    padding: 48px 56px;
}
.uz-giris-logo { height: 52px; width: auto; align-self: flex-start; }
.uz-giris-tez { margin-top: auto; }
.uz-giris-ust {
    margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--giris-turuncu-acik);
}
.uz-giris-tez h2 {
    margin: 0 0 14px; max-width: 20ch;
    font-size: clamp(26px, 2.5vw, 36px); line-height: 1.18; font-weight: 750; letter-spacing: -.02em;
    text-wrap: balance; color: #fff;
}
.uz-giris-aciklama { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .74); }

.uz-giris-maddeler { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 46ch; }
.uz-giris-maddeler li { display: flex; gap: 14px; align-items: flex-start; }
.uz-giris-maddeler .bi {
    flex: 0 0 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
    color: var(--giris-turuncu-acik); font-size: 17px;
}
.uz-giris-maddeler span { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .66); }
.uz-giris-maddeler b { display: block; font-size: 14.5px; font-weight: 650; color: #fff; margin-bottom: 1px; }
.uz-giris-imza { margin: 0; font-size: 12px; letter-spacing: .02em; color: rgba(255, 255, 255, .42); }

/* ---- form ---- */
.uz-giris-form-alani {
    display: flex; align-items: center; justify-content: center;
    padding: 48px 24px; background: var(--uz-surface);
}
.uz-giris-form { width: min(400px, 100%); display: flex; flex-direction: column; gap: 20px; }
.uz-giris-logo-mobil { display: none; }
.uz-giris-form header h1 {
    margin: 0 0 6px; font-size: 28px; font-weight: 750; letter-spacing: -.02em; color: var(--uz-ink);
}
.uz-giris-form header p { margin: 0; font-size: 15px; color: var(--uz-ink-soft); }

.uz-giris-alan { display: flex; flex-direction: column; gap: 7px; }
.uz-giris-alan label { font-size: 13px; font-weight: 650; color: var(--uz-ink); }
.uz-giris-girdi { position: relative; }
.uz-giris-girdi > .bi {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--uz-ink-faint); font-size: 16px; pointer-events: none;
}
.uz-giris-girdi input {
    width: 100%; height: 48px; padding: 0 46px 0 42px;
    border: 1px solid var(--uz-border); border-radius: 10px;
    background: var(--uz-surface-sunk); color: var(--uz-ink); font-size: 15px;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.uz-giris-girdi input::placeholder { color: var(--uz-ink-faint); }
.uz-giris-girdi input:focus {
    outline: none; background: var(--uz-surface);
    border-color: var(--giris-odak); box-shadow: 0 0 0 3px color-mix(in srgb, var(--giris-odak) 22%, transparent);
}
.uz-giris-girdi input:disabled { opacity: .65; }
.uz-giris-goster {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent;
    color: var(--uz-ink-soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.uz-giris-goster:hover { background: var(--uz-surface-sunk); color: var(--uz-ink); }
.uz-giris-goster:focus-visible { outline: 2px solid var(--giris-odak); outline-offset: 1px; }

.uz-giris-dugme {
    margin-top: 4px; height: 50px; border: 0; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--giris-lacivert); color: #fff; font-size: 15.5px; font-weight: 650; cursor: pointer;
    box-shadow: 0 1px 2px rgba(20, 34, 61, .2), 0 8px 20px -10px rgba(20, 34, 61, .55);
    transition: background-color .15s;
}
.uz-giris-dugme:hover:not(:disabled) { background: var(--giris-lacivert-koyu); }
.uz-giris-dugme .bi-arrow-right { transition: transform .15s; }
.uz-giris-dugme:hover:not(:disabled) .bi-arrow-right { transform: translateX(3px); }
.uz-giris-dugme:focus-visible { outline: 3px solid var(--giris-turuncu); outline-offset: 2px; }
.uz-giris-dugme:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

.uz-giris-hata {
    display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 10px;
    background: var(--giris-hata-zemin); border: 1px solid var(--giris-hata-cizgi); color: var(--giris-hata-yazi);
    font-size: 14px; line-height: 1.45;
}
.uz-giris-hata .bi { margin-top: 1px; }
.uz-giris-yardim { margin: 0; font-size: 13px; line-height: 1.5; color: var(--uz-ink-soft); }
.uz-giris-alt {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--uz-border);
    font-size: 12.5px; color: var(--uz-ink-faint);
}
.uz-giris-alt .bi { margin-right: 4px; }

/* ---- dar ekran: marka paneli kalkar, logo formun üstüne gelir ---- */
@media (max-width: 900px) {
    .uz-giris { grid-template-columns: 1fr; }
    .uz-giris-marka { display: none; }
    .uz-giris-form-alani { align-items: flex-start; padding: 40px 16px; }
    .uz-giris-form .uz-giris-logo-mobil { display: inline-flex; height: 34px; margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .uz-giris-dugme, .uz-giris-dugme .bi-arrow-right, .uz-giris-girdi input { transition: none; }
}

/* ===================== Blazor hata banner'ı ===================== */
#blazor-error-ui {
    background: var(--uz-danger-soft); color: var(--uz-danger); padding: 12px 20px;
    border-top: 1px solid var(--uz-danger); bottom: 0; display: none; left: 0;
    position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss, #blazor-error-ui .reload { cursor: pointer; margin-left: 10px; }

/* ===================== KPI bantları ===================== */
.uzser-kpi {
    display: flex; align-items: center; gap: 14px; background: var(--uz-surface);
    border: 1px solid var(--uz-border); border-radius: var(--uz-radius);
    padding: 15px 18px; box-shadow: var(--uz-shadow-sm); height: 100%;
}
.uzser-kpi-ic {
    width: 46px; height: 46px; border-radius: var(--uz-radius); flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; font-size: 21px;
}
.uzser-kpi-body { min-width: 0; }
.uzser-kpi-l { font-size: 12.5px; color: var(--uz-ink-soft); font-weight: 500; }
.uzser-kpi-v {
    font-size: 26px; font-weight: 700; color: var(--uz-ink); line-height: 1.15; letter-spacing: -.8px;
}
.uzser-kpi-v .u { font-size: 14px; font-weight: 600; color: var(--uz-ink-soft); margin-left: 3px; }
.uzser-kpi-sub { font-size: 12px; color: var(--uz-ink-soft); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uzser-kpi-trend { font-size: 12px; font-weight: 600; margin-top: 2px; }
/* ⚠️ İkon zeminleri jetondan gelir; sabit renkler koyu temada beyaz kutulara dönüyordu. */
.uzser-kpi-ic.t-blue   { background: var(--uz-info-soft);    color: var(--uz-info); }
.uzser-kpi-ic.t-green  { background: var(--uz-ok-soft);      color: var(--uz-ok); }
.uzser-kpi-ic.t-red    { background: var(--uz-danger-soft);  color: var(--uz-danger); }
.uzser-kpi-ic.t-amber  { background: var(--uz-warn-soft);    color: var(--uz-warn); }
.uzser-kpi-ic.t-purple { background: var(--uz-info-soft);    color: var(--uz-info); }
.uzser-kpi-ic.t-cyan   { background: var(--uz-info-soft);    color: var(--uz-info); }
.uzser-kpi-ic.t-gray   { background: var(--uz-neutral-soft); color: var(--uz-neutral); }
.uzser-kpi-ok     { color: var(--uz-ok); }
.uzser-kpi-warn   { color: var(--uz-warn); }
.uzser-kpi-danger { color: var(--uz-danger); }

/* ===================== Sürükleme tutacağı ===================== */
.uz-drag { cursor: grab; user-select: none; }
.uz-drag:active { cursor: grabbing; }

/* ===================== Pano ızgarası ===================== */
.uzser-dash-grid .grid-stack-item-content { inset: 4px; overflow: hidden; }
.uzser-dash-grid .grid-stack-item-content > .card { height: 100%; display: flex; flex-direction: column; }
.uzser-dash-grid .card-header { flex: 0 0 auto; padding: 8px 12px; }
.uzser-dash-grid .card-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 8px 12px; display: flex; flex-direction: column; }
.uzser-dash-grid .card-body > .dxbl-chart,
.uzser-dash-grid .card-body .dxbl-chart,
.uzser-dash-grid .card-body > .dxbl-pie-chart { flex: 1 1 auto; min-height: 0; max-width: 100%; }
.uzser-grid-fill { flex: 1 1 auto; min-height: 0; }

/* ===================== Mobil ===================== */
@media (max-width: 768px) {
    .uzser-content { padding: 14px 12px 32px; min-width: 0; }
    .uzser-main { min-width: 0; }
    .dxbl-grid { font-size: 13px; max-width: 100%; }
    h1 { font-size: 22px; } h3 { font-size: 18px; }
    .uzser-page-actions { flex-wrap: wrap; }
    .dxbl-popup, .dxbl-window { max-width: 96vw !important; }
    .dxbl-popup-body { max-height: 80vh; overflow-y: auto; }
}


/* ===================== Kenar çubuğu: simge modu ===================== */
/* Pano ve akış tasarımcısı gibi TUVAL ekranlarında menü 64px'e iner; üzerine gelince
   AÇILIR. Açılma içeriği İTMEZ (overlay): panonun yerleşimi her hover'da yeniden
   hesaplanırsa bileşenler zıplar ve gridstack sürükleme sırasında konumu kaybeder. */
.uzser-shell.dar {
    grid-template-columns: var(--uz-sidebar-dar-w, 64px) 1fr;
}

.uzser-shell.dar .uzser-sidebar {
    position: fixed;
    top: var(--uz-header-h);
    left: 0;
    bottom: 0;
    width: var(--uz-sidebar-dar-w, 64px);
    z-index: 40;
    transition: width .18s ease, box-shadow .18s ease;
    overflow: hidden;
}

.uzser-shell.dar .uzser-sidebar:hover,
.uzser-shell.dar .uzser-sidebar:focus-within {
    width: var(--uz-sidebar-w);
    box-shadow: var(--uz-shadow-float);
    overflow-y: auto;
}

/* Simge modunda YALNIZ ikon görünür; metin yer kaplamasın diye genişliği sıfırlanır
   (display:none DevExpress ağacının ölçümünü bozuyor ve ikonlar sola yapışıyordu). */
.uzser-shell.dar .uzser-sidebar:not(:hover):not(:focus-within) .uzser-nav .dxbl-treeview-item-text {
    opacity: 0;
    width: 0;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

.uzser-shell.dar .uzser-sidebar:not(:hover):not(:focus-within) .uzser-nav .dxbl-treeview-item-container {
    justify-content: center;
    padding-inline: 0;
}

.uzser-shell.dar .uzser-sidebar:not(:hover):not(:focus-within) .uzser-nav .bi {
    margin-right: 0;
    font-size: 1.05rem;
}

/* Grup oklarını simge modunda gizle: tıklanamayacak kadar dar bir alanda ok göstermek
   "açılır" yanılsaması veriyordu. */
.uzser-shell.dar .uzser-sidebar:not(:hover):not(:focus-within) .uzser-nav .dxbl-treeview-item-expand-button {
    display: none !important;
}