/* ============================================================================
   mt-overlays.css — Metronic 9 gorunumu: ACILIR PENCERE / MENU / BILDIRIM
   ----------------------------------------------------------------------------
   Kapsam: modal/window pop-up'lar, dropdown/flyout/context-menu/menu,
   takvim (tarih seçici), toast + xaf-alert bildirimleri, tooltip/popover,
   meşgul göstergeleri (xaf-loading, dxbl-loading-panel), Blazor hata/yeniden
   bağlanma kartları. Yalnız --mt-* token'ları kullanılır (mt-tokens.css).
   Düğme/girdi genel görünümü mt-controls.css'te, grid/form mt-data.css'te;
   burada yalnız "dış kabuk" (yüzey, kenarlık, gölge, başlık/altlık) var.

   Pop-up'lar #main-window-template-component/.app DIŞINDA, body'nin altında
   ayrı bir portal ağacında çiziliyor:
     body > dxbl-popup-root > dxbl-popup-cell > (dxbl-modal | dxbl-window |
                                                  dxbl-dropdown | dxbl-itemlist-dropdown | ...)
   Bu yüzden kurallar burada element/sınıf tabanlı; .app kapsayıcısına
   bağlanamaz.

   Yöntem: DevExpress "bootstrap-external" köprü teması her bileşende kendi
   --dxbl-*-* CSS değişkenlerini tanımlıyor (dx-vars.txt). Uygulamanın önerdiği
   yol (metronic-spec.md kural 4) bu değişkenleri AYNI elemanda eşit/yüksek
   özgüllükte ezmek; biz de öyle yapıyoruz — tek tek durum sınıfı (hover/
   selected/disabled) kovalamak yerine kapsayıcı üzerinde değişkeni değiştiriyoruz.
   ============================================================================ */


/* ============================================================================
   0) OPAK ZEMİN GARANTİSİ (eskiden site.css'teydi)
   ----------------------------------------------------------------------------
   Pop-up'lar body'nin altında ayrı bir portalda çiziliyor; bazı DevExpress
   tema/duruma bağlı kombinasyonlarında --dxbl-*-bg zinciri
   "var(--bs-body-bg, var(--dxbl-body-bg, inherit))" son adımında "inherit"e
   düşüp, portalın şeffaf bir atasından (body arka planı bir konteynerde
   maskeleniyorsa) şeffaflık miras alabiliyordu — pop-up arkası şeffaf/"hayalet"
   görünüyordu. Eski site.css kuralı bunu !important ile garantiliyordu; bu
   dosya o kuralın yerini aldığı için garanti AYNEN korunuyor (!important
   şart: bazı bileşenlerde arka plan renk DEĞİL, doğrudan CSS DEĞİŞKENİ
   zincirinden geliyor ve düz bir background-color kuralı özgüllükte kazansa
   bile değişken hâlâ "inherit" dönebilir; !important ile kesin zemin veriyoruz).
   ============================================================================ */
.dxbl-popup,
.dxbl-window,
.dxbl-dropdown,
.dxbl-itemlist-dropdown,
.dxbl-modal-content,
.dxbl-popup-header,
.dxbl-modal-header,
.dxbl-modal-body,
.dxbl-modal-footer,
.dxbl-window-header,
.dxbl-window-body,
.dxbl-window-footer,
.dxbl-dropdown-body,
.dxbl-flyout,
.dxbl-context-menu,
.dxbl-menu,
.dxbl-list-box,
.dxbl-listbox,
.dxbl-calendar,
.dxbl-edit-dropdown,
.dxbl-message-box {
    background-color: var(--mt-bg) !important; /* eski site.css garantisinin devamı: bkz. yukarıdaki not */
}


/* ============================================================================
   1) MODAL / PENCERE (kt-modal): dxbl-modal, dxbl-window, mesaj kutusu
   ============================================================================ */

