/* RTL Styles for DZit - Arabic Language Support */

/* Base RTL Support */
html[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] body {
    font-family: 'Cairo', 'Amiri', 'Noto Sans Arabic', 'Tahoma', Arial, sans-serif;
    direction: rtl;
    text-align: right;
}

/* Typography for Arabic */
html[dir="rtl"] h1, 
html[dir="rtl"] h2, 
html[dir="rtl"] h3, 
html[dir="rtl"] h4, 
html[dir="rtl"] h5, 
html[dir="rtl"] h6 {
    font-family: 'Cairo', 'Amiri', 'Noto Sans Arabic', 'Tahoma', Arial, sans-serif;
    font-weight: 600;
}

/* Navbar RTL */
html[dir="rtl"] .navbar-brand {
    margin-left: 0;
    margin-right: 0;
}

html[dir="rtl"] .navbar-nav {
    margin-left: auto;
    margin-right: 0;
}

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

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

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

html[dir="rtl"] .dropdown-item i {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Sidebar RTL */
html[dir="rtl"] .sidebar {
    right: 0;
    left: auto;
}

html[dir="rtl"] .sidebar .nav-link {
    text-align: right;
    padding-right: 1.5rem;
    padding-left: 1rem;
}

html[dir="rtl"] .sidebar .nav-link i {
    margin-left: 0.75rem;
    margin-right: 0;
    float: right;
}

/* Main Content RTL */
html[dir="rtl"] .main-content {
    margin-right: 250px;
    margin-left: 0;
}

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

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

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

/* Forms RTL */
html[dir="rtl"] .form-label {
    text-align: right;
    display: block;
}

html[dir="rtl"] .form-control:not(.text-center) {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .form-control::placeholder:not(.text-center) {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .input-group .form-control {
    border-radius: 0 6px 6px 0;
}

html[dir="rtl"] .input-group-text {
    border-radius: 6px 0 0 6px;
}

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

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

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

/* Buttons RTL */
html[dir="rtl"] .btn i {
    margin-left: 0.5rem;
    margin-right: 0;
}

html[dir="rtl"] .btn-group .btn:first-child {
    border-radius: 0 6px 6px 0;
}

html[dir="rtl"] .btn-group .btn:last-child {
    border-radius: 6px 0 0 6px;
}

/* Tables RTL */
html[dir="rtl"] .table {
    text-align: right;
}

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

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

html[dir="rtl"] .table-responsive {
    direction: rtl;
}

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

html[dir="rtl"] .page-link {
    text-align: center;
}

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

html[dir="rtl"] .alert i {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Statistics Cards RTL */
html[dir="rtl"] .stat-card {
    text-align: right;
    border-right: 4px solid var(--primary-color);
    border-left: none;
}

html[dir="rtl"] .stat-card.success {
    border-right-color: var(--success-color);
}

html[dir="rtl"] .stat-card.warning {
    border-right-color: var(--warning-color);
}

html[dir="rtl"] .stat-card.danger {
    border-right-color: var(--danger-color);
}

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

/* Upload Area RTL */
html[dir="rtl"] .upload-area {
    text-align: center;
}

html[dir="rtl"] .upload-area p {
    text-align: center;
}

/* File Upload Progress RTL */
html[dir="rtl"] .file-item {
    direction: rtl;
    text-align: right;
}

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

html[dir="rtl"] .file-actions {
    text-align: left;
}

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

/* Modals RTL */
html[dir="rtl"] .modal-header {
    text-align: right;
}

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

html[dir="rtl"] .modal-footer {
    text-align: left;
    direction: ltr;
}

html[dir="rtl"] .modal-footer .btn {
    margin-left: 0.5rem;
    margin-right: 0;
}

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

html[dir="rtl"] .close {
    float: left;
}

/* Badge and Pills RTL */
html[dir="rtl"] .badge {
    direction: rtl;
}

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

/* Breadcrumb RTL */
html[dir="rtl"] .breadcrumb {
    direction: rtl;
}

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

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

html[dir="rtl"] .list-group-item i {
    margin-left: 0.5rem;
    margin-right: 0;
    float: right;
}

/* Progress Bars RTL */
html[dir="rtl"] .progress {
    direction: ltr; /* Keep progress direction LTR for proper animation */
}

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

/* Tooltips and Popovers RTL */
html[dir="rtl"] .tooltip {
    direction: rtl;
}

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

/* Tab Navigation RTL */
html[dir="rtl"] .nav-tabs {
    direction: rtl;
}

html[dir="rtl"] .nav-tabs .nav-link {
    text-align: right;
}

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

/* Accordion RTL */
html[dir="rtl"] .accordion-button {
    text-align: right;
    direction: rtl;
}

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

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

/* Carousel RTL */
html[dir="rtl"] .carousel-control-prev {
    left: auto;
    right: 0;
}

html[dir="rtl"] .carousel-control-next {
    right: auto;
    left: 0;
}

html[dir="rtl"] .carousel-indicators {
    direction: rtl;
}

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

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

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

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

/* Custom Components RTL */

/* Language Switcher */
html[dir="rtl"] .language-switcher {
    direction: rtl;
}

html[dir="rtl"] .language-switcher .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}

/* Search Bar RTL */
html[dir="rtl"] .search-bar {
    direction: rtl;
}

html[dir="rtl"] .search-bar input {
    text-align: right;
    padding-right: 2.5rem;
    padding-left: 1rem;
}

html[dir="rtl"] .search-bar .search-icon {
    right: auto;
    left: 0.75rem;
}

/* Order Status Badges */
html[dir="rtl"] .status-badge {
    direction: rtl;
}

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

/* Image Preview Grid RTL */
html[dir="rtl"] .image-grid {
    direction: rtl;
}

html[dir="rtl"] .image-preview {
    text-align: center;
}

html[dir="rtl"] .image-overlay {
    direction: rtl;
}

html[dir="rtl"] .image-actions {
    text-align: center;
}

/* File Manager RTL */
html[dir="rtl"] .file-manager {
    direction: rtl;
}

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

html[dir="rtl"] .file-tree ul {
    padding-right: 1rem;
    padding-left: 0;
}

html[dir="rtl"] .file-item-icon {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Dashboard Widgets RTL */
html[dir="rtl"] .widget-header {
    text-align: right;
}

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

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

/* Login Form Specific RTL */
html[dir="rtl"] .login-form {
    text-align: right;
}

html[dir="rtl"] .step-indicator {
    direction: rtl;
}

html[dir="rtl"] .otp-input {
    direction: ltr; /* Keep OTP input LTR for number entry */
    text-align: center;
}

/* Admin Panel Specific RTL */
html[dir="rtl"] .admin-sidebar {
    right: 0;
    left: auto;
}

html[dir="rtl"] .admin-content {
    margin-right: 250px;
    margin-left: 0;
}

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

/* Print-specific RTL */
html[dir="rtl"] .print-settings {
    text-align: right;
}

html[dir="rtl"] .print-preview {
    direction: rtl;
}

/* Mobile Responsive RTL */
@media (max-width: 768px) {
    html[dir="rtl"] .navbar-nav {
        text-align: right;
    }
    
    html[dir="rtl"] .sidebar {
        right: -250px;
        left: auto;
    }
    
    html[dir="rtl"] .sidebar.show {
        right: 0;
    }
    
    html[dir="rtl"] .main-content {
        margin-right: 0;
        margin-left: 0;
    }
    
    html[dir="rtl"] .mobile-header {
        text-align: right;
    }
    
    html[dir="rtl"] .mobile-menu-toggle {
        right: auto;
        left: 1rem;
    }
}

@media (max-width: 576px) {
    html[dir="rtl"] .card-body {
        padding: 1rem;
    }
    
    html[dir="rtl"] .stat-card {
        margin-bottom: 1rem;
        text-align: center;
    }
    
    html[dir="rtl"] .btn-group-vertical .btn {
        text-align: right;
    }
    
    html[dir="rtl"] .mobile-table {
        direction: rtl;
    }
    
    html[dir="rtl"] .mobile-table .card {
        text-align: right;
        margin-bottom: 1rem;
    }
}

/* Print Media RTL */
@media print {
    html[dir="rtl"] * {
        direction: rtl;
        text-align: right;
    }
    
    html[dir="rtl"] .print-header {
        text-align: right;
    }
    
    html[dir="rtl"] .print-content {
        direction: rtl;
        text-align: right;
    }
}

/* Dark Mode RTL Support */
@media (prefers-color-scheme: dark) {
    html[dir="rtl"] body {
        direction: rtl;
        text-align: right;
    }
    
    html[dir="rtl"] .card {
        direction: rtl;
    }
    
    html[dir="rtl"] .navbar {
        direction: rtl;
    }
}

/* Animation Adjustments for RTL */
html[dir="rtl"] .slide-in-right {
    animation: slideInLeft 0.3s ease-out;
}

html[dir="rtl"] .slide-in-left {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

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

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

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

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

/* Margin and Padding RTL Utilities */
html[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-5 { margin-left: 3rem !important; margin-right: 0 !important; }

html[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; }

html[dir="rtl"] .pe-1 { padding-left: 0.25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-2 { padding-left: 0.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-4 { padding-left: 1.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-5 { padding-left: 3rem !important; padding-right: 0 !important; }

html[dir="rtl"] .ps-1 { padding-right: 0.25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-2 { padding-right: 0.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-4 { padding-right: 1.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-5 { padding-right: 3rem !important; padding-left: 0 !important; }

/* Special RTL Toggle Icon */
html[dir="rtl"] #toggleIcon {
    left: 1rem;
    right: auto;
}

/* Loading Spinner RTL */
html[dir="rtl"] .spinner-border {
    direction: ltr; /* Keep spinner animation LTR */
}

html[dir="rtl"] .loading-text {
    direction: rtl;
    text-align: center;
}

/* Fix for specific components that need LTR behavior */
html[dir="rtl"] .keep-ltr {
    direction: ltr !important;
    text-align: left !important;
}

html[dir="rtl"] .phone-number-input,
html[dir="rtl"] .otp-code-input,
html[dir="rtl"] .numeric-input {
    direction: ltr !important;
    text-align: left !important;
}

/* Custom scrollbar for RTL */
html[dir="rtl"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html[dir="rtl"] ::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

html[dir="rtl"] ::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

html[dir="rtl"] ::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Ensure proper font loading for Arabic */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Amiri:wght@400;700&display=swap');

/* High contrast mode support for RTL */
@media (prefers-contrast: high) {
    html[dir="rtl"] {
        color: #000;
        background: #fff;
    }
    
    html[dir="rtl"] .card {
        border: 2px solid #000;
    }
    
    html[dir="rtl"] .btn {
        border: 2px solid #000;
    }
}

/* Logo adjustments for RTL */
.navbar-brand img {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* Fixed Sidebar RTL Adjustments */
html[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
}

html[dir="rtl"] .navbar {
    margin-left: 0;
    margin-right: 16.666667%;
}

html[dir="rtl"] .main-content {
    margin-left: 0;
    margin-right: 16.666667%;
}

@media (max-width: 991.98px) {
    html[dir="rtl"] .navbar {
        margin-right: 25%;
    }
    
    html[dir="rtl"] .main-content {
        margin-right: 25%;
    }
}

@media (max-width: 767.98px) {
    html[dir="rtl"] .navbar {
        margin-right: 0;
    }
    
    html[dir="rtl"] .main-content {
        margin-right: 0;
    }
}

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