/**
 * OfficeFlow AI - Right-To-Left (RTL) & Bilingual Design System
 * Uses CSS Logical Properties with targeted overrides for Argon / Bootstrap 4
 */

/* ==========================================================================
   1. Typography & Global RTL Properties
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

html[dir="rtl"],
html.of-rtl,
html.of-rtl body {
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, -apple-system, BlinkMacSystemFont, sans-serif !important;
  direction: rtl;
  text-align: right;
}

/* Ensure headings inherit IBM Plex Sans Arabic cleanly */
html.of-rtl h1,
html.of-rtl h2,
html.of-rtl h3,
html.of-rtl h4,
html.of-rtl h5,
html.of-rtl h6,
html.of-rtl .h1,
html.of-rtl .h2,
html.of-rtl .h3,
html.of-rtl .h4,
html.of-rtl .h5,
html.of-rtl .h6,
html.of-rtl p,
html.of-rtl span,
html.of-rtl label,
html.of-rtl input,
html.of-rtl select,
html.of-rtl textarea,
html.of-rtl table,
html.of-rtl th,
html.of-rtl td,
html.of-rtl .btn,
html.of-rtl .navbar-brand,
html.of-rtl .card-title,
html.of-rtl .modal-title {
  font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif !important;
}

/* ==========================================================================
   2. Financial & Data LTR Isolation
   ========================================================================== */
.ltr-content,
[dir="ltr"],
.of-ltr,
.invoice-code,
.mono-val,
.rar-num,
.fin-kpi__amt,
.fin-kpi__value--money,
.badge-currency,
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"] {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: left;
}

html.of-rtl .ltr-inline {
  display: inline-block;
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

/* Numbers in tables or monetary cards retain clean visual spacing */
html.of-rtl .table td.number-cell,
html.of-rtl .table th.number-cell {
  direction: ltr;
  text-align: right;
}

/* ==========================================================================
   3. Sidenav (Sidebar) RTL Mirroring & Full Text Display
   ========================================================================== */
html.of-rtl #sidenav-main,
html[dir="rtl"] #sidenav-main {
  width: 270px !important;
  max-width: 270px !important;
  direction: rtl !important;
  text-align: right !important;
}

/* Phones/tablets: Argon hides with translateX(-250px), but RTL width is 270px → green strip.
   Fully off-canvas when closed; restore when pinned. Keep LEFT-anchored (match Argon). */
@media (max-width: 1199.98px) {
  html.of-rtl #sidenav-main,
  html[dir="rtl"] #sidenav-main,
  html.of-rtl .navbar-vertical.navbar-expand-xs.fixed-left,
  html[dir="rtl"] .navbar-vertical.navbar-expand-xs.fixed-left {
    left: 0 !important;
    right: auto !important;
    width: 270px !important;
    max-width: min(270px, 86vw) !important;
    transform: translateX(-105%) !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }

  html.of-rtl body.g-sidenav-pinned #sidenav-main,
  html[dir="rtl"] body.g-sidenav-pinned #sidenav-main,
  html.of-rtl body.g-sidenav-pinned .navbar-vertical.navbar-expand-xs.fixed-left,
  html[dir="rtl"] body.g-sidenav-pinned .navbar-vertical.navbar-expand-xs.fixed-left {
    transform: translateX(0) !important;
    pointer-events: auto !important;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.18) !important;
  }

  html.of-rtl .main-content,
  html[dir="rtl"] .main-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
}

