/** * MEDIGATE AI — RTL & Localization Stylesheet v4.0 * * Include this file in your HTML . * All rules are scoped to [dir="rtl"] so they only activate in Arabic mode. * English (LTR) is untouched. * * Usage: * */ /* ═══════════════════════════════════════════════ SIDEBAR ═══════════════════════════════════════════════ */ [dir="rtl"] .sidebar, [dir="rtl"] .side-nav, [dir="rtl"] nav.sidebar, [dir="rtl"] #sidebar { left: auto !important; right: 0 !important; border-right: none !important; border-left: 1px solid var(--border, rgba(255,255,255,0.07)) !important; } [dir="rtl"] .main-content, [dir="rtl"] .app-content, [dir="rtl"] #main-content, [dir="rtl"] .page-wrapper { margin-left: 0 !important; margin-right: var(--sidebar-width, 240px) !important; padding-left: 0 !important; padding-right: 0 !important; } /* Mobile: sidebar stays hidden until open */ @media (max-width: 768px) { [dir="rtl"] .main-content, [dir="rtl"] #main-content { margin-right: 0 !important; } [dir="rtl"] .sidebar.open, [dir="rtl"] .side-nav.open { left: auto !important; right: 0 !important; } } /* ═══════════════════════════════════════════════ NAVIGATION ITEMS ═══════════════════════════════════════════════ */ [dir="rtl"] .nav-item, [dir="rtl"] .sidebar-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .nav-item .nav-icon, [dir="rtl"] .sidebar-item .nav-icon { margin-right: 0; margin-left: 12px; } /* ═══════════════════════════════════════════════ GLOBAL TEXT ALIGNMENT ═══════════════════════════════════════════════ */ [dir="rtl"] body, [dir="rtl"] .page-inner, [dir="rtl"] .card, [dir="rtl"] p, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] span, [dir="rtl"] label { text-align: right; } [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select { text-align: right; direction: rtl; } /* ═══════════════════════════════════════════════ FLEX ROW REVERSAL ═══════════════════════════════════════════════ */ [dir="rtl"] .setting-row, [dir="rtl"] .card-header, [dir="rtl"] .card-footer, [dir="rtl"] .flex-row, [dir="rtl"] .row, [dir="rtl"] .toolbar, [dir="rtl"] .header-bar { flex-direction: row-reverse; } /* ═══════════════════════════════════════════════ ICON MIRRORING (directional icons only) ═══════════════════════════════════════════════ */ [dir="rtl"] .icon-arrow-right, [dir="rtl"] .icon-chevron-right, [dir="rtl"] .icon-next, [dir="rtl"] .icon-back, [dir="rtl"] .btn-back svg, [dir="rtl"] .icon-forward { transform: scaleX(-1); } /* ═══════════════════════════════════════════════ INPUT PREFIX/SUFFIX ICONS ═══════════════════════════════════════════════ */ [dir="rtl"] .input-wrapper .prefix-icon, [dir="rtl"] .input-prefix { left: auto !important; right: 12px !important; } [dir="rtl"] .input-wrapper .suffix-icon, [dir="rtl"] .input-suffix { right: auto !important; left: 12px !important; } [dir="rtl"] input.has-prefix { padding-left: 12px !important; padding-right: 40px !important; } /* ═══════════════════════════════════════════════ SETTINGS PAGE ═══════════════════════════════════════════════ */ [dir="rtl"] #page-settings .setting-row { flex-direction: row-reverse; text-align: right; } [dir="rtl"] #page-settings .setting-info { text-align: right; } [dir="rtl"] #page-settings .settings-section-title { text-align: right; padding-right: 18px; padding-left: 0; } [dir="rtl"] .mg-notif-sub-row { flex-direction: row-reverse; text-align: right; padding-right: 32px; padding-left: 18px; } /* ═══════════════════════════════════════════════ HOME PAGE ═══════════════════════════════════════════════ */ [dir="rtl"] .home-greeting, [dir="rtl"] .home-section, [dir="rtl"] .home-card, [dir="rtl"] .quick-actions { text-align: right; } [dir="rtl"] .home-section-header { flex-direction: row-reverse; } /* ═══════════════════════════════════════════════ STUDY PAGE ═══════════════════════════════════════════════ */ [dir="rtl"] .study-card, [dir="rtl"] .topic-card { text-align: right; } [dir="rtl"] .study-tabs { direction: rtl; } [dir="rtl"] .tab-btn { flex-direction: row-reverse; } /* ═══════════════════════════════════════════════ QUIZ PAGE ═══════════════════════════════════════════════ */ [dir="rtl"] .quiz-header, [dir="rtl"] .quiz-question, [dir="rtl"] .quiz-options, [dir="rtl"] .quiz-footer { text-align: right; direction: rtl; } [dir="rtl"] .quiz-option { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .quiz-option input[type="radio"] { margin-right: 0; margin-left: 10px; } [dir="rtl"] .quiz-nav { flex-direction: row-reverse; } /* ═══════════════════════════════════════════════ PROFILE PAGE ═══════════════════════════════════════════════ */ [dir="rtl"] .profile-info, [dir="rtl"] .profile-form, [dir="rtl"] .profile-stats { text-align: right; direction: rtl; } [dir="rtl"] .profile-stat-item { flex-direction: column; align-items: flex-end; } /* ═══════════════════════════════════════════════ NOTES PAGE ═══════════════════════════════════════════════ */ [dir="rtl"] .note-card, [dir="rtl"] .notes-list { text-align: right; direction: rtl; } [dir="rtl"] .note-actions { flex-direction: row-reverse; } /* ═══════════════════════════════════════════════ AI ASSISTANT ═══════════════════════════════════════════════ */ [dir="rtl"] .ai-input-bar { flex-direction: row-reverse; } [dir="rtl"] .ai-message { direction: rtl; text-align: right; } [dir="rtl"] .ai-message.user { margin-right: 0; margin-left: auto; } [dir="rtl"] .ai-message.assistant { margin-left: 0; margin-right: auto; } /* ═══════════════════════════════════════════════ STORE PAGE ═══════════════════════════════════════════════ */ [dir="rtl"] .store-card, [dir="rtl"] .store-header, [dir="rtl"] .store-actions { text-align: right; direction: rtl; } /* ═══════════════════════════════════════════════ MEDICAL GAMES ═══════════════════════════════════════════════ */ [dir="rtl"] .game-card, [dir="rtl"] .game-header, [dir="rtl"] .game-score { text-align: right; direction: rtl; } /* ═══════════════════════════════════════════════ PDF VIEWER ═══════════════════════════════════════════════ */ [dir="rtl"] .pdf-toolbar { flex-direction: row-reverse; } [dir="rtl"] .pdf-page-info { direction: rtl; } /* ═══════════════════════════════════════════════ AUTH / LOGIN ═══════════════════════════════════════════════ */ [dir="rtl"] .auth-card, [dir="rtl"] .login-card, [dir="rtl"] .auth-form { text-align: right; direction: rtl; } [dir="rtl"] .auth-form label { display: block; text-align: right; } [dir="rtl"] .auth-links { flex-direction: row-reverse; } /* ═══════════════════════════════════════════════ TOAST NOTIFICATION ═══════════════════════════════════════════════ */ [dir="rtl"] #_mg_toast_box { direction: rtl; left: 50% !important; transform: translateX(-50%) !important; } /* ═══════════════════════════════════════════════ PROGRESS BARS ═══════════════════════════════════════════════ */ [dir="rtl"] .progress-bar { direction: rtl; } [dir="rtl"] .progress-fill, [dir="rtl"] .progress-bar-fill { transform-origin: right; float: right; } /* ═══════════════════════════════════════════════ MODAL / DIALOG ═══════════════════════════════════════════════ */ [dir="rtl"] .modal, [dir="rtl"] .dialog, [dir="rtl"] .bottom-sheet { text-align: right; direction: rtl; } [dir="rtl"] .modal-footer, [dir="rtl"] .dialog-actions { flex-direction: row-reverse; } /* ═══════════════════════════════════════════════ BOTTOM NAV (mobile) ═══════════════════════════════════════════════ */ [dir="rtl"] .bottom-nav, [dir="rtl"] .tab-bar { direction: rtl; } [dir="rtl"] .bottom-nav-item { flex-direction: column; } /* ═══════════════════════════════════════════════ CARDS GENERAL ═══════════════════════════════════════════════ */ [dir="rtl"] .card-body, [dir="rtl"] .card-title, [dir="rtl"] .card-description, [dir="rtl"] .card-meta { text-align: right; } /* ═══════════════════════════════════════════════ SMOOTH DIRECTION TRANSITION ═══════════════════════════════════════════════ */ html { transition: direction 0.01s; }