{# Data Mesh tab nav — uses hardcoded paths, no url_for so endpoint renames can't break it #}
<style>
.dm-nav { display:flex; gap:4px; padding:10px 30px 0; border-bottom:1px solid #1e3a6e; flex-wrap:wrap; align-items:flex-end; }
.dm-nav .dm-label { font-size:9px; color:#5a6e8c; padding:0 6px 8px; text-transform:uppercase; letter-spacing:.6px; }
.dm-nav a { padding:5px 11px; border-radius:6px 6px 0 0; font-size:11px; font-weight:600; text-decoration:none; color:#7a8cb0; background:#0f1e36; border:1px solid #1e3a6e; border-bottom:none; transition:color .15s; }
.dm-nav a.active { color:#ff9800; background:#16213e; border-color:#ff9800; }
.dm-nav a:hover:not(.active) { color:#eaeaea; }
</style>
<div class="dm-nav">
  <span class="dm-label">Data Mesh</span>
  <a href="/data/mesh" class="{{ 'active' if request.path == '/data/mesh' else '' }}">Overview</a>
  <a href="/data/domains" class="{{ 'active' if request.path == '/data/domains' else '' }}">Domains</a>
  <a href="/data/products" class="{{ 'active' if request.path == '/data/products' else '' }}">Products</a>
  <a href="/data/contracts" class="{{ 'active' if request.path == '/data/contracts' else '' }}">Contracts</a>
  <a href="/data/governance" class="{{ 'active' if request.path == '/data/governance' else '' }}">Governance</a>
  <a href="/data/csp" class="{{ 'active' if request.path == '/data/csp' else '' }}">CSP</a>
</div>