/* ═══════════════════════════════════════════════════════════════
   VIANA ASSETS — core/i18n/rtl.css  v1.0
   RTL-Layout-Layer für Arabisch.
   Aktiviert via body.rtl (gesetzt durch i18n.js beim Sprachwechsel).

   Prinzip:
   1. Alle left/right physischen Properties → logical properties
   2. Flexbox-Richtung umkehren wo nötig
   3. Sidebar spiegeln
   4. Icons/Pfeile umkehren
   5. Chart-Labels RTL
═══════════════════════════════════════════════════════════════ */

/* ── Basis-RTL für HTML-Element ─────────────────────────────── */
[dir="rtl"] {
  text-align: start;          /* statt left */
}

/* ── Schriftstack für Arabisch ──────────────────────────────── */
[dir="rtl"] body,
[dir="rtl"] .app-layout {
  font-family: 'Segoe UI', 'Noto Sans Arabic', 'Arial Unicode MS',
               'Plus Jakarta Sans', sans-serif;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════════════════════ */

/* App-Hauptlayout: Sidebar links → rechts */
[dir="rtl"] .app-layout {
  flex-direction: row-reverse;
}

/* Sidebar */
[dir="rtl"] .sidebar {
  border-inline-start: none;
  border-inline-end: 1px solid var(--color-border);
  right: auto;
  left: 0;
  transform: translateX(-100%);
}
[dir="rtl"] .sidebar.open {
  transform: translateX(0);
}

/* Haupt-Content hat padding auf der richtigen Seite */
[dir="rtl"] .app-content {
  margin-inline-start: 0;
  margin-inline-end: var(--sidebar-width, 240px);
}
@media (max-width: 768px) {
  [dir="rtl"] .app-content {
    margin-inline-end: 0;
  }
}

/* ══════════════════════════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════════════════════════ */
[dir="rtl"] .nav-item {
  flex-direction: row-reverse;
  text-align: end;
}
[dir="rtl"] .nav-icon {
  margin-inline-start: var(--space-3);
  margin-inline-end: 0;
}
[dir="rtl"] .sidebar-section-label {
  text-align: end;
}
[dir="rtl"] .sidebar-logo {
  flex-direction: row-reverse;
}
[dir="rtl"] .sidebar-user {
  flex-direction: row-reverse;
}

/* ══════════════════════════════════════════════════════════════
   MODULE-TABS
══════════════════════════════════════════════════════════════ */
[dir="rtl"] .module-tabs {
  flex-direction: row-reverse;
}

/* ══════════════════════════════════════════════════════════════
   CARDS & GRIDS
══════════════════════════════════════════════════════════════ */
[dir="rtl"] .card-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .kpi-card {
  text-align: end;
}
[dir="rtl"] .kpi-grid {
  direction: rtl;
}

/* ══════════════════════════════════════════════════════════════
   FORMULAR-ELEMENTE
══════════════════════════════════════════════════════════════ */
[dir="rtl"] .form-label {
  display: block;
  text-align: end;
}
[dir="rtl"] .form-input,
[dir="rtl"] .form-select,
[dir="rtl"] .form-textarea {
  text-align: end;
  direction: rtl;
}
/* Numerische Inputs bleiben LTR */
[dir="rtl"] input[type="number"],
[dir="rtl"] input[type="tel"] {
  text-align: start;
  direction: ltr;
}
[dir="rtl"] .form-group {
  text-align: end;
}
[dir="rtl"] .toggle {
  flex-direction: row-reverse;
}

/* ══════════════════════════════════════════════════════════════
   BUTTONS & BADGES
══════════════════════════════════════════════════════════════ */
[dir="rtl"] .btn-group {
  flex-direction: row-reverse;
}
[dir="rtl"] .badge {
  direction: rtl;
}

/* ══════════════════════════════════════════════════════════════
   TABELLEN
══════════════════════════════════════════════════════════════ */
[dir="rtl"] table {
  direction: rtl;
}
[dir="rtl"] th,
[dir="rtl"] td {
  text-align: end;
}
[dir="rtl"] th:first-child,
[dir="rtl"] td:first-child {
  border-inline-start: none;
  border-inline-end: 1px solid var(--color-border);
}

/* ══════════════════════════════════════════════════════════════
   PFEILE & RICHTUNGS-ICONS
   Umkehrung für Navigations- und Richtungspfeile
══════════════════════════════════════════════════════════════ */
[dir="rtl"] .dash-kc-arrow,
[dir="rtl"] .dash-card-link,
[dir="rtl"] .dash-qa-arrow {
  transform: scaleX(-1);
}
/* Ausnahmen: Icons die keine Richtung anzeigen (z.B. ⚙ ↕ ↺) */
[dir="rtl"] .nav-icon,
[dir="rtl"] .dash-kc-icon,
[dir="rtl"] .dash-be-icon {
  transform: none;
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD
══════════════════════════════════════════════════════════════ */
[dir="rtl"] .dash-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .dash-header-right {
  flex-direction: row-reverse;
}
[dir="rtl"] .dash-snapshot {
  grid-template-columns: auto auto 1fr;
}
[dir="rtl"] .dash-snapshot-meta {
  flex-direction: row-reverse;
}
[dir="rtl"] .dash-kc-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .dash-kc-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .dash-alert {
  flex-direction: row-reverse;
}
[dir="rtl"] .dash-alert-body {
  text-align: end;
}
[dir="rtl"] .dash-top-row {
  grid-template-columns: auto 1fr auto;
  direction: rtl;
}
[dir="rtl"] .dash-top-right {
  text-align: start;
}
[dir="rtl"] .dash-alloc-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .dash-qa-btn {
  flex-direction: row-reverse;
  text-align: end;
}

/* ══════════════════════════════════════════════════════════════
   INVESTMENTS
══════════════════════════════════════════════════════════════ */
[dir="rtl"] .inv-kpi-row {
  direction: rtl;
}
[dir="rtl"] .inv-kpi-label,
[dir="rtl"] .inv-kpi-val {
  text-align: end;
}
[dir="rtl"] .inv-sz-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .inv-sz-row {
  flex-direction: row-reverse;
}
[dir="rtl"] .inv-afa-vgl-label {
  text-align: end;
}
[dir="rtl"] .inv-afa-vgl-j1,
[dir="rtl"] .inv-afa-vgl-ers {
  flex-direction: row-reverse;
}
[dir="rtl"] .inv-gst-row {
  direction: rtl;
}
[dir="rtl"] .inv-podium {
  flex-direction: row-reverse;
}
[dir="rtl"] .inv-score-header {
  flex-direction: row-reverse;
}

/* ══════════════════════════════════════════════════════════════
   TOAST-BENACHRICHTIGUNGEN
══════════════════════════════════════════════════════════════ */
[dir="rtl"] .toast-container {
  left: var(--space-4);
  right: auto;
}
[dir="rtl"] .toast {
  flex-direction: row-reverse;
  text-align: end;
}

/* ══════════════════════════════════════════════════════════════
   MODALS & OVERLAYS
══════════════════════════════════════════════════════════════ */
[dir="rtl"] .modal-header {
  flex-direction: row-reverse;
}
[dir="rtl"] .settings-overlay-inner {
  direction: rtl;
}
[dir="rtl"] .settings-tabs {
  flex-direction: row-reverse;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE HAMBURGER-MENÜ
══════════════════════════════════════════════════════════════ */
[dir="rtl"] #mobile-menu-btn {
  margin-inline-start: 0;
  margin-inline-end: auto;
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR (Webkit) — RTL Seite
══════════════════════════════════════════════════════════════ */
[dir="rtl"] ::-webkit-scrollbar {
  /* Scrollbar bleibt rechts (default) auch in RTL */
}