/* ============================================================================
   mt-controls.css — Metronic 9 görünümü: DENETİMLER (kt-btn / kt-input / kt-checkbox)
   ----------------------------------------------------------------------------
   Kapsam: uygulama genelinde HER DevExpress ve Bootstrap denetimi (ana pencere,
   popup'lar, giriş sayfası, panolar). Sadece görünüm — davranış değişmez.
   Yalnız --mt-* token'ları kullanılır (bkz. mt-tokens.css). Yükleme sırası:
   mt-tokens < mt-shell < mt-controls (BU DOSYA) < mt-data < mt-overlays <
   mt-auth < mt-pages — bu yüzden seçiciler jenerik ve en çok (0,3,0) özgüllükte
   tutuldu; header/sidebar/login gibi yerlerde mt-shell/mt-auth ID'li seçicilerle
   bunun üstüne çıkar.

   DevExpress "bootstrap-external" köprü teması her bileşende kendi CSS
   custom property'lerini tanımlıyor (--dxbl-btn-*, --dxbl-text-edit-* ...).
   Aynı elemanda bu değişkenleri ezmek; ham özellik yazmaktan güvenlidir
   (DevExpress'in kendi hover/active/disabled/sm/lg mantığı çalışmaya devam
   eder). Ham CSS özelliği sadece değişken bulunmayan yerlerde kullanıldı.
   ============================================================================ */


/* ============================================================================
   1) DÜĞMELER — .dxbl-btn taban (tüm render stilleri + gizli __virtual ikizi;
      seçici .dxbl-virtual-toolbar içindekileri dışlamıyor, aynı görünmeliler)
   ============================================================================ */
.dxbl-btn {
    --dxbl-btn-font-family: var(--mt-font);
    --dxbl-btn-font-size: var(--mt-text-2sm);      /* 13px */
    --dxbl-btn-line-height: 1.4285;
    --dxbl-btn-padding-x: var(--mt-control-px);    /* 12px */
    --dxbl-btn-padding-y: .4375rem;                 /* ~7px -> toplam ~34px */
    --dxbl-btn-image-spacing: var(--mt-gap);        /* 6px ikon-metin boşluğu */
    --dxbl-btn-border-width: 1px;
    --dxbl-btn-border-radius: var(--mt-radius-sm);  /* 6px */
    --dxbl-btn-box-shadow: var(--mt-shadow-xs);
    --dxbl-btn-hover-box-shadow: var(--mt-shadow-xs);
    --dxbl-btn-active-box-shadow: var(--mt-shadow-xs);
    --dxbl-btn-disabled-opacity: 50%;
    box-sizing: border-box;
    min-height: var(--mt-control-h);                /* 34px güvence */
    font-family: var(--mt-font);
    transition: background-color var(--mt-transition), border-color var(--mt-transition),
                color var(--mt-transition), box-shadow var(--mt-transition);
}
.dxbl-btn.dxbl-sm:where(:not(.dxbl-btn-standalone)) {
    --dxbl-btn-font-size: var(--mt-text-xs);        /* 12px */
    --dxbl-btn-padding-x: .625rem;                  /* 10px */
    --dxbl-btn-padding-y: .25rem;
    --dxbl-btn-border-radius: var(--mt-radius-sm);
    min-height: var(--mt-control-h-sm);             /* 28px */
}
.dxbl-btn.dxbl-lg:where(:not(.dxbl-btn-standalone)) {
    --dxbl-btn-font-size: var(--mt-text-sm);        /* 14px */
    --dxbl-btn-padding-x: 1rem;                     /* 16px */
    --dxbl-btn-padding-y: .5rem;
    --dxbl-btn-border-radius: var(--mt-radius-sm);
    min-height: var(--mt-control-h-lg);             /* 40px */
}

/* Devre dışı: sadece soluklaştır, pointer-events'e dokunma (DX zaten none yapıyor) */
.dxbl-btn.dxbl-disabled,
.dxbl-btn:disabled {
    opacity: .5;
}

/* ---- Renk / stil varyantları -------------------------------------------- */

/* PRIMARY (Kaydet / Oturum Aç): bg zaten --bs-primary üzerinden --mt-primary'e
   eşleniyor (mt-tokens.css); burada hover/active/odak halkasını Metronic'e
   göre netleştiriyoruz. */
.dxbl-btn-primary {
    --dxbl-btn-hover-bg: var(--mt-primary-hover);
    --dxbl-btn-hover-color: var(--mt-primary-fg);
    --dxbl-btn-hover-border-color: var(--mt-primary-hover);
    --dxbl-btn-active-bg: var(--mt-primary-active);
    --dxbl-btn-active-color: var(--mt-primary-fg);
    --dxbl-btn-active-border-color: var(--mt-primary-active);
    --dxbl-btn-focus-shadow-color: rgba(var(--mt-primary-rgb), .25);
    --dxbl-btn-focus-shadow-spread: 3px;
    --dxbl-btn-focus-shadow-blur: 0px;
}
.dxbl-btn-primary img,
.dxbl-btn-primary:hover img { filter: var(--mt-icon-filter-white); }

