/* RTL (Right-to-Left) Layout Overrides for Modern Sidebar */

/* Body and main layout adjustments */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* Definition lists laid out as a Bootstrap row (<dl class="row"><dt class="col-sm-3"><dd class="col-sm-9">).
   The UA stylesheet gives dd a 40px margin-inline-start; Bootstrap's LTR build
   resets margin-LEFT only, so under dir="rtl" the 40px lands on the RIGHT and
   col-3 + col-9 + 40px no longer fits the row: every dd wraps under its dt and
   the two-column list collapses into a stack. Measured on the Go contract
   record, 2026-09-11; the same markup is in 25 PHP views and 29 Go templates. */
html[dir="rtl"] dd {
    margin-right: 0;
}

/* Sidebar positioning for RTL */
html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    width: 60px !important; /* Explicitly set width to match LTR */
    border-left: 1px solid #dee2e6;
    border-right: none;
    padding: 0 !important; /* Remove any padding that might displace the sidebar */
    margin: 0 !important; /* Remove any margin that might displace the sidebar */
}

html[dir="rtl"] .sidebar-collapsed {
    right: 0;
    width: 60px !important; /* Ensure consistent width */
}

/* Specific fix for chronos-accessible-menu in RTL */
html[dir="rtl"] #chronos-accessible-menu {
    right: 0 !important;
    left: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 60px !important;
}

/* Remove any Bootstrap nav padding in RTL for sidebar */
html[dir="rtl"] .nav.flex-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Main content adjustment for RTL */
html[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: 60px;
}

/* Navbar RTL adjustments */
html[dir="rtl"] #main-navbar .container-fluid {
    direction: rtl;
}

html[dir="rtl"] #main-navbar .navbar-brand {
    margin-right: 0;
    margin-left: auto;
}

/* User dropdown positioning for RTL */
/* html[dir="rtl"] .dropdown-menu {
    left: auto;
    right: 0;
}

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

/* Autocomplete dropdowns should align to their input, not the viewport's right edge */
html[dir='rtl'] .chronos-autocomplete-dropdown.dropdown-menu {
    right: auto !important; /* allow JS-calculated left position to take effect */
}

/* jQuery UI autocomplete menus (legacy screens) should also not be right-anchored */
html[dir='rtl'] .ui-autocomplete.ui-front {
    right: auto !important;
}

/* Modal header and title alignment in RTL (when using LTR Bootstrap build)
    Goal: title on the right, close button on the left. */
html[dir='rtl'] .modal-header { flex-direction: row; justify-content: space-between; }
/* Swap order and neutralize Bootstrap's auto margins on the close button */
html[dir='rtl'] .modal-header .btn-close { order: 1; margin: 0 !important; }
/*html[dir='rtl'] .modal-header .modal-title { order: 2; }*/

/* Submenu positioning for RTL */
html[dir="rtl"] .nav-item .submenu-offcanvas {
    left: auto;
    right: 60px; /* Position submenu 60px from right edge (outside the sidebar) */
}

html[dir="rtl"] .submenu-nested {
    left: auto !important;
    right: 100% !important;
    margin-left: 0 !important;
    margin-right: 5px !important;
}

