:root {
  /* ==================================== */
  /* 🎨  الهوية البصرية         */
  /* الألوان الأساسية: أخضر ناعم (الأساسي) ودافئ (الثانوي) */
  --brand-green: #28a745;        /* 🟢 أخضر فاتح (العمل/النجاح) */
  --brand-dark-green: #1e7e34;   /* 🌲 أخضر أغمق (للنص/التأكيد) */
  --brand-cream: #FFFBF4;        /* 🍦 بيج كريمي (خلفيات/عناصر ثانوية) */
  --brand-gold: #C9A24A;         /* ✨ ذهبي (لمسات/نصوص ثانوية) */
  --brand-red: #9B111E;          /* 🔴 أحمر ترس (تحذير/خطأ) */

  /* النصوص والخلفية العامة */
  --light-bg: #ffffff;           /* ⚪ خلفية ساطعة */
  --text-primary: #111111;       /* ⚫ نص أساسي داكن */
  --text-secondary: var(--brand-gold); /* نص ثانوي بلون ذهبي */

  /* حدود فاصلة شائعة */
  --border-light: #E5E7EB;       /* حد خفيف جدًا */
  --border-glass: rgba(16, 24, 40, .08); /* حد الزجاجية */

  /* ==================================== */
  /* ✨ تأثير الزجاجية (Glassmorphism)  */
  /* ==================================== */
  --glass-bg: rgba(255, 255, 255, .72); /* خلفية بيضاء شفافة */
  --glass-blur: blur(12px);             /* زيادة البلور لمظهر أكثر حداثة */
  --shadow-glass: 0 6px 20px rgba(0, 0, 0, .07); /* ظل خفيف للزجاج */

  /* ==================================== */
  /* 💫 التدرجات (Gradients)          */
  /* ==================================== */
  /* تدرج رئيسي أخضر خفيف - يستخدم للخلفيات والعناصر المميزة */
  --gradient-green-light: linear-gradient(135deg, rgba(21, 101, 87, .06), rgba(108, 203, 155, .15));
  /* تدرج زر أساسي (غامق) */
  --gradient-btn-primary: linear-gradient(140deg, var(--brand-green), #5FD1A6);

  /* تفاعلات المرور الموحدة */
  --hover-sidebar: rgba(70, 184, 131, .08); /* أخضر للقائمة الجانبية */
  --hover-neutral: rgba(17, 17, 17, .04); /* محايد للعناصر الأخرى */
}

/* ================================================= */
/* 🖼️  التصميم العام و الخلفية            */
/* ================================================= */

/* الخلفية العامة: فاتحة مع لمسات خضراء/ذهبية ناعمة */
body {
  background:
    radial-gradient(2500px 600px at 90% -5%, rgba(52, 206, 87, .18), transparent 65%),
    radial-gradient(1000px 600px at 10% 115%, rgba(201, 194, 153, .20), transparent 65%),
    var(--light-bg);
  color: var(--text-primary) !important;
  font-family: "Almarai", "Cairo", "Arial", Tahoma, sans-serif;
  min-height: 100vh;
  margin: 0;
}

/* 🖱️ الروابط العامة: تسطير متحرك خفيف */
a:not(.btn) {
  color: var(--brand-dark-green) !important;
  text-decoration: none;
  position: relative;
  transition: color .2s ease-in-out;
}
a:not(.btn):hover {
  color: var(--brand-green) !important;
}
a:not(.btn)::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 2px;
  background: var(--brand-green);
  transform: scaleX(0); /* ابدأ غير مرئي */
  transition: transform 0.3s ease-out;
}
a:not(.btn):hover::after {
  transform: scaleX(1); /* يظهر عند المرور */
}


/* ================================================= */
/* ✨ عناصر الزجاجية (Glassmorphism)          */
/* ================================================= */

