/* ================================================================
   استایل تکمیلی صفحهٔ زمان و مکان جلسات
   ----------------------------------------------------------------
   دو دستهٔ کلاس اینجا تعریف می‌شوند:

   ۱. کلاس‌هایی که در بیلد فعلی app.css نیستند (چون Tailwind با JIT
      فقط کلاس‌های موجود در زمان بیلد را می‌سازد).

   ۲. کلاس‌های نشان وضعیت جلسه که از یک آرایهٔ PHP می‌آیند و هرگز
      به‌صورت متن در سورس نیستند — Tailwind **حتی با بیلد مجدد هم**
      آن‌ها را نمی‌سازد.

   همهٔ رنگ‌ها از توکن‌ها می‌آیند؛ هیچ رنگ خامی نوشته نشده.
   ================================================================ */

/* --- ته‌رنگ وضعیت (پویا از PHP) --- */
/* اگر بسته‌های دوره یا تالار هم نصب باشند، این دو تکراری ولی
   هم‌مقدارند و تداخلی ایجاد نمی‌کنند. */
.jj-tint-ok   { background-color: rgb(var(--c-ok) / .10); }
.jj-tint-warn { background-color: rgb(var(--c-warn) / .10); }
.jj-tint-live { background-color: rgb(var(--c-err) / .10); }

/* --- ابزارهای پایه‌ای که در بیلد فعلی نیستند --- */
.jj-schedule-scope .mt-auto      { margin-top: auto; }
.jj-schedule-scope .gap-y-1\.5   { row-gap: .375rem; }
.jj-schedule-scope .tabular-nums { font-variant-numeric: tabular-nums; }
.jj-schedule-scope .aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
.jj-schedule-scope .min-w-\[220px\]  { min-width: 220px; }
.jj-schedule-scope .text-on-surface-variant\/50 { color: rgb(var(--c-ink-3) / .5); }

@media (min-width: 768px) {
  .jj-schedule-scope .md\:text-headline-lg {
    font-size: 2.25rem;
    line-height: 1.25;
  }
}

/* ================================================================
   نشان پخش زنده
   ----------------------------------------------------------------
   نقطهٔ تپنده فقط وقتی دیده می‌شود که جلسه واقعاً در حال برگزاری
   باشد؛ در حالت «کاهش حرکت» تپش متوقف می‌شود.
   ================================================================ */
.jj-live-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 9999px;
  background-color: rgb(var(--c-err));
  box-shadow: 0 0 0 0 rgb(var(--c-err) / .55);
  animation: jj-live-pulse 1.8s infinite;
}

@keyframes jj-live-pulse {
  70%  { box-shadow: 0 0 0 .5rem rgb(var(--c-err) / 0); }
  100% { box-shadow: 0 0 0 0 rgb(var(--c-err) / 0); }
}

@media (prefers-reduced-motion: reduce) {
  .jj-live-dot { animation: none; }
}

/* ================================================================
   شمارش معکوس
   ================================================================ */
.jj-schedule-scope [data-jj-countdown] [data-unit] {
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  line-height: 1.2;
}

/* ================================================================
   پرسش‌های پرتکرار
   ----------------------------------------------------------------
   با <details> بومی ساخته شده؛ اینجا فقط مثلث پیش‌فرض مرورگر
   برداشته و چرخش آیکون اضافه می‌شود.
   ================================================================ */
.jj-faq summary::-webkit-details-marker { display: none; }
.jj-faq summary::marker { content: ""; }

.jj-faq .jj-faq-icon {
  transition: transform .25s ease;
}

.jj-faq[open] .jj-faq-icon {
  transform: rotate(180deg);
}

.jj-faq summary:focus-visible {
  outline: 2px solid rgb(var(--c-primary));
  outline-offset: -2px;
  border-radius: var(--r-2xl, .875rem);
}

/* ================================================================
   فرم‌ها
   ================================================================ */
.jj-schedule-scope input[type="tel"],
.jj-schedule-scope input[type="text"],
.jj-schedule-scope textarea {
  font-family: inherit;
}

.jj-schedule-scope input[type="checkbox"] {
  accent-color: rgb(var(--c-primary));
  width: 1rem;
  height: 1rem;
}

.jj-schedule-scope button:disabled {
  opacity: .55;
  cursor: wait;
}

/* ================================================================
   چاپ
   ----------------------------------------------------------------
   کسی که صفحهٔ زمان جلسه را چاپ می‌کند، آدرس و زمان می‌خواهد نه
   فرم‌ها و دکمه‌ها.
   ================================================================ */
@media print {
  .jj-schedule-scope #reminder,
  .jj-schedule-scope #volunteer,
  .jj-schedule-scope #streams,
  .jj-schedule-scope aside {
    display: none;
  }

  .jj-schedule-scope [data-jj-countdown] {
    display: none;
  }
}