/* ============================================
   Mobile Responsive Styles for IMS
   ============================================ */

/* ===== 1. Mobile Sidebar (Off-Canvas) ===== */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* إصلاح: منع حجب النقر */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.show,
.sidebar-overlay.overlay-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* السماح بالنقر عند الظهور */
}

@media (max-width: 767.98px) {
    .sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        right: -100% !important;
        width: 280px !important;
        max-width: 85vw;
        height: 100vh !important;
        min-height: 100vh !important;
        z-index: 1050 !important;
        transition: right 0.3s ease;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .sidebar.mobile-sidebar-open {
        right: 0 !important;
    }
    
    .sidebar .nav-link {
        padding: 0.875rem 1rem;
        font-size: 0.95rem;
    }
    
    .sidebar-brand {
        font-size: 1.1rem !important;
        padding: 1rem;
    }
    
    /* تأكد من أن السايدبار يظهر فوق كل شيء */
    #sidebar-wrapper {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
    }
}

/* ===== 2. Content Wrapper ===== */
@media (max-width: 767.98px) {
    .content-wrapper {
        padding: 1rem !important;
    }
}

/* ===== 3. Navbar ===== */
@media (max-width: 767.98px) {
    .navbar {
        padding: 0.5rem 0.75rem !important;
        min-height: 56px;
    }
    
    .navbar .btn-link {
        padding: 0.5rem !important;
        font-size: 1.25rem;
    }
    
    .avatar-circle {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.875rem;
    }
}

