/* 
========================================
   Custom Language & Direction Styles
 ========================================
*/

/* ========== Fonts ========== */
/* Arabic Font (Tajawal) */
@import url('https://fonts.googleapis.com/css2?family=tajawal:wght@200;300;400;500;700;800;900&display=swap');

/* English Font (Poppins) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ========== Font Family ========== */
html[lang="ar"] body,
html[lang="ar"] *:not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab) {
  font-family: "Tajawal", sans-serif !important;
}

html[lang="en"] body,
html[lang="en"] *:not(i):not(.fa):not(.fas):not(.far):not(.fal):not(.fab) {
  font-family: "Poppins", sans-serif !important;
}

/* ========== Direction ========== */
html[dir="rtl"] {
  direction: rtl !important;
  text-align: right !important;
}
html[dir="ltr"] {
  direction: ltr !important;
  text-align: left !important;
}

/* ========== Sidebar & Header ========== */
/* RTL Sidebar */
html[dir="rtl"] .sidebar {
  right: 0 !important;
  left: auto !important;
  border-right: none !important;
  border-left: 1px solid #EDF0F2 !important;
}
html[dir="rtl"] .header {
  margin-right: 220px !important;
  margin-left: 0 !important;
}
html[dir="rtl"] .sidebar-small .header {
  margin-right: 70px !important;
  margin-left: 0 !important;
}
html[dir="rtl"] .main {
  left: 0 !important;
  right: auto !important;
}
html[dir="rtl"] .sidebar .sidebar-toggle {
  left: -12px !important;
  right: auto !important;
}

/* LTR Sidebar */
html[dir="ltr"] .sidebar {
  left: 0 !important;
  right: auto !important;
  border-left: none !important;
  border-right: 1px solid #EDF0F2 !important;
}
html[dir="ltr"] .header {
  margin-left: 220px !important;
  margin-right: 0 !important;
}
html[dir="ltr"] .sidebar-small .header {
  margin-left: 70px !important;
  margin-right: 0 !important;
}
html[dir="ltr"] .main {
  right: 0 !important;
  left: auto !important;
}

/* ========== Menu Items ========== */
html[dir="rtl"] .sidebar .menu .menu-item .menu-link {
  text-align: right !important;
  padding-right: 20px !important;
  padding-left: 10px !important;
}

html[dir="rtl"] .sidebar .menu .menu-item .menu-link i {
  margin-left: 10px !important;
  margin-right: 0 !important;
}
html[dir="ltr"] .sidebar .menu .menu-item .menu-link i {
  margin-right: 10px !important;
  margin-left: 0 !important;
}

/* Bullets */
html[dir="rtl"] .sidebar .menu .menu-item .menu-bullet {
  right: 16px;
  left: auto !important;
}
html[dir="ltr"] .sidebar .menu .menu-item .menu-bullet {
  left: 16px;
  right: auto !important;
}

/* ========== Arrows & Icons ========== */
html[dir="rtl"] .fa-arrow-right:before { content: "\f061"; }
html[dir="rtl"] .fa-arrow-left:before { content: "\f060"; } 

html[dir="ltr"] .fa-arrow-right:before { content: "\f061"; }
html[dir="ltr"] .fa-arrow-left:before { content: "\f060"; }

/* Accordion arrows */
html[dir="rtl"] .menu-arrow {
  transform: scaleX(-1);
}
html[dir="ltr"] .menu-arrow {
  transform: none;
}

/* ========== Margins & Paddings Swap ========== */
/* Margin */
html[dir="rtl"] .mr-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .mr-5 { margin-left: 3rem !important; margin-right: 0 !important; }
html[dir="rtl"] .form-check-input {margin-right: 20px !important; }

html[dir="rtl"] .ml-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ml-5 { margin-right: 3rem !important; margin-left: 0 !important; }

html[dir="rtl"] .ml-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .mr-auto { margin-left: auto !important; margin-right: 0 !important; }

/* Padding */
html[dir="rtl"] .pr-1 { padding-left: 0.25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-2 { padding-left: 0.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-3 { padding-left: 1rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-4 { padding-left: 1.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pr-5 { padding-left: 3rem !important; padding-right: 0 !important; }

html[dir="rtl"] .pl-1 { padding-right: 0.25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-2 { padding-right: 0.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-3 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-4 { padding-right: 1.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .pl-5 { padding-right: 3rem !important; padding-left: 0 !important; }

/* ========== Borders ========== */
html[dir="rtl"] .border-left {
  border-left: none !important;
  border-right: 1px solid #e5e7eb !important;
}
html[dir="rtl"] .border-right {
  border-right: none !important;
  border-left: 1px solid #e5e7eb !important;
}

/* ========== Text Alignment ========== */
html[dir="rtl"] .text-left { text-align: right !important; }
html[dir="rtl"] .text-right { text-align: left !important; }

/* ========== Media Queries ========== */
@media only screen and (max-width: 768px) {
  html[dir="rtl"] .sidebar {
    right: -250px !important;
    left: auto !important;
  }
  html[dir="rtl"] .sidebar-open .sidebar {
    right: 0 !important;
  }
}
