/* ============================================================
   Uzser AI Engine — BI katmanı.
   site.css'in ÜSTÜNE yüklenir (App.razor'da sonra linklenir).

   ⚠️ Bu dosya bir zamanlar kendi renklerini SABİT yazıyordu (mavi gradyanlar,
   beyaz cam başlık, 14px yuvarlaklık). site.css jetona geçince bu katman onu
   eziyor ve koyu temada ekran "alaca" kalıyordu: kabuk koyu, içindeki her kart
   beyaz. Artık tek bir renk bile burada tanımlanmaz — hepsi --uz-* jetonundan
   türer, böylece açık/koyu geçişi tek yerden yönetilir.

   --bi-* adları KORUNUYOR: başka dosyalar bunlara bakıyor olabilir.
   ============================================================ */

:root {
    --bi-accent:       var(--uz-brand);
    --bi-accent-2:     var(--uz-brand);
    /* Gradyan yerine düz vurgu: koyu zeminde gradyan çamurlaşıyor ve tek-vurgu
       kuralını bozuyor. */
    --bi-accent-grad:  var(--uz-brand);
    --bi-side-grad:    var(--uz-sidebar-bg);
    --bi-content-bg:   var(--uz-content-bg);
    /* Kart artık banttan ayrışıyor: kendi yarıçapı ve (yalnız açık temada)
       kendi gölgesi var. Koyuda --uz-shadow-card none'dır; yükselti oradaki
       yüzey basamağından gelir. */
    --bi-card-radius:  var(--uz-radius-lg);
    --bi-card-shadow:  var(--uz-shadow-card);
    --bi-card-shadow-hi: var(--uz-shadow);
    --bi-ink:          var(--uz-ink);
    --bi-ink-soft:     var(--uz-ink-soft);
    --bi-hair:         var(--uz-border);
    --bi-border:       var(--uz-border);
    --bi-surface:      var(--uz-surface);
    --bi-surface-2:    var(--uz-surface-sunk);
}

/* ⚠️ font-feature-settings KALDIRILDI: "cv02/cv03/cv04/ss01" Inter'in karakter
   varyantları. Ne o zamanki sistem yazı tipinde ne de bugünkü Manrope'de böyle bir
   özellik var — hiçbir şey yapmayan, ama yeni gelenin "bir işe yarıyor" sanacağı
   bir satırdı.
   ⚠️ DevExpress kendi yazı tipini yazar; jetonun dışında kalan tek yüzey o olmasın
   diye aileyi devralması söyleniyor. */
body { background: var(--bi-content-bg); }
.dxbl-text-edit, .dxbl-btn, .dxbl-grid, .dxbl-combobox, .dxbl-popup, .dxbl-treeview,
.dxbl-tabs, .dxbl-form-layout, .dxbl-listbox, .dxbl-date-edit, .dxbl-spin-edit,
[class^="dxbl-"], [class*=" dxbl-"] { font-family: inherit; }

/* Rakamların hizalanması gereken yerler — tablo kolonları, KPI, tutar.
   Gövdeye genel verilmiyor: düz metinde sabit genişlikli rakam kelime aralığını bozar. */
.uzser-dash-grid td, .uzser-dash-grid th, .widget-grid td,
.uzser-kpi-value, .uz-kpi-delta, .approval-kpi-value { font-variant-numeric: tabular-nums; }

/* ===================== Kabuk: içerik zemini ===================== */
.uzser-main { background: var(--bi-content-bg); }
.uzser-content { padding: 22px 26px 48px; }

/* ===================== Sidebar ===================== */
.uzser-sidebar {
    background: var(--bi-side-grad) !important;
    border-right: 1px solid var(--uz-sidebar-border);
    padding-top: 4px;
}
/*
   ⚠️ Sidebar'a marka rozeti EKLEMEYİN. Buradaki "UZSER BI" rozeti ürünün eski adından
   kalmıştı ve başlıktaki gerçek marka ("Uzser AI Engine") ile çelişiyordu — kullanıcıya
   aynı ekranda iki farklı ürün adı gösteriyordu. Marka tek yerde durur: uzser-brand.

   Rozetin içine yerleştirilmiş yeşil "canlı" noktası da kaldırıldı. Yorumu "anlam taşır
   (bağlantı ayakta)" diyordu ama nokta saf CSS'ti: hiçbir duruma bağlı değildi ve
   bağlantı kopukken de yeşil yanıyordu. Yanlış bilgi veren gösterge, göstergesizlikten
   kötüdür. Gerçek bağlantı durumu gerekiyorsa duruma bağlı bir bileşen olarak eklenmeli.
*/
.uzser-nav .dxbl-treeview-item-container { padding: 8px 11px; }
.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 .bi { opacity: .92; }

/* ===================== Header =====================
   Cam etkisi KALDIRILDI: yarı saydam beyaz, koyu temada gri bir sis bırakıyordu
   ve altındaki içeriği okunmaz yapıyordu. */
.uzser-header {
    background: var(--uz-header-bg);
    border-bottom: 1px solid var(--bi-hair);
}
.uzser-brand { font-weight: 800; letter-spacing: -.2px; }
.uzser-brand .bi { color: var(--bi-accent); }

/* ===================== Sayfa başlığı ===================== */
.uzser-page-header { margin-bottom: 20px; }
.uzser-page-header h1, .uzser-page-header h3 { font-size: 22px; font-weight: 700; }
h3 { letter-spacing: -.2px; }

/* ===================== Bantlar (eski "kart") =====================
   Gölge ve hover-lift KALDIRILDI: ayrım kenarla yapılır. Yükselen kartlar
   iş aracında dikkat dağıtıyor ve koyu zeminde bulanık leke bırakıyor. */
