:root {
    --rz-root-font-size: 12px !important;
    --rz-body-font-size: 1.1rem !important;

    /* --- Tema bağımsız input geometrisi ---
       Radzen temaları input yüksekliğini/padding'ini farklı tanımlıyor
       (standard: --rz-input-size-md 2.25rem / padding-inline 0.4375rem,
        material: 2.5rem / 0.9375rem). Bileşenlerdeki sabit px yüksekliklerle
       birleşince material'da içerik kutuya sığmayıp alttan kesiliyordu.
       Geometriyi burada sabitliyoruz; .rz-input-md içindeki
       --rz-input-line-height calc'i bu değerleri miras aldığı için
       satır yüksekliği tüm temalarda aynı hesaplanır. */
    --rz-input-size-md: 25px !important;
    --rz-input-size-sm: 22px !important;
    --rz-input-padding-block-md: 3px !important;
    --rz-input-padding-inline-md: 6px !important;
    --rz-input-font-size-md: var(--rz-body-font-size) !important;
    --rz-input-font-size-sm: var(--rz-body-font-size) !important;
    --rz-form-field-start-end-padding-inline: 6px !important;

    --rz-input-disabled-color: var(--rz-text-color) !important;
    --rz-text-caption-font-size: 1.0rem !important;
    --rz-border-normal: var(--rz-border-width) solid var(--rz-base-400) !important;
    --rz-border-disabled: var(--rz-border-width) solid var(--rz-base-400) !important;
    --rz-switch-background-color: var(--rz-base-400) !important;

    /* --- Tema uyumlu yüzey renkleri ---
       Başlık/altbilgi şeridi, ayraç ve soluk metin için --rz-base-100/200/300
       KULLANILMAZ. O ölçek her iki temada da aynı açık grileri döndürür; değişen
       şey ölçeğin hangi ucunun zemin, hangi ucunun metin olduğudur:

         aydınlık: zemin = beyaz,        metin = --rz-base-800  (koyu)
         koyu:     zemin = --rz-base-800, metin = --rz-base-100  (#eaebec)

       Yani koyu temada --rz-base-200 (#e1e2e3) metin renginin (#eaebec) hemen
       yanındadır: o zeminin üzerine tema metni basılınca kontrast 1.04:1 olur ve
       yazı tamamen kaybolur. Aşağıdaki değişkenler rengi zeminden türetir, bu
       yüzden iki temada da doğru yönde çalışır.

       Pencere zemini farklı olan bileşenler (dialog) bu değişkenleri kendi
       zeminine göre yeniden tanımlar; bkz. .sd-msg */
    --sd-surface: color-mix(in srgb, var(--rz-text-color) 5%, var(--rz-base-background-color));
    /* Hover ve vurgulanmış satır: --sd-surface fark edilmeyecek kadar hafif kalıyor. */
    --sd-surface-hover: color-mix(in srgb, var(--rz-text-color) 9%, var(--rz-base-background-color));
    /* "Okunmadı", "yeni" gibi birincil vurgular. Nötr değil primary'den tonlanır;
       metin yine tema metnidir, böylece renkli metin/renkli zemin çakışması olmaz. */
    --sd-surface-accent: color-mix(in srgb, var(--rz-primary) 14%, var(--rz-base-background-color));
    --sd-border: color-mix(in srgb, var(--rz-text-color) 18%, var(--rz-base-background-color));
    --sd-text-muted: color-mix(in srgb, var(--rz-text-color) 72%, var(--rz-base-background-color));
}

/* --- Dropdown / enum: seçili metni dikeyde tam ortala ---
   Radzen .rz-dropdown'ı flex-column + justify-content:flex-start ile diziyor,
   .rz-dropdown-label ise satır kutusunu bloğun üstüne yaslıyor. Artan boşluk
   iki yerde de alta düşüp metni ~1px yukarı kaydırıyordu:
     enum        -> 23px kutu içinde 17px label, üstte 2px / altta 4px
     dropdown-grid -> 19px label içinde 17px satır kutusu, artık 2px altta
   align-content, display:block'u ve dolayısıyla text-overflow:ellipsis'i
   bozmadan satır kutusunu ortalar. İkisi de zaten ortalıysa etkisizdir. */
.rz-dropdown {
    justify-content: center !important;
}

.rz-dropdown-label {
    align-content: center !important;
}

.rz-dropdown-panel .rz-grid-table {
    width: 100% !important;
}

.rz-dialog-alert {
    max-width: 800px !important;
}

.rz-input-md {
    --rz-input-line-height: calc(var(--rz-input-size-md) * var(--rz-input-padding-block-md) * var(--rz-border-width)) !important;

}

.sd-detail-border {
    border: 5px solid var(--rz-warning-lighter); border-radius: 10px;
}

/* --- Detay grid çerçevesi (DataGridComponent IsDetail="true") ---
   Kalın kenarlık yerine 1px kenarlık + yükseltme gölgesi ile form alanlarından
   ayrılır. Yükseklik burada verilir; kullanıcı sağ alt köşeden sürüklediğinde
   tarayıcı elemana inline height yazar ve bu kural ezilir (textarea davranışı).
   Bu yüzden detay gridlerinde satır içi (inline) height verilmemelidir; verilirse
   kullanıcının ayarladığı yükseklik ilk yeniden çizimde geri alınır.
   Seçici çift sınıflı: Radzen tema css'i app.css'ten sonra yüklendiği için tek
   sınıflı .sd-detail-grid kuralı .rz-datatable tarafından eziliyordu. !important
   kullanılmaz; kullanılırsa kullanıcının sürükleyerek yazdığı inline height de ezilir.
   Varsayılan 300px dışında bir başlangıç yüksekliği gerekiyorsa gridde
   Style="--sd-detail-grid-height: 420px" verilir (height değil; height satır içi
   verilirse kullanıcının boyutlandırması kalıcı olmaz). */
