/* Styles for Task Management System Home Page */

/* General Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    direction: rtl; /* تغيير اتجاه الكتابة */
}

header {
    background-color: #2980b9;
    color: #fff;
    padding: 20px;
}

header h1 {
    margin: 0;
    font-size: 28px;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #f39c12; /* Change color on hover */
}

main {
    padding: 20px;
}

section {
    margin-bottom: 30px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h2 {
    color: #2980b9;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    margin-bottom: 10px;
}

footer {
    background-color: #2980b9;
    color: #fff;
    text-align: center;
    padding: 10px;
}



/* تحديث تنسيق واجهة تسجيل الدخول لتكون على شكل بطاقة عائمة */

.login-container {
    background-color: #3498db; /* لون الخلفية */
    padding: 20px;
    text-align: center;
    border-radius: 10px; /* تدوير الحواف */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* ظل بشكل بطاقة عائمة */
    transition: transform 0.3s ease, background-color 0.3s ease; /* تحريك وتغيير اللون بانتقال ناعم */
    width: 300px; /* عرض البطاقة */
    margin: 0 auto; /* تحديد المركز */
}

.login-container:hover {
    transform: translateY(-5px); /* تحريك العنصر عند التحويل */
    background-color: hsla(208, 93%, 58%, 0.9); /* تغيير لون الخلفية عند التحويل */
}


.login-container h2 {
    color: #fff; /* لون النص */
    font-size: 24px; /* حجم النص */
    margin-bottom: 20px; /* تباعد أسفل النص */
}

.login-container .form-group {
    margin-bottom: 20px; /* تباعد بين عناصر النموذج */
}

.login-container .form-label {
    color: #fff; /* لون النص */
    font-size: 18px; /* حجم النص */
    margin-bottom: 5px; /* تباعد أسفل النص */
    display: block; /* عرض النص كامل على سطر واحد */
}

.login-container .form-input {
    width: calc(100% - 40px); /* عرض الحقل مع استبعاد التباعدات الجانبية */
    padding: 10px; /* تباعد داخلي */
    border: none; /* حذف حدود الحقل */
    border-radius: 5px; /* تدوير الحواف */
    font-size: 16px; /* حجم النص */
}

.login-container .login-button {
    width: calc(100% - 40px); /* عرض الزر مع استبعاد التباعدات الجانبية */
    padding: 12px 0; /* تباعد داخلي */
    background-color: #fff; /* لون الخلفية */
    color: #3498db; /* لون النص */
    border: none; /* حذف حدود الزر */
    border-radius: 5px; /* تدوير الحواف */
    font-size: 18px; /* حجم النص */
    cursor: pointer; /* المؤشر يدل على إمكانية النقر */
    transition: background-color 0.3s ease, color 0.3s ease; /* تحريك لون الخلفية والنص بانتقال ناعم */
}

.login-container .login-button:hover {
    background-color: #3498db; /* تغيير لون الخلفية عند التحويل */
    color: #fff; /* تغيير لون النص عند التحويل */
}

  
/* Overview Section Styles */
.info-panel {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.info-card {
    background-color: #3498db;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 10px;
    flex: 1;
    transition: transform 0.3s ease;
  }
  
  .info-card:hover {
    transform: translateY(-3px);
    background-color: hsla(155, 91%, 47%, 0.223); /* Change color on hover */

  }
  
  .info-card h3 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .info-card p {
    font-size: 14px;
    line-height: 1.6;
  }
  
  .info-card i {
    font-size: 30px;
    margin-bottom: 10px;
    color: #333;
  }

/* Latest Tasks Section Styles */
.latest-tasks ul li {
    background-color: #ecf0f1;
    padding: 15px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.latest-tasks ul li:hover {
    background-color: #bdc3c7; /* Change color on hover */
}

/* Calendar Section Styles */
.calendar {
    background-color: #ecf0f1;
    padding: 20px;
    border-radius: 10px;
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    header h1 {
        font-size: 24px;
    }

    nav ul li {
        margin-right: 10px;
    }

    main {
        padding: 10px;
    }

    .info-panel {
        flex-direction: column;
    }

    .info-card {
        margin-bottom: 10px;
    }
}
/* Add Floating Button Styles */
/* Floating Button Styles */
.create-task-button {
    position: fixed; /* تحديد الزر على الجزء الثابت من الشاشة */
    bottom: 10%; /* المسافة من الأسفل */
    right: 20px; /* المسافة من اليمين */
    background-color: #007bff; /* لون الخلفية */
    color: #fff; /* لون النص */
    width: 60px; /* العرض */
    height: 60px; /* الارتفاع */
    border-radius: 60%; /* شكل الحواف */
    text-align: center; /* محاذاة النص */
    font-size: 34px; /* حجم الخط */
    line-height: 50px; /* ارتفاع الخط */
    text-decoration: none; /* إزالة التزيين */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* ظل */
    transition: background-color 0.3s ease; /* تحريك لون الخلفية بانتقال ناعم */
}

.create-task-button:hover {
    background-color: #0056b3; /* تغيير لون الخلفية عند التحويل */
}

/* Styles for New Task Creation Page */

.new-task-container {
    background-color: #fff; /* لون الخلفية */
    padding: 20px; /* تباعد داخلي */
    border-radius: 10px; /* تدوير الحواف */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); /* ظل بشكل بطاقة عائمة */
    transition: transform 0.3s ease, background-color 0.3s ease; /* تحريك وتغيير اللون بانتقال ناعم */
    max-width: 600px; /* العرض الأقصى */
    margin: 0 auto; /* تحديد المركز */
}

.new-task-container h2 {
    color: #2980b9; /* لون العنوان */
}

.new-task-container .form-group {
    margin-bottom: 20px; /* تباعد بين عناصر النموذج */
}

.new-task-container .form-label {
    color: #2980b9; /* لون النص */
    font-size: 18px; /* حجم النص */
    margin-bottom: 5px; /* تباعد أسفل النص */
    display: block; /* عرض النص كامل على سطر واحد */
}

.new-task-container .form-input {
    width: calc(100% - 40px); /* عرض الحقل مع استبعاد التباعدات الجانبية */
    padding: 10px; /* تباعد داخلي */
    border: none; /* حذف حدود الحقل */
    border-radius: 5px; /* تدوير الحواف */
    font-size: 16px; /* حجم النص */
}

.new-task-container .form-select {
    width: calc(100% - 40px); /* عرض القائمة المنسدلة مع استبعاد التباعدات الجانبية */
    padding: 10px; /* تباعد داخلي */
    border: none; /* حذف حدود الحقل */
    border-radius: 5px; /* تدوير الحواف */
    font-size: 16px; /* حجم النص */
}

.new-task-container .form-button {
    width: calc(100% - 40px); /* عرض الزر مع استبعاد التباعدات الجانبية */
    padding: 12px 0; /* تباعد داخلي */
    background-color: #2980b9; /* لون الخلفية */
    color: #fff; /* لون النص */
    border: none; /* حذف حدود الزر */
    border-radius: 5px; /* تدوير الحواف */
    font-size: 18px; /* حجم النص */
    cursor: pointer; /* المؤشر يدل على إمكانية النقر */
    transition: background-color 0.3s ease, color 0.3s ease; /* تحريك لون الخلفية والنص بانتقال ناعم */
}

.new-task-container .form-button:hover {
    background-color: #3498db; /* تغيير لون الخلفية عند التحويل */
}

.task-details {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    direction: rtl;
}

.task-details h2 {
    color: #2980b9;
}

.task-details p {
    margin-bottom: 10px;
}

.task-details label {
    display: block;
    margin-bottom: 5px;
    color: #2980b9;
}

.task-details select {
    width: calc(100% - 20px);
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 10px;
}

.task-details button {
    padding: 10px 20px;
    background-color: #2980b9;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.task-details button:hover {
    background-color: #3498db;
}

.task-files {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    direction: rtl;
}

.task-files h2 {
    color: #2980b9;
}

.task-files ul {
    padding: 0;
}

.task-files ul li {
    margin-bottom: 10px;
}

.task-comments {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    direction: rtl;
}

.task-comments h2 {
    color: #2980b9;
}

.task-comments label {
    display: block;
    margin-bottom: 5px;
    color: #2980b9;
}

.task-comments textarea {
    width: calc(100% - 20px);
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 10px;
}

.task-comments button {
    padding: 10px 20px;
    background-color: #2980b9;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.task-comments button:hover {
    background-color: #3498db;
}



/* إضافة أنماط CSS خاصة بالجدول */
.tasks-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.tasks-table th, .tasks-table td {
    padding: 12px 15px; /* زيادة التباعد الداخلي */
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.tasks-table th {
    background-color: #3498db; /* تغيير لون خلفية رؤوس الأعمدة */
    color: #fff; /* تغيير لون النص في رؤوس الأعمدة */
}

.tasks-table td {
    background-color: #f9f9f9; /* تغيير لون خلفية خلايا الجدول */
}

/* تحسين المظهر عند تحويل الماوس */
.tasks-table tr:hover, .tasks-table td:hover {
    background-color: #b8f798; /* تغيير لون خلفية الخلية عند تحويل الماوس */
}

.task-title {
    font-size: 1.2em;
    color: #007bff; /* Change to any color you prefer */
    margin-bottom: 5px;
}
.priority {
    font-weight: bold;
}

.priority.high {
    color: red; /* أو أي لون ترغب فيه للأولوية العالية */
}

.priority.medium {
    color: orange; /* أو أي لون ترغب فيه للأولوية المتوسطة */
}

.priority.low {
    color: green; /* أو أي لون ترغب فيه للأولوية المنخفضة */
}


#filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
#filters label, #filters select, #filters input {
    margin: 5px;
}