<?php
/**
 * riwayat.php - Halaman Riwayat Pesanan (Supir)
 * DIPERBAIKI - Dengan fitur selesaikan perjalanan dan pencairan dana
 */
include __DIR__ . '/../layouts/header.php';
$activeMenu = 'riwayat';

if (!isset($unreadCount)) $unreadCount = 0;
if (!isset($pesanan)) $pesanan = [];
?>

<div class="dashboard-wrapper">
    <?php include __DIR__ . '/../layouts/sidebar_supir.php'; ?>

    <main class="main-content">
        <div class="content-header">
            <div class="header-left">
                <h2>📋 Riwayat Pesanan</h2>
                <p>Semua pesanan untuk kapal Anda. Anda dapat melihat status dan detail setiap pesanan.</p>
            </div>
            <div class="header-right">
                <span class="badge-status <?= count(array_filter($pesanan, fn($p) => $p['status_pesanan'] == 'pending')) > 0 ? 'warning' : 'success' ?>">
                    <i class="fas fa-circle"></i>
                    <?= count(array_filter($pesanan, fn($p) => $p['status_pesanan'] == 'pending')) ?> Pending
                </span>
            </div>
        </div>

        <!-- FLASH MESSAGE -->
        <?php if(isset($_SESSION['flash_message'])): ?>
            <div class="alert alert-success">
                <i class="fas fa-check-circle alert-icon"></i>
                <?= htmlspecialchars($_SESSION['flash_message']) ?>
                <button class="alert-close" onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
                <?php unset($_SESSION['flash_message']); ?>
            </div>
        <?php endif; ?>
        <?php if(isset($_SESSION['error_message'])): ?>
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-circle alert-icon"></i>
                <?= htmlspecialchars($_SESSION['error_message']) ?>
                <button class="alert-close" onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
                <?php unset($_SESSION['error_message']); ?>
            </div>
        <?php endif; ?>

        <!-- ===== STATISTIK ===== -->
        <?php if(!empty($pesanan)): 
            $totalPending = count(array_filter($pesanan, fn($p) => $p['status_pesanan'] == 'pending'));
            $totalConfirmed = count(array_filter($pesanan, fn($p) => $p['status_pesanan'] == 'confirmed'));
            $totalCompleted = count(array_filter($pesanan, fn($p) => $p['status_pesanan'] == 'completed'));
            $totalCancelled = count(array_filter($pesanan, fn($p) => $p['status_pesanan'] == 'cancelled'));
            $totalLunas = count(array_filter($pesanan, fn($p) => $p['status_pembayaran'] == 'lunas'));
        ?>
            <div class="stats-mini">
                <div class="stat-mini" style="border-color:#3b82f6;">
                    <span class="stat-mini-number" style="color:#3b82f6;"><?= count($pesanan) ?></span>
                    <span class="stat-mini-label">Total Pesanan</span>
                </div>
                <div class="stat-mini" style="border-color:#f59e0b;">
                    <span class="stat-mini-number" style="color:#f59e0b;"><?= $totalPending ?></span>
                    <span class="stat-mini-label">⏳ Pending</span>
                </div>
                <div class="stat-mini" style="border-color:#10b981;">
                    <span class="stat-mini-number" style="color:#10b981;"><?= $totalConfirmed ?></span>
                    <span class="stat-mini-label">✅ Dikonfirmasi</span>
                </div>
                <div class="stat-mini" style="border-color:#8b5cf6;">
                    <span class="stat-mini-number" style="color:#8b5cf6;"><?= $totalCompleted ?></span>
                    <span class="stat-mini-label">🎉 Selesai</span>
                </div>
                <div class="stat-mini" style="border-color:#ef4444;">
                    <span class="stat-mini-number" style="color:#ef4444;"><?= $totalCancelled ?></span>
                    <span class="stat-mini-label">❌ Dibatalkan</span>
                </div>
                <div class="stat-mini" style="border-color:#22c55e;">
                    <span class="stat-mini-number" style="color:#22c55e;"><?= $totalLunas ?></span>
                    <span class="stat-mini-label">💰 Lunas</span>
                </div>
            </div>
        <?php endif; ?>

        <!-- ===== DAFTAR PESANAN ===== -->
        <?php if(empty($pesanan)): ?>
            <div class="empty-state">
                <div class="empty-icon">📭</div>
                <h3>Belum Ada Pesanan</h3>
                <p>Belum ada pesanan untuk kapal Anda. Segera promosikan kapal Anda agar wisatawan tertarik.</p>
                <a href="?page=supir&action=kelolaKapal" class="btn btn-primary" style="margin-top:1rem;">
                    <i class="fas fa-ship"></i> Kelola Kapal
                </a>
            </div>
        <?php else: ?>
            <div class="table-section">
                <div class="table-header">
                    <h3>📋 Daftar Pesanan</h3>
                    <div class="table-actions">
                        <span class="table-count">Total: <?= count($pesanan) ?> pesanan</span>
                        <div class="filter-group">
                            <select id="filterStatus" onchange="filterTable()" class="filter-select">
                                <option value="all">Semua Status</option>
                                <option value="pending">Pending</option>
                                <option value="confirmed">Dikonfirmasi</option>
                                <option value="completed">Selesai</option>
                                <option value="cancelled">Dibatalkan</option>
                            </select>
                            <input type="text" id="searchInput" placeholder="Cari kode/nama..." onkeyup="searchTable()" class="filter-input">
                        </div>
                    </div>
                </div>
                <div class="table-wrapper">
                    <table id="riwayatTable">
                        <thead>
                            <tr>
                                <th><i class="fas fa-hashtag"></i> #</th>
                                <th><i class="fas fa-qrcode"></i> Kode</th>
                                <th><i class="fas fa-user"></i> Wisatawan</th>
                                <th><i class="fas fa-ship"></i> Kapal</th>
                                <th><i class="fas fa-calendar-alt"></i> Tanggal</th>
                                <th><i class="fas fa-clock"></i> Durasi</th>
                                <th><i class="fas fa-money-bill-wave"></i> Total</th>
                                <th><i class="fas fa-credit-card"></i> Bayar</th>
                                <th><i class="fas fa-info-circle"></i> Status</th>
                                <th><i class="fas fa-cog"></i> Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach($pesanan as $i => $p): 
                                $badge = match($p['status_pesanan']) {
                                    'pending' => 'badge-pending',
                                    'confirmed' => 'badge-confirmed',
                                    'completed' => 'badge-completed',
                                    'cancelled' => 'badge-danger',
                                    default => 'badge-pending'
                                };
                                $statusText = match($p['status_pesanan']) {
                                    'pending' => '⏳ Pending',
                                    'confirmed' => '✅ Dikonfirmasi',
                                    'completed' => '🎉 Selesai',
                                    'cancelled' => '❌ Dibatalkan',
                                    default => '⏳ Pending'
                                };
                                
                                $paymentBadge = match($p['status_pembayaran']) {
                                    'belum_bayar' => 'badge-payment-pending',
                                    'menunggu_konfirmasi' => 'badge-payment-waiting',
                                    'lunas' => 'badge-payment-lunas',
                                    'gagal' => 'badge-payment-failed',
                                    default => 'badge-payment-pending'
                                };
                                $paymentText = match($p['status_pembayaran']) {
                                    'belum_bayar' => 'Belum Bayar',
                                    'menunggu_konfirmasi' => '⏳ Menunggu',
                                    'lunas' => '✅ Lunas',
                                    'gagal' => '❌ Gagal',
                                    default => 'Belum Bayar'
                                };
                                
                                $isShared = ($p['jenis_booking'] ?? '') == 'shared';
                                $canComplete = ($p['status_pesanan'] == 'confirmed' && $p['status_pembayaran'] == 'lunas');
                            ?>
                                <tr class="status-row status-<?= $p['status_pesanan'] ?>">
                                    <td><?= $i+1 ?></td>
                                    <td>
                                        <strong><?= htmlspecialchars($p['kode_pesanan']) ?></strong>
                                        <?php if($isShared): ?>
                                            <br><span class="badge badge-shared">🔄 Shared</span>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <div style="display:flex; flex-direction:column;">
                                            <span style="font-weight:600;"><?= htmlspecialchars($p['wisatawan'] ?? '-') ?></span>
                                            <?php if(!empty($p['no_hp'])): ?>
                                                <small style="color:var(--gray-400);">
                                                    <i class="fas fa-phone"></i> <?= htmlspecialchars($p['no_hp']) ?>
                                                </small>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                    <td>
                                        <div style="display:flex; flex-direction:column;">
                                            <span><?= htmlspecialchars($p['nama_kapal']) ?></span>
                                            <small style="color:var(--gray-400);">
                                                <i class="fas fa-tag"></i> <?= ucfirst($p['jenis_booking'] ?? 'private') ?>
                                            </small>
                                        </div>
                                    </td>
                                    <td>
                                        <div style="display:flex; flex-direction:column;">
                                            <span><?= date('d/m/Y', strtotime($p['tanggal_berangkat'] ?? $p['created_at'])) ?></span>
                                            <small style="color:var(--gray-400);">
                                                <i class="fas fa-clock"></i> <?= $p['durasi_jam'] ?? 0 ?> jam
                                            </small>
                                        </div>
                                    </td>
                                    <td><?= $p['durasi_jam'] ?? 0 ?> jam</td>
                                    <td style="font-weight:600; color:var(--primary);">
                                        Rp <?= number_format($p['total_harga'], 0, ',', '.') ?>
                                    </td>
                                    <td>
                                        <span class="badge <?= $paymentBadge ?>"><?= $paymentText ?></span>
                                    </td>
                                    <td><span class="badge <?= $badge ?>"><?= $statusText ?></span></td>
                                    <td>
                                        <div class="action-group">
                                            <a href="?page=supir&action=detailPesanan&id=<?= $p['id'] ?>" 
                                               class="btn btn-sm btn-info">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <?php if($canComplete): ?>
                                                <a href="?page=supir&action=selesaikanPerjalanan&id=<?= $p['id'] ?>" 
                                                   class="btn btn-sm btn-success" 
                                                   onclick="return confirm('✅ Yakin perjalanan ini sudah selesai?\n\n📌 Kode: <?= htmlspecialchars($p['kode_pesanan']) ?>\n👤 Wisatawan: <?= htmlspecialchars($p['wisatawan'] ?? '-') ?>\n💰 Total: Rp <?= number_format($p['total_harga'], 0, ',', '.') ?>\n\n⚠️ Dana akan segera dicairkan oleh admin setelah ini.')">
                                                    <i class="fas fa-check-circle"></i> Selesaikan
                                                </a>
                                            <?php endif; ?>
                                            <?php if($p['status_pesanan'] == 'pending'): ?>
                                                <a href="?page=supir&action=verifikasiPesanan&id=<?= $p['id'] ?>" 
                                                   class="btn btn-sm btn-warning">
                                                    <i class="fas fa-check"></i> Verifikasi
                                                </a>
                                            <?php endif; ?>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        <?php endif; ?>

        <!-- ===== INFORMASI SISTEM ESCROW ===== -->
        <div class="info-box">
            <div class="info-icon">💡</div>
            <div class="info-content">
                <h4><i class="fas fa-shield-alt"></i> Sistem Escrow</h4>
                <p>Dana pembayaran wisatawan ditahan oleh sistem (escrow) sampai perjalanan selesai.</p>
                <ul>
                    <li>✅ <strong>Perjalanan Selesai:</strong> Klik tombol "Selesaikan" untuk mengkonfirmasi perjalanan selesai.</li>
                    <li>💰 <strong>Pencairan Dana:</strong> Admin akan mencairkan dana setelah perjalanan selesai (dikurangi komisi).</li>
                    <li>📱 <strong>Notifikasi:</strong> Anda akan menerima notifikasi setiap kali ada perubahan status.</li>
                    <li>⏳ <strong>Proses:</strong> Dana cair dalam 1-3 hari kerja setelah perjalanan selesai.</li>
                </ul>
                <div class="info-note">
                    <i class="fas fa-info-circle"></i>
                    <span>Status <strong>"Lunas"</strong> berarti wisatawan sudah membayar dan dana ada di escrow.</span>
                </div>
            </div>
        </div>
    </main>
