/* ============================================================
   learn.css — أنماط صفحة الدرس ولوحة الطالب
   ============================================================ */

[hidden] { display: none !important; }
.icon-flip { transform: scaleX(-1); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }

/* ==================== صفحة الدرس ==================== */
.lesson-page { padding-block: 1.75rem 3.5rem; }

.lesson-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

/* ---------- الشريط الجانبي: فصول الكورس ---------- */
.lesson-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  max-height: calc(100vh - var(--header-h) - 2.5rem);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.sidebar-head {
  padding: 1.1rem 1.15rem;
  border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .6rem;
}
.sidebar-head h2 {
  font-size: .95rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.sidebar-progress-label { font-size: .78rem; color: var(--text-2); font-weight: 700; }

.curr-scroll { position: relative; overflow-y: auto; padding: .6rem; }

.curr-module + .curr-module { margin-top: .9rem; }
.curr-module-title {
  display: flex; align-items: center; gap: .55rem;
  font-size: .8rem; font-weight: 800; color: var(--text-2);
  padding: .35rem .5rem;
}
.module-num {
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 7px;
  background: var(--primary-soft); color: var(--primary-ink);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 900;
}
.curr-module-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.curr-lesson {
  display: flex; align-items: center; gap: .6rem;
  padding: .58rem .65rem;
  border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 600;
  color: var(--text-2);
  transition: background var(--transition), color var(--transition);
}
.curr-lesson:hover { background: var(--surface-2); color: var(--text); }
.curr-lesson.active { background: var(--primary-soft); color: var(--primary-ink); }
.curr-lesson.active .l-title { font-weight: 800; }
.curr-lesson .l-icon { flex-shrink: 0; color: var(--text-3); }
.curr-lesson.done .l-icon { color: var(--success); }
.curr-lesson .l-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.curr-lesson .l-dur { font-size: .72rem; color: var(--text-3); direction: ltr; flex-shrink: 0; }

/* ---------- المحتوى الرئيسي ---------- */
.lesson-content { padding: 1.75rem; }

.lesson-topline {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-size: .83rem; color: var(--text-3);
  margin-bottom: .9rem;
}
.lesson-topline a:hover { color: var(--primary-ink); }
.lesson-content h1 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin-bottom: .85rem; }

.lesson-meta-row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.points-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--accent-soft); color: var(--accent-dark);
  font-weight: 800; font-size: .85rem;
  padding: .35rem .95rem;
  border-radius: 999px;
}
[data-theme="dark"] .points-chip { color: var(--accent); }
.points-chip .icon { color: var(--accent); }
.points-chip b { font-size: 1.02rem; }
@keyframes chipPop { 0% { transform: scale(1); } 45% { transform: scale(1.2); } 100% { transform: scale(1); } }
.points-chip.pop { animation: chipPop .5s ease; }

