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