/* ============================================================
   mobile-unified.css — الطبقة القانونية الموحّدة للموبايل
   تُحمَّل أخيراً في لاية-آوتس الأدمن لتوحيد السلوك وسدّ فجوات التوافق
   دون تعديل 186 view. نقاط الكسر القياسية: 992 (تابلت) · 768 (موبايل) · 480 (صغير).
   الفكرة: محدّدات السمة [style*="..."] مع !important تتفوّق على الأنماط inline
   فتُصلَح الشبكات/الجداول/التنبيهات المكتوبة inline عالمياً من مكان واحد.
   ============================================================ */

/* ===== تابلت وموبايل ≤992: شبكة أمان الجداول (آمنة بغضّ النظر عن حالة الشريط) ===== */
@media (max-width: 992px) {
    /* أي حاوية تمرير معروفة تبقى تُمرّر أفقياً */
    #studentsTableWrap,
    .table-responsive, .table-container, .table-wrapper, .table-scroll-wrapper, .inline-overflow {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* الجداول غير الملفوفة: حوّلها لكتلة قابلة للتمرير الأفقي (نمط mobile-reports المعتمد) */
    .data-table, .sp-table, .students-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* ===== موبايل ≤768: الأساس + النماذج + اللمس + التنبيهات ===== */
@media (max-width: 768px) {
    /* إصلاح تغطية الهيدر الثابت لأعلى المحتوى (الهيدر 70px يُفرض بـ!important بينما المحتوى كان 60px) */
    .main-content {
        margin-top: 70px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* الهيدر صفّ واحد لا يلتفّ: العنوان ينكمش/يُقتطع + زر المستخدم مختصر (أيقونة فقط)
       — كان يلتفّ فيطفو زرّ المستخدم فوق المحتوى */
    .header { flex-wrap: nowrap !important; gap: 6px; }
    .header-left { min-width: 0 !important; flex: 1 1 auto; overflow: hidden; }
    .header-right { flex-wrap: nowrap !important; flex-shrink: 0; gap: 6px; }
    /* السبب الجذري للتداخل: قاعدة قديمة تجعل .user-dropdown ثابتة (fixed) فتخرج من الهيدر وتطفو فوق المحتوى */
    .user-dropdown { position: relative !important; top: auto !important; left: auto !important; right: auto !important; width: auto !important; }
    /* قوائم الهيدر المنسدلة (المستخدم/الإشعارات) تُثبَّت بعرض الشاشة عند فتحها بدل أن تخرج من الإطار */
    #userDropdownMenu, #notificationDropdown {
        position: fixed !important;
        top: 68px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    .page-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem !important; }
    .user-menu-btn { padding: 6px !important; gap: 0 !important; }
    .user-menu-btn > div:nth-child(2), .user-menu-btn .fa-chevron-down { display: none !important; }

    /* طيّ كل شبكات النماذج لعمود واحد — يشمل الـinline grids عبر محدّد السمة (يتفوّق بـ!important) */
    /* يغطّي صيغتي repeat(N,1fr) و«1fr 1fr [1fr/auto]» الحرفية (مودالات/YearManagement/Hall) معاً */
    [style*="repeat(2, 1fr)"], [style*="repeat(2,1fr)"],
    [style*="repeat(3, 1fr)"], [style*="repeat(3,1fr)"],
    [style*="repeat(4, 1fr)"], [style*="repeat(4,1fr)"],
    [style*="1fr 1fr"],
    .form-grid-2, .form-grid-3, .form-row-grid {
        grid-template-columns: 1fr !important;
    }

    /* صفوف flex تلتفّ بدل الفيضان الأفقي */
    .filters-row, .header-actions, .toolbar, .actions-row, .btn-group-responsive {
        flex-wrap: wrap !important;
    }

    /* أهداف لمس مريحة (≥42px) للأزرار والمدخلات */
    .btn, .form-control, .form-select, select,
    input[type="text"], input[type="number"], input[type="tel"],
    input[type="date"], input[type="email"], input[type="password"], input[type="search"] {
        min-height: 42px;
    }

    /* التنبيهات لا تتجاوز عرض الشاشة (يشمل toasts بعرض ثابت inline min-width:350px) */
    [style*="min-width: 350px"], [style*="min-width:350px"],
    .toast, .toast-message, #toast-container > div {
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* الصور مرنة دائماً */
    img { max-width: 100%; height: auto; }

    /* المودالات لا تتجاوز الشاشة */
    .modal-dialog { max-width: calc(100vw - 20px) !important; margin: 10px auto !important; }

    /* حاويات بعرض ثابت كبير inline تُقيَّد بعرض الشاشة */
    [style*="width: 600px"], [style*="width:600px"],
    [style*="width: 700px"], [style*="width:700px"],
    [style*="width: 800px"], [style*="width:800px"],
    [style*="min-width: 600px"], [style*="min-width:600px"] {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}

/* ===== صغير جداً ≤480: حشوة أضيق + خطوط أصغر قليلاً للعناوين ===== */
@media (max-width: 480px) {
    .main-content { padding-left: 8px !important; padding-right: 8px !important; }
    .section-title { font-size: 1.05rem !important; }
}