/*
 * Gerichte RTL-correcties voor Arabisch (dir="rtl").
 * Eén stylesheet voor alle drie talen — geen aparte stylesheet per taal.
 * Nederlands en Engels (dir="ltr") worden hier niet geraakt: elke regel
 * is gescoped onder [dir="rtl"].
 *
 * Dekt: hoofdnavigatie/dropdowns, dashboard-sidebar (Rooster, Leerlingkaart,
 * Lesson Workspace, Lesverslag, Sectiebeheer, Gebruikersbeheer, Taalbeheer,
 * Eigen vragen/Vragenbank/Examenmodellen, Video's), tabellen, badges en
 * popovers. Tijden, e-mailadressen en telefoonnummers blijven LTR via
 * dir="ltr" op de elementen zelf (in de templates), niet hier.
 */

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

/* ── Hoofdnavigatie: dropdown-menu's spiegelen ──────────────────────── */
[dir="rtl"] .nav-dropdown-menu {
  left: auto;
  right: 0;
}
[dir="rtl"] .nav-dropdown-menu[style*="right:0"] {
  right: auto;
  left: 0;
}

/* ── Dashboard-sidebar (240px, links in LTR) ────────────────────────
   De vaste sidebar op Rooster/Leerlingkaart/Workspace/Lesverslag/
   Sectiebeheer/Taalbeheer/Gebruikersbeheer/Eigen vragen/Vragenbank/
   Examenmodellen/Video's staat in LTR aan de linkerkant met een rand
   aan de buitenkant (border-left). In RTL hoort de sidebar rechts te
   staan met de rand aan diezelfde buitenkant (dus rechts). */
[dir="rtl"] .sc-sidebar,
[dir="rtl"] .ws-sidebar,
[dir="rtl"] .lr-sidebar {
  border-left: none;
  border-right: 1px solid #eee;
}

/* ── Tabellen: koptekst en cellen volgen leesrichting ───────────────── */
[dir="rtl"] table th,
[dir="rtl"] table td {
  text-align: right;
}
/* Numerieke/tijd-kolommen die bewust dir="ltr" hebben blijven links
   uitgelijnd binnen hun eigen cel — voorkomt "omgekeerde" getallen. */
[dir="rtl"] table th[dir="ltr"],
[dir="rtl"] table td[dir="ltr"] {
  text-align: left;
}

/* ── Student Card: matrixtabel — vaste kolom en info-popover ────────
   _matrix_table.html gebruikt al inset-inline-start/end (logisch), dus
   die volgen RTL automatisch. Hier alleen de mobiele full-bleed popover
   (position:fixed met expliciete left/right) en de tabel-scrollrichting. */
[dir="rtl"] .sc-info-card {
  text-align: right;
}

/* ── Voortgangsbalken: vulling loopt mee met leesrichting ───────────── */
[dir="rtl"] .progress-stripe .progress-bar-stripe {
  margin-left: auto;
  margin-right: 0;
}

/* ── Badges/pills met marge-icoontjes ───────────────────────────────── */
[dir="rtl"] .badge-stripe i,
[dir="rtl"] .diff-badge {
  direction: rtl;
}

/* ── Flatpickr datum-/tijdkiezer: kalendergrid spiegelen ─────────────
   Flatpickr's Arabische locale (l10n/ar.js) zet zelf geen `rtl`-vlag en
   de kalender-CSS is niet RTL-first ontworpen — zonder deze regels blijft
   de dagen-grid en de vorige/volgende-maand-navigatie LTR-georiënteerd
   ook wanneer de pagina dir="rtl" is. Geverifieerd tegen de daadwerkelijke
   flatpickr@4.6.13-bundel, niet aangenomen. */
[dir="rtl"] .flatpickr-calendar {
  direction: rtl;
}
[dir="rtl"] .flatpickr-months .flatpickr-month {
  direction: rtl;
}
[dir="rtl"] .flatpickr-prev-month {
  order: 2;
}
[dir="rtl"] .flatpickr-next-month {
  order: 0;
}
[dir="rtl"] .flatpickr-prev-month svg,
[dir="rtl"] .flatpickr-next-month svg {
  transform: rotate(180deg);
}
[dir="rtl"] .flatpickr-weekdays,
[dir="rtl"] .flatpickr-days {
  direction: rtl;
}
[dir="rtl"] .flatpickr-day {
  direction: rtl;
}
/* Tijdkiezer (uren/minuten): getallen zelf blijven LTR-leesbaar, alleen
   de volgorde van de spinner-knoppen mee laten spiegelen met de rest. */
[dir="rtl"] .flatpickr-time {
  direction: ltr;
}

/* ── Formulieren: selects/inputs met een pijl-icoon rechts in LTR ──── */
[dir="rtl"] select {
  background-position: left 0.7rem center;
}

/* ── Modals (sections.html e.d.): sluitknop blijft in de "end"-hoek ── */
[dir="rtl"] .filter-row input,
[dir="rtl"] .filter-row select {
  text-align: right;
}

/* ── Voorkom horizontale overflow op brede tabellen/matrices ────────── */
[dir="rtl"] { overflow-wrap: break-word; }