<?php
/**
 * request_hapus_kapal.php - Halaman Admin untuk Request Hapus Kapal
 * DIPERBAIKI - Handle semua foreign key constraint
 */
// HAPUS ob_start() dan ob_end_clean() 
// include __DIR__ . '/../layouts/header.php'; -> PINDAHKAN KE BAWAH SETELAH LOGIC
$activeMenu = 'request_hapus_kapal';

// ============================================
// KONEKSI DATABASE
// ============================================
if (!isset($db) || !$db instanceof mysqli) {
    $possiblePaths = [
        __DIR__ . '/../../config/database.php',
        __DIR__ . '/../config/database.php',
        dirname(__DIR__, 2) . '/config/database.php',
    ];
    foreach ($possiblePaths as $path) {
        if (file_exists($path)) {
            require_once $path;
            if (isset($db) && $db instanceof mysqli) {
                break;
            }
        }
    }
}

if (!isset($db) || !$db instanceof mysqli) {
    $host = 'localhost';
    $username = 'root';
    $password = '';
    $possibleDatabases = ['platform_kapal_samosir', 'reservasi_kapal_wisata', 'reservasi_kapal'];
    foreach ($possibleDatabases as $dbName) {
        try {
            $db = new mysqli($host, $username, $password, $dbName);
            if (!$db->connect_error) {
                $db->set_charset("utf8mb4");
                break;
            }
        } catch (Exception $e) {
            continue;
        }
    }
}

// ============================================
// HANDLER AJAX
// ============================================
if (isset($_GET['ajax']) && $_GET['ajax'] == 1 && isset($_GET['action']) && $_GET['action'] == 'get_pending_count') {
    header('Content-Type: application/json');
    $count = 0;
    if (isset($db) && $db instanceof mysqli) {
        $checkTable = $db->query("SHOW TABLES LIKE 'request_hapus_kapal'");
        if ($checkTable && $checkTable->num_rows > 0) {
            $query = "SELECT COUNT(*) as total FROM request_hapus_kapal WHERE hapus_request = 'pending'";
            $result = $db->query($query);
            if ($result) {
                $row = $result->fetch_assoc();
                $count = (int)($row['total'] ?? 0);
            }
        }
    }
    echo json_encode(['success' => true, 'count' => $count]);
    exit;
}