/* Desktop only: mirror sidebar to the right (xl+ matches Argon persistent sidenav) */
@media (min-width: 1200px) {
  html.of-rtl .navbar-vertical.navbar-expand-xs.fixed-left,
  html[dir="rtl"] .navbar-vertical.navbar-expand-xs.fixed-left,
  html.of-rtl #sidenav-main,
  html[dir="rtl"] #sidenav-main {
    width: 270px !important;
    max-width: 270px !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    border-left: 1px solid var(--fin-border, #cfe8e2) !important;
    border-right: none !important;
    pointer-events: auto !important;
  }

  html.of-rtl .navbar-vertical.navbar-expand-xs.fixed-left + .main-content,
  html[dir="rtl"] .navbar-vertical.navbar-expand-xs.fixed-left + .main-content {
    margin-right: 270px !important;
    margin-left: 0 !important;
  }

  html.of-rtl.sidenav-collapsed .navbar-vertical.navbar-expand-xs.fixed-left,
  html[dir="rtl"].sidenav-collapsed .navbar-vertical.navbar-expand-xs.fixed-left,
  html.of-rtl.sidenav-collapsed #sidenav-main,
  html[dir="rtl"].sidenav-collapsed #sidenav-main {
    width: 80px !important;
    max-width: 80px !important;
  }

  html.of-rtl.sidenav-collapsed .navbar-vertical.navbar-expand-xs.fixed-left + .main-content,
  html[dir="rtl"].sidenav-collapsed .navbar-vertical.navbar-expand-xs.fixed-left + .main-content {
    margin-right: 80px !important;
    margin-left: 0 !important;
  }
}

html.of-rtl #sidenav-main .sidenav-scroll,
html[dir="rtl"] #sidenav-main .sidenav-scroll,
html.of-rtl #sidenav-main .sidenav-menu,
html[dir="rtl"] #sidenav-main .sidenav-menu {
  direction: rtl !important;
  text-align: right !important;
}

html.of-rtl #sidenav-main .sidenav-menu {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0.35rem 0.5rem 3.5rem !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(159, 212, 200, 0.45) transparent !important;
}

html.of-rtl #sidenav-main .sidenav-menu::-webkit-scrollbar {
  width: 5px !important;
}

html.of-rtl #sidenav-main .sidenav-menu::-webkit-scrollbar-thumb {
  background: rgba(159, 212, 200, 0.45) !important;
  border-radius: 999px !important;
}

html.of-rtl #sidenav-main .sidenav-menu .navbar-nav {
  padding-bottom: 2.5rem !important;
}

html.of-rtl #sidenav-main .nav-link,
html[dir="rtl"] #sidenav-main .nav-link {
  text-align: right !important;
  direction: rtl !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.65rem !important;
  padding: 0.48rem 0.75rem !important;
  margin: 1px 6px !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

html.of-rtl #sidenav-main .nav-link i,
html[dir="rtl"] #sidenav-main .nav-link i {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

html.of-rtl #sidenav-main .nav-link .nav-link-text,
html[dir="rtl"] #sidenav-main .nav-link .nav-link-text {
  text-align: right !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 0.88rem !important;
  opacity: 1 !important;
  max-width: none !important;
}

html.of-rtl.sidenav-collapsed #sidenav-main .nav-link .nav-link-text,
html[dir="rtl"].sidenav-collapsed #sidenav-main .nav-link .nav-link-text {
  opacity: 0 !important;
  max-width: 0 !important;
  display: none !important;
}

html.of-rtl #sidenav-main .sidenav-header .navbar-brand,
html[dir="rtl"] #sidenav-main .sidenav-header .navbar-brand {
  justify-content: flex-start !important;
  direction: rtl !important;
}

html.of-rtl .of-brand,
html[dir="rtl"] .of-brand {
  justify-content: flex-start !important;
  direction: rtl !important;
}

/* ==========================================================================
   4. Top Navbar & Dropdown Mirroring
   ========================================================================== */
html.of-rtl .of-topnav .navbar-nav {
  padding-right: 0;
}

html.of-rtl .dropdown-menu {
  text-align: right;
  left: 0 !important;
  right: auto !important;
}

html.of-rtl .dropdown-menu-right {
  left: 0 !important;
  right: auto !important;
}

html.of-rtl .dropdown-item {
  text-align: right;
  display: flex;
  align-items: center;
}

html.of-rtl .dropdown-item i {
  margin-left: 0.75rem !important;
  margin-right: 0 !important;
}

html.of-rtl .of-profile-name {
  margin-right: 0.5rem;
  margin-left: 0;
}

