/* =========================================================
   RTL – GROWCRM (FINAL, STABLE, HARDENED)
   Single source of truth for RTL
   Uses ONLY: html[dir="rtl"]
========================================================= */


/* =========================================================
   1. GLOBAL RTL BASE
========================================================= */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}


/* =========================================================
   2. SIDEBAR (RIGHT SIDE)
========================================================= */
html[dir="rtl"] .left-sidebar {
    left: auto !important;
    right: 0 !important;
}


/* =========================================================
   3. PAGE WRAPPER (FIX RESERVED SPACE)
========================================================= */
/* In RTL the sidebar lives on the RIGHT */
html[dir="rtl"] .page-wrapper {
    margin-left: 0 !important;
    margin-right: 260px; /* sidebar width */
}

/* Prevent double offsets */
html[dir="rtl"] #main-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   4. SIDEBAR MENU (TEXT, ICONS, ARROWS)
========================================================= */
html[dir="rtl"] .sidebar-nav ul li a {
    text-align: right;
    padding-right: 15px;
    padding-left: 40px; /* space for arrow */
}

html[dir="rtl"] .sidebar-nav ul li a i {
    margin-left: 10px;
    margin-right: 0;
}

/* Nested submenu arrows */
html[dir="rtl"] .sidebar-nav ul li a.has-arrow::after {
    right: auto !important;
    left: 15px !important;
    transform: rotate(180deg);
}


/* =========================================================
   5. TOPBAR – FINAL CORRECT LAYOUT
   LEFT  : Logo + Menu + Search
   RIGHT : Icons + User
========================================================= */

/* Direction reset */
html[dir="rtl"] .topbar {
    direction: rtl;
}

/* Main navbar */
html[dir="rtl"] .topbar .top-navbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

/* Bootstrap container inside navbar */
html[dir="rtl"] .topbar .top-navbar > .container,
html[dir="rtl"] .topbar .top-navbar > .container-fluid {
    display: flex !important;
    align-items: center !important;
    width: 100%;
}


/* ---------------------------------------------------------
   LEFT GROUP (Logo + Hamburger + Search)
---------------------------------------------------------- */
html[dir="rtl"] .topbar .navbar-header {
    display: flex !important;
    align-items: center !important;
    order: 1 !important;
    gap: 12px;
}

html[dir="rtl"] .topbar .nav-toggler,
html[dir="rtl"] .topbar .sidebartoggler {
    margin-left: 10px;
    margin-right: 0;
}

/* Search box – locked to left group */
html[dir="rtl"] .topbar .app-search,
html[dir="rtl"] .topbar .search-box {
    flex: 0 0 auto !important;
    max-width: 260px;
    margin-left: 12px !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .topbar .app-search form,
html[dir="rtl"] .topbar .search-box form {
    display: flex;
    justify-content: flex-start;
}


/* ---------------------------------------------------------
   RIGHT GROUP (Icons + User)
---------------------------------------------------------- */
html[dir="rtl"] .topbar .navbar-collapse {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    order: 2 !important;
    width: 100%;
}

html[dir="rtl"] .topbar .navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

html[dir="rtl"] .topbar .navbar-nav > li {
    margin-right: 10px;
    margin-left: 0;
}

/* User profile */
html[dir="rtl"] .topbar .profile-pic {
    margin-right: 10px;
    margin-left: 0;
}

/* Kill Bootstrap auto margins that cause gaps */
html[dir="rtl"] .ml-auto,
html[dir="rtl"] .mr-auto {
    margin: 0 !important;
}


/* =========================================================
   6. PAGE ACTION TOOLBAR (RED + ICON ROW)
========================================================= */
html[dir="rtl"] .page-actions,
html[dir="rtl"] .page-actions-wrapper {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: flex-start !important;
}

html[dir="rtl"] .page-actions > * {
    margin-right: 8px !important;
    margin-left: 0 !important;
}


/* =========================================================
   7. KANBAN BOARD
========================================================= */
html[dir="rtl"] .kanban-board {
    display: flex;
    flex-direction: row-reverse;
}

html[dir="rtl"] .kanban-board .kanban-column {
    margin-left: 15px;
    margin-right: 0;
}


/* =========================================================
   8. CARDS & TEXT
========================================================= */
html[dir="rtl"] .card,
html[dir="rtl"] .card-body {
    text-align: right;
}


/* =========================================================
   9. FORMS & INPUTS
========================================================= */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}


