@extends('layouts.admin', [
    'title' => 'Dashboard',
    'header' => 'Dashboard'
])

@section('admin_content')
@php
    $stats = $dashboardStats ?? [];
    $isAdmin = ($stats['role'] ?? null) === 'admin';
    $activityLogs = $stats['activity_logs'] ?? [];
    $operatorLoginLogs = $stats['operator_login_logs'] ?? [];
    $studentGenderChart = $stats['student_gender_chart'] ?? ['labels' => [], 'data' => [], 'items' => [], 'total' => 0];
    $dosenPerPtChart = $stats['dosen_per_pt_chart'] ?? ['labels' => [], 'data' => [], 'items' => [], 'total' => 0];
    $todayActivity = $stats['today_activity'] ?? ['total' => 0, 'created' => 0, 'updated' => 0, 'deleted' => 0, 'last_activity' => 'Belum ada aktivitas hari ini'];
@endphp

<div class="dashboard-shell">
    <section class="hero-panel">
        <div>
            <span class="hero-panel__eyebrow">Realtime Overview</span>
            <h2>Halo, <span id="user-name">{{ $stats['user'] ?? $userLogin?->name }}</span></h2>
            <p id="dashboard-greeting">{{ $stats['greeting'] ?? 'Selamat datang di panel admin SILONTAR.' }}</p>
        </div>

        <div class="hero-panel__meta">
            <div class="hero-panel__badge">
                <span>Status</span>
                <strong id="realtime-status">Realtime aktif</strong>
            </div>
            <div class="hero-panel__badge">
                <span>Update terakhir</span>
                <strong id="last-update">{{ $stats['updated_at'] ?? '-' }}</strong>
            </div>
        </div>
    </section>

    <section class="stats-grid">
        @if($isAdmin)
            <article class="stat-card stat-card--ocean">
                <span class="stat-card__icon"><i class="fas fa-bullhorn"></i></span>
                <div class="stat-card__label">Total Pengumuman</div>
                <div class="stat-card__value" id="total-pengumuman">{{ $stats['total_pengumuman'] ?? 0 }}</div>
                <div class="stat-card__note">Seluruh pengumuman yang tersimpan</div>
            </article>

            <article class="stat-card stat-card--emerald">
                <span class="stat-card__icon"><i class="fas fa-check-circle"></i></span>
                <div class="stat-card__label">Pengumuman Publish</div>
                <div class="stat-card__value" id="pengumuman-publish">{{ $stats['pengumuman_publish'] ?? 0 }}</div>
                <div class="stat-card__note">Sudah tayang di halaman publik</div>
            </article>

            <article class="stat-card stat-card--amber">
                <span class="stat-card__icon"><i class="fas fa-chalkboard-teacher"></i></span>
                <div class="stat-card__label">Total Dosen</div>
                <div class="stat-card__value" id="total-dosen">{{ $stats['total_dosen'] ?? 0 }}</div>
                <div class="stat-card__note">Data dosen terdaftar</div>
            </article>

            <article class="stat-card stat-card--violet">
                <span class="stat-card__icon"><i class="fas fa-user-graduate"></i></span>
                <div class="stat-card__label">Total Mahasiswa</div>
                <div class="stat-card__value" id="total-mahasiswa">{{ $stats['total_mahasiswa'] ?? 0 }}</div>
                <div class="stat-card__note">Data mahasiswa terdaftar</div>
            </article>

            <article class="stat-card stat-card--slate">
                <span class="stat-card__icon"><i class="fas fa-database"></i></span>
                <div class="stat-card__label">Total Perguruan Tinggi</div>
                <div class="stat-card__value" id="total-master-data">{{ $stats['total_master_data'] ?? 0 }}</div>
            </article>
        @else
            <article class="stat-card stat-card--amber">
                <span class="stat-card__icon"><i class="fas fa-chalkboard-teacher"></i></span>
                <div class="stat-card__label">Dosen Terkelola</div>
                <div class="stat-card__value" id="total-dosen">{{ $stats['total_dosen'] ?? 0 }}</div>
                <div class="stat-card__note">Data dosen yang Anda input</div>
            </article>

            <article class="stat-card stat-card--emerald">
                <span class="stat-card__icon"><i class="fas fa-user-graduate"></i></span>
                <div class="stat-card__label">Mahasiswa Terkelola</div>
                <div class="stat-card__value" id="total-mahasiswa">{{ $stats['total_mahasiswa'] ?? 0 }}</div>
                <div class="stat-card__note">Data mahasiswa yang Anda input</div>
            </article>
        @endif
    </section>

    @if($isAdmin)
        <section class="dashboard-panels">
            <div class="insight-card">
                <div class="insight-card__head">
                    <div>
                        <span class="insight-card__eyebrow">Aktivitas</span>
                        <h4>Log Aktivitas Realtime</h4>
                    </div>
                    <span class="insight-card__pill">12 aktivitas terbaru</span>
                </div>

                <div class="activity-log" id="activity-log">
                    @forelse($activityLogs as $log)
                        <article class="activity-log__item">
                            <div class="activity-log__icon {{ ($log['actor_role'] ?? '') === 'admin' ? 'activity-log__icon--admin' : 'activity-log__icon--operator' }}">
                                <i class="fas {{ ($log['actor_role'] ?? '') === 'admin' ? 'fa-user-shield' : 'fa-user-check' }}"></i>
                            </div>
                            <div class="activity-log__content">
                                <div class="activity-log__meta">
                                    <strong>{{ $log['actor_name'] }}</strong>
                                    <span>{{ $log['module'] }}</span>
                                </div>
                                <p class="activity-log__description mb-1">{{ $log['description'] }}</p>
                                <div class="activity-log__time">{{ $log['time_human'] ?? '-' }} · {{ $log['time'] ?? '-' }}</div>
                            </div>
                        </article>
                    @empty
                        <div class="activity-log__empty">
                            Belum ada aktivitas yang tercatat.
                        </div>
                    @endforelse
                </div>
            </div>

            <div class="insight-card insight-card--soft">
                <div class="insight-card__head">
                    <div>
                        <span class="insight-card__eyebrow">Login Operator</span>
                        <h4>Log Akses Operator</h4>
                    </div>
                </div>

                <div class="login-log-list" id="operator-login-log-list">
                    @forelse($operatorLoginLogs as $login)
                        <article class="login-log-card">
                            <div class="login-log-card__head">
                                <div class="login-log-card__identity">
                                    <strong>{{ $login['actor_name'] }}</strong>
                                    @include('partials.operator-status-badge', ['status' => $login['status_validasi'] ?? 'pending'])
                                </div>
                                <span>{{ $login['time_human'] ?? '-' }} · {{ $login['time'] ?? '-' }}</span>
                            </div>
                            <div class="login-log-card__grid">
                                <div><small>Browser</small><strong>{{ $login['browser'] }}</strong></div>
                                <div><small>IP</small><strong>{{ $login['ip_address'] }}</strong></div>
                                <div><small>Spek Perangkat</small><strong>{{ $login['platform'] }} · {{ $login['device'] }}</strong></div>
                                <div><small>Dari Mana Login</small><strong>{{ $login['origin'] }}</strong></div>
                            </div>
                        </article>
                    @empty
                        <div class="activity-log__empty">Belum ada log login operator.</div>
                    @endforelse
                </div>
            </div>
        </section>

        <section class="chart-grid">
            <div class="chart-card">
                <div class="chart-card__head">
                    <div>
                        <span class="insight-card__eyebrow">Statistik Mahasiswa</span>
                        <h4>Jumlah Mahasiswa Berdasarkan Jenis Kelamin</h4>
                    </div>
                </div>
                <div class="chart-card__body">
                    <canvas id="studentGenderChart" height="280"></canvas>
                </div>
                <div class="chart-card__summary">
                    <div class="chart-card__total">
                        <span>Total Mahasiswa</span>
                        <strong id="studentGenderTotal">{{ $studentGenderChart['total'] ?? 0 }}</strong>
                    </div>
                    <div class="chart-card__chips" id="studentGenderSummary">
                        @forelse(($studentGenderChart['items'] ?? []) as $index => $item)
                            <div class="chart-chip chart-chip--{{ ['ocean', 'violet', 'amber', 'emerald'][$index % 4] }}">
                                <span>{{ $item['label'] }}</span>
                                <strong>{{ $item['count'] }} · {{ number_format((float) $item['percentage'], 1) }}%</strong>
                            </div>
                        @empty
                            <div class="chart-chip chart-chip--neutral">
                                <span>Belum ada data</span>
                                <strong>0 · 0%</strong>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>

            <div class="chart-card">
                <div class="chart-card__head">
                    <div>
                        <span class="insight-card__eyebrow">Statistik Dosen</span>
                        <h4>Jumlah Dosen Berdasarkan Perguruan Tinggi</h4>
                    </div>
                </div>
                <div class="chart-card__body">
                    <canvas id="dosenPerguruanTinggiChart" height="280"></canvas>
                </div>
                <div class="chart-card__summary">
                    <div class="chart-card__total">
                        <span>Total Dosen</span>
                        <strong id="dosenPerguruanTinggiTotal">{{ $dosenPerPtChart['total'] ?? 0 }}</strong>
                    </div>
                    <div class="chart-card__chips" id="dosenPerguruanTinggiSummary">
                        @forelse(($dosenPerPtChart['items'] ?? []) as $index => $item)
                            <div class="chart-chip chart-chip--{{ ['emerald', 'ocean', 'amber', 'slate'][$index % 4] }}">
                                <span>{{ $item['label'] }}</span>
                                <strong>{{ $item['count'] }} · {{ number_format((float) $item['percentage'], 1) }}%</strong>
                            </div>
                        @empty
                            <div class="chart-chip chart-chip--neutral">
                                <span>Belum ada data</span>
                                <strong>0 · 0%</strong>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </section>
    @else
        <section class="dashboard-panels dashboard-panels--operator">
            <div class="insight-card">
                <div class="insight-card__head">
                    <div>
                        <span class="insight-card__eyebrow">Aktivitas Saya</span>
                        <h4>Ringkasan Hari Ini</h4>
                    </div>
                    <span class="insight-card__pill">Realtime operator</span>
                </div>

                <div class="operator-activity-grid">
                    <div class="operator-activity-tile">
                        <span>Total Aktivitas</span>
                        <strong id="operator-today-total">{{ $todayActivity['total'] ?? 0 }}</strong>
                        <small>Semua aksi operator hari ini</small>
                    </div>
                    <div class="operator-activity-tile operator-activity-tile--emerald">
                        <span>Tambah Data</span>
                        <strong id="operator-today-created">{{ $todayActivity['created'] ?? 0 }}</strong>
                        <small>Aktivitas create hari ini</small>
                    </div>
                    <div class="operator-activity-tile operator-activity-tile--ocean">
                        <span>Ubah Data</span>
                        <strong id="operator-today-updated">{{ $todayActivity['updated'] ?? 0 }}</strong>
                        <small>Aktivitas update hari ini</small>
                    </div>
                    <div class="operator-activity-tile operator-activity-tile--slate">
                        <span>Hapus Data</span>
                        <strong id="operator-today-deleted">{{ $todayActivity['deleted'] ?? 0 }}</strong>
                        <small>Aktivitas delete hari ini</small>
                    </div>
                </div>
            </div>

            <div class="insight-card insight-card--soft">
                <div class="insight-card__head">
                    <div>
                        <span class="insight-card__eyebrow">Akses Cepat</span>
                        <h4>Langkah Operator</h4>
                    </div>
                </div>

                <div class="operator-summary">
                    <div class="operator-summary__item">
                        <span>Aktivitas terakhir</span>
                        <strong id="operator-last-activity">{{ $todayActivity['last_activity'] ?? 'Belum ada aktivitas hari ini' }}</strong>
                    </div>
                </div>

                <div class="quick-links quick-links--operator mt-3">
                    <a href="{{ route('admin.dosen.create') }}" class="quick-links__item quick-links__item--ocean">
                        <i class="fas fa-plus-circle"></i>
                        <span>Tambah Dosen</span>
                    </a>
                    <a href="{{ route('admin.mahasiswa.create') }}" class="quick-links__item quick-links__item--emerald">
                        <i class="fas fa-user-plus"></i>
                        <span>Tambah Mahasiswa</span>
                    </a>
                    <a href="{{ route('admin.dosen.index') }}" class="quick-links__item quick-links__item--amber">
                        <i class="fas fa-chalkboard-teacher"></i>
                        <span>Lihat Data Dosen</span>
                    </a>
                    <a href="{{ route('admin.mahasiswa.index') }}" class="quick-links__item quick-links__item--violet">
                        <i class="fas fa-user-graduate"></i>
                        <span>Lihat Data Mahasiswa</span>
                    </a>
                </div>
            </div>
        </section>
    @endif