/* مشغل الفيديو */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
#playerMount, .video-frame iframe {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important;
  border: 0;
}
.video-none {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .7rem; padding: 1rem; text-align: center;
  color: #cbd5e1; font-size: .92rem;
  background: linear-gradient(135deg, #16296b, #1e3a8a);
}

.lesson-desc { color: var(--text-2); margin-bottom: 1.6rem; white-space: pre-line; font-size: .95rem; }

/* المرفقات */
.attachments { margin-bottom: 1.75rem; }
.attachments h2 {
  font-size: 1.02rem; margin-bottom: .85rem;
  display: flex; align-items: center; gap: .5rem;
}
.attachments h2 .icon { color: var(--accent); }
.attachment {
  display: flex; align-items: center; gap: .7rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .75rem .95rem;
  margin-bottom: .5rem;
  font-weight: 700; font-size: .9rem;
  transition: border-color var(--transition), background var(--transition);
}
.attachment:hover { border-color: var(--accent); background: var(--accent-soft); }
.attachment .icon:first-child { color: var(--primary-ink); }
.attachment .dl { margin-inline-start: auto; color: var(--text-3); }

/* ---------- اختبار الحلقة ---------- */
.lesson-quiz { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px dashed var(--border); }
.quiz-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.quiz-heading h2 { font-size: 1.1rem; }
.quiz-heading p { color: var(--text-2); font-size: .82rem; }
.quiz-heading > .icon { color: var(--accent); }
.lesson-quiz-questions { display: grid; gap: .8rem; }
.lesson-quiz .quiz-question { min-width: 0; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.lesson-quiz .quiz-question legend { max-width: 100%; padding-inline: .25rem; font-weight: 800; font-size: .92rem; }
.quiz-answer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.quiz-option { min-width: 0; display: flex; align-items: flex-start; gap: .55rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.quiz-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.quiz-option input { flex: 0 0 auto; margin-top: .25rem; accent-color: var(--primary); }
.quiz-option span { overflow-wrap: anywhere; }
.lesson-quiz #submitLessonQuiz { margin-top: 1rem; }
.quiz-result { margin-top: 1rem; padding: .9rem 1rem; border-radius: var(--radius-sm); font-weight: 800; }
.quiz-result.passed { color: var(--success); background: var(--success-soft); }
.quiz-result.failed { color: var(--danger); background: var(--danger-soft); }

/* أزرار التنقل والإتمام */
.lesson-actions {
  display: flex; gap: .7rem; flex-wrap: wrap;
  border-top: 1px dashed var(--border);
  padding-top: 1.4rem;
}
.btn-complete.done { background: var(--success); box-shadow: 0 8px 20px -6px rgba(22,163,74,.45); }
.btn-complete.done:hover { background: #12813b; }

/* ---------- الملاحظات الزمنية ---------- */
.notes-section { margin-top: 1.75rem; padding: 1.75rem; }
.notes-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.15rem; }
.notes-head h2 { font-size: 1.1rem; display: flex; align-items: center; gap: .55rem; }
.notes-head h2 .icon { color: var(--accent); }

.note-composer {
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.note-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.note-composer textarea {
  width: 100%; min-height: 74px; resize: vertical;
  border: 0; background: transparent;
  color: var(--text);
  padding: .9rem 1rem;
  font-family: inherit; font-size: .95rem; line-height: 1.7;
}
.note-composer textarea:focus { outline: none; }
.composer-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .6rem .8rem;
  background: var(--surface-2);
  flex-wrap: wrap;
}
.composer-hint { font-size: .78rem; color: var(--text-3); }
.composer-hint b { color: var(--accent); direction: ltr; display: inline-block; }

.note-item {
  display: flex; gap: .8rem;
  padding: .95rem .35rem;
  border-bottom: 1px dashed var(--border);
}
.note-item:last-child { border-bottom: 0; }

.note-time {
  flex-shrink: 0; align-self: flex-start;
  background: var(--accent-soft); color: var(--accent-dark);
  border: 0; border-radius: 8px;
  font-family: inherit;
  font-weight: 800; font-size: .78rem;
  padding: .3rem .6rem; direction: ltr;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
[data-theme="dark"] .note-time { color: var(--accent); }
.note-time:hover { background: var(--accent); color: #fff; }

.note-body { flex: 1; min-width: 0; }
.note-text { font-size: .93rem; white-space: pre-wrap; word-break: break-word; }
.note-foot { font-size: .72rem; color: var(--text-3); margin-top: .3rem; }

.note-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.note-actions button {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  transition: background var(--transition), color var(--transition);
}
.note-actions button:hover { background: var(--surface-2); color: var(--primary-ink); }
.note-actions button.danger:hover { color: var(--danger); }

.note-edit textarea {
  width: 100%; min-height: 64px; resize: vertical;
  border: 1.5px solid var(--accent); border-radius: 8px;
  background: var(--surface); color: var(--text);
  padding: .6rem .75rem;
  font-family: inherit; font-size: .92rem; line-height: 1.7;
}
.note-edit textarea:focus { outline: none; }
.note-edit-actions { display: flex; gap: .5rem; margin-top: .5rem; }

.notes-empty { text-align: center; color: var(--text-3); font-size: .9rem; padding: 1.5rem 0; }

/* ---------- نوافذ الإنجاز والتأكيد ---------- */
.done-hero {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--success-soft); color: var(--success);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.1rem;
}
.done-actions {
  display: flex; gap: .7rem; justify-content: center;
  margin-top: 1.4rem; flex-wrap: wrap;
}

/* ---------- استجابة ---------- */
@media (max-width: 900px) {
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-sidebar { position: static; order: 2; max-height: none; }
  .lesson-main { order: 1; }
  .lesson-content { padding: 1.25rem; }
}

/* ==================== لوحة الطالب ==================== */
.dash-page { padding-block: 2rem 3.5rem; }
.page-head h1 { font-size: clamp(1.35rem, 3vw, 1.8rem); margin-bottom: .35rem; }
.page-head p { color: var(--text-2); margin-bottom: 2rem; }

.dash-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin-bottom: 2.25rem;
}
.stat-card { padding: 1.25rem; display: flex; align-items: center; gap: .9rem; }
.stat-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.stat-icon.a { background: var(--accent-soft);  color: var(--accent); }
.stat-icon.b { background: var(--primary-soft); color: var(--primary-ink); }
.stat-value { font-size: 1.45rem; font-weight: 900; line-height: 1.2; }
.stat-label { font-size: .8rem; color: var(--text-2); }

.dash-section-title {
  font-size: 1.15rem; margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: .55rem;
}
.dash-section-title .icon { color: var(--accent); }

.dash-insights {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 1rem;
  margin-bottom: 2.25rem;
}
.insight-panel { min-width: 0; padding: 1.25rem; }
.insight-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.insight-head .dash-section-title { margin-bottom: 1rem; }
.insight-total { color: var(--primary-ink); font-size: 1.35rem; font-weight: 900; direction: ltr; }
.insight-count { color: var(--text-2); font-size: .8rem; direction: ltr; }
.progress-chart, .course-level-list { display: grid; gap: .9rem; }
.progress-chart-row { min-width: 0; }
.chart-row-label { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .35rem; font-size: .82rem; }
.chart-row-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-row-label b { flex: 0 0 auto; direction: ltr; }
.chart-track { height: 9px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.chart-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width .5s ease; }
.achievement-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.achievement-tile {
  min-width: 0; min-height: 78px; padding: .7rem;
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
}
.achievement-tile.earned { border-color: rgba(245, 158, 11, .35); background: var(--accent-soft); }
.achievement-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: var(--surface-2); color: var(--text-3); }
.achievement-tile.earned .achievement-icon { background: var(--accent); color: #fff; }
.achievement-copy { min-width: 0; }
.achievement-copy b, .achievement-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.achievement-copy b { font-size: .76rem; }
.achievement-copy span { color: var(--text-2); font-size: .68rem; }
.course-level-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-block: .55rem; border-bottom: 1px solid var(--border); }
.course-level-row:last-child { border-bottom: 0; }
.course-level-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 700; }
.course-level-tag { flex: 0 0 auto; color: var(--primary-ink); background: var(--primary-soft); border-radius: 999px; padding: .2rem .6rem; font-size: .72rem; font-weight: 800; }
.insight-empty { color: var(--text-2); font-size: .83rem; }

/* بطاقة "أكمل من حيث توقفت" */
.continue-card {
  display: flex; gap: 1.5rem; align-items: center;
  padding: 1.5rem; margin-bottom: 2.25rem;
}
.continue-card .c-thumb {
  width: 200px; aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden; flex-shrink: 0; position: relative;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .8);
}
.continue-card .c-thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-body { flex: 1; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.c-body h3 { font-size: 1.15rem; }
.c-sub { font-size: .85rem; color: var(--text-2); }
.c-body .btn { align-self: flex-start; }

/* شبكة كورساتي */
.my-courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
}
.my-course-card {
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.my-course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mc-thumb {
  aspect-ratio: 16 / 9; position: relative;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .8);
}
.mc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-percent {
  position: absolute; bottom: .6rem; inset-inline-end: .6rem;
  background: rgba(8, 12, 24, .75); color: #fff;
  font-size: .75rem; font-weight: 800;
  padding: .2rem .6rem; border-radius: 999px; direction: ltr;
  z-index: 1;
}
.mc-body { padding: 1.1rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.mc-body h3 { font-size: 1rem; }
.mc-actions { margin-top: auto; display: flex; gap: .5rem; }

@media (max-width: 767px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-insights { grid-template-columns: 1fr; }
  .continue-card { flex-direction: column; align-items: stretch; }
  .continue-card .c-thumb { width: 100%; }
  .c-body .btn { align-self: stretch; }
}

@media (max-width: 575px) {
  .quiz-answer-options { grid-template-columns: 1fr; }
}