/**
 * RTL CSS Overrides for Stock Tafeil
 * 
 * This stylesheet contains RTL-specific overrides for proper
 * Right-to-Left language support (Arabic, Hebrew, etc.)
 * 
 * Loaded conditionally when RTL locale is active
 */

/* ===================================
   0. GLOBAL RTL FIXES
   =================================== */

/* Hide HORIZONTAL scrollbar specifically while keeping content accessible */

/* Firefox - hide scrollbar */
[dir="rtl"] html,
[dir="rtl"] body {
    scrollbar-width: none;
}

/* WebKit (Chrome, Safari, Edge) - hide horizontal scrollbar */
[dir="rtl"] html::-webkit-scrollbar:horizontal,
[dir="rtl"] body::-webkit-scrollbar:horizontal {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    background: transparent !important;
}

/* Fallback: hide all scrollbars on html/body for RTL */
[dir="rtl"]::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
}

/* IE/Edge legacy */
[dir="rtl"] html,
[dir="rtl"] body {
    -ms-overflow-style: none;
}

/* 
 * ROOT CAUSE FIX (found via browser DevTools):
 * 
 * PROBLEM: Double 260px offset causing horizontal overflow
 * - .layout-page has padding-right: 260px (from vendor RTL CSS)
 * - .content-wrapper ALSO has margin-right: 260px (from somewhere)
 * - Total: 520px offset, pushing content 260px to the left (negative space)
 * - This creates exactly 260px horizontal overflow (sidebar width)
 *
 * SOLUTION: Remove the duplicate margin from content-wrapper
 */

/* Fix: Remove double offset on content-wrapper */
[dir="rtl"] .layout-menu-fixed .content-wrapper,
[dir="rtl"] .layout-menu-fixed-offcanvas .content-wrapper {
    margin-right: 0 !important;
    margin-left: 0 !important;
}


/* Table-responsive must constrain tables within cards */
[dir="rtl"] .table-responsive {
    max-width: 100%;
    overflow-x: auto;
}

[dir="rtl"] .dataTables_wrapper {
    max-width: 100%;
    overflow-x: auto;
}

/* Chart container constraints */
[dir="rtl"] #downloadHistoryChart {
    max-width: 100%;
    overflow-x: hidden;
}


/* ===================================
   0.1 NAVBAR DROPDOWNS RTL FIX
   =================================== */

/* User profile dropdown - position correctly in RTL */
[dir="rtl"] .navbar-nav .dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

/* Ensure dropdown stays within viewport */
[dir="rtl"] .dropdown-menu-end {
    left: 0 !important;
    right: auto !important;
}

/* Language dropdown - same fix */
[dir="rtl"] .dropdown-language .dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

/* Prevent dropdown from going off-screen */
[dir="rtl"] .dropdown-user .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    transform: none !important;
}


/* ===================================
   1. TYPOGRAPHY & FONTS
   =================================== */


/* Use Cairo font for Arabic/RTL languages */
[dir="rtl"] body,
[dir="rtl"] .h1,
[dir="rtl"] .h2,
[dir="rtl"] .h3,
[dir="rtl"] .h4,
[dir="rtl"] .h5,
[dir="rtl"] .h6,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: 'Cairo', 'Public Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Optimize Arabic text rendering */
[dir="rtl"] {
    font-feature-settings: "liga" 1, "calt" 1;
    letter-spacing: 0;
}

/* ===================================
   1. SIDEBAR & NAVIGATION
   =================================== */

/* Sidebar menu icons - move to right side in RTL */
[dir="rtl"] .menu-link .svg-icon,
[dir="rtl"] .menu-link .menu-icon {
    margin-left: 10px;
    margin-right: 0;
}

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

/* Submenu indentation */
[dir="rtl"] .menu-sub {
    padding-right: 0;
    padding-left: 0;
}

/* Menu toggle icon rotation for RTL */
[dir="rtl"] .menu-toggle::after {
    transform: rotate(180deg);
}

/* Layout menu toggle button */
[dir="rtl"] .layout-menu-toggle {
    left: auto;
    right: 0;
}

/* ===================================
   2. DROPDOWNS & MODALS
   =================================== */

/* Dropdown menus alignment - position left in RTL to stay in viewport */
[dir="rtl"] .dropdown-menu {
    left: 0 !important;
    right: auto !important;
    text-align: right;
}

