/**
 * Direction Support CSS - RTL/LTR
 * This file provides utilities for bidirectional text support
 * Used when switching between Arabic (RTL) and English (LTR)
 */

/* ==========================================================================
   Base Direction Settings
   ========================================================================== */

/* When page direction is RTL (Arabic) */
html[dir="rtl"] {
    /* Text alignment */
    .text-start { text-align: right !important; }
    .text-end { text-align: left !important; }
    
    /* Margins */
    .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
    .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
    .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
    .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
    .me-5 { margin-left: 3rem !important; margin-right: 0 !important; }
    
    .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
    .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
    .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
    .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
    .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; }
    
    /* Paddings */
    .pe-1 { padding-left: 0.25rem !important; padding-right: 0 !important; }
    .pe-2 { padding-left: 0.5rem !important; padding-right: 0 !important; }
    .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; }
    .pe-4 { padding-left: 1.5rem !important; padding-right: 0 !important; }
    .pe-5 { padding-left: 3rem !important; padding-right: 0 !important; }
    
    .ps-1 { padding-right: 0.25rem !important; padding-left: 0 !important; }
    .ps-2 { padding-right: 0.5rem !important; padding-left: 0 !important; }
    .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; }
    .ps-4 { padding-right: 1.5rem !important; padding-left: 0 !important; }
    .ps-5 { padding-right: 3rem !important; padding-left: 0 !important; }
    
    /* Float */
    .float-start { float: right !important; }
    .float-end { float: left !important; }
    
    /* Border radius */
    .rounded-start { border-radius: 0 0.25rem 0.25rem 0 !important; }
    .rounded-end { border-radius: 0.25rem 0 0 0.25rem !important; }
    
    /* Border width */
    .border-start { border-left: 0 !important; border-right: 1px solid #dee2e6 !important; }
    .border-end { border-right: 0 !important; border-left: 1px solid #dee2e6 !important; }
}

/* When page direction is LTR (English) - Default Bootstrap behavior */
html[dir="ltr"] {
    /* Text alignment - Bootstrap default */
    .text-start { text-align: left !important; }
    .text-end { text-align: right !important; }
}

/* ==========================================================================
   Form Controls Direction Support
   ========================================================================== */

/* Input fields should respect direction */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
}

html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select {
    text-align: left;
}

/* Placeholder text alignment */
html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
    text-align: right;
}

html[dir="ltr"] input::placeholder,
html[dir="ltr"] textarea::placeholder {
    text-align: left;
}

/* ==========================================================================
   Icon Spacing Direction Support
   ========================================================================== */

