/*
 * fmgminds/css/pg-mock.css
 * ─────────────────────────────────────────────────────────────
 * CBT exam interface — FMGE standard.
 * No OMR bubbles, no offline UI.
 * All variables reference pg-theme.css tokens.
 * ─────────────────────────────────────────────────────────────
 */

/* ─── 3-panel CBT layout ──────────────────────────────────────────────────── */
.pg-exam-layout {
  display:             grid;
  grid-template-rows:  auto 1fr auto;
  grid-template-columns: 1fr 260px;
  grid-template-areas:
    "header  header"
    "main    palette"
    "footer  palette";
  height:              100vh;
  overflow:            hidden;
}

.pg-exam-header {
  grid-area:       header;
  background:      var(--pg-green-900);
  color:           var(--pg-white);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         0 var(--pg-s6);
  height:          52px;
  flex-shrink:     0;
  border-bottom:   1px solid rgba(255,255,255,0.06);
}

.pg-exam-main {
  grid-area:  main;
  overflow-y: auto;
  padding:    var(--pg-s6);
  background: var(--pg-grey-50);
}

.pg-exam-palette {
  grid-area:   palette;
  background:  var(--pg-white);
  border-left: 1px solid var(--pg-grey-200);
  overflow-y:  auto;
  padding:     var(--pg-s4);
}

.pg-exam-footer {
  grid-area:       footer;
  background:      var(--pg-white);
  border-top:      1px solid var(--pg-grey-200);
  padding:         var(--pg-s3) var(--pg-s6);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--pg-s4);
  flex-shrink:     0;
}

/* ─── Exam timer ─────────────────────────────────────────────────────────── */
.pg-timer {
  font-family: var(--pg-font-mono);
  font-size:   var(--pg-text-xl);
  font-weight: 700;
  color:       var(--pg-timer-normal);
  min-width:   110px;
  text-align:  center;
  letter-spacing: 0.05em;
  transition:  color var(--pg-transition);
}

.pg-timer--warning  { color: var(--pg-timer-warning); }
.pg-timer--critical {
  color:     var(--pg-timer-critical);
  animation: pg-timer-pulse 1s ease-in-out infinite;
}

@keyframes pg-timer-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ─── Loading overlay ────────────────────────────────────────────────────── */
.pg-mock-loader {
  position:        fixed;
  inset:           0;
  background:      var(--pg-grey-50);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         var(--pg-z-modal);
  flex-direction:  column;
  gap:             var(--pg-s4);
}

.pg-mock-loader__box {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--pg-s4);
  color:          var(--pg-grey-500);
}

.pg-mock-loader__box p {
  font-size: var(--pg-text-base);
  color:     var(--pg-grey-500);
}

/* ─── Spinner ────────────────────────────────────────────────────────────── */
.pg-spinner {
  width:  40px;
  height: 40px;
  border: 3px solid var(--pg-grey-200);
  border-top-color: var(--pg-green-500);
  border-radius: var(--pg-r-full);
  animation: pg-spin 0.7s linear infinite;
}

@keyframes pg-spin { to { transform: rotate(360deg); } }

/* ─── Question card ──────────────────────────────────────────────────────── */
.pg-question-card {
  background:    var(--pg-white);
  border-radius: var(--pg-r-lg);
  padding:       var(--pg-s6);
  box-shadow:    var(--pg-shadow-sm);
  margin-bottom: var(--pg-s4);
  border:        1px solid var(--pg-grey-200);
}

