/* HMS-332 — Admin Hotel Profile tabs (Figma 600:15465–17167).
   Shared card + row patterns for the rebuilt tab surfaces: General Details
   (.hotel-form__*), Amenities (.hotel-amenity-card), Contracts & Blocks
   (.contract-tab__*). */

/* Figma 600:15465 — ID over the status badge in a right-aligned column at the
   end of the identity row. */
.hotel-profile-header__aside {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--wa-space-s);
}

.hotel-form__card,
.hotel-amenity-card,
.contract-tab__card {
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-l);
  padding: var(--wa-space-l);
  margin-bottom: var(--wa-space-l);
  overflow-x: auto;
}

.hotel-form__card h2,
.hotel-amenity-card h3,
.contract-tab__card h2 {
  font-family: var(--wa-font-family-heading);
  font-weight: var(--wa-font-weight-heading);
  margin: 0 0 var(--wa-space-m);
}

.hotel-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--wa-space-m);
  margin-bottom: var(--wa-space-m);
}

.hotel-form__row:last-child { margin-bottom: 0; }

.hotel-form__location {
  display: grid;
  grid-template-columns: 1fr minmax(220px, 320px);
  gap: var(--wa-space-l);
  align-items: start;
}

.hotel-form__map {
  background: var(--wa-color-surface-lowered);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: var(--wa-border-radius-m);
  min-height: 200px;
}

/* Tall enough that the venue popup (name, venue, address, dates, two
   buttons) fits inside the tile instead of being clipped. */
.hotel-form__map.mapboxgl-map {
  min-height: 360px;
}

.hotel-form__map--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--wa-color-text-quiet);
  font-size: 2rem;
}

@media (max-width: 900px) {
  .hotel-form__location { grid-template-columns: 1fr; }
}

.hotel-amenity-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wa-space-m) var(--wa-space-xl);
  margin-bottom: var(--wa-space-m);
}

/* Same shadow-slot gap:0 problem as the wizard (HMS-1577): the radio
   group's radios sit on a shadow <slot part="form-control-input">, so
   the row's host gap never reaches them. Match it via ::part and zero
   the radios' WA-default margins. */
wa-radio-group.hotel-amenity-card__row::part(form-control-input) {
  gap: var(--wa-space-m) var(--wa-space-xl);
}
wa-radio-group.hotel-amenity-card__row wa-radio { margin: 0; }

.hotel-amenity-card__add { margin-top: var(--wa-space-s); }

.hotel-amenity-card wa-input { margin-bottom: var(--wa-space-m); }

.hotel-amenity-modal__error {
  color: var(--wa-color-danger-fill-loud);
  font-size: var(--wa-font-size-s);
  margin: var(--wa-space-s) 0 0;
}

/* HMS-1466 — the error sits directly under its field, in red, and the field
   carries a red border via the Web Awesome form-control border token (the
   .text-field box inside wa-input's shadow reads it). Cleared on input. */
.hotel-amenity-modal__field-error {
  margin: calc(var(--wa-space-s) * -0.5) 0 0;
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-danger-fill-loud);
}

.hotel-amenity-modal wa-input.field--invalid {
  --wa-form-control-border-color: var(--wa-color-danger-border-loud);
}

.contract-tab__settings-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--wa-space-m);
}

/* HMS-1493 — the display-input keeps the condensed 1.2 line-height inside a
   19.2px-high box with overflow:clip, and Inter's descenders paint past the
   clip edge ("g" in "Pending Signature" was cut flat). Normal line-height
   grows the input inside the fixed 43px combobox; the row height is
   unchanged. */
.contract-tab__settings-row wa-select::part(display-input) {
  line-height: var(--wa-line-height-normal);
}

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

.contract-tab__matrix th,
.contract-tab__matrix td {
  padding: var(--wa-space-s) var(--wa-space-m);
  border-bottom: 1px solid var(--wa-color-surface-border);
  text-align: left;
}

.contract-tab__matrix thead th {
  color: var(--wa-color-text-quiet);
  font-size: var(--wa-font-size-xs);
  font-weight: var(--wa-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contract-tab__matrix wa-input { width: 5.5rem; }

.contract-tab__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--wa-space-m);
}

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

/* HMS-1522 — the edited contract's status + version + "Open contract" link,
   one quiet row under the Contract Settings heading. */
.contract-tab__contract-ref {
  display: flex;
  align-items: center;
  gap: var(--wa-space-s);
  margin: calc(var(--wa-space-s) * -0.5) 0 var(--wa-space-m);
  font-size: var(--wa-font-size-s);
  color: var(--wa-color-text-quiet);
}

/* HMS-1491 — the reason field is only conditionally required, so it cannot
   carry the native `required` marker; a manual red asterisk instead. */
.contract-tab__required { color: var(--wa-color-danger-fill-loud); }

.contract-tab__errors { margin: 0; padding-inline-start: var(--wa-space-l); }

.hotel-form__rich-text {
  margin-top: var(--wa-space-m);
}

.hotel-form__rich-text label {
  display: block;
  font-size: var(--wa-font-size-s);
  font-weight: var(--wa-font-weight-bold);
  margin-bottom: var(--wa-space-s);
}

.hotel-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--wa-space-m);
}

/* Action rows right-align their Save button, matching the other profile cards. */
.hotel-amenity-card__actions {
  display: flex;
  justify-content: flex-end;
}

/* Photo grid cells stack their contents vertically (the row rule is horizontal
   flex, correct in list layout but wrong inside the grid). */
.photo-manager__grid .photo-manager__row {
  flex-direction: column;
  align-items: stretch;
  height: 100%;
}

.photo-manager__grid .photo-manager__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.hotel-amenity-modal::part(body) {
  display: grid;
  gap: var(--wa-space-m);
}