/* ================================================
   RTL (ARABIC) - foundation styles (AR-1)
   All rules are scoped under html[dir="rtl"] and have
   no effect on LTR pages. Bootstrap, navigation, forms,
   tables, modals, themes and plugins are handled later.
   ================================================ */

html[dir="rtl"] {
    direction: rtl;
}

/* system font stack with native arabic glyph coverage (no downloads) */
html[dir="rtl"] body {
    font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "Arial", sans-serif;
    text-align: start;
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: inherit;
}


/* ================================================
   RTL (ARABIC) - main application shell (AR-2)
   Mirrors the physical left/right rules of the theme
   style.css files (default, midnight, prestige share the
   same shell geometry; only the colours below differ).
   ================================================ */

/* theme colours of the mirrored borders.
   Each mirrored border sets its width/style normally, and its colour with
   the same specificity as the theme rule it mirrors (or none, via :where),
   so the theme's own border-color overrides keep applying as in LTR. */
html[dir="rtl"] {
    --rtl-shell-border: #eae7e7;
    --rtl-shell-accent: #20aee3;
    --rtl-shell-profile-border: var(--rtl-shell-border);
}

html[dir="rtl"][data-bs-theme="midnight"] {
    --rtl-shell-border: #444954;
}

html[dir="rtl"][data-bs-theme="prestige"] {
    --rtl-shell-border: #eeeff0;
    --rtl-shell-accent: #5f73a3;
    /* prestige overrides .topbar .profile-pic with border-left: #d3ddf5 */
    --rtl-shell-profile-border: #d3ddf5;
}

/* ---------- content area: sidebar offset moves to the right ---------- */
@media (min-width: 1024px) {
    html[dir="rtl"] .page-wrapper {
        margin-left: 0;
        margin-right: 210px;
    }

    html[dir="rtl"] .settings .page-wrapper {
        margin-left: 0;
        margin-right: 230px;
    }
}

@media (max-width: 1023px) {
    html[dir="rtl"] .page-wrapper {
        margin-left: 0;
        margin-right: 70px;
    }
}

@media (min-width: 768px) {
    html[dir="rtl"] .mini-sidebar .page-wrapper {
        margin-left: 0;
        margin-right: 75px;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .mini-sidebar .page-wrapper {
        margin-right: 0;
    }
}

@media (max-width: 1023px) {
    html[dir="rtl"] .settings .page-wrapper {
        margin-right: 0;
    }
}

html[dir="rtl"] .single-column .page-wrapper {
    margin-right: 0 !important;
}

/* ---------- left menu (rendered on the right) ---------- */
html[dir="rtl"] .left-sidebar {
    border-right-width: 0;
    border-left-width: 1px;
    border-left-style: solid;
}

:where(html[dir="rtl"]) .left-sidebar {
    border-left-color: var(--rtl-shell-border);
}

html[dir="rtl"] #main-sidenav {
    padding-right: 0;
    padding-left: 10px;
}

/* link padding: 35px side reserved for the submenu chevron */
html[dir="rtl"] .sidebar-nav ul li a,
html[dir="rtl"] .sidebar-nav ul li ul li a {
    padding-left: 35px;
    padding-right: 15px;
}

/* active indicator; colours at zero specificity so the theme's
   li.active > a { border-color } overrides still win */
html[dir="rtl"] .sidebar-nav > ul > li > a {
    border-left-width: 0;
    border-right-width: 3px;
    border-right-style: solid;
}

:where(html[dir="rtl"] .sidebar-nav > ul > li > a) {
    border-right-color: transparent;
}

:where(html[dir="rtl"] .sidebar-nav > ul > li > a.active) {
    border-right-color: var(--rtl-shell-accent);
}

html[dir="rtl"] .sidebar-nav > ul > li > a .label {
    float: left;
}

html[dir="rtl"] .sidebar-nav ul li ul {
    padding-left: 0;
    padding-right: 50px;
}

html[dir="rtl"] .sidebar-nav ul li ul ul {
    padding-left: 0;
    padding-right: 15px;
}

/* submenu chevron: on the left, pointing left; pointing down when open */
html[dir="rtl"] .sidebar-nav .has-arrow::after {
    right: auto;
    left: 20px;
    transform: rotate(-45deg) translate(0, -50%);
}

html[dir="rtl"] .sidebar-nav .active > .has-arrow::after,
html[dir="rtl"] .sidebar-nav li > .has-arrow.active::after,
html[dir="rtl"] .sidebar-nav .has-arrow[aria-expanded=true]::after {
    transform: rotate(-135deg) translate(0, -50%);
}

/* collapsed (mini) menu: flyout submenus open towards the content */
@media (min-width: 768px) {
    html[dir="rtl"] .mini-sidebar .sidebar-nav #sidebarnav > li > ul {
        left: auto;
        right: 75px;
    }
}

/* mobile: off-canvas menu slides in from the right */
@media (max-width: 767px) {
    html[dir="rtl"] .mini-sidebar .left-sidebar,
    html[dir="rtl"] .mini-sidebar .sidebar-footer {
        left: auto;
        right: -260px;
    }

    html[dir="rtl"] .mini-sidebar.show-sidebar .left-sidebar,
    html[dir="rtl"] .mini-sidebar.show-sidebar .sidebar-footer {
        left: auto !important;
        right: 0 !important;
    }
}

/* ---------- top navigation ---------- */
html[dir="rtl"] .topbar .top-navbar .navbar-header {
    padding-left: 0;
    padding-right: 10px;
    border-right-width: 0;
    border-left-width: 1px;
    border-left-style: solid;
}

:where(html[dir="rtl"]) .topbar .top-navbar .navbar-header {
    border-left-color: var(--rtl-shell-border);
}

/* keep the hamburger/search group next to the logo */
html[dir="rtl"] .topbar .navbar-nav.mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

html[dir="rtl"] .top-search-bar {
    padding-left: 0;
    padding-right: 8px;
}

html[dir="rtl"] .top-search-bar .top-search-container i {
    left: auto;
    right: 12px;
}

html[dir="rtl"] .top-search-bar .top-search-container input {
    padding-left: .75rem;
    padding-right: 35px;
}

html[dir="rtl"] .topbar .u-pro {
    margin-left: 0;
    margin-right: 10px;
}

html[dir="rtl"] .topbar .profile-pic {
    padding-left: 0;
    padding-right: 15px;
    border-left-width: 0;
    border-right-width: 1px;
    border-right-style: solid;
}

:where(html[dir="rtl"]) .topbar .profile-pic {
    border-right-color: var(--rtl-shell-profile-border);
}

/* topnav dropdowns: anchored on the mirrored side so they stay on screen */
html[dir="rtl"] .topbar .dropdown-menu-right {
    right: auto;
    left: 0;
}

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

html[dir="rtl"] .topbar .dropdown-menu {
    text-align: start;
}

html[dir="rtl"] .topbar .dropdown-menu .dropdown-item.dropdown-item-iconed {
    padding-left: 1.5rem;
    padding-right: 25px;
}

html[dir="rtl"] .topbar .dropdown-menu .dropdown-item.dropdown-item-iconed i {
    padding-right: 0;
    padding-left: 19px;
}

/* leading icons: isolated so they stay at the start of the line even when the
   label is latin (icon-font glyphs are strong LTR and would join the latin run) */
html[dir="rtl"] .topbar .dropdown-menu i,
html[dir="rtl"] .right-sidebar .rpanel-title i {
    unicode-bidi: isolate;
}

/* icon/text gap of the dropdown items (theme utility: html body .p-r-4) */
html[dir="rtl"] body .topbar .dropdown-menu .p-r-4 {
    padding-right: 0 !important;
    padding-left: 4px !important;
}