/* Flip directional icons in navigation / breadcrumbs */
html.of-rtl .ni-bold-right:before {
  content: "\ea0a"; /* ni-bold-left */
}
html.of-rtl .fa-chevron-right:before {
  content: "\f053"; /* fa-chevron-left */
}
html.of-rtl .fa-arrow-right:before {
  content: "\f060"; /* fa-arrow-left */
}

/* ==========================================================================
   5. Tables, Cards, and Forms RTL
   ========================================================================== */
html.of-rtl .table th,
html.of-rtl .table td {
  text-align: right;
}

html.of-rtl .card-header .btn-group,
html.of-rtl .card-header .of-card-tools {
  margin-right: auto;
  margin-left: 0;
}

html.of-rtl .input-group-prepend .input-group-text {
  border-radius: 0 0.375rem 0.375rem 0;
  border-left: 0;
}

html.of-rtl .input-group > .form-control:not(:first-child) {
  border-radius: 0.375rem 0 0 0.375rem;
}

html.of-rtl .custom-control {
  padding-right: 1.75rem;
  padding-left: 0;
  margin-right: 0;
}

html.of-rtl .custom-control-label::before,
html.of-rtl .custom-control-label::after {
  right: -1.75rem;
  left: auto;
}

html.of-rtl .badge {
  letter-spacing: 0;
}

html.of-rtl .modal-header .close {
  margin: -1rem auto -1rem -1rem;
}

/* Alert Notification Popup */
html.of-rtl #of-export-alert {
  right: auto;
  left: 1.15rem;
}

/* ==========================================================================
   6. Segmented Accessible Language Switcher Component
   ========================================================================== */
.of-lang-switcher {
  display: inline-flex;
  align-items: center;
  background: rgba(6, 49, 42, 0.08);
  border: 1px solid rgba(6, 49, 42, 0.12);
  border-radius: 24px;
  padding: 3px;
  margin-inline-end: 0.75rem;
  transition: all 0.2s ease;
  user-select: none;
}

.of-lang-switcher:hover {
  background: rgba(6, 49, 42, 0.12);
  border-color: rgba(6, 49, 42, 0.2);
}

.of-lang-btn {
  background: transparent;
  border: none;
  color: #102634;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  line-height: 1.2;
}

.of-lang-btn:focus-visible {
  box-shadow: 0 0 0 2px #1d655e;
}

.of-lang-btn.active {
  background: #1d655e;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(29, 101, 94, 0.35);
}

.of-lang-btn .flag-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

/* ==========================================================================
   7. Dashboard Specific RTL Styling & Spacing
   ========================================================================== */
html.of-rtl .rar-head {
  text-align: right;
}

html.of-rtl .rar-head .rar-hbtn {
  margin-right: auto;
  margin-left: 0;
}

html.of-rtl .rar-head .rar-hbtn i {
  margin-left: 0.35rem;
  margin-right: 0 !important;
}

html.of-rtl .rar-filterbar {
  flex-direction: row;
  justify-content: flex-start;
  gap: 0.75rem;
}

html.of-rtl .rar-filterbar .fgroup {
  flex-direction: row;
}

html.of-rtl .rar-filterbar .fgroup i {
  margin-left: 0.25rem;
  margin-right: 0;
}

html.of-rtl .rar-card .card-header {
  text-align: right;
}

html.of-rtl .rar-card .card-header.d-flex {
  flex-direction: row;
}

html.of-rtl .rar-toggle {
  margin-right: auto;
  margin-left: 0;
}

html.of-rtl .rar-insight {
  text-align: right;
  flex-direction: row;
}

html.of-rtl .rar-insight .dot {
  margin-left: 0.75rem;
  margin-right: 0;
}

html.of-rtl .fin-kpi {
  text-align: right;
}

html.of-rtl .fin-kpi__head {
  flex-direction: row-reverse;
  justify-content: space-between;
}

html.of-rtl .fin-kpi__value--money {
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 0.4rem;
}

html.of-rtl .fin-kpi__ccy {
  order: 2;
}

html.of-rtl .fin-kpi__amt {
  order: 1;
}

html.of-rtl .fin-kpi__meta,
html.of-rtl .fin-kpi__desc {
  text-align: right;
}

/* ==========================================================================
   ApexCharts RTL & SVG Coordinate Isolation
   ========================================================================== */
