/* ================================================================
   HeroDrop Dashboard — Arabic RTL Stylesheet
   Style ColiSwift /ar — Palette : #7612e8 violet + #fc5207 orange
   Polices : Changa / Cairo / IBM Plex Mono
================================================================ */

:root {
    --primary-600: #7612e8;
    --primary-500: #882ff0;
    --primary-50: #f4edfe;
    --primary-100: #ebd8fc;
    --accent-orange: #fc5207;
}

/* ── 1. Global Font & Direction ──────────────────────────────── */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, 
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] p, html[lang="ar"] span, html[lang="ar"] a, 
html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea, 
html[lang="ar"] button, html[lang="ar"] table, html[lang="ar"] th, 
html[lang="ar"] td, html[lang="ar"] .sidebar, html[lang="ar"] .navbar-header,
html[lang="ar"] .card, html[lang="ar"] .badge, html[lang="ar"] .breadcrumb,
html[lang="ar"] .swift-table, html[lang="ar"] .cs-kpi-card, html[lang="ar"] .cs-fin-card {
    direction: rtl;
    text-align: right;
    font-family: 'Changa', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ColiSwift Mono numbers font */
html[lang="ar"] .tg-card-value,
html[lang="ar"] .cs-kpi-value,
html[lang="ar"] .cs-fin-amount,
html[lang="ar"] .cs-order-num,
html[lang="ar"] .cs-phone,
html[lang="ar"] .cs-price,
html[lang="ar"] [dir="ltr"],
html[lang="ar"] .ltr-val,
html[lang="ar"] .hd-money-val {
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

/* Inline currency and values: keep on one line without breaking */
.currency-amount {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 4px !important;
    white-space: nowrap !important;
}

/* ── 2. Sidebar in RTL ────────────────────────────────────────── */
html[lang="ar"] .sidebar {
    border-right: none !important;
    border-left: 1px solid rgba(118, 18, 232, 0.12) !important;
    text-align: right;
}

html[lang="ar"] .sidebar-logo {
    border-inline-end: none !important;
    border-left: 1px solid rgba(118, 18, 232, 0.08) !important;
    justify-content: flex-start !important;
}

html[lang="ar"] .sidebar-menu-area {
    border-inline-end: none !important;
    border-left: 1px solid rgba(118, 18, 232, 0.08) !important;
}

html[lang="ar"] .sidebar-menu-group-title {
    text-align: right !important;
    padding-right: 18px !important;
    padding-left: 0 !important;
    color: #7612e8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}

html[lang="ar"] .sidebar-menu > li > a {
    text-align: right !important;
    padding: 10px 18px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 8px !important;
}

html[lang="ar"] .sidebar-menu > li > a .menu-icon {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

html[lang="ar"] .sidebar-submenu {
    padding-right: 42px !important;
    padding-left: 14px !important;
    text-align: right !important;
}

html[lang="ar"] .sidebar-submenu li a {
    text-align: right !important;
    font-size: 13px !important;
}

html[lang="ar"] .sidebar-submenu li a i.circle-icon {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

/* ColiSwift Sleek Violet Pill for Active Sidebar Item */
html[lang="ar"] .sidebar .active > a,
html[lang="ar"] .sidebar li.active > a,
html[lang="ar"] .sidebar-menu li.active > a {
    background: #f4edfe !important;
    color: #7612e8 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

html[lang="ar"] .sidebar .active > a .menu-icon,
html[lang="ar"] .sidebar li.active > a .menu-icon,
html[lang="ar"] .sidebar-menu li.active > a .menu-icon {
    color: #7612e8 !important;
}

/* ── 3. Navbar in RTL ─────────────────────────────────────────── */
html[lang="ar"] .navbar-header {
    border-bottom: 1px solid rgba(118, 18, 232, 0.08);
}

html[lang="ar"] .navbar-search input {
    text-align: right !important;
    direction: rtl !important;
    padding-right: 54px !important;
    padding-left: 18px !important;
    border-radius: 999px !important;
}

html[lang="ar"] .navbar-search-icon-wrap {
    right: 18px !important;
    left: auto !important;
}

/* ── 4. Dropdown Menu RTL ─────────────────────────────────────── */
html[lang="ar"] .dropdown-menu {
    text-align: right !important;
}

html[lang="ar"] .dropdown-menu.to-top {
    right: 0 !important;
    left: auto !important;
}

html[lang="ar"] .navbar-header .dropdown-menu,
html[lang="ar"] .navbar-header .dropdown-menu.to-top,
html[lang="ar"] .navbar-dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

html[lang="ar"] .dropdown-item {
    text-align: right !important;
}

/* ── 5. Spacing Utilities Inversion for RTL ───────────────────── */
html[lang="ar"] .me-8  { margin-right: 0 !important; margin-left: 8px !important; }
html[lang="ar"] .me-12 { margin-right: 0 !important; margin-left: 12px !important; }
html[lang="ar"] .me-16 { margin-right: 0 !important; margin-left: 16px !important; }
html[lang="ar"] .me-20 { margin-right: 0 !important; margin-left: 20px !important; }
html[lang="ar"] .me-24 { margin-right: 0 !important; margin-left: 24px !important; }
html[lang="ar"] .me-40 { margin-right: 0 !important; margin-left: 40px !important; }

html[lang="ar"] .ms-8  { margin-left: 0 !important; margin-right: 8px !important; }
html[lang="ar"] .ms-12 { margin-left: 0 !important; margin-right: 12px !important; }
html[lang="ar"] .ms-16 { margin-left: 0 !important; margin-right: 16px !important; }
html[lang="ar"] .ms-20 { margin-left: 0 !important; margin-right: 20px !important; }
html[lang="ar"] .ms-24 { margin-left: 0 !important; margin-right: 24px !important; }
html[lang="ar"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
html[lang="ar"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }

/* ── 6. SwiftTable in RTL ─────────────────────────────────────── */
html[lang="ar"] .swift-table {
    direction: rtl !important;
}

html[lang="ar"] .swift-table thead th {
    text-align: right !important;
}

html[lang="ar"] .swift-table thead th.num {
    text-align: left !important;
}

html[lang="ar"] .swift-table tbody td {
    text-align: right !important;
}

html[lang="ar"] .swift-table tbody td.num {
    text-align: left !important;
}

/* ── 7. Forms in RTL ──────────────────────────────────────────── */
html[lang="ar"] label {
    text-align: right !important;
    display: block;
}

html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
    text-align: right !important;
    direction: rtl !important;
}

html[lang="ar"] .form-select {
    background-position: left 0.75rem center !important;
    padding-left: 2.25rem !important;
    padding-right: 0.75rem !important;
}

/* ── 8. ColiSwift Purple Theme Accents ────────────────────────── */
html[lang="ar"] .btn-primary,
html[lang="ar"] .bg-primary-600 {
    background-color: #7612e8 !important;
    border-color: #7612e8 !important;
}

html[lang="ar"] .btn-primary:hover {
    background-color: #630dc6 !important;
    border-color: #630dc6 !important;
}

html[lang="ar"] .text-primary-600 {
    color: #7612e8 !important;
}

/* ApexCharts tooltips & labels */
html[lang="ar"] .apexcharts-tooltip {
    direction: rtl !important;
    text-align: right !important;
    font-family: 'Changa', 'Cairo', sans-serif !important;
}
html[lang="ar"] .apexcharts-legend {
    direction: rtl !important;
}
html[lang="ar"] .apexcharts-legend-series {
    margin-left: 16px !important;
    margin-right: 0 !important;
}

/* ── 9. DataTables in RTL ─────────────────────────────────────── */
html[lang="ar"] .dataTables_wrapper .dataTables_filter {
    text-align: left !important;
    float: left !important;
}

html[lang="ar"] .dataTables_wrapper .dataTables_length {
    text-align: right !important;
    float: right !important;
}

html[lang="ar"] .dataTables_wrapper .dataTables_info {
    text-align: right !important;
    float: right !important;
}

html[lang="ar"] .dataTables_wrapper .dataTables_paginate {
    text-align: left !important;
    float: left !important;
    direction: ltr !important;
}

html[lang="ar"] .table th,
html[lang="ar"] .table td {
    text-align: right;
}

html[lang="ar"] .table th.text-center,
html[lang="ar"] .table td.text-center {
    text-align: center !important;
}

html[lang="ar"] .table th.text-end,
html[lang="ar"] .table td.text-end {
    text-align: left !important;
}

/* Modal headers in RTL */
html[lang="ar"] .modal-header .btn-close {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Breadcrumb in RTL */
html[lang="ar"] .breadcrumb-item + .breadcrumb-item::before {
    float: right !important;
    padding-left: 0.5rem !important;
    padding-right: 0 !important;
}

/* Product Search Input in RTL (HeroDrop Products Header) */
html[lang="ar"] .product-search-wrap .product-search-icon {
    right: 14px !important;
    left: auto !important;
}

html[lang="ar"] .product-search-wrap .product-search-input {
    padding-right: 44px !important;
    padding-left: 16px !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Product Card Title in RTL */
html[lang="ar"] .hd-card-title,
html[lang="ar"] h6.hd-card-title,
html[lang="ar"] .hd-card-title a {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}