/* ============================================================
   auth-redesign.css — v2.0
   هوية بصرية جديدة كاملة | برنامج دعم الجمعيات الخيرية
   
   🎨 Palette:
     --c-bg:        #F0F4F0   خلفية صفحة: أخضر بيضاوي هادئ
     --c-surface:   #FFFFFF   الكارد: أبيض نقي — فرق واضح عن الخلفية
     --c-emerald:   #1A6B47   أخضر زمردي غامق — الهوية الرئيسية
     --c-teal:      #2E8B6A   أخضر متوسط — hover / secondary
     --c-mint:      #E8F4EE   أخضر فاتح جداً — highlight / badge bg
     --c-gold:      #D4A832   ذهبي دافئ — accent / cta
     --c-text:      #1C2B20   أخضر داكن جداً — نص رئيسي
     --c-muted:     #6B7F6E   نص ثانوي
     --c-border:    #C8DDD0   حدود خفيفة
     --c-error:     #C0392B   خطأ
     --c-success:   #27AE60   نجاح

   ✅ اللمسة المميزة:
     - خلفية الصفحة بلون أخضر بيضاوي هادئ (#F0F4F0)
     - الـ Form Card أبيض نقي مع ظل واضح → فرق بصري قوي
     - أيقونة يد ممسكة بقلب + نبض حياة animation
     - progress bar بنقطة متحركة بدل الـ shimmer المعتاد
   ============================================================ */

/* ── الـ Tokens ───────────────────────────────────────────── */
:root {
    --c-bg:       #EEF3EE;
    --c-surface:  #FFFFFF;
    --c-emerald:  #1A6B47;
    --c-teal:     #2E8B6A;
    --c-mint:     #E3F0E8;
    --c-gold:     #C8992A;
    --c-gold-lt:  #FDF6E3;
    --c-text:     #1C2B20;
    --c-muted:    #5E7263;
    --c-border:   #C5D8CB;
    --c-error:    #C0392B;
    --c-success:  #1E8449;
    --c-shadow:   0 8px 32px rgba(26, 107, 71, 0.13), 0 2px 8px rgba(0,0,0,0.06);
}


/* ============================================================
   SPLASH SCREEN — شاشة التحميل
   ============================================================ */

/* ── الخلفية ── */
.splash-overlay {
    background:
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(26,107,71,0.09) 0%, transparent 70%),
        linear-gradient(160deg, #F5F9F6 0%, #EBF3EE 40%, #E3EEE8 100%) !important;
    overflow: hidden;
}

/* خطوط هندسية خفيفة في الخلفية */
.splash-overlay::before {
    background-image:
        linear-gradient(rgba(26,107,71,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,107,71,0.05) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
    animation: none !important;
}

/* هالة ضوء خضراء ناعمة */
.splash-overlay::after {
    width: 560px !important;
    height: 560px !important;
    background: radial-gradient(circle,
        rgba(26,107,71,0.10) 0%,
        rgba(46,139,106,0.05) 40%,
        transparent 70%) !important;
    animation: splashGlow 5s ease-in-out infinite !important;
}

@keyframes splashGlow {
    0%,100% { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%,-50%) scale(1.12); }
}

/* ── Logo ── */
.splash-icon-ring {
    width: 100px !important;
    height: 100px !important;
    background: linear-gradient(145deg, #1A6B47, #2E8B6A) !important;
    border-radius: 28px !important;
    box-shadow:
        0 12px 40px rgba(26,107,71,0.30),
        0 0 0 8px rgba(26,107,71,0.08),
        0 0 0 16px rgba(26,107,71,0.04) !important;
    animation: logoFloat 4s ease-in-out infinite !important;
    position: relative;
}

/* خط نبض القلب المتحرك خلف الأيقونة */
.splash-icon-ring::before {
    inset: 0 !important;
    border-radius: 28px !important;
    background: none !important;
    animation: none !important;
}

/* حلقة rotating  */
.splash-icon-ring::after {
    content: '' !important;
    position: absolute !important;
    inset: -5px !important;
    border-radius: 33px !important;
    border: 2px solid transparent !important;
    border-top-color: rgba(200,153,42,0.7) !important;
    border-left-color: rgba(200,153,42,0.3) !important;
    animation: logoRing 3s linear infinite !important;
    z-index: 1 !important;
}

@keyframes logoRing {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes logoFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

.splash-icon-ring i {
    font-size: 2.6rem !important;
    color: #FFFFFF !important;
    position: relative !important;
    z-index: 2 !important;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2)) !important;
}