.pg-question-meta__label {
  display: inline-flex;
  align-items: center;
  padding: 3px 12px;
  background: #EDF4F0;
  color: #134D34;
  border: 1px solid #C8DDD4;
  border-radius: 999px;
  font-size: var(--pg-text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.pg-question-meta {
  display:       flex;
  align-items:   center;
  gap:           var(--pg-s3);
  margin-bottom: var(--pg-s4);
  flex-wrap:     wrap;
}

.pg-question-number {
  font-size:   var(--pg-text-sm);
  font-weight: var(--pg-weight-bold);
  color:       var(--pg-green-700);
}

.pg-question-stem {
  font-size:     var(--pg-text-base);
  line-height:   var(--pg-leading-loose);
  color:         var(--pg-grey-900);
  margin-bottom: var(--pg-s6);
}

/* ─── Question image ─────────────────────────────────────────────────────── */
.pg-q-image {
  margin: var(--pg-s4) 0;
}

.pg-q-image img {
  max-height:    280px;
  border-radius: var(--pg-r-md);
  border:        1px solid var(--pg-grey-200);
  cursor:        zoom-in;
  transition:    max-height var(--pg-transition-slow);
}

.pg-q-image img.pg-q-image--zoomed {
  max-height: 560px;
  cursor:     zoom-out;
}

.pg-q-image__hint {
  font-size: var(--pg-text-xs);
  color:     var(--pg-grey-400);
  margin-top: var(--pg-s1);
}

/* ─── Options A–D ────────────────────────────────────────────────────────── */
.pg-options {
  display:        flex;
  flex-direction: column;
  gap:            var(--pg-s3);
}

.pg-option {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--pg-s3);
  padding:       var(--pg-s4);
  border:        2px solid var(--pg-grey-200);
  border-radius: var(--pg-r-md);
  cursor:        pointer;
  transition:    all var(--pg-transition);
  background:    var(--pg-white);
  user-select:   none;
}

.pg-option:hover {
  border-color: var(--pg-green-300);
  background:   var(--pg-green-50);
}

.pg-option--selected {
  border-color: var(--pg-green-500);
  background:   var(--pg-green-100);
}

.pg-option--correct {
  border-color: var(--pg-correct);
  background:   var(--pg-correct-bg);
}

.pg-option--incorrect {
  border-color: var(--pg-incorrect);
  background:   var(--pg-incorrect-bg);
}

.pg-option__key {
  width:           28px;
  height:          28px;
  border-radius:   var(--pg-r-full);
  border:          2px solid currentColor;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--pg-text-xs);
  font-weight:     var(--pg-weight-bold);
  flex-shrink:     0;
  color:           var(--pg-grey-400);
  transition:      all var(--pg-transition);
}

.pg-option--selected  .pg-option__key { color: var(--pg-green-600);  border-color: var(--pg-green-600);  }
.pg-option--correct   .pg-option__key { color: var(--pg-correct);   border-color: var(--pg-correct);   }
.pg-option--incorrect .pg-option__key { color: var(--pg-incorrect); border-color: var(--pg-incorrect); }

.pg-option__text {
  font-size:   var(--pg-text-base);
  line-height: var(--pg-leading-normal);
  color:       var(--pg-grey-800, var(--pg-grey-900));
}

/* ─── CBT Question Palette ───────────────────────────────────────────────── */
.pg-palette__title {
  font-size:      var(--pg-text-xs);
  font-weight:    var(--pg-weight-bold);
  color:          var(--pg-green-700);
  margin-bottom:  var(--pg-s3);
  text-transform: uppercase;
  letter-spacing: var(--pg-tracking-wider);
}

.pg-palette__legend {
  display:        flex;
  flex-direction: column;
  gap:            var(--pg-s2);
  margin-bottom:  var(--pg-s4);
}

.pg-palette__legend-item {
  display:     flex;
  align-items: center;
  gap:         var(--pg-s2);
  font-size:   var(--pg-text-xs);
  color:       var(--pg-grey-500);
}

.pg-palette__grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   3px;
}

.pg-palette__btn {
  aspect-ratio:  1;
  border:        none;
  border-radius: var(--pg-r-sm);
  font-size:     var(--pg-text-xs);
  font-weight:   var(--pg-weight-semi);
  cursor:        pointer;
  transition:    all var(--pg-transition);
  color:         var(--pg-white);
}

