/* ✅ أنماط عامة */
/* 🔹 هذا النمط يُطبق على جميع الصفحات *باستثناء* صفحة تسجيل الدخول */
body:not(.login-page) .form-control {
    font-family: 'Almarai', sans-serif;
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

/* 🔹 لكن عند وجود `body.login-page`، ستأخذ صفحة تسجيل الدخول أنماطها الخاصة */
body.login-page {
    font-family: 'Almarai', sans-serif;
    background-color: #f8f9fa; /* لون خلفية خاص بصفحة تسجيل الدخول */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}



.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ✅ تحسين مظهر اسم المستخدم */
.username {
    font-size: 16px;
    font-weight: bold;
    font-family: 'Almarai', sans-serif;
}

/* ✅ تحسين زر تسجيل الخروج */
.logout-btn {
    background-color: #DC3545;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
    font-family: 'Almarai', sans-serif;
}

    .logout-btn:hover {
        background-color: #C82333;
    }

.navbar-brand img {
    margin-left: 10px;
    height: 50px;
    max-height: 60px; /* ✅ ضمان أن الشعار لا يكبر كثيرًا */
    width: auto;
    border-radius: 12px; /* ✅ زوايا دائرية ناعمة */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* ✅ ظل خفيف */
    transition: all 0.3s ease-in-out; /* ✅ تأثير ناعم عند التحويم */
}

    .navbar-brand img:hover {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* ✅ ظل أقوى عند التحويم */
    }


.system-name {
    font-size: 20px;
    font-weight: bold;
    margin-right: 10px;
    color:white;
}


/* ✅ تحسين القائمة الجانبية */
.sidebar {
    font-family: 'Almarai', sans-serif;
    right: 0px;
    position: fixed;
    top: 60px;
    width: 250px;
    height: calc(100vh - 60px);
    padding: 10px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    z-index: 500;
}

    /* ✅ تصميم القائمة */
    .sidebar nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .sidebar nav ul li {
            margin-bottom: 15px;
        }

    /* ✅ تحسين الروابط */
    .sidebar .nav-link {
        display: block;
        color: #084C61;
        font-size: 16px;
        font-weight: bold;
        text-decoration: none;
        padding: 10px;
        border-radius: 5px;
        transition: background-color 0.3s, color 0.3s;
    }


/* ✅ ضبط المحتوى الرئيسي */
.main-content {
    font-family: 'Almarai', sans-serif !important;
    margin-top: 20px; /* يبعد المحتوى عن الهيدر */
    margin-right: 270px; /* يترك مساحة للقائمة الجانبية */
    padding: 20px;
    text-align: center; /* يجعل العناوين والبطاقات في المنتصف */
    max-width: 900px; /* تحديد عرض المحتوى */
    margin-left: auto;
    margin-right: auto; /* يجعل المحتوى في المنتصف */

    font-family: 'Almarai', sans-serif !important;
    max-width: 900px; /* يحدد عرض المحتوى الرئيسي */
    margin-left: auto;
    margin-right: 250px; /* تعويض مساحة السايدبار */
    padding: 20px;
    text-align: center;
}

/* ✅ أنماط الأزرار */
.btn {
    font-family: 'Almarai', sans-serif;
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    border: none;
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary {
    background-color: #2A9DF4;
}

    .btn-primary:hover {
        background-color: #1C6EA4;
    }

.btn-success {
    background-color: #28A745;
}

    .btn-success:hover {
        background-color: #218838;
    }

.btn-danger {
    background-color: #2396ec;
}

    .btn-danger:hover {
        background-color: #C82333;
    }


/* ✅ تنسيق زر التحذير (btn-warning) */
.btn-warning {
    background-color: #FFC107; /* لون أصفر متناسق */
    padding: 10px 15px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    transition: 0.3s;
    display: inline-block;
    text-align: center;
}

    /* ✅ تأثير التحويم (Hover) */
    .btn-warning:hover {
        background-color: #E0A800; /* لون أغمق عند التحويم */
    }

/* ✅ تحسين حجم الأزرار الصغيرة */
.btn-sm {
    padding: 5px 10px;
    font-size: 12px;
}


.btn-role-edit {
    background-color: #FFC107;
    border-radius: 4px;
}

    .btn-role-edit:hover {
        background-color: #E0A800;
    }



/* ✅ تحسين محاذاة الفوتر */
.footer {
    height: 60px; /* ✅ زيادة ارتفاع الفوتر قليلًا */
    background-color: #1C6EA4;
    color: #FFFFFF;
    display: flex;
    justify-content: center; /* ✅ يجعل النص في المنتصف أفقيًا */
    align-items: center; /* ✅ يجعل النص في المنتصف عموديًا */
    position: fixed;
    bottom: 0;
    width: 100%;
    font-family: 'Almarai', sans-serif !important;
    font-size: 12px; /* ✅ حجم خط مناسب */
    font-weight: bold;
    text-align: center;
}

    /* ✅ تحسين مظهر النص داخل الفوتر */
    .footer p {
        margin: 0; /* ✅ إزالة الهوامش لمنع أي إزاحة غير مرغوبة */
        padding: 0 10px; /* ✅ إضافة تباعد داخلي بسيط */
    }



/* ✅ تغليف المحتوى الرئيسي */
.content-wrapper {
    max-width: 900px;
    margin: 0 auto; /* لضمان التوسيط */
    padding: 20px;
    text-align: center;
}

/* ✅ تحسين تصميم الجداول */
.custom-table {
    width: 100%;
    max-width: 900px; /* لا يسمح للجدول بالخروج عن حدوده */
    border-collapse: collapse;
    margin: 20px auto; /* يجعله في المنتصف */
    table-layout: auto; /* 🔹 يسمح للأعمدة بالتكيف مع المحتوى */
}
    .custom-table th, .custom-table td {
        border: 1px solid #ddd;
        padding: 10px;
        text-align: center;
        vertical-align: middle;
        overflow: hidden; /* ✅ يخفي أي نص زائد */
        text-overflow: ellipsis; /* ✅ يجعل النصوص الطويلة تتحول إلى "..." */
        white-space: normal; /* ✅ يسمح بتعدد الأسطر */
        word-wrap: break-word; /* ✅ يجبر النص على الانتقال للسطر التالي */
    }


    .custom-table th {
        background-color: #2A9DF4;
        color: white;
    }
    .custom-table td {
        max-width: 300px; /* 🔹 يمنع التمدد الزائد مع الحفاظ على المحتوى كاملاً */
    }



/* ✅ تحسين النماذج */
.form-control {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

    .form-control:focus {
        border-color: #2A9DF4;
        outline: none;
    }

/* ✅ ضبط الهيدر */
.header {
    height: 60px;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    background-color: #2A9DF4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    z-index: 1000; /* ✅ ضمان بقاء الهيدر فوق السايدبار */
    padding: 10px 20px;
    font-family: 'Almarai', sans-serif; /* ✅ تعيين خط Cairo */
}

.navbar {
    display: flex;
    width: 100%;
    justify-content: space-between; /* يوزع العناصر بشكل متساوٍ */
    align-items: center;
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-right: auto !important; /* ✅ يرسل العناصر لليسار */
    margin-left: 0 !important;
}

.user-dropdown {
    margin-left: 10px;
}

    .user-dropdown .btn {
        background-color: #0a324c; /* الأزرق الداكن الأساسي */ 
        color: #ffffff;
        border: none;
        border-radius: 10px;
        padding: 6px 14px;
        font-weight: bold;
        transition: all 0.3s ease;
    }

        .user-dropdown .btn:hover {
            background-color: #84d5ff; /* لون شعارك الفاتح */
            color: #0a324c; /* عكس اللون للقراءة */
        }

.dropdown-menu {
    font-family: 'Almarai', sans-serif;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.user-dropdown .dropdown-menu {
    margin-top: 8px;
    background-color: #ffffff;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 180px;
}

.user-dropdown .dropdown-item {
    color: #0a324c;
    font-weight: bold;
    transition: all 0.2s ease;
}

    .user-dropdown .dropdown-item:hover {
        background-color: #84d5ff; /* نفس لون الهوفر في الزر */
        color: #0a324c;
    }



/* ✅ تحسين توزيع البطاقات */
.features {
    top:-10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px;
}

.feature-box {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 300px;
    transition: all 0.3s ease;
    font-size:15px;
}

    .feature-box:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    }

/* ✅ أنماط خاصة بحالة النظام */
.system-status-normal {
    color: #28A745; /* أخضر */
    font-weight: bold;
}

.system-status-warning {
    color: #DC3545; /* أحمر */
    font-weight: bold;
}

/* ✅ تحسين الزر */
.btn {
    transition: all 0.3s ease;
}

    .btn:hover {
        transform: scale(1.05);
    }

    /* ✅ تنسيق العنوان الرئيسي (H1) */

/* ضبط الأزرار ليكونا في نفس السطر */
.d-flex {
    display: flex;
    align-items: center;
}

/* ضبط البحث الذكي ليكون في سطر جديد ويمتد بعرض الأزرار */
.smart-search {
    width: 100%; /* يجعل الحقل يمتد ليغطي عرض الأزرار */
}

.page-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    text-align: center; /* محاذاة في المنتصف */
    font-family: 'Almarai', sans-serif;
    margin-bottom: 15px; /* إضافة مسافة تحت العنوان */
    margin-top: 10px;
}

/* ✅ تنسيق العنوان الفرعي (P) */
.page-subtitle {
    font-size: 16px;
    color: #555;
    text-align: center; /* محاذاة في المنتصف */
    font-family: 'Almarai', sans-serif;
    margin-bottom: 30px; /* مسافة إضافية قبل البطاقات */
}

.text-right {
    text-align: right !important;
}

/* ✅ تحسين استايل نموذج الفلاتر */
.filter-form {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

    .filter-form label {
        font-weight: bold;
        color: #333;
    }

    .filter-form .form-control {
        border-radius: 5px;
    }

    /* ✅ ضبط أزرار البحث */
    .filter-form button {
        margin-top: 28px;
    }

/* ✅ تحسين تصميم شريط التنقل بين الصفحات */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

    .pagination .page-item .page-link {
        color: #2A9DF4;
        border-radius: 5px;
        margin: 0 3px;
    }

    .pagination .page-item.active .page-link {
        background-color: #2A9DF4;
        color: white;
        border-color: #2A9DF4;
    }

    .pagination .page-item .page-link:hover {
        background-color: #1C6EA4;
        color: white;
    }

.view-icon i {
    font-size: 1.3rem; /* تكبير الأيقونة */
    color: #007bff; /* لون أزرق احترافي */
    transition: transform 0.3s ease-in-out, color 0.3s;
}

.view-icon:hover i {
    transform: scale(1.3); /* تكبير عند التمرير */
    color: #57a5f9; /* لون برتقالي عند التمرير */
}

.btn-primary {
    background-color: #2A9DF4;
}

    .btn-primary:hover {
        background-color: #1C6EA4;
    }