/* ============================================= ADNOC Incident Management — Admin Portal RTL (Right-to-Left) Stylesheet for Arabic Applied when ============================================= */ /* ── GLOBAL DIRECTION ── */ html[dir="rtl"] { direction: rtl; } html[dir="rtl"] body { text-align: right; } /* ═══════════════════════════════════════════════ 1. LAYOUT SHELL — Sidebar & Main ═══════════════════════════════════════════════ */ /* Sidebar flips to right side */ html[dir="rtl"] .sidebar { left: auto; right: 0; } /* Main content margin flips */ html[dir="rtl"] .main { margin-left: 0; margin-right: var(--sidebar-w); transition: margin-right var(--dur) var(--ease); } /* Header top-left radius becomes top-right */ html[dir="rtl"] .header { border-top-left-radius: 0; border-top-right-radius: 30px; } /* ═══════════════════════════════════════════════ 2. SIDEBAR INTERNALS ═══════════════════════════════════════════════ */ html[dir="rtl"] .sidebar-logo-text span { margin-left: 0; margin-right: 2px; } html[dir="rtl"] .nav-link { text-align: right; } html[dir="rtl"] .nav-badge { margin-left: 0; margin-right: auto; } html[dir="rtl"] .nav-icon { margin-right: 0; } /* Sidebar section labels */ html[dir="rtl"] .sidebar-section-label { text-align: right; } /* ═══════════════════════════════════════════════ 3. SIDEBAR COLLAPSED STATE ═══════════════════════════════════════════════ */ html[dir="rtl"] body.sidebar-collapsed .main { margin-left: 0; margin-right: var(--sidebar-w); } html[dir="rtl"] body.sidebar-collapsed .nav-badge { margin-right: auto; margin-left: 0; } /* ═══════════════════════════════════════════════ 4. HEADER ═══════════════════════════════════════════════ */ /* The header is flex with space-between. In RTL the browser auto-swaps the two children, so .header-left (greeting+hamburger) goes right and .header-right (icons) goes left. We just need to keep internal item order correct. */ html[dir="rtl"] .header-left { direction: rtl; } html[dir="rtl"] .header-right { direction: rtl; } /* Greeting text alignment */ html[dir="rtl"] .header-greeting { text-align: right; } /* Header search icon */ html[dir="rtl"] .header-search .search-icon { left: auto; right: 14px; } html[dir="rtl"] .header-search input { padding: 0 40px 0 16px; text-align: right; } /* Dropdown panels — flip anchor side */ html[dir="rtl"] .notif-panel { right: auto; left: -60px; } html[dir="rtl"] .user-panel { right: auto; left: 0; } html[dir="rtl"] .org-panel { right: auto; left: -20px; } /* Org check icon */ html[dir="rtl"] .org-check { margin-left: 0; margin-right: auto; } /* Notification items */ html[dir="rtl"] .notif-icon { margin-right: 0; margin-left: var(--sp-3); } html[dir="rtl"] .notif-footer i { margin-left: 0; margin-right: 4px; } /* Header org label */ html[dir="rtl"] .header-org i.fa-chevron-down { margin-left: 0; margin-right: 2px; } /* ═══════════════════════════════════════════════ 5. BREADCRUMB ═══════════════════════════════════════════════ */ html[dir="rtl"] .breadcrumb { direction: rtl; } html[dir="rtl"] .breadcrumb-sep i { transform: scaleX(-1); } /* ═══════════════════════════════════════════════ 6. PAGE LAYOUT ═══════════════════════════════════════════════ */ html[dir="rtl"] .page-header { text-align: right; } html[dir="rtl"] .page-header-left { text-align: right; } /* ═══════════════════════════════════════════════ 7. FORM CONTROLS ═══════════════════════════════════════════════ */ /* Input with left icon — flip icon to right */ html[dir="rtl"] .input-icon-wrap .form-input { padding-left: 14px; padding-right: 40px; } html[dir="rtl"] .input-icon-wrap .input-icon { left: auto; right: 14px; } html[dir="rtl"] .input-icon-wrap .input-icon-right { right: auto; left: 14px; } /* Form inputs — general text alignment */ html[dir="rtl"] .form-input { text-align: right; } html[dir="rtl"] .form-textarea { text-align: right; } /* Form labels */ html[dir="rtl"] .form-label { text-align: right; } /* Required asterisk */ html[dir="rtl"] .req { margin-left: 0; margin-right: 2px; } /* Filter search icon — flip to right side */ html[dir="rtl"] .filter-search-icon { left: auto; right: 12px; } html[dir="rtl"] .filter-search-wrap .form-input { padding-left: 14px; padding-right: 36px; text-align: right; } html[dir="rtl"] .filter-search-wrap .form-input::placeholder { text-align: right; } /* Select — flip padding so arrow space is on left */ html[dir="rtl"] .form-select { padding: 1px var(--sp-4) 0 36px; text-align: right; } /* Select-wrap arrow chevron — move to left side */ html[dir="rtl"] .select-wrap::after { right: auto; left: 14px; } /* Filter select — smaller variant */ html[dir="rtl"] .filter-select .form-select { padding: 0 12px 0 30px; text-align: right; } html[dir="rtl"] .filter-select.select-wrap::after { right: auto; left: 10px; } /* ═══════════════════════════════════════════════ 8. BUTTONS ═══════════════════════════════════════════════ */ html[dir="rtl"] .btn i { margin-right: 0; margin-left: 6px; } /* Button group — flip border radius */ html[dir="rtl"] .btn-group .btn { margin-left: 0; margin-right: -1.5px; } html[dir="rtl"] .btn-group .btn:first-child { margin-right: 0; border-radius: 0 var(--r-md) var(--r-md) 0; } html[dir="rtl"] .btn-group .btn:last-child { border-radius: var(--r-md) 0 0 var(--r-md); } /* ═══════════════════════════════════════════════ 9. TABLES ═══════════════════════════════════════════════ */ html[dir="rtl"] .table th, html[dir="rtl"] .data-table th { text-align: right; } html[dir="rtl"] .table td, html[dir="rtl"] .data-table td { text-align: right; } html[dir="rtl"] .table th .sort-icon { margin-left: 0; margin-right: 4px; } /* Table action dropdown menu */ html[dir="rtl"] .table-action-dropdown-menu { right: auto; left: var(--sp-3); } /* Table user avatar — text alignment */ html[dir="rtl"] .table-user { text-align: right; } html[dir="rtl"] .table-user-name { text-align: right; } /* ═══════════════════════════════════════════════ 10. CARDS ═══════════════════════════════════════════════ */ html[dir="rtl"] .card-header { text-align: right; } html[dir="rtl"] .card-title { text-align: right; } /* ═══════════════════════════════════════════════ 11. TABS ═══════════════════════════════════════════════ */ html[dir="rtl"] .tabs { direction: rtl; } html[dir="rtl"] .tab-item { direction: rtl; } html[dir="rtl"] .tab-item i { margin-right: 0; margin-left: 6px; } /* ═══════════════════════════════════════════════ 12. MODALS ═══════════════════════════════════════════════ */ html[dir="rtl"] .modal-header { text-align: right; } html[dir="rtl"] .modal-close { right: auto; left: var(--sp-4); } html[dir="rtl"] .modal-footer { justify-content: flex-start; } /* ═══════════════════════════════════════════════ 13. ALERTS ═══════════════════════════════════════════════ */ html[dir="rtl"] .alert-close { margin-left: 0; margin-right: auto; } html[dir="rtl"] .alert-icon { margin-right: 0; margin-left: var(--sp-3); } /* ═══════════════════════════════════════════════ 14. DROPDOWNS ═══════════════════════════════════════════════ */ html[dir="rtl"] .dropdown-menu { left: auto; right: 0; text-align: right; } html[dir="rtl"] .dropdown-item i { margin-right: 0; margin-left: 8px; } /* Table action dropdown */ html[dir="rtl"] .table-action-dropdown-item { text-align: right; } html[dir="rtl"] .table-action-dropdown-item i { margin-right: 0; } /* ═══════════════════════════════════════════════ 15. TIMELINE (Activity / Comments) ═══════════════════════════════════════════════ */ html[dir="rtl"] .timeline { padding-left: 0; padding-right: 28px; } html[dir="rtl"] .timeline::before { left: auto; right: 11px; } html[dir="rtl"] .timeline-dot { left: auto; right: -28px; } /* ═══════════════════════════════════════════════ 16. AVATAR GROUP ═══════════════════════════════════════════════ */ html[dir="rtl"] .avatar-group .avatar { margin-left: 0; margin-right: -8px; } html[dir="rtl"] .avatar-group .avatar:first-child { margin-right: 0; } /* ═══════════════════════════════════════════════ 17. TOAST NOTIFICATIONS ═══════════════════════════════════════════════ */ html[dir="rtl"] .toast-container { right: auto; left: var(--sp-6); } html[dir="rtl"] .toast { animation: slideInRtl 0.3s var(--ease); } html[dir="rtl"] .toast.hiding { animation: slideOutRtl 0.3s var(--ease) forwards; } html[dir="rtl"] .toast-icon { margin-right: 0; margin-left: var(--sp-3); } html[dir="rtl"] .toast-close { margin-left: 0; margin-right: auto; } @keyframes slideInRtl { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideOutRtl { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100%); opacity: 0; } } /* ═══════════════════════════════════════════════ 18. TOGGLE SWITCHES ═══════════════════════════════════════════════ */ html[dir="rtl"] .toggle-slider::before { left: auto; right: 3px; } html[dir="rtl"] .toggle-switch input:checked + .toggle-slider::before { transform: translateX(-20px); } html[dir="rtl"] .toggle-track::after { left: auto; right: 3px; } html[dir="rtl"] .toggle input:checked + .toggle-track::after { transform: translateX(-20px); } /* ═══════════════════════════════════════════════ 19. INCIDENT DETAIL ═══════════════════════════════════════════════ */ html[dir="rtl"] .id-top-row { text-align: right; } html[dir="rtl"] .id-meta { text-align: right; } html[dir="rtl"] .detail-label { text-align: right; } html[dir="rtl"] .detail-value { text-align: left; } html[dir="rtl"] .detail-row { direction: rtl; } /* Workflow timeline arrows flip */ html[dir="rtl"] .wf-arrow i { transform: scaleX(-1); } html[dir="rtl"] .wf-info { text-align: right; } /* Evidence cards */ html[dir="rtl"] .evidence-info { text-align: right; } html[dir="rtl"] .btn-icon-inline { margin-left: 0; margin-right: 6px; } /* ═══════════════════════════════════════════════ 20. SEGMENTED TOGGLE (Create Incident) ═══════════════════════════════════════════════ */ html[dir="rtl"] .ci-seg-option span { border-right: none; border-left: 1px solid var(--n-200); } html[dir="rtl"] .ci-seg-option:last-child span { border-left: none; } html[dir="rtl"] .ci-seg-option span i { margin-right: 0; margin-left: 5px; } /* ═══════════════════════════════════════════════ 20b. ADVANCED FILTER PANEL ═══════════════════════════════════════════════ */ html[dir="rtl"] .advance-filter-header { text-align: right; } html[dir="rtl"] .advance-filter-close { margin-left: 0; margin-right: auto; } html[dir="rtl"] .advance-filter-actions { justify-content: flex-start; } /* ═══════════════════════════════════════════════ 21. FILTER BARS ═══════════════════════════════════════════════ */ html[dir="rtl"] .filter-tag-remove { margin-left: 0; margin-right: 6px; } html[dir="rtl"] .active-filters { text-align: right; } /* ═══════════════════════════════════════════════ 22. MULTI-SELECT (.ms-select) ═══════════════════════════════════════════════ */ html[dir="rtl"] .ms-select-trigger { text-align: right; padding: 6px var(--sp-4) 6px 12px; } html[dir="rtl"] .ms-select-arrow { margin-left: 0; margin-right: auto; } html[dir="rtl"] .ms-select-placeholder { text-align: right; } html[dir="rtl"] .ms-select-tag-remove { margin-left: 0; margin-right: 4px; } html[dir="rtl"] .ms-option-check { margin-right: 0; margin-left: 8px; } html[dir="rtl"] .ms-option { text-align: right; } /* ═══════════════════════════════════════════════ 23. NOTIFICATION CENTER ═══════════════════════════════════════════════ */ html[dir="rtl"] .nc-icon { margin-right: 0; margin-left: var(--sp-3); } html[dir="rtl"] .nc-body { text-align: right; } html[dir="rtl"] .nc-meta { text-align: left; align-items: flex-start; } html[dir="rtl"] .nc-actions { text-align: right; } /* ═══════════════════════════════════════════════ 24. NOTIFICATION DROPDOWN ITEMS ═══════════════════════════════════════════════ */ html[dir="rtl"] .notif-item { text-align: right; } html[dir="rtl"] .notif-body { text-align: right; } html[dir="rtl"] .notif-mark-read { margin-left: 0; margin-right: auto; } /* ═══════════════════════════════════════════════ 25. SETTINGS / CONFIG PAGE ═══════════════════════════════════════════════ */ html[dir="rtl"] .settings-row { text-align: right; } html[dir="rtl"] .template-list-item.active { border-left: none; border-right: 3px solid var(--brand-500); } /* ═══════════════════════════════════════════════ 26. STEPPER / WORKFLOW STEPS ═══════════════════════════════════════════════ */ html[dir="rtl"] .step-label { text-align: right; } /* ═══════════════════════════════════════════════ 27. DEFINITIONS PAGE ═══════════════════════════════════════════════ */ html[dir="rtl"] .def-color-swatch { margin-right: 0; margin-left: 6px; } /* ═══════════════════════════════════════════════ 28. PAGINATION ═══════════════════════════════════════════════ */ html[dir="rtl"] .pagination { direction: rtl; } html[dir="rtl"] .pagination-btn i.fa-chevron-left, html[dir="rtl"] .pagination-btn i.fa-angle-left, html[dir="rtl"] .page-btn i.fa-chevron-left { transform: scaleX(-1); } html[dir="rtl"] .pagination-btn i.fa-chevron-right, html[dir="rtl"] .pagination-btn i.fa-angle-right, html[dir="rtl"] .page-btn i.fa-chevron-right { transform: scaleX(-1); } /* ═══════════════════════════════════════════════ 29. STATUS / BADGES ═══════════════════════════════════════════════ */ html[dir="rtl"] .status-dot { margin-right: 0; margin-left: 6px; } html[dir="rtl"] .badge i { margin-right: 0; margin-left: 4px; } /* ═══════════════════════════════════════════════ 30. POLICIES / SLA ═══════════════════════════════════════════════ */ html[dir="rtl"] .policy-meta { text-align: right; } /* ═══════════════════════════════════════════════ 31. LOGIN PAGE ═══════════════════════════════════════════════ */ html[dir="rtl"] .login-card { text-align: right; } html[dir="rtl"] .login-footer { text-align: center; } html[dir="rtl"] .login-footer i { margin-right: 0; margin-left: 4px; } html[dir="rtl"] .password-toggle { right: auto; left: 12px; } html[dir="rtl"] .login-card .input-icon-wrap .form-input { padding-left: 14px; padding-right: 40px; } /* ═══════════════════════════════════════════════ 32. REPORTING PAGE ═══════════════════════════════════════════════ */ html[dir="rtl"] .map-tooltip { text-align: right; } /* ═══════════════════════════════════════════════ 33. DARK THEME RTL SIDEBAR BORDER ═══════════════════════════════════════════════ */ html[dir="rtl"] [data-theme="dark"] .sidebar { border-right: none; border-left: 1px solid var(--n-700); } /* ═══════════════════════════════════════════════ 34. ACCORDION ═══════════════════════════════════════════════ */ html[dir="rtl"] .accordion-trigger { text-align: right; } html[dir="rtl"] .accordion-trigger i { margin-left: 0; margin-right: auto; } /* ═══════════════════════════════════════════════ 35. USER PANEL ═══════════════════════════════════════════════ */ html[dir="rtl"] .user-panel-item i { margin-right: 0; margin-left: 8px; } html[dir="rtl"] .user-panel-info { text-align: right; } html[dir="rtl"] .sidebar-user-info { text-align: right; } /* ═══════════════════════════════════════════════ 36. KPI CARDS ═══════════════════════════════════════════════ */ html[dir="rtl"] .kpi-card { text-align: right; } html[dir="rtl"] .kpi-card-icon { margin-left: 0; margin-right: auto; } html[dir="rtl"] .kpi-card-trend i { margin-right: 0; margin-left: 4px; } /* ═══════════════════════════════════════════════ 37. LANGUAGE SWITCHER (RTL overrides) Base styles are in style.css ═══════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════ 38. MOBILE RTL OVERRIDES ═══════════════════════════════════════════════ */ @media (max-width:768px) { /* Sidebar slides from right in RTL */ html[dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); } html[dir="rtl"] .sidebar.open { transform: translateX(0); } html[dir="rtl"] .main { margin-right: 0 !important; } html[dir="rtl"] .header { border-top-right-radius: 0 !important; } /* Notif panel mobile */ html[dir="rtl"] .notif-panel { left: 16px; right: 16px; } /* Tabs scroll direction */ html[dir="rtl"] .tabs { direction: rtl; } } /* ═══════════════════════════════════════════════ 39. DIRECTIONAL ICONS (arrows that should flip) ═══════════════════════════════════════════════ */ html[dir="rtl"] .fa-arrow-right { transform: scaleX(-1); } html[dir="rtl"] .fa-arrow-left { transform: scaleX(-1); } html[dir="rtl"] .fa-chevron-right { transform: scaleX(-1); } html[dir="rtl"] .fa-chevron-left { transform: scaleX(-1); } html[dir="rtl"] .fa-angle-right { transform: scaleX(-1); } html[dir="rtl"] .fa-angle-left { transform: scaleX(-1); } html[dir="rtl"] .fa-right-from-bracket { transform: scaleX(-1); } /* ═══════════════════════════════════════════════ 40. FONT FAMILY FOR ARABIC ═══════════════════════════════════════════════ */ html[dir="rtl"] body { font-family: 'Segoe UI', 'Tahoma', 'Arial', sans-serif; }