// ============================================
// PROSES SETUJUI / TOLAK REQUEST
// ============================================
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $request_id = isset($_POST['request_id']) ? (int)$_POST['request_id'] : 0;
    $action = isset($_POST['action']) ? $_POST['action'] : '';
    $alasan = isset($_POST['alasan']) ? trim($_POST['alasan']) : '';
    
    if ($request_id > 0 && !empty($action) && isset($db) && $db instanceof mysqli) {
        if ($action === 'terima') {
            // Ambil data request
            $query = "SELECT * FROM request_hapus_kapal WHERE id = ? AND hapus_request = 'pending'";
            $stmt = $db->prepare($query);
            $stmt->bind_param('i', $request_id);
            $stmt->execute();
            $result = $stmt->get_result();
            $request = $result->fetch_assoc();
            
            if ($request) {
                $kapal_id = $request['kapal_id'];
                
                // ============================================
                // MULAI TRANSAKSI
                // ============================================
                $db->begin_transaction();
                
                try {
                    // 1. Hapus shared_trip_participants (peserta shared trip)
                    $deleteParticipants = "DELETE FROM shared_trip_participants 
                                          WHERE trip_id IN (SELECT id FROM shared_trips WHERE kapal_id = ?)";
                    $delPartStmt = $db->prepare($deleteParticipants);
                    $delPartStmt->bind_param('i', $kapal_id);
                    $delPartStmt->execute();
                    
                    // 2. Hapus shared_trips
                    $deleteShared = "DELETE FROM shared_trips WHERE kapal_id = ?";
                    $delSharedStmt = $db->prepare($deleteShared);
                    $delSharedStmt->bind_param('i', $kapal_id);
                    $delSharedStmt->execute();
                    
                    // 3. Hapus claim_pengembalian yang terkait dengan pesanan
                    $deleteClaim = "DELETE cp FROM claim_pengembalian cp 
                                    INNER JOIN pesanan p ON cp.pesanan_id = p.id 
                                    WHERE p.kapal_id = ?";
                    $delClaimStmt = $db->prepare($deleteClaim);
                    $delClaimStmt->bind_param('i', $kapal_id);
                    $delClaimStmt->execute();
                    
                    // 4. Hapus pesanan
                    $deletePesanan = "DELETE FROM pesanan WHERE kapal_id = ?";
                    $delPesananStmt = $db->prepare($deletePesanan);
                    $delPesananStmt->bind_param('i', $kapal_id);
                    $delPesananStmt->execute();
                    
                    // 5. Hapus rute_detail
                    $deleteRuteDetail = "DELETE rd FROM rute_detail rd 
                                         INNER JOIN rute_kapal rk ON rd.rute_id = rk.id 
                                         WHERE rk.kapal_id = ?";
                    $delRuteDetailStmt = $db->prepare($deleteRuteDetail);
                    $delRuteDetailStmt->bind_param('i', $kapal_id);
                    $delRuteDetailStmt->execute();
                    
                    // 6. Hapus rute_kapal
                    $deleteRute = "DELETE FROM rute_kapal WHERE kapal_id = ?";
                    $delRuteStmt = $db->prepare($deleteRute);
                    $delRuteStmt->bind_param('i', $kapal_id);
                    $delRuteStmt->execute();
                    
                    // 7. Hapus kapal
                    $deleteKapal = "DELETE FROM kapal WHERE id = ?";
                    $delKapalStmt = $db->prepare($deleteKapal);
                    $delKapalStmt->bind_param('i', $kapal_id);
                    $delKapalStmt->execute();
                    
                    // 8. Update status request
                    $updateQuery = "UPDATE request_hapus_kapal SET hapus_request = 'disetujui', alasan_admin = ? WHERE id = ?";
                    $updStmt = $db->prepare($updateQuery);
                    $updStmt->bind_param('si', $alasan, $request_id);
                    $updStmt->execute();
                    
                    // Commit transaksi
                    $db->commit();
                    
                    $_SESSION['flash_success'] = '✅ Request hapus kapal disetujui! Kapal dan semua data terkait berhasil dihapus.';
                    
                } catch (Exception $e) {
                    // Rollback jika ada error
                    $db->rollback();
                    $_SESSION['flash_error'] = '❌ Gagal menghapus kapal: ' . $e->getMessage();
                }
            }
        } elseif ($action === 'tolak') {
            $updateQuery = "UPDATE request_hapus_kapal SET hapus_request = 'ditolak', alasan_admin = ? WHERE id = ?";
            $updStmt = $db->prepare($updateQuery);
            $updStmt->bind_param('si', $alasan, $request_id);
            $updStmt->execute();
            
            $_SESSION['flash_success'] = '✅ Request hapus kapal ditolak!';
        }
        
        header('Location: ?page=admin&action=requestHapusKapal');
        exit;
    }
}

// ============================================
// AMBIL DATA REQUEST
// ============================================
$requests = [];
$history = [];
$kapal = [];
$pendingHapusCount = 0;
$totalKapal = 0;

