/* Global Dark Mode Styles */
body, .navbar, .footer, .main-menu, .card {
    background-color: #1e1e1e !important; /* Dark background */
    color: #f0f0f0 !important; /* Light text color */
}

.navbar-dark, .navbar-dark .navbar-nav .nav-link, .navbar-dark .navbar-brand {
    background-color: #343a40 !important; /* Navbar background */
    color: #ffffff !important; /* Navbar text color */
}

.main-menu.menu-dark, .main-menu .navigation-main .nav-item a {
    background-color: #222 !important; /* Sidebar background */
    color: #ffffff !important; /* Sidebar text */
}

.main-menu.menu-dark .navigation-main .nav-item.active > a,
.main-menu.menu-dark .navigation-main .nav-item a:hover {
    background-color: #555 !important; /* Highlight active and hover links */
    color: #ffffff !important;
}

/* Dark Mode for Cards and Tables */
.card {
    background-color: #2c2c2c !important; /* Card background */
    border-color: #444 !important; /* Card border */
}

.card-header {
    background-color: #333 !important; /* Darker card header */
    color: #f0f0f0 !important;
}

.table {
    background-color: #2c2c2c !important; /* Table background */
    color: #f0f0f0 !important; /* Table text */
    border-color: #444 !important; /* Table border */
}

.table thead th {
    background-color: #444 !important; /* Table header background */
    color: #f0f0f0 !important; /* Table header text */
}

/* Buttons in Dark Mode */
.btn-primary {
    background-color: #0069d9 !important;
    border-color: #0062cc !important;
    color: #ffffff !important;
}

