/* screens-stats-invoicelist.css -- الشاشات الكبرى، بطاقات الإحصائيات، قائمة الفواتير. */
/* ---------------------------- الشاشات الكبرى (Screens) ---------------------------- */
/* switchScreen() بـ main.js يبدّل كلاس "active" بين هذي الشاشات */
.screen { display: none; padding: 32px 5%; animation: fadeIn 0.3s ease-out; flex: 1; }
.screen.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* شاشة تسجيل الدخول/التسجيل */
.auth-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70vh; }
/* بطاقة تسجيل الدخول تأخذ طابعاً خاصاً بها (طلب صاحب المشروع: "تصميم
   جديد"، وبدون أي ميلان/tilt يتبع الماوس هنا تحديداً -- initGlassTilt()
   بـmain.js تستثنيها صراحة): حلقة حافة ضوء متدرجة حول البطاقة (::before
   بقناع gradient) فوق الزجاجية العامة لـ.card، تعطيها بروزاً بصرياً واضحاً
   كأهم بطاقة بالموقع (أول تفاعل حقيقي مع النظام) */
.auth-container {
    position: relative;
    width: 100%; max-width: 440px;
    background-color: color-mix(in srgb, var(--card-bg) 60%, transparent);
    backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
    padding: 32px 24px; border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.05), var(--shadow);
    border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
    text-align: center;
}
.auth-container::before {
    content: ""; position: absolute; inset: -1px; border-radius: 21px; padding: 1px;
    background: linear-gradient(150deg, color-mix(in srgb, white 55%, transparent), transparent 40%, color-mix(in srgb, var(--primary) 40%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
}
.auth-header { margin-bottom: 20px; }
.auth-icon { position: relative; font-size: 40px; margin-bottom: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(37, 99, 235, 0.1); width: 70px; height: 70px; border-radius: 50%; color: var(--primary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 20px -10px rgba(var(--primary-rgb), 0.5); }
.auth-icon::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.2), transparent 70%); animation: glassIconGlow 3.4s ease-in-out infinite; z-index: -1; }

/* زر رجوع لصفحة الهبوط من شاشة تسجيل الدخول (بلاغ حي من صاحب المشروع:
   ما فيه طريقة للرجوع بعد الدخول لهذي الشاشة) -- زر دائري صغير بأعلى
   البطاقة، بلا أي تأثير على تخطيط باقي المحتوى (position: absolute) */
.auth-back-btn {
    position: absolute; top: 16px; inset-inline-start: 16px; z-index: 2;
    width: 38px; height: 38px; padding: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--card-bg) 70%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: var(--text-muted); border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-size: 15px;
}
@media (hover: hover) and (pointer: fine) { .auth-back-btn:hover { color: var(--primary); border-color: var(--primary); } }

/* حقل otp الحقيقي (المصدر الوحيد اللي تقرأه verifyOTP()) مخفي بصرياً بس
   يبقى بالـDOM وقابل للوصول -- نمط "visually hidden" القياسي، بدل
   display:none اللي يمنع أي تفاعل معه إطلاقاً */
.sr-only-otp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ست صناديق رقم منفصلة لرمز التحقق (بلاغ حي من صاحب المشروع: يبيها
   "بنفس مثال" مواقع مرجعية) -- كل صندوق otp-digit يزامَن مع #otp الحقيقي
   عبر initOtpBoxes() بـmain.js، فمنطق verifyOTP() يبقى تماماً بلا أي تغيير */
.otp-boxes { display: flex; gap: 8px; justify-content: center; margin-top: 6px; direction: ltr; }
.otp-digit {
    width: 44px; height: 52px; margin: 0; padding: 0; text-align: center;
    font-size: 20px; font-weight: 700; border-radius: 12px;
    border: 1.5px solid var(--border-color);
    background: color-mix(in srgb, var(--input-bg) 75%, transparent);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.06);
}
.otp-digit:focus-visible { border-color: var(--primary); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(var(--primary-rgb), 0.22); }
.otp-digit.is-filled { border-color: var(--primary); }

