/* ============================================================
   RTL polish — Arabic (dir="rtl") only.
   One central place for right-to-left fixes that the framework
   (bootstrap.rtl + common-theme) doesn't handle: directional icon
   mirroring and dialog/panel close-button placement. Everything is
   guarded by [dir="rtl"] so LTR is never touched.
   ============================================================ */

/* ── 1. Directional icons ────────────────────────────────────
   Font Awesome / Line Awesome glyphs are NOT auto-mirrored in RTL,
   so a "back" arrow, chevron, send/reply, etc. keeps pointing the
   LTR way and reads as wrong / "rotated". Mirror only the icons that
   are genuinely direction-bearing; symmetric icons (search, refresh,
   check, gear, calendar, …) are deliberately left alone so they don't
   flip for no reason. */
[dir="rtl"] .fa-angle-left,      [dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angles-left,     [dir="rtl"] .fa-angles-right,
[dir="rtl"] .fa-angle-double-left,  [dir="rtl"] .fa-angle-double-right,
[dir="rtl"] .fa-chevron-left,    [dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-circle-left, [dir="rtl"] .fa-chevron-circle-right,
[dir="rtl"] .fa-caret-left,      [dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-arrow-left,      [dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left-long, [dir="rtl"] .fa-arrow-right-long,
[dir="rtl"] .fa-long-arrow-left, [dir="rtl"] .fa-long-arrow-right,
[dir="rtl"] .fa-long-arrow-alt-left, [dir="rtl"] .fa-long-arrow-alt-right,
[dir="rtl"] .fa-arrow-left-from-bracket, [dir="rtl"] .fa-arrow-right-from-bracket,
[dir="rtl"] .fa-left-from-bracket,  [dir="rtl"] .fa-right-from-bracket,
[dir="rtl"] .fa-arrow-right-to-bracket, [dir="rtl"] .fa-arrow-left-to-bracket,
[dir="rtl"] .fa-sign-in,         [dir="rtl"] .fa-sign-out,
[dir="rtl"] .fa-sign-in-alt,     [dir="rtl"] .fa-sign-out-alt,
[dir="rtl"] .fa-paper-plane,     [dir="rtl"] .fa-reply,
[dir="rtl"] .fa-reply-all,       [dir="rtl"] .fa-share,
[dir="rtl"] .fa-share-from-square, [dir="rtl"] .fa-mail-forward,
[dir="rtl"] .fa-mail-reply,      [dir="rtl"] .fa-forward,
[dir="rtl"] .fa-backward,        [dir="rtl"] .fa-hand-point-left,
[dir="rtl"] .fa-hand-point-right, [dir="rtl"] .fa-quote-left,
[dir="rtl"] .fa-quote-right,     [dir="rtl"] .fa-indent,
[dir="rtl"] .fa-outdent,         [dir="rtl"] .fa-turn-up,
[dir="rtl"] .fa-arrow-turn-up,   [dir="rtl"] .fa-diagram-next {
  transform: scaleX(-1);
}
/* Icons that keep spinning must not carry a static mirror transform
   (it would fight the animation) — the mirror is purely visual here. */
[dir="rtl"] .fa-spin { transform: none; }

/* ── 2. Dialog / panel close button ("✕") ────────────────────
   common-theme pins .panel-titlebar-close with `margin-left:auto`
   (a PHYSICAL property). In RTL that pushes the ✕ to the right — the
   same edge the Arabic title starts on — so they overlap. Flip it to
   the logical trailing edge (the left, in RTL) so the ✕ sits opposite
   the title exactly like it does in LTR. */
[dir="rtl"] .panel-titlebar-close {
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-right: 0;
  padding-left: 0;
}
/* Keep the RTL title clear of the ✕ so long Arabic titles never run
   underneath it. */
[dir="rtl"] .panel-titlebar > .panel-titlebar-text,
[dir="rtl"] .panel-titlebar > .title-text {
  padding-left: 2.25rem;
  padding-right: 0;
}
/* jQuery-UI dialog variant (used by a few framework dialogs). */
[dir="rtl"] .ui-dialog-titlebar-close {
  right: auto;
  left: 0.3em;
}
[dir="rtl"] .ui-dialog-titlebar { padding-left: 2.5em; padding-right: 1em; }
/* Bootstrap modal close — bootstrap.rtl already flips the margin, but
   guarantee it never rides under the RTL title. */
[dir="rtl"] .modal-header .btn-close {
  margin-left: 0;
  margin-right: auto;
}

/* ── 2b. "Apply changes" button label ────────────────────────
   overrides.css injects the label via CSS `content:"Apply"` (Serenity
   gives this button no title text, so it can't be localized through
   LocalText). Swap it for Arabic in RTL so it isn't the one English
   word left on every builder/dialog toolbar. */
[dir="rtl"] .apply-changes-button .button-inner::after,
:lang(ar) .apply-changes-button .button-inner::after {
  content: "حفظ وتحديث";
}

/* ── 3. Small RTL polish ─────────────────────────────────────
   Toolbar action icons sit before their label; give them trailing
   (left, in RTL) spacing instead of the LTR right margin so buttons
   don't look cramped. */
[dir="rtl"] .tool-button .fa,
[dir="rtl"] .s-Toolbar .tool-button > i {
  margin-right: 0;
  margin-left: 0.35rem;
}

/* ── 4. Pager nav arrows ─────────────────────────────────────
   The grid pager draws first/prev/next/last as Font-Awesome glyphs via
   `content:"\f100…\f105"` on `.slick-pg-* > span::before` (NOT .fa-*
   classes, so §1 doesn't reach them). In RTL "first/prev" live on the
   right and "next/last" on the left, so the angle glyphs point the wrong
   way — mirror them. */
[dir="rtl"] .slick-pg-first > span:before,
[dir="rtl"] .slick-pg-prev  > span:before,
[dir="rtl"] .slick-pg-next  > span:before,
[dir="rtl"] .slick-pg-last  > span:before {
  display: inline-block;
  transform: scaleX(-1);
}

/* ── 5. Toolbar button group corners ─────────────────────────
   Tool buttons form a joined pill: the visually-FIRST button rounds its
   leading edge, the visually-LAST its trailing edge (common-theme uses
   :first/:last-child; overrides.css rounds the first/last *visible* one).
   All of that is expressed with PHYSICAL left/right radii + a
   `margin-left:-1px` border-collapse, so under RTL the rounded corners
   and the seam land on the wrong sides. Flip them. */
[dir="rtl"] .tool-button { margin-left: 0; margin-right: -1px; }
/* common-theme :first/:last-child */
[dir="rtl"] .tool-button:first-child {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius);
}
[dir="rtl"] .tool-button:last-child {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius);
}
/* overrides.css "last visible" → in RTL it's the leftmost, so round LEFT */
[dir="rtl"] .tool-group > .tool-button:not([hidden]):not(.hidden):not(:has(~ .tool-button:not([hidden]):not(.hidden))) {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  border-top-left-radius: var(--bs-border-radius); border-bottom-left-radius: var(--bs-border-radius);
}
/* overrides.css "first visible" → in RTL it's the rightmost, so round RIGHT */
[dir="rtl"] .tool-group > .tool-button:not([hidden]):not(.hidden):not(.tool-button:not([hidden]):not(.hidden) ~ .tool-button) {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-top-right-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius);
}

/* ── 6. Grid page-title ✕ (window close) ─────────────────────
   The shell floats a fixed ✕ at the page's top-RIGHT (right:33px). In
   LTR the grid/panel title is top-left, so they never meet — but in RTL
   the title is top-right too, so the ✕ lands right on top of it. Move
   the ✕ to the top-left in RTL (mirrors where the detail panel's own ✕
   renders). */
[dir="rtl"] .s-window-close { right: auto; left: 33px; }

/* ── 7. Desktop-shell sidebar flyout (RTL) ───────────────────
   The Start-menu flyout submenus are `position:fixed`. sidebar.css keeps
   a `transform: translateX(0)` on the expanded sidebar, and in RTL its
   selector out-specifies taskbar.css's `transform:none`, so the transform
   survives — which makes it the containing block for the fixed flyout,
   pushing the submenu ~1300px off-screen (invisible). Drop the transform
   in RTL desktop-shell so fixed flyouts anchor to the viewport again. */
[dir="rtl"] body.s-desktop-shell.s-sidebar-expanded .s-sidebar,
[dir="rtl"] body.s-desktop-shell .s-sidebar {
  transform: none !important;
}