/* ════════════════════════════════════════════════════════════════════
   TAKE EXAM — Phase 9 Polish Layer
   ────────────────────────────────────────────────────────────────────
   تحسينات بصرية للطالب أثناء الامتحان. لا يلامس البنية، يضيف
   refinements على المكونات الموجودة (timer, options, inputs, buttons).
   ════════════════════════════════════════════════════════════════════ */

/* ── Smooth scroll بين الأسئلة ── */
html { scroll-behavior: smooth; }

/* ── تحسين بطاقات الأسئلة ── */
.q-card, .question-block, .exam-q-block {
    border-radius: 18px !important;
    transition: box-shadow .25s ease, transform .2s ease, border-color .2s ease;
}
.q-card:hover, .question-block:hover, .exam-q-block:hover {
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

/* ── تحسين خيارات MCQ ── */
.option-row, .mcq-option, label.q-option {
    border-radius: 14px !important;
    padding: 14px 18px !important;
    transition: all .2s cubic-bezier(.2,.8,.2,1) !important;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
}
.option-row:hover, .mcq-option:hover, label.q-option:hover {
    background: rgba(99, 102, 241, 0.06) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
    transform: translateX(-3px);
}
.option-row.selected, .mcq-option.selected, label.q-option.is-selected,
.option-row:has(input:checked), .mcq-option:has(input:checked), label.q-option:has(input:checked) {
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.08)) !important;
    border-color: #6366f1 !important;
    box-shadow: 0 6px 18px rgba(99, 102, 241, 0.15) !important;
}
.option-row input[type="radio"], .mcq-option input[type="radio"] {
    accent-color: #6366f1;
    transform: scale(1.15);
    margin-left: 8px;
}

/* ── تحسين زرّ التسليم النهائي ── */
button.btn-submit-exam, button.submit-final-btn,
button[name="submit_exam"], button#submitExamBtn,
button.submit-confirm {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
    color: #fff !important;
    padding: 14px 36px !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.35) !important;
    transition: transform .15s ease, box-shadow .2s !important;
    letter-spacing: 0.01em;
}
button.btn-submit-exam:hover, button.submit-final-btn:hover,
button[name="submit_exam"]:hover, button#submitExamBtn:hover,
button.submit-confirm:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 16px 38px rgba(16, 185, 129, 0.5) !important;
}

/* ── تحسين timer عرض ── */
.exam-side-timer, .timer-card, #examTimer, .exam-timer {
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

/* ── shimmer للـ progress bar أثناء التحميل ── */
.exam-progress-bar, .progress-bar.bg-primary {
    background: linear-gradient(90deg, #6366f1, #a855f7, #6366f1) !important;
    background-size: 200% 100% !important;
    animation: qbProgressShimmer 2.4s ease-in-out infinite !important;
}
@keyframes qbProgressShimmer {
    0%, 100% { background-position: 100% 0; }
    50% { background-position: 0 0; }
}

/* ── input fields polish (essay answer) ── */
.exam-essay-input, textarea.essay-answer, .exam-answer-input {
    border-radius: 14px !important;
    border: 2px solid #e5e7eb !important;
    padding: 14px 18px !important;
    transition: border-color .2s, box-shadow .2s !important;
    font-family: 'Cairo', sans-serif;
    line-height: 1.85;
}
.exam-essay-input:focus, textarea.essay-answer:focus, .exam-answer-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15) !important;
    outline: none !important;
}

/* ── question number badge ── */
.q-number, .question-number {
    background: linear-gradient(135deg, #6366f1, #a855f7) !important;
    color: #fff !important;
    font-weight: 800;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* ── status badges ── */
.q-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; }
.q-status-pill.answered { background: rgba(16, 185, 129, 0.12); color: #047857; }
.q-status-pill.unanswered { background: rgba(245, 158, 11, 0.14); color: #b45309; }
.q-status-pill.flagged { background: rgba(244, 63, 94, 0.12); color: #be123c; }

/* ── focus glow inside exam ── */
input:focus-visible, button:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid rgba(99, 102, 241, 0.35) !important;
    outline-offset: 2px;
}

/* ── pre-exam countdown card refinement ── */
.preexam-countdown-box, .preexam-mission-countdown, .stu-modal-countdown {
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.04)) !important;
    border: 1px solid rgba(99, 102, 241, 0.18) !important;
    border-radius: 18px !important;
}

/* ── student name badge ── */
.student-name-badge, .stu-badge {
    background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(168,85,247,0.06)) !important;
    color: #4338ca !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-weight: 700;
}