/*
 * fmgminds/css/pg-analytics.css
 * ─────────────────────────────────────────────────────────────
 * Analytics & post-test results page — FMGE product.
 * All variables reference pg-theme.css tokens.
 * ─────────────────────────────────────────────────────────────
 */

/* ─── Score hero ─────────────────────────────────────────────────────────── */
.pg-score-hero {
  background:    linear-gradient(135deg, var(--pg-green-900) 0%, var(--pg-green-700) 100%);
  color:         var(--pg-white);
  border-radius: var(--pg-r-xl);
  padding:       var(--pg-s8);
  display:       flex;
  align-items:   center;
  gap:           var(--pg-s8);
  margin-bottom: var(--pg-s6);
  box-shadow:    var(--pg-shadow-lg);
}

.pg-score-hero__circle {
  width:           156px;
  height:          156px;
  border-radius:   50%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  gap:             2px;
  /* Layered ring effect */
  background:      rgba(255,255,255,0.06);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,0.08),
    inset 0 0 0 8px rgba(255,255,255,0.04),
    0 0 40px rgba(19,77,52,0.18);
  border:          3px solid rgba(255,255,255,0.22);
}

/* The actual score number — large, tight, tabular */
.pg-score-hero__score-val {
  font-size:           2.4rem;          /* 38px — big but contained */
  font-weight:         900;
  line-height:         1;
  color:               var(--pg-white);
  letter-spacing:      -0.04em;
  font-variant-numeric: tabular-nums;
}

/* Divider line between score and max */
.pg-score-hero__score-sep {
  width:        36px;
  height:       1.5px;
  background:   rgba(255,255,255,0.25);
  border-radius: 2px;
  margin:       3px 0;
}

/* The /800 denominator */
.pg-score-hero__score-max {
  font-size:           0.8rem;
  font-weight:         700;
  color:               rgba(255,255,255,0.55);
  letter-spacing:      0.04em;
  font-variant-numeric: tabular-nums;
}

/* Legacy: keep .pg-score-hero__number working if still used */
.pg-score-hero__number {
  font-size:   1.5rem;
  font-weight: 900;
  line-height: 1;
  color:       var(--pg-white);
  text-align:  center;
  word-break:  break-all;
}

.pg-score-hero__label {
  font-size:  var(--pg-text-xs);
  opacity:    0.65;
  color:      var(--pg-white);
  margin-top: 2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.pg-score-hero__details { flex: 1; }

.pg-score-hero__title {
  font-size:     var(--pg-text-2xl);
  font-weight:   var(--pg-weight-black);
  color:         var(--pg-white);
  margin-bottom: var(--pg-s2);
  line-height:   var(--pg-leading-tight);
}

.pg-score-hero__subtitle {
  font-size: var(--pg-text-sm);
  color:     rgba(255,255,255,0.6);
  margin-bottom: var(--pg-s4);
}

.pg-score-meta {
  display:    flex;
  gap:        var(--pg-s6);
  flex-wrap:  wrap;
  margin-top: var(--pg-s3);
}

.pg-score-meta__item {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.pg-score-meta__value {
  font-size:   var(--pg-text-xl);
  font-weight: var(--pg-weight-bold);
  color:       var(--pg-white);
}

.pg-score-meta__label {
  font-size: var(--pg-text-xs);
  color:     rgba(255,255,255,0.55);
}

/* ─── Performance grade pill ─────────────────────────────────────────────── */
.pg-grade-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--pg-s2);
  padding:        var(--pg-s2) var(--pg-s4);
  border-radius:  var(--pg-r-full);
  font-size:      var(--pg-text-sm);
  font-weight:    var(--pg-weight-bold);
  letter-spacing: var(--pg-tracking-wide);
}

