/* ──────────────────────────────────────────────────────────────────────────
   Retainr RTL overrides — loaded ONLY when dir="rtl" (Arabic).
   Strategy: keep this file small. dir="rtl" already flips flexbox/grid
   flow, text alignment of paragraphs, and inline content. We only override
   rules that bake LTR-specific direction into the property name itself
   (border-right, translateX, text-align:left, etc.).
   Numeric tables (debit/credit) stay right-aligned regardless of script —
   numbers always read LTR — so we don't touch table.data .num / .bd-num.
   ────────────────────────────────────────────────────────────────────────── */

/* Arabic system font stack — falls back to Inter for Latin chars in mixed strings */
[dir="rtl"] body {
    font-family: 'Segoe UI', 'Tahoma', 'Noto Naskh Arabic', 'Geeza Pro', 'Inter', system-ui, sans-serif;
}

/* Sidebar lives on the right in RTL; flip the divider from right to left */
[dir="rtl"] .sidebar {
    border-right: none;
    border-left: 1px solid var(--line);
}

/* Sidebar collapse button uses margin-left:auto to push it to the end —
   flip to margin-right:auto so it stays at the end in RTL */
[dir="rtl"] .sidebar-collapse-btn {
    margin-left: 0;
    margin-right: auto;
}

/* Dashboard "at a glance" hero — the divider between hero and metric grid
   is a border-right in LTR; move it to the inline-start edge in RTL. The
   decorative radial glow and the metric accent tick are LTR-positioned too. */
[dir="rtl"] .glance-hero {
    border-right: none;
    border-left: 1px solid var(--line);
}
[dir="rtl"] .glance-hero::before {
    right: auto;
    left: -120px;
}
[dir="rtl"] .gm::before {
    left: auto;
    right: 0;
}

/* Arrow indicators (→) should point the reading direction. In RTL, that's ←.
   Mirror via CSS instead of using the actual Unicode ← so we don't fork markup. */
[dir="rtl"] .arrow {
    display: inline-block;
    transform: scaleX(-1);
}
[dir="rtl"] .btn:hover .arrow {
    transform: scaleX(-1) translateX(3px);
}
[dir="rtl"] .btn-auth-primary:hover .arrow {
    transform: scaleX(-1) translateX(3px);
}

/* Inputs/forms with text-align:left should become right-aligned in RTL */
[dir="rtl"] .cmdk-input,
[dir="rtl"] .cmdk-item {
    text-align: right;
}

/* Auth form: keep h2 left-aligned in LTR becomes right in RTL via natural flow,
   but the explicit start-padding on labels needs no change — it's symmetric. */

/* Modal close X usually sits at top-right; in RTL it should sit at top-left */
[dir="rtl"] .modal-close,
[dir="rtl"] .close-x {
    right: auto;
    left: 12px;
}

/* Toast notifications anchored bottom-right → bottom-left in RTL */
[dir="rtl"] .toast-stack {
    right: auto;
    left: 24px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Auth layout flips
   The .auth grid auto-reverses children with dir="rtl" (marketing aside
   ends up on the right, form panel on the left). We just need to flip the
   pieces that bake LTR-specific direction into property names.
   ────────────────────────────────────────────────────────────────────────── */

/* Marketing aside divider: in RTL it sits on the LEFT edge of the aside
   (which is now on the right side of the screen) */
[dir="rtl"] .auth-mkt {
    border-right: none;
    border-left: 1px solid var(--line);
}

/* Decorative gradient blobs in the marketing aside — mirror their corner
   anchors so the visual composition stays symmetric instead of mirrored-off */
[dir="rtl"] .auth-mkt::before {
    right: auto;
    left: -180px;
}
[dir="rtl"] .auth-mkt::after {
    left: auto;
    right: -120px;
}

/* "No account? Create one" sits in the top-OUTER corner of the form panel.
   Form panel is on the RIGHT in LTR (so top-right) and on the LEFT in RTL
   (so top-left) */
[dir="rtl"] .auth-form-top {
    right: auto;
    left: 48px;
}

/* The link sits AFTER the preceding text in reading order; the visual gap
   between them must be on the start-side of the link, which is the right
   in RTL */
[dir="rtl"] .auth-form-top a {
    margin-left: 0;
    margin-right: 8px;
}