/**
 * search.css - styles for search.php (Player & Goalie Search).
 *
 * NEW FILE, not a modification of theme.css/base.css. Class names are new
 * and feature-scoped (search-*); confirmed this session (bootstrap-
 * integration pass) to have zero collisions against the real theme.css.
 *
 * DEAD CODE NOTE (wiring-pass session): search.php's Table view now uses
 * comp-stat-table.php's stat_table_render(), which emits
 * .divTablesorter table.rownums.sortable - already fully styled by
 * theme.css. The ".search-results-table" rules in the Table view section
 * below are no longer referenced by any markup and can be deleted next
 * time this file is edited; left in place this pass to keep the diff
 * focused on the fixes that were actually needed.
 *
 * Also flagged (non-mandatory, from the bootstrap-integration diagnostic):
 * theme.css has an existing .left-sidebar-grid two-column layout (sidebar
 * + main-content) used by the homepage - a candidate base for
 * .search-layout below instead of this from-scratch grid, worth
 * evaluating next time this file is edited.
 *
 * Responsive approach actually implemented (simpler than the original
 * off-canvas-drawer pitch from the design-approval round, due to session
 * time - flagged as a legitimate scope-down, not an oversight): the filter
 * sidebar stacks above the results as a full-width block below 900px,
 * rather than becoming a slide-out drawer. No JS required for this either
 * way. A true off-canvas drawer remains a reasonable phase-2 enhancement.
 *
 * UX REFINEMENT ROUND 2:
 *   - Item 1 REAL FIX: .search-cards-grid and .search-table-wrapper never
 *     had a [hidden]{display:none} guard - the exact same bug class as
 *     .search-card-ratings below (which DID get one last round), just
 *     missed on these two. `display:grid`/default block from the class
 *     beats the UA [hidden] rule every time; the JS toggle logic was
 *     always correct.
 *   - Item 7 FIX: .search-cards-grid now sets align-items:start so an
 *     expanded card's taller row doesn't stretch its row-siblings to match
 *     (that stretch is what was rendering as "empty space" under the
 *     other cards in the same row - only ONE card was ever actually
 *     expanded, the JS was already scoped correctly).
 *   - Items 3/4/6: card top row no longer competes with the quick-view
 *     button for width (button moved to the footer) - name truncation
 *     removed in favor of wrapping, min card width increased, pills use
 *     the real Roster Editor colours (sampled from a reference screenshot
 *     this round: C #4B82BC, W #33A49A, D #CB792F, G #9057F0, solid fill +
 *     white text, fully rounded - still not sourced from the real CSS
 *     file, which remains unshared, so treat as closely-matched rather
 *     than pixel-exact).
 *   - Item 2: .search-kind-tabs (Skaters/Goalies).
 *   - Item 9: .search-expand-all-btn.
 */

.search-page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
}

/* ── Quick Find ────────────────────────────────────────────────── */

.search-quick-find {
    position: relative;
    max-width: 420px;
    margin-bottom: 1.5rem;
}

.search-quick-find label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.search-quick-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #999;
    border-radius: 4px;
}

.search-quick-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.search-quick-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #eee;
}

.search-quick-result:hover,
.search-quick-result:focus {
    background: #f0f0f0;
}

.search-quick-result-identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

.search-quick-result-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-quick-result-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.2rem;
    flex: 0 0 auto;
}

/* Smaller than the card pills (.rostercard-pill's own base size) - this
   list is denser and the pill is secondary information here. */
.search-quick-result-pills .rostercard-pill {
    font-size: 0.6rem;
    padding: 0.1rem 0.35rem;
}

.search-quick-result-team {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: #555;
}

.search-quick-result-logo {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
}

.search-quick-empty {
    padding: 0.5rem 0.75rem;
    color: #777;
    font-style: italic;
}

/* ── Layout ─────────────────────────────────────────────────────── */

.search-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.search-results {
    /* ROUND 3 FIX (item 2): CSS Grid items default to min-width:auto, which
       means they refuse to shrink below their CONTENT's intrinsic width -
       a wide table inside this column was growing the grid track itself
       (and with it the whole page) instead of being clipped, so the page
       scrolled horizontally and .divTablesorter's own overflow:scroll
       below never got the chance to engage (there was nothing to
       overflow WITHIN, since its parent had already grown to fit).
       min-width:0 is the standard fix - it lets this column actually
       respect the 1fr track width computed above. */
    min-width: 0;
}

