/**
 * Tournament Sections Styles
 * Modern, responsive styles for tournament-specific sections
 * 
 * @author: Senior Software Engineer
 * @version: 1.0.0
 * 
 * Features:
 * - Consistent design system with overview section
 * - Responsive grid layouts
 * - Smooth animations and transitions
 * - Accessible color contrasts
 * - Mobile-first approach
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --tournament-primary: #10b981;
    --tournament-primary-light: #d1fae5;
    --tournament-secondary: #2563eb;
    --tournament-accent: #ff6b00;
    --tournament-success: #10b981;
    --tournament-info: #3b82f6;
    --tournament-warning: #f59e0b;
    --tournament-dark: #1a1a2e;
    --tournament-white: #ffffff;
    --tournament-gray-50: #f9fafb;
    --tournament-gray-100: #f3f4f6;
    --tournament-gray-200: #e5e7eb;
    --tournament-gray-500: #6b7280;
    --tournament-gray-700: #374151;
    --tournament-gray-900: #111827;
    --tournament-radius: 1rem;
    --tournament-radius-lg: 1.25rem;
    --tournament-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --tournament-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ============================================
   TOURNAMENT STATISTICS SECTION
   ============================================ */
.tournament-stats-section {
    background: var(--tournament-gray-50);
}

.tournament-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.stat-card {
    background: var(--tournament-white);
    border-radius: var(--tournament-radius-lg);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--tournament-shadow);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--tournament-primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--tournament-shadow-lg);
}

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card-primary {
    border-color: rgba(16, 185, 129, 0.2);
}

.stat-card-primary::before {
    background: var(--tournament-primary);
}

.stat-card-success {
    border-color: rgba(16, 185, 129, 0.2);
}

.stat-card-success::before {
    background: var(--tournament-success);
}

.stat-card-info {
    border-color: rgba(59, 130, 246, 0.2);
}

.stat-card-info::before {
    background: var(--tournament-info);
}

.stat-card-warning {
    border-color: rgba(245, 158, 11, 0.2);
}

.stat-card-warning::before {
    background: var(--tournament-warning);
}

.stat-card-secondary {
    border-color: rgba(37, 99, 235, 0.2);
}

.stat-card-secondary::before {
    background: var(--tournament-secondary);
}

.stat-card-dark {
    border-color: rgba(26, 26, 46, 0.2);
}

.stat-card-dark::before {
    background: var(--tournament-dark);
}

.stat-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--tournament-primary), var(--tournament-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--tournament-white);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.stat-card-primary .stat-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.stat-card-success .stat-icon {
    background: linear-gradient(135deg, #10b981, #059669);
}

.stat-card-info .stat-icon {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.stat-card-warning .stat-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-card-secondary .stat-icon {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.stat-card-dark .stat-icon {
    background: linear-gradient(135deg, #1a1a2e, #0f172a);
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--tournament-gray-900);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--tournament-gray-700);
    margin-bottom: 0.25rem;
}

.stat-sublabel {
    font-size: 0.875rem;
    color: var(--tournament-gray-500);
}

/* ============================================
   TOURNAMENT FORMAT SECTION
   ============================================ */
.tournament-format-section {
    background: var(--tournament-white);
}

.tournament-phases {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
    position: relative;
}

.phase-card {
    background: var(--tournament-white);
    border-radius: var(--tournament-radius-lg);
    padding: 2rem;
    box-shadow: var(--tournament-shadow);
    border: 2px solid var(--tournament-gray-200);
    transition: all 0.3s ease;
    position: relative;
}

.phase-card:hover {
    transform: translateX(8px);
    box-shadow: var(--tournament-shadow-lg);
    border-color: var(--tournament-primary);
}

.phase-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.phase-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--tournament-primary), var(--tournament-secondary));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--tournament-white);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.phase-title h3 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tournament-gray-900);
}

.phase-description {
    margin: 0.5rem 0 0 0;
    color: var(--tournament-gray-600);
    font-size: 0.95rem;
}

.phase-details {
    display: flex;
    gap: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tournament-gray-200);
}

.phase-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--tournament-gray-700);
}

.phase-stat i {
    font-size: 1.25rem;
    color: var(--tournament-primary);
}

.phase-stat .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tournament-gray-900);
}

.phase-stat .stat-label {
    font-size: 0.875rem;
    color: var(--tournament-gray-500);
}

.phase-arrow {
    text-align: center;
    margin: -1rem 0;
    position: relative;
    z-index: 1;
}

.phase-arrow i {
    font-size: 2rem;
    color: var(--tournament-primary);
    background: var(--tournament-white);
    padding: 0.5rem;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tournament-structure-summary {
    margin-top: 3rem;
}

.structure-card {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(37, 99, 235, 0.05));
    border-radius: var(--tournament-radius-lg);
    padding: 2rem;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.structure-card h4 {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    color: var(--tournament-gray-900);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.structure-card h4 i {
    color: var(--tournament-primary);
}

.structure-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.structure-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--tournament-white);
    border-radius: var(--tournament-radius);
    border: 1px solid var(--tournament-gray-200);
}