/* NBE standard palette colours */
.pg-palette__btn--not-visited     { background: var(--pg-palette-not-visited);     color: var(--pg-grey-700); }
.pg-palette__btn--answered        { background: var(--pg-palette-answered);        color: var(--pg-white); }
.pg-palette__btn--not-answered    { background: var(--pg-palette-not-answered);    color: var(--pg-white); }
.pg-palette__btn--marked          { background: var(--pg-palette-marked);          color: var(--pg-white); }
.pg-palette__btn--answered-marked {
  background: linear-gradient(135deg, var(--pg-palette-marked) 50%, var(--pg-palette-answered) 50%);
  color:      var(--pg-white);
}

.pg-palette__btn:hover { opacity: 0.8; transform: scale(1.06); }

.pg-palette__btn.current {
  outline:        3px solid var(--pg-green-500);
  outline-offset: 1px;
  transform:      scale(1.06);
}

/* ─── Modal overlay ──────────────────────────────────────────────────────── */
.pg-modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(5,15,10,0.55);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         var(--pg-z-modal);
  backdrop-filter: blur(3px);
  padding:         var(--pg-s4);
}

.pg-modal {
  background:    var(--pg-white);
  border-radius: var(--pg-r-xl);
  padding:       var(--pg-s6);
  width:         100%;
  max-width:     480px;
  box-shadow:    var(--pg-shadow-xl);
  animation:     pg-slide-up 200ms var(--pg-ease);
}

.pg-modal__title {
  font-size:     var(--pg-text-xl);
  font-weight:   var(--pg-weight-black);
  color:         var(--pg-green-800);
  margin-bottom: var(--pg-s4);
}

.pg-modal__body {
  margin-bottom: var(--pg-s5);
  color:         var(--pg-grey-600, var(--pg-grey-500));
  font-size:     var(--pg-text-sm);
}

.pg-modal__footer {
  display:         flex;
  justify-content: flex-end;
  gap:             var(--pg-s3);
}

/* Submit modal stat grid */
.pg-submit-stats {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--pg-s3);
  margin-bottom:         var(--pg-s4);
}

.pg-submit-stat {
  text-align:    center;
  padding:       var(--pg-s3);
  border-radius: var(--pg-r);
  border:        1px solid;
}

