/*
 * Admin Hand History styles (list view + replay drill-down).
 *
 * Presentation reskin onto the admin
 * design system (kit `.card` / `.data-table` / `.badge` / `.field`, light
 * tokens). Behaviour unchanged.
 *
 * Loaded globally from index.html, so
 * everything here is scoped under `.main` / a `history-*` / `replay-*`
 * class. The only shared bit is the tiny `.pp-tabular` utility (also used
 * by views/tournament-history.js). Tournament History's `.tournament-*` /
 * stats blocks formerly lived here (dark dialect) and were moved, light-
 * reskinned, to views/tournament-history.css when that section got its
 * own stylesheet.
 */

/* ─── List view: page-head subtitle clamp ─────────────────────────── */
.main .page-head__subtitle {
    max-width: 70ch;
}

/* ─── Filter toolbar (kit .card) ──────────────────────────────────── */
.main .history-toolbar {
    margin-bottom: var(--space-base, 16px);
}
.main .history-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-base, 16px);
    align-items: end;
}
.main .history-filters .field {
    margin: 0;
    min-width: 0;
}
/* Datetime / search inputs + selects share an even height across the row. */
.main .history-filters .input,
.main .history-filters .select {
    width: 100%;
}
.main .history-toolbar__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm, 10px);
    margin-top: var(--space-base, 16px);
    padding-top: var(--space-base, 16px);
    border-top: 1px solid var(--color-border, #E4E7EC);
}
.main .history-toolbar__exports {
    display: flex;
    gap: var(--space-sm, 8px);
    flex-wrap: wrap;
    margin-left: auto;
}
.main .history-toolbar__exports .btn svg,
.main .page-head__actions .btn svg {
    margin-right: 6px;
    vertical-align: -3px;
}

/* ─── Hands table ─────────────────────────────────────────────────── */
/* Clickable rows: obvious hover + a chevron affordance that warms on hover
 * to signal "opens the step-by-step replay". */