html[dir="rtl"] .topbar ul.dropdown-user li .dw-user-box .u-text {
    padding-left: 0;
    padding-right: 10px;
}

/* ---------- side panels (notifications, reminders, starred, filters) ----------
   closed off-screen on the left, opened (.shw-rside) against the left edge */
html[dir="rtl"] .right-sidebar {
    right: auto;
    left: -240px;
    box-shadow: -5px 1px 40px rgba(0, 0, 0, 0.1);
}

html[dir="rtl"] .shw-rside {
    left: 0;
}

html[dir="rtl"] .right-sidebar .rpanel-title span {
    float: left;
}

html[dir="rtl"] .right-sidebar .rpanel-title i {
    padding-right: 0;
    padding-left: 6px;
}

html[dir="rtl"] .right-sidepanel-with-menu .rpanel-title .x-top-nav {
    text-align: left;
}

html[dir="rtl"] .right-sidepanel-with-menu .sidepanel-notifications-mark-all-read {
    text-align: left;
    margin-right: 0;
    margin-left: -8px;
}

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

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

/* page heading separator: themify angle-left instead of angle-right */
html[dir="rtl"] .page-titles .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\e64a";
}


/* ================================================
   RTL (ARABIC) - bidi and shared components (AR-3)
   Bidi primitive for LTR data inside RTL content (amounts,
   references, codes, emails, urls, phones): mark the value
   with the native attribute dir="ltr" on an inline wrapper,
   e.g. <span dir="ltr">3 000.00MAD</span>. HTML isolates it
   automatically; no class is needed.
   ================================================ */

/* list pages stats panels: the value-only headings (amounts, counts)
   of every stats partial share the id stats-widget-value-N */
html[dir="rtl"] [id^="stats-widget-value-"] {
    direction: ltr;
    text-align: right;
}

/* text badges: direction taken from their own content, so a latin
   label truncated with "..." keeps the ellipsis at its end */
html[dir="rtl"] .label:not(.label-icons) {
    unicode-bidi: plaintext;
}

/* forms: grow labels use .text-left to mean "start" */
html[dir="rtl"] .col-form-label.text-left {
    text-align: right !important;
}

/* switches: aligned to the logical end (.text-right), knob mirrored
   (same "left" property so the theme transition still animates) */
html[dir="rtl"] .switch.text-right {
    text-align: left !important;
}

/* AR-QA-FIX-2 - same alignment when .text-right is set on the switch's parent column
   (project modals: "col-sm-4 text-right > .switch") */
html[dir="rtl"] .text-right > .switch {
    text-align: left !important;
}

html[dir="rtl"] .switch label .lever:after {
    left: 21px;
}

html[dir="rtl"] .switch label input[type=checkbox]:checked + .lever:after {
    left: 2px;
}

/* modals: close icons on the mirrored corner (absolute in the themes) */
html[dir="rtl"] .modal .modal-dialog .modal-header button.close {
    right: auto;
    left: 20px;
    margin-right: 0;
    margin-left: -1rem;
}

html[dir="rtl"] .modal .modal-content .x-extra-close-icon,
html[dir="rtl"] .card-modal .close,
html[dir="rtl"] .create-modal .modal-dialog .modal-content .close {
    right: auto;
    left: 10px;
}

html[dir="rtl"] .card-modal .modal-dialog .modal-content .modal-body button.close {
    right: auto;
    left: 13px;
}


/* ================================================
   RTL (ARABIC) - settings area (pages/settings/wrapper-settings)
   The shell rules above already apply; only the settings
   specific physical rules of the themes are mirrored here.
   ================================================ */
html[dir="rtl"] .settings .left-sidebar .sidebar-nav {
    padding-right: 0;
    padding-left: 10px;
}

html[dir="rtl"] .settings .settings-menu .sidebar-nav ul li ul {
    padding-left: 0;
    padding-right: 15px;
}

/* exit link (topnav logo area): icon kept at the start of the line (latin labels) */
html[dir="rtl"] .settings .exit-panel i {
    unicode-bidi: isolate;
}


