/* mobile-responsive.css -- استجابة الشاشات الصغيرة (768px وأصغر). ترتيب تحميلها هنا يطابق موقعها الأصلي بالملف تماماً -- لا تُنقَل. */
@media (max-width: 768px) {
    .navbar { margin: 8px 8px 0 !important; }
    .navbar-inner { padding: 10px 16px !important; gap: 8px !important; }
    .logo-container { font-size: 17px !important; gap: 6px !important; }
    /* إصلاح حقيقي (بلاغ حي صاحب المشروع 2026-08-31: "البار العلوي متضخم
       وجاي سطرين") -- قِيست حياً بعرض 360px (شائع جداً بأجهزة أندرويد،
       أضيق من 375px اللي اختُبر بها أول إصلاح فما انكسر هناك)، بالحالة
       الأسوأ (أعلى الصفحة بلا تمرير -- .brand-name عندها 26px الحجم
       الكامل، أكبر من حالة .scrolled المصغَّرة): صورة الشعار (نسبة عرض/
       ارتفاع ~3:1) + نص "فواتيري" + شارة V3 يشكّلون منطقة شعار بعرض
       199px، وزر تبديل اللغة النصي "EN" بعرض 62px بدل 44px كباقي الأزرار
       الدائرية -- المجموع 408px يتجاوز 344px المتاح، فيلتف navbar-inner
       لسطرين. أول محاولة (تصغير الصورة لـ34px + إخفاء نص EN فقط) خُفّضت
       لـ373px حياً -- ما كانت كافية، لسه يلتف. الإصلاح الكافي فعلياً
       (مؤكَّد حياً: navInnerH رجع لسطر واحد 60px تقريباً): تصغير الصورة
       أكثر (28px) + تصغير خط اسم البراند صراحة على الجوال (كان يعتمد فقط
       على .navbar.scrolled المشروط بتمرير سابق، فما ينفع بأعلى الصفحة). */
    .logo-container img { height: 28px !important; }
    .brand-name { font-size: 18px !important; }
    .version-badge { font-size: 11px !important; top: -9px !important; }
    .nav-actions { gap: 3px !important; }
    .icon-btn.lang-toggle { font-size: 0 !important; }
    .icon-btn.lang-toggle i { font-size: 15px !important; }
    /* هدف لمس مريح (44px الحد الأدنى الموصى به من Apple/Google) بدل تصغير
       الزر لحجم يصعب لمسه بدقة بإصبع -- min-height يضمن الارتفاع بغض
       النظر عن صغر الخط/الحشوة الداخلية، بلا تغيير مظهر النص نفسه */
    .icon-btn { padding: 5px 8px !important; font-size: 12px !important; min-height: 44px; min-width: 44px; justify-content: center; }
    .screen { padding: 15px 3% !important; }
    .main-grid { grid-template-columns: 1fr !important; }
    .settings-drawer { width: 85vw !important; top: calc(10px + env(safe-area-inset-top)); bottom: calc(10px + env(safe-area-inset-bottom)); height: calc(100% - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
    /* إصلاح (مصدر: better-typography skill): أي input بخط أقل من 16px يخلّي
       آيفون/سفاري يكبّر الصفحة تلقائياً عند التركيز عليه (iOS input zoom) --
       الخط الأساسي 14px (سطر input,select,textarea بأعلى الملف) مقصود
       لكثافة أعلى بسطح المكتب، فرفعناه هنا للجوال بس بدل تغييره عالمياً.
       لازم نكرر التخصيص (specificity) بالضبط لقواعد نظام "حجم الخط" اللي
       المستخدم يضبطه من الإعدادات (html.font-sm/md/lg input، سطر ~126 --
       "متوسط" هو الافتراضي، فهذا يمس كل مستخدم تقريباً) وإلا تفوز هي لأن
       عندها نفس !important بتخصيص أعلى من input المجرّدة */
    html.font-sm input, html.font-sm select, html.font-sm textarea,
    html.font-md input, html.font-md select, html.font-md textarea,
    html.font-lg input, html.font-lg select, html.font-lg textarea,
    input, select, textarea { font-size: 16px !important; }

    /* أزرار أصغر شوي عشان مجموعات الأزرار (تحكم كل فاتورة/شريط المجلد) تتسع
       بشكل أنظف بصف واحد أو صفين بدل ما تاخذ عرض الشاشة كامل لكل زر */
    button { padding: 9px 14px; font-size: 13px; }
    .pagination-bar button { padding: 7px 14px; }

    /* الكروت والمودالات: تباعد داخلي أخف يناسب عرض الشاشة الضيق */
    .auth-container { padding: 24px 16px !important; }
    .modal-content { padding: 16px !important; border-radius: 16px !important; }
    .modal-header-fixed { padding: 16px 16px 10px !important; }
    .modal-body-scroll { padding: 12px 16px 16px !important; }
    .card { padding: 14px !important; }
    .custom-chk-card { padding: 10px 12px !important; }

    /* كروت الإحصائيات (الرئيسية ولوحة الأدمن): تباعد وخط أصغر عشان
       الأرقام والعناوين ما تتزاحم بعرض بطاقة ضيق */
    .stat-card { padding: 14px !important; gap: 8px !important; }
    .stat-info p { font-size: 22px !important; }
    html.font-lg .stat-info p { font-size: 24px !important; }
    #adminTab .stat-card { min-height: 110px !important; padding: 12px !important; }

    /* تبويبات لوحة التحكم على الجوال (إصلاح جذري 2026-08-31، بلاغ صاحب
       المشروع: "الموقع غير مستخدم بالجوال إطلاقاً"): flex-wrap: wrap
       الأصلية كانت تلفّ التبويبات لثلاث صفوف كاملة على شاشة ضيقة (198px
       ارتفاع فعلي مقيس حياً) -- يعني قرابة 40% من شاشة الجوال بالكامل
       مكرَّسة للتبويبات وحدها قبل أي محتوى. الحل: صف أفقي واحد قابل
       للتمرير باللمس (نفس نمط أغلب التطبيقات المعروفة على الجوال) بدل
       الالتفاف -- يرجع تبويبات لوحة التحكم لارتفاع طبيعي صغير. */
    .tabs-nav-inner {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs-nav-inner::-webkit-scrollbar { display: none; }
    .tab-btn { padding: 7px 12px; font-size: 13px; flex: 0 0 auto; white-space: nowrap; }

    /* إصلاح جذري شامل (بلاغ حي صاحب المشروع 2026-08-31، لقطات حقيقية من
       13 جدولاً مختلفاً): "كثافة أعلى + تمرير أفقي" وحدها ما كانت كافية
       -- أعمدة تبقى ضيقة جداً بلا قراءة مريحة (عنوان متجر كامل يتكدّس
       بعمود عرضه ~60px)، والمستخدم يحتاج يمرر يمين ويسار باستمرار ليقرأ
       صفاً واحداً كاملاً. التحويل الكامل: كل صف <tr> يصير بطاقة مستقلة
       مكدَّسة عمودياً (لا جدول أفقي إطلاقاً)، كل خلية <td> تعرض عنوان
       عمودها كملصق بجانبها (data-label، مُضاف تلقائياً بـmain.js:
       labelResponsiveTableCells) بدل الاعتماد على رأس جدول أفقي بعيد.
       نفس نمط "بطاقات الفواتير/المجلدات" المستخدم بباقي الموقع بالضبط،
       يطبَّق الآن على أي جدول admin-table بلا استثناء. */
    .admin-table-container { overflow-x: visible; border: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
    .admin-table, .admin-table tbody { display: block; width: 100%; }
    .admin-table thead { display: none; }
    .admin-table tr {
        display: block;
        background: color-mix(in srgb, var(--card-bg) 88%, transparent);
        border: 1.5px solid var(--border-color);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 4px 12px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    /* صف "جاري التحميل..."/"لا توجد بيانات" (خلية واحدة بلا data-label
       مقصود -- شوف labelResponsiveTableCells) يبقى نصاً بسيطاً ممركزاً،
       لا بطاقة فرعية بملصق فارغ */
    .admin-table tr:has(td[colspan]) { text-align: center; padding: 16px 12px; }
    .admin-table td {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 8px 14px;
        padding: 10px 0;
        border-bottom: 1px solid var(--border-color);
        text-align: start;
        font-size: 13px;
    }
    /* خلية "التحكم والعمليات" غالباً تحوي 2-4 أزرار إجراء متجاورة (تعديل/
       حذف/تعطيل...) -- بعرض جوال ضيق قد لا تتسع كل الأزرار بجانب بعضها
       بصف الملصق نفسه (اكتُشف حياً: 16px تجاوز فعلي بجدول أكواد الخصم).
       flex-wrap فوق يسمح لمجموعة الأزرار تنزل سطراً جديداً بعرض كامل
       بدل تجاوز حدود الخلية. */
    .admin-table td > div[style*="display:flex"],
    .admin-table td > div[style*="display: flex"] { flex-wrap: wrap; justify-content: flex-start; }
    .admin-table td:last-child { border-bottom: none; }
    .admin-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--text-muted);
        flex-shrink: 0;
        font-size: 12px;
    }
    /* عمود بلا data-label (صف تحميل/فراغ) لا يحتاج flex بين ملصق وقيمة */
    .admin-table td:not([data-label]) { justify-content: center; border-bottom: none; }
    @media (hover: hover) and (pointer: fine) {
        .admin-table tr:hover { background: rgba(37, 99, 235, 0.08); }
    }

    /* تحسينات activeFolderBanner على الجوال المعتاد (768px) */
    #activeFolderBanner { flex-direction: column; align-items: flex-start !important; justify-content: flex-start !important; }
    #activeFolderBanner > div:first-child { width: 100%; margin-bottom: 8px; }
    #activeFolderBanner > div:last-child { width: 100%; flex-direction: column; }
    #activeFolderBanner button { width: 100%; justify-content: center; }

    /* tools-bar: تحسين layout البحث والأزرار */
    .tools-bar { flex-direction: column; gap: 10px !important; }
    .search-box { width: 100% !important; }

    /* فلاتر التحليلات على الجوال */
    #anaCustomDates { flex-direction: column !important; align-items: stretch !important; }
    #anaCustomDates input { width: 100% !important; }
    #anaCustomDates span { text-align: center; }

    /* تحسينات الـ Select على الجوال */
    select { font-size: 13px; padding: 10px 8px; }

    /* تحسينات Header للتحليلات على الجوال */
    #analyticsTab > div:first-child { flex-direction: column !important; align-items: flex-start !important; }
    #analyticsTab > div:first-child h2 { width: 100%; margin-bottom: 12px; }
    #analyticsTab > div:first-child > div { width: 100%; flex-direction: column !important; gap: 10px !important; }
    #analyticsTab select { width: 100% !important; }

    /* إعادة تصميم حقيقية لا مجرد تصغير (طلب صريح صاحب المشروع 2026-08-31:
       "ما أبي مساحات مهدرة... أبيه يصير كأنه تطبيق جوال حقيقي لا نسخة
       مصغّرة من الموقع"). كانت الـ4 بطاقات (إجمالي المصروفات/الفواتير/
       الضمان/تنبيهات الضمان) تكدّس عمود واحد كامل العرض لكل بطاقة --
       مساحة رأسية مهدورة (4 أسطر كاملة لأربع أرقام بسيطة) وسلوك واضح إنه
       نفس شبكة سطح المكتب (auto-fit + minmax(200px)) وقعت بعمود واحد
       فقط لضيق الشاشة، لا تصميم مقصود للجوال. الحل: شبكة عمودين ثابتة
       (2×2 بدل 4×1) -- كثافة أعلى تليق بتطبيق جوال حقيقي، ونصف المساحة
       الرأسية المهدورة سابقاً. */
    .stats-grid { grid-template-columns: 1fr 1fr !important; }
    .stat-card { flex-direction: column !important; text-align: center; padding: 14px 10px !important; gap: 8px !important; }
    .stat-icon { margin-bottom: 0; font-size: 18px; padding: 8px 10px; }
    .stat-info { width: 100%; }
    .stat-info h4 { font-size: 11px !important; margin-bottom: 4px !important; }
    .stat-info p { font-size: 20px !important; }
    html.font-lg .stat-info p { font-size: 22px !important; }

    /* إصلاح (بلاغ حي صاحب المشروع 2026-08-31 -- نافذة "نشاط الحساب
       والجلسات"): بطاقة الجلسة كانت صفاً أفقياً (معلومات + زر) بعرض
       سطح المكتب -- بعرض جوال ضيق مع نص جهاز طويل، الزر يبقى بأعلى
       الصف (align-items:start) بينما المعلومات تكبر لعدة أسطر، فيبدو
       الزر معلَّقاً بمكان غريب بعيداً عن سياقه. الحل: تكديس عمودي كامل
       (معلومات فوق، زر بعرض كامل تحتها) -- نفس نمط بطاقات الفواتير/
       المجلدات المستخدم بكل الموقع. */
    .session-card { flex-direction: column; align-items: stretch; }
    .session-card-revoke { width: 100%; min-width: 0; }

    /* قائمة الإشعارات المنسدلة (بلاغ صاحب المشروع 2026-08-31: عرض ثابت
       320px بـstyle مضمَّن بـHTML، مثبَّتة بموضع نسبي لجرس صغير قرب حافة
       الهيدر -- تطلع خارج حدود شاشة جوال 375px فعلياً. position:fixed
       بدل absolute + هوامش ثابتة من طرفي الشاشة (نمط قائمة شبه ملء-الشاشة
       المعتاد بالجوال) بدل عرض بكسل ثابت يتجاهل عرض الشاشة الفعلي. */
    .notification-dropdown {
        position: fixed !important;
        top: calc(70px + env(safe-area-inset-top)) !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: min(70vh, 480px) !important;
    }
    html[dir="rtl"] .notification-dropdown {
        left: 12px !important;
        right: 12px !important;
    }

    /* إصلاح (بلاغ حي 2026-08-31 -- نافذة "إقرار ضريبي جديد"): مجموعة
       خيارات radio/checkbox (نطاق الإقرار، أرباع السنة) كانت صفاً أفقياً
       واحداً (flex-wrap:wrap) يحوي 3-4 خيارات بنص متفاوت الطول -- بعرض
       جوال ضيق كل خيار يضطر يتشارك مساحة قليلة مع جاره، فنص الخيار نفسه
       (لا الصف كله) يلتف لعدة أسطر داخل مساحته الضيقة، بينما align-items:
       center يمركز دائرة/مربع الاختيار عمودياً وسط النص الملتف -- تبدو
       معلّقة بمنتصف الكلام بدل ملاصقة أول سطر. الحل: كل خيار ياخذ سطراً
       كاملاً بعرض الجوال (بدل التزاحم أفقياً)، فنص الخيار القصير نفسه لا
       يحتاج يلتف أصلاً غالباً. */
    .radio-check-flow-row { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
    .radio-check-flow-row > label { align-items: flex-start !important; }
    .radio-check-flow-row > label input { margin-top: 3px; }

    /* شبكات عمودين/ثلاثة بـstyle مضمَّن (11 موضعاً بـindex.html: تفاصيل
       فاتورة، نوافذ تصدير، إعدادات باقات وعدادات...) -- عمود واحد بعرض
       جوال بدل تزاحم حقول/نصوص بأعمدة ضيقة جداً (~150px للعمود الواحد
       بعرض هاتف 375px). محدِّد الخاصية [style*=] يطابق أي عنصر يحتوي هذا
       النص الحرفي بخاصية style مضمَّنة، بغض النظر عن باقي القواعد المرافقة
       -- يصلح كل الحالات الحالية والمستقبلية بقاعدة واحدة بدل تعديل كل
       نافذة على حدة. */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr auto"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 420px) {
    /* شاشات جوال ضيقة جداً (320-390px): تضييق إضافي بسيط بدون كسر أي تخطيط */
    .screen { padding: 12px 2.5% !important; }
    .stats-grid, #adminTab .stats-grid { gap: 10px !important; }
    button { padding: 8px 12px; font-size: 12.5px; }

    /* تحسينات إضافية لأزرار activeFolderBanner على جوال ضيق */
    /* إصلاح (بلاغ حي صاحب المشروع 2026-08-31: "دخلت خيارات المجلد، الكتابة
       اختفت وصارت بس أيقونات") -- كانت هنا قاعدة `button span { display:
       none }` تخفي نص الزر بالكامل على شاشة أضيق من 420px، فتترك 5 أزرار
       كبيرة بعرض الشاشة كاملة بلا أي كتابة توضح وظيفتها (إضافة/نقل/تعديل/
       حذف/عرض الكل) -- المستخدم ما يقدر يميّز بينها إطلاقاً. الأزرار هذي
       أصلاً full-width عمودية (سطر #activeFolderBanner button فوق بقاعدة
       768px) فمساحة كافية للنص حتى بأضيق شاشة (~330px عرض فعلي مقيس حياً)
       -- إبقاء النص هو الحل الصحيح، لا إخفاؤه. */
    #activeFolderBanner { padding: 10px 12px !important; gap: 6px !important; }
    #activeFolderBanner > div:last-child { gap: 6px !important; }
    #activeFolderBanner button { padding: 7px 10px; font-size: 12px; }

    /* tools-bar: نقل الأزرار أسفل البحث على شاشات ضيقة جداً */
    .tools-bar { flex-direction: column; gap: 8px !important; }
    .search-box { width: 100% !important; }
    .tools-bar button { width: 100%; }
}