/* ==========================================================================
   public/css/login.css  —  شاشة الدخول (النسخة الناعمة)
   مؤسسة المنهل لنظم المعلومات  |  مشروع المطعم
   --------------------------------------------------------------------------
   يُقرأ بعد restaurant.css ويعلو على تنسيق الدخول فيه فقط.
   الألوان كلها من الهوية (--brand والذهبي) — لا لون جديد.
   الفكرة: خلفية فاتحة هادئة بدل الأخضر الغامق، بطاقة بيضاء خفيفة الظل،
   حقول بيضاء بإطار رفيع، وخطوط أخف وزنًا.
   ========================================================================== */

body.auth-page{
  --auth-r: 12px;
  position:relative; overflow-x:hidden;
  min-height:100vh; margin:0; padding:1.5rem 1rem;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(900px 600px at 85% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 60%),
    radial-gradient(700px 500px at 0% 110%,  color-mix(in srgb, var(--gold) 12%, transparent),  transparent 60%),
    var(--purple-softer);
}

/* دائرتان باهتتان للزينة */
body.auth-page::before,
body.auth-page::after{
  content:''; position:fixed; border-radius:50%; pointer-events:none; z-index:0;
  border:1px solid color-mix(in srgb, var(--brand) 14%, transparent);
}
body.auth-page::before{ width:520px; height:520px; top:-180px; inset-inline-start:-160px; }
body.auth-page::after { width:380px; height:380px; bottom:-140px; inset-inline-end:-120px; border-color:color-mix(in srgb, var(--gold) 22%, transparent); }

/* ---- البطاقة ---- */
.auth-card{
  position:relative; z-index:1;
  width:100%; max-width:390px;
  background:var(--white);
  border:1px solid color-mix(in srgb, var(--brand) 12%, #fff);
  border-radius:var(--auth-r);
  padding:2.2rem 2rem 1.3rem;
  box-shadow:
    0 1px 2px rgba(20,60,35,.04),
    0 18px 50px -12px rgba(20,60,35,.14);
  overflow:hidden;
  animation:auth-in .5s ease-out both;
}
/* خيط رفيع أعلى البطاقة: أخضر يذوب في الذهبي */
.auth-card::before{
  content:''; position:absolute; top:0; inset-inline:0; height:3px;
  background:linear-gradient(90deg, var(--brand), var(--gold));
}
@keyframes auth-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---- الشعار والعنوان ---- */
.auth-brand{ text-align:center; margin-bottom:1.6rem; }
.auth-brand img{ display:block; height:84px; max-width:180px; object-fit:contain; margin:0 auto .8rem; }
.auth-mark{
  width:68px; height:68px; margin:0 auto .8rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--purple-softer); color:var(--purple); font-size:1.9rem;
  border:1px solid var(--purple-soft);
}
.auth-brand h1{ margin:0; font-size:1.3rem; font-weight:800; color:var(--purple-dark); line-height:1.5; }
.auth-brand p{ margin:.25rem 0 0; font-size:.92rem; font-weight:500; color:var(--ink-muted); }

/* ---- الحقول ---- */
.auth-form{ display:grid; gap:1.05rem; }
.auth-form .form-group{ margin:0; }
.auth-form .form-label{ margin-bottom:.35rem; font-size:.88rem; font-weight:700; color:var(--ink-2); }

.auth-field{ position:relative; }
.auth-field > i{
  position:absolute; top:50%; inset-inline-start:.9rem; transform:translateY(-50%);
  color:var(--ink-faint); font-size:1rem; pointer-events:none; transition:color .2s;
}
.auth-field .form-control{
  min-height:48px; font-size:1.02rem; font-weight:600;
  padding-inline-start:2.6rem; padding-inline-end:2.8rem;
  background:var(--white);
  border:1px solid color-mix(in srgb, var(--ink-faint) 35%, #fff);
  border-radius:calc(var(--auth-r) - 3px);
  box-shadow:none; transition:border-color .2s, box-shadow .2s;
}
.auth-field .form-control:hover{ border-color:color-mix(in srgb, var(--brand) 35%, #fff); }
.auth-field .form-control:focus{
  background:var(--white);
  border-color:var(--brand);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
}
.auth-field:focus-within > i{ color:var(--purple); }

.auth-eye{
  position:absolute; top:50%; inset-inline-end:.45rem; transform:translateY(-50%);
  width:36px; height:36px; border:none; background:transparent; color:var(--ink-faint);
  border-radius:50%; cursor:pointer; font-size:1rem;
}
.auth-eye:hover{ color:var(--purple); background:var(--purple-softer); }

/* تذكرني */
.auth-form .switch .label{ font-size:.88rem; font-weight:600; color:var(--ink-2); }

/* ---- زر الدخول ---- */
.auth-form .btn-save{
  min-height:50px; margin-top:.35rem;
  border-radius:calc(var(--auth-r) - 3px);
  font-size:1.1rem; font-weight:800; letter-spacing:.2px;
  box-shadow:0 8px 20px -8px color-mix(in srgb, var(--gold) 70%, transparent);
  transition:transform .15s, box-shadow .2s, filter .2s;
}
.auth-form .btn-save:hover{ filter:brightness(1.03); box-shadow:0 10px 24px -8px color-mix(in srgb, var(--gold) 80%, transparent); }
.auth-form .btn-save:active{ transform:translateY(1px); }

/* ---- الخطأ ---- */
.auth-card .alert{ border-radius:calc(var(--auth-r) - 3px); font-size:.92rem; margin-bottom:1rem; }

/* ---- التذييل ---- */
.auth-foot{
  margin-top:1.5rem; padding-top:.9rem;
  border-top:1px dashed color-mix(in srgb, var(--ink-faint) 30%, #fff);
  text-align:center; font-size:.8rem; font-weight:700; line-height:1.8;
  color:var(--purple);                       /* أخضر الهوية */
}
.auth-foot a{ color:inherit; text-decoration:none; font-weight:800; white-space:nowrap; }
.auth-foot a:hover{ color:var(--purple-dark); }
.auth-foot .auth-org,.auth-foot .auth-place{ display:block; }
.auth-foot .auth-place{ margin-top:.15rem; }

/* ---- الجوال ---- */
@media (max-width:480px){
  body.auth-page{ padding:1rem .8rem; align-items:flex-start; padding-top:8vh; }
  .auth-card{ padding:1.8rem 1.3rem 1.1rem; }
  .auth-brand img{ height:72px; }
}

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