{% extends "base.html" %}

{% block title %}Bot Statistics - MeshCore Bot Data Viewer{% endblock %}

{% block extra_css %}
<style>
    /* Equal-height columns: stacks fill the same vertical space as the path-encoding card (lg+) */
    @media (min-width: 992px) {
        .dashboard-overview-row > .col-lg-4 {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        .dashboard-overview-stack {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-height: 0;
            width: 100%;
        }
    }
    /* Multibyte explainer tooltip — allow wrapping for long copy */
    .tooltip.multibyte-capable-hint .tooltip-inner {
        max-width: min(22rem, 92vw);
        text-align: left;
    }
    .path-encoding-info-btn:hover,
    .path-encoding-info-btn:focus {
        text-decoration: none;
        color: var(--bs-info, #0dcaf0) !important;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h1 class="mb-4">
            <i class="fas fa-chart-bar"></i> Bot Statistics
        </h1>
    </div>
</div>

<!-- System Health Overview -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow-sm">
            <div class="card-header bg-gradient-primary text-white">
                <div class="d-flex align-items-center">
                    <i class="fas fa-heartbeat me-2"></i>
                    <h5 class="mb-0">Bot Health Status</h5>
                </div>
            </div>
            <div class="card-body p-3">
                <div class="row text-center health-status-card">
                    <div class="col-md-3">
                        <div class="d-flex align-items-center justify-content-center mb-2">
                            <span class="status-indicator status-connected me-2"></span>
                            <span id="system-status" class="fw-bold">Online</span>
                        </div>
                        <h3 class="text-primary mb-1">
                            <a href="#" id="connected-clients" class="text-primary text-decoration-none"
                               data-bs-toggle="modal" data-bs-target="#connectedClientsModal"
                               onclick="window.dashboard && window.dashboard.loadConnectedClients()">0</a>
                        </h3>
                        <small class="text-muted text-uppercase">Connected Clients</small>
                    </div>
                    
                    <div class="col-md-3 d-flex flex-column justify-content-center align-items-center">
                        <div class="mb-2">
                            <div id="database-status">
                                <div class="loading">Loading...</div>
                            </div>
                        </div>
                        <small class="text-muted text-uppercase">Database Connection</small>
                    </div>
                    
                    <div class="col-md-3 d-flex flex-column justify-content-center align-items-center">
                        <h3 id="uptime" class="text-success mb-1">0s</h3>
                        <small class="text-muted text-uppercase">System Uptime</small>
                    </div>
                    
                    <div class="col-md-3 d-flex flex-column justify-content-center align-items-center">
                        <h6 id="last-update" class="text-info mb-1">Loading...</h6>
                        <small class="text-muted text-uppercase">Last Data Refresh</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Network overview: 3 columns — (Active + Devices&amp;cache) | (Network + Geo) | Path encoding -->
<div class="row mb-4 g-3 align-items-stretch dashboard-overview-row">
    <div class="col-12 col-lg-4">
        <div class="dashboard-overview-stack">
            <div class="card flex-shrink-0">
                <div class="card-header">
                    <i class="fas fa-users"></i> Active Contacts
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-4">
                            <h4 id="contacts-24h" class="text-primary">0</h4>
                            <small class="text-muted">24h</small>
                        </div>
                        <div class="col-4">
                            <h4 id="contacts-7d" class="text-info">0</h4>
                            <small class="text-muted">7d</small>
                        </div>
                        <div class="col-4">
                            <h4 id="total-contacts" class="text-success">0</h4>
                            <small class="text-muted">All</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card flex-grow-1 d-flex flex-column">
                <div class="card-header">
                    <i class="fas fa-microchip"></i> Devices &amp; cache
                </div>
                <div class="card-body flex-grow-1 d-flex align-items-center justify-content-center">
                    <div class="row text-center w-100">
                        <div class="col-4">
                            <h4 id="unique-device-types" class="text-primary">0</h4>
                            <small class="text-muted">Device types</small>
                        </div>
                        <div class="col-4">
                            <h4 id="unique-roles" class="text-info">0</h4>
                            <small class="text-muted">Roles</small>
                        </div>
                        <div class="col-4">
                            <h4 id="active-cache-entries" class="text-success">0</h4>
                            <small class="text-muted">Active cache</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="dashboard-overview-stack">
            <div class="card flex-shrink-0">
                <div class="card-header">
                    <i class="fas fa-network-wired"></i> Network Health
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-4">
                            <h4 id="avg-hop-count" class="text-warning">0</h4>
                            <small class="text-muted">Avg Hops</small>
                        </div>
                        <div class="col-4">
                            <h4 id="max-hop-count" class="text-danger">0</h4>
                            <small class="text-muted">Max Hops</small>
                        </div>
                        <div class="col-4">
                            <h4 id="tracked-contacts" class="text-info">0</h4>
                            <small class="text-muted">Tracked</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card flex-grow-1 d-flex flex-column">
                <div class="card-header">
                    <i class="fas fa-globe"></i> Geographic Coverage
                </div>
                <div class="card-body flex-grow-1 d-flex align-items-center justify-content-center">
                    <div class="row text-center w-100">
                        <div class="col-4">
                            <h4 id="countries" class="text-primary">0</h4>
                            <small class="text-muted">Countries</small>
                        </div>
                        <div class="col-4">
                            <h4 id="states" class="text-info">0</h4>
                            <small class="text-muted">States</small>
                        </div>
                        <div class="col-4">
                            <h4 id="cities" class="text-success">0</h4>
                            <small class="text-muted">Cities</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="dashboard-overview-stack">
            <div class="card h-100 d-flex flex-column flex-grow-1">
                <div class="card-header">
                    <i class="fas fa-chart-pie"></i> Path encoding (7d)
                </div>
                <div class="card-body py-3 flex-grow-1">
                    <div class="row g-3 justify-content-center align-items-start">
                        <div class="col-12 col-md-6 text-center">
                            <p class="small text-muted mb-2 d-flex align-items-center justify-content-center gap-1 flex-wrap">
                                <span>Contacts (last 7 days)</span>
                                <button type="button" class="btn btn-link p-0 border-0 align-baseline text-muted path-encoding-info-btn"
                                        id="contacts-multibyte-chart-info"
                                        aria-label="How multibyte capable contacts are counted"
                                        data-bs-toggle="tooltip" data-bs-placement="top">
                                    <i class="fas fa-info-circle" aria-hidden="true"></i>
                                </button>
                            </p>
                            <div class="path-encoding-pie-wrap mx-auto" style="max-width: 200px; width: 100%;">
                                <canvas id="pathEncodingPieChart" aria-label="Multibyte path share among contacts last 7 days"></canvas>
                            </div>
                            <p class="small text-muted mt-2 mb-0" id="path-encoding-pie-summary"></p>
                        </div>
                        <div class="col-12 col-md-6 text-center">
                            <p class="small text-muted mb-2">Incoming packets (last 7 days)</p>
                            <div class="path-encoding-pie-wrap mx-auto" style="max-width: 200px; width: 100%;">
                                <canvas id="incomingPacketsPieChart" aria-label="Multibyte path share among incoming packets last 7 days"></canvas>
                            </div>
                            <p class="small text-muted mt-2 mb-0" id="incoming-packets-pie-summary"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Network Performance -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card h-100">
            <div class="card-header">
                <i class="fas fa-hashtag"></i> Channel Statistics
            </div>
            <div class="card-body text-center">
                <div class="row text-center">
                    <div class="col-3">
                        <h4 id="unique-channels-total" class="text-success">0</h4>
                        <small class="text-muted">Total Channels</small>
                    </div>
                    <div class="col-3">
                        <h4 id="bot-reply-rate-24h" class="text-warning">0%</h4>
                        <small class="text-muted">24h Reply Rate</small>
                    </div>
                    <div class="col-3">
                        <h4 id="bot-reply-rate-7d" class="text-warning">0%</h4>
                        <small class="text-muted">7d Reply Rate</small>
                    </div>
                    <div class="col-3">
                        <h4 id="bot-reply-rate-30d" class="text-warning">0%</h4>
                        <small class="text-muted">30d Reply Rate</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Network Activity - Three Columns -->
<div class="row mb-4">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header">
                <i class="fas fa-users"></i> Bot User Statistics
            </div>
            <div class="card-body text-center">
                <div class="row text-center">
                    <div class="col-6">
                        <h4 id="unique-senders-24h" class="text-info">0</h4>
                        <small class="text-muted">24h Active</small>
                    </div>
                    <div class="col-6">
                        <h4 id="unique-users-total" class="text-primary">0</h4>
                        <small class="text-muted">Total Users</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header">
                <i class="fas fa-comments"></i> Message Activity
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-6">
                        <h4 id="messages-24h" class="text-info">0</h4>
                        <small class="text-muted">24h Messages</small>
                    </div>
                    <div class="col-6">
                        <h4 id="total-messages" class="text-primary">0</h4>
                        <small class="text-muted">Total Messages</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header">
                <i class="fas fa-terminal"></i> Command Activity
            </div>
            <div class="card-body">
                <div class="row text-center">
                    <div class="col-6">
                        <h4 id="commands-24h" class="text-warning">0</h4>
                        <small class="text-muted">24h Commands</small>
                    </div>
                    <div class="col-6">
                        <h4 id="total-commands" class="text-success">0</h4>
                        <small class="text-muted">Total Commands</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Analytics Section - Four Columns -->
<div class="row mb-4" id="analytics-section">
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-trophy"></i> Most Popular Commands
                </div>
                <select id="top-commands-time-window" class="form-select form-select-sm" style="width: auto; font-size: 0.75rem;">
                    <option value="24h">24h</option>
                    <option value="7d">7d</option>
                    <option value="30d">30d</option>
                    <option value="all" selected>All</option>
                </select>
            </div>
            <div class="card-body">
                <div id="top-commands-list">
                    <div class="loading">Loading command statistics...</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-users"></i> Most Active Users
                </div>
                <select id="top-users-time-window" class="form-select form-select-sm" style="width: auto; font-size: 0.75rem;">
                    <option value="24h">24h</option>
                    <option value="7d">7d</option>
                    <option value="30d">30d</option>
                    <option value="all" selected>All</option>
                </select>
            </div>
            <div class="card-body">
                <div id="top-users-list">
                    <div class="loading">Loading user statistics...</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-route"></i> Longest Paths
                </div>
                <select id="longest-paths-time-window" class="form-select form-select-sm" style="width: auto; font-size: 0.75rem;">
                    <option value="24h">24h</option>
                    <option value="7d">7d</option>
                    <option value="30d">30d</option>
                    <option value="all" selected>All</option>
                </select>
            </div>
            <div class="card-body">
                <div id="longest-paths-list">
                    <div class="loading">Loading path statistics...</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-12 col-md-6 col-lg-3">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-hashtag"></i> Top Channels
                </div>
                <select id="top-channels-time-window" class="form-select form-select-sm" style="width: auto; font-size: 0.75rem;">
                    <option value="24h">24h</option>
                    <option value="7d">7d</option>
                    <option value="30d">30d</option>
                    <option value="all" selected>All</option>
                </select>
            </div>
            <div class="card-body">
                <div id="top-channels-list">
                    <div class="loading">Loading channel statistics...</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Live Activity Feed -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                <span><i class="fas fa-satellite-dish me-2"></i>Live Activity
                    <span id="live-dot" class="status-indicator status-disconnected ms-2" title="SocketIO connection"></span>
                </span>
                <div class="d-flex gap-2 align-items-center flex-wrap">
                    <!-- Type filters -->
                    <div class="d-flex gap-2 align-items-center" id="live-filters">
                        <small class="text-muted">Filter:</small>
                        <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input live-filter-cb" type="checkbox" id="filter-packet" data-type="packet" checked>
                            <label class="form-check-label" for="filter-packet" style="font-size:0.8rem;color:#fd7e14">Packets</label>
                        </div>
                        <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input live-filter-cb" type="checkbox" id="filter-command" data-type="command" checked>
                            <label class="form-check-label" for="filter-command" style="font-size:0.8rem;color:#198754">Commands</label>
                        </div>
                        <div class="form-check form-check-inline mb-0">
                            <input class="form-check-input live-filter-cb" type="checkbox" id="filter-message" data-type="message" checked>
                            <label class="form-check-label" for="filter-message" style="font-size:0.8rem;color:#0dcaf0">Messages</label>
                        </div>
                    </div>
                    <!-- Scroll buttons -->
                    <button class="btn btn-sm btn-outline-secondary" id="live-scroll-top" onclick="scrollLiveFeed('top')" title="Scroll to newest">
                        <i class="fas fa-arrow-up"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" id="live-scroll-bottom" onclick="scrollLiveFeed('bottom')" title="Scroll to oldest">
                        <i class="fas fa-arrow-down"></i>
                    </button>
                    <span id="live-count" class="badge bg-secondary">0</span>
                    <button class="btn btn-sm btn-outline-secondary" id="live-pause-btn" onclick="toggleLivePause()">
                        <i class="fas fa-pause" id="live-pause-icon"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-secondary" onclick="clearLiveFeed()">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                    <a href="/realtime" class="btn btn-sm btn-outline-primary">
                        Full Monitor <i class="fas fa-external-link-alt ms-1"></i>
                    </a>
                </div>
            </div>
            <div class="card-body p-0">
                <div id="live-feed" style="height:260px;overflow-y:auto;background:var(--bg-secondary,#f8f9fa);padding:0.5rem;">
                    <div class="text-muted text-center py-3" id="live-placeholder">
                        <i class="fas fa-hourglass-half"></i> Connecting…
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Connected Clients Modal -->
<div class="modal fade" id="connectedClientsModal" tabindex="-1" aria-labelledby="connectedClientsModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="connectedClientsModalLabel">
                    <i class="fas fa-users me-2"></i>Connected Clients
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="connected-clients-loading" class="text-center py-3">
                    <div class="spinner-border spinner-border-sm" role="status"></div>
                    <span class="ms-2">Loading…</span>
                </div>
                <div id="connected-clients-empty" class="text-center text-muted py-3" style="display:none">
                    No clients currently connected.
                </div>
                <table class="table table-sm mb-0" id="connected-clients-table" style="display:none">
                    <thead>
                        <tr>
                            <th>Client ID</th>
                            <th>Connected At</th>
                            <th>Last Activity</th>
                        </tr>
                    </thead>
                    <tbody id="connected-clients-tbody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
class ModernDashboard {
    constructor() {
        this.botStartTime = null;
        this.updateInterval = null;
        this.uptimeInterval = null;
        this.pathEncodingPieChart = null;
        this.incomingPacketsPieChart = null;
        this.initializeDashboard();
    }
    
    initializeDashboard() {
        // Add a small delay to ensure DOM is ready
        setTimeout(() => {
            this.loadDashboardData();
        }, 100);
        this.startAutoRefresh();
        this.updateUptime();
        this.updateTimestamp();
        this.setupTimeWindowSelector();
    }
    
    setupTimeWindowSelector() {
        // Setup selector for Most Active Users
        const usersSelector = document.getElementById('top-users-time-window');
        if (usersSelector) {
            usersSelector.addEventListener('change', (e) => {
                this.loadTopUsers(e.target.value);
            });
        }
        
        // Setup selector for Most Popular Commands
        const commandsSelector = document.getElementById('top-commands-time-window');
        if (commandsSelector) {
            commandsSelector.addEventListener('change', (e) => {
                this.loadTopCommands(e.target.value);
            });
        }
        
        // Setup selector for Longest Paths
        const pathsSelector = document.getElementById('longest-paths-time-window');
        if (pathsSelector) {
            pathsSelector.addEventListener('change', (e) => {
                this.loadLongestPaths(e.target.value);
            });
        }
        
        // Setup selector for Top Channels
        const channelsSelector = document.getElementById('top-channels-time-window');
        if (channelsSelector) {
            channelsSelector.addEventListener('change', (e) => {
                this.loadTopChannels(e.target.value);
            });
        }
    }
    
    async loadDashboardData() {
        try {
            console.log('Loading dashboard data...');
            
            // Load system health
            const healthResponse = await fetch('/api/health');
            const healthData = await healthResponse.json();
            console.log('Health data:', healthData);
            
            document.getElementById('connected-clients').textContent = healthData.connected_clients || 0;
            
            // Store bot uptime for display (null when bot not running / no start time in DB)
            const rawUptime = healthData.bot_uptime;
            this.botStartTime = (rawUptime != null && rawUptime > 0) ? rawUptime : null;
            // Update uptime display and restart live counter with fresh data
            this.updateUptime();
            this.startLiveUptime();
            
            // Load comprehensive statistics
            const statsResponse = await fetch('/api/stats');
            const statsData = await statsResponse.json();
            console.log('Stats data:', statsData);
            
            if (statsData.error) {
                this.showError('Failed to load statistics: ' + statsData.error);
                return;
            }
            
            // Update all metrics
            this.updateMetrics(statsData);
            
            // Load analytics with default time windows
            const usersTimeWindow = document.getElementById('top-users-time-window')?.value || 'all';
            const commandsTimeWindow = document.getElementById('top-commands-time-window')?.value || 'all';
            const pathsTimeWindow = document.getElementById('longest-paths-time-window')?.value || 'all';
            const channelsTimeWindow = document.getElementById('top-channels-time-window')?.value || 'all';
            
            this.loadTopUsers(usersTimeWindow);
            this.loadTopCommands(commandsTimeWindow);
            this.loadLongestPaths(pathsTimeWindow);
            this.loadTopChannels(channelsTimeWindow);
            
            // Update database status
            this.updateDatabaseStatus('Connected', 'success');
            
        } catch (error) {
            console.error('Error loading dashboard data:', error);
            this.showError('Failed to load dashboard data: ' + error.message);
            this.updateDatabaseStatus('Error', 'danger');
        }
    }
    
    updateMetrics(data) {
        console.log('Updating metrics with data:', data);
        
        // Test with a simple update first
        const testElement = document.getElementById('connected-clients');
        if (testElement) {
            testElement.textContent = data.connected_clients || 0;
            console.log('Updated connected-clients to:', data.connected_clients);
        } else {
            console.error('Element connected-clients not found!');
        }
        
        // Update all metrics with error checking
        this.updateElement('total-contacts', data.total_contacts);
        this.updateElement('contacts-24h', data.contacts_24h);
        this.updateElement('contacts-7d', data.contacts_7d);
        this.updateElement('tracked-contacts', data.tracked_contacts);
        
        this.updateElement('avg-hop-count', data.avg_hop_count);
        this.updateElement('max-hop-count', data.max_hop_count);
        
        this.updateElement('countries', data.countries);
        this.updateElement('states', data.states);
        this.updateElement('cities', data.cities);
        
        this.updateElement('unique-device-types', data.unique_device_types);
        this.updateElement('unique-roles', data.unique_roles);
        
        this.updateElement('active-cache-entries', data.active_cache_entries);
        
        this.updateElement('total-messages', data.total_messages);
        this.updateElement('messages-24h', data.messages_24h);
        this.updateElement('total-commands', data.total_commands);
        this.updateElement('commands-24h', data.commands_24h);
        
        // Additional statistics
        this.updateElement('unique-users-total', data.unique_users_total);
        this.updateElement('unique-senders-24h', data.unique_senders_24h);
        this.updateElement('unique-channels-total', data.unique_channels_total);
        this.updateElement('bot-reply-rate-24h', data.bot_reply_rate_24h !== undefined ? `${data.bot_reply_rate_24h}%` : '0%');
        this.updateElement('bot-reply-rate-7d', data.bot_reply_rate_7d !== undefined ? `${data.bot_reply_rate_7d}%` : '0%');
        this.updateElement('bot-reply-rate-30d', data.bot_reply_rate_30d !== undefined ? `${data.bot_reply_rate_30d}%` : '0%');
        
        this.updatePathEncodingPieChart(data);
        this.updateIncomingPacketsPieChart(data);
        
        // Analytics are loaded separately with time window selectors
    }

    updatePathEncodingPieChart(data) {
        const canvas = document.getElementById('pathEncodingPieChart');
        const summaryEl = document.getElementById('path-encoding-pie-summary');
        if (!canvas || typeof Chart === 'undefined') {
            return;
        }
        const total = Number(data.contacts_7d) || 0;
        let mb = data.contacts_7d_multibyte_path;
        mb = Number(mb);
        if (!Number.isFinite(mb)) {
            mb = 0;
        }
        mb = Math.max(0, Math.min(mb, total));
        const other = Math.max(0, total - mb);

        const cs = getComputedStyle(document.documentElement);
        const legendColor = (cs.getPropertyValue('--text-muted') || '#6c757d').trim();
        const mbColor = '#0891b2';
        const otherColor = '#a8a29e';
        const emptyColor = (cs.getPropertyValue('--bg-tertiary') || '#dee2e6').trim();

        const setNoAnimationOptions = (options) => {
            options.animation = false;
            options.animations = false;
            options.transitions = {
                active: { animation: { duration: 0 } },
                resize: { animation: { duration: 0 } },
                show: { animation: { duration: 0 } },
                hide: { animation: { duration: 0 } },
            };
        };

        if (total === 0) {
            if (summaryEl) {
                summaryEl.textContent = 'No contacts in the last 7 days.';
            }
            if (!this.pathEncodingPieChart) {
                this.pathEncodingPieChart = new Chart(canvas.getContext('2d'), {
                    type: 'doughnut',
                    data: {
                        labels: ['—'],
                        datasets: [{
                            data: [1],
                            backgroundColor: [emptyColor],
                            borderWidth: 0,
                        }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        plugins: { legend: { display: false }, tooltip: { enabled: false } },
                        cutout: '55%',
                    },
                });
                setNoAnimationOptions(this.pathEncodingPieChart.options);
            } else {
                this.pathEncodingPieChart.data.labels = ['—'];
                this.pathEncodingPieChart.data.datasets[0].data = [1];
                this.pathEncodingPieChart.data.datasets[0].backgroundColor = [emptyColor];
                this.pathEncodingPieChart.options.plugins.legend.display = false;
                this.pathEncodingPieChart.options.plugins.tooltip.enabled = false;
                this.pathEncodingPieChart.update('none');
            }
            return;
        }

        const pct = Math.round((mb / total) * 1000) / 10;
        if (summaryEl) {
            summaryEl.textContent = `${pct}% multibyte (${mb} of ${total})`;
        }

        if (!this.pathEncodingPieChart) {
            this.pathEncodingPieChart = new Chart(canvas.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: ['Multibyte paths', 'Other'],
                    datasets: [{
                        data: [mb, other],
                        backgroundColor: [mbColor, otherColor],
                        borderWidth: 0,
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                color: legendColor,
                                boxWidth: 12,
                                font: { size: 11 },
                            },
                        },
                        tooltip: {
                            callbacks: {
                                label: (ctx) => {
                                    const n = ctx.raw;
                                    const p = total ? Math.round((n / total) * 1000) / 10 : 0;
                                    return ` ${n} (${p}%)`;
                                },
                            },
                        },
                    },
                    cutout: '55%',
                },
            });
            setNoAnimationOptions(this.pathEncodingPieChart.options);
        } else {
            this.pathEncodingPieChart.data.labels = ['Multibyte paths', 'Other'];
            this.pathEncodingPieChart.data.datasets[0].data = [mb, other];
            this.pathEncodingPieChart.data.datasets[0].backgroundColor = [mbColor, otherColor];
            this.pathEncodingPieChart.options.plugins.legend.display = true;
            this.pathEncodingPieChart.options.plugins.legend.position = 'bottom';
            this.pathEncodingPieChart.options.plugins.legend.labels = {
                color: legendColor,
                boxWidth: 12,
                font: { size: 11 },
            };
            this.pathEncodingPieChart.options.plugins.tooltip.enabled = true;
            this.pathEncodingPieChart.options.plugins.tooltip.callbacks = {
                label: (ctx) => {
                    const n = ctx.raw;
                    const p = total ? Math.round((n / total) * 1000) / 10 : 0;
                    return ` ${n} (${p}%)`;
                },
            };
            this.pathEncodingPieChart.update('none');
        }
    }

    updateIncomingPacketsPieChart(data) {
        const canvas = document.getElementById('incomingPacketsPieChart');
        const summaryEl = document.getElementById('incoming-packets-pie-summary');
        if (!canvas || typeof Chart === 'undefined') {
            return;
        }
        const total = Number(data.incoming_packets_7d) || 0;
        let mb = data.incoming_packets_7d_multibyte_path;
        mb = Number(mb);
        if (!Number.isFinite(mb)) {
            mb = 0;
        }
        mb = Math.max(0, Math.min(mb, total));
        const other = Math.max(0, total - mb);

        const cs = getComputedStyle(document.documentElement);
        const legendColor = (cs.getPropertyValue('--text-muted') || '#6c757d').trim();
        const mbColor = '#0891b2';
        const otherColor = '#a8a29e';
        const emptyColor = (cs.getPropertyValue('--bg-tertiary') || '#dee2e6').trim();

        const setNoAnimationOptions = (options) => {
            options.animation = false;
            options.animations = false;
            options.transitions = {
                active: { animation: { duration: 0 } },
                resize: { animation: { duration: 0 } },
                show: { animation: { duration: 0 } },
                hide: { animation: { duration: 0 } },
            };
        };

        if (total === 0) {
            if (summaryEl) {
                summaryEl.textContent = 'No incoming packets in the last 7 days.';
            }
            if (!this.incomingPacketsPieChart) {
                this.incomingPacketsPieChart = new Chart(canvas.getContext('2d'), {
                    type: 'doughnut',
                    data: {
                        labels: ['—'],
                        datasets: [{
                            data: [1],
                            backgroundColor: [emptyColor],
                            borderWidth: 0,
                        }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: true,
                        plugins: { legend: { display: false }, tooltip: { enabled: false } },
                        cutout: '55%',
                    },
                });
                setNoAnimationOptions(this.incomingPacketsPieChart.options);
            } else {
                this.incomingPacketsPieChart.data.labels = ['—'];
                this.incomingPacketsPieChart.data.datasets[0].data = [1];
                this.incomingPacketsPieChart.data.datasets[0].backgroundColor = [emptyColor];
                this.incomingPacketsPieChart.options.plugins.legend.display = false;
                this.incomingPacketsPieChart.options.plugins.tooltip.enabled = false;
                this.incomingPacketsPieChart.update('none');
            }
            return;
        }

        const pct = Math.round((mb / total) * 1000) / 10;
        if (summaryEl) {
            summaryEl.textContent = `${pct}% multibyte (${mb} of ${total})`;
        }

        if (!this.incomingPacketsPieChart) {
            this.incomingPacketsPieChart = new Chart(canvas.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: ['Multibyte paths', 'Other'],
                    datasets: [{
                        data: [mb, other],
                        backgroundColor: [mbColor, otherColor],
                        borderWidth: 0,
                    }],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                color: legendColor,
                                boxWidth: 12,
                                font: { size: 11 },
                            },
                        },
                        tooltip: {
                            callbacks: {
                                label: (ctx) => {
                                    const n = ctx.raw;
                                    const p = total ? Math.round((n / total) * 1000) / 10 : 0;
                                    return ` ${n} (${p}%)`;
                                },
                            },
                        },
                    },
                    cutout: '55%',
                },
            });
            setNoAnimationOptions(this.incomingPacketsPieChart.options);
        } else {
            this.incomingPacketsPieChart.data.labels = ['Multibyte paths', 'Other'];
            this.incomingPacketsPieChart.data.datasets[0].data = [mb, other];
            this.incomingPacketsPieChart.data.datasets[0].backgroundColor = [mbColor, otherColor];
            this.incomingPacketsPieChart.options.plugins.legend.display = true;
            this.incomingPacketsPieChart.options.plugins.legend.position = 'bottom';
            this.incomingPacketsPieChart.options.plugins.legend.labels = {
                color: legendColor,
                boxWidth: 12,
                font: { size: 11 },
            };
            this.incomingPacketsPieChart.options.plugins.tooltip.enabled = true;
            this.incomingPacketsPieChart.options.plugins.tooltip.callbacks = {
                label: (ctx) => {
                    const n = ctx.raw;
                    const p = total ? Math.round((n / total) * 1000) / 10 : 0;
                    return ` ${n} (${p}%)`;
                },
            };
            this.incomingPacketsPieChart.update('none');
        }
    }
    
    updateElement(elementId, value) {
        const element = document.getElementById(elementId);
        if (element) {
            element.textContent = value || 0;
        } else {
            console.error(`Element ${elementId} not found!`);
        }
    }
    
    async loadTopCommands(timeWindow = 'all') {
        try {
            const response = await fetch(`/api/stats?top_commands_window=${timeWindow}`);
            const data = await response.json();
            
            if (data.error) {
                console.error('Error loading top commands:', data.error);
                return;
            }
            
            if (data.top_commands && data.top_commands.length > 0) {
                this.updateTopCommands(data.top_commands);
            } else {
                const container = document.getElementById('top-commands-list');
                container.innerHTML = '<div class="text-muted text-center">No commands found</div>';
            }
        } catch (error) {
            console.error('Error loading top commands:', error);
        }
    }
    
    updateTopCommands(commands) {
        const container = document.getElementById('top-commands-list');
        container.innerHTML = commands.map((cmd, index) => `
            <div class="d-flex justify-content-between align-items-center mb-2">
                <div class="d-flex align-items-center">
                    <span class="badge bg-primary me-2">${index + 1}</span>
                    <span class="fw-bold">${cmd.command}</span>
                </div>
                <span class="badge bg-secondary">${cmd.count} uses</span>
            </div>
        `).join('');
    }
    
    async loadTopUsers(timeWindow = 'all') {
        try {
            const response = await fetch(`/api/stats?top_users_window=${timeWindow}`);
            const data = await response.json();
            
            if (data.error) {
                console.error('Error loading top users:', data.error);
                return;
            }
            
            if (data.top_users && data.top_users.length > 0) {
                this.updateTopUsers(data.top_users);
            } else {
                const container = document.getElementById('top-users-list');
                container.innerHTML = '<div class="text-muted text-center">No users found</div>';
            }
        } catch (error) {
            console.error('Error loading top users:', error);
        }
    }
    
    updateTopUsers(users) {
        const container = document.getElementById('top-users-list');
        container.innerHTML = users.map((user, index) => `
            <div class="d-flex justify-content-between align-items-center mb-2">
                <div class="d-flex align-items-center">
                    <span class="badge bg-success me-2">${index + 1}</span>
                    <span class="fw-bold text-truncate" style="max-width: 200px;" title="${user.user}">${user.user}</span>
                </div>
                <span class="badge bg-info">${user.count} messages</span>
            </div>
        `).join('');
    }
    
    async loadLongestPaths(timeWindow = 'all') {
        try {
            const response = await fetch(`/api/stats?top_paths_window=${timeWindow}`);
            const data = await response.json();
            
            if (data.error) {
                console.error('Error loading longest paths:', data.error);
                return;
            }
            
            if (data.top_paths && data.top_paths.length > 0) {
                this.updateLongestPaths(data.top_paths);
            } else {
                const container = document.getElementById('longest-paths-list');
                container.innerHTML = '<div class="text-muted text-center">No paths found</div>';
            }
        } catch (error) {
            console.error('Error loading longest paths:', error);
        }
    }
    
    updateLongestPaths(paths) {
        const container = document.getElementById('longest-paths-list');
        container.innerHTML = paths.map((path, index) => `
            <div class="mb-3 p-2 border rounded">
                <div class="d-flex align-items-center mb-2">
                    <span class="badge bg-warning me-2">${index + 1}</span>
                    <span class="fw-bold text-truncate" style="max-width: 150px;" title="${path.user}">${path.user}</span>
                    <span class="badge bg-danger ms-2">${path.path_length} hops</span>
                </div>
                <div class="small text-muted mb-1">
                    <code class="text-break" style="word-break: break-all; font-size: 0.75rem;">${path.path_string}</code>
                </div>
                <div class="small text-muted">
                    ${new Date(path.timestamp * 1000).toLocaleString()}
                </div>
            </div>
        `).join('');
    }
    
    async loadTopChannels(timeWindow = 'all') {
        try {
            const response = await fetch(`/api/stats?top_channels_window=${timeWindow}`);
            const data = await response.json();
            
            if (data.error) {
                console.error('Error loading top channels:', data.error);
                return;
            }
            
            if (data.top_channels && data.top_channels.length > 0) {
                this.updateTopChannels(data.top_channels);
            } else {
                const container = document.getElementById('top-channels-list');
                container.innerHTML = '<div class="text-muted text-center">No channels found</div>';
            }
        } catch (error) {
            console.error('Error loading top channels:', error);
        }
    }
    
    updateTopChannels(channels) {
        const container = document.getElementById('top-channels-list');
        container.innerHTML = channels.map((channel, index) => `
            <div class="d-flex justify-content-between align-items-center mb-2">
                <div class="d-flex align-items-center">
                    <span class="badge bg-primary me-2">${index + 1}</span>
                    <span class="fw-bold text-truncate" style="max-width: 200px;" title="${channel.channel}">${channel.channel}</span>
                </div>
                <div class="text-end">
                    <span class="badge bg-secondary me-1">${channel.messages} msgs</span>
                    <span class="badge bg-info">${channel.users} users</span>
                </div>
            </div>
        `).join('');
    }
    
    updateDatabaseStatus(status, type) {
        const statusElement = document.getElementById('database-status');
        statusElement.innerHTML = `
            <div class="d-flex align-items-center justify-content-center mb-2">
                <span class="status-indicator status-${type} me-2"></span>
                <span>${status}</span>
            </div>
        `;
    }
    
    updateUptime() {
        const uptimeElement = document.getElementById('uptime');
        if (!uptimeElement) return;
        if (this.botStartTime != null && this.botStartTime > 0) {
            this.formatUptime(this.botStartTime);
        } else {
            // Bot not running or no start time in DB (e.g. viewer run standalone)
            uptimeElement.textContent = 'Bot Down?';
        }
    }
    
    formatUptime(uptimeSeconds) {
        const uptimeElement = document.getElementById('uptime');
        const totalMinutes = Math.floor(uptimeSeconds / 60);
        const totalHours = Math.floor(uptimeSeconds / 3600);
        const totalDays = Math.floor(uptimeSeconds / 86400);
        const months = Math.floor(totalDays / 30);
        const days = totalDays % 30;
        const hours = Math.floor((uptimeSeconds % 86400) / 3600);
        const minutes = Math.floor((uptimeSeconds % 3600) / 60);
        const seconds = Math.floor(uptimeSeconds % 60);

        const parts = [];
        if (months > 0) parts.push(`${months}mo`);
        if (days > 0) parts.push(`${days}d`);
        if (hours > 0) parts.push(`${hours}h`);
        if (minutes > 0) parts.push(`${minutes}m`);
        if (parts.length === 0 || totalHours < 1) {
            if (seconds > 0 || parts.length === 0) parts.push(`${seconds}s`);
        }
        uptimeElement.textContent = parts.length > 0 ? parts.join(' ') : '0s';
    }
    
    startLiveUptime() {
        // Clear any existing uptime interval
        if (this.uptimeInterval) {
            clearInterval(this.uptimeInterval);
            this.uptimeInterval = null;
        }
        
        // Only run live counter when we have a valid bot uptime (bot is running)
        if (this.botStartTime != null && this.botStartTime > 0) {
            this.uptimeInterval = setInterval(() => {
                if (this.botStartTime != null) {
                    this.botStartTime += 1;
                    this.formatUptime(this.botStartTime);
                }
            }, 1000);
        }
    }
    
    updateTimestamp() {
        const now = new Date();
        const timestamp = now.toLocaleTimeString();
        document.getElementById('last-update').textContent = timestamp;
    }
    
    startAutoRefresh() {
        this.updateInterval = setInterval(() => {
            this.loadDashboardData();
            this.updateTimestamp();
        }, 30000); // Refresh every 30 seconds
    }
    
    destroy() {
        // Clean up intervals when dashboard is destroyed
        if (this.updateInterval) {
            clearInterval(this.updateInterval);
        }
        if (this.uptimeInterval) {
            clearInterval(this.uptimeInterval);
        }
        if (this.pathEncodingPieChart) {
            this.pathEncodingPieChart.destroy();
            this.pathEncodingPieChart = null;
        }
        if (this.incomingPacketsPieChart) {
            this.incomingPacketsPieChart.destroy();
            this.incomingPacketsPieChart = null;
        }
    }
    
    async loadConnectedClients() {
        const loading = document.getElementById('connected-clients-loading');
        const empty   = document.getElementById('connected-clients-empty');
        const table   = document.getElementById('connected-clients-table');
        const tbody   = document.getElementById('connected-clients-tbody');
        if (!loading) return;
        loading.style.display = '';
        empty.style.display   = 'none';
        table.style.display   = 'none';
        tbody.innerHTML       = '';
        try {
            const resp = await fetch('/api/connected_clients');
            const clients = await resp.json();
            loading.style.display = 'none';
            if (!Array.isArray(clients) || clients.length === 0) {
                empty.style.display = '';
                return;
            }
            table.style.display = '';
            for (const c of clients) {
                const connAt = c.connected_at
                    ? new Date(c.connected_at * 1000).toLocaleTimeString()
                    : '—';
                const lastAct = c.last_activity
                    ? new Date(c.last_activity * 1000).toLocaleTimeString()
                    : '—';
                const tr = document.createElement('tr');
                tr.innerHTML = `<td><code>${c.client_id}</code></td><td>${connAt}</td><td>${lastAct}</td>`;
                tbody.appendChild(tr);
            }
        } catch (e) {
            loading.style.display = 'none';
            empty.style.display   = '';
            empty.textContent     = 'Failed to load client list.';
        }
    }

    showError(message) {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'alert alert-danger alert-dismissible fade show';
        errorDiv.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        // Insert at the top of the content
        const content = document.querySelector('.container-fluid');
        if (content) {
            content.insertBefore(errorDiv, content.firstChild);
            
            // Auto-remove after 10 seconds
            setTimeout(() => {
                if (errorDiv.parentNode) {
                    errorDiv.parentNode.removeChild(errorDiv);
                }
            }, 10000);
        }
    }
}