/* ================================================
   RTL (ARABIC) - monetary cells of the reports (AR-3b)
   every report amount cell carries td.data-type-money (also used
   by the export script, which reads the unchanged cell text)
   ================================================ */
html[dir="rtl"] td.data-type-money {
    direction: ltr;
    text-align: right;
}

/* free text fields: each value takes the direction of its own content
   (same as dir="auto"); values without strong characters such as phones,
   numbers or negative amounts resolve to LTR */
html[dir="rtl"] input.form-control,
html[dir="rtl"] textarea.form-control {
    unicode-bidi: plaintext;
}

/* AR-4B - Bootstrap 4 .ml-auto pushes an element to the far side of a flex row; in RTL
   the far side is the left, so the auto margin moves to the right */
html[dir="rtl"] .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* AR-4B - Chartist axis labels are positioned for LTR (x offset from the left edge of
   each step); keep them LTR so labels stay under their grid line and the last one is not clipped */
html[dir="rtl"] .ct-label {
    direction: ltr;
}

/* AR-4B - Select2 (bootstrap theme) mirrors the clear button of single selects only;
   mirror it for multiple selects too */
html[dir="rtl"] .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear {
    float: left;
    margin-right: 0;
    margin-left: 10px;
}

/* AR-4B - bootstrap-datepicker native RTL mode (rtl option set in boot.js) anchors the picker
   with "right" only; drop the left:0 inherited from .dropdown-menu and put the arrow on the right */
html[dir="rtl"] .datepicker.datepicker-rtl.dropdown-menu {
    left: auto;
}

html[dir="rtl"] .datepicker-dropdown.datepicker-rtl.datepicker-orient-left:before {
    left: auto;
    right: 6px;
}

html[dir="rtl"] .datepicker-dropdown.datepicker-rtl.datepicker-orient-left:after {
    left: auto;
    right: 7px;
}

/* AR-LANG-3 - FullCalendar event titles are user content of either direction, in RTL and LTR
   pages alike (this rule is intentionally not scoped to html[dir="rtl"]): resolve each title's
   direction from its own text so a title is always clipped at its end, never at its start */
.fc .fc-event-title {
    unicode-bidi: plaintext;
}

/* AR-AI-1B - assisted project structuring (EcsProjectStructuring), scoped to .ecs-structuring-page */
/* Bootstrap physical spacing utilities used by the module's badges, buttons and inline fields */
html[dir="rtl"] .ecs-structuring-page .mr-1 {
    margin-right: 0 !important;
    margin-left: .25rem !important;
}

html[dir="rtl"] .ecs-structuring-page .mr-2 {
    margin-right: 0 !important;
    margin-left: .5rem !important;
}

html[dir="rtl"] .ecs-structuring-page .ml-2 {
    margin-left: 0 !important;
    margin-right: .5rem !important;
}

/* participant checkboxes (.form-check + theme label box): indentation and box on the right */
html[dir="rtl"] .ecs-structuring-page .form-check {
    padding-left: 0;
    padding-right: 1.25rem;
}

html[dir="rtl"] .ecs-structuring-page .form-check [type=checkbox] + label {
    padding-left: 0;
    padding-right: 26px;
}

html[dir="rtl"] .ecs-structuring-page .form-check [type=checkbox] + label:before {
    left: auto;
    right: 0;
}

html[dir="rtl"] .ecs-structuring-page .form-check [type=checkbox]:checked + label:before {
    left: auto;
    right: 7px;
}

/* selected draft accent border and AI progress spinner spacing */
html[dir="rtl"] #ecs-structuring-drafts-list .ecs-structuring-draft-item.active,
html[dir="rtl"] #ecs-structuring-drafts-list .ecs-structuring-draft-item.active:hover,
html[dir="rtl"] #ecs-structuring-drafts-list .ecs-structuring-draft-item.active:focus {
    border-left-width: 1px;
    border-right: 3px solid #0A3D91;
}

