@extends('layouts.super-admin')

@section('title', 'Device Detail')
@section('page-title', 'Device Detail')
@section('page-description', 'Informasi dan monitoring detail perangkat')

@section('content')
<div class="device-detail-container">

    <!-- Back Button -->
    <div class="back-nav">
        <a href="/super-admin/devices" class="btn-back">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M19 12H5M12 5l-7 7 7 7"/>
            </svg>
            Kembali ke Devices
        </a>
    </div>

    <!-- Device Header Card -->
    <div class="device-header-card" id="deviceHeaderCard">
        <div class="device-header-left">
            <div class="device-icon-wrap">
                <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <rect x="2" y="3" width="20" height="14" rx="2"/>
                    <path d="M8 21h8M12 17v4"/>
                    <circle cx="12" cy="10" r="3"/>
                </svg>
            </div>
            <div class="device-header-info">
                <div class="device-name-row">
                    <h2 id="deviceName">Memuat...</h2>
                    <span class="status-pill" id="deviceStatusPill">—</span>
                </div>
                <div class="device-meta-row">
                    <span class="meta-item" id="deviceId">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 3H8"/></svg>
                        ID: —
                    </span>
                    <span class="meta-item" id="deviceLocation">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                        Lokasi: —
                    </span>
                    <span class="meta-item" id="deviceIp">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><line x1="6" y1="6" x2="6.01" y2="6"/><line x1="6" y1="18" x2="6.01" y2="18"/></svg>
                        IP: —
                    </span>
                    <span class="meta-item" id="deviceInstalled">
                        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/></svg>
                        Dipasang: —
                    </span>
                </div>
            </div>
        </div>
        <div class="device-header-right">
            <div class="uptime-ring-wrap">
                <svg class="uptime-ring" viewBox="0 0 80 80">
                    <circle cx="40" cy="40" r="34" fill="none" stroke="#fde8e8" stroke-width="7"/>
                    <circle cx="40" cy="40" r="34" fill="none" stroke="#dc2626" stroke-width="7"
                        stroke-dasharray="213.6" stroke-dashoffset="213.6"
                        stroke-linecap="round" id="uptimeArc"
                        style="transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1s ease;"/>
                </svg>
                <div class="uptime-text">
                    <span id="uptimePct">0%</span>
                    <small>Uptime</small>
                </div>
            </div>
            <div class="header-actions">
                <button class="btn-outline" onclick="refreshData()">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
                    Refresh
                </button>
                <a id="editDeviceBtn" href="#" class="btn-primary-sm">
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                    Edit Device
                </a>
            </div>
        </div>
    </div>

    <!-- Stats Row -->
    <div class="stats-row">
        <div class="mini-stat-card">
            <div class="mini-stat-icon seismic">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
                </svg>
            </div>
            <div>
                <div class="mini-stat-val" id="lastMagnitude">—</div>
                <div class="mini-stat-label">Magnitudo Terakhir</div>
            </div>
        </div>
        <div class="mini-stat-card">
            <div class="mini-stat-icon temp">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/>
                </svg>
            </div>
            <div>
                <div class="mini-stat-val" id="lastTemp">—</div>
                <div class="mini-stat-label">Suhu Sensor</div>
            </div>
        </div>
        <div class="mini-stat-card">
            <div class="mini-stat-icon humid">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/>
                </svg>
            </div>
            <div>
                <div class="mini-stat-val" id="lastHumidity">—</div>
                <div class="mini-stat-label">Kelembaban</div>
            </div>
        </div>
        <div class="mini-stat-card">
            <div class="mini-stat-icon events">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3z"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
                </svg>
            </div>
            <div>
                <div class="mini-stat-val" id="totalEvents">—</div>
                <div class="mini-stat-label">Total Event (30h)</div>
            </div>
        </div>
        <div class="mini-stat-card">
            <div class="mini-stat-icon signal">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M1.42 9a16 16 0 0 1 21.16 0"/><path d="M5 12.55a11 11 0 0 1 14.08 0"/><path d="M8.53 16.11a6 6 0 0 1 6.95 0"/>
                    <line x1="12" y1="20" x2="12.01" y2="20"/>
                </svg>
            </div>
            <div>
                <div class="mini-stat-val" id="signalStrength">—</div>
                <div class="mini-stat-label">Kekuatan Sinyal</div>
            </div>
        </div>
    </div>

    <!-- Charts Grid -->
    <div class="charts-grid">

        <!-- Seismik Chart -->
        <div class="chart-card wide">
            <div class="chart-card-header">
                <div>
                    <h4>Aktivitas Seismik</h4>
                    <p class="chart-sub">Magnitudo getaran dalam 24 jam terakhir</p>
                </div>
                <div class="chart-legend">
                    <span class="legend-dot red"></span> Magnitudo
                </div>
            </div>
            <div class="chart-wrap">
                <canvas id="seismicChart" height="120"></canvas>
            </div>
        </div>

        <!-- Suhu Chart -->
        <div class="chart-card">
            <div class="chart-card-header">
                <div>
                    <h4>Suhu Sensor</h4>
                    <p class="chart-sub">°C — 12 jam terakhir</p>
                </div>
                <span class="legend-dot orange"></span>
            </div>
            <div class="chart-wrap">
                <canvas id="tempChart" height="160"></canvas>
            </div>
        </div>

        <!-- Kelembaban Chart -->
        <div class="chart-card">
            <div class="chart-card-header">
                <div>
                    <h4>Kelembaban</h4>
                    <p class="chart-sub">% — 12 jam terakhir</p>
                </div>
                <span class="legend-dot blue"></span>
            </div>
            <div class="chart-wrap">
                <canvas id="humidChart" height="160"></canvas>
            </div>
        </div>

    </div>

    <!-- Bottom Grid: Event Log + Koordinat -->
    <div class="bottom-grid">

        <!-- Event Log -->
        <div class="card-section">
            <div class="card-section-header">
                <h4>Log Event Terbaru</h4>
                <span class="badge-count" id="eventCount">0 event</span>
            </div>
            <div class="event-list" id="eventList">
                <div class="event-loading">Memuat log event...</div>
            </div>
        </div>

        <!-- Info Teknis -->
        <div class="card-section">
            <div class="card-section-header">
                <h4>Informasi Teknis</h4>
            </div>
            <div class="info-table">
                <div class="info-row"><span>Firmware</span><span id="infoFirmware">—</span></div>
                <div class="info-row"><span>Model</span><span id="infoModel">—</span></div>
                <div class="info-row"><span>Protokol</span><span id="infoProtocol">—</span></div>
                <div class="info-row"><span>Interval Data</span><span id="infoInterval">—</span></div>
                <div class="info-row"><span>Koordinat</span><span id="infoCoords">—</span></div>
                <div class="info-row"><span>Elevasi</span><span id="infoElevation">—</span></div>
                <div class="info-row"><span>Pemilik</span><span id="infoOwner">—</span></div>
                <div class="info-row"><span>Terakhir Online</span><span id="infoLastSeen">—</span></div>
                <div class="info-row"><span>Battery</span>
                    <span id="infoBattery">
                        <div class="battery-bar-wrap">
                            <div class="battery-bar" id="batteryBar" style="width:0%"></div>
                        </div>
                        <span id="batteryPct">—</span>
                    </span>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const deviceId = {{ $device->id ?? 'null' }};
