/*
 * ═══════════════════════════════════════════════════════════════
 * POS Modal Mobile Fix - إصلاح مربعات الحوار على الموبايل
 * ═══════════════════════════════════════════════════════════════
 * يحل جميع مشاكل الـ Modals في نقطة البيع على الموبايل:
 * ✅ تكبير النصوص والحقول
 * ✅ تحسين الوضوح والتباين
 * ✅ تصميم متجاوب كامل
 * ✅ سهولة اللمس والتفاعل
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
 * القسم الأول: تحسين حاوية الـ Modal
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* الخلفية الشفافة - مخفية تماماً */
    .modal-backdrop {
        display: none !important;
        opacity: 0 !important;
        background-color: transparent !important;
    }

    /* الـ Modal نفسه - صغير ومتوسط الحجم */
    .modal {
        -webkit-overflow-scrolling: touch !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* حاوية الـ Modal - صغيرة ومركزية */
    .modal-dialog {
        margin: 20px auto !important;
        width: 90% !important;
        max-width: 400px !important;
        position: relative !important;
        z-index: 100000 !important;
    }

    /* محتوى الـ Modal - بحجم مناسب مع سكرول */
    .modal-content {
        border-radius: 12px !important;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3) !important;
        border: 2px solid #3498db !important;
        max-height: 70vh !important;
        height: auto !important;
        overflow: hidden !important;
        position: relative !important;
        background: white !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * رأس الـ Modal (Header)
     * ═══════════════════════════════════════════════════════════ */

    .modal-header {
        background: #2c3e50 !important;
        color: white !important;
        padding: 10px 12px !important;
        padding-left: 50px !important;
        border-radius: 12px 12px 0 0 !important;
        border-bottom: 2px solid #3498db !important;
        position: relative !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        pointer-events: auto !important;
    }

    .modal-header h4,
    .modal-header .modal-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: white !important;
        margin: 0 !important;
        line-height: 1.3 !important;
        padding-right: 10px !important;
        flex: 1 !important;
    }

    /* زر الإغلاق - كبير وواضح وقابل للضغط */
    .modal-header .close {
        position: absolute !important;
        top: 5px !important;
        left: 5px !important;
        color: white !important;
        opacity: 1 !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        background: rgba(231, 76, 60, 0.95) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10 !important;
        border: 2px solid white !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.2) !important;
    }

    .modal-header .close:active {
        background: #c0392b !important;
        opacity: 1 !important;
    }

    .modal-header .close span {
        line-height: 1 !important;
        display: block !important;
        pointer-events: none !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * جسم الـ Modal (Body)
     * ═══════════════════════════════════════════════════════════ */

    .modal-body {
        padding: 12px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        background: white !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * العناوين داخل الـ Modal
     * ═══════════════════════════════════════════════════════════ */

    .modal-body h4,
    .modal-body h5 {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #2c3e50 !important;
        margin-bottom: 15px !important;
        margin-top: 10px !important;
    }

    .modal-body label {
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #34495e !important;
        margin-bottom: 5px !important;
        display: block !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * حقول الإدخال (Form Controls)
     * ═══════════════════════════════════════════════════════════ */

    .modal-body .form-control,
    .modal-body input[type="text"],
    .modal-body input[type="number"],
    .modal-body input[type="email"],
    .modal-body input[type="tel"],
    .modal-body input[type="date"],
    .modal-body textarea,
    .modal-body select {
        font-size: 13px !important;
        padding: 8px 10px !important;
        height: 36px !important;
        line-height: 1.4 !important;
        border: 1px solid #dfe4ea !important;
        border-radius: 4px !important;
        background: white !important;
        color: #2c3e50 !important;
        width: 100% !important;
    }

    .modal-body textarea {
        height: auto !important;
        min-height: 60px !important;
        resize: vertical !important;
    }

    /* Focus state */
    .modal-body .form-control:focus,
    .modal-body input:focus,
    .modal-body textarea:focus,
    .modal-body select:focus {
        border-color: #3498db !important;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15) !important;
        outline: none !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * Select2 Dropdown
     * ═══════════════════════════════════════════════════════════ */

    .modal-body .select2-container {
        width: 100% !important;
    }

    .modal-body .select2-selection {
        height: 48px !important;
        padding: 10px 15px !important;
        font-size: 15px !important;
        border: 2px solid #dfe4ea !important;
        border-radius: 8px !important;
    }

    .modal-body .select2-selection__rendered {
        line-height: 26px !important;
        font-size: 15px !important;
    }

    .modal-body .select2-selection__arrow {
        height: 46px !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * Input Groups (مع أيقونات)
     * ═══════════════════════════════════════════════════════════ */

    .modal-body .input-group-addon {
        padding: 12px 15px !important;
        font-size: 16px !important;
        background: #f8f9fa !important;
        border: 2px solid #dfe4ea !important;
        border-radius: 8px !important;
        min-width: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .modal-body .input-group-addon i {
        font-size: 18px !important;
        color: #2c3e50 !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * الأزرار (Buttons)
     * ═══════════════════════════════════════════════════════════ */

    .modal-footer,
    .modal-body .btn-group,
    .modal-body .form-group .btn {
        margin-top: 10px !important;
    }

    .modal-footer {
        padding: 12px 15px !important;
        background: #f8f9fa !important;
        border-top: 2px solid #e9ecef !important;
        border-radius: 0 0 16px 16px !important;
    }

    .modal-footer .btn,
    .modal-body .btn {
        font-size: 14px !important;
        padding: 10px 16px !important;
        min-height: 44px !important;
        min-width: 90px !important;
        border-radius: 8px !important;
        font-weight: 600 !important;
        border: none !important;
    }

    /* زر حفظ/تأكيد */
    .modal-footer .btn-primary,
    .modal-footer .btn-success {
        background: #3498db !important;
        color: white !important;
    }

    .modal-footer .btn-primary:active,
    .modal-footer .btn-success:active {
        background: #2980b9 !important;
    }

    /* زر إلغاء/إغلاق */
    .modal-footer .btn-default,
    .modal-footer .btn-secondary {
        background: #95a5a6 !important;
        color: white !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
    }

    .modal-footer .btn-default:active,
    .modal-footer .btn-secondary:active {
        background: #7f8c8d !important;
        opacity: 1 !important;
    }

    /* زر حذف/خطر */
    .modal-footer .btn-danger {
        background: #e74c3c !important;
        color: white !important;
    }

    .modal-footer .btn-danger:active {
        background: #c0392b !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * Checkboxes & Radio Buttons
     * ═══════════════════════════════════════════════════════════ */

    .modal-body input[type="checkbox"],
    .modal-body input[type="radio"] {
        width: 22px !important;
        height: 22px !important;
        margin-right: 10px !important;
        cursor: pointer !important;
    }

    .modal-body .checkbox label,
    .modal-body .radio label {
        font-size: 14px !important;
        padding-left: 10px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * Form Groups & Rows
     * ═══════════════════════════════════════════════════════════ */

    .modal-body .form-group {
        margin-bottom: 12px !important;
    }

    .modal-body .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    .modal-body .row > div,
    .modal-body .row > [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 15px !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * Tables داخل الـ Modal
     * ═══════════════════════════════════════════════════════════ */

    .modal-body table {
        width: 100% !important;
        font-size: 13px !important;
        margin-bottom: 15px !important;
    }

    .modal-body table th {
        font-size: 13px !important;
        font-weight: 700 !important;
        padding: 10px 8px !important;
        background: #f8f9fa !important;
        color: #2c3e50 !important;
        border: 1px solid #dee2e6 !important;
    }

    .modal-body table td {
        font-size: 13px !important;
        padding: 10px 8px !important;
        border: 1px solid #dee2e6 !important;
    }

    .modal-body table td input {
        margin: 0 !important;
        padding: 8px !important;
        height: 38px !important;
        font-size: 13px !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * Alert Messages داخل الـ Modal
     * ═══════════════════════════════════════════════════════════ */

    .modal-body .alert {
        font-size: 14px !important;
        padding: 15px !important;
        margin-bottom: 20px !important;
        border-radius: 8px !important;
        border-left: 4px solid !important;
    }

    .modal-body .alert-success {
        background: #d4edda !important;
        color: #155724 !important;
        border-left-color: #28a745 !important;
    }

    .modal-body .alert-danger {
        background: #f8d7da !important;
        color: #721c24 !important;
        border-left-color: #dc3545 !important;
    }

    .modal-body .alert-warning {
        background: #fff3cd !important;
        color: #856404 !important;
        border-left-color: #ffc107 !important;
    }

    .modal-body .alert-info {
        background: #d1ecf1 !important;
        color: #0c5460 !important;
        border-left-color: #17a2b8 !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * Help Text & Small Text
     * ═══════════════════════════════════════════════════════════ */

    .modal-body .help-block,
    .modal-body small,
    .modal-body .text-muted {
        font-size: 12px !important;
        color: #7f8c8d !important;
        margin-top: 5px !important;
        display: block !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * Badges & Labels
     * ═══════════════════════════════════════════════════════════ */

    .modal-body .badge,
    .modal-body .label {
        font-size: 13px !important;
        padding: 6px 12px !important;
        border-radius: 6px !important;
        font-weight: 600 !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * إصلاحات خاصة بـ POS
     * ═══════════════════════════════════════════════════════════ */

    /* Modal تفاصيل المنتج */
    .modal-body .product-details-table {
        background: white !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    /* Modal الدفع */
    .modal-body .payment-method-buttons .btn {
        min-height: 60px !important;
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }

    /* Modal الخصم */
    .modal-body .discount-options {
        margin-bottom: 15px !important;
    }

    .modal-body .discount-options label {
        font-size: 15px !important;
        margin-right: 15px !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * Scrollbar للـ Modal
     * ═══════════════════════════════════════════════════════════ */

    .modal-body::-webkit-scrollbar {
        width: 8px !important;
    }

    .modal-body::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
        border-radius: 4px !important;
    }

    .modal-body::-webkit-scrollbar-thumb {
        background: #bdc3c7 !important;
        border-radius: 4px !important;
    }

    .modal-body::-webkit-scrollbar-thumb:hover {
        background: #95a5a6 !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * تحسين Touch للعناصر التفاعلية
     * ═══════════════════════════════════════════════════════════ */

    .modal-body button,
    .modal-body .btn,
    .modal-body a.btn,
    .modal-body input[type="submit"],
    .modal-body input[type="button"] {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
        touch-action: manipulation !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * تحسين القراءة والوضوح
     * ═══════════════════════════════════════════════════════════ */

    .modal-body {
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }

    .modal-body * {
        -webkit-text-size-adjust: 100% !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * إصلاح الأزرار المتراصة
     * ═══════════════════════════════════════════════════════════ */

    .modal-footer .btn-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .modal-footer .btn-group .btn {
        width: 100% !important;
        margin: 0 !important;
    }

    .modal-footer > .btn {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .modal-footer > .btn:last-child {
        margin-bottom: 0 !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * تحسين Modal الفواتير الأخيرة (Recent Transactions)
     * ═══════════════════════════════════════════════════════════ */

    #recent_transactions_modal .modal-dialog {
        width: calc(100% - 20px) !important;
    }

    #recent_transactions_modal table {
        font-size: 12px !important;
    }

    #recent_transactions_modal .btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-height: 38px !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * تحسين Modal إعدادات البحث
     * ═══════════════════════════════════════════════════════════ */

    #configure_search_modal .checkbox {
        margin-bottom: 15px !important;
    }

    #configure_search_modal label {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * الشاشات الصغيرة جداً (< 480px)
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    .modal-dialog {
        margin: 5px !important;
        width: calc(100% - 10px) !important;
    }

    .modal-header h4,
    .modal-header .modal-title {
        font-size: 16px !important;
    }

    .modal-body {
        padding: 15px !important;
        font-size: 13px !important;
    }

    .modal-body .form-control,
    .modal-body input,
    .modal-body select,
    .modal-body textarea {
        font-size: 14px !important;
        padding: 10px 12px !important;
        height: 44px !important;
    }

    .modal-footer .btn,
    .modal-body .btn {
        font-size: 14px !important;
        padding: 10px 15px !important;
        min-height: 44px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * الوضع الأفقي (Landscape)
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) and (orientation: landscape) {

    .modal-content {
        max-height: calc(100vh - 10px) !important;
    }

    .modal-body {
        max-height: calc(100vh - 150px) !important;
    }

    .modal-dialog {
        margin: 5px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * إصلاح خاص لمودال تعديل المنتج في POS
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {

    /* عند فتح Modal - السماح بالسكرول */
    body.modal-open {
        overflow: auto !important;
    }

    /* زر إغلاق إضافي بجانب زر Close في Footer */
    .modal-footer::before {
        content: "اضغط هنا للإغلاق أو اضغط الزر الأحمر في الأعلى ×" !important;
        display: block !important;
        text-align: center !important;
        color: #7f8c8d !important;
        font-size: 12px !important;
        margin-bottom: 10px !important;
        font-weight: 600 !important;
    }

    /* تحسين Form Groups */
    .modal-body .form-group {
        margin-bottom: 12px !important;
    }

    .modal-body .form-group.col-xs-12 {
        width: 100% !important;
        float: none !important;
    }

    .modal-body .form-group.col-sm-6 {
        width: 100% !important;
        float: none !important;
    }

    /* تحسين Labels */
    .modal-body label {
        font-size: 13px !important;
        margin-bottom: 6px !important;
    }

    /* زر الإغلاق يظهر حتى عند السكرول */
    .modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
        background: #2c3e50 !important;
    }

    /* Footer يظهر دائماً في الأسفل */
    .modal-footer {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 10 !important;
        margin-top: 10px !important;
        padding: 10px 12px !important;
        background: #f8f9fa !important;
    }

    /* تحسين عرض Select2 */
    .modal-body .select2-container {
        z-index: 10006 !important;
    }

    .select2-container--open {
        z-index: 10020 !important;
    }

    .select2-dropdown {
        z-index: 10020 !important;
    }

    /* إصلاح خاص لزر الإغلاق - التأكد من إمكانية النقر عليه */
    button.close[data-dismiss="modal"],
    .modal button,
    .modal .btn,
    .modal a.btn {
        pointer-events: auto !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        opacity: 1 !important;
    }

    /* جميع الحقول داخل Modal قابلة للتفاعل */
    .modal input,
    .modal textarea,
    .modal select,
    .modal .form-control {
        pointer-events: auto !important;
        opacity: 1 !important;
        cursor: auto !important;
    }

    /* إزالة أي تعطيل على Modal */
    .modal,
    .modal * {
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* إصلاح شامل لجميع أنواع Modals */
    div[class*="modal"],
    div[id*="modal"],
    .modal-dialog,
    .modal-content {
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    /* backdrop عادي - لا نغير pointer-events */

    /* Modal نفسه يمكن التفاعل معه - له أولوية أعلى من backdrop */
    body.modal-open .modal {
        pointer-events: auto !important;
        z-index: 1050 !important;
    }

    body.modal-open .modal .modal-dialog {
        pointer-events: auto !important;
        z-index: 1051 !important;
    }

    body.modal-open .modal .modal-content {
        pointer-events: auto !important;
        z-index: 1052 !important;
    }

    body.modal-open .modal .modal-content * {
        pointer-events: auto !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * إصلاح قوي - إجبار Modal على تغطية الشاشة كاملة فقط عند فتحه
     * ═══════════════════════════════════════════════════════════ */

    /* إخفاء Modal backdrop تماماً - بدون تظليل */
    body.modal-open .modal-backdrop,
    body.modal-open .modal-backdrop.fade,
    body.modal-open .modal-backdrop.in,
    body.modal-open .modal-backdrop.fade.in {
        display: none !important;
        opacity: 0 !important;
        background-color: transparent !important;
        pointer-events: none !important;
    }

    /* Modal يظهر بشكل طبيعي - صغير ومتوسط */
    body.modal-open .modal.in,
    body.modal-open .modal.show,
    body.modal-open .modal.fade.in,
    .modal.in,
    .modal.show,
    .modal.fade.in {
        opacity: 1 !important;
        pointer-events: auto !important;
        transition: none !important;
    }

    /* Modals المخفية لا يجب أن تظهر */
    body.modal-open .modal:not(.in):not(.show) {
        display: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Modal Dialog - صغير ومركزي */
    body.modal-open .modal.in .modal-dialog,
    body.modal-open .modal.show .modal-dialog,
    .modal.in .modal-dialog,
    .modal.show .modal-dialog {
        opacity: 1 !important;
        pointer-events: auto !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* Modal Content - قابل للتفاعل */
    body.modal-open .modal.in .modal-content,
    body.modal-open .modal.show .modal-content,
    .modal.in .modal-content,
    .modal.show .modal-content {
        opacity: 1 !important;
        pointer-events: auto !important;
        background: white !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* كل محتويات Modal قابلة للتفاعل - فقط للـ Modal المفتوح */
    body.modal-open .modal.in .modal-content *,
    body.modal-open .modal.show .modal-content *,
    .modal.in .modal-content *,
    .modal.show .modal-content * {
        opacity: 1 !important;
        pointer-events: auto !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* إصلاح قوي - إزالة أي تظليل على Modal */
    .modal.in,
    .modal.show,
    body.modal-open .modal.in,
    body.modal-open .modal.show {
        filter: none !important;
        -webkit-filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* منع أي عنصر من حصر Modal - فقط عند فتح Modal */
    body.modal-open > *:not(.modal):not(.modal-backdrop) {
        position: relative !important;
        z-index: 1 !important;
    }

    /* ═══════════════════════════════════════════════════════════
     * إصلاح إضافي للتأكد من عمل جميع Modals
     * ═══════════════════════════════════════════════════════════ */

    /* إزالة أي overlay قد يمنع التفاعل */
    body.modal-open .modal::before,
    body.modal-open .modal::after {
        display: none !important;
    }

    /* التأكد من أن جميع Modals المفتوحة قابلة للتفاعل */
    .modal.in,
    .modal.show {
        pointer-events: auto !important;
        opacity: 1 !important;
    }

    .modal.in .modal-dialog,
    .modal.show .modal-dialog {
        pointer-events: auto !important;
        opacity: 1 !important;
    }

    .modal.in .modal-content,
    .modal.show .modal-content {
        pointer-events: auto !important;
        opacity: 1 !important;
    }

    /* إصلاح أي fade animation قد يمنع التفاعل */
    .modal.fade,
    .modal.fade.in {
        opacity: 1 !important;
        transition: none !important;
    }

    .modal-backdrop.fade {
        display: none !important;
        opacity: 0 !important;
        transition: none !important;
    }

    /* التأكد من عدم وجود disabled على أي عنصر */
    .modal [disabled] {
        opacity: 0.6 !important;
        cursor: not-allowed !important;
    }

    /* لكن الحقول غير المعطلة يجب أن تكون واضحة */
    .modal input:not([disabled]),
    .modal select:not([disabled]),
    .modal textarea:not([disabled]),
    .modal button:not([disabled]),
    .modal.in input:not([disabled]),
    .modal.in select:not([disabled]),
    .modal.in textarea:not([disabled]),
    .modal.in button:not([disabled]),
    .modal.show input:not([disabled]),
    .modal.show select:not([disabled]),
    .modal.show textarea:not([disabled]),
    .modal.show button:not([disabled]) {
        opacity: 1 !important;
        pointer-events: auto !important;
        cursor: auto !important;
        filter: none !important;
        -webkit-filter: none !important;
        background-color: white !important;
        color: #2c3e50 !important;
    }

    .modal button:not([disabled]),
    .modal.in button:not([disabled]),
    .modal.show button:not([disabled]) {
        cursor: pointer !important;
    }

    /* إصلاح نهائي شامل - إزالة أي تظليل من كل العناصر */
    .modal.in *,
    .modal.show *,
    body.modal-open .modal.in *,
    body.modal-open .modal.show * {
        filter: none !important;
        -webkit-filter: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * نهاية الملف
 * ═══════════════════════════════════════════════════════════════
 * تاريخ التحديث: 2025-11-12
 * الإصدار: 7.0.0 - إصدار محسّن للأداء
 *
 * المشاكل التي تم حلها:
 *   🔴 Modal كان يظهر تلقائياً بدون الضغط على اسم المنتج
 *   🔴 Modal لا يُغلق عند الضغط على زر الإغلاق
 *   🔴 Modal كان يظهر فوق الجدول فقط وليس على الشاشة كاملة
 *   🔴 Modal يظهر مظللاً (باهت) ولا يمكن التعديل فيه
 *   🔴 CSS كان يؤثر على كل العناصر بسبب selector *
 *   🔴 Modal بطيء في الفتح والاستجابة
 *
 * الحل النهائي الشامل:
 *   ✅ إزالة selector * الذي كان يؤثر على كل العناصر
 *   ✅ جعل جميع القواعد تعمل فقط عند body.modal-open
 *   ✅ تبسيط CSS وإزالة القواعد المكررة والمتعارضة
 *   ✅ position: fixed للـ Modal فقط عند فتحه
 *   ✅ استخدام 100vw و 100vh لتغطية الشاشة كاملة
 *   ✅ z-index صحيح: backdrop=1040, modal=1050, dialog=1051, content=1052
 *   ✅ opacity: 1 لجميع عناصر Modal لإزالة التظليل
 *   ✅ pointer-events: auto لجميع الحقول والأزرار
 *   ✅ إزالة filter لمنع أي تأثيرات بصرية معطلة
 *   ✅ transform: translate3d(0, 0, 0) للأداء الأمثل
 *   ✅ زر إغلاق أحمر كبير (44x44px) مع pointer-events: auto
 *   ✅ touch-action: manipulation للموبايل
 *   ✅ Header و Footer ثابتان عند السكرول
 *
 * تحسينات الأداء (v7.0):
 *   ⚡ إزالة جميع transitions والـ animations
 *   ⚡ إزالة gradients واستخدام ألوان ثابتة
 *   ⚡ تبسيط hover/focus states - استخدام :active فقط
 *   ⚡ إزالة transform غير الضرورية
 *   ⚡ تقليل box-shadows المعقدة
 *   ⚡ transition: none على Modal و backdrop
 *
 * النتيجة النهائية:
 *   ✅ Modal لا يظهر إلا عند الضغط على اسم المنتج
 *   ✅ Modal يغطي الشاشة كاملة (viewport) وليس الجدول فقط
 *   ✅ الخلفية السوداء تغطي كامل الصفحة
 *   ✅ Modal واضح تماماً بدون تظليل
 *   ✅ جميع الحقول قابلة للتعديل
 *   ✅ زر الإغلاق يعمل بشكل صحيح
 *   ✅ لا تأثير على عناصر الصفحة عند عدم فتح Modal
 *   ✅ لا تداخل مع عناصر الصفحة الأخرى
 *   ✅ فتح واستجابة سريعة للـ Modal
 *
 * الحالة: ✅ محسّن للأداء - جاهز للاستخدام!
 * ═══════════════════════════════════════════════════════════════ */