/** * BudgetFlow — RTL Support (Arabic) * Chargé automatiquement quand lang = 'ar' * S'appuie sur dir="rtl" posé sur */ /* ================================================================ POLICE ARABE — Noto Sans Arabic (Google Fonts, chargée par header.php) ================================================================ */ [dir="rtl"] body, [dir="rtl"] p, [dir="rtl"] span, [dir="rtl"] div, [dir="rtl"] a, [dir="rtl"] button, [dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea, [dir="rtl"] label, [dir="rtl"] td, [dir="rtl"] th, [dir="rtl"] li, [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6, [dir="rtl"] small, [dir="rtl"] strong, [dir="rtl"] em, [dir="rtl"] .form-control, [dir="rtl"] .form-select, [dir="rtl"] .form-label, [dir="rtl"] .btn { font-family: 'Noto Sans Arabic', 'Segoe UI', 'Tahoma', 'Arial', sans-serif !important; letter-spacing: 0 !important; } [dir="rtl"] body { text-align: right; direction: rtl; } /* Titres / textes */ [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { line-height: 1.55; } [dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] label, [dir="rtl"] .text-muted, [dir="rtl"] small, [dir="rtl"] span { text-align: right; } /* ================================================================ SIDEBAR (nouvelles classes après redesign) ================================================================ */ /* Sidebar à droite sur desktop */ [dir="rtl"] .app-sidebar { left: auto !important; right: 0 !important; border-right: none !important; border-left: 1px solid rgba(255,255,255,.08); transform: translateX(100%); } [dir="rtl"] .app-sidebar.sidebar-open { transform: translateX(0) !important; } @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 — logo à droite, texte à gauche */ [dir="rtl"] .sb-brand { flex-direction: row-reverse; } /* Bouton fermer mobile — côté gauche en RTL */ [dir="rtl"] .sb-brand .ms-auto { margin-left: 0 !important; margin-right: auto !important; } /* Carte utilisateur */ [dir="rtl"] .sb-user { flex-direction: row-reverse; text-align: right; } /* Mode switcher */ [dir="rtl"] .sb-mode-switcher { flex-direction: row-reverse; } [dir="rtl"] .sb-mode-btn { flex-direction: row-reverse; } /* Section label — ligne à gauche en RTL */ [dir="rtl"] .sb-section-label { flex-direction: row-reverse; text-align: right; } [dir="rtl"] .sb-section-label::after { display: none; } [dir="rtl"] .sb-section-label::before { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.08); } /* Lien nav — icon à droite, label à gauche */ [dir="rtl"] .sb-link { flex-direction: row-reverse; text-align: right; } /* Indicateur actif — côté DROIT en RTL */ [dir="rtl"] .sb-link.sb-active::before { left: auto !important; right: 0 !important; margin-left: 0 !important; margin-right: -.5rem !important; border-radius: 3px 0 0 3px !important; } /* Label nav */ [dir="rtl"] .sb-link-label { text-align: right; } /* Chips (PRO, IA, FAM) — côté GAUCHE en RTL (ms-auto inversé) */ [dir="rtl"] .sb-chip, [dir="rtl"] .sb-chip-badge, [dir="rtl"] .sb-chip-lock { margin-right: auto !important; margin-left: 0 !important; } /* Logout */ [dir="rtl"] .sb-logout { flex-direction: row-reverse; } /* Upgrade banner */ [dir="rtl"] .sb-upgrade .d-flex { flex-direction: row-reverse; } /* ================================================================ TOPBAR ================================================================ */ [dir="rtl"] .topbar, [dir="rtl"] .app-topbar { flex-direction: row-reverse; } [dir="rtl"] .topbar .ms-auto, [dir="rtl"] .app-topbar .ms-auto { margin-left: 0 !important; margin-right: auto !important; } [dir="rtl"] .topbar .me-2, [dir="rtl"] .topbar .me-3 { margin-right: 0 !important; margin-left: 0.5rem !important; } /* Hamburger menu — côté gauche en RTL */ [dir="rtl"] #sidebarToggle, [dir="rtl"] .sidebar-toggle { order: -1; } /* ================================================================ INPUT GROUPS & FORMULAIRES ================================================================ */ [dir="rtl"] .form-control, [dir="rtl"] .form-select, [dir="rtl"] .form-label, [dir="rtl"] textarea { text-align: right; direction: rtl; } [dir="rtl"] .input-group { flex-direction: row-reverse; } [dir="rtl"] .input-group > .input-group-text:first-child { border-radius: 0 0.5rem 0.5rem 0 !important; border-left: 0 !important; border-right: 1px solid #dee2e6 !important; } [dir="rtl"] .input-group > .form-control:last-child, [dir="rtl"] .input-group > .form-select:last-child { border-radius: 0.5rem 0 0 0.5rem !important; border-right: 0 !important; border-left: 1px solid #dee2e6 !important; } [dir="rtl"] .form-check { padding-left: 0; padding-right: 1.5em; text-align: right; } [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; } /* ================================================================ CARTES / CARDS ================================================================ */ [dir="rtl"] .card-header, [dir="rtl"] .card-body, [dir="rtl"] .card-footer { text-align: right; } [dir="rtl"] .card-header .d-flex, [dir="rtl"] .card-body .d-flex:not(.flex-column) { flex-direction: row-reverse; } /* KPI / stat cards */ [dir="rtl"] .stat-card .d-flex, [dir="rtl"] .kpi-card .d-flex { flex-direction: row-reverse; } /* ================================================================ ALERTES / FLASH ================================================================ */ [dir="rtl"] .alert { text-align: right; flex-direction: row-reverse; } [dir="rtl"] .alert .btn-close { margin: -0.5rem -0.5rem -0.5rem auto !important; } /* ================================================================ DROPDOWN ================================================================ */ [dir="rtl"] .dropdown-menu { text-align: right; } [dir="rtl"] .dropdown-item { text-align: right; flex-direction: row-reverse; } [dir="rtl"] .dropdown-item i, [dir="rtl"] .dropdown-item .fa-solid, [dir="rtl"] .dropdown-item svg { margin-right: 0 !important; margin-left: 0.4rem !important; } /* Dropdown aligné à gauche en RTL (était à droite en LTR) */ [dir="rtl"] .dropdown-menu-end { right: auto !important; left: 0 !important; } /* ================================================================ SÉLECTEUR DE LANGUE ================================================================ */ [dir="rtl"] .lang-selector .dropdown-menu { left: 0 !important; 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; } /* ================================================================ PAGINATION ================================================================ */ [dir="rtl"] .pagination { flex-direction: row-reverse; } /* ================================================================ PROGRESS BAR ================================================================ */ [dir="rtl"] .progress-bar { direction: rtl; } /* ================================================================ MODAL ================================================================ */ [dir="rtl"] .modal-header { flex-direction: row-reverse; } [dir="rtl"] .modal-header .btn-close { margin: -0.5rem auto -0.5rem -0.5rem !important; } [dir="rtl"] .modal-body, [dir="rtl"] .modal-footer { text-align: right; } [dir="rtl"] .modal-footer { justify-content: flex-start; flex-direction: row-reverse; } /* ================================================================ UTILITAIRES FLEX / MARGES ================================================================ */ [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; } [dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; } [dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; } /* ================================================================ BADGES ================================================================ */ [dir="rtl"] .badge { direction: rtl; } /* ================================================================ ADMIN SIDEBAR ================================================================ */ [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; } } [dir="rtl"] .admin-topbar .ms-auto { margin-left: 0 !important; margin-right: auto !important; } /* ================================================================ LANDING PAGE & PRICING ================================================================ */ [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; } [dir="rtl"] .pricing-card { text-align: right; } [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; } [dir="rtl"] .popular-badge { right: auto !important; left: 1.5rem !important; } /* ================================================================ LOGIN / AUTH PAGE ================================================================ */ [dir="rtl"] .auth-left, [dir="rtl"] .auth-right { text-align: right; } [dir="rtl"] .auth-card .d-flex { flex-direction: row-reverse; } [dir="rtl"] .input-group .btn { border-radius: 10px 0 0 10px !important; } /* ================================================================ MARKETER ================================================================ */ [dir="rtl"] .kanban-column, [dir="rtl"] .calendar-cell { text-align: right; }