/* ==========================================================================
   team-stat-widget.css
   ========================================================================== */

.ts-widget {
    --ts-bg:             #ffffff;
    --ts-surface:        #f8f9fb;
    --ts-surface2:       #f1f5f9;
    --ts-border:         #e8eaed;
    --ts-text:           #111827;
    --ts-muted:          #6b7280;
    --ts-accent:         #2563eb;
    --ts-win:            #16a34a;
    --ts-draw:           #d97706;
    --ts-lose:           #dc2626;
    --ts-radius:         12px;
    --ts-tab-bar-bg:     #f1f5f9;
    --ts-tab-active-text:#2563eb;
    --ts-tab-active-bg:  #ffffff;
    --ts-tab-active-bd:  #2563eb;
    --ts-lg-active-bg:   #eff6ff;
    --ts-lg-active-bd:   #2563eb;
    --ts-team-active-bg: #eff6ff;
    --ts-team-active-bd: #2563eb;
    --ts-chart-bar:      #2563eb;
    --ts-chart-bar2:     #f59e0b;
    --ts-chart-grid:     #e8eaed;

    background:    var(--ts-bg);
    border-radius: var(--ts-radius);
    overflow:      hidden;
    color:         var(--ts-text);
}

/* ── Typography hooks ────────────────────────────────────────────────────── */
.ts-label   { color: var(--ts-muted); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.ts-value   { color: var(--ts-text);  font-size: 13px; font-weight: 600; }
.ts-big-num { font-size: 28px; font-weight: 700; line-height: 1; color: var(--ts-text); }
.ts-win-txt  { color: var(--ts-win)  !important; }
.ts-lose-txt { color: var(--ts-lose) !important; }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.ts-spinner { width:24px; height:24px; border:2px solid var(--ts-border); border-top-color:var(--ts-accent); border-radius:50%; animation:ts-spin .7s linear infinite; flex-shrink:0; }
@keyframes ts-spin { to { transform:rotate(360deg); } }
.ts-stat-loading { display:flex; align-items:center; justify-content:center; padding:36px; }
.ts-err-txt { color: var(--ts-lose); padding: 10px; }

/* ── Error ──────────────────────────────────────────────────────────────── */
.ts-error { padding:12px 20px; border-left:3px solid var(--ts-lose); background:color-mix(in srgb,var(--ts-lose) 8%,transparent); color:var(--ts-lose); font-size:13px; }

/* ── League Picker ──────────────────────────────────────────────────────── */
.ts-picker-section { padding:12px 20px; border-bottom:1px solid var(--ts-border); }

.ts-league-picker {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             8px;
}
.ts-league-picker .ts-picker-label { margin: 0; flex-shrink: 0; }

.ts-league-list { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }

.ts-league-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:  48px; height: 48px;
    padding: 8px;
    border:  1.5px solid var(--ts-border);
    border-radius: 8px;
    background: var(--ts-surface);
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .12s;
    flex-shrink: 0;
}
.ts-league-btn img { width:30px; height:30px; object-fit:contain; display:block; }
.ts-league-btn:hover      { border-color:var(--ts-lg-active-bd); background:var(--ts-lg-active-bg); }
.ts-league-btn.is-active  { border-color:var(--ts-lg-active-bd); background:var(--ts-lg-active-bg); transform:translateY(-1px); }

/* ── Team Grid ──────────────────────────────────────────────────────────── */
.ts-team-picker { padding:10px 20px; border-bottom:1px solid var(--ts-border); }
.ts-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 4px;
}
.ts-team-loading { grid-column:1/-1; display:flex; justify-content:center; padding:16px; }

