/* ==========================================================================
   Quiz Container Organism
   Main container, layout, and components for quiz-style interfaces.
   Includes: question cards, options, feedback, progress, flags, modals.
   ========================================================================== */

/* ── Quiz Layout ────────────────────────────────────────────────────────── */

.dq-quiz-container {
  max-width: 800px;
  margin: 0 auto;
  overflow-x: hidden;
  padding-top: var(--dq-space-4);
  padding-bottom: var(--dq-space-8);
}

.dq-question-container {
  min-height: 60vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  padding-top: var(--dq-space-2);
  padding-bottom: var(--dq-space-4);
}

.question-header-content {
  margin-bottom: var(--dq-space-4);
}

.answer-options-container {
  margin-top: var(--dq-space-4);
}

.quiz-nav-buttons {
  display: flex;
  gap: var(--dq-space-2);
  padding: 8px;
}

/* ── Question Card ──────────────────────────────────────────────────────── */

.dq-question-card {
  background: var(--dq-bg-card);
  border-radius: var(--dq-radius-xl);
  box-shadow: var(--dq-shadow-lg);
  border: 1px solid var(--dq-border);
  margin-bottom: var(--dq-space-8);
  overflow: hidden;
  transition: var(--dq-transition-normal);
}

.dq-question-header {
  padding: var(--dq-space-6);
  background: linear-gradient(135deg, var(--dq-primary-50) 0%, var(--dq-bg-card) 100%);
  border-bottom: 1px solid var(--dq-border);
}

.dq-question-number {
  font-size: var(--dq-font-size-sm);
  font-weight: var(--dq-font-weight-medium);
  color: var(--dq-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--dq-space-2);
}

.dq-question-text {
  font-size: var(--dq-font-size-lg);
  font-weight: var(--dq-font-weight-medium);
  color: var(--dq-text);
  line-height: var(--dq-line-height-relaxed);
  margin-bottom: 0;
  padding-right: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.dq-question-body {
  padding: var(--dq-space-8);
}

/* ── Options ────────────────────────────────────────────────────────────── */

.dq-options-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

.dq-option-item {
  margin-bottom: var(--dq-space-4);
}

.dq-option-item:last-child {
  margin-bottom: 0;
}

.dq-option-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--dq-space-4) var(--dq-space-6);
  background: var(--dq-bg-card);
  border: 2px solid var(--dq-border);
  border-radius: var(--dq-radius-lg);
  font-size: var(--dq-font-size-base);
  font-weight: var(--dq-font-weight-normal);
  color: var(--dq-gray-700);
  transition: all var(--dq-transition-fast);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  will-change: background-color, border-color, color;
}

.dq-option-btn::before,
.dq-option-btn:hover::before {
  display: none !important;
}

