/* Frontend UI tweaks for BePM Quiz Enhancer */

/* Review page: action row (retry buttons on left, nav on right) */
.bepm-qe-review-actions-row {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: nowrap;
}

/* Safety override: ensure no external CSS flips the order */
.bepm-qe-controls-top-row {
  flex-direction: column !important;
}

.bepm-qe-review-actions-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.bepm-qe-review-actions-row .bepm-qe-retry-slot {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

.bepm-qe-review-actions-bottom {
  display: flex;
  justify-content: flex-end;
}

/* Prevent external styles from adding large left margins */
.bepm-qe-review-nav-toggle {
  margin-left: 0 !important;
}

/* Ensure retry wraps don't introduce vertical misalignment */
.bepm-qe-retry-wrap {
  align-items: center;
}

/* Review page: navigation panel grid */
.bepm-qe-review-nav-grid {
  width: 100%;
}

.bepm-qe-review-nav-qbtn {
  -webkit-tap-highlight-color: transparent;
}

/* Mobile: stack the 3 controls vertically + comfy spacing */
@media (max-width: 768px) {
  .bepm-qe-review-actions-row {
    gap: 16px;
  }

  .bepm-qe-review-actions-top {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .bepm-qe-review-actions-row .bepm-qe-retry-slot {
    flex-direction: column;
    align-items: stretch;
    gap: 16px; /* gap entre Rehacer falladas y Rehacer Marcadas */
  }

  /* If present, keep scores between retry + nav */
  .bepm-qe-review-actions-row .bepm-qe-retry-wrap {
    justify-content: space-between;
    gap: 10px;
  }

  /* Make the exam navigation dropdown render 10 items per row without overflow */
  .bepm-qe-review-nav-grid {
    display: grid !important;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
  }

  .bepm-qe-review-nav-qbtn {
    min-width: 0 !important;
  }
}