/* ============================================================================
   JTI Terrain — Mode RTL (arabe), Phase 4
   Chargé UNIQUEMENT quand la langue active est l'arabe (cf. default.ctp).

   Le template Elite Admin est écrit en LTR avec des marges/positions figées
   (left/right), donc `dir="rtl"` ne suffit pas : ce fichier retourne les
   éléments de structure que le navigateur ne peut pas inverser seul.
   Les nouveaux composants (login, tombola, état vide) sont écrits avec des
   propriétés logiques et n'ont rien à corriger ici.
   ========================================================================== */

:root { --jti-ar: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Dubai", "Tahoma", sans-serif; }

/* -------------------------- typographie arabe --------------------------- */
/* Interlignage plus généreux : les diacritiques et les hampes de l'arabe
   ont besoin de plus de hauteur que le latin. Et surtout AUCUN letter-spacing :
   l'arabe est une écriture liée, espacer les lettres casse les ligatures. */
[dir="rtl"] body,
[dir="rtl"] .sidebar-nav #sidebarnav li a,
[dir="rtl"] .card-title,
[dir="rtl"] .btn,
[dir="rtl"] label,
[dir="rtl"] .form-control,
[dir="rtl"] .table th,
[dir="rtl"] .table td {
    font-family: var(--jti-ar);
    line-height: 1.75;
    letter-spacing: normal !important;
}
[dir="rtl"] .table thead th,
[dir="rtl"] .text-muted,
[dir="rtl"] h6 {
    letter-spacing: normal !important;
}

/* Les chiffres restent en latin, alignés en colonnes : les indicateurs et les
   tableaux se lisent de gauche à droite même en RTL (convention comptable). */
[dir="rtl"] .num,
[dir="rtl"] h2,
[dir="rtl"] .apexcharts-text {
    direction: ltr;
    unicode-bidi: embed;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------ coquille -------------------------------- */
/* Barre latérale à droite, contenu décalé à droite. */
[dir="rtl"] .left-sidebar { left: auto; right: 0;
    border-right: none; border-left: 1px solid var(--jti-border); }
[dir="rtl"] .page-wrapper { margin-left: 0; margin-right: 240px; }
[dir="rtl"] .topbar .navbar-header { float: right; }

@media (max-width: 767px) {
    [dir="rtl"] .page-wrapper { margin-right: 0; }
    [dir="rtl"] .left-sidebar { right: -240px; left: auto; }
    [dir="rtl"].show-sidebar .left-sidebar,
    [dir="rtl"] .show-sidebar .left-sidebar { right: 0; }
}

/* Sidebar réduite */
[dir="rtl"] .mini-sidebar .page-wrapper { margin-right: 60px; margin-left: 0; }

/* -------------------------- navigation latérale -------------------------- */
[dir="rtl"] .sidebar-nav #sidebarnav li a { text-align: right; }
[dir="rtl"] .sidebar-nav > ul > li > a i { margin-left: 10px; margin-right: 0; }
[dir="rtl"] .sidebar-nav #sidebarnav li ul li a { padding: 7px 34px 7px 12px; }
/* Bloc utilisateur en pied de barre : le contenu s'aligne à droite. */
[dir="rtl"] .jti-sideuser-btn { text-align: right; }
[dir="rtl"] .jti-sideuser-menu { right: auto !important; left: 0 !important; }
[dir="rtl"] .jti-sideuser-menu .dropdown-item { text-align: right; }

/* La flèche des sous-menus pointe vers l'intérieur (donc vers la gauche). */
[dir="rtl"] .sidebar-nav #sidebarnav li a.has-arrow::after {
    right: auto; left: 15px;
    -webkit-transform: rotate(-135deg) translate(0, -50%);
    transform: rotate(-135deg) translate(0, -50%);
}

/* ------------------------------ topbar ---------------------------------- */
[dir="rtl"] .topbar .navbar-nav.mr-auto { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .dropdown-menu-right { right: auto !important; left: 0 !important; }
[dir="rtl"] .mailbox .message-center a .mail-contnet { padding-right: 10px; padding-left: 0; }
[dir="rtl"] .dropdown-user li a i { margin-left: 8px; margin-right: 0; }
[dir="rtl"] #ds-notif-badge,
[dir="rtl"] #supdem-notif-badge { right: auto !important; left: -2px !important; }

/* ------------------------- fil d'ariane / titres ------------------------ */
[dir="rtl"] .page-titles .breadcrumb {
    float: right !important;
    justify-content: flex-end !important;
}
/* Le chevron « > » de Bootstrap doit pointer vers la gauche. */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "\\003c"; }
[dir="rtl"] .breadcrumb-item + .breadcrumb-item { padding-right: .5rem; padding-left: 0; }

/* --------------------------- formulaires -------------------------------- */
[dir="rtl"] .form-control,
[dir="rtl"] .select2-container .select2-selection--single { text-align: right; }
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto; left: 3px;
}
/* La saisie reste LTR : identifiants, dates et nombres se tapent en latin. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] .date-picker,
[dir="rtl"] .flatpickr-input {
    direction: ltr;
    text-align: left;
}
[dir="rtl"] .lstick { margin-left: 10px; margin-right: 0; }

/* ---------------------------- tableaux ---------------------------------- */
[dir="rtl"] .table th,
[dir="rtl"] .table td { text-align: right; }
[dir="rtl"] .pull-right { float: left !important; }
[dir="rtl"] .pull-left { float: right !important; }
[dir="rtl"] .text-right { text-align: left !important; }
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }

/* -------------------------- boîtes de dialogue -------------------------- */
[dir="rtl"] .swal2-popup { direction: rtl; font-family: var(--jti-ar); }
[dir="rtl"] .flatpickr-calendar { direction: ltr; } /* un calendrier reste LTR */