/* ---- سلامت پلتفرم ------------------------------------------------------------
   قاعدهٔ رنگی این صفحه: رنگ فقط **حالت** را می‌گوید و هیچ‌جای دیگری استفاده نمی‌شود. سبز یعنی
   نگاه لازم نیست، قرمز یعنی همین حالا، کهربایی یعنی چیزی نیمه‌کاره ماند. هر ردیف هم کنار رنگش
   یک کلمه دارد، چون رنگ به‌تنهایی برای کسی که آن را نمی‌بیند هیچ نمی‌گوید. */

.health-summary { margin:0 0 18px; }
.health-section { margin:0 0 30px; }
.health-section h2 { margin:0 0 6px; font-size:19px; }
.health-section > .health-note { margin:0 0 14px; }
.health-note { color:#8b85a6; font-size:13px; line-height:1.9; }

.health-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 13px; border-radius:999px; font-size:13px; font-weight:700; }
.health-pill.good { background:#1d3a2e; color:#7ceebb; }
.health-pill.warn { background:#3a3320; color:#ffc765; }
.health-pill.bad  { background:#3b1c28; color:#ff9aa8; }

.health-table { width:100%; border-collapse:collapse; font-size:14px; }
.health-table th { padding:9px 12px; border-bottom:1px solid var(--line); color:#8b85a6; font-size:12.5px; font-weight:600; text-align:start; }
.health-table td { padding:12px; border-bottom:1px solid #241f3d; vertical-align:top; }
.health-table td small { display:block; margin-top:4px; color:#8b85a6; font-size:12px; }
.health-table td strong { display:block; color:#efecff; }
.health-table td[dir="ltr"], .health-table td.ltr { direction:ltr; text-align:start; word-break:break-all; }
.health-table.compact td, .health-table.compact th { padding:8px 10px; }
/* نوارِ باریکِ کنارِ ردیف — نه پس‌زمینهٔ رنگی. جدولی که چهار ردیفش رنگی باشد خوانده نمی‌شود. */
.health-table tr.health-bad  td:first-child { box-shadow:inset -3px 0 0 #ff5e87; }
.health-table tr.health-warn td:first-child { box-shadow:inset -3px 0 0 #ffc765; }
.health-table tr.health-good td:first-child { box-shadow:inset -3px 0 0 #3ddc97; }
.health-fail { color:#ff9aa8; font-weight:700; }

.health-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:13px; margin:0 0 18px; }
.health-metrics > div { padding:15px 17px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,#1b1830,#151326); }
.health-metrics strong { display:block; color:#efecff; font-size:25px; font-weight:800; line-height:1.3; }
.health-metrics span { display:block; margin-top:3px; color:#8b85a6; font-size:12.5px; }
.health-metrics em { display:block; margin-top:7px; font-size:12.5px; font-style:normal; font-weight:700; }
.health-metrics em.up { color:#7ceebb; }
.health-metrics em.down { color:#ff9aa8; }

.health-chart { margin:0 0 22px; }
.health-chart svg { display:block; width:100%; height:110px; }
.health-chart rect { fill:#7656ec; }
.health-chart-scale { display:flex; justify-content:space-between; margin-top:6px; color:#8b85a6; font-size:12px; }

.health-block { margin:0 0 22px; }
.health-block h3 { margin:0 0 8px; font-size:15px; color:#d9d5ec; }

/* روی موبایل ستونِ «یادداشت» اولین چیزی است که می‌شکند و طولانی‌ترین هم هست؛ زیر بقیه می‌رود
   به‌جای اینکه جدول را از قاب بیرون ببرد. */
@media (max-width:700px) {
  .health-table, .health-table tbody, .health-table tr, .health-table td { display:block; width:100%; }
  .health-table thead { display:none; }
  .health-table tr { padding:12px 0; border-bottom:1px solid #241f3d; }
  .health-table td { padding:3px 12px; border:0; }
  .health-table tr.health-bad td:first-child,
  .health-table tr.health-warn td:first-child,
  .health-table tr.health-good td:first-child { box-shadow:none; }
  .health-table tr.health-bad  { box-shadow:inset -3px 0 0 #ff5e87; }
  .health-table tr.health-warn { box-shadow:inset -3px 0 0 #ffc765; }
  .health-table tr.health-good { box-shadow:inset -3px 0 0 #3ddc97; }
}