<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Pickleball ELO Tracker{% endblock %}</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- HTMX -->
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
    <style>
        :root {
            --pitt-blue: #003594;
            --pitt-gold: #FFB81C;
        }
        body {
            @apply bg-gradient-to-br from-blue-900 via-blue-800 to-blue-950;
        }
        .pitt-primary {
            @apply text-blue-900;
        }
        .pitt-gold {
            @apply text-yellow-500;
        }
        .btn-primary {
            @apply px-4 py-2 bg-blue-900 text-white rounded-lg font-bold hover:bg-blue-950 transition-all duration-200 hover:shadow-lg hover:translate-y-[-2px] inline-block;
        }
        .btn-success {
            @apply px-4 py-2 bg-green-600 text-white rounded-lg font-bold hover:bg-green-700 transition-all;
        }
        .btn-warning {
            @apply px-4 py-2 bg-yellow-500 text-white rounded-lg font-bold hover:bg-yellow-600 transition-all;
        }
        .btn-danger {
            @apply px-4 py-2 bg-red-600 text-white rounded-lg font-bold hover:bg-red-700 transition-all;
        }
        .card {
            @apply bg-white rounded-lg shadow-lg p-6;
        }
        .stat-card {
            @apply bg-gradient-to-br from-blue-900 to-blue-950 text-white p-6 rounded-lg shadow-lg text-center;
        }
        .alert-info {
            @apply bg-blue-100 text-blue-900 p-4 rounded-lg border border-blue-300 mb-4;
        }
        .alert-success {
            @apply bg-green-100 text-green-900 p-4 rounded-lg border border-green-300 mb-4;
        }
        .alert-error {
            @apply bg-red-100 text-red-900 p-4 rounded-lg border border-red-300 mb-4;
        }
        .leaderboard-entry {
            @apply flex items-center justify-between p-4 bg-gray-50 rounded-lg mb-2 hover:bg-gray-100 transition-colors;
        }
        .rank {
            @apply text-3xl font-bold text-yellow-500 mr-4 min-w-12;
        }
        .player-rating {
            @apply text-2xl font-bold text-blue-900;
        }
        .form-input {
            @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-blue-900 focus:ring-2 focus:ring-blue-200;
        }
    </style>
    {% block extra_css %}{% endblock %}
</head>
<body class="min-h-screen">
    <div class="max-w-6xl mx-auto px-4 py-8">
        {% block content %}{% endblock %}
    </div>
</body>
</html>