.structure-item strong {
    color: var(--tournament-gray-900);
    font-weight: 600;
}

.structure-item span {
    color: var(--tournament-gray-700);
}

.structure-item .badge {
    background: var(--tournament-primary);
    color: var(--tournament-white);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.structure-total {
    background: linear-gradient(135deg, var(--tournament-primary), var(--tournament-secondary));
    color: var(--tournament-white);
    border: none;
    margin-top: 0.5rem;
}

.structure-total strong,
.structure-total span {
    color: var(--tournament-white);
}

.total-value {
    font-size: 1.25rem;
    font-weight: 800;
}

/* ============================================
   TOURNAMENT SCORING SECTION
   ============================================ */
.tournament-scoring-section {
    background: var(--tournament-gray-50);
}

.scoring-system-type {
    text-align: center;
    margin: 2rem 0;
}

.system-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 2rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tournament-white);
    box-shadow: var(--tournament-shadow-lg);
}

.system-hybrid {
    background: linear-gradient(135deg, #10b981, #3b82f6);
}

.system-victory_points {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}

.system-game_difference {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
}

.scoring-card {
    background: var(--tournament-white);
    border-radius: var(--tournament-radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--tournament-shadow);
    border: 2px solid var(--tournament-gray-200);
}

.scoring-header h3 {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    color: var(--tournament-gray-900);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.scoring-header h3 i {
    color: var(--tournament-primary);
}

.scoring-subtitle {
    color: var(--tournament-gray-600);
    margin: 0.5rem 0 0 0;
    font-size: 0.95rem;
}

.point-system {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.point-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--tournament-gray-50);
    border-radius: var(--tournament-radius);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.point-item:hover {
    border-color: var(--tournament-primary);
    transform: translateY(-4px);
    box-shadow: var(--tournament-shadow);
}

.point-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.point-info {
    flex: 1;
}

.point-info strong {
    display: block;
    font-size: 1.1rem;
    color: var(--tournament-gray-900);
    margin-bottom: 0.25rem;
    font-weight: 700;
}

.point-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--tournament-primary);
}

.point-win .point-value {
    color: var(--tournament-success);
}

.point-draw .point-value {
    color: var(--tournament-warning);
}

.point-loss .point-value {
    color: var(--tournament-gray-500);
}

.tiebreakers-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.tiebreaker-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--tournament-gray-50);
    border-radius: var(--tournament-radius);
    border-left: 4px solid var(--tournament-primary);
}

.tiebreaker-order {
    width: 40px;
    height: 40px;
    background: var(--tournament-primary);
    color: var(--tournament-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 800;
    flex-shrink: 0;
}

.tiebreaker-content {
    flex: 1;
}

.tiebreaker-content strong {
    display: block;
    font-size: 1.1rem;
    color: var(--tournament-gray-900);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.tiebreaker-content p {
    margin: 0;
    color: var(--tournament-gray-600);
    font-size: 0.95rem;
    line-height: 1.6;
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.rule-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--tournament-gray-50);
    border-radius: var(--tournament-radius);
    border: 1px solid var(--tournament-gray-200);
}

.rule-item i {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.rule-content {
    flex: 1;
}

.rule-content strong {
    display: block;
    font-size: 1.1rem;
    color: var(--tournament-gray-900);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.rule-content p {
    margin: 0;
    color: var(--tournament-gray-600);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .tournament-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1.5rem;
    }
    
    .stat-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .stat-value {
        font-size: 2rem;
    }
    
    .tournament-phases {
        gap: 1.5rem;
    }
    
    .phase-card {
        padding: 1.5rem;
    }
    
    .phase-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .phase-details {
        flex-direction: column;
        gap: 1rem;
    }
    
    .point-system {
        grid-template-columns: 1fr;
    }
    
    .structure-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .tournament-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .phase-number {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .system-badge {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
}

/* ============================================
   ACCESSIBILITY & UX ENHANCEMENTS
   ============================================ */

/* Focus states for keyboard navigation */
.stat-card:focus,
.phase-card:focus,
.scoring-card:focus,
.highlight-item:focus,
.point-item:focus,
.tiebreaker-item:focus,
.rule-item:focus {
    outline: 3px solid var(--tournament-primary);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .stat-card,
    .phase-card,
    .scoring-card,
    .highlight-item,
    .point-item,
    .tiebreaker-item,
    .rule-item {
        transition: none;
    }
    
    .stat-card:hover,
    .phase-card:hover,
    .highlight-item:hover,
    .point-item:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .stat-card,
    .phase-card,
    .scoring-card {
        border: 2px solid var(--tournament-gray-900);
    }
    
    .stat-value,
    .phase-title h3,
    .scoring-header h3 {
        color: var(--tournament-gray-900);
    }
}

/* Print styles */
@media print {
    .tournament-stats-section,
    .tournament-format-section,
    .tournament-scoring-section {
        page-break-inside: avoid;
    }
    
    .stat-card,
    .phase-card,
    .scoring-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #000;
    }
}