{# Sidebar navigation — fixed left column #}
<aside class="fixed left-0 top-12 bottom-0 w-64 bg-white border-r border-slate-200 overflow-y-auto z-40">
  <div class="p-4">
    <div class="flex items-center gap-2 mb-6">
      <div class="w-8 h-8 bg-brand-600 rounded-lg flex items-center justify-center">
        <span class="text-white font-bold text-sm">L</span>
      </div>
      <div>
        <h1 class="text-lg font-bold text-slate-900 leading-tight">Launchpad</h1>
        <p class="text-[10px] text-slate-400 leading-tight">Internal Developer Platform</p>
      </div>
    </div>

    <nav class="space-y-6">
      {# Dashboard #}
      <div>
        <a href="{% url 'dashboard' %}"
           class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors
                  {% if request.path == '/' %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center">&#9632;</span>
          Dashboard
        </a>
      </div>

      {# Services #}
      <div>
        <p class="px-3 mb-1 text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Services</p>
        <a href="{% url 'services_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/services' in request.path and 'search' not in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#9881;</span> All Services
        </a>
        <a href="{% url 'search' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/search' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#128269;</span> Search
        </a>
        <a href="{% url 'templates_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/templates' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#128196;</span> Templates
        </a>
      </div>

      {# Collaboration #}
      <div>
        <p class="px-3 mb-1 text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Collaboration</p>
        <a href="{% url 'teams_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/teams' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#128101;</span> Teams
        </a>
        <a href="{% url 'connectors_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/connectors' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#128279;</span> Connectors
        </a>
      </div>

      {# Lifecycle #}
      <div>
        <p class="px-3 mb-1 text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Lifecycle</p>
        <a href="{% url 'environments_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/environments' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#128230;</span> Environments
        </a>
        <a href="{% url 'pipelines_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/pipelines' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#8594;</span> Pipelines
        </a>
        <a href="{% url 'deployments_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/deployments' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#128640;</span> Deployments
        </a>
      </div>

      {# Security #}
      <div>
        <p class="px-3 mb-1 text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Security</p>
        <a href="{% url 'secrets_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/secrets' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#128274;</span> Secrets Vault
        </a>
        <a href="{% url 'rules_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/rules' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#128220;</span> Rules & Policies
        </a>
        <a href="{% url 'flags_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/flags' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#127987;</span> Feature Flags
        </a>
      </div>

      {# Observability #}
      <div>
        <p class="px-3 mb-1 text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Observability</p>
        <a href="{% url 'audit_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/audit' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#128209;</span> Audit Trail
        </a>
        <a href="{% url 'events_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/events' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#9889;</span> Events
        </a>
        <a href="{% url 'notifications_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/notifications' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#128276;</span> Notifications
          {% if unread_count %}<span class="ml-auto bg-red-500 text-white text-[10px] px-1.5 py-0.5 rounded-full">{{ unread_count }}</span>{% endif %}
        </a>
        <a href="{% url 'scheduling_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/schedule' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#128337;</span> Scheduled Jobs
        </a>
      </div>

      {# Administration #}
      <div>
        <p class="px-3 mb-1 text-[10px] font-semibold text-slate-400 uppercase tracking-wider">Administration</p>
        <a href="{% url 'integrations_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/integrations' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#128268;</span> Integrations
        </a>
        <a href="{% url 'config_list' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/config' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#9881;</span> Config Settings
        </a>
        <a href="{% url 'health_index' %}"
           class="flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm transition-colors
                  {% if '/health' in request.path %}bg-brand-50 text-brand-700{% else %}text-slate-600 hover:bg-slate-50{% endif %}">
          <span class="w-5 text-center text-xs">&#9829;</span> Health & Compliance
        </a>
      </div>
    </nav>
  </div>
</aside>