/* ============================================================================
   mt-data.css — Metronic 9 görünümü: VERİ BİLEŞENLERİ (grid, form layout, tabs,
   treeview/scheduler/splitter gibi diğer içerik bileşenleri)
   ----------------------------------------------------------------------------
   Kapsam: yalnızca bu dosya. Header/sidebar/nav (mt-shell), genel buton/girdi/
   onay kutusu görünümü (mt-controls), popup/dropdown/menü çerçevesi
   (mt-overlays), giriş sayfası (mt-auth), dashboard'lar (mt-pages) burada
   STİLLENMEZ.
   Yükleme sırası: mt-tokens < mt-shell < mt-controls < mt-data (BU DOSYA) <
   mt-overlays < mt-auth < mt-pages — bu dosya buton/girdi temel görünümünü
   mt-controls'tan devralır, yalnız grid/form içindeki boyutları küçültür.
   Yalnız --mt-* token'ları kullanılır. Her !important yorumla açıklanır.
   ============================================================================ */


/* ============================================================================
   A) GRID — dxbl-grid.dxbl-grid (liste görünümleri + iç içe/lookup/popup grid)
   Metronic "kt-card + kt-table (bordered)" görünümü.
   Değişkenler: bootstrap-external.bs5 içindeki --dxbl-grid-* özel özellikleri
   ============================================================================ */

/* --- Dış çerçeve: kart görünümü (bg beyaz, 1px kenarlık, büyük radius, xs gölge) --- */
.dxbl-grid.dxbl-grid {
    --dxbl-grid-border-width: 1px;
    --dxbl-grid-border-color: var(--mt-border);
    --dxbl-grid-outer-border-color: var(--mt-card-border);
    --dxbl-grid-h-line-color: var(--mt-border);
    --dxbl-grid-v-line-color: var(--mt-border);
    --dxbl-grid-border-radius: var(--mt-radius-lg);
    --dxbl-grid-bg: var(--mt-bg);
    --dxbl-grid-color: var(--mt-fg);
    --dxbl-grid-font-size: var(--mt-text-2sm);
    /* Metronic "hover: bg subtle" — hover'da satır rengi devralınmasın */
    --dxbl-grid-hover-bg: var(--mt-bg-subtle);
    --dxbl-grid-hover-color: var(--mt-fg);
    /* seçili satır */
    --dxbl-grid-selection-bg: var(--mt-primary-light);
    --dxbl-grid-selection-color: var(--mt-fg);
    --dxbl-grid-selection-focus-bg: var(--mt-primary-light);
    --dxbl-grid-selection-focus-color: var(--mt-fg);
    /* odaklı satır: ağır çerçeve yerine yalnızca zemin rengiyle belirt */
    --dxbl-grid-focus-bg: var(--mt-primary-light);
    --dxbl-grid-focus-color: var(--mt-fg);
    --dxbl-grid-focus-frame-color: transparent;
    /* başlık ve özet satırları */
    --dxbl-grid-header-font-weight: 400;
    --dxbl-grid-header-bg: var(--mt-bg-subtle);
    --dxbl-grid-header-color: var(--mt-fg-secondary);
    --dxbl-grid-footer-bg: var(--mt-bg-subtle);
    --dxbl-grid-footer-color: var(--mt-fg);
    --dxbl-grid-footer-font-weight: 500;
    --dxbl-grid-group-footer-bg: var(--mt-bg-subtle);
    --dxbl-grid-group-footer-color: var(--mt-fg);
    --dxbl-grid-group-footer-font-weight: 600;
    /* hücre iç boşlukları (Metronic bordered table) */
    --dxbl-grid-text-cell-padding-x: 12px;
    --dxbl-grid-text-cell-padding-y: 10px;
    --dxbl-grid-editor-cell-padding-x: 12px;
    --dxbl-grid-editor-cell-padding-y: 8px;
    /* boş veri alanı iç boşluğu */
    --dxbl-grid-empty-data-area-padding-x: 24px;
    --dxbl-grid-empty-data-area-padding-y: 48px;
    background-color: var(--mt-bg);
    box-shadow: var(--mt-shadow-sm);
    /* köşe yuvarlaklığının dışına taşan başlık/satır zeminini kırp */
    overflow: hidden;
}

/* İç içe grid (detay görünümü kart grubu içinde): daha küçük radius, gölgesiz */
.dxbl-fl-gd .dxbl-grid.dxbl-grid,
.dxbl-group-body .dxbl-grid.dxbl-grid {
    --dxbl-grid-border-radius: var(--mt-radius);
    box-shadow: none;
}

/* --- Başlık satırı --- */
.dxbl-grid.dxbl-grid th.dxbl-grid-header {
    height: var(--mt-table-th-h);
    min-height: var(--mt-table-th-h);
    padding: 0 12px;
    font-size: var(--mt-text-2sm);
    font-weight: 400;
    /* NOT: vertical-align kasıtlı olarak değiştirilmedi — site.css dar kolon
       başlıklarının 2-3 satıra kırılabilmesi için "bottom" hizalama kuralı
       tutuyor (bkz. site.css .dxbl-grid .dxbl-grid-header); burada "middle"
       zorlanırsa o güvenlik ağıyla çelişir. */
}

/* Sıralama okları (dxbl-grid-sort-asc/desc) mevcut ikon rengini miras alsın,
   yalnız boyut/renk tonunu muted yap */
.dxbl-grid.dxbl-grid th.dxbl-grid-header .dxbl-grid-sort-asc,
.dxbl-grid.dxbl-grid th.dxbl-grid-header .dxbl-grid-sort-desc {
    color: var(--mt-fg-faint);
}

