/* ============================================================
   auth.css — الستايل الموحد لصفحات الدخول والتسجيل
   login.php + register-student.php
   يدعم الوضع الليلي (الافتراضي) والنهاري عبر data-theme على <html>
   ألوان الهوية (--primary / --secondary / --accent) تُضبط من
   ShortExtention/AuthStyles.php حسب إعدادات الموقع
   ============================================================ */

/* ── ألوان الهوية (قيم احتياطية — تُستبدل من PHP) ─────────── */
:root {
    --primary:   #38449A; --primary-rgb:   56, 68, 154;
    --secondary: #FDBF0F; --secondary-rgb: 253, 191, 15;
    --accent:    #2D3786; --accent-rgb:    45, 55, 134;
    --secondary-ink: #8d6908; /* نسخة داكنة من الثانوي للقراءة على خلفية فاتحة */
}

/* ── الثيم الليلي (الافتراضي) ─────────────────────────────── */
:root {
    --page-bg: #06080f;

    --card-bg:   rgba(15, 19, 36, 0.72);
    --card-bdr:  rgba(255, 255, 255, 0.09);
    --card-shadow:
        0 30px 80px -20px rgba(0, 0, 0, 0.55),
        0 15px 40px -15px rgba(var(--primary-rgb), 0.33),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

    --banner-bg: linear-gradient(135deg, #141b2d 0%, #0c101c 100%);

    --field-bg:        rgba(255, 255, 255, 0.04);
    --field-bg-focus:  rgba(255, 255, 255, 0.07);
    --field-bdr:       rgba(255, 255, 255, 0.08);
    --field-bdr-hover: rgba(255, 255, 255, 0.16);

    --tx-1: #ffffff;
    --tx-2: rgba(255, 255, 255, 0.88);
    --tx-3: rgba(255, 255, 255, 0.75);
    --ph:   rgba(255, 255, 255, 0.48);

    --chip-bg:  rgba(255, 255, 255, 0.10);
    --chip-bdr: rgba(255, 255, 255, 0.20);
    --line:     rgba(255, 255, 255, 0.07);

    --social-bg:        rgba(255, 255, 255, 0.04);
    --social-bdr:       rgba(255, 255, 255, 0.08);
    --social-bg-hover:  rgba(255, 255, 255, 0.09);
    --social-bdr-hover: rgba(255, 255, 255, 0.22);

    --iti-list-bg:  #121827;
    --iti-list-bdr: rgba(255, 255, 255, 0.1);
    --iti-list-hov: rgba(255, 255, 255, 0.08);

    --tint-top:    rgba(var(--primary-rgb), 0.125);
    --tint-bottom: rgba(var(--accent-rgb), 0.086);
    --glow-1: rgba(var(--primary-rgb), 0.25);
    --glow-2: rgba(var(--accent-rgb), 0.25);
    --glow-3: rgba(var(--secondary-rgb), 0.10);

    --canvas-op: 1;
    --shape-op:  1;

    --tg-bg:     rgba(15, 19, 36, 0.7);
    --tg-bdr:    rgba(255, 255, 255, 0.14);
    --tg-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
    --tg-col:    #ffffff;
}

/* ── الثيم النهاري ────────────────────────────────────────── */
html[data-theme="light"] {
    --page-bg: #d9dfec;

    --card-bg:   rgba(255, 255, 255, 0.92);
    --card-bdr:  rgba(var(--primary-rgb), 0.16);
    --card-shadow:
        0 30px 80px -25px rgba(56, 68, 154, 0.35),
        0 15px 40px -18px rgba(var(--primary-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);

    --banner-bg: linear-gradient(135deg, rgba(var(--primary-rgb), 0.30) 0%, rgba(var(--accent-rgb), 0.20) 100%);

    --field-bg:        rgba(15, 23, 42, 0.03);
    --field-bg-focus:  #ffffff;
    --field-bdr:       rgba(15, 23, 42, 0.14);
    --field-bdr-hover: rgba(15, 23, 42, 0.25);

    --tx-1: #0f172a;
    --tx-2: #39435e;
    --tx-3: #4e5975;
    --ph:   rgba(15, 23, 42, 0.46);

    --chip-bg:  rgba(var(--primary-rgb), 0.08);
    --chip-bdr: rgba(var(--primary-rgb), 0.18);
    --line:     rgba(15, 23, 42, 0.09);

    --social-bg:        rgba(255, 255, 255, 0.65);
    --social-bdr:       rgba(15, 23, 42, 0.12);
    --social-bg-hover:  #ffffff;
    --social-bdr-hover: rgba(var(--primary-rgb), 0.45);

    --iti-list-bg:  #ffffff;
    --iti-list-bdr: rgba(15, 23, 42, 0.12);
    --iti-list-hov: rgba(var(--primary-rgb), 0.07);

    --tint-top:    rgba(var(--primary-rgb), 0.08);
    --tint-bottom: rgba(var(--accent-rgb), 0.05);
    --glow-1: rgba(var(--primary-rgb), 0.13);
    --glow-2: rgba(var(--accent-rgb), 0.12);
    --glow-3: rgba(var(--secondary-rgb), 0.08);

    --canvas-op: 0.45;
    --shape-op:  0.6;

    --tg-bg:     rgba(255, 255, 255, 0.8);
    --tg-bdr:    rgba(var(--primary-rgb), 0.2);
    --tg-shadow: 0 10px 30px -12px rgba(56, 68, 154, 0.35);
    --tg-col:    #0f172a;
}

/* ── الأساسيات ────────────────────────────────────────────── */
* { font-family: 'IBM Plex Sans Arabic', sans-serif; box-sizing: border-box; }

html, body {
    background: var(--page-bg);
    min-height: 100%;
    transition: background 0.3s ease;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
}

/* ── تكبير أحجام الخطوط (كانت صغيرة جداً في كل الصفحة) ───────
   يرفع أحجام كلاسات Tailwind text-xs/sm/base المستخدمة في login.php
   و register-student.php. الملف يُحمَّل بعد سكربت tailwind cdn في
   <head> لذا يتغلب على كلاساته بنفس مستوى التخصيص. ─────────────── */
.text-xs   { font-size: 0.8125rem; line-height: 1.25rem; }
.text-sm   { font-size: 0.9375rem; line-height: 1.5rem;  }
.text-base { font-size: 1.0625rem; line-height: 1.65rem; }

/* ── رفع تباين النصوص الباهتة (شفافية بيضاء منخفضة على الخلفية الداكنة) ── */
.text-white\/60,
.text-white\/68 { color: rgba(255, 255, 255, 0.78); }
.text-white\/75,
.text-white\/80,
.text-white\/82 { color: rgba(255, 255, 255, 0.92); }
.placeholder-white\/38::placeholder { color: rgba(255, 255, 255, 0.46); }
.placeholder-white\/50::placeholder { color: rgba(255, 255, 255, 0.56); }

/* ── شعار الموقع: صورة مختلفة حسب الوضع الليلي/النهاري ─────────
   data-theme يتحدد في <head> قبل الرسم (AuthStyles.php) فلا يوجد وميض ── */
.logo-light { display: none; }
html[data-theme="light"] .logo-dark  { display: none; }
html[data-theme="light"] .logo-light { display: block; }

/* ── طبقة الإضاءة الخلفية ─────────────────────────────────── */
.ambient-tint {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, var(--tint-top), transparent 70%),
        radial-gradient(ellipse 80% 60% at 50% 100%, var(--tint-bottom), transparent 70%);
}

/* ── الكروت الزجاجية ──────────────────────────────────────── */
.glass-panel {
    background: var(--card-bg);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid var(--card-bdr);
}

.main-card {
    box-shadow: var(--card-shadow);
    animation: card-rise 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* الجانب التعريفي (البانر الجانبي) */
.auth-banner { background: var(--banner-bg); }

@keyframes card-rise {
    from { opacity: 0; transform: translateY(28px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── حقول الإدخال (login: .input-style / register: .custom-input) ── */
.input-style, .custom-input {
    background: var(--field-bg);
    border: 1.5px solid var(--field-bdr);
    border-radius: 0.75rem;
    color: var(--tx-1);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.input-style:hover, .custom-input:hover { border-color: var(--field-bdr-hover); }
.input-style:focus, .custom-input:focus {
    background: var(--field-bg-focus);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15), 0 0 20px -3px rgba(var(--primary-rgb), 0.35);
    outline: none;
}
.input-style::placeholder, .custom-input::placeholder { color: var(--ph); }

/* ── الأزرار الأساسية (login: .btn-gradient / register: .btn-primary) ── */
.btn-gradient, .btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    background-size: 180% 180%;
    color: #ffffff;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-gradient:hover, .btn-primary:hover {
    background-position: 100% 0%;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -8px rgba(var(--primary-rgb), 0.56), 0 0 0 1px rgba(var(--primary-rgb), 0.25);
}
.btn-gradient:active, .btn-primary:active { transform: translateY(0); }

/* ── أزرار الدخول الاجتماعي ───────────────────────────────── */
.social-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 46px; border-radius: 0.75rem; cursor: pointer;
    background: var(--social-bg);
    border: 1px solid var(--social-bdr);
    color: var(--tx-1); font-size: 0.95rem; font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}
.social-btn:hover {
    background: var(--social-bg-hover);
    border-color: var(--social-bdr-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.25);
}

/* اخفاء كود التليجرام ودمجه خلف الزر المصمم */
.telegram-wrapper iframe {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    opacity: 0.01 !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

/* ── مؤشر قوة كلمة المرور ─────────────────────────────────── */
.strength-seg { height: 3px; border-radius: 2px; background: var(--line); transition: background .3s; }
.strength-seg.weak   { background: #ef4444; }
.strength-seg.fair   { background: #f59e0b; }
.strength-seg.good   { background: #3b82f6; }
.strength-seg.strong { background: #10b981; }

/* ── مربع اختيار مخصص ─────────────────────────────────────── */
.custom-check { display: none; }
.check-box {
    width: 16px; height: 16px; border: 1px solid var(--chip-bdr); border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .2s; flex-shrink: 0; cursor: pointer; background: var(--field-bg);
}
.custom-check:checked + .check-box {
    background: var(--primary); border-color: var(--primary);
}
.custom-check:checked + .check-box::after {
    content: '✓'; color: white; font-size: 10px; font-weight: 700;
}

/* ── intl-tel-input ────────────────────────────────────────── */
/* إجبار الحقل بالكامل على اتجاه LTR ثابت حتى لا يتصادم مع اتجاه الصفحة RTL أثناء الكتابة */
.iti {
    width: 100% !important;
    direction: ltr !important;
}
.iti input[type="tel"] {
    padding-left: 98px !important;
    padding-right: 14px !important;
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext !important;
    color: var(--tx-1) !important;
}
.iti__flag-container {
    direction: ltr !important;
    left: 0 !important;
    right: auto !important;
}
.iti__selected-flag {
    background: var(--field-bg) !important;
    border-radius: 0.75rem 0 0 0.75rem !important;
    border-right: 1px solid var(--field-bdr) !important;
    padding: 0 10px 0 12px !important;
}
.iti__selected-dial-code {
    color: var(--tx-2) !important;
    margin-left: 6px !important;
}
.iti__country-list {
    background: var(--iti-list-bg) !important;
    border: 1px solid var(--iti-list-bdr) !important;
    color: var(--tx-1) !important;
    border-radius: 0.75rem !important;
    text-align: right !important;
    z-index: 9999 !important;
    direction: rtl !important;
}
.iti__country-list .iti__country:hover { background: var(--iti-list-hov) !important; }

.iti__valid-msg, .valid-msg, .iti__error-msg, .error-msg { display: none !important; }

/* ── شريط التمرير ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }

/* ── زر تبديل الوضع الليلي/النهاري (يُنشأ تلقائياً من auth-theme.js) ── */
.theme-toggle {
    position: fixed;
    top: 18px; left: 18px;
    z-index: 80;
    width: 44px; height: 44px;
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    border: 1px solid var(--tg-bdr);
    background: var(--tg-bg);
    color: var(--tg-col);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--tg-shadow);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle:hover { transform: translateY(-2px) scale(1.05); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle.is-light .icon-sun  { display: none; }
.theme-toggle.is-light .icon-moon { display: block; }

/* ── خلفية متحركة ثلاثية الأبعاد ──────────────────────────── */
#bgCanvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: var(--canvas-op);
    transition: opacity 0.3s ease;
}

.scene-3d {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    perspective: 1600px;
    pointer-events: none;
}

.shape-wrap {
    position: absolute;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

.floating-shape {
    transform-style: preserve-3d;
    will-change: transform;
    opacity: var(--shape-op);
    transition: opacity 0.3s ease;
}

.shape-panel {
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.30), rgba(var(--secondary-rgb), 0.18));
    border: 1.5px solid rgba(var(--primary-rgb), 0.57);
    box-shadow:
        0 0 50px 4px rgba(var(--primary-rgb), 0.33),
        0 25px 50px -12px rgba(var(--accent-rgb), 0.37),
        inset 0 0 28px rgba(var(--secondary-rgb), 0.18);
}

.shape-ring {
    border-radius: 50%;
    border: 2px solid rgba(var(--secondary-rgb), 0.69);
    background: radial-gradient(circle at 35% 30%, rgba(var(--secondary-rgb), 0.23), transparent 70%);
    box-shadow:
        0 0 45px 6px rgba(var(--secondary-rgb), 0.33),
        0 20px 45px -10px rgba(var(--primary-rgb), 0.31);
}

.shape-diamond {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.36), rgba(var(--primary-rgb), 0.18));
    border: 1.5px solid rgba(var(--accent-rgb), 0.58);
    box-shadow:
        0 0 45px 5px rgba(var(--accent-rgb), 0.33),
        0 20px 40px -10px rgba(var(--accent-rgb), 0.40);
}

@keyframes shape-glow {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.5); }
}
.shape1 .floating-shape, .shape2 .floating-shape, .shape3 .floating-shape,
.shape4 .floating-shape, .shape5 .floating-shape, .shape6 .floating-shape {
    position: relative;
}
.shape1 .floating-shape::after, .shape2 .floating-shape::after, .shape3 .floating-shape::after,
.shape4 .floating-shape::after, .shape5 .floating-shape::after, .shape6 .floating-shape::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    background: inherit;
    filter: blur(14px);
    opacity: 0.65;
    z-index: -1;
    animation: shape-glow 5s ease-in-out infinite;
}

@keyframes float-a {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(12deg) rotateY(18deg) rotateZ(0deg); }
    50%      { transform: translate3d(18px, -46px, 70px) rotateX(50deg) rotateY(70deg) rotateZ(20deg); }
}
@keyframes float-b {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(-15deg) rotateY(-10deg) rotateZ(8deg); }
    50%      { transform: translate3d(-24px, 40px, 50px) rotateX(-55deg) rotateY(-60deg) rotateZ(-15deg); }
}
@keyframes float-c {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(20deg) rotateY(-25deg) rotateZ(-5deg); }
    50%      { transform: translate3d(28px, 30px, 90px) rotateX(-30deg) rotateY(40deg) rotateZ(25deg); }
}
@keyframes float-d {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(-10deg) rotateY(30deg) rotateZ(10deg); }
    50%      { transform: translate3d(-16px, -34px, 60px) rotateX(35deg) rotateY(-45deg) rotateZ(-10deg); }
}

