/* Theme Variables */
:root {
    /* Light Theme - Vibrant Modern */
    --bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --bg-secondary: rgba(255, 255, 255, 0.25);
    --bg-card: rgba(255, 255, 255, 0.18);
    --text-primary: #1a1a2e;
    --text-secondary: #4a5568;
    --text-light: white;
    --border-color: rgba(255, 255, 255, 0.3);
    --shadow: rgba(0, 0, 0, 0.15);
    --shadow-lg: rgba(0, 0, 0, 0.25);
    --accent: #10b981;
    --accent-danger: #ef4444;
    --accent-warning: #f59e0b;
    --bonus-home: #f59e0b;
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.25);
}

[data-theme="dark"] {
    --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
    --bg-secondary: rgba(0, 0, 0, 0.5);
    --bg-card: rgba(255, 255, 255, 0.08);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-light: #ffffff;
    --border-color: rgba(255, 255, 255, 0.15);
    --shadow: rgba(0, 0, 0, 0.5);
    --shadow-lg: rgba(0, 0, 0, 0.8);
    --accent: #34d399;
    --accent-danger: #f87171;
    --accent-warning: #fbbf24;
    --bonus-home: #fbbf24;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] {
    --bg-primary: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 50%, #f8f9fa 100%);
    --bg-secondary: rgba(0, 0, 0, 0.04);
    --bg-card: rgba(255, 255, 255, 0.95);
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-light: #0f172a;
    --border-color: rgba(0, 0, 0, 0.12);
    --shadow: rgba(0, 0, 0, 0.08);
    --shadow-lg: rgba(0, 0, 0, 0.15);
    --accent: #059669;
    --accent-danger: #dc2626;
    --accent-warning: #d97706;
    --bonus-home: #d97706;
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(0, 0, 0, 0.1);
}

/* Reset e base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    transition: all 0.5s ease;
}

/* Theme transition animation */
html.theme-transition,
html.theme-transition *,
html.theme-transition *:before,
html.theme-transition *:after {
    transition: all 0.3s ease !important;
    transition-delay: 0 !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    padding: 1.5rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 8px 32px 0 var(--shadow);
    transition: all 0.3s ease;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
}

.logo i {
    font-size: 2.5rem;
    color: #ffd700;
}

.trophy-reload {
    cursor: pointer;
    transition: all 0.3s ease;
}

.trophy-reload:hover {
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.2);
}

.logo h1 {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
}

.subtitle {
    font-size: 0.9rem;
    opacity: 0.8;
    font-weight: 300;
}

.nav {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.nav-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 12px 20px;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
}

.nav-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.nav-btn.active {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Theme Toggle Button */
.theme-toggle {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    color: var(--text-light);
    padding: 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    margin-left: 0.5rem;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--shadow);
}

.theme-toggle i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.theme-toggle:hover i {
    transform: rotate(180deg);
}

/* Cache Clear Button */
.cache-clear-btn {
    background: rgba(220, 38, 38, 0.1);
    border: 2px solid rgba(220, 38, 38, 0.3);
    color: #dc2626;
    padding: 0.75rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    margin-left: 0.5rem;
}

.cache-clear-btn:hover {
    background: rgba(220, 38, 38, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
    border-color: #dc2626;
}

.cache-clear-btn i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.cache-clear-btn:hover i {
    transform: scale(1.1);
}

[data-theme="dark"] .cache-clear-btn {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

[data-theme="dark"] .cache-clear-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: #ef4444;
}

/* Main content */
.main {
    padding: 2rem 0;
    min-height: calc(100vh - 140px);
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.tab-content.active {
    display: block;
}

.section-description {
    color: var(--text-secondary);
    font-style: italic;
    margin: 0.5rem 0;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.section-header {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 2.5rem;
    border-radius: 20px;
    margin-bottom: 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    box-shadow: 0 8px 32px var(--shadow-lg);
    border: 1px solid var(--glass-border);
    transition: all 0.3s ease;
}

.section-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 48px var(--shadow-lg);
}

.section-header h2 {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 15px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    letter-spacing: -0.5px;
}

.section-header h2 i {
    color: #ffd700;
    font-size: 2.5rem;
    filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4));
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.last-update {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Standings Table */
.standings-container {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--shadow-lg);
    border: 1px solid var(--glass-border);
}

.standings-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
}

.standings-table thead {
    background: var(--primary-color);
    color: white;
}

.standings-table th,
.standings-table td {
    padding: 1rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.standings-table th {
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 10;
}

.standings-table tbody tr {
    animation: slideInUp 0.6s ease-out;
}

.standings-table tbody tr:hover {
    background: var(--glass-bg);
    transform: translateX(4px) scale(1.01);
    box-shadow: 0 6px 20px var(--shadow);
}

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

.table-header {
    background: var(--primary-color);
    color: white;
}

/* Responsività classi mobile */
.mobile-only {
    display: none;
}

/* Posizioni speciali */
.standings-table .first {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.25), rgba(255, 215, 0, 0.05));
    border-left: 5px solid #FFD700;
    font-weight: 700;
    box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.2);
}

.standings-table .second {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.25), rgba(192, 192, 192, 0.05));
    border-left: 5px solid #C0C0C0;
    font-weight: 600;
    box-shadow: inset 0 0 20px rgba(192, 192, 192, 0.2);
}

