/* تنسيق خاص لكروت إحصائيات الأعضاء */

/* التنسيق الافتراضي للشاشات الكبيرة جداً */
.members-stats-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* للشاشات الكبيرة جداً (1100px وأعلى): تنظيم خاص */
@media (min-width: 1101px) {
  .members-stats-grid {
    display: grid;
    gap: 12px;
    /* نستخدم 4 أعمدة للتحكم الكامل */
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* إجمالي الأعضاء يأخذ صف كامل (الكارت الأول) */
  .members-stats-grid > .card:first-child {
    grid-column: 1 / -1;
  }
  
  /* بيانات مكتملة وغير مكتملة في صف واحد (الكارت الثاني والثالث) */
  .members-stats-grid > .card:nth-child(2) {
    grid-column: 1 / 3; /* يأخذ نصف العرض */
  }
  
  .members-stats-grid > .card:nth-child(3) {
    grid-column: 3 / 5; /* يأخذ النصف الثاني */
  }
  
  /* البقية (اللجان وغيرها) توزع بشكل عادي - 4 في كل صف */
  .members-stats-grid > .card:nth-child(n+4) {
    grid-column: span 1;
  }
}

/* عند مقاس متوسط إلى كبير (900px تقريباً): تنظيم خاص */
@media (min-width: 768px) and (max-width: 1100px) {
  .members-stats-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* إجمالي الأعضاء يأخذ صف كامل (الكارت الأول) */
  .members-stats-grid > .card:first-child {
    grid-column: 1 / -1;
  }
  
  /* بيانات مكتملة وغير مكتملة في صف واحد (الكارت الثاني والثالث) */
  .members-stats-grid > .card:nth-child(2),
  .members-stats-grid > .card:nth-child(3) {
    grid-column: span 1;
  }
  
  /* البقية (اللجان وغيرها) توزع بشكل عادي - كارتين في كل صف */
  .members-stats-grid > .card:nth-child(n+4) {
    grid-column: span 1;
  }
}

/* للشاشات الصغيرة: عمود واحد */
@media (max-width: 767px) {
  .members-stats-grid {
    grid-template-columns: 1fr;
  }
  
  .members-stats-grid > .card {
    grid-column: 1 / -1;
  }
}