/* RTL Layout Overrides */
[dir="rtl"] .ms-1, [dir="rtl"] .ms-2, [dir="rtl"] .ms-3, [dir="rtl"] .ms-4, [dir="rtl"] .ms-5 {
    margin-left: 0 !important;
}
[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; }
[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; }
[dir="rtl"] .ms-3 { margin-right: 1rem !important; }
[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; }
[dir="rtl"] .ms-5 { margin-right: 3rem !important; }

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

[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end { text-align: left !important; }

[dir="rtl"] .ps-1, [dir="rtl"] .ps-2, [dir="rtl"] .ps-3, [dir="rtl"] .ps-4, [dir="rtl"] .ps-5 {
    padding-left: 0 !important;
}
[dir="rtl"] .ps-1 { padding-right: 0.25rem !important; }
[dir="rtl"] .ps-2 { padding-right: 0.5rem !important; }
[dir="rtl"] .ps-3 { padding-right: 1rem !important; }
[dir="rtl"] .ps-4 { padding-right: 1.5rem !important; }
[dir="rtl"] .ps-5 { padding-right: 3rem !important; }

[dir="rtl"] .pe-1, [dir="rtl"] .pe-2, [dir="rtl"] .pe-3, [dir="rtl"] .pe-4, [dir="rtl"] .pe-5 {
    padding-right: 0 !important;
}
[dir="rtl"] .pe-1 { padding-left: 0.25rem !important; }
[dir="rtl"] .pe-2 { padding-left: 0.5rem !important; }
[dir="rtl"] .pe-3 { padding-left: 1rem !important; }
[dir="rtl"] .pe-4 { padding-left: 1.5rem !important; }
[dir="rtl"] .pe-5 { padding-left: 3rem !important; }

/* Flip chevron/arrow icons */
[dir="rtl"] .bi-arrow-right::before { content: "\f12f"; /* arrow-left */ }
[dir="rtl"] .bi-arrow-left::before { content: "\f138"; /* arrow-right */ }
[dir="rtl"] .bi-chevron-right::before { content: "\f284"; /* chevron-left */ }
[dir="rtl"] .bi-chevron-left::before { content: "\f285"; /* chevron-right */ }

/* Form inputs */
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select {
    text-align: right;
}

/* Sidebar */
[dir="rtl"] .sidebar { right: 0; left: auto; }