/* public/css/match_history.css — views/match_history.php only */

.mh-wrap { padding: 2.5rem 0 3rem; }
.mh-wrap h1 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.mh-sub { color: var(--text-muted); font-size: 0.88rem; margin: 0 0 1.5rem; }

/* ── Summary strip — same "real numbers up top" language as the home page's
   .nv-stat-strip, just its own copy since this page loads match_history.css
   rather than home.css. ─────────────────────────────────────────────────── */
.mh-stat-strip {
    display: flex;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--arena-radius, 12px);
    background: var(--bg-secondary);
    box-shadow: 0 20px 44px -32px rgba(0, 0, 0, .5);
}
.mh-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 1rem clamp(14px, 2.4vw, 26px);
    border-left: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
}
.mh-stat:first-child { border-left: none; }
.mh-stat-val {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    font-weight: 900;
    color: var(--accent-primary);
    line-height: 1;
}
.mh-stat-lbl {
    font-size: 0.66rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .mh-stat-strip { flex-wrap: wrap; }
    .mh-stat { flex: 1 1 50%; border-left: none; border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08)); }
    .mh-stat:nth-child(-n+2) { border-top: none; }
}

/* ── Card wrapping the filter bar + list + pagination ────────────────── */
.mh-card { padding: 1.4rem 1.5rem 1.6rem; }

.mh-filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.mh-search-wrap {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0 14px;
}
.mh-search-wrap i { color: var(--text-muted); font-size: 0.85rem; }
.mh-search {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9rem;
    padding: 11px 0;
}
.mh-select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.86rem;
    padding: 0 14px;
    min-width: 160px;
}

.mh-sort-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1.25rem;
}
.mh-sort-lbl { font-size: 0.76rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.sort-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}
.sort-btn:hover { border-color: var(--arena-cyan-edge, rgba(0,217,255,0.4)); color: var(--text-primary); }
.sort-btn.active {
    background: var(--arena-cyan-soft, rgba(0,217,255,0.14));
    border-color: var(--arena-cyan-edge, rgba(0,217,255,0.4));
    color: var(--arena-cyan-text, var(--arena-cyan, var(--accent-primary)));
}

.mh-map-badge {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--arena-cyan-text, var(--arena-cyan, var(--accent-primary)));
    background: var(--arena-cyan-soft, rgba(0,217,255,0.1));
    border-radius: 6px;
    padding: 3px 8px;
    white-space: nowrap;
}
.mh-score-win { color: #4ade80; font-weight: 700; }
.mh-score-lose { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }

/* ── Match rows — a real map-photo panel on the right (arena.css's
   .mapbg-* classes for the image, on its own element), not a background
   blend across the whole row. ────────────────────────────────────────── */
.mh-list { display: flex; flex-direction: column; }
.mh-row {
    text-decoration: none;
    display: grid !important;
    grid-template-columns: 64px 100px 1fr auto 100px 120px;
    align-items: stretch;
    gap: 16px;
    min-height: 56px;
}
.mh-row-thumb {
    grid-column: 6;
    align-self: stretch;
    margin: -0.7rem -0.8rem -0.7rem 0;
    border-radius: 0 12px 12px 0;
    background-color: var(--bg-tertiary);
    background-image: var(--tile-img, none);
    background-size: cover;
    background-position: center;
}
.mh-row-id { color: var(--text-muted); font-size: 0.78rem; }
.mh-row-map { min-width: 0; }
.mh-row-teams {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    overflow: hidden;
}
.mh-winner { min-width: 0; flex-shrink: 1; color: var(--text-primary); font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-sep { color: var(--text-muted); font-size: 0.74rem; flex-shrink: 0; }
.mh-loser { min-width: 0; flex-shrink: 1; color: var(--text-secondary); font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-row-score, .mh-row-date {
    text-align: right;
    /* The right edge of a mapbg row is where the photo shows through
       brightest — a fixed text-shadow keeps these legible regardless of
       how light the underlying map screenshot is. */
    text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 1px 10px rgba(0,0,0,.6);
}
.mh-row-score { font-size: 0.9rem; }
.mh-row-date { color: var(--text-muted); font-size: 0.78rem; white-space: nowrap; }

@media (max-width: 700px) {
    .mh-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "map date"
            "teams teams"
            "id score";
        row-gap: 6px;
    }
    .mh-row-map { grid-area: map; min-width: 0; }
    .mh-row-date { grid-area: date; }
    .mh-row-teams { grid-area: teams; min-width: 0; }
    .mh-row-id { grid-area: id; }
    .mh-row-score { grid-area: score; }
    .mh-row-thumb { display: none; }
}
@media (max-width: 520px) {
    /* Full date ("Sep 16, 2026") and the score share one narrow track at
       this width — sharing forces the track to satisfy both, and the date
       (the less essential of the two here; every row opens into full match
       detail) loses out and clips. Drop it instead of showing a clipped
       date. */
    .mh-row {
        grid-template-columns: minmax(0, 1fr) minmax(46px, auto);
        grid-template-areas:
            "map score"
            "teams teams"
            "id id";
    }
    .mh-row-date { display: none; }
}

/* Empty state with an optional Clear filters action */
.mh-card .no-data { text-align: center; padding: 28px 12px; color: var(--text-muted); }
.mh-card .no-data p { margin: 0 0 12px; }
.mh-card .pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }