/* ═══════════════════════════════════════════════════════════════════
   «دفترچه نوبت» — پوسته‌ی صفحاتِ ورود / راه‌اندازی / فراموشیِ رمز.
   طرحِ برگزیده از سه پیشنهاد (login-concepts.html) — کاغذِ گرم، خط‌کشیِ
   دفتر، مهرِ تأیید، و ورق‌خوردنِ کتابی موقعِ موفقیت.
   ⚠️ عمداً جدا از style.css نگه داشته شده — این صفحات ظاهرِ کاملاً
   متفاوتی دارند و مشترک‌کردنِ یک فایل با app.html/admin.html فقط ریسکِ
   شکستنِ پنلِ اصلی را اضافه می‌کرد بدون هیچ فایده‌ای.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --page-bg: #EDEBE4; --page-line: #E2DFD7;
  --paper: #F5EEDC; --ink: #1F3A5F; --ink-soft: #4B6685;
  --rule: #DCCFA7; --gold: #B9822C; --stamp: #9C3B3B;
  --ok-bg: #E4F3E8; --ok: #1E7B3C; --warn-bg: #FBF0DE; --warn: #9A6B14; --err-bg: #FBE7E7; --err: #B23A3A;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page-bg: #17181A; --page-line: #33352F; }
}
:root[data-theme="dark"] { --page-bg: #17181A; --page-line: #33352F; }

* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; max-width: 100%; }
/* ⚠️ هدف: بدونِ نیاز به اسکرولِ صفحه، رویِ هر مانیتور/موبایلی جا بشه —
   به‌جایِ min-height:100vh (که رویِ صفحه‌های کوتاه، سرریز و اسکرول می‌سازد)،
   height را دقیقاً به viewport می‌بندیم و اندازه‌ی خودِ کارت را با clamp/dvh
   نسبت به فضایِ واقعاً موجود کوچک می‌کنیم. overflow:auto رویِ body فقط
   یک سوپاپِ اطمینانِ نامرئی است — اگر اندازه‌گذاریِ پایین درست باشد هیچ‌وقت
   اسکرول‌بار ظاهر نمی‌شود؛ اگر هم یک گوشیِ خیلی کوچک/زوم‌شده استثنا بود،
   محتوا حذف نمی‌شود، فقط قابلِ‌اسکرول می‌ماند.
   dvh (نه vh) عمداً استفاده شده چون در سافاری/کروم موبایل، vh ارتفاعِ
   نوارِ آدرس را هم حساب می‌کند و باعثِ همان اسکرولِ ناخواسته می‌شود. */
body {
  margin: 0; background: var(--page-bg); color: var(--ink);
  font-family: 'Noto Sans Arabic', Tahoma, sans-serif; direction: rtl;
  display: flex; align-items: center; justify-content: center;
  height: 100vh; height: 100dvh; overflow-x: hidden; overflow-y: auto;
  padding: clamp(8px, 2.5vh, 24px) clamp(8px, 3vw, 24px); -webkit-font-smoothing: antialiased;
}
.hide { display: none !important; }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--ink); flex: none; }