/* Icon and text alignment for RTL */
html[dir="rtl"] .sidebar-link i {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .submenu-link i {
    margin-left: 8px;
    margin-right: 0;
}

/* RTL sidebar item centering fixes */
html[dir="rtl"] .sidebar-link {
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

html[dir="rtl"] .sidebar-collapsed .sidebar-link {
    padding: 12px !important;
    justify-content: center !important;
    align-items: center !important;
}

html[dir="rtl"] .sidebar-collapsed .sidebar-link i {
    margin: 0 !important;
    text-align: center !important;
    display: block !important;
}

html[dir="rtl"] .submenu-link .fa-chevron-down {
    margin-left: 0;
    margin-right: auto;
}

/* Badge positioning for RTL */
html[dir="rtl"] .position-absolute.start-100 {
    left: auto;
    right: 0;
    transform: translate(50%, -50%);
}

/* Ensure badges are properly positioned on sidebar items */
html[dir="rtl"] .sidebar-link .position-absolute {
    top: 0;
    right: 0;
    left: auto;
    transform: translate(50%, -50%);
}

/* Mobile adjustments for RTL */
@media (max-width: 768px) {
    html[dir="rtl"] .sidebar {
        transform: translateX(100%);
        right: 0;
        left: auto;
    }
    
    html[dir="rtl"] .sidebar.show {
        transform: translateX(0) !important;
    }
    
    html[dir="rtl"] .mobile-sidebar-toggle {
        left: auto;
        right: 15px;
    }
    
    html[dir="rtl"] #main-navbar .container-fluid {
        padding-right: 65px !important;
        padding-left: 1rem;
    }
    
    html[dir="rtl"] .main-content {
        margin-right: 0;
    }
}

/* Desktop RTL adjustments */
@media (min-width: 769px) {
    html[dir="rtl"] #main-navbar .container-fluid {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

/* Tooltip positioning for RTL */
html[dir="rtl"] .tooltip {
    direction: rtl;
}

html[dir="rtl"] [data-bs-placement="right"] .tooltip {
    --bs-tooltip-placement: left;
}

/* Form and input alignment for RTL */
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] .form-check-input {
    text-align: start;
}

html[dir="rtl"] .form-check {
    padding-inline-start: 0;
    text-align: start;
}

html[dir="rtl"] .form-check-input {
    margin-inline-start: 0;
    margin-inline-end: -1.5em;
    float: right;
}

html[dir="rtl"] .form-check-label {
    padding-inline-start: 0;
    padding-inline-end: 0.5em;
}

/* Enhanced RTL support for toggle switches */
/* html[dir="rtl"] .form-switch {
    padding-left: 0;
    padding-right: 2.5em;
} */

html[dir="rtl"] .form-switch .form-check-input {
    margin-inline-start: 0;
    margin-inline-end: -2.5em;
    background-position: right center;
}

html[dir="rtl"] .form-switch .form-check-input:checked {
    background-position: left center;
}

html[dir="rtl"] .form-switch .form-check-input:focus {
    background-position: right center;
}

html[dir="rtl"] .form-switch .form-check-input:checked:focus {
    background-position: left center;
}

/* Toggle switch custom styles for RTL */
html[dir="rtl"] .form-switch .toggle-switch {
    margin-inline-start: 0;
    margin-inline-end: -2.5em;
}

/* Custom toggle switch (form-check-input.toggle-switch) RTL support */
html[dir="rtl"] .form-check-input.toggle-switch {
    /* Remove background-position conflicts with custom toggle */
    background-position: initial;
}

html[dir="rtl"] .form-check-input.toggle-switch:checked {
    /* Remove background-position conflicts with custom toggle */
    background-position: initial;
}

html[dir="rtl"] .form-check-input.toggle-switch:focus {
    /* Remove background-position conflicts with custom toggle */
    background-position: initial;
}

/* Note: RTL knob positioning is handled by transform in chronos-ui-overrides.css */

/* Form label positioning for RTL */
html[dir="rtl"] .form-label {
    text-align: right;
}

/* Button and component alignment */
html[dir="rtl"] .btn-group {
    direction: rtl;
}

html[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--bs-btn-border-radius);
    border-bottom-left-radius: var(--bs-btn-border-radius);
}

html[dir="rtl"] .btn-group > .btn:not(:first-child) {
    border-top-left-radius: var(--bs-btn-border-radius);
    border-bottom-left-radius: var(--bs-btn-border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-left: 0;
    margin-right: -1px;
}

/* Enhanced RTL support for split button dropdowns */
html[dir="rtl"] .btn-group > .dropdown-toggle-split {
    order: -1; /* Move dropdown toggle to the left */
    border-top-left-radius: var(--bs-btn-border-radius);
    border-bottom-left-radius: var(--bs-btn-border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-left: 0;
    margin-right: -1px;
}

/* Ensure main button in split group has proper radius in RTL */
html[dir="rtl"] .btn-group > .btn:not(.dropdown-toggle):not(.dropdown-toggle-split) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--bs-btn-border-radius);
    border-bottom-right-radius: var(--bs-btn-border-radius);
}

/* RTL Dropdown menu positioning for button groups */
html[dir="rtl"] .btn-group .dropdown-menu {
    left: auto;
    right: 0;
}

