/* استيراد الخط من Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700;900&display=swap');

* {
    font-family: 'Tajawal', sans-serif;
}

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */

/* ===== موبايل صغير (حتى 480px) ===== */
@media (max-width: 480px) {
    /* ===== الهيدر ===== */
    .nav-container {
        padding: 8px 10px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }

    .nav-logo .logo-text {
        font-size: 16px !important;
    }

    .nav-logo img {
        width: 32px !important;
        height: 32px !important;
    }

    .nav-menu {
        gap: 4px !important;
        justify-content: center !important;
    }

    .nav-link {
        padding: 6px 10px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }

    .nav-title {
        font-size: 14px !important;
    }

    .btn-logout {
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    /* ===== الهيرو ===== */
    .hero-section {
        padding: 20px 15px !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    .hero-content h1 {
        font-size: 22px !important;
    }

    .hero-content p {
        font-size: 14px !important;
    }

    .hero-stats {
        gap: 15px !important;
        justify-content: center !important;
    }

    .hero-stats .stat-item .number {
        font-size: 24px !important;
    }

    .hero-image img {
        width: 100px !important;
        height: 100px !important;
    }

    /* ===== الكروت السريعة ===== */
    .quick-actions {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .quick-action-card {
        padding: 15px 10px !important;
    }

    .quick-action-card .icon {
        font-size: 28px !important;
    }

    .quick-action-card h4 {
        font-size: 13px !important;
    }

    .quick-action-card p {
        font-size: 11px !important;
    }

    /* ===== المجموعات ===== */
    .groups-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .group-card {
        padding: 15px !important;
    }

    .group-card .group-name {
        font-size: 16px !important;
    }

    /* ===== الفورم ===== */
    .form-card {
        padding: 12px 15px !important;
    }

    .form-card .form-control,
    .form-card .form-select {
        font-size: 14px !important;
        padding: 8px 12px !important;
    }

    /* ===== الجداول ===== */
    .table-custom {
        font-size: 12px !important;
    }

    .table-custom thead th,
    .table-custom tbody td {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    /* ===== الأزرار ===== */
    .btn-add,
    .btn-save,
    .btn-report,
    .btn-backup,
    .btn-delete,
    .btn-edit {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }

    /* ===== الصفحات ===== */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .page-header h2 {
        font-size: 18px !important;
        text-align: center !important;
    }

    .page-header .btn-group {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .page-header .btn-group .btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ===== البحث ===== */
    .search-box {
        flex-direction: column !important;
    }

    .search-box .form-control {
        width: 100% !important;
        min-width: unset !important;
    }

    .search-box .btn-search,
    .search-box .btn-clear {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ===== الحضور ===== */
    .switch-container {
        gap: 4px !important;
    }

    .switch {
        width: 32px !important;
        height: 18px !important;
    }

    .switch .slider:before {
        height: 12px !important;
        width: 12px !important;
        left: 3px !important;
        bottom: 3px !important;
    }

    .switch input:checked+.slider:before {
        transform: translateX(14px) !important;
    }

    .switch-label {
        font-size: 10px !important;
    }

    /* ===== مودال ===== */
    .modal-dialog {
        margin: 10px !important;
    }

    .modal-content {
        border-radius: 16px !important;
    }

    .modal-header {
        padding: 12px 16px !important;
    }

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

    .modal-body {
        padding: 16px !important;
    }

    .modal-footer {
        flex-direction: column !important;
        gap: 8px !important;
    }

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

    /* ===== البطاقات الإحصائية ===== */
    .stat-card {
        padding: 12px !important;
    }

    .stat-card .stat-number {
        font-size: 24px !important;
    }

    .stat-card .stat-label {
        font-size: 12px !important;
    }

    /* ===== الشارتات ===== */
    .chart-container {
        height: 180px !important;
    }

    /* ===== التقرير ===== */
    .report-card {
        padding: 12px !important;
    }

    .report-card .report-number {
        font-size: 20px !important;
    }

    /* ===== النسخ الاحتياطي ===== */
    .backup-card {
        padding: 16px !important;
    }

    .backup-card .icon {
        font-size: 40px !important;
    }

    .backup-card h4 {
        font-size: 16px !important;
    }

    .backup-card p {
        font-size: 13px !important;
    }

    /* ===== الـ QR ===== */
    #reader {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }
}

/* ===== موبايل متوسط (481px - 768px) ===== */
@media (min-width: 481px) and (max-width: 768px) {
    .nav-container {
        padding: 10px 15px !important;
        flex-wrap: wrap !important;
    }

    .nav-logo .logo-text {
        font-size: 18px !important;
    }

    .nav-link {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .hero-section {
        padding: 30px 25px !important;
    }

    .hero-content h1 {
        font-size: 28px !important;
    }

    .quick-actions {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .groups-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .table-custom {
        font-size: 13px !important;
    }

    .table-custom thead th,
    .table-custom tbody td {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

/* ===== تابليت (769px - 1024px) ===== */
@media (min-width: 769px) and (max-width: 1024px) {
    .quick-actions {
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .groups-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ===== تحسينات عامة ===== */
* {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ===== تحسين التمرير ===== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ===== تحسين النقر على الموبايل ===== */
@media (pointer: coarse) {
    button,
    .btn,
    .nav-link,
    .quick-action-card,
    .group-card {
        min-height: 44px;
        min-width: 44px;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
        /* منع تكبير تلقائي على iOS */
    }
}