.btn-secondary {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

/* Modal Dark Mode */
.modal-content {
    background-color: #2c2c2c !important; /* Modal background */
    color: #f0f0f0 !important; /* Modal text */
}

.modal-header, .modal-footer {
    border-color: #444 !important; /* Modal borders */
    background-color: #333 !important; /* Modal header/footer background */
}

.btn-close {
    filter: invert(1); /* Close button color in dark mode */
}

/* Footer Dark Mode */
.footer {
    background-color: #222 !important; /* Footer background */
    color: #f0f0f0 !important; /* Footer text */
}




    
    .dropdown-item {
        background: transparent;
        border: none;
        padding: 0px;
    }


    .edit-btn i {
        margin-left: 15px;
        margin-right: 15px;
        padding: 0px;
    }

    .delete-btn i {
        color: red;
        margin-left:  0px;
        margin-right:  0px;
        padding: 0px;
    }

    .reorder-icon {
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
    }


    

    *{
  
        border-radius: 8px;
    }


     /* الزر الرئيسي للقائمة العائمة */
     .floating-menu-button {
        position: fixed;
        top: 1%;
        right: 23%;
        /* display: fixed; */
        background-color: #007bff;
        color: #fff;
        padding: 10px;
        border-radius: 50%;
        border: none;
        cursor: pointer;
        font-size: 15px;
        z-index: 1000;
        transition: background-color 0.3s;
    }

        .floating-menu-button:hover {
            background-color: #0056b3;
        }

    /* قائمة عائمة */
    .floating-menu {
        position: fixed;
        top: 3%;
        right: 25.6%;
        display: fixed;
        flex-direction: column;
        gap: 5px;
        z-index: 999;
    }



        .floating-menu a {
            background-color: #007bff;
            color: #fff;
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
            text-decoration: none;
            text-align: center;
            font-size: 16px;
            transition: background-color 0.3s;
        }


            .floating-menu a:hover {
                background-color: #0056b3;
            }

            /* لتمييز العناصر النشطة */
            .floating-menu a.active {
                background-color: #28a745;
            }




  /* القائمة الجانبية المغلقة */
  .main-menu {
    /* width: 3%;  */
    transition: width 0.5s ease; /* تأثير الحركة عند الفتح والإغلاق */
    position: static;
    top: 0;
    bottom: 0;
    right: 0;
    background-color: #001;
    /* z-index: 1000; */
    /* height: 100%; */
}

    /* تحديد خاصية menu-fixed */
    .main-menu.menu-fixed {
        position: fixed;
    }



 
    .main-menu.open {
        /* width: 200px;   */
         background-color: #001;
    }


    /* القائمة الجانبية عند تمرير الماوس */
    .main-menu:hover {
        /* width: 200px;   */
        background-color: #001;
    }



    .content-header  {
        padding-right: 5%;
        padding-left: 5%;
    }

 


  

    .EPYServices a {
        background-color: #007bff;
        color: white;
        padding: 5px 10px;
        border: none;
        border-radius: 5px;
        text-decoration: none;
        text-align: center;
        font-size: 16px;
        transition: background-color 0.3s;
    }

    .EPYServices a:hover {
            background-color: #0056b3;
        }

        /* لتمييز العناصر النشطة */
    .EPYServices a.active {
            background-color: #28a745;
        }


        h1,h2,h3,h4,h5,h6{
            color: #ffff;
        }
 
        
        .form-label{
            color: #ffff;
        }
 

.form-control {
    background-color: #333;  
    color: #fff;  
    border: 1px solid #f4eeee;  
}

.form-control::placeholder {
    color: #f4ecec; 
}

.form-control:focus {
    background-color: #333; 
    border-color: #f7f2f2;  
    box-shadow: #28a745;  
}



        
.select2-container--default .select2-selection--single {
    background-color: #333; 
    color: #fff; 
    border: 1px solid #555;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #fff; 
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    background-color: #555; 
    border-left: 1px solid #444; 
}
.select2-container--default .select2-dropdown {
    background-color: #333; 
    color: #fff; 
    border: 1px solid #555; 
}



 
.form-control {
    background-color: #333; 
    color: #fff;  
    border: 1px solid #f4eeee; 
}

 
.form-control::placeholder {
    color: #fff;  
    
}

 
.form-control:focus {
    background-color: #444;  
    color: #fff;  
    border-color: #777; 
    box-shadow: #fff;
}

 
.form-control .input-placeholder {  
    color: #fff;
}
.form-control::-ms-input-placeholder { 
    color: #fff;
}
.form-control::-webkit-input-placeholder {  
    color: #fff;
}
.form-control::-moz-placeholder {  
    color: #fff;
}



/* تنسيق عناصر input من النوع number في الوضع الليلي */
 input[type="number"] {
    background-color: #333; /* خلفية داكنة */
    color: #fff; /* لون النص */
    border: 1px solid #f4eeee; /* حدود */
}

  input[type="number"]::placeholder {
    color: #fff; /* لون النص التوضيحي */
}

/* عند التركيز */
 input[type="number"]:focus {
    background-color: #444; /* خلفية أغمق عند التركيز */
    color: #fff; /* تأكيد بقاء النص أبيض عند التركيز */
    border-color: #777; /* حدود داكنة عند التركيز */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); /* تأثير ظل */
}


/* تنسيق عناصر input من النوع number في الوضع الليلي */
input[type="texttext"] {
    background-color: #333; /* خلفية داكنة */
    color: #fff; /* لون النص */
    border: 1px solid #f4eeee; /* حدود */
}

  input[type="text"]::placeholder {
    color: #fff; /* لون النص التوضيحي */
}

/* عند التركيز */
 input[type="text"]:focus {
    background-color: #444; /* خلفية أغمق عند التركيز */
    color: #fff; /* تأكيد بقاء النص أبيض عند التركيز */
    border-color: #777; /* حدود داكنة عند التركيز */
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.2); /* تأثير ظل */
}


/* حقل الإدخال في الوضع الليلي */
.form-control {
    background-color: #333; /* لون خلفية داكن */
    color: #fff; /* لون النص أبيض */
    border: 1px solid #555; /* حدود داكنة */
}

/* لتعديل لون النص في الـ placeholder */
.form-control::placeholder {
    color: #fff; /* لون النص في placeholder */
}

/* عند التركيز على الحقل (focus) */
.form-control:focus {
    background-color: #444; /* لون خلفية أغمق عند التركيز */
    border-color: #fff; /* لون الحدود عند التركيز */
    box-shadow: 0 0 5px #28a745; /* ظل خفيف باللون الأخضر */
}


/* تنسيق حقل الإدخال بشكل عام */
.form-control {
    background-color: #333; /* لون خلفية داكن */
    color: #fff; /* لون النص أبيض */
    border: 1px solid #555; /* حدود داكنة */
}

/* لتعديل لون النص في الـ placeholder */
.form-control::placeholder {
    color: #fff; /* لون النص في placeholder */
}

/* عند التركيز على الحقل (focus) */
.form-control:focus {
    background-color: #444; /* لون الخلفية أغمق عند التركيز */
    border-color: #fff; /* لون الحدود عند التركيز */
    box-shadow: 0 0 5px #28a745; /* ظل خفيف باللون الأخضر */
}



