/* ════════════════════════════════════════════════════════════════
   TournamentEntriesTab.css
   Linked from App.razor.

   Visual vocabulary mirrors TournamentDashboard.css:
       .te-stat       (= .td-stat)          stat strip cards
       .te-chip       (= soft purple chip)   filter chips
       .te-pill       (= status pill family) status / payment markers
       .te-section    (rounded card per event, collapsible)
       .te-action-btn (= .td-icon-btn)       row action buttons
════════════════════════════════════════════════════════════════ */

.te-page {
    font-family: 'DM Sans', sans-serif;
    padding: 4px 0 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Loading / Empty ──────────────────────────────────────── */
.te-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 48px 24px;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
}

.te-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 72px 24px;
    text-align: center;
}

.te-empty-icon {
    font-size: 48px !important;
    width: 48px !important;
    height: 48px !important;
    color: var(--mud-palette-text-disabled);
    opacity: 0.5;
}

.te-empty-title {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.te-empty-sub {
    font-size: 13px;
    color: var(--mud-palette-text-disabled);
}

/* ════════════════════════════════════════════════════════════
   STAT STRIP — mirror of .td-stat from dashboard
════════════════════════════════════════════════════════════ */
.te-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.te-stat {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 0;
}

/* Amber-tinted warn variant for the unpaid card when count > 0 */
.te-stat--warn {
    background: rgba(232,169,74,0.08);
    border-color: rgba(232,169,74,0.30);
}

    .te-stat--warn .te-stat-num,
    .te-stat--warn .te-stat-lbl {
        color: #B07820;
    }

.te-stat-num {
    font-family: 'DM Mono', monospace;
    font-size: 20px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1;
}

.te-stat-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--mud-palette-text-secondary);
    margin-top: 3px;
}

.te-stat-hint {
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════
   FILTER BAR — chips + search
════════════════════════════════════════════════════════════ */
.te-filter-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.te-event-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

/* Same recipe family as .td-tab-count: soft purple tint that reads
   on light AND dark themes. Inactive chips are neutral; active gets
   filled purple. */
.te-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: 3px 10px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
    outline: none;
}

    .te-chip:focus,
    .te-chip:focus-visible {
        outline: none;
    }

    .te-chip:hover:not(.te-chip--active) {
        color: var(--mud-palette-text-primary);
        background: var(--mud-palette-action-default-hover);
    }

.te-chip--active {
    background: rgba(99,102,241,0.13);
    border-color: rgba(99,102,241,0.32);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.te-chip-badge {
    color: #ffffff;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

.te-chip-count {
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--mud-palette-text-disabled);
    font-weight: 600;
}

.te-chip--active .te-chip-count {
    color: var(--mud-palette-primary);
}

/* ── Search ───────────────────────────────────────────────── */
.te-search-wrap {
    position: relative;
    min-width: 240px;
}

.te-search-icon {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
    color: var(--mud-palette-text-disabled);
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.te-search {
    width: 100%;
    height: 30px;
    padding: 4px 10px 4px 28px;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.15s;
}

    .te-search:focus {
        border-color: var(--mud-palette-primary);
    }

/* ════════════════════════════════════════════════════════════
   PER-EVENT SECTIONS
════════════════════════════════════════════════════════════ */
.te-section {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    overflow: hidden;
}

.te-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    background: var(--mud-palette-background-grey);
    border: none;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: inherit;
    outline: none;
    transition: background 0.15s;
}

    .te-section-header:focus,
    .te-section-header:focus-visible {
        outline: none;
    }

    .te-section-header:hover {
        background: var(--mud-palette-action-default-hover);
    }

.te-section-badge {
    color: #ffffff;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
}

.te-section-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.te-section-meta {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.te-section-cap {
    margin-left: auto;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.te-section-chevron {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    color: var(--mud-palette-text-secondary);
}

/* ════════════════════════════════════════════════════════════
   TABLE
════════════════════════════════════════════════════════════ */
.te-table-wrap {
    overflow-x: auto;
}

.te-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.te-th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 7px 12px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
}

.te-th--num {
    width: 36px;
    text-align: center;
}

.te-th--club {
    width: 160px;
}

.te-th--seed {
    width: 60px;
    text-align: center;
}

.te-th--stage {
    width: 110px;
}

.te-th--payment {
    width: 90px;
}

.te-th--status {
    width: 100px;
}

.te-row {
    border-top: 1px solid var(--mud-palette-lines-default);
    transition: background 0.15s;
}

    .te-row:hover {
        background: var(--mud-palette-action-hover);
    }

.te-row--withdrawn {
    opacity: 0.55;
}

    .te-row--withdrawn .te-player-name {
        text-decoration: line-through;
    }

.te-td {
    padding: 8px 12px;
    vertical-align: middle;
}

.te-td--num {
    text-align: center;
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    color: var(--mud-palette-text-disabled);
}

.te-td--player {
    min-width: 200px;
}

.te-player-name {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    font-size: 12.5px;
}

.te-pair {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.te-pair-sep {
    color: var(--mud-palette-text-disabled);
    font-weight: 400;
}

.te-no-partner {
    font-size: 10px;
    color: var(--mud-palette-text-disabled);
    font-style: italic;
    margin-left: 4px;
}

.te-td--club {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
}

.te-club {
    color: var(--mud-palette-text-secondary);
}

.te-td--seed {
    text-align: center;
}

.te-seed-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(99,102,241,0.13);
    border: 1px solid rgba(99,102,241,0.32);
    color: var(--mud-palette-primary);
    min-width: 22px;
}

.te-dash {
    color: var(--mud-palette-text-disabled);
    font-size: 11px;
}

.te-stage-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    padding: 1px 8px;
    border-radius: 4px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

/* ════════════════════════════════════════════════════════════
   STATUS + PAYMENT PILLS — shared recipe
   Same family of muted tints as the dashboard status pills.
════════════════════════════════════════════════════════════ */
.te-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 9px;
    border-radius: 20px;
    line-height: 1.6;
    white-space: nowrap;
}

/* Payment */
.te-pill--paid {
    background: rgba(29,158,117,0.12);
    color: #0F6E56;
    border: 1px solid rgba(29,158,117,0.25);
}

.te-pill--partial {
    background: rgba(99,102,241,0.10);
    color: var(--mud-palette-primary);
    border: 1px solid rgba(99,102,241,0.25);
}

/* Unpaid uses the same muted amber as the dashboard's warn badges.
   Solid fill + dark text so it reads on both themes. */
.te-pill--unpaid {
    background: #E8A94A;
    color: #1F1208;
    border: 1px solid #B07820;
    font-weight: 700;
}

.te-pill--free {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
}

/* Status */
.te-pill--approved {
    background: rgba(29,158,117,0.12);
    color: #0F6E56;
    border: 1px solid rgba(29,158,117,0.25);
}

.te-pill--pending {
    background: var(--mud-palette-background-grey);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
}

.te-pill--withdrawn {
    background: rgba(136,135,128,0.13);
    color: #5F5E5A;
    border: 1px solid rgba(136,135,128,0.25);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 880px) {
    .te-stats {
        grid-template-columns: repeat(3, 1fr);
    }

        .te-stats .te-stat:nth-child(4),
        .te-stats .te-stat:nth-child(5) {
            grid-column: span 1;
        }
}

@media (max-width: 600px) {
    .te-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .te-th--club,
    .te-td--club {
        display: none;
    }
}