/* 
 * سكرتيري - إصلاح Layout الجوال
 * v2.7.5 - البطاقات تملأ العرض بعرض موحّد (تصفير الـgutter + حشو موحّد)
 */

/* ========== Reset عام للـ Mobile ========== */
@media (max-width: 991.98px) {
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    /* 🎯 الجذر الحقيقي: body هو flex-column، فأبناؤه لازم يتمددون كامل العرض */
    body {
        align-items: stretch !important;
    }
    body > * {
        width: 100% !important;
        max-width: 100% !important;
        align-self: stretch !important;
    }
    main {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
    /* الحاوية تملأ العرض بحشو بسيط */
    main > .container,
    main .container,
    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 4px !important;
        padding-left: 4px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    /* الصف يملأ العرض + تصفير الـgutter تماماً (يمنع تفاوت العرض) */
    .row {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
    }
    /* ✅ كل بطاقات الأقسام = عرض كامل بالضبط، حشو موحّد لكل عمود بلا استثناء */
    body .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-right: 6px !important;
        padding-left: 6px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    /* استثناء وحيد: مربعات الإحصائيات col-6 تبقى 2×2 */
    body .row > .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
    /* 🎯🎯 السبب الجذري الحقيقي: الرابط <a> اللي يلفّ البطاقة inline فينكمش.
       نجبره block بعرض كامل — وهذا الفرق عن صفحة سياراتي (بطاقتها div مو a) */
    body .row > [class*="col-"] > a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    /* البطاقة تمتد كامل عرض العمود بنفس المقاس مهما كان المحتوى */
    body .item-card,
    body .card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 0 1rem 0 !important;
    }
    /* منع أي عنوان طويل من توسيع البطاقة */
    body .item-card .item-title {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    h1, h2, h3, h4 {
        width: 100% !important;
        word-wrap: break-word;
    }
}

/* ========== الشاشات الصغيرة ========== */
@media (max-width: 576px) {
    .card-body { padding: 1rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.2rem !important; }
}

/* ========== Bottom Nav padding ========== */
@media (max-width: 768px) {
    body { padding-bottom: 90px !important; }
}