/* HMS-365 hotel Settings screens: Sustainability, PMS integration, and
   Concessions. Three BEM-prefixed blocks in one file — these pages live in
   the shared hotel_portal layout, so nothing here is unprefixed.

   House conventions lifted from layouts/hotel_add_ons.css and
   concessions_admin.css / hotel_registration.css:
     card    = white, 10px radius, 1px var(--wa-color-neutral-border-quiet) border, soft shadow
     table   = collapsed borders, muted 0.75rem headers, var(--wa-color-neutral-border-quiet) row lines
     primary = var(--wa-color-brand-fill-loud) "Nautical East" + on-loud text
     ghost   = quiet border, transparent bg, quiet text
     chips   = pill, --wa-color-{success|warning|danger|neutral}-*-quiet pairs
   Served automatically by `stylesheet_link_tag :app` — no registration. */

/* ═══ Shared page-stack roots (same contract as .hotel-add-ons) ═══════════ */

.hotel-settings,
.hotel-pms,
.hotel-concessions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ═══ Sustainability — .hotel-settings__* ═════════════════════════════════ */

.hotel-settings__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
}

/* Info banner: light blue bg, icon left. Identical treatment reused by
   .hotel-concessions__banner below. */
.hotel-settings__banner,
.hotel-concessions__banner {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: var(--wa-color-brand-fill-quiet);
  color: var(--wa-color-brand-on-quiet);
  border: 1px solid var(--wa-color-brand-80);
  border-radius: 10px;
  font-size: 0.8125rem;
}

.hotel-settings__banner > i,
.hotel-concessions__banner > i {
  margin-top: 0.125rem;
}

/* Two-column grid: main ~2fr, rail ~1fr. minmax(0,…) keeps long values
   inside their track; collapses to one column at ≤1024 (media block at
   bottom). */
.hotel-settings__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.hotel-settings__card {
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.hotel-settings__card h2,
.hotel-settings__card h3,
.hotel-pms__details h2,
.hotel-pms__events h2,
.hotel-pms__queue h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
}

/* Certification checkbox rows: input left, strong label, muted description
   sitting under the label text. Covers <label>Label<small>desc</small></label>,
   a sibling <p>, or a named .hotel-settings__cert-desc element. */
.hotel-settings__cert {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.5rem 0;
}

.hotel-settings__cert input[type="checkbox"] {
  margin-top: 0.1875rem;
  accent-color: var(--wa-color-brand-fill-loud);
}

.hotel-settings__cert label {
  font-size: 0.875rem;
  font-weight: 600;
}

.hotel-settings__cert label small,
.hotel-settings__cert-desc,
.hotel-settings__cert p {
  display: block;
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-muted);
}

/* Carbon-offset row: the checkbox renders as a switch. No existing switch
   pattern in the codebase, so appearance:none + ::before knob (the spec's
   other sanctioned option was accent-color). Selector covers the class on
   the row AND directly on the input. */
.hotel-settings__toggle {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.625rem 0;
}

.hotel-settings__toggle input[type="checkbox"],
input[type="checkbox"].hotel-settings__toggle {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  border: none;
  border-radius: 999px;
  background: var(--wa-color-neutral-fill-normal);
  cursor: pointer;
}

.hotel-settings__toggle input[type="checkbox"]::before,
input[type="checkbox"].hotel-settings__toggle::before {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--wa-color-surface-default);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  transition: transform 0.15s ease;
}

.hotel-settings__toggle input[type="checkbox"]:checked,
input[type="checkbox"].hotel-settings__toggle:checked {
  background: var(--wa-color-brand-fill-loud);
}

.hotel-settings__toggle input[type="checkbox"]:checked::before,
input[type="checkbox"].hotel-settings__toggle:checked::before {
  transform: translateX(1rem);
}

