/* ========================================================================== FCAI Services - RTL overrides Loaded ONLY when the active language is Arabic (see includes/layouts/ header.php and auth_header.php: is conditional on current_lang()), on top of style.css/login.css. already flips a lot of this for free (flexbox/grid main-axis order, default text direction) - this file only overrides the properties that are direction-agnostic in CSS and would otherwise stay stuck on their LTR (left/right) values: position: left/right, margin-left/right, border-left/right used as an accent stripe, and explicit text-align: left/right. ========================================================================== */ html[dir="rtl"] body { font-family: 'Cairo', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif; } /* Arabic has no italic tradition the way Latin does, and EB Garamond has no Arabic glyphs at all (would silently fall through to an unhosted system font) - these brand/display elements switch to Cairo, upright. */ html[dir="rtl"] .hero-greeting, html[dir="rtl"] .auth-university, html[dir="rtl"] .auth-faculty, html[dir="rtl"] .auth-form-inner h1 { font-family: 'Cairo', 'Plus Jakarta Sans', sans-serif; font-style: normal; } /* -------------------------------------------------------------------- Sidebar + main content offset -------------------------------------------------------------------- */ .sidebar { left: auto; right: 0; } .main { margin-left: 0; margin-right: 240px; } .nav-link { border-left: none; border-right: 3px solid transparent; } .nav-link.active { border-left-color: transparent; border-right-color: var(--accent); } @media (max-width: 1024px) { .sidebar { transform: translateX(100%); } .sidebar.open { transform: translateX(0); } .main { margin-right: 0; } } /* -------------------------------------------------------------------- Notification bell + dropdown -------------------------------------------------------------------- */ .notif-badge { right: auto; left: -4px; } .notif-dropdown { right: auto; left: 0; text-align: right; } /* -------------------------------------------------------------------- Forms -------------------------------------------------------------------- */ .req { margin-left: 0; margin-right: 2px; } /* -------------------------------------------------------------------- Dashboard search + service cards -------------------------------------------------------------------- */ .dash-search svg { left: auto; right: 14px; } .dash-search input { padding: 11px 14px 11px 40px; padding: 11px 40px 11px 14px; } .service-card { padding: 18px 20px 16px 18px; } .service-card::before { left: auto; right: 0; } /* -------------------------------------------------------------------- Tables -------------------------------------------------------------------- */ .data-table th { text-align: right; } /* -------------------------------------------------------------------- Feature strip + legend dot -------------------------------------------------------------------- */ .feature-item + .feature-item { border-left: none; border-right: 1px solid var(--border); } @media (max-width: 720px) { .feature-strip .feature-item + .feature-item { border-right: none; border-top: 1px solid var(--border); } } .legend-dot { margin-right: 0; margin-left: 5px; } /* -------------------------------------------------------------------- Auth page alert accent stripe -------------------------------------------------------------------- */ .auth-form-inner .alert { border-left: none; border-right: 3px solid; } /* -------------------------------------------------------------------- Bilingual inline name spans - "English (Arabic)" reads oddly mirrored in an RTL sentence, so this keeps the Arabic name visually last in the pair regardless of paragraph direction (matches how the app already writes these strings - English label first, Arabic name in parentheses second). -------------------------------------------------------------------- */ .text-ar-inline { unicode-bidi: isolate; }