const apiBase = '/super-admin/api';

let seismicChart, tempChart, humidChart;

// ─── INIT ───────────────────────────────────────────────────────────────────
document.addEventListener('DOMContentLoaded', () => {
    initCharts();
    loadDeviceDetail();
    loadSensorHistory();
    loadEventLog();
    setInterval(() => {
        loadDeviceDetail();
        loadSensorHistory();
        loadEventLog();
    }, 30000);
});

// ─── LOAD DEVICE DETAIL ─────────────────────────────────────────────────────
async function loadDeviceDetail() {
    try {
        const res = await fetch(`${apiBase}/devices/${deviceId}`);
        const data = await res.json();
        if (data.success) renderDeviceInfo(data.device);
    } catch (e) {
        console.warn('Device API unavailable:', e.message);
        // Tampilkan pesan error, jangan pakai data palsu
    }
}

function renderDeviceInfo(d) {
    document.getElementById('deviceName').textContent       = d.name || 'Device #' + d.id;
    document.getElementById('deviceId').textContent         = `ID: ${d.id}`;
    document.getElementById('deviceLocation').innerHTML     = `<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg> ${d.location || '—'}`;
    document.getElementById('deviceIp').textContent         = `IP: ${d.ip_address || '—'}`;
    document.getElementById('deviceInstalled').textContent  = `Dipasang: ${formatDate(d.installed_at)}`;
    document.getElementById('editDeviceBtn').href           = `/super-admin/devices/${d.id}/edit`;

    // Status pill
    const pill = document.getElementById('deviceStatusPill');
    pill.textContent  = d.is_active ? 'Online' : 'Offline';
    pill.className    = `status-pill ${d.is_active ? 'pill-online' : 'pill-offline'}`;

    // Uptime ring
    const pct = d.uptime_pct ?? 0;
    document.getElementById('uptimePct').textContent = pct + '%';
    const circ = 2 * Math.PI * 34;
    document.getElementById('uptimeArc').style.strokeDashoffset = circ - (circ * pct / 100);

    // Mini stats
    document.getElementById('lastMagnitude').textContent  = d.last_magnitude != null ? d.last_magnitude.toFixed(1) + ' M' : '—';
    document.getElementById('lastTemp').textContent       = d.last_temp != null ? d.last_temp + '°C' : '—';
    document.getElementById('lastHumidity').textContent   = d.last_humidity != null ? d.last_humidity + '%' : '—';
    document.getElementById('totalEvents').textContent    = d.total_events ?? '—';
    document.getElementById('signalStrength').textContent = d.signal_strength != null ? d.signal_strength + ' dBm' : '—';

    // Info teknis
    document.getElementById('infoFirmware').textContent  = d.firmware_version || '—';
    document.getElementById('infoModel').textContent     = d.model || '—';
    document.getElementById('infoProtocol').textContent  = d.protocol || '—';
    document.getElementById('infoInterval').textContent  = d.data_interval ? d.data_interval + 's' : '—';
    document.getElementById('infoCoords').textContent    = d.latitude && d.longitude ? `${d.latitude}, ${d.longitude}` : '—';
    document.getElementById('infoElevation').textContent = d.elevation != null ? d.elevation + ' mdpl' : '—';
    document.getElementById('infoOwner').textContent     = d.owner_name || '—';
    document.getElementById('infoLastSeen').textContent  = formatDateTime(d.last_seen_at);

    const bat = d.battery_pct ?? 0;
    document.getElementById('batteryPct').textContent    = bat + '%';
    const bar = document.getElementById('batteryBar');
    bar.style.width = bat + '%';
    bar.className = `battery-bar ${bat > 50 ? 'bat-ok' : bat > 20 ? 'bat-warn' : 'bat-low'}`;
}

