/* ============================================================
   i18n-rtl.css — Bidirectional (RTL) Styles & Arabic Typography
   ────────────────────────────────────────────────────────────
   PURPOSE : Global RTL stylesheet and Arabic typography rules for
             Pupilla. Handles document direction, layout inversion,
             anatomical perspective preservation, and language
             switcher styling.
   SCOPE   : Applied whenever html[dir="rtl"] or html[lang="ar"]
             is active on the document root.
   ============================================================ */

/* ── 1. Arabic Typography & Global Resets ────────────────────── */
html[lang="ar"],
html[dir="rtl"],
html.eye-rtl {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Inter', system-ui, sans-serif;
}

html[lang="ar"] body,
html[dir="rtl"] body,
html.eye-rtl body {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Inter', system-ui, sans-serif;
  letter-spacing: normal;
}

/* Headings in Arabic — crisp geometric Tajawal typography */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html.eye-rtl h1,
html.eye-rtl h2,
html.eye-rtl h3,
html.eye-rtl h4 {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  letter-spacing: normal !important;
}

/* Arabic cursive script requires disabling letter-spacing tracking */
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] .tab-btn,
html[dir="rtl"] .mode-label,
html[dir="rtl"] .field-label,
html[dir="rtl"] .cat-title,
html[dir="rtl"] .cond-label,
html[dir="rtl"] .side-pill,
html[dir="rtl"] .shine-btn,
html[dir="rtl"] .flag-pill,
html[dir="rtl"] .eye-badge,
html[dir="rtl"] .tool-slot-label,
html[dir="rtl"] .head-tilt-label {
  letter-spacing: normal !important;
}

/* ── 2. Language Switcher Button ─────────────────────────────── */
.lang-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  height: 32px;
  box-sizing: border-box;
  border-radius: 999px;
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent-strong);
  background: var(--accent-tint);
  border: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  flex-shrink: 0;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 120ms ease, box-shadow 180ms ease;
}

.lang-toggle-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 1px 3px hsl(var(--shadow-color) / 0.08);
}

.lang-toggle-btn:active {
  transform: scale(0.97);
}

.lang-toggle-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.lang-toggle-btn .lang-globe-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  stroke: currentColor;
  display: block;
}

.lang-toggle-btn span {
  display: inline-block;
  line-height: 1;
}

@media (max-width: 640px) {
  .lang-toggle-btn {
    padding: 4px 9px;
    height: 28px;
    font-size: 0.75rem;
    gap: 4px;
  }
  .lang-toggle-btn .lang-globe-icon {
    width: 13px;
    height: 13px;
  }
}

/* ── 3. App Shell & Header (RTL) ─────────────────────────────── */
html[dir="rtl"] .app {
  direction: rtl;
}

html[dir="rtl"] .brand {
  direction: rtl;
}

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

html[dir="rtl"] .brand-text h1 {
  font-family: 'Tajawal', 'Fraunces', Georgia, serif;
  letter-spacing: normal;
}

html[dir="rtl"] .brand-text p {
  letter-spacing: normal;
}

html[dir="rtl"] .mode-toggle-wrap {
  margin-left: 0 !important;
  margin-right: auto !important;
}

@media (max-width: 640px) {
  html[dir="rtl"] .mode-toggle-wrap {
    margin-right: 0 !important;
    justify-content: flex-start;
  }
}

html[dir="rtl"] .tab-bar {
  direction: rtl;
}

html[dir="rtl"] .tab-btn {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', 'Inter', system-ui, sans-serif;
  letter-spacing: normal;
}

