/* ==========================================================================
   الحاوية الرئيسية للتطبيق (App Container Component)
   تضمن توسيط المحتوى وهوامش تجاوبية متناسقة لجميع الشاشات
   ========================================================================== */

:root {
    --container-max-width: 1200px;
    --container-padding: 1rem;       /* 16px للموبايل */
}
*{
    box-sizing: border-box;
  
    
}

@media (min-width: 640px) {
    :root {
        --container-padding: 1.5rem; /* 24px للتابلت */
    }
}

@media (min-width: 1024px) {
    :root {
        --container-padding: 2rem;   /* 32px للشاشات الكبيرة */
    }
}

/* الكلاس الأساسي للحاوية */
.app-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
}

/* تنويعات إضافية مفيدة للحاوية بحسب الحاجة */
.app-container-sm {
    max-width: 800px;   /* للنماذج وصفحات تسجيل الدخول وقراءة المقالات */
}

.app-container-md {
    max-width: 1024px;
}

.app-container-lg {
    max-width: 1280px;
}

.app-container-fluid {
    max-width: 100%;    /* شاشة كاملة مع الحفاظ على الهوامش الجانبية */
}