/* ═══════════════════════════════════════════════════════════════════
   RTL (Right-to-Left) Support for Arabic Language
   Works with the design token system in app.css/admin.css
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Document Direction ────────────────────────────────────────── */
html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* ─── Sidebar Navigation ───────────────────────────────────────── */
html[dir="rtl"] .sidebar .nav-link {
    text-align: right;
}

html[dir="rtl"] .sidebar .nav-link .bi,
html[dir="rtl"] .sidebar .nav-link svg {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* ─── Mobile Sidebar ───────────────────────────────────────────── */
@media (max-width: 768px) {
    html[dir="rtl"] main {
        margin-right: 0;
    }
}

/* ─── Top Navigation ───────────────────────────────────────────── */
html[dir="rtl"] .navbar-nav {
    flex-direction: row-reverse;
}

html[dir="rtl"] .navbar-brand {
    margin-left: 1rem;
    margin-right: 0;
}

/* ─── Dropdown Menus ───────────────────────────────────────────── */
html[dir="rtl"] .dropdown-menu {
    text-align: right;
    left: auto;
    right: 0;
}

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

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

/* ─── Form Controls ────────────────────────────────────────────── */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

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

html[dir="rtl"] .form-check {
    padding-right: 1.5em;
    padding-left: 0;
}

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

html[dir="rtl"] .form-check-label {
    margin-right: 0.5rem;
}

/* ─── Input Groups ─────────────────────────────────────────────── */
html[dir="rtl"] .input-group {
    flex-direction: row-reverse;
}

html[dir="rtl"] .input-group > .form-control:not(:last-child) {
    border-top-right-radius: var(--h-radius-sm, 0.375rem);
    border-bottom-right-radius: var(--h-radius-sm, 0.375rem);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

html[dir="rtl"] .input-group > .form-control:not(:first-child) {
    border-top-left-radius: var(--h-radius-sm, 0.375rem);
    border-bottom-left-radius: var(--h-radius-sm, 0.375rem);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* ─── Tables ───────────────────────────────────────────────────── */
html[dir="rtl"] table,
html[dir="rtl"] th,
html[dir="rtl"] td {
    text-align: right;
}

/* ─── Buttons with Icons ───────────────────────────────────────── */
html[dir="rtl"] .btn .bi,
html[dir="rtl"] .btn svg {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* ─── Cards ────────────────────────────────────────────────────── */
html[dir="rtl"] .card,
html[dir="rtl"] .card-header,
html[dir="rtl"] .card-body {
    text-align: right;
}

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

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-left: 0.5rem;
    padding-right: 0;
    content: "\200F/";
}

/* ─── Pagination ───────────────────────────────────────────────── */
html[dir="rtl"] .pagination {
    flex-direction: row-reverse;
}

/* ─── List Groups ──────────────────────────────────────────────── */
html[dir="rtl"] .list-group {
    text-align: right;
}

/* ─── Alerts ───────────────────────────────────────────────────── */
html[dir="rtl"] .alert {
    text-align: right;
}

html[dir="rtl"] .alert-dismissible {
    padding-right: 3rem;
    padding-left: 1rem;
}

html[dir="rtl"] .alert-dismissible .btn-close {
    left: 0;
    right: auto;
}

/* ─── Modals ───────────────────────────────────────────────────── */
html[dir="rtl"] .modal-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .modal-header .btn-close {
    margin: -0.5rem auto -0.5rem -0.5rem;
}

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

html[dir="rtl"] .modal-footer {
    flex-direction: row-reverse;
}

/* ─── Margin/Padding Utilities ─────────────────────────────────── */
html[dir="rtl"] .ms-auto {
    margin-right: auto !important;
    margin-left: unset !important;
}

html[dir="rtl"] .me-auto {
    margin-left: auto !important;
    margin-right: unset !important;
}

html[dir="rtl"] .ms-1, html[dir="rtl"] .ms-2, html[dir="rtl"] .ms-3, html[dir="rtl"] .ms-4, html[dir="rtl"] .ms-5 {
    margin-right: inherit;
    margin-left: unset;
}

html[dir="rtl"] .me-1, html[dir="rtl"] .me-2, html[dir="rtl"] .me-3, html[dir="rtl"] .me-4, html[dir="rtl"] .me-5 {
    margin-left: inherit;
    margin-right: unset;
}

html[dir="rtl"] .ps-1, html[dir="rtl"] .ps-2, html[dir="rtl"] .ps-3, html[dir="rtl"] .ps-4, html[dir="rtl"] .ps-5 {
    padding-right: inherit;
    padding-left: unset;
}

html[dir="rtl"] .pe-1, html[dir="rtl"] .pe-2, html[dir="rtl"] .pe-3, html[dir="rtl"] .pe-4, html[dir="rtl"] .pe-5 {
    padding-left: inherit;
    padding-right: unset;
}

/* ─── Float Utilities ──────────────────────────────────────────── */
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end   { float: left !important; }

/* ─── Text Alignment ───────────────────────────────────────────── */
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end   { text-align: left !important; }

/* ─── Icon Flipping ────────────────────────────────────────────── */
html[dir="rtl"] .bi-chevron-left::before  { content: "\f285"; /* chevron-right */ }
html[dir="rtl"] .bi-chevron-right::before { content: "\f284"; /* chevron-left */ }
html[dir="rtl"] .bi-arrow-left::before    { content: "\f138"; /* arrow-right */ }
html[dir="rtl"] .bi-arrow-right::before   { content: "\f135"; /* arrow-left */ }

/* ─── Language Switcher ────────────────────────────────────────── */
.language-switcher {
    display: inline-block;
}

.language-switcher .lang-icon {
    font-weight: bold;
    margin-right: 0.25rem;
}

html[dir="rtl"] .language-switcher .lang-icon {
    margin-right: 0;
    margin-left: 0.25rem;
}

.language-switcher .dropdown-item.active {
    background-color: var(--h-primary, #667eea);
    color: white;
}

/* ─── Badge Positioning ────────────────────────────────────────── */
html[dir="rtl"] .position-absolute.end-0 {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .position-absolute.start-0 {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .badge {
    margin-left: 0;
    margin-right: 0.25rem;
}

/* ─── Scrollbar ────────────────────────────────────────────────── */
html[dir="rtl"] ::-webkit-scrollbar {
    width: 6px;
}

html[dir="rtl"] ::-webkit-scrollbar-track {
    background: transparent;
}

html[dir="rtl"] ::-webkit-scrollbar-thumb {
    background: var(--h-text-muted, #94a3b8);
    border-radius: 3px;
}

html[dir="rtl"] ::-webkit-scrollbar-thumb:hover {
    background: var(--h-text-secondary, #64748b);
}

/* ─── Nav Tabs/Pills ───────────────────────────────────────────── */
html[dir="rtl"] .nav-pills,
html[dir="rtl"] .nav-tabs {
    flex-direction: row-reverse;
}

/* ─── Close Button ─────────────────────────────────────────────── */
html[dir="rtl"] .btn-close {
    margin-left: 0;
    margin-right: auto;
}

/* ─── Progress Bar ─────────────────────────────────────────────── */
html[dir="rtl"] .progress {
    direction: ltr;
}

/* ─── Accordion ────────────────────────────────────────────────── */
html[dir="rtl"] .accordion-button::after {
    margin-right: auto;
    margin-left: 0;
}

/* ─── Toast ────────────────────────────────────────────────────── */
html[dir="rtl"] .toast-container.position-fixed.end-0 {
    right: auto !important;
    left: 0 !important;
}

/* ─── Back to Site ─────────────────────────────────────────────── */
html[dir="rtl"] .back-to-site {
    text-align: right;
}

html[dir="rtl"] .back-to-site .bi {
    transform: scaleX(-1);
}

/* ─── Stat Box RTL ─────────────────────────────────────────────── */
html[dir="rtl"] .stat-box {
    border-right: none;
    border-left: 1px solid var(--h-border, #e2e8f0);
}

html[dir="rtl"] .stat-box:last-child {
    border-left: none;
}

/* ─── Stat Card RTL ────────────────────────────────────────────── */
html[dir="rtl"] .stat-card,
html[dir="rtl"] .stats-card,
html[dir="rtl"] .stats-mini-card {
    flex-direction: row-reverse;
    text-align: right;
}