/* --- Gövde: DevExpress değişkenlerini kapsayıcı üstünde eziyoruz --- */
.dxbl-modal,
.dxbl-message-box {
    --dxbl-popup-border-style: solid; /* .dxbl-message-box tabanı bunu "none" yapıyor (bs-external.css); kt-modal'ın 1px kenarlığı için yeniden açıyoruz */
    --dxbl-popup-border-width: 1px;
    --dxbl-popup-border-color: var(--mt-border);
    --dxbl-popup-border-radius: var(--mt-radius-lg);
    --dxbl-popup-bg: var(--mt-bg);
    --dxbl-popup-color: var(--mt-fg);
    --dxbl-popup-shadow: var(--mt-shadow-modal);
    --dxbl-popup-header-bg: var(--mt-bg);
    --dxbl-popup-header-color: var(--mt-fg);
    --dxbl-popup-header-font-weight: var(--mt-fw-semibold);
    --dxbl-popup-footer-bg: var(--mt-bg);
    --dxbl-popup-footer-color: var(--mt-fg);
}
.dxbl-window {
    --dxbl-window-border-width: 1px;
    --dxbl-window-border-color: var(--mt-border);
    --dxbl-window-border-radius: var(--mt-radius-lg);
    --dxbl-window-bg: var(--mt-bg);
    --dxbl-window-color: var(--mt-fg);
    --dxbl-window-box-shadow: var(--mt-shadow-modal);
    --dxbl-window-header-bg: var(--mt-bg);
    --dxbl-window-header-color: var(--mt-fg);
    --dxbl-window-header-font-weight: var(--mt-fw-semibold);
    --dxbl-window-footer-bg: var(--mt-bg);
    --dxbl-window-footer-color: var(--mt-fg);
}
/* Mesaj kutusu ayrıca kendi koyu/açık "render" varyant sınıflarında zemin/metin
   rengini KENDİ değişkenleriyle taşır (dxbl-message-box-theme-*.dxbl-message-box-render-*,
   3 sınıflı kombinasyon — bkz. bs-external.css). "theme-auto"/"theme-dark" koyu
   (bs-dark) zemine düşebiliyor; biz her zaman açık Metronic kart istiyoruz, bu
   yüzden aynı özgüllükte (1 sınıf + 2 öznitelik seçici = 3) ezip varyanttan
   bağımsız hâle getiriyoruz. */
.dxbl-message-box[class*="dxbl-message-box-theme-"][class*="dxbl-message-box-render-"] {
    --dxbl-message-box-background-color: var(--mt-bg);
    --dxbl-message-box-header-font-color: var(--mt-fg);
    --dxbl-message-box-body-text-font-color: var(--mt-fg);
    --dxbl-message-box-header-close-icon-color: var(--mt-fg-muted);
}

.dxbl-modal-content,
.dxbl-window {
    overflow: hidden;
}

/* --- Başlık: 56px, 0 20px, alt kenarlık; kapak/ikon davranışı --- */
.dxbl-modal-header,
.dxbl-window-header,
.dxbl-message-box-header {
    min-height: 56px;
    padding: 0 20px !important; /* xafPopup .main-toolbar gibi dxbl-message-box-header de kendi rem tabanlı padding değişkenini kullanıyor; kt-modal sabit 20px istiyor */
    border-bottom: 1px solid var(--mt-border);
    font-size: var(--mt-text-base);
    font-weight: var(--mt-fw-semibold);
    color: var(--mt-fg);
}
/* xaf-styles.css, fluent olmayan tüm popup başlık/altlıklarına 48px min-height
   veriyor (body:not(.dxbl-theme-fluent) .dxbl-modal>.dxbl-modal-root>.dxbl-popup>
   .dxbl-modal-content>.dxbl-modal-header/-footer — 6 sınıf + 1 eleman özgüllüğünde).
   Aynı seçici iskeletini burada da kurup özgüllüğü eşitliyoruz (dosyamız SONRA
   yüklendiği için eşitlikte biz kazanırız); yine de yarış kırılgan olduğundan
   !important ile kesinleştiriyoruz — var olan bir kuralı (xaf-styles.css'in
   sabit 48px'i) yenmek için, kural 4 gereği meşru kullanım. */
body .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header,
body .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-footer {
    min-height: 56px !important;
}

/* Başlıktaki XAF görünüm başlığı: view-caption-root > caption-icon-container (yuvarlak
   ikon rozeti) + xaf-caption-container > .xaf-view-caption-lg. Metronic'te pop-up
   başlığında ikon rozeti yok, yalnız düz metin — rozet gizleniyor (görev açıkça
   istiyor; işlevsel bir öğe değil, salt süsleme). */
.dxbl-modal-header .xaf-caption-icon-container,
.dxbl-window-header .xaf-caption-icon-container,
.dxbl-message-box-header .xaf-caption-icon-container {
    display: none;
}
/* Rozet kaldırılınca bitişik kardeş seçicili max-width kısıtı (xaf-styles.css)
   hâlâ DOM bitişikliğine göre uygulanıyor (display:none bunu etkilemez); başlık
   metnine tam genişliği geri veriyoruz. */
