/* ==========================================================================
   Additions on top of style.css (and, on admin.html, also admin.css) the
   same way admin.css layers on style.css. Reuses the existing
   --navy/--gold/--warm-white tokens; only adds classes for shapes the
   original single-exam frontend didn't need.
   ========================================================================== */

.card-wide {
  max-width: 880px;
}

.v2-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.v2-header-actions {
  display: flex;
  gap: var(--space-3);
}

.v2-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.v2-list li {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid rgba(26, 42, 74, 0.1);
  border-radius: var(--radius-sm);
  background: #fff;
}

.v2-inline-form {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.v2-inline-form input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid rgba(26, 42, 74, 0.2);
  border-radius: var(--radius-sm);
}

.v2-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.v2-form select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid rgba(26, 42, 74, 0.2);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1rem;
}

.manual-notice {
  background: var(--gold-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.answer-option input[type="checkbox"] {
  accent-color: var(--navy);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Status pills — also defined in admin.css; harmless duplication so
   index.html (which doesn't load admin.css) still has them. */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill.status-in_progress {
  background: var(--gold-soft);
  color: #7a611f;
}

.status-pill.status-completed {
  background: rgba(45, 106, 79, 0.12);
  color: var(--success);
}

.status-pill.status-expired {
  background: rgba(193, 18, 31, 0.12);
  color: var(--danger);
}

/* ==========================================================================
   Attempt result view
   ========================================================================== */

.result-status {
  color: var(--text-muted);
  font-weight: 600;
}

.result-score-block {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.result-total-score {
  font-size: 1.5rem;
  font-weight: 800;
}

.result-pending {
  color: var(--text-muted);
  font-style: italic;
}

.result-component-card {
  border: 1.5px solid rgba(26, 42, 74, 0.1);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.result-question {
  padding: var(--space-3) 0;
  border-top: 1px solid rgba(26, 42, 74, 0.08);
}

.result-question-text {
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.result-answers-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.result-selected {
  font-weight: 700;
}

.result-answer-correct {
  color: var(--success);
}

.result-correct .result-question-text::before {
  content: "✓ ";
  color: var(--success);
}

.result-incorrect .result-question-text::before {
  content: "✗ ";
  color: var(--danger);
}

/* ==========================================================================
   Admin v2 — tabs, filters, exam builder
   ========================================================================== */

/* Author-origin `display` rules beat the UA [hidden] rule regardless of
   specificity (see style.css's .page[hidden] comment) — nothing here sets
   display on .admin-tabpanel, so the native [hidden] behavior is enough,
   but the explicit override is kept for anyone who adds one later. */
.admin-tabpanel[hidden] {
  display: none;
}

.v2-filters {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.v2-filters select,
.v2-filters input {
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid rgba(26, 42, 74, 0.2);
  border-radius: var(--radius-sm);
  font-family: inherit;
}

.v2-exam-actions {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  flex-wrap: wrap;
}

.v2-components-builder {
  margin-top: var(--space-6);
}

.v2-component-card {
  border: 1.5px solid rgba(26, 42, 74, 0.12);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  background: #fff;
}

.v2-section-block {
  margin: var(--space-3) 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--gold-soft);
}

.v2-answer-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.v2-component-score-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.v2-component-score-row input[type="number"] {
  width: 100px;
  padding: var(--space-1) var(--space-2);
  border: 1.5px solid rgba(26, 42, 74, 0.2);
  border-radius: var(--radius-sm);
}

.v2-clickable-row {
  cursor: pointer;
}

.v2-clickable-row:hover {
  background: var(--gold-soft);
}