/************  LOGIN PAGE ONLY  ************/

/* أمنع السكرول فقط بصفحة اللوجين، وشيل أي padding-top مزعج */
body.login-container,
body.layout-login {
  min-height: 100vh;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}
body.login-container { padding-top: 0 !important; }

/* خلي الكونتنت بوسط الصفحة، واحجز مساحة للّغة + الفوتر حتى ما يصير تكرار عند الزوم */
body.login-container #layout-content,
.layout-login #layout-content {
  min-height: 100vh;
  padding-bottom: 56px !important; /* ارتفاع اللغة + الفوتر */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* اللغة فوق الفوتر مباشرة */
body.login-container .languageChooser,
.layout-login .languageChooser {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;                   /* عدّل الرقم حسب ما تحب */
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2147483646;
}
.languageChooser .form-group { margin-bottom: 2px !important; }

/* الفوتر الأصلي فقط (ثابت بأسفل الشاشة) */
body.login-container .footer-nav,
.layout-login .footer-nav {
  position: fixed !important;
  left: 0; right: 0; bottom: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2147483647 !important;
}
.footer-nav small { display: inline-block; line-height: 1.1; margin: 0 !important; }

/* اخفِ أي نسخة محقونة بالـ JS لو بقيت بالكاش */
#ag-powered { display: none !important; }

/************  MOBILE  ************/
@media (max-width: 768px) {
  body.login-container,
  body.layout-login {
    overflow-y: auto !important;         /* رجّع السكرول على الموبايل */
  }
  body.login-container .footer-nav,
  .layout-login .footer-nav,
  body.login-container .languageChooser,
  .layout-login .languageChooser {
    position: static !important;         /* ترتيب طبيعي على الشاشات الصغيرة */
  }
  body.login-container #layout-content,
  .layout-login #layout-content {
    min-height: auto;
    padding-bottom: 0 !important;
  }
}
.card, .panel, .media, .modal-content, .well {
  border-radius: var(--ag-radius) !important;
  border: 1px solid #e8eef4 !important;
  box-shadow: var(--ag-shadow) !important;
}
.btn, .btn-primary, .btn-default, .btn-info, .btn-success {
  border-radius: 12px !important;
  border: none !important;
  padding: 10px 16px !important;
  transition: transform .06s ease, box-shadow .2s ease !important;
}
.btn-primary{
  background: linear-gradient(180deg, var(--ag-primary), var(--ag-primary-600)) !important;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,.08) !important; }
