/* HMS-452 — Support Tools console, Attendee Lookup tab (Figma 600:33380) */

.support-tools {
  display: grid;
  gap: 1.5rem;
}

.support-tools,
.support-tools > *,
.support-attendee > *,
.support-history > * {
  min-width: 0;
}

.support-tools__table td,
.support-attendee__name,
.support-attendee__summary {
  overflow-wrap: anywhere;
}

.support-tools__title {
  margin: 0;
  color: var(--wa-color-text-normal);
}

.support-tools__section {
  display: grid;
  gap: 1rem;
}

.support-tools__section-title {
  margin: 0;
  font-size: 1.125rem;
  color: var(--wa-color-text-normal);
}

/* Search row: title left, search box right */
.support-tools__search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.support-tools__search-row form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 16rem;
}

.support-tools__search-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

/* Attendee card */
.support-attendee {
  display: grid;
  gap: 0.75rem;
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
}

.support-attendee__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.support-attendee__name {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--wa-font-weight-semibold);
  color: var(--wa-color-text-normal);
}

.support-attendee__summary {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.support-tools__view-booking {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  text-decoration: none;
}

.support-tools__view-booking:hover {
  opacity: 0.9;
}

/* Quick actions */
.support-attendee__qa-title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: var(--wa-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wa-color-text-quiet);
}

.support-attendee__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-s);
}

.support-tools__qa {
  display: inline-block;
  margin: 0;
  padding: 0.375rem 0.75rem;
  border-radius: var(--wa-border-radius-s);
  font-size: 0.8125rem;
  text-decoration: none;
  cursor: pointer;
  background: var(--qa-bg);
  color: var(--qa-fg);
}

/* On a wa-button host the colors belong on the inner button, not a frame
   painted around it. */
wa-button.support-tools__qa {
  padding: 0;
  background: none;
}

wa-button.support-tools__qa::part(base) {
  background: var(--qa-bg);
  color: var(--qa-fg);
  border-color: transparent;
}

.support-tools__qa--retry {
  --qa-bg: var(--wa-color-success-fill-quiet);
  --qa-fg: var(--wa-color-success-on-quiet);
}

.support-tools__qa--resend {
  --qa-bg: var(--wa-color-neutral-fill-quiet);
  --qa-fg: var(--wa-color-neutral-on-quiet);
}

.support-tools__qa--sync {
  --qa-bg: var(--wa-color-neutral-fill-quiet);
  --qa-fg: var(--wa-color-text-normal);
}

.support-tools__qa--audit {
  --qa-bg: var(--wa-color-brand-fill-quiet);
  --qa-fg: var(--wa-color-brand-on-quiet);
}

.support-tools__qa--reset {
  --qa-bg: var(--wa-color-danger-fill-quiet);
  --qa-fg: var(--wa-color-danger-on-quiet);
}

.support-tools__qa--login {
  --qa-bg: var(--wa-color-brand-fill-loud);
  --qa-fg: var(--wa-color-brand-on-loud);
}

/* Booking history card */
.support-history {
  display: grid;
  gap: 0.75rem;
  background: var(--wa-color-surface-raised);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-m);
  margin-block-start: var(--wa-space-s);
}

.support-history__title {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--wa-font-weight-bold);
  text-transform: none;
  color: var(--wa-color-text-quiet);
}

.support-history__ref {
  font-weight: var(--wa-font-weight-bold);
  color: var(--wa-color-text-normal);
  text-decoration: none;
}

/* The underline lives on the <a> inside the <strong>, not the <strong> itself. */
.support-history__ref a {
  color: inherit;
  text-decoration: none;
}

/* Booking history table */
.support-tools__table-wrap {
  overflow-x: auto;
}

.support-tools__table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.support-tools__table th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wa-color-text-quiet);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--wa-color-surface-border);
}

.support-tools__table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--wa-color-surface-border);
  color: var(--wa-color-text-normal);
}

/* Status pills */
.support-tools__status {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  background: var(--wa-color-surface-lowered);
  color: var(--wa-color-text-normal);
}

.support-tools__status--confirmed {
  background: var(--wa-color-success-fill-loud);
  color: var(--wa-color-success-on-loud);
}

.support-tools__status--completed {
  background: var(--wa-color-surface-border);
  color: var(--wa-color-text-normal);
}

.support-tools__status--cancelled,
.support-tools__status--failed {
  background: var(--wa-color-danger-fill-loud);
  color: var(--wa-color-danger-on-loud);
}

/* Misc */
.support-attendee__waitlist,
.support-attendee__none {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

.support-tools__empty {
  margin: 0;
  color: var(--wa-color-text-quiet);
}

.support-tools__note {
  margin: 0;
  color: var(--wa-color-text-quiet);
}

.support-tools__stats {
  display: flex;
  gap: 2rem;
  margin: 0;
  flex-wrap: wrap;
}

.support-tools__stats dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--wa-color-text-quiet);
}

