/* =========================================================
   QIMMA LEARNING / ASSESSMENTS V1
   Unified presentation for learning, quizzes, exams and certificates.
   Visual-only: no business logic changes.
   ========================================================= */
:root{
  --qa-shell: 900px;
  --qa-shell-wide: 1120px;
  --qa-surface: var(--surface, #fff);
  --qa-bg-soft: var(--surface-soft, var(--surface-soft));
}

/* Shared page shells */
.learning-page,
.quiz-take-page,
.exam-intro-page,
.exam-result-page,
.general-exams-page,
.public-quizzes-page{
  padding-block:clamp(30px,4vw,46px) clamp(56px,7vw,78px);
}
.learning-shell,
.quiz-take-shell,
.exam-intro-shell,
.exam-result-shell{max-width:var(--qa-shell)}

.qa-back-link{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:16px;color:var(--muted);font-size:var(--fs-sm);font-weight:750;
  text-decoration:none
}
.qa-back-link:hover{color:var(--primary)}

.qa-page-heading{margin:0 0 22px}
.qa-page-heading h1{margin:0;color:var(--primary-dark);font-size:clamp(1.55rem,2.8vw,2.25rem);line-height:1.25;letter-spacing:-.02em}
.qa-page-heading p{margin:7px 0 0;color:var(--muted);font-size:var(--fs-sm);line-height:1.8}

/* Learning */
.learning-progress-card{
  margin-bottom:18px;padding:14px 16px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)
}
.learning-progress-bar{height:9px;overflow:hidden;border-radius:999px;background:var(--surface-muted)}
.learning-progress-bar span{display:block;height:100%;border-radius:inherit;background:var(--primary)}
.learning-progress-meta{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:var(--muted);font-size:var(--fs-xs);font-weight:750}
.learning-video-card{overflow:hidden;margin-bottom:18px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface);box-shadow:var(--shadow-sm)}
.learning-video-wrap{aspect-ratio:16/9;background:#0e1714}
.learning-video-wrap iframe{display:block;width:100%;height:100%;border:0}
.learning-video-empty{padding:34px 20px;text-align:center;background:var(--surface-soft);border:0}
.learning-video-empty p{margin:0 0 14px;color:var(--muted);line-height:1.8}
.learning-complete-area{margin-top:18px;text-align:center}
.learning-complete-area .btn{min-height:46px;padding-inline:24px}
.learning-complete-banner{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--radius-pill);background:color-mix(in srgb,var(--success) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--success) 24%,var(--border));color:var(--success);font-weight:800}

/* Assessment cards */
.assessment-card{
  text-align:start;margin-bottom:14px;padding:20px 20px 18px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)
}
.assessment-card:hover{box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--primary) 16%,var(--border))}
.assessment-question-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:10px}
.assessment-question-title{margin:0;color:var(--text);font-size:var(--fs-md);line-height:1.75;font-weight:850}
.assessment-points{flex:0 0 auto;padding:4px 9px;border-radius:var(--radius-pill);background:var(--surface-soft);color:var(--muted);font-size:var(--fs-xs);font-weight:800;white-space:nowrap}
.assessment-options{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.assessment-option{
  display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid var(--border);border-radius:12px;
  background:var(--surface);cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease
}
.assessment-option:hover{border-color:color-mix(in srgb,var(--primary) 25%,var(--border));background:var(--q-surface-hover,var(--surface-soft))}
.assessment-option:has(input:focus-visible){outline:2px solid color-mix(in srgb,var(--primary) 30%,transparent);outline-offset:2px}
.assessment-option input{margin-top:3px;flex:0 0 auto;accent-color:var(--primary)}
.assessment-option.is-correct{border-color:color-mix(in srgb,var(--success) 58%,var(--border));background:color-mix(in srgb,var(--success) 8%,var(--surface))}
.assessment-option.is-wrong{border-color:color-mix(in srgb,var(--danger) 52%,var(--border));background:color-mix(in srgb,var(--danger) 7%,var(--surface))}
.assessment-option.is-locked{cursor:default}
.assessment-essay{margin-top:12px;min-height:120px;resize:vertical}
.assessment-score-note{margin-top:9px;color:var(--success);font-size:var(--fs-sm);font-weight:800}
.assessment-explanation{margin-top:12px;padding:12px 14px;border-radius:12px;background:var(--surface-soft);border:1px solid var(--border);color:var(--text);font-size:var(--fs-sm);line-height:1.85}
.assessment-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.assessment-actions .btn{min-height:44px}
.assessment-submit{
  position:sticky;bottom:14px;z-index:10;margin-top:18px;padding:10px;border:1px solid var(--border);
  border-radius:14px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm)
}
.assessment-submit .btn{width:100%;min-height:48px}

