/* ============================================================
   ExamCrack AI - Candidate Exam Light Theme
   Loaded ONLY on candidate-facing pages (exam.html, exam-landing.html,
   result.html), AFTER admin.css. Admin panel keeps the dark theme.

   Strategy: the shared admin.css is dark via :root variables +
   a few hardcoded rgba(255,255,255,...) surfaces. This sheet
   (1) re-flips the variables to a light palette and
   (2) re-tints the hardcoded dark-surface components the
   candidate pages actually use.

   Kishan Aug 27: "exam for candidate should always be white."
   ============================================================ */

:root {
  --bg: #f4f5f7;              /* page background - soft gray-white */
  --panel: #ffffff;           /* cards / modal / question box */
  --surface: #eceef1;         /* nested fills */
  --surface-2: #e2e5e9;
  --text-1: #17181c;          /* primary text - near black */
  --text-2: #3f4248;          /* body text */
  --text-3: #6b7076;          /* secondary */
  --text-4: #9ca1a8;          /* muted */
  --brand: #5e6ad2;
  --accent: #5b5bd6;          /* slightly deeper for white bg */
  --accent-hover: #4f4fc9;
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border: rgba(0, 0, 0, 0.1);
  --green: #059669;
  --amber: #d97706;
  --red: #dc2626;
}

body {
  background: var(--bg);
  color: var(--text-2);
}

/* Subtle dark grid lines instead of the inline white ones (the inline
   style uses rgba(255,255,255,0.02) which vanishes on white). */
.bg-grid {
  background-image: linear-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.035) 1px, transparent 1px) !important;
}

/* ---- Exam page ---- */
.exam-question,
.stat-card,
.panel {
  background: var(--panel);
}

.exam-timer {
  background: rgba(0, 0, 0, 0.04);
}
.exam-timer.warning { color: var(--red); }

/* ---- Options ---- */
.option {
  background: #ffffff;
}
.option:hover {
  border-color: rgba(91, 91, 214, 0.45);
  background: rgba(91, 91, 214, 0.05);
}
.option.selected {
  border-color: var(--accent);
  background: rgba(91, 91, 214, 0.09);
}

/* ---- Question palette pills ---- */
.palette .q-pill {
  background: #ffffff;
}
.palette .q-pill.current {
  background: rgba(91, 91, 214, 0.1);
  color: var(--accent);
}

/* ---- Forms (exam-landing: candidate name / email) ---- */
.field input, .field select, .field textarea {
  background: #ffffff;
}
.field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7076' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

/* ---- Buttons ---- */
.btn-ghost { color: var(--text-2); }
.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-1);
}

/* ---- Badges (dark-tuned pale tints need deeper text on white) ---- */
.badge-gray, .badge-muted { background: rgba(0, 0, 0, 0.06); color: var(--text-3); }
.badge-green { color: #059669; }
.badge-amber, .badge-warn { color: #b45309; }
.badge-red, .badge-danger { color: #dc2626; }
.badge-success { color: #059669; }
.badge-brand { color: var(--accent); }

/* ---- Alerts (pale dark-theme text is unreadable on white) ---- */
.alert-error { color: #b91c1c; }
.alert-success { color: #047857; }

/* ---- Notice modal / consent card ---- */
#webcamConsentSection {
  background: rgba(0, 0, 0, 0.02) !important;
}

/* Sticky footer bar inside modals */
.modal .form-actions {
  background: var(--panel);
}

/* Selection on white bg keeps contrast */
::selection { background: rgba(91, 91, 214, 0.25); color: #17181c; }