/* ============================================================================
   rtl.css — Surcharges CSS pour les langues RTL (arabe, etc.)
   ============================================================================
   Ce fichier est chargé sur TOUTES les pages mais ne s'applique QUE quand
   <html dir="rtl">. L'attribut `dir` est positionné automatiquement par i18n.js
   selon la langue active.

   La plupart des éléments (flex, grid, text-align natural) s'adaptent tout
   seuls. Ce fichier ajuste UNIQUEMENT les cas où le CSS source utilise des
   propriétés physiques (left/right, margin-left, etc.) au lieu de logiques
   (inline-start/end). On les "miroitise" en RTL.
   ============================================================================ */

/* ==================== GLOBAL ==================== */

/* Style de base lisible : la plupart des polices web latin gèrent l'arabe,
   mais on déclare une police preferred RTL pour un meilleur rendu. */
html[dir="rtl"] body {
  font-family: "Segoe UI", Tahoma, Arial, "Noto Sans Arabic", "Geeza Pro", sans-serif;
}

/* Force text-align logique pour les blocs */
html[dir="rtl"] body,
html[dir="rtl"] .main-container,
html[dir="rtl"] .dashboard-main,
html[dir="rtl"] .auth-card,
html[dir="rtl"] .review-main {
  text-align: right;
}

/* ==================== HEADER / NAVIGATION ==================== */

html[dir="rtl"] .header-left {
  flex-direction: row;          /* reste row, mais s'inverse via dir natif */
}

/* Bouton collapse (paysage, max-height:500px) : figé left:8px en source.
   En RTL les contrôles (dont l'icône profil 👤) passent à GAUCHE, donc on
   renvoie le toggle à DROITE (côté logo/titre) pour ne plus le recouvrir.
   !important requis car la règle source (responsive.css) en a un. */
html[dir="rtl"] .header-collapse-toggle {
  left: auto !important;
  right: 8px !important;
}

/* Sépare logo / chevron / titre avec margin logique */
html[dir="rtl"] .add-title {
  margin-right: 0;
  margin-left: 8px;
}

/* Menu déroulant utilisateur (sous bouton 👤)
   En LTR il a `right: 0` (s'ouvre vers la gauche depuis le bouton).
   En RTL le bouton est à GAUCHE de l'écran, donc le menu doit avoir
   `left: 0` pour s'ouvrir vers la droite (et ne pas déborder à gauche). */
html[dir="rtl"] .user-dropdown,
html[dir="rtl"] .actions-dropdown,
html[dir="rtl"] .lang-switcher-dropdown {
  right: auto;
  left: 0;
}

/* Items du menu : texte à droite en RTL au lieu de gauche */
html[dir="rtl"] .user-dropdown-item {
  text-align: right;
}

/* Boutons "+ Ajouter" du menu actions : icon à droite en RTL */
html[dir="rtl"] .actions-item-icon {
  margin-right: 0;
  margin-left: 10px;
}

/* ==================== SIDEBAR (liste cartes) ==================== */

/* La sidebar passe à droite et le detail-panel à gauche, naturellement
   grâce à dir=rtl sur le parent flex. */

/* Barre de défilement boutons ↑↓ */
html[dir="rtl"] .scroll-arrows {
  right: auto;
  left: 8px;
}

/* Border-right de sidebar → border-left en RTL */
html[dir="rtl"] .sidebar {
  border-right: none;
  border-left: 1px solid var(--border-light);
}

/* ==================== CARDS LIST ITEMS ==================== */

/* Card item dans la liste : épingle, badges */
html[dir="rtl"] .card-item .pin-indicator {
  right: auto;
  left: 8px;
}

html[dir="rtl"] .card-tags-mini {
  margin-left: 0;
  margin-right: 4px;
}

/* ==================== DETAIL PANEL ==================== */

/* Mobile back button : flèche → ← en RTL */
html[dir="rtl"] .mobile-back-btn {
  /* La flèche "← Retour" devient "Retour →" : on accepte le rendu naturel
     mais on peut ajuster si nécessaire. */
}

/* Detail field : label à droite, value à gauche en RTL */
html[dir="rtl"] .detail-field {
  /* flex-direction reste row, mais s'inverse */
}

/* Tags pills */
html[dir="rtl"] .detail-tag {
  margin-right: 0;
  margin-left: 6px;
}

html[dir="rtl"] .detail-tag .tag-remove-x {
  margin-left: 0;
  margin-right: 4px;
}

/* ==================== MODALES ==================== */

/* Boutons close (✕) en top-right → top-left en RTL */
html[dir="rtl"] .modal-close {
  right: auto;
  left: 12px;
}

/* Footer modal : boutons s'alignent à gauche en RTL */
html[dir="rtl"] .modal-footer {
  flex-direction: row;          /* dir natif inverse */
}

