<?php
// ============================================
// SISTEMA GERADOR DE BANNERS DE FUTEBOL V8
// VERSÃO PREMIUM COMPLETA
// ============================================

session_start();

// ============================================
// CONFIGURAÇÕES
// ============================================
$config = [
    'logo' => '',
    'logo_login' => '',
    'background' => 'https://images.unsplash.com/photo-1508098682722-e99c43a406b2?q=80&w=2070&auto=format&fit=crop',
    'site_name' => '⚽ GERADOR DE BANNERS',
    'banners_por_pagina' => 6,
    'tema' => 'dark',
    'cor_primaria' => '#4a7cf7',
    'data_banner' => date('d/m/Y')
];

if (file_exists('config.json')) {
    $config = array_merge($config, json_decode(file_get_contents('config.json'), true));
}

// ============================================
// USUÁRIOS
// ============================================
$users = [];
if (file_exists('users.json')) {
    $users = json_decode(file_get_contents('users.json'), true);
}
if (empty($users)) {
    $users = ['admin' => password_hash('admin123', PASSWORD_DEFAULT)];
    file_put_contents('users.json', json_encode($users));
}

// ============================================
// DADOS DOS JOGOS (com suporte a CRUD)
// ============================================
function getGamesData() {
    $default = [
        ['id' => 1, 'campeonato' => 'Copa do Mundo', 'time1' => 'PORTUGAL', 'time2' => 'ESPANHA', 'data' => '06/07', 'hora' => '16:00', 'canais' => ['GLOBO', 'SBT', 'SPORTV']],
        ['id' => 2, 'campeonato' => 'Brasileirão Série B', 'time1' => 'BOTAFOGO SP', 'time2' => 'AVAI', 'data' => '06/07', 'hora' => '19:00', 'canais' => ['DISNEY+']],
        ['id' => 3, 'campeonato' => 'Brasileirão Série B', 'time1' => 'VILA NOVA', 'time2' => 'SÃO BERNARDO', 'data' => '06/07', 'hora' => '19:00', 'canais' => ['ESPN', 'SPORTYNET']],
        ['id' => 4, 'campeonato' => 'Brasileirão Série C', 'time1' => 'BRUSQUE', 'time2' => 'FIGUEIRENSE', 'data' => '06/07', 'hora' => '19:00', 'canais' => ['SPORTYNET', 'YOUTUBE']],
        ['id' => 5, 'campeonato' => 'Brasileirão Série C', 'time1' => 'AMAZONAS', 'time2' => 'ITABAIANA', 'data' => '06/07', 'hora' => '21:00', 'canais' => ['SPORTYNET']],
        ['id' => 6, 'campeonato' => 'Copa do Mundo', 'time1' => 'ESTADOS UNIDOS', 'time2' => 'BÉLGICA', 'data' => '06/07', 'hora' => '21:00', 'canais' => ['PRIME VIDEO']],
    ];
    
    if (file_exists('jogos_data.json')) {
        $saved = json_decode(file_get_contents('jogos_data.json'), true);
        if (is_array($saved) && !empty($saved)) {
            return $saved;
        }
    }
    return $default;
}

function saveGamesData($games) {
    file_put_contents('jogos_data.json', json_encode($games, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE));
}

// ============================================
// LOGOS
// ============================================
function getTeamLogo($teamName) {
    $teamName = strtoupper(trim((string)$teamName));
    $logos = [
        'PORTUGAL' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Portugal.svg/200px-Flag_of_Portugal.svg.png',
        'ESPANHA' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Spain.svg/200px-Flag_of_Spain.svg.png',
        'BOTAFOGO SP' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Botafogo_Futebol_Clube_logo.svg/200px-Botafogo_Futebol_Clube_logo.svg.png',
        'AVAI' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ava%C3%AD_Futebol_Clube_logo.svg/200px-Ava%C3%AD_Futebol_Clube_logo.svg.png',
        'VILA NOVA' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Vila_Nova_Futebol_Clube_logo.svg/200px-Vila_Nova_Futebol_Clube_logo.svg.png',
        'SÃO BERNARDO' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8f/São_Bernardo_Futebol_Clube_logo.svg/200px-São_Bernardo_Futebol_Clube_logo.svg.png',
        'BRUSQUE' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Brusque_Futebol_Clube_logo.svg/200px-Brusque_Futebol_Clube_logo.svg.png',
        'FIGUEIRENSE' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Figueirense_Futebol_Clube_logo.svg/200px-Figueirense_Futebol_Clube_logo.svg.png',
        'AMAZONAS' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Amazonas_FC_logo.svg/200px-Amazonas_FC_logo.svg.png',
        'ITABAIANA' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Associa%C3%A7%C3%A3o_Ol%C3%ADmpica_de_Itabaiana_logo.svg/200px-Associa%C3%A7%C3%A3o_Ol%C3%ADmpica_de_Itabaiana_logo.svg.png',
        'ESTADOS UNIDOS' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Flag_of_the_United_States.svg/200px-Flag_of_the_United_States.svg.png',
        'BÉLGICA' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Flag_of_Belgium.svg/200px-Flag_of_Belgium.svg.png',
    ];
    foreach ($logos as $key => $url) {
        if (strpos($teamName, $key) !== false || strpos($key, $teamName) !== false) return $url;
    }
    return '';
}

function getChannelLogo($channel) {
    $channel = strtoupper(trim((string)$channel));
    $logos = [
        'GLOBO' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Rede_Globo_2021_logo.svg/200px-Rede_Globo_2021_logo.svg.png',
        'SBT' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/63/SBT_2021_logo.svg/200px-SBT_2021_logo.svg.png',
        'SPORTV' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/SporTV_logo.svg/200px-SporTV_logo.svg.png',
        'ESPN' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/ESPN_logo.svg/200px-ESPN_logo.svg.png',
        'DISNEY+' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3e/Disney%2B_logo.svg/200px-Disney%2B_logo.svg.png',
        'YOUTUBE' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Logo_of_YouTube_%282015-2017%29.svg/200px-Logo_of_YouTube_%282015-2017%29.svg.png',
        'PRIME VIDEO' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Amazon_Prime_Video_logo.svg/200px-Amazon_Prime_Video_logo.svg.png',
    ];
    foreach ($logos as $key => $url) {
        if (strpos($channel, $key) !== false || strpos($key, $channel) !== false) return $url;
    }
    return '';
}

