/* ============================================================
   RTL.CSS — RTL-only overrides (loaded via main.css)
   Activated by `[dir="rtl"]` selector — has zero effect in LTR.
   Approach: keep the existing LTR layout untouched; layer
   RTL-specific corrections on top.
   ============================================================ */

/* ── 1. Arabic font preload (only fetched when ar is active) ── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

/* ── 2. Apply Arabic font stack only when [lang="ar"] ── */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: 'Tajawal', 'Cairo', 'Noto Kufi Arabic', system-ui, sans-serif;
}

/* Cairo carries weight better for headings, keep it for big titles. */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] .auth-brand__name,
html[lang="ar"] .navbar__page-title {
  font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
  letter-spacing: 0;
}

/* Arabic typography polish: slightly larger numerals, comfortable line-height. */
html[lang="ar"] body {
  line-height: 1.65;
}
html[lang="ar"] :where(.btn, button, .nav-link, .sidebar-link) {
  letter-spacing: 0;
}

/* ── 3. Flip directional icons in RTL ────────────────────────
   We flip ONLY icons that are actually direction-sensitive.
   Anything not listed here keeps its original orientation.
   ──────────────────────────────────────────────────────────── */
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-caret-left,
[dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-circle-chevron-left,
[dir="rtl"] .fa-circle-chevron-right,
[dir="rtl"] .fa-arrow-right-from-bracket,
[dir="rtl"] .fa-arrow-left-long,
[dir="rtl"] .fa-arrow-right-long,
[dir="rtl"] .icon-flip-rtl {
  transform: scaleX(-1);
}

/* Breadcrumb separator should point the natural reading direction. */
[dir="rtl"] .nb-crumb-sep,
[dir="rtl"] .breadcrumb__sep {
  transform: scaleX(-1);
  display: inline-block;
}

/* ── 4. Sidebar — mirror to the right edge ──────────────────── */
[dir="rtl"] .sb-v2-rail {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border, rgba(15,23,42,.08));
}
[dir="rtl"] .sb-v2-drawer {
  left: auto;
  right: var(--sb-rail-w, 64px);
  border-right: none;
  border-left: 1px solid var(--border, rgba(15,23,42,.08));
}
[dir="rtl"] body.sb-v2-pinned .dashboard-main,
[dir="rtl"] body.sb-v2-pinned #main-content {
  margin-left: 0;
  margin-right: calc(var(--sb-rail-w, 64px) + var(--sb-drawer-w, 240px));
}
[dir="rtl"] body.sb-v2 .dashboard-main,
[dir="rtl"] body.sb-v2 #main-content {
  margin-left: 0;
  margin-right: var(--sb-rail-w, 64px);
}

/* Sidebar tooltips appear on the opposite side. */
[dir="rtl"] .sb-v2-rail__btn[data-tip]::after {
  left: auto;
  right: calc(100% + 8px);
}
[dir="rtl"] .sb-v2-rail__btn[data-tip]::before {
  left: auto;
  right: 100%;
  border-right-color: transparent;
  border-left-color: var(--tooltip-bg, #161616);
}

/* Item pin button — flip side. */
[dir="rtl"] .sb-v2-item__pin {
  margin-left: 0;
  margin-right: auto;
}

/* Drawer search icon — flip side. */
[dir="rtl"] .sb-v2-drawer__search-icon {
  left: auto;
  right: 12px;
}
[dir="rtl"] .sb-v2-drawer__search input {
  padding-left: 12px;
  padding-right: 36px;
}

/* Mobile toggle button — flip to right edge. */
[dir="rtl"] .sb-v2-mobile-toggle {
  left: auto;
  right: 12px;
}

/* Mobile bottom nav — items naturally reverse via flex direction
   in RTL (no extra rule needed); just ensure icons aren't mirrored. */
[dir="rtl"] .student-bottom-nav__icon svg,
[dir="rtl"] .app-bottom-nav__icon svg {
  transform: none;
}

/* ── 5. Navbar ──────────────────────────────────────────────── */
[dir="rtl"] .navbar {
  flex-direction: row-reverse;
}
[dir="rtl"] .navbar__left,
[dir="rtl"] .navbar__right {
  flex-direction: row-reverse;
}
[dir="rtl"] .nb-crumbs {
  direction: rtl;
}

/* ── 6. Forms — input padding & alignment ───────────────────── */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}
/* Inputs that show numbers/emails/passwords stay LTR for readability. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[inputmode="numeric"],
[dir="rtl"] input[inputmode="tel"],
[dir="rtl"] input[inputmode="email"],
[dir="rtl"] input[inputmode="url"],
[dir="rtl"] input.ltr-text {
  direction: ltr;
  text-align: right; /* aligns numerals to the start in RTL */
}
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] kbd,
[dir="rtl"] .mono,
[dir="rtl"] .ltr-text {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* Search bars: keep the icon on the right side in RTL. */
[dir="rtl"] .search-input,
[dir="rtl"] .search-bar input {
  padding-right: 40px;
  padding-left: 12px;
}
[dir="rtl"] .search-bar i,
[dir="rtl"] .search-bar svg,
[dir="rtl"] .search-input + i,
[dir="rtl"] .search-input + svg {
  left: auto;
  right: 12px;
}

/* ── 7. Cards / lists — align text properly ─────────────────── */
[dir="rtl"] :where(.card, .list-item, .stat-card, .empty-state) {
  text-align: right;
}
[dir="rtl"] :where(.card-body, .card__body, .stat-card__body) {
  text-align: start;
}

/* ── 8. Tables — keep numeric columns left-aligned in RTL ──── */
[dir="rtl"] table {
  direction: rtl;
}
[dir="rtl"] th,
[dir="rtl"] td {
  text-align: right;
}
[dir="rtl"] th.numeric,
[dir="rtl"] td.numeric,
[dir="rtl"] th.text-end,
[dir="rtl"] td.text-end,
[dir="rtl"] td[data-numeric],
[dir="rtl"] th[data-numeric] {
  text-align: left;
  direction: ltr;
}

/* ── 9. Modals / drawers / side-peek ────────────────────────── */
[dir="rtl"] .modal,
[dir="rtl"] .modal-content,
[dir="rtl"] .modal-body {
  text-align: right;
}
[dir="rtl"] .modal-actions,
[dir="rtl"] .modal-footer {
  flex-direction: row-reverse;
}
[dir="rtl"] .side-peek {
  left: auto;
  right: 0;
  transform: translateX(100%);
}
[dir="rtl"] .side-peek.is-open {
  transform: translateX(0);
}

/* Close (X) buttons in modals — flip to the natural close corner. */
[dir="rtl"] .modal-close,
[dir="rtl"] .close-btn {
  left: 12px;
  right: auto;
}

/* ── 10. Dropdowns / selects / popovers ─────────────────────── */
[dir="rtl"] .neo-dropdown,
[dir="rtl"] .neo-dropdown__menu {
  direction: rtl;
  text-align: right;
}
[dir="rtl"] .neo-dropdown__caret {
  margin-left: 0;
  margin-right: auto;
}

/* ── 11. Toasts / notifications ─────────────────────────────── */
[dir="rtl"] .toast,
[dir="rtl"] .alert {
  text-align: right;
}
[dir="rtl"] .toast-container,
[dir="rtl"] .toasts {
  left: 16px;
  right: auto;
}

/* ── 12. Buttons with leading icons ─────────────────────────── */
[dir="rtl"] .btn :where(i, svg):first-child,
[dir="rtl"] .nb-action :where(i, svg):first-child {
  margin-right: 0;
  margin-left: 8px;
}
[dir="rtl"] .btn :where(i, svg):last-child,
[dir="rtl"] .nb-action :where(i, svg):last-child {
  margin-left: 0;
  margin-right: 8px;
}

/* ── 13. Pagination ─────────────────────────────────────────── */
[dir="rtl"] .pagination {
  flex-direction: row-reverse;
}

/* ── 14. Progress / steps ───────────────────────────────────── */
[dir="rtl"] .steps,
[dir="rtl"] .progress-steps,
[dir="rtl"] .stepper {
  flex-direction: row-reverse;
}
[dir="rtl"] .progress-bar__fill,
[dir="rtl"] .progress__fill {
  /* Ensure fills grow in the natural reading direction. */
  inset-inline-start: 0;
  inset-inline-end: auto;
}

/* ── 15. Mobile responsiveness ──────────────────────────────── */
@media (max-width: 768px) {
  [dir="rtl"] .sb-v2-drawer {
    right: 0;
    left: auto;
  }
  [dir="rtl"] .sb-v2-mobile-toggle {
    right: 12px;
    left: auto;
  }
  [dir="rtl"] body.sb-v2 .dashboard-main,
  [dir="rtl"] body.sb-v2 #main-content,
  [dir="rtl"] body.sb-v2-pinned .dashboard-main,
  [dir="rtl"] body.sb-v2-pinned #main-content {
    margin-right: 0;
  }
}