if (isset($db) && $db instanceof mysqli) {
    $checkTable = $db->query("SHOW TABLES LIKE 'request_hapus_kapal'");
    if ($checkTable && $checkTable->num_rows > 0) {
        // Request pending
        $query = "SELECT r.*, 
                  k.nama_kapal, 
                  k.jenis, 
                  k.kapasitas,
                  u.nama as pemilik_nama,
                  u.no_hp as pemilik_no_hp
                  FROM request_hapus_kapal r
                  LEFT JOIN kapal k ON r.kapal_id = k.id
                  LEFT JOIN users u ON r.pemilik_id = u.id
                  WHERE r.hapus_request = 'pending' 
                  ORDER BY r.hapus_request_at DESC";
        $result = $db->query($query);
        while ($row = $result->fetch_assoc()) {
            $requests[] = $row;
        }
        
        // History
        $query2 = "SELECT r.*, 
                   k.nama_kapal, 
                   k.jenis, 
                   k.kapasitas,
                   u.nama as pemilik_nama,
                   u.no_hp as pemilik_no_hp
                   FROM request_hapus_kapal r
                   LEFT JOIN kapal k ON r.kapal_id = k.id
                   LEFT JOIN users u ON r.pemilik_id = u.id
                   WHERE r.hapus_request IN ('disetujui', 'ditolak') 
                   ORDER BY r.hapus_request_at DESC LIMIT 50";
        $result2 = $db->query($query2);
        while ($row = $result2->fetch_assoc()) {
            $history[] = $row;
        }
        
        // Hitung pending
        $countQuery = "SELECT COUNT(*) as total FROM request_hapus_kapal WHERE hapus_request = 'pending'";
        $countResult = $db->query($countQuery);
        $countRow = $countResult->fetch_assoc();
        $pendingHapusCount = (int)($countRow['total'] ?? 0);
    }
    
    $kapalQuery = $db->query("SELECT COUNT(*) as total FROM kapal");
    if ($kapalQuery) {
        $kapalRow = $kapalQuery->fetch_assoc();
        $totalKapal = (int)($kapalRow['total'] ?? 0);
    }
}

// Hitung approved & rejected
$approved = 0;
$rejected = 0;
foreach($history as $h) {
    if($h['hapus_request'] == 'disetujui') $approved++;
    if($h['hapus_request'] == 'ditolak') $rejected++;
}

// ============================================
// 🔥 INCLUDE HEADER SETELAH SEMUA LOGIC
// ============================================
include __DIR__ . '/../layouts/header.php';
?>

