.cards-container { display: flex; gap: 20px; margin-bottom: 25px; }
    .card { 
        background: #1e293b; 
        border: 1px solid #334155; 
        border-radius: 12px; 
        padding: 20px; 
        flex: 1; 
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
    }
    .card-title { font-size: 12px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
    .card-value { font-size: 22px; font-weight: bold; color: #f8fafc; display: flex; align-items: center; gap: 8px; }

    .section-box { 
        background: #1e293b; 
        border: 1px solid #334155; 
        border-radius: 12px; 
        padding: 20px; 
        margin-bottom: 25px; 
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
    }
    .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
    .section-title { font-size: 16px; font-weight: 600; color: #f8fafc; display: flex; align-items: center; gap: 12px; margin: 0; }

    .domains-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        min-height: 112px;
        margin-bottom: 15px;
    }
    .domain-item {
        background: #0f172a;
        border: 1px solid #334155;
        border-radius: 8px;
        padding: 12px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        box-sizing: border-box;
    }

    .pagination-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #334155;
        padding-top: 12px;
        font-size: 13px;
        color: #94a3b8;
    }

    .btn { 
        background: #334155; 
        color: #f8fafc; 
        border: none; 
        padding: 8px 14px; 
        border-radius: 6px; 
        cursor: pointer; 
        font-size: 13px; 
        display: inline-flex; 
        align-items: center; 
        gap: 5px; 
        transition: background 0.2s; 
    }
    .btn:hover { background: #475569; }
    .btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .btn-danger { background: #dc2626; color: white; }
    .btn-danger:hover { background: #b91c1c; }

    select { 
        background: #0f172a; 
        color: #e2e8f0; 
        border: 1px solid #475569; 
        padding: 8px 12px; 
        border-radius: 6px; 
        font-size: 13px; 
    }

    /* Tableau PC par défaut */
    .desktop-table-wrapper { width: 100%; display: block; }
    table { width: 100%; border-collapse: collapse; margin-top: 10px; }
    th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #334155; font-size: 14px; }
    th { color: #94a3b8; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
    tr:hover { background-color: rgba(255, 255, 255, 0.02); }
    
    /* Vue mobile cartes (masquée sur PC) */
    .mobile-cards-view { display: none; }

    .badge { padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; }
    .badge-local { background: #0284c7; color: white; }
    .badge-capi { background: #475569; color: #cbd5e1; }
    .badge-online { background: #166534; color: #4ade80; border: 1px solid #22c55e; }
    .badge-down { background: #7f1d1d; color: #f87171; border: 1px solid #ef4444; }

    .clickable-ip { 
        color: #38bdf8; 
        cursor: pointer; 
        text-decoration: underline dotted; 
    }
    .clickable-ip:hover { color: #7dd3fc; }

    .form-input { 
        background: #0f172a; 
        border: 1px solid #475569; 
        color: #e2e8f0; 
        padding: 10px; 
        border-radius: 6px; 
        width: 100%; 
        max-width: 400px; 
        margin-right: 10px; 
        box-sizing: border-box; 
    }
    .loading { text-align: center; color: #94a3b8; font-style: italic; padding: 20px; grid-column: span 3; }

    .modal-overlay {
        position: fixed; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(4px);
        display: flex; justify-content: center; align-items: center; z-index: 1000;
        opacity: 0; visibility: hidden; transition: all 0.2s ease;
    }
    .modal-overlay.active { opacity: 1; visibility: visible; }
    .modal-box {
        background: #1e293b; border: 1px solid #334155; border-radius: 12px;
        padding: 25px; width: 90%; max-width: 400px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
        text-align: center; transform: scale(0.95); transition: transform 0.2s ease;
    }
    .modal-overlay.active .modal-box { transform: scale(1); }
    .modal-title { font-size: 16px; font-weight: 600; color: #f8fafc; margin-bottom: 10px; }
    .modal-text { font-size: 14px; color: #94a3b8; margin-bottom: 20px; line-height: 1.5; }
    .modal-actions { display: flex; justify-content: center; gap: 10px; }

    /* DESIGN SPÉCIFIQUE MOBILE (Max 480px / 768px) */
    @media (max-width: 768px) {
        body { padding: 12px; }
        h1 { font-size: 20px; }
        p.subtitle { font-size: 13px; margin-bottom: 15px; }
        .cards-container { flex-direction: column; gap: 12px; margin-bottom: 15px; }
        .card { padding: 15px; }
        .section-box { padding: 15px; margin-bottom: 15px; }
        .domains-grid { grid-template-columns: 1fr; gap: 8px; min-height: auto; }
        .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
        .section-header > div { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
        
        /* Bascule : Cacher le tableau PC et afficher les cartes mobiles percutantes */
        .desktop-table-wrapper { display: none; }
        .mobile-cards-view { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
        
        .threat-card {
            background: #0f172a;
            border: 1px solid #334155;
            border-left: 4px solid #f87171;
            border-radius: 8px;
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .threat-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .threat-ip {
            font-size: 16px;
            font-weight: bold;
            color: #38bdf8;
        }
        .threat-scenario {
            font-size: 13px;
            color: #cbd5e1;
            word-break: break-word;
        }
        .threat-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 4px;
            border-top: 1px solid #1e293b;
            padding-top: 8px;
        }

        .form-input { max-width: 100%; margin-right: 0; margin-bottom: 8px; }
        .section-box .form-input, .section-box button { width: 100%; }
    }
</style>


<div>
    <h1>🛡️ Dashboard Réseau & Sécurité</h1>
    <p class="subtitle">Supervision des menaces CrowdSec et statuts des domaines en temps réel</p>
</div>

<!-- PREMIÈRE LIGNE : 3 cartes -->
<div class="cards-container">
    <div class="card">
        <div class="card-title">Total Menaces Actives</div>
        <div class="card-value" id="total-threats">0</div>
    </div>
    <div class="card">
        <div class="card-title">Statut CrowdSec</div>
        <div class="card-value" id="crowdsec-status">
            <span style="color: #94a3b8; font-size: 14px;">Vérification...</span>
        </div>
    </div>
    <div class="card">
        <div class="card-title">Dernière Synchronisation</div>
        <div class="card-value" id="last-sync" style="font-size: 20px;">--:--:--</div>
    </div>
</div>

<!-- DEUXIÈME LIGNE : Module des domaines avec pagination -->
<div class="section-box">
    <div class="section-header">
        <h2 class="section-title">
            <span>🌐</span> Statut des Domaines
        </h2>
        <div id="global-domains-status" style="font-size: 18px; font-weight: bold; display: flex; align-items: center; gap: 8px;">
            <span style="color: #94a3b8; font-size: 14px;">Vérification...</span>
        </div>
    </div>
    
    <div id="domains-container" class="domains-grid">
        <div class="loading">Chargement des domaines...</div>
    </div>

    <div class="pagination-bar">
        <button class="btn" id="prevPageBtn" onclick="changePage(-1)" disabled>◀ Précédent</button>
        <span id="pageInfo">Page 1 / 1</span>
        <button class="btn" id="nextPageBtn" onclick="changePage(1)" disabled>Suivant ▶</button>
    </div>
</div>

<!-- Section du Tableau CrowdSec -->
<div class="section-box">
    <div class="section-header">
        <h2 class="section-title">
            🔓 Menaces & Bans Actifs
        </h2>
        <div style="display: flex; gap: 8px; align-items: center;">
            <select id="filterSelect" onchange="loadCrowdSecTable()">
                <option value="local" selected>🎯 Local uniquement</option>
                <option value="all">🌍 Global + Local</option>
            </select>
            <button class="btn" onclick="loadDashboardData()">🔄</button>
        </div>
    </div>

    <!-- AFFICHAGE PC : Tableau classique -->
    <div class="desktop-table-wrapper">
        <table>
            <thead>
                <tr>
                    <th>ADRESSE IP (Cliquer pour cibler)</th>
                    <th>ORIGINE</th>
                    <th>SCÉNARIO</th>
                    <th>ACTION</th>
                </tr>
            </thead>
            <tbody id="crowdsec-table-body">
                <tr><td colspan="4" class="loading">Chargement des données...</td></tr>
            </tbody>
        </table>
    </div>

    <!-- AFFICHAGE MOBILE (480px) : Cartes percutantes -->
    <div id="mobile-cards-container" class="mobile-cards-view">
        <div class="loading">Chargement des menaces...</div>
    </div>
</div>

<!-- Section de gestion du débannissement manuel -->
<div class="section-box">
    <h2 class="section-title" style="margin-bottom: 5px;">
        🔒 Débannir une IP
    </h2>
    <p style="color: #94a3b8; font-size: 13px; margin-bottom: 15px; margin-top: 5px;">
        Sélectionnez une IP dans la liste ou entrez-la manuellement.
    </p>
    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
        <input type="text" id="ipManualInput" class="form-input" placeholder="Ex: 90.30.210.196">
        <button class="btn btn-danger" onclick="unbanManualIp()">🔓 Débannir</button>
    </div>
</div>

<!-- Modale de Confirmation -->
<div id="customModal" class="modal-overlay">
    <div class="modal-box">
        <div id="modalTitle" class="modal-title">Confirmation</div>
        <div id="modalText" class="modal-text">Message...</div>
        <div id="modalButtons" class="modal-actions"></div>
    </div>
</div>

<script>
    let allDomainsData = [];
    let currentPage = 1;
    const itemsPerPage = 6;

    function showModal(title, text, buttonsHtml) {
        document.getElementById('modalTitle').textContent = title;
        document.getElementById('modalText').innerHTML = text;
        document.getElementById('modalButtons').innerHTML = buttonsHtml;
        document.getElementById('customModal').classList.add('active');
    }

    function closeModal() {
        document.getElementById('customModal').classList.remove('active');
    }

    function loadDashboardData() {
        loadStatuses();
        loadCrowdSecTable();
    }

    function loadStatuses() {
        const csStatusEl = document.getElementById('crowdsec-status');
        const lastSyncEl = document.getElementById('last-sync');
        const globalStatusEl = document.getElementById('global-domains-status');

        lastSyncEl.textContent = new Date().toLocaleTimeString();

        fetch('status.php')
            .then(response => response.json())
            .then(data => {
                if (data.crowdsec_online) {
                    csStatusEl.innerHTML = '<span style="color: #4ade80;">🟢 Opérationnel</span>';
                } else {
                    csStatusEl.innerHTML = '<span style="color: #f87171;">🔴 Injoignable</span>';
                }

                if (Array.isArray(data.domains)) {
                    allDomainsData = data.domains;
                    renderDomainsPage();

                    const hasDownDomain = allDomainsData.some(d => !d.online);
                    if (hasDownDomain) {
                        globalStatusEl.innerHTML = '<span style="color: #f87171;">🔴 En panne</span>';
                    } else {
                        globalStatusEl.innerHTML = '<span style="color: #4ade80;">🟢 Opérationnel</span>';
                    }
                }
            })
            .catch(error => {
                csStatusEl.innerHTML = '<span style="color: #f87171;">Erreur</span>';
                globalStatusEl.innerHTML = '<span style="color: #f87171;">Erreur</span>';
            });
    }

    function renderDomainsPage() {
        const domainsContainer = document.getElementById('domains-container');
        domainsContainer.innerHTML = '';

        if (allDomainsData.length === 0) {
            domainsContainer.innerHTML = '<div class="loading">Aucun domaine.</div>';
            return;
        }

        const totalPages = Math.max(1, Math.ceil(allDomainsData.length / itemsPerPage));
        if (currentPage > totalPages) currentPage = totalPages;
        if (currentPage < 1) currentPage = 1;

        const start = (currentPage - 1) * itemsPerPage;
        const pageItems = allDomainsData.slice(start, start + itemsPerPage);

        pageItems.forEach(d => {
            const item = document.createElement('div');
            item.className = 'domain-item';
            const badgeHtml = d.online ? `<span class="badge badge-online">🟢 Online</span>` : `<span class="badge badge-down">🔴 Down</span>`;

            item.innerHTML = `
                <strong style="color: #38bdf8; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 10px;" title="${d.domain}">${d.domain}</strong>
                <div>${badgeHtml}</div>
            `;
            domainsContainer.appendChild(item);
        });

        document.getElementById('pageInfo').textContent = `Page ${currentPage} / ${totalPages}`;
        document.getElementById('prevPageBtn').disabled = (currentPage <= 1);
        document.getElementById('nextPageBtn').disabled = (currentPage >= totalPages);
    }

    function changePage(direction) {
        currentPage += direction;
        renderDomainsPage();
    }

    function loadCrowdSecTable() {
        const filterValue = document.getElementById('filterSelect').value;
        const tableBody = document.getElementById('crowdsec-table-body');
        const mobileContainer = document.getElementById('mobile-cards-container');
        const totalThreatsEl = document.getElementById('total-threats');

        fetch('crowdsec-data.php?filter=' + filterValue)
            .then(response => response.json())
            .then(data => {
                tableBody.innerHTML = '';
                mobileContainer.innerHTML = '';

                if (!Array.isArray(data) || data.length === 0) {
                    tableBody.innerHTML = '<tr><td colspan="4" style="text-align: center; color: #94a3b8;">Aucune menace active.</td></tr>';
                    mobileContainer.innerHTML = '<div style="text-align: center; color: #94a3b8; padding: 20px;">Aucune menace active.</div>';
                    totalThreatsEl.textContent = '0';
                    return;
                }

                totalThreatsEl.textContent = data.length.toLocaleString();

                data.forEach(item => {
                    const ipValue = item.value || 'N/A';
                    const origin = item.origin || 'N/A';
                    const scenario = item.scenario || 'N/A';
                    const badgeClass = (origin.toLowerCase() === 'local' || origin.toLowerCase() === 'cscli') ? 'badge badge-local' : 'badge badge-capi';

                    // 1. Remplissage du tableau PC
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td><strong class="clickable-ip" onclick="selectIpForUnban('${ipValue}')">${ipValue}</strong></td>
                        <td><span class="${badgeClass}">${origin}</span></td>
                        <td style="color: #cbd5e1;">${scenario}</td>
                        <td><button class="btn btn-danger" style="padding: 4px 10px;" onclick="confirmUnban('${ipValue}')">Débannir</button></td>
                    `;
                    tableBody.appendChild(tr);

                    // 2. Remplissage des cartes mobiles (percutantes pour écran 480px)
                    const card = document.createElement('div');
                    card.className = 'threat-card';
                    card.innerHTML = `
                        <div class="threat-card-header">
                            <span class="threat-ip clickable-ip" onclick="selectIpForUnban('${ipValue}')">${ipValue}</span>
                            <span class="${badgeClass}">${origin}</span>
                        </div>
                        <div class="threat-scenario"><strong>Scénario :</strong> ${scenario}</div>
                        <div class="threat-footer">
                            <span style="font-size: 11px; color: #94a3b8;">Sanction active</span>
                            <button class="btn btn-danger" style="padding: 6px 14px; font-size: 12px;" onclick="confirmUnban('${ipValue}')">🔓 Débannir</button>
                        </div>
                    `;
                    mobileContainer.appendChild(card);
                });
            })
            .catch(error => {
                tableBody.innerHTML = '<tr><td colspan="4" style="text-align: center; color: #f87171;">Erreur de chargement.</td></tr>';
                mobileContainer.innerHTML = '<div style="text-align: center; color: #f87171; padding: 20px;">Erreur de chargement.</div>';
                totalThreatsEl.textContent = 'Err';
            });
    }

    function selectIpForUnban(ip) {
        const inputField = document.getElementById('ipManualInput');
        inputField.value = ip;
        inputField.focus();
        inputField.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }

    function confirmUnban(ip) {
        showModal(
            "Confirmation",
            `Voulez-vous débannir l'adresse IP <strong style="color: #38bdf8;">${ip}</strong> ?`,
            `<button class="btn" style="background: #475569;" onclick="closeModal()">Annuler</button>
             <button class="btn btn-danger" onclick="executeUnban('${ip}')">Confirmer</button>`
        );
    }

    function executeUnban(ip) {
        closeModal();
        fetch('deban.php?ip=' + encodeURIComponent(ip))
            .then(response => response.json())
            .then(result => {
                showModal("Information", result.message || 'Action effectuée', `<button class="btn" style="background: #0284c7; color: white;" onclick="closeModal()">OK</button>`);
                if (result.success) loadDashboardData();
            });
    }

    function unbanManualIp() {
        const inputField = document.getElementById('ipManualInput');
        const targetIp = inputField.value.trim();
        if (!targetIp) {
            showModal("Champ requis", "Entrez une IP valide.", `<button class="btn" style="background: #0284c7; color: white;" onclick="closeModal()">OK</button>`);
            return;
        }
        confirmUnban(targetIp);
        inputField.value = '';
    }

    document.addEventListener('DOMContentLoaded', () => {
        loadDashboardData();
        setInterval(loadDashboardData, 10000);
    });
</script>