.hotel-settings__toggle label {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Actions row: Cancel ghost on the left, Save primary teal pushed right.
   button_to wraps its button in a <form>, so forms are inlined and the last
   child (whatever element it is) gets margin-left:auto. */
.hotel-settings__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hotel-settings__actions form {
  display: inline;
}

.hotel-settings__actions > :last-child {
  margin-left: auto;
}

/* Save = primary teal (same recipe as .hotel-registration__submit). */
.hotel-settings__actions button[type="submit"],
.hotel-settings__actions input[type="submit"],
.hotel-settings__actions form button,
.hotel-settings__actions form input,
.hotel-settings__actions > button:last-child,
.hotel-settings__save {
  padding: 0.625rem 1.25rem;
  background: var(--wa-color-brand-fill-loud);
  color: var(--wa-color-brand-on-loud);
  border: none;
  border-radius: var(--wa-border-radius-m, 6px);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Cancel = muted ghost (same recipe as .hotel-registration__back). */
.hotel-settings__actions a,
.hotel-settings__actions > button:not(:last-child),
.hotel-settings__actions > input[type="button"],
.hotel-settings__actions > input[type="reset"],
.hotel-settings__cancel {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 1.25rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m, 6px);
  background: transparent;
  color: var(--wa-color-text-quiet);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* Sustainability score: ~120px pale-green circle, big bold green number. */
.hotel-settings__score-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.5rem;
  height: 7.5rem;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
  font-size: 2rem;
  font-weight: 700;
}

/* Label/value rows inside the score card; works for divs and dt/dd. */
.hotel-settings__score-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: 0.875rem;
}

.hotel-settings__score-row:last-child {
  border-bottom: none;
}

.hotel-settings__score-row > :first-child,
.hotel-settings__score-row dt {
  color: var(--ink-muted);
}

.hotel-settings__score-row > :last-child,
.hotel-settings__score-row dd {
  margin: 0;
  font-weight: 600;
}

/* ═══ PMS integration — .hotel-pms__* ═════════════════════════════════════ */

/* Three KPI cards in a row; stacks at ≤1024. When the KPI block lands in
   the same grid parent as the details/events pair it spans the full row. */
.hotel-pms__kpis,
.hotel-concessions__kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.hotel-pms__kpis,
.hotel-pms__queue,
.hotel-pms__empty,
.hotel-pms__table-wrap {
  grid-column: 1 / -1;
}

/* KPI card: muted label, large value, muted sub-line, small square icon box
   at the right. Variant tints live on .is-good / .is-bad / .is-neutral —
   accepted on the card or on the icon box itself. */
.hotel-pms__kpi,
.hotel-concessions__kpi {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  min-width: 0;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.hotel-pms__kpi-label,
.hotel-concessions__kpi-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
}

.hotel-pms__kpi-value,
.hotel-concessions__kpi-value {
  margin: 0.125rem 0;
  font-size: 1.375rem;
  font-weight: 700;
}

