/* ══════════════════════════════════════════════════════════════
   dacum-rtl.css  —  DACUM Live Pro
   ------------------------------------------------------------
   TWO things live here and nothing else:

     1. The EN | FR | AR switcher styling (needed in every
        language, so it sits OUTSIDE the .dacum-rtl scope).
     2. Layout mirroring for right-to-left languages, scoped
        entirely under `body.dacum-rtl`.

   Everything in section 2 is inert until translations.js adds
   the class, so this file can be loaded unconditionally and
   costs an LTR user nothing.

   LOAD ORDER — this must come LAST, after dacum-styles.css,
   dacum-components.css, dacum-typography.css and
   dacum-responsive.css, or the mirroring will lose to the
   base rules on equal specificity.
   ══════════════════════════════════════════════════════════════ */



/* ══════════════════════════════════════════════════════════════
   CAIRO — self-hosted variable font
   --------------------------------------------------------------
   One file covers every weight the app uses. Declaring the range
   as 200-1000 (the font's own fvar range) lets the browser
   interpolate 600 from the same file instead of synthesising a
   fake bold, which is what a static 400-only file would force and
   what makes Arabic headings look smeared.

   font-display: swap — text appears immediately in the fallback
   and re-renders when Cairo arrives. For a facilitator projecting
   a chart to a room, invisible text for 300ms is worse than a
   brief font change.

   unicode-range is deliberately ABSENT. It would stop the browser
   downloading Cairo for a Latin-only page — but the interface
   mixes scripts constantly (DACUM, CNC, ISO 9001 inside Arabic
   sentences), and a per-glyph split makes those fragments render
   in a different face mid-word.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Cairo';
  src: url('fonts/Cairo.woff2') format('woff2-variations'),
       url('fonts/Cairo.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ══════════════════════════════════════════════════════════════
   WHY THERE IS NO `flex-direction: row-reverse` IN THIS FILE
   --------------------------------------------------------------
   There used to be twelve of them, and every one was a bug.

   `dir="rtl"` on <html> ALREADY reverses the main axis of every flex
   row: the first DOM child lands on the RIGHT and the row fills
   leftward. That happens for free, before any CSS here is read.

   Adding `row-reverse` on top reverses it a SECOND time, putting the
   layout back exactly where it started — which is why the sidebar
   labels, the Quick Start steps, the Additional Info section headers
   and the Back/Proceed buttons all still read left-to-right in Arabic
   while the text inside them was correctly right-aligned. The rules
   were not failing to apply; they were applying and cancelling the
   browser out.

   The correct RTL toolkit is:
     • dir="rtl"                        — reverses flex and inline flow
     • text-align: right                — only where a base rule hard-codes left
     • margin/padding-inline-start|end  — instead of physical left/right
     • unicode-bidi: isolate            — for Latin tokens inside Arabic
     • direction: ltr                   — for things that must NOT mirror
                                          (numbers, codes, the 0-3 scale,
                                          the chart plot)

   `row-reverse` belongs here in exactly one case: when a base rule sets
   `row-reverse` itself and the RTL layout needs plain `row`. That case
   does not occur anywhere in this app.
   ══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. LANGUAGE SWITCHER  (all languages)
   ───────────────────────────────────────────────────────────── */

/* 3.99.4 — compact dropdown (as in DACUM Lite) replacing the three
   pills: one button with the active language, a menu below it. The
   pills were ~145 px wide on a phone and covered the end of the
   scrolling toolbar. Every axis of the trigger and the items is pinned
   — dacum-responsive.css gives every <button> min-height:44px on touch
   devices, which would otherwise stretch them. */
#dacumLangWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-inline-start: 6px;
  margin-inline-end: 4px;
}

#dacumLangWrap .dacum-lang-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  min-width: 0;
  padding: 0 11px 0 10px;
  box-sizing: border-box;
  border: 1.5px solid #e2e2e4;
  border-radius: 12px;
  background: #f4f4f6;
  color: #1f2937;
  font: 700 0.82em/1 inherit;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#dacumLangWrap .dacum-lang-trigger:hover { background: #ececf0; border-color: #c8c8cc; }
#dacumLangWrap.is-open .dacum-lang-trigger {
  background: #eef0ff;
  border-color: #a5b4fc;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
#dacumLangWrap .dacum-lang-trigger:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

#dacumLangWrap .dacum-lang-globe { flex-shrink: 0; color: #6366f1; }
#dacumLangWrap .dacum-lang-chev  {
  flex-shrink: 0;
  color: #6b7280;
  transform: rotate(180deg);
  transition: transform 0.18s ease;
}
#dacumLangWrap.is-open .dacum-lang-chev { transform: rotate(0deg); }