/* Dropdown user menu - stay within viewport */
[dir="rtl"] .dropdown-user .dropdown-menu {
    left: 0 !important;
    right: auto !important;
}

/* Modal dialog alignment */
[dir="rtl"] .modal-header .btn-close {
    margin-left: 0;
    margin-right: auto;
}

/* ===================================
   3. FORMS & INPUTS
   =================================== */

/* Input groups - reverse order for RTL */
[dir="rtl"] .input-group-text {
    border-radius: 0 0.375rem 0.375rem 0;
}

[dir="rtl"] .input-group .form-control:not(:last-child) {
    border-radius: 0.375rem 0 0 0.375rem;
}

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

/* Checkbox and radio alignment */
[dir="rtl"] .form-check {
    padding-left: 0;
    padding-right: 1.5em;
}

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

/* ===================================
   4. BUTTONS & BADGES
   =================================== */

/* Button icons */
[dir="rtl"] .btn .bx,
[dir="rtl"] .btn .fas,
[dir="rtl"] .btn .far {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Badge positioning */
[dir="rtl"] .badge {
    margin-left: 0;
    margin-right: 0.25rem;
}

/* ===================================
   5. CARDS & PANELS
   =================================== */

/* Card headers */
[dir="rtl"] .card-header {
    text-align: right;
}

/* Card actions */
[dir="rtl"] .card-actions {
    left: 1rem;
    right: auto;
}

/* ===================================
   6. TABLES
   =================================== */

/* Table alignment */
[dir="rtl"] .table {
    text-align: right;
}

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

/* DataTables specific */
[dir="rtl"] .dataTables_wrapper .dataTables_filter {
    text-align: left;
}

[dir="rtl"] .dataTables_wrapper .dataTables_paginate {
    text-align: left;
}

/* ===================================
   7. ALERTS & TOASTS
   =================================== */

/* Alert icons */
[dir="rtl"] .alert .alert-icon {
    left: auto;
    right: 1rem;
}

/* Toast positioning */
[dir="rtl"] .toast {
    left: auto;
    right: 1rem;
}

/* Swal2 (SweetAlert2) RTL support */
[dir="rtl"] .swal2-popup {
    text-align: right;
}

[dir="rtl"] .swal2-icon {
    margin-left: auto;
    margin-right: auto;
}

/* ===================================
   8. BREADCRUMBS & PAGINATION
   =================================== */

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

/* Pagination alignment */
[dir="rtl"] .pagination {
    direction: rtl;
}

/* ===================================
   9. AUTHENTICATION PAGES
   =================================== */

/* Login/Register forms */
[dir="rtl"] .authentication-wrapper .authentication-inner {
    text-align: right;
}

/* Password toggle icon */
[dir="rtl"] .input-group-merge .input-group-text {
    left: 0;
    right: auto;
}

/* ===================================
   10. DASHBOARD SPECIFIC
   =================================== */

/* Stats cards */
[dir="rtl"] .card-statistics .statistics-body {
    text-align: right;
}

/* Icon positioning in stat cards */
[dir="rtl"] .card-statistics .avatar {
    float: left;
    margin-left: 1rem;
    margin-right: 0;
}

/* ===================================
   11. UTILITY CLASSES
   =================================== */

/* Float direction */
[dir="rtl"] .float-start {
    float: right !important;
}

[dir="rtl"] .float-end {
    float: left !important;
}

/* Text alignment utilities */
[dir="rtl"] .text-start {
    text-align: right !important;
}

[dir="rtl"] .text-end {
    text-align: left !important;
}

/* Margin utilities - swap left/right */
[dir="rtl"] .ms-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

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

/* ===================================
   12. ICONS & SVG
   =================================== */

/* Chevron icons - rotate for RTL */
[dir="rtl"] .bx-chevron-right::before {
    content: "\ea64";
    /* chevron-left */
}

[dir="rtl"] .bx-chevron-left::before {
    content: "\ea5c";
    /* chevron-right */
}

/* Arrow rotation */
[dir="rtl"] .bx-right-arrow-alt::before {
    transform: scaleX(-1);
}

/* ===================================
   13. LAYOUT & POSITIONING
   =================================== */

/* Content wrapper - DO NOT add margin-right here!
 * The vendor RTL CSS uses padding-right on .layout-page to create sidebar space.
 * Adding margin-right here causes double offset (260px + 260px = 520px)
 */
[dir="rtl"] .content-wrapper {
    margin-left: 0;
    margin-right: 0;
    /* Changed from 260px - vendor CSS handles this via layout-page padding */
}

@media (max-width: 1199.98px) {
    [dir="rtl"] .content-wrapper {
        margin-right: 0;
    }
}


/* Overlay positioning */
[dir="rtl"] .layout-overlay {
    left: 0;
    right: 260px;
}

/* ===================================
   14. SPECIFIC COMPONENTS
   =================================== */

/* Avatar with text */
[dir="rtl"] .avatar+.flex-grow-1 {
    margin-left: 0;
    margin-right: 0.75rem;
}

/* Service/product cards */
[dir="rtl"] .product-img-div {
    text-align: right;
}

/* Download history icons */
[dir="rtl"] .download-icon {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* NEW badge positioning */
[dir="rtl"] .menu-title+span[style*="margin-left"] {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* ===================================
   15. RESPONSIVE RTL FIXES
   =================================== */

@media (max-width: 991.98px) {

    /* Mobile sidebar */
    [dir="rtl"] .layout-menu {
        right: 0;
        left: auto;
        transform: translateX(100%);
    }

    [dir="rtl"] .layout-menu.active {
        transform: translateX(0);
    }
}

/* ===================================
   16. PRINT STYLES
   =================================== */

@media print {
    [dir="rtl"] .page-break {
        page-break-after: always;
        direction: rtl;
    }
}

/* ===================================
   17. REIMAGINED DASHBOARD RTL
   =================================== */

[dir="rtl"] .sidebar-rail {
    left: auto;
    right: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    border-right: none;
}

[dir="rtl"] .reimagined-main {
    margin-left: 0;
    margin-right: 72px;
}

[dir="rtl"] .sidebar-rail .nav-item.active::before {
    left: auto;
    right: -12px;
    border-radius: 4px 0 0 4px;
}

[dir="rtl"] .topbar-left h1 small {
    margin-left: 0;
    margin-right: 8px;
}

[dir="rtl"] .paste-btn {
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.04);
}

@media (max-width: 768px) {
    [dir="rtl"] .sidebar-rail {
        left: auto;
        right: -260px;
    }

    [dir="rtl"] .sidebar-rail.open {
        right: 0;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5);
    }

    [dir="rtl"] .reimagined-main {
        margin-right: 0;
    }

    [dir="rtl"] .history-table-wrap {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ===================================
   18. HISTORY TABLE RTL FIX
   =================================== */

/* Fix header alignment — override the hardcoded text-align:left */
[dir="rtl"] .history-table thead th {
    text-align: right;
}

[dir="rtl"] .history-table tbody td {
    text-align: right;
}

/* Section header RTL — DOM order is swapped in Blade for RTL */
[dir="rtl"] .section-header h3 {
    text-align: right;
}

/* Order History: h3 is the only child — anchor to the right */
[dir="rtl"] .section-header h3:only-child {
    width: 100%;
    justify-content: flex-end;
}

/* Tab bar: internal direction */
[dir="rtl"] .tab-bar {
    direction: rtl;
}

/* Pagination info and buttons: swap sides */
[dir="rtl"] .history-pagination {
    flex-direction: row-reverse;
}

/* Pagination buttons chevron direction already swapped by icon rules */

/* Order history table - same fix */
[dir="rtl"] .history-table th,
[dir="rtl"] .history-table td {
    text-align: right;
}

/* ===================================
   19. ADMIN DASHBOARD RTL FIXES
   =================================== */

/* Admin tables — Bootstrap .table th defaults to no alignment;
   in RTL they render LTR. Force right alignment. */
[dir="rtl"] .table th {
    text-align: right !important;
}

[dir="rtl"] .table td {
    text-align: right !important;
}

/* ApexCharts canvas container — ensure it doesn't overflow in RTL */
[dir="rtl"] #downloadHistoryChart {
    direction: ltr;
    /* ApexCharts renders SVG; SVG needs LTR coordinate space */
    text-align: left;
}

/* ApexCharts tooltip — RTL text inside tooltip */
[dir="rtl"] .apexcharts-tooltip {
    direction: rtl;
    text-align: right;
}

/* ApexCharts legend — align items to right */
[dir="rtl"] .apexcharts-legend {
    direction: rtl;
    justify-content: flex-end;
}