/* ============================================================================
   app-rtl.css — RTL overrides for custom (non-Bootstrap) CSS
   ============================================================================
   Loaded only when the active locale is Arabic (html[dir="rtl"]), on top of
   bootstrap.rtl.min.css. Bootstrap's own utilities (me-*/ms-*, text-start/
   text-end, end-0, flex row ordering, form-switch, etc.) already flip
   correctly via the RTL Bootstrap build — this file only mirrors the
   HAND-WRITTEN left/right rules in app.css that Bootstrap's swap can't touch,
   scoped to the surface the i18n pilot (cases + offices + shared chrome)
   actually renders.
   ============================================================================ */

/* Modal close button (×) — mirror from top-right to top-left.
   Affects .modal-overlay used by the case/office CRUD modals and the
   case archive confirmation modal. */
html[dir="rtl"] .modal-close {
    right: auto;
    left: 1rem;
}

html[dir="rtl"] .delete-confirm-content .modal-close {
    right: auto;
    left: 1rem;
}

/* Breadcrumb divider (_admin.css) — the only physical rule in that block.
   The chevron is a square with a top and a right border rotated 45deg so it
   points along the reading direction; the borders could have been logical, a
   transform cannot be, so the LTR shape is mirrored here.

   scaleX BEFORE rotate, and the order is not interchangeable: the mirror has to
   apply to the ALREADY-rotated chevron. `rotate(45deg) scaleX(-1)` mirrors the
   bare square first, which lands the arrow pointing straight up. */
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    transform: scaleX(-1) rotate(45deg);
}

/* The header search bar's icon prefix had a mirror here and MUST NOT get one
   again. It read:

       html[dir="rtl"] .app-topbar .input-group-text {
           border-right: none;
           border-left: 1px solid var(--topbar-border);
       }

   It was the mirror of an LTR rule that no longer exists — _layout.css says so
   in as many words ("The only survivor is the RTL seam mirror in app-rtl.css"),
   because the twelve white-on-gradient search rules were DELETED with the
   gradient bar rather than recoloured. A mirror of nothing is not neutral: the
   span is the group's FIRST child, so it sits on the LEFT in LTR and on the
   RIGHT in RTL — which means its `border-right` is the SEAM in LTR and the
   OUTER edge in RTL. Removing it therefore struck the outer edge, and the
   search box rendered with no border down its start side and a doubled one at
   the seam, in the DEFAULT locale, in every design.

   Nothing replaces it, because nothing has to: Bootstrap's RTL build already
   gives the input `margin-right: -1px` so the two borders overlap by a pixel,
   in both directions, with every border present. Verified by measuring both:
   the span now reads T1/R1/B1/L1 either way, a mirror image of itself. */

/* Mobile top-bar user-dropdown positioning fix (see _layout.css) was pinned
   to the bar's right edge for LTR; pin to the left for RTL so it stays
   under the (now mirrored) dropdown toggle. The design picker's menu is one
   more dropdown inside the same collapsed menu, so it is placed by these
   rules too — which is why they were renamed rather than rewritten. */
@media (max-width: 991.98px) {
    html[dir="rtl"] .app-topbar .navbar-collapse .dropdown-menu {
        right: auto !important;
        left: 0.5rem !important;
    }

    html[dir="rtl"] .app-topbar .navbar-collapse .dropdown-menu.show {
        right: auto !important;
        left: 0.75rem !important;
    }
}