/* Company search: the box in the page header, its suggestions, and the
   results page. Uses the tokens from app.css. */

.top-row form.search { position: relative; flex: 1; max-width: 460px; min-width: 0; margin: 0 0 0 var(--space-2); display: block; }
form.search input { padding: 7px var(--space-3); font-size: var(--text-sm); }

.suggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-pop); overflow: hidden; min-width: min(420px, calc(100vw - 32px)); }
.sug { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); cursor: pointer; border-bottom: 1px solid var(--line); }
.sug:last-of-type { border-bottom: 0; }
.sug:hover { background: var(--bg); }
.sug.active { background: var(--bg); box-shadow: inset 3px 0 0 var(--accent); }
.sug .who-is { flex: 1; min-width: 0; }
.sug .nm { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug .sub { display: block; color: var(--muted); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sug .px { text-align: right; font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sug .px span { display: block; font-size: var(--text-xs); }
.suggest .foot { display: block; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); border-top: 1px solid var(--line); background: var(--bg); }
.suggest .foot.muted { color: var(--muted); }

.badge { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--good-bg); color: var(--fg);
  font-size: var(--text-xs); line-height: 1.6; white-space: nowrap; }

table.results .open-form { margin: 0; display: inline; }
button.link { background: none; padding: 0; color: var(--accent); text-align: left; font-weight: 600; }
button.link:hover { text-decoration: underline; }
.isin { display: block; }
.pager { display: flex; gap: var(--space-3); margin-top: var(--space-3); }
.pager .spacer { flex: 1; }

@media (max-width: 560px) {
  .top-row { flex-wrap: wrap; }
  .top-row form.search { order: 3; flex-basis: 100%; max-width: none; margin: 0; }
  .suggest { min-width: 0; }
}