.shape1 { top: 8%; right: 10%; width: 96px; height: 96px; animation: float-a 17s ease-in-out infinite; }
.shape2 { bottom: 14%; left: 6%; width: 64px; height: 64px; animation: float-b 21s ease-in-out infinite; }
.shape3 { top: 58%; right: 22%; width: 44px; height: 44px; animation: float-c 13s ease-in-out infinite; }
.shape4 { top: 16%; left: 10%; width: 56px; height: 56px; animation: float-d 25s ease-in-out infinite; }
.shape5 { bottom: 8%; right: 30%; width: 34px; height: 34px; animation: float-c 19s ease-in-out infinite reverse; }
.shape6 { top: 40%; left: 4%; width: 38px; height: 38px; animation: float-b 16s ease-in-out infinite; }

/* ── تكييف كلاسات Tailwind للوضع النهاري ──────────────────── */
/* الصفحات تستخدم كلاسات tailwind بألوان ثابتة للوضع الليلي (text-white وغيرها)
   هذه القواعد أعلى خصوصية فتتغلب عليها في الوضع النهاري فقط */
html[data-theme="light"] .text-white { color: var(--tx-1); }

html[data-theme="light"] .text-white\/38,
html[data-theme="light"] .text-white\/60,
html[data-theme="light"] .text-white\/68 { color: var(--tx-3); }