.dxbl-modal-header .xaf-caption-icon-container + .xaf-caption-container,
.dxbl-window-header .xaf-caption-icon-container + .xaf-caption-container {
    max-width: 100%;
}
.dxbl-modal-header .xaf-view-caption-lg,
.dxbl-window-header .xaf-view-caption-lg {
    font-size: var(--mt-text-base);
    font-weight: var(--mt-fw-semibold);
    color: var(--mt-fg);
    line-height: 1.3;
    padding-bottom: 0;
}

/* Kapatma düğmesi: 30x30 hayalet ikon düğmesi, 6px radius, hover accent */
.dxbl-popup-header-button {
    --dxbl-btn-border-radius: var(--mt-radius-sm); /* taban .dxbl-popup-header-button kuralı bunu %50 (daire) yapıyor */
    --dxbl-btn-bg: transparent;
    --dxbl-btn-color: var(--mt-fg-muted);
    --dxbl-btn-hover-bg: var(--mt-accent);
    --dxbl-btn-hover-color: var(--mt-fg);
    --dxbl-btn-padding-x: 0;
    --dxbl-btn-padding-y: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--mt-transition), color var(--mt-transition);
}

/* --- Gövde: 20px iç boşluk; içindeki main-toolbar / main-content --- */
.dxbl-modal-body,
.dxbl-window-body,
.dxbl-message-box-body {
    padding: 20px;
    font-size: var(--mt-text-sm);
    color: var(--mt-fg);
}
/* XAF her pop-up gövdesine div.main > div.main-toolbar + div.main-content basıyor;
   toolbar'a alt boşluk, içerik alanına fazladan boşluk verilmiyor. */
.dxbl-modal-body .main > .main-toolbar,
.dxbl-window-body .main > .main-toolbar {
    padding: 0 0 12px !important; /* xaf-styles.css ".xafPopup .main-toolbar" rem tabanlı üst/yan boşluk veriyor (.5rem/.25rem/0/0); kt-modal düzenine göre sıfırlanıyor */
}
.dxbl-modal-body .main > .main-content,
.dxbl-window-body .main > .main-content {
    padding: 0;
}