/* Full name on wide screens, two-letter code where space is tight. */
#dacumLangWrap .dacum-lang-code { display: none; letter-spacing: 0.03em; }
@media (max-width: 1320px) {
  #dacumLangWrap .dacum-lang-name { display: none; }
  #dacumLangWrap .dacum-lang-code { display: inline; }
  #dacumLangWrap .dacum-lang-trigger { padding: 0 8px; gap: 4px; }
}
@media (max-width: 420px) {
  #dacumLangWrap .dacum-lang-globe { display: none; }
  #dacumLangWrap { margin-inline-start: 4px; margin-inline-end: 0; }
}

#dacumLangWrap .dacum-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 1000;
  min-width: 168px;
  padding: 6px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
#dacumLangWrap.is-open .dacum-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}

#dacumLangWrap .dacum-lang-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #374151;
  font: 500 0.95em/1 inherit;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
#dacumLangWrap .dacum-lang-btn:hover:not(:disabled) { background: #f3f4f6; color: #111827; }
#dacumLangWrap .dacum-lang-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
#dacumLangWrap .dacum-lang-btn.is-active { background: #f1f2f6; color: #4338ca; font-weight: 800; }
#dacumLangWrap .dacum-lang-check { flex-shrink: 0; visibility: hidden; color: #4338ca; }
#dacumLangWrap .dacum-lang-btn.is-active .dacum-lang-check { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  #dacumLangWrap .dacum-lang-menu,
  #dacumLangWrap .dacum-lang-chev { transition: none; }
}


/* ─────────────────────────────────────────────────────────────
   2. RTL LAYER  —  everything below requires body.dacum-rtl
   ───────────────────────────────────────────────────────────── */

/* Arabic needs a face with proper Kashida and diacritic metrics;
   Latin-first UI stacks render it with fallback glyphs that sit
   too small on the line. Cairo is used at a slightly larger size
   because Arabic x-height reads smaller than Latin at parity. */
body.dacum-rtl,
body.dacum-rtl input,
body.dacum-rtl textarea,
body.dacum-rtl select,
body.dacum-rtl button {
  font-family: 'Cairo', 'Tajawal', 'Noto Sans Arabic',
               'Segoe UI', Tahoma, sans-serif;
}

body.dacum-rtl {
  font-size: 1.03em;
  line-height: 1.75;   /* Arabic ascenders/descenders need the room */
}


/* ── Text alignment ────────────────────────────────────────────
   `text-align: right` is deliberate rather than `start`: several
   base rules hard-code `left`, and `start` would lose to them on
   specificity in exactly the places that matter most. */
body.dacum-rtl h1,
body.dacum-rtl h2,
body.dacum-rtl h3,
body.dacum-rtl h4,
body.dacum-rtl p,
body.dacum-rtl label,
body.dacum-rtl li,
body.dacum-rtl td,
body.dacum-rtl th,
body.dacum-rtl input,
body.dacum-rtl textarea {
  text-align: right;
}

/* Fields whose content is NEVER Arabic. Forcing these back to LTR
   prevents the bidi algorithm from reordering digits, codes and
   file names into nonsense. */
body.dacum-rtl input[type="date"],
body.dacum-rtl input[type="number"],
body.dacum-rtl input[type="email"],
body.dacum-rtl input[type="url"],
body.dacum-rtl input[type="tel"],
body.dacum-rtl .task-code,
body.dacum-rtl .duty-code,
body.dacum-rtl .score-cell,
body.dacum-rtl code,
body.dacum-rtl pre {
  direction: ltr;
  text-align: left;
  unicode-bidi: isolate;
}


/* ── Top toolbar ───────────────────────────────────────────────
   #dacumTopToolbar is a three-zone bar. Under dir=rtl the zones
   swap automatically; what does NOT swap is anything positioned
   with physical left/right, so those are restated. */
html[dir="rtl"] #dacumTopToolbar .dtb-icon {
  margin-inline-end: 5px;
  margin-inline-start: 0;
}
/* Icon-only pills (labels hidden at ≤1100px, dacum-responsive.css): the
   label spacing above pushed the icon 2.5px off-centre. */
@media (max-width: 1100px) {
  html[dir="rtl"] #dacumTopToolbar .dtb-btn .dtb-icon { margin-inline-end: 0; }
}


