/* ============================================================
   ✅ موبایل‌سازی حرفه‌ای سیستم مدیریت مدرسه
   ============================================================ */

/* ============================================================
   دستگاه‌های بسیار کوچک (موبایل - کمتر از 576px)
   ============================================================ */
@media (max-width: 576px) {
    
    /* ---------- سایدبار ---------- */
    .sidebar {
        display: none !important;
    }
    .main-content {
        margin-right: 0 !important;
        padding: 10px !important;
    }
    
    /* ---------- هدر ---------- */
    .top-header {
        flex-direction: column !important;
        text-align: center !important;
        padding: 10px !important;
        gap: 5px !important;
    }
    .top-header .welcome h3 {
        font-size: 16px !important;
    }
    .top-header .welcome p {
        font-size: 11px !important;
    }
    .user-info {
        justify-content: center !important;
    }
    .user-avatar {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }
    
    /* ---------- کارت‌های آمار ---------- */
    .stats-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .stat-card {
        padding: 8px 5px !important;
        border-radius: 8px !important;
    }
    .stat-number {
        font-size: 20px !important;
    }
    .stat-label {
        font-size: 9px !important;
    }
    
    /* ---------- دکمه‌های خروجی ---------- */
    .export-section {
        flex-direction: column !important;
        gap: 5px !important;
    }
    .btn-export-csv,
    .btn-export-csv-all {
        width: 100% !important;
        justify-content: center !important;
        font-size: 12px !important;
        padding: 8px !important;
    }
    
    /* ---------- جستجو ---------- */
    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 10px !important;
    }
    .search-form {
        min-width: 100% !important;
    }
    .search-box {
        padding: 5px 10px !important;
    }
    .search-input {
        font-size: 12px !important;
        padding: 6px 8px !important;
    }
    .btn-search {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
    
    /* ---------- تب‌ها ---------- */
    .tabs-container {
        flex-wrap: wrap !important;
        gap: 3px !important;
        padding: 4px !important;
    }
    .tab {
        flex: 1 1 45% !important;
        font-size: 10px !important;
        padding: 5px 4px !important;
        gap: 3px !important;
    }
    .tab i {
        font-size: 12px !important;
    }
    
    /* ---------- جدول ---------- */
    .students-table {
        padding: 5px !important;
    }
    .data-table {
        font-size: 9px !important;
        min-width: 550px !important;
    }
    .data-table th,
    .data-table td {
        padding: 2px 1px !important;
        font-size: 8px !important;
    }
    .data-table th {
        font-size: 8px !important;
        padding: 2px 1px !important;
    }
    
    /* ---------- وضعیت‌ها ---------- */
    .stage-badge {
        font-size: 7px !important;
        padding: 1px 4px !important;
    }
    .status-badge {
        font-size: 7px !important;
        padding: 1px 4px !important;
    }
    
    /* ---------- دکمه‌های عملیاتی ---------- */
    .btn-group {
        gap: 1px !important;
    }
    .btn-action {
        width: 18px !important;
        height: 18px !important;
        font-size: 8px !important;
    }
    .btn-action i {
        font-size: 8px !important;
    }
    .btn-reset {
        width: 18px !important;
        height: 18px !important;
        font-size: 8px !important;
    }
    .btn-reset i {
        font-size: 8px !important;
    }
    .btn-delete {
        padding: 2px 4px !important;
        font-size: 8px !important;
    }
    .btn-delete i {
        font-size: 8px !important;
    }
    .btn-assign-small {
        font-size: 8px !important;
        padding: 2px 4px !important;
    }
    .btn-view-profile {
        font-size: 8px !important;
        padding: 2px 4px !important;
    }
    .btn-detail {
        font-size: 8px !important;
        padding: 2px 4px !important;
    }
    .btn-payment-small {
        font-size: 7px !important;
        padding: 1px 3px !important;
    }
    
    /* ---------- کلاس‌ها ---------- */
    .class-select-small {
        font-size: 8px !important;
        padding: 1px 3px !important;
        width: 55px !important;
    }
    
    /* ---------- پرداخت ---------- */
    .paid-amount {
        font-size: 8px !important;
    }
    .unpaid-text {
        font-size: 8px !important;
    }
    .success-text {
        font-size: 8px !important;
    }
    .error-text {
        font-size: 8px !important;
    }
    .pending-text {
        font-size: 8px !important;
    }
    .text-muted {
        font-size: 8px !important;
    }
    .profile-status.completed {
        font-size: 10px !important;
    }
    .profile-status.incomplete {
        font-size: 8px !important;
    }
    
    /* ---------- مودال ---------- */
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px !important;
    }
    .modal-header h3 {
        font-size: 14px !important;
    }
    .profile-detail-label {
        width: 80px !important;
        font-size: 11px !important;
    }
    .profile-detail-value {
        font-size: 11px !important;
    }
    
    /* ---------- فرم‌ها ---------- */
    .form-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .form-actions {
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .btn-save,
    .btn-skip {
        width: 100% !important;
        justify-content: center !important;
        font-size: 13px !important;
        padding: 10px !important;
    }
    .input-group input,
    .input-group textarea,
    .input-group select {
        font-size: 12px !important;
        padding: 8px !important;
    }
    .input-group label {
        font-size: 12px !important;
    }
    
    /* ---------- کارت‌های داشبورد ---------- */
    .actions-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .dashboard-card {
        padding: 10px !important;
    }
    .dashboard-card i {
        font-size: 28px !important;
    }
    .dashboard-card h3 {
        font-size: 11px !important;
    }
    .dashboard-card p {
        font-size: 9px !important;
    }
    .dashboard-card .badge {
        font-size: 8px !important;
        padding: 1px 5px !important;
        top: 5px !important;
        left: 5px !important;
    }
}

/* ============================================================
   دستگاه‌های متوسط (تبلت - 577px تا 992px)
   ============================================================ */
@media (min-width: 577px) and (max-width: 992px) {
    .sidebar {
        width: 200px !important;
    }
    .main-content {
        margin-right: 200px !important;
        padding: 15px !important;
    }
    .stats-cards {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .actions-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .data-table {
        font-size: 11px !important;
    }
    .data-table th,
    .data-table td {
        padding: 4px 3px !important;
        font-size: 10px !important;
    }
}

/* ============================================================
   دستگاه‌های بزرگ (دسکتاپ - 993px به بالا)
   ============================================================ */
@media (min-width: 993px) {
    /* حالت عادی - تغییری نمی‌دهیم */
}