/* Project styles on top of Bootstrap. */

.auth-box {
  max-width: 24rem;
}

.form-page {
  max-width: 36rem;
}

.help-page {
  max-width: 48rem;
}

/* Dashboard */
.scoreboard th.today {
  background-color: var(--bs-warning-bg-subtle);
}

.chart-box {
  position: relative;
  height: 18rem;
}

/* Mobile and touch (phase 8) */

/* Small buttons are fine with a mouse, too small for a finger. */
@media (pointer: coarse) {
  .btn-sm {
    padding: 0.375rem 0.75rem;
  }
}

/* Scoreboard: the participant's name stays visible while the days scroll sideways. */
.scoreboard th:nth-child(2),
.scoreboard td:nth-child(2) {
  position: sticky;
  left: 0;
  z-index: 1;
}

@media (max-width: 575.98px) {
  .chart-box {
    height: 14rem;
  }

  /* Swimming report: note and button use the full width of the card. */
  .report-form {
    width: 100%;
  }

  .report-form input {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* School marks form: one block per mark on narrow screens instead of a wide table. */
.formset-label {
  display: none;
}

@media (max-width: 767.98px) {
  .formset-table thead {
    display: none;
  }

  .formset-table tr {
    display: block;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
  }

  .formset-table td {
    display: block;
    border: 0;
    padding: 0.25rem 0;
  }

  .formset-label {
    display: block;
    font-size: 0.875em;
    color: var(--bs-secondary-color);
  }
}