/* ============================================================
   exam.css — Exam runner and exam landing styles
   Applies to all pages under /exam/
   ============================================================ */

/* ── Exam landing (3-card selector) ────────────────────────── */
.exam-landing {
  min-height: 100dvh;
  background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 40%, #0f172a 100%);
  display:    flex;
  flex-direction: column;
}

.exam-landing-hero {
  text-align:    center;
  padding-block: var(--space-16) var(--space-10);
  color:         var(--color-text-inverse);
}

.exam-type-grid {
  display:         grid;
  grid-template-columns: 1fr;
  gap:             var(--space-6);
  padding-bottom:  var(--space-16);
}

@media (min-width: 640px) {
  .exam-type-grid { grid-template-columns: repeat(3, 1fr); }
}

.exam-type-card {
  background:    rgb(255 255 255 / 0.06);
  border:        1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius-2xl);
  padding:       var(--space-8);
  text-align:    center;
  color:         var(--color-text-inverse);
  cursor:        pointer;
  transition:    background var(--transition-base),
                 border-color var(--transition-base),
                 transform var(--transition-base),
                 box-shadow var(--transition-base);
  text-decoration: none;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-4);
}

.exam-type-card:hover {
  background:   rgb(255 255 255 / 0.12);
  border-color: var(--color-primary);
  transform:    translateY(-4px);
  box-shadow:   0 0 30px rgb(30 111 232 / 0.3);
  color:        var(--color-text-inverse);
}

.exam-type-icon {
  font-size:     3rem;
  line-height:   1;
}

.exam-type-title {
  font-size:   var(--font-size-xl);
  font-weight: 700;
  color:       inherit;
}

.exam-type-desc {
  font-size: var(--font-size-sm);
  opacity:   0.75;
}

/* ── Access / coupon entry form ─────────────────────────────── */
.exam-access-wrap {
  min-height:    100dvh;
  display:       flex;
  align-items:   center;
  justify-content: center;
  background:    linear-gradient(160deg, #0f172a 0%, #1e3a5f 100%);
  padding:       var(--space-6);
}

.exam-access-card {
  width:         100%;
  max-width:     440px;
  background:    var(--color-surface);
  border-radius: var(--radius-2xl);
  padding:       var(--space-8);
  box-shadow:    var(--shadow-2xl);
}

.exam-access-logo {
  text-align:    center;
  margin-bottom: var(--space-6);
}

.exam-access-title {
  font-size:     var(--font-size-2xl);
  text-align:    center;
  margin-bottom: var(--space-2);
}

.exam-access-subtitle {
  text-align:    center;
  color:         var(--color-text-secondary);
  font-size:     var(--font-size-sm);
  margin-bottom: var(--space-8);
}

.exam-access-top-row {
  display:         flex;
  justify-content: flex-end;
  margin-bottom:   var(--space-2);
}

.exam-access-home-link {
  display:         flex;
  align-items:     center;
  gap:             6px;
  color:           var(--color-primary);
  text-decoration: none;
  font-size:       0.8125rem;
  font-weight:     600;
  opacity:         0.75;
  transition:      opacity 0.2s;
}
.exam-access-home-link:hover {
  opacity: 1;
}

.exam-access-home-icon {
  width:       28px;
  height:      28px;
  flex-shrink: 0;
}

.exam-access-emoji-link {
  font-size:       2rem;
  text-decoration: none;
}

.exam-access-divider-spaced {
  margin-block: var(--space-6);
}

.coupon-input {
  text-align:     center;
  letter-spacing: 0.12em;
  font-size:      1.1rem;
}

/* ── Exam runner — shared layout ────────────────────────────── */
.runner-wrap {
  display:        flex;
  flex-direction: column;
  height:         100dvh;
  overflow:       hidden;
  background:     #0d1117;
  color:          #c9d1d9;
}

/* CSS simulated fullscreen — used when native Fullscreen API unavailable (iPhone) */
.runner-wrap.simulated-fullscreen {
  position: fixed;
  inset:    0;
  z-index:  9999;
  overflow: hidden;
  height:   100dvh;
}

/* ── Fullscreen flex chain (native + simulated) ─────────────────────────────
   Every flex child that is itself a flex container needs min-height:0,
   otherwise it refuses to shrink below its content and breaks the chain.
   NOTE: #runner-wrap IS the fullscreen element, so the selector must be
   `:fullscreen.runner-wrap` (NO space) — `:fullscreen .runner-wrap` (with a
   space) means a DESCENDANT and never matches in native fullscreen.        */
:fullscreen.runner-wrap,
.runner-wrap.simulated-fullscreen {
  display:        flex !important;
  flex-direction: column !important;
  height:         100dvh !important;
  overflow:       hidden !important;
}

:fullscreen.runner-wrap .exam-editor-panel,
.runner-wrap.simulated-fullscreen .exam-editor-panel {
  flex:           1 1 auto !important;
  min-height:     0 !important;
  display:        flex !important;
  flex-direction: column !important;
  overflow:       hidden !important;
}

:fullscreen.runner-wrap #monacoEditorContainer,
.runner-wrap.simulated-fullscreen #monacoEditorContainer {
  flex:       1 1 0 !important;
  min-height: 0 !important;
  height:     auto !important;
  max-height: none !important;
}