/* Filtre hunisi düğmesi: 22x22 ghost, kenarlık/gölge yok */
.dxbl-grid.dxbl-grid .dxbl-grid-filter-menu-funnel-btn.dxbl-btn {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-hover-bg: transparent;
    --dxbl-btn-active-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-box-shadow: none;
    --dxbl-btn-color: var(--mt-fg-faint);
    --dxbl-btn-hover-color: var(--mt-fg-muted);
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
}
/* Kolonda aktif filtre varken huni birincil renge döner */
.dxbl-grid.dxbl-grid .dxbl-grid-filter-menu-funnel-btn.dxbl-grid-filter-menu-funnel-btn-active,
.dxbl-grid.dxbl-grid .dxbl-grid-filter-menu-funnel-btn.dxbl-grid-filter-menu-funnel-btn-filled {
    --dxbl-btn-color: var(--mt-link);
    --dxbl-btn-hover-color: var(--mt-link-hover);
}
/* Dar kolonlarda her başlıkta sürekli duran 22px'lik huni başlık metnini
   yiyordu. Fareli cihazlarda yalnız etkin/dolu süzgecin hunisi hep görünür;
   diğerleri başlığın üzerine gelince ya da başlık klavyeyle odaklanınca çıkar.
   Gizliyken genişliği 0 olur, yer metne kalır. Dokunmatikte (hover yok) huni
   hep görünür. Huni <div aria-hidden> olduğundan sekmeyle odaklanmaz. */
@media (hover: hover) {
    .dxbl-grid.dxbl-grid th.dxbl-grid-header:not(:hover):not(:focus-within) .dxbl-grid-filter-menu-funnel-btn.dxbl-btn:not(.dxbl-grid-filter-menu-funnel-btn-active):not(.dxbl-grid-filter-menu-funnel-btn-filled) {
        width: 0;
        min-width: 0;
        opacity: 0;
        overflow: hidden;
    }
}
/* Kolon yeniden boyutlandırma tutamacına (dxbl-column-resize-anchor) dokunulmadı. */

/* --- Gövde hücreleri / satırlar --- */
.dxbl-grid.dxbl-grid td {
    font-size: var(--mt-text-2sm);
    color: var(--mt-fg);
}
/* tr.cursor-pointer davranışı korunuyor, yalnız görsel hover üstte --dxbl-grid-hover-bg ile veriliyor */

/* Seçim kutucuğu hücreleri: onay kutusu 16px, ortalanmış */
.dxbl-grid.dxbl-grid th.dxbl-grid-selection-cell,
.dxbl-grid.dxbl-grid td.dxbl-grid-selection-cell {
    --dxbl-checkbox-check-element-size: 16px;
    text-align: center;
}

/* Komut hücresi (satır içi aksiyon ikonları): 28x28 ghost ikon düğmesi */
.dxbl-grid.dxbl-grid td.dxbl-grid-command-cell .xaf-inline-action button.xaf-action,
.dxbl-grid.dxbl-grid td.dxbl-grid-command-cell .xaf-inline-action a.xaf-action {
    width: 28px;
    height: 28px;
    border-radius: var(--mt-radius-sm);
}
.dxbl-grid.dxbl-grid td.dxbl-grid-command-cell .xaf-inline-action img {
    filter: var(--mt-icon-filter);
}
.dxbl-grid.dxbl-grid td.dxbl-grid-command-cell .xaf-inline-action button.xaf-action:hover,
.dxbl-grid.dxbl-grid td.dxbl-grid-command-cell .xaf-inline-action a.xaf-action:hover {
    background-color: var(--mt-accent);
}
.dxbl-grid.dxbl-grid td.dxbl-grid-command-cell .xaf-inline-action button.xaf-action:hover img,
.dxbl-grid.dxbl-grid td.dxbl-grid-command-cell .xaf-inline-action a.xaf-action:hover img {
    filter: var(--mt-icon-filter-strong);
}

/* --- Grup satırları / özet (toplam) satırları --- */
/* Grup satırı zemini için özel bir DevExpress değişkeni yok; doğrudan sınıf üstünden */
.dxbl-grid.dxbl-grid tr.dxbl-grid-group-row {
    background-color: var(--mt-bg-subtle);
    font-size: var(--mt-text-2sm);
    font-weight: 600;
}
.dxbl-grid.dxbl-grid tr.dxbl-grid-footer-row,
.dxbl-grid.dxbl-grid tr.dxbl-grid-group-footer-row {
    font-size: var(--mt-text-2sm);
}

/* --- Boş veri alanı --- */
.dxbl-grid.dxbl-grid .dxbl-grid-empty-data-area {
    color: var(--mt-fg-muted);
    font-size: var(--mt-text-2sm);
    text-align: center;
}

/* --- Satır içi düzenleme / filtre satırı editörleri: 30px yükseklik --- */
.dxbl-grid.dxbl-grid tr.dxbl-grid-filter-row .dxbl-text-edit,
.dxbl-grid.dxbl-grid tr.dxbl-grid-edit-row .dxbl-text-edit {
    min-height: 30px;
}

/* --- Sayfalama (pager) — grid altında --- */
.dxbl-grid .dxbl-pager.dxbl-pager {
    --dxbl-pager-font-size: var(--mt-text-2sm);
    --dxbl-pager-bg: var(--mt-bg);
    --dxbl-pager-border-width: 0;
    --dxbl-pager-btn-bg: transparent;
    --dxbl-pager-btn-border-width: 0;
    --dxbl-pager-btn-color: var(--mt-fg-muted);
    --dxbl-pager-btn-hover-bg: var(--mt-accent);
    --dxbl-pager-btn-hover-color: var(--mt-fg);
    --dxbl-pager-border-radius: var(--mt-radius-sm);
    --dxbl-pager-page-btn-bg: transparent;
    --dxbl-pager-page-btn-color: var(--mt-fg-muted);
    --dxbl-pager-page-btn-hover-bg: var(--mt-accent);
    --dxbl-pager-page-btn-hover-color: var(--mt-fg);
    --dxbl-pager-active-page-btn-bg: var(--mt-accent);
    --dxbl-pager-active-page-btn-color: var(--mt-fg);
    padding: 0;
    gap: 4px;
    align-items: center;
}
/* Canlı DOM: div.dxbl-grid-bottom-panel.dxbl-pager-container içinde
   dxbl-pager (sayfa düğmeleri) ve div.dxbl-pager-page-size-selector
   KARDEŞ olarak duruyor; kart altbilgisi (üst çizgi + dolgu) kapsayıcıya
   verilir. */
