/* ============================================================================
   شاشات الدخول / المصادقة — تخطيط لوحين احترافي (Split-Panel)
   يُستخدَم من: تسجيل الدخول، التحقق بخطوتين، نسيت كلمة المرور، رمز التحقق،
   معالج التثبيت، وإشعار الاشتراك. اللوح الأيمن (الهوية) يختفي تحت 992px
   فيعود كل شيء لبطاقة واحدة موسَّطة — لا كسر لأي شاشة قائمة.
   ========================================================================== */

:root {
    --auth-navy: #0f2942;
    --auth-orange: #f5821f;
    --auth-orange-dark: #d96c0f;
    --auth-gold: #d9b45a;

    --auth-card-bg: #ffffff;
    --auth-card-border: #e6e9ef;
    --auth-input-bg: #ffffff;
    --auth-input-border: #d9dfe8;
    --auth-text: #1f2937;
    --auth-text-muted: #6b7280;
}

/* البطاقة تطفو على الخلفية الموحّدة — لا عمود أبيض منفصل. في الوضع الداكن
   ترفع درجة زرقتها قليلاً عن الخلفية لتبرز بلا حدّ فاصل قاسٍ. */
[data-bs-theme="dark"] {
    --auth-card-bg: #16273b;
    --auth-card-border: rgba(255, 255, 255, .1);
    --auth-input-bg: #1c3047;
    --auth-input-border: rgba(255, 255, 255, .14);
    --auth-text: #e9eef6;
    --auth-text-muted: #9fb0c4;
}

/* ---------------------------------------------------------------- الهيكل العام */
/* خلفية واحدة للصفحة كلها (النصفان + التذييل) — لا يشعر المستخدم بأي فاصل
   بين لوح الهوية ونموذج الدخول؛ البطاقة تطفو فوقها كنقطة تركيز واحدة.
   تصميم يلتزم عمداً بمظهر واحد (Hero داكن) في الوضعين — نمط شاشات الدخول
   العالمية (Odoo وغيرها). */
body.tpe-auth-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    color: #fff;
    background:
        radial-gradient(135% 75% at 85% -5%, rgba(245, 130, 31, .16), transparent 55%),
        radial-gradient(120% 120% at 100% 100%, rgba(10, 25, 44, .55), transparent 55%),
        linear-gradient(155deg, #1c4a76 0%, #133c60 40%, #0e2a45 72%, #0a1f34 100%);
    background-repeat: no-repeat;
}
html { background: #0a1f34; }   /* ما وراء الصفحة عند أي تمرير — لا أسود */

.tpe-auth-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
}

/* ------------------------------------------------------- اللوح الأيمن: الهوية */
/* شفاف تماماً — نفس خلفية الصفحة، فلا حدّ ولا لون مختلف */
.tpe-auth-brand {
    display: none;                 /* يظهر على الشاشات الكبيرة فقط */
    position: relative;
    overflow: hidden;
    padding: 2.25rem 3rem;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

/* تروس زخرفية ضخمة باهتة جداً — عمق خلف المحتوى، لا نسيج يوحي بلوح منفصل */
.tpe-auth-brand-gear {
    position: absolute;
    z-index: 0;
    line-height: 1;
    pointer-events: none;
    color: rgba(255, 255, 255, .025);
}
.tpe-auth-brand-gear--lg { inset-inline-end: 6%; bottom: -9rem; font-size: 22rem; }
.tpe-auth-brand-gear--sm { inset-inline-start: 4%; top: -4rem; font-size: 10rem; color: rgba(245, 130, 31, .04); }

.tpe-auth-brand-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
}

/* علامة المنتج داخل إطار ذهبي مستدير الحواف — يهجس فقط بمحتواه */
.tpe-auth-brand-mark {
    align-self: flex-start;
    display: inline-flex;
    padding: .85rem 1.5rem;
    border: 1px solid rgba(217, 180, 90, .55);
    border-radius: 1.1rem;
    background: linear-gradient(160deg, rgba(217, 180, 90, .12), rgba(217, 180, 90, .03));
    box-shadow: 0 0 0 4px rgba(217, 180, 90, .05), 0 8px 24px -12px rgba(0, 0, 0, .4);
}
.tpe-auth-brand-mark .tpe-brand-mark { align-items: center; gap: .35rem; }
.tpe-auth-brand-mark img { max-height: 62px; max-width: 200px; }
.tpe-auth-brand-mark .tpe-brand-mark i { font-size: 1.85rem; }
.tpe-auth-brand-mark .tpe-brand-mark-word { font-size: 1.45rem; letter-spacing: .04em; }

