/* assets/css/salary.css — salary_estimator.php. ADDITIVE: theme.css is not touched and wins for everything it already styles.
   The page uses the site's native building blocks as they are:
     tabs ............ header.lnvhvsubmenu > nav.submenuwrapper > a.navlink
     tables .......... .divTablesorter > table.sortable (sticky head + first column, stripes, sort arrow, .lnvhv-sortcol) + .lnvhv-reset-sort
     controls ........ .STHSSelect, .SubmitButton, .SubmitButtonSmall; section headings <h2> (.lnvhv-contentmain h2)
   This file only adds what the site has no class for: the lookup form + live-search list, the player summary / breakdown cards,
   the matrix cell states and the legend. Every class is prefixed sal-. Colours are the site's team-colour variables (RGB triplets set
   by inc-header.php), used exactly as theme.css / archive.css do. */

.sal-page {
  --sal-accent: rgb(var(--teamcolorprimary));
  --sal-line: rgb(210, 210, 210);           /* theme.css border grey */
  --sal-soft: #F0F1F2;                       /* theme.css stripe grey */
  --sal-muted: rgb(111, 111, 111);           /* theme.css muted text */
  max-width: 100%;
  padding-bottom: 24px;
}
.sal-page *, .sal-page *::before, .sal-page *::after { box-sizing: border-box; }
.sal-page a:focus-visible, .sal-page button:focus-visible, .sal-page select:focus-visible, .sal-page input:focus-visible { outline: 3px solid var(--sal-accent); outline-offset: 2px; }

.sal-intro { margin: 12px 10px 0; color: var(--sal-muted); max-width: 70ch; }
.sal-section { margin: 20px 0 0; }
.sal-section > h2 { margin-left: 10px; margin-right: 10px; }
.sal-sub { margin: 4px 10px 10px; color: var(--sal-muted); }
.sal-card .sal-sub { margin: 2px 0 8px; }