/* ── Sidebar ───────────────────────────────────────────────────
   TWO things made this fail on the first attempt, both worth naming:

   1. The selector. The sidebar is `.dps-sidebar`, not the
      `#dacumProjectsSidebar` id I first guessed — that id does not
      exist anywhere in the app, so the rule was inert.

   2. Specificity. dacum_projects.js injects its own <style> block at
      RUNTIME, which lands after every <link> in the document. Source
      order was therefore always against us, and matching specificity
      loses. Every rule below is prefixed with html[dir="rtl"] to win
      on specificity instead of position — no !important needed.

   The visible symptom was the sidebar covering the content on the
   right while an empty 260px gutter sat on the left: the sidebar had
   moved but `margin-left: 260px` on the container had not. Both edges
   must flip together or they fight. */

html[dir="rtl"] .dps-sidebar {
  left: auto;
  right: 0;
  box-shadow: -2px 0 16px rgba(0, 0, 0, 0.3);
}

/* The content offset that pairs with the sidebar width. Physical
   margin-left is what the base rule sets, so it must be zeroed and
   re-applied on the other side — logical properties alone would not
   override it. */
/* DESKTOP ONLY. Below 1100px the sidebar stops being a push-panel and
   becomes an overlay drawer, and dacum-responsive.css zeroes the
   container margin. My first version of this rule had no media query,
   so on a phone it kept a 260px margin-right that nothing overrode
   (their reset only touches margin-LEFT). That pushed the whole app
   off the right edge of the viewport — the empty coloured area in the
   PWA screenshot — and the resulting horizontal overflow is what made
   the drawer look clipped and stuck. */
@media (min-width: 1101px) {
  html[dir="rtl"] #dacumAppWrapper > .container {
    margin-left: 0;
    margin-right: 260px;
    transition: none;   /* 3.129.3: moved once, not animated (dacum_projects.js) */
  }

  html[dir="rtl"] #dacumAppWrapper.dps-is-collapsed > .container {
    margin-left: 0;
    margin-right: 68px;
  }
}

/* ── Mobile / PWA: overlay drawer ──────────────────────────────
   Every base rule in this breakpoint uses !important, so matching it
   is the only way to win — specificity alone cannot beat !important.
   This is the one place in this file where !important is correct
   rather than lazy. */
@media (max-width: 1100px) {

  /* Belt and braces: kill BOTH margins so no stale value can survive
     a language switch mid-session. */
  html[dir="rtl"] #dacumAppWrapper > .container,
  html[dir="rtl"] #dacumAppWrapper.dps-is-collapsed > .container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* The drawer must dock to — and retract past — the right edge.
     translateX(+100%) instead of -100%: it hides beyond the right
     side, matching the side it now docks on. */
  html[dir="rtl"] .dps-sidebar {
    left: auto !important;
    right: 0 !important;
    transform: translateX(100%) !important;
  }

  html[dir="rtl"] .dps-sidebar.dps-mobile-open {
    transform: translateX(0) !important;
    box-shadow: -2px 0 24px rgba(0, 0, 0, 0.35) !important;
  }

  /* Nothing may create horizontal overflow in RTL: on a phone the
     scroll origin sits at the right edge, so any overflow opens as a
     blank gutter the user cannot easily scroll back from. */
  html[dir="rtl"] body {
    overflow-x: hidden;
  }
}

/* Active-nav accent bar: a 3px spine on the inline-start edge, with
   its rounded corners facing inward. Both the side and the corner
   radii mirror. */