@media (max-width: 900px) {
    .search-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Kind tabs (Skaters / Goalies) ─────────────────────────────────
   ROUND 5 (item 2): no longer custom-styled here. The tabs are real
   submit buttons (form="search-filters-form") wrapped in the sitewide
   .lnvhvsubmenu/.submenuwrapper/.navlink markup (theme.css) - the exact
   same mechanism the Stats page's LIGUE PRO/FARM and MENEURS/JOUEURS/
   GARDIENS tab bars use (boxscore.php already establishes the tag-
   agnostic <div class="lnvhvsubmenu"> variant this reuses).

   ROUND 6 (real bug found and fixed): theme.css's .navlink rules were
   written assuming an <a> element, which is what every other use of
   .navlink on the site is. <a> tags have zero native browser styling
   (no border, transparent background, appearance:none by default) -
   so theme.css never needed to explicitly reset those. A <button>
   element (needed here for the real form submission) carries its own
   native UA-stylesheet chrome on top of whatever classes it has:
   appearance:auto, a 2px outset border on all four sides, and a grey
   "buttonface" background - CONFIRMED via computed-style inspection in
   a real browser (border-top/left/right: 2px outset rgb(0,0,0);
   background-color: rgb(239,239,239) on the inactive tab; appearance:
   auto). This is exactly the "boxed button" look reported - font-size,
   font-weight, uppercase, the border-BOTTOM colour/width, and the
   active tab's white background were ALL already rendering correctly
   (theme.css's !important on border-bottom already wins the cascade
   regardless of element type), so only the browser's own default
   chrome needed resetting - theme.css itself needed no changes. */

.submenuwrapper button.navlink {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none;
    /* ROUND 7 FIX (underline missing on the live site): round 6 used the
       `border: 0` SHORTHAND here, which zeroes ALL FOUR sides including
       border-bottom. That was only safe if theme.css declares its
       .navlink border-bottom with !important (true in the copy of
       theme.css uploaded to this project, but the live site's rendering
       proves the live theme.css does not - the copy here is several
       sessions old). Resetting ONLY the three sides a native <button>
       adds means search.css never touches border-bottom at all: the
       active/inactive underline is governed 100% by theme.css exactly
       as it is for the Stats page's <a> tabs, regardless of which
       theme.css version is live. */
    border-top: 0;
    border-left: 0;
    border-right: 0;
    outline: none;
    font-family: inherit;
    line-height: inherit;
    /* ROUND 7 FIX (oversized tab row on the live site): round 6 forced
       content-box, calibrated against a harness where base.css is
       absent (never uploaded - it 404s there), so reference anchors
       were content-box. If the live base.css applies the common global
       border-box reset, live anchors are border-box and forcing
       content-box makes this button ~32px taller than its row - which
       matches the stray vertical gap in the reported screenshot.
       `inherit` is correct under EVERY scenario: whatever box-sizing
       the page's stylesheets give the anchors' context, the button
       picks up the same. */
    box-sizing: inherit;
}

.search-page .lnvhvsubmenu {
    /* ROUND 6 (item 4): more breathing room between the H1 and the tab
       bar, matching the Stats page's visual rhythm. */
    margin-top: 1.5rem;
    margin-bottom: 1.25rem;
}

/* ── Filter panel ───────────────────────────────────────────────── */

.search-filters {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 1rem;
}

@media (max-width: 900px) {
    .search-filters {
        position: static;
    }
}

.search-filter-group {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.75rem 1rem 1rem;
    margin: 0;
}

.search-filter-group legend {
    font-weight: 700;
    padding: 0 0.4rem;
}

.search-filter-group label {
    display: block;
    font-size: 0.85rem;
    margin-top: 0.6rem;
    margin-bottom: 0.2rem;
}

.search-select,
.search-number,
.search-text {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.5rem;
    border: 1px solid #bbb;
    border-radius: 4px;
    font-size: 0.9rem;
}

.search-position-group {
    border: none;
    padding: 0;
    margin-top: 0.6rem;
}

.search-position-group legend {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0;
}

.search-checkbox-inline {
    display: inline-flex !important;
    align-items: center;
    gap: 0.25rem;
    margin-right: 0.75rem;
    font-size: 0.85rem !important;
    font-weight: normal;
}

.search-checkbox {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    font-weight: normal;
}

.search-range-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.search-range-label {
    flex: 0 0 90px;
    font-size: 0.85rem;
}

.search-range-row .search-number {
    width: 0;
    flex: 1 1 auto;
}

.search-filter-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.25rem;
}

