/* =====================================================================
   RTL overrides (scoped correctly for desktop vs mobile)
   ===================================================================== */

/* 1) Global direction tweaks */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .login-box { text-align: right; }
html[dir="rtl"] input,
html[dir="rtl"] textarea { text-align: right; }
html[dir="rtl"] .password-field input { padding-left: 42px; padding-right: 12px; }
html[dir="rtl"] .password-field .toggle-password { left: 12px; right: auto; }
html[dir="rtl"] .nav-item .icon { margin-inline-end: 0; margin-inline-start: 12px; }
html[dir="rtl"] .mg-lang--inline { margin-inline: auto; }

/* 2) Desktop (≥769px) — sidebar sits on the right & content reserves space */
@media (min-width: 769px) {
  html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    transform: none !important;        /* no off-canvas on desktop */
    border-right: none;
    border-left: 1px solid var(--neutral-border);
  }

  html[dir="rtl"] .main {
    margin-left: 0;
    margin-right: 240px;               /* reserve space for the sidebar */
  }

  html[dir="rtl"] .sidebar-toggle {
    left: auto;
    right: 16px;
    display: none;                     /* hidden on desktop */
  }
}

/* 3) Mobile (≤768px) — off-canvas behavior mirrored for RTL */
@media (max-width: 768px) {
  /* Sidebar slides from the right in RTL */
  html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);       /* hidden off-canvas */
    transition: transform .3s ease;
    border-right: none;
    border-left: 1px solid var(--neutral-border);
  }

  html[dir="rtl"] .sidebar.active {
    transform: translateX(0);          /* shown */
  }

  /* Content fills full width on mobile */
  html[dir="rtl"] .main {
    margin-right: 0;
    margin-left: 0;
    padding-top: 60px;                 /* room for the toggle */
  }

  /* Toggle lives on the right in RTL */
  html[dir="rtl"] .sidebar-toggle {
    left: auto;
    right: 16px;
    display: block;
  }
}