<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root { --primary: #f0c040; --bg-dark: #0a0a14; --bg-card: #12121e; --text: #e8e8ec; --text-muted: #8888a0; --border: #2a2a3e; --gold-gradient: linear-gradient(135deg, #f0c040, #d4a830); }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: var(--bg-dark); color: var(--text); min-height: 100vh; }
        .top-bar { background: #1a1a2e; border-bottom: 1px solid var(--border); padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; }
        .top-bar .logo { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 800; text-decoration: none; }
        .top-bar .logo span { background: var(--gold-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .top-bar .logo .light { color: #fff; -webkit-text-fill-color: #fff; }
        .top-bar a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; margin-left: 15px; }
        .top-bar a:hover { color: var(--primary); }
        .main { max-width: 1200px; margin: 0 auto; padding: 30px 20px; }
        .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 30px; }
        .btn { display: inline-block; padding: 10px 24px; border-radius: 8px; font-weight: 600; font-size: 0.9rem; text-decoration: none; border: none; cursor: pointer; background: var(--gold-gradient); color: #000; transition: all 0.3s; }
        .btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(240,192,64,0.3); }
        .btn-danger { background: #e74c3c; color: #fff; }
        .btn-danger:hover { box-shadow: 0 4px 15px rgba(231,76,60,0.3); }
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 6px; }
        .form-control { width: 100%; padding: 10px 14px; background: var(--bg-dark); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-size: 0.9rem; outline: none; }
        .form-control:focus { border-color: var(--primary); }
        .text-muted { color: var(--text-muted); font-size: 0.85rem; }
        .text-link { color: var(--primary); text-decoration: none; }
        .error-text { color: #e74c3c; font-size: 0.8rem; margin-top: 4px; }
        .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 20px; font-size: 0.85rem; }
        .alert-success { background: rgba(111,207,151,0.1); border: 1px solid rgba(111,207,151,0.2); color: #6fcf97; }
        .alert-error { background: rgba(231,76,60,0.1); border: 1px solid rgba(231,76,60,0.2); color: #e74c3c; }
        h1 { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin-bottom: 20px; }
        input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px var(--bg-dark) inset !important; -webkit-text-fill-color: var(--text) !important; }
    </style>
</head>
<body>
    <div class="top-bar">
        <a href="{{ route('home') }}" class="logo"><span>Auto</span><span class="light">Diag</span></a>
        <div>
            <a href="{{ route('dashboard') }}">Dashboard</a>
            <a href="{{ route('shop') }}">Shop</a>
            <form method="POST" action="{{ route('logout') }}" style="display:inline">
                @csrf
                <button type="submit" style="background:none;border:none;color:#8888a0;cursor:pointer;font-family:inherit;font-size:0.9rem;margin-left:15px">Logout</button>
            </form>
        </div>
    </div>
    <div class="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
        {{ $slot }}
    </div>
</body>
</html>