/* SECONDARY (XAF araç çubuğu/eylem düğmelerinin VARSAYILANI) VE OUTLINE-SECONDARY
   (arama/filtre ikon düğmeleri) -> Metronic "outline" görünümü: beyaz zemin,
   ince girdi kenarlığı, hover'da açık gri zemin. DevExpress bu ikisini
   toolbar-btn zincirinden türetiyor; biz doğrudan aynı elemanda ezip
   toolbar içinde/dışında tutarlı kılıyoruz. */
.dxbl-btn-secondary,
.dxbl-btn-outline-secondary {
    --dxbl-btn-bg: var(--mt-bg);
    --dxbl-btn-color: var(--mt-fg-secondary);
    --dxbl-btn-border-color: var(--mt-input);
    --dxbl-btn-hover-bg: var(--mt-accent);
    --dxbl-btn-hover-color: var(--mt-fg-secondary);
    --dxbl-btn-hover-border-color: var(--mt-input);
    --dxbl-btn-active-bg: var(--mt-accent);
    --dxbl-btn-active-color: var(--mt-fg-secondary);
    --dxbl-btn-active-border-color: var(--mt-input);
    --dxbl-btn-disabled-bg: var(--mt-bg);
    --dxbl-btn-disabled-border-color: var(--mt-input);
}
.dxbl-btn-secondary img,
.dxbl-btn-outline-secondary img { filter: var(--mt-icon-filter); }
.dxbl-btn-secondary:hover img,
.dxbl-btn-outline-secondary:hover img { filter: var(--mt-icon-filter-strong); }

/* OUTLINE-PRIMARY -> Metronic "açık (light) primary": zemin ve kenarlık aynı
   soluk mavi, metin primary. */
.dxbl-btn-outline-primary {
    --dxbl-btn-bg: var(--mt-primary-soft);
    --dxbl-btn-border-color: var(--mt-primary-soft);
    --dxbl-btn-color: var(--mt-link); /* --mt-primary koyuda 2.84:1 veriyordu (K11) */
    --dxbl-btn-hover-bg: var(--mt-primary-light);
    --dxbl-btn-hover-border-color: var(--mt-primary-light-border);
    --dxbl-btn-hover-color: var(--mt-primary-text);
    --dxbl-btn-active-bg: var(--mt-primary-light);
    --dxbl-btn-active-border-color: var(--mt-primary-light-border);
    --dxbl-btn-box-shadow: none;
    --dxbl-btn-hover-box-shadow: none;
}
.dxbl-btn-outline-primary img { filter: var(--mt-icon-filter-primary); }

/* TEXT-SECONDARY / TEXT-PRIMARY -> ghost (şeffaf, hover'da hafif zemin) */
.dxbl-btn-text-secondary,
.dxbl-btn-text-primary {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-box-shadow: none;
    --dxbl-btn-hover-box-shadow: none;
    --dxbl-btn-hover-bg: var(--mt-accent);
}
.dxbl-btn-text-secondary { --dxbl-btn-color: var(--mt-fg-secondary); --dxbl-btn-hover-color: var(--mt-fg); }
.dxbl-btn-text-primary { --dxbl-btn-color: var(--mt-primary); --dxbl-btn-hover-color: var(--mt-primary-hover); }

/* LINK / OUTLINE-LINK -> düz metin gibi, kenarlıksız, altı çizili değil */
.dxbl-btn-link,
.dxbl-btn-outline-link {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-hover-bg: transparent;
    --dxbl-btn-color: var(--mt-primary);
    --dxbl-btn-hover-color: var(--mt-primary-hover);
    --dxbl-btn-box-shadow: none;
    --dxbl-btn-hover-box-shadow: none;
    --dxbl-btn-link-text-decoration: none;
}

/* DANGER / SUCCESS / INFO açık (outline/text) varyantları -> Metronic "açık (light)"
   rozet-düğme ailesi: <renk>-light zemin, <renk>-light-border kenarlık, <renk>-text
   metin. DOLU (.dxbl-btn-danger/-success/-info) ayrı, aşağıdaki ZekiKodOkul kuralında. */
.dxbl-btn-outline-danger, .dxbl-btn-text-danger {
    --dxbl-btn-bg: var(--mt-danger-light);
    --dxbl-btn-border-color: var(--mt-danger-light-border);
    --dxbl-btn-color: var(--mt-danger-text);
    --dxbl-btn-hover-bg: var(--mt-danger-light);
    --dxbl-btn-hover-border-color: var(--mt-danger);
    --dxbl-btn-hover-color: var(--mt-danger-text);
    --dxbl-btn-box-shadow: none;
}
.dxbl-btn-outline-success, .dxbl-btn-text-success {
    --dxbl-btn-bg: var(--mt-success-light);
    --dxbl-btn-border-color: var(--mt-success-light-border);
    --dxbl-btn-color: var(--mt-success-text);
    --dxbl-btn-hover-bg: var(--mt-success-light);
    --dxbl-btn-hover-border-color: var(--mt-success);
    --dxbl-btn-hover-color: var(--mt-success-text);
    --dxbl-btn-box-shadow: none;
}
.dxbl-btn-warning, .dxbl-btn-outline-warning, .dxbl-btn-text-warning {
    --dxbl-btn-bg: var(--mt-warning-light);
    --dxbl-btn-border-color: var(--mt-warning-light-border);
    --dxbl-btn-color: var(--mt-warning-text);
    --dxbl-btn-hover-bg: var(--mt-warning-light);
    --dxbl-btn-hover-border-color: var(--mt-warning);
    --dxbl-btn-hover-color: var(--mt-warning-text);
    --dxbl-btn-box-shadow: none;
}
.dxbl-btn-outline-info, .dxbl-btn-text-info {
    --dxbl-btn-bg: var(--mt-info-light);
    --dxbl-btn-border-color: var(--mt-info-light-border);
    --dxbl-btn-color: var(--mt-info-text);
    --dxbl-btn-hover-bg: var(--mt-info-light);
    --dxbl-btn-hover-border-color: var(--mt-info);
    --dxbl-btn-hover-color: var(--mt-info-text);
    --dxbl-btn-box-shadow: none;
}