</div>

<script>
    // Filter tabel berdasarkan status
    function filterTable() {
        const filter = document.getElementById('filterStatus').value;
        const rows = document.querySelectorAll('#riwayatTable tbody tr');
        rows.forEach(row => {
            if (filter === 'all') {
                row.style.display = '';
            } else {
                if (row.classList.contains('status-' + filter)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            }
        });
    }

    // Search tabel berdasarkan kode atau nama wisatawan
    function searchTable() {
        const input = document.getElementById('searchInput').value.toLowerCase();
        const rows = document.querySelectorAll('#riwayatTable tbody tr');
        rows.forEach(row => {
            const text = row.textContent.toLowerCase();
            if (text.includes(input)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    }

    // Auto close flash messages
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.alert').forEach(alert => {
            setTimeout(() => {
                alert.style.transition = 'all 0.5s ease';
                alert.style.opacity = '0';
                alert.style.transform = 'translateY(-10px)';
                setTimeout(() => alert.style.display = 'none', 500);
            }, 5000);
        });
    });
</script>

<style>
    /* ============================================
       LAYOUT
       ============================================ */
    .dashboard-wrapper {
        display: flex;
        gap: 24px;
        max-width: 1200px;
        margin: 1.5rem auto 0;
        padding: 0 20px;
        width: 100%;
        flex: 1;
        align-items: flex-start;
    }

    .main-content {
        flex: 1;
        min-width: 0;
        background: #fff;
        border-radius: 14px;
        padding: 1.8rem;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        border: 1px solid var(--gray-200);
    }

    .content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .content-header h2 {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 0.2rem;
    }

    .content-header p {
        color: var(--gray-500);
        font-size: 0.95rem;
        margin: 0;
    }

    .badge-status {
        padding: 0.3rem 1rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        white-space: nowrap;
    }

    .badge-status.success {
        background: #d1fae5;
        color: #065f46;
    }

    .badge-status.warning {
        background: #fef3c7;
        color: #92400e;
    }

    /* ============================================
       ALERT
       ============================================ */
    .alert {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0.8rem 1.2rem;
        border-radius: 10px;
        margin-bottom: 1.2rem;
        border-left: 4px solid transparent;
        transition: all 0.5s ease;
    }
    .alert-success {
        background: #d1fae5;
        color: #065f46;
        border-left-color: #22c55e;
    }
    .alert-danger {
        background: #fee2e2;
        color: #991b1b;
        border-left-color: #ef4444;
    }
    .alert-icon {
        font-size: 1.2rem;
    }
    .alert-close {
        margin-left: auto;
        background: none;
        border: none;
        font-size: 1rem;
        cursor: pointer;
        color: inherit;
        opacity: 0.6;
        padding: 0 4px;
        transition: var(--transition);
    }
    .alert-close:hover {
        opacity: 1;
    }

    /* ============================================
       STATS MINI
       ============================================ */
    .stats-mini {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 0.8rem;
        margin-bottom: 1.5rem;
    }

    .stat-mini {
        background: #fff;
        border: 1px solid var(--gray-200);
        border-radius: 10px;
        padding: 0.8rem 1rem;
        text-align: center;
        border-top: 3px solid var(--primary);
        transition: var(--transition);
    }

    .stat-mini:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
    }

    .stat-mini .stat-mini-number {
        display: block;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--gray-900);
        line-height: 1.2;
    }

    .stat-mini .stat-mini-label {
        font-size: 0.7rem;
        color: var(--gray-500);
    }

    /* ============================================
       TABLE
       ============================================ */
    .table-section {
        margin-top: 0.5rem;
    }

    .table-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .table-header h3 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--gray-800);
        margin: 0;
    }

    .table-count {
        font-size: 0.85rem;
        color: var(--gray-500);
    }

    .table-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .filter-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .filter-select,
    .filter-input {
        padding: 0.3rem 0.6rem;
        border: 1px solid var(--gray-200);
        border-radius: 6px;
        font-size: 0.8rem;
        background: #fff;
        font-family: inherit;
        transition: var(--transition);
    }

    .filter-select:focus,
    .filter-input:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(15,59,94,0.08);
    }

    .table-wrapper {
        background: #fff;
        border-radius: 14px;
        overflow-x: auto;
        border: 1px solid var(--gray-200);
    }

    table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
        min-width: 900px;
    }

    table th {
        background: var(--gray-50);
        color: var(--gray-700);
        font-weight: 600;
        padding: 0.7rem 1rem;
        text-align: left;
        border-bottom: 2px solid var(--gray-200);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    table th i {
        margin-right: 0.2rem;
        opacity: 0.6;
    }

    table td {
        padding: 0.7rem 1rem;
        border-bottom: 1px solid var(--gray-100);
        vertical-align: middle;
    }

    table tr:hover td {
        background: var(--gray-50);
    }

    /* ============================================
       BADGE
       ============================================ */
    .badge {
        display: inline-flex;
        align-items: center;
        gap: 0.2rem;
        padding: 0.15rem 0.6rem;
        border-radius: 20px;
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .badge-pending {
        background: #fef3c7;
        color: #92400e;
    }

    .badge-confirmed {
        background: #dbeafe;
        color: #1e40af;
    }

    .badge-completed {
        background: #d1fae5;
        color: #065f46;
    }

    .badge-danger {
        background: #fee2e2;
        color: #991b1b;
    }

    .badge-private {
        background: #dbeafe;
        color: #1e40af;
    }

    .badge-shared {
        background: #fef3c7;
        color: #92400e;
    }

    .badge-payment-pending {
        background: #fef3c7;
        color: #92400e;
    }

    .badge-payment-waiting {
        background: #fef3c7;
        color: #d97706;
    }

    .badge-payment-lunas {
        background: #d1fae5;
        color: #065f46;
    }

    .badge-payment-failed {
        background: #fee2e2;
        color: #991b1b;
    }

    /* ============================================
       BUTTON
       ============================================ */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.25rem 0.6rem;
        border: none;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.7rem;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
        white-space: nowrap;
    }

    .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        text-decoration: none;
    }

    .btn-sm {
        padding: 0.2rem 0.5rem;
        font-size: 0.65rem;
    }

    .btn-primary {
        background: var(--primary);
        color: #fff;
    }

    .btn-primary:hover {
        background: var(--primary-light);
        color: #fff;
    }

    .btn-success {
        background: #22c55e;
        color: #fff;
    }

    .btn-success:hover {
        background: #16a34a;
        color: #fff;
    }

    .btn-warning {
        background: #f59e0b;
        color: #1e293b;
    }

    .btn-warning:hover {
        background: #d97706;
        color: #1e293b;
    }

    .btn-info {
        background: #3b82f6;
        color: #fff;
    }

    .btn-info:hover {
        background: #2563eb;
        color: #fff;
    }

    .action-group {
        display: flex;
        gap: 0.3rem;
        flex-wrap: wrap;
    }

    /* ============================================
       EMPTY STATE
       ============================================ */
    .empty-state {
        text-align: center;
        padding: 2.5rem 1.5rem;
        background: var(--gray-50);
        border-radius: 14px;
        border: 1px solid var(--gray-200);
    }

    .empty-state .empty-icon {
        font-size: 3.5rem;
        display: block;
        margin-bottom: 0.5rem;
    }

    .empty-state h3 {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--gray-800);
        margin-bottom: 0.2rem;
    }

    .empty-state p {
        color: var(--gray-500);
        font-size: 0.9rem;
        margin: 0;
    }

    /* ============================================
       INFO BOX
       ============================================ */
    .info-box {
        display: flex;
        gap: 1rem;
        padding: 1rem 1.2rem;
        background: #eff6ff;
        border-radius: 12px;
        border: 1px solid #bfdbfe;
        margin-top: 1.5rem;
    }

    .info-icon {
        font-size: 1.8rem;
        flex-shrink: 0;
    }

    .info-content h4 {
        font-size: 0.95rem;
        font-weight: 700;
        color: #1e40af;
        margin-bottom: 0.2rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .info-content p {
        font-size: 0.85rem;
        color: #1e40af;
        margin: 0;
    }

    .info-content ul {
        margin: 0.3rem 0 0 1.2rem;
        font-size: 0.85rem;
        color: #1e40af;
        padding-left: 0;
    }

    .info-content ul li {
        margin-bottom: 0.2rem;
    }

    .info-note {
        margin-top: 0.5rem;
        padding: 0.5rem 0.8rem;
        background: #dbeafe;
        border-radius: 6px;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.8rem;
        color: #1e40af;
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 992px) {
        .stats-mini {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (max-width: 768px) {
        .dashboard-wrapper {
            flex-direction: column;
            padding: 0 12px;
            margin-top: 1rem;
        }

        .main-content {
            padding: 1rem;
        }

        .content-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .stats-mini {
            grid-template-columns: repeat(2, 1fr);
        }

        .table-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .table-actions {
            width: 100%;
            flex-direction: column;
            align-items: stretch;
        }

        .filter-group {
            flex-direction: column;
            align-items: stretch;
        }

        .filter-select,
        .filter-input {
            width: 100%;
        }

        table {
            font-size: 0.8rem;
            min-width: 700px;
        }

        table th,
        table td {
            padding: 0.4rem 0.6rem;
        }

        .action-group {
            flex-direction: column;
        }

        .action-group .btn {
            width: 100%;
            justify-content: center;
        }

        .info-box {
            flex-direction: column;
        }
    }

    @media (max-width: 480px) {
        .main-content {
            padding: 0.8rem;
        }

        .stats-mini {
            grid-template-columns: 1fr 1fr;
        }

        .stat-mini .stat-mini-number {
            font-size: 1.1rem;
        }

        .empty-state {
            padding: 1.5rem 1rem;
        }

        .empty-state .empty-icon {
            font-size: 2.5rem;
        }

        table {
            font-size: 0.7rem;
            min-width: 600px;
        }

        table th,
        table td {
            padding: 0.3rem 0.4rem;
        }

        .btn {
            font-size: 0.6rem;
            padding: 0.15rem 0.4rem;
        }

        .info-content ul {
            font-size: 0.8rem;
        }
    }
</style>

<?php include __DIR__ . '/../layouts/footer.php'; ?>