/* ════════════════════════════════════════════════════
   منصة خطوة — إضافات التصميم v2.7 (يستورد main.css تلقائياً)
   يُحمَّل بدلاً من main.css — يجمع الأصل + الإضافات
════════════════════════════════════════════════════ */

/* ══ استيراد main.css الأصلي أولاً (ضروري للتخطيط) ══ */
@import url('main.css');

/* ══ متغيرات إضافية ══ */
:root {
  --kh-g1:#0D5C45; --kh-g2:#00B87A; --kh-g3:#1A7A5E; --kh-g4:#0A4A37;
  --kh-gold:#F5C518; --kh-cream:#F4F0EB;
  --kh-shadow: 0 2px 12px rgba(13,92,69,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --kh-shadow-h: 0 8px 32px rgba(13,92,69,0.14);
  --kh-r: 16px;
}

/* ══════════════════════════════════════════════════
   اللوقو في الـ Sidebar
══════════════════════════════════════════════════ */
.sidebar-logo-wrap {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.10);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border: 1px solid rgba(255,255,255,0.15);
}
.sidebar-logo-wrap img, .khatwa-logo-img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: screen; filter: brightness(1.1);
}

/* ══════════════════════════════════════════════════
   أيقونات SVG في السايدبار
══════════════════════════════════════════════════ */
.admin-sidebar .nav-icon,
.sidebar-dropdown-toggle .nav-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
  opacity: 0.75; transition: opacity 0.2s;
}
.admin-sidebar .nav-icon svg,
.sidebar-dropdown-toggle .nav-icon svg { width:15px; height:15px; stroke:currentColor; }
.admin-sidebar .sidebar-nav a:hover .nav-icon,
.admin-sidebar .sidebar-nav a.active .nav-icon,
.sidebar-dropdown-toggle:hover .nav-icon { opacity: 1; }

/* روابط السايدبار تحتوي أيقونة + نص */
.sidebar-nav a, .sidebar-dropdown-menu a {
  display: flex !important; align-items: center; gap: 8px;
}

/* بحث السايدبار */
.sidebar-search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10); border-radius: 8px;
  padding: 7px 10px; margin: 8px 12px 4px;
  transition: background 0.2s, border-color 0.2s;
}
.sidebar-search:focus-within {
  background: rgba(255,255,255,0.12); border-color: rgba(0,184,122,0.4);
}
.sidebar-search input {
  background: none; border: none; outline: none;
  color: rgba(255,255,255,0.85); font-size: 12px;
  font-family: inherit; width: 100%; direction: rtl;
}
.sidebar-search input::placeholder { color: rgba(255,255,255,0.30); }

/* ══════════════════════════════════════════════════
   لوحة الادمن — KPI CARDS تحسينات
══════════════════════════════════════════════════ */
.kpi-card {
  transition: transform 0.2s, box-shadow 0.2s !important;
  position: relative; overflow: hidden;
}
.kpi-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--kh-shadow-h) !important;
}
.kpi-card::after {
  content: ''; position: absolute; top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 0 var(--kh-r) 0 80px;
  background: var(--kh-g1); opacity: 0.05;
  pointer-events: none;
}

.kpi-val { font-weight: 900 !important; color: var(--kh-g1) !important; }

/* Welcome Strip */
.welcome-strip {
  background: linear-gradient(135deg,#0D5C45 0%,#1A7A5E 50%,#00B87A 100%) !important;
  box-shadow: 0 4px 20px rgba(13,92,69,0.25) !important;
  position: relative; overflow: hidden;
}
.welcome-strip::before {
  content: ''; position: absolute; bottom: -40px; left: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,0.04); pointer-events: none;
}

/* Alert Strips */
.alert-strip {
  border-radius: 12px !important;
  border: 1px solid rgba(13,92,69,0.15) !important;
}
.alert-strip.warn { background: rgba(245,158,11,0.08) !important; }
.alert-strip.info { background: rgba(0,184,122,0.07) !important; }

/* ══════════════════════════════════════════════════
   صفحة التقارير — تحسينات الجداول
══════════════════════════════════════════════════ */
.admin-table { border-collapse: collapse; }
.admin-table th {
  background: rgba(13,92,69,0.06) !important;
  color: var(--kh-g1) !important; font-weight: 700 !important;
  border-bottom: 2px solid rgba(13,92,69,0.12) !important;
}
.admin-table td { border-bottom: 1px solid rgba(13,92,69,0.05) !important; }
.admin-table tr:hover td { background: rgba(0,184,122,0.04) !important; }
.admin-table tr:last-child td { border-bottom: none !important; }

/* شارات الترتيب للتقارير */
.rank-badge {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.rank-badge-1 { background: linear-gradient(135deg,#F5C518,#D4A843); color: #0D1F17; box-shadow: 0 2px 6px rgba(245,197,24,0.4); }
.rank-badge-2 { background: linear-gradient(135deg,#B0B8C1,#8D97A2); color: #fff; }
.rank-badge-3 { background: linear-gradient(135deg,#CD7F32,#A0522D); color: #fff; }

/* شريط تقدم مخصص للتقارير */
.kh-progress { background: rgba(13,92,69,0.08); border-radius: 6px; height: 6px; overflow: hidden; }
.kh-progress-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg,var(--kh-g2),var(--kh-g1));
  min-width: 4px;
}

/* ══════════════════════════════════════════════════
   تحسين عام على الصفحة الرئيسية Admin
══════════════════════════════════════════════════ */
.admin-main { background: #F4F0EB !important; }

/* Cohort bar */
.cohort-bar { border-radius: 14px !important; }

/* ══════════════════════════════════════════════════
   تحسينات صفحة المشارك
══════════════════════════════════════════════════ */
.dash-hdr {
  background: linear-gradient(135deg,#0D5C45,#1A7A5E,#00B87A) !important;
  box-shadow: 0 4px 20px rgba(13,92,69,0.25) !important;
}

/* ══════════════════════════════════════════════════
   الانيميشن
══════════════════════════════════════════════════ */
@keyframes kh-fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes kh-slideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes kh-slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

.anim-1 { animation: kh-slideDown 0.35s ease both !important; }
.anim-2 { animation: kh-slideDown 0.35s 0.08s ease both !important; }
.anim-3 { animation: kh-slideDown 0.35s 0.16s ease both !important; }
.anim-4 { animation: kh-slideDown 0.35s 0.24s ease both !important; }

/* ══════════════════════════════════════════════════
   Responsive
══════════════════════════════════════════════════ */
@media(max-width:768px) {
  .sidebar-search { display: none; }
}