/* تنسيق عام لكل حقول الإدخال */
.form-control {
    background-color: #333 !important; /* لون خلفية داكن */
    color: #fff !important; /* لون النص أبيض */
    border: 1px solid #555 !important; /* حدود داكنة */
}

/* لتعديل لون النص في الـ placeholder */
.form-control::placeholder {
    color: #ccc !important; /* لون النص في placeholder */
}

/* عند التركيز على الحقل */
.form-control:focus {
    background-color: #444 !important; /* لون الخلفية عند التركيز */
    border-color: #777 !important; /* لون الحدود عند التركيز */
    box-shadow: 0 0 5px #28a745 !important; /* ظل أخضر */
}

/* دعم المتصفحات المختلفة لألوان placeholder */
.form-control::-webkit-input-placeholder {
    color: #ccc !important;
}
.form-control::-moz-placeholder {
    color: #ccc !important;
}
/* .form-control:-ms-input-placeholder {
    color: #ccc !important;
}
.form-control::-ms-input-placeholder {
    color: #ccc !important;
} */



.card-footer {
    background-color: #2c2c2c !important; /* خلفية داكنة */
    border-top: 1px solid #444 !important; /* حدود علوية داكنة */
     
}

/* زر الحفظ */
.btn-primary {
    background-color: #007bff !important; /* لون الخلفية */
    color: #fff !important; /* لون النص أبيض */
    border: none !important; /* إزالة الحدود */
    padding: 10px 20px; /* تحسين الحشوة الداخلية للزر */
    font-size: 16px; /* حجم النص */
    border-radius: 5px; /* زوايا مستديرة */
    transition: background-color 0.3s ease; /* تأثير الانتقال لتغيير اللون */
}

.btn-primary:hover {
    background-color: #0056b3 !important; /* لون الخلفية عند تمرير الفأرة */
    color: #fff !important; /* تأكيد اللون الأبيض للنص */
}


.dropdown-menu {
    background-color: #222 !important; /* خلفية داكنة للقائمة */
    color: #f0f0f0 !important; /* لون النص */
    border: 1px solid #444 !important; /* حدود داكنة */
    border-radius: 5px; /* زوايا مستديرة للقائمة */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ظل خفيف للقائمة */
    padding: 0; /* إزالة الحشوة الداخلية */
}

/* عناصر القائمة */
.dropdown-item {
    color: #f0f0f0 !important; /* لون النص لعناصر القائمة */
    padding: 10px 15px; /* حشوة داخلية لعناصر القائمة */
    transition: background-color 0.3s; /* تأثير الانتقال لتغيير اللون */
}

.dropdown-item:hover {
    background-color: #555 !important; /* لون الخلفية عند تمرير الفأرة */
    color: #ffffff !important; /* تأكيد اللون الأبيض للنص عند التحويم */
}

/* فاصل القائمة */
.dropdown-divider {
    background-color: #444 !important; /* لون الفاصل */
    height: 1px; /* سمك الفاصل */
}




 
/* الوضع الليلي */
 .navbar {
    background-color: #343a40; /* لون خلفية ليلي */
    color: #fff; /* لون نص ليلي */
}

  .navbar .brand-text {
    color: #fff; /* لون نص العلامة التجارية ليلي */
}
  .navbar .nav-link {
    color: #f0f0f0; /* لون نص الروابط ليلي */
}

 .navbar .nav-link:hover {
    color: #fff; /* لون نص الروابط عند التحويم ليلي */
}


 
/* الوضع الليلي */
 .brand-text {
    color: #fff; /* لون نص ليلي */
}


 

/* الوضع الليلي */
  .select2-selection {
    background-color: #333; /* لون الخلفية الليلية */
    color: #fff; /* لون النص الليلي */
}

 .select2-selection__rendered {
    background-color: #555;
    color: #fff; /* لون النص في الحالة الليلية */
}

/* لتعديل السهم */
 .select2-selection__arrow b {
    background-color: #333;
    border-color: #001 transparent transparent transparent; /* تغيير لون السهم في الحالة الليلية */
}



/* تنسيق select2 للوضع الليلي */
.select2-selection.select2-selection--single {
    background-color: #333; /* خلفية داكنة */
    color: #fff; /* لون النص الفاتح */
    border: 1px solid #444; /* حدود داكنة */
    border-radius: 4px; /* زوايا دائرية */
}

.select2-selection.select2-selection--single .select2-selection__rendered {
    color: #fff; /* لون النص الفاتح */
}