/* ── عناوين Splash ── */
.splash-title-main {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--c-muted) !important;
    letter-spacing: 4px !important;
    text-transform: uppercase !important;
    margin-bottom: 8px !important;
}

.splash-title-program {
    font-size: 2.2rem !important;
    font-weight: 900 !important;
    color: var(--c-emerald) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: var(--c-emerald) !important;
    background-clip: unset !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
}

.splash-title-sub {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: var(--c-teal) !important;
    margin-bottom: 4px !important;
}

.splash-divider {
    width: 50px !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, var(--c-gold), transparent) !important;
    margin: 14px auto !important;
    border-radius: 2px !important;
    animation: dividerExpand 1s ease 0.8s both !important;
}

@keyframes dividerExpand {
    from { width: 0; opacity: 0; }
    to   { width: 50px; opacity: 1; }
}

.splash-tagline {
    font-size: 0.84rem !important;
    color: var(--c-muted) !important;
    font-weight: 500 !important;
    margin-bottom: 32px !important;
}

/* ── Progress Bar — نقطة متحركة ── */
.splash-loader {
    width: 220px !important;
    height: 3px !important;
    background: rgba(26,107,71,0.12) !important;
    border-radius: 2px !important;
    margin: 0 auto 14px !important;
    overflow: visible !important;
    position: relative !important;
}

.splash-loader::after {
    background: linear-gradient(90deg, transparent 0%, var(--c-emerald) 50%, var(--c-gold) 100%) !important;
    height: 3px !important;
    border-radius: 2px !important;
    box-shadow: 0 0 10px rgba(26,107,71,0.4) !important;
    animation: splashProgress 1.8s cubic-bezier(0.4,0,0.6,1) infinite !important;
}

@keyframes splashProgress {
    0%   { left: -40%; width: 35%; }
    50%  { width: 50%; }
    100% { left: 110%; width: 35%; }
}

/* نقطة بريق فوق بار التحميل */
.splash-loader::before {
    content: '';
    position: absolute;
    top: -3px;
    width: 9px;
    height: 9px;
    background: var(--c-gold);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(200,153,42,0.7);
    animation: dotRun 1.8s cubic-bezier(0.4,0,0.6,1) infinite;
    z-index: 2;
}

@keyframes dotRun {
    0%   { left: -5%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { left: 108%; opacity: 0; }
}

#splash-status-text {
    color: var(--c-muted) !important;
    font-size: 0.76rem !important;
    letter-spacing: 0.5px !important;
}

/* ── زر البدء ── */
.splash-actions .btn-primary {
    background: linear-gradient(135deg, var(--c-emerald), var(--c-teal)) !important;
    border: none !important;
    padding: 13px 40px !important;
    font-size: 1rem !important;
    border-radius: 50px !important;
    box-shadow: 0 8px 28px rgba(26,107,71,0.35) !important;
    color: white !important;
}

.splash-actions .btn-primary:hover {
    transform: translateY(-3px) scale(1.03) !important;
    box-shadow: 0 14px 40px rgba(26,107,71,0.5) !important;
}

/* ── Fade Out ── */
.splash-overlay.fade-out {
    animation: splashFadeOut 0.5s ease forwards !important;
}

@keyframes splashFadeOut {
    to { opacity: 0; transform: scale(1.03); pointer-events: none; }
}


/* ============================================================
   AUTH SCREEN — Login + Register
   ============================================================ */

