/*
 * 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);
  max-height: min(60vh, 30rem);
  overflow-y: auto;
}

.ts-dropdown .ts-dropdown-content {
  max-height: none;
}

.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;
}

.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;
}

.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;
}