/*
 * ==========================================================
 * CUSTOM-RTL.CSS
 * ==========================================================
 * RTL layout fixes for the NataChat admin area.
 * The built-in css/rtl-admin.css misses several LTR→RTL
 * mirrors of css/admin.css. Load this file via:
 * Settings > ... > Custom CSS  (URL of this file)
 *
 * All rules are scoped under .sb-rtl so they have no effect
 * on left-to-right installations. !important is used so the
 * overrides win regardless of stylesheet load order.
 */

/* ----------------------------------------------------------
   1. Icon buttons. admin.css sets .sb-btn.sb-icon>i {
      margin-right: 10px } which puts the gap on the WRONG
      edge in RTL (icon is on the right, text on the left),
      making the icon stick to the text. Mirror it.
   ---------------------------------------------------------- */
.sb-rtl .sb-btn.sb-icon:not(.sb-icon-only) > i,
.sb-rtl a.sb-btn.sb-icon:not(.sb-icon-only) > i {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

/* Check-mark icon inside buttons. */
.sb-rtl .sb-btn.sb-icon-check:not(.sb-loading):before,
.sb-rtl a.sb-btn.sb-icon-check:not(.sb-loading):before {
  margin-right: 0 !important;
  margin-left: 15px !important;
}

/* "Next" arrow positioned inside the icon. */
.sb-rtl .sb-btn.sb-icon>i .sb-icon-next,
.sb-rtl a.sb-btn.sb-icon>i .sb-icon-next {
  left: auto !important;
  right: 6px !important;
}

/* ----------------------------------------------------------
   2. Main content area. admin.css uses padding-left:30px on
      .sb-tab .sb-content so RTL (Users, Reports, Chatbot,
      Articles ...) has no space on the right side.
   ---------------------------------------------------------- */
.sb-rtl .sb-tab .sb-content {
  padding-left: 15px !important;
  padding-right: 30px !important;
}

/* ----------------------------------------------------------
   3. Titles with an icon on the right (e.g. panel titles).
   ---------------------------------------------------------- */
.sb-rtl .sb-title .sb-icon-close,
.sb-rtl .sb-article .sb-title .sb-icon-close {
  right: auto !important;
  left: 0 !important;
}

/* ----------------------------------------------------------
   4. Tables. admin.css zeroes padding on the first/last cell
      from the left; mirror so the rightmost cell keeps
      alignment.
   ---------------------------------------------------------- */
.sb-rtl .sb-table td:first-child,
.sb-rtl .sb-table th:first-child {
  padding-left: 12px !important;
  padding-right: 15px !important;
}

.sb-rtl .sb-table td:last-child,
.sb-rtl .sb-table th:last-child {
  padding-left: 15px !important;
  padding-right: 12px !important;
}

/* ----------------------------------------------------------
   5. Profile / info cards and misc controls that still use
      LTR margins.
   ---------------------------------------------------------- */
.sb-rtl .sb-info-card .sb-icon-link {
  margin-left: 0 !important;
  margin-right: 5px !important;
}

.sb-rtl .sb-onboarding-box .sb-setting h2 img,
.sb-rtl .sb-onboarding-box .sb-setting h2 i {
  margin-left: 0 !important;
  margin-right: 15px !important;
}

.sb-rtl .sb-playground-info .sb-btn-text+.sb-btn-text {
  margin-left: 0 !important;
  margin-right: 15px !important;
}

.sb-rtl .sb-area-reports .sb-top-bar .sb-select,
.sb-rtl .sb-area-reports > .sb-top-bar .sb-select,
.sb-rtl .sb-area-reports .sb-top-bar .sb-select + div {
  margin-right: 0 !important;
  margin-left: 15px !important;
}

.sb-rtl .sb-report-block-header .sb-btn-icon {
  margin-right: 0 !important;
  margin-left: -5px !important;
}

.sb-rtl .sb-panel-zendesk .sb-btn {
  margin-left: 0 !important;
  margin-right: 15px !important;
}

/* ----------------------------------------------------------
   6. Filters / search in the users area.
   ---------------------------------------------------------- */
.sb-rtl .sb-area-users .sb-filter-btn.sb-active i {
  right: auto !important;
  left: 0 !important;
}

/* ----------------------------------------------------------
   7. Dropdowns anchored to the right.
   ---------------------------------------------------------- */
.sb-rtl .sb-panel-details h3 .sb-select ul {
  left: auto !important;
  right: 0 !important;
}

/* ----------------------------------------------------------
   8. Select checkbox items. admin.css margins the checkbox
      from the right-hand side of the label in LTR.
   ---------------------------------------------------------- */
.sb-rtl .sb-setting .sb-select-checkbox input[type="checkbox"] {
  margin-left: 0 !important;
  margin-right: 5px !important;
}

/* ----------------------------------------------------------
   9. Settings that open the color picker / upload image.
   ---------------------------------------------------------- */
.sb-rtl .sb-setting.sb-type-upload-image .image > i,
.sb-rtl .sb-setting [data-type="upload-image"] .image > i {
  right: auto !important;
  left: 10px !important;
}

/* ----------------------------------------------------------
   10. Individual small controls.
   ---------------------------------------------------------- */
.sb-rtl .sb-select.sb-select-colors>p span {
  margin-left: 0 !important;
  margin-right: 10px !important;
}

.sb-rtl .sb-profile-list > ul > li .sb-icon,
.sb-rtl .sb-profile-list > ul > li > img {
  left: auto !important;
  right: 0 !important;
}

/* ---------------------------------------------------------- */