.dxbl-grid .dxbl-grid-bottom-panel.dxbl-pager-container {
    padding: 10px 16px;
    border-top: 1px solid var(--mt-border);
    align-items: center;
    gap: 12px;
    background: var(--mt-bg);
}
.dxbl-grid .dxbl-pager .dxbl-pager-page-btn,
.dxbl-grid .dxbl-pager .dxbl-pager-btn {
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    font-weight: 500;
    box-shadow: none;
}
.dxbl-grid .dxbl-pager-container .dxbl-pager-summary,
.dxbl-grid .dxbl-pager-container .dxbl-pager-page-size-selector {
    font-size: var(--mt-text-2sm);
    color: var(--mt-fg-muted);
    margin: 0;
    align-items: center;
    gap: 8px;
}
.dxbl-grid .dxbl-pager-container .dxbl-pager-page-size-selector .dxbl-text-edit {
    min-height: 30px;
    width: 76px;
}

/* --- Liste görünümü alanı: kart grid'in kendini doldurmasına izin ver --- */
.main-content > .grid-content {
    background: transparent;
    border: none;
}


/* ============================================================================
   B) FORM LAYOUT — dxbl-form-layout.dxbl-fl (detay görünümler, popup'lar,
   giriş formu). Değişkenler: --dxbl-fl-*, kart grupları için --dxbl-group-*
   ============================================================================ */

/* --- Satır/kolon aralıkları --- */
.dxbl-fl.dxbl-fl {
    --dxbl-fl-item-spacing-x: 20px;
    --dxbl-fl-item-spacing-y: 14px;
    --dxbl-fl-group-spacing-y: 14px;
    /* Sekme içeriği DevExpress'te her yandan .75rem içerideydi (sekme çizgisiyle
       hizasız); yatayda sekme çizgisine hizalanır, üst boşluk C) bölümünde 20px */
    --dxbl-fl-tab-group-content-padding-x: 0;
    --dxbl-fl-tab-group-content-padding-y: 0;
    /* XAF sekme grubu (.dxbl-fl-gt): DX '.dxbl-fl .dxbl-fl-gt .dxbl-tabs' (0,3,0) seçili/hover rengini
       bu değişkenden (--bs-primary) alıyor; C) bölümündeki .dxbl-tabs.dxbl-tabs eşlemesi orada eziliyordu. */
    --dxbl-fl-tab-group-tab-selected-color: var(--mt-link);
    --dxbl-fl-tab-group-tab-hover-color: var(--mt-link);
}

/* --- Etiketler (caption) --- */
.dxbl-fl.dxbl-fl label.dxbl-fl-cpt {
    font-size: var(--mt-text-2sm);
    font-weight: 500;
    color: var(--mt-zinc-700);
    line-height: 1.3;
}
/* Zorunlu alan yıldızı: XAF işareti ("*") etiket METNİNE düz karakter olarak
   ekliyor (<label class="dxbl-fl-cpt xaf-item-...">Başlık*</label>; ayrı öğe ya
   da sınıf yok), CSS tek karakteri boyayamıyor. ZorunluAlanIsaretiController
   (Blazor.Server) yıldızı metinden alıp etikete .mt-zorunlu sınıfını veriyor;
   yıldız burada Metronic'teki gibi kırmızı çizilir. */
.dxbl-fl.dxbl-fl label.dxbl-fl-cpt.mt-zorunlu::after {
    content: "*";
    flex: none;
    margin-left: 2px;
    color: var(--mt-danger);
}

/* Yatay öğelerde etiket, 34px'lik editörle dikey ortalansın */
.dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal {
    align-items: center;
}

/* --- Etiket genişliği ve dar kolonda üste geçme (Metronic form düzeni) ---
   DevExpress caption-alignment="All" ile formdaki EN UZUN etiketi ölçüp
   hepsini o genişliğe (Personel'de 180px) hizalıyor; dar kolonlarda girdiye
   birkaç piksel kalıyor, değerler okunmuyordu (canlı doğrulama: "Kart No"
   kutusunda yalnız ilk hane görünüyordu). Burada:
     - etiket sütunu Metronic'teki gibi makul, sabit bir genişliğe çekilir
       (uzun etiketler iki satıra kırılır),
     - öğe satır sarmalı (flex-wrap) olur: etiket + girdi yan yana sığmıyorsa
       girdi kendiliğinden etiketin ALTINA iner ve tam genişlik kullanır.
   DevExpress değeri form elemanına satır-içi değişken olarak yazıyor
   (--dxbl-fl-caption-width-large-screen); alt öğelerde yeniden tanımlamak
   miras zincirinde onu geçer. */
.dxbl-fl.dxbl-fl .dxbl-fl-item {
    --mt-fl-caption-w: 150px; /* 124px geniş kartlarda etiketleri 2-3 satıra kırıyordu */
    --dxbl-fl-caption-width-large-screen: var(--mt-fl-caption-w);
}
.dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal {
    flex-wrap: wrap;
    row-gap: 6px;
}
.dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-cpt {
    flex: 0 0 var(--mt-fl-caption-w);
    width: var(--mt-fl-caption-w);
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word; /* yalnız tek kelime sığmıyorsa böl ("anywhere" kelime ortasından kırıyordu) */
    padding-right: 12px;
    /* Etiket girdiyle aynı hizada: DevExpress etiketi 27px'lik kutuda üste
       yaslıyordu (tek satırda metin ~5px yukarıda). Kutu en az bir girdi
       yüksekliğinde, metin dikeyde ortalı; çok satırlı etiket aşağı büyür. */
    display: flex;
    align-items: center;
    min-height: var(--mt-control-h);
    padding-top: 0;
    padding-bottom: 0;
}
.dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-ctrl {
    flex: 1 1 140px;
    min-width: min(140px, 100%);
}
/* Razor panoları (IRazorSayfa'nın "Sayfa" öğesi, modelde ShowCaption=False):
   XAF yine de içi boşluk olan bir etiket çiziyor; yukarıdaki sabit etiket
   sütunu panoyu 124px sağa itiyordu. Başlığı zaten gizli olan etiket kaldırılır. */
.dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal > label.dxbl-fl-cpt.xaf-item-sayfa {
    display: none;
}
/* Onay kutusu / anahtar öğeleri: etiket diğer satırlarla aynı sabit sütunda
   kalır (genel kural), anahtar girdilerin başladığı x'te durur. Etiket eskiden
   flex:1 ile satırı doldurup anahtarı ~440px sağa itiyordu. Kutu dar yeter,
   alta inmez. */
.dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal:has(> .dxbl-fl-ctrl > .dxbl-checkbox) > .dxbl-fl-ctrl {
    flex: 0 0 auto;
    width: auto; /* DevExpress kontrol alanına width:100% veriyor */
    min-width: 0;
}
.dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal:has(> .dxbl-fl-ctrl > .dxbl-checkbox) {
    flex-wrap: nowrap;
}
/* 992px altında DevExpress yatay öğeyi dikey diziyor (column). Sabit etiket
   sütunu (flex-basis 150px) orada YÜKSEKLİĞE dönüşüyor: etiket 150px, girdi
   140px uzuyor, anahtar satır ortasına kayıyordu (900px'de ölçüldü). Dikey
   düzende etiket üstte, girdi/anahtar sol kenarda. */
@media (max-width: 991.98px) {
    .dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal {
        align-items: flex-start;
    }
    .dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-cpt {
        flex: 0 0 auto;
        width: auto;
        min-height: 0;
        padding: 0;
    }
    .dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-ctrl {
        flex: 0 0 auto;
    }
}

/* --- Dekorasyonlu gruplar (.dxbl-fl-gd) = Metronic kt-card --- */
.dxbl-fl-gd > .dxbl-group.dxbl-group {
    --dxbl-group-border-width: 1px;
    --dxbl-group-border-color: var(--mt-card-border);
    --dxbl-group-border-radius: var(--mt-radius-lg);
    --dxbl-group-bg: var(--mt-bg);
    --dxbl-group-color: var(--mt-fg);
    /* başlık çubuğunun zemini: DevExpress zincirini de (--dxbl-fl-group-header-bg)
       hem de doğrudan bileşen değişkenini beyaza çekiyoruz */
    --dxbl-fl-group-header-bg: var(--mt-bg);
    --dxbl-group-header-bg: var(--mt-bg);
    --dxbl-group-header-btn-color: var(--mt-fg-muted);
    --dxbl-group-header-btn-hover-color: var(--mt-fg);
    --dxbl-group-header-btn-hover-bg: var(--mt-accent);
    /* gövde iç boşluğu (Metronic kart gövdesi ~16-20px) */
    --dxbl-fl-group-content-padding-x: 20px;
    --dxbl-fl-group-content-padding-y: 16px;
    box-shadow: var(--mt-shadow-sm);
    overflow: visible; /* açılır menüler/takvimler kırpılmasın */
}
/* Kart içine iç içe kart grubu: ikinci gölge yok, küçük radius */
.dxbl-fl-gd .dxbl-fl-gd > .dxbl-group.dxbl-group {
    --dxbl-group-border-radius: var(--mt-radius);
    box-shadow: none;
}

/* Grup başlığı: beyaz zemin (DevExpress'in çizdiği gri çubuğu kaldırır),
   56px (Metronic kart başlığı) min yükseklik, alt kenarlık, 14px/600 başlık */
.dxbl-fl-gd .dxbl-group-header.dxbl-fl-caption-tmpl {
    background-color: var(--mt-bg);
    min-height: var(--mt-card-header-h); /* Metronic kt-card-header: 56px */
    padding: 0 20px;
    border-bottom: 1px solid var(--mt-border);
    display: flex;
    align-items: center;
    /* Başlığın beyaz zemini kartın 12px kavisli kenarlığını örtüyordu (DevExpress
       başlığa 5px verir): iç köşe = kart yarıçapı - kenarlık kalınlığı */
    border-top-left-radius: calc(var(--dxbl-group-border-radius) - 1px);
    border-top-right-radius: calc(var(--dxbl-group-border-radius) - 1px);
}
.dxbl-fl-gd .dxbl-group-header.dxbl-fl-caption-tmpl .dxbl-text {
    font-size: var(--mt-text-sm);
    font-weight: 600;
    color: var(--mt-fg);
}
/* Asıl gri şerit buradan geliyordu (canlı doğrulama): DevExpress grup
   başlığına ::before ile currentColor + %5 opaklık katmanı çiziyor. Metronic
   kart başlığı düz beyaz (koyu temada kart zemini) olduğu için kapatılır. */
.dxbl-fl .dxbl-group > .dxbl-group-header::before {
    content: none;
}

/* Grup gövdesi: kart iç boşluğu (alt biraz daha fazla, Metronic kt-card-content) */
.dxbl-fl-gd .dxbl-group-body-content {
    padding-bottom: 20px;
}

/* Dekorasyonsuz gruplar (.dxbl-fl-gd olmayan): tamamen şeffaf, ek boşluk yok
   — kasıtlı olarak burada hiçbir kural yazılmadı, DevExpress varsayılanı korunur. */


/* ============================================================================
   C) TABS — dxbl-tabs (XAF sekmeli grup .dxbl-fl-gt dahil, Metronic "line tabs")
   ============================================================================ */

.dxbl-tabs.dxbl-tabs {
    --dxbl-tabs-bg: transparent;
    --dxbl-tabs-separator-border-color: var(--mt-border);
    --dxbl-tabs-tab-selected-color: var(--mt-link);
    --dxbl-tabs-tab-hover-color: var(--mt-link);
    --dxbl-tabs-image-spacing: 6px;
}

.dxbl-tabs.dxbl-tabs .dxbl-tabs-tablist {
    border-bottom: 1px solid var(--mt-border);
    background: transparent;
    gap: 20px;
}

