/* /assets/css/dir.css
   Direction Layer: تقليب واجهة RTL/LTR بدون المساس بملفاتك الأساسية
   - نستخدم الخصائص المنطقية قدر الإمكان
   - نُصلّح الحالات التي ما كانت تنعكس (drawer, dropdown, محاذاة الحقول…)
*/

/* ============================
   أساسيات عامة
============================ */
html[dir="rtl"], html[dir="ltr"] {
  /* ما نغيّر شيء هنا؛ التفاصيل بالأسفل */
}

html[dir="rtl"] body,
html[dir="ltr"] body {
  text-align: initial;
}

/* خلي النصوص والحقول تبدأ من بداية السطر دايمًا */
input, select, textarea, button, .preview-link, #q {
  text-align: start;
}

/* ============================
   الحاوية الرئيسية + السايدبار
============================ */
.sidebar {
  /* في style.css عندك inset-inline-start:12px (منطقي ويعكس تلقائيًا) — نتركه */
}

/* المسافة الجانبية للحاوية تعتمد على السايدبار عند بداية السطر */
.container { padding-inline-start: calc(72px + 20px); }
@media (max-width:768px){
  .container { padding-inline-start: 0 !important; }
}

/* ============================
   صف الهيدر + الناف
============================ */
.nav { margin-inline-start: auto; } /* يبقى منطقي */

/* القوائم المنسدلة: لازم تتموضع عند نهاية السطر (يمين في RTL ويسار في LTR) */
.dropdown {
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  left: auto !important;  /* لو في ستايل قديم */
  right: auto !important; /* لو في ستايل قديم */
}

/* ============================
   الـ Drawer (اللوحة الجانبية المتحركة)
   — هذه كانت ما تنقلب: نصلّحها الآن
============================ */
html[dir="rtl"] .drawer .panel {
  inset-inline-end: 0 !important;
  inset-inline-start: auto !important;
  border-inline-start: 1px solid var(--menu-border, transparent) !important;
  border-inline-end: none !important;
}
html[dir="ltr"] .drawer .panel {
  inset-inline-start: 0 !important;
  inset-inline-end: auto !important;
  border-inline-end: 1px solid var(--menu-border, transparent) !important;
  border-inline-start: none !important;
}

/* ============================
   الحقول والعناوين في الصفوف
============================ */
.row > label {
  text-align: start;
  min-width: 180px;
}

/* ============================
   كلاسّات مساعدة منطقية
============================ */
.ml-auto { margin-inline-start: auto !important; }
.mr-auto { margin-inline-end: auto !important; }
.pl-16   { padding-inline-start: 16px !important; }
.pr-16   { padding-inline-end: 16px !important; }

/* ============================
   بطاقات/قوائم الإشعارات
============================ */
#bellMenu .head,
#bellMenu .list .item,
#bellMenu .item .k,
#bellMenu .item .t,
#bellMenu .item .m {
  text-align: start;
}

/* ============================
   الجداول (settings)
============================ */
.roles-table th,
.roles-table td { text-align: start; }

/* ============================
   أيقونات تحتاج انعكاس اختياري
============================ */
html[dir="rtl"] .flip-in-rtl { transform: scaleX(-1); }
html[dir="ltr"] .flip-in-rtl { transform: none; }

/* ============================
   إصلاحات عامة إضافية
============================ */
/* لو فيه عناصر كانت تستخدم left/right صراحة في CSS قديم:
   حوّلها هنا للمنطقي. مثال (معلّق):
   .some-card { padding: 10px; }
   html[dir="rtl"] .some-card { border-inline-start: 1px solid var(--menu-border); }
   html[dir="ltr"] .some-card { border-inline-start: 1px solid var(--menu-border); }
*/