/* components.css — component-level rules that repeat across pages.
   Card layout, spacing, and color are still Tailwind utility classes in the
   markup itself (that's how Tailwind is meant to be used); this file is for
   the handful of things utilities can't express cleanly. */

/* Bottom-sheet style modals (payment / timetable / assignment / rep-auth) */
#paymentModal, #repAuthModal, #timetableModal, #assignmentModal {
  transition: opacity 0.15s ease;
}

/* Avatar fallback circles used in the reps directory when there's no photo */
.avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
}

/* Executive/rep photo — keeps faces from being stretched or cropped oddly */
.exec-photo {
  object-fit: cover;
  object-position: center top;
}