/*
 * The ⌘K-style search picker (`components/trade/SearchPicker.tsx`).
 *
 * Moved out of trade.css so the Funding Campaign's token choice can use the
 * picker without loading the whole trade terminal stylesheet. The class names
 * stay `mt-picker*` — Manual Trade renders exactly the markup it did before.
 */
/* ── Token picker ────────────────────────────────────────── */
.mt-picker {
  width: 820px; max-width: 94vw;
  max-height: 70vh;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-stroke-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-popover);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mt-picker__head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-stroke-divider);
}
.mt-picker__head input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--color-text-primary); font-size: 13px;
}
.mt-picker__count { font-size: 12px; color: var(--color-text-tertiary); white-space: nowrap; }
.mt-picker__filters {
  display: flex; gap: 4px; padding: 6px 14px;
  border-bottom: 1px solid var(--color-stroke-divider);
}
.mt-picker__switch {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 6px; padding-right: 10px;
  border-right: 1px solid var(--color-stroke-divider);
  font-size: 12px; color: var(--color-text-secondary); cursor: pointer; user-select: none;
}
.mt-picker__switch input { accent-color: var(--color-brand); margin: 0; }
.mt-picker__switch .mt-muted { color: var(--color-text-tertiary); }
.mt-picker__cols,
.mt-picker__row {
  display: grid;
  grid-template-columns: minmax(160px, 1.6fr) 1fr 1fr 1fr minmax(110px, 1.2fr);
  gap: 8px; align-items: center;
  padding: 0 14px;
}
.mt-picker__cols {
  font-size: 12px; color: var(--color-text-tertiary);
  padding-top: 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--color-stroke-divider);
}
.mt-picker__sort {
  background: none; border: none; padding: 0; color: inherit; font: inherit;
  cursor: pointer; display: inline-flex; gap: 4px; align-items: center; justify-content: flex-end;
}
.mt-picker__sort:hover, .mt-picker__sort.is-sorted { color: var(--color-text-secondary); }
.mt-picker__sort-mark { font-size: 12px; opacity: 0.7; }
.mt-picker__cols > .mt-picker__sort:first-child,
.mt-picker__cols > .mt-picker__sort:last-child { justify-content: flex-start; }
.mt-picker__cols > *:not(:first-child):not(:last-child) { text-align: right; justify-content: flex-end; }
.mt-picker__cols span:not(:first-child):not(:last-child),
.mt-picker__row > span:not(:first-child):not(:last-child) { text-align: right; }
.mt-picker__list { overflow-y: auto; flex: 1; }
.mt-picker__row {
  width: 100%; min-height: 38px;
  background: none; border: none; color: inherit; text-align: left;
  font-size: 12px; font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.mt-picker__row.is-active { background: var(--color-white-4); }
.mt-picker__row.is-current .mt-picker__sym { color: var(--color-brand); }
.mt-picker__sym { font-weight: 600; font-size: 12px; }
.mt-picker__sub { display: block; font-size: 12px; color: var(--color-text-tertiary); font-weight: 400; margin-top: 1px; }
.mt-picker__also { display: flex; gap: 3px; flex-wrap: wrap; }
.mt-picker__empty { padding: 24px; text-align: center; color: var(--color-text-tertiary); font-size: 12px; }
.mt-picker__foot {
  display: flex; gap: 12px; padding: 6px 14px;
  border-top: 1px solid var(--color-stroke-divider);
  font-size: 12px; color: var(--color-text-tertiary);
}
.mt-picker__foot .kbd { margin-right: 4px; }
.mt-picker .mt-muted { color: var(--color-text-tertiary); }
.mt-picker__row.is-locked { cursor: default; color: var(--color-text-tertiary); }

/* Manual Trade market picker: market data columns (TokenPicker). */
.mt-picker--markets { width: 1120px; }
.mt-picker--markets .mt-picker__cols,
.mt-picker--markets .mt-picker__row {
  grid-template-columns: minmax(210px, 2fr) repeat(5, minmax(78px, 1fr)) minmax(150px, 1.5fr);
}
/* "Hedgeable only" adds the funding-spread column between funding and OI. */
.mt-picker--markets.is-hedge .mt-picker__cols,
.mt-picker--markets.is-hedge .mt-picker__row {
  grid-template-columns: minmax(190px, 1.8fr) repeat(6, minmax(74px, 1fr)) minmax(130px, 1.3fr);
}
.mt-picker__arb-venue { margin-left: 4px; font-size: 12px; color: var(--color-text-tertiary); }
.mt-picker__market { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mt-picker__market-text { min-width: 0; }
.mt-picker__market-text .mt-picker__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-picker__lev {
  margin-left: 6px; padding: 0 4px; border-radius: 3px;
  background: var(--color-white-4); color: var(--color-text-tertiary);
  font-size: 12px; font-weight: 500;
}

@media (max-width: 900px) {
  /* Four columns fit a phone. Plain: market, price, change, venues. */
  .mt-picker--markets .mt-picker__cols,
  .mt-picker--markets .mt-picker__row { grid-template-columns: minmax(0, 2fr) auto auto minmax(0, 1.2fr); }
  /* Three columns: the counter venue already rides in the spread cell. */
  .mt-picker--markets.is-hedge .mt-picker__cols,
  .mt-picker--markets.is-hedge .mt-picker__row { grid-template-columns: minmax(0, 2fr) auto auto; }
  .mt-picker--markets:not(.is-hedge) .mt-picker__cols > :nth-child(n+4):nth-child(-n+6),
  .mt-picker--markets:not(.is-hedge) .mt-picker__row > :nth-child(n+4):nth-child(-n+6) { display: none; }
  /* Hedge mode keeps what the hedge is about: market, funding, spread, venues. */
  .mt-picker--markets.is-hedge .mt-picker__cols > :nth-child(2),
  .mt-picker--markets.is-hedge .mt-picker__row > :nth-child(2),
  .mt-picker--markets.is-hedge .mt-picker__cols > :nth-child(3),
  .mt-picker--markets.is-hedge .mt-picker__row > :nth-child(3),
  .mt-picker--markets.is-hedge .mt-picker__cols > :nth-child(n+6),
  .mt-picker--markets.is-hedge .mt-picker__row > :nth-child(n+6) { display: none; }
}

/* Schließen-Knopf im Kopf der Auswahl (Betreiber 04.11.2026). */
.mt-picker__close { flex: none; margin-left: 4px; }