/* ============================================================
   منظومة عون — شاشة الدخول الغامرة (Immersive Login)
   تعتمد متغيّرات الهوية من app-tokens.css:
   --brand-teal #1BA4DE (الأساسي) · --brand-sky-dark · --brand-navy · --brand-teal-rgb · --font-base
   كل الحركات على transform/opacity فقط (أداء جيّد) وتُلغى عند prefers-reduced-motion.
   ============================================================ */

html, body { height: 100%; }

body.auth-immersive {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--font-base);
    background: #0b1f33; /* احتياطي تحت الصورة */
}

/* ====================== الخلفية الغامرة ====================== */
.auth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

/* صورة auth.jpg مع حركة Ken Burns بطيئة */
.auth-bg__image {
    position: absolute; inset: -2%; z-index: 0;
    background: url('/assets/images/auth.jpg') center / cover no-repeat;
    animation: authKen 30s ease-in-out infinite alternate;
    will-change: transform;
}

/* طبقة تلوين متدرّجة (navy → teal) لضمان قراءة البطاقة */
.auth-bg__tint {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(135deg,
        rgba(20, 48, 58, 0.88) 0%,
        rgba(20, 48, 58, 0.55) 45%,
        rgba(var(--brand-teal-rgb), 0.55) 100%);
}

/* طبقة نقوش متحركة خفيفة (حيوية دون تشويش) */
.auth-bg__texture {
    position: absolute; inset: -20%; z-index: 2;
    opacity: 0.5; mix-blend-mode: soft-light;
    background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.6px);
    background-size: 22px 22px;
    animation: authDrift 6s linear infinite;
    will-change: transform;
}

@keyframes authKen {
    from { transform: scale(1.05); }
    to   { transform: scale(1.16) translate(-1.5%, -1.5%); }
}
/* إزاحة بمقدار بلاطة واحدة (22px) → تكرار سلس */
@keyframes authDrift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -22px, 0); }
}

/* ====================== الموجة المتحركة ====================== */
.auth-wave {
    position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3;
    width: 100%; height: clamp(110px, 20vh, 220px);
    pointer-events: none;
}
.auth-wave path { will-change: transform; }
.auth-wave .wave--back  { fill: rgba(255, 255, 255, 0.12); animation: waveBob 9s ease-in-out infinite; }
.auth-wave .wave--mid   { fill: rgba(var(--brand-teal-rgb), 0.22);  animation: waveBob 7s ease-in-out infinite reverse; }
.auth-wave .wave--front { fill: rgba(255, 255, 255, 0.16); animation: waveBob 11s ease-in-out infinite; }

@keyframes waveBob {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(-2.5%, 7px, 0); }
}

/* ====================== مسرح الدخول (توسيط) ====================== */
.auth-stage {
    position: relative; z-index: 5;
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px 16px;
}

/* ====================== البطاقة الزجاجية ====================== */
.auth-card {
    width: 100%; max-width: 420px;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
    backdrop-filter: blur(16px) saturate(1.05);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 20px;
    box-shadow: 0 24px 60px -20px rgba(11, 31, 51, 0.55);
    padding: 30px 26px 26px;
    color: var(--brand-navy);
}
/* مخفيّة أثناء الـ intro، تدخل بظهور سينمائي عند الجاهزية.
   ملاحظتان: (1) الدخول بـ opacity فقط — بلا transform كي يبقى موضع شعار البطاقة ثابتاً هندسياً فيهبط عليه
   «الشعار الطائر» (FLIP) بدقّة، وبلا filter كي لا يتعارض blur الحركة مع backdrop-filter (إعادة طلاء مزدوجة). */
