/* =================================================================
   سامانه یکپارچه آراز — شیت گرافیکی
   رنگ‌ها از فایل لوگو نمونه‌برداری شده: سرمه‌ای #143f91، قرمز #d71921
   فونت Vazirmatn محلی (شبکه‌ی داخلی، بدون CDN) را araz-brand.css تعریف می‌کند که پیش از این فایل لینک می‌شود
   ================================================================= */

/* توکن‌های پورتال، همه از پالت مشترک araz-brand.css می‌آیند تا اگر
   رنگی آنجا عوض شد، اینجا هم خودبه‌خود عوض شود. */
:root {
  --navy-50:  var(--az-navy-50);
  --navy-100: var(--az-navy-100);
  --navy-300: var(--az-navy-300);
  --navy:     var(--az-navy-600);
  --navy-700: var(--az-navy-800);

  --bg: var(--az-bg-grouped);
  --surface-2: var(--az-n-25);
  --text: var(--az-n-900);
  --muted: var(--az-n-500);
  --border: var(--az-sep);

  --r-sm: var(--az-r-sm);

  --ease: var(--az-ease);
  --spring: var(--az-spring);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  font-size: 15px;
  line-height: 1.75;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--navy-100); color: var(--navy-700); }

/* اسکرول‌بار ظریف، هماهنگ با برند */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--az-n-300); border-radius: 99px;
  border: 3px solid var(--bg); background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--navy-300); background-clip: content-box; }

/* ---------- انیمیشن‌های پایه ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes spin { to { transform: rotate(360deg) } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =================================================================
   صفحه‌های ورود / ثبت‌نام / در انتظار تایید
   =================================================================
   ⚠ این بخش کاملا بازنویسی شد. نسخهٔ قبلی برای مارک‌آپِ نسخهٔ Node نوشته
   شده بود (.center-wrap، .brand) ولی پورتالِ C# مارک‌آپِ دیگری تولید می‌کند
   (.auth-body، .auth-logo، .auth-error، .auth-alt، .auth-note). نتیجه‌اش
   این بود که **اولین صفحه‌ای که هر کاربر می‌بیند تقریبا بی‌استایل بود**:
   ورودی‌ها بدونِ قاب و padding، لوگو ۱۴۲ پیکسل، و کارت به‌جای وسطِ صفحه
   چسبیده به بالا. با اجرای واقعیِ صفحه پیدا شد، نه با خواندنِ CSS.
   ================================================================= */

.auth-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(900px 520px at 78% -8%, color-mix(in srgb, var(--az-navy-600) 7%, transparent), transparent 60%),
    linear-gradient(170deg, var(--az-n-0) 0%, var(--az-bg-grouped) 100%);
}

.auth-card {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 392px;
  /* ⚠ شیشهٔ ضخیم: پشتِ این کارت دو لکهٔ رنگیِ آرام حرکت می‌کنند، پس شیشه
     اینجا واقعا چیزی برای نشان‌دادن دارد. لبهٔ روشنِ بالا نورِ روی جنس است.
     با «کاهشِ شفافیت» همین توکن‌ها توپر می‌شوند. */
  background: var(--az-mat-thick, var(--az-n-0));
  -webkit-backdrop-filter: var(--az-mat-filter, none);
  backdrop-filter: var(--az-mat-filter, none);
  border: 1px solid var(--az-hairline, var(--az-sep));
  border-radius: 22px;
  padding: 36px 32px 30px;
  box-shadow: inset 0 1px 0 var(--az-mat-edge, transparent), var(--az-sh-lg);
  text-align: right;
  animation: rise .45s var(--spring) both;
}
.auth-card * { box-sizing: border-box; }