<!-- 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>
                <h2><i class="fas fa-trash-alt" style="color:#ef4444;"></i> Request Hapus Kapal</h2>
                <p>Kelola request hapus kapal dari supir. <strong style="color:#ef4444;"><i class="fas fa-exclamation-triangle"></i> Hapus bersifat PERMANEN!</strong></p>
            </div>
            <div>
                <span class="badge badge-danger" style="font-size:0.9rem; padding:0.4rem 1rem;">
                    <i class="fas fa-clock"></i> <?= $pendingHapusCount ?> Menunggu
                </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-mini" id="statsContainer">
            <div class="stat-mini-item">
                <span class="stat-mini-number" id="pendingCount" style="color:#ef4444;"><?= count($requests) ?></span>
                <span class="stat-mini-label"><i class="fas fa-clock" style="color:#ef4444;"></i> Menunggu</span>
            </div>
            <div class="stat-mini-item">
                <span class="stat-mini-number" style="color:#22c55e;"><?= $approved ?></span>
                <span class="stat-mini-label"><i class="fas fa-check-circle" style="color:#22c55e;"></i> Disetujui</span>
            </div>
            <div class="stat-mini-item">
                <span class="stat-mini-number" style="color:#6b7280;"><?= $rejected ?></span>
                <span class="stat-mini-label"><i class="fas fa-times-circle" style="color:#6b7280;"></i> Ditolak</span>
            </div>
            <div class="stat-mini-item">
                <span class="stat-mini-number" style="color:#3b82f6;"><?= count($history) ?></span>
                <span class="stat-mini-label"><i class="fas fa-history" style="color:#3b82f6;"></i> Total Riwayat</span>
            </div>
        </div>

        <!-- Request Menunggu -->
        <div id="requestContainer">
            <?php if(!empty($requests)): ?>
                <div class="card-section highlight-request" id="requestCard">
                    <div class="card-header">
                        <h3><i class="fas fa-clock" style="color:#f59e0b;"></i> Request Menunggu</h3>
                        <span class="badge badge-danger" id="requestBadge">
                            <i class="fas fa-exclamation-circle"></i> <span id="requestCount"><?= count($requests) ?></span> Request
                        </span>
                    </div>
                    <div class="alert alert-warning" style="margin-bottom:1rem;">
                        <i class="fas fa-exclamation-triangle"></i> <strong>Perhatian!</strong> Menyetujui request akan menghapus kapal <strong>PERMANEN</strong> dari sistem. 
                        Data tidak dapat dikembalikan!
                    </div>
                    <div class="table-responsive">
                        <table class="table" id="requestTable">
                            <thead>
                                <tr>
                                    <th><i class="fas fa-ship"></i> Kapal</th>
                                    <th><i class="fas fa-user"></i> Supir</th>
                                    <th><i class="fas fa-phone"></i> No HP</th>
                                    <th><i class="fas fa-calendar-alt"></i> Tanggal Request</th>
                                    <th><i class="fas fa-info-circle"></i> Alasan</th>
                                    <th><i class="fas fa-cog"></i> Aksi</th>
                                </tr>
                            </thead>
                            <tbody id="requestTableBody">
                                <?php foreach($requests as $req): ?>
                                <tr id="request-row-<?= $req['id'] ?>">
                                    <td>
                                        <strong><?= htmlspecialchars($req['nama_kapal'] ?? '-') ?></strong>
                                        <br>
                                        <small style="color:#718096;">
                                            <i class="fas fa-tag"></i> <?= ucfirst($req['jenis'] ?? '-') ?> | <i class="fas fa-users"></i> <?= $req['kapasitas'] ?? 0 ?> org
                                        </small>
                                    </td>
                                    <td><?= htmlspecialchars($req['pemilik_nama'] ?? '-') ?></td>
                                    <td>
                                        <i class="fas fa-phone" style="color:#718096; font-size:0.7rem;"></i>
                                        <?= htmlspecialchars($req['pemilik_no_hp'] ?? '-') ?>
                                    </td>
                                    <td>
                                        <i class="fas fa-calendar-alt" style="color:#718096; font-size:0.7rem;"></i>
                                        <?php 
                                        $tanggal = $req['hapus_request_at'] ?? null;
                                        if($tanggal && $tanggal != '0000-00-00 00:00:00') {
                                            echo date('d/m/Y H:i', strtotime($tanggal));
                                        } else {
                                            echo '-';
                                        }
                                        ?>
                                    </td>
                                    <td>
                                        <span title="<?= htmlspecialchars($req['alasan'] ?? '-') ?>">
                                            <?= htmlspecialchars(substr($req['alasan'] ?? '-', 0, 50)) ?>
                                            <?= strlen($req['alasan'] ?? '') > 50 ? '...' : '' ?>
                                        </span>
                                    </td>
                                    <td>
                                        <div class="action-group">
                                            <form method="POST" action="" style="display:inline-flex; gap:0.3rem; flex-wrap:wrap; align-items:center;">
                                                <input type="hidden" name="request_id" value="<?= $req['id'] ?>">
                                                <input type="hidden" name="action" value="terima">
                                                <input type="text" name="alasan" placeholder="Catatan" class="form-control-sm" style="min-width:80px;">
                                                <button type="submit" class="btn btn-sm btn-danger" 
                                                        onclick="return confirm('⚠️ PERINGATAN! Anda akan MENGHAPUS PERMANEN kapal ini!\n\nKapal: <?= htmlspecialchars($req['nama_kapal'] ?? '-') ?>\nSupir: <?= htmlspecialchars($req['pemilik_nama'] ?? '-') ?>\n\nData TIDAK DAPAT DIKEMBALIKAN!\n\nYakin ingin melanjutkan?')">
                                                    <i class="fas fa-trash-alt"></i> Setujui
                                                </button>
                                            </form>
                                            
                                            <form method="POST" action="" style="display:inline-flex; gap:0.3rem; flex-wrap:wrap; align-items:center;">
                                                <input type="hidden" name="request_id" value="<?= $req['id'] ?>">
                                                <input type="hidden" name="action" value="tolak">
                                                <input type="text" name="alasan" placeholder="Alasan tolak" required class="form-control-sm" style="min-width:80px;">
                                                <button type="submit" class="btn btn-sm btn-secondary" onclick="return confirm('Yakin menolak request hapus ini?')">
                                                    <i class="fas fa-times"></i> Tolak
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                                <?php endforeach; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            <?php else: ?>
                <div class="alert alert-info" id="noRequestAlert">
                    <i class="fas fa-info-circle"></i> 📭 Tidak ada request hapus kapal yang menunggu.
                </div>
            <?php endif; ?>
        </div>

        <!-- Riwayat Request -->
        <?php if(!empty($history)): ?>
            <div class="card-section" style="margin-top:2rem;">
                <div class="card-header">
                    <h3><i class="fas fa-history"></i> Riwayat Request</h3>
                    <span class="badge badge-secondary"><i class="fas fa-list"></i> <?= count($history) ?> Riwayat</span>
                </div>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th><i class="fas fa-ship"></i> Kapal</th>
                                <th><i class="fas fa-user"></i> Supir</th>
                                <th><i class="fas fa-info-circle"></i> Status</th>
                                <th><i class="fas fa-comment"></i> Catatan Admin</th>
                                <th><i class="fas fa-calendar-alt"></i> Tanggal</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach($history as $h): ?>
                            <tr>
                                <td>
                                    <strong><?= htmlspecialchars($h['nama_kapal'] ?? '-') ?></strong>
                                    <br>
                                    <small style="color:#718096;">
                                        <i class="fas fa-tag"></i> <?= ucfirst($h['jenis'] ?? '-') ?> | <i class="fas fa-users"></i> <?= $h['kapasitas'] ?? 0 ?> org
                                    </small>
                                </td>
                                <td><?= htmlspecialchars($h['pemilik_nama'] ?? '-') ?></td>
                                <td>
                                    <?php if(isset($h['hapus_request']) && $h['hapus_request'] == 'disetujui'): ?>
                                        <span class="badge badge-danger"><i class="fas fa-trash-alt"></i> Sudah Dihapus</span>
                                    <?php elseif(isset($h['hapus_request']) && $h['hapus_request'] == 'ditolak'): ?>
                                        <span class="badge badge-secondary"><i class="fas fa-times"></i> Ditolak</span>
                                    <?php else: ?>
                                        <span class="badge badge-secondary"><?= $h['hapus_request'] ?? '-' ?></span>
                                    <?php endif; ?>
                                </td>
                                <td><?= htmlspecialchars($h['alasan_admin'] ?? '-') ?></td>
                                <td>
                                    <i class="fas fa-calendar-alt" style="color:#718096; font-size:0.7rem;"></i>
                                    <?php 
                                    $tanggal = $h['hapus_request_at'] ?? null;
                                    if($tanggal && $tanggal != '0000-00-00 00:00:00') {
                                        echo date('d/m/Y H:i', strtotime($tanggal));
                                    } else {
                                        echo '-';
                                    }
                                    ?>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        <?php endif; ?>

        <!-- INFORMASI TAMBAHAN -->
        <div class="info-extra">
            <div class="info-extra-item">
                <i class="fas fa-ship" style="color:#2b6cb0;"></i>
                <span>Total kapal terdaftar: <strong><?= $totalKapal ?></strong></span>
            </div>
            <div class="info-extra-item" id="pendingInfo">
                <i class="fas fa-trash-alt" style="color:#ef4444;"></i>
                <span>Request menunggu: <strong id="pendingInfoCount"><?= count($requests) ?></strong></span>
            </div>
            <div class="info-extra-item">
                <i class="fas fa-check-circle" style="color:#22c55e;"></i>
                <span>Request disetujui: <strong><?= $approved ?></strong></span>
            </div>
            <div class="info-extra-item">
                <i class="fas fa-times-circle" style="color:#6b7280;"></i>
                <span>Request ditolak: <strong><?= $rejected ?></strong></span>
            </div>
        </div>
    </main>
