/*navbar*/
.navbar .navbar-nav {
  margin-left: auto;
  margin-right: unset !important;
  padding-right: 0;
}

.navbar-custom {
  left: 0;
  right: 250px;
}

.page-container {
  margin-left: 0;
  margin-right: 250px;
}

@media (max-width: 990px) {
  .navbar {
    right: 0;
  }
  .page-container {
    margin-right: 0px !important;
  }
  .sidebar .sidebar-brand {
    padding-left: 0;
  }
  .sidebar-off {
    right: -250px;
    transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
  }
  .sidebar-toggled .sidebar-off {
    right: 0;
  }
}
/*sidebar*/
#sidebar-menu li i {
  margin-right: 0;
  margin-left: 10px;
}
#sidebar-menu li.expand a::before {
  left: 1.5rem;
  right: unset;
}
#sidebar-menu li.expand.open a::before {
  left: 1.5rem;
  right: unset;
}
#sidebar-menu li ul li a svg {
  transform: rotate(180deg);
}
#sidebar-menu li a span {
  margin-left: 0;
  margin-right: 10px;
}
#sidebar-menu .badge {
  float: left;
}

@media (min-width: 991px) {
  .sidebar-toggled .navbar-custom {
    left: 0;
    right: 70px;
  }
  .sidebar-toggled .sidebar-menu li a .menu-text {
    padding-left: 0;
    padding-right: 35px;
  }
  .sidebar-toggled .sidebar-menu li ul {
    right: 70px;
  }
  .sidebar-toggled .page-container {
    margin-left: 0;
    margin-right: 70px;
  }
}
.nav-tabs {
  padding-right: 0;
}
.nav-tabs.title .tab-title {
  margin-right: auto;
  margin-left: 0 !important;
}

.page-title .title-button-group {
  float: left;
  margin: 0 !important;
}
.page-title h1 {
  float: right;
}

#comment-form-container .flex-shrink-0, .comment-form-container .flex-shrink-0 {
  margin-left: 0 !important;
}

.comment-avatar {
  padding-left: 0;
  padding-right: 15px;
}

.comment-like-top {
  left: 60px;
  right: auto;
}

.reply-form .flex-shrink-0 {
  margin-left: 0 !important;
}

/*timeline*/
#timeline .post-content:nth-child(odd) {
  float: right;
  clear: right;
  padding-left: 20px;
  padding-right: 0;
}
#timeline .post-content:nth-child(even) {
  float: left;
  clear: left;
  padding-left: 0;
  padding-right: 20px;
}
#timeline .post-content .post-date:before {
  left: 0;
  right: -20px;
}
#timeline .post-content:nth-child(odd) .post-date {
  text-align: left;
}
#timeline .post-content:nth-child(odd) .post-date:before {
  margin-right: 0;
  margin-left: -40px;
  float: left;
}

.timeline-images span.more {
  margin-right: -80px;
}

@media screen and (max-width: 1400px) {
  /* Timeline */
  #timeline:before {
    right: 0px;
    margin-left: 0;
  }
  #timeline .post-content {
    float: right;
    padding: 0 30px 0 0 !important;
  }
  #timeline .post-content:nth-child(odd) .post-date {
    text-align: right !important;
  }
  #timeline .post-content:nth-child(odd) .post-date:before {
    float: right !important;
  }
}
.float-start {
  float: right !important;
}

.float-end {
  float: left !important;
}

.text-end {
  text-align: left !important;
}

.dropdown-menu-end {
  --bs-position: start;
  right: auto !important;
  left: 0 !important;
}

.dropdown-menu-start {
  --bs-position: end;
  right: 0 !important;
  left: auto !important;
}

#message-details-section .dropdown {
  right: auto;
  left: 30px;
}

.border-end {
  border-right: none !important;
  border-left: 1px solid #dee2e6 !important;
}

/*padding and margin*/
.p10 {
  padding: 10px !important;
}

.pl0 {
  padding-right: 0 !important;
  padding-left: auto;
}

.pl10 {
  padding-left: 0 !important;
  padding-right: 10px;
}

.pr15 {
  padding-left: 15px !important;
  padding-right: 0 !important;
}

.mr15 {
  margin-right: 0 !important;
  margin-left: 15px !important;
}

