/* ═══════════════════════════════════════════════════════════
   system.css — سیستم طراحی FIT PLAN
   ═══════════════════════════════════════════════════════════
   توکن‌ها و کلاس‌های کامپوننت. جای ۱۰۰۱ استایل درون‌خطی را
   می‌گیرد که در ۲۶ فایل پراکنده بودند.

   بعد از style.css لود می‌شود تا بر آن مقدم باشد، ولی روی
   متغیرهای رنگیِ همان سوار است — پس هر ۸ تم خودبه‌خود کار می‌کنند.

   ⚠️ استایل درون‌خطی در CSS بر کلاس مقدم است. موقع مهاجرت هر
   صفحه باید style="..." حذف شود، نه اینکه کلاس کنارش بنشیند.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── مقیاس فاصله ──────────────────────────────────────
     قبلاً ۱۸۷ مقدار یکتای padding/gap داشتیم. شش عدد کافی است. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* ── مقیاس متن ────────────────────────────────────────
     قبلاً .6 .65 .7 .72rem همه برای یک کار استفاده می‌شدند. */
  --t-xs: 12px;   /* برچسب، واحد، متن فرعی */
  --t-sm: 13px;   /* متن کمکی */
  --t-md: 15px;   /* متن اصلی */
  --t-lg: 18px;   /* عنوان کارت */
  --t-xl: 24px;   /* عدد شاخص */
  --t-2xl: 32px;  /* عدد قهرمان — وزن ست بعدی، تایمر */

  /* ── ضخامت ────────────────────────────────────────── */
  --w-normal: 400;
  --w-medium: 500;
  --w-bold:   700;
  --w-black:  800;
}

/* ═══ بلوک‌های چیدمان ══════════════════════════════════════ */