.ts-team-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:  5px;
    border:   1.5px solid transparent;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    transition: border-color .15s, background .15s, transform .12s;
}
.ts-team-btn:hover     { border-color:var(--ts-team-active-bd); background:var(--ts-team-active-bg); }
.ts-team-btn.is-active { border-color:var(--ts-team-active-bd); background:var(--ts-team-active-bg); transform:translateY(-1px); }
.ts-team-logo-wrap { width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.ts-team-logo-wrap img { width:36px; height:36px; object-fit:contain; }

/* ── Stat Header ────────────────────────────────────────────────────────── */
.ts-header {
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; padding:14px 20px; border-bottom:1px solid var(--ts-border); flex-wrap:wrap;
}
.ts-header-left { display:flex; align-items:center; gap:12px; }
.ts-logo-wrap { width:48px; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ts-logo-wrap img { width:48px; height:48px; object-fit:contain; }
.ts-team-title  { font-size:15px; font-weight:700; margin-bottom:3px; }
.ts-header-sub  { display:flex; align-items:center; gap:5px; text-transform:none; letter-spacing:0; font-size:11px; }
.ts-lg-icon     { width:14px; height:14px; object-fit:contain; vertical-align:middle; }

.ts-kpi-row { display:flex; align-items:center; }
.ts-kpi     { display:flex; flex-direction:column; align-items:center; gap:2px; padding:0 14px; }
.ts-kpi-sep { width:1px; height:32px; background:var(--ts-border); }

/* ── WDL Strip ──────────────────────────────────────────────────────────── */
.ts-wdl-strip { padding:0 20px 10px; border-bottom:1px solid var(--ts-border); }
.ts-wdl-bar { display:flex; height:5px; border-radius:3px; overflow:hidden; gap:2px; margin:10px 0 6px; }
.ts-wdl-bar > div { height:100%; border-radius:3px; min-width:3px; transition:width .5s ease; }
.ts-wdl-legend { display:flex; gap:12px; align-items:center; }
.ts-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; vertical-align:middle; }

/* ══════════════════════════════════════════════════════════════════════════
   TAB BAR
   ══════════════════════════════════════════════════════════════════════════ */
.ts-tab-bar {
    display:         flex;
    background:      var(--ts-tab-bar-bg);
    border-bottom:   1px solid var(--ts-border);
}
.ts-tab-btn {
    flex:            1;
    padding:         10px 8px;
    border:          none;
    background:      transparent;
    color:           var(--ts-muted);
    font-size:       12px;
    font-weight:     600;
    text-transform:  uppercase;
    letter-spacing:  .05em;
    cursor:          pointer;
    border-bottom:   2px solid transparent;
    transition:      color .15s, border-color .15s, background .15s;
    white-space:     nowrap;
}
.ts-tab-btn:hover {
    color: var(--ts-tab-active-text);
    background: color-mix(in srgb, var(--ts-tab-active-bg) 50%, transparent);
}
.ts-tab-btn.is-active {
    color:            var(--ts-tab-active-text);
    background:       var(--ts-tab-active-bg);
    border-bottom-color: var(--ts-tab-active-bd);
}

/* ── Section ────────────────────────────────────────────────────────────── */
.ts-section { padding:14px 20px; border-bottom:1px solid var(--ts-border); }
.ts-section:last-child { border-bottom:none; }
.ts-section-notop { padding-top: 14px; }

/* ── Stat Table ─────────────────────────────────────────────────────────── */
.ts-table-head, .ts-stat-row {
    display: grid;
    grid-template-columns: 1fr 52px 52px 60px;
    align-items: center;
}
.ts-table-head { padding:0 0 4px; border-bottom:1px solid var(--ts-border); margin-bottom:2px; }
.ts-col-head  { text-align:center; }
.ts-col-total { text-align:right; }

.ts-stat-table { display:flex; flex-direction:column; }
.ts-stat-row {
    min-height: 38px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ts-border);
}
.ts-stat-row:last-child { border-bottom:none; }
.ts-stat-row:nth-child(odd) {
    background: var(--ts-surface);
    margin: 0 -20px; padding: 6px 20px;
}
.ts-row-lbl { text-transform:none; letter-spacing:0; font-size:12px; color:var(--ts-text); }
.ts-col-cell { text-align:center; }
.ts-col-cell.ts-col-total { text-align:right; font-weight:700; }

