/* =====================================================================
   05-responsive.css
   منقولة من responsive.css الأصلية في زمام — القواعد العامة المفيدة عبر
   كل المنصة (تحويل الجداول لبطاقات على الموبايل، تحجيم النصوص/الحشو).
   استُبعدت عمداً قواعد الشريط الجانبي القديمة الخاصة بتطبيق الصفحة
   الواحدة (.dashboard-layout, .sidebar عند 992px) لأن هيكل الإدارة
   الجديد (Sidebar+Topbar متعدد الصفحات) له قواعده الاستجابية الخاصة في
   02-components.css بنقطة انكسار مختلفة (900px) — لتفادي ازدواجية
   متعارضة بين نظامين تخطيط مختلفين.
   ===================================================================== */

@media (min-width: 420px) {
    .nav-brand h1, .brand-text h1 { font-size: 1.1rem; }
}
@media (min-width: 768px) {
    .navbar { padding: 12px 5%; }
}
@media (min-width: 480px) {
    .nav-btn { padding: 12px 22px; font-size: 0.85rem; }
    .container { padding: 0 16px; margin: 20px auto; }
}
@media (min-width: 768px) {
    .container { padding: 0 24px; margin: 24px auto; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (min-width: 480px) {
    .hero-banner h2 { font-size: 1.8rem; }
    .hero-banner p { font-size: 1rem; }
}
@media (min-width: 768px) {
    .hero-banner h2 { font-size: 2rem; }
    .hero-banner p { font-size: 1.05rem; }
    .hero-banner { margin-bottom: 32px; }
}
@media (min-width: 480px) { .news-section-title { font-size: 1.2rem; } }
@media (min-width: 600px) { .news-cards-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 900px) { .news-cards-grid { grid-template-columns: repeat(3,1fr); gap: 18px; } }
@media (min-width: 480px) { .card-box { padding: 22px 20px; } }
@media (min-width: 768px) { .card-box { padding: 28px 28px; } }
@media (min-width: 480px) { .form-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } }
@media (min-width: 768px) { .form-grid { gap: 16px; margin-bottom: 14px; } }
@media (min-width: 480px) { .form-label { font-size: 0.85rem; } }
@media (min-width: 480px) { .btn-submit { width: auto; min-width: 180px; } }
@media (min-width: 480px) { .stat-card { padding: 16px 14px; } }
/* auto-fit(minmax(190px,1fr)) لسه بيحط 3 كروت في الصف عند عرض
   الموبايل الصغير (لقطة شاشة فعلية أكّدت: 3 كروت فوق + كارت رابع
   لوحده تحت) — بنجبر عمودين بالظبط عشان أي 4 كروت (زي البلاغات:
   جديد/قيد المتابعة/تم الحسم/الإجمالي) توزيعهم 2×2 نضيف بدل 3+1. */
@media (max-width: 600px) { .stats-grid, .stats-grid.stats-grid-10 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .mini-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 480px) { .collapse-header { padding: 20px 20px; } }
@media (min-width: 480px) { .collapse-inner { padding: 0 20px 24px; } }
@media (min-width: 480px) { table { font-size: 0.75rem; } }
@media (min-width: 768px) { table { font-size: 0.8rem; min-width: auto; } }
@media (min-width: 480px) { th { padding: 12px 8px; font-size: 0.7rem; } }

/* ============ تحويل الجداول لبطاقات على الموبايل ============
   يُستخدَم عبر class="table-responsive table-card-view" حول أي جدول
   يحتاج قراءة مريحة على الموبايل (البلاغات، المساقي، الترع...). */
@media (max-width: 700px) {
    .table-card-view table { min-width: 0; }
    .table-card-view thead { display: none; }
    .table-card-view, .table-card-view table, .table-card-view tbody { display: block; width: 100%; }
    .table-card-view tr {
        display: block;
        border: 1px solid var(--border-light);
        border-radius: var(--radius-md);
        margin: 10px;
        overflow: hidden;
    }
    .table-card-view tr.critical-alert { border-color: var(--danger); }
    .table-card-view td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        text-align: left;
        padding: 9px 12px;
        border-bottom: 1px dashed var(--border-light);
    }
    .table-card-view td:last-child { border-bottom: none; }
    .table-card-view td::before {
        content: attr(data-label);
        font-weight: 800;
        color: var(--text-muted);
        font-size: 0.68rem;
        flex-shrink: 0;
    }
    .table-card-view td > * { text-align: left; }
}

@media (min-width: 480px) {
    .filter-bar input, .filter-bar select { min-width: 140px; flex: 0 1 auto; }
}
@media (min-width: 600px) { .charts-grid { grid-template-columns: repeat(2,1fr); } .chart-card-wide { grid-column: 1 / -1; } }
@media (max-width: 991px) { .toast { bottom: calc(20px + env(safe-area-inset-bottom)); } }

/* iOS Safari بيكبّر الصفحة تلقائياً (zoom) لما تدوس على أي حقل إدخال
   حجم خطه أقل من 16px — وده كان بيحصل مع كل حقول الفورم وكل مربعات
   الفلترة في التطبيق كله (كانت 13.6px و12px). على الموبايل بس (فين
   المشكلة دي بتحصل فعلياً)، بنرفع حجم الخط لـ 16px بالظبط عشان يمنع
   التكبير التلقائي من غير ما يأثر على شكل سطح المكتب. */
@media (max-width: 480px) {
    .form-input, .filter-bar input, .filter-bar select { font-size: 16px; }
}