/* ============================================
   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);
}