/* A short note about a shift's miles, in the billing modal and on Admin
   Alerts: amber when the admin has something to do, grey when it only tells. Design: Pencil "Mileage on
   the right day", approved 2026-10-20. */
.mileage-note {
  --mileage-note-wash: #f1eee9;
  --mileage-note-title: #374151;
  --mileage-note-ink: #4b5563;

  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: var(--mileage-note-wash);
  color: var(--mileage-note-ink);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.mileage-note--amber {
  --mileage-note-wash: #fbefd6;
  --mileage-note-title: #7a4a0c;
  --mileage-note-ink: #7a4a0c;
}
.mileage-note__title { margin: 0 0 0.25rem; color: var(--mileage-note-title); font-weight: 700; }
.mileage-note__text { margin: 0; }
/* The shifts a note is about, each with its own Done button. */
.mileage-note__list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.mileage-note__who { font-weight: 600; color: #1f2937; }
.mileage-note__button {
  margin-top: 0.75rem;
  padding: 0.5rem 0.875rem;
  border: 0;
  border-radius: 0.5rem;
  background: #7a4a0c;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;

  &:hover { background: #643c09; }
}
.mileage-note__button--outline {
  border: 2px solid #7a4a0c;
  background: transparent;
  color: #7a4a0c;

  &:hover { background: color-mix(in srgb, #7a4a0c 10%, transparent); }
}
/* A note's two choices side by side, the first filled; on a phone they
   stack and run the full width. */
.mileage-note__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;

  & form { display: contents; }
  & .mileage-note__button { margin-top: 0; }

  @media (max-width: 640px) {
    flex-direction: column;

    & .mileage-note__button { width: 100%; }
  }
}
/* Inside an Admin Alerts row, the note sits flush. */
.admin-alert .mileage-note { margin: 0.5rem 0 0; }

/* A mileage flag on a shift: one flat yellow area — no box inside a box —
   with its choices stacked under the question, the first one filled. On a
   phone the choices run the full width. */
.mileage-flag {
  --mileage-flag-wash: #f2b840;
  --mileage-flag-ink: #5c3d06;

  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--mileage-flag-wash);
  color: var(--mileage-flag-ink);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.mileage-flag__title { margin: 0 0 0.25rem; font-size: 1.0625rem; font-weight: 700; }
.mileage-flag__title--next { margin-top: 0.875rem; }
.mileage-flag__text { margin: 0 0 0.25rem; }
.mileage-flag__question { margin: 0.625rem 0 0; font-weight: 700; }
.mileage-flag__choices {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;

  & form { display: contents; }

  @media (max-width: 640px) { align-items: stretch; }
}
/* Two choices side by side on a desktop; stacked on a phone. */
.mileage-flag__choices--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;

  @media (max-width: 640px) { flex-direction: column; }
}
.mileage-flag__choice {
  padding: 0.5rem 1rem;
  border: 2px solid var(--mileage-flag-ink);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--mileage-flag-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;

  &:hover { background: color-mix(in srgb, var(--mileage-flag-ink) 12%, transparent); }
}
.mileage-flag__choice--default {
  background: var(--mileage-flag-ink);
  color: #fff;

  &:hover { background: #4a3105; }
}

/* The client's miles for the day, the same on every shift that drove:
   each shift's miles, a rule, then the one total eXPRS takes. */
.day-miles {
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  background: #f5f2ee;
  color: #374151;
  font-size: 0.9375rem;
  line-height: 1.45;
}
.day-miles__label {
  margin: 0 0 0.375rem;
  color: #8a8f8c;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.day-miles__line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 0.375rem;

  & > :last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
}
/* Miles the admin enters in eXPRS by hand, outside the file's total. */
.day-miles__line--left-out { color: #8a8f8c; }
.day-miles__line--total {
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid #e2ddd6;
  color: #1f2a24;
  font-weight: 700;
}
.day-miles__hint { margin: 0.25rem 0 0; color: #8a8f8c; font-size: 0.8125rem; }