/* ── الخلفية الرئيسية — أخضر بيضاوي هادئ ── */
.login-overlay {
    background:
        radial-gradient(ellipse 80% 70% at 50% 30%, rgba(46,139,106,0.08) 0%, transparent 65%),
        linear-gradient(155deg, #F5F9F6 0%, #EDF4EF 45%, #E6F0E9 100%) !important;

    /* ── السكرول ──
       كان overflow:hidden + align-items:center فكان الكارد الطويل بيتقص من فوق
       ومن تحت وماحدش يقدر يوصل للزر. دلوقتي الـ overlay نفسه هو اللي بيعمل سكرول
       (الكارد بيتوسّط لوحده بـ margin:auto لما يكون أقصر من الشاشة).

       تقوية إضافية:
       • الحجم بيتحدد بـ top/bottom/left/right = 0 بدل height:100% — كده الـ overlay
         بيساوي المساحة المرئية فعلاً (مش بيطلع تحت شريط المتصفح أو بعد الـ zoom)،
         فأسفل الفورم دايماً جوه الشاشة لما تنزل لآخره.
       • overflow-x:auto — سكرول أفقي بيظهر بس لو فيه محتوى أعرض من الشاشة فعلاً.
       • direction:ltr على الـ overlay — عشان شريط التمرير الرأسي يظهر على يمين الشاشة
         (الكارد نفسه رجّعناه rtl تحت، فمفيش تغيير في اتجاه الفورم). */
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box !important;
    direction: ltr !important;
    align-items: flex-start !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    scrollbar-width: thin;
    scrollbar-color: #1A6B47 rgba(26,107,71,0.10);
}

/* زخرفة هندسية خلفية — fixed عشان تفضل مغطية الشاشة كلها وإحنا بنعمل سكرول */
.login-overlay::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background-image:
        linear-gradient(rgba(26,107,71,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,107,71,0.04) 1px, transparent 1px) !important;
    background-size: 44px 44px !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* هالة ضوء علوية خضراء */
.login-overlay::after {
    content: '' !important;
    position: fixed !important;
    width: 700px !important;
    height: 700px !important;
    background: radial-gradient(circle, rgba(26,107,71,0.07) 0%, transparent 65%) !important;
    top: -180px !important;
    right: -180px !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    transform: none !important;
    animation: none !important;
}

/* ── الكارد الرئيسي — أبيض نقي فوق الخضر الهادئ ── */
.login-card {
    background: #FFFFFF !important;
    border: 1px solid var(--c-border) !important;
    border-radius: 24px !important;
    box-shadow:
        0 20px 60px rgba(26,107,71,0.12),
        0 4px 16px rgba(0,0,0,0.06),
        0 0 0 1px rgba(26,107,71,0.06) !important;
    max-width: 478px !important;
    width: calc(100% - 32px) !important;
    margin: auto !important;          /* توسيط أفقي/رأسي، ولما يطول يبدأ من فوق ويتسكرول */
    flex-shrink: 0 !important;        /* ما ينضغطش ويقص المحتوى */
    box-sizing: border-box !important;
    direction: rtl !important;        /* الـ overlay ltr (لمكان شريط التمرير) — الفورم نفسه يفضل RTL */
    min-width: min-content !important; /* لو فيه محتوى أعرض من الكارد، الكارد نفسه يكبر (بدل ما المحتوى يطلع برا الشاشة من الشمال ويبقى مش متاح بالسكرول الأفقي) */
    overflow: visible !important;
    position: relative !important;
    z-index: 1 !important;
    animation: cardIn 0.55s cubic-bezier(0.34,1.15,0.64,1) both !important;
    color: var(--c-text) !important;
}

@keyframes cardIn {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header الكارد ── */
.login-header {
    background: linear-gradient(145deg, #1A6B47 0%, #1E7A52 60%, #2E8B6A 100%) !important;
    padding: 36px 32px 28px !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: none !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

/* خط ذهبي في أسفل الهيدر */
.login-header::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0; left: 0; right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent 0%, var(--c-gold) 50%, transparent 100%) !important;
}

/* دائرة ضوء خلفية في الهيدر */
.login-header::after {
    content: '' !important;
    display: none !important;
}

/* أيقونة هيدر مخصصة */
.login-header-icon {
    width: 68px;
    height: 68px;
    background: rgba(255,255,255,0.15);
    border: 2px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.9rem;
    color: white;
    backdrop-filter: blur(4px);
}

/* إخفاء الأيقونة القديمة */
.login-header i.fas.fa-hand-holding-heart {
    display: none !important;
}

.login-header h2 {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin-bottom: 6px !important;
}

.login-header p {
    color: rgba(255,255,255,0.70) !important;
    font-size: 0.86rem !important;
    margin: 4px 0 0 !important;
}

/* ── زر "تواصل مع المسؤول" عبر واتساب ── */
.auth-whatsapp-contact {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    margin-top: 16px !important;
    padding: 9px 18px !important;
    background: #25D366 !important;
    color: #FFFFFF !important;
    font-size: 0.83rem !important;
    font-weight: 800 !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
}
.auth-whatsapp-contact:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 14px rgba(0,0,0,0.25) !important;
    color: #FFFFFF !important;
}
.auth-whatsapp-contact i {
    font-size: 1.05rem !important;
}

/* ── Body الكارد ── */
.login-body {
    padding: 28px 32px 32px !important;
    background: transparent !important;
}

/* Labels */
.auth-label {
    display: block !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--c-emerald) !important;
    margin-bottom: 6px !important;
    padding-right: 4px !important;
    letter-spacing: 0.3px !important;
}

