<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Recept Importáló{% endblock %}</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=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="icon" type="image/svg+xml" href="/assets/logo_notext_white.svg">
    <style>
        :root {
            --bg: #0d1117;
            --surface: #161b22;
            --surface2: #1c2128;
            --accent: #0088cc;
            --accent-hover: #006da3;
            --accent-light: #00aaff;
            --accent-glow: rgba(0,136,204,0.3);
            --text: #e6edf3;
            --text-dim: #8b949e;
            --success: #238636;
            --success-text: #3fb950;
            --warning: #d29922;
            --danger: #da3633;
            --border: #30363d;
            --input-bg: #0d1117;
            --radius: 12px;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* --- Nav --- */
        nav {
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            padding: 0.75rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }
        nav .brand {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            font-size: 1.25rem;
            font-weight: 700;
            text-decoration: none;
        }
        nav .brand .brand-white { color: var(--text); }
        nav .brand .brand-blue { color: var(--accent-light); }
        nav .brand img {
            height: 36px;
            width: auto;
        }
        nav a {
            color: var(--text-dim);
            text-decoration: none;
            padding: 0.4rem 0.75rem;
            border-radius: var(--radius);
            transition: background 0.15s, color 0.15s;
        }
        nav a:hover, nav a.active {
            background: var(--surface2);
            color: var(--text);
        }
        nav .version {
            margin-left: auto;
            font-size: 0.8rem;
            color: var(--text-dim);
        }

        /* --- Layout --- */
        .container {
            max-width: 900px;
            margin: 2rem auto;
            padding: 0 1rem;
            flex: 1;
        }

        /* --- Cards --- */
        .card {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .card h2 {
            margin-bottom: 1rem;
            font-size: 1.25rem;
        }

        /* --- Forms --- */
        label {
            display: block;
            margin-bottom: 0.3rem;
            font-weight: 500;
            color: var(--text-dim);
            font-size: 0.9rem;
        }
        input[type="text"], input[type="url"], input[type="password"], textarea {
            width: 100%;
            padding: 0.6rem 0.8rem;
            background: var(--input-bg);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            color: var(--text);
            font-size: 0.95rem;
            margin-bottom: 1rem;
            transition: border-color 0.15s;
            font-family: inherit;
        }
        input:focus, textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-glow);
        }
        textarea { resize: vertical; min-height: 80px; }

        /* --- Buttons --- */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.6rem 1.2rem;
            border: none;
            border-radius: var(--radius);
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s, transform 0.1s;
            color: #fff;
            font-family: inherit;
        }
        .btn:active { transform: scale(0.97); }
        .btn-primary { background: var(--accent); }
        .btn-primary:hover { background: var(--accent-hover); }
        .btn-secondary { background: var(--surface2); border: 1px solid var(--border); }
        .btn-secondary:hover { background: #2d333b; }
        .btn-success { background: var(--success); }
        .btn-success:hover { background: #1a7f2b; }
        .btn:disabled { opacity: 0.5; cursor: not-allowed; }

        /* --- Alerts --- */
        .alert {
            padding: 0.75rem 1rem;
            border-radius: var(--radius);
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }
        .alert-success { background: rgba(35,134,54,0.15); border: 1px solid var(--success); color: var(--success-text); }
        .alert-warning { background: rgba(210,153,34,0.15); border: 1px solid var(--warning); color: var(--warning); }
        .alert-danger  { background: rgba(218,54,51,0.15); border: 1px solid var(--danger); color: #f85149; }

        /* --- Spinner --- */
        .spinner {
            display: inline-block;
            width: 1.2rem;
            height: 1.2rem;
            border: 2px solid rgba(255,255,255,0.3);
            border-top-color: var(--accent-light);
            border-radius: 50%;
            animation: spin 0.6s linear infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* --- Footer --- */
        .site-footer {
            text-align: center;
            padding: 1.5rem 1rem;
            color: var(--text-dim);
            font-size: 0.8rem;
            border-top: 1px solid var(--border);
            margin-top: auto;
        }
        .site-footer a {
            color: var(--accent-light);
            text-decoration: none;
        }
        .site-footer a:hover { text-decoration: underline; }
        .site-footer .tagline {
            font-style: italic;
            margin-top: 0.3rem;
            color: #6e7681;
        }

        /* --- Misc --- */
        .hidden { display: none !important; }
        .mb-1 { margin-bottom: 0.5rem; }
        .mb-2 { margin-bottom: 1rem; }
        .mt-1 { margin-top: 0.5rem; }
        .mt-2 { margin-top: 1rem; }
        .text-dim { color: var(--text-dim); }
        .text-success { color: var(--success-text); }
        .text-danger { color: #f85149; }
        .text-warning { color: var(--warning); }
        .flex { display: flex; gap: 0.75rem; align-items: center; }
        .flex-wrap { flex-wrap: wrap; }
        .grow { flex: 1; }
    </style>
    {% block head %}{% endblock %}
</head>
<body>
    <nav>
        <a href="/" class="brand">
            <img src="/assets/logo.svg" alt="felhom.eu">
            <span class="brand-white">Recept</span> <span class="brand-blue">Importáló</span>
        </a>
        <a href="/import" {% if request.path == '/import' %}class="active"{% endif %}>Importálás</a>
        <a href="/settings" {% if request.path == '/settings' %}class="active"{% endif %}>Beállítások</a>
        <span class="version">{{ version }}</span>
    </nav>

    <div class="container">
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% for cat, msg in messages %}
        <div class="alert alert-{{ cat }}">{{ msg }}</div>
        {% endfor %}
        {% endwith %}

        {% block content %}{% endblock %}
    </div>

    <footer class="site-footer">
        Powered by <a href="https://felhom.eu" target="_blank">felhom.eu</a>
        <div class="tagline">Saját felhőd, saját szabályaid</div>
    </footer>

    {% block scripts %}{% endblock %}
</body>
</html>