/* ⚠ فایلِ لوگو ۱۴۲×۱۴۲ است و نوشته فقط نوارِ وسطش را پر می‌کند: با ۴۶px نوشتهٔ «ARAZ» ۳۶px می‌شد.
   ۹۶px و حاشیهٔ منفی (برای فضای خالیِ بالا و پایینِ خودِ تصویر) ⇒ نوشته حدود ۷۵px، فاصلهٔ دیدنی تا عنوان همان ۲۲px. */
.auth-logo {
  display: block;
  width: auto;
  height: 96px;
  margin: -24px auto -4px;
}
/* سرمه‌ای روی زمینهٔ تیره دیده نمی‌شد — همان دو حالتِ araz-brand.css (انتخابِ صریح، و خودکار بی‌انتخاب) */
:root[data-az-theme="dark"] .auth-logo { content: url("/brand/araz-logo-white.png"); }
@media (prefers-color-scheme: dark) {
  :root:not([data-az-theme="light"]) .auth-logo { content: url("/brand/araz-logo-white.png"); }
}

.auth-card h1 {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -.02em;
  text-align: center;
  margin: 0 0 24px;
  color: var(--az-n-900);
}

/* ⚠ مارک‌آپ به شکلِ «<label>متن <input/></label>» است، پس خودِ label ظرف است */
.auth-card label {
  display: block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 550;
  color: var(--az-n-600);
}

.auth-card input[type="text"],
.auth-card input[type="password"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  font: inherit;
  font-size: 15px;
  color: var(--az-n-900);
  /* ⚠ همان «خانهٔ فرمِ» داخلِ برنامه‌ها (shell.css): سطحِ خاکستریِ فرورفته که با فوکوس
     سفید می‌شود و حلقه می‌گیرد — نه قابِ خطی. تا ۱۲ مهر ۱۴۰۵ اولین صفحه‌ای که هر کاربر
     می‌بیند تنها جایی بود که هنوز ورودیِ قاب‌دار و دکمهٔ گوشه‌دارِ پیش از پوستهٔ اپلی داشت. */
  background-color: var(--az-fill);
  border: 1px solid transparent;
  border-radius: var(--az-r-md);
  padding: 10px 13px;
  min-height: 44px;
  transition: background-color var(--az-fast) var(--az-ease),
              border-color var(--az-fast) var(--az-ease),
              box-shadow var(--az-fast) var(--az-ease);
}
.auth-card input:hover:not(:focus) { border-color: transparent; background-color: var(--az-fill-hover); }
.auth-card input:focus {
  outline: none;
  background-color: var(--az-n-0);
  border-color: var(--az-navy-500);
  box-shadow: var(--az-ring);
}

/* کپسولِ پُر، یک‌رنگ — همان دکمهٔ اصلیِ `az-btn`، نه شیبِ رنگ. */
.auth-card button[type="submit"] {
  width: 100%;
  margin-top: 10px;
  min-height: 46px;
  font-size: 15px;
  font-weight: 650;
  border-radius: var(--az-r-full);
  background: var(--az-accent-solid);
  box-shadow: var(--az-sh-xs);
}
.auth-card button[type="submit"]:hover { background: var(--az-accent-hover); filter: none; box-shadow: var(--az-sh-sm); }

/* پیامِ خطای ورود — قرمزِ ملایم، نه یک بلوکِ هشدارِ درشت */
.auth-error {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: var(--az-r-md);
  background: var(--az-danger-bg);
  color: var(--az-danger);
  border: 1px solid color-mix(in srgb, var(--az-danger) 20%, transparent);
  font-size: 13.5px;
  line-height: 1.7;
  text-align: center;
}

/* متنِ توضیحیِ صفحهٔ «در انتظار تایید» */
.auth-note {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 2;
  color: var(--az-n-600);
  text-align: center;
}

