/* My availability: a DSP's usual hours, a day to a line, and their days off. */

.my-shifts__switch { margin-bottom: 1.25rem; }
/* "Bree is still planning Clubhouse's week of ...": a week a DSP can't see yet. */
.my-shifts__planning {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: #fffaf0;
  border: 1px solid #ecd9a8;
  color: var(--schedule-ink);
  font-size: 0.9375rem;
}

/* Monday [x]   09:00 to 17:00 — the times drop under the day on a phone. */
.availability-day {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--schedule-line);
}
.availability-day:last-of-type { border-bottom: 0; }
.availability-day__works {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  min-width: 9rem;
  font-weight: 600;
  cursor: pointer;
}
.availability-day__times {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--schedule-muted);
}
.availability-day__times .input { width: 8.5rem; min-height: 2.75rem; }
/* A day not ticked: its times wait, greyed. */
.availability-day:has(.availability-day__works input:not(:checked)) .availability-day__times { opacity: 0.45; }
.availability-day__error {
  flex-basis: 100%;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--schedule-red);
}

.availability-off__dates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
}

/* Short lines on a wide screen, so each day's times stay near its name. */
.availability-page { max-width: 44rem; }

/* Where a request for days off stands, beside its days. */
.availability-off__status {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: 0.0625rem;
}
.availability-off__status--pending { background: #fdf0d5; color: #8a4b08; }
.availability-off__status--approved { background: #e3f1e8; color: #23603d; }
.availability-off__status--declined { background: #f1f1f1; color: #4b5563; }

/* The ask-two-weeks-ahead policy, above the form. */
.availability-off__policy {
  margin: 0;
  padding: 0.625rem 0.75rem;
  border-left: 3px solid #e0b25c;
  border-radius: 0.375rem;
  background: #fffaf0;
  font-size: 0.875rem;
  color: #374151;
}

/* A waiting days-off request with shifts those days: each shift, and the
   button to ask the team to cover it. */
.availability-off__shifts {
  margin-top: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: #fffaf0;
  border: 1px solid #ecd9a8;
}
.availability-off__shift {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  margin-top: 0.375rem;
}
.availability-off__shift form { margin: 0; }
.availability-off__asked { font-size: 0.8125rem; color: #a16207; }

/* An approved day off the DSP no longer needs: a short form for a note. */
.availability-off__cancel { margin-top: 0.5rem; }
.availability-off__cancel > summary { padding-left: 0; padding-right: 0; }
.availability-off__cancel-form { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.availability-off__cancel-form label { display: grid; gap: 0.25rem; font-size: 0.875rem; }