/* HMS-339 — Booking overrides page (.booking-overrides, .status-chip, .cancel-dialog) */

.booking-overrides {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
}

.booking-overrides__breadcrumb {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.booking-overrides__breadcrumb i {
  font-size: var(--wa-font-size-xs);
  margin-inline: var(--wa-space-2xs);
}

.booking-overrides__title {
  margin: 0;
  font-size: var(--wa-font-size-xl);
  font-weight: var(--wa-font-weight-bold);
}

.booking-overrides__event,
.booking-overrides__subtitle {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.booking-overrides__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-raised);
}

.booking-overrides__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wa-font-size-s);
}

.booking-overrides__table th {
  text-align: left;
  color: var(--wa-color-text-quiet);
  font-weight: var(--wa-font-weight-semibold);
  padding: var(--wa-space-xs) var(--wa-space-s);
  border-bottom: 1px solid var(--wa-color-surface-border);
  white-space: nowrap;
}

.booking-overrides__table td {
  padding: var(--wa-space-xs) var(--wa-space-s);
  border-bottom: 1px solid var(--wa-color-surface-border);
  white-space: nowrap;
}

.booking-overrides__table tbody tr:last-child td {
  border-bottom: none;
}

.booking-overrides__table tbody tr:hover {
  background: var(--wa-color-surface-default);
}

/* When the table overflows its wrap at narrow widths the Actions column pins
   to the right edge instead of scrolling out of view — same convention as
   block_list.css. */
.booking-overrides__table th:last-child,
.booking-overrides__table td:last-child {
  position: sticky;
  right: 0;
  background: var(--wa-color-surface-raised);
  box-shadow: -1px 0 0 var(--wa-color-surface-border);
}

.booking-overrides__guest-email {
  display: block;
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-xs);
}

.booking-overrides__empty {
  padding: var(--wa-space-l);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-quiet);
  text-align: center;
}

.booking-overrides__card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--wa-space-m);
  padding: var(--wa-space-m);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-raised);
}

.booking-overrides__card > :first-child {
  min-width: 0;
}

.booking-overrides__card-title {
  font-weight: var(--wa-font-weight-semibold);
}

.booking-overrides__card-meta {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.booking-overrides__card-status {
  flex-shrink: 0;
}

.booking-overrides__card-details p {
  margin: 0;
}

.booking-overrides__card-details p + p {
  margin-top: var(--wa-space-2xs);
}

.booking-overrides__event-name {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.booking-overrides__label {
  display: block;
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-text-quiet);
}

.booking-overrides__hint {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
}

.booking-overrides__search {
  display: flex;
  align-items: end;
  gap: var(--wa-space-s);
  max-width: 28rem;
}

.booking-overrides__search wa-input {
  width: 100%;
}

.booking-overrides__search wa-input::part(label) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.booking-overrides__dialogs {
  display: contents;
}

.booking-overrides__manual-link {
  margin-top: var(--wa-space-m);
  font-size: var(--wa-font-size-s);
}

.booking-overrides__config {
  padding: var(--wa-space-l);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-raised);
}

.booking-overrides__config h2,
.booking-overrides__config h3 {
  margin-top: 0;
}

.booking-overrides__tabs {
  display: flex;
  gap: var(--wa-space-m);
  margin-bottom: var(--wa-space-m);
  border-bottom: 1px solid var(--wa-color-surface-border);
}

.booking-overrides__tab {
  padding: var(--wa-space-2xs) 0;
  margin-bottom: -1px;
  color: var(--wa-color-text-quiet);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.booking-overrides__tab--active {
  color: var(--wa-color-brand);
  font-weight: var(--wa-font-weight-semibold);
  border-bottom-color: var(--wa-color-brand);
}

.booking-overrides__form {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-m);
}

.booking-overrides__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wa-space-m);
}

.booking-overrides__fields > :only-child {
  grid-column: 1 / -1;
}

.booking-overrides__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wa-space-s);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--wa-space-2xs);
  padding: var(--wa-space-2xs) var(--wa-space-xs);
  border-radius: var(--wa-border-radius-l);
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-semibold);
}

.status-chip--success {
  background: var(--wa-color-success-90);
  color: var(--wa-color-success);
}

.status-chip--warning {
  background: var(--wa-color-warning-90);
  color: var(--wa-color-warning-on-quiet);
}

.status-chip--danger {
  background: var(--wa-color-danger-90);
  color: var(--wa-color-danger);
}

.status-chip--info {
  background: var(--wa-color-brand-90);
  color: var(--wa-color-brand);
}

.status-chip--neutral {
  background: var(--wa-color-neutral-90);
  color: var(--wa-color-neutral);
}

.cancel-dialog {
  --width: 34rem;
}

.cancel-dialog__rows {
  display: flex;
  flex-direction: column;
}

.cancel-dialog__rows > .cancel-dialog__row,
.cancel-dialog__refund-rows > .cancel-dialog__row {
  padding-block: var(--wa-space-2xs);
  border-bottom: 1px solid var(--wa-color-surface-border);
}

.cancel-dialog__rows > .cancel-dialog__row:last-child,
.cancel-dialog__refund-rows > .cancel-dialog__row:last-child {
  border-bottom: none;
}

.cancel-dialog__refund-rows {
  display: flex;
  flex-direction: column;
}

.cancel-dialog__policy-heading {
  margin: 0 0 var(--wa-space-xs);
  font-size: var(--wa-font-size-m);
  font-weight: var(--wa-font-weight-semibold);
}

.cancel-dialog__row {
  display: flex;
  justify-content: space-between;
  gap: var(--wa-space-m);
}

.cancel-dialog__label {
  color: var(--wa-color-text-quiet);
}

.cancel-dialog__value--green {
  color: var(--wa-color-success);
  font-weight: var(--wa-font-weight-semibold);
}

.cancel-dialog__value--red {
  color: var(--wa-color-danger);
  font-weight: var(--wa-font-weight-semibold);
}

.cancel-dialog__tiers {
  padding: var(--wa-space-s);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
}

.cancel-dialog__tier {
  display: flex;
  justify-content: space-between;
  gap: var(--wa-space-m);
}

.cancel-dialog__tier + .cancel-dialog__tier {
  margin-top: var(--wa-space-2xs);
}

.cancel-dialog__tier-label {
  color: var(--wa-color-text-quiet);
}

.cancel-dialog__banner {
  margin-block: var(--wa-space-s);
}

.cancel-dialog__footer {
  display: flex;
  justify-content: center;
  gap: var(--wa-space-s);
  margin-top: var(--wa-space-m);
}

@media (max-width: 40rem) {
  .booking-overrides__fields {
    grid-template-columns: 1fr;
  }

  .booking-overrides__card {
    flex-direction: column;
    align-items: flex-start;
  }

  .booking-overrides__tabs {
    overflow-x: auto;
    gap: var(--wa-space-l);
  }
}