/* Styles for the bookings results view (app.booking.search.results). As a route view, not a component, every rule
   hangs from the '.booking-results' root class to scope it and to outweigh generic classes on the same element. */

.booking-results .booking-results__title {
  margin-bottom: var(--md-spacing-sm);
}

/* Header: list title and actions */
.booking-results .booking-results__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--md-spacing-sm);
}

.booking-results .booking-results__list-title {
  font-size: var(--md-font-size-4);
}

.booking-results .booking-results__actions {
  display: flex;
  gap: var(--md-spacing-3xs);
}

.booking-results .booking-results__button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--md-spacing-3xs);
}

.booking-results .booking-results__button-icon {
  font-size: var(--md-font-size-4);
}

/* Filters panel */
.booking-results .booking-results__panel {
  margin-bottom: var(--md-spacing-sm);
  font-size: var(--md-font-size-4);
}

.booking-results .booking-results__panel-header {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-4xs);
  border-bottom: var(--md-border-width-sm) solid var(--md-border-primary);
  padding: var(--md-spacing-xs) var(--md-spacing-sm);
}

.booking-results .booking-results__panel-title {
  font-size: var(--md-font-size-7);
}

/* no semantic token: neutral-20 is only aliased as a border colour */
.booking-results .booking-results__panel-subtitle {
  font-size: var(--md-font-size-2);
  color: var(--md-color-neutral-20);
}

.booking-results .booking-results__panel-body {
  padding: var(--md-spacing-sm);
}

.booking-results .booking-results__row {
  display: flex;
  gap: var(--md-spacing-sm);
}

.booking-results .booking-results__field {
  flex: 1;
}

/* Room and workstation selectors share a single label */
.booking-results .booking-results__room-workstation {
  display: flex;
  flex: 1;
  align-items: flex-end;
  gap: var(--md-spacing-4xs);
}

.booking-results .booking-results__panel-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--md-spacing-xs);
}