/**
 * App RTL overrides — loaded after core.css, Bootstrap RTL, and custom.css.
 * Sneat/core already use many logical properties; this file fills gaps.
 */

/* Mirror “back” chevrons and similar icons in RTL */
.scaleX-n1-rtl {
    transform: scaleX(-1);
}

/* Content backdrop: full viewport coverage in RTL (core uses left:0; width:100vw) */
html[dir="rtl"] .content-backdrop {
    left: auto;
    right: 0;
}

/* Bootstrap Table: inherit document direction for headers and body */
html[dir="rtl"] .bootstrap-table .table,
html[dir="rtl"] .bootstrap-table .fixed-table-container {
    direction: rtl;
}

html[dir="rtl"] .fixed-table-toolbar .columns,
html[dir="rtl"] .fixed-table-toolbar .bs-bars,
html[dir="rtl"] .fixed-table-toolbar .search {
    direction: rtl;
}

/* Sidebar base RTL alignment */
html[dir="rtl"] .layout-menu {
    text-align: right;
}

html[dir="rtl"] .layout-menu .menu-vertical .menu-item .menu-link,
html[dir="rtl"] .layout-menu .menu-vertical .menu-header,
html[dir="rtl"] .layout-menu .menu-vertical .menu-header .menu-header-text {
    text-align: right;
}

html[dir="rtl"] .layout-menu .menu-vertical .menu-item .menu-link {
    justify-content: flex-start;
}

html[dir="rtl"] .layout-menu .menu-vertical .menu-item .menu-link .menu-icon,
html[dir="rtl"] .layout-menu .menu-vertical .menu-item .menu-link i.menu-icon,
html[dir="rtl"] .layout-menu .menu-vertical .menu-item .menu-link svg {
    margin-inline-start: 0 !important;
    margin-inline-end: 0.75rem !important;
}

html[dir="rtl"] .layout-menu .menu-vertical .menu-item .menu-toggle {
    padding-inline-start: calc(var(--bs-menu-vertical-link-padding-x) + 1.76em);
    padding-inline-end: var(--bs-menu-vertical-link-padding-x);
}

html[dir="rtl"] .layout-menu .menu-vertical .menu-item .menu-toggle::after {
    inset-inline-start: calc(var(--bs-menu-vertical-link-padding-x) + 0.3rem);
    inset-inline-end: auto;
    transform: translateY(-50%) rotate(225deg);
}

html[dir="rtl"] .layout-menu .menu-vertical .menu-item.open:not(.menu-item-closing) > .menu-link::after {
    transform: translateY(-50%) rotate(135deg);
}

html[dir="rtl"] .layout-menu .menu-inner > .menu-header::before {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

html[dir="rtl"] #layout-menu input.form-control,
html[dir="rtl"] #layout-menu .custom-search-input {
    direction: rtl;
    text-align: right;
}

/* Timeline (non-center): mirror border and dot position from custom.css */
html[dir="rtl"] .timeline:not(.timeline-center) {
    padding-left: 0;
    padding-right: 0.5rem;
}

html[dir="rtl"] .timeline-item {
    border-left: none;
    border-right: 1px solid #e4e6e8;
}

html[dir="rtl"] .timeline .timeline-item .timeline-point {
    left: auto;
    right: -0.38rem;
}

html[dir="rtl"] .timeline .timeline-item .timeline-indicator,
html[dir="rtl"] .timeline .timeline-item .timeline-indicator-advanced {
    left: auto;
    right: -1rem;
}

html[dir="rtl"] .timeline .timeline-item.timeline-item-transparent .timeline-event {
    padding-right: 0;
}