.apexcharts-canvas,
.apexcharts-canvas svg,
.apexcharts-svg {
  direction: ltr !important;
  max-width: 100% !important;
}

html.of-rtl .apexcharts-canvas text,
html.of-rtl .apexcharts-yaxis-label,
html.of-rtl .apexcharts-xaxis-label,
html.of-rtl .apexcharts-data-labels text {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

/* Keep axis numbers LTR; do NOT force text-anchor (it clips labels on phones) */
html.of-rtl .apexcharts-yaxis-texts-g text,
html.of-rtl .apexcharts-yaxis-label {
  direction: ltr !important;
  unicode-bidi: isolate !important;
}

html.of-rtl .apexcharts-legend {
  direction: rtl !important;
  text-align: right;
}

html.of-rtl .apexcharts-legend-marker {
  margin-left: 6px !important;
  margin-right: 0 !important;
}

html.of-rtl .apexcharts-tooltip {
  direction: rtl !important;
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

/* Charts must stay inside cards on mobile RTL (no horizontal bleed) */
html.of-rtl .card-body,
html[dir="rtl"] .card-body {
  overflow-x: hidden;
  max-width: 100%;
}

html.of-rtl .card-body .apexcharts-canvas,
html[dir="rtl"] .card-body .apexcharts-canvas,
html.of-rtl .card-body > div[id],
html[dir="rtl"] .card-body > div[id] {
  max-width: 100% !important;
}

@media (max-width: 767.98px) {
  html.of-rtl .apexcharts-legend,
  html[dir="rtl"] .apexcharts-legend {
    padding: 0 4px !important;
  }
  html.of-rtl .card-body,
  html[dir="rtl"] .card-body {
    overflow-x: hidden !important;
  }
}

/* ==========================================================================
   10. Profile View RTL Styles
   ========================================================================== */
html.of-rtl .rar-head {
  text-align: right;
}

html.of-rtl .rar-title {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

html.of-rtl .rar-card .card-header {
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

html.of-rtl .rar-id {
  text-align: right;
}

html.of-rtl .rar-field label {
  text-align: right;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

html.of-rtl .rar-field .hint {
  text-align: right;
}

html.of-rtl .rar-field select.form-control {
  background-position: left 0.75rem center;
  padding-left: 2rem;
  padding-right: 0.85rem;
}

/* ==========================================================================
   11. Companies View RTL Styles
   ========================================================================== */
html.of-rtl .co-head {
  text-align: right;
}

html.of-rtl .co-title,
html.of-rtl .co-dir-title {
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

html.of-rtl .co-search i {
  right: 0.85rem;
  left: auto;
}

html.of-rtl .co-search input {
  padding-right: 2.3rem;
  padding-left: 0.85rem;
  text-align: right;
}

html.of-rtl .co-table thead th,
html.of-rtl .co-table tbody td {
  text-align: right;
}

html.of-rtl .co-table thead th:last-child,
html.of-rtl .co-table tbody td:last-child {
  padding-left: 1.5rem;
  padding-right: 1.25rem;
}

html.of-rtl .co-actions {
  justify-content: flex-start;
}

html.of-rtl .co-empty {
  text-align: center;
}

/* ==========================================================================
   12. Users View RTL Styles
   ========================================================================== */
html.of-rtl .rar-toolbar .rar-search i {
  right: 0.85rem;
  left: auto;
}

html.of-rtl .rar-toolbar .rar-search input {
  padding-right: 2.4rem;
  padding-left: 0.75rem;
  text-align: right;
}

html.of-rtl .rar-toolbar select {
  text-align: right;
  background-position: left 0.75rem center;
  padding-left: 1.8rem;
  padding-right: 0.75rem;
}

html.of-rtl .rar-table thead th,
html.of-rtl .rar-table tbody td {
  text-align: right;
}

html.of-rtl .rar-table thead th.text-right,
html.of-rtl .rar-table tbody td.text-right {
  text-align: left !important;
}

html.of-rtl .rar-chip-popover {
  right: 0;
  left: auto;
}

html.of-rtl .rar-empty {
  text-align: center;
}

html.of-rtl .rar-filterbar {
  direction: rtl;
}

html.of-rtl .rar-filterbar .fgroup {
  direction: rtl;
}

html.of-rtl .rar-filterbar .fgroup input[type=text] {
  text-align: right;
}

html.of-rtl .rar-filterbar select {
  text-align: right;
}

html.of-rtl .rar-stat {
  text-align: right;
}

/* ==========================================================================
   13. Employee Advances View RTL Styles
   ========================================================================== */
html.of-rtl .adv-search i {
  right: 0.85rem;
  left: auto;
}

html.of-rtl .adv-search input {
  padding-right: 2.3rem;
  padding-left: 0.85rem;
  text-align: right;
}

html.of-rtl .adv-toolbar-filters select {
  text-align: right;
  background-position: left 0.85rem center;
  padding-left: 2rem;
  padding-right: 1rem;
}

html.of-rtl .adv-table thead th,
html.of-rtl .adv-table tbody td {
  text-align: right;
}

html.of-rtl .adv-table thead th:first-child,
html.of-rtl .adv-table tbody td:first-child {
  padding-right: 1.25rem;
  padding-left: 1rem;
}

html.of-rtl .adv-table thead th:last-child,
html.of-rtl .adv-table tbody td:last-child {
  padding-left: 1.25rem;
  padding-right: 1rem;
}

html.of-rtl .adv-th-act,
html.of-rtl .adv-td-act {
  text-align: left !important;
}

html.of-rtl .adv-th-bal,
html.of-rtl .adv-td-bal {
  text-align: right;
}

html.of-rtl .adv-car-count {
  right: auto;
  left: 0.375rem;
}

html.of-rtl .adv-empty {
  text-align: center;
}

/* ==========================================================================
   14. Create Request View RTL Styles
   ========================================================================== */
html.of-rtl .crn-section-header {
  text-align: right;
  border-top-left-radius: 0;
  border-top-right-radius: 0.5rem;
}

html.of-rtl .crn-form-label {
  text-align: right;
  display: block;
}

html.of-rtl .crn-select-btn {
  flex-direction: row-reverse;
  text-align: right;
}

html.of-rtl .crn-select-btn i {
  margin-left: 0;
  margin-right: 0.5rem;
}

html.of-rtl .crn-select-option {
  text-align: right;
}

html.of-rtl .crn-file-list {
  text-align: right;
}

html.of-rtl .crn-file-item i.fa-file-alt {
  margin-right: 0;
  margin-left: 0.5rem;
}

html.of-rtl .crn-info-box {
  direction: rtl;
  text-align: right;
}

html.of-rtl .crn-form-actions {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

/* ==========================================================================
   15. Invoice Details & Edit Request RTL Styles
   ========================================================================== */
html.of-rtl .rar-info-grid {
  text-align: right;
}

html.of-rtl .rar-line-head {
  text-align: right;
}

html.of-rtl .rar-line-table th,
html.of-rtl .rar-line-table td {
  text-align: right;
}

html.of-rtl .rar-line-table th.text-right,
html.of-rtl .rar-line-table td.text-right {
  text-align: left !important;
}

html.of-rtl .rar-totals {
  margin-right: auto !important;
  margin-left: 0 !important;
}

html.of-rtl .rar-totals .lbl {
  text-align: right;
}

html.of-rtl .rar-totals .val {
  text-align: left;
}

html.of-rtl .split-view-card {
  text-align: right;
}

html.of-rtl .split-row-header {
  flex-direction: row-reverse;
}

html.of-rtl .er-back i.fa-arrow-left,
html.of-rtl .rar-back i.fa-arrow-left {
  transform: scaleX(-1);
}

html.of-rtl .li-editor {
  text-align: right;
}

/* ==========================================================================
   16. Submitted Requests View RTL Styles
   ========================================================================== */
html.of-rtl .rar-tabs {
  direction: rtl;
}

html.of-rtl .rar-tab {
  text-align: right;
}

html.of-rtl .rar-head {
  text-align: right;
}

html.of-rtl .rar-pay {
  direction: rtl;
}

html.of-rtl .fin-kpi {
  text-align: right;
}

html.of-rtl .fin-kpi__head {
  flex-direction: row-reverse;
}

html.of-rtl .fin-kpi__value--money {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

html.of-rtl #rarDrawer {
  right: auto;
  left: 0;
  box-shadow: 0.5rem 0 2rem rgba(0,0,0,0.15);
  transform: translateX(-100%);
}

html.of-rtl #rarDrawer.open {
  transform: translateX(0);
}

html.of-rtl .rar-drawer-head {
  flex-direction: row-reverse;
  text-align: right;
}

html.of-rtl .rar-drawer-row {
  flex-direction: row-reverse;
}

html.of-rtl .rar-drawer-row .v {
  text-align: left;
}

html.of-rtl .rar-drawer-section {
  text-align: right;
}

/* ==========================================================================
   17. Expense Categories View RTL Styles
   ========================================================================== */
html.of-rtl .ecat-head {
  text-align: right;
}

html.of-rtl .ecat-header-actions {
  justify-content: flex-start;
}

html.of-rtl .ecat-type-menu {
  right: auto;
  left: 0;
  text-align: right;
}

html.of-rtl .ecat-stats {
  direction: rtl;
}

html.of-rtl .ecat-stat {
  text-align: right;
}

html.of-rtl .ecat-card > .card-header {
  text-align: right;
}

html.of-rtl .ecat-list-item {
  border-left: none;
  border-right: 3px solid transparent;
  text-align: right;
}

html.of-rtl .ecat-list-item.active {
  border-right-color: var(--ecat-select);
}

html.of-rtl .ecat-list-item-left {
  margin-right: 0;
  margin-left: 0.5rem;
}

html.of-rtl .ecat-dot {
  margin-right: 0;
  margin-left: 0.65rem;
}

html.of-rtl .ecat-name-bar-left {
  margin-right: 0;
  margin-left: 0.75rem;
}

html.of-rtl .ecat-select-btn {
  flex-direction: row-reverse;
  text-align: right;
}

html.of-rtl .ecat-select-btn i {
  margin-left: 0;
  margin-right: 0.5rem;
}

html.of-rtl .ecat-select-option {
  text-align: right;
}

html.of-rtl .ecat-status-box {
  direction: rtl;
  text-align: right;
}

html.of-rtl .ecat-used-box {
  text-align: right;
}

html.of-rtl .ecat-form-actions {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

/* ==========================================================================
   18. Approval Workflows View RTL Styles
   ========================================================================== */
html.of-rtl .awf-head {
  text-align: right;
}

html.of-rtl .awf-header-actions {
  justify-content: flex-start;
}

html.of-rtl .awf-stats {
  direction: rtl;
}

html.of-rtl .awf-stat {
  text-align: right;
}

html.of-rtl .awf-card > .card-header {
  text-align: right;
}

html.of-rtl .awf-search-box {
  direction: rtl;
}

html.of-rtl .awf-wf-card {
  border-left: none;
  border-right: 3px solid transparent;
  text-align: right;
}

html.of-rtl .awf-wf-card.active {
  border-right-color: var(--awf-gold);
}

html.of-rtl .awf-wf-meta {
  justify-content: flex-start;
}

html.of-rtl .awf-form-title {
  text-align: right;
  flex-direction: row-reverse;
}

html.of-rtl .awf-section-header {
  flex-direction: row-reverse;
  text-align: right;
}

html.of-rtl .awf-select-btn {
  flex-direction: row-reverse;
  text-align: right;
}

html.of-rtl .awf-select-btn i {
  margin-left: 0;
  margin-right: 0.5rem;
}

html.of-rtl .awf-select-option {
  text-align: right;
}

html.of-rtl .awf-search-select {
  direction: rtl;
}

html.of-rtl .awf-hstep-header {
  flex-direction: row-reverse;
  text-align: right;
}

html.of-rtl .awf-hstep-body {
  text-align: right;
}

html.of-rtl .awf-checkbox {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

html.of-rtl .awf-info-box {
  text-align: right;
}

html.of-rtl .awf-accordion-header {
  flex-direction: row-reverse;
  text-align: right;
}

html.of-rtl .awf-accordion-body {
  text-align: right;
}

html.of-rtl .awf-flow-box {
  text-align: right;
}

html.of-rtl .awf-flow-item {
  flex-direction: row-reverse;
}

html.of-rtl .awf-form-actions {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

/* ==========================================================================
   20. Auth Pages (Login / Register / Password Reset) RTL Enhancements
   ========================================================================== */
html.of-rtl .auth-layout,
html[dir="rtl"] .auth-layout {
  direction: rtl;
}

html.of-rtl .auth-topbar,
html[dir="rtl"] .auth-topbar {
  direction: ltr !important;
  text-align: left !important;
}

html.of-rtl .auth-panel__mobile-brand,
html[dir="rtl"] .auth-panel__mobile-brand {
  text-align: left !important;
  direction: ltr !important;
  justify-self: start;
}

html.of-rtl .auth-topbar .of-lang-switcher,
html[dir="rtl"] .auth-topbar .of-lang-switcher {
  justify-self: end;
  margin: 0 !important;
}

html.of-rtl .auth-aside,
html[dir="rtl"] .auth-aside {
  direction: rtl;
  text-align: right;
}

html.of-rtl .auth-aside__copy,
html[dir="rtl"] .auth-aside__copy {
  text-align: right;
}

html.of-rtl .auth-aside__headline,
html[dir="rtl"] .auth-aside__headline,
html.of-rtl .auth-aside__text,
html[dir="rtl"] .auth-aside__text {
  text-align: right;
  direction: rtl;
}

html.of-rtl .auth-card,
html[dir="rtl"] .auth-card {
  text-align: right;
  direction: rtl;
}

html.of-rtl .auth-card__header,
html[dir="rtl"] .auth-card__header {
  text-align: right;
}

html.of-rtl .auth-card__eyebrow,
html[dir="rtl"] .auth-card__eyebrow,
html.of-rtl .auth-card__title,
html[dir="rtl"] .auth-card__title,
html.of-rtl .auth-card__subtitle,
html[dir="rtl"] .auth-card__subtitle {
  text-align: right;
  direction: rtl;
}

html.of-rtl .auth-options,
html[dir="rtl"] .auth-options {
  direction: rtl;
}

html.of-rtl .auth-card__footer,
html[dir="rtl"] .auth-card__footer {
  direction: rtl;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 0.35rem;
}

/* Password Eye Toggle in RTL: Position on the LEFT side so text never overlaps */
html.of-rtl .password-field,
html[dir="rtl"] .password-field {
  position: relative;
}

html.of-rtl .password-field .form-control,
html[dir="rtl"] .password-field .form-control,
html.of-rtl .password-field input,
html[dir="rtl"] .password-field input {
  padding-left: 2.75rem !important;
  padding-right: 0.85rem !important;
  text-align: right;
  direction: rtl;
}

html.of-rtl .password-field .password-toggle,
html[dir="rtl"] .password-field .password-toggle {
  position: absolute;
  top: 50%;
  left: 0.85rem !important;
  right: auto !important;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  color: #8898aa;
  cursor: pointer;
  z-index: 5;
}

/* Custom Checkbox in RTL */
html.of-rtl .custom-control-label::before,
html.of-rtl .custom-control-label::after,
html[dir="rtl"] .custom-control-label::before,
html[dir="rtl"] .custom-control-label::after {
  right: -1.5rem;
  left: auto;
}

html.of-rtl .custom-control,
html[dir="rtl"] .custom-control {
  padding-right: 1.5rem;
  padding-left: 0;
}

/* ==========================================================================
   21. Profile Page RTL Styles
   ========================================================================== */
html.of-rtl .rar-btn,
html[dir="rtl"] .rar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

html.of-rtl .rar-field .rar-ro,
html[dir="rtl"] .rar-field .rar-ro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  direction: rtl;
}

html.of-rtl .rar-field .rar-ro .lock-icon,
html[dir="rtl"] .rar-field .rar-ro .lock-icon {
  margin-left: 0;
  margin-right: auto;
}