/* RTL: Icon before text (Icon on right) */
html[dir="rtl"] .icon-before-text {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* LTR: Icon before text (Icon on left) */
html[dir="ltr"] .icon-before-text {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* RTL: Icon after text (Icon on left) */
html[dir="rtl"] .icon-after-text {
    margin-right: 0.5rem;
    margin-left: 0;
}

/* LTR: Icon after text (Icon on right) */
html[dir="ltr"] .icon-after-text {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* ==========================================================================
   Navigation Direction Support
   ========================================================================== */

/* Dashboard wrapper flex direction */
html[dir="rtl"] .dashboard-wrapper,
html[dir="rtl"] .customer-wrapper {
    flex-direction: row !important;
}

html[dir="ltr"] .dashboard-wrapper,
html[dir="ltr"] .customer-wrapper {
    flex-direction: row !important;
}

/* Sidebar position - Override admin-dashboard.css */
html[dir="rtl"] .sidebar,
html[dir="rtl"] .customer-sidebar {
    right: 0 !important;
    left: auto !important;
    border-left: 1px solid var(--border-color, #e2e8f0) !important;
    border-right: none !important;
}

html[dir="ltr"] .sidebar,
html[dir="ltr"] .customer-sidebar {
    left: 0 !important;
    right: auto !important;
    border-right: 1px solid var(--border-color, #e2e8f0) !important;
    border-left: none !important;
}

/* Main content margin for sidebar - Override admin-dashboard.css - HIGH SPECIFICITY */
html[dir="rtl"] body .main-content,
html[dir="rtl"] body .customer-main,
html[dir="rtl"] .dashboard-wrapper .main-content {
    margin-right: 280px !important;
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 280px !important;
}

html[dir="ltr"] body .main-content,
html[dir="ltr"] body .customer-main,
html[dir="ltr"] .dashboard-wrapper .main-content {
    margin-left: 280px !important;
    margin-right: 0 !important;
    margin-inline-start: 280px !important;
    margin-inline-end: 0 !important;
}

/* Sidebar collapsed state - HIGH SPECIFICITY */
html[dir="rtl"] body .main-content.sidebar-collapsed,
html[dir="rtl"] .dashboard-wrapper .main-content.sidebar-collapsed {
    margin-right: 80px !important;
    margin-left: 0 !important;
}

html[dir="ltr"] body .main-content.sidebar-collapsed,
html[dir="ltr"] .dashboard-wrapper .main-content.sidebar-collapsed {
    margin-left: 80px !important;
    margin-right: 0 !important;
}

/* Mobile sidebar - Reset margins - HIGH SPECIFICITY */
@media (max-width: 991.98px) {
    html[dir="rtl"] .sidebar,
    html[dir="ltr"] .sidebar {
        right: 0 !important;
        left: auto !important;
        transform: translateX(100%);
    }
    
    html[dir="rtl"] .sidebar.open,
    html[dir="ltr"] .sidebar.open {
        transform: translateX(0);
    }
    
    /* Reset all margins on mobile - use body prefix for higher specificity */
    html[dir="rtl"] body .main-content,
    html[dir="rtl"] body .customer-main,
    html[dir="ltr"] body .main-content,
    html[dir="ltr"] body .customer-main {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
    }
    
    /* Reset collapsed margins on mobile */
    html[dir="rtl"] body .main-content.sidebar-collapsed,
    html[dir="ltr"] body .main-content.sidebar-collapsed {
        margin-right: 0 !important;
        margin-left: 0 !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
    }
}

/* ==========================================================================
   Table Direction Support
   ========================================================================== */

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

html[dir="ltr"] th,
html[dir="ltr"] td {
    text-align: left;
}

/* ==========================================================================
   Dropdown Direction Support
   ========================================================================== */

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

html[dir="ltr"] .dropdown-menu {
    text-align: left;
}

/* ==========================================================================
   Alert Direction Support
   ========================================================================== */

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

html[dir="ltr"] .alert-dismissible .btn-close {
    right: 1rem;
    left: auto;
}

/* ==========================================================================
   Card Direction Support
   ========================================================================== */

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

html[dir="ltr"] .card-title,
html[dir="ltr"] .card-text {
    text-align: left;
}

/* ==========================================================================
   Language-specific Font Loading
   ========================================================================== */

/* Arabic font family - loaded when RTL */
html[dir="rtl"] body {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* English font family - loaded when LTR */
html[dir="ltr"] body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* ==========================================================================
   Sidebar Menu Direction Support
   ========================================================================== */

/* Menu badge alignment */
html[dir="rtl"] .menu-badge {
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[dir="ltr"] .menu-badge {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Menu item text alignment */
html[dir="rtl"] .menu-item {
    text-align: right !important;
}

html[dir="ltr"] .menu-item {
    text-align: left !important;
}

/* Sidebar collapse toggle position */
html[dir="rtl"] .sidebar-collapse-toggle {
    left: -12px !important;
    right: auto !important;
}

html[dir="ltr"] .sidebar-collapse-toggle {
    right: -12px !important;
    left: auto !important;
}

/* ==========================================================================
   Breadcrumb Direction Support
   ========================================================================== */

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

html[dir="ltr"] .breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: 0.5rem;
    padding-left: 0;
}

/* ==========================================================================
   Modal Direction Support
   ========================================================================== */

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

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

/* ==========================================================================
   Pagination Direction Support
   ========================================================================== */

html[dir="rtl"] .pagination {
    padding-right: 0;
}

/* ==========================================================================
   List Group Direction Support
   ========================================================================== */

html[dir="rtl"] .list-group {
    padding-right: 0;
}

/* ==========================================================================
   Header Direction Support
   ========================================================================== */

/* Header search alignment */
html[dir="rtl"] .header-search {
    margin-left: auto !important;
    margin-right: 0 !important;
}

html[dir="ltr"] .header-search {
    margin-right: auto !important;
    margin-left: 0 !important;
}

/* Header actions alignment */
html[dir="rtl"] .header-actions {
    margin-right: auto !important;
    margin-left: 0 !important;
}

html[dir="ltr"] .header-actions {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* User dropdown alignment */
html[dir="rtl"] .user-dropdown {
    text-align: right !important;
}

html[dir="ltr"] .user-dropdown {
    text-align: left !important;
}

/* ==========================================================================
   Card and Form Direction Support
   ========================================================================== */

/* Card headers and stats */
html[dir="rtl"] .stat-card,
html[dir="rtl"] .dashboard-card {
    text-align: right !important;
}

html[dir="ltr"] .stat-card,
html[dir="ltr"] .dashboard-card {
    text-align: left !important;
}

/* Form labels alignment */
html[dir="rtl"] .form-label {
    text-align: right !important;
}

html[dir="ltr"] .form-label {
    text-align: left !important;
}

/* ==========================================================================
   Button and Action Direction Support
   ========================================================================== */

/* Button icons spacing */
html[dir="rtl"] .btn i {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

html[dir="ltr"] .btn i {
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

/* Action buttons container */
html[dir="rtl"] .actions-cell,
html[dir="rtl"] .table-actions {
    text-align: left !important;
}

html[dir="ltr"] .actions-cell,
html[dir="ltr"] .table-actions {
    text-align: right !important;
}

/* ==========================================================================
   Offcanvas Direction Support
   ========================================================================== */

html[dir="rtl"] .offcanvas-start {
    right: 0;
    left: auto;
    transform: translateX(100%);
}

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

html[dir="rtl"] .offcanvas-end {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}

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