@media (max-width: 1199.98px) {
    html[dir="rtl"] .drag-target {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    /*
     * Sneat's mobile off-canvas always slides from inline-start using translateX(-100%).
     * In RTL, inline-start is the right edge, so we must invert the hidden transform.
     */
    html[dir="rtl"] .layout-menu {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        transform: translate3d(100%, 0, 0);
    }

    html[dir="rtl"] .layout-menu-expanded .layout-menu {
        transform: translate3d(0, 0, 0) !important;
    }

    /*
     * On mobile, keep the off-canvas menu flush to the right edge in RTL.
     * The app's generic mobile width cap leaves a visible strip of page content
     * behind the menu, which also makes the header look misaligned in Arabic.
     */
    html[dir="rtl"] {
        --bs-menu-width: 100vw;
    }

    html[dir="rtl"] #layout-menu {
        inline-size: 100vw !important;
        max-inline-size: 100vw !important;
        max-width: 100vw !important;
        margin-inline: 0 !important;
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        border-inline-end: 0;
    }

    /* Polish the mobile RTL sidebar itself */
    html[dir="rtl"] #layout-menu.menu-container {
        box-shadow: 0 0 24px rgba(15, 23, 42, 0.12);
    }

    html[dir="rtl"] #layout-menu .mobile-sidebar-brand {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding-inline: 1rem;
    }

    html[dir="rtl"] #layout-menu .app-brand-link {
        display: flex;
        justify-content: center;
        margin-inline: auto;
        min-width: 0;
        width: 100%;
        padding-inline-start: 2.75rem;
    }

    html[dir="rtl"] #layout-menu .mobile-sidebar-brand .layout-menu-toggle {
        position: absolute;
        top: 50%;
        inset-inline-start: auto;
        inset-inline-end: 1rem;
        transform: translateY(-50%);
        margin-inline: 0;
        border-radius: 0.75rem;
        padding: 0.5rem;
    }

    html[dir="rtl"] #layout-menu .mobile-sidebar-workspace {
        padding-inline: 1rem;
    }

    html[dir="rtl"] #layout-menu .mobile-sidebar-workspace > .btn {
        align-items: center;
        border-radius: 0.875rem;
        display: inline-flex;
        justify-content: space-between;
        min-height: 2.75rem;
        text-align: right;
    }

    html[dir="rtl"] #layout-menu .mobile-sidebar-workspace .dropdown-menu {
        text-align: right;
    }

    html[dir="rtl"] #layout-menu .mobile-sidebar-search {
        padding-inline: 1rem !important;
    }

    html[dir="rtl"] #layout-menu .mobile-sidebar-search .input-group {
        width: 100%;
    }

    html[dir="rtl"] #layout-menu .mobile-sidebar-search .custom-search-input {
        border-radius: 0.875rem;
        min-height: 2.75rem;
    }

    html[dir="rtl"] #layout-menu .menu-inner {
        padding: 0.75rem 0.75rem calc(env(safe-area-inset-bottom, 0px) + 1rem);
    }

    html[dir="rtl"] #layout-menu .menu-inner > .dropdown-divider {
        margin: 0 0 0.75rem;
    }

    html[dir="rtl"] #layout-menu .menu-vertical .menu-header {
        margin-top: 0.25rem;
        padding-inline: 1rem;
    }

    html[dir="rtl"] #layout-menu .menu-vertical .menu-item .menu-link {
        align-items: center;
        border-radius: 0.875rem;
        display: flex;
        gap: 0.75rem;
        min-height: 2.75rem;
    }

    html[dir="rtl"] #layout-menu .menu-vertical .menu-item .menu-icon {
        flex: 0 0 1.25rem;
        margin-inline: 0;
        text-align: center;
    }

    html[dir="rtl"] #layout-menu .menu-vertical .menu-item .menu-link > div {
        flex: 1 1 auto;
        min-width: 0;
    }

    html[dir="rtl"] #layout-menu .menu-vertical .menu-item .menu-sub {
        padding-top: 0.25rem;
    }

    html[dir="rtl"] #layout-menu .menu-vertical .menu-sub .menu-link {
        border-radius: 0.75rem;
    }

    html[dir="rtl"] #layout-menu .menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
    html[dir="rtl"] #layout-menu .menu-vertical .menu-item.open > .menu-link {
        box-shadow: 0 6px 16px rgba(105, 108, 255, 0.08);
    }

    /* Keep the mobile navbar items aligned in one horizontal RTL row */
    html[dir="rtl"] #layout-navbar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    html[dir="rtl"] .layout-navbar .navbar-nav-right {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        width: 100%;
        min-width: 0;
        gap: 15px;
    }

    html[dir="rtl"] .layout-navbar .navbar-nav-right > .nav-item,
    html[dir="rtl"] .layout-navbar .navbar-nav-right > .navbar-nav > .nav-item {
        position: relative !important;
        left: auto !important;
        right: auto !important;
    }

    html[dir="rtl"] .layout-navbar .navbar-search-wrapper {
        flex-grow: 1 !important;
        min-width: 0;
        display: flex;
        justify-content: flex-start;
    }

    html[dir="rtl"] .layout-navbar .navbar-nav-right > .navbar-nav {
        flex: 0 0 auto;
        margin-inline-start: 0 !important;
        gap: 0.5rem;
    }

    html[dir="rtl"] .layout-navbar .nav-item.dropdown,
    html[dir="rtl"] .layout-navbar .nav-item.navbar-dropdown {
        margin: 0 !important;
    }

    html[dir="rtl"] .layout-navbar .navbar-dropdown.dropdown-user .dropdown-menu {
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
        margin-top: 0.5rem !important;
        min-inline-size: 14rem;
        transform: none !important;
    }

    html[dir="rtl"] .layout-navbar .navbar-dropdown.dropdown-user .dropdown-menu .dropdown-item,
    html[dir="rtl"] .layout-navbar .navbar-dropdown.dropdown-user .dropdown-menu > li > a.dropdown-item,
    html[dir="rtl"] .layout-navbar .navbar-dropdown.dropdown-user .dropdown-menu > li > form.dropdown-item {
        text-align: right !important;
    }

    html[dir="rtl"] .layout-navbar .navbar-dropdown.dropdown-user .dropdown-menu > li > a.dropdown-item,
    html[dir="rtl"] .layout-navbar .navbar-dropdown.dropdown-user .dropdown-menu > li > form.dropdown-item {
        align-items: center;
        display: flex;
        gap: 0.625rem;
        justify-content: flex-start;
    }

    html[dir="rtl"] .layout-navbar .navbar-dropdown.dropdown-user .dropdown-menu > li > form.dropdown-item .btn {
        align-items: center;
        display: inline-flex;
        gap: 0.5rem;
        justify-content: center;
        width: 100%;
    }

    html[dir="rtl"] .layout-navbar .layout-menu-toggle {
        order: -1;
        flex: 0 0 auto;
        margin-left: 10px !important;
        margin-right: 0 !important;
    }

    /* Match the English footer layout, with only light RTL-specific tweaks */
    html[dir="rtl"] .content-footer .footer-container {
        direction: rtl;
    }

    html[dir="rtl"] .footer-help-link .footer-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
    }
}