/* =========================================================
   10. BREADCRUMBS
========================================================= */
html[dir="rtl"] .breadcrumb {
    display: flex;
    flex-direction: row-reverse;
}


/* =========================================================
   11. OVERLAYS & PANELS
========================================================= */
html[dir="rtl"] .page-wrapper-overlay {
    left: auto;
    right: 0;
}
/* =========================================================
   RTL PATCH – MODALS + FORMS (BOOTSTRAP GRID FIX)
   Fixes: label/input alignment, mixed English text, switches,
          select controls, close button position
========================================================= */

/* --- Modal base RTL --- */
html[dir="rtl"] .modal,
html[dir="rtl"] .modal-dialog,
html[dir="rtl"] .modal-content {
    direction: rtl;
    text-align: right;
}

/* Close button should stay TOP-LEFT in RTL modals */
html[dir="rtl"] .modal-header .close,
html[dir="rtl"] .modal-header button.close {
    margin: 0 !important;
    float: left !important;
}

/* --- Bootstrap grid inside modal forms --- */
/* Force rows to behave as RTL without breaking Bootstrap */
html[dir="rtl"] .modal-body .row,
html[dir="rtl"] .modal-body .form-group.row {
    direction: rtl;
}

/* Ensure labels are right-aligned and sit on the correct side */
html[dir="rtl"] .modal-body label,
html[dir="rtl"] .modal-body .col-form-label,
html[dir="rtl"] .modal-body .control-label {
    text-align: right !important;
}

/* Remove LTR offsets that cause “floating gaps” */
html[dir="rtl"] .modal-body .offset-1,
html[dir="rtl"] .modal-body .offset-2,
html[dir="rtl"] .modal-body .offset-3,
html[dir="rtl"] .modal-body .offset-4,
html[dir="rtl"] .modal-body .offset-5,
html[dir="rtl"] .modal-body .offset-6 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Fix common spacing: inputs hugging wrong side */
html[dir="rtl"] .modal-body .form-control,
html[dir="rtl"] .modal-body input,
html[dir="rtl"] .modal-body textarea,
html[dir="rtl"] .modal-body select {
    text-align: right;
}

/* --- Input groups (icons, addons) --- */
html[dir="rtl"] .modal-body .input-group {
    direction: rtl;
}

html[dir="rtl"] .modal-body .input-group-prepend {
    order: 2;
}

html[dir="rtl"] .modal-body .input-group-append {
    order: 0;
}

