/*
 * css/trainer-battle.css — the Trainer Battle page (`#players?focus=battle`, DECISIONS 195):
 * the search bar (name or trainer id) and the result cards with the one button that fits
 * (Challenge = live PvP, Battle offline = a copy of their team). Own file so the layout /
 * game sheets stay untouched; the "Players here" rows underneath keep their layout.css look.
 */

/* ---- search bar ------------------------------------------------------------- */
.tb-search { display: flex; flex-direction: column; gap: 8px; }
.tb-search-row { display: flex; gap: 8px; align-items: stretch; }
.tb-search-field { position: relative; flex: 1; min-width: 0; }
.tb-search-field svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.tb-search-field input {
  width: 100%; min-height: 44px; padding-left: 38px; font-size: 1rem; border-radius: var(--radius-sm);
}
.tb-search-row .btn { min-height: 44px; padding: 0 18px; }
.tb-search-hint { font-size: 0.78rem; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; }
.tb-search-hint .dot { margin-right: 5px; vertical-align: 1px; }

/* ---- results ----------------------------------------------------------------- */
/* Compact since DECISIONS 423 (owner, 26 September: "only the height"): one line for name, status
   and record, the party under it, the buttons in a row on the right; the note became their tooltip.
   About 80 px per card instead of 140. */
.tb-results { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.tb-card {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: var(--panel-border); border-radius: var(--radius); background: rgba(255, 255, 255, 0.04);
}
.tb-card.is-me { opacity: 0.75; }
.tb-card .avatar { flex: none; width: 40px; height: 40px; }
.tb-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tb-head { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-width: 0; }
.tb-name { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 0.95rem; min-width: 0; }
.tb-name a { color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-id { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); font-weight: 400; }
.tb-status { display: flex; flex: 1; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); flex-wrap: wrap; min-width: 0; }
.tb-status .dot.on { background: var(--success); box-shadow: 0 0 0 3px rgba(76, 217, 100, 0.2); }
.tb-status .dot.busy { background: var(--warning); box-shadow: 0 0 0 3px rgba(245, 180, 0, 0.2); }
.tb-status .dot.off { background: var(--muted); opacity: 0.6; }
.tb-record { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); white-space: nowrap; }

/* The party as a row of icons with the level underneath, like the six slots of a party menu. */
.tb-party { display: flex; gap: 2px; flex-wrap: wrap; }
.tb-mon { display: flex; flex-direction: column; align-items: center; width: 40px; }
.tb-mon-img { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }
.tb-mon-lv { font-size: 0.64rem; color: var(--muted); font-family: var(--font-mono); line-height: 1; }
.tb-note { margin-top: 2px; }

/* Right column (DECISIONS 441): the record on top, right-aligned against the card edge like every
   other card, the buttons under it. */
.tb-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; max-width: 46%; }
.tb-actions { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 6px; align-items: center; }
.tb-actions .btn { white-space: nowrap; }

/* Section head between the search and the "Players here" list. */
/* Owner (22 September): small grey caps read badly. A plain, solid section heading instead
   (no caps lock, like the rest of the game since DECISIONS 127). */
.tb-section-title { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.01em; color: var(--text); }
.tb-section-title svg { color: var(--accent-light, #f08c8c); }

/* ---- phone: record + buttons under the card, full width ------------------------ */
@media (max-width: 640px) {
  .tb-card { flex-wrap: wrap; align-items: flex-start; }
  .tb-side { width: 100%; max-width: none; }
  .tb-actions { width: 100%; justify-content: stretch; }
  .tb-actions .btn { flex: 1 1 auto; }
  .tb-search-row { flex-wrap: wrap; }
  .tb-search-row .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-status .dot { animation: none; }
}