/* ═══════════════════════════════════════════════════════════════════════════
 * auth.css — استایل فرم‌های ثبت‌نام و ورود
 *
 * وقتی فرم داخل پوسته‌ی خودِ سایت رندر می‌شود (حالت عادی)، رنگ‌ها از
 * توکن‌های همان سایت خوانده می‌شوند — همان متغیرهای --gw-* / --bp-* که
 * پاپ‌آپ و دروازه هم استفاده می‌کنند و در CSS هر سایت تعریف شده‌اند.
 * اگر هیچ‌کدام نبود، مقدار جایگزینِ خنثی به کار می‌رود تا فرم در هر حالت
 * خوانا بماند.
 *
 * هیچ کلاسی از سایت را بازنویسی نمی‌کند: همه با .au- شروع می‌شوند.
 * ═══════════════════════════════════════════════════════════════════════════ */

.au-card,
.au-wrap {
  --au-surface: var(--gw-surface, var(--bp-surface, #15191f));
  --au-surface-2: var(--gw-surface-2, var(--bp-surface-2, #1c2128));
  --au-line: var(--gw-line, var(--bp-line, #2b323b));
  --au-text: var(--gw-text, var(--bp-text, #e8eef5));
  --au-muted: var(--gw-muted, var(--bp-muted, #9fb0c2));
  --au-accent: var(--gw-accent, var(--bp-accent, #ffbb02));
  --au-accent-ink: var(--gw-accent-ink, var(--bp-accent-ink, #0a0f15));
  --au-radius: var(--gw-radius, var(--bp-radius, 10px));
  --au-bad: #e5484d;
}

/* ── قاب ─────────────────────────────────────────────────────────────── */

.au-card {
  max-width: 26rem;
  margin: clamp(18px, 4vw, 42px) auto;
  padding: clamp(18px, 3vw, 28px);
  background: var(--au-surface);
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius);
  color: var(--au-text);
  box-sizing: border-box;
}
.au-card * { box-sizing: border-box; }

.au-h1 {
  margin: 0 0 6px;
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  font-weight: 800;
  line-height: 1.7;
  color: var(--au-text);
}
.au-sub {
  margin: 0 0 18px;
  font-size: .85rem;
  line-height: 2;
  color: var(--au-muted);
}

/* ── فرم ─────────────────────────────────────────────────────────────── */

.au-form { margin: 0; }
.au-row { margin-bottom: 14px; }

.au-label {
  display: block;
  margin-bottom: 6px;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--au-text);
}

.au-input {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--au-line);
  border-radius: calc(var(--au-radius) - 4px);
  background: var(--au-surface-2);
  color: var(--au-text);
  font-family: inherit;
  font-size: 1rem;      /* ⚠️ زیر 16px روی iOS باعث زوم خودکار می‌شود */
  line-height: 1.6;
  /* ارتفاع لمسی مناسب موبایل */
  min-height: 46px;
}
.au-input:focus {
  outline: 2px solid var(--au-accent);
  outline-offset: 1px;
  border-color: var(--au-accent);
}
.au-input.is-bad { border-color: var(--au-bad); }

/* ایمیل و شماره همیشه چپ‌به‌راست، حتی در صفحه‌ی RTL */
.au-input[type="email"],
.au-input[type="tel"] { direction: ltr; text-align: left; }

/* نشانهٔ فیلد الزامی. رنگ نشانهٔ تنها نیست — خودِ ستاره شکل است، پس برای
   کاربر کوررنگ هم خوانا می‌ماند. */
.au-req { color: var(--au-bad); }

/* ── پیام‌ها ─────────────────────────────────────────────────────────── */

.au-err {
  margin: 6px 0 0;
  font-size: .78rem;
  line-height: 1.8;
  color: var(--au-bad);
}
.au-alert {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: calc(var(--au-radius) - 4px);
  font-size: .84rem;
  line-height: 1.9;
}
.au-alert--err {
  background: rgba(229, 72, 77, .12);
  border: 1px solid rgba(229, 72, 77, .5);
  color: #ffb4b6;
}
.au-alert--ok {
  background: rgba(60, 180, 120, .12);
  border: 1px solid rgba(60, 180, 120, .5);
  color: #9fe6c2;
}

.au-hint,
.au-note {
  margin: 8px 0 0;
  font-size: .75rem;
  line-height: 1.95;
  color: var(--au-muted);
}
.au-note { margin-top: 16px; }
.au-note a { color: var(--au-accent); }

/* ── دکمه ────────────────────────────────────────────────────────────── */

.au-btn {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px 16px;
  border: 0;
  border-radius: calc(var(--au-radius) - 4px);
  background: var(--au-accent);
  color: var(--au-accent-ink);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.6;
  min-height: 48px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.au-btn:hover { filter: brightness(1.08); }
.au-btn--sm { width: auto; margin-top: 0; padding: 9px 14px; font-size: .85rem; min-height: 40px; }
.au-btn--ghost {
  background: transparent;
  border: 1px solid var(--au-line);
  color: var(--au-text);
}

.au-alt {
  margin: 14px 0 0;
  font-size: .82rem;
  line-height: 1.9;
  color: var(--au-muted);
  text-align: center;
}
.au-alt a { color: var(--au-accent); }

/* ── پوسته‌ی مستقل (وقتی shell.html نیست) ───────────────────────────── */

.au-standalone {
  margin: 0;
  background: #0d1117;
  color: #e8eef5;
  font-family: Vazirmatn, Tahoma, system-ui, sans-serif;
}
.au-wrap { padding: 16px; }
.au-brand {
  margin: 10px 0 0;
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
  color: var(--au-muted);
}

/* ── پنل مدیریت ──────────────────────────────────────────────────────── */

.au-admin {
  margin: 0;
  background: #0d1117;
  color: #e8eef5;
  font-family: Vazirmatn, Tahoma, system-ui, sans-serif;
}
.au-wrap--wide { max-width: 1100px; margin: 0 auto; padding: 20px 16px 40px; }

.au-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 16px 0;
}
.au-search .au-input { width: auto; flex: 1 1 14rem; }

/* ⚠️ جدول روی موبایل باید داخل ظرف خودش اسکرول شود، وگرنه کلِ صفحه
   افقی اسکرول می‌خورد. */
.au-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--au-line);
  border-radius: var(--au-radius);
}
.au-table { width: 100%; border-collapse: collapse; font-size: .84rem; min-width: 46rem; }
.au-table th,
.au-table td { padding: 9px 11px; text-align: right; border-bottom: 1px solid var(--au-line); }
.au-table th { background: var(--au-surface-2); font-weight: 700; white-space: nowrap; }
.au-table tbody tr:last-child td { border-bottom: 0; }
.au-empty { text-align: center; color: var(--au-muted); padding: 22px 0; }

.au-pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 14px; font-size: .84rem; }
.au-pager a { color: var(--au-accent); }

@media (prefers-reduced-motion: reduce) {
  .au-btn, .au-input { transition: none; }
}