<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Gap Finder Analytics')</title>
    <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=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bg: #f5f7fa;
            --bg-card: #ffffff;
            --bg-hover: #eef1f6;
            --border: #e2e8f0;
            --border-focus: #94a3b8;
            --text: #1e293b;
            --text-muted: #64748b;
            --accent: #5b8def;
            --accent-hover: #4a7ed9;
            --accent-soft: rgba(91, 141, 239, 0.12);
            --success: #22c55e;
            --success-soft: rgba(34, 197, 94, 0.12);
            --warning: #eab308;
            --warning-soft: rgba(234, 179, 8, 0.15);
            --error: #ef4444;
            --error-soft: rgba(239, 68, 68, 0.12);
            --radius: 12px;
            --radius-sm: 8px;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
            --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
        }
        * { box-sizing: border-box; }
        body {
            font-family: 'DM Sans', system-ui, sans-serif;
            background: var(--bg);
            color: var(--text);
            margin: 0;
            min-height: 100vh;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }
        .app-wrap { display: flex; flex-direction: column; min-height: 100vh; }

        /* Nav */
        .nav {
            background: var(--bg-card);
            border-bottom: 1px solid var(--border);
            padding: 0.875rem 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1rem;
            box-shadow: var(--shadow);
        }
        .nav-brand {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--accent);
            text-decoration: none;
            letter-spacing: -0.02em;
        }
        .nav-brand:hover { color: var(--accent-hover); }
        .nav-links {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            flex-wrap: wrap;
        }
        .nav-links a {
            color: var(--text-muted);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9375rem;
            padding: 0.5rem 0.875rem;
            border-radius: var(--radius-sm);
            transition: background 0.15s, color 0.15s;
        }
        .nav-links a:hover { color: var(--text); background: var(--bg-hover); }
        .nav-links a.active { color: var(--accent); background: var(--accent-soft); }

        /* Main */
        main {
            flex: 1;
            padding: 1.25rem;
            max-width: 1280px;
            margin: 0 auto;
            width: 100%;
        }
        @media (min-width: 640px) { main { padding: 1.5rem 1.75rem; } }
        @media (min-width: 1024px) { main { padding: 2rem; } }

        /* Typography */
        h1 { font-size: 1.625rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--text); letter-spacing: -0.02em; }
        h2 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--text); }
        @media (min-width: 640px) { h1 { font-size: 1.75rem; } }
        p { margin: 0 0 0.75rem; }
        .muted { color: var(--text-muted); font-size: 0.875rem; }
        code { background: var(--bg-hover); padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.8125rem; color: var(--text); }

        /* Cards */
        .card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 1.25rem;
            margin-bottom: 1rem;
            box-shadow: var(--shadow);
        }
        @media (min-width: 640px) { .card { padding: 1.5rem; } }
        .card-title { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.03em; }
        .card-value { font-size: 1.5rem; font-weight: 700; color: var(--accent); }
        @media (min-width: 640px) { .card-value { font-size: 1.75rem; } }

        /* Grids */
        .grid { display: grid; gap: 1rem; }
        .grid-2 { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
        .grid-3 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
        @media (min-width: 640px) {
            .grid-2 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
            .grid-3 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
        }

        /* Tables – responsive wrapper */
        .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.25rem; }
        .table-wrap table { min-width: 600px; }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 0.625rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.875rem; }
        th { font-weight: 600; color: var(--text-muted); font-size: 0.8125rem; background: var(--bg); }
        tr:hover { background: var(--bg-hover); }
        @media (min-width: 640px) { th, td { padding: 0.75rem 1rem; } }
        pre { margin: 0; font-size: 0.75rem; max-height: 120px; overflow: auto; color: var(--text-muted); background: var(--bg); padding: 0.5rem; border-radius: var(--radius-sm); }

        /* Links & buttons */
        a { color: var(--accent); text-decoration: none; }
        a:hover { text-decoration: underline; }
        .btn {
            display: inline-block;
            padding: 0.5rem 1rem;
            font-weight: 600;
            font-size: 0.875rem;
            border-radius: var(--radius-sm);
            border: none;
            cursor: pointer;
            font-family: inherit;
            transition: background 0.15s, color 0.15s, border-color 0.15s;
        }
        .btn-primary { background: var(--accent); color: #fff; }
        .btn-primary:hover { background: var(--accent-hover); color: #fff; }
        .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
        .btn-ghost:hover { background: var(--bg-hover); color: var(--text); border-color: var(--border-focus); }
        .btn-sm { padding: 0.35rem 0.65rem; font-size: 0.8125rem; }

        /* Page actions (back + primary buttons) */
        .page-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 1rem; }
        .page-actions .btn { margin: 0; }

        /* Forms */
        label { display: block; font-weight: 500; margin-bottom: 0.25rem; color: var(--text-muted); font-size: 0.875rem; }
        input[type="text"], input[type="date"], input[type="email"], input[type="number"], select {
            padding: 0.5rem 0.75rem;
            border-radius: var(--radius-sm);
            background: var(--bg-card);
            color: var(--text);
            border: 1px solid var(--border);
            font-family: inherit;
            font-size: 0.875rem;
            transition: border-color 0.15s, box-shadow 0.15s;
        }
        input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
        input[type="file"] { color: var(--text); margin-right: 0.5rem; font-size: 0.875rem; }
        .form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
        .form-row label.inline { margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; }
        .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
        .filter-bar select { min-width: 120px; }

        /* Alerts & badges */
        .alert { padding: 0.875rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: 0.875rem; }
        .alert-success { background: var(--success-soft); color: #166534; border: 1px solid rgba(34, 197, 94, 0.3); }
        .alert-error { background: var(--error-soft); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.3); }
        .alert-info { background: var(--accent-soft); color: #1e40af; border: 1px solid rgba(91, 141, 239, 0.35); }
        .badge { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 6px; font-size: 0.75rem; font-weight: 600; }
        .badge-success { background: var(--success-soft); color: #166534; }
        .badge-warning { background: var(--warning-soft); color: #854d0e; }
        .badge-error { background: var(--error-soft); color: #b91c1c; }

        /* Pagination */
        nav.pagination, .pagination { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1rem; list-style: none; padding: 0; }
        nav.pagination li a, nav.pagination li span {
            display: inline-block; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
            background: var(--bg-card); color: var(--text); border: 1px solid var(--border);
            font-size: 0.875rem; text-decoration: none;
        }
        nav.pagination li a:hover { background: var(--bg-hover); border-color: var(--border-focus); color: var(--accent); }
        nav.pagination li.active span { background: var(--accent); color: #fff; border-color: var(--accent); }
        nav.pagination li.disabled span { color: var(--text-muted); opacity: 0.6; cursor: not-allowed; }

        /* Utility */
        .mt-1 { margin-top: 1rem; }
        .mt-2 { margin-top: 1.5rem; }
        .mb-0 { margin-bottom: 0; }
        .list-plain { list-style: none; padding: 0; margin: 0; }
        .list-plain li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
        .list-plain li:last-child { border-bottom: none; }
        .evidence-list { margin: 0.5rem 0 0 1rem; padding-left: 1rem; }
        .evidence-list li { margin: 0.25rem 0; }
        .reason-block { margin-bottom: 1rem; }
        .reason-block:last-child { margin-bottom: 0; }
        .mapping-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
        .mapping-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
        .mapping-form select { max-width: 160px; min-width: 100px; }
        .mapping-form input[type="text"] { width: 120px; min-width: 100px; }
        @media (max-width: 640px) { .mapping-form select { max-width: 140px; } .mapping-form input[type="text"] { width: 100%; } }
    </style>
    @stack('styles')
</head>
<body>
    <div class="app-wrap">
        <nav class="nav">
            <a href="{{ route('dashboard') }}" class="nav-brand">Gap Finder Analytics</a>
            <div class="nav-links">
                <a href="{{ route('dashboard') }}" class="{{ request()->routeIs('dashboard') ? 'active' : '' }}">Dashboard</a>
                <a href="{{ route('imports.index') }}" class="{{ request()->routeIs('imports.*') ? 'active' : '' }}">Imports</a>
                <a href="{{ route('compliance.index') }}" class="{{ request()->routeIs('compliance.*') ? 'active' : '' }}">Compliance</a>
                <a href="{{ route('map.index') }}" class="{{ request()->routeIs('map.*') ? 'active' : '' }}">Map</a>
            </div>
        </nav>
        <main>
            @if (session('success'))
                <div class="alert alert-success">{{ session('success') }}</div>
            @endif
            @if (session('error'))
                <div class="alert alert-error">{{ session('error') }}</div>
            @endif
            @yield('content')
        </main>
    </div>
    @stack('scripts')
</body>
</html>
