/**
 * Trakmile RTL overrides for Metronic 8 + Bootstrap 5
 * Applied when locale is Arabic (dir="rtl")
 *
 * Important: do NOT add flex-direction: row-reverse on containers that
 * already inherit direction: rtl — that double-flips layout back to LTR.
 */

html[dir="rtl"],
html[dir="rtl"] body {
    --bs-font-sans-serif: "Cairo", "Segoe UI", Tahoma, sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    direction: rtl;
    text-align: right;
    font-family: var(--bs-font-sans-serif);
    font-weight: 400;
    font-style: normal;
}

html[dir="rtl"] .btn,
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] .menu-title,
html[dir="rtl"] .menu-link,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .modal,
html[dir="rtl"] .dataTables_wrapper {
    font-family: var(--bs-font-sans-serif);
}

/* Layout shell — sidebar push (Metronic uses body[data-kt-*] + margin-left in LTR) */
html[dir="rtl"] {
    --trakmile-sidebar-offset: calc(
        var(--bs-app-sidebar-width, 225px) +
        var(--bs-app-sidebar-gap-start, 0px) +
        var(--bs-app-sidebar-gap-end, 0px)
    );
}

@media (min-width: 992px) {
    html[dir="rtl"] body[data-kt-app-sidebar-fixed="true"] .app-sidebar,
    html[dir="rtl"] body[data-kt-app-sidebar-sticky="on"] .app-sidebar {
        left: auto !important;
        right: 0 !important;
    }

    html[dir="rtl"] body[data-kt-app-sidebar-fixed="true"] .app-wrapper,
    html[dir="rtl"] body[data-kt-app-sidebar-sticky="on"] .app-wrapper {
        margin-left: 0 !important;
        margin-right: var(--trakmile-sidebar-offset) !important;
    }

    html[dir="rtl"] body[data-kt-app-header-fixed="true"][data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-header="true"] .app-header,
    html[dir="rtl"] body[data-kt-app-header-fixed="true"][data-kt-app-sidebar-sticky="on"][data-kt-app-sidebar-push-header="true"] .app-header {
        left: 0 !important;
        right: var(--trakmile-sidebar-offset) !important;
    }

    html[dir="rtl"] body[data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-toolbar="true"] .app-toolbar,
    html[dir="rtl"] body[data-kt-app-sidebar-sticky="on"][data-kt-app-sidebar-push-toolbar="true"] .app-toolbar {
        left: 0 !important;
        right: var(--trakmile-sidebar-offset) !important;
    }

    html[dir="rtl"] body[data-kt-app-sidebar-fixed="true"][data-kt-app-sidebar-push-footer="true"] .app-footer,
    html[dir="rtl"] body[data-kt-app-sidebar-sticky="on"][data-kt-app-sidebar-push-footer="true"] .app-footer {
        left: 0 !important;
        right: var(--trakmile-sidebar-offset) !important;
    }
}

