/**
 * LeagueTech Standings Page Styles
 * Standalone styles for the standings page
 * Uses shared.css for common components
 */

/* Page header components now handled by shared.css */

/* ===== STANDINGS COMPONENTS ===== */

/* Standings Controls */
.standings-controls {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Standings Table Container */
.standings-container {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    margin-bottom: 32px;
}

.standings-header {
    background: #1a1a1a;
    color: #ffffff;
    padding: 24px 32px;
    text-align: center;
}

.standings-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.standings-subtitle {
    color: #cccccc;
    font-size: 14px;
    font-weight: 500;
}

/* No Standings Message */
.no-standings {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    padding: 40px;
}

.no-standings-content {
    text-align: center;
    max-width: 400px;
}

.no-standings-content svg {
    color: #d1d5db;
    margin-bottom: 16px;
}

.no-standings-content h3 {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.no-standings-content p {
    color: #666;
    line-height: 1.6;
}

/* Standings Table */
.standings-table {
    width: 100%;
    border-collapse: collapse;
}

.standings-table th {
    background: #f8f9fa;
    padding: 16px 20px;
    text-align: left;
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e5e5e5;
}

.standings-table th.text-center {
    text-align: center;
}

.standings-table td {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease;
}

.standings-table tr:hover td {
    background: #f8f9fa;
}

.standings-table tr:last-child td {
    border-bottom: none;
}

/* Enhanced table hover states */
.standings-table tr:hover {
    background: #f8f9fa;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
}

/* Table Cell Styles - Using specific selectors to avoid conflicts */
.standings-table .rank {
    font-weight: 700;
    font-size: 18px;
    color: #1a1a1a;
    text-align: center;
    width: 60px;
    min-width: 60px;
}

.standings-table .rank.top-3 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

.standings-table .team-name {
    font-weight: 600;
    font-size: 16px;
    color: #1a1a1a;
}

.standings-table .mobile-record {
    display: none;
    font-size: 12px;
    color: #666;
    font-weight: 400;
    margin-top: 4px;
}

.standings-table td.stat {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 18px 16px !important;
    text-align: center;
    font-weight: 500;
    color: #1a1a1a;
    position: static !important;
    overflow: visible !important;
    transition: none !important;
    vertical-align: middle;
}

.standings-table td.stat::before {
    display: none !important;
}

.standings-table td.win-percentage {
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.standings-table td.point-differential.positive {
    color: #16a34a !important;
    font-weight: 600 !important;
}

.standings-table td.point-differential.negative {
    color: #dc2626 !important;
    font-weight: 600 !important;
}

/* Better table header styling */
.standings-table th {
    background: #f8f9fa;
    padding: 16px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    border-bottom: 2px solid #e5e5e5;
}

/* ===== COMBINE STANDINGS ===== */

/* Combine-specific table styles */
.combine-standings .participant-name {
    padding-left: 20px;
}

.combine-standings .participant-name strong {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    display: block;
    line-height: 1.3;
}

.combine-standings .mobile-points {
    display: none; /* Hidden on desktop, shown on mobile */
    font-size: 13px;
    color: #666;
    font-weight: 400;
    margin-top: 4px;
}

.combine-standings .total-points {
    font-weight: 600;
    color: #1a1a1a;
}

.combine-standings .avg-points {
    color: #666;
    font-style: italic;
}

.combine-standings .team-name {
    color: #666;
    font-size: 14px;
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 768px) {
    .standings-controls {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }
    
    /* Container mobile styles */
    .container {
        padding: 0 16px;
    }
    
    .standings-container {
        margin-bottom: 24px;
    }
    
    /* Page title mobile styles now in shared.css */
    
    .standings-header {
        padding: 20px 16px;
    }
    
    .standings-title {
        font-size: 20px;
    }
    
    .standings-table {
        font-size: 14px;
    }
    
    /* Hide less important columns on mobile - Traditional standings */
    .standings-table:not(.combine-standings) th:nth-child(3),  /* Played */
    .standings-table:not(.combine-standings) th:nth-child(4),  /* Wins */
    .standings-table:not(.combine-standings) th:nth-child(5),  /* Losses */
    .standings-table:not(.combine-standings) th:nth-child(7),  /* Points For */
    .standings-table:not(.combine-standings) th:nth-child(8),  /* Points Against */
    .standings-table:not(.combine-standings) td:nth-child(3),
    .standings-table:not(.combine-standings) td:nth-child(4),
    .standings-table:not(.combine-standings) td:nth-child(5),
    .standings-table:not(.combine-standings) td:nth-child(7),
    .standings-table:not(.combine-standings) td:nth-child(8) {
        display: none;
    }
    
    /* Hide less important columns on mobile - Combine standings */
    .combine-standings th:nth-child(3),  /* Events Completed */
    .combine-standings th:nth-child(5),  /* Avg Points */
    .combine-standings th:nth-child(6),  /* Team */
    .combine-standings td:nth-child(3),
    .combine-standings td:nth-child(5),
    .combine-standings td:nth-child(6) {
        display: none;
    }
    
    /* Show mobile info for combine standings */
    .combine-standings .mobile-points {
        display: block;
    }
    
    .standings-table th,
    .standings-table td {
        padding: 16px 8px;
    }
    
    .standings-table .rank {
        width: 50px;
        font-size: 16px;
    }
    
    .standings-table .team-name {
        font-size: 14px;
    }
    
    .standings-table .mobile-record {
        display: block;
        font-size: 13px;
        color: #666;
        font-weight: 400;
        margin-top: 4px;
    }
}

/* Extra small mobile - simplify further */
@media (max-width: 480px) {
    .standings-table th:nth-child(9), /* Point Diff */
    .standings-table td:nth-child(9) {
        display: none;
    }
    
    .standings-table th,
    .standings-table td {
        padding: 12px 6px;
    }
    
    .standings-table .rank {
        width: 40px;
        font-size: 14px;
    }
    
    .standings-table .team-name {
        font-size: 13px;
    }
    
    /* Extra container adjustments for very small mobile */
    .container {
        padding: 0 12px;
    }
    
    .standings-container {
        margin-bottom: 20px;
    }
    
    .standings-header {
        padding: 16px 12px;
    }
}