/* ══════════════════════════════════════════════════════════════════════════
   khatwa_master.css  ·  الهوية البصرية الموحدة والمبهرة لمنصة خطوة
   ─────────────────────────────────────────────────────────────────────────
   الألوان الرسمية:
     أخضر غامق   #0D5C45   — الخلفيات الداكنة، الـ Sidebar
     أخضر مشرق   #00B87A   — الأزرار، التمييز، الـ Gradient
     بيج دافئ    #EDE8E0   — خلفية الصفحة
     ذهبي        #F5C518   — الإنجازات، الرتب
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1. متغيرات الألوان الرسمية الكاملة ══ */
:root {
  /* ── Brand Core ── */
  --dk:     #0D5C45;
  --dkD:    #0A4535;
  --dkL:    #1A7A5E;
  --tl:     #00B87A;
  --tlV:    #00D48E;
  --tlS:    rgba(0,184,122,0.12);
  --tlSS:   rgba(0,184,122,0.06);
  --ac:     #00B87A;

  /* ── Gradients ── */
  --grad:   linear-gradient(135deg, #0D5C45 0%, #1A7A5E 45%, #00B87A 100%);
  --gradR:  linear-gradient(135deg, #00B87A 0%, #0D5C45 100%);
  --gradS:  linear-gradient(135deg, rgba(13,92,69,.92), rgba(0,184,122,.80));
  --gradH:  linear-gradient(180deg, #0D5C45 0%, #0A4535 100%);

  /* ── الخلفيات ── */
  --bg:     #EDE8E0;
  --bgD:    #E4DDD3;
  --bgL:    #F5F1EB;
  --bgW:    #FAFAF8;
  --cr:     #E4DDD3;
  --w:      #FFFFFF;

  /* ── الذهبي ── */
  --gd:     #F5C518;
  --gdD:    #E0B010;
  --gdS:    #FFF8DC;
  --gdG:    linear-gradient(135deg, #F5C518 0%, #E0B010 100%);

  /* ── الرتب ── */
  --sv:     #8FA0A8;
  --svS:    #E8EDEF;
  --bz:     #CD7F32;
  --bzS:    #F5E8D0;
  --st:     #F5C518;
  --dm:     #5BC4E0;
  --dmS:    #DBF1F6;

  /* ── النصوص ── */
  --tx:     #0D5C45;
  --txS:    #2E7A5E;
  --txM:    #6B9E8A;
  --txF:    #A8C8BC;
  --txW:    #FFFFFF;
  --txG:    #6B7280;

  /* ── الحدود ── */
  --bd:     #D4CBBF;
  --bdS:    rgba(13,92,69,0.08);
  --bdG:    rgba(0,184,122,0.20);
  --bdH:    rgba(0,184,122,0.35);

  /* ── الظلال ── */
  --s0:     0 1px 4px rgba(13,92,69,0.06);
  --s1:     0 2px 10px rgba(13,92,69,0.08), 0 1px 3px rgba(13,92,69,0.04);
  --s2:     0 4px 20px rgba(13,92,69,0.10), 0 2px 8px rgba(13,92,69,0.05);
  --s3:     0 8px 32px rgba(13,92,69,0.13), 0 4px 12px rgba(13,92,69,0.06);
  --s4:     0 16px 48px rgba(13,92,69,0.16), 0 8px 20px rgba(13,92,69,0.08);
  --sG:     0 8px 32px rgba(0,184,122,0.28);
  --sGH:    0 12px 40px rgba(0,184,122,0.40);

  /* ── حالات النظام ── */
  --ok:     #00B87A;
  --okS:    #D6F5EC;
  --okD:    #009A65;
  --bad:    #E03C3C;
  --badS:   #FDE8E8;
  --warn:   #F5C518;
  --warnS:  #FFF8DC;
  --info:   #3B82F6;
  --infoS:  #EFF6FF;

  /* ── الأشكال ── */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   28px;

  /* ── الخطوط ── */
  --FT:     'IBM Plex Sans Arabic', sans-serif;
  --FH:     'IBM Plex Sans Arabic', sans-serif;

  /* ── الحركة ── */
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --tr:     all 0.25s var(--ease);
  --trF:    all 0.18s var(--ease);
  --trS:    all 0.40s var(--ease);
}

/* ══ 2. أساسيات الصفحة ══ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body:not(.slideshow-page) {
  font-family: var(--FT) !important;
  background: var(--bgL) !important;
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(0,184,122,0.05) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(13,92,69,0.04) 0%, transparent 55%) !important;
  background-attachment: fixed !important;
  color: var(--tx) !important;
  direction: rtl !important;
  min-height: 100vh !important;
  line-height: 1.65 !important;
}

/* ══ 3. الـ Scrollbar ══ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--tl); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--dk); }

/* ══ 4. الـ Selection ══ */
::selection { background: rgba(0,184,122,0.22); color: var(--dk); }

/* ══ 5. الـ Links ══ */
a { color: var(--tl); transition: var(--trF); text-decoration: none; }
a:hover { color: var(--dk); }

/* ══════════════════════════════════════════════════════════════════════════
   6. الـ SIDEBAR — الشريط الجانبي (مشترك بين الإدارة والمشارك)
   ══════════════════════════════════════════════════════════════════════════ */

.admin-sidebar,
.sidebar {
  background: var(--dk) !important;
  background-image:
    radial-gradient(circle at 15% 15%, rgba(0,184,122,0.18) 0%, transparent 55%),
    radial-gradient(circle at 85% 85%, rgba(0,0,0,0.25) 0%, transparent 55%),
    linear-gradient(180deg, #0D5C45 0%, #0A4535 100%) !important;
  border-left: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: -4px 0 32px rgba(0,0,0,0.18) !important;
  transition: var(--trS) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* زخرفة خلفية الـ Sidebar */
.admin-sidebar::before,
.sidebar::before {
  content: '' !important;
  position: absolute !important;
  top: -80px !important;
  left: -80px !important;
  width: 280px !important;
  height: 280px !important;
  background: radial-gradient(circle, rgba(0,184,122,0.12) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ── Brand ── */
.sidebar-brand,
.admin-sidebar .sidebar-brand {
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 20px 16px !important;
  position: relative !important;
  z-index: 1 !important;
}

.sidebar-brand a { text-decoration: none !important; }

.logo-icon,
.admin-sidebar .logo-icon {
  background: linear-gradient(135deg, var(--tl), var(--dkL)) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0,184,122,0.45) !important;
  width: 38px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  transition: var(--tr) !important;
}

.logo-icon:hover { transform: scale(1.05) rotate(-3deg) !important; }

.sidebar-brand-text strong,
.admin-sidebar .sidebar-brand-text strong {
  display: block !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #fff !important;
  letter-spacing: -0.3px !important;
}

.sidebar-brand-text span,
.admin-sidebar .sidebar-brand-text span {
  font-size: 10px !important;
  color: rgba(255,255,255,0.5) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* ── تسميات الأقسام ── */
.sidebar-section-label,
.admin-sidebar .sidebar-section-label {
  color: rgba(255,255,255,0.38) !important;
  font-size: 9.5px !important;
  letter-spacing: 1.8px !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  padding: 12px 16px 4px !important;
}

/* ── روابط التنقل ── */
.sidebar-nav a,
.admin-sidebar .sidebar-nav a {
  color: rgba(255,255,255,0.78) !important;
  border-radius: 12px !important;
  margin: 2px 8px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  transition: var(--trF) !important;
  position: relative !important;
  z-index: 1 !important;
}

.sidebar-nav a:hover,
.admin-sidebar .sidebar-nav a:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
  transform: translateX(-3px) !important;
}

.sidebar-nav a.active,
.admin-sidebar .sidebar-nav a.active {
  background: var(--tl) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 16px rgba(0,184,122,0.40) !important;
}

.sidebar-nav a.active::before {
  content: '' !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 60% !important;
  background: rgba(255,255,255,0.6) !important;
  border-radius: 100px !important;
}

/* ── القوائم المنسدلة ── */
.sidebar-dropdown-toggle,
.admin-sidebar .sidebar-dropdown-toggle {
  color: rgba(255,255,255,0.78) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  margin: 2px 8px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: calc(100% - 16px) !important;
  cursor: pointer !important;
  transition: var(--trF) !important;
  font-family: var(--FT) !important;
}

.sidebar-dropdown-toggle:hover,
.admin-sidebar .sidebar-dropdown-toggle:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}

.sidebar-dropdown.open > .sidebar-dropdown-toggle,
.admin-sidebar .sidebar-dropdown.open > .sidebar-dropdown-toggle {
  background: rgba(0,184,122,0.18) !important;
  color: #fff !important;
}

.sidebar-dropdown-menu a,
.admin-sidebar .sidebar-dropdown-menu a {
  color: rgba(255,255,255,0.70) !important;
  border-radius: 10px !important;
  margin: 2px 8px 2px 16px !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: var(--trF) !important;
}

.sidebar-dropdown-menu a:hover,
.admin-sidebar .sidebar-dropdown-menu a:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #fff !important;
}

.sidebar-dropdown-menu a.active,
.admin-sidebar .sidebar-dropdown-menu a.active {
  background: var(--tl) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 12px rgba(0,184,122,0.35) !important;
}

/* ── الفاصل ── */
.sidebar-divider,
.admin-sidebar .sidebar-divider {
  height: 1px !important;
  background: rgba(255,255,255,0.07) !important;
  margin: 8px 12px !important;
  border: none !important;
}

/* ── فوتر الـ Sidebar ── */
.sidebar-footer,
.admin-sidebar .sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(0,0,0,0.15) !important;
  padding: 10px 8px !important;
}

.sidebar-footer a,
.admin-sidebar .sidebar-footer a,
.admin-sidebar .sidebar-footer .sidebar-footer-link {
  color: rgba(255,255,255,0.50) !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12px !important;
  transition: var(--trF) !important;
}

.sidebar-footer a:hover,
.admin-sidebar .sidebar-footer a:hover,
.admin-sidebar .sidebar-footer .sidebar-footer-link:hover {
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.85) !important;
}

/* ── معلومات المستخدم ── */
.sidebar-user,
.admin-sidebar .sidebar-user {
  background: rgba(0,0,0,0.18) !important;
  border-radius: 14px !important;
  margin: 8px !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.sidebar-user-avatar,
.admin-sidebar .sidebar-user-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--tl), var(--dkL)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #fff !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0,184,122,0.35) !important;
}

.sidebar-user-info strong,
.admin-sidebar .sidebar-user-info strong {
  display: block !important;
  font-size: 11.5px !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.sidebar-user-info span,
.admin-sidebar .sidebar-user-info span {
  font-size: 10px !important;
  color: rgba(255,255,255,0.45) !important;
}

/* ── سهم القائمة المنسدلة ── */
.dd-arrow,
.admin-sidebar .dd-arrow {
  color: rgba(255,255,255,0.40) !important;
  transition: var(--trF) !important;
  margin-right: auto !important;
}

.sidebar-dropdown.open .dd-arrow,
.admin-sidebar .sidebar-dropdown.open .dd-arrow {
  color: rgba(255,255,255,0.80) !important;
  transform: rotate(180deg) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   7. الـ Admin Layout
   ══════════════════════════════════════════════════════════════════════════ */

.admin-body {
  background: var(--bgL) !important;
  font-family: var(--FT) !important;
}

.admin-layout {
  display: flex !important;
  min-height: 100vh !important;
}

.admin-main {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 24px 28px !important;
  background: var(--bgL) !important;
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(0,184,122,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(13,92,69,0.03) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
}

/* ── الهيدر ── */
.admin-header {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--bdG) !important;
  box-shadow: 0 2px 16px rgba(13,92,69,0.07) !important;
  padding: 12px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. البطاقات — Cards
   ══════════════════════════════════════════════════════════════════════════ */

.card {
  background: #fff !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--bdS) !important;
  box-shadow: var(--s2) !important;
  transition: var(--tr) !important;
  overflow: hidden !important;
}

.card:hover {
  box-shadow: var(--s3) !important;
  border-color: var(--bdG) !important;
  transform: translateY(-2px) !important;
}

.card.hoverable:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--s4) !important;
}

/* بطاقة زجاجية */
.card-glass {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--s2) !important;
}

/* بطاقة خضراء */
.card-green,
.stat-card-primary {
  background: var(--grad) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: var(--sG) !important;
}

.card-green:hover,
.stat-card-primary:hover {
  box-shadow: var(--sGH) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   9. الأزرار
   ══════════════════════════════════════════════════════════════════════════ */

.btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  padding: 10px 20px !important;
  transition: var(--trF) !important;
  font-family: var(--FT) !important;
  letter-spacing: 0.1px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  cursor: pointer !important;
  border: none !important;
  outline: none !important;
}

.btn:hover { transform: translateY(-2px) !important; }
.btn:active { transform: translateY(0) !important; }

/* أزرق رئيسي — الأخضر المشرق */
.btn-primary,
.btn-green,
.btn-success {
  background: var(--tl) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,184,122,0.32) !important;
}

.btn-primary:hover,
.btn-green:hover,
.btn-success:hover {
  background: var(--tlV) !important;
  box-shadow: 0 6px 24px rgba(0,184,122,0.48) !important;
}

/* زر الأخضر الغامق */
.btn-dark,
.btn-secondary {
  background: var(--dk) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(13,92,69,0.28) !important;
}

.btn-dark:hover,
.btn-secondary:hover {
  background: var(--dkD) !important;
  box-shadow: 0 6px 24px rgba(13,92,69,0.40) !important;
}

/* زر مخطط */
.btn-outline,
.btn-outline-primary {
  background: transparent !important;
  border: 2px solid var(--tl) !important;
  color: var(--tl) !important;
  box-shadow: none !important;
}

.btn-outline:hover,
.btn-outline-primary:hover {
  background: var(--tl) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(0,184,122,0.32) !important;
}

/* زر الخطر */
.btn-danger {
  background: var(--bad) !important;
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(224,60,60,0.28) !important;
}

.btn-danger:hover {
  background: #c42f2f !important;
  box-shadow: 0 6px 24px rgba(224,60,60,0.40) !important;
}

/* زر صغير */
.btn-sm {
  padding: 6px 14px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
}

/* زر كبير */
.btn-lg {
  padding: 14px 28px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   10. الجداول
   ══════════════════════════════════════════════════════════════════════════ */

.table-wrap {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--s1) !important;
  border: 1px solid var(--bdS) !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
}

thead th {
  background: var(--dk) !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.3px !important;
  padding: 14px 16px !important;
  border: none !important;
  white-space: nowrap !important;
}

thead th:first-child { border-radius: 0 var(--r-md) 0 0 !important; }
thead th:last-child  { border-radius: var(--r-md) 0 0 0 !important; }

tbody tr {
  transition: var(--trF) !important;
}

tbody tr:nth-child(even) {
  background: rgba(13,92,69,0.018) !important;
}

tbody tr:hover {
  background: rgba(0,184,122,0.05) !important;
}

tbody td {
  padding: 12px 16px !important;
  color: var(--tx) !important;
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}

tbody tr:last-child td { border-bottom: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   11. حقول الإدخال
   ══════════════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="date"],
select,
textarea {
  border: 1.5px solid var(--bd) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--tx) !important;
  font-family: var(--FT) !important;
  font-size: 13.5px !important;
  padding: 10px 14px !important;
  transition: var(--trF) !important;
  outline: none !important;
  width: 100% !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  border-color: var(--tl) !important;
  box-shadow: 0 0 0 3px rgba(0,184,122,0.15) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--txF) !important;
}

