/* ================================================================ RTL / Arabic Language Overrides Applied when lang=ar (dir="rtl" on ) ================================================================ */ /* Use Arabic font family */ body { font-family: 'Noto Kufi Arabic', 'IBM Plex Sans', sans-serif; } .sidebar-nav-item, .tree-module-header, .tree-class-header, .tree-lecture, .sidebar-course-label, .lecture-breadcrumb, .login-form label, .dashboard-greeting, .dashboard-subtitle, .badge, .topbar-title, .btn, .announcement-title, .announcement-meta, .section-title { font-family: 'Noto Kufi Arabic', 'JetBrains Mono', monospace; } /* Flip sidebar to right side */ .sidebar { border-right: none; border-left: 1px solid var(--border); order: 2; } .main-content { order: 1; } /* Sidebar nav item active indicator */ .sidebar-nav-item { border-left: none; border-right: 2px solid transparent; } .sidebar-nav-item.active { border-left: none; border-right-color: var(--accent-green); } .tree-lecture { border-left: none; border-right: 2px solid transparent; padding-left: 16px; padding-right: 44px; } .tree-lecture.active { border-left: none; border-right-color: var(--accent-green); } /* Tree indent for RTL */ .tree-class-header { padding-left: 16px; padding-right: 28px; } /* Lecture header breadcrumb */ .bc-sep { transform: scaleX(-1); display: inline-block; } /* Topbar reversed */ .topbar-left { flex-direction: row-reverse; } .topbar-sep { display: none; } /* Sidebar toggle still works on right-side sidebar */ .app-body { flex-direction: row-reverse; } /* Progress grid text align */ .progress-card-header { flex-direction: row-reverse; } .progress-bar-fill { background: linear-gradient(270deg, var(--accent-green), var(--accent-cyan)); } /* Login card align */ .login-form { direction: rtl; } .login-logo, .login-title, .login-subtitle { direction: rtl; } .login-status { flex-direction: row-reverse; } /* Announcement header */ .announcement-header { flex-direction: row-reverse; } /* Table text */ .student-table th, .student-table td { text-align: right; } /* Toast from left */ .toast-container { right: auto; left: 24px; } .toast { transform: translateX(-110%); } .toast.show { transform: translateX(0); } /* Input text direction */ input, textarea { text-align: right; } input[type="password"] { text-align: left; direction: ltr; }