/* ============================================================
   بريد tn.sa — صفحة تسجيل الدخول (بطاقة بنمط Google)
   تنبيه بنيوي: elastic/ui.js يعيد بناء النموذج بعد التحميل —
   يضيف placeholder للحقل من نصّ التسمية، ويخفي td.title بنمطٍ
   داخليّ، ويُقحم أيقونة input-group-prepend، ويلبس الزرّ فئات
   bootstrap. لذلك تحتاج أغلب القواعد هنا !important لتغلب النمط
   الداخليّ وفئات bootstrap.
   ============================================================ */

body.task-login {
  /* الأزرق فاتحٌ في الوضع الداكن، فنصّ الزرّ فوقه يجب أن يكون داكنًا لا أبيض */
  --tn-login-on-primary: #ffffff;
  /* الأيقونة بيضاء داخل الـSVG نفسه: القناع (mask) يصبغ العنصر كلّه
     ولا يمكنه صبغ طبقة خلفيّة واحدة فوق التدرّج */
  --tn-login-mark: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
  --tn-login-mark-bg: linear-gradient(135deg, #1a73e8, #0b57d0 55%, #7b1fa2);
}
html.dark-mode body.task-login {
  --tn-login-on-primary: #062e6f;
  /* تدرّجٌ أصفى قليلًا كي لا يغرق المربّع في خلفية الليل */
  --tn-login-mark-bg: linear-gradient(135deg, #4c8df6, #1a73e8 55%, #9334c4);
}

/* ============ المسرح ============ */
/* #layout في tn-shell شبكةُ التطبيق ويبدأ شفّافًا بانتظار tn.js،
   وصفحة الدخول لا تمرّ بذلك المسار فنُعيده هنا مسرحًا يتوسّط البطاقة */
body.task-login #layout {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-content: safe center;   /* كي لا يُقصّ أعلى البطاقة في شاشة قصيرة */
  grid-template: none !important;
  block-size: 100vh;
  inline-size: 100%;
  overflow: auto;
  /* الحشوة السفلى أكبر لأن التذييل يقع خارج تدفّق البطاقة تحتها */
  padding-block: 40px 96px;
  padding-inline: 16px;
  background: var(--tn-bg);
  opacity: 1 !important;
  animation: none !important;
}

/* ============ البطاقة ============ */
body.task-login #layout-content {
  position: relative !important;   /* يبطل انزلاق اللوحة في شاشات ≤1200px */
  inset: auto !important;
  z-index: auto !important;
  flex: none !important;
  inline-size: 448px;
  max-inline-size: 100%;
  padding-block: 48px;
  padding-inline: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--tn-surface) !important;
  border: 1px solid var(--tn-divider) !important;
  border-radius: var(--tn-r-xl);
  box-shadow: none !important;
  overflow: visible !important;
  animation: tn-login-in var(--tn-d-5) var(--tn-ease-out) both;
}
html.dark-mode body.task-login #layout-content {
  /* في الليل الحدّ وحده لا يفصل البطاقة عن الخلفية، فنسندها بظلّ خافت */
  box-shadow: var(--tn-e2) !important;
}

@keyframes tn-login-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ============ العلامة والعنوان ============ */
body.task-login #logo { display: none !important; }

body.task-login #layout-content::before {
  content: '';
  order: 1;
  flex: none;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 14px;
  background: var(--tn-login-mark) center / 26px 26px no-repeat, var(--tn-login-mark-bg);
  box-shadow: var(--tn-e1);
  margin-block-end: 18px;
}
body.task-login #layout-content::after {
  content: 'تسجيل الدخول';
  order: 2;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--tn-text);
}

body.task-login #login-form {
  order: 3;
  /* elastic يحدّه بـ max-width:320px و top:20vh — البطاقة هي من يحدّ العرض الآن */
  inline-size: 100% !important;
  max-inline-size: none !important;
  margin: 0 !important;
  padding: 0;
  inset-block-start: auto !important;
  position: static;   /* ليتموضع التذييل نسبةً إلى البطاقة لا إلى النموذج */
}
body.task-login #login-form::before {
  content: 'إلى بريد tn.sa';
  display: block;
  text-align: center;
  font-size: var(--tn-fs-md);
  color: var(--tn-text-2);
  margin-block: 6px 32px;
}

/* ============ الحقول: Material outlined ============ */
body.task-login #login-form table,
body.task-login #login-form tbody,
body.task-login #login-form tr,
body.task-login #login-form td {
  display: block !important;
  inline-size: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
}
body.task-login #login-form tr {
  position: relative;            /* مرجع تموضع التسمية الطافية */
  margin-block-end: 24px !important;
}

/* elastic يخفي خلية التسمية بنمط داخليّ؛ display:contents يعيدها ويذيب
   الخليّة فتصير التسمية طفلًا مباشرًا للصفّ فتتموضع فوق حدّ الحقل */