/* DOLU DANGER / SUCCESS / INFO (ZekiKodOkul bg-red-600 / bg-green-600; FK:13) */
.dxbl-btn-danger  { --dxbl-btn-bg: var(--mt-danger);  --dxbl-btn-border-color: var(--mt-danger);  --dxbl-btn-color: #fff;
                    --dxbl-btn-hover-bg: var(--mt-danger-hover); --dxbl-btn-hover-border-color: var(--mt-danger-hover); --dxbl-btn-hover-color: #fff; --dxbl-btn-box-shadow: none; }
.dxbl-btn-success { --dxbl-btn-bg: var(--mt-success-solid); --dxbl-btn-border-color: var(--mt-success-solid); --dxbl-btn-color: #fff;
                    --dxbl-btn-hover-bg: #166534; --dxbl-btn-hover-border-color: #166534; --dxbl-btn-hover-color: #fff; --dxbl-btn-box-shadow: none; }
.dxbl-btn-info    { --dxbl-btn-bg: var(--mt-info);    --dxbl-btn-border-color: var(--mt-info);    --dxbl-btn-color: #fff;
                    --dxbl-btn-hover-bg: var(--mt-info-hover); --dxbl-btn-hover-border-color: var(--mt-info-hover); --dxbl-btn-hover-color: #fff; --dxbl-btn-box-shadow: none; }
/* Dolu düğmelerde ikon beyaz: --mt-icon-filter-white, .dxbl-btn-primary ile aynı kural */
.dxbl-btn-danger img, .dxbl-btn-danger:hover img,
.dxbl-btn-success img, .dxbl-btn-success:hover img,
.dxbl-btn-info img, .dxbl-btn-info:hover img { filter: var(--mt-icon-filter-white); }

/* TOOL (küçük ikon düğmeleri: editör içi temizle x, ok, +/kalem, spin oku,
   sekme/aksiyon menüsü ok tuşları, popup kapat X) -> tam ghost, ince ikon */
.dxbl-btn-tool {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-box-shadow: none;
    --dxbl-btn-hover-box-shadow: none;
    --dxbl-btn-color: var(--mt-fg-muted);
    --dxbl-btn-hover-bg: var(--mt-accent);
    --dxbl-btn-hover-color: var(--mt-fg);
    --dxbl-btn-border-radius: 4px;
    --dxbl-btn-padding-x: .375rem;
    --dxbl-btn-padding-y: .375rem;
}
.dxbl-btn-tool img { filter: var(--mt-icon-filter); }
.dxbl-btn-tool:hover img { filter: var(--mt-icon-filter-strong); }
.dxbl-btn-tool svg { color: var(--mt-fg-muted); }
.dxbl-btn-tool:hover svg { color: var(--mt-fg); }

/* Bölünmüş (split) düğme: eylem düğmesi + dar açılır ok bitişik oturur,
   iç köşeler düz, sadece BİTİŞİK kardeşi hedefler (araç çubuğundaki
   ilgisiz düğmeleri birbirine kaynaştırmaz). */
.dxbl-btn + .dxbl-btn-split-dropdown {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.dxbl-btn:has(+ .dxbl-btn-split-dropdown) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.dxbl-btn-split-dropdown {
    width: 30px;
    flex: 0 0 30px;
}


/* ============================================================================
   2) ARAÇ ÇUBUKLARI — dxbl-toolbar / .dxbl-btn-toolbar / gruplar
      NOT: her görünür düğmenin .dxbl-virtual-toolbar içinde gizli bir
      __virtual ikizi var (adaptif ölçüm için); seçiciler burada onu
      DIŞLAMIYOR, ikisi de aynı görünmeli.
   ============================================================================ */
.dxbl-toolbar {
    --dxbl-toolbar-group-spacing: 8px;
    --dxbl-toolbar-item-spacing: 8px;
    --dxbl-toolbar-group-large-spacing: 16px;
}
.dxbl-btn-toolbar,
.dxbl-btn-toolbar > .dxbl-adaptive-container-content {
    --dxbl-btn-toolbar-spacing: 8px;
    --dxbl-btn-toolbar-item-spacing: 8px;
    align-items: center;
}
.dxbl-toolbar-btn {
    min-height: var(--mt-control-h);
}

/* Yalnız ikon durumu (metin gizli) -> kare kt-btn-icon, ikon ortalı.
   Yalnız İKONU OLAN düğmeler: ikonsuz eylemler (ör. "Cihaza Gönder") bu
   durumda da metnini gösteriyor; onları 34px'e sıkıştırmak metni ikonun
   üstüne taşırıyordu (canlı doğrulamada görüldü). */
.dxbl-btn-toolbar.dxbl-toolbar-no-item-text .dxbl-btn:has(> img),
.dxbl-toolbar-item.dxbl-adaptive-item-state-no-text .dxbl-btn:has(> img) {
    width: var(--mt-control-h);
    --dxbl-btn-padding-x: 0;
    justify-content: center;
}

/* Taşma "..." düğmesi -> ghost ikon düğmesi */
.dxbl-toolbar-btn-ellipsis .dxbl-btn {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-hover-bg: var(--mt-accent);
    --dxbl-btn-box-shadow: none;
}

/* Araç çubuğu ikonları (renkli DevExpress SVG'leri <img> olarak) */
.dxbl-btn img.xaf-toolbar-item-icon {
    width: 16px;
    height: 16px;
    filter: var(--mt-icon-filter);
}
.dxbl-btn:hover img.xaf-toolbar-item-icon,
.dxbl-btn-secondary:hover img.xaf-toolbar-item-icon {
    filter: var(--mt-icon-filter-strong);
}
.dxbl-btn-primary img.xaf-toolbar-item-icon,
.dxbl-btn-primary:hover img.xaf-toolbar-item-icon {
    filter: var(--mt-icon-filter-white);
}

/* Liste görünümü serbest metin arama kutusu (araç çubuğu içindeki
   dxbl-text-edit, "Aranacak metin...") -> kt-input, ~200px genişlik.
   Rapor görüntüleyicinin kendi araç çubuğu (.dxbrv-toolbar: sayfa seçici,
   yakınlaştırma) hariç: orada 240px sayfa seçiciyi düğmelerin üstüne taşırıyordu. */
dxbl-toolbar:not(.dxbrv-toolbar *) .dxbl-text-edit {
    width: 200px; /* 240px dar listelerde araç çubuğunu bütünüyle yalnız-ikon moduna düşürüyordu */
    min-height: var(--mt-control-h);
}
dxbl-toolbar .dxbl-text-edit .dxbl-btn-tool {
    --dxbl-btn-color: var(--mt-fg-muted);
}

/* Rapor görüntüleyici sağ sekme şeridi: DX --dxbrv-primary-color ile dolu mavi. ZK sekme dili: nötr yüzey, yalnız etkin sekmede gösterge. */
.dxbrv-wrapper .dxbrv-tabs { background-color: var(--mt-bg); border-inline-start: 1px solid var(--mt-border); }
.dxbrv-wrapper .dxbrv-tabs .dxbrv-tab-icon { color: var(--mt-fg-muted); }
.dxbrv-wrapper .dxbrv-tabs .dxbrv-tab-icon:hover { background: var(--mt-accent); color: var(--mt-fg); }
.dxbrv-wrapper .dxbrv-tabs .dxbrv-active-tab,
.dxbrv-wrapper .dxbrv-tabs .dxbrv-active-tab:hover { background: var(--mt-primary-light); color: var(--mt-link); box-shadow: inset 4px 0 0 var(--mt-primary); }
.dxbrv-wrapper .dxbrv-tabs .dxbrv-tab-icon:focus-visible { outline-color: var(--mt-ring); }


/* ============================================================================
   3) METİN EDİTÖRLERİ — .dxbl-text-edit (girdi, combo, arama, tarih/saat,
      spin, maskeli, şifre, memo, tag-box) + Bootstrap .form-control/.form-select
   ============================================================================ */
.dxbl-text-edit {
    --dxbl-text-edit-font-family: var(--mt-font);
    --dxbl-text-edit-font-size: var(--mt-text-2sm);   /* 13px */
    --dxbl-text-edit-padding-x: var(--mt-control-px); /* 12px */
    --dxbl-text-edit-padding-y: .4375rem;
    --dxbl-text-edit-border-color: var(--mt-input);
    --dxbl-text-edit-border-radius: var(--mt-radius-sm);
    --dxbl-text-edit-box-shadow: var(--mt-shadow-xs);
    --dxbl-text-edit-color: var(--mt-fg);
    --dxbl-text-edit-bg: var(--mt-input-bg);
    --dxbl-text-edit-btn-bg: transparent; /* DX .dxbl-text-edit>.dxbl-btn-group zeminini --bs-body-bg (=--mt-bg, koyuda #1F2937) ile boyuyordu; grup editörün kendi zeminini göstersin */
    /* Odak: ZekiKodOkul mavi halka */
    --dxbl-text-edit-focus-border-color: var(--mt-ring);
    --dxbl-text-edit-focus-shadow-color: #3B82F6;
    --dxbl-text-edit-focus-shadow-spread: 1px;
    --dxbl-text-edit-focus-shadow-blur: 0px;
    box-sizing: border-box;
    min-height: var(--mt-control-h);
}
.dxbl-text-edit.dxbl-sm {
    --dxbl-text-edit-padding-x: .625rem;
    --dxbl-text-edit-padding-y: .25rem;
    min-height: var(--mt-control-h-sm);
}
.dxbl-text-edit.dxbl-lg {
    --dxbl-text-edit-padding-x: 1rem;
    --dxbl-text-edit-padding-y: .5rem;
    min-height: var(--mt-control-h-lg);
}
.dxbl-text-edit-input,
.dxbl-text-edit textarea {
    font-family: var(--mt-font);
    color: var(--mt-fg);
}
.dxbl-text-edit-input::placeholder {
    color: var(--mt-fg-faint);
    opacity: 1;
}

/* Editör içi düğmeler (temizle, kalem, +, açılır ok, takvim, spin): sıkışık.
   XAF lookup editörlerinde dört düğme yan yana gelebiliyor; dar kolonlarda
   (ör. Personel > Şirket Bilgileri) 28-34px'lik düğmeler metin alanını
   sıfıra indirip açılır oku kutunun dışına taşırıyordu (canlı doğrulama). */
.dxbl-text-edit > .dxbl-btn,
.dxbl-text-edit > .dxbl-btn-group:not(.dxbl-btn-group-vertical) > .dxbl-btn {
    --dxbl-btn-padding-x: 4px;
    --dxbl-btn-padding-y: 0px;
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-hover-bg: var(--mt-accent);
    --dxbl-btn-hover-border-color: transparent;
    --dxbl-btn-box-shadow: none;
    --dxbl-btn-hover-box-shadow: none;
    --dxbl-btn-color: var(--mt-fg-muted);
    --dxbl-btn-hover-color: var(--mt-fg);
    min-height: 0;
    min-width: 24px;
    width: auto;
    align-self: center;
    height: 26px;
    border-radius: 4px;
}
/* Sayı editörünün yukarı/aşağı düğmeleri dikey grup: her biri editör
   yüksekliğinin yarısı kadar kalır (genel 34px min-height'i 52px'lik
   yığın yapıyordu). */
.dxbl-text-edit > .dxbl-spin-btns.dxbl-btn-group-vertical {
    align-self: stretch;
    padding: 2px 2px 2px 0;
}
.dxbl-text-edit > .dxbl-spin-btns.dxbl-btn-group-vertical > .dxbl-btn {
    --dxbl-btn-padding-x: 4px;
    --dxbl-btn-padding-y: 0px;
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-hover-bg: var(--mt-accent);
    --dxbl-btn-box-shadow: none;
    --dxbl-btn-hover-box-shadow: none;
    --dxbl-btn-color: var(--mt-fg-muted);
    min-height: 0;
    height: auto;
    flex: 1 1 0;
    border-radius: 3px;
}
.dxbl-text-edit:has(> .dxbl-btn, > .dxbl-btn-group) {
    --dxbl-text-edit-padding-x: 10px;
    padding-right: 3px;
}

/* Koyu: --mt-accent (#374151) artık girdi zeminiyle aynı; hover bir ton açık */
:root.dark .dxbl-text-edit > .dxbl-btn,
:root.dark .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn {
    --dxbl-btn-hover-bg: var(--mt-input); /* #4B5563 */
}

/* Odak durumu — DevExpress .dxbl-focused sınıfını JS ile ekliyor; değişken
   zincirine ek olarak doğrudan da veriyoruz (garanti altına almak için). */
.dxbl-text-edit.dxbl-focused,
.dxbl-focused.dxbl-text-edit {
    border-color: var(--mt-ring);
    box-shadow: var(--mt-ring-shadow);
}

/* Devre dışı / salt okunur (XAF salt-okunur alanları da .dxbl-disabled ile
   işaretliyor) — veri taşıdıkları için SOLMAZ, sadece nötr zemine oturur. */
.dxbl-text-edit.dxbl-disabled {
    --dxbl-text-edit-disabled-bg: var(--mt-bg-subtle);
    --dxbl-text-edit-disabled-color: var(--mt-fg-secondary);
    --dxbl-text-edit-disabled-opacity: 100%;
    box-shadow: none;
}

/* Doğrulama hatası (XAF: .invalid.validation-invalid ile işaretliyor;
   kenarlık zaten --dxbl-text-edit-validation-invalid-color üzerinden
   --mt-danger'a eşleniyor, burada sadece halkayı ekliyoruz) */
.invalid.validation-invalid.dxbl-text-edit {
    box-shadow: 0 0 0 3px rgba(var(--mt-danger-rgb), .15);
}

/* Çok satırlı metin (memo) */
.dxbl-memo-edit {
    min-height: 80px;
    --dxbl-text-edit-padding-x: 12px;
    --dxbl-text-edit-padding-y: 8px;
}

/* Tag-box (çoklu seçim etiketleri) */
.dxbl-tag-box {
    --dxbl-tag-box-tag-border-radius: 4px;
    --dxbl-tag-box-tag-padding-x: .5rem;
    --dxbl-tag-box-tag-padding-y: .125rem;
    --dxbl-tag-box-tag-spacing-x: .25rem;
    --dxbl-tag-box-tag-spacing-y: .1875rem;
}
.dxbl-tag {
    background-color: var(--mt-accent);
    color: var(--mt-fg-secondary);
    font-size: var(--mt-text-xs);      /* 12px */
    font-weight: var(--mt-fw-medium);
    min-height: 22px;
    border-radius: 4px;
}
.dxbl-tag .dxbl-tag-close-btn,
.dxbl-tag [class*="close"] {
    color: var(--mt-fg-muted);
}

/* ---- Bootstrap form denetimleri (özel sayfalarda kullanılan) ------------ */
.form-control,
.form-select {
    font-family: var(--mt-font);
    font-size: var(--mt-text-2sm);
    color: var(--mt-fg);
    background-color: var(--mt-input-bg);
    min-height: var(--mt-control-h);
    padding: .4375rem var(--mt-control-px);
    border-color: var(--mt-input);
    border-radius: var(--mt-radius-sm);
    box-shadow: var(--mt-shadow-xs);
}
.form-control::placeholder { color: var(--mt-fg-faint); opacity: 1; }
.form-control:focus,
.form-select:focus {
    border-color: var(--mt-ring);
    box-shadow: var(--mt-ring-shadow);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--mt-bg-subtle);
    color: var(--mt-fg-secondary);
    opacity: 1;
}
.form-control-sm, .form-select-sm { min-height: var(--mt-control-h-sm); font-size: var(--mt-text-xs); }
.form-control-lg, .form-select-lg { min-height: var(--mt-control-h-lg); font-size: var(--mt-text-sm); }
.form-label {
    font-size: var(--mt-text-2sm);
    font-weight: var(--mt-fw-medium);
    color: var(--mt-fg-secondary);
}
.form-text {
    font-size: var(--mt-text-xs);
    color: var(--mt-fg-muted);
}
.input-group-text {
    background-color: var(--mt-bg-subtle);
    border-color: var(--mt-input);
    color: var(--mt-fg-muted);
    font-size: var(--mt-text-2sm);
    border-radius: var(--mt-radius-sm);
}


/* ============================================================================
   4) ONAY KUTUSU / ANAHTAR / RADYO — dxbl-check.dxbl-checkbox + Bootstrap
      .form-check-input
   ============================================================================ */
.dxbl-checkbox {
    font-size: var(--mt-text-2sm);
    color: var(--mt-fg);
}
.dxbl-checkbox:where(:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio)) {
    --dxbl-checkbox-check-element-size: 1.125rem; /* 18px (ızgara içinde 16px de kabul) */
}
.dxbl-checkbox-check-element {
    border-radius: var(--mt-radius-xs);   /* DX bunu sabit .1875rem yazıyor, eziyoruz */
    border: 1px solid var(--mt-zinc-500); /* --mt-input yetersiz kontrast veriyordu (K17) */
    box-sizing: border-box;
    background-color: var(--mt-bg);
}
.dxbl-checkbox.dxbl-checkbox-checked .dxbl-checkbox-check-element,
.dxbl-checkbox.dxbl-checkbox-indeterminate .dxbl-checkbox-check-element {
    border-color: var(--mt-primary);
}
/* İşaretsiz kutu: DevExpress ::before ile ayrıca 2px koyu (opak .3) çerçeve
   çiziyordu; bizim 1px kenarlıkla üst üste "kalın çift çerçeve" oluyordu. */
.dxbl-checkbox:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio).dxbl-checkbox-unchecked .dxbl-checkbox-check-element::before {
    content: none;
}
/* Salt okunur (tabloda gösterim) kutuları: DevExpress beyaz kutu + 2px gri
   çerçeve + koyu tik çiziyor, düzenlenebilir kutudan farklı görünüyordu.
   Aynı Metronic kutusu: işaretsiz ince çerçeve, işaretli dolu ana renk + beyaz tik. */
.dxbl-checkbox.dxbl-checkbox-display-view-checked > div::before,
.dxbl-checkbox.dxbl-checkbox-display-view-unchecked > div::before {
    content: none;
}
.dxbl-checkbox.dxbl-checkbox-display-view-checked > div,
.dxbl-checkbox.dxbl-checkbox-display-view-unchecked > div {
    background-color: var(--mt-bg);
    box-shadow: inset 0 0 0 1px var(--mt-zinc-500); /* --mt-input yetersiz kontrast veriyordu (K17) */
    border-radius: var(--mt-radius-xs);
}
.dxbl-checkbox.dxbl-checkbox-display-view-checked > div {
    background-color: var(--mt-primary);
    box-shadow: none;
}
.dxbl-checkbox.dxbl-checkbox-display-view-checked > div > .dxbl-image {
    fill: var(--mt-primary-fg);
    color: var(--mt-primary-fg);
}

/* Anahtar (switch) modu — DevExpress sınıfı: .dxbl-checkbox-switch.
   Zemin rengini DX'in KENDİ değişken zincirine (--dxbl-checkbox-switch-*-bg)
   veriyoruz ki checked/unchecked ayrımını DX'in kendi kuralı yapsın; böylece
   (0,3,0) özgüllük sınırını aşan ayrı bir "checked" seçicisine gerek kalmıyor
   ve --dxbl-checkbox-switch-checked-bg zaten --bs-primary -> --mt-primary
   köprüsünden otomatik geliyor. */
.dxbl-checkbox.dxbl-checkbox-switch {
    --dxbl-checkbox-switch-width: 2.25rem;   /* 36px iz */
    --dxbl-checkbox-switch-height: 1.25rem;  /* 20px iz */
    --dxbl-checkbox-switch-unchecked-bg: var(--mt-zinc-200);
    --dxbl-checkbox-switch-unchecked-hover-bg: var(--mt-zinc-300);
}
.dxbl-checkbox.dxbl-checkbox-switch .dxbl-checkbox-check-element {
    border: none;
    border-radius: 999px;
}

/* Radyo düğmesi — DevExpress sınıfı: .dxbl-checkbox-radio. Görsel eleman
   check-element'i paylaşıyorsa daireye çeviriyoruz; paylaşmıyorsa bu kural
   eşleşmez (zararsız). */
.dxbl-checkbox.dxbl-checkbox-radio {
    --dxbl-checkbox-radio-size: 1.125rem; /* 18px */
}
.dxbl-checkbox.dxbl-checkbox-radio .dxbl-checkbox-check-element {
    border-radius: 50%;
}

/* ---- Bootstrap .form-check (özel sayfalarda) ----------------------------- */
.form-check-input {
    width: 18px;
    height: 18px;
    border: 1px solid var(--mt-zinc-500); /* --mt-input yetersiz kontrast veriyordu (K17, P2-4 ile aynı token) */
    border-radius: var(--mt-radius-xs);
    box-shadow: none;
}
.form-check-input:checked {
    background-color: var(--mt-primary);
    border-color: var(--mt-primary);
}
.form-check-input:focus {
    border-color: var(--mt-ring);
    box-shadow: var(--mt-ring-shadow);
}
.form-check-input[type="radio"] {
    border-radius: 50%;
}
.form-switch .form-check-input {
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background-color: var(--mt-zinc-200);
    border-color: transparent;
}
.form-switch .form-check-input:checked {
    background-color: var(--mt-primary);
}
.form-check-label {
    font-size: var(--mt-text-2sm);
    color: var(--mt-fg);
}


/* ============================================================================
   5) İLERLEME ÇUBUĞU — .dxbl-progress-bar + Bootstrap .progress
   ============================================================================ */
.dxbl-progress-bar {
    --dxbl-progress-bar-thickness: 6px;
    --dxbl-progress-bar-border-radius: 999px;
    --dxbl-progress-bar-track-color: var(--mt-accent);
    --dxbl-progress-bar-track-opacity: 1;
    --dxbl-progress-bar-indicator-color: var(--mt-primary);
}
.progress {
    background-color: var(--mt-accent);
    border-radius: 999px;
    height: 6px;
}
.progress-bar {
    background-color: var(--mt-primary);
}


/* ============================================================================
   6) DOSYA YÜKLEME / RESİM EDİTÖRÜ
   ============================================================================ */
.dxbl-upload,
.dxbl-upload-container,
.dxbl-upload-panel {
    border: 1px dashed var(--mt-zinc-300);
    border-radius: var(--mt-radius);
    background-color: var(--mt-bg-subtle);
    color: var(--mt-fg-muted);
}
.dxbl-upload-file-view-text {
    color: var(--mt-fg-secondary);
}

/* XAF resim editörü (Personel kartındaki kamera kutusu) */
.xaf-image-editor .img-thumbnail {
    border: 1px dashed var(--mt-zinc-300);
    border-radius: var(--mt-radius);
    background-color: var(--mt-bg-subtle);
}
.xaf-image-editor img.xaf-image {
    filter: var(--mt-icon-filter);
}


/* ============================================================================
   7) BOOTSTRAP ROZETLERİ (.badge / .bg-* / .text-bg-*) -> Metronic "açık (light)
      pill" rozet. Bootstrap yardımcı sınıfları !important ile geldiği için
      (mevcut !important'ı yenmek üzere) burada da !important kullanıldı.
   ============================================================================ */
.badge {
    font-size: var(--mt-text-xs);     /* 12px */
    font-weight: var(--mt-fw-medium);
    border-radius: var(--mt-radius-pill);
    height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.badge.bg-primary, .text-bg-primary {
    background-color: var(--mt-primary-light) !important; /* DX/Bootstrap .bg-primary !important'ını yener */
    color: var(--mt-primary-text) !important;
    border: 1px solid var(--mt-primary-light-border);
}
.badge.bg-success, .text-bg-success {
    background-color: var(--mt-success-light) !important;
    color: var(--mt-success-text) !important;
    border: 1px solid var(--mt-success-light-border);
}
.badge.bg-danger, .text-bg-danger {
    background-color: var(--mt-danger-light) !important;
    color: var(--mt-danger-text) !important;
    border: 1px solid var(--mt-danger-light-border);
}
.badge.bg-warning, .text-bg-warning {
    background-color: var(--mt-warning-light) !important;
    color: var(--mt-warning-text) !important;
    border: 1px solid var(--mt-warning-light-border);
}
.badge.bg-info, .text-bg-info {
    background-color: var(--mt-info-light) !important;
    color: var(--mt-info-text) !important;
    border: 1px solid var(--mt-info-light-border);
}
.badge.bg-secondary, .text-bg-secondary, .badge.bg-light, .text-bg-light {
    background-color: var(--mt-accent) !important;
    color: var(--mt-fg-secondary) !important;
    border: 1px solid var(--mt-border);
}


/* ============================================================================
   8) BAĞLANTILAR (.btn Bootstrap taban + link yardımcıları)
      Renkler zaten mt-tokens.css'te `a` için tanımlı; burada sadece Bootstrap
      .btn ailesinin ölçülerini kt-btn'e eşliyoruz (özel sayfalar için).
   ============================================================================ */
.btn {
    font-family: var(--mt-font);
    font-size: var(--mt-text-2sm);
    font-weight: var(--mt-fw-medium);
    min-height: var(--mt-control-h);
    padding: .4375rem var(--mt-control-px);
    border-radius: var(--mt-radius-sm);
    box-shadow: var(--mt-shadow-xs);
    gap: var(--mt-gap);
    transition: background-color var(--mt-transition), border-color var(--mt-transition),
                color var(--mt-transition), box-shadow var(--mt-transition);
}
.btn-sm { min-height: var(--mt-control-h-sm); font-size: var(--mt-text-xs); padding: .25rem .625rem; }
.btn-lg { min-height: var(--mt-control-h-lg); font-size: var(--mt-text-sm); padding: .5rem 1rem; }
.btn-primary {
    background-color: var(--mt-primary); border-color: var(--mt-primary); color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--mt-primary-hover); border-color: var(--mt-primary-hover); color: #fff;
}
.btn-primary:active {
    background-color: var(--mt-primary-active); border-color: var(--mt-primary-active); color: #fff;
}
.btn-secondary, .btn-outline-secondary {
    background-color: var(--mt-bg); border-color: var(--mt-input); color: var(--mt-fg-secondary);
    box-shadow: var(--mt-shadow-xs);
}
.btn-secondary:hover, .btn-outline-secondary:hover {
    background-color: var(--mt-accent); border-color: var(--mt-input); color: var(--mt-fg-secondary);
}
.btn-outline-primary {
    background-color: var(--mt-primary-soft); border-color: var(--mt-primary-soft); color: var(--mt-link); /* --mt-primary koyuda 2.84:1 veriyordu (K11) */
    box-shadow: none;
}
.btn-outline-primary:hover {
    background-color: var(--mt-primary-light); border-color: var(--mt-primary-light-border); color: var(--mt-primary-text);
}
.btn-link {
    color: var(--mt-link); box-shadow: none; text-decoration: none; /* --mt-primary koyuda 2.84:1 veriyordu (K11) */
}
.btn-link:hover { color: var(--mt-link-hover); text-decoration: none; }
.btn-danger  { background-color: var(--mt-danger);        border-color: var(--mt-danger);        color: #fff; box-shadow: none; }
.btn-danger:hover  { background-color: var(--mt-danger-hover); border-color: var(--mt-danger-hover); color: #fff; }
.btn-success { background-color: var(--mt-success-solid);  border-color: var(--mt-success-solid);  color: #fff; box-shadow: none; }
.btn-success:hover { background-color: #166534; border-color: #166534; color: #fff; }
.btn-warning { background-color: var(--mt-warning-light); border-color: var(--mt-warning-light-border); color: var(--mt-warning-text); box-shadow: none; } /* açık varyantta kalır */
.btn-info    { background-color: var(--mt-info);          border-color: var(--mt-info);          color: #fff; box-shadow: none; }
.btn-info:hover    { background-color: var(--mt-info-hover); border-color: var(--mt-info-hover); color: #fff; }
.btn:disabled, .btn.disabled { opacity: .5; box-shadow: none; }

/* ============================================================================
   9) EDİTÖR DÜĞMELERİ — ekran taraması sonrası düzeltmeler
   ============================================================================ */
/* Odaklı editörde DevExpress düğme grubundaki her düğmenin kenarlığını odak
   rengine boyuyor ((0,6,0) seçici): girdi ile düğmeler arasında mavi dikey
   ayraçlar çıkıyordu. Metronic girdisinde yalnız dış çerçeve renklenir. */
.dxbl-text-edit > .dxbl-btn-group:not(.dxbl-btn-group-vertical) > .dxbl-btn,
.dxbl-text-edit > .dxbl-btn {
    border-color: transparent !important; /* DevExpress'in :focus-within zinciri (0,6,0) */
}
/* Temizle (⊗): DevExpress %70 koyu dolu disk çiziyordu (her alanda ağır
   görünüyordu); Metronic'teki gibi açık gri disk, üzerine gelince koyulaşır. */
.dxbl-text-edit .dxbl-btn.dxbl-edit-btn-clear > svg.dxbl-image {
    background-color: var(--mt-zinc-400);
    opacity: 1;
}
.dxbl-text-edit .dxbl-btn.dxbl-edit-btn-clear:hover > svg.dxbl-image {
    background-color: var(--mt-fg-muted);
}
/* Salt okunur / devre dışı form editörleri: işlevsiz sayaç okları, takvim ve
   açılır düğmeleri kutunun içinde ayrı tonda bir şerit oluşturuyordu.
   Yalnız DEVRE DIŞI düğmeler gizlenir (etkin kalan düğme, ör. bağlantı, durur). */
.dxbl-fl .dxbl-fl-ctrl > .dxbl-text-edit:is(.dxbl-disabled, .dxbl-readonly) > .dxbl-btn:is(:disabled, .dxbl-disabled),
.dxbl-fl .dxbl-fl-ctrl > .dxbl-text-edit:is(.dxbl-disabled, .dxbl-readonly) > .dxbl-btn-group:not(:has(.dxbl-btn:not(:disabled):not(.dxbl-disabled))),
.dxbl-fl .dxbl-fl-ctrl > .dxbl-text-edit:is(.dxbl-disabled, .dxbl-readonly) > .dxbl-spin-btns {
    display: none;
}