<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Morena Pigeon Dashboard</title>
    
    <!-- Google Fonts for Professional Typography -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
    
    <!-- Pre-compiled Tailwind CSS for offline stability & fast loading -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    
    <!-- PDF Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    
    <!-- Canvas to Image (JPG) Library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    
    <style>
        body { 
            background-color: #f8fafc; 
            color: #0f172a; 
            -webkit-font-smoothing: antialiased; 
            font-family: 'Inter', sans-serif; 
            overflow-x: hidden; 
            width: 100%;
        }
        
        /* EXTREME FIX: Default SVG sizing to prevent Full Screen Icons */
        svg { width: 1.5rem; height: 1.5rem; display: inline-block; flex-shrink: 0; vertical-align: middle; }

        /* Custom Scrollbar for a premium feel */
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: #f1f5f9; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

        /* Smooth Transitions */
        .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
        
        /* Modal Animation */
        .modal { opacity: 0; pointer-events: none; transition: all 0.3s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); background-color: rgba(15, 23, 42, 0.6); z-index: 100; }
        .modal.active { opacity: 1; pointer-events: auto; }
        .modal-content { transform: scale(0.95) translateY(10px); transition: all 0.3s ease; max-height: 95vh; overflow-y: auto; }
        .modal.active .modal-content { transform: scale(1) translateY(0); }

        /* Toast Animation */
        .toast { transform: translate(-50%, 20px); opacity: 0; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); pointer-events: none; }
        .toast.show { transform: translate(-50%, 0); opacity: 1; }

        /* Hide file input */
        input[type="file"] { display: none; }
        
        /* Dropdown fix for Safari/Mobile */
        select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
    </style>
