/* ==================================================================
   صفحه‌ی ورود
   ==================================================================
   هیچ مقدارِ سراسری‌ای اینجا نیست: رنگ، فاصله، گردی، فونت و حرکت همه از
   dashboard/css/tokens.css و fonts.css می‌آیند (login.html آن دو را لود
   می‌کند). قبلاً این فایل یک کپیِ دستیِ پالت داشت که با هر بازطراحیِ پنل
   باید جداگانه همگام می‌شد و چند بار نشد؛ حالا کپی ندارد پس همگام‌سازی هم
   لازم نیست.
   ================================================================== */

html:root {
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-font-smoothing: antialiased;
}

input,
button {
  font-family: inherit;
}

/* پس‌زمینه همان نوارِ سرصفحه‌ی پنل است، فقط تمام‌صفحه -- ورود و پنل یک
   فضای واحد حس می‌شوند نه دو اپِ جدا. */
.login-container {
  background: linear-gradient(140deg, var(--color-primary-deep) 0%, var(--color-primary-dark) 55%, var(--color-primary) 100%);
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

/* کارت روی زمینه‌ی رنگی می‌نشیند، پس جدا شدنش کارِ سایه است نه قاب -- طبقِ
   اصلِ «قاب کمیاب است». */
.login-card {
  background: var(--surface);
  border-radius: var(--radius-overlay);
  max-width: 26.25rem;
  width: 100%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: login-in var(--duration-slow) var(--ease-out);
}

@keyframes login-in {
  from { opacity: 0; transform: translateY(var(--space-2)); }
  to   { opacity: 1; transform: none; }
}

.login-header {
  padding: var(--space-8) var(--space-8) var(--space-2);
  text-align: center;
  color: var(--text);
}

.login-title {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

/* نارنجیِ روشن، دقیقاً مثلِ لوگوی سرصفحه‌ی پنل. */
.login-icon {
  width: 4.5rem;
  height: 4.5rem;
  background: var(--color-accent);
  border-radius: var(--radius-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4-5);
  color: var(--color-accent-ink);
  font-size: var(--text-3xl);
}

.login-body {
  padding: var(--space-6) var(--space-8) var(--space-8);
}

.login-input-group {
  position: relative;
  margin-bottom: var(--space-4);
}

/* نام کاربری و رمز عبور همیشه لاتین‌اند. با dir=rtl صفحه، مکان‌نما از راست
   شروع می‌شد و متنِ تایپ‌شده وسطِ تایپ جابه‌جا می‌پرید -- آیکون هم سمتِ راست
   بود، یعنی درست همان‌جایی که کاربر انتظار دارد تایپش شروع شود.
   این دو فیلد (و فقط این دو) LTR شدند: آیکون چپ، متن از چپ. */
.login-input-icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: var(--text-base);
}

.login-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 3rem;
  direction: ltr;
  text-align: left;
  padding: 0 var(--space-3-5) 0 var(--space-10);  /* چپ: جا برای آیکونِ مطلق، وگرنه با متنِ تایپ‌شده قاطی می‌شد */
  border: var(--border);
  border-radius: var(--radius-control);
  transition: var(--transition-colors);
  font-size: var(--text-base);
  color: var(--text);
  background: var(--surface-sunken);
}

/* placeholder فارسی است ولی فیلد LTR؛ بدونِ این، متنِ راهنما به لبه‌ی راست
   می‌چسبد و از آیکونِ سمتِ چپ فاصله‌ی عجیبی می‌گیرد. */
.login-input::placeholder {
  direction: rtl;
  text-align: left;
  color: var(--text-muted);
}

.login-input:hover {
  border-color: var(--border-strong);
}

.login-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--surface);
  box-shadow: var(--focus-ring);
}

.login-error {
  margin-bottom: var(--space-4);
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* همان CTAی نارنجیِ پنل: رنگِ «عمل» یکی است، هرجای محصول که باشد. */
.login-btn {
  width: 100%;
  min-height: 3rem;
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  border: none;
  border-radius: var(--radius-control);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  cursor: pointer;
  transition: var(--transition-colors);
}

.login-btn:hover {
  background: var(--color-accent-dark);
}

.login-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}