// ─── LOAD SENSOR HISTORY ────────────────────────────────────────────────────
async function loadSensorHistory() {
    try {
        const res = await fetch(`${apiBase}/devices/${deviceId}/history?hours=24`);
        const data = await res.json();
        if (data.success) {
            updateSeismicChart(data.seismic);
            updateTempChart(data.temperature);
            updateHumidChart(data.humidity);
        }
    } catch (e) {
        // Coba ambil dari gempa API sebagai fallback
        updateSeismicChart([]);// Tidak ada data temperature sensor ini
        updateTempChart([]);updateHumidChart([]);
    }
}

// ─── LOAD EVENT LOG ─────────────────────────────────────────────────────────
async function loadEventLog() {
    try {
        const res = await fetch(`${apiBase}/devices/${deviceId}/events?limit=10`);
        const data = await res.json();
        if (data.success) renderEventList(data.events);
    } catch (e) {
        renderEventList([]);// Tidak ada event
    }
}

function renderEventList(events) {
    const el = document.getElementById('eventList');
    document.getElementById('eventCount').textContent = events.length + ' event';
    if (!events.length) {
        el.innerHTML = '<div class="event-empty">Tidak ada event terbaru</div>';
        return;
    }
    el.innerHTML = events.map(ev => `
        <div class="event-item ${getSeverityClass(ev.severity)}">
            <div class="event-dot"></div>
            <div class="event-body">
                <div class="event-title">${escapeHtml(ev.title || ev.type)}</div>
                <div class="event-desc">${escapeHtml(ev.description || '')}</div>
                <div class="event-time">${formatDateTime(ev.created_at)}</div>
            </div>
            <span class="event-badge">${capitalize(ev.severity || 'info')}</span>
        </div>
    `).join('');
}

