/* ═══ انتخابگرِ تاریخِ جلالی (D-664) ═══
   با `jalali-picker.js`. رنگ‌ها توکن‌های `riqx.css`اند، با پیش‌فرض برای پنلِ
   مدیریت که آن توکن‌ها را ندارد. کلاس‌ها پیشوندِ `jp-` دارند (§۶.۷۵). */

.jp-wrap { position: relative; display: flex; align-items: stretch; gap: 0; width: 100%; }
/* کادر ltr است و صفحه rtl؛ پس جای دکمه با `left` صریح، نه inline-end که در کادرِ ltr
   به راست می‌رفت و آغازِ تاریخ زیرِ دکمه پنهان می‌شد */
.jp-wrap .jp-field { flex: 1; min-width: 0; text-align: left; letter-spacing: .02em;
  padding-left: 46px; }
.jp-btn { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px;
  background: var(--accent-wash, #ebe8fd); color: var(--accent-ink, #3b2fbf); cursor: pointer; }
.jp-btn:hover { filter: brightness(.96); }
.jp-note { display: block; margin-top: 6px; font-size: .82rem; color: var(--ink-soft, #4a4c6e); min-height: 1.2em; }
/* گوشی (D-758): کادرها زیرِ هم‌اند و یادداشتِ خالی فقط ۵۰ پیکسل فاصله می‌ساخت زیرِ «زمانِ شروع»؛ در رومیزی با
   راهنمای کادرِ کناری هم‌تراز می‌ماند */
@media (max-width: 700px) { .jp-note:empty { min-height: 0; margin-top: 0; } }

/* جای پنجره را `place()` در `jalali-picker.js` از روی کادر حساب می‌کند (فرزندِ body است) */
.jp-pop { position: absolute; z-index: 1100; width: 300px; box-sizing: border-box;
  padding: 14px; border-radius: 16px; background: var(--surface, #fff); color: var(--ink, #191a32);
  border: 1px solid var(--line, #d6d3ec); box-shadow: 0 24px 50px -24px rgba(20, 21, 49, .45);
  font-family: Vazirmatn, Tahoma, sans-serif; direction: rtl; }
.jp-pop[hidden] { display: none; }
.jp-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jp-title { font-weight: 800; font-size: .98rem; }
.jp-nav { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line, #d6d3ec);
  background: var(--surface-2, #f7f6fc); color: var(--ink, #191a32); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.jp-nav:hover { border-color: var(--accent, #5b4be8); color: var(--accent-ink, #3b2fbf); }
.jp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.jp-wd { text-align: center; font-size: .76rem; font-weight: 700; color: var(--ink-faint, #7b7d9c); padding: 4px 0; }
.jp-day { height: 34px; border: 0; border-radius: 10px; background: none; color: var(--ink, #191a32);
  font: inherit; font-size: .88rem; cursor: pointer; font-variant-numeric: tabular-nums; }
.jp-day:hover:not(:disabled) { background: var(--accent-wash, #ebe8fd); }
.jp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent, #5b4be8); font-weight: 700; }
.jp-day.is-on { background: var(--accent, #5b4be8); color: #fff; font-weight: 800; }
.jp-day:disabled { color: var(--line, #c9c6e0); cursor: not-allowed; }
.jp-fri { color: var(--live, #d8395b); }
.jp-day.jp-fri.is-on { color: #fff; }
.jp-ft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line-soft, #e4e2f2); }
.jp-time { display: inline-flex; align-items: center; gap: 4px; direction: ltr; margin-inline-end: auto; }
.jp-tl { direction: rtl; font-size: .82rem; color: var(--ink-soft, #4a4c6e); margin-inline-start: 4px; order: 9; }
.jp-sel { padding: 5px 6px; border-radius: 8px; border: 1px solid var(--line, #d6d3ec);
  background: var(--surface-2, #f7f6fc); color: var(--ink, #191a32); font: inherit; font-size: .9rem; }
.jp-link { border: 0; background: none; color: var(--accent-ink, #3b2fbf); font: inherit; font-size: .86rem; cursor: pointer; padding: 6px; }
.jp-ok { border: 0; border-radius: 10px; padding: 7px 16px; background: var(--accent, #5b4be8); color: #fff;
  font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }

/* پنلِ مدیریت: کادر پهنای خودش را دارد و دکمه‌ی «اکنون» کنارش است */
.jp-wrap .vJalali { padding-left: 40px; }
.vJalali + .jp-btn, .jp-wrap:has(.vJalali) { width: auto; display: inline-flex; }

/* پنلِ مدیریت: جنگو `--accent` را زردِ خودش تعریف کرده و روزِ انتخابی زرد با
   نوشته‌ی سفید می‌شد. پنجره فرزندِ body است و پس از `#container` می‌نشیند؛ آنجا
   رنگِ برندِ سایت و بقیه از متغیرهای خودِ پنل (تا حالتِ تاریکِ پنل را بگیرد). */
#container ~ .jp-pop {
  --accent: #5b4be8; --accent-ink: var(--link-fg, #3b2fbf); --accent-wash: var(--selected-bg, #ebe8fd);
  --surface: var(--body-bg, #fff); --surface-2: var(--darkened-bg, #f7f6fc);
  --ink: var(--body-fg, #191a32); --ink-soft: var(--body-quiet-color, #4a4c6e); --ink-faint: var(--body-quiet-color, #7b7d9c);
  --line: var(--border-color, #d6d3ec); --line-soft: var(--hairline-color, #e4e2f2);
}

@media (max-width: 420px) {
  .jp-pop { width: calc(100vw - 32px); max-width: 320px; }
}