/*
 * RTL (Right-to-Left) Overrides
 * Loaded only when lang is Arabic (ar) or Hebrew (he)
 * ─────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════
   1. SIDEBAR (.menu-left) — flip from left to right
   ═══════════════════════════════════════════════════ */

[dir="rtl"] .menu-left {
  left: auto;
  right: 0;
  -webkit-transform: translate3d(300px, 0, 0);
  transform: translate3d(300px, 0, 0);
}

@media only screen and (min-width: 768px) {
  [dir="rtl"] .menu-left {
    -webkit-transform: translate3d(220px, 0, 0);
    transform: translate3d(220px, 0, 0);
  }
}

@media only screen and (min-width: 1200px) {
  [dir="rtl"] .menu-left {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* Sidebar visible state */
@media only screen and (min-width: 768px) {
  [dir="rtl"] body.menu-left-visible .menu-left {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 767px) {
  [dir="rtl"] body.menu-left-visible .menu-left {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/* ═══════════════════════════════════════════════════
   2. SIDEBAR LOCK BUTTON — flip toggle button
   ═══════════════════════════════════════════════════ */

[dir="rtl"] .menu-left-lock {
  right: auto;
  left: 0;
}

@media (max-width: 767px) {
  [dir="rtl"] .menu-left-lock {
    right: auto;
    left: -80px;
    -webkit-transition: left 0.2s ease-in-out;
    transition: left 0.2s ease-in-out;
  }

  [dir="rtl"] body.menu-left-visible .menu-left .menu-left-lock {
    left: 0;
    right: auto;
  }
}

/* ═══════════════════════════════════════════════════
   3. MAIN CONTENT — swap margin-left to margin-right
   ═══════════════════════════════════════════════════ */

@media only screen and (min-width: 768px) {
  [dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: 80px;
  }
}

@media only screen and (min-width: 1200px) {
  [dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: 300px;
  }
}

@media only screen and (min-width: 768px) {
  [dir="rtl"] body.menu-left-visible .main-content {
    margin-left: 0;
    margin-right: 300px;
  }
}

@media only screen and (min-width: 1200px) {
  [dir="rtl"] body.menu-left-visible .main-content {
    margin-left: 0;
    margin-right: 300px;
  }
}

/* ═══════════════════════════════════════════════════
   4. TOP BAR — swap padding-left to padding-right
   ═══════════════════════════════════════════════════ */

[dir="rtl"] .top-bar {
  padding-left: 20px;
  padding-right: 80px;
}

@media only screen and (min-width: 1200px) {
  [dir="rtl"] .top-bar {
    padding-left: 20px;
    padding-right: 300px;
  }
}

[dir="rtl"] .top-bar-left {
  padding-left: 0;
  padding-right: 18px;
}

[dir="rtl"] .top-bar-left .top-bar-item {
  margin-right: 0;
  margin-left: 30px;
}

[dir="rtl"] .top-bar-logo {
  margin-right: 0;
  margin-left: 20px;
}

[dir="rtl"] .top-bar-item .dropdown > a i {
  margin-right: 0;
  margin-left: 5px;
}

/* ═══════════════════════════════════════════════════
   5. SIDEBAR MENU ITEMS — flip paddings & indicators
   ═══════════════════════════════════════════════════ */

/* Active indicator bar — flip from left to right */
[dir="rtl"] .menu-left-list-root > .menu-left-item::before {
  left: auto;
  right: 0;
}

/* Menu item link padding — flip left/right */
[dir="rtl"] .menu-left-item > a {
  padding: 12px 20px 12px 40px;
}

/* Submenu arrow — flip direction */
[dir="rtl"] .menu-left-submenu.menu-left-item > a:after {
  border-width: 5px 0 5px 5px;
  border-color: transparent transparent transparent #393749;
  right: auto;
  left: 20px;
}

[dir="rtl"] .menu-left-submenu.menu-left-item > a:hover::after,
[dir="rtl"] .menu-left-submenu.menu-left-item > a:focus::after {
  border-color: transparent transparent transparent #03a9f3;
}

[dir="rtl"] .menu-left-item.menu-left-active > a::after {
  border-color: transparent transparent transparent #03a9f3 !important;
}

[dir="rtl"] .menu-left-submenu.menu-left-open > a::after {
  border-color: transparent transparent transparent #03a9f3;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

/* Submenu items padding */
[dir="rtl"] .menu-left-submenu .menu-left-item > a {
  padding: 5px 35px 5px 35px;
}

/* Menu icon position */
[dir="rtl"] .menu-left-icon {
  right: auto;
  left: 32px;
}

/* menu-left-list padding */
[dir="rtl"] .menu-left-list {
  padding-left: 0;
  padding-right: 0;
}

/* ═══════════════════════════════════════════════════
   6. LEFT-ASIDE / RIGHT-ASIDE — flip for two-column layouts
   ═══════════════════════════════════════════════════ */

[dir="rtl"] .left-aside {
  border-right: none;
  border-left: 1px solid #e9ecef;
  right: 0;
  left: auto;
}

[dir="rtl"] .right-aside {
  margin-left: 0;
  margin-right: 250px;
}

/* ═══════════════════════════════════════════════════
   7. PIN BUTTON (hamburger icon) — flip transform origin
   ═══════════════════════════════════════════════════ */

[dir="rtl"] .menu-left-pin-button span::before {
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

[dir="rtl"] .menu-left-pin-button span:after {
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
}

/* ═══════════════════════════════════════════════════
   8. GENERAL UTILITY — text-align & float overrides
   ═══════════════════════════════════════════════════ */

/* Calendar events */
[dir="rtl"] .fc-event {
  text-align: right;
}

/* Tab buttons */
[dir="rtl"] .tab button {
  float: right;
}

/* Media list items */
[dir="rtl"] .media-list ul li {
  float: right;
}

[dir="rtl"] .list-medias-inner {
  margin-left: 0;
  margin-right: 10px;
}

[dir="rtl"] .list-medias-inner li {
  margin-right: 0;
  margin-left: 10px;
}

[dir="rtl"] .list-medias-inner li .el-card-avatar a.action-remove {
  left: auto;
  right: 0;
}

/* Message/inbox label counter */
[dir="rtl"] .list-style-none li a span {
  float: left;
}

/* Button group alignment */
[dir="rtl"] .btn-group-action {
  text-align: left;
}

/* Media list toggle dropdown */
[dir="rtl"] .media-list-toggle {
  padding: 0.375rem 0.75rem 0.375rem 20px;
  text-align: right;
}

[dir="rtl"] .media-list-toggle::after {
  right: auto;
  left: 5px;
}

/* ═══════════════════════════════════════════════════
   9. CARDS & TABLES — general directional fixes
   ═══════════════════════════════════════════════════ */

/* Bootstrap dropdowns */
[dir="rtl"] .dropdown-menu {
  text-align: right;
}

/* Form labels & inputs */
[dir="rtl"] .form-group label {
  display: block;
  text-align: right;
}

/* Breadcrumb separator */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  padding-right: 0;
  padding-left: 0.5rem;
  float: right;
}

/* DataTables */
[dir="rtl"] .dataTables_wrapper .dataTables_filter {
  text-align: left;
}

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

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

[dir="rtl"] .dataTables_wrapper .dataTables_paginate {
  text-align: left;
}

/* Select2 */
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
  left: 1px;
  right: auto;
}

/* Input group */
[dir="rtl"] .input-group > .form-control:not(:last-child),
[dir="rtl"] .input-group > .custom-select:not(:last-child) {
  border-radius: 0 0.25rem 0.25rem 0;
}

[dir="rtl"] .input-group > .form-control:not(:first-child),
[dir="rtl"] .input-group > .custom-select:not(:first-child) {
  border-radius: 0.25rem 0 0 0.25rem;
}

[dir="rtl"] .input-group-prepend {
  margin-right: 0;
  margin-left: -1px;
}

[dir="rtl"] .input-group-append {
  margin-left: 0;
  margin-right: -1px;
}

/* ═══════════════════════════════════════════════════
   10. LEFT-SIDEBAR (layout-sa / layout-ag alternative sidebar)
   ═══════════════════════════════════════════════════ */

[dir="rtl"] .left-sidebar {
  left: auto;
  right: 0;
}

[dir="rtl"] .page-wrapper {
  margin-left: 0;
  margin-right: 240px;
}

/* ═══════════════════════════════════════════════════
   11. ACCESSIBILITY FAB — already in custom.css, reinforced
   ═══════════════════════════════════════════════════ */

[dir="rtl"] .accessibility-fab {
  left: auto;
  right: 28px;
}

[dir="rtl"] .accessibility-panel {
  left: auto;
  right: 28px;
}

/* ═══════════════════════════════════════════════════
   12. SKIP-TO-CONTENT — already in custom.css, reinforced
   ═══════════════════════════════════════════════════ */

[dir="rtl"] .skip-to-content {
  left: auto;
  right: 16px;
}

/* ═══════════════════════════════════════════════════
   13. CARD HEADER ACTIONS & BADGES
   ═══════════════════════════════════════════════════ */

[dir="rtl"] .card-header .card-actions {
  float: left;
}

[dir="rtl"] .badge {
  margin-left: 0;
  margin-right: 4px;
}

/* ═══════════════════════════════════════════════════
   14. MODAL — align modal header buttons
   ═══════════════════════════════════════════════════ */

[dir="rtl"] .modal-header .close {
  margin: -1rem auto -1rem -1rem;
}

/* ═══════════════════════════════════════════════════
   15. ALERT / TOAST — icon spacing
   ═══════════════════════════════════════════════════ */

[dir="rtl"] .alert i,
[dir="rtl"] .toast i {
  margin-right: 0;
  margin-left: 8px;
}

/* ═══════════════════════════════════════════════════
   16. MOBILE RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════ */

@media (max-width: 480px) {
  [dir="rtl"] .accessibility-fab {
    right: 18px;
    left: auto;
  }

  [dir="rtl"] .accessibility-panel {
    right: 10px;
    left: 10px;
  }
}

@media (max-width: 767px) {
  [dir="rtl"] .main-content {
    margin-right: 0;
    margin-left: 0;
  }

  [dir="rtl"] .top-bar {
    padding-right: 20px;
    padding-left: 20px;
  }
}