.tpe-auth-brand h1 {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -.01em;
    margin: 0 0 .7rem;
    text-wrap: balance;
}

.tpe-auth-brand-body > p {
    font-size: .98rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, .74);
    margin: 0;
    text-wrap: balance;
}

/* الترجمة الإنجليزية تحت كل فقرة عربية — خط صغير هادئ.
   direction:ltr يمنع انقلاب النقطة/الفواصل إلى بداية السطر داخل سياق RTL،
   وتبقى المحاذاة يميناً لتلتقي حافتها مع بداية النص العربي فوقها. */
.tpe-auth-brand-sub {
    font-size: .78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .42);
    letter-spacing: .01em;
    margin: .15rem 0 0;
    direction: ltr;
    text-align: right;
    text-wrap: balance;
}
h1 + .tpe-auth-brand-sub { margin-top: -.4rem; margin-bottom: .7rem; }

/* قائمة المزايا — سطر عربي + ترجمة صغيرة تحته */
.tpe-auth-features {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}
.tpe-auth-features li {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}
.tpe-auth-features li > i {
    flex: none;
    margin-top: .15rem;
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border-radius: .55rem;
    background: rgba(245, 130, 31, .13);
    color: var(--auth-orange);
    font-size: .82rem;
}
.tpe-auth-features li > span { display: block; }
.tpe-auth-features li > span {
    font-size: .95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .9);
}
.tpe-auth-features li small {
    display: block;
    font-size: .74rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, .4);
    letter-spacing: .01em;
    margin-top: .05rem;
    direction: ltr;
    text-align: right;
}

/* بطاقة الدعم الفني — قائمة تواصل + رمز QR (vCard) */
.tpe-auth-support-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .9rem;
    padding: 1.15rem 1.3rem;
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.tpe-auth-support-main { flex: 1; min-width: 0; }

.tpe-auth-support-qr {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding-inline-start: 1.3rem;
    border-inline-start: 1px solid rgba(255, 255, 255, .12);
}
.tpe-auth-support-qr img {
    width: 162px;
    height: 162px;
    padding: 9px;                 /* منطقة هادئة بيضاء حول الرمز — ضرورية للمسح */
    box-sizing: border-box;
    background: #fff;
    border-radius: 8px;
    display: block;
    image-rendering: pixelated;   /* حواف وحدات الرمز تبقى حادّة عند التصغير */
}
.tpe-auth-support-qr span {
    font-size: .72rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, .62);
    text-align: center;
}
.tpe-auth-support-qr small {
    display: block;
    direction: ltr;
    font-size: .66rem;
    color: rgba(255, 255, 255, .4);
}
.tpe-auth-support-title {
    color: #fff;
    margin-bottom: .8rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}
.tpe-auth-support-title > i { color: var(--auth-orange); margin-top: .15rem; }
.tpe-auth-support-title > span { font-weight: 700; line-height: 1.35; }
.tpe-auth-support-title small {
    display: block;
    font-weight: 400;
    font-size: .73rem;
    color: rgba(255, 255, 255, .42);
    letter-spacing: .01em;
    margin-top: .05rem;
    direction: ltr;
    text-align: right;
}
.tpe-auth-support-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.tpe-auth-support-card li { display: flex; align-items: center; gap: .65rem; color: rgba(255, 255, 255, .75); white-space: nowrap; }
.tpe-auth-support-card li > i { flex: none; width: 1.15em; text-align: center; color: var(--auth-orange); }
.tpe-auth-support-card a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.tpe-auth-support-card a:hover { color: #fff; text-decoration: underline; }

/* --------------------------------------------------- اللوح الأيسر: النموذج */
.tpe-auth-form-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.25rem;
}