.ledger-page { width: 100%; max-width: 900px; max-height: 100%; }
.stage.ledger {
  --stamp: #9C3B3B;
  background: var(--paper); color: var(--ink);
  display: grid; grid-template-columns: 1fr 1.15fr;
  height: min(620px, calc(100dvh - 16px));
  border-radius: 22px; overflow: hidden; border: 1px solid var(--page-line);
  box-shadow: 0 18px 50px -22px rgba(0,0,0,.35);
}
.ledger-side {
  background:
    radial-gradient(circle at 30px 46px, var(--paper) 7px, transparent 7.5px),
    radial-gradient(circle at 30px 96px, var(--paper) 7px, transparent 7.5px),
    linear-gradient(180deg,#EFE6CC,#E7DBB9);
  border-left: 1px solid var(--rule);
  padding: clamp(20px, 4vh, 40px) clamp(18px, 3vw, 32px);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.ledger-side::before {
  content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(31,58,95,.28); border-radius: 4px;
  pointer-events: none;
}
.ledger-brand { display: flex; align-items: center; gap: 12px; }
/* ⚠️ قبلاً یه حرفِ «ب» تو دایره بود (نه لوگوی واقعی) — الان خودِ آیکونِ
   برند (bn-icon.svg)، همون که تو هدرِ داشبورد و پنلِ مدیر هم هست. */
.ledger-brand .mark { width: 40px; height: 40px; flex: none; object-fit: contain; }
.ledger-brand b { font-family: 'Noto Naskh Arabic', serif; font-size: 20px; font-weight: 600; }
.ledger-stamp {
  align-self: flex-start; transform: rotate(-9deg); border: 3px double var(--stamp); color: var(--stamp);
  border-radius: 10px; padding: 8px 16px; font-weight: 700; font-size: 13px; opacity: .82;
  mix-blend-mode: multiply;
}
.ledger-quote { font-size: 14px; line-height: 2; color: var(--ink-soft); }
.ledger-quote span { display: block; font-family: 'Noto Naskh Arabic', serif; font-size: 18px; color: var(--ink); margin-bottom: 6px; }
.ledger-stat { display: flex; align-items: baseline; gap: 8px; padding-top: 14px; border-top: 1px dashed rgba(31,58,95,.3); margin-top: 14px; }
.ledger-stat b { font-family: 'Noto Naskh Arabic', serif; font-size: 21px; color: var(--gold); }
.ledger-stat span { font-size: 12px; color: var(--ink-soft); line-height: 1.6; }

/* هر سه ورقه با inset:0 مطلق‌جای‌گذاری می‌شن چون محتوایشان داخل
   panel-face با position:absolute است و دیگر ارتفاعی به والد نمی‌دهند؛
   min-height روی خودِ ledger-panels ارتفاع را تضمین می‌کند. perspective
   دقیقاً روی والدِ مستقیمِ ورقه است — نه چند سطح بالاتر. */
.ledger-panels { position: relative; perspective: 1800px; min-height: 0; height: 100%; }
.ledger-panel {
  position: absolute; inset: 0; display: none; transform-style: preserve-3d; transform-origin: right center;
}
#ledgerCardPanel { display: block; }
.panel-face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: inherit; overflow: hidden auto;
  background: repeating-linear-gradient(var(--paper) 0 41px, var(--rule) 41px 42px);
  background-position: 0 96px;
}
.panel-back {
  transform: rotateY(180deg);
  background: repeating-linear-gradient(var(--rule) 0 1px, #EFE6CE 1px 42px);
}
.panel-back::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(255,255,255,.35), transparent 60%);
}
.book-inner { padding: clamp(18px, 4vh, 44px) clamp(18px, 4vw, 42px); }
.ledger-panel::before {
  /* لرزِ گوشه: یک لحظه قبل از رهاشدن، گوشه‌ی آزاد کمی بالا می‌آید */
  content: ""; position: absolute; bottom: 0; left: 0; width: 46px; height: 46px; pointer-events: none; z-index: 5;
  background: radial-gradient(circle at 0 100%, rgba(31,25,10,.22), transparent 70%);
  opacity: 0; transition: opacity .18s;
}
.ledger-panel.priming::before { opacity: 1; }
.ledger-panel.priming { transform: rotateY(-6deg); }
.ledger-panel.flipping { transition: transform .82s cubic-bezier(.61,.04,.32,1); transform: rotateY(-178deg); }
.ledger-panel.arriving { animation: bookArrive .7s cubic-bezier(.18,.9,.32,1) both; }
@keyframes bookArrive { from { transform: rotateY(148deg); } to { transform: rotateY(0deg); } }
.book-ground-shadow {
  position: absolute; inset: 10% 6% -18px; border-radius: 50%; background: rgba(30,20,5,.28);
  filter: blur(18px); opacity: .25; transition: opacity .82s, transform .82s; z-index: -1;
}
.ledger-panels:has(.flipping) .book-ground-shadow { opacity: .5; transform: scale(.86,.7); }