body.task-login #login-form td.title { display: contents !important; }
body.task-login #login-form td.title label {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: 17px;
  /* أعلى من z-index:3 الذي يمنحه bootstrap للحقل داخل input-group،
     وإلّا رُسم حدّ الحقل فوق التسمية وقطع حروفها */
  z-index: 5;
  margin: 0;
  padding-inline: 4px;
  font-size: var(--tn-fs-lg);
  line-height: 22px;
  font-weight: 400;
  color: var(--tn-text-3);
  background: var(--tn-surface);  /* يقطع الحدّ خلفها عند الطفو */
  pointer-events: none;
  white-space: nowrap;
  transition: inset-block-start var(--tn-d-2) var(--tn-ease),
              font-size var(--tn-d-2) var(--tn-ease),
              color var(--tn-d-2) var(--tn-ease);
}
/* الطفو: عند التركيز، أو متى امتلأ الحقل — الحقلان required فلا يصحّان فارغين */
body.task-login #login-form tr:focus-within td.title label {
  inset-block-start: -9px;
  font-size: var(--tn-fs-sm);
  line-height: 18px;
  color: var(--tn-primary);
}
body.task-login #login-form tr:has(input:required:valid) td.title label {
  inset-block-start: -9px;
  font-size: var(--tn-fs-sm);
  line-height: 18px;
}
/* متصفّح بلا :has — التسمية فوق الحدّ دائمًا، خيرٌ من تسميةٍ تركب النصّ */
@supports not selector(:has(*)) {
  body.task-login #login-form td.title label {
    inset-block-start: -9px;
    font-size: var(--tn-fs-sm);
    line-height: 18px;
  }
}

/* أيقونة elastic المُقحمة تستعمل خطّ FontAwesome وتزاحم النصّ — نطويها */
body.task-login #login-form .input-group-prepend,
body.task-login #login-form .input-group-text { display: none !important; }

body.task-login #login-form input.form-control {
  position: relative;
  z-index: auto !important;   /* يُبقي التسمية الطافية فوق حدّ الحقل */
  inline-size: 100% !important;
  block-size: 56px !important;
  padding-block: 0 !important;
  padding-inline: 15px !important;
  border: 1px solid var(--tn-outline) !important;
  border-radius: var(--tn-r-xs) !important;
  background: transparent !important;
  color: var(--tn-text) !important;
  caret-color: var(--tn-primary);
  font-family: var(--tn-font) !important;
  font-size: var(--tn-fs-lg) !important;
  box-shadow: none !important;
  transition: border-color var(--tn-d-2) var(--tn-ease),
              box-shadow var(--tn-d-2) var(--tn-ease);
}
body.task-login #login-form input.form-control:hover { border-color: var(--tn-text-2) !important; }
body.task-login #login-form input.form-control:focus {
  border-color: var(--tn-primary) !important;
  /* حدّ ٢px بظلّ داخليّ بدل تغليظ الحدّ، فلا يقفز ارتفاع الحقل */
  box-shadow: inset 0 0 0 1px var(--tn-primary) !important;
  outline: none !important;
}
/* التسمية تنوب عن الـplaceholder الذي حقنه elastic */
body.task-login #login-form input.form-control::placeholder { color: transparent !important; }
body.task-login #login-form input:-webkit-autofill {
  -webkit-text-fill-color: var(--tn-text);
  -webkit-box-shadow: 0 0 0 40px var(--tn-surface) inset !important;
  caret-color: var(--tn-text);
}

/* ============ الزرّ ============ */
body.task-login #login-form p.formbuttons {
  margin: 4px 0 0 !important;
  padding: 0;
  inline-size: 100%;
}
body.task-login #rcmloginsubmit {
  position: relative;
  display: block;
  inline-size: 100% !important;
  block-size: 48px;
  border: 0 !important;
  border-radius: var(--tn-r-pill) !important;
  background: var(--tn-primary) !important;
  color: var(--tn-login-on-primary) !important;
  font-family: var(--tn-font) !important;
  font-size: var(--tn-fs-md) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;   /* elastic يضيف text-uppercase */
  box-shadow: none;
  cursor: pointer;
  transition: background var(--tn-d-2) var(--tn-ease),
              box-shadow var(--tn-d-2) var(--tn-ease);
}
body.task-login #rcmloginsubmit:hover {
  background: var(--tn-primary-hover) !important;
  box-shadow: var(--tn-e2);
}
body.task-login #rcmloginsubmit:active { box-shadow: var(--tn-e1); }
body.task-login #rcmloginsubmit:focus { box-shadow: var(--tn-e2); }
body.task-login #rcmloginsubmit:focus-visible { outline: 2px solid var(--tn-text); outline-offset: 2px; }