.select2-selection.select2-selection--single .select2-selection__arrow {
    background-color: #444; /* خلفية السهم */
    border-left: 1px solid #666; /* حدود السهم */
}

.select2-selection.select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #fff transparent; /* مثلث أبيض */
}

.select2-selection.select2-selection--single:hover {
    border-color: #666; /* لون الحدود عند التمرير */
}

.select2-selection.select2-selection--single:focus {
    border-color: #007bff; /* لون الحدود عند التركيز */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* تأثير ظل عند التركيز */
}












 .select2-container--default .select2-selection--single {
    background-color: #333;
    color: white;
    border-color: #FFFFFF;
    border-width: 1.5px;
    border-style: solid;

}
 .select2-dropdown {
    background-color: #333;
    color: white;
    border-color: white;
    border-width: 1.5px;
    border-style: solid;
}
 .select2-container--default .select2-selection__rendered {
    color: white;
    border-color: #555;
    border-width: 1.5px;
    border-style: solid;
}
 .select2-container--disabled .select2-selection--single {
    background-color: #555; 
    color: #888;
    border-color: #FFFFFF;
}
 .select2-container--disabled .select2-dropdown {
    background-color: #555; 
    color: #888;
    border-color: #FFFFFF;
}


/* الوضع الليلي */
 .dropdown-menu.dropdown-menu-media .dropdown-menu-header h6.dropdown-header,
 .dropdown-menu.dropdown-menu-media .dropdown-menu-header .badge,
 .dropdown-menu.dropdown-menu-media .scrollable-container.media-list,
 .dropdown-menu.dropdown-menu-media .scrollable-container.media-list #lstNotification,
 .dropdown-menu.dropdown-menu-media .dropdown-menu-footer a.card-title {
    color: white;
    border-color: #FFFFFF; /* لضبط لون الحدود إذا لزم الأمر */
}




/* القائمة الجانبية المغلقة */
.main-menu {
   
    transition: width 0.5s ease; 
    position: static;
    top: 0;
 
    bottom: 0;
    right: 0;
    background-color: #001;
    z-index: 1000;
    height: 100%;
}

/* تحديد خاصية menu-fixed */
.main-menu.menu-fixed {
    position: fixed;
}

/* إخفاء النصوص في القائمة الجانبية المغلقة */
.main-menu {
    color: transparent; /* جعل لون النصوص شفاف */
}

/* عند فتح القائمة، استعادة لون النصوص */
.main-menu.open {
   
    background-color: #001;
    color: #fff; /* لون النصوص */
}

/* تحديد نصوص العناصر */
.main-menu .nav-item a {
    color: transparent; /* نصوص العناصر تكون شفافة في الحالة المغلقة */
}

/* عند فتح القائمة، استعادة لون النصوص للعناصر */
.main-menu.open .nav-item a {
    color: #fff; /* لون النصوص للعناصر عند الفتح */
}



.navigation-main li.nav-item {
    border-bottom: 2px solid #001;  
    padding-bottom: 10px;
    border-radius:0px;
 
 
    margin-bottom: 0px; 
    list-style: initial;
    background-color: #001;
  }


 div .main-menu.menu-fixed.menu-light {
   
    background-color: #001;
}

 



    
    .popup-message {
        display: none; 
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 15px;
        background-color: red;
        color: black;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        cursor: pointer;
    }




    
    .row {
        display: flex;
        justify-content: space-between; /* توزيع العناصر مع تباعد متساوي */
        align-items: center; /* محاذاة العناصر عموديًا */
    }
    
    .item {
 
        background-color: #001;
        border: 1px solid #ccc;
        text-align: center;
    }
    #previewImage {
        display: none;
        max-width: 25%;
        height: 25vh; /* تحديد الطول بـ 30% من ارتفاع الشاشة */
    }
    


    .dropdown {
        position: relative;
        display: inline-block;
    }
    .dropdown-content {
 
        position: absolute;
        background-color: #f9f9f9;
 
 
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }
 


    /* تحسين شكل وحجم info-box */
.info-box-custom {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin: 15px 0;
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.info-box-custom:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.info-box-icon {
    font-size: 36px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
}

.info-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.info-box-text {
    font-size: 1.2em;
    font-weight: 500;
    margin-bottom: 5px;
}

.info-box-number {
    font-size: 1.6em;
    font-weight: bold;
}

.bg-primary {
    background-color: #007bff !important;
}

.bg-success {
    background-color: #28a745 !important;
}

.bg-warning {
    background-color: #ffc107 !important;
}