body.intro-active .auth-card { opacity: 0; }
body.is-ready .auth-card { animation: cardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes cardIn { from { opacity: 0; } to { opacity: 1; } }

/* أثناء عرض الـ intro تُغطّى الخلفية بالكامل — أوقِف حركاتها (Ken Burns/النقوش/الموجة) توفيراً للأداء، وتُستأنف عند الجاهزية. */
body.intro-active .auth-bg__image,
body.intro-active .auth-bg__texture,
body.intro-active .auth-wave path { animation-play-state: paused; }

.auth-card__head { text-align: center; margin-bottom: 20px; }
.auth-card__logo { height: 54px; width: auto; margin-bottom: 12px; }
.auth-card__head h1 { font-size: 1.4rem; font-weight: 700; margin: 0 0 4px; color: var(--brand-navy); }
.auth-card__head p  { margin: 0; color: #5b6b72; font-size: 0.9rem; }

/* الحقول */
.auth-field { margin-bottom: 16px; }
.auth-field > label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; color: var(--brand-navy); }
.auth-input-wrap { position: relative; }

.auth-card .form-control {
    height: 48px; border-radius: 12px; border: 1px solid #d7dee0;
    background: #fff; padding: 0 14px; font-size: 0.95rem; color: var(--brand-navy);
}
.auth-card .form-control::placeholder { color: #aab4b8; }
.auth-card .form-control:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-teal-rgb), 0.18);
}
.auth-card .form-control.has-eye { padding-inline-end: 46px; }

/* زر إظهار/إخفاء كلمة المرور (RTL: على اليسار) */
.auth-eye {
    position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
    border: 0; background: transparent; color: #8a979c;
    width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.auth-eye:hover { color: var(--brand-teal); background: rgba(var(--brand-teal-rgb), 0.08); }
.auth-eye svg { width: 20px; height: 20px; }
.auth-eye .icon-off { display: none; }
.auth-eye[data-shown="1"] .icon-on { display: none; }
.auth-eye[data-shown="1"] .icon-off { display: block; }

/* صف «تذكّرني» */
.auth-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; }
.auth-row .form-check-label { font-size: 0.88rem; color: #4c5a60; }

/* رسالة الخطأ */
.auth-alert {
    display: flex; align-items: center; gap: 8px;
    background: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.25);
    color: #b02a37; border-radius: 12px; padding: 10px 12px; font-size: 0.88rem; margin-bottom: 16px;
}

/* زر الدخول */
.auth-submit {
    width: 100%; height: 50px; border: 0; border-radius: 12px; cursor: pointer;
    background: linear-gradient(180deg, var(--brand-teal) 0%, var(--brand-sky-dark) 100%);
    color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: 0.2px;
    box-shadow: 0 12px 24px -10px rgba(var(--brand-teal-rgb), 0.7);
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-submit:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 16px 30px -10px rgba(var(--brand-teal-rgb), 0.85); }
.auth-submit:active { transform: translateY(0); }
.auth-submit[disabled] { opacity: 0.8; cursor: default; transform: none; }

/* مُحمِّل الزر */
.auth-spinner {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #fff;
    animation: authSpin 0.7s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }

/* تذييل خارج البطاقة فوق الخلفية الداكنة — شعار وزارة الصحة + جهة التنفيذ */
.auth-foot {
    margin-top: 22px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center; color: rgba(255, 255, 255, 0.85);
}
.auth-foot__logo { height: 56px; width: auto; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4)); }
.auth-foot__text { display: flex; flex-direction: column; gap: 2px; line-height: 1.55; }
.auth-foot__by { font-size: 0.78rem; color: rgba(255, 255, 255, 0.7); }
.auth-foot__org { font-size: 0.9rem; font-weight: 600; color: #fff; }

/* ====================== الأنيميشن التمهيدي (Intro) ======================
   مسرح داكن سينمائي ليبرز الشعار المتوهّج والجملة البيضاء الناعمة، ثم يتلاشى مع طيران الشعار (FLIP)
   إلى موضعه داخل بطاقة الدخول. مخفيّ افتراضياً (CSS) ويُظهره JS فقط — فبلا JS تظهر البطاقة مباشرة. */
#intro {
    display: none;
    position: fixed; inset: 0; z-index: 50;
    flex-direction: column; align-items: center; justify-content: center;
    background:
        radial-gradient(120% 100% at 50% 38%, #1a4a6e 0%, #0f2d46 52%, #0a1c2e 100%);
}
#intro.intro--show { display: flex; }
#intro.intro--leaving { animation: introOut 0.6s ease forwards; } /* تلاشي الخلفية والجملة فقط — الشعار يطير منفصلاً */

/* حاوية الشعار + هالته */
.intro__logo-wrap { position: relative; display: flex; align-items: center; justify-content: center; }

/* توهّج ناعم «يتنفّس» خلف الشعار بلون #7FD4F5 */
.intro__glow {
    position: absolute; z-index: 0; pointer-events: none;
    width: min(46vw, 360px); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(127, 212, 245, 0.55) 0%, rgba(127, 212, 245, 0.18) 42%, transparent 70%);
    filter: blur(16px); opacity: 0;
    animation: introGlowIn 1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards,
               introBreath 3.2s ease-in-out 1.15s infinite;
    will-change: transform, opacity;
}

