﻿/* ========================================================================== 
   XAF / DevExpress RTL Global Style
   FINAL – RTL + Toolbar + Dropdown + Grid (No H-Scroll) + Header Wrap
   ========================================================================== */

/* === Yekan Font Import (Optimized) === */
@font-face {
    font-family: 'Yekan';
    src: url('/fonts/Yekan/Yekan.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Apply font globally */
html,
body,
.dx-viewport,
.dx-application,
.dxbl-root,
.dxbl-content,
.dx-widget,
.dx-overlay-content,
.dx-popup-content,
.dx-datagrid,
.dx-datagrid *,
.dxbl-grid,
.dxbl-grid *,
input,
textarea,
select,
button,
label {
    font-family: 'Yekan', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

    /* === Global RTL Direction === */
    html[dir="rtl"],
    body[dir="rtl"],
    .dx-rtl {
        direction: rtl !important;
        unicode-bidi: embed !important;
    }

/* === Universal Alignment === */
* {
    text-align: right !important;
    font-family: inherit !important;
}

/* === Containers and Layouts === */
.container,
.dx-viewport,
.dx-application,
.dxbl-root,
.dxbl-content {
    direction: rtl !important;
    text-align: right !important;
}

/* === Fix Bootstrap/Grid Layouts === */
.row {
/*    flex-direction: row-reverse !important;*/
}

[class*="col-"] {
    text-align: right !important;
}

/* === Form Elements === */
label,
input,
select,
textarea,
.dx-texteditor-input,
.dx-field-label {
    text-align: right !important;
}

input,
select,
textarea {
    direction: rtl !important;
}

/* === Tables & Grids === */
table,
.dx-datagrid,
.dx-list,
.dx-table,
.dx-richedit,
.dx-treelist {
    direction: ltr !important;
}

.dx-datagrid-headers,
.dx-datagrid-rowsview {
    text-align: right !important;
}

.dx-datagrid .dx-header-row > td,
.dx-datagrid .dx-data-row > td {
    border-right: none !important;
    border-left: 1px solid var(--bs-border-color, #e0e0e0) !important;
}

/* === Navigation & Toolbars === */
.navbar,
.dx-toolbar,
.dx-ribbon,
.dx-command-toolbar,
.dxbl-toolbar {
    direction: rtl !important;
    text-align: right !important;
}

    .navbar .navbar-nav {
        flex-direction: row-reverse !important;
    }

    .navbar .nav-item {
        margin-left: 0 !important;
        margin-right: 1rem !important;
    }

/* === Popups & Modals === */
.dx-popup,
.modal,
.dxbl-modal,
.popover,
.tooltip {
    direction: rtl !important;
    text-align: right !important;
}

.dx-popup-wrapper,
.dx-overlay-wrapper,
.dx-overlay-content {
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

.dx-popup-content,
.modal-content,
.popover-body {
    text-align: right !important;
    direction: rtl !important;
}

.dx-popup-title,
.modal-title {
    text-align: right !important;
}

.dx-popup-closebutton,
.modal-header .btn-close {
    left: 10px !important;
    right: auto !important;
}

.dx-overlay-shader {
    z-index: 1040 !important;
}

.dx-overlay-content {
    z-index: 1050 !important;
}

/* === Buttons & Icons === */
.dx-button,
.btn {
    text-align: center !important;
}

    .dx-button .dx-icon,
    .btn .dx-icon {
        margin-right: 0 !important;
        margin-left: 6px !important;
    }

/* === Breadcrumbs, Pagination === */
.breadcrumb,
.pagination {
    flex-direction: row-reverse !important;
}

    .pagination .page-item:first-child .page-link {
        border-top-right-radius: var(--bs-border-radius) !important;
        border-bottom-right-radius: var(--bs-border-radius) !important;
    }

/* === Panels, Cards, and Groups === */
.card,
.panel,
.dx-card,
.dx-fieldset {
    direction: rtl !important;
    text-align: right !important;
}

.card-header,
.panel-heading {
    text-align: right !important;
}

/* === Alerts & Toasts === */
.alert,
.toast,
.dx-toast {
    direction: rtl !important;
    text-align: right !important;
}

/* === DevExpress Specific === */
.dx-rtl .dx-field-label {
    float: right !important;
    margin-left: 0 !important;
    margin-right: 5px !important;
}

.dx-rtl .dx-field-value {
    text-align: right !important;
}

.dx-rtl .dx-toolbar-before {
    float: right !important;
}

.dx-rtl .dx-toolbar-after {
    float: left !important;
}

.dx-rtl .dx-popup-content {
    text-align: right !important;
}

/* === RichEdit Alignment === */
.dxreControl {
    direction: rtl !important;
    text-align: right !important;
}

    .dxreControl .dxreRulerWrapper {
        direction: rtl !important;
    }

    .dxreControl .dxreView {
        text-align: right !important;
    }

/* === Lists and Menu Items === */
.dx-list-item,
.dx-menu-item,
.dx-treeview-item {
    text-align: right !important;
}

.dx-list-item-content,
.dx-menu-item-content {
    padding-right: 1rem !important;
    padding-left: 0 !important;
}

/* === Fix Scrollbars === */
html[dir="rtl"] ::-webkit-scrollbar-thumb {
    border-left: none !important;
    border-right: 1px solid #ccc !important;
}

/* === Miscellaneous === */
.dx-toast-message,
.dx-popup-content,
.dx-dialog-message {
    text-align: right !important;
}

/* === Responsive Fix === */
@media (max-width: 768px) {
    .navbar-nav {
        text-align: right !important;
    }
}

.dxbl-popup-cell {
    right: 0;
}

.dxbl-image {
    margin-right: 0 !important;
    margin-left: var(--dxbl-tabs-image-spacing);
}

.settings-bar {
    left: 0rem !important;
    right: auto !important;
    direction: rtl;
    text-align: right;
}

.account-main {
    left: 4rem !important;
    right: auto !important;
    direction: rtl;
    text-align: right;
}

/* ========================================================================== */
/* FIX 1) Toolbar SplitButton RTL (Arrow position + border separator)          */
/* ========================================================================== */

html[dir="rtl"] .dxbl-btn-split,
body[dir="rtl"] .dxbl-btn-split,
html[dir="rtl"] .dxbl-toolbar .dxbl-btn-split,
body[dir="rtl"] .dxbl-toolbar .dxbl-btn-split {
    flex-direction: row-reverse !important;
}

    html[dir="rtl"] .dxbl-btn-split .dxbl-btn-first,
    body[dir="rtl"] .dxbl-btn-split .dxbl-btn-first {
        border-left: 1px solid var(--bs-border-color, #e0e0e0) !important;
        border-right: none !important;
        border-top-right-radius: var(--bs-border-radius, .375rem) !important;
        border-bottom-right-radius: var(--bs-border-radius, .375rem) !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    html[dir="rtl"] .dxbl-btn-split .dxbl-btn-split-dropdown,
    body[dir="rtl"] .dxbl-btn-split .dxbl-btn-split-dropdown {
        border-right: 1px solid var(--bs-border-color, #e0e0e0) !important;
        border-left: none !important;
        border-top-left-radius: var(--bs-border-radius, .375rem) !important;
        border-bottom-left-radius: var(--bs-border-radius, .375rem) !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

        html[dir="rtl"] .dxbl-btn-split .dxbl-btn-split-dropdown .dxbl-icon,
        body[dir="rtl"] .dxbl-btn-split .dxbl-btn-split-dropdown .dxbl-icon {
            transform: scaleX(-1) !important;
        }

/* ========================================================================== */
/* FIX 2) Toolbar Dropdown extra spacing                                       */
/* ========================================================================== */

html[dir="rtl"] .dxbl-toolbar-dropdown-body,
body[dir="rtl"] .dxbl-toolbar-dropdown-body,
html[dir="rtl"] .dxbl-dropdown-body,
body[dir="rtl"] .dxbl-dropdown-body {
    padding: 0 !important;
}

html[dir="rtl"] ul.dxbl-toolbar-dropdown-item-list,
body[dir="rtl"] ul.dxbl-toolbar-dropdown-item-list,
html[dir="rtl"] ul.dxbl-dropdown-item-list,
body[dir="rtl"] ul.dxbl-dropdown-item-list {
    margin: 0 !important;
    padding: 0 !important;
}

html[dir="rtl"] li.dxbl-toolbar-dropdown-item,
body[dir="rtl"] li.dxbl-toolbar-dropdown-item,
html[dir="rtl"] li.dxbl-dropdown-item,
body[dir="rtl"] li.dxbl-dropdown-item {
    margin: 0 !important;
    padding: 0 !important;
}

html[dir="rtl"] .dxbl-toolbar-menu-item,
body[dir="rtl"] .dxbl-toolbar-menu-item {
    margin: 0 !important;
    padding: 6px 12px !important;
}

/* ========================================================================== */
/* FIX 3) HORIZONTAL SCROLL – REAL SOURCE (Bootstrap overflow-auto wrapper)    */
/*    طبق DevTools: div.w-100.overflow-auto عامل اصلیه                           */
/* ========================================================================== */

/* فقط اسکرول افقی رو ببند، عمودی (scrollbar چپ) بمونه */
.w-100.overflow-auto {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* اگر در تب‌های XAF هم wrapper مشابه داشت */
.xaf-tabbed-mdi .w-100.overflow-auto,
.xaf-tabbed-mdi .overflow-auto {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* ========================================================================== */
/* FIX 4) Grid sizing – shrink columns instead of forcing horizontal scroll     */
/* ========================================================================== */

.dxbl-grid,
.dxbl-grid * {
    max-width: 100% !important;
}

/* containerهای داخلی grid که گاهی overflow-x:auto می‌گیرن */
.dxbl-grid,
.dxbl-grid-content,
.dxbl-grid-table-container,
.dxbl-scroll-viewer,
.dxbl-scroll-viewer-content,
.dxbl-scroll-viewer-content-wrapper {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

    /* جدول: fixed layout + full width */
    .dxbl-grid table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    /* col/colgroup هم shrink */
    .dxbl-grid colgroup,
    .dxbl-grid col {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* سلول‌ها اجازه shrink داشته باشند */
    .dxbl-grid-header-cell,
    .dxbl-grid-data-cell,
    .dxbl-grid td,
    .dxbl-grid th {
        min-width: 0 !important;
    }

/* ========================================================================== */
/* FIX 5) Header text wrap (dxbl-grid-header-content uses Shadow DOM)          */
/*    باید روی خود Host و (اگر موجود بود) روی PARTها هم ست بشه                  */
/* ========================================================================== */

.dxbl-grid-header-content {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    max-width: 100% !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
}

    /* اگر DevExpress part اکسپوز کرده باشد (برای نسخه‌های مختلف) */
    .dxbl-grid-header-content::part(content),
    .dxbl-grid-header-content::part(text),
    .dxbl-grid-header-content::part(root),
    .dxbl-grid-header-content::part(container) {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word !important;
        line-height: 1.2 !important;
    }

/* خود header cell هم باید wrap را اجازه بده */
.dxbl-grid-header-cell {
    white-space: normal !important;
    height: auto !important;
    min-height: 44px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    vertical-align: middle !important;
}

    /* اگر داخل هدر span/text بیرون shadow هم بود */
    .dxbl-grid-header-cell span,
    .dxbl-grid-header-cell .dxbl-text,
    .dxbl-grid-header-cell div {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word !important;
        line-height: 1.2 !important;
    }

/* ========================================================================== */
/* DevExtreme DataGrid fallback (اگر جایی استفاده شده باشد)                    */
/* ========================================================================== */

.dx-datagrid,
.dx-datagrid * {
    max-width: 100% !important;
}

    .dx-datagrid .dx-datagrid-text-content {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word !important;
        line-height: 1.2 !important;
    }

    .dx-datagrid .dx-datagrid-content {
        overflow-x: hidden !important;
    }

/* ===== XAF Blazor / DevExpress Toolbar RTL order fix ===== */

/* اگر روی root شما dir="rtl" هست */
html[dir="rtl"] .dxbl-toolbar,
html[dir="rtl"] .dxbl-toolbar .dxbl-toolbar-items,
html[dir="rtl"] .dxbl-toolbar .dxbl-toolbar-layout-block,
html[dir="rtl"] .dxbl-toolbar .dxbl-toolbar-layout-block-item {
    direction: rtl;
}

    /* آیتم‌های تولبار را در RTL برعکس کن */
    html[dir="rtl"] .dxbl-toolbar .dxbl-toolbar-layout-block {
        display: flex !important;
        flex-direction: row-reverse !important;
        justify-content: flex-start !important;
    }

    /* فاصله‌ها/مارجین‌ها که معمولاً LTR هستند را RTL کن */
    html[dir="rtl"] .dxbl-toolbar .dxbl-toolbar-item,
    html[dir="rtl"] .dxbl-toolbar .dxbl-btn {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

.grid-content{
    direction: ltr !important;
    min-width: 100% !important;
}
.dxbl-grid-selection-cell{
    text-align:center !important;
}
/* خنثی کردن راست‌چینِ سراسری برای سلول‌هایی که باید وسط‌چین باشند */
.dxbl-grid td.dxbl-align-center,
.dxbl-grid th.dxbl-align-center {
    text-align: center !important;
}

    /* اجبار چک‌باکس به رفتار بلاک و قرارگیری در مرکز سلول */
    .dxbl-grid td.dxbl-align-center .dxbl-checkbox,
    .dxbl-grid th.dxbl-align-center .dxbl-checkbox {
        display: block !important;
        width: fit-content !important;
        margin: 0 auto !important;
    }