/* Input password show/hide button */
html[dir="rtl"] .password-toggle-btn {
  right: auto;
  left: 8px;
}

/* Wizard import : pill files */
html[dir="rtl"] .import-file-pill .import-remove {
  margin-left: 0;
  margin-right: 8px;
}

/* ==================== TOAST ==================== */

html[dir="rtl"] .toast,
html[dir="rtl"] .toast-container {
  /* Toast en bas-droite → bas-gauche en RTL */
  right: auto;
  left: 24px;
}

/* ==================== SPINNER GLOBAL ==================== */

html[dir="rtl"] .spinner-overlay-text {
  /* texte spinner reste centré */
  text-align: center;
}

/* ==================== AUTH PAGES (login / register / forgot) ==================== */

html[dir="rtl"] .auth-page {
  text-align: right;
}

html[dir="rtl"] .auth-form label {
  text-align: right;
}

html[dir="rtl"] .auth-error {
  text-align: right;
}

/* Eye button password */
html[dir="rtl"] .password-input-wrapper .password-toggle-btn {
  right: auto;
  left: 8px;
}

/* ==================== DASHBOARD ==================== */

html[dir="rtl"] .kpi-card,
html[dir="rtl"] .chart-card {
  text-align: right;
}

/* Tooltip carte du monde : flèche depuis le bon côté */
html[dir="rtl"] .map-tooltip {
  /* Position absolue calculée en JS via mouse coords, ok */
}

/* Légende carte : gradient inversé */
html[dir="rtl"] .map-legend-gradient {
  background: linear-gradient(to left, #dbeafe 0%, #3b82f6 50%, #1e3a8a 100%);
}

/* Chart.js : pas d'ajustement nécessaire (canvas est neutre) */

/* Bouton "← Retour aux pays" */
html[dir="rtl"] .geo-back-btn {
  /* Le caractère ← reste tel quel, devient une flèche visuelle qui
     pointe à droite en contexte RTL. Acceptable. */
}

/* ==================== REVIEW BATCH ==================== */

html[dir="rtl"] .review-card {
  text-align: right;
}

html[dir="rtl"] .review-field label {
  text-align: right;
}

/* ==================== PROFILE ==================== */

html[dir="rtl"] .profile-section,
html[dir="rtl"] .profile-section h2 {
  text-align: right;
}

html[dir="rtl"] .profile-section .form-group label {
  text-align: right;
}

/* Section bouton "← Retour à l'app" : flèche s'adapte automatiquement
   par le caractère, on ne touche pas. */

/* ==================== FILTER BANNER ==================== */

html[dir="rtl"] .filter-banner {
  text-align: right;
}

html[dir="rtl"] .filter-banner-back {
  /* Flèche ← reste ← en source mais s'affiche selon contexte */
}

/* ==================== SCROLLBAR (Webkit) ==================== */

/* Pour Webkit (Chrome, Edge, Safari) on garde la scrollbar à droite par
   défaut, ce qui est OK avec dir=rtl (elle passe à gauche automatiquement). */

/* ==================== INPUTS / SELECT ==================== */

html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

/* Mais les champs numériques / techniques (téléphone, email, URL)
   restent en LTR car contenus latins : */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[name="email"],
html[dir="rtl"] input[id*="email"],
html[dir="rtl"] input[id*="telephone"],
html[dir="rtl"] input[id*="phone"],
html[dir="rtl"] input[id*="username"],
html[dir="rtl"] input[id*="password"] {
  direction: ltr;
  text-align: left;
}

/* Search input garde direction LTR pour saisie facile FR/EN aussi */
html[dir="rtl"] #search-input {
  direction: rtl;
  text-align: right;
}

/* ==================== CODE / NUMBERS / URLS / EMAILS ==================== */

/* Les éléments avec contenu technique latin restent en LTR :
   adresses, téléphones, emails, URLs, codes. */
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .detail-field-value[data-field="telephones"],
html[dir="rtl"] .detail-field-value[data-field="email"],
html[dir="rtl"] .detail-field-value[data-field="site_web"],
html[dir="rtl"] .action-chooser-item {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}

/* Inputs review : isoler la valeur LTR sans forcer l'alignement (placeholder AR préservé). */
html[dir="rtl"] .review-field-input[data-field="telephones"],
html[dir="rtl"] .review-field-input[data-field="email"],
html[dir="rtl"] .review-field-input[data-field="site_web"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==================== HELPERS UTILITY ==================== */

/* Si une classe utility ".text-left" est utilisée, conservons-la
   neutre (relative à la langue) : */
html[dir="rtl"] .text-left {
  text-align: right !important;
}

html[dir="rtl"] .text-right {
  text-align: left !important;
}

/* ==================== END ==================== */