/* ZLeague Tournaments — Frontend Styles (injected via plugin for CPT pages) */

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
    --zl-bg:        #0a0a0f;
    --zl-card:      #161b22;
    --zl-border:    #30363d;
    --zl-primary:   #58a6ff;
    --zl-accent:    #ff6b6b;
    --zl-green:     #3fb950;
    --zl-yellow:    #d29922;
    --zl-text:      #e6edf3;
    --zl-muted:     #8b949e;
    --zl-radius:    8px;
    --zl-transition: .2s ease;
}

/* ── Tournament Card ──────────────────────────────────────────────────────── */
.zl-torneo-card {
    background: var(--zl-card);
    border: 1px solid var(--zl-border);
    border-radius: var(--zl-radius);
    overflow: hidden;
    transition: transform var(--zl-transition), box-shadow var(--zl-transition);
    display: flex;
    flex-direction: column;
}
.zl-torneo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(88,166,255,.15);
}
.zl-torneo-card__thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}
.zl-torneo-card__thumb-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: var(--zl-primary);
}
.zl-torneo-card__body {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.zl-torneo-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--zl-text);
    margin: 0 0 8px;
    line-height: 1.3;
}
.zl-torneo-card__title a { color: inherit; text-decoration: none; }
.zl-torneo-card__title a:hover { color: var(--zl-primary); }
.zl-torneo-card__meta {
    font-size: 12px;
    color: var(--zl-muted);
    margin: 0 0 12px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.zl-torneo-card__meta span { display: flex; align-items: center; gap: 4px; }
.zl-torneo-card__footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.zl-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.zl-badge--inscripciones { background: rgba(88,166,255,.15); color: var(--zl-primary); }
.zl-badge--grupos        { background: rgba(63,185,80,.15);  color: var(--zl-green); }
.zl-badge--brackets      { background: rgba(210,153,34,.15); color: var(--zl-yellow); }
.zl-badge--finalizado    { background: rgba(255,107,107,.15); color: var(--zl-accent); }
.zl-badge--default       { background: rgba(139,148,158,.15); color: var(--zl-muted); }

/* ── Groups Table ─────────────────────────────────────────────────────────── */
.zl-tabla-grupos {
    display: grid;
    gap: 20px;
}
.zl-grupo-wrap {
    background: var(--zl-card);
    border: 1px solid var(--zl-border);
    border-radius: var(--zl-radius);
    overflow: hidden;
}
.zl-grupo-header {
    background: rgba(88,166,255,.08);
    padding: 10px 16px;
    border-bottom: 1px solid var(--zl-border);
    font-weight: 700;
    color: var(--zl-primary);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.zl-standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--zl-text);
}
.zl-standings-table thead th {
    background: rgba(255,255,255,.03);
    padding: 8px 10px;
    text-align: center;
    color: var(--zl-muted);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--zl-border);
}
.zl-standings-table thead th:first-child,
.zl-standings-table thead th:nth-child(2) { text-align: left; }
.zl-standings-table tbody td {
    padding: 9px 10px;
    text-align: center;
    border-bottom: 1px solid rgba(48,54,61,.5);
}
.zl-standings-table tbody td:first-child { text-align: center; color: var(--zl-muted); font-weight: 600; }
.zl-standings-table tbody td:nth-child(2) {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}
.zl-standings-table tbody tr:hover { background: rgba(88,166,255,.04); }
.zl-standings-table tbody tr:last-child td { border-bottom: none; }
.zl-row-clasifica td { background: rgba(63,185,80,.06); }
.zl-pts-cell { font-weight: 700 !important; color: var(--zl-primary) !important; }

/* ── Bracket Tree ─────────────────────────────────────────────────────────── */
.zl-bracket-scroll {
    overflow-x: auto;
    padding-bottom: 12px;
}
.zl-bracket-wrapper {
    display: flex;
    gap: 0;
    align-items: stretch;
    min-width: max-content;
}
.zl-bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 200px;
    padding: 0 16px;
    position: relative;
}
.zl-bracket-round::after {
    display: none; /* connectors via padding */
}
.zl-bracket-round-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--zl-muted);
    letter-spacing: .8px;
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--zl-border);
    margin-bottom: 12px;
}
.zl-bracket-match {
    background: var(--zl-card);
    border: 1px solid var(--zl-border);
    border-radius: var(--zl-radius);
    overflow: hidden;
    margin: 8px 0;
    min-width: 180px;
    flex-shrink: 0;
}
.zl-bracket-player {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--zl-text);
    position: relative;
    border-bottom: 1px solid var(--zl-border);
    transition: background var(--zl-transition);
}
.zl-bracket-player:last-child { border-bottom: none; }
.zl-bracket-player.winner {
    background: rgba(63,185,80,.1);
    color: var(--zl-green);
}
.zl-bracket-player.loser {
    color: var(--zl-muted);
}
.zl-bracket-player .zl-bp-score {
    margin-left: auto;
    font-weight: 700;
    font-size: 15px;
    min-width: 20px;
    text-align: right;
}
.zl-bracket-player .zl-bp-seed {
    font-size: 10px;
    color: var(--zl-muted);
    background: rgba(139,148,158,.15);
    border-radius: 3px;
    padding: 1px 4px;
}
.zl-bracket-tbd { color: var(--zl-muted); font-style: italic; }