/* Exam intro */
.exam-intro-head{margin-bottom:22px}
.exam-intro-title{margin:0 0 8px;color:var(--primary-dark);font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.25}
.exam-intro-description{margin:0;color:var(--muted);line-height:1.9}
.exam-meta-card{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.exam-meta-item{padding:15px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-xs)}
.exam-meta-item span{display:block;color:var(--muted);font-size:var(--fs-xs);margin-bottom:4px}
.exam-meta-item strong{display:block;color:var(--text);font-size:var(--fs-md)}
.exam-start-card{padding:20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-sm)}
.exam-start-card .form-grid-2{margin-top:12px}.exam-rules-list{margin:10px 0 0;padding-inline-start:20px;line-height:2;color:var(--text)}.exam-start-details{padding:18px;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);margin-bottom:14px}.exam-start-details strong{color:var(--text)}.exam-start-note{margin:6px 0 12px;color:var(--muted);font-size:var(--fs-sm);line-height:1.8}.exam-start-form>.btn{min-height:46px}

/* Exam runner */
.exam-runner-page{padding:0 0 50px}
.exam-runner-shell{max-width:860px;padding-inline:20px;margin-inline:auto}
.exam-runner-bar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;margin-bottom:18px;background:var(--bg);border-bottom:1px solid var(--border)
}
.exam-runner-bar h1{margin:0;color:var(--primary-dark);font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.35}
.exam-runner-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.exam-runner-pill{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 11px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);font-size:var(--fs-xs);font-weight:800;color:var(--muted)}
.exam-runner-timer{color:var(--primary)!important}.exam-runner-timer.is-warning{color:var(--danger)!important;border-color:color-mix(in srgb,var(--danger) 35%,var(--border));background:color-mix(in srgb,var(--danger) 6%,var(--surface))}
.exam-runner-submit{margin-top:18px}
.exam-runner-submit .btn{min-height:50px;width:100%}

/* Result */
.result-score-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;margin:20px 0;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm)}
.result-score-main{text-align:center;min-width:150px}
.result-score-value{font-size:clamp(2.8rem,7vw,4.5rem);font-weight:950;line-height:1;letter-spacing:-.05em}
.result-status{margin-top:7px;font-weight:850}
.result-pass-mark{margin-top:4px;color:var(--muted);font-size:var(--fs-xs)}
.result-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.result-metric{padding:14px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft)}
.result-metric span{display:block;color:var(--muted);font-size:var(--fs-xs);margin-bottom:4px}
.result-metric strong{display:block;color:var(--text);font-size:var(--fs-md)}
.result-section{margin-top:28px}
.result-section-title{margin:0 0 12px;color:var(--primary-dark);font-size:var(--fs-lg);font-weight:900}
.result-history-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-xs)}
.result-history-wrap .data-table{margin:0;border:0;min-width:700px}
.result-review-card{margin-bottom:12px;padding:18px;border:1px solid var(--border);border-inline-start:4px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-xs)}
.result-review-card.is-correct{border-inline-start-color:var(--success)}
.result-review-card.is-wrong{border-inline-start-color:var(--danger)}
.result-review-title{display:block;color:var(--text);font-size:var(--fs-md);line-height:1.8}
.result-answer-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.result-answer-option{display:flex;justify-content:space-between;gap:12px;padding:9px 11px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.result-answer-option.is-correct{border-color:color-mix(in srgb,var(--success) 52%,var(--border));background:color-mix(in srgb,var(--success) 8%,var(--surface))}
.result-answer-option.is-picked-wrong{border-color:color-mix(in srgb,var(--danger) 50%,var(--border));background:color-mix(in srgb,var(--danger) 7%,var(--surface))}
.result-answer-label{font-size:var(--fs-sm);line-height:1.65}
.result-answer-state{font-size:var(--fs-xs);font-weight:800;white-space:nowrap}.result-unanswered{margin-top:8px;color:var(--muted);font-size:var(--fs-sm);line-height:1.7}

/* Certificate list */
.certificates-v2-page{max-width:1120px}
.certificates-v2-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.certificate-item-card{display:flex;flex-direction:column;min-height:230px;padding:20px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-xs)}
.certificate-item-card:hover{box-shadow:var(--shadow-sm);border-color:color-mix(in srgb,var(--primary) 18%,var(--border))}
.certificate-item-icon{width:46px;height:46px;display:grid;place-items:center;margin-bottom:14px;border-radius:14px;background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary);font-size:1.2rem}
.certificate-item-card h3{margin:0 0 8px;color:var(--primary-dark);font-size:var(--fs-md);line-height:1.55}
.certificate-item-card p{margin:0;color:var(--muted);font-size:var(--fs-sm);line-height:1.8}
.certificate-item-card p strong{color:var(--text)}
.certificate-item-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:16px}
.certificate-item-actions .btn{min-height:40px}

