@use "../../../styles/abstracts/variables" as *;

.attend__item {
  display: grid;
  grid-template-columns: 1.7fr 1.7fr 2.6fr 1fr 1fr;
  align-items: center;
  padding: 0rem 1rem;
  border-bottom: 1px solid $col-border-lining;
  position: relative;
  min-width: 750px; // ✅ keeps consistent width with header
  white-space: nowrap; // ✅ prevent text wrapping (can scroll instead)
  transition: background 0.2s ease;
  line-height: 4;

  &:hover {
    background: rgba(0, 0, 0, 0.02);
  }

  span {
    font-size: 0.88rem;
    color: $col-dark-text;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &--actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
  }

  @media only screen and (max-width: 600px) {
    font-size: 0.8rem;
    grid-template-columns: 2fr 1.7fr 2.6fr 1fr 1fr;
    padding: 0.5rem;
    line-height: 3;
  }
}