/* ══════════════════════════════════════════════════════════════════════
   footer-floor.css — التذييل الى قاع الشاشة

   المشكلة: الصفحة القصيرة تترك تحت تذييلها فراغا حتى حافة النافذة، فيقرا
   التذييل معلقا في وسط الشاشة لا خاتمة لها.

   الحل: body عمود مرن بارتفاع نافذة كامل، ومساحة المحتوى وحدها هي التي
   تنمو (‎flex-grow‎)، فيهبط التذييل الى القاع متى قصر المحتوى ويتبعه متى طال.

   ⚠️ النمو على المحتوى لا دفع بـ‎margin-block-start:auto‎ على التذييل عمدا:
   تذاييل المشروع تحمل ‎mt-4‎/‎mt-5‎ وهي ‎!important‎ من Bootstrap فتغلب الدفع،
   ولو كسرناها بـ‎!important‎ مضاد لضاعت فجوتها في الصفحات الطويلة (‎auto‎
   تصير صفرا متى امتلا الطول). النمو يبقي الفجوة كما هي في الحالين.

   النطاق: ‎body:has(> footer)‎ — المستندات التي فيها التذييل ابن مباشر لـbody:
   تخطيط الموقع (‎<main>‎) وتخطيط الباني وصفحات الورقة (‎.container-main‎)
   وصفحات h6 المستقلة (‎<main>‎). لوحة التحكم خارجه: تذييلها داخل
   ‎.content-wrapper‎ وVuexy يثبته هناك بنفسه.

   صفحات تضع تذييلها داخل ‎<main>‎ (‎.h6-skin-foot‎) لها قاعدتها في h6-skin.css
   لان الدفع فيها يحتاج ان يكون ‎main‎ نفسه عمودا مرنا.
   ══════════════════════════════════════════════════════════════════════ */

body:has(> footer){
    min-height: 100vh;
    min-height: 100dvh;   /* الجوال: شريط المتصفح لا يقتطع من الارتفاع */
    display: flex;
    flex-direction: column;
}

/* مساحة المحتوى تبتلع الفراغ. بقية ابناء body اما مخفية (link/script) او
   عائمة (modal/offcanvas/الشريط الثابت) فلا تدخل العمود اصلا. */
body:has(> footer) > main,
body:has(> footer) > .container-main{
    flex-grow: 1;
    /* ⚠️ ‎width:100%‎ لازم لا زائد: هذه الحاويات تحمل ‎margin-inline:auto‎
       (‎.site-container‎)، والهامش التلقائي في عنصر مرن يغلب التمدد فينكمش
       العنصر الى عرض محتواه ويتوسط — الصفحة تضيق فجاة. ‎width:100%‎ يعيد
       سلوك الكتلة ويبقي ‎max-width‎ عاملا. */
    width: 100%;
}

/* الطباعة: الورق يقاس بالصفحة لا بالنافذة، وارتفاع النافذة هنا يزيد صفحة فارغة */
@media print{
    body:has(> footer){ min-height: 0; display: block; }
}