.dq-option-btn:focus {
  outline: none;
  border-color: var(--dq-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* --dq-primary at 25% */
}

.dq-option-btn.selected {
  border-color: var(--dq-primary);
  background-color: var(--dq-primary-50);
  color: var(--dq-primary);
  font-weight: var(--dq-font-weight-medium);
}

.dq-option-btn.correct {
  border-color: var(--dq-secondary-dark) !important;
  background-color: var(--dq-secondary-50) !important;
  color: var(--dq-secondary-dark) !important;
  pointer-events: none;
}

.dq-option-btn.correct:hover {
  transform: none !important;
  background-color: var(--dq-secondary-50) !important;
  border-color: var(--dq-secondary-dark) !important;
}

.dq-option-btn.correct:focus {
  box-shadow: none !important;
  outline: none !important;
}

.dq-option-btn.incorrect {
  border-color: var(--dq-danger);
  background-color: var(--dq-danger-50);
  color: var(--dq-danger-dark);
}

.dq-option-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Prevent layout shifts during feedback state changes */
.dq-option-btn.selected,
.dq-option-btn.option-correct,
.dq-option-btn.option-incorrect,
.dq-option-btn.option-correct-answer {
  transform: none !important;
  width: 100%;
  box-sizing: border-box;
}

/* Immediate feedback styling (HTMX partials) */
.option-correct {
  background: var(--dq-secondary-50) !important;
  border-color: var(--dq-secondary-dark) !important;
  color: var(--dq-secondary-dark) !important;
}

.option-incorrect {
  background: var(--dq-danger-50) !important;
  border-color: var(--dq-danger) !important;
  color: var(--dq-danger-dark) !important;
}

.option-correct-answer {
  background: var(--dq-secondary-50) !important;
  border-color: var(--dq-secondary-dark) !important;
  color: var(--dq-secondary-dark) !important;
}

/* ── Explanation ────────────────────────────────────────────────────────── */

.dq-explanation-simple {
  margin-bottom: var(--dq-space-6);
}

.dq-explanation-title {
  color: var(--dq-primary);
  font-weight: var(--dq-font-weight-semibold);
  font-size: var(--dq-font-size-base);
  margin-bottom: var(--dq-space-3);
  display: flex;
  align-items: center;
}

.dq-explanation-content {
  color: var(--dq-gray-700);
  font-size: var(--dq-font-size-base);
  line-height: var(--dq-line-height-relaxed);
  margin-bottom: 0;
}

/* Extension Card (Further Reading) */
.dq-extension-card {
  background-color: var(--dq-gray-100);
  border: 1px solid var(--dq-gray-300);
  border-radius: var(--dq-radius-lg);
  padding: var(--dq-space-4);
  margin-bottom: var(--dq-space-4);
}

.dq-extension-title {
  color: var(--dq-gray-600);
  font-weight: var(--dq-font-weight-medium);
  font-size: var(--dq-font-size-xs);
  margin-bottom: var(--dq-space-2);
  display: flex;
  align-items: center;
}

.dq-extension-content {
  color: var(--dq-gray-600);
  font-size: var(--dq-font-size-xs);
  line-height: var(--dq-line-height-normal);
  margin-bottom: 0;
}

/* Feedback gradients */
.dq-feedback-correct {
  background: linear-gradient(135deg, var(--dq-secondary-50) 0%, var(--dq-bg-card) 100%);
  border-left: 4px solid var(--dq-secondary-dark);
}

.dq-feedback-incorrect {
  background: linear-gradient(135deg, var(--dq-danger-50) 0%, var(--dq-bg-card) 100%);
  border-left: 4px solid var(--dq-danger);
}

/* Further Reading Divider */
.further-reading-divider {
  border: none;
  border-top: 1px dotted var(--dq-border);
  margin: var(--dq-space-8) 0 var(--dq-space-6) 0;
  opacity: 0.7;
}

/* ── Progress Bar ───────────────────────────────────────────────────────── */

.dq-progress {
  width: 100%;
  height: 8px;
  background-color: var(--dq-gray-200);
  border-radius: var(--dq-radius-full);
  overflow: hidden;
  margin-bottom: var(--dq-space-6);
}

.dq-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--dq-primary) 0%, var(--dq-primary-light) 100%);
  border-radius: var(--dq-radius-full);
  transition: width var(--dq-transition-normal);
}

/* Clean Progress Bar (sticky) */
.clean-progress-container {
  position: sticky;
  top: 0;
  background: transparent;
  z-index: 100;
  padding: var(--dq-space-4) 0;
  display: flex;
  align-items: center;
  gap: var(--dq-space-4);
}

.progress-flag-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
}

.progress-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--dq-space-3);
}

.progress-bar-clean {
  flex: 1;
  height: 8px;
  background: var(--dq-gray-100);
  border-radius: 4px;
  overflow: visible;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: var(--dq-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.new-questions-marker {
  position: absolute;
  top: -2px;
  height: 12px;
  width: 2px;
  background: var(--dq-text-muted);
  opacity: 0.6;
  z-index: 10;
  transform: translateX(-1px);
  transition: opacity var(--dq-transition-fast);
}

.new-questions-marker::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -15px;
  width: 32px;
  height: 32px;
  pointer-events: none;
}

.new-questions-marker:hover {
  opacity: 0.8;
}

.new-questions-marker:hover::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -4px;
  width: 10px;
  height: 18px;
  background: rgba(252, 186, 4, 0.3); /* --dq-warning at 30% */
  border-radius: 2px;
  z-index: -1;
}

