/* ===== تحسينات RTL والتصميم ===== */

/* 1. دعم RTL الأساسي */
html[dir="rtl"],
html[lang="ar"] {
  direction: rtl;
  text-align: right;
}

/* Ensure core structural elements prefer RTL layout */
html[dir="rtl"] body,
html[dir="rtl"] #root,
html[dir="rtl"] .app-root,
html[dir="rtl"] .main,
html[dir="rtl"] .container {
  direction: rtl !important;
  unicode-bidi: embed !important;
}

/* html[dir="ltr"],
html[lang="en"] {
  direction: ltr;
  text-align: left;
} */

/* 2. تصحيح الـ Flexbox للـ RTL */
[dir="rtl"] .flex-row,
[dir="rtl"] .flex-container {
  flex-direction: row-reverse;
}

/* Reverse grid/flex flows for common layout wrappers */
[dir="rtl"] .row, [dir="rtl"] .d-flex, [dir="rtl"] .layout-row {
  flex-direction: row-reverse !important;
}

/* 3. تصحيح الـ Margins والـ Padding */
[dir="rtl"] .ml-auto {
  margin-left: auto;
  margin-right: 0;
}

[dir="rtl"] .mr-auto {
  margin-right: auto;
  margin-left: 0;
}

[dir="rtl"] .pl-auto {
  padding-left: 0;
  padding-right: auto;
}

[dir="rtl"] .pr-auto {
  padding-right: 0;
  padding-left: auto;
}

/* 4. تصحيح الـ Borders */
[dir="rtl"] .border-left {
  border-left: none;
  border-right: 1px solid;
}

[dir="rtl"] .border-right {
  border-right: none;
  border-left: 1px solid;
}

/* 5. تصحيح الـ Transform */
[dir="rtl"] .transform-x {
  transform: scaleX(-1);
}

/* 6. تحسين الخطوط العربية */
[lang="ar"],
[dir="rtl"] {
  /* Prefer El Messiri for Arabic UI */
  font-family: 'El Messiri', 'Segoe UI', 'Tahoma', 'Arial', sans-serif;
  letter-spacing: 0.5px;
  line-height: 1.6;
}

/* 7. تحسين الأزرار */
button, .btn {
  transition: all 0.3s ease;
  border-radius: 6px;
  font-weight: 500;
}

button:hover, .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 8. تحسين الـ Input Fields */
input, textarea, select {
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 10px 12px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

input:focus, textarea:focus, select:focus {
  border-color: #075E54;
  outline: none;
  box-shadow: 0 0 0 3px rgba(7, 94, 84, 0.1);
}

/* 9. تحسين الـ Cards */
.card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 10. تحسين الـ Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  margin-bottom: 0.5em;
}

p {
  margin-bottom: 1em;
  line-height: 1.6;
}