.rz-data-grid.sd-detail-grid,
.rz-datatable.sd-detail-grid {
    box-sizing: border-box;
    position: relative;
    height: var(--sd-detail-grid-height, 300px);
    min-height: 150px;
    max-height: 85vh;
    resize: vertical;
    overflow: hidden; /* resize'ın çalışması için gerekli */
    padding-bottom: 14px; /* sağ alt köşedeki boyutlandırma tutamağına yer açar */
    border: 1px solid var(--rz-base-400);
    border-radius: 8px;
    background-color: var(--rz-base-background-color);
    box-shadow: var(--rz-shadow-2);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

/* --- Rapor görüntüleyici tablosu ---
   Geniş raporda (CRM.TEKLIF.DONUSUMU gibi) kolonların toplam genişliği ekranı aşar. Tablo
   kabından geniş büyürse kaydırma çubuğu tablonun değil SAYFANIN dışında kalır ve hiç
   görünmez (UAT Aşama 14: 1920px'te bile sağ kolonlar erişilemiyordu). İki kural birlikte
   verilir: genişlik kaba sabitlenir (kaydırma Radzen'in kendi .rz-data-grid-data kabında
   olur) ve yükseklik ekrana sınırlanır — 50 satırlık bir sayfada yatay çubuk tablonun en
   altında, yani ekranın çok aşağısında kalırdı; sınırla birlikte çubuk daima görünür alanda
   durur. .rz-data-grid-data flex: 1 + overflow: auto taşıdığı için asgari yüksekliği sıfırdır
   ve sınırın altına küçülür. Az satırlı raporda sınır devreye girmez, tablo içeriği kadardır. */
.rz-data-grid.sd-report-grid {
    max-width: 100%;
    min-width: 0;
    max-height: 75vh;
}

/* SY-2: yukarıdaki kural tablonun kendi kabında yeterlidir, ama ATALARDAN biri içeriği kadar
   genişlerse hepsi boşa gider. Izgara (grid) ve flex öğelerinin varsayılan asgari genişliği
   "auto"dur, yani içeriği kadardır: RadzenLayout'un 1fr gövde sütunu ve sekme paneli geniş bir
   raporla birlikte büyür, taşan kısım ekranın dışına düşer ve tablonun yatay çubuğu hiç
   devreye girmez. Zincirin her halkası 0'a indirilir; geniş içerik artık kendi kabında
   kayar. (Tarayıcıda 1440/1920 doğrulaması görsel turda yapılır.) */
.rz-layout > .rz-body,
.kobi-tabbar,
.kobi-tabbar__panels,
.kobi-tabbar__panel {
    min-width: 0;
}

.rz-data-grid.sd-detail-grid:hover,
.rz-datatable.sd-detail-grid:hover {
    box-shadow: var(--rz-shadow-3);
}

/* Grid içinde düzenleme yapılırken çerçeve öne çıkar */
.rz-data-grid.sd-detail-grid:focus-within,
.rz-datatable.sd-detail-grid:focus-within {
    border-color: var(--rz-primary);
    box-shadow: var(--rz-shadow-4);
}

/* --- Liste grid kolon başlıkları: iki satıra sarma + tam metin ipucu ---
   Kolon genişlikleri DTO'daki [GridColumn(Width=...)] değerinden gelir ve çoğu 100px'tir.
   O 100px'in yaklaşık yarısını kolon araçları yer: sürükleme tutamağı (~15px), yeniden
   boyutlandırma (~7px), filtre ikonu (14px) ve sıralama ikonu (14px). Başlık metnine
   ~45px kalıyor; Radzen bunu tek satırda kestiği için "Document VAT Amount" ekranda
   "Do..." olarak görünüyor ve kolonun ne olduğu anlaşılmıyordu.

   Üç önlem birlikte uygulanır:
   1. Metin yalnızca BOŞLUKTAN iki satıra sarar; kelimenin ortasından asla bölünmez
      ("Stok Kodu" alt alta iki kelime olur, "Id" ise "I" / "d" diye bölünmez).
   2. Sığmayan kelime ... ile kesilir (üçüncü satıra taşan başlık da öyle).
   3. Tam metin başlık elemanının title özniteliğindedir; fareyle üzerine gelince görünür
      (DataGridColumnComponent, HeaderTemplate).

   overflow-wrap burada bilinçli olarak KAPALIDIR. `anywhere` ile kelime, sığmayan ilk
   harften itibaren alt satıra iniyordu: 100px'lik Id kolonunda başlık metnine 7,9px
   kalıyor, "Id" (12,2px) de dikey iki harfe dönüşüyordu. Kesip ... koymak, harfleri alt
   alta dizmekten her zaman okunaklıdır; tam metin zaten ipucunda duruyor. (Id kolonu bu
   yüzden 120px'e çıkarıldı — bkz. DataGridColumnComponent.)

   Dar kolonlarda iki satır uzun başlıkların tamamını yine göstermeyebilir; kalıcı çözüm
   ilgili DTO'da kolon genişliğini artırmaktır. Özgüllük 0,3,0 / 0,4,0'dır ve temanın tek
   sınıflı .rz-column-title-content kuralını yener (app.css temadan önce yüklenir). */
.rz-data-grid .rz-column-title .rz-column-title-content {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    text-overflow: clip;
}

.rz-data-grid .rz-column-title .rz-column-title-content .sd-grid-header {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    text-overflow: ellipsis;
    line-height: 1.15;
}

/* --- Grid hücresindeki form alanı: etiket için ayrılan ölü boşluk ---
   Radzen, .rz-form-field-content'e etiketin oturacağı yeri açmak için üst boşluk
   (margin-block-start: 8.75px) verir. Grid hücresine konan girdilerde etiket yoktur:
   SerkanFormField Text'i her zaman null bırakır ve <label> boş render edilir. Boşluk
   yine de uygulandığı için içerik 30px'lik hücreden ~4.8px taşar; hücrenin overflow'u
   hidden olduğunda girdinin alt kenarı kırpılır (Birim Çarpanı kolonunda görülen kusur).
   Komşu dropdown kolonunda görünmemesinin tek sebebi o hücrenin overflow'unun visible
   olmasıdır — taşma orada da vardı.

   Boşluk yalnızca grid hücresinde sıfırlanır; formlardaki etiketli alanlar etkilenmez.
   Özgüllük 0,4,0'dır ve temanın tek sınıflı .rz-form-field-content kuralını (0,1,0)
   yener; bu yüzden app.css'in temadan önce yüklenmesi burada sorun çıkarmaz.
   Tema ile aynı mantıksal özellik kullanılır (margin-top değil margin-block-start). */
.rz-data-grid .rz-cell-data .rz-form-field > .rz-form-field-content {
    margin-block-start: 0;
}

/* Satır düzenleme kipindeki hücreye FAZLADAN sağ iç boşluk.

   Genişlik verilmeyen bir girdi bileşeni hücrenin iç kutusunu uçtan uca doldurur
   (`width: 100%`), yani kutunun sağ kenarı tam iç kenara oturur. Büyüteç (⋮) düğmesi
   taşıyan açılır listelerde araya düğme girdiği için bu göze batmaz; sayısal, metin,
   enum, tarih ve renk alanlarında kutu sütun çizgisiyle birleşir ve kullanıcıya
   "sağından kesilmiş" görünür (2026-09-16'da Fiş Şablonu ekranında bildirildi).
   Tarama aynı deseni 37 dosyada 121 sütunda buldu; tek tek sütun genişliği vermek
   hem çok dosyaya dokunur hem de dar sütunlarda değeri erken kısaltırdı.

   Kapsam bilinçli olarak DARDIR:
   - `tr.rz-datatable-edit` → yalnızca DÜZENLEME kipindeki satır; başlık, süzgeç satırı
     (`.rz-cell-filter`, ayrı sınıf), okuma kipindeki satırlar ve toplam satırı dışarıda
     kalır. Radzen düzenleme kipinde hücreye `rz-cell-data` sınıfını VERMEZ (hücrenin
     `class`'ı boştur), bu yüzden seçici o sınıfa dayanamaz — satır sınıfına dayanır.
   - `:has(...)` → yalnızca gerçekten girdi ÇİZEN hücre; o satırda salt okunur kalan
     hücrelerin hizası değişmez.
   Girdi `width: 100%` olduğu için kutu boşluk kadar daralır, taşma olmaz. */
.rz-grid-table tr.rz-datatable-edit > td:has(.rz-numeric,
                                             .rz-textbox,
                                             .rz-dropdown,
                                             .rz-datepicker) {
    padding-right: 20px;
}

/* -------------------------------------------------------------------------
   DETAY SATIR FORMU (POPUP)
   Detay gridler çok kolonlu olduğu için satır, alanları etiketleriyle gösteren
   bir formda da düzenlenebilir (DetailRowFormComponent).
   z-index Radzen popup (1001) ve Radzen dialog (1050) ALTINDA kalmalıdır:
   form içindeki dropdown listeleri ve seçim ekranları formun üzerinde açılır.
   Panel boyutu <html> üzerindeki --sd-row-form-w/h değişkenlerinden okunur;
   değişkeni rowform.js yazar (inline style Blazor tarafından silinebilir).
------------------------------------------------------------------------- */
.sd-row-form-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
}

.sd-row-form-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: var(--sd-row-form-w, min(1280px, 94vw));
    /* Varsayılan yükseklik içeriğe göre: az alanlı detay formlarında boş panel oluşmaz.
       Kullanıcı boyutlandırdığında rowform.js ölçüyü --sd-row-form-h'ye yazar. */
    height: var(--sd-row-form-h, auto);
    min-width: 420px;
    min-height: 220px;
    max-width: 98vw;
    max-height: 94vh;
    resize: both;
    overflow: hidden;
    border: 1px solid var(--rz-base-400);
    border-radius: 10px;
    background-color: var(--rz-base-background-color);
    box-shadow: var(--rz-shadow-6);
}

.sd-row-form-panel > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.sd-row-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--sd-border);
    background-color: var(--sd-surface);
}

.sd-row-form-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 10px 12px;
}

.sd-row-form-group {
    margin-bottom: 10px;
}

.sd-row-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 6px 16px;
}

/* ETİKET ÜSTTE (kullanıcı kararı, 2026-08-20).

   Alanlar üç sütuna diziliyor ve etiket solda 150px yer kaplıyordu: girdiye kalan genişlik
   yarıya iniyor, uzun etiketler iki satıra kırılıp komşu alanlarla hizasız duruyordu. Etiket
   üste alınınca girdi sütunun tamamını kullanır ve satırlar aynı yükseklikte kalır.

   Kural yalnızca detay gridinden açılan satır formu içindir; kayıt kartlarının kendi
   yerleşimi (etiket solda) değişmez. */
