/* ==================== لوحة تحكم الإدارة ==================== */
.admin-tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  margin: var(--space-4) 0 var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.admin-tab {
  flex-shrink: 0;
  font-family: var(--font-utility);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.admin-tab:hover { background: var(--color-surface-2); }
.admin-tab.active { background: var(--color-primary); color: #fff; }

/* -------------------- رسالة خطأ محلية لقسم فرعي فشل تحميله -------------------- */
/* تُستخدم عبر renderSection() في admin.js: تظهر مكان قسم واحد فقط دون التأثير
   على بقية أقسام التبويب الناجحة (مثل: فشل جلب سجل الإشعارات وحده). */
.admin-section-error {
  background: #FBEEEC;
  border-inline-start: 4px solid var(--color-danger);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
}
.admin-section-error p {
  font-family: var(--font-utility);
  font-size: 0.85rem;
  color: var(--color-danger);
  margin: 0;
}

/* -------------------- بطاقات الإحصائيات -------------------- */
.admin-stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .admin-stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .admin-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.admin-stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-sm);
}
.admin-stat-icon { font-size: 1.6rem; }
.admin-stat-value { font-family: var(--font-display); font-size: 1.7rem; color: var(--color-primary-dark); }
.admin-stat-label { font-family: var(--font-utility); font-size: 0.85rem; color: var(--color-text-muted); }
.admin-stat-sub { font-family: var(--font-utility); font-size: 0.76rem; color: var(--color-accent); }

/* -------------------- جداول عامة (دروس/مستخدمين) -------------------- */
.admin-table { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-table-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.admin-row-main { display: flex; flex-direction: column; gap: 4px; }
.admin-row-meta { font-family: var(--font-utility); font-size: 0.78rem; color: var(--color-text-muted); }
.admin-row-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.admin-danger-btn { color: var(--color-danger); border-color: var(--color-danger); }
.admin-danger-btn:hover { background: var(--color-danger); color: #fff; }

/* -------------------- محرّر الدرس: فقرات ووسائط -------------------- */
.admin-hint {
  font-family: var(--font-utility);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-inline-start: 4px solid var(--color-accent);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin: var(--space-4) 0;
}
.admin-subitems { display: flex; flex-direction: column; gap: var(--space-3); margin: var(--space-3) 0; }
.admin-subitem-row {
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.admin-subitem-row select { padding: 8px 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); font-family: var(--font-body); }
.admin-subitem-row textarea { flex: 1 1 220px; min-width: 180px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); font-family: var(--font-body); resize: vertical; }
.admin-subitem-row input[type="text"],
.admin-subitem-row input[type="url"] { flex: 1 1 160px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); font-family: var(--font-body); }

/* عنصر قابل للطي للنص المفرّغ (transcript) داخل صف الوسائط — على سطر كامل */
.admin-transcript-details {
  flex: 1 1 100%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.admin-transcript-details summary {
  cursor: pointer;
  font-family: var(--font-utility);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  user-select: none;
}
.admin-transcript-details textarea {
  width: 100%;
  margin-top: var(--space-2);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-body);
  resize: vertical;
  box-sizing: border-box;
}

/* -------------------- نموذج فتح تذكرة للمستخدم -------------------- */
.admin-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  background: var(--color-surface-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}
.admin-inline-form select,
.admin-inline-form input {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-family: var(--font-body);
}
.admin-inline-form input { flex: 1 1 200px; }

/* -------------------- شبكة أزرار التصدير -------------------- */
.admin-export-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .admin-export-grid { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------- عناصر الدروس: عرض الفقرات/الوسائط للمستخدم -------------------- */
.lesson-section-header {
  font-family: var(--font-display);
  color: var(--color-primary-dark);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}
.lesson-section-paragraph {
  margin-bottom: var(--space-3);
  line-height: 1.9;
}
.lesson-media-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); }
.lesson-media-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-utility);
  font-weight: 700;
  color: var(--color-primary-dark);
}
.lesson-media-link:hover { background: var(--color-border); }

/* -------------------- ⚙️ تبويب الإعداد والتشخيص -------------------- */
.admin-diag-list { display: flex; flex-direction: column; gap: var(--space-3); }
.admin-diag-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.admin-diag-row-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 6px; }
.admin-diag-icon { font-size: 1.1rem; }
.admin-diag-detail {
  font-family: var(--font-utility);
  font-size: 0.83rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   Autocomplete Combobox — حقل اختيار التصنيف الذكي
   ============================================================ */

.combo-wrapper {
  position: relative;
  width: 100%;
}

.combo-input {
  width: 100%;
  padding: 10px 38px 10px 14px;   /* مسافة لأيقونة الحالة */
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-utility);
  font-size: 0.92rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.combo-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* أيقونة الحالة (✓ / ✕) داخل الحقل */
.combo-status-icon {
  position: absolute;
  inset-inline-end: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  pointer-events: none;
  transition: color 0.15s;
}
.combo-valid   .combo-status-icon { color: #2e7d32; }
.combo-invalid .combo-status-icon { color: #c62828; }

/* حدود ملونة حسب الحالة */
.combo-valid   .combo-input { border-color: #2e7d32; }
.combo-invalid .combo-input { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198,40,40,0.12); }

/* القائمة العائمة */
.combo-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 1000;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  scroll-behavior: smooth;
}
.combo-dropdown.hidden { display: none; }

/* خيار واحد */
.combo-option {
  padding: 9px 14px;
  font-family: var(--font-utility);
  font-size: 0.9rem;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.1s;
  outline: none;
}
.combo-option:hover,
.combo-option:focus {
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--color-primary-dark);
}

/* لا يوجد نتائج */
.combo-no-result {
  padding: 9px 14px;
  font-family: var(--font-utility);
  font-size: 0.88rem;
  color: var(--color-text-muted);
  pointer-events: none;
}

/* رسالة خطأ أسفل الحقل */
.combo-error-msg {
  font-family: var(--font-utility);
  font-size: 0.82rem;
  color: #c62828;
  margin-top: 5px;
}
.combo-error-msg.hidden { display: none; }

/* ============================================================
   تخطيط قسمَي التصنيفات والدروس
   ============================================================ */

.admin-content-section {
  margin-bottom: var(--space-4);
}

.admin-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.admin-section-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--color-primary-dark);
}

/* نموذج إضافة/تعديل تصنيف */
.admin-course-form-wrap {
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.admin-course-form-wrap.hidden { display: none; }

.admin-course-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
@media (max-width: 600px) {
  .admin-course-form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   شارات حالة النشر المجدوَل
   ============================================================ */

/* شارة عامة */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
  margin-inline-start: var(--space-2);
}

/* 🟢 منشور */
.badge-published {
  background: color-mix(in srgb, #22c55e 15%, transparent);
  color: #15803d;
  border: 1px solid #86efac;
}

/* 🟡 مجدوَل */
.badge-scheduled {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  color: #92400e;
  border: 1px solid #fcd34d;
  cursor: help; /* لأن title يحمل وقت النشر الدقيق */
}

/* سطر عنوان الدرس مع الشارة */
.admin-row-title-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}