/* ============================================================
   My Quizzes — Professor | Responsive Fix
   Injected via index.html <link> tag
   ============================================================ */

/* ── Quiz card inner row: allow wrapping on small screens ── */
.card .flex.items-start.justify-between.gap-4 {
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ── Left content block: always takes full available width ── */
.card .flex-1.min-w-0 {
  min-width: 0;
  width: 100%;
}

/* ── Badge + title row: wrap badges gracefully ── */
.card .flex.items-center.gap-2.flex-wrap.mb-1 {
  flex-wrap: wrap;
  gap: 0.375rem;
  row-gap: 0.375rem;
}

/* ── Stats row (questions / time / marks / code): wrap on mobile ── */
.card .flex.gap-4.text-xs.text-secondary {
  flex-wrap: wrap;
  gap: 0.5rem;
  row-gap: 0.375rem;
}

/* ── Action buttons container: stack below content on mobile ── */
.card .flex.items-center.gap-2.shrink-0.flex-wrap.justify-end {
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 0.375rem;
  row-gap: 0.375rem;
}

/* ── Ensure each button has a minimum tap target on mobile ── */
@media (max-width: 640px) {
  /* Card padding reduction */
  .card {
    padding: 0.875rem !important;
  }

  /* page-header: stack title + create button */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem;
  }

  /* Action buttons — make them slightly more compact */
  .card .flex.items-center.gap-2.shrink-0.flex-wrap.justify-end .btn,
  .card .flex.items-center.gap-2.shrink-0.flex-wrap.justify-end button {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
    min-height: 32px;
    min-width: 0;
    white-space: nowrap;
  }

  /* Stats row: slightly smaller on mobile */
  .card .flex.gap-4.text-xs.text-secondary {
    font-size: 0.7rem;
  }

  /* Badges: slightly smaller */
  .badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.45rem;
  }

  /* Quiz title: prevent very long titles from breaking layout */
  .card .flex-1.min-w-0 h3 {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ── Medium screens: side-by-side but allow buttons to wrap ── */
@media (min-width: 641px) and (max-width: 900px) {
  .card .flex.items-center.gap-2.shrink-0.flex-wrap.justify-end {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .card .flex.items-start.justify-between.gap-4 {
    flex-direction: column;
  }
}

/* ── Large screens: restore original side-by-side layout ── */
@media (min-width: 901px) {
  .card .flex.items-start.justify-between.gap-4 {
    flex-wrap: nowrap;
  }

  .card .flex-1.min-w-0 {
    width: auto;
  }

  .card .flex.items-center.gap-2.shrink-0.flex-wrap.justify-end {
    width: auto;
    justify-content: flex-end;
  }
}