/* Verification */
.q-certificate-result{position:relative;overflow:hidden}
.q-certificate-result.valid::before{content:"";position:absolute;inset-inline-start:0;inset-block:0;width:5px;background:var(--success)}
.q-certificate-result.invalid::before{content:"";position:absolute;inset-inline-start:0;inset-block:0;width:5px;background:var(--danger)}
.q-cert-icon{box-shadow:0 0 0 6px color-mix(in srgb,var(--primary) 6%,transparent)}
.q-verify-admin-section{margin-top:30px}
.q-verify-admin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:14px;flex-wrap:wrap}

/* General exam / public quiz cards */
.general-exams-page .q-v2-grid,
.public-quizzes-page .courses-grid{align-items:stretch}
.general-exam-card,.public-quiz-card{display:flex;flex-direction:column;height:100%}
.general-exam-card .course-meta-row{margin-top:auto;padding-top:13px}
.general-exam-card .exam-attempt-summary{margin-top:10px;color:var(--muted);font-size:var(--fs-sm);line-height:1.7}
.general-exam-card .exam-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.public-quiz-card .course-body{display:flex;flex-direction:column;height:100%}
.public-quiz-card .public-quiz-meta{margin-top:auto;padding-top:14px;color:var(--primary);font-size:var(--fs-sm);font-weight:800;line-height:1.7}
.public-quiz-card .btn{margin-top:12px}

@media(max-width:900px){
  .result-score-card{grid-template-columns:1fr}
  .result-score-main{text-align:start;min-width:0}
  .result-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  .certificates-v2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .learning-page,.quiz-take-page,.exam-intro-page,.exam-result-page,.general-exams-page,.public-quizzes-page{padding-block:24px 48px}
  .exam-meta-card{grid-template-columns:1fr 1fr}
  .exam-runner-shell{padding-inline:14px}
  .exam-runner-bar{align-items:flex-start;flex-direction:column;gap:8px}
  .exam-runner-meta{width:100%;justify-content:space-between}
  .result-metrics{grid-template-columns:1fr}
  .certificates-v2-grid{grid-template-columns:1fr}
  .assessment-card{padding:17px 15px}
  .assessment-question-head{display:block}
  .assessment-points{display:inline-flex;margin-top:7px}
  .assessment-submit{bottom:8px}
}
@media(max-width:520px){
  .exam-meta-card{grid-template-columns:1fr}
  .assessment-actions .btn,.certificate-item-actions .btn{width:100%}
  .result-review-card{padding:15px}
  .result-answer-option{display:block}
  .result-answer-state{display:block;margin-top:4px}
}

/* Existing markup refinements — scoped to each page */
.page-learning .lesson-back-link{display:inline-flex;align-items:center;gap:9px;max-width:100%;margin-bottom:18px;padding:10px 15px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);color:var(--primary);font-size:var(--fs-sm);font-weight:800;text-decoration:none;box-shadow:var(--shadow-xs);transition:background .16s ease,border-color .16s ease,transform .16s ease}
.page-learning .lesson-back-link:hover{background:var(--surface-soft);border-color:var(--primary);transform:translateY(-1px)}
.page-learning .lesson-back-icon{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--primary) 10%,var(--surface));font-size:1.05rem;flex:0 0 auto}
.page-learning .lesson-back-link strong{max-width:min(42vw,420px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:750}
@media(max-width:520px){.page-learning .lesson-back-link{flex-wrap:wrap;border-radius:14px}.page-learning .lesson-back-link strong{max-width:100%;width:100%;padding-inline-start:37px}}
.page-learning .lesson-progress-bar-wrap{margin:0 0 18px;padding:13px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}
.page-learning .lesson-progress-bar-bg{height:9px;margin-bottom:7px;background:var(--surface-muted);border-radius:999px}
.page-learning .lesson-progress-bar-fill{background:var(--primary)}
.page-learning .lesson-progress-bar-text{font-size:var(--fs-xs);font-weight:800;color:var(--muted)}
.page-learning .lesson-video-frame{padding:0;border-radius:var(--radius-xl);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);overflow:hidden}
.page-learning .lesson-video-wrap{padding-bottom:56.25%;border-radius:0;background:#0d1512}
.page-learning .lesson-completed-banner{padding:12px 16px;border-radius:var(--radius-pill);font-size:var(--fs-sm);}
.page-learning .lesson-video-frame .empty-state{padding:38px 20px;background:var(--surface-soft)}

.page-quiz-take .feature-card{padding:20px 20px 18px;text-align:start;border-top:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}
.page-quiz-take .feature-card:hover{transform:none;box-shadow:var(--shadow-sm)}
.page-quiz-take .feature-card strong{line-height:1.8}
.page-quiz-take .feature-card label{display:flex!important;align-items:flex-start;gap:10px;padding:11px 13px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--surface);cursor:pointer;transition:border-color .16s ease,background .16s ease}
.page-quiz-take .feature-card label:hover{border-color:color-mix(in srgb,var(--primary) 25%,var(--border))!important;background:var(--surface-soft)}
.page-quiz-take .feature-card textarea{margin-top:12px}

