/* My clients (DSP): the shift the DSP is on, the notes they owe, and one row
   per client — the home page's hours-left rows, roomier, with when the DSP
   next sees each client and the Daily Note and View buttons under the hours.
   On a computer the name, service and next shift sit in fixed columns that
   line up down the list; a phone stacks them beside the avatar. */
.dsp-clients__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.dsp-clients__count {
  font-size: 0.875rem;
  color: var(--hours-soft-ink);
}

/* On shift now: the home page's cream card, tinted the app's green. */
.dsp-clients .on-shift {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  background: color-mix(in oklab, var(--color-primary) 8%, #fff);
  border: 1px solid color-mix(in oklab, var(--color-primary) 25%, transparent);
}
.dsp-clients .on-shift .hours-left__avatar {
  align-self: center;
  width: 3.5rem;
  height: 3.5rem;
  border-width: 3px;
  font-size: 1.25rem;

  @media (min-width: 768px) {
    width: 4.5rem;
    height: 4.5rem;
  }
}
.on-shift__who {
  flex: 1;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.on-shift__overline {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.on-shift__name {
  font-size: 1.125rem;
  font-weight: 700;
}
.on-shift__since,
.on-shift__hours {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--hours-soft-ink);
}
.on-shift__hours {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;

  strong { font-weight: 400; }
}
.on-shift__button {
  width: 100%;

  @media (min-width: 768px) { width: auto; }
}

.dsp-clients__banner { margin-bottom: 1.25rem; }

/* The rows: a phone stacks name and hours, then when, then the service, then
   the buttons beside the avatar; a computer lines name, service and next
   shift up in their own columns with the hours at the end, and the buttons
   under the hours on a second line. */
.dsp-clients .hours-left__client {
  /* A phone: photo and name on the top line, the hours and the next shift
     under them, the service, then the buttons across the whole card. */
  grid-template-columns: 3rem 1fr;
  grid-template-areas:
    "avatar name"
    "avatar available"
    "when when"
    "service service"
    "actions actions";
  column-gap: 0.75rem;
  row-gap: 0.5rem;
  padding: 1rem 1.125rem;

  @media (min-width: 768px) {
    /* A computer: name, service and next shift each in their own column,
       centred on the row; the hours and the buttons stack at the end. */
    grid-template-columns: 3.5rem 13rem 10rem 1fr auto;
    grid-template-areas:
      "avatar name service when available"
      "avatar name service when actions";
    column-gap: 1rem;
    row-gap: 0.5rem;
    align-items: center;

    .hours-left__name, .hours-left__service, .dsp-clients__when { align-self: center; }
    .hours-left__available { align-self: end; }
    .dsp-clients__actions { align-self: start; }
  }
}
.dsp-clients .hours-left__client .hours-left__avatar {
  align-self: start;
  width: 3rem;
  height: 3rem;
  border-width: 3px;
  font-size: 1rem;

  @media (min-width: 768px) {
    align-self: center;
    width: 3.5rem;
    height: 3.5rem;
  }
}
.dsp-clients .hours-left__client .hours-left__available {
  justify-self: start;
  font-size: 1rem;

  @media (min-width: 768px) {
    justify-self: end;
    font-size: 1.25rem;
  }
}
.dsp-clients__when {
  grid-area: when;
  justify-self: start;
  font-size: 0.875rem;
  color: var(--hours-soft-ink);
}
.dsp-clients__when--on-shift {
  color: var(--color-primary);
  font-weight: 600;
}
.dsp-clients__actions {
  grid-area: actions;
  display: flex;
  gap: 0.5rem;

  .btn { flex: 1; }

  @media (min-width: 768px) {
    justify-content: flex-end;

    .btn { flex: none; }
  }
}