/* Hours left this week (card #426, design_card426_approved.pen, v4): one card
   for the week, in three parts with the space between them, not inside them —
   the hours, the hours left per client, and This Week's Sessions. */
.hours-left {
  --hours-ink: #1f313b;
  --hours-soft-ink: #4c5a62;
  --hours-muted: #79848a;
  --hours-green: #1b6b43;
  --hours-bar: #3e9a64;
  --hours-line: #e7e1d6;
  --hours-tint: #f5f1ea;

  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding: 1.25rem 1.5rem 1.5rem;
  border-radius: 0.75rem;
  background: #fefbf7;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
  color: var(--hours-ink);

  @media (min-width: 768px) {
    gap: 3rem;
    padding: 1.5rem 2.25rem 2.25rem;
  }
}
.hours-left__part { display: flex; flex-direction: column; gap: 0.75rem; }
.hours-left__head {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  @media (min-width: 768px) {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.hours-left__title-block { display: flex; flex-direction: column; gap: 0.375rem; }
.hours-left__title {
  font-size: 1rem;
  font-weight: 600;

  @media (min-width: 768px) { font-size: 1.25rem; }
}
.hours-left__range {
  font-size: 0.8125rem;
  color: var(--hours-soft-ink);

  @media (min-width: 768px) { font-size: 0.875rem; }
}
.hours-left__figure {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  color: var(--hours-soft-ink);
  font-size: 0.8125rem;

  strong { font-size: 1.25rem; font-weight: 700; line-height: 1; color: var(--hours-green); }

  @media (min-width: 768px) {
    font-size: 0.9375rem;

    strong { font-size: 2.5rem; }
  }
}
.hours-left__track {
  height: 0.75rem;
  border-radius: 0.375rem;
  background: linear-gradient(var(--hours-bar), var(--hours-bar)) no-repeat 0 0 / var(--worked) 100%, var(--hours-line);
}

/* Worked and driven, this week and this month: two lines on a phone, one row
   on a computer with the hours to the left and the miles to the right. */
.hours-left__stats {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  background: var(--hours-tint);

  @media (min-width: 768px) {
    flex-direction: row;
    justify-content: space-between;
    padding: 0.75rem 1rem;
  }
}
.hours-left__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3125rem;
  font-size: 0.8125rem;
  color: var(--hours-soft-ink);

  svg { width: 1rem; height: 1rem; flex-shrink: 0; }
  strong { font-weight: 700; color: var(--hours-ink); }

  @media (min-width: 768px) {
    gap: 0.5rem;
    font-size: 0.9375rem;

    svg { width: 1.125rem; height: 1.125rem; }
  }
}
.hours-left__subhead {
  font-size: 0.875rem;
  font-weight: 600;

  @media (min-width: 768px) { font-size: 0.9375rem; }
}
.hours-left__empty {
  font-size: 1rem;
  color: var(--hours-soft-ink);

  @media (min-width: 768px) { font-size: 0.875rem; }
}
.hours-left__clients { display: flex; flex-direction: column; gap: 0.5rem; }

/* A phone stacks name and service beside the avatar with the hours on
   the name's line; a computer puts the service beside the name and the hours
   at the end of the row. The hours are the client's own authorized hours
   left. */
.hours-left__client {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  grid-template-areas:
    "avatar name available"
    "avatar service service";
  column-gap: 0.625rem;
  row-gap: 0.25rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.625rem;
  background: var(--hours-tint);

  @media (min-width: 768px) {
    grid-template-columns: 2.5rem auto 1fr auto;
    grid-template-areas:
      "avatar name service available";
    column-gap: 0.875rem;
    row-gap: 0.25rem;
    padding: 1.125rem;
  }
}
.hours-left__avatar {
  grid-area: avatar;
  align-self: start;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  border: 2px solid var(--client-color);
  border-radius: 9999px;
  background: #e8e2d8;
  color: #33474a;
  font-size: 0.75rem;
  font-weight: 700;

  img { width: 100%; height: 100%; object-fit: cover; }

  @media (min-width: 768px) {
    align-self: center;
    width: 2.5rem;
    height: 2.5rem;
    border-width: 3px;
    font-size: 0.875rem;
  }
}
.hours-left__name {
  grid-area: name;
  font-size: 0.875rem;
  font-weight: 600;

  @media (min-width: 768px) { font-size: 1rem; }
}
.hours-left__service { grid-area: service; justify-self: start; }
.hours-left__available {
  grid-area: available;
  justify-self: end;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--hours-green);

  @media (min-width: 768px) { font-size: 1.25rem; }
}

/* This Week's Sessions: thin lines between rows and the first column on the
   card's edge, under the heading. A phone gets a small card per session. */
.week-sessions {
  th { font-size: 0.8125rem; font-weight: 500; color: var(--hours-muted); }
  td { font-size: 0.875rem; }
  :is(th, td):first-child { padding-left: 0; }
}
.week-sessions__client, .week-sessions__hours, .week-sessions__today { font-weight: 600; }
.week-sessions-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  @media (min-width: 768px) { display: none; }
}
.week-session-card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: #f1ece4;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--hours-soft-ink);
}
.week-session-card__top {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--hours-ink);
}
.week-session-card__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }

/* On a phone the card's pills and badges are a size smaller too. */
.week-session-card, .hours-left__client {
  @media (max-width: 767px) {
    :is(.session-type, .badge) { padding: 0.0625rem 0.5rem; font-size: 0.6875rem; }
    .session-type svg { width: 0.75rem; height: 0.75rem; }
  }
}