.page-exam-take .exam-runner-page{background:var(--bg)}
.page-exam-take .exam-runner-bar{background:var(--bg)}
.page-exam-take .exam-runner-bar h1{font-weight:900}
.page-exam-take .exam-runner-meta>span:first-child{display:inline-flex;align-items:center;min-height:36px;padding:7px 11px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--surface);font-size:var(--fs-xs);font-weight:800;color:var(--muted)}
.page-exam-take .feature-card{padding:20px 20px 18px;text-align:start;border-top:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}
.page-exam-take .feature-card:hover{transform:none;box-shadow:var(--shadow-sm)}
.page-exam-take .feature-card>strong{display:block;margin-bottom:2px;color:var(--text);line-height:1.8}
.page-exam-take .feature-card label{display:flex!important;align-items:flex-start;gap:10px;padding:11px 13px!important;border:1px solid var(--border)!important;border-radius:12px!important;background:var(--surface);cursor:pointer}

.page-exam-take .exam-intro-page .feature-card{padding:20px}
.page-exam-take .exam-intro-page .feature-card .form-grid-2{margin-top:12px}

.page-exam-result .data-table{box-shadow:none}
.page-exam-result .feature-card{background:var(--surface)}
.page-exam-result .result-score-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:24px;align-items:center;border-top:1px solid var(--border)}
.page-exam-result .result-score-main{min-width:150px;text-align:center}
.page-exam-result .result-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.page-exam-result .result-metric{padding:14px;border:1px solid var(--border);border-radius:13px;background:var(--surface-soft)}
.page-exam-result .result-metric span{color:var(--muted);font-size:var(--fs-xs)}
.page-exam-result .result-metric strong{color:var(--text);font-size:var(--fs-md)}
.page-exam-result .result-section-title{margin-bottom:12px}

.page-exams .q-v2-card,
.page-public-quizzes .course-card{height:100%;display:flex;flex-direction:column}
.page-exams .q-v2-card h3,.page-public-quizzes .course-body h3{line-height:1.55}
.page-exams .course-meta-row{margin-top:auto;padding-top:12px}
.page-exams .q-v2-card>div:last-child{margin-top:14px}
.page-public-quizzes .course-body{height:100%;display:flex;flex-direction:column}
.page-public-quizzes .course-body .btn{margin-top:auto}

.page-my-certificates .q-v2-hero{text-align:start;padding:10px 0 26px}
.page-my-certificates .q-v2-grid{align-items:stretch}
.page-my-certificates .certificate-item-card{padding:20px;min-height:230px;text-align:start}
.page-my-certificates .certificate-item-card h3{margin-bottom:8px}
.page-my-certificates .certificate-item-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:16px}

@media(max-width:700px){
  .page-exam-result .result-score-card{grid-template-columns:1fr}
  .page-exam-result .result-score-main{text-align:start}
  .page-exam-result .result-metrics{grid-template-columns:1fr}
  .page-my-certificates .certificate-item-actions .btn{width:100%}
}

/* صفحة الدرس على اللابتوب (المنصة والمدارس، كل الأدوار): فراغ علوي أقل، شريط تقدم بسطر واحد، وعرض كل الصفحة يتبع ارتفاع الشاشة
   بحيث يظهر الفيديو مع التلميح وزر الإكمال/المرفقات بلا تمرير كبير. الجوال والشاشات الكبيرة جدًا: بلا تغيير. */
.dash-main .learning-page{padding-top:8px!important;padding-bottom:30px}
.page-learning .lesson-back-link{margin-bottom:10px}
.page-learning .lesson-progress-bar-wrap{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:8px 14px}
.page-learning .lesson-progress-bar-wrap .lesson-progress-bar-bg{flex:1;margin:0;min-width:60px}
.page-learning .lesson-progress-bar-wrap .lesson-progress-bar-text{white-space:nowrap}
.page-learning .lesson-refs{margin-top:14px!important;padding:12px 14px!important}
.page-learning .lesson-auto-hint{margin-bottom:6px!important}
@media(min-width:900px){
  .page-learning .learning-shell{max-width:min(var(--qa-shell,900px),max(560px,calc((100vh - 390px)*1.7778)))}
  .dash-main .page-learning .learning-shell,.dash-main.page-learning .learning-shell,.dash-main .learning-shell{max-width:min(var(--qa-shell,900px),max(560px,calc((100vh - 345px)*1.7778)))}
  .page-learning #qLessonVideo{max-height:max(300px,calc(100vh - 345px))!important}
}