/* ========================================
   تصميم متجاوب للهواتف والأجهزة اللوحية
   ======================================== */

   @media (max-width: 1200px) {
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .charts-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .charts-row {
        grid-template-columns: 1fr;
    }
    
    .filter-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    /* الشريط الجانبي */
    .sidebar {
        transform: translateX(100%);
        box-shadow: none;
    }
    
    .sidebar.active {
        transform: translateX(0);
        box-shadow: var(--shadow-xl);
    }
    
    .main-content {
        margin-right: 0 !important;
    }
    
    /* الفلاتر */
    .filter-row {
        grid-template-columns: 1fr;
    }
    
    .filter-actions {
        flex-direction: column;
    }
    
    .filter-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* بطاقات المؤشرات */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .stat-card {
        padding: var(--spacing-md);
    }
    
    .stat-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .stat-value {
        font-size: var(--font-size-lg);
    }
    
    /* رأس الجدول */
    .table-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .table-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .table-actions .btn {
        flex: 1;
        justify-content: center;
    }
    
    /* الرسوم البيانية */
    .chart-body {
        height: 250px;
    }
    
    /* الجداول */
    .data-table {
        font-size: var(--font-size-xs);
    }
    
    .data-table th,
    .data-table td {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .filter-body {
        padding: var(--spacing-md);
    }
    
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .chart-header .badge {
        align-self: flex-start;
    }
    
    .chart-body {
        height: 200px;
        padding: var(--spacing-md);
    }
    
    .table-header h3 {
        font-size: var(--font-size-sm);
    }
    
    .btn-sm {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* وضع أفقي للهواتف */
@media (max-width: 896px) and (orientation: landscape) {
    .sidebar {
        width: 240px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .charts-row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .filter-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* شاشات عالية الدقة */
@media (min-width: 1400px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .charts-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ========================================
   تحسينات إضافية للهواتف
   ======================================== */

/* تحسين النقر للعناصر */
@media (max-width: 768px) {
    .nav-link,
    .submenu li a,
    .btn,
    .filter-toggle,
    .sidebar-toggle {
        min-height: 44px;
    }
    
    .filter-input,
    .filter-select {
        min-height: 44px;
    }
    
    /* منع التكبير على الإدخال */
    input[type="date"],
    input[type="text"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* تحسين شريط التمرير */
@media (max-width: 768px) {
    ::-webkit-scrollbar {
        width: 3px;
        height: 3px;
    }
}

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

/* طباعة */
@media print {
    .sidebar,
    .filter-section,
    .table-actions,
    .btn {
        display: none !important;
    }
    
    .main-content {
        margin: 0;
        padding: 0;
    }
    
    .stat-card,
    .chart-card,
    .table-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}