/* =========================================================
   rtl.css — loads AFTER main.css (RTL tweaks)
   ========================================================= */

/* استخدم :dir(rtl) + [dir="rtl"] لضمان أقصى توافق عبر المتصفحات */
:is(html[dir="rtl"], :dir(rtl)) body{
  /* الـ direction نفسه متحدد على عنصر html؛ هنا نضمن محاذاة منطقية افتراضيًا */
  text-align: start;
}

/* =========================================================
   تحسينات عامة للـ RTL (غير مدمّرة)
   ========================================================= */

/* Navbar: ضبط بسيط لتتبّع الحروف في الروابط */
:is(html[dir="rtl"], :dir(rtl)) .navbar .nav-link{
  letter-spacing: .1px;
}

/* Breadcrumb: اللون فقط — الاتجاه/الفواصل يُدار منطقيًا بالفعل */
:is(html[dir="rtl"], :dir(rtl)) .breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  color: var(--muted);
}

/* القوائم المنسدلة: محاذاة نص منطقية */
:is(html[dir="rtl"], :dir(rtl)) .dropdown-menu{
  text-align: start;
}

/* عناصر لها padding-inline منطقي (منع مسافة أول السطر) */
:is(html[dir="rtl"], :dir(rtl)) .list-group{
  padding-inline-start: 0;
}

/* فواصل التاريخ في الـ Topbar — متناسق مع main.css */
:is(html[dir="rtl"], :dir(rtl)) .topbar .date-separator{
  margin-inline: .5rem;
}
@media (max-width:575.98px){
  :is(html[dir="rtl"], :dir(rtl)) .topbar .date-separator{
    margin-inline: .25rem;
    line-height: 1;
  }
}

/* =========================================================
   أيقونات الاتجاه — منطقي فقط (بدون قلب شامل لأيقونات Bootstrap)
   ========================================================= */

/* 1) Bootstrap Carousel controls (منطقي) */
:is(html[dir="rtl"], :dir(rtl)) .carousel-control-next-icon{ transform: scaleX(-1); }
:is(html[dir="rtl"], :dir(rtl)) .carousel-control-prev-icon{ transform: scaleX(-1); }

/* 2) Utilities اختيارية لقلب الأيقونات ذات الدلالة الاتجاهية
   - استخدم واحدة من الكلاسات دي على عنصر الأيقونة نفسه:
     .icon-prev  ← “السابق”
     .icon-next  ← “التالي”
     .dir-start  ← اتجاه "البداية" منطقيًا
     .dir-end    ← اتجاه "النهاية" منطقيًا
   - أو data-attr:
     <i class="icon-dir" data-dir="prev"></i> …وهكذا
*/
:is(html[dir="rtl"], :dir(rtl)) .icon-prev,
:is(html[dir="rtl"], :dir(rtl)) .icon-next,
:is(html[dir="rtl"], :dir(rtl)) .dir-start,
:is(html[dir="rtl"], :dir(rtl)) .dir-end{
  transform: scaleX(-1);
}
:is(html[dir="rtl"], :dir(rtl)) .icon-dir[data-dir="prev"],
:is(html[dir="rtl"], :dir(rtl)) .icon-dir[data-dir="next"],
:is(html[dir="rtl"], :dir(rtl)) .icon-dir[data-dir="start"],
:is(html[dir="rtl"], :dir(rtl)) .icon-dir[data-dir="end"]{
  transform: scaleX(-1);
}

/* ملاحظة:
   عمداً لا نقلب .bi-chevron-left/.bi-chevron-right وأشباههم عالميًا
   لتفادي كسر أيقونات غير دلالية. استخدم الكلاسات/الـdata أعلاه عند الحاجة.
*/

/* =========================================================
   منطق start/end للنص — محاذاة آمنة
   ========================================================= */
:is(html[dir="rtl"], :dir(rtl)) .text-start { text-align: start !important; }
:is(html[dir="rtl"], :dir(rtl)) .text-end   { text-align: end !important; }

/* =========================================================
   تحسين الوصول: تركيز الأزرار
   ========================================================= */
:is(html[dir="rtl"], :dir(rtl)) .btn:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}