/* =====================================================================
   ACADEMY — تحسينات صفحات الأكاديمية (اختبار/نتيجة/قوائم)
   يعتمد توكنات docs-theme.css (--brand / --dt-*) المحمّلة على لياوت المعلم.
   RTL-first، يدعم الوضع الداكن (html.dark-style). بلا تغيير منطق.
   ===================================================================== */

/* صور المحتوى داخل الأسئلة (نُقل من inline) */
.ac-wrap img { max-width: 100%; height: auto; display: block; object-fit: cover; }
@media (max-width: 768px) { .ac-wrap img { margin: 0 auto; width: 100%; } }

/* ---------------------------------------------------------------------
   ترويسة الصفحة
   --------------------------------------------------------------------- */
/* ترويسة فاتحة بسيطة — لمسة زجاجية + لمسة هوية على الحافة */
.ac-head {
  position: relative; overflow: hidden; border-radius: 16px;
  padding: 1.35rem 1.5rem; margin-bottom: 1.1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .58));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .7);
  border-inline-start: 5px solid var(--brand, #D46E2A);
  box-shadow: 0 10px 30px rgba(16, 24, 40, .07), inset 0 1px 0 rgba(255, 255, 255, .6);
}
/* توهّج نحاسي خفيف جداً في الزاوية */
.ac-head::after {
  content: ""; position: absolute; inset-inline-end: -60px; top: -60px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 110, 42, .10), transparent 70%); pointer-events: none;
}
.ac-head h1, .ac-head h2 {
  font-weight: 800; margin: 0 0 .3rem; font-size: 1.4rem; position: relative;
  letter-spacing: -.2px; color: var(--dt-text, #1F2937);
}
.ac-head h1 i, .ac-head h2 i { color: var(--brand, #D46E2A); }
.ac-head .ac-sub { color: var(--dt-text-2, #6B7280); margin: 0; position: relative; font-weight: 500; }
.ac-head-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; position: relative; }
.ac-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--brand-soft, rgba(212, 110, 42, .1)); border: 1px solid rgba(212, 110, 42, .18);
  color: var(--brand-hover, #B85B21); border-radius: 999px; padding: .35rem .85rem; font-size: .85rem; font-weight: 700;
}
.ac-chip i { color: var(--brand, #D46E2A); }

/* داكن — الترويسة تصبح بطاقة داكنة */
html.dark-style .ac-head {
  background: linear-gradient(135deg, rgba(58, 63, 88, .6), rgba(45, 50, 70, .5));
  border-color: rgba(255, 255, 255, .1); border-inline-start-color: var(--brand, #D46E2A);
}
html.dark-style .ac-head h1, html.dark-style .ac-head h2 { color: #E4E6F1; }
html.dark-style .ac-head .ac-sub { color: rgba(228, 230, 241, .65); }
html.dark-style .ac-chip { background: rgba(212, 110, 42, .16); color: #F2B58C; border-color: rgba(212, 110, 42, .3); }

/* ---------------------------------------------------------------------
   بطاقة الاختبار — الأسئلة
   --------------------------------------------------------------------- */
.ac-exam .accordion-item {
  border: 1px solid rgba(255, 255, 255, .6) !important; border-radius: 14px !important;
  overflow: hidden; margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .55));
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 8px 22px rgba(16, 24, 40, .06);
}
.ac-exam .accordion-button {
  background: transparent !important; box-shadow: none !important; padding: 1rem 1.1rem;
  font-weight: 700; color: var(--dt-text, #1F2937); align-items: flex-start;
}
.ac-exam .accordion-button:not(.collapsed) {
  background: linear-gradient(180deg, rgba(212,110,42,.07), rgba(212,110,42,.02)) !important;
}
.ac-q-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand, #D46E2A), var(--brand-hover, #B85B21));
  color: #fff; font-weight: 800; font-size: .95rem; margin-inline-end: .7rem;
}
.ac-q-text { line-height: 1.7; color: var(--dt-text, #1F2937); font-size: 1.02rem; }
.ac-q-points {
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(240, 173, 78, .16); color: #B26A00;
  border-radius: 999px; padding: .1rem .6rem; font-size: .78rem; font-weight: 700; white-space: nowrap;
}
.ac-q-req { color: #E5484D; font-weight: 800; }

/* الخيارات — صفوف قابلة للنقر تُبرز المحدّد */
.ac-exam .accordion-body { padding: .5rem 1.1rem 1.1rem; }
.ac-option {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem; margin-bottom: .6rem; border-radius: 12px;
  border: 1.5px solid var(--dt-line, #E7EAF0); background: #F7F9FC; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .12s ease;
}
.ac-option:hover { border-color: rgba(212,110,42,.5); background: rgba(212,110,42,.06); }
.ac-option:active { transform: scale(.995); }
.ac-option .form-check-input { margin: 0; width: 1.2em; height: 1.2em; flex-shrink: 0; cursor: pointer; }
.ac-option .form-check-input:checked { background-color: var(--brand, #D46E2A); border-color: var(--brand, #D46E2A); }
.ac-option .form-check-label { cursor: pointer; margin: 0; color: var(--dt-text, #1F2937); font-weight: 500; }
.ac-option:has(.form-check-input:checked) {
  border-color: var(--brand, #D46E2A); background: rgba(212,110,42,.08);
  box-shadow: 0 4px 12px rgba(212,110,42,.15);
}

/* زر الإرسال */
.ac-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 2rem; border: 0; border-radius: 14px; cursor: pointer;
  font-weight: 800; font-size: 1.02rem; color: #fff;
  background: linear-gradient(135deg, #E8A05F 0%, #D46E2A 45%, #B85B21 100%);
  box-shadow: 0 10px 24px rgba(212,110,42,.38), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ac-submit:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(212,110,42,.5); color: #fff; }

/* ---------------------------------------------------------------------
   عناصر مشتركة: أزرار / نتيجة / قوائم
   --------------------------------------------------------------------- */
.ac-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.15rem; border-radius: 10px; font-weight: 700; text-decoration: none;
  border: 1.5px solid rgba(212, 110, 42, .4); color: var(--brand-hover, #B85B21); background: #fff;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.ac-btn:hover { background: var(--brand-soft, rgba(212,110,42,.1)); border-color: var(--brand, #D46E2A); color: var(--brand-hover, #B85B21); transform: translateY(-1px); }
.ac-btn:active { transform: translateY(0) scale(.985); }

/* نتيجة الاختبار — لوحة النتيجة */
.ac-score { display: inline-flex; align-items: baseline; gap: .4rem; font-weight: 700; }
.ac-score .num { font-size: 2rem; font-weight: 800; color: var(--brand, #D46E2A); line-height: 1; }
.ac-score .sep { color: var(--dt-text-2, #6B7280); }

/* حالات خيارات النتيجة (الإجابة الصحيحة / اختيار المتدرّب) */
.ac-exam .form-check.text-success { color: #1c8f5a !important; }
.ac-exam .form-check.text-success .form-check-label { color: #1c8f5a !important; font-weight: 700; }
.ac-res-opt {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem;
  border-radius: 12px; margin-bottom: .55rem; border: 1.5px solid var(--dt-line, #E7EAF0); background: #F7F9FC;
}
.ac-res-opt.is-correct { border-color: rgba(28, 143, 90, .5); background: rgba(28, 143, 90, .08); }
.ac-res-opt.is-wrong { border-color: rgba(229, 72, 77, .5); background: rgba(229, 72, 77, .07); }
.ac-res-opt .tag { margin-inline-start: auto; font-size: .78rem; font-weight: 800; border-radius: 999px; padding: .12rem .6rem; }
.ac-res-opt.is-correct .tag { background: rgba(28,143,90,.16); color: #1c8f5a; }
.ac-res-opt.is-wrong .tag { background: rgba(229,72,77,.16); color: #E5484D; }

/* قائمة الاختبارات */
.ac-list { list-style: none; padding: 0; margin: 0; }
.ac-list-item { margin-bottom: .6rem; }
.ac-list-item a {
  display: flex; align-items: center; gap: .8rem;
  padding: .95rem 1.1rem; border-radius: 12px; text-decoration: none;
  color: var(--dt-text, #1F2937); font-weight: 600;
  background: linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.55));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 6px 16px rgba(16,24,40,.05);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ac-list-item a:hover { border-color: rgba(212,110,42,.5); transform: translateX(-4px); box-shadow: 0 10px 22px rgba(16,24,40,.08); }
.ac-list-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; font-weight: 800; font-size: .9rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft, rgba(212,110,42,.1)); color: var(--brand-hover, #B85B21);
}
.ac-list-item a .ti-chevron-left { margin-inline-start: auto; color: var(--brand, #D46E2A); }

/* ---------------------------------------------------------------------
   الوضع الداكن
   --------------------------------------------------------------------- */
html.dark-style .ac-btn { background: rgba(255,255,255,.04); color: #F2B58C; }
html.dark-style .ac-res-opt { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
html.dark-style .ac-list-item a { background: linear-gradient(135deg, rgba(58,63,88,.6), rgba(45,50,70,.5)); border-color: rgba(255,255,255,.08); color: #E4E6F1; }
html.dark-style .ac-list-num { background: rgba(212,110,42,.16); color: #F2B58C; }
html.dark-style .ac-exam .accordion-item {
  background: linear-gradient(135deg, rgba(58, 63, 88, .6), rgba(45, 50, 70, .5));
  border-color: rgba(255,255,255,.08) !important;
}
html.dark-style .ac-exam .accordion-button { background: transparent !important; color: #E4E6F1; }
html.dark-style .ac-exam .accordion-button:not(.collapsed) { background: linear-gradient(180deg, rgba(212,110,42,.16), rgba(212,110,42,.04)) !important; }
html.dark-style .ac-option { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.03); }
html.dark-style .ac-option:hover { background: rgba(212,110,42,.12); }
html.dark-style .ac-option .form-check-label { color: #E4E6F1; }
html.dark-style .ac-q-text { color: #E4E6F1; }
html.dark-style .ac-option:has(.form-check-input:checked) { background: rgba(212,110,42,.16); }