/* Reservation stages — one colour code for the whole product.
     pending    amber   waiting for the office          step 1
     review     orange  needs a staff decision          step 1
     confirmed  blue    booked                          step 2
     active     green   the car is out                  step 3
     completed  slate   returned and closed             step 4
     cancelled  red     ended early
   Every status element only declares which stage it is (--stage / --stage-soft / --stage-step); pills, card
   accents, the status dropdown, the slim stage bar and the stage tracker all read those three values. */
:root {
  --stage-pending: #9c690e;   --stage-pending-soft: #fff4d6;
  --stage-review: #b4540a;    --stage-review-soft: #ffedd9;
  --stage-confirmed: #0057ff; --stage-confirmed-soft: #dce9ff;
  --stage-active: #0a7a45;    --stage-active-soft: #dcf5e7;
  --stage-completed: #5e686b; --stage-completed-soft: #e9edf1;
  --stage-cancelled: #b22d3b; --stage-cancelled-soft: #fdecee;
}
:is([data-status="pending"], [data-stage="pending"], .status-pending, .customer-reservation-status.pending, .status-badge.pending, .status-maintenance) { --stage: var(--stage-pending); --stage-soft: var(--stage-pending-soft); --stage-step: 1; }
:is([data-status="needs_review"], [data-status="needs-review"], [data-stage="review"], .customer-reservation-status.needs-review) { --stage: var(--stage-review); --stage-soft: var(--stage-review-soft); --stage-step: 1; }
:is([data-status="confirmed"], [data-stage="confirmed"], .status-confirmed, .customer-reservation-status.confirmed, .status-rented) { --stage: var(--stage-confirmed); --stage-soft: var(--stage-confirmed-soft); --stage-step: 2; }
:is([data-status="active"], [data-stage="active"], .status-active, .customer-reservation-status.active, .status-available) { --stage: var(--stage-active); --stage-soft: var(--stage-active-soft); --stage-step: 3; }
:is([data-status="completed"], [data-stage="completed"], .status-completed, .customer-reservation-status.completed, .status-out_of_service, .status-inactive) { --stage: var(--stage-completed); --stage-soft: var(--stage-completed-soft); --stage-step: 4; }
:is([data-status="cancelled"], [data-stage="cancelled"], .status-cancelled, .customer-reservation-status.cancelled, .status-unavailable) { --stage: var(--stage-cancelled); --stage-soft: var(--stage-cancelled-soft); --stage-step: 4; }

/* Stage pill: soft tint, stage-coloured text, and a leading dot. The dot of a live booking (active) breathes. */
:root :is(.status-badge, .status-pill, .customer-reservation-status) { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 5px 10px; border-radius: 999px;
  background: var(--stage-soft, var(--stage-completed-soft)); color: var(--stage, var(--stage-completed)); font-weight: 700; text-transform: none; letter-spacing: normal; white-space: nowrap; }
:root .status-pill { padding: 7px 12px; font-size: 15px; }
:root :is(.status-badge, .status-pill, .customer-reservation-status)::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
:root :is(.status-active, [data-status="active"].status-pill, .customer-reservation-status.active)::before { animation: stage-live 1.8s ease-in-out infinite; }
@keyframes stage-live { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 0%, transparent); } }

/* Card accents follow the stage. */
:root .reservation-list-card[data-status] .reservation-card-title::before,
:root .customer-reservation-card[data-status] .customer-reservation-title::before { background: var(--stage, var(--blue)); }
:root .confirmation-title:has([data-status]) > div::before { background: var(--stage-colour, var(--blue)); }
:root .confirmation-title:has([data-status="pending"]) { --stage-colour: var(--stage-pending); } :root .confirmation-title:has([data-status="needs_review"]) { --stage-colour: var(--stage-review); }
:root .confirmation-title:has([data-status="confirmed"]) { --stage-colour: var(--stage-confirmed); } :root .confirmation-title:has([data-status="active"]) { --stage-colour: var(--stage-active); }
:root .confirmation-title:has([data-status="completed"]) { --stage-colour: var(--stage-completed); } :root .confirmation-title:has([data-status="cancelled"]) { --stage-colour: var(--stage-cancelled); }