/* تطبيق الزجاجية على العناصر الأساسية */
/*.navbar,
.sidebar,
.card,
.dropdown-menu,
.modal-content,
.toast,
.popover {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-glass);
  border-radius: 14px;
  transition: box-shadow 0.3s ease-in-out; } */

/* تفاعل المرور للعناصر الزجاجية */
/*.card:hover, .navbar:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12) !important;  } */


/* fallback لو المتصفح لا يدعم backdrop-filter */
/*@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .navbar, .sidebar, .card, .dropdown-menu, .modal-content, .toast, .popover {
    background: #ffffff !important;  }}  */

/* ================================================= */
/* ⚙️ عناصر الواجهة العامة               */
/* ================================================= */

/* شريط العنوان العلوي (Navbar) */
.navbar {
  background: var(--glass-bg) !important;
  padding-block: .75rem; /* زيادة خفيفة في التبطين */
}
.navbar a, .navbar .nav-link {
  color: var(--brand-dark-green) !important;
  font-weight: 700;
}
.navbar a:hover, .navbar .nav-link:hover {
  color: var(--brand-green) !important;
  background: transparent !important;
}

/* القائمة الجانبية (Sidebar) */
.sidebar {
  background: var(--brand-cream); /* لون كريمي ناعم للخلفية */
  color: var(--text-primary) !important;
  border-inline-end: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 10px;
}
.sidebar a {
  color: var(--text-primary) !important;
  display: block;
  border-radius: 12px;
  padding: .7rem 1rem;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}
/* عنصر نشط (Active) و عند المرور (Hover) */
.sidebar a:hover,
.sidebar .active {
  background: var(--hover-sidebar) !important; /* أخضر خفيف جداً */
  color: var(--brand-dark-green) !important;
  font-weight: 700;
  border: 1px solid rgba(21, 101, 87, .10) !important;
  position: relative;
}
/* شريط التأكيد الأخضر للعنصر النشط */
.sidebar .active::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: 0; /* يبدأ من حافة العنصر */
  width: 4px; /* عرض الشريط */
  background: var(--brand-green);
  border-radius: 0 4px 4px 0;
}
[dir="rtl"] .sidebar .active::before {
  inset-inline-start: auto;
  inset-inline-end: 0;
  border-radius: 4px 0 0 4px;
}

/* ================================================= */
/* 💳 الكروت                     */
/* ================================================= */