/* Special handling for modal dialog button groups */
html[dir="rtl"] .modal .btn-group,
html[dir="rtl"] .modal-footer .btn-group {
    direction: rtl;
}

html[dir="rtl"] .modal .btn-group > .dropdown-toggle-split,
html[dir="rtl"] .modal-footer .btn-group > .dropdown-toggle-split {
    order: 0;
}

/* Ensure dropdown menu positioning in dialogs */
html[dir="rtl"] .modal .btn-group .dropdown-menu,
html[dir="rtl"] .modal-footer .btn-group .dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
}

/* RTL Icon spacing in button groups */
html[dir="rtl"] .btn-group .btn .me-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

html[dir="rtl"] .btn-group .btn .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* RTL dropdown item icon spacing */
html[dir="rtl"] .btn-group .dropdown-item .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* Fix dropdown caret direction in RTL */
html[dir="rtl"] .btn-group .dropdown-toggle::after {
    margin-left: 0;
    margin-right: 0.255em;
}

html[dir="rtl"] .btn-group .dropdown-toggle-split::after {
    margin-left: 0;
    margin-right: 0;
}

/* Ensure proper z-index for RTL dropdown menus in modals */
html[dir="rtl"] .modal .btn-group .dropdown-menu {
    z-index: 1070; /* Higher than modal backdrop */
}

/* ========================================
   GLOBAL RTL FIX FOR BOOTSTRAP BUTTON GROUPS
   Fixes split button dropdown rendering in RTL mode
   Applies to ALL button groups throughout the application
   ======================================== */

/* Reverse button order in RTL - applies to all btn-groups globally */
html[dir="rtl"] .btn-group {
    flex-direction: row-reverse;
}

/* Fix first button border radius in RTL (will be visually last) */
html[dir="rtl"] .btn-group > .btn:first-child:not(.dropdown-toggle) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--bs-btn-border-radius);
    border-bottom-right-radius: var(--bs-btn-border-radius);
}

/* Fix last button border radius in RTL (will be visually first) */
html[dir="rtl"] .btn-group > .btn:last-child:not(.dropdown-toggle-split),
html[dir="rtl"] .btn-group > .dropdown-toggle:not(.dropdown-toggle-split):last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--bs-btn-border-radius);
    border-bottom-left-radius: var(--bs-btn-border-radius);
}

/* Fix dropdown-toggle-split button radius in RTL */
html[dir="rtl"] .btn-group > .dropdown-toggle-split:first-child {
    border-top-left-radius: var(--bs-btn-border-radius);
    border-bottom-left-radius: var(--bs-btn-border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

html[dir="rtl"] .btn-group > .dropdown-toggle-split:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--bs-btn-border-radius);
    border-bottom-left-radius: var(--bs-btn-border-radius);
}

/* Fix button borders in RTL to prevent double borders */
html[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-left: 0;
}

html[dir="rtl"] .btn-group > .btn:not(:first-child),
html[dir="rtl"] .btn-group > .dropdown-toggle-split {
    border-right: 0;
}

/* Ensure dropdown-toggle-split appears on the left in RTL */
html[dir="rtl"] .btn-group > .dropdown-toggle-split {
    margin-left: 0;
    margin-right: calc(var(--bs-border-width) * -1);
}

/* Fix dropdown menu alignment in RTL for all button groups */
html[dir="rtl"] .btn-group .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
}

/* Ensure dropdown menu items have proper text alignment */
html[dir="rtl"] .btn-group .dropdown-menu {
    text-align: right;
}

/* Fix icon spacing in dropdown items for RTL */
html[dir="rtl"] .btn-group .dropdown-menu .dropdown-item i {
    margin-right: 0;
    margin-left: 0.5rem;
}

/* Ensure proper focus and active states maintain correct borders */
html[dir="rtl"] .btn-group > .btn:focus,
html[dir="rtl"] .btn-group > .btn:active,
html[dir="rtl"] .btn-group > .btn.active {
    z-index: 1;
}

/* Fix for table action button groups specifically */
html[dir="rtl"] td .btn-group,
html[dir="rtl"] .table .btn-group {
    flex-direction: row-reverse;
}

