/* ============================================================
   أنماط شاشة التقدم (Progress Screen)
   ============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-5);
}

.stat-card {
  padding: var(--space-4);
  text-align: center;
}
.stat-num {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
}
.stat-label { font-size: 12px; color: var(--text-secondary); }

.section-label {
  padding: 0 var(--space-4);
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  margin-top: var(--space-6);
}

/* --- تقويم أسبوعي بسيط ---
   flex-direction: row-reverse ضروري هنا: بصفحة RTL، عناصر flex العادية
   تتوزع من اليسار لليمين بالترتيب البرمجي (عكس القراءة العربية)، فيطلع
   "الأحد" (أول عنصر بالمصفوفة) أقصى اليسار بدل اليمين. الـ reverse يصحح
   هذا فيطابق الترتيب البصري لتوقع القارئ العربي: أحد يمين، سبت يسار */
.week-calendar {
  display: flex;
  flex-direction: row-reverse;
  gap: 6px;
  padding: 0 var(--space-4);
  margin-bottom: var(--space-3);
}
.calendar-day {
  flex: 1;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.calendar-day.done { background: var(--accent); border-color: var(--accent); }
.calendar-day.today { border-color: var(--accent); border-width: 2px; }
.calendar-day-label { font-size: 10px; color: var(--text-tertiary); }
.calendar-day.done .calendar-day-label { color: #14170F; }
.calendar-day-num { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.calendar-day.done .calendar-day-num { color: #14170F; }

/* --- رسم بياني بسيط بـ SVG (وزن الجسم) --- */
.chart-card { margin: 0 var(--space-4) var(--space-4); }
.chart-empty {
  text-align: center;
  padding: var(--space-6) var(--space-4);
  color: var(--text-tertiary);
  font-size: 13px;
}

/* --- إدخال وزن الجسم --- */
.bodyweight-input-row {
  display: flex;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  margin-bottom: var(--space-5);
}
.bodyweight-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 16px;
}
.bodyweight-input::placeholder { color: var(--text-tertiary); font-family: var(--font-body); }

/* --- سجل تمارين تفصيلي --- */
.muscle-breakdown {
  padding: 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.muscle-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
}
.muscle-row-label { font-size: 13px; width: 70px; flex-shrink: 0; color: var(--text-secondary); }
.muscle-row-bar { flex: 1; height: 6px; background: var(--bg-card-raised); border-radius: 3px; overflow: hidden; }
.muscle-row-fill { height: 100%; background: var(--accent); }
.muscle-row-count { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); width: 24px; text-align: left; }