.support-tools__stats dd {
  margin: 0.25rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

/* 390px: search box full width */
@media (max-width: 390px) {
  .support-tools__search-row {
    flex-direction: column;
    align-items: stretch;
  }

  .support-tools__search-row form {
    width: 100%;
    min-width: 0;
  }
}

/* HMS-352 — status badges on Payment Tools + Email Log rows. Tones mirror
   .status-chip (booking_overrides.css) so support surfaces read the same as
   every other admin badge. */
.support-tools__badge {
  display: inline-flex;
  align-items: center;
  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);
  background: var(--wa-color-neutral-90);
  color: var(--wa-color-neutral);
}

.support-tools__badge--captured,
.support-tools__badge--sent,
.support-tools__badge--delivered,
.support-tools__badge--resent {
  background: var(--wa-color-success-90);
  color: var(--wa-color-success);
}

.support-tools__badge--authorized,
.support-tools__badge--queued {
  background: var(--wa-color-brand-90);
  color: var(--wa-color-brand);
}

.support-tools__badge--failed,
.support-tools__badge--bounced,
.support-tools__badge--voided {
  background: var(--wa-color-danger-90);
  color: var(--wa-color-danger);
}

.support-tools__badge--refunded,
.support-tools__badge--partially_refunded {
  background: var(--wa-color-warning-90);
  color: var(--wa-color-warning-on-quiet);
}

.support-tools__stat dd small {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--wa-color-text-quiet);
}

.support-tools__ref {
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}

.support-tools__booking-link {
  font-weight: 600;
}

.support-tools__actions {
  white-space: nowrap;
}

.support-tools__actions wa-button + wa-button {
  margin-inline-start: 0.375rem;
}

.support-tools__dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1rem;
}

.support-tools__preview-subject {
  margin-top: 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.support-tools__preview-frame {
  width: 100%;
  min-height: 24rem;
  max-height: 60vh;
  /* Backstop for the style scrub: painted descendants stay inside this
     box even if a positioning declaration survives sanitization. */
  contain: paint;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  background: var(--wa-color-surface-default);
  overflow: auto;
  padding: 1rem;
}

.support-tools__preview-text {
  font-family: inherit;
  white-space: pre-wrap;
  margin: 0;
}

.support-tools__preview-error {
  color: var(--wa-color-text-quiet);
  margin: 0;
}

/* HMS-1086 — Payment Tools tab (Figma 600:36413). Payment-scoped classes;
   the shared .support-tools__table/__badge rules above are untouched so the
   Email Log tab is unaffected. */

.support-payments__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.support-payments__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.support-payments__search-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 16rem;
}

.support-payments__search-field > i {
  position: absolute;
  inset-inline-start: 0.75rem;
  color: var(--wa-color-text-quiet);
  font-size: 0.8125rem;
  pointer-events: none;
}

.support-payments__search-field input {
  width: 100%;
  padding-inline-start: 2rem;
}

/* KPI icon tile tints (the Total Collected tile uses the plain
   .kpi-strip__icon, already neutral). */
.support-payments__kpi-icon--warning {
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
}

.support-payments__kpi-icon--danger {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}

.support-payments__kpi-icon--brand {
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
}

/* Payment table: title-case headers, white rows, compact cells. These
   overrides intentionally follow the shared .support-tools__table rules in
   this file so they win at equal specificity. */
.support-payments__table th {
  font-size: 0.8125rem;
  font-weight: var(--wa-font-weight-semibold);
  text-transform: none;
  letter-spacing: normal;
  color: var(--wa-color-text-quiet);
  white-space: nowrap;
  padding-inline: 0.5rem;
}

.support-payments__table td {
  background: var(--wa-color-surface-default);
  vertical-align: middle;
  padding-inline: 0.5rem;
  height: 2.75rem;
}

.support-payments__sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.support-payments__sort .fa-sort { opacity: 0.4; }

.support-payments__ref {
  font-weight: var(--wa-font-weight-bold);
  color: var(--wa-color-text-normal);
  text-decoration: none;
}

.support-payments__ref:hover { text-decoration: underline; }

.support-payments__processor { color: var(--wa-color-text-quiet); }

/* Status badge: compact pill with leading icon. Tones mirror the shared
   .support-tools__badge--* palette but live on payment-scoped classes so the
   other tabs can't drift. */
.support-payments__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  border-radius: var(--wa-border-radius-s);
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: var(--wa-font-weight-semibold);
  white-space: nowrap;
  background: var(--wa-color-neutral-90);
  color: var(--wa-color-neutral);
}

.support-payments__badge--captured {
  background: var(--wa-color-success-90);
  color: var(--wa-color-success);
}