/* Fix for toolbar button groups */
html[dir="rtl"] .toolbar .btn-group,
html[dir="rtl"] .action-toolbar .btn-group,
html[dir="rtl"] .floating-action-buttons .btn-group {
    flex-direction: row-reverse;
}

/* Fix for button groups in cards and headers */
html[dir="rtl"] .card-header .btn-group,
html[dir="rtl"] .card-body .btn-group {
    flex-direction: row-reverse;
}

/* ========================================
   RTL FIX FOR RADIO BUTTON GROUPS (Toggle Buttons)
   Used for segmented controls like "Last 24 Hours" / "Event Time"
   
   NOTE: We do NOT reverse flex-direction for radio button groups
   because the visual state is controlled by which radio is checked.
   We only fix borders and border-radius for RTL.
   ======================================== */

/* Override the global btn-group flex-direction for radio button groups */
html[dir="rtl"] .btn-group:has(.btn-check) {
    flex-direction: row !important; /* Keep natural order, do NOT reverse */
}

/* Fix border radius for first label in RTL */
html[dir="rtl"] .btn-group:has(.btn-check) > label.btn:first-of-type {
    border-top-left-radius: var(--bs-btn-border-radius);
    border-bottom-left-radius: var(--bs-btn-border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Fix border radius for last label in RTL */
html[dir="rtl"] .btn-group:has(.btn-check) > label.btn:last-of-type {
    border-top-right-radius: var(--bs-btn-border-radius);
    border-bottom-right-radius: var(--bs-btn-border-radius);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Fix borders for radio button group labels in RTL */
html[dir="rtl"] .btn-group:has(.btn-check) > label.btn:not(:first-of-type) {
    border-left: 0;
    margin-left: calc(var(--bs-border-width) * -1);
}

html[dir="rtl"] .btn-group:has(.btn-check) > label.btn:not(:last-of-type) {
    border-right: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
}

/* Fix icon spacing in radio button labels */
html[dir="rtl"] .btn-group:has(.btn-check) > label.btn .me-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

html[dir="rtl"] .btn-group:has(.btn-check) > label.btn .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* Ensure checked state maintains proper borders */
html[dir="rtl"] .btn-group:has(.btn-check) > .btn-check:checked + label.btn {
    z-index: 1;
}

/* Input group radius flips for map toolbar */
html[dir='rtl'] .map-toolbar .input-group .input-group-text { border-radius: 0 .375rem .375rem 0; }
html[dir='rtl'] .map-toolbar .input-group .form-control { border-radius: .375rem 0 0 .375rem; }
html[dir='rtl'] .map-toolbar .zip-group { margin-inline-start: 0; }

/* Text alignment utilities override for RTL */
html[dir="rtl"] .text-start {
    text-align: right !important;
}

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

/* Flexbox direction adjustments */
html[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

html[dir="rtl"] .justify-content-start {
    justify-content: flex-end !important;
}

html[dir="rtl"] .justify-content-end {
    justify-content: flex-start !important;
}

html[dir="rtl"] .form-buttons-justify-content-end {
    justify-content: flex-end !important;
}

/* Border utilities for RTL */
html[dir="rtl"] .border-start {
    border-left: 0 !important;
    border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

html[dir="rtl"] .border-end {
    border-right: 0 !important;
    border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

/* Custom component adjustments for your specific implementation */
html[dir="rtl"] .submenu-level-1,
html[dir="rtl"] .submenu-level-2,
html[dir="rtl"] .submenu-level-3 {
    border-left: none;
    border-right: 2px solid;
}

html[dir="rtl"] .nested-submenu {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* User profile status indicator positioning */
html[dir="rtl"] #userDropdown .position-absolute {
    right: auto;
    left: 2px;
}

/* Search form alignment */
html[dir="rtl"] #main-navbar form.d-flex {
    direction: rtl;
}

html[dir="rtl"] #main-navbar .form-control {
    text-align: right;
    padding-right: 12px;
    padding-left: 40px;
}

/* Animation adjustments for RTL */
@keyframes slideInRTL {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

html[dir="rtl"] .submenu-offcanvas {
    animation: slideInRTL 0.15s ease-out;
    transform: translateX(10px);
}

html[dir="rtl"] .submenu-offcanvas.show {
    transform: translateX(0);
}

/* Exceptions for table headers and dashboard headers */
html[dir="rtl"] .sortable-header .d-flex,
html[dir="rtl"] .dashboard-header.d-flex,
html[dir="rtl"] .dashboard-header .d-flex,
html[dir="rtl"] .modern-header .header-row {
    flex-direction: row !important; /* cancel global row-reverse */
}

/* Dashboard header RTL adjustments */
html[dir="rtl"] .dashboard-header .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* Add extra specificity to win against later-loaded styles */
html[dir="rtl"] .card-header.modern-header .header-row {
    flex-direction: row !important;
}

/* Ensure child order swaps: title block placed on the right, button block on the left */
html[dir="rtl"] .modern-header .header-row > div:first-child { order: 2 !important; }
html[dir="rtl"] .modern-header .header-row > div:last-child { order: 1 !important; }

/* Icon to the left of title in RTL (mirrors .me-2) */
html[dir="rtl"] .modern-header .card-title .me-2 {
    margin-right: 0 !important;
    margin-left: .5rem !important;
}

/* Count badge spacing swap (mirrors .ms-2) */
html[dir="rtl"] .modern-header .badge.ms-2 {
    margin-left: 0 !important;
    margin-right: .5rem !important;
}

/* Button icon spacing in header (mirrors .me-1) */
html[dir="rtl"] .modern-header .btn .me-1 {
    margin-right: 0 !important;
    margin-left: .25rem !important;
}

/* Moved from chronos-ui-overrides.css: generic RTL utilities */
html[dir="rtl"] .form-label.required::after {
    content: "* ";
}

html[dir="rtl"] .btn i {
    margin-right: 0;
}

/* OAuth button spacing utility in RTL */
html[dir="rtl"] .auth-services .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

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

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

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

html[dir="rtl"] .paginationLimit {
    float: left;
}

/* RTL icon adjustments */
html[dir="rtl"] .iconeGrid {
    margin-right: 2px;
    margin-left: 0;
}

/* Bootstrap table RTL improvements */
html[dir="rtl"] .table th,
html[dir="rtl"] .table td {
    text-align: right;
}

html[dir="rtl"] .table th:first-child,
html[dir="rtl"] .table td:first-child {
    text-align: center; /* Keep action columns centered */
}

/* Responsive table RTL */
html[dir="rtl"] .table-responsive {
    direction: rtl;
}

html[dir="rtl"] .table-responsive .table {
    direction: rtl;
}

html[dir="rtl"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    margin-inline-end: -1px;
    margin-inline-start: 0;
}

html[dir="rtl"] .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

html[dir="rtl"] .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

/* ========================================
   DASHBOARD PEOPLE HEADER EXCEPTIONS (RTL)
   Keep control geometry stable for view toggle + sort group
   ======================================== */
html[dir="rtl"] .dashboard-header-wrapper #dashboard-view-toggle-group.btn-group.dashboard-view-toggle {
    direction: ltr !important;
    flex-direction: row !important;
}

html[dir="rtl"] .dashboard-header-wrapper #dashboard-view-toggle-group.btn-group.dashboard-view-toggle > .dashboard-view-btn:first-child {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: var(--bs-btn-border-radius) !important;
    border-bottom-left-radius: var(--bs-btn-border-radius) !important;
}

html[dir="rtl"] .dashboard-header-wrapper #dashboard-view-toggle-group.btn-group.dashboard-view-toggle > .dashboard-view-btn:last-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--bs-btn-border-radius) !important;
    border-bottom-right-radius: var(--bs-btn-border-radius) !important;
}

/* Restore borders removed by global RTL btn-group rules */
html[dir="rtl"] .dashboard-header-wrapper #dashboard-view-toggle-group.btn-group.dashboard-view-toggle > .dashboard-view-btn:not(:last-child) {
    border-left: var(--bs-btn-border-width) solid var(--bs-btn-border-color) !important;
}

html[dir="rtl"] .dashboard-header-wrapper #dashboard-view-toggle-group.btn-group.dashboard-view-toggle > .dashboard-view-btn:not(:first-child) {
    border-right: var(--bs-btn-border-width) solid var(--bs-btn-border-color) !important;
    margin-right: 0 !important;
    margin-left: calc(var(--bs-border-width) * -1) !important;
}

