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

.search-results {
  display: flex;
  min-height: 100vh; /* same as .search-form: the filters panel stretches to the full height even with few results */
  color: var(--md-content-secondary);
}

/* Side filters panel */
.search-results .search-results__filters {
  min-width: 300px;
  max-width: 400px;
  border: none;
  border-right: var(--md-border-width-sm) solid var(--md-border-subtle);
  border-radius: var(--md-radius-none);
}

.search-results .search-results__filters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--md-spacing-3xs);
  margin-bottom: var(--md-spacing-3xs);
}

/* No margins on the title: Bootstrap's h3 margins pushed it off the button's centre line */
.search-results .search-results__filters-title {
  margin: var(--md-spacing-none);
  color: var(--md-content-primary);
}

.search-results .search-results__filters-title.search-results__filters-title--disabled {
  color: var(--md-content-disabled);
}

/* Main column */
.search-results .search-results__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-sm);
  padding: 0 var(--md-spacing-mn) var(--md-spacing-lg);
  margin: 0 auto;
  max-width: var(--md-max-width-2xl);
}

/* Simple and advanced search */
.search-results .search-results__search {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-3xs);
}

.search-results .search-results__search-row {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-3xs);
}

.search-results .search-results__search-input {
  flex: 1;
}

/* Results summary: info, create indicator and save search */
.search-results .search-results__summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--md-spacing-xs);
}

.search-results .search-results__summary-info {
  width: 100%;
}

.search-results .search-results__summary-actions {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: var(--md-spacing-3xs);
}

/* List toolbar: selection, print and view mode */
.search-results .search-results__toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}

/* Result list title: above the toolbar row in grid mode, at its start in table mode */
.search-results .search-results__list-title {
  color: var(--md-content-primary);
  font-family: var(--md-text-heading-xs-font-family);
  font-size: var(--md-text-heading-xs-font-size);
  font-weight: var(--md-text-heading-xs-semibold-font-weight);
  line-height: var(--md-text-heading-xs-line-height);
  letter-spacing: var(--md-text-heading-xs-letter-spacing);
}

.search-results .search-results__toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search-results .search-results__toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--md-spacing-3xs);
}

/* Grid mode */
.search-results .search-results__grid {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-3xs);
}

/* auto-fill, not auto-fit, so a few results keep the column width instead of stretching across the row */
.search-results .search-results__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); /* no token: card min width */
  gap: var(--md-spacing-xs);
}