// ─── CHARTS ─────────────────────────────────────────────────────────────────
function initCharts() {
    const defaultOpts = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: { legend: { display: false }, tooltip: { mode: 'index', intersect: false } },
        scales: {
            x: { grid: { color: '#f3f4f6' }, ticks: { font: { size: 11 }, color: '#9ca3af' } },
            y: { grid: { color: '#f3f4f6' }, ticks: { font: { size: 11 }, color: '#9ca3af' } }
        },
        elements: { point: { radius: 2, hoverRadius: 5 } }
    };

    seismicChart = new Chart(document.getElementById('seismicChart'), {
        type: 'line',
        data: { labels: [], datasets: [{ label: 'Magnitudo', data: [], borderColor: '#dc2626', backgroundColor: 'rgba(220,38,38,0.08)', fill: true, tension: 0.3 }] },
        options: { ...defaultOpts }
    });

    tempChart = new Chart(document.getElementById('tempChart'), {
        type: 'line',
        data: { labels: [], datasets: [{ label: 'Suhu (°C)', data: [], borderColor: '#f97316', backgroundColor: 'rgba(249,115,22,0.08)', fill: true, tension: 0.4 }] },
        options: { ...defaultOpts }
    });

    humidChart = new Chart(document.getElementById('humidChart'), {
        type: 'bar',
        data: { labels: [], datasets: [{ label: 'Kelembaban (%)', data: [], backgroundColor: 'rgba(59,130,246,0.5)', borderColor: '#3b82f6', borderWidth: 1, borderRadius: 4 }] },
        options: { ...defaultOpts }
    });
}

function updateSeismicChart(d) {
    if (!d) return;
    seismicChart.data.labels   = d.map(r => r.label);
    seismicChart.data.datasets[0].data = d.map(r => r.value);
    seismicChart.update('none');
}
function updateTempChart(d) {
    if (!d) return;
    tempChart.data.labels   = d.map(r => r.label);
    tempChart.data.datasets[0].data = d.map(r => r.value);
    tempChart.update('none');
}
function updateHumidChart(d) {
    if (!d) return;
    humidChart.data.labels   = d.map(r => r.label);
    humidChart.data.datasets[0].data = d.map(r => r.value);
    humidChart.update('none');
}

// ─── MOCK DATA ───────────────────────────────────────────────────────────────
function getMockDevice() {
    return {
        id: deviceId || 1, name: 'Sensor Gempa Bandung-01', location: 'Bandung, Jawa Barat',
        ip_address: '192.168.1.101', installed_at: '2025-01-15', is_active: true, uptime_pct: 97,
        last_magnitude: 2.3, last_temp: 28, last_humidity: 72, total_events: 18, signal_strength: -65,
        firmware_version: 'v2.4.1', model: 'SeismoNode Pro', protocol: 'MQTT', data_interval: 10,
        latitude: -6.9175, longitude: 107.6191, elevation: 768, owner_name: 'BMKG Jabar',
        last_seen_at: new Date().toISOString(), battery_pct: 84
    };
}
function getMockSeismic() {
    const h = [];
    for (let i = 23; i >= 0; i--) {
        const d = new Date(); d.setHours(d.getHours() - i);
        h.push({ label: d.getHours() + ':00', value: +(Math.random() * 3).toFixed(2) });
    }
    return h;
}
function getMockTemp() {
    const h = [];
    for (let i = 11; i >= 0; i--) {
        const d = new Date(); d.setHours(d.getHours() - i);
        h.push({ label: d.getHours() + ':00', value: +(24 + Math.random() * 8).toFixed(1) });
    }
    return h;
}
function getMockHumid() {
    const h = [];
    for (let i = 11; i >= 0; i--) {
        const d = new Date(); d.setHours(d.getHours() - i);
        h.push({ label: d.getHours() + ':00', value: +(60 + Math.random() * 30).toFixed(1) });
    }
    return h;
}
function getMockEvents() {
    return [
        { title: 'Gempa Terdeteksi', description: 'Magnitudo 2.3, kedalaman 10km', severity: 'warning', created_at: new Date(Date.now() - 3600000).toISOString() },
        { title: 'Koneksi Dipulihkan', description: 'Device kembali online setelah 2 menit offline', severity: 'info', created_at: new Date(Date.now() - 7200000).toISOString() },
        { title: 'Suhu Tinggi', description: 'Suhu sensor mencapai 35°C', severity: 'warning', created_at: new Date(Date.now() - 14400000).toISOString() },
        { title: 'Firmware Update', description: 'Berhasil update ke v2.4.1', severity: 'success', created_at: new Date(Date.now() - 86400000).toISOString() },
    ];
}

