/**
 * i18n.css — Styles RTL pour le système bilingue FR/AR
 * Supporte le basculement complet droite-vers-gauche.
 */

/* ── RTL Layout ── */
html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* Sidebar: passe à droite en RTL */
html[dir="rtl"] .app {
  grid-template-columns: 1fr 248px;
}
html[dir="rtl"] .sidebar {
  order: 2;
}
html[dir="rtl"] .main {
  order: 1;
}

/* Brand: logo à droite */
html[dir="rtl"] .sidebar .brand {
  flex-direction: row-reverse;
}

/* Navlinks: icône à droite */
html[dir="rtl"] .navlink {
  flex-direction: row-reverse;
  text-align: right;
}
html[dir="rtl"] .navlink .ic {
  text-align: center;
}

/* Spread (justify-between): flip */
html[dir="rtl"] .spread {
  flex-direction: row-reverse;
}

/* Tables: alignement */
html[dir="rtl"] th, html[dir="rtl"] td {
  text-align: right;
}
html[dir="rtl"] td.num {
  text-align: left;
}

/* Steps: flip */
html[dir="rtl"] .steps .st {
  flex-direction: row-reverse;
  padding: 6px 0 6px 14px;
}

/* Modal close button: flip */
html[dir="rtl"] .modal .mh {
  flex-direction: row-reverse;
}

/* Modal footer: flip */
html[dir="rtl"] .modal .mf {
  flex-direction: row-reverse;
}

/* Toast: left side in RTL */
html[dir="rtl"] .toast {
  right: auto;
  left: 22px;
}

/* Timeline: flip */
html[dir="rtl"] .timeline-row {
  flex-direction: row-reverse;
}

/* Donut legend: flip */
html[dir="rtl"] .donut-legend-item {
  flex-direction: row-reverse;
}
html[dir="rtl"] .donut-color-dot {
  margin-right: 0;
  margin-left: 6px;
}

/* Bar chart: flip */
html[dir="rtl"] .bar-row {
  flex-direction: row-reverse;
}
html[dir="rtl"] .bar-val {
  text-align: left;
}

/* Spinner: flip margin */
html[dir="rtl"] .spinner {
  margin-right: 0;
  margin-left: 8px;
}

/* Form grid: same in RTL */
/* Cards: no change needed */
/* Stat tiles: no change needed */

/* ── Toggle Button Styling ── */
.lang-toggle-wrap {
  padding: 0 4px 12px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 10px;
}

/* ── Mobile RTL ── */
@media(max-width:820px) {
  html[dir="rtl"] .app {
    grid-template-columns: 1fr;
  }
  html[dir="rtl"] .sidebar {
    order: 0;
    flex-direction: row;
  }
}

/* ── Font Stack for Arabic ── */
html[lang="ar"] body {
  font-family: 'Inter', 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}

/* ── Tooltip RTL flip ── */
html[dir="rtl"] [data-tooltip]:hover::after {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

/* ── Leaflet map RTL fix ── */
html[dir="rtl"] .leaflet-control-attribution {
  text-align: left;
}

/* ── Section Arabic Content Box (existing) ── */
.ar-content-box {
  direction: rtl;
  text-align: right;
  font-family: 'Noto Sans Arabic', 'Inter', sans-serif;
  line-height: 1.8;
}