/* ردیف افقی — پرتکرارترین الگو (۸۵ بار درون‌خطی) */
.row {
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.row-between { justify-content: space-between; }
.row-wrap    { flex-wrap: wrap; }
.row-start   { align-items: flex-start; }
.grow        { flex: 1; min-width: 0; }

/* ستون عمودی با فاصلهٔ یکنواخت */
.stack       { display: flex; flex-direction: column; gap: var(--s3); }
.stack-sm    { display: flex; flex-direction: column; gap: var(--s2); }
.stack-lg    { display: flex; flex-direction: column; gap: var(--s5); }

/* شبکهٔ خودکار — برای کارت‌های آمار و برنامه */
.grid {
  display: grid;
  gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.grid-wide { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* ═══ کارت ════════════════════════════════════════════════
   خط به‌جای سایه — حس ابزار دقیق، نه اپ دوستانه. */
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s4);
}
.card-tight  { padding: var(--s3); }
.card-flush  { padding: 0; overflow: hidden; }
/* کارتی که کاربر رویش کلیک می‌کند */
.card-action { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.card-action:hover  { border-color: var(--border-b); background: var(--bg-3); }
.card-action:active { transform: scale(.995); }
/* تنها کارتی که در صفحه تأکید دارد */
.card-accent { border-color: var(--accent); background: var(--accent-bg); }

/* ═══ متن ═════════════════════════════════════════════════ */

/* برچسب بالای بخش — بدون uppercase، که برای فارسی بی‌اثر است
   و letter-spacing زیاد حروف را از هم می‌پاشاند */
.label {
  font-size: var(--t-xs);
  font-weight: var(--w-bold);
  color: var(--text-3);
}
.muted     { color: var(--text-3); }   /* ۱۷۷ بار درون‌خطی بود */
.dim       { color: var(--text-2); }
.accent    { color: var(--accent); }
.danger    { color: var(--red); }

.t-xs { font-size: var(--t-xs); }
.t-sm { font-size: var(--t-sm); }
.t-md { font-size: var(--t-md); }
.t-lg { font-size: var(--t-lg); }

.title {
  font-size: var(--t-lg);
  font-weight: var(--w-black);
  color: var(--text-1);
}
.subtitle {
  font-size: var(--t-sm);
  color: var(--text-2);
  line-height: 1.8;
}

/* ═══ عدد ═════════════════════════════════════════════════
   عدد قهرمان است، برچسب خدمتکار. در باشگاه باید وزن ست بعدی
   را از فاصلهٔ یک متری بخوانی. */
.num {
  font-family: var(--font-mono);
  font-weight: var(--w-bold);
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.num-lg   { font-size: var(--t-xl); }
.num-hero { font-size: var(--t-2xl); color: var(--accent); }
.num-unit { font-size: var(--t-xs); color: var(--text-3); font-weight: var(--w-normal); }

/* جفتِ عدد + برچسب — الگوی تکرارشونده در داشبورد و آمار */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .stat-val   { font-family: var(--font-mono); font-size: var(--t-xl);
                    font-weight: var(--w-bold); color: var(--text-1);
                    font-variant-numeric: tabular-nums; }
.stat .stat-label { font-size: var(--t-xs); color: var(--text-3); }

/* ═══ چیپ / برچسب کوچک ════════════════════════════════════ */
.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 5px var(--s3);
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: var(--t-xs);
  white-space: nowrap;
  user-select: none;
}
.chip-action { cursor: pointer; transition: all .14s ease; }
.chip-action:hover { border-color: var(--border-b); color: var(--text-1); }
.chip.on {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: var(--w-bold);
}

/* ═══ فرم ═════════════════════════════════════════════════ */
.field       { display: flex; flex-direction: column; gap: var(--s1); }
.field-label { font-size: var(--t-xs); color: var(--text-3); font-weight: var(--w-medium); }

/* ═══ جداکننده ════════════════════════════════════════════ */
.sep     { height: 1px; background: var(--border); border: 0; margin: var(--s4) 0; }
.sep-sm  { height: 1px; background: var(--border); border: 0; margin: var(--s2) 0; }

/* ═══ کمکی‌ها ═════════════════════════════════════════════ */
.center     { text-align: center; }
.nowrap     { white-space: nowrap; }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden     { display: none !important; }

/* ═══ هدف لمس روی موبایل ══════════════════════════════════
   در باشگاه با دست عرق‌کرده کار می‌کنی — هر چیز کلیک‌شدنی
   باید حداقل ۴۴ پیکسل باشد. */
@media (hover: none) and (pointer: coarse) {
  .chip-action, .card-action { min-height: 44px; }
  .row { gap: var(--s3); }
}

/* ═══ آیکون ═══════════════════════════════════════════════
   جای ایموجی. رنگ از currentColor می‌آید پس با تم و با رنگ
   متنِ والد خودکار هماهنگ می‌شود — کاری که ایموجی نمی‌کرد. */
.icon {
  display: inline-block;
  vertical-align: -.18em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
/* آیکون داخل دکمه و ردیف کمی نازک‌تر بهتر می‌نشیند */
.btn .icon, .row .icon { stroke-width: 1.6; }
/* ── رنگ گروه عضلانی ──────────────────────────────────────
   Tabler آیکون آناتومیک ندارد و ۹ گروه با شکل قابل تفکیک
   نیستند. پس شکلِ آیکون را از «تجهیزات» می‌گیریم (هالتر،
   دمبل، سیم‌کش… واقعاً متفاوت‌اند) و گروه عضلانی را با رنگ
   نشان می‌دهیم. نتیجه: ۱۲ شکل × ۹ رنگ، به‌جای ۲۷۳ ایموجی. */
:root {
  --mg-chest:    #e05d5d;
  --mg-back:     #4e8fd8;
  --mg-shoulder: #e0913d;
  --mg-biceps:   #9b6fd8;
  --mg-triceps:  #b85fa8;
  --mg-legs:     #3fa86b;
  --mg-glutes:   #d87a4e;
  --mg-core:     #d8c14e;
  --mg-cardio:   #4ec0c0;
}
.mg-chest    { --mg: var(--mg-chest); }
.mg-back     { --mg: var(--mg-back); }
.mg-shoulder { --mg: var(--mg-shoulder); }
.mg-biceps   { --mg: var(--mg-biceps); }
.mg-triceps  { --mg: var(--mg-triceps); }
.mg-legs     { --mg: var(--mg-legs); }
.mg-glutes   { --mg: var(--mg-glutes); }
.mg-core     { --mg: var(--mg-core); }
.mg-cardio   { --mg: var(--mg-cardio); }
/* body.js چند گروه بیشتر از بانک حرکات دارد */
.mg-calves   { --mg: var(--mg-legs); }
.mg-forearms { --mg: var(--mg-biceps); }
.mg-abs      { --mg: var(--mg-core); }
/* گروه ناشناخته: هیچ --mg ست نمی‌شود و مقدار پیش‌فرضِ
   var(--mg, ...) پایین جایش را می‌گیرد. قاعدهٔ
   [class*="mg-"] اینجا بود و چون ویژگی‌اش با .mg-chest
   برابر ولی ترتیبش بعدتر بود، رنگ همهٔ گروه‌ها را
   خاکستری می‌کرد. */

/* ── بندانگشتی حرکت ───────────────────────────────────────
   جای <span style="font-size:2.5rem">ایموجی</span> که در ۸
   جای مختلف تکرار شده بود. */
.ex-icon {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--mg, var(--text-3)) 16%, transparent);
  color: var(--mg, var(--text-3));
  border: 1px solid color-mix(in srgb, var(--mg, var(--text-3)) 30%, transparent);
}
.ex-icon-sm { width: 30px; height: 30px; border-radius: var(--radius-sm); }
.ex-icon-lg { width: 56px; height: 56px; }
.ex-icon-xl { width: 88px; height: 88px; border-radius: var(--radius-lg); }
/* پرکنندهٔ کامل کادر تصویر کارت (وقتی GIF نیامده) */
.ex-icon-fill {
  width: 100%; height: 100%;
  border: 0; border-radius: 0;
  background: color-mix(in srgb, var(--mg, var(--text-3)) 12%, var(--bg-3));
}

/* ── نقطهٔ وضعیت ──────────────────────────────────────────
   جای 🟢🟡🔴 که روی هر سیستم‌عامل اندازهٔ متفاوت داشتند. */
.dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
  background: var(--text-3);
}
.dot-ok   { background: var(--green); }
.dot-warn { background: var(--amber); }
.dot-bad  { background: var(--red); }
.dot-info { background: var(--blue, var(--accent)); }

