/* Student Affairs Portal - RTL overrides Loaded on top of main.css when the active language is right-to-left (Arabic). Goal: keep the visual layout symmetric in RTL while preserving the English-flavoured icon glyphs and SVGs. */ html[dir="rtl"] body { /* Almarai already loaded in main.css covers Arabic glyphs nicely. */ text-align: right; } /* ---------------- Layout ---------------- */ html[dir="rtl"] .app-container { /* direction: rtl on already makes flex row flow right-to-left, placing the sidebar (first child) on the right naturally. */ } html[dir="rtl"] .sidebar { box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); } /* Active nav indicator should be on the right edge */ html[dir="rtl"] .nav-item.active { border-left: 0; border-right: 4px solid #63b3ed; } html[dir="rtl"] .nav-item { text-align: right; } /* Logout button alignment */ html[dir="rtl"] .logout-btn { flex-direction: row-reverse; } /* ---------------- Forms & Tables ---------------- */ html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; } html[dir="rtl"] input[type="number"], html[dir="rtl"] input[type="date"], html[dir="rtl"] input[type="datetime-local"], html[dir="rtl"] input[type="time"], html[dir="rtl"] input[type="email"], html[dir="rtl"] input[type="tel"], html[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; } html[dir="rtl"] table { text-align: right; } html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; } html[dir="rtl"] .table-wrap th, html[dir="rtl"] .table-wrap td { text-align: right; } /* Numerical / monetary cells should remain LTR for readability */ html[dir="rtl"] .num, html[dir="rtl"] .amount, html[dir="rtl"] .money, html[dir="rtl"] .currency { direction: ltr; unicode-bidi: embed; } /* ---------------- Mobile sidebar ---------------- */ @media (max-width: 768px) { html[dir="rtl"] .sidebar { left: auto; right: -280px; transition: right 0.3s ease; } html[dir="rtl"] .sidebar.open { left: auto; right: 0; } html[dir="rtl"] .sidebar-overlay { left: auto; right: 0; } html[dir="rtl"] .mobile-header { flex-direction: row-reverse; } } /* ---------------- Page header rows ---------------- */ html[dir="rtl"] .page-header-row, html[dir="rtl"] .page-header { text-align: right; } html[dir="rtl"] .page-header-row { flex-direction: row-reverse; } html[dir="rtl"] .page-header-left { text-align: right; } html[dir="rtl"] .page-header-right { text-align: left; } /* ---------------- Section cards / dashboards ---------------- */ html[dir="rtl"] .section-header, html[dir="rtl"] .section-card, html[dir="rtl"] .stat-card, html[dir="rtl"] .action-card, html[dir="rtl"] .recent-item, html[dir="rtl"] .item-info { text-align: right; } html[dir="rtl"] .recent-item { flex-direction: row-reverse; } html[dir="rtl"] .stat-card, html[dir="rtl"] .action-card { /* Items inside stat/action cards line up right-to-left */ } /* ---------------- Buttons & alignment ---------------- */ html[dir="rtl"] .btn, html[dir="rtl"] .btn-primary, html[dir="rtl"] .btn-outline, html[dir="rtl"] .btn-danger, html[dir="rtl"] .btn-sm { /* Buttons stay center-aligned by default. */ } /* ---------------- Notifications ---------------- */ html[dir="rtl"] .notification-badge { margin-left: 0; margin-right: auto; } html[dir="rtl"] .notification-item-title, html[dir="rtl"] .notification-item-preview, html[dir="rtl"] .notification-item-time { text-align: right; } /* ---------------- Lists / nav section labels ---------------- */ html[dir="rtl"] .nav-section-label { text-align: right; padding-right: 20px; padding-left: 0; } /* ---------------- Sidebar header (X close button) ---------------- */ html[dir="rtl"] .sidebar-header { flex-direction: row-reverse; } /* ---------------- Footer ---------------- */ html[dir="rtl"] .portal-footer { text-align: center; } /* ---------------- User info inside sidebar footer ---------------- */ html[dir="rtl"] .user-info { flex-direction: row-reverse; text-align: right; } /* ---------------- Generic alignment helpers used in templates ---------------- */ html[dir="rtl"] [style*="text-align: left"], html[dir="rtl"] [style*="text-align:left"] { text-align: right !important; } html[dir="rtl"] [style*="text-align: right"], html[dir="rtl"] [style*="text-align:right"] { text-align: left !important; } /* Filter bar / search row */ html[dir="rtl"] .filters-row, html[dir="rtl"] .filter-row, html[dir="rtl"] .toolbar { flex-direction: row-reverse; } /* Login screen alignment fixes */ html[dir="rtl"] .login-card, html[dir="rtl"] .login-form, html[dir="rtl"] .login-header, html[dir="rtl"] .login-footer { text-align: center; } html[dir="rtl"] .login-form .form-group { text-align: right; } /* Form errors / messages */ html[dir="rtl"] .alert, html[dir="rtl"] .errorlist, html[dir="rtl"] .helptext { text-align: right; } /* Status pills */ html[dir="rtl"] .item-badge, html[dir="rtl"] .status-badge { direction: rtl; }