/**
 * Top Assists Widget Component
 *
 * Dedicated widget for displaying top assist providers with detailed statistics.
 * Extends the base stats_table_widget.css patterns with assists-specific styling.
 */

/* ============================================
   1. WIDGET CONTAINER & LAYOUT
   ============================================ */

.top-assists-widget {
    width: 100%;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.widget-section {
    background: var(--white);
    border: 1px solid var(--border-light);
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.widget-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    background: var(--border-light);
    color: var(--text-color);
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.widget-title {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.widget-title i {
    color: var(--primary-color);
    font-size: var(--font-size-md);
}

/* ============================================
   2. TABLE LAYOUT
   ============================================ */

.widget-table-container {
    overflow-x: hidden;
    max-width: 100%;
    container-type: inline-size;
}

.widget-table {
    display: block;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.widget-table thead,
.widget-table tbody {
    display: block;
}

.widget-table tr {
    display: grid;
    align-items: center;
    border-bottom: 1px solid var(--border-light);
    position: relative;
    gap: 0;
    margin: 0;
}

.widget-table th,
.widget-table td {
    padding: var(--spacing-md) var(--spacing-sm);
    text-align: center;
    overflow: hidden;
    margin: 0;
    border: none;
    vertical-align: middle;
}

.widget-table th {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.2;
}

.widget-table td {
    white-space: nowrap;
    text-overflow: ellipsis;
}

.widget-table th {
    background: var(--light-gray);
    color: var(--medium-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-sizing: border-box;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xxs);
}

.widget-table thead tr {
    background: var(--light-gray);
    font-size: var(--font-size-xxs);
}

.widget-table tbody tr:hover {
    background-color: var(--light-hover);
}

/* ============================================
   3. COLUMN DEFINITIONS
   ============================================ */

.rank-col {
    text-align: center;
}

.player-col {
    text-align: left;
}

.stat-col {
    text-align: center;
}

/* ============================================
   4. PLAYER INFORMATION STYLING
   ============================================ */

.rank-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-md);
    height: var(--icon-md);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-bold);
    background-color: var(--light-gray);
    color: var(--black);
    border: 1px solid var(--border-color);
    font-size: var(--font-size-xs);
}

.player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.player-details {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-align: left;
}

.team-logo {
    width: var(--icon-sm);
    height: var(--icon-sm);
    object-fit: contain;
    flex-shrink: 0;
}

.team-logo-placeholder {
    width: var(--icon-sm);
    height: var(--icon-sm);
    background: var(--light-gray);
    border-radius: 2px;
    flex-shrink: 0;
}

.player-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.player-name {
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-mobile {
    color: var(--medium-gray);
    font-size: var(--font-size-xxs);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================
   5. STATISTICS STYLING
   ============================================ */

.stat-primary .stat-value {
    color: var(--text-color);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.stat-secondary {
    color: var(--medium-gray);
    font-weight: var(--font-weight-bold);
}

/* ============================================
   6. PROGRESSIVE LOADING
   ============================================ */

.widget-hidden {
    display: none !important;
}

.widget-show-more-container {
    text-align: center;
    padding: 16px 12px;
    border-bottom: none;
    background: var(--light-gray);
}

.widget-show-more-btn,
.widget-show-less-btn {
    background: none;
    border: none;
    color: var(--primary-color, #007bff);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
}

.show-more-icon {
    transition: transform 0.2s ease;
}

/* ============================================
   7. NO DATA STATE
   ============================================ */

.no-data-message {
    text-align: center;
    padding: 40px 20px;
}

.no-data-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--medium-gray);
}

.no-data-content i {
    color: var(--medium-gray);
    opacity: 0.6;
}

.no-data-content p {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--medium-gray);
}

.no-data-content small {
    font-size: var(--font-size-xxs);
    color: var(--medium-gray);
    opacity: 0.8;
}

/* ============================================
   8. RESPONSIVE GRID LAYOUT WITH CONTAINER QUERIES
   ============================================ */

/* Default (Mobile): <= 350px - Show essential columns + Min/Assist */
.widget-table tr {
    grid-template-columns: 2.5rem 3fr 1fr 1fr;
}

/* Hide all secondary stats on mobile except Min/Assist */
.stat-col:nth-child(5), /* Assist Conv % */
.appearances-col,       /* Apps */
.stat-col:nth-child(7), /* Chances Created */
.stat-col:nth-child(8), /* Open Play */
.stat-col:nth-child(9), /* Set Play */
.stat-col:nth-child(10) /* Open Play % */ {
    display: none;
}

/* Min/Assist is visible by default now */

/* Priority 1: > 400px - Add Assist Conv % */
@container (min-width: 401px) {
    .widget-table tr {
        grid-template-columns: 2.5rem 3fr 1fr 1fr 1fr;
    }

    .stat-col:nth-child(5) { /* Assist Conv % */
        display: block;
    }
}

/* Priority 2: > 460px - Add Appearances */
@container (min-width: 461px) {
    .widget-table tr {
        grid-template-columns: 2.5rem 3fr 1fr 1fr 1fr 1fr;
    }

    .appearances-col { /* Apps */
        display: block;
    }
}

/* Priority 3: > 520px - Add Chances Created */
@container (min-width: 521px) {
    .widget-table tr {
        grid-template-columns: 2.5rem 3fr 1fr 1fr 1fr 1fr 1fr;
    }

    .stat-col:nth-child(7) { /* Chances Created */
        display: block;
    }
}

/* Priority 4: > 580px - Add Open Play % */
@container (min-width: 581px) {
    .widget-table tr {
        grid-template-columns: 2.5rem 3fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .stat-col:nth-child(10) { /* Open Play % */
        display: block;
    }
}

/* Priority 5: > 640px - Add Open Play */
@container (min-width: 641px) {
    .widget-table tr {
        grid-template-columns: 2.5rem 3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .stat-col:nth-child(8) { /* Open Play */
        display: block;
    }
}

/* Priority 6: > 700px - Add Set Play */
@container (min-width: 701px) {
    .widget-table tr {
        grid-template-columns: 2.5rem 3fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .stat-col:nth-child(9) { /* Set Play */
        display: block;
    }
}