/* ============================================
   RTL (Right-to-Left) Support - Minimal & Safe
   Works with the existing flexbox layout (.app, .sidebar, .main)
   ============================================ */

/* Root direction - flexbox handles sidebar positioning automatically */
html[dir="rtl"] {
    direction: rtl;
}

html[dir="rtl"] body {
    direction: rtl;
}

/* Arabic font support */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] button,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* ============================================
   Sidebar border - flip to the opposite side in RTL
   (the app already uses flexbox; no margin needed)
   ============================================ */

html[dir="rtl"] .sidebar {
    border-right: none;
    border-left: 1px solid var(--border, #e0e0e0);
}

/* ============================================
   Form inputs - Right-align text in Arabic
   ============================================ */

html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

/* Keep date/time inputs LTR for browser compatibility */
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="time"],
html[dir="rtl"] input[type="datetime-local"] {
    direction: ltr;
    text-align: left;
}

/* ============================================
   Tables - Right-align text
   ============================================ */

html[dir="rtl"] table {
    text-align: right;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
    text-align: right;
}

/* Keep numeric/currency cells LTR-friendly */
html[dir="rtl"] td.numeric,
html[dir="rtl"] td.currency,
html[dir="rtl"] td.money {
    text-align: left;
    direction: ltr;
}

/* ============================================
   Dropdowns - Position correctly in RTL
   ============================================ */

html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

/* ============================================
   Margin/Padding utility classes (Bootstrap)
   ============================================ */

html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }

/* ============================================
   Keep specific elements LTR (numbers, codes, etc.)
   ============================================ */

html[dir="rtl"] .ltr-text {
    direction: ltr;
    text-align: left;
}

html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] kbd {
    direction: ltr;
    text-align: left;
}

/* ============================================
   Topbar adjustments
   ============================================ */

html[dir="rtl"] .topbar .search {
    direction: rtl;
}

html[dir="rtl"] .topbar .search input {
    text-align: right;
}

/* ============================================
   Breadcrumbs - keep separator icons visible
   ============================================ */

html[dir="rtl"] .breadcrumb .la-angle-right {
    transform: rotate(180deg);
}

html[dir="rtl"] .breadcrumb .las.la-angle-right {
    transform: rotate(180deg);
}

/* ============================================================================
   REDESIGN SHELL — RTL refinements (clay design system)
   Appended for the v2 redesign. All rules are html[dir="rtl"]-scoped so the
   English (LTR) layout is completely unaffected.
   ============================================================================ */

/* ---- sidebar: chevrons point to the reading-start edge -------------------- */
html[dir="rtl"] .nav-head .chev { transform: scaleX(-1); }
html[dir="rtl"] .nav-group.open > .nav-head .chev { transform: rotate(90deg); }
/* submenu indent + solo alignment flip to the right */
html[dir="rtl"] .nav-sub li a { padding: 7px 45px 7px 12px; }
html[dir="rtl"] .nav-head { text-align: right; }
/* menu label must hug the reading-start (right) edge next to its icon in RTL;
   the base rule (.nav-head .label{text-align:left}) otherwise leaves short Arabic
   labels drifting away from the icon. */
html[dir="rtl"] .nav-head .label { text-align: right; }
html[dir="rtl"] [data-nav="flat"] .nav-sub li a.active::before { left: auto; right: 18px; }

/* ---- topbar: user/notification popovers + search --------------------------- */
html[dir="rtl"] .menu-pop { right: auto; left: 24px; }
html[dir="rtl"] .icon-btn .dot { right: auto; left: 8px; }

/* ---- toasts / notes: slide in from the left, border flips to the right ----- */
html[dir="rtl"] .toasts { right: auto; left: 18px; }
html[dir="rtl"] .toast { border-left-width: 1px; border-right-width: 4px; }
html[dir="rtl"] .note  { border-left-width: 1px; border-right-width: 4px; }

/* ---- KPI cards: icon + accent bar to the reading-start edge ---------------- */
html[dir="rtl"] .kpi .k-icon { right: auto; left: 16px; }
html[dir="rtl"] [data-kpi="outline"] .kpi::before { left: auto; right: 0; }

/* ---- native select caret + form select arrow ------------------------------ */
html[dir="rtl"] .select { background-position: left 13px center; padding: 0 13px 0 32px; }
html[dir="rtl"] .form-select { background-position: left 0.75rem center; padding-right: 0.75rem; padding-left: 2.25rem; }

/* ---- pagination arrows: mirror first/last glyphs --------------------------- */
html[dir="rtl"] .custom-pagination li:first-child .page-btn,
html[dir="rtl"] .custom-pagination li:last-child .page-btn { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] .pager button:first-child i,
html[dir="rtl"] .pager button:last-child i { display: inline-block; transform: scaleX(-1); }

/* ---- data table: actions column aligns to reading-end --------------------- */
html[dir="rtl"] table.data td.actions { text-align: left; }
html[dir="rtl"] table.data thead th { text-align: right; }

/* ---- generic directional arrow icons beside buttons/links ------------------ */
html[dir="rtl"] .btn .la-arrow-right,
html[dir="rtl"] .btn .la-arrow-left,
html[dir="rtl"] .la-long-arrow-alt-right { transform: scaleX(-1); }

/* ---- Bug 3: directional sign-in / sign-out icons (e.g. the header profile
   dropdown "Logout") carry a horizontal arrow that must point to the
   reading-end (left) edge in Arabic. Mirror them in RTL only, same pattern as
   the arrow icons above. display:inline-block so the transform applies to the
   inline <i>. English/LTR is untouched (rule is html[dir="rtl"]-scoped). ---- */
html[dir="rtl"] .la-sign-out-alt,
html[dir="rtl"] .la-sign-in-alt { display: inline-block; transform: scaleX(-1); }

/* ---- login: lead icon, reveal eye, hero glow, submit arrow ---------------- */
html[dir="rtl"] .login-card .field .ip > i.lead-ic { left: auto; right: 13px; }
html[dir="rtl"] .login-card .field .ip > input { padding-left: 13px; padding-right: 38px; }
html[dir="rtl"] .login-card .field .ip > i.reveal { right: auto; left: 13px; }
html[dir="rtl"] .login-aside .g-a { right: auto; left: -80px; }
html[dir="rtl"] .login-aside .g-b { left: auto; right: -70px; }

/* ---- panel accent underline stays full-width in both directions ------------ */
html[dir="rtl"] .table-search { direction: rtl; }

/* ============================================================================
   ARABIC TYPOGRAPHY — the theme's display fonts (Newsreader serif / Hanken
   Grotesk) have no Arabic glyphs, so Arabic headings fell back inconsistently.
   Force Cairo on display/heading elements in RTL for a native Arabic feel.
   (Brand lockups are [data-no-translate] English spans and are left untouched.)
   ============================================================================ */
html[dir="rtl"] .page-title,
html[dir="rtl"] .page-desc,
html[dir="rtl"] .k-value,
html[dir="rtl"] .k-label,
html[dir="rtl"] .login-card h2,
html[dir="rtl"] .login-card .sub,
html[dir="rtl"] .login-aside .pitch h1,
html[dir="rtl"] .login-aside .pitch p,
html[dir="rtl"] .panel-head .pt,
html[dir="rtl"] .card-head h3,
html[dir="rtl"] .section-label,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5 {
    font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}