/* ============================================================
   login.css — صفحة الدخول
   تخطيطان منفصلان يتبادلان عند 900px:
     .login-mobile   → الهاتف
     .login-desktop  → سطح المكتب
   كلاهما يملأ الشاشة تماماً بلا تمرير.

   ملاحظة على الارتفاع: نستخدم 100dvh وليس 100vh — على الجوال يتجاهل vh
   شريط عنوان المتصفح المتحرك فينتج تمرير بمقدار ارتفاعه تقريباً.
   ============================================================ */

/* يمنع تمرير الصفحة كلها ما دامت صفحة الدخول معروضة */
body.login-body { overflow: hidden; }
body.login-body main { height: 100dvh; }

.login-screen {
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--gradient-hero);
}

/* التبديل بين التخطيطين */
.login-mobile  { display: flex; }
.login-desktop { display: none; }
@media (min-width: 900px) {
  .login-mobile  { display: none; }
  .login-desktop { display: grid; }
}

/* ── عناصر مشتركة بين التخطيطين ───────────────────────────── */
.login-form .form-input {
  background: var(--surface-container-lowest);
  border-color: var(--outline-variant);
}
.login-form .form-input:focus { border-color: var(--primary); }

.login-submit { margin-top: 4px; }

.login-meta {           /* صف «تذكّرني» و«نسيت كلمة المرور» */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.login-alert { margin-bottom: var(--space-sm); }

.login-quick {          /* زر الدخول السريع */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
}

/* ════════════════════════════════════════════════════════════
   ١) الهاتف — قسم علوي بألوان العلامة + بطاقة بيضاء تملأ الباقي
   ════════════════════════════════════════════════════════════ */
.login-mobile {
  flex-direction: column;
  height: 100dvh;
  background: linear-gradient(155deg, #8a68b0 0%, #644587 55%, #462f63 100%);
}

/* — القسم العلوي — */
.lgm-hero {
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
  padding: calc(env(safe-area-inset-top) + 34px) 24px 46px;
}
.lgm-hero-inner { position: relative; z-index: 1; }

.lgm-logo  { height: 50px; width: auto; margin: 0 auto 16px; }
.lgm-title { font-size: 26px; font-weight: 700; line-height: 1.3; }
.lgm-sub   { font-size: 14px; color: rgba(255,255,255,.82); margin-top: 5px; }

.lgm-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
}
.lgm-orb-a { width: 300px; height: 300px; top: -150px; inset-inline-end: -90px;
             background: radial-gradient(circle, rgba(210,145,188,.55), transparent 70%); }
.lgm-orb-b { width: 240px; height: 240px; bottom: -120px; inset-inline-start: -80px;
             background: radial-gradient(circle, rgba(107,144,128,.45), transparent 70%); }

/* — البطاقة البيضاء: تملأ ما تبقّى حتى حافة الشاشة — */
.lgm-sheet {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-container-lowest);
  border-radius: 28px 28px 0 0;
  margin-top: -26px;
  box-shadow: 0 -10px 34px rgba(70, 47, 99, .18);
  padding: 26px 22px calc(env(safe-area-inset-bottom) + 14px);
}
.lgm-sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
}
/* صف الثقة — يملأ المساحة المتبقية بمحتوى بدل فراغ أبيض */
.lgm-trust {
  flex: 0 0 auto; margin-top: auto; padding-top: 18px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.lgm-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border-radius: var(--rounded-full);
  font-size: 12px; font-weight: 500;
  color: var(--on-surface-variant);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
}
.lgm-chip svg { color: var(--primary); flex: 0 0 auto; }

.lgm-foot { flex: 0 0 auto; text-align: center; padding-top: 14px; }
.lgm-foot a { font-weight: 600; }

.lgm-form { display: flex; flex-direction: column; gap: 14px; }
.lgm-form .form-input { padding: 14px 16px; }   /* هدف لمس مريح */

/* الشاشات الطويلة: وسّع القسم العلوي بدل ترك فراغ أسفل البطاقة */
@media (min-height: 780px) {
  .lgm-hero  { padding-top: calc(env(safe-area-inset-top) + 56px); padding-bottom: 62px; }
  .lgm-logo  { height: 58px; margin-bottom: 20px; }
  .lgm-title { font-size: 29px; }
  .lgm-sub   { font-size: 15px; }
  .lgm-sheet { padding-top: 30px; }
}
@media (min-height: 900px) {
  .lgm-hero  { padding-top: calc(env(safe-area-inset-top) + 76px); padding-bottom: 78px; }
}