/* --- Altlık: sağa yaslı düğmeler, üst kenarlık --- */
.dxbl-modal-footer,
.dxbl-window-footer,
.dxbl-message-box-footer {
    padding: 14px 20px;
    border-top: 1px solid var(--mt-border);
    background: var(--mt-bg);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.dxbl-modal-footer .dxbl-btn-toolbar,
.dxbl-window-footer .dxbl-btn-toolbar {
    gap: 8px;
}

/* --- Arka perde (backdrop): karartma + bulanıklaştırma --- */
.dxbl-modal-back {
    /* .dxbl-modal-back zemin rengini/şeffaflığını DOĞRUDAN değişkenden okuyor
       (background-color:var(--dxbl-popup-back-bg); opacity:var(--dxbl-popup-back-opacity));
       değişkenleri eziyoruz, display/positioning (show/hide mantığı) DOKUNULMUYOR. */
    --dxbl-popup-back-bg: rgba(0, 0, 0, .50);
    --dxbl-popup-back-opacity: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Sürükleme davranışı (dxbl-popup-header-drag) dokunulmuyor — yalnız görünüm. */


/* ============================================================================
   2) DROPDOWN / FLYOUT / MENÜ / LİSTE KUTUSU / DÜZENLEYİCİ AÇILIRI
   .dxbl-dropdown ve .dxbl-itemlist-dropdown AYNI --dxbl-dropdown-* değişken
   kümesini ve aynı .dxbl-dropdown-header/-body/-footer/-item alt sınıflarını
   paylaşıyor (bkz. bs-external.css) — araç çubuğu taşması, split-button
   listeleri, sütun filtre menüsü (.dxbl-grid-filter-menu) hepsi bu yoldan geçiyor.
   ============================================================================ */
.dxbl-dropdown,
.dxbl-itemlist-dropdown,
.dxbl-flyout,
.dxbl-context-menu,
.dxbl-context-menu-submenu,
.dxbl-menu,
.dxbl-grid-filter-menu {
    --dxbl-dropdown-bg: var(--mt-bg);
    --dxbl-dropdown-color: var(--mt-fg);
    --dxbl-dropdown-border-width: 1px;
    --dxbl-dropdown-border-color: var(--mt-border);
    --dxbl-dropdown-border-radius: var(--mt-radius);
    --dxbl-dropdown-box-shadow: var(--mt-shadow-dropdown);
    --dxbl-dropdown-header-bg: var(--mt-bg);
    --dxbl-dropdown-header-color: var(--mt-fg);
    --dxbl-dropdown-footer-bg: var(--mt-bg);
    --dxbl-dropdown-footer-color: var(--mt-fg);
    /* flyout kendi ayrı değişken adlarını kullanıyor (context/menu de öyle) */
    --dxbl-flyout-bg: var(--mt-bg);
    --dxbl-flyout-color: var(--mt-fg);
    --dxbl-flyout-border-width: 1px;
    --dxbl-flyout-border-color: var(--mt-border);
    --dxbl-flyout-border-radius: var(--mt-radius);
    --dxbl-flyout-shadow: var(--mt-shadow-dropdown);
    --dxbl-flyout-header-bg: var(--mt-bg);
    --dxbl-flyout-footer-bg: var(--mt-bg);
    --dxbl-context-menu-bg: var(--mt-bg);
    --dxbl-context-menu-color: var(--mt-fg);
    --dxbl-context-menu-border-radius: var(--mt-radius);
    --dxbl-context-menu-item-hover-bg: var(--mt-accent);
    --dxbl-context-menu-item-hover-color: var(--mt-fg);
    --dxbl-context-menu-item-active-bg: var(--mt-primary-light);
    --dxbl-context-menu-item-active-color: var(--mt-primary-text);
    --dxbl-context-menu-separator-color: var(--mt-border);
    --dxbl-context-menu-disabled-color: var(--mt-fg-faint);
    --dxbl-menu-bg: var(--mt-bg);
    --dxbl-menu-color: var(--mt-fg);
    --dxbl-menu-item-hover-bg: var(--mt-accent);
    --dxbl-menu-item-hover-color: var(--mt-fg);
    --dxbl-menu-item-selected-bg: var(--mt-primary-light);
    --dxbl-menu-item-selected-color: var(--mt-primary-text);
    --dxbl-menu-item-selected-hover-bg: var(--mt-primary-light);
    --dxbl-menu-item-selected-hover-color: var(--mt-primary-text);
    --dxbl-menu-item-disabled-color: var(--mt-fg-faint);
    --dxbl-menu-separator-color: var(--mt-border);
    --dxbl-menu-top-left-border-radius: var(--mt-radius);
    --dxbl-menu-top-right-border-radius: var(--mt-radius);
    --dxbl-menu-bottom-left-border-radius: var(--mt-radius);
    --dxbl-menu-bottom-right-border-radius: var(--mt-radius);
}

.dxbl-dropdown-header,
.dxbl-flyout-header {
    padding: 8px 10px;
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-fw-semibold);
    color: var(--mt-fg-muted);
    border-bottom: 1px solid var(--mt-border);
}
.dxbl-dropdown-body,
.dxbl-flyout-body {
    padding: 6px;
}
.dxbl-dropdown-footer,
.dxbl-flyout-footer {
    padding: 8px 10px;
    border-top: 1px solid var(--mt-border);
    gap: 8px;
}
/* Not: .dxbl-edit-dropdown-body ve .dxbl-toolbar-dropdown içindeki gövdeler XAF/DX
   tarafından zaten "padding:0 !important" ile sıfırlanıyor (bileşik seçici, plain
   .dxbl-dropdown-body'den daha özgül) — bu doğru davranış: içlerindeki
   .dxbl-list-box / .dxbl-calendar kendi iç boşluğunu zaten sağlıyor, burada
   ikinci kez boşluk eklemiyoruz.

   Grid sütun filtre menüsü (checklist + Tamam/İptal): dropdown kabuğunu ve
   listesini yukarıdaki genel kurallar zaten kaplıyor; altlığına üst kenarlık
   ekliyoruz (footer varsayılanı zaten border-top veriyor, burada sadece rengi
   token'a bağlıyoruz — .dxbl-grid-filter-menu üstteki bloğa dahil). */

/* --- Öğeler: menü öğesi / liste kutusu öğesi / araç çubuğu açılır öğesi --- */
.dxbl-dropdown-item,
.dxbl-context-menu-item,
.dxbl-menu-item-tmpl {
    min-height: 32px;
    padding: 6px 10px;
    border-radius: var(--mt-radius-sm);
    font-size: var(--mt-text-2sm);
    color: var(--mt-fg);
    gap: 8px;
    align-items: center;
}
.dxbl-dropdown-item:hover,
.dxbl-context-menu-item:hover,
.dxbl-menu-item-tmpl:hover {
    background-color: var(--mt-accent);
}
.dxbl-dropdown-item img,
.dxbl-context-menu-item img,
.dxbl-menu-item-tmpl img {
    width: 16px;
    height: 16px;
    filter: var(--mt-icon-filter);
}
.dxbl-dropdown-item[disabled],
.dxbl-context-menu-item:disabled,
.dxbl-menu-item-tmpl[aria-disabled="true"] {
    opacity: .5;
}
/* Ayraçlar */
.dxbl-context-menu hr,
.dxbl-menu hr,
.dxbl-dropdown-item-separator {
    border-color: var(--mt-border);
    margin: 4px 0;
}

/* Açılır listenin üstündeki arama/filtre kutusu: kt-input yüksekliği (34px).
   Kutunun kendi rengi/kenarlığı mt-controls.css'ten geliyor; burada yalnız
   pop-up içi boşluğu düzenliyoruz. */
.dxbl-dropdown-header .dxbl-text-edit,
.dxbl-edit-dropdown .dxbl-search-box-edit {
    width: 100%;
}

/* --- Düzenleyici açılırı kabuğu (kombo/tarih editörünün altında açılan panel):
   kendi bağımsız --dxbl-edit-dropdown-* değişken kümesi var (dropdown'unkini
   paylaşmıyor), o yüzden ayrıca eziyoruz. İçindeki .dxbl-list-box / .dxbl-calendar
   zaten kendi iç boşluğunu sağladığından burada padding'e dokunmuyoruz. --- */
.dxbl-edit-dropdown {
    --dxbl-edit-dropdown-bg: var(--mt-bg);
    --dxbl-edit-dropdown-color: var(--mt-fg);
    --dxbl-edit-dropdown-border-color: var(--mt-border);
    --dxbl-edit-dropdown-border-radius: var(--mt-radius);
    --dxbl-edit-dropdown-box-shadow: var(--mt-shadow-dropdown);
    --dxbl-edit-dropdown-footer-bg: var(--mt-bg);
    --dxbl-edit-dropdown-footer-btn-color: var(--mt-fg-muted);
    --dxbl-edit-dropdown-footer-apply-btn-bg: var(--mt-primary-light);
    --dxbl-edit-dropdown-footer-apply-btn-hover-color: var(--mt-primary-text);
}
.dxbl-edit-dropdown-footer {
    border-top: 1px solid var(--mt-border);
}

/* --- Liste kutusu / basit liste kutusu (kombo/çoklu seçim, sürükle-bırak liste):
   kapsayıcı değişkenlerini ezmek durum sınıflarını (hover/selected/disabled)
   otomatik olarak kapsıyor — bkz. bs-external.css'teki ".dxbl-list-box-item:hover"
   gibi kurallar hepsi bu değişkenleri okuyor. --- */
.dxbl-list-box,
.dxbl-list-box-render-container,
.dxbl-listbox {
    --dxbl-list-box-bg: var(--mt-bg);
    --dxbl-list-box-color: var(--mt-fg);
    --dxbl-list-box-border-color: var(--mt-border);
    --dxbl-list-box-border-radius: var(--mt-radius);
    --dxbl-list-box-item-hover-bg: var(--mt-accent);
    --dxbl-list-box-item-hover-color: var(--mt-fg);
    --dxbl-list-box-item-active-bg: var(--mt-accent);
    --dxbl-list-box-item-selected-bg: var(--mt-primary-light);
    --dxbl-list-box-item-selected-color: var(--mt-primary-text);
    --dxbl-list-box-item-selected-hover-bg: var(--mt-primary-light);
    --dxbl-list-box-item-selected-hover-color: var(--mt-primary-text);
    --dxbl-list-box-item-multi-selected-bg: var(--mt-primary-light);
    --dxbl-list-box-item-multi-selected-color: var(--mt-primary-text);
    --dxbl-list-box-item-disabled-color: var(--mt-fg-faint);
    --dxbl-list-box-focus-frame-color: var(--mt-primary);
    --dxbl-list-box-item-padding-x: 10px;
    --dxbl-list-box-item-padding-y: 6px;
    --dxbl-listbox-bg: var(--mt-bg);
    --dxbl-listbox-color: var(--mt-fg);
    --dxbl-listbox-border-color: var(--mt-border);
    --dxbl-listbox-border-radius: var(--mt-radius);
    --dxbl-listbox-item-hover-bg: var(--mt-accent);
    --dxbl-listbox-item-hover-color: var(--mt-fg);
    --dxbl-listbox-item-active-bg: var(--mt-accent);
    --dxbl-listbox-item-selected-bg: var(--mt-primary-light);
    --dxbl-listbox-item-selected-color: var(--mt-primary-text);
    --dxbl-listbox-item-selected-hover-bg: var(--mt-primary-light);
    --dxbl-listbox-item-selected-hover-color: var(--mt-primary-text);
    --dxbl-listbox-item-disabled-color: var(--mt-fg-faint);
    --dxbl-listbox-item-padding-x: 10px;
    --dxbl-listbox-item-padding-y: 6px;
    font-size: var(--mt-text-2sm);
    padding: 4px;
}
.dxbl-list-box-item,
.dxbl-listbox-item {
    border-radius: var(--mt-radius-sm);
}


/* ============================================================================
   3) TAKVİM / TARİH VE SAAT SEÇİCİ (.dxbl-calendar, düzenleyici açılırı içinde)
   ============================================================================ */
.dxbl-calendar {
    --dxbl-calendar-bg: var(--mt-bg);
    --dxbl-calendar-color: var(--mt-fg);
    --dxbl-calendar-border-color: var(--mt-border);
    --dxbl-calendar-border-radius: var(--mt-radius);
    --dxbl-calendar-font-size: var(--mt-text-2sm); /* 13px */
    --dxbl-calendar-header-title-font-weight: var(--mt-fw-semibold);
    --dxbl-calendar-header-btn-color: var(--mt-fg-muted);
    --dxbl-calendar-header-btn-hover-color: var(--mt-fg);
    --dxbl-calendar-days-of-week-opacity: 1; /* opaklık yerine token rengi kullanıyoruz, aşağıda */
    --dxbl-calendar-weekend-color: var(--mt-fg); /* Metronic hafta sonunu ayrı renklendirmiyor */
    --dxbl-calendar-not-current-view-color: var(--mt-fg-faint);
    --dxbl-calendar-today-border-color: var(--mt-primary);
    --dxbl-calendar-item-hover-bg: var(--mt-accent);
    --dxbl-calendar-item-hover-color: var(--mt-fg);
    --dxbl-calendar-item-selected-bg: var(--mt-primary);
    --dxbl-calendar-item-selected-color: var(--mt-primary-fg);
    --dxbl-calendar-item-selected-hover-bg: var(--mt-primary-hover);
    --dxbl-calendar-item-selected-hover-color: var(--mt-primary-fg);
    --dxbl-calendar-item-selected-range-bg: var(--mt-primary-light);
    --dxbl-calendar-item-selected-range-color: var(--mt-primary-text);
    --dxbl-calendar-item-focus-outline-color: var(--mt-primary);
    --dxbl-calendar-month-year-selection-border-radius: var(--mt-radius-sm);
    --dxbl-calendar-footer-btn-bg: transparent;
    --dxbl-calendar-footer-btn-hover-color: var(--mt-link);
    --dxbl-calendar-footer-btn-hover-border-color: var(--mt-accent);
    --dxbl-calendar-footer-btn-border-color: transparent;
}
/* Gün hücreleri: --dxbl-calendar-day-item-height/width zaten 2rem (32px) —
   yalnız radius (DX bu hücrelere hiç radius vermiyor) ekleniyor. */
.dxbl-calendar-cell,
.dxbl-calendar-day {
    border-radius: var(--mt-radius-sm);
}
/* Hafta içi başlıkları: 12px/500 soluk gri */
.dxbl-calendar-days-of-week,
.dxbl-calendar [class*="days-of-week"] {
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-fw-medium);
    color: var(--mt-fg-muted);
}
/* Bugün: birincil renkte 1px kenarlık (seçili değilse birincil metin de) */
.dxbl-calendar-today {
    border: 1px solid var(--mt-primary);
    color: var(--mt-link);
    font-weight: var(--mt-fw-semibold);
}
.dxbl-calendar-today.dxbl-calendar-selected-item {
    color: var(--mt-primary-fg); /* seçiliyse dolgu üstünde beyaz kalsın */
}
/* Ay/yıl seçim başlığı düğmeleri, gezinme okları: 28px hayalet */
.dxbl-calendar-header-title-btn,
.dxbl-calendar-header .dxbl-btn {
    --dxbl-btn-color: var(--mt-fg-muted);
    --dxbl-btn-hover-color: var(--mt-fg);
    --dxbl-btn-hover-bg: var(--mt-accent);
    --dxbl-btn-border-radius: var(--mt-radius-sm);
}


