/* Temi */
/* Tema predefinito (già definito nel CSS principale) */

/* Tema scuro */
.dark-theme {
    background-color: #222;
    color: #f5f5f5;
}

.dark-theme header,
.dark-theme .game-card,
.dark-theme .mode-card,
.dark-theme .participants-container,
.dark-theme .total-scores,
.dark-theme .add-scores,
.dark-theme .score-history,
.dark-theme .filters,
.dark-theme .match-card,
.dark-theme .final-result,
.dark-theme .round-scores,
.dark-theme .share-options,
.dark-theme .profile-section,
.dark-theme .modal-content {
    background-color: #333;
    color: #f5f5f5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.dark-theme .input-group input,
.dark-theme .input-group select,
.dark-theme .filter-group select,
.dark-theme .number-select,
.dark-theme .final-score {
    background-color: #444;
    color: #f5f5f5;
    border-color: #555;
}

.dark-theme .score-card,
.dark-theme .podium-position,
.dark-theme .favorite-card,
.dark-theme .stat-card {
    background-color: #444;
}

.dark-theme .scores-table th {
    background-color: #444;
}

.dark-theme .scores-table td,
.dark-theme .scores-table th {
    border-color: #555;
}

.dark-theme .back-link a {
    color: #3498db;
}

/* Tema chiaro */
.light-theme {
    background-color: #f9f9f9;
    color: #333;
}

.light-theme header,
.light-theme .game-card,
.light-theme .mode-card,
.light-theme .participants-container,
.light-theme .total-scores,
.light-theme .add-scores,
.light-theme .score-history,
.light-theme .filters,
.light-theme .match-card,
.light-theme .final-result,
.light-theme .round-scores,
.light-theme .share-options,
.light-theme .profile-section,
.light-theme .modal-content {
    background-color: #fff;
    color: #333;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.light-theme .score-card,
.light-theme .podium-position,
.light-theme .favorite-card,
.light-theme .stat-card {
    background-color: #f5f5f5;
}

/* Tema colorato */
.colorful-theme {
    background-color: #e8f4f8;
    color: #333;
}

.colorful-theme header {
    background-color: #3498db;
    color: white;
}

.colorful-theme .game-card {
    background-color: #9b59b6;
    color: white;
}

.colorful-theme .mode-card {
    background-color: #2ecc71;
    color: white;
}

.colorful-theme .participants-container {
    background-color: #f1c40f;
    color: #333;
}

.colorful-theme .total-scores {
    background-color: #e74c3c;
    color: white;
}

.colorful-theme .add-scores {
    background-color: #1abc9c;
    color: white;
}

.colorful-theme .score-history {
    background-color: #3498db;
    color: white;
}

.colorful-theme .filters {
    background-color: #9b59b6;
    color: white;
}

.colorful-theme .match-card {
    background-color: #2ecc71;
    color: white;
}

.colorful-theme .final-result {
    background-color: #f1c40f;
    color: #333;
}

.colorful-theme .round-scores {
    background-color: #e74c3c;
    color: white;
}

.colorful-theme .share-options {
    background-color: #1abc9c;
    color: white;
}

.colorful-theme .profile-section {
    background-color: #3498db;
    color: white;
}

.colorful-theme .score-card,
.colorful-theme .podium-position,
.colorful-theme .favorite-card,
.colorful-theme .stat-card {
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
}

.colorful-theme .btn-primary {
    background-color: #9b59b6;
}

.colorful-theme .btn-secondary {
    background-color: #2ecc71;
}

.colorful-theme .btn-danger {
    background-color: #e74c3c;
}

/* Stili per i messaggi di errore e successo */
.error-container {
    background-color: #f8d7da;
    color: #721c24;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.error-message {
    background-color: #f8d7da;
    color: #721c24;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

.success-message {
    background-color: #d4edda;
    color: #155724;
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

/* Stili per il profilo utente */
.profile-section {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.preferences-form {
    max-width: 500px;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.stat-card {
    text-align: center;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
}

.stat-detail {
    font-size: 0.9rem;
    color: #7f8c8d;
}

.favorites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.favorite-card {
    text-align: center;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.profile-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Stili per l'autenticazione */
.auth-form {
    max-width: 400px;
    margin: 0 auto;
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.auth-links {
    text-align: center;
    margin-top: 1.5rem;
}

.auth-links a {
    color: #3498db;
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

/* Stili per l'avvio rapido */
.quick-start {
    margin-top: 2rem;
}

.quick-start-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-top: 1rem;
    text-align: center;
}

.quick-start-card h3 {
    margin-bottom: 0.5rem;
}

.quick-start-card .btn {
    margin-top: 1rem;
}

/* Stili per le partite recenti */
.recent-matches {
    margin-top: 2rem;
}

/* Media queries per schermi più grandi */
@media (min-width: 768px) {
    .profile-actions {
        flex-direction: row;
        justify-content: center;
    }
}