@media (max-width: 767.98px) {
    html[dir="rtl"] .layout-navbar .navbar-nav .nav-item.navbar-dropdown.dropdown-user {
        float: none;
        position: relative !important;
    }

    html[dir="rtl"] .layout-navbar .navbar-dropdown.dropdown-user .dropdown-menu {
        inline-size: min(18rem, calc(100vw - 1.5rem)) !important;
        max-inline-size: calc(100vw - 1.5rem);
        min-inline-size: 14rem !important;
    }

    html[dir="rtl"] .content-footer.footer {
        padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 5.25rem) !important;
    }
}

/* Intl Tel Input: keep E.164 LTR inside RTL shell */
html[dir="rtl"] .iti__flag-container {
    right: auto;
    left: 0;
}

html[dir="rtl"] .iti input[type="tel"],
html[dir="rtl"] .iti input[type="text"] {
    padding-left: 52px;
    padding-right: 8px;
    direction: ltr;
    text-align: right;
}

/* Google Noto Naskh Arabic — base Arabic UI font */
html[dir="rtl"][lang="ar"] {
    --bs-font-sans-serif: "Noto Naskh Arabic", "Cairo", "Noto Sans Arabic", system-ui, sans-serif;
    --bs-body-font-family: "Noto Naskh Arabic", "Cairo", "Noto Sans Arabic", system-ui, sans-serif;
}

html[dir="rtl"][lang="ar"] body,
html[dir="rtl"][lang="ar"] input,
html[dir="rtl"][lang="ar"] textarea,
html[dir="rtl"][lang="ar"] select,
html[dir="rtl"][lang="ar"] button,
html[dir="rtl"][lang="ar"] .form-control,
html[dir="rtl"][lang="ar"] .form-select,
html[dir="rtl"][lang="ar"] .select2-container {
    font-family: var(--bs-body-font-family);
}

/* Kanban board follows inline axis; flex row in RTL starts from inline-end — no row-reverse */

/* Headings & prominent titles */
html[dir="rtl"][lang="ar"] :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .h1,
    .h2,
    .h3,
    .h4,
    .h5,
    .h6,
    .card-title,
    .modal-title,
    .offcanvas-title,
    .toast-header,
    .accordion-button,
    .menu-header .menu-header-text,
    .popover-header
) {
    font-family: var(--bs-body-font-family);
    letter-spacing: 0;
}