/* Value Finder: soft-vs-sharp odds scanner. The panel itself reuses the
   .expert-panel layout (see templates/components/filters.html); this file
   only needs to style the results table, since it's the one panel here
   that renders its own list instead of feeding into the main table. */

/* Market/Soft bookie/Sharp bookie now use the app's custom-select widget
   (see custom-select.js) instead of a plain native <select> -- same as
   Model/Bookmaker in the main filter bar -- because the native dropdown's
   OPEN option list is OS-rendered on Windows/Chrome and CSS on <option>
   can't reliably control it (inconsistent background between hover/focus/
   idle, sometimes light despite the !important dark override elsewhere in
   this app). Only Min % higher stays a plain <input>, styled to match. */
#vf-min-pct, #vf-team {
  font: inherit;
  color: #f3f5f7 !important;
  background: #11181e !important;
  border: 1px solid #465661 !important;
  border-radius: 7px;
  padding: 5px 8px;
  box-sizing: border-box;
}
#vf-min-pct { width: 70px; }
#vf-team { width: 160px; }
#vf-min-pct:hover, #vf-min-pct:focus-visible,
#vf-team:hover, #vf-team:focus-visible {
  background: linear-gradient(90deg, rgba(34, 197, 94, .22), rgba(34, 197, 94, .03)) !important;
  border-color: rgba(34, 197, 94, .45) !important;
  outline: none;
}

#vf-results {
  margin-top: 6px;
  max-height: 420px;
  overflow-y: auto;
}
.vf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.vf-table th {
  position: sticky;
  top: 0;
  text-align: left;
  padding: 6px 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.vf-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  color: var(--ink);
}
.vf-table tr:last-child td { border-bottom: none; }
/* !important on every one of these -- .vf-table td above is a class+tag
   selector, which outranks a bare single class in specificity regardless
   of source order, so without it every one of these silently loses back
   to the base var(--ink). Same class of bug as the global button/input/
   select !important rules elsewhere in this app. */
.vf-muted { color: var(--muted) !important; }
.vf-pct {
  color: #62d83b !important;
  font-weight: 700;
  white-space: nowrap;
}
/* Only reachable via a team search bypassing Min % higher -- the soft
   bookie is actually lower than the sharp reference here, i.e. no value
   at all, so green (which everywhere else in this app means "good/value")
   would be actively misleading. */
.vf-pct-negative { color: #ef4444 !important; }
/* Fixtures with a model calculation -- same blue as the Hit Rates % badge
   (see hit-rates.css .hit-rate-badge) -- and their kickoff cell doubles as
   a mark/unmark toggle. Only the date text turns yellow when marked, not
   the whole cell (unlike the main table's td.cell-marked, which fills the
   cell background -- too heavy for this compact list). */
.vf-team-calculated { color: #38bdf8 !important; font-weight: 600; }
.vf-table td.vf-kickoff-clickable { cursor: pointer; }
.vf-table td.vf-cell-marked {
  color: #f1c40f !important;
  font-weight: 600;
}
.vf-empty { margin-top: 10px; color: var(--muted); font-size: 13px; }
.vf-truncated { margin-top: 8px; color: var(--muted); font-size: 12px; }
/* League line under the team names, same look as the main Predictions
   table's .league/.league-search-trigger -- not reusing that rule directly
   since it's scoped to .data-table, and !important here beats .vf-table td
   for the same specificity reason as .vf-muted/.vf-pct above. */
.vf-league {
  font-size: 11px;
  color: var(--muted) !important;
  margin-top: 2px;
}
/* Fair column: the active model's badge sits directly above the odds
   figure, same label-line-over-value-line shape as the Soft/Sharp bookie
   columns next to it, so the number lines up with theirs instead of
   floating below a whole block of badges. The other 7 models flank left
   (4) and right (3) in a 2-wide grid each, so every model stays clickable
   without pushing the number off-center. */
/* !important on both -- .vf-table th/.vf-table td (class+tag) outrank a
   bare single class regardless of source order, same specificity trap as
   .vf-muted/.vf-pct above: without it these silently lose back to
   .vf-table th/td's own text-align: left. */
.vf-fair-head { text-align: center !important; }
.vf-fair-cell { text-align: center !important; }
.vf-fair-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* .marked-model-badges (app.bundle.css) also sets display:flex and
   margin-top on this element at equal specificity -- !important here
   avoids depending on stylesheet load order to win, same reasoning as
   .vf-muted/.vf-pct above. Both flanks get the same fixed width regardless
   of which labels land in each (4 left vs. 3 right, and label length
   varies by model) -- otherwise the two sides' natural content widths
   differ, which visually drags the center off from the "Fair" header
   above it even though the header itself is centered in its own cell. */
.vf-fair-flank {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 152px;
  align-content: center;
  gap: 3px !important;
  margin: 0 !important;
}
.vf-fair-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.vf-fair-value { font-weight: 700; }
@media (max-width: 700px) {
  .vf-table { display: block; overflow-x: auto; }
}