/* 11. تحسين الـ Navigation */
nav {
  background: linear-gradient(135deg, #075E54 0%, #25D366 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

nav a {
  transition: color 0.3s ease;
}

nav a:hover {
  color: #25D366;
}

/* Header / top nav link spacing — ensure links aren't glued together */
[dir="ltr"] nav a, [dir="ltr"] .navbar a, [dir="ltr"] header a {
  margin-right: 8px !important;
  margin-left: 0 !important;
}

[dir="rtl"] nav a, [dir="rtl"] .navbar a, [dir="rtl"] header a {
  margin-left: 8px !important;
  margin-right: 0 !important;
}

/* If the header uses a flex container with anchor children, prefer gap which is cleaner */
[dir="ltr"] nav .nav-list, [dir="ltr"] .navbar .nav-list, [dir="ltr"] header .nav-list {
  gap: 10px !important;
}

[dir="rtl"] nav .nav-list, [dir="rtl"] .navbar .nav-list, [dir="rtl"] header .nav-list {
  gap: 10px !important;
}

/* Useful-links / footer link spacing: ensure links inside stacked containers have a small gap */
.useful-links .MuiStack-root > *:not(:last-child),
.footer .MuiStack-root > *:not(:last-child),
.header-links .MuiStack-root > *:not(:last-child) {
  margin-inline-end: 8px !important; /* logical property — respects RTL/LTR */
}

/* Logo spacing: add space between logo image and adjacent text */
.brand img, .navbar .brand img, .logo img {
  vertical-align: middle;
}
.brand img + *, .navbar .brand img + *, .logo img + * {
  margin-inline-start: 10px !important; /* for RTL this becomes margin-left logically */
}

/* Ensure header action links (often use MUI Button or Link components) have breathing room */
.header-links a:not(:last-child), .header-links button:not(:last-child), .header-links .MuiButton-root:not(:last-child) {
  margin-inline-end: 6px !important;
}

/* Strong header brand and nav RTL layout fixes - ensure ordering is correct and text aligns */
header, .app-header, .topbar, .navbar, .brand, .app-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

[dir="rtl"] header, [dir="rtl"] .app-header, [dir="rtl"] .topbar, [dir="rtl"] .navbar, [dir="rtl"] .brand, [dir="rtl"] .app-brand {
  flex-direction: row-reverse !important; /* logo on the right, text to the left */
  text-align: right !important;
}

[dir="rtl"] header .brand, [dir="rtl"] .app-header .brand, [dir="rtl"] .topbar .brand, [dir="rtl"] .navbar .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ==== Material-UI header (AppBar / Toolbar) specific fixes ==================== */
/* Target the MUI AppBar + Toolbar layout that the app uses (high specificity) */
[dir="rtl"] .MuiAppBar-root .MuiToolbar-root {
  flex-direction: row-reverse !important;       /* make logo on the right, nav on the left */
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding-inline-start: 16px !important;       /* logical padding that respects RTL */
  padding-inline-end: 16px !important;
}

[dir="rtl"] .MuiAppBar-root .MuiToolbar-root .MuiStack-root {
  flex-direction: row-reverse !important;      /* ensure inner stacks reverse order */
  gap: 12px !important;                         /* consistent gap between children */
  align-items: center !important;
}

/* Add breathing room between each link/button in the header for RTL */
[dir="rtl"] .MuiAppBar-root .MuiToolbar-root .MuiStack-root > * {
  margin-inline-start: 12px !important;
  margin-inline-end: 0 !important;
}

/* Don’t apply an extra leading margin to the first child of the stack */
[dir="rtl"] .MuiAppBar-root .MuiToolbar-root .MuiStack-root > *:first-child {
  margin-inline-start: 0 !important;
}

/* Ensure logo image has a consistent logical spacing and sits visually to the right */
[dir="rtl"] .MuiAppBar-root .MuiToolbar-root img[src^="/media/"] {
  margin-inline-start: 10px !important; /* space between logo and the nav items */
  margin-inline-end: 0 !important;
  order: -1 !important; /* make sure logo appears visually at the right-most end */
}

/* Typography-based header links (privacy / terms) — align right and make their underline RTL-friendly */
[dir="rtl"] .MuiAppBar-root .MuiToolbar-root .MuiTypography-root {
  text-align: right !important;
}

[dir="rtl"] .MuiAppBar-root .MuiToolbar-root .MuiTypography-root::after {
  left: 0 !important;    /* start underline from the right side visually in RTL */
  right: auto !important;
}

/* Buttons and anchors inside the toolbar: keep consistent gap */
[dir="rtl"] .MuiAppBar-root .MuiToolbar-root .MuiButton-root,
[dir="rtl"] .MuiAppBar-root .MuiToolbar-root a,
[dir="rtl"] .MuiAppBar-root .MuiToolbar-root button {
  margin-inline-start: 12px !important;
  margin-inline-end: 0 !important;
}

/* Extra defensive rule for lists inside the toolbar (component-scoped lists) */
[dir="rtl"] .MuiAppBar-root .MuiToolbar-root ul,
[dir="rtl"] .MuiAppBar-root .MuiToolbar-root .nav-list {
  gap: 12px !important;
  display: flex !important;
  flex-direction: row-reverse !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* If hover state animation relied on right positioning, ensure it behaves in RTL too */
[dir="rtl"] .MuiAppBar-root .MuiToolbar-root .MuiTypography-root:hover::after {
  width: 100% !important;
  left: 0 !important;
  right: auto !important;
}


/* Ensure header link text aligns properly */
[dir="rtl"] nav a, [dir="rtl"] header a, [dir="rtl"] .header-links a {
  text-align: right !important;
}

/* Small utility: if some header lists still use LTR spacing, force logical gaps */
[dir="rtl"] .navbar ul, [dir="rtl"] header ul, [dir="rtl"] .topbar ul {
  display: flex !important;
  flex-direction: row-reverse !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* 12. تحسين الـ Sidebar */
[dir="rtl"] .sidebar {
  right: 0;
  left: auto;
}

[dir="ltr"] .sidebar {
  left: 0;
  right: auto;
}

/* 13. تحسين الـ Dark Mode */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1e1e1e;
    color: #e0e0e0;
  }
  
  .card {
    background-color: #2d2d2d;
    border: 1px solid #444;
  }
  
  input, textarea, select {
    background-color: #2d2d2d;
    color: #e0e0e0;
    border-color: #444;
  }
}

/* 14. تحسين الـ Responsive */
@media (max-width: 768px) {
  [dir="rtl"] .flex-row,
  [dir="rtl"] .flex-container {
    flex-direction: column-reverse;
  }
  
  [dir="ltr"] .flex-row,
  [dir="ltr"] .flex-container {
    flex-direction: column;
  }
}

/* 15. تحسين الـ Animations */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

[dir="rtl"] .animate-slide-in {
  animation: slideInLeft 0.3s ease;
}

/* ===== RTL: button & icon spacing fixes ===== */
/* Material-UI / common button icon helpers — swap margins in RTL so icons and text keep correct spacing */
[dir="rtl"] .MuiButton-startIcon {
  margin-left: 8px !important;
  margin-right: 0 !important;
  display: inline-flex;
  align-items: center;
}

[dir="rtl"] .MuiButton-endIcon {
  margin-right: 8px !important;
  margin-left: 0 !important;
  display: inline-flex;
  align-items: center;
}

/* Generic buttons using icons placed with <i>, <svg> or .icon classes */
[dir="rtl"] button .icon, [dir="rtl"] button i, [dir="rtl"] button svg {
  vertical-align: middle;
  /* ensure icon sits visually inline with text, add small breathing room on the left in RTL */
  margin-left: 0.5rem !important;
  margin-right: 0 !important;
}

/* reverse the generic rule for icon-first buttons (text after the icon) by using a helper class */
[dir="rtl"] button.icon-first .icon, [dir="rtl"] button.icon-first i, [dir="rtl"] button.icon-first svg {
  margin-left: 0.5rem !important; /* space between icon on right and text on left */
}

/* For buttons with icons placed at the end (text then icon) ensure small space on the left of icon */
[dir="rtl"] button .icon-end, [dir="rtl"] button.icon-end i, [dir="rtl"] button.icon-end svg {
  margin-left: 0.5rem !important;
}

/* small helper for rounded icon buttons to center icons consistently */
[dir="rtl"] .icon-button, [dir="rtl"] .rounded-icon, [dir="rtl"] button.icon-only {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* If facing any unexpected mirrored offsets, ensure svg children don't inherit flipped transforms */
[dir="rtl"] button svg, [dir="rtl"] .btn svg { transform: none !important; }

[dir="ltr"] .animate-slide-in {
  animation: slideInRight 0.3s ease;
}