.ml10 {
  margin-left: 0 !important;
  margin-right: 10px;
}

.ml15 {
  margin-left: 0 !important;
  margin-right: 15px !important;
}

.ml298 {
  margin-left: 0 !important;
  margin-right: 298px;
}

.mr-1 {
  margin-left: -1px !important;
}

.ml-1 {
  margin-right: -1px !important;
}

.d-flex .flex-shrink-0 {
  margin-right: 0 !important;
  margin-left: 10px;
}

/*loader*/
.app-loader {
  right: auto;
  left: 20px;
}

#pre-loader .app-loader {
  right: auto;
  left: 53%;
}

.init-chat-icon {
  right: auto;
  left: 20px;
}

.rise-chat-wrapper {
  right: auto;
  left: 80px;
}

.rise-chat-header .chat-back svg {
  transform: rotate(180deg);
}

.rise-chat-footer textarea {
  padding: 10px 35px 10px 10px;
}

.chat-other .chat-msg, .close {
  float: left;
}

.b-l {
  border-left: none;
  border-right: 1px solid #f2f4f6;
}

.b-r {
  border-right: none;
  border-left: 1px solid #f2f4f6;
}

.me-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/*datatable*/
table.dataTable th {
  text-align: right;
}
table.dataTable th:before {
  left: 1em;
  right: auto !important;
}
table.dataTable th:after {
  left: 0.5em;
  right: auto !important;
}

.dataTables_filter input, .datatable-search, .custom-filter-search {
  background: url("../images/search.png") no-repeat 4% 45% #fff;
}

.dataTables_wrapper .dataTables_filter {
  float: left;
  text-align: left;
}
.dataTables_wrapper .dataTables_filter input {
  margin: 0 5px 0 0;
}

.dataTables_filter {
  margin: 0 10px 10px 0;
}

.dataTables_wrapper .dataTables_length {
  float: right;
}

#page-content .datatable-tools .dataTables_paginate .paginate_button svg {
  transform: rotate(180deg);
}

div.DTTT_container {
  float: left;
}

.notepad-title {
  border-left: none !important;
  border-right: 5px solid #1ccacc !important;
}

.bs-popover-end {
  margin-right: 0.5rem !important;
  margin-left: 0 !important;
}

.list-group {
  padding-right: 0;
}

.dtr-data {
  text-align: left;
}

.comment-dropdown, .reply-dropdown {
  right: auto;
  left: 30px;
}

.modal .modal-header .btn-close {
  margin: 0;
}

.settings .settings-anchor .pull-right {
  float: left !important;
}

.help-catagory.list-group .list-group-item:hover, .help-catagory.list-group .list-group-item.active {
  border-left: none !important;
  border-right: 2px solid #4e5e6a !important;
}

.move-icon {
  margin: 3px 0 3px 15px !important;
}

.invoice-styles .active:before {
  margin-left: 0;
  margin-right: 100px;
}

.social-link {
  margin: 0 0 10px 10px;
}

.profile-image-upload {
  margin-left: 0;
  margin-right: -45px;
}

.file-upload input.upload {
  left: 0;
  right: auto;
}

#template-list-box .settings-anchor {
  margin-right: 10px;
}

/* fs modal*/
.app-modal .expand {
  right: auto !important;
  left: 370px !important;
}
.app-modal .compress, .app-modal .expand {
  right: auto;
  left: 20px;
}

/*select2 */
.select2-container .select2-choice .select2-arrow {
  border-left: none !important;
  border-right: none !important;
}

.select2-search input {
  background: url("../js/select2/select2.png") no-repeat -30% -22px, #fff 0 0 !important;
}

.alert .progress {
  margin: 19px -41px -15px -13px;
}

.app-alert.animate {
  left: 15px !important;
  right: unset !important;
}

.settings .settings-anchor:not(.collapsed):not(.hide-collapse)::after {
  float: left !important;
}
.settings .settings-anchor:not(.hide-collapse):after {
  float: left !important;
}

@media (min-width: 992px) {
  .custom-modal-lg .ps__rail-y {
    right: 885px !important;
  }
}
.kanban-col {
  float: right !important;
}

.color-tag {
  margin: 0 0 2px 10px !important;
}

.pl30 {
  padding-left: 0 !important;
  padding-right: 30px;
}