/* Prevent any horizontal overflow caused by RTL flips. */
[dir="rtl"] body {
  overflow-x: hidden;
}

/* ── 16. Numeric pills / counts inside Arabic blocks ──────── */
[dir="rtl"] .badge--num,
[dir="rtl"] .count-pill,
[dir="rtl"] [data-numeric-pill] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── 17. Language switcher — compact (rail/navbar) ─────────── */
.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
  transition: background .2s, color .2s, transform .15s;
  padding: 0;
}
.lang-switch-btn:hover {
  background: rgba(255, 255, 255, .08);
  transform: translateY(-1px);
}
.lang-switch-btn .lang-switch-btn__code {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  line-height: 1;
}
[dir="rtl"] .lang-switch-btn .lang-switch-btn__code {
  font-family: 'Cairo', sans-serif;
}

/* When placed inside the sidebar rail, inherit the rail button shape. */
.sb-v2-rail .lang-switch-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-direction: column;
  gap: 1px;
  color: var(--rail-fg, #94a3b8);
}
.sb-v2-rail .lang-switch-btn:hover {
  background: var(--rail-hover, rgba(255,255,255,.08));
  color: var(--rail-fg-hover, #fff);
}
.sb-v2-rail .lang-switch-btn i {
  font-size: 0.88rem;
}
.sb-v2-rail .lang-switch-btn .lang-switch-btn__code {
  font-size: 0.62rem;
  letter-spacing: 0.04em;
}

/* ── 18. Language switcher — menu (settings page) ────────── */
.lang-switch-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lang-switch-menu__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.lang-switch-menu__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(15,23,42,.10));
  background: var(--surface, #fff);
  color: var(--text, #020617);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color .2s, background .2s, transform .15s;
  min-height: 44px;
}
.lang-switch-menu__opt:hover {
  border-color: var(--brand, #E0813F);
  transform: translateY(-1px);
}
.lang-switch-menu__opt.is-active {
  background: var(--brand-50, #FFF7ED);
  border-color: var(--brand, #E0813F);
  color: var(--brand, #E0813F);
}
.lang-switch-menu__short {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  background: rgba(15,23,42,.06);
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.lang-switch-menu__opt.is-active .lang-switch-menu__short {
  background: var(--brand, #E0813F);
  color: #fff;
}
.lang-switch-menu__name {
  flex: 1;
}

/* ── 19. General input wrappers (password / icon-suffixed) ── */
[dir="rtl"] .input-wrapper .form-input {
  padding-right: 12px;
  padding-left: 2.75rem;
}
[dir="rtl"] .input-toggle {
  right: auto;
  left: .75rem;
}

/* ── 20. Score cards & feedback bars ──────────────────────── */
[dir="rtl"] .score-card__feedback {
  border-left: none;
  border-right: 3px solid var(--brand);
  border-radius: var(--r-md) 0 0 var(--r-md);
}

/* Step connector lines in review/wizard flows */
[dir="rtl"] .review-step + .review-step::before {
  right: auto;
  left: calc(50% + 13px);
}

/* ── 21. Legacy .sidebar (V1) chrome ───────────────────────── */
[dir="rtl"] .sidebar {
  border-right: none;
  border-left: 1px solid rgba(255, 255, 255, .06);
  box-shadow: -4px 0 24px rgba(0, 0, 0, .15);
}
[dir="rtl"] .sidebar__nav-link.active,
[dir="rtl"] .sidebar__nav-link[aria-current="page"] {
  border-left: none;
  border-right: 3px solid #E0813F;
}

/* ── 22. Navbar theme button bleed offset ──────────────────── */
[dir="rtl"] .navbar__theme-btn {
  margin-right: 0;
  margin-left: -10px;
}

/* ── 23. FAB / floating action button ──────────────────────── */
[dir="rtl"] .fab,
[dir="rtl"] .floating-action,
[dir="rtl"] .floating-btn {
  right: auto;
  left: 1.5rem;
}

/* ── 24. Toggle switch knob — flips travel direction ──────── */
[dir="rtl"] .toggle__slider::before {
  left: auto;
  right: 3px;
}
[dir="rtl"] .toggle input:checked + .toggle__slider::before {
  transform: translateX(-20px);
}

/* ── 25. Accent bars on cards/rows (border-left → border-right) ── */
[dir="rtl"] .assignment-row--overdue,
[dir="rtl"] .notification-item--unread,
[dir="rtl"] .myc-card,
[dir="rtl"] .sched-detail__urgent,
[dir="rtl"] .timeline-item--accent,
[dir="rtl"] .alert-banner {
  border-left: 0 !important;
  border-right: 3px solid var(--brand);
}
[dir="rtl"] .assignment-row--overdue {
  border-right-color: var(--color-danger);
}

/* Lesson caption / quote-style cards */
[dir="rtl"] .lesson-caption {
  border-left: 0;
  border-right: 2px solid var(--color-primary-500);
  border-radius: var(--r-input) 0 0 var(--r-input);
}

/* Subscription / status widgets */
[dir="rtl"] .sub-widget--active {
  border-left: 0;
  border-right: 4px solid #E0813F;
}
[dir="rtl"] .sub-widget--pulse {
  border-left-color: transparent;
  border-right-color: #EF4444;
}

/* Insight rows (color-coded severity) */
[dir="rtl"] .insight-row {
  border-left: 1px solid var(--color-border);
  border-right: 4px solid var(--gray-300);
}
[dir="rtl"] .insight-row--high   { border-left-color: var(--color-border); border-right-color: #ef4444; }
[dir="rtl"] .insight-row--medium { border-left-color: var(--color-border); border-right-color: #f59e0b; }
[dir="rtl"] .insight-row--low    { border-left-color: var(--color-border); border-right-color: #22c55e; }

/* Question bank symbol groups (dashed dividers) */
[dir="rtl"] .qb-symbol-group {
  padding-right: 0;
  padding-left: .35rem;
  border-right: 0;
  border-left: 1px dashed var(--color-border);
}
[dir="rtl"] .qb-symbol-group:last-child {
  border-left: 0;
}

/* ── 26. Dashboard search bar / floating peek search icons ── */
[dir="rtl"] .sk-widget-row::before { left: auto; right: 18px; }
[dir="rtl"] .sk-widget-row::after  { left: auto; right: 78px; }

/* ── 27. Tables — text alignment & numeric padding ────────── */
[dir="rtl"] .students-table tr td:last-child,
[dir="rtl"] .students-table tr th:last-child {
  padding-right: 0;
  padding-left: var(--sp-6);
}

/* ── 28. Common margin-left/right utilities (auto-margin) ── */
[dir="rtl"] .sp-badge,
[dir="rtl"] .ml-auto,
[dir="rtl"] [data-ml-auto] {
  margin-left: 0;
  margin-right: auto;
}

/* ── 29. Notif panel chevron / arrow alignment ────────────── */
[dir="rtl"] .notif-panel__close {
  right: auto;
  left: 8px;
}

/* ── 30. Drawer footer button badges (top-right → top-left) ── */
[dir="rtl"] .sb-v2-drawer__fbtn .sb-v2-badge,
[dir="rtl"] .sidebar__footer-badge,
[dir="rtl"] .nb-action__badge,
[dir="rtl"] .navbar__notif-count {
  right: auto;
  left: 6px;
}

/* ── 31. Neo-dropdown sub-label / option meta margins ─────── */
[dir="rtl"] .neo-select__opt-sub,
[dir="rtl"] .neo-dropdown__opt-meta {
  margin-left: 0;
  margin-right: 6px;
}

/* Neo-dropdown trigger icon spacing */
[dir="rtl"] .neo-select__trigger > i:first-child,
[dir="rtl"] .neo-select__trigger > svg:first-child {
  margin-right: 0;
  margin-left: 8px;
}

/* ── 32. Mobile-stacked tables — data-label spacing ───────── */
@media (max-width: 768px) {
  [dir="rtl"] .students-table tbody td[data-label]::before,
  [dir="rtl"] .sp-table tbody td[data-label]::before,
  [dir="rtl"] .fin-table tbody td[data-label]::before,
  [dir="rtl"] .inv-table tbody td[data-label]::before,
  [dir="rtl"] .st-tbl tbody td[data-label]::before {
    margin-inline-end: 8px;
    margin-inline-start: 0;
  }
}

/* ── 33. Mobile responsive — generic offsets ──────────────── */
@media (max-width: 480px) {
  [dir="rtl"] .dropdown-menu,
  [dir="rtl"] .neo-dropdown__menu,
  [dir="rtl"] .popover,
  [dir="rtl"] [class*="dropdown"][class*="menu"],
  [dir="rtl"] [class*="popover"] {
    /* These already have left:12px + right:12px symmetric — no flip needed.
       Keeping the rule as a safety guard against future asymmetric overrides. */
    left: 12px !important;
    right: 12px !important;
  }
}

/* ── 34. Sticky footer / action bars — RTL alignment ──────── */
[dir="rtl"] .modal-box__footer,
[dir="rtl"] .modal-box__actions,
[dir="rtl"] .side-peek__footer,
[dir="rtl"] .qb-form-actions {
  flex-direction: row-reverse;
}

/* ── 35. Mountain leaderboard — race lane edges ───────────── */
/* Semantic: ::before is the start line, ::after is the finish line.
   In RTL, the race reads right-to-left, so we swap their positions. */
[dir="rtl"] .mar__lane-track::before {
  left: auto;
  right: -1px;
}
[dir="rtl"] .mar__lane-track::after {
  right: auto;
  left: -1px;
}

/* ── 36. Gamified profile — note accent bars ──────────────── */
[dir="rtl"] .gx-note {
  border-left: 0;
  border-right: 3px solid #FBBF24;
}

/* Gamified meta icon spacing (uses margin-right in flex) */
[dir="rtl"] .gx-hero__meta i,
[dir="rtl"] .gx-goal__meta i,
[dir="rtl"] .gx-badge__check i {
  margin-right: 0;
  margin-left: 0.35rem;
}

/* ── 37. Student insights — meta icon spacing ─────────────── */
[dir="rtl"] .ix-row__meta i {
  margin-right: 0;
  margin-left: 0.3rem;
}

/* ── 38. Schedule / my-class meta icon spacing ────────────── */
[dir="rtl"] .sched-detail__meta i,
[dir="rtl"] .myc-card__meta i {
  margin-right: 0;
  margin-left: 0.35rem;
}

/* ── 39. Generic icon-spacing helpers in Arabic flex rows ─── */
[dir="rtl"] .meta-icon-mr,
[dir="rtl"] [data-meta-icon] {
  margin-right: 0;
  margin-left: 0.35rem;
}

/* ============================================================
   STAGE 6 — TYPOGRAPHY POLISH FOR ARABIC
   Arabic text expands ~25% vs English. Add breathing room for
   button padding, badge widths, line-height, and tap targets.
   All gated under [lang="ar"] / [dir="rtl"] — zero LTR effect.
   ============================================================ */

/* ── 40. Arabic body line-height + word-spacing ───────────── */
html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] .form-input,
html[lang="ar"] .card,
html[lang="ar"] .alert {
  line-height: 1.7;
  word-spacing: 0.02em;
}

/* Headings — Cairo handles most, but ensure breathing room */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .page-title,
html[lang="ar"] .navbar__page-title {
  line-height: 1.4;
  letter-spacing: 0;
}

/* ── 41. Button & tab padding for expansion ────────────────── */
html[lang="ar"] .btn,
html[lang="ar"] button.btn,
html[lang="ar"] .tab,
html[lang="ar"] .nb-action,
html[lang="ar"] .nav-link {
  padding-inline: clamp(0.85rem, 2vw, 1.25rem);
  letter-spacing: 0;
  white-space: nowrap;
}

/* Small "ghost"/text buttons that may overflow */
html[lang="ar"] .btn--sm,
html[lang="ar"] .btn--ghost {
  padding-inline: 0.85rem;
}

/* Allow wrapping when the row is constrained */
html[lang="ar"] .btn-row .btn,
html[lang="ar"] .actions-row .btn,
html[lang="ar"] .form-actions .btn {
  white-space: normal;
}

/* ── 42. Badge / pill / chip — wider in Arabic ────────────── */
html[lang="ar"] .badge,
html[lang="ar"] .chip,
html[lang="ar"] .tag,
html[lang="ar"] .pill {
  padding: 0.18rem 0.6rem;
  letter-spacing: 0;
  min-height: 1.4rem;
  line-height: 1.4;
}

/* Numeric badges keep tight padding */
html[lang="ar"] .badge--num,
html[lang="ar"] .count-pill,
html[lang="ar"] [data-numeric-pill] {
  padding: 0.12rem 0.45rem;
}

/* ── 43. Cards & list items — better wrap in Arabic ───────── */
html[lang="ar"] .card-title,
html[lang="ar"] .course-card__title,
html[lang="ar"] .lesson-card__title,
html[lang="ar"] .assignment-card__title,
html[lang="ar"] .exam-card__title,
html[lang="ar"] [class$="__title"] {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

/* ── 44. Form labels & inputs — Arabic legibility ─────────── */
html[lang="ar"] label,
html[lang="ar"] .form-label,
html[lang="ar"] .filter-popover__label {
  font-size: 0.92rem;
  line-height: 1.5;
}

html[lang="ar"] .form-input,
html[lang="ar"] .form-select,
html[lang="ar"] .form-textarea,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-size: 0.95rem;
}

/* iOS auto-zoom prevention on small screens */
@media (max-width: 640px) {
  html[lang="ar"] input,
  html[lang="ar"] select,
  html[lang="ar"] textarea {
    font-size: max(16px, 1rem);
  }
}

/* ── 45. Tables — Arabic numbers stay LTR for legibility ──── */
html[lang="ar"] td.numeric,
html[lang="ar"] th.numeric,
html[lang="ar"] td[data-numeric],
html[lang="ar"] .num,
html[lang="ar"] .currency,
html[lang="ar"] .duration,
html[lang="ar"] [data-numeric] {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  unicode-bidi: isolate;
}

/* ── 46. Empty state polish for Arabic ────────────────────── */
html[lang="ar"] .empty-state__title,
html[lang="ar"] [class*="empty"] .title {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0;
}
html[lang="ar"] .empty-state__sub,
html[lang="ar"] [class*="empty"] .sub {
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ── 47. Modals & drawers — Arabic body text ──────────────── */
html[lang="ar"] .modal-title,
html[lang="ar"] .side-peek__title {
  letter-spacing: 0;
  line-height: 1.4;
}
html[lang="ar"] .modal-body,
html[lang="al"] .side-peek__body {
  line-height: 1.65;
}

/* ── 48. Touch targets ≥ 44px on mobile in Arabic ─────────── */
@media (max-width: 768px) {
  html[lang="ar"] .btn,
  html[lang="ar"] button.btn,
  html[lang="ar"] .nav-link,
  html[lang="ar"] .nb-action,
  html[lang="ar"] .sidebar__nav-item,
  html[lang="ar"] .sb-v2-rail__btn,
  html[lang="ar"] .student-bottom-nav__item,
  html[lang="ar"] .app-bottom-nav__item {
    min-height: 44px;
  }

  /* Form fields tap-friendly */
  html[lang="ar"] .form-input,
  html[lang="ar"] .form-select,
  html[lang="ar"] .form-textarea {
    min-height: 44px;
  }

  /* Increase tap padding for icon-only buttons */
  html[lang="ar"] .icon-btn,
  html[lang="ar"] .btn--icon,
  html[lang="ar"] [class*="__icon-btn"] {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── 49. Mobile Arabic text expansion (320–768px) ─────────── */
@media (max-width: 768px) {
  html[lang="ar"] .page-title {
    font-size: clamp(1.05rem, 4vw, 1.4rem);
    line-height: 1.35;
  }
  html[lang="ar"] .page-subtitle {
    font-size: 0.85rem;
    line-height: 1.5;
  }

  /* Welcome banner / hero areas */
  html[lang="ar"] .welcome-banner__title,
  html[lang="ar"] .hero__title {
    font-size: clamp(1rem, 4.5vw, 1.3rem);
    line-height: 1.4;
  }

  /* Tabs — allow row scroll if too wide in Arabic */
  html[lang="ar"] .tabs {
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  html[lang="ar"] .tabs .tab {
    flex-shrink: 0;
  }
}

/* ── 50. Smaller breakpoints (≤480px) — extra compact ─────── */
@media (max-width: 480px) {
  html[lang="ar"] .btn {
    padding-inline: 0.7rem;
    font-size: 0.88rem;
  }
  html[lang="ar"] .badge,
  html[lang="ar"] .chip {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
  }
}

/* ── 51. RTL chevron flip helper — applied to dynamic chevrons ── */
[dir="rtl"] .fa-chevron-right.icon-flip-rtl,
[dir="rtl"] .fa-chevron-left.icon-flip-rtl,
[dir="rtl"] [class*="chevron"].icon-flip-rtl {
  transform: scaleX(-1);
}

/* ============================================================
   STAGE 9 — UI BUG FIXES (specificity overrides)
   ============================================================ */

/* ── 52. Sidebar V2 drawer — open transform in RTL ─────────
   sidebar-v2.css has `html[dir="rtl"] .sb-v2-drawer { transform: translateX(100%); }`
   which has higher specificity than `.sb-v2-drawer.is-open { transform: translateX(0); }`,
   so the drawer never opens in RTL. Fix with same-specificity override. */
html[dir="rtl"] .sb-v2-drawer.is-open {
  transform: translateX(0) !important;
}

/* Mobile drawer slide-in needs to come from the right in RTL */
@media (max-width: 768px) {
  html[dir="rtl"] .sb-v2-drawer {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  html[dir="rtl"] .sb-v2-drawer.is-open {
    transform: translateX(0) !important;
  }
}

/* ── 53. Sidebar V1 drawer — RTL slide-in fix ──────────────
   `.sidebar.sidebar--open` may have similar specificity issue. */
html[dir="rtl"] .sidebar.sidebar--open {
  transform: translateX(0) !important;
}
@media (max-width: 768px) {
  html[dir="rtl"] .sidebar {
    transform: translateX(100%);
  }
  html[dir="rtl"] .sidebar.sidebar--open {
    transform: translateX(0) !important;
  }
}

/* ── 54. Side-peek RTL fix (mirror) ────────────────────────
   Same pattern: ensure the open transform wins over the closed one. */
html[dir="rtl"] .side-peek.is-open {
  transform: translateX(0) !important;
}

/* ── 55. Modal slide animations in RTL ─────────────────────
   Modals that slide from the right in LTR should slide from
   the left in RTL. Common pattern: confirm/info dialogs. */
html[dir="rtl"] .modal-overlay.is-open .modal-box,
html[dir="rtl"] .modal.is-open .modal-content {
  transform: none;
}

/* ── 56. RTL text-align fixes for elements that need flipping ── */
[dir="rtl"] .text-end,
[dir="rtl"] .text-right {
  text-align: left !important;
}
[dir="rtl"] .text-start,
[dir="rtl"] .text-left {
  text-align: right !important;
}

/* Common dashboard elements */
[dir="rtl"] .page-header,
[dir="rtl"] .page-title,
[dir="rtl"] .page-subtitle,
[dir="rtl"] .section-header,
[dir="rtl"] .card,
[dir="rtl"] .list-item,
[dir="rtl"] .modal-body,
[dir="rtl"] .side-peek__body,
[dir="rtl"] .form-group label,
[dir="rtl"] .form-field label,
[dir="rtl"] .filter-popover__label,
[dir="rtl"] .empty-state {
  text-align: right;
}

/* ── 57. Welcome banners / hero text ───────────────────── */
[dir="rtl"] .welcome-banner,
[dir="rtl"] .welcome-banner__title,
[dir="rtl"] .welcome-banner__sub,
[dir="rtl"] .welcome-banner__cta,
[dir="rtl"] .hero,
[dir="rtl"] .hero__title,
[dir="rtl"] .hero__sub {
  text-align: right;
}

/* ── 58. Stat cards & widget bodies ─────────────────────── */
[dir="rtl"] .stat-card,
[dir="rtl"] .stat-card__body,
[dir="rtl"] .stat-card__label,
[dir="rtl"] .stat-card__value,
[dir="rtl"] .widget,
[dir="rtl"] .widget__body,
[dir="rtl"] .widget__title {
  text-align: right;
}

/* ── 59. Page header actions sit on the END (left in RTL) ── */
[dir="rtl"] .page-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .page-header > div:first-child {
  text-align: right;
}

/* ── 60. Tab labels & button rows in headers ──────────── */
[dir="rtl"] .tabs,
[dir="rtl"] .tab-bar,
[dir="rtl"] .button-row,
[dir="rtl"] .btn-row,
[dir="rtl"] .actions-row,
[dir="rtl"] .form-actions,
[dir="rtl"] .filter-popover__grid {
  text-align: right;
}

/* ── 61. Side-peek title & header alignment ────────────── */
[dir="rtl"] .side-peek__head,
[dir="rtl"] .side-peek__header,
[dir="rtl"] .side-peek__title {
  text-align: right;
}
[dir="rtl"] .side-peek__head {
  flex-direction: row-reverse;
}

/* Side-peek close button on the LEFT in RTL */
[dir="rtl"] .side-peek__close {
  margin-left: 0;
  margin-right: auto;
}

/* ── 62. Modal head close button on the LEFT in RTL ────── */
[dir="rtl"] .modal-box__head,
[dir="rtl"] .modal-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .modal-box__close,
[dir="rtl"] .modal-header__close {
  margin-left: 0;
  margin-right: auto;
}

/* ── 63. Toolbar / search bar alignment ─────────────────── */
[dir="rtl"] .search-bar-row,
[dir="rtl"] .toolbar,
[dir="rtl"] .resource-toolbar,
[dir="rtl"] .filter-bar {
  flex-direction: row-reverse;
}

/* ── 64. Sidebar tooltips in mobile drawer (V1) ────────── */
@media (max-width: 768px) {
  html[dir="rtl"] .sidebar__nav-item[data-tooltip]::after,
  html[dir="rtl"] .sb-collapsed .sidebar__nav-item[data-tooltip]::after {
    /* Hide tooltips on mobile — they don't add value when drawer is full-width */
    display: none;
  }
}

/* ── 65. Notification dropdown — open from the right in RTL ── */
[dir="rtl"] .notif-panel,
[dir="rtl"] .navbar__notif-panel {
  right: auto;
  left: 0;
}

/* ── 66. Course card / lesson card / assignment card ──── */
[dir="rtl"] .course-card,
[dir="rtl"] .lesson-card,
[dir="rtl"] .assignment-card,
[dir="rtl"] .exam-card,
[dir="rtl"] .student-card,
[dir="rtl"] .invoice-card,
[dir="rtl"] .resource-card,
[dir="rtl"] .group-card,
[dir="rtl"] .session-card,
[dir="rtl"] .certificate-card {
  text-align: right;
}
[dir="rtl"] .course-card__meta,
[dir="rtl"] .lesson-card__meta,
[dir="rtl"] .assignment-card__meta,
[dir="rtl"] .exam-card__meta,
[dir="rtl"] [class$="__meta"],
[dir="rtl"] [class*="__meta "] {
  direction: rtl;
  text-align: right;
  justify-content: flex-start;
  unicode-bidi: isolate;
}

[dir="rtl"] :where([class$="__meta"], [class*="__meta "]) > :where(strong, span, time, a, small) {
  unicode-bidi: isolate;
}

/* ── 67. Login/auth pages — input groups stay correct ── */
[dir="rtl"] .auth-card .form-group,
[dir="rtl"] .auth-card .form-field {
  text-align: right;
}
[dir="rtl"] .auth-card .form-group label,
[dir="rtl"] .auth-card .form-field label {
  text-align: right;
}

/* ── 68. Dashboard tile / quick-action tiles ──────────── */
[dir="rtl"] .dash-tile,
[dir="rtl"] .dash-tile__title,
[dir="rtl"] .dash-tile__sub,
[dir="rtl"] .quick-action,
[dir="rtl"] .quick-action__label {
  text-align: right;
}

/* ============================================================
   PHASE 4-5 (Final Pass) — Navbar RTL hardening
   ============================================================ */

/* ── 69. Top navbar RTL — full layout flip ─────────────────
   The base `.navbar` is anchored with `left: var(--sidebar-w); right: 0`.
   In RTL we mirror both edges so the navbar starts from the right
   sidebar and extends to the left edge of the viewport. */
[dir="rtl"] .navbar {
  left: 0;
  right: var(--sidebar-w);
}
@media (max-width: 768px) {
  [dir="rtl"] .navbar {
    left: 0;
    right: 0;
  }
}

/* When sidebar V2 rail+drawer is pinned, the navbar must respect both. */
[dir="rtl"] body.sb-v2-pinned .navbar {
  left: 0;
  right: calc(var(--sb-rail-w, 64px) + var(--sb-drawer-w, 240px));
}
[dir="rtl"] body.sb-v2 .navbar {
  left: 0;
  right: var(--sb-rail-w, 64px);
}
@media (max-width: 768px) {
  [dir="rtl"] body.sb-v2 .navbar,
  [dir="rtl"] body.sb-v2-pinned .navbar {
    right: 0;
  }
}

/* ── 70. Navbar children — direction handling ─────────────
   Avoid double-flipping. The navbar root uses `flex-direction: row-reverse`
   in section 5, which already swaps the visual order. The inner __left
   and __right groups already flip in section 5 as well. We just need
   to make sure their internal text is right-aligned. */
[dir="rtl"] .navbar__left,
[dir="rtl"] .navbar__right,
[dir="rtl"] .navbar__actions {
  direction: rtl;
}

/* Notification badge corner — flip top-right → top-left in RTL */
[dir="rtl"] .navbar__badge {
  right: auto;
  left: 2px;
}

/* ── 71. Sidebar V1 layout in RTL ─────────────────────────
   Mirror the sidebar from left to right edge. Mobile drawer
   is already covered in section 53. */
[dir="rtl"] .sidebar {
  left: auto;
  right: 0;
}
@media (max-width: 768px) {
  [dir="rtl"] .sidebar {
    left: auto;
    right: 0;
  }
}

/* Main content margin flip when V1 sidebar is pinned */
[dir="rtl"] body:not(.sb-v2):not(.sb-v2-pinned) .dashboard-main,
[dir="rtl"] body:not(.sb-v2):not(.sb-v2-pinned) #main-content {
  margin-left: 0;
  margin-right: var(--sidebar-w);
}
@media (max-width: 768px) {
  [dir="rtl"] body:not(.sb-v2):not(.sb-v2-pinned) .dashboard-main,
  [dir="rtl"] body:not(.sb-v2):not(.sb-v2-pinned) #main-content {
    margin-right: 0;
  }
}

/* ── 72. Logical-property fallback for common .ml-/.mr- utilities ── */
[dir="rtl"] .ml-1, [dir="rtl"] .ml-2, [dir="rtl"] .ml-3, [dir="rtl"] .ml-4 {
  margin-left: 0;
}
[dir="rtl"] .mr-1, [dir="rtl"] .mr-2, [dir="rtl"] .mr-3, [dir="rtl"] .mr-4 {
  margin-right: 0;
}
[dir="rtl"] .ml-1 { margin-right: 0.25rem; }
[dir="rtl"] .ml-2 { margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-right: 0.75rem; }
[dir="rtl"] .ml-4 { margin-right: 1rem; }
[dir="rtl"] .mr-1 { margin-left: 0.25rem; }
[dir="rtl"] .mr-2 { margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-left: 0.75rem; }
[dir="rtl"] .mr-4 { margin-left: 1rem; }

/* ── 73. Breadcrumb separator — flip arrow direction ─────── */
[dir="rtl"] .nb-crumb-sep {
  transform: scaleX(-1);
  display: inline-block;
}

/* ── 74. Search bars across the app — search icon side ────
   Generic catch-all so any search input with a leading icon
   gets the icon on the start side in RTL. */
[dir="rtl"] :where(.search-bar, .search-input-wrap) > :where(i, svg):first-child {
  margin-right: 0;
  margin-left: 8px;
}

/* ── 75. Action toolbars — keep "primary action" on the start ── */
[dir="rtl"] :where(.page-header, .toolbar, .toolbar-row) > :last-child:not(:first-child) {
  /* When a header has [title][primary-button], in RTL the button moves to the left.
     Already handled by row-reverse on the page-header (section 59). */
}

/* ── 76. Progress bars — fill direction ─────────────────── */
[dir="rtl"] .progress,
[dir="rtl"] .progress-bar,
[dir="rtl"] [class*="progress"] [class*="fill"] {
  direction: ltr; /* numeric progress always grows left → right visually */
}

/* ── 77. Chart axes / tick labels — keep numerals LTR ───── */
[dir="rtl"] .chart .axis,
[dir="rtl"] .chart text {
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── 78. Table action column — open from start side ──────
   When a table has actions in the LAST cell (LTR convention),
   in RTL that cell flips to the FIRST visual position via the
   table's `direction: rtl`. Make sure the icons stay aligned. */
[dir="rtl"] td.actions,
[dir="rtl"] td[data-actions],
[dir="rtl"] td:has(.st-actions),
[dir="rtl"] td:has(.fin-icon-btn) {
  text-align: end;
}

/* ── 79. Stepper / wizard arrows — flip in RTL ───────────
   The connector lines between steps and any arrow icons. */
[dir="rtl"] .stepper__sep,
[dir="rtl"] .wizard__arrow,
[dir="rtl"] .step-arrow {
  transform: scaleX(-1);
}

/* ── 80. Course hero RTL — title + meta + actions all on the start side ── */
[dir="rtl"] .course-hero,
[dir="rtl"] .course-hero__body,
[dir="rtl"] .course-hero__title,
[dir="rtl"] .course-hero__desc,
[dir="rtl"] .course-card__taxonomy {
  text-align: right;
}

/* Badges, meta info, action buttons all flow from the start (right) in RTL.
   Without these, flex containers default to the LTR start (visual left). */
[dir="rtl"] .course-hero__badges,
[dir="rtl"] .course-hero__meta,
[dir="rtl"] .hero-actions {
  justify-content: flex-start;
  direction: rtl;
}

/* Each meta line item — keep icon next to its text in RTL */
[dir="rtl"] .course-hero__meta > span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-direction: row;
}
[dir="rtl"] .course-hero__meta > span > i:first-child,
[dir="rtl"] .course-hero__meta > span > svg:first-child {
  margin-left: .35rem;
  margin-right: 0;
}

/* Hero "Back to courses" link — flip the arrow */
[dir="rtl"] .back-link a i.fa-arrow-left,
[dir="rtl"] .back-link .fa-chevron-left {
  transform: scaleX(-1);
}

/* ── 81. Section headers in pages — title on start, badge on end ── */
[dir="rtl"] .section-header {
  flex-direction: row-reverse;
  text-align: right;
}

/* ── 82. Info cards (sidebar) — header items right-aligned ── */
[dir="rtl"] .info-card,
[dir="rtl"] .info-card__title {
  text-align: right;
}

/* ── 83. Lesson list / list-item rows — flex-direction handling ── */
[dir="rtl"] .list-item,
[dir="rtl"] .list-item--compact {
  flex-direction: row-reverse;
  text-align: right;
}
[dir="rtl"] .list-item > :first-child,
[dir="rtl"] .list-item--compact > :first-child {
  /* When the row has [text][actions], in RTL the visual order flips automatically
     via row-reverse, but the text block should stay text-aligned right inside. */
  text-align: right;
}

/* ── 84. Touch targets — final hardening for Arabic mobile ── */
@media (max-width: 768px) {
  html[lang="ar"] .nb-action,
  html[lang="ar"] .navbar__notif-btn,
  html[lang="ar"] .navbar__theme-btn {
    min-width: 40px;
    min-height: 40px;
  }
  /* Ensure inline-icons inside RTL flip helpers don't overflow tiny buttons */
  html[lang="ar"] .icon-flip-rtl {
    flex-shrink: 0;
  }
}

/* ── 85. Courses list RTL hardening ─────────────────────────── */
html[dir="rtl"] .page-header {
  direction: rtl;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}
html[dir="rtl"] .page-header > div:first-child {
  text-align: right;
}
html[dir="rtl"] .page-header > .btn {
  flex-direction: row;
}

html[dir="rtl"] .search-bar-row {
  direction: rtl;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}
html[dir="rtl"] .search-bar-row .search-bar {
  flex: 0 1 420px;
  max-width: 420px;
}
html[dir="rtl"] .search-bar-row .filter-chipbar {
  flex: 1 1 420px;
  justify-content: flex-start;
  direction: rtl;
}
html[dir="rtl"] .filter-chipbar__btn {
  direction: rtl;
}
html[dir="rtl"] .filter-chipbar__value {
  unicode-bidi: isolate;
}

html[dir="rtl"] .courses-grid {
  direction: rtl;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 380px));
  justify-content: start;
}
html[dir="rtl"] .course-card {
  direction: rtl;
  max-width: 380px;
  width: 100%;
}
html[dir="rtl"] .course-card__cover .badge {
  right: auto;
  left: var(--sp-2);
}
html[dir="rtl"] .course-card__title {
  -webkit-line-clamp: 2;
  line-height: 1.45;
}
html[dir="rtl"] .course-card__meta {
  direction: rtl;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--sp-3);
}
html[dir="rtl"] .course-card__teacher {
  direction: ltr;
  unicode-bidi: isolate;
  flex-shrink: 1;
}
html[dir="rtl"] .course-card__date {
  direction: rtl;
  unicode-bidi: isolate;
  flex-shrink: 0;
}
html[dir="rtl"] .course-card__actions {
  direction: rtl;
  justify-content: flex-start;
}

@media (max-width: 768px) {
  html[dir="rtl"] .page-header {
    gap: var(--sp-3);
  }
  html[dir="rtl"] .search-bar-row .search-bar,
  html[dir="rtl"] .search-bar-row .filter-chipbar {
    flex-basis: 100%;
    max-width: none;
  }
}

@media (max-width: 480px) {
  html[dir="rtl"] .page-header {
    flex-direction: column;
    align-items: stretch;
  }
  html[dir="rtl"] .page-header > .btn {
    width: 100%;
    justify-content: center;
  }
  html[dir="rtl"] .courses-grid {
    grid-template-columns: 1fr !important;
  }
  html[dir="rtl"] .course-card {
    max-width: none;
  }
}

/* ── 86. Navbar title belongs to the RTL start edge ─────────── */
html[dir="rtl"] .navbar {
  direction: rtl;
  flex-direction: row;
}
html[dir="rtl"] .navbar__left {
  direction: rtl;
  flex-direction: row;
  justify-content: flex-start;
  min-width: 0;
}
html[dir="rtl"] .navbar__right {
  direction: rtl;
  flex-direction: row;
  justify-content: flex-end;
}
html[dir="rtl"] .nb-title-wrap {
  align-items: flex-start;
  text-align: right;
}
html[dir="rtl"] .navbar__page-title {
  text-align: right;
}

/* ── 87. Empty states stay centered in RTL ───────────────────── */
html[dir="rtl"] .empty-state {
  direction: rtl;
  text-align: center;
  justify-self: stretch;
}

/* 88. Sidebar V2 and side-peek use the same spacing model as LTR, mirrored */
@media (min-width: 769px) {
  html[dir="rtl"] body.sb-v2 .dashboard-main,
  html[dir="rtl"] body.sb-v2 main.dashboard-main {
    margin-left: 0 !important;
    margin-right: var(--sb-rail-w, 64px) !important;
    transition:
      margin-left var(--sb-trans, 200ms cubic-bezier(.2,.8,.2,1)),
      margin-right var(--sb-trans, 200ms cubic-bezier(.2,.8,.2,1));
  }

  html[dir="rtl"] body.sb-v2.sb-v2-pinned .dashboard-main,
  html[dir="rtl"] body.sb-v2.sb-v2-pinned main.dashboard-main {
    margin-left: 0 !important;
    margin-right: calc(var(--sb-rail-w, 64px) + var(--sb-drawer-w, 268px)) !important;
  }

  html[dir="rtl"] body.sb-v2 .dashboard-content {
    margin-left: 0 !important;
    margin-right: 60px !important;
  }

  html[dir="rtl"].side-peek-active body {
    margin-right: 0 !important;
    margin-left: var(--peek-active-width, 460px) !important;
    transition: margin-left var(--peek-transition, 220ms cubic-bezier(.2,.8,.2,1));
  }

  html[dir="rtl"] .side-peek {
    right: auto !important;
    left: 0 !important;
    border-left: none !important;
    border-right: 1px solid var(--peek-border, rgba(0,0,0,.10)) !important;
    transform: translateX(-100%) !important;
  }

  html[dir="rtl"] .side-peek.is-open {
    transform: translateX(0) !important;
  }

  html[dir="rtl"] .side-peek.is-closing {
    transform: translateX(-100%) !important;
  }

  html[dir="rtl"].side-peek-active body.sb-v2.sb-v2-pinned .dashboard-main,
  html[dir="rtl"].side-peek-active body.sb-v2.sb-v2-pinned main.dashboard-main {
    margin-left: 0 !important;
    margin-right: var(--sb-rail-w, 64px) !important;
  }

  html[dir="rtl"].side-peek-active body.sb-v2.sb-v2-pinned .navbar {
    left: 0 !important;
    right: var(--sb-rail-w, 64px) !important;
  }
}

@media (max-width: 768px) {
  html[dir="rtl"].side-peek-active body {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[dir="rtl"] .side-peek {
    inset: 0 !important;
    width: 100vw !important;
    border-left: none !important;
    border-right: none !important;
    transform: translateY(100%) !important;
  }

  html[dir="rtl"] .side-peek.is-open {
    transform: translateY(0) !important;
  }

  html[dir="rtl"] .side-peek.is-closing {
    transform: translateY(100%) !important;
  }
}

/* 89. Question bank defaults bar */
html[dir="rtl"] .qb-defaults-bar {
  direction: rtl;
}

html[dir="rtl"] .qb-defaults-bar__head {
  direction: rtl;
  flex-direction: row;
}

html[dir="rtl"] .qb-defaults-bar__title {
  direction: rtl;
  text-align: right;
  text-transform: none;
  letter-spacing: 0;
}

html[dir="rtl"] .qb-defaults-bar__grid {
  direction: rtl;
}

html[dir="rtl"] .qb-defaults-bar__field,
html[dir="rtl"] .qb-defaults-bar__label {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .qb-defaults-bar__hint {
  direction: rtl;
  justify-content: flex-start;
  text-align: right;
}

html[dir="rtl"] .qb-defaults-bar__hint > span {
  unicode-bidi: isolate;
}

/* 90. Student exam focus mode RTL */
html[dir="rtl"] .student-exam-topbar,
html[dir="rtl"] .student-exam-layout,
html[dir="rtl"] .student-exam-footer {
  direction: ltr;
}

html[dir="rtl"] .student-exam-brand,
html[dir="rtl"] .student-exam-panel,
html[dir="rtl"] .student-exam-main,
html[dir="rtl"] .student-exam-question {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .student-exam-brand__copy,
html[dir="rtl"] .student-exam-brand__meta,
html[dir="rtl"] .student-exam-question__meta,
html[dir="rtl"] .student-exam-legend {
  direction: rtl;
}

html[dir="rtl"] .student-exam-nav-grid {
  direction: ltr;
}

html[dir="rtl"] .student-exam-question .exam-question-text {
  direction: rtl;
}

html[dir="rtl"] .student-exam-question .qb-answer-option {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .student-exam-question .qb-match-row,
html[dir="rtl"] .student-exam-numeric,
html[dir="rtl"] .student-exam-tf,
html[dir="rtl"] .student-exam-footer .btn,
html[dir="rtl"] .student-exam-issue-btn,
html[dir="rtl"] .student-exam-report-box,
html[dir="rtl"] .student-exam-finish {
  direction: rtl;
}

html[dir="rtl"] .student-exam-bookmark {
  right: 0;
  left: auto;
}

html[dir="rtl"] .student-exam-report-box {
  text-align: right;
}

html[dir="rtl"] .student-exam-report-box .modal-box__header,
html[dir="rtl"] .student-exam-report-form .modal-box__actions {
  direction: rtl;
}

@media (max-width: 900px) {
  html[dir="rtl"] .student-exam-panel {
    direction: rtl;
  }
}