<!-- ── Crawl Controls (collapsible) ──────────────────────────────────────── -->
<div class="card mb-3 border-0 shadow-sm">
  <div class="card-header py-2 d-flex align-items-center justify-content-between">
    <div class="d-flex align-items-center gap-3 flex-grow-1 flex-wrap">
      <!-- Always-visible: project + domain + run loader + action buttons -->
      <select id="project-id" class="form-select form-select-sm" style="max-width:200px;" required>
        <option value="">Select project</option>
        <?php foreach ($projects as $project): ?>
          <option value="<?= htmlspecialchars($project['id']) ?>" data-domain="<?= htmlspecialchars($project['website_url'] ?? '') ?>">
            <?= htmlspecialchars($project['business_name'] ?: $project['website_url']) ?>
          </option>
        <?php endforeach; ?>
      </select>
      <input type="text" class="form-control form-control-sm" id="domain" placeholder="https://example.com" style="max-width:220px;" required>
      <div class="input-group input-group-sm" style="max-width:280px;">
        <select id="previous-run-id" class="form-select form-select-sm"><option value="">Load previous run</option></select>
        <button class="btn btn-outline-secondary btn-sm" type="button" id="load-run-btn">Load</button>
      </div>
      <button class="btn btn-primary btn-sm" type="button" id="start-crawl-btn"><i class="bi bi-play-fill me-1"></i>Start Crawl</button>
      <button class="btn btn-outline-secondary btn-sm" type="button" id="refresh-btn"><i class="bi bi-arrow-clockwise"></i></button>
      <button class="btn btn-outline-secondary btn-sm" type="button" id="open-categories-btn" title="Manage page categories"><i class="bi bi-tags me-1"></i>Categories</button>
      <span id="crawl-status-text" class="small text-muted">No active crawl.</span>
    </div>
    <!-- Expand advanced settings -->
    <button class="btn btn-sm btn-link text-muted p-0 ms-2 flex-shrink-0" type="button"
            data-bs-toggle="collapse" data-bs-target="#crawl-advanced"
            aria-expanded="false" aria-controls="crawl-advanced" title="Advanced crawl settings">
      <i class="bi bi-sliders"></i>
    </button>
  </div>
  <!-- Advanced settings (collapsed by default) -->
  <div class="collapse" id="crawl-advanced">
    <div class="card-body border-top py-3">
      <form id="crawl-form" class="row g-2" action="javascript:void(0);" novalidate>
        <div class="col-md-4">
          <label class="form-label small">User Agent</label>
          <select id="user-agent" class="form-select form-select-sm">
            <option value="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36" selected>Chrome Desktop</option>
            <option value="Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:126.0) Gecko/20100101 Firefox/126.0">Firefox Desktop</option>
            <option value="Mozilla/5.0 (Macintosh; Intel Mac OS X 13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Safari/605.1.15">Safari Mac</option>
            <option value="Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)">Googlebot</option>
            <option value="CAE CrawlBot/1.0">CAE CrawlBot</option>
          </select>
        </div>
        <div class="col-md-2">
          <label class="form-label small">Max Depth</label>
          <input type="number" class="form-control form-control-sm" id="max-depth" value="2" min="0" max="8">
        </div>
        <div class="col-md-2">
          <label class="form-label small">Max Pages</label>
          <input type="number" class="form-control form-control-sm" id="max-pages" value="0" min="0" placeholder="0 = unlimited">
        </div>
        <div class="col-md-2">
          <label class="form-label small">Concurrency</label>
          <input type="number" class="form-control form-control-sm" id="concurrency" value="5" min="1" max="20">
        </div>
      </form>
    </div>
  </div>
</div>

<!-- ── Audit Sections nav ─────────────────────────────────────────────────── -->
<div class="card mb-3 border-0 shadow-sm">
  <div class="card-body py-2">
    <ul class="nav nav-pills flex-wrap gap-1" id="section-tabs">
      <li class="nav-item"><button class="nav-link active" data-section="summary">
        <i class="bi bi-grid-3x3-gap me-1"></i>Summary
      </button></li>
      <li class="nav-item"><button class="nav-link" data-section="technical">
        <i class="bi bi-gear me-1"></i>Technical
      </button></li>
      <li class="nav-item"><button class="nav-link" data-section="onpage">
        <i class="bi bi-file-text me-1"></i>On-Page
      </button></li>
      <li class="nav-item"><button class="nav-link" data-section="allpages">
        <i class="bi bi-list-ul me-1"></i>All Pages
      </button></li>
      <li class="nav-item"><button class="nav-link" data-section="content-analysis">
        <i class="bi bi-paragraph me-1"></i>Content
      </button></li>
      <li class="nav-item"><button class="nav-link" data-section="images">
        <i class="bi bi-image me-1"></i>Images
      </button></li>
      <li class="nav-item"><button class="nav-link" data-section="links">
        <i class="bi bi-link-45deg me-1"></i>Links
      </button></li>
      <li class="nav-item"><button class="nav-link" data-section="schema">
        <i class="bi bi-code-slash me-1"></i>Schema
      </button></li>
      <li class="nav-item"><button class="nav-link" data-section="cwv">
        <i class="bi bi-speedometer2 me-1"></i>PageSpeed
      </button></li>
      <li class="nav-item"><button class="nav-link" data-section="comparison">
        <i class="bi bi-arrow-left-right me-1"></i>Compare
      </button></li>
      <li class="nav-item"><button class="nav-link" data-section="sitelevel">
        <i class="bi bi-globe2 me-1"></i>Site-Level
      </button></li>
    </ul>
  </div>