/* ================================================================
   OPT RTL COMPREHENSIVE FIXES — Phase 5
   ================================================================ */

/* ── 1. Arabic Line-Height: IBM Plex Sans Arabic needs more breathing room ── */
body,
.form-control,
.form-select,
select,
input,
textarea,
.select2-selection__rendered,
.select2-results__option,
.dropdown-item,
.nav-link,
.sidebar-menu li a,
table td,
table th,
.modal-title,
.card-header,
.page-title h1,
.page-title h2,
.btn,
label,
.form-label,
p, span, div {
  line-height: 1.8 !important;
}

/* Compact overrides for elements that shouldn't be too tall */
.btn { line-height: 1.5 !important; }
.badge { line-height: 1.4 !important; }
table td, table th { line-height: 1.6 !important; }
.sidebar-menu li a { line-height: 1.6 !important; }

/* ── 2. Select2 RTL: arrow on left, text right-aligned, dropdown direction ── */
.select2-container {
  direction: rtl;
  text-align: right;
}

.select2-container--default .select2-selection--single {
  text-align: right !important;
  direction: rtl !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-right: 8px !important;
  padding-left: 20px !important;
  text-align: right !important;
  direction: rtl !important;
}

/* Move arrow to LEFT side */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  left: 8px !important;
  right: auto !important;
}

/* Dropdown */
.select2-dropdown {
  direction: rtl !important;
  text-align: right !important;
}

.select2-search--dropdown .select2-search__field {
  direction: rtl !important;
  text-align: right !important;
}

.select2-results__option {
  direction: rtl !important;
  text-align: right !important;
  padding-right: 14px !important;
  padding-left: 8px !important;
}

/* Multi-select tags */
.select2-container--default .select2-selection--multiple {
  direction: rtl !important;
  text-align: right !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  float: right !important;
  margin-right: 0 !important;
  margin-left: 5px !important;
}

/* ── 3. Form controls text direction ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
.form-control {
  direction: rtl !important;
  text-align: right !important;
}

/* Keep numeric fields LTR */
input[type="number"],
input[data-type="numeric"],
.ltr-field,
input[name*="vat"],
input[name*="amount"],
input[name*="price"],
input[name*="tax"] {
  direction: ltr !important;
  text-align: left !important;
}

/* ── 4. Input Group: append/prepend swap ── */
.input-group .input-group-prepend {
  order: 2;
}
.input-group .form-control {
  order: 1;
}
.input-group .input-group-append {
  order: 0;
}

.input-group > .input-group-text:first-child,
.input-group > .input-group-prepend > .input-group-text {
  border-radius: 0 8px 8px 0 !important;
  border-right: 1px solid #e0e0e0 !important;
  border-left: none !important;
}

.input-group > .input-group-text:last-child,
.input-group > .input-group-append > .input-group-text {
  border-radius: 8px 0 0 8px !important;
  border-left: 1px solid #e0e0e0 !important;
  border-right: none !important;
}

/* ── 5. Breadcrumb: flip separator direction ── */
.breadcrumb-item + .breadcrumb-item::before {
  content: "\\";
  float: right;
  padding-left: 0.5rem;
  padding-right: 0;
  margin-left: 0.5rem;
  margin-right: 0;
}

/* ── 6. Feather icons: flip directional icons ── */
/* Navigation arrows that indicate direction */
[data-feather="chevron-right"],
[data-feather="arrow-right"],
[data-feather="chevron-left"],
[data-feather="arrow-left"] {
  transform: scaleX(-1) !important;
}

/* Don't flip rotated icons or non-directional ones */
[data-feather="rotate-ccw"],
[data-feather="rotate-cw"],
[data-feather="refresh-cw"],
[data-feather="refresh-ccw"] {
  transform: none !important;
}

/* Sidebar sub-menu expand arrow — already handled in rtl.css above */
#sidebar-menu li ul li a [data-feather="chevron-right"] {
  transform: scaleX(-1) !important;
}

/* ── 7. DataTable: sort arrows & pagination ── */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before {
  right: auto !important;
  left: 1em !important;
}
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  right: auto !important;
  left: 0.5em !important;
}

