/* style.css */

/* 1. استيراد الخط */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

/* 2. إعدادات الصفحة الأساسية (بدونها الصفحة ستكون مقلوبة LTR) */
body { 
    font-family: 'Tajawal', sans-serif; 
    direction: rtl; /* هذا السطر هو الذي يقلب الصفحة للعربية */
    text-align: right;
    background-color: #f9fafb;
}

/* 3. تنسيق الشبكة (بدون هذا الكود ستظهر الأقسام فوق بعضها بشكل قبيح) */
#main-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 56rem; /* max-w-4xl */
    margin-left: auto;
    margin-right: auto;
}

/* في الشاشات الكبيرة، قسّم الصفحة لثلاثة أعمدة */
@media (min-width: 768px) {
    #main-layout {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    
    /* عمود الإدخال يأخذ مساحة 1 */
    #input-section {
        grid-column: span 1 / span 1;
    }

    /* عمود النتائج يأخذ مساحة 2 */
    #results-section {
        grid-column: span 2 / span 2;
    }
}

/* 4. إعدادات الطباعة */
@media print {
  @page { size: A4; margin: 1cm; }
  body { background: white; }
  .print\:hidden { display: none !important; }
  #main-layout { display: block !important; }
  #results-section { width: 100% !important; }
}