function getCompetitionLogo($campeonato) {
    $campeonato = strtoupper(trim((string)$campeonato));
    $logos = [
        'COPA DO MUNDO' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/FIFA_logo_without_slogan.svg/200px-FIFA_logo_without_slogan.svg.png',
        'SÉRIE B' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Campeonato_Brasileiro_S%C3%A9rie_B_logo.png/200px-Campeonato_Brasileiro_S%C3%A9rie_B_logo.png',
        'SÉRIE C' => 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Campeonato_Brasileiro_S%C3%A9rie_C_logo.png/200px-Campeonato_Brasileiro_S%C3%A9rie_C_logo.png',
    ];
    foreach ($logos as $key => $url) {
        if (strpos($campeonato, $key) !== false) return $url;
    }
    return '';
}

// ============================================
// PROCESSAMENTO
// ============================================
$message = '';
$message_type = '';
$allGames = getGamesData();

// --- CRUD: Adicionar Jogo ---
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_game'])) {
    $newGame = [
        'id' => count($allGames) + 1,
        'campeonato' => $_POST['campeonato'] ?? 'Campeonato',
        'time1' => strtoupper($_POST['time1'] ?? 'TIME A'),
        'time2' => strtoupper($_POST['time2'] ?? 'TIME B'),
        'data' => $_POST['data'] ?? date('d/m/Y'),
        'hora' => $_POST['hora'] ?? '00:00',
        'canais' => array_filter(array_map('trim', explode(',', $_POST['canais'] ?? '')))
    ];
    if (empty($newGame['canais'])) $newGame['canais'] = ['AO VIVO'];
    $allGames[] = $newGame;
    saveGamesData($allGames);
    $message = '✅ Jogo adicionado com sucesso!';
    $message_type = 'success';
}

// --- CRUD: Editar Jogo ---
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['edit_game'])) {
    $id = (int)$_POST['game_id'];
    foreach ($allGames as &$game) {
        if ($game['id'] == $id) {
            $game['campeonato'] = $_POST['campeonato'] ?? $game['campeonato'];
            $game['time1'] = strtoupper($_POST['time1'] ?? $game['time1']);
            $game['time2'] = strtoupper($_POST['time2'] ?? $game['time2']);
            $game['data'] = $_POST['data'] ?? $game['data'];
            $game['hora'] = $_POST['hora'] ?? $game['hora'];
            $game['canais'] = array_filter(array_map('trim', explode(',', $_POST['canais'] ?? '')));
            if (empty($game['canais'])) $game['canais'] = ['AO VIVO'];
            break;
        }
    }
    saveGamesData($allGames);
    $message = '✅ Jogo editado com sucesso!';
    $message_type = 'success';
}

// --- CRUD: Excluir Jogo ---
if (isset($_GET['delete'])) {
    $id = (int)$_GET['delete'];
    $allGames = array_filter($allGames, function($game) use ($id) {
        return $game['id'] != $id;
    });
    $allGames = array_values($allGames);
    saveGamesData($allGames);
    $message = '🗑️ Jogo removido com sucesso!';
    $message_type = 'success';
}

// --- Trocar senha ---
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['change_password'])) {
    $current = $_POST['current_password'] ?? '';
    $new = $_POST['new_password'] ?? '';
    $confirm = $_POST['confirm_password'] ?? '';
    $username = $_SESSION['username'] ?? 'admin';
    if (password_verify($current, $users[$username])) {
        if ($new === $confirm && strlen($new) >= 4) {
            $users[$username] = password_hash($new, PASSWORD_DEFAULT);
            file_put_contents('users.json', json_encode($users));
            $message = '✅ Senha alterada com sucesso!';
            $message_type = 'success';
        } else {
            $message = '❌ Nova senha não coincide ou é muito curta';
            $message_type = 'error';
        }
    } else {
        $message = '❌ Senha atual incorreta!';
        $message_type = 'error';
    }
}

// --- Uploads ---
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_SESSION['loggedin'])) {
    // Logo do banner
    if (isset($_FILES['logo_file']) && $_FILES['logo_file']['error'] === UPLOAD_ERR_OK) {
        $ext = pathinfo($_FILES['logo_file']['name'], PATHINFO_EXTENSION);
        $path = 'uploads/logo_' . time() . '.' . $ext;
        if (!is_dir('uploads')) mkdir('uploads', 0777, true);
        move_uploaded_file($_FILES['logo_file']['tmp_name'], $path);
        $config['logo'] = $path;
        file_put_contents('config.json', json_encode($config));
        $message = '✅ Logo do banner atualizada!';
        $message_type = 'success';
    }
    // Logo do login
    if (isset($_FILES['logo_login_file']) && $_FILES['logo_login_file']['error'] === UPLOAD_ERR_OK) {
        $ext = pathinfo($_FILES['logo_login_file']['name'], PATHINFO_EXTENSION);
        $path = 'uploads/logo_login_' . time() . '.' . $ext;
        if (!is_dir('uploads')) mkdir('uploads', 0777, true);
        move_uploaded_file($_FILES['logo_login_file']['tmp_name'], $path);
        $config['logo_login'] = $path;
        file_put_contents('config.json', json_encode($config));
        $message = '✅ Logo do login atualizada!';
        $message_type = 'success';
    }
    // Fundo
    if (isset($_FILES['background_file']) && $_FILES['background_file']['error'] === UPLOAD_ERR_OK) {
        $ext = pathinfo($_FILES['background_file']['name'], PATHINFO_EXTENSION);
        $path = 'uploads/bg_' . time() . '.' . $ext;
        if (!is_dir('uploads')) mkdir('uploads', 0777, true);
        move_uploaded_file($_FILES['background_file']['tmp_name'], $path);
        $config['background'] = $path;
        file_put_contents('config.json', json_encode($config));
        $message = '✅ Fundo do banner atualizado!';
        $message_type = 'success';
    }
    // Tema e cor
    if (isset($_POST['tema'])) {
        $config['tema'] = $_POST['tema'];
        $config['cor_primaria'] = $_POST['cor_primaria'] ?? '#4a7cf7';
        file_put_contents('config.json', json_encode($config));
        $message = '✅ Tema atualizado!';
        $message_type = 'success';
    }
    // Data do banner
    if (isset($_POST['data_banner'])) {
        $config['data_banner'] = $_POST['data_banner'];
        file_put_contents('config.json', json_encode($config));
        $message = '✅ Data do banner atualizada!';
        $message_type = 'success';
    }
}