html[dir="rtl"] .app-container:not(#kt_app_toolbar_container),
html[dir="rtl"] #kt_app_content_container,
html[dir="rtl"] .app-content,
html[dir="rtl"] .app-main,
html[dir="rtl"] .card,
html[dir="rtl"] .card-header,
html[dir="rtl"] .card-body {
    direction: rtl;
}

/* Page title & breadcrumbs — align toward sidebar (inline-start = right in RTL) */
html[dir="rtl"] .page-title,
html[dir="rtl"] .page-heading,
html[dir="rtl"] .breadcrumb {
    text-align: right !important;
}

html[dir="rtl"] .page-title.d-flex,
html[dir="rtl"] .page-heading.d-flex {
    align-items: flex-start !important;
}

html[dir="rtl"] .page-heading {
    font-weight: 700 !important;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-left: 0.5rem;
    padding-right: 0;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
    padding-right: 0.5rem;
    padding-left: 0;
}

/* Sidebar logo collapse toggle — mirror position for RTL sidebar on the right */
@media (min-width: 992px) {
    html[dir="rtl"] .app-sidebar-logo .app-sidebar-toggle {
        inset-inline-start: auto !important;
        inset-inline-end: auto !important;
        left: 0 !important;
        right: auto !important;
        transform: translate(-50%, -50%) !important;
    }

    html[dir="rtl"] .app-sidebar-logo .app-sidebar-toggle i,
    html[dir="rtl"] .app-sidebar-logo .app-sidebar-toggle .svg-icon {
        transform: rotate(0deg) !important;
    }

    html[dir="rtl"] .app-sidebar-logo .app-sidebar-toggle.active i,
    html[dir="rtl"] .app-sidebar-logo .app-sidebar-toggle.active .svg-icon {
        transform: rotate(180deg) !important;
    }
}

/* Sidebar logo — centered; collapse toggle stays on the far edge */
html[dir="rtl"] .app-sidebar-logo {
    justify-content: center;
}

html[dir="rtl"] .app-sidebar-logo > a {
    display: inline-flex;
    justify-content: center;
    flex: 1;
}

/* Accordion chevron: far left | title center | icon far right */
html[dir="rtl"] .menu-item.menu-accordion > .menu-link .menu-icon {
    order: 1;
    margin-right: 0;
    margin-left: 0.75rem;
}

html[dir="rtl"] .menu-item.menu-accordion > .menu-link .menu-title {
    order: 2;
    flex-grow: 1;
}

html[dir="rtl"] .menu-item.menu-accordion > .menu-link .menu-arrow {
    order: 3;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none;
}

/* Collapsed: down | Expanded (.show): up */
html[dir="rtl"] .menu-item.menu-accordion > .menu-link .menu-arrow:after {
    transform: rotateZ(90deg) !important;
}

html[dir="rtl"] .menu-item.menu-accordion.showing:not(.menu-dropdown) > .menu-link .menu-arrow:after,
html[dir="rtl"] .menu-item.menu-accordion.show:not(.hiding):not(.menu-dropdown) > .menu-link .menu-arrow:after {
    transform: rotateZ(-90deg) !important;
}

html[dir="rtl"] .menu-item:not(.menu-accordion) > .menu-link .menu-icon,
html[dir="rtl"] .menu-item .menu-link .menu-bullet {
    margin-left: 0.75rem;
    margin-right: 0;
}

html[dir="rtl"] .menu-sub .menu-link {
    padding-right: calc(0.75rem + 25px);
    padding-left: 0.75rem;
}

/* Header navbar icons order */
html[dir="rtl"] .app-header-menu .menu-item .menu-link {
    flex-direction: row-reverse;
}

html[dir="rtl"] .app-header-menu .menu-link,
html[dir="rtl"] .app-header-menu .menu-link .menu-title,
html[dir="rtl"] .app-header-menu .menu-link:hover,
html[dir="rtl"] .app-header-menu .menu-link:hover .menu-title,
html[dir="rtl"] .app-header-menu .menu-link.active,
html[dir="rtl"] .app-header-menu .menu-link.active .menu-title,
html[dir="rtl"] .app-header-menu .menu-item.here > .menu-link .menu-title,
html[dir="rtl"] .app-header-menu .menu-item.show > .menu-link .menu-title {
    color: #0d0e12 !important;
}

/* Cards & toolbars — rely on inherited direction:rtl, not row-reverse */
html[dir="rtl"] .card-header {
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

html[dir="rtl"] .card-title.d-flex,
html[dir="rtl"] .card-toolbar {
    flex-wrap: wrap;
}

html[dir="rtl"] .card-toolbar {
    justify-content: flex-start;
}

/* Tables (Bootstrap + custom OrderTbl) */
html[dir="rtl"] .table,
html[dir="rtl"] .OrderTbl,
html[dir="rtl"] #OrderTbl,
html[dir="rtl"] #subtblMore,
html[dir="rtl"] .subtblMore,
html[dir="rtl"] .view_order_tbl,
html[dir="rtl"] .table-responsive {
    direction: rtl;
}

html[dir="rtl"] #subtblMore td.order-qr-cell,
html[dir="rtl"] .subtblMore td.order-qr-cell {
    text-align: center !important;
    vertical-align: middle !important;
}

html[dir="rtl"] .table th,
html[dir="rtl"] .table td,
html[dir="rtl"] .OrderTbl td,
html[dir="rtl"] #OrderTbl td,
html[dir="rtl"] #subtblMore td,
html[dir="rtl"] .subtblMore td,
html[dir="rtl"] .recordtbl td,
html[dir="rtl"] .records td {
    text-align: right;
}

html[dir="rtl"] .table .text-end {
    text-align: left !important;
}

html[dir="rtl"] #order-box {
    width: 100% !important;
    direction: rtl;
}

/* Forms */
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select {
    text-align: right;
}

html[dir="rtl"] .input-group {
    flex-direction: row-reverse;
}

html[dir="rtl"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

html[dir="rtl"] .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

html[dir="rtl"] .position-relative .form-control.ps-12,
html[dir="rtl"] .position-relative .form-control.ps-13 {
    padding-right: 3rem !important;
    padding-left: 1rem !important;
}

html[dir="rtl"] .position-relative .ki-magnifier,
html[dir="rtl"] .position-relative .las.la-magnifier,
html[dir="rtl"] .position-relative i[class*="magnifier"],
html[dir="rtl"] .position-relative i.las.la-magnifier,
html[dir="rtl"] .position-relative .ms-5,
html[dir="rtl"] .position-relative .ms-4 {
    left: auto !important;
    right: 1.25rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Dropdowns */
html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

html[dir="rtl"] .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
}

/* Modals — row-reverse OK here because modal uses its own flex axis */
html[dir="rtl"] .modal-header,
html[dir="rtl"] .modal-footer {
    flex-direction: row-reverse;
}

html[dir="rtl"] .modal-body {
    direction: rtl;
    text-align: right;
}

/* SweetAlert2 */
html[dir="rtl"] .swal2-popup {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .swal2-actions {
    flex-direction: row-reverse;
}

/* Select2 */
html[dir="rtl"] .select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
    text-align: right;
    padding-right: 0.75rem;
    padding-left: 2rem;
}

html[dir="rtl"] .select2-container--bootstrap5 .select2-selection--single .select2-selection__arrow {
    left: 0.75rem;
    right: auto;
}

html[dir="rtl"] .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected {
    padding-right: 1.25rem;
    padding-left: 2.75rem;
}

html[dir="rtl"] .select2-container--bootstrap5 .select2-dropdown .select2-results__option.select2-results__option--selected:after {
    right: auto !important;
    left: 1.25rem !important;
}

/* Legacy custom css.css helpers */
html[dir="rtl"] .awb,
html[dir="rtl"] .str,
html[dir="rtl"] .spl {
    text-align: right;
}

html[dir="rtl"] .spl {
    left: auto;
    right: -10px;
}

html[dir="rtl"] .createForm td {
    padding-right: 0;
    padding-left: 20px;
}

html[dir="rtl"] .status-button,
html[dir="rtl"] .assign-button {
    left: auto;
    right: 0;
}

/* Bootstrap spacing utilities (physical → logical flip) */
html[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-5 { margin-left: 3rem !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-md-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-md-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .ps-12 { padding-right: 3rem !important; padding-left: 1rem !important; }
html[dir="rtl"] .ps-13 { padding-right: 3.25rem !important; padding-left: 1rem !important; }
html[dir="rtl"] .pe-0 { padding-left: 0 !important; }
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }
html[dir="rtl"] .justify-content-end { justify-content: flex-start !important; }
html[dir="rtl"] .justify-content-start { justify-content: flex-end !important; }

/* RTL toolbar shell — no .app-toolbar flex (breaks title alignment) */
html[lang="ar"] .trakmile-toolbar-shell,
html[lang^="ar-"] .trakmile-toolbar-shell,
html[dir="rtl"] .trakmile-toolbar-shell {
    display: block !important;
    width: 100% !important;
    background-color: var(--bs-app-toolbar-base-bg-color, transparent);
}

html[lang="ar"] #kt_app_toolbar,
html[lang^="ar-"] #kt_app_toolbar,
html[dir="rtl"] #kt_app_toolbar,
html[dir="rtl"] body[dir="rtl"] #kt_app_toolbar {
    display: block !important;
    width: 100% !important;
}

html[lang="ar"] #kt_app_toolbar_container,
html[lang^="ar-"] #kt_app_toolbar_container,
html[dir="rtl"] #kt_app_toolbar_container,
html[dir="rtl"] body[dir="rtl"] #kt_app_toolbar_container {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 2.75rem !important;
    direction: ltr !important;
}

html[lang="ar"] #kt_app_toolbar_container .trakmile-page-heading-block,
html[lang^="ar-"] #kt_app_toolbar_container .trakmile-page-heading-block,
html[dir="rtl"] #kt_app_toolbar_container .trakmile-page-heading-block {
    position: absolute !important;
    right: 30px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    direction: rtl !important;
    text-align: right !important;
    align-items: flex-end !important;
    margin: 0 !important;
    width: auto !important;
    max-width: calc(100% - 60px) !important;
}

html[lang="ar"] #kt_app_toolbar_container .page-heading,
html[lang^="ar-"] #kt_app_toolbar_container .page-heading,
html[lang="ar"] #kt_app_toolbar_container .breadcrumb,
html[lang^="ar-"] #kt_app_toolbar_container .breadcrumb,
html[dir="rtl"] #kt_app_toolbar_container .page-heading,
html[dir="rtl"] #kt_app_toolbar_container .breadcrumb {
    text-align: right !important;
}

html[lang="ar"] #kt_app_toolbar_container .breadcrumb,
html[lang^="ar-"] #kt_app_toolbar_container .breadcrumb,
html[dir="rtl"] #kt_app_toolbar_container .breadcrumb {
    direction: rtl !important;
    justify-content: flex-start !important;
}