/* صفحة الدخول الموحّدة (/login) وصفحة تعيين كلمة المرور (/admin/reset) — تبني فوق styles.css */

/* الخلفية بألوان الهوية الثابتة لا بالمتغيرات: في الوضع الداكن تنقلب
   متغيرات الأخضر إلى درجات فاتحة، فيصير التدرّج باهتًا خلف البطاقة. */
.auth-body {
  background: linear-gradient(165deg, #2C7350, #1E5638 55%, #143D28);
  min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem;
}
.auth-card {
  background: var(--surface); border-radius: var(--radius);
  width: min(100%, 480px); padding: clamp(1.4rem, 1rem + 3vw, 2.6rem);
  box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 30px 70px -32px rgba(0,0,0,.6);
}
.auth-brand { text-align: center; margin-bottom: 1.6rem; }
.auth-brand img { display: block; margin: 0 auto .8rem; width: auto; height: 58px; }
.auth-brand h1 {
  font-family: var(--font-display); font-size: 1.55rem; margin: 0 0 .2rem; color: var(--brand-dark);
}
.auth-brand p { margin: 0; font-size: .9rem; color: var(--ink-2); }

.auth-card .field { margin-bottom: 1.2rem; }
/* النص المساعد هنا يقرؤه كبار السن: أكبر وأغمق من نظيره في اللوحة */
.auth-card .muted-sm { font-size: .9rem; color: var(--ink-2); }
.auth-lead { font-size: .98rem; color: var(--ink-2); margin: 0 0 1.3rem; text-align: center; }
.btn-block { width: 100%; justify-content: center; }
.auth-alt { text-align: center; margin: 1.2rem 0 0; display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.auth-foot { text-align: center; margin: 1.6rem 0 0; font-size: .9rem; }
.auth-foot a { color: var(--ink-2); text-decoration: none; }
.auth-foot a:hover { color: var(--brand); }
.auth-join {
  text-align: center; margin: 1.5rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-2);
}
.auth-join a { font-weight: 600; }

/* زر بمظهر رابط: فعله فعل زر، فلا يكون <a> بلا وجهة */
.linkish {
  font: inherit; font-size: .95rem; background: none; border: 0; padding: .4rem;
  color: var(--brand); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; min-height: 44px;
}
.linkish:hover { color: var(--brand-dark); }

.show-pass {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; color: var(--ink-2); margin: -.4rem 0 1.4rem;
}
.show-pass input { width: 22px; height: 22px; accent-color: var(--brand); }

/* البريد المكتوب يُعاد عرضه بخط واضح: الخطأ المطبعي يُرى ولا يُخمَّن */
.echo-mail {
  margin: .7rem 0 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.02rem; font-weight: 600; color: var(--brand-dark);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .55rem .8rem; word-break: break-all;
}
.auth-card .note { margin-bottom: 1.1rem; }

/* ---------- اللسانان ----------
   شريط بلون الرمل، واللسان المختار حبّة خضراء بنص أبيض. الأخضر هنا ثابت
   لا متغيّر، فيبقى النص الأبيض مقروءًا في الوضعين. */
.login-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .3rem;
  margin: 0 0 1.6rem; border-radius: 999px;
  background: var(--sand, #F3EADF); border: 1px solid var(--sand-2, #E6D5C1);
}
.login-tabs [role="tab"] {
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.3; cursor: pointer;
  min-height: 52px; padding: .5rem .8rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--brown, #8B5E34);
  transition: background .18s ease, color .18s ease;
}
.login-tabs [role="tab"]:hover { background: var(--sand-2, #E6D5C1); }
/* على الجوال يبقى اسم اللسان سطرًا واحدًا: سطران في حبّة يربكان القراءة */
@media (max-width: 420px) {
  .auth-body { padding-inline: .6rem; }
  .auth-card { padding-inline: 1.1rem; }
  .login-tabs [role="tab"] { font-size: .9rem; padding-inline: .35rem; }
}
.login-tabs [role="tab"][aria-selected="true"] {
  background: #1E5638; color: #fff; box-shadow: 0 8px 18px -12px rgba(20,61,40,.9);
}

/* خانة الرمز: أرقام كبيرة متباعدة تُقرأ وتُراجَع بسهولة. الإزاحة تعادل
   التباعد بعد آخر رقم، فيبقى الرمز في وسط الخانة فعلًا. */
.field .login-code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.7rem; font-weight: 700; text-align: center;
  letter-spacing: .45em; text-indent: .45em; min-height: 64px;
}