/* The DSP's My shifts page: the title with the window's hours and miles,
   the dates and search (the billing list's controls, reused), the shifts
   waiting for a note, then the shifts by week — rows on a computer, cards
   on a phone — and the pages under them. The frame keeps the height it had
   while it redraws, so the screen stays still (hold-still). */
.dsp-shifts {
  display: block;
  min-height: var(--held-height, auto);
  --shifts-ink: #1f2937;
  --shifts-soft-ink: #333;
  --shifts-muted: #555;
  --shifts-faint: #777;
  --shifts-line: #f0ebe2;
  --shifts-edge: #ece8e1;
  --shifts-amber: #d97706;
  --shifts-amber-ink: #b45309;
  --shifts-amber-wash: #fff8eb;
  --billing-muted: color-mix(in oklab, var(--color-base-content) 55%, transparent);
  --billing-faint: color-mix(in oklab, var(--color-base-content) 30%, transparent);
  --billing-line: var(--color-base-300);
  --billing-soft-green: color-mix(in oklab, var(--color-primary) 12%, var(--color-base-100));
}

/* My shifts                          November · 23 hours worked · 28 mi */
.dsp-shifts__head {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin-bottom: 1rem;

  @media (min-width: 768px) {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }
}

.dsp-shifts__title {
  font-size: 1.625rem;
  font-weight: 700;
  color: #334155;

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

.dsp-shifts__summary {
  font-size: 0.875rem;
  color: var(--shifts-faint);

  & b { color: var(--shifts-ink); }
}

/* This week · Last week · This month · Last month · [Nov 1] to [Nov 30] · search */
.shifts-toolbar { margin-bottom: 2rem; }

.shifts-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
}

.shifts-toolbar .billing-search { flex: 0 1 22rem; }

.shifts-toolbar .billing-picked { padding: 0.75rem 0 0; }

/* NEEDS YOU · 7 */
.shifts-needs { margin-bottom: 2rem; }

.shifts-needs__title {
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--shifts-amber-ink);
}

.shifts-needs__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.shifts-needs__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid color-mix(in srgb, var(--shifts-amber) 25%, transparent);
  border-radius: 0.75rem;
  background: var(--shifts-amber-wash);

  @media (min-width: 768px) { flex-wrap: nowrap; }
}

.shifts-needs__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: var(--shifts-amber-ink);
}

.shifts-needs__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;

  & strong { font-size: 0.9rem; font-weight: 700; color: var(--shifts-ink); }
  & span { font-size: 0.8125rem; color: var(--shifts-muted); }
}

.shifts-needs__button {
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: var(--shifts-amber);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  color: #fff;

  &:hover { background: var(--shifts-amber-ink); }

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

/* Show 4 more ⌄ — the rest of the cards unfold under it. */
.shifts-needs__more {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  & > summary {
    display: flex;
    justify-content: center;
    margin-top: 0.875rem;
    padding: 0.375rem 0.625rem;
    list-style: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;

    &::-webkit-details-marker { display: none; }
  }

  & .shifts-needs__hide { display: none; }
  &[open] .shifts-needs__show { display: none; }
  &[open] .shifts-needs__hide { display: inline; }
}

/* THIS WEEK · NOV 9 – 15                  5 shifts · 19 hours worked · 15.6 mi driven */
.shifts-week { margin-bottom: 2rem; }

.shifts-week__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Whole-pixel line heights, so turning a page moves the footer by whole
   pixels and hold-still can put it back exactly. */
.shifts-week__name {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #64748b;

  @media (max-width: 767px) { font-size: 0.75rem; }
}

.shifts-week__total {
  font-size: 0.8125rem;
  line-height: 1.25rem;
  white-space: nowrap;
  color: #888;

  @media (max-width: 767px) { font-size: 0.75rem; }
}

.shifts-week__total--narrow { display: none; }

@media (max-width: 767px) {
  .shifts-week__total--wide { display: none; }
  .shifts-week__total--narrow { display: inline; }
}

.shifts-week__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--shifts-edge);
  border-radius: 0.875rem;
  background: #fff;
}

