/*
 * Arabic typography + RTL corrections for the Duralux template.
 *
 * The template ships Latin-only fonts (Lato, Rubik, Inter). Without this file
 * Arabic text falls back to a system font and renders inconsistently across
 * machines, with the wrong vertical rhythm against the template's spacing.
 *
 * Loaded only when the interface is in Arabic.
 */

:root {
  --app-font-arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

html[dir="rtl"] body,
html[dir="rtl"] .nxl-navigation,
html[dir="rtl"] .nxl-header,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button,
html[dir="rtl"] .form-control,
html[dir="rtl"] .btn,
html[dir="rtl"] .card,
html[dir="rtl"] .modal,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 {
  font-family: var(--app-font-arabic);
}

/* Arabic glyphs sit lower and need more leading than the Latin defaults. */
html[dir="rtl"] body {
  line-height: 1.75;
  letter-spacing: 0;
}

/* The template hard-codes letter-spacing for uppercase Latin labels;
   applied to Arabic it separates letters that must stay joined. */
html[dir="rtl"] .text-spacing-1,
html[dir="rtl"] .text-uppercase {
  letter-spacing: 0 !important;
  text-transform: none;
}

/* Numbers, currency, phone numbers and reference codes stay left-to-right
   even inside an RTL paragraph. */
html[dir="rtl"] .ltr,
html[dir="rtl"] .reference-code,
html[dir="rtl"] .amount,
html[dir="rtl"] time,
html[dir="rtl"] .badge-code {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Feather chevrons in the sidebar point at the content area, which moves
   to the left in RTL. rtlcss cannot flip a glyph, only a rule. */
html[dir="rtl"] .nxl-navbar .nxl-arrow i,
html[dir="rtl"] .nxl-arrow .feather-chevron-right {
  transform: scaleX(-1);
}

/* Charts and progress bars are drawn by JS with inline LTR geometry;
   keep their internals LTR so labels do not invert. */
html[dir="rtl"] .apexcharts-canvas,
html[dir="rtl"] .jvectormap-container {
  direction: ltr;
}

/* DataTables injects its own float-based toolbar. */
html[dir="rtl"] .dataTables_wrapper .dataTables_filter { float: left; }
html[dir="rtl"] .dataTables_wrapper .dataTables_length { float: right; }
html[dir="rtl"] .dataTables_wrapper .dataTables_paginate { float: left; }