/* public/style.css */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap');

/* --- إعدادات عامة --- */
body {
    font-family: 'Cairo', sans-serif; /* تطبيق الخط الأساسي */
    margin: 0;
    background-color: #f8f9fa; /* لون خلفية أفتح قليلاً */
    direction: rtl; /* ضمان الاتجاه من اليمين لليسار */
}

/* --- تنسيق خاص بصفحة تسجيل الدخول --- */
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* استخدام min-height بدلاً من height للتوافق */
    padding: 20px; /* إضافة هامش حول الحاوية على الشاشات الصغيرة */
    box-sizing: border-box;
}

.login-container {
    background-color: #ffffff;
    padding: 30px 40px; /* تعديل الحشو */
    border-radius: 12px; /* زيادة استدارة الحواف */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* ظل أنعم */
    width: 100%;
    max-width: 400px;
    text-align: center;
    border-top: 5px solid #28a745; /* إضافة شريط علوي بلون أخضر مميز */
}

.login-container h2 {
    color: #343a40; /* لون أغمق قليلاً للعنوان */
    margin-bottom: 30px; /* زيادة الهامش السفلي */
    font-weight: 700; /* خط أعرض */
}

/* --- تنسيق حقول الإدخال --- */
.input-group {
    margin-bottom: 25px; /* زيادة الهامش بين الحقول */
    text-align: right;
}

.input-group label {
    display: block;
    margin-bottom: 8px; /* زيادة الهامش تحت العنوان */
    color: #495057; /* لون أغمق قليلاً */
    font-weight: 600; /* خط أعرض قليلاً */
}

.input-group input {
    width: 100%;
    padding: 12px 15px; /* زيادة الحشو الداخلي */
    border: 1px solid #ced4da; /* لون حدود أفتح */
    border-radius: 6px; /* استدارة حواف طفيفة */
    box-sizing: border-box;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* انتقال أنعم */
    font-family: 'Cairo', sans-serif; /* ضمان استخدام الخط داخل الحقل */
    font-size: 1rem;
}

.input-group input:focus {
    outline: none;
    border-color: #28a745; /* تغيير لون الحدود عند التركيز */
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25); /* إضافة ظل خفيف عند التركيز */
}

/* --- تنسيق زر الدخول --- */
button[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #28a745; /* لون أخضر أساسي */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem; /* تكبير الخط قليلاً */
    font-weight: 700;
    transition: background-color 0.2s ease-in-out;
    margin-top: 10px; /* إضافة هامش علوي */
}

button[type="submit"]:hover {
    background-color: #218838; /* درجة أغمق عند المرور */
}

/* --- تنسيق رسائل الحالة --- */
#message {
    margin-top: 20px; /* زيادة الهامش العلوي */
    font-weight: 600; /* خط أعرض قليلاً */
    min-height: 1.5em; /* حجز مساحة للرسالة لمنع "قفز" العناصر */
}

.success {
    color: #28a745; /* أخضر للنجاح */
}

.error {
    color: #dc3545; /* أحمر للفشل */
}

/* --- تنسيقات التجاوب (لشاشات الموبايل) --- */
@media (max-width: 480px) {
    .login-container {
        padding: 20px 25px; /* تقليل الحشو على الشاشات الصغيرة */
    }

    .login-container h2 {
        font-size: 1.5rem; /* تصغير حجم العنوان */
    }

    button[type="submit"] {
        font-size: 1rem; /* تصغير خط الزر */
    }
}