.pg-submit-stat--green  { border-color: #86EFAC; background: #DCFCE7; }
.pg-submit-stat--red    { border-color: #FCA5A5; background: #FEE2E2; }
.pg-submit-stat--purple { border-color: #C4B5FD; background: #EDE9FE; }

.pg-submit-stat__num {
  display:     block;
  font-size:   var(--pg-text-3xl);
  font-weight: var(--pg-weight-black);
}

.pg-submit-stat--green  .pg-submit-stat__num { color: var(--pg-correct);   }
.pg-submit-stat--red    .pg-submit-stat__num { color: var(--pg-incorrect); }
.pg-submit-stat--purple .pg-submit-stat__num { color: #5B21B6;             }

.pg-submit-stat__label {
  font-size:      var(--pg-text-xs);
  color:          var(--pg-grey-500);
  font-weight:    var(--pg-weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--pg-tracking-wide);
}

/* ─── Toast notification ─────────────────────────────────────────────────── */
.pg-toast {
  position:      fixed;
  bottom:        var(--pg-s6);
  right:         var(--pg-s6);
  padding:       var(--pg-s3) var(--pg-s5);
  border-radius: var(--pg-r);
  font-size:     var(--pg-text-sm);
  font-weight:   var(--pg-weight-semi);
  box-shadow:    var(--pg-shadow-lg);
  z-index:       var(--pg-z-toast);
  animation:     pg-slide-up 200ms var(--pg-ease);
  max-width:     320px;
}

.pg-toast--error   { background: var(--pg-incorrect); color: var(--pg-white); }
.pg-toast--success { background: var(--pg-correct);   color: var(--pg-white); }
.pg-toast--info    { background: var(--pg-green-700); color: var(--pg-white); }
.pg-toast--warning { background: var(--pg-warning);   color: var(--pg-white); }

/* ─── Palette summary counts ─────────────────────────────────────────────── */
.pg-palette__count {
  display:     flex;
  align-items: center;
  gap:         var(--pg-s2);
  font-size:   var(--pg-text-xs);
  color:       var(--pg-grey-500);
}

.dot {
  width:        10px;
  height:       10px;
  border-radius: var(--pg-r-full);
  flex-shrink:  0;
}

.dot--green  { background: var(--pg-palette-answered);     }
.dot--red    { background: var(--pg-palette-not-answered); }
.dot--purple { background: var(--pg-palette-marked);       }

/* ─── Skeleton loading ───────────────────────────────────────────────────── */
.pg-skeleton {
  background: linear-gradient(90deg,
    var(--pg-grey-100) 25%,
    var(--pg-grey-200) 50%,
    var(--pg-grey-100) 75%
  );
  background-size: 400% 100%;
  animation:       pg-shimmer 1.4s ease infinite;
  border-radius:   var(--pg-r);
}

@keyframes pg-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

/* ─── AI Explain panel ───────────────────────────────────────────────────── */
#pg-explain-panel {
  border: 1px solid var(--pg-green-200);
  background: var(--pg-green-50);
}

#pg-explain-panel .pg-card__title {
  color: var(--pg-green-700);
}

#pg-explain-container {
  font-size:   var(--pg-text-sm);
  line-height: var(--pg-leading-loose);
  color:       var(--pg-grey-700);
}

#pg-explain-container p   { margin-bottom: var(--pg-s3); }
#pg-explain-container strong { color: var(--pg-green-700); }

/* ─── Keyboard shortcut hint ─────────────────────────────────────────────── */
.pg-keyboard-hint {
  font-size: var(--pg-text-xs);
  color:     var(--pg-grey-400);
  display:   flex;
  gap:       var(--pg-s3);
  flex-wrap: wrap;
  padding-top: var(--pg-s3);
  border-top: 1px solid var(--pg-grey-100);
  margin-top: var(--pg-s4);
}

.pg-keyboard-hint kbd {
  background:  var(--pg-grey-100);
  border:      1px solid var(--pg-grey-300);
  border-radius: 3px;
  padding:     1px 5px;
  font-family: var(--pg-font-mono);
  font-size:   10px;
  color:       var(--pg-grey-600, var(--pg-grey-500));
}

/* ─── Marked button active state ─────────────────────────────────────────── */
.pg-btn--marked-active {
  background:   #EDE9FE;
  color:        #5B21B6;
  border-color: #C4B5FD;
}

/* ─── Slide-up animation (shared) ────────────────────────────────────────── */
@keyframes pg-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Footer removed from grid flow — it becomes fixed instead */
  .pg-exam-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "palette";
    height:         auto;
    overflow:       unset;
    /* Push content above the fixed footer (approx 64px + safe area) */
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  .pg-exam-palette {
    border-left: none;
    border-top:  1px solid var(--pg-grey-200);
    max-height:  300px;
  }

  .pg-palette__grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .pg-exam-main {
    padding: var(--pg-s4);
  }

  /* ── Fixed sticky footer on mobile ──────────────────────────── */
  .pg-exam-footer {
    position:   fixed;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    300;
    /* iOS safe area — keeps buttons above home indicator bar */
    padding-bottom: max(var(--pg-s2), env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.10);
    border-top: 2px solid var(--pg-grey-200);
    /* Maintain white opaque background — never see content bleed through */
    background: var(--pg-white);
  }
}

@media (max-width: 600px) {
  .pg-exam-header {
    padding: 0 var(--pg-s4);
  }

  .pg-exam-footer {
    padding:    var(--pg-s2) var(--pg-s4);
    flex-wrap:  wrap;
    gap:        var(--pg-s2);
  }

  .pg-palette__grid {
    grid-template-columns: repeat(6, 1fr);
  }
}