.card {
  border-radius: 16px;
}
.card-inner { transition: transform 0.2s ease-in-out; }
.card-header {
  background: var(--gradient-green-light); /* تدرج أخضر خفيف للرأس */
  color: var(--text-primary) !important;
  font-weight: bold;
  border-bottom: 1px solid var(--border-light);
  border-radius: 16px 16px 0 0; /* زوايا مستديرة للجزء العلوي فقط */
}
.card-body {
  background-color: transparent;
  color: var(--text-primary) !important;
}
/* كروت التدرج */
.card-gradient-blue {
  background: linear-gradient(135deg, #ffffff, rgba(108, 203, 155, .12));
  color: var(--brand-dark-green) !important;
  border: 1px solid var(--border-light);
}
.card-gradient-blue:hover, .card-gradient-gold:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .1); /* ظل ألطف */
}
.card-gradient-gold {
  background: linear-gradient(135deg, #ffffff, rgba(201, 162, 74, .12));
  color: var(--text-primary) !important;
  border: 1px solid var(--border-light);
}
.card-white { background-color: #fff !important; }

/* ================================================= */
/* 🔘 الأزرار                     */
/* ================================================= */

.btn {
  border: 0;
  font-weight: 800;
  font-size: 1.05rem;
  border-radius: 999px; /* شكل الحبة (Pill Shape) */
  padding: .6rem 1.5rem;
  transition: all 0.2s ease-in-out;
}

/* زر أساسي (Primary) */
.btn-primary {
  background: var(--gradient-btn-primary);
  color: #0b2d25 !important; /* لون نص داكن جدًا لتباين عالي */
}
.btn-primary:hover {
  filter: brightness(.95); /* تظليل خفيف عند المرور */
  box-shadow: 0 4px 10px rgba(70, 184, 131, .4);
}
a.btn-primary, a.btn-primary:hover, a.btn-primary:focus {
  color: #0b2d25 !important;
}

/* زر ثانوي (Secondary - ذهبي) */
.btn-secondary {
  background: linear-gradient(140deg, #F4E3B3, var(--brand-gold)) !important;
  color: #2b2b2b !important;
}
.btn-secondary:hover {
  filter: brightness(.95);
  box-shadow: 0 4px 10px rgba(201, 162, 74, .4);
}

/* ================================================= */
/* 📊 الجداول                     */
/* ================================================= */

table { color: var(--text-primary) !important; font-size: 15px; }
table a {
  color: var(--brand-dark-green) !important;
  text-decoration: none;
  font-weight: 700;
}
table a:hover {
  color: var(--brand-green) !important;
  text-decoration: underline;
}

.table > thead > tr > th {
  color: var(--brand-dark-green) !important;
  background: #FFFBF4; /* بيج فاتح لرأس الجدول */
  font-weight: 800 !important;
  font-size: 14px !important;
  text-align: center !important;
  white-space: nowrap !important;
  border-bottom: 1px solid var(--border-light);
  position: sticky; top: 0; z-index: 2;
}

/* التظليل المحايد عند المرور على صفوف الجدول */
.table tbody tr:hover {
  background: var(--hover-neutral) !important;
  cursor: pointer;
}

/* الروابط داخل الجداول: لا تلوين خلفية عند المرور */
.table a:hover {
  background: transparent !important;
}

/* ================================================= */
/* 👤 الدوائر (Avatars)             */
/* ================================================= */

.avatar-base {
  border-radius: 50%;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
}
.avatar-base:hover { transform: scale(1.08); }

.avatar-gradient-blue {
  /* تم التعديل على اسمه ليصبح "أخضر" أكثر دلالة */
  @extend .avatar-base;
  background: linear-gradient(135deg, #ffffff, rgba(108, 203, 155, .14));
  color: var(--brand-dark-green) !important;
}
.avatar-gradient-gold {
  @extend .avatar-base;
  background: linear-gradient(135deg, #ffffff, rgba(201, 162, 74, .16));
  color: var(--text-primary) !important;
}

/* ================================================= */
/* ⬇️ القائمة المنسدلة (Dropdown)       */
/* ================================================= */

.dropdown-menu {
  background: var(--glass-bg) !important;
  color: var(--text-primary) !important;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .1); /* ظل أعمق قليلاً */
  z-index: 1056 !important;
}
.dropdown-item {
  color: var(--text-primary) !important;
  font-weight: 500;
  border-radius: 8px;
  transition: background-color 0.2s, color 0.2s;
}
/* التظليل المحايد عند المرور على عناصر القائمة */
.dropdown-item:hover {
  background-color: var(--hover-neutral) !important;
  color: var(--brand-dark-green) !important;
}

/* ================================================= */
/* 🏷️ نصوص إضافية                    */
/* ================================================= */

/* عناوين ثانوية */
.page-title .page-pretitle,
.page-pretitle { color: #2b2b2b !important; font-size: 1.25rem; font-weight: 600; }

/* نصوص مساعدة */
.text-secondary { color: var(--brand-red) !important; font-weight: 600; }
.text-reset { color: var(--text-primary) !important; font-weight: 600; }

/* الأيقونات */
.icon-dark-blue { color: var(--brand-green) !important; }
.icon-gold { color: var(--brand-gold) !important; }


        /* اجعل الهيدر فوق أي محتوى أسفله */
.navbar { position: relative; z-index: 1030; overflow: visible; }

/* اضمن أن القائمة أعلى من عناصر الصفحة العادية */
.dropdown-menu { z-index: 1060 !important; }

 body {
            font-family: 'Inter', sans-serif;
        
        }