label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--txS) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* ── Checkbox & Radio ── */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--tl) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   12. الـ Page Header
   ══════════════════════════════════════════════════════════════════════════ */

.page-header {
  background: var(--grad) !important;
  border-radius: var(--r-xl) !important;
  padding: 28px 32px !important;
  margin-bottom: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--sG) !important;
}

.page-header::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important;
  left: -60px !important;
  width: 240px !important;
  height: 240px !important;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.page-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: -40px !important;
  right: -40px !important;
  width: 180px !important;
  height: 180px !important;
  background: radial-gradient(circle, rgba(0,0,0,0.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.page-header h1,
.page-header .page-title {
  color: #fff !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

.page-header p,
.page-header .page-subtitle {
  color: rgba(255,255,255,0.75) !important;
  font-size: 13px !important;
  margin: 4px 0 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   13. الـ Section Title
   ══════════════════════════════════════════════════════════════════════════ */

.section-title,
.card-ttl {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: var(--dk) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.section-title::after {
  content: '' !important;
  flex: 1 !important;
  height: 1.5px !important;
  background: linear-gradient(to left, transparent, rgba(0,184,122,0.18)) !important;
  margin-right: 8px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   14. الـ Modals
   ══════════════════════════════════════════════════════════════════════════ */

.modal-overlay {
  background: rgba(13,92,69,0.35) !important;
  backdrop-filter: blur(6px) !important;
}

.modal-box,
.modal-content {
  border-radius: var(--r-xl) !important;
  border: none !important;
  box-shadow: 0 24px 80px rgba(13,92,69,0.28) !important;
  overflow: hidden !important;
}

.modal-header {
  background: var(--grad) !important;
  color: #fff !important;
  padding: 20px 24px !important;
  border: none !important;
}

.modal-header h3,
.modal-header .modal-title {
  color: #fff !important;
  font-weight: 900 !important;
  font-size: 16px !important;
}

.modal-body { padding: 24px !important; }
.modal-footer {
  padding: 16px 24px !important;
  border-top: 1px solid var(--bdS) !important;
  background: var(--bgL) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   15. الـ Alerts والإشعارات
   ══════════════════════════════════════════════════════════════════════════ */

.alert,
.toast {
  border-radius: 14px !important;
  border: none !important;
  padding: 14px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: var(--s1) !important;
}

.alert-success,
.toast-success {
  background: var(--okS) !important;
  color: var(--dk) !important;
  border-right: 4px solid var(--ok) !important;
}

.alert-warning,
.toast-warning {
  background: var(--warnS) !important;
  color: #7A5C00 !important;
  border-right: 4px solid var(--warn) !important;
}

.alert-danger,
.alert-error,
.toast-error {
  background: var(--badS) !important;
  color: #7A1A1A !important;
  border-right: 4px solid var(--bad) !important;
}

.alert-info,
.toast-info {
  background: var(--infoS) !important;
  color: #1E40AF !important;
  border-right: 4px solid var(--info) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   16. الـ Badges والشارات
   ══════════════════════════════════════════════════════════════════════════ */

.badge {
  border-radius: 100px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.badge-success,
.badge-green {
  background: var(--okS) !important;
  color: var(--dk) !important;
}

.badge-warning,
.badge-gold {
  background: var(--gdS) !important;
  color: #7A5C00 !important;
}

.badge-danger,
.badge-red {
  background: var(--badS) !important;
  color: var(--bad) !important;
}

.badge-primary {
  background: var(--tlS) !important;
  color: var(--dk) !important;
}

/* ── الرتب ── */
.tier-badge {
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
  border-radius: 100px !important;
  padding: 4px 12px !important;
  font-size: 11.5px !important;
}

/* ── إشعار الأرقام ── */
.notif-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  box-shadow: 0 2px 8px rgba(239,68,68,0.40) !important;
  font-weight: 800 !important;
  border-radius: 100px !important;
  font-size: 10px !important;
  min-width: 18px !important;
  height: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   17. شريط التقدم
   ══════════════════════════════════════════════════════════════════════════ */

.progress,
.progress-track {
  background: var(--bgD) !important;
  border-radius: 100px !important;
  overflow: hidden !important;
  height: 8px !important;
}

.progress-bar,
.progress-fill,
.lb-bar-fill {
  background: linear-gradient(90deg, var(--tl) 0%, var(--tlV) 100%) !important;
  border-radius: 100px !important;
  box-shadow: 0 2px 8px rgba(0,184,122,0.30) !important;
  transition: width 0.8s var(--ease) !important;
  height: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   18. الـ Podium (منصة التكريم)
   ══════════════════════════════════════════════════════════════════════════ */

.podium-item { transition: var(--tr) !important; }
.podium-item:hover { transform: translateY(-6px) !important; }

.podium-1 .podium-block {
  background: linear-gradient(135deg, #F5C518 0%, #E0B010 50%, #F5C518 100%) !important;
  box-shadow: 0 8px 28px rgba(245,197,24,0.40) !important;
}

.podium-2 .podium-block {
  background: linear-gradient(135deg, #8FA0A8 0%, #b0c4cc 50%, #8FA0A8 100%) !important;
  box-shadow: 0 6px 20px rgba(143,160,168,0.35) !important;
}

.podium-3 .podium-block {
  background: linear-gradient(135deg, #CD7F32 0%, #e09a55 50%, #CD7F32 100%) !important;
  box-shadow: 0 6px 20px rgba(205,127,50,0.35) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   19. الـ Dropdown Menus
   ══════════════════════════════════════════════════════════════════════════ */

.dropdown-menu {
  background: #fff !important;
  border: 1px solid var(--bdS) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--s3) !important;
  padding: 6px !important;
  overflow: hidden !important;
}

.dropdown-item {
  border-radius: 10px !important;
  padding: 9px 14px !important;
  font-size: 13px !important;
  color: var(--tx) !important;
  transition: var(--trF) !important;
}

.dropdown-item:hover {
  background: var(--tlS) !important;
  color: var(--dk) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   20. الـ Login Page
   ══════════════════════════════════════════════════════════════════════════ */

.login-page,
body.login-bg {
  background: var(--grad) !important;
  background-image:
    var(--grad),
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0,0,0,0.10) 0%, transparent 50%) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.login-card {
  border-radius: var(--r-xl) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,0.25) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   21. الـ Hero Banner (صفحة المشارك)
   ══════════════════════════════════════════════════════════════════════════ */

.hero-banner,
.pt-hero,
.participant-hero {
  background: var(--grad) !important;
  border-radius: var(--r-xl) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: var(--sG) !important;
}

.hero-banner::before,
.pt-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.10) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0,0,0,0.08) 0%, transparent 50%) !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   22. الـ Stat Cards (بطاقات الإحصائيات)
   ══════════════════════════════════════════════════════════════════════════ */

.stat-card {
  background: #fff !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--bdS) !important;
  box-shadow: var(--s2) !important;
  padding: 20px !important;
  transition: var(--tr) !important;
  position: relative !important;
  overflow: hidden !important;
}

.stat-card:hover {
  box-shadow: var(--s3) !important;
  border-color: var(--bdG) !important;
  transform: translateY(-3px) !important;
}

.stat-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 4px !important;
  height: 100% !important;
  background: var(--tl) !important;
  border-radius: 0 var(--r-lg) var(--r-lg) 0 !important;
}

.stat-card .stat-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  background: var(--tlS) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  margin-bottom: 12px !important;
}

.stat-card .stat-value {
  font-size: 28px !important;
  font-weight: 900 !important;
  color: var(--dk) !important;
  line-height: 1 !important;
}

.stat-card .stat-label {
  font-size: 12px !important;
  color: var(--txM) !important;
  font-weight: 600 !important;
  margin-top: 4px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   23. الـ Tabs
   ══════════════════════════════════════════════════════════════════════════ */

.tab-bar {
  display: flex !important;
  gap: 4px !important;
  background: var(--bgD) !important;
  border-radius: 14px !important;
  padding: 4px !important;
}

.tab-btn,
.nav-tab {
  border-radius: 10px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--txM) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: var(--trF) !important;
  font-family: var(--FT) !important;
}

.tab-btn.active,
.nav-tab.active,
.tab-active {
  background: #fff !important;
  color: var(--dk) !important;
  font-weight: 800 !important;
  box-shadow: var(--s1) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   24. الـ Empty State
   ══════════════════════════════════════════════════════════════════════════ */

.empty-state {
  padding: 60px 32px !important;
  text-align: center !important;
  border-radius: var(--r-xl) !important;
  background: #fff !important;
  border: 1.5px dashed var(--bdG) !important;
}

.empty-state .empty-icon {
  font-size: 48px !important;
  margin-bottom: 16px !important;
  opacity: 0.6 !important;
}

.empty-state p {
  color: var(--txM) !important;
  font-size: 14px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   25. الـ Pagination
   ══════════════════════════════════════════════════════════════════════════ */

.pagination {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
}

.pagination a,
.pagination button,
.page-link {
  border-radius: 10px !important;
  padding: 7px 13px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--tx) !important;
  background: #fff !important;
  border: 1px solid var(--bdS) !important;
  transition: var(--trF) !important;
}

.pagination a:hover,
.pagination button:hover,
.page-link:hover {
  background: var(--tlS) !important;
  border-color: var(--bdG) !important;
  color: var(--dk) !important;
}

.pagination .active,
.page-item.active .page-link {
  background: var(--tl) !important;
  color: #fff !important;
  border-color: var(--tl) !important;
  box-shadow: 0 3px 10px rgba(0,184,122,0.35) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   26. الـ Mobile Nav
   ══════════════════════════════════════════════════════════════════════════ */

.mobile-admin-nav,
.mobile-nav {
  background: var(--dk) !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
}

.mobile-admin-nav a,
.mobile-nav a {
  color: rgba(255,255,255,0.55) !important;
  transition: var(--trF) !important;
}

.mobile-admin-nav a.active,
.mobile-nav a.active {
  color: var(--tl) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   27. الـ Loading / Spinner
   ══════════════════════════════════════════════════════════════════════════ */

.spinner,
.loader {
  border: 3px solid var(--bgD) !important;
  border-top-color: var(--tl) !important;
  border-radius: 50% !important;
  animation: spin 0.8s linear infinite !important;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   28. الأنيميشن
   ══════════════════════════════════════════════════════════════════════════ */

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,184,122,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(0,184,122,0); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.anim-fu { animation: slideInUp 0.5s var(--ease) both; }
.anim-si { animation: fadeInScale 0.45s var(--ease) both; }
.pulse-green { animation: pulseGreen 2s infinite; }

.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.10s; }
.d3 { animation-delay: 0.15s; }
.d4 { animation-delay: 0.20s; }
.d5 { animation-delay: 0.25s; }
.d6 { animation-delay: 0.30s; }

/* ══════════════════════════════════════════════════════════════════════════
   29. الـ Ring Cards (بطاقات الحلقة الدائرية)
   ══════════════════════════════════════════════════════════════════════════ */

.pt-ring-card {
  border-radius: var(--r-lg) !important;
  transition: var(--tr) !important;
  background: #fff !important;
  box-shadow: var(--s2) !important;
}

.pt-ring-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: var(--s4) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   30. الـ Reward Cards
   ══════════════════════════════════════════════════════════════════════════ */

.reward-card {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--s2) !important;
  transition: var(--tr) !important;
  overflow: hidden !important;
}

.reward-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--s4) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   31. الـ Filter Bar
   ══════════════════════════════════════════════════════════════════════════ */

.filter-bar {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  background: #fff !important;
  border-radius: var(--r-md) !important;
  padding: 12px 16px !important;
  box-shadow: var(--s1) !important;
  border: 1px solid var(--bdS) !important;
  margin-bottom: 16px !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   32. الـ Responsive
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .admin-main { padding: 16px 14px 80px !important; }
  .card { border-radius: var(--r-md) !important; }
  .modal-box { border-radius: 24px 24px 0 0 !important; }
  .page-header { border-radius: var(--r-lg) !important; padding: 20px 20px !important; }
  .page-header h1 { font-size: 18px !important; }
  .table-wrap { border-radius: var(--r-md) !important; }
  .filter-bar { padding: 10px 12px !important; }
}

@media (max-width: 480px) {
  .admin-main { padding: 12px 10px 80px !important; }
  .page-header { padding: 16px !important; }
  .btn { padding: 9px 16px !important; font-size: 12.5px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   33. متغيرات إضافية للتوافق مع الكود القديم
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --green:       var(--tl);
  --green-dark:  var(--dk);
  --green-light: var(--tlS);
  --cream:       var(--bgL);
  --cream-dark:  var(--bgD);
  --gold:        var(--gd);
  --gold-light:  var(--gdS);
  --radius-sm:   var(--r-sm);
  --radius-md:   var(--r-md);
  --radius-lg:   var(--r-lg);
  --radius-xl:   var(--r-xl);
  --shadow-xs:   var(--s0);
  --shadow-sm:   var(--s1);
  --shadow-md:   var(--s2);
  --shadow-lg:   var(--s3);
  --shadow-xl:   var(--s4);
  --glow-tl:     var(--sG);
  --glow-tl-lg:  var(--sGH);
  --trans-fast:  var(--trF);
  --trans-med:   var(--tr);
  --trans-slow:  var(--trS);
}