/* ============================================================================
   ARVEA V2 - RTL (Right-to-Left) Support for Arabic
   ============================================================================
   Purpose: RTL layout styles for Arabic language support
   Usage: Include this stylesheet when lang="ar" is detected
   ============================================================================ */

/* ============================================================================
   GLOBAL RTL DIRECTION
   ============================================================================ */

html[lang="ar"],
html[dir="rtl"],
.rtl {
    direction: rtl;
    text-align: right;
}

/* Reset text alignment for specific elements */
html[lang="ar"] body,
html[dir="rtl"] body,
.rtl body {
    text-align: right;
}

/* ============================================================================
   ARABIC FONTS
   ============================================================================ */

/* Import Arabic-optimized fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');

/* Apply Arabic fonts when RTL is active */
html[lang="ar"],
html[lang="ar"] body,
.rtl {
    font-family: 'Cairo', 'Noto Sans Arabic', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

/* ============================================================================
   LAYOUT & SPACING (Logical Properties)
   ============================================================================ */

/* Use logical properties for RTL compatibility */
html[lang="ar"] .container,
.rtl .container {
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
}

/* Flexbox direction reversal */
html[lang="ar"] .flex-row,
.rtl .flex-row {
    flex-direction: row-reverse;
}

/* Grid RTL support */
html[lang="ar"] .grid,
.rtl .grid {
    direction: rtl;
}

/* ============================================================================
   NAVIGATION & HEADER
   ============================================================================ */

html[lang="ar"] .header,
.rtl .header {
    direction: rtl;
}

html[lang="ar"] .nav,
html[lang="ar"] .menu,
.rtl .nav,
.rtl .menu {
    flex-direction: row-reverse;
}

html[lang="ar"] .nav li,
html[lang="ar"] .menu li,
.rtl .nav li,
.rtl .menu li {
    margin-inline-start: 1rem;
    margin-inline-end: 0;
}

/* Logo positioning */
html[lang="ar"] .logo,
.rtl .logo {
    flex-direction: row-reverse;
}

/* Header right/left swap */
html[lang="ar"] .header-right,
.rtl .header-right {
    margin-inline-start: 0;
    margin-inline-end: auto;
}

/* ============================================================================
   FORMS & INPUTS
   ============================================================================ */

html[lang="ar"] input[type="text"],
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="password"],
html[lang="ar"] input[type="search"],
html[lang="ar"] textarea,
html[lang="ar"] select,
.rtl input[type="text"],
.rtl input[type="email"],
.rtl input[type="password"],
.rtl input[type="search"],
.rtl textarea,
.rtl select {
    text-align: right;
    direction: rtl;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
}

/* Input with icons */
html[lang="ar"] .input-group .icon,
.rtl .input-group .icon {
    left: auto;
    right: 0.75rem;
}

html[lang="ar"] .input-group input,
.rtl .input-group input {
    padding-inline-start: 2.5rem;
    padding-inline-end: 1rem;
}

/* Search box RTL */
html[lang="ar"] .search-box,
.rtl .search-box {
    direction: rtl;
}

html[lang="ar"] .search-box input,
.rtl .search-box input {
    padding-inline-start: 3rem;
    padding-inline-end: 1rem;
}

html[lang="ar"] .search-box .search-icon,
.rtl .search-box .search-icon {
    left: auto;
    right: 1rem;
}

/* ============================================================================
   BUTTONS & ACTIONS
   ============================================================================ */

html[lang="ar"] .btn,
.rtl .btn {
    text-align: center;
}

html[lang="ar"] .btn-icon,
.rtl .btn-icon {
    flex-direction: row-reverse;
}