/* آیکون‌های معنایی رنگ‌دار */
.icon-ok   { color: var(--green); }
.icon-warn { color: var(--amber); }
.icon-bad  { color: var(--red); }


/* ── حساب کاربری و جلسهٔ فعال در سایدبار ──────────────────
   بقیهٔ CSS ناوبری (مقصدهای پنج‌گانه، نوار تب، ناوبری پایین و
   صفحهٔ «بیشتر») حذف شد: آن ساختار منوها را از دسترس دور کرد و
   به سایدبار آکاردئونی برگشتیم. استایل آن در css/style.css است. */
.sidebar-account { padding: 0 var(--s2) var(--s2); }

/* جلسهٔ فعال — پایین سایدبار، فقط وقتی تمرینی در جریان است */
.sidebar-session {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s2);
  padding: var(--s3);
  border-radius: var(--radius-lg);
  background: var(--accent-bg);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--accent);
  font-size: var(--t-sm); font-weight: var(--w-bold);
  cursor: pointer;
}
.sidebar-session:hover { background: var(--accent-bgh); }
.sidebar-session .nav-badge {
  font-size: var(--t-xs); font-weight: var(--w-medium);
  padding: 2px var(--s2); border-radius: 999px;
  background: var(--accent); color: var(--accent-fg);
}

/* پنل مدیریت — ظرف جدا در انتهای منو */
.sidebar-admin {
  padding: var(--s2);
  margin-top: auto;
  border-top: 1px solid var(--border);
}

/* ── کارت بانک حرکات ──────────────────────────────────────
   استایل‌های درون‌خطی این کارت به اینجا منتقل شد. */
.ex-card-img {
  height: 120px;
  background: var(--bg-3);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ex-card-img img { width: 100%; height: 100%; object-fit: cover; }
.ex-card-mine {
  margin-right: auto;
  display: flex;
  color: var(--purple, var(--accent));
}