/* website/static/css/components/questions.css */

/* ------------------------------------------------------------
   CRYSTAL GLASS QUESTION CARDS (Theme-Aware + Glass System)
   website/static/css/components/questions.css
------------------------------------------------------------
   FEATURES ADDED:
   ✓ Unified correct/incorrect states
   ✓ Animated reveal transitions
   ✓ Answer highlight animations
   ✓ Shake animation for incorrect answers
   ✓ Glow pulse for correct answers
   ✓ Time tracking UI (last attempt + history)
------------------------------------------------------------ */


/* ============================================================
   1) QUESTION LIST GRID
============================================================ */
#question-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-top: 2rem;
}



/* ============================================================
   2) QUESTION CARD (inherits .card)
============================================================ */
.question-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;

  padding: 1.5rem;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));

  box-shadow: var(--shadow-medium);
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background var(--transition-fast);

  opacity: 0;
  animation: fadeIn var(--transition-slow) forwards;
}



/* ============================================================
   3) QUESTION TITLE / LINK
============================================================ */
.question-card .question-link {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-medium);
}

.question-card .question-link:hover {
  color: var(--color-gold);
}



/* ============================================================
   4) META INFO (Original Minimal Style)
============================================================ */
.question-card .question-meta {
  font-size: 0.9rem;
  margin-top: 0.4rem;
  color: var(--color-muted);
}



/* ============================================================
   4.1) META INFO BAR (Subject / Chapter / Difficulty)
   — Fully SINALOL-compliant (glass, theme-aware, variable-driven)
============================================================ */
.question-meta {
  background: var(--glass-transparent-bg);
  border: 1px solid var(--glass-border);
  color: var(--glass-text);

  padding: 0.6rem 1rem;
  margin: 0.6rem 0 1rem 0;

  border-radius: var(--radius-base);
  box-shadow: var(--shadow-light);

  display: flex;
  gap: 1.2rem;
  align-items: center;

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));

  animation: fadeInCard var(--transition-medium) ease;
}

.question-meta .meta-item {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--glass-text);
  opacity: 0.9;
}



/* ============================================================
   5) ANSWER OPTIONS
============================================================ */
.answer-form label {
  display: block;
  margin: 0.4rem 0;
  padding: 0.6rem 0.8rem;

  border-radius: var(--radius-base);
  background: var(--glass-transparent-bg);
  border: 1px solid var(--glass-border);
  color: var(--glass-text);

  cursor: pointer;

  transition:
    background var(--transition-medium),
    border-color var(--transition-medium),
    transform var(--transition-medium),
    box-shadow var(--transition-medium);
}

.answer-form label:hover {
  background: rgba(255,215,0,0.25);
  border-color: var(--color-gold);
  transform: translateY(-1px);
}



/* ============================================================
   6) UNIFIED ANSWER STATES (SINALOL Glass System)
============================================================ */

/* User chose the correct answer → BLUE */
.answer-form label.chosen-correct {
  background: rgba(0, 140, 255, 0.22);
  border-color: rgba(0, 140, 255, 0.45);
  box-shadow: 0 0 12px rgba(0, 140, 255, 0.35);

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));

  transition: all var(--transition-medium);
}

/* White answer → highlight correct option in BLUE */
.answer-form label.missed {
  background: rgba(0, 140, 255, 0.18);
  border-color: rgba(0, 140, 255, 0.35);
  box-shadow: 0 0 10px rgba(0, 140, 255, 0.25);

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));

  transition: all var(--transition-medium);
}

/* Correct answer highlight (when user was wrong) → GREEN */
.answer-form label.correct {
  background: rgba(var(--color-success-rgb, 40,167,69), 0.25);
  border-color: var(--color-success);
  box-shadow: 0 0 12px rgba(var(--color-success-rgb, 40,167,69), 0.6);
  animation: glowPulse 1.5s infinite;

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/* Incorrect answer highlight → RED */
.answer-form label.incorrect {
  background: rgba(var(--color-danger-rgb, 220,53,69), 0.25);
  border-color: var(--color-danger);
  animation: shake 0.4s ease;

  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}



/* ============================================================
   7) QUESTION CARD STATES (Correct / Incorrect)
============================================================ */
.question-card.correct {
  border-color: var(--color-success);
  background: rgba(var(--color-success-rgb, 40,167,69), 0.12);
  animation: revealSlide 0.5s ease forwards;
}

.question-card.incorrect {
  border-color: var(--color-danger);
  background: rgba(var(--color-danger-rgb, 220,53,69), 0.12);
  animation: revealSlide 0.5s ease forwards, shake 0.4s ease;
}



/* ============================================================
   8) SUBMIT BUTTON (Fancy Gradient Pill)
============================================================ */
.question-card .submit-btn {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary)
  );

  color: #fff;
  border: none;
  border-radius: 999px;

  padding: 0.9rem 1.8rem;
  font-size: 1.05rem;
  font-weight: 700;

  cursor: pointer;

  transition: all var(--transition-medium);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);

  margin-top: 1rem;
}