.dxbl-tabs.dxbl-tabs .dxbl-tabs-item {
    padding: 12px 0;
    font-size: var(--mt-text-sm);
    font-weight: 500;
    color: var(--mt-fg-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px; /* aktif alt çizginin, liste alt kenarlığıyla çakışması için */
}
.dxbl-tabs.dxbl-tabs .dxbl-tabs-item img.xaf-layout-tab-icon {
    filter: var(--mt-icon-filter);
}
.dxbl-tabs.dxbl-tabs .dxbl-tabs-item:hover {
    color: var(--mt-link);
}
.dxbl-tabs.dxbl-tabs .dxbl-tabs-item:hover img.xaf-layout-tab-icon {
    filter: var(--mt-icon-filter-primary);
}
/* Aktif sekme: yazı tipi ağırlığı normal ile AYNI tutuldu (500) — böylece
   gizli dxbl-tabs-space-reservation ikizinin genişlik ölçümü bozulmaz. */
.dxbl-tabs.dxbl-tabs .dxbl-tabs-item.dxbl-active {
    color: var(--mt-link);
    font-weight: 500;
    border-bottom-color: var(--mt-primary);
}
.dxbl-tabs.dxbl-tabs .dxbl-tabs-item.dxbl-active img.xaf-layout-tab-icon {
    filter: var(--mt-icon-filter-primary);
}

/* Kaydırma düğmeleri: 28px ghost ikon düğmesi */
.dxbl-tabs.dxbl-tabs .dxbl-tabs-scroll-btn-prev,
.dxbl-tabs.dxbl-tabs .dxbl-tabs-scroll-btn-next {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-hover-bg: var(--mt-accent);
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-box-shadow: none;
    width: 28px;
    height: 28px;
}

/* İçerik paneli: çerçevesiz, şeffaf, üstten 20px boşluk */
.dxbl-tabs.dxbl-tabs .dxbl-tabs-content-panel {
    background: transparent;
    border: none;
    padding-top: 20px;
}


/* ============================================================================
   D) DİĞER VERİ BİLEŞENLERİ — minimal ama tutarlı görünüm
   ============================================================================ */

/* --- TreeView / TreeList --- */
.dxbl-treeview.dxbl-treeview {
    --dxbl-treeview-font-size: var(--mt-text-2sm);
    --dxbl-treeview-item-hover-bg: var(--mt-accent);
    --dxbl-treeview-item-hover-color: var(--mt-fg);
    --dxbl-treeview-item-selection-bg: var(--mt-primary-light);
    --dxbl-treeview-item-selection-color: var(--mt-primary-text);
    --dxbl-treeview-item-border-radius: var(--mt-radius-sm);
}
.dxbl-treeview.dxbl-treeview .dxbl-treeview-item-content {
    min-height: 32px;
}

/* --- Accordion (içerikte kullanılanlar; kenar menüsü mt-shell'de stillenir) --- */
.dxbl-accordion.dxbl-accordion:not(.xaf-navmenu) {
    --dxbl-accordion-group-header-bg: var(--mt-bg-subtle);
    --dxbl-accordion-group-header-color: var(--mt-fg);
    --dxbl-accordion-group-header-hover-bg: var(--mt-accent);
    --dxbl-accordion-group-border-color: var(--mt-border);
    --dxbl-accordion-group-item-hover-bg: var(--mt-accent);
    --dxbl-accordion-group-item-selection-bg: var(--mt-primary-light);
    --dxbl-accordion-group-item-selection-color: var(--mt-primary-text);
}

/* --- Scheduler (XAF Event_ListView "Takvim & Ajanda") ---
   Metronic kartı: 12px köşe + hafif gölge (köşe DevExpress'te değişkenden
   geliyordu, 3px). Saat cetveli ve saat hücresi yazıları soluk ton. */
.dxbl-scheduler.dxbl-scheduler {
    --dxbl-scheduler-border-radius: var(--mt-radius-lg);
    border-color: var(--mt-border);
    box-shadow: var(--mt-shadow-xs);
}
.dxbl-scheduler .dxbl-sc-time-rulers-caption,
.dxbl-scheduler .dxbl-sc-hour-cell {
    color: var(--mt-fg-muted);
}
:root.dark .dxbl-scheduler.dxbl-scheduler {
    /* Koyu temada saat hücresi zemini (--bs-light = --mt-zinc-100) ile --mt-border ikisi de #374151;
       çizgiler bir ton açık girdi kenarına çekilir */
    --dxbl-scheduler-border-color: var(--mt-input); /* #4B5563 */
}

/* --- Splitter / master-detail ---
   .dxbl-splitter için bootstrap-external'de ayrı bir değişken bloğu
   bulunamadı; doğrudan kenarlık rengiyle yetinildi — lead canlıda doğrulamalı. */
.dxbl-splitter.dxbl-splitter {
    border-color: var(--mt-border);
}
.dxbl-splitter.dxbl-splitter .dxbl-splitter-pane {
    border-color: var(--mt-border);
}


/* ============================================================================
   E) DETAY GÖRÜNÜMÜ — kullanılabilirlik ve Metronic düzeni (canlı doğrulama sonrası)
   ============================================================================ */

/* --- E1) Sekmeler: saf Metronic alt çizgi ---
   DevExpress aktif sekmeye 1px kutu kenarlığı + 4px üst köşe veriyor; kuralları
   ".dxbl-tabs.dxbl-tabs-top > .dxbl-tabs-tablist > ... > ul > li > .dxbl-tabs-item"
   zinciriyle (8+ sınıf) yazıldığından yalnız !important ile geçilebiliyor. */
.dxbl-tabs.dxbl-tabs .dxbl-tabs-item {
    border-width: 0 0 2px 0 !important;      /* DevExpress kutu kenarlığını kaldırır (bkz. üst not) */
    border-style: solid !important;
    border-color: transparent !important;
    border-radius: 0 !important;
}
.dxbl-tabs.dxbl-tabs .dxbl-tabs-item.dxbl-active {
    border-bottom-color: var(--mt-primary) !important; /* aynı nedenle */
}

/* --- E2) Tablolar: tek satır, taşan metin "…" ---
   XAF alt listelerinde bazı kolonlar modelde 50px tanımlı; çok satıra kırılan
   hücreler satırları 70px'e çıkarıp "A… B… -" gibi kelime yığınları üretiyordu.
   Metronic tablolarında olduğu gibi hücre tek satırda kalır; tam metin kolonu
   genişleterek ya da kaydı açarak görülür. Başlıklar (site.css) kırılmaya devam eder. */
.dxbl-grid.dxbl-grid {
    --dxbl-grid-text-cell-padding-x: 10px;
    --dxbl-grid-text-cell-padding-y: 9px;
    --dxbl-grid-editor-cell-padding-x: 8px;
}
.dxbl-grid .dxbl-grid-table > tbody > tr > td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dxbl-grid .dxbl-grid-table > thead > tr.dxbl-grid-header-row > th.dxbl-grid-header {
    padding-left: 10px;
    padding-right: 10px;
    /* DX color-mix(currentcolor 5%) kuralı (0,4,2); tr.dxbl-grid-header-row ile (0,4,3) olur ve
       onu yener. Sıralanabilir başlık :hover kuralı (0,5,2) üstte kalır. */
    background-color: var(--mt-bg-subtle);
}
/* Tablo hücresindeki onay kutuları: DevExpress kutuyu hücre dolgusu kadar negatif
   kenar boşluğu + vertical-align:top ile yerleştiriyor; bizim hücre dolgumuzla
   kutu satır metninin ~5-6px üstünde kalıyordu. Ortaya hizalanır (satır
   yüksekliği değişmez: kutunun kenar-boşluklu yüksekliği satırdan küçük). */
.dxbl-grid .dxbl-grid-table > tbody > tr > td > .dxbl-checkbox,
.dxbl-grid .dxbl-grid-table > tfoot > tr > td > .dxbl-checkbox,
.dxbl-grid .dxbl-grid-selection-cell .dxbl-grid-header-content > .dxbl-checkbox,
.dxbl-grid .dxbl-grid-command-cell .dxbl-grid-header-content > .dxbl-checkbox {
    vertical-align: middle;
}

/* --- E3) Formlardaki açık/kapalı alanlar: Metronic anahtarı (switch) ---
   Yalnız form düzeni içindeki onay kutuları (tablolardaki seçim kutuları
   değişmez). Tıklama davranışı DevExpress'in kendi <input>'unda kalır; yalnız
   görünüm değişir: iz 36x20, başparmak 16px, açıkken ana renk. */
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox > .dxbl-checkbox-check-element {
    position: relative;
    width: 36px;
    height: 20px;
    min-width: 36px;
    border: 0;
    border-radius: 999px;
    background: var(--mt-zinc-200);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04);
    transition: background-color var(--mt-transition);
    cursor: pointer;
}
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox > .dxbl-checkbox-check-element > svg {
    display: none; /* onay işareti yerine başparmak çizilir */
}
/* DevExpress işaretsiz kutunun 2px çerçevesini ::before ile çiziyor; anahtarda gereksiz */
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox > .dxbl-checkbox-check-element::before {
    content: none;
}
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox > .dxbl-checkbox-check-element::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform var(--mt-transition);
    pointer-events: none;
}
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox.dxbl-checkbox-checked > .dxbl-checkbox-check-element {
    background: var(--mt-primary);
}
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox.dxbl-checkbox-checked > .dxbl-checkbox-check-element::after {
    transform: translateX(16px);
}
/* Boş (null) değer: başparmak ortada, iz soluk */
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox.dxbl-checkbox-indeterminate > .dxbl-checkbox-check-element {
    background: var(--mt-zinc-300);
}
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox.dxbl-checkbox-indeterminate > .dxbl-checkbox-check-element::after {
    transform: translateX(8px);
}
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox:focus-within > .dxbl-checkbox-check-element {
    box-shadow: var(--mt-primary-ring);
}
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox.dxbl-disabled > .dxbl-checkbox-check-element {
    opacity: .5;
    cursor: default;
}
/* Salt okunur / devre dışı anahtar: DevExpress izi beyaza çekiyor ve kutuya
   ayrıca .6 opaklık veriyor (canlı ölçüm: beyaz iz + beyaz başparmak, toplam .3
   opaklık = görünmez). İz Metronic'in pasif anahtarı gibi gri + ince çerçeve,
   değer okunur kalır; yalnız soluklukla düzenlenemez olduğu belli olur. */
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox.dxbl-disabled {
    opacity: 1;
}
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox.dxbl-disabled.dxbl-disabled > .dxbl-checkbox-check-element {
    background-color: var(--mt-zinc-200);
    box-shadow: inset 0 0 0 1px var(--mt-zinc-300);
    opacity: .75;
}
.dxbl-fl.dxbl-fl .dxbl-fl-ctrl > dxbl-check.dxbl-checkbox.dxbl-disabled.dxbl-disabled.dxbl-checkbox-checked > .dxbl-checkbox-check-element {
    background-color: var(--mt-primary);
    box-shadow: none;
    opacity: .6;
}
/* Anahtar satırları: Metronic ayar listesi gibi ince ayırıcıyla */
.dxbl-fl-gd .dxbl-fl-item.dxbl-fl-item-horizontal:has(> .dxbl-fl-ctrl > .dxbl-checkbox) {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* --- E4) Grupsuz basit detay formları tek Metronic kartı içinde ---
   (Grup kartı ya da sekmesi olmayan, etiketli alanlardan oluşan formlar.
   Panolar gibi etiketsiz Razor sayfaları bu kurala girmez.) */
