/*
 * أنماط خاصة بوضع "تطبيق PWA مثبّت" بس (بعد "أضف للشاشة الرئيسية") — لا تؤثر
 * إطلاقاً على أي متصفح عادي (جوال/حاسوب/تابلت)، اللي يبقى بنفس التصميم الأساسي
 * دايماً. الكلاس pwa-mode يُضاف على <html> بسكربت صغير بالـ<head> (شوف
 * layouts/app.blade.php و layouts/guest.blade.php) بس لو الموقع يشتغل فعلياً
 * كتطبيق مثبّت (display-mode: standalone).
 *
 * التنقل بوضع PWA نفس نظام المتصفح بالضبط (نفس القائمة الجانبية/الهامبرغر) —
 * ما فيه شريط تنقل سفلي منفصل. الفرق الوحيد بوضع PWA: مساحة أعلى الهيدر
 * (شريط الحالة) وكشوفات الإنتاج المقسّمة لبطاقتين (بدون سحب أفقي).
 */

.pwa-only {
    display: none !important;
}

html.pwa-mode .pwa-only {
    display: block !important;
}

html.pwa-mode .pwa-hide {
    display: none !important;
}

/* مساحة أعلى الصفحة تحسب ارتفاع "الجزيرة"/شريط الحالة (ساعة، بطارية...) —
   viewport-fit=cover يخلي الصفحة تمتد تحت شريط الحالة، فبدون هذا الحشو
   يصير كلام الهيدر يتداخل معه. بوضع PWA بس (بالمتصفح env() صفر أصلاً فما
   يأثر لو انحط بدون شرط، لكن نخليه صريح ومربوط بـpwa-mode للوضوح).
   height:auto + min-height ضروريين لأن العنصر الأصلي h-16 (ارتفاع ثابت
   ٤rem) — بدونها الحشو الإضافي كان يقتص المحتوى بدل ما يزيد المساحة. */
html.pwa-mode .pwa-safe-top {
    padding-top: env(safe-area-inset-top, 0px);
    height: auto;
    min-height: 4rem;
}

/* كشوفات إنتاج الأغنام/الماعز المقسّمة لبطاقتين — مسافة أقل بين البطاقتين
   من الافتراضي (space-y-4) بوضع PWA بس. */
html.pwa-mode .pwa-split-stack > * + * {
    margin-top: 0.5rem;
}