/** * RTL (Right-to-Left) Support for Arabic * MERGE Driver App & Operations Portal */ /* ============== Base RTL ============== */ html[dir="rtl"], html[dir="rtl"] body, .rtl, .rtl body, .lang-ar, .lang-ar body { direction: rtl; text-align: right; } /* Arabic Font */ .rtl, .lang-ar, html[dir="rtl"] body { font-family: 'Cairo', 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } /* * Note: dir="rtl" on already makes flex-direction:row flow * right-to-left. Do NOT add flex-direction:row-reverse here — that * would double-reverse and produce LTR order. */ /* ============== Bottom Nav - Keep Order, Don't Reverse ============== */ /* Bottom nav and filter tabs should NOT be reversed - keep same order in RTL */ .rtl .bottom-nav, html[dir="rtl"] .bottom-nav { flex-direction: row; } /* Nav items inside bottom nav should stay column (icon on top) */ .rtl .bottom-nav .nav-item, html[dir="rtl"] .bottom-nav .nav-item { flex-direction: column; } /* ============== Filter Tabs - Keep Order, Align Right ============== */ .rtl .filter-tabs, html[dir="rtl"] .filter-tabs { flex-direction: row; justify-content: flex-end; } /* Sidebar nav items should NOT reverse either */ .rtl .sidebar .nav-item, html[dir="rtl"] .sidebar .nav-item { flex-direction: row; } /* ============== Icons/SVG Margins ============== */ .rtl .stat-icon, .rtl .shipment-stat svg, .rtl .route-stat svg, .rtl .nav-item svg, .rtl .btn svg, html[dir="rtl"] .stat-icon, html[dir="rtl"] .shipment-stat svg, html[dir="rtl"] .route-stat svg, html[dir="rtl"] .nav-item svg, html[dir="rtl"] .btn svg { margin-right: 0; margin-left: 8px; } /* ============== Back Buttons (Flip Arrow only, not text) ============== */ .rtl .header-back svg, .rtl .back-btn svg, .rtl .btn-back svg, html[dir="rtl"] .header-back svg, html[dir="rtl"] .back-btn svg, html[dir="rtl"] .btn-back svg { transform: scaleX(-1); } /* ============== Sidebar ============== */ .rtl .sidebar, html[dir="rtl"] .sidebar { left: auto; right: 0; border-left: 1px solid rgba(26,50,99,0.15); border-right: none; } .rtl .main-content, .rtl .content-area, .rtl .main, html[dir="rtl"] .main-content, html[dir="rtl"] .content-area, html[dir="rtl"] .main { margin-left: 0; margin-right: 220px; } /* RTL active nav item border flip */ .rtl .nav-item.active, html[dir="rtl"] .nav-item.active { border-left: none; border-right: 3px solid var(--brand-gold, #FFC570); } .rtl .nav-item-plan-highlight, html[dir="rtl"] .nav-item-plan-highlight { border-left: none; border-right: 3px solid var(--brand-gold, #FFC570); } /* ============== Navigation Section ============== */ .rtl .nav-section-title, html[dir="rtl"] .nav-section-title { text-align: right; padding-left: 0; padding-right: 20px; } .rtl .nav-item, html[dir="rtl"] .nav-item { text-align: right; padding-left: 15px; padding-right: 20px; } .rtl .nav-badge, html[dir="rtl"] .nav-badge { margin-left: 0; margin-right: auto; } /* ============== Form Elements ============== */ .rtl input, .rtl textarea, .rtl select, html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select { text-align: right; direction: rtl; } .rtl .search-input, html[dir="rtl"] .search-input { padding-left: 16px; padding-right: 44px; } .rtl .search-icon, html[dir="rtl"] .search-icon { left: auto; right: 14px; } /* ============== Tables ============== */ .rtl table, .rtl th, .rtl td, html[dir="rtl"] table, html[dir="rtl"] th, html[dir="rtl"] td { text-align: right; } /* ============== Dropdowns ============== */ .rtl .dropdown-menu, html[dir="rtl"] .dropdown-menu { left: 0; right: auto; text-align: right; } /* ============== Modals ============== */ .rtl .modal-close, html[dir="rtl"] .modal-close { left: 16px; right: auto; } .rtl .modal-body, html[dir="rtl"] .modal-body { text-align: right; } /* ============== Stop Timeline ============== */ .rtl .stop-number, html[dir="rtl"] .stop-number { margin-right: 0; margin-left: 12px; } .rtl .stop-details, html[dir="rtl"] .stop-details { text-align: right; } .rtl .stop-actions, html[dir="rtl"] .stop-actions { margin-left: 0; margin-right: auto; } /* ============== Driver Menu ============== */ .rtl .driver-menu, html[dir="rtl"] .driver-menu { right: auto; left: 0; } .rtl .driver-avatar-btn, html[dir="rtl"] .driver-avatar-btn { margin-left: 0; margin-right: auto; } /* ============== Shipment Badge ============== */ .rtl .shipment-badge, .rtl .payment-badge, html[dir="rtl"] .shipment-badge, html[dir="rtl"] .payment-badge { margin-left: 0; margin-right: auto; } /* ============== User Profile ============== */ .rtl .user-info-sidebar, html[dir="rtl"] .user-info-sidebar { text-align: right; margin-left: 0; margin-right: 12px; } /* ============== Map Controls ============== */ .rtl .map-controls, .rtl .leaflet-control-zoom, html[dir="rtl"] .map-controls, html[dir="rtl"] .leaflet-control-zoom { left: 10px !important; right: auto !important; } /* ============== Responsive ============== */ @media (max-width: 768px) { .rtl .sidebar, html[dir="rtl"] .sidebar { transform: translateX(100%); right: 0; left: auto; } .rtl .sidebar.open, html[dir="rtl"] .sidebar.open { transform: translateX(0); } .rtl .main-content, .rtl .content-area, .rtl .main, html[dir="rtl"] .main-content, html[dir="rtl"] .content-area, html[dir="rtl"] .main { margin-right: 0; } } /* ============== Ops Portal Stat Cards ============== */ /* Stat cards have [icon, text] in HTML but RTL wants text on the right (start). direction:rtl puts the 1st child (icon) on the right — wrong. row-reverse corrects it: text goes right, icon goes left. */ .rtl .stat-card, html[dir="rtl"] .stat-card { flex-direction: row-reverse; } .rtl .stat-content, html[dir="rtl"] .stat-content { text-align: right; align-items: flex-end; } /* Stat trend badge: flip margin */ .rtl .stat-trend, html[dir="rtl"] .stat-trend { margin-left: 0; margin-right: 8px; } /* ============== Ops Dashboard Grids ============== */ .rtl .stats-row, html[dir="rtl"] .stats-row { direction: rtl; } .rtl .dashboard-grid, html[dir="rtl"] .dashboard-grid { direction: rtl; } .rtl .bottom-grid, html[dir="rtl"] .bottom-grid { direction: rtl; } /* ============== Capacity / Exception Cards ============== */ .rtl .capacity-row, html[dir="rtl"] .capacity-row { direction: rtl; } /* .capacity-header — direction:rtl handles row reversal */ .rtl .capacity-big-value, html[dir="rtl"] .capacity-big-value { text-align: right; } .rtl .exception-row, html[dir="rtl"] .exception-row { direction: rtl; } /* ============== Chart Legends ============== */ .rtl .donut-legend, .rtl .chart-legend, html[dir="rtl"] .donut-legend, html[dir="rtl"] .chart-legend { direction: rtl; } /* ============== Table ============== */ .rtl .table-header, .rtl .table-row, html[dir="rtl"] .table-header, html[dir="rtl"] .table-row { direction: rtl; text-align: right; } /* ============== Notification Dropdown ============== */ .rtl .notification-dropdown, html[dir="rtl"] .notification-dropdown { right: auto; left: 0; } /* ============== Header Actions ============== */ /* direction:rtl on already reverses flex row order; no row-reverse needed */ /* ============== Shipment Selector (Live Tracking) ============== */ .rtl .shipment-selector select, html[dir="rtl"] .shipment-selector select { text-align: right; } /* ============== Notification Badge ============== */ .rtl .notification-badge, html[dir="rtl"] .notification-badge { right: auto; left: -4px; } /* Unread dot on the start edge (right in RTL) */ .rtl .notification-item.unread::before, html[dir="rtl"] .notification-item.unread::before { left: auto; right: 8px; } /* Text block aligns with RTL reading direction */ .rtl .notification-content, html[dir="rtl"] .notification-content { text-align: right; } /* ============== Hide old language switcher ============== */ .language-switcher { display: none !important; } /* ============== Ops Portal Search Bar ============== */ .rtl .search-bar input, html[dir="rtl"] .search-bar input { text-align: right; } /* ============== Ops Portal Toolbar ============== */ /* direction:rtl on already reverses flex row order; no row-reverse needed */ /* .filter-pills, .view-toggle, .view-controls — direction:rtl handles row reversal */ /* ============== Ops Portal Page Header ============== */ /* direction:rtl on already reverses flex row order; no row-reverse needed */ .rtl .page-title, .rtl .header-title, html[dir="rtl"] .page-title, html[dir="rtl"] .header-title { text-align: right; } /* ============== Ops Portal Header (with search) ============== */ /* direction:rtl on already reverses flex row order; no row-reverse needed */ /* ============== Ops Portal Card Layouts ============== */ .rtl .card-body, html[dir="rtl"] .card-body { text-align: right; } /* .truck-info-row — direction:rtl handles row reversal */ .rtl .route-line, html[dir="rtl"] .route-line { padding-left: 0; padding-right: 24px; } .rtl .route-line::before, html[dir="rtl"] .route-line::before { left: auto; right: 5px; } .rtl .route-point::before, html[dir="rtl"] .route-point::before { left: auto; right: -24px; } /* ============== Ops Portal Details Panel ============== */ .rtl .details-panel, html[dir="rtl"] .details-panel { text-align: right; right: auto; left: -550px; box-shadow: 10px 0 30px rgba(0,0,0,0.15); transition: left 0.3s ease; } .rtl .details-panel.active, html[dir="rtl"] .details-panel.active { left: 0; } /* .meta-item, .shipment-meta — direction:rtl handles row reversal */ /* ============== Ops Portal Form Elements ============== */ .rtl .form-label, html[dir="rtl"] .form-label { text-align: right; } .rtl .form-input, html[dir="rtl"] .form-input { text-align: right; } .rtl .form-group, html[dir="rtl"] .form-group { text-align: right; } /* .form-row — direction:rtl handles row reversal */ /* ============== Ops Portal Modal Footer ============== */ /* .modal-actions — direction:rtl handles row reversal */ /* ============== Ops Portal Sidebar CTA ============== */ .rtl .sidebar-cta, html[dir="rtl"] .sidebar-cta { text-align: center; } /* ============== Ops Portal Driver/Truck Cards ============== */ .rtl .driver-card, .rtl .truck-card, html[dir="rtl"] .driver-card, html[dir="rtl"] .truck-card { text-align: right; } /* .card-actions — direction:rtl handles row reversal */ /* ============== Ops Shipment Cards ============== */ .rtl .shipment-card, html[dir="rtl"] .shipment-card { text-align: right; } /* .truck-section — direction:rtl handles row reversal */ .rtl .shipment-card .truck-details, html[dir="rtl"] .shipment-card .truck-details { text-align: right; } .rtl .shipment-card .route-timeline, html[dir="rtl"] .shipment-card .route-timeline { padding-left: 0; padding-right: 20px; } .rtl .shipment-card .price-section, html[dir="rtl"] .shipment-card .price-section { text-align: right; } /* ============== Ops Route Card (for routes page) ============== */ .rtl .route-card, html[dir="rtl"] .route-card { text-align: right; } /* .route-card-header, .route-truck-info — direction:rtl handles row reversal */ .rtl .truck-details, html[dir="rtl"] .truck-details { text-align: right; } .rtl .route-metrics, html[dir="rtl"] .route-metrics { direction: rtl; } /* .tags-container, .utilization-bar-header — direction:rtl handles row reversal */ .rtl .loading-order-title, html[dir="rtl"] .loading-order-title { text-align: right; } /* .loading-item — direction:rtl handles row reversal */ /* ============== Ops Driver/Truck Card Header ============== */ /* .driver-card-header, .truck-card-header — direction:rtl handles row reversal */ .rtl .driver-info, html[dir="rtl"] .driver-info { text-align: right; } .rtl .driver-details .detail-item, .rtl .truck-specs .spec-item, html[dir="rtl"] .driver-details .detail-item, html[dir="rtl"] .truck-specs .spec-item { text-align: right; } .rtl .detail-label, .rtl .spec-label, html[dir="rtl"] .detail-label, html[dir="rtl"] .spec-label { text-align: right; } .rtl .detail-value, .rtl .spec-value, html[dir="rtl"] .detail-value, html[dir="rtl"] .spec-value { text-align: left; } .rtl .add-driver-card, .rtl .add-truck-card, html[dir="rtl"] .add-driver-card, html[dir="rtl"] .add-truck-card { text-align: right; } /* ============== Ops Live Tracking Panel ============== */ .rtl .tracking-panel, html[dir="rtl"] .tracking-panel { text-align: right; } /* .panel-header — direction:rtl handles row reversal */ .rtl .panel-stats, html[dir="rtl"] .panel-stats { direction: rtl; } /* .time-distance — direction:rtl handles row reversal */ .rtl .truck-overlay, html[dir="rtl"] .truck-overlay { text-align: right; } /* .stop-item — direction:rtl handles row reversal */ .rtl .stop-content, html[dir="rtl"] .stop-content { text-align: right; } .rtl .stop-timeline, html[dir="rtl"] .stop-timeline { margin-right: 0; margin-left: 12px; } /* ============== Ops Loadboard Table Row ============== */ .rtl .table-row .route-cell, html[dir="rtl"] .table-row .route-cell { direction: rtl; } .rtl .route-arrow, html[dir="rtl"] .route-arrow { transform: scaleX(-1); } /* ============== Ops Order Details Panel ============== */ /* .order-detail-row — direction:rtl handles row reversal */ .rtl .order-detail-label, html[dir="rtl"] .order-detail-label { text-align: right; } .rtl .order-detail-value, html[dir="rtl"] .order-detail-value { text-align: left; } /* ============== Ops Pagination ============== */ .rtl .pagination-info, html[dir="rtl"] .pagination-info { text-align: right; } /* .pagination, .pagination-controls — direction:rtl handles row reversal */ /* ============== Ops Stats Row Cards ============== */ .rtl .stat-value, html[dir="rtl"] .stat-value { text-align: right; } .rtl .stat-subtitle, html[dir="rtl"] .stat-subtitle { text-align: right; } .rtl .stat-title, html[dir="rtl"] .stat-title { text-align: right; } /* ============== Ops Search Input (in headers) ============== */ .rtl .search-wrapper input, .rtl #search-input, html[dir="rtl"] .search-wrapper input, html[dir="rtl"] #search-input { text-align: right; padding-left: 12px; padding-right: 40px; } .rtl .search-wrapper svg, html[dir="rtl"] .search-wrapper svg { left: auto; right: 12px; } /* ============== Ops Shipment Details Tab ============== */ /* .detail-tabs, .detail-row — direction:rtl handles row reversal */ /* ============== Ops Route Timeline (in route/shipment cards) ============== */ /* .timeline-item — direction:rtl handles row reversal */ .rtl .timeline-content, html[dir="rtl"] .timeline-content { text-align: right; } .rtl .timeline-marker, html[dir="rtl"] .timeline-marker { margin-right: 0; margin-left: 12px; } /* ============== Ops Status Badge ============== */ .rtl .status-badge, html[dir="rtl"] .status-badge { margin-left: 0; margin-right: auto; } /* ============== Language toggle (#merge-i18n-toggle from i18n.js) ============== */ /* Inline: sits in main header-actions next to notification (static, compact) */ #merge-i18n-toggle.merge-lang-toggle.merge-lang-toggle--inline { position: static; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 32px; min-height: 32px; padding: 0 8px; margin: 0; border-radius: var(--radius-lg, 10px); cursor: pointer; font-weight: 600; font-size: 11px; line-height: 1; font-family: var(--font-secondary, "Inter", "Cairo", sans-serif); color: var(--text-primary, #0F1B36); background: var(--bg-surface, #fff); border: 1px solid var(--border-soft, #d5dce9); box-shadow: var(--shadow-button, 0 1px 3px rgba(33, 135, 255, 0.12)); transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease; flex-shrink: 0; } #merge-i18n-toggle.merge-lang-toggle.merge-lang-toggle--inline .merge-lang-flag { font-size: 14px; line-height: 1; } #merge-i18n-toggle.merge-lang-toggle.merge-lang-toggle--inline:hover { border-color: #FFC570; box-shadow: 0 2px 8px rgba(14, 24, 72, 0.12); } /* Warehouse picker: anchored to page header box (not viewport-fixed) */ .page-header.merge-lang-host { position: relative; } #merge-i18n-toggle.merge-lang-toggle.merge-lang-toggle--picker { position: static; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; font-size: 11px; font-weight: 600; border-radius: var(--radius-lg, 10px); border: 1px solid var(--border-soft, #d5dce9); background: var(--bg-surface, #fff); box-shadow: var(--shadow-button, 0 1px 3px rgba(33, 135, 255, 0.12)); cursor: pointer; font-family: var(--font-secondary, "Inter", "Cairo", sans-serif); color: var(--text-primary, #0F1B36); z-index: 5; } #merge-i18n-toggle.merge-lang-toggle.merge-lang-toggle--driver { position: static; z-index: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; font-size: 11px; font-weight: 600; border-radius: 8px; border: none; background: transparent; box-shadow: none; cursor: pointer; color: var(--text-muted, #94a3b8); } /* ============== Print ============== */ @media print { #merge-i18n-toggle { display: none !important; } }