/*
 * Right-to-left corrections for the Housing Market Ads dashboard.
 *
 * WHY A SEPARATE FILE, AND WHY IT IS SMALL
 * `dir="rtl"` on <html> already does most of the work: text direction, the
 * order of inline content, list markers, table column order, and the resolution
 * of every logical CSS property. What it does NOT do is move anything positioned
 * with a physical property — `float: left`, `margin-right`, `left: 0`,
 * `text-align: right` — and AdminLTE 3 is built almost entirely on those. So
 * this file is the list of physical rules the layout actually depends on,
 * flipped, and nothing else.
 *
 * Every selector is scoped under `[dir="rtl"]`, so the file is inert in the
 * sixteen other languages. It is loaded unconditionally rather than injected
 * for Arabic only: a stylesheet that arrives after the first paint makes the
 * page visibly jump from one layout to the other, and 3 KB is cheaper than
 * that.
 *
 * WHAT IS DELIBERATELY NOT MIRRORED
 * The chart, the map, and the credit-card brand icons. A line chart with time
 * on the x-axis reads left-to-right in Arabic too, Google Maps has its own
 * direction handling, and a Visa logo is a logo.
 */

/* ---------------------------------------------------------------------------
 * The shell: sidebar, content, navbar.
 *
 * AdminLTE positions the sidebar with `left: 0` and pushes the content across
 * with `margin-left`. Both have to swap, or the sidebar sits on top of the
 * content and the content starts under it.
 * ------------------------------------------------------------------------- */
[dir='rtl'] .main-sidebar {
  left: auto;
  right: 0;
}

[dir='rtl'] .content-wrapper,
[dir='rtl'] .main-header,
[dir='rtl'] .main-footer {
  margin-left: 0;
  margin-right: 250px;
}

[dir='rtl'].sidebar-collapse .content-wrapper,
[dir='rtl'].sidebar-collapse .main-header,
[dir='rtl'].sidebar-collapse .main-footer {
  margin-right: 4.6rem;
}

@media (max-width: 991.98px) {
  [dir='rtl'] .content-wrapper,
  [dir='rtl'] .main-header,
  [dir='rtl'] .main-footer {
    margin-right: 0;
  }
  [dir='rtl'] .main-sidebar {
    transform: translateX(250px);
  }
  [dir='rtl'].sidebar-open .main-sidebar {
    transform: translateX(0);
  }
}

/* The sidebar's own bottom bar and the treeview arrows. */
[dir='rtl'] .nav-sidebar .nav-link > .right,
[dir='rtl'] .nav-sidebar .nav-link > p > .right {
  right: auto;
  left: 1rem;
}

[dir='rtl'] .nav-sidebar .nav-treeview {
  padding-left: 0;
  padding-right: 1rem;
}

[dir='rtl'] [class*='sidebar-dark'] .nav-child-indent .nav-treeview {
  margin-left: 0;
  margin-right: 1rem;
}

/* ---------------------------------------------------------------------------
 * Bootstrap 4 float and spacing utilities.
 *
 * These are everywhere in this app — `float-right` on every table action
 * button, `ml-auto` on the navbar's right-hand group, `mr-1` beside every icon.
 * Bootstrap 4 predates logical properties, so each has to be restated.
 * ------------------------------------------------------------------------- */
[dir='rtl'] .float-left { float: right !important; }
[dir='rtl'] .float-right { float: left !important; }

[dir='rtl'] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir='rtl'] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }

[dir='rtl'] .text-left { text-align: right !important; }
[dir='rtl'] .text-right { text-align: left !important; }

[dir='rtl'] .mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
[dir='rtl'] .mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
[dir='rtl'] .mr-3 { margin-right: 0 !important; margin-left: 1rem !important; }
[dir='rtl'] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
[dir='rtl'] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
[dir='rtl'] .ml-3 { margin-left: 0 !important; margin-right: 1rem !important; }

[dir='rtl'] .offset-sm-2 { margin-left: 0; margin-right: 16.666667%; }

/* ---------------------------------------------------------------------------
 * Components with a physical side: dropdowns, input groups, modals, alerts.
 * ------------------------------------------------------------------------- */
[dir='rtl'] .dropdown-menu-right {
  right: auto !important;
  left: 0 !important;
}

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

[dir='rtl'] .input-group > .form-control:not(:last-child) {
  border-radius: 0.25rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

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

[dir='rtl'] .modal-footer.justify-content-between {
  flex-direction: row-reverse;
}

[dir='rtl'] .alert-dismissible {
  padding-right: 1.25rem;
  padding-left: 4rem;
}

[dir='rtl'] .alert-dismissible .close {
  right: auto;
  left: 0;
}

[dir='rtl'] .close {
  float: left;
}

[dir='rtl'] .custom-control,
[dir='rtl'] .icheck-primary {
  padding-left: 0;
  padding-right: 1.5rem;
}

/* ---------------------------------------------------------------------------
 * The dashboard's own v1 layout, from css/hma-v1.css.
 * ------------------------------------------------------------------------- */
[dir='rtl'] .v1-pagehead-actions {
  flex-direction: row-reverse;
}

[dir='rtl'] .v1-tile,
[dir='rtl'] .v1-card-head {
  text-align: right;
}

/* ---------------------------------------------------------------------------
 * Numbers stay left-to-right.
 *
 * Arabic is right-to-left; Arabic NUMBERS are not, and neither are currency
 * amounts, percentages, dates or card digits. The bidi algorithm gets a bare
 * number right on its own and gets "0.00 $" wrong — the dollar sign lands on
 * the wrong end. `direction: ltr` with `unicode-bidi: embed` pins these cells
 * without affecting the text around them.
 * ------------------------------------------------------------------------- */
[dir='rtl'] .v1-tile .v,
[dir='rtl'] #impressions_counter,
[dir='rtl'] #clicks_counter,
[dir='rtl'] #ctr_counter,
[dir='rtl'] #cpc_price,
[dir='rtl'] #cost_sum,
[dir='rtl'] #v1_balance,
[dir='rtl'] #billing_ad_balance,
[dir='rtl'] #billing_credits,
[dir='rtl'] #referral_url,
[dir='rtl'] .v1-range {
  direction: ltr;
  unicode-bidi: embed;
  text-align: right;
}