html[dir="rtl"] .dashboard-header-wrapper .dashboard-sort-group.input-group {
    direction: ltr !important;
}

html[dir="rtl"] .dashboard-header-wrapper .dashboard-sort-group.input-group > #dashboard-sort-field {
    direction: rtl;
    text-align: right;
    text-align-last: right;
    background-position: left 0.75rem center;
    padding-right: 0.75rem;
    padding-left: 2rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: var(--bs-border-radius) !important;
    border-bottom-left-radius: var(--bs-border-radius) !important;
}

html[dir="rtl"] .dashboard-header-wrapper .dashboard-sort-group.input-group > #dashboard-sort-order {
    direction: ltr;
    margin-left: calc(var(--bs-border-width) * -1) !important;
    margin-right: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

/* Dashboard filter-specific RTL styles */
html[dir="rtl"] .filter-search .input-group-text,
html[dir="rtl"] .filter-icon-search {
    border-start-end-radius: 0.375rem;
    border-end-end-radius: 0.375rem;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

html[dir="rtl"] .filter-search .filter-input {
    border-start-start-radius: 0.375rem;
    border-end-start-radius: 0.375rem;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

html[dir="rtl"] .filter-icon-battery {
    border-start-end-radius: 0.375rem;
    border-end-end-radius: 0.375rem;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

html[dir="rtl"] .filter-select {
    border-start-start-radius: 0.375rem;
    border-end-start-radius: 0.375rem;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

/* Enhanced spacing for RTL */
html[dir="rtl"] .input-group.me-3 {
    margin-inline-start: 1rem !important;
    margin-inline-end: 0 !important;
}

/* Form select RTL positioning */
html[dir="rtl"] .filter-select {
    background-position: left 0.75rem center;
}

/* Native selects in RTL: chevron on the left (exclude grid limit-per-page controls) */
html[dir="rtl"] .form-select:not([name$="_limit_per_page"]):not([id$="_limit_per_page"]) {
    background-position: left 0.75rem center;
    padding-inline-start: 0.75rem;
    padding-inline-end: 2.25rem;
}

/* TomSelect RTL stability: neutralize stale inline icon/padding styles on internal input */
html[dir="rtl"] .ts-wrapper .ts-control > input,
html[dir="rtl"] .ts-wrapper .ts-control > input.is-valid,
html[dir="rtl"] .ts-wrapper .ts-control > input.is-invalid {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    background-position: initial !important;
    background-size: initial !important;
    overflow: visible;
    text-align: start !important;
}

/* Keep validation state on wrapper/control, not internal text input */
html[dir="rtl"] .ts-wrapper.is-valid .ts-control,
html[dir="rtl"] .ts-wrapper.form-select.is-valid .ts-control,
html[dir="rtl"] .ts-wrapper.form-control.is-valid .ts-control {
    border-color: var(--bs-form-valid-border-color);
}

html[dir="rtl"] .ts-wrapper.is-invalid .ts-control,
html[dir="rtl"] .ts-wrapper.form-select.is-invalid .ts-control,
html[dir="rtl"] .ts-wrapper.form-control.is-invalid .ts-control {
    border-color: var(--bs-form-invalid-border-color);
}

/* Icon positioning for RTL */
html[dir="rtl"] .input-group-text i {
    transform: scaleX(-1);
}

/* Exception for battery icon - should not flip */
html[dir="rtl"] .filter-icon-battery i {
    transform: none;
}

/* RTL-specific layout adjustments */
html[dir="rtl"] .d-flex.mt-1 > div:not(.me-auto) {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Modern Monitoring Dashboard RTL Support */
/* Priority counter cards - flip icon to left side */
html[dir="rtl"] .icon-circle-priority.ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    order: -1; /* Move icon to left */
}

/* KPI breach cards - flip icon and badge positioning */
html[dir="rtl"] .kpi-filter-badge .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
    order: 3; /* Move icon to rightmost position in RTL */
}

html[dir="rtl"] .kpi-filter-badge .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
    order: -1; /* Move badge to leftmost position in RTL */
    flex-shrink: 0; /* Prevent badge from shrinking */
}

/* Ensure proper flex ordering in RTL for card content */
html[dir="rtl"] .kpi-filter-badge .card-body.d-flex {
    flex-direction: row; /* Keep row but rely on order property */
}

/* Fix text content positioning and prevent overlap */
html[dir="rtl"] .kpi-filter-badge .flex-grow-1 {
    order: 2; /* Position content between badge and icon */
    margin-left: 0.5rem !important; /* Add space from badge */
    margin-right: 0.5rem !important; /* Add space from icon */
    text-align: right;
    min-width: 0; /* Allow text to shrink if needed */
    flex-shrink: 1; /* Allow content to shrink to prevent overlap */
}

/* Ensure the badge container has proper spacing */
html[dir="rtl"] .kpi-filter-badge .card-body {
    padding: 0.5rem !important; /* Ensure adequate padding */
}

/* Make sure text doesn't overflow into badge area */
html[dir="rtl"] .kpi-filter-badge .fw-bold,
html[dir="rtl"] .kpi-filter-badge .text-muted {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
}

/* Status counter cards RTL adjustments */
html[dir="rtl"] .modern-monitoring-dashboard .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

html[dir="rtl"] .modern-monitoring-dashboard .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

/* KPI selection badge positioning for RTL */
html[dir="rtl"] .kpi-selection-badge {
    right: auto !important;
    left: -8px !important;
}

/* Ensure counter filter cards maintain proper layout in RTL */
/* Removed problematic direction: rtl rule that was conflicting with Bootstrap's natural RTL behavior */

html[dir="rtl"] .counter-filter-card .icon-circle-priority {
    order: -1;
    /* Ensure proper margin in RTL - icon should have space to the right of it (margin-left) */
}

html[dir="rtl"] .counter-filter-card .flex-grow-1 {
    order: 1;
    text-align: right;
}

/* Priority card title and counter alignment */
html[dir="rtl"] .counter-filter-card .card-title {
    text-align: right;
}

html[dir="rtl"] .counter-filter-card h3 {
    text-align: right;
}

 html[dir="rtl"] #main-navbar .dropdown-menu-end {
     right: auto !important;
     left: 0 !important;
 }
 
/* --- NEW FIXES FOR ICON & AVATAR SPACING --- */
/* This rule manually enforces the correct spacing for 'me-*' and 'ms-*' classes in RTL.
This is needed when Bootstrap's default RTL logic is overridden or fails to apply,
which appears to be happening with icon and avatar spacing. */
html[dir="rtl"] .me-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

html[dir="rtl"] .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

html[dir="rtl"] .me-3 {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

html[dir="rtl"] .ms-1 {
    margin-left: 0 !important;
    margin-right: 0.25rem !important;
}

html[dir="rtl"] .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

/* Override the generic ms-2 rule specifically for counter cards to fix RTL layout */
html[dir="rtl"] .counter-filter-card .ms-2 {
    margin-left: 0 !important;
    margin-right: 0.5rem !important;
}

html[dir="rtl"] .ms-3 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

/* ========================================
   RTL FIX FOR SELECTED EVENT ROWS
   Selected rows should have right border in RTL instead of left
   ======================================== */

/* Base event row - swap border side */
html[dir="rtl"] .event-row {
    border-left: none !important;
    border-right: 3px solid transparent;
}

/* Selected event row - border on right in RTL */
html[dir="rtl"] .event-row:has(.event-checkbox:checked) {
    border-right-color: #0d6efd;
    border-left: none !important;
}

/* ========================================
   RTL FIX FOR PAGINATION ICONS
   Flip navigation arrows for RTL languages
   ======================================== */

/* First page: angles-left → angles-right */
html[dir="rtl"] .pagination .first-page .fa-angles-left::before {
    content: "\f101"; /* fa-angles-right */
}

/* Previous page: angle-left → angle-right */
html[dir="rtl"] .pagination .prev-page .fa-angle-left::before {
    content: "\f105"; /* fa-angle-right */
}

/* Next page: angle-right → angle-left */
html[dir="rtl"] .pagination .next-page .fa-angle-right::before {
    content: "\f104"; /* fa-angle-left */
}

/* Last page: angles-right → angles-left */
html[dir="rtl"] .pagination .last-page .fa-angles-right::before {
    content: "\f100"; /* fa-angles-left */
}

/* ========================================
   RTL FIX FOR PAGINATION BORDER RADIUS AND MARGINS
   Swap rounded corners and negative margins for RTL
   ======================================== */

/* First item: rounded corners on RIGHT instead of LEFT */
html[dir="rtl"] .page-item:first-child .page-link {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--bs-pagination-border-radius);
    border-bottom-right-radius: var(--bs-pagination-border-radius);
}

/* Last item: rounded corners on LEFT instead of RIGHT */
html[dir="rtl"] .page-item:last-child .page-link {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--bs-pagination-border-radius);
    border-bottom-left-radius: var(--bs-pagination-border-radius);
}

