<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>{{ title or "NarrativeOps" }}</title>

  <!-- ✅ NEW: App favicon (uses existing logo safely) -->
  <link rel="icon" href="{{ url_for('static', filename='logo.png') }}">

  <style>
    :root{
      /* Match the light, professional theme you used in the old standalone index.html */
      --bg:#f6f7f9;
      --card:#ffffff;
      --border:#e6e8ee;
      --text:#101828;
      --muted:#667085;
      --shadow: 0 1px 2px rgba(0,0,0,.05);
      --shadow-soft: 0 20px 60px rgba(16,24,40,.08);
      --radius: 16px;

      --sidebar:#f1f3f7;
      --sidebar-2:#eef1f6;
      --accent:#2e7dd7;
      --accent-soft: rgba(46,125,215,.10);
    }

    *{ box-sizing:border-box; }

    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      font-size:15px;
      line-height:1.65;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    /* App layout */
    .app{
      min-height: 100vh;
      display:flex;
      padding: 26px 18px;
    }

    .shell{
      width: min(1180px, 100%);
      margin: 0 auto;
      display:flex;
      border-radius: 22px;
      overflow:hidden;
      box-shadow: var(--shadow-soft);
      border:1px solid var(--border);
      background: var(--card);
    }

    /* Sidebar */
    .sidebar{
      width: 280px;
      background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2));
      border-right: 1px solid rgba(16,24,40,.06);
      padding: 18px 14px;
      display:flex;
      flex-direction:column;
      gap: 14px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      padding: 10px 10px;
      border-radius: 14px;
    }

    .brand img{
      width: 36px;
      height: 36px;
      border-radius: 12px;
      object-fit: contain;
      flex-shrink:0;
    }

    .brand .name{
      font-weight: 800;
      letter-spacing: -0.01em;
      font-size: 15px;
      line-height: 1.2;
    }

    .brand .sub{
      margin-top: 2px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.2;
    }

    .nav{
      display:flex;
      flex-direction:column;
      gap: 6px;
      padding: 6px 6px;
    }

    .nav a{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 10px 10px;
      border-radius: 12px;
      color: #344054;
      text-decoration:none;
      font-weight: 650;
      font-size: 14px;
      user-select: none;
      cursor: pointer;
    }

    .nav a .dot{
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: rgba(52,64,84,.25);
    }

    .nav a:hover{
      background: rgba(46,125,215,.06);
    }

    .nav a.active{
      background: var(--accent-soft);
      color: #0b4aa2;
    }

    .nav a.active .dot{
      background: var(--accent);
    }

    .side-foot{
      margin-top:auto;
      padding: 10px 10px 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    /* Main container where page content goes */
    .main{
      flex:1;
      padding: 22px 24px 26px;
      background: linear-gradient(180deg, #ffffff, #fbfcfe);
    }

    /* Base card style (used by history/settings pages) */
    .card{
      background:var(--card);
      border:1px solid rgba(16,24,40,.08);
      border-radius: var(--radius);
      padding:16px 16px 14px;
      box-shadow: var(--shadow);
    }

    .muted{
      color: var(--muted);
    }

    /* Small screens */
    @media (max-width: 760px){
      .app{ padding: 14px 12px; }
      .shell{ flex-direction:column; }
      .sidebar{ width:100%; border-right:none; border-bottom:1px solid rgba(16,24,40,.06); }
      .nav{ flex-direction:row; overflow:auto; }
      .nav a{ white-space:nowrap; }
    }
  </style>
</head>

<body>
  <div class="app">
    <div class="shell">

      <aside class="sidebar">
        <div class="brand">
          <img src="{{ url_for('static', filename='logo.png') }}" alt="NarrativeOps logo">
          <div>
            <div class="name">NarrativeOps</div>
            <div class="sub">Read-only • Local</div>
          </div>
        </div>

        <nav class="nav" aria-label="Primary">
          <a href="{{ url_for('home') }}" class="{% if active_page == 'overview' %}active{% endif %}">
            <span class="dot"></span>System Overview
          </a>
          <a href="{{ url_for('history') }}" class="{% if active_page == 'history' %}active{% endif %}">
            <span class="dot"></span>Scan History
          </a>
          <a href="{{ url_for('settings') }}" class="{% if active_page == 'settings' %}active{% endif %}">
            <span class="dot"></span>Settings
          </a>
        </nav>

        <div class="side-foot">
          Quiet by default.<br>
          Local-only. No telemetry.
        </div>
      </aside>

      <main class="main">
        {% block content %}{% endblock %}
      </main>

    </div>
  </div>
</body>
</html>