.card, .uzser-card {
    border: 1px solid var(--bi-hair);
    border-radius: var(--bi-card-radius);
    box-shadow: var(--bi-card-shadow);
    background: var(--uz-surface);
    transition: border-color .18s ease;
}
.card:hover { border-color: var(--uz-ink-faint); }
.card-header {
    border-bottom: 1px solid var(--bi-hair);
    background: transparent;
    font-weight: 700; color: var(--bi-ink); letter-spacing: -.1px;
}

/* ===================== Pano widget'ları =====================
   NOT: tasarımcı sürüklemesini bozmamak için kart/başlığına transform veya
   layout'a giren ::before EKLENMEZ. Yalnız zemin/kenar/tipografi. */
.uzser-dash-grid .uv-dash-item > .card {
    border-radius: var(--bi-card-radius);
    box-shadow: var(--bi-card-shadow);
    /* ⚠️ Şerit eskiden HER bileşende --bi-accent idi: on bileşenlik bir pano
       tek renge boğuluyor ve hiçbir kart diğerinden ayrışmıyordu. Artık
       bileşenin KİMLİK rengi (WidgetView satır içi --uz-w-renk yazar).
       Kimlik rengi "iyi/kötü" demez; durum renkleri ayrı kalır. */
    border-top: 2px solid var(--uz-w-renk, var(--bi-accent));
    overflow: hidden;
}
.uzser-dash-grid .card-header {
    padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--bi-ink);
    background: transparent;
}
.uzser-dash-grid .card-body { padding: 11px 14px 13px; }

/* Başlık ikonu: renkli kutucuk içinde — kart tanınırlığını taşıyan ayrıntı. */
.uz-widget-ic {
    display: inline-grid; place-items: center;
    width: 22px; height: 22px; margin-right: 8px; flex: none;
    border-radius: var(--uz-radius-sm);
    font-size: 11.5px; line-height: 1;
    color: var(--uz-w-renk, var(--bi-accent));
    background: var(--uz-w-renk-soft, var(--uz-brand-soft));
}

/* ===================== KPI bantları ===================== */
.uzser-kpi {
    border-radius: var(--bi-card-radius);
    box-shadow: var(--bi-card-shadow);
    border: 1px solid var(--bi-hair);
    transition: border-color .18s ease;
}
.uzser-kpi:hover { border-color: var(--uz-ink-faint); }
.uzser-kpi-ic { border-radius: var(--uz-radius); }
.uzser-kpi-v { letter-spacing: -.6px; font-variant-numeric: tabular-nums; }

/* Bileşen ayarındaki renk seçici. */
.uz-renk-sec {
    width: 26px; height: 26px; padding: 0; flex: none;
    border: 1px solid var(--uz-border); border-radius: var(--uz-radius-sm);
    cursor: pointer; line-height: 1;
}
.uz-renk-sec.uz-renk-oto { background: var(--uz-surface-sunk); color: var(--uz-ink-soft); font-size: 12px; }
/* Seçiliyi KENARLA işaretliyoruz, rengini değiştirerek değil: örneğin göstereceği
   rengi bozmuş oluruz. Dış halka yüzey rengiyle araya boşluk bırakır. */
.uz-renk-sec.secili { outline: 2px solid var(--uz-ink); outline-offset: 2px; }
.uz-renk-sec:focus-visible { outline: 2px solid var(--uz-brand); outline-offset: 2px; }

/* KPI alt satırı: kıyas solda, mini grafik sağda — ikisi aynı hizada. */
.uz-kpi-alt { display: flex; align-items: flex-end; gap: 10px; justify-content: space-between; }
.uz-kpi-alt .uz-kpi-spark { flex: 1 1 auto; min-width: 0; max-width: 130px; }
.uz-kpi-delta { font-variant-numeric: tabular-nums; white-space: nowrap; }

.display-5.fw-bold { letter-spacing: -1px; font-variant-numeric: tabular-nums; }