/* lookup form ----------------------------------------------------------------------- */
.sal-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: 8px 10px 0; }
.sal-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sal-field--grow { flex: 1 1 260px; }
.sal-field--btn { justify-content: flex-end; }
.sal-label { font-size: 12px; font-weight: 600; text-transform: uppercase; color: rgb(80, 80, 80); }
.sal-form .STHSSelect { min-width: 160px; max-width: 100%; }
.sal-input { width: 100%; padding: 8px; border: 1px solid #c0c1c2; background: #fff; font-family: 'Open Sans', sans-serif; font-size: 13px; }
.sal-input:focus { border: 1px solid royalblue; outline: none; }
.sal-combo { position: relative; }
.sal-listbox {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 0; list-style: none;
  max-height: 340px; overflow-y: auto; background: #fff; border: 1px solid var(--sal-line); border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
.sal-listbox[hidden] { display: none; }
.sal-listbox li { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--sal-soft); }
.sal-listbox li:last-child { border-bottom: 0; }
.sal-listbox li:hover, .sal-listbox li.is-active { background: rgba(var(--teamcolorprimary), .12); }
.sal-meta { font-size: .85rem; color: var(--sal-muted); }
.sal-hint { margin: 8px 10px 0; font-size: .85rem; color: var(--sal-muted); }
.sal-status { margin: 4px 10px 0; min-height: 1.2em; font-size: .9rem; }
.sal-notice { margin: 10px; padding: 10px 12px; border: 1px dashed var(--sal-line); border-radius: 4px; background: var(--sal-soft); }
.sal-resultlist { list-style: none; margin: 0 10px 10px; padding: 0; border: 1px solid var(--sal-line); border-radius: 4px; background: #fff; }
.sal-resultlist li + li { border-top: 1px solid var(--sal-soft); }
.sal-resultlist a { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; }
.sal-resultlist a:hover { background: rgba(var(--teamcolorprimary), .12); }

/* player cards ---------------------------------------------------------------------- */
.sal-cards { margin: 14px 0 0; }
.sal-empty { margin: 0 10px; padding: 14px; border: 1px dashed var(--sal-line); border-radius: 6px; color: var(--sal-muted); text-align: center; }
.sal-cardgrid { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 2.4fr); gap: 14px; margin: 0 10px; align-items: stretch; }
.sal-card { min-width: 0; border: 1px solid var(--sal-line); border-top: 4px solid var(--sal-accent); border-radius: 8px; padding: 14px 16px; background: #fff; }
.lnvhv-contentmain .sal-card h3 { margin: 0 0 6px; padding: 0; font-size: .95rem; color: var(--sal-muted); text-transform: uppercase; letter-spacing: .04em; }
.sal-player { margin: 0 0 10px; font-size: 1.45rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.sal-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin: 0; }
.sal-facts div { min-width: 0; }
.sal-facts dt { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--sal-muted); }
.sal-facts dd { margin: 0; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.sal-ovbadge { display: inline-block; min-width: 2.2em; padding: 0 8px; text-align: center; border-radius: 4px; background: var(--sal-accent); color: rgb(var(--teamcolortextonprimary, 255, 255, 255)); }
.sal-terms { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.sal-term { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--sal-line); border-radius: 6px; background: var(--sal-soft); }
.sal-term__len { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--sal-muted); }
.sal-term__amt { font-size: 1.2rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sal-term--na { background: #fff; border-style: dashed; }
.sal-term--na .sal-term__amt { color: var(--sal-muted); font-weight: 400; }
.sal-note { margin: 10px 0 0; font-size: .9rem; }
.sal-note--muted { color: var(--sal-muted); font-size: .8rem; }

/* matrix ---------------------------------------------------------------------------- */
.sal-matrix .lnvhvsubmenu { margin: 8px 0 0; }
.sal-page .divTablesorter { margin: 0 auto 12px; }
.sal-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sal-table th, .sal-table td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sal-table th.sal-ovh, .sal-table td.sal-ov { text-align: center; min-width: 56px; font-weight: 700; }
.sal-table td.sal-ov--elite { box-shadow: inset 4px 0 0 var(--sal-accent); }         /* OV band marker (elite 80-86 / mid 72-79 / low 60-71): an inset shadow, because theme.css zeroes cell borders */
.sal-table td.sal-ov--mid   { box-shadow: inset 4px 0 0 rgba(var(--teamcolorprimary), .5); }
.sal-table td.sal-ov--low   { box-shadow: inset 4px 0 0 rgba(var(--teamcolorprimary), .22); }
.sal-table td.sal-na { color: var(--sal-muted); text-align: center; }
.sal-table td.sal-top { font-weight: 700; background-color: rgba(var(--teamcolorprimary), .14); }
.sal-table tr.sal-row--sel td { outline: 2px solid var(--sal-accent); outline-offset: -2px; background-color: rgba(var(--teamcolorprimary), .18) !important; font-weight: 700; }
.sal-flag { margin-left: 2px; color: var(--sal-muted); cursor: help; font-weight: 400; font-size: 11px; line-height: 0; vertical-align: super; }
.sal-tabletools { margin: 8px 10px 4px; text-align: right; }
.sal-legend { margin: 6px 10px; font-size: .85rem; color: var(--sal-muted); }
.sal-legend__top, .sal-legend__sel { display: inline-block; width: 14px; height: 14px; margin: 0 4px 0 10px; vertical-align: -2px; border-radius: 2px; }
.sal-legend__top { background: rgba(var(--teamcolorprimary), .14); border: 1px solid var(--sal-line); }
.sal-legend__sel { border: 2px solid var(--sal-accent); }
.sal-legend__top:first-child { margin-left: 0; }
.sal-source { margin: 4px 10px; font-size: .8rem; color: var(--sal-muted); }

/* phones ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .sal-cardgrid { grid-template-columns: 1fr; }
  .sal-form { gap: 10px; }
  .sal-field, .sal-field--grow { flex: 1 1 100%; }
  .sal-form .STHSSelect { width: 100%; }
  .sal-field--btn { flex: 0 0 auto; }
  .sal-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sal-term { padding: 10px; }
  .sal-term__amt { font-size: 1.1rem; }
  .sal-term:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .sal-table th.sal-ovh, .sal-table td.sal-ov { min-width: 48px; }
  .sal-player { font-size: 1.25rem; }
}