/* ── Tab Navigation ────────────────────────────────────────────────────────── */
.zl-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--zl-border);
    margin-bottom: 24px;
    overflow-x: auto;
}
.zl-tab-btn {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--zl-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--zl-transition), border-color var(--zl-transition);
    text-decoration: none;
    display: inline-block;
}
.zl-tab-btn:hover   { color: var(--zl-text); }
.zl-tab-btn.active  { color: var(--zl-primary); border-bottom-color: var(--zl-primary); }
.zl-tab-panel       { display: none; }
.zl-tab-panel.active { display: block; }

/* ── Player Avatar / Card ──────────────────────────────────────────────────── */
.zl-player-card {
    background: var(--zl-card);
    border: 1px solid var(--zl-border);
    border-radius: var(--zl-radius);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.zl-player-card__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.zl-player-card__avatar-ph {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zl-primary) 0%, #0f3460 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.zl-player-card__info   { flex: 1; }
.zl-player-card__name   { font-size: 22px; font-weight: 800; color: var(--zl-text); margin: 0 0 4px; }
.zl-player-card__gametag { font-size: 14px; color: var(--zl-primary); margin: 0 0 6px; }
.zl-player-card__meta   { font-size: 13px; color: var(--zl-muted); display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Rankings Table ────────────────────────────────────────────────────────── */
.zl-rankings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--zl-text);
}
.zl-rankings-table th {
    background: var(--zl-card);
    border: 1px solid var(--zl-border);
    padding: 10px 12px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--zl-muted);
    letter-spacing: .5px;
}
.zl-rankings-table th:nth-child(2) { text-align: left; }
.zl-rankings-table td {
    padding: 10px 12px;
    text-align: center;
    border: 1px solid var(--zl-border);
}
.zl-rankings-table td:nth-child(2) { text-align: left; font-weight: 600; }
.zl-rankings-table tbody tr:hover   { background: rgba(88,166,255,.05); }
.zl-rank-1 td { background: rgba(210,153,34,.08); }
.zl-rank-2 td { background: rgba(139,148,158,.06); }
.zl-rank-3 td { background: rgba(210,107,43,.06); }
.zl-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 800;
    font-size: 13px;
}
.zl-rank-badge.rank-1 { background: #d29922; color: #000; }
.zl-rank-badge.rank-2 { background: #8b949e; color: #000; }
.zl-rank-badge.rank-3 { background: #d2671a; color: #fff; }

/* ── Match Results ─────────────────────────────────────────────────────────── */
.zl-match-list { list-style: none; margin: 0; padding: 0; }
.zl-match-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--zl-card);
    border: 1px solid var(--zl-border);
    border-radius: var(--zl-radius);
    margin-bottom: 6px;
    font-size: 13px;
}
.zl-match-item .zl-mi-j1   { flex: 1; text-align: right; font-weight: 600; }
.zl-match-item .zl-mi-j2   { flex: 1; text-align: left;  font-weight: 600; }
.zl-match-item .zl-mi-score {
    padding: 4px 12px;
    background: rgba(88,166,255,.1);
    border-radius: 20px;
    font-weight: 700;
    font-size: 15px;
    color: var(--zl-primary);
    min-width: 60px;
    text-align: center;
}
.zl-match-item .zl-mi-winner { color: var(--zl-green); font-weight: 700; }
.zl-match-item .zl-mi-loser  { color: var(--zl-muted); }

/* ── General Utilities ─────────────────────────────────────────────────────── */
.zl-section-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--zl-text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.zl-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--zl-border);
}
.zl-loading { color: var(--zl-muted); font-style: italic; padding: 20px 0; text-align: center; }
.zl-no-data { color: var(--zl-muted); text-align: center; padding: 30px; font-size: 14px; }