/* Input Groups */
.login-body .input-group {
    position: relative !important;
    margin-bottom: 16px !important;
}

.login-body .input-group input,
.login-body .input-group select {
    width: 100% !important;
    padding: 13px 44px 13px 16px !important;
    background: #F8FAF9 !important;
    border: 1.5px solid var(--c-border) !important;
    border-radius: 12px !important;
    color: var(--c-text) !important;
    font-family: 'Cairo', sans-serif !important;
    font-size: 0.95rem !important;
    transition: all 0.22s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
}

.login-body .input-group input::placeholder {
    color: #9BB0A0 !important;
}

.login-body .input-group input:focus,
.login-body .input-group select:focus {
    background: #FFFFFF !important;
    border-color: var(--c-emerald) !important;
    box-shadow: 0 0 0 3px rgba(26,107,71,0.12), 0 2px 8px rgba(26,107,71,0.08) !important;
}

/* أيقونات الـ inputs */
.login-body .input-group i {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #9BB0A0 !important;
    font-size: 0.88rem !important;
    pointer-events: none !important;
    transition: color 0.2s !important;
    z-index: 1 !important;
}

.login-body .input-group:focus-within i {
    color: var(--c-emerald) !important;
}

/* زر إظهار/إخفاء كلمة المرور */
.auth-toggle-pass {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    color: #9BB0A0 !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 6px !important;
    transition: color 0.2s !important;
    z-index: 2 !important;
}

.auth-toggle-pass:hover {
    color: var(--c-emerald) !important;
}

/* ── زر الإجراء الرئيسي ── */
.login-body .btn-primary {
    width: 100% !important;
    padding: 13px 20px !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    font-family: 'Cairo', sans-serif !important;
    background: linear-gradient(135deg, #1A6B47 0%, #2E8B6A 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #FFFFFF !important;
    cursor: pointer !important;
    transition: all 0.28s cubic-bezier(0.25,1,0.5,1) !important;
    box-shadow: 0 6px 22px rgba(26,107,71,0.30) !important;
    margin-top: 8px !important;
    position: relative !important;
    overflow: hidden !important;
    letter-spacing: 0.2px !important;
}

.login-body .btn-primary::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.25s !important;
}

.login-body .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 32px rgba(26,107,71,0.42) !important;
    filter: brightness(1.06) !important;
}

.login-body .btn-primary:hover::before {
    opacity: 1 !important;
}

.login-body .btn-primary:active {
    transform: translateY(0) !important;
    box-shadow: 0 3px 12px rgba(26,107,71,0.25) !important;
}