/* فاصل "أو" بين تسجيل الدخول العادي وGoogle -- خط بألوان الثيم الحالي على
   الجانبين مع النص بالمنتصف، يتكيف تلقائياً مع الوضع الليلي/النهاري */
.auth-divider { display: flex; align-items: center; text-align: center; margin: 16px 0; color: var(--text-muted); font-size: 12px; font-weight: 700; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; border-bottom: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--border-color) 65%, transparent), transparent); }
.auth-divider span { padding: 0 12px; }

/* انتقال متلاشٍ سلس بين خطوتي تسجيل الدخول (إيميل/كلمة مرور ← رمز OTP)
   بدل التبديل الفوري -- الحركة الفعلية (تلاشي + انزلاق بسيط) تُدار من
   smoothStepSwitch() بـmain.js عبر تبديل هذين المتغيرين المضبوطين هنا */
#loginStep1, #loginStep2 { transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); opacity: 1; transform: translateY(0); }

/* زر تسجيل الدخول/التسجيل بـGoogle -- بألوان الثيم (بطاقة/حدود/نص) مع
   أيقونة G الرسمية الملوّنة الثابتة (لا تتغيّر بالثيم، مطابقة لهوية Google
   البصرية الرسمية بكل الحالات) */
.google-signin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 16px;
    background-color: var(--card-bg);
    color: var(--text-main);
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}
@media (hover: hover) and (pointer: fine) { .google-signin-btn:hover { background-color: var(--bg-color); box-shadow: 0 1px 4px rgba(0,0,0,0.12); } }
.google-signin-btn svg { flex-shrink: 0; }

/* سطر موافقة الشروط/الخصوصية تحت زر Google -- ناعم وصغير عمداً، مو عنصر
   يستقطب الانتباه، فقط إشعار قانوني خفيف */
.google-consent-line {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    margin: 8px 0 0;
    line-height: 1.6;
}
.google-consent-line a { color: var(--text-muted); text-decoration: underline; }
@media (hover: hover) and (pointer: fine) { .google-consent-line a:hover { color: var(--primary); } }

.msg-box {
    padding: 14px 16px;
    border-radius: 12px;
    margin-top: 14px;
    display: none;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    border: 2px solid;
    animation: slideIn 0.3s ease-out;
}
@keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.msg-success {
    background-color: rgba(16, 185, 129, 0.12);
    color: var(--success);
    border-color: var(--success);
}
.msg-error {
    background-color: rgba(239, 68, 68, 0.12);
    color: var(--danger);
    border-color: var(--danger);
}

/* ---------------------------- كروت الإحصائيات (Stat Cards) ---------------------------- */
/* الثلاثة أرقام بأعلى الصفحة الرئيسية (updateStats بـ main.js) */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 28px; }
.stat-card { background-color: color-mix(in srgb, var(--card-bg) 88%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); padding: 22px; border-radius: 18px; border: 1.5px solid var(--border-color); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--shadow); display: flex; align-items: center; gap: 14px; transition: var(--transition); }
@media (hover: hover) and (pointer: fine) { .stat-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 34px -16px rgba(var(--primary-rgb), 0.4); } }

/* أيقونة الإحصائية: توهّج ناعم متكرر خلفها (::after) بدل شكل ثابت، بلا أي
   تغيير على الأيقونة نفسها أو حجمها */