html[dir="rtl"] .dps-nav-item.dps-nav-active::before {
  left: auto;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* Collapsed-rail tooltips fly out away from the sidebar. */
html[dir="rtl"] .dps-sidebar.dps-collapsed .dps-nav-item::after {
  left: auto;
  right: 74px;
}

/* The collapse chevron points toward the edge the panel retracts to,
   so it flips with the layout. */
html[dir="rtl"] .dps-collapse-btn {
  transform: scaleX(-1);
}

/* Search field icon padding. */
html[dir="rtl"] .dps-search {
  padding-left: 10px;
  padding-right: 34px;
}
html[dir="rtl"] .dps-search-box.is-focused .dps-search {
  padding-right: 10px;
}

/* ── Accent borders ──────────────────────────────────────────
   ONLY the elements that actually carry a border-left in
   dacum-styles.css are listed here. An earlier version of this file
   mirrored a "card accent" onto .dcv-duty-card, .dcv-task-card,
   .duty-card, .cluster-card and .section-container — none of which
   have such a border in the base design. The result was a purple
   stripe on duty and task cards in Arabic and nowhere else: not a
   mirrored border, an invented one.

   The rule is narrower than it first looks. Mirroring is only ever a
   CORRECTION to a declaration that already exists. Anything that adds
   decoration in one language and not another is a bug, however
   tasteful it looks in isolation. Before adding a selector here, grep
   the base sheet and confirm the property is genuinely there. */

html[dir="rtl"] .info-box                   { border-left: none; border-right: 6px solid #f59e0b; }
html[dir="rtl"] .verification-instructions  { border-left: none; border-right: 4px solid #3b82f6; }
html[dir="rtl"] .validation-warning         { border-left: none; border-right: 4px solid #ef4444; }
html[dir="rtl"] .validation-warning.error   { border-left: none; border-right: 4px solid #dc2626; }
html[dir="rtl"] .validation-warning.warning { border-left: none; border-right: 4px solid #eab308; }
html[dir="rtl"] .summary-card               { border-left: none; border-right: 4px solid #667eea; }
html[dir="rtl"] .skills-level-info-box      { border-left: none; border-right: 4px solid #3b82f6; }

/* ── Lists, bullets and indentation ────────────────────────────
   padding-left on a list is the single most common thing that
   strands bullets on the wrong side. */
body.dacum-rtl ul,
body.dacum-rtl ol {
  padding-left: 0;
  padding-right: 24px;
}


/* ── Directional glyphs ────────────────────────────────────────
   Emoji and icon glyphs that encode direction (arrows, pointing
   hands) must be flipped; everything else must NOT be, or logos
   and photographs come out mirrored. Applied narrowly, by class. */
body.dacum-rtl .rtl-flip {
  display: inline-block;
  transform: scaleX(-1);
}


/* ── Tables ────────────────────────────────────────────────────
   Verification and clustering tables are read as matrices. The
   header column must move to the right with the text. */
body.dacum-rtl table {
  direction: rtl;
}

body.dacum-rtl table th:first-child,
body.dacum-rtl table td:first-child {
  text-align: right;
}


/* ── Inputs with leading icons / padding ───────────────────────
   Any base rule using padding-left to clear an icon needs the
   logical equivalent once mirrored. */
body.dacum-rtl .input-with-icon {
  padding-left: 12px;
  padding-right: 38px;
}



/* ── Print / export preview ────────────────────────────────────
   The on-screen preview should match what Word will produce. PDF
   export is intentionally NOT wired for Arabic yet (jsPDF does no
   Arabic shaping) — translations.js shows msgPdfArabicUnsupported
   instead. */
@media print {
  body.dacum-rtl {
    direction: rtl;
  }
}


/* ─────────────────────────────────────────────────────────────
   3. DUTIES & TASKS  —  added with the Duties tab translation
   ───────────────────────────────────────────────────────────── */

/* Duty letters and task codes (A, A1, B12) are wrapped in <bdi> by
   duties.js. <bdi> already isolates them from the surrounding bidi
   run; this only stops a long code from wrapping mid-token. */
html[dir="rtl"] bdi {
  white-space: nowrap;
}

/* Drag handles sit at the inline-start edge of a row. dir=rtl moves
   them automatically; what does not move is any absolute positioning. */
html[dir="rtl"] .dcv-duty-drag-handle,
html[dir="rtl"] .dcv-task-drag-handle {
  left: auto;
  right: 6px;
}

/* Remove / add buttons pinned to the opposite edge. */
html[dir="rtl"] .dcv-duty-remove,
html[dir="rtl"] .dcv-task-remove,
html[dir="rtl"] .dcv-duty-add,
html[dir="rtl"] .dcv-task-add {
  right: auto;
  left: 6px;
}

/* The zoom percentage readout is a number with a % sign — leave it
   LTR so the sign stays on the correct side of the digits. */
html[dir="rtl"] .wv-zoom-pct {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Print header for Card View printouts follows the content language. */
html[dir="rtl"] .wall-print-header {
  direction: rtl;
  text-align: right;
}


/* ── Print ─────────────────────────────────────────────────────
   dacum-responsive.css resets margin-left for print but not the
   mirrored margin, which would otherwise indent every printed page. */
@media print {
  html[dir="rtl"] #dacumAppWrapper > .container,
  html[dir="rtl"] #dacumAppWrapper.dps-is-collapsed > .container {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}


/* ─────────────────────────────────────────────────────────────
   4. HELP MODALS + ADDITIONAL INFO
   ───────────────────────────────────────────────────────────── */

/* The modal builder writes inline styles, which beat any stylesheet.
   Only properties it does NOT set inline can be corrected here — hence
   the accent bar in events.js was changed to border-inline-start at
   source rather than being fought with CSS. */
[dir="rtl"] [role="dialog"] {
  text-align: right;
}

/* Latin technical terms quoted inside Arabic help text (DACUM, Ctrl+Z,
   product names) keep their own direction. */
[dir="rtl"] [role="dialog"] em,
[dir="rtl"] [role="dialog"] code {
  unicode-bidi: isolate;
}

/* Textareas in Additional Info hold bulleted lists the facilitator types
   by hand. Forcing RTL on the element (rather than relying on `auto`)
   keeps the bullet glyph on the right even when a line opens with a
   Latin acronym such as OBD or ECU. */
html[dir="rtl"] .section-container textarea {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .skills-level-info-box ul {
  padding-left: 0;
  padding-right: 22px;
}


/* ─────────────────────────────────────────────────────────────
   5. TASK VERIFICATION
   ───────────────────────────────────────────────────────────── */

/* THE RULE FOR THIS TAB: mirror the layout, never the numbers.
   Every score, mean, count and index stays in Latin digits and LTR —
   they are compared column-against-column, exported to CSV, and fed
   into charts. Flipping them would break sorting and silently corrupt
   any file a facilitator already shared. */

html[dir="rtl"] .verification-table,
html[dir="rtl"] .dashboard-table {
  direction: rtl;
}

/* Task text is prose and follows the content language; the numeric
   cells are isolated so a leading minus, decimal point or 0-3 label
   cannot be dragged to the wrong end of the cell. */
html[dir="rtl"] .verification-table td:not(:first-child),
html[dir="rtl"] .dashboard-table td:not(:nth-child(2)):not(:nth-child(3)) {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: center;
}

html[dir="rtl"] .verification-table th:first-child,
html[dir="rtl"] .dashboard-table th:nth-child(2),
html[dir="rtl"] .dashboard-table th:nth-child(3) {
  text-align: right;
}

/* The 0-3 rating scale: radio buttons read left-to-right as an ordinal
   axis (0 → 3). Reversing them would put 3 where a facilitator's eye
   expects 0 — a data-entry error waiting to happen in a live session,
   where the panel is calling out numbers at speed. Scales stay LTR in
   every language, exactly like the digits inside them. */
html[dir="rtl"] .rating-scale,
html[dir="rtl"] .count-inputs {
  direction: ltr;
}

/* Session ID, participant link and QR payload are opaque identifiers:
   never reordered, never wrapped mid-token. */
html[dir="rtl"] #lwSessionId,
html[dir="rtl"] #lwParticipantLink {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: left;
}

/* The live-workshop bullet list. */
html[dir="rtl"] #lwStep1-finalize ul {
  padding-left: 0;
  padding-right: 25px;
}

/* Priority badges size themselves to their label; Arabic labels are
   wider than "LOW"/"HIGH", so give them room rather than let them wrap. */
html[dir="rtl"] .priority-badge,
html[dir="rtl"] .completion-indicator {
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────
   6. COMPETENCY CLUSTERS
   ───────────────────────────────────────────────────────────── */

/* Task codes (A1, B12) are wrapped in <strong> in the cluster lists
   rather than <bdi>, because they are followed by a colon and the task
   text — isolate them so the colon stays attached to the code. */
html[dir="rtl"] .task-checkbox-label strong,
html[dir="rtl"] .related-task-item strong {
  unicode-bidi: isolate;
}

/* The remove-task ✕ is pushed to the far edge with margin-left in the
   inline style, which cannot be reached from a stylesheet. Cancel it
   and re-apply on the mirrored side. */
html[dir="rtl"] .related-task-item .btn-remove-task {
  margin-left: 0 !important;
  margin-right: 10px;
}

/* PI badges hold a decimal number. */
html[dir="rtl"] .task-priority-badge {
  direction: ltr;
  unicode-bidi: isolate;
}

/* PERFORMANCE CRITERIA TEXTAREA — the one to be careful with.
   Its content is numbered "1-1 ", "1-2 " at the START of each line,
   generated by the app, then followed by Arabic prose. Left to `auto`,
   the bidi algorithm resolves each line's base direction from its first
   strong character — the digit is neutral, so the line would flip
   direction depending on what the user typed. Forcing RTL keeps every
   line consistent, and the isolate below keeps the number itself intact. */
html[dir="rtl"] .cluster-section textarea {
  direction: rtl;
  text-align: right;
}

/* Cluster titles may be a competence statement in either language. */
html[dir="rtl"] .cluster-title {
  text-align: right;
}


/* ─────────────────────────────────────────────────────────────
   7. LEARNING OUTCOMES
   ───────────────────────────────────────────────────────────── */

/* PC identifiers (C1-PC2) and LO numbers (LO1) are generated codes:
   never reordered, never translated, never wrapped mid-token. */
html[dir="rtl"] .pc-number,
html[dir="rtl"] .lo-number,
html[dir="rtl"] .lo-linked-item strong {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* The reassign dropdown and the ✕ button are positioned with inline
   margin-left, which no stylesheet can override — cancel and mirror. */
html[dir="rtl"] .pc-checkbox-item .task-dropdown-container,
html[dir="rtl"] .lo-linked-item .btn-remove-task {
  margin-left: 0 !important;
  margin-right: 10px;
}

/* The LO statement is prose the facilitator writes; the editing
   textarea must match the direction of the text it will display, or
   the caret jumps to the wrong end on the first keystroke. */
html[dir="rtl"] .lo-statement,
html[dir="rtl"] .lo-statement textarea {
  direction: rtl;
  text-align: right;
}

/* Cluster group headings in the source list. */
html[dir="rtl"] .pc-cluster-group h4,
html[dir="rtl"] .pc-label {
  text-align: right;
}

/* The "Used" badge sits between the label and the dropdown. */
html[dir="rtl"] .pc-used-badge {
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────
   8. MODULE MAPPING
   ───────────────────────────────────────────────────────────── */

/* LO numbers and the comma-joined PC id list ("C1-PC2, C1-PC3") are
   generated identifiers. The separators matter: left to the bidi
   algorithm, a comma between two Latin codes inside an Arabic block
   can migrate to the wrong end of the run. */
html[dir="rtl"] .module-lo-number,
html[dir="rtl"] .module-lo-assigned-number,
html[dir="rtl"] .module-lo-criteria,
html[dir="rtl"] .module-lo-assigned-criteria {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

/* LO statements inside modules are prose in the content language. */
html[dir="rtl"] .module-lo-statement,
html[dir="rtl"] .module-lo-assigned-statement,
html[dir="rtl"] .module-title {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .btn-remove-lo {
  white-space: nowrap;
}

html[dir="rtl"] .dps-nav-label,
html[dir="rtl"] .dps-nav-text,
html[dir="rtl"] .dps-card-name,
html[dir="rtl"] .dps-card-meta,
html[dir="rtl"] .dps-empty {
  text-align: right;
}

/* The inline rename field must open in the direction of the name it is
   replacing, or the caret starts at the wrong end. */
html[dir="rtl"] .dps-card-name-input {
  direction: rtl;
  text-align: right;
}

/* "DACUM Live Pro" is a product name: always Latin, always LTR, even
   when the panel around it is mirrored. */
html[dir="rtl"] .dps-brand-text {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Card counts read «3 واجبات · 12 مهمة». The middle dot is a neutral
   character: without isolation the bidi algorithm can drag it to the
   end of the run and the two figures collapse into one another. */
html[dir="rtl"] .dps-card-stats span {
  unicode-bidi: isolate;
}

/* The welcome and storage-full overlays are appended to <body> and
   styled entirely inline, so only direction can be corrected here. */
html[dir="rtl"] #dacumWelcomeOverlay,
html[dir="rtl"] #dacumQuotaOverlay {
  direction: rtl;
}

/* Size figures (2.4 MB) stay LTR inside the quota list. */
html[dir="rtl"] #dacumQuotaOverlay strong {
  unicode-bidi: isolate;
}

html[dir="rtl"] .hc-title,
html[dir="rtl"] .hc-subtitle,
html[dir="rtl"] .hc-card-desc,
html[dir="rtl"] .hc-steps li div,
html[dir="rtl"] .hc-tips-block p,
html[dir="rtl"] .copyright {
  text-align: right;
}

/* Step numbers, the version number, the email address and the LinkedIn
   handle are all Latin tokens inside Arabic prose. */
html[dir="rtl"] .hc-step-num,
html[dir="rtl"] .hc-contact-value,
html[dir="rtl"] #dacumFooterVersion {
  direction: ltr;
  unicode-bidi: isolate;
}

/* The creator's name renders in whichever script it is written in and
   is never mirrored — a proper noun is not UI text. */
html[dir="rtl"] .hc-creator-name {
  unicode-bidi: isolate;
}

html[dir="rtl"] .tvc-title,
html[dir="rtl"] .tvc-duty {
  text-align: right;
}

html[dir="rtl"] .tvc-plot,
html[dir="rtl"] .tvc-duty-nav {
  direction: ltr;
}

/* The chevrons point along the duty sequence, which stays LTR with the
   plot, so they must NOT be flipped. Stated explicitly so a later
   blanket mirror rule does not quietly reverse them. */
html[dir="rtl"] .tvc-duty-nav svg {
  transform: none;
}

html[dir="rtl"] .qrm-title,
html[dir="rtl"] .qrm-subtitle {
  text-align: right;
}


/* ═════════════════════════════════════════════════════════════
   11. ALIGNMENT CORRECTIONS
   -------------------------------------------------------------
   These exist for one reason: a base rule hard-codes a PHYSICAL
   left. `dir="rtl"` cannot override an explicit `text-align: left`
   or `margin-left`, so each one has to be answered by name.

   Everything else in this file is deliberately NOT here — flex
   order, inline flow and list markers all follow dir="rtl" on
   their own. See the note at the top of the file.
   ═════════════════════════════════════════════════════════════ */

/* ── Sidebar navigation ──────────────────────────────────────
   .dps-nav-item sets `text-align: left` explicitly (needed in LTR
   because a <button> centres its text by default). In Arabic that
   pins every label to the left edge of a right-hand panel. */
html[dir="rtl"] .dps-nav-item {
  text-align: right;
}

/* The button is a flex row; with dir=rtl the icon and label already
   sit right-to-left. justify-content is restated because the base
   rule may leave it at flex-start, which is direction-aware and
   therefore already correct — this simply makes it explicit and
   immune to a later physical override. */
html[dir="rtl"] .dps-nav-item:not(.dps-collapsed *) {
  justify-content: flex-start;
}

/* Project cards: name, date and counts. */
html[dir="rtl"] .dps-card,
html[dir="rtl"] .dps-card-name,
html[dir="rtl"] .dps-card-meta,
html[dir="rtl"] .dps-card-stats,
html[dir="rtl"] .dps-title,
html[dir="rtl"] .dps-empty,
html[dir="rtl"] .dps-search {
  text-align: right;
}

/* ── Help Centre: Quick Start ────────────────────────────────
   Each step is a flex row of [number][text]. dir=rtl puts the
   number on the right, which is correct. Only the text block
   needs its alignment answered. */
html[dir="rtl"] .hc-steps,
html[dir="rtl"] .hc-steps li,
html[dir="rtl"] .hc-steps li div,
html[dir="rtl"] .hc-tips-block,
html[dir="rtl"] .hc-tips-block p,
html[dir="rtl"] .hc-card,
html[dir="rtl"] .hc-card-desc,
html[dir="rtl"] .hc-callout,
html[dir="rtl"] .hc-creator,
html[dir="rtl"] .hc-contact-item {
  text-align: right;
}

/* The ordered list's own indent. */
html[dir="rtl"] .hc-steps {
  padding-left: 0;
  padding-right: 0;
}

/* ── Additional Info section headers ─────────────────────────
   Row is [heading][Number][Bullet][Rename][Clear]. Under dir=rtl
   the heading takes the right edge and the buttons run leftward
   from it — the order the user reads. Only the heading's own
   alignment needs stating, plus space-between to keep the button
   cluster pinned to the far edge. */
html[dir="rtl"] .section-header-editable {
  justify-content: space-between;
}

/* ── Section action icons ─────────────────────────────────────
   The list icons are deliberately NOT mirrored under RTL.

   Mirroring them was tried and reverted. Word does flip its own list
   buttons, and scaleX(-1) moves the markers to the right correctly —
   but it also mirrors the 1-2-3 glyphs, and a mirrored digit is not a
   digit. Cancelling that with a per-glyph counter-flip
   (transform-box: fill-box) collapsed the digits to slivers at the
   canvas edge in Chromium.

   The alternative was a second set of artwork for RTL. Not worth it:
   an unmirrored list icon is unambiguous in either direction, and the
   button's meaning is carried by its title and aria-label anyway. The
   rename I-beam and the trash are symmetrical, so nothing else here
   needs a direction rule at all. */

html[dir="rtl"] .section-header-editable h3,
html[dir="rtl"] .section-container h3,
html[dir="rtl"] .section-container label {
  text-align: right;
}

/* ── Step navigation (Back / Proceed) ────────────────────────
   The row is [Back][Proceed] in the DOM with space-between. Under
   dir=rtl that puts Back on the RIGHT and Proceed on the LEFT,
   which is what an Arabic reader expects: forward motion runs
   leftward. No rule is needed for the order itself — this only
   guards the justification. */
html[dir="rtl"] .step-nav-row {
  justify-content: space-between;
}

/* ── Card and cluster headers ────────────────────────────────*/
html[dir="rtl"] .cluster-header,
html[dir="rtl"] .lo-block-header,
html[dir="rtl"] .module-header,
html[dir="rtl"] .duty-accordion-header,
html[dir="rtl"] .tab-header-row {
  justify-content: space-between;
  text-align: right;
}

/* Help tab: icon + title read as one group from the right edge (the icon
   first, the title beside it), as in LTR from the left. space-between
   pushed the title to the far left in Arabic. */
html[dir="rtl"] .hc-header,
html[dir="rtl"] .hc-card-head {
  justify-content: flex-start;
  text-align: right;
}

/* ── Generic: any button whose text a base rule left-aligns ──*/
html[dir="rtl"] button,
html[dir="rtl"] .task-checkbox-label,
html[dir="rtl"] .pc-checkbox-item label,
html[dir="rtl"] .module-lo-item label {
  text-align: right;
}

/* …except the ones that are centred on purpose. Restated after
   the blanket rule above so it does not flatten them. */
html[dir="rtl"] .dtb-btn,
html[dir="rtl"] .btn-add,
html[dir="rtl"] .btn-next-step,
html[dir="rtl"] .btn-back-step,
html[dir="rtl"] .hc-btn,
html[dir="rtl"] .qrm-btn,
html[dir="rtl"] .tvc-close,
html[dir="rtl"] .dps-new-btn {
  text-align: center;
}


/* ── Language switcher: locked state ─────────────────────────
   Set while a Full Draft run is in flight. The active pill stays
   readable so the user can still see WHICH language is locked —
   greying all three would look like a failure rather than a
   deliberate hold. */
#dacumLangWrap.is-locked .dacum-lang-trigger {
  opacity: 0.75;
  cursor: not-allowed;
}

#dacumLangWrap.is-locked .dacum-lang-btn:disabled {
  cursor: not-allowed;
  color: #b0b0b6;
}

#dacumLangWrap.is-locked .dacum-lang-btn.is-active {
  color: #4f46e5;
}


/* ── Service-worker update banner ────────────────────────────
   Built inline in <head> and appended to <body>; dir is set on
   the element itself by that block. These rules only handle what
   inline styles leave open. */

[dir="rtl"] #_dacumSwToast {
  text-align: right;
}

/* The ↻ glyph is rotational, not directional — it means the same
   thing in both scripts and must not be mirrored. */
[dir="rtl"] #_dacumSwToast svg {
  transform: none;
}

/* The version string (v3.17.1) is a Latin token inside an
   otherwise Arabic chip. */
html[dir="rtl"] #dacumVersionText {
  direction: ltr;
  unicode-bidi: isolate;
}


/* ═════════════════════════════════════════════════════════════
   12. CARD VIEW — the sticky duty card
   -------------------------------------------------------------
   Two physical properties in dacum-components.css do not follow
   dir="rtl", and both were visible:

     position: sticky; left: 0;
       The duty card pins to the LEFT edge while the task strip
       scrolls beneath it. In Arabic the strip scrolls from the
       right, so the card pinned to the edge the tasks were
       leaving — it scrolled away with them instead of holding
       still and "swallowing" them.

     border-radius: 14px 0 0 14px;
       Square on the right, rounded on the left — shaped so the
       flat side meets the task strip. Mirrored, the flat side
       ended up facing away from the tasks, so the Arabic card
       looked rounded on all four corners.

   Both are corrections to declarations that genuinely exist, and
   both restore the ENGLISH behaviour rather than inventing an
   Arabic variant of it. The design is meant to be identical in
   every language; only the axis changes.
   ═════════════════════════════════════════════════════════════ */

html[dir="rtl"] .card-view-mode .dcv-duty-card {
  left: auto;
  right: 0;
  /* Flat edge faces the task strip, which is now on the left. */
  border-radius: 0 14px 14px 0;
  border-right-width: 1px;
  border-left-width: 2px;
}

/* Phones drop the sticky behaviour entirely and round every corner;
   that override is direction-neutral, but it sets border-radius as a
   shorthand AFTER the rule above in source order only when the media
   query matches — restate it so the mirrored corners do not leak in. */
@media (max-width: 768px) {
  html[dir="rtl"] .card-view-mode .dcv-duty-card {
    position: static;
    border-radius: 14px;
    border-left-width: 1px;
  }
}

/* The horizontal strip itself. dir=rtl already reverses the flex
   order and starts the scroll at the right edge — no rule needed for
   that. This only cancels the physical margin reset. */
html[dir="rtl"] .card-view-mode .dcv-tasks-area {
  margin-left: 0;
  margin-right: 0;
}