.sd-row-form-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
    /* Serkan input sarmalayıcıları içeriğinden birkaç piksel taşar; satır yüksekliği
       buna göre verilmezse dropdown'ların alt kenarı kesik görünür. */
    min-height: 36px;
}

.sd-row-form-label {
    line-height: 1.2;
    word-break: break-word;
    font-size: var(--rz-text-caption-font-size, .75rem);
    color: var(--rz-text-secondary-color);
}

/* Kolon EditTemplate'leri sabit piksel genişlikle gelir; min-width: 0 taşmayı önler.
   overflow gizlenmez: gizlenirse dropdown'ların alt kenarı kırpılır.

   flex-basis GENİŞLİK DEĞİL, kabın ANA EKSENİ boyunca ölçülür: alan artık sütun olduğu için
   "flex: 1 1 auto" yüksekliği esnetir ve girdiyi dikeyde şişirirdi. */
.sd-row-form-input {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

.sd-row-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--sd-border);
    background-color: var(--sd-surface);
}

.sd-dialog-content-height {
    height: 100% !important;
}

/* Temizleme (X) ikonunun yeri.
   Radzen ikonu ok tuşunun SOLUNA koyar: inset-inline-end = ok genişliği + .5rem.
   Bu doğru hesaptır ve genel olarak ezilmemelidir — ezilirse X, açılır liste okunun
   üstüne biner ve ikisi de tıklanamaz hâle gelir.
   Kural yalnızca okun gizlendiği kendi bileşenimiz için geçerlidir (.sd-drop-down-grid,
   aşağıda .rz-dropdown-trigger { display: none } ile gizleniyor); orada Radzen'in
   ayırdığı boşluk sahibsiz kalır ve X sağa çekilir. */
/* Sınıf, Radzen'in kök elemanına biner; "rz-clear" da aynı elemandadır (alt eleman değil),
   bu yüzden birleşik seçici kullanılır. */
.sd-drop-down-grid.rz-clear .rz-multiselect-label-container,
.sd-drop-down-grid.rz-clear .rz-dropdown-label {
    padding-inline-end: 10px !important;
}

.sd-drop-down-grid .rz-dropdown-clear-icon {
    inset-inline-end: 2px !important;
}

/* -------------------------------------------------------------------------
   HEADER TOOLBAR STYLING
   Fixes visibility issues in Light Mode (Dark Blue Header) and Dark Mode
------------------------------------------------------------------------- */
.tab-header {
    display: flex;
    align-items: center;
    gap: 8px;
}


.rz-header .rz-button .rz-icon,
.rz-header .rz-sidebar-toggle .rz-icon,
.rz-header .header-action-btn .rz-icon {
    color: inherit !important;
    font-size: 1.25rem !important;
}


.rz-header .rz-profile-menu {
    background-color: transparent !important;
    border: none !important;
}


.rz-header .rz-profile-menu .rz-stack,
.rz-header .rz-profile-menu .rz-text-subtitle2,
.rz-header .rz-profile-menu .rz-text-caption,
.rz-header .rz-profile-menu .rz-icon {
    color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   KOLON PANELİ (GridColumnPanelComponent)
   Radzen'in kolon seçicisi grid başlığında açılan dar bir listeydi; kolon sırasını
   değiştirmeye de izin vermiyordu. Panel sağdan açılır, kolonların tamamını gösterir
   ve satırları sürükleyerek sıra da değiştirilebilir.

   z-index Radzen dialog'unun (1050) ÜSTÜNDEDİR: liste bir popupta (seçim penceresi)
   açıldığında panel onun da üzerinde kalmalı, yoksa arkasında kaybolur.
------------------------------------------------------------------------- */
.sd-colpanel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060;
    background: rgba(0, 0, 0, .25);
}

.sd-colpanel {
    position: fixed;
    z-index: 1061;
    inset-block: 0;
    inset-inline-end: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(320px, 90vw);
    background-color: var(--rz-base-background-color);
    border-inline-start: 1px solid var(--rz-base-400);
    box-shadow: var(--rz-shadow-6);
}

.sd-colpanel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-block-end: 1px solid var(--sd-border);
    background-color: var(--sd-surface);
}

.sd-colpanel-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 0;
}

.sd-colpanel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    cursor: grab;
    border: 1px solid transparent;
}

.sd-colpanel-row:hover {
    background-color: var(--sd-surface);
}

.sd-colpanel-row-dragging {
    opacity: .45;
}

/* Bırakma hedefi: satırın ÜSTÜNE çizgi, çünkü sürüklenen satır hedefin önüne ekleniyor. */
.sd-colpanel-row-over {
    border-block-start-color: var(--rz-primary);
}

.sd-colpanel-grip {
    font-size: 18px;
    color: var(--sd-text-muted);
    cursor: grab;
}

.sd-colpanel-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-colpanel-foot {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-block-start: 1px solid var(--sd-border);
    background-color: var(--sd-surface);
}

/* -------------------------------------------------------------------------
   OTHER STYLES
------------------------------------------------------------------------- */

.rz-tabview-nav li {
    margin-right: 3px; !important;
}

.rz-datatable-data td .rz-cell-data, .rz-grid-table td .rz-cell-data {
    font-size: 12px !important;
}

/* Yoğun (compact) ızgarada Radzen satır yüksekliğini yazı boyuna eşitler (`1rem` = 12px) ve
   hücre metni `overflow: hidden` ile kırpılır. Büyük harfin ÜSTÜNE taşan aksanlar (Ü, İ,
   Ö'nün noktaları) ve satırın ALTINA inen çengeller (Ç, Ş) yazı tipinin ölçülerine göre
   kırpılıyordu: Edge'de üretim emrinin fiş listesi "Üretim Sarfı"nı "Uretim Sarfı" gösterdi
   (UAT H-182). Satır yüksekliği açılır, dikey boşluk aynı oranda daraltılır — satır yine
   ~19px'tir. Seçici `html` ile başlar: Radzen teması bu dosyadan SONRA yüklenir ve aynı
   özgüllükteki kuralı ezerdi. */
html .rz-data-grid.rz-density-compact {
    --rz-grid-cell-line-height: 1.35;
    --rz-grid-cell-padding: 0.125rem 0.5rem;
}

.rz-custom-header {
    flex: 1;
}

/* Kök yazı tipi 14px: 0,8rem = 11,2px. Hücre değerleri 12px'te sabit (aşağıdaki
   .rz-cell-data kuralı) ve orayı küçültmek okunaklılığı bozuyor; başlık bu yüzden
   verilerin bir tık altında kalıyor ama kalınlıkla ayrışıyor. */
.rz-column-title-content{
    font-size: 0.8rem;
    font-weight: bold;
}

/* İçindeki dropdown veya textbox invalid olduğunda, 
   parent konteyner (.rz-form-field-content) kırmızı kenarlık alır */
/*.rz-form-field-content:has(.rz-dropdown.invalid),*/
/*.rz-form-field-content:has(.rz-textbox.invalid),*/
/*.rz-form-field-content:has(.rz-datepicker.invalid),*/
/*.rz-form-field-content:has(.rz-numeric-input.invalid)  {*/
/*    border-right: 1px solid #e50000 !important;*/
/*    border-left: 4px solid #e50000 !important;*/
/*    border-top: 1px solid #e50000 !important;*/
/*    border-bottom: 1px solid #e50000 !important;*/
/*    border-radius: 5px;*/
/*    box-sizing: border-box;*/
/*    padding-right: 0.25rem;*/
/*}*/

/* Eğer iç dropdown kendine kırmızı border çiziyorsa onu kaldır */
/*.rz-form-field-content:has(.rz-dropdown.invalid) .rz-dropdown.invalid,*/
/*.rz-form-field-content:has(.rz-textbox.invalid) .rz-textbox.invalid,*/
/*.rz-form-field-content:has(.rz-datepicker.invalid) .rz-datepicker.invalid,*/
/*.rz-form-field-content:has(.rz-numeric-input.invalid) .rz-numeric.invalid   {*/
/*    border: none !important;*/
/*    outline: none !important;*/
/*}*/


