/* Rate card editor — HMS-15 AC2 */

.rate-editor {
  /* Was var(--wa-space-xl) — a spacing token (~2rem) that collapsed the whole
     editor to a ~30px column. 72rem matches the hotel_detail convention and
     gives the rate table room. */
  max-width: 72rem;
}

/* Header: HMS-1560/1561 — a space-between row (contract-list__header's
   shape): __header-main carries the left-aligned button → title → subtitle
   column, and the export group anchors the top-right. flex-wrap lets the
   exports drop under the title block on narrow viewports. */
.rate-editor__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wa-space-m);
  margin-bottom: var(--wa-space-l);
}

.rate-editor__header-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wa-space-xs);
}

/* Title uses heading font/weight at 2xl */
.rate-editor__title {
  font-family: var(--wa-font-family-heading);
  font-weight: var(--wa-font-weight-heading);
  font-size: var(--wa-font-size-2xl);
  margin: 0;
}

/* Subtitle quiet text, small size — the old width:100% only existed to force
   a line break in the wrapping-row header; the column header doesn't need it. */
.rate-editor__subtitle {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
  margin: 0;
}

/* Notice callout with vertical spacing */
.rate-editor__notice {
  margin-top: var(--wa-space-l);
  margin-bottom: var(--wa-space-l);
}

/* Form wrapper */
.rate-editor__form {
  display: flex;
  flex-direction: column;
  gap: var(--wa-space-l);
}

/* Horizontally scrollable table container */
.rate-editor__table-wrap {
  overflow-x: auto;
}

/* Full-width table with collapsed borders */
.rate-editor__table {
  width: 100%;
  border-collapse: collapse;
}

.rate-editor__table th,
.rate-editor__table td {
  text-align: left;
  padding: var(--wa-space-2xs) var(--wa-space-xs);
  border-bottom: 1px solid var(--wa-color-surface-border);
}

/* Long header labels (e.g. "Attendee Pays (for Base Rate)") wrap to two
   lines so all columns stay visible without horizontal scroll. */
.rate-editor__table th {
  white-space: normal;
}

/* wa-input's host defaults to ~196px, which pushed the last columns off
   screen behind the wrap's horizontal scroll. 6rem is the floor where a
   money value ("1234.56") stays readable — 4.5rem clipped digits at the
   right edge. The base part's 16px side padding is trimmed to keep the
   field compact. */
.rate-editor__table wa-input {
  width: 6rem;
}

.rate-editor__table wa-input::part(base) {
  padding-inline: 0.5rem;
}

/* Per-date quantity inputs keep the grid's column sizing instead. */
.rate-editor__nights-grid wa-input {
  width: auto;
}

/* Per-date quantity grid: stacks one-per-row in the narrow table cell and
   becomes a wrapping multi-column grid on the full-width form. */
.rate-editor__nights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: var(--wa-space-xs);
  margin-top: var(--wa-space-xs);
}

/* Actions row: flex with gap and wrap */
.rate-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-m);
}

/* Empty state: centred bordered rounded panel */
.rate-editor__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--wa-space-xl);
  margin-top: var(--wa-space-l);
  border: 1px solid var(--wa-color-neutral-border-quiet);
  border-radius: var(--wa-border-radius-m);
  background-color: var(--wa-color-surface-lowered);
  text-align: center;
}

.rate-editor__empty-title {
  color: var(--wa-color-text-normal);
  font-size: var(--wa-font-size-m);
  margin: 0 0 var(--wa-space-xs);
}

.rate-editor__empty-hint {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-s);
  margin: 0;
}

/* Toolbar: holds the Add-rate-window action; HMS-1561 moved the exports up
   into the page header's top-right. */
.rate-editor__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wa-space-s);
  margin-bottom: var(--wa-space-m);
}

/* Export button group — the header's right-side action cluster. Uniform
   size="s" wa-buttons give matching heights; gap + shrink guard keep them
   aligned and off the title block when the row wraps. */
.rate-editor__exports {
  display: flex;
  align-items: center;
  gap: var(--wa-space-xs);
  flex-shrink: 0;
}

/* Card section grouping a rate block */
.rate-editor__group {
  margin-top: var(--wa-space-l);
  padding: var(--wa-space-m);
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
}

/* Section heading inside a group */
.rate-editor__heading {
  font-size: var(--wa-font-size-l);
  font-weight: 600;
  margin: 0 0 var(--wa-space-s);
}

/* Options row: wrapping flex of inline controls */
.rate-editor__options {
  display: flex;
  gap: var(--wa-space-s);
  flex-wrap: wrap;
}

/* Quiet helper text under a control or group */
.rate-editor__hint {
  color: var(--wa-color-text-quiet);
  font-size: 0.875rem;
  margin: var(--wa-space-xs) 0 0;
}

/* Compact table variant: tighter cells for dense rate grids */
.rate-editor__table--compact {
  font-size: 0.875rem;
}

/* Empty cell spanning a row with no rates */
.rate-editor__empty-cell {
  text-align: center;
  color: var(--wa-color-text-quiet);
  padding: var(--wa-space-l);
}

/* Dialog form: vertical stack of fields */
.rate-editor__dialog-form {
  display: grid;
  gap: var(--wa-space-m);
}

/* Revealed "+ New category…" fields — same rhythm as the dialog form. The
   [hidden] guard is required: an author display:grid would otherwise beat
   the UA [hidden] rule and the controller's .hidden toggle would stop
   working (same pattern as .contract-form__shoulder-fields[hidden]). */
.rate-editor__newcat {
  display: grid;
  gap: var(--wa-space-s);
}

.rate-editor__newcat[hidden] {
  display: none;
}

/* Dialog footer: right-aligned actions */
.rate-editor__dialog-footer {
  display: flex;
  gap: var(--wa-space-s);
  justify-content: flex-end;
}

/* Sort indicator icons in the table header */
.rate-editor__table th i {
  margin-right: 0.25rem;
  font-size: 0.75rem;
  color: var(--wa-color-text-quiet);
}

/* Remove buttons: button_to emits a native <button> inside an inline <form>;
   style it as a quiet destructive control (was falling back to the dark
   default button look). */
.rate-editor__table td form:has(.rate-editor__remove) {
  display: inline;
}

.rate-editor__remove {
  appearance: none;
  border: 1px solid var(--wa-color-neutral-border-normal);
  border-radius: var(--wa-border-radius-m);
  padding: var(--wa-space-2xs) var(--wa-space-s);
  background: transparent;
  color: var(--wa-color-danger-fill-loud);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

.rate-editor__remove:hover {
  border-color: var(--wa-color-danger-fill-loud);
}