/**
 * ملف التصميم المتجاوب (Responsive Design)
 * يدعم جميع الأجهزة: سطح المكتب، التابلت، الجوال
 * =================================================
 */

/* ========================================
   1. إعدادات عامة للتجاوب
   ======================================== */

* {
    box-sizing: border-box;
}

html {
    font-size: 16px; /* الحجم الأساسي */
}

body {
    overflow-x: hidden; /* منع التمرير الأفقي */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   2. الحاويات المتجاوبة
   ======================================== */

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
}

.row {
    margin-right: -15px;
    margin-left: -15px;
}

/* ========================================
   3. الجداول المتجاوبة
   ======================================== */

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* سلاسة التمرير على iOS */
}

/* تحسين عرض الجداول على الشاشات الصغيرة */
@media (max-width: 768px) {
    .table {
        font-size: 0.875rem; /* 14px */
        min-width: 100%;
    }

    .table thead {
        display: none; /* إخفاء رأس الجدول */
    }

    .table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        background: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.75rem;
        border: none;
        border-bottom: 1px solid #f0f0f0;
        text-align: right !important;
    }

    .table tbody td:last-child {
        border-bottom: none;
    }

    /* إضافة تسميات للأعمدة */
    .table tbody td::before {
        content: attr(data-label);
        font-weight: bold;
        color: #495057;
        margin-left: 1rem;
        flex-shrink: 0;
    }

    /* أزرار الإجراءات */
    .table tbody td .btn-group {
        display: flex;
        gap: 0.25rem;
        flex-wrap: wrap;
    }

    .table tbody td .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* ========================================
   4. البطاقات (Cards)
   ======================================== */

.card {
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

@media (max-width: 576px) {
    .card {
        margin-bottom: 0.75rem;
    }

    .card-body {
        padding: 1rem;
    }

    .card-header {
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }
}

/* ========================================
   5. النماذج (Forms)
   ======================================== */

.form-control,
.form-select {
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
}

@media (max-width: 576px) {
    .form-control,
    .form-select {
        font-size: 0.875rem;
        padding: 0.5rem;
    }

    .form-label {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
    }

    /* تكديس الأعمدة عمودياً */
    .row > [class*="col-"] {
        margin-bottom: 0.75rem;
    }
}

/* ========================================
   6. الأزرار
   ======================================== */

.btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 576px) {
    .btn {
        font-size: 0.875rem;
        padding: 0.5rem 0.75rem;
    }

    .btn-lg {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }

    .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* أزرار بعرض كامل على الجوال */
    .btn-block-mobile {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* ========================================
   7. القوائم الجانبية (Sidebar)
   ======================================== */

@media (max-width: 992px) {
    .sidebar {
        position: fixed;
        top: 0;
        right: -300px; /* مخفية افتراضياً */
        width: 300px;
        height: 100vh;
        background: white;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
        transition: right 0.3s ease;
        z-index: 1050;
        overflow-y: auto;
    }

    .sidebar.show {
        right: 0; /* تظهر عند الضغط */
    }

    /* زر فتح/إغلاق القائمة */
    .sidebar-toggle {
        display: block;
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 1051;
        background: var(--bs-primary);
        color: white;
        border: none;
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        cursor: pointer;
    }

    /* خلفية شفافة عند فتح القائمة */
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1049;
    }

    .sidebar-overlay.show {
        display: block;
    }
}

/* ========================================
   8. الشريط العلوي (Navbar)
   ======================================== */

@media (max-width: 768px) {
    .navbar {
        padding: 0.5rem 1rem;
    }

    .navbar-brand {
        font-size: 1rem;
    }

    .navbar-nav {
        flex-direction: column;
        width: 100%;
    }

    .navbar-nav .nav-item {
        width: 100%;
        text-align: right;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
    }
}

/* ========================================
   9. الإشعارات والتنبيهات
   ======================================== */

@media (max-width: 576px) {
    .alert {
        font-size: 0.875rem;
        padding: 0.75rem;
    }

    .toast {
        max-width: 90%;
        margin: 0 auto;
    }
}

/* ========================================
   10. DataTables المتجاوبة
   ======================================== */

@media (max-width: 768px) {
    .dataTables_wrapper {
        font-size: 0.875rem;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: center;
        margin-bottom: 1rem;
    }

    .dataTables_wrapper .dataTables_length select {
        width: auto;
        display: inline-block;
    }

    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
        margin-top: 0.5rem;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: center;
        margin-top: 1rem;
    }

    .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ========================================
   11. الأيقونات
   ======================================== */

@media (max-width: 576px) {
    .fa, .fas, .far, .fab {
        font-size: 1rem;
    }

    /* إخفاء النصوص وإظهار الأيقونات فقط */
    .btn .btn-text {
        display: none;
    }

    .btn .btn-icon {
        display: inline-block;
    }
}

/* ========================================
   12. المودال (Modal)
   ======================================== */

@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-content {
        border-radius: 0.5rem;
    }

    .modal-header,
    .modal-footer {
        padding: 0.75rem 1rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-title {
        font-size: 1rem;
    }
}

/* ========================================
   13. الفلاتر والبحث
   ======================================== */

@media (max-width: 768px) {
    .filter-section {
        margin-bottom: 1rem;
    }

    .filter-section .row {
        margin: 0;
    }

    .filter-section [class*="col-"] {
        padding: 0.25rem;
    }

    .filter-section .form-control,
    .filter-section .form-select {
        font-size: 0.875rem;
    }
}

/* ========================================
   14. الإحصائيات والبطاقات الصغيرة
   ======================================== */

@media (max-width: 768px) {
    .stats-card {
        margin-bottom: 1rem;
    }

    .stats-card .card-body {
        padding: 1rem;
    }

    .stats-card h3 {
        font-size: 1.5rem;
    }

    .stats-card p {
        font-size: 0.875rem;
    }
}

/* ========================================
   15. الطباعة
   ======================================== */

@media print {
    .sidebar,
    .navbar,
    .btn,
    .filter-section,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        display: none !important;
    }

    .table {
        font-size: 10pt;
    }

    .table thead {
        display: table-header-group;
    }

    .table tbody tr {
        page-break-inside: avoid;
    }
}

/* ========================================
   16. شاشات كبيرة جداً (4K)
   ======================================== */

@media (min-width: 1920px) {
    .container {
        max-width: 1800px;
    }

    html {
        font-size: 18px;
    }
}

/* ========================================
   17. شاشات صغيرة جداً (< 320px)
   ======================================== */

@media (max-width: 320px) {
    html {
        font-size: 14px;
    }

    .btn {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
    }

    .card-body {
        padding: 0.75rem;
    }
}

/* ========================================
   18. التوجه الأفقي للجوال
   ======================================== */

@media (max-width: 768px) and (orientation: landscape) {
    .table {
        font-size: 0.75rem;
    }

    .modal-dialog {
        max-width: 90%;
    }
}

/* ========================================
   19. دعم الوضع الداكن (اختياري)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* يمكن إضافة أنماط الوضع الداكن هنا */
}

/* ========================================
   20. تحسينات إضافية للأداء
   ======================================== */

/* تسريع الرسوم المتحركة */
* {
    -webkit-tap-highlight-color: transparent;
}

/* تحسين التمرير */
.table-responsive,
.modal-body {
    -webkit-overflow-scrolling: touch;
}

/* منع التكبير على iOS عند التركيز على الحقول */
@media (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important; /* منع التكبير التلقائي */
    }
}