/* ==========================================================================
   Coject — Opus RTL (Arabic) adjustments
   Loaded on every _LayoutOpus page (translation.js adds it when the layout has
   no <link> to it). Active only while <html dir="rtl"> — translation.js sets
   dir="rtl" / lang="ar" for Arabic and dir="ltr" / lang="en" for English.
   layout-opus.css / page CSS already use logical properties (inline-start/end),
   so the grid, sidebar, menus and paddings flip by themselves; this file only
   fixes what logical properties cannot.
   ========================================================================== */

/* Arabic typeface everywhere (code / version text keeps the mono font) */
html[dir="rtl"] body.cj-body { font-family: var(--cj-font-ar); }
html[dir="rtl"] body.cj-body .cj-mono-font,
html[dir="rtl"] body.cj-body code,
html[dir="rtl"] body.cj-body .cj-kbd { font-family: var(--cj-font-mono); }

/* Arabic letters are joined — never letter-space or upper-case them */
html[dir="rtl"] body.cj-body .cj-ov,
html[dir="rtl"] body.cj-body .cj-todo,
html[dir="rtl"] body.cj-body .cj-link,
html[dir="rtl"] body.cj-body .cj-ddate small { letter-spacing: 0; text-transform: none; }
html[dir="rtl"] body.cj-body h1, html[dir="rtl"] body.cj-body h2,
html[dir="rtl"] body.cj-body h3, html[dir="rtl"] body.cj-body .cj-dkpi-v { letter-spacing: 0; }

/* italic Arabic reads badly */
html[dir="rtl"] .cj-status .cj-st-c { font-style: normal; }

/* hero: the light / dark glow follows the chevron to the left */
html[dir="rtl"] body.cj-body .cj-phero { background: radial-gradient(90% 170% at 12% 120%, #DDF4EC 0%, #EEF8F5 38%, #F7F8FC 70%, #FFFFFF 100%); }
html[dir="rtl"] body.cj-body.dark .cj-phero { background: radial-gradient(90% 160% at 15% 120%, #00015D 0%, #090B45 45%, #12153A 80%); }

/* directional icons point the reading way */
html[dir="rtl"] .cj-dhero-act #aContinueProject .cj-ic { transform: scaleX(-1); }

/* charts: time runs right → left like the bars / heatmap (flex already flips) */
html[dir="rtl"] .cj-spark { transform: scaleX(-1); }

/* top bar tooltips + account menu open toward the page */
html[dir="rtl"] .cj-app .cj-top .cj-menu { right: auto; left: 0; }
html[dir="rtl"] .cj-app .cj-top li.cj-me #notfyAnnouncement { right: auto; left: 0; }

/* native selects / legacy selects: arrow on the left */
html[dir="rtl"] body.cj-body select.coject-select { padding: 0 14px 0 38px; background-position: left 12px center; }
html[dir="rtl"] .cj-select { background-position: left 12px center; }

/* brand dropdown check mark sits on the left */
html[dir="rtl"] .cj-dd-item.sel::after { transform: rotate(-45deg) translate(-2px, -2px); }

/* project / recent cards: names stay right-aligned */
html[dir="rtl"] .cj-pcard h3, html[dir="rtl"] .cj-dpcard h3 { text-align: right; }

/* list view meta column */
html[dir="rtl"] .cj-pgrid.cj-list .cj-pcard-meta { align-items: flex-start; }

/* modals: Bootstrap LTR leftovers */
html[dir="rtl"] body.cj-body .modal-header .btn-close { margin-inline-start: auto !important; margin-inline-end: 0 !important; }
html[dir="rtl"] body.cj-body .form-check-input { float: none; }

/* validation messages + tour */
html[dir="rtl"] body.cj-body span.error { text-align: right; }
html[dir="rtl"] .tour-tooltip { direction: rtl; text-align: right; }

/* Kendo widgets get .k-rtl on <body> from translation.js — keep the text start-aligned */
html[dir="rtl"] body.cj-body .k-dropdown .k-input { text-align: right; }
html[dir="rtl"] body.cj-body .k-animation-container .k-list .k-item { text-align: right; }

/* SweetAlert / notify boxes */
html[dir="rtl"] .swal2-popup { direction: rtl; font-family: var(--cj-font-ar); }
html[dir="rtl"] [data-notify="container"] { direction: rtl; text-align: right; }