/* صفحهٔ وضعیتِ کوئیز سنتر — با هویتِ برند.
 *
 * ⚠️ فونت و لوگو هر دو رویِ همین سرور میزبانی می‌شوند (نه گوگل‌فونت، نه CDN).
 * «بدونِ وابستگیِ بیرونی» یعنی بیرون از این سرور — نه اینکه از هویتِ خودمان
 * صرف‌نظر کنیم. صفحه‌ای که فقط هنگامِ قطعی خوانده می‌شود باید ۱۰۰٪ خودکفا باشد
 * و در عینِ حال مالِ کوئیز سنتر به نظر برسد.
 *
 * رنگِ هویتی طبقِ docs/brand/04-design-language.md فقط و فقط سبزِ #3CA032 است.
 */

@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --brand: #3CA032;
  --brand-dark: #2F8527;
  --bad: #DC2626;

  --bg: #F7F8FA;
  --card: #FFFFFF;
  --ink: #111111;
  --muted: #6A727A;
  --line: #E5E7EB;
  --soft: #F1F3F5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B0F14;
    --card: #131A22;
    --ink: #F3F4F6;
    --muted: #9AA4B2;
    --line: #22303C;
    --soft: #1A232D;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  line-height: 1.9;
  padding: 28px 16px 40px;
  /* هالهٔ ملایمِ سبز — همان زبانِ بصریِ داشبورد، بدونِ شلوغی */
  background-image:
    radial-gradient(60% 45% at 80% -5%, rgba(60,160,50,.10), transparent 70%),
    radial-gradient(50% 40% at 10% 105%, rgba(60,160,50,.08), transparent 70%);
  background-repeat: no-repeat;
}

.wrap { max-width: 680px; margin: 0 auto; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.brand img { width: 34px; height: 34px; display: block; }
.brand b { font-size: 1rem; font-weight: 700; }
.brand span { color: var(--muted); font-size: .8rem; font-weight: 400; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 14px;
}

.state { display: flex; align-items: center; gap: 14px; }
.badge {
  width: 46px; height: 46px; border-radius: 15px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.up .badge { background: rgba(60,160,50,.12); }
.down .badge { background: rgba(220,38,38,.12); }
.badge svg { width: 24px; height: 24px; }
.up .badge svg { stroke: var(--brand); }
.down .badge svg { stroke: var(--bad); }

.headline { font-size: 1.2rem; font-weight: 700; }
.up .headline { color: var(--brand-dark); }
.down .headline { color: var(--bad); }
@media (prefers-color-scheme: dark) { .up .headline { color: var(--brand); } }

.meta { color: var(--muted); font-size: .82rem; margin-top: 2px; }

.h2 { font-weight: 700; font-size: .92rem; margin-bottom: 10px; }

/* ⚠️ min-width رویِ ستون‌ها ممنوع: ۹۰ ستون × چند پیکسل از عرضِ کارت رویِ گوشی
   بیشتر می‌شود و نوار از کادر بیرون می‌زند. با flex:1 و min-width:0 هر ستون
   سهمِ خودش را می‌گیرد و همیشه داخل می‌ماند. */
.bars {
  display: flex; gap: 1px; align-items: flex-end;
  height: 40px; direction: ltr; overflow: hidden;
}
.bar { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--brand); height: 100%; }
.bar.part { background: linear-gradient(to top, var(--bad) 0, var(--bad) 45%, var(--brand) 45%); }
.bar.none { background: var(--bad); }
.bar.empty { background: var(--soft); }

.row { display: flex; justify-content: space-between; color: var(--muted); font-size: .76rem; margin-top: 8px; }
.row b { color: var(--ink); font-weight: 700; }

.note { color: var(--muted); font-size: .8rem; margin-top: 18px; }
.note a { color: var(--brand-dark); font-weight: 700; text-decoration: none; }
@media (prefers-color-scheme: dark) { .note a { color: var(--brand); } }
.note a:hover { text-decoration: underline; }

/* ── مؤلفه‌ها ─────────────────────────────────────────────────────────────── */
.comp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.comp-txt { min-width: 0; flex: 1; }
.comp-name { font-weight: 700; font-size: .95rem; }
.comp .badge { width: 36px; height: 36px; border-radius: 12px; }
.comp .badge svg { width: 19px; height: 19px; }
.pct { font-weight: 700; font-size: .95rem; flex: none; }
.up .pct { color: var(--brand-dark); }
.down .pct { color: var(--bad); }
@media (prefers-color-scheme: dark) { .up .pct { color: var(--brand); } }

/* ── تاریخچهٔ قطعی‌ها ──────────────────────────────────────────────────────── */
.incidents { list-style: none; margin: 0; padding: 0; }
.incidents li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .84rem;
}
.incidents li:last-child { border-bottom: 0; padding-bottom: 0; }
.inc-name { font-weight: 700; }
.inc-when { color: var(--muted); text-align: left; direction: rtl; }
.inc-when.open { color: var(--bad); font-weight: 700; }