.stat-icon { position: relative; font-size: 22px; background: rgba(37, 99, 235, 0.1); padding: 10px 12px; border-radius: 12px; color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.stat-icon::after { content: ""; position: absolute; inset: -6px; border-radius: 16px; background: radial-gradient(circle, rgba(var(--primary-rgb), 0.18), transparent 70%); animation: glassIconGlow 3.4s ease-in-out infinite; z-index: -1; }
.stat-info { flex: 1; min-width: 0; text-align: center; }
/* إصلاح: uppercase + letter-spacing موجب (نمط شائع بلوحات تحكم إنجليزية)
   يفشل بالعربي -- الحروف العربية متصلة ببعضها (خط عربي كامل الاتصال)، فأي
   تباعد إضافي يكسر اتصال الحروف الطبيعي ويخلي النص الصغير غير مقروء تقريباً
   (بلاغ حي من المستخدم). رجعناها لتسمية عادية بلا تباعد إضافي */
.stat-info h4 { font-size: 12.5px; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; }
.stat-info p { font-size: 30px; font-weight: 800; color: var(--primary); line-height: 1.15; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: plaintext; font-variant-numeric: tabular-nums; }

/* بطاقات تبويب التحليلات المالية تعرض مبالغ إجمالية كبيرة (آلاف/ملايين)
   قد تفيض عن عرض البطاقة بخط 26px مع white-space: nowrap فتنقطع بـ"…"
   وتخفي جزء من الرقم -- هنا نسمح بالالتفاف لسطرين بدل القطع، مع خط أصغر
   شوي، عشان الرقم يبقى كامل ومقروء دايماً بغض النظر عن طوله. */
#analyticsTab .stat-info p { font-size: 20px; white-space: normal; overflow: visible; text-overflow: unset; word-break: break-word; }

/* نفس فكرة .stats-grid/.stat-card بس بتخطيط مختلف خاص بلوحة الأدمن (كروت
   أصغر وأكثر عدداً: مستخدمين، فواتير، تخزين، أداء السيرفر) */
#adminTab .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

#adminTab .stat-card {
    background: color-mix(in srgb, var(--card-bg) 88%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1.5px solid var(--border-color);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 140px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--shadow);
    gap: 8px;
}

#adminTab .stat-card .stat-info,
#adminTab .stat-card > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* بطاقة مفاتيح Gemini وحدها تحتاج تمرير داخلي (overflow-y: auto مضبوط
   inline بـindex.html) عشان تعرض كل المفاتيح (قد توصل 6+). القاعدة
   العامة أعلاه تحط justify-content: center على كل أبناء .stat-card
   المباشرين -- وهذا تحديداً يكسر المحتوى الأطول من الصندوق: Flexbox
   يمركز العنصر الفائض بالطول فيصير جزء منه (المفاتيح الأولى #1 و#2)
   خارج نطاق التمرير للأعلى بلا أي طريقة للوصول له حتى مع scrollTop=0،
   بينما الجزء السفلي (#3 إلى #6) يبقى ظاهراً -- بالضبط أعراض المشكلة
   المُبلَّغة. الحل: هذي البطاقة تبدأ من الأعلى (flex-start) بدل التمركز. */
#adminTab #geminiKeysStatus {
    justify-content: flex-start;
}

#adminTab .stat-card small {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center;
}

/* ---------------------------- الصفحة الرئيسية: أدوات البحث وقائمة الفواتير ---------------------------- */
.tools-bar { display: flex; gap: 10px; margin-bottom: 20px; background-color: var(--card-bg); padding: 16px; border-radius: 16px; border: 1.5px solid var(--border-color); box-shadow: var(--shadow); flex-wrap: wrap; }
.search-box { flex: 1; min-width: 220px; margin: 0; }

/* تخطيط عمودين (كرت الرفع يسار، قائمة الفواتير يمين) ينهار لعمود واحد
   بالشاشات الصغيرة (جوال) */
.main-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; align-items: start; }
/* المرحلة 143: بطاقات "المراجعة السنوية" تحديداً (6 بطاقات .stat-card
   بمحتوى متفاوت الطول -- بعضها رقم قصير وبعضها اسم متجر/تصنيف يلتف
   لسطرين) كانت تبدو متفاوتة الحجم لأن .main-grid العام فوق يستخدم
   align-items: start (كل بطاقة بارتفاع محتواها فقط، بدون تمدد لملء
   ارتفاع صفّها). هذا التجاوز مقصور على هذا الحاوي فقط عشان ما يغيّر
   سلوك بقية استخدامات .main-grid بالموقع (مثل top3InvoicesList). */
#yearlyWrapUpContainer.main-grid { align-items: stretch; }
#yearlyWrapUpContainer.main-grid .stat-card { height: 100%; }
@media (max-width: 900px) { .main-grid { grid-template-columns: 1fr; } }

