/* Dashboard Container - Styled as a modern white card */
.score-dashboard {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  background-color: #ffffff;
  padding: 32px 40px;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  border: 1px solid #e2e8f0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin-bottom: 40px;
}

/* Donut Chart Base Styling */
.donut-chart {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

.donut-inner {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.donut-pct {
  font-size: 36px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

.donut-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-top: 6px;
  text-transform: uppercase;
}

/* Dynamic Score Classes - 25 point scale mapped to Emerald/Red */
.donut-score-0 { background: conic-gradient(#10b981 0%, #ef4444 0%); }
.donut-score-1 { background: conic-gradient(#10b981 4%, #ef4444 0); }
.donut-score-2 { background: conic-gradient(#10b981 8%, #ef4444 0); }
.donut-score-3 { background: conic-gradient(#10b981 12%, #ef4444 0); }
.donut-score-4 { background: conic-gradient(#10b981 16%, #ef4444 0); }
.donut-score-5 { background: conic-gradient(#10b981 20%, #ef4444 0); }
.donut-score-6 { background: conic-gradient(#10b981 24%, #ef4444 0); }
.donut-score-7 { background: conic-gradient(#10b981 28%, #ef4444 0); }
.donut-score-8 { background: conic-gradient(#10b981 32%, #ef4444 0); }
.donut-score-9 { background: conic-gradient(#10b981 36%, #ef4444 0); }
.donut-score-10 { background: conic-gradient(#10b981 40%, #ef4444 0); }
.donut-score-11 { background: conic-gradient(#10b981 44%, #ef4444 0); }
.donut-score-12 { background: conic-gradient(#10b981 48%, #ef4444 0); }
.donut-score-13 { background: conic-gradient(#10b981 52%, #ef4444 0); }
.donut-score-14 { background: conic-gradient(#10b981 56%, #ef4444 0); }
.donut-score-15 { background: conic-gradient(#10b981 60%, #ef4444 0); }
.donut-score-16 { background: conic-gradient(#10b981 64%, #ef4444 0); }
.donut-score-17 { background: conic-gradient(#10b981 68%, #ef4444 0); }
.donut-score-18 { background: conic-gradient(#10b981 72%, #ef4444 0); }
.donut-score-19 { background: conic-gradient(#10b981 76%, #ef4444 0); }
.donut-score-20 { background: conic-gradient(#10b981 80%, #ef4444 0); }
.donut-score-21 { background: conic-gradient(#10b981 84%, #ef4444 0); }
.donut-score-22 { background: conic-gradient(#10b981 88%, #ef4444 0); }
.donut-score-23 { background: conic-gradient(#10b981 92%, #ef4444 0); }
.donut-score-24 { background: conic-gradient(#10b981 96%, #ef4444 0); }
.donut-score-25 { background: conic-gradient(#10b981 100%, #ef4444 0); }

/* Stats Cards Layout */
.stats-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-grow: 1;
  min-width: 250px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: #ffffff;
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

/* Icons */
.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}

.icon-correct {
  background-color: #ecfdf5;
  color: #059669;
}

.icon-incorrect {
  background-color: #fef2f2;
  color: #dc2626;
}

.stat-text {
  display: flex;
  flex-direction: column;
}

.stat-label {
  color: #64748b;
  font-size: 14px;
  font-weight: 600;
}

.stat-value {
  color: #0f172a;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

/* Main Question Card Wrapper */
.quiz-question-item {
  margin-top: 32px;
  margin-bottom: 32px;
  padding: 24px;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  /* overflow:hidden is crucial! It keeps the stretched headers neatly inside the rounded corners */
  overflow: hidden; 
}

/* Status Headers - Negative margins stretch them to the edges of the card wrapper */
.quiz-correct {
  display: block;
  background-color: #ecfdf5;
  color: #065f46;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid #a7f3d0;
  margin: -24px -24px 24px -24px; /* Pulls header to edge of padded card */
}

.quiz-incorrect {
  display: block;
  background-color: #fef2f2;
  color: #991b1b;
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid #fecaca;
  margin: -24px -24px 24px -24px; /* Pulls header to edge of padded card */
}

/* "Correct Answer" Box - Injected via computed Twig */
.quiz-answer-hint {
  flex: 1;
  min-width: 280px;
  margin: 16px 0 0 0;
  padding: 16px 20px;
  border: 1px solid #d1fae5;
  border-radius: 8px;
  background-color: #ecfdf5;
  color: #065f46;
  display: block;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

.quiz-answer-hint strong {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  font-weight: 700;
  color: #047857;
}

/* Ensures multiselect unordered lists format nicely */
.quiz-answer-hint ul {
  margin: 8px 0 0 0 !important;
  padding-left: 20px !important;
  list-style-type: disc !important;
  line-height: 1.6;
}

.quiz-answer-hint ul li {
  margin-bottom: 6px;
}

/* Layout tools for placing "Your Answer" and "Correct Answer" side-by-side */
.quiz-review-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.quiz-review-left {
  flex: 1;
  min-width: 280px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 20px;
  background-color: #f8fafc;
  color: #334155;
  margin-top: 16px;
}

/* If inside the flex row, remove the top margins so they align perfectly */
.quiz-review-row .quiz-review-left,
.quiz-review-row .quiz-answer-hint {
  margin-top: 0;
}

.quiz-review-left strong {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  font-weight: 700;
  color: #64748b;
}