@media (max-width: 768px) {
  :fullscreen.runner-wrap,
  .runner-wrap.simulated-fullscreen {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  :fullscreen.runner-wrap #monacoEditorContainer,
  .runner-wrap.simulated-fullscreen #monacoEditorContainer {
    flex:       0 0 auto !important;
    height:     300px !important;
    min-height: 300px !important;
  }

  :fullscreen.runner-wrap .monaco-toolbar,
  .runner-wrap.simulated-fullscreen .monaco-toolbar {
    height:     auto !important;
    min-height: auto !important;
    max-height: 60px !important;
    flex:       0 0 auto !important;
    flex-wrap:  nowrap !important;
    overflow-x: auto !important;
  }
}

:fullscreen.runner-wrap .monaco-toolbar,
.runner-wrap.simulated-fullscreen .monaco-toolbar {
  height:     auto !important;
  min-height: auto !important;
  max-height: none !important;
  flex:       0 0 auto !important;
}

/* ── Runner top bar ─────────────────────────────────────────── */
.runner-topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 var(--space-4);
  height:          52px;
  background:      #161b22;
  border-bottom:   1px solid #30363d;
  flex-shrink:     0;
  gap:             var(--space-4);
}

.runner-title {
  font-size:   var(--font-size-sm);
  font-weight: 700;
  color:       #f0f6fc;
  flex:        1;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.runner-timer {
  font-size:     var(--font-size-base);
  font-weight:   700;
  font-variant-numeric: tabular-nums;
  color:         #f0f6fc;
  background:    #21262d;
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  border:        1px solid #30363d;
  letter-spacing: 0.05em;
}

.runner-timer.warning { color: var(--color-warning); border-color: var(--color-warning); }
.runner-timer.danger  { color: var(--color-error);   border-color: var(--color-error);   animation: pulse-border 1s ease infinite; }

@keyframes pulse-border {
  50% { border-color: transparent; }
}

/* ── Runner body (question + webcam column) ─────────────────── */
.runner-body {
  display:  flex;
  flex:     1;
  overflow: hidden;
  gap:      0;
}

/* Sidebar: webcam + controls */
.runner-sidebar {
  width:          220px;
  flex-shrink:    0;
  background:     #161b22;
  border-right:   1px solid #30363d; /* in RTL this is the left edge visually */
  border-left:    none;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  padding:        var(--space-4);
  overflow-y:     auto;
}

/* Webcam box */
.webcam-box {
  aspect-ratio:  4/3;
  background:    #0d1117;
  border-radius: var(--radius-lg);
  border:        1px solid #30363d;
  overflow:      hidden;
  position:      relative;
}

.webcam-box video {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.webcam-status {
  position:     absolute;
  inset:        0;
  display:      flex;
  flex-direction: column;
  align-items:  center;
  justify-content: center;
  gap:          var(--space-2);
  font-size:    var(--font-size-xs);
  color:        var(--color-text-muted);
  text-align:   center;
  padding:      var(--space-2);
}

.webcam-status-icon {
  font-size: 2rem;
}

.webcam-status.denied  .webcam-status-icon { color: var(--color-error); }
.webcam-status.waiting .webcam-status-icon { color: var(--color-text-muted); }

/* Main content area (Monaco + question) */
.runner-main {
  flex:     1;
  display:  flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Question description pane */
.runner-question {
  padding:       var(--space-4) var(--space-5);
  background:    #161b22;
  border-bottom: 1px solid #30363d;
  max-height:    40%;
  overflow-y:    auto;
  flex-shrink:   0;
}

.runner-question h3 {
  font-size:     var(--font-size-sm);
  color:         #8b949e;
  font-weight:   600;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.runner-question p,
.runner-question pre {
  font-size: var(--font-size-sm);
  color:     #c9d1d9;
  line-height: 1.6;
  direction: ltr;
  text-align: left;
}

/* Monaco editor pane */
.runner-editor {
  flex:        1;
  overflow:    hidden;
  position:    relative;
}

/* On small screens Monaco needs overflow-x so it scrolls rather than breaks */
@media (max-width: 767px) {
  .runner-sidebar { width: 0; padding: 0; border: none; overflow: hidden; }
  .runner-question { max-height: 35%; }
}

@media (max-width: 480px) {
  .runner-editor {
    overflow-x: auto;
    min-width:  0;
  }
  /* Monaco wrapper inside gets a minimum width */
  .runner-editor > div {
    min-width: 480px;
  }
}

/* ── Runner bottom bar ──────────────────────────────────────── */
.runner-bottombar {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       0 var(--space-4);
  height:        52px;
  background:    #161b22;
  border-top:    1px solid #30363d;
  flex-shrink:   0;
  gap:           var(--space-3);
}

.runner-lang-select {
  background:    #21262d;
  border:        1px solid #30363d;
  color:         #c9d1d9;
  padding:       var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  font-size:     var(--font-size-sm);
  direction:     ltr;
}

.runner-btn {
  padding:       var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size:     var(--font-size-sm);
  font-weight:   600;
  cursor:        pointer;
  border:        1px solid #30363d;
  transition:    background var(--transition-fast), border-color var(--transition-fast);
}

.runner-btn-save {
  background: #21262d;
  color:      #c9d1d9;
}
.runner-btn-save:hover { background: #30363d; }

.runner-btn-submit {
  background:   var(--color-primary);
  color:        white;
  border-color: var(--color-primary);
}
.runner-btn-submit:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

/* ── Mobile warning banner (Monaco) ────────────────────────── */
.mobile-editor-warning {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
  padding:     var(--space-3) var(--space-4);
  background:  var(--color-warning-bg);
  color:       var(--color-warning);
  font-size:   var(--font-size-xs);
  border-bottom: 1px solid #fcd34d;
}

.mobile-editor-warning button {
  margin-right: auto;
  background:   none;
  border:       none;
  cursor:       pointer;
  font-size:    1rem;
  color:        inherit;
  padding:      0;
  line-height:  1;
}

/* ── Report card page ───────────────────────────────────────── */
.report-card-wrap {
  max-width:     700px;
  margin-inline: auto;
  padding:       var(--space-8) var(--space-4);
}

.report-score-circle {
  width:         120px;
  height:        120px;
  border-radius: 50%;
  background:    conic-gradient(var(--color-primary) calc(var(--score-pct) * 1%), var(--color-border) 0);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     var(--font-size-2xl);
  font-weight:   700;
  color:         var(--color-primary);
  margin-inline: auto;
  position:      relative;
}

.report-score-circle::after {
  content:       '';
  position:      absolute;
  inset:         8px;
  border-radius: 50%;
  background:    var(--color-surface);
  z-index:       -1;
}

/* ── Runner: webcam mini in topbar ──────────────────────────── */
.runner-topbar-center {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  gap:            var(--space-1);
  min-width:      0;
}

.runner-topbar-left {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.runner-topbar-right {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.webcam-mini {
  width:         72px;
  height:        54px;
  border-radius: var(--radius-md);
  border:        1px solid #30363d;
  overflow:      hidden;
  background:    #0d1117;
  position:      relative;
  flex-shrink:   0;
}

.webcam-mini video {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.webcam-mini .webcam-status {
  position:       absolute;
  inset:          0;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      1.25rem;
}

.webcam-mini .webcam-status.hidden { display: none; }

.runner-student-name {
  font-size:  var(--font-size-xs);
  color:      #8b949e;
  max-width:  120px;
  overflow:   hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Runner: body split (question | editor) ─────────────────── */
.runner-body-split {
  display:  flex;
  flex:     1;
  overflow: hidden;
}

.runner-question-panel {
  width:          35%;
  min-width:      200px;
  max-width:      420px;
  background:     #161b22;
  border-left:    1px solid #30363d;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  flex-shrink:    0;
}

.runner-question-panel-header {
  padding:       var(--space-3) var(--space-4);
  border-bottom: 1px solid #30363d;
  font-size:     var(--font-size-xs);
  color:         #8b949e;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  flex-shrink:   0;
}

.runner-question-body {
  flex:      1;
  overflow-y: auto;
  padding:   var(--space-4);
}

.runner-question-body h4 {
  font-size:     var(--font-size-sm);
  color:         #f0f6fc;
  margin-bottom: var(--space-3);
}

.runner-question-body p,
.runner-question-body pre {
  font-size:  var(--font-size-xs);
  color:      #c9d1d9;
  line-height: 1.6;
  direction:  ltr;
  text-align: left;
  white-space: pre-wrap;
}

.runner-question-body .sample-block {
  margin-top:    var(--space-3);
  background:    #0d1117;
  border:        1px solid #30363d;
  border-radius: var(--radius-md);
  padding:       var(--space-3);
}

.runner-question-body .sample-label {
  font-size:  var(--font-size-xs);
  color:      #8b949e;
  margin-bottom: var(--space-1);
  direction:  rtl;
  text-align: right;
}

/* ── Grade results panel ────────────────────────────────────── */
.runner-grade-panel {
  background:    #0d1117;
  border-bottom: 1px solid #30363d;
  padding:       var(--space-3) var(--space-4);
  font-size:     var(--font-size-xs);
  max-height:    200px;
  overflow-y:    auto;
  flex-shrink:   0;
}

/* Grade/finish button variants */
.runner-btn-grade {
  background:   #0d2818;
  color:        #4ade80;
  border-color: #166534;
}
.runner-btn-grade:hover { background: #166534; }
.runner-btn-grade:disabled { opacity: 0.5; cursor: wait; }

.runner-bottombar-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.runner-save-status {
  flex:       1;
  font-size:  var(--font-size-xs);
  color:      #8b949e;
  text-align: center;
  padding-inline: var(--space-2);
  min-width:  0;
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
}

/* ── Report card modal ──────────────────────────────────────── */
.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgb(0 0 0 / 0.75);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         1000;
  padding:         var(--space-4);
  animation:       fadeInOverlay 0.2s ease;
}

@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-card {
  background:    var(--color-surface);
  border-radius: var(--radius-2xl);
  box-shadow:    var(--shadow-2xl);
  width:         100%;
  max-width:     640px;
  max-height:    90dvh;
  overflow-y:    auto;
  animation:     slideUpModal 0.3s cubic-bezier(0.16,1,0.3,1);
}

@keyframes slideUpModal {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-header {
  padding:       var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
}

.modal-body { padding: var(--space-6); }

.modal-close {
  background:    none;
  border:        none;
  cursor:        pointer;
  font-size:     1.25rem;
  color:         var(--color-text-muted);
  padding:       var(--space-1);
  border-radius: var(--radius-md);
  transition:    background var(--transition-fast);
}
.modal-close:hover { background: var(--color-surface-alt); }

.report-score-row {
  display:         flex;
  align-items:     center;
  gap:             var(--space-6);
  margin-bottom:   var(--space-6);
  flex-wrap:       wrap;
}

.report-meta { flex: 1; }
.report-meta p { margin-bottom: var(--space-1); font-size: var(--font-size-sm); }

.report-question-row {
  display:       flex;
  justify-content: space-between;
  align-items:   center;
  padding:       var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  font-size:     var(--font-size-sm);
  direction:     rtl;
}

.report-question-row:last-child { border-bottom: none; }

.report-question-score {
  font-weight: 700;
  color:       var(--color-primary);
  white-space: nowrap;
}

@media (max-width: 767px) {
  .runner-question-panel { width: 0; min-width: 0; border: none; overflow: hidden; }
  .runner-question-panel.open { width: 100%; position: absolute; inset: 52px 0 52px 0; z-index: 50; }
}

/* ── Vertical-layout runner — 4-row structure ────────────────────────────── */

.exam-runner-container {
  display: flex;
  flex-direction: column;
  height: 100dvh;       /* full viewport, no body scroll */
  overflow: hidden;
  background: #0d1117;
  color: #f0f6fc;
  font-family: Samim, Vazir, sans-serif;
}

/* ── Row 1: Header bar — always flex-direction:row, never wraps ── */
.exam-header-bar {
  display: flex;
  flex-direction: row;   /* explicit — never column, never on mobile */
  align-items: center;
  flex-wrap: nowrap;     /* prevent wrapping that stacks children vertically */
  overflow: hidden;      /* clip content that would break the row */
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #1c2128, #161b22);
  border-bottom: 1px solid #30363d;
  flex-shrink: 0;
  height: 80px;
  min-height: 80px;
  box-sizing: border-box;
  direction: rtl;
}
.exam-header-webcam {
  width: 70px;
  height: 70px;
  min-width: 70px;   /* prevents flex from shrinking below target size */
  flex: 0 0 70px;    /* flex-grow:0 flex-shrink:0 basis:70px */
  border-radius: 8px;
  overflow: hidden;
  background: #0d1117;
  border: 1px solid #30363d;
}
.exam-header-center {
  flex: 1 1 0;       /* takes all remaining space between webcam and right */
  min-width: 0;      /* allows text truncation inside */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  text-align: center;
  overflow: hidden;
}
.exam-header-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
}
.exam-header-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #f0f6fc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.exam-header-student-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  max-width: 100%;
}
.exam-header-right {
  display: flex;
  flex-direction: row;   /* always row — timer beside photo */
  align-items: center;
  gap: 0.625rem;
  flex: 0 0 auto;        /* never grow/shrink — fixed width determined by children */
}
.exam-header-timer-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  flex-shrink: 0;
}
/* Student photo (circular) */
.exam-student-photo-wrap {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;    /* never grow or shrink */
  position: relative;
}
.exam-student-photo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #30363d;
  display: block;
}
.exam-student-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid #30363d;
}

/* shared badge / label / name / timer */
.exam-info-type {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  white-space: nowrap;
}
.exam-info-label { font-size: 0.75rem; color: #8b949e; }
.exam-student-name { font-size: 0.8125rem; font-weight: 600; color: #58a6ff; }
.exam-timer {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #4ade80;
  background: rgba(74,222,128,0.1);
  border: 1px solid rgba(74,222,128,0.3);
  border-radius: 6px;
  padding: 0.125rem 0.5rem;
  direction: ltr;
}
.exam-timer.warning { color: #fbbf24; background: rgba(251,191,36,0.1); border-color: rgba(251,191,36,0.3); }
.exam-timer.danger  { color: #f87171; background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.3); animation: pulse-border 1s ease infinite; }

/* ── Row 2: Question box (max 30dvh, scrollable) ── */
.exam-question-box {
  background: #161b22;
  border-bottom: 1px solid #30363d;
  padding: 0.875rem 1.25rem;
  direction: rtl;
  flex-shrink: 0;
  max-height: 30dvh;
  overflow-y: auto;
}
.exam-question-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #8b949e;
  margin-bottom: 0.625rem;
}
.exam-question-counter { color: #58a6ff; }
.exam-question-box-title {
  font-size: 1rem;
  font-weight: 700;
  color: #f0f6fc;
  margin: 0 0 0.5rem;
}
.exam-question-box-desc {
  font-size: 0.875rem;
  color: #c9d1d9;
  line-height: 1.7;
  margin: 0 0 0.5rem;
  white-space: pre-wrap;
}
.exam-question-hint {
  font-size: 0.8125rem;
  background: rgba(88,166,255,0.08);
  border-right: 3px solid #58a6ff;
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  color: #c9d1d9;
  margin-top: 0.5rem;
}
.exam-hint-label { color: #58a6ff; font-weight: 700; margin-left: 0.25rem; }

/* ── Nav button bar ── */
.exam-bottom-bar {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #0d1117;
  border-bottom: 1px solid #30363d;
  flex-shrink: 0;
  direction: ltr;
  flex-wrap: wrap;
}
.exam-nav-btn {
  padding: 0.375rem 0.875rem;
  border-radius: 6px;
  border: 1px solid #30363d;
  background: #21262d;
  color: #c9d1d9;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.exam-nav-btn:hover:not(:disabled) { background: #30363d; border-color: #58a6ff; color: #f0f6fc; }
.exam-nav-btn:disabled { opacity: 0.4; cursor: default; }
.exam-nav-btn.flagged, .exam-btn-flag.flagged {
  background: rgba(251,191,36,0.15);
  border-color: #fbbf24;
  color: #fbbf24;
}
.exam-btn-save {
  border-color: #4ade80;
  color: #4ade80;
}
.exam-btn-save:hover:not(:disabled) { background: rgba(74,222,128,0.15); }
.exam-btn-grade {
  background: #166534;
  border-color: #4ade80;
  color: #fff;
}
.exam-btn-grade:hover:not(:disabled) { background: #15803d; }
.exam-btn-grade:disabled { opacity: 0.5; cursor: wait; }
.exam-btn-end {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border-color: #dc2626;
  color: #fff;
}
.exam-btn-end:hover:not(:disabled) { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* ── MCQ option cards (Row 4) ── */
.mcq-options-panel {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #0d1117;
}
.mcq-option-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  background: #161b22;
  border: 1.5px solid #30363d;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  color: #c9d1d9;
  text-align: right;
  direction: rtl;
}
.mcq-option-card:hover { border-color: #58a6ff; background: #1c2128; }
.mcq-option-card.selected {
  border: 2px solid #2563eb;
  background: #0c1a3a;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
  color: #f0f6fc;
}
.mcq-option-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #21262d;
  border: 1.5px solid #30363d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  flex-shrink: 0;
  color: #8b949e;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mcq-option-card.selected .mcq-option-badge {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.mcq-option-text { flex: 1; font-size: 0.9375rem; line-height: 1.6; }
.mcq-option-card.selected .mcq-option-text { font-weight: 600; }

/* ── Row 4: Editor panel (fills remaining height) ── */
.exam-editor-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 200px;
  overflow: hidden;
}
.exam-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 1rem;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8b949e;
  flex-shrink: 0;
  direction: rtl;
}
.exam-max-score { color: #4ade80; }
.monaco-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background: #0d1117;
  border-bottom: 1px solid #21262d;
  flex-shrink: 0;
  flex-wrap: nowrap;   /* must NOT wrap — wrapping causes toolbar to grow to 457px */
  overflow-x: auto;
  direction: rtl;
}
.monaco-toolbar select {
  background: #21262d;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 5px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: inherit;
}
.monaco-toolbar label { font-size: 0.75rem; color: #8b949e; }
.monaco-toolbar-spacer { flex: 1; }
.monaco-toolbar-btn {
  padding: 0.25rem 0.75rem;
  border-radius: 5px;
  border: 1px solid #30363d;
  background: #21262d;
  color: #c9d1d9;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.monaco-toolbar-btn:hover { background: #30363d; color: #f0f6fc; }
.monaco-toolbar-btn.save  { border-color: #4ade80; color: #4ade80; }
.monaco-toolbar-btn.grade { background: #166534; border-color: #4ade80; color: #fff; }
.monaco-toolbar-btn.grade:hover { background: #15803d; }
.monaco-toolbar-btn:disabled { opacity: 0.5; cursor: wait; }
.monaco-save-status { font-size: 0.75rem; color: #8b949e; white-space: nowrap; }
#monacoEditorContainer,
#monacoEditorContainer * {
  direction: ltr !important;  /* html[dir=rtl] bleeds into Monaco's internal .view-lines */
}
#monacoEditorContainer .monaco-editor,
#monacoEditorContainer .monaco-editor .view-lines,
#monacoEditorContainer .monaco-editor .view-line,
#monacoEditorContainer textarea.inputarea {
  direction:    ltr !important;
  text-align:   left !important;
  unicode-bidi: normal !important;
}
#monacoEditorContainer .monaco-editor .lines-content {
  direction: ltr !important;
}
#monacoEditorContainer {
  flex: 1 1 0;        /* fills all remaining space in editor-panel */
  min-height: 0;      /* allow shrinking below content height */
  height: auto;
  max-height: none;
  border: 1px solid #334155;
  border-radius: 0 0 10px 10px;
  box-sizing: border-box;
}

/* ── Loading spinner ── */
@keyframes exam-spin {
  to { transform: rotate(360deg); }
}
.exam-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #30363d;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: exam-spin 0.75s linear infinite;
  margin: 0 auto;
}

/* ── Mobile adjustments for 4-row layout ── */
@media (max-width: 768px) {
  .exam-header-bar {
    height: 60px;
    min-height: 60px;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    /* flex-direction:row and flex-wrap:nowrap are already set on the base rule — no override needed */
  }
  .exam-header-webcam {
    width: 50px;
    height: 50px;
    min-width: 50px;
    flex: 0 0 50px;
  }
  .exam-student-photo-wrap {
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
  }
  .exam-student-photo { width: 50px; height: 50px; }
  .exam-student-avatar { width: 50px; height: 50px; font-size: 1.25rem; }
  .exam-header-title { font-size: 0.8125rem; }
  .exam-question-box { max-height: 25dvh; }
}

/* ── Proctoring toast ── */
.proctor-toast {
  position: fixed;
  bottom: 120px;
  right: 1rem;
  background: #ef4444;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  z-index: 10001;
  font-size: 0.875rem;
  direction: rtl;
  max-width: 320px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ── MCQ Circular timer ring ── */
.exam-timer-ring {
  position: relative;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
}
.exam-timer-ring svg {
  transform: rotate(-90deg);
}
.timer-ring-bg {
  fill: none;
  stroke: #30363d;
  stroke-width: 4;
}
.timer-ring-fill {
  fill: none;
  stroke: #4ade80;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 157.08;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s linear, stroke 0.3s;
}
.timer-ring-fill.warning { stroke: #fbbf24; }
.timer-ring-fill.danger  { stroke: #f87171; animation: ring-pulse 0.8s ease infinite; }
@keyframes ring-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.timer-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Override base exam-timer styles when inside the ring */
.timer-ring-text .exam-timer {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.625rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* ── Horizontal splitter between question and options ── */
.mcq-splitter {
  height: 8px;
  background: #21262d;
  cursor: row-resize;
  flex-shrink: 0;
  border-top: 1px solid #30363d;
  border-bottom: 1px solid #30363d;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}
.mcq-splitter::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: #4d5566;
}
.mcq-splitter:hover { background: #30363d; }
@media (max-width: 768px) { .mcq-splitter { display: none; } }

/* ── Violation overlay (fullscreen exit / tab switch) ── */
.violation-overlay {
  position: absolute;
  inset: 0;
  background: rgba(185, 28, 28, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  color: #fff;
  font-family: Vazirmatn, Tahoma, sans-serif;
  direction: rtl;
  text-align: center;
  padding: 2rem;
  gap: 0.75rem;
}
.violation-icon  { font-size: 3.5rem; }
.violation-msg   { font-size: 1.25rem; font-weight: 700; }
.violation-sub   { font-size: 0.875rem; opacity: 0.88; max-width: 340px; line-height: 1.6; }
.violation-counter { font-size: 2.5rem; font-weight: 800; margin: 0.25rem 0; }
.violation-btn {
  margin-top: 0.5rem;
  padding: 0.75rem 2rem;
  background: #fff;
  color: #b91c1c;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.violation-btn:hover { opacity: 0.9; }

/* ── Time-expired overlay ── */
.time-expired-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}
.time-expired-card {
  background: #161b22;
  border: 2px solid #f87171;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  direction: rtl;
  font-family: Vazirmatn, Tahoma, sans-serif;
  color: #f0f6fc;
  max-width: 340px;
}
.time-expired-icon { font-size: 3.5rem; margin-bottom: 0.75rem; }
.time-expired-card h2 { font-size: 1.2rem; color: #f87171; margin-bottom: 0.75rem; }
.time-expired-card p  { font-size: 0.875rem; color: #8b949e; line-height: 1.6; }
.time-expired-countdown {
  font-size: 2.5rem;
  font-weight: 800;
  color: #f87171;
  display: inline-block;
  margin: 0 0.25rem;
}