/* --- Select2 / dropdown style controls (very common in GrowCRM) --- */
html[dir="rtl"] .select2-container {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .select2-selection__rendered {
    text-align: right !important;
    padding-right: 10px !important;
    padding-left: 20px !important;
}

html[dir="rtl"] .select2-selection__arrow {
    left: 10px !important;
    right: auto !important;
}

/* --- Toggle switches / custom controls --- */
html[dir="rtl"] .custom-control,
html[dir="rtl"] .switch,
html[dir="rtl"] .custom-switch {
    direction: rtl;
}

html[dir="rtl"] .custom-control-label::before,
html[dir="rtl"] .custom-control-label::after {
    right: 0 !important;
    left: auto !important;
}

/* --- Mixed English text inside RTL should remain LTR (IMPORTANT) --- */
/* Use this for English headings/labels inside Arabic UI */
html[dir="rtl"] .ltr,
html[dir="rtl"] .text-ltr {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: left !important;
}

/* Auto-isolate common English-only blocks if they appear */
html[dir="rtl"] .modal-body .text-muted:lang(en),
html[dir="rtl"] .modal-body .help-block:lang(en) {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/* --- Fix dropdown menus inside modal --- */
html[dir="rtl"] .modal-body .dropdown-menu {
    text-align: right;
    direction: rtl;
}

/* --- Tables inside modal (if any) --- */
html[dir="rtl"] .modal-body table,
html[dir="rtl"] .modal-body th,
html[dir="rtl"] .modal-body td {
    text-align: right;
}

/* =========================================================
   RTL MODAL HEADER FIX
   Prevent close (X) from overlapping title
========================================================= */

html[dir="rtl"] .modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    direction: rtl;
}

/* Modal title on the RIGHT */
html[dir="rtl"] .modal-header .modal-title {
    margin: 0 !important;
    padding-left: 40px; /* breathing room from X */
    text-align: right;
    flex: 1 1 auto;
}

/* Close button on the LEFT */
html[dir="rtl"] .modal-header .close,
html[dir="rtl"] .modal-header button.close {
    float: none !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0.75rem 1rem;
    order: -1; /* forces it to the LEFT in RTL */
}

/* Prevent Bootstrap absolute positioning from kicking in */
html[dir="rtl"] .modal-header .close span {
    display: block;
}
/* =========================================================
   RTL MODAL HEADER – FINAL FIX (ALL VARIANTS)
========================================================= */

/* Force proper RTL layout */
html[dir="rtl"] .modal-header {
    position: relative;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    direction: rtl;
    padding-right: 1.25rem;
    padding-left: 3rem; /* space for close button */
}

/* Modal title */
html[dir="rtl"] .modal-header .modal-title,
html[dir="rtl"] .modal-header h4,
html[dir="rtl"] .modal-header h5 {
    margin: 0 !important;
    text-align: right;
    flex: 1 1 auto;
    padding-left: 1.5rem; /* buffer from X */
}

/* Close button – ALWAYS top-left in RTL */
html[dir="rtl"] .modal-header .close,
html[dir="rtl"] .modal-header button.close {
    position: absolute !important;
    left: 1rem !important;
    right: auto !important;
    top: 1rem !important;
    float: none !important;
    margin: 0 !important;
    z-index: 10;
}

/* Prevent Bootstrap overrides */
html[dir="rtl"] .modal-header .close span {
    display: block;
    line-height: 1;
}


/* =========================================================
   ERJAAN RTL LAYOUT FIX
   Maintenance platform layout corrections
========================================================= */


/* =========================================================
   1. PAGE TITLE + ACTION TOOLBAR
========================================================= */

html[dir="rtl"] .page-titles {
    direction: rtl !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}


/*
 * Heading / breadcrumbs should occupy the RIGHT side.
 */
html[dir="rtl"] .page-titles > div:first-child {
    text-align: right !important;
    direction: rtl !important;
}


/*
 * GrowCRM uses text-right for the actions container in LTR.
 * In RTL we want the controls to sit inward, directly beside
 * the heading rather than floating into the center.
 */
html[dir="rtl"] #list-page-actions-container {
    text-align: left !important;
    direction: rtl !important;
}


html[dir="rtl"] #list-page-actions {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    width: 100% !important;
}


/*
 * Remove inherited floating behavior from individual controls.
 */
html[dir="rtl"] #list-page-actions > *,
html[dir="rtl"] #list-page-actions .btn-group {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/*
 * Search should stay aligned with action icons.
 */
html[dir="rtl"] #list-page-actions #header-search {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   2. MAINTENANCE REQUEST KANBAN POSITION
========================================================= */

/*
 * Prevent Bootstrap row negative margins from creating a wide
 * empty strip beside the right-side navigation.
 */
html[dir="rtl"] .kanban-wrapper {
    direction: rtl !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}


html[dir="rtl"] #leads-layout-wrapper {
    padding-right: 0 !important;
    padding-left: 0 !important;
}


