<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}NinjaStack UI{% endblock %}</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f7fa; color: #1a1a2e; line-height: 1.6; }
    .container { max-width: 1200px; margin: 0 auto; padding: 1rem; }
    nav { background: #1a1a2e; color: #fff; padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
    nav a { color: #a0aec0; text-decoration: none; font-size: 0.9rem; }
    nav a:hover, nav a.active { color: #fff; }
    nav .brand { font-weight: 700; font-size: 1.1rem; color: #fff; margin-right: auto; }
    .card { background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); padding: 1.25rem; margin-bottom: 1rem; }
    table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
    th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid #e2e8f0; }
    th { background: #f7fafc; font-weight: 600; color: #4a5568; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
    tr:hover { background: #f7fafc; }
    button, .btn { padding: 0.4rem 0.9rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; font-weight: 500; }
    .btn-primary { background: #4c51bf; color: #fff; }
    .btn-primary:hover { background: #434190; }
    .btn-danger { background: #e53e3e; color: #fff; }
    .btn-danger:hover { background: #c53030; }
    .btn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
    input, select, textarea { padding: 0.4rem 0.6rem; border: 1px solid #cbd5e0; border-radius: 4px; font-size: 0.85rem; width: 100%; }
    input:focus, select:focus, textarea:focus { outline: none; border-color: #4c51bf; box-shadow: 0 0 0 2px rgba(76,81,191,0.2); }
    .validation-error { color: #e53e3e; font-size: 0.8rem; margin-top: 0.2rem; }
    .badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
    .badge-sql { background: #ebf4ff; color: #3182ce; }
    .badge-mongo { background: #f0fff4; color: #38a169; }
    .badge-graph { background: #faf5ff; color: #805ad5; }
    .badge-vector { background: #fffaf0; color: #dd6b20; }
    .toolbar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
    .pagination { display: flex; gap: 0.5rem; align-items: center; justify-content: center; margin-top: 1rem; }
    {% block extra_styles %}{% endblock %}
  </style>
</head>
<body>
  <nav>
    <span class="brand">NinjaStack</span>
    <a href="/crud/">CRUD Viewer</a>
    <a href="/chat/">Chat</a>
  </nav>
  <div class="container">
    {% block content %}{% endblock %}
  </div>
  {% block scripts %}{% endblock %}
</body>
</html>
