<?php
/**
 * pencairan_dana.php - Halaman Pencairan Dana Admin
 * DIPERBAIKI - Lengkap dengan perhitungan otomatis dan tampilan modern
 */
include __DIR__ . '/../layouts/header.php';
$activeMenu = 'pencairanDana';

// Data dari controller
$pendingCair = $pendingCair ?? [];
$history = $history ?? [];
$totalTertahan = $totalTertahan ?? 0;
$totalDicairkan = $totalDicairkan ?? 0;
$totalKomisi = $totalKomisi ?? 0;
$kapal = $kapal ?? [];
$pendingPayments = $pendingPayments ?? [];
$pendingClaims = $pendingClaims ?? [];
$pendingCount = $pendingCount ?? 0;
$pendingHapusCount = $pendingHapusCount ?? 0;

// Hitung rata-rata komisi
$avgKomisi = 0;
if (!empty($pendingCair)) {
    $totalKomisiPersen = array_sum(array_column($pendingCair, 'persen_komisi'));
    $avgKomisi = round($totalKomisiPersen / count($pendingCair));
}
?>

<!-- Tambahkan Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<div class="dashboard-wrapper">
    <!-- SIDEBAR -->
    <?php include __DIR__ . '/includes/sidebar_admin.php'; ?>

    <!-- MAIN CONTENT -->
    <main class="main-content">
        <div class="content-header">
            <div class="header-left">
                <h2><i class="fas fa-money-bill-wave" style="color:var(--success);"></i> Pencairan Dana</h2>
                <p>Cairkan dana ke supir/pemilik kapal setelah perjalanan selesai.</p>
            </div>
            <div class="header-right">
                <span class="badge-status">
                    <i class="fas fa-circle" style="color:#22c55e;"></i> 
                    Sistem Escrow Aktif
                </span>
            </div>
        </div>

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

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

        <!-- ============================================ -->
        <!-- STATISTIK CARD -->
        <!-- ============================================ -->
        <div class="stats-grid">
            <div class="stat-card pending">
                <div class="stat-icon"><i class="fas fa-clock"></i></div>
                <div>
                    <div class="stat-number"><?= count($pendingCair) ?></div>
                    <div class="stat-label">Menunggu Pencairan</div>
                    <div class="stat-sub">Perlu tindakan</div>
                </div>
            </div>
            <div class="stat-card success">
                <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
                <div>
                    <div class="stat-number"><?= count($history) ?></div>
                    <div class="stat-label">Sudah Dicairkan</div>
                    <div class="stat-sub">Selesai</div>
                </div>
            </div>
            <div class="stat-card info">
                <div class="stat-icon"><i class="fas fa-hand-holding-usd"></i></div>
                <div>
                    <div class="stat-number">Rp <?= number_format($totalTertahan, 0, ',', '.') ?></div>
                    <div class="stat-label">Total Dana Tertahan</div>
                    <div class="stat-sub">Menunggu cair</div>
                </div>
            </div>
            <div class="stat-card success">
                <div class="stat-icon"><i class="fas fa-money-bill-wave"></i></div>
                <div>
                    <div class="stat-number">Rp <?= number_format($totalDicairkan, 0, ',', '.') ?></div>
                    <div class="stat-label">Total Dicairkan</div>
                    <div class="stat-sub">Ke supir</div>
                </div>
            </div>
        </div>

        <!-- ============================================ -->
        <!-- RINGKASAN KOMISI -->
        <!-- ============================================ -->
        <div class="komisi-summary">
            <div class="komisi-item">
                <i class="fas fa-percent" style="color:#f59e0b; font-size:1.2rem;"></i>
                <div>
                    <span class="komisi-label">Rata-rata Komisi</span>
                    <span class="komisi-value"><?= $avgKomisi ?>%</span>
                </div>
            </div>
            <div class="komisi-item">
                <i class="fas fa-coins" style="color:#3b82f6; font-size:1.2rem;"></i>
                <div>
                    <span class="komisi-label">Total Komisi Admin</span>
                    <span class="komisi-value">Rp <?= number_format($totalKomisi, 0, ',', '.') ?></span>
                </div>
            </div>
            <div class="komisi-item">
                <i class="fas fa-users" style="color:#22c55e; font-size:1.2rem;"></i>
                <div>
                    <span class="komisi-label">Total Supir</span>
                    <span class="komisi-value"><?= count($pendingCair) + count($history) ?> Orang</span>
                </div>
            </div>
            <div class="komisi-item">
                <i class="fas fa-building" style="color:#8b5cf6; font-size:1.2rem;"></i>
                <div>
                    <span class="komisi-label">Total Kapal</span>
                    <span class="komisi-value">
                        <?php 
                        $totalKapal = 0;
                        foreach($pendingCair as $p) {
                            $totalKapal++;
                        }
                        foreach($history as $h) {
                            $totalKapal++;
                        }
                        echo $totalKapal;
                        ?>
                    </span>
                </div>
            </div>
        </div>

        <!-- ============================================ -->
        <!-- MENUNGGU PENCAIRAN -->
        <!-- ============================================ -->
        <?php if(!empty($pendingCair)): ?>
            <div class="card-section highlight-pending">
                <div class="card-header">
                    <div class="header-left-section">
                        <h3><i class="fas fa-clock" style="color:#f59e0b;"></i> Menunggu Pencairan</h3>
                        <span class="badge badge-warning"><i class="fas fa-hourglass-half"></i> <?= count($pendingCair) ?> Menunggu</span>
                    </div>
                    <div class="header-right-section">
                        <span class="total-nominal">
                            Total: Rp <?= number_format($totalTertahan, 0, ',', '.') ?>
                        </span>
                    </div>
                </div>
                <div class="alert alert-info" style="margin-bottom:1rem;">
                    <i class="fas fa-info-circle"></i> 
                    <strong>Informasi:</strong> Dana akan dicairkan ke supir setelah perjalanan selesai. 
                    Komisi admin sudah dihitung otomatis (rata-rata <?= $avgKomisi ?>%).
                </div>
                <div class="table-responsive">
                    <table class="table" id="pendingTable">
                        <thead>
                            <tr>
                                <th><i class="fas fa-hashtag"></i> Kode</th>
                                <th><i class="fas fa-user"></i> Supir</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-money-bill-wave"></i> Total</th>
                                <th><i class="fas fa-percent"></i> Komisi</th>
                                <th><i class="fas fa-hand-holding-usd"></i> Diterima</th>
                                <th><i class="fas fa-cog"></i> Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach($pendingCair as $p): 
                                $durasi_hari = ceil($p['durasi_jam'] / 24);
                            ?>
                            <tr>
                                <td>
                                    <strong><?= htmlspecialchars($p['kode_pesanan']) ?></strong>
                                    <br>
                                    <small style="color:var(--gray-400);">
                                        <i class="fas fa-user-clock"></i> 
                                        <?= date('d/m/Y', strtotime($p['tanggal_berangkat'])) ?>
                                    </small>
                                </td>
                                <td>
                                    <div style="display:flex; flex-direction:column;">
                                        <span style="font-weight:600;"><?= htmlspecialchars($p['pemilik_nama']) ?></span>
                                        <small style="color:var(--gray-400);">
                                            <i class="fas fa-phone"></i> <?= htmlspecialchars($p['pemilik_hp']) ?>
                                        </small>
                                    </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-users"></i> <?= $p['jumlah_tiket'] ?? 0 ?> tiket
                                        </small>
                                    </div>
                                </td>
                                <td>
                                    <div style="display:flex; flex-direction:column;">
                                        <span><?= date('d/m/Y', strtotime($p['tanggal_berangkat'])) ?></span>
                                        <small style="color:var(--gray-400);">
                                            <i class="fas fa-clock"></i> <?= $durasi_hari ?> hari
                                        </small>
                                    </div>
                                </td>
                                <td style="font-weight:600; color:var(--primary);">
                                    Rp <?= number_format($p['total_harga'], 0, ',', '.') ?>
                                </td>
                                <td style="color:#f59e0b;">
                                    <?= $p['persen_komisi'] ?? 10 ?>%
                                    <br>
                                    <small style="color:var(--gray-400); font-weight:400;">
                                        Rp <?= number_format($p['komisi_admin'], 0, ',', '.') ?>
                                    </small>
                                </td>
                                <td style="font-weight:600; color:var(--success);">
                                    Rp <?= number_format($p['nominal_diterima_supir'], 0, ',', '.') ?>
                                    <br>
                                    <small style="color:var(--gray-400); font-weight:400;">
                                        <i class="fas fa-check-circle"></i> Siap cair
                                    </small>
                                </td>
                                <td>
                                    <form method="POST" action="?page=admin&action=prosesPencairanDana" style="display:inline;">
                                        <input type="hidden" name="pesanan_id" value="<?= $p['id'] ?>">
                                        <button type="submit" class="btn btn-sm btn-success btn-cair" 
                                                onclick="return confirm('⚠️ Yakin ingin mencairkan dana ini?\n\n📌 Kode: <?= htmlspecialchars($p['kode_pesanan']) ?>\n👤 Supir: <?= htmlspecialchars($p['pemilik_nama']) ?>\n💰 Nominal: Rp <?= number_format($p['nominal_diterima_supir'], 0, ',', '.') ?>\n💸 Komisi Admin: Rp <?= number_format($p['komisi_admin'], 0, ',', '.') ?>\n\nDana akan ditransfer ke rekening supir.')">
                                            <i class="fas fa-money-bill-wave"></i> Cairkan
                                        </button>
                                    </form>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        <?php else: ?>
            <div class="empty-state">
                <div class="empty-icon">💰</div>
                <h3>Tidak Ada Dana Menunggu Pencairan</h3>
                <p>Semua dana sudah dicairkan ke supir. Tidak ada yang menunggu.</p>
            </div>
        <?php endif; ?>

        <!-- ============================================ -->
        <!-- INFORMASI TAMBAHAN -->
        <!-- ============================================ -->
        <div class="info-extra">
            <div class="info-extra-item">
                <i class="fas fa-money-bill-wave" style="color:#f59e0b;"></i>
                <span>Menunggu cair: <strong><?= count($pendingCair) ?></strong></span>
            </div>
            <div class="info-extra-item">
                <i class="fas fa-check-circle" style="color:#22c55e;"></i>
                <span>Sudah cair: <strong><?= count($history) ?></strong></span>
            </div>
            <div class="info-extra-item">
                <i class="fas fa-hand-holding-usd" style="color:#3b82f6;"></i>
                <span>Total dana tertahan: <strong>Rp <?= number_format($totalTertahan, 0, ',', '.') ?></strong></span>
            </div>
            <div class="info-extra-item">
                <i class="fas fa-percent" style="color:#f59e0b;"></i>
                <span>Total komisi admin: <strong>Rp <?= number_format($totalKomisi, 0, ',', '.') ?></strong></span>
            </div>
        </div>

        <!-- ============================================ -->
        <!-- INSTRUKSI PENCAIRAN -->
        <!-- ============================================ -->
        <div class="instruction-card">
            <div class="instruction-header">
                <i class="fas fa-info-circle" style="color:var(--primary); font-size:1.3rem;"></i>
                <h4>Panduan Pencairan Dana</h4>
            </div>
            <div class="instruction-body">
                <div class="step-grid">
                    <div class="step-item">
                        <div class="step-number">1</div>
                        <div class="step-content">
                            <h5>Periksa Status Perjalanan</h5>
                            <p>Pastikan perjalanan kapal sudah <strong>SELESAI</strong> sebelum mencairkan dana.</p>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-number">2</div>
                        <div class="step-content">
                            <h5>Verifikasi Data Supir</h5>
                            <p>Pastikan data rekening supir sudah benar dan valid.</p>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-number">3</div>
                        <div class="step-content">
                            <h5>Cairkan Dana</h5>
                            <p>Klik tombol <strong>"Cairkan"</strong> untuk mentransfer dana ke rekening supir.</p>
                        </div>
                    </div>
                    <div class="step-item">
                        <div class="step-number">4</div>
                        <div class="step-content">
                            <h5>Konfirmasi Transfer</h5>
                            <p>Status akan berubah menjadi <strong>"Cair"</strong> dan supir menerima notifikasi.</p>
                        </div>
                    </div>
                </div>
                <div class="instruction-notes">
                    <div class="note-item warning">
                        <i class="fas fa-exclamation-triangle"></i>
                        <span><strong>Catatan:</strong> Komisi admin sudah dipotong secara otomatis dari total harga. Supir menerima nominal setelah dipotong komisi.</span>
                    </div>
                    <div class="note-item info">
                        <i class="fas fa-calculator"></i>
                        <span>
                            <strong>Rumus Perhitungan:</strong> 
                            Total Harga - (Total Harga × Komisi%) = Nominal Diterima Supir
                            <br>
                            <span style="font-size:0.8rem; color:var(--gray-500);">
                                Contoh: Rp 2.500.000 - (Rp 2.500.000 × 10%) = Rp 2.250.000
                            </span>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<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 {
        background: #d1fae5;
        color: #065f46;
        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;
    }

    /* ============================================
       ALERT
       ============================================ */
    .alert {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0.8rem 1.2rem;
        border-radius: 10px;
        margin-bottom: 1rem;
        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-info {
        background: #dbeafe;
        color: #1e40af;
        border-left-color: #3b82f6;
    }
    .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 GRID
       ============================================ */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .stat-card {
        background: #fff;
        padding: 1rem 1.2rem;
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
        display: flex;
        align-items: center;
        gap: 1rem;
        border: 1px solid var(--gray-100);
        transition: var(--transition);
    }

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

    .stat-card .stat-icon {
        font-size: 1.8rem;
        opacity: 0.7;
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--gray-50);
    }

    .stat-card .stat-icon i {
        font-size: 1.4rem;
    }

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

    .stat-card .stat-label {
        color: var(--gray-500);
        font-size: 0.8rem;
        font-weight: 500;
    }

    .stat-card .stat-sub {
        font-size: 0.65rem;
        color: var(--gray-400);
        margin-top: 0.1rem;
    }

    .stat-card.pending .stat-icon { background: #fef3c7; color: #f59e0b; }
    .stat-card.success .stat-icon { background: #d1fae5; color: #22c55e; }
    .stat-card.info .stat-icon { background: #dbeafe; color: #3b82f6; }
    .stat-card.danger .stat-icon { background: #fee2e2; color: #ef4444; }

    /* ============================================
       KOMISI SUMMARY
       ============================================ */
    .komisi-summary {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 1.5rem;
        padding: 1rem 1.2rem;
        background: var(--gray-50);
        border-radius: 12px;
        border: 1px solid var(--gray-200);
    }

    .komisi-item {
        display: flex;
        align-items: center;
        gap: 0.8rem;
    }

    .komisi-item .komisi-label {
        font-size: 0.7rem;
        color: var(--gray-500);
        display: block;
    }

    .komisi-item .komisi-value {
        font-size: 1rem;
        font-weight: 700;
        color: var(--gray-900);
        display: block;
    }

    /* ============================================
       CARD SECTION
       ============================================ */
    .card-section {
        background: #fff;
        border-radius: 12px;
        padding: 1.2rem 1.5rem;
        border: 1px solid var(--gray-200);
        transition: var(--transition);
        margin-bottom: 1.5rem;
    }

    .card-section:hover {
        border-color: var(--gray-300);
    }

    .card-section.highlight-pending {
        border-left: 4px solid #f59e0b;
        background: #fffbeb;
    }

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

    .header-left-section {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .header-right-section {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .card-header h3 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--gray-800);
        margin: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .total-nominal {
        font-size: 0.85rem;
        font-weight: 600;
        color: #f59e0b;
        background: #fef3c7;
        padding: 0.2rem 0.8rem;
        border-radius: 20px;
    }

    .total-nominal.success {
        color: #22c55e;
        background: #d1fae5;
    }

    /* ============================================
       TABLE
       ============================================ */
    .table-responsive {
        overflow-x: auto;
    }

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

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

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

    .table td {
        padding: 0.6rem 0.8rem;
        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;
        white-space: nowrap;
    }

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

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

    .badge-secondary {
        background: #e5e7eb;
        color: #4b5563;
    }

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

    /* ============================================
       BUTTON
       ============================================ */
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        padding: 0.3rem 0.8rem;
        border: none;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.75rem;
        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);
    }

    .btn-sm {
        padding: 0.2rem 0.6rem;
        font-size: 0.7rem;
    }

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

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

    .btn-cair {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: #fff;
        padding: 0.3rem 1rem;
        font-weight: 700;
    }

    .btn-cair:hover {
        background: linear-gradient(135deg, #16a34a, #15803d);
        box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
    }

    /* ============================================
       EMPTY STATE
       ============================================ */
    .empty-state {
        text-align: center;
        padding: 3rem 2rem;
        background: #fff;
        border-radius: 12px;
        border: 1px solid var(--gray-200);
    }

    .empty-icon {
        font-size: 4rem;
        margin-bottom: 1rem;
        opacity: 0.5;
    }

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

    .empty-state p {
        color: var(--gray-500);
    }

    /* ============================================
       INFO EXTRA
       ============================================ */
    .info-extra {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
        margin-top: 1rem;
        padding: 0.8rem 1rem;
        background: var(--gray-50);
        border-radius: 10px;
        border: 1px solid var(--gray-200);
    }

    .info-extra-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        color: var(--gray-600);
    }

    .info-extra-item i {
        font-size: 1rem;
    }

    /* ============================================
       INSTRUCTION CARD
       ============================================ */
    .instruction-card {
        margin-top: 1.5rem;
        background: #fff;
        border-radius: 12px;
        padding: 1.2rem 1.5rem;
        border: 1px solid var(--gray-200);
        transition: var(--transition);
    }

    .instruction-card:hover {
        border-color: var(--gray-300);
    }

    .instruction-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.8rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--gray-200);
    }

    .instruction-header h4 {
        font-size: 0.95rem;
        font-weight: 700;
        color: var(--gray-800);
        margin: 0;
    }

    .step-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .step-item {
        display: flex;
        gap: 0.8rem;
        align-items: flex-start;
    }

    .step-number {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.8rem;
        flex-shrink: 0;
        margin-top: 2px;
    }

    .step-content h5 {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--gray-900);
        margin: 0 0 0.1rem;
    }

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

    .instruction-notes {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.5rem;
        padding-top: 0.8rem;
        border-top: 1px solid var(--gray-200);
    }

    .note-item {
        padding: 0.6rem 1rem;
        border-radius: 8px;
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.8rem;
    }

    .note-item.warning {
        background: #fffbeb;
        border: 1px solid #fde68a;
        color: #92400e;
    }

    .note-item.info {
        background: #dbeafe;
        border: 1px solid #93c5fd;
        color: #1e40af;
    }

    .note-item i {
        margin-top: 0.1rem;
        flex-shrink: 0;
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 992px) {
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .komisi-summary {
            grid-template-columns: repeat(2, 1fr);
        }
        .step-grid {
            grid-template-columns: repeat(2, 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-grid {
            grid-template-columns: 1fr 1fr;
            gap: 0.7rem;
        }

        .komisi-summary {
            grid-template-columns: 1fr 1fr;
            gap: 0.7rem;
            padding: 0.8rem;
        }

        .card-section {
            padding: 1rem;
        }

        .table td,
        .table th {
            padding: 0.4rem 0.5rem;
            font-size: 0.75rem;
        }

        .step-grid {
            grid-template-columns: 1fr;
            gap: 0.8rem;
        }

        .info-extra {
            flex-direction: column;
            gap: 0.3rem;
        }

        .header-right-section {
            width: 100%;
        }
    }

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

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

        .komisi-summary {
            grid-template-columns: 1fr;
        }

        .card-section {
            padding: 0.8rem;
        }

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

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

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

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

        .komisi-item .komisi-value {
            font-size: 0.9rem;
        }
    }
</style>

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