/* ============================================================================
   4) TOAST VE XAF BİLDİRİMLERİ (xaf-alert / dxbl-toast)
   ============================================================================ */

/* --- DevExpress toast (varsa): kabuk zaten --dxbl-toast-*-color değişkenleri
   üzerinden var(--bs-primary/success/...) okuyor, mt-tokens.css bunları zaten
   Metronic paletine bağlıyor — burada yalnız kabuk ölçüleri Metronic'e çekiliyor. */
.dxbl-toast {
    --dxbl-toast-border-radius: var(--mt-radius);
    --dxbl-toast-box-shadow: var(--mt-shadow-dropdown);
}

/* --- XAF uyarı yığını: içi dolu + text-white yerine Metronic "outline" rozet --- */
.xaf-alerts-stack .xaf-alert {
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-dropdown);
    padding: 0; /* iç boşluk metin/aksiyon konteynerlerinde (aşağıda) veriliyor */
    font-size: var(--mt-text-2sm);
}
.xaf-alerts-stack .xaf-alert .xaf-alert-text-container {
    padding: 12px 16px;
}
.xaf-alerts-stack .xaf-alert-title {
    font-size: var(--mt-text-sm);
    font-weight: var(--mt-fw-semibold);
}

.xaf-alerts-stack .xaf-alert.alert-info,
.xaf-alerts-stack .xaf-alert.alert-success,
.xaf-alerts-stack .xaf-alert.alert-warning,
.xaf-alerts-stack .xaf-alert.alert-danger {
    border: 1px solid transparent;
}
.xaf-alerts-stack .xaf-alert.alert-info {
    background-color: var(--mt-info-light);
    border-color: var(--mt-info-light-border);
    color: var(--mt-info-text) !important; /* Bootstrap'ın .text-white{color:#fff!important} sınıfını yeniyor (XAF bu sınıfı alert-* ile birlikte basıyor) */
}
.xaf-alerts-stack .xaf-alert.alert-success {
    background-color: var(--mt-success-light);
    border-color: var(--mt-success-light-border);
    color: var(--mt-success-text) !important; /* bkz. yukarıdaki not */
}
.xaf-alerts-stack .xaf-alert.alert-warning {
    background-color: var(--mt-warning-light);
    border-color: var(--mt-warning-light-border);
    color: var(--mt-warning-text) !important; /* bkz. yukarıdaki not */
}
.xaf-alerts-stack .xaf-alert.alert-danger {
    background-color: var(--mt-danger-light);
    border-color: var(--mt-danger-light-border);
    color: var(--mt-danger-text) !important; /* bkz. yukarıdaki not */
}
/* Kapatma/aksiyon düğmeleri: metinle aynı renkte hayalet (renk zaten miras alınıyor) */
/* XAF kapatma ikonuna Bootstrap .text-white (color:#fff !important) basıyor;
   açık temada beyaz zeminde X görünmüyordu. Bildirimin yazı rengini alır. */