/* ===================== Butonlar ===================== */
.dxbl-btn-primary {
    background: var(--uz-brand) !important;
    color: var(--uz-brand-fg) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.dxbl-btn-primary:hover { background: var(--uz-brand-dark) !important; }
.dxbl-btn { border-radius: var(--uz-radius-sm) !important; font-weight: 600; }

/* ===================== Grid ===================== */
.dxbl-grid {
    border-radius: var(--bi-card-radius) !important;
    box-shadow: var(--bi-card-shadow);
}
.dxbl-grid .dxbl-grid-header th, .dxbl-grid thead th {
    background: var(--uz-grid-head-bg) !important; letter-spacing: .3px;
    text-transform: uppercase; font-size: 11.5px !important;
}
.dxbl-grid tbody tr:hover > td { background: var(--uz-row-hover) !important; }

/* ===================== Pill / rozet ===================== */
.uz-pill, .uzser-badge { box-shadow: none; }

/* ===================== Yönetim Merkezi (hub) ===================== */
.admin-hub-group { margin-bottom: 26px; }
.admin-hub-grouptitle {
    font-size: 12px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    color: var(--bi-ink-soft); margin: 0 2px 12px; display: flex; align-items: center;
}
.admin-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.admin-hub-card {
    display: flex; align-items: center; gap: 13px; text-decoration: none;
    background: var(--uz-surface); border: 1px solid var(--bi-hair); border-radius: var(--bi-card-radius);
    padding: 15px 16px; box-shadow: var(--bi-card-shadow); color: var(--bi-ink);
    transition: border-color .16s ease;
}
.admin-hub-card:hover { border-color: var(--uz-brand); color: var(--bi-ink); }
.admin-hub-ic {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--uz-radius); display: grid; place-items: center;
    font-size: 20px; color: var(--uz-brand); background: var(--uz-brand-soft);
}
.admin-hub-cbody { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.admin-hub-ctitle { font-weight: 700; font-size: 14.5px; letter-spacing: -.1px; }
.admin-hub-cdesc { font-size: 12.5px; color: var(--bi-ink-soft); line-height: 1.35; margin-top: 2px; }
.admin-hub-chev { color: var(--uz-ink-faint); font-size: 14px; flex: 0 0 auto; transition: transform .16s ease, color .16s ease; }
.admin-hub-card:hover .admin-hub-chev { color: var(--bi-accent); transform: translateX(2px); }

/* ===================== Güvenlik: rol kartları ===================== */
.sec-role-card {
    cursor: pointer; border: 1px solid var(--bi-hair); border-radius: var(--uz-radius); background: var(--uz-surface);
    padding: 12px 14px; box-shadow: var(--bi-card-shadow); height: 100%;
    transition: border-color .16s ease;
}
.sec-role-card:hover { border-color: var(--uz-ink-faint); }
.sec-role-card.active { border-color: var(--bi-accent); box-shadow: inset 0 0 0 1px var(--bi-accent); }
.sec-role-name { font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.sec-role-meta { font-size: 12px; color: var(--bi-ink-soft); margin-top: 3px; }
.sec-cov { height: 6px; border-radius: var(--uz-radius); background: var(--uz-surface-sunk); overflow: hidden; margin-top: 8px; }
.sec-cov > i { display: block; height: 100%; background: var(--uz-brand); border-radius: var(--uz-radius); }
.sec-perm-group .list-group-item {
    border-color: var(--uz-border-soft); background: var(--uz-surface); color: var(--uz-ink);
}
.sec-toolbar { position: sticky; top: 0; z-index: 2; background: var(--bi-content-bg); padding: 6px 0; }

/* ===================== AI Akışları (pipeline) ===================== */
.pipe-card { transition: border-color .16s ease; }
.pipe-card:hover { border-color: var(--uz-ink-faint); }
.pipe-ic {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--uz-radius); display: grid; place-items: center;
    color: var(--uz-brand); font-size: 17px; background: var(--uz-brand-soft);
}

/* Dikey zaman çizelgesi — "şu an nerede" görünürlüğü */
.pipe-timeline { position: relative; padding-left: 6px; }
.pipe-step { position: relative; display: flex; gap: 14px; padding: 0 0 18px 0; }
.pipe-step:last-child { padding-bottom: 0; }
.pipe-step::before {
    content: ""; position: absolute; left: 15px; top: 32px; bottom: -4px; width: 2px; background: var(--bi-hair);
}
.pipe-step:last-child::before { display: none; }
.pipe-dot {
    position: relative; z-index: 1; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center; font-size: 14px; border: 2px solid var(--uz-surface);
    box-shadow: 0 0 0 1px var(--bi-hair);
}
/* Durum renkleri jetondan — aynı durum başka listede farklı renk OLAMAZ. */
.pipe-dot.ok   { background: var(--uz-ok);      color: var(--uz-brand-fg); box-shadow: 0 0 0 1px var(--uz-ok); }
.pipe-dot.err  { background: var(--uz-danger);  color: var(--uz-surface);  box-shadow: 0 0 0 1px var(--uz-danger); }
.pipe-dot.run  { background: var(--uz-info);    color: var(--uz-surface);  box-shadow: 0 0 0 1px var(--uz-info); }
.pipe-dot.wait { background: var(--uz-warn);    color: var(--uz-surface);  box-shadow: 0 0 0 1px var(--uz-warn); }
.pipe-dot.skip { background: var(--uz-neutral-soft); color: var(--uz-ink-faint); }
.pipe-dot.idle { background: var(--uz-surface-sunk); color: var(--uz-ink-faint); }
.pipe-step.is-running .pipe-dot { animation: pipePulse 1.2s ease-in-out infinite; }
@keyframes pipePulse {
    0%,100% { box-shadow: 0 0 0 1px var(--uz-info), 0 0 0 0 var(--uz-info-soft); }
    50%     { box-shadow: 0 0 0 1px var(--uz-info), 0 0 0 7px transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .pipe-step.is-running .pipe-dot { animation: none; }
}
.pipe-body { flex: 1; min-width: 0; padding-top: 4px; }

/* ===================== Boş durum ===================== */
.uzser-empty, .uzser-ai-empty {
    background: var(--uz-surface-sunk); border-radius: var(--bi-card-radius);
    color: var(--uz-ink-soft);
}

/* ===================== Giriş ekranı =====================
   Markalı gradyan kapak KALDIRILDI: sabit lacivert, açık temada da koyu
   kalıyordu ve iki temanın hiçbirine ait değildi. */
.uzser-login-shell { background: var(--uz-content-bg); }
.uzser-login-card { border-radius: var(--uz-radius); box-shadow: var(--uz-shadow-sm); }

/* ===================== İnce kaydırma çubuğu ===================== */
.uzser-main::-webkit-scrollbar, .uzser-sidebar::-webkit-scrollbar { width: 9px; }
.uzser-main::-webkit-scrollbar-thumb,
.uzser-sidebar::-webkit-scrollbar-thumb {
    background: var(--uz-border); border-radius: var(--uz-radius);
    border: 2px solid transparent; background-clip: padding-box;
}
.uzser-main::-webkit-scrollbar-thumb:hover { background: var(--uz-ink-faint); background-clip: padding-box; }

/* AI özetinin gövdesi: markdown render edilir (başlık + tablo + grafik).
   Hem onay konsolunda hem çalışma detayında kullanılır.

   ⚠️ Burada bir zamanlar `max-height: 420px; overflow: auto` vardı ve rapor KENDİ
   kaydırma çubuğunu alıyordu. İkisi de zaten kayan bir kabın içinde duruyor —
   onay konsolunda `.approval-detail-body`, çalışma detayında sayfanın kendisi —
   yani ortaya iç içe iki kaydırıcı çıkıyordu: kullanıcı raporu okumak için önce
   dış, sonra iç çubuğu sürüklemek zorunda kalıyor ve tablo ile altındaki grafik
   aynı anda hiç görünmüyordu. Yükseklik sınırı KALDIRILDI; blok içeriği kadar
   uzar, kaydırmayı dıştaki kap yapar. */
.pipe-approval-body {
    border: 1px solid var(--bi-border);
    border-radius: var(--uz-radius);
    background: var(--bi-surface-2);
    padding: 10px 12px;
}
.pipe-approval-body .uzser-ai-md > :first-child { margin-top: 0; }
.pipe-approval-body table { background: transparent; }

/* ⚠️ Geniş tablo, bloğun TAMAMINI değil KENDİNİ kaydırır. Aksi hâlde tek bir
   geniş tablo yüzünden sayfa yatay kayar ve metin de okunmaz hâle gelir. */
.pipe-approval-body .uzser-ai-md table { display: block; overflow-x: auto; max-width: 100%; }

/* Adım özetlerinde markdown: balon değil, akış içinde satır — dış boşluk verilmez. */
.pipe-step .uzser-ai-md > :first-child { margin-top: 0; }
.pipe-step .uzser-ai-md > :last-child { margin-bottom: 0; }

/* ===== Onay karar konsolu =================================================
   Solda kuyruk (ne bekliyor / ne kadar acil), sağda tek kararın tüm bağlamı. */

.approval-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.approval-kpi {
    flex: 0 0 auto; min-width: 118px; text-align: left; cursor: pointer;
    border: 1px solid var(--bi-border); border-radius: var(--uz-radius);
    background: var(--bi-surface); color: var(--uz-ink); padding: 10px 14px;
    display: flex; flex-direction: column; gap: 2px; transition: border-color .15s;
}
.approval-kpi:hover { border-color: var(--uz-ink-faint); }
.approval-kpi.on { border-color: var(--uz-brand); box-shadow: inset 0 0 0 1px var(--uz-brand); }
.approval-kpi-value { font-size: 1.35rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.approval-kpi-label { font-size: .75rem; color: var(--uz-ink-soft); }
/* Dar ekranda dört gösterge 3+1 sabit genişlikte diziliyordu: ikişer, eşit. */
@media (max-width: 576px) {
    .approval-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .approval-kpi { min-width: 0; }
}
.approval-kpi.warn .approval-kpi-value { color: var(--uz-warn); }
.approval-kpi.danger .approval-kpi-value { color: var(--uz-danger); }

.approval-console { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; align-items: start; }

/* --- kuyruk --- */
.approval-queue {
    border: 1px solid var(--bi-border); border-radius: var(--uz-radius);
    background: var(--bi-surface); overflow: hidden; max-height: 72vh; overflow-y: auto;
}
.approval-queue-head { padding: 10px; border-bottom: 1px solid var(--bi-border); position: sticky; top: 0; background: inherit; z-index: 1; }
.approval-item {
    width: 100%; display: flex; gap: 0; align-items: stretch; text-align: left;
    background: none; border: 0; border-bottom: 1px solid var(--uz-border-soft); padding: 0; cursor: pointer;
    color: var(--uz-ink);
}
.approval-item:hover { background: var(--uz-row-hover); }
.approval-item.on { background: var(--uz-brand-soft); }
/* Soldaki şerit: bekleme süresini RENKLE söyler — geciken onay listede kaybolmamalı. */
.approval-item-bar { flex: 0 0 var(--uz-stripe); }
.approval-item-bar.fresh { background: var(--uz-ok); }
.approval-item-bar.soon  { background: var(--uz-warn); }
.approval-item-bar.late  { background: var(--uz-danger); }
.approval-item-bar.done  { background: var(--uz-ink-faint); }
.approval-item-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-width: 0; flex: 1; }
.approval-item-title { font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-item-meta { font-size: .74rem; color: var(--uz-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval-item-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .72rem; margin-top: 2px; }

/* --- karar paneli --- */
.approval-detail {
    border: 1px solid var(--bi-border); border-radius: var(--uz-radius);
    background: var(--bi-surface); color: var(--uz-ink);
    display: flex; flex-direction: column; max-height: 72vh;
}
.approval-detail-head { padding: 14px 16px 10px; border-bottom: 1px solid var(--uz-border-soft); }
.approval-detail-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
.approval-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.approval-chip {
    display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--uz-ink-soft);
    background: var(--uz-neutral-soft); border-radius: var(--uz-radius); padding: 3px 10px;
}

/* Kararın en kritik bilgisi: onaylarsam ne olacak? */
.approval-impact {
    display: flex; gap: 10px; align-items: flex-start; font-size: .84rem;
    border-radius: var(--uz-radius); padding: 10px 12px; margin-bottom: 14px; border: 1px solid transparent;
}
.approval-impact i { font-size: 1.05rem; margin-top: 1px; }
/* ⚠️ "Kuru çalışma" ile "gerçek çalışma" ayrımı renkle taşınır: onaylayan kişi
   dış sisteme YAZILIP yazılmayacağını görmeden karar vermemeli. */
.approval-impact.dry  { background: var(--uz-ok-soft);     border-color: var(--uz-ok);     color: var(--uz-ok); }
.approval-impact.live { background: var(--uz-danger-soft); border-color: var(--uz-danger); color: var(--uz-danger); }

.approval-section { margin-bottom: 16px; }
.approval-section-title {
    display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .03em; color: var(--uz-ink-soft); margin-bottom: 6px;
}
.approval-payload { border: 1px solid var(--bi-border); border-radius: var(--uz-radius); overflow: auto; max-height: 340px; }
.approval-payload table { margin: 0; font-size: .8rem; }
.approval-payload thead th {
    position: sticky; top: 0; background: var(--uz-grid-head-bg); font-size: .74rem; font-weight: 600;
    color: var(--uz-ink-soft); white-space: nowrap;
}
.approval-payload-raw {
    background: var(--uz-surface-sunk); border: 1px solid var(--bi-border); border-radius: var(--uz-radius);
    color: var(--uz-ink);
    padding: 10px 12px; font-size: .76rem; max-height: 300px; overflow: auto; margin: 0;
}

.approval-actions {
    border-top: 1px solid var(--uz-border-soft); padding: 12px 16px;
    display: flex; flex-direction: column; gap: 10px; background: var(--uz-surface-sunk);
    border-radius: 0 0 var(--uz-radius) var(--uz-radius);
}

.approval-empty { text-align: center; color: var(--uz-ink-soft); padding: 64px 16px; }
.approval-empty i { font-size: 2.2rem; }
.approval-empty-sm { display: flex; align-items: center; gap: 8px; justify-content: center; color: var(--uz-ink-soft); font-size: .82rem; padding: 28px 12px; }

/* Dar ekran: tek sütuna in. Kuyruk kısalır ki karar paneli ekranda kalsın — aksi halde
   72vh'lik kuyruk tüm ekranı kaplar ve detay aşağıda görünmez.
   NOT: bu blok temel kurallardan SONRA gelmeli; aynı özgüllükte son yazan kazanır. */
@media (max-width: 991px) {
    /* minmax(0,…) şart: "1fr" en geniş içeriğe (uzun AI değerlendirmesi, JSON) göre büyüyüp sayfayı yana taşırıyordu. */
    .approval-console { grid-template-columns: minmax(0, 1fr); }
    .approval-queue { max-height: 320px; }
    .approval-detail { max-height: none; }
}

/* ⚠️ Eski `html[data-bs-theme="dark"]` blokları KALDIRILDI. Ayrı bir koyu tema
   listesi tutmak, her yeni kural için iki yerde renk yazmak demekti ve ikisi
   kaçınılmaz olarak ayrışıyordu. Artık tek kaynak --uz-* jetonları. */

/* ===================== KPI rakamı =====================
   ⚠️ Sabit punto (Bootstrap display-5 = 48px) KULLANILMAZ. Canlıda ölçüldü
   (HİSAR SÜT, "Toplam Açık Borç"): 98.877.777,59 değeri 302px yer kaplıyor,
   kart 249px; rakam kartın dışına 53px taşıyor ve kapsayıcı overflow:visible
   olduğu için kırpılmadan komşunun üstüne biniyordu. Tutar alanları milyarlara
   çıkabildiğinden "sığar" varsayımı en çok da en önemli müşteride bozuluyor.

   Ölçünün dayanağı KARTIN genişliği; pencereninki değil. Önce vw denendi ve
   ölçümle elendi: pencere 1500px, kart 275px olduğu için punto hep üst sınırda
   kalıyor ve hiçbir şey değişmiyordu. Alt sınır okunabilirliği, üst sınır eski
   görünümü korur. */
.uzser-dash-grid .card-body { container-type: inline-size; }

.uzser-kpi-value {
    display: block;
    max-width: 100%;
    /* Sığdırma hem karta hem RAKAM SAYISINA bağlı: yalnız karta bağlansaydı
       "12.345" ile "98.877.777,59" aynı puntoyu alır, uzun olan yine taşardı.
       Tabular rakam ~0.62em genişliğinde; N karakterin sığması için punto en çok
       kart genişliği / (0.62·N) olabilir — pay 140 bu orandan pay bırakılarak seçildi.
       --uz-kpi-len bileşende satır içi yazılır (bkz. WidgetView, KPI dalı). */
    font-size: clamp(1.1rem, calc(140cqw / var(--uz-kpi-len, 12)), 3rem);
    line-height: 1.1;
    white-space: nowrap;
    /* display-5 sınıfıyla birlikte kaybolan tipografi burada korunuyor:
       tabular-nums olmadan rakamlar oynak genişlikte çizilir ve KPI titrer. */
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   BİLEŞEN SATIR İŞLEMLERİ — ortak kaynaklı tablolarda
   ⚠️ Salt okunur liste yarım üründür: "onay bekliyor" satırını gören kullanıcı
   kararı vermek için menüden başka bir ekran aramak zorunda kalıyordu.
   ============================================================ */
.uz-widget-eylem {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 99px; cursor: pointer;
    font-family: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.5;
    color: var(--uz-brand); background: var(--uz-brand-soft);
    border: 1px solid transparent; white-space: nowrap;
}
.uz-widget-eylem:hover:not(:disabled) { border-color: var(--uz-brand); }
.uz-widget-eylem:focus-visible { outline: 2px solid var(--uz-brand); outline-offset: 2px; }
.uz-widget-eylem:disabled { opacity: .5; cursor: default; }

/* "Hepsini gör" — kartın altında, tabloyu itmeyen ince bir satır. */
.uz-widget-git { margin-top: 8px; font-size: 12px; }
.uz-widget-git a { color: var(--uz-brand); text-decoration: none; font-weight: 600; }
.uz-widget-git a:hover { text-decoration: underline; }

/* İşlem sonucu KARTIN İÇİNDE söylenir; sessizce başlatmak kullanıcıyı
   "oldu mu?" diye başka ekrana baktırırdı. */
.uz-widget-eylem-sonuc {
    margin-top: 6px; font-size: 12px; color: var(--uz-ink-soft);
    background: var(--uz-surface-sunk); border: 1px solid var(--uz-border-soft);
    border-radius: var(--uz-radius-sm); padding: 5px 9px;
}

/* ===================== Akış haritası (çalışma izleme) =====================
   Durum rengi düğümde --c jetonuyla taşınır; kenarlık, ikon zemini ve rozet ondan türer — aynı durum
   zaman çizelgesindeki noktayla (pipe-dot) aynı renkte olmalı. Canlı durum sınıfta (d-ok…), oynatma
   karesi data-o özniteliğinde: oynatma sırasında sınıflar yok sayılır. */
.uz-ah { display: flex; flex-direction: column; gap: 10px; }
.uz-ah-arac { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 31px; }
.uz-ah-lejant { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--uz-ink-soft); }
.uz-ah-lejant span { display: inline-flex; align-items: center; gap: 5px; }
.uz-ah-lejant .d { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.uz-ah-lejant .d.ok { background: var(--uz-ok); }
.uz-ah-lejant .d.run { background: var(--uz-info); }
.uz-ah-lejant .d.wait { background: var(--uz-warn); }
.uz-ah-lejant .d.err { background: var(--uz-danger); }
.uz-ah-lejant .d.yok { background: var(--uz-surface-sunk); box-shadow: inset 0 0 0 1px var(--uz-border); }
.uz-ah-baslik { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--uz-ink); font-variant-numeric: tabular-nums; }
.uz-ah-baslik:empty { display: none; }
.uz-ah-arac > .btn { margin-left: auto; }
.uz-ah-baslik:not(:empty) + .btn { margin-left: 0; }
.uz-ah-not { font-size: 12.5px; color: var(--uz-ink-soft); background: var(--uz-surface-sunk); border-radius: var(--uz-radius-sm); padding: 6px 10px; }

.uz-ah-kaydir {
    overflow-x: auto; overflow-y: hidden; border-radius: var(--uz-radius);
    background-color: var(--uz-surface-sunk);
    background-image: radial-gradient(circle, var(--uz-border) 1px, transparent 1.2px);
    background-size: 18px 18px;
}
.uz-ah-olcek { position: relative; margin: 0 auto; }
.uz-ah-sahne { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.uz-ah-cizgiler { position: absolute; inset: 0; overflow: visible; }

.uz-ah-c { fill: none; stroke: var(--uz-border); stroke-width: 2; transition: stroke .25s ease; }
.uz-ah:not([data-oynat]) .uz-ah-c.gecildi,
.uz-ah[data-oynat] .uz-ah-c[data-o="yan"] { stroke: var(--uz-brand); stroke-width: 2.5; }
.uz-ah:not([data-oynat]) .uz-ah-c.akiyor { stroke: var(--uz-info); stroke-dasharray: 3 2; animation: uzAhAkis .8s linear infinite; }
.uz-ah[data-oynat] .uz-ah-c[data-o="yan"] { stroke-dasharray: 100; animation: uzAhCiz .45s ease-out both; }
@keyframes uzAhAkis { to { stroke-dashoffset: -5; } }
@keyframes uzAhCiz { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.uz-ah-etiket { font-size: 11px; fill: var(--uz-ink-soft); paint-order: stroke; stroke: var(--uz-surface-sunk); stroke-width: 4px; stroke-linejoin: round; }

.uz-ah-d {
    --c: var(--uz-ink-faint);
    position: absolute; width: 190px; height: 60px; display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; text-align: left; font: inherit; color: var(--uz-ink); cursor: pointer;
    background: var(--uz-surface); border: 1.5px solid var(--uz-border); border-radius: var(--uz-radius);
    transition: opacity .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.uz-ah-d:hover { box-shadow: var(--uz-shadow-float); }
.uz-ah-d:focus-visible { outline: 2px solid var(--uz-brand); outline-offset: 2px; }
.uz-ah-d.secili { box-shadow: 0 0 0 3px var(--uz-brand-soft), var(--uz-shadow-float); }
.uz-ah-ikon {
    flex: 0 0 34px; height: 34px; border-radius: var(--uz-radius-sm); display: grid; place-items: center; font-size: 16px;
    color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--uz-surface));
}
.uz-ah-metin { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.uz-ah-metin b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uz-ah-metin small { font-size: 11.5px; color: var(--uz-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.uz-ah-tur {
    position: absolute; left: -7px; top: -9px; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
    background: var(--uz-ink); color: var(--uz-surface); font-variant-numeric: tabular-nums;
}
.uz-ah-rozet {
    position: absolute; right: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; display: none;
    place-items: center; font-family: "bootstrap-icons"; font-size: 11px; line-height: 1;
    background: var(--c); color: var(--uz-surface); border: 2px solid var(--uz-surface);
}

/* Durumlar — canlı (sınıf) ve oynatma (data-o) aynı görünümü paylaşır. */
.uz-ah:not([data-oynat]) .uz-ah-d.d-ok,   .uz-ah[data-oynat] .uz-ah-d[data-o="ok"]   { --c: var(--uz-ok); }
.uz-ah:not([data-oynat]) .uz-ah-d.d-err,  .uz-ah[data-oynat] .uz-ah-d[data-o="err"]  { --c: var(--uz-danger); }
.uz-ah:not([data-oynat]) .uz-ah-d.d-run,  .uz-ah[data-oynat] .uz-ah-d[data-o="run"]  { --c: var(--uz-info); }
.uz-ah:not([data-oynat]) .uz-ah-d.d-wait, .uz-ah[data-oynat] .uz-ah-d[data-o="wait"] { --c: var(--uz-warn); }
.uz-ah:not([data-oynat]) .uz-ah-d.d-skip, .uz-ah[data-oynat] .uz-ah-d[data-o="skip"] { --c: var(--uz-ink-faint); }
.uz-ah:not([data-oynat]) .uz-ah-d:is(.d-ok,.d-err,.d-run,.d-wait),
.uz-ah[data-oynat] .uz-ah-d:is([data-o="ok"],[data-o="err"],[data-o="run"],[data-o="wait"]) { border-color: var(--c); }
.uz-ah:not([data-oynat]) .uz-ah-d:is(.d-ok,.d-err,.d-run,.d-wait,.d-skip) .uz-ah-rozet,
.uz-ah[data-oynat] .uz-ah-d[data-o] .uz-ah-rozet { display: grid; }
.uz-ah:not([data-oynat]) .uz-ah-d.d-ok .uz-ah-rozet::before,   .uz-ah[data-oynat] .uz-ah-d[data-o="ok"] .uz-ah-rozet::before   { content: "\f633"; }
.uz-ah:not([data-oynat]) .uz-ah-d.d-err .uz-ah-rozet::before,  .uz-ah[data-oynat] .uz-ah-d[data-o="err"] .uz-ah-rozet::before  { content: "\f659"; }
.uz-ah:not([data-oynat]) .uz-ah-d.d-run .uz-ah-rozet::before,  .uz-ah[data-oynat] .uz-ah-d[data-o="run"] .uz-ah-rozet::before  { content: "\f5d4"; }
.uz-ah:not([data-oynat]) .uz-ah-d.d-wait .uz-ah-rozet::before, .uz-ah[data-oynat] .uz-ah-d[data-o="wait"] .uz-ah-rozet::before { content: "\f41f"; }
.uz-ah:not([data-oynat]) .uz-ah-d.d-skip .uz-ah-rozet::before, .uz-ah[data-oynat] .uz-ah-d[data-o="skip"] .uz-ah-rozet::before { content: "\f63b"; }

/* Geçilmemiş düğüm soluk; oynatmada henüz sırası gelmemiş olan da. */
.uz-ah:not([data-oynat]) .uz-ah-d.d-yok,
.uz-ah[data-oynat] .uz-ah-d:not([data-o]) { opacity: .42; border-style: dashed; }
.uz-ah[data-oynat] .uz-ah-d:not([data-o]) .uz-ah-metin small { visibility: hidden; }
.uz-ah[data-oynat] .uz-ah-d:not([data-o]) .uz-ah-tur { display: none; }

/* Koşan düğüm nabız atar; oynatmada o anki kare öne çıkar. */
.uz-ah:not([data-oynat]) .uz-ah-d:is(.d-run,.d-wait) { animation: uzAhNabiz 1.3s ease-in-out infinite; }
.uz-ah[data-oynat] .uz-ah-d[data-simdi] { transform: translateY(-2px); animation: uzAhNabiz 1s ease-out 1; }
@keyframes uzAhNabiz {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 45%, transparent); }
    70%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .uz-ah-d, .uz-ah-c { transition: none; }
    .uz-ah:not([data-oynat]) .uz-ah-d:is(.d-run,.d-wait),
    .uz-ah[data-oynat] .uz-ah-d[data-simdi],
    .uz-ah .uz-ah-c { animation: none !important; }
    .uz-ah[data-oynat] .uz-ah-c[data-o="yan"] { stroke-dasharray: none; }
}

/* Seçili düğümün adımları (haritanın altında). */
.uz-ah-secim { border-top: 1px solid var(--uz-border); padding-top: 12px; margin-top: 12px; }

/* ===================== Grafik anomalisi =====================
   Şerit bileşenin altında, grafiğe yer bırakacak kadar ince; çip açıklamayı açar. Kırmızı (#e11d48) yalnız
   anomaliye ayrıldı — grafikte işaretli nokta ile çip aynı renkte olmalı ki bağ kurulsun. */
.uz-w-anomali {
    flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--uz-border); font-size: 12px;
}
.uz-w-anomali-bas { color: #e11d48; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.uz-w-anomali-cip {
    border: 1px solid color-mix(in srgb, #e11d48 35%, var(--uz-border)); background: color-mix(in srgb, #e11d48 8%, var(--uz-surface));
    color: var(--uz-ink); border-radius: 999px; padding: 1px 9px; font-size: 12px; cursor: pointer;
    font-variant-numeric: tabular-nums; display: inline-flex; gap: 5px; align-items: center;
}
.uz-w-anomali-cip:hover { background: color-mix(in srgb, #e11d48 16%, var(--uz-surface)); }
.uz-w-anomali-cip:focus-visible { outline: 2px solid #e11d48; outline-offset: 1px; }
.uz-w-anomali-cip b { font-weight: 700; }
.uz-w-anomali-cip b.yukari { color: var(--uz-ok); }
.uz-w-anomali-cip b.asagi { color: var(--uz-danger); }

.uz-anomali-bekle { display: flex; align-items: center; gap: 10px; padding: 18px 4px; color: var(--uz-ink-soft); }
.uz-anomali-bekle small { display: block; color: var(--uz-ink-faint); font-size: 12px; }
.uz-anomali-ozet { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin-bottom: 14px; }
.uz-anomali-ozet > div { display: flex; flex-direction: column; }
.uz-anomali-ozet small { font-size: 12px; color: var(--uz-ink-soft); }
.uz-anomali-ozet b { font-size: 24px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.uz-anomali-ozet b.soluk { color: var(--uz-ink-soft); font-weight: 600; }
.uz-anomali-oran { font-weight: 700; font-size: 14px; padding: 3px 10px; border-radius: 999px; margin-left: auto; }
.uz-anomali-oran.yukari { background: var(--uz-ok-soft); color: var(--uz-ok); }
.uz-anomali-oran.asagi { background: var(--uz-danger-soft); color: var(--uz-danger); }
.uz-anomali-metin { background: var(--uz-surface-sunk); border-radius: var(--uz-radius); padding: 10px 12px; margin-bottom: 12px; }
.uz-anomali-metin p { margin: 4px 0 0; line-height: 1.5; }
.uz-anomali-kaynak { font-size: 11.5px; font-weight: 600; color: var(--uz-brand); }
.uz-anomali-katki { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.uz-anomali-katki th { font-size: 11.5px; font-weight: 600; color: var(--uz-ink-soft); text-align: right; padding: 4px 6px; border-bottom: 1px solid var(--uz-border); }
.uz-anomali-katki th:first-child, .uz-anomali-katki td:first-child { text-align: left; }
.uz-anomali-katki td { text-align: right; padding: 6px; border-bottom: 1px solid var(--uz-border-soft, var(--uz-border)); vertical-align: top; }
.uz-anomali-katki td small { font-size: 11px; color: var(--uz-ink-faint); }
.uz-anomali-katki td .ad { font-weight: 600; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uz-anomali-katki td .pay { height: 4px; border-radius: 2px; background: var(--uz-surface-sunk); margin-top: 4px; max-width: 160px; }
.uz-anomali-katki td .pay i { display: block; height: 100%; border-radius: 2px; background: #e11d48; }
.uz-anomali-katki td.arti { color: var(--uz-ok); font-weight: 600; }
.uz-anomali-katki td.eksi { color: var(--uz-danger); font-weight: 600; }
.uz-anomali-not { font-size: 12px; color: var(--uz-ink-faint); margin-top: 8px; }

/* Veri tanımları süzgeç şeridi: arama + süzgeçler solda, toplu işlemler sağda. */
.uz-ds-arac { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
/* ⚠️ DevExpress düzenleyicileri esnek kapta TAM GENİŞLİĞE yayılır: her süzgeç alt alta tek satır
 oluyordu. Sabit genişlik + flex:none ile şerit tek sıra kalır, dar ekranda alta sarar. */
.uz-ds-arac > * { flex: 0 0 auto; }
.uz-ds-ara { width: 240px; }
.uz-ds-suz { width: 170px; }
.uz-ds-arac .ms-auto { flex: 0 1 auto; }
/* Telefonda süzgeçler 281/263/186… gibi farklı genişliklerde alt alta diziliyordu: arama ve müşteri tam satır,
   seçiciler ikişer, toplu işlemler solda. */
@media (max-width: 576px) {
    .uz-ds-arac > *, .uz-ds-ara { flex: 1 1 100%; width: auto; }
    .uz-ds-arac > .uz-ds-suz { flex: 1 1 calc(50% - 4px); width: auto; }
    .uz-ds-arac > .text-muted { flex: 0 0 auto; }
    .uz-ds-arac .ms-auto { margin-left: 0 !important; }
}
/* Kredi fiyatlandırması: bölüm başlığı (başlık + ipucu + düğme tek satır, dar ekranda sarar) ve önizleme kutusu. */
.uz-kfiy-bolum { margin-bottom: 28px; }
.uz-kfiy-baslik { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.uz-kfiy-baslik h5 { margin: 0; font-size: 1.05rem; }
.uz-kfiy-tablo td, .uz-kfiy-tablo th { white-space: nowrap; }
.uz-kfiy-tablo td:first-child { white-space: normal; min-width: 180px; }
.uz-kfiy-kar { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; }
.uz-kfiy-kar.iyi { background: var(--uz-ok-soft, #e6f4ea); color: var(--uz-ok, #1e7e34); }
.uz-kfiy-kar.orta { background: var(--uz-warn-soft, #fff4e0); color: var(--uz-warn, #a86100); }
.uz-kfiy-kar.kotu { background: var(--uz-danger-soft, #fde8e8); color: var(--uz-danger, #c62828); }
.uz-kfiy-gelismis > summary { cursor: pointer; font-weight: 600; color: var(--uz-ink-soft); }
.uz-kfiy-onizleme { margin-top: 12px; padding: 10px 12px; border-radius: 6px; background: var(--bs-tertiary-bg); font-size: .9rem; display: grid; gap: 4px; }
/* Müşteri gözüyle özet şeridi + hücre: rozet, grup kısıtı ve uyarı alt alta sarar (sabit sütunda taşmasın). */
.uz-ds-gorunum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -4px 0 12px; padding: 6px 10px;
  border-radius: 6px; background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.uz-ds-mg { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; white-space: normal; }

/* AI pano taslağı: kaydetmeden revizyon şeridi. */
.uz-aip-revizyon { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.uz-aip-revizyon i.bi { color: var(--uz-brand); }
.uz-aip-revizyon .form-control { flex: 1 1 auto; }