.support-payments__badge--authorized {
  background: var(--wa-color-neutral-90);
  color: var(--wa-color-neutral);
}

.support-payments__badge--failed,
.support-payments__badge--voided {
  background: var(--wa-color-danger-90);
  color: var(--wa-color-danger);
}

.support-payments__badge--refunded,
.support-payments__badge--partially_refunded {
  background: var(--wa-color-brand-90);
  color: var(--wa-color-brand);
}

.support-payments__badge--void_failed {
  background: var(--wa-color-warning-90);
  color: var(--wa-color-warning-on-quiet);
}

/* Table footer: per-page select left, "N–M of Total" center, page nav right */
.support-payments__footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-block-start: 0;
  font-size: 0.8125rem;
}

.support-payments__per-page {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
}

.support-payments__per-page select {
  width: auto;
  min-width: 4.5rem;
}

.support-payments__count {
  margin: 0;
  color: var(--wa-color-text-quiet);
  white-space: nowrap;
  justify-self: center;
}

.support-payments__pagination {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: end;
  flex-wrap: wrap;
}

.support-payments__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.375rem;
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-s);
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-normal);
  font-size: 0.8125rem;
  line-height: 1;
  text-decoration: none;
}

.support-payments__page:hover {
  background: var(--wa-color-neutral-fill-quiet);
}

.support-payments__page--current {
  background: var(--wa-color-brand-fill-loud);
  border-color: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  cursor: default;
}

.support-payments__ellipsis {
  color: var(--wa-color-text-quiet);
}