function initMultibyteCapableTooltips() {
    if (typeof bootstrap === 'undefined' || !bootstrap.Tooltip) return;
    const dashboardTip =
        'Contacts heard in the last 7 days are counted as multibyte capable if any apply: ' +
        'stored path encoding (out bytes per hop) is 2 or 3; ' +
        'we saw an advert from them in that window on observed paths with multibyte hops (2–3 bytes per hop); ' +
        'or, for repeaters and room servers, their public key prefix matches a hop prefix from a multibyte advert path in that window.';
    const el = document.getElementById('contacts-multibyte-chart-info');
    if (el) {
        const existing = bootstrap.Tooltip.getInstance(el);
        if (existing) existing.dispose();
        new bootstrap.Tooltip(el, {
            title: dashboardTip,
            html: false,
            customClass: 'multibyte-capable-hint',
        });
    }
}

// Initialize dashboard when page loads
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM loaded, initializing dashboard...');
    window.dashboard = new ModernDashboard();
    initMultibyteCapableTooltips();
});

// Clean up when page is unloaded
window.addEventListener('beforeunload', () => {
    if (window.dashboard) {
        window.dashboard.destroy();
    }
});
</script>

<script>
// ── Live Activity Feed (SocketIO) ─────────────────────────────────────────────
(function () {
    const feed      = document.getElementById('live-feed');
    const dot       = document.getElementById('live-dot');
    const countBadge = document.getElementById('live-count');
    const placeholder = document.getElementById('live-placeholder');
    let paused   = false;
    let total    = 0;
    const MAX_ENTRIES = 100;

    const TYPE_COLORS = {
        packet:  '#fd7e14',
        command: '#198754',
        message: '#0dcaf0',
    };

    function escHtml(s) {
        return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }

    // Track active type filters
    const activeFilters = { packet: true, command: true, message: true };

    function applyFilters() {
        Array.from(feed.children).forEach(el => {
            const t = el.dataset.type;
            if (!t) return; // placeholder or unknown
            el.style.display = activeFilters[t] ? '' : 'none';
        });
    }

    // Wire filter checkboxes
    document.querySelectorAll('.live-filter-cb').forEach(cb => {
        cb.addEventListener('change', () => {
            activeFilters[cb.dataset.type] = cb.checked;
            applyFilters();
        });
    });

    function addEntry(label, text, type) {
        if (paused) return;
        if (placeholder && placeholder.parentNode) placeholder.remove();
        const ts = new Date().toLocaleTimeString();
        const color = TYPE_COLORS[type] || '#6c757d';
        const el = document.createElement('div');
        el.dataset.type = type;
        el.style.cssText = `border-left:3px solid ${color};padding:3px 8px;margin-bottom:3px;font-size:0.82rem;border-radius:2px;`;
        el.innerHTML = `<span class="text-muted me-2">${ts}</span><strong>${escHtml(label)}</strong> <span class="text-muted">${escHtml(text)}</span>`;
        if (!activeFilters[type]) el.style.display = 'none';
        feed.insertBefore(el, feed.firstChild);
        total++;
        countBadge.textContent = total;
        // Trim
        const items = feed.children;
        while (items.length > MAX_ENTRIES) feed.removeChild(feed.lastChild);
    }

    window.toggleLivePause = function () {
        paused = !paused;
        const icon = document.getElementById('live-pause-icon');
        icon.className = paused ? 'fas fa-play' : 'fas fa-pause';
    };
    window.clearLiveFeed = function () {
        feed.innerHTML = '';
        total = 0;
        countBadge.textContent = '0';
    };
    window.scrollLiveFeed = function (dir) {
        feed.scrollTop = dir === 'top' ? 0 : feed.scrollHeight;
    };

    const socket = window.connectionManager.socket;

    socket.on('connect', () => {
        dot.className = 'status-indicator status-connected ms-2';
        socket.emit('subscribe_packets');
        socket.emit('subscribe_commands');
        socket.emit('subscribe_messages');
    });
    socket.on('disconnect', () => {
        dot.className = 'status-indicator status-disconnected ms-2';
    });

    socket.on('packet_data', d => {
        const ptype = d.payload_type_name || d.type_name || 'Packet';
        const src   = d.from_name || d.pubkey_prefix || '';
        addEntry(ptype, src, 'packet');
    });
    socket.on('command_data', d => {
        addEntry('Cmd: ' + (d.command || '?'), (d.user || '') + ' → ' + (d.channel || ''), 'command');
    });
    socket.on('message_data', d => {
        const ch = d.channel ? `[${d.channel}] ` : (d.is_dm ? '[DM] ' : '');
        addEntry(d.sender || '?', ch + (d.content || ''), 'message');
    });
})();
</script>