.book-inner h1, .book-inner h3 { font-family: 'Noto Naskh Arabic', serif; font-weight: 600; font-size: clamp(19px, 3vh, 24px); margin: 0 0 6px; }
.book-inner .muted, .book-inner .sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 clamp(14px, 3vh, 30px); }
.l-field { margin-bottom: clamp(12px, 2.4vh, 20px); }
.l-field label { display: block; font-size: 12.5px; color: var(--gold); font-weight: 700; margin-bottom: 8px; letter-spacing: .02em; }
.book-inner input[type="text"], .book-inner input[type="password"], .book-inner input[type="tel"] {
  width: 100%; border: 1.5px solid var(--rule); border-radius: 8px; background: rgba(255,255,255,.55);
  font: inherit; font-size: 16px; color: var(--ink); padding: clamp(9px, 1.6vh, 12px) 13px; outline: none;
  transition: border-color .15s, background .15s;
}
.book-inner input:focus { border-color: var(--gold); background: #fff; }
.book-inner input::placeholder { color: #A79A78; }
.l-checks { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 clamp(12px, 2.4vh, 22px); }
.l-checks label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-soft); }
.l-btn, .book-inner button[type="submit"], .book-inner button.l-btn-solid {
  width: 100%; padding: 13px; border: none; border-radius: 6px; background: var(--ink); color: var(--paper);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: .02em;
}
.l-btn:hover, .book-inner button[type="submit"]:hover { background: #16304F; }
.l-btn:disabled { opacity: .6; cursor: default; }
.l-link {
  background: none; border: none; padding: 0; font: inherit; font-size: 12.5px; color: var(--gold);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; display: inline-block;
}
.ledger-hint { margin-top: clamp(8px, 2vh, 16px); font-size: 12.5px; color: var(--ink-soft); text-align: center; line-height: 1.7; }
.book-inner .msg { padding: 10px 12px; border-radius: 8px; margin: 10px 0; font-size: 13px; font-weight: 600; }
.book-inner .msg.ok { background: var(--ok-bg); color: var(--ok); }
.book-inner .msg.warn { background: var(--warn-bg); color: var(--warn); }
.book-inner .msg.err { background: var(--err-bg); color: var(--err); }

/* مهرِ «تأیید شد» که لحظه‌ی موفقیت روی برگه می‌کوبد */
.stamp-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 6; }
.stamp-mark {
  font-family: 'Noto Naskh Arabic', serif; font-size: 26px; color: var(--stamp); border: 4px double var(--stamp);
  border-radius: 14px; padding: 10px 26px; opacity: 0; transform: scale(3) rotate(-16deg); background: rgba(255,255,255,.35);
}
.stamping .stamp-mark { animation: stampHit .5s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes stampHit {
  0% { opacity: 0; transform: scale(3) rotate(-16deg); }
  55% { opacity: 1; transform: scale(.9) rotate(-7deg); }
  75% { transform: scale(1.06) rotate(-10deg); }
  100% { opacity: 1; transform: scale(1) rotate(-9deg); }
}
.welcome-box { padding: clamp(18px, 4vh, 44px) clamp(18px, 4vw, 42px); display: flex; flex-direction: column; justify-content: center; height: 100%; }
.welcome-box .stampline { font-family: 'Noto Naskh Arabic', serif; color: var(--stamp); font-size: 14px; margin: 0 0 10px; }
.welcome-box h3 { font-family: 'Noto Naskh Arabic', serif; font-weight: 600; font-size: 23px; margin: 0 0 14px; }

@media (prefers-reduced-motion: reduce) {
  .ledger-panel, .stamp-mark { animation: none !important; transition: none !important; }
}

/* ⚠️ موبایل: کنار همِ برند+فرم دیگر جواب نمی‌دهد (عرض کم است)، پس رویِ هم
   می‌افتند — ولی همان چیدمانِ روی‌همی، اگر برندِ کناری تمام محتوایش
   (نقل‌قول + آمار) را نگه دارد، از ارتفاعِ صفحه‌ی گوشی رد می‌شود و دقیقاً
   همان اسکرولی را می‌سازد که قرار نیست وجود داشته باشد. پس رویِ موبایل
   نقل‌قول و آمار حذف می‌شوند و فقط نوارِ نازکِ برند+مهر می‌ماند — فرمِ
   ورود (که کاربر واقعاً با آن کار دارد) فضا و اولویت را می‌گیرد. */
@media (max-width: 760px) {
  body { padding: clamp(6px, 2vh, 14px); align-items: stretch; }
  .ledger-page { max-width: 480px; margin: auto 0; }
  .stage.ledger {
    grid-template-columns: 1fr;
    height: auto; max-height: calc(100dvh - 12px); overflow-y: auto;
  }
  .ledger-side {
    border-left: none; border-bottom: 1px solid var(--rule);
    flex-direction: row; align-items: center; justify-content: space-between;
    padding: 12px 18px; gap: 10px;
  }
  .ledger-side::before { display: none; }
  .ledger-extra { display: none; }
  .ledger-stamp { align-self: center; padding: 5px 12px; font-size: 11.5px; }
  .book-inner, .welcome-box { padding: clamp(16px, 3.5vh, 28px) 20px; }
  /* ⚠️ باگِ واقعی که این را جایگزینِ نسخه‌ی قبلی کرد: نسخه‌ی قبل روی
     ledger-panels یک min-height ثابتِ min(56dvh,420px) می‌گذاشت (چون
     فرزندانش با inset:0 مطلق‌اند و بدونِ آن کاملاً به صفر جمع می‌شدند).
     مشکل: ارتفاعِ واقعیِ فرمِ ورود (تیتر+دو فیلد+لینکِ فراموشی+دو چک‌باکس+
     دکمه+راهنما) روی خیلی از گوشی‌ها از همان ۴۲۰px بیشتر می‌شد — چند
     پیکسلِ آخر (دقیقاً همان دکمه‌ی «ورود») داخلِ یک اسکرولِ درونیِ
     نامرئیِ panel-face می‌افتاد که کاربر متوجهِ وجودش نمی‌شد.
     راه‌حل: روی موبایل، اصلاً position:absolute را برای پنل/برگه بر
     می‌داریم تا ارتفاعِ خودِ محتوا تعیین‌کننده باشد (نه یک عددِ حدسی)؛
     اگر هم مجموعِ برند+فرم از ارتفاعِ صفحه بیشتر شد، همان overflow-y:auto
     روی stage.ledger (بالاتر) کلِ کارت را قابلِ‌اسکرول می‌کند — یک
     اسکرولِ معمولی و قابل‌مشاهده، نه یک جعبه‌ی پنهان. */
  .ledger-panels { position: static; height: auto; min-height: 0; perspective: none; }
  .ledger-panel { position: static; }
  .panel-face { position: static; overflow: visible; }
  .panel-back { display: none; }
  .book-ground-shadow { display: none; }
}

/* پنجره‌ی کوتاه (لپ‌تاپ کم‌ارتفاع یا موبایلِ افقی) — صرف‌نظر از عرض،
   همین محدودیتِ ارتفاع صدق می‌کند */
@media (max-height: 640px) {
  .ledger-extra { display: none; }
  .ledger-side { padding-top: clamp(14px, 3vh, 24px); padding-bottom: clamp(14px, 3vh, 24px); }
}