/* مؤشّر التحميل عند الإرسال */
body.task-login .btn.loading,
body.task-login #rcmloginsubmit.loading,
body.task-login #rcmloginsubmit:disabled {
  color: transparent !important;
  pointer-events: none;
}
body.task-login .btn.loading::after,
body.task-login #rcmloginsubmit.loading::after,
body.task-login #rcmloginsubmit:disabled::after {
  content: '';
  position: absolute;
  inset-block-start: calc(50% - 10px);
  inset-inline-start: calc(50% - 10px);
  inline-size: 20px;
  block-size: 20px;
  border: 2px solid color-mix(in srgb, var(--tn-login-on-primary) 30%, transparent);
  border-block-start-color: var(--tn-login-on-primary);
  border-radius: 50%;
  animation: tn-login-spin 700ms linear infinite;
}
@keyframes tn-login-spin { to { transform: rotate(360deg); } }

/* ============ التذييل ============ */
body.task-login #login-footer {
  position: absolute;             /* مرجعه البطاقة، فيقع تحتها خارجها */
  inset-block-start: calc(100% + 20px);
  inset-inline: 0;
  text-align: center;
  font-size: var(--tn-fs-sm);
  line-height: 1.6;
  color: var(--tn-text-3);
  background: none !important;
  border: 0 !important;
  padding: 0;
  margin: 0;
}
body.task-login #login-footer a { color: var(--tn-text-2); text-decoration: none; }
body.task-login #login-footer a:hover { color: var(--tn-primary); }

/* ============ الرسائل ============ */
/* elastic يلوّن الرسائل بألوان bootstrap الصارخة ويضعها أسفل الشاشة؛
   هنا نرفعها فوق البطاقة ونهدّئ لونها */
body.task-login #messagestack {
  position: fixed;
  inset-block-start: max(16px, calc(50vh - 322px));  /* تستقرّ فوق البطاقة بفجوة ٢٤px */
  inset-block-end: auto;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
  inline-size: auto;
  max-inline-size: none;
  block-size: auto;
  max-block-size: none;
  background: none;
  pointer-events: none;
}
body.task-login #messagestack > div:not(.voice) {
  box-sizing: border-box;
  inline-size: 448px !important;      /* elastic: .ui.alert{width:100%} */
  max-inline-size: 100%;
  align-self: center;
  min-block-size: 0 !important;       /* elastic: min-height:4.2rem */
  opacity: 1 !important;              /* elastic: .ui.alert{opacity:.95} */
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding-block: 12px !important;
  padding-inline: 16px !important;
  margin: 0 !important;
  border: 1px solid transparent !important;
  border-radius: var(--tn-r-md) !important;
  background: var(--tn-surface-2) !important;
  color: var(--tn-text) !important;
  font-family: var(--tn-font);
  font-size: var(--tn-fs-md);
  line-height: 1.55;
  text-align: start;
  box-shadow: none;
  pointer-events: auto;
}
/* أيقونة elastic محرفٌ من FontAwesome — نطويها ونرسم قناعنا مكانها */
body.task-login #messagestack > div > i.icon { display: none !important; }
body.task-login #messagestack > div:not(.voice)::before {
  content: '';
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  background-color: currentColor;
  -webkit-mask: var(--i-junk) center / contain no-repeat;
  mask: var(--i-junk) center / contain no-repeat;
  font-family: inherit !important;
}
body.task-login #messagestack > div.error,
body.task-login #messagestack > div.alert-danger {
  background: var(--tn-surface-2) !important;   /* بديلٌ لمتصفّح بلا color-mix */
  background: color-mix(in srgb, var(--tn-danger) 10%, var(--tn-surface)) !important;
  border-color: color-mix(in srgb, var(--tn-danger) 35%, transparent) !important;
  color: var(--tn-danger) !important;
  animation: tn-login-shake 420ms var(--tn-ease) 1;
}
body.task-login #messagestack > div.confirmation,
body.task-login #messagestack > div.alert-success {
  background: var(--tn-surface-2) !important;
  background: color-mix(in srgb, var(--tn-success) 10%, var(--tn-surface)) !important;
  border-color: color-mix(in srgb, var(--tn-success) 30%, transparent) !important;
  color: var(--tn-success) !important;
}
body.task-login #messagestack > div.confirmation::before,
body.task-login #messagestack > div.alert-success::before {
  -webkit-mask-image: var(--i-check);
  mask-image: var(--i-check);
}
body.task-login #messagestack > div a { color: inherit; font-weight: 500; }
@keyframes tn-login-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(4px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

/* ============ تفاصيل ============ */
body.task-login .noscriptwarning {
  max-inline-size: 448px;
  margin-block-start: 16px;
  font-size: var(--tn-fs-sm);
  color: var(--tn-danger);
  text-align: center;
}

@media (max-width: 520px) {
  body.task-login #layout-content {
    padding-block: 36px;
    padding-inline: 24px;
    border: 0 !important;
    border-radius: var(--tn-r-lg);
  }
}