.search-submit-button {
    flex: 1;
    padding: 0.6rem 1rem;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    background: #1a1a1a;
    color: #fff;
    cursor: pointer;
}

.search-submit-button:hover {
    background: #333;
}

.search-reset-link {
    font-size: 0.85rem;
    color: #666;
}

/* ── Results header / view toggle ──────────────────────────────── */

.search-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.search-results-count {
    font-weight: 600;
}

.search-view-toggle {
    display: inline-flex;
    border: 1px solid #999;
    border-radius: 4px;
    overflow: hidden;
}

.search-view-button {
    padding: 0.4rem 1rem;
    border: none;
    background: #fff;
    cursor: pointer;
    font-size: 0.9rem;
}

.search-view-button + .search-view-button {
    border-left: 1px solid #999;
}

.search-view-button[aria-pressed="true"] {
    background: #1a1a1a;
    color: #fff;
}

/* ── Expand all ratings (item 9) ─────────────────────────────────── */

.search-expand-all-btn {
    padding: 0.4rem 0.9rem;
    border: 1px solid #999;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 0.85rem;
    cursor: pointer;
}

.search-expand-all-btn:hover {
    background: #f0f0f0;
}

.search-expand-all-btn[aria-pressed="true"] {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

.search-no-results {
    padding: 2rem 1rem;
    text-align: center;
    color: #777;
}

/* ── Card sort dropdown (results header) ───────────────────────── */

.search-card-sort-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #555;
}

.search-card-sort-wrap .search-select {
    width: auto;
    min-width: 8rem;
}

/* ── Card grid ──────────────────────────────────────────────────── */

.search-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 0.9rem;
    /* Item 7: default grid item stretch made every card in an expanded
       card's ROW match its taller height, showing as blank space under
       the shorter siblings - only the clicked card's panel was ever
       actually opened, this was purely a stretch artifact. */
    align-items: start;
}

.search-cards-grid[hidden] {
    /* Item 1's real root cause: `display:grid` above beats the UA
       [hidden] rule exactly like .search-card-ratings[hidden] does below -
       this sibling and .search-table-wrapper[hidden] were missed when
       that guard was added last round. */
    display: none;
}

.search-result-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* ── Condensed card top row: photo left, name over pills right ──── */

.search-card-top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

/* Size override for the canonical player-page mugshot markup inside a
   card (theme.css provides the base .lnvhvplayermugshot-* styles). */
.search-card-photo {
    flex: 0 0 auto;
    display: block;
    text-decoration: none;
}

.search-result-card .lnvhvplayermugshot-container {
    width: 52px;
    margin: 0;
}

.search-result-card .lnvhvplayermugshot-photo {
    width: 52px;
    height: 52px;
}

.search-result-card .lnvhvplayermugshot-name {
    display: none; /* the card renders its own name element */
}

.search-card-identity {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.search-card-name {
    margin: 0;
    font-size: 1rem;
    line-height: 1.25;
    /* Item 3: never truncate - long names wrap onto a second line instead
       of "...". Combined with the wider min card width above and the
       quick-view button no longer sharing this row, real-world names
       fit on one line in the overwhelming majority of cases; wrapping is
       the graceful fallback for the rest rather than a guess at "the
       longest possible name in the database". */
    overflow-wrap: break-word;
    word-break: break-word;
}

.search-card-name a {
    color: #1a1a2e;
    text-decoration: none;
}

.search-card-name a:hover {
    text-decoration: underline;
}

.search-card-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.3rem;
}

/* ── Position pills ─────────────────────────────────────────────────
   Markup contract shared with the Lines/Roster Editor (.rostercard-pill +
   data-pill family). COLOURS UPDATED this round: sampled directly from a
   Roster Editor screenshot the user provided (solid fill, white bold
   text, fully rounded - not the light-bg/dark-text style this block used
   before). Still not sourced from the real CSS file itself (never
   shared), so treat as closely visually matched rather than pixel-exact;
   reconcile again if the real stylesheet is ever uploaded. DELETE this
   block if pill styles are ever promoted to theme.css site-wide. */

.rostercard-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: #fff;
}