.rz-datepicker>.rz-inputtext {
    height: var(--rz-input-size-md) !important;
}

/*.rz-dropdown-label {*/
/*    margin: -3px !important;*/
/*}*/

.rz-form-field-content:has(.rz-dropdown.invalid),
.rz-form-field-content:has(.rz-textbox.invalid),
.rz-form-field-content:has(.rz-datepicker.invalid),
.rz-form-field-content:has(.rz-numeric-input.invalid)  {
    border-right: 1px solid #e50000 !important;
    /*border-left: 2px solid #e50000 !important;*/
    border-top: 1px solid #e50000 !important;
    border-bottom: 1px solid #e50000 !important;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow-position: inset;
}

.rz-form-field.rz-variant-outlined .rz-form-field-end, .rz-form-field.rz-variant-filled .rz-form-field-end, .rz-form-field.rz-variant-flat .rz-form-field-end
{
    height: var(--rz-input-size-md) !important;
}



.rz-justify-content-flex-end .rz-sidebar-toggle {
    border-inline-start: none !important;
    border-inline-end: none;
}


.sd-drop-down-grid .rz-dropdown-trigger {
    display: none !important;
}

/*.rz-form-field-content.valid > .rz-textbox.valid, .rz-dropdown.valid {*/
/*    outline: 1px solid #26b050;*/
/*}*/

/*.rz-form-field-content.invalid > .rz-textbox.invalid, .rz-dropdown.invalid {*/
/*    outline: 1px solid #e50000;*/
/*}*/

/*.rz-form-field-content.invalid, .rz-timespanpicker > .rz-inputtext.invalid, .rz-colorpicker.invalid, .rz-lookup-search input.invalid, .rz-numeric.invalid, .rz-datepicker > .rz-inputtext.invalid, .rz-multiselect.invalid, .rz-dropdown.invalid, .mask.invalid, .rz-textarea.invalid, .rz-textbox.invalid {*/
/*    border: var(--rz-border-danger) !important;*/
/*}*/

.rz-form-field-label{
    /*font-weight: bold; !important;*/
    font-size: 1rem !important;
}

/* Tüm Radzen input placeholder'ları */
.rz-textbox::placeholder,
.rz-inputtext::placeholder,
.rz-numeric-textbox-input::placeholder,
.rz-autocomplete-input::placeholder,
.rz-dropdown::placeholder,
.rz-placeholder{
    font-size: 12px !important;
    color: #bcbaba !important; /* İsteğe bağlı */
}

/* Firefox uyumluluğu */
.rz-textbox:-moz-placeholder,
.rz-inputtext:-moz-placeholder,
.rz-numeric-textbox-input:-moz-placeholder,
.rz-autocomplete-input:-moz-placeholder,
.rz-dropdown:-moz-placeholder {
    font-size: 12px !important;
}

/* Legacy Edge/IE */
.rz-textbox:-ms-input-placeholder,
.rz-inputtext:-ms-input-placeholder,
.rz-numeric-textbox-input:-ms-input-placeholder,
.rz-autocomplete-input:-ms-input-placeholder,
.rz-dropdown:-ms-input-placeholder {
    font-size: 12px !important;
}

.rz-notification-item-wrapper
{
    width: 25vw !important;
}

/* Bildirim kabı sağ altta durur ve bildirimler ALT ALTA dizilir. Konum öğe bazında
   verildiğinde (eski GetNotificationStyle) bütün bildirimler aynı noktaya çiziliyor,
   aynı anda gelen ikincisi birincinin üstüne binip görünmez oluyordu (UAT H-015). */
.rz-notification
{
    top: auto !important;
    left: auto !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 2000 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/*.rz-notification-warn .rz-notification-item {*/
/*    color: var(--rz-black) !important;*/
/*}*/

.rz-message-popup {
    margin-top: 15px;
}


/*BADGE COMPONENT CSS*/
.sd-badge-root {
    position: relative;
    display: inline-block;
}
.sd-badge-root .sd-badge-wrapper {
    top: 0;
    left: 0;
    flex: 0 1;
    width: 100%;
    height: 100%;
    display: flex;
    pointer-events: none;
    position: absolute;
}
.sd-badge-root .sd-badge-wrapper.sd-badge-top {
    align-items: flex-start;
}
.sd-badge-root .sd-badge-wrapper.sd-badge-top.left {
    justify-content: flex-start;
}
.sd-badge-root .sd-badge-wrapper.sd-badge-top.center {
    justify-content: center;
}
.sd-badge-root .sd-badge-wrapper.sd-badge-top.right {
    justify-content: flex-end;
}
.sd-badge-root .sd-badge-wrapper.sd-badge-center {
    align-items: center;
}
.sd-badge-root .sd-badge-wrapper.sd-badge-center.left {
    justify-content: flex-start;
}
.sd-badge-root .sd-badge-wrapper.sd-badge-center.center {
    justify-content: center;
}
.sd-badge-root .sd-badge-wrapper.sd-badge-center.right {
    justify-content: flex-end;
}
.sd-badge-root .sd-badge-wrapper.sd-badge-bottom {
    align-items: flex-end;
}
.sd-badge-root .sd-badge-wrapper.sd-badge-bottom.left {
    justify-content: flex-start;
}
.sd-badge-root .sd-badge-wrapper.sd-badge-bottom.center {
    justify-content: center;
}
.sd-badge-root .sd-badge-wrapper.sd-badge-bottom.right {
    justify-content: flex-end;
}
.sd-badge {
    border-radius: 10px;
    font-size: 12px;
    height: 20px;
    letter-spacing: 0;
    min-width: 20px;
    padding: 4px 6px;
    pointer-events: auto;
    line-height: 1;
    position: absolute;
    text-align: center;
    text-indent: 0;
    top: auto;
    transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
    white-space: nowrap;
}
/* Zemin --rz-base-100 idi: koyu temada beyaz bir kabarcık oluyor ve üzerindeki
   --rz-primary metin 3.54:1'de kalıyordu. Zemini nötr koyuya çevirmek daha da
   kötüleştiriyor (2.75:1) — mavi metin açık zemin ister. Bu yüzden zemin primary'nin
   kendisinden tonlanır ve metin tema metnine bırakılır. */
.sd-badge.sd-badge-default {
    color: var(--rz-text-color);
    background-color: var(--sd-surface-accent);
}
.sd-badge.sd-badge-bordered {
    border-color: var(--sd-border);
    border-style: solid;
    border-width: 2px;
    padding: 3px 4px;
}
.sd-badge.sd-badge-bordered.sd-badge-icon {
    padding: 4px 6px;
}
.sd-badge.sd-badge-icon {
    width: 20px;
    height: 20px;
}
.sd-badge.sd-badge-icon .sd-icon-badge {
    color: inherit;
    font-size: 12px;
}
.sd-badge.sd-badge-dot {
    border-radius: 50%;
    height: 10px;
    min-width: 0;
    padding: 0;
    width: 10px;
}
.sd-badge.sd-badge {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sd-badge.sd-badge-top.left {
    inset: auto calc(100% - 16px) calc(100% - 16px) auto;
}
.sd-badge.sd-badge-top.left.sd-badge-overlap {
    inset: auto calc(100% - 16px) calc(100% - 16px) auto;
}
.sd-badge.sd-badge-top.center {
    bottom: calc(100% - 4px);
}
.sd-badge.sd-badge-top.center.sd-badge-overlap {
    bottom: calc(100% - 12px);
}
.sd-badge.sd-badge-top.right {
    inset: auto auto calc(100% - 16px) calc(100% - 16px);
}
.sd-badge.sd-badge-top.right.sd-badge-overlap {
    inset: auto auto calc(100% - 16px) calc(100% - 16px);
}
.sd-badge.sd-badge-center.left {
    right: calc(100% - 4px);
}
.sd-badge.sd-badge-center.left.sd-badge-overlap {
    right: calc(100% - 12px);
}
.sd-badge.sd-badge-center.right {
    left: calc(100% - 4px);
}
.sd-badge.sd-badge-center.right.sd-badge-overlap {
    left: calc(100% - 12px);
}
.sd-badge.sd-badge-bottom.left {
    inset: calc(100% - 4px) calc(100% - 4px) auto auto;
}
.sd-badge.sd-badge-bottom.left.sd-badge-overlap {
    inset: calc(100% - 12px) calc(100% - 12px) auto auto;
}
.sd-badge.sd-badge-bottom.center {
    top: calc(100% - 4px);
}
.sd-badge.sd-badge-bottom.center.sd-badge-overlap {
    top: calc(100% - 12px);
}
.sd-badge.sd-badge-bottom.right {
    inset: calc(100% - 4px) auto auto calc(100% - 4px);
}
.sd-badge.sd-badge-bottom.right.sd-badge-overlap {
    inset: calc(100% - 12px) auto auto calc(100% - 12px);
}

.table-cell-edited {
    position: relative; /* üçgeni bu hücrenin içinde konumlandır */
    padding: 8px;       /* örnek padding, varsa kendi değerini kullan */
}

.table-cell-edited::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-top: 14px solid white;       /* dış katman */
    border-left: 14px solid transparent;
}

.table-cell-edited::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-top: 12px solid red;         /* iç katman */
    border-left: 12px solid transparent;
    z-index: 2;
}