.tpe-auth-shell {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.tpe-auth-card {
    width: 100%;
    background: var(--auth-card-bg);
    border: 1px solid var(--auth-card-border);
    border-radius: 1.15rem;
    padding: 2.4rem 2.1rem;
    /* البطاقة تطفو فوق الخلفية الداكنة الموحّدة — ظل عميق يمنحها ثباتاً */
    box-shadow:
        0 2px 6px rgba(4, 12, 22, .18),
        0 40px 80px -24px rgba(4, 12, 22, .5);
}

.tpe-auth-hr { border: 0; border-top: 1px solid var(--auth-card-border); margin: 0 0 1.4rem; opacity: .8; }

/* علامة المنتج داخل البطاقة — نفس علامة القائمة الجانبية */
.tpe-auth-brandmark {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin: 0 auto 1.1rem;
}
.tpe-auth-brandmark img { max-height: 56px; max-width: 200px; object-fit: contain; }
.tpe-auth-brandmark .tpe-brand-mark { gap: .4rem; }
.tpe-auth-brandmark .tpe-brand-mark i { font-size: 1.75rem; }
/* الكلمة بيضاء في القائمة الجانبية — على البطاقة البيضاء تصير كحلية */
.tpe-auth-brandmark .tpe-brand-mark-word { font-size: 1.5rem; color: var(--auth-navy); }
[data-bs-theme="dark"] .tpe-auth-brandmark .tpe-brand-mark-word { color: #fff; }

.tpe-auth-card h5 { color: var(--auth-text); font-weight: 700; }
.tpe-auth-card-sub {
    text-align: center;
    direction: ltr;
    font-size: .76rem;
    letter-spacing: .01em;
    color: var(--auth-text-muted);
    margin: 0 0 .15rem;
}

/* ------------------------------------------------------------ حقول الإدخال */
.tpe-input-group { position: relative; }

.tpe-input-group .tpe-input-icon {
    position: absolute;
    inset-inline-start: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--auth-text-muted);
    font-size: .95rem;
    pointer-events: none;
}

.tpe-auth-card .form-control {
    background: var(--auth-input-bg);
    border: 1px solid var(--auth-input-border);
    color: var(--auth-text);
    min-height: 48px;
    padding: .65rem 1rem;
    border-radius: .6rem;
}

.tpe-input-group .form-control { padding-inline-start: 2.6rem; }

/* مساحة لزر إظهار كلمة المرور (يحقنه tpe-password-reveal.js ويلفّ الحقل
   في .tpe-reveal-wrap — نستهدف اللفّاف كي تثبت المساحة بعد تبديل النوع) */
.tpe-input-group .tpe-reveal-wrap .form-control,
.tpe-input-group .form-control[type="password"] { padding-inline-end: 2.8rem; }

.tpe-auth-card .form-control:focus {
    border-color: var(--auth-orange);
    box-shadow: 0 0 0 .22rem rgba(245, 130, 31, .18);
    background: var(--auth-input-bg);
    color: var(--auth-text);
}

.tpe-auth-card .form-control::placeholder { color: var(--auth-text-muted); opacity: .7; }

.tpe-label-bilingual { color: var(--auth-text); }

/* تحذير Caps Lock */
.tpe-capslock-hint {
    margin-top: .4rem;
    font-size: .78rem;
    color: var(--auth-orange-dark);
    display: flex;
    align-items: center;
    gap: .35rem;
}
[data-bs-theme="dark"] .tpe-capslock-hint { color: #f8b878; }

/* صف "تذكرني" + "نسيت كلمة المرور" */
.tpe-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.1rem;
}
.tpe-auth-row .form-check { margin: 0; }
.tpe-auth-row .form-check-label { color: var(--auth-text-muted); font-size: .88rem; }
.tpe-auth-row a { font-size: .85rem; text-decoration: none; }
.tpe-auth-row a:hover { text-decoration: underline; }

/* الزر */
.tpe-auth-card .btn-orange {
    width: 100%;
    min-height: 48px;
    font-weight: 600;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.tpe-auth-card .btn-orange:disabled { opacity: .75; cursor: progress; }

.tpe-auth-card .alert { border-radius: .6rem; font-size: .9rem; }

/* ---------------------------------------------------------------- التذييل */
.tpe-auth-footer {
    text-align: center;
    padding: 1.25rem 1rem 1.6rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .5);
    line-height: 1.8;
}
.tpe-auth-footer a { color: rgba(255, 255, 255, .68); text-decoration: none; }
.tpe-auth-footer a:hover { color: #fff; text-decoration: underline; }

/* ============================================================ الشاشات الكبيرة */
@media (min-width: 992px) {
    .tpe-auth-layout { grid-template-columns: 1.05fr 1fr; }
    .tpe-auth-brand { display: flex; }
    .tpe-auth-form-pane { padding: 3rem 2rem; }
    .tpe-auth-card { padding: 2.5rem 2.25rem; }
    /* على الشاشة الكبيرة الهوية في اللوح الجانبي — علامة البطاقة أصغر */
    .tpe-auth-brand ~ .tpe-auth-form-pane .tpe-auth-brandmark { min-height: 44px; }
    .tpe-auth-brand ~ .tpe-auth-form-pane .tpe-auth-brandmark .tpe-brand-mark i { font-size: 1.5rem; }
    .tpe-auth-brand ~ .tpe-auth-form-pane .tpe-auth-brandmark .tpe-brand-mark-word { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}