</div>

<!-- ============================================ -->
<!-- JAVASCRIPT REAL-TIME -->
<!-- ============================================ -->
<script>
function updatePendingCount() {
    const url = window.location.pathname + '?ajax=1&action=get_pending_count';
    
    fetch(url)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const count = data.count;
                
                const pendingEl = document.getElementById('pendingCount');
                const requestCountEl = document.getElementById('requestCount');
                const pendingInfoEl = document.getElementById('pendingInfoCount');
                
                if (pendingEl) pendingEl.textContent = count;
                if (requestCountEl) requestCountEl.textContent = count;
                if (pendingInfoEl) pendingInfoEl.textContent = count;
                
                const sidebarBadge = document.getElementById('requestHapusBadge');
                if (sidebarBadge) {
                    if (count > 0) {
                        sidebarBadge.textContent = count > 99 ? '99+' : count;
                        sidebarBadge.style.display = 'inline-block';
                    } else {
                        sidebarBadge.textContent = '';
                        sidebarBadge.style.display = 'none';
                    }
                }
            }
        })
        .catch(error => console.error('Error:', error));
}

setInterval(updatePendingCount, 3000);

document.addEventListener('DOMContentLoaded', function() {
    updatePendingCount();
    console.log('✅ Request Hapus Kapal - Badge real-time aktif');
});
</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 #e2e8f0;
}

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

