/* ملف الألوان المخصصة - قريب من #8c18b7 */

:root {
  /* اللون الأساسي الجديد */
  --primary-color: #8c18b7;
  --primary-light: #a94bc7;
  --primary-dark: #6a0f8a;
  --primary-lighter: #c17dd4;
  --primary-darker: #4d0a63;
  
  /* ألوان متدرجة */
  --primary-gradient: linear-gradient(135deg, #8c18b7 0%, #a94bc7 100%);
  --primary-gradient-hover: linear-gradient(135deg, #6a0f8a 0%, #8c18b7 100%);
  
  /* ألوان النص */
  --text-primary: #8c18b7;
  --text-secondary: #a94bc7;
  --text-muted: #c17dd4;
  
  /* ألوان الخلفية */
  --bg-primary: #8c18b7;
  --bg-primary-light: rgba(140, 24, 183, 0.1);
  --bg-primary-lighter: rgba(140, 24, 183, 0.05);
  
  /* ألوان الحدود */
  --border-primary: #8c18b7;
  --border-primary-light: #a94bc7;
  
  /* ألوان الحالة */
  --hover-primary: #6a0f8a;
  --active-primary: #4d0a63;
}

/* تطبيق الألوان الجديدة على العناصر */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-primary:hover {
  background-color: var(--hover-primary) !important;
  border-color: var(--hover-primary) !important;
}

.navbar-brand {
  color: var(--primary-color) !important;
}

.nav-link:hover {
  color: var(--primary-color) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.border-primary {
  border-color: var(--primary-color) !important;
}

/* تأثيرات إضافية */
.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(140, 24, 183, 0.25) !important;
}

.form-control:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(140, 24, 183, 0.25) !important;
}

/* تخصيص الأزرار */
.btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* تخصيص الروابط */
a {
  color: var(--primary-color);
}

a:hover {
  color: var(--hover-primary);
}

/* تخصيص الجداول */
.table-primary {
  background-color: var(--bg-primary-light) !important;
}

.table-primary th {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* تخصيص التنبيهات */
.alert-primary {
  background-color: var(--bg-primary-light) !important;
  border-color: var(--border-primary-light) !important;
  color: var(--text-primary) !important;
}

/* تخصيص البطاقات */
.card-header-primary {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* تخصيص التقدم */
.progress-bar {
  background-color: var(--primary-color) !important;
}

/* تخصيص القوائم */
.list-group-item-primary {
  background-color: var(--bg-primary-light) !important;
  color: var(--text-primary) !important;
}

/* تخصيص الأيقونات */
.icon-primary {
  color: var(--primary-color) !important;
}

/* تخصيص الحدود */
.border-primary {
  border-color: var(--primary-color) !important;
}

/* تخصيص الظلال */
.shadow-primary {
  box-shadow: 0 0.125rem 0.25rem rgba(140, 24, 183, 0.075) !important;
}

/* تخصيص الخلفيات */
.bg-primary-light {
  background-color: var(--bg-primary-light) !important;
}

.bg-primary-lighter {
  background-color: var(--bg-primary-lighter) !important;
}

/* تخصيص النصوص */
.text-primary-light {
  color: var(--primary-light) !important;
}

.text-primary-dark {
  color: var(--primary-dark) !important;
}


/* تنسيق زر تسجيل الخروج */
.btn-logout {
  background-color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
  color: white !important;
  padding: 8px 16px !important;
  border-radius: 5px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: none !important; /* إخفاء الزر افتراضياً */
  box-shadow: none !important;
  outline: none !important;
  text-shadow: none !important;
}

/* إظهار الزر فقط عندما يكون المستخدم مسجل دخول */
.user-authenticated .btn-logout {
  display: inline-block !important;
}

.btn-logout:hover {
  background-color: var(--hover-primary) !important;
  border-color: var(--hover-primary) !important;
  color: white !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(140, 24, 183, 0.3) !important;
}

.btn-logout:active {
  background-color: var(--active-primary) !important;
  border-color: var(--active-primary) !important;
  transform: translateY(0) !important;
}

/* تنسيق زر تسجيل الخروج في القائمة المحمولة */
.menu-mobile .btn-logout {
  width: 100% !important;
  text-align: center !important;
  margin: 10px 0 !important;
  background-color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
  color: white !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  /* إضافة هذه الخصائص لضمان عدم تداخل التنسيقات */
  box-shadow: none !important;
  outline: none !important;
  text-shadow: none !important;
}

.menu-mobile .btn-logout:hover {
  background-color: var(--hover-primary) !important;
  border-color: var(--hover-primary) !important;
  color: white !important;
}

/* إضافة تنسيقات إضافية لضمان عدم تداخل الألوان */
/* تجاوز أي تنسيقات من main.css */
.main-menu .btn-logout,
.menu-mobile .btn-logout {
  /* إعادة تعريف الألوان لضمان عدم التداخل */
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

/* تجاوز أي تنسيقات للون cl11 */
.main-menu button.btn-logout,
.menu-mobile button.btn-logout {
  color: white !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* تجاوز أي تنسيقات للون cl11 في جميع الحالات */
button.btn-logout {
  color: white !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* إخفاء زر تسجيل الخروج عندما لا يكون المستخدم مسجل دخول */
.main-menu:not(.user-authenticated) .btn-logout,
.menu-mobile:not(.user-authenticated) .btn-logout {
  display: none !important;
}

/* إظهار زر تسجيل الخروج فقط عندما يكون المستخدم مسجل دخول */
.main-menu.user-authenticated .btn-logout,
.menu-mobile.user-authenticated .btn-logout {
  display: inline-block !important;
}

/* تجاوز أي تنسيقات للون cl11 من main.css */
.main-menu button.btn-logout,
.menu-mobile button.btn-logout,
button.btn-logout {
  color: white !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* تجاوز تنسيقات main.css بشكل نهائي */
.main-menu.user-authenticated button.btn-logout,
.menu-mobile.user-authenticated button.btn-logout {
  color: white !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* تجاوز جميع تنسيقات الألوان من main.css */
.main-menu.user-authenticated .btn-logout,
.menu-mobile.user-authenticated .btn-logout {
  color: white !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* تجاوز تنسيقات cl11 بشكل خاص */
.main-menu.user-authenticated .btn-logout.cl11,
.menu-mobile.user-authenticated .btn-logout.cl11 {
  color: white !important;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}