// ─── HELPERS ─────────────────────────────────────────────────────────────────
function refreshData() {
    loadDeviceDetail();
    loadSensorHistory();
    loadEventLog();
}
function getSeverityClass(s) {
    if (s === 'danger' || s === 'error') return 'sev-danger';
    if (s === 'warning') return 'sev-warning';
    if (s === 'success') return 'sev-success';
    return 'sev-info';
}
function capitalize(str) { return str ? str.charAt(0).toUpperCase() + str.slice(1) : ''; }
function escapeHtml(str) {
    if (!str) return '';
    return str.replace(/[&<>]/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[m]));
}
function formatDate(ds) {
    if (!ds) return '—';
    return new Date(ds).toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' });
}
function formatDateTime(ds) {
    if (!ds) return '—';
    return new Date(ds).toLocaleString('id-ID', { day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit' });
}
</script>

<style>
/* ── Layout ─────────────────────────────── */
.device-detail-container { max-width: 1400px; margin: 0 auto; }

.back-nav { margin-bottom: 1rem; }
.btn-back {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: #6b7280; font-size: 0.85rem; text-decoration: none;
    transition: color .2s;
}
.btn-back:hover { color: #dc2626; }

/* ── Header Card ─────────────────────────── */
.device-header-card {
    background: white; border-radius: 14px; padding: 1.5rem;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    margin-bottom: 1.25rem;
}
.device-header-left { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 0; }
.device-icon-wrap {
    width: 60px; height: 60px; min-width: 60px; border-radius: 14px;
    background: #fef2f2; display: flex; align-items: center; justify-content: center;
    color: #dc2626;
}
.device-name-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.device-name-row h2 { font-size: 1.25rem; font-weight: 700; color: #111; margin: 0; }
.status-pill { padding: 0.2rem 0.65rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; }
.pill-online  { background: #d1fae5; color: #065f46; }
.pill-offline { background: #fee2e2; color: #991b1b; }
.device-meta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.4rem; }
.meta-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: #6b7280; }

.device-header-right { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.uptime-ring-wrap { position: relative; width: 80px; height: 80px; }
.uptime-ring { width: 80px; height: 80px; }
.uptime-text {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.uptime-text span { font-size: 0.95rem; font-weight: 700; color: #dc2626; line-height: 1; }
.uptime-text small { font-size: 0.6rem; color: #9ca3af; }
.header-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.btn-outline {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.9rem; border: 1px solid #e5e7eb; border-radius: 8px;
    background: white; color: #374151; font-size: 0.8rem; cursor: pointer;
    transition: border-color .2s, color .2s;
}
.btn-outline:hover { border-color: #dc2626; color: #dc2626; }
.btn-primary-sm {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.9rem; border-radius: 8px;
    background: #dc2626; color: white; font-size: 0.8rem; text-decoration: none;
    transition: background .2s;
}
.btn-primary-sm:hover { background: #b91c1c; }

/* ── Stats Row ───────────────────────────── */
.stats-row {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 1rem; margin-bottom: 1.25rem;
}
.mini-stat-card {
    background: white; border-radius: 12px; padding: 1rem 1.25rem;
    display: flex; align-items: center; gap: 0.85rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.mini-stat-icon {
    width: 40px; height: 40px; min-width: 40px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.mini-stat-icon.seismic { background: #fef2f2; color: #dc2626; }
.mini-stat-icon.temp    { background: #fff7ed; color: #f97316; }
.mini-stat-icon.humid   { background: #eff6ff; color: #3b82f6; }
.mini-stat-icon.events  { background: #f5f3ff; color: #7c3aed; }
.mini-stat-icon.signal  { background: #f0fdf4; color: #16a34a; }
.mini-stat-val   { font-size: 1.15rem; font-weight: 700; color: #111; }
.mini-stat-label { font-size: 0.72rem; color: #9ca3af; }

/* ── Charts ──────────────────────────────── */
.charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 1rem; margin-bottom: 1.25rem;
}
.chart-card {
    background: white; border-radius: 12px; padding: 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.chart-card.wide { grid-column: span 1; }
.chart-card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 1rem;
}
.chart-card-header h4 { font-size: 0.9rem; font-weight: 700; color: #111; margin: 0; }
.chart-sub { font-size: 0.72rem; color: #9ca3af; margin: 0.15rem 0 0; }
.chart-wrap { position: relative; }
.legend-dot {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.legend-dot.red    { background: #dc2626; }
.legend-dot.orange { background: #f97316; }
.legend-dot.blue   { background: #3b82f6; }
.chart-legend { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: #6b7280; }

/* ── Bottom Grid ─────────────────────────── */
.bottom-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.card-section {
    background: white; border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
}
.card-section-header {
    padding: 1rem 1.25rem; border-bottom: 1px solid #f3f4f6;
    display: flex; justify-content: space-between; align-items: center;
}
.card-section-header h4 { font-size: 0.9rem; font-weight: 700; color: #111; margin: 0; }
.badge-count {
    background: #fef2f2; color: #dc2626;
    padding: 0.15rem 0.5rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600;
}

/* Event list */
.event-list { max-height: 320px; overflow-y: auto; }
.event-loading, .event-empty { padding: 2rem; text-align: center; color: #9ca3af; font-size: 0.85rem; }
.event-item {
    display: flex; align-items: flex-start; gap: 0.75rem;
    padding: 0.85rem 1.25rem; border-bottom: 1px solid #f9fafb;
    transition: background .15s;
}
.event-item:hover { background: #fafafa; }
.event-dot {
    width: 8px; height: 8px; min-width: 8px; border-radius: 50%;
    margin-top: 5px;
}
.sev-danger  .event-dot { background: #dc2626; }
.sev-warning .event-dot { background: #f59e0b; }
.sev-success .event-dot { background: #16a34a; }
.sev-info    .event-dot { background: #3b82f6; }
.event-body { flex: 1; min-width: 0; }
.event-title { font-size: 0.82rem; font-weight: 600; color: #111; }
.event-desc  { font-size: 0.75rem; color: #6b7280; margin-top: 0.1rem; }
.event-time  { font-size: 0.7rem; color: #9ca3af; margin-top: 0.2rem; }
.event-badge {
    font-size: 0.65rem; padding: 0.15rem 0.5rem; border-radius: 20px; font-weight: 600; white-space: nowrap;
}
.sev-danger  .event-badge { background: #fee2e2; color: #991b1b; }
.sev-warning .event-badge { background: #fef3c7; color: #92400e; }
.sev-success .event-badge { background: #d1fae5; color: #065f46; }
.sev-info    .event-badge { background: #dbeafe; color: #1e40af; }

/* Info table */
.info-table { padding: 0.5rem 0; }
.info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.6rem 1.25rem; border-bottom: 1px solid #f9fafb;
    font-size: 0.82rem;
}
.info-row:last-child { border-bottom: none; }
.info-row > span:first-child { color: #6b7280; }
.info-row > span:last-child  { font-weight: 600; color: #111; display: flex; align-items: center; gap: 0.5rem; }

/* Battery */
.battery-bar-wrap {
    width: 60px; height: 7px; background: #f3f4f6;
    border-radius: 10px; overflow: hidden; display: inline-block; vertical-align: middle;
}
.battery-bar { height: 100%; border-radius: 10px; transition: width .5s ease; }
.bat-ok   { background: #16a34a; }
.bat-warn { background: #f59e0b; }
.bat-low  { background: #dc2626; }

/* ── Responsive ──────────────────────────── */
@media (max-width: 1200px) {
    .stats-row { grid-template-columns: repeat(3, 1fr); }
    .charts-grid { grid-template-columns: 1fr 1fr; }
    .chart-card.wide { grid-column: span 2; }
}
@media (max-width: 768px) {
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .charts-grid { grid-template-columns: 1fr; }
    .chart-card.wide { grid-column: auto; }
    .bottom-grid { grid-template-columns: 1fr; }
    .device-header-card { flex-direction: column; }
}
@media (max-width: 480px) {
    .stats-row { grid-template-columns: 1fr; }
}
</style>
@endsection