/* ── Goals Tab: KPI row ─────────────────────────────────────────────────── */
.ts-goals-kpi {
    display:         flex;
    align-items:     stretch;
    gap:             0;
    background:      var(--ts-surface);
    border:          1px solid var(--ts-border);
    border-radius:   10px;
    overflow:        hidden;
    margin-bottom:   16px;
}
.ts-goals-kpi-item {
    flex:       1;
    display:    flex;
    flex-direction: column;
    align-items: center;
    gap:        4px;
    padding:    16px 8px;
    text-align: center;
}
.ts-goals-kpi-divider { width:1px; background:var(--ts-border); flex-shrink:0; }

/* ── Goals Tab: Horizontal bars ─────────────────────────────────────────── */
.ts-goals-bars-section { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
.ts-goal-bar-row { display:flex; align-items:center; gap:10px; }
.ts-goal-bar-lbl { min-width: 96px; font-size:11px; text-align:right; flex-shrink:0; }
.ts-goal-bar-track { flex:1; height:8px; background:var(--ts-border); border-radius:4px; overflow:hidden; }
.ts-goal-bar-fill { height:100%; border-radius:4px; transition:width .5s ease; }
.ts-goal-bar-val  { min-width:24px; text-align:right; font-size:12px; font-weight:600; }

/* ── Records Tab ────────────────────────────────────────────────────────── */
.ts-records-label { display:block; margin-bottom:8px; }
.ts-record-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.ts-record-card {
    background: var(--ts-surface); border:1px solid var(--ts-border);
    border-radius: calc(var(--ts-radius)/2);
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 4px;
}
.ts-record-card .ts-value { font-size:18px; font-weight:700; }

.ts-streak-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
.ts-streak-card {
    border-radius: calc(var(--ts-radius)/2);
    padding: 12px 8px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    border: 1px solid var(--ts-border);
}
.ts-streak-win  { background:color-mix(in srgb,var(--ts-win)  8%,var(--ts-surface));  border-color:color-mix(in srgb,var(--ts-win)  25%,transparent); }
.ts-streak-draw { background:color-mix(in srgb,var(--ts-draw) 8%,var(--ts-surface));  border-color:color-mix(in srgb,var(--ts-draw) 25%,transparent); }
.ts-streak-lose { background:color-mix(in srgb,var(--ts-lose) 8%,var(--ts-surface));  border-color:color-mix(in srgb,var(--ts-lose) 25%,transparent); }

/* Penalty donut */
.ts-pen-row { display:flex; align-items:center; gap:16px; }
.ts-pen-donut-wrap { flex-shrink:0; }
.ts-pen-donut { width:80px; height:80px; }
.ts-pen-stats { flex:1; display:flex; flex-direction:column; gap:6px; }
.ts-pen-stat-row { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:1px solid var(--ts-border); }
.ts-pen-stat-row:last-child { border-bottom:none; }

/* ══════════════════════════════════════════════════════════════════════════
   GOALS BY MINUTE — AREA CHART
   ══════════════════════════════════════════════════════════════════════════ */
.ts-chart-section { }
.ts-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.ts-chart-svg-wrap {
    width: 100%;
    overflow: hidden;
}
.ts-area-svg {
    display: block;
    width: 100%;
    height: auto;        /* scales with viewBox */
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ts-league-btn         { width:40px; height:40px; padding:6px; }
    .ts-league-btn img     { width:24px; height:24px; }
    .ts-team-grid          { grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); }
    .ts-header             { flex-direction:column; align-items:flex-start; }
    .ts-kpi                { padding:0 10px; }
    .ts-table-head,
    .ts-stat-row           { grid-template-columns:1fr 42px 42px 48px; }
    .ts-record-grid        { grid-template-columns:1fr; }
    .ts-goals-kpi          { flex-wrap:wrap; }
    .ts-goals-kpi-item     { min-width:80px; }
    .ts-goal-bar-lbl       { min-width:72px; font-size:10px; }
    .ts-tab-btn            { font-size:10px; padding:9px 4px; }
}