.xaf-alerts-stack .xaf-alert .xaf-alert-button.text-white,
.xaf-alerts-stack .xaf-alert .xaf-alert-button .text-white {
    color: inherit !important;
}
.xaf-alerts-stack .xaf-alert-button {
    color: inherit;
    border-radius: var(--mt-radius-sm);
}
.xaf-alerts-stack .xaf-alert-button:hover {
    background-color: rgba(0, 0, 0, .06);
}


/* ============================================================================
   5) TOOLTIP / POPOVER
   ============================================================================ */
/* DevExpress'in kendi ".dxbl-tooltip" bileşeni bu temada yok (bs-external.css'te
   bulunamadı) — ipuçları/doğrulama balonları ".dxbl-flyout" üzerinden geliyor ve
   2. bölümdeki genel dropdown/flyout kabuğunu zaten alıyor. Burada yalnız
   Bootstrap 5'in yerleşik .tooltip / .popover'ı Metronic'e çekiliyor. */
.tooltip .tooltip-inner {
    background-color: var(--mt-mono);
    color: var(--mt-mono-fg);
    font-size: var(--mt-text-xs);
    font-weight: var(--mt-fw-medium);
    border-radius: var(--mt-radius-sm);
    padding: 4px 8px;
    box-shadow: var(--mt-shadow-sm);
}
.tooltip .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--mt-mono); }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--mt-mono); }
.bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--mt-mono); }
.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--mt-mono); }