/* الشعار: blur-to-sharp + scale(0.92 → 1) + opacity، بـ easing مخصّص ومدّة ~1s */
.intro__logo {
    position: relative; z-index: 1;
    height: clamp(96px, 17vh, 150px); width: auto;
    opacity: 0; transform: scale(0.92); filter: blur(12px);
    animation: introLogo 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    will-change: transform, filter, opacity;
}

/* الجملة: أبيض ناعم + تباعد حروف + ظهور الكلمات بـ stagger (~80ms) مع slide-up */
.intro__tagline {
    margin: 30px 0 0; padding: 0;
    font-size: clamp(1.15rem, 3.2vw, 1.7rem); font-weight: 500;
    color: rgba(255, 255, 255, 0.92); letter-spacing: 0.06em;
    display: flex; gap: 0.42em;
    text-shadow: 0 2px 20px rgba(10, 28, 46, 0.55);
}
.intro__tagline span { opacity: 0; transform: translateY(14px); animation: introWord 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.intro__tagline span:nth-child(1) { animation-delay: 1.05s; }
.intro__tagline span:nth-child(2) { animation-delay: 1.13s; }
.intro__tagline span:nth-child(3) { animation-delay: 1.21s; }
.intro__tagline span:nth-child(4) { animation-delay: 1.29s; }

.intro__skip {
    position: absolute; bottom: 24px; inset-inline-end: 26px;
    border: 0; background: transparent; color: rgba(255, 255, 255, 0.55);
    font-family: inherit; font-size: 0.85rem; cursor: pointer; transition: color 0.15s ease;
}
.intro__skip:hover { color: #fff; }

@keyframes introLogo   { to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes introGlowIn { to { opacity: 1; } }
@keyframes introBreath { 0%, 100% { transform: scale(1); opacity: 0.72; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes introWord   { to { opacity: 1; transform: none; } }
@keyframes introOut    { to { opacity: 0; } }

/* الشعار الطائر (FLIP): ينتقل من وسط الـ intro إلى موضعه داخل البطاقة بحركة سلسة موحّدة.
   طبقتان متراكبتان: الأزرق (وجهة البطاقة) أسفل، والأبيض (من الـ intro) أعلى يتلاشى أثناء الطيران
   فيتحوّل الشعار من أبيض إلى أزرق مع انتقاله من الخلفية الداكنة إلى البطاقة البيضاء. */
.auth-fly-logo {
    position: fixed; z-index: 60; margin: 0; pointer-events: none;
    transform-origin: top left;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.auth-fly-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.auth-fly-logo__over { transition: opacity 0.55s ease; } /* الأبيض يتلاشى كاشفاً الأزرق */

/* ====================== استجابة الجوال ====================== */
@media (max-width: 575.98px) {
    .auth-card { padding: 24px 18px; border-radius: 18px; }
}

/* ====================== تقليل الحركة ====================== */
@media (prefers-reduced-motion: reduce) {
    .auth-bg__image, .auth-bg__texture, .auth-wave path, .auth-card,
    .intro__logo, .intro__glow, .intro__tagline span, .auth-fly-logo { animation: none !important; transition: none !important; }
    .intro__logo { opacity: 1; transform: none; filter: none; }
    .intro__glow { opacity: 0.85; }
    .intro__tagline span { opacity: 1; transform: none; }
    body.intro-active .auth-card { opacity: 1; filter: none; }
}