.question-card .submit-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}



/* ============================================================
   9) STATS + ANSWER BOXES
============================================================ */
.stats-box,
.answer-box,
.terminology-box {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--glass-text);
}

/* Last attempt summary */
.last-attempt {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--color-accent);
}

/* History box */
.history-box {
  margin-top: 0.8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--glass-border);
  background: var(--glass-transparent-bg);
  border-radius: var(--radius-base);
  font-size: 0.85rem;
  color: var(--glass-text);
}

.history-box h4 {
  margin: 0 0 6px 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-accent);
}

.history-box ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.history-box li {
  margin-bottom: 4px;
}

/* History button */
.history-btn {
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 0.8rem;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255,215,0,0.25);
  transition: all var(--transition-fast);
}
.history-btn:hover {
  background: rgba(255,215,0,0.45);
}



/* ============================================================
   10) TOOLTIP CSS
============================================================ */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin-left: 6px;
  font-weight: bold;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 0 6px;
  background-color: #f9f9f9;
  color: #007BFF;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext,
.tooltip:active .tooltiptext {
  visibility: visible;
  opacity: 1;
}



/* ============================================================
   11) CONTROL BUTTONS
============================================================ */
.nav-buttons,
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.2rem;
  flex-wrap: wrap;
}



/* ============================================================
   12) PILL BUTTONS
============================================================ */
.nav-btn,
.mark-btn,
.dict-btn {
  background: linear-gradient(
    135deg,
    rgba(255,215,0,0.3),
    rgba(255,165,0,0.3)
  );

  color: var(--glass-text);
  border: 1px solid var(--glass-border);
  border-radius: 999px;

  padding: 0.9rem 1.6rem;
  font-size: 1rem;
  font-weight: 600;

  cursor: pointer;

  transition: all var(--transition-medium);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

.nav-btn:hover,
.mark-btn:hover,
.dict-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(255,215,0,0.55),
    rgba(255,165,0,0.55)
  );

  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}



/* ============================================================
   13) DISABLED / INACTIVE STATE
============================================================ */
.nav-btn.inactive {
  background: rgba(255,255,255,0.1);
  color: var(--color-muted);
  cursor: not-allowed;
  box-shadow: none;
}



/* ============================================================
   14) ANIMATIONS
============================================================ */
@keyframes revealSlide {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-4px); }
  50%  { transform: translateX(4px); }
  75%  { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

@keyframes glowPulse {
  0%   { box-shadow: 0 0 6px rgba(var(--color-success-rgb, 40,167,69), 0.4); }
  50%  { box-shadow: 0 0 14px rgba(var(--color-success-rgb, 40,167,69), 0.8); }
  100% { box-shadow: 0 0 6px rgba(var(--color-success-rgb, 40,167,69), 0.4); }
}



/* ============================================================
   15) SMOOTH FADE
============================================================ */
.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}



/* ============================================================
   16) RESPONSIVE ADJUSTMENTS
============================================================ */
@media (max-width: 768px) {
  #question-list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }

  .question-card {
    padding: 1rem;
  }

  .nav-btn,
  .mark-btn,
  .dict-btn,
  .submit-btn {
    font-size: 0.95rem;
    padding: 0.7rem 1.4rem;
  }

  .history-box {
    font-size: 0.8rem;
    padding: 0.5rem;
  }
}

@media (max-width: 480px) {
  #question-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .question-card {
    padding: 0.8rem;
  }

  .question-card .question-link {
    font-size: 1.05rem;
  }

  .nav-buttons,
  .action-buttons {
    flex-direction: column;
    gap: 0.6rem;
  }

  .nav-btn,
  .mark-btn,
  .dict-btn,
  .submit-btn {
    width: 100%;
    text-align: center;
  }

  .last-attempt {
    font-size: 0.85rem;
  }

  .history-btn {
    width: 100%;
    margin-top: 6px;
    text-align: center;
  }
}