.pg-grade-pill--excellent { background: rgba(27,107,58,0.3); color: #86EFAC; border: 1px solid rgba(134,239,172,0.3); }
.pg-grade-pill--good      { background: rgba(19,77,52,0.25); color: #7DCBA4; border: 1px solid rgba(125,203,164,0.3); }
.pg-grade-pill--average   { background: rgba(146,64,14,0.3); color: #FCD34D; border: 1px solid rgba(252,211,77,0.3);  }
.pg-grade-pill--poor      { background: rgba(155,28,28,0.3); color: #FCA5A5; border: 1px solid rgba(252,165,165,0.3); }

/* ─── Chart containers ───────────────────────────────────────────────────── */
.pg-charts-row {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           var(--pg-s5);
  margin-bottom: var(--pg-s6);
}

.pg-chart-container {
  background:    var(--pg-white);
  border:        1px solid var(--pg-grey-200);
  border-radius: var(--pg-r-lg);
  padding:       var(--pg-s6);
  box-shadow:    var(--pg-shadow-sm);
}

.pg-chart-title {
  font-size:     var(--pg-text-base);
  font-weight:   var(--pg-weight-bold);
  color:         var(--pg-green-700);
  margin-bottom: var(--pg-s4);
}

/* ─── Subject breakdown table ────────────────────────────────────────────── */
.pg-breakdown-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--pg-text-sm);
}

.pg-breakdown-table th {
  text-align:     left;
  padding:        var(--pg-s2) var(--pg-s4);
  background:     var(--pg-grey-50);
  color:          var(--pg-grey-400);
  font-weight:    var(--pg-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--pg-tracking-wider);
  font-size:      var(--pg-text-xs);
  border-bottom:  2px solid var(--pg-grey-200);
}

.pg-breakdown-table td {
  padding:       var(--pg-s3) var(--pg-s4);
  border-bottom: 1px solid var(--pg-grey-100);
  color:         var(--pg-grey-700);
  vertical-align: middle;
}

.pg-breakdown-table tr:last-child td { border-bottom: none; }
.pg-breakdown-table tr:hover td { background: var(--pg-grey-50); }

/* ─── Accuracy colour coding ─────────────────────────────────────────────── */
.pg-acc--high   { color: var(--pg-correct);   font-weight: var(--pg-weight-bold); }
.pg-acc--mid    { color: var(--pg-warning);   font-weight: var(--pg-weight-bold); }
.pg-acc--low    { color: var(--pg-incorrect); font-weight: var(--pg-weight-bold); }

/* ─── Weak chapter chips ─────────────────────────────────────────────────── */
.pg-weak-list {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--pg-s2);
  margin-top: var(--pg-s3);
}

.pg-weak-chip {
  background:    var(--pg-incorrect-bg);
  color:         var(--pg-incorrect);
  border:        1px solid #FCA5A5;
  border-radius: var(--pg-r-full);
  padding:       var(--pg-s1) var(--pg-s3);
  font-size:     var(--pg-text-sm);
  font-weight:   var(--pg-weight-medium);
}

/* ─── AI Explanation panel ───────────────────────────────────────────────── */
.pg-explain__loading {
  display:     flex;
  align-items: center;
  gap:         var(--pg-s3);
  color:       var(--pg-grey-500);
  font-size:   var(--pg-text-sm);
}

.pg-explain__badge {
  display:        inline-block;
  padding:        2px var(--pg-s2);
  border-radius:  var(--pg-r-full);
  font-size:      var(--pg-text-xs);
  font-weight:    var(--pg-weight-bold);
  margin-bottom:  var(--pg-s3);
}

.pg-explain__badge--cached { background: var(--pg-correct-bg);  color: var(--pg-correct); }
.pg-explain__badge--fresh  { background: var(--pg-info-bg);     color: var(--pg-info);    }

.pg-explain__text {
  font-size:   var(--pg-text-base);
  line-height: var(--pg-leading-loose);
  color:       var(--pg-grey-700);
}

.pg-explain__error {
  color:     var(--pg-incorrect);
  font-size: var(--pg-text-sm);
}

/* ─── Result question list ───────────────────────────────────────────────── */
.pg-result-question {
  background:    var(--pg-white);
  border:        1px solid var(--pg-grey-200);
  border-radius: var(--pg-r-lg);
  padding:       var(--pg-s5);
  margin-bottom: var(--pg-s3);
}

.pg-result-question--correct   { border-left: 4px solid var(--pg-correct);   }
.pg-result-question--incorrect { border-left: 4px solid var(--pg-incorrect); }
.pg-result-question--skipped   { border-left: 4px solid var(--pg-grey-300);  }

.pg-result-question__stem {
  font-size:     var(--pg-text-base);
  line-height:   var(--pg-leading-snug);
  color:         var(--pg-grey-900);
  margin-bottom: var(--pg-s3);
}

.pg-result-question__answer {
  font-size:   var(--pg-text-sm);
  color:       var(--pg-grey-500);
  display:     flex;
  gap:         var(--pg-s4);
  flex-wrap:   wrap;
  align-items: center;
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .pg-score-hero {
    flex-direction: column;
    text-align: center;
    padding: var(--pg-s6);
  }

  .pg-score-meta { justify-content: center; }

  .pg-charts-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  /* Scale circle down on small phones without text overflowing */
  .pg-score-hero__circle {
    width:  130px !important;
    height: 130px !important;
  }
  .pg-score-hero__score-val {
    font-size: 2rem !important;
  }
  .pg-score-hero__score-max {
    font-size: 0.72rem !important;
  }