/* Making Tom Select look like the rest of the fields on the page.
 *
 * Its own stylesheet is in 24a-tom-select.css, untouched so the next version is
 * a download rather than a merge. Everything here is an override, and every
 * value comes from the app's tokens — a control that is nearly the same as the
 * inputs beside it reads worse than one that is obviously different.
 */

/* --- the closed control, which has to match an <input> exactly --- */
.combo .ts-wrapper { width: 100%; }

.combo .ts-control {
  padding: 8px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: 400 14px var(--ui);
  min-height: 0;
  box-shadow: none;
}

.combo .ts-wrapper.single .ts-control,
.combo .ts-wrapper.single .ts-control input { cursor: pointer; }

/* The same focus ring 03-forms.css gives every other field. */
.combo .ts-wrapper.focus .ts-control,
.combo .ts-control:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(23, 25, 26, .09);
}

.combo .ts-wrapper.single.input-active .ts-control { background: var(--surface); }
.combo .ts-control > input { font: 400 14px var(--ui); color: var(--ink); }

/* Nothing chosen reads as a prompt, the way a select's blank option does. */
.combo .ts-control .item[data-value=""] { color: var(--ink-3); }

/* --- the open list --- */
.combo .ts-dropdown {
  margin: 4px 0 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
  z-index: 40;
}

.combo .ts-dropdown .ts-dropdown-content {
  /* Capped, so 1,715 customers scroll inside the panel rather than making a
     list the length of a phone book. */
  max-height: 320px;
  padding: 4px;
}

.combo .ts-dropdown .option {
  padding: 7px 9px;
  border-radius: 5px;
  color: var(--ink);
}

.combo .ts-dropdown .active { background: var(--signal-bg); color: var(--ink); }
.combo .ts-dropdown .no-results { padding: 12px; color: var(--ink-3); font-size: 13px; }

/* --- the row itself, which is why a plain select was never enough --- */
.combo-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.combo-label { min-width: 0; }

/* The account number, the tier, the code. Monospaced because it is an
   identifier and lines up when a column of them is scanned. */
.combo-meta {
  flex: none;
  font-size: 12.5px;
  color: var(--ink-3);
  font-family: var(--mono);
}

@media (max-width: 720px) {
  /* A phone has the room, and the fat-finger target matters more than the page
     behind it. */
  .combo .ts-dropdown .ts-dropdown-content { max-height: 60vh; }
  .combo .ts-dropdown .option { padding: 10px 9px; }
}