<style>
/* Status indicators moved to enhanced section below */

.loading {
    color: var(--text-muted);
    font-style: italic;
}

.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px var(--shadow-color);
}

.metric-value {
    font-weight: 700;
    font-size: 1.5rem;
}

.metric-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Analytics section uses Bootstrap responsive classes */

/* Health status card styling */
.health-status-card .col-md-3 {
    border-right: 1px solid var(--border-color);
    padding: 0.75rem 0.5rem;
    position: relative;
}

.health-status-card .col-md-3:last-child {
    border-right: none;
}

.health-status-card .col-md-3:first-child {
    padding-left: 0;
}

.health-status-card .col-md-3:last-child {
    padding-right: 0;
}

/* Enhanced card styling */
.card.shadow-sm {
    border: none;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card.shadow-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-color) !important;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
}

.card-header.bg-gradient-primary {
    border-radius: 12px 12px 0 0;
    padding: 0.75rem 1.25rem;
}

/* Status indicator enhancements */
.status-indicator {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.2);
    animation: pulse 2s infinite;
}

.status-connected { 
    background-color: #28a745; 
}

.status-disconnected { 
    background-color: #dc3545; 
}

.status-warning { 
    background-color: #ffc107; 
}

.status-success { 
    background-color: #28a745; 
}

.status-danger { 
    background-color: #dc3545; 
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

[data-theme="dark"] .status-indicator {
    box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.4);
    animation: pulse-dark 2s infinite;
}

@keyframes pulse-dark {
    0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.6); }
    70% { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}
</style>
{% endblock %}