html[lang="ar"] .btn-icon i,
.rtl .btn-icon i {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* Icon positioning in buttons */
html[lang="ar"] .btn .icon-left,
.rtl .btn .icon-left {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

html[lang="ar"] .btn .icon-right,
.rtl .btn .icon-right {
    margin-inline-start: 0;
    margin-inline-end: 0.5rem;
}

/* ============================================================================
   CARDS & PRODUCT LISTINGS
   ============================================================================ */

html[lang="ar"] .card,
.rtl .card {
    text-align: right;
}

html[lang="ar"] .card-header,
html[lang="ar"] .card-body,
html[lang="ar"] .card-footer,
.rtl .card-header,
.rtl .card-body,
.rtl .card-footer {
    text-align: right;
}

/* Product cards */
html[lang="ar"] .product-card,
.rtl .product-card {
    direction: rtl;
}

html[lang="ar"] .product-badge,
.rtl .product-badge {
    left: auto;
    right: 0.5rem;
}

html[lang="ar"] .product-price,
.rtl .product-price {
    flex-direction: row-reverse;
}

/* Discount badge positioning */
html[lang="ar"] .discount-badge,
.rtl .discount-badge {
    left: auto;
    right: 0.5rem;
}

/* ============================================================================
   TABLES
   ============================================================================ */

html[lang="ar"] table,
.rtl table {
    direction: rtl;
}

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

html[lang="ar"] th:first-child,
html[lang="ar"] td:first-child,
.rtl th:first-child,
.rtl td:first-child {
    border-top-right-radius: 0.5rem;
    border-top-left-radius: 0;
}

/* ============================================================================
   MODALS & DROPDOWNS
   ============================================================================ */

html[lang="ar"] .modal-content,
.rtl .modal-content {
    text-align: right;
    direction: rtl;
}

html[lang="ar"] .dropdown-menu,
.rtl .dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
}

html[lang="ar"] .dropdown-item,
.rtl .dropdown-item {
    text-align: right;
    padding-inline-start: 1.5rem;
    padding-inline-end: 1rem;
}

/* ============================================================================
   ALERTS & NOTIFICATIONS
   ============================================================================ */

html[lang="ar"] .alert,
.rtl .alert {
    text-align: right;
    direction: rtl;
}

html[lang="ar"] .alert-icon,
.rtl .alert-icon {
    margin-inline-start: 0.75rem;
    margin-inline-end: 0;
}

html[lang="ar"] .notification,
.rtl .notification {
    direction: rtl;
    text-align: right;
}

/* Toast notifications */
html[lang="ar"] .toast,
.rtl .toast {
    left: auto;
    right: 1rem;
}

/* ============================================================================
   BREADCRUMBS
   ============================================================================ */

html[lang="ar"] .breadcrumb,
.rtl .breadcrumb {
    flex-direction: row-reverse;
}

html[lang="ar"] .breadcrumb-item::before,
.rtl .breadcrumb-item::before {
    content: "\\";
    padding-inline-start: 0.5rem;
    padding-inline-end: 0;
}

/* ============================================================================
   LISTS
   ============================================================================ */

html[lang="ar"] ul,
html[lang="ar"] ol,
.rtl ul,
.rtl ol {
    padding-inline-start: 0;
    padding-inline-end: 2rem;
}

html[lang="ar"] li,
.rtl li {
    text-align: right;
}

/* ============================================================================
   CHARTS & GRAPHS
   ============================================================================ */

html[lang="ar"] .chart-container,
.rtl .chart-container {
    direction: ltr; /* Charts usually need LTR */
}

html[lang="ar"] .chart-legend,
.rtl .chart-legend {
    direction: rtl;
    text-align: right;
}

/* ============================================================================
   SIDEBAR
   ============================================================================ */

html[lang="ar"] .sidebar,
.rtl .sidebar {
    left: auto;
    right: 0;
    border-left: 1px solid var(--border, #e5e7eb);
    border-right: none;
}

html[lang="ar"] .sidebar.collapsed,
.rtl .sidebar.collapsed {
    transform: translateX(100%);
}

html[lang="ar"] .sidebar-toggle,
.rtl .sidebar-toggle {
    left: 0;
    right: auto;
}

/* ============================================================================
   PAGINATION
   ============================================================================ */

html[lang="ar"] .pagination,
.rtl .pagination {
    flex-direction: row-reverse;
}

/* ============================================================================
   BADGES & TAGS
   ============================================================================ */

html[lang="ar"] .badge,
html[lang="ar"] .tag,
.rtl .badge,
.rtl .tag {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* ============================================================================
   TOOLTIPS
   ============================================================================ */

html[lang="ar"] .tooltip,
.rtl .tooltip {
    text-align: center; /* Tooltips usually centered */
}

/* ============================================================================
   PROGRESS BARS
   ============================================================================ */

html[lang="ar"] .progress,
.rtl .progress {
    direction: ltr; /* Progress bars should fill left-to-right */
}

html[lang="ar"] .progress-label,
.rtl .progress-label {
    direction: rtl;
    text-align: right;
}

/* ============================================================================
   DASHBOARD SPECIFIC
   ============================================================================ */

/* Stats cards */
html[lang="ar"] .stat-card,
.rtl .stat-card {
    direction: rtl;
}

html[lang="ar"] .stat-icon,
.rtl .stat-icon {
    margin-inline-start: 1rem;
    margin-inline-end: 0;
}

/* Commission summary */
html[lang="ar"] .commission-card,
.rtl .commission-card {
    text-align: right;
}

/* Partner tree */
html[lang="ar"] .tree-node,
.rtl .tree-node {
    direction: rtl;
}

html[lang="ar"] .tree-connector,
.rtl .tree-connector {
    transform: scaleX(-1);
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

/* Text alignment utilities */
html[lang="ar"] .text-left,
.rtl .text-left {
    text-align: right !important;
}

html[lang="ar"] .text-right,
.rtl .text-right {
    text-align: left !important;
}

/* Float utilities */
html[lang="ar"] .float-left,
.rtl .float-left {
    float: right !important;
}

html[lang="ar"] .float-right,
.rtl .float-right {
    float: left !important;
}

/* Margin utilities (swap left/right) */
html[lang="ar"] .ml-1,
.rtl .ml-1 {
    margin-inline-start: 0.25rem !important;
}

html[lang="ar"] .mr-1,
.rtl .mr-1 {
    margin-inline-end: 0.25rem !important;
}

html[lang="ar"] .ml-2,
.rtl .ml-2 {
    margin-inline-start: 0.5rem !important;
}

html[lang="ar"] .mr-2,
.rtl .mr-2 {
    margin-inline-end: 0.5rem !important;
}

html[lang="ar"] .ml-3,
.rtl .ml-3 {
    margin-inline-start: 1rem !important;
}

html[lang="ar"] .mr-3,
.rtl .mr-3 {
    margin-inline-end: 1rem !important;
}

/* Padding utilities (swap left/right) */
html[lang="ar"] .pl-1,
.rtl .pl-1 {
    padding-inline-start: 0.25rem !important;
}

html[lang="ar"] .pr-1,
.rtl .pr-1 {
    padding-inline-end: 0.25rem !important;
}

html[lang="ar"] .pl-2,
.rtl .pl-2 {
    padding-inline-start: 0.5rem !important;
}

html[lang="ar"] .pr-2,
.rtl .pr-2 {
    padding-inline-end: 0.5rem !important;
}

html[lang="ar"] .pl-3,
.rtl .pl-3 {
    padding-inline-start: 1rem !important;
}

html[lang="ar"] .pr-3,
.rtl .pr-3 {
    padding-inline-end: 1rem !important;
}

/* ============================================================================
   ICON FLIPPING FOR RTL
   ============================================================================ */

/* Flip directional icons in RTL */
html[lang="ar"] .fa-chevron-left::before,
.rtl .fa-chevron-left::before {
    content: "\f054"; /* chevron-right */
}

html[lang="ar"] .fa-chevron-right::before,
.rtl .fa-chevron-right::before {
    content: "\f053"; /* chevron-left */
}

html[lang="ar"] .fa-arrow-left::before,
.rtl .fa-arrow-left::before {
    content: "\f061"; /* arrow-right */
}

html[lang="ar"] .fa-arrow-right::before,
.rtl .fa-arrow-right::before {
    content: "\f060"; /* arrow-left */
}

/* Alternative: Transform approach for icons */
html[lang="ar"] .flip-rtl,
.rtl .flip-rtl {
    transform: scaleX(-1);
    display: inline-block;
}

/* ============================================================================
   RESPONSIVE RTL
   ============================================================================ */

@media (max-width: 768px) {
    html[lang="ar"] .mobile-menu,
    .rtl .mobile-menu {
        right: 0;
        left: auto;
    }

    html[lang="ar"] .mobile-sidebar,
    .rtl .mobile-sidebar {
        right: 0;
        left: auto;
        transform: translateX(100%);
    }

    html[lang="ar"] .mobile-sidebar.open,
    .rtl .mobile-sidebar.open {
        transform: translateX(0);
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Ensure proper reading order for screen readers */
html[lang="ar"] [aria-label],
.rtl [aria-label] {
    direction: rtl;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    html[lang="ar"],
    .rtl {
        direction: rtl;
        text-align: right;
    }
}

/* ============================================================================
   END OF RTL STYLES
   ============================================================================ */