/* RTL specific overrides are mostly handled by Bootstrap RTL, but here are custom tweaks */

body {
    direction: rtl;
    text-align: right;
}

.sidebar {
    right: 0;
    left: auto;
    border-left: 1px solid #dee2e6;
    border-right: none;
}

.main-content {
    margin-right: var(--sidebar-width);
    margin-left: 0;
}

/* Adjust icons margin in RTL */
.me-2 {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

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

@media (max-width: 768px) {
    .main-content {
        margin-right: 0;
    }
}