/*
 * The actual GrowCRM lead Kanban container is .boards,
 * not .kanban-board.
 */
html[dir="rtl"] #leads-view-wrapper.boards {
    direction: rtl !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
}


/*
 * Keep each board ordered from the right-hand edge.
 */
html[dir="rtl"] #leads-view-wrapper.boards > * {
    direction: rtl !important;
    float: none !important;
}


/*
 * Main page content should begin immediately after the sidebar.
 */
html[dir="rtl"] .page-wrapper > .container-fluid {
    padding-right: 18px !important;
    padding-left: 18px !important;
}


/* =========================================================
   3. KANBAN CARD RTL
========================================================= */

html[dir="rtl"] .kanban-card {
    direction: rtl !important;
    text-align: right !important;
}


html[dir="rtl"] .kanban-card .x-title,
html[dir="rtl"] .kanban-card .x-meta {
    text-align: right !important;
}


/*
 * Three-dot action control belongs at the opposite edge in RTL.
 */
html[dir="rtl"] .kanban-card .x-action-button {
    float: left !important;
    right: auto !important;
    left: 0 !important;
}


/*
 * Keep mixed SLA text readable.
 */
html[dir="rtl"] .kanban-card .badge {
    unicode-bidi: isolate !important;
}


/* =========================================================
   4. TOP LANGUAGE DROPDOWN
========================================================= */

/*
 * The globe sits toward the left half of the mirrored top bar.
 * Bootstrap's dropdown-menu-right pushes the menu outside the
 * viewport in RTL. Anchor it inward instead.
 */
html[dir="rtl"] #topnav-language-icon {
    position: relative !important;
}


html[dir="rtl"] #topnav-language-icon .dropdown-menu {
    right: auto !important;
    left: 0 !important;
    transform: none !important;

    min-width: 220px !important;
    max-width: calc(100vw - 30px) !important;

    direction: rtl !important;
    text-align: right !important;

    overflow: visible !important;
}


/*
 * Ensure all language entries remain visible.
 */
html[dir="rtl"] #topnav-language-icon .dropdown-menu .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
}


html[dir="rtl"] #topnav-language-icon .dropdown-menu .col-6 {
    float: none !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
}


html[dir="rtl"] #topnav-language-icon .dropdown-item {
    text-align: right !important;
    white-space: nowrap !important;
}


/* =========================================================
   5. SIDE PANELS
========================================================= */

/*
 * Filter drawer should enter from the LEFT in RTL, opposite
 * the right-side main navigation.
 */
html[dir="rtl"] .right-sidebar {
    right: auto !important;
    left: -400px;
}


html[dir="rtl"] .right-sidebar.shw-rside,
html[dir="rtl"] .right-sidebar.show {
    left: 0 !important;
    right: auto !important;
}


/* =========================================================
   6. SMALL SCREEN SAFETY
========================================================= */

@media (max-width: 991px) {

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

    html[dir="rtl"] #list-page-actions-container {
        text-align: right !important;
    }

    html[dir="rtl"] #list-page-actions {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    html[dir="rtl"] #topnav-language-icon .dropdown-menu {
        left: 0 !important;
        right: auto !important;
    }
}



/* =========================================================
   ERJAAN RTL FINAL ALIGNMENT
   Topbar + Breadcrumb + Maintenance Kanban
========================================================= */


/* =========================================================
   1. TOPBAR
   Restore Bootstrap's separating auto margins in RTL.

   Right:
       Logo -> Hamburger -> Search

   Left:
       Utility icons -> Language -> User
========================================================= */

html[dir="rtl"] #main-top-nav-bar {
    direction: rtl !important;
}


/*
 * First navbar group contains hamburger + search.
 * Keep it immediately beside the logo on the RIGHT.
 */
html[dir="rtl"] #main-top-nav-bar > ul.navbar-nav.mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    width: auto !important;
    flex: 0 0 auto !important;
}