</div>

<div id="section-summary" class="section-panel">

  <!-- Toolbar: diff banner + export button -->
  <div id="diff-banner" class="mb-3"></div>

  <!-- Hidden elements kept for JS compatibility -->
  <span id="summary-pages"   class="d-none">0</span>
  <span id="summary-issues"  class="d-none">—</span>
  <span id="summary-pending" class="d-none">0</span>
  <span id="summary-last"    class="d-none">N/A</span>
  <span id="summary-status"  class="d-none">Idle</span>
  <span id="summary-project" class="d-none">—</span>
  <span id="summary-domain"  class="d-none">—</span>
  <ul   id="status-dist"     class="d-none"></ul>
  <ul   id="depth-dist"      class="d-none"></ul>
  <ul   id="ctype-dist"      class="d-none"></ul>
  <ul   id="orphan-sample"   class="d-none"></ul>
  <div  id="action-queue-container" class="d-none"></div>
  <span id="summary-issues-badge"   class="d-none"></span>
  <span id="health-score-badge"     class="d-none"></span>
  <span id="health-score-label"     class="d-none"></span>

  <!-- The Audit Deck -->
  <div id="audit-deck">
    <div class="text-center py-5 text-muted" id="deck-placeholder">
      <i class="bi bi-search fs-1 d-block mb-3 opacity-25"></i>
      <div class="fw-semibold">Select a project and load a crawl run</div>
      <div class="small mt-1">The audit deck will appear here automatically.</div>
    </div>
  </div>

</div><!-- /section-summary -->

<style>
/* ── Global audit table: no text wrap ────────────────────────── */
.no-datatable th,
.no-datatable td,
#tab-table th,
#tab-table td,
#tech-table th,
#tech-table td,
#full-audit-table th,
#full-audit-table td {
  white-space: nowrap;
}
/* URL cells get ellipsis overflow instead of horizontal scroll */
#tab-table td[style*="max-width"],
#tech-table td[style*="max-width"],
.row-url { overflow: hidden; text-overflow: ellipsis; }