#main-view-content .detail-view-content > .dxbl-fl:has(label.dxbl-fl-cpt):not(:has(.dxbl-fl-gd, .dxbl-fl-gt, label.xaf-item-sayfa)) {
    background: var(--mt-bg);
    border: 1px solid var(--mt-card-border);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-sm);
    padding: 22px 24px 24px;
}

/* --- E4b) Grup kartlarının yanında grupsuz (kök) alanlar ---
   Modelde gruba alınmamış alanlar (Oid, Açıklama, Adres ...) kart dışında
   sayfa zemininde duruyor ve etiket/girdi kolonu kart içindekilerden 21px
   (kart kenarlığı 1 + iç boşluğu 20) solda kalıyordu. Aynı hizaya çekilir. */
#main-view-content .detail-view-content > .dxbl-fl:has(.dxbl-fl-gd) .dxbl-fl-item:not(.dxbl-fl-gd .dxbl-fl-item):not(.dxbl-fl-gt .dxbl-fl-item) {
    padding-left: 31px;
    padding-right: 31px;
}
/* kart dışındaki alanlar artık E4c ile kart yüzeyinde */

/* --- E4c) Kartlı formda başlıksız XAF grubu (SizeableEditors not alanları, tek sınıflı SimpleEditors) kart yüzeyine alınır.
   Yalnız doğrudan alan taşıyan en içteki grup; kart ya da sekme içindekiler hariç. Yüzey ::before ile grubun
   10px kolon boşluğunun içine çizilir (üst kartla aynı 310..1336); etiket hizası (x=331) E4b'den gelir. */