/* Pagination: flip prev/next buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous svg,
.dataTables_wrapper .dataTables_paginate .paginate_button.next svg,
.pagination .page-item:first-child .page-link svg,
.pagination .page-item:last-child .page-link svg {
  transform: rotate(180deg) !important;
}

/* ── 8. Dropdown menus: right-aligned by default in RTL ── */
.dropdown-menu {
  text-align: right !important;
}

.dropdown-menu .dropdown-item {
  text-align: right !important;
  direction: rtl !important;
}

.dropdown-menu .dropdown-item .feather,
.dropdown-menu .dropdown-item svg {
  margin-left: 8px !important;
  margin-right: 0 !important;
}

/* ── 9. Modals: RTL text and close button ── */
.modal-dialog {
  direction: rtl;
}

.modal-header .btn-close {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ── 10. Summernote editor ── */
.note-toolbar {
  direction: ltr !important; /* toolbar buttons stay LTR */
}
.note-editing-area {
  direction: rtl !important;
  text-align: right !important;
}

/* ── 11. Tabs: RTL padding ── */
.nav-tabs,
.nav-pills {
  padding-right: 0;
  direction: rtl;
}

.nav-tabs .nav-item,
.nav-pills .nav-item {
  float: right;
}

/* ── 12. Tables: cell text alignment ── */
.table td,
.table th {
  text-align: right !important;
}

/* Numeric columns stay LTR */
.table td.numeric,
.table th.numeric,
.table td[data-numeric],
td.text-end,
th.text-end {
  text-align: left !important;
  direction: ltr !important;
}

/* ── 13. Checkbox & radio: margin flip ── */
.form-check {
  padding-right: 1.5em !important;
  padding-left: 0 !important;
}

.form-check-input {
  float: right !important;
  margin-right: -1.5em !important;
  margin-left: 0 !important;
}

/* ── 14. Alert icons & text ── */
.alert .feather,
.alert svg {
  margin-left: 8px !important;
  margin-right: 0 !important;
}

/* ── 15. Invoice / Sales Advanced specific fixes ── */
.invoice-styles,
#invoice-form,
.cash-invoice-form {
  direction: rtl;
  text-align: right;
}

/* Invoice totals: keep amounts LTR */
.invoice-total-row td:last-child,
.totals-section .amount,
.grand-total span {
  direction: ltr !important;
  text-align: left !important;
}

/* ── 16. Awesomplete dropdown ── */
.awesomplete > ul {
  direction: rtl !important;
  text-align: right !important;
}

/* ── 17. Bootstrap toast ── */
.toast {
  direction: rtl !important;
}

/* ── 18. Chart.js labels ── */
canvas {
  direction: rtl;
}

/* ── 19. Search icon position in search inputs ── */
.search-input-wrapper {
  direction: rtl;
}
.search-input-wrapper .search-icon {
  right: auto !important;
  left: 12px !important;
}
.search-input-wrapper input {
  padding-right: 14px !important;
  padding-left: 36px !important;
}

/* ── 20. Page header buttons: float left in RTL ── */
.page-title .btn,
.page-header .btn,
.title-button-group {
  float: left !important;
}

/* ── 21. Custom scrollbar RTL ── */
.ps__rail-y {
  right: auto !important;
  left: 0 !important;
}

/* ── 22. KPI Dashboard widget ── */
.kpi-widget,
.kpi-card {
  direction: rtl;
  text-align: right;
}

/* ── 23. Accounting plugin forms ── */
.acc-form,
#accounting-form,
.journal-entry-form {
  direction: rtl;
  text-align: right;
}

/* ── 24. Fix inline text icons spacing ── */
.inline-icon-text svg,
.inline-icon-text .feather {
  margin-left: 4px !important;
  margin-right: 0 !important;
  vertical-align: middle;
}

/* ── 25. Mobile: sidebar RTL ── */
@media (max-width: 990px) {
  .dropdown-menu {
    right: 0 !important;
    left: auto !important;
  }
}

/* ================================================================
   OPT RTL FIX PACK 2 — targeted corrections
   ================================================================ */

/* ── A. Active sidebar sub-menu link: force WHITE text ──
   Structure: #sidebar-menu > li.active > a > i[feather=minus] + span
   The base CSS sets color on `#sidebar-menu li ul li a` (high specificity)
   which overrides our global-style.css rule. Use equal/higher specificity. */
#sidebar-menu li.active > a,
#sidebar-menu li.active > a span,
#sidebar-menu li.active > a i,
#sidebar-menu li ul li.active > a,
#sidebar-menu li ul li.active > a span,
#sidebar-menu li ul li.active > a i {
  color: #fff !important;
}
#sidebar-menu li.active > a svg,
#sidebar-menu li ul li.active > a svg {
  stroke: #fff !important;
  color: #fff !important;
}
/* Sub-menu active item: swap border side (RTL) + make white */
#sidebar-menu li ul li.active > a {
  border-right: none !important;
  border-left: 3px solid #fff !important;
}