/* ── Audit Deck styles ─────────────────────────────────────── */
.pitch-issue-row {
  padding: 10px 14px; margin-bottom: 5px;
  background: #fafafa; border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; transition: background .15s;
}
.pitch-issue-row:hover { background: #f0f4ff; }
.pitch-issue-label { font-size:.85rem; color:#1e293b; font-weight:500; flex:1; line-height:1.3; }
.pitch-count-badge { font-size:.7rem; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.deck-section-badge {
  display:inline-flex; align-items:center; gap:5px;
  font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 8px; border-radius:20px; margin-bottom:8px;
}
.ps-score-ring {
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.ps-score-num { font-size:1.6rem; font-weight:800; line-height:1; }
.ps-metric { display:flex; justify-content:space-between; align-items:center; padding:5px 0; border-bottom:1px solid #f1f5f9; font-size:.82rem; }
.ps-metric:last-child { border-bottom:none; }

@media print {
  /* ── Hide all chrome ── */
  .savit-topbar, #sidebar, #sidebar-overlay,
  .card-header button, .card-header .btn, .card-header .btn-group,
  .section-panel:not(#section-summary), #section-tabs,
  .topbar-toggle, #diff-banner, #deck-placeholder,
  #deck-run-ps-btn, #cwv-stored-results, .d-none,
  footer, nav { display:none!important; }

  /* ── Full-width layout ── */
  * { -webkit-print-color-adjust:exact!important; print-color-adjust:exact!important; }
  html, body { background:#fff!important; margin:0; padding:0; font-size:9pt!important; color:#0f172a!important; }
  #app-wrapper, #main-content { display:block!important; margin:0!important; padding:0!important; }
  #main-content .p-4 { padding:12pt!important; }
  #section-summary { display:block!important; }
  #audit-deck { padding:0!important; }

  /* ── Page breaks ── */
  .card { break-inside:avoid; page-break-inside:avoid; }
  .row { break-inside:avoid; page-break-inside:avoid; }
  .pitch-issue-row { break-inside:avoid; }

  /* ── Cards: remove shadows, keep borders ── */
  .card {
    box-shadow:none!important;
    border:1px solid #e2e8f0!important;
    margin-bottom:10pt!important;
    border-radius:6pt!important;
  }
  .card-header { background:#f8fafc!important; padding:8pt 12pt!important; }
  .card-body   { padding:10pt 12pt!important; }

  /* ── Coloured gradient covers print correctly ── */
  [style*="linear-gradient"] { -webkit-print-color-adjust:exact!important; }

  /* ── Progress bars ── */
  [style*="background:#22c55e"],
  [style*="background:#f59e0b"],
  [style*="background:#ef4444"] { -webkit-print-color-adjust:exact!important; }

  /* ── Suppress link annotations ── */
  a[href]:after { content:"" !important; }
  a { color:inherit!important; text-decoration:none!important; }

  /* ── Canvas (health ring) ── */
  canvas { display:block!important; }
}
</style>

<!-- Performance moved to Analytics Engine at /Savit/Analytics/ -->

<div id="section-performance-redirect" class="section-panel d-none">
  <div class="card border-0 shadow-sm p-4 text-center">
    <i class="bi bi-bar-chart-line-fill text-primary" style="font-size:2.5rem;opacity:.5;"></i>
    <div class="mt-3 fw-semibold">Performance data has moved</div>
    <p class="text-muted small mt-1">GA4, GSC, and local performance are now in the dedicated Analytics Engine.</p>
    <a id="analytics-engine-link" href="#" class="btn btn-primary mt-2">
      <i class="bi bi-bar-chart-line-fill me-1"></i>Open Analytics Engine
    </a>
  </div>
</div>

<!-- KEEP this dummy div so section switching code doesn't break -->
<div id="section-performance" class="section-panel d-none">
  <div class="card border-0 shadow-sm mb-4">
    <div class="card-header p-0 bg-white border-bottom">
      <ul class="nav nav-tabs border-0 px-3 pt-2" id="perf-tabs"></ul>
    </div>
    <div class="card-body p-0">

      <!-- Days selector -->
      <div class="d-flex align-items-center gap-2 px-3 py-2 border-bottom bg-light">
        <span class="small text-muted">Period:</span>
        <div class="btn-group btn-group-sm" id="perf-days-selector">
          <button type="button" class="btn btn-outline-secondary active" data-days="7">7d</button>
          <button type="button" class="btn btn-outline-secondary" data-days="28">28d</button>
          <button type="button" class="btn btn-outline-secondary" data-days="90">90d</button>
        </div>
        <button class="btn btn-sm btn-outline-secondary ms-auto" id="perf-refresh-btn" type="button">
          <i class="bi bi-arrow-clockwise"></i>
        </button>
      </div>

      <!-- ── Overview sub-tab ── -->
      <div id="perf-pane-overview" class="p-4">
        <div class="row g-3 mb-4" id="perf-overview-kpis">
          <div class="col-12 text-center text-muted py-4" id="perf-overview-empty">
            <i class="bi bi-bar-chart" style="font-size:2rem;opacity:.3;"></i>
            <div class="mt-2 small">Select a project to load performance data.</div>
          </div>
        </div>
        <div class="row g-3">
          <div class="col-lg-6">
            <div class="fw-semibold small mb-2"><i class="bi bi-activity me-1 text-primary"></i>Sessions Trend</div>
            <canvas id="perf-sessions-chart" height="120" style="display:none;"></canvas>
            <div id="perf-trend-empty" class="text-muted small">—</div>
          </div>
          <div class="col-lg-6">
            <div class="fw-semibold small mb-2"><i class="bi bi-search me-1 text-primary"></i>GSC Summary</div>
            <div id="perf-gsc-summary">—</div>
          </div>
        </div>
      </div>

      <!-- ── Top Pages sub-tab ── -->
      <div id="perf-pane-top-pages" class="d-none">
        <div class="table-responsive" style="max-height:520px;overflow:auto;">
          <table class="table table-sm table-hover align-middle mb-0 no-datatable" id="perf-pages-table">
            <thead class="table-light sticky-top">
              <tr>
                <th>URL Path</th>
                <th class="text-end">Sessions</th>
                <th class="text-end">Clicks</th>
                <th class="text-end">Impr.</th>
                <th class="text-end">CTR</th>
                <th class="text-end">Position</th>
              </tr>
            </thead>
            <tbody id="perf-pages-tbody">
              <tr><td colspan="6" class="text-muted text-center py-4">Load a project to see page performance.</td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- ── Search sub-tab ── -->
      <div id="perf-pane-search" class="d-none">
        <div class="table-responsive" style="max-height:520px;overflow:auto;">
          <table class="table table-sm table-hover align-middle mb-0 no-datatable" id="perf-queries-table">
            <thead class="table-light sticky-top">
              <tr>
                <th>Query</th>
                <th class="text-end">Clicks</th>
                <th class="text-end">Impressions</th>
                <th class="text-end">CTR</th>
                <th class="text-end">Position</th>
              </tr>
            </thead>
            <tbody id="perf-queries-tbody">
              <tr><td colspan="5" class="text-muted text-center py-4">Load a project to see search queries.</td></tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- ── Local sub-tab ── -->
      <div id="perf-pane-local" class="p-4 d-none">
        <div id="perf-local-content">
          <div class="text-muted small">Load a project to see local performance data.</div>
        </div>
      </div>

    </div><!-- /card-body -->
  </div><!-- /card -->
</div><!-- /section-performance -->

<div id="section-technical" class="section-panel d-none">
  <div class="card mb-4">
    <div class="card-header p-0">
      <ul class="nav nav-tabs border-0 px-3 pt-2" id="tech-tabs">
        <li class="nav-item"><button class="nav-link active small" data-tech-tab="tech_security">Security &amp; Response</button></li>
        <li class="nav-item"><button class="nav-link small" data-tech-tab="tech_canonical">Canonical</button></li>
        <li class="nav-item"><button class="nav-link small" data-tech-tab="tech_schema">Schema</button></li>
        <li class="nav-item"><button class="nav-link small" data-tech-tab="tech_speed">Site Speed</button></li>
        <li class="nav-item"><button class="nav-link small" data-tech-tab="tech_jscss">JS &amp; CSS</button></li>
      </ul>
    </div>
    <div class="card-body p-0">
      <div class="d-flex gap-2 align-items-center flex-wrap px-3 py-2 border-bottom bg-light">
        <input type="text" class="form-control form-control-sm" id="tech-search" placeholder="🔍 Search URL…" style="width:200px;">
        <div class="d-flex gap-2 align-items-center ms-1" id="tech-quick-filters">
          <span class="small text-muted">Quick:</span>
          <label class="form-check-label small d-flex align-items-center gap-1 me-1">
            <input class="form-check-input mt-0" type="checkbox" id="tech-qf-noindex"> Not Indexable
          </label>
          <label class="form-check-label small d-flex align-items-center gap-1 me-1">
            <input class="form-check-input mt-0" type="checkbox" id="tech-qf-redirect"> Redirects
          </label>
          <label class="form-check-label small d-flex align-items-center gap-1 me-1">
            <input class="form-check-input mt-0" type="checkbox" id="tech-qf-slow"> Slow (&gt;3s)
          </label>
          <label class="form-check-label small d-flex align-items-center gap-1">
            <input class="form-check-input mt-0" type="checkbox" id="tech-qf-errors"> Errors (4xx/5xx)
          </label>
        </div>
        <div class="ms-auto d-flex gap-2 align-items-center">
          <span id="tech-total" class="small text-muted"></span>
          <button class="btn btn-sm btn-outline-secondary" id="tech-prev" type="button">Prev</button>
          <button class="btn btn-sm btn-outline-secondary" id="tech-next" type="button">Next</button>
        </div>
      </div>
      <div class="table-responsive" style="max-height:520px;overflow:auto;">
        <table class="table table-sm table-hover align-middle mb-0 no-datatable" id="technical-detail-table" style="min-width:1200px;">
          <thead class="table-light sticky-top" id="tech-detail-thead"></thead>
          <tbody id="tech-detail-tbody">
            <tr><td class="text-muted text-center py-4">Select a tab to load technical data.</td></tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="card-footer d-flex justify-content-between align-items-center py-2 small text-muted">
      <span id="tech-page-info"></span>
    </div>
  </div>
</div>

<div id="section-onpage" class="section-panel d-none">
  <div class="card mb-4">
    <div class="card-header fw-semibold">On-Page Issue Explorer</div>
    <div class="card-body">
      <ul class="nav nav-tabs mb-3" id="audit-tabs">
        <li class="nav-item"><button class="nav-link active" data-tab="all_urls">All URLs</button></li>
        <li class="nav-item"><button class="nav-link" data-tab="meta_tags">Meta Tags</button></li>
        <li class="nav-item"><button class="nav-link" data-tab="url_issues">URL Issues</button></li>
        <li class="nav-item"><button class="nav-link" data-tab="schema_markup">Schema</button></li>
        <li class="nav-item"><button class="nav-link" data-tab="content">Content</button></li>
        <li class="nav-item"><button class="nav-link" data-tab="images">Images</button></li>
        <li class="nav-item"><button class="nav-link" data-tab="inlinks">Inlinks</button></li>
        <li class="nav-item"><button class="nav-link" data-tab="outlinks">Outlinks</button></li>
        <li class="nav-item"><button class="nav-link" data-tab="external_links">External Links</button></li>
      </ul>
      <!-- On-Page: search + quick filters -->
      <div class="d-flex gap-2 mb-2 align-items-center flex-wrap">
        <input type="text" class="form-control form-control-sm" id="tab-search" placeholder="🔍 Search…" style="width:200px;">
        <div id="tab-quick-filters" class="d-flex gap-1 flex-wrap"></div>
        <div class="ms-auto d-flex gap-2 align-items-center">
          <button class="btn btn-outline-success btn-sm" id="export-csv" type="button">CSV</button>
          <button class="btn btn-outline-info btn-sm" id="export-json" type="button">JSON</button>
          <span class="small text-muted" id="tab-page-info"></span>
          <button class="btn btn-sm btn-outline-secondary" id="tab-prev" type="button">Prev</button>
          <button class="btn btn-sm btn-outline-secondary" id="tab-next" type="button">Next</button>
        </div>
      </div>
      <div class="table-responsive table-scroll-wrap" style="max-height:520px;overflow:auto;" id="tab-scroll">
        <table class="table table-sm align-middle no-datatable table-sticky-col" id="tab-table">
          <thead class="table-light sticky-top" id="tab-thead"></thead>
          <tbody id="tab-tbody"></tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div id="section-sitelevel" class="section-panel d-none">
  <div class="row g-4">
    <div class="col-lg-5">
      <div class="card mb-4 border-0 shadow-sm">
        <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
          Site Health Overview
          <button class="btn btn-sm btn-outline-primary" id="site-rescan-btn" type="button"><i class="bi bi-arrow-clockwise me-1"></i>Re-scan</button>
        </div>
        <div class="card-body">
          <div class="row g-3 mb-3">
            <div class="col-4 text-center">
              <div class="small text-muted">Indexed Pages</div>
              <div id="site-indexed-pages" class="fs-4 fw-bold">—</div>
            </div>
            <div class="col-4 text-center">
              <div class="small text-muted">Sitemap URLs</div>
              <div id="site-sitemap-count" class="fs-4 fw-bold">—</div>
            </div>
            <div class="col-4 text-center">
              <div class="small text-muted">Schema Pages</div>
              <div id="site-schema-count" class="fs-4 fw-bold">—</div>
            </div>
          </div>
          <hr>
          <ul class="list-unstyled mb-0 small">
            <li class="mb-2"><strong>Project:</strong> <span id="site-project-name">—</span></li>
            <li class="mb-2"><strong>Domain:</strong> <span id="site-domain">—</span></li>
            <li class="mb-2 d-flex justify-content-between"><span><strong>Robots.txt</strong></span> <span id="site-robots"><span class="text-muted">Load a crawl run</span></span></li>
            <li class="mb-2 d-flex justify-content-between"><span><strong>Sitemap.xml</strong></span> <span id="site-sitemap"><span class="text-muted">Load a crawl run</span></span></li>
            <li class="mb-2 d-flex justify-content-between"><span><strong>Structured Data</strong></span> <span id="site-schema"><span class="text-muted">Load a crawl run</span></span></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="col-lg-7">
      <div class="card mb-4 border-0 shadow-sm">
        <div class="card-header fw-semibold">Robots.txt &amp; Sitemap Issues</div>
        <div class="card-body" id="site-issues-body">
          <p class="text-muted small">Load a crawl run and click Re-scan to check robots.txt disallows, sitemap health, and cross-reference sitemap URLs against your crawl data.</p>
        </div>
      </div>
      <div class="card mb-4 border-0 shadow-sm">
        <div class="card-header fw-semibold">Disallow Rules</div>
        <div class="card-body p-0">
          <ul class="list-group list-group-flush" id="site-disallows-list">
            <li class="list-group-item small text-muted">Scan to populate.</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ── All Pages section (46-column crawl data table) ────────────────────── -->
<div id="section-allpages" class="section-panel d-none">
  <div class="card mb-4 border-0 shadow-sm">
    <div class="card-header fw-semibold d-flex justify-content-between align-items-center flex-wrap gap-2">
      <span>All Pages — Full Crawl Data</span>
      <div class="d-flex gap-2 align-items-center flex-wrap">
        <input type="text"   class="form-control form-control-sm" id="fa-search"  placeholder="🔍 Search URL or title…" style="width:210px;">
        <select class="form-select form-select-sm" id="fa-status" style="width:150px;">
          <option value="all">All Statuses</option>
          <option value="ok">200 OK</option>
          <option value="redirect">3xx Redirect</option>
          <option value="4xx">4xx Error</option>
          <option value="5xx">5xx Error</option>
          <option value="slow">Slow (&gt;3s)</option>
        </select>
        <select class="form-select form-select-sm" id="fa-type" style="width:130px;">
          <option value="html" selected>HTML Pages</option>
          <option value="all">All Types</option>
          <option value="image">Images</option>
          <option value="other">Other</option>
        </select>
        <select class="form-select form-select-sm" id="fa-indexability" style="width:130px;">
          <option value="all">All Indexability</option>
          <option value="indexable">Indexable</option>
          <option value="noindex">Not Indexable</option>
        </select>
        <select class="form-select form-select-sm" id="fa-category" style="width:130px;">
          <option value="all">All Categories</option>
        </select>
        <label class="small text-muted mb-0">Limit:</label>
        <input type="number" class="form-control form-control-sm" id="fa-limit" value="200" min="10" max="1000" style="width:72px;">
        <button class="btn btn-sm btn-outline-secondary" id="noise-toggle" type="button">⊘ Noise</button>
        <button class="btn btn-sm btn-outline-secondary" id="print-report-btn" type="button"><i class="bi bi-printer"></i></button>
      </div>
    </div>
    <div class="card-body p-0">
      <!-- Quick-filter presets row -->
      <div class="d-flex gap-1 flex-wrap px-3 py-2 border-bottom bg-light" id="fa-presets">
        <span class="small text-muted me-1 align-self-center">Quick:</span>
        <button class="btn btn-xs btn-outline-secondary active" data-preset="all"         style="font-size:11px;padding:1px 8px;">All</button>
        <button class="btn btn-xs btn-outline-danger"            data-preset="broken"      style="font-size:11px;padding:1px 8px;">4xx Broken</button>
        <button class="btn btn-xs btn-outline-danger"            data-preset="server-err"  style="font-size:11px;padding:1px 8px;">5xx Errors</button>
        <button class="btn btn-xs btn-outline-warning"           data-preset="slow"        style="font-size:11px;padding:1px 8px;">Slow (&gt;3s)</button>
        <button class="btn btn-xs btn-outline-warning"           data-preset="no-title"    style="font-size:11px;padding:1px 8px;">Missing Title</button>
        <button class="btn btn-xs btn-outline-warning"           data-preset="title-long"  style="font-size:11px;padding:1px 8px;">Title &gt;60</button>
        <button class="btn btn-xs btn-outline-warning"           data-preset="no-meta"     style="font-size:11px;padding:1px 8px;">Missing Meta</button>
        <button class="btn btn-xs btn-outline-warning"           data-preset="meta-long"   style="font-size:11px;padding:1px 8px;">Meta &gt;160</button>
        <button class="btn btn-xs btn-outline-warning"           data-preset="no-h1"       style="font-size:11px;padding:1px 8px;">Missing H1</button>
        <button class="btn btn-xs btn-outline-info"              data-preset="noindex"     style="font-size:11px;padding:1px 8px;">Noindex</button>
        <button class="btn btn-xs btn-outline-secondary"         data-preset="duplicate"   style="font-size:11px;padding:1px 8px;">Duplicate</button>
        <button class="btn btn-xs btn-outline-secondary"         data-preset="no-canonical"style="font-size:11px;padding:1px 8px;">No Canonical</button>
        <button class="btn btn-xs btn-outline-secondary"         data-preset="low-read"    style="font-size:11px;padding:1px 8px;">Low Readability</button>
        <button class="btn btn-xs btn-outline-secondary"         data-preset="pdf"         style="font-size:11px;padding:1px 8px;">PDFs</button>
      </div>
      <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom small text-muted">
        <span id="fa-count">—</span>
        <span id="fa-sort-info"></span>
      </div>
      <div class="table-responsive" style="max-height:620px;overflow:auto;">
        <table class="table table-sm table-hover align-middle mb-0 no-datatable" id="full-audit-table" style="min-width:4400px;">
          <thead class="table-light sticky-top" id="full-audit-thead"></thead>
          <tbody id="full-audit-tbody">
            <tr><td class="text-muted text-center py-4">Select a project and crawl run, then navigate here to load all page data.</td></tr>
          </tbody>
        </table>
      </div>
      <div class="px-3 py-2 border-top bg-light small text-muted">
        ⁽¹⁾ <strong>Size (bytes)</strong> uses the HTTP <code>Content-Length</code> header which is not sent by HTTP/2 servers using chunked transfer encoding. Use <strong>Transferred (bytes)</strong> for actual page size on HTTP/2 sites.
      </div>
    </div>
  </div>
</div>

<!-- ── Content Analysis section ───────────────────────────────────────────── -->
<div id="section-content-analysis" class="section-panel d-none">
  <div class="row g-4">
    <div class="col-lg-6">
      <div class="card mb-4">
        <div class="card-header fw-semibold">Duplicate Content Groups</div>
        <div class="card-body p-0 table-responsive">
          <table class="table table-sm table-hover mb-0 no-datatable" id="dup-groups-table">
            <thead class="table-light"><tr><th>#</th><th>Pages Sharing Content</th><th>Sample URLs</th></tr></thead>
            <tbody><tr><td colspan="3" class="text-muted text-center py-3">Run a crawl to see duplicates.</td></tr></tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card mb-4">
        <div class="card-header fw-semibold">Canonical Issues</div>
        <div class="card-body p-0 table-responsive">
          <table class="table table-sm table-hover mb-0 no-datatable" id="canonical-table">
            <thead class="table-light"><tr><th>URL</th><th>Canonical Points To</th><th>Status</th></tr></thead>
            <tbody><tr><td colspan="3" class="text-muted text-center py-3">Run a crawl to see canonical issues.</td></tr></tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card mb-4">
        <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
          Heading Structure Audit
          <div class="d-flex gap-2">
            <button class="btn btn-sm btn-outline-secondary" id="heading-prev" type="button">Prev</button>
            <button class="btn btn-sm btn-outline-secondary" id="heading-next" type="button">Next</button>
          </div>
        </div>
        <div class="card-body p-0 table-responsive">
          <table class="table table-sm table-hover mb-0 no-datatable" id="heading-table">
            <thead class="table-light"><tr><th style="min-width:240px;">URL</th><th>H1</th><th>H2s</th><th>H3s</th><th>Sample H2s</th><th>Issues</th></tr></thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ── Link Equity section ─────────────────────────────────────────────────── -->
<div id="section-links" class="section-panel d-none">
  <div class="row g-4">
    <div class="col-lg-8">
      <div class="card mb-4">
        <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
          Internal Link Equity (by inlink count)
          <div class="d-flex gap-2">
            <span id="link-orphan-count" class="badge bg-danger-subtle text-danger small"></span>
            <button class="btn btn-sm btn-outline-secondary" id="link-prev" type="button">Prev</button>
            <button class="btn btn-sm btn-outline-secondary" id="link-next" type="button">Next</button>
          </div>
        </div>
        <div class="card-body p-0 table-responsive">
          <table class="table table-sm table-hover mb-0 no-datatable" id="link-equity-table">
            <thead class="table-light"><tr><th>URL</th><th>Inlinks</th><th>Top Anchors</th></tr></thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="card mb-4">
        <div class="card-header fw-semibold">Anchor Text Distribution</div>
        <div class="card-body p-0">
          <ul class="list-group list-group-flush" id="anchor-dist-list"></ul>
        </div>
      </div>
      <div class="card mb-4">
        <div class="card-header fw-semibold">Crawl Budget Breakdown</div>
        <div class="card-body" id="crawl-budget-body">
          <p class="text-muted small">Load a crawl run to see budget analysis.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ── Schema section ─────────────────────────────────────────────────────── -->
<div id="section-schema" class="section-panel d-none">
  <div class="row g-4">
    <div class="col-md-4">
      <div class="card mb-4">
        <div class="card-header fw-semibold">Schema Summary</div>
        <div class="card-body" id="schema-summary-body">
          <p class="text-muted small">Load a crawl run to see schema data.</p>
        </div>
      </div>
    </div>
    <div class="col-md-8">
      <div class="card mb-4">
        <div class="card-header fw-semibold">Schema Validation Results</div>
        <div class="card-body p-0 table-responsive">
          <table class="table table-sm table-hover mb-0 no-datatable" id="schema-table">
            <thead class="table-light"><tr><th>URL</th><th>Type</th><th>Valid</th><th>Missing Fields</th></tr></thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ── Core Web Vitals section ────────────────────────────────────────────── -->
<div id="section-cwv" class="section-panel d-none">

  <!-- Stored results (auto-loaded from last crawl) -->
  <div id="cwv-stored-results" class="mb-4">
    <div class="text-center py-4 text-muted small">
      <div class="spinner-border spinner-border-sm mb-2"></div><br>Loading PageSpeed data…
    </div>
  </div>

  <!-- Manual / re-run section -->
  <div class="card border-0 shadow-sm">
    <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
      <span><i class="bi bi-arrow-repeat me-2"></i>Run New PageSpeed Test</span>
      <div class="d-flex gap-2 align-items-center">
        <input type="text" class="form-control form-control-sm" id="cwv-url" placeholder="https://example.com (defaults to homepage)" style="width:300px;">
        <button class="btn btn-sm btn-primary" id="cwv-run-btn" type="button">
          <i class="bi bi-play-fill me-1"></i>Run Test
        </button>
      </div>
    </div>
    <div class="card-body" id="cwv-body">
      <p class="text-muted small mb-0">
        Results are automatically saved and will appear next time you load this crawl run.
        Requires <code>PAGESPEED_API_KEY</code> in <code>.env</code>.
      </p>
    </div>
  </div>
</div>

<!-- ── Crawl Comparison section ───────────────────────────────────────────── -->
<div id="section-comparison" class="section-panel d-none">
  <div class="card mb-4">
    <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
      Crawl Comparison
      <div class="d-flex gap-2 align-items-center">
        <select class="form-select form-select-sm" id="compare-run-a" style="width:200px;">
          <option value="">Run A (baseline)</option>
        </select>
        <span class="text-muted small">vs</span>
        <select class="form-select form-select-sm" id="compare-run-b" style="width:200px;">
          <option value="">Run B (latest)</option>
        </select>
        <button class="btn btn-sm btn-primary" id="compare-btn" type="button">Compare</button>
      </div>
    </div>
    <div class="card-body" id="comparison-body">
      <p class="text-muted">Select two crawl runs and click Compare to see what changed.</p>
    </div>
  </div>
</div>

<!-- ── Page Categories modal ─────────────────────────────────────────────── -->
<div class="modal fade" id="categoriesModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="bi bi-tags me-2"></i>Page Categories</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p class="text-muted small mb-3">Categories tag pages based on URL rules. The <strong>Category</strong> column appears in all tables. <strong>Noise Pages</strong> are excluded from all filters by default.</p>

        <!-- Existing categories -->
        <div id="cat-list" class="mb-4">
          <p class="text-muted small">Select a project first.</p>
        </div>

        <hr>
        <h6 class="fw-semibold mb-3">Add New Category</h6>
        <div class="row g-3">
          <div class="col-md-4">
            <label class="form-label small">Name</label>
            <input type="text" class="form-control form-control-sm" id="cat-name" placeholder="e.g. Blog, Service, About">
          </div>
          <div class="col-md-3">
            <label class="form-label small">Colour</label>
            <select class="form-select form-select-sm" id="cat-color">
              <option value="primary">Blue (Primary)</option>
              <option value="success">Green (Success)</option>
              <option value="warning">Yellow (Warning)</option>
              <option value="danger">Red (Danger)</option>
              <option value="info">Teal (Info)</option>
              <option value="secondary" selected>Grey (Secondary)</option>
              <option value="dark">Dark</option>
            </select>
          </div>
          <div class="col-md-5">
            <label class="form-label small">Match Type</label>
            <select class="form-select form-select-sm" id="cat-match-type" onchange="toggleCatMatchValue()">
              <option value="path_prefix">URL Path Prefix (e.g. /blog/)</option>
              <option value="regex">Regex Pattern</option>
              <option value="url_list">Exact URL List (one per line)</option>
              <option value="noise_builtin">Built-in Noise Detection</option>
            </select>
          </div>
          <div class="col-12" id="cat-match-value-wrap">
            <label class="form-label small" id="cat-match-label">Path Prefix</label>
            <textarea class="form-control form-control-sm font-monospace" id="cat-match-value" rows="2" placeholder="/blog/"></textarea>
            <div class="form-text small" id="cat-match-hint">Pages whose URL contains this prefix will be tagged.</div>
          </div>
          <div class="col-12 d-flex align-items-center gap-3">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="cat-exclude">
              <label class="form-check-label small" for="cat-exclude">Exclude from filters (like Noise Pages)</label>
            </div>
            <button class="btn btn-primary btn-sm ms-auto" type="button" id="cat-save-btn">Add Category</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ── SERP Preview modal ─────────────────────────────────────────────────── -->
<div class="modal fade" id="serpPreviewModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">SERP Preview</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">
        <p class="text-muted small mb-3">Approximate Google search result appearance. Actual display may vary.</p>
        <div style="font-family:arial,sans-serif;max-width:600px;">
          <div id="serp-url" class="small text-success mb-1" style="font-size:14px;"></div>
          <div id="serp-title" class="text-primary fw-normal mb-1" style="font-size:20px;line-height:1.3;cursor:pointer;text-decoration:none;"></div>
          <div id="serp-meta" class="text-dark" style="font-size:14px;line-height:1.58;color:#4d5156;"></div>
        </div>
        <hr>
        <div class="row g-3 mt-1">
          <div class="col-md-6">
            <label class="form-label small fw-semibold">Title (<span id="serp-title-len">0</span> chars)</label>
            <div id="serp-title-bar" class="progress" style="height:6px;"><div class="progress-bar" style="width:0%"></div></div>
            <div class="d-flex justify-content-between small text-muted mt-1"><span>0</span><span class="text-success">30</span><span class="text-warning">60</span><span class="text-danger">70+</span></div>
          </div>
          <div class="col-md-6">
            <label class="form-label small fw-semibold">Meta Description (<span id="serp-meta-len">0</span> chars)</label>
            <div id="serp-meta-bar" class="progress" style="height:6px;"><div class="progress-bar" style="width:0%"></div></div>
            <div class="d-flex justify-content-between small text-muted mt-1"><span>0</span><span class="text-success">70</span><span class="text-warning">160</span><span class="text-danger">200+</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="pageDetailModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Page Detail</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body" id="page-detail-body"></div>
    </div>
  </div>
</div>
