/**
 * Top Stats Component — [top_stats] shortcode
 *
 * Layout:
 *   - Controls row: tab buttons (scrollable) + period toggle
 *   - Table: one row per match
 *
 * Table columns:
 *   League | Home | Home% [bar] | vs | [bar] Away% | Away | Odds | Bookmaker | Kickoff
 *
 * Tokens: --statsbet-* from base.css
 * Breakpoints: 768px (tablet), 479px (mobile)
 */


/* ========== Container ========== */

.statsbet-top-stats {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    font-family:    inherit;
}


/* ========== Controls Row (tabs + period) ========== */

.statsbet-top-stats__controls {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
    align-items: center;
}

.statsbet-top-stats__tabs {
    display:    flex;
    flex-wrap:  wrap;
    gap:        4px;
}

.statsbet-top-stats__tab {
    padding:       5px 10px;
    border:        1px solid var(--statsbet-border, #e0e0e0);
    border-radius: var(--statsbet-radius-sm, 4px);
    background:    var(--statsbet-bg, #fff);
    color:         var(--statsbet-text-light, #757575);
    font-size:     var(--statsbet-font-size-xs, 0.75rem);
    font-weight:   500;
    font-family:   inherit;
    line-height:   1.4;
    cursor:        pointer;
    transition:    all 150ms ease;
}

.statsbet-top-stats__tab:hover {
    border-color: var(--statsbet-primary, #1e88e5);
    color:        var(--statsbet-primary, #1e88e5);
}

.statsbet-top-stats__tab.active {
    background:   var(--statsbet-primary, #1e88e5);
    border-color: var(--statsbet-primary, #1e88e5);
    color:        #fff;
}

.statsbet-top-stats__period-toggle {
    display:       flex;
    border:        1px solid var(--statsbet-border, #e0e0e0);
    border-radius: var(--statsbet-radius-sm, 4px);
    overflow:      hidden;
}

.statsbet-top-stats__period-btn {
    padding:     4px 12px;
    border:      none;
    background:  var(--statsbet-bg, #fff);
    color:       var(--statsbet-text-light, #757575);
    font-size:   var(--statsbet-font-size-xs, 0.75rem);
    font-weight: 500;
    font-family: inherit;
    line-height: 1.4;
    cursor:      pointer;
    transition:  all 150ms ease;
}

.statsbet-top-stats__period-btn + .statsbet-top-stats__period-btn {
    border-left: 1px solid var(--statsbet-border, #e0e0e0);
}

.statsbet-top-stats__period-btn:hover {
    background: var(--statsbet-bg-hover, #f5f5f5);
}

.statsbet-top-stats__period-btn.active {
    background: var(--statsbet-primary, #1e88e5);
    color:      #fff;
}


/* ========== Table Wrapper ========== */

.statsbet-top-stats__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ========== Table ========== */

.statsbet-top-stats__table {
    width:           max-content;
    min-width:       100%;
    border-collapse: separate;
    border-spacing:  0;
    font-size:       var(--statsbet-font-size-sm, 0.875rem);
    border:          1px solid var(--statsbet-border, #e0e0e0);
    border-radius:   var(--statsbet-radius-md, 8px);
    overflow:        hidden;
}

.statsbet-top-stats__table thead th {
    padding:      8px 10px;
    background:   var(--statsbet-bg-alt, #fafafa);
    color:        var(--statsbet-text-light, #757575);
    font-size:    var(--statsbet-font-size-xs, 0.75rem);
    font-weight:  600;
    text-align:   left;
    white-space:  nowrap;
    border-bottom: 1px solid var(--statsbet-border, #e0e0e0);
}

.statsbet-top-stats__table tbody tr {
    transition: background 100ms ease;
}

.statsbet-top-stats__table tbody tr:hover {
    background: var(--statsbet-bg-hover, #f5f5f5);
}

.statsbet-top-stats__table tbody tr + tr td {
    border-top: 1px solid var(--statsbet-border, #e0e0e0);
}

.statsbet-top-stats__table td {
    padding:     8px 10px;
    white-space: nowrap;
    vertical-align: middle;
}


/* ========== Inner flex wrappers (keeps display:table-cell on td) ========== */

.statsbet-top-stats__cell {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    width:       100%;
}


/* ========== League Column ========== */

.statsbet-top-stats__league-logo {
    width:       16px;
    height:      16px;
    object-fit:  contain;
    flex-shrink: 0;
}

.statsbet-top-stats__league-name {
    color:         var(--statsbet-text-light, #757575);
    font-size:     var(--statsbet-font-size-xs, 0.75rem);
}


/* ========== Team Columns ========== */

.statsbet-top-stats__td-home {
    text-align: right;
}

.statsbet-top-stats__td-home .statsbet-top-stats__cell {
    justify-content: flex-end;
}

.statsbet-top-stats__team-logo {
    width:       20px;
    height:      20px;
    object-fit:  contain;
    flex-shrink: 0;
}

.statsbet-top-stats__team-name {
    font-weight:   600;
    color:         var(--statsbet-text, #212121);
}


/* ========== Bar Columns ========== */

.statsbet-top-stats__td-bar {
    min-width: 100px;
}

.statsbet-top-stats__td-bar--home .statsbet-top-stats__cell {
    justify-content: flex-end;
}

.statsbet-top-stats__bar-track {
    flex:          1;
    height:        8px;
    min-width:     40px;
    max-width:     80px;
    background:    var(--statsbet-border, #e0e0e0);
    border-radius: 4px;
    overflow:      hidden;
}

.statsbet-top-stats__bar {
    height:        100%;
    border-radius: 4px;
    transition:    width 0.3s ease;
}

.statsbet-top-stats__bar--home { background: var(--statsbet-primary, #1e88e5); }
.statsbet-top-stats__bar--away { background: var(--statsbet-error, #e53935);   }

.statsbet-top-stats__pct {
    font-weight: 700;
    min-width:   32px;
    font-size:   var(--statsbet-font-size-sm, 0.875rem);
}

.statsbet-top-stats__td-bar--home .statsbet-top-stats__pct { text-align: right; }
.statsbet-top-stats__td-bar--away .statsbet-top-stats__pct { text-align: left;  }

.statsbet-top-stats__pct--na {
    color:       var(--statsbet-text-muted, #9e9e9e);
    font-weight: 400;
    font-style:  italic;
}


/* ========== VS Column ========== */

.statsbet-top-stats__td-vs {
    text-align:     center;
    color:          var(--statsbet-text-muted, #9e9e9e);
    font-size:      var(--statsbet-font-size-xs, 0.75rem);
    font-weight:    500;
    text-transform: uppercase;
    min-width:      24px;
}


/* ========== Odds Column ========== */

.statsbet-top-stats__td-odds {
    font-weight: 700;
    text-align:  right;
    color:       var(--statsbet-primary, #1e88e5);
    white-space: nowrap;
}


/* ========== Bookmaker Column ========== */

.statsbet-top-stats__td-bookmaker {
    font-size:   var(--statsbet-font-size-xs, 0.75rem);
    color:       var(--statsbet-text-light, #757575);
    white-space: nowrap;
}

.statsbet-top-stats__bookmaker-logo {
    width:       16px;
    height:      16px;
    object-fit:  contain;
    flex-shrink: 0;
}


/* ========== Kickoff Column ========== */

.statsbet-top-stats__td-kickoff {
    color:     var(--statsbet-text-muted, #9e9e9e);
    font-size: var(--statsbet-font-size-xs, 0.75rem);
}


/* ========== Responsive: Tablet (<=768px) ========== */

@media (max-width: 768px) {
    .statsbet-top-stats__bar-track   { max-width: 50px;  }
    .statsbet-top-stats__td-bar      { min-width: 70px;  }
}


/* ========== Responsive: Mobile (<=479px) ========== */

@media (max-width: 479px) {
    .statsbet-top-stats__table {
        font-size: var(--statsbet-font-size-xs, 0.75rem);
    }

    .statsbet-top-stats__table td,
    .statsbet-top-stats__table th {
        padding: 6px 6px;
    }

    .statsbet-top-stats__bar-track   { max-width: 30px;  }
    .statsbet-top-stats__td-bar      { min-width: 50px;  }

    .statsbet-top-stats__team-logo {
        width:  16px;
        height: 16px;
    }

    .statsbet-top-stats__pct {
        font-size: 10px;
        min-width: 26px;
    }

    .statsbet-top-stats__bar-track {
        height: 6px;
    }
}