html[data-theme="light"] .text-white\/75,
html[data-theme="light"] .text-white\/80,
html[data-theme="light"] .text-white\/82 { color: var(--tx-2); }

html[data-theme="light"] .hover\:text-white:hover { color: var(--tx-1); }

html[data-theme="light"] .placeholder-white\/38::placeholder,
html[data-theme="light"] .placeholder-white\/50::placeholder { color: var(--ph); }

html[data-theme="light"] .bg-white\/10 { background-color: var(--chip-bg); }
html[data-theme="light"] .bg-white\/\[\.05\],
html[data-theme="light"] .bg-white\/\[0\.06\] { background-color: var(--line); }

html[data-theme="light"] .border-white\/20 { border-color: var(--chip-bdr); }
html[data-theme="light"] .border-white\/\[0\.05\],
html[data-theme="light"] .border-white\/\[0\.08\] { border-color: var(--line); }

/* اللون الثانوي (أصفر) غير مقروء على الخلفية الفاتحة → نسخة داكنة */
html[data-theme="light"] .text-secondary { color: var(--secondary-ink); }

/* ألوان التنبيهات */
html[data-theme="light"] .text-red-400     { color: #dc2626; }
html[data-theme="light"] .text-emerald-400 { color: #059669; }

/* تهدئة الهالات الضوئية الكبيرة على الخلفية الفاتحة */
html[data-theme="light"] .bg-primary\/25 { background-color: var(--glow-1); }
html[data-theme="light"] .bg-accent\/25  { background-color: var(--glow-2); }

/* ── البانر الجانبي (auth-banner) في الوضع النهاري ────────────
   كان يأخذ تدرج شفاف خفيف فوق خلفية الصفحة الفاتحة فيبدو معتماً/باهتاً.
   نُبقيه بلوحة ألوان الهوية الغامقة (نفس أسلوب الوضع الليلي) مع نص
   أبيض واضح، بغضّ النظر عن ثيم الصفحة، ليبقى العنصر البصري الأبرز. ── */
html[data-theme="light"] .auth-banner {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}
html[data-theme="light"] .auth-banner .text-white,
html[data-theme="light"] .auth-banner .text-white\/60,
html[data-theme="light"] .auth-banner .text-white\/68 { color: rgba(255, 255, 255, 0.80); }
html[data-theme="light"] .auth-banner .text-white\/75,
html[data-theme="light"] .auth-banner .text-white\/80,
html[data-theme="light"] .auth-banner .text-white\/82 { color: rgba(255, 255, 255, 0.94); }
html[data-theme="light"] .auth-banner .hover\:text-white:hover { color: #ffffff; }
html[data-theme="light"] .auth-banner .bg-white\/10 { background-color: rgba(255, 255, 255, 0.10); }
html[data-theme="light"] .auth-banner .border-white\/20,
html[data-theme="light"] .auth-banner .border-white\/\[0\.08\] { border-color: rgba(255, 255, 255, 0.20); }
html[data-theme="light"] .auth-banner .text-secondary { color: var(--secondary); }

/* ── استجابة وتفضيلات الحركة ──────────────────────────────── */
@media (max-width: 768px) {
    .scene-3d .shape-wrap { opacity: 0.5; transform: scale(0.7); }
    .theme-toggle { top: 12px; left: 12px; width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .floating-shape { animation: none !important; }
    .main-card { animation: none !important; }
}