/* ===== 4. Cards ===== */
@media (max-width: 767.98px) {
    .card {
        margin-bottom: 1rem;
        border-radius: 8px !important;
    }
    
    .card-header {
        padding: 0.875rem 1rem !important;
        font-size: 0.95rem;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .card-title {
        font-size: 1.1rem !important;
    }
}

/* ===== 5. Tables - Responsive ===== */
@media (max-width: 767.98px) {
    .table-responsive {
        border-radius: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        font-size: 0.875rem;
        margin-bottom: 0;
    }
    
    .table thead th {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    
    .table tbody td {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.85rem;
    }
    
    /* تحويل الجداول إلى بطاقات على الموبايل */
    .table-mobile-card {
        display: none;
    }
    
    .table-mobile-card .card {
        margin-bottom: 0.75rem;
        border-left: 3px solid #4e73df;
    }
    
    .table-mobile-card .card-body {
        padding: 0.875rem;
    }
}

/* ===== 6. Forms ===== */
@media (max-width: 767.98px) {
    .form-control,
    .form-select {
        font-size: 16px !important; /* منع التكبير التلقائي في iOS */
        padding: 0.75rem !important;
        border-radius: 6px;
    }
    
    .form-label {
        font-size: 0.9rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* تحسين حقول البحث */
    .form-control-sm {
        font-size: 16px !important;
        padding: 0.625rem !important;
    }
}

/* ===== 7. Buttons - Touch Friendly ===== */
@media (max-width: 767.98px) {
    .btn {
        min-height: 44px; /* الحد الأدنى للمس */
        padding: 0.625rem 1.25rem !important;
        font-size: 0.95rem;
        border-radius: 6px;
        touch-action: manipulation;
    }
    
    .btn-sm {
        min-height: 38px;
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem;
    }
    
    .btn-lg {
        min-height: 50px;
        padding: 0.875rem 1.5rem !important;
        font-size: 1.05rem;
    }
    
    .btn-link {
        min-height: auto;
        padding: 0.5rem !important;
    }
    
    /* تحسين الأزرار في البطاقات */
    .card .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .card .btn:last-child {
        margin-bottom: 0;
    }
}

/* ===== 8. Badges ===== */
@media (max-width: 767.98px) {
    .badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.65rem;
    }
}

/* ===== 9. Headings ===== */
@media (max-width: 767.98px) {
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.35rem !important; }
    h4 { font-size: 1.2rem !important; }
    h5 { font-size: 1.1rem !important; }
    h6 { font-size: 1rem !important; }
}

/* ===== 10. Dashboard Cards (Statistics) ===== */
@media (max-width: 767.98px) {
    .col-xl-3,
    .col-lg-4,
    .col-md-6 {
        margin-bottom: 1rem;
    }
    
    .card.border-start {
        border-left-width: 4px !important;
    }
    
    .card .h5,
    .card .h4 {
        font-size: 1.5rem !important;
    }
    
    .card .text-xs {
        font-size: 0.75rem !important;
    }
}

/* ===== 11. Dropdowns ===== */
@media (max-width: 767.98px) {
    .dropdown-menu {
        max-width: 90vw;
        font-size: 0.9rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .dropdown-item {
        padding: 0.75rem 1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ===== 12. Modals ===== */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-content {
        border-radius: 8px;
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 0.75rem 1rem;
        flex-direction: column;
    }
    
    .modal-footer .btn {
        width: 100%;
        margin: 0.25rem 0;
    }
}

/* ===== 13. Lists ===== */
@media (max-width: 767.98px) {
    .list-group-item {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
    }
}

/* ===== 14. Alerts ===== */
@media (max-width: 767.98px) {
    .alert {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
        border-radius: 6px;
    }
}

/* ===== 15. Pagination ===== */
@media (max-width: 767.98px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        font-size: 0.9rem;
    }
}

/* ===== 16. Input Groups ===== */
@media (max-width: 767.98px) {
    .input-group {
        flex-wrap: wrap;
    }
    
    .input-group > .form-control,
    .input-group > .form-select {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }
    
    .input-group > .btn {
        width: 100%;
    }
}

/* ===== 17. Flex Utilities ===== */
@media (max-width: 767.98px) {
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .d-flex.justify-content-between > * {
        width: 100%;
    }
    
    /* استثناءات */
    .navbar .d-flex.justify-content-between {
        flex-direction: row;
    }
}

/* ===== 18. Spacing ===== */
@media (max-width: 767.98px) {
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-4 {
        margin-top: 1.5rem !important;
    }
    
    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ===== 19. Images ===== */
@media (max-width: 767.98px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    .rounded-circle {
        max-width: 50px;
        max-height: 50px;
    }
}

/* ===== 20. Text Utilities ===== */
@media (max-width: 767.98px) {
    .text-center-mobile {
        text-align: center !important;
    }
    
    .text-start-mobile {
        text-align: right !important;
    }
}

/* ===== 21. Scroll Behavior ===== */
@media (max-width: 767.98px) {
    html {
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    * {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ===== 22. Quick Actions Buttons (Dashboard) ===== */
@media (max-width: 767.98px) {
    .btn-lg.text-start {
        text-align: center !important;
        padding: 1rem !important;
    }
    
    .btn-lg.text-start .d-flex {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .btn-lg.text-start .d-flex i {
        margin-bottom: 0.5rem;
        margin-left: 0 !important;
    }
    
    .btn-lg.text-start .d-flex > div {
        width: 100%;
    }
}

/* ===== 23. Search Forms ===== */
@media (max-width: 767.98px) {
    .row.g-2 {
        margin: 0;
    }
    
    .row.g-2 > [class*="col-"] {
        padding: 0.5rem 0;
    }
    
    .row.g-2 .btn {
        width: 100%;
        margin-top: 0.5rem;
    }
}

/* ===== 24. Tables with Actions ===== */
@media (max-width: 767.98px) {
    .table .btn-group {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: 0.5rem;
        justify-content: center;
    }
    
    .table .btn-group .btn {
        flex: 1 1 auto;
        min-width: 80px;
        margin-bottom: 0.25rem;
        border-radius: 6px;
    }
    
    .table .btn-group .btn:last-child {
        margin-bottom: 0.25rem;
    }
    
    /* أزرار النقاط - خاصة */
    .table .points-actions-group {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 0.5rem !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .table .points-actions-group .btn {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 1 1 auto;
        min-width: 80px;
        max-width: 120px;
    }
    
    /* زر المكافأة - مميز */
    .table .award-points-btn {
        background-color: #198754 !important;
        border-color: #198754 !important;
        color: white !important;
        font-weight: 600 !important;
        display: inline-block !important;
        visibility: visible !important;
    }
}

/* ===== 25. Print Styles ===== */
@media print {
    .sidebar,
    .navbar,
    .btn,
    .pagination {
        display: none !important;
    }
    
    .content-wrapper {
        padding: 0 !important;
    }
}

/* ===== 26. Landscape Orientation ===== */
@media (max-width: 767.98px) and (orientation: landscape) {
    .sidebar {
        width: 240px !important;
    }
    
    .content-wrapper {
        padding: 0.75rem !important;
    }
}

/* ===== 27. Very Small Screens ===== */
@media (max-width: 375px) {
    .sidebar {
        width: 100vw !important;
    }
    
    .card-body {
        padding: 0.75rem !important;
    }
    
    .btn {
        font-size: 0.875rem;
        padding: 0.5rem 1rem !important;
    }
}

/* ===== 28. Accessibility - Touch Targets ===== */
@media (max-width: 767.98px) {
    a,
    button,
    select,
    textarea,
    input:not([type="checkbox"]):not([type="radio"]) {
        min-height: 44px;
        min-width: 44px;
    }

    input[type="checkbox"]:not(.btn-check),
    input[type="radio"]:not(.btn-check) {
        min-width: 1.25rem;
        min-height: 1.25rem;
    }
    
    .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ===== 29. Smooth Scrolling ===== */
@media (max-width: 767.98px) {
    html {
        scroll-behavior: smooth;
    }
    
    .table-responsive {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== 30. Loading States ===== */
@media (max-width: 767.98px) {
    .spinner-border-sm {
        width: 1rem;
        height: 1rem;
    }
}

/* ===== 31. Forms - تحسين النماذج على الموبايل ===== */
@media (max-width: 767.98px) {
    /* تحويل جميع الأعمدة إلى عرض كامل على الموبايل */
    .row [class*="col-md-"],
    .row [class*="col-lg-"],
    .row [class*="col-xl-"],
    .row [class*="col-sm-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 1rem;
    }
    
    /* استثناءات - بعض الأعمدة يمكن أن تبقى جنباً إلى جنب */
    .row .col-md-6.col-6,
    .row .col-md-4.col-4,
    .row .col-md-3.col-3 {
        /* إذا كان لديه col-6 أو col-4، اتركه */
        flex: 0 0 auto;
    }
    
    /* تحسين التباعد في النماذج */
    .row.g-3 > [class*="col-"],
    .row.g-2 > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* تحسين العناوين في النماذج */
    .form-label {
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }
    
    /* تحسين الأقسام في النماذج */
    h5.border-bottom {
        font-size: 1.1rem;
        padding-bottom: 0.75rem;
        margin-bottom: 1rem;
    }
}

/* ===== 32. Container Fluid - تحسين المسافات ===== */
@media (max-width: 767.98px) {
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    .container-fluid.py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* ===== 33. Headers and Titles - تحسين العناوين ===== */
@media (max-width: 767.98px) {
    /* تحسين العناوين الرئيسية */
    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start !important;
    }
    
    .d-flex.justify-content-between > h3,
    .d-flex.justify-content-between > div:first-child {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .d-flex.justify-content-between > .btn,
    .d-flex.justify-content-between > a.btn {
        width: 100%;
        margin-top: 0;
        margin-bottom: 0.5rem;
    }
    
    /* تحسين العناوين الفرعية */
    h5.text-primary {
        font-size: 1.05rem;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
    }
    
    /* تحسين المسافات */
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-4 {
        margin-top: 1.5rem !important;
    }
}

/* ===== 34. Cards with Forms - تحسين البطاقات ===== */
@media (max-width: 767.98px) {
    .card-body .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .card-body .row > [class*="col-"] {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* ===== 35. Tables in Cards - تحسين الجداول داخل البطاقات ===== */
@media (max-width: 767.98px) {
    .card .table-responsive {
        margin: -1rem;
        padding: 0;
    }
    
    .card .table {
        margin-bottom: 0;
    }
}

/* ===== 36. Modals and Popups - تحسين النوافذ المنبثقة ===== */
@media (max-width: 767.98px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .modal-body .row > [class*="col-"] {
        width: 100% !important;
        margin-bottom: 1rem;
    }
}

/* ===== 37. Nested Rows - تحسين الصفوف المتداخلة ===== */
@media (max-width: 767.98px) {
    .row .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .row .row > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* ===== 38. Text Areas and Large Inputs ===== */
@media (max-width: 767.98px) {
    textarea.form-control {
        min-height: 120px;
    }
    
    .form-control-lg {
        font-size: 16px !important;
    }
}

/* ===== 39. Button Groups - تحسين مجموعات الأزرار ===== */
@media (max-width: 767.98px) {
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        margin-bottom: 0.5rem;
        border-radius: 6px !important;
    }
    
    .btn-group .btn:last-child {
        margin-bottom: 0;
    }
}

/* ===== 40. Alerts and Messages ===== */
@media (max-width: 767.98px) {
    .alert {
        font-size: 0.9rem;
        padding: 0.875rem 1rem;
    }
    
    .alert ul {
        margin-bottom: 0.5rem;
        padding-right: 1.25rem;
    }
}

/* ===== 41. Form Buttons - تحسين أزرار النماذج ===== */
@media (max-width: 767.98px) {
    /* أزرار النماذج */
    form .btn-lg,
    form .btn {
        width: 100%;
        margin-bottom: 0.75rem;
    }
    
    form .btn:last-child {
        margin-bottom: 0;
    }
    
    /* أزرار الإجراءات في رأس الصفحة */
    .d-flex.justify-content-between .btn-secondary,
    .d-flex.justify-content-between a.btn {
        width: 100%;
        margin-top: 0.5rem;
    }
    
    /* مجموعات الأزرار */
    .d-flex.gap-2,
    .d-flex.gap-3 {
        flex-direction: column;
        width: 100%;
    }
    
    .d-flex.gap-2 .btn,
    .d-flex.gap-3 .btn {
        width: 100%;
        margin: 0.25rem 0;
    }
}

/* ===== 42. Form Sections - تحسين أقسام النماذج ===== */
@media (max-width: 767.98px) {
    /* الأقسام في النماذج */
    .col-12.mt-4 {
        margin-top: 1.5rem !important;
    }
    
    /* تحسين المسافات بين الحقول */
    .row.g-3 > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* تحسين الحقول المتعددة في صف واحد */
    .row > [class*="col-md-"] {
        margin-bottom: 1rem;
    }
}

/* ===== 43. Card Headers - تحسين رؤوس البطاقات ===== */
@media (max-width: 767.98px) {
    .card-header {
        font-size: 0.95rem;
        padding: 0.875rem 1rem !important;
    }
    
    .card-header h6 {
        font-size: 0.95rem;
    }
}

/* ===== 44. Overflow and Scrolling - منع التجاوز ===== */
@media (max-width: 767.98px) {
    .container-fluid {
        overflow-x: hidden;
    }
    
    .content-wrapper {
        overflow-x: hidden;
    }
    
    /* منع التجاوز الأفقي */
    body {
        overflow-x: hidden;
    }
    
    * {
        max-width: 100%;
    }
}

/* ===== 45. Images in Forms - تحسين الصور في النماذج ===== */
@media (max-width: 767.98px) {
    .col-12.text-center img {
        max-width: 100%;
        height: auto;
    }
    
    .rounded-circle.img-thumbnail {
        max-width: 150px;
        max-height: 150px;
    }
}

/* ===== 46. Complex Forms - تحسين النماذج المعقدة ===== */
@media (max-width: 767.98px) {
    /* النماذج مع الجداول */
    form .table {
        font-size: 0.85rem;
    }
    
    form .table th,
    form .table td {
        padding: 0.5rem 0.25rem;
        font-size: 0.8rem;
    }
    
    /* الحقول الصغيرة في الجداول */
    form .table input[type="number"],
    form .table input[type="text"],
    form .table select {
        font-size: 0.85rem;
        padding: 0.375rem 0.5rem;
    }
    
    /* تحسين الأزرار في الجداول */
    form .table .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
        min-height: auto;
    }
}

/* ===== 47. Select Dropdowns - تحسين القوائم المنسدلة ===== */
@media (max-width: 767.98px) {
    select.form-control,
    select.form-select {
        font-size: 16px !important; /* منع التكبير في iOS */
        padding: 0.75rem !important;
    }
    
    /* القوائم المنسدلة الطويلة */
    select.form-control option {
        padding: 0.5rem;
    }
}

/* ===== 48. File Inputs - تحسين حقول رفع الملفات ===== */
@media (max-width: 767.98px) {
    input[type="file"] {
        font-size: 0.9rem;
        padding: 0.5rem;
    }
    
    input[type="file"]::file-selector-button {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
}

/* ===== 49. Date Inputs - تحسين حقول التاريخ ===== */
@media (max-width: 767.98px) {
    input[type="date"],
    input[type="datetime-local"] {
        font-size: 16px !important; /* منع التكبير في iOS */
        padding: 0.75rem !important;
    }
}

/* ===== 50. Checkboxes and Radio Buttons ===== */
@media (max-width: 767.98px) {
    .form-check {
        margin-bottom: 0.75rem;
        padding-right: 1.5rem;
    }
    
    .form-check-input {
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 0.25rem;
    }

    input[type="checkbox"]:not(.btn-check),
    input[type="radio"]:not(.btn-check) {
        width: 1.25rem;
        height: 1.25rem;
        max-width: 1.25rem;
        max-height: 1.25rem;
        vertical-align: middle;
        accent-color: #0d6efd;
    }
    
    .form-check-label {
        font-size: 0.9rem;
        padding-right: 0.5rem;
    }
}

/* ===== 56. Performance Optimizations - تحسينات الأداء ===== */
@media (max-width: 767.98px) {
    /* تقليل repaints و reflows */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* السماح بتحديد النص في الحقول فقط */
    input, textarea, select {
        -webkit-user-select: text;
        user-select: text;
    }
    
    /* تحسين التمرير */
    body, html {
        -webkit-overflow-scrolling: touch;
        overflow-x: hidden;
        overscroll-behavior: contain;
    }
    
    /* تحسين الأداء للصور */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        max-width: 100%;
        height: auto;
    }
    
    /* تقليل animations على الموبايل */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }
    
    /* تحسين الأداء للجداول */
    .table {
        will-change: transform;
    }
    
    /* تحسين الأداء للبطاقات */
    .card {
        will-change: transform;
        transform: translateZ(0);
    }
}

/* ===== 51. Multi-Column Layouts - تحسين التخطيطات متعددة الأعمدة ===== */
@media (max-width: 767.98px) {
    /* الصفحات مثل manage_structure */
    .row > .col-lg-4,
    .row > .col-lg-8,
    .row > .col-lg-6,
    .row > .col-lg-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 1.5rem;
    }
    
    /* البطاقات المتجاورة */
    .row .col-lg-4 .card,
    .row .col-lg-8 .card {
        margin-bottom: 1.5rem;
    }
}

/* ===== 52. Input Groups - تحسين مجموعات الإدخال ===== */
@media (max-width: 767.98px) {
    .input-group {
        flex-direction: column;
        width: 100%;
    }
    
    .input-group > .form-control,
    .input-group > .form-select,
    .input-group > .form-control:not(:first-child) {
        width: 100% !important;
        border-radius: 6px !important;
        margin-bottom: 0.5rem;
    }
    
    .input-group > .btn {
        width: 100%;
        border-radius: 6px !important;
        margin-top: 0.5rem;
    }
    
    .input-group > .btn:first-child {
        margin-top: 0;
    }
}

/* ===== 53. List Groups - تحسين قوائم العناصر ===== */
@media (max-width: 767.98px) {
    .list-group-item {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
    }
    
    .list-group-item .btn-group {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .list-group-item .btn-group .btn {
        width: 100%;
        margin-bottom: 0.25rem;
    }
}

/* ===== 54. Card Footer - تحسين تذييل البطاقات ===== */
@media (max-width: 767.98px) {
    .card-footer {
        padding: 1rem !important;
    }
    
    .card-footer .btn {
        width: 100%;
    }
}

/* ===== 55. Text Utilities - تحسين النصوص ===== */
@media (max-width: 767.98px) {
    .text-center {
        text-align: center !important;
    }
    
    .text-end {
        text-align: right !important;
    }
    
    .small {
        font-size: 0.85rem !important;
    }
    
    .form-text {
        font-size: 0.8rem;
        margin-top: 0.25rem;
    }
}

/* ============================================
   COMPREHENSIVE MOBILE FIXES - Global Fixes
   ============================================ */

/* ===== 56. Global Container Overflow Prevention ===== */
@media (max-width: 767.98px) {
    /* Prevent horizontal scrolling on body and html */
    html, body {
        max-width: 100vw;
        overflow-x: hidden !important;
        position: relative;
    }
    
    /* Main content wrapper */
    .content-wrapper,
    .container-fluid,
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        overflow-x: hidden !important;
    }
    
    /* Prevent any element from causing overflow */
    * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Specific wrapper fixes */
    #wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        max-width: 100% !important;
    }
    
    [class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ===== 57. Forms - Complete Mobile Optimization ===== */
@media (max-width: 767.98px) {
    /* Force all form inputs to 100% width */
    .form-control,
    .form-select,
    .form-control:not([type="checkbox"]):not([type="radio"]),
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
    
    /* Form groups and form rows */
    .form-group,
    .mb-3,
    .form-row {
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    /* Labels */
    .form-label,
    label {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Checkboxes and Radio Buttons - Standard Sizing */
    .form-check {
        display: flex !important;
        align-items: center !important;
        padding: 0.5rem 0 !important;
        margin-bottom: 0.75rem !important;
        width: 100% !important;
    }
    
    .form-check-input {
        width: 1.25rem !important;
        height: 1.25rem !important;
        min-width: 1.25rem !important;
        min-height: 1.25rem !important;
        max-width: 1.25rem !important;
        max-height: 1.25rem !important;
        margin-top: 0 !important;
        margin-right: 0.5rem !important;
        margin-left: 0 !important;
        flex-shrink: 0 !important;
        transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
        appearance: checkbox !important;
        -webkit-appearance: checkbox !important;
    }
    
    .form-check-label {
        flex: 1 !important;
        margin-bottom: 0 !important;
        padding-right: 0 !important;
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
    
    /* Radio buttons */
    input[type="radio"] {
        width: 1.25rem !important;
        height: 1.25rem !important;
        min-width: 1.25rem !important;
        min-height: 1.25rem !important;
        max-width: 1.25rem !important;
        max-height: 1.25rem !important;
        transform: scale(1) !important;
        -webkit-transform: scale(1) !important;
    }
    
    /* File inputs */
    input[type="file"] {
        width: 100% !important;
        font-size: 0.9rem !important;
    }
    
    /* Form validation */
    .invalid-feedback,
    .valid-feedback {
        font-size: 0.85rem !important;
        display: block !important;
        width: 100% !important;
    }
}

/* ===== 58. Tables - Responsive with Horizontal Scroll ===== */
@media (max-width: 767.98px) {
    /* Wrap all tables in scrollable container */
    .table-responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        -ms-overflow-style: -ms-autohiding-scrollbar !important;
        position: relative !important;
        margin-bottom: 1rem !important;
    }
    
    /* Table itself */
    .table {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        font-size: 0.85rem !important;
        border-collapse: collapse !important;
    }
    
    /* Table cells */
    .table th,
    .table td {
        padding: 0.5rem 0.75rem !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        font-size: 0.85rem !important;
    }
    
    .table th {
        font-weight: 600 !important;
        background-color: #f8f9fa !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    /* Table headers */
    .table thead th {
        border-bottom: 2px solid #dee2e6 !important;
    }
    
    /* Small tables - allow wrapping if needed */
    .table-sm th,
    .table-sm td {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Table actions column */
    .table .btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }
    
    /* If table is inside a card */
    .card .table-responsive {
        margin: -1rem !important;
        padding: 1rem !important;
    }
    
    /* Stack table as cards alternative (optional - uncomment if needed) */
    /*
    .table-mobile-stack {
        display: block !important;
    }
    
    .table-mobile-stack thead {
        display: none !important;
    }
    
    .table-mobile-stack tbody,
    .table-mobile-stack tr,
    .table-mobile-stack td {
        display: block !important;
        width: 100% !important;
    }
    
    .table-mobile-stack tr {
        border: 1px solid #dee2e6 !important;
        margin-bottom: 1rem !important;
        border-radius: 0.375rem !important;
        padding: 0.75rem !important;
    }
    
    .table-mobile-stack td {
        border: none !important;
        padding: 0.5rem 0 !important;
        text-align: right !important;
    }
    
    .table-mobile-stack td:before {
        content: attr(data-label) ": ";
        font-weight: bold;
        display: inline-block;
        width: 40%;
    }
    */
}

/* ===== 59. Spacing Optimization - Reduced Padding/Margins ===== */
@media (max-width: 767.98px) {
    /* Reduce padding utilities */
    .p-5 { padding: 1.5rem !important; }
    .p-4 { padding: 1rem !important; }
    .p-3 { padding: 0.75rem !important; }
    .px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    
    /* Reduce margin utilities */
    .m-5 { margin: 1.5rem !important; }
    .m-4 { margin: 1rem !important; }
    .mx-5 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
    .mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
    .my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    .my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
    .mb-5 { margin-bottom: 1.5rem !important; }
    .mb-4 { margin-bottom: 1rem !important; }
    .mt-5 { margin-top: 1.5rem !important; }
    .mt-4 { margin-top: 1rem !important; }
    
    /* Card padding */
    .card-body {
        padding: 1rem !important;
    }
    
    .card-header {
        padding: 0.75rem 1rem !important;
    }
    
    /* Section spacing */
    .mb-4,
    .my-4 {
        margin-bottom: 1rem !important;
    }
    
    /* Page headers */
    h1, .h1 { font-size: 1.5rem !important; margin-bottom: 1rem !important; }
    h2, .h2 { font-size: 1.35rem !important; margin-bottom: 0.875rem !important; }
    h3, .h3 { font-size: 1.2rem !important; margin-bottom: 0.75rem !important; }
    h4, .h4 { font-size: 1.1rem !important; margin-bottom: 0.75rem !important; }
    h5, .h5 { font-size: 1rem !important; margin-bottom: 0.5rem !important; }
    h6, .h6 { font-size: 0.95rem !important; margin-bottom: 0.5rem !important; }
}

/* ===== 60. Additional Layout Fixes ===== */
@media (max-width: 767.98px) {
    /* Flex containers */
    .d-flex {
        flex-wrap: wrap !important;
    }
    
    /* Justify content */
    .justify-content-between {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .justify-content-between > * {
        width: 100% !important;
    }
    
    /* Form Switch Fixes - إصلاح form-switch على الموبايل */
    .form-switch {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding-right: 0 !important;
        min-height: 2rem !important;
    }
    
    .form-switch .form-check-input,
    .form-switch input[type="checkbox"] {
        width: 3rem !important;
        height: 1.5rem !important;
        min-width: 3rem !important;
        min-height: 1.5rem !important;
        margin-right: 0.5rem !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        background-color: #ced4da !important;
        border-radius: 2rem !important;
        position: relative !important;
        transition: background-color 0.2s !important;
        border: 1px solid rgba(0,0,0,0.1) !important;
        box-shadow: none !important;
        outline: none !important;
    }
    
    .form-switch .form-check-input:checked,
    .form-switch input[type="checkbox"]:checked {
        background-color: #198754 !important;
    }
    
    .form-switch .form-check-input::before,
    .form-switch input[type="checkbox"]::before {
        content: '' !important;
        position: absolute !important;
        width: 1.25rem !important;
        height: 1.25rem !important;
        border-radius: 50% !important;
        background-color: white !important;
        top: 0.125rem !important;
        right: 0.125rem !important;
        transition: transform 0.2s !important;
    }
    
    .form-switch .form-check-input:checked::before,
    .form-switch input[type="checkbox"]:checked::before {
        transform: translateX(-1.5rem) !important;
    }
    
    /* Submit buttons - تحسين أزرار الحفظ */
    button[type="submit"],
    input[type="submit"],
    .btn[type="submit"] {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        font-size: 1rem !important;
        padding: 0.75rem 1.5rem !important;
        margin-bottom: 1rem !important;
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Form bottom padding - مسافة إضافية في أسفل النماذج */
    form {
        padding-bottom: 2rem !important;
        margin-bottom: 2rem !important;
    }
    
    /* Floating save button container */
    #floating-save-btn-mobile {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
        border-radius: 0.5rem !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
        cursor: pointer !important;
    }
    
    /* منع أي overlay من تغطية الأزرار */
    #floating-save-btn-mobile {
        position: fixed !important;
        z-index: 99999 !important;
    }
    
    #save-points-settings-btn {
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* التأكد من عدم وجود overlay يغطي الأزرار */
    .sidebar-overlay,
    .modal-backdrop {
        z-index: 1040 !important;
    }
    
    /* التأكد من أن form-switch قابلة للنقر */
    .form-switch .form-check-input {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Grid gaps */
    .row.g-3,
    .row.g-4,
    .row.g-5 {
        --bs-gutter-x: 0.75rem !important;
        --bs-gutter-y: 0.75rem !important;
    }
    
    /* Modals */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }
    
    .modal-content {
        border-radius: 0.5rem !important;
    }
    
    .modal-body {
        padding: 1rem !important;
    }
    
    /* Alerts */
    .alert {
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Badges */
    .badge {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.65rem !important;
    }
    
    /* Dropdowns */
    .dropdown-menu {
        max-width: calc(100vw - 2rem) !important;
        font-size: 0.9rem !important;
    }
    
    /* Pagination */
    .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .page-link {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.85rem !important;
    }
}

/* ===== 61. Dashboard Specific Fixes ===== */
@media (max-width: 767.98px) {
    /* Dashboard cards */
    .dashboard-card {
        margin-bottom: 1rem !important;
    }
    
    /* Stats cards */
    .card-stats {
        padding: 1rem !important;
    }
    
    /* Chart containers */
    .chart-container {
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
    }
    
    /* Icon sizes in cards */
    .card-icon {
        font-size: 2rem !important;
    }
}

/* ===== 62. Settings Page Fixes ===== */
@media (max-width: 767.98px) {
    /* Settings sections */
    .settings-section {
        margin-bottom: 1.5rem !important;
        padding: 1rem !important;
    }
    
    /* Tabs */
    .nav-tabs {
        flex-wrap: wrap !important;
        border-bottom: 1px solid #dee2e6 !important;
    }
    
    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Tab content */
    .tab-content {
        padding: 1rem 0 !important;
    }
}

/* ===== 63. List View Fixes ===== */
@media (max-width: 767.98px) {
    /* List view headers */
    .list-header {
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Search and filter bars */
    .search-bar,
    .filter-bar {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Action buttons in lists */
    .list-actions {
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
    
    .list-actions .btn {
        width: 100% !important;
    }
}

/* ===== 64. Print Styles (Mobile) ===== */
@media print and (max-width: 767.98px) {
    .sidebar,
    .navbar,
    .btn,
    .pagination {
        display: none !important;
    }
    
    .content-wrapper {
        padding: 0 !important;
    }
    
    .card {
        border: none !important;
        box-shadow: none !important;
    }
}

/* ===== 65. Override Inline Styles - Force Mobile Responsive ===== */
@media (max-width: 767.98px) {
    /* تجاوز جميع inline styles للجداول */
    table[style*="min-width"],
    table[style*="width"] {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* تجاوز inline styles في th و td */
    th[style*="width"],
    td[style*="width"] {
        width: auto !important;
        min-width: auto !important;
        max-width: 100% !important;
    }
    
    /* تجاوز inline styles في select */
    select[style*="min-width"],
    select[style*="width"] {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* تجاوز inline styles في input */
    input[style*="min-width"],
    input[style*="width"]:not([type="checkbox"]):not([type="radio"]) {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* تجاوز inline styles للصور - جعلها responsive */
    img[style*="width"],
    img[style*="height"] {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }
    
    /* الصور الدائرية - حجم مناسب للموبايل */
    .rounded-circle[style*="width"],
    .rounded-circle[style*="height"] {
        max-width: 80px !important;
        max-height: 80px !important;
        width: 80px !important;
        height: 80px !important;
    }
    
    /* الأيقونات الدائرية الصغيرة */
    .bg-secondary.rounded-circle[style*="width"],
    .bg-secondary.rounded-circle[style*="height"],
    .bg-primary.rounded-circle[style*="width"],
    .bg-primary.rounded-circle[style*="height"] {
        max-width: 40px !important;
        max-height: 40px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 0.875rem !important;
    }
    
    /* تجاوز max-width في divs */
    div[style*="max-width"] {
        max-width: 100% !important;
    }
    
    /* تجاوز max-width في msg-box (الرسائل) */
    .msg-box[style*="max-width"] {
        max-width: 85% !important;
    }
    
    /* تجاوز width: auto في selects */
    select[style*="width: auto"],
    select[style*="width:auto"] {
        width: 100% !important;
    }
    
    /* تجاوز width: auto في inputs */
    input[style*="width: auto"],
    input[style*="width:auto"] {
        width: 100% !important;
    }
    
    /* تجاوز min-width في dropdowns */
    .dropdown-toggle[style*="min-width"],
    .dropdown-menu[style*="min-width"] {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* تجاوز width في progress bars - السماح بالعرض الأصلي */
    .progress-bar[style*="width"] {
        max-width: 100%;
    }
    
    /* تجاوز width في icons داخل style */
    i[style*="width"] {
        width: auto !important;
        min-width: auto !important;
    }
    
    /* تجاوز width في buttons */
    button[style*="min-width"],
    .btn[style*="min-width"] {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* تجاوز width: auto في buttons */
    button[style*="width: auto"],
    .btn[style*="width: auto"] {
        width: 100% !important;
    }
}

/* ===== 66. Specific Table Fixes - إصلاحات خاصة للجداول ===== */
@media (max-width: 767.98px) {
    /* الجداول التي تستخدم min-width كبير */
    .table[style*="min-width: 1000px"],
    .table[style*="min-width:1000px"] {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* الجداول في lesson_logs_list */
    .table-responsive .table {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* إزالة width من th في الجداول */
    .table th[width],
    .table th[style*="width"] {
        width: auto !important;
        min-width: auto !important;
    }
    
    /* جعل أعمدة الجداول مرنة */
    .table th,
    .table td {
        width: auto !important;
        min-width: 80px !important;
        max-width: 100% !important;
    }
    
    /* أعمدة صغيرة (#) */
    .table th:first-child,
    .table td:first-child {
        min-width: 40px !important;
        width: 40px !important;
        max-width: 40px !important;
    }
}

/* ===== 67. Form Select and Input Fixes ===== */
@media (max-width: 767.98px) {
    /* جميع selects يجب أن تكون 100% */
    .form-select[style*="min-width"],
    select.form-select[style*="min-width"],
    select[style*="min-width"] {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* inputs مع width ثابت */
    input.form-control[style*="width: 100px"],
    input.form-control[style*="width: 80px"],
    input.form-control[style*="width: 120px"],
    input.form-control[style*="width: 150px"] {
        width: 100% !important;
        min-width: 100% !important;
    }
    
    /* date inputs */
    input[type="date"][style*="width"],
    input[type="datetime-local"][style*="width"] {
        width: 100% !important;
        min-width: 100% !important;
    }
}

/* ===== 68. Image and Avatar Fixes ===== */
@media (max-width: 767.98px) {
    /* صور البروفايل الكبيرة */
    img.rounded-circle[style*="width: 150px"],
    img.rounded-circle[style*="width: 120px"],
    img.rounded-circle[style*="width: 90px"] {
        max-width: 100px !important;
        width: 100px !important;
        height: 100px !important;
        max-height: 100px !important;
    }
    
    /* divs دائرية للصور */
    .rounded-circle[style*="width: 150px"],
    .rounded-circle[style*="width: 120px"] {
        max-width: 100px !important;
        width: 100px !important;
        height: 100px !important;
        max-height: 100px !important;
    }
    
    /* صور صغيرة (avatars) */
    img[style*="width: 35px"],
    img[style*="width: 40px"],
    img[style*="width: 50px"] {
        max-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
        max-height: 40px !important;
    }
    
    /* divs دائرية صغيرة */
    .rounded-circle[style*="width: 35px"],
    .rounded-circle[style*="width: 30px"],
    .rounded-circle[style*="width: 50px"] {
        max-width: 40px !important;
        width: 40px !important;
        height: 40px !important;
        max-height: 40px !important;
    }
}

/* ===== 69. Message Box and Chat Fixes ===== */
@media (max-width: 767.98px) {
    /* رسائل المحادثة */
    .msg-box[style*="max-width: 75%"] {
        max-width: 90% !important;
    }
    
    /* أيقونات الرسائل */
    .bg-secondary.rounded-circle[style*="width: 35px"],
    .bg-primary.rounded-circle[style*="width: 35px"] {
        width: 35px !important;
        height: 35px !important;
        max-width: 35px !important;
        max-height: 35px !important;
    }
}

/* ===== 70. Dropdown and Menu Fixes ===== */
@media (max-width: 767.98px) {
    /* dropdown menus */
    .dropdown-menu[style*="min-width: 280px"],
    .dropdown-menu[style*="min-width:280px"] {
        min-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
        max-width: calc(100vw - 2rem) !important;
    }
    
    /* dropdown toggles */
    .dropdown-toggle[style*="min-width: 200px"],
    .dropdown-toggle[style*="min-width:200px"] {
        min-width: 100% !important;
        width: 100% !important;
    }
}

/* ===== 71. Checkbox and Switch Fixes ===== */
@media (max-width: 767.98px) {
    /* checkboxes كبيرة (switches) */
    input[type="checkbox"][style*="width: 3rem"],
    input[type="checkbox"][style*="width:3rem"] {
        width: 3rem !important;
        height: 1.5rem !important;
        min-width: 3rem !important;
        min-height: 1.5rem !important;
    }
}

/* ===== 72. QR Code Scanner Fixes ===== */
@media (max-width: 767.98px) {
    /* QR code scanner container */
    #reader[style*="max-width: 500px"] {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ===== 73. List Height Fixes ===== */
@media (max-width: 767.98px) {
    /* قوائم مع max-height ثابت */
    .list-group[style*="max-height: 500px"],
    .list-group[style*="max-height: 400px"],
    ul[style*="max-height: 500px"],
    ul[style*="max-height: 400px"] {
        max-height: 300px !important;
    }
    
    /* جداول مع max-height */
    .table-responsive[style*="max-height: 400px"] {
        max-height: 300px !important;
    }
}

/* ===== 74. Text Truncate Fixes ===== */
@media (max-width: 767.98px) {
    /* نصوص مع max-width ثابت */
    .text-truncate[style*="max-width: 250px"] {
        max-width: 100% !important;
    }
}

/* ===== 75. Additional Global Overrides - تجاوزات إضافية شاملة ===== */
@media (max-width: 767.98px) {
    /* التأكد من أن جميع العناصر لا تتجاوز عرض الشاشة */
    * {
        box-sizing: border-box !important;
    }
    
    /* منع أي عنصر من التسبب في overflow */
    body > *,
    .content-wrapper > *,
    .container-fluid > * {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* إصلاح أي عنصر يستخدم width ثابت */
    [style*="width: 100px"],
    [style*="width: 120px"],
    [style*="width: 150px"],
    [style*="width: 200px"],
    [style*="width: 250px"],
    [style*="width: 280px"],
    [style*="width: 300px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* إصلاح أي عنصر يستخدم min-width ثابت */
    [style*="min-width: 80px"],
    [style*="min-width: 100px"],
    [style*="min-width: 120px"],
    [style*="min-width: 150px"],
    [style*="min-width: 200px"],
    [style*="min-width: 280px"] {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    /* إصلاح أي عنصر يستخدم max-width صغير */
    [style*="max-width: 250px"],
    [style*="max-width: 500px"] {
        max-width: 100% !important;
    }
    
    /* التأكد من أن جميع الجداول responsive */
    .table-responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* إزالة أي width ثابت من الجداول */
    .table-responsive .table {
        width: max-content !important;
        min-width: 100% !important;
    }
    
    /* جعل جميع الأعمدة في الجداول مرنة */
    .table-responsive .table th,
    .table-responsive .table td {
        white-space: nowrap !important;
    }
    
    /* السماح بالتفاف النص في بعض الخلايا إذا لزم الأمر */
    .table-responsive .table td.text-wrap,
    .table-responsive .table th.text-wrap {
        white-space: normal !important;
    }
}

/* ===== 76. Viewport and Container Fixes ===== */
@media (max-width: 767.98px) {
    /* التأكد من أن viewport صحيح */
    html {
        -webkit-text-size-adjust: 100% !important;
        -ms-text-size-adjust: 100% !important;
        text-size-adjust: 100% !important;
    }
    
    /* منع zoom تلقائي في iOS */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
    
    /* إصلاح containers */
    .container,
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* إصلاح rows */
    .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }
    
    /* إصلاح columns */
    [class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ===== 77. Button Group and Action Fixes ===== */
@media (max-width: 767.98px) {
    /* مجموعات الأزرار */
    .btn-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .btn-group .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        border-radius: 6px !important;
    }
    
    .btn-group .btn:last-child {
        margin-bottom: 0 !important;
    }
    
    /* أزرار الإجراءات في الجداول */
    .table .btn-group {
        flex-direction: row !important;
        gap: 0.25rem !important;
    }
    
    .table .btn-group .btn {
        width: auto !important;
        min-width: 44px !important;
        padding: 0.375rem 0.5rem !important;
    }
    
    /* أزرار في list-group */
    .list-group-item .btn-group {
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .list-group-item .btn-group .btn {
        width: 100% !important;
    }
}

/* ===== 78. Modal and Popup Fixes ===== */
@media (max-width: 767.98px) {
    /* Modals */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
        width: calc(100% - 1rem) !important;
    }
    
    .modal-content {
        border-radius: 0.5rem !important;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem !important;
    }
    
    /* الجداول داخل modals */
    .modal-body .table-responsive {
        margin: -1rem !important;
        padding: 1rem !important;
    }
    
    /* Dropdowns */
    .dropdown-menu {
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
        left: auto !important;
        right: 1rem !important;
    }
}

/* ===== 80. Settings Pages - تحسين صفحات الإعدادات ===== */
@media (max-width: 767.98px) {
    /* إصلاح الـ checkboxes المتدرجة في صفحات الإعدادات */
    .bg-light.border.rounded .form-check,
    .card-body .form-check:not(.form-switch),
    .p-3 .form-check:not(.form-switch) {
        display: flex !important;
        align-items: center !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 1rem !important;
        gap: 0.75rem !important;
    }
    
    /* الـ checkbox نفسه */
    .bg-light.border.rounded .form-check input[type="checkbox"],
    .card-body .form-check:not(.form-switch) input[type="checkbox"],
    .p-3 .form-check:not(.form-switch) input[type="checkbox"] {
        width: 1.5rem !important;
        height: 1.5rem !important;
        min-width: 1.5rem !important;
        min-height: 1.5rem !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        border-radius: 0.375rem !important;
        border: 2px solid #dee2e6 !important;
        background-color: #fff !important;
        cursor: pointer !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        position: relative !important;
    }
    
    /* حالة التحديد */
    .bg-light.border.rounded .form-check input[type="checkbox"]:checked,
    .card-body .form-check:not(.form-switch) input[type="checkbox"]:checked,
    .p-3 .form-check:not(.form-switch) input[type="checkbox"]:checked {
        background-color: #0d6efd !important;
        border-color: #0d6efd !important;
    }
    
    /* علامة الصح */
    .bg-light.border.rounded .form-check input[type="checkbox"]:checked::after,
    .card-body .form-check:not(.form-switch) input[type="checkbox"]:checked::after,
    .p-3 .form-check:not(.form-switch) input[type="checkbox"]:checked::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -60%) rotate(45deg) !important;
        width: 0.4rem !important;
        height: 0.75rem !important;
        border: solid white !important;
        border-width: 0 2.5px 2.5px 0 !important;
    }
    
    /* الـ label */
    .bg-light.border.rounded .form-check .form-check-label,
    .card-body .form-check:not(.form-switch) .form-check-label,
    .p-3 .form-check:not(.form-switch) .form-check-label {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 1rem !important;
        line-height: 1.4 !important;
        color: #212529 !important;
        cursor: pointer !important;
    }
    
    /* صندوق الصلاحيات في صفحة إضافة معلم */
    .mb-4.p-3.bg-light.border.rounded {
        padding: 1rem !important;
        border-radius: 0.75rem !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05) !important;
    }
    
    /* تحسين list-group-item مع switches */
    .list-group-item.d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }
    
    .list-group-item.d-flex > div:first-child {
        width: 100% !important;
    }
    
    .list-group-item.d-flex > .form-check.form-switch {
        width: 100% !important;
        justify-content: flex-start !important;
        padding-right: 0 !important;
    }
    
    /* تحسين form-switch داخل list-group */
    .list-group-item .form-switch .form-check-input {
        margin-right: 0.5rem !important;
    }
}

/* ===== 81. Modern Settings Cards - بطاقات إعدادات حديثة ===== */
@media (max-width: 767.98px) {
    /* تحسين بطاقات الإعدادات */
    .card.shadow {
        border-radius: 1rem !important;
        border: none !important;
        overflow: hidden !important;
        margin-bottom: 1.25rem !important;
    }
    
    .card-header.bg-primary,
    .card-header.bg-success,
    .card-header.bg-info,
    .card-header.bg-warning,
    .card-header.bg-secondary,
    .card-header.bg-dark {
        padding: 1rem 1.25rem !important;
        border-bottom: none !important;
    }
    
    .card-header h5,
    .card-header h6 {
        font-size: 1rem !important;
        font-weight: 600 !important;
    }
    
    .card-body {
        padding: 1.25rem !important;
    }
    
    /* Form switches في الإعدادات */
    .card-body .form-check.form-switch {
        display: flex !important;
        align-items: center !important;
        padding: 0.75rem 1rem !important;
        margin-bottom: 0.5rem !important;
        background-color: #f8f9fa !important;
        border-radius: 0.5rem !important;
        transition: background-color 0.2s !important;
    }
    
    .card-body .form-check.form-switch:active {
        background-color: #e9ecef !important;
    }
    
    .card-body .form-check.form-switch .form-check-input {
        order: -1 !important;
        margin-left: 0.75rem !important;
        margin-right: 0 !important;
    }
    
    .card-body .form-check.form-switch .form-check-label {
        flex: 1 !important;
        font-size: 0.95rem !important;
        color: #495057 !important;
    }
}

/* ===== 82. Visibility Settings Page - صفحة إعدادات الخصوصية ===== */
@media (max-width: 767.98px) {
    /* تحسين قائمة الإعدادات */
    .list-group.mb-4 {
        border-radius: 0.75rem !important;
        overflow: hidden !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }
    
    .list-group .list-group-item {
        border-left: none !important;
        border-right: none !important;
        padding: 1rem 1.25rem !important;
    }
    
    .list-group .list-group-item:first-child {
        border-top: none !important;
    }
    
    .list-group .list-group-item:last-child {
        border-bottom: none !important;
    }
    
    /* العناوين الفرعية */
    .list-group h6.fw-bold {
        font-size: 0.9rem !important;
        padding: 0.5rem 0 !important;
        margin-top: 0.5rem !important;
    }
    
    /* الوصف النصي */
    .list-group-item .small.text-muted {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        margin-top: 0.25rem !important;
    }
    
    /* العنوان الرئيسي */
    .list-group-item strong.text-dark {
        font-size: 0.95rem !important;
    }
}

/* ===== 83. Point Settings Page - صفحة إعدادات النقاط ===== */
@media (max-width: 767.98px) {
    /* البطاقة الرئيسية لتفعيل النظام */
    .card.border-start.border-5.border-primary {
        border-radius: 1rem !important;
        border-width: 4px !important;
    }
    
    .card.border-start.border-5.border-primary .card-body {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }
    
    .card.border-start.border-5.border-primary .form-switch {
        justify-content: center !important;
    }
    
    /* تحسين headers البطاقات */
    .card-header.bg-white.py-3 {
        padding: 1rem !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        text-align: center !important;
    }
    
    .card-header.bg-white.py-3 h6 {
        margin-bottom: 0.5rem !important;
    }
    
    .card-header.bg-white.py-3 .form-switch {
        justify-content: center !important;
    }
    
    /* الحقول الرقمية في النقاط */
    .card-body .row.g-3 .col-6,
    .card-body .row.g-3 .col-4,
    .card-body .row.g-2 .col-6,
    .card-body .row.g-2 .col-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* حقول النقاط */
    .card-body input[type="number"] {
        text-align: center !important;
        font-weight: 600 !important;
        font-size: 1.1rem !important;
        padding: 0.75rem !important;
        border-radius: 0.5rem !important;
    }
    
    /* العناوين الفرعية */
    .card-body .small.fw-bold {
        font-size: 0.85rem !important;
        color: #6c757d !important;
        margin-bottom: 0.5rem !important;
        display: block !important;
    }
}

/* ===== 84. Institute Settings Page - صفحة إعدادات المعهد ===== */
@media (max-width: 767.98px) {
    /* جدول أيام الأسبوع */
    .table-bordered.table-sm {
        font-size: 0.85rem !important;
    }
    
    .table-bordered.table-sm th,
    .table-bordered.table-sm td {
        padding: 0.5rem 0.25rem !important;
        vertical-align: middle !important;
    }
    
    .table-bordered.table-sm input[type="time"] {
        font-size: 0.8rem !important;
        padding: 0.25rem 0.5rem !important;
        min-height: 36px !important;
    }
    
    .table-bordered.table-sm .form-check-input {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
    
    /* قسم العملات */
    .bg-light.border.rounded .form-check {
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
        background-color: #fff !important;
        border-radius: 0.5rem !important;
        border: 1px solid #e9ecef !important;
    }
    
    .bg-light.border.rounded .form-check:last-child {
        margin-bottom: 0 !important;
    }
}

/* ===== 79. Final Safety Overrides - تجاوزات نهائية للأمان ===== */
@media (max-width: 767.98px) {
    /* التأكد من عدم وجود أي عنصر يتجاوز الشاشة */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    
    /* جميع العناصر الرئيسية */
    #wrapper,
    .content-wrapper,
    .container-fluid,
    .container,
    .row,
    [class*="col-"] {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* منع horizontal scroll */
    * {
        max-width: 100% !important;
    }
    
    /* استثناءات - السماح للجداول بالتمرير الأفقي */
    .table-responsive,
    .table-responsive * {
        max-width: none !important;
    }
    
    /* السماح للصور بالتكيف */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}


/* ============================================
   🔧 إصلاحات التداخل على الموبايل (Mobile Overlap Fixes)
   ============================================ */

/* ===== 80. Dashboard Filter Buttons - إصلاح أزرار الفلترة ===== */
@media (max-width: 767.98px) {
    /* شريط الفلترة في الـ Dashboard */
    .d-flex.flex-wrap.gap-2,
    .d-flex.flex-wrap.gap-3,
    .d-flex.gap-2.flex-wrap,
    .d-flex.gap-3.flex-wrap {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    
    .d-flex.flex-wrap.gap-2 > *,
    .d-flex.flex-wrap.gap-3 > *,
    .d-flex.gap-2.flex-wrap > *,
    .d-flex.gap-3.flex-wrap > * {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* أزرار الفلترة (الفوج، التاريخ، الحالي) */
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-info {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        text-align: center !important;
    }
    
    /* شريط الفلترة الأفقي */
    .d-inline-flex.gap-2,
    .d-inline-flex.gap-3 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    
    .d-inline-flex.gap-2 > *,
    .d-inline-flex.gap-3 > * {
        width: 100% !important;
    }
}

/* ===== 81. Sidebar Overlap Fix - إصلاح تداخل القائمة الجانبية ===== */
@media (max-width: 767.98px) {
    /* القائمة الجانبية */
    .sidebar {
        z-index: 1060 !important;
    }
    
    /* طبقة التعتيم خلف القائمة */
    .sidebar-overlay {
        z-index: 1055 !important;
    }
    
    /* المحتوى الرئيسي */
    .content-wrapper {
        z-index: 1 !important;
        position: relative !important;
    }
    
    /* منع التفاعل مع المحتوى عند فتح القائمة */
    body.sidebar-open .content-wrapper {
        pointer-events: none !important;
    }
    
    body.sidebar-open .sidebar-overlay {
        pointer-events: auto !important;
    }
}

/* ===== 82. Modal Overlap Fix - إصلاح تداخل النوافذ المنبثقة ===== */
@media (max-width: 767.98px) {
    /* النوافذ المنبثقة */
    .modal {
        z-index: 1070 !important;
    }
    
    .modal-backdrop {
        z-index: 1065 !important;
    }
    
    .modal-dialog {
        margin: 1rem !important;
        max-width: calc(100vw - 2rem) !important;
        max-height: calc(100vh - 2rem) !important;
    }
    
    .modal-content {
        max-height: calc(100vh - 4rem) !important;
        overflow-y: auto !important;
    }
    
    .modal-body {
        max-height: calc(100vh - 12rem) !important;
        overflow-y: auto !important;
    }
    
    /* إغلاق القائمة الجانبية عند فتح modal */
    .modal.show ~ .sidebar {
        right: -100% !important;
    }
}

/* ===== 83. Dropdown Overlap Fix - إصلاح تداخل القوائم المنسدلة ===== */
@media (max-width: 767.98px) {
    .dropdown-menu {
        z-index: 1080 !important;
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: calc(100vw - 2rem) !important;
        max-width: 320px !important;
        top: auto !important;
        bottom: auto !important;
    }
    
    .dropdown-menu.show {
        animation: slideUp 0.2s ease-out;
    }
    
    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }
}

/* ===== 84. Navbar Notifications Fix - إصلاح إشعارات الـ Navbar ===== */
@media (max-width: 767.98px) {
    /* dropdown الإشعارات */
    #notificationsDropdownBtn + .dropdown-menu {
        position: fixed !important;
        top: 60px !important;
        left: 1rem !important;
        right: 1rem !important;
        transform: none !important;
        width: calc(100vw - 2rem) !important;
        max-width: none !important;
    }
}

/* ===== 85. Filter Panel Fix - إصلاح لوحة الفلترة ===== */
@media (max-width: 767.98px) {
    /* لوحة الفلترة */
    .card.shadow-sm.mb-4 form .row {
        flex-direction: column !important;
    }
    
    .card.shadow-sm.mb-4 form .row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* حقول الفلترة */
    .card.shadow-sm.mb-4 .form-select,
    .card.shadow-sm.mb-4 .form-control {
        width: 100% !important;
    }
    
    /* أزرار الفلترة */
    .card.shadow-sm.mb-4 .btn {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ===== 86. Dashboard Header Fix - إصلاح رأس لوحة التحكم ===== */
@media (max-width: 767.98px) {
    /* العنوان والأزرار في رأس الصفحة */
    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    
    .d-flex.justify-content-between.align-items-center.mb-4 > * {
        width: 100% !important;
    }
    
    .d-flex.justify-content-between.align-items-center.mb-4 h4,
    .d-flex.justify-content-between.align-items-center.mb-4 h3 {
        text-align: center !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* أزرار التصفية في رأس الصفحة */
    .d-flex.justify-content-between.align-items-center.mb-4 .d-flex {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    .d-flex.justify-content-between.align-items-center.mb-4 .d-flex .btn {
        width: 100% !important;
    }
}

/* ===== 87. Shift/Date Selector Fix - إصلاح محدد الفوج والتاريخ ===== */
@media (max-width: 767.98px) {
    /* أزرار اختيار الفوج */
    .btn-group.ms-auto,
    .btn-group.me-auto {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    .btn-group.ms-auto .btn,
    .btn-group.me-auto .btn {
        width: 100% !important;
        border-radius: 6px !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* dropdown الفوج */
    .btn-group .dropdown-menu {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: 1px solid #dee2e6 !important;
        margin-top: 0.25rem !important;
    }
    
    /* أزرار التاريخ */
    input[type="date"],
    input[type="month"] {
        width: 100% !important;
        min-height: 44px !important;
    }
}

/* ===== 88. Action Buttons Row Fix - إصلاح صف أزرار الإجراءات ===== */
@media (max-width: 767.98px) {
    /* صف الأزرار */
    .row.mb-4 .col-auto {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .row.mb-4 .col-auto .btn {
        width: 100% !important;
    }
    
    /* المسافات */
    .row.mb-4 .col-auto:last-child {
        margin-bottom: 0 !important;
    }
}

/* ===== 89. Floating Action Button - زر الإجراء العائم ===== */
@media (max-width: 767.98px) {
    .position-fixed.bottom-0 {
        left: 1rem !important;
        right: 1rem !important;
        bottom: 1rem !important;
        width: calc(100% - 2rem) !important;
    }
    
    .position-fixed.bottom-0 .btn {
        width: 100% !important;
    }
}

/* ===== 90. Toast Notifications Fix - إصلاح إشعارات Toast ===== */
@media (max-width: 767.98px) {
    #notification-toast-container {
        left: 1rem !important;
        right: 1rem !important;
        top: 70px !important;
        max-width: calc(100vw - 2rem) !important;
    }
    
    #notification-toast-container .toast {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ===== 91. Content Padding Fix - إصلاح حشوة المحتوى ===== */
@media (max-width: 767.98px) {
    .content-wrapper {
        padding: 0.75rem !important;
        padding-top: 1rem !important;
    }
    
    .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ===== 92. Card Stacking Fix - إصلاح تكديس البطاقات ===== */
@media (max-width: 767.98px) {
    .row > [class*="col-"] > .card {
        margin-bottom: 1rem !important;
    }
    
    .row:last-child > [class*="col-"]:last-child > .card {
        margin-bottom: 0 !important;
    }
}

/* ===== 93. Z-Index Hierarchy - ترتيب الطبقات ===== */
@media (max-width: 767.98px) {
    /* 1. المحتوى الرئيسي */
    .content-wrapper { z-index: 1 !important; }
    
    /* 2. الـ Navbar */
    .navbar { z-index: 1040 !important; }
    
    /* 3. طبقة التعتيم */
    .sidebar-overlay { z-index: 1050 !important; }
    
    /* 4. القائمة الجانبية */
    .sidebar { z-index: 1060 !important; }
    
    /* 5. خلفية Modal */
    .modal-backdrop { z-index: 1070 !important; }
    
    /* 6. Modal */
    .modal { z-index: 1080 !important; }
    
    /* 7. Dropdowns */
    .dropdown-menu.show { z-index: 1090 !important; }
    
    /* 8. Toasts */
    #notification-toast-container { z-index: 1100 !important; }
}

/* ===== 94. Quick Actions Grid Fix - إصلاح شبكة الإجراءات السريعة ===== */
@media (max-width: 767.98px) {
    /* الإجراءات السريعة في Dashboard */
    .row.g-3 > .col-6.col-md-4.col-lg-3,
    .row.g-2 > .col-6.col-md-4.col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .row.g-3 > .col-6.col-md-4.col-lg-3 .btn,
    .row.g-2 > .col-6.col-md-4.col-lg-3 .btn {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.8rem !important;
    }
    
    .row.g-3 > .col-6.col-md-4.col-lg-3 .btn i,
    .row.g-2 > .col-6.col-md-4.col-lg-3 .btn i {
        font-size: 1.25rem !important;
    }
}

/* ===== 95. Statistics Cards Fix - إصلاح بطاقات الإحصائيات ===== */
@media (max-width: 767.98px) {
    /* بطاقات الإحصائيات */
    .row > .col-xl-3.col-md-6,
    .row > .col-xl-4.col-md-6,
    .row > .col-lg-3.col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .row > .col-xl-3.col-md-6 .card,
    .row > .col-xl-4.col-md-6 .card,
    .row > .col-lg-3.col-md-6 .card {
        margin-bottom: 0.75rem !important;
    }
    
    .row > .col-xl-3.col-md-6 .card-body,
    .row > .col-xl-4.col-md-6 .card-body,
    .row > .col-lg-3.col-md-6 .card-body {
        padding: 0.75rem !important;
    }
    
    /* الأرقام في البطاقات */
    .row > .col-xl-3.col-md-6 .h5,
    .row > .col-xl-4.col-md-6 .h5,
    .row > .col-lg-3.col-md-6 .h5 {
        font-size: 1.25rem !important;
    }
    
    /* النص في البطاقات */
    .row > .col-xl-3.col-md-6 .text-xs,
    .row > .col-xl-4.col-md-6 .text-xs,
    .row > .col-lg-3.col-md-6 .text-xs {
        font-size: 0.65rem !important;
    }
}

/* ===== 96. Prevent Body Scroll When Sidebar Open ===== */
@media (max-width: 767.98px) {
    body.sidebar-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
}


/* ============================================
   🔧🔧🔧 إصلاحات شاملة للموبايل - CRITICAL FIXES 🔧🔧🔧
   ============================================ */

/* ===== 97. SIDEBAR COMPLETE FIX - إصلاح شامل للقائمة الجانبية ===== */
@media (max-width: 767.98px) {
    /* إخفاء القائمة الجانبية بالكامل افتراضياً */
    .sidebar,
    #sidebar-wrapper,
    [class*="sidebar"] {
        position: fixed !important;
        top: 0 !important;
        right: -300px !important;
        width: 280px !important;
        height: 100vh !important;
        z-index: 9999 !important;
        background: linear-gradient(180deg, #4e73df 0%, #224abe 100%) !important;
        transition: right 0.3s ease-in-out !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* عند فتح القائمة */
    .sidebar.mobile-sidebar-open,
    #sidebar-wrapper.mobile-sidebar-open {
        right: 0 !important;
    }
    
    /* طبقة التعتيم */
    .sidebar-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.6) !important;
        z-index: 9998 !important;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .sidebar-overlay.show {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ===== 98. CONTENT WRAPPER FIX - إصلاح المحتوى الرئيسي ===== */
@media (max-width: 767.98px) {
    /* المحتوى الرئيسي */
    .w-100,
    .content-wrapper,
    #content-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    .content-wrapper {
        padding: 0.5rem !important;
    }
    
    /* عند فتح القائمة الجانبية */
    body.sidebar-open .w-100,
    body.sidebar-open .content-wrapper,
    body.sidebar-open #content-wrapper {
        pointer-events: none !important;
        filter: brightness(0.7) !important;
    }
    
    body.sidebar-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100vh !important;
    }
}

/* ===== 99. FLOATING ICONS FIX - إخفاء الأيقونات العائمة ===== */
@media (max-width: 767.98px) {
    /* إخفاء أي أيقونات عائمة على الجانب */
    .position-fixed:not(.sidebar):not(.sidebar-overlay):not(#notification-toast-container),
    .fixed-bottom,
    .fixed-top:not(.navbar) {
        display: none !important;
    }
    
    /* استثناء container الإشعارات */
    #notification-toast-container {
        display: block !important;
        position: fixed !important;
        top: 70px !important;
        left: 10px !important;
        right: 10px !important;
        z-index: 10000 !important;
    }
}

/* ===== 100. FILTER BUTTONS FIX - إصلاح أزرار الفلترة ===== */
@media (max-width: 767.98px) {
    /* جميع أزرار الفلترة تظهر عمودياً */
    .d-flex.gap-2,
    .d-flex.gap-3,
    .d-inline-flex.gap-2,
    .d-inline-flex.gap-3,
    .btn-group:not(.dropdown-menu .btn-group) {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    
    .d-flex.gap-2 > *,
    .d-flex.gap-3 > *,
    .d-inline-flex.gap-2 > *,
    .d-inline-flex.gap-3 > * {
        width: 100% !important;
        margin: 0 !important;
    }
    
    /* أزرار الفلترة */
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-outline-info,
    .btn-outline-success,
    .btn-outline-warning,
    .btn-outline-danger {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.9rem !important;
    }
    
    /* Dropdown buttons */
    .dropdown-toggle {
        width: 100% !important;
    }
}

/* ===== 101. HEADER ROW FIX - إصلاح صف العنوان ===== */
@media (max-width: 767.98px) {
    /* صف العنوان مع الأزرار */
    .d-flex.justify-content-between {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    
    .d-flex.justify-content-between > * {
        width: 100% !important;
        text-align: center !important;
    }
    
    /* العناوين */
    h1, h2, h3, h4, h5, h6 {
        text-align: center !important;
    }
    
    .d-flex.justify-content-between h3,
    .d-flex.justify-content-between h4 {
        margin-bottom: 0.5rem !important;
    }
}

/* ===== 102. NAVBAR FIX - إصلاح شريط التنقل ===== */
@media (max-width: 767.98px) {
    .navbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        padding: 0.5rem 0.75rem !important;
        background: white !important;
    }
    
    /* زر القائمة */
    #menu-toggle {
        z-index: 1001 !important;
    }
    
    /* إخفاء العناصر غير الضرورية */
    .navbar .d-none.d-md-block {
        display: none !important;
    }
}

/* ===== 103. DROPDOWN MENU FIX - إصلاح القوائم المنسدلة ===== */
@media (max-width: 767.98px) {
    .dropdown-menu {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 2rem) !important;
        max-width: 320px !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        z-index: 10001 !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    }
    
    .dropdown-menu.show {
        animation: dropdownFadeIn 0.2s ease-out;
    }
    
    @keyframes dropdownFadeIn {
        from {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.95);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }
    
    /* dropdown items */
    .dropdown-item {
        padding: 0.875rem 1rem !important;
        font-size: 0.95rem !important;
    }
}

/* ===== 104. MODAL FIX - إصلاح النوافذ المنبثقة ===== */
@media (max-width: 767.98px) {
    .modal {
        z-index: 10002 !important;
    }
    
    .modal-backdrop {
        z-index: 10001 !important;
    }
    
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }
    
    .modal-content {
        border-radius: 12px !important;
        max-height: calc(100vh - 2rem) !important;
        overflow: hidden !important;
    }
    
    .modal-body {
        max-height: calc(100vh - 10rem) !important;
        overflow-y: auto !important;
    }
}

/* ===== 105. CARDS GRID FIX - إصلاح شبكة البطاقات ===== */
@media (max-width: 767.98px) {
    /* جميع الأعمدة تأخذ عرض كامل */
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-xl-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* استثناء: البطاقات الصغيرة (col-6) */
    .row > .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .card {
        margin-bottom: 0 !important;
    }
}

/* ===== 106. FORM CONTROLS FIX - إصلاح حقول النماذج ===== */
@media (max-width: 767.98px) {
    .form-control,
    .form-select {
        font-size: 16px !important; /* منع التكبير في iOS */
        padding: 0.875rem !important;
        border-radius: 8px !important;
    }
    
    .form-label {
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
    }
    
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"] {
        min-height: 48px !important;
    }
}

/* ===== 107. TABLE FIX - إصلاح الجداول ===== */
@media (max-width: 767.98px) {
    .table-responsive {
        border-radius: 8px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .table {
        font-size: 0.8rem !important;
        min-width: 600px !important;
    }
    
    .table th,
    .table td {
        padding: 0.5rem !important;
        white-space: nowrap !important;
    }
}

/* ===== 108. BUTTONS FIX - إصلاح الأزرار ===== */
@media (max-width: 767.98px) {
    .btn {
        min-height: 44px !important;
        padding: 0.625rem 1rem !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
        touch-action: manipulation !important;
    }
    
    .btn-sm {
        min-height: 38px !important;
        padding: 0.5rem 0.875rem !important;
        font-size: 0.85rem !important;
    }
    
    .btn-lg {
        min-height: 52px !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

/* ===== 109. HIDE UNNECESSARY ELEMENTS - إخفاء العناصر غير الضرورية ===== */
@media (max-width: 767.98px) {
    /* إخفاء العناصر الكبيرة على الموبايل */
    .d-none.d-md-block,
    .d-none.d-lg-block,
    .d-none.d-xl-block {
        display: none !important;
    }
    
    /* إظهار العناصر المخفية على الديسكتوب */
    .d-md-none,
    .d-lg-none {
        display: block !important;
    }
}

/* ===== 110. CONTAINER FIX - إصلاح الحاويات ===== */
@media (max-width: 767.98px) {
    .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        max-width: 100% !important;
    }
}

/* ===== 111. WRAPPER FIX - إصلاح الـ Wrapper ===== */
@media (max-width: 767.98px) {
    #wrapper {
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* ===== 112. CLOSE BUTTON FIX - زر إغلاق القائمة ===== */
@media (max-width: 767.98px) {
    #close-sidebar-mobile {
        position: absolute !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 10000 !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ===== 113. NOTIFICATIONS DROPDOWN FIX ===== */
@media (max-width: 767.98px) {
    #notificationsDropdownBtn + .dropdown-menu,
    .dropdown-menu[aria-labelledby="notificationsDropdownBtn"] {
        position: fixed !important;
        top: 60px !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        transform: none !important;
        width: calc(100vw - 1rem) !important;
        max-width: none !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
}

/* ===== 114. PREVENT HORIZONTAL SCROLL ===== */
@media (max-width: 767.98px) {
    * {
        max-width: 100vw;
    }
    
    .table,
    .table-responsive,
    .table-responsive * {
        max-width: none;
    }
    
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ============================================
   🔴 CRITICAL FIX - إصلاح نهائي لمشكلة الطبقات
   يُلغي جميع التعريفات السابقة المتعارضة
   ============================================ */

/* === الإصلاح العام (جميع الشاشات) === */

/* 1. modal-backdrop يجب أن يكون غير نشط عندما لا يظهر */
.modal-backdrop:not(.show) {
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. sidebar-overlay يجب أن يكون غير نشط عندما لا يظهر */
.sidebar-overlay:not(.show):not(.overlay-visible),
#sidebar-overlay:not(.show):not(.overlay-visible) {
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 3. أي overlay غير نشط */
.overlay:not(.show):not(.active):not(.visible) {
    pointer-events: none !important;
}

/* 4. التأكد من أن المحتوى الرئيسي قابل للتفاعل دائماً */
#wrapper,
.content-wrapper,
#content-wrapper,
.container-fluid,
main {
    pointer-events: auto;
}

/* 5. التأكد من أن جميع الأزرار والروابط قابلة للنقر */
button,
a,
.btn,
input,
select,
textarea,
[role="button"],
.form-check-input,
.form-switch,
.nav-link,
.dropdown-item,
.list-group-item-action {
    pointer-events: auto !important;
    position: relative;
}

/* === Z-Index الموحد النهائي === */
:root {
    --z-content: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-sidebar-overlay: 1080;
    --z-sidebar: 1090;
    --z-toast: 1100;
}

/* تطبيق Z-Index الموحد */
.modal-backdrop.show {
    z-index: var(--z-modal-backdrop) !important;
    pointer-events: auto !important;
}

.modal.show {
    z-index: var(--z-modal) !important;
}

.sidebar-overlay.show,
.sidebar-overlay.overlay-visible,
#sidebar-overlay.show,
#sidebar-overlay.overlay-visible {
    z-index: var(--z-sidebar-overlay) !important;
    pointer-events: auto !important;
}

#sidebar-wrapper.sidebar-visible,
#sidebar-wrapper.show,
.sidebar.sidebar-visible,
.sidebar.show {
    z-index: var(--z-sidebar) !important;
}

.dropdown-menu.show {
    z-index: var(--z-dropdown) !important;
}

#notification-toast-container,
.toast-container {
    z-index: var(--z-toast) !important;
}