/** * BudgetFlow — RTL Support (Arabic) * Chargé automatiquement quand lang = 'ar' * S'appuie sur dir="rtl" posé sur * Bootstrap 5 gère ses propres classes (ms/me/start/end) via dir="rtl" */ /* ================================================================ BASE ================================================================ */ [dir="rtl"] body { text-align: right; font-family: 'Segoe UI', 'Tahoma', 'Arial', sans-serif; } /* ================================================================ SIDEBAR ================================================================ */ /* Sidebar positionnée à droite en RTL */ [dir="rtl"] .app-sidebar { left: auto !important; right: 0 !important; transform: translateX(100%); } [dir="rtl"] .app-sidebar.sidebar-open { transform: translateX(0) !important; } /* Desktop : sidebar fixe à droite */ @media (min-width: 992px) { [dir="rtl"] .app-sidebar { transform: translateX(0) !important; } [dir="rtl"] .main-content { margin-left: 0 !important; margin-right: var(--bf-sidebar-width, 260px) !important; } } /* Brand close button */ [dir="rtl"] .app-sidebar .btn.ms-auto { margin-left: 0 !important; margin-right: auto !important; } /* Nav items — icône à droite du label */ [dir="rtl"] .sidebar-nav-link { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .sidebar-nav-link .nav-icon { margin-left: 0 !important; margin-right: 0 !important; } /* Badge et lock icon à gauche en RTL */ [dir="rtl"] .sidebar-nav-link .badge.ms-auto, [dir="rtl"] .sidebar-nav-link .ms-auto { margin-left: auto !important; margin-right: 0 !important; } /* ================================================================ TOPBAR ================================================================ */ [dir="rtl"] .topbar .ms-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .topbar .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } /* ================================================================ FORMULAIRES ================================================================ */ [dir="rtl"] .form-control, [dir="rtl"] .form-select, [dir="rtl"] .input-group-text { text-align: right; } [dir="rtl"] .input-group { flex-direction: row-reverse; } [dir="rtl"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) { border-radius: 0.375rem 0 0 0.375rem; border-left: 0; border-right: 1px solid #dee2e6; } [dir="rtl"] .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) { border-radius: 0 0.375rem 0.375rem 0; border-right: 0; border-left: 1px solid #dee2e6; } [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; } /* ================================================================ TABLEAUX ================================================================ */ [dir="rtl"] .table th, [dir="rtl"] .table td { text-align: right; } [dir="rtl"] .table th:first-child, [dir="rtl"] .table td:first-child { text-align: right; } /* ================================================================ CARTES / CARDS ================================================================ */ [dir="rtl"] .card-body { text-align: right; } [dir="rtl"] .d-flex:not(.flex-column):not([class*="justify-content"]) { /* Laisser Bootstrap gérer les flex via dir="rtl" */ } /* Stats cards — icônes inversées */ [dir="rtl"] .stat-card .d-flex, [dir="rtl"] .kpi-card .d-flex { flex-direction: row-reverse; } /* ================================================================ ALERTES / FLASH ================================================================ */ [dir="rtl"] .alert { text-align: right; } [dir="rtl"] .alert .btn-close.ms-auto { margin-left: 0 !important; margin-right: auto !important; } /* ================================================================ BREADCRUMB ================================================================ */ [dir="rtl"] .breadcrumb { flex-direction: row-reverse; } [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "‹"; padding-right: 0; padding-left: 0.5rem; } /* ================================================================ DROPDOWN ================================================================ */ [dir="rtl"] .dropdown-menu { text-align: right; } [dir="rtl"] .dropdown-item { text-align: right; } [dir="rtl"] .dropdown-item i, [dir="rtl"] .dropdown-item svg { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .dropdown-menu-end { right: auto !important; left: 0 !important; } /* ================================================================ PAGINATION ================================================================ */ [dir="rtl"] .pagination { flex-direction: row-reverse; } /* ================================================================ BADGES & LABELS ================================================================ */ [dir="rtl"] .badge { direction: rtl; } /* ================================================================ PROGRESS BAR ================================================================ */ [dir="rtl"] .progress-bar { direction: rtl; } /* ================================================================ MODAL ================================================================ */ [dir="rtl"] .modal-header .btn-close { margin: -0.5rem auto -0.5rem -0.5rem; } [dir="rtl"] .modal-body, [dir="rtl"] .modal-footer { text-align: right; } [dir="rtl"] .modal-footer { justify-content: flex-start; } /* ================================================================ TOPBAR ADMIN (admin/header.php) ================================================================ */ [dir="rtl"] .admin-topbar .ms-auto { margin-left: 0 !important; margin-right: auto !important; } /* ================================================================ SIDEBAR ADMIN ================================================================ */ [dir="rtl"] .app-sidebar.admin-sidebar { left: auto !important; right: 0 !important; } @media (min-width: 992px) { [dir="rtl"] .admin-main-content { margin-left: 0 !important; margin-right: 250px !important; } } /* ================================================================ PRICING CARDS ================================================================ */ [dir="rtl"] .pricing-card { text-align: right; } [dir="rtl"] .popular-badge { right: auto !important; left: 1.5rem !important; } [dir="rtl"] .pricing-features li { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .pricing-features i { margin-right: 0 !important; margin-left: 0.5rem !important; } /* ================================================================ LANDING PAGE ================================================================ */ [dir="rtl"] .hero-section, [dir="rtl"] .section-title, [dir="rtl"] .section-label { text-align: center; } [dir="rtl"] .feature-card { text-align: right; } [dir="rtl"] .navbar .ms-auto { margin-left: 0 !important; margin-right: auto !important; } /* ================================================================ MARKETER ================================================================ */ [dir="rtl"] .kanban-column { text-align: right; } [dir="rtl"] .calendar-cell { text-align: right; } /* ================================================================ UTILITAIRES SPÉCIFIQUES RTL ================================================================ */ /* Inverser les marges pour éléments inline */ [dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; } [dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; } [dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; } [dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } [dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } [dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; } /* Texte aligné à droite par défaut en AR */ [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] label, [dir="rtl"] .text-muted, [dir="rtl"] small { text-align: right; } /* Sélecteur de langue */ [dir="rtl"] .lang-selector .dropdown-menu { left: 0 !important; right: auto !important; } /* ================================================================ POLICE ARABE — Amélioration lisibilité ================================================================ */ [dir="rtl"], [dir="rtl"] * { letter-spacing: 0 !important; word-spacing: 0.05em; line-height: 1.7; } [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { line-height: 1.5; }