<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GenX Admin Portal — Login</title>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Plus Jakarta Sans', 'sans-serif'],
                        outfit: ['Outfit', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            light: '#FFFFFF',
                            bg: '#F8FAFC',
                            indigo: '#4F46E5',
                            purple: '#7C3AED',
                            text: '#0F172A',
                            desc: '#475569',
                            muted: '#94A3B8',
                        }
                    },
                    boxShadow: {
                        'premium': '0 10px 40px -10px rgba(0, 0, 0, 0.04)',
                        'glow': '0 0 25px rgba(79, 70, 229, 0.08)',
                    }
                }
            }
        }
    </script>
    <style>
        body {
            background-color: #F8FAFC;
            color: #0F172A;
        }
    </style>
</head>
<body class="font-sans antialiased min-h-screen flex items-center justify-center relative px-6">

    <!-- Decorative Soft Blobs -->
    <div class="absolute top-0 right-1/4 w-[400px] h-[400px] bg-purple-50/40 rounded-full blur-[120px] pointer-events-none -translate-y-1/2"></div>
    <div class="absolute bottom-0 left-1/4 w-[400px] h-[400px] bg-indigo-50/30 rounded-full blur-[120px] pointer-events-none translate-y-1/3"></div>

    <!-- Login Card -->
    <div class="w-full max-w-md bg-white border border-slate-200 rounded-2xl shadow-premium p-8 relative z-10">
        <div class="text-center mb-8">
            <span class="font-outfit text-2xl font-extrabold tracking-wider text-brand-text block">
                GEN<span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-indigo to-brand-purple">X</span>
            </span>
            <span class="text-[9px] tracking-widest font-bold uppercase text-brand-indigo border border-indigo-200 px-2 py-0.5 rounded bg-indigo-50/50 mt-1 inline-block">
                Admin Logs Portal
            </span>
            <h3 class="font-outfit text-base font-bold text-brand-text mt-4">Security Verification</h3>
            <p class="text-xs text-brand-desc mt-1">Please enter the administrator password to view the student registry.</p>
        </div>

        <form action="<?= site_url('admin') ?>" method="POST" class="space-y-4">
            <div>
                <label class="block text-[9px] uppercase tracking-wider text-brand-desc font-bold mb-1.5" for="password">Password</label>
                <input class="w-full bg-white border border-slate-300 focus:border-brand-indigo rounded-lg px-4 py-3 text-xs text-brand-text placeholder-slate-400 outline-none transition-all" type="password" id="password" name="password" placeholder="••••••••" required autofocus>
            </div>

            <!-- Error message -->
            <?php if (isset($error)): ?>
                <div class="text-xs text-red-600 bg-red-50 border border-red-200 p-3 rounded-lg text-center font-medium">
                    <?= esc($error) ?>
                </div>
            <?php endif; ?>

            <!-- Submit -->
            <button type="submit" class="w-full py-3.5 rounded-lg text-xs font-bold uppercase tracking-wider text-white bg-brand-indigo shadow-glow hover:bg-brand-indigo/95 transition-all duration-300 transform active:scale-95">
                Authenticate Logbook
            </button>
        </form>

        <div class="text-center mt-6">
            <a href="<?= base_url() ?>" class="text-[11px] font-semibold text-slate-400 hover:text-slate-600 transition-colors">
                ← Back to Homepage
            </a>
        </div>
    </div>

</body>
</html>
