html, body {
    margin: 0px;
    padding: 0px;
    height: 100%;
}

.bi-16-px {
    font-size: 16px;
}

.bi-24-px {
    font-size: 24px;
}

.bi-32-px {
    font-size: 32px;
}

.bi-36-px {
    font-size: 36px;
}

.bi-48-px {
    font-size: 48px;
}

.bi-64-px {
    font-size: 64px;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup.sxpopup-size-large {
    width: calc(90% - 20px) !important;
    min-width: calc(90% - 20px) !important;
    max-width: calc(90% - 20px) !important;
    height: calc(80% - 20px) !important;
    overflow: hidden !important;
    margin: 0px;
}

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.sxpopup-size-large > .dxbl-modal-content > .dxbl-modal-header {
        height: 56px !important;
        padding: 8px 10px !important;
        box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
        z-index: 101;
        position: relative;
    }

        .dxbl-modal > .dxbl-modal-root > .dxbl-popup.sxpopup-size-large > .dxbl-modal-content > .dxbl-modal-header .dxbl-popup-header-button {
            width: 40px !important;
            height: 40px !important;
        }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.sxpopup-size-large > .dxbl-modal-content > .dxbl-modal-body {
        padding: 0px;
        display: flex;
        flex-direction: column;
    }

.dxbl-modal > .dxbl-modal-root > .dxbl-popup.sxpopup-size-compact {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    margin: 0px;
    border-radius: 0px !important;
}

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.sxpopup-size-compact > .dxbl-modal-content > .dxbl-modal-header {
        height: 56px !important;
        padding: 8px 10px !important;
        border-radius: 0px !important;
        box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
        z-index: 101;
        position: relative;
    }

        .dxbl-modal > .dxbl-modal-root > .dxbl-popup.sxpopup-size-compact > .dxbl-modal-content > .dxbl-modal-header .dxbl-popup-header-button {
            width: 40px !important;
            height: 40px !important;
        }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup.sxpopup-size-compact > .dxbl-modal-content > .dxbl-modal-body {
        padding: 0px;
        border-radius: 0px;
        display: flex;
        flex-direction: column;
    }

/* SxPopup — genel başlık (header): toplam yükseklik 56px (padding dahil), iç boşluk 0.5rem.
   Alt padding 0 — böylece header ile body arasında iki 0.5rem üst üste binip 1rem'lik boşluk oluşmaz.
   Yüzey ve gölge SxMain header'ı ile aynı token'lar (SxMain.razor.css): mobilde tam ekran popup'ın header'ı SxMain header'ının
   yerine geldiği için iki header light/dark'ta aynı görünür. Gölgenin gövdenin üstünde kalması için position + z-index. */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header.sxpopup-header {
    box-sizing: border-box;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    padding: 0.5rem;
    padding-bottom: 0;
    background-color: var(--dxds-color-surface-neutral-default-rest);
    box-shadow: var(--dxds-box-shadow-lg, 0 0.5rem 1rem rgba(34, 34, 34, 0.15));
    position: relative;
    z-index: 1;
}

    /* Başlık metni (span.dxbl-modal-title.dxbl-text) — sol margin yok; boşluk header'ın kendi 0.5rem padding'inden gelir.
       Tek satır: uzun başlık (dar ekranda) alt satıra inmez, sonu "…" ile kesilir; kapat butonu yerinde kalır.
       Başlık ve buton DevExpress'in iç sarmalayıcısında (.dxbl-modal-header-default, flex); o da daralabilmeli (min-width: 0),
       yoksa içerik header'dan taşar ve kapat butonu ekran dışına kayar. */
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header.sxpopup-header .dxbl-modal-header-default {
        min-width: 0;
    }

    .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header.sxpopup-header .dxbl-modal-title.dxbl-text {
        margin-left: 0;
        display: block; /* DevExpress flex veriyor; text-overflow flex kapta çalışmaz */
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* Kapat butonu — toplam genişlik (padding dahil) 40px */
    .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header.sxpopup-header .dxbl-popup-header-button {
        box-sizing: border-box;
        width: 40px;
    }

/* SxPopup — genel gövde (body) iç boşluğu; DevExpress varsayılanının yerine geçer.
   Gövde içerik kabında flex: 1 1 auto alır ama min-height auto olduğu için içeriğinden küçülemez: içerik %100 yükseklikte
   (DxPdfViewer, SxFormLayout…) gövde popup yüksekliği kadar uzar, header (56px) kadar alttan taşar — tam ekran mobilde
   alt kısım görünmüyordu. min-height: 0 ile gövde header'dan kalan alana sığar. */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-body.sxpopup-body {
    padding: 0.5rem;
    min-height: 0;
}

/* SxPopup — genel footer: iç boşluk 0.5rem (header/body ile aynı), DevExpress varsayılanı (12px 24px 24px) yerine geçer.
   İçerik sola yaslı; DevExpress varsayılanı justify-content: flex-end (sağa yaslı).
   Footer'ı şu an yalnızca SxDialogPopup'ın MessageBox düğmeleri kullanır. */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-footer.sxpopup-footer {
    padding: 0.5rem;
    justify-content: flex-start;
}

/* SxDialogPopup — popup'a özel yükleme kabı (SxLoading Scoped="true", ADR kap-bazli-yukleme-katmani, #205).
   DxLoadingPanel inline-block ve "auto" yükseklikte çizildiği için popup gövdesi → sayfa kökü (.sx-*--lookup, SxFormLayout,
   SxListLayout: height 100%) zinciri kopuyor, liste 2px'e iniyordu. Sarmalayıcı ve DevExpress'in hedef içerik kabı gövdeyi doldurur.
   Popup iç DOM'u olduğu için scoped .razor.css değil global sx.css (katman-sinirlari). */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-body.sxpopup-body > dxbl-loading-panel.sx-dialog-popup-loading,
.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-body.sxpopup-body > dxbl-loading-panel.sx-dialog-popup-loading > .dxbl-loading-panel-target-content {
    display: block;
    width: 100%;
    height: 100%;
}

/* SxPopup — tam ekran modu (SxDialogPopup.IsFullScreen; yalnızca Kind == Popup, MessageBox hiç almaz):
   ekran kenarına tam oturduğu için köşe radius'u kaldırılır */
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.sxpopup-fullscreen {
    border-radius: 0;
}

/* DevExpress boyutlandırma imleçleri — col-resize/row-resize yerine ew-resize/ns-resize.
   col-resize ve row-resize, Chromium'un Windows'ta kendi çizdiği özel imleçlerdir; MAUI (WinUI) WebView2 özel
   imleçleri pencereye yansıtmaz ve normal oka düşer, bu yüzden grid kolon ve splitter tutamakları bulunamaz
   (Azure #127). ew-resize/ns-resize Windows sistem imleçleridir; MAUI'de de tarayıcıda da görünür.
   Seçiciler DevExpress core.min.css'tekilerle birebir aynı tutulur; sx.css ondan sonra yüklendiği için
   !important gerekmez. DevExpress sürümü yükseltilince seçicileri kontrol et. */
.dxbl-grid .dxbl-grid-table > thead > tr > th > .dxbl-grid-column-resize-anchor,
.dxbl-resize-cursor,
.dxbl-resize-cursor .dxbl-grid th.dxbl-grid-action,
.dxbl-splitter-horizontal.dxbl-splitter > .dxbl-splitter-separator.dxbl-splitter-separator-draggable,
.dxbl-html-editor .dxbl-widget-container .dx-quill-container .dx-table-resize-frame .dx-htmleditor-column-resizer,
.dxreTableColumnCursor {
    cursor: ew-resize;
}

.dxbl-splitter-vertical.dxbl-splitter > .dxbl-splitter-separator.dxbl-splitter-separator-draggable,
.dxbl-html-editor .dxbl-widget-container .dx-quill-container .dx-table-resize-frame .dx-htmleditor-row-resizer,
.dxreTableRowCursor {
    cursor: ns-resize;
}

/* Salt okunur (ReadOnly="true") ve pasif (Enabled="false") DxTextBox — Fluent temasında arka plan saydam kaldığı için
   düzenlenebilir kutudan ayırt edilmez. DevExpress'in kendi değişkenleri doldurulur (core.min.css: .dxbl-text-edit.dxbl-readonly /
   .dxbl-disabled { --dxbl-text-edit-bg: var(--dxbl-text-edit-readonly-bg | --dxbl-text-edit-disabled-bg, ...) }), iç DOM ezilmez.
   Renk Bootstrap'in salt okunur/pasif alan grisi, ikisinde aynı; tema değişkeni olduğu için koyu temada kendiliğinden uyar. Sayfada
   ayrıca CssClass verilmez. Yazı imleci yerine normal ok gösterilir.
   Yalnızca DxTextBox (<dxbl-input-editor>; SxButtonEdit de içinde DxTextBox kullanır). Diğer veri editörleri aynı .dxbl-text-edit
   sınıfını taşır ama kendi etiketleriyle çizilir (dxbl-memo-editor, dxbl-spinedit, dxbl-masked-input, dxbl-date-edit,
   dxbl-combo-box, dxbl-tag-box); her biri denenip seçiciye tek tek eklenir. */
dxbl-input-editor.dxbl-text-edit.dxbl-readonly {
    --dxbl-text-edit-readonly-bg: var(--bs-secondary-bg, #e9ecef);
}

dxbl-input-editor.dxbl-text-edit.dxbl-disabled {
    --dxbl-text-edit-disabled-bg: var(--bs-secondary-bg, #e9ecef);
}

dxbl-input-editor.dxbl-text-edit.dxbl-readonly input,
dxbl-input-editor.dxbl-text-edit.dxbl-disabled input {
    cursor: default;
}