.popover {
    background-color: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-shadow-dropdown);
}
.popover .popover-header {
    background-color: var(--mt-bg);
    border-bottom: 1px solid var(--mt-border);
    color: var(--mt-fg);
    font-size: var(--mt-text-2sm);
    font-weight: var(--mt-fw-semibold);
}
.popover .popover-body {
    color: var(--mt-fg);
    font-size: var(--mt-text-2sm);
}


/* ============================================================================
   6) MEŞGUL GÖSTERGELERİ (busy indicators)
   ============================================================================ */

/* --- Uygulama içi "Loading..." hapı: XAF görünürlüğü (visibility:hidden ->
   gerektiğinde) JS/duruma göre yönetiyor; biz yalnız görünümü değiştiriyoruz. --- */
#xaf-loading.xaf-loading.show > .xaf-loading-content {
    background-color: var(--mt-bg);
    border: 1px solid var(--mt-border);
    border-radius: 999px;
    box-shadow: var(--mt-shadow-dropdown);
    height: 40px;
    padding: 0 16px;
    font-size: var(--mt-text-2sm);
    font-weight: var(--mt-fw-medium);
    color: var(--mt-fg-secondary);
}
#xaf-loading.xaf-loading.show > .xaf-loading-content .spinner-border {
    width: 16px;
    height: 16px;
    border-width: 2px;
    color: var(--mt-link);
}