</head>
<body class="min-h-screen flex flex-col">

    <!-- Premium Header -->
    <header class="bg-white bg-opacity-95 border-b border-gray-200 sticky top-0 shadow-sm" style="z-index: 40; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex flex-col sm:flex-row justify-between items-center gap-4">
            <div class="flex items-center gap-3">
                <div class="bg-green-600 p-2 rounded-lg text-white shadow-md relative">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
                </div>
                <div>
                    <h1 class="text-xl font-bold text-gray-900 tracking-tight">Morena Pigeon Dashboard</h1>
                    <p class="text-xs text-gray-500 font-medium">Tournament / Match / Score Management System</p>
                </div>
            </div>
            
            <div class="flex flex-wrap sm:flex-nowrap items-center gap-3 w-full sm:w-auto justify-between sm:justify-end">
                <!-- Status Badge -->
                <div id="cloudSyncStatus" class="hidden md:flex items-center gap-2 bg-blue-50 border border-blue-200 text-blue-700 px-3 py-1.5 rounded-full text-xs font-semibold shadow-sm transition-colors">
                    <div class="w-2 h-2 rounded-full bg-blue-500 animate-pulse" id="cloudSyncDot"></div>
                    <span id="cloudSyncText">Live Sync ON</span>
                </div>

                <button onclick="exportData()" class="flex-1 sm:flex-none justify-center flex items-center gap-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 hover:text-gray-900 px-4 py-2 rounded-lg text-sm font-semibold transition-all shadow-sm">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Backup
                </button>
                
                <label class="flex-1 sm:flex-none justify-center flex items-center gap-2 bg-green-600 border border-transparent text-white hover:bg-green-700 px-4 py-2 rounded-lg text-sm font-semibold cursor-pointer transition-all shadow-md">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2H5a2 2 0 0 1-2-2v-4"/></svg>
                    Restore
                    <input type="file" id="importFile" accept=".json" onchange="importData(event)">
                </label>
            </div>
        </div>
    </header>

    <!-- Main Layout -->
    <main class="flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8 w-full flex flex-col gap-6">
        
        <!-- Top Action Bar -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 flex flex-col md:flex-row justify-between items-start md:items-center gap-4 w-full">
            <div class="flex flex-col sm:flex-row flex-wrap lg:flex-nowrap items-center gap-3 w-full">
                
                <!-- 1. Tournament Dropdown -->
                <div class="relative w-full sm:flex-1 min-w-[150px] lg:min-w-[210px] group">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none text-yellow-400 z-10">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
                    </div>
                    <select id="tourSelect" onchange="handleMenuChange('tournament', this)" class="w-full appearance-none bg-gray-900 hover:bg-gray-800 text-white pl-11 pr-10 py-3 rounded-lg font-bold shadow-md outline-none cursor-pointer border border-gray-800 focus:ring-2 focus:ring-gray-400 transition-all text-sm tracking-wide text-ellipsis overflow-hidden whitespace-nowrap">
                        <!-- JS se bhara jayega -->
                    </select>
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none text-gray-400 z-10 group-hover:text-white transition-colors">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>
                    </div>
                </div>

                <!-- 2. Match Dropdown -->
                <div class="relative w-full sm:flex-1 min-w-[150px] lg:min-w-[210px] group">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none text-purple-200 z-10">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><polyline points="14.5 17.5 3 6 3 3 6 3 17.5 14.5"/><line x1="13" y1="19" x2="19" y2="13"/><line x1="16" y1="16" x2="20" y2="20"/><line x1="19" y1="21" x2="21" y2="19"/><polyline points="14.5 6.5 18 3 21 3 21 6 17.5 9.5"/><line x1="5" y1="14" x2="9" y2="18"/><line x1="7" y1="17" x2="4" y2="20"/><line x1="3" y1="19" x2="5" y2="21"/></svg>
                    </div>
                    <select id="matchSelect" onchange="handleMenuChange('match', this)" class="w-full appearance-none bg-purple-700 hover:bg-purple-800 text-white pl-11 pr-10 py-3 rounded-lg font-bold shadow-md outline-none cursor-pointer border border-purple-800 focus:ring-2 focus:ring-purple-400 transition-all text-sm tracking-wide text-ellipsis overflow-hidden whitespace-nowrap">
                        <!-- JS se bhara jayega -->
                    </select>
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none text-purple-300 z-10 group-hover:text-white transition-colors">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>
                    </div>
                </div>

                <!-- 3. Calculator Dropdown -->
                <div class="relative w-full sm:flex-1 min-w-[150px] lg:min-w-[210px] group">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none text-green-200 z-10">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="16" y1="14" x2="16" y2="14.01"/><line x1="12" y1="14" x2="12" y2="14.01"/><line x1="8" y1="14" x2="8" y2="14.01"/><line x1="16" y1="10" x2="16" y2="10.01"/><line x1="12" y1="10" x2="12" y2="10.01"/><line x1="8" y1="10" x2="8" y2="10.01"/><line x1="16" y1="18" x2="16" y2="18.01"/><line x1="12" y1="18" x2="12" y2="18.01"/><line x1="8" y1="18" x2="8" y2="18.01"/></svg>
                    </div>
                    <select id="calcSelect" onchange="handleMenuChange('calculator', this)" class="w-full appearance-none bg-green-600 hover:bg-green-700 text-white pl-11 pr-10 py-3 rounded-lg font-bold shadow-md outline-none cursor-pointer border border-green-700 focus:ring-2 focus:ring-green-400 transition-all text-sm tracking-wide text-ellipsis overflow-hidden whitespace-nowrap">
                        <!-- JS se bhara jayega -->
                    </select>
                    <div class="absolute inset-y-0 right-0 flex items-center pr-3.5 pointer-events-none text-green-200 z-10 group-hover:text-white transition-colors">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path></svg>
                    </div>
                </div>

                <div class="flex-grow hidden lg:block"></div>

                <span id="tourPigeonCountBadge" class="hidden bg-yellow-50 border border-yellow-200 text-yellow-700 px-3 py-2 rounded-lg text-sm font-bold shadow-sm items-center gap-2">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
                    <span id="tourPigeonText"></span>
                </span>

                <div class="flex gap-3 w-full sm:w-auto">
                    <!-- Recycle Bin Button -->
                    <button onclick="openRecycleBinModal()" title="Recycle Bin (Deleted Items)" class="flex-1 sm:flex-none p-2.5 text-blue-600 bg-blue-50 hover:bg-blue-500 hover:text-white rounded-lg transition-all border border-blue-200 shadow-sm flex items-center justify-center group relative">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 transition-transform group-hover:scale-110"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
                        <span id="recycleBinBadge" class="absolute -top-2 -right-2 bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full hidden shadow-sm border border-white">0</span>
                    </button>

                    <button onclick="openDeleteEventModal()" title="Koi Bhi Event Delete Karein" class="flex-1 sm:flex-none p-2.5 text-red-500 bg-red-50 hover:bg-red-500 hover:text-white rounded-lg transition-all border border-red-200 shadow-sm flex items-center justify-center group">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5 transition-transform group-hover:scale-110"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                    </button>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            
            <!-- Left Column: Form -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
                    <div class="bg-gray-50 border-b border-gray-200 px-4 sm:px-6 py-4 flex items-center gap-3">
                        <div class="bg-green-100 text-green-600 p-1.5 rounded-md">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                        </div>
                        <h2 class="text-lg font-bold text-gray-800">Nayi Udaan Darj Karein</h2>
                    </div>
                    
                    <form id="flightForm" class="p-4 sm:p-6 flex flex-col gap-5">
                        <!-- Player Selection -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Khiladi / Team Ka Naam</label>
                            <div class="flex gap-2">
                                <select id="playerName" required onchange="onPlayerSelectionChange()" class="flex-grow w-0 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 block p-2.5 outline-none transition-all font-semibold">
                                    <option value="" disabled selected>-- Pehle Khiladi Chunein --</option>
                                </select>
                                <button type="button" id="addPlayerBtn" onclick="openAddPlayerModal()" title="Naya Khiladi Jodein" class="bg-green-50 text-green-600 border border-green-200 hover:bg-green-600 hover:text-white p-2.5 rounded-lg transition-all flex-shrink-0">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
                                </button>
                            </div>
                        </div>

                        <!-- Rules Box -->
                        <div class="bg-blue-50 border border-blue-100 rounded-xl p-4">
                            <h3 class="text-sm font-bold text-blue-800 mb-3 flex items-center gap-2">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                Niyam & Shuruwat
                            </h3>
                            
                            <div class="mb-3">
                                <label class="block text-xs font-semibold text-blue-700 mb-1">Border Time (Ghante mein)</label>
                                <input type="number" id="formBorderTime" onchange="updateRulesDynamically()" placeholder="Udaharan: 2" min="0" step="0.5" class="w-full bg-white border border-blue-200 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block p-2 outline-none">
                            </div>

                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3">
                                <div>
                                    <label class="block text-xs font-semibold text-blue-700 mb-1">Udaan Tareekh</label>
                                    <input type="date" id="startDate" required class="w-full bg-white border border-blue-200 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block p-2 outline-none">
                                </div>
                                <div>
                                    <label class="block text-xs font-semibold text-blue-700 mb-1">Udaan Shuru (Start)</label>
                                    <input type="time" id="startTime" required class="w-full bg-white border border-blue-200 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block p-2 outline-none">
                                </div>
                            </div>

                            <div>
                                <label class="block text-xs font-semibold text-blue-700 mb-1">Max End Time (Aakhri Samay)</label>
                                <input type="time" id="formMaxEndTime" onchange="updateRulesDynamically()" class="w-full bg-white border border-blue-200 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block p-2 outline-none">
                            </div>
                        </div>

                        <!-- Pigeon Info (Optional) -->
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-1.5">Kabutar Ka Naam / Tag (Optional)</label>
                            <input type="text" id="pigeonName" placeholder="Khali chhodne par 'Kabutar 1' automatic aayega" class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 block p-2.5 outline-none transition-all">
                        </div>

                        <!-- Return Box with Missing Option -->
                        <div class="bg-green-50 border border-green-200 rounded-xl p-4">
                            <h3 class="text-sm font-bold text-green-800 mb-3 flex items-center gap-2">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
                                Kabutar Ki Waapsi (End)
                            </h3>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-xs font-semibold text-green-700 mb-1">Waapsi Tareekh</label>
                                    <input type="date" id="endDate" required class="w-full bg-white border border-green-200 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 block p-2 outline-none disabled:opacity-50">
                                </div>
                                <div>
                                    <label class="block text-xs font-semibold text-green-700 mb-1">Waapsi Samay</label>
                                    <input type="time" id="endTime" required class="w-full bg-white border border-green-200 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 block p-2 outline-none disabled:opacity-50">
                                </div>
                            </div>
                            
                            <!-- Missing Option Checkbox -->
                            <div class="mt-4 flex items-center gap-2 bg-red-50 p-2.5 rounded-lg border border-red-200 cursor-pointer" onclick="document.getElementById('isMissing').click()">
                                <input type="checkbox" id="isMissing" onchange="toggleMissingStatus()" onclick="event.stopPropagation()" class="w-4 h-4 text-red-600 rounded border-red-300 focus:ring-red-500 cursor-pointer">
                                <label for="isMissing" class="text-sm font-bold text-red-700 cursor-pointer pointer-events-none flex items-center gap-1">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="w-4 h-4"><path d="M18 6L6 18M6 6l12 12"/></svg>
                                    Missing (Ghar Nahi Baitha)
                                </label>
                            </div>
                        </div>

                        <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-md transition-all flex items-center justify-center gap-2 mt-2">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                            Score Board Mein Jodein
                        </button>
                    </form>
                </div>
            </div>

            <!-- Right Column: Dashboard & Tables -->
            <div class="lg:col-span-2 flex flex-col h-full w-full overflow-hidden">
                <div class="bg-white rounded-2xl shadow-sm border border-gray-200 flex-grow flex flex-col overflow-hidden w-full">
                    
                    <!-- Premium Tabs -->
                    <div class="flex border-b border-gray-200 px-2 pt-2 bg-gray-50 overflow-x-auto custom-scrollbar w-full">
                        <button id="btnLeaderboard" onclick="switchTab('leaderboard')" class="whitespace-nowrap px-5 py-3.5 text-sm font-bold border-b-2 flex items-center gap-2 transition-all border-green-600 text-green-700 bg-white rounded-t-lg">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
                            Leaderboard (Result)
                        </button>
                        <button id="btnRecords" onclick="switchTab('records')" class="whitespace-nowrap px-5 py-3.5 text-sm font-semibold border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100 flex items-center gap-2 rounded-t-lg transition-all">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                            Sabhi Udaan Record
                        </button>
                        <div class="flex-grow"></div>
                    </div>

                    <!-- View 1: Leaderboard -->
                    <div id="viewLeaderboard" class="flex-grow flex flex-col p-4 bg-white w-full">
                        <div class="flex justify-end gap-3 mb-4 hidden w-full overflow-x-auto" id="leaderboardActionBtns">
                            <button onclick="generateLeaderboardPreview()" class="whitespace-nowrap bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-bold shadow-sm transition-all flex items-center gap-2">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                                Leaderboard Preview / Print
                            </button>
                        </div>
                        <div class="overflow-x-auto rounded-xl border border-gray-200 shadow-sm hidden w-full max-w-full" id="leaderboardTableContainer">
                            <table class="w-full text-sm text-left text-gray-600 whitespace-nowrap sm:whitespace-normal">
                                <thead class="text-xs text-gray-700 uppercase bg-gray-50 border-b border-gray-200">
                                    <tr>
                                        <th class="px-4 py-3 text-center w-16 sm:w-20">Rank</th>
                                        <th class="px-4 py-3 text-left">Khiladi / Team</th>
                                        <th class="px-4 py-3 text-center hidden sm:table-cell">City/Place</th>
                                        <th class="px-4 py-3 text-center">Kabutar</th>
                                        <th class="px-4 py-3 text-right">Total Score</th>
                                        <th class="px-4 py-3 text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="leaderboardBody" class="divide-y divide-gray-100"></tbody>
                            </table>
                        </div>
                        <div id="emptyLeaderboard" class="flex flex-col items-center justify-center py-16 text-gray-400">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="mb-4 text-gray-300" style="width: 64px; height: 64px;"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
                            <p class="font-medium text-gray-500">Abhi koi khiladi ya score nahi hai.</p>
                        </div>
                    </div>

                    <!-- View 2: Records -->
                    <div id="viewRecords" class="hidden flex-grow flex flex-col p-4 bg-white w-full">
                        <div class="bg-gray-50 p-3 rounded-xl border border-gray-200 mb-4 flex flex-col sm:flex-row items-start sm:items-center gap-3">
                            <div class="flex items-center gap-2 w-full sm:w-auto">
                                <label class="text-sm font-bold text-gray-700 flex items-center gap-2 whitespace-nowrap">
                                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4 text-blue-500"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                                    Filter Khiladi:
                                </label>
                                <select id="recordPlayerFilter" onchange="renderRecords()" class="flex-grow sm:flex-grow-0 bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2 outline-none shadow-sm font-semibold min-w-[150px]">
                                    <option value="" selected>-- Khiladi Chunein --</option>
                                </select>
                            </div>
                            
                            <div class="flex flex-col sm:flex-row flex-wrap gap-2 w-full sm:w-auto sm:ml-auto">
                                <span id="recordPlayerStartTime" class="hidden items-center justify-between sm:justify-start gap-1.5 bg-purple-50 text-purple-700 px-3 py-1.5 rounded-lg shadow-sm border border-purple-200 uppercase tracking-wide text-xs sm:text-sm">
                                </span>
                                
                                <span id="recordPlayerTotalTime" class="hidden items-center justify-between sm:justify-start gap-2 bg-blue-50 text-blue-800 px-3 py-1.5 rounded-lg shadow-sm border border-blue-200 text-xs sm:text-sm">
                                </span>
                            </div>
                        </div>
                        
                        <div class="overflow-x-auto rounded-xl border border-gray-200 shadow-sm hidden w-full max-w-full" id="recordsTableContainer">
                            <table class="w-full text-sm text-left text-gray-600 whitespace-nowrap sm:whitespace-normal">
                                <thead class="text-xs text-gray-700 uppercase bg-gray-50 border-b border-gray-200">
                                    <tr>
                                        <th class="px-3 py-3 text-center w-12">Sr.</th>
                                        <th class="px-3 py-3 text-left">Kabutar Ka Naam</th>
                                        <th class="px-3 py-3 text-center">Waapsi Time</th>
                                        <th class="px-3 py-3 text-center">Pigeon Time</th>
                                        <th class="px-3 py-3 text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="recordsBody" class="divide-y divide-gray-100"></tbody>
                            </table>
                        </div>
                        
                        <div id="emptyRecords" class="flex flex-col items-center justify-center py-16 text-gray-400">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="mb-4 text-gray-300" style="width: 64px; height: 64px;"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                            <p class="font-medium text-gray-500 text-center" id="emptyRecordsText">Kripya record dekhne ke liye upar se <br><b class="text-gray-700">Khiladi chunein</b>.</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </main>

    <!-- Modal Background & Layouts -->
    <div id="errorModal" class="modal fixed inset-0 flex items-center justify-center" style="z-index: 50;">
        <div class="modal-content bg-white rounded-2xl shadow-2xl p-6 w-full max-w-sm mx-4 border-t-4 border-red-500 text-center">
            <div class="bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4 text-red-500" style="width: 64px; height: 64px;">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-8 h-8"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
            </div>
            <h3 id="errorTitle" class="text-xl font-bold text-gray-900 mb-2">Error</h3>
            <p id="errorText" class="text-gray-500 text-sm mb-6">Kuch galat ho gaya.</p>
            <button onclick="closeError()" class="w-full bg-red-500 hover:bg-red-600 text-white font-bold py-2.5 rounded-lg transition-colors">Theek Hai</button>
        </div>
    </div>

    <!-- NEW DELETE EVENT MODAL -->
    <div id="deleteEventModal" class="modal fixed inset-0 flex items-center justify-center">
        <div class="modal-content bg-white rounded-2xl shadow-2xl p-6 sm:p-8 w-full max-w-md mx-4">
            <div class="flex justify-between items-center mb-6 border-b border-gray-100 pb-4">
                <h3 class="text-lg font-bold text-gray-900 flex items-center gap-3">
                    <div class="bg-red-100 p-2 rounded-lg text-red-600">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                    </div>
                    Koi Bhi Event Delete Karein
                </h3>
                <button onclick="closeDeleteEventModal()" class="text-gray-400 hover:text-red-500 transition-colors bg-gray-50 hover:bg-red-50 p-2 rounded-lg"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
            </div>
            <div class="space-y-5 mb-8">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Delete Karne Ke Liye Chunein</label>
                    <select id="eventToDelete" class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 block p-3 outline-none font-semibold">
                        <!-- Options filled via JS -->
                    </select>
                </div>
            </div>
            <button onclick="confirmDeleteEvent()" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3.5 rounded-lg shadow-md transition-colors">Recycle Bin Mein Dalein</button>
        </div>
    </div>

    <!-- RECYCLE BIN MODAL -->
    <div id="recycleBinModal" class="modal fixed inset-0 flex items-center justify-center" style="z-index: 65;">
        <div class="modal-content bg-white rounded-2xl shadow-2xl p-4 sm:p-6 w-full max-w-4xl mx-4">
            <div class="flex justify-between items-center mb-4 border-b border-gray-100 pb-3">
                <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2">
                    <div class="bg-blue-100 p-2 rounded-lg text-blue-600">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="w-5 h-5"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
                    </div>
                    Recycle Bin
                </h3>
                <div class="flex items-center gap-3">
                    <button onclick="emptyRecycleBin()" class="text-red-500 bg-red-50 hover:bg-red-100 hover:text-red-700 px-3 py-1.5 rounded-lg text-xs font-bold transition-all border border-red-100">Empty Bin</button>
                    <button onclick="closeRecycleBinModal()" class="text-gray-400 hover:text-red-500 transition-colors bg-gray-50 hover:bg-red-50 p-2 rounded-lg"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
                </div>
            </div>
            
            <div class="overflow-auto bg-gray-50 rounded-xl border border-gray-200" style="max-height: 60vh;">
                <table class="w-full text-sm text-left text-gray-600">
                    <thead class="text-xs text-gray-700 uppercase bg-gray-100 border-b border-gray-200 sticky top-0">
                        <tr>
                            <th class="px-4 py-3">Delete Hui Entry</th>
                            <th class="px-4 py-3">Kya Tha?</th>
                            <th class="px-4 py-3">Delete Time</th>
                            <th class="px-4 py-3 text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody id="recycleBinBody" class="divide-y divide-gray-200 bg-white">
                        <!-- Filled by JS -->
                    </tbody>
                </table>
                <div id="emptyBinMessage" class="hidden flex-col items-center justify-center py-12 text-gray-400 bg-white">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="w-12 h-12 mb-3 text-gray-300"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
                    <p class="font-medium text-gray-500">Recycle Bin bilkul khali hai.</p>
                </div>
            </div>
        </div>
    </div>

    <div id="addPlayerModal" class="modal fixed inset-0 flex items-center justify-center" style="z-index: 50;">
        <div class="modal-content bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md mx-4">
            <div class="flex justify-between items-center mb-5 border-b border-gray-100 pb-3">
                <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5 text-green-600"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
                    Naya Khiladi Jodein
                </h3>
                <button onclick="closeAddPlayerModal()" class="text-gray-400 hover:text-red-500 transition-colors"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-6 h-6"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
            </div>
            <div class="space-y-4 mb-6">
                <div>
                    <input type="text" id="newPlayerNameInput" placeholder="Khiladi ya Team ka naam..." class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-3 outline-none">
                </div>
                <div>
                    <input type="text" id="newPlayerCityInput" placeholder="City/Place (Optional)..." class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-3 outline-none">
                </div>
            </div>
            <button onclick="addNewPlayer()" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg shadow-md transition-colors">Khiladi Save Karein</button>
        </div>
    </div>

    <div id="createTournamentModal" class="modal fixed inset-0 flex items-center justify-center" style="z-index: 50;">
        <div class="modal-content bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md mx-4 overflow-y-auto custom-scrollbar">
            <div class="flex justify-between items-center mb-5 border-b border-gray-100 pb-3">
                <h3 id="createModalTitle" class="text-lg font-bold text-gray-900 flex items-center gap-2">
                    <!-- Title dynamically set hoga -->
                </h3>
                <button onclick="closeCreateTournamentModal()" class="text-gray-400 hover:text-red-500 transition-colors"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-6 h-6"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
            </div>
            
            <div class="space-y-4 mb-6">
                <div>
                    <label id="eventNameLabel" class="block text-sm font-semibold text-gray-700 mb-1">Tournament / Club Ka Naam</label>
                    <input type="text" id="newTournamentName" placeholder="Jaise: Star Pigeon Club" class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-3 outline-none">
                </div>

                <div id="calcCityBox" class="hidden">
                    <label class="block text-sm font-semibold text-gray-700 mb-1">City/Place (Optional)</label>
                    <input type="text" id="calcCityInput" placeholder="Khiladi ka City/Place..." class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-3 outline-none">
                </div>
                
                <!-- 1v1 Players Box -->
                <div id="matchPlayersBox" class="hidden bg-blue-50 border border-blue-200 rounded-xl p-4 space-y-3">
                    <h3 class="text-sm font-bold text-blue-800">Dono Khiladiyon Ke Naam Aur City/Place</h3>
                    <div class="flex flex-col sm:flex-row gap-2">
                        <input type="text" id="player1Name" placeholder="Pehla Khiladi (Player 1)" class="w-full bg-white border border-blue-200 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none">
                        <input type="text" id="player1City" placeholder="City/Place (Optional)" class="w-full bg-white border border-blue-200 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none">
                    </div>
                    <div class="flex flex-col sm:flex-row gap-2">
                        <input type="text" id="player2Name" placeholder="Dusra Khiladi (Player 2)" class="w-full bg-white border border-blue-200 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none">
                        <input type="text" id="player2City" placeholder="City/Place (Optional)" class="w-full bg-white border border-blue-200 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 outline-none">
                    </div>
                </div>

                <div id="pigeonCountBox">
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Kul Kabutar (Optional)</label>
                    <input type="number" id="newTournamentPigeons" placeholder="Jaise: 7, 11, 21..." min="1" class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-3 outline-none">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Shuruwat Ki Tareekh</label>
                    <input type="date" id="newTournamentDate" class="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-3 outline-none">
                </div>
            </div>
            <button onclick="createNewTournament()" class="w-full bg-gray-900 hover:bg-black text-white font-bold py-3 rounded-lg shadow-md transition-colors">Save Karein</button>
        </div>
    </div>

    <!-- PDF PREVIEW MODAL -->
    <div id="pdfPreviewModal" class="modal fixed inset-0 flex items-center justify-center" style="z-index: 60;">
        <div class="modal-content bg-white rounded-2xl shadow-2xl p-4 sm:p-6 w-full max-w-4xl mx-4">
            <div class="flex justify-between items-center mb-4 border-b border-gray-100 pb-3">
                <h3 class="text-lg font-bold text-gray-900 flex items-center gap-2">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5 text-blue-600"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
                    Scorecard Preview
                </h3>
                <button onclick="closePdfPreviewModal()" class="text-gray-400 hover:text-red-500 transition-colors"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-6 h-6"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
            </div>
            <p class="text-sm text-gray-500 mb-3 hidden sm:block">Aapka result niche preview mein dikh raha hai. Ise JPG image ya PDF ke roop mein download karein.</p>
            
            <div id="previewContainer" class="overflow-auto bg-gray-100 p-2 sm:p-4 rounded-xl border border-gray-200 custom-scrollbar flex justify-center" style="max-height: 55vh;">
                <!-- Preview Content will be loaded here -->
            </div>
            
            <div class="flex flex-col sm:flex-row gap-3 mt-5">
                <button onclick="closePdfPreviewModal()" class="flex-1 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 py-3 rounded-lg font-semibold transition-all">Cancel</button>
                
                <button onclick="downloadActualJPG()" class="bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-bold shadow-md transition-all flex justify-center items-center gap-2" style="flex: 1.5;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                    JPG Download
                </button>

                <button onclick="downloadActualPDF()" class="bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-bold shadow-md transition-all flex justify-center items-center gap-2" style="flex: 1.5;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-5 h-5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    PDF Download
                </button>
            </div>
        </div>
    </div>

    <!-- Hidden Container for PDF Generation -->
    <div id="pdf-hidden-wrapper" style="width: 0; height: 0; overflow: hidden; position: fixed; top: 0; left: 0;">
        <div id="scorecard-print-area"></div>
    </div>

    <!-- Modern Toast Notification -->
    <div id="toast" class="toast fixed bottom-6 left-1/2 bg-gray-900 bg-opacity-90 text-white px-5 py-3 rounded-full text-sm font-semibold shadow-xl flex items-center gap-2" style="z-index: 70;">
        <svg viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2" class="w-5 h-5"><polyline points="20 6 9 17 4 12"/></svg>
        <span id="toastMessage">Data Auto-Save Ho Gaya!</span>
    </div>

    <!-- JAVASCRIPT LOGIC -->
    <script>
        function sanitizeHTML(str) {
            if (typeof str !== 'string') return str;
            return str.replace(/[&<>'"]/g, function(match) {
                return { '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' }[match];
            });
        }

        const redXIconHtml = `<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZWY0NDQ0IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE4IDZMNiAxOE02IDZsMTIgMTIiLz48L3N2Zz4=" style="width: 14px; height: 14px; vertical-align: middle; display: inline-block; margin-right: 4px; margin-top: -2px;" />`;
        const redXImg = `<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZWY0NDQ0IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTE4IDZMNiAxOE02IDZsMTIgMTIiLz48L3N2Zz4=" style="width: 14px; height: 14px; display: inline-block; vertical-align: middle;" />`;
        const trophyHtml = `<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYjQ1MzA5IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTggMjFoOE0xMiAxN3Y0TTcgNGgxMHY2YTUgNSAwIDAgMS0xMCAwVjR6Ii8+PHBhdGggZD0iTTcgNEg0YTIgMiAwIDAgMC0yIDJ2MmE2IDYgMCAwIDAgNiA2aDEiLz48cGF0aCBkPSJNMTcgNGgzYTIgMiAwIDAgMSAyIDJ2MmE2IDYgMCAwIDEtNiA2aC0xIi8+PC9zdmc+" style="width: 14px; height: 14px; vertical-align: middle; display: inline-block; margin-right: 4px; margin-bottom: 2px;" />`;
        const trophyIconWhiteHtml = `<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik04IDIxaDhNMTIgMTd2NE03IDRoMTB2NmE1IDUgMCAwIDEtMTAgMFY0eiIvPjxwYXRoIGQ9Ik03IDRINGEyIDIgMCAwIDAtMiAydjJhNiA2IDAgMCAwIDYgNmgxIi8+PHBhdGggZD0iTTE3IDRoM2EyIDIgMCAwIDEgMiAydjJhNiA2IDAgMCAxLTYgNmgtMSIvPjwvc3ZnPg==" style="width: 16px; height: 16px; vertical-align: middle; display: inline-block; margin-right: 6px; margin-top: -3px;" />`;

        let appData = { tournaments: {}, recycleBin: [], lastActiveTournament: null };
        let currentTournamentId = null;
        let currentCreatingType = 'tournament'; 
        
        window.onload = function() {
            const today = new Date().toISOString().split('T')[0];
            if(document.getElementById('startDate')) document.getElementById('startDate').value = today;
            if(document.getElementById('endDate')) document.getElementById('endDate').value = today;
            if(document.getElementById('newTournamentDate')) document.getElementById('newTournamentDate').value = today;
            loadApp();
        };

        window.receiveCloudData = function(cloudData) {
            // Check if cloud has valid data
            if (cloudData && cloudData.tournaments && Object.keys(cloudData.tournaments).length > 0) {
                // Don't interrupt user if data is identical
                if (JSON.stringify(appData) === JSON.stringify(cloudData)) return;

                appData = cloudData;
                localStorage.setItem('kabutarTournamentsApp', JSON.stringify(appData));
                
                if (appData.lastActiveTournament && appData.tournaments[appData.lastActiveTournament]) {
                    currentTournamentId = appData.lastActiveTournament;
                } else {
                    const keys = Object.keys(appData.tournaments);
                    currentTournamentId = keys.length > 0 ? keys[0] : null;
                }
                
                updateTournamentDropdown();
                refreshCurrentTournamentUI();
                
                const cloudSyncText = document.getElementById('cloudSyncText');
                if (cloudSyncText) {
                    cloudSyncText.innerHTML = "Live Updated 🔄";
                    setTimeout(() => cloudSyncText.innerText = "Live Sync ON", 3000);
                }
            } else {
                // If cloud is empty but we have local data, sync local to cloud
                if (Object.keys(appData.tournaments).length > 0) {
                    if (typeof window.syncToCloud === 'function') {
                        window.syncToCloud(appData);
                    }
                }
            }
        };

        function loadApp() {
            try {
                const savedData = localStorage.getItem('kabutarTournamentsApp');
                if (savedData) {
                    let parsed = JSON.parse(savedData);
                    if (parsed && typeof parsed === 'object') {
                        appData = parsed;
                        if (!appData.tournaments) appData.tournaments = {};
                        if(appData.users) { delete appData.users; }
                        if (!appData.recycleBin) appData.recycleBin = [];
                        
                        for (let tId in appData.tournaments) {
                            let t = appData.tournaments[tId];
                            if(t.players && t.players.length > 0 && typeof t.players[0] === 'string') {
                                t.players = t.players.map(p => { return { name: p, city: '' }; });
                            }
                            if(!t.rules) t.rules = { borderMins: 0, maxEndTime: '' };
                            if(!t.type) t.type = 'tournament';
                            
                            if(t.totalPigeons === undefined && t.type === 'calculator') {
                                t.totalPigeons = 21;
                            } else if(t.totalPigeons === undefined) {
                                t.totalPigeons = 0;
                            }
                            
                            if(t.flights) {
                                t.flights.forEach(f => {
                                    if(f.realMinutes === undefined) f.realMinutes = f.totalMinutes;
                                    if(f.status === undefined) f.status = 'valid';
                                    evaluateFlight(f, t.rules); 
                                });
                            }
                            
                            if(t.players && t.players.length > 0) {
                                t.players = t.players.map(p => {
                                    let pObj = typeof p === 'string' ? { name: p, city: '' } : p;
                                    if (pObj.name && (pObj.name.toLowerCase().includes('siraj') || pObj.name.toLowerCase().includes('pradeep')) && !pObj.city) {
                                        pObj.city = 'MORENA';
                                    }
                                    return pObj;
                                });
                            }
                        }
                    }
                } else {
                    appData.tournaments = {};
                    appData.recycleBin = [];
                }
            } catch(e) {
                console.error("Data error", e);
                appData = { tournaments: {}, recycleBin: [], lastActiveTournament: null };
            }

            if (appData.lastActiveTournament && appData.tournaments[appData.lastActiveTournament]) {
                currentTournamentId = appData.lastActiveTournament;
            } else {
                const keys = Object.keys(appData.tournaments);
                currentTournamentId = keys.length > 0 ? keys[0] : null;
            }

            saveApp(true);
            updateTournamentDropdown();
            refreshCurrentTournamentUI();
        }

        function saveApp(silent = false) {
            try {
                appData.lastActiveTournament = currentTournamentId;
                localStorage.setItem('kabutarTournamentsApp', JSON.stringify(appData));
                
                // CALL CLOUD SYNC
                if (typeof window.syncToCloud === 'function') {
                    window.syncToCloud(appData);
                }
            } catch (e) {
                console.error("Storage error:", e);
                if(!silent) showToast("Error saving data. Storage full or blocked.");
                return;
            }
            updateRecycleBinBadge();
            if(!silent) showToast("🌐 Live Cloud Save Ho Gaya!");
        }

        function showToast(message) {
            const toast = document.getElementById('toast');
            if(!toast) return;
            document.getElementById('toastMessage').textContent = message;
            toast.classList.add('show');
            setTimeout(() => { toast.classList.remove('show'); }, 2500);
        }

        function updateRecycleBinBadge() {
            const badge = document.getElementById('recycleBinBadge');
            if(!badge) return; 
            if (appData.recycleBin && appData.recycleBin.length > 0) {
                badge.innerText = appData.recycleBin.length;
                badge.classList.remove('hidden');
            } else {
                badge.classList.add('hidden');
            }
        }

        function updateTournamentDropdown() {
            const tSelect = document.getElementById('tourSelect');
            const mSelect = document.getElementById('matchSelect');
            const cSelect = document.getElementById('calcSelect');
            
            if(!tSelect || !mSelect || !cSelect) return;

            tSelect.innerHTML = `<option value="default" disabled hidden class="bg-gray-800 text-white font-bold">TOURNAMENT</option><option value="create" class="text-gray-900 bg-white font-bold">+ Naya Tournament</option>`;
            mSelect.innerHTML = '<option value="default" disabled hidden class="bg-purple-800 text-white font-bold">ONE 2 ONE MATCH</option><option value="create" class="text-purple-700 bg-white font-bold">+ Naya Match</option>';
            cSelect.innerHTML = '<option value="default" disabled hidden class="bg-green-800 text-white font-bold">SCORE CALCULATOR</option><option value="create" class="text-green-700 bg-white font-bold">+ Naya Calculator</option>';
            
            const tourSelectWrapper = document.getElementById('tourSelectWrapper');
            if(tourSelectWrapper) tourSelectWrapper.classList.remove('hidden');

            const keys = Object.keys(appData.tournaments);
            let hasTournaments = false;
            let hasMatches = false;
            let hasCalculators = false;

            const tGroup = document.createElement('optgroup');
            tGroup.label = "SAVED TOURNAMENTS";
            tGroup.className = "bg-white text-gray-900 font-bold";
            
            const mGroup = document.createElement('optgroup');
            mGroup.label = "SAVED MATCHES";
            mGroup.className = "bg-white text-gray-900 font-bold";

            const cGroup = document.createElement('optgroup');
            cGroup.label = "SAVED CALCULATORS";
            cGroup.className = "bg-white text-gray-900 font-bold";

            keys.forEach(id => {
                const t = appData.tournaments[id];
                const option = document.createElement('option');
                option.value = id;
                option.textContent = sanitizeHTML(t.name);
                option.className = "bg-white text-gray-600 font-medium";
                if(t.type === 'match') {
                    mGroup.appendChild(option);
                    hasMatches = true;
                } else if(t.type === 'calculator') {
                    cGroup.appendChild(option);
                    hasCalculators = true;
                } else {
                    tGroup.appendChild(option);
                    hasTournaments = true;
                }
            });

            if (hasTournaments) tSelect.appendChild(tGroup);
            if (hasMatches) mSelect.appendChild(mGroup);
            if (hasCalculators) cSelect.appendChild(cGroup);

            if (currentTournamentId && appData.tournaments[currentTournamentId]) {
                const activeType = appData.tournaments[currentTournamentId].type;
                if (activeType === 'match') {
                    mSelect.value = currentTournamentId;
                    tSelect.value = 'default';
                    cSelect.value = 'default';
                } else if (activeType === 'calculator') {
                    cSelect.value = currentTournamentId;
                    tSelect.value = 'default';
                    mSelect.value = 'default';
                } else {
                    tSelect.value = currentTournamentId;
                    mSelect.value = 'default';
                    cSelect.value = 'default';
                }
            } else {
                tSelect.value = 'default';
                mSelect.value = 'default';
                cSelect.value = 'default';
            }
        }

        function handleMenuChange(type, selectElement) {
            const val = selectElement.value;
            if (val === 'create') {
                updateTournamentDropdown(); 
                openCreateModal(type);
            } else if (val !== 'default') {
                currentTournamentId = val;
                saveApp(true);
                refreshCurrentTournamentUI();
                updateTournamentDropdown(); 
            }
        }

        function openDeleteEventModal() {
            const select = document.getElementById('eventToDelete');
            if(!select) return;
            select.innerHTML = '<option value="" disabled selected>-- Event Chunein --</option>';

            const keys = Object.keys(appData.tournaments);
            if (keys.length === 0) {
                alert("Koi event save nahi hai!");
                return;
            }

            let tGroup = document.createElement('optgroup'); tGroup.label = "🏆 TOURNAMENTS";
            let mGroup = document.createElement('optgroup'); mGroup.label = "⚔️ MATCHES";
            let cGroup = document.createElement('optgroup'); cGroup.label = "🧮 CALCULATOR SESSIONS";

            keys.forEach(id => {
                const t = appData.tournaments[id];
                const option = document.createElement('option');
                option.value = id;
                option.textContent = sanitizeHTML(t.name);
                if(t.type === 'match') mGroup.appendChild(option);
                else if(t.type === 'calculator') cGroup.appendChild(option);
                else tGroup.appendChild(option);
            });

            if (tGroup.children.length > 0) select.appendChild(tGroup);
            if (mGroup.children.length > 0) select.appendChild(mGroup);
            if (cGroup.children.length > 0) select.appendChild(cGroup);

            const delModal = document.getElementById('deleteEventModal');
            if(delModal) delModal.classList.add('active');
        }

        function closeDeleteEventModal() {
            const delModal = document.getElementById('deleteEventModal');
            if(delModal) delModal.classList.remove('active');
        }

        function confirmDeleteEvent() {
            const id = document.getElementById('eventToDelete').value;
            if (!id) {
                alert("Pehle koi event chunein!");
                return;
            }

            const tName = appData.tournaments[id].name;
            if (confirm(`⚠️ DHYAN DEIN: Kya aap sach mein '${sanitizeHTML(tName)}' ko delete karna chahte hain?\n\n(Yeh Recycle Bin mein chala jayega)`)) {
                
                appData.recycleBin.push({
                    binId: Date.now() + Math.random(),
                    type: 'event',
                    originalId: id,
                    name: tName + ' (Poora Event)',
                    data: JSON.parse(JSON.stringify(appData.tournaments[id])),
                    deletedAt: new Date().toLocaleString()
                });

                delete appData.tournaments[id];
                if (currentTournamentId === id) {
                    const remainingKeys = Object.keys(appData.tournaments);
                    currentTournamentId = remainingKeys.length > 0 ? remainingKeys[0] : null;
                }
                saveApp(true);
                showToast("Event Recycle Bin mein bhej diya gaya.");
                updateTournamentDropdown();
                refreshCurrentTournamentUI();
                closeDeleteEventModal();
            }
        }

        function openRecycleBinModal() {
            renderRecycleBin();
            const rbModal = document.getElementById('recycleBinModal');
            if(rbModal) rbModal.classList.add('active');
        }

        function closeRecycleBinModal() {
            const rbModal = document.getElementById('recycleBinModal');
            if(rbModal) rbModal.classList.remove('active');
        }

        function renderRecycleBin() {
            const tbody = document.getElementById('recycleBinBody');
            const emptyMsg = document.getElementById('emptyBinMessage');
            if(!tbody || !emptyMsg) return;
            
            tbody.innerHTML = '';
            
            if(!appData.recycleBin || appData.recycleBin.length === 0) {
                emptyMsg.classList.remove('hidden');
                emptyMsg.classList.add('flex');
            } else {
                emptyMsg.classList.add('hidden');
                emptyMsg.classList.remove('flex');
                
                const sortedBin = [...appData.recycleBin].reverse();
                
                sortedBin.forEach(item => {
                    const tr = document.createElement('tr');
                    tr.className = "hover:bg-gray-50 transition-colors border-b border-gray-100";
                    
                    let typeBadge = '';
                    if(item.type === 'event' || item.type === 'event_restore_point') typeBadge = '<span class="bg-indigo-100 text-indigo-700 px-2.5 py-1 rounded-lg text-[10px] font-extrabold uppercase tracking-wide border border-indigo-200">Event</span>';
                    if(item.type === 'player') typeBadge = '<span class="bg-emerald-100 text-emerald-700 px-2.5 py-1 rounded-lg text-[10px] font-extrabold uppercase tracking-wide border border-emerald-200">Khiladi</span>';
                    if(item.type === 'flight') typeBadge = '<span class="bg-blue-100 text-blue-700 px-2.5 py-1 rounded-lg text-[10px] font-extrabold uppercase tracking-wide border border-blue-200">Udaan</span>';

                    tr.innerHTML = `
                        <td class="px-5 py-4 font-bold text-gray-800 whitespace-nowrap">${sanitizeHTML(item.name)}</td>
                        <td class="px-5 py-4 whitespace-nowrap">${typeBadge}</td>
                        <td class="px-5 py-4 text-xs text-gray-500 font-semibold whitespace-nowrap">${item.deletedAt}</td>
                        <td class="px-5 py-4 text-right flex justify-end gap-2">
                            <button onclick="restoreFromBin(${item.binId})" class="text-green-600 bg-green-50 hover:bg-green-600 hover:text-white px-3 py-1.5 rounded-lg text-xs font-bold shadow-sm transition-all transform hover:-translate-y-0.5 border border-green-200 hover:border-transparent">Restore</button>
                            <button onclick="permanentDeleteFromBin(${item.binId})" class="text-red-500 hover:text-white bg-red-50 hover:bg-red-500 px-2 py-1.5 rounded-lg transition-colors border border-red-200" title="Permanent Delete">
                                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="w-4 h-4"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                            </button>
                        </td>
                    `;
                    tbody.appendChild(tr);
                });
            }
        }

        function restoreFromBin(binId) {
            const index = appData.recycleBin.findIndex(item => item.binId === binId);
            if (index === -1) return;
            const item = appData.recycleBin[index];

            if (item.type === 'event' || item.type === 'event_restore_point') {
                appData.tournaments[item.originalId] = JSON.parse(JSON.stringify(item.data));
                currentTournamentId = item.originalId; 
            } else if (item.type === 'player') {
                if (!appData.tournaments[item.parentEventId]) {
                    alert("Jiska ye khiladi hai, wo Event pehle se delete ho chuka hai. Kripya pehle Event ko Recycle Bin se restore karein.");
                    return;
                }
                const t = appData.tournaments[item.parentEventId];
                const pName = typeof item.data.player === 'string' ? item.data.player : item.data.player.name;
                const exists = t.players.some(p => (typeof p === 'string' ? p : p.name) === pName);
                if(!exists) t.players.push(item.data.player);
                
                item.data.flights.forEach(f => {
                    if(!t.flights.some(existingF => existingF.id === f.id)) {
                        t.flights.push(f);
                    }
                });
                currentTournamentId = item.parentEventId;
            } else if (item.type === 'flight') {
                if (!appData.tournaments[item.parentEventId]) {
                    alert("Jiska ye record hai, wo Event pehle se delete ho chuka hai. Kripya pehle Event ko Recycle Bin se restore karein.");
                    return;
                }
                const t = appData.tournaments[item.parentEventId];
                if(!t.flights.some(existingF => existingF.id === item.data.id)) {
                    t.flights.push(item.data);
                }
                currentTournamentId = item.parentEventId;
            }

            appData.recycleBin.splice(index, 1);
            saveApp(true);
            showToast("Entry wapas aa gayi!");
            updateTournamentDropdown();
            refreshCurrentTournamentUI();
            renderRecycleBin();
        }

        function permanentDeleteFromBin(binId) {
            if(confirm("Kya aap sach mein ise hamesha ke liye delete karna chahte hain? Yeh wapas nahi aayega!")) {
                appData.recycleBin = appData.recycleBin.filter(item => item.binId !== binId);
                saveApp(true);
                renderRecycleBin();
            }
        }

        function emptyRecycleBin() {
            if(appData.recycleBin.length === 0) return;
            if(confirm("⚠️ DHYAN DEIN: Kya aap Recycle Bin poori tarah khali karna chahte hain? Sab kuch hamesha ke liye delete ho jayega!")) {
                appData.recycleBin = [];
                saveApp(true);
                renderRecycleBin();
                showToast("Recycle Bin khali ho gaya.");
            }
        }

        function refreshCurrentTournamentUI() {
            if(!currentTournamentId || !appData.tournaments[currentTournamentId]) {
                const fbTime = document.getElementById('formBorderTime');
                const fmEndTime = document.getElementById('formMaxEndTime');
                const addPBtn = document.getElementById('addPlayerBtn');
                
                if(fbTime) fbTime.value = '';
                if(fmEndTime) fmEndTime.value = '';
                if(addPBtn) addPBtn.style.display = 'inline-flex';
                populatePlayerDropdown();
                updateUI();
                return;
            }
            
            const t = appData.tournaments[currentTournamentId];
            const rules = t.rules || { borderMins: 0, maxEndTime: '' };
            
            const fbTime = document.getElementById('formBorderTime');
            const fmEndTime = document.getElementById('formMaxEndTime');
            const addPBtn = document.getElementById('addPlayerBtn');
            
            if(fbTime) fbTime.value = rules.borderMins > 0 ? (rules.borderMins / 60) : '';
            if(fmEndTime) fmEndTime.value = rules.maxEndTime || '';
            
            if(addPBtn) {
                if(t.type === 'match' || t.type === 'calculator') {
                    addPBtn.style.display = 'none';
                } else {
                    addPBtn.style.display = 'inline-flex';
                }
            }

            populatePlayerDropdown();
            updateUI();
        }

        function toggleMissingStatus() {
            const isMissing = document.getElementById('isMissing').checked;
            const eDate = document.getElementById('endDate');
            const eTime = document.getElementById('endTime');
            
            if(eDate) {
                eDate.disabled = isMissing;
                eDate.required = !isMissing;
            }
            if(eTime) {
                eTime.disabled = isMissing;
                eTime.required = !isMissing;
            }
        }

        function openCreateModal(type) { 
            currentCreatingType = type;
            document.getElementById('newTournamentName').value = '';
            document.getElementById('newTournamentPigeons').value = '';
            document.getElementById('player1Name').value = '';
            document.getElementById('player2Name').value = '';
            document.getElementById('player1City').value = '';
            document.getElementById('player2City').value = '';
            document.getElementById('calcCityInput').value = '';
            
            let iconSvg = '';
            const titleEl = document.getElementById('createModalTitle');
            const p1p2Box = document.getElementById('matchPlayersBox');
            const calcCityBox = document.getElementById('calcCityBox');
            const pigCountBox = document.getElementById('pigeonCountBox');
            const nameLabel = document.getElementById('eventNameLabel');
            const nameInput = document.getElementById('newTournamentName');
            
            if(!titleEl) return;

            if (type === 'match') {
                iconSvg = `<div class="bg-purple-100 p-2.5 rounded-xl text-purple-600"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="w-6 h-6"><polyline points="14.5 17.5 3 6 3 3 6 3 17.5 14.5"/><line x1="13" y1="19" x2="19" y2="13"/><line x1="16" y1="16" x2="20" y2="20"/><line x1="19" y1="21" x2="21" y2="19"/><polyline points="14.5 6.5 18 3 21 3 21 6 17.5 9.5"/><line x1="5" y1="14" x2="9" y2="18"/><line x1="7" y1="17" x2="4" y2="20"/><line x1="3" y1="19" x2="5" y2="21"/></svg></div>`;
                titleEl.innerHTML = iconSvg + ' Naya ONE 2 ONE MATCH';
                if(p1p2Box) p1p2Box.classList.remove('hidden');
                if(calcCityBox) calcCityBox.classList.add('hidden');
                if(pigCountBox) pigCountBox.classList.remove('hidden');
                if(nameLabel) nameLabel.innerText = "Match Ka Naam";
                if(nameInput) nameInput.placeholder = "Jaise: Ajay vs Pradeep";
            } else if (type === 'calculator') {
                iconSvg = `<div class="bg-green-100 p-2.5 rounded-xl text-green-600"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="w-6 h-6"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="8" y1="6" x2="16" y2="6"/><line x1="16" y1="14" x2="16" y2="14.01"/><line x1="12" y1="14" x2="12" y2="14.01"/><line x1="8" y1="14" x2="8" y2="14.01"/><line x1="16" y1="10" x2="16" y2="10.01"/><line x1="12" y1="10" x2="12" y2="10.01"/><line x1="8" y1="10" x2="8" y2="10.01"/><line x1="16" y1="18" x2="16" y2="18.01"/><line x1="12" y1="18" x2="12" y2="18.01"/><line x1="8" y1="18" x2="8" y2="18.01"/></svg></div>`;
                titleEl.innerHTML = iconSvg + ' Khiladi Ki New Entry';
                if(p1p2Box) p1p2Box.classList.add('hidden');
                if(calcCityBox) calcCityBox.classList.remove('hidden'); 
                if(pigCountBox) pigCountBox.classList.remove('hidden'); 
                if(nameLabel) nameLabel.innerText = "Khiladi Ka Naam";
                if(nameInput) nameInput.placeholder = "Jaise: Ajay Bhai";
            } else {
                iconSvg = `<div class="bg-gray-100 p-2.5 rounded-xl text-gray-800"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="w-6 h-6"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg></div>`;
                titleEl.innerHTML = iconSvg + ' Naya Tournament';
                if(p1p2Box) p1p2Box.classList.add('hidden');
                if(calcCityBox) calcCityBox.classList.add('hidden');
                if(pigCountBox) pigCountBox.classList.remove('hidden');
                if(nameLabel) nameLabel.innerText = "Tournament / Club Ka Naam";
                if(nameInput) nameInput.placeholder = "Jaise: Star Pigeon Club";
            }
            
            const createModal = document.getElementById('createTournamentModal');
            if(createModal) createModal.classList.add('active'); 
        }
        
        function closeCreateTournamentModal() { 
            const createModal = document.getElementById('createTournamentModal');
            if(createModal) createModal.classList.remove('active'); 
        }

        function createNewTournament() {
            const type = currentCreatingType;
            const name = document.getElementById('newTournamentName').value.trim();
            const date = document.getElementById('newTournamentDate').value;
            const pigeons = document.getElementById('newTournamentPigeons').value;
            
            if (!name) { alert("Naam likhna zaroori hai!"); return; }

            let playersArr = [];
            if (type === 'match') {
                const p1 = document.getElementById('player1Name').value.trim();
                const p2 = document.getElementById('player2Name').value.trim();
                let c1 = document.getElementById('player1City').value.trim();
                let c2 = document.getElementById('player2City').value.trim();
                if (!p1 || !p2) { alert("Dono khiladiyon ke naam likhna zaroori hai!"); return; }
                
                if (!c1 && (p1.toLowerCase().includes('siraj') || p1.toLowerCase().includes('pradeep'))) c1 = 'MORENA';
                if (!c2 && (p2.toLowerCase().includes('siraj') || p2.toLowerCase().includes('pradeep'))) c2 = 'MORENA';

                playersArr = [{ name: p1, city: c1 }, { name: p2, city: c2 }];
            } else if (type === 'calculator') {
                const calcCity = document.getElementById('calcCityInput').value.trim();
                playersArr = [{ name: name, city: calcCity }];
            }

            const tId = 'tournament_' + Date.now();
            appData.tournaments[tId] = { 
                name: sanitizeHTML(name), type: type, date: date, 
                players: playersArr, flights: [],
                rules: { borderMins: 0, maxEndTime: '' },
                totalPigeons: (pigeons ? parseInt(pigeons) : 0) 
            };
            currentTournamentId = tId;
            saveApp();
            updateTournamentDropdown();
            refreshCurrentTournamentUI();
            closeCreateTournamentModal();
        }

        function updateRulesDynamically() {
            if(!currentTournamentId) return;
            const borderHrs = parseFloat(document.getElementById('formBorderTime').value) || 0;
            const maxEndTimeVal = document.getElementById('formMaxEndTime').value || '';
            const currentT = appData.tournaments[currentTournamentId];
            currentT.rules = { borderMins: borderHrs * 60, maxEndTime: maxEndTimeVal };
            currentT.flights.forEach(f => evaluateFlight(f, currentT.rules));
            saveApp(true);
            updateUI(); 
        }

        function switchTab(tab) {
            const btnLead = document.getElementById('btnLeaderboard');
            const btnRec = document.getElementById('btnRecords');
            const viewLead = document.getElementById('viewLeaderboard');
            const viewRec = document.getElementById('viewRecords');
            
            if(!btnLead || !btnRec || !viewLead || !viewRec) return;

            if(tab === 'leaderboard') {
                btnLead.className = "whitespace-nowrap px-5 py-3.5 text-sm font-bold border-b-2 flex items-center gap-2 transition-all border-green-600 text-green-700 bg-white rounded-t-lg";
                btnRec.className = "whitespace-nowrap px-5 py-3.5 text-sm font-semibold border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100 flex items-center gap-2 rounded-t-lg transition-all";
                viewLead.classList.remove('hidden'); viewLead.classList.add('flex');
                viewRec.classList.add('hidden'); viewRec.classList.remove('flex');
            } else {
                btnRec.className = "whitespace-nowrap px-5 py-3.5 text-sm font-bold border-b-2 flex items-center gap-2 transition-all border-green-600 text-green-700 bg-white rounded-t-lg";
                btnLead.className = "whitespace-nowrap px-5 py-3.5 text-sm font-semibold border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:bg-gray-100 flex items-center gap-2 rounded-t-lg transition-all";
                viewRec.classList.remove('hidden'); viewRec.classList.add('flex');
                viewLead.classList.add('hidden'); viewLead.classList.remove('flex');
            }
        }

        function viewPlayerRecords(playerName) {
            const rf = document.getElementById('recordPlayerFilter');
            if(rf) rf.value = playerName;
            switchTab('records');
            renderRecords();
        }

        const theFlightForm = document.getElementById('flightForm');
        if(theFlightForm) {
            theFlightForm.addEventListener('submit', function(e) {
                e.preventDefault();
                if(!currentTournamentId) { alert("Pehle Event chunein!"); return; }

                const currentT = appData.tournaments[currentTournamentId];
                const playerName = document.getElementById('playerName').value;

                const playerPigeonCount = currentT.flights.filter(f => f.playerName === playerName).length;

                if (currentT.totalPigeons && currentT.totalPigeons > 0) {
                    if (playerPigeonCount >= currentT.totalPigeons) {
                        document.getElementById('errorTitle').innerText = "Limit Poori Ho Gayi!";
                        document.getElementById('errorText').innerText = `Is khiladi (${sanitizeHTML(playerName)}) ke pehle hi ${currentT.totalPigeons} kabutar darj ho chuke hain.`;
                        document.getElementById('errorModal').classList.add('active');
                        return; 
                    }
                }

                updateRulesDynamically();

                let pigeonNameInput = document.getElementById('pigeonName').value.trim();
                const finalPigeonName = pigeonNameInput !== '' ? sanitizeHTML(pigeonNameInput) : `Kabutar ${playerPigeonCount + 1}`;

                const startDate = document.getElementById('startDate').value;
                const startTime = document.getElementById('startTime').value;
                const isMissing = document.getElementById('isMissing').checked;
                
                let timeResult = null;
                let endObjTime = 0;
                let endStrText = '-';

                if (!isMissing) {
                    const endDate = document.getElementById('endDate').value;
                    const endTime = document.getElementById('endTime').value;
                    if(!endDate || !endTime) {
                        alert("Kripya waapsi ka samay daalein ya Missing tick karein.");
                        return;
                    }
                    timeResult = calculateDuration(startDate, startTime, endDate, endTime);
                    if (!timeResult) return;
                    endObjTime = new Date(`${endDate}T${endTime}`).getTime();
                    endStrText = formatDateTime(endDate, endTime);
                } else {
                    timeResult = { 
                        totalMinutes: 0, 
                        displayString: `<span style="white-space: nowrap;">${redXIconHtml}<span style="vertical-align: middle;">Missing (Ghar Nahi Baitha)</span></span>` 
                    };
                    endObjTime = Date.now() + 99999999; 
                }

                const newRecord = {
                    id: Date.now(), 
                    playerName: playerName, 
                    pigeonName: finalPigeonName,
                    rawStartDate: startDate,
                    rawStartTime: startTime,
                    rawEndDate: isMissing ? null : document.getElementById('endDate').value,
                    startStr: formatDateTime(startDate, startTime), 
                    endStr: endStrText,
                    rawEndTime: isMissing ? null : document.getElementById('endTime').value,
                    realMinutes: timeResult.totalMinutes, 
                    totalMinutes: timeResult.totalMinutes,
                    displayTime: timeResult.displayString, 
                    status: isMissing ? 'missing' : 'valid', 
                    endTimestamp: endObjTime,
                    ruleMaxEndTime: document.getElementById('formMaxEndTime').value
                };

                if(!isMissing) evaluateFlight(newRecord, currentT.rules); 
                
                currentT.flights.push(newRecord);
                saveApp();
                updateUI();
                
                // Form Reset Logic
                document.getElementById('pigeonName').value = '';
                document.getElementById('endTime').value = '';
                document.getElementById('isMissing').checked = false;
                toggleMissingStatus(); 
                
                document.getElementById('recordPlayerFilter').value = playerName;
                switchTab('records');
                renderRecords();
            });
        }

        function calculateDuration(startDate, startTime, endDate, endTime) {
            const start = new Date(`${startDate}T${startTime}`);
            const end = new Date(`${endDate}T${endTime}`);
            const diffMs = end - start;

            if (diffMs < 0) {
                document.getElementById('errorTitle').innerText = "Galat Samay/Tareekh";
                document.getElementById('errorText').innerText = "Waapsi ka samay, Udaan se pehle ka nahi ho sakta!";
                document.getElementById('errorModal').classList.add('active');
                return null;
            }
            const diffMinutes = Math.floor(diffMs / (1000 * 60));
            return { totalMinutes: diffMinutes, displayString: minutesToDisplayStr(diffMinutes) };
        }

        function evaluateFlight(flight, rules) {
            if (flight.status === 'missing') {
                flight.totalMinutes = 0;
                flight.displayTime = `<span style="white-space: nowrap;">${redXIconHtml}<span style="vertical-align: middle;">Missing (Ghar Nahi Baitha)</span></span>`;
                return;
            }

            if(flight.realMinutes === undefined) flight.realMinutes = flight.totalMinutes; 
            flight.status = 'valid'; flight.totalMinutes = flight.realMinutes;
            flight.displayTime = minutesToDisplayStr(flight.realMinutes);

            if (rules.borderMins > 0 && flight.realMinutes < rules.borderMins) {
                flight.status = 'border_failed'; flight.totalMinutes = 0;
                flight.displayTime = `<span style="white-space: nowrap;">${redXIconHtml}<span style="vertical-align: middle;">Cancel Before Border</span></span>`;
            }

            let specificMaxEnd = flight.ruleMaxEndTime;
            if (!specificMaxEnd && flight.rawStartTime && flight.rawStartTime.includes(':')) {
                let [h, m] = flight.rawStartTime.split(':');
                specificMaxEnd = `${String((parseInt(h, 10) + 12) % 24).padStart(2, '0')}:${m}`;
            } else if (!specificMaxEnd) {
                specificMaxEnd = rules.maxEndTime;
            }

            if (flight.status === 'valid' && specificMaxEnd && flight.rawEndTime) {
                if (flight.rawEndTime > specificMaxEnd) {
                    flight.status = 'time_over';
                    flight.totalMinutes = 0;
                    flight.displayTime = `<span style="white-space: nowrap;">${redXIconHtml}<span style="vertical-align: middle;">Cancel Over Time</span></span>`;
                }
            }
        }

        function minutesToDisplayStr(totalMins) {
            const hours = Math.floor(totalMins / 60);
            const mins = totalMins % 60;
            if (hours > 0) return `<span class="font-bold" style="font-size: 14px; color: #111827; vertical-align: middle;">${hours}</span><span style="font-size: 11px; color: #6b7280; vertical-align: middle; margin-right: 2px;">h</span> <span class="font-bold" style="font-size: 14px; color: #111827; vertical-align: middle;">${mins}</span><span style="font-size: 11px; color: #6b7280; vertical-align: middle;">m</span>`;
            return `<span class="font-bold" style="font-size: 14px; color: #111827; vertical-align: middle;">${mins}</span><span style="font-size: 11px; color: #6b7280; vertical-align: middle;">m</span>`;
        }

        function minutesToPlainText(totalMins) {
            const hours = Math.floor(totalMins / 60);
            const mins = totalMins % 60;
            if (hours > 0) return `${hours} h ${mins} min`;
            return `${mins} min`;
        }

        // Updated Format: DD-MM-YYYY , HH:MM AM/PM
        function formatDateTime(dateStr, timeStr) {
            const dateObj = new Date(`${dateStr}T${timeStr}`);
            const day = String(dateObj.getDate()).padStart(2, '0');
            const month = String(dateObj.getMonth() + 1).padStart(2, '0');
            const year = dateObj.getFullYear();
            let hours = dateObj.getHours();
            let minutes = dateObj.getMinutes();
            const ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12; hours = hours ? hours : 12;
            const minsStr = minutes < 10 ? '0' + minutes : minutes;
            return `${day}-${month}-${year} , ${hours}:${minsStr} ${ampm}`;
        }

        function updateUI() {
            if(!currentTournamentId) {
                const tbody = document.getElementById('leaderboardBody');
                const rBody = document.getElementById('recordsBody');
                if(tbody) tbody.innerHTML = '';
                if(rBody) rBody.innerHTML = '';
                
                const eLead = document.getElementById('emptyLeaderboard');
                const lTC = document.getElementById('leaderboardTableContainer');
                const eRec = document.getElementById('emptyRecords');
                const rTC = document.getElementById('recordsTableContainer');
                const actionBtns = document.getElementById('leaderboardActionBtns');

                if(eLead) eLead.classList.remove('hidden');
                if(lTC) lTC.classList.add('hidden');
                if(eRec) eRec.classList.remove('hidden');
                if(rTC) rTC.classList.add('hidden');
                if(actionBtns) actionBtns.classList.add('hidden');
                return;
            }
            populatePlayerDropdown(); 
            renderLeaderboard();
            renderRecords();
        }

        function renderLeaderboard() {
            const tbody = document.getElementById('leaderboardBody');
            const emptyState = document.getElementById('emptyLeaderboard');
            const tableCont = document.getElementById('leaderboardTableContainer');
            const actionBtns = document.getElementById('leaderboardActionBtns');
            if(!tbody || !emptyState || !tableCont) return;
            
            tbody.innerHTML = '';
            const currentT = appData.tournaments[currentTournamentId];
            const isMatch = currentT.type === 'match';
            const isCalc = currentT.type === 'calculator';

            if (currentT.players.length === 0 && currentT.flights.length === 0) {
                emptyState.classList.remove('hidden'); tableCont.classList.add('hidden');
                if(actionBtns) actionBtns.classList.add('hidden');
                return;
            } else {
                emptyState.classList.add('hidden'); tableCont.classList.remove('hidden');
                if(actionBtns) { actionBtns.classList.remove('hidden'); actionBtns.classList.add('flex'); }
            }

            const playerStats = {}; const cityMap = {};
            currentT.players.forEach(p => { 
                const pName = typeof p === 'string' ? p : p.name;
                let pCity = typeof p === 'string' ? '' : p.city;
                if (!pCity && (pName.toLowerCase().includes('siraj') || pName.toLowerCase().includes('pradeep'))) pCity = 'MORENA';
                playerStats[pName] = { totalMins: 0, flown: 0, validReturned: 0 }; cityMap[pName] = pCity;
            });
            currentT.flights.forEach(flight => {
                const pName = flight.playerName;
                if(!playerStats[pName]) { playerStats[pName] = { totalMins: 0, flown: 0, validReturned: 0 }; }
                playerStats[pName].totalMins += flight.totalMinutes; 
                playerStats[pName].flown += 1;
                if (flight.status === 'valid') {
                    playerStats[pName].validReturned += 1;
                }
            });

            const sortedPlayers = Object.keys(playerStats).map(name => {
                return { 
                    name: name, 
                    totalMins: playerStats[name].totalMins, 
                    flown: playerStats[name].flown,
                    validReturned: playerStats[name].validReturned 
                };
            }).sort((a, b) => b.totalMins - a.totalMins);

            sortedPlayers.forEach((player, index) => {
                const tr = document.createElement('tr');
                tr.className = "hover:bg-gray-50 transition-colors";
                
                let rankHtml = `<span class="font-bold text-gray-500 text-sm">${index + 1}</span>`;
                if (!isCalc) {
                    if (index === 0) {
                        rankHtml = isMatch ? `<span class="bg-yellow-100 text-yellow-800 px-2.5 py-1 rounded-full text-xs font-bold border border-yellow-200"><span style="white-space: nowrap;">${trophyHtml}<span style="vertical-align: middle;">WINNER</span></span></span>` : `<span class="bg-yellow-100 text-yellow-800 px-2.5 py-1 rounded-full text-xs font-bold border border-yellow-200">1st</span>`;
                    } else if (index === 1) {
                        rankHtml = `<span class="bg-gray-200 text-gray-700 px-2.5 py-1 rounded-full text-xs font-bold border border-gray-300">2nd</span>`;
                    } else if (index === 2) {
                        rankHtml = `<span class="bg-orange-100 text-orange-800 px-2.5 py-1 rounded-full text-xs font-bold border border-orange-200">3rd</span>`;
                    }
                }

                const pdfBtnFunc = isMatch ? `generateMatchPDF()` : `generatePlayerPDF('${escapeHtmlForCall(player.name)}')`;
                const pdfBtnText = isMatch ? `Match PDF / JPG` : `PDF / JPG`;

                const deleteBtnHtml = `<button onclick="deletePlayer('${escapeHtmlForCall(player.name)}')" class="text-gray-400 hover:text-red-500 hover:bg-red-50 p-1.5 rounded-lg transition-colors" title="Khiladi Delete Karein">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                    </button>`;

                tr.innerHTML = `
                    <td class="px-4 py-3 text-center whitespace-nowrap">${rankHtml}</td>
                    <td class="px-4 py-3 text-left font-semibold text-green-600 hover:text-green-800 cursor-pointer underline-offset-2 hover:underline" onclick="viewPlayerRecords('${escapeHtmlForCall(player.name)}')">${sanitizeHTML(player.name)}</td>
                    <td class="px-4 py-3 text-center text-gray-500 text-xs">${cityMap[player.name] ? sanitizeHTML(cityMap[player.name]) : '-'}</td>
                    <td class="px-4 py-3 text-center"><span class="bg-gray-100 px-2.5 py-1 rounded-md text-xs font-bold text-gray-600 border border-gray-200" style="white-space: nowrap;">${player.flown}-${player.validReturned}</span></td>
                    <td class="px-4 py-3 text-right">${minutesToDisplayStr(player.totalMins)}</td>
                    <td class="px-4 py-3 text-center flex justify-center items-center gap-1">
                        <button onclick="${pdfBtnFunc}" class="text-blue-500 hover:text-blue-700 hover:bg-blue-50 px-2 py-1.5 rounded-lg font-semibold text-xs border border-transparent hover:border-blue-100 transition-colors flex items-center gap-1">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg> ${pdfBtnText}
                        </button>
                        ${deleteBtnHtml}
                    </td>
                `;
                tbody.appendChild(tr);
            });
        }

        function escapeHtmlForCall(str) {
            if(!str) return '';
            return str.replace(/'/g, "\\'").replace(/"/g, '\\"');
        }

        function renderRecords() {
            const tbody = document.getElementById('recordsBody');
            const emptyState = document.getElementById('emptyRecords');
            const emptyText = document.getElementById('emptyRecordsText');
            const tableCont = document.getElementById('recordsTableContainer');
            const startTimeSpan = document.getElementById('recordPlayerStartTime');
            const totalTimeSpan = document.getElementById('recordPlayerTotalTime');
            
            if(!tbody || !emptyState) return;

            tbody.innerHTML = '';
            const currentT = appData.tournaments[currentTournamentId];
            const selectedPlayer = document.getElementById('recordPlayerFilter').value;

            if (!selectedPlayer) {
                emptyState.classList.remove('hidden'); emptyText.innerHTML = `Kripya record dekhne ke liye upar se <br><b class="text-gray-700">Khiladi chunein</b>.`;
                tableCont.classList.add('hidden'); 
                startTimeSpan.classList.add('hidden'); startTimeSpan.classList.remove('flex');
                totalTimeSpan.classList.add('hidden'); totalTimeSpan.classList.remove('flex');
                return;
            }

            const filteredFlights = currentT.flights.filter(f => f.playerName === selectedPlayer);

            if (filteredFlights.length === 0) {
                emptyState.classList.remove('hidden'); emptyText.innerHTML = "Is khiladi ka koi record darj nahi hua hai.";
                tableCont.classList.add('hidden'); 
                startTimeSpan.classList.add('hidden'); startTimeSpan.classList.remove('flex');
                totalTimeSpan.classList.add('hidden'); totalTimeSpan.classList.remove('flex');
                return;
            } else {
                emptyState.classList.add('hidden'); tableCont.classList.remove('hidden');
            }

            let totalMins = 0;
            let earliestFlight = null;

            const formatTimeAMPM = (dateObj) => {
                if (isNaN(dateObj.getTime())) return '-';
                let hours = dateObj.getHours();
                let minutes = dateObj.getMinutes();
                const ampm = hours >= 12 ? 'PM' : 'AM';
                hours = hours % 12;
                hours = hours ? hours : 12;
                const minsStr = minutes < 10 ? '0' + minutes : minutes;
                return `${hours}:${minsStr} ${ampm}`;
            };

            filteredFlights.forEach(f => {
                totalMins += f.totalMinutes;
                if (!earliestFlight) {
                    earliestFlight = f;
                } else {
                    let d1 = f.rawStartDate || '2000-01-01';
                    let t1 = f.rawStartTime || '23:59';
                    let d2 = earliestFlight.rawStartDate || '2000-01-01';
                    let t2 = earliestFlight.rawStartTime || '23:59';
                    if (new Date(`${d1}T${t1}`) < new Date(`${d2}T${t2}`)) {
                        earliestFlight = f;
                    }
                }
            });

            if (earliestFlight) {
                let displayStartStr = "06:00 AM"; 
                if (earliestFlight.rawStartTime) {
                    displayStartStr = formatTimeAMPM(new Date(`2000-01-01T${earliestFlight.rawStartTime}`));
                } else if (earliestFlight.startStr && earliestFlight.startStr.includes(',')) {
                    displayStartStr = earliestFlight.startStr.split(',')[1].trim();
                }
                
                startTimeSpan.innerHTML = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg> UDAAN START: <strong class="text-purple-900">${displayStartStr}</strong>`;
                startTimeSpan.classList.remove('hidden'); startTimeSpan.classList.add('flex');
            } else {
                startTimeSpan.classList.add('hidden'); startTimeSpan.classList.remove('flex');
            }

            totalTimeSpan.innerHTML = `<span class="font-bold text-sm">⏱️ Total Score:</span> ${minutesToDisplayStr(totalMins)}`;
            totalTimeSpan.classList.remove('hidden'); totalTimeSpan.classList.add('flex');

            const sortedFlights = [...filteredFlights].sort((a, b) => {
                if (a.endTimestamp && b.endTimestamp) return a.endTimestamp - b.endTimestamp;
                if (a.realMinutes !== undefined && b.realMinutes !== undefined) return a.realMinutes - b.realMinutes;
                return a.id - b.id; 
            });

            sortedFlights.forEach((flight, index) => {
                let displayEndStr = flight.endStr;
                if (flight.status !== 'missing') {
                    if (flight.rawEndDate && flight.rawEndTime) {
                        displayEndStr = formatDateTime(flight.rawEndDate, flight.rawEndTime);
                    } else if (flight.endStr && flight.endStr.includes(',')) {
                        const monthsArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                        let parts = flight.endStr.split(',');
                        let dateStrPart = parts[0].trim();
                        let timeStrPart = parts[1] ? parts[1].trim() : '';
                        let dateParts = dateStrPart.split(' ');
                        if (dateParts.length === 2 && timeStrPart) {
                            let d = String(dateParts[0]).padStart(2, '0');
                            let mStr = dateParts[1];
                            let mIdx = String(monthsArr.indexOf(mStr) + 1).padStart(2, '0');
                            let y = (currentT && currentT.date) ? new Date(currentT.date).getFullYear() : new Date().getFullYear();
                            displayEndStr = `${d}-${mIdx}-${y} , ${timeStrPart}`;
                        }
                    }
                }

                const tr = document.createElement('tr');
                tr.className = "hover:bg-gray-50 transition-colors";
                tr.innerHTML = `
                    <td class="px-3 py-3 text-center font-bold text-gray-500 text-sm">${index + 1}</td>
                    <td class="px-3 py-3 text-left font-semibold text-gray-800 text-sm">${sanitizeHTML(flight.pigeonName)}</td>
                    <td class="px-3 py-3 text-center text-xs text-gray-500">${displayEndStr}</td>
                    <td class="px-3 py-3 text-center">${flight.displayTime}</td>
                    <td class="px-3 py-3 text-center">
                        <button onclick="deleteRecord(${flight.id})" class="text-gray-400 hover:text-red-500 hover:bg-red-50 p-1.5 rounded-lg transition-colors" title="Udaan Delete Karein">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                        </button>
                    </td>
                `;
                tbody.appendChild(tr);
            });
        }

        function deletePlayer(playerName) {
            if(confirm(`Kya aap sach mein '${sanitizeHTML(playerName)}' aur uske sabhi udaan records delete karna chahte hain?\n\n(Yeh Recycle Bin mein chala jayega)`)) {
                const currentT = appData.tournaments[currentTournamentId];
                
                const playerObj = currentT.players.find(p => (typeof p === 'string' ? p : p.name) === playerName);
                const playerFlights = currentT.flights.filter(f => f.playerName === playerName);
                
                appData.recycleBin.push({
                    binId: Date.now() + Math.random(),
                    type: 'player',
                    parentEventId: currentTournamentId,
                    name: playerName,
                    data: {
                        player: JSON.parse(JSON.stringify(playerObj)),
                        flights: JSON.parse(JSON.stringify(playerFlights))
                    },
                    deletedAt: new Date().toLocaleString()
                });

                currentT.players = currentT.players.filter(p => (typeof p === 'string' ? p : p.name) !== playerName);
                currentT.flights = currentT.flights.filter(f => f.playerName !== playerName);
                
                saveApp(true); 
                populatePlayerDropdown(); 
                updateUI();
                showToast("Khiladi Recycle Bin mein bhej diya gaya.");
            }
        }

        function deleteRecord(id) {
            if(confirm("Kya aap sach mein ye udaan record delete karna chahte hain?\n\n(Yeh Recycle Bin mein chali jayegi)")) {
                const currentT = appData.tournaments[currentTournamentId];
                const flightObj = currentT.flights.find(f => f.id === id);
                
                appData.recycleBin.push({
                    binId: Date.now() + Math.random(),
                    type: 'flight',
                    parentEventId: currentTournamentId,
                    name: flightObj.pigeonName + ' - ' + flightObj.playerName,
                    data: JSON.parse(JSON.stringify(flightObj)),
                    deletedAt: new Date().toLocaleString()
                });

                currentT.flights = currentT.flights.filter(flight => flight.id !== id);
                saveApp(true); populatePlayerDropdown(); updateUI();
                showToast("Record Recycle Bin mein bhej diya gaya.");
            }
        }

        function openAddPlayerModal() {
            if(!currentTournamentId) { alert("Pehle Event chunein!"); return; }
            document.getElementById('newPlayerNameInput').value = '';
            document.getElementById('newPlayerCityInput').value = '';
            document.getElementById('addPlayerModal').classList.add('active');
            setTimeout(() => document.getElementById('newPlayerNameInput').focus(), 100);
        }

        function closeAddPlayerModal() { 
            const mod = document.getElementById('addPlayerModal');
            if(mod) mod.classList.remove('active'); 
        }

        function addNewPlayer() {
            const nameInput = document.getElementById('newPlayerNameInput').value.trim();
            let cityInput = document.getElementById('newPlayerCityInput').value.trim();
            const currentT = appData.tournaments[currentTournamentId];
            
            if(!nameInput) { alert("Khiladi ka naam likhein!"); return; }
            const exists = currentT.players.some(p => (typeof p === 'string' ? p : p.name) === nameInput);
            if(exists) { alert("Ye khiladi pehle se add hai!"); return; }
            
            if (!cityInput && (nameInput.toLowerCase().includes('siraj') || nameInput.toLowerCase().includes('pradeep'))) {
                cityInput = 'MORENA';
            }

            currentT.players.push({ name: nameInput, city: cityInput });
            saveApp(true); populatePlayerDropdown();
            document.getElementById('playerName').value = nameInput;
            closeAddPlayerModal(); updateUI(); showToast("Naya khiladi jod diya gaya.");
        }

        function populatePlayerDropdown() {
            const select = document.getElementById('playerName');
            const filterSelect = document.getElementById('recordPlayerFilter');
            if(!select || !filterSelect) return;

            const currentValue = select.value; 
            const currentFilterValue = filterSelect.value;
            
            select.innerHTML = '<option value="" disabled selected>-- Pehle Khiladi Chunein --</option>';
            filterSelect.innerHTML = '<option value="" selected>-- Khiladi Chunein --</option>';
            
            const currentT = appData.tournaments[currentTournamentId];
            if(!currentT) return;
            
            currentT.players.forEach(player => {
                const pName = typeof player === 'string' ? player : player.name;
                const pCity = typeof player === 'string' ? '' : player.city;
                
                const displayText = (pCity ? `${pName} (${pCity})` : pName);
                
                const option = document.createElement('option'); option.value = pName; option.textContent = sanitizeHTML(displayText);
                select.appendChild(option);
                
                const filterOption = document.createElement('option'); filterOption.value = pName; filterOption.textContent = sanitizeHTML(displayText);
                filterSelect.appendChild(filterOption);
            });
            
            if(currentT.players.some(p => (typeof p === 'string' ? p : p.name) === currentValue)) { select.value = currentValue; }
            if(currentT.players.some(p => (typeof p === 'string' ? p : p.name) === currentFilterValue)) { filterSelect.value = currentFilterValue; }
        }

        function onPlayerSelectionChange() {
            if(!currentTournamentId) return;
            const currentT = appData.tournaments[currentTournamentId];
            const pName = document.getElementById('playerName').value;
            if(!pName) return;

            const pFlights = currentT.flights.filter(f => f.playerName === pName);
            if(pFlights.length > 0) {
                let earliestFlight = pFlights[0];
                for(let f of pFlights) {
                    let d1 = f.rawStartDate || '2000-01-01';
                    let t1 = f.rawStartTime || '23:59';
                    let d2 = earliestFlight.rawStartDate || '2000-01-01';
                    let t2 = earliestFlight.rawStartTime || '23:59';
                    if (new Date(`${d1}T${t1}`) < new Date(`${d2}T${t2}`)) {
                        earliestFlight = f;
                    }
                }
                
                const sDate = document.getElementById('startDate');
                const sTime = document.getElementById('startTime');
                if(sDate && earliestFlight.rawStartDate) sDate.value = earliestFlight.rawStartDate;
                if(sTime && earliestFlight.rawStartTime) sTime.value = earliestFlight.rawStartTime;

                let lastValid = [...pFlights].reverse().find(flight => flight.rawEndDate);
                if(lastValid) {
                    const eDate = document.getElementById('endDate');
                    if(eDate) eDate.value = lastValid.rawEndDate;
                }
            }
        }

        function closeError() { 
            const em = document.getElementById('errorModal');
            if(em) em.classList.remove('active'); 
        }

        function generateLeaderboardPreview() {
            const currentT = appData.tournaments[currentTournamentId];
            const isMatch = currentT.type === 'match';
            const isCalc = currentT.type === 'calculator';

            currentPlayerForPDF = `Leaderboard_${currentT.name}`;

            const playerStats = {}; const cityMap = {};
            currentT.players.forEach(p => { 
                const pName = typeof p === 'string' ? p : p.name;
                let pCity = typeof p === 'string' ? '' : p.city;
                if (!pCity && (pName.toLowerCase().includes('siraj') || pName.toLowerCase().includes('pradeep'))) pCity = 'MORENA';
                playerStats[pName] = { totalMins: 0, flown: 0, validReturned: 0 }; cityMap[pName] = pCity;
            });
            currentT.flights.forEach(flight => {
                const pName = flight.playerName;
                if(!playerStats[pName]) { playerStats[pName] = { totalMins: 0, flown: 0, validReturned: 0 }; }
                playerStats[pName].totalMins += flight.totalMinutes; 
                playerStats[pName].flown += 1;
                if (flight.status === 'valid') {
                    playerStats[pName].validReturned += 1;
                }
            });

            const sortedPlayers = Object.keys(playerStats).map(name => {
                return { 
                    name: name, 
                    totalMins: playerStats[name].totalMins, 
                    flown: playerStats[name].flown,
                    validReturned: playerStats[name].validReturned 
                };
            }).sort((a, b) => b.totalMins - a.totalMins);

            let rowsHtml = '';
            
            sortedPlayers.forEach((player, index) => {
                let rankHtml = `<span style="color: #4b5563; font-weight: bold;">${index + 1}</span>`;
                
                if (!isCalc) {
                    if (index === 0) {
                        rankHtml = isMatch 
                            ? `<span style="color: #854d0e; background: #fef9c3; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; border: 1px solid #fef08a;"><span style="white-space: nowrap;">${trophyHtml}<span style="vertical-align: middle;">WINNER</span></span></span>` 
                            : `<span style="color: #854d0e; background: #fef9c3; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; border: 1px solid #fef08a;">1st</span>`;
                    } else if (index === 1) {
                        rankHtml = `<span style="color: #374151; background: #e5e7eb; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; border: 1px solid #d1d5db;">2nd</span>`;
                    } else if (index === 2) {
                        rankHtml = `<span style="color: #9a3412; background: #ffedd5; padding: 4px 8px; border-radius: 12px; font-size: 11px; font-weight: bold; border: 1px solid #fed7aa;">3rd</span>`;
                    }
                }

                rowsHtml += `
                    <tr style="border-bottom: 1px solid #d1d5db; background-color: ${index % 2 === 0 ? '#ffffff' : '#f8fafc'}; page-break-inside: avoid;">
                        <td style="padding: 10px; text-align: center; border-right: 1px solid #e5e7eb; vertical-align: middle;">${rankHtml}</td>
                        <td style="padding: 10px; text-align: left; font-weight: bold; color: #166534; border-right: 1px solid #e5e7eb; vertical-align: middle;">${sanitizeHTML(player.name)}</td>
                        <td style="padding: 10px; text-align: center; color: #4b5563; border-right: 1px solid #e5e7eb; font-size: 12px; vertical-align: middle;">${cityMap[player.name] ? sanitizeHTML(cityMap[player.name]) : '-'}</td>
                        <td style="padding: 10px; text-align: center; border-right: 1px solid #e5e7eb; vertical-align: middle;"><span style="background: #f1f5f9; padding: 4px 8px; border-radius: 4px; font-size: 13px; font-weight: bold; white-space: nowrap;">${player.flown}-${player.validReturned}</span></td>
                        <td style="padding: 10px; text-align: right; font-weight: bold; color: #1f2937; vertical-align: middle; font-size: 14px;">${minutesToPlainText(player.totalMins)}</td>
                    </tr>
                `;
            });

            currentPdfHtmlContent = `
                <div style="width: 760px; padding: 20px; font-family: Arial, sans-serif; color: #1f2937; background: #ffffff; box-sizing: border-box; margin: 0;">
                    <div style="text-align: left; margin-bottom: 0px;">
                        <p style="font-size: 10px; font-weight: bold; color: #166534; margin: 0;">Morena Pigeon Dashboard</p>
                        <p style="font-size: 8px; color: #6b7280; margin: 1px 0 0 0;">Tournament / Match / Score Management System</p>
                        <p style="font-size: 9px; color: #b91c1c; margin: 1px 0 0 0; font-weight: bold;">Mob- 9074775012</p>
                    </div>
                    <div style="text-align: center; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid #166534;">
                        <h2 style="font-size: 24px; font-weight: bold; color: #1f2937; text-transform: uppercase; margin: 0;">${sanitizeHTML(currentT.name)}</h2>
                        <p style="color: #6b7280; margin-top: 4px; font-size: 14px; font-weight: bold; text-transform: uppercase;">Official Leaderboard / Result</p>
                    </div>
                    <table style="width: 100%; text-align: left; border-collapse: collapse; border: 1px solid #d1d5db; font-size: 13px;">
                        <thead>
                            <tr style="background-color: #166534; color: #ffffff; page-break-inside: avoid; height: 40px;">
                                <th style="padding: 12px 10px; text-align: center; border-right: 1px solid #14532d; width: 10%; vertical-align: middle;">Rank</th>
                                <th style="padding: 12px 10px; text-align: left; border-right: 1px solid #14532d; width: 35%; vertical-align: middle;">Khiladi / Team</th>
                                <th style="padding: 12px 10px; text-align: center; border-right: 1px solid #14532d; width: 20%; vertical-align: middle;">City/Place</th>
                                <th style="padding: 12px 10px; text-align: center; border-right: 1px solid #14532d; width: 10%; vertical-align: middle;">Kabutar</th>
                                <th style="padding: 12px 10px; text-align: center; width: 25%; vertical-align: middle;">Total Score</th>
                            </tr>
                        </thead>
                        <tbody>${rowsHtml}</tbody>
                    </table>
                </div>
            `;

            document.getElementById('previewContainer').innerHTML = `<div style="min-width: 700px; background: white;">${currentPdfHtmlContent}</div>`;
            document.getElementById('pdfPreviewModal').classList.add('active');
        }

        // PDF / JPG Generation Logic
        let currentPlayerForPDF = ''; 
        let currentPdfHtmlContent = ''; 

        function generateMatchPDF() {
            if (typeof html2pdf === 'undefined') { alert("Download karne ke liye Internet zaroori hai!"); return; }
            const currentT = appData.tournaments[currentTournamentId];

            const players = currentT.players.map(p => typeof p === 'string' ? {name: p, city: ''} : p);
            
            let p1 = players.length > 0 ? players[0] : {name: 'Player 1', city: ''};
            let p2 = players.length > 1 ? players[1] : {name: 'Player 2', city: ''};

            currentPlayerForPDF = `${p1.name}_VS_${p2.name}`;

            const formatToDDMMYYYY = (dateVal) => {
                const d = new Date(dateVal);
                if (isNaN(d.getTime())) return '-';
                const day = String(d.getDate()).padStart(2, '0');
                const month = String(d.getMonth() + 1).padStart(2, '0');
                const year = d.getFullYear();
                return `${day}-${month}-${year}`;
            };

            const formatTimeAMPM = (dateObj) => {
                if (isNaN(dateObj.getTime())) return '-';
                let hours = dateObj.getHours();
                let minutes = dateObj.getMinutes();
                const ampm = hours >= 12 ? 'PM' : 'AM';
                hours = hours % 12;
                hours = hours ? hours : 12;
                const minsStr = minutes < 10 ? '0' + minutes : minutes;
                return `${hours}:${minsStr} ${ampm}`;
            };

            function getPlayerData(playerName) {
                const playerFlights = currentT.flights.filter(f => f.playerName === playerName);
                playerFlights.sort((a, b) => {
                    if (a.endTimestamp && b.endTimestamp) return a.endTimestamp - b.endTimestamp;
                    if (a.realMinutes !== undefined && b.realMinutes !== undefined) return a.realMinutes - b.realMinutes;
                    return a.id - b.id;
                });

                let startD = document.getElementById('startDate').value || currentT.date || new Date().toISOString().split('T')[0];
                let startT = document.getElementById('startTime').value || '06:00';
                let earliestFlight = null;

                if (playerFlights.length > 0) {
                    earliestFlight = playerFlights[0];
                    for(let f of playerFlights) {
                        let d1 = f.rawStartDate || '2000-01-01';
                        let t1 = f.rawStartTime || '23:59';
                        let d2 = earliestFlight.rawStartDate || '2000-01-01';
                        let t2 = earliestFlight.rawStartTime || '23:59';
                        if (new Date(`${d1}T${t1}`) < new Date(`${d2}T${t2}`)) {
                            earliestFlight = f;
                        }
                    }
                    
                    if (earliestFlight.rawStartDate) {
                        startD = earliestFlight.rawStartDate;
                    } else if (earliestFlight.startStr && earliestFlight.startStr.includes(',')) {
                        const monthsArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                        let dateStrPart = earliestFlight.startStr.split(',')[0].trim();
                        let dateParts = dateStrPart.split(' ');
                        if (dateParts.length === 2) {
                            let d = String(dateParts[0]).padStart(2, '0');
                            let mIdx = String(monthsArr.indexOf(dateParts[1]) + 1).padStart(2, '0');
                            let y = (currentT && currentT.date) ? new Date(currentT.date).getFullYear() : new Date().getFullYear();
                            if (mIdx !== '00') startD = `${y}-${mIdx}-${d}`;
                        }
                    }

                    if (earliestFlight.rawStartTime) {
                        startT = earliestFlight.rawStartTime;
                    } else if (earliestFlight.startStr && earliestFlight.startStr.includes(',')) {
                        let tMatch = earliestFlight.startStr.match(/(\d+):(\d+)\s*(AM|PM)/i);
                        if (tMatch) {
                            let hh = parseInt(tMatch[1]);
                            let mm = tMatch[2];
                            let ampm = tMatch[3].toUpperCase();
                            if (ampm === 'PM' && hh < 12) hh += 12;
                            if (ampm === 'AM' && hh === 12) hh = 0;
                            startT = `${String(hh).padStart(2, '0')}:${mm}`;
                        }
                    }
                }

                const startDateTimeObj = new Date(`${startD}T${startT}`);
                let displayStartDateTime = `${formatToDDMMYYYY(startDateTimeObj)} , ${formatTimeAMPM(startDateTimeObj)}`;
                
                if (earliestFlight && !earliestFlight.rawStartDate && !earliestFlight.rawStartTime && earliestFlight.startStr && earliestFlight.startStr.includes(',')) {
                    const monthsArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                    let parts = earliestFlight.startStr.split(',');
                    let dateStrPart = parts[0].trim();
                    let timeStrPart = parts[1] ? parts[1].trim() : '';
                    let dateParts = dateStrPart.split(' ');
                    if (dateParts.length === 2 && timeStrPart) {
                        let d = String(dateParts[0]).padStart(2, '0');
                        let mStr = dateParts[1];
                        let mIdx = String(monthsArr.indexOf(mStr) + 1).padStart(2, '0');
                        let y = (currentT && currentT.date) ? new Date(currentT.date).getFullYear() : new Date().getFullYear();
                        displayStartDateTime = `${d}-${mIdx}-${y} , ${timeStrPart}`;
                    } else {
                        displayStartDateTime = earliestFlight.startStr;
                    }
                }

                let displayMaxEndTime = 'N/A';
                let playerMaxEndTime = null;
                if (playerFlights.length > 0) {
                    if (earliestFlight.ruleMaxEndTime) {
                        playerMaxEndTime = earliestFlight.ruleMaxEndTime;
                    } else if (startT && startT.includes(':')) {
                        let [h, m] = startT.split(':');
                        let endH = (parseInt(h, 10) + 12) % 24;
                        playerMaxEndTime = `${String(endH).padStart(2, '0')}:${m}`;
                    }
                } else if (currentT.rules && currentT.rules.maxEndTime) {
                    playerMaxEndTime = currentT.rules.maxEndTime;
                }

                if (playerMaxEndTime) {
                    const endObj = new Date(`${startD}T${playerMaxEndTime}`);
                    displayMaxEndTime = `${formatToDDMMYYYY(endObj)} , ${formatTimeAMPM(endObj)}`;
                }

                let totalMins = 0; let flightsHtml = '';
                let validCount = 0; let cancelCount = 0; let missingCount = 0;

                if (playerFlights.length === 0) {
                    flightsHtml = `<tr><td colspan="4" style="padding: 10px; text-align: center; color: #6b7280; font-size: 13px; vertical-align: middle;">Koi Udaan Darj Nahi</td></tr>`;
                }

                playerFlights.forEach((flight, index) => {
                    totalMins += flight.totalMinutes; 
                    let statusText = minutesToPlainText(flight.realMinutes);
                    let textColor = "#15803d"; 
                    
                    if(flight.status === 'valid') {
                        validCount++;
                    } else if(flight.status === 'border_failed') { 
                        statusText = `<div style="text-align: center; white-space: nowrap;"><span style="display: inline-block; vertical-align: middle; margin-right: 4px;">${redXImg}</span><span style="display: inline-block; vertical-align: middle; text-align: center; line-height: 1.2;">Cancel<br><span style="font-size: 9px;">Before Border</span></span></div>`; 
                        textColor = "#ef4444"; 
                        cancelCount++;
                    } else if(flight.status === 'time_over') { 
                        statusText = `<div style="text-align: center; white-space: nowrap;"><span style="display: inline-block; vertical-align: middle; margin-right: 4px;">${redXImg}</span><span style="display: inline-block; vertical-align: middle; text-align: center; line-height: 1.2;">Cancel<br><span style="font-size: 9px;">Over Time</span></span></div>`; 
                        textColor = "#ef4444"; 
                        cancelCount++;
                    } else if(flight.status === 'missing') { 
                        statusText = `<div style="text-align: center; white-space: nowrap;"><span style="display: inline-block; vertical-align: middle; margin-right: 4px;">${redXImg}</span><span style="display: inline-block; vertical-align: middle; text-align: center; line-height: 1.2;">Missing<br><span style="font-size: 9px;">(Ghar Nahi Baitha)</span></span></div>`; 
                        textColor = "#ef4444"; 
                        missingCount++;
                    }

                    let displayEndStr = flight.endStr;
                    if (flight.status !== 'missing') {
                        if (flight.rawEndDate && flight.rawEndTime) {
                            const endObj = new Date(`${flight.rawEndDate}T${flight.rawEndTime}`);
                            displayEndStr = formatTimeAMPM(endObj); // ONLY TIME
                        } else if (flight.endStr && flight.endStr.includes(',')) {
                            let parts = flight.endStr.split(',');
                            displayEndStr = parts[1] ? parts[1].trim() : flight.endStr; // ONLY TIME
                        }
                    }

                    flightsHtml += `
                        <tr style="border-bottom: 1px solid #d1d5db; background-color: ${index % 2 === 0 ? '#ffffff' : '#f0fdf4'}; page-break-inside: avoid; height: 32px;">
                            <td style="padding: 4px 2px; text-align: center; border-right: 1px solid #86efac; font-size: 11px; vertical-align: middle;">${index + 1}</td>
                            <td style="padding: 4px 8px; text-align: left; font-weight: bold; color: #1f2937; border-right: 1px solid #86efac; font-size: 11px; word-wrap: break-word; vertical-align: middle;">${sanitizeHTML(flight.pigeonName)}</td>
                            <td style="padding: 4px 2px; text-align: center; color: #4b5563; border-right: 1px solid #86efac; font-size: 10px; vertical-align: middle;">${displayEndStr}</td>
                            <td style="padding: 4px 2px; text-align: center; font-weight: bold; color: ${textColor}; font-size: 11px; vertical-align: middle;">${statusText}</td>
                        </tr>`;
                });

                return { flightsHtml, totalMins, displayStartDateTime, displayMaxEndTime, length: playerFlights.length, validCount, cancelCount, missingCount };
            }

            const data1 = getPlayerData(p1.name);
            const data2 = getPlayerData(p2.name);
            
            let winnerText = "MATCH DRAW / TIE";
            if (data1.totalMins > data2.totalMins) {
                winnerText = `<span style="white-space: nowrap;">${trophyIconWhiteHtml}<span style="vertical-align: middle;">WINNER: ${sanitizeHTML(p1.name)}</span></span>`;
            } else if (data2.totalMins > data1.totalMins) {
                winnerText = `<span style="white-space: nowrap;">${trophyIconWhiteHtml}<span style="vertical-align: middle;">WINNER: ${sanitizeHTML(p2.name)}</span></span>`;
            }

            let matchBorderDisplay = '';
            if (currentT.rules && currentT.rules.borderMins > 0) {
                matchBorderDisplay = `<div style="margin-top: 4px; font-size: 13px; font-weight: bold; color: #dc2626;">BORDER TIME: ${currentT.rules.borderMins / 60} HOURS</div>`;
            }

            currentPdfHtmlContent = `
                <div style="width: 760px; padding: 10px; font-family: Arial, sans-serif; color: #1f2937; background: #ffffff; box-sizing: border-box; margin: 0;">
                    <div style="text-align: left; margin-bottom: 0px;">
                        <p style="font-size: 10px; font-weight: bold; color: #166534; margin: 0;">Morena Pigeon Dashboard</p>
                        <p style="font-size: 8px; color: #6b7280; margin: 1px 0 0 0;">Tournament / Match / Score Management System</p>
                        <p style="font-size: 9px; color: #b91c1c; margin: 1px 0 0 0; font-weight: bold;">Mob- 9074775012</p>
                    </div>
                    
                    <div style="text-align: center; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px solid #166534;">
                        <h2 style="font-size: 20px; font-weight: bold; color: #1f2937; text-transform: uppercase; margin: 0;">${sanitizeHTML(currentT.name)}</h2>
                        ${matchBorderDisplay}
                        <div style="margin-top: 6px;">
                            <span style="background: #16a34a; color: white; padding: 4px 12px; border-radius: 16px; font-size: 13px; font-weight: bold; text-transform: uppercase; box-shadow: 0 2px 4px rgba(22,163,74,0.3); display: inline-block;">
                                ${winnerText}
                            </span>
                        </div>
                    </div>

                    <table style="width: 100%; border-collapse: collapse; border: none; margin-bottom: 8px;">
                        <tr>
                            <!-- Player 1 Column -->
                            <td style="width: 49%; vertical-align: top; padding: 0;">
                                <div style="border: 1px solid #86efac; border-radius: 8px; overflow: hidden; background: #f0fdf4; display: block; height: 100%;">
                                    <div style="padding: 6px; background: #166534; color: white; text-align: center;">
                                        <h2 style="font-size: 16px; font-weight: bold; margin: 0;">${sanitizeHTML(p1.name)}</h2>
                                        <p style="font-size: 11px; margin: 2px 0 0 0; opacity: 0.9;">Player 1${p1.city ? ' (' + sanitizeHTML(p1.city) + ')' : ''}</p>
                                    </div>
                                    
                                    <div style="background: #dcfce7; border-bottom: 1px solid #bbf7d0; color: #4b5563; padding: 6px;">
                                        <table style="width: 100%; border-collapse: collapse; font-size: 11px;">
                                            <tr>
                                                <td style="padding-bottom: 3px; vertical-align: middle;"><b>Udaan Start:</b></td>
                                                <td style="text-align: right; color: #15803d; font-weight: bold; padding-bottom: 3px; white-space: nowrap; vertical-align: middle;">${data1.displayStartDateTime}</td>
                                            </tr>
                                            <tr>
                                                <td style="padding-bottom: 3px; vertical-align: middle;"><b>Max End Time:</b></td>
                                                <td style="text-align: right; color: #1f2937; font-weight: bold; padding-bottom: 3px; white-space: nowrap; vertical-align: middle;">${data1.displayMaxEndTime}</td>
                                            </tr>
                                            <tr>
                                                <td style="padding-bottom: 3px; vertical-align: middle;"><b>Udaye Gaye (Flown):</b></td>
                                                <td style="text-align: right; font-weight: bold; white-space: nowrap; vertical-align: middle; color: #1f2937;">${data1.length}</td>
                                            </tr>
                                            <tr>
                                                <td style="vertical-align: middle;"><b>Wapas Aaye (Returned):</b></td>
                                                <td style="text-align: right; font-weight: bold; white-space: nowrap; vertical-align: middle; color: #1f2937;">${data1.validCount + data1.cancelCount}</td>
                                            </tr>
                                        </table>
                                    </div>

                                    <div style="background: white;">
                                        <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 11px;">
                                            <thead>
                                                <tr style="background-color: #22c55e; color: #ffffff; height: 28px;">
                                                    <th style="padding: 6px 2px; text-align: center; border-right: 1px solid #16a34a; width: 10%; vertical-align: middle;">Sr.</th>
                                                    <th style="padding: 6px 8px; text-align: left; border-right: 1px solid #16a34a; width: 35%; vertical-align: middle;">Kabutar Ka Naam</th>
                                                    <th style="padding: 6px 2px; text-align: center; border-right: 1px solid #16a34a; width: 25%; vertical-align: middle;">Waapsi Time</th>
                                                    <th style="padding: 6px 2px; text-align: center; width: 30%; vertical-align: middle;">Time</th>
                                                </tr>
                                            </thead>
                                            <tbody>${data1.flightsHtml}</tbody>
                                        </table>
                                    </div>

                                    <div style="padding: 8px; background: #dcfce7; border-top: 2px dashed #22c55e; font-size: 11px; color: #166534;">
                                        <table style="width: 100%; border-collapse: collapse; border: none;">
                                            <tr>
                                                <td style="width: 55%; vertical-align: top; padding-right: 4px;">
                                                    <table style="width: 100%; border-collapse: collapse; font-size: 10px;">
                                                        <tr><td style="text-align: left; padding-bottom: 3px; vertical-align: middle;">Time Lekar Baithe:</td><td style="text-align: right; font-weight: bold; padding-bottom: 3px; vertical-align: middle;">${data1.validCount}</td></tr>
                                                        <tr><td style="text-align: left; padding-bottom: 3px; vertical-align: middle;">Cancel Kabutar:</td><td style="text-align: right; font-weight: bold; padding-bottom: 3px; vertical-align: middle;">${data1.cancelCount}</td></tr>
                                                        <tr><td style="text-align: left; vertical-align: middle;">Missing Kabutar:</td><td style="text-align: right; font-weight: bold; vertical-align: middle;">${data1.missingCount}</td></tr>
                                                    </table>
                                                </td>
                                                <td style="width: 45%; vertical-align: middle; text-align: right; border-left: 1px solid #bbf7d0; padding-left: 4px;">
                                                    <div style="font-size: 9px; font-weight: bold; margin-bottom: 12px; margin-top: 2px;">TOTAL SCORE (VALID TIME)</div>
                                                    <span style="font-size: 14px; font-weight: bold; color: #ffffff; background: #16a34a; padding: 4px 6px; border-radius: 4px; display: inline-block;">${minutesToPlainText(data1.totalMins)}</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </td>
                            
                            <td style="width: 2%;"></td>
                            
                            <!-- Player 2 Column -->
                            <td style="width: 49%; vertical-align: top; padding: 0;">
                                <div style="border: 1px solid #86efac; border-radius: 8px; overflow: hidden; background: #f0fdf4; display: block; height: 100%;">
                                    <div style="padding: 6px; background: #166534; color: white; text-align: center;">
                                        <h2 style="font-size: 16px; font-weight: bold; margin: 0;">${sanitizeHTML(p2.name)}</h2>
                                        <p style="font-size: 11px; margin: 2px 0 0 0; opacity: 0.9;">Player 2${p2.city ? ' (' + sanitizeHTML(p2.city) + ')' : ''}</p>
                                    </div>
                                    
                                    <div style="background: #dcfce7; border-bottom: 1px solid #bbf7d0; color: #4b5563; padding: 6px;">
                                        <table style="width: 100%; border-collapse: collapse; font-size: 11px;">
                                            <tr>
                                                <td style="padding-bottom: 3px; vertical-align: middle;"><b>Udaan Start:</b></td>
                                                <td style="text-align: right; color: #15803d; font-weight: bold; padding-bottom: 3px; white-space: nowrap; vertical-align: middle;">${data2.displayStartDateTime}</td>
                                            </tr>
                                            <tr>
                                                <td style="padding-bottom: 3px; vertical-align: middle;"><b>Max End Time:</b></td>
                                                <td style="text-align: right; color: #1f2937; font-weight: bold; padding-bottom: 3px; white-space: nowrap; vertical-align: middle;">${data2.displayMaxEndTime}</td>
                                            </tr>
                                            <tr>
                                                <td style="padding-bottom: 3px; vertical-align: middle;"><b>Udaye Gaye (Flown):</b></td>
                                                <td style="text-align: right; font-weight: bold; white-space: nowrap; vertical-align: middle; color: #1f2937;">${data2.length}</td>
                                            </tr>
                                            <tr>
                                                <td style="vertical-align: middle;"><b>Wapas Aaye (Returned):</b></td>
                                                <td style="text-align: right; font-weight: bold; white-space: nowrap; vertical-align: middle; color: #1f2937;">${data2.validCount + data2.cancelCount}</td>
                                            </tr>
                                        </table>
                                    </div>

                                    <div style="background: white;">
                                        <table style="width: 100%; text-align: left; border-collapse: collapse; font-size: 11px;">
                                            <thead>
                                                <tr style="background-color: #22c55e; color: #ffffff; height: 28px;">
                                                    <th style="padding: 6px 2px; text-align: center; border-right: 1px solid #16a34a; width: 10%; vertical-align: middle;">Sr.</th>
                                                    <th style="padding: 6px 8px; text-align: left; border-right: 1px solid #16a34a; width: 35%; vertical-align: middle;">Kabutar Ka Naam</th>
                                                    <th style="padding: 6px 2px; text-align: center; border-right: 1px solid #16a34a; width: 25%; vertical-align: middle;">Waapsi Time</th>
                                                    <th style="padding: 6px 2px; text-align: center; width: 30%; vertical-align: middle;">Time</th>
                                                </tr>
                                            </thead>
                                            <tbody>${data2.flightsHtml}</tbody>
                                        </table>
                                    </div>

                                    <div style="padding: 8px; background: #dcfce7; border-top: 2px dashed #22c55e; font-size: 11px; color: #166534;">
                                        <table style="width: 100%; border-collapse: collapse; border: none;">
                                            <tr>
                                                <td style="width: 55%; vertical-align: top; padding-right: 4px;">
                                                    <table style="width: 100%; border-collapse: collapse; font-size: 10px;">
                                                        <tr><td style="text-align: left; padding-bottom: 3px; vertical-align: middle;">Time Lekar Baithe:</td><td style="text-align: right; font-weight: bold; padding-bottom: 3px; vertical-align: middle;">${data2.validCount}</td></tr>
                                                        <tr><td style="text-align: left; padding-bottom: 3px; vertical-align: middle;">Cancel Kabutar:</td><td style="text-align: right; font-weight: bold; padding-bottom: 3px; vertical-align: middle;">${data2.cancelCount}</td></tr>
                                                        <tr><td style="text-align: left; vertical-align: middle;">Missing Kabutar:</td><td style="text-align: right; font-weight: bold; vertical-align: middle;">${data2.missingCount}</td></tr>
                                                    </table>
                                                </td>
                                                <td style="width: 45%; vertical-align: middle; text-align: right; border-left: 1px solid #bbf7d0; padding-left: 4px;">
                                                    <div style="font-size: 9px; font-weight: bold; margin-bottom: 12px; margin-top: 2px;">TOTAL SCORE (VALID TIME)</div>
                                                    <span style="font-size: 14px; font-weight: bold; color: #ffffff; background: #16a34a; padding: 4px 6px; border-radius: 4px; display: inline-block;">${minutesToPlainText(data2.totalMins)}</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>`;

            document.getElementById('previewContainer').innerHTML = `<div style="min-width: 700px; background: white;">${currentPdfHtmlContent}</div>`;
            document.getElementById('pdfPreviewModal').classList.add('active');
        }

        function generatePlayerPDF(playerName) {
            if (typeof html2pdf === 'undefined') { alert("Download karne ke liye Internet zaroori hai!"); return; }
            currentPlayerForPDF = playerName;
            const currentT = appData.tournaments[currentTournamentId];
            
            const cityMap = {};
            currentT.players.forEach(p => { 
                const pName = typeof p === 'string' ? p : p.name;
                let pCity = typeof p === 'string' ? '' : p.city;
                if (!pCity && (pName.toLowerCase().includes('siraj') || pName.toLowerCase().includes('pradeep'))) pCity = 'MORENA';
                cityMap[pName] = pCity; 
            });
            const playerCity = cityMap[playerName] || '-';
            const playerFlights = currentT.flights.filter(f => f.playerName === playerName);
            
            playerFlights.sort((a, b) => {
                if (a.endTimestamp && b.endTimestamp) return a.endTimestamp - b.endTimestamp;
                if (a.realMinutes !== undefined && b.realMinutes !== undefined) return a.realMinutes - b.realMinutes;
                return a.id - b.id;
            });

            const formatToDDMMYYYY = (dateVal) => {
                const d = new Date(dateVal);
                if (isNaN(d.getTime())) return '-';
                const day = String(d.getDate()).padStart(2, '0');
                const month = String(d.getMonth() + 1).padStart(2, '0');
                const year = d.getFullYear();
                return `${day}-${month}-${year}`;
            };

            const formatTimeAMPM = (dateObj) => {
                if (isNaN(dateObj.getTime())) return '-';
                let hours = dateObj.getHours();
                let minutes = dateObj.getMinutes();
                const ampm = hours >= 12 ? 'PM' : 'AM';
                hours = hours % 12;
                hours = hours ? hours : 12;
                const minsStr = minutes < 10 ? '0' + minutes : minutes;
                return `${hours}:${minsStr} ${ampm}`;
            };

            let startD = document.getElementById('startDate').value || currentT.date || new Date().toISOString().split('T')[0];
            let startT = document.getElementById('startTime').value || '06:00'; 
            let earliestFlight = null;

            if (playerFlights.length > 0) {
                earliestFlight = playerFlights[0];
                for(let f of playerFlights) {
                    let d1 = f.rawStartDate || '2000-01-01';
                    let t1 = f.rawStartTime || '23:59';
                    let d2 = earliestFlight.rawStartDate || '2000-01-01';
                    let t2 = earliestFlight.rawStartTime || '23:59';
                    if (new Date(`${d1}T${t1}`) < new Date(`${d2}T${t2}`)) {
                        earliestFlight = f;
                    }
                }
                
                if (earliestFlight.rawStartDate) {
                    startD = earliestFlight.rawStartDate;
                } else if (earliestFlight.startStr && earliestFlight.startStr.includes(',')) {
                    // Extract Date correctly for old records
                    const monthsArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                    let dateStrPart = earliestFlight.startStr.split(',')[0].trim();
                    let dateParts = dateStrPart.split(' ');
                    if (dateParts.length === 2) {
                        let d = String(dateParts[0]).padStart(2, '0');
                        let mIdx = String(monthsArr.indexOf(dateParts[1]) + 1).padStart(2, '0');
                        let y = (currentT && currentT.date) ? new Date(currentT.date).getFullYear() : new Date().getFullYear();
                        if (mIdx !== '00') startD = `${y}-${mIdx}-${d}`;
                    }
                }

                if (earliestFlight.rawStartTime) {
                    startT = earliestFlight.rawStartTime;
                } else if (earliestFlight.startStr && earliestFlight.startStr.includes(',')) {
                    // Extract Time correctly for old records
                    let tMatch = earliestFlight.startStr.match(/(\d+):(\d+)\s*(AM|PM)/i);
                    if (tMatch) {
                        let hh = parseInt(tMatch[1]);
                        let mm = tMatch[2];
                        let ampm = tMatch[3].toUpperCase();
                        if (ampm === 'PM' && hh < 12) hh += 12;
                        if (ampm === 'AM' && hh === 12) hh = 0;
                        startT = `${String(hh).padStart(2, '0')}:${mm}`;
                    }
                }
            }

            const startDateTimeObj = new Date(`${startD}T${startT}`);
            let displayStartDateTime = `${formatToDDMMYYYY(startDateTimeObj)} , ${formatTimeAMPM(startDateTimeObj)}`;
            
            if (earliestFlight && !earliestFlight.rawStartDate && !earliestFlight.rawStartTime && earliestFlight.startStr && earliestFlight.startStr.includes(',')) {
                const monthsArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                let parts = earliestFlight.startStr.split(',');
                let dateStrPart = parts[0].trim();
                let timeStrPart = parts[1] ? parts[1].trim() : '';
                let dateParts = dateStrPart.split(' ');
                if (dateParts.length === 2 && timeStrPart) {
                    let d = String(dateParts[0]).padStart(2, '0');
                    let mStr = dateParts[1];
                    let mIdx = String(monthsArr.indexOf(mStr) + 1).padStart(2, '0');
                    let y = (currentT && currentT.date) ? new Date(currentT.date).getFullYear() : new Date().getFullYear();
                    displayStartDateTime = `${d}-${mIdx}-${y} , ${timeStrPart}`;
                } else {
                    displayStartDateTime = earliestFlight.startStr;
                }
            }

            // Default values
            let displayBorderHrs = 'N/A';
            let displayBorderTime = 'N/A';
            if (currentT.rules && currentT.rules.borderMins > 0) {
                displayBorderHrs = (currentT.rules.borderMins / 60) + ' Hours';
                const borderTimeObj = new Date(startDateTimeObj.getTime() + currentT.rules.borderMins * 60000);
                displayBorderTime = formatTimeAMPM(borderTimeObj);
            }

            // FIX: Max End Time in Top Box (Player-specific rule logic)
            let displayMaxEndTime = 'N/A';
            let playerMaxEndTime = null;
            
            if (playerFlights.length > 0) {
                if (earliestFlight.ruleMaxEndTime) {
                    playerMaxEndTime = earliestFlight.ruleMaxEndTime;
                } else if (startT && startT.includes(':')) {
                    // Fallback exactly 12 hours after their personal Start Time
                    let [h, m] = startT.split(':');
                    let endH = (parseInt(h, 10) + 12) % 24;
                    playerMaxEndTime = `${String(endH).padStart(2, '0')}:${m}`;
                }
            } else if (currentT.rules && currentT.rules.maxEndTime) {
                playerMaxEndTime = currentT.rules.maxEndTime;
            }

            if (playerMaxEndTime) {
                const endObj = new Date(`${startD}T${playerMaxEndTime}`);
                displayMaxEndTime = `${formatToDDMMYYYY(endObj)} , ${formatTimeAMPM(endObj)}`;
            }

            let totalMins = 0; let flightsHtml = '';
            let validCount = 0; let cancelCount = 0; let missingCount = 0;

            if (playerFlights.length === 0) {
                flightsHtml = `<tr><td colspan="4" style="padding: 10px; text-align: center; color: #6b7280; font-size: 13px; vertical-align: middle;">Koi Udaan Darj Nahi</td></tr>`;
            }

            playerFlights.forEach((flight, index) => {
                totalMins += flight.totalMinutes; 
                let statusText = minutesToPlainText(flight.realMinutes);
                let textColor = "#15803d"; 
                
                if(flight.status === 'valid') {
                    validCount++;
                } else if(flight.status === 'border_failed') { 
                    statusText = `<div style="text-align: center; white-space: nowrap;"><span style="display: inline-block; vertical-align: middle; margin-right: 4px;">${redXImg}</span><span style="display: inline-block; vertical-align: middle; text-align: center; line-height: 1.2;">Cancel<br><span style="font-size: 9px;">Before Border</span></span></div>`; 
                    textColor = "#ef4444"; 
                    cancelCount++;
                } else if(flight.status === 'time_over') { 
                    statusText = `<div style="text-align: center; white-space: nowrap;"><span style="display: inline-block; vertical-align: middle; margin-right: 4px;">${redXImg}</span><span style="display: inline-block; vertical-align: middle; text-align: center; line-height: 1.2;">Cancel<br><span style="font-size: 9px;">Over Time</span></span></div>`; 
                    textColor = "#ef4444"; 
                    cancelCount++;
                } else if(flight.status === 'missing') { 
                    statusText = `<div style="text-align: center; white-space: nowrap;"><span style="display: inline-block; vertical-align: middle; margin-right: 4px;">${redXImg}</span><span style="display: inline-block; vertical-align: middle; text-align: center; line-height: 1.2;">Missing<br><span style="font-size: 9px;">(Ghar Nahi Baitha)</span></span></div>`; 
                    textColor = "#ef4444"; 
                    missingCount++;
                }

                let displayEndStr = flight.endStr;
                if (flight.status !== 'missing') {
                    if (flight.rawEndDate && flight.rawEndTime) {
                        const endObj = new Date(`${flight.rawEndDate}T${flight.rawEndTime}`);
                        displayEndStr = formatTimeAMPM(endObj); // ONLY TIME
                    } else if (flight.endStr && flight.endStr.includes(',')) {
                        let parts = flight.endStr.split(',');
                        displayEndStr = parts[1] ? parts[1].trim() : flight.endStr; // ONLY TIME
                    }
                }

                flightsHtml += `
                    <tr style="border-bottom: 1px solid #d1d5db; background-color: ${index % 2 === 0 ? '#ffffff' : '#f8fafc'}; page-break-inside: avoid;">
                        <td style="padding: 8px 4px; text-align: center; border-right: 1px solid #e5e7eb; font-size: 13px; vertical-align: middle;">${index + 1}</td>
                        <td style="padding: 8px 6px; text-align: left; font-weight: bold; color: #1f2937; border-right: 1px solid #e5e7eb; font-size: 13px; word-wrap: break-word; vertical-align: middle;">${sanitizeHTML(flight.pigeonName)}</td>
                        <td style="padding: 8px 4px; text-align: center; color: #4b5563; border-right: 1px solid #e5e7eb; font-size: 12px; vertical-align: middle;">${displayEndStr}</td>
                        <td style="padding: 8px 4px; text-align: center; font-weight: bold; color: ${textColor}; font-size: 14px; vertical-align: middle;">${statusText}</td>
                    </tr>`;
            });

            currentPdfHtmlContent = `
                <div style="width: 760px; padding: 20px; font-family: Arial, sans-serif; color: #1f2937; background: #ffffff; box-sizing: border-box; margin: 0;">
                    <!-- Small Header Top Left -->
                    <div style="text-align: left; margin-bottom: 5px;">
                        <p style="font-size: 11px; font-weight: bold; color: #166534; margin: 0;">Morena Pigeon Dashboard</p>
                        <p style="font-size: 9px; color: #6b7280; margin: 2px 0 0 0;">Tournament / Match / Score Management System</p>
                        <p style="font-size: 10px; color: #b91c1c; margin: 2px 0 0 0; font-weight: bold;">Mob- 9074775012</p>
                    </div>

                    <!-- Naya Header -->
                    <div style="text-align: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #166534;">
                        <h2 style="font-size: 26px; font-weight: bold; color: #1f2937; text-transform: uppercase; margin: 0;">${sanitizeHTML(currentT.name)}</h2>
                        <p style="color: #6b7280; margin-top: 5px; font-size: 16px; font-weight: bold; text-transform: uppercase;">Official Player Scorecard</p>
                    </div>

                    <!-- Info Section: Left and Right Block using Table -->
                    <table style="width: 100%; margin-bottom: 25px; border-collapse: collapse; border: none;">
                        <tr>
                            <td style="width: 60%; vertical-align: top; text-align: left; padding: 0;">
                                <h2 style="font-size: 24px; font-weight: bold; color: #1f2937; margin: 0; margin-bottom: 8px;">Khiladi: <span style="color: #15803d;">${sanitizeHTML(playerName)}</span></h2>
                                <p style="font-size: 15px; color: #4b5563; margin: 0 0 6px 0;">City/Place: <strong style="color: #1f2937;">${sanitizeHTML(playerCity) || '-'}</strong></p>
                                <p style="font-size: 15px; color: #4b5563; margin: 0 0 6px 0;">Udaye Gaye Kabutar (Total Flown): <strong style="color: #1f2937;">${playerFlights.length}</strong></p>
                                <p style="font-size: 15px; color: #4b5563; margin: 0;">Wapas Aaye Kabutar (Returned): <strong style="color: #1f2937;">${validCount + cancelCount}</strong></p>
                            </td>
                            <td style="width: 40%; vertical-align: top; text-align: right; padding: 0;">
                                <div style="background: #f8fafc; padding: 12px 18px; border-radius: 8px; border: 1px solid #cbd5e1; width: 290px; margin-left: auto; text-align: left;">
                                    <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                                        <tr>
                                            <td style="color: #4b5563; font-weight: bold; padding-bottom: 6px; border-bottom: 1px dashed #cbd5e1; vertical-align: middle;">Border:</td>
                                            <td style="text-align: right; color: #b91c1c; font-weight: bold; padding-bottom: 6px; border-bottom: 1px dashed #cbd5e1; white-space: nowrap; vertical-align: middle;">${displayBorderHrs}</td>
                                        </tr>
                                        <tr>
                                            <td style="color: #4b5563; font-weight: bold; padding: 6px 0; border-bottom: 1px dashed #cbd5e1; vertical-align: middle;">Start Time:</td>
                                            <td style="text-align: right; color: #15803d; font-weight: bold; padding: 6px 0; border-bottom: 1px dashed #cbd5e1; white-space: nowrap; vertical-align: middle;">${displayStartDateTime}</td>
                                        </tr>
                                        <tr>
                                            <td style="color: #4b5563; font-weight: bold; padding: 6px 0; border-bottom: 1px dashed #cbd5e1; vertical-align: middle;">Border Time:</td>
                                            <td style="text-align: right; color: #b91c1c; font-weight: bold; padding: 6px 0; border-bottom: 1px dashed #cbd5e1; white-space: nowrap; vertical-align: middle;">${displayBorderTime}</td>
                                        </tr>
                                        <tr>
                                            <td style="color: #4b5563; font-weight: bold; padding-top: 6px; vertical-align: middle;">End Time:</td>
                                            <td style="text-align: right; color: #1f2937; font-weight: bold; padding-top: 6px; white-space: nowrap; vertical-align: middle;">${displayMaxEndTime}</td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>

                    <!-- Data Table -->
                    <table style="width: 100%; text-align: left; border-collapse: collapse; margin-bottom: 25px; border: 1px solid #d1d5db; font-size: 14px;">
                        <thead>
                            <tr style="background-color: #166534; color: #ffffff; page-break-inside: avoid; height: 36px;">
                                <th style="padding: 10px 8px; text-align: center; border-right: 1px solid #14532d; width: 8%; vertical-align: middle;">Sr.</th>
                                <th style="padding: 10px 8px; text-align: left; border-right: 1px solid #14532d; width: 32%; vertical-align: middle;">Kabutar Ka Naam</th>
                                <th style="padding: 10px 8px; text-align: center; border-right: 1px solid #14532d; width: 30%; vertical-align: middle;">Waapsi Time</th>
                                <th style="padding: 10px 8px; text-align: center; width: 30%; vertical-align: middle;">Pigeon Time</th>
                            </tr>
                        </thead>
                        <tbody>${flightsHtml}</tbody>
                    </table>

                    <!-- Footer with Stats -->
                    <table style="width: 100%; background-color: #f0fdf4; border-radius: 8px; border: 2px dashed #16a34a; page-break-inside: avoid;">
                        <tr>
                            <td style="padding: 12px 15px; text-align: left; vertical-align: middle; border-right: 1px dashed #16a34a; width: 50%;">
                                <table style="width: 100%; border-collapse: collapse; font-size: 12px; color: #166534;">
                                    <tr>
                                        <td style="text-align: left; padding-bottom: 5px; vertical-align: middle;">Time Lekar Baithe Kabutar:</td>
                                        <td style="text-align: right; font-weight: bold; padding-bottom: 5px; vertical-align: middle;">${validCount}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left; padding-bottom: 5px; vertical-align: middle;">Cancel Kabutar:</td>
                                        <td style="text-align: right; font-weight: bold; padding-bottom: 5px; vertical-align: middle;">${cancelCount}</td>
                                    </tr>
                                    <tr>
                                        <td style="text-align: left; vertical-align: middle;">Missing Kabutar:</td>
                                        <td style="text-align: right; font-weight: bold; vertical-align: middle;">${missingCount}</td>
                                    </tr>
                                </table>
                            </td>
                            <td style="padding: 12px 15px; text-align: right; width: 50%; vertical-align: middle;">
                                <div style="font-size: 13px; font-weight: bold; color: #166534; text-transform: uppercase; margin-bottom: 12px;">TOTAL SCORE (VALID TIME)</div>
                                <div>
                                    <span style="font-size: 18px; font-weight: bold; color: #ffffff; background: #16a34a; padding: 6px 16px; border-radius: 6px; display: inline-block;">${minutesToPlainText(totalMins)}</span>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>`;

            // Preview Box me show karein
            document.getElementById('previewContainer').innerHTML = `<div style="min-width: 700px; background: white;">${currentPdfHtmlContent}</div>`;
            
            const pdfModal = document.getElementById('pdfPreviewModal');
            if(pdfModal) pdfModal.classList.add('active');
        }

        function closePdfPreviewModal() { 
            const pdfModal = document.getElementById('pdfPreviewModal');
            if(pdfModal) pdfModal.classList.remove('active'); 
        }

        function downloadActualPDF() {
            let filename = `Scorecard_${currentPlayerForPDF.replace(/\s+/g, '_')}.pdf`;
            if (currentPlayerForPDF.startsWith('Leaderboard')) {
                filename = `${currentPlayerForPDF.replace(/\s+/g, '_')}.pdf`;
            }
            
            showToast("⏳ PDF ban raha hai, thoda intezaar karein...");
            
            const opt = { 
                margin: 0.3, 
                filename: filename, 
                image: { type: 'jpeg', quality: 1 }, 
                html2canvas: { scale: 2, useCORS: true, width: 760 }, 
                jsPDF: { unit: 'in', format: 'a4', orientation: 'portrait' }
            };

            setTimeout(() => {
                html2pdf().set(opt).from(currentPdfHtmlContent).save().then(() => {
                    closePdfPreviewModal(); 
                    showToast("✅ PDF Download ho gaya!");
                }).catch(err => {
                    alert("PDF banane mein error aayi!");
                });
            }, 300);
        }
        
        function downloadActualJPG() {
            let filename = `Scorecard_${currentPlayerForPDF.replace(/\s+/g, '_')}.jpg`;
            if (currentPlayerForPDF.startsWith('Leaderboard')) {
                filename = `${currentPlayerForPDF.replace(/\s+/g, '_')}.jpg`;
            }
            
            showToast("⏳ JPG ban raha hai, thoda intezaar karein...");
            
            const wrapper = document.createElement('div');
            wrapper.innerHTML = currentPdfHtmlContent;
            wrapper.style.position = 'absolute';
            wrapper.style.top = '0';
            wrapper.style.left = '0';
            wrapper.style.width = '760px';
            wrapper.style.backgroundColor = '#ffffff';
            wrapper.style.zIndex = '-9999';
            document.body.appendChild(wrapper);
            
            setTimeout(() => {
                html2canvas(wrapper, { 
                    scale: 2, 
                    useCORS: true, 
                    logging: false,
                    width: 760,
                    windowWidth: 760,
                    x: 0,
                    y: 0,
                    scrollX: 0,
                    scrollY: 0
                }).then(canvas => {
                    const link = document.createElement('a');
                    link.download = filename;
                    link.href = canvas.toDataURL('image/jpeg', 1.0);
                    link.click();
                    closePdfPreviewModal();
                    wrapper.remove();
                    showToast("✅ JPG Download ho gaya!");
                }).catch(err => {
                    wrapper.remove();
                    console.error(err);
                    alert("JPG banane mein error aayi!");
                });
            }, 300);
        }

        function exportData() {
            if (Object.keys(appData.tournaments).length === 0) { alert("Koi data nahi hai!"); return; }
            const dataStr = JSON.stringify(appData);
            const dataUri = 'data:application/json;charset=utf-8,'+ encodeURIComponent(dataStr);
            const linkElement = document.createElement('a');
            linkElement.setAttribute('href', dataUri);
            linkElement.setAttribute('download', 'Kabutar_Tournament_Backup.json');
            linkElement.click();
            showToast("Backup download ho gaya!");
        }

        function importData(event) {
            const file = event.target.files[0];
            if (!file) return;
            if(confirm("DHYAN DEIN: Restore karne se purana data hat jayega. Aage badhein?")) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    try {
                        const importedData = JSON.parse(e.target.result);
                        if (importedData && importedData.tournaments) {
                            appData = importedData; saveApp(true);
                            alert("Data safaltapurvak restore ho gaya hai!");
                            window.location.reload(); 
                        } else { alert("Error: File sahi nahi hai."); }
                    } catch (error) { alert("Error: File read nahi ho saki."); }
                };
                reader.readAsText(file);
            }
            event.target.value = '';
        }
    </script>

    <!-- FIREBASE CLOUD SYNC MODULE -->
    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
        import { getAuth, signInAnonymously, signInWithCustomToken, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
        import { getFirestore, doc, setDoc, onSnapshot } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";

        let firebaseConfig = {};
        try {
            firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {};
        } catch(e) {}

        const app = initializeApp(firebaseConfig);
        const auth = getAuth(app);
        const db = getFirestore(app);
        const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

        let currentUser = null;
        let isSettingFromCloud = false;

        async function initAuth() {
            try {
                if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
                    await signInWithCustomToken(auth, __initial_auth_token);
                } else {
                    await signInAnonymously(auth);
                }
            } catch (error) {
                console.error("Auth error:", error);
            }
        }

        onAuthStateChanged(auth, (user) => {
            currentUser = user;
            if (user) {
                const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'tournament_data', 'main_save');
                onSnapshot(docRef, (docSnap) => {
                    if (docSnap.exists()) {
                        isSettingFromCloud = true;
                        if (window.receiveCloudData) {
                            window.receiveCloudData(docSnap.data());
                        }
                        setTimeout(() => { isSettingFromCloud = false; }, 500);
                    }
                }, (error) => {
                    console.error("Listen failed: ", error);
                });
            }
        });

        window.syncToCloud = async function(data) {
            if (!currentUser || isSettingFromCloud) return;
            try {
                const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'tournament_data', 'main_save');
                await setDoc(docRef, data);
            } catch (error) {
                console.error("Error syncing to cloud: ", error);
            }
        };

        initAuth();
    </script>
</body>
</html>