/* «حساب ندارید؟ ثبت‌نام کنید» */
.auth-alt {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--az-sep);
  font-size: 13.5px;
  color: var(--az-n-500);
  text-align: center;
}
.auth-alt a { color: var(--az-navy-600); font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

@media (max-width: 420px) {
  .auth-body { padding: 16px; }
  .auth-card { padding: 28px 22px 24px; border-radius: 16px; }
}

h1, h2, h3 { margin: 0 0 8px; color: var(--navy); letter-spacing: -.2px; }
h1 { font-size: 1.32rem; font-weight: 800; }
h2 { font-size: 1.08rem; font-weight: 700; }
h3 { font-size: .98rem; font-weight: 700; }

label {
  display: block; font-size: .8rem; font-weight: 600;
  color: var(--text); margin: 14px 0 6px;
}

/* ⚠ همان «خانهٔ فرمِ» shell.css: سطحِ خاکستریِ فرورفته، بی‌قابِ خطی، با فوکوس سفید + حلقه.
   این قاعدهٔ پایه (۰٬۱٬۱) از `:where()`ِ پوسته سنگین‌تر است، پس هر ورودیِ `type`دارِ پورتال
   (تغییر رمز، جست‌وجوی مدیریت) تا ۱۲ مهر ۱۴۰۵ هنوز قابِ خطیِ ۱٫۵ پیکسلی داشت.
   ⚠ فقط `background-color`، نه کوتاه‌نویسی — فلشِ select تصویرِ زمینه است (تلهٔ مستند). */
input[type="text"], input[type="password"], select {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--az-r-md);
  border: 1px solid transparent;
  background-color: var(--az-fill);
  color: var(--text);
  font-size: .93rem;
  font-family: inherit;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease);
}
input::placeholder { color: var(--az-n-400); }
input[type="text"]:hover:not(:focus), input[type="password"]:hover:not(:focus), select:hover:not(:focus) { background-color: var(--az-fill-hover); }
input:focus, select:focus {
  outline: none;
  background-color: var(--az-n-0);
  border-color: var(--az-navy-500);
  box-shadow: var(--az-ring);
}

button, .btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  border: none;
  border-radius: var(--r-sm);
  padding: 11px 20px;
  font-size: .9rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--az-on-accent);
  background: linear-gradient(135deg, var(--az-accent-solid) 0%, var(--az-accent-hover) 100%);
  text-decoration: none;
  box-shadow: var(--az-sh-sm);
  transition: transform var(--az-dur-snap) var(--az-spring-snap), box-shadow .2s var(--ease), filter .16s var(--ease);
}
/* ⚠ دکمه با هاور دیگر «بالا نمی‌پرد». بازخوردِ اصلی روی **فشردن** است:
   همان لحظه کوچک می‌شود و با رهاکردن فنری برمی‌گردد. */
button:hover, .btn:hover {
  box-shadow: var(--az-sh-md);
  filter: brightness(1.07);
}
button:active, .btn:active {
  transform: scale(var(--az-press, .97));
  transition-duration: var(--az-dur-press, .07s);
  box-shadow: var(--az-sh-xs);
}
button:focus-visible, .btn:focus-visible { outline: 3px solid var(--az-navy-500); outline-offset: 2px; }
/* افکت «برق» روی دکمه‌ها برداشته شد: توجه را می‌دزدید و خواناییِ
   محتوای روی دکمه را کم می‌کرد. */

/* =================================================================
   جدول‌ها
   ================================================================= */

table { width: 100%; border-collapse: collapse; margin-top: 14px; }
th, td { padding: 12px; text-align: right; border-bottom: 1px solid var(--border); font-size: .86rem; }
th { color: var(--muted); font-weight: 700; background: var(--surface-2); font-size: .8rem; }
th:first-child { border-top-right-radius: 8px }
th:last-child  { border-top-left-radius: 8px }
tbody tr { transition: background .16s var(--ease); }
tbody tr:hover td { background: var(--navy-50); }
td select { max-width: 190px; padding: 6px 10px; font-size: .82rem; }

form.inline { display: inline; }

@media (max-width: 640px) {
  .auth-card { padding: 24px 22px 22px; }
}