// Logout
if (isset($_GET['logout'])) {
    session_destroy();
    header('Location: ' . $_SERVER['PHP_SELF']);
    exit;
}

// ============================================
// LOGIN
// ============================================
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['login'])) {
    $username = $_POST['username'] ?? '';
    $password = $_POST['password'] ?? '';
    if (isset($users[$username]) && password_verify($password, $users[$username])) {
        $_SESSION['loggedin'] = true;
        $_SESSION['username'] = $username;
        header('Location: ' . $_SERVER['PHP_SELF']);
        exit;
    }
}

if (!isset($_SESSION['loggedin'])) {
    ?>
    <!DOCTYPE html>
    <html lang="pt-BR">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Login</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:'Segoe UI',sans-serif;background:linear-gradient(135deg,#0a0e27,#1a1f3a);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
        .login-box{background:rgba(255,255,255,0.05);backdrop-filter:blur(20px);padding:50px 40px;border-radius:25px;width:100%;max-width:420px;text-align:center;border:1px solid rgba(255,255,255,0.1);box-shadow:0 25px 80px rgba(0,0,0,0.5)}
        .login-logo{max-width:150px;max-height:80px;object-fit:contain;margin-bottom:20px}
        .login-box h2{color:#fff;font-size:24px;margin-bottom:5px}
        .login-box .sub{color:#888;font-size:14px;margin-bottom:30px}
        input{width:100%;padding:14px 18px;margin:8px 0;border-radius:12px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);color:#fff;font-size:15px;transition:border .3s}
        input:focus{outline:none;border-color:#4a7cf7}
        input::placeholder{color:#666}
        button{width:100%;padding:14px;background:linear-gradient(135deg,#4a7cf7,#6c5ce7);border:none;color:#fff;border-radius:12px;cursor:pointer;font-weight:bold;font-size:16px;margin-top:15px;transition:transform .2s}
        button:hover{transform:scale(1.02)}
        .footer{color:#555;font-size:12px;margin-top:25px}
    </style>
    </head>
    <body>
        <div class="login-box">
            <?php if ($config['logo_login']): ?><img src="<?= $config['logo_login'] ?>" class="login-logo"><?php else: ?><div style="font-size:48px;">⚽</div><?php endif; ?>
            <h2><?= $config['site_name'] ?></h2>
            <p class="sub">Faça login para acessar o painel</p>
            <form method="POST">
                <input type="text" name="username" placeholder="👤 Usuário" required>
                <input type="password" name="password" placeholder="🔒 Senha" required>
                <button type="submit" name="login">Entrar</button>
            </form>
            <p class="footer">v8.0 - Premium</p>
        </div>
    </body>
    </html>
    <?php
    exit;
}

// ============================================
// DADOS PARA DASHBOARD
// ============================================
$totalJogos = count($allGames);
$gamesPerBanner = $config['banners_por_pagina'] ?? 6;
$totalBanners = ceil($totalJogos / $gamesPerBanner);
$banners = array_chunk($allGames, $gamesPerBanner);

$canaisUnicos = [];
$campeonatosUnicos = [];
foreach ($allGames as $game) {
    foreach ($game['canais'] as $canal) $canaisUnicos[$canal] = true;
    $campeonatosUnicos[$game['campeonato']] = true;
}
$totalCanais = count($canaisUnicos);
$totalCampeonatos = count($campeonatosUnicos);

$page = isset($_GET['page']) ? $_GET['page'] : 'dashboard';
$editGame = null;
if (isset($_GET['edit'])) {
    $id = (int)$_GET['edit'];
    foreach ($allGames as $g) {
        if ($g['id'] == $id) { $editGame = $g; break; }
    }
}

// ============================================
// COR PRIMÁRIA DINÂMICA
// ============================================
$cor = $config['cor_primaria'] ?? '#4a7cf7';
$tema = $config['tema'] ?? 'dark';
$bgDark = $tema == 'dark' ? '#0a0e14' : '#f0f2f5';
$bgCard = $tema == 'dark' ? '#1a1f26' : '#ffffff';
$borderColor = $tema == 'dark' ? '#2a2f3a' : '#e0e0e0';
$textColor = $tema == 'dark' ? '#e0e0e0' : '#1a1a2e';
$textSecondary = $tema == 'dark' ? '#888' : '#666';
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $config['site_name'] ?></title>
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: <?= $cor ?>;
            --primary-dark: <?= $cor ?>cc;
            --secondary: #6c5ce7;
            --dark: <?= $bgDark ?>;
            --dark-card: <?= $bgCard ?>;
            --border: <?= $borderColor ?>;
            --text: <?= $textColor ?>;
            --text-secondary: <?= $textSecondary ?>;
            --success: #00ff88;
            --danger: #ff6b6b;
            --sidebar-width: 260px;
        }
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:'Segoe UI',sans-serif;background:var(--dark);color:var(--text);display:flex;min-height:100vh}
        
        /* SIDEBAR */
        .sidebar{width:var(--sidebar-width);background:var(--dark-card);border-right:1px solid var(--border);height:100vh;position:sticky;top:0;display:flex;flex-direction:column;padding:25px 0;transition:transform .3s;z-index:1000;overflow-y:auto}
        .sidebar-brand{padding:0 20px 25px;text-align:center;border-bottom:1px solid var(--border)}
        .sidebar-brand img{max-height:60px;max-width:180px;object-fit:contain}
        .sidebar-brand .name{color:#fff;font-size:16px;font-weight:800;margin-top:8px;display:block}
        .sidebar-nav{flex:1;padding:20px 12px}
        .sidebar-nav a{display:flex;align-items:center;gap:14px;padding:12px 18px;color:var(--text-secondary);text-decoration:none;border-radius:12px;margin-bottom:4px;transition:all .3s;font-size:14px;font-weight:500}
        .sidebar-nav a:hover{background:rgba(74,124,247,0.1);color:#fff}
        .sidebar-nav a.active{background:linear-gradient(135deg,rgba(74,124,247,0.2),rgba(108,92,231,0.2));color:#fff;border:1px solid rgba(74,124,247,0.2)}
        .sidebar-nav a i{width:22px;text-align:center;font-size:16px}
        .sidebar-nav .badge{margin-left:auto;background:var(--primary);color:#fff;font-size:11px;padding:2px 10px;border-radius:20px}
        .sidebar-footer{padding:15px 20px;border-top:1px solid var(--border)}
        .sidebar-footer .user-info{display:flex;align-items:center;gap:12px;margin-bottom:12px}
        .sidebar-footer .user-info .avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;color:#fff}
        .sidebar-footer .user-info .name{font-weight:600;font-size:14px;color:var(--text)}
        .sidebar-footer .user-info .role{font-size:12px;color:var(--text-secondary)}
        .sidebar-footer .btn-sair{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:10px;background:rgba(255,107,107,0.1);color:var(--danger);border:1px solid rgba(255,107,107,0.2);border-radius:10px;text-decoration:none;font-weight:600;font-size:14px;transition:all .3s}
        .sidebar-footer .btn-sair:hover{background:rgba(255,107,107,0.2)}
        .sidebar-toggle{display:none;position:fixed;top:15px;left:15px;z-index:1100;background:var(--dark-card);border:1px solid var(--border);color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer;font-size:20px}
        .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:999}
        
        /* MAIN */
        .main{flex:1;padding:25px 30px 40px;overflow-x:hidden}
        .main-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:15px}
        .main-header h1{font-size:24px;font-weight:800;color:var(--text)}
        .main-header h1 span{color:var(--primary)}
        .main-header .subtitle{color:var(--text-secondary);font-size:14px}
        
        /* STATS */
        .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:20px;margin-bottom:30px}
        .stat-card{background:var(--dark-card);border:1px solid var(--border);border-radius:16px;padding:20px 24px;transition:transform .3s}
        .stat-card:hover{transform:translateY(-3px)}
        .stat-card .number{font-size:32px;font-weight:900;color:#fff}
        .stat-card .label{font-size:13px;color:var(--text-secondary);margin-top:4px}
        .stat-card .icon{float:right;font-size:28px;opacity:0.3}
        .stat-card.primary .number{color:var(--primary)}
        .stat-card.success .number{color:var(--success)}
        .stat-card.warning .number{color:#f9ca24}
        .stat-card.danger .number{color:var(--danger)}
        
        /* MESSAGES */
        .message{padding:14px 20px;border-radius:12px;margin-bottom:20px;display:flex;align-items:center;gap:12px}
        .message.success{background:rgba(0,255,136,0.1);border:1px solid rgba(0,255,136,0.2);color:var(--success)}
        .message.error{background:rgba(255,107,107,0.1);border:1px solid rgba(255,107,107,0.2);color:var(--danger)}
        
        /* PANELS */
        .panel{background:var(--dark-card);border:1px solid var(--border);border-radius:16px;padding:25px;margin-bottom:30px}
        .panel h3{color:#fff;font-size:18px;margin-bottom:20px}
        .panel form{display:flex;gap:25px;flex-wrap:wrap}
        .panel .form-item{display:flex;flex-direction:column;gap:8px;flex:1;min-width:180px}
        .panel .form-item label{color:var(--text-secondary);font-size:13px;font-weight:600}
        .panel .form-item input,.panel .form-item select{background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-size:14px}
        .panel .form-item input:focus,.panel .form-item select:focus{outline:none;border-color:var(--primary)}
        .panel .form-item input[type="file"]{padding:10px}
        .preview-logo{height:50px;object-fit:contain;background:#fff;padding:5px;border-radius:8px;margin-top:8px}
        .btn-primary{padding:10px 24px;background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;color:#fff;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;transition:transform .2s}
        .btn-primary:hover{transform:scale(1.02)}
        .btn-danger{background:var(--danger);padding:6px 14px;border:none;color:#fff;border-radius:8px;cursor:pointer;font-size:13px}
        .btn-sm{padding:4px 12px;border:none;border-radius:6px;color:#fff;cursor:pointer;font-size:12px;text-decoration:none;display:inline-block}
        .btn-edit{background:var(--primary)}
        .btn-delete{background:var(--danger)}
        
        /* GAME LIST */
        .game-list{display:grid;gap:10px;margin-top:15px}
        .game-item{display:flex;align-items:center;gap:14px;padding:12px 16px;background:rgba(255,255,255,0.03);border-radius:10px;flex-wrap:wrap;border:1px solid transparent;transition:border .3s}
        .game-item:hover{border-color:var(--border)}
        .game-item .info{flex:1;min-width:150px}
        .game-item .info .title{font-weight:600;font-size:14px;color:var(--text)}
        .game-item .info .meta{font-size:12px;color:var(--text-secondary)}
        .game-item .actions{display:flex;gap:8px;flex-wrap:wrap}
        
        /* BANNER */
        .banner-wrapper{width:100%;max-width:600px;min-height:800px;background-size:cover;background-position:center;padding:30px 20px;display:flex;flex-direction:column;gap:14px;border-radius:14px;position:relative}
        .banner-header{background:rgba(255,255,255,0.95);border-radius:22px;padding:16px 22px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
        .banner-header .user-logo{height:65px;max-width:180px;object-fit:contain}
        .banner-header .date-box{text-align:right}
        .banner-header .day-text{font-size:16px;font-weight:800;color:#666;text-transform:uppercase;letter-spacing:2px}
        .banner-header .date-text{font-size:30px;font-weight:900;color:#e53935;text-transform:uppercase;line-height:1.1}
        .game-card{background:#fff;border-radius:22px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:72px;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
        .game-card .shield-side{width:50px;height:50px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
        .game-card .shield-side img{max-width:100%;max-height:100%;object-fit:contain}
        .game-card .info-center{flex:1;text-align:center;padding:0 6px;min-width:0}
        .game-card .game-title{font-size:13px;font-weight:900;color:#000;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .game-card .blue-pill{background:#1a237e;border-radius:18px;padding:3px 12px;display:inline-flex;align-items:center;gap:8px;color:#fff}
        .game-card .time-val{font-size:15px;font-weight:900;border-right:2px solid rgba(255,255,255,0.3);padding-right:8px}
        .game-card .ch-list{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
        .game-card .ch-img{height:16px;max-width:40px;object-fit:contain;filter:brightness(0)invert(1)}
        .game-card .ch-txt{font-size:9px;font-weight:bold}
        .game-card .comp-side{width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
        .game-card .comp-side img{max-width:100%;max-height:100%;object-fit:contain}
        .btn-download{width:100%;max-width:600px;padding:14px;background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;color:#fff;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;transition:transform .2s}
        .btn-download:hover{transform:scale(1.02)}
        .btn-download:disabled{opacity:0.6;cursor:not-allowed;transform:none}
        .banners-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(480px,1fr));gap:40px}
        .banner-item{display:flex;flex-direction:column;gap:15px;align-items:center}
        
        /* MODAL */
        .modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:2000;align-items:center;justify-content:center;padding:20px}
        .modal.open{display:flex}
        .modal-content{background:var(--dark-card);border:1px solid var(--border);border-radius:20px;padding:30px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto}
        .modal-content h2{color:#fff;margin-bottom:20px}
        .modal-content .form-item{margin-bottom:15px}
        .modal-content .form-item label{display:block;color:var(--text-secondary);font-size:13px;font-weight:600;margin-bottom:5px}
        .modal-content .form-item input,.modal-content .form-item select{width:100%;padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:14px}
        .modal-content .form-item input:focus,.modal-content .form-item select:focus{outline:none;border-color:var(--primary)}
        .modal-actions{display:flex;gap:12px;margin-top:20px;justify-content:flex-end}
        .modal-actions .btn{ padding:10px 24px;border:none;border-radius:10px;font-weight:600;cursor:pointer}
        .modal-actions .btn-cancel{background:var(--border);color:var(--text)}
        .modal-actions .btn-save{background:var(--primary);color:#fff}
        
        /* RESPONSIVO */
        @media(max-width:992px){
            .sidebar{position:fixed;transform:translateX(-100%);height:100vh;top:0;left:0}
            .sidebar.open{transform:translateX(0)}
            .sidebar-overlay.open{display:block}
            .sidebar-toggle{display:block}
            .main{padding:20px 16px;padding-top:70px}
            .banners-grid{grid-template-columns:1fr}
            .banner-wrapper{max-width:100%;min-height:auto}
            .stats-grid{grid-template-columns:repeat(2,1fr)}
            .panel form{flex-direction:column}
            .panel .form-item{min-width:100%}
        }
        @media(max-width:480px){
            .stats-grid{grid-template-columns:1fr}
            .banner-header .day-text{font-size:13px}
            .banner-header .date-text{font-size:22px}
            .game-card .game-title{font-size:11px;white-space:normal}
            .game-card .shield-side{width:38px;height:38px}
            .game-card .comp-side{width:32px;height:32px}
            .game-card .time-val{font-size:12px}
            .game-card .blue-pill{padding:2px 8px;gap:5px}
            .game-card .ch-img{height:13px;max-width:30px}
            .main-header h1{font-size:18px}
            .game-item{flex-direction:column;align-items:stretch}
            .game-item .actions{justify-content:flex-end}
            .modal-content{padding:20px}
        }
    </style>
</head>
<body>

<!-- SIDEBAR TOGGLE -->
<button class="sidebar-toggle" onclick="toggleSidebar()"><i class="fas fa-bars"></i></button>
<div class="sidebar-overlay" onclick="toggleSidebar()"></div>

<!-- SIDEBAR -->
<aside class="sidebar" id="sidebar">
    <div class="sidebar-brand">
        <?php if ($config['logo']): ?><img src="<?= $config['logo'] ?>"><?php else: ?><div style="font-size:36px;">⚽</div><?php endif; ?>
        <span class="name"><?= $config['site_name'] ?></span>
    </div>
    <nav class="sidebar-nav">
        <a href="?page=dashboard" class="<?= $page=='dashboard'?'active':''?>"><i class="fas fa-chart-pie"></i> Dashboard <span class="badge"><?= $totalJogos ?></span></a>
        <a href="?page=banners" class="<?= $page=='banners'?'active':''?>"><i class="fas fa-images"></i> Banners <span class="badge"><?= $totalBanners ?></span></a>
        <a href="?page=editor" class="<?= $page=='editor'?'active':''?>"><i class="fas fa-edit"></i> Editor de Jogos</a>
        <a href="?page=config" class="<?= $page=='config'?'active':''?>"><i class="fas fa-palette"></i> Configurações</a>
        <a href="?page=profile" class="<?= $page=='profile'?'active':''?>"><i class="fas fa-user-cog"></i> Perfil</a>
    </nav>
    <div class="sidebar-footer">
        <div class="user-info">
            <div class="avatar"><?= strtoupper(substr($_SESSION['username'],0,1)) ?></div>
            <div><div class="name"><?= htmlspecialchars($_SESSION['username']) ?></div><div class="role">Administrador</div></div>
        </div>
        <a href="?logout=1" class="btn-sair"><i class="fas fa-sign-out-alt"></i> Sair</a>
    </div>
</aside>

<!-- MAIN -->
<main class="main">

    <div class="main-header">
        <div>
            <h1><?php if($page=='dashboard'):?>📊 <span>Dashboard</span><?php elseif($page=='banners'):?>🖼️ <span>Banners</span><?php elseif($page=='editor'):?>✏️ <span>Editor de Jogos</span><?php elseif($page=='config'):?>⚙️ <span>Configurações</span><?php elseif($page=='profile'):?>👤 <span>Perfil</span><?php endif;?></h1>
            <div class="subtitle"><?php if($page=='dashboard'):?>Resumo geral do sistema<?php elseif($page=='banners'):?><?= $totalBanners ?> banners com <?= $totalJogos ?> jogos<?php elseif($page=='editor'):?>Adicione, edite ou remova jogos<?php elseif($page=='config'):?>Personalize o sistema<?php elseif($page=='profile'):?>Altere suas credenciais<?php endif;?></div>
        </div>
        <div style="color:var(--text-secondary);font-size:14px;"><i class="fas fa-calendar-alt"></i> <?= date('d/m/Y') ?></div>
    </div>

    <?php if ($message): ?>
        <div class="message <?= $message_type ?>"><i class="fas <?= $message_type=='success'?'fa-check-circle':'fa-exclamation-circle' ?>"></i> <?= $message ?></div>
    <?php endif; ?>

    <!-- ======================== DASHBOARD ======================== -->
    <?php if ($page == 'dashboard'): ?>
        <div class="stats-grid">
            <div class="stat-card primary"><div class="icon"><i class="fas fa-futbol"></i></div><div class="number"><?= $totalJogos ?></div><div class="label">Jogos do Dia</div></div>
            <div class="stat-card success"><div class="icon"><i class="fas fa-images"></i></div><div class="number"><?= $totalBanners ?></div><div class="label">Banners Gerados</div></div>
            <div class="stat-card warning"><div class="icon"><i class="fas fa-tv"></i></div><div class="number"><?= $totalCanais ?></div><div class="label">Canais Únicos</div></div>
            <div class="stat-card danger"><div class="icon"><i class="fas fa-trophy"></i></div><div class="number"><?= $totalCampeonatos ?></div><div class="label">Campeonatos</div></div>
        </div>
        
        <div class="panel">
            <h3>📋 Jogos do Dia</h3>
            <div class="game-list">
                <?php foreach ($allGames as $game): ?>
                    <div class="game-item">
                        <div class="info">
                            <div class="title"><?= htmlspecialchars($game['time1']) ?> <span style="color:var(--danger);font-weight:900;">VS</span> <?= htmlspecialchars($game['time2']) ?></div>
                            <div class="meta"><?= htmlspecialchars($game['campeonato']) ?> • <?= $game['hora'] ?> • <?= implode(', ', $game['canais']) ?></div>
                        </div>
                        <div class="actions">
                            <a href="?page=editor&edit=<?= $game['id'] ?>" class="btn-sm btn-edit"><i class="fas fa-edit"></i></a>
                            <a href="?delete=<?= $game['id'] ?>" class="btn-sm btn-delete" onclick="return confirm('Remover este jogo?')"><i class="fas fa-trash"></i></a>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    <?php endif; ?>

    <!-- ======================== BANNERS ======================== -->
    <?php if ($page == 'banners'): ?>
        <div style="margin-bottom:20px;color:var(--text-secondary);font-size:14px;">
            <i class="fas fa-info-circle"></i> Cada banner contém até <strong><?= $gamesPerBanner ?></strong> jogos
        </div>
        <div class="banners-grid">
            <?php foreach ($banners as $bIdx => $bannerGames): ?>
                <div class="banner-item">
                    <div id="banner-<?= $bIdx ?>" class="banner-wrapper" style="background-image: url('<?= $config['background'] ?>');">
                        <div class="banner-header">
                            <div class="logo-side">
                                <?php if ($config['logo']): ?><img src="<?= $config['logo'] ?>" class="user-logo" crossorigin="anonymous"><?php else: ?><span style="color:#000;font-weight:900;font-size:22px;">⚽ FUTEBOL</span><?php endif; ?>
                            </div>
                            <div class="date-box">
                                <div class="day-text">JOGOS DO DIA</div>
                                <div class="date-text"><?= $config['data_banner'] ?? '06/07' ?></div>
                            </div>
                        </div>
                        <?php foreach ($bannerGames as $game): ?>
                            <div class="game-card">
                                <div class="shield-side"><?php $l=getTeamLogo($game['time1']); if($l):?><img src="<?=$l?>" crossorigin="anonymous" onerror="this.style.display='none'"><?php else:?><span style="font-size:9px;font-weight:bold;color:#999;"><?=substr($game['time1'],0,3)?></span><?php endif;?></div>
                                <div class="info-center">
                                    <div class="game-title"><?= htmlspecialchars($game['time1']) ?> X <?= htmlspecialchars($game['time2']) ?></div>
                                    <div class="blue-pill">
                                        <div class="time-val"><?= $game['hora'] ?></div>
                                        <div class="ch-list"><?php $c=0; foreach($game['canais'] as $canal){ if($c>=3){echo'<span class="ch-txt">+</span>';break;} $cl=getChannelLogo($canal); if($cl){echo'<img src="'.$cl.'" class="ch-img" crossorigin="anonymous" onerror="this.style.display=\'none\'">';}else{echo'<span class="ch-txt">'.strtoupper($canal).'</span>';} $c++;} ?></div>
                                    </div>
                                </div>
                                <div class="comp-side"><?php $cl=getCompetitionLogo($game['campeonato']); if($cl):?><img src="<?=$cl?>" crossorigin="anonymous" onerror="this.style.display='none'"><?php endif;?></div>
                            </div>
                        <?php endforeach; ?>
                    </div>
                    <button class="btn-download" onclick="downloadBanner(<?= $bIdx ?>, this)"><i class="fas fa-download"></i> Baixar Banner <?= $bIdx+1 ?></button>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <!-- ======================== EDITOR DE JOGOS ======================== -->
    <?php if ($page == 'editor'): ?>
        <div class="panel">
            <h3><i class="fas fa-plus-circle" style="color:var(--primary);"></i> Adicionar Jogo</h3>
            <form method="POST">
                <div class="form-item"><label>Campeonato</label><input type="text" name="campeonato" placeholder="Ex: Brasileirão Série A" required></div>
                <div class="form-item"><label>Time 1</label><input type="text" name="time1" placeholder="Ex: FLAMENGO" required></div>
                <div class="form-item"><label>Time 2</label><input type="text" name="time2" placeholder="Ex: PALMEIRAS" required></div>
                <div class="form-item"><label>Data</label><input type="text" name="data" placeholder="06/07" value="<?= date('d/m/Y') ?>"></div>
                <div class="form-item"><label>Horário</label><input type="text" name="hora" placeholder="16:00" required></div>
                <div class="form-item"><label>Canais (separados por vírgula)</label><input type="text" name="canais" placeholder="GLOBO, SBT, SPORTV"></div>
                <div class="form-item" style="justify-content:flex-end;"><button type="submit" name="add_game" class="btn-primary"><i class="fas fa-plus"></i> Adicionar Jogo</button></div>
            </form>
        </div>

        <!-- EDITAR JOGO (MODAL) -->
        <?php if ($editGame): ?>
        <div class="modal open" id="editModal">
            <div class="modal-content">
                <h2><i class="fas fa-edit" style="color:var(--primary);"></i> Editar Jogo</h2>
                <form method="POST">
                    <input type="hidden" name="game_id" value="<?= $editGame['id'] ?>">
                    <div class="form-item"><label>Campeonato</label><input type="text" name="campeonato" value="<?= htmlspecialchars($editGame['campeonato']) ?>" required></div>
                    <div class="form-item"><label>Time 1</label><input type="text" name="time1" value="<?= htmlspecialchars($editGame['time1']) ?>" required></div>
                    <div class="form-item"><label>Time 2</label><input type="text" name="time2" value="<?= htmlspecialchars($editGame['time2']) ?>" required></div>
                    <div class="form-item"><label>Data</label><input type="text" name="data" value="<?= htmlspecialchars($editGame['data']) ?>"></div>
                    <div class="form-item"><label>Horário</label><input type="text" name="hora" value="<?= htmlspecialchars($editGame['hora']) ?>" required></div>
                    <div class="form-item"><label>Canais (separados por vírgula)</label><input type="text" name="canais" value="<?= htmlspecialchars(implode(', ', $editGame['canais'])) ?>"></div>
                    <div class="modal-actions">
                        <a href="?page=editor" class="btn btn-cancel" style="padding:10px 24px;border:none;border-radius:10px;font-weight:600;cursor:pointer;background:var(--border);color:var(--text);text-decoration:none;">Cancelar</a>
                        <button type="submit" name="edit_game" class="btn btn-save" style="padding:10px 24px;border:none;border-radius:10px;font-weight:600;cursor:pointer;background:var(--primary);color:#fff;"><i class="fas fa-save"></i> Salvar</button>
                    </div>
                </form>
            </div>
        </div>
        <?php endif; ?>

        <!-- LISTA DE JOGOS -->
        <div class="panel">
            <h3>📋 Todos os Jogos</h3>
            <div class="game-list">
                <?php foreach ($allGames as $game): ?>
                    <div class="game-item">
                        <div class="info">
                            <div class="title"><?= htmlspecialchars($game['time1']) ?> <span style="color:var(--danger);font-weight:900;">VS</span> <?= htmlspecialchars($game['time2']) ?></div>
                            <div class="meta"><?= htmlspecialchars($game['campeonato']) ?> • <?= $game['hora'] ?> • <?= implode(', ', $game['canais']) ?></div>
                        </div>
                        <div class="actions">
                            <a href="?page=editor&edit=<?= $game['id'] ?>" class="btn-sm btn-edit"><i class="fas fa-edit"></i> Editar</a>
                            <a href="?delete=<?= $game['id'] ?>" class="btn-sm btn-delete" onclick="return confirm('Remover este jogo?')"><i class="fas fa-trash"></i> Remover</a>
                        </div>
                    </div>
                <?php endforeach; ?>
                <?php if (empty($allGames)): ?>
                    <div style="text-align:center;color:var(--text-secondary);padding:30px;">Nenhum jogo cadastrado. Adicione um acima!</div>
                <?php endif; ?>
            </div>
        </div>
    <?php endif; ?>

    <!-- ======================== CONFIGURAÇÕES ======================== -->
    <?php if ($page == 'config'): ?>
        <div class="panel">
            <h3><i class="fas fa-image"></i> Logo do Banner</h3>
            <form method="POST" enctype="multipart/form-data">
                <div class="form-item">
                    <label>Logo que aparece nos banners</label>
                    <input type="file" name="logo_file" accept="image/*" onchange="this.form.submit()">
                    <?php if ($config['logo']): ?><img src="<?= $config['logo'] ?>" class="preview-logo"><?php endif; ?>
                </div>
            </form>
        </div>
        <div class="panel">
            <h3><i class="fas fa-sign-in-alt"></i> Logo da Tela de Login</h3>
            <form method="POST" enctype="multipart/form-data">
                <div class="form-item">
                    <label>Logo que aparece na tela de login</label>
                    <input type="file" name="logo_login_file" accept="image/*" onchange="this.form.submit()">
                    <?php if ($config['logo_login']): ?><img src="<?= $config['logo_login'] ?>" class="preview-logo"><?php endif; ?>
                </div>
            </form>
        </div>
        <div class="panel">
            <h3><i class="fas fa-photo-video"></i> Fundo do Banner</h3>
            <form method="POST" enctype="multipart/form-data">
                <div class="form-item">
                    <label>Imagem de fundo dos banners</label>
                    <input type="file" name="background_file" accept="image/*" onchange="this.form.submit()">
                    <?php if ($config['background'] && !str_contains($config['background'], 'unsplash')): ?>
                        <img src="<?= $config['background'] ?>" style="height:80px;object-fit:cover;border-radius:8px;margin-top:8px;">
                    <?php endif; ?>
                </div>
            </form>
        </div>
        <div class="panel">
            <h3><i class="fas fa-palette"></i> Aparência</h3>
            <form method="POST">
                <div class="form-item">
                    <label>Tema</label>
                    <select name="tema" onchange="this.form.submit()">
                        <option value="dark" <?= $config['tema']=='dark'?'selected':'' ?>>🌙 Escuro</option>
                        <option value="light" <?= $config['tema']=='light'?'selected':'' ?>>☀️ Claro</option>
                    </select>
                </div>
                <div class="form-item">
                    <label>Cor Primária</label>
                    <input type="color" name="cor_primaria" value="<?= $config['cor_primaria'] ?? '#4a7cf7' ?>" onchange="this.form.submit()">
                </div>
            </form>
        </div>
        <div class="panel">
            <h3><i class="fas fa-calendar-alt"></i> Data do Banner</h3>
            <form method="POST">
                <div class="form-item">
                    <label>Data que aparece nos banners (DD/MM)</label>
                    <input type="text" name="data_banner" value="<?= $config['data_banner'] ?? '06/07' ?>" placeholder="06/07">
                </div>
                <div class="form-item" style="justify-content:flex-end;">
                    <button type="submit" class="btn-primary"><i class="fas fa-save"></i> Atualizar Data</button>
                </div>
            </form>
        </div>
        <div class="panel">
            <h3><i class="fas fa-cog"></i> Informações do Sistema</h3>
            <div style="display:grid;gap:10px;color:var(--text-secondary);font-size:14px;">
                <div><strong>Versão:</strong> v8.0 Premium</div>
                <div><strong>Banners:</strong> <?= $totalBanners ?></div>
                <div><strong>Jogos:</strong> <?= $totalJogos ?></div>
                <div><strong>Usuário:</strong> <?= htmlspecialchars($_SESSION['username']) ?></div>
                <div><strong>Tema:</strong> <?= ucfirst($config['tema'] ?? 'dark') ?></div>
            </div>
        </div>
    <?php endif; ?>

    <!-- ======================== PERFIL ======================== -->
    <?php if ($page == 'profile'): ?>
        <div class="panel" style="max-width:500px;">
            <h3><i class="fas fa-lock" style="color:var(--primary);"></i> Alterar Senha</h3>
            <form method="POST">
                <div class="form-item"><label>👤 Usuário</label><input type="text" value="<?= htmlspecialchars($_SESSION['username']) ?>" disabled></div>
                <div class="form-item"><label>🔒 Senha Atual</label><input type="password" name="current_password" placeholder="Digite sua senha atual" required></div>
                <div class="form-item"><label>🔑 Nova Senha</label><input type="password" name="new_password" placeholder="Mínimo 4 caracteres" required></div>
                <div class="form-item"><label>✅ Confirmar Nova Senha</label><input type="password" name="confirm_password" placeholder="Confirme a nova senha" required></div>
                <div class="form-item"><button type="submit" name="change_password" class="btn-primary"><i class="fas fa-save"></i> Alterar Senha</button></div>
            </form>
            <hr style="border-color:var(--border);margin:20px 0;">
            <div style="text-align:center;color:var(--text-secondary);font-size:13px;"><i class="fas fa-shield-alt"></i> Mantenha sua senha segura.</div>
        </div>
    <?php endif; ?>

</main>

<!-- ============================================================ -->
<!-- SCRIPTS -->
<!-- ============================================================ -->
<script>
    function toggleSidebar() {
        document.getElementById('sidebar').classList.toggle('open');
        document.querySelector('.sidebar-overlay').classList.toggle('open');
    }
    document.querySelectorAll('.sidebar-nav a').forEach(link => {
        link.addEventListener('click', () => {
            if (window.innerWidth <= 992) {
                document.getElementById('sidebar').classList.remove('open');
                document.querySelector('.sidebar-overlay').classList.remove('open');
            }
        });
    });
    
    function downloadBanner(id, btn) {
        const element = document.getElementById('banner-' + id);
        const originalText = btn.innerHTML;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Gerando...';
        btn.disabled = true;
        html2canvas(element, { useCORS: true, allowTaint: true, scale: 2, backgroundColor: null, logging: false, width: 600, height: element.scrollHeight })
        .then(canvas => {
            const link = document.createElement('a');
            link.download = 'banner-futebol-' + (id+1) + '.png';
            link.href = canvas.toDataURL('image/png', 1.0);
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            btn.innerHTML = '<i class="fas fa-check"></i> Baixado!';
            setTimeout(() => { btn.innerHTML = originalText; btn.disabled = false; }, 2000);
        })
        .catch(() => {
            btn.innerHTML = '<i class="fas fa-exclamation-triangle"></i> Erro!';
            btn.disabled = false;
            setTimeout(() => { btn.innerHTML = originalText; }, 3000);
        });
    }
    
    // Fechar modal com ESC
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            document.querySelectorAll('.modal.open').forEach(m => m.classList.remove('open'));
        }
    });
    // Fechar modal clicando fora
    document.querySelectorAll('.modal').forEach(m => {
        m.addEventListener('click', function(e) {
            if (e.target === this) this.classList.remove('open');
        });
    });
</script>

</body>
</html>