/* Slim stage bar along the bottom of a booking card: four segments, filled up to the booking's stage. */
:is(.reservation-list-card, .customer-reservation-card)[data-status]::after { content: ""; grid-column: 1 / -1; height: 4px; margin: 10px 14px 12px; border-radius: 4px;
  background: linear-gradient(to right, var(--stage) calc(var(--stage-step, 0) * 25%), var(--line) 0);
  -webkit-mask: repeating-linear-gradient(to right, #000 0 calc(25% - 4px), #0000 0 25%); mask: repeating-linear-gradient(to right, #000 0 calc(25% - 4px), #0000 0 25%); }
[dir="rtl"] :is(.reservation-list-card, .customer-reservation-card)[data-status]::after { background: linear-gradient(to left, var(--stage) calc(var(--stage-step, 0) * 25%), var(--line) 0); }
.customer-reservation-card[data-status]::after { margin: 10px 0 2px; }

/* The admin's status dropdown wears the colour of the stage it currently holds. */
:root .reservation-card-total .inline-select { border-color: transparent; font-weight: 700; transition: background-color 200ms ease, color 200ms ease; }
:root .inline-select:has(option[value="pending"]:checked) { background-color: var(--stage-pending-soft); color: var(--stage-pending); }
:root .inline-select:has(option[value="confirmed"]:checked) { background-color: var(--stage-confirmed-soft); color: var(--stage-confirmed); }
:root .inline-select:has(option[value="active"]:checked) { background-color: var(--stage-active-soft); color: var(--stage-active); }
:root .inline-select:has(option[value="completed"]:checked) { background-color: var(--stage-completed-soft); color: var(--stage-completed); }
:root .inline-select:has(option[value="cancelled"]:checked) { background-color: var(--stage-cancelled-soft); color: var(--stage-cancelled); }
:root .inline-select option { background: var(--white); color: var(--ink); }

/* Stage tracker (reservation page): the four stages in order; done ones are filled, the current one glows. */
.stage-tracker { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0 0 18px; padding: 16px 12px 12px; list-style: none; border-radius: 14px; background: var(--white); animation: panel-in 420ms var(--card-ease, ease) backwards; }
.stage-tracker li { position: relative; display: grid; justify-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 13px; font-weight: 700; text-align: center; }
.stage-tracker li::before { content: ""; position: absolute; top: 9px; inset-inline-start: calc(-50% + 14px); width: calc(100% - 28px); height: 3px; border-radius: 3px; background: var(--line); }
.stage-tracker li:first-child::before { display: none; }
.stage-tracker i { position: relative; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line); background: var(--white); transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease; }
.stage-tracker span { overflow-wrap: anywhere; line-height: 1.4; }
.stage-tracker li[data-state="done"] { color: var(--ink); }
.stage-tracker li[data-state="done"] i { border-color: var(--stage); background: var(--stage); }
.stage-tracker li[data-state="done"] i::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.stage-tracker li:is([data-state="done"], [data-state="current"])::before { background: var(--stage); }
.stage-tracker li[data-state="current"] { color: var(--stage); }
.stage-tracker li[data-state="current"] i { border-color: var(--stage); background: var(--stage-soft); box-shadow: 0 0 0 5px color-mix(in srgb, var(--stage) 18%, transparent); animation: stage-current 2.2s ease-in-out infinite; }
.stage-tracker li[data-state="current"] i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--stage); }
@keyframes stage-current { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage) 22%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--stage) 6%, transparent); } }
.stage-tracker[data-stage="cancelled"] li { color: var(--muted); }
.stage-tracker[data-stage="cancelled"] li i { border-color: var(--line); background: var(--white); box-shadow: none; animation: none; }
.stage-tracker[data-stage="cancelled"] li i::after, .stage-tracker[data-stage="cancelled"] li::before { background: var(--line); border-color: var(--line); }
.stage-tracker-note { grid-column: 1 / -1; justify-self: center; margin-top: 10px; }
/* Six phases will not fit across a phone, so they wrap to two rows of three; the connector line is dropped
   at the start of each row so it never appears to join the end of one row to the start of the next. */
@media (max-width: 600px) {
  .stage-tracker { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; padding-inline: 4px; }
  .stage-tracker li { font-size: 11px; }
  .stage-tracker li:nth-child(3n + 1)::before { display: none; }
}
@media print { .stage-tracker { display: none; } :is(.reservation-list-card, .customer-reservation-card)[data-status]::after { display: none; } }