html[dir="rtl"] #ecs-structuring-detail-generate-ai-progress .ecs-spinner {
    margin-right: 0;
    margin-left: 6px;
}

/* localized dates: isolated from the surrounding label and separators */
html[dir="rtl"] .ecs-structuring-page .ecs-structuring-local-datetime,
html[dir="rtl"] .ecs-structuring-page #ecs-structuring-detail-created-at,
html[dir="rtl"] .ecs-structuring-page #ecs-structuring-detail-updated-at,
html[dir="rtl"] .ecs-structuring-page #ecs-structuring-detail-expires-at {
    unicode-bidi: isolate;
}

/* stored AI connection test message: kept as recorded (any language), shown in its own direction */
html[dir="rtl"] #ecsprojectstructuring-ai-test-result .alert {
    unicode-bidi: plaintext;
}

/* AR-AI-2B - data texts (task descriptions, description enrichment, AI review findings and
   compared values) shown in their own direction, paragraph by paragraph - the data is never changed */
html[dir="rtl"] .ecs-structuring-page .ecs-structuring-data-text {
    unicode-bidi: plaintext;
}

/* AR-QA-FIX-1 - bill document (invoice / estimate), web view only: the PDF template neither loads
   this file nor sets dir="rtl". Amounts and percentages are laid out left to right so a grouped
   number ("2 000.00", "3 452.00MAD", "-11 034.40MAD") keeps its order; cells keep their alignment */
html[dir="rtl"] .invoice-wrapper #billing-items-container td.x-rate,
html[dir="rtl"] .invoice-wrapper #billing-items-container td.x-discount,
html[dir="rtl"] .invoice-wrapper #billing-items-container td.x-tax,
html[dir="rtl"] .invoice-wrapper #billing-items-container td.x-total,
html[dir="rtl"] .invoice-wrapper #billing-items-container td.x-net-total {
    direction: ltr;
    text-align: right;
}

html[dir="rtl"] .invoice-wrapper #billing-subtotal-figure,
html[dir="rtl"] .invoice-wrapper #billing-sums-discount,
html[dir="rtl"] .invoice-wrapper [id^="invoice-sums-tax-"],
html[dir="rtl"] .invoice-wrapper #billing-adjustment-container-amount,
html[dir="rtl"] .invoice-wrapper #billing-sums-total,
html[dir="rtl"] .invoice-wrapper #dom-billing-discount-type,
html[dir="rtl"] .invoice-wrapper #billing-table-section-tax .x-small,
html[dir="rtl"] .invoice-wrapper .invoice-dues .x-payments span,
html[dir="rtl"] .invoice-wrapper #billing-details-amount-due {
    direction: ltr;
    unicode-bidi: isolate;
}

/* tax label: the tax name is data in any language, laid out in its own direction */
html[dir="rtl"] .invoice-wrapper #billing-table-section-tax .billing-sums-tax-container td:first-child {
    unicode-bidi: plaintext;
}

/* dates: the gap between a label and its date is mirrored to the date's right side */
html[dir="rtl"] .invoice .invoice-wrapper .invoice-dates table tr td:nth-child(2),
html[dir="rtl"] .estimate .invoice-wrapper .invoice-dates table tr td:nth-child(2) {
    padding-left: 0;
    padding-right: 25px;
}

html[dir="rtl"] .invoice .invoice-wrapper .invoice-dates table tr td:nth-child(2) span,
html[dir="rtl"] .estimate .invoice-wrapper .invoice-dates table tr td:nth-child(2) span {
    padding-left: 0;
    padding-right: 8px;
}

/* AR-QA-FIX-2 - amount in words row (web bill view): the gap between the label and the amount
   is mirrored to the amount's right side */
html[dir="rtl"] .invoice-wrapper #billing-amount-in-words td:nth-child(2) {
    padding-left: 0;
    padding-right: 15px;
}