@media (max-width: 640px) {
  .support-payments__footer {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .support-payments__per-page,
  .support-payments__pagination {
    justify-self: center;
  }

  .support-payments__header {
    flex-direction: column;
    align-items: stretch;
  }

  .support-payments__search-field {
    width: 100%;
    min-width: 0;
  }
}

/* Compact row actions: wa-button's shadow base has a fixed 38px height, so
   paint ::part(base) — same technique as reviews-hub__btn elsewhere. */
.support-payments__table .support-tools__actions wa-button::part(base) {
  height: 1.625rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  line-height: 1.3;
}

/* Footer chevron buttons sized to the 2rem page-number links beside them. */
.support-payments__pagination wa-button::part(base) {
  height: 2rem;
}

/* KPI strip: labels wrap instead of truncating; 2x2 below 1260px so titles
   stay on one line and values stay aligned (mirrors the chatbot console's
   .kpi-strip handling). */
.support-payments__kpis .kpi-strip__label {
  white-space: normal;
}

@media (max-width: 1260px) {
  .support-payments__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* HMS-1095 — Email Log tab (Figma 600:34032). Reuses the HMS-1086
   support-payments__* header/table/footer; email-only rules live here. */
.support-email__header {
  justify-content: flex-end;
}

.support-email__kpi-icon--success {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

/* .admin-table-wrap table sets min-width: max-content, which forced a
   horizontal scroll. Fixed layout with set column widths fits the page;
   long text wraps (recipient) or truncates (preview) instead. */
.admin-table-wrap .support-email__table {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
}

.support-email__table th { white-space: normal; }
.support-email__table th:nth-child(1) { width: 20%; }
.support-email__table th:nth-child(2) { width: 13%; }
.support-email__table th:nth-child(4) { width: 13%; }
.support-email__table th:nth-child(5) { width: 7rem; }
.support-email__table th:nth-child(6) { width: 7rem; }
.support-email__table th:nth-child(7) { width: 6rem; }
.support-email__table th:nth-child(8) { width: 11rem; }

.support-email__recipient {
  font-weight: var(--wa-font-weight-bold);
  color: var(--wa-color-text-normal);
  overflow-wrap: anywhere;
}

.support-email__preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wa-color-text-quiet);
}

.support-email__sent-at { color: var(--wa-color-text-quiet); }

.support-email__badge--sent,
.support-email__badge--resent {
  background: var(--wa-color-success-90);
  color: var(--wa-color-success);
}

.support-email__badge--failed,
.support-email__badge--bounced {
  background: var(--wa-color-danger-90);
  color: var(--wa-color-danger);
}

/* HMS-1376 — Delivery column: the newest SendGrid event. */
.support-email__delivery--delivered {
  background: var(--wa-color-success-90);
  color: var(--wa-color-success);
}

.support-email__delivery--bounce,
.support-email__delivery--dropped,
.support-email__delivery--spamreport {
  background: var(--wa-color-danger-90);
  color: var(--wa-color-danger);
}

.support-email__delivery--deferred,
.support-email__delivery--processed {
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

.support-email__opened {
  font-weight: var(--wa-font-weight-semibold);
}

.support-email__opened--yes { color: var(--wa-color-success-on-quiet); }
.support-email__opened--no { color: var(--wa-color-danger-on-quiet); }

/* Below 1280px the sidebar leaves too little room for seven columns —
   Preview collapsed to one letter at 1024. Keep the fixed layout but give
   the table a floor so the wrap scrolls there; desktop never scrolls. */
@media (max-width: 1279px) {
  .admin-table-wrap .support-email__table {
    min-width: 64rem;
  }
}

/* HMS-1096/HMS-1098 — Resend dialog (Figma). Widened dialog, two-column
   detail rows, centered footer actions (HMS-1152: no body preview). */
.support-email__resend-dialog { --width: 37rem; white-space: normal; }

/* The dialog lives inside the table's compact actions cell; undo that
   cell's 26px button sizing for the footer actions. */
.support-payments__table .support-tools__actions .support-email__resend-actions wa-button::part(base) {
  height: 2.5rem;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
}

.support-email__resend-actions wa-button + wa-button { margin-inline-start: 0; }

.support-email__resend-dialog::part(footer) {
  border-top: 1px solid var(--wa-color-surface-border);
  padding-top: var(--wa-space-l);
  justify-content: center;
}

.support-email__resend-actions {
  justify-content: center;
  margin-top: 0;
  flex: 1 1 auto;
}

.support-email__details { margin: 0; }

.support-email__detail {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  font-size: 0.875rem;
}

.support-email__detail dt {
  color: var(--wa-color-text-quiet);
  font-weight: var(--wa-font-weight-normal);
  flex: 0 0 auto;
  white-space: nowrap;
}

.support-email__detail dd {
  margin: 0;
  min-width: 0;
  text-align: end;
  overflow-wrap: anywhere;
  color: var(--wa-color-text-normal);
}

/* HMS-1098 — resend dialog: info callout, danger "Original To" value,
   Send To field, and the does-not-change-booking note (Figma 600:36413). */
.support-email__resend-notice {
  margin-bottom: var(--wa-space-m);
  font-size: var(--wa-font-size-s);
  padding: 0.5em 0.75em;
  border: none;
  border-left: 3px solid var(--wa-color-brand);
  border-radius: var(--wa-border-radius-s, 0.25rem);
}

.support-email__detail dd.support-email__detail-value--danger { color: var(--wa-color-danger-on-normal); }

.support-email__send-to {
  display: block;
  width: 100%;
  margin-bottom: var(--wa-space-s);
  --wa-form-control-required-content: "";
}

.support-email__resend-note {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--wa-color-text-quiet);
}

/* HMS-1089 — Retry Payment dialog (Figma 600:36413): bold title, red
   warning callout, label/value rows (shared .support-email__detail), card on
   file panel, centered footer with a divider above it. */
.support-payments__retry-dialog { --width: 37rem; white-space: normal; }

.support-payments__retry-dialog::part(title) { font-size: 1.375rem; font-weight: var(--wa-font-weight-bold); }

.support-payments__retry-dialog::part(footer) {
  border-top: 1px solid var(--wa-color-surface-border);
  padding-top: var(--wa-space-l);
  justify-content: center;
}

/* The dialog lives inside the table's compact actions cell; undo that
   cell's 26px button sizing for the footer actions. */
.support-payments__table .support-tools__actions .support-payments__retry-actions wa-button::part(base) {
  height: 2.5rem;
  padding: 0 1.25rem;
  font-size: 0.9375rem;
}

.support-payments__retry-actions {
  justify-content: center;
  margin-top: 0;
  flex: 1 1 auto;
}

.support-payments__retry-actions wa-button + wa-button { margin-inline-start: 0; }

.support-payments__retry-warning {
  font-size: var(--wa-font-size-s);
  padding: 0.5em 0.75em;
  border: none;
  border-left: 3px solid var(--wa-color-danger-fill-loud);
  border-radius: var(--wa-border-radius-s, 0.25rem);
}

.support-payments__retry-heading {
  font-size: 1rem;
  font-weight: var(--wa-font-weight-bold);
  margin: 0 0 0.75rem;
}

.support-payments__retry-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.25rem;
  padding: 0.875rem 1rem;
  background: var(--wa-color-surface-lowered);
  border-radius: var(--wa-border-radius-m, 0.375rem);
  font-weight: var(--wa-font-weight-bold);
  color: var(--wa-color-text-normal);
}

.support-payments__retry-card-part + .support-payments__retry-card-part {
  margin-inline-start: 0.625rem;
  padding-inline-start: 0.625rem;
  border-inline-start: 2px solid var(--wa-color-text-normal);
}

.support-payments__retry-card-none {
  font-weight: var(--wa-font-weight-normal);
  color: var(--wa-color-text-quiet);
}

.support-payments__retry-note {
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  color: var(--wa-color-text-quiet);
}

.support-payments__retry-limit {
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}