/* ============================================================================
   RTL layout overrides — Arabic i18n Path A (hand-authored, gated).

   Loaded ONLY when the server renders dir=rtl (Arabic on an i18n-opted-in app),
   via a conditional <link> in server/templates/base/includes/_theme.html. Every
   rule is scoped under [dir="rtl"], so even if the file were always present it is
   inert on LTR pages — the selectors simply never match. This is the
   compartmentalisation guarantee: zero effect on the 26 LTR apps.

   Scope = structural/directional flips for the Tailwind *physical* utilities
   actually used in the templates (ml/mr/pl/pr/text-left|right/left/right/
   space-x/border-l/rounded-l|r) + the sidebar collapse rules. The main grid
   layout mirrors for free (CSS Grid follows `dir`). Deep per-component polish is
   deferred to the proper RTLCSS build (Path B). Higher specificity ([dir=rtl]
   prefix) beats the single-class Tailwind utilities regardless of source order.
   ============================================================================ */

/* ---- Text alignment (explicit overrides; unstyled text flows RTL for free) -- */
[dir="rtl"] .text-left  { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* ---- Horizontal margins: physical -> mirrored ---- */
[dir="rtl"] .ml-1   { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .ml-2   { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .ml-3   { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .ml-4   { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .ml-5   { margin-left: 0; margin-right: 1.25rem; }
[dir="rtl"] .ml-6   { margin-left: 0; margin-right: 1.5rem; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-1   { margin-right: 0; margin-left: 0.25rem; }
[dir="rtl"] .mr-2   { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .mr-3   { margin-right: 0; margin-left: 0.75rem; }
[dir="rtl"] .mr-4   { margin-right: 0; margin-left: 1rem; }

/* ---- Horizontal padding: physical -> mirrored ---- */
[dir="rtl"] .pl-2   { padding-left: 0; padding-right: 0.5rem; }
[dir="rtl"] .pl-3   { padding-left: 0; padding-right: 0.75rem; }
[dir="rtl"] .pl-4   { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pl-6   { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .pl-10  { padding-left: 0; padding-right: 2.5rem; }
[dir="rtl"] .pr-1   { padding-right: 0; padding-left: 0.25rem; }
[dir="rtl"] .pr-4   { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .pr-6   { padding-right: 0; padding-left: 1.5rem; }

/* ---- space-x-* : flip the inter-child gap side for EVERY size at once, by
   overriding Tailwind's --tw-space-x-reverse variable on the affected children.
   (Higher specificity than Tailwind's own `.space-x-N > :not ~ :not` rule.) ---- */
[dir="rtl"] [class*="space-x-"] > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

/* ---- Absolute positioning (icons inside inputs, corner badges) ---- */
[dir="rtl"] .left-0  { left: auto;  right: 0; }
[dir="rtl"] .left-1  { left: auto;  right: 0.25rem; }
[dir="rtl"] .left-4  { left: auto;  right: 1rem; }
[dir="rtl"] .right-0 { right: auto; left: 0; }
[dir="rtl"] .right-4 { right: auto; left: 1rem; }

/* ---- Left accent borders (card / alert stripes) -> right ---- */
[dir="rtl"] .border-l-2 { border-left-width: 0; border-right-width: 2px; }
[dir="rtl"] .border-l-4 { border-left-width: 0; border-right-width: 4px; }

/* ---- One-sided corner radii ---- */
[dir="rtl"] .rounded-l-md {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem;
}
[dir="rtl"] .rounded-r-md {
  border-top-right-radius: 0; border-bottom-right-radius: 0;
  border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem;
}

/* ---- Sidebar collapse: the grid places the sidebar column on the RIGHT for
   free under dir=rtl, but the pre-paint collapse rules in _theme.html tuck it
   off-screen with physical margin-left/left (!important). Mirror them so the
   drawer tucks to the right. dir + pre-menu-closed are both on <html>. ---- */
[dir="rtl"].pre-menu-closed .side-menu {
  margin-left: 0 !important;
  margin-right: -280px !important;
}
@media (max-width: 768px) {
  [dir="rtl"].pre-menu-closed .side-menu {
    left: auto !important;
    right: -280px !important;
    margin-right: 0 !important;
  }
}

/* ---- Runtime sidebar collapse (list.html grid). The grid column flips to the
   RIGHT for free under dir=rtl, but the collapse tucks the drawer with a PHYSICAL
   margin-left/left, which in RTL shoves the menu leftward INTO the content (the
   "content overlays the menu" symptom). Mirror to margin-right/right so the drawer
   tucks off the RIGHT edge and the content column reflows. Higher specificity than
   the page's single-/double-class rules, so no !important needed. ---- */
[dir="rtl"] .menu-closed .side-menu {
  margin-left: 0;
  margin-right: -280px;
}

@media (max-width: 768px) {
  /* Mobile drawer is position:fixed and slid with `left`; anchor it to the right. */
  [dir="rtl"] .side-menu {
    left: auto;
    right: -280px;
    transition: right 0.3s ease;
  }
  [dir="rtl"] .menu-open .side-menu {
    left: auto;
    right: 0;
    margin-right: 0;
  }
  [dir="rtl"] .menu-closed .side-menu {
    left: auto;
    right: -280px;
    margin-right: 0;
  }
}