/* Negative margin: use right margin instead of left for border overlap */
html[dir="rtl"] .page-item:not(:first-child) .page-link {
    margin-left: 0;
    margin-right: calc(var(--bs-border-width) * -1);
}

/* ========================================
   RTL FIX FOR YII GRIDVIEW SORT ARROWS (Comprehensive)
   ======================================== */

/* 1. Base Anchor Styling: Ensure it can contain the arrow */
html[dir="rtl"] .grid-view table.items th a.sort-link {
    display: block;           /* Ensure link fills the header */
    position: relative;       /* Establish context for absolute positioning */
    width: 100%;

    /* Swap Padding: Make room on the LEFT, remove room on the RIGHT */
    padding-left: 20px !important;
    padding-right: 5px !important;
}

/* 2. Scenario A: Arrow is a Background Image (Standard Yii) */
/* We force the position to the left using percentage to be safe */
html[dir="rtl"] .grid-view table.items th a.sort-link.asc,
html[dir="rtl"] .grid-view table.items th a.sort-link.desc {
    background-position: 0% 50% !important; /* 0% = Left edge */
}

/* 3. Scenario B: Arrow is a Font Icon (::after pseudo-element) */
/* Many themes absolute position this icon to the right */
html[dir="rtl"] .grid-view table.items th a.sort-link::after {
    /* Reset LTR positioning */
    right: auto !important;

    /* Force to RTL position */
    left: 5px !important;

    /* Ensure it doesn't float weirdly */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* 4. Scenario C: Arrow is an <i> tag or <img> tag inside the link */
html[dir="rtl"] .grid-view table.items th a.sort-link i,
html[dir="rtl"] .grid-view table.items th a.sort-link img {
    float: left !important;
    margin-right: 5px !important; /* Space between text and icon */
    margin-left: 0 !important;
}

/* ========================================
   RTL FIX FOR DROPDOWN MENUS IN RESPONSIVE TABLES
   Fixes the "cut-off" issue by flipping the positioning logic
   ======================================== */
html[dir="rtl"] .table-responsive-wrapper .dropdown-menu.dropdown-menu-end.show {
    right: auto !important;
    margin-left: 0 !important;
    /*left: 26px !important;*/
    margin-right: -112px !important;
    text-align: right !important;
}

html[dir="rtl"] .toast-container,
html[dir="rtl"] #toast-container {
    right: auto !important;
    left: 0 !important;
}

/* ========================================
   RTL FIX FOR MODERN MONITORING EVENT HISTORY HEADER
   ======================================== */
html[dir="rtl"] .event-history-header {
    direction: rtl;
}

html[dir="rtl"] .event-history-title {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .event-history-meta {
    direction: rtl;
    text-align: right;
}

/* ========================================
   RTL FIX FOR DATE/TIME ELEMENTS
   Dates and times should always display LTR (04/02/2026, 19:48)
   not RTL (19:48 ,04/02/2026) regardless of page direction
   ======================================== */
html[dir="rtl"] [data-date-auto="true"],
html[dir="rtl"] .date-auto-formatted,
html[dir="rtl"] [data-date-field],
html[dir="rtl"] .date-formatted,
html[dir="rtl"] [numerical-field] {
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: embed;
}

html[dir="rtl"] .form-control.flatpickr-widget-input.input {
    direction: ltr !important;
    unicode-bidi: embed;
    text-align: right;
}