.question-counter {
  display: none;
}

/* ── Quiz Navigation ────────────────────────────────────────────────────── */

.dq-quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--dq-space-6);
  background: var(--dq-bg-card);
  border-top: 1px solid var(--dq-border);
  box-shadow: var(--dq-shadow-sm);
}

.dq-quiz-progress-text {
  font-size: var(--dq-font-size-sm);
  color: var(--dq-gray-600);
  font-weight: var(--dq-font-weight-medium);
}

/* Quiz Next Button */
.quiz-next-btn {
  background-color: var(--dq-primary);
  border-color: var(--dq-primary);
  color: var(--dq-white);
}

.quiz-next-btn:hover {
  background-color: var(--dq-primary-dark);
  border-color: var(--dq-primary-dark);
  color: var(--dq-white);
}

/* ── Flag Button ────────────────────────────────────────────────────────── */

.dq-flag-btn {
  position: relative;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--dq-gray-400);
  cursor: pointer;
  transition: all var(--dq-transition-fast);
  font-size: 1.4rem;
  z-index: 10;
}

.dq-flag-btn:hover {
  color: var(--dq-text-muted);
  transform: scale(1.1);
}

.dq-flag-btn.flagged {
  background: none;
  border: none;
  color: var(--dq-warning);
  filter: drop-shadow(0 0 8px rgba(252, 186, 4, 0.9)) drop-shadow(0 0 16px rgba(252, 186, 4, 0.5)); /* --dq-warning glow */
  transform: scale(1.05);
}

.dq-flag-btn.flagged:hover {
  background: none;
  border: none;
  color: var(--dq-warning-dark);
  filter: drop-shadow(0 0 10px rgba(252, 186, 4, 1)) drop-shadow(0 0 20px rgba(252, 186, 4, 0.7));
  transform: scale(1.1);
}

/* ── Learning Issue Input ───────────────────────────────────────────────── */

.learning-issue-input-container {
  position: relative;
  display: flex;
  align-items: stretch;
}

.learning-issue-textarea {
  flex: 1;
  padding-right: 50px;
  padding-bottom: 45px;
  resize: vertical;
  border-radius: var(--dq-radius);
}

.learning-issue-submit-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--dq-secondary-dark);
  font-size: var(--dq-font-size-xl);
  padding: var(--dq-space-1);
  cursor: pointer;
  transition: all var(--dq-transition-fast);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.learning-issue-submit-btn:hover {
  background: var(--dq-secondary-50);
  color: var(--dq-secondary-dark);
  transform: scale(1.1);
}

.learning-issue-submit-btn:disabled {
  color: var(--dq-gray-400);
  cursor: not-allowed;
}

.learning-issue-submit-btn:disabled:hover {
  background: transparent;
  transform: none;
}

.learning-issue-delete-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--dq-danger);
  font-size: var(--dq-font-size-xl);
  padding: var(--dq-space-1);
  cursor: pointer;
  transition: all var(--dq-transition-fast);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.learning-issue-delete-btn:hover {
  background: var(--dq-danger-50);
  color: var(--dq-danger-dark);
  transform: scale(1.1);
}

/* Learning Issue Button (in quiz) */
.learning-issue-btn:disabled {
  background-color: var(--dq-gray-400) !important;
  border-color: var(--dq-gray-400) !important;
  color: var(--dq-white) !important;
  opacity: 0.8 !important;
  cursor: not-allowed !important;
}

.learning-issue-btn:not(:disabled) {
  background-color: var(--dq-warning) !important;
  border-color: var(--dq-warning) !important;
  color: var(--dq-white) !important;
  opacity: 1 !important;
}

.learning-issue-btn:not(:disabled):hover {
  background-color: var(--dq-warning-dark) !important;
  border-color: var(--dq-warning-dark) !important;
  transform: translateY(-1px);
}

/* Flag Notes Modal Header */
#flagNotesModal .modal-header {
  background: var(--dq-warning-50);
  border-bottom: 1px solid var(--dq-warning);
}

#flagNotesModal .modal-title {
  color: var(--dq-gray-700);
}