#main-view-content .detail-view-content > .dxbl-fl:has(.dxbl-fl-gd) .dxbl-fl-group:not(.dxbl-fl-gd):not(.dxbl-fl-gt):not(.dxbl-fl-gd .dxbl-fl-group):not(.dxbl-fl-gt .dxbl-fl-group):has(> .dxbl-row > .dxbl-fl-item):not(:has(> .dxbl-row > .dxbl-fl-group)) {
    position: relative;
    isolation: isolate;
    padding-top: 20px;
    padding-bottom: 20px;
}
#main-view-content .detail-view-content > .dxbl-fl:has(.dxbl-fl-gd) .dxbl-fl-group:not(.dxbl-fl-gd):not(.dxbl-fl-gt):not(.dxbl-fl-gd .dxbl-fl-group):not(.dxbl-fl-gt .dxbl-fl-group):has(> .dxbl-row > .dxbl-fl-item):not(:has(> .dxbl-row > .dxbl-fl-group))::before {
    content: "";
    position: absolute;
    inset: 0 calc(var(--dxbl-fl-item-spacing-x, 20px) / 2);
    z-index: -1;
    pointer-events: none;
    background: var(--mt-bg);
    border: 1px solid var(--mt-card-border);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-sm);
}

/* --- E5) Kartlar arası ferahlık ve kolon boşluğu --- */
#main-view-content .detail-view-content > .dxbl-fl.dxbl-fl {
    --dxbl-fl-group-spacing-y: 20px;
}
#main-view-content .detail-view-content .dxbl-fl-gd {
    margin-bottom: 4px;
}

/* --- E6) Salt okunur alanlar: kutu değil, sakin bir değer alanı --- */
.dxbl-fl .dxbl-fl-ctrl > .dxbl-text-edit.dxbl-disabled,
.dxbl-fl .dxbl-fl-ctrl > .dxbl-text-edit.dxbl-readonly {
    --dxbl-text-edit-bg: var(--mt-bg-subtle);
    --dxbl-text-edit-border-color: var(--mt-border);
    box-shadow: none;
}
.dxbl-fl .dxbl-fl-ctrl > .dxbl-text-edit.dxbl-disabled .dxbl-text-edit-input {
    color: var(--mt-fg);
    -webkit-text-fill-color: var(--mt-fg); /* devre dışı girdide soluk metin yerine okunur değer */
    font-weight: 500;
}
/* E6 koyu: --mt-input-bg ile --mt-bg-subtle ikisi de #374151; salt okunur alan düzenlenebilirle aynı görünüyordu.
   DX .dxbl-disabled zeminini --dxbl-text-edit-bg'den değil --dxbl-text-edit-disabled-bg'den alır. */
:root.dark .dxbl-fl .dxbl-fl-ctrl > .dxbl-text-edit:is(.dxbl-disabled, .dxbl-readonly) {
    --dxbl-text-edit-disabled-bg: var(--mt-dark-900); /* #111827, iki temada aynı token */
    --dxbl-text-edit-bg: var(--mt-dark-900);
}

/* --- E7) Kart ve iç kolon genişliğine göre form düzeni (konteyner sorgusu) ---
   Etiketi solda tutmak geniş kartlarda en okunur düzen. Dar kartlarda (ör.
   Personel > Şirket Bilgileri) arama editörlerinin düğmeleri değeri "De…" gibi
   kesiyordu. Kart 420px ya da iç kolon 360px ve altındaysa oradaki TÜM
   etiketler alanın üstüne geçer, alanlar tam genişlik olur. Anahtar satırları
   da aynı düzene uyar: etiket üstte, anahtar girdilerle aynı sol kenarda.
   Seçiciler B) ile aynı özgüllükte: dosyada sonra geldikleri için geçerler. */
.dxbl-fl-gd > .dxbl-group > .dxbl-group-body {
    container-type: inline-size;
    container-name: mt-kart;
}
/* Kart içindeki dekorasyonsuz kolon grupları da kendi genişliğini ölçer.
   Personel > Kayıt kartı 660px olduğundan mt-kart tutmuyor, ama ~320px'lik iç
   kolonda 150px etiket + 4 düğmeli arama editörü değeri "SABİT ..." diye
   eziyordu. Bu gruplar dxbl-col-md-* ile yüzde genişlikli; boyut sınırlaması
   genişliklerini değiştirmez. */
