<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Land Feasibility') — LandFeasibility.in</title>
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=inter:300,400,500,600,700&family=jetbrains-mono:400,500" rel="stylesheet">
    {{-- Leaflet CSS --}}
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
    <style>
        :root {
            --primary: #2563eb;
            --primary-dark: #1d4ed8;
            --bg: #0f1117;
            --bg-card: #1a1d27;
            --bg-input: #12141c;
            --border: #2a2d3a;
            --border-focus: #2563eb;
            --text: #e4e6f0;
            --text-secondary: #7b809a;
            --text-muted: #4b5065;
            --green: #22c55e;
            --yellow: #eab308;
            --red: #ef4444;
            --orange: #f97316;
            --teal: #14b8a6;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.6; }
        a { color: var(--primary); text-decoration: none; }
        a:hover { color: #3b82f6; }

        /* Top bar */
        .portal-topbar { display: flex; align-items: center; gap: 12px; padding: 0 24px; height: 48px; background: var(--bg-card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
        .portal-topbar a.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; transition: color .15s; }
        .portal-topbar a.back-link:hover { color: var(--text); }
        .portal-topbar a.back-link svg { width: 14px; height: 14px; stroke: currentColor; }
        .portal-topbar .divider { width: 1px; height: 16px; background: var(--border); }
        .portal-topbar .page-title { font-size: 13px; font-weight: 600; color: var(--text); }

        /* Cards */
        .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; }

        /* Form */
        .form-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; display: block; letter-spacing: .03em; text-transform: uppercase; }
        .form-input { width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; padding: 9px 12px; font-size: 13px; color: var(--text); font-family: inherit; transition: border-color .15s; outline: none; }
        .form-input:focus { border-color: var(--border-focus); }
        .form-input::placeholder { color: var(--text-muted); }
        select.form-input option { background: #1a1d27; }
        .invalid-feedback { color: var(--red); font-size: 11px; margin-top: 4px; }
        .is-invalid { border-color: var(--red) !important; }

        /* Buttons */
        .btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 6px; font-size: 13px; font-weight: 500; border: none; cursor: pointer; text-decoration: none; transition: background .15s, opacity .15s; font-family: inherit; }
        .btn-primary { background: var(--primary); color: #fff; }
        .btn-primary:hover { background: var(--primary-dark); color: #fff; }
        .btn-secondary { background: transparent; color: var(--text-secondary); border: 1px solid var(--border); }
        .btn-secondary:hover { border-color: #3d4160; color: var(--text); }
        .btn-lg { padding: 12px 24px; font-size: 15px; }
        .btn:disabled { opacity: .5; cursor: not-allowed; }

        /* Badge */
        .badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }
        .badge-green { background: rgba(34,197,94,.15); color: #22c55e; }
        .badge-yellow { background: rgba(234,179,8,.15); color: #eab308; }
        .badge-red { background: rgba(239,68,68,.15); color: #ef4444; }
        .badge-blue { background: rgba(37,99,235,.15); color: #60a5fa; }
        .badge-teal { background: rgba(20,184,166,.15); color: #2dd4bf; }
        .badge-orange { background: rgba(249,115,22,.15); color: #fb923c; }

        /* Map */
        #map { height: 300px; border-radius: 8px; border: 1px solid var(--border); }

        /* Alerts */
        .alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 13px; display: flex; align-items: flex-start; gap: 8px; }
        .alert-error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.3); color: #fca5a5; }
        .alert-success { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); color: #86efac; }

        /* Footer */
        .portal-footer { text-align: center; padding: 24px; color: var(--text-muted); font-size: 12px; border-top: 1px solid var(--border); margin-top: 64px; }
    </style>
    @yield('head')
</head>
<body>

<div class="portal-topbar">
    @auth
        <a href="{{ route('admin.dashboard') }}" class="back-link">
            <svg viewBox="0 0 24 24" fill="none" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
            Admin Panel
        </a>
        <div class="divider"></div>
    @endauth
    <span class="page-title">@yield('title', 'Land Feasibility')</span>
</div>

<main>
@yield('content')
</main>

<footer class="portal-footer">
    &copy; {{ date('Y') }} LandFeasibility.in &mdash; AI-powered land analysis for India
</footer>

{{-- Lucide Icons --}}
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<script>lucide.createIcons();</script>
@yield('scripts')
</body>
</html>