.rostercard-pill[data-pill="C"] { background: #4b82bc; }
.rostercard-pill[data-pill="W"] { background: #33a49a; }
.rostercard-pill[data-pill="D"] { background: #cb792f; }
.rostercard-pill[data-pill="G"] { background: #9057f0; }

/* ── Quick view button + in-card ratings grid ──────────────────── */

.search-card-quickview-btn {
    /* Item 3/7: now lives in the footer, right-aligned via margin-left:
       auto (flags stay left-aligned and wrap independently above it if
       the card gets narrow). Item 7 mobile fix: this is a much bigger,
       uncrowded tap target than the old cramped top-row button - the
       most likely cause of unreliable mobile taps - plus a comfortable
       min-height and touch-action:manipulation to remove any 300ms-tap /
       double-tap-zoom interference on mobile browsers. */
    margin-left: auto;
    flex: 0 0 auto;
    background: #f4f4f8;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.4rem 0.7rem;
    min-height: 2.2rem;
    font-size: 0.72rem;
    cursor: pointer;
    color: #444;
    touch-action: manipulation;
}

.search-card-quickview-btn:hover,
.search-card-quickview-btn[aria-expanded="true"] {
    background: #e8e8f0;
    border-color: #999;
}

.search-card-ratings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr));
    gap: 0.3rem 0.5rem;
    padding: 0.5rem;
    background: #f8f8fb;
    border: 1px solid #e4e4ec;
    border-radius: 6px;
}

.search-card-ratings[hidden] {
    display: none; /* grid display must not beat [hidden] — known bug class */
}

.search-card-rating {
    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
    font-size: 0.75rem;
}

.search-card-rating dt {
    color: #777;
    font-weight: 600;
}

.search-card-rating dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ── Card stats row ─────────────────────────────────────────────── */

.search-card-stats {
    display: flex;
    justify-content: space-between;
    margin: 0;
    gap: 0.4rem;
}

.search-card-stat dt {
    font-size: 0.68rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.03em;
}

.search-card-stat dd {
    margin: 0;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.search-card-stat-overall {
    font-weight: 700;
}

/* ── Card footer: team logo + FA badge + indicators ─────────────── */

.search-card-flags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    border-top: 1px solid #eee;
    padding-top: 0.5rem;
}

.search-card-team-logo {
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
}

.search-card-fa-badge {
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
}

.search-card-fa-ufa { background: #fde2e2; color: #8a1f1f; }
.search-card-fa-rfa { background: #fef3d6; color: #8a6a1f; }
.search-card-fa-elc { background: #e2ecfd; color: #1f4a8a; }

.search-card-flag {
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 600;
}

.search-card-flag-trade   { background: #e2f5e2; color: #1a5c1a; }
.search-card-flag-notrade { background: #f5e2e2; color: #7a1a1a; }
.search-card-flag-waiver  { background: #f5eee2; color: #7a5a1a; }
.search-card-flag-injury  { background: #f5d6d6; color: #8a1f1f; }

/* ── Table view ─────────────────────────────────────────────────── */
/* The table itself is rendered by comp-stat-table.php and styled by
   theme.css (.divTablesorter / .rownums.sortable) — only page-specific
   additions live here. The dead .search-results-table rules from the
   pre-refactor hand-rolled table were deleted this round. */

.search-table-wrapper {
    /* ROUND 3 FIX (item 2): this used to set overflow-x:auto, which created
       a SECOND horizontal-scroll container competing with .divTablesorter
       (theme.css) - the actual, already-correct, sitewide table-scroll
       wrapper that comp-stat-table.php's stat_table_render() already
       renders one level in. That wrapper already has overflow:scroll,
       max-height:600px, a sticky thead, and a sticky first column (see
       theme.css's .sortable rules) - EXACTLY the "match the Pro Team
       Lineup page" behavior asked for, because every page using
       stat_table_render() (this one included) shares that one mechanism.
       This element doesn't need its own scroll behavior at all now that
       .search-results has min-width:0 (see above) - it just needs to not
       let anything escape sideways, hence overflow:hidden as a safety
       clip rather than a second scrollbar. */
    overflow: hidden;
}

.search-table-wrapper[hidden] {
    display: none; /* same fix as .search-cards-grid[hidden] above */
}

.search-table-team {
    white-space: nowrap;
}

/* ── Advanced filters (rating min/max) ──────────────────────────── */

.search-advanced {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

.search-advanced summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    color: #333;
    padding: 0.25rem 0;
}

.search-advanced[open] summary {
    margin-bottom: 0.4rem;
}

.search-advanced-hint {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    color: #777;
}