/* File: public/css/module-view.css */

/* ------------------------------------------------------------- */
/* USER MODULE PAGE — LEFT NAV (menu-style appearance)           */
/* ------------------------------------------------------------- */

/* Wrapper around the list */
.module-nav-block {
  margin-top: 1.5rem;
  padding: 0.5rem 0;
  background-color: transparent;
}

/* Reset UL styling */
.module-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------- */
/* Base nav item                                                  */
/* ------------------------------------------------------------- */
.module-nav-item {
  display: flex;
  align-items: center;
  padding: 0.4rem 0.4rem;
  margin: 0.15rem 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semilight);
  cursor: pointer;
  position: relative;
  color: var(--main-text-color);

  /* IMPORTANT:
     - No left bar by default (only active has it) */
  border-left: 2px solid transparent;

  transition:
    color var(--transition-fast) var(--easing-standard),
    border-color var(--transition-fast) var(--easing-standard),
    transform 80ms ease-out;
}

/* Text expands fully */
.module-nav-item > span {
  flex: 1;
  position: relative;
}

/* ------------------------------------------------------------- */
/* Underline hover effect — works for active AND non-active       */
/* ------------------------------------------------------------- */
.module-nav-item:not(.is-disabled) > span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px; /* thinner underline */
  background-color: var(--main-text-color);
  transition: width var(--transition-medium) ease;
}

.module-nav-item:not(.is-disabled):hover > span::after {
  width: 100%;
}

/* Ensure active also shows the underline (not only on hover) */
.module-nav-item.is-active > span::after {
  width: 100%;
}

/* Movement on hover */
.module-nav-item:not(.is-disabled):hover {
  transform: translateX(2px);
}

/* Disabled (validation locked) */
.module-nav-item.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ------------------------------------------------------------- */
/* Active item — visually selected                                */
/* ------------------------------------------------------------- */
.module-nav-item.is-active {
  border-left-color: var(--main-text-color); /* left bar ONLY for active */
}

/* More discreet bold; MUST apply even if validated (.is-complete) */
.module-nav-item.is-active > span {
  font-weight: var(--font-weight-medium); /* discreet, but visible */
}

/* ------------------------------------------------------------- */
/* Status styling (pending / complete)                            */
/* ------------------------------------------------------------- */
/* No visual changes for pending/complete besides the tick on complete */
.module-nav-item.is-pending {
  color: var(--main-text-color);
}

.module-nav-item.is-complete {
  color: var(--main-text-color);
  opacity: 0.95;
}

/* Right-side tick (✓) for validated */
.module-nav-item.is-complete::after {
  content: '✓';
  margin-left: 0.6rem;
  font-weight: var(--font-weight-semibold);
  opacity: 0.8;
}

/* Neutral = Introduction (no special left bar unless active) */
.module-nav-item.is-neutral {
  color: var(--main-text-color);
}

/* Validation locked initially: keep no left bar unless active */
.module-nav-item.module-validation.is-disabled {
  border-left-color: transparent;
}

/* ------------------------------------------------------------- */
/* Responsive adjustments                                         */
/* ------------------------------------------------------------- */
@media (max-width: 1049px) {
  .module-nav-item {
    padding: 1rem 0.2rem;
    font-size: var(--font-size-base);
  }
}

/* ------------------------------------------------------------- */
/* FINAL TEST UI (RIGHT SIDE)                                     */
/* ------------------------------------------------------------- */

/* Main wrapper (attempt UI) */
.module-final-test {
  /* keep it visually aligned with your existing content-right layout */
}

/* “Test in progress” intro text */
.module-final-test .muted {
  margin-top: 0.25rem;
}

/* Form spacing */
.module-final-test-form {
  margin-top: 1rem;
}

/* Each question “card” (renderer currently wraps each question in .space-before) */
.module-final-test-form .space-before {
  margin-top: 1.25rem; /* separation between cards */
  padding: 1rem 1rem;
  border-radius: 1rem;
  background: var(--ink-overlay-faint); /* grayish bubble */
  border: 1px solid var(--ink-overlay-faint);
}

/* Divider line inside the card: reduce harshness and spacing */
.module-final-test-form .space-before .content-divider-line {
  opacity: 0.5;
  margin: 0.25rem 0 0.9rem 0;
}

/* Question header line ("Question X") */
.module-final-test-form .space-before .quiz-question-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 0.6rem 0;
}

/* Question body */
.module-final-test-form .space-before .space-before-small {
  margin-top: 0.5rem;
}

/* Multiple choice hint */
.module-final-test-form .quiz-multiple-hint {
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}

/* ------------------------------------------------------------- */
/* Answers alignment (wrap-safe)                                  */
/* ------------------------------------------------------------- */

/* Make each answer row a 2-column layout:
   - fixed left column for input/bubble
   - flexible right column for text
   This prevents vertical centering when text wraps. */
.module-final-test-form .quiz-answer-option {
  display: flex;
  align-items: flex-start; /* key: keep control aligned with first line */
  gap: 0.7rem;
  margin-top: 0.7rem;
}

/* Native checkbox/radio input stays left and aligned to top */
.module-final-test-form .quiz-answer-option input[type="checkbox"],
.module-final-test-form .quiz-answer-option input[type="radio"] {
  flex: 0 0 auto;
  margin: 0.25rem 0 0 0;   /* aligns with the first line of text */
  transform: none;         /* override previous translateY */
}

/* Label behaves as the right column and wraps cleanly */
.module-final-test-form .quiz-answer-label {
  flex: 1 1 auto;
  margin: 0;
  line-height: 1.35;
  display: block;
}

/* Radio variant: your markup includes .answer-bubble inside the label.
   Turn the label into a flex row so bubble stays on the left of text. */
.module-final-test-form .quiz-answer-label {
  display: flex;
  align-items: flex-start; /* key: bubble pins to first line */
  gap: 0.7rem;
}

/* Bubble alignment */
.module-final-test-form .quiz-answer-label .answer-bubble {
  flex: 0 0 auto;
  margin-top: 0.25rem; /* tune if needed (0.2–0.3rem) */
}

/* Text column: allow wrapping without pushing bubble down */
.module-final-test-form .quiz-answer-label .answer-text {
  flex: 1 1 auto;
  min-width: 0; /* important for flex wrapping */
  display: block;
}

/* Submit block spacing */
.module-final-test-form .quiz-submit-wrapper {
  margin-top: 1.5rem;
}

/* Slightly soften result blocks too */
.module-final-test-result {
  /* keep your existing colors, just make spacing consistent */
}

.module-final-test-result .space-before {
  margin-top: 1rem;
}

/* Responsive: reduce padding on small screens */
@media (max-width: 1049px) {
  .module-final-test-form .space-before {
    padding: 0.9rem 0.85rem;
    border-radius: 0.9rem;
  }
}