.login-body .btn-primary:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ── رسائل الخطأ والنجاح ── */
#auth-error, #register-error {
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    background: rgba(192,57,43,0.07) !important;
    border: 1.5px solid rgba(192,57,43,0.22) !important;
    color: var(--c-error) !important;
    margin-bottom: 14px !important;
    text-align: center !important;
    animation: authShake 0.38s ease !important;
}

@keyframes authShake {
    0%,100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

.auth-success-msg {
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    background: rgba(26,107,71,0.07) !important;
    border: 1.5px solid rgba(26,107,71,0.22) !important;
    color: var(--c-success) !important;
    margin-bottom: 14px !important;
    text-align: center !important;
}

/* ── روابط التحويل ── */
.login-body p {
    color: var(--c-muted) !important;
    font-size: 0.87rem !important;
    text-align: center !important;
    margin-top: 20px !important;
}

.login-body p a {
    color: var(--c-emerald) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border-bottom: 1.5px solid rgba(26,107,71,0.3) !important;
    transition: all 0.2s !important;
}

.login-body p a:hover {
    color: var(--c-teal) !important;
    border-bottom-color: var(--c-teal) !important;
}

/* ── رفع اللوجو ── */
#reg-logo-upload-area {
    background: var(--c-mint) !important;
    border: 1.5px dashed var(--c-border) !important;
    border-radius: 12px !important;
    padding: 16px 12px !important;
    transition: all 0.22s !important;
    cursor: pointer !important;
    margin-bottom: 16px !important;
    text-align: center !important;
}

#reg-logo-upload-area:hover {
    background: rgba(26,107,71,0.07) !important;
    border-color: var(--c-emerald) !important;
    transform: translateY(-1px) !important;
}

#reg-logo-upload-area i {
    color: var(--c-emerald) !important;
}

#reg-logo-upload-area p {
    color: var(--c-muted) !important;
    margin-top: 4px !important;
}

/* ── Divider ── */
.auth-divider {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 18px 0 14px !important;
    color: #B0C4B5 !important;
    font-size: 0.78rem !important;
}

.auth-divider::before,
.auth-divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: var(--c-border) !important;
}

/* ── Responsive ── */
@media (max-width: 520px) {
    .login-card {
        border-radius: 20px !important;
        width: calc(100% - 20px) !important;
    }
    .login-header {
        padding: 26px 20px 22px !important;
    }
    .login-body {
        padding: 20px 20px 24px !important;
    }
    .login-header h2 {
        font-size: 1.35rem !important;
    }
    .auth-whatsapp-contact {
        margin-top: 12px !important;
        padding: 8px 14px !important;
        font-size: 0.78rem !important;
    }
}

@media (max-width: 380px) {
    .login-header h2 {
        font-size: 1.2rem !important;
    }
    .login-body .btn-primary {
        font-size: 0.93rem !important;
    }
}


/* ============================================================
   GLOBAL ACCENT OVERRIDES — تناسق مع باقي الواجهة
   ============================================================ */