/* الشاشات القصيرة (وضع أفقي أو أجهزة صغيرة): قلّص بدل أن تُحدث تمريراً */
@media (max-height: 730px) {
  .lgm-hero  { padding-top: calc(env(safe-area-inset-top) + 22px); padding-bottom: 38px; }
  .lgm-logo  { height: 42px; margin-bottom: 10px; }
  .lgm-title { font-size: 22px; }
  .lgm-sub   { font-size: 13px; }
  .lgm-sheet { padding-top: 20px; }
  .lgm-form  { gap: 11px; }
  .lgm-form .form-input { padding: 11px 14px; }
  .lgm-trust { display: none; }
}
@media (max-height: 620px) {
  .lgm-hero  { padding-top: calc(env(safe-area-inset-top) + 14px); padding-bottom: 30px; }
  .lgm-logo  { height: 34px; margin-bottom: 6px; }
  .lgm-title { font-size: 19px; }
  .lgm-sub   { display: none; }
  .lgm-sheet { margin-top: -22px; padding-top: 16px; }
  .lgm-form  { gap: 9px; }
  .lgm-form .form-label { margin-bottom: 2px; }
}
/* الهاتف أفقياً: صفّ القسمين جنباً إلى جنب بدل تكديسهما */
@media (max-height: 500px) and (orientation: landscape) {
  .login-mobile { flex-direction: row; }
  .lgm-hero  { flex: 0 0 40%; display: grid; place-items: center; padding: 20px; }
  /* الجهة الملاصقة للقسم العلوي هي inline-start، فنستخدم الخصائص المنطقية
     ليأتي التدوير على الجهة الصحيحة في RTL، ونزيد الحشوة بقدر التداخل. */
  .lgm-sheet { flex: 1 1 auto; margin-top: 0; margin-inline-start: -26px;
               border-radius: 0;
               border-start-start-radius: 28px;
               border-end-start-radius: 28px;
               padding: 18px 22px;
               padding-inline-start: 48px;
               box-shadow: -10px 0 34px rgba(70,47,99,.18); }
  .lgm-sub   { display: block; }
}

/* ════════════════════════════════════════════════════════════
   ٢) سطح المكتب — شاشة مقسومة
   النموذج على اليمين (بداية القراءة في RTL) والعلامة على اليسار.
   ════════════════════════════════════════════════════════════ */
.login-desktop {
  grid-template-columns: 1fr 1fr;
  height: 100dvh;
}
@media (min-width: 1280px) {
  .login-desktop { grid-template-columns: 1.05fr 1fr; }
}

/* — عمود النموذج — */
.lgd-form-col {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-md);
  min-height: 0; overflow-y: auto;
}
.lgd-form-inner { width: 100%; max-width: 380px; }

.lgd-logo  { height: 66px; margin-bottom: 26px; width: auto; }
.lgd-title { font-size: 30px; font-weight: 700; line-height: 1.25; }
.lgd-sub   { font-size: 15px; color: var(--on-surface-variant); margin: 6px 0 26px; }

.lgd-form  { display: flex; flex-direction: column; gap: 16px; }
.lgd-foot  { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--outline-variant); }

/* — لوحة العلامة التجارية — */
.lgd-brand {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-lg);
  background: linear-gradient(155deg, #8a68b0 0%, #644587 48%, #462f63 100%);
  color: #fff;
}
.lgd-brand::before,
.lgd-brand::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.lgd-brand::before {
  width: 460px; height: 460px; top: -160px; inset-inline-start: -140px;
  background: radial-gradient(circle, rgba(210,145,188,.42), transparent 68%);
}
.lgd-brand::after {
  width: 380px; height: 380px; bottom: -130px; inset-inline-end: -110px;
  background: radial-gradient(circle, rgba(107,144,128,.38), transparent 68%);
}
.lgd-brand-inner { position: relative; z-index: 1; max-width: 420px; margin: 0 auto; }

.lgd-brand-logo { height: 62px; width: auto; margin-bottom: 30px; }
.lgd-brand-title {
  font-size: 34px; font-weight: 700; line-height: 1.35; margin-bottom: 14px;
}
.lgd-brand-text {
  font-size: 16px; line-height: 1.85; color: rgba(255,255,255,.86);
  margin-bottom: 34px;
}

.lgd-points { display: flex; flex-direction: column; gap: 16px; }
.lgd-point  { display: flex; align-items: flex-start; gap: 13px; }
.lgd-point-icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--rounded-md);
  display: grid; place-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.20);
}
.lgd-point-title { font-weight: 600; font-size: 15px; }
.lgd-point-desc  { font-size: 13.5px; color: rgba(255,255,255,.78); line-height: 1.6; }

/* شاشات مكتبية قصيرة */
@media (min-width: 900px) and (max-height: 760px) {
  .lgd-logo { height: 50px; margin-bottom: 16px; }
  .lgd-title { font-size: 25px; }
  .lgd-sub { margin-bottom: 18px; }
  .lgd-brand-logo { height: 42px; margin-bottom: 18px; }
  .lgd-brand-title { font-size: 27px; }
  .lgd-brand-text { margin-bottom: 22px; }
  .lgd-points { gap: 12px; }
}

/* ════════════════════════════════════════════════════════════
   ٣) نافذة الدخول السريع
   ════════════════════════════════════════════════════════════ */
.demo-account-list { display: flex; flex-direction: column; gap: 8px; }
.demo-account-btn {
  display: block; width: 100%; text-align: start; cursor: pointer;
  padding: 10px 12px; border-radius: var(--rounded-md);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-lowest);
  transition: border-color .18s, background .18s, transform .18s;
}
.demo-account-btn:hover  { border-color: var(--primary); background: var(--surface-container-low); }
.demo-account-btn:active { transform: scale(.99); }
.demo-account-role { display: block; font-weight: 600; }
.demo-account-hint { display: block; font-size: .82rem; color: var(--on-surface-variant); margin-top: 1px; }
/* الاتجاه موروث (RTL) فتتحاذى مع بقية النص، وخوارزمية bidi تعرض
   البريد والرقم بترتيبهما اللاتيني الصحيح دون تدخّل. */
.demo-account-id   { display: block; font-size: .78rem; color: var(--on-surface-variant);
                     margin-top: 4px; opacity: .75; }