.dxbl-fl-gd .dxbl-fl-group:not(.dxbl-fl-gd):not(.dxbl-fl-gt) {
    container-type: inline-size;
    container-name: mt-kolon;
}
@container mt-kart (max-width: 420px) {
    .dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal {
        flex-direction: column;
        align-items: stretch;
        row-gap: 6px;
    }
    .dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-cpt {
        flex: 0 0 auto;
        width: auto;
        padding: 0;
        min-height: 0; /* üstte duran etikette girdi yüksekliği kadar boşluk bırakmasın */
    }
    .dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-ctrl {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }
    /* anahtar kendi genişliğinde (B'deki width:auto) sol kenarda kalır */
    .dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal:has(> .dxbl-fl-ctrl > .dxbl-checkbox) {
        align-items: flex-start;
    }
}
@container mt-kolon (max-width: 360px) {
    .dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal {
        flex-direction: column;
        align-items: stretch;
        row-gap: 6px;
    }
    .dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-cpt {
        flex: 0 0 auto;
        width: auto;
        padding: 0;
        min-height: 0; /* üstte duran etikette girdi yüksekliği kadar boşluk bırakmasın */
    }
    .dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal > .dxbl-fl-ctrl {
        flex: 0 0 auto;
        width: 100%;
        min-width: 0;
    }
    /* anahtar kendi genişliğinde (B'deki width:auto) sol kenarda kalır */
    .dxbl-fl.dxbl-fl .dxbl-fl-item.dxbl-fl-item-horizontal:has(> .dxbl-fl-ctrl > .dxbl-checkbox) {
        align-items: flex-start;
    }
}

/* --- E8) Çöken otomatik genişlikli kolon ---
   Modelde genişliği tanımsız kolonlara DevExpress kalan alanı verir; kolonlar
   tabloya sığmayınca kalan alan 0 olur ve JS bu kolonu asgari 50px'e çeker
   (satır içi style="width: 50px", data-dx-style YOK). Bu, çoğu listede İLK veri
   kolonudur (ör. "Birim Adı", "Açıklama") ve değerler "An…" diye okunmaz
   kalıyordu. Yalnız bu çökmüş durumu yakalar: tanımlı genişlikli kolonlar
   (data-dx-style), tablo sığdığında otomatik kolonun gerçek genişliği ve
   kullanıcının elle boyutlandırdığı kolonlar etkilenmez. Tablo zaten yatay
   kaydırmalı olduğundan eklenen genişlik kaydırma alanına gider. */
.dxbl-grid .dxbl-grid-table > colgroup > col[style*="width: 50px"]:not([data-dx-style]):not(.dxbl-grid-empty-cell) {
    width: 180px !important; /* DevExpress'in JS ile yazdığı satır içi 50px'i geçer (yalnız çökmüş otomatik kolonda) */
}

/* --- E9b) Komut kolonu (kalem/sil) düğmeleri ---
   DevExpress metin-bağlantı düğmesini ızgara odak rengiyle (= ana metin, siyah)
   çiziyordu; satır içi diğer ikonlar gibi soluk, üzerine gelince ana renk. */
.dxbl-grid.dxbl-grid td.dxbl-grid-command-cell .dxbl-btn.dxbl-grid-command-button {
    --dxbl-btn-color: var(--mt-fg-muted);
    --dxbl-btn-hover-color: var(--mt-link);
}

/* --- E10) Tablo hücresinde referans (nesne bağlantısı) değerleri ---
   XAF bağlantıyı <xaf-navigation-click-helper> içine koyuyor; hücrenin
   "…" kuralı bu sarmalayıcıya geçmediği için ad harf ortasından kesiliyordu
   ("Yildiz Bufe Mehme"). Sarmalayıcı hücre genişliğinde kısaltılır. */
.dxbl-grid .dxbl-grid-table > tbody > tr > td > xaf-navigation-click-helper {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- E11) DevExpress kaydırma çubukları (dxbl-scroll-bar / dxbl-thumb) ---
   DevExpress tutamağı "background-color: currentColor; opacity: .5" ile
   çiziyor: metin rengi #09090B olduğu için içerik üstünde koyu gri kalıyordu.
   Yalnız tutamağın rengi Metronic'in açık gri kaydırma çubuğuna çekilir;
   kalınlık/opaklık/hover davranışı DevExpress'te kalır. */
.dxbl-scroll-viewer-scroll-thumb {
    color: var(--mt-zinc-400);
}

/* --- E12) Boş tablo mesajı görünen alanın ortasında ---
   "Kayıt yok" hücresi bütün kolonları kapsıyor (colspan); tablo yatay
   taştığında mesaj tablo genişliğinin (ör. 1870px) ortasına, yani görünen
   alanın sağ kenarına düşüyordu. Hücre görünen genişlikte tutulup sola
   yapıştırılır (canlı doğrulandı: mesaj 1222px'den 800px'e, kartın ortasına).
   İç içe liste (sekme ve grup kartı dahil) de aynı kurala girer. */
.main-content > .grid-content,
.nested-content > .grid-content {
    container-type: inline-size;
}
/* Yalnız genişliği bilinen kapsayıcılarda (ana liste, grup kartı): kapsayıcısız
   yerde 100cqi ekran genişliğine düşer ve dar tabloyu gereksiz genişletirdi. */
.main-content > .grid-content .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-empty-data-area,
.nested-content > .grid-content .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-empty-data-area,
.dxbl-fl-gd > .dxbl-group > .dxbl-group-body .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-empty-data-area {
    position: sticky;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(100cqi - 2 * var(--dxbl-grid-border-width, 1px)); /* kapsayıcı ızgaranın sol+sağ kenarlığını da içeriyor */
    box-sizing: border-box;
}
/* display:flex colspan'ı bozuyor; DX'in dolgu hücresi 2. kolona kayıp sol kenarlığıyla boş alanı ikiye bölüyordu */
.main-content > .grid-content .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-empty-data-area ~ td.dxbl-grid-empty-cell,
.nested-content > .grid-content .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-empty-data-area ~ td.dxbl-grid-empty-cell,
.dxbl-fl-gd > .dxbl-group > .dxbl-group-body .dxbl-grid .dxbl-grid-table > tbody > tr > td.dxbl-grid-empty-data-area ~ td.dxbl-grid-empty-cell {
    display: none;
}