<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paisa Remit • Admin Control Center</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        :root { --magenta: #E2136E; --purple: #4A154B; --bg: #F8FAFC; }
        body { background: var(--bg); font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 14px; }
        .sidebar { background: var(--purple); min-height: 100vh; color: #fff; width: 260px; position: fixed; }
        .main-content { margin-left: 260px; padding: 25px; }
        .nav-link { color: #CBD5E1; padding: 12px 20px; font-weight: 500; border-radius: 0; margin-bottom: 2px; transition: 0.3s; border-left: 3px solid transparent; }
        .nav-link:hover, .nav-link.active { background: rgba(255,255,255,0.1); color: #fff; border-left-color: var(--magenta); }
        .nav-link i { width: 24px; }
        .card { border: none; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
        .stat-card { padding: 20px; text-align: center; }
        .stat-card .icon { font-size: 32px; color: var(--magenta); margin-bottom: 10px; opacity: 0.8; }
        .stat-card .value { font-size: 24px; font-weight: 800; color: var(--purple); }
        .stat-card .label { color: #64748B; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
        .btn-magenta { background: var(--magenta); color: #fff; border: none; font-weight: 600; padding: 8px 16px; border-radius: 8px; }
        .btn-magenta:hover { background: #C00F5C; color: #fff; }
        .badge-status { font-weight: 600; font-size: 11px; padding: 5px 10px; border-radius: 6px; }
        .table thead { background: #F1F5F9; font-weight: 600; color: #475569; }
        .table th { border: none; padding: 12px 15px; }
        .table td { padding: 15px; vertical-align: middle; border-bottom: 1px solid #F1F5F9; }
    </style>
</head>
<body>

    <!-- Login Page -->
    <div class="d-flex align-items-center justify-content-center vh-100">
        <div class="card p-5 shadow-lg border-0" style="max-width: 440px; width: 100%;">
            <div class="text-center mb-5">
                <i class="fa-solid fa-shield-halved fa-3x text-primary mb-3"></i>
                <h3 class="fw-bold">Admin Login</h3>
                <p class="text-muted">Paisa Remit Central Authority</p>
            </div>
                        <form method="POST">
                <input type="hidden" name="csrf_token" value="">
                <div class="mb-4">
                    <label class="form-label fw-semibold">Username</label>
                    <input type="text" name="username" class="form-control form-control-lg" placeholder="admin" required>
                </div>
                <div class="mb-4">
                    <label class="form-label fw-semibold">Password</label>
                    <input type="password" name="password" class="form-control form-control-lg" placeholder="••••••••" required>
                </div>
                <button type="submit" name="admin_login" class="btn btn-magenta w-100 py-3 mt-2">Access Dashboard</button>
            </form>
        </div>
    </div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
