/* The approval queue's own styles.
 *
 * A separate file on purpose: `tf-select` and the rest of the filter-panel
 * styling live in combined_report.css, which belongs to the Reports page
 * somebody else is working in. Borrowing the class would be fine; editing that
 * file to change how it looks would not. */

/* The two pickers on each section. Native selects, because these pick one value
 * and the Reports page's custom pickers exist for multi-select — but the
 * browser's own arrow sits hard against the right border, which reads as
 * clipped. appearance:none replaces it with a chevron that has room around it. */
.aq-select {
  font-size: 13px;
  padding: 7px 34px 7px 10px;
  border: 1px solid oklch(0.869 0.005 56.366);
  border-radius: 8px;
  background-color: #fff;
  color: #1c1917;
  font-family: inherit;
  cursor: pointer;
  box-sizing: border-box;
  min-width: 150px;
  appearance: none;
  -webkit-appearance: none;
  /* 12px of clear space between the chevron and the border. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.aq-select:hover { border-color: oklch(0.709 0.01 56.259); }
.aq-select:focus-visible { outline: 2px solid rgb(27, 81, 69); outline-offset: 1px; }