/*
 * Diamond Core typeahead palette — sole source of truth for Tom Select
 * colors. The vendored tom-select.css has had its hardcoded `color`,
 * `background`, and `opacity: 0.5` rules stripped at the source so this
 * file does not fight any specificity battles.
 *
 * Defaults to the Stadium dark theme. Light-mode block at the bottom
 * flips to the light palette under `body.light-mode`.
 */

/* ─── Control (the box the user clicks / types into) ────────────────── */

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  background: var(--bg-elevated, #161B22);
  border: 1px solid var(--border-default, #30363D);
  border-radius: var(--radius-1, 6px);
  padding: 0.55rem 0.75rem;
  min-height: 2.6rem;
  box-shadow: none;
  color: var(--text-primary, #F0F6FC);
}

.ts-wrapper.focus .ts-control {
  border-color: var(--accent-gold, #f5a623);
  box-shadow: 0 0 0 2px var(--accent-gold-muted, rgba(245,166,35,0.25));
  outline: none;
}

/* The .item div Tom Select renders inside the control to show the
 * currently-picked value (single-select) or the chips (multi-select). */
.ts-wrapper .ts-control .item {
  color: var(--text-primary, #F0F6FC);
  -webkit-text-fill-color: var(--text-primary, #F0F6FC);
}

.ts-wrapper.multi .ts-control > div {
  background: var(--bg-elevated, #21262D);
  color: var(--text-primary, #F0F6FC);
  border-radius: var(--radius-1, 4px);
}

/* The <input> the user types in. Set `color` AND
 * `-webkit-text-fill-color` so WebKit's native text-fill-color cannot
 * override the inherited cascade. */
.ts-wrapper .ts-control > input {
  color: var(--text-primary, #F0F6FC);
  -webkit-text-fill-color: var(--text-primary, #F0F6FC);
  caret-color: var(--text-primary, #F0F6FC);
}

.ts-wrapper .ts-control > input::placeholder {
  color: var(--text-muted, #8B949E);
  -webkit-text-fill-color: var(--text-muted, #8B949E);
  opacity: 1;
}

/* ─── Dropdown popup ────────────────────────────────────────────────── */

.ts-dropdown {
  background: var(--bg-elevated, #161B22);
  color: var(--text-primary, #F0F6FC);
  border: 1px solid var(--border-default, #30363D);
  border-radius: var(--radius-1, 6px);
  margin-top: 0.25rem;
  z-index: 9999;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

/* The scrollable area is the CONTENT element (Tom Select's default layout), not
   the wrapper. This is required for the virtual_scroll plugin — it listens for
   scroll on .ts-dropdown-content to load the next page — and it lets the
   .ts-more-info footer stick to the bottom of the scroll viewport. */
.ts-dropdown .ts-dropdown-content {
  max-height: min(60vh, 30rem);
  overflow-y: auto;
  /* The wheel stops at the end of the list; it does not carry on into the
     page underneath, which would slide the field away from under the open
     list and re-measure it mid-scroll. */
  overscroll-behavior: contain;
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 0.55rem 0.75rem;
  color: var(--text-primary, #F0F6FC);
  -webkit-text-fill-color: var(--text-primary, #F0F6FC);
  background: transparent;
}

.ts-dropdown .optgroup-header {
  color: var(--text-secondary, #C9D1D9);
  -webkit-text-fill-color: var(--text-secondary, #C9D1D9);
  background: var(--bg-surface, #0D1117);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.ts-dropdown .option:hover,
.ts-dropdown .active {
  background: var(--accent-gold, #f5a623);
  color: #111;
  -webkit-text-fill-color: #111;
}

.ts-dropdown .option.selected {
  background: var(--accent-gold-muted, rgba(245,166,35,0.18));
  color: var(--text-primary, #F0F6FC);
  -webkit-text-fill-color: var(--text-primary, #F0F6FC);
}

.ts-dropdown .no-results {
  color: var(--text-muted, #8B949E);
  -webkit-text-fill-color: var(--text-muted, #8B949E);
  font-style: italic;
}

/* "Showing N of M" / "Loading more…" footer row for paginated player search.
   A sticky, muted strip so the user always sees the running total and that
   more matches load on scroll (nothing hidden). */
.ts-dropdown .ts-more-info {
  position: sticky;
  bottom: 0;
  padding: 6px 12px;
  font-size: 0.8rem;
  font-style: italic;
  text-align: center;
  color: var(--text-muted, #8B949E);
  -webkit-text-fill-color: var(--text-muted, #8B949E);
  background: var(--surface-2, #161B22);
  border-top: 1px solid var(--border-subtle, rgba(240,246,252,0.10));
}

/* The virtual_scroll plugin tags this row with the `option` class +
   data-selectable (so keyboard nav can trigger the next fetch), which pulls in
   tom-select.css's `.ts-dropdown [data-selectable].option { cursor: pointer }`
   (specificity 0,3,0) and the gold `.option:hover`. The strip is NOT a
   clickable link — it only reports progress — so override both with a selector
   that out-specifies those (0,4,0 / 0,4,1). */
.ts-dropdown .ts-more-info.option[data-selectable] {
  cursor: default;
}

.ts-dropdown .ts-more-info.option[data-selectable]:hover,
.ts-dropdown .ts-more-info.option[data-selectable].active {
  background: var(--surface-2, #161B22);
  color: var(--text-muted, #8B949E);
  -webkit-text-fill-color: var(--text-muted, #8B949E);
}

body.light-mode .ts-dropdown .ts-more-info {
  color: #64748b;
  -webkit-text-fill-color: #64748b;
  background: #f8fafc;
  border-top-color: #e2e8f0;
}

body.light-mode .ts-dropdown .ts-more-info.option[data-selectable]:hover,
body.light-mode .ts-dropdown .ts-more-info.option[data-selectable].active {
  color: #64748b;
  -webkit-text-fill-color: #64748b;
  background: #f8fafc;
}

.ts-dropdown [data-selectable] .highlight {
  background: var(--accent-gold-muted, rgba(245,166,35,0.30));
  color: var(--text-primary, #F0F6FC);
  -webkit-text-fill-color: var(--text-primary, #F0F6FC);
}

.ts-dropdown .spinner::after {
  border-color: var(--accent-gold, #f5a623) transparent var(--accent-gold, #f5a623) transparent;
}

/* The dropdown-header close (X) button — used by the
 * dropdown_header plugin. */
.ts-wrapper .dropdown-header-close {
  color: var(--text-secondary, #C9D1D9);
  -webkit-text-fill-color: var(--text-secondary, #C9D1D9);
}

.ts-wrapper .dropdown-header-close:hover {
  color: var(--text-primary, #F0F6FC);
  -webkit-text-fill-color: var(--text-primary, #F0F6FC);
}

/* ─── Player composite row: flag + name ─────────────────────────────── */

.ts-player-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ts-player-row .ts-flag {
  font-size: 1.05em;
  line-height: 1;
}

/* ─── Flag-prefixed rows (data-ts-flags selects) ────────────────────────
 * Country flag + label, used in both the closed control item and the
 * dropdown options. */
.ts-flag-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.ts-flag-row .ts-flag {
  flex-shrink: 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.ts-flag-row .ts-flag img.emoji {
  height: 1.05em;
  width: auto;
  vertical-align: middle;
}

/* ─── Code + name rows (data-ts-names) ───────────────────────────────────
 * A short code in bold with its name beside it: the defensive positions.
 * The list opens wider than the narrow box it belongs to, so the name fits. */
.ts-dropdown--names {
  min-width: 16rem;
}

.ts-name-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}

.ts-name-row__code {
  flex-shrink: 0;
  min-width: 2.8em;
  font-weight: 700;
}

.ts-name-row__name {
  color: var(--text-muted, inherit);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Wide filter select (.filter-select--wide) ─────────────────────────
 * Tom Select copies the original <select>'s classes onto both the wrapper
 * and the (body-attached) dropdown, so this sizes the control and the
 * popup consistently. `flex` gives the field a constant width whether it's
 * focused/editing or not — the field no longer shrinks to its content.
 * Mobile-first: it fills the row and wraps under the label on narrow
 * screens (min-width:0 lets it shrink below the flex-basis). */
.ts-wrapper.filter-select--wide {
  flex: 1 1 22rem;
  min-width: 0;
  max-width: 34rem;
}

.dc-player-composite {
  display: contents;
}

/* ─── Light mode ────────────────────────────────────────────────────── */

body.light-mode .ts-wrapper.single .ts-control,
body.light-mode .ts-wrapper.multi .ts-control {
  background: #fff;
  border-color: #d0d5dd;
  color: #111;
}

body.light-mode .ts-wrapper .ts-control .item,
body.light-mode .ts-wrapper .ts-control > input {
  color: #111;
  -webkit-text-fill-color: #111;
  caret-color: #111;
}

body.light-mode .ts-wrapper .ts-control > input::placeholder {
  color: #64748b;
  -webkit-text-fill-color: #64748b;
}

body.light-mode .ts-dropdown {
  background: #fff;
  color: #111;
  border-color: #d0d5dd;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}

body.light-mode .ts-dropdown .option,
body.light-mode .ts-dropdown .no-results,
body.light-mode .ts-dropdown .create {
  color: #111;
  -webkit-text-fill-color: #111;
}

body.light-mode .ts-dropdown .optgroup-header {
  color: #475569;
  -webkit-text-fill-color: #475569;
  background: #f1f5f9;
}

body.light-mode .ts-dropdown .option:hover,
body.light-mode .ts-dropdown .active {
  background: var(--accent-gold, #f5a623);
  color: #111;
  -webkit-text-fill-color: #111;
}

body.light-mode .ts-dropdown .no-results {
  color: #64748b;
  -webkit-text-fill-color: #64748b;
}