.btn:active{ transform: translateY(0); box-shadow: none !important; }
.form-control{
  border-radius: 12px !important;
  border: 1px solid #dde6ef !important;
  box-shadow: none !important;
}
.form-control:focus{
  border-color: var(--ag-primary) !important;
  box-shadow: 0 0 0 4px rgba(31,139,215,.12) !important;
}
.input-group .input-group-addon{
  border-radius: 10px 0 0 10px !important;
  background: #f6fafc !important;
  border-color: #e5edf4 !important;
}
a{ color: var(--ag-primary); transition: color .15s ease, opacity .15s ease; }
a:hover{ color: var(--ag-primary-600); text-decoration: none; opacity: .9; }
.list-group-item, .media-list .media, table.table {
  border-radius: 10px !important;
  border-color: #eaf0f6 !important;
}
.table > thead > tr > th { background:#f7fbff; color:#3d4b5a; font-weight:600; }
.table-hover>tbody>tr:hover{ background:#f8fbfe; }
.label, .badge {
  border-radius: 10px !important;
  padding: .35em .6em !important;
  font-weight: 600 !important;
}
.label-info, .badge-info { background: var(--ag-primary) !important; }
.label-success, .badge-success { background: var(--ag-accent) !important; }
#topbar, .navbar {
  border: none !important;
  box-shadow: 0 3px 10px rgba(0,0,0,.05) !important;
}
.nav>li>a:hover { background: rgba(31,139,215,.08) !important; }
h1,h2,h3 { color: #0f1f2d; letter-spacing:.2px; }
.page-header{ border:none; padding-bottom:0; margin:10px 0 16px; }

/* Powered by */
body.login-container .footer-nav small{
  color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
  opacity:.95;
}
/* اختيار اللغة */
body.login-container .languageChooser .form-control{
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(4px);
}
/* ===== Fix invisible text on people cards buttons ===== */

/* عام للأزرار داخل بطاقات المستخدمين */
.container-people .card-footer .btn {
  color: #fff !important; /* نص أبيض واضح */
  text-shadow: none !important;
  background-image: none !important;
  border: none !important;
  font-weight: 600 !important;
}

/* زر الأزرق الأساسي (Follow / Friends / Unfollow / Following) */
.container-people .card-footer .btn.btn-primary {
  background-color: var(--ag-primary, #1f8bd7) !important;
  border: 1px solid var(--ag-primary, #1f8bd7) !important;
  color: #fff !important;
  transition: background 0.2s ease;
}
.container-people .card-footer .btn.btn-primary:hover,
.container-people .card-footer .btn.btn-primary:focus,
.container-people .card-footer .btn.btn-primary.active {
  background-color: var(--ag-primary-600, #1877ba) !important;
  color: #fff !important;
  border-color: var(--ag-primary-600, #1877ba) !important;
}

/* زر Pending أو Outline */
.container-people .card-footer .btn.btn-outline-primary,
.container-people .card-footer .btn.btn-outline-accent {
  background: #fff !important;
  color: var(--ag-primary, #1f8bd7) !important;
  border: 1px solid var(--ag-primary, #1f8bd7) !important;
}
.container-people .card-footer .btn.btn-outline-primary:hover,
.container-people .card-footer .btn.btn-outline-accent:hover {
  background: var(--ag-primary, #1f8bd7) !important;
  color: #fff !important;
}

/* زر الأخضر (+ Friends) */
.container-people .card-footer .btn.btn-accent,
.container-people .card-footer .btn.btn-success {
  background: var(--ag-accent, #2fbf71) !important;
  border: 1px solid var(--ag-accent, #2fbf71) !important;
  color: #fff !important;
}
.container-people .card-footer .btn.btn-accent:hover,
.container-people .card-footer .btn.btn-success:hover {
  background: #26a662 !important;
}

/* الأيقونات تتبع لون النص */
.container-people .card-footer .btn i,
.container-people .card-footer .btn .fa,
.container-people .card-footer .btn .glyphicon {
  color: inherit !important;
  opacity: 1 !important;
}

/* تحسين الشكل العام */
.container-people .card-footer .btn {
  border-radius: 50px !important;
  padding: 6px 16px !important;
}
/* ===== Modal buttons visibility (Confirm/Cancel) ===== */

/* ستايل عام داخل المودال */
.modal-content .modal-footer .btn {
  font-weight: 600 !important;
  text-shadow: none !important;
  background-image: none !important;
}

/* Confirm = primary */
.modal-content .modal-footer .btn.btn-primary {
  background: var(--ag-primary, #1f8bd7) !important;
  border: 1px solid var(--ag-primary, #1f8bd7) !important;
  color: #fff !important;
}
.modal-content .modal-footer .btn.btn-primary:hover,
.modal-content .modal-footer .btn.btn-primary:focus,
.modal-content .modal-footer .btn.btn-primary:active {
  background: var(--ag-primary-600, #1877ba) !important;
  border-color: var(--ag-primary-600, #1877ba) !important;
  color: #fff !important;
}

/* Cancel = light */
.modal-content .modal-footer .btn.btn-light,
.modal-content .modal-footer .btn.btn-default {
  background: #fff !important;
  border: 1px solid #e5edf4 !important;
  color: #334155 !important; /* نص غامق وواضح */
}
.modal-content .modal-footer .btn.btn-light:hover,
.modal-content .modal-footer .btn.btn-default:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

/* الأيقونات تتبع لون النص */
.modal-content .modal-footer .btn i,
.modal-content .modal-footer .btn .fa,
.modal-content .modal-footer .btn .glyphicon {
  color: inherit !important;
}
/********* Glow + Animations *********/

/* انتقالات ناعمة لمعظم العناصر */
* { transition: box-shadow .25s ease, transform .18s ease, background-color .2s ease, color .2s ease; }

/* الأزرار: هالة خفيفة عند التحويم + ضغط */
.btn {
  will-change: transform, box-shadow;
  transform: translateZ(0);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.10); }
.btn:active { transform: translateY(0); box-shadow: 0 6px 12px rgba(0,0,0,.08); }

/* زر أساسي مع Glow لوني */
.btn-primary:hover { box-shadow: 0 0 0 6px rgba(31,139,215,.18), 0 10px 22px rgba(0,0,0,.10); }
.btn-success:hover { box-shadow: 0 0 0 6px rgba(47,191,113,.18), 0 10px 22px rgba(0,0,0,.10); }

/* كروت الأشخاص: رفع خفيف + هالة */
.container-people .card {
  border-radius: 14px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.container-people .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

/* صور البروفايل: هالة دائرية عند التحويم */
.card .card-bg-image img, .media .media-left img, .img-rounded, .img-circle {
  transition: box-shadow .25s ease, transform .18s ease !important;
}
.img-circle:hover, .media .media-left img:hover {
  box-shadow: 0 0 0 5px rgba(31,139,215,.25);
  transform: translateY(-2px);
}

/* مؤشّر الحالة الأخضر: نبضة Pulse لطيفة */
.user-online, .label-success,
.badge-success { position: relative; }
.user-online::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 999px;
  border: 2px solid rgba(47,191,113,.45);
  animation: ag-pulse 1.6s ease-out infinite;
}
@keyframes ag-pulse {
  0% { transform: scale(.8); opacity: .85; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}

/* نافذة المودال: ظهور لطيف (Zoom & Fade) */
.modal.fade .modal-dialog { transform: translateY(10px) scale(.98); opacity: 0; }
.modal.in .modal-dialog { transform: translateY(0) scale(1); opacity: 1; transition: transform .22s ease, opacity .22s ease; }

/* عناصر الإدخال: توهج تركيز */
.form-control:focus {
  box-shadow: 0 0 0 4px rgba(31,139,215,.15) !important;
  border-color: #1f8bd7 !important;
}

/* شارات/Tags: بريق خفيف */
.label, .badge {
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.label:hover, .badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);

}
a:hover::after { transform: scaleX(1); }

/* شريط علوي/ترويسة: ظلّ بسيط */
#topbar, .navbar { box-shadow: 0 6px 16px rgba(0,0,0,.06) !important; }

/* زر +Friends (accent) تحسين توهج */
.container-people .card-footer .btn.btn-accent:hover,
.container-people .card-footer .btn.btn-success:hover {
  box-shadow: 0 0 0 6px rgba(47,191,113,.18), 0 10px 22px rgba(0,0,0,.10);
}

/* تأثير Glass للّوجين (لو حاببه) */
body.login-container .panel, .layout-login .panel {
  background: rgba(255,255,255,.90) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ag-ripple { mix-blend-mode: multiply; }
/* hidden state */
.ag-reveal { opacity: 0; transform: translateY(16px); }
.ag-reveal.ag-in { opacity: 1; transform: translateY(0); transition: opacity .35s ease, transform .35s ease; }
/* --- FIX: modal overlay shows but dialog hidden --- */

/* ألغِ أي إخفاء سابق */
.modal .modal-dialog {
  opacity: 1 !important;
  transform: none !important;
}

/* أنيميشن متوافقة مع Bootstrap 5 و 3 */
.modal.fade .modal-dialog {
  transition: transform .22s ease, opacity .22s ease !important;
  transform: translateY(8px);
  opacity: 0;
}
.modal.show .modal-dialog,          /* Bootstrap 5 */
.modal.in .modal-dialog {           /* Bootstrap 3/4 */
  transform: translateY(0);
  opacity: 1;
}

/* تأكد من طبقات الترتيب */
.modal { z-index: 1055 !important; }
.modal-backdrop { z-index: 1050 !important; }

/* ظلّ خفيف عند التمرير */
#topbar, .navbar { transition: box-shadow .2s ease, background-color .2s; }
body.scrolled #topbar, body.scrolled .navbar { box-shadow: 0 6px 16px rgba(0,0,0,.06); }
/* تكبير أيقونة القائمة عند الهوفر */
#topbar .nav>li>a:hover i { transform: scale(1.1); }

#ag-backtop{
  position: fixed; right: 18px; bottom: 18px; width: 42px; height: 42px;
  border-radius: 999px; background: var(--ag-primary, #1f8bd7);
  color: #fff; display: none; place-items: center; box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 9999; cursor: pointer; font-size: 18px;
}
#ag-backtop.show{display:grid;}


#contentForm_body, .ProseMirror {
  border-radius: 12px !important; border:1px solid #e7eef6 !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.04);
}
#contentForm_body:focus, .ProseMirror-focused { box-shadow: 0 0 0 4px rgba(31,139,215,.12) !important; }
.panel, .well, .sidebar .panel, .dashboard .panel {
  border-radius: 14px !important; border: 1px solid #e9eff6 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.panel .panel-heading { background:#f8fbff !important; border-bottom-color:#eaf0f6 !important; }


.wall-entry-controls .likeLink { color:#16a34a !important; }
.wall-entry-controls .commentLink { color:#2563eb !important; }
.wall-entry-controls .shareLink { color:#f59e0b !important; }
.wall-entry-controls a:hover { opacity:.85; }

.wall-entry .media img, .wall-entry .post-rich .img-responsive {
  border-radius: 12px; box-shadow: 0 8px 22px rgba(0,0,0,.08);
}
.wall-entry .media img{ mask-image: linear-gradient(to bottom, #000 88%, transparent); }


.badge-new{background:#22c55e;color:#fff;border-radius:10px;padding:.1rem .5rem;margin-left:.5rem;font-weight:700}
.badge-important{background:#ef4444;color:#fff;border-radius:10px;padding:.1rem .5rem;margin-left:.5rem;font-weight:700}

#topbar, .navbar {
  background: linear-gradient(90deg, rgba(31,139,215,.98), rgba(47,191,113,.98)) !important;
}
#topbar .nav>li>a, .navbar a { color:#fff !important; }
#topbar .nav>li>a:hover { background: rgba(255,255,255,.08) !important; }
.user-online::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid rgba(47,191,113,.45);animation:ag-pulse 1.6s ease-out infinite}
@keyframes ag-pulse{0%{transform:scale(.8);opacity:.85}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
#ag-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:99999;
background:#111827;color:#fff;padding:10px 16px;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.2);opacity:0;pointer-events:none}
#ag-toast.show{opacity:1;transition:opacity .2s}


.login-layout-background::before{
  content:""; position:fixed; inset:0; background-size:cover; background-position:center;
  filter: brightness(.9); transition: opacity .6s ease, background-image .6s ease; z-index:-1;
}

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ===== Force all primary button text visible (final override) ===== */
button.btn-primary,
a.btn-primary,
input.btn-primary,
.btn.btn-primary,
.panel-body .btn-primary,
.modal-footer .btn-primary,
.form-actions .btn-primary {
  color: #ffffff !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #ffffff !important; /* لبعض الثيمات */
}

/* Override BS5 variables forcibly */
:root,
body,
html {
  --bs-btn-color: #fff !important;
  --bs-btn-hover-color: #fff !important;
  --bs-btn-active-color: #fff !important;
  --bs-btn-disabled-color: #fff !important;
  --bs-btn-bg: var(--ag-primary, #1f8bd7) !important;
  --bs-btn-border-color: var(--ag-primary, #1f8bd7) !important;
  --bs-btn-hover-bg: #1676bd !important;
  --bs-btn-active-bg: #125d96 !important;
}

/* أيقونات جوات الأزرار */
.btn-primary i,
.btn-primary .fa,
.btn-primary .glyphicon {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* تأكيد إظهار الزر داخل الفورم والمودال */
form .btn-primary,
.modal .btn-primary {
  visibility: visible !important;
  opacity: 1 !important;
}


/* ===== FINAL FIX: button text always visible ===== */

/* 1) الغِ أي توريث سابق للّون من زرار عام */
.btn {
  color: initial !important;
  -webkit-text-fill-color: initial !important; /* سفاري/كروم */
}

/* 2) إجبار نص الـ primary أبيض بكل مكان وبكل الحالات */
button.btn-primary,
a.btn-primary,
input.btn-primary,
.btn.btn-primary,
form .btn-primary,
.panel-body .btn-primary,
.modal .btn-primary,
.form-actions .btn-primary {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}

/* hover/active/focus ما تغيّر لون النص */
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 3) الأيقونات داخل الزر تتبع لون النص */
.btn-primary i,
.btn-primary .fa,
.btn-primary .glyphicon,
.btn-primary .hh-icon {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}


/* ===== Force fix for Save Profile button ===== */
button.btn.btn-primary,
.btn.btn-primary {
  background: #1a8cff !important;           /* لون أزرق ثابت */
  background-image: none !important;        /* شيل التدرج */
  border-color: #1a8cff !important;         /* نفس اللون */
  color: #fff !important;                   /* النص أبيض */
  text-shadow: none !important;
  -webkit-text-fill-color: #fff !important; /* متصفحات WebKit */
  opacity: 1 !important;
}

/* Hover ولما يضغط عليه */
button.btn.btn-primary:hover,
.btn.btn-primary:hover,
button.btn.btn-primary:focus,
.btn.btn-primary:focus,
button.btn.btn-primary:active,
.btn.btn-primary.active {
  background: #0066cc !important;           /* أزرق أغمق شوي */
  border-color: #0066cc !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* الأيقونات داخل الزر */
.btn-primary i,
.btn-primary .fa,
.btn-primary .glyphicon {
  color: #fff !important;
  opacity: 1 !important;
}

/* جلو ناعم للأزرار الأساسية */
.btn-primary {
  box-shadow: 0 0 12px rgba(26, 140, 255, 0.5);
  transition: all 0.3s ease-in-out;
}

/* لما تمرّ الماوس */
.btn-primary:hover {
  box-shadow: 0 0 20px rgba(26, 140, 255, 0.8);
  transform: scale(1.04);
}

/* ==========================================================
   ✨ Al Ghaith Modern Blue-Green Glow Theme (by Ahmad Samsam)
   ========================================================== */

/* 🔘 أزرار رئيسية (مزيج أزرق-أخضر متدرّج) */
.btn-primary {
  background: linear-gradient(135deg, #1a8cff, #00c08b) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 0 15px rgba(26, 140, 255, 0.4);
  transition: all 0.35s ease-in-out !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(135deg, #00b6e6, #00d49c) !important;
  box-shadow: 0 0 25px rgba(0, 190, 150, 0.6);
  transform: translateY(-2px) scale(1.04);
  color: #fff !important;
}

/* ✅ أزرار ثانوية / outline بنفس الأسلوب */
.btn-outline-primary {
  border: 2px solid #00bfa5 !important;
  background: transparent !important;
  color: #00bfa5 !important;
  border-radius: 8px !important;
  transition: all 0.35s ease-in-out !important;
}
.btn-outline-primary:hover {
  background: linear-gradient(135deg, #1a8cff, #00c08b) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(0, 200, 160, 0.6);
}

/* 💎 كروت (بطاقات المستخدمين والبوستات) */
.card {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease-in-out;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 200, 160, 0.25);
}

/* 🌤️ خلفية البروفايل (cover glow) */
.profile-header {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0, 200, 160, 0.35);
  transition: all 0.4s ease-in-out;
}
.profile-header:hover {
  box-shadow: 0 0 40px rgba(26, 140, 255, 0.45);
  transform: scale(1.01);
}

/* 💬 مودالات (Dialogs / Confirm windows) */
.modal-content {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 0 35px rgba(26, 140, 255, 0.35);
  animation: agModalFade 0.4s ease-out;
}
@keyframes agModalFade {
  0% { transform: translateY(-25px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* 🖱️ تأثيرات عامة على الروابط */
a:hover, .link:hover {
  color: #00bfa5 !important;
  text-decoration: none !important;
  transition: color 0.2s ease-in-out;
}

/* 🌈 جلو ناعم تحت الفوتر */
.footer-nav {
  text-shadow: 0 0 8px rgba(0, 200, 160, 0.4);
  color: #e8f8f5 !important;
}

/* ✨ انتقال ناعم على كل العناصر */
* {
  transition: all 0.2s ease-in-out;
}


/* لمعة تمر عبر الزر */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
  transform: skewX(-25deg);
  transition: left 0.75s ease;
}
.btn-primary:hover::after {
  left: 125%;
}

<button class="btn btn-primary glow-pulse">Save</button>

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(0,200,160,0.12), transparent 120px);
  pointer-events: none;
  z-index: 1;
  transition: background .2s ease-out;
}
body:hover::before {
  background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(26,140,255,0.12), transparent 120px);
}

.fa, .glyphicon {
  transition: all .3s ease;
}
.fa:hover, .glyphicon:hover {
  color: #00d49c !important;
  filter: drop-shadow(0 0 8px rgba(0,200,160,0.5));
  transform: scale(1.15);
}
.card.active,
.card:focus-within {
  box-shadow: 0 0 25px rgba(0,200,160,0.35), 0 4px 10px rgba(0,0,0,0.1);
  transform: scale(1.01);
}

.loader {
  border: 4px solid rgba(0,0,0,0.1);
  border-left-color: #1a8cff;
  border-right-color: #00c08b;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  animation: spin 0.8s linear infinite;
  margin: auto;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.card.visible {
  opacity: 1;
  transform: translateY(0);
}

.ag-gradient-card{
  position: relative; border-radius: 14px; background: #fff;
}
.ag-gradient-card::before{
  content:""; position:absolute; inset:-1px; border-radius:16px; z-index:-1;
  background: linear-gradient(135deg,#1a8cff,#00c08b);
}


.ag-tag{
  display:inline-block; padding:.25rem .55rem; border-radius:999px;
  background:rgba(0,200,160,.1); color:#0e8f6f; font-weight:600; margin:.15rem .25rem 0 0;
  border:1px solid rgba(0,200,160,.25);
}
.ag-tag.blue{ background:rgba(26,140,255,.08); color:#186bb8; border-color:rgba(26,140,255,.25); }


:focus { outline: none !important; }
a:focus, button:focus, .btn:focus, .form-control:focus {
  box-shadow: 0 0 0 4px rgba(26,140,255,.18) !important;
  border-color: #1a8cff !important;
}

.ag-tip{ position:relative; cursor:help; }
.ag-tip:hover::after{
  content: attr(data-tip);
  position:absolute; left:50%; transform:translateX(-50%); bottom:140%;
  background:#0f172a; color:#fff; padding:.35rem .5rem; border-radius:8px;
  white-space:nowrap; font-size:12px; box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.ag-tip:hover::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:130%;
  border:7px solid transparent; border-top-color:#0f172a;
}
.table-hover>tbody>tr:hover{ background: linear-gradient(90deg, rgba(26,140,255,.06), rgba(0,200,160,.06)); }


.is-valid{ border-color:#22c55e !important; box-shadow:0 0 0 4px rgba(34,197,94,.15) !important; }
.is-invalid{ border-color:#ef4444 !important; box-shadow:0 0 0 4px rgba(239,68,68,.15) !important; }


.ag-bell-pulse{ position:relative; }
.ag-bell-pulse::after{
  content:""; position:absolute; inset:-6px; border-radius:999px;
  border:2px solid rgba(26,140,255,.35); animation:ag-pulse 1.9s ease-out infinite;
}
@keyframes ag-pulse{0%{transform:scale(.82);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}


.ag-bell-pulse{ position:relative; }
.ag-bell-pulse::after{
  content:""; position:absolute; inset:-6px; border-radius:999px;
  border:2px solid rgba(26,140,255,.35); animation:ag-pulse 1.9s ease-out infinite;
}
@keyframes ag-pulse{0%{transform:scale(.82);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}


.ag-skeleton{ position:relative; overflow:hidden; background:#eef3f9; border-radius:10px; }
.ag-skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:ag-shimmer 1.1s linear infinite;
}
@keyframes ag-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}


.ag-skeleton{ position:relative; overflow:hidden; background:#eef3f9; border-radius:10px; }
.ag-skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:ag-shimmer 1.1s linear infinite;
}
@keyframes ag-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}


.ag-switch{ appearance:none; width:48px; height:28px; background:#e5edf4; border-radius:999px; position:relative; outline:none; cursor:pointer; transition:.2s; }
.ag-switch::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; background:#fff; border-radius:999px; transition:.2s; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.ag-switch:checked{ background:linear-gradient(135deg,#1a8cff,#00c08b); }
.ag-switch:checked::after{ left:23px; }

.ag-ribbon{ position:absolute; top:10px; right:-10px; transform:rotate(45deg); background:linear-gradient(135deg,#1a8cff,#00c08b); color:#fff; padding:.25rem .8rem; font-weight:700; box-shadow:0 6px 14px rgba(0,0,0,.15); }

/* hotfix: أظهر كروت People دائماً */
.container-people .card {
  opacity: 1 !important;
  transform: none !important;
}

/* يطبق فقط على العناصر اللي بنضيف لها ag-reveal */
.ag-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s ease;
}
.ag-reveal.ag-in {
  opacity: 1;
  transform: translateY(0);
}

/* لا تستخدم هذه عالمياً */
.card { opacity: 0; transform: translateY(20px); ... }
.card.visible { ... }


/* أنيميشن مخصّصة فقط لمن نضيف لهم الكلاس */
.ag-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .35s ease, transform .35s ease;
}
.ag-reveal.ag-in {
  opacity: 1;
  transform: translateY(0);
}

/* فfallback أمان: لو JS ما اشتغل لأي سبب، اظهر كروت People/Spaces دائماً */
.container-people .card,
.container-spaces .card {
  opacity: 1 !important;
  transform: none !important;
}

/* ===== Marketplace fixes (browse/updates) ===== */
/* استهدف صفحة الماركت بديّات: أغلب صفحات HumHub بتحط اسم الموديل على body */
body[class*="marketplace"] .panel,
body[class*="marketplace"] .panel .panel-body,
body[class*="marketplace"] .list-group-item {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* حدود أنظف لعناصر التحديثات */
body[class*="marketplace"] .list-group-item + .list-group-item {
  border-top: 1px solid #e9eff6 !important;
}

/* العناوين والأزرار تبقى مقروءة */
body[class*="marketplace"] .panel .panel-heading {
  background: #f8fbff !important;
  color: #0f172a !important;
  border-bottom: 1px solid #e9eff6 !important;
}
body[class*="marketplace"] .btn,
body[class*="marketplace"] .label,
body[class*="marketplace"] .badge {
  color: inherit;
}

/* لو فيه أي طبقة غامقة/سكِلِتون فوق التحديثات */
body[class*="marketplace"] .ag-skeleton::after { display: none !important; }

/* ظلّ بسيط للكرت بدل الخلفية الكحلية */
body[class*="marketplace"] .panel {
  box-shadow: 0 8px 22px rgba(0,0,0,.06) !important;
  border: 1px solid #e9eff6 !important;
  border-radius: 12px !important;
}

/* ===== Marketplace Updates – Light & Clean ===== */

/* الحاوية الكبيرة */
.container-module-updates{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e9eff6 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.06) !important;
  padding: 18px 16px !important;
}

/* عنوان القسم وزر Update all */
.container-module-updates .modules-type{
  color: #0f172a !important;
  margin: 8px 0 16px;
}
.container-module-updates .btn.btn-primary{
  /* الأزرق-أخضر المتدرّج */
  background: linear-gradient(135deg,#1a8cff,#00c08b) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 0 15px rgba(26,140,255,.25);
}
.container-module-updates .btn.btn-primary:hover{
  background: linear-gradient(135deg,#00b6e6,#00d49c) !important;
  color: #fff !important;
}

/* بطاقات التحديث نفسها */
.container-module-updates .card-module .card-panel{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e6eef6 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
}

/* عنوان البطاقة والنص */
.container-module-updates .card-module .card-title{
  font-weight: 700;
  color: #0f172a !important;
}
.container-module-updates .card-module .card-body{
  color: #0f172a !important;
}

/* أزرار البطاقة (Update / Changelog) */
.container-module-updates .btn-light,
.container-module-updates .btn-outline-light{
  background: #fff !important;
  color: #334155 !important;
  border: 1px solid #e5edf4 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.container-module-updates .btn-outline-light:hover,
.container-module-updates .btn-light:hover{
  background: linear-gradient(135deg,#1a8cff,#00c08b) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* الروابط الزرقاء داخل البطاقة (link-primary) */
.container-module-updates .link-primary{
  color: #186bb8 !important;
}
.container-module-updates .link-primary:hover{
  color: #00bfa5 !important;
}

/* إزالة أي خلفية غامقة مرسومة على صف البطاقات */
.container-module-updates .row.cards{
  background: transparent !important;
}
/* ===== Marketplace > Available Updates: force light card-panel ===== */

/* الكرت نفسه */
.container-module-updates .cards .card.card-module .card-panel {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #e6eef6 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
}

/* أقسام الكرت الداخلية (لو الهيدر/البودي/الفوتر وارثين خلفية غامقة) */
.container-module-updates .cards .card.card-module .card-header,
.container-module-updates .cards .card.card-module .card-body,
.container-module-updates .cards .card.card-module .card-footer {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #e6eef6 !important;
}

/* عنوان البطاقة */
.container-module-updates .cards .card.card-module .card-title {
  color: #0f172a !important;
  font-weight: 700;
}

/* أزرار البطاقة (Update / Changelog) */
.container-module-updates .cards .card.card-module .btn-light,
.container-module-updates .cards .card.card-module .btn-outline-light {
  background: #fff !important;
  color: #334155 !important;
  border: 1px solid #e5edf4 !important;
}
.container-module-updates .cards .card.card-module .btn-light:hover,
.container-module-updates .cards .card.card-module .btn-outline-light:hover {
  background: linear-gradient(135deg,#1a8cff,#00c08b) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* في حال الكرت نفسه عنده خلفية مفروضة */
.container-module-updates .cards .card.card-module {
  background: transparent !important;
}

/* ==== Marketplace cards — show again & keep light style ==== */

/* صف البطاقات (كل القوائم) */
.container-module-updates .row.cards,
.container-cards .row.cards {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

/* البطاقة نفسها */
.container-module-updates .card,
.container-cards .card,
.cards .card {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* لو حصل أي إخفاء على مستوى العناصر الداخلية */
.container-module-updates .card * ,
.container-cards .card * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* الصندوق الداخلي للبطاقة */
.container-module-updates .card-panel,
.container-cards .card .card-panel {
  background: #fff !important;
  color: inherit !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
  border-radius: 12px !important;
}

/* مكوّنات البطاقة */
.container-module-updates .card .card-header,
.container-module-updates .card .card-body,
.container-module-updates .card .card-footer,
.container-cards .card .card-header,
.container-cards .card .card-body,
.container-cards .card .card-footer {
  display: block !important;
}

/* حجم البطاقة الافتراضي */
.container-module-updates .card.card-module,
.container-cards .card.card-module,
.cards .card.card-module {
  width: 260px !important;
}

/* إزالة أي overflow يخفي المحتوى */
.container-module-updates .card-panel,
.container-cards .card-panel {
  overflow: visible !important;
}

/* تأكد من إعادة اللون للأزرار والتسميات */
.container-module-updates .btn,
.container-cards .btn {
  color: #111 !important;
}

/* لا تغيّم (opacity) البطاقات عند التحريك */
.container-module-updates .card,
.container-cards .card {
  transition: transform .18s ease-in-out !important;
}


.container-module-updates .row.cards,
.container-cards .row.cards {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.container-module-updates .card,
.container-cards .card {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.container-module-updates .card-panel,
.container-cards .card-panel {
  background: #fff !important;
  color: inherit !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
  border-radius: 12px !important;
  overflow: visible !important;
}

/* Marketplace cards — show and keep light styling */
.container-module-updates .row.cards,
.container-cards .row.cards {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.container-module-updates .card,
.container-cards .card {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.container-module-updates .card-panel,
.container-cards .card-panel {
  background: #fff !important;
  color: inherit !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.06) !important;
  border-radius: 12px !important;
  overflow: visible !important;
}

/* إصلاح لون Powered by حتى لو الفوتر فارض color: #fff !important */
.text-center.footer-nav small,
.footer-nav small,
.footer-nav,
.text-center.footer-nav {
  color: inherit !important;
}

/* ألوان واضحة للنصين */
.ag-powered-en {
  color: #0078d7 !important; /* أزرق واضح */
  font-weight: 600;
  font-size: 13px;
}
.ag-powered-ar {
  color: #009879 !important; /* أخضر مريح */
  font-weight: 500;
  font-size: 13px;
}

/* توحيد ارتفاع الكروت بصفحة People بدون قصّ من تحت */
.card.card-people {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 420px !important; /* عدّل الرقم حسب الطول المناسب */
  overflow: visible !important;
}

/* لضبط محتوى الكرت بشكل متناسق */
.card.card-people .card-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card.card-people .card-body {
  flex-grow: 1;
}

.card.card-people .card-footer {
  margin-top: auto;
}

/* صور البروفايل */
.card.card-people .card-bg-image {
  height: 120px;
  object-fit: cover;
}

/* مظهر ناعم */
.card.card-people {
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
.card.card-people:hover {
  transform: translateY(-4px);
}
.card {
  border-radius: 12px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  transition: transform .2s ease;
}
.card:hover {
  transform: translateY(-5px);
}
/* ========= 1) نص الأزرار داخل قوائم الهيدر (dropdown / popover) ========= */
.topbar .dropdown-menu .btn,
.topbar .popover .btn,
.dropdown-menu .btn,
.popover .btn {
  color: #222 !important;           /* نص غامق وواضح */
  font-weight: 600;
}

/* الأزرار المعطّلة تكون مقروءة أيضاً */
.dropdown-menu .btn:disabled,
.dropdown-menu .btn.disabled,
.popover .btn:disabled,
.popover .btn.disabled {
  color: #666 !important;
  background: #f5f5f5 !important;
  border-color: #e6e6e6 !important;
}

/* ========= 2) تحسين حقل البحث ضمن مودال البحث ========= */
/* لو المودال اسمه #globalSearchModal (غالِباً)، وإلا خليه عام على أي مودال */
#globalSearchModal .modal-content,
.topbar .modal .modal-content {
  border-radius: 10px;
}

#globalSearchModal .form-control,
.topbar .modal .form-control,
.topbar .modal input[type="search"] {
  padding-left: 42px;               /* مساحة لأيقونة العدسة */
  border-radius: 10px;
  border: 1px solid #ced4da;
  box-shadow: none !important;
}

/* فوكس أنعم وأوضح */
#globalSearchModal .form-control:focus,
.topbar .modal .form-control:focus,
.topbar .modal input[type="search"]:focus {
  border-color: #2fc1a4;
  box-shadow: 0 0 0 .22rem rgba(47,193,164,.25) !important;
  outline: none;
}

/* لضبط أيقونة العدسة داخل الحقل */
#globalSearchModal .modal-body .input-group,
.topbar .modal .modal-body .input-group,
#globalSearchModal .modal-body,
.topbar .modal .modal-body {
  position: relative;
}

/* الأيقونة نفسها (سواء كانت fa-search أو أي span/svg) */
#globalSearchModal .modal-body .fa-search,
.topbar .modal .modal-body .fa-search,
#globalSearchModal .modal-body .search-icon,
.topbar .modal .modal-body .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #7a8899;
  pointer-events: none;
}

/* لون الـ placeholder */
#globalSearchModal input::placeholder,
.topbar .modal input::placeholder {
  color: #9aa3ab;
  opacity: 1;
}

/* ========= 3) تحسين زر “Show all messages” (لو كان ضمن dropdown الرسائل) ========= */
.topbar .dropdown-menu .btn.btn-light,
.topbar .dropdown-menu .btn.btn-default {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  color: #222 !important;
  border-radius: 8px;
}
.topbar .dropdown-menu .btn.btn-light:hover,
.topbar .dropdown-menu .btn.btn-default:hover {
  background: #f7f7f7;
  border-color: #dcdcdc;
}
/* =========================
   (A) أزرار داخل قوائم الهيدر/الـpopover (مثل Show all messages)
   =========================*/
.topbar .dropdown-menu .btn,
.navbar .dropdown-menu .btn,
.header .dropdown-menu .btn,
.dropdown-menu .btn {
  color: #222 !important;
  background: #fff !important;
  border: 1px solid #dcdcdc !important;
  font-weight: 600;
  border-radius: 8px;
}
.topbar .dropdown-menu .btn:hover,
.navbar .dropdown-menu .btn:hover,
.header .dropdown-menu .btn:hover,
.dropdown-menu .btn:hover {
  background: #f7f7f7 !important;
  border-color: #d0d0d0 !important;
}
.dropdown-menu .btn:disabled,
.dropdown-menu .btn.disabled {
  color: #666 !important;
  background: #f5f5f5 !important;
  border-color: #e6e6e6 !important;
  opacity: 1 !important;
}

/* ======== Topbar Search (fix) ======== */

/* اجعل الحاوية مرجعية وضعية */
#topbar .dropdown-search .dropdown-search-form {
  position: relative !important;
}

/* اخفِ زرّ الأيقونة الصغير الذي يظهر كمربع */
#topbar .dropdown-search .dropdown-search-form .dropdown-search-button.btn-icon-only {
  display: none !important;
}

/* نسّق الحقل نفسه */
#topbar .dropdown-search .dropdown-search-form input.form-control,
#topbar .dropdown-search .dropdown-search-form .dropdown-search-keyword.form-control {
  background: #fff !important;
  color: var(--hh-font-color-main, #222) !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  border-radius: 12px !important;
  padding-left: 40px !important;         /* مساحة لأيقونة العدسة */
  box-shadow: none !important;
  outline: 0 !important;
}

/* أثر الفوكس بشكل أنيق وواضح */
#topbar .dropdown-search .dropdown-search-form input.form-control:focus,
#topbar .dropdown-search .dropdown-search-form .dropdown-search-keyword.form-control:focus {
  border-color: var(--ag-primary, #0fb1c9) !important;
  box-shadow: 0 0 0 3px rgba(15,177,201,.15) !important;
}

/* أضف أيقونة العدسة داخل الحقل (FontAwesome) */
#topbar .dropdown-search .dropdown-search-form::before {
  content: "\f002"; /* fa-search */
  font: normal 900 16px/1 "Font Awesome 5 Free", "FontAwesome";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hh-font-color-soft, #8998a7);
  pointer-events: none;
}
/* ============ Topbar Search unified fix ============ */

/* خلي الحاوية مرجعية للتموضع */
#topbar .dropdown-search .dropdown-search-form {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* كبر خانة البحث بشكل أنيق */
#topbar .dropdown-search .dropdown-search-form input.dropdown-search-keyword.form-control {
  width: 320px !important;
  height: 42px !important;
  padding-left: 40px !important; /* مساحة للأيقونة */
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 12px !important;
  color: #222 !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: all .2s ease !important;
}

/* تأثير عند الفوكس */
#topbar .dropdown-search .dropdown-search-form input.dropdown-search-keyword.form-control:focus {
  border-color: #0fb1c9 !important;
  box-shadow: 0 0 0 3px rgba(15,177,201,.15) !important;
}

/* ضع أيقونة البحث داخل الحقل */
#topbar .dropdown-search .dropdown-search-form::before {
  content: "\f002"; /* FontAwesome search icon */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 14px;
  color: #888;
  font-size: 15px;
  pointer-events: none;
}

/* اخفي الزرّ المنفصل القديم */
#topbar .dropdown-search .dropdown-search-button.btn-icon-only {
  display: none !important;
}
/* =============== Topbar Search — final fix =============== */

/* الحاوية مرجعية لوضع الأيقونة داخلها */
#topbar .dropdown-search .dropdown-search-form {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

/* اخفِ أي زرّ للبحث داخل الفورم مهما كان اسمه/كلاسه */
#topbar .dropdown-search .dropdown-search-form .dropdown-search-button,
#topbar .dropdown-search .dropdown-search-form > .btn,
#topbar .dropdown-search .dropdown-search-form > button,
#topbar .dropdown-search .dropdown-search-form .btn.btn-light.btn-icon-only {
  display: none !important;
}

/* نمط حقل البحث نفسه */
#topbar .dropdown-search .dropdown-search-form input.dropdown-search-keyword.form-control {
  width: 340px !important;
  height: 42px !important;
  padding-left: 48px !important;   /* مساحة للأيقونة */
  border: 1px solid rgba(0,0,0,0.15) !important;
  border-radius: 12px !important;
  color: #222 !important;
  background: #fff !important;
  box-shadow: none !important;
  transition: all .2s ease !important;
}

/* تأثير عند الفوكس */
#topbar .dropdown-search .dropdown-search-form
input.dropdown-search-keyword.form-control:focus {
  border-color: #0fb1c9 !important;
  box-shadow: 0 0 0 3px rgba(15,177,201,.15) !important;
}

/* أيقونة البحث داخل الحقل بدلاً من الزر */
#topbar .dropdown-search .dropdown-search-form::before {
  content: "\f002";                 /* Font Awesome search */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #888;
  font-size: 15px;
  pointer-events: none;
}

/* ---------- Space chooser: ensure subtitle/description is visible ---------- */

/* السطر الأساسي داخل العنصر */
#top-menu-nav .dropdown-menu .dropdown-item,
#space-menu .dropdown-menu .dropdown-item {
  color: var(--hh-text-color, #1f2937) !important;   /* النص الأساسي */
}

/* الوصف الصغير داخل .flex-grow-1 (السطر الثاني) */
#top-menu-nav .dropdown-menu .dropdown-item .flex-grow-1 small,
#space-menu .dropdown-menu .dropdown-item .flex-grow-1 small,
#top-menu-nav .dropdown-menu .dropdown-item .flex-grow-1 > div:last-child,
#space-menu .dropdown-menu .dropdown-item .flex-grow-1 > div:last-child {
  color: var(--hh-text-color-contrast, #6b7280) !important;  /* رمادي واضح */
  opacity: .95 !important;
}

/* عند المرور بالماوس حافظ على الألوان ولا ترجع للأبيض */
#top-menu-nav .dropdown-menu .dropdown-item:hover,
#space-menu .dropdown-menu .dropdown-item:hover {
  color: var(--hh-text-color, #1f2937) !important;
}
#top-menu-nav .dropdown-menu .dropdown-item:hover .flex-grow-1 small,
#space-menu .dropdown-menu .dropdown-item:hover .flex-grow-1 small {
  color: var(--hh-text-color-contrast, #6b7280) !important;
}
/* ===== إصلاح زر البحث العلوي + مربع الإدخال ===== */

/* مظهر عام لمربع البحث */
#top-menu-nav .dropdown-search-form input.form-control,
.dropdown-search-form input.form-control {
  padding-left: 40px !important;  /* فسح مجال للأيقونة */
  border: 1px solid #c4d4d4 !important;
  border-radius: 12px !important;
  color: #1a1a1a !important;  /* لون النص واضح */
  background: #ffffff !important;
}

/* الأيقونة (الزر) على اليمين */
.dropdown-search-form .btn.dropdown-search-button {
  background: linear-gradient(135deg, #00bfa6, #00a0d1) !important;
  border: none !important;
  color: #fff !important;
  transition: all 0.25s ease;
  border-radius: 8px !important;
}

/* لما يكون الماوس فوق الزر */
.dropdown-search-form .btn.dropdown-search-button:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
}

/* لما يكون المربع في حالة تحديد */
.dropdown-search-form input.form-control:focus {
  border-color: #00a0d1 !important;
  box-shadow: 0 0 4px rgba(0,160,209,0.4) !important;
  background: #fff !important;
}

/* تأكيد أن النص داخل الحقل ما يتغطى */
.dropdown-search-form {
  position: relative;
}
.dropdown-search-form input.form-control {
  width: calc(100% - 48px) !important; /* فسحة للزر */
}
/* ===== مظهر خانة البحث في الأعلى ===== */
.dropdown-search-form {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.dropdown-search-form input.form-control {
  flex: 1 !important;
  border: 1px solid #cdd9df !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  color: #222 !important;
  background-color: #fff !important;
  transition: all 0.25s ease;
}

/* لما المستخدم يضغط على مربع البحث */
.dropdown-search-form input.form-control:focus {
  border-color: #00a0d1 !important;
  box-shadow: 0 0 4px rgba(0,160,209,0.3) !important;
}

/* الزر على اليمين */
.dropdown-search-form .btn.dropdown-search-button {
  background: linear-gradient(135deg, #00bfa6, #009fd1) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease;
}

/* تأثير hover على الزر */
.dropdown-search-form .btn.dropdown-search-button:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
}

/* إصلاح الحدود عند الجمع بين الزر والخانة */
.dropdown-search-form input.form-control {
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
}

/* تعديل صندوق البحث العلوي بحيث يكون الزر على اليمين خارج البوكس */
.dropdown-search-form {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px;
}

/* تكبير حقل البحث وتحديد شكل الحواف */
.dropdown-search-form input.dropdown-search-keyword {
  flex: 1;
  border: 1px solid #00b8b0;
  border-radius: 8px;
  padding: 6px 10px;
  color: #222;
  background-color: #fff;
  box-shadow: 0 0 3px rgba(0, 184, 176, 0.2);
}

/* الزر نفسه يكون خارج البوكس */
.dropdown-search-form .dropdown-search-button {
  background: linear-gradient(135deg, #00b8b0, #007b83);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  transition: 0.2s;
}

.dropdown-search-form .dropdown-search-button:hover {
  background: linear-gradient(135deg, #00a89e, #006f76);
}
/* جعل زر البحث في الهيدر شفاف بدل الأبيض */
#search-menu-nav .nav-link.dropdown-toggle {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* إزالة أي مساحة بيضاء إضافية حول الأيقونة */
#search-menu-nav .nav-link.dropdown-toggle i,
#search-menu-nav .nav-link.dropdown-toggle svg {
  background: transparent !important;
  color: #fff !important; /* خلي الأيقونة بيضاء لتبان فوق التدرج */
  opacity: 0.85;
  transition: 0.2s ease;
}

/* تأثير خفيف عند المرور */
#search-menu-nav .nav-link.dropdown-toggle:hover i,
#search-menu-nav .nav-link.dropdown-toggle:hover svg {
  opacity: 1;
  transform: scale(1.05);
}

/* ===========================
   تنسيق الأزرار العلوية كلها
   =========================== */
#top-menu-nav .nav > li > a,
#top-menu-nav .nav > li > button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: 0.2s ease-in-out;
}

/* الأيقونات داخل الأزرار */
#top-menu-nav .nav > li > a i,
#top-menu-nav .nav > li > button i,
#top-menu-nav .nav > li > a svg,
#top-menu-nav .nav > li > button svg {
  color: #fff !important;
  opacity: 0.85;
  background: transparent !important;
  border-radius: 50%;
  padding: 6px;
  transition: 0.2s ease-in-out;
}

/* عند المرور بالمؤشر */
#top-menu-nav .nav > li > a:hover i,
#top-menu-nav .nav > li > button:hover i,
#top-menu-nav .nav > li > a:hover svg,
#top-menu-nav .nav > li > button:hover svg {
  opacity: 1;
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.1);
}

/* عند الضغط */
#top-menu-nav .nav > li > a:active i,
#top-menu-nav .nav > li > button:active i,
#top-menu-nav .nav > li > a:active svg,
#top-menu-nav .nav > li > button:active svg {
  background: rgba(255, 255, 255, 0.15);
  transform: scale(0.96);
}

/* ======= أزرار الأيقونات في الشريط العلوي (جرس/رسائل/... ) ======= */
/* الزر نفسه: رابط أو زر داخل عناصر قائمة الشريط العلوي */
#top-menu-nav .nav > li > a.btn,
#top-menu-nav .nav > li > button.btn,
#top-menu-nav .nav > li > a.btn-light,
#top-menu-nav .nav > li > button.btn-light {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* الأيقونة داخل الزر */
#top-menu-nav .nav > li > a i,
#top-menu-nav .nav > li > button i {
  color: #fff !important;
  opacity: .9;
  transition: .2s ease-in-out;
  background: transparent !important;
}

/* تأثير هوفر خفيف بدون خلفية مزعجة */
#top-menu-nav .nav > li > a:hover,
#top-menu-nav .nav > li > button:hover,
#top-menu-nav .nav > li > a:focus,
#top-menu-nav .nav > li > button:focus {
  background: rgba(255,255,255,.10) !important; /* أو اجعلها transparent لو بدك إلغاء كامل */
  box-shadow: none !important;
}

/* ======= زر الترس الصغير داخل النافذة المنسدلة (Notifications / Messages) ======= */
/* أحياناً يأتي كـ .btn-light أو .btn-default داخل قائمة dropdown */
.dropdown-menu .btn.btn-light,
.dropdown-menu .btn.btn-default,
.popover .btn.btn-light,
.popover .btn.btn-default {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* لو عنده حالة :hover تغيّر الخلفية، نخليها خفيفة جداً أو شفافة */
.dropdown-menu .btn.btn-light:hover,
.dropdown-menu .btn.btn-default:hover,
.popover .btn.btn-light:hover,
.popover .btn.btn-default:hover {
  background: rgba(255,255,255,.08) !important; /* أو transparent */
  box-shadow: none !important;
}

/* أزرار داخل الـ dropdown header إن وُجدت */
.dropdown-menu .dropdown-header .btn,
.dropdown-menu .panel-heading .btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* ======== زر البحث، الإشعارات، الرسائل (شفافية + تأثير عند التمرير) ======== */
.topbar .nav > li > a,
#icon-notifications,
#icon-messages,
#icon-search {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* عند تمرير الماوس */
.topbar .nav > li > a:hover,
#icon-notifications:hover,
#icon-messages:hover,
#icon-search:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  transform: scale(1.08);
}

/* عند الضغط */
.topbar .nav > li > a:active,
#icon-notifications:active,
#icon-messages:active,
#icon-search:active {
  background-color: rgba(255, 255, 255, 0.25) !important;
  transform: scale(0.96);
}

/* تأكيد أن الأيقونات نفسها واضحة */
.topbar .nav > li > a i,
#icon-notifications i,
#icon-messages i,
#icon-search i {
  color: #ffffff !important;
  font-size: 18px;
}
/* 1) عطّل أي قصّ/ارتفاع ثابت أو تدرّج */
.showMore,
[data-ui-show-more],
.show-more,
[data-show-more],
.hh-show-more {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  mask-image: none !important;
}

/* 2) أخفِ زر "Read more" وأي تدرّج تحت */
.showMore .read-more,
[data-ui-show-more] .read-more,
.show-more .read-more,
.showMore .gradient,
[data-ui-show-more] .gradient,
.show-more .gradient,
.showMore .fade,
[data-ui-show-more] .fade,
.show-more .fade {
  display: none !important;
}

/* 3) أحياناً المحتوى الفعلي يكون داخل لفافة داخليّة */
.showMore .show-more-content,
[data-ui-show-more] .show-more-content,
.showMore .content,
[data-ui-show-more] .content {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* ====== Topbar user dropdown – modern look ====== */

/* الصندوق الأساسي */
#topbar .dropdown-menu {
  --ag-bg: rgba(255, 255, 255, 0.96);
  --ag-item-hover: rgba(0, 179, 167, 0.08);     /* لون الهوفر (تركواز خفيف) */
  --ag-primary: #00b3a7;                         /* لون الأيقونات */
  --ag-border: rgba(0, 0, 0, 0.08);

  min-width: 240px;
  padding: 10px;
  border: 1px solid var(--ag-border);
  border-radius: 14px;
  background: var(--ag-bg);
  backdrop-filter: blur(8px);
  box-shadow:
    0 12px 26px rgba(17, 24, 39, 0.12),
    0 2px 6px rgba(17, 24, 39, 0.04);
  transform: translateY(10px);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}

/* عند الفتح */
#topbar .dropdown-menu.show {
  transform: translateY(0);
  opacity: 1;
}

/* السهم الصغير (اختياري) */
#topbar .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 18px;                  /* عدّلها إذا تغيّر موضع الزر */
  width: 16px; height: 16px;
  background: var(--ag-bg);
  border-left: 1px solid var(--ag-border);
  border-top: 1px solid var(--ag-border);
  transform: rotate(45deg);
  border-top-left-radius: 3px;
}

/* عناصر القائمة */
#topbar .dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #111827;               /* نص رئيسي */
  font-weight: 500;
}

/* أيقونات العناصر */
#topbar .dropdown-menu .dropdown-item i,
#topbar .dropdown-menu .dropdown-item .fa {
  width: 22px;
  text-align: center;
  color: var(--ag-primary);
  opacity: .9;
}

/* تظليل/تفاعل عند المرور */
#topbar .dropdown-menu .dropdown-item:hover,
#topbar .dropdown-menu .dropdown-item:focus {
  background: var(--ag-item-hover);
  color: #0f172a;
  text-decoration: none;
}

/* العناصر النشطة/المختارة (لو وُجدت) */
#topbar .dropdown-menu .dropdown-item.active,
#topbar .dropdown-menu .dropdown-item:active {
  background: rgba(0, 179, 167, 0.14);
  color: #0f172a;
}

/* الفاصل */
#topbar .dropdown-menu .dropdown-divider {
  margin: 8px 6px;
  border-top: 1px dashed var(--ag-border);
}

/* الأزرار داخل القائمة (مثل Settings أو Create…) */
#topbar .dropdown-menu .btn,
#topbar .dropdown-menu .btn-light {
  border-radius: 10px !important;
  border: 1px solid var(--ag-border);
  padding: 8px 12px;
  transition: background-color .15s ease, border-color .15s ease;
}

#topbar .dropdown-menu .btn:hover,
#topbar .dropdown-menu .btn-light:hover {
  background-color: rgba(0, 179, 167, 0.08);
  border-color: rgba(0, 179, 167, 0.25);
}

.hh-theme-dark #topbar .dropdown-menu .dropdown-item {
  color: #e5e7eb;
}

.hh-theme-dark #topbar .dropdown-menu .dropdown-item:hover {
  color: #f8fafc;
}
/* نص عناصر قائمة الحساب: واضح وداكن */
#topbar .dropdown-menu .dropdown-item {
  color: #0f172a !important;      /* نص داكن */
  font-weight: 600;               /* وضوح أعلى */
  line-height: 1.25;
}

/* الروابط داخل العناصر (لو HumHub غيّر اللون بداخل <a>) */
#topbar .dropdown-menu .dropdown-item,
#topbar .dropdown-menu .dropdown-item a,
#topbar .dropdown-menu a.dropdown-item {
  color: #0f172a !important;
  text-decoration: none !important;
}

/* حالة الـ Hover */
#topbar .dropdown-menu .dropdown-item:hover,
#topbar .dropdown-menu .dropdown-item:focus {
  background: rgba(0, 179, 167, 0.08);  /* تركواز خفيف */
  color: #0b1220 !important;            /* نص أدكن شوي */
}

/* العناصر المعطلة/غير النشطة (إن وُجدت) */
#topbar .dropdown-menu .dropdown-item.disabled,
#topbar .dropdown-menu .dropdown-item:disabled {
  opacity: .55;
  color: #6b7280 !important;
}

/* فواصل أنيقة */
#topbar .dropdown-menu .dropdown-divider {
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  margin: 8px 6px;
}
/* تحسين مظهر القائمة المنسدلة */
.dropdown-menu {
  background: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
  padding: 10px 0 !important;
  min-width: 200px;
  animation: fadeInDown 0.2s ease-in-out;
}

/* حركة دخول ناعمة */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* تنسيق العناصر داخل القائمة */
.dropdown-menu a,
.dropdown-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px !important;
  color: #222 !important;
  font-weight: 500;
  background: none !important;
  border: none !important;
  width: 100%;
  transition: all 0.2s ease;
}

/* أيقونات جميلة */
.dropdown-menu a i,
.dropdown-menu button i {
  color: #00a79d !important;
  font-size: 15px;
}

/* عند التمرير على عنصر */
.dropdown-menu a:hover,
.dropdown-menu button:hover {
  background-color: #f2fefd !important;
  color: #00a79d !important;
}

/* الخط الفاصل بين العناصر */
.dropdown-menu hr,
.dropdown-divider {
  margin: 6px 12px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* تحسين سهم القائمة */
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 18px;
  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}
/* 1) أي dropdown في الـTopbar وهو مغلق: لا يأخذ أي أحداث ولا يبقى له مساحة */
#topbar .dropdown-menu:not(.show),
#topbar .dropdown-menu:not(.show) * {
  pointer-events: none !important;
}

#topbar .dropdown-menu:not(.show) {
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  visibility: hidden !important;
  z-index: 0 !important;
}

/* 2) عند الفتح، رجّع التفاعل والظهور الطبيعي */
#topbar .dropdown-menu.show {
  pointer-events: auto !important;
  visibility: visible !important;
  position: absolute !important;
  z-index: 1080 !important; /* أعلى من المحتوى */
}

/* احتياط: لا تسمح لأي ::before/::after أن تلتقط الأحداث فوق الأيقونات */
#topbar .nav > li > a::before,
#topbar .nav > li::before {
  pointer-events: none !important;
}

/* 3) (اختياري جداً) طبقات nicescroll أحياناً تبقى طبقة شفافة فوق التوب بار */
.nicescroll-rails,
.nicescroll-rails * {
  pointer-events: none !important;
}
/* === Notifications dropdown – force single column, full-width items === */

/* ألغي أي layout بالأعمدة */
#dropdown-notifications .dropdown-item.hh-list {
  display: block !important;
  /* إلغاء الأعمدة كلياً */
  columns: auto !important;
  column-count: 1 !important;
  -webkit-columns: 1 !important;
  -moz-columns: 1 !important;
  column-gap: 0 !important;

  overflow-x: hidden !important;   /* لا سكرول أفقي */
  padding-right: 0 !important;
}

/* كل إشعار يكون بلوك كامل العرض */
#dropdown-notifications .dropdown-item.hh-list > a {
  display: block !important;        /* بدلاً من التصرّف كعمود */
  width: 100% !important;
  break-inside: avoid !important;   /* لا تقطع الإشعار بين أعمدة */
  -webkit-column-break-inside: avoid !important;
  page-break-inside: avoid;
  margin-bottom: 10px;              /* مسافة بسيطة بين الإشعارات */
}

/* داخل الإشعار: خليك flex عادي للأفاتار+النص بدون لفّ غريب */
#dropdown-notifications .dropdown-item.hh-list > a.d-flex {
  flex-wrap: nowrap !important;
}