/* ── 4. Sidebar Controls (Flipped cleanly to Right) ───────────── */
html[dir="rtl"] .sidebar {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .normal-btn {
  text-align: right;
  justify-content: flex-start;
}

html[dir="rtl"] .cat-head {
  flex-direction: row;
}

html[dir="rtl"] .cat-title {
  letter-spacing: normal;
}

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

html[dir="rtl"] .cond-label {
  text-align: right;
}

html[dir="rtl"] .cond-sides {
  direction: ltr; /* Keeps OD/OS or L/R pills in logical clinical order */
}

html[dir="rtl"] .sidebar-hint {
  text-align: right;
}

/* ============================================================
   5. CRITICAL MEDICAL UX RULE: ANATOMICAL PERSPECTIVE INTEGRITY
   ────────────────────────────────────────────────────────────
   In clinical ophthalmology and optometry worldwide, the examiner
   faces the patient. Therefore:
     - OD (Oculus Dexter / Right Eye) is ALWAYS on the LEFT of the screen.
     - OS (Oculus Sinister / Left Eye) is ALWAYS on the RIGHT of the screen.
   Furthermore, coordinate systems for the penlight, corneal light
   reflex calculations, Krimsky prism vector geometry, and cover paddle
   must retain consistent LTR cartesian space.
   Under NO circumstances should .exam-field invert in RTL mode.
   ============================================================ */
html[dir="rtl"] .exam-field,
html[lang="ar"] .exam-field,
html.eye-rtl .exam-field {
  direction: ltr !important;
}

/* ── 6. Exam Stage Controls & Components (RTL) ───────────────── */

/* Eye Tags: preserve Latin acronyms (OD/OS) while rendering Arabic names */
html[dir="rtl"] .eye-tag {
  direction: rtl;
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
}

html[dir="rtl"] .eye-tag .code {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'Source Serif 4', Georgia, serif;
}

html[dir="rtl"] .eye-tag .full {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
}

/* Pupil Readouts: numbers and units must remain in standard LTR scientific order */
html[dir="rtl"] .pupil-readout,
html[lang="ar"] .pupil-readout {
  direction: ltr !important;
  unicode-bidi: isolate;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

html[dir="rtl"] .pupil-readout b,
html[lang="ar"] .pupil-readout b {
  direction: ltr !important;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* Keep units (e.g. 4.0 mm, 15Δ/mm, 0.3 log), numbers, and clinical symbols aligned correctly */
html[dir="rtl"] .ct-mono,
html[dir="rtl"] [data-numeric],
html[dir="rtl"] .tabular-nums,
html[dir="rtl"] .kr-hud-power,
html[dir="rtl"] .live-reflex-readout,
html[dir="rtl"] .prism-power,
html[dir="rtl"] .ref-val,
html[dir="rtl"] .diopter-val,
html[dir="rtl"] code,
html[dir="rtl"] kbd {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Floating Eye Tracking Toggle: relocate to top-left in RTL */
html[dir="rtl"] .track-toggle-btn {
  right: auto !important;
  left: 14px !important;
}

@media (max-width: 640px) {
  html[dir="rtl"] .track-toggle-btn {
    right: auto !important;
    left: 10px !important;
  }
}

/* Shine Button */
html[dir="rtl"] .shine-btn {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  letter-spacing: normal;
}

/* Head-Tilt Bar (Bielschowsky) */
html[dir="rtl"] .head-tilt-bar {
  direction: rtl;
}

html[dir="rtl"] .head-tilt-label {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  letter-spacing: normal;
}

/* Explanation Card & Flag Pill */
html[dir="rtl"] .explain-card {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .explain-body h2 {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  letter-spacing: normal;
  text-align: right;
}

html[dir="rtl"] .explain-body p {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  line-height: 1.7;
  letter-spacing: normal;
  text-align: right;
}

html[dir="rtl"] .flag-pill {
  letter-spacing: normal;
}

/* ── 7. Clinical Consoles (Cover Test, H-Test & Krimsky) ────── */
html[dir="rtl"] .ctc {
  direction: rtl;
  text-align: right;
}

/* BiDi isolation rules for console controls, numbers, and measurement units */
html[dir="rtl"] .ct-seg-btn,
html[dir="rtl"] .ctc-cond-name,
html[dir="rtl"] .ct-power-num,
html[dir="rtl"] .ct-power-unit,
html[dir="rtl"] .ht-pad-name,
html[dir="rtl"] .ct-field-name {
  unicode-bidi: isolate;
}

/* Numbers, units, speed, and trial tags must not suffer BiDi punctuation flipping */
html[dir="rtl"] .ctc-speed,
html[dir="rtl"] .ctc-speed .ct-seg-btn,
html[dir="rtl"] .ct-power-read,
html[dir="rtl"] .ct-power-num,
html[dir="rtl"] .ct-power-unit,
html[dir="rtl"] .ct-ladder,
html[dir="rtl"] .ct-rung,
html[dir="rtl"] .kr-trials,
html[dir="rtl"] .kr-trial,
html[dir="rtl"] .ctc-result-notation,
html[dir="rtl"] .ct-result-value,
html[dir="rtl"] .ctc-record-value,
html[dir="rtl"] .ct-axis-tab b {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Punctuation direction: ensure proper text-align and isolation */
html[dir="rtl"] .ctc-keys,
html[dir="rtl"] .ctc-coach-body,
html[dir="rtl"] .ct-warn {
  text-align: right;
  direction: rtl;
  unicode-bidi: isolate;
}

html[dir="rtl"] .ctc-coach-body strong,
html[dir="rtl"] .ctc-coach-body span,
html[dir="rtl"] .ctc-coach-body em {
  text-align: right;
  unicode-bidi: isolate;
}

html[dir="rtl"] .ctc-keys kbd {
  direction: ltr;
  display: inline-block;
  unicode-bidi: isolate;
}

/* Medical UX rule: Keep .ctc-pad in LTR so OD remains on the left and OS remains on the right */
html[dir="rtl"] .ctc-pad {
  direction: ltr !important;
}

html[dir="rtl"] .ctc-heading {
  margin-right: 0 !important;
  margin-left: auto !important;
  text-align: right;
}

html[dir="rtl"] .ctc-heading-text {
  text-align: right;
}

/* Ensure .ctc-steps and .ctc-side layout aligns seamlessly with .ctc-main in RTL */
html[dir="rtl"] .ctc-steps {
  border-right: none !important;
  border-left: 1px solid var(--border-soft) !important;
  padding: 16px 14px 16px 12px;
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .ctc-main {
  text-align: right;
  direction: rtl;
  min-width: 0;
}

html[dir="rtl"] .ctc-side {
  border-left: none !important;
  border-right: 1px solid var(--border-soft) !important;
  border-radius: 0 0 0 20px !important;
  text-align: right;
  direction: rtl;
}

@container ctc (max-width: 920px) {
  html[dir="rtl"] .ctc-side {
    border-right: none !important;
    border-top: 1px solid var(--border-soft) !important;
    border-radius: 0 0 20px 20px !important;
  }
}

@container ctc (max-width: 640px) {
  html[dir="rtl"] .ctc-steps {
    border-left: none !important;
    border-bottom: 1px solid var(--border-soft) !important;
  }
}

html[dir="rtl"] .ctc-step,
html[dir="rtl"] .ctc-step-text,
html[dir="rtl"] .ctc-step-title,
html[dir="rtl"] .ctc-step-hint,
html[dir="rtl"] .ctc-about-link,
html[dir="rtl"] .ctc-alt-test,
html[dir="rtl"] .kr-tech-card,
html[dir="rtl"] .kr-see-text,
html[dir="rtl"] .kr-naming,
html[dir="rtl"] .kr-hint,
html[dir="rtl"] .kr-check,
html[dir="rtl"] .ctc-drawer,
html[dir="rtl"] .ctc-drawer summary,
html[dir="rtl"] .ctc-record {
  text-align: right;
}

html[dir="rtl"] .kr-check span {
  unicode-bidi: isolate;
}

/* ── 8. Clinical Guide & 3D Anatomy Tabs (RTL) ───────────────── */
html[dir="rtl"] .guide-container {
  direction: rtl;
}

html[dir="rtl"] .guide-nav {
  text-align: right;
}

html[dir="rtl"] .guide-content {
  text-align: right;
  line-height: 1.7;
}

html[dir="rtl"] .anatomy-stage {
  direction: rtl;
}

html[dir="rtl"] .anatomy-card {
  text-align: right;
}

html[dir="rtl"] .anatomy-main-layout {
  direction: rtl;
}

/* ── 9. Swinging-Flashlight Lab (RAPD Lab) RTL ───────────────── */
html[dir="rtl"] .rpl {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .rpl-head-text,
html[dir="rtl"] .rpl-card,
html[dir="rtl"] .rpl-note,
html[dir="rtl"] .rpl-finding,
html[dir="rtl"] .rpl-confounds ul,
html[dir="rtl"] .rpl-endpoint {
  text-align: right;
}

html[dir="rtl"] .rpl-table th,
html[dir="rtl"] .rpl-table td {
  text-align: right;
}

html[dir="rtl"] .rpl-confounds ul {
  padding-left: 0;
  padding-right: 18px;
}

html[dir="rtl"] .rpl-key {
  margin-right: 0;
  margin-left: -4px;
}

/* ── 10. Visual Pathway Simulator RTL (Neuro-Ophtho) ─────────── */
html[dir="rtl"] .vp-workspace,
html[lang="ar"] .vp-workspace,
html.eye-rtl .vp-workspace {
  direction: rtl;
}

/* Panel headers, text alignments, and typography */
html[dir="rtl"] .vp-panel-header,
html[dir="rtl"] .vp-info-active,
html[dir="rtl"] .vp-info-default,
html[dir="rtl"] .vp-info-head,
html[dir="rtl"] .vp-info-section,
html[dir="rtl"] .vp-signs-section,
html[dir="rtl"] .vp-blood-supply-section {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .vp-panel-header h2,
html[dir="rtl"] .vp-info-head h3,
html[dir="rtl"] .vp-section-label {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  letter-spacing: normal !important;
}

html[dir="rtl"] #vp-info-desc,
html[dir="rtl"] .vp-info-default p,
html[dir="rtl"] #vp-pearl-text {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  line-height: 1.8;
  letter-spacing: normal;
}

/* Pathway Steps & Stations: flow RTL, flip step arrows horizontally */
html[dir="rtl"] .vp-pathway-steps,
html[dir="rtl"] .vp-stations-track,
html[dir="rtl"] .vp-case-nav-toolbar,
html[dir="rtl"] .vp-subcases-bar {
  direction: rtl;
}

html[dir="rtl"] .vp-case-select {
  padding: 0 10px 0 28px;
  text-align: right;
}

html[dir="rtl"] .vp-select-chevron {
  right: auto;
  left: 10px;
}

html[dir="rtl"] .vp-case-nav-btn--prev svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .vp-case-nav-btn--next svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .vp-station-arrow svg,
html[dir="rtl"] .vp-step-arrow svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .vp-station-scroll--left svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .vp-station-scroll--right svg {
  transform: scaleX(-1);
}

/* Button arrows in RTL */
html[dir="rtl"] .vp-btn-arrow {
  display: inline-block;
  transform: scaleX(-1);
  margin-left: 0;
  margin-right: 6px;
}

html[dir="rtl"] .vp-info-lesson-btn:hover .vp-btn-arrow {
  transform: scaleX(-1) translateX(3px);
}

/* Teaching Pearl Box: amber border on right side in RTL */
html[dir="rtl"] .vp-pearl-box {
  direction: rtl;
  border-left: 1px solid #fde68a;
  border-right: 4px solid #f59e0b;
  text-align: right;
}

html[dir="rtl"] .vp-pearl-icon {
  margin-left: 12px;
  margin-right: 0;
}

/* Etiology tag & chips */
html[dir="rtl"] .vp-etiology-tag {
  direction: rtl;
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  letter-spacing: normal;
}

html[dir="rtl"] .vp-signs-chips {
  direction: rtl;
  justify-content: flex-start;
}

html[dir="rtl"] .vp-sign-chip {
  font-family: 'IBM Plex Sans Arabic', 'Tajawal', sans-serif;
  letter-spacing: normal;
}

/* Blood supply monospace text */
html[dir="rtl"] .vp-blood-text {
  direction: rtl;
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', 'IBM Plex Mono', monospace;
  line-height: 1.6;
}

/* ════════════════════════════════════════════════════════════════
   CRITICAL CLINICAL PERIMETRY & CARTESIAN SPACE INTEGRITY RULES:
   1. Visual Field Perimetry: OD (Right Eye) MUST stay on the right
      and OS (Left Eye) on the left (patient POV convention).
   2. SVG Brain Diagram Viewport: Brain coordinates & labels must
      remain in LTR cartesian coordinate space.
   3. Landscape POV: Landscape canvas & SVG defect masks must retain
      LTR space.
   ════════════════════════════════════════════════════════════════ */
html[dir="rtl"] .vp-charts-row,
html[lang="ar"] .vp-charts-row,
html.eye-rtl .vp-charts-row {
  direction: ltr !important;
}

html[dir="rtl"] .vp-canvas-viewport,
html[lang="ar"] .vp-canvas-viewport,
html.eye-rtl .vp-canvas-viewport {
  direction: ltr !important;
  unicode-bidi: isolate;
}

html[dir="rtl"] .vp-scene,
html[lang="ar"] .vp-scene,
html.eye-rtl .vp-scene {
  direction: ltr !important;
}

/* SVG node text labels: keep unicode-bidi isolate so text renders cleanly */
html[dir="rtl"] .vp-node-text,
html[lang="ar"] .vp-node-text,
html.eye-rtl .vp-node-text {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', 'Inter', sans-serif;
  unicode-bidi: isolate;
}

/* Perimetry chart labels & binocular divider */
html[dir="rtl"] .vp-chart-eye-label {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
  direction: ltr; /* Keeps OD dot + text orderly */
}

/* Lessons Workspace in RTL */
html[dir="rtl"] #vp-lessons-workspace {
  direction: rtl;
}

html[dir="rtl"] #vp-lessons-sidebar {
  border-right: none;
  border-left: 1px solid #e2e8f0;
  text-align: right;
}

html[dir="rtl"] #vp-lessons-content {
  text-align: right;
  line-height: 1.8;
}

html[dir="rtl"] .ls-sidebar-header {
  font-family: 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
}

/* ── 9. Swinging-Flashlight Lab (RAPD Lab) RTL ─────────────────── */
html[dir="rtl"] .rpl {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .rpl-head {
  flex-direction: row;
}

html[dir="rtl"] .rpl-card h4 {
  letter-spacing: normal;
}

html[dir="rtl"] .rpl-table th,
html[dir="rtl"] .rpl-table td {
  text-align: right;
}

html[dir="rtl"] .rpl-confounds ul {
  padding-left: 0;
  padding-right: 20px;
}

html[dir="rtl"] .rpl-legend {
  direction: rtl;
}

html[dir="rtl"] .rpl-key {
  margin-right: 0;
  margin-left: 4px;
}

html[dir="rtl"] .rpl-readout {
  direction: rtl;
}

html[dir="rtl"] .rpl-value {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}