/* header.css */

/* تصميم الهيدر */
header {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    direction: rtl; /* تعيين اتجاه النص من اليمين إلى اليسار */
    transition: height 0.3s ease; /* تأثير الانتقال على الارتفاع */
}
/* تأكد من أن navbar تأخذ كل العرض عند تصغير الشاشة */
.navbar {
    flex-wrap: nowrap; /* تأكد من عدم التفاف العناصر */
    overflow-x: auto; /* إضافة تمرير أفقي إذا لزم الأمر */
}

/* إذا كانت لديك عناصر معينة تحتاج إلى إظهارها بشكل دائم */
.nav-link {
    white-space: nowrap; /* منع التفاف النصوص */
}

/* إذا كنت بحاجة إلى المزيد من الفضاء بين العناصر */
.navbar-nav {
    position: relative; /* تأكد من أن الحاوية لها وضعية نسبية */
}
.navbar-nav .nav-item {
    margin: 0.5rem 0; /* المسافة بين العناصر */
}

/* إعدادات التنقل */
nav.navbar {
    padding: 1rem 0;
}

/* الروابط وأيقونات التنقل */
.navbar-brand {
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    color: white;
}

.navbar-nav .nav-link {
    color: white;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0 1rem;
    transition: color 0.3s ease;
}

    .navbar-nav .nav-link:hover {
        color: #d1e9ff;
    }

/* أيقونات التنقل */
.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler-icon {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"%3E%3Cpath stroke="rgba%28255, 255, 255, 0.5%29" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/%3E%3C/svg%3E');
}
.dropdown-menu {
    position: absolute; /* أو استخدم fixed */
    z-index: 1000; /* تأكد من أن القيمة مرتفعة لتمكينها من الظهور فوق العناصر الأخرى */
}

/* footer.css */

/* تصميم التذييل */
/* تصميم التذييل */
#footer {
    background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);
    color: white;
    position: relative;
    padding: 20px;
    border-top: 5px solid #fff; /* حدود علوية بيضاء */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* إضافة ظل */
    border-radius: 8px; /* إضافة زوايا مدورة */
}

/* عنوان التذييل */
.footer-title {
    font-size: 1.5rem;
    margin-bottom: 10px;
    text-align: center; /* محاذاة النص إلى الوسط */
}

/* تصميم قائمة البلاغات */
#emergency-list {
    width: 100%; /* التأكد من أن القائمة بعرض التذييل */
}

    #emergency-list li {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        padding: 10px;
        transition: background 0.3s;
        margin-bottom: 15px; /* تباعد بين العناصر */
    }

        #emergency-list li:hover {
            background: rgba(255, 255, 255, 0.2);
        }

    /* أيقونات التذييل */
    #emergency-list i {
        color: #ffdd57; /* لون الأيقونات */
    }

/* تصميم زر العودة إلى الأعلى */
#scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* إخفاء الزر افتراضيًا */
    z-index: 1000; /* التأكد من أن الزر فوق كل العناصر الأخرى */
}

    /* تحسين تفاعل الزر */
    #scrollToTop:hover {
        background-color: #fff; /* تغيير لون الخلفية عند المرور بالفأرة */
        color: #000; /* تغيير لون النص */
    }
/* إعدادات المنطقة القابلة للتمرير */
.scrollable-area {
    overflow-y: auto; /* يظهر التمرير العمودي */
    max-height: 200px; /* ارتفاع المنطقة القابلة للتمرير */
    width: 100%; /* عرض المنطقة القابلة للتمرير */
}


.navbar-nav .nav-link {
    transition: background-color 0.3s, color 0.3s; /* تأثيرات انتقالية */
}

    .navbar-nav .nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1); /* تأثير عند التمرير */
        color: #fff; /* لون النص عند التمرير */
    }















/* تنسيق الزر */
#toggleSidebar {
    border: 2px solid transparent; /* ضبط الحدود */
    transition: border-color 0.3s ease; /* تأثير التغيير على الحدود */
}

    #toggleSidebar:hover {
        border-color: rgba(255, 255, 255, 0.8); /* تغيير لون الحدود عند التمرير */
    }

/* تصميم الشريط الجانبي */
.sidebar {
    position: fixed;
    top: 60px; /* تعديل حسب ارتفاع الهيدر */
    left: 0;
    width: 200px; /* عرض الشريط الجانبي */
    background-color: #f8f9fa; /* لون خلفية الشريط الجانبي */
    padding: 15px;
    height: calc(100% - 60px); /* ارتفاع الشريط الجانبي */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* تأثير ظل */
    display: none; /* إخفاء الشريط الجانبي بشكل افتراضي */
    z-index: 1000; /* تأكد من أن الشريط الجانبي يظهر فوق المحتوى */
}

    .sidebar.visible {
        display: block; /* عرض الشريط الجانبي عند الضغط على الزر */
    }



/* تصميم القائمة المنسدلة */
.dropdown-menu {
    background-color: #f8f9fa; /* لون خلفية القائمة المنسدلة */
    border-radius: 0.5rem; /* زوايا دائرية */
}

/* تأثيرات على عناصر القائمة المنسدلة */
.dropdown-item:hover {
    background-color: #e2e6ea; /* لون الخلفية عند التمرير */
    color: #000; /* لون النص عند التمرير */
}



/* للسندات على الشاشات الأكبر من 768 بكسل (أجهزة الكمبيوتر) */
@media (min-width: 768px) {
    .card-custom-width {
        width: 90%; /* زيادة العرض قليلاً على أجهزة الكمبيوتر */
        max-width: 1500px; /* تعيين أقصى عرض أكبر */
    }
}

/* للسندات على الشاشات الأصغر من 768 بكسل (مثل الهواتف) */
@media (max-width: 767px) {
    .card-custom-width {
        width: 90%; /* العرض الافتراضي كما هو في الهواتف */
        max-width: 600px; /* تعيين أقصى عرض أصغر */
    }
}


@keyframes flash {
    0% {
        background-color: red; /* البداية بالأحمر */
    }

    50% {
        background-color: white; /* الانتقال إلى الأبيض */
    }

    100% {
        background-color: red; /* العودة إلى الأحمر */
    }
}

.flash {
    animation: flash 1s ease-in-out forwards, /* الومضة الأولى */
    none 5s forwards, /* انتظار 5 ثوانٍ بعد الومضة الأولى */
    flash 1s ease-in-out forwards 6s, /* الومضة الثانية تبدأ بعد 6 ثوانٍ */
    none 5s forwards 7s, /* انتظار 5 ثوانٍ بعد الومضة الثانية */
    flash 1s ease-in-out forwards 12s; /* الومضة الثالثة تبدأ بعد 12 ثانية */
}

@media print {
    /* مثال على بعض الأنماط للطباعة */
    .card {
        box-shadow: none; /* إزالة الظلال عند الطباعة */
    }
    /* أي أنماط أخرى تريد تطبيقها للطباعة */
}