/* =====================================================
   responsive.css — تجاوب الجوال
   ===================================================== */

/* ══════════════════════════════════════════════════════
   Tablet: ≤ 992px
   ══════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .main-nav { display: none !important; }
  .menu-toggle { display: flex !important; }
  .topbar-inner { padding: 0 var(--spacing-md); }
  .topbar-greeting { display: none; }
}

/* ══════════════════════════════════════════════════════
   Mobile: ≤ 768px
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --topbar-height: 60px;
    --font-size-2xl: 26px;
    --font-size-xl: 20px;
  }

/* منع التمرير الأفقي */
  html, body { overflow-x: hidden; }
  * { box-sizing: border-box; }

  body { padding-top: var(--topbar-height); }

  /* تقليص padding الشريط العلوي */
  .topbar-inner { padding: 0 12px !important; gap: 8px !important; }

  .page-wrapper {
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow-x: clip;
  }

  /* جميع العناصر لا تتجاوز عرض الشاشة */
  .card, .card-body, .card-header, .card-footer {
    max-width: 100%;
  }

  /* البطاقات ومحتوياتها */
  .card { margin-bottom: 12px; }
  .card-body { padding: 12px !important; }
  .card-header { padding: 10px 12px !important; }
  .card-footer { padding: 10px 12px !important; }

  /* جعل صفوف Bootstrap تتكدس على الجوال تلقائياً */
  .row { flex-wrap: wrap !important; }
  .row > * { flex-shrink: 0; }

  /* col-md-* تصبح 100% على الجوال */
  .col-md-6, .col-md-4, .col-md-8, .col-md-3, .col-md-9,
  .col-md-5, .col-md-7, .col-md-2, .col-md-10, .col-md-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* col-lg-* تصبح 100% على الجوال */
  .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5,
  .col-lg-4, .col-lg-3, .col-lg-10, .col-lg-11, .col-lg-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* col-sm-* تصبح 100% على الجوال */
  .col-sm-8, .col-sm-4, .col-sm-6, .col-sm-3, .col-sm-9,
  .col-sm-5, .col-sm-7, .col-sm-2, .col-sm-10, .col-sm-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* جعل أزرار d-grid تمتد بالكامل */
  .d-grid { width: 100% !important; }

  /* بطاقات الإحصاء */
  .stat-card .stat-value { font-size: 24px; }
  .stat-card { padding: var(--spacing-md); }

  /* الجداول */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    margin-bottom: var(--spacing-md);
  }
  .modern-table { min-width: 500px !important; }
  
  .modern-table thead th,
  .modern-table tbody td { padding: 8px 10px; font-size: 12px; }

  /* إخفاء أعمدة ثانوية في الجداول الضيقة */
  .col-hide-mobile { display: none !important; }
  .d-none-mobile { display: none !important; }

  /* عناصر تظهر فقط على الجوال */
  .d-mobile-only { display: table-cell !important; }

  /* عرض 100% على الجوال */
  .w-100-mobile { width: 100% !important; }

  /* زر القائمة للجوال */
  .menu-toggle { display: flex !important; }
  .form-control, .form-select { font-size: 16px; } /* منع iOS zoom */

  /* الأزرار */
  .btn { min-height: 44px; } /* touch targets */
  .btn-sm { min-height: 36px; }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .page-header h1, .page-header h2 { font-size: var(--font-size-lg); }

  .welcome-banner { padding: var(--spacing-xl) var(--spacing-md); }
  .welcome-banner h1 { font-size: var(--font-size-xl); }
  .welcome-banner p { font-size: var(--font-size-sm); }

  .filter-card { flex-direction: column; align-items: stretch; }

  /* الـ Row — إلغاء الهوامش السلبية على الجوال لمنع الفيضان */
  .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .row > * {
    padding-right: 6px !important;
    padding-left: 6px !important;
  }
}

/* ══════════════════════════════════════════════════════
   Small Mobile: ≤ 480px
   ══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .topbar-brand { font-size: 18px; }
  .topbar-brand img { width: 30px; height: 30px; }
  .btn-topbar-logout span { display: none; } /* إخفاء نص الزر, أيقونة فقط */
  .btn-topbar-logout { padding: 8px 12px; }

  .stat-card { padding: 12px; }
  .section-card { padding: var(--spacing-md); }
  .section-card .section-icon { width: 48px; height: 48px; font-size: 20px; }

  .modern-table .action-btns .btn { padding: 5px 8px; }
}

/* ══════════════════════════════════════════════════════
   طباعة
   ══════════════════════════════════════════════════════ */
@media print {
  .topbar, .offcanvas-nav, .nav-overlay, .btn:not(.btn-print) { display: none !important; }
  body { padding-top: 0 !important; background: white; }
  .page-wrapper { padding: 0; max-width: 100%; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}