/* ============================================================
   RTL — Right-to-Left overrides for Arabic layout
   Most layout already uses CSS logical properties (inset-inline-*)
   so physical position overrides are minimal here.
   ============================================================ */

html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Dark sidebar border: flip side when RTL */
html[dir="rtl"] .sidebar {
  border-left: none;
  border-right: 1px solid var(--sidebar-border);
}

/* Nav sub-menu indentation flip */
html[dir="rtl"] .nav-sub .nav-link {
  padding-inline-start: var(--sp-4);
  padding-inline-end: calc(var(--sp-4) + 20px + var(--sp-3));
}

/* Active indicator already uses logical inset-inline-start */

/* ── Breadcrumb separator ──────────────────────── */
html[dir="rtl"] .breadcrumb-sep { transform: scaleX(-1); display: inline-block; }

/* ── Directional icon flip ─────────────────────── */
html[dir="rtl"] .icon-flip-rtl { transform: scaleX(-1); }

/* ── Toast: entrance animation from left ───────── */
@keyframes toast-in-rtl {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
html[dir="rtl"] .toast { animation-name: toast-in-rtl; }
html[dir="rtl"] .toast.toast-success { border-inline-start: none; border-inline-end: 4px solid var(--color-success); }
html[dir="rtl"] .toast.toast-danger  { border-inline-start: none; border-inline-end: 4px solid var(--color-danger);  }
html[dir="rtl"] .toast.toast-warning { border-inline-start: none; border-inline-end: 4px solid var(--color-warning); }
html[dir="rtl"] .toast.toast-info    { border-inline-start: none; border-inline-end: 4px solid var(--color-info);    }

/* ── Table alignment ───────────────────────────── */
html[dir="rtl"] .data-table thead th,
html[dir="rtl"] .data-table tbody td { text-align: right; }
html[dir="rtl"] .data-table td.numeric { text-align: left; }
html[dir="rtl"] .row-actions { justify-content: flex-start; }

/* ── Card/toolbar reverse ──────────────────────── */
html[dir="rtl"] .table-toolbar { flex-direction: row-reverse; }
html[dir="rtl"] .table-toolbar .ms-auto,
html[dir="rtl"] .form-actions  .ms-auto { margin-inline-start: 0; margin-inline-end: auto; }

/* ── KPI card icon placement ───────────────────── */
html[dir="rtl"] .kpi-card { flex-direction: row-reverse; }

/* ── Page header ───────────────────────────────── */
html[dir="rtl"] .page-header { flex-direction: row-reverse; }

/* ── Select2 ───────────────────────────────────── */
html[dir="rtl"] .select2-container { direction: rtl; }

/* ── DataTables RTL ────────────────────────────── */
html[dir="rtl"] div.dataTables_wrapper { direction: rtl; }
html[dir="rtl"] table.dataTable thead th { text-align: right !important; }
html[dir="rtl"] table.dataTable tbody td { text-align: right; }

/* ── Input icons (password toggle, search) ─────── */
html[dir="rtl"] .input-icon-wrapper .form-control { padding-left: var(--sp-3); padding-right: 36px; }
html[dir="rtl"] .input-icon-wrapper .input-icon   { left: auto; right: var(--sp-3); }
html[dir="rtl"] .password-wrapper .form-control   { padding-right: var(--sp-3); padding-left: 40px; }
html[dir="rtl"] .password-toggle                  { right: auto; left: var(--sp-3); }

/* ── Table search ──────────────────────────────── */
html[dir="rtl"] .table-search { padding-left: 10px; padding-right: 32px; }
html[dir="rtl"] .table-search-icon { left: auto; right: 10px; }

/* ── Input wrap (auth page) ────────────────────── */
html[dir="rtl"] .input-icon-wrap .form-control   { padding-left: 40px; padding-right: var(--sp-3); }
html[dir="rtl"] .input-icon-btn                  { right: auto; left: var(--sp-3); }