/* --- DevExpress meşgul panelleri (grid/form üstü yükleniyor katmanı) --- */
.dxbl-loading-panel {
    --dxbl-loading-panel-underlay-bg: var(--mt-bg);
    --dxbl-loading-panel-overlay-bg: var(--mt-bg);
    --dxbl-loading-panel-overlay-opacity: .6; /* "beyaz yarı saydam rgba(255,255,255,.6)" örtüsü */
    --dxbl-loading-panel-message-color: var(--mt-link);
}
.dxbl-loading-panel .dxbl-wait-indicator,
.dxbl-wait-indicator {
    --dxbl-wait-indicator-color: var(--mt-primary);
}


/* ============================================================================
   7) BLAZOR HATA / YENİDEN BAĞLANMA KARTLARI
   ----------------------------------------------------------------------------
   #blazor-error-ui görünürlüğü Blazor Server çalışma zamanı tarafından SATIR
   İÇİ style.display ile değiştiriliyor (JS: errorUi.style.display='block'/'none');
   bu yüzden "display" özelliğine HİÇ dokunmuyoruz (dokunursak göster/gizle
   mantığı bozulur). #components-reconnect-modal ise "components-reconnect-show/
   -hide/-failed/-rejected" SINIFLARIYLA yönetiliyor — yine de aynı temkinli
   yöntemi kullanıyoruz: kutuyu tam ekran arka perde ÜZERİNDE ortalanmış küçük
   bir karta dönüştürüyoruz (position/width/height'i override edip display'e
   dokunmuyoruz), karartma+bulanıklık ::before ile ekleniyor.
   NOT (lead'e): #blazor-error-ui içeriğinin tam DOM'u projede bulunamadı
   (DevExpress'in derlenmiş BlazorError bileşeni, standart ASP.NET Core Blazor
   şablonundaki "metin + a.reload + a.dismiss" kalıbını izlediği varsayıldı) —
   canlıda doğrulanmalı.
   ============================================================================ */
#blazor-error-ui,
#components-reconnect-modal {
    /* site.css #blazor-error-ui için position:fixed + width/height:100% veriyor
       ("tam ekran" — korunuyor gereği); burada aynı tam-ekran kutuyu KART
       boyutuna küçültüp ortalıyoruz. xaf-styles.css #components-reconnect-modal'a
       position:relative veriyordu (!important değil) — fixed'e çekiyoruz. */
    position: fixed !important; /* Blazor'un/olası başka bir kuralın "relative"ini yenmek için (reconnect-modal, xaf-styles.css) */
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 420px;
    height: auto;
    max-height: calc(100vh - 48px);
    overflow: auto;
    background: var(--mt-bg);
    color: var(--mt-fg);
    border-radius: var(--mt-radius-lg);
    box-shadow: var(--mt-shadow-modal);
    padding: 24px;
    font-size: var(--mt-text-sm);
    text-align: center;
}
#blazor-error-ui::before,
#components-reconnect-modal::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(0, 0, 0, .50);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
/* Standart Blazor Server hata çubuğu bağlantıları (varsa) */
#blazor-error-ui .reload,
#blazor-error-ui a.reload {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 16px;
    margin-top: 12px;
    border-radius: var(--mt-radius-sm);
    background: var(--mt-primary);
    color: var(--mt-primary-fg);
    font-weight: var(--mt-fw-medium);
}
#blazor-error-ui .dismiss,
#blazor-error-ui a.dismiss {
    position: absolute;
    top: 8px;
    right: 12px;
    color: var(--mt-fg-muted);
    cursor: pointer;
}
#components-reconnect-modal .btn.btn-primary,
#components-reconnect-modal #components-reconnect-button {
    height: 34px;
    padding: 0 16px;
    border-radius: var(--mt-radius-sm);
    background: var(--mt-primary);
    border-color: var(--mt-primary);
    color: var(--mt-primary-fg);
    font-weight: var(--mt-fw-medium);
    margin-top: 12px;
}