/* ============================================================ Job Portal - RTL Stylesheet (Arabic) Applied when is set ============================================================ */ /* ── Base RTL ─────────────────────────────────────────────── */ [dir="rtl"] body { font-family: 'Tajawal', 'Arabic Typesetting', sans-serif; direction: rtl; text-align: right; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] label, [dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] th { font-family: 'Tajawal', sans-serif; } [dir="rtl"] .font-ar { font-family: 'Tajawal', sans-serif; line-height: 1.8; } /* ── Typography Scale for Arabic ─────────────────────────── */ [dir="rtl"] body { font-size: 16px; } [dir="rtl"] .section-subtitle { font-size: 16px; } [dir="rtl"] .hero-subtitle { font-size: 17px; } [dir="rtl"] h1 { font-size: calc(var(--font-size, 2rem) * 1.05); } /* ── Utility Overrides ────────────────────────────────────── */ [dir="rtl"] .text-start { text-align: right !important; } [dir="rtl"] .text-end { text-align: left !important; } [dir="rtl"] .ms-auto { margin-left: unset !important; margin-right: auto !important; } [dir="rtl"] .me-auto { margin-right: unset !important; margin-left: auto !important; } [dir="rtl"] .ms-1 { margin-left: unset !important; margin-right: 0.25rem !important; } [dir="rtl"] .ms-2 { margin-left: unset !important; margin-right: 0.5rem !important; } [dir="rtl"] .ms-3 { margin-left: unset !important; margin-right: 1rem !important; } [dir="rtl"] .ms-4 { margin-left: unset !important; margin-right: 1.5rem !important; } [dir="rtl"] .ms-5 { margin-left: unset !important; margin-right: 3rem !important; } [dir="rtl"] .me-1 { margin-right: unset !important; margin-left: 0.25rem !important; } [dir="rtl"] .me-2 { margin-right: unset !important; margin-left: 0.5rem !important; } [dir="rtl"] .me-3 { margin-right: unset !important; margin-left: 1rem !important; } [dir="rtl"] .me-4 { margin-right: unset !important; margin-left: 1.5rem !important; } [dir="rtl"] .me-5 { margin-right: unset !important; margin-left: 3rem !important; } [dir="rtl"] .ps-1 { padding-left: unset !important; padding-right: 0.25rem !important; } [dir="rtl"] .ps-2 { padding-left: unset !important; padding-right: 0.5rem !important; } [dir="rtl"] .ps-3 { padding-left: unset !important; padding-right: 1rem !important; } [dir="rtl"] .ps-4 { padding-left: unset !important; padding-right: 1.5rem !important; } [dir="rtl"] .ps-5 { padding-left: unset !important; padding-right: 3rem !important; } [dir="rtl"] .pe-1 { padding-right: unset !important; padding-left: 0.25rem !important; } [dir="rtl"] .pe-2 { padding-right: unset !important; padding-left: 0.5rem !important; } [dir="rtl"] .pe-3 { padding-right: unset !important; padding-left: 1rem !important; } [dir="rtl"] .pe-4 { padding-right: unset !important; padding-left: 1.5rem !important; } [dir="rtl"] .pe-5 { padding-right: unset !important; padding-left: 3rem !important; } [dir="rtl"] .float-start { float: right !important; } [dir="rtl"] .float-end { float: left !important; } /* ── Navbar RTL ───────────────────────────────────────────── */ [dir="rtl"] .navbar-portal .navbar-brand { flex-direction: row-reverse; } [dir="rtl"] .navbar-portal .navbar-nav { padding-right: 0; flex-direction: row-reverse; } [dir="rtl"] .navbar-portal .nav-link.active::after { left: unset; right: 50%; transform: translateX(50%); } [dir="rtl"] .navbar-portal .navbar-nav-btns, [dir="rtl"] .navbar-portal .navbar-actions { flex-direction: row-reverse; } [dir="rtl"] .navbar-portal .me-auto { margin-right: unset !important; margin-left: auto !important; } /* ── Sidebar RTL ──────────────────────────────────────────── */ [dir="rtl"] .sidebar { left: unset; right: 0; border-right: none; border-left: 1px solid rgba(255,255,255,0.08); } [dir="rtl"] .main-content { margin-left: 0; margin-right: 260px; } [dir="rtl"] .sidebar-nav-link { border-left: none; border-right: 3px solid transparent; padding-left: 14px; padding-right: 14px; flex-direction: row-reverse; text-align: right; } [dir="rtl"] .sidebar-nav-link:hover, [dir="rtl"] .sidebar-nav-link.active { border-right-color: var(--color-primary); border-left-color: transparent; padding-right: 18px; padding-left: 14px; } [dir="rtl"] .sidebar-nav-link .nav-icon, [dir="rtl"] .sidebar-nav-link > i { margin-right: 0; margin-left: 12px; } [dir="rtl"] .sidebar-nav-link .nav-arrow { margin-left: 0; margin-right: auto; transform: rotate(180deg); } [dir="rtl"] .sidebar.sidebar-collapsed { transform: translateX(100%); } [dir="rtl"] .sidebar-logo, [dir="rtl"] .sidebar-brand { flex-direction: row-reverse; } [dir="rtl"] .sidebar-submenu { padding-left: 0; padding-right: 46px; } /* ── Dashboard Header RTL ─────────────────────────────────── */ [dir="rtl"] .dashboard-header { flex-direction: row-reverse; } [dir="rtl"] .dashboard-header .header-left, [dir="rtl"] .dashboard-header .header-title { flex-direction: row-reverse; } [dir="rtl"] .dashboard-header .header-right, [dir="rtl"] .dashboard-header .header-actions { flex-direction: row-reverse; } [dir="rtl"] .header-search .form-control { padding-left: 14px; padding-right: 40px; } [dir="rtl"] .header-search .search-icon { left: unset; right: 14px; } /* ── Hero RTL ─────────────────────────────────────────────── */ [dir="rtl"] .hero-subtitle { max-width: 560px; } [dir="rtl"] .hero-search-box { flex-direction: row-reverse; } [dir="rtl"] .hero-tags { flex-direction: row-reverse; } [dir="rtl"] .hero-cta-btns { flex-direction: row-reverse; } [dir="rtl"] .hero::before { right: unset; left: -10%; } [dir="rtl"] .hero::after { left: unset; right: -5%; } /* ── Section Divider RTL ──────────────────────────────────── */ [dir="rtl"] .section-divider.left { margin-right: 0; margin-left: auto; } /* ── Job Card RTL ─────────────────────────────────────────── */ [dir="rtl"] .job-card-header { flex-direction: row-reverse; } [dir="rtl"] .job-card .featured-ribbon { right: unset; left: -8px; padding-left: 14px; padding-right: 10px; } [dir="rtl"] .job-card .featured-ribbon::after { right: unset; left: 0; border-left: none; border-right: 8px solid var(--color-accent-dark); } [dir="rtl"] .job-card-footer { flex-direction: row-reverse; } [dir="rtl"] .job-meta { flex-direction: row-reverse; } [dir="rtl"] .job-meta-item { flex-direction: row-reverse; } [dir="rtl"] .job-badges { flex-direction: row-reverse; } [dir="rtl"] .job-actions { flex-direction: row-reverse; } /* ── Category Card RTL ────────────────────────────────────── */ [dir="rtl"] .category-card { text-align: center; } /* ── Feature Card RTL ─────────────────────────────────────── */ [dir="rtl"] .feature-card::after { left: unset; right: 0; } /* ── Testimonial RTL ──────────────────────────────────────── */ [dir="rtl"] .testimonial-author { flex-direction: row-reverse; } [dir="rtl"] .testimonial-quote { text-align: right; } /* ── Stats RTL ────────────────────────────────────────────── */ [dir="rtl"] .stat-card { text-align: center; } /* ── Step Cards RTL ───────────────────────────────────────── */ [dir="rtl"] .step-connector { right: unset; left: -30px; background: linear-gradient(270deg, var(--color-primary-light), transparent); } /* ── Footer RTL ───────────────────────────────────────────── */ [dir="rtl"] .footer-portal { text-align: right; } [dir="rtl"] .footer-portal .footer-brand { flex-direction: row-reverse; } [dir="rtl"] .footer-portal .footer-links a { flex-direction: row-reverse; } [dir="rtl"] .footer-portal .footer-links a:hover { padding-left: 0; padding-right: 4px; } [dir="rtl"] .footer-portal .footer-links a i { transform: rotate(180deg); } [dir="rtl"] .footer-portal .social-links { flex-direction: row-reverse; } [dir="rtl"] .footer-portal .footer-contact-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .footer-portal .footer-bottom { text-align: right; } [dir="rtl"] .footer-portal .footer-bottom-links { flex-direction: row-reverse; } /* ── Forms RTL ────────────────────────────────────────────── */ [dir="rtl"] .form-control, [dir="rtl"] .form-select { text-align: right; } [dir="rtl"] .form-control::placeholder { text-align: right; } [dir="rtl"] .form-label { text-align: right; display: block; } [dir="rtl"] .form-label .required-star { margin-left: 0; margin-right: 3px; } [dir="rtl"] .input-with-icon .form-control { padding-left: 14px; padding-right: 42px; } [dir="rtl"] .input-with-icon .input-icon { left: unset; right: 14px; } [dir="rtl"] .form-check { padding-left: 0; padding-right: 1.5em; } [dir="rtl"] .form-check-input { float: right; margin-left: 0; margin-right: -1.5em; } [dir="rtl"] .form-check-label { text-align: right; } [dir="rtl"] .form-section-title { flex-direction: row-reverse; } [dir="rtl"] .invalid-feedback { text-align: right; } /* ── Input Group RTL ──────────────────────────────────────── */ [dir="rtl"] .input-group > .form-control:not(:last-child), [dir="rtl"] .input-group > .form-select:not(:last-child) { border-radius: 0 var(--radius-md) var(--radius-md) 0; border-right: 1.5px solid var(--color-border); border-left: none; } [dir="rtl"] .input-group > .form-control:not(:first-child), [dir="rtl"] .input-group > .form-select:not(:first-child) { border-radius: var(--radius-md) 0 0 var(--radius-md); border-left: 1.5px solid var(--color-border); border-right: none; } [dir="rtl"] .input-group > .btn:not(:last-child) { border-radius: 0 var(--radius-md) var(--radius-md) 0; } [dir="rtl"] .input-group > .btn:not(:first-child) { border-radius: var(--radius-md) 0 0 var(--radius-md); } [dir="rtl"] .input-group-text:first-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; border-right: 1.5px solid var(--color-border); border-left: none; } [dir="rtl"] .input-group-text:last-child { border-radius: var(--radius-md) 0 0 var(--radius-md); border-left: 1.5px solid var(--color-border); border-right: none; } /* ── Breadcrumb RTL ───────────────────────────────────────── */ [dir="rtl"] .breadcrumb { flex-direction: row-reverse; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-left: 0; padding-right: 0.5rem; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { float: right; padding-right: 0; padding-left: 0.5rem; content: "\f053"; /* fa-chevron-left */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; color: rgba(255,255,255,0.4); } /* ── Badges RTL ───────────────────────────────────────────── */ [dir="rtl"] .badge-portal { flex-direction: row-reverse; } /* ── Tables RTL ───────────────────────────────────────────── */ [dir="rtl"] table { text-align: right; } [dir="rtl"] .table > :not(caption) > * > th, [dir="rtl"] .table > :not(caption) > * > td { text-align: right; } [dir="rtl"] .data-table th:first-child, [dir="rtl"] .data-table td:first-child { padding-right: 20px; padding-left: 12px; } [dir="rtl"] .data-table th:last-child, [dir="rtl"] .data-table td:last-child { padding-left: 20px; padding-right: 12px; text-align: left; } [dir="rtl"] .table-actions { flex-direction: row-reverse; justify-content: flex-start; } /* ── Cards RTL ────────────────────────────────────────────── */ [dir="rtl"] .stat-card-dashboard { text-align: right; } [dir="rtl"] .stat-card-dashboard .stat-icon-box { float: left; margin-left: 0; margin-right: auto; } [dir="rtl"] .stat-card-dashboard .stat-trend { flex-direction: row-reverse; } [dir="rtl"] .applicant-card { flex-direction: row-reverse; } [dir="rtl"] .applicant-card-info { text-align: right; } [dir="rtl"] .applicant-card-actions { flex-direction: row-reverse; } [dir="rtl"] .job-card-dashboard .job-card-d-meta { flex-direction: row-reverse; } /* ── Activity Feed RTL ────────────────────────────────────── */ [dir="rtl"] .activity-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .activity-item .activity-line { left: unset; right: 16px; } [dir="rtl"] .activity-item .activity-content { margin-left: 0; margin-right: 14px; } /* ── Filter Bar RTL ───────────────────────────────────────── */ [dir="rtl"] .filter-bar { flex-direction: row-reverse; } [dir="rtl"] .filter-pill { flex-direction: row-reverse; } [dir="rtl"] .filter-check { flex-direction: row-reverse; } [dir="rtl"] .filter-check .filter-count { margin-left: 0; margin-right: auto; } [dir="rtl"] .results-header { flex-direction: row-reverse; } [dir="rtl"] .active-filters { flex-direction: row-reverse; } [dir="rtl"] .active-filter-pill { flex-direction: row-reverse; } [dir="rtl"] .search-filter-sidebar { text-align: right; } [dir="rtl"] .filter-group-title { flex-direction: row-reverse; } /* ── Notification RTL ─────────────────────────────────────── */ [dir="rtl"] .notif-dot { left: 0; right: unset; } [dir="rtl"] .notification-dropdown { left: 0; right: unset; } [dir="rtl"] .notification-item { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .notification-item .notif-icon { margin-right: 0; margin-left: 12px; } /* ── Toast RTL ────────────────────────────────────────────── */ [dir="rtl"] .toast-container-portal { right: unset; left: 20px; } [dir="rtl"] .portal-toast { border-left: none; border-right: 4px solid var(--color-primary); flex-direction: row-reverse; animation: slideInLeft 0.35s ease; } [dir="rtl"] .portal-toast.success { border-right-color: var(--color-success); } [dir="rtl"] .portal-toast.error { border-right-color: var(--color-danger); } [dir="rtl"] .portal-toast.warning { border-right-color: var(--color-warning); } [dir="rtl"] .portal-toast.info { border-right-color: var(--color-info); } [dir="rtl"] .portal-toast .toast-close { margin-left: 0; margin-right: auto; } /* ── Back to Top RTL ──────────────────────────────────────── */ [dir="rtl"] .back-to-top { right: unset; left: 28px; } /* ── Dropdown RTL ─────────────────────────────────────────── */ [dir="rtl"] .dropdown-menu { text-align: right; } [dir="rtl"] .dropdown-item { text-align: right; } [dir="rtl"] .dropdown-item i { margin-right: 0; margin-left: 8px; float: right; } /* ── Modal RTL ────────────────────────────────────────────── */ [dir="rtl"] .modal-header { flex-direction: row-reverse; } [dir="rtl"] .modal-header .btn-close { margin-right: auto; margin-left: 0; } [dir="rtl"] .modal-footer { flex-direction: row-reverse; } /* ── Progress Bar RTL ─────────────────────────────────────── */ [dir="rtl"] .progress-bar { float: right; } /* ── Quick Actions RTL ────────────────────────────────────── */ [dir="rtl"] .quick-action-btn { flex-direction: column; text-align: center; } /* ── Omani Highlight RTL ──────────────────────────────────── */ [dir="rtl"] .omani-highlight::before { right: unset; left: -30px; } /* ── Auth Card RTL ────────────────────────────────────────── */ [dir="rtl"] .auth-card { text-align: right; } [dir="rtl"] .auth-logo { flex-direction: row-reverse; } [dir="rtl"] .role-select-cards { direction: rtl; } [dir="rtl"] .role-card { text-align: center; } /* ── Page Header RTL ──────────────────────────────────────── */ [dir="rtl"] .page-header { text-align: right; } [dir="rtl"] .page-header .breadcrumb { justify-content: flex-start; } /* ── Hero Search Box RTL ──────────────────────────────────── */ [dir="rtl"] .hero-search-box .form-control { text-align: right; } /* ── Skill Tags RTL ───────────────────────────────────────── */ [dir="rtl"] .tag-skill { direction: rtl; } /* ── Number display (keep LTR) ────────────────────────────── */ [dir="rtl"] .stat-number, [dir="rtl"] .job-salary, [dir="rtl"] .salary-range, [dir="rtl"] .phone-number, [dir="rtl"] .cr-number { direction: ltr; unicode-bidi: bidi-override; } /* ── Responsive RTL ───────────────────────────────────────── */ @media (max-width: 991.98px) { [dir="rtl"] .sidebar { transform: translateX(100%); right: 0; left: unset; } [dir="rtl"] .sidebar.open { transform: translateX(0); } [dir="rtl"] .main-content { margin-right: 0; margin-left: 0; } [dir="rtl"] .navbar-portal .navbar-collapse { text-align: right; } } @media (max-width: 767.98px) { [dir="rtl"] .back-to-top { right: unset; left: 16px; } [dir="rtl"] .toast-container-portal { right: unset; left: 10px; } }