/*
 * Any opposite navbar group belongs on the LEFT.
 */
html[dir="rtl"] #main-top-nav-bar > ul.navbar-nav.ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;

    width: auto !important;
    flex: 0 0 auto !important;
}


/*
 * Do not let the whole collapse center its content.
 */
html[dir="rtl"] .topbar .navbar-collapse {
    justify-content: space-between !important;
}


/*
 * Keep hamburger and top search tightly grouped.
 */
html[dir="rtl"] #main-top-nav-bar .main-hamburger-menu,
html[dir="rtl"] #main-top-nav-bar .top-search-bar {
    flex: 0 0 auto !important;
    margin: 0 !important;
}


html[dir="rtl"] #main-top-nav-bar .main-hamburger-menu {
    order: 1 !important;
}


html[dir="rtl"] #main-top-nav-bar .top-search-bar {
    order: 2 !important;
}


html[dir="rtl"] #top-search-container {
    margin-right: 6px !important;
    margin-left: 0 !important;
}


/* =========================================================
   2. PAGE TITLE + BREADCRUMBS
========================================================= */

html[dir="rtl"] #breadcrumbs {
    direction: rtl !important;
    text-align: right !important;
}


html[dir="rtl"] #breadcrumbs h3 {
    text-align: right !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}


/*
 * Do not row-reverse the breadcrumb.
 * The page itself is already RTL.
 */
html[dir="rtl"] #breadcrumbs .breadcrumb {
    direction: rtl !important;
    flex-direction: row !important;
    justify-content: flex-start !important;

    text-align: right !important;

    margin-right: 0 !important;
    margin-left: 0 !important;

    padding-right: 0 !important;
    padding-left: 0 !important;
}


html[dir="rtl"] #breadcrumbs .breadcrumb-item {
    float: none !important;
    text-align: right !important;
}


/* =========================================================
   3. MAINTENANCE REQUEST KANBAN

   Use explicit row-reverse rather than relying on CSS
   direction to reverse the horizontal scrolling model.
========================================================= */

html[dir="rtl"] #leads-view-wrapper.boards {
    /*
     * Keep browser scrolling mechanics predictable.
     */
    direction: ltr !important;

    display: flex !important;
    flex-direction: row-reverse !important;

    /*
     * First board (New) must hug the RIGHT edge.
     */
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;

    width: 100% !important;
}


/*
 * Content inside each board remains Arabic RTL.
 */
html[dir="rtl"] #leads-view-wrapper.boards > * {
    direction: rtl !important;
}


/*
 * Remove any remaining inner right indentation.
 */
html[dir="rtl"] .kanban-wrapper,
html[dir="rtl"] #leads-layout-wrapper {
    margin-right: 0 !important;
    padding-right: 0 !important;
}


/*
 * The page already reserves sidebar width using
 * .page-wrapper margin-right. No additional content offset.
 */
html[dir="rtl"] .page-wrapper .container-fluid {
    margin-right: 0 !important;
}


/* =========================================================
   4. MAINTENANCE PAGE ACTIONS

   Actions stay together at the inward/left side of the
   title row without drifting toward page centre.
========================================================= */

html[dir="rtl"] #list-page-actions-container {
    direction: rtl !important;
    text-align: left !important;
}


html[dir="rtl"] #list-page-actions {
    width: auto !important;

    display: inline-flex !important;
    flex-direction: row-reverse !important;

    justify-content: flex-start !important;
    align-items: center !important;

    float: left !important;
}


/* =========================================================
   MOBILE SAFETY
========================================================= */

@media (max-width: 991px) {

    html[dir="rtl"] #main-top-nav-bar > ul.navbar-nav.mr-auto,
    html[dir="rtl"] #main-top-nav-bar > ul.navbar-nav.ml-auto {
        margin: 0 !important;
    }

    html[dir="rtl"] #list-page-actions {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
    }
}