h1:focus {
    outline: none;
}

/*.valid.modified:not([type=checkbox]) {*/
/*    outline: 1px solid #26b050;*/
/*}*/

/*.invalid {*/
/*    outline: 1px solid #e50000;*/
/*}*/

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3LjgyOSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.error-container {
    border: 1px solid #e0e0e0;
    background: #fff3f3;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px;
    color: #a30000;
    font-family: 'Segoe UI', sans-serif;
}

.error-container h2 {
    margin-top: 0;
    color: #8b0000;
}

.error-container button {
    background: #d9534f;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
    transition: background 0.2s;
}

.error-container button:hover {
    background: #c9302c;
}

.error-container button.details {
    background: #555;
}

.error-container button.details:hover {
    background: #333;
}

.error-details {
    background: #fff;
    border: 1px solid #ddd;
    padding: 1rem;
    margin-top: 1rem;
    color: #333;
    border-radius: 6px;
    overflow-x: auto;
}

.readonly-text-scrollable-container {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    width: 100%;
}
.readonly-text-scrollable-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}
.readonly-text-scrollable-container * {
    white-space: nowrap !important;
}
/* --- Satır renklendirme ---
   Satır rengi hücrelere CellRender ile basılır; ancak Radzen'in kendi ürettiği
   yardımcı hücreler (satır açma oku, seçim kutusu) bu olaydan geçmez ve tema
   arkaplanıyla kalırlar. Bu kural, renkli satırlarda o hücrelerin de satır
   rengini almasını sağlar. */
tr.rz-data-row[style*="background-color"] > td:not([style*="background-color"]) {
    background-color: inherit !important;
}

/* --- Firma logosu önizleme kutusu ---
   Logo oranı korunarak sabit bir çerçeveye sığdırılır; logo yokken de kutu
   aynı yeri kapladığı için sekme içeriği yükleme sonrası zıplamaz. */
.sd-company-logo-box {
    width: 260px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border: 1px dashed var(--rz-border-color);
    border-radius: var(--rz-border-radius, 4px);
    background-color: var(--rz-base-background-color);
}

/* -------------------------------------------------------------------------
   UYARI / ONAY PENCERESİ (SdMessageDialog)

   Severity rengi tek bir değişkende (--sd-msg-color) toplanır ve yalnızca
   dekoratif yüzeylerde kullanılır: sol kenar çizgisi, başlık tonu, ikon.
   Mesaj metni her zaman var(--rz-text-color) ile basılır.

   Zemin tonu color-mix ile temanın GERÇEK pencere arkaplanına karıştırılır;
   --rz-warning-lighter gibi tema değişkenlerine dayanılmaz. O değişkenler
   koyu temalarda zaten koyu olduğu için üzerlerindeki koyu metin okunmuyordu
   (bu bileşenin var oluş sebebi). color-mix, aydınlık temada açık, koyu
   temada koyu bir ton üretir; kontrast her iki durumda da metinden gelir.
------------------------------------------------------------------------- */
.sd-msg {
    /* Ortak yüzey değişkenleri (:root) sayfa zeminine göre hesaplanır; pencere
       zemini tema tarafından ayrı tanımlanabildiği için burada dialog zeminine
       göre yeniden türetilir. Gerekçe için :root'taki açıklamaya bakınız. */
    --sd-surface: color-mix(in srgb, var(--rz-text-color) 5%, var(--rz-dialog-background-color));
    --sd-border: color-mix(in srgb, var(--rz-text-color) 18%, var(--rz-dialog-background-color));
    --sd-text-muted: color-mix(in srgb, var(--rz-text-color) 72%, var(--rz-dialog-background-color));
}

.sd-msg.sd-msg-danger    { --sd-msg-color: var(--rz-danger); }
.sd-msg.sd-msg-warning   { --sd-msg-color: var(--rz-warning); }
.sd-msg.sd-msg-info      { --sd-msg-color: var(--rz-info); }
.sd-msg.sd-msg-success   { --sd-msg-color: var(--rz-success); }
.sd-msg.sd-msg-primary   { --sd-msg-color: var(--rz-primary); }
.sd-msg.sd-msg-secondary { --sd-msg-color: var(--rz-secondary); }
.sd-msg.sd-msg-base      { --sd-msg-color: var(--rz-base-500); }

.sd-msg.rz-dialog {
    border-inline-start: 4px solid var(--sd-msg-color);
    min-height: auto;
}

.sd-msg .rz-dialog-titlebar {
    align-items: center;
    gap: 8px;
    background-color: color-mix(in srgb, var(--sd-msg-color) 14%, var(--rz-dialog-background-color));
    border-block-end: 1px solid color-mix(in srgb, var(--sd-msg-color) 30%, var(--rz-dialog-background-color));
}

/* Başlık severity rengini almaz; ikon zaten rengi taşıyor ve başlık her temada
   gövdeyle aynı kontrasta sahip olmalı. */
.sd-msg .rz-dialog-title {
    color: var(--rz-text-color);
    font-weight: 600;
}

/* Gövde ile altbilgi kendi dolgularını yönetiyor (altbilgi kenardan kenara
   bir ayraç çizgisi taşıyor), bu yüzden Radzen'in içerik dolgusu sıfırlanır. */
.sd-msg-content {
    padding: 0 !important;
}

.sd-msg-root {
    display: flex;
    flex-direction: column;
    outline: none;
}

.sd-msg-body {
    padding: 16px;
    max-height: 55vh;
    overflow-y: auto;
    color: var(--rz-text-color);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.sd-msg-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0 16px 12px;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--rz-base-300);
}

.sd-msg-links-title {
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
    margin-right: 0.25rem;
}

.sd-msg-detail {
    padding: 0 16px 12px;
}

.sd-msg-detail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--sd-text-muted);
    font: inherit;
}

.sd-msg-detail-toggle:hover {
    color: var(--rz-text-color);
}

.sd-msg-detail-text {
    margin: 6px 0 0;
    padding: 8px 10px;
    max-height: 220px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--rz-code-font-family, ui-monospace, monospace);
    font-size: 0.9em;
    color: var(--sd-text-muted);
    background-color: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-radius: 4px;
}

/* Onay penceresindeki isteğe bağlı açıklama alanı (SdMessageDialog.NoteLabel). Mesaj
   gövdesiyle aynı yatay boşluğu kullanır ki alan metnin altına hizalı görünsün. */
.sd-msg-note {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px 12px;
}

.sd-msg-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--sd-border);
    background-color: var(--sd-surface);
}

.sd-msg-actions {
    display: flex;
    gap: 8px;
}

/* --- Hata kartındaki teknik ayrıntı (CustomErrorBoundary) ---
   Yığın izi uzundur ve satırları taşar; kutu kendi içinde kaydırılır ki hata kartı
   sayfayı yatayda genişletmesin. */
.sd-error-details {
    max-height: 260px;
    overflow: auto;
    margin: 0;
    padding: 8px 10px;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--rz-code-font-family, ui-monospace, monospace);
    font-size: 0.8em;
    color: var(--sd-text-muted);
    background-color: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-radius: 4px;
}

