/* Admin amenity library. Colour values are tokens only: a hex outside
   eventkrowd_theme.css is a bug this project has a test for. */

.admin-amenities__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.5rem;
}

.admin-amenities__title {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

.admin-amenities__table {
  width: 100%;
  border-collapse: collapse;
  background: var(--wa-color-surface-default);
  border: 1px solid var(--wa-color-surface-border);
  border-radius: 0.5rem;
}

.admin-amenities__table th,
.admin-amenities__table td {
  padding: 0.875rem 1rem;
  text-align: start;
  border-block-end: 1px solid var(--wa-color-surface-border);
}

.admin-amenities__table thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--wa-color-text-quiet);
  background: var(--wa-color-neutral-fill-quiet);
}

.admin-amenities__table tbody tr:last-child td {
  border-block-end: none;
}

.admin-amenities__icon {
  margin-inline-end: 0.5rem;
  color: var(--wa-color-text-quiet);
}

.admin-amenities__scope {
  font-size: 0.8125rem;
  color: var(--wa-color-text-normal);
}

.admin-amenities__scope--library {
  color: var(--wa-color-text-quiet);
}

.admin-amenities__empty {
  color: var(--wa-color-text-quiet);
}

/* The design is a modal (600:20204); rendered as a page until the tab that
   hosts it exists, so it is constrained to a modal-ish measure. */
.amenity-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 26rem;
}

.amenity-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-block-start: 0.5rem;
}

.admin-hotels__actions {
  display: flex;
  gap: 0.75rem;
}

/* The property-library search (Figma 600:15138 header). One flex row under the
   actions: input at a usable measure with the button inline. Web Awesome's
   native.css forces every text input to width: 100% and gives inputs a
   0.5em top margin after a label, so the selector needs two-class specificity
   to hold at 20rem and sit level with the button. */
.admin-hotels__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 0.75rem;
}

.admin-hotels__search .admin-hotels__search-input {
  inline-size: 20rem;
  max-inline-size: 100%;
  margin-block-start: 0;
}

.admin-hotels__empty {
  padding: var(--wa-space-m);
  color: var(--wa-color-text-quiet);
}

/* The per-hotel amenity grid on the hotel form (Figma 600:16478). */
.amenity-grid {
  margin-block-end: 1.25rem;
}

.amenity-grid__heading {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--wa-color-text-normal);
}

/* Flex, not a stretched grid. `auto-fit` with `1fr` widens every column to fill
   the row, so a category with three amenities spread them across the whole form
   with enormous gaps while a category with six sat tight — nothing lined up and
   the column count changed per category. Natural widths, wrapping, left
   aligned, which is also how the design reads. */
.amenity-grid__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

.amenity-grid__options wa-checkbox {
  flex: 0 0 auto;
}