/* زجاجية معتدلة (طلب صاحب المشروع): خلفية شبه شفافة + ضبابية خفيفة
   (backdrop-filter) بدل تعبئة صلبة، مع حافة ضوء علوية رفيعة (inset) تحاكي
   انعكاس بسيط على سطح زجاجي -- تنعكس تلقائياً على كل بطاقة بالموقع (رفع
   فواتير، قوائم، رسوم بيانية...) لأنها كلها تستخدم .card نفسه */
.card { background-color: color-mix(in srgb, var(--card-bg) 88%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); padding: 24px; border-radius: 18px; border: 1.5px solid var(--border-color); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--shadow); margin-bottom: 20px; }
.card h3 { color: var(--primary); margin-bottom: 18px; border-bottom: 1.5px solid var(--border-color); padding-bottom: 10px; font-size: 18px; display: flex; justify-content: space-between; align-items: center; }

/* كرت فاتورة وحدة بقائمة الفواتير (renderInvoices بـ main.js) */
.invoice-item { border: 1.5px solid var(--border-color); padding: 16px; margin-bottom: 12px; border-radius: 14px; background-color: color-mix(in srgb, var(--card-bg) 92%, transparent); transition: var(--transition); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .invoice-item:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 16px 30px -16px rgba(var(--primary-rgb), 0.4); } }
.invoice-item:active { transform: scale(0.99); }

/* شريط تصفّح الصفحات (Pagination) -- يُستخدم بقائمة الفواتير الرئيسية
   وجداول الأدمن الثلاثة، مبني ديناميكياً بجافاسكربت (renderPaginationBar) */
.pagination-bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.pagination-bar button { padding: 7px 16px; font-size: 13px; border-radius: 20px; }
.pagination-bar button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.pagination-info { font-size: 13px; font-weight: 700; color: var(--text-muted); background: var(--card-bg); border: 1.5px solid var(--border-color); padding: 6px 14px; border-radius: 20px; }
.badge-sys { background: rgba(37, 99, 235, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--primary); padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; border: 1px solid var(--border-color); }
.badge-warn { background: rgba(245, 158, 11, 0.2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #b45309; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
/* بادج المجلدات: لون خاص أوضح من --secondary العام (اللي مضبوط أساساً
   لاستخدام كحد/إطار يكفيه تباين 3:1) -- نص البادج يحتاج 4.5:1 كامل، وأخضر
   مائي أغمق بالفاتح/أفتح بالداكن يعطي وضوح أعلى بكل ثيم (فحص WCAG فعلي) */
.badge-folder { background: rgba(15, 118, 110, 0.15); color: #0f766e; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; border: 1px solid var(--border-color); }

/* إطار صورة الفاتورة/الضمان داخل نافذة التفاصيل -- عمق خفيف + رفعة عند
   التحويم توضّح إنها قابلة للضغط للتكبير (بدل إطار مسطّح عادي) */
.invoice-photo-frame {
    border-radius: 14px; border: 1.5px solid var(--border-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 10px 24px -14px rgba(15, 23, 42, 0.35);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease;
}
/* لوحات المعلومات الفرعية داخل مودال تفاصيل الفاتورة (البيانات، الضمان،
   المفضّلة/الملاحظات، الأصناف) -- بلا ضبابية (المودال نفسه معتم عمداً
   لسهولة القراءة)، بس بعمق خفيف يميّزها عن خلفية المودال المسطّحة */
.invoice-info-panel {
    background: color-mix(in srgb, var(--bg-color) 92%, var(--card-bg) 8%);
    border-radius: 12px; border: 1.5px solid var(--border-color);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@media (hover: hover) and (pointer: fine) {
    .invoice-photo-frame:hover {
        transform: translateY(-3px) scale(1.01);
        border-color: var(--primary);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 18px 34px -14px rgba(var(--primary-rgb), 0.4);
    }
}
[data-theme="dark"] .badge-folder { color: #14b8a6; background: rgba(20, 184, 166, 0.15); }