/* Sun, Nov 8 · (JM) John Mercer · Attendant Care · 9:00 AM → 1:00 PM · 4:00 hrs · 9.6 mi · Completed › */
.shifts-row {
  display: grid;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border-top: 1px solid var(--shifts-line);
  color: var(--shifts-soft-ink);
  cursor: pointer;

  &:first-child { border-top: 0; }
  &:hover { background: #fcfaf6; }

  @media (min-width: 768px) {
    grid-template-columns: 7.5rem 1.6fr 1fr 1.4fr 3.75rem 4.375rem 9.375rem 1.125rem;
  }
}

.shifts-row__date { font-size: 0.875rem; font-weight: 600; }

.shifts-row__who {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.shifts-row__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--shifts-ink);
}

.shifts-row__time { font-size: 0.875rem; color: var(--shifts-muted); }

.shifts-row__hours {
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;

  & small { font-size: 0.8125rem; font-weight: 500; color: var(--shifts-faint); }

  @media (min-width: 768px) { text-align: right; }
}

.shifts-row__miles {
  font-size: 0.875rem;
  color: var(--shifts-muted);

  & small { font-size: 0.8125rem; color: var(--shifts-faint); }

  @media (min-width: 768px) { text-align: right; }
}

.shifts-row__status {
  @media (min-width: 768px) { text-align: right; }
}

.shifts-row__chevron {
  font-size: 1.125rem;
  line-height: 1;
  color: #bbb;
}

.shifts-row__narrow { display: none; }

/* On a phone each shift is a card: the avatar beside the name, date and
   times; then the service, hours, miles and status each on a line of their
   own, with the chevron at the right. */
@media (max-width: 767px) {
  .shifts-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "avatar name chevron"
      "avatar date chevron"
      "avatar time chevron"
      "type type type"
      "hours hours hours"
      "miles miles miles"
      "status status status";
    column-gap: 0.625rem;
    row-gap: 0.125rem;
    padding: 0.875rem;
  }

  .shifts-row__who { display: contents; }
  .shifts-row .hours-left__avatar { grid-area: avatar; align-self: start; }
  .shifts-row__name { grid-area: name; }
  .shifts-row__date { grid-area: date; font-weight: 400; color: var(--shifts-muted); }
  .shifts-row__time { grid-area: time; }
  .shifts-row__type { grid-area: type; margin-top: 0.5rem; }
  .shifts-row__hours { grid-area: hours; margin-top: 0.25rem; }
  .shifts-row__miles { grid-area: miles; margin-top: 0.25rem; }
  .shifts-row__status { grid-area: status; margin-top: 0.25rem; }
  .shifts-row__chevron { grid-area: chevron; align-self: center; }
  .shifts-row__miles b { color: var(--shifts-soft-ink); }
  .shifts-row__wide { display: none; }
  .shifts-row__narrow { display: inline; }
}

/* 1–15 of 46 shifts  15 · 50 · 100 · All          ‹ [1] 4 › */
.dsp-shifts__footer { padding: 0.25rem 0; }

@media (max-width: 640px) {
  .dsp-shifts__noun { display: none; }
  .dsp-shifts__footer { font-size: 0.8125rem; gap: 0.25rem; flex-wrap: nowrap; }
  .dsp-shifts__footer .billing-footer__left { gap: 0.375rem; }
  .dsp-shifts__footer .billing-footer__link { padding: 0.25rem 0.3rem; }
}

.dsp-shifts__empty {
  font-size: 0.95rem;
  color: var(--shifts-faint);
}

/* On a phone the date buttons scroll sideways on one line, the date boxes
   take a line of their own and the search comes last, full width. */
@media (max-width: 640px) {
  .shifts-toolbar .billing-presets {
    width: calc(100% + 1rem);
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
    overflow-x: auto;
  }

  .shifts-toolbar .billing-search {
    order: 0;
    flex: 1 1 100%;
    margin-left: 0;
  }
}