.main .data-table--clickable tbody tr {
    cursor: pointer;
    transition: background 140ms ease;
}
.main .data-table--clickable tbody tr:hover {
    background: var(--surface-hover, #F9FAFB);
}
.main .history-table .history-num {
    text-align: right;
}
.main .history-subtext {
    font-size: 11px;
    margin-top: 2px;
}
/* Quiet mono hand-id pill. */
.main .history-serial {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-size: 12px;
    color: var(--color-text-secondary, #475467);
    background: var(--surface-sunken, #F4F5F7);
    border: 1px solid var(--color-border, #E4E7EC);
    border-radius: 6px;
    padding: 2px 7px;
    letter-spacing: 0.01em;
}
/* Replay chevron column — quiet at rest, accent on row hover. */
.main .history-cell-chevron {
    width: 32px;
    text-align: right;
    color: var(--color-text-muted, #98A2B3);
    transition: color 140ms ease, transform 140ms ease;
}
.main .history-cell-chevron svg {
    vertical-align: middle;
}
.main .data-table--clickable tbody tr:hover .history-cell-chevron {
    color: var(--color-accent, #B58A00);
    transform: translateX(2px);
}
/* Winner cell link in the list (quiet → accent on hover). */
.history-winner-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: color 140ms ease, border-color 140ms ease;
}
.history-winner-link:hover,
.history-winner-link:focus {
    color: var(--color-accent, #B58A00);
    border-bottom-color: currentColor;
    outline: none;
}

/* ─── Tournament-scope banner (callout-style, light) ──────────────── */
.main .history-scope-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-base, 12px);
    padding: 10px 14px;
    margin: 0 0 var(--space-base, 16px);
    border: 1px solid var(--color-border, #E4E7EC);
    border-left: 3px solid var(--color-accent, #F5C842);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-sunken, #F9FAFB);
    color: var(--color-text-secondary, #475467);
    font-size: 13px;
}

/* ─── Pagination ──────────────────────────────────────────────────── */
.main .history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-base, 16px);
    margin-top: var(--space-base, 16px);
    flex-wrap: wrap;
}
.main .history-pagination__label {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* ─── Export dialog helpers (inside .modal--light) ────────────────── */
.modal--light .history-export__estimate {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.modal--light .history-export__warning {
    margin-top: 4px;
}

/* ─── Player-embed dialog helpers (inside .modal--light) ──────────── */
.modal--light .history-embed__lead {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}
.modal--light .history-embed__snippet {
    margin: 0;
    max-height: 240px;
    white-space: pre-wrap;
    word-break: break-word;
}
.modal--light .history-embed__hint:empty {
    display: none;
}
.modal--light .history-embed__steps {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-secondary, #475467);
}
.modal--light .history-embed__steps li {
    margin-bottom: 4px;
}

/* ════════════════════════════════════════════════════════════════════
 * REPLAY DRILL-DOWN (history-replay.js) — retheme to the light content
 * palette. Mobile-first; the single 768px breakpoint downstacks the
 * 2-column grid (Owner Invariant 2 — 390px responsive).
 * ════════════════════════════════════════════════════════════════════ */
.replay-header {
    align-items: flex-start;
    gap: var(--space-base, 12px);
}
.replay-header .btn {
    flex-shrink: 0;
}
.replay-card-shell {
    padding: var(--space-base, 16px);
}
.replay-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-base, 12px) calc(var(--space-base, 12px) * 2);
    padding: var(--space-sm, 10px) var(--space-base, 14px);
    margin-bottom: var(--space-base, 16px);
    background: var(--surface-sunken, #F9FAFB);
    border: 1px solid var(--color-border, #E4E7EC);
    border-radius: var(--radius-md, 8px);
    font-size: 13px;
}
.replay-meta .muted {
    color: var(--color-text-muted, #667085);
}

/* ─── Replay layout grid ──────────────────────────────────────────── */
.replay-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: var(--space-base, 16px);
    align-items: start;
}
@media (max-width: 768px) {
    .replay-grid {
        grid-template-columns: 1fr;
    }
}
.replay-stage {
    display: flex;
    flex-direction: column;
    gap: var(--space-base, 12px);
    min-width: 0;
}
.replay-side {
    background: var(--surface-sunken, #F9FAFB);
    border: 1px solid var(--color-border, #E4E7EC);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-base, 12px);
    max-height: clamp(400px, 70vh, 720px);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
@media (max-width: 768px) {
    .replay-side {
        max-height: 360px;
    }
}
.replay-side__title {
    margin: 0 0 var(--space-sm, 8px);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text, #101828);
}
.replay-timeline-shell {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* ─── Pot indicator ────────────────────────────────────────────────── */
.replay-pot {
    text-align: center;
    font-size: clamp(15px, 4vw, 18px);
    font-weight: 700;
    padding: var(--space-sm, 10px);
    background: var(--surface-sunken, #F4F5F7);
    border: 1px solid var(--color-border, #E4E7EC);
    border-radius: var(--radius-md, 8px);
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text, #101828);
}

/* ─── Board cards ─────────────────────────────────────────────────── */
.replay-board {
    display: flex;
    justify-content: center;
    gap: clamp(4px, 1.5vw, 8px);
    padding: var(--space-sm, 8px) 0;
}
.replay-card {
    display: inline-block;
    border-radius: 4px;
    background: #1a1a1a;
    box-shadow: 0 1px 4px rgba(16, 24, 40, 0.18);
    object-fit: contain;
    flex-shrink: 0;
}
.replay-card--lg {
    width: clamp(38px, 11vw, 60px);
    height: clamp(54px, 16vw, 84px);
}
.replay-card--md {
    width: clamp(32px, 9vw, 48px);
    height: clamp(46px, 13vw, 68px);
}
.replay-card--sm {
    width: clamp(24px, 7vw, 36px);
    height: clamp(34px, 10vw, 50px);
}
.replay-card--back {
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.10),
            rgba(255, 255, 255, 0.10) 4px,
            rgba(255, 255, 255, 0.03) 4px,
            rgba(255, 255, 255, 0.03) 8px
        ),
        #344054;
    border: 1px solid #475467;
}

/* ─── Seats grid ──────────────────────────────────────────────────── */
.replay-seats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-sm, 8px);
}
@media (max-width: 480px) {
    .replay-seats {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}
.replay-seat {
    background: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #E4E7EC);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-sm, 10px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.05));
}
.replay-seat--folded {
    opacity: 0.5;
}
.replay-seat--all-in {
    border-color: var(--color-accent, #F5C842);
    box-shadow: 0 0 0 1px var(--color-accent, #F5C842) inset;
}
.replay-seat--winner {
    border-color: var(--color-success, #067647);
    background: rgba(6, 118, 71, 0.06);
    box-shadow: 0 0 0 1px var(--color-success, #067647) inset;
}
.replay-seat__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.replay-seat__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.replay-seat__avatar--ph {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-sunken, #EAECF0);
    flex-shrink: 0;
}
.replay-seat__id {
    flex: 1 1 auto;
    min-width: 0;
}
.replay-seat__name {
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    color: var(--color-text, #101828);
}
/* Winner badges next to name. Tier-coloured outline,
 * 18×18 inline beside the player name. */
.replay-seat__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.replay-seat__badges {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}
.replay-seat__badge {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 50%;
    border: 1.5px solid #16a34a;
    background: var(--color-surface, #FFFFFF);
    flex-shrink: 0;
}
.replay-seat__badge--medium { border-color: #2563eb; }
.replay-seat__badge--hard   { border-color: #9333ea; }
.replay-seat__badge--rare   { border-color: #d97706; }

/* Clickable seat name → /player/:uuid in new tab. */
.replay-seat__name--link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px dotted transparent;
    transition: border-color 120ms ease, color 120ms ease;
}
.replay-seat__name--link:hover,
.replay-seat__name--link:focus {
    color: var(--color-accent, #B58A00);
    border-bottom-color: currentColor;
    outline: none;
}
.replay-seat__chips {
    font-size: 11px;
    color: var(--color-text-muted, #667085);
    font-variant-numeric: tabular-nums;
}
.replay-seat__pos {
    background: var(--surface-sunken, #EAECF0);
    color: var(--color-text-secondary, #475467);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.replay-seat__cards {
    display: flex;
    gap: 4px;
    align-items: center;
    min-height: 36px;
}
.replay-seat__bet {
    font-size: 11px;
    color: var(--color-warning, #B54708);
    font-weight: 600;
}
.replay-seat__status {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #667085);
}

/* ─── Showdown summary ────────────────────────────────────────────── */
.replay-showdown {
    background: rgba(6, 118, 71, 0.06);
    border: 1px solid var(--color-success, #067647);
    border-radius: var(--radius-md, 8px);
    padding: var(--space-sm, 10px) var(--space-base, 12px);
}
.replay-showdown:empty {
    display: none;
}
.replay-showdown__title {
    margin: 0 0 var(--space-sm, 6px);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-success, #067647);
}
.replay-showdown__list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--color-text, #101828);
}
.replay-showdown__list li {
    margin-bottom: 2px;
}

/* ─── Step controls ──────────────────────────────────────────────── */
.replay-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm, 6px);
    padding-top: var(--space-sm, 10px);
    border-top: 1px solid var(--color-border, #E4E7EC);
}
.replay-controls__label {
    flex: 1 1 auto;
    text-align: center;
    font-size: 12px;
    color: var(--color-text-muted, #667085);
    font-weight: 600;
    min-width: 80px;
}
@media (max-width: 480px) {
    .replay-controls .btn {
        flex: 1 1 30%;
    }
    .replay-controls__label {
        flex: 1 1 100%;
        order: -1;
        margin-bottom: 4px;
    }
}

/* ─── Timeline list ──────────────────────────────────────────────── */
.replay-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
}
.replay-timeline__divider {
    margin: 8px 0 4px;
    padding: 4px 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted, #667085);
    border-bottom: 1px solid var(--color-border, #E4E7EC);
}
.replay-timeline__item {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s linear;
    color: var(--color-text, #101828);
}
.replay-timeline__item:hover {
    background: var(--surface-hover, #F2F4F7);
}
.replay-timeline__item--active {
    background: rgba(245, 200, 66, 0.18);
    box-shadow: inset 2px 0 0 var(--color-accent, #F5C842);
}
.replay-timeline__action {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.replay-timeline__pot {
    flex-shrink: 0;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.replay-timeline__street {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-accent, #B58A00);
}

/* ─── Shared tabular-numeral utility ──────────────────────────────── */
/* Used by both history.js and tournament-history.js; the latter's
 * `.tournament-*` / stats blocks moved to views/tournament-history.css
 * when Tournament History got its own stylesheet — only this tiny generic
 * util stays shared here. */
.pp-tabular {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .main .history-scope-banner {
        align-items: stretch;
        flex-direction: column;
    }
}