/* ==================== لوحة تحكم الإدارة ==================== */
.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: var(--z-modal);
  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; }
}

/* ============================================================
   Accordion — التصنيفات والدروس (v9.1.2)
   ============================================================ */

.courses-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ── عنصر كورس واحد ── */
.course-item {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  transition: box-shadow 0.15s ease;
}
.course-item:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.course-item-orphan { border-style: dashed; opacity: 0.85; }

/* ── رأس الكورس (الشريط القابل للنقر) ── */
.course-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  user-select: none;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  transition: background 0.12s ease;
}
.course-header:hover {
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
}
.course-header:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

.course-icon  { font-size: 1.1rem; flex-shrink: 0; }
.course-name  { font-weight: 700; font-size: 0.95rem; color: var(--color-primary-dark); flex: 1; min-width: 0; }
.course-badge { font-family: var(--font-utility); font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; }

.course-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}
/* أزرار التعديل/الحذف لا تُوسّع الكورس عند الضغط عليها */
.course-actions .btn { padding: 4px 10px; font-size: 0.78rem; }

.course-toggle {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-inline-start: var(--space-1);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.course-header[aria-expanded="true"] .course-toggle { transform: rotate(90deg); }

/* ── منطقة الأبناء (الدروس) ── */
.course-children {
  border-top: 1.5px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2, var(--color-surface));
}

.lessons-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

/* ── صف درس واحد ── */
.lesson-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.lesson-item.lesson-scheduled { border-color: color-mix(in srgb, var(--color-accent) 60%, var(--color-border)); }

.lesson-order {
  font-family: var(--font-utility);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  min-width: 1.8rem;
}
.lesson-title {
  flex: 1;
  font-size: 0.9rem;
  color: var(--color-text);
  min-width: 0;
  word-break: break-word;
}
.lesson-actions {
  display: flex;
  gap: var(--space-1);
  flex-shrink: 0;
}
.lesson-actions .btn { padding: 3px 9px; font-size: 0.76rem; }

/* زر "درس جديد في هذا التصنيف" */
.add-lesson-btn {
  margin-top: var(--space-1);
  font-size: 0.8rem;
}

/* ── حالة فارغة بداخل الكورس ── */
.lessons-list:empty::after {
  content: "لا توجد دروس في هذا التصنيف بعد.";
  display: block;
  font-family: var(--font-utility);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
}

@media (max-width: 600px) {
  .course-header { flex-wrap: wrap; gap: var(--space-2); }
  .course-name   { order: -1; width: 100%; }
  .course-badge  { display: none; }
}

/* ==================== v10.1: M1 — إزالة الأنماط المضمّنة من ملفات الإدارة ==================== */
.admin-flex-wrap          { flex-wrap: wrap; }
.admin-flex-2             { flex: 2; }
.admin-input-80           { width: 80px; }
.admin-mt-4               { margin-top: var(--space-4); }
.admin-mt-5               { margin-top: var(--space-5); }
.admin-mt-6               { margin-top: var(--space-6); }
.admin-mb-3               { margin-bottom: var(--space-3); }
.admin-ms-2               { margin-inline-start: var(--space-2); }
.admin-form-actions       { margin-top: var(--space-3); }
.admin-course-form        { margin-top: var(--space-5); }
.admin-children-hidden    { display: none; }
.admin-ticket-info        { cursor: pointer; flex: 1; }
.admin-support-toolbar    { display: flex; align-items: center; justify-content: space-between; margin: var(--space-4) 0; }
.admin-chat-form          { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.admin-chat-input         { flex: 1; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); }