.content-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.2rem;
}

.content-header p {
    color: #718096;
    font-size: 0.95rem;
}

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

.stat-mini-item {
    background: #fff;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    text-align: center;
    transition: all 0.2s;
}

.stat-mini-item:hover {
    border-color: #2b6cb0;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.stat-mini-number {
    font-size: 1.3rem;
    font-weight: 700;
    display: block;
    line-height: 1.2;
    color: #1a202c;
    transition: all 0.3s;
}

.stat-mini-label {
    font-size: 0.7rem;
    color: #718096;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

/* ============================================
   CARD SECTION
   ============================================ */
.card-section {
    background: #fff;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
}

.card-section:hover {
    border-color: #cbd5e0;
}

.card-section.highlight-request {
    border-left: 4px solid #ef4444;
    background: #fef2f2;
}

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

.card-header h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   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-warning {
    background: #fffbeb;
    color: #92400e;
    border-left-color: #f59e0b;
}

.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: all 0.2s;
}

.alert-close:hover {
    opacity: 1;
}

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

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

.table th {
    background: #f7fafc;
    color: #4a5568;
    font-weight: 600;
    padding: 0.6rem 0.8rem;
    text-align: left;
    border-bottom: 2px solid #e2e8f0;
    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 #e2e8f0;
    vertical-align: middle;
}

.table tr:hover td {
    background: #f7fafc;
}

/* ============================================
   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-danger {
    background: #fee2e2;
    color: #991b1b;
}

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

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

/* Badge di sidebar */
.sidebar-nav .badge-notification {
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 8px;
    border-radius: 20px;
    margin-left: auto;
    min-width: 18px;
    text-align: center;
    display: none;
    animation: pulse-badge 2s infinite;
    line-height: 18px;
    height: 18px;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ============================================
   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: all 0.2s;
    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-danger {
    background: #ef4444;
    color: #fff;
}

.btn-danger:hover {
    background: #dc2626;
    color: #fff;
}

.btn-secondary {
    background: #e2e8f0;
    color: #4a5568;
}

.btn-secondary:hover {
    background: #cbd5e0;
    color: #1a202c;
}

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

.action-group form {
    display: inline-flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: center;
}

.form-control-sm {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    transition: all 0.2s;
    min-width: 80px;
    font-family: inherit;
}

.form-control-sm:focus {
    outline: none;
    border-color: #2b6cb0;
    box-shadow: 0 0 0 3px rgba(43,108,176,0.08);
}

/* ============================================
   INFO EXTRA
   ============================================ */
.info-extra {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    background: #f7fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.info-extra-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #4a5568;
}

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

/* ============================================
   RESPONSIVE
   ============================================ */
@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: stretch;
    }

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

    .card-section {
        padding: 1rem;
    }

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

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

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

    .action-group form {
        width: 100%;
    }

    .form-control-sm {
        width: 100%;
        min-width: unset;
    }

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

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

    .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;
    }

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

    .stat-mini-number {
        font-size: 1.1rem;
    }
}
</style>

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