/* ── B. Select2 closed state: fix text clipping at top/bottom ──
   IBM Plex Sans Arabic glyphs extend beyond standard em-box.
   Setting overflow visible and using flex centering prevents clipping. */
.select2-container--default .select2-selection--single {
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal !important;   /* reset forced 1.8 for this specific element */
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  overflow: visible !important;
  white-space: nowrap;
  max-width: calc(100% - 24px) !important; /* leave room for arrow */
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  line-height: normal !important;
}
/* Native select + date inputs: ensure enough height for Arabic glyphs */
select.form-control,
select,
input[type="date"],
input[type="datetime-local"] {
  height: 42px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  line-height: normal !important;
  overflow: visible !important;
}

/* ── C. DataTable sort arrows: LEFT side in RTL ──
   DataTables puts sort icon on right via padding-right on th.
   In RTL we swap: padding-left for the icon, content stays right-aligned. */
table.dataTable thead th {
  padding-right: 8px !important;
  padding-left: 20px !important;
  position: relative;
}
/* Sort pseudo-elements: move to left edge */
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::before,
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  right: auto !important;
  left: 6px !important;
}
table.dataTable thead th.sorting::before,
table.dataTable thead th.sorting_asc::before,
table.dataTable thead th.sorting_desc::before {
  bottom: 50% !important;
  top: auto !important;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  top: 50% !important;
  bottom: auto !important;
}

/* ── E. Bootstrap Timepicker: full reset to LTR, fixed width ──
   Root cause: blanket `direction:rtl` on div/body turns inline-block
   into a full-width block (1090px). Fix: explicit display + max-width
   + direction:ltr on the widget and everything inside it. */

/* 1. The dropdown wrapper */
.bootstrap-timepicker-widget.dropdown-menu {
  display: inline-block !important;
  direction: ltr !important;
  text-align: left !important;   /* override blanket .dropdown-menu rule */
  width: auto !important;
  min-width: 0 !important;
  max-width: 220px !important;
}

/* 2. The inner table */
.bootstrap-timepicker-widget table {
  direction: ltr !important;
  width: auto !important;
  display: table !important;
}

/* 3. Table cells */
.bootstrap-timepicker-widget table td {
  text-align: center !important;
  direction: ltr !important;
  line-height: normal !important;
  padding: 2px !important;
  min-width: 30px !important;
  float: none !important;   /* neutralise any float from RTL rules */
}

/* 4. Separator cell (:) */
.bootstrap-timepicker-widget table td.separator {
  text-align: center !important;
  min-width: 8px !important;
  padding: 0 4px !important;
  line-height: normal !important;
}

/* 5. Hour / minute / second inputs inside the cells */
.bootstrap-timepicker-widget table td input[type="text"] {
  direction: ltr !important;
  text-align: center !important;
  width: 28px !important;
  line-height: normal !important;
  float: none !important;
}

/* 6. Up/down arrow buttons */
.bootstrap-timepicker-widget table td a.btn {
  direction: ltr !important;
  line-height: normal !important;
  padding: 6px 0 !important;
  display: block !important;
  width: 100% !important;
  float: none !important;
}
.bootstrap-timepicker-widget table td a span,
.bootstrap-timepicker-widget table td a i {
  line-height: normal !important;
  display: inline-block !important;
}

/* 7. AM/PM meridian */
.bootstrap-timepicker-widget table td span.btn,
.bootstrap-timepicker-widget .bootstrap-timepicker-meridian {
  direction: ltr !important;
  line-height: normal !important;
}

/* ── D. General: remove forced line-height 1.8 from inline form elements ──
   The blanket rule on `input, select, textarea` causes vertical clipping
   in fixed-height containers. Override back to normal for those. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea {
  line-height: normal !important;
}