/* BGMS shared searchable collection contract.
   This file is intentionally page-agnostic. Page templates opt in with
   data-bgms-collection and the bgms-collection class family. */

.bgms-collection {
  min-width: 0;
  border-block: 1px solid var(--color-border, #d9dee8);
  background: var(--color-surface, #fff);
}

.bgms-collection__heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  min-width: 0;
  padding-block: var(--space-4, 1rem);
  border-block-end: 1px solid var(--color-border, #d9dee8);
}

.bgms-collection__title {
  margin: 0;
}

.bgms-collection__toolbar {
  display: grid;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem) 0;
  border-block-end: 1px solid var(--color-border, #d9dee8);
}

.bgms-collection__search-row {
  display: flex;
  align-items: end;
  gap: var(--space-3, 0.75rem);
  min-width: 0;
}

.bgms-collection__search-field,
.bgms-collection__filter-field {
  display: grid;
  gap: var(--space-2, 0.5rem);
  min-width: 0;
}

.bgms-collection__search-field {
  flex: 1 1 22rem;
}

.bgms-collection__filter-field {
  flex: 0 1 18rem;
}

.bgms-collection__label {
  font-weight: 700;
}

.bgms-collection__search {
  width: 100%;
  min-height: 2.75rem;
}

.bgms-collection__clear {
  flex: 0 0 auto;
  min-height: 2.75rem;
}

.bgms-collection__summary {
  margin: 0;
  color: var(--color-text-muted, #5f6878);
}

.bgms-collection__items {
  display: grid;
  min-width: 0;
}

.bgms-collection__row {
  display: grid;
  gap: var(--space-4, 1rem);
  min-width: 0;
  padding: var(--space-5, 1.25rem) 0;
  border-block-end: 1px solid var(--color-border, #d9dee8);
}

.bgms-collection__row:last-child {
  border-block-end: 0;
}

.bgms-collection__row[hidden],
.bgms-collection__filter-empty[hidden] {
  display: none;
}

.bgms-collection__filter-empty,
.bgms-collection__initial-empty {
  padding-block: var(--space-8, 2rem);
}

.service-catalog-standard {
  display: grid;
  gap: var(--space-6, 1.5rem);
  min-width: 0;
}

.service-catalog-standard .bgms-collection {
  border-radius: 0;
  box-shadow: none;
}

.service-catalog-standard .bgms-collection__row > * {
  min-width: 0;
  max-width: 100%;
}

.service-catalog__row-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  min-width: 0;
}

.service-catalog__row-title {
  margin: var(--space-2, 0.5rem) 0 0;
}

.service-catalog__row-body {
  display: grid;
  gap: var(--space-4, 1rem);
  min-width: 0;
}

.service-catalog-standard .bgms-collection__row h2,
.service-catalog-standard .bgms-collection__row h3,
.service-catalog-standard .bgms-collection__row h4 {
  margin-block-start: 0;
}

.service-catalog-standard .bgms-collection__row ul {
  margin-block: 0;
}

.service-catalog-standard .bgms-collection__row .page-actions,
.service-catalog-standard .bgms-collection__row .form-actions,
.service-catalog-standard .bgms-collection__row .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}


/* Searchable select progressive enhancement.
   The native select stays visible until JavaScript successfully creates the
   enhanced control. This preserves a complete no-JS and failure fallback. */
.bgms-searchable-select {
  position: relative;
  display: grid;
  gap: var(--space-2, 0.5rem);
  min-width: 0;
}

.bgms-searchable-select__native {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.bgms-searchable-select__control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2, 0.5rem);
  align-items: stretch;
  min-width: 0;
}

.bgms-searchable-select__input {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
}

.bgms-searchable-select__toggle {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: var(--space-3, 0.75rem);
}

.bgms-searchable-select__listbox {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  inset-block-start: calc(100% + var(--space-1, 0.25rem));
  display: grid;
  max-block-size: min(18rem, 50vh);
  margin: 0;
  padding: var(--space-1, 0.25rem);
  overflow-y: auto;
  border: 1px solid var(--color-border, #d9dee8);
  border-radius: var(--radius-md, 0.75rem);
  background: var(--color-surface, #fff);
  box-shadow: var(--shadow-lg, 0 1rem 2rem rgb(15 23 42 / 16%));
}

.bgms-searchable-select__listbox[hidden] {
  display: none;
}

.bgms-searchable-select__option {
  width: 100%;
  padding: var(--space-3, 0.75rem);
  border: 0;
  border-radius: var(--radius-sm, 0.5rem);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.bgms-searchable-select__option:hover,
.bgms-searchable-select__option:focus-visible,
.bgms-searchable-select__option[aria-selected="true"] {
  background: var(--color-surface-subtle, #eef3f7);
  outline: none;
}

.bgms-searchable-select__option[hidden],
.bgms-searchable-select__empty[hidden] {
  display: none;
}

.bgms-searchable-select__option:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.bgms-searchable-select__empty {
  margin: 0;
  padding: var(--space-4, 1rem);
  color: var(--color-text-muted, #5f6878);
  text-align: center;
}

.bgms-searchable-select.is-disabled .bgms-searchable-select__input,
.bgms-searchable-select.is-disabled .bgms-searchable-select__toggle {
  cursor: not-allowed;
  opacity: 0.65;
}

@media (max-width: 48rem) {
  .bgms-collection__search-row,
  .service-catalog__row-header {
    align-items: stretch;
    flex-direction: column;
  }

  .bgms-collection__search-field,
  .bgms-collection__clear {
    flex-basis: auto;
    width: 100%;
  }

  .bgms-collection__row {
    padding-block: var(--space-4, 1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bgms-collection *,
  .bgms-collection *::before,
  .bgms-collection *::after {
    scroll-behavior: auto;
  }
}