/* A row of filters above a list: search box, selects, pills. Wraps on narrow screens */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.filters__search {
  flex: 1 1 14rem;
  max-width: 28rem;
}

/* A select with its name beside it ("Estado", "Ordenar por") */
.filters__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filters__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

/* On phones each takes a whole line, the selects lined up after names of the same width */
@media (max-width: 40rem) {
  .filters__field {
    flex: 1 1 100%;

    .filters__label {
      flex: 0 0 6.5rem;
    }

    .filters__select {
      flex: 1 1 auto;
      max-width: none;
    }
  }
}

.filters__count {
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Two columns of key/value pairs on a record's page; one column on phones */
.details--grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));

  .details__wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 40rem) {
  .details--grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A record's page: main column and a side column (map, photos) on wide screens */
.record-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--space-4);
  align-items: start;
}

/* minmax(0, …), not 1fr: a plain 1fr column can't be narrower than its widest content (a table, a long email), and
   on phones it would push the whole page wider than the screen. Tables scroll inside their own box instead */
@media (max-width: 64rem) {
  .record-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Two short fields side by side in a form (dates, numbers); stacked on phones */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 40rem) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

/* The record's name in a table row, linking to its page */
.table__link {
  font-weight: var(--weight-medium);
}

/* A small second line in a table cell (e.g. when a colony was last counted) */
.table__subtext {
  display: block;
  color: var(--color-text-subtle);
  font-size: var(--text-xs);
}

/* A select beside the search box (e.g. who has the reports): as wide as its longest option allows */
.filters__select {
  flex: 0 1 11rem;
  width: auto;
  min-width: 9rem;
}

/* A list's pages at its foot (shared/_pagination): before, where we are, after */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-6);

  [aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
  }
}

.pagination__where {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* A record's code (GAT-0001, COL-001) in grey: to the left of its name in cards and a cat's row (cats/_name), and on a
   line of its own above the name in a table (.record-code--above) */
.record-code {
  margin-right: var(--space-1-5);
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  font-variant-numeric: tabular-nums;
}

.record-code--above {
  display: block;
  margin-right: 0;
  font-size: var(--text-xs);
}