/* =========================================================
   ERJAAN RTL KANBAN GAP + COLUMN WIDTH FIX
   Fixes:
   1) empty space between right sidebar and first stage
   2) squeezed/clipped first/last stage column
========================================================= */

html[dir="rtl"] .page-wrapper .container-fluid,
html[dir="rtl"] .kanban-wrapper,
html[dir="rtl"] #leads-layout-wrapper,
html[dir="rtl"] #leads-view-wrapper {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/*
 * Keep horizontal scrolling stable, but visually render
 * the stages from right to left.
 */
html[dir="rtl"] #leads-view-wrapper.boards {
    direction: ltr !important;
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;

    gap: 14px !important;
    margin: 0 !important;
    padding: 0 !important;

    width: max-content !important;
    min-width: 100% !important;
}

/*
 * Every stage must keep the same width in RTL.
 * This prevents the "Closed" column from being squeezed.
 */
html[dir="rtl"] #leads-view-wrapper.boards > .kanban-column,
html[dir="rtl"] #leads-view-wrapper.boards > .board-column,
html[dir="rtl"] #leads-view-wrapper.boards > .board,
html[dir="rtl"] #leads-view-wrapper.boards > div {
    direction: rtl !important;
    flex: 0 0 310px !important;
    width: 310px !important;
    min-width: 310px !important;
    max-width: 310px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/*
 * Remove edge clipping on the first and last visible stage.
 */
html[dir="rtl"] #leads-view-wrapper.boards > :first-child {
    margin-right: 0 !important;
}

html[dir="rtl"] #leads-view-wrapper.boards > :last-child {
    margin-left: 0 !important;
}

/*
 * Keep the kanban board attached visually to the right side
 * near the sidebar in Arabic.
 */
html[dir="rtl"] .kanban-board,
html[dir="rtl"] .boards {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/*
 * Make sure stage headers and cards use full column width.
 */
html[dir="rtl"] #leads-view-wrapper.boards .kanban-column-header,
html[dir="rtl"] #leads-view-wrapper.boards .board-header,
html[dir="rtl"] #leads-view-wrapper.boards .card {
    width: 100% !important;
    box-sizing: border-box !important;
}



/* =========================================================
   ERJAAN RTL KANBAN HORIZONTAL SCROLL FIX
========================================================= */

/*
 * This is the horizontal scroll viewport.
 * RTL keeps the initial viewport on the RIGHT where "New" starts.
 */
html[dir="rtl"] .kanban-wrapper {
    width: 100% !important;
    max-width: 100% !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    direction: rtl !important;

    -webkit-overflow-scrolling: touch;
}


/*
 * Do not let Bootstrap's column wrapper suppress overflow.
 */
html[dir="rtl"] #leads-layout-wrapper {
    width: 100% !important;
    max-width: 100% !important;

    overflow: visible !important;
}


/*
 * The board itself remains wider than the viewport when there
 * are more stages than can fit on screen.
 */
html[dir="rtl"] #leads-view-wrapper.boards {
    direction: ltr !important;

    display: flex !important;
    flex-direction: row-reverse !important;
    flex-wrap: nowrap !important;

    width: max-content !important;
    min-width: 100% !important;

    overflow: visible !important;
}


/*
 * Columns must never shrink to fit the screen.
 */
html[dir="rtl"] #leads-view-wrapper.boards > div {
    flex-shrink: 0 !important;
}


/*
 * Make the scrollbar usable and visible.
 */
html[dir="rtl"] .kanban-wrapper::-webkit-scrollbar {
    height: 10px;
}

html[dir="rtl"] .kanban-wrapper::-webkit-scrollbar-track {
    background: #eef2f4;
}

html[dir="rtl"] .kanban-wrapper::-webkit-scrollbar-thumb {
    background: #b8c4cb;
    border-radius: 8px;
}

html[dir="rtl"] .kanban-wrapper::-webkit-scrollbar-thumb:hover {
    background: #94a5af;
}