/* --- Bant düzeni önizlemesi (ReportLayoutDesigner) ---
   Bantlar dikey olarak dizilir, öğeler bandın içinde MUTLAK konumlanır: PDF'teki yerleşimin
   aynısı. Şerit yatayda kaydırılır; A4 genişliği (595 punto) dar ekranda sığmaz ve içeriği
   sıkıştırmak önizlemeyi yanıltıcı kılardı. */
/* Kâğıt gerçek A4 ölçüsünde çizilir; yatay yönde ekrana sığmayabilir, kaydırma dıştaki
   kutudadır. Kaydırmayı kâğıda vermek, sürüklenen öğenin koordinat hesabını bozardı. */
.sd-layout-sheet-scroll {
    overflow-x: auto;
    padding: 12px;
    background-color: var(--sd-surface);
    border: 1px solid var(--sd-border);
    border-radius: 6px;
}

.sd-layout-sheet {
    /* Kâğıt her zaman beyazdır: çıktı beyaz kâğıda basılır, koyu temada da öyle görünmeli. */
    display: flex;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: var(--rz-shadow-2);
}

/* Kenar boşluğu kesikli çerçeveyle görünür kılınır: içerik alanının nerede başladığı
   ölçü girmeden anlaşılmalı. */
.sd-layout-preview {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    outline: 1px dashed color-mix(in srgb, #000 25%, transparent);
}

/* Gövde boşluğu yutar; sayfa altı bandı böylece kâğıdın DİBİNE oturur — PDF'te de orada
   basılır. Bantları akışa bırakmak, sayfa altını içeriğin hemen ardına koyup yanıltırdı. */
.sd-layout-page-body {
    flex: 1 1 auto;
}

.sd-layout-band {
    position: relative;
    margin-bottom: 4px;
    background-color: color-mix(in srgb, #000 3%, #fff);
    border: 1px dashed color-mix(in srgb, #000 20%, transparent);
}

.sd-layout-band--passive {
    opacity: 0.45;
}

/* Kâğıdın üzerindeki renkler temaya göre DÖNMEZ: zemin her iki temada da beyazdır,
   metni --rz-text-color'dan almak koyu temada beyaz üstüne beyaz yazardı. */
.sd-layout-band-label {
    position: absolute;
    top: 1px;
    right: 4px;
    font-size: 9px;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, #000 45%, transparent);
    pointer-events: none;
}

.sd-layout-element {
    position: absolute;
    overflow: hidden;
    padding: 0 2px;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #1a1a1a;
    background-color: color-mix(in srgb, var(--rz-primary) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--rz-primary) 50%, #fff);
    border-radius: 2px;
}

/* Sayfa dışına taşan öğe: PDF'te kırpılır, tasarım anında görünmesi gerekir. */
.sd-layout-element--overflow {
    background-color: color-mix(in srgb, var(--rz-danger) 16%, #fff);
    border-color: var(--rz-danger);
}

/* Sürüklenebilir önizleme: imleç ve tutamak yalnızca düzenlenebilir tasarımda görünür. */
.sd-layout-preview--editable .sd-layout-element {
    cursor: move;
    /* Sürükleme sırasında metin seçimi ve tarayıcının kendi kaydırma jesti devre dışı. */
    user-select: none;
    touch-action: none;
}

.sd-layout-preview--editable .sd-layout-element::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 8px;
    height: 8px;
    cursor: nwse-resize;
    background-color: color-mix(in srgb, var(--rz-primary) 70%, transparent);
}

.sd-layout-element--dragging {
    z-index: 2;
    opacity: 0.85;
    box-shadow: var(--rz-shadow-3);
}

/* -------------------------------------------------------------------------
   KOLON ALTI ARAMA SATIRI
   Kolon başlıklarının altındaki dar arama satırı (FilterMode.Simple). Operatör
   kutuya yazılan metinden okunur (bkz. ColumnFilterSyntax), bu yüzden Radzen'in
   satır içi operatör düğmesine ve geniş kutusuna ihtiyaç yoktur.

   Satır YÜKSEKLİĞİ burada belirleyicidir: liste ekranları zaten sayfa boyunu
   (100vh - 132px) doldurduğu için başlığa eklenen her piksel doğrudan görünen
   satır sayısından düşer. Temanın varsayılan filtre hücresi ~34px yer kaplıyor;
   aşağıdaki değerlerle ~24px'e iner.

   Ölçüler temanın kendi değişkenleri üzerinden verilir (--rz-grid-filter-*):
   böylece kural, hangi Radzen teması yüklü olursa olsun aynı yerden geçer ve
   koyu/açık temada renkler temadan gelmeye devam eder.
------------------------------------------------------------------------- */
.rz-data-grid .rz-cell-filter {
    --rz-grid-filter-padding: 1px 3px 3px;
    --rz-grid-filter-margin: 0;
    --rz-grid-filter-font-size: 0.75rem;
}

/* Temanın 1.375rem'lik en az yüksekliği kutunun kendi yüksekliğinden büyük. */
.rz-data-grid .rz-cell-filter .rz-cell-filter-content {
    min-height: 0;
}

.rz-data-grid .rz-cell-filter input.sd-column-filter {
    width: 100%;
    height: 22px;
    padding: 0 4px;
    font-size: 0.75rem;
    line-height: 20px;
}

/* Dolu kutu renklenir: bir listede hangi kolonlarda filtre olduğu tek bakışta görünmeli.
   Kolon şeridi yatayda kaydığı için filtreli kolon ekran dışında kalabiliyor; kullanıcı
   eksik kayıt görüp nedenini ararken önce buraya bakar.

   Renk temanın birincil renginden türetilir ve zemine karıştırılır (color-mix): sabit bir
   açık gri koyu temada beyaz bir bant gibi durur — Radzen'in --rz-base-* ölçeği tema ile
   dönmez. Kenarlık de vurgulanır; yalnızca zemin farkı 22px'lik kutuda zayıf kalıyor. */
.rz-data-grid .rz-cell-filter input.sd-column-filter-active {
    background-color: color-mix(in srgb, var(--rz-primary) 14%, var(--rz-base-background-color));
    border-color: var(--rz-primary);
    font-weight: 600;
}

/* Çözümlenemeyen yazım (ör. sayı kolonuna "abc"): filtre uygulanmaz ve kutu bunu söyler.
   Sessizce boş liste göstermek kullanıcıyı "kayıt yok" sanısına götürürdü. */
.rz-data-grid .rz-cell-filter input.sd-column-filter-invalid,
.rz-data-grid .rz-cell-filter input.sd-column-filter-invalid:focus {
    border-color: var(--rz-danger);
    box-shadow: 0 0 0 1px var(--rz-danger);
}

/* ETİKET ÜSTTE yerleşimi (LabelPosition.Ustte).

   Radzen'in dış çizgili form alanı, içeriğin ÜSTÜNDE kendi kayan etiketi için yer ayırır
   (.rz-form-field-content { margin-top: 8.75px }). Etiketi biz alanın üstüne kendimiz
   çizdiğimizde o boşluk sahipsiz kalır ve girdiyi 10px aşağı iter: tarayıcıda tam olarak bu
   görüldü — etiketler komşularıyla aynı hizadayken kutular değildi.

   Kural yalnızca bu yerleşimi kullanan alanlara işler; soldaki etiket düzeni (varsayılan)
   Radzen'in kendi boşluğuna ihtiyaç duyduğu için dokunulmaz. */
.sd-label-on-top .rz-form-field-content {
    margin-top: 0;
}

/* ============================================================================
   YENİDEN BAĞLANMA PENCERESİ

   Blazor, "components-reconnect-modal" kimlikli bir eleman bulursa kendi İngilizce
   penceresini hiç kurmaz; yalnızca bu elemana durum sınıfı ekler. Yani hangi metnin ve
   hangi düğmenin görüneceğine tamamen buradaki kurallar karar verir. Framework'ün
   eklediği sınıflar: -show, -retrying, -paused, -failed, -rejected, -resume-failed, -hide.

   Renkler tema değişkenlerinden gelir; sabit renk yazılmaz — pencere koyu temada da
   açılıyor ve beyaz bir kart orada göz alıyor.
   ============================================================================ */

#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10001;
    align-items: center;
    justify-content: center;
    /* Arka plan daha koyu ve hafif bulanık: altta duran ızgara satırları kartla yarışıyor,
       kullanıcı hangisini okuyacağını bilemiyordu. */
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    /* Durum rengi. Yeniden deneme "bilgi", duraklatma "uyarı", kalanlar "hata"dır; hepsi
       aynı renkte olduğu için kullanıcı geçici bir bekleme ile kurtarılamaz bir durumu
       ayırt edemiyordu. */
    --kobi-reconnect-accent: var(--rz-primary, #0087ff);
    /* İkincil metin rengi. --sd-text-muted (%72) burada YETMİYOR: beyaz üzerinde 3,9:1
       kontrast veriyor ve WCAG AA'nın normal metin için istediği 4,5:1'in altında kalıyor.
       %85 karışım beyazda 5,5:1, not kutusunun zemininde 5,0:1 verir. */
    --kobi-reconnect-muted: color-mix(in srgb, var(--rz-text-color) 85%, var(--rz-base-background-color));
}

#components-reconnect-modal.components-reconnect-paused {
    --kobi-reconnect-accent: var(--rz-warning, #f5a623);
}

#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-resume-failed {
    --kobi-reconnect-accent: var(--rz-danger, #e53935);
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: flex;
}

.kobi-reconnect__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    min-width: 20rem;
    max-width: 30rem;
    /* Üstteki 4px'lik durum şeridi için fazladan üst boşluk. */
    padding: 2.25rem 2.25rem 1.75rem;
    border: 1px solid var(--sd-border);
    border-radius: 0.75rem;
    overflow: hidden;
    text-align: center;
    background-color: var(--rz-base-background-color, #fff);
    color: var(--rz-text-color, #212121);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.45);
}

/* Durum şeridi. Metni okumadan önce "bekleniyor mu, koptu mu" bilgisini veren tek işaret. */
.kobi-reconnect__card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 4px;
    background-color: var(--kobi-reconnect-accent);
}

.kobi-reconnect__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Sayaç satırı. opacity YERİNE token rengi kullanılır: 0.75 opaklık koyu temada metni
   arka plana gömüyordu. Rakamlar tabular — sayaç her saniye değişirken satır kaymasın. */
.kobi-reconnect__hint {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--kobi-reconnect-muted);
    font-variant-numeric: tabular-nums;
}

.kobi-reconnect__hint span {
    font-weight: 600;
    color: var(--rz-text-color, #212121);
}

/* Taslak güvencesi bir RadzenAlert'tir (bkz. App.razor); rengini, kenarlığını ve ikonunu
   Radzen'in kendi kuralları verir. Buradaki tek iş YERLEŞİM: kart ortalanmış bir flex
   olduğu için uyarı kendiliğinden daralıyordu, tam genişlik verilir ve metin sola
   hizalanır — iki satıra taşan ortalanmış metin zor okunuyor. */
.kobi-reconnect__note {
    width: 100%;
    margin-top: 0.25rem;
    text-align: start;
}

.kobi-reconnect__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.25rem;
}

.kobi-reconnect__button {
    padding: 0.5rem 1.25rem;
    border: 0;
    border-radius: 0.375rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    color: var(--rz-primary-contrast-color, #fff);
    background-color: var(--kobi-reconnect-accent);
    transition: filter 0.15s ease;
}

.kobi-reconnect__button:hover {
    filter: brightness(1.08);
}

.kobi-reconnect__button:active {
    filter: brightness(0.94);
}

/* Klavye odağı görünür olmalı: pencere açıkken sayfanın geri kalanı erişilemez ve
   kullanıcının tek çıkışı bu düğmeler. */
.kobi-reconnect__button:focus-visible {
    outline: 2px solid var(--kobi-reconnect-accent);
    outline-offset: 2px;
}

.kobi-reconnect__button--ghost {
    color: var(--rz-text-color, #212121);
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--sd-border);
}

.kobi-reconnect__button--ghost:hover {
    background-color: var(--sd-surface-hover);
    filter: none;
}

/* Bekleme halkası. Yalnızca yeniden bağlanma denenirken döner; "duraklatıldı" ya da
   "başarısız" durumunda dönen bir halka yanlış bir şey söyler.

   Eski hâli genişleyip sönen bir dalgaydı ve döngünün büyük kısmında neredeyse görünmezdi:
   ekranda çoğu zaman küçük bir nokta duruyordu. Şimdi sabit bir iz halkası (1. div) ile
   onun üzerinde dönen bir yay (2. div) var — her an görünür ve dönüşü belli.
   Markup değişmedi: iki <div> aynen kullanılıyor. */
.kobi-reconnect__spinner {
    position: relative;
    width: 48px;
    height: 48px;
}

.kobi-reconnect__spinner div {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
}

.kobi-reconnect__spinner div:nth-child(1) {
    border-color: var(--sd-border);
}

.kobi-reconnect__spinner div:nth-child(2) {
    border-top-color: var(--kobi-reconnect-accent);
    border-inline-end-color: var(--kobi-reconnect-accent);
    animation: kobi-reconnect-spin 0.9s linear infinite;
}

@keyframes kobi-reconnect-spin {
    to { transform: rotate(360deg); }
}

/* Hareket azaltma tercihi: yay döndürülmez, tam halka olarak durur — bekleme yine
   görünür ama ekranda hareket kalmaz. */
@media (prefers-reduced-motion: reduce) {
    .kobi-reconnect__spinner div:nth-child(2) {
        animation: none;
        border-color: var(--kobi-reconnect-accent);
        opacity: 0.6;
    }
}

/* Dar ekran: kart kenarlara yapışmasın ve düğmeler alt alta düşebilsin. */
@media (max-width: 30rem) {
    .kobi-reconnect__card {
        min-width: 0;
        width: calc(100vw - 2rem);
        padding: 2rem 1.25rem 1.5rem;
    }
}

/* Duruma göre içerik. Varsayılan gizli; eşleşen durumda görünür. İki durumu birden
   taşıyan bir düğme (ör. "Devam Et": duraklatıldı VE devam ettirilemedi) iki kuraldan
   biriyle açılır — sınıflar OR mantığıyla çalışır. */
.kobi-reconnect__when--rejoining,
.kobi-reconnect__when--paused,
.kobi-reconnect__when--failed,
.kobi-reconnect__when--rejected,
.kobi-reconnect__when--resume-failed {
    display: none;
}

.components-reconnect-show .kobi-reconnect__when--rejoining,
.components-reconnect-retrying .kobi-reconnect__when--rejoining {
    display: block;
}

.components-reconnect-paused .kobi-reconnect__when--paused,
.components-reconnect-failed .kobi-reconnect__when--failed,
.components-reconnect-rejected .kobi-reconnect__when--rejected,
.components-reconnect-resume-failed .kobi-reconnect__when--resume-failed {
    display: block;
}

.components-reconnect-paused .kobi-reconnect__button.kobi-reconnect__when--paused,
.components-reconnect-failed .kobi-reconnect__button.kobi-reconnect__when--failed,
.components-reconnect-rejected .kobi-reconnect__button.kobi-reconnect__when--rejected,
.components-reconnect-resume-failed .kobi-reconnect__button.kobi-reconnect__when--resume-failed {
    display: inline-block;
}

.components-reconnect-paused .kobi-reconnect__spinner,
.components-reconnect-failed .kobi-reconnect__spinner,
.components-reconnect-rejected .kobi-reconnect__spinner,
.components-reconnect-resume-failed .kobi-reconnect__spinner {
    display: none;
}

/* ============================================================================
   ÖLÜMCÜL HATA ŞERİDİ (#blazor-error-ui)

   Yukarıdaki pencereden AYRI bir yüzeydir. Bağlantı kopmasında değil, sunucuda
   YAKALANMAYAN bir istisna devreyi öldürdüğünde çıkar; Blazor o durumda yeniden
   bağlanmayı hiç denemez ve yalnızca bu elemanın "display" değerini açar.

   Bu yüzden pencere değil ŞERİT: hata kurtarılamaz olsa bile ekranın üstünü kapatıp
   kullanıcının o an gördüğü veriyi (rakamlar, tablolar) gizlemenin bir yararı yok —
   kullanıcı çoğu zaman ekrandaki değeri not edip yeniliyor.

   Renkler tema değişkenlerinden gelir; şerit koyu temada da açılır.
   ============================================================================ */

/* Blazor şeridi görünür yaparken elemana SATIR İÇİ "display: block" yazar; buraya bir
   "display: flex" konsaydı satır içi kural onu ezerdi. Yerleşim bu yüzden .kobi-fatal
   sarmalayıcısındadır ve dış eleman yalnızca görünür/gizli olmayı yönetir. */
#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10002; /* yeniden bağlanma penceresinin de üstünde: hata onu geçersiz kılar */
    padding: 0.75rem 1.25rem;
    color: #fff;
    background-color: var(--rz-danger, #b32121);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.35);
    font-size: 0.875rem;
}

.kobi-fatal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.kobi-fatal__text {
    font-weight: 600;
}

.kobi-fatal__note {
    opacity: 0.85;
}

.kobi-fatal__button {
    margin-inline-start: auto;
    padding: 0.35rem 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 0.25rem;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.kobi-fatal__button:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

.kobi-fatal__dismiss {
    cursor: pointer;
    padding: 0 0.25rem;
    opacity: 0.8;
}

.kobi-fatal__dismiss:hover {
    opacity: 1;
}

/* -------------------------------------------------------------------------
   GRAFİK/ŞERİT + LİSTE OLAN SAYFALAR (.sd-page-fill)

   Liste gridleri varsayılan olarak sayfa boyu yüksektir (height: calc(100vh - 132px),
   bkz. DataGridComponent). Gridin ÜSTÜNE bir grafik ya da özet şeridi konduğunda toplam
   yükseklik görünen alanı aşıyor ve gridin en altındaki SAYFALAMA ÇUBUĞU ekran dışında
   kalıyordu: kullanıcı ikinci sayfaya geçmek için önce aşağı kaydırmak zorundaydı
   (Sistem Logları, Giriş Denetimleri).

   Sabit bir piksel düşmek çözüm değil — grafik yüksekliği ekrana göre değişiyor ve
   düşülen değer her çözünürlükte yanlış olurdu. Bunun yerine sayfa görünen alanı
   dolduran bir sütun olur, üstteki blok kendi boyunu alır, grid KALANI alır. Böylece
   düzen çözünürlükten bağımsız olarak doğrudur.

   Kullanımı — TEK sarmalayıcı yeter, sayfada başka değişiklik gerekmez:

     <div class="sd-page-fill">
         ...grafik / buton şeridi / süzgeç kartı...
         <DataGridComponent ... />
     </div>

   Gridin kendi yüksekliği (GridStyle ya da varsayılan) flex-basis olur ve KÜÇÜLEBİLİR
   olduğu için kalan alana oturur; üstteki bloklar `flex-shrink: 0` ile korunur. Bu yüzden
   sayfada `GridStyle` vermeye gerek yoktur.

   Grid doğrudan çocuk DEĞİLSE (araya bir RadzenStack giriyorsa) o ara elemana
   `sd-page-fill-grow` verilir; kural o zaman da geçerlidir.
------------------------------------------------------------------------- */
.sd-page-fill {
    display: flex;
    flex-direction: column;
    /* DataGridComponent'teki sayfa boyu yüksekliğin aynısı. */
    height: calc(100vh - 132px);
    min-height: 0;
    /* Sınıf dolgulu bir kaba da veriliyor (ör. rz-p-3 taşıyan RadzenStack); dolgu
       yüksekliğe eklenirse taşma geri gelir. */
    box-sizing: border-box;
}

/* Üstteki bloklar kendi boylarını alır: şerit, kart, grafik… */
.sd-page-fill > * {
    flex: 0 0 auto;
}

/* Grid (ya da onu saran ara eleman) kalanı alır. min-height:0 olmadan flex öğesi
   içeriğinin altına inemez ve taşma geri gelir. */
.sd-page-fill > .rz-data-grid,
.sd-page-fill > .sd-page-fill-grow {
    flex: 1 1 auto;
    min-height: 0;
}

.sd-page-fill > .sd-page-fill-grow {
    display: flex;
    flex-direction: column;
}

.sd-page-fill > .sd-page-fill-grow > .rz-data-grid {
    flex: 1 1 auto;
    min-height: 0;
}

/* -------------------------------------------------------------------------
   İZLEME EKRANLARI (.sd-page-fill--sections)

   Üstte ana liste, ALTINDA katlanabilir kırılım panelleri (Satış İzleme:
   teklif/irsaliye/fatura; Talep İzleme: teklif/sipariş/irsaliye/fatura).

   Burada listenin kalan yüksekliği alması TEK BAŞINA yetmez: liste sayfa boyu
   yükseklikte olduğu için dört panelin dördü de ekran dışında kalıyor ve kullanıcı
   hem panelleri hem listenin sayfalama çubuğunu ancak sayfayı kaydırarak buluyordu.
   Panelleri kaldırıp listeyi küçültmek de yanlış olurdu — ekranın varlık sebebi o
   kırılımlar.

   Çözüm: sayfa görünen alanı doldurur ve KENDİ İÇİNDE kayar. Paneller kapalıyken
   yalnızca başlık şeritleri yer kaplar, liste gerisini alır ve hiç kaydırma gerekmez;
   bir panel açıldığında liste `min-height`e kadar küçülür, sonrası bu kapsayıcının
   kendi kaydırmasıyla gezilir. Sekme çubuğu ve üst şerit yerinde kalır.
------------------------------------------------------------------------- */
.sd-page-fill--sections {
    overflow-y: auto;
}

/* Kırılım panelleri açıldığında liste okunamayacak kadar ezilmemeli. Taban 420px:
   gridin BAŞLIĞI gelişmiş arama panelini de taşıyabiliyor ve o panel açıldığında dar
   ekranda üç satıra çıkıp ~230px kaplıyor; altında ayrıca filtre satırı ve sayfalama
   çubuğu var. 260px'te satırlara hiç yer kalmıyordu. (Panel bu ekranlarda artık
   varsayılan KAPALI açılıyor; taban açıldığı an için gerekli.)

   Alçak ekranda (≈700px) dört panel de açıkken bu taban yine de sayfayı taşırır —
   kaydırma artık bu kapsayıcının kendi içindedir ve sayfalama çubuğu her hâlükârda
   listenin altında, görünen alanda kalır. */
.sd-page-fill--sections > .rz-data-grid {
    min-height: 420px;
}

/* Form alanının yanına konan eylem düğmesi (ör. "Detay Seç").
   Yanındaki Serkan* girdileri Radzen form alanıdır: kutu 30px boyundadır (SerkanFormField) ve
   üstünde --rz-form-field-margin-block kadar boşluk taşır. Düğme bu ikisini almazsa yatay
   yığın onu satırın tepesine gerer ve düğme girdilerden yukarıda, farklı boyda görünür.
   Değer tema değişkeninden okunur; sabit piksel yazılmaz, tema değişirse hiza bozulmasın.
   Seçici iki sınıflıdır: Radzen teması app.css'ten SONRA yüklenir ve `.rz-button{margin:0}`,
   `.rz-button-sm{height:auto}` tek sınıfla yazılmış bir kuralı sessizce ezer. */
.rz-button.kobi-field-action {
    align-self: flex-start;
    height: 30px;
    margin-block: var(--rz-form-field-margin-block, 0.625rem 0);
    /* Sütun daraldığında düğme kırılıp komşu sütunun etiketinin üstüne binmesin (H-165). */
    flex-shrink: 0;
    white-space: nowrap;
}

/* Kapalı düğme GRİ görünür. Radzen kapalı düğmeyi yalnızca %50 saydamlaştırır; renkli
   (secondary/primary/warning) bir düğmenin soluk hâli gözle etkin düğmeden ayırt edilmiyordu —
   ödemesi başlamış kredide "Farkı Son Taksite Yaz" kapalıyken açık sanıldı (UAT H-196).
   Renk tüm düğmelerde aynı yoldan kaldırılır; ekran bazında sınıf yazmak unutulurdu.
   İki sınıflı seçici: Radzen teması app.css'ten sonra yüklenir. */
.rz-button.rz-state-disabled {
    filter: grayscale(1);
}