</div>
@endsection

@section('scripts')
<script src="{{ asset('adminlte/plugins/chart.js/Chart.min.js') }}"></script>
<script>
    const studentGenderChartState = @json($studentGenderChart);
    const dosenPerPtChartState = @json($dosenPerPtChart);
    let studentGenderChartInstance = null;
    let dosenPerguruanTinggiChartInstance = null;

    function escapeHtml(value = '') {
        return String(value)
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function renderActivityLogs(logs = []) {
        const container = document.getElementById('activity-log');
        if (!container) return;

        if (!logs.length) {
            container.innerHTML = '<div class="activity-log__empty">Belum ada aktivitas yang tercatat.</div>';
            return;
        }

        container.innerHTML = logs.map((log) => {
            const role = log.actor_role === 'admin' ? 'admin' : 'operator';
            const icon = role === 'admin' ? 'fa-user-shield' : 'fa-user-check';

            return `
                <article class="activity-log__item">
                    <div class="activity-log__icon activity-log__icon--${role}">
                        <i class="fas ${icon}"></i>
                    </div>
                    <div class="activity-log__content">
                        <div class="activity-log__meta">
                            <strong>${escapeHtml(log.actor_name ?? 'Sistem')}</strong>
                            <span>${escapeHtml(log.module ?? '-')}</span>
                        </div>
                        <p class="activity-log__description mb-1">${escapeHtml(log.description ?? '-')}</p>
                        <div class="activity-log__time">${escapeHtml(log.time_human ?? '-')} · ${escapeHtml(log.time ?? '-')}</div>
                    </div>
                </article>
            `;
        }).join('');
    }

    function renderOperatorLoginLogs(logs = []) {
        const container = document.getElementById('operator-login-log-list');
        if (!container) return;

        if (!logs.length) {
            container.innerHTML = '<div class="activity-log__empty">Belum ada log login operator.</div>';
            return;
        }

        const renderStatusBadge = (status) => {
            const normalized = status === 'approved' ? 'approved' : (status === 'rejected' ? 'rejected' : 'pending');
            const label = normalized === 'approved' ? 'Aktif' : (normalized === 'rejected' ? 'Ditolak' : 'Menunggu Persetujuan');
            const icon = normalized === 'approved' ? 'fas fa-user-check' : (normalized === 'rejected' ? 'fas fa-user-times' : 'fas fa-user-clock');
            const tone = normalized === 'approved' ? 'success' : (normalized === 'rejected' ? 'danger' : 'warning');

            return `<span class="operator-status-badge operator-status-badge--${tone}"><i class="${icon} mr-2"></i><span>${label}</span></span>`;
        };

        container.innerHTML = logs.map((log) => `
            <article class="login-log-card">
                <div class="login-log-card__head">
                    <div class="login-log-card__identity">
                        <strong>${escapeHtml(log.actor_name ?? 'Operator')}</strong>
                        ${renderStatusBadge(log.status_validasi)}
                    </div>
                    <span>${escapeHtml(log.time_human ?? '-')} · ${escapeHtml(log.time ?? '-')}</span>
                </div>
                <div class="login-log-card__grid">
                    <div><small>Browser</small><strong>${escapeHtml(log.browser ?? '-')}</strong></div>
                    <div><small>IP</small><strong>${escapeHtml(log.ip_address ?? '-')}</strong></div>
                    <div><small>Spek Perangkat</small><strong>${escapeHtml(log.platform ?? '-')} · ${escapeHtml(log.device ?? '-')}</strong></div>
                    <div><small>Dari Mana Login</small><strong>${escapeHtml(log.origin ?? '-')}</strong></div>
                </div>
            </article>
        `).join('');
    }

    function renderStudentGenderChart(payload = {}) {
        const canvas = document.getElementById('studentGenderChart');
        if (!canvas || typeof Chart === 'undefined') return;

        const labels = payload.labels || [];
        const data = payload.data || [];

        if (studentGenderChartInstance) {
            studentGenderChartInstance.destroy();
        }

        studentGenderChartInstance = new Chart(canvas, {
            type: 'doughnut',
            data: {
                labels: labels.length ? labels : ['Belum ada data'],
                datasets: [{
                    data: data.length ? data : [1],
                    backgroundColor: labels.length ? ['#118ab2', '#5563c1', '#f59e0b', '#0f9f7a'] : ['#dbe7f1'],
                    borderColor: '#ffffff',
                    borderWidth: 4,
                    hoverOffset: 10,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    position: 'bottom',
                    labels: {
                        boxWidth: 14,
                        fontColor: '#4f6477',
                    }
                },
                title: {
                    display: true,
                    text: 'Komposisi Mahasiswa',
                    fontSize: 16,
                    fontColor: '#355067',
                },
                tooltips: {
                    callbacks: {
                        label: function (tooltipItem, chartData) {
                            const label = chartData.labels[tooltipItem.index] || '';
                            const value = chartData.datasets[0].data[tooltipItem.index] || 0;
                            return `${label}: ${value}`;
                        }
                    }
                }
            }
        });

        renderChartSummary('studentGenderTotal', 'studentGenderSummary', payload.items || [], ['ocean', 'violet', 'amber', 'emerald'], payload.total || 0);
    }

    function renderDosenPerguruanTinggiChart(payload = {}) {
        const canvas = document.getElementById('dosenPerguruanTinggiChart');
        if (!canvas || typeof Chart === 'undefined') return;

        const labels = payload.labels || [];
        const data = payload.data || [];

        if (dosenPerguruanTinggiChartInstance) {
            dosenPerguruanTinggiChartInstance.destroy();
        }

        dosenPerguruanTinggiChartInstance = new Chart(canvas, {
            type: 'bar',
            data: {
                labels: labels.length ? labels : ['Belum ada data'],
                datasets: [{
                    label: 'Jumlah Dosen',
                    data: data.length ? data : [0],
                    backgroundColor: [
                        'rgba(15, 159, 122, 0.88)',
                        'rgba(17, 138, 178, 0.84)',
                        'rgba(245, 158, 11, 0.84)',
                        'rgba(71, 85, 105, 0.84)',
                        'rgba(85, 99, 193, 0.84)',
                        'rgba(15, 159, 122, 0.7)',
                        'rgba(17, 138, 178, 0.68)',
                        'rgba(245, 158, 11, 0.68)',
                    ],
                    borderColor: [
                        '#0f9f7a',
                        '#118ab2',
                        '#f59e0b',
                        '#475569',
                        '#5563c1',
                        '#0f9f7a',
                        '#118ab2',
                        '#f59e0b',
                    ],
                    borderWidth: 1.5,
                    borderRadius: 10,
                    maxBarThickness: 46,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend: {
                    display: true,
                    position: 'top',
                    labels: {
                        boxWidth: 14,
                        fontColor: '#4f6477',
                    }
                },
                title: {
                    display: true,
                    text: 'Distribusi Dosen per Perguruan Tinggi',
                    fontSize: 16,
                    fontColor: '#355067',
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true,
                            precision: 0,
                            fontColor: '#5f7386',
                        },
                        gridLines: {
                            color: 'rgba(219, 231, 241, 0.95)',
                        }
                    }],
                    xAxes: [{
                        ticks: {
                            fontColor: '#5f7386',
                            autoSkip: false,
                            callback: function (value) {
                                return value.length > 18 ? value.substring(0, 18) + '...' : value;
                            }
                        },
                        gridLines: {
                            display: false,
                        }
                    }]
                }
            }
        });

        renderChartSummary('dosenPerguruanTinggiTotal', 'dosenPerguruanTinggiSummary', payload.items || [], ['emerald', 'ocean', 'amber', 'slate'], payload.total || 0);
    }

    function renderChartSummary(totalId, containerId, items = [], palette = [], total = 0) {
        const totalEl = document.getElementById(totalId);
        const container = document.getElementById(containerId);

        if (totalEl) {
            totalEl.textContent = total ?? 0;
        }

        if (!container) {
            return;
        }

        if (!items.length) {
            container.innerHTML = `
                <div class="chart-chip chart-chip--neutral">
                    <span>Belum ada data</span>
                    <strong>0 · 0%</strong>
                </div>
            `;
            return;
        }

        container.innerHTML = items.map((item, index) => `
            <div class="chart-chip chart-chip--${palette[index % palette.length] || 'neutral'}">
                <span>${escapeHtml(item.label ?? '-')}</span>
                <strong>${escapeHtml(item.count ?? 0)} · ${escapeHtml(Number(item.percentage ?? 0).toFixed(1))}%</strong>
            </div>
        `).join('');
    }

    async function loadDashboardRealtime() {
        const statusEl = document.getElementById('realtime-status');

        try {
            if (statusEl) statusEl.textContent = 'Memuat...';

            const response = await fetch("{{ route('admin.dashboard.realtime') }}", {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            });

            if (!response.ok) {
                throw new Error('Gagal mengambil data realtime');
            }

            const data = await response.json();

            const mappings = {
                'user-name': data.user,
                'dashboard-greeting': data.greeting,
                'total-pengumuman': data.total_pengumuman,
                'pengumuman-publish': data.pengumuman_publish,
                'total-dosen': data.total_dosen,
                'total-mahasiswa': data.total_mahasiswa,
                'total-master-data': data.total_master_data,
                'summary-dosen': data.total_dosen,
                'summary-mahasiswa': data.total_mahasiswa,
                'last-update': data.updated_at,
                'operator-today-total': data.today_activity?.total ?? 0,
                'operator-today-created': data.today_activity?.created ?? 0,
                'operator-today-updated': data.today_activity?.updated ?? 0,
                'operator-today-deleted': data.today_activity?.deleted ?? 0,
                'operator-last-activity': data.today_activity?.last_activity ?? 'Belum ada aktivitas hari ini',
            };

            Object.entries(mappings).forEach(([id, value]) => {
                const el = document.getElementById(id);
                if (el && value !== undefined) el.textContent = value ?? '-';
            });

            renderActivityLogs(data.activity_logs || []);
            renderOperatorLoginLogs(data.operator_login_logs || []);
            renderStudentGenderChart(data.student_gender_chart || {});
            renderDosenPerguruanTinggiChart(data.dosen_per_pt_chart || {});

            if (statusEl) statusEl.textContent = 'Realtime aktif';
        } catch (error) {
            console.error('Realtime dashboard error:', error);
            if (statusEl) statusEl.textContent = 'Koneksi terputus';
        }
    }

    if (@json($isAdmin)) {
        renderStudentGenderChart(studentGenderChartState);
        renderDosenPerguruanTinggiChart(dosenPerPtChartState);
    }
    loadDashboardRealtime();
    setInterval(loadDashboardRealtime, 5000);
</script>

<style>
    .dashboard-shell { display: grid; gap: 1.5rem; }
    .hero-panel {
        display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center;
        padding: 1.75rem 1.85rem; border-radius: 28px; color: #163046;
        background: radial-gradient(circle at top right, rgba(17, 138, 178, 0.18), transparent 30%), linear-gradient(135deg, #fefefe 0%, #edf8ff 52%, #f3fcfb 100%);
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.07);
    }
    .hero-panel__eyebrow, .insight-card__eyebrow {
        display: inline-block; margin-bottom: .55rem; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #118ab2;
    }
    .hero-panel h2 { margin-bottom: .35rem; font-weight: 800; }
    .hero-panel p { margin-bottom: 0; max-width: 620px; color: #587082; }
    .hero-panel__meta { display: flex; gap: .75rem; flex-wrap: wrap; }
    .hero-panel__badge {
        min-width: 170px; padding: .85rem 1rem; border-radius: 18px; background: rgba(255,255,255,.72); border: 1px solid rgba(17, 138, 178, .1);
    }
    .hero-panel__badge span { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #698093; }
    .hero-panel__badge strong { display: block; margin-top: .2rem; color: #17324c; }
    .stats-grid { display: grid; gap: 1rem; grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .stat-card {
        position: relative; overflow: hidden; padding: 1.25rem; border-radius: 24px; background: #fff;
        border: 1px solid #e7edf5; box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
    }
    .stat-card__icon {
        width: 48px; height: 48px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;
        margin-bottom: .9rem; font-size: 1.1rem;
    }
    .stat-card__label { color: #6c7a89; font-size: .92rem; }
    .stat-card__value { margin: .35rem 0; font-size: 2rem; font-weight: 800; color: #1c2f41; }
    .stat-card__note { color: #7a8794; font-size: .86rem; }
    .stat-card--ocean .stat-card__icon { background: rgba(17, 138, 178, .12); color: #118ab2; }
    .stat-card--emerald .stat-card__icon { background: rgba(6, 214, 160, .12); color: #089970; }
    .stat-card--amber .stat-card__icon { background: rgba(255, 183, 3, .14); color: #c27b00; }
    .stat-card--violet .stat-card__icon { background: rgba(90, 103, 216, .12); color: #5563c1; }
    .stat-card--slate .stat-card__icon { background: rgba(71, 85, 105, .12); color: #475569; }
    .dashboard-panels { display: grid; gap: 1rem; grid-template-columns: 2fr 1fr; }
    .insight-card {
        padding: 1.5rem; border-radius: 24px; background: #fff; border: 1px solid #e7edf5;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
    }
    .insight-card--soft { background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%); }
    .insight-card__head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; }
    .insight-card__head h4 { margin: 0; font-weight: 700; color: #1f2d3d; }
    .insight-card__pill {
        display: inline-flex; align-items: center; padding: .45rem .8rem; border-radius: 999px; background: #eef7fb; color: #118ab2; font-size: .85rem; font-weight: 700;
    }
    .activity-log { display: grid; gap: .9rem; max-height: 520px; overflow: auto; padding-right: .35rem; }
    .activity-log__item {
        display: grid;
        grid-template-columns: 52px 1fr;
        gap: .9rem;
        padding: 1rem;
        border-radius: 18px;
        border: 1px solid #e6edf5;
        background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
    }
    .activity-log__icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
    }
    .activity-log__icon--admin { background: rgba(17, 138, 178, .12); color: #118ab2; }
    .activity-log__icon--operator { background: rgba(15, 159, 122, .12); color: #0f9f7a; }
    .activity-log__meta {
        display: flex;
        align-items: center;
        gap: .6rem;
        flex-wrap: wrap;
        margin-bottom: .35rem;
    }
    .activity-log__meta strong { color: #1f2d3d; }
    .activity-log__meta span {
        display: inline-flex;
        align-items: center;
        padding: .2rem .55rem;
        border-radius: 999px;
        background: #eef5fb;
        color: #587082;
        font-size: .78rem;
        font-weight: 700;
    }
    .activity-log__description { color: #334a5e; }
    .activity-log__time { font-size: .82rem; color: #748396; }
    .activity-log__empty {
        padding: 1.1rem 1.2rem;
        border-radius: 18px;
        background: #f8fbff;
        border: 1px dashed #dbe7f1;
        color: #6c7a89;
        text-align: center;
    }
    .operator-summary { display: grid; gap: .85rem; }
    .operator-summary__item {
        display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.1rem; border-radius: 18px;
        background: #f8fbff; border: 1px solid #e4edf7;
    }
    .operator-summary__item span { color: #6c7a89; }
    .operator-summary__item strong { color: #1f2d3d; }
    .login-log-list {
        display: grid;
        gap: .85rem;
        max-height: 520px;
        overflow: auto;
        padding-right: .25rem;
    }
    .login-log-card {
        padding: 1rem;
        border-radius: 18px;
        background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
        border: 1px solid #e5edf5;
    }
    .login-log-card__head {
        display: flex;
        justify-content: space-between;
        gap: .75rem;
        align-items: center;
        margin-bottom: .8rem;
    }
    .login-log-card__identity {
        display: grid;
        gap: .4rem;
    }
    .login-log-card__head strong {
        color: #1f2d3d;
        font-weight: 800;
    }
    .login-log-card__head span {
        color: #6c7a89;
        font-size: .82rem;
        white-space: nowrap;
    }
    .login-log-card__grid {
        display: grid;
        gap: .8rem;
    }
    .login-log-card__grid div {
        display: grid;
        gap: .18rem;
        padding: .65rem .75rem;
        border-radius: 14px;
        background: #f6faff;
        border: 1px solid #e2ebf4;
    }
    .login-log-card__grid small {
        color: #7a8794;
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 700;
    }
    .login-log-card__grid strong {
        color: #243444;
        font-size: .88rem;
        line-height: 1.45;
    }
    .chart-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .chart-card {
        padding: 1.5rem;
        border-radius: 24px;
        background: #fff;
        border: 1px solid #e7edf5;
        box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
    }
    .chart-card__head {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        align-items: center;
        margin-bottom: 1rem;
    }
    .chart-card__head h4 {
        margin: 0;
        font-weight: 700;
        color: #1f2d3d;
    }
    .chart-card__body {
        position: relative;
        min-height: 320px;
    }
    .chart-card__summary {
        display: grid;
        gap: 1rem;
        margin-top: 1rem;
    }
    .chart-card__total {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .95rem 1rem;
        border-radius: 18px;
        background: linear-gradient(180deg, #f8fbff 0%, #f1f7fb 100%);
        border: 1px solid #dfeaf3;
    }
    .chart-card__total span {
        color: #6c7a89;
        font-weight: 600;
    }
    .chart-card__total strong {
        font-size: 1.4rem;
        color: #1f2d3d;
        font-weight: 800;
    }
    .chart-card__chips {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
    }
    .chart-chip {
        min-width: 170px;
        flex: 1 1 170px;
        display: grid;
        gap: .25rem;
        padding: .85rem .95rem;
        border-radius: 18px;
        border: 1px solid transparent;
    }
    .chart-chip span {
        font-size: .82rem;
        color: #5f7386;
        font-weight: 700;
    }
    .chart-chip strong {
        color: #1f2d3d;
        font-size: .95rem;
        font-weight: 800;
    }
    .chart-chip--ocean { background: rgba(17, 138, 178, .09); border-color: rgba(17, 138, 178, .16); }
    .chart-chip--emerald { background: rgba(15, 159, 122, .09); border-color: rgba(15, 159, 122, .16); }
    .chart-chip--amber { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .18); }
    .chart-chip--violet { background: rgba(85, 99, 193, .09); border-color: rgba(85, 99, 193, .16); }
    .chart-chip--slate { background: rgba(71, 85, 105, .08); border-color: rgba(71, 85, 105, .14); }
    .chart-chip--neutral { background: #f8fbff; border-color: #e3ebf2; }
    .dashboard-panels--operator { grid-template-columns: 1.35fr 1fr; }
    .operator-activity-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
    .operator-activity-tile {
        padding: 1rem 1.05rem;
        border-radius: 20px;
        background: linear-gradient(180deg, #fbfdff 0%, #f4f8fc 100%);
        border: 1px solid #dfe8f1;
        display: grid;
        gap: .3rem;
    }
    .operator-activity-tile span {
        color: #6c7a89;
        font-size: .84rem;
        font-weight: 700;
    }
    .operator-activity-tile strong {
        color: #1f2d3d;
        font-size: 1.9rem;
        font-weight: 800;
        line-height: 1;
    }
    .operator-activity-tile small { color: #7a8794; }
    .operator-activity-tile--emerald { background: rgba(15, 159, 122, .08); border-color: rgba(15, 159, 122, .16); }
    .operator-activity-tile--ocean { background: rgba(17, 138, 178, .08); border-color: rgba(17, 138, 178, .16); }
    .operator-activity-tile--slate { background: rgba(71, 85, 105, .08); border-color: rgba(71, 85, 105, .14); }
    .quick-links {
        display: grid;
        gap: .85rem;
    }
    .quick-links--operator {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .quick-links__item {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .95rem 1rem;
        border-radius: 18px;
        color: #1f2d3d;
        background: #f8fbff;
        border: 1px solid #e3edf7;
        font-weight: 700;
    }
    .quick-links__item i {
        width: 42px;
        height: 42px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #eaf6fc;
        color: #118ab2;
    }
    .quick-links__item:hover { text-decoration: none; transform: translateY(-1px); }
    .quick-links__item--ocean { background: rgba(17, 138, 178, .08); border-color: rgba(17, 138, 178, .14); }
    .quick-links__item--ocean i { background: rgba(17, 138, 178, .14); color: #118ab2; }
    .quick-links__item--emerald { background: rgba(15, 159, 122, .08); border-color: rgba(15, 159, 122, .14); }
    .quick-links__item--emerald i { background: rgba(15, 159, 122, .14); color: #0f9f7a; }
    .quick-links__item--amber { background: rgba(245, 158, 11, .09); border-color: rgba(245, 158, 11, .16); }
    .quick-links__item--amber i { background: rgba(245, 158, 11, .16); color: #c27b00; }
    .quick-links__item--violet { background: rgba(85, 99, 193, .08); border-color: rgba(85, 99, 193, .14); }
    .quick-links__item--violet i { background: rgba(85, 99, 193, .14); color: #5563c1; }
    @media (max-width: 1199.98px) {
        .stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .dashboard-panels { grid-template-columns: 1fr; }
        .chart-grid { grid-template-columns: 1fr; }
        .quick-links--operator { grid-template-columns: 1fr; }
    }
    @media (max-width: 767.98px) {
        .stats-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
        .activity-log__item { grid-template-columns: 44px 1fr; }
        .activity-log__icon {
            width: 44px;
            height: 44px;
            border-radius: 14px;
        }
        .login-log-card__head {
            align-items: flex-start;
            flex-direction: column;
        }
        .operator-activity-grid { grid-template-columns: 1fr; }
    }
</style>
@endsection