/* Primary color override for main app — الأزرار والـ active nav */
:root {
    --primary-color: #1A6B47;
    --primary-gradient: linear-gradient(135deg, #1A6B47 0%, #2E8B6A 100%);
    --emerald-color: #1A6B47;
    --border-color: rgba(26, 107, 71, 0.10);
}

.btn-primary {
    background: var(--primary-gradient) !important;
    box-shadow: 0 4px 16px rgba(26,107,71,0.25) !important;
}

.btn-primary:hover {
    box-shadow: 0 8px 28px rgba(26,107,71,0.38) !important;
}

/* Sidebar active item */
.sidebar-nav li.active {
    box-shadow: 0 6px 18px rgba(26,107,71,0.22) !important;
}

/* حقول الإدخال في التطبيق الرئيسي */
.office-input:focus {
    box-shadow: 0 0 0 3px rgba(26,107,71,0.10) !important;
    border-color: var(--primary-color) !important;
}

/* كروت الإحصائيات */
.stat-card:hover,
.stat-card-v2:hover {
    box-shadow: 0 12px 40px rgba(26,107,71,0.10) !important;
}

/* hover صفوف الجدول */
.data-table tr:hover td {
    background: rgba(26,107,71,0.03) !important;
}

.main-case-row:hover {
    background: rgba(26,107,71,0.04) !important;
}


/* ============================================================
   AUTH — سكرول الفورم + وضوح العناصر اللي في آخر الفورم
   (رفع الشعار / التلميحات / زر إنشاء الحساب)
   ============================================================ */

/* شريط السكرول (كروم / سفاري / سامسونج) — أخضر واضح.
   مهم: ما بنخفيهوش ولا بنعطّله — اللابتوب/الماوس بيشوفه على يمين الشاشة. */
.login-overlay::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.login-overlay::-webkit-scrollbar-track {
    background: rgba(26,107,71,0.08);
}
.login-overlay::-webkit-scrollbar-thumb {
    background: #1A6B47;
    border-radius: 8px;
}

/* على اللابتوب/الكمبيوتر (ماوس): شريط بالحجم الطبيعي علشان يتمسك ويتسحب بسهولة */
@media (hover: hover) and (pointer: fine) {
    .login-overlay {
        scrollbar-width: auto;
    }
}

/* منطقة رفع الشعار — كان الإطار باهت (#C5D8CB) وما كانش باين إنها زر */
#reg-logo-upload-area {
    background: #E1F3E8 !important;
    border: 2px dashed #1A6B47 !important;
    border-radius: 14px !important;
    padding: 18px 14px !important;
}

#reg-logo-upload-area:hover {
    background: #D2ECDC !important;
    border-color: #124D34 !important;
}

#reg-logo-upload-area i {
    color: #1A6B47 !important;
    font-size: 1.7rem !important;
}

#reg-logo-upload-area #reg-logo-label {
    color: #124D34 !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
}

#reg-logo-upload-area p:not(#reg-logo-label) {
    color: #3F5A47 !important;
    font-weight: 600 !important;
}

/* التلميح تحت رقم الاسترداد (يُستخدم هذا الرقم فقط عند...) */
#register-form .input-group + p {
    color: #3F5A47 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}

/* زر إنشاء الحساب — أكبر شوية عشان يتضغط بسهولة على الموبايل */
#register-btn {
    min-height: 50px !important;
}

/* ============================================================
   AUTH — Responsive بالكامل (هاتف / لابتوب / أي دقة أو Zoom)
   ============================================================ */

/* هواتف: مسافات أقل حوالين الكارد */
@media (max-width: 520px) {
    .login-overlay {
        padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* شاشات قصيرة (لابتوب صغير، Zoom عالي، موبايل بالعرض): بنضغط الهيدر والمسافات
   عشان يبان جزء أكبر من الفورم، من غير ما نصغّر الحقول أو الأزرار
   (الحقول والزر بيفضلوا بنفس ارتفاعهم المريح للمس). */
@media (max-height: 700px) {
    .login-header {
        padding-top: 20px !important;
        padding-bottom: 16px !important;
    }
    .login-header-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 10px;
        font-size: 1.5rem;
        border-radius: 16px;
    }
    .login-header h2 {
        font-size: 1.35rem !important;
    }
    .auth-whatsapp-contact {
        margin-top: 10px !important;
    }
    .login-body {
        padding-top: 20px !important;
        padding-bottom: 24px !important;
    }
}

@media (max-height: 480px) {
    .login-header {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    .login-header-icon {
        display: none;
    }
    .login-body {
        padding-top: 16px !important;
    }
}

/* الهاتف/التابلت + الكيبورد: لما حقل يتفتح، بنزوّد مساحة فاضية تحت الفورم عشان
   تقدر تسحب الفورم لفوق وتطلّع زر "إنشاء الحساب" فوق الكيبورد (بدل ما يفضل مخفي وراه).
   بتختفي تلقائياً أول ما الحقل يفقد التركيز. */
@media (hover: none) and (pointer: coarse) {
    #auth-screen:has(input:focus, select:focus, textarea:focus) {
        padding-bottom: calc(50vh + env(safe-area-inset-bottom, 0px)) !important;
    }
}