/* css/rtl.css — RTL-specific overrides for Derja (Arabic script) layout */

/* Only apply when document dir is RTL */
[dir="rtl"] {
  /* Arabic font stack with fallbacks */
  --font-sans: 'Noto Naskh Arabic', 'Segoe UI', 'Tahoma', 'Arial Unicode MS', 'Arial', sans-serif;
  /* Increase line-height for Arabic */
  line-height: 1.8;
}

/* Sidebar ends on right in RTL */
[dir="rtl"] .sidebar {
  border-inline-start: none;
  border-inline-end: 1px solid var(--color-border);
}

/* Flip sidebar lesson link indent */
[dir="rtl"] .sidebar-lesson-link {
  padding-inline-start: 1rem;
  padding-inline-end: 2rem;
}

/* Settings note border flipped via logical props — no override needed (inset-inline-start is used) */

/* Terminal always LTR — override any RTL inheritance */
[dir="rtl"] .terminal-wrapper,
[dir="rtl"] .terminal-output,
[dir="rtl"] .terminal-line,
[dir="rtl"] .terminal-input,
[dir="rtl"] .terminal-prompt-str,
[dir="rtl"] .terminal-input-row {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* Code and pre always LTR */
[dir="rtl"] code,
[dir="rtl"] pre {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: start;
}

/* MCQ options text alignment */
[dir="rtl"] .mcq-option {
  text-align: start;
}

/* Form select dropdown arrow position */
[dir="rtl"] .form-select {
  background-position: left 0.875rem center;
  padding-inline-start: 2.5rem;
  padding-inline-end: 0.875rem;
}

/* Chat bubbles flip in RTL */
[dir="rtl"] .chat-bubble.user,
[dir="rtl"] .chat-bubble-user {
  align-self: flex-start;
  border-block-end-inline-end-radius: var(--radius-lg);
  border-block-end-inline-start-radius: var(--radius-sm);
}

[dir="rtl"] .chat-bubble.assistant,
[dir="rtl"] .chat-bubble-assistant {
  align-self: flex-end;
  border-block-end-inline-start-radius: var(--radius-lg);
  border-block-end-inline-end-radius: var(--radius-sm);
}

/* Timestamp alignment */
[dir="rtl"] .chat-timestamp {
  text-align: start;
}
[dir="rtl"] .chat-bubble.assistant .chat-timestamp,
[dir="rtl"] .chat-bubble-assistant .chat-timestamp {
  text-align: end;
}

/* Export actions and profile rename row in RTL */
[dir="rtl"] .export-actions {
  justify-content: flex-end;
}

[dir="rtl"] .profile-name-row {
  direction: rtl;
}

/* Toast slides from left in RTL */
[dir="rtl"] #toast-container {
  inset-inline-end: auto;
  inset-inline-start: 1rem;
}

[dir="rtl"] .toast {
  animation: toastInRTL 250ms ease;
}

@keyframes toastInRTL {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Progress bar fill: transform-origin is a physical property; correct for RTL */
[dir="rtl"] .progress-bar-fill {
  transform-origin: right center;
}

/* Lesson breadcrumb separator */
[dir="rtl"] .lesson-breadcrumb-sep::before {
  content: '‹';
}
[dir="rtl"] .lesson-breadcrumb-sep {
  font-size: 0; /* hide original */
}
[dir="rtl"] .lesson-breadcrumb-sep::before {
  font-size: 1rem;
}

[dir="rtl"] .module-meta-row,
[dir="rtl"] .lesson-meta-strip,
[dir="rtl"] .practice-support-panel {
  direction: rtl;
}

[dir="rtl"] .module-meta-pill,
[dir="rtl"] .lesson-meta-pill,
[dir="rtl"] .module-difficulty-badge,
[dir="rtl"] .practice-support-card {
  text-align: start;
}

[dir="rtl"] .practice-support-list {
  text-align: start;
}

/* Step progress text in RTL */
[dir="rtl"] #global-progress-text {
  text-align: start;
}

/* Mobile hamburger — button stays on correct side via CSS logical props */

/* ══════════════════════════════════════════════════════════════════════════
   Tools & Reference pages — RTL overrides
   ══════════════════════════════════════════════════════════════════════════ */

/* Cross-reference callout arrow flips */
[dir="rtl"] .cheatsheet.crossref.link::before,
[dir="rtl"] .featureindex-crossref.link::before {
  content: '→';
}

/* Cheat-sheet entry layout: name on right, copy btn on left */
[dir="rtl"] .cheatsheet-entry {
  direction: rtl;
}
/* Keep code name itself LTR */
[dir="rtl"] .cheatsheet-entry-name {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Feature index search input — keep placeholder direction */
[dir="rtl"] .featureindex-search {
  text-align: start;
}

/* Quiz options text alignment */
[dir="rtl"] .quiz-option {
  text-align: start;
}
/* Quiz progress bar fill direction */
[dir="rtl"] .quiz-progress-bar {
  direction: ltr; /* keep fill going left→right */
}

/* Config builder tabs row */
[dir="rtl"] .configbuilder-tabs {
  flex-direction: row-reverse;
}
/* Config builder code preview always LTR */
[dir="rtl"] .configbuilder-code {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: start;
}

/* Playground toolbar */
[dir="rtl"] .playground-toolbar {
  flex-direction: row-reverse;
}
/* Guided hint text */
[dir="rtl"] .playground-guided-hint {
  text-align: start;
}

/* Resources: pack card meta, link items */
[dir="rtl"] .resource-pack-card {
  flex-direction: row-reverse;
}
[dir="rtl"] .resource-link-item {
  flex-direction: row-reverse;
}

/* Feedback kanban columns */
[dir="rtl"] .feedback-column-header {
  flex-direction: row-reverse;
}
/* Feedback form labels alignment */
[dir="rtl"] .feedback-form-panel label {
  text-align: start;
}

/* Dashboard tool cards grid — reading order */
[dir="rtl"] .tools-cards-grid {
  direction: rtl;
}
[dir="rtl"] .tool-card {
  text-align: start;
}

/* Sidebar Tools group header chevron */
[dir="rtl"] .sidebar-group-tools .sidebar-group-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .sidebar-group-tools .sidebar-group-header .chevron {
  margin-inline-start: 0;
  margin-inline-end: auto;
}


/* ── Site footer (RTL) ───────────────────────────────── */
[dir="rtl"] .site-footer {
  flex-direction: row-reverse;
}

/* ── Instructor card (RTL) ───────────────────────────── */
[dir="rtl"] .instructor-card {
  flex-direction: row-reverse;
}