.standings-table .third {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.25), rgba(205, 127, 50, 0.05));
    border-left: 5px solid #CD7F32;
    font-weight: 600;
    box-shadow: inset 0 0 20px rgba(205, 127, 50, 0.2);
}

/* Manteniamo compatibilità per header sortabili */

.sortable-header {
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    user-select: none;
}

.sortable-header:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.sortable-header i {
    font-size: 0.8rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.sortable-header:hover i {
    opacity: 1;
}

.sortable-header .fa-sort-up,
.sortable-header .fa-sort-down {
    opacity: 1;
    color: #ffd700;
}

.team-row {
    padding: 1rem;
    display: grid;
    grid-template-columns: 60px 1fr 60px 40px 40px 40px 50px 50px 60px 70px 80px;
    gap: 0.5rem;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
    background: var(--bg-card);
}

.team-row:hover {
    background: var(--bg-secondary);
    transform: translateX(5px);
    box-shadow: 0 2px 10px var(--shadow);
}

.team-row:last-child {
    border-bottom: none;
}

/* Dark theme specific improvements */
[data-theme="dark"] .team-row {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

[data-theme="dark"] .team-row:hover {
    background: rgba(0, 0, 0, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .team-name {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .points,
[data-theme="dark"] .wins,
[data-theme="dark"] .goal-difference,
[data-theme="dark"] .position {
    color: #ffffff;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .position.first,
[data-theme="dark"] .position.second,
[data-theme="dark"] .position.third {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* Light theme header improvements */
[data-theme="light"] .table-header {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .team-row {
    background: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .team-row:hover {
    background: rgba(59, 130, 246, 0.05);
}

[data-theme="light"] .team-name {
    color: #0f172a;
    font-weight: 600;
}

/* Light theme navigation improvements */
[data-theme="light"] .nav-btn {
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #1f2937;
}

[data-theme="light"] .nav-btn:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #111827;
}

[data-theme="light"] .nav-btn.active {
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.25);
    color: #000000;
}

[data-theme="light"] .theme-toggle {
    background: rgba(0, 0, 0, 0.08);
    border: 2px solid rgba(0, 0, 0, 0.15);
    color: #1f2937;
}

[data-theme="light"] .theme-toggle:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #111827;
}

/* Light theme logo improvements */
[data-theme="light"] .logo {
    color: #1f2937;
}

[data-theme="light"] .logo h1 {
    color: #000000;
}

[data-theme="light"] .subtitle {
    color: #374151;
}

/* Dark theme header improvements */
[data-theme="dark"] .table-header {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.position {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: 10px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.position.first {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #1a1a1a;
}

.position.second {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #1a1a1a;
}

.position.third {
    background: linear-gradient(135deg, #cd7f32, #deb887);
    color: white;
}

.position.other {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

.team-name {
    font-weight: 600;
    font-size: 1.1rem;
}

.points, .wins, .draws, .losses, .avg-score, .goals-for, .goals-against, .goal-difference, .total-score, .position-difference, .points-difference {
    text-align: center;
    font-weight: 500;
}

.points {
    font-size: 1.2rem;
    color: #667eea;
    font-weight: 700;
}

.goal-difference.positive {
    color: #28a745;
    font-weight: 600;
}

.goal-difference.negative {
    color: #dc3545;
    font-weight: 600;
}

/* Statistiche Miglior Allenatore - Classifica Ideale */
.coach-stats-ideal {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2.5rem;
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px var(--shadow-lg);
}

.coach-stats-header {
    text-align: center;
    margin-bottom: 2rem;
}

.coach-stats-header h3 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.coach-stats-header h3 i {
    color: #ffd700;
    font-size: 2rem;
    filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.4));
}

.coach-stats-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-style: italic;
}

.coach-stats-podium {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.coach-podium-item {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.5rem;
    border: 2px solid;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.coach-podium-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.coach-podium-item.gold {
    border-color: #ffd700;
    box-shadow: 0 8px 32px rgba(255, 215, 0, 0.3);
}

.coach-podium-item.gold::before {
    background: linear-gradient(90deg, #ffd700, #ffed4e);
}

.coach-podium-item.silver {
    border-color: #c0c0c0;
    box-shadow: 0 8px 32px rgba(192, 192, 192, 0.3);
}

.coach-podium-item.silver::before {
    background: linear-gradient(90deg, #c0c0c0, #e8e8e8);
}

.coach-podium-item.bronze {
    border-color: #cd7f32;
    box-shadow: 0 8px 32px rgba(205, 127, 50, 0.3);
}

.coach-podium-item.bronze::before {
    background: linear-gradient(90deg, #cd7f32, #e89f5f);
}

.coach-podium-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 48px var(--shadow-lg);
}

.podium-position {
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--text-light), var(--text-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.podium-team {
    font-size: 1.3rem;
    font-weight: 700;
    text-align: center;
    color: var(--text-light);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
}

.podium-stats {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.stat-item i {
    color: var(--accent);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.coach-full-ranking {
    margin-top: 1.5rem;
    border-top: 1px solid var(--glass-border);
    padding-top: 1.5rem;
}

.coach-full-ranking summary {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-light);
    cursor: pointer;
    padding: 1rem;
    background: var(--glass-bg);
    border-radius: 12px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.coach-full-ranking summary:hover {
    background: var(--glass-border);
    transform: translateX(4px);
}

.coach-full-ranking summary i {
    color: var(--accent);
}

.coach-ranking-table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
}

.coach-ranking-table thead {
    background: var(--glass-bg);
}

.coach-ranking-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    color: var(--text-light);
    border-bottom: 2px solid var(--glass-border);
}

.coach-ranking-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-secondary);
}

.coach-ranking-table tr:hover {
    background: var(--glass-bg);
}

.coach-ranking-table tr.top-three {
    font-weight: 600;
    background: var(--glass-bg);
}

.coach-ranking-table tr.top-three td:first-child {
    color: #ffd700;
    font-weight: 800;
    font-size: 1.1rem;
}

/* Classifica Ideale - Layout Più Ampio */
#ideal-standings-table .table-header {
    grid-template-columns: 60px 1fr 50px 35px 35px 35px 45px 45px 50px 60px 65px 60px 60px;
    font-size: 0.85rem;
}

#ideal-standings-table .team-row {
    grid-template-columns: 60px 1fr 50px 35px 35px 35px 45px 45px 50px 60px 65px 60px 60px;
    font-size: 0.9rem;
}

.position-difference, .points-difference {
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.position-difference.better, .points-difference.better {
    color: var(--accent);
}

.position-difference.worse, .points-difference.worse {
    color: var(--accent-danger);
}

.position-difference.same, .points-difference.same {
    color: var(--text-secondary);
}

/* Enhanced colors for better visibility */
[data-theme="dark"] .goal-difference.positive {
    color: #34d399;
    font-weight: 700;
}

[data-theme="dark"] .goal-difference.negative {
    color: #f87171;
    font-weight: 700;
}

[data-theme="light"] .goal-difference.positive {
    color: #059669;
    font-weight: 700;
}

[data-theme="light"] .goal-difference.negative {
    color: #dc2626;
    font-weight: 700;
}

.total-score {
    text-align: center;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Giornata selector */
.giornata-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.giornata-selector label {
    font-weight: 500;
}

.giornata-selector select {
    padding: 8px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    background: white;
    cursor: pointer;
}

/* Risultati giornata */
.giornata-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
    gap: 1.5rem;
}

.match-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 8px 32px var(--shadow);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    word-wrap: break-word;
    box-sizing: border-box;
    border: 1px solid var(--glass-border);
    position: relative;
}

.match-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.match-card:hover::before {
    opacity: 1;
}

.match-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 48px var(--shadow-lg);
    border-color: rgba(102, 126, 234, 0.5);
}

.match-header {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.match-teams {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.team {
    text-align: center;
    flex: 1;
}

.team-name-match {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.team-score {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-light);
    text-shadow: 0 2px 8px var(--shadow);
    letter-spacing: -1px;
    transition: all 0.3s ease;
}

.match-card:hover .team-score {
    transform: scale(1.1);
    color: #667eea;
}

.fantasy-score {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    font-style: italic;
}

.vs {
    margin: 0 1rem;
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.match-score-display {
    text-align: center;
    margin: 1rem 0;
    padding: 0.5rem;
    background: rgba(102, 126, 234, 0.1);
    border-radius: 8px;
    font-size: 1.1rem;
    color: #667eea;
}

.match-result {
    text-align: center;
    padding: 0.5rem;
    border-radius: 8px;
    font-weight: 600;
    margin-top: 1rem;
}

.match-result.win {
    background: #d4edda;
    color: #155724;
}

.match-result.loss {
    background: #f8d7da;
    color: #721c24;
}

.match-result.draw {
    background: #fff3cd;
    color: #856404;
}

/* Ideal Scores */
.ideal-scores {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
}

.ideal-scores h4 {
    text-align: center;
    color: #b8860b;
    margin-bottom: 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.ideal-match-teams {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.ideal-team {
    text-align: center;
    flex: 1;
}

.ideal-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: #b8860b;
    margin-bottom: 0.25rem;
}

.ideal-fantasy-score {
    font-size: 0.75rem;
    color: #996515;
    font-style: italic;
}

.vs-ideal {
    margin: 0 1rem;
    font-size: 1rem;
    color: #b8860b;
    font-weight: 600;
}

.ideal-result {
    text-align: center;
    font-size: 0.9rem;
    color: #b8860b;
    font-weight: 500;
}

/* Ideal Scores Enhanced */
.ideal-scores {
    background: linear-gradient(135deg, #f8f9ff 0%, #e8f1ff 100%);
    border: 2px solid #e1e8f5;
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
}

.ideal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #d1d9e6;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ideal-header h4 {
    margin: 0;
    color: #2c3e50;
    font-size: 1rem;
    flex: 1;
    min-width: 200px;
}

.match-comparison-status {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.match-comparison-status.same-result {
    background: #d4edda;
    color: #155724;
}

.match-comparison-status.different-result {
    background: #f8d7da;
    color: #721c24;
}

.ideal-comparison-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.comparison-team {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid #e9ecef;
}

.team-name-ideal {
    font-weight: bold;
    font-size: 1rem;
    color: #2c3e50;
    margin-bottom: 0.75rem;
    text-align: center;
}

.scores-comparison {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.score-real, .score-ideal, .score-difference {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8rem;
    align-items: center;
}

.score-real {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
}

.score-ideal {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    position: relative;
}

.bonus-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--bonus-home);
    font-weight: 700;
    margin-top: 0.35rem;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.15));
    border-radius: 12px;
    border: 1.5px solid var(--bonus-home);
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
    animation: pulseBonus 2s ease-in-out infinite;
}

@keyframes pulseBonus {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 16px rgba(251, 191, 36, 0.5);
    }
}

.bonus-indicator::before {
    content: "🏠";
    font-size: 1rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.score-difference {
    font-weight: 700;
    border-radius: 12px;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
}

.score-difference.positive {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #10b981;
    color: #065f46;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.score-difference.positive:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.score-difference.negative {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border: 2px solid #ef4444;
    color: #991b1b;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.score-difference.negative:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.vs-ideal-section {
    text-align: center;
    padding: 0.75rem;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin: 0.5rem 0;
}

.vs-label {
    font-size: 0.9rem;
    font-weight: bold;
    color: #495057;
    margin-bottom: 0.5rem;
}

.result-comparison {
    display: flex;
    justify-content: space-around;
    gap: 1rem;
    align-items: center;
}

.real-result, .ideal-result {
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-weight: 600;
    font-size: 0.85rem;
    flex: 1;
    text-align: center;
}

.real-result {
    background: #fff3cd;
    color: #856404;
}

.ideal-result {
    background: #d1ecf1;
    color: #0c5460;
}

.ideal-insights {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 0.75rem;
    border-left: 3px solid #667eea;
    margin-top: 1rem;
}

.insight-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.3;
}

.insight-item:last-child {
    margin-bottom: 0;
}

.insight-item i {
    color: #667eea;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.insight-item.alert i {
    color: #e74c3c;
}

/* Match Commentary */
.match-commentary {
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px var(--shadow);
    margin-top: 2rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.commentary-header {
    text-align: center;
    margin-bottom: 2rem;
}

.commentary-header h3 {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.commentators {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
}

.commentator {
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
}

.commentator.primary {
    background: #ffd700;
    color: #1a1a1a;
}

.commentator.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.commentary-content {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 2rem;
    line-height: 1.8;
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px var(--shadow);
}

.commentary-match {
    background: var(--glass-bg);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 16px var(--shadow);
    transition: all 0.3s ease;
}

.commentary-match:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--shadow-lg);
}

.commentary-match-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.commentary-match-title i {
    color: #667eea;
    font-size: 1.3rem;
    animation: spin 3s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.commentary-dialogue {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--glass-bg);
    border-radius: 10px;
    border-left: 4px solid #ffd700;
    transition: all 0.3s ease;
}

.commentary-dialogue:hover {
    transform: translateX(8px);
    border-left-width: 6px;
}

.commentary-dialogue:has(.bergomi) {
    border-left-color: #87ceeb;
}

.speaker {
    font-weight: 800;
    color: #ffd700;
    font-size: 1.1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    display: inline-block;
    margin-right: 0.5rem;
}

.speaker.bergomi {
    color: #87ceeb;
}

/* Commento inline dentro la match card */
.match-commentary-inline {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    border-left: 4px solid #667eea;
}

.commentary-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.commentary-title i {
    color: #667eea;
}

.commentary-dialogue-inline {
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    line-height: 1.6;
    font-size: 0.95rem;
}

.commentary-dialogue-inline:last-child {
    margin-bottom: 0;
}

.commentary-dialogue-inline .speaker {
    font-size: 1rem;
}

/* Team details panel inserted under standings row */
.team-details-row td {
    background: transparent;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.team-details-panel {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 0.75rem 1rem;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}

.team-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.team-details-header strong {
    font-size: 1rem;
}

.team-details-close {
    background: transparent;
    border: none;
    font-size: 1rem;
    cursor: pointer;
}

.team-matches-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.team-match-item {
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(0,0,0,0.03);
}

/* Commento generale per la giornata */
.round-general-comment {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin: 0 0 1.25rem 0;
    box-shadow: 0 10px 30px var(--shadow);
    color: var(--text-primary);
}

.round-general-comment h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.round-general-comment h4 i {
    color: var(--accent);
    font-size: 1.1rem;
}

.round-general-comment p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.95rem;
}

/* Theme tweaks */
[data-theme="dark"] .round-general-comment {
    background: rgba(0,0,0,0.45);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-light);
}

[data-theme="dark"] .round-general-comment p {
    color: var(--text-secondary);
}

[data-theme="light"] .round-general-comment {
    background: rgba(255,255,255,0.98);
    border-color: rgba(0,0,0,0.06);
    color: var(--text-primary);
}

[data-theme="light"] .round-general-comment p {
    color: var(--text-secondary);
}

.team-match-item .match-teams {
    font-weight: 700;
    margin-top: 0.25rem;
}

.team-match-item .match-score {
    color: var(--accent-color, #667eea);
    font-weight: 800;
    margin: 0 0.25rem;
}

.team-match-item .match-points {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Dark theme per commento inline */
[data-theme="dark"] .match-commentary-inline {
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .commentary-dialogue-inline {
    background: rgba(255, 255, 255, 0.03);
}

/* Light theme per commento inline */
[data-theme="light"] .match-commentary-inline {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .commentary-dialogue-inline {
    background: rgba(0, 0, 0, 0.02);
}

/* Dark theme commentary styles */
[data-theme="dark"] .match-commentary {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .commentary-content {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

[data-theme="dark"] .commentator.secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Light theme commentary styles */
[data-theme="light"] .match-commentary {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .commentary-content {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

[data-theme="light"] .commentator.secondary {
    background: rgba(0, 0, 0, 0.05);
    border: 2px solid rgba(0, 0, 0, 0.15);
    color: var(--text-primary);
}

/* Improve speaker contrast in light theme */
[data-theme="light"] .commentary-dialogue .speaker,
[data-theme="light"] .commentary-dialogue-inline .speaker,
[data-theme="light"] .commentary-content .speaker {
    /* darker, high-contrast gold-like for Caressa */
    color: #b06b00;
    text-shadow: none;
}

[data-theme="light"] .commentary-dialogue .speaker.bergomi,
[data-theme="light"] .commentary-dialogue-inline .speaker.bergomi,
[data-theme="light"] .commentary-content .speaker.bergomi {
    /* deeper blue for Bergomi */
    color: #0b66a3;
}

/* Dark theme match-card improvements */
[data-theme="dark"] .match-card {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .match-card:hover {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9);
}

/* Light theme match-card improvements */
[data-theme="light"] .match-card {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .match-card:hover {
    background: rgba(248, 250, 252, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.12);
}

/* Dark theme match content improvements */
[data-theme="dark"] .match-card .team-name {
    color: #ffffff;
    font-weight: 700;
}

[data-theme="dark"] .match-card .team-score {
    color: #ffffff;
    font-weight: 700;
}

[data-theme="dark"] .match-card .fantasy-score {
    color: #e0e0e0;
}

[data-theme="dark"] .match-card .match-header {
    color: #ffffff;
}

/* Dark theme ideal sections */
[data-theme="dark"] .ideal-scores {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .ideal-score {
    color: #ffd700;
}

[data-theme="dark"] .ideal-fantasy-score {
    color: #e0e0e0;
}

[data-theme="dark"] .vs-ideal {
    color: #ffd700;
}

[data-theme="dark"] .ideal-result {
    color: #ffd700;
}

/* Dark theme comparison sections */
[data-theme="dark"] .comparison-team {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .team-name-ideal {
    color: #ffffff;
}

[data-theme="dark"] .score-real {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffd700;
}

[data-theme="dark"] .score-ideal {
    background: rgba(33, 150, 243, 0.2);
    border: 1px solid rgba(33, 150, 243, 0.3);
    color: #64b5f6;
}

[data-theme="dark"] .bonus-indicator {
    color: #90caf9;
}

[data-theme="dark"] .score-difference.positive {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #81c784;
}

[data-theme="dark"] .score-difference.negative {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #e57373;
}

[data-theme="dark"] .vs-ideal-section {
    background: rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

/* Dark theme match results */
[data-theme="dark"] .match-result.win {
    background: rgba(76, 175, 80, 0.3);
    color: #81c784;
}

[data-theme="dark"] .match-result.loss {
    background: rgba(244, 67, 54, 0.3);
    color: #e57373;
}

[data-theme="dark"] .match-result.draw {
    background: rgba(255, 193, 7, 0.3);
    color: #ffd54f;
}

/* Dark theme additional elements */
[data-theme="dark"] .team-name-match {
    color: #ffffff;
    font-weight: 700;
}

[data-theme="dark"] .match-score-display {
    color: #ffffff;
}

[data-theme="dark"] .giornata-selector label {
    color: #ffffff;
}

[data-theme="dark"] .giornata-selector select {
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}



.ideal-vs-real-comparison h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.ideal-vs-real-comparison h3 i {
    color: #667eea;
}

.comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 450px), 1fr));
    gap: 1rem;
}

.comparison-card {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px var(--shadow);
}

.comparison-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 32px var(--shadow-lg);
    border-color: rgba(102, 126, 234, 0.4);
}

.comparison-header {
    font-weight: 600;
    text-align: center;
    margin-bottom: 1rem;
    color: #333;
    font-size: 0.9rem;
}

.comparison-scores {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.real-score,
.ideal-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.label {
    font-weight: 500;
    font-size: 0.85rem;
}

.real-score .label {
    color: #667eea;
}

.ideal-score .label {
    color: #b8860b;
}

.score {
    font-weight: 600;
    font-family: monospace;
}

.improvement {
    text-align: center;
    padding: 0.5rem;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
}

.improvement.positive {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.improvement.negative {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.improvement.neutral {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

/* Statistics */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.stat-icon {
    font-size: 3rem;
    color: #667eea;
    margin-bottom: 1rem;
}

.stat-info h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.stat-info p {
    color: #666;
    font-weight: 500;
}

.stat-card.worst-points {
    background: linear-gradient(135deg, rgba(255, 99, 71, 0.1), rgba(255, 140, 0, 0.1));
    border-left: 4px solid #ff6347;
}

.stat-card.worst-points .stat-icon {
    color: #ff6347;
}

.stat-card.worst-points .stat-info h3 {
    color: #d63031;
    font-weight: 700;
}

/* Goal Calculation Info */
.goal-calculation-info {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-top: 2rem;
}

.goal-calculation-info h3 {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.goal-calculation-info h3 i {
    color: #667eea;
}

.calculation-rule {
    text-align: center;
}

.calculation-rule p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #333;
}

.examples {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.example {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    padding: 0.8rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
}

.formula {
    background: rgba(102, 126, 234, 0.1);
    padding: 1rem;
    border-radius: 8px;
    font-family: monospace;
    font-size: 1rem;
    color: #667eea;
    border-left: 4px solid #667eea;
}

/* Footer */
.footer {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.5rem 0;
    margin-top: 2rem;
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer p {
    color: white;
    opacity: 0.8;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: white;
    font-size: 1.2rem;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.social-links a:hover {
    opacity: 1;
    transform: translateY(-2px);
}

/* Responsive */

/* Desktop layout */
@media (min-width: 769px) {
    .table-header,
    .team-row {
        display: grid !important;
        grid-template-columns: 60px 1fr 60px 40px 40px 40px 50px 50px 60px 70px 80px;
        gap: 0.5rem;
    }
    
    #ideal-standings-table .table-header,
    #ideal-standings-table .team-row {
        display: grid !important;
        grid-template-columns: 60px 1fr 50px 35px 35px 35px 45px 45px 50px 60px 65px 60px 60px;
    }
}

@media (max-width: 768px) {
    .header .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
    
    .nav-btn {
        flex: 1;
        min-width: 120px;
        max-width: 200px;
        font-size: 0.85rem;
        padding: 0.6rem 0.8rem;
    }
    
    .theme-toggle {
        margin-left: 0;
        margin-top: 0.5rem;
        min-width: 45px;
        padding: 0.6rem;
    }
    
    .section-header {
        flex-direction: column;
        text-align: center;
    }
    
    /* Tabelle responsive */
    .mobile-hide {
        display: none !important;
    }
    
    .mobile-only {
        display: table-cell !important;
    }
    
    .standings-table th,
    .standings-table td {
        padding: 0.8rem 0.4rem;
        font-size: 0.9rem;
    }
    
    .standings-table .team-name {
        text-align: left;
        font-weight: 600;
        font-size: 1rem;
    }
    
    .standings-table .points {
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--primary-color);
    }
    
    .table-header,
    .team-row {
        display: flex !important;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.9rem;
        padding: 0.75rem 0.5rem;
    }
    
    .table-header {
        font-size: 0.75rem;
        font-weight: 600;
        background: rgba(255, 255, 255, 0.1);
        border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    }
    
    /* Mobile column widths - Solo squadra e punteggio */
    .team-name { 
        flex: 1; 
        min-width: 0; 
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 600;
        font-size: 1rem;
    }
    .points { 
        flex: 0 0 60px; 
        text-align: center; 
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--primary-color);
    }
    
    /* Nascondi tutte le altre colonne su mobile */
    .position,
    .wins,
    .goal-difference {
        display: none;
    }
    
    /* Mobile header widths - Solo squadra e punteggio */
    .sortable-header[data-column="name"] { 
        flex: 1; 
        font-weight: 700;
        font-size: 0.9rem;
    }
    .sortable-header[data-column="points"] { 
        flex: 0 0 60px; 
        text-align: center; 
        font-weight: 700;
        font-size: 0.9rem;
    }
    
    /* Nascondi header delle colonne non necessarie su mobile */
    .sortable-header[data-column="position"],
    .sortable-header[data-column="wins"],
    .sortable-header[data-column="goalDifference"] {
        display: none;
    }
    
    #ideal-standings-table .table-header,
    #ideal-standings-table .team-row {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        padding: 0.75rem 0.5rem;
    }
    
    #ideal-standings-table .table-header {
        font-size: 0.8rem;
        font-weight: 700;
    }
    
    /* Per la classifica ideale su mobile, mostra solo nome e punti ideali */
    #ideal-standings-table .team-name {
        font-size: 1rem;
        font-weight: 600;
    }
    
    #ideal-standings-table .points {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--accent-color);
    }
    
    .draws,
    .losses,
    .goals-for,
    .goals-against,
    .avg-score,
    .total-score,
    .position-difference,
    .points-difference {
        display: none;
    }
    
    /* Hide corresponding headers on mobile */
    .sortable-header[data-column="draws"],
    .sortable-header[data-column="losses"],
    .sortable-header[data-column="goalsFor"],
    .sortable-header[data-column="goalsAgainst"],
    .sortable-header[data-column="avgScore"],
    .sortable-header[data-column="totalScore"],
    .sortable-header[data-column="positionDifference"],
    .sortable-header[data-column="pointsDifference"] {
        display: none;
    }
    
    /* Improve header icons visibility on mobile */
    .sortable-header i {
        font-size: 0.7rem;
        margin-left: 0.25rem;
    }
    
    .ideal-comparison-grid {
        gap: 0.75rem;
    }
    
    .ideal-header {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .ideal-header h4 {
        min-width: auto;
        font-size: 0.9rem;
    }
    
    .match-comparison-status {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .scores-comparison {
        font-size: 0.85rem;
    }
    
    .insight-item {
        font-size: 0.85rem;
    }
    
    .commentators {
        flex-direction: column;
        gap: 1rem;
    }
    
    .commentary-dialogue {
        font-size: 0.9rem;
    }
    
    .match-teams {
        flex-direction: column;
        gap: 1rem;
    }
    
    .vs {
        margin: 0;
    }
    
    .footer .container {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }
    
    .main {
        padding: 1rem 0;
    }
    
    .section-header {
        padding: 1.5rem;
    }
    
    .section-header h2 {
        font-size: 1.5rem;
    }
    
    .nav {
        width: 100%;
        justify-content: center;
    }
    
    .nav-btn {
        padding: 10px 15px;
        font-size: 0.8rem;
    }
}

/* Extra small devices */
@media (max-width: 480px) {
    .table-header,
    .team-row {
        gap: 0.2rem;
        font-size: 0.8rem;
        padding: 0.5rem 0.3rem;
    }
    
    .table-header {
        font-size: 0.7rem;
    }
    
    /* Extra small mobile column widths */
    .position { 
        flex: 0 0 28px; 
        font-weight: 600;
    }
    .team-name { 
        flex: 1; 
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.85rem;
    }
    .points { 
        flex: 0 0 35px; 
        font-weight: 600;
    }
    .wins { 
        flex: 0 0 30px; 
    }
    .goal-difference { 
        flex: 0 0 40px; 
        font-weight: 600;
    }
    
    /* Extra small mobile header widths */
    .sortable-header[data-column="position"] { flex: 0 0 28px; }
    .sortable-header[data-column="name"] { flex: 1; }
    .sortable-header[data-column="points"] { flex: 0 0 35px; }
    .sortable-header[data-column="wins"] { flex: 0 0 30px; }
    .sortable-header[data-column="goalDifference"] { flex: 0 0 40px; }
    
    #ideal-standings-table .table-header,
    #ideal-standings-table .team-row {
        gap: 0.15rem;
        font-size: 0.75rem;
        padding: 0.4rem 0.2rem;
    }
    
    #ideal-standings-table .table-header {
        font-size: 0.65rem;
    }
    
    .nav-btn {
        font-size: 0.75rem;
        padding: 0.5rem 0.6rem;
        min-width: 100px;
    }
    
    .theme-toggle {
        min-width: 40px;
        padding: 0.5rem;
    }
    
    .theme-toggle i {
        font-size: 1rem;
    }
    
    .logo h1 {
        font-size: 1.5rem;
    }
    
    .subtitle {
        font-size: 0.8rem;
    }
}

/* Contenitore Classifica Miglior Allenatore */
#coach-ranking-container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Classifica Miglior Allenatore */
.coach-ranking-section {
    background: var(--bg-card);
    color: var(--text-primary);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 10px 30px var(--shadow);
    margin: 2rem 0;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    animation: slideInUp 0.6s ease-out;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    display: block;
}

.coach-ranking-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--primary-color);
}

.coach-ranking-header h3 {
    color: var(--primary-color);
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.coach-ranking-subtitle {
    color: var(--text-secondary);
    margin: 0;
    font-style: italic;
    font-size: 0.9rem;
}

.coach-ranking-table {
    background: var(--bg-color);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    width: 100%;
    table-layout: fixed;
}

.coach-ranking-headers {
    display: grid;
    grid-template-columns: 80px 3fr 120px 120px 120px 140px 3fr;
    gap: 1rem;
    background: var(--primary-color);
    color: white;
    padding: 1rem;
    font-weight: 600;
    font-size: 1rem;
    width: 100%;
}

.coach-ranking-row {
    display: grid;
    grid-template-columns: 80px 3fr 120px 120px 120px 140px 3fr;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
    align-items: center;
    width: 100%;
}

.coach-ranking-row:hover {
    background: var(--hover-bg);
    transform: translateY(-1px);
}

.coach-ranking-row:last-child {
    border-bottom: none;
}

.coach-ranking-row.gold {
    background: linear-gradient(45deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
    border-left: 4px solid #FFD700;
}

.coach-ranking-row.silver {
    background: linear-gradient(45deg, rgba(192, 192, 192, 0.1), rgba(192, 192, 192, 0.05));
    border-left: 4px solid #C0C0C0;
}

.coach-ranking-row.bronze {
    background: linear-gradient(45deg, rgba(205, 127, 50, 0.1), rgba(205, 127, 50, 0.05));
    border-left: 4px solid #CD7F32;
}

.coach-ranking-row.worst {
    background: linear-gradient(45deg, rgba(255, 99, 71, 0.1), rgba(255, 99, 71, 0.05));
    border-left: 4px solid #FF6347;
}

.coach-pos {
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
    font-size: 1.1rem;
}

.coach-team {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1.1rem;
    padding-left: 0.5rem;
}

.coach-real, .coach-ideal {
    text-align: center;
    font-weight: 600;
    font-size: 1rem;
}

.coach-lost {
    text-align: center;
    font-weight: 700;
    color: #ff4757;
    font-size: 1rem;
}

.coach-lost.perfect {
    color: #2ed573;
    font-weight: 700;
}

.coach-efficiency {
    text-align: center;
    font-weight: 600;
    color: var(--text-color);
    font-size: 1rem;
}

.coach-award {
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    padding-left: 0.5rem;
}

.coach-ranking-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.insight-perfect,
.insight-avg,
.insight-best {
    background: var(--bg-color);
    padding: 1.5rem;
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
}

.insight-perfect i {
    color: #2ed573;
}

.insight-avg i {
    color: #3742fa;
}

.insight-best i {
    color: #FFD700;
}

/* Responsive per classifica allenatori */
@media (max-width: 768px) {
    .coach-ranking-headers,
    .coach-ranking-row {
        grid-template-columns: 50px 1fr 80px;
        gap: 0.5rem;
        padding: 0.8rem 0.5rem;
        font-size: 0.9rem;
    }
    
    /* Nascondi colonne non essenziali su mobile */
    .coach-real,
    .coach-ideal,
    .coach-efficiency,
    .coach-award {
        display: none;
    }
    
    /* Nascondi header delle colonne non essenziali */
    .coach-ranking-headers .real-header,
    .coach-ranking-headers .ideal-header,
    .coach-ranking-headers .efficiency-header,
    .coach-ranking-headers .award-header {
        display: none;
    }
    
    /* Migliora la visualizzazione delle colonne rimaste */
    .coach-pos {
        font-size: 1rem;
        font-weight: 700;
    }
    
    .coach-team {
        font-size: 1rem;
        font-weight: 600;
    }
    
    .coach-lost {
        font-size: 1rem;
        font-weight: 700;
        text-align: center;
    }
    
    .coach-ranking-insights {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    
    .insight-perfect,
    .insight-avg,
    .insight-best {
        padding: 0.8rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .coach-ranking-header h3 {
        font-size: 1.2rem;
    }
    
    .coach-ranking-subtitle {
        font-size: 0.8rem;
    }
    
    .coach-ranking-headers,
    .coach-ranking-row {
        grid-template-columns: 45px 1fr 70px;
        gap: 0.4rem;
        font-size: 0.85rem;
        padding: 0.6rem 0.4rem;
    }
    
    /* Su schermi molto piccoli, manteniamo solo le 3 colonne essenziali */
    .coach-pos {
        font-size: 0.9rem;
    }
    
    .coach-team {
        font-size: 0.9rem;
    }
    
    .coach-lost {
        font-size: 0.9rem;
    }
}

/* Stili per il messaggio d'errore */
.error-message {
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    margin: 2rem auto;
    max-width: 600px;
    box-shadow: 0 8px 32px rgba(255, 107, 107, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.error-message h2 {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.error-message p {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.9;
}

.error-message i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    opacity: 0.8;
}

.error-message .error-details {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
    font-family: monospace;
    font-size: 0.9rem;
    text-align: left;
}

/* Tema scuro per messaggio d'errore */
[data-theme="dark"] .error-message {
    background: linear-gradient(135deg, #dc3545, #c82333);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .error-message .error-details {
    background: rgba(0, 0, 0, 0.2);
}

/* Tema light per footer */
[data-theme="light"] .footer p {
    color: #0f172a;
    opacity: 0.8;
}

[data-theme="light"] .social-links a {
    color: #0f172a;
    opacity: 0.8;
}

/* ============================================
   NOTIFICA DI AGGIORNAMENTO E GESTIONE CACHE
   ============================================ */

.update-notification {
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: bottom 0.3s ease;
    min-width: 320px;
    max-width: 90%;
}

.update-notification.show {
    bottom: 20px;
}

.update-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.update-content i {
    font-size: 1.5rem;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.update-content span {
    flex: 1;
    font-weight: 600;
    min-width: 150px;
}

.update-btn,
.dismiss-btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.update-btn {
    background: white;
    color: #667eea;
}

.update-btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.dismiss-btn {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.dismiss-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Responsive per notifica */
@media (max-width: 768px) {
    .update-notification {
        min-width: auto;
        width: calc(100% - 40px);
    }
    
    .update-content {
        justify-content: center;
    }
    
    .update-btn,
    .dismiss-btn {
        flex: 1;
        min-width: 100px;
    }
}

/* Tema scuro per notifica */
[data-theme="dark"] .update-notification {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .update-btn {
    background: #667eea;
    color: white;
}

[data-theme="dark"] .update-btn:hover {
    background: #5568d3;
}

/* ============================================
   INDICATORE DI CARICAMENTO
   ============================================ */

.loading-indicator {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(102, 126, 234, 0.95);
    backdrop-filter: blur(10px);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    transition: top 0.3s ease;
    min-width: 250px;
}

.loading-indicator.show {
    top: 20px;
}

.loading-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
}

.loading-content i {
    font-size: 1.5rem;
}

.loading-content span {
    font-weight: 600;
}

/* Notifica di Successo */
.success-notification {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(16, 185, 129, 0.3);
    z-index: 10000;
    transition: top 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
}

.success-notification.show {
    top: 20px;
}

.success-notification i {
    font-size: 1.5rem;
}

/* Tema scuro */
[data-theme="dark"] .loading-indicator {
    background: rgba(71, 85, 105, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .success-notification {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* Responsive */
@media (max-width: 768px) {
    .loading-indicator,
    .success-notification {
        min-width: auto;
        width: calc(100% - 40px);
        max-width: 350px;
    }
    
    .loading-content span {
        font-size: 0.9rem;
    }
}