/* ============================================================
   FOTA-MAIL · Auth — صفحات الدخول والتسجيل وإضافة حساب
   ============================================================ */

/* ============================================================
   ⚠️ الصفحة لازم تمرّق هون — بخلاف التطبيق
   ------------------------------------------------------------
   base.css بيحط `overflow: hidden` على body، وهاد مضبوط لتطبيق
   البريد: التمرير بيصير جوّا الأعمدة (القائمة · القارئ · الرَيْل)
   والصفحة نفسها ما بتتحرّك.

   بس صفحات المصادقة والمعالج بتستعمل نفس base.css وما إلها
   أعمدة. النتيجة كانت عطل حقيقي: `.fm-auth` عندها `min-height`
   مش `height`، يعني بتكبر مع المحتوى بدل ما تمرّق — وbody
   بيقصّ الزيادة. فأي شاشة أطول من النافذة بتصير **محبوسة**:
   ولا فوق ولا تحت، وزر "التالي" مقصوص برّا الشاشة.

   بيبيّن بخطوات المعالج الطويلة (الإعدادات والمدير) وبشاشات
   المصادقة على لابتوب قصير.

   هالملف بينتحمّل بصفحات المصادقة والمعالج وبس — التطبيق ما
   بيشوفه أبداً، فالإرجاع هون ما بيلمس تمرير البريد.
   ============================================================ */
html,
body {
  overflow: auto;
  height: auto;
}

.fm-auth {
  min-height: 100dvh;
  display: flex;
  background: var(--fm-app-grad);
  color: var(--fm-text);
}

/* ---------- اللوحة اليسرى (الهوية) ---------- */
.fm-auth__panel {
  width: var(--fm-auth-panel-w);
  flex: none;
  display: flex; flex-direction: column;
  gap: 28px;
  padding: 44px 48px;
  background:
    radial-gradient(900px 420px at 15% 0%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%),
    var(--panel-gradient);
  border-inline-end: 1px solid var(--fm-border);
  position: relative;
  overflow: hidden;
}
.fm-auth__panel::after {
  content: "";
  position: absolute;
  inset-block-end: -140px; inset-inline-start: -80px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent), transparent 65%);
  filter: blur(10px);
  animation: fm-glow 6s ease-in-out infinite;
}
.fm-auth__headline {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-block: 8px;
  max-width: 15ch;
}
.fm-auth__sub { color: var(--fm-text-2); font-size: var(--fm-fs-135); max-width: 46ch; line-height: 1.7; }
.fm-auth__features { display: flex; flex-direction: column; gap: 14px; margin-block-start: auto; }
.fm-auth__feature { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fm-fs-125); }
.fm-auth__feature i { font-size: 20px; color: var(--fm-brand-400); flex: none; }
.fm-auth__feature b { display: block; color: var(--fm-text); font-weight: 600; }
.fm-auth__feature span { color: var(--fm-text-muted); }
.fm-auth__foot { font-size: var(--fm-fs-11); color: var(--fm-text-muted); }

/* ---------- اللوحة اليمنى (النموذج) ---------- */
.fm-auth__main {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px;
  min-width: 0;
}
.fm-auth__card {
  width: 100%;
  max-width: var(--fm-auth-card-w);
  display: flex; flex-direction: column; gap: 18px;
  animation: fm-in .4s var(--fm-ease);
}
.fm-auth__card--wide { max-width: 620px; }
.fm-auth__title { font-size: 22px; font-weight: 600; }
.fm-auth__note { font-size: var(--fm-fs-125); color: var(--fm-text-muted); }
.fm-auth__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: var(--fm-fs-12);
}
.fm-auth__link { color: var(--fm-brand-400); }

.fm-auth__or {
  display: flex; align-items: center; gap: 12px;
  color: var(--fm-text-muted); font-size: var(--fm-fs-11);
  letter-spacing: var(--fm-tracking-wide);
}
.fm-auth__or::before, .fm-auth__or::after {
  content: ""; flex: 1; height: 1px; background: var(--fm-border);
}