#flagNotesModal .modal-dialog {
  max-width: 500px;
}

/* ── Image Zoom Modal ───────────────────────────────────────────────────── */

.quiz-zoom-image {
  max-height: 90vh;
  max-width: 90vw;
  box-shadow: var(--dq-shadow-2xl);
  cursor: zoom-out;
}

.quiz-zoom-close-btn {
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  opacity: 0.8;
  z-index: 10;
  font-size: 24px;
  color: var(--dq-white);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.quiz-zoom-close-btn:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* ── Quiz Completion ────────────────────────────────────────────────────── */

.quiz-completion-icon {
  font-size: var(--dq-font-size-5xl);
}

#quiz-completion {
  background: linear-gradient(135deg, var(--dq-primary-50) 0%, var(--dq-secondary-50) 100%);
  border: 2px solid var(--dq-primary-light);
  text-align: center;
}

#quiz-completion .bi-check-circle-fill {
  animation: bounceIn 1s ease-out;
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Timer ──────────────────────────────────────────────────────────────── */

.dq-timer {
  font-family: var(--dq-font-family-mono);
  font-size: var(--dq-font-size-lg);
  font-weight: var(--dq-font-weight-semibold);
  color: var(--dq-primary);
}

/* ── HTMX States ────────────────────────────────────────────────────────── */

.htmx-submitting {
  pointer-events: none;
  opacity: 0.8;
}

.htmx-submitting .dq-option-btn {
  cursor: wait !important;
}

.htmx-swapping {
  opacity: 0.95;
  transition: opacity 0.1s ease;
}

/* ── Problem Report ─────────────────────────────────────────────────────── */

.dq-quiz-container .problem-report-container {
  margin-top: var(--dq-space-2);
  padding: var(--dq-space-2) 0;
}

/* ── Modal Backdrops ────────────────────────────────────────────────────── */

.modal-backdrop {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--dq-z-modal-backdrop);
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.fade { opacity: 0; transition: opacity 0.15s linear; }
.modal-backdrop.show { opacity: 0.5; }
.modal-backdrop.fade.show { opacity: 0.5; }

/* ── Spinner in Quiz Buttons ────────────────────────────────────────────── */

.quiz-circle-btn .dq-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border-width: 2.5px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .dq-quiz-container {
    padding: var(--dq-space-4) var(--dq-space-4) 0 var(--dq-space-4);
  }

  .dq-question-card {
    margin-bottom: var(--dq-space-6);
    border-radius: var(--dq-radius-lg);
  }

  .dq-question-header {
    padding: var(--dq-space-4);
  }

  .dq-question-body {
    padding: var(--dq-space-6);
  }

  .dq-question-text {
    font-size: var(--dq-font-size-base);
    padding-right: 0;
  }

  .dq-option-btn {
    padding: var(--dq-space-3) var(--dq-space-4);
    font-size: var(--dq-font-size-sm);
  }

  .dq-quiz-nav {
    padding: var(--dq-space-4);
    flex-direction: column;
    gap: var(--dq-space-3);
  }

  .dq-question-container {
    min-height: 50vh;
    overflow-x: hidden;
  }

  .clean-progress-container {
    padding: var(--dq-space-3) 0;
  }

  .mt-4.d-flex.justify-content-between {
    flex-direction: row !important;
    align-items: center;
    gap: var(--dq-space-2);
  }

  .further-reading-divider {
    margin: var(--dq-space-6) 0 var(--dq-space-4) 0;
  }

  #quiz-completion .bi-check-circle-fill {
    font-size: 3rem !important;
  }

  #quiz-completion h3 {
    font-size: var(--dq-font-size-2xl);
  }

  .py-8 {
    padding-top: var(--dq-space-6) !important;
    padding-bottom: var(--dq-space-6) !important;
  }
}

@media (max-width: 576px) {
  .dq-question-text {
    font-size: var(--dq-font-size-base);
    padding-right: 0;
  }

  .dq-option-btn {
    padding: var(--dq-space-3);
    font-size: var(--dq-font-size-sm);
    border-radius: var(--dq-radius-md);
  }
}