/* ==========================================================================
   Right-to-left layout (Arabic, ARA)
   Loaded by common/head.tpl only when the active language is RTL; every rule
   is additionally scoped to html[dir="rtl"]. Mirrors the shell (sidebar,
   page wrapper, navbar, footer) and the Bootstrap 3 directional helpers.
   Text direction itself comes from the dir attribute on <html>.
   @author Daniel Steinweg <ds@easy-m.de>
   @since 2026-10-13
   ========================================================================== */

/* --- Sidebar: right edge instead of left --------------------------------- */
html[dir="rtl"] .ez-sidebar {
  left: auto;
  right: 0;
}

html[dir="rtl"] .ez-sidebar__toggle {
  left: auto;
  right: 206px;
  transform: translateX(50%) scale(0.9);
}

html[dir="rtl"] .ez-sidebar__toggle:hover {
  transform: translateX(50%) scale(1.08);
}

html[dir="rtl"] .ez-sidebar__toggle:active {
  transform: translateX(50%) scale(0.92);
}

html[dir="rtl"] .ez-sidebar:hover ~ .ez-sidebar__toggle {
  transform: translateX(50%) scale(1);
}

html[dir="rtl"] body.ez-sidebar-collapsed .ez-sidebar__toggle,
html[dir="rtl"].ez-sidebar-collapsed-early .ez-sidebar__toggle {
  right: 0;
  transform: none;
}

/* Chevron icons point the other way */
html[dir="rtl"] .ez-sidebar__toggle .ez-sidebar__icon--collapse {
  transform: scaleX(-1);
}

html[dir="rtl"] .ez-sidebar__item-link {
  border-left: none;
  border-right: 3px solid transparent;
  padding: 11px 15px 11px 12px;
}

html[dir="rtl"] .ez-sidebar--collapsed .ez-sidebar__item-link {
  border-right: none;
  padding: 12px 0;
}

html[dir="rtl"] .ez-sidebar__pid-copy {
  right: auto;
  left: 12px;
}

html[dir="rtl"] .ez-sidebar__sticky-select {
  background-position: left 6px center;
  padding-right: 8px;
  padding-left: 24px;
}

/* Rail mode: tooltip and flyout open to the left */
html[dir="rtl"] .ez-sidebar--collapsed .ez-sidebar__item-link[data-tooltip]:hover::after,
html[dir="rtl"] .ez-sidebar--collapsed .ez-sidebar__pid[data-tooltip]:hover::after,
html[dir="rtl"] .ez-sidebar--collapsed .ez-sidebar__item:hover > .ez-sidebar__submenu {
  left: auto;
  right: 60px;
}

html[dir="rtl"] .ez-sidebar--collapsed .ez-sidebar__item:hover > .ez-sidebar__submenu .ez-sidebar__submenu-item {
  padding-left: 0;
  padding-right: 15px;
}

/* Logo box sits above the sidebar */
html[dir="rtl"] .top-left-part {
  left: auto;
  right: 0;
  float: right;
}

/* --- Page wrapper + footer ------------------------------------------------ */
@media (min-width: 768px) {
  html[dir="rtl"] #page-wrapper {
    padding-left: 0;
    padding-right: 220px;
  }

  html[dir="rtl"] body.ez-sidebar-collapsed #page-wrapper,
  html[dir="rtl"].ez-sidebar-collapsed-early #page-wrapper {
    padding-left: 0;
    padding-right: 60px;
  }

  html[dir="rtl"] body.ez-sidebar-collapsed .footer {
    left: 0;
    right: 60px;
  }

  html[dir="rtl"] .fix-sidebar .navbar-left {
    margin-left: 0;
    margin-right: 220px;
  }
}

/* --- Mobile: off-canvas menu slides in from the right --------------------- */
@media (max-width: 767px) {
  html[dir="rtl"] .ez-sidebar {
    transform: translateX(100%);
  }

  html[dir="rtl"] .ez-sidebar--mobile-open {
    transform: translateX(0);
  }

  html[dir="rtl"] .ez-sidebar__close {
    right: auto;
    left: 6px;
  }

  html[dir="rtl"] #page-wrapper {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  html[dir="rtl"] .footer {
    right: 0 !important;
  }
}

/* --- Bootstrap 3 directional helpers -------------------------------------- */
html[dir="rtl"] .pull-left {
  float: right !important;
}

html[dir="rtl"] .pull-right {
  float: left !important;
}

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

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

html[dir="rtl"] .navbar-left {
  float: right !important;
}

html[dir="rtl"] .navbar-right {
  float: left !important;
}

html[dir="rtl"] .dropdown-menu {
  text-align: right;
}

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

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

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

html[dir="rtl"] .modal-footer {
  text-align: left;
}

html[dir="rtl"] .input-group .form-control:first-child,
html[dir="rtl"] .input-group-addon:first-child,
html[dir="rtl"] .input-group-btn:first-child > .btn {
  border-right: 1px solid;
  border-left: 0;
}

html[dir="rtl"] .checkbox input[type="checkbox"],
html[dir="rtl"] .radio input[type="radio"] {
  margin-left: 0;
  margin-right: -20px;
}

html[dir="rtl"] .checkbox label,
html[dir="rtl"] .radio label {
  padding-left: 0;
  padding-right: 20px;
}

/* Directional icons (arrows/chevrons) mirror; neutral icons stay as they are */
html[dir="rtl"] .material-symbols-outlined.ez-rtl-flip,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-angle-left {
  transform: scaleX(-1);
}

/* Code, IDs, URLs and numbers stay left-to-right inside RTL text */
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] .ez-ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="rtl"] code,
html[dir="rtl"] pre {
  text-align: left;
}