/* =========================
   Login (Auth) Page Styles
   - ريسبونسف، بسيط، متناسق مع المتغيّرات العامة
   - يعتمد على: --bg --fg --surface --border --muted-bg --muted-fg --primary --primary-fg
   ========================= */

.auth-root{
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: hsl(var(--bg));
  color: hsl(var(--fg));
  position: relative;
  overflow: clip;
}

/* خلفية زخرفية لطيفة ومتوازنة مع الهوية */
.auth-decor{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(520px 280px at 85% -10%, hsl(var(--brand-copper, var(--primary)) / .08), transparent 60%),
    radial-gradient(640px 300px at -10% 110%, hsl(var(--brand-stone, var(--primary)) / .06), transparent 60%);
  transform: translateZ(0);
}

/* البطاقة */
.auth-panel{
  position: relative;
  z-index: 1;
  width: min(92vw, 460px);
  border-radius: 16px;
  background: hsl(var(--surface));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 10px 30px hsl(0 0% 0% / .06), 0 2px 10px hsl(0 0% 0% / .04);
  padding: 22px;
  animation: auth-pop .28s ease-out both;
}

@media (min-width: 480px){
  .auth-panel{ padding: 26px; border-radius: 18px; }
}

.auth-header{
  margin-bottom: 12px;
}

.auth-title{
  font-size: clamp(1.15rem, 1.5vw + 1rem, 1.4rem);
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 6px;
}

.auth-subtitle{
  margin: 0;
  color: hsl(var(--muted-fg));
  font-size: .95rem;
}

/* النموذج */
.auth-form{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.auth-field{ display: block; }

.auth-label{
  display: block;
  font-size: .85rem;
  color: hsl(var(--muted-fg));
  margin: 0 0 6px;
}

/* تعتمد الحقول على الستايل العام الذي أضفته في globals.css
   لذا نكتفي بعرض-كامل فقط */
.auth-form :where(input){ width: 100%; }

/* رسالة الخطأ */
.auth-error{
  background: hsl(0 80% 45% / .06);
  color: hsl(0 60% 35%);
  border: 1px solid hsl(0 65% 60% / .5);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .92rem;
  line-height: 1.4;
  animation: auth-bump .25s ease;
}

/* تذييل صغير */
.auth-footnote{
  margin-top: 14px;
  text-align: center;
  color: hsl(var(--muted-fg));
  font-size: .82rem;
}

/* حركات خفيفة محترمة لتقليل الحركة */
@keyframes auth-pop{
  from{ opacity: 0; transform: translateY(6px) scale(.98); }
  to  { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes auth-bump{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.01); }
  100%{ transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .auth-panel{ animation: none; }
  .auth-error{ animation: none; }
}