/**
 * ============================================================================
 * BOOTSTRAP 5.3 RTL RESPONSIVE OVERRIDES
 * ============================================================================
 * 
 * هذا الملف يُكمل Bootstrap 5.3 RTL ويُعدله ليعمل بشكل أفضل
 * مع التصميم العربي والموقع الحالي
 * ============================================================================
 */

/* ==========================================
   BOOTSTRAP CONTAINER ENHANCEMENTS
   ========================================== */

/* Override Bootstrap containers to respect our design */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    /* Keep Bootstrap defaults but ensure RTL works */
    padding-left: var(--bs-gutter-x, 0.75rem);
    padding-right: var(--bs-gutter-x, 0.75rem);
}

/* Enhanced container for our design system */
.container-enhanced {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 576px) {
    .container-enhanced {
        max-width: 540px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 768px) {
    .container-enhanced {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-enhanced {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-enhanced {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container-enhanced {
        max-width: 1320px;
    }
}

/* ==========================================
   BOOTSTRAP CARD ENHANCEMENTS
   ========================================== */

/* Responsive card improvements */
.card-responsive {
    border: none;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.card-responsive:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 768px) {
    .card-responsive {
        border-radius: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .card-responsive .card-body {
        padding: 1rem;
    }
    
    .card-responsive .card-header {
        padding: 0.75rem 1rem;
    }
}

/* ==========================================
   BOOTSTRAP TABLE ENHANCEMENTS
   ========================================== */

/* Responsive table wrapper */
.table-responsive-enhanced {
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Better mobile table */
@media (max-width: 768px) {
    .table-responsive-enhanced table {
        font-size: 0.875rem;
    }
    
    .table-responsive-enhanced th,
    .table-responsive-enhanced td {
        padding: 0.75rem 0.5rem;
    }
}

/* ==========================================
   BOOTSTRAP FORM ENHANCEMENTS
   ========================================== */

/* Touch-friendly inputs */
.form-control-responsive {
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: 0.5rem;
}

@media (max-width: 576px) {
    .form-control-responsive {
        font-size: 16px; /* Prevent iOS zoom */
    }
}

/* Form grid for responsive layouts */
.form-row-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 768px) {
    .form-row-responsive > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==========================================
   BOOTSTRAP BUTTON ENHANCEMENTS
   ========================================== */

/* Responsive buttons */
.btn-responsive {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

@media (max-width: 576px) {
    .btn-responsive.btn-block-mobile {
        width: 100%;
        display: flex;
    }
}

/* Button group responsive */
@media (max-width: 576px) {
    .btn-group-responsive {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .btn-group-responsive .btn {
        border-radius: 0.5rem !important;
    }
}

/* ==========================================
   BOOTSTRAP NAVBAR ENHANCEMENTS
   ========================================== */

/* Enhanced navbar for Arabic */
.navbar-enhanced {
    padding: 0.75rem 1rem;
}

@media (max-width: 992px) {
    .navbar-enhanced {
        padding: 0.5rem;
    }
    
    .navbar-enhanced .navbar-brand {
        font-size: 1.1rem;
    }
    
    .navbar-enhanced .navbar-toggler {
        padding: 0.25rem 0.5rem;
        font-size: 1.1rem;
    }
}

/* ==========================================
   BOOTSTRAP MODAL ENHANCEMENTS
   ========================================== */

/* Responsive modal */
@media (max-width: 576px) {
    .modal-dialog-responsive {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-content-responsive {
        border-radius: 0.5rem;
    }
    
    .modal-body-responsive {
        padding: 1rem;
    }
}

/* ==========================================
   BOOTSTRAP ALERT ENHANCEMENTS
   ========================================== */

/* Responsive alerts */
@media (max-width: 576px) {
    .alert-responsive {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* ==========================================
   BOOTSTRAP PAGINATION ENHANCEMENTS
   ========================================== */

/* Responsive pagination */
@media (max-width: 576px) {
    .pagination-responsive {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.25rem;
    }
    
    .pagination-responsive .page-link {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* ==========================================
   BOOTSTRAP DROPDOWN ENHANCEMENTS
   ========================================== */

/* Mobile-friendly dropdowns */
@media (max-width: 576px) {
    .dropdown-menu-responsive {
        position: fixed !important;
        top: auto !important;
        right: 0.5rem !important;
        left: 0.5rem !important;
        bottom: 0.5rem !important;
        width: auto;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 0.75rem;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    }
}

/* ==========================================
   BOOTSTRAP SPACING UTILITIES
   ========================================== */

/* Responsive spacing classes */
@media (max-width: 768px) {
    .gap-mobile-0 { gap: 0 !important; }
    .gap-mobile-1 { gap: 0.25rem !important; }
    .gap-mobile-2 { gap: 0.5rem !important; }
    .gap-mobile-3 { gap: 1rem !important; }
    
    .p-mobile-0 { padding: 0 !important; }
    .p-mobile-2 { padding: 0.5rem !important; }
    .p-mobile-3 { padding: 1rem !important; }
    
    .m-mobile-0 { margin: 0 !important; }
    .m-mobile-2 { margin: 0.5rem !important; }
    .m-mobile-3 { margin: 1rem !important; }
}

/* ==========================================
   BOOTSTRAP DISPLAY UTILITIES
   ========================================== */

/* Show/hide utilities */
@media (max-width: 576px) {
    .d-mobile-none { display: none !important; }
    .d-mobile-block { display: block !important; }
    .d-mobile-flex { display: flex !important; }
}

@media (min-width: 577px) {
    .d-desktop-none { display: none !important; }
}

/* ==========================================
   BOOTSTRAP GRID ENHANCEMENTS
   ========================================== */

/* Auto columns for better responsive */
@media (min-width: 576px) {
    .col-xs-auto {
        flex: 0 0 auto;
        width: auto;
    }
}

/* ==========================================
   BOOTSTRAP TEXT UTILITIES
   ========================================== */

/* Responsive text alignment */
@media (max-width: 768px) {
    .text-mobile-start { text-align: right !important; }
    .text-mobile-center { text-align: center !important; }
    .text-mobile-end { text-align: left !important; }
}

@media (min-width: 769px) {
    .text-desktop-start { text-align: right !important; }
    .text-desktop-center { text-align: center !important; }
    .text-desktop-end { text-align: left !important; }
}

/* ==========================================
   ARABIC SPECIFIC FIXES
   ========================================== */

/* Fix for Arabic text direction */
[dir="rtl"] .me-auto {
    margin-left: auto !important;
    margin-right: 0 !important;
}

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

/* Dropdown menu positioning for RTL */
[dir="rtl"] .dropdown-menu-end {
    right: auto !important;
    left: 0 !important;
}

[dir="rtl"] .dropdown-menu-start {
    left: auto !important;
    right: 0 !important;
}