/** * RTL (Right-to-Left) Support * Only for: Arabic (ar), Persian (fa), Urdu (ur) * Controlled by [dir="rtl"] attribute on or */ /* Base RTL direction */ [dir="rtl"] { direction: rtl; text-align: right; } /* Buttons */ [dir="rtl"] button, [dir="rtl"] .btn { text-align: center; /* Keep buttons centered */ } [dir="rtl"] button svg, [dir="rtl"] .btn svg { margin-left: 8px; margin-right: 0; } /* Forms */ [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } [dir="rtl"] input[type="number"] { text-align: left; /* Numbers stay LTR */ direction: ltr; } [dir="rtl"] label { text-align: right; } /* Cards */ [dir="rtl"] .card, [dir="rtl"] .task-card, [dir="rtl"] .routine-card { text-align: right; } [dir="rtl"] .card-header, [dir="rtl"] .card-title { text-align: right; } /* Icons - flip horizontal positioning */ [dir="rtl"] .icon-left { margin-left: 8px; margin-right: 0; } [dir="rtl"] .icon-right { margin-right: 8px; margin-left: 0; } /* Lists */ [dir="rtl"] ul, [dir="rtl"] ol { padding-right: 20px; padding-left: 0; } /* Flexbox reversals */ [dir="rtl"] .flex-row { flex-direction: row-reverse; } /* Grid - no change needed, grid handles RTL automatically */ /* Margins and Padding - flip */ [dir="rtl"] .ml-1 { margin-right: 0.25rem; margin-left: 0; } [dir="rtl"] .ml-2 { margin-right: 0.5rem; margin-left: 0; } [dir="rtl"] .ml-3 { margin-right: 1rem; margin-left: 0; } [dir="rtl"] .ml-4 { margin-right: 1.5rem; margin-left: 0; } [dir="rtl"] .mr-1 { margin-left: 0.25rem; margin-right: 0; } [dir="rtl"] .mr-2 { margin-left: 0.5rem; margin-right: 0; } [dir="rtl"] .mr-3 { margin-left: 1rem; margin-right: 0; } [dir="rtl"] .mr-4 { margin-left: 1.5rem; margin-right: 0; } [dir="rtl"] .pl-1 { padding-right: 0.25rem; padding-left: 0; } [dir="rtl"] .pl-2 { padding-right: 0.5rem; padding-left: 0; } [dir="rtl"] .pl-3 { padding-right: 1rem; padding-left: 0; } [dir="rtl"] .pl-4 { padding-right: 1.5rem; padding-left: 0; } [dir="rtl"] .pr-1 { padding-left: 0.25rem; padding-right: 0; } [dir="rtl"] .pr-2 { padding-left: 0.5rem; padding-right: 0; } [dir="rtl"] .pr-3 { padding-left: 1rem; padding-right: 0; } [dir="rtl"] .pr-4 { padding-left: 1.5rem; padding-right: 0; } /* Text alignment overrides */ [dir="rtl"] .text-left { text-align: right !important; } [dir="rtl"] .text-right { text-align: left !important; } /* Float reversals */ [dir="rtl"] .float-left { float: right !important; } [dir="rtl"] .float-right { float: left !important; } /* Border radius - flip corners */ [dir="rtl"] .rounded-l { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir="rtl"] .rounded-r { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Specific component fixes */ [dir="rtl"] .routine-item { text-align: right; } [dir="rtl"] .temperature-input { text-align: left; /* Keep numbers LTR */ direction: ltr; } [dir="rtl"] .date-picker { text-align: left; /* Keep dates LTR */ direction: ltr; } /* Dropdown menus */ [dir="rtl"] .dropdown-menu { right: 0; left: auto; text-align: right; } /* Tooltips */ [dir="rtl"] .tooltip { text-align: right; } /* Navigation */ [dir="rtl"] nav ul { padding-right: 0; } [dir="rtl"] nav li { text-align: right; } /* Tables */ [dir="rtl"] table { direction: rtl; } [dir="rtl"] th, [dir="rtl"] td { text-align: right; } [dir="rtl"] th:first-child, [dir="rtl"] td:first-child { text-align: right; } /* Status badges */ [dir="rtl"] .badge { text-align: center; } /* Checkboxes and radio buttons - keep on right side */ [dir="rtl"] input[type="checkbox"], [dir="rtl"] input[type="radio"] { margin-left: 8px; margin-right: 0; } /* Progress bars */ [dir="rtl"] .progress-bar { direction: ltr; /* Progress fills left to right even in RTL */ } /* Breadcrumbs */ [dir="rtl"] .breadcrumb { direction: rtl; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { padding-right: 0.5rem; padding-left: 0.5rem; content: "/"; } /* Modal dialogs */ [dir="rtl"] .modal-header { text-align: right; } [dir="rtl"] .modal-body { text-align: right; } [dir="rtl"] .modal-footer { justify-content: flex-start; } /* Alerts */ [dir="rtl"] .alert { text-align: right; } /* Pagination */ [dir="rtl"] .pagination { direction: rtl; }