.hotel-pms__kpi-sub,
.hotel-concessions__kpi-sub {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.hotel-pms__kpi-icon,
.hotel-concessions__kpi-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: auto;
  border-radius: 8px;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

.hotel-pms__kpi-icon.is-good,
.hotel-concessions__kpi-icon.is-good,
.hotel-pms__kpi.is-good .hotel-pms__kpi-icon,
.hotel-concessions__kpi.is-good .hotel-concessions__kpi-icon {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

.hotel-pms__kpi-icon.is-bad,
.hotel-concessions__kpi-icon.is-bad,
.hotel-pms__kpi.is-bad .hotel-pms__kpi-icon,
.hotel-concessions__kpi.is-bad .hotel-concessions__kpi-icon {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}

.hotel-pms__kpi-icon.is-neutral,
.hotel-concessions__kpi-icon.is-neutral,
.hotel-pms__kpi.is-neutral .hotel-pms__kpi-icon,
.hotel-concessions__kpi.is-neutral .hotel-concessions__kpi-icon {
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

/* Connection Details + Recent Sync Events sit side-by-side. The contract
   names no wrapper, so whichever element is the direct parent of BOTH cards
   becomes the two-column row — works whether views use a dedicated wrapper
   or drop the cards straight into the page stack. Stacks at ≤1024. */
*:has(> .hotel-pms__details):has(> .hotel-pms__events),
.hotel-pms__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.hotel-pms__details,
.hotel-pms__events,
.hotel-pms__card {
  min-width: 0;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* The shipped view uses .hotel-pms__events on the <ul> INSIDE the card, not
   on the card itself — reset it to a bare list so it does not render as a
   card nested in a card. */
ul.hotel-pms__events {
  margin: 0;
  padding: 0;
  list-style: none;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Connection Details rows: muted label left, bold value right, hairline
   between rows. Works for divs and dt/dd. */
.hotel-pms__detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: 0.875rem;
}

.hotel-pms__detail-row:last-child {
  border-bottom: none;
}

.hotel-pms__detail-row > :first-child,
.hotel-pms__detail-row dt {
  color: var(--ink-muted);
}

.hotel-pms__detail-row > :last-child,
.hotel-pms__detail-row dd {
  margin: 0;
  font-weight: 600;
}

/* Sync events: timestamp line with a status chip. Chip variants may sit on
   the chip element (.is-success/.is-failure) inside the event. */
.hotel-pms__event {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: 0.8125rem;
}

.hotel-pms__event:last-child {
  border-bottom: none;
}

.hotel-pms__event time,
.hotel-pms__event > :first-child {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.hotel-pms__event .is-success,
.hotel-pms__chip.is-success {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: var(--wa-font-size-xs, 0.75rem);
  font-weight: var(--wa-font-weight-semibold, 600);
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

.hotel-pms__event .is-failure,
.hotel-pms__chip.is-failure {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: var(--wa-font-size-xs, 0.75rem);
  font-weight: var(--wa-font-weight-semibold, 600);
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}

/* Failed Transfer Queue card + its pale-red warning strip. */
.hotel-pms__queue {
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.hotel-pms__queue-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem;
  padding: 0.625rem 0.875rem;
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
  border: 1px solid var(--wa-color-danger-border-normal);
  border-radius: 8px;
  font-size: 0.8125rem;
}

/* House table, copied from .hotel-add-ons__table. min-width keeps columns
   from crushing inside a horizontal scroll wrap. */
.hotel-pms__table,
.hotel-concessions__table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  background: var(--wa-color-surface-default);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.hotel-pms__table th,
.hotel-concessions__table th {
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-pms__table td,
.hotel-concessions__table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: 0.875rem;
  vertical-align: middle;
}

.hotel-pms__table tbody tr:last-child td,
.hotel-concessions__table tbody tr:last-child td {
  border-bottom: none;
}

/* button_to emits a <form> around the button — keep it inline inside
   action cells so the table layout doesn't break. */
.hotel-pms__table td form,
.hotel-concessions__table td form {
  display: inline;
}

/* Horizontal-scroll wrap (same contract as shared .hotel-table-wrap):
   overflow inside the wrap plus the right-edge scroll hint. */
.hotel-pms__table-wrap,
.hotel-concessions__table-wrap {
  overflow-x: auto;
  width: 100%;
  box-shadow: inset -10px 0 10px -10px var(--wa-color-neutral-border-quiet);
}

/* Muted empty-state card. */
.hotel-pms__empty {
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: 10px;
  padding: 2rem 1.25rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

/* Secondary buttons — the ghost recipe, sized down like
   .hotel-review__reply-btn. The class may land on a <form> (button_to
   form_class), on the button itself, or on a link. */
.hotel-pms__test-btn,
.hotel-pms__resend-btn,
form.hotel-pms__test-btn > button,
form.hotel-pms__resend-btn > button,
form.hotel-pms__test-btn > input,
form.hotel-pms__resend-btn > input {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 6px 14px;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: 6px;
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-quiet);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

form.hotel-pms__test-btn,
form.hotel-pms__resend-btn {
  display: inline;
  padding: 0;
  border: none;
  background: none;
}

/* ═══ Concessions — .hotel-concessions__* ═════════════════════════════════ */

/* Status chips. Base badge props are repeated on every modifier so a lone
   .hotel-concessions__status--* class still renders as a pill. Palette is
   the same quiet-fill/on-quiet pairs as .concessions__badge in the admin. */
.hotel-concessions__status,
.hotel-concessions__status--delivered,
.hotel-concessions__status--pending,
.hotel-concessions__status--disputed,
.hotel-concessions__status--waived {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--wa-font-size-xs, 0.75rem);
  font-weight: var(--wa-font-weight-semibold, 600);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

/* Neutral base (and --waived) must come BEFORE the tinted modifiers: the
   view emits "hotel-concessions__status hotel-concessions__status--X" on one
   element, so equal-specificity rules resolve by source order — the tints
   have to win. */
.hotel-concessions__status,
.hotel-concessions__status--waived {
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

.hotel-concessions__status--delivered {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

.hotel-concessions__status--pending {
  background: var(--wa-color-warning-fill-quiet);
  color: var(--wa-color-warning-on-quiet);
}

.hotel-concessions__status--disputed {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}

/* Action-cell chip buttons: Mark Delivered pale green, Open Dispute pale
   red. Views emit them via button_to, so <form> wrappers stay inline and
   order picks the tint — first action is Delivered, anything after is the
   red Dispute (matching the spec's listed order). */
.hotel-concessions__actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.hotel-concessions__actions form {
  display: inline;
}

.hotel-concessions__actions button,
.hotel-concessions__actions input[type="submit"],
.hotel-concessions__actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border: none;
  border-radius: 999px;
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
  font: inherit;
  font-size: var(--wa-font-size-xs, 0.75rem);
  font-weight: var(--wa-font-weight-semibold, 600);
  text-decoration: none;
  cursor: pointer;
}

.hotel-concessions__actions form:first-of-type button,
.hotel-concessions__actions form:first-of-type input[type="submit"],
.hotel-concessions__actions form:only-of-type button,
.hotel-concessions__actions form:only-of-type input[type="submit"],
.hotel-concessions__actions > a:first-of-type {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

.hotel-concessions__actions form ~ form button,
.hotel-concessions__actions form ~ form input[type="submit"],
.hotel-concessions__actions > a ~ a {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}

/* ═══ View-emitted aliases ════════════════════════════════════════════════
   The shipped pms_integration/concessions views use these names alongside
   the spec contract. Both sets are styled — new views should use the
   contract names above. */

/* Card title inside the PMS cards. */
.hotel-pms__card-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
}

/* Detail-row label/value classes (the :first-child/:last-child rules above
   already cover them; these are the explicit hooks the view emits). */
.hotel-pms__detail-label {
  color: var(--ink-muted);
}

.hotel-pms__detail-value {
  font-weight: 600;
  text-align: right;
}

/* Sync-event timestamp span. */
.hotel-pms__event-time {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Event chips: .hotel-pms__event-chip base + --ok/--failed modifiers
   (view's names for the spec's .is-success/.is-failure). */
.hotel-pms__event-chip,
.hotel-pms__event .is-success,
.hotel-pms__event .is-failure {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: var(--wa-font-size-xs, 0.75rem);
  font-weight: var(--wa-font-weight-semibold, 600);
  background: var(--wa-color-neutral-fill-quiet);
  color: var(--wa-color-neutral-on-quiet);
}

.hotel-pms__event-chip--ok,
.hotel-pms__event .is-success,
.hotel-pms__chip.is-success {
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
}

.hotel-pms__event-chip--failed,
.hotel-pms__event .is-failure,
.hotel-pms__chip.is-failure {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}

/* Queue warning strip — the view names it __queue-banner and emits it as a
   plain <p role="alert">. */
.hotel-pms__queue-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem;
  padding: 0.625rem 0.875rem;
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
  border: 1px solid var(--wa-color-danger-border-normal);
  border-radius: 8px;
  font-size: 0.8125rem;
}

/* The queue table sits directly inside the card with no wrap — let the card
   scroll horizontally at phone widths. */
.hotel-pms__queue {
  overflow-x: auto;
}

.hotel-pms__queue-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
}

/* Page header — same recipe as .hotel-concessions__title. */
.hotel-pms__header {
  margin: 0 0 1rem;
}

.hotel-pms__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
}

/* Booking Ref is a single opaque token (EK-XXXX…) — never wrap it
   mid-token; the row can overflow into the section's own scroll. */
.hotel-pms__queue-table th:first-child,
.hotel-pms__queue-table td:first-child {
  white-space: nowrap;
}

.hotel-pms__queue-table th {
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
  font-weight: 600;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
}

.hotel-pms__queue-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--wa-color-neutral-border-quiet);
  font-size: 0.875rem;
  vertical-align: middle;
}

.hotel-pms__queue-table tbody tr:last-child td {
  border-bottom: none;
}

.hotel-pms__queue-table td form {
  display: inline;
}

/* Secondary buttons — the view emits __test-button / __resend-button with
   button_to, so the class lands on the submit input itself. Same ghost
   recipe as __test-btn/__resend-btn. */
.hotel-pms__test-button,
.hotel-pms__resend-button,
form.hotel-pms__test-button > button,
form.hotel-pms__resend-button > button {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 6px 14px;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: 6px;
  background: var(--wa-color-surface-default);
  color: var(--wa-color-text-quiet);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.hotel-pms__muted {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

/* ── Concessions view-emitted names ── */

.hotel-concessions__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.hotel-concessions__eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.hotel-concessions__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
}

/* Action-cell buttons: class lands on the button_to submit element.
   Plain __action is the pale-green "Mark Delivered"; --dispute is the
   pale-red "Open Dispute". */
.hotel-concessions__action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border: none;
  border-radius: 999px;
  background: var(--wa-color-success-fill-quiet);
  color: var(--wa-color-success-on-quiet);
  font: inherit;
  font-size: var(--wa-font-size-xs, 0.75rem);
  font-weight: var(--wa-font-weight-semibold, 600);
  text-decoration: none;
  cursor: pointer;
}

.hotel-concessions__action--dispute {
  background: var(--wa-color-danger-fill-quiet);
  color: var(--wa-color-danger-on-quiet);
}

/* Two button_to forms in one cell: a small gap between the inline forms. */
.hotel-concessions__table td form {
  display: inline;
}

.hotel-concessions__table td form + form {
  margin-left: 0.375rem;
}

/* Right-aligned numeric columns — same convention as
   .hotel-financials__table .num. */
.hotel-concessions__table .num {
  text-align: right;
}

.hotel-concessions__empty {
  padding: 2rem 14px;
  color: var(--ink-muted);
  text-align: center;
}

/* ── Sustainability view-emitted names ──
   The shipped view uses __columns (not __layout), __offset-toggle on the
   checkbox itself (not __toggle on the row), and named __cancel/__save
   buttons (folded into the actions rules above). */

/* Two-column wrapper — same 2fr/1fr grid as .hotel-settings__layout. */
.hotel-settings__columns {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.hotel-settings__card-title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 700;
}

.hotel-settings__sub {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* Cert list: view nests checkbox+name inside .hotel-settings__cert-label and
   emits the description as a sibling <p>, indented under the text. */
.hotel-settings__certs {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.hotel-settings__cert-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

.hotel-settings__cert-label input[type="checkbox"],
.hotel-settings__cert input[type="checkbox"] {
  margin: 0;
  accent-color: var(--wa-color-brand-fill-loud);
}

.hotel-settings__cert-name {
  font-weight: 600;
}

.hotel-settings__cert-desc {
  margin: 0 0 0 1.5rem;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-muted);
}

/* Carbon-offset row: the switch. Same appearance:none + ::before knob as
   .hotel-settings__toggle — here the class sits on the checkbox itself. */
.hotel-settings__offset {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0;
}

input[type="checkbox"].hotel-settings__offset-toggle {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  margin: 0;
  border: none;
  border-radius: 999px;
  background: var(--wa-color-neutral-fill-normal);
  cursor: pointer;
}

input[type="checkbox"].hotel-settings__offset-toggle::before {
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--wa-color-surface-default);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  transition: transform 0.15s ease;
}

input[type="checkbox"].hotel-settings__offset-toggle:checked {
  background: var(--wa-color-brand-fill-loud);
}

input[type="checkbox"].hotel-settings__offset-toggle:checked::before {
  transform: translateX(1rem);
}

.hotel-settings__offset-label {
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}

/* Practices field: bold label, bordered textarea, muted hint. */
.hotel-settings__field > label {
  display: block;
  margin: 0 0 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.hotel-settings__textarea {
  width: 100%;
  min-height: 7rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: 6px;
  background: var(--wa-color-surface-default);
  font: inherit;
  font-size: 0.875rem;
  resize: vertical;
}

.hotel-settings__hint {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--ink-muted);
}

/* Score card bits: <ul> rows list, muted badge line, number in the circle. */
ul.hotel-settings__score-rows {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.hotel-settings__score-number {
  font-size: 2rem;
  font-weight: 700;
}

.hotel-settings__badge {
  margin: 0.5rem 0 0;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

/* ═══ Breakpoints ═════════════════════════════════════════════════════════ */

/* ≤1024: two-column layouts collapse, KPI rows stack. */
@media (max-width: 1024px) {
  .hotel-settings__layout,
  .hotel-settings__columns {
    grid-template-columns: 1fr;
  }

  *:has(> .hotel-pms__details):has(> .hotel-pms__events),
  .hotel-pms__columns {
    grid-template-columns: 1fr;
  }

  .hotel-pms__kpis,
  .hotel-concessions__kpis {
    grid-template-columns: 1fr;
  }
}

/* Phone widths: tables scroll inside their wrap (same pattern as
   .hotel-add-ons__table-wrap). Everything else is already stacked by the
   1024 rules, so 390 needs nothing extra. */
@media (max-width: 700px) {
  .hotel-pms__table-wrap,
  .hotel-concessions__table-wrap {
    overflow-x: auto;
  }

  .hotel-settings__actions > :last-child {
    margin-left: 0;
  }

  .hotel-settings__actions {
    flex-direction: column;
    align-items: stretch;
  }
}