/* 1. جعل الحاوية تأخذ كامل عرض الشاشة */
.grid-child.container-component {
    display: block !important;
    grid-column: 1 / -1 !important;
    /* تغيير العرض من 1000px إلى 98% للتمدد مع ترك مسافة بسيطة جداً للجوانب */
    max-width: 98% !important; 
    width: 98% !important;
    margin: 20px auto !important; 
    padding: 30px !important;
    background: #ffffff !important;
    border-radius: 15px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
    clear: both !important;
    float: none !important;
}

/* 2. التأكد من أن الهيكل الأب يسمح بالتمدد */
.site-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important; /* إزالة أي قيود عرض من الأب */
}

/* 3. إبقاء تنظيف النموذج كما هو لضمان عدم التداخل */
fieldset {
    all: unset !important;
    display: block !important;
    margin-bottom: 25px !important;
    border: 1px solid #eee !important;
    padding: 20px !important;
    border-radius: 10px !important;
    background: #fff !important;
}

legend {
    all: unset !important;
    display: block !important;
    width: 100% !important;
    color: #1a2a3a !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #E94D38 !important;
    padding-bottom: 10px !important;
    margin-bottom: 20px !important;
    text-align: right !important;
}



/* --- تنسيق Page Heading ليصبح احترافياً --- */

.page-header {
    margin: 20px 0 30px 0 !important;
    text-align: center !important; /* توسيط العنوان */
    border-bottom: 2px solid #eee !important;
    padding-bottom: 15px !important;
}

.page-header h1 {
    font-family: 'Cairo', sans-serif !important;
    color: #1a2a3a !important; /* اللون الكحلي الرسمي */
    font-size: 32px !important;
    font-weight: 800 !important;
    position: relative !important;
    display: inline-block !important;
}

/* إضافة الخط الأحمر الصغير تحت العنوان لتمييزه */
.page-header h1::after {
    content: "" !important;
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60px !important;
    height: 4px !important;
    background-color: #E94D38 !important; /* اللون الأحمر الرسمي */
    border-radius: 2px !important;
}

/* تأمين تمدد الصفحة مع وجود العنوان */
.grid-child.container-component {
    margin-top: 10px !important; /* تقليل المسافة لأن العنوان أخذ مساحة */
}


/* 1. إجبار الحاوية الرئيسية على التمدد الكامل */
.grid-child.container-component {
    display: block !important;
    grid-column: 1 / -1 !important;
    width: 100% !important; /* تمدد كامل العرض */
    max-width: 100% !important; /* إلغاء قيد الـ 1000px */
    margin: 0 !important; /* إزالة الهوامش الجانبية للتمدد */
    padding: 20px !important;
    background: #ffffff !important;
    box-shadow: none !important; /* اختياري: إزالة الظل ليعطي شعوراً بالتمدد */
}

/* 2. إلغاء أي قيود من الحاوية الأب */
.site-grid {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 3. جعل العنوان متمدداً ومنسقاً في مكانه */
div.grid-child.container-component main h1 {
    display: block !important;
    text-align: center !important; 
    font-family: 'Cairo', sans-serif !important;
    color: #1a2a3a !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    margin: 20px auto !important;
    padding-bottom: 10px !important;
    border-bottom: 4px solid #E94D38 !important;
    width: fit-content !important;
}

/* 4. إجبار الجدول والبيانات على أخذ العرض المتاح بالكامل */
.adminlist, .table, #adminForm {
    width: 100% !important;
    min-width: 100% !important;
}