.fm-oauth { display: flex; flex-direction: column; gap: 9px; }
.fm-oauth__btn {
  display: flex; align-items: center; gap: 11px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--fm-border-strong);
  border-radius: var(--fm-r-md);
  background: var(--fm-surface-1);
  color: var(--fm-text-1);
  font-size: var(--fm-fs-13);
  transition: border-color var(--fm-t-fast), background var(--fm-t-fast);
}
.fm-oauth__btn:hover { border-color: var(--fm-brand-a40); background: var(--fm-surface-2); }
.fm-oauth__btn i { font-size: 18px; color: var(--fm-brand-400); }
.fm-oauth__btn span:last-child { margin-inline-start: auto; color: var(--fm-text-muted); font-size: var(--fm-fs-11); }

/* ---------- خانات رمز التحقق ---------- */
.fm-code { display: flex; gap: 10px; }
.fm-code input {
  width: 52px; height: 60px;
  text-align: center;
  font-family: var(--fm-font-mono);
  font-size: 22px;
  color: var(--fm-text);
  background: var(--fm-surface-1);
  border: 1px solid var(--fm-border-strong);
  border-radius: var(--fm-r-md);
}
.fm-code input:focus { border-color: var(--fm-brand-500); background: var(--fm-surface-2); }

/* ---------- الشاشات الضيقة ---------- */
@media (max-width: 940px) {
  .fm-auth { flex-direction: column; }
  .fm-auth__panel {
    width: 100%;
    padding: 28px 24px;
    gap: 18px;
    border-inline-end: none;
    border-block-end: 1px solid var(--fm-border);
  }
  .fm-auth__features, .fm-auth__foot { display: none; }
  .fm-auth__headline { font-size: 23px; }
  .fm-auth__main { padding: 28px 20px 48px; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .fm-code input { width: 44px; height: 54px; font-size: 19px; }
}

/* ---------- إعدادات السيرفر (صفحة الدخول) ----------
   بتنعرض كسطرين مختصرين، وبضغطة "Edit" بتصير خانات إدخال.
   المزوّد بيعبّيها لحاله، بس القرار الأخير للمستخدم: مضيف جديد
   ما بيلزمه لا تعديل .env ولا إعادة تنصيب. */
.fm-server-note {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 13px;
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-r-md);
  background: var(--fm-surface-1);
}
.fm-server-note i { font-size: 16px; color: var(--fm-text-muted); flex: none; margin-block-start: 2px; }
.fm-server-note__body { flex: 1 1 auto; min-width: 0; }
.fm-server-note__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-block-end: 5px;
}
.fm-server-note__title {
  font-size: var(--fm-fs-11);
  letter-spacing: var(--fm-tracking-wide);
  text-transform: uppercase;
  color: var(--fm-text-muted);
}
.fm-server-note__edit {
  flex: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fm-fs-11);
  letter-spacing: var(--fm-tracking-wide);
  text-transform: uppercase;
  color: var(--fm-brand-300);
}
.fm-server-note__edit:hover { text-decoration: underline; }
.fm-server-note__actions { flex: none; display: flex; gap: 12px; }
.fm-server-note__actions .fm-server-note__edit[hidden] { display: none; }
.fm-server-note__rows {
  display: grid; gap: 3px;
  font-family: var(--fm-font-mono);
  font-size: var(--fm-fs-115);
  color: var(--fm-text-2);
}
.fm-server-note__fields { gap: 12px; margin-block-start: 10px; }

/* ---------- تذكّر بيانات الدخول (صفحة الدخول) ----------
   صف واحد: مربّع اختيار + سطر شرح صغير تحته. الضغط على النص
   بينقل للزر لحاله لأنه <button> جوّا <label>. */
.fm-remember {
  display: flex; gap: 10px; align-items: flex-start;
  cursor: pointer;
  margin-block-start: -4px;
}
.fm-remember .fm-check { margin-block-start: 2px; }
.fm-remember__text {
  display: grid; gap: 2px;
  font-size: var(--fm-fs-13);
  color: var(--fm-text-2);
}