/* النص يرجع يلفّ طبيعي، بدون تقسيم أحرف */
#dropdown-notifications .dropdown-item.hh-list .flex-grow-1 {
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere;          /* فقط الكلمات الطويلة جداً */
  hyphens: none !important;
}

/* الحاوية العامة لنافذة البحث */
#dropdown-search {
  position: relative;
  padding-right: 56px;       /* مساحة لزر خارج الحقل */
}

/* حقل البحث */
#dropdown-search input.dropdown-search-keyword.form-control {
  padding-right: 14px !important;  /* عادي لأن الزر صار خارج الحقل */
  padding-left: 14px !important;
}

/* زر الأيقونة خارج الحقل - ملاصق لليمين */
#dropdown-search .dropdown-search-form .dropdown-search-button,
#dropdown-search .dropdown-search-form button[id^="h"][data-action-click="search"],
#dropdown-search .dropdown-search-form > button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--ag-primary, #00b3a4);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
  border: none;
  z-index: 2;
}
#dropdown-search .dropdown-search-form .dropdown-search-button:hover {
  filter: brightness(1.05);
}
#topbar .dropdown-menu:not(.show),
#topbar .dropdown-menu:not(.show) * {
  pointer-events: none !important;
}
#topbar .dropdown-menu:not(.show) {
  position: static !important;
  width: 0; height: 0; overflow: hidden;
  margin: 0; padding: 0; border: 0; box-shadow: none; visibility: hidden;
}
#topbar .dropdown-menu.show {
  pointer-events: auto !important;
}
.has-online-status .user-online-status.user-is-online {
    background-color: #1eff00 !important;  /* اللون اللي حددته */
    border-color: var(--hh-background-color-main) !important;
    box-shadow: 0 0 4px rgba(1, 255, 244, 0.8);
    width: 9px !important;
    height: 9px !important;
    position: absolute;
    right: -4%;
    bottom: -4%;
    border-radius: 50%;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu li.active > a {
    background-color: #e6f4f3 !important; /* لون أنعم للخلفية عند التحديد */
    color: #000 !important; /* لون النص */
    box-shadow: none !important; /* إزالة الظل الأسود */
    border: none !important; /* إزالة أي حدود غامقة */
}

.dropdown-menu {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* ظل ناعم عام للقائمة */
    border-radius: 12px !important; /* زوايا أنعم */
    border: 1px solid rgba(0,0,0,0.05) !important; /* حدود خفيفة جداً */
}
/* تحسين مظهر عناصر القائمة المنسدلة */
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu li.active > a {
    background: linear-gradient(135deg, #e9f9f7 0%, #d4f1ef 100%) !important; /* تدرّج ناعم */
    color: #000 !important; /* نص واضح */
    box-shadow: none !important; /* إزالة الظل الأسود */
    border: none !important; /* بدون إطار */
    transition: all 0.2s ease-in-out; /* حركة خفيفة عند المرور */
}

/* تحسين شكل القائمة نفسها */
.dropdown-menu {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important; /* ظل ناعم */
    border-radius: 12px !important; /* زوايا ناعمة */
    border: 1px solid rgba(0, 0, 0, 0.06) !important; /* حدود خفيفة جداً */
    background-color: #fff !important; /* خلفية بيضاء نظيفة */
}
/* اجعل القائمة نفسها بزوايا مستقيمة واقطع أي شيء يطلع خارجها */
#account-dropdown-menu,
.topbar .dropdown-menu {
  border-radius: 0 !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
  box-shadow: none !important;
}

/* ألغِ أي حواف/ماسك/قص أو pseudo-elements بتعمل الـ pill على البنود */
#account-dropdown-menu .dropdown-item,
#account-dropdown-menu .dropdown-item:hover,
#account-dropdown-menu .dropdown-item:focus,
#account-dropdown-menu .dropdown-item.active,
#account-dropdown-menu .dropdown-item:active,
.topbar .dropdown-menu .dropdown-item,
.topbar .dropdown-menu .dropdown-item:hover,
.topbar .dropdown-menu .dropdown-item:focus,
.topbar .dropdown-menu .dropdown-item.active,
.topbar .dropdown-menu .dropdown-item:active {
  position: relative !important;
  border-radius: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
  clip-path: none !important;             /* في حال الثيم يستخدم clip-path */
  -webkit-mask: none !important;          /* في حال يستخدم mask */
  mask: none !important;
  background-clip: padding-box !important;
}

/* ألغِ أي pseudo-elements مستخدمة لعمل الحواف الدائرية */
#account-dropdown-menu .dropdown-item::before,
#account-dropdown-menu .dropdown-item::after,
#account-dropdown-menu li::before,
#account-dropdown-menu li::after,
.topbar .dropdown-menu .dropdown-item::before,
.topbar .dropdown-menu .dropdown-item::after,
.topbar .dropdown-menu li::before,
.topbar .dropdown-menu li::after {
  content: none !important;
  display: none !important;
}

/* لون التحديد (الهايلایت) مع نص داكن ليتأكد أنه واضح */
#account-dropdown-menu .dropdown-item.active,
#account-dropdown-menu .dropdown-item:hover,
.topbar .dropdown-menu .dropdown-item.active,
.topbar .dropdown-menu .dropdown-item:hover {
  background-color: rgba(0,0,0,0.06) !important;  /* ظلّ بسيط بدون pill */
  color: #111 !important;
}

/* اختياري: ثبّت لون الأيقونات داخل البند النشط/المحدد */
#account-dropdown-menu .dropdown-item.active i,
#account-dropdown-menu .dropdown-item:hover i,
.topbar .dropdown-menu .dropdown-item.active i,
.topbar .dropdown-menu .dropdown-item:hover i {
  color: #0aa !important;  /* نفس سكيمنا التركوازي */
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus,
.dropdown-menu li.active > a {
  background-color: #00bfa5 !important; /* غيّر اللون حسب رغبتك */
  color: #fff !important; /* خلي النص أبيض */
}
/* لون التحديد + الفوكس */
#topbar .account-dropdown .dropdown-menu > li > a:hover,
#topbar .account-dropdown .dropdown-menu > li > a:focus,
#topbar .account-dropdown .dropdown-menu > li > a.active {
  background-color: #00bfa5 !important;  /* غيّر اللون اللي بدك ياه */
  color: #fff !important;
}

/* لون الأيقونات داخل العنصر عند التحديد */
#topbar .account-dropdown .dropdown-menu > li > a:hover i,
#topbar .account-dropdown .dropdown-menu > li > a:focus i,
#topbar .account-dropdown .dropdown-menu > li > a.active i {
  color: #fff !important;
  opacity: 1 !important;
}

#topbar .account-dropdown .dropdown-menu > li > a:hover *,
#topbar .account-dropdown .dropdown-menu > li > a:focus * {
  color: #fff !important;
}
#topbar .dropdown-menu > li > a:hover,
#topbar .dropdown-menu > li > a:focus,
#topbar .dropdown-menu > li > a.active {
  background-color: #00bfa5 !important;
  color: #fff !important;
}
#topbar .dropdown-menu > li > a:hover i,
#topbar .dropdown-menu > li > a:focus i,
#topbar .dropdown-menu > li > a.active i {
  color: #fff !important;
}
#topbar .dropdown-menu .dropdown-item:hover,
#topbar .dropdown-menu .dropdown-item:focus,
#topbar .dropdown-menu .dropdown-item.active {
  background-color: #00bfa5 !important;
  color: #fff !important;
}
#topbar .dropdown-menu .dropdown-item:hover i,
#topbar .dropdown-menu .dropdown-item:focus i {
  color: #fff !important;
}